/* ==========================================================================
   Rummaan MShop — Pomegranate Design System
   "Every Seed of Your Business, Connected."
   Light theme default · Dark via prefers-color-scheme OR data-theme override
   (manual navbar toggle, persisted in localStorage as `mshop_theme`).
   Fonts are loaded via <link> in the HTML head (not @import) so the
   stylesheet itself never blocks on a second round-trip.
   ========================================================================== */

/* ---------- Design Tokens (Light Theme) ---------- */
:root {
  color-scheme: light;

  /* Pomegranate Palette — shared across themes, sole accent color family */
  --pomegranate-deep:    #9B1B30;
  --pomegranate-core:    #C41E3A;
  --pomegranate-bright:  #E8384F;
  --pomegranate-light:   #FF6B7A;
  --pomegranate-glow:    #FF8A98;

  /* Seed / Gold Accent */
  --seed-gold:           #B8860B;
  --seed-gold-light:     #D4A373;
  --seed-gold-bright:    #F0D9B5;

  /* ---- Light Theme Functional — cool slate neutrals, accent stays pomegranate ---- */
  --text-primary:        #0F172A;
  --text-secondary:      #475569;
  --text-accent:         var(--pomegranate-core);
  --text-muted:          #64748B;

  --bg-primary:          #FFFFFF;
  --bg-surface:          #FFFFFF;
  --bg-elevated:         #FFFFFF;

  /* Pure-white theme: sections tint via subtle pomegranate gradients,
     never gray surfaces */
  --section-tint:        linear-gradient(180deg, rgba(196, 30, 58, 0.035), rgba(212, 163, 115, 0.018) 50%, rgba(196, 30, 58, 0) 100%);
  --stats-tint:          radial-gradient(ellipse 70% 90% at 50% 0%, rgba(196, 30, 58, 0.04), transparent 65%);

  /* Bento card surface (solid, not glass) */
  --card-bg:             #FFFFFF;
  --card-border:         #E2E8F0;

  /* Glass — reserved for navbar + small chips only */
  --glass-bg:            rgba(255, 255, 255, 0.75);
  --glass-border:        rgba(15, 23, 42, 0.08);
  --glass-highlight:     rgba(196, 30, 58, 0.03);

  /* Shadows (light) */
  --shadow-glow:    0 0 40px rgba(196, 30, 58, 0.15);
  --shadow-glow-sm: 0 0 20px rgba(196, 30, 58, 0.1);
  --shadow-glow-lg: 0 0 80px rgba(196, 30, 58, 0.2);
  --shadow-card:    0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-elevated:0 8px 24px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* Nav */
  --nav-bg:              rgba(255, 255, 255, 0.85);
  --nav-border:          rgba(15, 23, 42, 0.06);

  /* Hero gradient */
  --hero-radial-1:       rgba(196, 30, 58, 0.04);
  --hero-radial-2:       rgba(155, 27, 48, 0.03);
  --hero-radial-3:       rgba(212, 163, 115, 0.04);

  /* Section divider fill — matches the top of the features tint wash */
  --divider-fill:        #FDF3F5;

  /* CTA section bg */
  --cta-bg-from:         #FFFFFF;
  --cta-bg-to:           #FFF6F7;
  --cta-radial-1:        rgba(196, 30, 58, 0.05);
  --cta-radial-2:        rgba(212, 163, 115, 0.04);

  /* Footer */
  --footer-bg:           #FFFFFF;
  --footer-border:       rgba(0, 0, 0, 0.06);

  /* Gate */

  /* Seed canvas */
  --seed-opacity:        0.5;
  --seed-line-opacity:   0.04;

  /* Stat / counter — solid bento surface */
  --stat-bg:             #FFFFFF;

  /* Btn secondary */
  --btn-secondary-bg:    #FFFFFF;
  --btn-secondary-color: var(--text-primary);
  --btn-secondary-hover-bg: rgba(196, 30, 58, 0.06);

  /* Testimonial quote color */
  --testimonial-color:   #1E293B;
  --quote-mark-opacity:  0.2;

  /* Per-component theme tokens (were scattered dark-mode blocks; now the
     ONLY place light/dark differ so data-theme can override them) */
  --gradient-text:       linear-gradient(135deg, var(--pomegranate-core), var(--pomegranate-glow), var(--pomegranate-deep));
  --text-glow-shadow:    0 0 30px rgba(196, 30, 58, 0.25);
  --feature-icon-bg:     linear-gradient(135deg, rgba(255, 107, 122, 0.15), rgba(196, 30, 58, 0.06));
  --global-icon-color:   var(--seed-gold);
  --global-icon-bg:      linear-gradient(135deg, rgba(212, 163, 115, 0.2), rgba(255, 107, 122, 0.08));
  /* Gold used as SMALL TEXT needs deeper ink than the decorative gold to
     clear WCAG 4.5:1 on white (#B8860B was ~3.8:1) */
  --gold-text:           #8A6A0B;
  --city-dot:            var(--seed-gold);
  --city-dot-night:      #5B6B9E;
  --hero-img-filter:     drop-shadow(0 20px 40px rgba(196, 30, 58, 0.15));
  --hero-glow-bg:        radial-gradient(circle, rgba(196, 30, 58, 0.1), transparent 70%);
  --dot-inactive:        #64748B;
  --error-color:         #DC2626;

  /* Theme toggle shows the icon of the theme you'd switch TO */
  --theme-icon-sun:      none;
  --theme-icon-moon:     inline-flex;

  /* Spacing */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* Typography Scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  /* Fonts */
  --font-heading: 'Calistoga', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Border Radius */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;
  --duration-slower: 800ms;
}

