/* ============================================================================
   SavTrack — Marketing landing page styles
   ----------------------------------------------------------------------------
   Ported from design/landing/index.html (static proto). This file =
     1. A minimal slice of design/design-system.css — only the pieces the
        landing page actually consumes (tokens, reset/base, .btn primitives,
        accessibility helpers). NOT the full design system (unused: sidebar,
        data table, forms, pills, tabs, etc. all live in the CRM app shell,
        not here).
     2. The proto's own page-scoped <style> block, verbatim.
   Self-hosted fonts (Space Grotesk + Inter) are linked in landing.blade.php
   via the same public/port/fonts.css the rest of the app already uses —
   no Google Fonts CDN.
   ========================================================================== */


/* ---- from design-system.css §02 Design tokens (:root) -------------------- */
:root {
  /* -- Brand: magenta ramp (primary / CTA) -- */
  --magenta-50:  #fdeef7;
  --magenta-100: #fbd6ec;
  --magenta-200: #f6aed9;
  --magenta-300: #f07cc0;
  --magenta-400: #ec46a6;
  --magenta-500: #e6007e;  /* brand primary */
  --magenta-600: #cc0070;  /* hover / pressed */
  --magenta-700: #a80a5e;
  --magenta-800: #85104b;
  --magenta-900: #5e1039;

  /* -- Brand: violet ramp (cosmic / secondary) -- */
  --violet-50:  #f3f0fc;
  --violet-100: #e6ddf9;
  --violet-200: #ccbaf2;
  --violet-300: #ab8ae6;
  --violet-400: #8b5cd6;
  --violet-500: #7033c0;
  --violet-600: #5b1f8f;  /* brand deep purple */
  --violet-700: #4a1975;
  --violet-800: #351356;
  --violet-900: #241146;  /* hero night base */
  --plum:       #7c1f6e;  /* brand plum accent */

  /* -- Neutrals: cool ramp, faint violet tint for cohesion -- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfbfd;
  --neutral-50:  #f7f7fa;
  --neutral-100: #eff0f4;
  --neutral-150: #e6e7ee;
  --neutral-200: #dcdde6;
  --neutral-300: #c3c5d2;
  --neutral-400: #9a9db0;
  --neutral-500: #71748b;
  --neutral-600: #565973;
  --neutral-700: #414459;
  --neutral-800: #2b2d3c;
  --neutral-900: #1a1b26;  /* ink */
  --neutral-950: #101118;

  /* -- Semantic status ramps (pills, deltas, alerts) -- */
  --success-50:  #e7f7ee;  --success-100: #c9edd7;
  --success-500: #16a34a;  --success-600: #15803d;  --success-700: #157f47;
  --warn-50:     #fdf3d8;  --warn-100:    #f9e3ac;
  --warn-500:    #d99400;  --warn-600:    #a86f00;  --warn-700:    #8a5a00;
  --danger-50:   #fde4e4;  --danger-100:  #f9c9c9;
  --danger-500:  #e11d48;  --danger-600:  #c01033;  --danger-700:  #b42318;
  --info-50:     #e6effd;  --info-100:    #cfe0fb;
  --info-500:    #2563eb;  --info-600:    #1d4ed8;  --info-700:    #1e40af;

  /* -- Semantic surface & text tokens (LIGHT). Components read THESE. -- */
  --bg:            var(--neutral-50);
  --bg-elevated:   var(--neutral-25);
  --surface:       var(--neutral-0);
  --surface-2:     var(--neutral-25);
  --surface-sunken:var(--neutral-100);
  --overlay:       rgba(16, 17, 24, 0.44);

  --border:        var(--neutral-150);
  --border-strong: var(--neutral-200);
  --border-faint:  var(--neutral-100);

  --text:          var(--neutral-900);
  --text-muted:    var(--neutral-600);  /* accessible secondary (AA on surface) */
  --text-subtle:   var(--neutral-400);  /* decorative / placeholder only */
  --text-on-brand: #ffffff;
  --text-on-cosmic:#f4effb;

  --primary:       var(--magenta-500);
  --primary-hover: var(--magenta-600);
  --primary-tint:  var(--magenta-50);
  --link:          var(--magenta-700);  /* AA on white */
  --link-hover:    var(--magenta-800);

  /* Focus ring — used everywhere interactive */
  --ring:          0 0 0 3px rgba(230, 0, 126, 0.28);
  --ring-inset:    inset 0 0 0 2px rgba(230, 0, 126, 0.55);

  /* -- Spacing (8px grid; rem so it scales with user zoom) -- */
  --space-0:   0;
  --space-0-5: 0.125rem; /*  2 */
  --space-1:   0.25rem;  /*  4 */
  --space-2:   0.5rem;   /*  8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */

  /* -- Radius -- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-full: 9999px;

  /* -- Elevation: soft, layered, low-contrast -- */
  --shadow-xs:  0 1px 2px rgba(16, 17, 24, 0.05);
  --shadow-sm:  0 1px 2px rgba(16, 17, 24, 0.05), 0 1px 3px rgba(16, 17, 24, 0.04);
  --shadow-md:  0 2px 4px rgba(16, 17, 24, 0.04), 0 6px 16px rgba(16, 17, 24, 0.07);
  --shadow-lg:  0 8px 24px rgba(16, 17, 24, 0.09), 0 2px 6px rgba(16, 17, 24, 0.05);
  --shadow-xl:  0 18px 50px rgba(16, 17, 24, 0.14), 0 4px 12px rgba(16, 17, 24, 0.06);
  --shadow-brand: 0 6px 18px rgba(230, 0, 126, 0.28);

  /* -- Type -- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.875rem;  /* 14 — CRM body */
  --text-md:   0.9375rem; /* 15 */
  --text-lg:   1rem;      /* 16 */
  --text-xl:   1.125rem;  /* 18 */
  --text-2xl:  1.375rem;  /* 22 */
  --text-3xl:  1.75rem;   /* 28 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-hero: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* -- Motion (respect reduced-motion below) -- */
  --motion-fast: 120ms;
  --motion:      180ms;
  --motion-slow: 280ms;
  --ease:        cubic-bezier(0.2, 0, 0, 1);

  /* -- Layout metrics -- */
  --sidebar-w:          72px;   /* collapsed icon rail (matches app) */
  --sidebar-w-expanded: 244px;
  --topbar-h:           64px;
  --content-max:        1360px;

  color-scheme: light;
}


