/* Mara Landing Page - Main Stylesheet */

/* Universal Reset for Cross-Device Consistency */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* Prevent iOS text size adjustment */
    html {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    
    /* Global Responsive Base */
    html {
      font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); /* Fluid base font */
      /* Removed scroll-behavior: smooth - causes laggy feel on fast scrolling */
      -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
    }
    
    /* ===== RESPONSIVE CONTAINER - Use on all sections ===== */
    .container {
      width: 100%;
      max-width: min(1200px, 100%);
      margin-inline: auto;
      padding-inline: clamp(1rem, 4vw, 3rem);
    }
    
    /* Readable text container */
    .text-readable {
      max-width: 60ch;
      margin-inline: auto;
    }
    
    body {
      font-size: 1rem; /* Uses the responsive base */
      -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    }
    html, body {
      width: 100%;
      max-width: 100vw; /* Prevent horizontal overflow */
      overflow-x: hidden; /* Hide horizontal scroll */
      min-height: 100vh;
      min-height: 100svh; /* Stable height - no shift with mobile browser bar */
      margin: 0;
      padding: 0;
      overscroll-behavior: none; /* Prevent bounce/pull-to-refresh on mobile */
      overscroll-behavior-y: none; /* Explicit vertical bounce prevention */
      -webkit-overflow-scrolling: auto; /* Remove iOS momentum bounce */
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
      background: #000000;
      position: relative;
      color: #ffffff;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    
    /* Responsive Images - Prevent overflow */
    img, video, svg {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* Text overflow handling for long content and Arabic text */
    p, span, li, label, h1, h2, h3, h4, h5, h6 {
      word-break: break-word;
      overflow-wrap: break-word;
    }
    
    /* Improve scroll performance */
    * {
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Ensure touch targets are large enough (44px minimum for accessibility) */
    button, a, input, select, textarea {
      min-height: 44px;
      min-width: 44px;
    }
    
    /* Finisher Header Background */
    .finisher-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0; /* Behind all content */
      pointer-events: none;
    }
    
    /* Modern Animated Gradient Background - Enhanced */
    html::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
      background: #000000;
      will-change: auto;
    }
    
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      /* Removed heavy backdrop-filter blur - causes scroll performance issues */
      pointer-events: none;
      z-index: 1;
      opacity: 0.9;
      contain: layout style paint;
    }
    
    body > * {
      position: relative;
      z-index: 1;
    }
    
    /* Logo in Top Left Corner */
    .top-logo {
      position: fixed;
      top: clamp(16px, 3vw, 24px);
      right: clamp(16px, 3vw, 24px);
      left: auto;
      z-index: 1000; /* Above all content */
      max-width: clamp(60px, 8vw, 100px);
      width: auto;
      max-height: clamp(60px, 8vw, 100px);
      height: auto;
      transition: transform 0.3s ease, opacity 0.3s ease;
      cursor: pointer;
    }
    
    .top-logo img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    }
    
    .top-logo:hover {
      transform: scale(1.05);
      opacity: 0.9;
    }
    

    
    [dir="rtl"] .top-logo {
      right: auto !important;
      left: clamp(16px, 3vw, 24px) !important;
    }

    /* =============================================================================
       DESKTOP LOGO - Responsive & Competitive
       Scales smoothly across all desktop screen sizes
       ============================================================================= */
    .desktop-logo {
      display: none; /* Hidden on mobile by default */
      position: fixed;
      top: clamp(20px, 2.5vw, 32px);
      right: clamp(24px, 3vw, 48px);
      left: auto;
      z-index: 1001;
      /* Responsive sizing: min 56px, scales with viewport, max 88px */
      width: clamp(56px, 6vw, 88px);
      height: clamp(56px, 6vw, 88px);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 0.3s ease,
                  filter 0.3s ease;
      cursor: pointer;
      text-decoration: none;
    }

    .desktop-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
      border-radius: 16px;
    }

    .desktop-logo:hover {
      transform: scale(1.08) translateY(-2px);
      opacity: 0.95;
    }

    .desktop-logo:hover img {
      filter: drop-shadow(0 8px 20px rgba(66, 190, 234, 0.25));
    }

    /* RTL: Logo on left side */
    [dir="rtl"] .desktop-logo {
      right: auto;
      left: clamp(24px, 3vw, 48px);
    }

    /* Show desktop logo only on desktop */
    @media (min-width: 768px) {
      .desktop-logo {
        display: block;
      }
    }

    /* Large screens: bigger logo */
    @media (min-width: 1200px) {
      .desktop-logo {
        width: clamp(72px, 5vw, 96px);
        height: clamp(72px, 5vw, 96px);
        top: clamp(24px, 2vw, 36px);
        right: clamp(32px, 3vw, 56px);
      }

      [dir="rtl"] .desktop-logo {
        right: auto;
        left: clamp(32px, 3vw, 56px);
      }
    }

    /* Extra large screens: even bigger */
    @media (min-width: 1600px) {
      .desktop-logo {
        width: clamp(80px, 4.5vw, 104px);
        height: clamp(80px, 4.5vw, 104px);
        top: 32px;
        right: 64px;
      }

      [dir="rtl"] .desktop-logo {
        right: auto;
        left: 64px;
      }
    }

    /* Ultra-wide screens */
    @media (min-width: 2000px) {
      .desktop-logo {
        width: 112px;
        height: 112px;
        top: 40px;
        right: 80px;
      }

      [dir="rtl"] .desktop-logo {
        right: auto;
        left: 80px;
      }
    }

    /* Desktop Navigation Bar - Center Top */
    .desktop-nav {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      display: none; /* Hidden on mobile */
      background: rgba(11, 31, 40, 0.75);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-radius: 32px;
      padding: 8px 12px;
      border: 1px solid rgba(155, 197, 227, 0.25);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                  0 2px 8px rgba(155, 197, 227, 0.1);
    }
    
    .desktop-nav-content {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .desktop-nav .nav-link {
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 24px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      position: relative;
    }
    
    .desktop-nav .nav-link:hover {
      color: #0B1F28;
      background: rgba(155, 197, 227, 0.2);
      transform: translateY(-1px);
    }
    
    .desktop-nav .nav-link.active {
      color: #0B1F28;
      background: linear-gradient(135deg, #9BC5E3 0%, #A8D0E8 100%);
      box-shadow: 0 4px 12px rgba(155, 197, 227, 0.3),
                  0 1px 3px rgba(0, 0, 0, 0.1);
      font-weight: 600;
    }
    
    /* Show on laptop/desktop screens */
    @media (min-width: 1024px) {
      .desktop-nav {
        display: block;
      }
    }
    
    /* Waitlist Form - Fully Responsive */
    .waitlist-bar {
      max-width: min(420px, 90vw);
      width: 100%;
      margin: 0 auto;
      padding: clamp(16px, 4vw, 24px);
    }
    #waitlistIntro {
      font-size: clamp(15px, 1.5vw, 18px);
      margin-bottom: clamp(16px, 2.5vw, 20px);
      text-align: center;
      color: #ffffff;
      opacity: 0.9;
    }
    #waitlistForm {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(10px, 1.5vw, 12px);
    }
    input[type="email"] {
      width: 100%;
      max-width: min(300px, 85vw);
      font-size: clamp(14px, 2.5vw, 16px);
      padding: clamp(10px, 2vw, 12px) clamp(12px, 3vw, 16px);
      border: 2px solid rgba(155, 197, 227, 0.3);
      border-radius: clamp(6px, 1.5vw, 8px);
      background: rgba(11, 31, 40, 0.6);
      color: #ffffff;
      font-family: inherit;
      transition: all 0.2s ease;
    }
    input[type="email"]:focus {
      outline: none;
      border-color: #9BC5E3;
      box-shadow: 0 0 0 clamp(2px, 0.4vw, 3px) rgba(155, 197, 227, 0.2);
      background: rgba(11, 31, 40, 0.8);
    }
    input[type="email"]::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
    
    /* Success glow animation for email input */
    @keyframes successGlow {
      0% {
        background: rgba(11, 31, 40, 0.8);
        border-color: rgba(155, 197, 227, 0.3);
        box-shadow: 0 0 0 0 rgba(155, 197, 227, 0);
      }
      50% {
        background: rgba(155, 197, 227, 0.25);
        border-color: rgba(155, 197, 227, 0.9);
        box-shadow: 0 0 20px 4px rgba(155, 197, 227, 0.4);
      }
      100% {
        background: rgba(11, 31, 40, 0.8);
        border-color: rgba(155, 197, 227, 0.3);
        box-shadow: 0 0 0 0 rgba(155, 197, 227, 0);
      }
    }
    
    input[type="email"].success-glow {
      animation: successGlow 400ms ease-in-out;
    }
    
    .cta {
      width: 100%;
      max-width: min(300px, 85vw);
      padding: clamp(10px, 2vw, 12px) clamp(20px, 4vw, 24px);
      font-size: clamp(14px, 2.5vw, 16px);
      font-weight: 600;
      border-radius: clamp(6px, 1.5vw, 8px);
      border: none;
      background: #9BC5E3;
      color: #0B1F28;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: inherit;
    }
    .cta:hover {
      background: #42BEEA;
      transform: translateY(clamp(-1px, -0.2vw, -2px));
      box-shadow: 0 clamp(3px, 0.5vw, 4px) clamp(10px, 1.5vw, 12px) rgba(66, 190, 234, 0.4);
    }
    .cta:active {
      transform: translateY(0);
    }
    #waitlistMsg {
      margin-top: clamp(10px, 1.5vw, 12px);
      font-size: 0.95em;
      text-align: center;
      color: #42BEEA;
    }
    #waitlistMsg.error {
      color: #ff6b6b;
    }
    
    /* Footer - Fully Responsive */
    footer {
      padding: clamp(20px, 5vw, 40px) clamp(16px, 4vw, 24px) clamp(60px, 8vw, 80px);
      text-align: center;
      color: rgba(255, 255, 255, 0.6);
      font-size: clamp(12px, 2vw, 14px);
      width: 100%;
      max-width: 100vw;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      direction: rtl; /* RTL for Arabic */
      min-height: clamp(200px, 30vw, 280px); /* Ensure enough space for all elements */
    }
    
    /* Center section wrapper - visually centered */
    .footer-center-section {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: min(1100px, 100%);
      width: 100%;
      gap: clamp(12px, 2vw, 16px); /* Consistent spacing between social and text */
      z-index: 1200;
      pointer-events: auto;
      text-align: center;
      margin: 0 auto;
    }
    
    /* Left section - legal links stay on left visually */
    .footer-left-section {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      min-width: fit-content;
      position: relative;
      z-index: 10;
      pointer-events: auto;
      padding-left: clamp(20px, 4vw, 40px);
      margin-top: clamp(60px, 8vw, 100px); /* Push down to reduce footer space */
      padding-bottom: clamp(20px, 4vw, 30px);
    }
    
    /* For English, reverse the layout */
    html[lang="en"][dir="ltr"] footer {
      direction: ltr;
    }
    
    html[lang="en"][dir="ltr"] .footer-left-section {
      padding-left: 0;
      padding-right: clamp(20px, 4vw, 40px);
    }
    
    /* Footer Legal Links - Now in left section */
    .footer-legal-links {
      display: flex;
      flex-direction: column;
      gap: clamp(12px, 2vw, 18px); /* Increased gap between categories */
      margin: 0;
      width: 100%;
      align-items: flex-start; /* Left side visually */
      text-align: right; /* Right-align Arabic text */
    }
    
    /* Category titles */
    .footer-category-title {
      font-size: clamp(11px, 1.8vw, 13px);
      color: rgba(155, 197, 227, 0.5);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: clamp(4px, 0.8vw, 6px);
      font-weight: 600;
    }
    
    /* Link rows */
    .footer-link-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: clamp(8px, 1.5vw, 12px);
      flex-wrap: wrap;
    }
    
    .footer-link-separator {
      color: rgba(155, 197, 227, 0.3);
      font-size: clamp(10px, 1.5vw, 12px);
    }
    
    /* For English */
    html[lang="en"][dir="ltr"] .footer-legal-links {
      align-items: flex-start !important;
      text-align: left !important;
    }
    
    /* Smaller coffee link text in English */
    [lang="en"] #footerCoffeeLink,
    [dir="ltr"] #footerCoffeeLink {
      font-size: clamp(11px, 1.8vw, 13px);
    }
    
    .footer-legal-link {
      color: rgba(155, 197, 227, 0.85);
      text-decoration: none;
      font-size: clamp(13px, 2.2vw, 16px); /* Slightly smaller for better proportion */
      font-weight: 500;
      transition: all 0.3s ease;
      direction: rtl;
      font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
      line-height: 1.6; /* Better line height */
      padding: clamp(3px, 0.8vw, 5px) 0;
      white-space: nowrap;
      text-align: right; /* Right align for Arabic */
      opacity: 1; /* Always visible - solid */
      visibility: visible; /* Always visible - solid */
      pointer-events: auto;
    }
    
    .footer-legal-link:hover {
      color: rgba(155, 197, 227, 1);
      text-decoration: underline;
      transform: translateX(3px); /* Move right on hover for Arabic */
    }
    
    [dir="ltr"] .footer-legal-link,
    [lang="en"] .footer-legal-link {
      direction: ltr;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      text-align: left; /* Left align for English */
    }
    
    [dir="ltr"] .footer-legal-link:hover,
    [lang="en"] .footer-legal-link:hover {
      transform: translateX(-3px); /* Move left on hover for English */
    }
    
    .footer-copyright {
      position: static;
      margin: 0;
      font-size: clamp(12px, 2vw, 14px);
      color: rgba(255, 255, 255, 0.5);
      text-align: center;
      width: 100%;
    }
    .footer-bottom-group{position:relative;left:auto;transform:none;bottom:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,10px);width:100%;max-width:100%;z-index:9999;pointer-events:auto;text-align:center;margin:0 auto;}
    
    html[lang="en"][dir="ltr"] .footer-copyright {
      text-align: center !important;
    }

    .footer-lang-switcher{width:100%;display:flex;justify-content:center;margin-top:clamp(18px,3vw,24px);margin-bottom:clamp(36px,6vw,96px);pointer-events:auto;position:relative;z-index:10000;}
    .footer-lang-dropdown{position:relative;z-index:10001;pointer-events:auto;}
    .footer-lang-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(155,197,227,0.3);background:rgba(11,31,40,0.6);color:#e6f6ff;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s ease;pointer-events:auto;position:relative;z-index:10002;}
    .footer-lang-toggle:hover{border-color:rgba(155,197,227,0.6);background:rgba(155,197,227,0.1)}
    .footer-lang-toggle svg{width:16px;height:16px}
    .footer-lang-options{position:absolute;left:50%;transform:translateX(-50%);bottom:100%;margin-bottom:6px;background:rgba(11,31,40,0.9);border:1px solid rgba(155,197,227,0.3);border-radius:10px;padding:8px;display:none;flex-direction:column;gap:6px;z-index:3000;min-width:140px;backdrop-filter:blur(8px);pointer-events:auto;}
    .footer-lang-options.open{display:flex}
    .footer-lang-option{padding:8px 10px;border:none;background:transparent;color:#e6f6ff;text-align:left;border-radius:8px;cursor:pointer;font-size:13px}
    .footer-lang-option:hover{background:rgba(155,197,227,0.12)}
    
    @media (max-width: 768px) {
      .footer-bottom-group{position:relative;left:auto;transform:none;bottom:auto;gap:clamp(6px,2vw,12px);}
      footer {
        flex-direction: column;
        align-items: center;
        min-height: auto;
        padding: clamp(24px, 5vw, 32px) clamp(16px, 4vw, 24px) clamp(40px, 6vw, 50px);
      }
      
      .footer-center-section {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        margin-bottom: clamp(24px, 4vw, 32px);
      }
      
      .footer-left-section {
        width: 100%;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        order: 3; /* Show after center section */
      }
      
      .footer-legal-links {
        align-items: center;
        text-align: center;
      }
      
      .footer-link-row {
        justify-content: center;
      }
      
      .footer-category-title {
        text-align: center;
        width: 100%;
      }
      
      .footer-saudi-text {
        text-align: center;
      }
      
      .footer-copyright {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: clamp(20px, 4vw, 32px);
        order: 4; /* Show last */
      }
    }
    
    .footer-saudi-text {
      font-size: clamp(14px, 2.5vw, 18px);
      color: rgba(155, 197, 227, 0.8);
      margin: 0;
      direction: rtl;
      font-family: 'Noto Sans Arabic', 'Segoe UI', 'Arial', 'Tahoma', sans-serif;
      line-height: 1.6;
      max-width: min(600px, 90vw);
      text-align: center; /* Center the text exactly */
      width: 100%;
      padding: 0 clamp(10px, 2vw, 20px); /* Horizontal padding for better spacing */
    }
    
    [lang="en"] .footer-saudi-text {
      direction: ltr;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      text-align: center;
    }

    /* Medical Disclaimer */
    .medical-disclaimer-card {
      width: 100%;
      display: flex;
      justify-content: center;
      margin: clamp(36px, 7vw, 56px) auto clamp(36px, 7vw, 56px);
    }
    .medical-disclaimer-inner {
      width: min(1040px, 92vw);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(11,31,40,0.55), rgba(11,31,40,0.68));
      border: 1px solid rgba(155,197,227,0.18);
      box-shadow: 0 12px 38px rgba(0,0,0,0.16), 0 0 0 1px rgba(255,255,255,0.05) inset;
      backdrop-filter: blur(10px);
      padding: clamp(12px, 2.8vw, 16px) clamp(14px, 3vw, 20px);
    }
    .medical-disclaimer-content {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
    }
    .medical-disclaimer-icon {
      font-size: 18px;
      line-height: 1;
      margin-top: 2px;
      flex-shrink: 0;
    }
    .medical-disclaimer-text {
      margin: 0;
      color: rgba(230, 246, 255, 0.85);
      font-size: clamp(13px, 2.2vw, 14px);
      line-height: 1.65;
      font-weight: 500;
      text-align: left;
      direction: ltr;
      opacity: 0.85;
    }
    [lang="ar"] .medical-disclaimer-card,
    [dir="rtl"] .medical-disclaimer-card {
      direction: rtl;
    }
    [lang="ar"] .medical-disclaimer-content,
    [dir="rtl"] .medical-disclaimer-content {
      flex-direction: row-reverse;
      text-align: right;
      justify-content: flex-end;
    }
    [lang="ar"] .medical-disclaimer-text,
    [dir="rtl"] .medical-disclaimer-text {
      text-align: right;
      direction: rtl;
      font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
    }
    [lang="en"] .medical-disclaimer-text,
    [dir="ltr"] .medical-disclaimer-text {
      text-align: left;
      direction: ltr;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    @media (max-width: 768px) {
      .medical-disclaimer-card {
        margin: clamp(32px, 8vw, 48px) auto clamp(28px, 7vw, 42px);
      }
      .medical-disclaimer-content {
        align-items: center;
      }
      .medical-disclaimer-icon {
        margin-top: 0;
      }
    }
    
    /* Footer Social - New Design with Tooltips */
    ul {
      list-style: none;
    }
    
    .example-2 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      gap: clamp(8px, 1.8vw, 14px); /* Consistent gap between icons */
      margin: 0 auto;
      padding: 0;
      width: 100%;
    }
    
    .example-2 .icon-content {
      margin: 0;
      position: relative;
      padding: 0.3rem; /* Slightly more padding for better spacing */
    }
    
    .example-2 .icon-content .tooltip {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      color: #fff;
      padding: 4px 8px;
      border-radius: 4px;
      opacity: 0;
      visibility: hidden;
      font-size: 11px;
      transition: all 0.3s ease;
      white-space: nowrap;
      pointer-events: none;
      z-index: 1000;
      margin-bottom: 6px;
    }
    
    .example-2 .icon-content:hover .tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    
    .example-2 .icon-content a {
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      width: clamp(24px, 3.5vw, 32px);
      height: clamp(24px, 3.5vw, 32px);
      border-radius: 50%;
      color: rgba(155, 197, 227, 0.65);
      background-color: rgba(11, 31, 40, 0.5);
      border: 1px solid rgba(155, 197, 227, 0.2);
      transition: all 0.3s ease-in-out;
      opacity: 0.65;
      pointer-events: auto;
      cursor: pointer;
    }
    
    .example-2 .icon-content a:hover {
      box-shadow: 2px 1px 30px 0px rgb(0 0 0 / 12%);
      opacity: 1;
    }
    
    .example-2 .icon-content a svg {
      position: relative;
      z-index: 1;
      width: clamp(12px, 2vw, 16px);
      height: clamp(12px, 2vw, 16px);
      fill: currentColor;
      pointer-events: none;
    }
    
    .example-2 .icon-content a:hover {
      color: white;
    }
    
    .example-2 .icon-content a .filled {
      position: absolute;
      top: auto;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0;
      background-color: #000;
      transition: all 0.3s ease-in-out;
      pointer-events: none;
    }
    
    .example-2 .icon-content a:hover .filled {
      height: 100%;
    }
    
    /* LinkedIn */
    .example-2 .icon-content a[data-social="linkedin"] .filled,
    .example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
      background-color: #0274b3;
    }
    
    /* Discord */
    .example-2 .icon-content a[data-social="discord"] .filled,
    .example-2 .icon-content a[data-social="discord"] ~ .tooltip {
      background-color: #5865F2;
    }
    
    /* Instagram */
    .example-2 .icon-content a[data-social="instagram"] .filled,
    .example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
      background: linear-gradient(
        45deg,
        #405de6,
        #5b51db,
        #b33ab4,
        #c135b4,
        #e1306c,
        #fd1f1f
      );
    }
    
    /* TikTok */
    .example-2 .icon-content a[data-social="tiktok"] .filled,
    .example-2 .icon-content a[data-social="tiktok"] ~ .tooltip {
      background-color: #000000;
    }
    
    /* Twitter/X */
    .example-2 .icon-content a[data-social="twitter"] .filled,
    .example-2 .icon-content a[data-social="twitter"] ~ .tooltip {
      background-color: #000000;
    }

    /* Threads */
    .example-2 .icon-content a[data-social="threads"] .filled,
    .example-2 .icon-content a[data-social="threads"] ~ .tooltip {
      background-color: #000000;
    }

    /* WhatsApp */
    .example-2 .icon-content a[data-social="whatsapp"] .filled,
    .example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
      background-color: #25D366;
    }
    
    /* Email */
    .example-2 .icon-content a[data-social="email"] .filled,
    .example-2 .icon-content a[data-social="email"] ~ .tooltip {
      background-color: #9BC5E3;
    }
    
    /* RTL Support */
    [dir="rtl"] #waitlistIntro {
      text-align: right;
    }
    [dir="ltr"] #waitlistIntro {
      text-align: left;
    }
    [dir="rtl"] input[type="email"],
    [dir="rtl"] input[type="email"] {
      direction: rtl;
      text-align: right;
    }
    [dir="ltr"] input[type="email"] {
      direction: ltr;
      text-align: left;
    }
    

    @media (min-width: 1024px) {
      .phone-mockup-wrapper {
        max-width: 420px;
      }

      /* Desktop Navigation Bar - Always visible at top */
      .hamburger-menu {
        display: none !important;
      }
      
      /* Move nav-menu out of sidebar to top of page */
      .sidebar-menu {
        display: none !important;
      }
      
      .sidebar-overlay {
        display: none !important;
      }
      
      .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 16px 32px !important;
        min-width: auto !important;
        max-width: none !important;
        background: rgba(0, 0, 0, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        border-radius: 0 0 16px 16px !important;
        border: none !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
        z-index: 10000 !important;
      }
      
      [dir="rtl"] .nav-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
      }
      
      .nav-menu-item {
        padding: 10px 20px !important;
        margin-bottom: 0 !important;
        font-size: 15px !important;
        white-space: nowrap !important;
      }
      
      /* Hide menu extras on desktop (but keep language button) */
      .nav-menu-separator,
      .brand-statement {
        display: none !important;
      }
      
      /* Style language button for desktop nav */
      .sidebar-lang-button {
        display: flex !important;
        padding: 8px 16px !important;
        margin-bottom: 0 !important;
        gap: 6px !important;
        height: auto !important;
        min-height: auto !important;
      }
    }
    
    @media (prefers-reduced-motion: reduce) {
      [data-scroll-fade],
      [data-scroll-slide],
      [data-scroll-card],
      [data-scroll-item] {
        transition: none;
        opacity: 1;
        transform: none;
      }
    }
    
    /* ============================================
       SECTION 3: Privacy & Trust
       ============================================ */
    /* Dynamic iPhone Images - Language Switching */
    .iphone-image-ar,
    .iphone-image-en {
      width: 100%;
      height: 100%;
      object-fit: cover;
    position: absolute;
      top: 0;
      left: 0;
    }
    
    /* ============================================
       Final CTA Section
       ============================================ */
    .final-cta-section {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-block: clamp(3rem, 10vh, 8rem);
      padding-inline: clamp(1rem, 4vw, 3rem);
      background: transparent; /* Transparent to show animated background */
    }
    
    .final-cta-section .waitlist-bar {
  display: block;
      width: 100%;
      max-width: 500px;
    opacity: 0;
      transform: translateY(30px);
      will-change: transform, opacity;
    }
    
    .final-cta-section .terms-visitors-row {
      display: flex;
      gap: clamp(20px, 4vw, 32px);
      margin-top: clamp(40px, 8vw, 60px);
      opacity: 0;
      transform: translateY(20px);
      will-change: transform, opacity;
    }
    
    /* Footer visible */
    footer {
      display: block;
      padding: clamp(40px, 8vw, 60px) clamp(24px, 5vw, 48px);
      background: transparent; /* Transparent to show animated background */
    }
    
    /* ============================================
       Prefers Reduced Motion Support
       ============================================ */
    @media (prefers-reduced-motion: reduce) {
      .second-iphone-container,
      .second-slogan-container,
      .privacy-content,
      .final-cta-section .waitlist-bar,
      .final-cta-section .terms-visitors-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      
      
    }
    
    [dir="ltr"] .notification-text-small {
      direction: ltr;
      text-align: left;
    }
    
    /* Hamburger Menu - New Animation */
    #hamburgerCheckbox {
      display: none;
    }
    
    .hamburger-menu {
      position: fixed;
      top: clamp(16px, 3vw, 24px);
      left: clamp(16px, 3vw, 24px);
      right: auto;
      z-index: 10001; /* Above beta form to remain visible */
      width: clamp(28px, 4vw, 32px);
      height: clamp(28px, 4vw, 32px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    gap: clamp(4px, 0.8vw, 6px);
      transition-duration: .5s;
    }
    
    /* Hide hamburger menu when email form is open */
    body.form-open .hamburger-menu,
    body.form-open #hamburgerMenu,
    body.form-open label[for="hamburgerCheckbox"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }
    
    .hamburger-menu .bars {
      width: 100%;
      height: clamp(2px, 0.4vw, 3px);
      background-color: #9BC5E3;
      border-radius: clamp(2px, 0.4vw, 3px);
    }
    
    .hamburger-menu #bar2 {
      transition-duration: .8s;
    }
    
    .hamburger-menu #bar1 {
      width: 50%;
    }
    
    .hamburger-menu #bar2 {
      width: 75%;
    }
    
    #hamburgerCheckbox:checked + .hamburger-menu .bars {
      position: absolute;
      transition-duration: .5s;
    }
    
    #hamburgerCheckbox:checked + .hamburger-menu #bar2 {
      transform: scaleX(0);
      transition-duration: .1s;
    }
    
    #hamburgerCheckbox:checked + .hamburger-menu #bar1 {
      width: 100%;
      transform: rotate(45deg);
      transition-duration: .5s;
    }
    
    #hamburgerCheckbox:checked + .hamburger-menu #bar3 {
      width: 100%;
      transform: rotate(-45deg);
      transition-duration: .5s;
    }
    
    #hamburgerCheckbox:checked + .hamburger-menu {
      transition-duration: .5s;
      transform: rotate(180deg);
    }
    
    
    [dir="rtl"] .hamburger-menu {
      left: auto !important;
      right: clamp(16px, 3vw, 24px) !important;
    }
    
    /* Navigation Menu Dropdown */
    .nav-menu {
      position: fixed;
      top: clamp(75px, 11vw, 95px);
      right: clamp(16px, 3vw, 24px);
      z-index: 999;
      background: rgba(11, 31, 40, 0.98);
      backdrop-filter: blur(30px) saturate(200%);
      border: 1px solid rgba(155, 197, 227, 0.3);
      border-radius: clamp(12px, 2vw, 16px);
      padding: clamp(20px, 4vw, 28px);
      min-width: 220px;
      max-width: 280px;
    opacity: 0;
      visibility: hidden;
      transform: translateY(-15px) scale(0.95);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 
        0 12px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(155, 197, 227, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    
    [dir="rtl"] .nav-menu {
      right: auto;
      left: clamp(16px, 3vw, 24px);
    }
    
    .nav-menu.active {
    opacity: 1;
      visibility: visible;
    transform: translateY(0) scale(1);
  }
    
    .nav-menu-item {
      padding: clamp(12px, 1.8vw, 14px) clamp(16px, 2.2vw, 18px);
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      display: block;
      border-radius: clamp(8px, 1.2vw, 10px);
      transition: all 0.25s ease;
      cursor: pointer;
      font-size: clamp(15px, 2.2vw, 17px);
      font-weight: 500;
      margin-bottom: clamp(4px, 0.8vw, 6px);
      text-align: center;
      position: relative;
      pointer-events: auto; /* Ensure all menu items are clickable */
      z-index: 1003; /* Above sidebar background */
    }
    
    .nav-menu-item:hover {
      background: rgba(155, 197, 227, 0.15);
      color: #9BC5E3;
    }
    
    .nav-menu-item.try-beta {
      background: linear-gradient(135deg, rgba(155, 197, 227, 0.2) 0%, rgba(66, 190, 234, 0.2) 100%);
      border: 1px solid rgba(155, 197, 227, 0.4);
    font-weight: 600;
    }
    
    .nav-menu-item.try-beta:hover {
      background: linear-gradient(135deg, rgba(155, 197, 227, 0.3) 0%, rgba(66, 190, 234, 0.3) 100%);
      transform: scale(1.05);
    }
    
    /* Sidebar Menu - Full Screen Slide-in */
    .sidebar-overlay {
      position: fixed;
      top: 0;
      left: 0;
    width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 1000;
    opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s ease;
      pointer-events: none; /* Don't block clicks when not active */
  }
    
    .sidebar-overlay.active {
    opacity: 1;
      visibility: visible;
      pointer-events: auto; /* Only block clicks when sidebar is open */
    }
    
    .sidebar-menu {
      position: fixed;
      top: 0;
      left: 0;
      right: auto;
      width: clamp(260px, 85vw, 360px);
      height: 100vh;
      height: 100svh;
      background-color: #0a1628;
      background-image: url('/public/assets/images/overlay-pattern.webp');
      background-size: 200% auto;
      background-position: center;
      background-repeat: no-repeat;
      border-right: 1px solid rgba(66, 190, 234, 0.2);
      border-left: none;
      z-index: 1001;
      padding: clamp(80px, 12vw, 100px) clamp(24px, 6vw, 40px) clamp(24px, 6vw, 40px);
      box-sizing: border-box;
      transform: translateX(-100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-position 0.6s ease;
      will-change: transform;
      display: flex;
      flex-direction: column;
      gap: clamp(12px, 2vw, 15px);
      overflow-y: auto;
      pointer-events: auto;
    }

    .sidebar-menu.active {
      transform: translateX(0);
      background-position: left center;
    }

    [dir="rtl"] .sidebar-menu {
      left: auto !important;
      right: 0 !important;
      transform: translateX(100%) !important;
      border-right: none !important;
      border-left: 1px solid rgba(66, 190, 234, 0.2) !important;
      background-position: right center;
    }

    [dir="rtl"] .sidebar-menu.active {
      transform: translateX(0) !important;
      background-position: center;
    }

    /* Navigation Menu inside Sidebar */
    .sidebar-menu .nav-menu {
      position: relative;
      top: 0;
      right: 0;
      left: 0;
      opacity: 1;
      visibility: visible;
      transform: none;
      background: transparent;
      border: none;
      padding: 0;
      min-width: auto;
      max-width: 100%;
      pointer-events: auto;
      z-index: 1002;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      height: 100%;
    }

    /* Sidebar Brand */
    .sidebar-brand {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-bottom: 20px;
      margin-bottom: 8px;
      border-bottom: 1px solid rgba(66, 190, 234, 0.15);
    }

    .sidebar-brand__logo {
      font-size: 1.8rem;
      font-weight: 700;
      color: #fff;
      font-family: 'Noto Sans Arabic', sans-serif;
    }

    .sidebar-brand__tagline {
      font-size: 0.85rem;
      color: rgba(155, 197, 227, 0.8);
    }

    /* Nav Menu Groups */
    .nav-menu-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 16px;
    }

    .nav-menu-group__title {
      font-size: 0.7rem;
      font-weight: 600;
      color: rgba(155, 197, 227, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 8px 12px 4px;
    }

    /* Nav Menu Items with Icons */
    .nav-menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      border-radius: 12px;
      transition: all 0.2s ease;
      font-size: 0.95rem;
    }

    .nav-menu-item:hover {
      background: rgba(66, 190, 234, 0.12);
      color: #fff;
    }

    /* CTA Item */
    .nav-menu-item--cta {
      background: linear-gradient(135deg, rgba(66, 190, 234, 0.2) 0%, rgba(155, 197, 227, 0.15) 100%);
      border: 1px solid rgba(66, 190, 234, 0.3);
      margin-top: 8px;
    }

    .nav-menu-item--cta:hover {
      background: linear-gradient(135deg, rgba(66, 190, 234, 0.3) 0%, rgba(155, 197, 227, 0.25) 100%);
      border-color: rgba(66, 190, 234, 0.5);
      transform: translateY(-2px);
    }

    /* Sidebar Bottom */
    .sidebar-bottom {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid rgba(66, 190, 234, 0.15);
    }
    
    /* Sidebar Language Switcher - Simple Bottom Design */
    .sidebar-lang-button {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 20px;
      border: 1px solid rgba(155, 197, 227, 0.3);
      background: rgba(11, 31, 40, 0.8);
      color: #e6f6ff;
      cursor: pointer;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 1.5px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      margin-bottom: clamp(16px, 3vw, 24px);
      align-self: center;
    }
    
    .sidebar-lang-button svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    
    .sidebar-lang-button:hover {
      border-color: rgba(155, 197, 227, 0.6);
      background: rgba(155, 197, 227, 0.15);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    
    .sidebar-lang-button:active {
      transform: translateY(0);
    }
    
    [dir="rtl"] .sidebar-menu .nav-menu {
      right: 0 !important;
      left: auto !important;
    }
    
    /* Language Switcher - Black Earth Style (Top of Sidebar) */
    .lang-switcher-earth {
      position: absolute;
      top: clamp(20px, 3vw, 28px);
      right: clamp(20px, 4vw, 32px);
      width: clamp(48px, 6vw, 56px);
      height: clamp(48px, 6vw, 56px);
      border-radius: 50%;
      background: #000000; /* Black earth/circle */
      border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
      justify-content: center;
      cursor: pointer !important;
      transition: all 0.3s ease;
      z-index: 1010 !important; /* Very high z-index - above everything */
      pointer-events: auto !important;
      box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      padding: 0;
      margin: 0;
    }
    
    [dir="rtl"] .lang-switcher-earth {
      right: auto;
      left: clamp(20px, 4vw, 32px);
    }
    
    .lang-switcher-earth:hover {
      transform: scale(1.1);
      border-color: rgba(155, 197, 227, 0.5);
      box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(155, 197, 227, 0.3) inset,
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(155, 197, 227, 0.2);
    }
    
    .lang-switcher-earth:active {
      transform: scale(1.05);
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(155, 197, 227, 0.2) inset;
    }
    
    .lang-switcher-text {
      font-size: clamp(14px, 2vw, 16px);
      font-weight: 700;
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      letter-spacing: 0.5px;
      pointer-events: none;
      user-select: none;
      text-align: center;
      line-height: 1;
    }
    
    [lang="ar"] .lang-switcher-text {
      font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
    }
    
    /* Sidebar Menu Separator */
    .nav-menu-separator {
    width: 100%;
      height: 1px;
      background: rgba(155, 197, 227, 0.3);
      margin: clamp(16px, 3vw, 24px) 0;
      border: none;
    }
    
    /* Brand Statement - Non-interactive tagline at bottom */
    .brand-statement {
      margin-top: auto;
      padding: clamp(16px, 3vw, 24px) clamp(12px, 2vw, 16px);
      text-align: center;
      font-size: clamp(13px, 1.8vw, 15px);
      font-weight: 400;
      color: rgba(155, 197, 227, 0.6);
      line-height: 1.6;
      pointer-events: none;
      cursor: default;
      user-select: none;
      font-style: italic;
      letter-spacing: 0.02em;
    }
    
    [lang="ar"] .brand-statement {
      font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
    }
    
    
    /* Apple-Inspired Hero Section with Glowing Elements */
    .apple-hero-section {
      min-height: 100vh;
      min-height: 100svh; /* Small viewport height - stable, no shift with browser bar */
      display: flex;
      align-items: center;
      justify-content: center;
    position: relative;
      contain: layout style paint;
      padding: clamp(80px, 12vw, 160px) clamp(16px, 4vw, 60px);
      overflow: hidden;
      z-index: 10;
    }
    
    .apple-hero-content {
      position: relative;
      z-index: 20;
      text-align: center;
      max-width: 1400px;
      width: 100%;
    }
    
    /* Hero Title Container */
    .hero-title-container {
      position: relative;
      z-index: 15;
      margin-bottom: clamp(30px, 5vw, 50px);
    }
    
    .event-label {
      display: inline-block;
      padding: clamp(6px, 1vw, 10px) clamp(12px, 2vw, 20px);
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(155, 197, 227, 0.3);
      border-radius: 8px;
      font-size: clamp(10px, 1.2vw, 14px);
      font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 0.1em;
      margin-bottom: clamp(20px, 3vw, 30px);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .hero-main-title {
      font-size: clamp(3.5rem, 9vw, 8rem);
      font-weight: 300;
      color: #ffffff;
      margin: 0;
      line-height: 1.05;
      letter-spacing: -0.03em;
      text-shadow: 0 0 60px rgba(155, 197, 227, 0.2);
      direction: rtl;
      font-family: 'Noto Sans Arabic', 'SF Pro Display', -apple-system, sans-serif;
      animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .blue-highlight {
      color: #9BC5E3;
      text-shadow: 0 0 40px rgba(155, 197, 227, 0.6);
    }
    
    [lang="en"] .hero-main-title {
      direction: ltr;
      font-family: 'SF Pro Display', -apple-system, 'Segoe UI', sans-serif;
      font-size: clamp(3rem, 7vw, 6rem);
      line-height: 1.2;
      letter-spacing: -0.01em;
    }
    
    .hero-details {
      margin-top: clamp(60px, 8vw, 80px);
      position: relative;
      z-index: 15;
    }
    
    [lang="en"] .hero-details {
      margin-top: clamp(70px, 10vw, 100px);
    }
    
    .hero-subtitle {
      font-size: clamp(22px, 3.2vw, 28px);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);
      font-family: 'SF Pro Text', -apple-system, 'Segoe UI', sans-serif;
      direction: rtl;
      margin: 0 auto clamp(15px, 2vw, 20px);
      letter-spacing: 0.005em;
      line-height: 1.4;
      max-width: 42ch;
      text-align: center;
    }
    
    [lang="en"] .hero-subtitle {
      direction: ltr;
      font-size: clamp(18px, 3vw, 28px);
      margin: 0 auto clamp(20px, 3vw, 30px);
      text-align: center;
    }
    
    .hero-tagline {
      font-size: clamp(14px, 2vw, 20px);
      font-weight: 500;
      color: rgba(155, 197, 227, 0.9);
      font-family: 'SF Pro Text', -apple-system, 'Segoe UI', sans-serif;
      direction: rtl;
      margin: 0;
      letter-spacing: 0.05em;
    }
    
    [lang="en"] .hero-tagline {
      direction: ltr;
      font-size: clamp(16px, 2.5vw, 24px);
      margin-top: clamp(8px, 1.5vw, 15px);
    }
    
    @keyframes fadeInUp {
      from {
    opacity: 0;
        transform: translateY(30px);
  }
      to {
    opacity: 1;
        transform: translateY(0);
      }
    }
    
    @media (max-width: 768px) {
      .hero-main-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
        line-height: 1.2;
      }
    }
    
    /* Gradient Button - From Uiverse.io by M4rco592 */
    /* Positioned above the iPhone camera/notch area */
    .gradient-button {
      position: absolute; /* Absolute within hero section - scrolls with it */
      /* iPhone container has margin-top: clamp(70px, 9vw, 110px) */
      /* Camera/notch is at the top of iPhone, so button should be positioned: */
      /* Just above the camera - iPhone margin-top minus button height and spacing */
      top: clamp(250px, 31vw, 400px); /* Positioned directly above iPhone camera/notch area */
      left: 50%; /* Center horizontally */
      transform: translateX(-50%);
      padding: clamp(12px, 2.5vw, 16px) clamp(24px, 5vw, 32px);
      font-size: clamp(14px, 2.5vw, 18px);
      font-weight: 700;
      color: white;
    background: transparent;
    border: none;
    cursor: pointer;
      border-radius: 50px;
      overflow: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 100; /* High z-index to ensure it's above other elements and clickable */
      width: auto;
      opacity: 1;
      visibility: visible;
      display: block;
      pointer-events: auto; /* Ensure it's clickable */
      /* Dynamic - scrolls with hero section, not fixed */
    }
    
    /* Hide button when scrolling */
    .gradient-button.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    
    .gradient-button:hover {
      transform: translateX(-50%) scale(1.03);
    }
    
    .gradient-button::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(
        from 0deg,
        #9BC5E3,
        #7BB3D9,
        #42BEEA,
        #6BA8D0,
        #9BC5E3,
        #5CA0C7,
        #42BEEA,
        #9BC5E3
      );
      z-index: -2;
      filter: blur(10px);
      transform: rotate(0deg);
      transition: transform 1.5s ease-in-out;
    }
    
    .gradient-button:hover::before {
      transform: rotate(180deg);
    }
    
    .gradient-button::after {
      content: "";
      position: absolute;
      inset: 3px;
      background: black;
      border-radius: 47px;
      z-index: -1;
      filter: blur(5px);
    }
    
    .gradient-text {
      color: transparent;
      background: conic-gradient(
        from 0deg,
        #9BC5E3,
        #7BB3D9,
        #42BEEA,
        #6BA8D0,
        #9BC5E3,
        #5CA0C7,
        #42BEEA,
        #9BC5E3
      );
      background-clip: text;
      -webkit-background-clip: text;
      filter: hue-rotate(0deg);
    }
    
    .gradient-button:hover .gradient-text {
      animation: hue-rotating 2s linear infinite;
    }
    
    .gradient-button:active {
      transform: translateX(-50%) scale(0.99);
    }
    
    @keyframes hue-rotating {
      to {
        filter: hue-rotate(360deg);
      }
    }
    
    /* Beta Button in Apple Hero Section */
    .apple-hero-section .gradient-button {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      margin: clamp(40px, 6vw, 60px) auto 0;
      display: block;
      width: auto;
    }
    
    .apple-hero-section .gradient-button:hover {
      transform: scale(1.03) !important;
    }
    
    /* Beta Form Container - Animated Card Design */
    .beta-form-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
      display: none;
    }
    
    .beta-form-container.active {
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    .beta-form-container .card {
      width: clamp(190px, 25vw, 400px);
      height: clamp(254px, 35vw, 500px);
      background: #171717;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 0px 3px 1px #00000088;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      transition: all 0.6s ease;
    }
    
    .beta-form-container .card.success-animation {
      background: rgba(66, 141, 190, 1);
      animation: cardSuccessPulse 0.8s ease-out;
      box-shadow: 0 0 30px rgba(66, 190, 234, 0.8), 0 8px 40px rgba(0, 0, 0, 0.6);
    }
    
    .beta-form-container .card.success-animation .content {
      background: rgba(66, 141, 190, 0.95);
    }
    
    @keyframes cardSuccessPulse {
      0% {
        background: #171717;
        transform: scale(1);
        box-shadow: 0px 0px 3px 1px #00000088;
      }
      50% {
        background: rgba(42, 190, 234, 1);
        transform: scale(1.02);
        box-shadow: 0 0 40px rgba(66, 190, 234, 1), 0 0 20px rgba(42, 190, 234, 0.8);
      }
      100% {
        background: rgba(66, 141, 190, 1);
        transform: scale(1);
        box-shadow: 0 0 30px rgba(66, 190, 234, 0.8), 0 8px 40px rgba(0, 0, 0, 0.6);
      }
    }
    
    .beta-form-container .card .content {
      border-radius: 10px;
      background: #171717;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      z-index: 2;
      padding: clamp(20px, 3vw, 30px);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: background 0.6s ease;
      position: relative;
      gap: clamp(16px, 2.5vw, 24px);
      pointer-events: auto;
    }
    
    .beta-form-container .content::before {
      opacity: 0;
      transition: opacity 300ms;
      content: " ";
      display: block;
      background: #fff5;
      width: 50px;
      height: 50px;
      position: absolute;
      filter: blur(50px);
    }
    
    .beta-form-container .card:hover .content::before {
      opacity: 1;
    }
    
    .beta-form-container .card::before {
      display: none;
    }
    
    .beta-form-container .card::after {
      display: none;
    }
    
    .beta-form-container .card:hover .glass {
      opacity: 0;
    }
    
    .beta-form-container .glass {
      position: absolute;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: #17171733;
      backdrop-filter: blur(50px);
      z-index: 1;
      transition-duration: 0.5s;
      border-radius: 10px;
      pointer-events: none; /* Allow clicks to pass through glass */
    }
    
    .beta-form-container .form {
    display: flex;
      flex-direction: column;
      gap: clamp(16px, 2.5vw, 20px);
      width: 100%;
      z-index: 2;
      position: relative;
    }
    
    .beta-form-intro {
      color: rgba(255, 255, 255, 0.9);
      font-size: clamp(14px, 2vw, 16px);
      line-height: 1.5;
    text-align: center;
      margin-bottom: clamp(6px, 1vw, 8px);
      font-weight: 400;
      z-index: 2;
      position: relative;
    }
    
    [lang="ar"] .beta-form-intro,
    [dir="rtl"] .beta-form-intro {
      direction: rtl;
      font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
    }
    
    [lang="en"] .beta-form-intro,
    [dir="ltr"] .beta-form-intro {
      direction: ltr;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    
    .beta-form-container .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      z-index: 2;
      position: relative;
    }
    
    .beta-form-container .form-group label {
      display: block;
      margin-bottom: 5px;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
      font-size: clamp(12px, 1.5vw, 14px);
    }

    [dir="rtl"] .beta-form-container .form-group label {
      text-align: right;
    }

    [dir="ltr"] .beta-form-container .form-group label {
      text-align: left;
    }
    
    .beta-form-container .form-group input {
      width: 100%;
      padding: clamp(10px, 1.5vw, 12px) clamp(14px, 2vw, 16px);
      border-radius: clamp(6px, 1vw, 8px);
      color: #fff;
      font-family: inherit;
      background-color: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(155, 197, 227, 0.3);
      box-sizing: border-box;
      font-size: clamp(13px, 1.8vw, 15px);
    }
    
    .beta-form-container .form-group input::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
    
    .beta-form-container .form-group input:focus {
      outline: none;
      border-color: #9BC5E3;
      background-color: rgba(255, 255, 255, 0.15);
    }
    
    /* Honeypot field - hidden from users */
    .honeypot-field {
      position: absolute;
      left: -9999px;
      opacity: 0;
      height: 0;
      width: 0;
      overflow: hidden;
    }
    
    /* Form message styling */
    .form-message {
      display: none;
      color: #42BEEA;
      font-size: 12px;
      text-align: center;
    }
    
    /* SVG filters container */
    .svg-filters {
      position: absolute;
      width: 0;
      height: 0;
    }
    
    /* Hidden language switcher */
    [dir="rtl"] .beta-form-container .form-group input {
      direction: rtl;
      text-align: right;
    }
    
    [dir="ltr"] .beta-form-container .form-group input {
      direction: ltr;
      text-align: left;
    }
    
    .beta-form-container .form-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
      font-family: inherit;
      color: #0B1F28;
      font-weight: 600;
      width: 100%;
      background: linear-gradient(135deg, #9BC5E3 0%, #42BEEA 100%);
      border: none;
      padding: clamp(12px, 2vw, 14px) clamp(20px, 3vw, 24px);
      font-size: clamp(14px, 2vw, 16px);
      gap: 8px;
      margin-top: 8px;
      cursor: pointer;
      border-radius: clamp(6px, 1vw, 8px);
      transition: all 0.3s ease;
      z-index: 2;
      position: relative;
    }
    
    .beta-form-container .form-submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(155, 197, 227, 0.4);
    }
    
    .beta-form-container .form-submit-btn:active {
      transform: translateY(0);
    }
    
    .beta-form-container #betaFormMsg {
      z-index: 2;
      position: relative;
      text-align: center;
      font-size: clamp(12px, 1.5vw, 14px);
    }

    /* Mobile-friendly sizing for the beta form modal */
    @media (max-width: 600px) {
      .beta-form-container .card {
        width: 92vw;
        max-width: 440px;
        height: auto;
        min-height: 0;
        max-height: 84vh;
        border-radius: 16px;
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
      }
      .beta-form-container .card .content {
        width: 100%;
        height: auto;
        padding: 18px 16px 22px;
        gap: 14px;
      }
      .beta-form-container .form {
        gap: 14px;
      }
      .beta-form-intro {
        font-size: 16px;
        line-height: 1.55;
        margin-bottom: 4px;
      }
      .beta-form-container .form-group {
        gap: 10px;
      }
      .beta-form-container .form-group input {
        font-size: 17px;
        padding: 14px 16px;
        border-radius: 10px;
        min-height: 56px;
      }
      .beta-form-container .form-submit-btn {
        font-size: 17px;
        padding: 14px 0;
        border-radius: 10px;
        min-height: 56px;
      }
      .beta-form-container .close-btn {
        width: 34px;
        height: 34px;
      }
    }
    
    /* Close button (X) */
    .beta-form-container .close-btn {
      position: absolute;
      top: clamp(8px, 1.5vw, 12px);
      right: clamp(8px, 1.5vw, 12px);
      width: clamp(28px, 4vw, 32px);
      height: clamp(28px, 4vw, 32px);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000; /* Very high z-index to be above everything */
      transition: all 0.3s ease;
      color: rgba(255, 255, 255, 0.8);
      font-size: clamp(18px, 2.5vw, 20px);
      font-weight: 300;
      line-height: 1;
      padding: 0;
      margin: 0;
      pointer-events: auto !important; /* Force it to be clickable */
    }
    
    [dir="rtl"] .beta-form-container .close-btn {
      right: auto;
      left: clamp(8px, 1.5vw, 12px);
    }
    
    .beta-form-container .close-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.4);
      color: #ffffff;
      transform: scale(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    .beta-form-container .close-btn:active {
      transform: scale(0.95);
    }
    
    /* Form overlay backdrop */
    .beta-form-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 9999; /* Below form container but covers everything else */
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      cursor: pointer; /* Indicate it's clickable */
      pointer-events: none !important; /* Don't block clicks when not active */
    }
    
    .beta-form-overlay.active {
      display: block !important;
      opacity: 1 !important;
      pointer-events: auto !important; /* Only block clicks when form is open */
    }
    
    /* Pointer events setup */
    .beta-form-container .card {
      pointer-events: auto; /* Card is clickable */
    }
    
    .beta-form-container {
      pointer-events: auto; /* Container can receive clicks */
    }
    
    .beta-form-container.active {
      pointer-events: auto; /* When active, container can receive clicks */
    }
    
    /* Close button must always be clickable */
    .beta-form-container .close-btn {
      pointer-events: auto !important;
  }

  /* ===== MINIMAL RESPONSIVE FIXES ===== */
  /* Following the principle: Flex/Grid + relative units + clamp() + zero fixed layouts */
  
  /* Safe area for notched phones (iPhone X+, etc.) */
  @supports (padding: max(0px)) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    footer {
      padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }
  }

  /* Single essential mobile breakpoint - layout changes only */
  @media (max-width: 768px) {
    footer {
      flex-direction: column;
      align-items: center;
      min-height: auto;
    }
    
    .footer-center-section {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      width: 100%;
      margin-bottom: clamp(1.5rem, 4vw, 2rem);
    }
    
    .footer-left-section {
      width: 100%;
      align-items: center;
      padding-left: 0;
      padding-right: 0;
      margin-top: 0;
      order: 3;
    }
    
    .footer-legal-links {
      align-items: center;
      text-align: center;
    }
    
    .footer-link-row {
      justify-content: center;
    }
    
    .footer-category-title {
      text-align: center;
      width: 100%;
    }
    
    .footer-copyright {
      position: relative;
      bottom: auto;
      left: auto;
      transform: none;
      margin-top: clamp(1.25rem, 4vw, 2rem);
      order: 4;
    }
  }

  /* Reduced motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Print styles */
  @media print {
    .hamburger-menu, .sidebar-menu, .beta-form-container, .gradient-button { display: none !important; }
    body { background: white !important; color: black !important; }
    .final-cta-section { min-height: auto; padding: 1.25rem; }
  }

  /* ========================================
     MOBILE PERFORMANCE OPTIMIZATIONS
     Reduce expensive effects on smaller screens
     ======================================== */
  @media (max-width: 768px) {
    /* Reduce backdrop-filter blur intensity */
    html::before {
      backdrop-filter: blur(20px) saturate(150%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    }
    
    body::after {
      backdrop-filter: blur(15px) saturate(140%) !important;
      -webkit-backdrop-filter: blur(15px) saturate(140%) !important;
    }

    /* Simplify sidebar backdrop */
    .sidebar-menu {
      backdrop-filter: blur(15px) saturate(150%) !important;
      -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
    }
    
    .sidebar-overlay {
      backdrop-filter: blur(3px) !important;
    }

    /* Simplify box shadows */
    .beta-form-container .card {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
    }
    
    /* Reduce nav menu blur */
    .nav-menu {
      backdrop-filter: blur(15px) saturate(150%) !important;
    }
    
    /* Simplify form overlay */
    .beta-form-overlay {
      backdrop-filter: blur(3px) !important;
    }
    
    /* Disable glass layer blur on mobile */
    .beta-form-container .glass {
      backdrop-filter: none !important;
      background: rgba(23, 23, 23, 0.95) !important;
    }
    
    /* Simplify hero text blur */
    .hero-badge {
      backdrop-filter: blur(5px) !important;
      -webkit-backdrop-filter: blur(5px) !important;
    }
    
  }

  /* Extra small devices - further optimization */
  @media (max-width: 480px) {
    /* Disable all backdrop filters on very small screens */
    html::before,
    body::after,
    .sidebar-menu,
    .nav-menu,
    .hero-badge,
    .beta-form-container .glass {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* Use solid backgrounds instead */
    .sidebar-menu {
      background: rgba(0, 0, 0, 0.98) !important;
    }
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    /* Re-enable necessary UI transitions */
    .sidebar-menu,
    .sidebar-overlay,
    .beta-form-container,
    .beta-form-overlay {
      transition-duration: 0.3s !important;
    }
  }

  /* MOBILE: Disable ALL animations for better performance on mobile */
  @media (max-width: 768px) {
    /* Disable ALL animations except essential UI */
    *:not(.gradient-button):not(.gradient-button *),
    *:not(.gradient-button)::before,
    *:not(.gradient-button)::after {
      animation: none !important;
      transition: none !important;
    }

    /* Simplify gradient button for mobile - solid gradient background */
    .gradient-button {
      background: linear-gradient(135deg, #9BC5E3 0%, #42BEEA 50%, #7BB3D9 100%) !important;
      padding: 14px 28px !important;
      border-radius: 50px !important;
    }

    .gradient-button::before,
    .gradient-button::after {
      display: none !important;
    }

    .gradient-button .gradient-text {
      background: none !important;
      -webkit-background-clip: unset !important;
      background-clip: unset !important;
      -webkit-text-fill-color: #0a0a12 !important;
      color: #0a0a12 !important;
      font-weight: 700 !important;
    }
    
    /* Disable all scroll animations */
    [data-scroll-fade],
    [data-scroll-slide],
    [data-scroll-card],
    [data-scroll-item] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    
    /* Disable skeleton pulse */
    .skeleton {
      animation: none !important;
    }
    
    /* Disable trace flow animations */
    .browser-trace-flow,
    .section-trace-flow {
      animation: none !important;
      display: none !important;
    }
    
    /* Keep only essential UI transitions (forms, menus) */
    .sidebar-menu,
    .sidebar-overlay,
    .beta-form-container,
    .beta-form-overlay,
    .nav-menu,
    input,
    button {
      transition: opacity 0.2s ease, transform 0.2s ease !important;
    }
  }

  /* High performance mode - disable expensive effects on small + low-res screens */
  @media (max-width: 768px) and (max-height: 800px) {
    html::before,
    body::after {
      animation: none !important;
    }
  }

/* =============================================================================
   MARA LANDING v2 - Claude-Desktop Inspired Header + 4 Sections
   Mobile-first, Arabic-first, Animation policy enforced
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Animation Policy
   - Mobile: ZERO animations
   - Desktop: Subtle fade-in only
   - prefers-reduced-motion: All disabled
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .mara-section,
  .mara-section * {
    animation: none !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Desktop fade-in animation */
@keyframes mara-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------------------
   Floating Navigation - Centered pill in hero (Desktop only)
   ----------------------------------------------------------------------------- */
.mara-floating-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  overflow: visible;
}

.mara-floating-nav__link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 500;
  padding: 10px clamp(12px, 1.5vw, 20px);
  border-radius: 24px;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-floating-nav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.mara-floating-nav__link.is-active {
  color: #fff;
  background: rgba(66, 190, 234, 0.2);
}

.mara-floating-nav__divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.15);
}