/* ---------- Dark Theme Tokens ----------
   Desaturated tonal slate surfaces (not just darkened reds) with pomegranate
   as the sole accent. The SAME token list appears twice on purpose:
   once for system dark (unless the user forced light) and once for the
   manual data-theme="dark" override. KEEP BOTH BLOCKS IDENTICAL. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --text-primary:        #F1F5F9;
    --text-secondary:      #CBD5E1;
    --text-accent:         var(--pomegranate-light);
    --text-muted:          #94A3B8;

    --bg-primary:          #0B1120;
    --bg-surface:          #131B2E;
    --bg-elevated:         #1B2438;

    --section-tint:        none;
    --stats-tint:          linear-gradient(180deg, var(--bg-surface), var(--bg-primary));

    --card-bg:             #161F33;
    --card-border:         #263049;

    --glass-bg:            rgba(22, 31, 51, 0.7);
    --glass-border:        rgba(226, 232, 240, 0.1);
    --glass-highlight:     rgba(255, 107, 122, 0.08);

    --shadow-glow:    0 0 40px rgba(196, 30, 58, 0.3);
    --shadow-glow-sm: 0 0 20px rgba(196, 30, 58, 0.2);
    --shadow-glow-lg: 0 0 80px rgba(196, 30, 58, 0.4);
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-elevated:0 16px 48px rgba(0, 0, 0, 0.45);

    --nav-bg:              rgba(11, 17, 32, 0.85);
    --nav-border:          rgba(226, 232, 240, 0.08);

    --hero-radial-1:       rgba(196, 30, 58, 0.18);
    --hero-radial-2:       rgba(155, 27, 48, 0.12);
    --hero-radial-3:       rgba(212, 163, 115, 0.08);

    --divider-fill:        #131B2E;

    --cta-bg-from:         #131B2E;
    --cta-bg-to:           #1B2438;
    --cta-radial-1:        rgba(196, 30, 58, 0.15);
    --cta-radial-2:        rgba(212, 163, 115, 0.1);

    --footer-bg:           #0B1120;
    --footer-border:       rgba(226, 232, 240, 0.08);

    --seed-opacity:        0.7;
    --seed-line-opacity:   0.05;

    --stat-bg:             #161F33;

    --btn-secondary-bg:    #161F33;
    --btn-secondary-color: #F1F5F9;
    --btn-secondary-hover-bg: rgba(196, 30, 58, 0.1);

    --testimonial-color:   #E2E8F0;
    --quote-mark-opacity:  0.3;

    --gradient-text:       linear-gradient(135deg, var(--pomegranate-bright), var(--pomegranate-light), var(--seed-gold-light));
    --text-glow-shadow:    0 0 30px rgba(196, 30, 58, 0.4);
    --feature-icon-bg:     linear-gradient(135deg, rgba(255, 107, 122, 0.25), rgba(196, 30, 58, 0.15));
    --global-icon-color:   var(--seed-gold-light);
    --global-icon-bg:      linear-gradient(135deg, rgba(212, 163, 115, 0.3), rgba(255, 107, 122, 0.12));
    --gold-text:           var(--seed-gold-light);
    --city-dot:            var(--seed-gold-light);
    --city-dot-night:      #7C8BC0;
    --hero-img-filter:     drop-shadow(0 0 60px rgba(196, 30, 58, 0.3));
    --hero-glow-bg:        radial-gradient(circle, rgba(196, 30, 58, 0.25), transparent 70%);
    --dot-inactive:        #94A3B8;
    --error-color:         #F87171;

    --theme-icon-sun:      inline-flex;
    --theme-icon-moon:     none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --text-primary:        #F1F5F9;
  --text-secondary:      #CBD5E1;
  --text-accent:         var(--pomegranate-light);
  --text-muted:          #94A3B8;

  --bg-primary:          #0B1120;
  --bg-surface:          #131B2E;
  --bg-elevated:         #1B2438;

  --section-tint:        none;
  --stats-tint:          linear-gradient(180deg, var(--bg-surface), var(--bg-primary));

  --card-bg:             #161F33;
  --card-border:         #263049;

  --glass-bg:            rgba(22, 31, 51, 0.7);
  --glass-border:        rgba(226, 232, 240, 0.1);
  --glass-highlight:     rgba(255, 107, 122, 0.08);

  --shadow-glow:    0 0 40px rgba(196, 30, 58, 0.3);
  --shadow-glow-sm: 0 0 20px rgba(196, 30, 58, 0.2);
  --shadow-glow-lg: 0 0 80px rgba(196, 30, 58, 0.4);
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-elevated:0 16px 48px rgba(0, 0, 0, 0.45);

  --nav-bg:              rgba(11, 17, 32, 0.85);
  --nav-border:          rgba(226, 232, 240, 0.08);

  --hero-radial-1:       rgba(196, 30, 58, 0.18);
  --hero-radial-2:       rgba(155, 27, 48, 0.12);
  --hero-radial-3:       rgba(212, 163, 115, 0.08);

  --divider-fill:        #131B2E;

  --cta-bg-from:         #131B2E;
  --cta-bg-to:           #1B2438;
  --cta-radial-1:        rgba(196, 30, 58, 0.15);
  --cta-radial-2:        rgba(212, 163, 115, 0.1);

  --footer-bg:           #0B1120;
  --footer-border:       rgba(226, 232, 240, 0.08);

  --seed-opacity:        0.7;
  --seed-line-opacity:   0.05;

  --stat-bg:             #161F33;

  --btn-secondary-bg:    #161F33;
  --btn-secondary-color: #F1F5F9;
  --btn-secondary-hover-bg: rgba(196, 30, 58, 0.1);

  --testimonial-color:   #E2E8F0;
  --quote-mark-opacity:  0.3;

  --gradient-text:       linear-gradient(135deg, var(--pomegranate-bright), var(--pomegranate-light), var(--seed-gold-light));
  --text-glow-shadow:    0 0 30px rgba(196, 30, 58, 0.4);
  --feature-icon-bg:     linear-gradient(135deg, rgba(255, 107, 122, 0.25), rgba(196, 30, 58, 0.15));
  --global-icon-color:   var(--seed-gold-light);
  --global-icon-bg:      linear-gradient(135deg, rgba(212, 163, 115, 0.3), rgba(255, 107, 122, 0.12));
  --gold-text:           var(--seed-gold-light);
  --city-dot:            var(--seed-gold-light);
  --city-dot-night:      #7C8BC0;
  --hero-img-filter:     drop-shadow(0 0 60px rgba(196, 30, 58, 0.3));
  --hero-glow-bg:        radial-gradient(circle, rgba(196, 30, 58, 0.25), transparent 70%);
  --dot-inactive:        #94A3B8;
  --error-color:         #F87171;

  --theme-icon-sun:      inline-flex;
  --theme-icon-moon:     none;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Native anchor scrolling clears the fixed navbar (replaces JS offset math) */
  scroll-padding-top: 5.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  overflow-x: hidden;
  transition: background var(--duration-base), color var(--duration-base);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

