/* ---- Mini reset (replicates the parts of Tailwind preflight this site
       was authored against - the runtime CDN compiler is gone) ---- */
    *, ::before, ::after { border-width: 0; border-style: solid; border-color: currentColor; }
    html { line-height: 1.5; -moz-tab-size: 4; tab-size: 4; }
    h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
    h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption, dl, dd, hr, pre { margin: 0; }
    ul, ol { list-style: none; margin: 0; padding: 0; }
    a { color: inherit; text-decoration: inherit; }
    b, strong { font-weight: bolder; }
    button, input, optgroup, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; line-height: inherit; }
    button, [type="button"], [type="submit"], [role="button"] { background-color: transparent; background-image: none; cursor: pointer; }
    img, svg, video, canvas, iframe { display: block; vertical-align: middle; }
    img, video { max-width: 100%; height: auto; }
    [hidden] { display: none; }
    /* ---- Static utility classes (the only Tailwind utilities ever used) ---- */
    .relative { position: relative; }
    .h-screen { height: 100vh; height: 100svh; } /* svh: stable under iOS URL-bar collapse */
    .h-full { height: 100%; }
    .w-full { width: 100%; }
    .overflow-hidden { overflow: hidden; }
    .text-base { font-size: 1rem; line-height: 1.5rem; }
    .font-semibold { font-weight: 600; }
    .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
    .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
    @font-face {
      font-family: 'Geist';
      font-style: normal;
      font-display: swap;
      font-weight: 100 900;
      src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Geist Mono';
      font-style: normal;
      font-display: swap;
      font-weight: 100 900;
      src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Geist Pixel Square';
      font-style: normal;
      font-display: swap;
      font-weight: 400;
      src: url(https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-pixel/GeistPixel-Square.woff2) format('woff2');
    }

    :root {
      --accent: #5f7fd6;
      --accent-hover: #4f6cce;
      --accent-glow: rgba(95, 127, 214, 0.42);
      --accent-dim: rgba(95, 127, 214, 0.14);
      --sparkles-color: #ffffff;
      --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
      --font-serif: 'Instrument Serif', 'Bricolage Grotesque', Georgia, serif;
      /* Brand palette - blue + beige theme with soft-flow gradients */
      --periwinkle: #5f7fd6;         /* primary blue accent */
      --periwinkle-light: #8fb0ec;   /* light blue (display accent) */
      --periwinkle-deep: #4a63c4;    /* deep blue */
      --lavender: #9aa6e8;           /* soft lavender for gradient blends */
      --cream: #f6f0cb;              /* cream base */
      --cream-soft: #faf6df;         /* lighter cream */
      --ink: #2f3560;               /* indigo ink (headings / text) */
      --accent-blue: #7cb8f5;        /* sky blue */
      --accent-blue-soft: #a9d6f7;   /* light sky */
      --accent-blue-mid: #8fa9d4;    /* medium blue */
      --accent-slate: #4e6591;       /* slate blue (shadow) */
      --accent-navy: #152437;        /* dark navy (deep shadow) */
      --accent-purple: #5f7fd6;      /* purple */
      --accent-purple-light: #a995dc;/* light purple */
      --accent-purple-deep: #4c34a8; /* deep purple */
      --accent-cream: #f6efc9;       /* cream */
      --accent-beige: #efe6cb;       /* beige */
    }

    [data-theme="light"] {
      color-scheme: light;
      --bg-page: #f1ebd9;
      --bg-elevated: #fffdf7;
      --bg-muted: #eae3ce;
      --bg-inset: #e3dbc3;
      /* blue → ivory gradient behind the hero + navbar (smooth flow) */
      --hero-bg: linear-gradient(180deg, #7d96e0 0%, #9db2e6 13%, #cdd3dd 27%, #e9e6cf 47%, #f1ebd9 100%);
      /* genuine hue travel left -> right (sky blue -> periwinkle -> warm
         blush-lavender), not just one colour restated at two positions */
      --nav-drop-gradient:
        radial-gradient(80% 210% at 10% -75%, rgba(108, 168, 244, 0.92), transparent 56%),
        radial-gradient(78% 220% at 55% -85%, rgba(130, 143, 240, 0.55), transparent 60%),
        radial-gradient(85% 230% at 92% -85%, rgba(214, 160, 220, 0.85), transparent 55%),
        linear-gradient(180deg, #6a83e4 0%, #9b9bec 46%, #cfa7d8 78%, rgba(207, 167, 216, 0) 100%);
      --nav-divider-color: rgba(255, 255, 255, 0.65);
      --mesh-a: rgba(122, 150, 224, 0.14);
      --mesh-b: rgba(196, 182, 236, 0.18);
      --hero-text: #2f3560;
      --hero-text-muted: #63688f;
      --hero-outline-border: rgba(58, 58, 106, 0.28);
      --hero-outline-text: #4a4a80;
      --text-primary: #2a2a52;
      --text-secondary: #53537b;
      --text-muted: #82829e;
      --border: rgba(42, 42, 82, 0.10);
      --border-strong: rgba(42, 42, 82, 0.18);
      --nav-bg: rgba(248, 243, 205, 0.5);
      --nav-border: rgba(58, 58, 106, 0.12);
      --nav-text: #4a4a80;
      --nav-text-muted: rgba(74, 74, 128, 0.72);
      --nav-on-hero-text: #ffffff;
      --nav-on-hero-muted: rgba(255, 255, 255, 0.8);
      --nav-on-hero-cta-bg: rgba(250, 246, 223, 0.68);
      --nav-on-hero-cta-text: #4a3fa8;
      --card-bg: #fffdf7;
      --card-border: rgba(42, 42, 82, 0.10);
      --card-hover-border: rgba(95, 127, 214, 0.55);
      --pricing-bg: #f1ebd9;
      --pricing-text: #2a2a52;
      --pricing-muted: #53537b;
      --pricing-card: #fffdf7;
      --pricing-card-border: rgba(42, 42, 82, 0.10);
      --pricing-features-border: rgba(42, 42, 82, 0.10);
      --pricing-btn-bg: linear-gradient(to top, #efe7c0, #f7f1d2);
      --pricing-btn-border: rgba(58, 58, 106, 0.16);
      --pricing-btn-text: #3a3a6a;
      --pricing-grid-line: rgba(58, 58, 106, 0.08);
      --pricing-sparkle: rgba(95, 127, 214, 0.6);
      --pricing-glow-opacity: 0.3;
      --pricing-eyebrow: #5f7fd6;
      --pricing-icon: #5f7fd6;
      --pricing-check: #4a63c4;
      --pricing-badge-bg: linear-gradient(135deg, #8fb0ec, #4a63c4);
      --pricing-badge-text: #ffffff;
      --pricing-card-ring: rgba(95, 127, 214, 0.30);
      --pricing-primary-glow: rgba(95, 127, 214, 0.40);
      --pricing-decor: rgba(95, 127, 214, 0.95);
      --workflow-divider: rgba(58, 58, 106, 0.14);
      --workflow-progress-bg: rgba(58, 58, 106, 0.14);
      --workflow-progress-fill: #5f7fd6;
      --logo-fill: #5a4fb0;
      --glass-bg: rgba(248, 243, 205, 0.82);
      --sc-macbook-glow: rgba(74, 99, 196, 0.72);
      --sc-macbook-glow-core: rgba(150, 178, 235, 0.6);
      --sc-macbook-halo: rgba(74, 99, 196, 0.55);
      --glass-bg-strong: rgba(248, 243, 205, 0.94);
      --glass-border: rgba(255, 253, 240, 0.8);
      --glass-border-outer: rgba(58, 58, 106, 0.14);
      --glass-shadow: 0 10px 34px rgba(88, 74, 176, 0.16), 0 2px 8px rgba(58, 58, 106, 0.06);
      --glass-inset-top: inset 0 1px 0 rgba(255, 253, 244, 0.9);
      --glass-inset-bottom: inset 0 -1px 0 rgba(58, 58, 106, 0.08);
      --glass-liquid: rgba(255, 253, 244, 0.25);
      --glass-shine: rgba(255, 253, 244, 0.55);
      --footer-bg: #eae3ce;
      --footer-card: #fffdf7;
      --footer-label-bg: rgba(42, 42, 82, 0.07);
      --footer-social-bg: #5f7fd6;
      --footer-visual: linear-gradient(135deg, rgba(95, 127, 214, 0.6) 0%, rgba(169, 155, 232, 0.4) 52%, rgba(241, 235, 217, 0.7) 100%);
      --card-shadow: 0 2px 4px rgba(42, 42, 82, 0.04), 0 12px 32px rgba(42, 42, 82, 0.09);
      --card-shadow-hover: 0 8px 18px rgba(42, 42, 82, 0.10), 0 26px 60px rgba(60, 60, 120, 0.16);
      /* mesh/glow atmosphere - site-wide. Light mode needs noticeably richer,
         more saturated blooms and object glows than a soft wash, since that
         reads as near-invisible against a light page (no darkness for it to
         glow against) - dark mode already pops for free from its black bg. */
      --mesh-glow-1: rgba(95, 127, 214, 0.42);
      --mesh-glow-2: rgba(74, 99, 196, 0.4);
      --object-glow-strong: 0 0 34px rgba(74, 99, 196, 0.62), 0 14px 28px rgba(24, 34, 82, 0.24);
      /* roadmap atmosphere - light mode needs noticeably richer, more saturated
         blooms than the shared --mesh tokens, since a soft wash reads as
         near-invisible against a light page (no darkness for it to glow against) */
      --roadmap-glow-1: rgba(95, 127, 214, 0.42);
      --roadmap-glow-2: rgba(74, 99, 196, 0.4);
      --roadmap-road-glow: drop-shadow(0 0 46px rgba(74, 99, 196, 0.75)) drop-shadow(0 16px 30px rgba(24, 34, 82, 0.3));
      --roadmap-badge-glow: 0 0 40px rgba(74, 99, 196, 0.7), 0 14px 28px rgba(24, 34, 82, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.5);
      --roadmap-halo: rgba(74, 99, 196, 0.4);
      --roadmap-vignette: rgba(20, 30, 74, 0.14);
      --roadmap-road-c1: #8fb0ec;
      --roadmap-road-c2: #5f7fd6;
      --roadmap-road-c3: #3d55b8;
      --roadmap-badge-fill: linear-gradient(155deg, #8fb0ec, #3d55b8);
    }

    [data-theme="dark"] {
      color-scheme: dark;
      /* Indigo + matte black, with a little blue */
      --accent: #7d7bf0;
      --accent-hover: #6f6cec;
      --accent-glow: rgba(112, 108, 240, 0.5);
      --accent-dim: rgba(112, 108, 240, 0.16);
      --periwinkle: #7d7bf0;
      --periwinkle-light: #9b93f6;
      --periwinkle-deep: #5a54d6;
      --bg-page: #08070d;
      --bg-elevated: #100e1c;
      --bg-muted: #0b0a13;
      --bg-inset: #191632;
      --hero-bg: radial-gradient(120% 90% at 50% -10%, #1a1740 0%, #100d24 34%, #08070d 72%);
      /* genuine hue travel left -> right (indigo -> periwinkle -> deep
         violet-magenta), an aurora feel instead of one tone at two spots */
      --nav-drop-gradient:
        radial-gradient(78% 210% at 10% -75%, rgba(96, 100, 224, 0.48), transparent 58%),
        radial-gradient(80% 220% at 55% -85%, rgba(125, 123, 240, 0.4), transparent 62%),
        radial-gradient(85% 230% at 92% -85%, rgba(158, 84, 196, 0.44), transparent 55%),
        linear-gradient(180deg, #1c1850 0%, #221a4a 44%, #2a1a40 76%, rgba(42, 26, 64, 0) 100%);
      --nav-divider-color: rgba(155, 147, 246, 0.4);
      --mesh-a: rgba(112, 108, 240, 0.16);
      --mesh-b: rgba(90, 120, 214, 0.13);
      --hero-text: #edeafb;
      --hero-text-muted: #a7a2ce;
      --hero-outline-border: rgba(125, 123, 240, 0.32);
      --hero-outline-text: #d4cff5;
      --text-primary: #edeafb;
      --text-secondary: #aba6d2;
      --text-muted: #7b769e;
      --border: rgba(125, 123, 240, 0.12);
      --border-strong: rgba(125, 123, 240, 0.22);
      --nav-bg: rgba(12, 10, 24, 0.82);
      --nav-border: rgba(125, 123, 240, 0.14);
      --nav-text: #edeafb;
      --nav-text-muted: rgba(237, 234, 251, 0.6);
      --nav-on-hero-text: #edeafb;
      --nav-on-hero-muted: rgba(237, 234, 251, 0.64);
      --nav-on-hero-cta-bg: rgba(125, 123, 240, 0.16);
      --nav-on-hero-cta-text: #cfcbfa;
      --card-bg: rgba(125, 123, 240, 0.055);
      --card-border: rgba(125, 123, 240, 0.15);
      --card-hover-border: rgba(125, 123, 240, 0.55);
      --pricing-bg: #08070d;
      --pricing-text: #edeafb;
      --pricing-muted: #aba6d2;
      --pricing-card: linear-gradient(165deg, #17142e 0%, #0d0b1a 100%);
      --pricing-card-border: rgba(125, 123, 240, 0.16);
      --pricing-features-border: rgba(125, 123, 240, 0.18);
      --pricing-btn-bg: linear-gradient(to top, #171430, #37339a);
      --pricing-btn-border: rgba(125, 123, 240, 0.3);
      --pricing-btn-text: #ffffff;
      --pricing-grid-line: rgba(125, 123, 240, 0.16);
      --pricing-sparkle: #b7b1f8;
      --pricing-glow-opacity: 0.5;
      --pricing-eyebrow: #9b93f6;
      --pricing-icon: #9b93f6;
      --pricing-check: #9b93f6;
      --pricing-badge-bg: linear-gradient(135deg, #9b93f6, #5a54d6);
      --pricing-badge-text: #ffffff;
      --pricing-card-ring: rgba(125, 123, 240, 0.34);
      --pricing-primary-glow: rgba(112, 108, 240, 0.50);
      --pricing-decor: rgba(155, 147, 246, 0.98);
      --workflow-divider: rgba(125, 123, 240, 0.14);
      --workflow-progress-bg: rgba(125, 123, 240, 0.16);
      --workflow-progress-fill: #edeafb;
      --logo-fill: #cbc7ee;
      --glass-bg: rgba(125, 123, 240, 0.09);
      --glass-bg-strong: rgba(125, 123, 240, 0.15);
      --glass-border: rgba(155, 147, 246, 0.3);
      --glass-border-outer: rgba(125, 123, 240, 0.14);
      --glass-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(5, 4, 12, 0.4);
      --glass-inset-top: inset 0 1px 0 rgba(155, 147, 246, 0.24);
      --glass-inset-bottom: inset 0 -1px 0 rgba(125, 123, 240, 0.06);
      --glass-liquid: rgba(125, 123, 240, 0.09);
      --sc-macbook-glow: rgba(125, 123, 240, 0.85);
      --sc-macbook-glow-core: rgba(180, 172, 250, 0.7);
      --sc-macbook-halo: rgba(112, 108, 240, 0.55);
      --glass-shine: rgba(155, 147, 246, 0.18);
      --footer-bg: #08070d;
      --footer-card: #100e1c;
      --footer-label-bg: rgba(125, 123, 240, 0.08);
      --footer-social-bg: #5a54d6;
      --footer-visual: linear-gradient(135deg, rgba(26, 23, 64, 0.8) 0%, rgba(112, 108, 240, 0.34) 55%, rgba(90, 120, 214, 0.28) 100%);
      --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.28), 0 18px 44px rgba(0, 0, 0, 0.32);
      --card-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.34), 0 30px 66px rgba(10, 8, 30, 0.5);
      /* mesh/glow atmosphere - dark mode already glows fine against the near-black
         backdrop, so these just carry the existing look forward as named tokens */
      --mesh-glow-1: var(--accent-dim);
      --mesh-glow-2: var(--mesh-b);
      --object-glow-strong: 0 16px 32px var(--accent-glow);
      /* roadmap atmosphere - dark mode already glows fine against the near-black
         backdrop, so these just carry the existing look forward as named tokens */
      --roadmap-glow-1: var(--accent-dim);
      --roadmap-glow-2: var(--mesh-b);
      --roadmap-road-glow: drop-shadow(0 14px 26px var(--accent-glow));
      --roadmap-badge-glow: 0 16px 32px var(--accent-glow), inset 0 2px 0 rgba(255, 255, 255, 0.32);
      --roadmap-halo: rgba(112, 108, 240, 0.10);
      --roadmap-vignette: transparent;
      --roadmap-road-c1: var(--periwinkle-light);
      --roadmap-road-c2: var(--accent);
      --roadmap-road-c3: var(--periwinkle-deep);
      --roadmap-badge-fill: linear-gradient(155deg, var(--periwinkle-light), var(--periwinkle-deep));
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      margin: 0;
      font-family: 'Geist', 'Geist Sans', system-ui, sans-serif;
      background: var(--bg-page);
      color: var(--text-primary);
      -webkit-tap-highlight-color: transparent;
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    a, button { touch-action: manipulation; }
    /* anchor jumps land below the fixed navbar */
    section[id] { scroll-margin-top: 76px; }

    .hero-section {
      background: var(--hero-bg);
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      padding: 14px 20px 0;
      pointer-events: none;
      background: transparent;
      border: none;
    }

    /* Coloured backdrop band behind the navbar - blue in light mode, indigo in
       dark mode - giving the header a "dropped" gradient card look while at
       the top of the page. Fades out once scrolled past the hero. */
    .nav-gradient-drop {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: clamp(100px, 11.5vw, 120px);
      pointer-events: none;
      background: var(--nav-drop-gradient);
      opacity: 1;
      z-index: 0;
      transition: opacity 0.35s cubic-bezier(0.26, 1, 0.3, 1);
    }
    .site-header.nav-past-hero .nav-gradient-drop { opacity: 0; }

    /* Thin full-width rule under the navbar (like the reference) */
    .nav-divider {
      position: absolute;
      left: 0;
      right: 0;
      top: clamp(88px, 11.5vw, 72px);
      height: 1px;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, var(--nav-divider-color) 15%, var(--nav-divider-color) 85%, transparent);
      opacity: 1;
      transition: opacity 0.45s ease;
    }
    .site-header.nav-past-hero .nav-divider { opacity: 0; }

    .site-header-shell {
      position: relative;
      z-index: 2;
      max-width: 88rem;
      margin: 0 auto;
      pointer-events: auto;
    }

    /* Pill that hugs just the nav links - hidden on mobile like before */
    .nav-glass {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: none;
      border-radius: 9999px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border-outer);
      box-shadow: var(--glass-shadow), var(--glass-inset-top), var(--glass-inset-bottom);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      transition:
        background 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (min-width: 1060px) {
      .nav-glass {
        display: inline-flex;
        align-items: center;
        justify-self: center;
        height: 52px;
        padding: 0 44px;
      }
    }

    /* dropdown trigger chevron */
    .nav-link.has-drop { display: inline-flex; align-items: center; gap: 5px; }
    .nav-link.has-drop svg { width: 11px; height: 11px; transition: transform 0.25s ease; opacity: 0.75; }
    .nav-link.has-drop[aria-expanded="true"] svg { transform: rotate(180deg); }

    /* ---- Mega menu dropdown (Product / Solutions) ---- */
    .mega-menu {
      position: absolute;
      left: 0; right: 0; top: 100%;
      margin-top: 12px;
      display: flex;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
      pointer-events: none;
      z-index: 40;
    }
    .site-header.mega-open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
    .mega-panel {
      display: none;
      /* Positioned (not flex-centered) so JS can place it directly under
         whichever trigger is hovered — see positionPanel() in home.js. */
      position: absolute;
      top: 0;
      left: 0;
      grid-template-columns: repeat(2, minmax(190px, 1fr));
      gap: 8px;
      background: var(--glass-bg-strong);
      border: 1px solid var(--glass-border-outer);
      border-radius: 20px;
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      padding: 22px;
      max-width: 500px;
      width: 92vw;
    }
    .mega-panel.active { display: grid; }
    .mega-col-label {
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--nav-text-muted); padding: 6px 12px 8px;
    }
    .mega-link {
      display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px;
      text-decoration: none; transition: background 0.2s ease;
    }
    .mega-link:hover, .mega-link:focus-visible { background: var(--accent-dim); }
    .mega-link b { font-size: 0.88rem; font-weight: 600; color: var(--nav-text); }
    .mega-link span { font-size: 0.76rem; color: var(--nav-text-muted); line-height: 1.4; }
    @media (max-width: 1059px) { .mega-menu { display: none !important; } }

    .site-header.nav-past-hero .nav-glass {
      background: var(--glass-bg-strong);
    }

    .nav-glass::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(
        180deg,
        var(--glass-border) 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.03) 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .nav-glass-shine {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        linear-gradient(180deg, var(--glass-shine) 0%, transparent 38%),
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.35), transparent 70%);
      opacity: 0.9;
    }

    .nav-glass-liquid {
      position: absolute;
      inset: -20% -10%;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0.55;
      background:
        repeating-linear-gradient(
          105deg,
          transparent 0%,
          var(--glass-liquid) 12%,
          transparent 24%,
          rgba(255, 255, 255, 0.04) 36%,
          transparent 48%
        );
      background-size: 220% 100%;
      animation: nav-liquid-flow 10s ease-in-out infinite;
      mix-blend-mode: overlay;
    }

    .nav-glass-noise {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    @keyframes nav-liquid-flow {
      0%, 100% { transform: translateX(0); background-position: 0% 50%; }
      50% { transform: translateX(-2%); background-position: 100% 50%; }
    }

    .site-header-inner {
      position: relative;
      z-index: 1;
      padding: 0 32px;
      height: 68px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 32px;
    }

    .nav-logo {
      justify-self: start;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      background: linear-gradient(180deg, var(--nav-text) 10%, var(--accent) 160%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      transition: opacity 0.35s ease;
    }

    .site-header.nav-on-hero .nav-logo {
      background: linear-gradient(180deg, var(--nav-on-hero-text) 4%, var(--accent) 220%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .site-header.nav-past-hero .nav-logo {
      background: linear-gradient(180deg, var(--nav-text) 10%, var(--accent) 160%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      position: relative;
      z-index: 1;
    }

    .nav-sep {
      width: 1px;
      height: 16px;
      background: var(--nav-text-muted);
      opacity: 0.4;
    }

    .nav-link {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--nav-text-muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .nav-link:hover { color: var(--nav-text); }

    .nav-tag {
      display: inline-flex; align-items: center; white-space: nowrap;
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
      padding: 2px 7px; border-radius: 999px; background: var(--accent-dim); color: var(--accent);
    }
    .mobile-link .nav-tag { margin-left: 8px; }

    .site-header.nav-on-hero .nav-link,
    .site-header.nav-past-hero .nav-link {
      color: var(--nav-text-muted);
    }

    .site-header.nav-on-hero .nav-link:hover,
    .site-header.nav-past-hero .nav-link:hover {
      color: var(--nav-text);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      justify-self: end;
    }

    .nav-signin {
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--nav-text-muted);
      text-decoration: none;
      padding: 8px 12px;
      transition: color 0.2s ease;
    }

    .nav-signin:hover { color: var(--nav-text); }

    .site-header.nav-on-hero .nav-signin,
    .site-header.nav-past-hero .nav-signin {
      color: var(--nav-text-muted);
    }

    .site-header.nav-on-hero .nav-signin:hover,
    .site-header.nav-past-hero .nav-signin:hover {
      color: var(--nav-text);
    }

    /* Outlined cream pill, like the reference "Book Demo" */
    .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 600;
      padding: 12px 26px;
      border-radius: 9999px;
      text-decoration: none;
      white-space: nowrap;
      flex: none;
      background: var(--nav-on-hero-cta-bg);
      color: var(--nav-on-hero-cta-text);
      border: 1px solid var(--border-strong);
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .nav-cta:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: 0 8px 22px var(--accent-glow);
    }

    .site-header.nav-on-hero .nav-cta,
    .site-header.nav-past-hero .nav-cta {
      background: var(--nav-on-hero-cta-bg);
      color: var(--nav-on-hero-cta-text);
      border-color: var(--border-strong);
    }

    .site-header.nav-on-hero .nav-cta:hover,
    .site-header.nav-past-hero .nav-cta:hover {
      border-color: var(--accent);
      box-shadow: 0 8px 22px var(--accent-glow);
    }

    .theme-toggle {
      /* Light mode is still WIP — hide the toggle so visitors can't switch to it. */
      display: none !important;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 9999px;
      border: none;
      background: transparent;
      color: var(--nav-text-muted);
      cursor: pointer;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .theme-toggle:hover {
      color: var(--nav-text);
      background: var(--accent-dim);
    }

    .site-header.nav-on-hero .theme-toggle { color: var(--nav-on-hero-muted); }
    .site-header.nav-past-hero .theme-toggle { color: var(--nav-text-muted); }

    .site-header.nav-on-hero .theme-toggle:hover { color: var(--nav-on-hero-text); background: rgba(255, 255, 255, 0.16); }
    .site-header.nav-past-hero .theme-toggle:hover { color: var(--nav-text); background: var(--accent-dim); }

    .theme-toggle svg { width: 18px; height: 18px; }
    .theme-toggle .icon-sun,
    .theme-toggle .icon-moon { display: none; }
    [data-theme="light"] .theme-toggle .icon-moon { display: block; }
    [data-theme="dark"] .theme-toggle .icon-sun { display: block; }

    /* ---- Language switcher: compact dropdown (desktop header) ---- */
    .lang-switcher { position: relative; }
    .lang-toggle {
      display: inline-flex; align-items: center; justify-content: center; gap: 3px;
      width: 36px; height: 36px; padding: 0; flex: none;
      border-radius: 9999px; border: none; background: transparent; color: var(--nav-text-muted);
      cursor: pointer; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
      transition: color 0.2s ease, background 0.2s ease;
    }
    .lang-toggle svg { width: 18px; height: 18px; }
    .lang-toggle-code { display: none; }
    .lang-toggle:hover { color: var(--nav-text); background: var(--accent-dim); }
    .site-header.nav-on-hero .lang-toggle { color: var(--nav-on-hero-muted); }
    .site-header.nav-past-hero .lang-toggle { color: var(--nav-text-muted); }
    .site-header.nav-on-hero .lang-toggle:hover { color: var(--nav-on-hero-text); background: rgba(255, 255, 255, 0.16); }
    .site-header.nav-past-hero .lang-toggle:hover { color: var(--nav-text); background: var(--accent-dim); }

    .lang-menu {
      position: absolute; top: calc(100% + 10px); right: 0; min-width: 172px;
      background: var(--glass-bg); border: 1px solid var(--card-border); border-radius: 16px;
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: 0 20px 45px rgba(20, 16, 40, 0.18); padding: 8px; display: grid; gap: 2px;
      opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 60;
    }
    .lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
    .lang-option {
      display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
      padding: 9px 12px; border-radius: 10px; border: none; background: transparent;
      color: var(--text-primary); font-size: 0.9rem; font-weight: 500; text-align: left; cursor: pointer;
      transition: background 0.15s ease;
    }
    .lang-option:hover { background: var(--accent-dim); }
    .lang-option[aria-current="true"] { color: var(--accent); font-weight: 700; }
    .lang-option .lang-code { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }

    /* ---- Language switcher: inline pill row (mobile drawer + footer) ---- */
    .lang-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .lang-pill {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 6px 12px; border-radius: 9999px; border: 1px solid var(--card-border);
      background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-weight: 600;
      cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .lang-pill:hover { border-color: var(--accent); color: var(--text-primary); }
    .lang-pill[aria-current="true"] { background: var(--accent-dim); color: var(--accent); border-color: transparent; }
    .footer-lang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .footer-lang-label { font-size: 0.8rem; color: var(--text-muted); }

    html[dir="rtl"] body { text-align: right; }
    html[dir="rtl"] .nav-menu,
    html[dir="rtl"] .nav-actions,
    html[dir="rtl"] .cta-row,
    html[dir="rtl"] .hero-btn-outline,
    html[dir="rtl"] .mobile-menu-card,
    html[dir="rtl"] .pg-footer-top,
    html[dir="rtl"] .pg-footer-bottom,
    html[dir="rtl"] .pg-footer-top nav,
    html[dir="rtl"] .footer-lang { direction: rtl; }
    html[dir="rtl"] .lang-menu { right: auto; left: 0; }
    html[dir="rtl"] .lang-option,
    html[dir="rtl"] .mobile-link,
    html[dir="rtl"] .mega-link { text-align: right; }
    html[dir="rtl"] .nav-link.has-drop svg,
    html[dir="rtl"] .mobile-link svg { transform: scaleX(-1); }
    html[dir="rtl"] .btn-arrow svg,
    html[dir="rtl"] .btn-primary .btn-arrow { transform: scaleX(-1); }
    html[dir="rtl"] .section-eyebrow,
    html[dir="rtl"] .section-title,
    html[dir="rtl"] .section-lead,
    html[dir="rtl"] .page-hero-shell,
    html[dir="rtl"] .pg-head { text-align: center; }
    html[dir="rtl"] .fbrand { text-align: right; }

    /* ---- Mobile navigation (hamburger + glass dropdown) ---- */
    .nav-burger {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 12px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      color: var(--nav-text);
      transition: color 0.2s ease, background 0.2s ease;
    }
    .nav-burger span {
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    }
    .site-header.nav-on-hero .nav-burger { color: var(--nav-on-hero-text); }
    .site-header.nav-past-hero .nav-burger { color: var(--nav-text); }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .mobile-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 10px);
      z-index: 5;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-14px) scale(0.98);
      transform-origin: top right;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
    }
    .site-header.menu-open .mobile-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mobile-menu-card {
      border-radius: 22px;
      background: var(--glass-bg-strong);
      border: 1px solid var(--glass-border-outer);
      box-shadow: 0 24px 60px rgba(12, 10, 34, 0.22);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .mobile-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 52px;
      padding: 0 18px;
      border-radius: 14px;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--nav-text);
      transition: background 0.2s ease;
    }
    .mobile-link svg { width: 16px; height: 16px; opacity: 0.45; }
    .mobile-link:hover, .mobile-link:active { background: var(--accent-dim); }
    /* "Product" row that expands in place rather than navigating directly -
       the desktop mega-menu's sub-pages otherwise have no path in on mobile. */
    .mobile-link-toggle {
      width: 100%; background: none; border: none; font: inherit; cursor: pointer;
      text-align: left; -webkit-tap-highlight-color: transparent;
    }
    .mobile-link-toggle .mobile-link-chevron { transition: transform 0.25s ease; }
    .mobile-link-toggle[aria-expanded="true"] .mobile-link-chevron { transform: rotate(90deg); }
    .mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .mobile-submenu.open { max-height: 480px; }
    .mobile-submenu-inner { padding: 2px 0 6px; display: flex; flex-direction: column; gap: 1px; }
    .mobile-sublink {
      display: block; padding: 11px 16px 11px 32px; border-radius: 12px;
      font-size: 0.94rem; font-weight: 500; color: var(--nav-text);
      opacity: 0.86; transition: background 0.2s ease, opacity 0.2s ease;
    }
    .mobile-sublink:hover, .mobile-sublink:active { background: var(--accent-dim); opacity: 1; }
    .mobile-menu-cta {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      border-radius: 16px;
      font-weight: 600;
      font-size: 1.05rem;
      background: var(--accent);
      color: #fff;
      box-shadow: 0 10px 26px var(--accent-glow);
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .mobile-menu-cta:active { transform: scale(0.985); }
    /* staggered entrance for the sheet items */
    .mobile-menu .mobile-link,
    .mobile-menu .mobile-menu-cta {
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .site-header.menu-open .mobile-link,
    .site-header.menu-open .mobile-menu-cta { opacity: 1; transform: none; }
    .site-header.menu-open .mobile-link:nth-child(1) { transition-delay: 0.04s; }
    .site-header.menu-open .mobile-link:nth-child(2) { transition-delay: 0.09s; }
    .site-header.menu-open .mobile-link:nth-child(3) { transition-delay: 0.14s; }
    .site-header.menu-open .mobile-menu-cta { transition-delay: 0.19s; }

    @media (min-width: 1060px) {
      .mobile-menu { display: none; }
    }
    @media (max-width: 767px) {
      .site-header { padding: 10px 12px 0; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
      .site-header-inner {
        display: flex;
        justify-content: space-between;
        padding: 0 4px 0 12px;
        height: 60px;
        gap: 8px;
      }
      .nav-logo { font-size: 1.2rem; }
      .nav-actions { gap: 4px; }
      .nav-cta { padding: 9px 16px; font-size: 0.9rem; }
      .theme-toggle { width: 44px; height: 44px; }
    }
    @media (max-width: 1059px) {
      .nav-burger { display: inline-flex; }
    }

    .section-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 12px;
    }

    /* Staggered word reveal: each word rises out of its own clipping mask */
    .section-title .tw {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding-bottom: 0.12em;
      margin-bottom: -0.12em;
    }
    .section-title .tw-in {
      display: inline-block;
      transform: translateY(115%);
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: calc(var(--wi, 0) * 60ms);
    }
    .section-title.t-in .tw-in { transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .section-title .tw-in { transform: none; transition: none; }
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(1.9rem, 4.2vw, 2.75rem);
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.1;
      color: var(--text-primary);
      text-wrap: balance;
      max-width: 22ch;
      margin-left: auto;
      margin-right: auto;
    }

    .section-lead {
      font-size: 1.0625rem;
      line-height: 1.65;
      color: var(--text-secondary);
      max-width: 42ch;
      margin: 16px auto 0;
    }

    .site-section {
      position: relative;
      padding: 72px 24px;
    }

    .site-section--muted { background: var(--bg-muted); }
    .site-section--elevated { background: var(--bg-elevated); }

    .section-header {
      margin: 0 auto 56px;
      max-width: 640px;
      text-align: center;
    }

    .gradient-text {
      color: var(--text-primary);
      font-weight: 600;
    }

    .glow-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
    }

    .feature-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 32px;
      transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .feature-card:hover {
      border-color: var(--card-hover-border);
      transform: translateY(-3px);
      box-shadow: 0 16px 40px rgba(78, 101, 145, 0.08);
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--accent-dim);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .feature-card h3 {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0 0 10px;
    }

    .feature-card p {
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--text-secondary);
      margin: 0;
    }

    .features-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    @media (min-width: 768px) {
      .features-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* ── Workflow section (stepper + preview) ── */
    .workflow-section {
      background: var(--bg-page);
      color: var(--text-primary);
      padding: 72px 24px;
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .workflow-section-header {
      max-width: 640px;
      margin: 0 auto 64px;
      text-align: center;
    }

    .workflow-section-header .section-eyebrow {
      color: var(--text-muted);
    }

    .workflow-section-header .section-title {
      color: var(--text-primary);
      max-width: 20ch;
    }

    .workflow-section-header .section-lead {
      color: var(--text-secondary);
    }

    .workflow-layout {
      max-width: 72rem;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
    }

    @media (min-width: 1024px) {
      .workflow-layout {
        grid-template-columns: minmax(280px, 380px) 1fr;
        gap: 64px;
      }
    }

    .workflow-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .workflow-brand-icon {
      width: 28px;
      height: 28px;
      color: var(--text-primary);
    }

    .workflow-brand h2 {
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      margin: 0;
      color: var(--text-primary);
    }

    .workflow-intro p {
      font-size: 0.9375rem;
      line-height: 1.65;
      color: var(--text-secondary);
      margin: 0 0 24px;
      max-width: 34ch;
    }

    .workflow-explore {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.875rem;
      font-weight: 500;
      padding: 10px 18px;
      border-radius: 9999px;
      border: 1px solid var(--border-strong);
      color: var(--text-primary);
      text-decoration: none;
      transition: border-color 0.2s ease, background 0.2s ease;
      margin-bottom: 40px;
    }

    .workflow-explore:hover {
      border-color: var(--card-hover-border);
      background: var(--accent-dim);
    }

    .workflow-stepper {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .workflow-step-btn {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: 1px solid transparent;
      border-radius: 14px;
      padding: 15px 18px;
      cursor: pointer;
      color: var(--text-muted);
      font-family: inherit;
      transition: color 0.25s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .workflow-step-btn:hover {
      color: var(--text-secondary);
      background: var(--accent-dim);
    }

    .workflow-step-btn.active {
      color: var(--text-primary);
      background: var(--card-bg);
      border-color: var(--card-border);
      box-shadow: var(--card-shadow);
    }

    .workflow-step-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .workflow-step-title::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.35;
      flex-shrink: 0;
      transition: opacity 0.25s ease, box-shadow 0.25s ease;
    }
    .workflow-step-btn.active .workflow-step-title::before {
      opacity: 1;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent-glow);
    }

    /* grid-rows accordion: symmetric 0fr<->1fr so the section height never
       bulges mid-transition (max-height clamping used to grow-then-shrink it) */
    .workflow-step-desc-wrap {
      display: grid;
      grid-template-rows: 0fr;
      margin-top: 0;
      transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .workflow-step-btn.active .workflow-step-desc-wrap {
      grid-template-rows: 1fr;
      margin-top: 10px;
    }
    .workflow-step-desc {
      display: block;
      min-height: 0;
      font-size: 0.875rem;
      line-height: 1.6;
      color: var(--text-secondary);
      max-width: 36ch;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .workflow-step-btn.active .workflow-step-desc { opacity: 1; }

    .workflow-step-progress {
      display: block;
      height: 1px;
      background: var(--workflow-progress-bg);
      margin-top: 16px;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .workflow-step-btn.active .workflow-step-progress {
      opacity: 1;
    }

    .workflow-step-progress::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: var(--workflow-progress-fill);
    }

    /* autoplay timer fill - runs once per active step, duration matches
       the JS auto-advance interval so the bar finishes right as the step changes */
    .workflow-step-btn.active .workflow-step-progress::after {
      animation: workflow-progress-fill 5s linear forwards;
    }

    .workflow-section.is-paused .workflow-step-btn.active .workflow-step-progress::after,
    .workflow-section:hover .workflow-step-btn.active .workflow-step-progress::after {
      animation-play-state: paused;
    }

    @keyframes workflow-progress-fill {
      from { width: 0%; }
      to { width: 100%; }
    }

    .workflow-preview {
      min-height: 420px;
    }

    @media (min-width: 1024px) {
      .workflow-preview { min-height: 520px; }
    }

    .workflow-stage {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 420px;
      border-radius: 20px;
      overflow: hidden;
      background: #141416;
    }

    @media (min-width: 1024px) {
      .workflow-stage { min-height: 520px; }
    }

    .workflow-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .workflow-bg.active {
      opacity: 1;
    }

    .workflow-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
    }

    .workflow-ui-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
      z-index: 1;
    }

    .workflow-ui {
      width: 100%;
      max-width: 420px;
      background: rgba(18, 18, 20, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      transform: translateY(12px) scale(0.98);
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    .workflow-ui.active {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .workflow-ui-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .workflow-ui-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8125rem;
      font-weight: 500;
      color: #f4f4f5;
    }

    .workflow-ui-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
    }

    .workflow-ui-body {
      padding: 16px;
    }

    .workflow-ui-label {
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(244, 244, 245, 0.45);
      margin-bottom: 12px;
    }

    .workflow-stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }

    .workflow-stat {
      padding: 12px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .workflow-stat-value {
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: #f4f4f5;
    }

    .workflow-stat-label {
      font-size: 0.6875rem;
      color: rgba(244, 244, 245, 0.45);
      margin-top: 4px;
    }

    .workflow-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.75rem;
    }

    .workflow-table th {
      text-align: left;
      font-weight: 500;
      color: rgba(244, 244, 245, 0.45);
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .workflow-table td {
      padding: 10px 0;
      color: rgba(244, 244, 245, 0.75);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .workflow-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.6875rem;
      font-weight: 500;
      padding: 3px 8px;
      border-radius: 9999px;
      background: rgba(34, 197, 94, 0.12);
      color: #4ade80;
    }

    .workflow-badge::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #4ade80;
    }

    .workflow-channel-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .workflow-channel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.8125rem;
      color: rgba(244, 244, 245, 0.85);
    }

    .workflow-channel.on {
      border-color: rgba(78, 101, 145, 0.35);
      background: rgba(78, 101, 145, 0.08);
    }

    .workflow-toggle {
      width: 36px;
      height: 20px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.12);
      position: relative;
    }

    .workflow-channel.on .workflow-toggle {
      background: var(--accent);
    }

    .workflow-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      transition: transform 0.2s ease;
    }

    .workflow-channel.on .workflow-toggle::after {
      transform: translateX(16px);
    }

    .workflow-variant-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .workflow-variant {
      aspect-ratio: 3 / 4;
      border-radius: 8px;
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .workflow-brand-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .workflow-brand-item {
      padding: 14px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px dashed rgba(255, 255, 255, 0.12);
      text-align: center;
      font-size: 0.75rem;
      color: rgba(244, 244, 245, 0.55);
    }

    .workflow-brand-item.filled {
      border-style: solid;
      border-color: rgba(78, 101, 145, 0.3);
      color: rgba(244, 244, 245, 0.85);
    }

    .site-footer {
      padding: 72px 24px 32px;
      background: var(--footer-bg);
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .footer-shell {
      max-width: 72rem;
      margin: 0 auto;
    }

    .footer-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 48px;
      padding-bottom: 56px;
    }

    @media (min-width: 1024px) {
      .footer-top {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 64px;
      }
    }

    .footer-nav-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 24px;
    }

    @media (min-width: 768px) {
      .footer-nav-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px 20px;
      }
    }

    .footer-col-label {
      display: inline-flex;
      align-items: center;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-secondary);
      background: var(--footer-label-bg);
      border-radius: 6px;
      padding: 6px 10px;
      margin-bottom: 16px;
    }

    .footer-col ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-col a {
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--text-primary);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-col a:hover { color: var(--accent); }

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

    .footer-newsletter {
      background: var(--footer-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }

    .footer-newsletter-visual {
      height: 120px;
      background: var(--footer-visual);
      background-size: cover;
      position: relative;
    }

    .footer-newsletter-visual::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.35) 1px, transparent 1px);
      background-size: 8px 8px;
      opacity: 0.5;
      mix-blend-mode: overlay;
    }

    .footer-newsletter-body {
      padding: 20px;
    }

    .footer-newsletter-body h3 {
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      margin: 0 0 14px;
    }

    .footer-newsletter-form {
      display: flex;
      gap: 8px;
    }

    .footer-newsletter-form input {
      flex: 1;
      min-width: 0;
      font-family: inherit;
      font-size: 0.875rem;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid var(--border-strong);
      background: var(--bg-page);
      color: var(--text-primary);
    }

    .footer-newsletter-form input::placeholder {
      color: var(--text-muted);
    }

    .footer-newsletter-form input:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }

    .footer-newsletter-form button {
      flex-shrink: 0;
      font-family: inherit;
      font-size: 0.875rem;
      font-weight: 500;
      padding: 10px 16px;
      border-radius: 8px;
      border: none;
      background: #18181b;
      color: #ffffff;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    [data-theme="dark"] .footer-newsletter-form button {
      background: #f4f4f5;
      color: #18181b;
    }

    .footer-newsletter-form button:hover {
      opacity: 0.88;
    }

    .footer-social {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 18px;
      border-radius: 12px;
      background: var(--footer-social-bg);
      color: #ffffff;
    }

    .footer-social > span {
      font-size: 0.9375rem;
      font-weight: 600;
    }

    .footer-social-icons {
      display: flex;
      align-items: center;
      /* wide enough that the padded ~40px tap targets on each <a> (below)
         don't overlap into their neighbor's hit area */
      gap: 26px;
    }

    .footer-social-icons a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      opacity: 0.92;
      transition: opacity 0.2s ease, transform 0.2s ease;
      /* icon itself stays 18px, but padding + matching negative margin
         grows the actual tap target to ~40px without shifting the visible
         gap between icons (gap is un-affected by a child's own padding). */
      padding: 11px;
      margin: -11px;
    }

    .footer-social-icons a:hover {
      opacity: 1;
      transform: translateY(-1px);
    }

    .footer-social-icons svg {
      width: 18px;
      height: 18px;
    }

    .footer-wordmark {
      font-family: var(--font-display);
      font-size: clamp(4rem, 16vw, 11rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 0.9;
      padding: 8px 0 40px;
      user-select: none;
      /* big watermark reads as texture, not content: fade toward the accent */
      background: linear-gradient(180deg, var(--text-primary) 12%, var(--accent) 145%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
    }

    @media (min-width: 768px) {
      .footer-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }

    .footer-copy {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin: 0;
    }

    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 20px;
    }

    .footer-legal a {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .footer-legal a:hover { color: var(--text-primary); }

    .reveal-item {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

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

    /* Purple gradient pill button (reference "Create Your First Ad") */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      background: linear-gradient(180deg, var(--periwinkle-light) 0%, var(--periwinkle-deep) 100%);
      color: #ffffff;
      border-radius: 9999px;
      box-shadow: 0 14px 34px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 0 18px 44px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    /* Circular arrow chip inside a pill button */
    .btn-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.22);
      flex-shrink: 0;
    }
    .btn-arrow svg { width: 16px; height: 16px; }

    .btn-ghost {
      border: 1px solid rgba(255,255,255,0.14);
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .btn-ghost:hover {
      border-color: rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.04);
    }

    /* pan-y (not none): native vertical scroll must stay available so the
       page can scroll once the touchmove handler below stops calling
       preventDefault() (morph complete, or scrolling back past the start) */
    #hero-root { touch-action: pan-y; }

    /* ── Hero cards ── */
    .hero-stage {
      position: relative;
      width: 100%;
      height: 100%;
      background: var(--hero-bg);
      overflow: hidden;
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ── Animated halftone canvas backdrop ──
       A precomputed dot grid (built once per theme from the source JPG) is
       redrawn each frame as ONE Path2D fill: dots breathe on a drift wave,
       the brightest twinkle, and they push away from the cursor. Only the
       active theme's image loads up front; the other is fetched when idle. */
    .hero-mesh {
      position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
    }
    .hero-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      display: block;
      opacity: 0.6;                    /* dot field sits behind copy, not competing with it */
      transition: opacity 0.24s ease;
    }
    .hero-canvas.is-switching { opacity: 0; }

    /* soft centre scrim keeps the headline + chat readable over the busy dots,
       with a faint periwinkle warmth so it ties into the brand palette */
    .hero-scrim {
      position: absolute; inset: 0;
      background:
        radial-gradient(60% 44% at 50% 46%, var(--accent-dim) 0%, transparent 60%),
        radial-gradient(120% 86% at 50% 44%, var(--bg-page) 0%, rgba(0,0,0,0) 56%);
    }

    /* ── Animated sparkles ──
       Pure CSS twinkle (opacity + scale + a touch of rotation), reusing the
       same 4-point star mark as the pricing section's decor for a consistent
       brand mark. Cheap: transform/opacity only, no JS, no per-frame cost. */
    .hero-sparkles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .hero-spark {
      position: absolute;
      left: var(--x); top: var(--y);
      width: var(--sz); height: var(--sz);
      color: var(--hero-spark-c, rgba(255, 255, 255, 0.95));
      filter: drop-shadow(0 0 6px var(--accent-glow));
      opacity: 0;
      transform: scale(0.3) rotate(0deg);
      animation: heroSparkTwinkle var(--dur, 4.2s) ease-in-out var(--delay, 0s) infinite;
    }
    [data-theme="light"] .hero-spark { --hero-spark-c: rgba(74, 63, 168, 0.75); }
    .hero-spark svg { display: block; width: 100%; height: 100%; }
    @keyframes heroSparkTwinkle {
      0%, 100% { opacity: 0; transform: scale(0.25) rotate(0deg); }
      45%      { opacity: 0.95; transform: scale(1) rotate(14deg); }
      65%      { opacity: 0.4; transform: scale(0.75) rotate(20deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-spark { animation: none; opacity: 0.55; transform: scale(0.8); }
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      perspective: 1000px;
    }

    /* ── Floating creative cards (scatter -> bottom ring ticker) ── */
    .hero-float-layer { position: absolute; inset: 0; z-index: 2; }

    .hero-card {
      --hc-w: clamp(122px, 12.5vw, 178px);
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--hc-w);
      height: calc(var(--hc-w) * 1.42);
      margin-left: calc(var(--hc-w) / -2);
      margin-top: calc(var(--hc-w) * -0.71);
      will-change: transform, opacity;
      cursor: pointer;
      pointer-events: auto;
    }
    @media (max-width: 700px) { .hero-card { --hc-w: clamp(88px, 24vw, 122px); } }

    /* idle bob lives between the JS-positioned card and the flip layer */
    .hero-card-bob {
      position: absolute; inset: 0;
      transform-style: preserve-3d;
      perspective: 780px;                 /* local depth for the flip layer */
      animation: cardBob 6s ease-in-out infinite alternate;
    }
    /* JS drives one full rotateY on this layer as the card enters the ring;
       kept separate so it never fights the CSS hover on .hero-card-inner.
       No permanent will-change: the browser promotes it while the morph runs. */
    .hero-card-flip {
      position: absolute; inset: 0;
      transform-style: preserve-3d;
    }
    .hero-card:nth-child(2n) .hero-card-bob { animation-duration: 7.2s; animation-delay: -2.4s; }
    .hero-card:nth-child(3n) .hero-card-bob { animation-duration: 8.4s; animation-delay: -4s; }
    @keyframes cardBob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }

    .hero-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* hover: card lifts + scales + glows (bob pauses so the lift reads cleanly).
       Position is set by JS on .hero-card each frame, so the hover transform
       lives on .hero-card-inner, which the script never touches. */
    .hero-card:hover { z-index: 40; }
    .hero-card:hover .hero-card-bob { animation-play-state: paused; }
    .hero-card:hover .hero-card-inner { transform: translateY(-12px) scale(1.08); }

    .hero-card-face {
      position: absolute;
      inset: 0;
      border-radius: 13px;
      overflow: hidden;
      backface-visibility: hidden;
      box-shadow:
        0 22px 50px rgba(21, 36, 55, 0.5),
        0 0 40px rgba(106, 79, 208, 0.14),
        0 0 0 1px rgba(169, 149, 220, 0.24) inset;
      transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-card:hover .hero-card-face {
      box-shadow:
        0 40px 90px rgba(21, 36, 55, 0.62),
        0 0 64px var(--accent-glow),
        0 0 0 1.5px rgba(169, 149, 220, 0.55) inset;
    }

    /* Diagonal light sheen across the front face for a glossy 3D read */
    .hero-card-front::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(
        122deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.06) 24%,
        transparent 46%,
        transparent 62%,
        rgba(124, 92, 214, 0.16) 100%
      );
      mix-blend-mode: screen;
    }

    /* Placeholder look lives on the container so it always shows behind the
       <img> - if the photo never loads, this is the permanent, clean result
       (never the browser's broken-image icon + alt text). */
    .hero-card-front {
      background: linear-gradient(150deg, var(--accent-purple-light) 0%, var(--accent-slate) 100%);
    }

    .hero-card-face video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: linear-gradient(150deg, var(--accent-purple-light) 0%, var(--accent-slate) 100%);
    }

    /* object-fit is ignored on <iframe> in every browser, so the old
       width:100%/height:100%/object-fit:cover never actually cropped
       anything - each Vimeo player just letterboxed to its own aspect
       inside the box. All source ads are true 9:16 while the card itself
       is drawn at a shallower 1:1.42, so forcing the iframe's own box to
       the video's native aspect (width 100%, height derived) guarantees
       it overflows the card vertically every time; overflow:hidden on
       .hero-card-face (above) crops that evenly top/bottom for a real
       edge-to-edge cover fill. */
    .hero-card-face iframe.hero-vid-embed {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: auto;
      aspect-ratio: 9 / 16;
      transform: translateY(-50%);
      border: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .hero-card-face iframe.hero-vid-embed.is-loaded { opacity: 1; }

    .hero-card-front::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(160deg, rgba(124, 92, 214, 0.08) 0%, rgba(21, 36, 55, 0.22) 100%);
      transition: background 0.25s;
    }

    .hero-card:hover .hero-card-front::after { background: transparent; }

    /* "AI generated" tag on each card */
    .hero-ai-tag {
      position: absolute;
      left: 8px; bottom: 8px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: var(--font-display);
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
      color: #fff;
      padding: 4px 8px 4px 7px;
      border-radius: 9999px;
      background: rgba(10, 8, 26, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .hero-ai-tag::before {
      content: '';
      width: 6px; height: 6px; border-radius: 50%;
      background: linear-gradient(135deg, var(--periwinkle-light), var(--accent));
      box-shadow: 0 0 7px var(--accent-glow);
    }

    .hero-card-back {
      transform: rotateY(180deg);
      background: linear-gradient(165deg, #241a44 0%, #101a30 100%);
      border: 1px solid rgba(169, 149, 220, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      text-align: center;
    }

    .hero-card-back p:first-child {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent-purple-light);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 4px;
    }

    .hero-card-back p:last-child {
      font-size: 11px;
      font-weight: 500;
      color: #fff;
      line-height: 1.3;
    }

    .hero-intro {
      position: absolute;
      z-index: 6;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* explicit width: left:50% otherwise collapses shrink-to-fit width on phones */
      width: min(100vw, 820px);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      pointer-events: none;
      padding: 0 20px;
    }

    .hero-intro::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 140%;
      height: 200%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at center, var(--bg-page) 0%, rgba(0, 0, 0, 0) 68%);
      opacity: 0.8;
      z-index: -1;
      pointer-events: none;
    }

    .hero-intro h1 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5.2vw, 4rem);
      font-weight: 700;
      color: var(--hero-text);
      letter-spacing: -0.02em;
      line-height: 1.04;
      max-width: none;                 /* the <br> controls the two lines */
      margin: 0 auto;
      text-shadow: 0 0 42px rgba(95, 127, 214, 0.22);
      transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* stylised serif-italic accent word for a creative-studio feel */
    .hero-intro h1 em {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0;
      padding-right: 0.06em;
      background: linear-gradient(100deg, var(--periwinkle-light) 0%, var(--accent) 62%, var(--periwinkle-deep) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-intro h1 span {
      background: linear-gradient(100deg, var(--periwinkle-light) 0%, var(--accent) 58%, var(--periwinkle-deep) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-sub {
      margin: 20px 0 0;
      font-size: clamp(1rem, 2.2vw, 1.18rem);
      color: var(--hero-text-muted);
      max-width: 52ch;                 /* keeps the refined caption on one line */
      line-height: 1.5;
      transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Chat prompt box: always light, in every theme */
    .hero-chat {
      pointer-events: auto;
      width: min(620px, 100%);
      margin-top: 54px;                       /* clear gap from the caption */
      text-align: left;
      background: #ffffff;
      border: 1.5px solid rgba(24, 24, 40, 0.10);
      border-radius: 20px;
      box-shadow: 0 26px 64px rgba(15, 14, 45, 0.28), 0 0 0 5px rgba(125, 123, 240, 0.14);
      padding: 18px 18px 14px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .hero-chat:focus-within {
      border-color: var(--accent);
      box-shadow: 0 26px 64px rgba(15, 14, 45, 0.32), 0 0 0 5px rgba(125, 123, 240, 0.2), 0 0 34px var(--accent-glow);
    }
    .hero-chat textarea {
      display: block;
      width: 100%;
      border: 0;
      outline: 0;
      resize: none;
      background: transparent;
      font: inherit;
      font-size: 1.02rem;
      color: #1b1b2e;
      min-height: 58px;
      line-height: 1.5;
    }
    .hero-chat textarea::placeholder { color: #8a8aa2; }
    .hero-chat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 6px;
    }
    .hero-suggest {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.92rem;
      font-weight: 600;
      color: #55556e;
      padding: 8px 10px;
      border-radius: 10px;
      transition: color 0.2s ease, background 0.2s ease;
    }
    .hero-suggest:hover { color: var(--accent); background: rgba(125, 123, 240, 0.12); }
    .hero-suggest svg { width: 16px; height: 16px; }

    /* ── Stylised Generate button ── */
    .hero-generate {
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: -0.005em;
      padding: 10px 12px 10px 20px;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(135deg, var(--periwinkle-light) 0%, var(--accent) 46%, var(--periwinkle-deep) 100%);
      box-shadow: 0 12px 28px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 6px rgba(30, 20, 90, 0.25);
      transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    /* gloss sheen sweeps across only on hover (no idle cost) */
    .hero-generate::before {
      content: '';
      position: absolute; top: 0; bottom: 0; left: -70%; width: 48%;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
      transform: skewX(-18deg);
      transition: left 0.6s ease;
      pointer-events: none;
    }
    .hero-generate:hover::before { left: 135%; }
    .hero-generate:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.04); box-shadow: 0 16px 36px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
    .hero-generate:active { transform: translateY(0) scale(0.99); }
    .gen-ic {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 7px;
      background: rgba(255, 255, 255, 0.2);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }
    .gen-ic svg { width: 13px; height: 13px; }

    .hero-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
      pointer-events: auto;
    }
    .hero-chip {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-secondary);
      background: var(--glass-bg);
      border: 1px solid var(--card-border);
      border-radius: 9999px;
      padding: 7px 13px;
      cursor: pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }
    .hero-chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
    /* "Suggest ideas" swaps the row to a fresh trio - each chip eases in */
    .hero-chips.chips-swap .hero-chip { animation: chipIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .hero-chips.chips-swap .hero-chip:nth-child(2) { animation-delay: 0.05s; }
    .hero-chips.chips-swap .hero-chip:nth-child(3) { animation-delay: 0.10s; }
    @keyframes chipIn { from { opacity: 0; transform: translateY(7px) scale(0.96); } to { opacity: 1; transform: none; } }

    @media (max-width: 700px) {
      .hero-chat { margin-top: 38px; padding: 14px 14px 10px; border-radius: 16px; }
      .hero-chat textarea { min-height: 46px; font-size: 0.95rem; }
      /* chips + shuffle are a desktop enhancement; on phones the static
         placeholder guides input and the row is just the Generate action */
      .hero-chips, .hero-suggest { display: none; }
      .hero-chat-row { justify-content: flex-end; }
      .hero-generate { padding: 10px 15px; font-size: 0.88rem; }
    }

    .hero-arc-content {
      position: absolute;
      top: 38%;
      left: 50%;
      z-index: 10;
      width: 90%;
      max-width: 760px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 16px;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -50%) translateY(24px);
      transition: opacity 0.6s, transform 0.6s;
    }

    /* Soft backing so the centred copy stays readable over the tunnel's
       vanishing point in both themes. */
    .hero-arc-content::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 150%;
      height: 200%;
      transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at center, var(--bg-page) 0%, rgba(0, 0, 0, 0) 66%);
      opacity: 0.78;
      z-index: -1;
      pointer-events: none;
    }

    .hero-arc-content.visible {
      opacity: 1;
      transform: translate(-50%, -50%);
      pointer-events: auto;
    }

    .hero-arc-content h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5.2vw, 3.75rem);
      font-weight: 600;
      color: var(--hero-text);
      letter-spacing: -0.01em;
      margin: 0 0 20px;
      white-space: nowrap;
      transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (max-width: 480px) {
      .hero-arc-content h2 { white-space: normal; }
    }

    .hero-arc-content h2 span {
      background: linear-gradient(100deg, var(--accent-purple) 0%, var(--accent) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-arc-content > p {
      font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
      color: var(--hero-text-muted);
      max-width: 36rem;
      line-height: 1.6;
      margin: 0;
      transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hero-arc-actions {
      margin-top: 32px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .hero-btn-outline {
      /* inline-flex (not the default inline) so a pill border on text that
         wraps to 2+ lines draws as one unified rounded box instead of a
         separate fragment per line - the latter is what breaks it visually
         on narrow screens where longer labels wrap. */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 1rem;
      font-weight: 600;
      padding: 15px 30px;
      border-radius: 9999px;
      border: 1.5px solid var(--hero-outline-border);
      color: var(--hero-outline-text);
      text-decoration: none;
      transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
    }

    .hero-btn-outline:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-1px); }

    /* ── Reusable section CTA row ── */
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 52px;
    }
    .cta-row .cta-note {
      flex-basis: 100%;
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ── Logo strip ── */
    .logos-section {
      background: var(--bg-muted);
      padding: 56px 24px;
    }

    .logos-inner {
      max-width: 72rem;
      margin: 0 auto;
      text-align: center;
    }

    .logos-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 28px;
    }

    .logos-carousel {
      position: relative;
      padding-top: 32px;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    }

    .logos-track {
      display: flex;
      width: max-content;
      animation: logos-marquee 36s linear infinite;
    }

    .logos-carousel:hover .logos-track {
      animation-play-state: paused;
    }

    .logos-set {
      display: flex;
      align-items: center;
      gap: 56px;
      padding-right: 56px;
      flex-shrink: 0;
    }

    @keyframes logos-marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .logo-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 56px;
      flex-shrink: 0;
      color: var(--logo-fill);
      opacity: 0.45;
      filter: grayscale(100%);
      transition: opacity 0.25s ease, filter 0.25s ease;
    }

    .logo-item[data-title]::after {
      content: attr(data-title);
      position: absolute;
      bottom: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: #0f172a;
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.18);
      z-index: 20;
    }

    .logo-item[data-title]:hover::after {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .logo-item:hover {
      opacity: 0.85;
      filter: grayscale(0%);
    }

    .logo-item img {
      height: 26px;
      width: auto;
      max-width: 120px;
      object-fit: contain;
    }

    .logo-item img[src*="mp_tourist"] {
      height: 64px;
      max-height: 64px;
      max-width: 180px;
    }

    .logo-item svg {
      height: 28px;
      width: auto;
      fill: #27272a;
    }

    /* ── Pricing section ── */
    .logo-item svg text { fill: var(--logo-fill); }

    /* Real brand marks include several near-black logos, so dark mode flattens
       every one to white rather than tinting - nothing drops out, and the row
       stays a single visual weight. */
    [data-theme="dark"] .logo-item img {
      filter: brightness(0) invert(1);
    }

    [data-theme="dark"] .logo-item:hover img {
      filter: brightness(0) invert(1);
    }

    /* Nori and Master are opaque artwork (mark baked onto a solid plate), so
       whiting them out would leave a blank rectangle - pass them through. */
    .logo-item img.is-solid { border-radius: 5px; }

    [data-theme="dark"] .logo-item img.is-solid,
    [data-theme="dark"] .logo-item:hover img.is-solid {
      filter: none;
    }

    /* ── Testimonials ── */
    .testimonials-section {
      background: var(--bg-page);
    }

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

    .testimonials-viewport {
      position: relative;
      min-height: 220px;
    }

    @media (min-width: 768px) {
      .testimonials-viewport { min-height: 200px; }
    }

    .testimonial-slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.55s;
    }

    .testimonial-slide.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .testimonial-quote {
      font-size: clamp(1.125rem, 2.5vw, 1.5rem);
      font-weight: 500;
      line-height: 1.55;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      margin: 0 0 28px;
      max-width: 38ch;
    }

    .testimonial-author {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .testimonial-name {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .testimonial-company {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .testimonials-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 40px;
    }

    .testimonial-dot {
      width: 8px;
      height: 8px;
      border-radius: 9999px;
      border: none;
      padding: 0;
      background: var(--border-strong);
      cursor: pointer;
      transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
    }

    .testimonial-dot:hover {
      background: var(--text-muted);
    }

    .testimonial-dot.active {
      width: 24px;
      background: var(--accent);
    }

    .pricing-wrap {
      position: relative;
      min-height: 100vh;
      background: var(--pricing-bg);
      overflow: hidden;
      padding: 72px 24px 96px;
      color: var(--pricing-text);
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .pricing-grid-bg {
      position: absolute;
      inset: 0;
      height: 384px;
      background-image:
        linear-gradient(to right, var(--pricing-grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pricing-grid-line) 1px, transparent 1px);
      background-size: 70px 80px;
      mask-image: radial-gradient(50% 50%, white, transparent);
      -webkit-mask-image: radial-gradient(50% 50%, white, transparent);
      pointer-events: none;
    }

    .pricing-sparkles {
      position: absolute;
      inset: 0;
      height: 384px;
      overflow: hidden;
      mask-image: radial-gradient(50% 50%, white, transparent 85%);
      -webkit-mask-image: radial-gradient(50% 50%, white, transparent 85%);
      pointer-events: none;
    }

    .pricing-sparkles span {
      position: absolute;
      width: 2px;
      height: 2px;
      background: var(--pricing-sparkle);
      border-radius: 50%;
      animation: sparkle-fall linear infinite;
      opacity: 0;
    }

    @keyframes sparkle-fall {
      0% { transform: translateY(-10px); opacity: 0; }
      10% { opacity: 0.8; }
      90% { opacity: 0.4; }
      100% { transform: translateY(400px); opacity: 0; }
    }

    .pricing-glow {
      position: absolute;
      left: -568px;
      right: -568px;
      top: -114px;
      height: 2053px;
      border-radius: 50%;
      border: 200px solid rgba(78, 101, 145, var(--pricing-glow-opacity));
      filter: blur(92px);
      pointer-events: none;
    }

    .pricing-radial {
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      width: 80%;
      height: 100%;
      background: radial-gradient(circle at center, rgba(78, 101, 145, 0.35) 0%, transparent 70%);
      opacity: 0.6;
      mix-blend-mode: multiply;
      pointer-events: none;
    }

    .pricing-header {
      position: relative;
      z-index: 10;
      text-align: center;
      max-width: 52rem;
      margin: 0 auto;
      padding-bottom: 1.5rem;
    }

    .pricing-eyebrow {
      display: inline-block;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--pricing-eyebrow);
      margin-bottom: 0.85rem;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
    }
    .pricing-wrap.in-view .pricing-eyebrow { opacity: 1; transform: translateY(0); }

    .pricing-title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 6vw, 3.6rem);
      font-weight: 700;
      line-height: 1.05;
      color: var(--pricing-text);
      margin-bottom: 1.15rem;
    }

    .pricing-title .word {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding-bottom: 0.12em;
    }

    .pricing-title .word-inner {
      display: inline-block;
      transform: translateY(115%);
      opacity: 0;
    }
    .pricing-wrap.in-view .pricing-title .word-inner {
      animation: word-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      animation-delay: var(--wd, 0s);
    }

    @keyframes word-reveal {
      from { transform: translateY(115%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    /* hand-drawn underline scribble under the highlighted word */
    .pricing-title .hl { position: relative; white-space: nowrap; }
    .pricing-title .hl svg {
      position: absolute;
      left: -3%;
      bottom: -0.18em;
      width: 106%;
      height: 0.42em;
      overflow: visible;
    }
    .pricing-title .hl svg path {
      fill: none;
      stroke: var(--pricing-eyebrow);
      stroke-width: 9;
      stroke-linecap: round;
      stroke-dasharray: var(--len, 400);
      stroke-dashoffset: var(--len, 400);
      opacity: 0.9;
    }
    .pricing-wrap.in-view .pricing-title .hl svg path {
      animation: hl-draw 0.7s ease 0.72s forwards;
    }
    @keyframes hl-draw { to { stroke-dashoffset: 0; } }

    .pricing-sub {
      color: var(--pricing-muted);
      font-size: clamp(1rem, 1.4vw, 1.15rem);
      margin: 0 auto 1.6rem;
      max-width: 44ch;
      opacity: 0;
      transform: translateY(-16px);
      filter: blur(8px);
      transition: opacity 0.5s 0.12s, transform 0.5s 0.12s, filter 0.5s 0.12s;
    }
    .pricing-wrap.in-view .pricing-sub {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }

    /* floating themed decorations (star + sparkle), reused from image ref but tinted to theme */
    .pricing-decor {
      position: absolute;
      z-index: 6;
      pointer-events: none;
      color: var(--pricing-decor);
      opacity: 0;
      transform: scale(0.4);
      transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
    }
    .pricing-wrap.in-view .pricing-decor { opacity: 1; transform: scale(1); }
    .pricing-decor svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 16px var(--accent-glow)); }
    .pricing-decor.d-left  { top: 132px; left: clamp(12px, 10vw, 170px); width: clamp(34px, 4vw, 56px); height: clamp(34px, 4vw, 56px); animation: decor-float-a 6s ease-in-out infinite; transition-delay: 0.28s; }
    .pricing-decor.d-right { top: 104px; right: clamp(12px, 10vw, 170px); width: clamp(42px, 4.8vw, 70px); height: clamp(42px, 4.8vw, 70px); animation: decor-float-b 7.5s ease-in-out infinite; transition-delay: 0.38s; }
    @keyframes decor-float-a { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
    @keyframes decor-float-b { 0%,100% { translate: 0 0; } 50% { translate: 0 -20px; } }

    .pricing-cards {
      position: relative;
      z-index: 10;
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      max-width: 66rem;
      margin: 0 auto;
      padding-top: 2rem;
    }

    @media (min-width: 768px) {
      .pricing-cards { grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
    }

    .price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      /* min-width:0 stops this grid item from inflating the shared 1fr
         track to fit the wide comparison <table> nested inside it. width:
         100% makes that a definite size rather than relying on grid
         "stretch", because a <table>'s own intrinsic-sizing algorithm can
         otherwise still win out over an auto-width flex/grid item on some
         engines, even with min-width:0 set all the way down the chain. */
      min-width: 0;
      width: 100%;
      border-radius: 22px;
      border: 1.5px solid var(--pricing-card-border);
      background: var(--pricing-card);
      color: var(--pricing-text);
      padding: 30px 26px 28px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 44px rgba(10, 8, 24, 0.26);
      opacity: 0;
      transform: translateY(30px) rotate(var(--tilt, 0deg)) scale(0.95);
      filter: blur(8px);
      transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
                  transform 0.55s cubic-bezier(0.16,1,0.3,1),
                  filter 0.55s cubic-bezier(0.16,1,0.3,1),
                  box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .price-card:nth-child(1) { --tilt: -1.5deg; }
    .price-card:nth-child(2) { --tilt: 0deg; }
    .price-card:nth-child(3) { --tilt: 1.5deg; }
    /* full-width comparison/vs cards sit alone in the grid row and pick up
       nth-child(1)'s tilt by accident - keep them level at rest. The
       pointer-driven hover tilt (rotateX/rotateY via inline style) and the
       hover glow are untouched, this only affects the static resting angle. */
    .price-card.price-compare-card, .price-card.price-vs-card { --tilt: 0deg; }

    .pricing-wrap.in-view .price-card {
      opacity: 1;
      transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1);
      filter: blur(0);
    }
    .pricing-wrap.in-view .price-card:nth-child(1) { transition-delay: 0.14s; }
    .pricing-wrap.in-view .price-card:nth-child(2) { transition-delay: 0.26s; }
    .pricing-wrap.in-view .price-card:nth-child(3) { transition-delay: 0.38s; }

    .price-card:hover {
      transform: translateY(-6px) rotate(0deg) scale(1.015);
      border-color: var(--pricing-card-ring);
      box-shadow: 0 26px 60px rgba(10, 8, 24, 0.4), 0 0 46px var(--accent-glow);
    }

    .price-card.popular {
      border-color: var(--pricing-card-ring);
      box-shadow: 0 22px 58px rgba(10, 8, 24, 0.4), 0 0 60px var(--pricing-primary-glow);
      z-index: 2;
    }

    .price-badge {
      position: absolute;
      top: -14px;
      right: -8px;
      left: auto;
      transform: rotate(8deg);
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      background: var(--pricing-badge-bg);
      color: var(--pricing-badge-text);
      padding: 7px 16px;
      border-radius: 9999px;
      white-space: nowrap;
      box-shadow: 0 8px 20px var(--pricing-primary-glow);
      z-index: 5;
    }
    .pricing-wrap.in-view .price-badge {
      animation: badge-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.5s backwards;
    }
    @keyframes badge-pop {
      from { opacity: 0; transform: rotate(8deg) scale(0.3); }
      to   { opacity: 1; transform: rotate(8deg) scale(1); }
    }

    .price-icon {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1.5px solid var(--pricing-icon);
      color: var(--pricing-icon);
      background: var(--accent-dim);
      margin-bottom: 20px;
    }
    .price-icon svg { width: 24px; height: 24px; }

    .price-card-header { text-align: left; }

    .price-card-name {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--pricing-text);
    }

    .price-desc {
      font-size: 0.9rem;
      color: var(--pricing-muted);
      margin: 0 0 18px;
      line-height: 1.5;
      max-width: 26ch;
    }

    .price-amount {
      display: flex;
      align-items: baseline;
      font-family: var(--font-display);
      font-size: 2.6rem;
      font-weight: 700;
      color: var(--pricing-text);
      margin-bottom: 4px;
    }

    .price-amount .period {
      font-size: 1rem;
      font-weight: 400;
      color: var(--pricing-muted);
      margin-left: 8px;
    }
    .price-amount .price-value { font-variant-numeric: tabular-nums; }
    .price-sub { font-size: 0.82rem; color: var(--pricing-muted); margin: 0 0 24px; }

    .price-features { margin-bottom: 24px; }

    .price-features ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .price-features li {
      display: flex;
      align-items: center;
      gap: 11px;
      font-size: 0.92rem;
      color: var(--pricing-text);
    }

    .price-features li .feat-check {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1.5px solid var(--pricing-check);
      color: var(--pricing-check);
    }
    .price-features li .feat-check svg { width: 12px; height: 12px; }

    .price-card-body { margin-top: auto; }

    .price-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 15px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.02rem;
      border-radius: 12px;
      border: 1.5px solid var(--pricing-btn-border);
      background: var(--pricing-btn-bg);
      color: var(--pricing-btn-text);
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }

    .price-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,8,24,0.3); }

    .price-btn.primary {
      background: var(--pricing-badge-bg);
      border-color: transparent;
      color: #ffffff;
      box-shadow: 0 10px 30px var(--pricing-primary-glow);
    }
    .price-btn.primary:hover { box-shadow: 0 14px 38px var(--pricing-primary-glow); filter: brightness(1.06); }

    /* ---- Pricing: credit-to-video comparison slider ---- */
    .price-compare-card { max-width: 780px; margin: 0 auto; }
    .price-compare-card .price-card-header { text-align: center; }
    .price-compare-card .price-desc { max-width: 48ch; margin-left: auto; margin-right: auto; }

    .pc-slider { margin: 8px 0 32px; }
    .pc-slider-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .pc-slider-label { font-size: 0.9rem; font-weight: 600; color: var(--pricing-muted); }
    .pc-slider-value { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--pricing-text); font-variant-numeric: tabular-nums; }
    .pc-slider-value i { font-style: normal; font-weight: 600; font-size: 0.85rem; color: var(--pricing-muted); margin-left: 4px; }
    .pc-slider input[type="range"] { width: 100%; height: 6px; accent-color: var(--accent); }

    .pc-compare { display: grid; gap: 16px; margin-bottom: 24px; }
    .pc-bar-row { display: grid; grid-template-columns: 112px 1fr 88px; align-items: center; gap: 16px; }
    .pc-bar-label { font-size: 0.88rem; font-weight: 600; color: var(--pricing-text); }
    .pc-bar-row.them .pc-bar-label { color: var(--pricing-muted); }
    .pc-bar-track { position: relative; height: 16px; border-radius: 9999px; background: var(--bg-inset); overflow: hidden; }
    .pc-bar-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 9999px; width: 0%; transition: width 0.4s cubic-bezier(0.16,1,0.3,1); }
    .pc-bar-row.you .pc-bar-fill { background: var(--pricing-badge-bg); }
    .pc-bar-row.them .pc-bar-fill { background: var(--pricing-muted); opacity: 0.45; }
    .pc-bar-value { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--pricing-text); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .pc-bar-value span { font-weight: 500; font-size: 0.8rem; color: var(--pricing-muted); }

    .pc-multiplier { text-align: center; margin: 0 0 24px; font-size: 1rem; color: var(--pricing-muted); }
    .pc-multiplier b { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--pricing-eyebrow); font-variant-numeric: tabular-nums; margin-right: 8px; }

    @media (max-width: 480px) {
      .pc-bar-row { grid-template-columns: 84px 1fr 64px; gap: 10px; }
    }

    /* ---- Pricing: how we compare to other tools ---- */
    .price-vs-card { max-width: 900px; margin: 0 auto; }
    .price-vs-card .price-card-header { text-align: center; }
    .price-vs-card .price-desc { max-width: 56ch; margin-left: auto; margin-right: auto; }

    .vsb-wrap { display: grid; gap: 16px; max-width: 640px; margin: 24px auto 8px; }
    .vsb-row { display: grid; grid-template-columns: 128px 1fr 48px; align-items: center; gap: 16px; }
    .vsb-label { font-size: 0.82rem; color: var(--pricing-muted); }
    .vsb-row.you .vsb-label { color: var(--pricing-text); font-weight: 700; }
    .vsb-track { display: block; height: 8px; border-radius: 9999px; background: var(--bg-inset); overflow: hidden; }
    .vsb-fill { display: block; height: 100%; width: 0; border-radius: 9999px; background: linear-gradient(90deg, var(--periwinkle-light), var(--accent)); transition: width 1s cubic-bezier(0.16,1,0.3,1); }
    .vsb-row.rival .vsb-fill { background: var(--pricing-muted); opacity: 0.5; }
    .vsb-value { font-size: 0.84rem; font-weight: 700; color: var(--pricing-text); text-align: right; font-variant-numeric: tabular-nums; }
    .vsb-row.rival .vsb-value { color: var(--pricing-muted); }
    .vs-note { font-size: 0.78rem; color: var(--pricing-muted); margin: 16px 0 0; text-align: center; }

    /* min-width:0 needed alongside overflow-x:auto: .price-card is a column
       flex container, so width is the cross axis - the "overflow implies
       min-size:0" rule only auto-applies on a flex item's main axis, not
       cross axis, so without this the wide <table> still forces this
       wrapper (and the card around it) wider than the viewport. */
    .vs-table-wrap {
      overflow-x: auto; min-width: 0; border: 1px solid var(--pricing-card-border); border-radius: 16px;
      background: var(--pricing-card); padding: 8px 16px; margin-top: 24px;
      /* right-edge fade hints there's more table to scroll to on mobile,
         where the 6-column comparison never fits without horizontal scroll */
      mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
    }
    .vs-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
    .vs-table th, .vs-table td { padding: 16px; text-align: center; border-bottom: 1px solid var(--border); }
    .vs-scroll-hint { display: none; text-align: center; font-size: 0.74rem; color: var(--pricing-muted); margin: 10px 0 0; }
    @media (max-width: 700px) {
      .vs-table-wrap { padding: 6px 10px; }
      .vs-table { font-size: 0.78rem; }
      .vs-table th, .vs-table td { padding: 12px 10px; }
      .vs-table th:first-child, .vs-table td:first-child { min-width: 132px; }
      .vs-table th:not(:first-child), .vs-table td:not(:first-child) { min-width: 84px; }
      .vs-scroll-hint { display: block; }
    }
    .vs-table th { font-family: var(--font-display); font-weight: 600; color: var(--pricing-text); }
    .vs-table td:first-child, .vs-table th:first-child { text-align: left; color: var(--pricing-muted); }
    .vs-table td { color: var(--pricing-muted); }
    .vs-table th.you, .vs-table td.you { background: var(--accent-dim); color: var(--accent); font-weight: 700; border-radius: 10px 10px 0 0; }
    .vs-table td.you { border-radius: 0; }
    .vs-table tbody tr:last-child td.you { border-radius: 0 0 10px 10px; }
    .vs-table .yes { color: var(--accent); font-weight: 700; }
    .vs-table .no { color: var(--pricing-muted); }

    @media (prefers-reduced-motion: reduce) {
      #hero-root * { animation: none !important; transition: none !important; }
      .pricing-title .word-inner,
      .pricing-sparkles span { animation: none !important; }
      .pricing-eyebrow, .pricing-sub, .pricing-decor,
      .price-card, .pricing-title .word-inner {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
      .pricing-title .hl svg path { stroke-dashoffset: 0 !important; }
      .logos-track { animation: none; }
      .logos-carousel {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
      }
      .workflow-bg,
      .workflow-ui,
      .workflow-step-desc,
      .workflow-step-desc-wrap { transition: none !important; }
      .testimonial-slide { transition: none !important; }
      .nav-glass-liquid { animation: none; }
    }

    /* ============================================================
       Capabilities - MacBook screen -> panel -> cards
       Faithful port of the reference engine: the laptop screen warps
       via homography onto the glass, flattens into a 3-wide tiled
       panel, dissolves in (a gif can be dropped onto #sc-joinedGif),
       then the panel splits into three cards that flip to their backs
       and fan into an arc. Scroll-position driven (native sticky
       scroll - never blocks the page).
       ============================================================ */
    .scroll-cards {
      position: relative;
      --sc-mb-w: min(920px, 82vw);
      --sc-mb-ar: 804 / 405;
      --sc-card-w: clamp(210px, 22vw, 300px);
      --sc-card-h: clamp(280px, 29vw, 400px);
      --sc-card-radius: 20px;
      --sc-display: 'Bricolage Grotesque', system-ui, sans-serif;
      --sc-body: 'Geist', system-ui, sans-serif;
      /* the joined panel image tiled across the 3 card fronts - set a
         src on #sc-joinedGif (the gif you'll add) or override --sc-joined */
      --sc-joined: linear-gradient(180deg, #221f2e 0%, #15121d 100%);
      --sc-c1: linear-gradient(158deg, #F6EFDC 0%, #E4D9BC 46%, #C8BC98 100%); --sc-c1-ink: #191712;
      --sc-c2: linear-gradient(160deg, #C1D8F1 0%, #7E9EC8 46%, #3B5B8B 100%); --sc-c2-ink: #0f2036;
      --sc-c3: linear-gradient(160deg, #A891E0 0%, #6E58AC 38%, #201a30 100%); --sc-c3-ink: #ffffff;
    }

    .sc-track { position: relative; width: 100%; height: 260vh; }
    .sc-viewport { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
      display: flex; flex-direction: column; align-items: center;
      background: var(--bg-muted); transition: background-color 0.35s cubic-bezier(0.16,1,0.3,1); }

    /* CTA below the fanned cards - opacity driven by scroll progress in JS */
    .sc-cta {
      position: absolute;
      left: 50%;
      bottom: clamp(40px, 9vh, 92px);
      transform: translate(-50%, 14px);
      z-index: 8;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: max-content;
      max-width: 92vw;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s linear;
    }
    .sc-cta.sc-cta-on { pointer-events: auto; }
    @media (max-width: 560px) { .sc-cta { bottom: 28px; gap: 10px; } }

    /* reveal "stage" - theme-aware (stays light in light mode, deep in dark mode) */
    .sc-dark-layer { position: absolute; inset: 0; z-index: 1; opacity: 0; will-change: opacity;
      background:
        radial-gradient(58% 46% at 50% 8%, var(--mesh-glow-1) 0%, transparent 62%),
        radial-gradient(46% 40% at 86% 84%, var(--mesh-glow-2) 0%, transparent 58%),
        var(--bg-page); }
    .sc-dark-layer .sc-grid { position: absolute; inset: -2px;
      background-image:
        linear-gradient(var(--pricing-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--pricing-grid-line) 1px, transparent 1px);
      background-size: 46px 46px;
      -webkit-mask: radial-gradient(72% 62% at 50% 46%, #000 0%, transparent 78%);
              mask: radial-gradient(72% 62% at 50% 46%, #000 0%, transparent 78%); }

    .sc-eyebrow { position: absolute; top: 30px; left: 34px; z-index: 6; opacity: 0;
      font-family: var(--sc-body); font-weight: 600; font-size: 12px; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 9px; will-change: opacity; }
    .sc-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

    .sc-head-wrap { position: relative; width: 100%; height: 19vh; flex-shrink: 0; margin-top: 3vh; z-index: 6; }
    .sc-head { position: absolute; top: 0; left: 0; right: 0; text-align: center; padding: 0 20px; will-change: opacity, transform; }
    .sc-eyebrow-top { font-family: var(--sc-display); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px;
      background: linear-gradient(90deg, var(--periwinkle-light), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .sc-head h1 { font-family: var(--sc-display); font-weight: 600; margin: 0; font-size: clamp(23px, 3.3vw, 40px); line-height: 1.12; }
    .sc-head.sc-hero h1 { color: var(--text-primary); }
    .sc-head.sc-big { opacity: 0; } .sc-head.sc-big h1 { color: var(--periwinkle-light); }
    .sc-subhead { margin: 14px auto 0; max-width: 42ch; line-height: 1.55; font-size: clamp(13px, 1.2vw, 16px); color: var(--text-muted); }

    .sc-backdrop { position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
      width: calc(var(--sc-mb-w) * 1.35); height: 70vh; border-radius: 50%; z-index: 1;
      background: radial-gradient(50% 50% at 50% 42%, var(--sc-macbook-halo) 0%, transparent 70%);
      filter: blur(6px);
      will-change: opacity; }

    /* laptop */
    .sc-stage-mb { flex: 1; width: 100%; display: grid; place-items: start center; padding-top: 6vh; z-index: 2; }

    /* supporting copy in the four corners around the laptop (stays until the cards split).
       On big screens the callouts hug the laptop's edges (near the middle) instead of
       flying out to the far viewport corners; on medium screens they sit near the edge. */
    .sc-corner { position: absolute; z-index: 5; width: clamp(200px, 14vw, 224px);
      opacity: 0; will-change: opacity, transform; pointer-events: none; }
    .sc-corner-ic { display: inline-flex; width: 50px; height: 50px; border-radius: 15px;
      align-items: center; justify-content: center; margin-bottom: 15px;
      border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--accent);
      box-shadow: var(--object-glow-strong), inset 0 1px 0 rgba(255,255,255,0.14); }
    .sc-corner-ic svg { width: 26px; height: 26px; }
    .sc-corner-k { display: block; font-family: var(--sc-display); font-weight: 700;
      font-size: clamp(18px, 1.45vw, 22px); color: var(--text-primary); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.15; }
    .sc-corner p { margin: 0; font-family: var(--sc-body); font-size: clamp(13px, 0.98vw, 15.5px);
      line-height: 1.55; color: var(--text-muted); }
    /* big screens: hug the laptop (its half-width is 460px), pointing inward */
    .sc-corner-tl, .sc-corner-bl { right: calc(50% + 472px); left: auto; text-align: right; }
    .sc-corner-tr, .sc-corner-br { left: calc(50% + 472px); right: auto; text-align: left; }
    .sc-corner-tl, .sc-corner-tr { top: 19%; }
    .sc-corner-bl, .sc-corner-br { bottom: 17%; }
    /* medium screens: not enough room beside the laptop, so sit near the edge */
    @media (max-width: 1410px) {
      .sc-corner-tl, .sc-corner-bl { right: auto; left: clamp(20px, 3vw, 72px); text-align: left; }
      .sc-corner-tr, .sc-corner-br { left: auto; right: clamp(20px, 3vw, 72px); text-align: right; }
    }
    @media (max-width: 1180px) { .sc-corner { display: none; } }
    .sc-assembly { position: relative; width: var(--sc-mb-w); aspect-ratio: var(--sc-mb-ar); overflow: visible; z-index: 2; }
    .sc-assembly::before {
      content: '';
      position: absolute;
      inset: -22% -14%;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 46%, var(--sc-macbook-glow-core) 0%, var(--sc-macbook-glow) 34%, transparent 68%);
      filter: blur(30px);
      opacity: 0.95;
      pointer-events: none;
      z-index: 0;
      transition: background 0.35s ease, opacity 0.35s ease;
    }
    .sc-macbook { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; pointer-events: none;
      will-change: opacity; filter: drop-shadow(0 28px 46px rgba(10, 8, 24, 0.34)); }
    .sc-layer { position: absolute; top: 0; left: 0; width: var(--sc-mb-w); aspect-ratio: 16/10; transform-origin: 0 0; z-index: 3; will-change: transform, opacity; }
    .sc-layer .sc-frame { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #0b0b12; }
    /* Hidden until a real screenshot is actually loaded (see home.js's 'load'
       listener) — nothing sets a src on this yet, and an <img> with no src
       still renders a broken-image glyph + alt text if left visible. */
    .sc-frame .sc-screen-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 3; }
    .sc-frame .sc-screen-media.is-loaded { display: block; }

    /* faux dashboard (default screen media, until a gif is dropped in) */
    .sc-faux { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 20% 1fr; background: linear-gradient(160deg, #17131f 0%, #0c0a12 100%); color: #e9e5f6; overflow: hidden; }
    .sc-fx-side { border-right: 1px solid rgba(255,255,255,0.06); padding: 4% 6%; display: flex; flex-direction: column; gap: 8%; }
    .sc-fx-logo { font-family: var(--sc-display); font-weight: 700; font-size: clamp(8px,1vw,13px); letter-spacing: 0.03em; }
    .sc-fx-nav { display: flex; flex-direction: column; gap: 10%; }
    .sc-fx-nav span { height: clamp(3px,0.6vw,6px); border-radius: 3px; background: rgba(255,255,255,0.12); }
    .sc-fx-nav span.on { background: linear-gradient(90deg, rgba(157,138,216,0.9), rgba(157,138,216,0.3)); }
    .sc-fx-main { padding: 3.4% 4%; display: flex; flex-direction: column; gap: 3.6%; min-width: 0; }
    .sc-fx-title { font-family: var(--sc-display); font-weight: 700; font-size: clamp(13px,1.9vw,26px); }
    .sc-fx-tags { display: flex; gap: 5px; flex-wrap: wrap; }
    .sc-fx-tags i { height: clamp(8px,1vw,14px); width: clamp(30px,5vw,64px); border-radius: 999px; background: rgba(255,255,255,0.09); }
    .sc-fx-tags i:first-child { background: rgba(157,138,216,0.4); }
    .sc-fx-row { display: grid; grid-template-columns: 42% 1fr; gap: 4%; flex: 1; min-height: 0; }
    .sc-fx-video { position: relative; border-radius: 9px; overflow: hidden; background: radial-gradient(120% 90% at 30% 15%, rgba(150,110,230,0.30), transparent 55%), linear-gradient(160deg, #2a2436, #15121d); }
    .sc-fx-video .play { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); width: clamp(26px,3.4vw,46px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.92); }
    .sc-fx-video .play::after { content:""; position:absolute; top:50%; left:55%; transform:translate(-50%,-50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #16121f; }
    .sc-fx-cap { position: absolute; left: 8%; bottom: 9%; background: #fff; color: #111; border-radius: 5px; padding: 2px 6px; font-family: var(--sc-display); font-weight: 700; font-size: clamp(6px,0.8vw,11px); }
    .sc-fx-cap span { color: #999; font-weight: 500; }
    .sc-fx-panel { display: flex; flex-direction: column; gap: 6%; min-width: 0; }
    .sc-fx-panel .lead { font-family: var(--sc-display); font-weight: 600; font-size: clamp(9px,1.15vw,15px); }
    .sc-fx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7% 8%; }
    .sc-fx-stat label { display: block; font-size: clamp(5px,0.62vw,8px); letter-spacing: 0.08em; color: rgba(233,229,246,0.5); margin-bottom: 3px; }
    .sc-fx-stat b { font-family: var(--sc-display); font-weight: 600; font-size: clamp(11px,1.5vw,20px); }
    .sc-fx-stat .bar { height: 2.5px; margin-top: 4px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
    .sc-fx-stat .bar::after { content:""; display:block; height:100%; width: var(--v,60%); background: linear-gradient(90deg, #c8f082, #86d0a0); }

    /* ============================================================
       CARDS - tiled into the panel, then split apart, then flip
       ============================================================ */
    .sc-cards-stage { position: absolute; left: 50%; width: var(--sc-card-w); height: var(--sc-card-h);
      transform: translate(-50%, -50%); perspective: 1600px; transform-style: preserve-3d; z-index: 4; opacity: 0; will-change: opacity; }
    .sc-card { position: absolute; top: 0; left: 0; width: var(--sc-card-w); height: var(--sc-card-h); transform-style: preserve-3d; will-change: transform; }
    .sc-card-inner { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
    .sc-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
      box-shadow: 0 2px 6px rgba(0,0,0,0.32), 0 26px 54px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08); }
    .sc-face.sc-back { transform: rotateY(180deg); border-radius: var(--sc-card-radius); }
    .sc-face::after { content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(125deg, rgba(255,255,255,0.14) 0%, transparent 34%); mix-blend-mode: screen; opacity: 0.45; }

    /* FRONT = one third of the joined panel image (seamless when tiled).
       background-size uses 300% width + auto height so a real (non-square)
       gif keeps its own aspect ratio - it's centred and cropped top/bottom
       rather than stretched to fit the panel's aspect. */
    .sc-front { background-image: var(--sc-joined); background-size: 300% auto; background-repeat: no-repeat; background-color: #141019; }
    .sc-card[data-index="0"] .sc-front { background-position: 0% 50%; border-radius: var(--sc-card-radius) 4px 4px var(--sc-card-radius); }
    .sc-card[data-index="1"] .sc-front { background-position: 50% 50%; border-radius: 4px; }
    .sc-card[data-index="2"] .sc-front { background-position: 100% 50%; border-radius: 4px var(--sc-card-radius) var(--sc-card-radius) 4px; }

    /* BACK = marketing content */
    .sc-back { display: flex; flex-direction: column; padding: 34px 26px 30px; border-radius: var(--sc-card-radius); }
    .sc-back::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 12% 6%, rgba(255,255,255,0.35), transparent 55%); opacity: 0.5; }
    .sc-back .sc-icon { width: 48px; height: 48px; position: relative; }
    .sc-btxt { margin-top: auto; position: relative; }
    .sc-back h3 { margin: 0 0 14px; font-family: var(--sc-display); font-weight: 700; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
    .sc-back p { margin: 0; font-family: var(--sc-body); font-weight: 400; font-size: clamp(12px, 1vw, 14.5px); line-height: 1.46; }
    .sc-back-1 { background: var(--sc-c1); color: var(--sc-c1-ink); } .sc-back-1 .sc-icon { stroke: var(--sc-c1-ink); fill: none; }
    .sc-back-2 { background: var(--sc-c2); color: var(--sc-c3-ink); } .sc-back-2 .sc-icon { fill: var(--sc-c3-ink); }
    .sc-back-3 { background: var(--sc-c3); color: var(--sc-c3-ink); } .sc-back-3 .sc-icon { fill: var(--sc-c3-ink); }

    /* final fanned cards get a soft glow on hover */
    .sc-card:hover .sc-face { box-shadow: 0 30px 66px rgba(47, 40, 96, 0.3), 0 0 40px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.14); }

    @media (max-width: 620px) {
      .sc-head-wrap { height: 14vh; margin-top: 2vh; }
      .sc-fx-side { display: none; }
      .sc-faux { grid-template-columns: 1fr; }
      /* phone: the 3-card panel scales to the viewport (3 x 29vw + gaps ~= 100vw) */
      .scroll-cards { --sc-card-w: min(29vw, 210px); --sc-card-h: min(42vw, 280px); --sc-card-radius: 12px; }
      .sc-back { padding: 12px 10px 12px; }
      .sc-back h3 { font-size: clamp(11px, 3.1vw, 14px); margin: 0 0 4px; }
      .sc-back p { display: none; }
      .sc-back .sc-icon { width: 18px; height: 18px; }
    }
    @media (prefers-reduced-motion: reduce) { .sc-face::after { opacity: 0.25; } }

    /* ============================================================
       Testimonials - 3D deck that fans out into a perspective ticker
       ============================================================ */
    .testi-section { position: relative; }
    .testi-track { position: relative; width: 100%; height: 128vh; }
    .testi-viewport {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(24px, 4vh, 52px);
      background:
        radial-gradient(60% 50% at 50% 0%, var(--mesh-glow-1) 0%, transparent 60%),
        var(--bg-page);
      transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .testi-head {
      position: relative;
      text-align: center;
      z-index: 6;
      padding: 0 24px;
    }
    .testi-head .section-eyebrow { margin-bottom: 8px; }
    .testi-head .section-title { max-width: 20ch; margin: 0 auto; }

    .testi-stage {
      position: relative;
      width: var(--tc-w);
      height: var(--tc-h);
      perspective: 1500px;
      transform-style: preserve-3d;
      --tc-w: clamp(240px, 25vw, 340px);
      --tc-h: clamp(230px, 23vw, 300px);
    }
    .testi-card {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--tc-w);
      height: var(--tc-h);
      margin-left: calc(var(--tc-w) / -2);
      margin-top: calc(var(--tc-h) / -2);
      border-radius: 20px;
      background: var(--bg-elevated);
      border: 1px solid var(--border-strong);
      box-shadow: 0 4px 12px rgba(20, 16, 45, 0.18), 0 30px 60px rgba(20, 16, 45, 0.32);
      padding: 24px 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      backface-visibility: hidden;
      will-change: transform, opacity;
    }
    .testi-top { display: flex; align-items: flex-start; justify-content: space-between; }
    .testi-av {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: linear-gradient(150deg, var(--g1), var(--g2));
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.02em;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    .testi-qm {
      font-family: var(--font-display);
      font-size: 3rem;
      line-height: 0.6;
      color: var(--accent);
      opacity: 0.5;
    }
    .testi-stars { display: flex; gap: 3px; color: #f6b73c; margin-top: -2px; }
    .testi-stars svg { width: 15px; height: 15px; filter: drop-shadow(0 1px 2px rgba(246, 183, 60, 0.35)); }
    .testi-card blockquote {
      margin: 0;
      flex: 1;
      font-size: clamp(0.95rem, 1.15vw, 1.08rem);
      line-height: 1.5;
      font-weight: 500;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }
    .testi-card figcaption {
      font-size: 0.82rem;
      color: var(--text-muted);
    }
    .testi-card figcaption strong { color: var(--text-secondary); font-weight: 600; }

    .testi-controls {
      position: relative;
      display: flex;
      gap: 12px;
      z-index: 6;
      top: 64px
    }
    .testi-arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-strong);
      background: var(--card-bg);
      color: var(--accent);
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    }
    .testi-arrow svg { width: 18px; height: 18px; }
    .testi-arrow:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--accent); color: #fff; }

    .testi-hint {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      font-size: 10.5px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--text-muted);
      transition: opacity 0.4s ease;
    }

    /* ============================================================
       Case studies (ref image 2)
       ============================================================ */
    .cases-section {
      position: relative;
      padding: 96px 24px;
      background:
        radial-gradient(62% 48% at 12% 2%, var(--mesh-glow-1), transparent 62%),
        linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
    }
    .cases-shell { max-width: 78rem; margin: 0 auto; }
    .cases-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; margin-bottom: 44px; }
    /* Spotlight ticker: cards flow continuously; the one crossing the middle
       grows + brightens while the others recede (JS-driven, pauses on hover). */
    .cases-ticker {
      position: relative; overflow: hidden; padding: 52px 0 40px;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    }
    .cases-track { display: flex; gap: 24px; width: max-content; will-change: transform; }
    .case-card {
      flex: 0 0 clamp(280px, 26vw, 336px);
      background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px;
      padding: 22px; display: flex; flex-direction: column; gap: 20px;
      box-shadow: 0 12px 32px rgba(47, 53, 96, 0.09);
      /* no will-change: 15 clones would pin 15 GPU layers permanently;
         the conveyor's per-frame transform promotes them on demand */
    }
    /* JS owns .case-card transform every frame - don't transition it (would lag) */
    .cases-ticker .case-card { transition: opacity 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
    .cases-ticker .case-card:hover { transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .cases-ticker { overflow-x: auto; scrollbar-width: none; }
      .cases-ticker::-webkit-scrollbar { display: none; }
    }
    .case-badge {
      align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: #fff; background: var(--accent); padding: 6px 14px; border-radius: 9999px;
    }
    .case-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; background: var(--bg-inset); border-radius: 14px; }
    .case-stat { display: flex; flex-direction: column; gap: 5px; }
    .case-stat .case-num { font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; }
    .case-lbl { font-size: 0.8rem; color: var(--text-muted); }
    .case-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .case-logo-img { height: 26px; width: auto; max-width: 130px; object-fit: contain; opacity: 0.9; }
    [data-theme="dark"] .case-logo-img { filter: brightness(1.9) saturate(0.8); opacity: 0.85; }
    /* padding + matching negative margin grows the tap target to ~35px
       tall without shifting the link's visual position or size - the text
       stays the same small caps label, only the hit area grows. */
    .case-more { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 6px; margin: -9px -6px; }
    .case-more span { transition: transform 0.2s ease; }
    .case-more:hover span { transform: translateX(3px); }

    /* ============================================================
       By the numbers - stats + graph
       ============================================================ */
    .stats-section {
      position: relative;
      overflow: hidden;
      padding: 96px 24px;
      background:
        radial-gradient(58% 44% at 88% 6%, var(--mesh-glow-1), transparent 62%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
    }
    .stats-shell { max-width: 72rem; margin: 0 auto; }
    .stats-top { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 auto 44px; }
    @media (min-width: 768px) { .stats-top { grid-template-columns: repeat(4, 1fr); } }
    .stat-tile { text-align: center; padding: 28px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: 0 10px 28px rgba(47, 53, 96, 0.06); }
    .stat-big {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 4vw, 3.1rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums; /* count-up digits don't jitter width */
      background: linear-gradient(135deg, var(--periwinkle-light) 0%, var(--accent) 55%, var(--periwinkle-deep) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .count-up { font-variant-numeric: tabular-nums; }
    .stat-cap { display: block; margin-top: 10px; font-size: 0.85rem; color: var(--text-secondary); }
    .stats-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
    @media (min-width: 900px) { .stats-grid { grid-template-columns: 1.35fr 1fr; } }
    .chart-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 26px; box-shadow: 0 10px 30px rgba(47, 53, 96, 0.07); }
    .chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
    .chart-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text-primary); }
    .chart-sub { display: block; font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
    .chart-kpi { flex-shrink: 0; font-size: 0.85rem; font-weight: 600; color: var(--accent); background: var(--accent-dim); padding: 8px 12px; border-radius: 9999px; white-space: nowrap; }
    .bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 220px; }
    .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; justify-content: flex-end; }
    .bar { width: 100%; max-width: 46px; height: 0; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--periwinkle-light), var(--accent)); transition: height 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
    .bar-hi { background: linear-gradient(180deg, var(--accent), var(--periwinkle-deep)); box-shadow: var(--object-glow-strong); }
    .bar-x { font-size: 0.72rem; color: var(--text-muted); }
    .stat-list { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--bg-elevated), var(--bg-inset)); border: 1px solid var(--card-border); border-radius: 20px; padding: 10px 22px; }
    .stat-row { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--border); }
    .stat-row:last-child { border-bottom: none; }
    .stat-ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--accent); box-shadow: 0 4px 12px rgba(47, 53, 96, 0.06); }
    .stat-ic svg { width: 20px; height: 20px; }
    .stat-row-num { display: block; font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--accent); line-height: 1; }
    .stat-row-label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.1; }
    .stat-row-cap { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-top: 5px; }

    /* ============================================================
       Capability engine - hub & spoke (ref image 5)
       ============================================================ */
    .engine-section {
      position: relative;
      padding: 96px 24px;               /* matches stats/roadmap/before-after rhythm */
      overflow: hidden;
      background:
        radial-gradient(70% 55% at 18% 8%, var(--mesh-glow-1), transparent 60%),
        radial-gradient(65% 55% at 92% 26%, var(--mesh-glow-2), transparent 60%),
        linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
    }
    .engine-shell { max-width: 78rem; margin: 0 auto; }
    .engine-top { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; margin-bottom: 44px; }
    @media (min-width: 960px) { .engine-top { grid-template-columns: 0.85fr 1.15fr; } }
    .engine-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; color: var(--text-primary); margin: 8px 0 16px; }
    .engine-title em { font-style: italic; background: linear-gradient(100deg, var(--accent), var(--periwinkle-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .engine-lead { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); max-width: 36ch; }
    .engine-diagram { position: relative; min-height: 320px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; gap: 18px 22px; align-items: center; }
    .engine-hub {
      grid-column: 2; grid-row: 1 / span 2; align-self: center;
      width: clamp(150px, 17vw, 188px); aspect-ratio: 1; border-radius: 50%;
      background: radial-gradient(circle at 50% 34%, var(--periwinkle-light), var(--accent) 55%, var(--periwinkle-deep));
      color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
      box-shadow: var(--object-glow-strong), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    }
    .engine-hub-mark { font-size: 1.6rem; }
    .engine-hub-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: 1rem; margin-top: 6px; }
    .engine-hub-sub { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.88; margin-top: 4px; }
    .engine-node { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px 18px; box-shadow: 0 8px 24px rgba(47, 53, 96, 0.07); }
    .engine-node.n1 { grid-column: 1; grid-row: 1; }
    .engine-node.n2 { grid-column: 1; grid-row: 2; }
    .engine-node.n3 { grid-column: 3; grid-row: 1; }
    .engine-node.n4 { grid-column: 3; grid-row: 2; }
    .engine-node-t { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--text-primary); margin-bottom: 6px; }
    .engine-node-d { display: block; font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); }
    .engine-layer { border: 1px solid var(--card-border); border-radius: 20px; background: var(--card-bg); padding: 24px 22px; margin-bottom: 26px; }
    .engine-layer-title { display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
    .engine-layer-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
    @media (min-width: 768px) { .engine-layer-grid { grid-template-columns: repeat(4, 1fr); } }
    .engine-ctl-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
    .engine-ctl-ic svg { width: 22px; height: 22px; }
    .engine-ctl h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--text-primary); margin: 0 0 6px; }
    .engine-ctl p { font-size: 0.82rem; line-height: 1.45; color: var(--text-muted); margin: 0; }
    .engine-foot { text-align: center; font-size: 0.98rem; color: var(--text-secondary); margin: 0; }
    .engine-foot strong { color: var(--accent); font-weight: 700; }

    @media (max-width: 720px) {
      .engine-diagram { grid-template-columns: 1fr; grid-template-rows: none; }
      .engine-hub { grid-column: 1; grid-row: auto; margin: 4px auto; }
      .engine-node.n1, .engine-node.n2, .engine-node.n3, .engine-node.n4 { grid-column: 1; grid-row: auto; }
    }

    /* ============================================================
       Card hover + glow effects (site-wide)
       ============================================================ */
    .case-card, .stat-tile, .chart-card, .engine-node {
      box-shadow: var(--card-shadow);
    }
    .case-card, .stat-tile, .chart-card, .engine-node, .engine-ctl {
      transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease;
    }
    .case-card:hover, .stat-tile:hover, .chart-card:hover, .engine-node:hover {
      transform: translateY(-5px);
      border-color: var(--card-hover-border);
      box-shadow: var(--card-shadow-hover), 0 0 42px var(--accent-glow);
    }
    .engine-ctl { border-radius: 14px; padding: 4px; }
    .engine-ctl:hover { transform: translateY(-3px); }
    .feature-card:hover {
      box-shadow: 0 18px 44px rgba(47, 40, 96, 0.14), 0 0 40px var(--accent-glow);
    }
    /* testi cards keep their JS-driven transform - only glow the border/shadow */
    .testi-card { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
    .testi-card:hover {
      border-color: var(--card-hover-border);
      box-shadow: 0 0 0 1px var(--accent), 0 26px 56px var(--accent-glow);
    }
    /* pricing card hover/transition handled in the pricing block above */
    /* capability card faces get a soft glow on hover */
    .sc-card:hover .sc-face { box-shadow: 0 30px 66px rgba(47, 40, 96, 0.3), 0 0 40px var(--accent-glow), inset 0 0 0 1px rgba(255,255,255,0.14); }

    /* ============================================================
       Hero background - vertical marquee columns (ref image 4)
       ============================================================ */
    /* ============================================================
       Roadmap - the creative loop (animated winding road)
       ============================================================ */
    .roadmap-section {
      position: relative;
      padding: 96px 24px 104px;
      overflow: hidden;
      background:
        radial-gradient(58% 52% at 84% 6%, var(--roadmap-glow-1), transparent 60%),
        radial-gradient(52% 48% at 10% 96%, var(--roadmap-glow-2), transparent 58%),
        linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
    }
    .roadmap-shell { max-width: 80rem; margin: 0 auto; }
    .roadmap-head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
    .roadmap-head .section-title { margin: 0 auto; }
    .roadmap-head .section-lead { margin: 14px auto 0; }

    .roadmap-wrap { position: relative; width: 100%; aspect-ratio: 1200 / 420; }
    .roadmap-wrap::before {
      content: '';
      position: absolute;
      inset: -12% -4%;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(58% 52% at 50% 48%, var(--roadmap-halo), transparent 70%),
        radial-gradient(72% 66% at 50% 50%, var(--roadmap-vignette), transparent 76%);
      filter: blur(4px);
    }
    .roadmap-svg { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .road-base {
      fill: none;
      stroke: url(#roadGrad);
      stroke-width: 44;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: var(--roadmap-road-glow);
      transition: stroke-dashoffset 1.9s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .road-dash {
      fill: none;
      stroke: rgba(255, 255, 255, 0.8);
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-dasharray: 2 24;
      opacity: 0;
      transition: opacity 0.6s ease 1s;
    }
    .roadmap-wrap.in-view .road-dash { opacity: 0.85; animation: road-march 2.6s linear infinite; }
    @keyframes road-march { to { stroke-dashoffset: -52; } }

    .road-node {
      --rb-size: clamp(54px, 6.6vw, 86px);
      position: absolute;
      /* left/top mark the road-path point the badge should sit centered on.
         Centering the whole node (badge + label) here, as before, pulled the
         badge up off the path by roughly half the label's height - shift by
         just the badge's own half-height instead so the bubble lands on the
         path and the label hangs below it. */
      transform: translate(-50%, calc(var(--rb-size) / -2));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
      scale: 0.55;
      transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 2;
    }
    .roadmap-wrap.in-view .road-node { opacity: 1; scale: 1; }
    .road-node[data-i="0"] { transition-delay: 0.25s; }
    .road-node[data-i="1"] { transition-delay: 0.45s; }
    .road-node[data-i="2"] { transition-delay: 0.65s; }
    .road-node[data-i="3"] { transition-delay: 0.85s; }
    .road-node[data-i="4"] { transition-delay: 1.05s; }
    .road-node[data-i="5"] { transition-delay: 1.25s; }

    .road-badge {
      width: var(--rb-size);
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--roadmap-badge-fill);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--roadmap-badge-glow);
    }
    .road-badge svg { width: 46%; height: 46%; }
    .road-text {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(0.85rem, 1.25vw, 1.1rem);
      color: var(--text-primary);
      text-align: center;
      white-space: nowrap;
      line-height: 1.1;
    }
    .road-text b {
      display: block;
      font-size: 1.5em;
      font-weight: 700;
      color: var(--accent);
      line-height: 1;
      margin-bottom: 3px;
    }

    @media (max-width: 640px) {
      .roadmap-wrap { aspect-ratio: 1200 / 620; }
      .road-text { font-size: 0.72rem; }
    }

    /* ============================================================
       Gradient-mesh backgrounds for otherwise-flat sections
       ============================================================ */
    .logos-section {
      position: relative;
      background:
        radial-gradient(50% 120% at 15% 50%, var(--mesh-glow-1), transparent 60%),
        radial-gradient(50% 120% at 85% 50%, var(--mesh-glow-2), transparent 60%),
        var(--bg-muted);
    }
    .workflow-section {
      position: relative;
      background:
        radial-gradient(48% 60% at 8% 4%, var(--mesh-glow-1), transparent 58%),
        radial-gradient(52% 64% at 92% 98%, var(--mesh-glow-2), transparent 58%),
        var(--bg-page) !important;
    }
    .testimonials-section, .site-section--elevated, .site-section {
      position: relative;
    }

    /* ============================================================
       Before / After comparison slider (between Proof and Loop)
       ============================================================ */
    .ba-section {
      position: relative;
      padding: 96px 24px 104px;
      background:
        radial-gradient(60% 46% at 88% 4%, var(--mesh-glow-1), transparent 60%),
        radial-gradient(54% 46% at 8% 98%, var(--mesh-glow-2), transparent 58%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
    }
    .ba-shell { max-width: 72rem; margin: 0 auto; }
    .ba-head { text-align: center; max-width: 44rem; margin: 0 auto 46px; }
    .ba-head .section-title { margin: 0 auto; }
    .ba-head .section-lead { margin: 14px auto 0; }

    .ba-compare {
      display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center;
      max-width: 68rem; margin: 0 auto;
    }
    .ba-col { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 320px; margin: 0 auto; }
    .ba-col-label {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
      padding: 8px 16px; border-radius: 9999px; color: var(--text-secondary);
      background: var(--bg-inset); border: 1px solid var(--card-border);
    }
    .ba-col.after .ba-col-label { color: var(--accent); background: var(--accent-dim); border-color: var(--card-hover-border); }

    .ba-phone {
      position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 32px; overflow: hidden;
      background: #08070f; border: 8px solid #16141f;
      box-shadow: 0 30px 70px rgba(10, 8, 30, 0.4);
    }
    .ba-col.after .ba-phone { border-color: #1c1a2c; box-shadow: 0 30px 70px rgba(10, 8, 30, 0.4), 0 0 46px var(--accent-glow); }

    .ba-statusbar { position: absolute; top: 0; left: 0; right: 0; height: 32px; display: flex; align-items: center; padding: 0 16px; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); z-index: 5; }

    .ba-plays { position: absolute; top: 40px; left: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); }
    .ba-plays svg { width: 14px; height: 14px; }

    .ba-content { position: absolute; inset: 0; background: linear-gradient(150deg, #2b2b36, #17171f); }
    .ba-col.after .ba-content {
      background:
        radial-gradient(80% 90% at 20% 8%, rgba(155, 147, 246, 0.5), transparent 55%),
        linear-gradient(150deg, var(--periwinkle-light), var(--accent) 55%, var(--periwinkle-deep));
    }
    .ba-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
    .ba-vid.is-loaded { opacity: 1; }

    .ba-icon-rail { position: absolute; right: 12px; bottom: 96px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .ba-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; }
    .ba-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
    .ba-icon span { font-size: 0.68rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .ba-col.after .ba-icon.like svg { color: #ff5c7a; fill: #ff5c7a; }

    .ba-postfoot { position: absolute; left: 0; right: 56px; bottom: 12px; z-index: 4; color: #fff; }
    .ba-handle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 0 16px; }
    .ba-handle-name { font-size: 0.74rem; font-weight: 700; }
    .ba-follow-pill { font-size: 0.62rem; font-weight: 700; padding: 3px 10px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.6); }
    .ba-caption { font-size: 0.7rem; line-height: 1.4; padding: 0 16px; margin-bottom: 6px; color: rgba(255, 255, 255, 0.92); }
    .ba-audio { display: flex; align-items: center; gap: 6px; padding: 0 16px; font-size: 0.66rem; color: rgba(255, 255, 255, 0.75); }
    .ba-audio svg { width: 12px; height: 12px; }

    .ba-toast-stack { position: absolute; top: 40px; left: 8px; right: 8px; z-index: 6; display: flex; flex-direction: column; gap: 8px; }
    .ba-toast {
      display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 14px;
      background: rgba(20, 20, 30, 0.88); border: 1px solid rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
      opacity: 0; transform: translateY(-12px);
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ba-compare.ba-in .ba-toast { opacity: 1; transform: translateY(0); }
    .ba-toast:nth-child(1) { transition-delay: 0.3s; }
    .ba-toast:nth-child(2) { transition-delay: 0.6s; }
    .ba-toast:nth-child(3) { transition-delay: 0.9s; }
    .ba-toast-icon { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); color: #fff; }
    .ba-toast-icon svg { width: 14px; height: 14px; }
    .ba-toast-body { flex: 1; min-width: 0; }
    .ba-toast-title { font-size: 0.7rem; font-weight: 700; color: #fff; display: flex; justify-content: space-between; gap: 8px; }
    .ba-toast-title .time { font-weight: 500; color: rgba(255, 255, 255, 0.5); font-size: 0.64rem; }
    .ba-toast-text { font-size: 0.68rem; color: rgba(255, 255, 255, 0.85); line-height: 1.3; }
    .ba-toast-more {
      align-self: center; font-size: 0.64rem; font-weight: 700; color: #fff;
      background: rgba(20, 20, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 4px 12px; border-radius: 9999px;
      opacity: 0; transition: opacity 0.5s ease 1.2s;
    }
    .ba-compare.ba-in .ba-toast-more { opacity: 1; }

    .ba-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); }
    .ba-arrow svg { width: 28px; height: 28px; color: var(--accent); }
    .ba-arrow span { font-size: 0.76rem; max-width: 12ch; text-align: center; line-height: 1.35; }

    .ba-metrics { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
    .ba-metrics b { color: var(--text-primary); font-weight: 700; }
    .ba-reach { font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 9999px; }
    .ba-reach.flat { color: var(--text-muted); background: var(--bg-inset); }
    .ba-reach.up { color: #34c77b; background: rgba(52, 199, 123, 0.14); }

    @media (max-width: 860px) {
      .ba-compare { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
      .ba-arrow { flex-direction: row; gap: 12px; }
      .ba-arrow svg { transform: rotate(90deg); flex: none; }
      .ba-arrow span { max-width: 22ch; text-align: left; }
    }
    html[dir="rtl"] .ba-arrow svg { transform: scaleX(-1); }
    @media (max-width: 860px) {
      html[dir="rtl"] .ba-arrow svg { transform: rotate(90deg); }
      html[dir="rtl"] .ba-arrow span { text-align: right; }
    }

    /* ============================================================
       Polish VFX: cursor spotlight, button sheen, ambient orbs
       ============================================================ */
    /* Sheen sweep across the primary pill button */
    .btn-primary { position: relative; overflow: hidden; }
    .btn-primary::before {
      content: '';
      position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transform: skewX(-20deg);
      transition: left 0.55s ease;
      pointer-events: none;
    }
    .btn-primary:hover::before { left: 125%; }

    /* Pointer-following spotlight wash on cards (hover-capable devices only) */
    @media (hover: hover) and (pointer: fine) {
      .price-card::after, .case-card::after, .testi-card::after {
        content: '';
        position: absolute; inset: -1px; border-radius: inherit;
        background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--accent-glow), transparent 62%);
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
        z-index: 1;
      }
      .price-card:hover::after, .case-card:hover::after, .testi-card:hover::after { opacity: 0.4; }
    }

    /* Slow-drifting ambient orbs - a soft halftone dot-mesh cloud instead of a
       plain blurred sphere, echoing the hero's dot motif. Pure CSS (a dot
       raster masked into a circle), same transform-only float as before, so
       there's no added animation cost - just a different, on-theme look. */
    .fx-orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      background-image: radial-gradient(circle, var(--fx-dot-c) 1.15px, transparent 1.7px);
      background-size: 8px 8px;
      -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 38%, transparent 72%);
              mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 38%, transparent 72%);
      animation: orbFloat 13s ease-in-out infinite alternate;
    }
    [data-theme="dark"]  .fx-orb { --fx-dot-c: rgba(157, 150, 246, 0.9); opacity: 0.32; }
    [data-theme="light"] .fx-orb { --fx-dot-c: rgba(74, 99, 196, 0.75);  opacity: 0.38; }
    @keyframes orbFloat {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to   { transform: translate3d(0, -34px, 0) scale(1.06); }
    }
    @media (prefers-reduced-motion: reduce) {
      .fx-orb { animation: none; }
      .btn-primary::before { display: none; }
    }

    /* ============================================================
       PERFORMANCE LAYER (optimized build)
       ============================================================ */

    /* 1. Animation visibility gate: sections tagged data-animgate get .in-vp
       from one shared IntersectionObserver; while off-screen every CSS
       animation inside them is paused, so marquees / sparkles / orbs / glows
       stop costing compositor time the moment they scroll away. */
    [data-animgate]:not(.in-vp) *,
    [data-animgate]:not(.in-vp) *::before,
    [data-animgate]:not(.in-vp) *::after {
      animation-play-state: paused !important;
    }

    /* 2. Below-fold render skipping: these sections are plain flow content
       (no sticky scrubbing, no load-time measurements), so the browser can
       skip layout+paint until they approach the viewport. */
    #stats, #roadmap, .site-footer {
      content-visibility: auto;
      contain-intrinsic-size: auto 1000px;
    }

    /* 3. Tap-to-flip for touch devices (hover flip has no touch equivalent) */
    .hero-card.flipped .hero-card-inner { transform: rotateY(180deg); }

    /* 4. Master reduced-motion: every decorative animation collapses to a
       calm static state; content is always visible. JS-driven systems
       (canvas, videos, morph spin, count-ups, typewriter) check the same
       media query on their side. */
    @media (prefers-reduced-motion: reduce) {
      .logos-track, .fx-orb, .ba-glow, .ba-ring::before, .hero-spark,
      .hero-card-bob, .pricing-sparkles span, .pricing-decor,
      .nav-glass-liquid, .road-dash,
      .btn-primary::before, .hero-generate::before,
      .hero-chips.chips-swap .hero-chip {
        animation: none !important;
      }
      .reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .section-title .tw { overflow: visible; }
      .section-title .tw-in { transform: none !important; transition: none !important; }
    }

    /* 5. Mobile / low-power adaptation: cut GPU-expensive blur + particle
       work substantially, and tighten text stagger so copy reads fast. */
    @media (max-width: 700px) {
      .hero-spark:nth-child(n+6) { display: none; }        /* 9 -> 5 sparkles */
      .hero-ai-tag {
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: rgba(10, 8, 26, 0.72);                  /* solid, no blur */
      }
      .nav-glass {
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
      }
      .nav-glass-liquid, .nav-glass-noise { display: none; } /* animated overlay off */
      .mobile-menu-card {
        backdrop-filter: blur(14px) saturate(150%);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
      }
      .fx-orb { background-size: 6px 6px; }                  /* slightly finer dots at small sizes */
      .ba-glow { filter: blur(14px); }                       /* was 22px */
      .section-title .tw-in {
        transition-duration: 0.45s;
        transition-delay: calc(var(--wi, 0) * 38ms);         /* faster read on phones */
      }
    }

    /* ============================================================
       PHONE EXPERIENCE FIXES
       ============================================================ */

    /* Halftone fallback: when canvas pixel-reads are blocked (opening the
       file via file:// taints the canvas), the engine hides the canvas and
       tags the mesh - the raw halftone art shows as a static backdrop. */
    .hero-mesh.ht-static::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url('assets/darkmode_hero.jpg');
      background-size: cover;
      background-position: center;
      opacity: 0.48;
      mix-blend-mode: screen;
    }
    [data-theme="light"] .hero-mesh.ht-static::before {
      background-image: url('assets/lightmode_hero.jpg');
      mix-blend-mode: multiply;
      opacity: 0.4;
    }

    @media (max-width: 700px) {
      /* 1. Capabilities: the four corner captions return as a 2x2 band in the
         empty space below the fanned cards (JS keeps them visible on phones) */
      .sc-corner { display: block; width: 42vw; text-align: center; }
      .sc-corner-tl, .sc-corner-bl { left: 6vw; right: auto; text-align: center; }
      .sc-corner-tr, .sc-corner-br { right: 6vw; left: auto; text-align: center; }
      .sc-corner-tl, .sc-corner-tr { top: 55%; bottom: auto; }
      .sc-corner-bl, .sc-corner-br { top: 68%; bottom: auto; }
      .sc-corner-ic { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 6px; }
      .sc-corner-ic svg { width: 16px; height: 16px; }
      .sc-corner-k { font-size: 0.78rem; }
      .sc-corner p { font-size: 0.66rem; line-height: 1.4; }
      .sc-cta { bottom: 12px; gap: 8px; }   /* clears the caption band above */

      /* 2. Testimonials: no deck-to-ticker scrub on phones - the section is
         exactly one screen and the ticker runs from the start (JS pins d2r=1) */
      .testi-track { height: 100svh; }

      /* 4. Roadmap: taller canvas, smaller badges, wrapping labels - no overlap */
      .roadmap-wrap { aspect-ratio: 1200 / 700; }
      .road-base { stroke-width: 32; }
      .road-node { --rb-size: 38px; gap: 6px; }
      .road-text { font-size: 0.62rem; white-space: normal; max-width: 72px; }
      .road-text b { font-size: 1.25em; margin-bottom: 1px; }
      /* labels of the upper nodes go ABOVE their badge, clear of the road */
      .road-node[data-i="0"], .road-node[data-i="2"], .road-node[data-i="4"] {
        flex-direction: column-reverse;
      }

      /* 4b. Invisible section seams: on phones the corner-hugging radial
         glows and the blurred orbs sitting at section borders made the
         boundary between these same-tone sections read as a hard line.
         Keep the plain vertical gradients (identical colours meet at each
         edge) and let the road's own central halo carry the glow. */
      .ba-section {
        background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
      }
      .roadmap-section {
        background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
      }
      .stats-section {
        background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-page) 100%);
      }
      .engine-section {
        background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-elevated) 100%);
      }
      .roadmap-section > .fx-orb,
      .stats-section > .fx-orb { display: none; }
    }

    /* 5. Navbar on phones: the hero gradient band stays with the header all
       the way down the page so the logo / CTA never sit on raw content
       (JS also keeps the on-hero text colours below 768px) */
    @media (max-width: 767px) {
      .site-header.nav-past-hero .nav-gradient-drop { opacity: 1; }
    }