/* Responsive adjustments for tablets */
@media (max-width: 1024px) {
  .mara-floating-nav {
    padding: 6px 12px;
  }
  .mara-floating-nav__link {
    font-size: 12px;
    padding: 8px 12px;
  }
}

/* Hide on mobile */
@media (max-width: 767px) {
  .mara-floating-nav {
    display: none !important;
  }
}

/* -----------------------------------------------------------------------------
   Section Base - Mobile First
   ----------------------------------------------------------------------------- */
.mara-section {
  position: relative;
  width: 100%;
  padding: 64px 16px;
  overflow: hidden;
}

.mara-section__container {
  max-width: 1200px;
  margin: 0 auto;
}

.mara-section__header {
  text-align: center;
  margin-bottom: 48px;
}

.mara-section__title {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  font-family: 'Noto Sans Arabic', sans-serif;
  line-height: 1.3;
}

.mara-section__subtitle {
  font-size: clamp(16px, 3vw, 20px);
  color: rgba(255, 255, 255, 0.7);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* Desktop: larger padding */
@media (min-width: 768px) {
  .mara-section {
    padding: 120px 24px;
  }
}

/* Desktop animations - fade in on scroll */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mara-section[data-animate] {
    opacity: 0;
  }

  .mara-section[data-animate].is-visible {
    animation: mara-fade-in 0.6s ease forwards;
  }
}


