<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <script src="/src/js/lang-init.js"></script>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" />
  <title>Mara - مَرَا | Your Smart Health Assistant</title>
  <meta name="description" content="Mara connects your health data from Apple Health & Health Connect, transforming it into natural conversations. Get personalized insights, emotional support, and track your wellness journey." />
  <meta name="robots" content="index,follow" />
  <meta name="keywords" content="health assistant, wellness app, Apple Health, Health Connect, AI health, Saudi Arabia, مَرَا, صحة" />
  <link rel="canonical" href="https://iammara.com/" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://iammara.com/" />
  <meta property="og:title" content="Mara - Your Smart Health Assistant | مَرَا - مساعدك الصحي الذكي" />
  <meta property="og:description" content="Connect your health devices, have natural conversations with your data, and get personalized wellness insights. Built in Saudi Arabia." />
  <meta property="og:image" content="https://iammara.com/public/assets/images/Mara Dashboard AR.jpg" />
  <meta property="og:locale" content="ar_SA" />
  <meta property="og:locale:alternate" content="en_US" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:url" content="https://iammara.com/" />
  <meta name="twitter:title" content="Mara - Your Smart Health Assistant" />
  <meta name="twitter:description" content="Transform your health data into natural conversations. Connect Apple Health & Health Connect for personalized wellness insights." />
  <meta name="twitter:image" content="https://iammara.com/public/assets/images/Mara Dashboard AR.jpg" />
  
  <!-- Favicons - Multiple sizes for best compatibility -->
  <link rel="icon" type="image/x-icon" href="/public/assets/favicon/favicon.ico" />
  <link rel="icon" type="image/png" sizes="16x16" href="/public/assets/favicon/favicon-16x16.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/public/assets/favicon/favicon-32x32.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/public/assets/favicon/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />

  <!-- Language alternates -->
  <link rel="alternate" hreflang="ar" href="https://iammara.com/" />
  <link rel="alternate" hreflang="en" href="https://iammara.com/?lang=en" />
  <link rel="alternate" hreflang="x-default" href="https://iammara.com/" />

  <meta name="theme-color" content="#9BC5E3" />
  <!-- Google Fonts - Noto Sans Arabic for Arabic ligature support -->
  <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=Noto+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="/src/styles/main.css">
  
  <!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=12040326188"></script>
  
  <!-- Skip link for accessibility -->
  <style>
    /* Dark Overlay Pattern */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 100%);
      z-index: 0;
      pointer-events: none;
    }
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('/public/assets/images/overlay-pattern.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.08;
      pointer-events: none;
      z-index: 0;
    }
    .skip-link {
      position: absolute;
      top: 0;
      left: 0;
      background: #9BC5E3;
      color: #000;
      padding: 8px;
      text-decoration: none;
      z-index: 100000;
      font-weight: 600;
      transform: translateY(-100%);
      opacity: 0;
    }
    .skip-link:focus {
      transform: translateY(0);
      opacity: 1;
    }
  </style>
  
  <script src="/src/js/pages/index-gtag.js"></script>
  
  <!-- GSAP + ScrollTrigger -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
  <!-- Finisher Header -->
  <script src="/src/js/lib/finisher-header.es5.min.js" type="text/javascript"></script>