[hidden] {
  display: none !important;
}

/* Kill the 300ms double-tap-zoom delay on interactive elements */
a, button, input {
  touch-action: manipulation;
}

/* ---------- Focus States (keyboard navigation) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.testimonial-dot:focus-visible {
  outline: 2px solid var(--pomegranate-core);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Reduced Motion ---------- */
@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;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400; /* Calistoga is a single-weight display face */
  line-height: 1.15;
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

h1, h2 {
  text-wrap: balance;
}

::selection {
  background: var(--pomegranate-core);
  color: #FFFFFF;
}

h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl)); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h4 { font-size: var(--text-xl); }

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-glow {
  text-shadow: var(--text-glow-shadow);
}

/* ---------- Layout (Spacious & Modern) ---------- */
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

.section {
  padding: 7rem 0;
  position: relative;
  scroll-margin-top: 6rem;
}

/* Below-the-fold sections skip layout/paint until scrolled near — big
   first-render + scroll-perf win on this animation-heavy page. */
.features,
.stats,
.platforms,
.global,
.industries,
.testimonials,
.cta-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* ---------- Skip Link ---------- */
.skip-link {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 10001;
  padding: var(--space-sm) var(--space-lg);
  background: var(--pomegranate-core);
  color: #FFFFFF;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-elevated);
  transform: translateY(calc(-100% - var(--space-xl)));
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 2px;
}