/* =============================================================================
   MARA MOTION SYSTEM v2
   Mobile: scroll-snap + snap-x cards + CSS micro-interactions
   Desktop: sticky phone + screen swap + gradient parallax
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Global Motion Policy
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* -----------------------------------------------------------------------------
   Apple-Clean Above Fold
   ----------------------------------------------------------------------------- */
.apple-hero-section {
  position: relative;
  overflow: hidden;
}

/* Decorative pattern overlay at top with fade */
.apple-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background-image: url('/public/assets/images/hero-overlay.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Subtle gradient overlay for depth */
.apple-hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* =============================================================================
   SPLIT CIRCLE TRANSITION - Desktop Only
   Circle splits in half as user scrolls, revealing content below
   ============================================================================= */
.mara-split-circle {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  z-index: 10;
  pointer-events: none;
}

.mara-split-circle__top,
.mara-split-circle__bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(135deg, #42BEEA 0%, #9BC5E3 50%, #42BEEA 100%);
  transition: transform 0.1s linear, opacity 0.3s ease;
  overflow: hidden;
}

.mara-split-circle__top {
  top: 0;
  border-radius: 100px 100px 0 0;
  transform-origin: center bottom;
}

.mara-split-circle__bottom {
  bottom: 0;
  border-radius: 0 0 100px 100px;
  transform-origin: center top;
}

/* Inner gradient for depth */
.mara-split-circle__top::after,
.mara-split-circle__bottom::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: radial-gradient(circle at center, #0a0a0a 0%, #0f0f0f 100%);
}

.mara-split-circle__top::after {
  border-radius: 96px 96px 0 0;
}

.mara-split-circle__bottom::after {
  border-radius: 0 0 96px 96px;
}

/* Glow effect */
.mara-split-circle__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(66, 190, 234, 0.4) 0%, transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Split animation states */
.mara-split-circle.is-splitting .mara-split-circle__glow {
  opacity: 1;
}

.mara-split-circle.is-split .mara-split-circle__top,
.mara-split-circle.is-split .mara-split-circle__bottom {
  opacity: 0;
}

/* Desktop sizing */
@media (min-width: 768px) {
  .mara-split-circle {
    width: 280px;
    height: 280px;
    bottom: -140px;
  }

  .mara-split-circle__top {
    border-radius: 140px 140px 0 0;
  }

  .mara-split-circle__bottom {
    border-radius: 0 0 140px 140px;
  }

  .mara-split-circle__top::after {
    border-radius: 136px 136px 0 0;
  }

  .mara-split-circle__bottom::after {
    border-radius: 0 0 136px 136px;
  }
}

@media (min-width: 1200px) {
  .mara-split-circle {
    width: 350px;
    height: 350px;
    bottom: -175px;
  }

  .mara-split-circle__top {
    border-radius: 175px 175px 0 0;
  }

  .mara-split-circle__bottom {
    border-radius: 0 0 175px 175px;
  }

  .mara-split-circle__top::after {
    border-radius: 171px 171px 0 0;
  }

  .mara-split-circle__bottom::after {
    border-radius: 0 0 171px 171px;
  }

  .mara-split-circle__glow {
    width: 250px;
    height: 250px;
  }
}

/* =============================================================================
   MARA FOOTER - OpenAI Style
   ============================================================================= */
.mara-footer {
  padding: 40px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
}

.mara-footer__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.mara-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.mara-footer__links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 14px;
  font-family: 'Noto Sans Arabic', sans-serif;
  transition: color 0.15s ease;
}