</head>
<body>
  <a href="#maraFeatures" class="skip-link">Skip to main content</a>

  <!-- Finisher Animated Header Background -->
  <div class="finisher-header"></div>

  <!-- Desktop Floating Navigation - Auto-generated from sections -->
  <nav class="mara-floating-nav mara-desktop-only" id="maraFloatingNav" aria-label="القائمة الرئيسية">
    <!-- Nav links generated dynamically by JS from sections with data-nav-ar/data-nav-en -->
  </nav>

  <!-- Logo for mobile (positioned by existing CSS) -->
  <div class="top-logo top-logo--mobile">
    <img src="/public/assets/images/Mara logo.png" alt="Mara" decoding="async" />
  </div>

  <!-- Logo for desktop - responsive sizing -->
  <a href="#" class="desktop-logo" aria-label="Mara Home">
    <img src="/public/assets/images/Mara logo.png" alt="Mara" decoding="async" loading="eager" />
  </a>

  <!-- Beta Form Overlay -->
  <div class="beta-form-overlay" id="betaFormOverlay"></div>
  
  <!-- Beta Form Container - Animated Card Design -->
  <div class="beta-form-container" id="betaFormContainer">
    <div class="card beta-chat-card">
      <div class="nav-bar">
        <button type="button" class="beta-chat-icon-btn" aria-label="Mara assistant">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M12 3C7.58 3 4 6.58 4 11V16.2C4 16.64 4.36 17 4.8 17H8.5L11.2 20.2C11.6 20.66 12.32 20.66 12.7 20.2L15.4 17H19.2C19.64 17 20 16.64 20 16.2V11C20 6.58 16.42 3 12 3Z" stroke="currentColor" stroke-width="1.6"/>
            <circle cx="9.2" cy="10.5" r="0.9" fill="currentColor"/>
            <circle cx="14.8" cy="10.5" r="0.9" fill="currentColor"/>
          </svg>
        </button>
        <div class="beta-chat-title" data-i18n="waitlistChatTitle">Mara Chat</div>
        <button type="button" class="close-btn" id="closeFormBtn" aria-label="Close form">
          <span class="line"></span>
          <span class="line"></span>
          <span class="line"></span>
        </button>
      </div>

      <div class="messages-area beta-chat-shell" aria-live="polite">
        <div class="beta-chat-brand" aria-hidden="true">
          <img src="/public/assets/images/Mara logo.png" alt="" decoding="async" />
        </div>

        <h2 class="beta-chat-prompt" id="betaFormIntro" data-i18n="waitlistPrompt">How can I help you tonight?</h2>

        <div class="beta-chat-suggestions" aria-hidden="true">
          <button type="button" class="beta-suggestion" data-i18n="waitlistSuggestion1">Tips for better sleep</button>
          <button type="button" class="beta-suggestion" data-i18n="waitlistSuggestion2">Best bedtime routine</button>
          <button type="button" class="beta-suggestion" data-i18n="waitlistSuggestion3">How to plan for tomorrow?</button>
        </div>

        <div class="message beta-chat-reply-row">
          <div id="betaFormMsg" class="form-message beta-chat-bubble beta-chat-bubble--bot" aria-live="polite"></div>
        </div>
      </div>

      <div class="sender-area">
        <form class="form" id="betaForm">
          <label for="betaEmail" id="emailLabel" class="sr-only" data-i18n="emailLabel">البريد الإلكتروني</label>
          <div class="beta-input-row">
            <button type="button" class="beta-chat-icon-btn beta-chat-action" aria-hidden="true" tabindex="-1">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5V7.5M7.5 12H16.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
            </button>
            <button type="button" class="beta-chat-icon-btn beta-chat-action" aria-hidden="true" tabindex="-1">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4C10.34 4 9 5.34 9 7V11C9 12.66 10.34 14 12 14C13.66 14 15 12.66 15 11V7C15 5.34 13.66 4 12 4Z" stroke="currentColor" stroke-width="1.8"/><path d="M6.5 10.5V11C6.5 14.04 8.96 16.5 12 16.5C15.04 16.5 17.5 14.04 17.5 11V10.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 16.5V20" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
            </button>

            <div class="input-place">
              <input
                type="email"
                id="betaEmail"
                class="send-input"
                name="email"
                data-i18n-placeholder="waitlistChatInputPlaceholder"
                placeholder="Ask Mara anything..."
                required
              />
              <button type="submit" class="send" aria-label="Send email to waitlist">
                <svg class="send-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M12 18V6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                  <path d="M7.5 10.5L12 6L16.5 10.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span id="submitBtnText" class="sr-only" data-i18n="submitBtn">إرسال</span>
              </button>
            </div>
          </div>

          <!-- Enhanced honeypot fields -->
          <div class="honeypot-field" aria-hidden="true">
            <label for="betaWebsite">Leave this field empty</label>
            <input type="text" id="betaWebsite" name="website" tabindex="-1" autocomplete="off">
          </div>
          <input type="email" name="email_confirm" style="position:absolute;left:-9999px;top:0" tabindex="-1" autocomplete="off" aria-hidden="true">
          <input type="text" name="phone" style="position:absolute;left:-9999px;top:0" tabindex="-1" autocomplete="off" aria-hidden="true">
        </form>
      </div>
    </div>
  </div>
  
  <!-- SVG Filters for Button Effects -->
  <svg class="svg-filters">
    <defs>
      <filter id="unopaq">
        <feComponentTransfer>
          <feFuncA type="discrete" tableValues="0 1"></feFuncA>
        </feComponentTransfer>
      </filter>
      <filter id="unopaq2">
        <feComponentTransfer>
          <feFuncA type="discrete" tableValues="0 1"></feFuncA>
        </feComponentTransfer>
      </filter>
      <filter id="unopaq3">
        <feComponentTransfer>
          <feFuncA type="discrete" tableValues="0 1"></feFuncA>
        </feComponentTransfer>
      </filter>
    </defs>
      </svg>

  <!-- Hero Section -->
  <section class="apple-hero-section" id="apple-hero">
    <div class="apple-hero-content">
      <!-- Main Title -->
      <div class="hero-title-container">
        <h1 class="hero-main-title" data-i18n="heroMainTitle">محادثة <span class="blue-highlight">وحدة</span><br><span class="blue-highlight">صفر</span> تشتت</h1>
      </div>

      <!-- Subtitle -->
      <div class="hero-details">
        <p class="hero-subtitle" data-i18n="heroSubtitle">مرا عقل لكل بياناتك الصحية داخل محادثة وحدة</p>
      </div>

      <!-- CTA Button -->
      <button class="gradient-button apple-hero-button" id="appleHeroBetaButton" aria-label="Join Mara beta waitlist">
        <span class="gradient-text" data-i18n="heroCtaText">كن أول من يجرب مَرَا</span>
      </button>
    </div>
  </section>

  <!-- ========================================================================
       NEW SECTIONS - Mobile-First Lightweight Design
       ======================================================================== -->

  <!-- Section 1: Truth/Value Prop -->
  <section id="truth" class="mara-section-simple mara-truth-section">
    <div class="mara-truth-content" id="truthContent">
      <span class="mara-section-label" data-i18n="sectionLabelChallenge">سمعناكم</span>
      <h2 class="mara-section-simple__title" data-i18n="truthTitle">صحتك في محادثة واحدة</h2>
      <p class="mara-section-simple__desc" data-i18n="truthDesc">بدل ما تفتح عشر تطبيقات، اسأل مَرَا. كل بياناتك الصحية في مكان واحد.</p>
    </div>
  </section>

  <!-- Pain Points - Speech Bubbles -->
  <section id="pain-points" class="mara-pain-points">
    <span class="mara-section-label mara-mobile-only" data-i18n="sectionLabelChallenge">سمعناكم</span>
    <div class="mara-pain-points__container">
      <!-- Problem 1: Too many apps -->
      <div class="mara-pain-points__bubble mara-pain-points__bubble--right">
        <span class="mara-pain-points__text" data-i18n="painPointBubble1">"تطبيق للسعرات، تطبيق للماء، تطبيق للجيم... متى بتخلص؟"</span>
      </div>
      <!-- Problem 2: Wearable data scattered -->
      <div class="mara-pain-points__bubble mara-pain-points__bubble--left">
        <span class="mara-pain-points__text" data-i18n="painPointBubble2">"ساعتي الذكية تجمع بيانات، بس وين أكلّم بياناتي الصحية وتكلّمني؟"</span>
      </div>
      <!-- Problem 3: Women's health -->
      <div class="mara-pain-points__bubble mara-pain-points__bubble--right">
        <span class="mara-pain-points__text" data-i18n="painPointBubble3">"أبي تطبيق يفهم دورتي ويساعدني أتابعها بخصوصية"</span>
      </div>
      <!-- Problem 4: Devices don't connect -->
      <div class="mara-pain-points__bubble mara-pain-points__bubble--left">
        <span class="mara-pain-points__text" data-i18n="painPointBubble4">"تعبت ، كل جهاز من اجهزتي بعالم ثاني وما اعرف كيف استفيد منهم!"</span>
      </div>
      <!-- Problem 5: Need guidance -->
      <div class="mara-pain-points__bubble mara-pain-points__bubble--right">
        <span class="mara-pain-points__text" data-i18n="painPointBubble5">"مين يفهم روتيني اليومي ويساعدني أحسّنه؟"</span>
      </div>
    </div>
  </section>

  <!-- What Makes Mara Different - Solution Section -->
  <section id="mara-difference" class="mara-difference-section">
    <div class="mara-difference__container">
      <h2 class="mara-difference__title" data-i18n="differenceTitle">وش يميّز مَرَا؟</h2>

      <div class="mara-difference__grid">
        <!-- Point 1: Single Entry -->
        <div class="mara-difference__card">
          <span class="mara-difference__number" data-i18n="differenceNum1">1</span>
          <h3 class="mara-difference__card-title" data-i18n="differencePoint1Title">نقطة دخول واحدة</h3>
          <p class="mara-difference__card-desc" data-i18n="differencePoint1Desc">كل شيء يبدأ من الشات</p>
        </div>

        <!-- Point 2: No Distraction -->
        <div class="mara-difference__card">
          <span class="mara-difference__number" data-i18n="differenceNum2">2</span>
          <h3 class="mara-difference__card-title" data-i18n="differencePoint2Title">قرار واحد بدون تشتت</h3>
          <p class="mara-difference__card-desc" data-i18n="differencePoint2Desc">توجيه واضح بدل خيارات كثيرة</p>
        </div>

        <!-- Point 3: Unified System -->
        <div class="mara-difference__card">
          <span class="mara-difference__number" data-i18n="differenceNum3">3</span>
          <h3 class="mara-difference__card-title" data-i18n="differencePoint3Title">كل الإشارات في نظام واحد</h3>
          <p class="mara-difference__card-desc" data-i18n="differencePoint3Desc">حركتك + تمارينك + اكلك + روتينك</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Section Divider -->
  <div class="mara-divider">
    <div class="mara-divider__line"></div>
  </div>

  <!-- MOBILE: Phone Carousel with Theme Toggle -->
  <section id="showcase" class="mara-carousel mara-mobile-only">
    <span class="mara-section-label" data-i18n="sectionLabelSolution">الحل</span>

    <div class="mara-carousel__track">
      <!-- Slide 1: Chat -->
      <div class="mara-carousel__slide">
        <h3 class="mara-carousel__title" data-i18n="slide1Title">تحدث مع مَرَا</h3>
        <p class="mara-carousel__desc" data-i18n="slide1Desc">محادثة طبيعية عن صحتك ويومك</p>
        <div class="mara-carousel__phone">
          <img class="mara-carousel__img"
               data-light-ar="/public/assets/images/slides/slide1-chat-ar-light.webp"
               data-dark-ar="/public/assets/images/slides/slide1-chat-ar-dark.webp"
               data-light-en="/public/assets/images/slides/slide1-chat-en-light.webp"
               data-dark-en="/public/assets/images/slides/slide1-chat-en-dark.webp"
               src="/public/assets/images/slides/slide1-chat-ar-dark.webp"
               alt="محادثة مَرَا"
               loading="eager">
        </div>
      </div>
      <!-- Slide 2: Food/Nutrition -->
      <div class="mara-carousel__slide">
        <h3 class="mara-carousel__title" data-i18n="slide2Title">تتبع تغذيتك</h3>
        <p class="mara-carousel__desc" data-i18n="slide2Desc">اعرف السعرات بسهولة</p>
        <div class="mara-carousel__phone">
          <img class="mara-carousel__img"
               data-light-ar="/public/assets/images/slides/slide2-food-ar-light.webp"
               data-dark-ar="/public/assets/images/slides/slide2-food-ar-dark.webp"
               data-light-en="/public/assets/images/slides/slide2-food-en-light.webp"
               data-dark-en="/public/assets/images/slides/slide2-food-en-dark.webp"
               src="/public/assets/images/slides/slide2-food-ar-dark.webp"
               alt="تتبع التغذية"
               loading="lazy">
        </div>
      </div>
      <!-- Slide 3: Connect Health -->
      <div class="mara-carousel__slide">
        <h3 class="mara-carousel__title" data-i18n="slide3Title">اربط بياناتك</h3>
        <p class="mara-carousel__desc" data-i18n="slide3Desc">صحة أبل و هيلث كونيكت</p>
        <div class="mara-carousel__phone">
          <img class="mara-carousel__img"
               data-light-ar="/public/assets/images/slides/slide3-connect-ar-light.webp?v=20260301d"
               data-dark-ar="/public/assets/images/slides/slide3-connect-ar-dark.webp?v=20260301d"
               data-light-en="/public/assets/images/slides/slide3-connect-en-light.webp?v=20260301d"
               data-dark-en="/public/assets/images/slides/slide3-connect-en-dark.webp?v=20260301d"
               src="/public/assets/images/slides/slide3-connect-ar-dark.webp?v=20260301d"
               alt="ربط البيانات"
               loading="lazy">
        </div>
      </div>
      <!-- Slide 4: Dashboard -->
      <div class="mara-carousel__slide">
        <h3 class="mara-carousel__title" data-i18n="slide4Title">لوحة رؤيتك</h3>
        <p class="mara-carousel__desc" data-i18n="slide4Desc">كل بياناتك في مكان واحد</p>
        <div class="mara-carousel__phone">
          <img class="mara-carousel__img"
               data-light-ar="/public/assets/images/slides/slide4-dashboard-ar-light.webp"
               data-dark-ar="/public/assets/images/slides/slide4-dashboard-ar-dark.webp"
               data-light-en="/public/assets/images/slides/slide4-dashboard-en-light.webp"
               data-dark-en="/public/assets/images/slides/slide4-dashboard-en-dark.webp"
               src="/public/assets/images/slides/slide4-dashboard-ar-dark.webp"
               alt="لوحة التحكم"
               loading="lazy">
        </div>
      </div>
    </div>
    <!-- Dots and Theme Toggle -->
    <div class="mara-carousel__controls">
      <div class="mara-carousel__dots" id="carouselDots">
        <span class="mara-carousel__dot mara-carousel__dot--active" data-slide="0"></span>
        <span class="mara-carousel__dot" data-slide="1"></span>
        <span class="mara-carousel__dot" data-slide="2"></span>
        <span class="mara-carousel__dot" data-slide="3"></span>
      </div>
      <div class="mara-carousel__theme-toggle">
        <label class="switch">
          <input type="checkbox" id="themeCheckbox" checked>
          <span class="slider">
            <span class="star star_1"></span>
            <span class="star star_2"></span>
            <span class="star star_3"></span>
            <svg class="cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
              <path fill="#fff" d="M96 224c0-53 43-96 96-96c11.5 0 22.5 2 32.7 5.7C247 95.1 287.9 64 336 64c53 0 96 43 96 96l0 1.3c36.8 10.1 64 43.8 64 83.7c0 47.1-38.9 85-87 85L208 330c-53 0-96-43-96-96l-16 0 0-10z"/>
            </svg>
          </span>
        </label>
      </div>
    </div>
  </section>

  <!-- FLOATING PHONE OVERLAY - Fixed position, visible during showcase -->
  <div class="mara-floating-phone mara-desktop-only" id="floatingPhone">
    <!-- Dynamic Glow Effect -->
    <div class="mara-floating-phone__glow" data-glow></div>

    <div class="mara-floating-phone__device" data-phone>
      <!-- Dynamic Island -->
      <div class="mara-floating-phone__notch"></div>

      <!-- Stacked Screens for smooth transitions -->
      <div class="mara-floating-phone__screens">
        <img class="mara-floating-phone__screen is-active" data-screen="0"
             data-light-ar="/public/assets/images/slides/slide1-chat-ar-light.webp"
             data-dark-ar="/public/assets/images/slides/slide1-chat-ar-dark.webp"
             data-light-en="/public/assets/images/slides/slide1-chat-en-light.webp"
             data-dark-en="/public/assets/images/slides/slide1-chat-en-dark.webp"
             src="/public/assets/images/slides/slide1-chat-ar-dark.webp"
             alt="Chat with Mara">
        <img class="mara-floating-phone__screen" data-screen="1"
             data-light-ar="/public/assets/images/slides/slide2-food-ar-light.webp"
             data-dark-ar="/public/assets/images/slides/slide2-food-ar-dark.webp"
             data-light-en="/public/assets/images/slides/slide2-food-en-light.webp"
             data-dark-en="/public/assets/images/slides/slide2-food-en-dark.webp"
             src="/public/assets/images/slides/slide2-food-ar-dark.webp"
             alt="Track Nutrition">
        <img class="mara-floating-phone__screen" data-screen="2"
             data-light-ar="/public/assets/images/slides/slide3-connect-ar-light.webp?v=20260301d"
             data-dark-ar="/public/assets/images/slides/slide3-connect-ar-dark.webp?v=20260301d"
             data-light-en="/public/assets/images/slides/slide3-connect-en-light.webp?v=20260301d"
             data-dark-en="/public/assets/images/slides/slide3-connect-en-dark.webp?v=20260301d"
             src="/public/assets/images/slides/slide3-connect-ar-dark.webp?v=20260301d"
             alt="Connect Data">
        <img class="mara-floating-phone__screen" data-screen="3"
             data-light-ar="/public/assets/images/slides/slide4-dashboard-ar-light.webp"
             data-dark-ar="/public/assets/images/slides/slide4-dashboard-ar-dark.webp"
             data-light-en="/public/assets/images/slides/slide4-dashboard-en-light.webp"
             data-dark-en="/public/assets/images/slides/slide4-dashboard-en-dark.webp"
             src="/public/assets/images/slides/slide4-dashboard-ar-dark.webp"
             alt="Your Dashboard">
      </div>

      <!-- Theme Toggle -->
      <div class="mara-floating-phone__toggle">
        <label class="switch">
          <input type="checkbox" id="desktopThemeCheckbox" checked>
          <span class="slider">
            <span class="star star_1"></span>
            <span class="star star_2"></span>
            <span class="star star_3"></span>
            <svg class="cloud" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
              <path fill="#fff" d="M96 224c0-53 43-96 96-96c11.5 0 22.5 2 32.7 5.7C247 95.1 287.9 64 336 64c53 0 96 43 96 96l0 1.3c36.8 10.1 64 43.8 64 83.7c0 47.1-38.9 85-87 85L208 330c-53 0-96-43-96-96l-16 0 0-10z"/>
            </svg>
          </span>
        </label>
      </div>
    </div>
  </div>

  <!-- DESKTOP: Showcase Cards -->
  <section id="showcase-desktop" class="mara-showcase mara-desktop-only" data-nav-ar="شاهد مَرَا" data-nav-en="Watch Mara">
    <div class="mara-showcase__scroll-container">
      <!-- Card 1: Chat -->
      <div class="mara-showcase__card is-active" data-slide="0">
        <div class="mara-showcase__card-inner">
          <span class="mara-showcase__step-badge">1</span>
          <h3 class="mara-showcase__title" data-i18n="slide1Title">تحدث مع مَرَا</h3>
          <p class="mara-showcase__desc" data-i18n="slide1Desc">محادثة طبيعية عن صحتك ويومك</p>
          <div class="mara-showcase__tags">
            <span class="mara-showcase__tag" data-i18n="slide1Feature1">اسأل بأي لغة</span>
            <span class="mara-showcase__tag" data-i18n="slide1Feature2">رد فوري على أسئلتك</span>
            <span class="mara-showcase__tag" data-i18n="slide1Feature3">نصائح مخصصة لك</span>
          </div>
        </div>
      </div>

      <!-- Card 2: Food -->
      <div class="mara-showcase__card" data-slide="1">
        <div class="mara-showcase__card-inner">
          <span class="mara-showcase__step-badge">2</span>
          <h3 class="mara-showcase__title" data-i18n="slide2Title">تتبع تغذيتك</h3>
          <p class="mara-showcase__desc" data-i18n="slide2Desc">اعرف السعرات بسهولة</p>
          <div class="mara-showcase__tags">
            <span class="mara-showcase__tag" data-i18n="slide2Feature1">صور وجبتك واحصل على التفاصيل</span>
            <span class="mara-showcase__tag" data-i18n="slide2Feature2">اقتراحات صحية لك شخصيًا</span>
            <span class="mara-showcase__tag" data-i18n="slide2Feature3">اقتراحات صحية يومية</span>
          </div>
        </div>
      </div>

      <!-- Card 3: Connect -->
      <div class="mara-showcase__card" data-slide="2">
        <div class="mara-showcase__card-inner">
          <span class="mara-showcase__step-badge">3</span>
          <h3 class="mara-showcase__title" data-i18n="slide3Title">اربط بياناتك</h3>
          <p class="mara-showcase__desc" data-i18n="slide3Desc">صحة أبل و هيلث كونيكت</p>
          <div class="mara-showcase__tags">
            <span class="mara-showcase__tag" data-i18n="slide3Feature1">اربط ساعتك الذكية</span>
            <span class="mara-showcase__tag" data-i18n="slide3Feature2">تزامن تلقائي للبيانات</span>
            <span class="mara-showcase__tag" data-i18n="slide3Feature3">رؤية شاملة لصحتك</span>
          </div>
        </div>
      </div>

      <!-- Card 4: Dashboard -->
      <div class="mara-showcase__card" data-slide="3">
        <div class="mara-showcase__card-inner">
          <span class="mara-showcase__step-badge">4</span>
          <h3 class="mara-showcase__title" data-i18n="slide4Title">لوحة رؤيتك</h3>
          <p class="mara-showcase__desc" data-i18n="slide4Desc">كل بياناتك في مكان واحد</p>
          <div class="mara-showcase__tags">
            <span class="mara-showcase__tag" data-i18n="slide4Feature1">نظرة شاملة على صحتك</span>
            <span class="mara-showcase__tag" data-i18n="slide4Feature2">تتبع التقدم بمرور الوقت</span>
            <span class="mara-showcase__tag" data-i18n="slide4Feature3">أهداف مخصصة لك</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Section Divider -->
  <div class="mara-divider">
    <div class="mara-divider__line"></div>
  </div>

  <!-- Section: Replace Your Tools - Faded App Icons -->
  <section id="replace-tools" class="mara-replace-tools">
    <span class="mara-section-label" data-i18n="sectionLabelResult">النتيجة</span>
    <div class="mara-replace-tools__content">
      <!-- Faded App Icons Row with Strikethrough -->
      <div class="mara-replace-tools__icons-wrapper">
        <div class="mara-replace-tools__icons">
          <picture><source srcset="/public/assets/images/app-icons/water-reminder.webp" type="image/webp"><img src="/public/assets/images/app-icons/water-reminder.png" alt="Water Reminder" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/period-tracker.webp" type="image/webp"><img src="/public/assets/images/app-icons/period-tracker.png" alt="Period Tracker" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/mezan.png" type="image/png"><img src="/public/assets/images/app-icons/mezan.png" alt="Mezan" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/stepsapp.webp" type="image/webp"><img src="/public/assets/images/app-icons/stepsapp.png" alt="StepsApp" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/myfitnesspal.png" type="image/png"><img src="/public/assets/images/app-icons/myfitnesspal.png" alt="MyFitnessPal" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/tahara.png" type="image/png"><img src="/public/assets/images/app-icons/tahara.png" alt="Tahara" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/apple-health.webp" type="image/webp"><img src="/public/assets/images/app-icons/apple-health.png" alt="Apple Health" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/chatgpt.webp" type="image/webp"><img src="/public/assets/images/app-icons/chatgpt.png" alt="ChatGPT" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/gemini.webp" type="image/webp"><img src="/public/assets/images/app-icons/gemini.png" alt="Gemini" loading="lazy"></picture>
          <picture><source srcset="/public/assets/images/app-icons/medisearch.png" type="image/png"><img src="/public/assets/images/app-icons/medisearch.png" alt="MediSearch AI" loading="lazy"></picture>
        </div>
        <!-- Strikethrough line -->
        <div class="mara-replace-tools__strike"></div>
        <!-- Fade overlay -->
        <div class="mara-replace-tools__fade"></div>
      </div>

      <!-- Copy with blue highlights -->
      <h2 class="mara-replace-tools__title">
        <span data-i18n="replaceToolsLine1"><span class="blue-highlight">أكثر</span> وضوحاً.</span><br>
        <span data-i18n="replaceToolsLine2">أسئلة <span class="blue-highlight">أقل</span>.</span>
      </h2>
      <p class="mara-replace-tools__desc" data-i18n="replaceToolsDesc">اجمع محادثاتك وبياناتك وإجراءاتك اليومية في نظام واحد.<br>مَرَا هنا لتقلّل التشتيت وتوحّد القرار.</p>
    </div>
  </section>

  <!-- Section Divider -->
  <div class="mara-divider">
    <div class="mara-divider__line"></div>
  </div>

  <!-- Integrations Section -->
  <section id="integrations" class="mara-integrations" data-nav-ar="الأجهزة" data-nav-en="Devices">
    <span class="mara-section-label" data-i18n="sectionLabelIntegrations">اربط أجهزتك</span>
    <h2 class="mara-integrations__title" data-i18n="integrationsTitle">كل بياناتك في مكان واحد</h2>
    <p class="mara-integrations__subtitle" data-i18n="integrationsSubtitle">اربط مرة واحدة، وشوف كل شي</p>

    <div class="mara-integrations__grid mara-integrations__grid--two">
      <div class="mara-integrations__item mara-integrations__item--icon-only">
        <picture><source srcset="/public/assets/images/integrations/apple-health.webp" type="image/webp"><img src="/public/assets/images/integrations/apple-health.png" alt="Apple Health" loading="lazy"></picture>
      </div>
      <div class="mara-integrations__item mara-integrations__item--icon-only">
        <img src="/public/assets/images/integrations/health-connect.svg" alt="Health Connect" loading="lazy">
      </div>
    </div>
  </section>

  <!-- Section Divider -->
  <div class="mara-divider">
    <div class="mara-divider__line"></div>
  </div>

  <!-- How It Works Section -->
  <section id="how-it-works" class="mara-how-it-works mara-how-it-works--minimal" data-nav-ar="كيف يعمل" data-nav-en="How It Works">
    <span class="mara-section-label" data-i18n="sectionLabelHowItWorks">كيف تشتغل؟</span>

    <div class="mara-how-it-works__flow">
      <div class="mara-how-it-works__item">
        <span class="mara-how-it-works__num">1</span>
        <span class="mara-how-it-works__word" data-i18n="howStep1Word">اربط</span>
      </div>
      <div class="mara-how-it-works__connector"></div>
      <div class="mara-how-it-works__item">
        <span class="mara-how-it-works__num">2</span>
        <span class="mara-how-it-works__word" data-i18n="howStep2Word">اسأل</span>
      </div>
      <div class="mara-how-it-works__connector"></div>
      <div class="mara-how-it-works__item">
        <span class="mara-how-it-works__num">3</span>
        <span class="mara-how-it-works__word" data-i18n="howStep3Word">اكتشف</span>
      </div>
    </div>
  </section>

  <!-- Section Divider with Transition -->
  <div class="mara-divider mara-divider--features-entry">
    <div class="mara-divider__line"></div>
  </div>

  <!-- Features Scroll Section -->
  <section id="features" class="mara-features mara-features--scroll" data-nav-ar="المميزات" data-nav-en="Features">
    <span class="mara-section-label" data-i18n="sectionLabelFeatures">المميزات</span>
    
    <div class="mara-features__container">
      
      <!-- Feature 1: Calories -->
      <div class="mara-features__item" data-feature="calories">
        <div class="mara-features__illustration">
          <svg viewBox="0 0 450 320" xmlns="http://www.w3.org/2000/svg">
            <g class="illustration-calories">
                <!-- Phone frame -->
                <rect x="145" y="30" width="160" height="260" rx="20" stroke="currentColor" fill="rgba(0,0,0,0.02)" stroke-width="2.5"/>
                <circle cx="225" cy="45" r="4" fill="currentColor" opacity="0.3"/>
                <rect x="210" y="275" width="30" height="5" rx="2.5" fill="currentColor" opacity="0.15"/>
                
                <!-- Food photo frame -->
                <rect x="160" y="70" width="130" height="130" rx="12" stroke="currentColor" fill="rgba(66, 190, 234, 0.03)" stroke-width="1.8"/>
                
                <!-- Food illustration - plate with healthy meal -->
                <circle cx="225" cy="135" r="45" stroke="currentColor" fill="none" stroke-width="2" opacity="0.8"/>
                <!-- Veggies -->
                <circle cx="205" cy="125" r="12" stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="1.5"/>
                <circle cx="235" cy="125" r="12" stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="1.5"/>
                <path d="M210 145 Q225 155, 240 145" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round"/>
                <!-- Fork and knife -->
                <path d="M175 130 L175 150" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
                <path d="M172 130 L172 140" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
                <path d="M178 130 L178 140" stroke="currentColor" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
                
                <!-- Calorie display -->
                <rect x="165" y="215" width="120" height="50" rx="10" stroke="currentColor" fill="rgba(66, 190, 234, 0.08)" stroke-width="1.5"/>
                <text x="225" y="242" text-anchor="middle" font-size="28" font-weight="bold" fill="currentColor" class="calorie-number">450</text>
                <text x="225" y="258" text-anchor="middle" font-size="11" fill="currentColor" opacity="0.6" data-i18n="caloriesLabel">calories</text>
                
                <!-- Floating food icons -->
                <g class="float-1">
                  <circle cx="60" cy="100" r="22" stroke="currentColor" fill="rgba(66, 190, 234, 0.1)" stroke-width="2"/>
                  <path d="M60 85 Q60 78, 65 78 M60 85 Q60 78, 55 78" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
                </g>
                <g class="float-2">
                  <circle cx="355" cy="140" r="20" stroke="currentColor" fill="rgba(66, 190, 234, 0.1)" stroke-width="2"/>
                  <path d="M345 135 L350 145 L360 130" stroke="currentColor" fill="none" stroke-width="1.8" stroke-linecap="round"/>
                </g>
                <g class="float-3">
                  <path d="M380 90 C380 90, 375 80, 375 75 C375 70, 378 67, 380 67 C382 67, 385 70, 385 75 C385 80, 380 90, 380 90" stroke="currentColor" fill="rgba(66, 190, 234, 0.1)" stroke-width="1.8"/>
                </g>
              </g>
            </svg>
          </div>
          <div class="mara-features__content">
            <h3 data-i18n="featureCaloriesTitle">Track Your Nutrition</h3>
            <p data-i18n="featureCaloriesLongDesc">Easily track your meals and daily calorie burn. Take a photo of your food and know its calories instantly</p>
          </div>
        </div>

        <!-- Feature 2: Water -->
        <div class="mara-features__item" data-feature="water">
          <div class="mara-features__illustration">
            <svg viewBox="0 0 450 320" xmlns="http://www.w3.org/2000/svg">
              <g class="illustration-water">
                <!-- Bottle cap -->
                <path d="M190 50 L190 35 L195 30 L255 30 L260 35 L260 50" stroke="currentColor" fill="rgba(66, 190, 234, 0.05)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                <rect x="195" y="30" width="60" height="8" rx="2" stroke="currentColor" fill="rgba(66, 190, 234, 0.1)" stroke-width="1.5"/>
                
                <!-- Bottle body -->
                <rect x="180" y="50" width="90" height="200" rx="12" stroke="currentColor" fill="rgba(66, 190, 234, 0.02)" stroke-width="2.8"/>
                
                <!-- Water level with wave -->
                <path d="M188 140 Q205 135, 222 140 Q239 145, 262 140 L262 238 Q245 243, 225 238 Q205 243, 188 238 Z" 
                      fill="rgba(66, 190, 234, 0.25)" stroke="none"/>
                <path d="M188 140 Q205 135, 222 140 Q239 145, 262 140" 
                      stroke="currentColor" fill="none" stroke-width="2" class="water-wave"/>
                
                <!-- Measurement lines -->
                <g opacity="0.6">
                  <line x1="275" y1="80" x2="290" y2="80" stroke="currentColor" stroke-width="2"/>
                  <text x="295" y="84" font-size="11" fill="currentColor" opacity="0.8">2L</text>
                  <line x1="275" y1="120" x2="285" y2="120" stroke="currentColor" stroke-width="1.5"/>
                  <line x1="275" y1="160" x2="290" y2="160" stroke="currentColor" stroke-width="2"/>
                  <text x="295" y="164" font-size="11" fill="currentColor" opacity="0.8">1L</text>
                  <line x1="275" y1="200" x2="285" y2="200" stroke="currentColor" stroke-width="1.5"/>
                  <line x1="275" y1="240" x2="290" y2="240" stroke="currentColor" stroke-width="2"/>
                  <text x="295" y="244" font-size="11" fill="currentColor" opacity="0.8">0L</text>
                </g>
                
                <!-- Floating water drops -->
                <g class="float-drop-1">
                  <path d="M310 75 C310 75, 305 65, 305 60 C305 55, 308 52, 310 52 C312 52, 315 55, 315 60 C315 65, 310 75, 310 75" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="2"/>
                  <ellipse cx="310" cy="60" rx="3" ry="5" fill="rgba(255,255,255,0.4)"/>
                </g>
                <g class="float-drop-2">
                  <path d="M350 130 C350 130, 345 120, 345 115 C345 110, 348 107, 350 107 C352 107, 355 110, 355 115 C355 120, 350 130, 350 130" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="2"/>
                  <ellipse cx="350" cy="115" rx="3" ry="5" fill="rgba(255,255,255,0.4)"/>
                </g>
                <g class="float-drop-3">
                  <path d="M100 160 C100 160, 95 150, 95 145 C95 140, 98 137, 100 137 C102 137, 105 140, 105 145 C105 150, 100 160, 100 160" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="2"/>
                  <ellipse cx="100" cy="145" rx="3" ry="5" fill="rgba(255,255,255,0.4)"/>
                </g>
                <g class="float-drop-4">
                  <path d="M130 200 C130 200, 125 190, 125 185 C125 180, 128 177, 130 177 C132 177, 135 180, 135 185 C135 190, 130 200, 130 200" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="2"/>
                  <ellipse cx="130" cy="185" rx="3" ry="5" fill="rgba(255,255,255,0.4)"/>
                </g>
              </g>
            </svg>
          </div>
          <div class="mara-features__content">
            <h3 data-i18n="featureWaterTitle">Hydration Tracking</h3>
            <p data-i18n="featureWaterLongDesc">Stay hydrated with smart reminders and track your daily water intake in a simple, visual way</p>
          </div>
        </div>

        <!-- Feature 3: Sleep -->
        <div class="mara-features__item" data-feature="sleep">
          <div class="mara-features__illustration">
            <svg viewBox="0 0 450 320" xmlns="http://www.w3.org/2000/svg">
              <g class="illustration-sleep">
                <!-- Bed frame -->
                <rect x="110" y="150" width="230" height="90" rx="10" stroke="currentColor" fill="rgba(66, 190, 234, 0.03)" stroke-width="2.5"/>
                <rect x="100" y="230" width="12" height="50" rx="3" stroke="currentColor" fill="rgba(66, 190, 234, 0.05)" stroke-width="2"/>
                <rect x="338" y="230" width="12" height="50" rx="3" stroke="currentColor" fill="rgba(66, 190, 234, 0.05)" stroke-width="2"/>
                
                <!-- Mattress detail -->
                <path d="M120 150 Q225 145, 330 150" stroke="currentColor" fill="none" stroke-width="1.5" opacity="0.3"/>
                
                <!-- Pillow -->
                <ellipse cx="165" cy="150" rx="45" ry="18" stroke="currentColor" fill="rgba(66, 190, 234, 0.08)" stroke-width="2"/>
                <path d="M140 150 Q165 155, 190 150" stroke="currentColor" fill="none" stroke-width="1.2" opacity="0.4"/>
                
                <!-- Person's head -->
                <circle cx="245" cy="165" r="20" stroke="currentColor" fill="rgba(66, 190, 234, 0.05)" stroke-width="2"/>
                <!-- Closed eyes -->
                <path d="M237 162 Q240 164, 243 162" stroke="currentColor" fill="none" stroke-width="1.8" stroke-linecap="round"/>
                <!-- Body under blanket -->
                <path d="M225 185 Q245 195, 265 185 Q285 180, 300 185 L300 225 L225 225 Z" 
                      stroke="currentColor" fill="rgba(66, 190, 234, 0.06)" stroke-width="2"/>
                
                <!-- Zzz animation -->
                <g class="zzz-1">
                  <text x="285" y="110" font-size="28" font-weight="300" fill="currentColor" opacity="0.5">Z</text>
                </g>
                <g class="zzz-2">
                  <text x="305" y="85" font-size="24" font-weight="300" fill="currentColor" opacity="0.4">Z</text>
                </g>
                <g class="zzz-3">
                  <text x="320" y="65" font-size="20" font-weight="300" fill="currentColor" opacity="0.3">Z</text>
                </g>
                
                <!-- Moon and stars -->
                <g class="moon-stars">
                  <path d="M370 55 C367 58, 365 63, 365 68 C365 78, 373 86, 383 86 C385 86, 387 85, 388 84 C387 86, 385 87, 383 87 C373 87, 365 79, 365 69 C365 60, 370 53, 377 50" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.1)" stroke-width="2"/>
                  <path d="M340 50 L342 53 L345 52 L343 55 L346 57 L342 57 L341 60 L340 57 L336 57 L339 55 L337 52 Z" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="1.2" class="star-1"/>
                  <path d="M360 95 L361.5 97.5 L364 96.5 L362.5 99 L365 100.5 L361.5 100.5 L361 103 L360 100.5 L356.5 100.5 L359 99 L357.5 96.5 Z" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="1.2" class="star-2"/>
                  <path d="M395 75 L396 77 L398 76 L397 78 L399 79 L396 79 L396 81 L395 79 L392 79 L394 78 L393 76 Z" 
                        stroke="currentColor" fill="rgba(66, 190, 234, 0.15)" stroke-width="1" class="star-3"/>
                </g>
                
                <!-- Sleep quality indicator -->
                <g opacity="0.7">
                  <rect x="50" y="180" width="45" height="60" rx="8" stroke="currentColor" fill="rgba(66, 190, 234, 0.05)" stroke-width="1.8"/>
                  <text x="72.5" y="205" text-anchor="middle" font-size="20" font-weight="bold" fill="currentColor">8h</text>
                  <text x="72.5" y="220" text-anchor="middle" font-size="9" fill="currentColor" opacity="0.6">sleep</text>
                  <circle cx="72.5" cy="230" r="3" fill="#42BEEA"/>
                </g>
              </g>
            </svg>
          </div>
          <div class="mara-features__content">
            <h3 data-i18n="featureSleepTitle">تحليل نومك</h3>
            <p data-i18n="featureSleepDesc">افهم جودة نومك وحسّنها مع تقارير مفصلة ونصائح شخصية</p>
          </div>
        </div>

        <!-- Feature 4: Wearables -->
        <div class="mara-features__item" data-feature="wearables">
          <div class="mara-features__illustration">
            <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
              <!-- Smartwatch -->
              <rect x="150" y="100" width="100" height="120" rx="15" stroke="currentColor" fill="none" stroke-width="2"/>
              <rect x="145" y="80" width="110" height="20" rx="8" stroke="currentColor" fill="none" stroke-width="1.5"/>
              <rect x="145" y="220" width="110" height="20" rx="8" stroke="currentColor" fill="none" stroke-width="1.5"/>
              <!-- Watch screen -->
              <circle cx="200" cy="145" r="25" stroke="currentColor" fill="none" stroke-width="2"/>
              <path d="M200 130 L200 145 L210 155" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <!-- Activity rings on watch -->
              <circle cx="200" cy="185" r="12" stroke="#42BEEA" fill="none" stroke-width="2" stroke-dasharray="25 75" stroke-linecap="round" transform="rotate(-90 200 185)"/>
              <circle cx="200" cy="185" r="8" stroke="#6DD5FA" fill="none" stroke-width="2" stroke-dasharray="15 50" stroke-linecap="round" transform="rotate(-90 200 185)"/>
              <!-- Connection lines to phone -->
              <rect x="280" y="110" width="70" height="100" rx="8" stroke="currentColor" fill="none" stroke-width="2"/>
              <circle cx="315" cy="118" r="2" fill="currentColor"/>
              <path d="M250 150 Q265 145, 280 150" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.6"/>
              <path d="M250 165 Q265 170, 280 165" stroke="currentColor" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.6"/>
              <!-- Phone screen elements -->
              <circle cx="315" cy="150" r="15" stroke="currentColor" fill="none" stroke-width="1.5"/>
              <path d="M310 145 L315 155 L325 140" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"/>
              <rect x="290" y="175" width="50" height="6" rx="3" stroke="currentColor" fill="none" stroke-width="1"/>
              <rect x="290" y="188" width="35" height="6" rx="3" stroke="currentColor" fill="none" stroke-width="1"/>
            </svg>
          </div>
          <div class="mara-features__content">
            <h3 data-i18n="featureWearableTitle">ربط أجهزتك الذكية</h3>
            <p data-i18n="featureWearableDesc">اربط ساعتك ومزامنة تلقائية لكل بياناتك الصحية في مكان واحد</p>
          </div>
        </div>

        <!-- Features 5 & 6: Coming Soon (Combined Card) -->
        <div class="mara-features__item mara-features__item--coming mara-features__item--combined" data-feature="coming-soon">
          <div class="mara-features__combined-grid">
            <!-- Period Tracking -->
            <div class="mara-features__combined-item">
              <div class="mara-features__illustration mara-features__illustration--small">
                <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
                  <!-- Calendar -->
                  <rect x="100" y="90" width="200" height="160" rx="12" stroke="currentColor" fill="rgba(66, 190, 234, 0.02)" stroke-width="2.5"/>
                  <!-- Header -->
                  <rect x="100" y="90" width="200" height="35" rx="12" stroke="currentColor" fill="rgba(66, 190, 234, 0.08)" stroke-width="0"/>
                  <!-- Grid lines -->
                  <line x1="140" y1="90" x2="140" y2="250" stroke="currentColor" stroke-width="1" opacity="0.3"/>
                  <line x1="180" y1="90" x2="180" y2="250" stroke="currentColor" stroke-width="1" opacity="0.3"/>
                  <line x1="220" y1="90" x2="220" y2="250" stroke="currentColor" stroke-width="1" opacity="0.3"/>
                  <line x1="260" y1="90" x2="260" y2="250" stroke="currentColor" stroke-width="1" opacity="0.3"/>
                  <line x1="100" y1="125" x2="300" y2="125" stroke="currentColor" stroke-width="1" opacity="0.3"/>
                  <line x1="100" y1="160" x2="300" y2="160" stroke="currentColor" stroke-width="1" opacity="0.3"/>
                  <line x1="100" y1="195" x2="300" y2="195" stroke="currentColor" stroke-width="1" opacity="0.3"/>
                  <!-- Marked days -->
                  <circle cx="120" cy="145" r="12" stroke="#42BEEA" fill="rgba(66, 190, 234, 0.2)" stroke-width="2"/>
                  <circle cx="160" cy="145" r="12" stroke="#42BEEA" fill="rgba(66, 190, 234, 0.2)" stroke-width="2"/>
                  <circle cx="200" cy="145" r="12" stroke="#42BEEA" fill="rgba(66, 190, 234, 0.2)" stroke-width="2"/>
                  <circle cx="240" cy="145" r="12" stroke="#42BEEA" fill="rgba(66, 190, 234, 0.2)" stroke-width="2"/>
                  <!-- Flower decoration -->
                  <path d="M340 180 C340 180, 337 175, 337 172 C337 169, 338.5 167, 340 167 C341.5 167, 343 169, 343 172 C343 175, 340 180, 340 180" stroke="currentColor" fill="rgba(66, 190, 234, 0.1)" stroke-width="1.5"/>
                  <circle cx="340" cy="172" r="3" fill="currentColor"/>
                  <path d="M340 167 L340 155" stroke="currentColor" stroke-width="1.5"/>
                </svg>
              </div>
              <div class="mara-features__content">
                <h3 data-i18n="featurePeriodTitle">متابعة الدورة الشهرية</h3>
                <p data-i18n="featurePeriodDesc">تابعي دورتك بخصوصية تامة مع تنبؤات ذكية وتذكيرات شخصية</p>
              </div>
            </div>

            <!-- Workout -->
            <div class="mara-features__combined-item">
              <div class="mara-features__illustration mara-features__illustration--small">
                <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
                  <!-- Person exercising -->
                  <circle cx="200" cy="90" r="22" stroke="currentColor" fill="none" stroke-width="2"/>
                  <path d="M200 112 L200 170" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <path d="M200 130 L170 150" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <path d="M200 130 L230 110" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <path d="M200 170 L175 210" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <path d="M200 170 L225 210" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  <!-- Dumbbell -->
                  <circle cx="235" cy="105" r="8" stroke="currentColor" fill="none" stroke-width="2"/>
                  <!-- Activity rings -->
                  <circle cx="310" cy="120" r="35" stroke="currentColor" fill="none" stroke-width="3" opacity="0.3" stroke-dasharray="220"/>
                  <circle cx="310" cy="120" r="35" stroke="#42BEEA" fill="none" stroke-width="3" stroke-dasharray="165 220" stroke-linecap="round" transform="rotate(-90 310 120)"/>
                  <circle cx="310" cy="120" r="25" stroke="currentColor" fill="none" stroke-width="3" opacity="0.3" stroke-dasharray="157"/>
                  <circle cx="310" cy="120" r="25" stroke="#6DD5FA" fill="none" stroke-width="3" stroke-dasharray="118 157" stroke-linecap="round" transform="rotate(-90 310 120)"/>
                  <!-- Stats -->
                  <text x="310" y="125" text-anchor="middle" font-size="18" font-weight="bold" fill="currentColor">75%</text>
                  <!-- Movement lines -->
                  <path d="M165 155 Q160 160, 165 165" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
                  <path d="M90 140 Q85 145, 90 150" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
                </svg>
              </div>
              <div class="mara-features__content">
                <h3 data-i18n="featureWorkoutTitle">متابعة تمارينك</h3>
                <p data-i18n="featureWorkoutDesc">سجّل تمارينك وتقدمك مع تحليل شامل لأدائك الرياضي</p>
              </div>
            </div>
          </div>
          <div class="mara-features__combined-badge">
            <span class="mara-features__badge" data-i18n="comingSoon">قريباً</span>
          </div>
        </div>

      </div>

      <!-- Navigation Dots -->
    </div>
  </section>

  <!-- Section Divider -->
  <div class="mara-divider">
    <div class="mara-divider__line"></div>
  </div>

  <!-- Privacy Section -->
  <section id="privacy-section" class="mara-privacy mara-privacy--minimal" data-nav-ar="الخصوصية" data-nav-en="Privacy">
    <span class="mara-section-label" data-i18n="sectionLabelPrivacy">خصوصيتك</span>

    <div class="mara-privacy__statement">
      <h2 class="mara-privacy__headline" data-i18n="privacyHeadline">بياناتك في السعودية</h2>
      <p class="mara-privacy__text" data-i18n="privacyText">جميع خوادمنا داخل المملكة العربية السعودية.</p>
      <div class="mara-privacy__points">
        <span class="mara-privacy__point" data-i18n="privacyPoint1">تشفير كامل</span>
        <span class="mara-privacy__divider">•</span>
        <span class="mara-privacy__point" data-i18n="privacyPoint2">خوادم سعودية</span>
        <span class="mara-privacy__divider">•</span>
        <span class="mara-privacy__point" data-i18n="privacyPoint3">لا نبيع بياناتك</span>
      </div>

      <div class="mara-privacy__trust-grid" aria-label="Privacy trust highlights">
        <article class="mara-privacy__trust-card">
          <h3 data-i18n="privacyPoint1">تشفير كامل</h3>
          <p data-i18n="privacyText">جميع خوادمنا داخل المملكة العربية السعودية.</p>
        </article>
        <article class="mara-privacy__trust-card">
          <h3 data-i18n="privacyPoint2">خوادم سعودية</h3>
          <p data-i18n="privacyText">جميع خوادمنا داخل المملكة العربية السعودية.</p>
        </article>
        <article class="mara-privacy__trust-card">
          <h3 data-i18n="privacyPoint3">لا نبيع بياناتك</h3>
          <p data-i18n="privacyText">جميع خوادمنا داخل المملكة العربية السعودية.</p>
        </article>
      </div>
    </div>
  </section>

  <!-- Simple CTA Form (temporary - will be removed at launch) -->
  <div class="mara-simple-cta">
    <form class="mara-simple-cta__form" id="maraCTAForm">
      <input type="email"
             class="mara-simple-cta__input"
             placeholder="بريدك الإلكتروني"
             data-i18n-placeholder="emailPlaceholder"
             required>
      <button type="submit" class="mara-simple-cta__btn" data-i18n="ctaButtonJoin">سجّل الآن</button>
    </form>
  </div>

  <!-- Section Divider -->
  <div class="mara-divider">
    <div class="mara-divider__line"></div>
  </div>

  <!-- FAQ Section -->
  <section id="faq" class="mara-faq" data-nav-ar="الأسئلة" data-nav-en="FAQ">
    <h2 class="mara-faq__title" data-i18n="faqTitle">أسئلة شائعة</h2>
    <p class="mara-faq__subtitle" data-i18n="faqSubtitle">كل ما تحتاج معرفته عن مَرَا</p>

    <div class="mara-faq__container" id="faqContainer">
      <!-- FAQ items will be dynamically generated from JavaScript -->
    </div>

    <button class="mara-faq__load-more" id="faqLoadMore" data-i18n="faqLoadMore">عرض المزيد</button>
  </section>

  <!-- Section Divider -->
  <div class="mara-divider">
    <div class="mara-divider__line"></div>
  </div>

  <footer id="globalFooter" class="footer"></footer>

  <!-- Scripts -->
  <!-- Language Switcher (i18n) -->

  <!-- GSAP Animations -->
  
  <!-- Initialize Finisher Header with Brand Colors -->
  
  <!-- Hamburger Menu Toggle -->
  
  <!-- Gradient Button - Hide on Scroll & Open Form -->
  
  <!-- Beta Form Submit Handler - Uses Existing Cloudflare Logic -->
  


  <!-- Mobile Carousel -->
  <script src="/src/js/pages/index-carousel.js"></script>

  <!-- Desktop Sticky Showcase -->
  <script src="/src/js/pages/index-showcase.js"></script>

  <!-- External Scripts -->
  <script src="/src/js/main.js"></script>
  <script src="/src/js/footer.js"></script>

  <!-- Desktop Scroll Animations -->
  <script src="/src/js/pages/index-scroll.js"></script>
</body>
</html>