/* ---------- Scroll Progress Bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1100;
  background: linear-gradient(90deg, var(--pomegranate-core), var(--pomegranate-glow), var(--seed-gold-light));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
/* ---------- Navigation ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-md) 0;
  transition: background var(--duration-base), backdrop-filter var(--duration-base);
}

.navbar.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--nav-border);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
}

.nav-brand svg,
.footer-brand-name svg {
  color: var(--text-accent);
  flex-shrink: 0;
}

.nav-brand svg {
  width: 32px;
  height: 32px;
}

.nav-brand-rummaan {
  color: var(--text-accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--duration-fast);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--pomegranate-core);
  transition: width var(--duration-base) var(--ease-out-expo);
  border-radius: var(--radius-full);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text-primary);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  width: 100%;
}

/* Scrollspy — the section currently in view keeps its underline lit */
.nav-links a.active {
  color: var(--text-primary);
}

.nav-links a.active::after {
  width: 100%;
}

.nav-cta {
  padding: var(--space-sm) var(--space-lg) !important;
  background: linear-gradient(135deg, var(--pomegranate-glow), var(--pomegranate-core)) !important;
  border-radius: var(--radius-full) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) !important;
}

.nav-cta:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-glow-sm);
}

.nav-cta::after {
  display: none !important;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Theme toggle — shows the icon of the theme it will switch TO */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: color var(--duration-fast),
              background var(--duration-base),
              transform var(--duration-base) var(--ease-spring);
}

.theme-toggle:hover {
  color: var(--text-primary);
  background: var(--btn-secondary-hover-bg);
  transform: rotate(15deg);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-sun  { display: var(--theme-icon-sun); }
.theme-toggle .icon-moon { display: var(--theme-icon-moon); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  border-radius: var(--radius-full);
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out-expo),
              opacity var(--duration-fast);
}

/* Hamburger → X morph, driven by the aria state itself */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100dvh; /* mobile URL bar-aware */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}

.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, var(--hero-radial-1), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 80%, var(--hero-radial-2), transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 90%, var(--hero-radial-3), transparent 50%);
  pointer-events: none;
}

#seed-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
}

/* Grid items default to min-width:auto, which lets a wide image/heading
   block the track from shrinking below its content size and blow out the
   layout horizontally — min-width:0 lets the track (and text) wrap/shrink
   to the actual available column width. */
.hero-content,
.hero-image {
  min-width: 0;
}

.hero-content {
  max-width: 600px;
}