.mara-footer__links a:hover {
  color: #fff;
}

.mara-footer__social {
  display: flex;
  gap: 20px;
}

.mara-footer__social a {
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.15s ease;
}

.mara-footer__social a:hover {
  color: #fff;
}

.mara-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.mara-footer__copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-family: 'Noto Sans Arabic', sans-serif;
  margin: 0;
}

.mara-footer__year {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  margin: 0;
}

.mara-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}

.mara-footer__lang:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media (min-width: 768px) {
  .mara-footer__bottom {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}

/* =============================================================================
   HEADER MOBILE/DESKTOP VISIBILITY FIX
   ============================================================================= */

/* Mobile: Hide desktop header elements, show existing hamburger/logo */
@media (max-width: 767px) {
  .mara-header {
    display: none !important;
  }

  .top-logo {
    display: block !important;
  }

  /* Remove thin blue line at top of mobile header */
  #hamburgerCheckbox {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: none !important;
  }

  .top-logo,
  .hamburger-menu,
  .finisher-header,
  label[for="hamburgerCheckbox"] {
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .top-logo::before,
  .top-logo::after,
  .hamburger-menu::before,
  .hamburger-menu::after,
  .finisher-header::before,
  .finisher-header::after,
  label[for="hamburgerCheckbox"]::before,
  label[for="hamburgerCheckbox"]::after {
    display: none !important;
  }

  /* Ensure no border/line on body/html at top */
  html, body {
    border-top: none !important;
    outline: none !important;
  }

  html::before,
  body::before {
    border-top: none !important;
    box-shadow: none !important;
  }

  /* =========================================
     MOBILE: Remove ALL blur effects from Hero
     ========================================= */

  /* Remove blur from body pseudo-elements */
  body::before,
  body::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    background: rgba(0, 0, 0, 0.85) !important;
  }

  html::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  /* Remove blur from hero section elements */
  .apple-hero-section,
  .apple-hero-section *,
  .apple-hero-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  /* Remove blur from finisher header */
  .finisher-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  /* =========================================
     MOBILE: Remove thin blue line (AGGRESSIVE)
     ========================================= */

  /* Kill decorative pseudo-elements (except hero overlay) */
  .apple-hero-section::after,
  .apple-hero-content::before,
  .apple-hero-content::after {
    display: none !important;
    content: none !important;
  }

  /* Keep hero overlay visible on mobile */
  .apple-hero-section::before {
    display: block !important;
    content: '' !important;
  }

  /* =========================================
     MOBILE: Remove heavy overlays for speed
     ========================================= */

  /* Remove body pseudo-element overlays */
  body::before,
  body::after {
    display: none !important;
  }

  /* Remove html pseudo-element overlays */
  html::before,
  html::after {
    display: none !important;
  }

  /* Simple dark background */
  html, body {
    background: #000 !important;
  }

  /* Hide finisher animated background */
  .finisher-header {
    display: none !important;
  }

  /* Clean hero background */
  .apple-hero-section,
  .apple-hero-content {
    background: transparent !important;
  }

  /* =========================================
     MOBILE: Ultra-smooth scroll performance
     ========================================= */

  /* Remove all will-change on mobile - reduces GPU memory */
  * {
    will-change: auto !important;
  }

  /* Optimize scroll on main content - smooth without bounce */
  html, body {
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important; /* Remove iOS momentum bounce */
    overscroll-behavior: none !important; /* Prevent all overscroll effects */
    overscroll-behavior-y: none !important;
  }

  /* Contain paint for each section */
  section,
  .mara-section-simple,
  .mara-carousel,
  .apple-hero-section,
  footer {
    contain: layout style paint;
  }

  /* Disable transitions and heavy effects during scroll */
  .mara-carousel__slide,
  .mara-carousel__phone,
  .mara-carousel__img {
    transition: none !important;
  }

  /* Optimize carousel for mobile scrolling */
  .mara-carousel {
    -webkit-overflow-scrolling: auto !important;
  }

  .mara-carousel__phone {
    box-shadow: none !important;
    background: #0a0a0a !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .mara-carousel__track {
    -webkit-overflow-scrolling: auto !important;
    overscroll-behavior-x: none;
    transform: translateZ(0);
  }

  .mara-carousel__slide {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Prevent fixed elements from causing repaints */
  .top-logo,
  .hamburger-menu {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

/* Desktop: Show header, hide ALL mobile elements */
@media (min-width: 768px) {
  .mara-header {
    display: flex !important;
  }

  .mara-header__nav,
  .mara-header__cta {
    display: flex !important;
  }

  /* Hide mobile-only elements on desktop */
  .top-logo,
  .hamburger-menu,
  #hamburgerCheckbox,
  label[for="hamburgerCheckbox"],
  .nav-menu,
  .sidebar-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* =============================================================================
   MOBILE FOOTER - OPENAI STYLE ORDER
   ============================================================================= */

@media (max-width: 767px) {
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* OpenAI order: social/brand (1) → copyright/lang (2) → links (3) */
  .footer-center-section {
    order: 1;
  }

  .footer-bottom-group {
    order: 2;
    margin-top: 24px;
  }

  .footer-left-section {
    order: 3;
    margin-top: 32px;
  }

  /* Compact the link rows on mobile */
  .footer-legal-links {
    gap: 16px;
  }

  .footer-link-row {
    flex-wrap: wrap;
    gap: 8px 4px;
  }

  .footer-category-title {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .footer-legal-link {
    font-size: 13px;
  }

  .footer-link-separator {
    opacity: 0.3;
  }
}

/* =============================================================================
   NEW FOOTER - OPENAI INSPIRED (Mobile-First)
   ============================================================================= */

.footer {
  background: #000;
  color: rgba(255, 255, 255, 0.7);
  padding: 48px 24px 32px;
  border-top: 1px solid rgba(155, 197, 227, 0.1);
}

.footer__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Link Columns - Mobile: 2x2 grid, stacked */
.footer__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 24px;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__column-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(155, 197, 227, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  font-family: 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
}

.footer__column-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__column-list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s ease;
  font-family: 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
}

.footer__column-list a:hover {
  color: #fff;
}

/* Social Icons */
.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer__social a:hover {
  color: #9BC5E3;
  transform: translateY(-2px);
}

.footer__social svg {
  width: 20px;
  height: 20px;
}

/* Tagline */
.footer__tagline {
  text-align: center;
  font-size: 14px;
  color: rgba(155, 197, 227, 0.7);
  margin: 0;
  font-family: 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Bottom Bar */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* Registration Notice */
.footer__registration {
  font-size: 12px;
  color: #B388FF;
  margin: 16px 0 0 0;
  padding-top: 12px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* Language Switcher */
.footer__lang {
  position: relative;
}

.footer__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(155, 197, 227, 0.3);
  background: rgba(11, 31, 40, 0.6);
  color: #e6f6ff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.footer__lang-btn:hover {
  border-color: rgba(155, 197, 227, 0.6);
  background: rgba(155, 197, 227, 0.1);
}

.footer__lang-btn svg {
  width: 16px;
  height: 16px;
}

.footer__lang-options {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 8px;
  background: rgba(11, 31, 40, 0.95);
  border: 1px solid rgba(155, 197, 227, 0.3);
  border-radius: 12px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
  backdrop-filter: blur(12px);
  z-index: 100;
}

.footer__lang-options.open {
  display: flex;
}

.footer__lang-option {
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: #e6f6ff;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease;
}

.footer__lang-option:hover {
  background: rgba(155, 197, 227, 0.15);
}

/* RTL Support */
[dir="rtl"] .footer__column-list a,
[dir="rtl"] .footer__column-title {
  text-align: right;
}

[dir="rtl"] .footer__links {
  direction: rtl;
}

/* LTR Support */
[dir="ltr"] .footer__column-list a,
[dir="ltr"] .footer__column-title {
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Keep Saudi tagline centered in both languages */
.footer__tagline {
  text-align: center !important;
}

[dir="ltr"] .footer__links {
  direction: ltr;
}

/* Desktop: 4 columns layout */
@media (min-width: 768px) {
  .footer {
    padding: 64px 48px 40px;
  }

  .footer__links {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 48px;
  }

  /* Centered bottom section - consistent in RTL/LTR */
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding-top: 32px;
  }

  /* Language switcher centered */
  .footer__lang {
    order: 1;
  }

  /* Social icons centered */
  .footer__social {
    justify-content: center !important;
    order: 2;
    width: 100%;
    border: none;
    padding: 0;
  }

  [dir="rtl"] .footer__social,
  [dir="ltr"] .footer__social {
    justify-content: center !important;
  }

  /* Copyright centered */
  .footer__copyright {
    order: 3;
    text-align: center;
  }

  /* Tagline stays centered */
  .footer__tagline {
    text-align: center !important;
  }

  /* Registration centered */
  .footer__registration {
    text-align: center !important;
  }
}

/* =============================================================================
   NEW SECTIONS - LIGHTWEIGHT MOBILE-FIRST
   ============================================================================= */

/* Simple Section Base - Lightweight */
.mara-section-simple {
  padding: 32px 20px;
  background: transparent;
}

.mara-section-simple__content {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
}

.mara-section-simple__title {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
  font-family: 'Noto Sans Arabic', sans-serif;
  line-height: 1.3;
}

.mara-section-simple__desc {
  font-size: clamp(0.95rem, 3.5vw, 1.05rem);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* =============================================================================
   TRUTH SECTION - Clean Notion-Style Animation (Desktop)
   Simple fade-up animation, no fancy effects
   ============================================================================= */

/* Truth Section Container */
.mara-truth-section {
  position: relative;
  overflow: visible;
}

@media (min-width: 768px) {
  .mara-truth-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
  }
}

/* Truth Content - Clean centered layout */
.mara-truth-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
}

@media (min-width: 768px) {
  .mara-truth-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .mara-truth-content.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

.mara-truth-content .mara-section-label {
  display: block;
  margin-bottom: 24px;
  font-size: clamp(14px, 2vw, 16px);
}

.mara-truth-content .mara-section-simple__title {
  font-size: clamp(28px, 5vw, 42px);
  margin-bottom: 16px;
  line-height: 1.3;
}

.mara-truth-content .mara-section-simple__desc {
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

/* Pain Points Stagger Animation - More time between each */
@media (min-width: 768px) {
  #pain-points .mara-pain-points__bubble {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #pain-points.is-revealed .mara-pain-points__bubble {
    opacity: 1;
    transform: translateY(0);
  }

  /* Increased delays: 0.5s between each bubble for better readability */
  #pain-points.is-revealed .mara-pain-points__bubble:nth-child(1) { transition-delay: 0s; }
  #pain-points.is-revealed .mara-pain-points__bubble:nth-child(2) { transition-delay: 0.5s; }
  #pain-points.is-revealed .mara-pain-points__bubble:nth-child(3) { transition-delay: 1.0s; }
  #pain-points.is-revealed .mara-pain-points__bubble:nth-child(4) { transition-delay: 1.5s; }
  /* Last bubble: Extra delay */
  #pain-points.is-revealed .mara-pain-points__bubble:nth-child(5) {
    transition-delay: 2.1s;
    transition-duration: 0.9s;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .mara-flip-card__inner,
  #pain-points .mara-pain-points__bubble {
    transition: opacity 0.3s ease !important;
  }

  .mara-flip-card.is-flipped .mara-flip-card__inner {
    transform: none;
  }

  .mara-flip-card.is-flipped .mara-flip-card__front {
    opacity: 0;
  }

  .mara-flip-card.is-flipped .mara-flip-card__back {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================================
   SECTION LABELS - Storytelling Flow
   ============================================================================= */

.mara-section-label {
  display: block;
  text-align: center;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #42BEEA;
  margin-bottom: 16px;
  opacity: 0.9;
}

[lang="ar"] .mara-section-label {
  font-family: 'Noto Sans Arabic', sans-serif;
  letter-spacing: 0.05em;
}

/* =============================================================================
   PAIN POINTS - Speech Bubbles (B2C + B2B)
   ============================================================================= */

.mara-pain-points {
  padding: 32px 20px 40px;
  text-align: center;
}

.mara-pain-points__container {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mara-pain-points__bubble {
  background: linear-gradient(135deg, rgba(66, 190, 234, 0.08) 0%, rgba(155, 197, 227, 0.04) 100%);
  border-radius: 20px;
  padding: 18px 20px;
  position: relative;
  border-left: 3px solid #42BEEA;
  max-width: 88%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(66, 190, 234, 0.06);
}

.mara-pain-points__bubble--right {
  align-self: flex-end;
  border-left: none;
  border-right: 3px solid #42BEEA;
  flex-direction: row-reverse;
}

.mara-pain-points__bubble--left {
  align-self: flex-start;
}

.mara-pain-points__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  opacity: 0.9;
}

/* RTL adjustments */
[dir="rtl"] .mara-pain-points__bubble {
  border-left: none;
  border-right: 3px solid #42BEEA;
  flex-direction: row-reverse;
}

[dir="rtl"] .mara-pain-points__bubble--right {
  align-self: flex-start;
  border-right: none;
  border-left: 3px solid #42BEEA;
  flex-direction: row;
}

[dir="rtl"] .mara-pain-points__bubble--left {
  align-self: flex-end;
}

.mara-pain-points__text {
  font-size: clamp(0.95rem, 3.5vw, 1.05rem);
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Noto Sans Arabic', sans-serif;
  line-height: 1.6;
  display: block;
  text-align: start;
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .mara-pain-points {
    padding: 48px 48px 56px;
  }

  .mara-pain-points__container {
    max-width: 520px;
    gap: 18px;
  }

  .mara-pain-points__bubble {
    padding: 22px 26px;
    border-radius: 24px;
    gap: 14px;
  }

  .mara-pain-points__icon {
    font-size: 1.5rem;
  }

  .mara-pain-points__text {
    font-size: 1.1rem;
  }
}

/* =============================================================================
   WHAT MAKES MARA DIFFERENT - Solution Section
   ============================================================================= */

.mara-difference-section {
  padding: 60px 20px;
  position: relative;
}

/* Overlay background pattern - subtle */
.mara-difference-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/public/assets/images/overlay-pattern.webp');
  background-size: 300% auto;
  background-position: center;
  opacity: 0.04;
  pointer-events: none;
}

.mara-difference__container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.mara-difference__title {
  text-align: center;
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 40px;
  letter-spacing: -0.02em;
}

.mara-difference__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mara-difference__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.mara-difference__card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(66, 190, 234, 0.2);
}

.mara-difference__number {
  font-size: 14px;
  font-weight: 600;
  color: #42BEEA;
  opacity: 0.8;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-difference__card-title {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.mara-difference__card-desc {
  font-size: clamp(14px, 2.5vw, 16px);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.5;
}

/* Desktop: 3 cards in a row */
@media (min-width: 768px) {
  .mara-difference-section {
    padding: 80px 40px;
  }

  .mara-difference__title {
    margin-bottom: 48px;
  }

  .mara-difference__grid {
    flex-direction: row;
    gap: 24px;
  }

  .mara-difference__card {
    flex: 1;
    padding: 32px;
    border-radius: 20px;
  }
}

/* Scroll animation for difference cards - Desktop only */
@media (min-width: 768px) {
  .mara-difference__title,
  .mara-difference__card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .mara-difference-section.is-visible .mara-difference__title {
    opacity: 1;
    transform: translateY(0);
  }

  .mara-difference-section.is-visible .mara-difference__card {
    opacity: 1;
    transform: translateY(0);
  }

  .mara-difference-section.is-visible .mara-difference__card:nth-child(1) { transition-delay: 0.15s; }
  .mara-difference-section.is-visible .mara-difference__card:nth-child(2) { transition-delay: 0.3s; }
  .mara-difference-section.is-visible .mara-difference__card:nth-child(3) { transition-delay: 0.45s; }
}

/* =============================================================================
   OVERLAY BACKGROUND - Applied to multiple sections
   ============================================================================= */

/* Pain points with subtle overlay */
.mara-pain-points {
  position: relative;
}

.mara-pain-points::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/public/assets/images/overlay-pattern.webp');
  background-size: 400% auto;
  background-position: center top;
  opacity: 0.03;
  pointer-events: none;
}

.mara-pain-points__container {
  position: relative;
  z-index: 1;
}

/* Features section with overlay */
.mara-features {
  position: relative;
}

.mara-features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/public/assets/images/overlay-pattern.webp');
  background-size: 350% auto;
  background-position: center;
  opacity: 0.035;
  pointer-events: none;
}

/* FAQ section with overlay */
.mara-faq {
  position: relative;
}

.mara-faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('/public/assets/images/overlay-pattern.webp');
  background-size: 300% auto;
  background-position: center bottom;
  opacity: 0.025;
  pointer-events: none;
}

/* =============================================================================
   REPLACE YOUR TOOLS - Faded App Icons Section
   Notion-inspired design with strikethrough line
   ============================================================================= */

.mara-replace-tools {
  padding: 48px 16px;
  background: transparent;
}

.mara-replace-tools__content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Icons wrapper with strikethrough */
.mara-replace-tools__icons-wrapper {
  position: relative;
  margin-bottom: 32px;
  padding: 0 8px;
}

.mara-replace-tools__icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.mara-replace-tools__icons img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  opacity: 0.35;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, filter 0.3s ease;
  object-fit: cover;
  flex-shrink: 0;
}

.mara-replace-tools__icons img:hover {
  opacity: 0.6;
  filter: grayscale(60%);
}

/* Strikethrough line on top of icons */
.mara-replace-tools__strike {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(155, 197, 227, 0.6) 20%,
    rgba(155, 197, 227, 0.8) 50%,
    rgba(155, 197, 227, 0.6) 80%,
    transparent 100%
  );
  transform: translateY(-50%);
  pointer-events: none;
}

/* Fade overlay - gradient from edges */
.mara-replace-tools__fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    transparent 10%,
    transparent 90%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Title with blue highlights */
.mara-replace-tools__title {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  font-family: 'Noto Sans Arabic', sans-serif;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.mara-replace-tools__title .blue-highlight {
  color: #9BC5E3;
  background: linear-gradient(135deg, #9BC5E3 0%, #42BEEA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mara-replace-tools__desc {
  font-size: clamp(0.9rem, 3.5vw, 1.05rem);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.7;
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* Desktop adjustments */
@media (min-width: 768px) {
  .mara-replace-tools {
    padding: 80px 48px;
  }

  .mara-replace-tools__content {
    max-width: 700px;
  }

  .mara-replace-tools__icons-wrapper {
    margin-bottom: 40px;
  }

  .mara-replace-tools__icons {
    gap: 12px;
  }

  .mara-replace-tools__icons img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .mara-replace-tools__strike {
    height: 3px;
  }

  .mara-replace-tools__title {
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: 20px;
  }

  .mara-replace-tools__desc {
    font-size: 1.1rem;
  }
}

/* =============================================================================
   INTEGRATIONS SECTION
   ============================================================================= */

.mara-integrations {
  padding: 40px 20px;
  text-align: center;
}

.mara-integrations__title {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 16px 0 8px;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-integrations__subtitle {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
}

.mara-integrations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 400px;
  margin: 0 auto;
}

.mara-integrations__grid--two {
  max-width: 320px;
  gap: 20px;
}

.mara-integrations__item {
  background: linear-gradient(135deg, rgba(66, 190, 234, 0.1) 0%, rgba(155, 197, 227, 0.05) 100%);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  border: 1px solid rgba(66, 190, 234, 0.15);
}

.mara-integrations__item img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

.mara-integrations__item span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.mara-integrations__item--coming {
  opacity: 0.6;
}

.mara-integrations__item--icon-only {
  padding: 24px;
}

.mara-integrations__item--icon-only img {
  width: 64px;
  height: 64px;
}

.mara-integrations__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(66, 190, 234, 0.3);
  color: #42BEEA;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

[dir="rtl"] .mara-integrations__badge {
  right: auto;
  left: 8px;
}

@media (min-width: 768px) {
  .mara-integrations {
    padding: 60px 40px;
  }

  .mara-integrations__grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 600px;
    gap: 20px;
  }

  .mara-integrations__grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 300px;
  }

  .mara-integrations__item {
    padding: 24px 20px;
  }

  .mara-integrations__item img {
    width: 56px;
    height: 56px;
  }

  .mara-integrations__item--icon-only {
    padding: 32px;
  }

  .mara-integrations__item--icon-only img {
    width: 80px;
    height: 80px;
  }
}

/* =============================================================================
   HOW IT WORKS SECTION
   ============================================================================= */

.mara-how-it-works {
  padding: 40px 20px;
  text-align: center;
}

.mara-how-it-works__steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 400px;
  margin: 24px auto 0;
}

.mara-how-it-works__step {
  background: linear-gradient(135deg, rgba(66, 190, 234, 0.08) 0%, rgba(155, 197, 227, 0.04) 100%);
  border-radius: 20px;
  padding: 24px 20px;
  position: relative;
  border: 1px solid rgba(66, 190, 234, 0.1);
}

.mara-how-it-works__number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #42BEEA 0%, #9BC5E3 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0a0a0a;
}

