/* ============================================================
     TOKENS
     ============================================================ */
  :root {
    --lime: #B1FE06;
    --lime-soft: #C9FF52;
    --teal: #19E0A8;
    --violet: #6E4BFF;
    --navy: #0A1430;

    --bg: #0C1117;          /* lighter deep charcoal base (founder: was too dark) */
    --bg-2: #0E141B;
    --ink: #FFFFFF;
    --muted: #A6AFBD;
    --muted-dim: #76808F;

    --field: rgba(255, 255, 255, 0.05);
    --field-border: rgba(255, 255, 255, 0.14);
    --field-border-focus: rgba(177, 254, 6, 0.65);

    --hair: rgba(255, 255, 255, 0.09);
    --panel: rgba(255, 255, 255, 0.035);

    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 32px;       /* generous Cleo-style image card radius */

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --font-display: 'Clash Display', system-ui, sans-serif;   /* wordmark only */
    --font-body: 'Satoshi', system-ui, sans-serif;            /* body + UI */
    --font-serif: 'Fraunces', Georgia, serif;                 /* hero + section headers */
    --font-display-2: 'Teko', 'Arial Narrow', system-ui, sans-serif; /* athletic condensed display (footer watermark only) */
    --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* instrument / data labels */

    --grid-line: rgba(177, 254, 6, 0.07);   /* map-grid hairline */
    --contour: rgba(177, 254, 6, 0.09);      /* topographic contour line */
    --contour-bold: rgba(177, 254, 6, 0.17); /* index (every 5th) contour */
  }

  /* Shared instrument label — mono, tracked, used for eyebrows + HUD data */
  .mono-label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* ============================================================
     RESET
     ============================================================ */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
  }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; }
  a { color: inherit; }

  /* ============================================================
     AMBIENT BACKGROUND — LIGHTER + lit, arrows-motif texture.
     (founder: was a black hole; founder ALSO dislikes the old
     concentric route-loop RINGS and the soft radial glow BLOBS, so
     BOTH are gone.) Order back -> front, all fixed, -z:
       -7  charcoal base fill + a quiet vertical gradient wash
       -5  crisp inline-SVG ARROWS motif derived from the Claimko
           looped-arrows logo (faint, lime, flowing scattered loop)
       -4  drifting starfield canvas (capped)
       -3  film grain
       -2  soft vignette (lit center, gentle edge darkening only)
     There is NO bg-glow (radial glow blobs) layer and NO concentric
     ring layer anymore — the ARROWS motif IS the ambient texture.
     ============================================================ */

  /* Base fill + a quiet vertical wash so the page reads lit, not flat.
     Kept subtle: no glow blobs, just a faint top/mid/bottom tint. */
  .bg-base {
    position: fixed;
    inset: 0;
    z-index: -7;
    background:
      /* soft brand-color pools for depth (lime upper-left, teal upper-right,
         violet anchoring the bottom) — gradient ambiance, not bright blobs */
      radial-gradient(70% 55% at 14% -6%,  rgba(177,254,6,0.12),  transparent 68%),
      radial-gradient(64% 50% at 96% 16%,  rgba(25,224,168,0.10), transparent 70%),
      radial-gradient(82% 62% at 50% 114%, rgba(110,75,255,0.14), transparent 72%),
      /* the quiet vertical wash, kept underneath for an even lit feel */
      linear-gradient(180deg,
        rgba(177,254,6,0.05) 0%,
        rgba(12,17,23,0) 28%,
        rgba(25,224,168,0.025) 54%,
        rgba(12,17,23,0) 76%,
        rgba(110,75,255,0.06) 100%),
      var(--bg);
  }

  /* CRISP inline-SVG ARROWS motif — derived from the Claimko looped-arrows
     logo. Faint, large, lime-tinted chevron/arrow forms scattered in a gentle
     flowing arrangement; per-shape stroke opacity keeps each at ~5-9%. Vector,
     so it stays crisp at any size. REPLACES the removed ring + glow-blob
     layers as the ambient background texture. */

  /* Starfield canvas — cheap, capped, fades behind content. */
  .bg-stars {
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    opacity: 0.85;
  }
  /* CSS fallback sparkle (static, no animation; used if canvas/JS off or reduced motion). */
  .bg-stars-css {
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    display: none;
    background-image:
      radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,0.55), transparent),
      radial-gradient(1.4px 1.4px at 72% 14%, rgba(201,255,82,0.50), transparent),
      radial-gradient(1.4px 1.4px at 41% 58%, rgba(255,255,255,0.40), transparent),
      radial-gradient(1.4px 1.4px at 88% 47%, rgba(255,255,255,0.45), transparent),
      radial-gradient(1.4px 1.4px at 9% 74%, rgba(25,224,168,0.45), transparent),
      radial-gradient(1.4px 1.4px at 60% 82%, rgba(255,255,255,0.38), transparent),
      radial-gradient(1.4px 1.4px at 33% 9%, rgba(255,255,255,0.40), transparent),
      radial-gradient(1.4px 1.4px at 84% 78%, rgba(201,255,82,0.36), transparent);
  }

  /* Film grain — present but subtle. */
  .grain {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: screen;
  }
  .grain svg { width: 100%; height: 100%; }

  /* Vignette — lighter than before. Lit center, soft edge darkening only. */
  .vignette {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(122% 102% at 50% 38%, rgba(12,17,23,0) 60%, rgba(8,11,16,0.34) 90%, rgba(7,9,13,0.52) 100%);
  }

  /* ============================================================
     TOP NAV — STATIC (scrolls away with the page; founder change #9)
     ============================================================ */
  .nav {
    position: static;     /* not sticky/fixed — scrolls away normally */
    z-index: 50;
    width: 100%;
    border-bottom: 1px solid var(--hair);
  }
  .nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity 0.2s var(--ease-out);
  }
  .brand .logo-wrap {
    height: 28px;
    width: 28px;
    display: inline-grid;
    place-items: center;
  }
  /* logo.png kept SMALL + SHARP (native 181x160 -> 28px never upscaled) */
  .brand img {
    height: 28px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(177, 254, 6, 0.30));
  }
  .brand .word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  /* Wordmark lockup: "Claim" in white + "ko" in lime, everywhere the
     wordmark/logo lockup appears (nav, loader, footer). Plain body-text
     mentions of "Claimko" stay normal — they don't use .word-ko. */
  .word-ko { color: var(--lime); }
  .nav-right { display: inline-flex; align-items: center; gap: 22px; }
  .nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    position: relative;
    padding: 6px 2px;
    transition: color 0.18s var(--ease-out);
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.2s var(--ease-out);
  }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.005em;
    color: #08120A;
    text-decoration: none;
    background: linear-gradient(135deg, var(--lime-soft), var(--lime) 60%, #93D900);
    box-shadow: 0 4px 16px rgba(177, 254, 6, 0.26), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out);
    border: 0;
    cursor: pointer;
  }
  .nav-cta:active { transform: translateY(0); }

  /* ============================================================
     MARQUEE TICKER — infinite scrolling news/bonus strip above nav
     ============================================================ */
  .marquee-bar {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(177,254,6,0.12), rgba(25,224,168,0.08) 50%, rgba(177,254,6,0.12));
    border-bottom: 1px solid rgba(177, 254, 6, 0.18);
    position: relative;
    z-index: 60;
  }
  .marquee-bar::before,
  .marquee-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
  }
  .marquee-bar::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), transparent);
  }
  .marquee-bar::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg), transparent);
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 40s linear infinite;
  }
  .marquee-bar:hover .marquee-track {
    animation-play-state: paused;
  }
  .marquee-content {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    flex-shrink: 0;
  }
  .marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 28px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    letter-spacing: 0.01em;
  }
  .mi-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lime);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(177, 254, 6, 0.5);
  }
  .marquee-item .marquee-cta {
    color: var(--lime-soft);
    text-decoration: none;
    font-weight: 700;
    margin-left: 4px;
    transition: color 0.18s var(--ease-out);
  }
  .marquee-item .marquee-cta:hover {
    color: var(--lime);
  }

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

  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
  }

  @media (max-width: 640px) {
    .marquee-item {
      font-size: 12px;
      padding: 9px 20px;
      gap: 8px;
    }
  }

  /* ============================================================
     REVEAL — IntersectionObserver fade + translateY, staggered
     ============================================================ */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity .6s var(--ease-out),
      transform .6s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal].in {
    opacity: 1;
    transform: none;
  }
  /* image cards slide / tilt in on reveal */
  .js [data-reveal-art] {
    opacity: 0;
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal-art].from-right { transform: translateX(40px) rotate(2deg); }
  .js [data-reveal-art].from-left  { transform: translateX(-40px) rotate(-2deg); }
  .js [data-reveal-art].in { opacity: 1; transform: none; }
  /* image fade-in entry — opacity only, composes with parallax transform */
  .js [data-reveal-img] { opacity: 0; transition: opacity 0.9s var(--ease-out); }
  .js [data-reveal-img].in { opacity: 1; }

  /* ============================================================
     SHARED LAYOUT
     ============================================================ */
  .section {
    position: relative;
    z-index: 1;
    width: 100%;
    /* width-based vertical rhythm: generous on desktop, tighter on phones,
       capped so it never balloons on tall/ultrawide screens */
    padding: clamp(72px, 11vw, 120px) 22px;
  }
  .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 20px;
  }
  .eyebrow::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--lime);
    opacity: 0.7;
    box-shadow: 0 0 6px rgba(177,254,6,0.4);
  }
  /* SECTION TITLES — one editorial voice across the whole page (Fraunces) */
  .section-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
  }
  .section-title .em {
    font-style: italic;
    font-weight: 400;
    color: var(--lime);
  }
  .section-title .lime { color: var(--lime); }
  .section-lede {
    font-size: clamp(15px, 3.6vw, 18px);
    line-height: 1.6;
    color: var(--muted);
    font-weight: 500;
    margin: 18px 0 0;
  }

  /* ============================================================
     HERO — split editorial layout: copy + live territory panel
     ============================================================ */
  .hero {
    min-height: calc(100svh - 72px);     /* 72px ≈ static nav */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(28px, 5vh, 56px);
    padding-bottom: 24px;
    overflow: hidden;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(36px, 5vw, 76px);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    flex: 1;
  }
  .hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .hero-copy form { width: 100%; }
  /* HERO HEADLINE — editorial Fraunces serif, the single display voice */
  .hero-headline {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(46px, 5.8vw, 82px);
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin: 0 0 22px;
    color: var(--ink);
  }
  .hero-headline .map {
    font-style: italic;
    font-weight: 400;
    color: var(--lime);
    text-shadow: 0 0 32px rgba(177, 254, 6, 0.18);
  }
  .hero-sub {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(16.5px, 2.4vw, 19px);
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: rgba(231, 236, 243, 0.82);
    margin: 0 0 34px;
    max-width: 440px;
  }
  /* badges inside the final card: a measured gap under the field */
  .final-card .store-badges { margin-top: 30px; justify-content: center; }
  .hero .badge { margin: 0 0 24px; }
  .hero .waitlist-form .fineprint { margin: 12px 0 0; }
  .hero .store-badges { margin-top: 30px; justify-content: flex-start; }
  .hero .waitlist-form,
  .hero .success-state { margin: 0; }

  /* scroll hint — full-width, pinned to the bottom of the first screen */
  .scroll-hint {
    margin: clamp(28px, 4vh, 48px) auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    color: var(--muted-dim);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .scroll-hint .line {
    position: relative;
    width: 1.5px;
    height: 34px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
  }
  .scroll-hint .line::after {
    content: '';
    position: absolute;
    left: 0;
    top: -12px;
    width: 100%;
    height: 12px;
    border-radius: 1px;
    background: var(--lime);
    animation: scrollTick 1.9s var(--ease-out) infinite;
  }
  @keyframes scrollTick {
    0%   { transform: translateY(0); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: translateY(48px); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-hint .line::after { animation: none; top: auto; bottom: 0; opacity: 0.8; }
  }

  /* Status chip — mono instrument label with a live pulse */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 11px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hair);
    border-radius: 100px;
  }
  .badge .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 0 rgba(177,254,6,0.55);
    animation: pulse 2.4s var(--ease-out) infinite;
  }
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(177,254,6,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(177,254,6,0); }
    100% { box-shadow: 0 0 0 0 rgba(177,254,6,0); }
  }
  .badge b { color: var(--lime); font-weight: 500; }

  /* ------------------------------------------------------------
     TERRITORY MAP TILE — a framed topographic trail map with a
     hand-plotted GPS route + cartographic marginalia. No glow, no glass.
     ------------------------------------------------------------ */
  .hero-map {
    position: relative;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 4 / 5;
    margin: 0 auto;
    border-radius: 12px;
    background: #090D12;
    border: 1px solid rgba(177,254,6,0.2);
    box-shadow: 0 36px 90px -56px rgba(0,0,0,0.9);
    overflow: hidden;
    isolation: isolate;
  }
  /* neat-line: the thin inner frame real maps are drawn inside */
  .hero-map::before {
    content: "";
    position: absolute; inset: 11px;
    border: 1px solid rgba(177,254,6,0.14);
    border-radius: 6px;
    z-index: 4; pointer-events: none;
  }
  .hero-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* contour lines (shared) */
  .topo, .topo--bold { fill: none; stroke-width: 1.1; }
  .topo { stroke: var(--contour); }
  .topo--bold { stroke: var(--contour-bold); }

  /* GPS route, drawn map-style: dark casing beneath a clean lime trace */
  .route-fill { fill: rgba(177,254,6,0.06); stroke: none; }
  .route-casing { fill: none; stroke: #090D12; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
  .route-line { fill: none; stroke: var(--lime); stroke-width: 2.1; stroke-linejoin: round; stroke-linecap: round; }
  .route-node { fill: #090D12; stroke: var(--lime); stroke-width: 1.6; }
  .route-flag { fill: var(--lime); }
  .route-runner { fill: #fff; stroke: var(--lime); stroke-width: 1.4; }
  .km-tick { stroke: rgba(235,240,245,0.7); stroke-width: 1.3; }
  .km-dot  { fill: rgba(235,240,245,0.85); }

  /* cartographic marginalia — small, like real map margins */
  .map-chrome { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: var(--font-mono); }
  .map-coord { position: absolute; top: 20px; left: 21px; font-size: 8.5px; letter-spacing: 0.05em; color: var(--muted-dim); line-height: 1.6; }
  .map-north { position: absolute; top: 18px; right: 21px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 9px; letter-spacing: 0.1em; }
  .map-north svg { width: 10px; height: 13px; display: block; }
  .map-scale { position: absolute; left: 21px; bottom: 20px; display: flex; align-items: center; gap: 8px; font-size: 8.5px; letter-spacing: 0.06em; color: var(--muted); }
  .map-scale .bar { display: flex; height: 6px; border: 1px solid var(--muted-dim); }
  .map-scale .bar i { width: 14px; height: 100%; }
  .map-scale .bar i:nth-child(odd) { background: var(--muted-dim); }
  .map-scale .bar i + i { border-left: 1px solid var(--muted-dim); }
  .map-stat { position: absolute; right: 21px; bottom: 17px; text-align: right; }
  .map-stat .v { font-family: var(--font-serif); font-weight: 500; font-size: 23px; line-height: 1; color: var(--ink); }
  .map-stat .v b { color: var(--lime); font-weight: 500; }
  .map-stat .k { display: block; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-dim); margin-top: 5px; }

  @media (prefers-reduced-motion: no-preference) {
    .route-line.draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: routeDraw 2.4s var(--ease-out) 0.3s forwards; }
    .route-casing.draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: routeDraw 2.4s var(--ease-out) 0.3s forwards; }
    @keyframes routeDraw { to { stroke-dashoffset: 0; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .route-runner { display: none; }
  }

  /* ============================================================
     STORE BADGES — App Store + Google Play "Coming soon"
     (CSS/SVG only, no external images; premium dark pill + lime edge)
     ============================================================ */
  .store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 0;
  }
  .final .store-badges { justify-content: center; }
  .store-badge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 17px 9px 14px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border: 1px solid rgba(177,254,6,0.22);
    box-shadow: 0 6px 18px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
    color: var(--ink);
    text-decoration: none;
    cursor: default;
    transition: transform 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  }
  .store-badge .glyph {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: grid; place-items: center;
  }
  .store-badge .glyph svg { width: 22px; height: 22px; display: block; }
  .store-badge .label { display: flex; flex-direction: column; line-height: 1.1; }
  .store-badge .small {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--lime);
  }
  .store-badge .big {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }

  /* ============================================================
     FORM (shared styles for hero + final CTA)
     ============================================================ */
  .waitlist-form {
    width: 100%;
    max-width: 460px;
  }
  .hero .waitlist-form { margin: 0; }
  .final .waitlist-form { margin: 0 auto; }
  .field-row {
    display: flex;
    gap: 9px;
    width: 100%;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-lg);
    padding: 7px;
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .field-row:focus-within {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 4px rgba(177, 254, 6, 0.12), 0 0 30px rgba(177, 254, 6, 0.10);
  }

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

  /* BORDERLESS email input (must-fix: no double-stroke). The input carries
     NO border / NO outline / NO box-shadow and a transparent background, so
     ONLY the bordered .field-row container shows a single stroke. The focus
     ring lives on .field-row:focus-within (below) — the input never paints a
     second ring, in normal OR focus state. Belt-and-suspenders !important so
     no UA / focus-visible rule can reintroduce an inner outline. */
  .email-input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px; /* 16px avoids iOS zoom */
    padding: 0 8px 0 14px;
    min-height: 52px;
  }
  .email-input:focus,
  .email-input:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .email-input::placeholder { color: var(--muted-dim); }

  .submit-btn {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border: 0;
    cursor: pointer;
    min-height: 52px;
    min-width: 132px;
    padding: 0 22px;
    border-radius: 18px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: #08120A;
    background: linear-gradient(135deg, var(--lime-soft), var(--lime) 55%, #93D900);
    box-shadow: 0 6px 20px rgba(177, 254, 6, 0.28), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out), opacity 0.2s ease;
  }
  .submit-btn::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s var(--ease-out);
    pointer-events: none;
  }
  .submit-btn:active { transform: translateY(0); }
  .submit-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
  .submit-btn.done {
    min-width: 52px;
    background: linear-gradient(135deg, var(--lime-soft), var(--lime));
  }

  /* NOTE: .email-input is intentionally NOT in this group — its keyboard-focus
     affordance is the single .field-row:focus-within ring (no second stroke on
     the input itself). */
  .submit-btn:focus-visible,
  .nav-cta:focus-visible,
  .nav-link:focus-visible,
  .brand:focus-visible,
  .store-badge:focus-visible,
  footer a:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
    border-radius: 8px;
  }

  /* Honeypot: off-screen, not display:none (so bots still fill it) */
  .hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .msg {
    min-height: 20px;
    margin: 14px 0 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--muted);
    transition: color 0.2s ease;
  }
  .msg.error { color: #FF9C8A; }
  .msg.info  { color: var(--lime-soft); }
  /* collapse the status line entirely when empty so it doesn't skew the
     rhythm around the field (it only takes space when it has a message) */
  .msg:empty { min-height: 0; margin: 0; }

  .fineprint {
    margin: 14px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted-dim);
    letter-spacing: 0.01em;
  }

  /* ============================================================
     SOCIAL PROOF (avatar stack + count)
     ============================================================ */
  .social-proof {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 24px 0 0;
    flex-wrap: wrap;
  }
  .final .social-proof { justify-content: center; }
  .avatars { display: flex; align-items: center; }
  .avatars .av {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #0C1117;
    margin-left: -10px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.45);
    overflow: hidden;
  }
  .avatars .av:first-child { margin-left: 0; }
  .avatars .av svg { width: 100%; height: 100%; display: block; }
  .proof-text {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.01em;
  }
  .proof-text .count {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* ============================================================
     CLEO-STYLE IMAGE CARDS — large rounded photos, dark+lime treatment,
     hover zoom. Replaces ALL the old fake device-UI mockups.
     ============================================================ */
  .photo {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #0A0F15;
    box-shadow:
      0 34px 80px rgba(0,0,0,0.50),
      0 0 0 1px rgba(255,255,255,0.06),
      0 0 50px rgba(177, 254, 6, 0.10);
    isolation: isolate;
    transition: transform 0.22s var(--ease-out), box-shadow 0.25s var(--ease-out);
  }
  .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* dim + slight desaturate so the lime tint reads cleanly */
    filter: brightness(0.84) contrast(1.04) saturate(0.88);
    transition: transform 0.5s var(--ease-out), filter 0.3s var(--ease-out);
    transform: scale(1.001); /* avoid sub-pixel edge gap on zoom */
  }
  /* lime duotone/multiply wash */
  .photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(177,254,6,0.18), rgba(25,224,168,0.05) 42%, rgba(110,75,255,0.10) 100%);
    mix-blend-mode: soft-light;
  }
  /* dark gradient for text legibility + depth, bottom-weighted */
  .photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(10,15,21,0.06) 0%, rgba(10,15,21,0) 36%, rgba(10,15,21,0.26) 72%, rgba(8,12,18,0.74) 100%),
      radial-gradient(120% 80% at 50% 0%, rgba(10,15,21,0) 52%, rgba(10,15,21,0.32) 100%);
  }
  /* tasteful text label (Cleo-style), no fake UI */
  .photo .photo-cap {
    position: absolute;
    z-index: 4;
    left: 18px; bottom: 16px; right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #EEF3F8;
    text-shadow: 0 1px 14px rgba(0,0,0,0.6);
  }
  .photo .photo-cap .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px rgba(177,254,6,0.9);
    flex: 0 0 auto;
  }
  .photo .photo-cap.off .dot {
    background: #FFB36B;
    box-shadow: 0 0 10px rgba(255,179,107,0.9);
  }

  /* HERO photo card, stamp + hero-art were REMOVED (hero is now text-forward).
     Feature-section + full-bleed band photos keep their .photo styling above. */

  /* ============================================================
     ALTERNATING FEATURE SECTIONS (Cleo image layouts)
     ============================================================ */
  .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(34px, 6vw, 88px);
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(50px, 9vh, 96px) 0;
  }
  .feature + .feature { border-top: 1px solid var(--hair); }
  .feature.flip .feature-copy { order: 2; }
  .feature.flip .feature-art  { order: 1; }
  .feature-copy { min-width: 0; }
  .feature-num {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0 0 18px;
    position: relative;
  }
  .fn-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 3px rgba(177,254,6,0.2), 0 0 12px rgba(177,254,6,0.4);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  .fn-line {
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, var(--lime), rgba(177,254,6,0.2));
    flex-shrink: 0;
    margin-left: -1px;
    position: relative;
    z-index: 1;
  }
  .fn-label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--lime);
    opacity: 0.8;
    margin-left: 10px;
  }
  /* FEATURE TITLES — editorial Fraunces serif */
  .feature-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(29px, 4.8vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 0 0 16px;
    color: var(--ink);
  }
  .feature-title .lime { color: var(--lime); }
  .feature-title .em { font-style: italic; font-weight: 400; color: var(--lime); }
  .feature-text {
    font-size: clamp(15px, 2.4vw, 17px);
    line-height: 1.58;
    font-weight: 500;
    color: var(--muted);
    margin: 0;
    max-width: 420px;
  }
  .feature-art { position: relative; min-width: 0; z-index: 1; }
  .feature-photo { aspect-ratio: 4 / 5; width: 100%; max-width: 460px; margin: 0 auto; }

  /* ============================================================
     FULL-BLEED CINEMATIC BAND (runner-night) + tagline overlay
     ============================================================ */
  .band {
    position: relative;
    width: 100%;
    min-height: clamp(420px, 64vh, 620px);
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg);
  }
  .band-img {
    position: absolute;
    inset: -12% 0 auto 0;          /* oversized vertically — parallax slack */
    z-index: 0;
    width: 100%; height: 124%;
    object-fit: cover;
    object-position: 50% 42%;
    filter: brightness(0.68) contrast(1.06) saturate(0.84);
    will-change: transform;
  }
  .band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(150deg, rgba(177,254,6,0.18), rgba(110,75,255,0.10) 60%, rgba(25,224,168,0.06));
    mix-blend-mode: soft-light;
  }
  .band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(12,17,23,0.50) 0%, rgba(12,17,23,0.08) 40%, rgba(12,17,23,0.50) 100%),
      radial-gradient(90% 80% at 50% 50%, rgba(12,17,23,0) 42%, rgba(8,11,16,0.55) 100%);
  }
  .band-inner {
    position: relative;
    z-index: 3;
    max-width: 760px;
    margin: 0 auto;
    padding: 64px 22px;
    text-align: center;
  }
  .band-eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 16px;
    opacity: 0.92;
  }
  .band-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(38px, 6.4vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
    text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  }
  .band-title .em {
    font-style: italic;
    font-weight: 400;
    color: var(--lime);
    text-shadow: 0 0 30px rgba(177,254,6,0.3);
  }
  .band-sub {
    font-size: clamp(14px, 3vw, 17px);
    line-height: 1.55;
    font-weight: 500;
    color: #C7CEDA;
    margin: 18px auto 0;
    max-width: 460px;
  }

  /* ============================================================
     HOW IT WORKS — three map states: draw, close, hold
     ============================================================ */
  .hiw {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 24px);
    margin: clamp(48px, 7vh, 72px) auto 0;
    max-width: 1080px;
    position: relative;
  }
  .hiw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 2vw, 22px);
    border-radius: var(--radius-xl);
    background: var(--panel);
    border: 1px solid var(--hair);
    text-align: left;
    transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    z-index: 1;
  }
  .hiw-node {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    position: relative;
    z-index: 2;
  }
  .hiw-node svg {
    width: 100%;
    height: 100%;
  }
  .hiw-node-final svg {
    filter: drop-shadow(0 0 8px rgba(177,254,6,0.5));
  }
  /* map stage */
  .hiw-vis {
    position: relative;
    aspect-ratio: 16 / 11;
    width: 100%;
    border-radius: var(--radius);
    background: #090D12;
    border: 1px solid var(--hair);
    overflow: hidden;
    margin-bottom: 20px;
  }
  /* soft map vignette so the contours read as a lit map inset */
  .hiw-vis::after {
    content: "";
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(100% 90% at 50% 40%, transparent 55%, rgba(9,13,18,0.55) 100%);
  }
  .hiw-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
  .hiw-step {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 9px;
  }
  .hiw-card h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(20px, 2.3vw, 23px);
    letter-spacing: -0.014em;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .hiw-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--muted);
  }

  /* shared mini-map vector primitives — topographic, map-style (no glow) */
  .m-casing { fill: none; stroke: var(--bg-2); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .m-route  { fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .m-fill   { fill: rgba(177,254,6,0.08); stroke: none; }
  .m-node   { fill: var(--bg-2); stroke: var(--lime); stroke-width: 1.6; }
  .m-pin    { fill: var(--lime); }
  .m-runner { fill: #fff; stroke: var(--lime); stroke-width: 1.4; }
  .m-ring   { fill: none; stroke: var(--lime); stroke-width: 1.4; opacity: 0; }
  .m-tag {
    position: absolute; z-index: 2; left: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); padding: 3px 8px; border-radius: 4px;
    background: rgba(9,13,18,0.74); border: 1px solid var(--hair);
  }
  .m-tag b { color: var(--lime); font-weight: 600; }
  @media (prefers-reduced-motion: no-preference) {
    .m-draw { stroke-dasharray: 100; animation: mDraw 3.4s var(--ease-out) infinite; }
    @keyframes mDraw { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
    .m-ring { animation: mRing 2.6s var(--ease-out) infinite; }
    @keyframes mRing { 0% { r: 3; opacity: 0.7; } 70% { opacity: 0; } 100% { r: 17; opacity: 0; } }
  }

  /* ============================================================
     BEYOND THE LOOP — marquee roadmap features (AR + Clan Wars)
     Two bespoke CSS-illustrated cards (no stock photos). Both are
     tagged "Soon" because they ship after the core capture MVP.
     ============================================================ */
  .beyond-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.6vw, 26px);
    max-width: 1080px;
    margin: clamp(40px, 6vh, 64px) auto 0;
  }
  .beyond-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-xl);
    background: var(--panel);
    border: 1px solid var(--hair);
    overflow: hidden;
    isolation: isolate;
    text-align: left;
    transition: transform 0.3s var(--ease-out),
                border-color 0.3s var(--ease-out),
                box-shadow 0.3s var(--ease-out);
  }
  .beyond-vis,
  .beyond-kicker,
  .beyond-title,
  .beyond-text,
  .beyond-tags { position: relative; z-index: 1; }

  .soon-pill {
    position: absolute;
    top: clamp(16px, 2.4vw, 22px);
    right: clamp(16px, 2.4vw, 22px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 11px 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hair);
  }
  .soon-pill::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px rgba(177,254,6,0.6);
  }
  .beyond-kicker {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 10px;
  }

  /* ============================================================
     ROADMAP TIMELINE — three phases on a single route-rail
     ============================================================ */
  .rmap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.6vw, 30px);
    max-width: 1120px;
    margin: clamp(52px, 7vh, 78px) auto 0;
  }
  /* the rail: a lime route line threading the phase nodes */
  .rmap::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 16.6%;
    right: 16.6%;
    height: 2px;
    background: linear-gradient(90deg, var(--lime), rgba(177,254,6,0.45) 50%, rgba(177,254,6,0.14));
    z-index: 0;
  }
  .phase {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .phase-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    margin-bottom: 24px;
  }
  .phase-node {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-mono);
    font-size: 14px; font-weight: 600;
    color: #08120A;
    background: linear-gradient(135deg, var(--lime-soft), var(--lime));
    box-shadow: 0 0 0 6px var(--bg), 0 6px 18px rgba(177,254,6,0.32);
  }
  .phase.upcoming .phase-node {
    color: var(--lime);
    background: var(--bg);
    border: 1.5px solid rgba(177,254,6,0.4);
    box-shadow: 0 0 0 6px var(--bg);
  }
  .phase-when {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-dim);
  }
  .phase.live .phase-when { color: var(--lime); }
  /* the card body reuses .beyond-card, recentred inside a phase */
  .phase .beyond-card { width: 100%; flex: 1; text-align: center; }
  .phase .beyond-tags { justify-content: center; }
  .beyond-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(24px, 3.4vw, 32px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .beyond-title .em { font-style: italic; font-weight: 400; color: var(--lime); }
  .beyond-text {
    font-size: clamp(14.5px, 2.2vw, 16px);
    line-height: 1.58;
    font-weight: 500;
    color: var(--muted);
    margin: 0 0 20px;
  }
  .beyond-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
  .beyond-tag {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: #C7CEDA;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hair);
  }

  /* shared map stage — a dark topographic inset */
  .beyond-vis {
    position: relative;
    aspect-ratio: 16 / 10;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: #090D12;
    border: 1px solid var(--hair);
    margin-bottom: 22px;
  }
  .beyond-vis > svg.cap-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
  .beyond-vis::after {
    content: "";
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: radial-gradient(100% 90% at 50% 40%, transparent 55%, rgba(9,13,18,0.5) 100%);
  }

  /* claimed / contested territory fills (drawn inside cap-svg) */
  .terr-mine  { fill: rgba(177,254,6,0.15); }
  .terr-rival { fill: rgba(110,75,255,0.18); }
  .frontier   { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 4 3; stroke-linecap: round; }

  /* ---- AR checkpoints: dotted trail + map waypoints ---- */
  .ar-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
  .ar-line path {
    fill: none;
    stroke: rgba(177,254,6,0.45);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 0.5 7;
  }
  .ar-pin {
    --c: var(--teal);
    position: absolute;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid #090D12;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
  .ar-pin.lime { --c: var(--lime); }
  .ar-pin.active { width: 14px; height: 14px; }
  .ar-ring {
    position: absolute; top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 1.5px solid var(--c);
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  .ar-reward {
    position: absolute;
    z-index: 4;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lime);
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(9,13,18,0.82);
    border: 1px solid rgba(177,254,6,0.4);
    transform: translate(-50%, -50%);
    white-space: nowrap;
  }

  /* ---- Clan wars: contested frontier readout ---- */
  .clan-score {
    position: absolute;
    right: 12px; bottom: 12px;
    z-index: 4;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding: 4px 9px;
    border-radius: 4px;
    background: rgba(9,13,18,0.82);
    border: 1px solid var(--hair);
  }
  .clan-score b { color: var(--lime); }

  /* motion gated: pulsing AR rings */
  @media (prefers-reduced-motion: no-preference) {
    .ar-ring { animation: arPing 2.8s var(--ease-out) infinite; }
    @keyframes arPing {
      0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
      70%  { opacity: 0; }
      100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
    }
  }

  /* ============================================================
     FINAL CTA
     ============================================================ */
  .final { text-align: center; }
  .final .section-title { margin-bottom: 16px; }
  .final-card {
    position: relative;
    max-width: 560px;
    margin: 52px auto 0;
    padding: clamp(34px, 6vw, 56px) clamp(22px, 5vw, 46px);
    border-radius: var(--radius-xl);
    background: var(--panel);
    border: 1px solid rgba(177,254,6,0.18);
    box-shadow: 0 0 60px rgba(177,254,6,0.08);
    overflow: hidden;
  }
  .final-card .bloom {
    position: absolute;
    inset: -30% 10% auto 10%;
    height: 60%;
    background: radial-gradient(circle at 50% 0%, rgba(177,254,6,0.20), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
  }
  .final-card .relative { position: relative; z-index: 2; }
  .final .proof-text { margin-top: 0; }
  .final .store-badges { margin-top: 26px; }

  /* lime territory-flood burst on success */
  .flood-burst {
    position: fixed;
    left: 50%; top: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(177,254,6,0.55), rgba(177,254,6,0) 65%);
    z-index: 80;
    pointer-events: none;
    opacity: 0;
  }
  .flood-burst.go { animation: flood 0.9s var(--ease-out) forwards; }
  @keyframes flood {
    0%   { opacity: 0.0; transform: translate(-50%, -50%) scale(0); }
    20%  { opacity: 0.9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(70); }
  }

  /* ============================================================
     FEATURE A — SCROLL EDGE-LOOP
     A fixed, full-viewport SVG that traces the page perimeter as you
     scroll. Two arms (left + right) start at TOP-CENTER and draw toward
     BOTTOM-CENTER, driven by stroke-dashoffset on a single rAF tied to
     scroll progress. It STAYS OPEN: even at 100% scroll a gap remains
     at bottom-center. Claiming a spot closes the gap (see .closed).
     pointer-events:none so it never blocks clicks / inputs.
     ============================================================ */
  .edge-loop {
    position: fixed;
    inset: 0;
    z-index: 70;            /* above content visually, below loader (9999) */
    pointer-events: none;   /* never intercepts clicks / focus / scroll */
    width: 100vw;
    height: 100%;
    overflow: visible;
  }
  .edge-loop svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .edge-loop .edge-arm {
    fill: none;
    stroke: var(--lime);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(177,254,6,0.5));   /* single shadow — cheaper per-frame redraw */
    /* gentle transition so the near-bottom hint eases in (not a hard flip) */
    transition: stroke 0.5s var(--ease-out), filter 0.5s var(--ease-out);
    /* dash array + offset are set per-arm by JS */
  }
  /* Low-end: drop the (more expensive) glow but keep the line. */
  .edge-loop.no-glow .edge-arm { filter: none; }

  /* REFINEMENT #1 — BOTTOM HINT.
     When the user reaches the bottom (the final-CTA section is in view), the
     edge-loop's descending arms are SUBTLY brightened: it reads as the open
     loop gently reaching to close around the waitlist form. The actual inward
     curve of the arm tips toward the form center is done in the path geometry
     (JS buildPaths), this just lifts the glow a touch. Kept subtle — a hint,
     not loud. The loop still only fully CLOSES on a successful claim. */
  .edge-loop.near-bottom .edge-arm {
    stroke: var(--lime-soft);
    filter: drop-shadow(0 0 7px rgba(177,254,6,0.6));
  }
  .edge-loop.no-glow.near-bottom .edge-arm { filter: none; }

  /* When the loop is sealed on claim, flash brighter for a beat. */
  .edge-loop.closed .edge-arm {
    stroke: var(--lime-soft);
    filter: drop-shadow(0 0 7px rgba(177,254,6,0.85)) drop-shadow(0 0 22px rgba(177,254,6,0.5));
    transition: stroke 0.5s var(--ease-out), filter 0.5s var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    /* still rendered at scroll position, just no flourish transition */
    .edge-loop.closed .edge-arm,
    .edge-loop.near-bottom .edge-arm { transition: none; }
  }

  /* The final-CTA form's frame softly brightens while the bottom is in view —
     the second half of the hint: the loop reaches in, the form lights up to
     receive it. Toggled by `.bottom-active` on .final (single rAF, no layout
     reads). Subtle: a slightly stronger lime border + soft outer glow. */
  .final.bottom-active .field-row {
    border-color: rgba(177, 254, 6, 0.42);
    box-shadow: 0 0 0 3px rgba(177, 254, 6, 0.07), 0 0 30px rgba(177, 254, 6, 0.12);
  }
  /* but never fight an explicit keyboard focus — focus ring always wins */
  .final.bottom-active .field-row:focus-within {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 4px rgba(177, 254, 6, 0.12), 0 0 30px rgba(177, 254, 6, 0.10);
  }
  @media (prefers-reduced-motion: reduce) {
    .final .field-row { transition: none; }
  }

  /* ============================================================
     BOOST / NOS CUE — racing-game speed indicator that points the
     eye at the final waitlist form.

     Layout: a small column sitting just ABOVE the final-card, centered
     on the form. Top to bottom:
       .boost-lines   faint vertical speed-lines (flash on charge)
       .boost-chevs   stacked UP-pointing chevrons (lime, soft glow)
       .boost-gauge   a thin horizontal NOS-style charge bar
       .boost-label   "Claim ↑" microcopy
     IDLE: hidden / very dim. Everything is transform/opacity only.

     States, set by JS on the .boost-cue host:
       (none)        idle — not in view, invisible
       .visible      final-CTA in view: cue appears + gently pulses UP
       .charging     genuine overscroll past the end: gauge fills,
                     chevrons brighten + stack faster, a lime speed-line
                     flash; intensity scales via --charge (0..1)
       .reduced      reduced motion: a calm STATIC "↓ Claim your spot"
                     hint, no charging anim, no auto-scroll
       .lite         low-end: no speed-lines (lighter paint)
     ============================================================ */
  .boost-cue {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding-bottom: 6px;
    pointer-events: none;       /* purely decorative — never blocks the form */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    --charge: 0;                /* 0..1, written by JS during overscroll */
  }
  .boost-cue.visible { opacity: 1; transform: none; }

  /* faint vertical speed-lines behind the chevrons; flare on charge */
  .boost-lines {
    position: relative;
    width: 84px;
    height: 26px;
    margin-bottom: -4px;
    opacity: 0;
    transition: opacity 0.35s var(--ease-out);
  }
  .boost-cue.visible .boost-lines { opacity: 0.28; }
  .boost-lines span {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to top, rgba(177,254,6,0), rgba(177,254,6,0.85));
    transform-origin: bottom center;
    transform: scaleY(0.34);
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  }
  .boost-lines span:nth-child(1) { left: 12%; }
  .boost-lines span:nth-child(2) { left: 31%; }
  .boost-lines span:nth-child(3) { left: 50%; transform: translateX(-50%) scaleY(0.34); }
  .boost-lines span:nth-child(4) { left: 69%; }
  .boost-lines span:nth-child(5) { left: 88%; }
  .boost-cue.lite .boost-lines { display: none; }

  /* stacked UP-pointing chevrons — the core boost glyph */
  .boost-chevs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    filter: drop-shadow(0 0 5px rgba(177,254,6,0.35));
    transition: filter 0.35s var(--ease-out);
  }
  .boost-cue.lite .boost-chevs { filter: none; }
  .boost-chevs svg { display: block; width: 26px; height: 11px; }
  .boost-chevs svg path {
    fill: none;
    stroke: var(--lime);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* three chevrons, each dimmer toward the bottom; they "march up" when the
     cue is visible (subtle, staggered), and brighten/quicken on charge. */
  .boost-chev {
    opacity: 0.5;
    transform: translateY(0);
  }
  .boost-chev.c1 { opacity: 0.95; }
  .boost-chev.c2 { opacity: 0.62; }
  .boost-chev.c3 { opacity: 0.34; }
  .boost-cue.visible .boost-chev { animation: boostMarch 1.9s var(--ease-out) infinite; }
  .boost-cue.visible .boost-chev.c1 { animation-delay: 0s; }
  .boost-cue.visible .boost-chev.c2 { animation-delay: 0.16s; }
  .boost-cue.visible .boost-chev.c3 { animation-delay: 0.32s; }
  @keyframes boostMarch {
    0%   { transform: translateY(2px); }
    32%  { transform: translateY(-2px); }
    100% { transform: translateY(2px); }
  }
  /* CHARGING: chevrons brighten, glow lifts, the march quickens. Scaled by
     --charge so it intensifies smoothly with how hard the user overscrolls. */
  .boost-cue.charging .boost-chevs {
    filter: drop-shadow(0 0 calc(5px + 12px * var(--charge)) rgba(177,254,6, calc(0.45 + 0.45 * var(--charge))));
  }
  .boost-cue.charging .boost-chev { opacity: calc(0.6 + 0.4 * var(--charge)); animation-duration: 0.7s; }
  .boost-cue.charging .boost-chev.c1 { opacity: 1; }
  .boost-cue.charging.lite .boost-chevs { filter: none; }
  /* CHARGING speed-lines flare up with the charge */
  .boost-cue.charging .boost-lines { opacity: calc(0.3 + 0.5 * var(--charge)); }
  .boost-cue.charging .boost-lines span { transform: scaleY(calc(0.4 + 0.6 * var(--charge))); }
  .boost-cue.charging .boost-lines span:nth-child(3) {
    transform: translateX(-50%) scaleY(calc(0.4 + 0.6 * var(--charge)));
  }

  /* thin NOS-style charge gauge */
  .boost-gauge {
    position: relative;
    width: 120px;
    height: 3px;
    border-radius: 3px;
    background: rgba(177,254,6,0.14);
    overflow: hidden;
  }
  .boost-gauge i {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: calc(var(--charge) * 100%);
    border-radius: 3px;
    background: linear-gradient(90deg, var(--lime-soft), var(--lime));
    box-shadow: 0 0 8px rgba(177,254,6,0.6);
    transition: width 0.12s linear;
  }
  /* the gauge sits quiet until visible, brighter while charging */
  .boost-cue .boost-gauge { opacity: 0.55; transition: opacity 0.35s var(--ease-out); }
  .boost-cue.charging .boost-gauge { opacity: 1; }

  .boost-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
    opacity: 0.72;
    transition: opacity 0.3s var(--ease-out);
    margin: 0;
  }
  .boost-cue.charging .boost-label { opacity: 1; }

  /* "boost-charged" response on the final form itself: a stronger lime glow
     that scales with --charge. Layered over the existing .bottom-active glow,
     and still yields to an explicit keyboard focus ring. */
  .final.boost-charged .field-row {
    border-color: rgba(177, 254, 6, calc(0.42 + 0.38 * var(--charge, 0)));
    box-shadow:
      0 0 0 calc(3px + 3px * var(--charge, 0)) rgba(177, 254, 6, calc(0.08 + 0.12 * var(--charge, 0))),
      0 0 calc(30px + 30px * var(--charge, 0)) rgba(177, 254, 6, calc(0.12 + 0.2 * var(--charge, 0)));
  }
  .final.boost-charged .field-row:focus-within {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 4px rgba(177, 254, 6, 0.12), 0 0 30px rgba(177, 254, 6, 0.10);
  }

  /* REDUCED MOTION: calm STATIC hint. No marching, no charge flare, no
     speed-lines, no auto-scroll (the JS also gates the scroll-focus nudge).
     The cue shows a steady "↓ Claim your spot" affordance pointing DOWN at
     the form, always visible (no entrance translate either). */
  @media (prefers-reduced-motion: reduce) {
    .boost-cue {
      transition: none !important;
      opacity: 1;
      transform: none;
    }
    .boost-lines { display: none !important; }
    .boost-chevs { animation: none !important; }
    .boost-cue .boost-chev,
    .boost-cue.charging .boost-chev { animation: none !important; opacity: 0.85; transform: none; }
    .boost-gauge { display: none !important; }
    .final.boost-charged .field-row,
    .final.bottom-active .field-row { transition: none; }
  }
  /* The reduced-motion variant flips the chevrons to point DOWN and swaps the
     label, both toggled by the .reduced class the JS adds in reduced mode. */
  .boost-cue.reduced .boost-chevs { transform: scaleY(-1); }
  .boost-cue.reduced .boost-label::before { content: "↓ "; }

  /* ============================================================
     BOOST v2 — a single THICK gradient chevron at the very bottom of the
     page that "dissolves" upward into the form above (founder redesign).
     These rules come after the legacy boost rules, so they win the cascade.
     ============================================================ */
  .boost-cue {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 14px auto 30px;
    padding: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    --charge: 0;
  }
  .boost-cue.visible { opacity: 1; transform: none; }
  /* subtle closing line at the very bottom */
  .loop-note {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.01em;
    color: var(--muted-dim);
  }
  .loop-note b {
    font-weight: 700;
    color: var(--lime);
    opacity: 0.85;
  }
  @media (prefers-reduced-motion: reduce) {
    .boost-cue { opacity: 0; }                 /* still hidden until the bottom */
    .boost-cue.visible { opacity: 1; }
  }

  /* ============================================================
     FEATURE B — CLAIM SUCCESS SCREEN (full takeover overlay)
     Same craft as the loader. Shows the now-CLOSED perimeter loop +
     headline. Dismissible (button / backdrop / Esc). Does NOT trap
     focus beyond a simple close affordance; restores body scroll on
     dismiss.
     ============================================================ */
  .claim-screen {
    position: fixed;
    inset: 0;
    z-index: 9990;          /* above edge-loop + content, below loader splash */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
  }
  .claim-screen.show { display: flex; }
  /* lock scroll while the success takeover is up */
  .claim-open, .claim-open body { overflow: hidden; }

  .claim-backdrop {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(177,254,6,0.12) 0%, rgba(12,17,23,0) 56%),
      radial-gradient(90% 80% at 80% 100%, rgba(25,224,168,0.07) 0%, rgba(12,17,23,0) 60%),
      rgba(8,11,16,0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
  }
  .claim-screen.show .claim-backdrop { opacity: 1; }

  .claim-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 460px;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.5s 0.08s var(--ease-out), transform 0.55s 0.08s var(--ease-out);
  }
  .claim-screen.show .claim-stage { opacity: 1; transform: none; }

  /* the now-closed loop mark — same family as the loader mark */
  .claim-mark {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    margin: 0 0 24px;
  }
  .claim-loop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .claim-loop .c-track {
    fill: none;
    stroke: rgba(177,254,6,0.12);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .claim-loop .c-fill {
    fill: rgba(177,254,6,0.16);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.6);
  }
  .claim-screen.show .claim-loop .c-fill { animation: loopFill 0.62s 0.3s var(--ease-out) forwards; }
  .claim-loop .c-route {
    fill: none;
    stroke: var(--lime);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 7px rgba(177,254,6,0.6));
    /* full closed loop — drawn shut on reveal */
  }
  .claim-screen.show .claim-loop .c-route {
    animation: claimDraw 0.7s 0.12s var(--ease-out) forwards;
  }
  @keyframes claimDraw { to { stroke-dashoffset: 0; } }
  .claim-loop .c-pin { fill: var(--lime); opacity: 0; }
  .claim-screen.show .claim-loop .c-pin { animation: pinPop 0.5s 0.38s var(--ease-out) forwards; }
  .claim-mark img {
    position: relative;
    z-index: 2;
    width: 50px;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(177,254,6,0.45));
  }

  .claim-stage h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.02;
    letter-spacing: -0.018em;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .claim-stage h2 .em { font-style: italic; font-weight: 400; color: var(--lime); }
  .claim-stage p {
    margin: 0;
    font-size: clamp(14px, 3.4vw, 16px);
    line-height: 1.55;
    font-weight: 500;
    color: var(--muted);
    max-width: 360px;
  }
  .claim-dismiss {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 100px;
    border: 1px solid rgba(177,254,6,0.32);
    background: rgba(255,255,255,0.045);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.18s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  }
  .claim-dismiss:active { transform: translateY(0); }
  .claim-close {
    position: absolute;
    z-index: 3;
    top: max(18px, env(safe-area-inset-top));
    right: 18px;
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--hair);
    background: rgba(255,255,255,0.05);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.18s var(--ease-out);
  }
  .claim-close svg { width: 18px; height: 18px; }
  .claim-close:focus-visible,
  .claim-dismiss:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
  }
  @media (hover: hover) and (pointer: fine) {
    .claim-dismiss:hover {
      transform: translateY(-1px);
      border-color: rgba(177,254,6,0.55);
      box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 26px rgba(177,254,6,0.16);
    }
    .claim-close:hover { color: var(--ink); border-color: rgba(177,254,6,0.4); transform: rotate(90deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .claim-backdrop,
    .claim-stage { transition: none !important; }
    .claim-screen.show .claim-loop .c-route,
    .claim-screen.show .claim-loop .c-fill,
    .claim-screen.show .claim-loop .c-pin { animation: none !important; }
    .claim-loop .c-route { stroke-dashoffset: 0 !important; }
    .claim-loop .c-fill { opacity: 0.42; transform: scale(1); }
    .claim-loop .c-pin { opacity: 0.9; }
    .claim-close:hover { transform: none; }
  }

  /* microcopy near each form — subtle, muted, optional lime accent */
  .claim-hint {
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--muted-dim);
  }
  .final .claim-hint { text-align: center; }
  .claim-hint .accent { color: var(--lime); opacity: 0.9; }

  /* Success state (shared) */
  .success-state {
    display: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 30px 26px;
    border-radius: var(--radius-lg);
    background: rgba(177, 254, 6, 0.05);
    border: 1px solid rgba(177, 254, 6, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(177, 254, 6, 0.10);
    text-align: center;
  }
  .hero .success-state { margin: 0; }
  .success-state.show {
    display: block;
    animation: pop 0.6s var(--ease-out) both;
  }
  @keyframes pop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .check {
    width: 52px; height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 40%, rgba(177,254,6,0.30), rgba(177,254,6,0.08));
    border: 1px solid rgba(177, 254, 6, 0.4);
  }
  .check svg { width: 26px; height: 26px; }
  .check svg path {
    stroke: var(--lime);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: draw 0.5s 0.2s var(--ease-out) forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .success-state h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 24px;
    margin: 0 0 7px;
    color: var(--ink);
  }
  .success-state p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--muted);
    font-weight: 500;
  }

  /* Footer — logo + minimal links + copyright (no origin tagline) */
  footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    width: 100%;
    padding: clamp(76px, 12vh, 132px) 22px calc(40px + env(safe-area-inset-bottom));
  }
  /* rising brand glow from the very bottom — sazabi-style page closer */
  footer::before {
    content: "";
    position: absolute;
    left: 50%; bottom: -55%;
    width: 130%; aspect-ratio: 2 / 1;
    transform: translateX(-50%);
    background: radial-gradient(50% 50% at 50% 50%,
      rgba(177,254,6,0.20), rgba(25,224,168,0.07) 48%, transparent 72%);
    filter: blur(6px);
    z-index: 0;
    pointer-events: none;
  }
  /* giant faint CLAIMKO wordmark watermark, clipped at the baseline */
  footer::after {
    content: "CLAIMKO";
    position: absolute;
    left: 50%; bottom: -0.16em;
    transform: translateX(-50%);
    font-family: var(--font-display-2);
    font-weight: 700;
    font-size: clamp(96px, 26vw, 340px);
    line-height: 0.8;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: rgba(177,254,6,0.07);
    z-index: 0;
    pointer-events: none;
    -webkit-user-select: none; user-select: none;
  }
  .footer-inner {
    position: relative;
    z-index: 2;
    max-width: 1140px;
    margin: 0 auto;
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    gap: clamp(34px, 6vw, 84px);
    flex-wrap: wrap;
  }
  /* brand block */
  .footer-about { max-width: 330px; }
  .footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
  }
  .footer-logo img { height: 24px; width: auto; }
  .footer-logo .word-lockup {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
    transition: color 0.2s ease;
  }
  .footer-tag {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.45;
    color: var(--muted);
    margin: 14px 0 18px;
  }
  .footer-join {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 14px;
    color: var(--lime);
    text-decoration: none;
  }
  .footer-join span { transition: transform 0.2s var(--ease-out); }
  /* link columns */
  .footer-cols {
    display: flex;
    gap: clamp(40px, 7vw, 96px);
    flex-wrap: wrap;
  }
  .footer-col { display: flex; flex-direction: column; gap: 12px; }
  .footer-col h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-dim);
    margin: 0 0 4px;
  }
  .footer-col a {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  /* legal row */
  .footer-legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 22px;
    padding-top: 0;
    border-top: none;
    font-size: 12.5px;
    color: var(--muted-dim);
  }
  .footer-made { color: var(--muted); }
  .footer-route {
    margin-top: clamp(42px, 6vh, 66px);
    padding-top: 0;
  }
  .footer-route svg {
    display: block;
    width: 100%;
    height: 2px;
  }

  /* ============================================================
     HOVER STATES — pointer:fine only (founder change #6)
     ============================================================ */
  @media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--ink); }
    .nav-link:hover::after { transform: scaleX(1); }
    .nav-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(177, 254, 6, 0.38), inset 0 1px 0 rgba(255,255,255,0.45);
    }
    .brand:hover { opacity: 0.85; }
    .submit-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(177, 254, 6, 0.40), inset 0 1px 0 rgba(255,255,255,0.45);
    }
    .submit-btn:hover::after { left: 130%; }
    /* feature image cards: lift + scale + lime ring/glow + gentle image zoom */
    .photo:hover {
      transform: translateY(-5px) scale(1.012);
      box-shadow:
        0 44px 96px rgba(0,0,0,0.55),
        0 0 0 1px rgba(177,254,6,0.40),
        0 0 64px rgba(177, 254, 6, 0.22);
    }
    .photo:hover img { transform: scale(1.06); filter: brightness(0.9) contrast(1.05) saturate(0.95); }
    /* store badges */
    .store-badge:hover {
      transform: translateY(-2px);
      border-color: rgba(177,254,6,0.55);
      box-shadow: 0 12px 26px rgba(0,0,0,0.4), 0 0 30px rgba(177,254,6,0.18), inset 0 1px 0 rgba(255,255,255,0.07);
    }
    /* how-it-works: lift the map card on hover */
    .hiw-card:hover {
      transform: translateY(-4px);
      border-color: rgba(177,254,6,0.28);
      box-shadow: 0 22px 52px -24px rgba(0,0,0,0.7), 0 0 40px rgba(177,254,6,0.08);
    }
    /* roadmap (AR / Clan Wars) cards */
    .beyond-card:hover {
      transform: translateY(-4px);
      border-color: rgba(177,254,6,0.28);
      box-shadow: 0 22px 52px -24px rgba(0,0,0,0.7), 0 0 40px rgba(177,254,6,0.08);
    }
    /* footer / social links */
    .footer-col a {
      position: relative;
      transition: color 0.2s ease, transform 0.2s var(--ease-out);
    }
    .footer-col a:hover { color: var(--ink); transform: translateX(4px); }
    .footer-join:hover span { transform: translateX(5px); }
    .footer-logo:hover .word-lockup { color: var(--lime-soft); }
  }

  /* ============================================================
     RESPONSIVE — mobile-first stack
     ============================================================ */
  @media (max-width: 980px) {
    /* Hero: stack the copy over the territory panel, re-centre the column. */
    .hero-grid { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
    .hero-copy { align-items: center; text-align: center; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero .badge { margin-left: auto; margin-right: auto; }
    .hero .store-badges { justify-content: center; }
    .hero .waitlist-form { margin-left: auto; margin-right: auto; }
    .hero-map { order: 2; }
  }
  @media (max-width: 900px) {
    .feature { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .feature .feature-copy { order: 1 !important; }
    .feature .feature-art  { order: 2 !important; }
    .feature-text { margin-left: auto; margin-right: auto; }

    .hiw { grid-template-columns: 1fr; gap: 16px; max-width: 460px; }

    .rmap { grid-template-columns: 1fr; gap: 28px; max-width: 460px; }
    .rmap::before { display: none; }
  }
  @media (max-width: 560px) {
    .nav-right .nav-link { display: none; }   /* keep nav clean on small screens */
  }
  @media (max-width: 420px) {
    .field-row { flex-direction: column; gap: 8px; }
    .submit-btn { width: 100%; }
    .submit-btn.done { width: 100%; }
    .email-input { min-height: 48px; padding: 0 14px; }
    .nav .brand .word { font-size: 19px; }
    .store-badge { flex: 1 1 auto; justify-content: center; }
  }

  /* ============================================================
     REDUCED MOTION — force final state, no parallax / loops / spin
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .badge .dot { animation: none !important; }
    .js [data-reveal],
    .js [data-reveal-art] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .js [data-reveal-img] { opacity: 1 !important; transition: none !important; }
    /* parallax layers sit at their resting position, no scroll-linked shift */
    .band-img { transform: none !important; }
    .submit-btn:hover { transform: none; }
    .submit-btn:hover::after { left: -60%; }
    .photo:hover { transform: none; }
    .photo:hover img { transform: scale(1.001); }
  }

  /* ============================================================
     LOADING SCREEN — intentional, cinematic brand splash.
     A deliberate front door: brand mark + wordmark + label, a lime
     route-loop that DRAWS itself closed, a 0->100 count + hairline
     progress bar, then a curtain wipe-up reveal of the page.

     Layers (top of stack):
       .loader            full-screen overlay, two curtain panels
       .loader-stage      centered brand composition (scales/fades on exit)
     ============================================================ */

  /* Pre-loader page state: while the overlay is up we lock scroll, and the
     hero content waits in its "down" pose to rise in once the curtain opens.
     `.loading-active` is set on <html> by inline JS before paint. */
  .loading-active, .loading-active body { overflow: hidden; }

  /* ------------------------------------------------------------------
     PURE-CSS PARTIAL-JS BACKSTOP (must-fix #3).
     The inline <head> script locks scroll (.loading-active) and the
     .loader overlay is visible + pointer-events:auto. The ONLY thing
     that unlocks/removes it is the bottom <script>'s dismiss(). If that
     script never parses/executes (CSP, syntax error, network), the page
     would otherwise be permanently scroll-locked behind a click-blocking
     overlay.

     So we arm CSS-only, JS-independent escape hatches that fire at
     ~5s — comfortably AFTER the JS hard failsafe (2.6s) + curtain
     removal (~0.82s), so on the happy path the overlay is long gone and
     these never become visible:

       1. .loader animates to opacity:0 + pointer-events:none via
          @keyframes loaderKill, so the full-screen panel can no longer
          be seen OR block clicks. (We rely on opacity + pointer-events,
          which every engine animates reliably; `display`/`visibility`
          are NOT dependable from keyframes, so they are not load-bearing.)
       2. The scroll lock lives on BOTH html (.loading-active) and body
          (.loading-active body). loaderUnlock animates `overflow` back to
          visible on EACH of them, so the page is always scrollable again.
          (Unlocking html alone is not enough — body overflow:hidden would
          still trap the scroll.)
       3. The held-down hero rises in via heroReveal (defined below).

     `animation-fill-mode: forwards` holds the end state. Because JS
     removes .loader from the DOM and strips .loading-active well before
     5s in every normal path, this is a true safety net, not part of
     the visible sequence. Reduced-motion already hides the loader and
     never sets .loading-active, so these are inert there. */
  @keyframes loaderKill {
    to {
      opacity: 0;
      pointer-events: none;
    }
  }
  @keyframes loaderUnlock {
    to { overflow: visible; }
  }

  .loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: transparent;       /* the curtain panels paint the fill */
    pointer-events: auto;
    /* JS-independent kill switch: if the dismiss script never runs, the
       overlay fades out + stops blocking clicks at 5s. */
    animation: loaderKill 0.01s linear 5s forwards;
  }
  /* Same idea for the scroll lock: restore overflow even with no JS — on
     BOTH the html element and the body, since both are locked above. */
  .loading-active {
    animation: loaderUnlock 0.01s linear 5s forwards;
  }
  .loading-active body {
    animation: loaderUnlock 0.01s linear 5s forwards;
  }

  /* Two-panel curtain so the overlay can WIPE UP / open off the screen on
     exit. Both panels share the deep base + a soft top-center lime/teal wash
     so the splash reads lit, matching the page atmosphere. */
  .loader-curtain {
    position: absolute;
    left: 0; right: 0;
    height: 50%;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(177,254,6,0.10) 0%, rgba(12,17,23,0) 56%),
      radial-gradient(90% 80% at 80% 100%, rgba(25,224,168,0.06) 0%, rgba(12,17,23,0) 60%),
      #0C1117;
    will-change: transform;
    transition: transform 0.72s var(--ease-out);
  }
  .loader-curtain.top { top: 0; }
  .loader-curtain.bottom {
    bottom: 0;
    background:
      radial-gradient(90% 80% at 12% 0%, rgba(110,75,255,0.07) 0%, rgba(12,17,23,0) 60%),
      #0C1117;
  }
  /* hairline lime seam between the panels — the "horizon" the curtain opens on */
  .loader-curtain.top::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(177,254,6,0.34) 50%, transparent);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
  }
  .loader.done .loader-curtain.top    { transform: translateY(-100%); }
  .loader.done .loader-curtain.bottom { transform: translateY(100%); }
  .loader.done .loader-curtain.top::after { opacity: 1; }

  /* Centered brand composition sits above both curtain panels. */
  .loader-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    will-change: transform, opacity;
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .loader.done .loader-stage {
    opacity: 0;
    transform: translateY(-10px) scale(1.04);
  }
  /* topographic contour backdrop — the territory being acquired */
  .loader-topo {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: gridIn 1s var(--ease-out) 0.15s forwards;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 48%, #000 25%, transparent 78%);
            mask-image: radial-gradient(70% 60% at 50% 48%, #000 25%, transparent 78%);
  }
  @keyframes gridIn { to { opacity: 1; } }

  /* Crisp brand mark (logo.png small + sharp), set over the route-loop. */
  .loader-mark {
    position: relative;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    margin: 0 0 26px;
  }
  /* the self-drawing route-loop SVG fills the mark box behind the logo */
  .loader-loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .loader-loop .track {
    fill: none;
    stroke: rgba(177,254,6,0.12);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .loader-loop .route {
    fill: none;
    stroke: var(--lime);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(177,254,6,0.4));
    /* dash length + offset set by JS for the self-drawing effect */
  }
  /* the lime "territory fill" inside the loop — flashes as the loop closes */
  .loader-loop .fill {
    fill: rgba(177,254,6,0.16);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.6);
  }
  .loader.fill-go .loader-loop .fill {
    animation: loopFill 0.62s var(--ease-out) forwards;
  }
  @keyframes loopFill {
    0%   { opacity: 0; transform: scale(0.6); }
    45%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0.42; transform: scale(1); }
  }
  /* a single pin where the loop closes */
  .loader-loop .pin {
    fill: var(--lime);
    opacity: 0;
  }
  .loader.fill-go .loader-loop .pin {
    animation: pinPop 0.5s var(--ease-out) forwards;
  }
  @keyframes pinPop {
    0%   { opacity: 0; }
    40%  { opacity: 1; }
    100% { opacity: 0.9; }
  }

  /* crisp small logo over the loop */
  .loader-mark img {
    position: relative;
    z-index: 2;
    width: 46px;
    height: auto;
    filter: drop-shadow(0 0 9px rgba(177,254,6,0.35));
    opacity: 0;
    transform: scale(0.82);
    animation: markIn 0.6s 0.18s var(--ease-out) forwards;
  }
  @keyframes markIn {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* Wordmark — Clash Display, the brand voice. */
  .loader-word {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 9vw, 52px);
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--ink);
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    animation: stageRise 0.6s 0.28s var(--ease-out) forwards;
  }
  /* One-line status label — mono instrument readout. Flips to "Territory locked". */
  .loader-label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-dim);
    margin: 16px 0 0;
    min-height: 16px;
    opacity: 0;
    transform: translateY(10px);
    animation: stageRise 0.6s 0.38s var(--ease-out) forwards;
    transition: color 0.3s var(--ease-out);
  }
  .loader.locked .loader-label { color: var(--lime); }
  @keyframes stageRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Progress: a thin territory-acquisition bar + mono count. */
  .loader-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(240px, 70vw);
    margin: 28px 0 0;
    opacity: 0;
    transform: translateY(10px);
    animation: stageRise 0.6s 0.46s var(--ease-out) forwards;
  }
  .loader-bar {
    display: block;
    position: relative;
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: rgba(255,255,255,0.10);
    overflow: hidden;
  }
  .loader-bar i {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lime-soft), var(--lime));
    box-shadow: 0 0 10px rgba(177,254,6,0.6);
  }
  .loader-count {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 34px;
  }
  .loader-count::after { content: "%"; opacity: 0.55; margin-left: 1px; }
  .loader.locked .loader-count { color: var(--lime); }

  /* Hero hand-off: hero content waits low, then rises in after the curtain
     opens (mirrors the existing data-reveal motion, just orchestrated). */
  .js.loading-active [data-loader-hero] {
    opacity: 0;
    transform: translateY(28px);
  }
  .js [data-loader-hero] {
    transition:
      opacity 0.6s var(--ease-out),
      transform 0.6s var(--ease-out);
    transition-delay: var(--hd, 0ms);
  }
  .js [data-loader-hero].hero-in {
    opacity: 1;
    transform: none;
  }

  /* ------------------------------------------------------------------
     HERO HAND-OFF BACKSTOP (must-fix #3, partner to the scroll-lock net).
     The hero content above is held at opacity:0 by `.js.loading-active
     [data-loader-hero]`. Its rise-in is normally triggered by dismiss()
     adding `.hero-in`. If the bottom script never runs, the hero would
     stay invisible. So we also auto-reveal it from CSS at ~5s, matching
     the loader kill timing, so the page content can never be left blank. */
  @keyframes heroReveal {
    to { opacity: 1; transform: none; }
  }
  .js.loading-active [data-loader-hero] {
    animation: heroReveal 0.6s var(--ease-out) 5s forwards;
  }

  /* ============================================================
     REDUCED MOTION + no-JS — loader never blocks the page.
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    .loader { display: none !important; animation: none !important; }
    .js.loading-active [data-loader-hero],
    .js [data-loader-hero] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
    /* No loader plays under reduced motion, so the scroll-lock net is inert. */
    .loading-active,
    .loading-active body { animation: none !important; }
  }
  /* If JS is off, never leave the page hidden behind an overlay. (Note:
     this only covers the pre-.js state; the keyframe backstops above cover
     the case where .js was set but the dismiss script never ran.) */
  html:not(.js) .loader { display: none; }

  /* ambient map grid (moved from inline) */
  .bg-grid {
    position: fixed; inset: 0; z-index: -6; pointer-events: none; opacity: 0.55;
    background-image:
      linear-gradient(rgba(177,254,6,0.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(177,254,6,0.032) 1px, transparent 1px);
    background-size: 66px 66px;
    -webkit-mask-image: radial-gradient(125% 85% at 50% 28%, #000 0%, rgba(0,0,0,0) 72%);
            mask-image: radial-gradient(125% 85% at 50% 28%, #000 0%, rgba(0,0,0,0) 72%);
  }

  /* branded custom cursors (moved from inline) */
  @media (pointer: fine) {
    html, body {
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M5 2 L5 20.5 L9.8 16.3 L12.6 22.8 L15.7 21.4 L12.9 15 L19.5 14.6 Z' fill='%23B1FE06' stroke='%230C1117' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 2, auto;
    }
    a, button, label, select, [role="button"],
    .store-badge, .feature-card, [data-scroll], .submit-btn, .nav-cta {
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 26 26'%3E%3Cpath d='M5 2 L5 20.5 L9.8 16.3 L12.6 22.8 L15.7 21.4 L12.9 15 L19.5 14.6 Z' fill='%23C9FF52' stroke='%230C1117' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='20.5' cy='5.5' r='3' fill='%23B1FE06'/%3E%3C/svg%3E") 5 2, pointer;
    }
  }