.hero h1 {
  outline: none; /* receives programmatic focus */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-accent);
  margin-bottom: var(--space-xl);
  backdrop-filter: blur(10px);
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--pomegranate-bright);
  border-radius: 50%;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232, 56, 79, 0.6); }
  50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(232, 56, 79, 0); }
}

.hero h1 {
  margin-bottom: var(--space-lg);
}

.hero-subtitle {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  max-width: 520px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--pomegranate-glow), var(--pomegranate-core));
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base);
  box-shadow: var(--shadow-glow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-2xl);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--btn-secondary-color);
  background: var(--btn-secondary-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-spring),
              border-color var(--duration-base),
              background var(--duration-base),
              box-shadow var(--duration-base);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--pomegranate-core);
  background: var(--btn-secondary-hover-bg);
}

.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.hero-image picture {
  display: block;
  width: 100%;
  min-width: 0;
}

.hero-image img {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-2xl);
  filter: var(--hero-img-filter);
  animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hero-image-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--hero-glow-bg);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* ---------- Section Divider ---------- */
.section-divider {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.section-divider svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.section-divider svg path {
  fill: var(--divider-fill);
}

/* ---------- Features ---------- */
.features {
  background-color: var(--bg-surface);
  background-image: var(--section-tint);
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 4.5rem;
}

.section-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  margin: 0.75rem auto 0;
  background: linear-gradient(90deg, var(--pomegranate-core), var(--seed-gold-light));
  border-radius: var(--radius-full);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-md);
}

.section-label-line {
  width: 28px;
  height: 2px;
  background: var(--pomegranate-core);
  border-radius: var(--radius-full);
}

.section-description {
  color: var(--text-secondary);
  font-size: 1.15rem;
  margin-top: 1rem;
  line-height: 1.75;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  align-items: stretch;
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.25rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-out-expo),
              border-color var(--duration-base),
              box-shadow var(--duration-base);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pomegranate-core), transparent);
  opacity: 0;
  transition: opacity var(--duration-base);
}

.feature-card:hover,
.feature-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(196, 30, 58, 0.45);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 0 25px rgba(196, 30, 58, 0.12);
  outline: none;
}

.feature-card:hover::before,
.feature-card:focus-visible::before {
  opacity: 1;
}

.feature-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--feature-icon-bg);
  border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
  color: var(--pomegranate-core);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-spring),
              background var(--duration-base);
}

.feature-card:hover .feature-icon,
.feature-card:focus-visible .feature-icon {
  transform: scale(1.1) rotate(-3deg);
  background: linear-gradient(135deg, rgba(255, 107, 122, 0.25), rgba(196, 30, 58, 0.15));
}

.feature-icon svg {
  width: 30px;
  height: 30px;
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- Stats ---------- */
.stats {
  background-color: var(--bg-primary);
  background-image: var(--stats-tint);
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.stat-item {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--stat-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base);
}

.stat-item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ---------- Platforms ---------- */
.platforms {
  background: var(--bg-primary);
  text-align: center;
}

.platforms-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
}

.platform-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: 2.25rem 2.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: transform var(--duration-base) var(--ease-spring),
              border-color var(--duration-base),
              box-shadow var(--duration-base);
  min-width: 160px;
}

.platform-badge:hover,
.platform-badge:focus-visible {
  transform: translateY(-6px);
  border-color: var(--pomegranate-core);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 0 25px rgba(196, 30, 58, 0.08);
}

.platform-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.platform-icon svg {
  width: 100%;
  height: 100%;
}

.platform-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
}

.platform-soon {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

/* ---------- Global by Design ---------- */
.global {
  background: var(--bg-primary);
}

.global-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  margin-bottom: 4rem;
  align-items: stretch;
}

.global-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2.25rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-out-expo),
              border-color var(--duration-base),
              box-shadow var(--duration-base);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.global-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--seed-gold-light), transparent);
  opacity: 0;
  transition: opacity var(--duration-base);
}

.global-card:hover,
.global-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(212, 163, 115, 0.45);
  box-shadow: var(--shadow-card), 0 0 20px rgba(212, 163, 115, 0.15);
  outline: none;
}

.global-card:hover::before,
.global-card:focus-visible::before {
  opacity: 1;
}

.global-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--global-icon-bg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  color: var(--global-icon-color);
  flex-shrink: 0;
}