/* ---- from design-system.css §04 Reset & base ------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--fw-regular);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg { flex-shrink: 0; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: var(--leading-tight); }

hr, .divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-5) 0;
}

::selection { background: var(--magenta-200); color: var(--magenta-900); }

/* Quiet, thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: var(--radius-full); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }


/* ---- from design-system.css §09 Buttons (.btn / .btn-primary / .btn-lg only) */
.btn {
  --btn-h: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-h);
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--text);
  transition: background var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
  user-select: none;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(0.5px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn-primary {
  color: var(--text-on-brand);
  background: linear-gradient(180deg, var(--magenta-500) 0%, var(--magenta-600) 100%);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--magenta-600) 0%, var(--magenta-700) 100%); box-shadow: var(--shadow-brand); }
.btn-lg { --btn-h: 48px; padding: 0 var(--space-5); font-size: var(--text-md); }


/* ---- from design-system.css §04 icon-btn (ported: demo modal close button) --- */
.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.icon-btn:hover { background: var(--neutral-100); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }


/* ---- from design-system.css §13 Forms & inputs (ported: demo modal form) ---- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.field-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.field-label .req { color: var(--danger-600); }
.field-hint  { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--fw-regular); }
.field-error { font-size: var(--text-xs); color: var(--danger-600); display: inline-flex; align-items: center; gap: var(--space-1); }
.field-error[hidden] { display: none; }
.field-error svg { width: 13px; height: 13px; flex: none; }

.input, .textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.textarea { min-height: 96px; padding: var(--space-3); resize: vertical; line-height: var(--leading-normal); }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .textarea:hover { border-color: var(--neutral-300); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.input:disabled, .textarea:disabled { background: var(--neutral-100); color: var(--text-muted); cursor: not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-500); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-50); }


/* ---- from design-system.css §24 Accessibility (skip-link, focus-visible, sr-only, reduced-motion) */
/* 24  Accessibility -------------------------------------------------------- */
/* Visible, consistent focus ring on every keyboard-focused control. */
:where(a, button, .btn, .icon-btn, .row-action, .nav-item, .tab, .page-item,
       .segmented__item, .input, .select, .textarea, .checkbox, .switch,
       [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }

/* Skip link — first focusable element on a page */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
  transition: transform var(--motion) var(--ease);
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* Screen-reader-only content */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honor reduced-motion: kill non-essential motion, keep state changes instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================================
   Page-scoped styles (landing only) — verbatim from design/landing/index.html
   ========================================================================== */
    :root {
      --page-max: 1180px;
      --band-max: 1320px;
    }

    html { scroll-behavior: smooth; }
    body { background: var(--bg-elevated); overflow-x: hidden; }

    ::selection { background: var(--magenta-200); color: var(--magenta-900); }

    .wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-5); }

    section { position: relative; }

    /* Section intro block ------------------------------------------------- */
    .sec-head { max-width: 60ch; margin-inline: auto; text-align: center; margin-bottom: var(--space-8); }
    .sec-head .eyebrow { display: inline-block; margin-bottom: var(--space-3); color: var(--magenta-600); }
    .sec-head h2 {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem);
      font-weight: var(--fw-bold);
      letter-spacing: -0.025em;
      line-height: 1.1;
      text-wrap: balance;
    }
    .sec-head p {
      margin-top: var(--space-4);
      font-size: var(--text-lg);
      color: var(--text-muted);
      line-height: var(--leading-relaxed);
      text-wrap: pretty;
    }

    .grad-text {
      background: linear-gradient(100deg, var(--magenta-500) 0%, var(--violet-500) 62%, var(--violet-400) 100%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent;
    }

    /* Browser frame ------------------------------------------------------- */
    .browser {
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      overflow: hidden;
    }
    .browser__bar {
      display: flex; align-items: center; gap: var(--space-3);
      height: 42px; padding: 0 var(--space-4);
      background: var(--neutral-50);
      border-bottom: 1px solid var(--border);
    }
    .browser__dots { display: inline-flex; gap: 7px; }
    .browser__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
    .browser__dots i:nth-child(1) { background: #ff5f57; }
    .browser__dots i:nth-child(2) { background: #febc2e; }
    .browser__dots i:nth-child(3) { background: #28c840; }
    .browser__url {
      flex: 1 1 auto; max-width: 340px; margin-inline: auto;
      display: flex; align-items: center; gap: var(--space-2);
      height: 26px; padding: 0 var(--space-3);
      font-size: var(--text-xs); color: var(--text-muted);
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-full);
    }
    .browser__url svg { width: 12px; height: 12px; color: var(--success-600); }
    .browser img { width: 100%; height: auto; display: block; }

    /* ==================================================================== */
    /* NAV                                                                  */
    /* ==================================================================== */
    .nav {
      position: sticky; top: 0; z-index: 50;
      background: color-mix(in srgb, var(--surface) 78%, transparent);
      backdrop-filter: saturate(1.6) blur(14px);
      -webkit-backdrop-filter: saturate(1.6) blur(14px);
      border-bottom: 1px solid var(--border-faint);
    }
    .nav__inner {
      display: flex; align-items: center; gap: var(--space-5);
      height: 68px;
      width: 100%; max-width: var(--band-max); margin-inline: auto;
      padding-inline: var(--space-5);
    }
    .brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
    .brand:hover { text-decoration: none; }
    .brand img { width: 34px; height: 34px; }
    .brand__word {
      font-family: var(--font-display); font-weight: var(--fw-bold);
      font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--text);
    }
    .brand__word b { color: var(--magenta-600); font-weight: var(--fw-bold); }
    .nav__links { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-6); }
    .nav__links a {
      padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
      font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-muted);
      transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
    }
    .nav__links a:hover { color: var(--text); background: var(--neutral-100); text-decoration: none; }
    .nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
    .nav__signin { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-muted); }
    .nav__signin:hover { color: var(--text); text-decoration: none; }
    @media (max-width: 860px) {
      .nav__links { display: none; }
    }
    /* Keep "Sign in" reachable on mobile; tighten spacing so it fits beside the demo CTA */
    @media (max-width: 480px) {
      .nav__inner { gap: var(--space-3); padding-inline: var(--space-4); }
      .nav__right { gap: var(--space-2); }
    }

    /* ==================================================================== */
    /* HERO                                                                 */
    /* ==================================================================== */
    .hero { position: relative; isolation: isolate; overflow: hidden; }
    .hero__art {
      position: absolute; inset: 0; z-index: -2;
      /* background-image set inline in landing.blade.php (asset() path —
         Vite can't resolve a relative proto url() from this bundled CSS). */
      background-repeat: no-repeat;
      background-position: center 22%;
      background-size: cover;
    }
    /* Scrim: keep the moon glow, darken for AA-legible white text */
    .hero__scrim {
      position: absolute; inset: 0; z-index: -1;
      background:
        radial-gradient(120% 90% at 22% 34%, rgba(230,0,126,0.16) 0%, rgba(230,0,126,0) 46%),
        linear-gradient(180deg, rgba(20,11,42,0.62) 0%, rgba(20,11,42,0.48) 34%, rgba(20,11,42,0.72) 74%, var(--bg-elevated) 100%);
    }
    .hero__inner {
      width: 100%; max-width: var(--page-max); margin-inline: auto;
      padding: clamp(3.5rem, 7vw, 6rem) var(--space-5) 0;
      text-align: center;
    }
    .hero__badge {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: 6px 14px 6px 8px; margin-bottom: var(--space-5);
      font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.01em;
      color: #f4effb;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.20);
      border-radius: var(--radius-full);
      backdrop-filter: blur(6px);
    }
    .hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta-400); box-shadow: 0 0 0 4px rgba(236,70,166,0.25); }
    .hero__badge b { color: #fff; font-weight: var(--fw-bold); }
    .hero h1 {
      font-family: var(--font-display); font-weight: var(--fw-bold);
      font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.25rem);
      line-height: 1.03; letter-spacing: -0.035em;
      color: #fff; text-wrap: balance;
      max-width: 18ch; margin-inline: auto;
    }
    .hero h1 .grad-text {
      background: linear-gradient(100deg, var(--magenta-300) 0%, var(--violet-300) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hero__sub {
      margin: var(--space-5) auto 0; max-width: 56ch;
      font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
      line-height: var(--leading-relaxed);
      color: rgba(244,239,251,0.86); text-wrap: pretty;
    }
    .hero__actions {
      margin-top: var(--space-7);
      display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center;
    }
    .hero__actions .btn-lg { --btn-h: 52px; padding: 0 var(--space-6); font-size: var(--text-lg); border-radius: var(--radius-lg); }
    .btn-glass {
      color: #fff;
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.28);
      backdrop-filter: blur(6px);
    }
    .btn-glass:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.42); color: #fff; }
    .hero__note {
      margin-top: var(--space-4);
      font-size: var(--text-sm); color: rgba(244,239,251,0.66);
      display: inline-flex; align-items: center; gap: var(--space-2);
    }
    .hero__note svg { width: 15px; height: 15px; color: var(--magenta-300); }

    /* Overlapping product shot */
    .hero__product {
      width: 100%; max-width: 1040px; margin: var(--space-8) auto -18%;
      padding-inline: var(--space-5);
      transform: perspective(1800px) rotateX(3deg);
      transform-origin: center top;
    }
    .hero__product .browser { box-shadow: 0 40px 90px -20px rgba(20,11,42,0.55), 0 12px 30px rgba(20,11,42,0.35); }
    .hero-spacer { height: clamp(120px, 15vw, 220px); background: var(--bg-elevated); }

    @media (max-width: 640px) {
      .hero__product { margin-bottom: -12%; transform: none; }
    }

    /* ==================================================================== */
    /* TRUST STRIP                                                          */
    /* ==================================================================== */
    .trust { padding: var(--space-8) 0 var(--space-6); }
    .trust__label {
      text-align: center; margin-bottom: var(--space-5);
      font-size: var(--text-xs); font-weight: var(--fw-semibold);
      letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-subtle);
    }
    .trust__row {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: var(--space-3) var(--space-4);
    }
    .brand-chip {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: 8px var(--space-4);
      font-family: var(--font-display); font-weight: var(--fw-semibold);
      font-size: var(--text-md); letter-spacing: -0.01em; color: var(--neutral-700);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-xs);
    }
    .brand-chip svg { width: 16px; height: 16px; color: var(--violet-500); }

    /* ==================================================================== */
    /* FEATURE GRID                                                         */
    /* ==================================================================== */
    .features { padding: var(--space-10) 0; }
    .feature-grid {
      display: grid; gap: var(--space-4);
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
    .feature {
      padding: var(--space-6);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-sm);
      transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease);
    }
    .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
    .feature__icon {
      display: grid; place-items: center; width: 46px; height: 46px;
      border-radius: var(--radius-md); margin-bottom: var(--space-4);
      color: var(--magenta-700); background: var(--magenta-50);
      border: 1px solid var(--magenta-100);
    }
    .feature__icon svg { width: 22px; height: 22px; }
    .feature:nth-child(2) .feature__icon,
    .feature:nth-child(5) .feature__icon { color: var(--violet-600); background: var(--violet-50); border-color: var(--violet-100); }
    .feature:nth-child(3) .feature__icon,
    .feature:nth-child(6) .feature__icon { color: var(--info-700); background: var(--info-50); border-color: var(--info-100); }
    .feature h3 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.01em; margin-bottom: var(--space-2); }
    .feature p { color: var(--text-muted); line-height: var(--leading-relaxed); font-size: var(--text-md); text-wrap: pretty; }

    /* ==================================================================== */
    /* SHOWCASES (alternating)                                              */
    /* ==================================================================== */
    .showcases { padding: var(--space-9) 0; display: flex; flex-direction: column; gap: clamp(4rem, 8vw, 7rem); }
    .showcase {
      display: grid; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
      grid-template-columns: 1fr 1.12fr;
    }
    .showcase:nth-child(even) .showcase__copy { order: 2; }
    .showcase:nth-child(even) .showcase__media { order: 1; }
    @media (max-width: 900px) {
      .showcase { grid-template-columns: 1fr; gap: var(--space-6); }
      .showcase:nth-child(even) .showcase__copy { order: 1; }
      .showcase:nth-child(even) .showcase__media { order: 2; }
    }
    .showcase__tag {
      display: inline-flex; align-items: center; gap: var(--space-2);
      padding: 4px 12px; margin-bottom: var(--space-4);
      font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--magenta-700); background: var(--magenta-50);
      border: 1px solid var(--magenta-100); border-radius: var(--radius-full);
    }
    .showcase__tag svg { width: 14px; height: 14px; }
    .showcase__copy h3 {
      font-family: var(--font-display); font-weight: var(--fw-bold);
      font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem); letter-spacing: -0.025em; line-height: 1.1;
      text-wrap: balance;
    }
    .showcase__copy p {
      margin-top: var(--space-4); font-size: var(--text-lg); color: var(--text-muted);
      line-height: var(--leading-relaxed); text-wrap: pretty;
    }
    .showcase__list { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
    .showcase__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-md); }
    .showcase__list svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--magenta-500); }
    .showcase__media {
      position: relative;
    }
    .showcase__media .browser { transition: transform var(--motion-slow) var(--ease); }
    .showcase__media:hover .browser { transform: translateY(-6px); }
    /* soft cosmic glow behind media */
    .showcase__media::before {
      content: ""; position: absolute; z-index: -1;
      inset: -8% -6% -14% -6%;
      background: radial-gradient(60% 60% at 50% 40%, rgba(124,31,110,0.16), transparent 70%);
      filter: blur(10px);
    }

    /* ==================================================================== */
    /* HOW IT WORKS (stepper)                                               */
    /* ==================================================================== */
    .how { padding: var(--space-10) 0; }
    .steps {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
      position: relative;
    }
    .steps::before {
      content: ""; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px;
      background: linear-gradient(90deg, var(--magenta-200), var(--violet-200));
      z-index: 0;
    }
    @media (max-width: 820px) {
      .steps { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
      .steps::before { display: none; }
    }
    @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }
    .step { position: relative; z-index: 1; text-align: center; }
    .step__num {
      display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto var(--space-4);
      font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl);
      color: #fff; border-radius: var(--radius-full);
      background: linear-gradient(160deg, var(--magenta-500), var(--violet-500));
      box-shadow: 0 6px 18px rgba(124,31,110,0.30);
      border: 3px solid var(--bg-elevated);
    }
    .step h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }
    .step p { color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); text-wrap: pretty; }

    /* ==================================================================== */
    /* COSMIC BANDS (stats + final CTA)                                     */
    /* ==================================================================== */
    .cosmic-band {
      position: relative; overflow: hidden;
      color: var(--text-on-cosmic);
      background:
        radial-gradient(120% 160% at 88% -20%, rgba(230,0,126,0.28) 0%, rgba(230,0,126,0) 46%),
        radial-gradient(80% 140% at 6% 0%, rgba(124,31,110,0.30) 0%, rgba(124,31,110,0) 52%),
        linear-gradient(150deg, #241146 0%, #34155a 52%, #431a54 100%);
    }
    .cosmic-band::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.75;
      background-image:
        radial-gradient(1.6px 1.6px at 12% 28%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.4px 1.4px at 34% 62%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.2px 1.2px at 58% 22%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.6px 1.6px at 74% 54%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 88% 34%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.2px 1.2px at 46% 82%, rgba(255,255,255,0.6), transparent);
    }
    .cosmic-band > .wrap { position: relative; z-index: 1; }

    .stats { padding: clamp(3rem, 6vw, 5rem) 0; }
    .stats__grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
      text-align: center;
    }
    @media (max-width: 760px) { .stats__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); } }
    .stat b {
      display: block;
      font-family: var(--font-display); font-weight: var(--fw-bold);
      font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); letter-spacing: -0.03em;
      line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
    }
    .stat span { display: block; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--fw-medium); color: rgba(244,239,251,0.78); letter-spacing: 0.02em; }
    .stat b .u { color: var(--magenta-300); }

    /* Final CTA */
    .final { padding: clamp(4rem, 8vw, 6.5rem) 0; text-align: center; }
    .final h2 {
      font-family: var(--font-display); font-weight: var(--fw-bold);
      font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem); letter-spacing: -0.03em; line-height: 1.06;
      color: #fff; text-wrap: balance; max-width: 20ch; margin: 0 auto var(--space-4);
    }
    .final p { max-width: 52ch; margin: 0 auto var(--space-7); font-size: var(--text-lg); color: rgba(244,239,251,0.82); line-height: var(--leading-relaxed); text-wrap: pretty; }
    .final .btn-lg { --btn-h: 54px; padding: 0 var(--space-7); font-size: var(--text-lg); border-radius: var(--radius-lg); }
    .final__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

    /* ==================================================================== */
    /* FOOTER                                                               */
    /* ==================================================================== */
    .footer { background: var(--neutral-950); color: var(--neutral-300); padding: var(--space-9) 0 var(--space-6); }
    .footer__grid {
      display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-6);
    }
    @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); } }
    @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
    .footer__brand img { width: 40px; height: 40px; margin-bottom: var(--space-3); }
    .footer__brand .brand__word { color: #fff; }
    .footer__tag { margin-top: var(--space-3); max-width: 34ch; font-size: var(--text-sm); color: var(--neutral-400); line-height: var(--leading-relaxed); }
    .footer__col h4 {
      font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold);
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-400); margin-bottom: var(--space-4);
    }
    .footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
    .footer__col a { color: var(--neutral-300); font-size: var(--text-base); }
    .footer__col a:hover { color: #fff; text-decoration: none; }
    .footer__bar {
      margin-top: var(--space-8); padding-top: var(--space-5);
      border-top: 1px solid rgba(255,255,255,0.08);
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
      font-size: var(--text-sm); color: var(--neutral-500);
    }
    .footer__bar .social { display: flex; gap: var(--space-2); }
    .footer__bar .social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); color: var(--neutral-400); border: 1px solid rgba(255,255,255,0.10); }
    .footer__bar .social a:hover { color: #fff; background: rgba(255,255,255,0.06); }
    .footer__bar .social svg { width: 17px; height: 17px; }

    /* ==================================================================== */
    /* Scroll reveal                                                        */
    /* ==================================================================== */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
    .reveal.is-in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

    /* ==================================================================== */
    /* DEMO MODAL                                                           */
    /* ==================================================================== */
    dialog.demo-modal {
      width: min(1000px, calc(100vw - var(--space-6)));
      max-height: min(92vh, 760px);
      margin: auto;
      padding: 0;
      border: 0;
      border-radius: var(--radius-2xl);
      background: var(--surface);
      box-shadow: var(--shadow-xl);
      color: var(--text);
      overflow: hidden;
    }
    dialog.demo-modal::backdrop {
      background: rgba(16, 17, 24, 0.55);
      backdrop-filter: blur(3px);
    }
    /* Entry animation only — the sitewide reduced-motion block above already
       collapses this to ~0ms, so no separate override is needed here. */
    dialog.demo-modal[open] { animation: demo-modal-in var(--motion-slow) var(--ease); }
    dialog.demo-modal[open]::backdrop { animation: demo-modal-backdrop-in var(--motion-slow) var(--ease); }
    @keyframes demo-modal-in {
      from { opacity: 0; transform: translateY(14px) scale(0.98); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes demo-modal-backdrop-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* Two-panel layout: form on the left, themed visual on the right */
    .demo-modal__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      align-items: stretch;
      max-height: inherit;
    }
    .demo-modal__form-col { overflow-y: auto; max-height: min(92vh, 760px); }

    .demo-modal__body { position: relative; padding: var(--space-7) var(--space-6) var(--space-6); }

    /* Close button — floating white pill, readable over both panels */
    .demo-modal__close {
      position: absolute; top: var(--space-4); right: var(--space-4); z-index: 3;
      width: 36px; height: 36px; border-radius: var(--radius-full);
      background: #fff; color: var(--violet-900);
      box-shadow: 0 2px 10px rgba(16,17,24,0.22);
    }
    .demo-modal__close:hover { background: var(--magenta-50); color: var(--magenta-600); }

    .demo-modal__eyebrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: var(--text-xs); font-weight: var(--fw-bold);
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--violet-600); background: var(--violet-50);
      border: 1px solid var(--violet-100); border-radius: var(--radius-full);
      padding: 6px 12px; margin-bottom: var(--space-4);
    }
    .demo-modal__eyebrow svg { width: 14px; height: 14px; color: var(--magenta-500); }

    .demo-modal__title {
      font-family: var(--font-display); font-weight: var(--fw-bold);
      font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.12;
    }
    .demo-modal__hl {
      background: linear-gradient(100deg, var(--magenta-500) 0%, var(--violet-500) 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .demo-modal__sub { margin-top: var(--space-3); color: var(--text-muted); line-height: var(--leading-relaxed); }
    .demo-modal__body form { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

    /* Honeypot — present in the DOM for bots, invisible & unfocusable for humans */
    .demo-modal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    .demo-modal__form-error {
      font-size: var(--text-sm); color: var(--danger-600);
      background: var(--danger-50); border: 1px solid var(--danger-100);
      border-radius: var(--radius-md); padding: var(--space-3);
    }

    .demo-modal__foot {
      margin-top: var(--space-2); display: flex; align-items: center;
      justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    }
    .demo-modal__foot-note {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: var(--text-sm); color: var(--text-muted);
    }
    .demo-modal__foot-note svg { width: 15px; height: 15px; color: var(--magenta-400); flex: none; }
    .demo-modal__send { width: 17px; height: 17px; }
    /* Spinner visibility is driven by the button's pending (:disabled) state, NOT
       the `hidden` attribute: createIcons() swaps the <i> for an inline <svg>, and
       `hidden` does not reliably hide inline SVG. Default hidden; show only while
       the submit button is disabled (setPending(true) disables it during send). */
    .demo-modal__spinner { display: none; width: 18px; height: 18px; animation: demo-modal-spin 0.8s linear infinite; }
    #demo-submit:disabled .demo-modal__send { display: none; }
    #demo-submit:disabled .demo-modal__spinner { display: inline-block; }
    @keyframes demo-modal-spin { to { transform: rotate(360deg); } }

    .demo-modal__success { text-align: center; }
    .demo-modal__success-icon {
      display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--space-4);
      border-radius: var(--radius-full); color: var(--success-600); background: var(--success-50);
      border: 1px solid var(--success-100);
    }
    .demo-modal__success-icon svg { width: 28px; height: 28px; }
    .demo-modal__success .btn { margin-top: var(--space-6); }

    /* ---- Right visual panel ---- */
    .demo-modal__visual {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; justify-content: flex-end;
      gap: var(--space-4); padding: var(--space-6);
      background:
        radial-gradient(120% 90% at 100% 0%, rgba(236,70,166,0.35) 0%, transparent 55%),
        linear-gradient(165deg, var(--violet-800) 0%, var(--violet-900) 55%, #16092e 100%);
    }
    .demo-modal__live {
      position: absolute; top: var(--space-5); left: var(--space-5); z-index: 2;
      display: inline-flex; align-items: center; gap: 8px;
      font-size: var(--text-xs); font-weight: var(--fw-semibold);
      letter-spacing: 0.05em; text-transform: uppercase; color: #fff;
      background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
      border-radius: var(--radius-full); padding: 7px 13px;
      backdrop-filter: blur(6px);
    }
    .demo-modal__live-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #3ddc97;
      box-shadow: 0 0 0 4px rgba(61,220,151,0.22);
    }
    .demo-modal__shot {
      position: absolute; inset: 0; display: grid; place-items: center;
      padding-top: var(--space-8);
    }
    .demo-modal__shot img {
      width: 108%; max-width: none; border-radius: var(--radius-lg);
      box-shadow: 0 24px 60px rgba(0,0,0,0.5);
      opacity: 0.96;
    }
    .demo-modal__visual::after {
      content: ""; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(180deg, transparent 45%, rgba(22,9,46,0.72) 100%);
    }
    .demo-modal__stats {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
    }
    .demo-modal__stat {
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius-lg); padding: var(--space-4);
      backdrop-filter: blur(8px);
    }
    .demo-modal__stat-label {
      display: flex; align-items: center; gap: 6px;
      font-size: var(--text-xs); font-weight: var(--fw-semibold);
      letter-spacing: 0.04em; text-transform: uppercase;
      color: rgba(255,255,255,0.72);
    }
    .demo-modal__stat-label svg { width: 14px; height: 14px; color: var(--magenta-300); }
    .demo-modal__stat b {
      display: block; margin-top: 6px;
      font-family: var(--font-display); font-weight: var(--fw-bold);
      font-size: var(--text-2xl); color: #fff; letter-spacing: -0.01em;
    }
    .demo-modal__stat-grad {
      background: linear-gradient(100deg, #3ddc97 0%, var(--magenta-300) 120%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    /* Stack to a single column below the two-panel breakpoint */
    @media (max-width: 860px) {
      dialog.demo-modal { width: min(560px, calc(100vw - var(--space-5))); }
      .demo-modal__grid { grid-template-columns: 1fr; }
      .demo-modal__form-col { max-height: min(92vh, 760px); }
      .demo-modal__visual { display: none; }
      .demo-modal__close { background: #fff; color: var(--violet-900); }
    }

    @media (max-width: 560px) {
      .demo-modal__body { padding: var(--space-6) var(--space-5) var(--space-5); }
      .demo-modal__foot { flex-direction: column-reverse; align-items: stretch; }
      .demo-modal__foot .btn { width: 100%; justify-content: center; }
    }