.mara-how-it-works__icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.mara-how-it-works__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-how-it-works__desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .mara-how-it-works {
    padding: 60px 40px;
  }

  .mara-how-it-works__steps {
    flex-direction: row;
    max-width: 800px;
    gap: 20px;
  }

  .mara-how-it-works__step {
    flex: 1;
    padding: 32px 24px;
  }
}

/* =============================================================================
   HOW IT WORKS - MINIMAL FLOW DESIGN (No boxes)
   ============================================================================= */
.mara-how-it-works--minimal .mara-how-it-works__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px auto 0;
  flex-wrap: wrap;
}

.mara-how-it-works--minimal .mara-how-it-works__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mara-how-it-works--minimal .mara-how-it-works__num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #42BEEA 0%, #9BC5E3 100%);
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a0a0a;
}

.mara-how-it-works--minimal .mara-how-it-works__word {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-how-it-works--minimal .mara-how-it-works__connector {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, rgba(66, 190, 234, 0.5), rgba(66, 190, 234, 0.1));
}

[dir="rtl"] .mara-how-it-works--minimal .mara-how-it-works__connector {
  background: linear-gradient(270deg, rgba(66, 190, 234, 0.5), rgba(66, 190, 234, 0.1));
}

@media (min-width: 768px) {
  .mara-how-it-works--minimal .mara-how-it-works__flow {
    gap: 32px;
  }

  .mara-how-it-works--minimal .mara-how-it-works__word {
    font-size: 2rem;
  }

  .mara-how-it-works--minimal .mara-how-it-works__num {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .mara-how-it-works--minimal .mara-how-it-works__connector {
    width: 60px;
  }
}

/* =============================================================================
   FEATURES GRID SECTION
   ============================================================================= */

.mara-features {
  padding: 40px 20px;
  text-align: center;
}

.mara-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 500px;
  margin: 24px auto 0;
}

.mara-features__item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-radius: 16px;
  padding: 20px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mara-features__icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 10px;
}

.mara-features__item h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-features__item p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* Coming Soon Badge */
.mara-features__item--coming {
  position: relative;
  opacity: 0.7;
}

.mara-features__badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(66, 190, 234, 0.3) 0%, rgba(155, 197, 227, 0.2) 100%);
  color: #42BEEA;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 8px;
  border: 1px solid rgba(66, 190, 234, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  .mara-features {
    padding: 80px 48px 100px;
  }

  /* Flowing horizontal layout with wrapping */
  .mara-features__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px 16px;
    max-width: 900px;
  }

  /* Pill/Tag style items */
  .mara-features__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px 16px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
  }

  /* Gradient background on hover */
  .mara-features__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(66, 190, 234, 0.15) 0%, rgba(155, 197, 227, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 100px;
  }

  .mara-features__item:hover::before {
    opacity: 1;
  }

  .mara-features__item:hover {
    border-color: rgba(66, 190, 234, 0.4);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(66, 190, 234, 0.15);
  }

  /* Large emoji icon */
  .mara-features__icon {
    font-size: 2.4rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mara-features__item:hover .mara-features__icon {
    transform: scale(1.15) rotate(-5deg);
  }

  /* Text container */
  .mara-features__item h3 {
    font-size: 1.1rem;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }

  .mara-features__item p {
    display: none; /* Hide description in pill style */
  }

  /* Coming Soon badge in pill style */
  .mara-features__badge {
    position: relative;
    z-index: 1;
    margin-top: 0;
    margin-left: 8px;
    font-size: 0.6rem;
    padding: 2px 8px;
    background: rgba(66, 190, 234, 0.2);
    white-space: nowrap;
  }

  [dir="rtl"] .mara-features__badge {
    margin-left: 0;
    margin-right: 8px;
  }

  .mara-features__item--coming {
    opacity: 0.75;
  }

  .mara-features__item--coming:hover {
    opacity: 1;
  }

  /* Alternating sizes for visual interest */
  .mara-features__item:nth-child(1),
  .mara-features__item:nth-child(4) {
    padding: 18px 32px 18px 22px;
  }

  .mara-features__item:nth-child(2),
  .mara-features__item:nth-child(5) {
    padding: 14px 24px 14px 18px;
  }

  .mara-features__item:nth-child(3),
  .mara-features__item:nth-child(6) {
    padding: 16px 28px 16px 20px;
  }
}

/* =============================================================================
   PRIVACY SECTION
   ============================================================================= */

.mara-privacy {
  padding: 40px 20px;
  text-align: center;
}

.mara-privacy__content {
  max-width: 500px;
  margin: 0 auto;
}

.mara-privacy__icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.mara-privacy__title {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-privacy__subtitle {
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
  line-height: 1.5;
}

.mara-privacy__features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mara-privacy__feature {
  background: linear-gradient(135deg, rgba(66, 190, 234, 0.1) 0%, rgba(155, 197, 227, 0.05) 100%);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(66, 190, 234, 0.15);
}

.mara-privacy__feature-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.mara-privacy__feature span:last-child {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-align: start;
}

@media (min-width: 768px) {
  .mara-privacy {
    padding: 60px 40px;
  }

  .mara-privacy__features {
    flex-direction: row;
    justify-content: center;
  }

  .mara-privacy__feature {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    min-width: 160px;
  }

  .mara-privacy__feature-icon {
    font-size: 1.8rem;
  }
}

/* =============================================================================
   PRIVACY - MINIMAL STATEMENT DESIGN (No boxes)
   ============================================================================= */
.mara-privacy--minimal .mara-privacy__statement {
  max-width: 600px;
  margin: 32px auto 0;
}

.mara-privacy--minimal .mara-privacy__headline {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-privacy--minimal .mara-privacy__text {
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 32px;
  line-height: 1.6;
}

.mara-privacy--minimal .mara-privacy__points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mara-privacy--minimal .mara-privacy__point {
  font-size: 1rem;
  font-weight: 600;
  color: #42BEEA;
}

.mara-privacy--minimal .mara-privacy__divider {
  color: rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
  .mara-privacy--minimal .mara-privacy__points {
    gap: 24px;
  }

  .mara-privacy--minimal .mara-privacy__point {
    font-size: 1.1rem;
  }
}

/* =============================================================================
   SECTION 3: WHY MARA - Creative Cards
   ============================================================================= */

.mara-why-section {
  padding: 40px 20px;
  text-align: center;
}

.mara-why-section__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 400px;
  margin: 0 auto;
}

.mara-why-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(66, 190, 234, 0.15);
  border-radius: 16px;
  text-align: start;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mara-why-card:hover {
  transform: translateX(-4px);
  border-color: rgba(66, 190, 234, 0.4);
  background: rgba(66, 190, 234, 0.05);
}

[dir="ltr"] .mara-why-card:hover {
  transform: translateX(4px);
}

.mara-why-card__icon {
  font-size: 2rem;
  min-width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(66, 190, 234, 0.1);
  border-radius: 12px;
}

.mara-why-card__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.mara-why-card__title {
  font-size: clamp(16px, 3.5vw, 18px);
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.mara-why-card__desc {
  font-size: clamp(13px, 2.8vw, 15px);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.4;
}

/* Special card accents */
.mara-why-card--misk {
  border-color: rgba(138, 43, 226, 0.2);
}

.mara-why-card--misk:hover {
  border-color: rgba(138, 43, 226, 0.5);
  background: rgba(138, 43, 226, 0.05);
}

.mara-why-card--misk .mara-why-card__icon {
  background: rgba(138, 43, 226, 0.15);
}

/* Clickable card link style */
.mara-why-card--link {
  text-decoration: none;
  cursor: pointer;
}

.mara-why-card--link:hover {
  transform: translateY(-4px);
}

.mara-why-card--privacy .mara-why-card__icon {
  background: rgba(66, 190, 234, 0.15);
}

.mara-why-card--saudi .mara-why-card__icon {
  background: rgba(0, 128, 0, 0.15);
}

.mara-why-card--saudi {
  border-color: rgba(0, 128, 0, 0.2);
}

.mara-why-card--saudi:hover {
  border-color: rgba(0, 128, 0, 0.4);
  background: rgba(0, 128, 0, 0.05);
}

@media (min-width: 768px) {
  .mara-why-section {
    padding: 60px 40px;
  }

  .mara-why-section__cards {
    flex-direction: row;
    max-width: 900px;
    gap: 20px;
  }

  .mara-why-card {
    flex: 1;
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
  }

  .mara-why-card:hover {
    transform: translateY(-4px);
  }

  [dir="ltr"] .mara-why-card:hover {
    transform: translateY(-4px);
  }

  .mara-why-card__icon {
    width: 64px;
    height: 64px;
    font-size: 2.2rem;
    margin-bottom: 8px;
  }

  .mara-why-card__logo {
    width: 40px;
    height: 40px;
  }
}

/* =============================================================================
   WHY MARA - MINIMAL LIST DESIGN (No boxes)
   ============================================================================= */
.mara-why-section--minimal .mara-why-section__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 500px;
  margin: 32px auto 0;
}

.mara-why-section--minimal .mara-why-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.3s ease;
}