.global-card-icon svg {
  width: 28px;
  height: 28px;
}

.global-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

.global-card p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Marquees wrapper — hosts the shared pause/play control (WCAG 2.2.2:
   auto-moving content needs an explicit user control, hover isn't enough) */
.marquees {
  position: relative;
}

.marquee-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  transition: color var(--duration-fast),
              border-color var(--duration-base),
              transform var(--duration-base) var(--ease-spring);
}

.marquee-toggle:hover {
  color: var(--pomegranate-core);
  border-color: rgba(196, 30, 58, 0.3);
  transform: translateY(-50%) scale(1.08);
}

.marquee-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

.marquee-toggle svg {
  width: 16px;
  height: 16px;
}

.marquee-toggle .icon-play { display: none; }

.marquees.paused .marquee-track {
  animation-play-state: paused;
}

.marquees.paused .marquee-toggle .icon-play  { display: inline; }
.marquees.paused .marquee-toggle .icon-pause { display: none; }

/* Language Marquee */
.languages-marquee {
  overflow: hidden;
  padding: var(--space-lg) 0;
  position: relative;
}

.languages-marquee::before,
.languages-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.languages-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-primary), transparent);
}

.languages-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-primary), transparent);
}

.marquee-track {
  display: flex;
  gap: var(--space-xl);
  animation: marqueeScroll 40s linear infinite;
  width: max-content;
}

.marquee-track > span {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: color var(--duration-fast);
  text-align: center;
}

/* Pause both marquees on hover so the chips are readable */
.languages-marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Language chip: native greeting speaks, language name whispers */
.marquee-greeting {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.marquee-lang-name {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Cities × currencies marquee — second row, opposite drift, live local time */
.marquee-cities {
  padding-top: 0;
}

.marquee-cities .marquee-track {
  animation-direction: reverse;
  animation-duration: 52s;
}

.marquee-cities .marquee-track > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
}

.marquee-cities .marquee-currency {
  color: var(--gold-text);
  font-weight: 600;
}

/* Day/night pulse: gold while the city is awake, indigo while it sleeps */
.city-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--city-dot);
  flex-shrink: 0;
}

.is-night .city-dot {
  background: var(--city-dot-night);
}

.marquee-time {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Global-card soul line — the human vignette under each capability */
.global-soul {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--gold-text);
  margin-top: var(--space-md);
  line-height: 1.5;
}

/* ---------- Industries ---------- */
.industries {
  background-color: var(--bg-surface);
  background-image: var(--section-tint);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  align-items: stretch;
}

.industry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.75rem 2.25rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  text-align: center;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-spring),
              border-color var(--duration-base),
              box-shadow var(--duration-base);
}

.industry-card:hover,
.industry-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(196, 30, 58, 0.45);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 0 25px rgba(196, 30, 58, 0.12);
  outline: none;
}

.industry-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1.5rem;
  color: var(--pomegranate-core);
}

.industry-icon svg {
  width: 100%;
  height: 100%;
}

.industry-card h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.industry-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--bg-primary);
}

.testimonials-carousel {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}

.testimonial-viewport {
  overflow: hidden;
  cursor: grab;
}

.testimonial-viewport.dragging {
  cursor: grabbing;
}

.testimonial-track {
  display: flex;
  transition: transform var(--duration-slower) var(--ease-out-expo);
  touch-action: pan-y;
}

.testimonial-track.dragging {
  transition: none;
  user-select: none;
  -webkit-user-select: none;
}

.testimonial-slide {
  min-width: 100%;
  padding: var(--space-2xl) calc(var(--space-2xl) + var(--space-md));
  text-align: center;
}

.testimonial-quote {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-style: italic;
  color: var(--testimonial-color);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  position: relative;
  padding-top: 56px; /* clears the decorative quote mark above the text */
}

.testimonial-quote::before {
  content: '"';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 80px;
  color: var(--pomegranate-core);
  opacity: var(--quote-mark-opacity);
  line-height: 1;
}

.testimonial-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.testimonial-attribution::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--seed-gold-light);
  border-radius: var(--radius-full);
}

