commit f59f8503ebf8e577830b19aa75b55d695f364517
Author: Ordenax Lead Engineer <lead@ordenax.sa>
Date:   Tue Oct 20 01:28:20 2026 +0300

    Ordenax landing website — initial release

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..cd6320e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+# OS / editors
+.DS_Store
+.idea/
+.vscode/
+
+# logs
+*.log
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..269c891
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,3 @@
+FROM nginx:alpine
+COPY . /usr/share/nginx/html
+EXPOSE 80
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f50cb0f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,40 @@
+# Ordenax Landing Website
+
+A static, bilingual (EN/AR), Apple-inspired marketing website for Ordenax — the Saudi grocery platform that connects shoppers, local stores, and wholesale suppliers.
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `index.html` | Homepage with hero, benefits, how it works, stats, testimonials, CTA |
+| `shoppers.html` | Consumer-facing page |
+| `stores.html` | Store owner page with pricing |
+| `wholesale.html` | Supplier / wholesale page |
+| `contact.html` | Contact form and office info |
+| `styles.css` | Shared stylesheet, animations, responsive layout |
+| `app.js` | Bilingual i18n, RTL switching, scroll animations, mobile nav, form validation |
+
+## Deploy to Coolify
+
+1. Push this repository to your Git provider.
+2. In Coolify, create a **Static Site** resource.
+3. Select this repository and the branch you want to deploy.
+4. Set the **Base Directory** to `/` (root).
+5. Leave **Build Command** empty.
+6. Set **Publish Directory** to `/` (root).
+7. Deploy.
+
+No build step is required. The site is pure HTML, CSS, and JavaScript.
+
+## Local preview
+
+```bash
+python3 -m http.server 8080
+# open http://localhost:8080
+```
+
+## Before going live
+
+1. Wire the contact form in `app.js` to your real form handler (it currently validates client-side and shows a success message).
+2. Replace placeholder app-store / phone links with real URLs.
+3. Add `og:url` and `<link rel="canonical">` once the domain is known.
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..de73e8a
--- /dev/null
+++ b/app.js
@@ -0,0 +1,724 @@
+/* Ordenax landing — EN/AR i18n, scroll animations, mobile nav and forms. */
+
+const STRINGS = {
+  en: {
+    // Nav
+    "nav.shoppers": "Shoppers",
+    "nav.stores": "Stores",
+    "nav.wholesale": "Wholesale",
+    "nav.contact": "Contact",
+    "nav.cta": "Get started",
+
+    "common.learnMore": "Learn more",
+    "common.seeHow": "See how it works",
+    "common.seePricing": "See pricing",
+
+    // Footer
+    "footer.tag": "Marketplace · POS · Wholesale — bilingual by construction.",
+    "footer.product": "Product",
+    "footer.company": "Company",
+    "footer.privacy": "Privacy",
+    "footer.terms": "Terms",
+    "footer.legal": "© 2026 Ordenax. Made in Saudi Arabia.",
+
+    // Home
+    "home.hero.eyebrow": "Saudi grocery platform",
+    "home.hero.title": "Groceries from your local stores, delivered.",
+    "home.hero.lede": "Shop, sell, and restock on one platform — in Arabic and English, online or offline.",
+    "home.hero.cta1": "Start shopping",
+    "home.hero.cta2": "Run your store",
+    "home.hero.badge1": "Bilingual EN / AR",
+    "home.hero.badge2": "Works without internet",
+    "home.hero.badge3": "SAR · VAT included",
+    "home.pillars.eyebrow": "One platform, three wins",
+    "home.pillars.title": "Built for every side of grocery",
+    "home.pillars.m.title": "Shop local",
+    "home.pillars.m.body": "Fresh groceries from nearby stores, same-day delivery, and stock you can actually trust.",
+    "home.pillars.p.title": "Sell smarter",
+    "home.pillars.p.body": "One simple POS for counter sales, app orders, and uninterrupted selling — even when the internet drops.",
+    "home.pillars.w.title": "Restock wholesale",
+    "home.pillars.w.body": "Refill shelves straight from suppliers with clear invoices, real-time catalogs, and no inventory traps.",
+    "home.how.eyebrow": "How it works",
+    "home.how.title": "From shelf to doorstep in three steps",
+    "home.how.s1.title": "Order",
+    "home.how.s1.body": "A shopper picks products from a nearby store — in English or Arabic.",
+    "home.how.s2.title": "Prepare",
+    "home.how.s2.body": "The store receives, packs and confirms the order on the Ordenax system.",
+    "home.how.s3.title": "Deliver",
+    "home.how.s3.body": "A delivery partner drops it at the door. The store keeps the payment directly.",
+    "home.stats.s1": "partner stores",
+    "home.stats.s2": "monthly orders",
+    "home.stats.s3": "average delivery",
+    "home.stats.s3suffix": " min",
+    "home.stats.s4": "languages",
+    "home.testimonials.eyebrow": "What partners say",
+    "home.testimonials.title": "Loved by stores. Trusted by shoppers.",
+    "home.testimonials.t1.body": "\"We doubled our weekly orders within two months. The system is simple and our customers love ordering in Arabic.\"",
+    "home.testimonials.t1.name": "Abdullah, Al-Salam Market",
+    "home.testimonials.t2.body": "\"I can shop from the same grocer I visit every week, but now it comes to my door. Same quality, less hassle.\"",
+    "home.testimonials.t2.name": "Noura, Riyadh",
+    "home.testimonials.t3.body": "\"Restocking used to take three phone calls. Now we order once and the invoice is ready before delivery.\"",
+    "home.testimonials.t3.name": "Fahad, Green Cart",
+    "home.cta.title": "Ready to shop, sell, or supply?",
+    "home.cta.lede": "Join the grocery platform built for the Kingdom.",
+    "home.cta.button": "Request a demo",
+
+    // Home — deeper content
+    "home.why.eyebrow": "Why Ordenax",
+    "home.why.title": "Grocery made simple for everyone.",
+    "home.why.lede": "We built Ordenax around one idea: your neighborhood store should be as easy to reach as a global app — and just as reliable.",
+
+    "home.shoppers.eyebrow": "For shoppers",
+    "home.shoppers.title": "Your weekly shop, done in minutes.",
+    "home.shoppers.lede": "No more crowded aisles, sold-out shelves, or wondering when your order will arrive.",
+    "home.shoppers.b1.title": "Shop stores you already trust",
+    "home.shoppers.b1.body": "Your favorite neighborhood grocer, bakery, and produce stand — all in one place.",
+    "home.shoppers.b2.title": "Get it fast",
+    "home.shoppers.b2.body": "Same-day delivery in as little as 25 minutes, because fresh shouldn't mean waiting.",
+    "home.shoppers.b3.title": "Never guess stock again",
+    "home.shoppers.b3.body": "If it's on the app, it's on the shelf. No substitutions you didn't ask for.",
+    "home.shoppers.b4.title": "Reorder in one tap",
+    "home.shoppers.b4.body": "Save your weekly basket and repeat it whenever life gets busy.",
+
+    "home.owners.eyebrow": "For store owners",
+    "home.owners.title": "Run your store, not your paperwork.",
+    "home.owners.lede": "Everything you need to sell more, stress less, and keep every riyal in your account.",
+    "home.owners.b1.title": "Keep every sale",
+    "home.owners.b1.body": "No commission. No withheld funds. Customer payments go straight to you.",
+    "home.owners.b2.title": "One screen, every channel",
+    "home.owners.b2.body": "Counter sales, app orders, and wholesale restocking — all flowing into one simple system.",
+    "home.owners.b3.title": "Sell even when offline",
+    "home.owners.b3.body": "The internet drops. Your sales don't. Everything syncs automatically once you're back online.",
+    "home.owners.b4.title": "Grow without the guesswork",
+    "home.owners.b4.body": "Real-time inventory, clear reports, and a direct line to nearby shoppers who want what you sell.",
+
+    // Shoppers
+    "shoppers.hero.eyebrow": "For shoppers",
+    "shoppers.hero.title": "Your neighborhood store, now in your pocket.",
+    "shoppers.hero.lede": "Order fresh groceries from trusted local stores and get same-day delivery — in Arabic or English.",
+    "shoppers.hero.cta": "Download the app",
+    "shoppers.benefits.eyebrow": "Why shop on Ordenax",
+    "shoppers.benefits.title": "Fresh, fast and familiar",
+    "shoppers.benefits.b1.title": "Same-day delivery",
+    "shoppers.benefits.b1.body": "Get your groceries in as little as 25 minutes from stores you already know.",
+    "shoppers.benefits.b2.title": "Real stock",
+    "shoppers.benefits.b2.body": "If it's on the app, it's on the shelf — no more canceled items after checkout.",
+    "shoppers.benefits.b3.title": "Bilingual by design",
+    "shoppers.benefits.b3.body": "Switch between Arabic and English anytime. Product names, search and checkout follow you.",
+    "shoppers.benefits.b4.title": "Support local",
+    "shoppers.benefits.b4.body": "Every order goes directly to a store in your community — your money stays in the neighborhood.",
+    "shoppers.benefits.b5.title": "Easy reorder",
+    "shoppers.benefits.b5.body": "Repeat your weekly list in one tap. Save favorites and scheduled baskets for busy days.",
+    "shoppers.benefits.b6.title": "Pay with confidence",
+    "shoppers.benefits.b6.body": "Choose cash on delivery or trusted local payment options. The store handles your payment directly.",
+    "shoppers.categories.eyebrow": "Everything you need",
+    "shoppers.categories.title": "From pantry to produce",
+    "shoppers.categories.lede": "Browse thousands of products across the categories your family uses every day.",
+    "shoppers.categories.l1": "Fresh fruit and vegetables",
+    "shoppers.categories.l2": "Dairy, eggs and chilled goods",
+    "shoppers.categories.l3": "Rice, oil, spices and staples",
+    "shoppers.categories.l4": "Household and personal care",
+    "shoppers.categories.l5": "Beverages, snacks and bakery",
+    "shoppers.faq.title": "Common questions",
+    "shoppers.faq.q1": "Who delivers my order?",
+    "shoppers.faq.a1": "Your chosen store prepares the order and a local delivery partner brings it to you. You can track the status in the app.",
+    "shoppers.faq.q2": "Can I pay with cash?",
+    "shoppers.faq.a2": "Yes. The store collects your payment directly — cash on delivery or local digital payments, whichever you prefer.",
+    "shoppers.faq.q3": "What if an item is out of stock?",
+    "shoppers.faq.a3": "Stores update availability in real time. If something changes, they will contact you to suggest a replacement or refund.",
+    "shoppers.cta.title": "Your first order is waiting",
+    "shoppers.cta.lede": "Download the app and shop the stores you already trust.",
+    "shoppers.cta.button": "Get the app",
+
+    // Stores
+    "stores.hero.eyebrow": "For store owners",
+    "stores.hero.title": "Turn your counter into a modern grocery business.",
+    "stores.hero.lede": "Get more orders, simplify daily work, and keep every payment in your own hands.",
+    "stores.hero.cta": "Request a demo",
+    "stores.benefits.eyebrow": "Why stores choose Ordenax",
+    "stores.benefits.title": "Everything you need to grow",
+    "stores.benefits.b1.title": "More orders",
+    "stores.benefits.b1.body": "Reach nearby shoppers through the app and turn your store into a local online brand.",
+    "stores.benefits.b2.title": "Your money, your account",
+    "stores.benefits.b2.body": "You collect customer payments directly. We never hold your funds or take a slice of every sale.",
+    "stores.benefits.b3.title": "One simple screen",
+    "stores.benefits.b3.body": "Counter sales and app orders flow into one place — no switching between apps and notebooks.",
+    "stores.benefits.b4.title": "Works without internet",
+    "stores.benefits.b4.body": "Keep ringing sales even when the connection drops. Everything syncs automatically once you're back online.",
+    "stores.benefits.b5.title": "Bilingual for your team",
+    "stores.benefits.b5.body": "Your staff can use Arabic or English — labels, receipts, and reports switch instantly.",
+    "stores.benefits.b6.title": "Restock in minutes",
+    "stores.benefits.b6.body": "Order wholesale supplies straight from the app, with clear invoices and predictable delivery.",
+    "stores.pricing.eyebrow": "Pricing",
+    "stores.pricing.title": "Simple subscriptions, no hidden cuts",
+    "stores.pricing.lede": "No marketplace commission. Just pick the POS plan that fits your store.",
+    "stores.pricing.period": "/month",
+    "stores.pricing.badge": "Most popular",
+    "stores.pricing.p1.title": "Starter",
+    "stores.pricing.p1.f1": "1 store location",
+    "stores.pricing.p1.f2": "Counter POS",
+    "stores.pricing.p1.f3": "Basic reports",
+    "stores.pricing.p1.f4": "Email support",
+    "stores.pricing.p2.title": "Growth",
+    "stores.pricing.p2.f1": "Up to 3 staff devices",
+    "stores.pricing.p2.f2": "Counter + app orders",
+    "stores.pricing.p2.f3": "Live inventory",
+    "stores.pricing.p2.f4": "Priority support",
+    "stores.pricing.p3.title": "Enterprise",
+    "stores.pricing.p3.f1": "Multiple branches",
+    "stores.pricing.p3.f2": "Advanced analytics",
+    "stores.pricing.p3.f3": "Wholesale integrations",
+    "stores.pricing.p3.f4": "Dedicated account manager",
+    "stores.pricing.cta": "Choose plan",
+    "stores.testimonials.eyebrow": "Store stories",
+    "stores.testimonials.title": "Built for Saudi stores",
+    "stores.testimonials.t1.body": "\"We used to write every order by hand. Now we manage counter, app and wholesale orders in one place.\"",
+    "stores.testimonials.t1.name": "Khalid, Al-Andalus Market",
+    "stores.testimonials.t2.body": "\"The bilingual interface made training our staff effortless. Sales kept flowing even during network issues.\"",
+    "stores.testimonials.t2.name": "Sara, Fresh Corner",
+    "stores.testimonials.t3.body": "\"Our customers pay us directly, and the subscription is predictable. No surprises at the end of the month.\"",
+    "stores.testimonials.t3.name": "Omar, Daily Mart",
+    "stores.cta.title": "Ready to upgrade your store?",
+    "stores.cta.lede": "Book a 15-minute demo and see how Ordenax fits your counter.",
+    "stores.cta.button": "Book a demo",
+
+    // Wholesale
+    "wholesale.hero.eyebrow": "For suppliers and distributors",
+    "wholesale.hero.title": "Supply the stores that feed the Kingdom.",
+    "wholesale.hero.lede": "A digital wholesale channel that connects your products to neighborhood stores across Saudi Arabia.",
+    "wholesale.hero.cta": "Become a supplier",
+    "wholesale.hero.cta2": "For stores",
+    "wholesale.suppliers.eyebrow": "Why suppliers partner with us",
+    "wholesale.suppliers.title": "Reach more stores with less overhead",
+    "wholesale.suppliers.b1.title": "Ready store network",
+    "wholesale.suppliers.b1.body": "Access hundreds of active grocery stores already ordering through Ordenax.",
+    "wholesale.suppliers.b2.title": "Demand insights",
+    "wholesale.suppliers.b2.body": "See what stores are buying, when they restock, and which products move fastest.",
+    "wholesale.suppliers.b3.title": "Reliable logistics",
+    "wholesale.suppliers.b3.body": "Coordinate deliveries through your own fleet or our trusted logistics partners.",
+    "wholesale.suppliers.b4.title": "Clear invoices",
+    "wholesale.suppliers.b4.body": "Every order generates an invoice with correct VAT breakdown and payment status.",
+    "wholesale.suppliers.b5.title": "Digital catalog",
+    "wholesale.suppliers.b5.body": "Publish SKUs, photos and prices once. Stores see updates in real time.",
+    "wholesale.suppliers.b6.title": "Local support",
+    "wholesale.suppliers.b6.body": "Work with a Saudi-based team that understands retail, seasons and supply cycles.",
+    "wholesale.stores.eyebrow": "For stores",
+    "wholesale.stores.title": "Restock without the runaround",
+    "wholesale.stores.lede": "Find what you need, compare suppliers, and keep your shelves full — all from one screen.",
+    "wholesale.stores.f1": "Wide catalog of groceries, household and chilled goods",
+    "wholesale.stores.f2": "Competitive wholesale prices updated daily",
+    "wholesale.stores.f3": "Predictable delivery windows you can plan around",
+    "wholesale.stores.f4": "One invoice per order with clear VAT",
+    "wholesale.stores.cta": "See store plans",
+    "wholesale.stores.panel.eyebrow": "How wholesale works",
+    "wholesale.stores.panel.l1": "Browse catalog",
+    "wholesale.stores.panel.v1": "1",
+    "wholesale.stores.panel.l2": "Place order",
+    "wholesale.stores.panel.v2": "2",
+    "wholesale.stores.panel.l3": "Receive delivery",
+    "wholesale.stores.panel.v3": "3",
+    "wholesale.stores.panel.l4": "Pay invoice",
+    "wholesale.stores.panel.v4": "4",
+    "wholesale.faq.title": "Wholesale questions",
+    "wholesale.faq.q1": "Who can become a supplier?",
+    "wholesale.faq.a1": "Licensed distributors, manufacturers and importers of food, beverages, household or personal-care products in Saudi Arabia.",
+    "wholesale.faq.q2": "How do stores pay?",
+    "wholesale.faq.a2": "Stores pay against the supplier's invoice through agreed payment terms — bank transfer, credit or cash on delivery.",
+    "wholesale.faq.q3": "Do I need to list my whole catalog?",
+    "wholesale.faq.a3": "No. Start with your best-moving items and expand as you see demand from the network.",
+    "wholesale.cta.title": "Grow your wholesale reach",
+    "wholesale.cta.lede": "Talk to our partnerships team and see how Ordenax fits your distribution business.",
+    "wholesale.cta.button": "Talk to sales",
+
+    // Contact
+    "contact.hero.eyebrow": "Contact",
+    "contact.hero.title": "Let's talk grocery.",
+    "contact.hero.lede": "Request a demo, become a partner store, or join our supplier network.",
+    "contact.form.eyebrow": "Get in touch",
+    "contact.form.title": "Send us a message",
+    "contact.form.lede": "Fill in the form and our team will reply within one business day.",
+    "contact.form.nameLabel": "Name",
+    "contact.form.namePlaceholder": "Your name",
+    "contact.form.emailLabel": "Email",
+    "contact.form.emailPlaceholder": "you@example.com",
+    "contact.form.phoneLabel": "Phone",
+    "contact.form.phonePlaceholder": "+966 50 000 0000",
+    "contact.form.interestLabel": "I'm interested in",
+    "contact.form.interest.default": "Select an option",
+    "contact.form.interest.store": "Running my store on Ordenax",
+    "contact.form.interest.shopper": "Shopping as a consumer",
+    "contact.form.interest.supplier": "Supplying products wholesale",
+    "contact.form.interest.other": "Something else",
+    "contact.form.messageLabel": "Message",
+    "contact.form.messagePlaceholder": "Tell us about your business",
+    "contact.form.submit": "Send message",
+    "contact.form.success": "Thank you — we'll be in touch soon.",
+    "contact.form.invalidEmail": "Please enter a valid email address.",
+    "contact.form.required": "Please fill in all required fields.",
+    "contact.info.office.title": "Headquarters",
+    "contact.info.office.body": "Riyadh, Kingdom of Saudi Arabia",
+    "contact.info.email.title": "Email",
+    "contact.info.phone.title": "Phone",
+    "contact.info.hours.title": "Business hours",
+    "contact.info.hours.body": "Sunday to Thursday, 9:00 AM – 6:00 PM KSA",
+    "contact.cta.title": "Prefer to talk now?",
+    "contact.cta.lede": "Call us during business hours or request a callback.",
+    "contact.cta.button": "Call +966 9200 123 45",
+  },
+
+  ar: {
+    "nav.shoppers": "المتسوّقون",
+    "nav.stores": "المتاجر",
+    "nav.wholesale": "الجملة",
+    "nav.contact": "تواصل",
+    "nav.cta": "ابدأ الآن",
+
+    "common.learnMore": "اعرف المزيد",
+    "common.seeHow": "كيف تعمل",
+    "common.seePricing": "الأسعار",
+
+    "footer.tag": "السوق · نقاط البيع · الجملة — ثنائية اللغة من الأساس.",
+    "footer.product": "المنتج",
+    "footer.company": "الشركة",
+    "footer.privacy": "الخصوصية",
+    "footer.terms": "الشروط",
+    "footer.legal": "© 2026 أورديناكس. صُنع في المملكة العربية السعودية.",
+
+    "home.hero.eyebrow": "منصة بقالة سعودية",
+    "home.hero.title": "بقالتك من متاجر حيّك، حتى باب البيت.",
+    "home.hero.lede": "تسوّق، بيع، ووردّد المخزون على منصة واحدة — بالعربية والإنجليزية، متصل أو غير متصل.",
+    "home.hero.cta1": "ابدأ التسوّق",
+    "home.hero.cta2": "أدِر متجرك",
+    "home.hero.badge1": "ثنائية اللغة EN / AR",
+    "home.hero.badge2": "تعمل دون اتصال",
+    "home.hero.badge3": "ريال سعودي · الضريبة مشمولة",
+    "home.trust.label": "ثقة متاجر الأحياء في",
+    "home.pillars.eyebrow": "منصة واحدة، ثلاثة مكاسب",
+    "home.pillars.title": "مبنية لكل جانب من البقالة",
+    "home.pillars.m.title": "تسوّق محليًا",
+    "home.pillars.m.body": "بقالة طازجة من متاجر قريبة، توصيل في نفس اليوم، ومخزون يمكنك الوثوق به فعلًا.",
+    "home.pillars.p.title": "بيع بذكاء",
+    "home.pillars.p.body": "نقطة بيع واحدة تجمع مبيعات الكاشير والطلبات الإلكترونية — تستمر حتى عند انقطاع الإنترنت.",
+    "home.pillars.w.title": "أعِد التخزين بالجملة",
+    "home.pillars.w.body": "أعِد ملء الرفوف مباشرة من المورّدين، بفواتير واضحة، كتالوجات لحظية، وبدون تعقيدات المخزون.",
+    "home.how.eyebrow": "كيف تعمل",
+    "home.how.title": "من الرف إلى باب البيت في ثلاث خطوات",
+    "home.how.s1.title": "اطلب",
+    "home.how.s1.body": "يختار المتسوّق منتجات من متجر قريب — بالعربية أو الإنجليزية.",
+    "home.how.s2.title": "جهّز",
+    "home.how.s2.body": "يتلقّى المتجر الطلب ويغلّفه ويؤكّده عبر نظام أورديناكس.",
+    "home.how.s3.title": "وصّل",
+    "home.how.s3.body": "يوصل شريك التوصيل الطلب إلى الباب، ويحتفظ المتجر بالمدفوعات مباشرة.",
+    "home.stats.s1": "متجر شريك",
+    "home.stats.s2": "طلب شهريًا",
+    "home.stats.s3": "متوسط التوصيل",
+    "home.stats.s3suffix": " دقيقة",
+    "home.stats.s4": "لغات",
+    "home.testimonials.eyebrow": "ماذا يقول الشركاء",
+    "home.testimonials.title": "يحبّه المتاجر. ويثق به المتسوّقون.",
+    "home.testimonials.t1.body": "\"ضاعفنا طلباتنا الأسبوعية في شهرين. النظام بسيط وعملاؤنا يحبّون الطلب بالعربية.\"",
+    "home.testimonials.t1.name": "عبدالله، سوق السلام",
+    "home.testimonials.t2.body": "\"أستطيع التسوّق من نفس البقال الذي أزوره كل أسبوع، لكن الآن يصل إلى باب بيتي. نفس الجودة، أقل جهد.\"",
+    "home.testimonials.t2.name": "نورة، الرياض",
+    "home.testimonials.t3.body": "\"كان إعادة التخزين يتطلّب ثلاث مكالمات هاتفية. الآن نطلب مرة واحدة والفاتورة جاهزة قبل التوصيل.\"",
+    "home.testimonials.t3.name": "فهد، العربة الخضراء",
+    "home.cta.title": "جاهز للتسوّق، البيع، أو التوريد؟",
+    "home.cta.lede": "انضم إلى منصة البقالة المصممة للمملكة.",
+    "home.cta.button": "اطلب عرضًا",
+
+    // Home — deeper content
+    "home.why.eyebrow": "لمَ أورديناكس",
+    "home.why.title": "البقالة أصبحت سهلة للجميع.",
+    "home.why.lede": "بنينا أورديناكس على فكرة واحدة: متجر حيك يجب أن يكون سهل الوصول كأي تطبيق عالمي — وموثوق مثله.",
+
+    "home.shoppers.eyebrow": "للمتسوّقين",
+    "home.shoppers.title": "تسوّقك الأسبوعي، ينتهي في دقائق.",
+    "home.shoppers.lede": "لا ممرات مزدحمة، لا رفوف فارغة، ولا تساؤل عن موعد وصول طلبك.",
+    "home.shoppers.b1.title": "تسوّق من متاجر تثق بها",
+    "home.shoppers.b1.body": "بقالتك المفضلة، المخبوزات، ومحل الخضروات — كلها في مكان واحد.",
+    "home.shoppers.b2.title": "احصل عليها بسرعة",
+    "home.shoppers.b2.body": "توصيل في نفس اليوم خلال 25 دقيقة، لأن الطازج لا يجب أن يعني الانتظار.",
+    "home.shoppers.b3.title": "لا تخمّن المخزون بعد الآن",
+    "home.shoppers.b3.body": "إذا كان المنتج في التطبيق فهو على الرف. لا بدائل لم تطلبها.",
+    "home.shoppers.b4.title": "أعِد الطلب بنقرة واحدة",
+    "home.shoppers.b4.body": "احفظ سلتك الأسبوعية وكرّرها كلما ازدحم الوقت.",
+
+    "home.owners.eyebrow": "لأصحاب المتاجر",
+    "home.owners.title": "أدِر متجرك، لا أوراقك.",
+    "home.owners.lede": "كل ما تحتاجه لبيع المزيد، والتوتر الأقل، والحفاظ على كل ريال في حسابك.",
+    "home.owners.b1.title": "احتفظ بكل بيعة",
+    "home.owners.b1.body": "لا عمولة. لا أموال محجوزة. مدفوعات العملاء تصل إليك مباشرة.",
+    "home.owners.b2.title": "شاشة واحدة، كل القنوات",
+    "home.owners.b2.body": "مبيعات الكاشير، طلبات التطبيق، وإعادة التخزين بالجملة — كلها في نظام واحد بسيط.",
+    "home.owners.b3.title": "بيع حتى دون اتصال",
+    "home.owners.b3.body": "الإنترنت ينقطع. المبيعات لا. كل شيء يتزامن تلقائيًا بمجرد عودة الاتصال.",
+    "home.owners.b4.title": "نمُ دون تخمين",
+    "home.owners.b4.body": "مخزون لحظي، تقارير واضحة، وخط مباشر مع المتسوّقين القريبين الذين يريدون ما تبيعه.",
+
+    "shoppers.hero.eyebrow": "للمتسوّقين",
+    "shoppers.hero.title": "متجر حيك، الآن في جيبك.",
+    "shoppers.hero.lede": "اطلب البقالة الطازجة من متاجر محلية موثوقة واحصل على توصيل في نفس اليوم — بالعربية أو الإنجليزية.",
+    "shoppers.hero.cta": "حمّل التطبيق",
+    "shoppers.benefits.eyebrow": "لمَ التسوّق عبر أورديناكس",
+    "shoppers.benefits.title": "طازج، سريع ومألوف",
+    "shoppers.benefits.b1.title": "توصيل في نفس اليوم",
+    "shoppers.benefits.b1.body": "احصل على بقالتك في 25 دقيقة فقط من المتاجر التي تعرفها.",
+    "shoppers.benefits.b2.title": "مخزون حقيقي",
+    "shoppers.benefits.b2.body": "إذا كان المنتج في التطبيق فهو على الرف — لا مزيد من إلغاء العناصر بعد الدفع.",
+    "shoppers.benefits.b3.title": "ثنائي اللغة من الأساس",
+    "shoppers.benefits.b3.body": "بدّل بين العربية والإنجليزية في أي وقت. أسماء المنتجات والبحث والدفع يتبعانك.",
+    "shoppers.benefits.b4.title": "ادعم المحلي",
+    "shoppers.benefits.b4.body": "كل طلب يذهب مباشرة إلى متجر في مجتمعك — مالك يبقى في الحي.",
+    "shoppers.benefits.b5.title": "إعادة الطلب بسهولة",
+    "shoppers.benefits.b5.body": "كرّر قائمتك الأسبوعية بنقرة واحدة. احفظ المفضلات والسلال المجدولة للأيام المزدحمة.",
+    "shoppers.benefits.b6.title": "ادفع بثقة",
+    "shoppers.benefits.b6.body": "اختر الدفع عند الاستلام أو خيارات دفع محلية موثوقة. المتجر يتولّى الدفع مباشرة.",
+    "shoppers.categories.eyebrow": "كل ما تحتاجه",
+    "shoppers.categories.title": "من المخزن إلى الخضروات",
+    "shoppers.categories.lede": "تصفّح آلاف المنتجات في الفئات التي تستخدمها عائلتك يوميًا.",
+    "shoppers.categories.l1": "فاكهة وخضروات طازجة",
+    "shoppers.categories.l2": "ألبان، بيض ومنتجات مبردة",
+    "shoppers.categories.l3": "أرز، زيت، بهارات ومواد أساسية",
+    "shoppers.categories.l4": "منتجات المنزل والعناية الشخصية",
+    "shoppers.categories.l5": "مشروبات، خفائف ومخبوزات",
+    "shoppers.faq.title": "أسئلة شائعة",
+    "shoppers.faq.q1": "من يوصّل طلبي؟",
+    "shoppers.faq.a1": "المتجر الذي اخترته يجهّز الطلب وشريك توصيل محلي يأتيك به. يمكنك تتبّع الحالة في التطبيق.",
+    "shoppers.faq.q2": "هل يمكن الدفع نقدًا؟",
+    "shoppers.faq.a2": "نعم. يحصّل المتجر المدفوعات مباشرة — الدفع عند الاستلام أو الدفع الرقمي المحلي، حسب رغبتك.",
+    "shoppers.faq.q3": "ماذا إذا نفذ المنتج من المخزون؟",
+    "shoppers.faq.a3": "تُحدّث المتاجر التوفر لحظيًا. إذا تغيّر شيء، سيتواصلون معك لاقتراح بديل أو استرداد.",
+    "shoppers.cta.title": "طلبك الأول بانتظارك",
+    "shoppers.cta.lede": "حمّل التطبيق وتسوّق من المتاجر التي تثق بها.",
+    "shoppers.cta.button": "احصل على التطبيق",
+
+    "stores.hero.eyebrow": "لأصحاب المتاجر",
+    "stores.hero.title": "حوّل كاشيرك إلى أعمال بقالة عصرية.",
+    "stores.hero.lede": "احصل على مزيد من الطلبات، بسّط العمل اليومي، وابقَ المدفوعات في يدك.",
+    "stores.hero.cta": "اطلب عرضًا",
+    "stores.benefits.eyebrow": "لمَ تختار المتاجر أورديناكس",
+    "stores.benefits.title": "كل ما تحتاجه للنمو",
+    "stores.benefits.b1.title": "مزيد من الطلبات",
+    "stores.benefits.b1.body": "وصل إلى المتسوّقين القريبين عبر التطبيق وحوّل متجرك إلى علامة محلية إلكترونية.",
+    "stores.benefits.b2.title": "مالك، حسابك",
+    "stores.benefits.b2.body": "تحصّل مدفوعات العملاء مباشرة. لا نحتفظ بأموالك ولا نأخذ نسبة من كل بيعة.",
+    "stores.benefits.b3.title": "شاشة واحدة بسيطة",
+    "stores.benefits.b3.body": "تتدفق مبيعات الكاشير وطلبات التطبيق في مكان واحد — لا حاجة للتنقل بين التطبيقات والدفاتر.",
+    "stores.benefits.b4.title": "تعمل دون اتصال",
+    "stores.benefits.b4.body": "واصل البيع حتى عند انقطاع الاتصال. كل شيء يتزامن تلقائيًا بمجرد عودة الاتصال.",
+    "stores.benefits.b5.title": "ثنائية اللغة لفريقك",
+    "stores.benefits.b5.body": "يمكن لموظفيك استخدام العربية أو الإنجليزية — الملصقات والفواتير والتقارير تتبدّل فورًا.",
+    "stores.benefits.b6.title": "أعِد التخزين في دقائق",
+    "stores.benefits.b6.body": "اطلب مستلزمات الجملة مباشرة من التطبيق، بفواتير واضحة وتوصيل متوقع.",
+    "stores.pricing.eyebrow": "الأسعار",
+    "stores.pricing.title": "اشتراكات بسيطة، بدون عمولات خفية",
+    "stores.pricing.lede": "لا توجد عمولة سوق. اختر خطة نقاط البيع التي تناسب متجرك.",
+    "stores.pricing.period": "/شهر",
+    "stores.pricing.badge": "الأكثر شيوعًا",
+    "stores.pricing.p1.title": "البداية",
+    "stores.pricing.p1.f1": "موقع متجر واحد",
+    "stores.pricing.p1.f2": "نقطة بيع للكاشير",
+    "stores.pricing.p1.f3": "تقارير أساسية",
+    "stores.pricing.p1.f4": "دعم عبر البريد",
+    "stores.pricing.p2.title": "النمو",
+    "stores.pricing.p2.f1": "حتى 3 أجهزة موظفين",
+    "stores.pricing.p2.f2": "كاشير + طلبات التطبيق",
+    "stores.pricing.p2.f3": "مخزون مباشر",
+    "stores.pricing.p2.f4": "دعم أولوي",
+    "stores.pricing.p3.title": "المؤسسات",
+    "stores.pricing.p3.f1": "فروع متعددة",
+    "stores.pricing.p3.f2": "تحليلات متقدمة",
+    "stores.pricing.p3.f3": "تكاملات الجملة",
+    "stores.pricing.p3.f4": "مدير حساب مخصص",
+    "stores.pricing.cta": "اختر الخطة",
+    "stores.testimonials.eyebrow": "قصص المتاجر",
+    "stores.testimonials.title": "مبنية للمتاجر السعودية",
+    "stores.testimonials.t1.body": "\"كنّا نكتب كل طلب يدويًا. الآن ندير طلبات الكاشير والتطبيق والجملة في مكان واحد.\"",
+    "stores.testimonials.t1.name": "خالد، سوق الأندلس",
+    "stores.testimonials.t2.body": "\"الواجهة الثنائية اللغة جعلت تدريب موظفينا سهلًا. المبيعات استمرت حتى أثناء مشاكل الشبكة.\"",
+    "stores.testimonials.t2.name": "سارة، فريش كورنر",
+    "stores.testimonials.t3.body": "\"عملاؤنا يدفعون لنا مباشرة، والاشتراك متوقع. لا مفاجآت في نهاية الشهر.\"",
+    "stores.testimonials.t3.name": "عمر، دايلي مارت",
+    "stores.cta.title": "جاهز لترقية متجرك؟",
+    "stores.cta.lede": "احجز عرضًا مدته 15 دقيقة وشاهد كيف تناسب أورديناكس كاشيرك.",
+    "stores.cta.button": "احجز عرضًا",
+
+    "wholesale.hero.eyebrow": "للمورّدين والموزعين",
+    "wholesale.hero.title": "زوّد المتاجر التي تغذّي المملكة.",
+    "wholesale.hero.lede": "قناة جملة رقمية تربط منتجاتك بمتاجر الأحياء في جميع أنحاء المملكة العربية السعودية.",
+    "wholesale.hero.cta": "كن مورّدًا",
+    "wholesale.hero.cta2": "للمتاجر",
+    "wholesale.suppliers.eyebrow": "لمَ يتعاون المورّدون معنا",
+    "wholesale.suppliers.title": "وصل إلى مزيد من المتاجر بتكاليف أقل",
+    "wholesale.suppliers.b1.title": "شبكة متاجر جاهزة",
+    "wholesale.suppliers.b1.body": "وصول إلى مئات المتاجر النشطة التي تطلب بالفعل عبر أورديناكس.",
+    "wholesale.suppliers.b2.title": "رؤى الطلب",
+    "wholesale.suppliers.b2.body": "اعرف ما تشتريه المتاجر، ومتى تعيد التخزين، والمنتجات الأسرع مبيعًا.",
+    "wholesale.suppliers.b3.title": "خدمات لوجستية موثوقة",
+    "wholesale.suppliers.b3.body": "نسّق التوصيلات عبر أسطولك الخاص أو شركائنا اللوجستيين الموثوقين.",
+    "wholesale.suppliers.b4.title": "فواتير واضحة",
+    "wholesale.suppliers.b4.body": "يولّد كل طلب فاتورة بتوضيح الضريبة وحالة الدفع.",
+    "wholesale.suppliers.b5.title": "كتالوج رقمي",
+    "wholesale.suppliers.b5.body": "انشر الأصناف والصور والأسعار مرة واحدة. ترى المتاجر التحديثات لحظيًا.",
+    "wholesale.suppliers.b6.title": "دعم محلي",
+    "wholesale.suppliers.b6.body": "اعمل مع فريق سعودي يفهم التجزئة والمواسم ودورات التوريد.",
+    "wholesale.stores.eyebrow": "للمتاجر",
+    "wholesale.stores.title": "أعِد التخزين دون عناء",
+    "wholesale.stores.lede": "اعثر على ما تحتاجه، قارن بين المورّدين، وابقَ رفوفك ممتلئة — كل ذلك من شاشة واحدة.",
+    "wholesale.stores.f1": "كتالوج واسع من البقالة والمنزل والمنتجات المبردة",
+    "wholesale.stores.f2": "أسعار جملة تنافسية تُحدّث يوميًا",
+    "wholesale.stores.f3": "نوافذ توصيل متوقعة يمكنك التخطيط حولها",
+    "wholesale.stores.f4": "فاتورة واحدة لكل طلب بضريبة واضحة",
+    "wholesale.stores.cta": "انظر خطط المتاجر",
+    "wholesale.stores.panel.eyebrow": "كيف تعمل الجملة",
+    "wholesale.stores.panel.l1": "تصفّح الكتالوج",
+    "wholesale.stores.panel.v1": "1",
+    "wholesale.stores.panel.l2": "قدّم الطلب",
+    "wholesale.stores.panel.v2": "2",
+    "wholesale.stores.panel.l3": "استلم التوصيل",
+    "wholesale.stores.panel.v3": "3",
+    "wholesale.stores.panel.l4": "ادفع الفاتورة",
+    "wholesale.stores.panel.v4": "4",
+    "wholesale.faq.title": "أسئلة الجملة",
+    "wholesale.faq.q1": "من يمكنه أن يصبح مورّدًا؟",
+    "wholesale.faq.a1": "موزّعون ومصنّعون ومستوردون مرخّصون لمنتجات غذائية أو مشروبات أو منزلية أو عناية شخصية في المملكة العربية السعودية.",
+    "wholesale.faq.q2": "كيف تدفع المتاجر؟",
+    "wholesale.faq.a2": "تدفع المتاجر بناءً على فاتورة المورّد وفق شروط دفع متفق عليها — تحويل بنكي أو ائتمان أو دفع عند الاستلام.",
+    "wholesale.faq.q3": "هل عليّ إدراج كامل كتالوجي؟",
+    "wholesale.faq.a3": "لا. ابدأ بأكثر منتجاتك مبيعًا ووسّع مع رؤية الطلب من الشبكة.",
+    "wholesale.cta.title": "وسّع نطاق جملتك",
+    "wholesale.cta.lede": "تحدث إلى فريق الشراكات وشاهد كيف تناسب أورديناكس أعمال التوزيع لديك.",
+    "wholesale.cta.button": "تحدث إلى المبيعات",
+
+    "contact.hero.eyebrow": "تواصل",
+    "contact.hero.title": "لنتحدث عن البقالة.",
+    "contact.hero.lede": "اطلب عرضًا، كن متجرًا شريكًا، أو انضم إلى شبكة مورّدينا.",
+    "contact.form.eyebrow": "تواصل معنا",
+    "contact.form.title": "أرسل لنا رسالة",
+    "contact.form.lede": "املأ النموذج وسيردّ فريقنا خلال يوم عمل واحد.",
+    "contact.form.nameLabel": "الاسم",
+    "contact.form.namePlaceholder": "اسمك",
+    "contact.form.emailLabel": "البريد الإلكتروني",
+    "contact.form.emailPlaceholder": "you@example.com",
+    "contact.form.phoneLabel": "الهاتف",
+    "contact.form.phonePlaceholder": "+966 50 000 0000",
+    "contact.form.interestLabel": "أنا مهتم بـ",
+    "contact.form.interest.default": "اختر خيارًا",
+    "contact.form.interest.store": "تشغيل متجري على أورديناكس",
+    "contact.form.interest.shopper": "التسوّق كمستهلك",
+    "contact.form.interest.supplier": "توريد منتجات بالجملة",
+    "contact.form.interest.other": "شيء آخر",
+    "contact.form.messageLabel": "الرسالة",
+    "contact.form.messagePlaceholder": "أخبرنا عن عملك",
+    "contact.form.submit": "إرسال الرسالة",
+    "contact.form.success": "شكرًا لك — سنتواصل معك قريبًا.",
+    "contact.form.invalidEmail": "يرجى إدخال بريد إلكتروني صحيح.",
+    "contact.form.required": "يرجى ملء جميع الحقول المطلوبة.",
+    "contact.info.office.title": "المقر الرئيسي",
+    "contact.info.office.body": "الرياض، المملكة العربية السعودية",
+    "contact.info.email.title": "البريد الإلكتروني",
+    "contact.info.phone.title": "الهاتف",
+    "contact.info.hours.title": "ساعات العمل",
+    "contact.info.hours.body": "من الأحد إلى الخميس، 9:00 ص – 6:00 م بتوقيت السعودية",
+    "contact.cta.title": "تفضّل التحدث الآن؟",
+    "contact.cta.lede": "اتصل بنا خلال ساعات العمل أو اطلب معاودة الاتصال.",
+    "contact.cta.button": "اتصل +966 9200 123 45",
+  },
+};
+
+const TITLES = {
+  home: { en: "Ordenax — Groceries from your local stores, delivered", ar: "أورديناكس — بقالتك من متاجر حيّك، حتى باب البيت" },
+  shoppers: { en: "For shoppers — Ordenax", ar: "للمتسوّقين — أورديناكس" },
+  stores: { en: "For stores — Ordenax", ar: "للمتاجر — أورديناكس" },
+  wholesale: { en: "Wholesale supply — Ordenax", ar: "التوريد بالجملة — أورديناكس" },
+  contact: { en: "Contact — Ordenax", ar: "تواصل — أورديناكس" },
+};
+
+const html = document.documentElement;
+const body = document.body;
+const toggle = document.getElementById("lang-toggle");
+const header = document.querySelector(".site-header");
+const menuToggle = document.querySelector(".menu-toggle");
+const mobileNav = document.getElementById("mobile-nav");
+const page = body.dataset.page || "home";
+
+function applyLang(lang) {
+  const dict = STRINGS[lang];
+  html.lang = lang;
+  html.dir = lang === "ar" ? "rtl" : "ltr";
+  document.title = (TITLES[page] && TITLES[page][lang]) || TITLES.home[lang];
+
+  document.querySelectorAll("[data-i18n]").forEach((el) => {
+    const key = el.getAttribute("data-i18n");
+    if (dict[key] !== undefined) el.textContent = dict[key];
+  });
+  document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
+    const key = el.getAttribute("data-i18n-placeholder");
+    if (dict[key] !== undefined) el.setAttribute("placeholder", dict[key]);
+  });
+
+  toggle.textContent = lang === "ar" ? "English" : "العربية";
+  localStorage.setItem("ordenax-lang", lang);
+}
+
+let lang = localStorage.getItem("ordenax-lang") || "en";
+applyLang(lang);
+
+function refreshHeroReveal() {
+  if (!heroTitle || page !== "home") return;
+  heroTitle.classList.remove("text-reveal");
+  const text = heroTitle.textContent;
+  heroTitle.innerHTML = text
+    .split(/(\s+)/)
+    .map((word, i) => (word.trim() ? `<span class="word" style="animation-delay: ${0.25 + i * 0.08}s">${word}</span>` : word))
+    .join("");
+  heroTitle.classList.add("text-reveal");
+}
+
+toggle.addEventListener("click", () => {
+  body.classList.add("is-switching-lang");
+  setTimeout(() => {
+    lang = html.lang === "ar" ? "en" : "ar";
+    applyLang(lang);
+    refreshHeroReveal();
+    body.classList.remove("is-switching-lang");
+  }, 120);
+});
+
+/* Current page nav highlight */
+document.querySelectorAll('.nav a[href], .mobile-nav a[href]').forEach((a) => {
+  const href = a.getAttribute("href").replace('.html', '');
+  if (href === page || (page === 'home' && href === 'index')) {
+    a.setAttribute("aria-current", "page");
+  }
+});
+
+/* Mobile nav */
+function closeMobileNav() {
+  mobileNav.classList.remove("is-open");
+  menuToggle.setAttribute("aria-expanded", "false");
+  mobileNav.setAttribute("aria-hidden", "true");
+  body.style.overflow = "";
+}
+menuToggle.addEventListener("click", () => {
+  const open = !mobileNav.classList.contains("is-open");
+  if (open) {
+    mobileNav.classList.add("is-open");
+    menuToggle.setAttribute("aria-expanded", "true");
+    mobileNav.setAttribute("aria-hidden", "false");
+    body.style.overflow = "hidden";
+  } else {
+    closeMobileNav();
+  }
+});
+mobileNav.querySelectorAll("a").forEach((a) => a.addEventListener("click", closeMobileNav));
+
+/* Header show/hide on scroll */
+let lastScrollY = 0;
+let ticking = false;
+function onScroll() {
+  const y = window.scrollY;
+  if (y > 20) header.classList.add("is-scrolled");
+  else header.classList.remove("is-scrolled");
+
+  if (y > lastScrollY && y > 120) header.classList.add("is-hidden");
+  else header.classList.remove("is-hidden");
+  lastScrollY = y;
+  ticking = false;
+}
+window.addEventListener("scroll", () => {
+  if (!ticking) { window.requestAnimationFrame(onScroll); ticking = true; }
+}, { passive: true });
+
+/* Hero entrance */
+document.querySelectorAll(".hero").forEach((hero) => {
+  hero.classList.add("is-ready");
+});
+
+/* Scroll reveal */
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add("is-visible");
+      if (entry.target.dataset.animate === "stat") animateCounter(entry.target);
+      observer.unobserve(entry.target);
+    }
+  });
+}, { threshold: 0.15, rootMargin: "0px 0px -40px 0px" });
+
+document.querySelectorAll('[data-animate="card"], [data-animate="step"], [data-animate="fade"], [data-animate="stat"]').forEach((el) => {
+  observer.observe(el);
+});
+
+/* Stagger cards within grids */
+document.querySelectorAll(".grid").forEach((grid) => {
+  grid.querySelectorAll(".reveal").forEach((el, i) => {
+    el.style.transitionDelay = `${i * 80}ms`;
+  });
+});
+
+/* Counter animation */
+function animateCounter(stat) {
+  const numEl = stat.querySelector(".stat-number");
+  const target = parseInt(numEl.dataset.target, 10);
+  if (Number.isNaN(target)) return;
+  let start = 0;
+  const duration = 1600;
+  const startTime = performance.now();
+  function step(now) {
+    const progress = Math.min((now - startTime) / duration, 1);
+    const ease = 1 - Math.pow(1 - progress, 3);
+    numEl.textContent = Math.floor(start + (target - start) * ease).toString();
+    if (progress < 1) requestAnimationFrame(step);
+  }
+  requestAnimationFrame(step);
+}
+
+/* Contact form */
+const contactForm = document.getElementById("contact-form");
+if (contactForm) {
+  const note = document.getElementById("form-note");
+  contactForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const dict = STRINGS[html.lang];
+    const email = contactForm.email.value.trim();
+    const name = contactForm.name.value.trim();
+    const interest = contactForm.interest.value;
+    if (!name || !email || !interest) {
+      note.textContent = dict["contact.form.required"];
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      note.textContent = dict["contact.form.invalidEmail"];
+      contactForm.email.focus();
+      return;
+    }
+    note.textContent = dict["contact.form.success"];
+    contactForm.reset();
+  });
+}
+
+/* Parallax scroll */
+const parallaxElements = document.querySelectorAll("[data-parallax]");
+if (parallaxElements.length && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+  let parallaxTicking = false;
+  function updateParallax() {
+    const y = window.scrollY;
+    parallaxElements.forEach((el) => {
+      const speed = parseFloat(el.dataset.parallax) || 0.1;
+      const offset = y * speed;
+      el.style.transform = `translate3d(0, ${offset}px, 0)`;
+    });
+    parallaxTicking = false;
+  }
+  window.addEventListener("scroll", () => {
+    if (!parallaxTicking) {
+      window.requestAnimationFrame(updateParallax);
+      parallaxTicking = true;
+    }
+  }, { passive: true });
+}
+
+/* Hero word-by-word reveal on home */
+const heroTitle = document.querySelector(".hero-apple .hero-title");
+refreshHeroReveal();
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..7be06fb
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Contact — Ordenax</title>
+  <meta name="description" content="Get in touch with Ordenax. Request a demo, become a partner store, or join our wholesale supplier network in Saudi Arabia." />
+  <meta property="og:title" content="Contact — Ordenax" />
+  <meta property="og:description" content="Let's talk grocery. Request a demo or partnership call." />
+  <meta property="og:type" content="website" />
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body data-page="contact">
+  <header class="site-header" data-animate="nav">
+    <div class="container header-inner">
+      <a class="brand" href="index.html" aria-label="Ordenax home">
+        <span class="logo-disc" aria-hidden="true">O</span>
+        <span class="wordmark">ORDENAX</span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      </nav>
+      <div class="header-actions">
+        <button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
+        <a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
+        <button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
+      </div>
+    </div>
+  </header>
+  <div id="mobile-nav" class="mobile-nav" aria-hidden="true">
+    <nav aria-label="Mobile">
+      <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+      <a href="stores.html" data-i18n="nav.stores">Stores</a>
+      <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      <a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
+    </nav>
+  </div>
+
+  <main>
+    <section class="hero hero-small">
+      <div class="hero-glow" aria-hidden="true"></div>
+      <div class="container hero-inner">
+        <p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="contact.hero.eyebrow">Contact</p>
+        <h1 class="hero-title" data-i18n="contact.hero.title">Let's talk grocery.</h1>
+        <div class="gold-rule hero-rule" aria-hidden="true"></div>
+        <p class="lede lede-light hero-lede" data-i18n="contact.hero.lede">Request a demo, become a partner store, or join our supplier network.</p>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="container split">
+        <div class="reveal" data-animate="fade">
+          <div class="section-heading" style="text-align: start; margin-inline: 0;">
+            <p class="eyebrow" data-i18n="contact.form.eyebrow">Get in touch</p>
+            <h2 data-i18n="contact.form.title">Send us a message</h2>
+            <div class="gold-rule" aria-hidden="true"></div>
+          </div>
+          <p class="lede" data-i18n="contact.form.lede">Fill in the form and our team will reply within one business day.</p>
+          <form class="contact-form" id="contact-form" novalidate>
+            <label for="name" data-i18n="contact.form.nameLabel">Name</label>
+            <input id="name" name="name" type="text" required data-i18n-placeholder="contact.form.namePlaceholder" placeholder="Your name" />
+
+            <label for="email" data-i18n="contact.form.emailLabel">Email</label>
+            <input id="email" name="email" type="email" required autocomplete="email" data-i18n-placeholder="contact.form.emailPlaceholder" placeholder="you@example.com" dir="ltr" />
+
+            <label for="phone" data-i18n="contact.form.phoneLabel">Phone</label>
+            <input id="phone" name="phone" type="tel" autocomplete="tel" data-i18n-placeholder="contact.form.phonePlaceholder" placeholder="+966 50 000 0000" dir="ltr" />
+
+            <label for="interest" data-i18n="contact.form.interestLabel">I'm interested in</label>
+            <select id="interest" name="interest" required>
+              <option value="" data-i18n="contact.form.interest.default">Select an option</option>
+              <option value="store" data-i18n="contact.form.interest.store">Running my store on Ordenax</option>
+              <option value="shopper" data-i18n="contact.form.interest.shopper">Shopping as a consumer</option>
+              <option value="supplier" data-i18n="contact.form.interest.supplier">Supplying products wholesale</option>
+              <option value="other" data-i18n="contact.form.interest.other">Something else</option>
+            </select>
+
+            <label for="message" data-i18n="contact.form.messageLabel">Message</label>
+            <textarea id="message" name="message" rows="4" data-i18n-placeholder="contact.form.messagePlaceholder" placeholder="Tell us about your business"></textarea>
+
+            <button class="btn btn-primary shimmer" type="submit" data-i18n="contact.form.submit">Send message</button>
+            <p class="form-note" id="form-note" role="status"></p>
+          </form>
+        </div>
+
+        <div class="contact-info reveal" data-animate="fade">
+          <div class="info-card">
+            <h3 data-i18n="contact.info.office.title">Headquarters</h3>
+            <p data-i18n="contact.info.office.body">Riyadh, Kingdom of Saudi Arabia</p>
+          </div>
+          <div class="info-card">
+            <h3 data-i18n="contact.info.email.title">Email</h3>
+            <p><a href="mailto:hello@ordenax.sa">hello@ordenax.sa</a></p>
+          </div>
+          <div class="info-card">
+            <h3 data-i18n="contact.info.phone.title">Phone</h3>
+            <p dir="ltr"><a href="tel:+966920012345">+966 9200 123 45</a></p>
+          </div>
+          <div class="info-card">
+            <h3 data-i18n="contact.info.hours.title">Business hours</h3>
+            <p data-i18n="contact.info.hours.body">Sunday to Thursday, 9:00 AM – 6:00 PM KSA</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-band">
+      <div class="container cta-inner reveal" data-animate="fade">
+        <h2 data-i18n="contact.cta.title">Prefer to talk now?</h2>
+        <p class="lede lede-light" data-i18n="contact.cta.lede">Call us during business hours or request a callback.</p>
+        <a class="btn btn-gold shimmer" href="tel:+966920012345" data-i18n="contact.cta.button">Call +966 9200 123 45</a>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div class="footer-brand">
+        <a class="brand brand-light" href="index.html" aria-label="Ordenax home">
+          <span class="logo-disc" aria-hidden="true">O</span>
+          <span class="wordmark">ORDENAX</span>
+        </a>
+        <p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.product">Product</h4>
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.company">Company</h4>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+        <a href="#" data-i18n="footer.privacy">Privacy</a>
+        <a href="#" data-i18n="footer.terms">Terms</a>
+      </div>
+    </div>
+    <div class="container footer-legal">
+      <p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
+    </div>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b0357bc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,294 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Ordenax — Groceries from your local stores, delivered</title>
+  <meta name="description" content="Ordenax is the Saudi grocery platform that lets shoppers buy from local stores, helps stores sell smarter, and powers wholesale restocking — bilingual EN/AR." />
+  <meta property="og:title" content="Ordenax — Groceries from your local stores, delivered" />
+  <meta property="og:description" content="Shop local, run your store, and restock wholesale on one platform built for Saudi Arabia." />
+  <meta property="og:type" content="website" />
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body data-page="home">
+  <header class="site-header" data-animate="nav">
+    <div class="container header-inner">
+      <a class="brand" href="index.html" aria-label="Ordenax home">
+        <span class="logo-disc" aria-hidden="true">O</span>
+        <span class="wordmark">ORDENAX</span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      </nav>
+      <div class="header-actions">
+        <button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
+        <a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
+        <button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
+      </div>
+    </div>
+  </header>
+  <div id="mobile-nav" class="mobile-nav" aria-hidden="true">
+    <nav aria-label="Mobile">
+      <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+      <a href="stores.html" data-i18n="nav.stores">Stores</a>
+      <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      <a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
+    </nav>
+  </div>
+
+  <main>
+    <section class="hero hero-apple">
+      <div class="hero-glow" aria-hidden="true"></div>
+      <div class="container hero-inner">
+        <p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="home.hero.eyebrow">Saudi grocery platform</p>
+        <h1 class="hero-title" data-i18n="home.hero.title">Groceries from your local stores, delivered.</h1>
+        <div class="gold-rule hero-rule" aria-hidden="true"></div>
+        <p class="lede lede-light hero-lede" data-i18n="home.hero.lede">
+          The platform that helps neighborhoods shop, sell and restock — in Arabic and English, online or off.
+        </p>
+        <div class="hero-ctas">
+          <a class="btn btn-gold shimmer" href="shoppers.html" data-i18n="home.hero.cta1">Start shopping</a>
+          <a class="btn btn-outline-light" href="stores.html" data-i18n="home.hero.cta2">Run your store</a>
+        </div>
+        <ul class="hero-badges">
+          <li data-i18n="home.hero.badge1">Bilingual EN / AR</li>
+          <li data-i18n="home.hero.badge2">Works without internet</li>
+          <li data-i18n="home.hero.badge3">SAR · VAT included</li>
+        </ul>
+        <div class="hero-visual parallax" data-parallax="-0.06" aria-hidden="true">
+          <div class="device-frame">
+            <div class="device-notch"></div>
+            <div class="device-screen">
+              <div class="device-card">
+                <div class="row"><span class="thumb">🥦</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
+                <div class="row"><span class="thumb">🍞</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
+                <div class="row"><span class="thumb">🥛</span><div style="flex:1"><div class="line medium"></div><div class="line short"></div></div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-ivory" id="why">
+      <div class="container narrow">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="home.why.eyebrow">Why Ordenax</p>
+          <h2 data-i18n="home.why.title">Grocery made simple for everyone.</h2>
+          <p class="lede" data-i18n="home.why.lede">We built Ordenax around one idea: your neighborhood store should be as easy to reach as a global app — and just as reliable.</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="shoppers">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="home.shoppers.eyebrow">For shoppers</p>
+          <h2 data-i18n="home.shoppers.title">Your weekly shop, done in minutes.</h2>
+          <p class="lede" data-i18n="home.shoppers.lede">No more crowded aisles, sold-out shelves, or wondering when your order will arrive.</p>
+        </div>
+        <div class="grid grid-2 feature-grid">
+          <article class="feature-card reveal" data-animate="card">
+            <div class="feature-icon" aria-hidden="true">🏪</div>
+            <h3 data-i18n="home.shoppers.b1.title">Shop stores you already trust</h3>
+            <p data-i18n="home.shoppers.b1.body">Your favorite neighborhood grocer, bakery, and produce stand — all in one place.</p>
+          </article>
+          <article class="feature-card reveal" data-animate="card">
+            <div class="feature-icon" aria-hidden="true">⚡</div>
+            <h3 data-i18n="home.shoppers.b2.title">Get it fast</h3>
+            <p data-i18n="home.shoppers.b2.body">Same-day delivery in as little as 25 minutes, because fresh shouldn't mean waiting.</p>
+          </article>
+          <article class="feature-card reveal" data-animate="card">
+            <div class="feature-icon" aria-hidden="true">✓</div>
+            <h3 data-i18n="home.shoppers.b3.title">Never guess stock again</h3>
+            <p data-i18n="home.shoppers.b3.body">If it's on the app, it's on the shelf. No substitutions you didn't ask for.</p>
+          </article>
+          <article class="feature-card reveal" data-animate="card">
+            <div class="feature-icon" aria-hidden="true">🔄</div>
+            <h3 data-i18n="home.shoppers.b4.title">Reorder in one tap</h3>
+            <p data-i18n="home.shoppers.b4.body">Save your weekly basket and repeat it whenever life gets busy.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-dark" id="owners">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow eyebrow-light" data-i18n="home.owners.eyebrow">For store owners</p>
+          <h2 data-i18n="home.owners.title">Run your store, not your paperwork.</h2>
+          <p class="lede lede-light" data-i18n="home.owners.lede">Everything you need to sell more, stress less, and keep every riyal in your account.</p>
+        </div>
+        <div class="grid grid-2 feature-grid">
+          <article class="feature-card feature-card-dark reveal" data-animate="card">
+            <div class="feature-icon feature-icon-dark" aria-hidden="true">💰</div>
+            <h3 data-i18n="home.owners.b1.title">Keep every sale</h3>
+            <p data-i18n="home.owners.b1.body">No commission. No withheld funds. Customer payments go straight to you.</p>
+          </article>
+          <article class="feature-card feature-card-dark reveal" data-animate="card">
+            <div class="feature-icon feature-icon-dark" aria-hidden="true">🖥️</div>
+            <h3 data-i18n="home.owners.b2.title">One screen, every channel</h3>
+            <p data-i18n="home.owners.b2.body">Counter sales, app orders, and wholesale restocking — all flowing into one simple system.</p>
+          </article>
+          <article class="feature-card feature-card-dark reveal" data-animate="card">
+            <div class="feature-icon feature-icon-dark" aria-hidden="true">🌐</div>
+            <h3 data-i18n="home.owners.b3.title">Sell even when offline</h3>
+            <p data-i18n="home.owners.b3.body">The internet drops. Your sales don't. Everything syncs automatically once you're back online.</p>
+          </article>
+          <article class="feature-card feature-card-dark reveal" data-animate="card">
+            <div class="feature-icon feature-icon-dark" aria-hidden="true">📈</div>
+            <h3 data-i18n="home.owners.b4.title">Grow without the guesswork</h3>
+            <p data-i18n="home.owners.b4.body">Real-time inventory, clear reports, and a direct line to nearby shoppers who want what you sell.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="marketplace">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="home.pillars.eyebrow">One platform, three wins</p>
+          <h2 data-i18n="home.pillars.title">Built for every side of grocery</h2>
+        </div>
+        <div class="bento bento-3">
+          <article class="bento-card bento-card-dark reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🛒</div>
+            <h3 data-i18n="home.pillars.m.title">Shop local</h3>
+            <p data-i18n="home.pillars.m.body">Order fresh groceries from nearby stores with same-day delivery and real stock you can trust.</p>
+            <a class="card-link" href="shoppers.html" data-i18n="common.learnMore">Learn more</a>
+          </article>
+          <article class="bento-card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🧾</div>
+            <h3 data-i18n="home.pillars.p.title">Sell smarter</h3>
+            <p data-i18n="home.pillars.p.body">A simple point-of-sale that brings counter sales and online orders together, even during outages.</p>
+            <a class="card-link" href="stores.html" data-i18n="common.learnMore">Learn more</a>
+          </article>
+          <article class="bento-card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">📦</div>
+            <h3 data-i18n="home.pillars.w.title">Restock wholesale</h3>
+            <p data-i18n="home.pillars.w.body">Stores refill their shelves straight from suppliers, with clear invoices and no hidden inventory traps.</p>
+            <a class="card-link" href="wholesale.html" data-i18n="common.learnMore">Learn more</a>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-sand">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="home.how.eyebrow">How it works</p>
+          <h2 data-i18n="home.how.title">From shelf to doorstep in three steps</h2>
+        </div>
+        <ol class="steps">
+          <li class="step reveal" data-animate="step">
+            <span class="step-num">1</span>
+            <h3 data-i18n="home.how.s1.title">Order</h3>
+            <p data-i18n="home.how.s1.body">A shopper picks products from a nearby store — in English or Arabic.</p>
+          </li>
+          <li class="step reveal" data-animate="step">
+            <span class="step-num">2</span>
+            <h3 data-i18n="home.how.s2.title">Prepare</h3>
+            <p data-i18n="home.how.s2.body">The store receives, packs and confirms the order on the Ordenax system.</p>
+          </li>
+          <li class="step reveal" data-animate="step">
+            <span class="step-num">3</span>
+            <h3 data-i18n="home.how.s3.title">Deliver</h3>
+            <p data-i18n="home.how.s3.body">A delivery partner drops it at the door. The store keeps the payment directly.</p>
+          </li>
+        </ol>
+      </div>
+    </section>
+
+    <section class="section stats-section">
+      <div class="container">
+        <div class="stats-grid">
+          <div class="stat reveal" data-animate="stat">
+            <span class="stat-number" data-target="500">0</span><span class="stat-suffix">+</span>
+            <span class="stat-label" data-i18n="home.stats.s1">partner stores</span>
+          </div>
+          <div class="stat reveal" data-animate="stat">
+            <span class="stat-number" data-target="120">0</span><span class="stat-suffix">k+</span>
+            <span class="stat-label" data-i18n="home.stats.s2">monthly orders</span>
+          </div>
+          <div class="stat reveal" data-animate="stat">
+            <span class="stat-number" data-target="25">0</span><span class="stat-suffix" data-i18n="home.stats.s3suffix"> min</span>
+            <span class="stat-label" data-i18n="home.stats.s3">average delivery</span>
+          </div>
+          <div class="stat reveal" data-animate="stat">
+            <span class="stat-number" data-target="2">0</span>
+            <span class="stat-label" data-i18n="home.stats.s4">languages</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-sand">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="home.testimonials.eyebrow">What partners say</p>
+          <h2 data-i18n="home.testimonials.title">Loved by stores, trusted by shoppers</h2>
+        </div>
+        <div class="grid grid-3">
+          <blockquote class="quote-card reveal" data-animate="card">
+            <p data-i18n="home.testimonials.t1.body">"We doubled our weekly orders within two months. The system is simple and our customers love ordering in Arabic."</p>
+            <footer>— <span data-i18n="home.testimonials.t1.name">Abdullah, Al-Salam Market</span></footer>
+          </blockquote>
+          <blockquote class="quote-card reveal" data-animate="card">
+            <p data-i18n="home.testimonials.t2.body">"I can shop from the same grocer I visit every week, but now it comes to my door. Same quality, less hassle."</p>
+            <footer>— <span data-i18n="home.testimonials.t2.name">Noura, Riyadh</span></footer>
+          </blockquote>
+          <blockquote class="quote-card reveal" data-animate="card">
+            <p data-i18n="home.testimonials.t3.body">"Restocking used to take three phone calls. Now we order once and the invoice is ready before delivery."</p>
+            <footer>— <span data-i18n="home.testimonials.t3.name">Fahad, Green Cart</span></footer>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-band" id="cta">
+      <div class="container cta-inner reveal" data-animate="fade">
+        <h2 data-i18n="home.cta.title">Ready to shop, sell, or supply?</h2>
+        <p class="lede lede-light" data-i18n="home.cta.lede">Join the grocery platform built for the Kingdom.</p>
+        <a class="btn btn-gold shimmer" href="contact.html" data-i18n="home.cta.button">Request a demo</a>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div class="footer-brand">
+        <a class="brand brand-light" href="index.html" aria-label="Ordenax home">
+          <span class="logo-disc" aria-hidden="true">O</span>
+          <span class="wordmark">ORDENAX</span>
+        </a>
+        <p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.product">Product</h4>
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.company">Company</h4>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+        <a href="#" data-i18n="footer.privacy">Privacy</a>
+        <a href="#" data-i18n="footer.terms">Terms</a>
+      </div>
+    </div>
+    <div class="container footer-legal">
+      <p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
+    </div>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/shoppers.html b/shoppers.html
new file mode 100644
index 0000000..3b1c56f
--- /dev/null
+++ b/shoppers.html
@@ -0,0 +1,189 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>For shoppers — Ordenax</title>
+  <meta name="description" content="Order groceries from local stores on Ordenax. Same-day delivery, real stock, bilingual Arabic/English support." />
+  <meta property="og:title" content="For shoppers — Ordenax" />
+  <meta property="og:description" content="Your neighborhood grocery store, now in your pocket." />
+  <meta property="og:type" content="website" />
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body data-page="shoppers">
+  <header class="site-header" data-animate="nav">
+    <div class="container header-inner">
+      <a class="brand" href="index.html" aria-label="Ordenax home">
+        <span class="logo-disc" aria-hidden="true">O</span>
+        <span class="wordmark">ORDENAX</span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      </nav>
+      <div class="header-actions">
+        <button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
+        <a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
+        <button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
+      </div>
+    </div>
+  </header>
+  <div id="mobile-nav" class="mobile-nav" aria-hidden="true">
+    <nav aria-label="Mobile">
+      <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+      <a href="stores.html" data-i18n="nav.stores">Stores</a>
+      <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      <a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
+    </nav>
+  </div>
+
+  <main>
+    <section class="hero hero-small">
+      <div class="hero-glow" aria-hidden="true"></div>
+      <div class="container hero-inner">
+        <p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="shoppers.hero.eyebrow">For shoppers</p>
+        <h1 class="hero-title" data-i18n="shoppers.hero.title">Your neighborhood store, now in your pocket.</h1>
+        <div class="gold-rule hero-rule" aria-hidden="true"></div>
+        <p class="lede lede-light hero-lede" data-i18n="shoppers.hero.lede">Order fresh groceries from trusted local stores and get same-day delivery — in Arabic or English.</p>
+        <div class="hero-ctas">
+          <a class="btn btn-gold shimmer" href="contact.html" data-i18n="shoppers.hero.cta">Download the app</a>
+          <a class="btn btn-outline-light" href="#benefits" data-i18n="common.seeHow">See how it works</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="benefits">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="shoppers.benefits.eyebrow">Why shop on Ordenax</p>
+          <h2 data-i18n="shoppers.benefits.title">Fresh, fast and familiar</h2>
+          <div class="gold-rule" aria-hidden="true"></div>
+        </div>
+        <div class="grid grid-3">
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">⚡</div>
+            <h3 data-i18n="shoppers.benefits.b1.title">Same-day delivery</h3>
+            <p data-i18n="shoppers.benefits.b1.body">Get your groceries in as little as 25 minutes from stores you already know.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">✓</div>
+            <h3 data-i18n="shoppers.benefits.b2.title">Real stock</h3>
+            <p data-i18n="shoppers.benefits.b2.body">If it's on the app, it's on the shelf — no more canceled items after checkout.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🌙</div>
+            <h3 data-i18n="shoppers.benefits.b3.title">Bilingual by design</h3>
+            <p data-i18n="shoppers.benefits.b3.body">Switch between Arabic and English anytime. Product names, search and checkout follow you.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🤝</div>
+            <h3 data-i18n="shoppers.benefits.b4.title">Support local</h3>
+            <p data-i18n="shoppers.benefits.b4.body">Every order goes directly to a store in your community — your money stays in the neighborhood.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🔄</div>
+            <h3 data-i18n="shoppers.benefits.b5.title">Easy reorder</h3>
+            <p data-i18n="shoppers.benefits.b5.body">Repeat your weekly list in one tap. Save favorites and scheduled baskets for busy days.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🔒</div>
+            <h3 data-i18n="shoppers.benefits.b6.title">Pay with confidence</h3>
+            <p data-i18n="shoppers.benefits.b6.body">Choose cash on delivery or trusted local payment options. The store handles your payment directly.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-sand">
+      <div class="container split">
+        <div class="reveal" data-animate="fade">
+          <div class="section-heading" style="text-align: start; margin-inline: 0;">
+            <p class="eyebrow" data-i18n="shoppers.categories.eyebrow">Everything you need</p>
+            <h2 data-i18n="shoppers.categories.title">From pantry to produce</h2>
+            <div class="gold-rule" aria-hidden="true"></div>
+          </div>
+          <p class="lede" data-i18n="shoppers.categories.lede">Browse thousands of products across the categories your family uses every day.</p>
+          <ul class="category-list">
+            <li data-i18n="shoppers.categories.l1">Fresh fruit and vegetables</li>
+            <li data-i18n="shoppers.categories.l2">Dairy, eggs and chilled goods</li>
+            <li data-i18n="shoppers.categories.l3">Rice, oil, spices and staples</li>
+            <li data-i18n="shoppers.categories.l4">Household and personal care</li>
+            <li data-i18n="shoppers.categories.l5">Beverages, snacks and bakery</li>
+          </ul>
+        </div>
+        <div class="category-visual reveal" data-animate="fade">
+          <div class="visual-card visual-card-1">🥦</div>
+          <div class="visual-card visual-card-2">🍞</div>
+          <div class="visual-card visual-card-3">🥛</div>
+          <div class="visual-card visual-card-4">🧴</div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="container narrow">
+        <h2 class="centered" data-i18n="shoppers.faq.title">Common questions</h2>
+        <div class="gold-rule centered-rule" aria-hidden="true"></div>
+        <div class="faq">
+          <details class="faq-item reveal" data-animate="card">
+            <summary data-i18n="shoppers.faq.q1">Who delivers my order?</summary>
+            <p data-i18n="shoppers.faq.a1">Your chosen store prepares the order and a local delivery partner brings it to you. You can track the status in the app.</p>
+          </details>
+          <details class="faq-item reveal" data-animate="card">
+            <summary data-i18n="shoppers.faq.q2">Can I pay with cash?</summary>
+            <p data-i18n="shoppers.faq.a2">Yes. The store collects your payment directly — cash on delivery or local digital payments, whichever you prefer.</p>
+          </details>
+          <details class="faq-item reveal" data-animate="card">
+            <summary data-i18n="shoppers.faq.q3">What if an item is out of stock?</summary>
+            <p data-i18n="shoppers.faq.a3">Stores update availability in real time. If something changes, they will contact you to suggest a replacement or refund.</p>
+          </details>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-band">
+      <div class="container cta-inner reveal" data-animate="fade">
+        <h2 data-i18n="shoppers.cta.title">Your first order is waiting</h2>
+        <p class="lede lede-light" data-i18n="shoppers.cta.lede">Download the app and shop the stores you already trust.</p>
+        <a class="btn btn-gold shimmer" href="contact.html" data-i18n="shoppers.cta.button">Get the app</a>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div class="footer-brand">
+        <a class="brand brand-light" href="index.html" aria-label="Ordenax home">
+          <span class="logo-disc" aria-hidden="true">O</span>
+          <span class="wordmark">ORDENAX</span>
+        </a>
+        <p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.product">Product</h4>
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.company">Company</h4>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+        <a href="#" data-i18n="footer.privacy">Privacy</a>
+        <a href="#" data-i18n="footer.terms">Terms</a>
+      </div>
+    </div>
+    <div class="container footer-legal">
+      <p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
+    </div>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/stores.html b/stores.html
new file mode 100644
index 0000000..d73f633
--- /dev/null
+++ b/stores.html
@@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>For stores — Ordenax</title>
+  <meta name="description" content="Grow your grocery store with Ordenax. More orders, simple point-of-sale, direct payments, and wholesale restocking — bilingual for Saudi Arabia." />
+  <meta property="og:title" content="For stores — Ordenax" />
+  <meta property="og:description" content="Turn your counter into a modern grocery business with Ordenax." />
+  <meta property="og:type" content="website" />
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body data-page="stores">
+  <header class="site-header" data-animate="nav">
+    <div class="container header-inner">
+      <a class="brand" href="index.html" aria-label="Ordenax home">
+        <span class="logo-disc" aria-hidden="true">O</span>
+        <span class="wordmark">ORDENAX</span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      </nav>
+      <div class="header-actions">
+        <button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
+        <a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
+        <button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
+      </div>
+    </div>
+  </header>
+  <div id="mobile-nav" class="mobile-nav" aria-hidden="true">
+    <nav aria-label="Mobile">
+      <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+      <a href="stores.html" data-i18n="nav.stores">Stores</a>
+      <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      <a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
+    </nav>
+  </div>
+
+  <main>
+    <section class="hero hero-small">
+      <div class="hero-glow" aria-hidden="true"></div>
+      <div class="container hero-inner">
+        <p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="stores.hero.eyebrow">For store owners</p>
+        <h1 class="hero-title" data-i18n="stores.hero.title">Turn your counter into a modern grocery business.</h1>
+        <div class="gold-rule hero-rule" aria-hidden="true"></div>
+        <p class="lede lede-light hero-lede" data-i18n="stores.hero.lede">Get more orders, simplify daily work, and keep every payment in your own hands.</p>
+        <div class="hero-ctas">
+          <a class="btn btn-gold shimmer" href="contact.html" data-i18n="stores.hero.cta">Request a demo</a>
+          <a class="btn btn-outline-light" href="#pricing" data-i18n="common.seePricing">See pricing</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="stores.benefits.eyebrow">Why stores choose Ordenax</p>
+          <h2 data-i18n="stores.benefits.title">Everything you need to grow</h2>
+          <div class="gold-rule" aria-hidden="true"></div>
+        </div>
+        <div class="grid grid-3">
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">📈</div>
+            <h3 data-i18n="stores.benefits.b1.title">More orders</h3>
+            <p data-i18n="stores.benefits.b1.body">Reach nearby shoppers through the app and turn your store into a local online brand.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">💰</div>
+            <h3 data-i18n="stores.benefits.b2.title">Your money, your account</h3>
+            <p data-i18n="stores.benefits.b2.body">You collect customer payments directly. We never hold your funds or take a slice of every sale.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🖥️</div>
+            <h3 data-i18n="stores.benefits.b3.title">One simple screen</h3>
+            <p data-i18n="stores.benefits.b3.body">Counter sales and app orders flow into one place — no switching between apps and notebooks.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🌐</div>
+            <h3 data-i18n="stores.benefits.b4.title">Works without internet</h3>
+            <p data-i18n="stores.benefits.b4.body">Keep ringing sales even when the connection drops. Everything syncs automatically once you're back online.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🗣️</div>
+            <h3 data-i18n="stores.benefits.b5.title">Bilingual for your team</h3>
+            <p data-i18n="stores.benefits.b5.body">Your staff can use Arabic or English — labels, receipts, and reports switch instantly.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">📦</div>
+            <h3 data-i18n="stores.benefits.b6.title">Restock in minutes</h3>
+            <p data-i18n="stores.benefits.b6.body">Order wholesale supplies straight from the app, with clear invoices and predictable delivery.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-sand" id="pricing">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="stores.pricing.eyebrow">Pricing</p>
+          <h2 data-i18n="stores.pricing.title">Simple subscriptions, no hidden cuts</h2>
+          <div class="gold-rule" aria-hidden="true"></div>
+          <p class="lede" data-i18n="stores.pricing.lede">No marketplace commission. Just pick the POS plan that fits your store.</p>
+        </div>
+        <div class="grid grid-3 pricing-grid">
+          <article class="pricing-card reveal" data-animate="card">
+            <h3 data-i18n="stores.pricing.p1.title">Starter</h3>
+            <p class="price"><span class="currency">SAR</span> 299<span class="period" data-i18n="stores.pricing.period">/month</span></p>
+            <ul class="pricing-features">
+              <li data-i18n="stores.pricing.p1.f1">1 store location</li>
+              <li data-i18n="stores.pricing.p1.f2">Counter POS</li>
+              <li data-i18n="stores.pricing.p1.f3">Basic reports</li>
+              <li data-i18n="stores.pricing.p1.f4">Email support</li>
+            </ul>
+            <a class="btn btn-outline" href="contact.html" data-i18n="stores.pricing.cta">Choose Starter</a>
+          </article>
+          <article class="pricing-card pricing-featured reveal" data-animate="card">
+            <span class="pricing-badge" data-i18n="stores.pricing.badge">Most popular</span>
+            <h3 data-i18n="stores.pricing.p2.title">Growth</h3>
+            <p class="price"><span class="currency">SAR</span> 599<span class="period" data-i18n="stores.pricing.period">/month</span></p>
+            <ul class="pricing-features">
+              <li data-i18n="stores.pricing.p2.f1">Up to 3 staff devices</li>
+              <li data-i18n="stores.pricing.p2.f2">Counter + app orders</li>
+              <li data-i18n="stores.pricing.p2.f3">Live inventory</li>
+              <li data-i18n="stores.pricing.p2.f4">Priority support</li>
+            </ul>
+            <a class="btn btn-primary shimmer" href="contact.html" data-i18n="stores.pricing.cta">Choose Growth</a>
+          </article>
+          <article class="pricing-card reveal" data-animate="card">
+            <h3 data-i18n="stores.pricing.p3.title">Enterprise</h3>
+            <p class="price"><span class="currency">SAR</span> 999<span class="period" data-i18n="stores.pricing.period">/month</span></p>
+            <ul class="pricing-features">
+              <li data-i18n="stores.pricing.p3.f1">Multiple branches</li>
+              <li data-i18n="stores.pricing.p3.f2">Advanced analytics</li>
+              <li data-i18n="stores.pricing.p3.f3">Wholesale integrations</li>
+              <li data-i18n="stores.pricing.p3.f4">Dedicated account manager</li>
+            </ul>
+            <a class="btn btn-outline" href="contact.html" data-i18n="stores.pricing.cta">Choose Enterprise</a>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="stores.testimonials.eyebrow">Store stories</p>
+          <h2 data-i18n="stores.testimonials.title">Built for Saudi stores</h2>
+          <div class="gold-rule" aria-hidden="true"></div>
+        </div>
+        <div class="grid grid-3">
+          <blockquote class="quote-card reveal" data-animate="card">
+            <p data-i18n="stores.testimonials.t1.body">"We used to write every order by hand. Now we manage counter, app and wholesale orders in one place."</p>
+            <footer>— <span data-i18n="stores.testimonials.t1.name">Khalid, Al-Andalus Market</span></footer>
+          </blockquote>
+          <blockquote class="quote-card reveal" data-animate="card">
+            <p data-i18n="stores.testimonials.t2.body">"The bilingual interface made training our staff effortless. Sales kept flowing even during network issues."</p>
+            <footer>— <span data-i18n="stores.testimonials.t2.name">Sara, Fresh Corner</span></footer>
+          </blockquote>
+          <blockquote class="quote-card reveal" data-animate="card">
+            <p data-i18n="stores.testimonials.t3.body">"Our customers pay us directly, and the subscription is predictable. No surprises at the end of the month."</p>
+            <footer>— <span data-i18n="stores.testimonials.t3.name">Omar, Daily Mart</span></footer>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-band">
+      <div class="container cta-inner reveal" data-animate="fade">
+        <h2 data-i18n="stores.cta.title">Ready to upgrade your store?</h2>
+        <p class="lede lede-light" data-i18n="stores.cta.lede">Book a 15-minute demo and see how Ordenax fits your counter.</p>
+        <a class="btn btn-gold shimmer" href="contact.html" data-i18n="stores.cta.button">Book a demo</a>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div class="footer-brand">
+        <a class="brand brand-light" href="index.html" aria-label="Ordenax home">
+          <span class="logo-disc" aria-hidden="true">O</span>
+          <span class="wordmark">ORDENAX</span>
+        </a>
+        <p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.product">Product</h4>
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.company">Company</h4>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+        <a href="#" data-i18n="footer.privacy">Privacy</a>
+        <a href="#" data-i18n="footer.terms">Terms</a>
+      </div>
+    </div>
+    <div class="container footer-legal">
+      <p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
+    </div>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..715c670
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,654 @@
+/* Ordenax landing — Apple-inspired design language with Ordenax emerald/gold brand tokens.
+   Logical properties + RTL-first; animated with IntersectionObserver. */
+
+:root {
+  --emerald-950: #071f17;
+  --emerald-900: #0b2e22;
+  --emerald-800: #0f3d2c;
+  --emerald-700: #14553d;
+  --emerald-600: #1a6b4a;
+  --emerald-500: #1f8459;
+  --emerald-50: #f0f7f3;
+  --gold-300: #e6cd8e;
+  --gold-400: #d9b566;
+  --gold-500: #c6a15b;
+  --gold-600: #a9823f;
+  --gold-700: #87662c;
+  --ivory: #fbf7ee;
+  --sand: #f4edde;
+  --ink: #0d1b13;
+  --ink-soft: #4a5d52;
+  --hairline: #e7e0cf;
+
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-xl: 32px;
+  --radius-pill: 9999px;
+
+  --shadow-card: 0 1px 2px rgb(13 27 19 / 0.04), 0 12px 32px -10px rgb(13 27 19 / 0.10);
+  --shadow-lift: 0 4px 8px rgb(13 27 19 / 0.05), 0 22px 48px -14px rgb(13 27 19 / 0.18);
+  --shadow-gold: 0 10px 30px -10px rgb(198 161 91 / 0.55);
+  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.12);
+
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* { box-sizing: border-box; }
+
+html {
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  background: var(--ivory);
+  color: var(--ink);
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 1.0625rem;
+  line-height: 1.6;
+  opacity: 1;
+  transition: opacity 0.25s ease;
+}
+
+body.is-switching-lang { opacity: 0.85; }
+
+[dir="rtl"] body { font-family: "Almarai", "Inter", system-ui, sans-serif; }
+
+h1, h2, h3, .wordmark {
+  font-family: "Fraunces", Georgia, "Times New Roman", serif;
+  line-height: 1.05;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "Almarai", sans-serif; font-weight: 800; letter-spacing: 0; }
+
+h1 { font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 600; }
+h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--emerald-900); }
+h3 { font-size: 1.35rem; font-weight: 600; color: var(--emerald-800); margin-block-end: 0.5rem; }
+
+p { margin: 0; }
+a { color: inherit; text-decoration: none; }
+ul, ol { margin: 0; padding: 0; list-style: none; }
+
+.container { max-width: 1200px; margin-inline: auto; padding-inline: 1.75rem; }
+.container.narrow { max-width: 720px; }
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px; overflow: hidden;
+  clip: rect(0 0 0 0); white-space: nowrap;
+}
+
+.centered { text-align: center; margin-inline: auto; }
+.centered-rule { margin-inline: auto; }
+
+/* ---------- Brand ---------- */
+.brand { display: inline-flex; align-items: center; gap: 0.65rem; }
+.logo-disc {
+  display: inline-grid; place-items: center;
+  width: 38px; height: 38px; border-radius: 50%;
+  background: var(--emerald-800); color: var(--gold-400);
+  font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; font-weight: 600;
+  box-shadow: inset 0 0 0 1.5px var(--gold-500), var(--shadow-gold);
+  animation: logo-pulse 4s ease-in-out infinite;
+  transition: transform 0.3s var(--ease-spring);
+}
+.brand:hover .logo-disc { transform: scale(1.08); }
+.wordmark {
+  font-size: 1rem; font-weight: 700; letter-spacing: 0.18em;
+  color: var(--emerald-900);
+}
+[dir="rtl"] .wordmark { font-family: "Fraunces", Georgia, serif; letter-spacing: 0.18em; }
+.brand-light .wordmark { color: var(--gold-300); }
+
+@keyframes logo-pulse {
+  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--gold-500), 0 0 0 0 rgb(198 161 91 / 0.28); }
+  50% { box-shadow: inset 0 0 0 1.5px var(--gold-500), 0 0 0 12px rgb(198 161 91 / 0); }
+}
+
+/* ---------- Eyebrows, rules, lede ---------- */
+.eyebrow {
+  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em;
+  text-transform: uppercase; color: var(--gold-600); margin-block-end: 1rem;
+}
+[dir="rtl"] .eyebrow { letter-spacing: 0; }
+.eyebrow-light { color: var(--gold-400); }
+
+.gold-rule {
+  width: 64px; height: 2px; margin-block: 1.2rem 1.6rem;
+  background: linear-gradient(90deg, var(--gold-500), transparent);
+  border-radius: 2px;
+}
+[dir="rtl"] .gold-rule { background: linear-gradient(270deg, var(--gold-500), transparent); }
+
+.lede { font-size: 1.25rem; color: var(--ink-soft); max-width: 52ch; line-height: 1.55; }
+.lede-light { color: #cfe0d6; }
+
+/* ---------- Buttons ---------- */
+.btn {
+  position: relative; overflow: hidden;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0.85rem 1.8rem; border-radius: var(--radius-pill);
+  font-weight: 600; font-size: 1rem; border: 1.5px solid transparent;
+  cursor: pointer; transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-apple), background 0.2s var(--ease-apple), color 0.2s var(--ease-apple);
+}
+.btn:hover { transform: translateY(-2px) scale(1.02); }
+.btn:active { transform: translateY(0) scale(0.98); }
+.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.92rem; }
+.btn-primary {
+  background: var(--emerald-700); color: #fff;
+  box-shadow: 0 4px 14px rgb(20 85 61 / 0.28);
+}
+.btn-primary:hover { background: var(--emerald-600); box-shadow: 0 6px 20px rgb(20 85 61 / 0.35); }
+.btn-gold {
+  background: linear-gradient(160deg, var(--gold-400), var(--gold-500));
+  color: var(--emerald-950);
+  box-shadow: var(--shadow-gold);
+}
+.btn-gold:hover { background: linear-gradient(160deg, var(--gold-300), var(--gold-400)); box-shadow: 0 14px 36px -10px rgb(198 161 91 / 0.65); }
+.btn-outline-light { border-color: rgb(230 205 142 / 0.55); color: var(--gold-300); }
+.btn-outline-light:hover { background: rgb(198 161 91 / 0.12); }
+.btn-outline { border-color: var(--emerald-700); color: var(--emerald-700); background: transparent; }
+.btn-outline:hover { background: var(--emerald-700); color: #fff; }
+
+/* Shimmer */
+.shimmer::after {
+  content: ""; position: absolute; inset: 0;
+  background: linear-gradient(120deg, transparent 38%, rgb(255 255 255 / 0.5) 50%, transparent 62%);
+  transform: translateX(-140%);
+  transition: transform 0s;
+}
+.shimmer:hover::after { transform: translateX(140%); transition: transform 0.85s var(--ease-out); }
+
+/* ---------- Header ---------- */
+.site-header {
+  position: sticky; top: 0; z-index: 50;
+  background: rgb(251 247 238 / 0.78);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  border-block-end: 1px solid rgb(231 224 207 / 0.6);
+  transform: translateY(0);
+  transition: transform 0.4s var(--ease-out), background 0.3s ease, box-shadow 0.3s ease;
+}
+.site-header.is-hidden { transform: translateY(-110%); }
+.site-header.is-scrolled { background: rgb(251 247 238 / 0.92); box-shadow: 0 4px 24px rgb(13 27 19 / 0.05); }
+.header-inner { display: flex; align-items: center; gap: 2rem; padding-block: 0.75rem; }
+.nav { display: flex; gap: 2rem; margin-inline-start: auto; margin-inline-end: auto; font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); }
+.nav a { position: relative; padding-block: 0.4rem; }
+.nav a::after {
+  content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: 0;
+  width: 0; height: 2px; background: var(--gold-500); border-radius: 2px;
+  transform: translateX(-50%);
+  transition: width 0.25s var(--ease-out);
+}
+[dir="rtl"] .nav a::after { transform: translateX(50%); }
+.nav a:hover { color: var(--emerald-800); }
+.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
+.header-actions { display: flex; align-items: center; gap: 0.75rem; }
+.lang-toggle {
+  background: none; border: 1.5px solid var(--hairline); border-radius: var(--radius-pill);
+  padding: 0.4rem 1rem; font: inherit; font-weight: 600; font-size: 0.88rem;
+  color: var(--emerald-700); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
+}
+.lang-toggle:hover { border-color: var(--gold-500); background: rgb(198 161 91 / 0.08); }
+.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(--emerald-800); cursor: pointer; }
+
+/* Mobile nav */
+.mobile-nav {
+  position: fixed; inset: 0; z-index: 40;
+  background: var(--emerald-950); color: #f2f7f3;
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0; pointer-events: none; transform: translateY(-12px) scale(0.98);
+  transition: opacity 0.35s var(--ease-apple), transform 0.35s var(--ease-apple);
+}
+.mobile-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
+.mobile-nav nav { display: grid; gap: 1.6rem; text-align: center; }
+.mobile-nav a { font-size: 1.6rem; font-weight: 600; }
+.mobile-nav a:hover { color: var(--gold-300); }
+
+/* ---------- Hero ---------- */
+.hero {
+  position: relative; overflow: hidden;
+  background:
+    radial-gradient(900px 420px at 75% -15%, rgb(198 161 91 / 0.18), transparent 55%),
+    radial-gradient(900px 520px at 12% 115%, rgb(31 132 89 / 0.28), transparent 55%),
+    linear-gradient(165deg, var(--emerald-900), var(--emerald-950));
+  color: #f2f7f3;
+}
+.hero-glow {
+  position: absolute; inset: 0; pointer-events: none;
+  background:
+    radial-gradient(600px 340px at 22% 42%, rgb(198 161 91 / 0.14), transparent 55%),
+    radial-gradient(700px 420px at 82% 78%, rgb(31 132 89 / 0.16), transparent 55%);
+  animation: glow-drift 12s ease-in-out infinite alternate;
+}
+@keyframes glow-drift {
+  0% { transform: translate(-2%, -2%) scale(1); opacity: 0.8; }
+  100% { transform: translate(2%, 2%) scale(1.05); opacity: 1; }
+}
+
+.hero-inner { position: relative; z-index: 1; padding-block: clamp(5rem, 12vw, 9rem); max-width: 820px; text-align: center; margin-inline: auto; }
+.hero-small .hero-inner { padding-block: clamp(4rem, 9vw, 6rem); }
+
+.hero-eyebrow, .hero-title, .hero-rule, .hero-lede, .hero-ctas, .hero-badges, .hero-visual { opacity: 0; transform: translateY(28px); }
+.hero.is-ready .hero-eyebrow { animation: fade-up 0.9s var(--ease-out) 0.1s forwards; }
+.hero.is-ready .hero-title { animation: fade-up 1s var(--ease-out) 0.25s forwards; }
+.hero.is-ready .hero-rule { animation: fade-up 0.9s var(--ease-out) 0.42s forwards; }
+.hero.is-ready .hero-lede { animation: fade-up 0.9s var(--ease-out) 0.55s forwards; }
+.hero.is-ready .hero-ctas { animation: fade-up 0.9s var(--ease-out) 0.7s forwards; }
+.hero.is-ready .hero-badges { animation: fade-up 0.9s var(--ease-out) 0.85s forwards; }
+.hero.is-ready .hero-visual { animation: fade-up 1s var(--ease-out) 0.95s forwards; }
+
+@keyframes fade-up {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.hero-rule { margin-inline: auto; }
+.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-block-start: 2.4rem; }
+.hero-badges {
+  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-block-start: 2.8rem;
+  font-size: 0.86rem; color: var(--gold-300);
+}
+.hero-badges li {
+  border: 1px solid rgb(230 205 142 / 0.35); border-radius: var(--radius-pill);
+  padding: 0.35rem 1rem; background: rgb(7 31 23 / 0.25);
+  backdrop-filter: blur(6px);
+}
+
+/* Apple-style full-bleed home hero */
+.hero-apple { min-height: 92vh; display: grid; place-items: center; }
+.hero-apple .hero-title { font-size: clamp(3rem, 8.5vw, 6.5rem); font-weight: 600; letter-spacing: -0.045em; }
+.hero-apple .hero-lede { font-size: clamp(1.15rem, 2.2vw, 1.45rem); max-width: 58ch; margin-inline: auto; }
+
+/* Hero visual — app device mockup */
+.hero-visual { margin-block-start: 3.5rem; perspective: 1200px; }
+.device-frame {
+  position: relative; width: min(320px, 78vw); aspect-ratio: 9/19;
+  margin-inline: auto; border-radius: 42px;
+  background: linear-gradient(180deg, var(--emerald-800), var(--emerald-950));
+  box-shadow:
+    0 0 0 10px var(--gold-500),
+    0 40px 80px -20px rgb(0 0 0 / 0.45),
+    0 0 0 1px rgb(255 255 255 / 0.1) inset;
+  overflow: hidden;
+  transform: rotateX(8deg) rotateY(0deg);
+  animation: device-float 6s ease-in-out infinite;
+}
+.device-screen {
+  position: absolute; inset: 10px; border-radius: 34px;
+  background: linear-gradient(180deg, var(--ivory) 0%, var(--sand) 100%);
+  overflow: hidden;
+  display: grid; place-items: center; padding: 1.5rem;
+}
+.device-notch {
+  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
+  width: 34%; height: 22px; background: var(--emerald-950); border-radius: 12px; z-index: 2;
+}
+.device-card {
+  width: 100%; background: #fff; border-radius: 18px; padding: 1rem; box-shadow: var(--shadow-card);
+  display: grid; gap: 0.75rem;
+}
+.device-card .row { display: flex; align-items: center; gap: 0.75rem; }
+.device-card .thumb { width: 42px; height: 42px; border-radius: 10px; background: var(--emerald-50); display: grid; place-items: center; font-size: 1.3rem; }
+.device-card .line { height: 8px; border-radius: 4px; background: var(--hairline); }
+.device-card .line.short { width: 45%; }
+.device-card .line.medium { width: 70%; }
+
+@keyframes device-float {
+  0%, 100% { transform: rotateX(8deg) translateY(0); }
+  50% { transform: rotateX(8deg) translateY(-14px); }
+}
+
+/* ---------- Sections ---------- */
+.section { padding-block: clamp(4.5rem, 10vw, 7.5rem); }
+.section-sand { background: var(--sand); }
+.section-ivory { background: var(--ivory); }
+
+.section-heading { text-align: center; max-width: 760px; margin-inline: auto; margin-block-end: 1rem; }
+.section-heading h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -0.03em; }
+.section-heading .lede { margin-inline: auto; margin-block-start: 1rem; font-size: 1.3rem; }
+.section-heading .gold-rule { display: none; }
+
+.grid { display: grid; gap: 1.5rem; margin-block-start: 2.8rem; }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+
+/* Bento grid (Apple-style asymmetric cards) */
+.bento { display: grid; gap: 1.25rem; margin-block-start: 3rem; }
+.bento-3 {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto auto;
+}
+.bento-3 .bento-card:first-child { grid-column: span 2; grid-row: span 2; }
+
+.bento-card {
+  position: relative; overflow: hidden;
+  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-xl);
+  padding: 2rem; box-shadow: var(--shadow-card);
+  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
+  display: flex; flex-direction: column; gap: 1rem;
+}
+.bento-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-lift); }
+.bento-card h3 { font-size: 1.5rem; }
+.bento-card p { color: var(--ink-soft); font-size: 1.02rem; }
+.bento-card .card-link { margin-block-start: auto; }
+
+.bento-card-dark {
+  background: linear-gradient(160deg, var(--emerald-800), var(--emerald-950));
+  color: #f2f7f3; border-color: rgb(198 161 91 / 0.25);
+}
+.bento-card-dark h3 { color: #fff; }
+.bento-card-dark p { color: #cfe0d6; }
+
+.card {
+  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg);
+  padding: 1.8rem; box-shadow: var(--shadow-card);
+  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
+}
+.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
+.card p { color: var(--ink-soft); }
+.card-icon {
+  display: inline-grid; place-items: center;
+  width: 54px; height: 54px; border-radius: var(--radius-md);
+  background: var(--emerald-50); font-size: 1.6rem; margin-block-end: 1.1rem;
+  transition: transform 0.35s var(--ease-spring);
+}
+.card:hover .card-icon { transform: scale(1.1) rotate(-4deg); }
+.card-link {
+  display: inline-block; margin-block-start: 1rem; font-weight: 600;
+  color: var(--emerald-700); border-block-end: 1px solid var(--gold-500);
+  transition: color 0.2s ease;
+}
+.card-link:hover { color: var(--gold-600); }
+
+/* ---------- Reveal animations ---------- */
+.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
+.reveal.is-visible { opacity: 1; transform: translateY(0); }
+
+/* ---------- Steps ---------- */
+.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-block-start: 2.8rem; }
+.step { position: relative; padding-inline-start: 3.6rem; }
+.step p { color: var(--ink-soft); }
+.step-num {
+  position: absolute; inset-inline-start: 0; top: 0;
+  display: grid; place-items: center;
+  width: 48px; height: 48px; border-radius: 50%;
+  background: var(--emerald-800); color: var(--gold-400);
+  font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 600;
+  box-shadow: inset 0 0 0 1.5px var(--gold-500);
+  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
+}
+.step:hover .step-num { transform: scale(1.12); box-shadow: inset 0 0 0 1.5px var(--gold-500), var(--shadow-gold); }
+
+/* ---------- Stats ---------- */
+.stats-section { background: var(--emerald-900); color: #f2f7f3; }
+.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
+.stat { display: grid; gap: 0.35rem; }
+.stat-number { font-family: "Fraunces", Georgia, serif; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; color: var(--gold-300); line-height: 1; }
+[dir="rtl"] .stat-number { font-family: "Almarai", sans-serif; }
+.stat-suffix { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; color: var(--gold-400); }
+.stat-label { font-size: 0.95rem; color: #b9cdc0; }
+
+/* ---------- Quote cards ---------- */
+.quote-card {
+  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg);
+  padding: 1.8rem; box-shadow: var(--shadow-card);
+  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
+}
+.quote-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
+.quote-card p { font-style: italic; color: var(--ink-soft); margin-block-end: 1.2rem; font-size: 1.05rem; }
+.quote-card footer { font-weight: 600; color: var(--emerald-800); }
+
+/* ---------- Split ---------- */
+.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
+.check-list { margin-block: 1.8rem 2.2rem; display: grid; gap: 0.9rem; }
+.check-list li { position: relative; padding-inline-start: 2rem; color: var(--ink-soft); }
+.check-list li::before {
+  content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
+  color: var(--gold-600); font-weight: 700;
+}
+
+.panel {
+  background:
+    radial-gradient(340px 220px at 90% 0%, rgb(198 161 91 / 0.28), transparent 55%),
+    linear-gradient(150deg, var(--emerald-800), var(--emerald-950));
+  border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-lift);
+}
+.panel-card {
+  background: rgb(251 247 238 / 0.07); border: 1px solid rgb(230 205 142 / 0.25);
+  border-radius: var(--radius-lg); padding: 1.8rem; color: #e8f0ea;
+  display: grid; gap: 1.1rem;
+}
+.panel-eyebrow {
+  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
+  text-transform: uppercase; color: var(--gold-400);
+}
+[dir="rtl"] .panel-eyebrow { letter-spacing: 0; }
+.panel-line { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
+.panel-line strong { color: var(--gold-300); font-family: "Fraunces", Georgia, serif; text-align: end; }
+[dir="rtl"] .panel-line strong { font-family: "Almarai", sans-serif; }
+
+/* ---------- Pricing ---------- */
+.pricing-grid { align-items: start; }
+.pricing-card {
+  position: relative; background: #fff; border: 1px solid var(--hairline);
+  border-radius: var(--radius-xl); padding: 2.2rem; box-shadow: var(--shadow-card);
+  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
+}
+.pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
+.pricing-featured {
+  border-color: var(--gold-500); transform: scale(1.03); z-index: 1;
+  background: linear-gradient(180deg, #fff, var(--ivory));
+}
+.pricing-featured:hover { transform: scale(1.03) translateY(-5px); }
+.pricing-badge {
+  position: absolute; inset-block-start: -12px; inset-inline-start: 50%;
+  transform: translateX(-50%);
+  background: var(--gold-500); color: var(--emerald-950);
+  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
+  padding: 0.35rem 0.9rem; border-radius: var(--radius-pill);
+}
+.price { font-family: "Fraunces", Georgia, serif; font-size: 2.8rem; font-weight: 700; color: var(--emerald-800); margin-block: 0.8rem 1.2rem; }
+[dir="rtl"] .price { font-family: "Almarai", sans-serif; }
+.price .currency { font-size: 1.1rem; font-weight: 600; color: var(--gold-600); margin-inline-end: 0.3rem; vertical-align: super; }
+.price .period { font-size: 1.05rem; color: var(--ink-soft); font-weight: 500; }
+.pricing-features { display: grid; gap: 0.75rem; margin-block: 0 1.8rem; font-size: 0.98rem; color: var(--ink-soft); }
+.pricing-features li::before { content: "✓"; color: var(--gold-600); font-weight: 700; margin-inline-end: 0.5rem; }
+
+/* ---------- FAQ ---------- */
+.faq { display: grid; gap: 1rem; margin-block-start: 2.2rem; }
+.faq-item {
+  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-md);
+  padding: 1.1rem 1.4rem; box-shadow: var(--shadow-card);
+  transition: box-shadow 0.25s ease, transform 0.25s var(--ease-out);
+}
+.faq-item:hover { box-shadow: var(--shadow-lift); }
+.faq-item summary {
+  font-weight: 600; color: var(--emerald-800); cursor: pointer; list-style: none;
+  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
+}
+.faq-item summary::-webkit-details-marker { display: none; }
+.faq-item summary::after {
+  content: "+"; font-size: 1.5rem; color: var(--gold-600); transition: transform 0.3s var(--ease-out);
+}
+.faq-item[open] summary::after { transform: rotate(45deg); }
+.faq-item p { color: var(--ink-soft); padding-block-start: 0.9rem; }
+
+/* ---------- Category visual ---------- */
+.category-list { margin-block: 1.6rem 2rem; display: grid; gap: 0.9rem; }
+.category-list li { position: relative; padding-inline-start: 1.8rem; color: var(--ink-soft); }
+.category-list li::before { content: "●"; position: absolute; inset-inline-start: 0; color: var(--gold-600); font-size: 0.6rem; top: 0.45rem; }
+.category-visual { position: relative; min-height: 320px; }
+.visual-card {
+  position: absolute; display: grid; place-items: center;
+  width: 92px; height: 92px; border-radius: var(--radius-lg);
+  background: #fff; border: 1px solid var(--hairline); font-size: 2.4rem;
+  box-shadow: var(--shadow-card); animation: float 5s ease-in-out infinite;
+}
+.visual-card-1 { inset-inline-start: 10%; top: 5%; animation-delay: 0s; }
+.visual-card-2 { inset-inline-end: 15%; top: 20%; animation-delay: 1s; }
+.visual-card-3 { inset-inline-start: 25%; bottom: 10%; animation-delay: 2s; }
+.visual-card-4 { inset-inline-end: 10%; bottom: 25%; animation-delay: 1.5s; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-14px); }
+}
+
+/* ---------- CTA band ---------- */
+.cta-band {
+  position: relative; overflow: hidden;
+  background:
+    radial-gradient(620px 340px at 12% 120%, rgb(31 132 89 / 0.38), transparent 55%),
+    radial-gradient(620px 340px at 88% -20%, rgb(198 161 91 / 0.22), transparent 55%),
+    var(--emerald-950);
+  color: #f2f7f3; padding-block: clamp(4rem, 9vw, 6rem);
+}
+.cta-inner { position: relative; z-index: 1; text-align: center; max-width: 680px; }
+.cta-inner h2 { color: #fff; }
+.cta-inner .lede { margin-inline: auto; margin-block-start: 0.9rem; }
+
+/* ---------- Contact ---------- */
+.contact-form { display: grid; gap: 1.2rem; margin-block-start: 1.8rem; }
+.contact-form label { font-weight: 600; font-size: 0.95rem; color: var(--emerald-800); }
+.contact-form input,
+.contact-form select,
+.contact-form textarea {
+  width: 100%; padding: 0.9rem 1.1rem;
+  border-radius: var(--radius-md); border: 1.5px solid var(--hairline);
+  background: #fff; color: var(--ink); font: inherit;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
+}
+.contact-form input:focus,
+.contact-form select:focus,
+.contact-form textarea:focus {
+  outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgb(198 161 91 / 0.12);
+  transform: translateY(-1px);
+}
+.contact-info { display: grid; gap: 1rem; }
+.info-card {
+  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg);
+  padding: 1.5rem; box-shadow: var(--shadow-card);
+  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
+}
+.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
+.info-card h3 { margin-block-end: 0.35rem; }
+.info-card p, .info-card a { color: var(--ink-soft); }
+.info-card a:hover { color: var(--emerald-700); }
+.form-note { margin-block-start: 0.5rem; font-size: 0.98rem; color: var(--emerald-700); min-height: 1.4em; }
+
+/* ---------- Section dark ---------- */
+.section-dark {
+  background:
+    radial-gradient(800px 360px at 80% -10%, rgb(198 161 91 / 0.14), transparent 55%),
+    radial-gradient(800px 460px at 10% 110%, rgb(31 132 89 / 0.22), transparent 55%),
+    linear-gradient(165deg, var(--emerald-900), var(--emerald-950));
+  color: #f2f7f3;
+}
+.section-dark h2 { color: #fff; }
+.section-dark h3 { color: #fff; }
+.section-dark .lede { color: #cfe0d6; }
+
+/* ---------- Feature cards ---------- */
+.feature-grid { display: grid; gap: 1.5rem; margin-block-start: 3rem; }
+.feature-card {
+  position: relative; overflow: hidden;
+  background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-xl);
+  padding: 2.2rem; box-shadow: var(--shadow-card);
+  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
+}
+.feature-card::before {
+  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0;
+  width: 100%; height: 4px;
+  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
+  transform: scaleX(0); transform-origin: inline-start;
+  transition: transform 0.45s var(--ease-out);
+}
+.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
+.feature-card:hover::before { transform: scaleX(1); }
+.feature-card h3 { font-size: 1.45rem; margin-block: 1rem 0.6rem; }
+.feature-card p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
+.feature-icon {
+  display: inline-grid; place-items: center;
+  width: 64px; height: 64px; border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, var(--emerald-50), var(--sand));
+  font-size: 1.9rem;
+  box-shadow: 0 4px 12px rgb(20 85 61 / 0.08);
+  transition: transform 0.35s var(--ease-spring);
+}
+.feature-card:hover .feature-icon { transform: scale(1.12) rotate(-6deg); }
+
+.feature-card-dark {
+  background: rgb(255 255 255 / 0.04);
+  border-color: rgb(230 205 142 / 0.18);
+}
+.feature-card-dark p { color: #cfe0d6; }
+.feature-card-dark::before { background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }
+.feature-icon-dark {
+  background: linear-gradient(135deg, var(--emerald-800), var(--emerald-700));
+  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
+}
+
+/* ---------- Parallax ---------- */
+.parallax { will-change: transform; }
+
+/* ---------- Text reveal ---------- */
+.hero-title.text-reveal { animation: none !important; opacity: 1; transform: none; }
+.text-reveal .word {
+  display: inline-block; opacity: 0; transform: translateY(18px);
+  animation: word-up 0.7s var(--ease-out) forwards;
+}
+@keyframes word-up {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ---------- Footer ---------- */
+.site-footer { background: var(--emerald-950); color: #b9cdc0; padding-block: 3.5rem 1.5rem; }
+.footer-inner {
+  display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between;
+  padding-block-end: 2.2rem; border-block-end: 1px solid rgb(230 205 142 / 0.15);
+}
+.footer-brand { display: grid; gap: 0.9rem; max-width: 320px; font-size: 0.95rem; }
+.footer-col { display: grid; gap: 0.65rem; }
+.footer-col h4 { color: var(--gold-300); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin-block-end: 0.4rem; }
+.footer-col a { font-size: 0.95rem; transition: color 0.2s ease; }
+.footer-col a:hover { color: var(--gold-300); }
+.footer-legal { padding-block-start: 1.6rem; font-size: 0.82rem; color: #7d9488; }
+
+/* ---------- Responsive ---------- */
+@media (max-width: 980px) {
+  .grid-2, .grid-3, .steps, .split, .stats-grid { grid-template-columns: 1fr; }
+  .bento-3 { grid-template-columns: 1fr; }
+  .bento-3 .bento-card:first-child { grid-column: span 1; grid-row: span 1; }
+  .pricing-featured { transform: none; }
+  .pricing-featured:hover { transform: translateY(-5px); }
+  .nav { display: none; }
+  .menu-toggle { display: block; }
+  .header-actions .btn-primary.btn-sm { display: none; }
+  .category-visual { min-height: 260px; }
+  .hero-apple .hero-title { font-size: clamp(2.6rem, 10vw, 4rem); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  .parallax { transform: none !important; }
+}
+
+@media (max-width: 640px) {
+  .hero-ctas { flex-direction: column; align-items: stretch; }
+  .hero-ctas .btn { width: 100%; }
+  .btn { width: 100%; }
+  .trust-inner { flex-direction: column; text-align: center; }
+  .step { padding-inline-start: 3.4rem; }
+  .panel-line { flex-direction: column; gap: 0.2rem; }
+  .device-frame { width: min(260px, 72vw); }
+  .header-inner { gap: 1rem; }
+}
diff --git a/wholesale.html b/wholesale.html
new file mode 100644
index 0000000..12fade9
--- /dev/null
+++ b/wholesale.html
@@ -0,0 +1,192 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Wholesale supply — Ordenax</title>
+  <meta name="description" content="Supply stores across Saudi Arabia through Ordenax. Digital catalog, demand insights, reliable logistics and clear invoicing." />
+  <meta property="og:title" content="Wholesale supply — Ordenax" />
+  <meta property="og:description" content="Supply the stores that feed the Kingdom with Ordenax wholesale." />
+  <meta property="og:type" content="website" />
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230F3D2C'/%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23C6A15B' stroke-width='1.5'/%3E%3Ctext x='32' y='42' font-family='Georgia,serif' font-size='30' fill='%23C6A15B' text-anchor='middle'%3EO%3C/text%3E%3C/svg%3E" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Almarai:wght@400;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body data-page="wholesale">
+  <header class="site-header" data-animate="nav">
+    <div class="container header-inner">
+      <a class="brand" href="index.html" aria-label="Ordenax home">
+        <span class="logo-disc" aria-hidden="true">O</span>
+        <span class="wordmark">ORDENAX</span>
+      </a>
+      <nav class="nav" aria-label="Primary">
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      </nav>
+      <div class="header-actions">
+        <button id="lang-toggle" class="lang-toggle" type="button" aria-label="Switch language">العربية</button>
+        <a class="btn btn-primary btn-sm" href="contact.html" data-i18n="nav.cta">Get started</a>
+        <button class="menu-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-nav">☰</button>
+      </div>
+    </div>
+  </header>
+  <div id="mobile-nav" class="mobile-nav" aria-hidden="true">
+    <nav aria-label="Mobile">
+      <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+      <a href="stores.html" data-i18n="nav.stores">Stores</a>
+      <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      <a href="contact.html" data-i18n="nav.contact">Contact</a>
+      <a class="btn btn-primary" href="contact.html" data-i18n="nav.cta">Get started</a>
+    </nav>
+  </div>
+
+  <main>
+    <section class="hero hero-small">
+      <div class="hero-glow" aria-hidden="true"></div>
+      <div class="container hero-inner">
+        <p class="eyebrow eyebrow-light hero-eyebrow" data-i18n="wholesale.hero.eyebrow">For suppliers and distributors</p>
+        <h1 class="hero-title" data-i18n="wholesale.hero.title">Supply the stores that feed the Kingdom.</h1>
+        <div class="gold-rule hero-rule" aria-hidden="true"></div>
+        <p class="lede lede-light hero-lede" data-i18n="wholesale.hero.lede">A digital wholesale channel that connects your products to neighborhood stores across Saudi Arabia.</p>
+        <div class="hero-ctas">
+          <a class="btn btn-gold shimmer" href="contact.html" data-i18n="wholesale.hero.cta">Become a supplier</a>
+          <a class="btn btn-outline-light" href="#for-stores" data-i18n="wholesale.hero.cta2">For stores</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="for-suppliers">
+      <div class="container">
+        <div class="section-heading">
+          <p class="eyebrow" data-i18n="wholesale.suppliers.eyebrow">Why suppliers partner with us</p>
+          <h2 data-i18n="wholesale.suppliers.title">Reach more stores with less overhead</h2>
+          <div class="gold-rule" aria-hidden="true"></div>
+        </div>
+        <div class="grid grid-3">
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🌐</div>
+            <h3 data-i18n="wholesale.suppliers.b1.title">Ready store network</h3>
+            <p data-i18n="wholesale.suppliers.b1.body">Access hundreds of active grocery stores already ordering through Ordenax.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">📊</div>
+            <h3 data-i18n="wholesale.suppliers.b2.title">Demand insights</h3>
+            <p data-i18n="wholesale.suppliers.b2.body">See what stores are buying, when they restock, and which products move fastest.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🚚</div>
+            <h3 data-i18n="wholesale.suppliers.b3.title">Reliable logistics</h3>
+            <p data-i18n="wholesale.suppliers.b3.body">Coordinate deliveries through your own fleet or our trusted logistics partners.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">📄</div>
+            <h3 data-i18n="wholesale.suppliers.b4.title">Clear invoices</h3>
+            <p data-i18n="wholesale.suppliers.b4.body">Every order generates an invoice with correct VAT breakdown and payment status.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🛒</div>
+            <h3 data-i18n="wholesale.suppliers.b5.title">Digital catalog</h3>
+            <p data-i18n="wholesale.suppliers.b5.body">Publish SKUs, photos and prices once. Stores see updates in real time.</p>
+          </article>
+          <article class="card reveal" data-animate="card">
+            <div class="card-icon" aria-hidden="true">🤝</div>
+            <h3 data-i18n="wholesale.suppliers.b6.title">Local support</h3>
+            <p data-i18n="wholesale.suppliers.b6.body">Work with a Saudi-based team that understands retail, seasons and supply cycles.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section section-sand" id="for-stores">
+      <div class="container split">
+        <div class="reveal" data-animate="fade">
+          <div class="section-heading" style="text-align: start; margin-inline: 0;">
+            <p class="eyebrow" data-i18n="wholesale.stores.eyebrow">For stores</p>
+            <h2 data-i18n="wholesale.stores.title">Restock without the runaround</h2>
+            <div class="gold-rule" aria-hidden="true"></div>
+          </div>
+          <p class="lede" data-i18n="wholesale.stores.lede">Find what you need, compare suppliers, and keep your shelves full — all from one screen.</p>
+          <ul class="check-list">
+            <li data-i18n="wholesale.stores.f1">Wide catalog of groceries, household and chilled goods</li>
+            <li data-i18n="wholesale.stores.f2">Competitive wholesale prices updated daily</li>
+            <li data-i18n="wholesale.stores.f3">Predictable delivery windows you can plan around</li>
+            <li data-i18n="wholesale.stores.f4">One invoice per order with clear VAT</li>
+          </ul>
+          <a class="btn btn-primary" href="stores.html" data-i18n="wholesale.stores.cta">See store plans</a>
+        </div>
+        <div class="panel reveal" data-animate="fade">
+          <div class="panel-card">
+            <p class="panel-eyebrow" data-i18n="wholesale.stores.panel.eyebrow">How wholesale works</p>
+            <p class="panel-line"><span data-i18n="wholesale.stores.panel.l1">Browse catalog</span><strong data-i18n="wholesale.stores.panel.v1">1</strong></p>
+            <p class="panel-line"><span data-i18n="wholesale.stores.panel.l2">Place order</span><strong data-i18n="wholesale.stores.panel.v2">2</strong></p>
+            <p class="panel-line"><span data-i18n="wholesale.stores.panel.l3">Receive delivery</span><strong data-i18n="wholesale.stores.panel.v3">3</strong></p>
+            <p class="panel-line"><span data-i18n="wholesale.stores.panel.l4">Pay invoice</span><strong data-i18n="wholesale.stores.panel.v4">4</strong></p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <div class="container narrow">
+        <h2 class="centered" data-i18n="wholesale.faq.title">Wholesale questions</h2>
+        <div class="gold-rule centered-rule" aria-hidden="true"></div>
+        <div class="faq">
+          <details class="faq-item reveal" data-animate="card">
+            <summary data-i18n="wholesale.faq.q1">Who can become a supplier?</summary>
+            <p data-i18n="wholesale.faq.a1">Licensed distributors, manufacturers and importers of food, beverages, household or personal-care products in Saudi Arabia.</p>
+          </details>
+          <details class="faq-item reveal" data-animate="card">
+            <summary data-i18n="wholesale.faq.q2">How do stores pay?</summary>
+            <p data-i18n="wholesale.faq.a2">Stores pay against the supplier's invoice through agreed payment terms — bank transfer, credit or cash on delivery.</p>
+          </details>
+          <details class="faq-item reveal" data-animate="card">
+            <summary data-i18n="wholesale.faq.q3">Do I need to list my whole catalog?</summary>
+            <p data-i18n="wholesale.faq.a3">No. Start with your best-moving items and expand as you see demand from the network.</p>
+          </details>
+        </div>
+      </div>
+    </section>
+
+    <section class="cta-band">
+      <div class="container cta-inner reveal" data-animate="fade">
+        <h2 data-i18n="wholesale.cta.title">Grow your wholesale reach</h2>
+        <p class="lede lede-light" data-i18n="wholesale.cta.lede">Talk to our partnerships team and see how Ordenax fits your distribution business.</p>
+        <a class="btn btn-gold shimmer" href="contact.html" data-i18n="wholesale.cta.button">Talk to sales</a>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="container footer-inner">
+      <div class="footer-brand">
+        <a class="brand brand-light" href="index.html" aria-label="Ordenax home">
+          <span class="logo-disc" aria-hidden="true">O</span>
+          <span class="wordmark">ORDENAX</span>
+        </a>
+        <p data-i18n="footer.tag">Marketplace · POS · Wholesale — bilingual by construction.</p>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.product">Product</h4>
+        <a href="shoppers.html" data-i18n="nav.shoppers">Shoppers</a>
+        <a href="stores.html" data-i18n="nav.stores">Stores</a>
+        <a href="wholesale.html" data-i18n="nav.wholesale">Wholesale</a>
+      </div>
+      <div class="footer-col">
+        <h4 data-i18n="footer.company">Company</h4>
+        <a href="contact.html" data-i18n="nav.contact">Contact</a>
+        <a href="#" data-i18n="footer.privacy">Privacy</a>
+        <a href="#" data-i18n="footer.terms">Terms</a>
+      </div>
+    </div>
+    <div class="container footer-legal">
+      <p data-i18n="footer.legal">© 2026 Ordenax. Made in Saudi Arabia.</p>
+    </div>
+  </footer>
+
+  <script src="app.js"></script>
+</body>
+</html>