.mara-why-section--minimal .mara-why-item:last-child {
  border-bottom: none;
}

.mara-why-section--minimal .mara-why-item--link {
  cursor: pointer;
}

.mara-why-section--minimal .mara-why-item--link:hover {
  padding-left: 8px;
}

[dir="rtl"] .mara-why-section--minimal .mara-why-item--link:hover {
  padding-left: 0;
  padding-right: 8px;
}

.mara-why-section--minimal .mara-why-item__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-why-section--minimal .mara-why-item__desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
}

.mara-why-section--minimal .mara-why-item__arrow {
  font-size: 1.2rem;
  color: #42BEEA;
  transition: transform 0.3s ease;
}

[dir="rtl"] .mara-why-section--minimal .mara-why-item__arrow {
  transform: rotate(180deg);
}

.mara-why-section--minimal .mara-why-item--link:hover .mara-why-item__arrow {
  transform: translateX(4px);
}

[dir="rtl"] .mara-why-section--minimal .mara-why-item--link:hover .mara-why-item__arrow {
  transform: rotate(180deg) translateX(4px);
}

@media (min-width: 768px) {
  .mara-why-section--minimal .mara-why-section__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
  }

  .mara-why-section--minimal .mara-why-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mara-why-section--minimal .mara-why-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mara-why-section--minimal .mara-why-item:hover {
    background: rgba(66, 190, 234, 0.05);
    border-color: rgba(66, 190, 234, 0.2);
    transform: translateY(-4px);
  }

  .mara-why-section--minimal .mara-why-item--link:hover {
    padding-left: 24px;
    padding-right: 24px;
  }

  [dir="rtl"] .mara-why-section--minimal .mara-why-item--link:hover {
    padding-left: 24px;
    padding-right: 24px;
  }

  .mara-why-section--minimal .mara-why-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    font-size: 2rem;
    background: rgba(66, 190, 234, 0.1);
    border-radius: 16px;
  }

  .mara-why-section--minimal .mara-why-item__title {
    font-size: 1.3rem;
    margin-bottom: 8px;
  }

  .mara-why-section--minimal .mara-why-item__desc {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .mara-why-section--minimal .mara-why-item__arrow {
    display: none;
  }

  /* Special styling for Misk card */
  .mara-why-section--minimal .mara-why-item--misk {
    border-color: rgba(138, 43, 226, 0.15);
  }

  .mara-why-section--minimal .mara-why-item--misk:hover {
    background: rgba(138, 43, 226, 0.05);
    border-color: rgba(138, 43, 226, 0.3);
  }

  .mara-why-section--minimal .mara-why-item--misk .mara-why-item__icon {
    background: rgba(138, 43, 226, 0.15);
  }

  /* Special styling for Saudi data card */
  .mara-why-section--minimal .mara-why-item--saudi {
    border-color: rgba(0, 157, 87, 0.15);
  }

  .mara-why-section--minimal .mara-why-item--saudi:hover {
    background: rgba(0, 157, 87, 0.05);
    border-color: rgba(0, 157, 87, 0.3);
  }

  .mara-why-section--minimal .mara-why-item--saudi .mara-why-item__icon {
    background: rgba(0, 157, 87, 0.15);
  }
}

/* =============================================================================
   SIMPLE CTA FORM (Temporary - Pre-launch)
   ============================================================================= */

.mara-simple-cta {
  padding: 32px 20px 48px;
}

.mara-simple-cta__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
  margin: 0 auto;
}

.mara-simple-cta__input {
  padding: 16px 20px;
  font-size: 17px;
  border: 1px solid rgba(66, 190, 234, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  min-height: 54px;
}

[dir="rtl"] .mara-simple-cta__input {
  text-align: center;
}

[dir="ltr"] .mara-simple-cta__input {
  text-align: center;
}

.mara-simple-cta__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.mara-simple-cta__input:focus {
  outline: none;
  border-color: #42BEEA;
  background: rgba(66, 190, 234, 0.08);
}

.mara-simple-cta__btn {
  padding: 16px 24px;
  font-size: 17px;
  font-weight: 600;
  color: #000000;
  background: linear-gradient(135deg, #42BEEA 0%, #6DD5FA 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 54px;
}

.mara-simple-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(66, 190, 234, 0.3);
}

@media (min-width: 768px) {
  .mara-simple-cta {
    padding: 40px 40px 60px;
  }

  .mara-simple-cta__form {
    flex-direction: row;
    max-width: 450px;
  }

  .mara-simple-cta__input {
    flex: 1;
    text-align: start;
  }

  .mara-simple-cta__btn {
    white-space: nowrap;
  }
}

/* =============================================================================
   FAQ SECTION - Accordion Style
   ============================================================================= */

.mara-faq {
  padding: clamp(40px, 8vw, 80px) clamp(16px, 4vw, 24px);
  max-width: 900px;
  margin: 0 auto;
}

.mara-faq__title {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 12px;
}

.mara-faq__subtitle {
  font-size: clamp(14px, 2.5vw, 18px);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-bottom: clamp(32px, 6vw, 48px);
}

.mara-faq__container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mara-faq__item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(66, 190, 234, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mara-faq__item:hover {
  border-color: rgba(66, 190, 234, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.mara-faq__item.active {
  border-color: rgba(66, 190, 234, 0.4);
  background: rgba(66, 190, 234, 0.08);
}

.mara-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(16px, 3vw, 20px);
  cursor: pointer;
  gap: 16px;
}

.mara-faq__question-text {
  font-size: clamp(14px, 2.5vw, 16px);
  font-weight: 500;
  color: #fff;
  flex: 1;
  line-height: 1.5;
}

.mara-faq__icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #42BEEA;
  transition: transform 0.3s ease;
}

.mara-faq__icon svg {
  width: 16px;
  height: 16px;
}

.mara-faq__item.active .mara-faq__icon {
  transform: rotate(180deg);
}

.mara-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.mara-faq__item.active .mara-faq__answer {
  max-height: 500px;
}

.mara-faq__answer-text {
  padding: 0 clamp(16px, 3vw, 20px) clamp(16px, 3vw, 20px);
  font-size: clamp(13px, 2.2vw, 15px);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}

.mara-faq__load-more {
  display: block;
  margin: clamp(24px, 4vw, 32px) auto 0;
  padding: 12px 32px;
  background: transparent;
  border: 1px solid rgba(66, 190, 234, 0.4);
  border-radius: 8px;
  color: #42BEEA;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mara-faq__load-more:hover {
  background: rgba(66, 190, 234, 0.1);
  border-color: #42BEEA;
}

.mara-faq__load-more.hidden {
  display: none;
}

/* =============================================================================
   SECTION DIVIDERS - Clean separators
   ============================================================================= */

.mara-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0;
  overflow: hidden;
}

/* Simple Blue Line */
.mara-divider__line {
  width: 80px;
  height: 3px;
  background: #42BEEA;
  border-radius: 3px;
}

/* Add glow only on desktop */
@media (min-width: 768px) {
  .mara-divider__line {
    box-shadow: 0 0 10px rgba(66, 190, 234, 0.5);
  }
}

.mara-divider__ecg {
  width: 120px;
  height: 24px;
  position: relative;
}

.mara-divider__ecg svg {
  width: 100%;
  height: 100%;
}

.mara-divider__ecg path {
  fill: none;
  stroke: #9BC5E3;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  filter: drop-shadow(0 0 4px rgba(155, 197, 227, 0.4));
}

/* Animated pulse effect */
.mara-divider__ecg path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: ecgDraw 3s ease-in-out infinite;
}

@keyframes ecgDraw {
  0% {
    stroke-dashoffset: 200;
    opacity: 0.3;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
  100% {
    stroke-dashoffset: -200;
    opacity: 0.3;
  }
}

/* Desktop - larger divider */
@media (min-width: 768px) {
  .mara-divider {
    padding: 48px 0;
  }

  .mara-divider__ecg {
    width: 160px;
    height: 32px;
  }

  .mara-divider__ecg path {
    stroke-width: 2.5;
  }
}

/* =============================================================================
   MARA CAROUSEL - Clean Horizontal Swipe (3 Slides)
   Mobile-first, lightweight, native feel
   ============================================================================= */

.mara-carousel {
  padding: 24px 0 32px;
  overflow: hidden;
  contain: layout style;
}

/* Controls: Dots + Theme Toggle */
.mara-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
  padding: 0 20px;
}

.mara-carousel__theme-toggle {
  display: flex;
  align-items: center;
}

.mara-carousel__theme-toggle .switch {
  font-size: 14px;
}

/* Moon/Sun Switch - from Uiverse.io by JustCode14 */
.mara-carousel .switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2.2em;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mara-carousel .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mara-carousel .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2a2a2a;
  transition: 0.4s;
  border-radius: 30px;
  overflow: hidden;
}

.mara-carousel .slider:before {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 20px;
  left: 0.5em;
  bottom: 0.5em;
  transition: 0.4s;
  transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
  box-shadow: inset 8px -4px 0px 0px #fff;
}

.mara-carousel .switch input:not(:checked) + .slider {
  background-color: #2a2a2a;
}

.mara-carousel .switch input:checked + .slider {
  background-color: #42BEEA;
}

.mara-carousel .switch input:checked + .slider:before {
  transform: translateX(1.8em);
  box-shadow: inset 15px -4px 0px 15px #ffcf48;
}

.mara-carousel .star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  width: 5px;
  height: 5px;
  transition: all 0.4s;
}

.mara-carousel .star_1 {
  left: 2.5em;
  top: 0.5em;
}

.mara-carousel .star_2 {
  left: 2.2em;
  top: 1.2em;
}

.mara-carousel .star_3 {
  left: 3em;
  top: 0.9em;
}

.mara-carousel .switch input:checked ~ .slider .star {
  opacity: 0;
}

.mara-carousel .cloud {
  width: 3.5em;
  position: absolute;
  bottom: -1.4em;
  left: -1.1em;
  opacity: 0;
  transition: all 0.4s;
}

.mara-carousel .switch input:checked ~ .slider .cloud {
  opacity: 1;
}

/* Horizontal scrolling track */
.mara-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: auto; /* Remove momentum bounce */
  scrollbar-width: none; /* Firefox */
  gap: 0;
  overscroll-behavior-x: none; /* Prevent horizontal bounce */
}

.mara-carousel__track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Each slide */
.mara-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Phone mockup - 11% smaller */
.mara-carousel__phone {
  position: relative;
  width: min(58vw, 249px);
  aspect-ratio: 9 / 19;
  background: #0f0f0f;
  border-radius: 25px;
  padding: 4px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 16px;
  contain: layout style paint;
}

.mara-carousel__phone::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  height: 32px;
  background: #1C1C1E;
  z-index: 5;
  border-radius: 21px 21px 0 0;
  transition: background 0.3s ease;
}

/* Light mode overlay for mobile carousel */
.mara-carousel[data-theme="light"] .mara-carousel__phone::before {
  background: #F2F2F7;
}

.mara-carousel__phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 21px;
}

/* Text above phone */
.mara-carousel__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
  text-align: center;
  font-family: 'Noto Sans Arabic', sans-serif;
}

.mara-carousel__desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  text-align: center;
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* Dot indicators */
.mara-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.mara-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.15s ease-out, transform 0.15s ease-out;
}

.mara-carousel__dot--active {
  background: #9BC5E3;
  transform: scale(1.2);
}

/* Desktop: show all 4 side by side */
@media (min-width: 768px) {
  .mara-carousel {
    padding: 80px 48px;
  }

  .mara-carousel .switch {
    font-size: 20px;
  }

  .mara-carousel__track {
    overflow: visible;
    scroll-snap-type: none;
    justify-content: center;
    gap: 40px;
  }

  .mara-carousel__slide {
    flex: 0 0 auto;
    min-width: auto;
    width: 240px;
  }

  .mara-carousel__phone {
    width: clamp(160px, 14vw, 220px);
  }

  .mara-carousel__title {
    font-size: 1.4rem;
  }

  .mara-carousel__desc {
    font-size: 1rem;
  }

  .mara-carousel__dots {
    display: none; /* Hide dots on desktop */
  }
}

/* =============================================================================
   MOBILE/DESKTOP VISIBILITY
   ============================================================================= */
.mara-mobile-only {
  display: block;
}

.mara-desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mara-mobile-only {
    display: none !important;
  }

  .mara-desktop-only {
    display: block !important;
  }
}

/* =============================================================================
   FLOATING PHONE OVERLAY - Fixed position during showcase
   ============================================================================= */
.mara-floating-phone {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[dir="rtl"] .mara-floating-phone {
  left: 8%;
}

[dir="ltr"] .mara-floating-phone {
  right: 8%;
}

.mara-floating-phone.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mara-floating-phone.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
}

/* Dynamic Glow Effect */
.mara-floating-phone__glow {
  position: absolute;
  width: 350px;
  height: 650px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(66, 190, 234, 0.4) 0%,
    rgba(66, 190, 234, 0.1) 40%,
    transparent 70%);
  filter: blur(50px);
  opacity: 1;
  transition: background 0.8s ease;
  pointer-events: none;
  z-index: -1;
}

/* Glow colors per section */
.mara-floating-phone__glow[data-section="0"] {
  background: radial-gradient(ellipse at center,
    rgba(66, 190, 234, 0.5) 0%,
    rgba(66, 190, 234, 0.15) 40%,
    transparent 70%);
}

.mara-floating-phone__glow[data-section="1"] {
  background: radial-gradient(ellipse at center,
    rgba(109, 184, 236, 0.5) 0%,
    rgba(109, 184, 236, 0.15) 40%,
    transparent 70%);
}

.mara-floating-phone__glow[data-section="2"] {
  background: radial-gradient(ellipse at center,
    rgba(58, 173, 245, 0.5) 0%,
    rgba(58, 173, 245, 0.15) 40%,
    transparent 70%);
}

.mara-floating-phone__glow[data-section="3"] {
  background: radial-gradient(ellipse at center,
    rgba(0, 163, 255, 0.5) 0%,
    rgba(0, 163, 255, 0.15) 40%,
    transparent 70%);
}