/* Prev/next arrows — full 44px touch targets */
.testimonial-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  box-shadow: var(--shadow-card);
  transition: color var(--duration-fast),
              border-color var(--duration-base),
              transform var(--duration-base) var(--ease-spring);
}

.testimonial-nav:hover {
  color: var(--pomegranate-core);
  border-color: rgba(196, 30, 58, 0.3);
  transform: translateY(-50%) scale(1.08);
}

.testimonial-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.testimonial-nav svg {
  width: 18px;
  height: 18px;
}

.testimonial-nav.prev { left: 0; }
.testimonial-nav.next { right: 0; }

.testimonial-dots {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}

/* Each dot is a 44px touch target with a 10px visible dot inside */
.testimonial-dot {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.testimonial-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-inactive);
  transition: background var(--duration-base), transform var(--duration-base);
}

.testimonial-dot:hover::before {
  background: var(--pomegranate-core);
}

.testimonial-dot.active::before {
  background: var(--pomegranate-core);
  transform: scale(1.3);
}

/* ---------- CTA Section ---------- */
.cta-section {
  background: linear-gradient(135deg, var(--cta-bg-from), var(--cta-bg-to));
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 20% 50%, var(--cta-radial-1), transparent),
    radial-gradient(ellipse 50% 50% at 80% 50%, var(--cta-radial-2), transparent);
  pointer-events: none;
}

.cta-content {
  position: relative;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  margin-bottom: var(--space-lg);
}

.cta-content p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2xl);
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cta-secondary-row {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.cta-secondary-row .btn-secondary {
  font-size: var(--text-sm);
  padding: var(--space-sm) var(--space-lg);
}

.cta-note {
  margin-top: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.footer-brand {
  max-width: 300px;
}

.footer-brand-name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: var(--space-md);
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.footer-column h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.footer-column a {
  display: block;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: var(--space-xs) 0;
  transition: color var(--duration-fast);
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--text-accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--footer-border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.footer-arabic {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---------- Back to Top ---------- */
.back-to-top {
  position: fixed;
  right: calc(var(--space-lg) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  z-index: 1050;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--duration-base),
              transform var(--duration-base) var(--ease-out-expo),
              visibility var(--duration-base),
              color var(--duration-fast),
              border-color var(--duration-base);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  color: var(--pomegranate-core);
  border-color: rgba(196, 30, 58, 0.3);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* ---------- Legal / Policy Page ---------- */
.legal-main {
  padding: calc(80px + var(--space-3xl)) 0 var(--space-4xl);
  min-height: 70vh;
  min-height: 70dvh;
}

.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--duration-fast);
}

.legal-back:hover,
.legal-back:focus-visible {
  color: var(--pomegranate-core);
}

.legal-back svg {
  width: 16px;
  height: 16px;
}

.legal-container h1 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  margin-bottom: var(--space-sm);
}

.legal-updated {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-2xl);
}

.legal-container h2 {
  font-size: var(--text-2xl);
  margin: var(--space-2xl) 0 var(--space-md);
}

.legal-container p {
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.75;
}

.legal-container ul {
  list-style: disc;
  padding-left: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.legal-container li {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

.legal-container b,
.legal-container strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-footer {
  border-top: 1px solid var(--footer-border);
  background: var(--footer-bg);
  padding: var(--space-xl) 0;
}

.legal-footer .footer-bottom {
  border-top: none;
  padding-top: 0;
}

/* ---------- Scroll Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slower) var(--ease-out-expo),
              transform var(--duration-slower) var(--ease-out-expo);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
.reveal-delay-6 { transition-delay: 600ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
  }

  .hero-subtitle {
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-image {
    order: -1;
  }

  .hero-image img {
    max-width: 400px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .global-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}

@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--space-xl);
    border-bottom: 1px solid var(--nav-border);
    gap: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out-expo),
                transform var(--duration-base) var(--ease-out-expo),
                visibility var(--duration-base);
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-toggle {
    display: flex;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .global-grid {
    grid-template-columns: 1fr;
  }

  .industries-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-image img {
    max-width: 300px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .platforms-row {
    gap: var(--space-md);
  }

  .platform-badge {
    min-width: 100px;
    padding: var(--space-md) var(--space-lg);
  }

  .testimonial-slide {
    padding: var(--space-2xl) var(--space-2xl);
  }

  .back-to-top {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   Demos Showcase Section
   Map demo-section tokens to the pomegranate design system so cards render
   correctly instead of falling back to browser defaults.
   ========================================================================== */
.demos-section {
  position: relative;
  background: var(--bg-surface);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.demos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.demo-preview-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform var(--duration-base) var(--ease-spring),
              border-color var(--duration-base),
              box-shadow var(--duration-base);
  position: relative;
  overflow: hidden;
}

.demo-preview-card:hover {
  transform: translateY(-6px);
  border-color: var(--pomegranate-core);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 0 25px rgba(196, 30, 58, 0.1);
}

.demo-preview-card.featured-demo {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(147, 51, 234, 0.08) 100%);
  border-color: rgba(2, 132, 199, 0.3);
}

.demo-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-accent);
  margin-bottom: var(--space-sm);
}