/* 3D Phone with Floating Animation */
.mara-floating-phone__device {
  width: 280px;
  aspect-ratio: 9 / 19;
  background: linear-gradient(145deg, #2a2a2c 0%, #0a0a0a 100%);
  border-radius: 44px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(66, 190, 234, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 -10px 30px rgba(255, 255, 255, 0.03) inset;
  position: relative;
  transform-style: preserve-3d;
  animation: phoneFloat 6s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* Dynamic phone shadow based on section */
.mara-floating-phone__glow[data-section="0"] ~ .mara-floating-phone__device {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(66, 190, 234, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.mara-floating-phone__glow[data-section="1"] ~ .mara-floating-phone__device {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(109, 184, 236, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.mara-floating-phone__glow[data-section="2"] ~ .mara-floating-phone__device {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(58, 173, 245, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.mara-floating-phone__glow[data-section="3"] ~ .mara-floating-phone__device {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(0, 163, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

@keyframes phoneFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateY(-10px) rotateX(2deg) rotateY(-1deg);
  }
}

/* Dynamic Island Notch */
.mara-floating-phone__notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 28px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5) inset;
}

/* Stacked Screens Container */
.mara-floating-phone__screens {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: #000;
}

/* Hide status bar/time area of screenshots */
.mara-floating-phone__screens::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: #1C1C1E;
  z-index: 5;
  border-radius: 34px 34px 0 0;
  transition: background 0.3s ease;
}

/* Light mode overlay */
.mara-floating-phone__screens.is-light::before {
  background: #F2F2F7;
}

/* Individual Screen */
.mara-floating-phone__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.mara-floating-phone__screen.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Screen reveal animation */
.mara-floating-phone__screen.is-revealing {
  animation: screenReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes screenReveal {
  0% {
    opacity: 0;
    transform: scale(1.1) translateY(10px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

/* Phone breathing effect on screen change */
.mara-floating-phone__device.is-breathing {
  animation: phoneBreathe 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes phoneBreathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.mara-floating-phone__toggle {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
}

/* Desktop Moon/Sun Switch - Full styling to match mobile */
.mara-floating-phone__toggle .switch {
  font-size: 20px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2.2em;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mara-floating-phone__toggle .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mara-floating-phone__toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2a2a2a;
  transition: 0.4s;
  border-radius: 30px;
  overflow: hidden;
}

.mara-floating-phone__toggle .slider:before {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 20px;
  left: 0.5em;
  bottom: 0.5em;
  transition: 0.4s;
  transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
  box-shadow: inset 8px -4px 0px 0px #fff;
}

.mara-floating-phone__toggle .switch input:not(:checked) + .slider {
  background-color: #2a2a2a;
}

.mara-floating-phone__toggle .switch input:checked + .slider {
  background-color: #42BEEA;
}

.mara-floating-phone__toggle .switch input:checked + .slider:before {
  transform: translateX(1.8em);
  box-shadow: inset 15px -4px 0px 15px #ffcf48;
}

.mara-floating-phone__toggle .star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  width: 5px;
  height: 5px;
  transition: all 0.4s;
}

.mara-floating-phone__toggle .star_1 {
  left: 2.5em;
  top: 0.5em;
}

.mara-floating-phone__toggle .star_2 {
  left: 2.2em;
  top: 1.2em;
}

.mara-floating-phone__toggle .star_3 {
  left: 3em;
  top: 0.9em;
}

.mara-floating-phone__toggle .switch input:checked ~ .slider .star {
  opacity: 0;
}

.mara-floating-phone__toggle .cloud {
  width: 3.5em;
  position: absolute;
  bottom: -1.4em;
  left: -1.1em;
  opacity: 0;
  transition: all 0.4s;
}

.mara-floating-phone__toggle .switch input:checked ~ .slider .cloud {
  opacity: 1;
}

/* =============================================================================
   SHOWCASE - Sticky Card Design with Scroll-Snap
   Phone fixed on right, cards scroll on left
   ============================================================================= */
.mara-showcase {
  position: relative;
  padding: 0;
}

/* Scroll container for cards */
.mara-showcase__scroll-container {
  display: flex;
  flex-direction: column;
  scroll-snap-type: y proximity;
}

/* Individual cards */
.mara-showcase__card {
  min-height: 40vh;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  padding: 24px 0;
  opacity: 0.25;
  transform: translateY(15px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  cursor: pointer;
}

.mara-showcase__card.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* Clean minimal card inner - no box, just content with accent line */
.mara-showcase__card-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 450px;
  width: 100%;
  padding: 24px 0;
  position: relative;
}

/* Accent line that appears on active */
.mara-showcase__card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  transition: all 0.4s ease;
}

.mara-showcase__card.is-active .mara-showcase__card-inner::before {
  background: #9BC5E3;
  box-shadow: 0 0 15px rgba(155, 197, 227, 0.5);
}

.mara-showcase__card[data-slide="1"].is-active .mara-showcase__card-inner::before {
  background: #6DB8EC;
  box-shadow: 0 0 15px rgba(109, 184, 236, 0.5);
}

.mara-showcase__card[data-slide="2"].is-active .mara-showcase__card-inner::before {
  background: #3AADF5;
  box-shadow: 0 0 15px rgba(58, 173, 245, 0.5);
}

.mara-showcase__card[data-slide="3"].is-active .mara-showcase__card-inner::before {
  background: #00A3FF;
  box-shadow: 0 0 15px rgba(0, 163, 255, 0.5);
}

/* Card inner RTL/LTR text alignment */
[dir="rtl"] .mara-showcase__card-inner {
  text-align: right;
  align-items: flex-end;
  padding-right: 24px;
}

[dir="rtl"] .mara-showcase__card-inner::before {
  right: 0;
  left: auto;
}

[dir="ltr"] .mara-showcase__card-inner {
  text-align: left;
  align-items: flex-start;
  padding-left: 24px;
}

[dir="ltr"] .mara-showcase__card-inner::before {
  left: 0;
  right: auto;
}

/* Card inner elements spacing */
.mara-showcase__card-inner .mara-showcase__step-badge {
  margin-bottom: 8px;
}

.mara-showcase__card-inner .mara-showcase__title {
  margin: 0;
  line-height: 1.3;
}

.mara-showcase__card-inner .mara-showcase__desc {
  margin: 4px 0 12px;
}

.mara-showcase__card-inner .mara-showcase__tags {
  margin-top: 8px;
}

/* Card positioning */
/* RTL: Phone is on LEFT, so cards go to RIGHT */
[dir="rtl"] .mara-showcase__card {
  margin-left: auto;
  margin-right: 8%;
  padding-left: 0;
  padding-right: 0;
}

/* LTR: Phone is on RIGHT, so cards go to LEFT */
[dir="ltr"] .mara-showcase__card {
  margin-right: auto;
  margin-left: 8%;
  padding-left: 0;
  padding-right: 0;
}

/* Step number badge */
.mara-showcase__step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
  transition: all 0.4s ease;
}

.mara-showcase__card.is-active .mara-showcase__step-badge {
  background: #9BC5E3;
  border-color: #9BC5E3;
  color: #000;
  box-shadow: 0 0 20px rgba(155, 197, 227, 0.4);
}

.mara-showcase__card[data-slide="1"].is-active .mara-showcase__step-badge {
  background: #6DB8EC;
  border-color: #6DB8EC;
  box-shadow: 0 0 20px rgba(109, 184, 236, 0.4);
}

.mara-showcase__card[data-slide="2"].is-active .mara-showcase__step-badge {
  background: #3AADF5;
  border-color: #3AADF5;
  box-shadow: 0 0 20px rgba(58, 173, 245, 0.4);
}

.mara-showcase__card[data-slide="3"].is-active .mara-showcase__step-badge {
  background: #00A3FF;
  border-color: #00A3FF;
  box-shadow: 0 0 20px rgba(0, 163, 255, 0.4);
}

/* Legacy support: Timeline styles (kept for compatibility) */
.mara-showcase__timeline {
  position: relative;
  max-width: 500px;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

[dir="rtl"] .mara-showcase__timeline {
  margin-right: 12%;
  margin-left: auto;
}

[dir="ltr"] .mara-showcase__timeline {
  margin-left: 12%;
  margin-right: auto;
}

/* Timeline Track */
.mara-showcase__track {
  position: absolute;
  width: 2px;
  top: 30px;
  bottom: 30px;
  background: rgba(255, 255, 255, 0.08);
}

[dir="rtl"] .mara-showcase__track {
  right: 48px;
}

[dir="ltr"] .mara-showcase__track {
  left: 48px;
}

.mara-showcase__track-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #9BC5E3, #6DB8EC, #3AADF5, #00A3FF);
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step */
.mara-showcase__step {
  position: relative;
  padding: 30px 0;
  padding-right: 50px;
  opacity: 0.3;
  transition: opacity 0.5s ease;
  cursor: pointer;
}

[dir="ltr"] .mara-showcase__step {
  padding-right: 0;
  padding-left: 50px;
}

.mara-showcase__step.is-active {
  opacity: 1;
}

/* Step Marker */
.mara-showcase__step-marker {
  position: absolute;
  top: 30px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[dir="rtl"] .mara-showcase__step-marker {
  right: -20px;
}

[dir="ltr"] .mara-showcase__step-marker {
  left: -20px;
}

.mara-showcase__step-number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.mara-showcase__step.is-active .mara-showcase__step-number {
  background: #9BC5E3;
  border-color: #9BC5E3;
  color: #000;
  box-shadow: 0 0 20px rgba(155, 197, 227, 0.5);
}

.mara-showcase__step[data-slide="1"].is-active .mara-showcase__step-number {
  background: #6DB8EC;
  border-color: #6DB8EC;
  box-shadow: 0 0 20px rgba(109, 184, 236, 0.5);
}

.mara-showcase__step[data-slide="2"].is-active .mara-showcase__step-number {
  background: #3AADF5;
  border-color: #3AADF5;
  box-shadow: 0 0 20px rgba(58, 173, 245, 0.5);
}

.mara-showcase__step[data-slide="3"].is-active .mara-showcase__step-number {
  background: #00A3FF;
  border-color: #00A3FF;
  box-shadow: 0 0 20px rgba(0, 163, 255, 0.5);
}

/* Pulse animation */
.mara-showcase__step-pulse {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid transparent;
  opacity: 0;
  z-index: 1;
}

.mara-showcase__step.is-active .mara-showcase__step-pulse {
  animation: stepPulse 2s ease-out infinite;
}

.mara-showcase__step[data-slide="0"].is-active .mara-showcase__step-pulse {
  border-color: #9BC5E3;
}

.mara-showcase__step[data-slide="1"].is-active .mara-showcase__step-pulse {
  border-color: #6DB8EC;
}

.mara-showcase__step[data-slide="2"].is-active .mara-showcase__step-pulse {
  border-color: #3AADF5;
}

.mara-showcase__step[data-slide="3"].is-active .mara-showcase__step-pulse {
  border-color: #00A3FF;
}

@keyframes stepPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Step Content */
.mara-showcase__step-content {
  padding-right: 20px;
}

[dir="ltr"] .mara-showcase__step-content {
  padding-right: 0;
  padding-left: 20px;
}

/* Showcase Title */
.mara-showcase__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  font-family: 'Noto Sans Arabic', sans-serif;
  transition: text-shadow 0.5s ease;
}

.mara-showcase__step.is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(155, 197, 227, 0.3);
}

.mara-showcase__step[data-slide="1"].is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(109, 184, 236, 0.3);
}

.mara-showcase__step[data-slide="2"].is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(58, 173, 245, 0.3);
}

.mara-showcase__step[data-slide="3"].is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(0, 163, 255, 0.3);
}

/* Showcase Description */
.mara-showcase__desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
  line-height: 1.4;
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* Showcase Tags */
.mara-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* RTL tags alignment */
[dir="rtl"] .mara-showcase__tags {
  justify-content: flex-end;
}

[dir="ltr"] .mara-showcase__tags {
  justify-content: flex-start;
}

.mara-showcase__tag {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 12px;
  border-radius: 20px;
  font-family: 'Noto Sans Arabic', sans-serif;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s ease;
}

.mara-showcase__step.is-active .mara-showcase__tag {
  opacity: 1;
  transform: translateY(0);
}

.mara-showcase__step.is-active .mara-showcase__tag:nth-child(1) { transition-delay: 0.1s; }
.mara-showcase__step.is-active .mara-showcase__tag:nth-child(2) { transition-delay: 0.15s; }
.mara-showcase__step.is-active .mara-showcase__tag:nth-child(3) { transition-delay: 0.2s; }

/* Active tag colors */
.mara-showcase__step[data-slide="0"].is-active .mara-showcase__tag {
  background: rgba(155, 197, 227, 0.15);
  border: 1px solid rgba(155, 197, 227, 0.3);
}

.mara-showcase__step[data-slide="1"].is-active .mara-showcase__tag {
  background: rgba(109, 184, 236, 0.15);
  border: 1px solid rgba(109, 184, 236, 0.3);
}

.mara-showcase__step[data-slide="2"].is-active .mara-showcase__tag {
  background: rgba(58, 173, 245, 0.15);
  border: 1px solid rgba(58, 173, 245, 0.3);
}

.mara-showcase__step[data-slide="3"].is-active .mara-showcase__tag {
  background: rgba(0, 163, 255, 0.15);
  border: 1px solid rgba(0, 163, 255, 0.3);
}

/* Card tag animations (new design) */
.mara-showcase__card.is-active .mara-showcase__tag {
  opacity: 1;
  transform: translateY(0);
}

.mara-showcase__card.is-active .mara-showcase__tag:nth-child(1) { transition-delay: 0.1s; }
.mara-showcase__card.is-active .mara-showcase__tag:nth-child(2) { transition-delay: 0.15s; }
.mara-showcase__card.is-active .mara-showcase__tag:nth-child(3) { transition-delay: 0.2s; }

/* Active card tag colors */
.mara-showcase__card[data-slide="0"].is-active .mara-showcase__tag {
  background: rgba(155, 197, 227, 0.15);
  border: 1px solid rgba(155, 197, 227, 0.3);
}

.mara-showcase__card[data-slide="1"].is-active .mara-showcase__tag {
  background: rgba(109, 184, 236, 0.15);
  border: 1px solid rgba(109, 184, 236, 0.3);
}

.mara-showcase__card[data-slide="2"].is-active .mara-showcase__tag {
  background: rgba(58, 173, 245, 0.15);
  border: 1px solid rgba(58, 173, 245, 0.3);
}

.mara-showcase__card[data-slide="3"].is-active .mara-showcase__tag {
  background: rgba(0, 163, 255, 0.15);
  border: 1px solid rgba(0, 163, 255, 0.3);
}

/* Active card title glow */
.mara-showcase__card.is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(155, 197, 227, 0.3);
}

.mara-showcase__card[data-slide="1"].is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(109, 184, 236, 0.3);
}

.mara-showcase__card[data-slide="2"].is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(58, 173, 245, 0.3);
}

.mara-showcase__card[data-slide="3"].is-active .mara-showcase__title {
  text-shadow: 0 0 30px rgba(0, 163, 255, 0.3);
}

/* RTL text alignment */
[dir="rtl"] .mara-showcase__title,
[dir="rtl"] .mara-showcase__desc {
  text-align: right;
}

[dir="ltr"] .mara-showcase__title,
[dir="ltr"] .mara-showcase__desc {
  text-align: left;
}

/* =============================================================================
   DESKTOP ADJUSTMENTS
   ============================================================================= */

@media (min-width: 768px) {
  .mara-section-simple {
    padding: 80px 48px;
  }

  .mara-section-simple__content {
    max-width: 600px;
  }
}

/* =============================================================================
   DESKTOP ANIMATIONS - Beautiful scroll-triggered effects
   Only applies to screens >= 768px
   ============================================================================= */

@media (min-width: 768px) {
  /* Animation Keyframes */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes pulseGlow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(66, 190, 234, 0.2);
    }
    50% {
      box-shadow: 0 0 40px rgba(66, 190, 234, 0.4);
    }
  }

  /* Base animation state - hidden until triggered */
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered children animation */
  .animate-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .animate-stagger.is-visible > *:nth-child(1) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
  .animate-stagger.is-visible > *:nth-child(2) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
  .animate-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
  .animate-stagger.is-visible > *:nth-child(4) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
  .animate-stagger.is-visible > *:nth-child(5) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }
  .animate-stagger.is-visible > *:nth-child(6) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); }

  /* Pain Points Bubbles - Stagger from alternating sides */
  .mara-pain-points__container {
    opacity: 1;
  }

  .mara-pain-points__bubble {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .mara-pain-points__bubble--right {
    transform: translateX(30px);
  }

  .mara-pain-points__bubble--left {
    transform: translateX(-30px);
  }

  .mara-pain-points.is-visible .mara-pain-points__bubble {
    opacity: 1;
    transform: translateX(0);
  }

  /* Increased delays: 0.5s between each bubble */
  .mara-pain-points.is-visible .mara-pain-points__bubble:nth-child(1) { transition-delay: 0.1s; }
  .mara-pain-points.is-visible .mara-pain-points__bubble:nth-child(2) { transition-delay: 0.6s; }
  .mara-pain-points.is-visible .mara-pain-points__bubble:nth-child(3) { transition-delay: 1.1s; }
  .mara-pain-points.is-visible .mara-pain-points__bubble:nth-child(4) { transition-delay: 1.6s; }
  /* Last bubble: Extra delay + longer transition */
  .mara-pain-points.is-visible .mara-pain-points__bubble:nth-child(5) {
    transition-delay: 2.2s;
    transition-duration: 0.8s;
  }

  /* Integrations Grid Animation */
  .mara-integrations__grid {
    opacity: 1;
  }

  .mara-integrations__item {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .mara-integrations.is-visible .mara-integrations__item {
    opacity: 1;
    transform: scale(1);
  }

  .mara-integrations.is-visible .mara-integrations__item:nth-child(1) { transition-delay: 0.1s; }
  .mara-integrations.is-visible .mara-integrations__item:nth-child(2) { transition-delay: 0.2s; }
  .mara-integrations.is-visible .mara-integrations__item:nth-child(3) { transition-delay: 0.3s; }
  .mara-integrations.is-visible .mara-integrations__item:nth-child(4) { transition-delay: 0.4s; }

  /* How It Works Steps Animation */
  .mara-how-it-works__step {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .mara-how-it-works.is-visible .mara-how-it-works__step {
    opacity: 1;
    transform: translateY(0);
  }

  .mara-how-it-works.is-visible .mara-how-it-works__step:nth-child(1) { transition-delay: 0.15s; }
  .mara-how-it-works.is-visible .mara-how-it-works__step:nth-child(2) { transition-delay: 0.3s; }
  .mara-how-it-works.is-visible .mara-how-it-works__step:nth-child(3) { transition-delay: 0.45s; }

  /* Features Grid Animation */
  .mara-features__item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .mara-features.is-visible .mara-features__item {
    opacity: 1;
    transform: translateY(0);
  }

  .mara-features.is-visible .mara-features__item:nth-child(1) { transition-delay: 0.1s; }
  .mara-features.is-visible .mara-features__item:nth-child(2) { transition-delay: 0.15s; }
  .mara-features.is-visible .mara-features__item:nth-child(3) { transition-delay: 0.2s; }
  .mara-features.is-visible .mara-features__item:nth-child(4) { transition-delay: 0.25s; }
  .mara-features.is-visible .mara-features__item:nth-child(5) { transition-delay: 0.3s; }
  .mara-features.is-visible .mara-features__item:nth-child(6) { transition-delay: 0.35s; }

  /* Privacy Section Animation */
  .mara-privacy__content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .mara-privacy.is-visible .mara-privacy__content {
    opacity: 1;
    transform: translateY(0);
  }

  .mara-privacy__feature {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .mara-privacy.is-visible .mara-privacy__feature:nth-child(1) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
  .mara-privacy.is-visible .mara-privacy__feature:nth-child(2) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
  .mara-privacy.is-visible .mara-privacy__feature:nth-child(3) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

  /* FAQ Animation */
  .mara-faq__item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .mara-faq.is-visible .mara-faq__item {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hover Effects for Desktop */
  .mara-integrations__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(66, 190, 234, 0.15);
  }

  .mara-how-it-works__step:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(66, 190, 234, 0.12);
  }

  .mara-features__item:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, rgba(66, 190, 234, 0.12) 0%, rgba(155, 197, 227, 0.08) 100%);
    border-color: rgba(66, 190, 234, 0.25);
  }

  .mara-privacy__feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(66, 190, 234, 0.1);
  }

  /* Section Label Animation */
  .mara-section-label {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .is-visible > .mara-section-label,
  .is-visible .mara-section-label {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   CREATIVE DESKTOP REDESIGNS - Sections 1, 3, 4, 5
   Unique animations and styles (desktop 768px+)
   ============================================================================= */

/* ---- KEYFRAME ANIMATIONS ---- */

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float-particle {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  50% { transform: translateY(-20px) rotate(180deg); opacity: 1; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(66, 190, 234, 0.3), 0 0 60px rgba(66, 190, 234, 0.1); }
  50% { box-shadow: 0 0 50px rgba(66, 190, 234, 0.5), 0 0 100px rgba(66, 190, 234, 0.2); }
}

@keyframes orbit {
  0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

@keyframes orbit-reverse {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: rotate(-360deg) translateX(100px) rotate(360deg); }
}

@keyframes draw-line {
  0% { stroke-dashoffset: 300; }
  100% { stroke-dashoffset: 0; }
}

@keyframes shake-settle {
  0% { transform: translateX(0) rotate(0); opacity: 0; }
  20% { transform: translateX(-8px) rotate(-4deg); opacity: 0.3; }
  40% { transform: translateX(6px) rotate(3deg); opacity: 0.4; }
  60% { transform: translateX(-4px) rotate(-2deg); opacity: 0.45; }
  80% { transform: translateX(2px) rotate(1deg); opacity: 0.5; }
  100% { transform: translateX(0) rotate(0); opacity: 0.5; }
}

@keyframes slide-up-blur {
  0% { opacity: 0; transform: translateY(60px); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes text-reveal {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes scale-bounce {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* =============================================================================
   SECTION 1: TRUTH - Dramatic Gradient Text with Particles
   ============================================================================= */

@media (min-width: 768px) {
  .mara-section-simple#truth {
    padding: 100px 48px 120px;
    position: relative;
    overflow: hidden;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mara-section-simple#truth .mara-section-simple__content {
    max-width: 900px;
    position: relative;
    z-index: 2;
  }

  /* Floating particles background */
  .mara-section-simple#truth::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(66, 190, 234, 0.4), transparent),
      radial-gradient(3px 3px at 80% 20%, rgba(155, 197, 227, 0.3), transparent),
      radial-gradient(2px 2px at 40% 70%, rgba(66, 190, 234, 0.35), transparent),
      radial-gradient(3px 3px at 70% 80%, rgba(155, 197, 227, 0.25), transparent),
      radial-gradient(2px 2px at 10% 60%, rgba(66, 190, 234, 0.3), transparent),
      radial-gradient(2px 2px at 90% 50%, rgba(66, 190, 234, 0.35), transparent);
    animation: float-particle 8s ease-in-out infinite;
    pointer-events: none;
  }

  /* Animated gradient title */
  .mara-section-simple#truth .mara-section-simple__title {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(
      120deg,
      #fff 0%,
      #fff 40%,
      #42BEEA 45%,
      #9BC5E3 55%,
      #fff 60%,
      #fff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
  }

  .mara-section-simple#truth .mara-section-simple__desc {
    font-size: 1.4rem;
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    opacity: 0;
    animation: slide-up-blur 1s ease-out 0.3s forwards;
  }

  .mara-section-simple#truth.is-visible .mara-section-simple__title {
    animation: shimmer 4s linear infinite, text-reveal 1s ease-out forwards;
  }

  /* Decorative orbs */
  .mara-section-simple#truth::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66, 190, 234, 0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: pulse-glow 4s ease-in-out infinite;
  }
}

/* =============================================================================
   SECTION 3: REPLACE TOOLS - 3D Card with Scattered Apps
   ============================================================================= */

@media (min-width: 768px) {
  .mara-replace-tools {
    padding: 100px 48px;
  }

  .mara-replace-tools__content {
    max-width: 850px;
    position: relative;
  }

  /* Icons wrapper - no box, just spacing */
  .mara-replace-tools__icons-wrapper {
    margin-bottom: 48px;
    position: relative;
  }

  .mara-replace-tools__icons {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .mara-replace-tools__icons img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    opacity: 0.5;
    filter: grayscale(100%) brightness(0.8);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center;
  }

  .mara-replace-tools.is-visible .mara-replace-tools__icons img {
    animation: shake-settle 1s ease-out forwards;
  }

  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(1) { animation-delay: 0.1s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(2) { animation-delay: 0.2s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(3) { animation-delay: 0.15s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(4) { animation-delay: 0.25s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(5) { animation-delay: 0.1s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(6) { animation-delay: 0.3s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(7) { animation-delay: 0.2s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(8) { animation-delay: 0.35s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(9) { animation-delay: 0.15s; }
  .mara-replace-tools.is-visible .mara-replace-tools__icons img:nth-child(10) { animation-delay: 0.25s; }

  /* Strike line with neon effect */
  .mara-replace-tools__strike {
    height: 4px;
    background: linear-gradient(90deg,
      transparent 0%,
      #42BEEA 15%,
      #9BC5E3 50%,
      #42BEEA 85%,
      transparent 100%
    );
    box-shadow: 0 0 20px rgba(66, 190, 234, 0.6), 0 0 40px rgba(66, 190, 234, 0.3);
    transform: translateY(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
  }

  .mara-replace-tools.is-visible .mara-replace-tools__strike {
    transform: translateY(-50%) scaleX(1);
  }

  /* Title styling */
  .mara-replace-tools__title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    letter-spacing: -0.03em;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.8s;
  }

  .mara-replace-tools.is-visible .mara-replace-tools__title {
    opacity: 1;
    transform: translateY(0);
  }

  .mara-replace-tools__desc {
    font-size: 1.2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1) 1s;
  }

  .mara-replace-tools.is-visible .mara-replace-tools__desc {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   SECTION 4: INTEGRATIONS - Orbital Animation Design
   ============================================================================= */

@media (min-width: 768px) {
  .mara-integrations {
    padding: 100px 48px;
    position: relative;
    overflow: hidden;
  }

  .mara-integrations__title {
    font-size: clamp(2.2rem, 5vw, 3rem);
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .mara-integrations.is-visible .mara-integrations__title {
    opacity: 1;
    transform: translateY(0);
  }

  .mara-integrations__subtitle {
    font-size: 1.2rem;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  }

  .mara-integrations.is-visible .mara-integrations__subtitle {
    opacity: 1;
    transform: translateY(0);
  }

  /* Orbital container */
  .mara-integrations__grid--two {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 600px;
    position: relative;
    padding: 40px 0;
  }

  /* Connecting line between items */
  .mara-integrations__grid--two::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg,
      rgba(66, 190, 234, 0.8),
      rgba(155, 197, 227, 0.4),
      rgba(66, 190, 234, 0.8)
    );
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.8s ease 0.4s;
  }

  .mara-integrations.is-visible .mara-integrations__grid--two::before {
    opacity: 1;
  }

  /* Pulsing center point */
  .mara-integrations__grid--two::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #42BEEA;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(66, 190, 234, 0.8), 0 0 40px rgba(66, 190, 234, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.6s ease 0.6s;
  }

  .mara-integrations.is-visible .mara-integrations__grid--two::after {
    opacity: 1;
  }

  .mara-integrations__item {
    padding: 32px 40px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(20, 30, 40, 0.9) 0%, rgba(10, 15, 20, 0.95) 100%);
    border: 1px solid rgba(66, 190, 234, 0.2);
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
  }

  /* Hover glow effect */
  .mara-integrations__item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(66, 190, 234, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .mara-integrations__item:hover::before {
    opacity: 1;
  }

  .mara-integrations.is-visible .mara-integrations__item {
    transform: scale(1);
    opacity: 1;
  }

  .mara-integrations.is-visible .mara-integrations__item:nth-child(1) {
    transition-delay: 0.3s;
  }

  .mara-integrations.is-visible .mara-integrations__item:nth-child(2) {
    transition-delay: 0.5s;
  }

  .mara-integrations__item:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: rgba(66, 190, 234, 0.5);
    box-shadow: 0 20px 60px rgba(66, 190, 234, 0.2), 0 0 40px rgba(66, 190, 234, 0.1);
  }

  .mara-integrations__item img {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin-bottom: 16px;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
  }

  .mara-integrations__item span {
    font-size: 1.1rem;
    font-weight: 600;
  }
}

/* =============================================================================
   SECTION 5: HOW IT WORKS - Connected Path Design
   ============================================================================= */

@media (min-width: 768px) {
  .mara-how-it-works {
    padding: 100px 48px;
    position: relative;
  }

  .mara-how-it-works__steps {
    max-width: 1000px;
    gap: 40px;
    position: relative;
    padding: 20px 0;
  }

  /* Connecting line SVG path */
  .mara-how-it-works__steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg,
      rgba(66, 190, 234, 0.1),
      rgba(66, 190, 234, 0.6) 20%,
      rgba(155, 197, 227, 0.6) 50%,
      rgba(66, 190, 234, 0.6) 80%,
      rgba(66, 190, 234, 0.1)
    );
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0;
    transition: opacity 0.6s ease 0.3s;
  }

  .mara-how-it-works.is-visible .mara-how-it-works__steps::before {
    opacity: 1;
  }

  .mara-how-it-works__step {
    flex: 1;
    background: linear-gradient(145deg, rgba(20, 30, 40, 0.95) 0%, rgba(10, 15, 20, 0.98) 100%);
    border-radius: 28px;
    padding: 40px 32px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(66, 190, 234, 0.15);
    transform: translateY(50px);
    opacity: 0;
    filter: blur(5px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .mara-how-it-works.is-visible .mara-how-it-works__step {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }

  .mara-how-it-works.is-visible .mara-how-it-works__step:nth-child(1) { transition-delay: 0.2s; }
  .mara-how-it-works.is-visible .mara-how-it-works__step:nth-child(2) { transition-delay: 0.4s; }
  .mara-how-it-works.is-visible .mara-how-it-works__step:nth-child(3) { transition-delay: 0.6s; }

  /* Step number badge */
  .mara-how-it-works__number {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
    font-weight: 800;
    top: -24px;
    background: linear-gradient(135deg, #42BEEA 0%, #1a8fc4 100%);
    box-shadow: 0 8px 24px rgba(66, 190, 234, 0.4), 0 0 0 4px rgba(10, 15, 20, 1);
  }

  .mara-how-it-works__step:hover .mara-how-it-works__number {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 12px 32px rgba(66, 190, 234, 0.6), 0 0 0 4px rgba(10, 15, 20, 1);
  }

  .mara-how-it-works__icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
  }

  .mara-how-it-works__title {
    font-size: 1.3rem;
    margin-bottom: 12px;
  }

  .mara-how-it-works__desc {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* Hover state with 3D tilt */
  .mara-how-it-works__step {
    transform-style: preserve-3d;
    perspective: 1000px;
  }

  .mara-how-it-works__step:hover {
    transform: translateY(-12px) rotateX(5deg);
    border-color: rgba(66, 190, 234, 0.4);
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.3),
      0 0 40px rgba(66, 190, 234, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  /* Inner glow on hover */
  .mara-how-it-works__step::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(circle at 50% 0%, rgba(66, 190, 234, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .mara-how-it-works__step:hover::after {
    opacity: 1;
  }
}

/* =============================================================================
   FLIP BOOK SECTION TRANSITIONS (Desktop Only)
   Dramatic page-flip animations between sections like a flip book
   ============================================================================= */

@media (min-width: 768px) {
  /* Base section styling - Flip Book Ready */
  section {
    position: relative;
    transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  /* ==================== FLIP BOOK KEYFRAMES ==================== */

  /* Flip from bottom - like turning a page up */
  @keyframes flip-from-bottom {
    0% {
      opacity: 0;
      transform: perspective(2000px) rotateX(-40deg) translateY(100px) scale(0.9);
      transform-origin: center bottom;
      filter: blur(8px);
    }
    50% {
      opacity: 0.7;
      filter: blur(3px);
    }
    100% {
      opacity: 1;
      transform: perspective(2000px) rotateX(0deg) translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* Page turn from side */
  @keyframes page-turn-right {
    0% {
      opacity: 0;
      transform: perspective(1500px) rotateY(-25deg) translateX(-80px) scale(0.92);
      transform-origin: left center;
      filter: blur(6px);
    }
    60% {
      opacity: 0.85;
      transform: perspective(1500px) rotateY(-8deg) translateX(-25px) scale(0.97);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform: perspective(1500px) rotateY(0deg) translateX(0) scale(1);
      filter: blur(0);
    }
  }

  /* RTL page turn */
  @keyframes page-turn-left {
    0% {
      opacity: 0;
      transform: perspective(1500px) rotateY(25deg) translateX(80px) scale(0.92);
      transform-origin: right center;
      filter: blur(6px);
    }
    60% {
      opacity: 0.85;
      transform: perspective(1500px) rotateY(8deg) translateX(25px) scale(0.97);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform: perspective(1500px) rotateY(0deg) translateX(0) scale(1);
      filter: blur(0);
    }
  }

  /* Unfold from top - like opening a folded paper */
  @keyframes unfold-down {
    0% {
      opacity: 0;
      transform: perspective(1200px) rotateX(-60deg) scaleY(0.6) translateY(-50px);
      transform-origin: center top;
      filter: blur(10px);
    }
    50% {
      opacity: 0.6;
      transform: perspective(1200px) rotateX(-15deg) scaleY(0.9) translateY(-15px);
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: perspective(1200px) rotateX(0deg) scaleY(1) translateY(0);
      filter: blur(0);
    }
  }

  /* 3D Card flip */
  @keyframes card-flip-3d {
    0% {
      opacity: 0;
      transform: perspective(1000px) rotateY(-90deg) scale(0.7);
      filter: blur(12px);
    }
    50% {
      opacity: 0.7;
      transform: perspective(1000px) rotateY(-20deg) scale(0.9);
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: perspective(1000px) rotateY(0deg) scale(1);
      filter: blur(0);
    }
  }

  /* Slide and tilt */
  @keyframes slide-tilt-up {
    0% {
      opacity: 0;
      transform: perspective(1500px) rotateX(25deg) translateY(150px) scale(0.85);
      filter: blur(12px);
    }
    40% {
      opacity: 0.5;
      filter: blur(6px);
    }
    70% {
      opacity: 0.9;
      transform: perspective(1500px) rotateX(5deg) translateY(30px) scale(0.98);
      filter: blur(2px);
    }
    100% {
      opacity: 1;
      transform: perspective(1500px) rotateX(0deg) translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* Zoom and rotate */
  @keyframes zoom-rotate-in {
    0% {
      opacity: 0;
      transform: perspective(1200px) rotateZ(-3deg) rotateX(15deg) scale(0.8) translateY(60px);
      filter: blur(8px);
    }
    100% {
      opacity: 1;
      transform: perspective(1200px) rotateZ(0deg) rotateX(0deg) scale(1) translateY(0);
      filter: blur(0);
    }
  }

  /* Cascade fall */
  @keyframes cascade-fall {
    0% {
      opacity: 0;
      transform: perspective(800px) rotateX(-30deg) translateY(-100px) scale(1.1);
      transform-origin: center top;
      filter: blur(6px);
    }
    100% {
      opacity: 1;
      transform: perspective(800px) rotateX(0deg) translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* Staggered element animations */
  @keyframes fade-up-stagger {
    0% {
      opacity: 0;
      transform: translateY(40px) scale(0.98);
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes flip-card-stagger {
    0% {
      opacity: 0;
      transform: perspective(600px) rotateX(-30deg) translateY(30px);
    }
    100% {
      opacity: 1;
      transform: perspective(600px) rotateX(0deg) translateY(0);
    }
  }

  /* ==================== ENHANCED SECTION ANIMATIONS (No Background Colors) ==================== */

  /* ---- SECTION 1: TRUTH ---- */
  #truth {
    opacity: 0;
    transform: translateY(60px);
  }

  #truth.is-visible {
    animation: flip-from-bottom 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #truth.is-visible .mara-section-simple__content {
    animation: fade-up-stagger 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    opacity: 0;
  }

  /* ---- SECTION 2: PAIN POINTS ---- */
  #pain-points {
    opacity: 0;
    transform: translateX(-40px);
  }

  #pain-points.is-visible {
    animation: page-turn-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  [dir="rtl"] #pain-points.is-visible {
    animation: page-turn-left 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #pain-points.is-visible .mara-pain-points__bubble {
    animation: flip-card-stagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }

  /* Increased delays: 0.5s between each bubble for better readability */
  #pain-points.is-visible .mara-pain-points__bubble:nth-child(1) { animation-delay: 0.15s; }
  #pain-points.is-visible .mara-pain-points__bubble:nth-child(2) { animation-delay: 0.65s; }
  #pain-points.is-visible .mara-pain-points__bubble:nth-child(3) { animation-delay: 1.15s; }
  #pain-points.is-visible .mara-pain-points__bubble:nth-child(4) { animation-delay: 1.65s; }
  /* Last bubble: Extra delay + special glow animation */
  #pain-points.is-visible .mara-pain-points__bubble:nth-child(5) {
    animation-delay: 2.25s;
    animation-duration: 0.9s;
  }

  /* ---- SECTION 3: SHOWCASE ---- */
  #showcase-desktop {
    opacity: 0;
    transform: perspective(1000px) rotateX(-10deg) translateY(40px);
  }

  #showcase-desktop.is-visible {
    animation: unfold-down 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* ---- SECTION 4: REPLACE TOOLS ---- */
  #replace-tools {
    opacity: 0;
    transform: translateY(80px) scale(0.95);
  }

  #replace-tools.is-visible {
    animation: slide-tilt-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* ---- SECTION 5: INTEGRATIONS ---- */
  #integrations {
    opacity: 0;
    transform: perspective(800px) rotateY(-15deg);
  }

  #integrations.is-visible {
    animation: card-flip-3d 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* ---- SECTION 6: HOW IT WORKS ---- */
  #how-it-works {
    opacity: 0;
    transform: scale(0.9) translateY(50px);
  }

  #how-it-works.is-visible {
    animation: zoom-rotate-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* ---- SECTION 7: FEATURES ---- */
  #features {
    opacity: 0;
    transform: translateY(60px);
  }

  #features.is-visible {
    animation: cascade-fall 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #features.is-visible .mara-features__item {
    animation: flip-card-stagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }

  #features.is-visible .mara-features__item:nth-child(1) { animation-delay: 0.1s; }
  #features.is-visible .mara-features__item:nth-child(2) { animation-delay: 0.15s; }
  #features.is-visible .mara-features__item:nth-child(3) { animation-delay: 0.2s; }
  #features.is-visible .mara-features__item:nth-child(4) { animation-delay: 0.25s; }
  #features.is-visible .mara-features__item:nth-child(5) { animation-delay: 0.3s; }
  #features.is-visible .mara-features__item:nth-child(6) { animation-delay: 0.35s; }

  /* ---- SECTION 8: PRIVACY ---- */
  #privacy-section {
    opacity: 0;
    transform: translateX(40px);
  }

  #privacy-section.is-visible {
    animation: page-turn-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  [dir="rtl"] #privacy-section.is-visible {
    animation: page-turn-left 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #privacy-section.is-visible .mara-privacy__content {
    animation: flip-card-stagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    opacity: 0;
  }

  /* ---- SECTION 9: WHY MARA ---- */
  #why-mara {
    opacity: 0;
    transform: translateY(70px);
  }

  #why-mara.is-visible {
    animation: flip-from-bottom 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  #why-mara.is-visible .mara-why-card {
    animation: card-flip-3d 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
  }

  #why-mara.is-visible .mara-why-card:nth-child(1) { animation-delay: 0.2s; }
  #why-mara.is-visible .mara-why-card:nth-child(2) { animation-delay: 0.35s; }
  #why-mara.is-visible .mara-why-card:nth-child(3) { animation-delay: 0.5s; }

  /* ---- SECTION 10: FAQ ---- */
  #faq {
    opacity: 0;
    transform: perspective(800px) rotateX(-8deg) translateY(40px);
  }

  #faq.is-visible {
    animation: unfold-down 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* ---- DIVIDERS ---- */
  .mara-divider {
    position: relative;
    height: 1px;
    margin: 0;
    overflow: visible;
  }

  .mara-divider__line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(66, 190, 234, 0.3) 20%,
      rgba(155, 197, 227, 0.5) 50%,
      rgba(66, 190, 234, 0.3) 80%,
      transparent 100%
    );
    transform: translateY(-50%);
    opacity: 0.6;
  }

}

/* =============================================================================
   EXTENDED VISIBILITY OBSERVER - Add more sections
   ============================================================================= */