.demo-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-card-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.demo-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-md);
}

.demo-tag-pill {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-primary);
  border: 1px solid var(--card-border);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.demo-card-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  transition: color var(--duration-fast);
}

.demo-preview-card:hover .demo-card-link {
  color: var(--pomegranate-bright);
}

.demos-hub-cta {
  text-align: center;
  margin-top: var(--space-3xl);
}

/* ==========================================================================
   DOWNLOADS PAGE (downloads.html)
   --------------------------------------------------------------------------
   Token-driven like the rest of the sheet: every colour resolves through the
   :root / [data-theme="dark"] variables above, so the page themes itself with
   no dark-mode-specific rules of its own.
   ========================================================================== */

/* Hero — the MShop app icon, not the pomegranate brand mark. This is the
   artwork users will look for on their home screen, so it is the thing to
   show on the page that installs it. */
.dl-hero {
  text-align: center;
  padding: 3rem 0 1rem;
}

.dl-app-icon {
  width: 112px;
  height: 112px;
  border-radius: 24px;
  box-shadow: var(--shadow-elevated);
  /* margin-inline, not text-align: the global `img { display: block }` rule
     above takes images out of the inline flow, so the parent's text-align
     cannot centre them. */
  margin: 0 auto 1.25rem;
}

.dl-version {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pomegranate-core);
  background: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1rem;
}

/* Grid of platform cards. auto-fit + minmax so it reflows from 3-up to 1-up
   without width media queries. */
.dl-grid {
  display: grid;
  /* Capped at 3 columns rather than auto-fitting to the container: with five
     cards a 4-wide container leaves a lone orphan on the second row. 3+2 is
     the balanced arrangement, and it still collapses to 2 and 1 on narrower
     screens. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 960px;
  margin: 2.5rem auto;
  gap: 1.25rem;
}

.dl-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--pomegranate-light);
}

/* A card for a platform we cannot ship yet must not look clickable. */
.dl-card.is-soon,
.dl-card.is-soon:hover {
  opacity: 0.62;
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--card-border);
  border-style: dashed;
}

.dl-card-icon {
  color: var(--pomegranate-core);
  margin-bottom: 0.9rem;
}

.dl-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
  color: var(--text-primary);
}

.dl-card-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

/* Pushes the button to the bottom so buttons align across cards of
   differing text length. */
.dl-card-actions {
  margin-top: auto;
  padding-top: 0.5rem;
}

.dl-card-actions .btn-primary,
.dl-card-actions .btn-secondary {
  width: 100%;
  justify-content: center;
  /* Keep two-word labels ("Download DMG") on one line -- wrapping made that
     one card taller than its siblings and broke the row's baseline. */
  white-space: nowrap;
}

.dl-soon-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

/* Per-platform install notes. macOS in particular NEEDS this: an unsigned,
   un-notarized .app is blocked by Gatekeeper with a message that reads like
   the download is corrupt, and users give up rather than right-click->Open. */
.dl-notes {
  margin: 2.5rem 0 1rem;
}

.dl-note {
  background: var(--bg-surface);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--pomegranate-core);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.dl-note h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.dl-note p,
.dl-note li {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0.3rem 0;
}

.dl-note ol {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.dl-note code {
  background: var(--glass-highlight);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}