/* Self-hosted webfonts (latin subset, only the weights used). Generated from Google Fonts.
   Served same-origin to remove the third-party render-blocking request and keep LCP fast. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/geist-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/geist-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/geist-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('./assets/fonts/geist-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/geistmono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/geistmono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/geistmono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   LedgerScan landing — design system
   Dark, restrained. Emerald = "verified" signal only.
   Geist (display) · Inter (body) · Geist Mono (data)
   ============================================================ */

:root {
  /* neutrals, tinted toward emerald-cool */
  --bg:            #05080f;
  --bg-2:          #070b15;
  --surface:       #0b111c;
  --surface-2:     #0f1828;
  --surface-3:     #142036;
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  --fg:   rgba(244, 248, 255, 0.96);
  --fg-2: rgba(214, 226, 245, 0.60);
  --fg-3: rgba(214, 226, 245, 0.50);

  /* signal: emerald = authenticity / verified */
  --emerald:       #10b981;
  --emerald-text:  #2ee6a6;
  --emerald-soft:  rgba(16, 185, 129, 0.12);
  --emerald-line:  rgba(16, 185, 129, 0.30);
  --emerald-glow:  rgba(16, 185, 129, 0.28);

  /* third state: amber = in transit / monitoring / awaiting confirmation
     (the lifecycle step between verified and flagged) */
  --amber:      #f59e0b;
  --amber-text: #fbbf24;
  --amber-soft: rgba(245, 158, 11, 0.12);
  --amber-line: rgba(245, 158, 11, 0.34);

  /* counter-signal: only in the "caught" beat + unsafe verdict */
  --rose:      #f43f5e;
  --rose-text: #ff7088;
  --rose-soft: rgba(244, 63, 94, 0.12);
  --rose-line: rgba(244, 63, 94, 0.32);

  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', monospace;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;
  --radius-xl: 34px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* ease-out-quint-ish */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv01";
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input { font: inherit; }

/* gutter honours the notch / rounded corners on devices that opt into viewport-fit=cover */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }

.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;
}
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--emerald); color: #03130d; padding: 10px 16px;
  border-radius: 10px; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--emerald-text); outline-offset: 3px; border-radius: 4px; }

/* ---------- type primitives ---------- */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.accent { color: var(--emerald-text); }
.accent-word { color: var(--emerald-text); }
.muted-line { color: var(--fg-2); display: block; }

.eyebrow,
.kicker {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.kicker { display: inline-block; margin-bottom: 1.1rem; color: var(--emerald-text); }
.kicker--center { display: block; text-align: center; }
.kicker--alert { color: var(--rose-text); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(255,255,255,0.02);
  color: var(--fg-2);
}

.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.section__head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.section__lead { margin-top: 1.1rem; color: var(--fg-2); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 60ch; }

/* ---------- pulse dot ---------- */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 0 var(--emerald-glow);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}
.pulse-dot--ok  { background: var(--emerald); }
.pulse-dot--bad { background: var(--rose); box-shadow: 0 0 0 0 rgba(244,63,94,.4); animation-name: pulseBad; }
@keyframes pulse    { 0% { box-shadow: 0 0 0 0 var(--emerald-glow); } 70%,100% { box-shadow: 0 0 0 10px transparent; } }
@keyframes pulseBad { 0% { box-shadow: 0 0 0 0 rgba(244,63,94,.4); } 70%,100% { box-shadow: 0 0 0 10px transparent; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em;
  padding: 0.7rem 1.2rem; border-radius: 12px;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.btn--lg { padding: 0.95rem 1.6rem; font-size: 1rem; border-radius: 14px; }
.btn--solid {
  background: var(--emerald); color: #03130d; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -10px var(--emerald-glow);
}
.btn--solid:hover { background: #16c994; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 14px 34px -10px var(--emerald-glow); }
.btn--solid:active { transform: translateY(0); }
.btn--ghost {
  border: 1px solid var(--border-strong); color: var(--fg);
  background: rgba(255,255,255,0.02);
}
.btn--ghost:hover { border-color: var(--emerald-line); background: var(--emerald-soft); color: var(--fg); transform: translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(5, 8, 15, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); }
.brand__mark { width: 26px; height: 26px; color: var(--emerald); }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__word { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; }
.brand__word-accent { color: var(--emerald-text); }

.nav__links { display: flex; gap: 1.9rem; margin-left: 1.5rem; }
.nav__links a { color: var(--fg-2); font-size: 0.92rem; transition: color .2s var(--ease); position: relative; }
.nav__links a:hover { color: var(--fg); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--emerald); transition: width .25s var(--ease);
}
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }
.nav__burger { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; position: relative; }
.nav__burger span { position: absolute; left: 11px; width: 20px; height: 1.6px; background: var(--fg); transition: transform .25s var(--ease), opacity .2s; }
.nav__burger span:nth-child(1) { top: 17px; }
.nav__burger span:nth-child(2) { top: 23px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav__mobile { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 72% 12%, rgba(16,185,129,0.10), transparent 70%),
    radial-gradient(50% 40% at 12% 0%, rgba(34,170,195,0.05), transparent 70%);
}
.hero__grid-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 35%, transparent 78%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero__copy { max-width: 38rem; min-width: 0; }
.hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.02; letter-spacing: -0.038em; margin-top: 1.4rem;
}
.hero__title-highlight { color: var(--emerald-text); }
.hero__title-accent { display: block; color: rgba(236, 243, 255, 0.84); font-weight: 500; }
/* keep "Defend your product" on one line on real phones, but let it wrap on very narrow screens (≤360px) so it can't overflow */
.hero__title-lead { white-space: nowrap; }
@media (max-width: 360px) { .hero__title-lead { white-space: normal; } }
.hero__sub { margin-top: 1.25rem; font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--fg-2); max-width: 33rem; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; margin-top: 1.7rem; }
.hero__cta-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--fg-2); font-weight: 500; font-size: 1rem; padding: 0.5rem 0.2rem; transition: color 180ms var(--ease-out); }
.hero__cta-link span { transition: transform 200ms var(--ease-out); }
.hero__cta-link:hover { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .hero__cta-link:hover span { transform: translateX(3px); } }
.hero__fud { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 0.95rem 1.1rem; max-width: 37rem; }
.hero__fud li { display: flex; gap: 0.6rem; align-items: flex-start; }
.hero__fud-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--emerald-soft); border: 1px solid var(--emerald-line); color: var(--emerald-text); }
.hero__fud-ico svg { width: 15px; height: 15px; }
.hero__fud-txt { display: flex; flex-direction: column; gap: 1px; }
.hero__fud-txt b { font-size: 0.85rem; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; line-height: 1.2; }
.hero__fud-txt small { font-size: 0.74rem; color: var(--fg-3); line-height: 1.25; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border); list-style: none; padding-left: 0; }
.hero__trust li { font-size: 0.84rem; color: var(--fg-2); display: flex; flex-direction: column; gap: 0.15rem; }
.hero__trust-num { font-family: var(--font-mono); font-size: 1.35rem; color: var(--fg); letter-spacing: -0.02em; }

/* ---------- the interactive demo card ---------- */
.hero__demo { justify-self: end; width: 100%; max-width: 460px; min-width: 0; }
.demo {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  overflow: hidden;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.demo[data-state="trusted"] { box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7), 0 0 60px -22px var(--emerald-glow); border-color: var(--emerald-line); }
.demo[data-state="unsafe"]  { box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7), 0 0 60px -22px rgba(244,63,94,0.4); border-color: var(--rose-line); }

.demo__chrome { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.demo__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14); }
.demo__chrome-label { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-3); }

.demo__body { padding: 22px; display: grid; gap: 18px; }
.demo__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.demo__product { display: flex; gap: 16px; align-items: center; }
/* QR is the product's entry point — scan the code, then read the verdict —
   so it reads as a real scanner viewfinder: a framed target with a sweeping laser. */
.demo__qr { --qr: 88px; position: relative; width: var(--qr); height: var(--qr); flex: none; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; color: var(--fg); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.demo__qr-svg { width: 60px; height: 60px; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.demo[data-state="trusted"] .demo__qr-svg { color: var(--emerald-text); }
.demo[data-state="unsafe"]  .demo__qr-svg { color: var(--rose-text); }

/* corner-bracket reticle drawn with four L-shaped gradients */
.demo__qr-frame {
  --c: var(--emerald-text); --len: 16px; --thick: 2px;
  position: absolute; inset: 8px; pointer-events: none; opacity: .32;
  border-radius: 4px;
  transition: opacity .3s var(--ease);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--thick) var(--len) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--len) var(--thick) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--thick) var(--len) no-repeat;
}
.demo[data-state="unsafe"] .demo__qr-frame { --c: var(--rose-text); }

/* sweeping laser: a bright line with a soft trailing glow */
.demo__scanline {
  position: absolute; left: 8px; right: 8px; top: 8px; height: 24px;
  border-radius: 5px; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(16,185,129,0.22) 55%, var(--emerald-text));
  box-shadow: 0 1px 10px 1px rgba(16,185,129,0.45);
}
.demo[data-state="scanning"] .demo__qr { border-color: var(--emerald-line); box-shadow: 0 0 0 1px var(--emerald-line), 0 0 22px -4px rgba(16,185,129,0.45); }
.demo[data-state="scanning"] .demo__qr-svg { opacity: .55; filter: blur(0.4px); }
.demo[data-state="scanning"] .demo__qr-frame { opacity: 1; animation: qr-reticle 1.5s var(--ease) infinite; }
.demo[data-state="scanning"] .demo__scanline { opacity: 1; animation: scan 1.5s cubic-bezier(0.45,0,0.55,1) infinite; }
@keyframes scan { 0% { transform: translateY(0); } 50% { transform: translateY(48px); } 100% { transform: translateY(0); } }
@keyframes qr-reticle { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.demo__pid { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: -0.02em; }
.demo__pname { font-size: 0.82rem; color: var(--fg-2); margin-top: 2px; }

.demo__toggle { display: inline-flex; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.demo__toggle-btn { font-size: 0.72rem; padding: 5px 9px; border-radius: 7px; color: var(--fg-3); transition: color .2s, background .2s; white-space: nowrap; }
.demo__toggle-btn.is-active { background: var(--surface-3); color: var(--fg); }

.demo__checks { list-style: none; padding: 0; display: grid; gap: 8px; }
.demo__check { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 13px; font-size: 0.85rem; transition: border-color .3s var(--ease), background .3s; }
.demo__check-ico { width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--emerald); position: relative; transition: background .25s; }
.demo__check-ico::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #03130d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.demo__check-label { color: var(--fg); }
.demo__check-val { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-2); }
/* pending (scanning) */
.demo[data-state="scanning"] .demo__check { opacity: .55; }
.demo[data-state="scanning"] .demo__check-ico { background: rgba(255,255,255,0.18); }
.demo[data-state="scanning"] .demo__check-ico::after { opacity: 0; }
/* failed check */
.demo__check.is-fail { border-color: var(--rose-line); background: var(--rose-soft); }
.demo__check.is-fail .demo__check-ico { background: var(--rose); }
.demo__check.is-fail .demo__check-ico::after { left: 8px; top: 4px; width: 2px; height: 10px; border: none; background: #1a0408; transform: none; box-shadow: 0 0 0 0; }
.demo__check.is-fail .demo__check-ico::before { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 2px; background: #1a0408; }
.demo__check.is-fail .demo__check-val { color: var(--rose-text); }

.demo__verdict { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; }
.demo__score { display: flex; align-items: baseline; gap: 4px; }
.demo__score-label { font-size: 0.7rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.12em; margin-right: 6px; font-family: var(--font-mono); }
.demo__score-num { font-family: var(--font-mono); font-size: 1.9rem; letter-spacing: -0.04em; color: var(--emerald-text); }
.demo[data-state="unsafe"] .demo__score-num { color: var(--rose-text); }
.demo__score-max { font-family: var(--font-mono); color: var(--fg-3); font-size: 0.9rem; }

.demo__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; font-weight: 600; font-size: 0.9rem; background: var(--emerald-soft); color: var(--emerald-text); border: 1px solid var(--emerald-line); }
.demo[data-state="unsafe"] .demo__badge { background: var(--rose-soft); color: var(--rose-text); border-color: var(--rose-line); }
.demo[data-state="scanning"] .demo__badge { background: rgba(255,255,255,0.05); color: var(--fg-2); border-color: var(--border); }
.demo__badge-ico { width: 16px; height: 16px; border-radius: 50%; background: currentColor; position: relative; flex: none; }
.demo__badge-ico::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.demo[data-state="unsafe"] .demo__badge-ico::after { left: 7px; top: 4px; width: 2px; height: 8px; border: none; background: var(--rose-soft); transform: none; }
.demo[data-state="unsafe"] .demo__badge-ico::before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 2px; background: var(--rose-soft); }

.demo__reason { font-size: 0.82rem; color: var(--fg-2); line-height: 1.5; min-height: 2.5em; }

.demo__run { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px; border-top: 1px solid var(--border); font-weight: 600; font-size: 0.9rem; color: var(--fg); transition: background .2s; }
.demo__run:hover { background: rgba(255,255,255,0.03); }
.demo__run-ico { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--emerald-text); border-right-color: transparent; }
.demo[data-state="scanning"] .demo__run-ico { animation: spin .7s linear infinite; }
.demo:not([data-state="scanning"]) .demo__run-ico { border: none; width: 0; height: 0; border-left: 8px solid var(--emerald-text); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__demo-cap { margin-top: 1rem; font-size: 0.8rem; color: var(--fg-3); text-align: center; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.strip { border-block: 1px solid var(--border); background: var(--bg-2); }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; padding-block: 1.6rem; }
.strip__label { font-size: 0.8rem; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.04em; }
.strip__logos { display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; padding: 0; margin-left: auto; }
.strip__logos li { font-family: var(--font-display); font-weight: 500; color: var(--fg-2); font-size: 0.95rem; letter-spacing: -0.01em; }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem__head { max-width: 760px; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.problem__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.stat-card--wide { grid-column: 1 / -1; background: var(--bg-2); }
/* the cost-of-fakes numbers ARE the threat: rose carries that, restrained */
.stat-card--threat { border-color: var(--rose-line); background: linear-gradient(180deg, var(--rose-soft), transparent 60%), var(--surface); }
.stat-card--threat .stat-card__num { color: var(--rose-text); }
.stat-card__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.04em; color: var(--fg); line-height: 1; }
.stat-card:not(.stat-card--wide) .stat-card__num { color: var(--rose-text); }
.stat-card__label { margin-top: 0.7rem; color: var(--fg-2); font-size: 0.95rem; max-width: 26ch; }
.stat-card__body { font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.55; color: var(--fg); max-width: 60ch; }
.stat-card__body em { color: var(--emerald-text); font-style: normal; font-weight: 500; }

/* ============================================================
   SOLUTION BRIDGE
   ============================================================ */
.bridge { text-align: center; background:
    radial-gradient(60% 100% at 50% 0%, rgba(16,185,129,0.06), transparent 70%), var(--bg); }
.bridge__inner { max-width: 880px; margin-inline: auto; }
.bridge__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.035em; }
.bridge__sub { margin-top: 1.4rem; color: var(--fg-2); font-size: clamp(1.05rem, 1.7vw, 1.2rem); max-width: 56ch; margin-inline: auto; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how__steps { list-style: none; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
.how__step {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.how__step:nth-child(even) .how__step-text { order: 2; }
.how__num { font-family: var(--font-mono); font-size: 0.9rem; color: var(--emerald-text); letter-spacing: 0.1em; }
.how__step-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: -0.03em; margin: 0.7rem 0 0.8rem; }
.how__step-text p { color: var(--fg-2); max-width: 42ch; }

.how__step-visual { display: grid; place-items: center; }
.mini { width: 100%; max-width: 340px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.4rem; display: grid; gap: 0.8rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); }
.mini__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.mini__k { color: var(--fg-3); }
.mini__v { color: var(--fg); }
.mini__v.accent { color: var(--emerald-text); }
.mini__bar { height: 6px; border-radius: 100px; background: var(--surface-3); overflow: hidden; margin-top: 0.4rem; }
.mini__bar span { display: block; height: 100%; background: var(--emerald); border-radius: 100px; }
.mini__foot { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-3); letter-spacing: 0.04em; }
.mini__pin { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--fg); }
.mini__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 0.72rem; font-family: var(--font-mono); padding: 4px 9px; border-radius: 100px; background: var(--emerald-soft); color: var(--emerald-text); border: 1px solid var(--emerald-line); }
.mini__map { position: relative; height: 78px; border-radius: 14px; background:
    radial-gradient(circle at 50% 50%, rgba(16,185,129,0.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(255,255,255,0.03) 13px, rgba(255,255,255,0.03) 14px),
    repeating-linear-gradient(90deg, transparent, transparent 13px, rgba(255,255,255,0.03) 13px, rgba(255,255,255,0.03) 14px);
  border: 1px solid var(--border); }
.mini__map-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.mini__map-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--emerald); box-shadow: 0 0 16px 2px var(--emerald-glow); }
.mini--verdict { place-items: center; text-align: center; }
.mini__verdict-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: var(--emerald-soft); color: var(--emerald-text); border: 1px solid var(--emerald-line); font-weight: 600; }
.mini__verdict-badge .demo__badge-ico { color: var(--emerald-text); }
.mini__score { font-family: var(--font-mono); font-size: 3rem; letter-spacing: -0.05em; color: var(--fg); }
.mini__score span { font-size: 1.1rem; color: var(--fg-3); }

/* ============================================================
   PLATFORM / BENTO
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.bento__cell {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.7rem; display: flex; flex-direction: column; gap: 0.7rem;
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.bento__cell:hover { transform: translateY(-4px); border-color: var(--border-strong); background: var(--surface-2); }
.bento__cell--feature { grid-column: span 2; grid-row: span 2; }
.bento__cell--data { grid-column: span 1; }
.bento__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--emerald-soft); border: 1px solid var(--emerald-line); color: var(--emerald-text); }
.bento__icon svg { width: 21px; height: 21px; }
.bento__cell h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; letter-spacing: -0.02em; }
.bento__cell p { color: var(--fg-2); font-size: 0.92rem; }
.bento__cell--feature h3 { font-size: 1.5rem; }
.bento__cell--feature p { font-size: 1rem; max-width: 44ch; }

.bento__viz--map { margin-top: auto; }
.worldmap {
  position: relative; height: clamp(160px, 22vw, 240px); border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 120%, rgba(16,185,129,0.08), transparent 70%),
    var(--bg);
  border: 1px solid var(--border);
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.worldmap .scan-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%,-50%); }
.worldmap .scan-dot--ok { background: var(--emerald); box-shadow: 0 0 12px 1px var(--emerald-glow); }
.worldmap .scan-dot--bad { background: var(--rose); box-shadow: 0 0 12px 1px rgba(244,63,94,0.5); }
.worldmap .scan-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; animation: ripple 2.6s var(--ease) infinite; animation-delay: var(--delay, 0s); }
.worldmap .scan-dot--ok::after { color: var(--emerald); }
.worldmap .scan-dot--bad::after { color: var(--rose); }
@keyframes ripple { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }

.bento__nodes { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.node { font-family: var(--font-mono); font-size: 0.72rem; padding: 5px 10px; border-radius: 100px; border: 1px solid var(--border); color: var(--fg-3); }
.node--on { color: var(--emerald-text); border-color: var(--emerald-line); background: var(--emerald-soft); }

/* ============================================================
   COUNTERFEIT CAUGHT
   ============================================================ */
.caught { background:
    radial-gradient(70% 100% at 80% 50%, rgba(244,63,94,0.06), transparent 65%), var(--bg-2);
  border-block: 1px solid var(--border); overflow: hidden; }
.caught__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.caught__list { list-style: none; padding: 0; margin-top: 1.6rem; display: grid; gap: 0.7rem; }
.caught__list li { display: flex; align-items: center; gap: 0.7rem; color: var(--fg); font-size: 0.95rem; }
.caught__title-flag { display: block; color: var(--rose-text); }
.x-ico, .demo__run-ico { flex: none; }
.x-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--rose-soft); border: 1px solid var(--rose-line); position: relative; }
.x-ico::before, .x-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.6px; background: var(--rose-text); }
.x-ico::before { transform: translate(-50%,-50%) rotate(45deg); }
.x-ico::after  { transform: translate(-50%,-50%) rotate(-45deg); }

.caught__visual { background: var(--surface); border: 1px solid var(--rose-line); border-radius: var(--radius-xl); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 40px 80px -36px rgba(0,0,0,.7); }
.caught__route { display: flex; align-items: center; gap: 0.4rem; }
.caught__city { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.95rem; align-items: flex-start; }
.caught__city small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-3); font-weight: 400; }
.caught__city--b { align-items: flex-end; text-align: right; margin-left: auto; }
.caught__line { flex: 1; height: 2px; min-width: 40px; background: linear-gradient(90deg, var(--emerald), var(--rose)); position: relative; border-radius: 2px; }
.caught__line::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 7px solid var(--rose); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.caught__verdict { display: flex; align-items: center; gap: 14px; margin-top: 1.6rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--rose-soft); border: 1px solid var(--rose-line); }
.caught__verdict-ico { width: 38px; height: 38px; border-radius: 11px; flex: none; background: var(--rose); position: relative; }
.caught__verdict-ico::before, .caught__verdict-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; background: #1a0408; }
.caught__verdict-ico::before { transform: translate(-50%,-50%) rotate(45deg); }
.caught__verdict-ico::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.caught__verdict-title { font-weight: 600; color: var(--rose-text); }
.caught__verdict-sub { font-size: 0.74rem; color: var(--fg-2); margin-top: 2px; }

/* ============================================================
   SOCIAL PROOF
   ============================================================ */
.proof__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.1rem; align-items: stretch; }
.proof__quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(1.8rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; margin: 0; }
.proof__quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.35; letter-spacing: -0.02em; }
.proof__quote figcaption { display: flex; align-items: center; gap: 0.9rem; }
.proof__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--emerald-text); flex: none; }
.proof__who { display: flex; flex-direction: column; }
.proof__who strong { font-weight: 600; font-size: 0.95rem; }
.proof__who small { color: var(--fg-3); font-size: 0.8rem; }

.proof__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.proof__grid > *, .proof__metrics > * { min-width: 0; }
.proof__metric { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; gap: 0.4rem; }
.proof__metric-num { font-family: var(--font-mono); font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -0.04em; color: var(--fg); }
.proof__metric-label { font-size: 0.82rem; color: var(--fg-2); }
.proof__disclaimer { margin-top: 1.4rem; font-size: 0.76rem; color: var(--fg-3); font-style: italic; }

/* ============================================================
   SECURITY + FAQ
   ============================================================ */
.security__inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.security__badges { list-style: none; padding: 0; margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.security__badges li { font-family: var(--font-mono); font-size: 0.76rem; padding: 7px 12px; border-radius: 100px; border: 1px solid var(--border); color: var(--fg-2); background: rgba(255,255,255,0.02); }

.faq { display: grid; gap: 0.7rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color .25s var(--ease); }
.faq__item[open] { border-color: var(--border-strong); }
.faq__item summary { list-style: none; cursor: pointer; padding: 1.15rem 1.3rem; font-weight: 500; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; letter-spacing: -0.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { width: 11px; height: 11px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(45deg); transition: transform .25s var(--ease); flex: none; margin-right: 4px; }
.faq__item[open] .faq__chev { transform: rotate(-135deg); border-color: var(--emerald-text); }
/* smooth expand/collapse of the answer (modern ::details-content; snaps gracefully where unsupported) */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size .34s var(--ease), opacity .26s var(--ease), content-visibility .34s allow-discrete;
  transition-behavior: allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; opacity: 1; }
.faq__a { padding: 0 1.3rem 1.3rem; }
.faq__a p { color: var(--fg-2); max-width: 64ch; }

/* ============================================================
   CLOSER
   ============================================================ */
.closer { text-align: center; overflow: hidden; }
.closer__inner { position: relative; max-width: 720px; margin-inline: auto; }
.closer__glow { position: absolute; left: 50%; top: -20%; transform: translateX(-50%); width: 600px; height: 360px; background: radial-gradient(circle, var(--emerald-glow), transparent 65%); filter: blur(30px); opacity: 0.4; pointer-events: none; z-index: -1; }
.closer__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.08; }
.closer__sub { margin-top: 1.2rem; color: var(--fg-2); font-size: clamp(1rem, 1.7vw, 1.18rem); max-width: 52ch; margin-inline: auto; }
.closer__form { display: flex; gap: 0.6rem; max-width: 460px; margin: 2.2rem auto 0; }
.closer__form input { flex: 1; padding: 0.95rem 1.1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--fg); transition: border-color .2s; min-width: 0; }
.closer__form input::placeholder { color: var(--fg-3); }
.closer__form input:focus { border-color: var(--emerald-line); }
.closer__form input:focus:not(:focus-visible) { outline: none; }
.closer__form input[aria-invalid="true"] { border-color: var(--rose-line); }
.closer__note { margin-top: 1rem; font-size: 0.84rem; color: var(--fg-3); }
.closer__note.is-error { color: var(--rose-text); }
.closer__note.is-success { color: var(--emerald-text); }
.closer__secondary { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--border); display: inline-flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; font-size: 0.92rem; color: var(--fg-2); }
.closer__secondary-link { color: var(--emerald-text); font-weight: 500; transition: opacity .2s; }
.closer__secondary-link:hover { opacity: 0.75; }

/* ============================================================
   MONUMENT WORDMARK  (rises out of the footer)
   ============================================================ */
.wordmark {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 8vw, 7rem);
  /* sit flush on the footer so the letters appear to sink into it */
  margin-bottom: -1px;
  background:
    radial-gradient(120% 80% at 50% 118%, var(--emerald-soft), transparent 60%),
    var(--bg);
}
.wordmark::before {
  /* hairline that fades in from the page, not a hard rule */
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
  opacity: 0.7;
}
.wordmark__stage {
  position: relative;
  /* crop the lower band of the letters against the footer edge */
  height: clamp(5.5rem, 17vw, 15rem);
}
.wordmark__word {
  position: absolute;
  left: 50%; bottom: -0.16em;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 21vw, 17rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  /* quiet fallback for engines without background-clip:text */
  color: rgba(214, 226, 245, 0.10);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark__word {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
  /* base layer: faint ink + a field of scan nodes showing through the letters */
  .wordmark__word--base {
    background-image:
      radial-gradient(circle at center, var(--emerald-line) 0 1.1px, transparent 1.6px),
      linear-gradient(rgba(214, 226, 245, 0.07), rgba(214, 226, 245, 0.07));
    background-size: 22px 22px, 100% 100%;
    background-position: center bottom, 0 0;
  }
  /* beam layer: an emerald scanline that sweeps the word top to bottom */
  .wordmark__word--beam {
    background-image: linear-gradient(180deg,
      transparent 44%, var(--emerald-text) 50%, transparent 56%);
    background-size: 100% 260%;
    background-repeat: no-repeat;
    background-position: 50% -130%;
    opacity: 0.9;
    animation: wm-scan 6s var(--ease) infinite;
  }
}
@keyframes wm-scan {
  0%   { background-position: 50% -130%; }
  85%  { background-position: 50% 230%; }
  100% { background-position: 50% 230%; }
}

/* ============================================================
   FILM GRAIN  (SpectraNoise, rebuilt native + dependency-free)
   ============================================================ */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: grain-shift 5.5s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, 3%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   CONIC CTA HALO  (Conic-Gradient component, native rotating glow)
   solid emerald button stays solid; the conic is a CTA-moment halo only
   ============================================================ */
@property --cta-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cta-ring { position: relative; display: inline-flex; border-radius: 15px; padding: 1.4px; isolation: isolate; }
.cta-ring > .btn { position: relative; z-index: 1; border-radius: 13.5px; }
.cta-ring::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.4px;
  background: conic-gradient(from var(--cta-a),
    transparent 0deg 190deg, var(--emerald-text) 290deg, #d8fff1 320deg, var(--emerald-text) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: cta-spin 3.8s linear infinite;
}
@keyframes cta-spin { to { --cta-a: 360deg; } }
.cta-ring--inline { margin-top: 2rem; }

/* ============================================================
   GLOBAL NETWORK  (live oracle-mesh globe, self-contained canvas)
   ============================================================ */
.globe { position: relative; overflow: hidden; background: var(--bg); }
.globe__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 65% at 76% 46%, var(--emerald-soft), transparent 62%),
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 48px 100%;
  -webkit-mask-image: radial-gradient(115% 95% at 72% 42%, #000 32%, transparent 76%);
  mask-image: radial-gradient(115% 95% at 72% 42%, #000 32%, transparent 76%);
  opacity: 0.45;
}
.globe__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* let grid items shrink past the canvas min-content so the column can't floor wider than the viewport */
.globe__inner > * { min-width: 0; }
.globe__copy { max-width: 34rem; }
.globe__stats { display: flex; flex-wrap: wrap; gap: clamp(1.1rem, 3vw, 2.2rem); margin: 2.2rem 0 0; }
.globe__stat { display: flex; flex-direction: column; gap: 0.4rem; max-width: 13rem; }
.globe__stat + .globe__stat { padding-left: clamp(1.1rem, 3vw, 2.2rem); border-left: 1px solid var(--border); }
.globe__stat-num { font-family: var(--font-mono); font-size: clamp(1.55rem, 2.7vw, 2.1rem); letter-spacing: -0.03em; color: var(--fg); line-height: 1; }
.globe__stat-label { font-size: 0.82rem; color: var(--fg-2); line-height: 1.45; }
.globe__mesh { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.9rem; }
.globe__mesh .node--on { display: inline-flex; align-items: center; }
.node__live { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); margin-right: 7px; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: node-live 2.4s var(--ease) infinite; }
@keyframes node-live {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.globe__stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin-inline: auto; }
.globe__canvas { width: 100%; height: 100%; display: block; }
.globe__readout {
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 100px;
  background: rgba(8,12,20,0.78); border: 1px solid var(--border-strong);
  font-size: 0.74rem; color: var(--fg-2); white-space: nowrap;
}
.globe__readout-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px 1px var(--emerald-glow); animation: node-live 2.2s var(--ease) infinite; }
.globe__caption { margin-top: 1.1rem; text-align: center; font-size: 0.7rem; color: var(--fg-3); letter-spacing: 0.01em; }

@media (max-width: 900px) {
  .globe__inner { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .globe__stage { max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .cta-ring::before, .node__live, .globe__readout-dot { animation: none !important; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: env(safe-area-inset-bottom); }
.footer__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; align-self: start; max-width: 22rem; }
.footer__logo { display: inline-block; line-height: 0; }
.footer__logo img { width: clamp(190px, 60%, 260px); height: auto; }
.footer__tagline { font-size: 0.88rem; line-height: 1.55; color: var(--fg-3); margin: 0; }
.footer__parent { display: inline-flex; flex-direction: column; gap: 0.45rem; margin-top: 0.2rem; line-height: 0; opacity: 0.78; transition: opacity .25s var(--ease); }
.footer__parent-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); line-height: 1; }
.footer__parent img { width: 116px; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .footer__parent:hover { opacity: 1; }
}
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer__col { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col h4 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-3); font-weight: 500; margin-bottom: 0.3rem; }
.footer__col a { color: var(--fg-2); font-size: 0.9rem; transition: color .2s; }
.footer__col a:hover { color: var(--emerald-text); }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.6rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--fg-3); }
.footer__legal { display: flex; gap: 0.7rem; }
.footer__legal a:hover { color: var(--fg-2); }

/* ============================================================
   REVEAL ANIMATIONS (progressive enhancement)
   ============================================================ */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.js [data-reveal="demo"] { transform: translateY(28px) scale(0.98); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-reveal="instant"] { opacity: 1; transform: none; }

/* The hero is always above the fold, so its entrance runs on load via CSS rather than
   the deferred scroll observer. Without this the LCP headline sits at opacity:0 until
   app.js boots and IntersectionObserver fires, which pushes LCP out by ~1s. These rules
   are intentionally NOT scoped to .js so they animate at first paint, and the animation's
   fill keeps the final state regardless of when .is-in arrives. */
.hero__copy [data-reveal] { animation: hero-enter .55s var(--ease-soft) both; }
/* The demo card is the largest hero element and runs its own verdict simulation, so it
   paints immediately (no entrance fade) to keep LCP at first paint rather than gating it
   behind an animation that only duplicates the card's own motion. */
.hero__demo[data-reveal] { opacity: 1; transform: none; animation: none; }
.hero__copy [data-reveal]:nth-child(2) { animation-delay: 70ms; }
.hero__copy [data-reveal]:nth-child(3) { animation-delay: 140ms; }
.hero__copy [data-reveal]:nth-child(4) { animation-delay: 210ms; }
.hero__copy [data-reveal]:nth-child(5) { animation-delay: 280ms; }
.hero__copy [data-reveal]:nth-child(6) { animation-delay: 350ms; }
/* Opacity reaches full early so the LCP element is "painted" quickly; the translate
   keeps easing for the rest of the duration to preserve the rise. */
@keyframes hero-enter { 0% { opacity: 0; transform: translateY(22px); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes hero-enter-demo { 0% { opacity: 0; transform: translateY(28px) scale(0.98); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__copy [data-reveal], .hero__demo[data-reveal] { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__demo { justify-self: center; max-width: 440px; }
  .hero__copy { max-width: none; }
  .caught__inner { grid-template-columns: 1fr; }
  .security__inner { grid-template-columns: 1fr; }
  .bento__cell--feature { grid-column: span 3; grid-row: auto; }
}

@media (max-width: 860px) {
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: block; }
  .nav__mobile { display: none; }
  .nav__mobile.is-open { display: grid; gap: 0.3rem; padding: 1rem max(var(--gutter), env(safe-area-inset-right)) 1.4rem max(var(--gutter), env(safe-area-inset-left)); background: rgba(5,8,15,0.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
  .nav__mobile a { padding: 0.8rem 0.4rem; color: var(--fg-2); border-radius: 10px; }
  .nav__mobile a.btn { justify-content: flex-start; padding-inline: 1rem; margin-top: 0.3rem; }
  .nav__mobile a.btn--solid { color: #03130d; }

  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--feature { grid-column: span 2; }
  .proof__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 620px) {
  .problem__grid { grid-template-columns: 1fr; }
  .how__step { grid-template-columns: 1fr; }
  .how__step:nth-child(even) .how__step-text { order: 0; }
  .how__step-visual { order: -1; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell--feature { grid-column: auto; }
  .proof__metrics { grid-template-columns: 1fr 1fr; }
  .closer__form { flex-direction: column; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .demo__top { flex-direction: column; }
  .demo__toggle { align-self: stretch; }
  .demo__toggle-btn { flex: 1; }
}

/* ============================================================
   ENHANCEMENTS — wow background, glass nav, command center,
   brand marquee, micro-interactions
   ============================================================ */

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 200;
  background: linear-gradient(90deg, var(--emerald), var(--emerald-text));
  box-shadow: 0 0 12px var(--emerald-glow);
  will-change: transform;
}

/* ---------- NAV → floating glass pill (refined glassmorphism) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; border-bottom: none; background: none; padding-top: max(14px, env(safe-area-inset-top)); transition: padding .35s var(--ease); }
.nav__inner {
  position: relative;
  max-width: 1120px; height: 60px; margin-inline: auto;
  padding-inline: 14px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,30,46,0.62), rgba(11,17,28,0.52));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(0,0,0,0.2),
    0 18px 40px -22px rgba(0,0,0,0.8);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
/* soft top sheen for the glass */
.nav__inner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
}
.nav.is-stuck { padding-top: max(8px, env(safe-area-inset-top)); }
.nav.is-stuck .nav__inner {
  border-color: rgba(255,255,255,0.13);
  background: linear-gradient(180deg, rgba(16,24,38,0.78), rgba(8,12,20,0.7));
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 0 0 1px rgba(0,0,0,0.25), 0 22px 50px -24px rgba(0,0,0,0.9);
}
.nav__links { margin-left: 1.2rem; }
.nav__actions { gap: 0.55rem; }
.nav .btn { padding-block: 0.55rem; }

/* ---------- micro-interaction: button sheen sweep ---------- */
.btn { position: relative; overflow: hidden; }
.btn--solid::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease); pointer-events: none;
}
.btn--solid:hover::after { left: 130%; }

/* ---------- HERO atmospheric background ---------- */
.hero { padding-top: clamp(5.25rem, 10vh, 7.5rem); padding-bottom: clamp(1.75rem, 3vh, 3rem); }
.hero__net { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: 0.9; pointer-events: none; }
/* atmospheric layer: the physical supply chain (Singapore port, an oracle hub),
   biased to the right behind the demo card, faded out under the title */
.hero__photo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("./assets/hero-atmos.jpg") center 62% / cover no-repeat;
  /* Modern formats with graceful fallback: browsers without image-set() keep the JPEG above. */
  background-image: image-set(
    url("./assets/hero-atmos.avif") type("image/avif"),
    url("./assets/hero-atmos.webp") type("image/webp"),
    url("./assets/hero-atmos.jpg")  type("image/jpeg"));
  opacity: 0.55;
  /* soft band in the lower-middle that fades to nothing before the hero edge */
  -webkit-mask-image: linear-gradient(180deg, transparent 14%, #000 46%, #000 66%, transparent 92%);
          mask-image: linear-gradient(180deg, transparent 14%, #000 46%, #000 66%, transparent 92%);
}
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 4%, transparent 38%, transparent 74%, var(--bg) 99%),
    linear-gradient(90deg, var(--bg) 3%, rgba(5,8,15,0.6) 38%, transparent 68%);
}
.hero__aurora { position: absolute; inset: -10% -10% auto -10%; height: 80%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 60% at 72% 8%, rgba(16,185,129,0.16), transparent 70%),
    radial-gradient(42% 50% at 18% 0%, rgba(34,170,195,0.07), transparent 72%),
    radial-gradient(30% 40% at 90% 30%, rgba(16,185,129,0.08), transparent 70%);
  filter: blur(6px);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); } }

/* scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  z-index: 2; color: var(--fg-3); font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase; transition: opacity .4s var(--ease);
}
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
.scroll-cue__mouse { width: 22px; height: 36px; border: 1.5px solid var(--border-strong); border-radius: 12px; position: relative; }
.scroll-cue__mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 3px; background: var(--emerald-text); transform: translateX(-50%); animation: mouseWheel 1.8s var(--ease) infinite; }
@keyframes mouseWheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 70% { opacity: 1; transform: translate(-50%, 10px); } 100% { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- PRODUCT FILM (chaptered player) ----------
   Picks up where the hero fades out: same negative pull the command centre used to have,
   so the frame reads as one continuous surface running out of the hero. */
.film {
  position: relative; z-index: 3;
  padding-top: 0;
  margin-top: clamp(-3rem, -5vh, -1.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.film__head { margin-bottom: clamp(1.6rem, 3.2vw, 2.6rem); }
.film__head .kicker { margin-bottom: 0.85rem; }

/* the frame borrows the command-centre glass so the two read as one system */
.film__stage { margin: 0; }
.film__frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.85), 0 0 60px -30px var(--emerald-glow);
}

.film__bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
}
.film__bar-title { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.92rem; }
.film__bar-title .brand__mark { width: 18px; height: 18px; }
.film__now {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--emerald-text); padding: 3px 10px;
  border: 1px solid var(--emerald-line); border-radius: 100px; background: var(--emerald-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}
.film__time { font-size: 0.72rem; color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.film__screen { position: relative; aspect-ratio: 16 / 9; background: #04070d; }
/* display:block matters — an inline <video> leaves a baseline gap under the frame */
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* glass + optics: a fixed diagonal sheen and a soft vignette keep the recording
   sitting *inside* the frame instead of looking pasted on top of it */
.film__sheen {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.65;
  background: linear-gradient(112deg, rgba(255,255,255,0.07) 0%, transparent 32%, transparent 68%, rgba(255,255,255,0.035) 100%);
}
.film__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(122% 104% at 50% 48%, transparent 54%, rgba(2,5,10,0.6) 100%);
}
/* the brand's scan sweep, but only while the film is parked — it reads as "ready to read",
   and it gets out of the way the moment there is real motion to look at */
.film__scanline {
  position: absolute; inset-inline: 0; top: 0; height: 30%; pointer-events: none; opacity: 0.8;
  background: linear-gradient(180deg, transparent, rgba(16,185,129,0.10) 62%, rgba(46,230,166,0.34));
  animation: filmScan 5.2s var(--ease) infinite;
  transition: opacity .5s var(--ease);
}
@keyframes filmScan { 0% { transform: translateY(-105%); } 72%, 100% { transform: translateY(340%); } }

/* ---- play / pause overlay ---- */
/* every child shares one centred grid cell, so the ring and the glyph stay concentric
   no matter how the label below is offset */
.film__toggle {
  --ring: clamp(74px, 8.5vw, 106px);
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  color: var(--fg);
  background: radial-gradient(58% 58% at 50% 50%, rgba(3,7,13,0.62), rgba(3,7,13,0.24) 68%, rgba(3,7,13,0.05));
  transition: opacity .45s var(--ease), background .45s var(--ease);
}
.film__toggle > * { grid-area: 1 / 1; }
.film__toggle-ring {
  width: var(--ring); aspect-ratio: 1; border-radius: 50%;
  /* dark-based glass, not emerald-based: the footage behind runs from a black dashboard to a
     white warehouse, and only a scrim keeps the emerald glyph legible across both */
  border: 1px solid var(--emerald-line); background: rgba(5,10,16,0.55);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: filmRing 3s var(--ease) infinite;
  transition: transform .4s var(--ease), border-color .3s, background .3s;
}
@keyframes filmRing { 0% { box-shadow: 0 0 0 0 var(--emerald-glow); } 70%, 100% { box-shadow: 0 0 0 26px transparent; } }
.film__toggle:hover .film__toggle-ring { transform: scale(1.07); border-color: var(--emerald-text); background: rgba(16,185,129,0.22); }

.film__toggle-ico { position: relative; width: 26px; height: 27px; z-index: 1; }
.film__toggle-ico::before,
.film__toggle-ico::after {
  content: ""; position: absolute; inset: 0; background: var(--emerald-text);
  transition: clip-path .32s var(--ease), opacity .22s var(--ease);
}
.film__toggle-ico::before { clip-path: polygon(16% 0, 100% 50%, 16% 100%, 16% 100%); }
.film__toggle-ico::after  { clip-path: polygon(60% 0, 92% 0, 92% 100%, 60% 100%); opacity: 0; }

.film__toggle-txt {
  position: relative; z-index: 1;
  transform: translateY(calc(var(--ring) / 2 + 38px));
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(3,7,13,0.9);
  transition: opacity .3s var(--ease);
}
.film__toggle-sub { font-size: 0.62rem; letter-spacing: 0.16em; color: var(--fg-3); }

/* playing: the chrome steps aside and only comes back on intent */
.film__frame[data-state="playing"] .film__scanline { opacity: 0; animation-play-state: paused; }
.film__frame[data-state="playing"] .film__toggle { opacity: 0; background: transparent; }
.film__frame[data-state="playing"] .film__toggle-txt { opacity: 0; }
.film__frame[data-state="playing"] .film__toggle-ring { animation: none; }
.film__frame[data-state="playing"] .film__toggle-ico::before { clip-path: polygon(8% 0, 40% 0, 40% 100%, 8% 100%); }
.film__frame[data-state="playing"] .film__toggle-ico::after  { opacity: 1; }
.film__frame[data-state="playing"]:hover .film__toggle,
.film__frame[data-state="playing"]:focus-within .film__toggle {
  opacity: 1; background: radial-gradient(50% 50% at 50% 50%, rgba(3,7,13,0.42), transparent 72%);
}

.film__expand {
  position: absolute; z-index: 3; top: 14px; right: 14px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; border: 1px solid var(--border); background: rgba(4,8,14,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--fg-2); opacity: 0; transition: opacity .3s var(--ease), color .2s, border-color .2s;
}
.film__expand svg { width: 16px; height: 16px; }
.film__frame:hover .film__expand,
.film__frame:focus-within .film__expand { opacity: 1; }
.film__expand:hover { color: var(--emerald-text); border-color: var(--emerald-line); }

/* ---- chapter rail: segments sized by real chapter length, filling with the playhead ---- */
.film__caption { margin-top: 14px; }
.film__rail { display: flex; gap: 10px; align-items: flex-start; }
.film__chapter {
  flex: var(--w, 1) 1 0%; min-width: 0; padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 9px;
}
.film__chapter-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.09); overflow: hidden; transition: background .25s var(--ease); }
.film__chapter-fill {
  display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--f, 0));
  background: linear-gradient(90deg, var(--emerald), var(--emerald-text));
  box-shadow: 0 0 14px var(--emerald-glow);
  transition: transform .2s linear;
}
.film__chapter-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.film__chapter-time { font-size: 0.66rem; color: var(--fg-3); transition: color .25s var(--ease); }
.film__chapter-name {
  font-size: 0.82rem; font-weight: 500; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s var(--ease);
}
.film__chapter:hover .film__chapter-track { background: rgba(255,255,255,0.2); }
.film__chapter:hover .film__chapter-name { color: var(--fg); }
.film__chapter.is-on .film__chapter-name { color: var(--fg); }
.film__chapter.is-on .film__chapter-time { color: var(--emerald-text); }

/* Below ~900px five chapter names start ellipsizing, so the rail keeps its segments but
   drops to one floating label for the active chapter. */
@media (max-width: 900px) {
  .film__now { display: none; }
  .film__time { margin-left: auto; }
  .film__rail { position: relative; padding-bottom: 24px; gap: 6px; }
  .film__chapter-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    flex-direction: row; align-items: baseline; gap: 9px;
    opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
  }
  .film__chapter.is-on .film__chapter-meta { opacity: 1; }
  .film__expand { opacity: 1; }
}

/* ---------- COMMAND CENTER (faux ops dashboard, cut off at fold) ---------- */
/* the negative pull that used to tuck this under the hero now lives on .film, which
   sits between them — the command centre gets ordinary spacing off the film's padding */
.command { position: relative; padding-top: 0; padding-bottom: clamp(4rem, 8vw, 7rem); z-index: 3; }
.command__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.command__intro h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: -0.03em; }
.command__intro p { color: var(--fg-2); font-size: 0.95rem; max-width: 42ch; }

.command__frame {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.85), 0 0 60px -30px var(--emerald-glow);
}
.js .command__frame { opacity: 0; transform: translateY(40px) scale(0.985); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
.js .command__frame.is-in { opacity: 1; transform: none; }

.command__bar { display: flex; align-items: center; gap: 1rem; padding: 14px 18px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.015); }
.command__bar-title { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.92rem; }
.command__bar-title .brand__mark { width: 18px; height: 18px; }
.command__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--emerald-text); padding: 3px 9px; border: 1px solid var(--emerald-line); border-radius: 100px; background: var(--emerald-soft); }
.command__tabs { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 11px; }
.command__tab { font-size: 0.74rem; padding: 6px 12px; border-radius: 8px; color: var(--fg-3); transition: color .2s, background .2s; }
.command__tab.is-active { background: var(--surface-3); color: var(--fg); }
.command__clock { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-3); margin-left: 0.4rem; }

.command__kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.kpi { padding: 1.1rem 1.3rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.kpi:last-child { border-right: none; }
.kpi__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.kpi__num { font-family: var(--font-mono); font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -0.03em; color: var(--fg); }
.kpi__delta { font-size: 0.72rem; display: inline-flex; align-items: center; gap: 4px; }
.kpi__delta--up { color: var(--emerald-text); }
.kpi__delta--flag { color: var(--rose-text); }

.command__body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; }
.command__feed { border-right: 1px solid var(--border); padding: 1.2rem 1.3rem; }
.command__panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.command__panel-head h3 { font-size: 0.78rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-2); }
.command__panel-head .pulse-dot { width: 6px; height: 6px; }
.feed { display: grid; gap: 7px; position: relative; min-height: 230px; }
.feed__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); animation: feedIn .5s var(--ease); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.feed__ico { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; font-size: 0; position: relative; }
.feed__ico--ok { background: var(--emerald-soft); border: 1px solid var(--emerald-line); }
.feed__ico--ok::after { content: ""; width: 5px; height: 9px; border: solid var(--emerald-text); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.feed__ico--bad { background: var(--rose-soft); border: 1px solid var(--rose-line); }
.feed__ico--bad::before, .feed__ico--bad::after { content: ""; position: absolute; width: 10px; height: 2px; background: var(--rose-text); }
.feed__ico--bad::before { transform: rotate(45deg); } .feed__ico--bad::after { transform: rotate(-45deg); }
/* in transit / watching — an ellipsis reads as "still in progress" */
.feed__ico--watch { background: var(--amber-soft); border: 1px solid var(--amber-line); }
.feed__ico--watch::after { content: ""; width: 2px; height: 2px; border-radius: 50%; background: var(--amber-text); box-shadow: -4px 0 0 var(--amber-text), 4px 0 0 var(--amber-text); }
.feed__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.feed__id { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg); white-space: nowrap; }
.feed__meta { font-size: 0.68rem; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed__score { font-family: var(--font-mono); font-size: 0.82rem; text-align: right; }
.feed__score--ok { color: var(--emerald-text); } .feed__score--bad { color: var(--rose-text); } .feed__score--watch { color: var(--amber-text); }

.command__side { padding: 1.2rem 1.3rem; display: grid; gap: 1.1rem; align-content: start; }
.gauge { display: flex; align-items: center; gap: 1rem; }
.gauge__ring { --p: 0; width: 92px; height: 92px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--emerald) calc(var(--p) * 1%), rgba(255,255,255,0.06) 0);
  display: grid; place-items: center; position: relative; transition: background .6s var(--ease);
}
.gauge__ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); }
.gauge__val { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 1.15rem; color: var(--fg); }
.gauge__txt h4 { font-size: 0.95rem; font-weight: 600; }
.gauge__txt p { font-size: 0.76rem; color: var(--fg-2); margin-top: 2px; max-width: 24ch; }
.command__spark { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; background: var(--bg); }
.command__spark-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.5rem; }
.command__spark-head span:first-child { font-size: 0.72rem; color: var(--fg-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.command__spark-head span:last-child { font-family: var(--font-mono); font-size: 0.9rem; color: var(--emerald-text); }
.command__spark svg { width: 100%; height: 52px; display: block; }
.spark__path { fill: none; stroke: var(--emerald); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark__area { fill: url(#sparkfill); opacity: 0.5; }
.command__mini-map { position: relative; height: 120px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 130%, rgba(16,185,129,0.10), transparent 70%),
    var(--bg);
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1.3px);
  background-size: 16px 16px;
}

/* mini-map scan dots reuse worldmap dot visuals (which are .worldmap-scoped) */
#commandMap .scan-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%,-50%); }
#commandMap .scan-dot--ok { background: var(--emerald); box-shadow: 0 0 12px 1px var(--emerald-glow); }
#commandMap .scan-dot--bad { background: var(--rose); box-shadow: 0 0 12px 1px rgba(244,63,94,0.5); }
#commandMap .scan-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor; opacity: .5; animation: ripple 2.6s var(--ease) infinite; animation-delay: var(--delay, 0s); }
#commandMap .scan-dot--ok::after { color: var(--emerald); }
#commandMap .scan-dot--bad::after { color: var(--rose); }

/* ---------- BRAND MARQUEE ---------- */
.brands { border-block: 1px solid var(--border); background: var(--bg-2); padding-block: 1.8rem; overflow: hidden; }
.brands__label { text-align: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 1.3rem; }
.marquee { position: relative; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; padding-right: clamp(2.2rem, 5vw, 4rem); flex: none; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* brand logos rendered as themed monochrome silhouettes (single theme color,
   not the brands' own colors) via mask, so they sit in the dark UI cohesively */
.marquee__logo {
  flex: none; height: 30px; width: var(--w, 80px);
  background-color: var(--fg-2);
  opacity: 0.5;
  -webkit-mask: var(--logo) center / contain no-repeat;
          mask: var(--logo) center / contain no-repeat;
  transition: opacity .25s var(--ease), background-color .25s var(--ease);
}

/* magnetic / hover-lift utility hook (driven by JS) */
.tilt { transition: transform .3s var(--ease); will-change: transform; }

@media (max-width: 860px) {
  .nav__inner { max-width: none; margin-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .command__kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(2) { border-right: none; }
  .kpi:nth-child(1), .kpi:nth-child(2) { border-bottom: 1px solid var(--border); }
  .command__body { grid-template-columns: 1fr; }
  .command__feed { border-right: none; border-bottom: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .command__tabs { display: none; }
  .command__kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   PREMIUM ATMOSPHERE
   One cohesive lighting + texture system so no section reads
   as flat black. Emerald + one cool blue only, very low opacity.
   ============================================================ */

/* fixed ambient light — shows through every transparent section,
   giving the whole scroll a consistent "lit room" depth */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 36% at 86% 4%, rgba(16, 185, 129, 0.07), transparent 62%),
    radial-gradient(40% 34% at 6% 86%, rgba(34, 170, 195, 0.045), transparent 64%),
    radial-gradient(120% 80% at 50% 120%, rgba(16, 185, 129, 0.04), transparent 60%);
}

/* fine film grain over the page (under the sticky nav so chrome stays crisp) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: 0.022; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* per-section motifs sit behind their own content */
.problem, .how, .platform, .reg, .roi, .proof, .security { isolation: isolate; }
.problem > .container, .how > .container, .platform > .container,
.reg > .container, .roi > .container, .proof > .container,
.security > .security__inner { position: relative; z-index: 1; }

.problem::before, .how::before, .platform::before, .platform::after,
.reg::before, .reg::after, .roi::before, .proof::before, .security::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* blueprint line grid — process / regulatory sections */
.how::before, .reg::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(95% 70% at 50% 28%, #000 18%, transparent 74%);
  mask-image: radial-gradient(95% 70% at 50% 28%, #000 18%, transparent 74%);
}

/* dot field — the data / detection sections */
.platform::before, .security::before {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(78% 64% at 72% 12%, #000 22%, transparent 70%);
  mask-image: radial-gradient(78% 64% at 72% 12%, #000 22%, transparent 70%);
}

/* soft emerald spotlights, positioned to back the key element of each section */
.platform::after { background: radial-gradient(38% 46% at 82% 16%, rgba(16, 185, 129, 0.08), transparent 66%); }
.reg::after      { background: radial-gradient(36% 52% at 84% 40%, rgba(16, 185, 129, 0.07), transparent 66%); }
.roi::before     { background: radial-gradient(48% 62% at 50% 44%, rgba(16, 185, 129, 0.065), transparent 68%); }
.proof::before   { background: radial-gradient(42% 56% at 20% 32%, rgba(16, 185, 129, 0.055), transparent 66%); }
.problem::before { background: radial-gradient(44% 50% at 92% 82%, rgba(244, 63, 94, 0.06), transparent 66%); }

/* ============================================================
   MICRO-INTERACTIONS (Emil Kowalski school)
   Tactile press, capability-gated hover, exact properties,
   strong ease-out, sub-200ms feedback.
   ============================================================ */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* --- universal press feedback (correct on touch too) --- */
.btn { transition: transform 150ms var(--ease-out), background 200ms var(--ease), border-color 200ms var(--ease), box-shadow 300ms var(--ease); }
.btn:active { transform: scale(0.96); }
.btn--lg:active { transform: scale(0.975); }
.btn--solid:active { transform: scale(0.96); }

.demo__toggle-btn, .command__tab, .reg__chip { transition: color 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 130ms var(--ease-out); }
.demo__toggle-btn:active, .command__tab:active, .reg__chip:active { transform: scale(0.94); }

.demo__run { cursor: pointer; transition: background 180ms var(--ease-out), transform 130ms var(--ease-out); }
.demo__run:active { transform: scale(0.99); }

/* replay affordance: when the demo is idle/done, make the run bar visibly
   clickable — a soft emerald breathing glow plus a play-triangle that nudges,
   reading as "press me". Calms once the pointer finds it. */
.demo:not([data-state="scanning"]) .demo__run {
  background: rgba(16,185,129,0.05);
  animation: demo-run-invite 2.4s var(--ease) infinite;
}
@keyframes demo-run-invite {
  0%, 100% { box-shadow: inset 0 -22px 24px -24px rgba(16,185,129,0); }
  50%      { box-shadow: inset 0 -22px 24px -20px rgba(16,185,129,0.5); }
}
.demo:not([data-state="scanning"]) .demo__run-ico {
  animation: demo-ico-nudge 2.4s var(--ease) infinite;
}
@keyframes demo-ico-nudge {
  0%, 100% { transform: translateX(0); }
  55%      { transform: translateX(3px); }
}
@media (hover: hover) and (pointer: fine) {
  .demo:not([data-state="scanning"]) .demo__run:hover { animation: none; background: rgba(16,185,129,0.1); }
  .demo:not([data-state="scanning"]) .demo__run:hover .demo__run-ico { animation-play-state: paused; }
}

.nav__burger { transition: border-color 180ms var(--ease-out), transform 130ms var(--ease-out); }
.nav__burger:active { transform: scale(0.92); }

.faq__item summary { cursor: pointer; transition: background 180ms var(--ease-out); }
.faq__item summary:active { background: rgba(255,255,255,0.035); }

.scroll-cue { transition: color 200ms var(--ease-out), opacity 400ms var(--ease); }
.scroll-cue:active { transform: translateX(-50%) scale(0.95); }

/* --- hover states, capability-gated so touch never sticks --- */
@media (hover: hover) and (pointer: fine) {
  .feed__row { transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out), transform 200ms var(--ease-out); }
  .feed__row:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateX(3px); }

  .kpi { transition: background 200ms var(--ease-out); }
  .kpi:hover { background: rgba(255,255,255,0.025); }

  .stat-card { transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out); }
  .stat-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }

  .how__step { transition: border-color 250ms var(--ease-out); }
  .how__step:hover { border-color: var(--border-strong); }

  .proof__metric { transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out); }
  .proof__metric:hover { transform: translateY(-2px); border-color: var(--emerald-line); }

  .passport { transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
  .passport:hover { transform: translateY(-4px); box-shadow: 0 52px 104px -40px rgba(0,0,0,0.9), 0 0 50px -28px var(--emerald-glow); }

  .demo__check { transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out); }
  .demo__check:not(.is-fail):hover { border-color: var(--border-strong); }

  .faq__item summary:hover { background: rgba(255,255,255,0.02); }
  .scroll-cue:hover { color: var(--fg-2); }
  .command__tab:not(.is-active):hover { color: var(--fg-2); }
  .demo__toggle-btn:not(.is-active):hover { color: var(--fg-2); }
  .closer__form input:hover { border-color: var(--border-strong); }

  .closer__secondary-link { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  .closer__secondary-link:hover { transform: translateX(2px); }

  .marquee__logo { transition: opacity 250ms var(--ease-out), background-color 250ms var(--ease-out), transform 250ms var(--ease-out); }
  .marquee__logo:hover { opacity: 1; background-color: var(--fg); transform: translateY(-2px); }

  /* icon comes alive when its card is hovered */
  .bento__icon { transition: transform 280ms var(--ease-out), background 280ms var(--ease-out), border-color 280ms var(--ease-out); }
  .bento__cell:hover .bento__icon { transform: scale(1.08) rotate(-4deg); }

  /* slider thumb grows under the cursor */
  .roi__field input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
}

/* --- neutralize sticky lift hovers on touch --- */
@media (hover: none) {
  .btn--solid:hover, .btn--ghost:hover, .bento__cell:hover { transform: none; }
}

/* --- comfortable tap targets on touch / coarse pointers --- */
@media (pointer: coarse) {
  .demo__toggle-btn { padding-block: 13px; }
  .reg__chip { padding-block: 12px; }
}

/* ============================================================
   REGULATED SUPPLY CHAINS — compliance + product passport
   ============================================================ */
.reg__grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start; }
.reg__compliance { display: flex; flex-direction: column; }
.reg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }
.reg__chip { font-family: var(--font-mono); font-size: 0.78rem; padding: 9px 15px; border-radius: 100px; border: 1px solid var(--border); color: var(--fg-2); background: rgba(255,255,255,0.02); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.reg__chip:hover { border-color: var(--emerald-line); color: var(--fg); }
.reg__chip.is-active { background: var(--emerald-soft); border-color: var(--emerald-line); color: var(--emerald-text); }
.reg__panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.1rem); min-height: 330px; display: flex; flex-direction: column; }
.reg__panel-title { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.reg__panel-title span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-3); letter-spacing: 0; text-transform: none; font-weight: 400; }
.reg__panel-body { color: var(--fg-2); margin-top: 0.85rem; max-width: 54ch; font-size: 0.95rem; }
.reg__panel-points { list-style: none; padding: 0; margin-top: auto; padding-top: 1.4rem; display: grid; gap: 0.6rem; }
.reg__panel-points li { position: relative; padding-left: 1.7rem; font-size: 0.9rem; color: var(--fg); }
.reg__panel-points li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--emerald); }
.reg__panel-points li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 7px; border: solid #03130d; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* forge: the printed barcode becoming an anchored on-chain identity — fills the column and echoes the section thesis */
.reg__forge { margin-top: 1.15rem; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; box-shadow: 0 30px 60px -34px rgba(0,0,0,0.6); }
.reg__forge-row { display: flex; flex-direction: column; gap: 0.5rem; }
.reg__forge-cap { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.reg__barcode { position: relative; height: 54px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.reg__barcode::before { content: ""; position: absolute; inset: 12px 16px; opacity: 0.72; background-image: repeating-linear-gradient(90deg, var(--fg-2) 0 2px, transparent 2px 5px, var(--fg-2) 5px 7px, transparent 7px 10px, var(--fg-2) 10px 11px, transparent 11px 16px, var(--fg-2) 16px 19px, transparent 19px 22px); }
.reg__barcode-sweep { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, transparent 41%, rgba(46,230,166,0.5) 50%, transparent 59%); background-size: 240% 100%; background-repeat: no-repeat; }
.js .reg__barcode-sweep { opacity: 1; animation: reg-sweep 2.8s ease-in-out infinite; }
@keyframes reg-sweep { 0% { background-position: -55% 0; } 52%, 100% { background-position: 165% 0; } }
.reg__forge-link { align-self: center; width: 1px; height: 18px; background: linear-gradient(var(--emerald-line), transparent); position: relative; }
.reg__forge-link::after { content: ""; position: absolute; left: 50%; top: 0; width: 5px; height: 5px; border-radius: 50%; transform: translateX(-50%); background: var(--emerald); box-shadow: 0 0 10px 1px var(--emerald-glow); opacity: 0; }
.js .reg__forge-link::after { animation: reg-drop 2.8s ease-in-out infinite; }
@keyframes reg-drop { 0%, 50% { top: -3px; opacity: 0; } 64% { opacity: 1; } 100% { top: 15px; opacity: 0; } }
.reg__forge-id { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--fg); }
.reg__forge-id b { color: var(--emerald-text); font-weight: 600; letter-spacing: 0; }
.reg__forge-check { width: 17px; height: 17px; border-radius: 50%; background: var(--emerald); position: relative; flex: none; }
.reg__forge-check::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 8px; border: solid #03130d; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.passport { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 40px 90px -42px rgba(0,0,0,0.85); }
.passport__media { position: relative; height: 178px; background: radial-gradient(circle at 50% 35%, #15263c, var(--bg)); display: grid; place-items: center; overflow: hidden; }
.passport__media picture { display: contents; }
.passport__photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) brightness(0.82) contrast(1.02); }
.passport__media-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--emerald-text); opacity: 0.5; }
.passport__media-fallback svg { width: 58px; height: 58px; }
.passport__media.has-photo .passport__media-fallback { display: none; }
.passport__media:not(.has-photo) .passport__photo { visibility: hidden; }
.passport__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,8,15,0.55)); pointer-events: none; }
.passport__seal { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; background: rgba(5,8,15,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--emerald-line); color: var(--emerald-text); font-size: 0.78rem; font-weight: 600; }
.passport__seal-ico { width: 14px; height: 14px; border-radius: 50%; background: var(--emerald); position: relative; flex: none; }
.passport__seal-ico::after { content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px; border: solid #03130d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.passport__body { padding: 1.3rem 1.4rem 1.5rem; }
.passport__kicker { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.passport__name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; margin-top: 0.25rem; }
.passport__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin: 1rem 0 1.2rem; padding: 0.95rem 0; border-block: 1px solid var(--border); }
.passport__facts div { display: flex; flex-direction: column; gap: 2px; }
.passport__facts span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); }
.passport__facts b { font-size: 0.82rem; color: var(--fg); font-weight: 500; }
.passport__timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.passport__timeline::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 22px; width: 2px; background: var(--emerald-line); }
.passport__timeline li { display: flex; gap: 0.85rem; padding: 0.5rem 0; position: relative; }
.passport__step-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--emerald); background: var(--emerald); flex: none; margin-top: 2px; position: relative; z-index: 1; }
.js .passport__step-dot { background: var(--bg); transition: background .45s var(--ease), box-shadow .45s var(--ease); }
.js .passport__timeline li.is-lit .passport__step-dot { background: var(--emerald); }
.passport__timeline li.is-now .passport__step-dot, .js .passport__timeline li.is-now.is-lit .passport__step-dot { box-shadow: 0 0 0 4px var(--emerald-soft); animation: pulse 2.2s var(--ease) infinite; }
.passport__step-main { display: flex; flex-direction: column; }
.passport__step-main b { font-size: 0.85rem; font-weight: 600; }
.passport__step-main small { font-size: 0.72rem; color: var(--fg-3); }
.passport__timeline li.is-now .passport__step-main small { color: var(--emerald-text); }

/* ============================================================
   ROI CALCULATOR
   ============================================================ */
.roi__head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.roi__panel { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(1.6rem, 3.5vw, 3rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(1.6rem, 3.5vw, 2.6rem); align-items: center; }
/* allow the columns and the nested grid rows to shrink below their intrinsic min on narrow screens */
.roi__panel > *, .roi__field, .roi__outputs > *, .roi__out-row > * { min-width: 0; }
.roi__controls { display: grid; gap: 1.7rem; margin: 0; }
.roi__field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.2rem 1rem; }
.roi__field label { font-size: 0.92rem; color: var(--fg-2); }
.roi__field output { font-family: var(--font-mono); font-size: 1.15rem; color: var(--fg); text-align: right; }
/* 6px visible track painted via background-image (JS sets the emerald fill),
   but the input is 28px tall so it's a comfortable drag target on touch */
.roi__field input[type="range"] {
  grid-column: 1 / -1; width: 100%; -webkit-appearance: none; appearance: none;
  height: 28px; margin-top: 0.3rem; cursor: pointer; touch-action: pan-y;
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--surface-3), var(--surface-3));
  background-repeat: no-repeat; background-size: 100% 6px; background-position: 0 center;
  border-radius: 100px;
}
.roi__field input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: transparent; border: 0; }
.roi__field input[type="range"]::-moz-range-track { height: 6px; background: transparent; border: 0; border-radius: 100px; }
.roi__field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; margin-top: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--emerald); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--emerald-line), 0 5px 14px -3px var(--emerald-glow); cursor: grab; transition: transform .15s var(--ease); }
.roi__field input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); cursor: grabbing; }
.roi__field input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--bg); border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 1px var(--emerald-line); cursor: grab; }
.roi__outputs { display: grid; gap: 1rem; }
.roi__out { display: flex; flex-direction: column; gap: 0.25rem; }
.roi__out--lead { background: var(--bg-2); border: 1px solid var(--rose-line); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; }
.roi__out-label { font-size: 0.72rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
.roi__out-num { font-family: var(--font-mono); font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -0.04em; color: var(--fg); line-height: 1; }
.roi__out--lead .roi__out-num { color: var(--rose-text); }
.roi__out-num--ok { color: var(--emerald-text); }
.roi__out-num--flag { color: var(--rose-text); }
.roi__out-sub { font-size: 0.78rem; color: var(--fg-3); }
.roi__out-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.roi__out-row .roi__out { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.roi__out-row .roi__out-num { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.roi__cta { width: 100%; margin-top: 0.3rem; }
.roi__disclaimer { font-size: 0.74rem; color: var(--fg-3); font-style: italic; }

@media (max-width: 880px) {
  .reg__grid { grid-template-columns: 1fr; }
  .roi__panel { grid-template-columns: 1fr; }
}

/* ============================================================
   INSIDE LEDGERSCAN — product tour (real UI mockups)
   ============================================================ */
.tour { isolation: isolate; }
.tour > .container { position: relative; z-index: 1; }
.tour::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}

.tour__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 1.1rem;
}
.tour__card {
  position: relative;
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tour__card--feature { grid-column: span 2; grid-row: span 2; }
.tour__card--alert   { grid-column: span 3; }

/* stagger the card entrance via the existing reveal system */
.js .tour__card[data-reveal] { transition-delay: var(--d, 0ms); }

@media (hover: hover) and (pointer: fine) {
  .tour__card { transition: border-color 250ms var(--ease-out), background 250ms var(--ease-out), transform 250ms var(--ease-out); }
  .tour__card:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-3px); }
}

/* card header */
.tour__card-head { display: flex; gap: 0.85rem; align-items: flex-start; }
.tour__num {
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; line-height: 1;
  color: var(--emerald-text);
  padding: 0.34rem 0.5rem; border-radius: 8px;
  background: var(--emerald-soft); border: 1px solid var(--emerald-line); flex: none;
}
.tour__num--alert { color: var(--rose-text); background: var(--rose-soft); border-color: var(--rose-line); }
.tour__card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; letter-spacing: -0.01em; }
.tour__card-cap { margin-top: 0.3rem; color: var(--fg-2); font-size: 0.92rem; line-height: 1.42; }

/* the mock surface */
.tour__mock {
  margin-top: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
}
.tour__card--feature .tour__mock { padding: 0; margin-top: 0; flex: 1; display: flex; flex-direction: column; }
.tour__card--feature .tour__form { flex: 1; justify-content: center; }

/* window chrome (feature) */
.tour__chrome { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--border); }
.tour__chrome-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.tour__chrome-url { margin-left: 0.55rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-3); }

/* ---- 01 register form ---- */
.tour__form { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; }
.tour__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.tour__field { display: flex; flex-direction: column; gap: 0.35rem; }
.tour__label { font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
.tour__select, .tour__input {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-radius: 10px; min-height: 40px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border);
  font-size: 0.9rem; color: var(--fg);
}
.tour__input--id { color: var(--emerald-text); }
.tour__caret { width: 0; height: 0; flex: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--fg-3); }
.tour__id-ok, .tour__foot-ok {
  width: 16px; height: 16px; border-radius: 50%; flex: none; position: relative;
  background: var(--emerald-soft); border: 1px solid var(--emerald-line);
}
.tour__id-ok::after, .tour__foot-ok::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid var(--emerald-text); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tour__progress { height: 7px; border-radius: 100px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.tour__progress-bar {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--emerald), var(--emerald-text));
  transform: scaleX(1); transform-origin: left;
}
.tour__form-foot { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--emerald-text); }

/* ---- 02 authorize hubs ---- */
.tour__hubs { display: flex; flex-direction: column; gap: 0.55rem; }
.tour__hub {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.6rem 0.7rem; border-radius: 10px; font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border);
}
.tour__hub-name { display: flex; align-items: center; gap: 0.5rem; color: var(--fg); }
.tour__hub-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--emerald); box-shadow: 0 0 8px var(--emerald-glow); }
.tour__hub--off .tour__hub-name { color: var(--fg-3); }
.tour__hub--off .tour__hub-dot { background: rgba(255, 255, 255, 0.2); box-shadow: none; }
.tour__switch {
  position: relative; width: 34px; height: 19px; border-radius: 100px; flex: none;
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border);
}
.tour__switch::after {
  content: ""; position: absolute; top: 50%; left: 2px; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: var(--fg-2);
}
.tour__switch.is-on { background: var(--emerald); border-color: var(--emerald-line); }
.tour__switch.is-on::after { left: calc(100% - 15px); background: #04130d; }

/* ---- 03 watch every scan ---- */
.tour__feed { position: relative; display: flex; flex-direction: column; gap: 0.5rem; overflow: hidden; border-radius: 10px; }
.tour__sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--emerald-soft) 50%, transparent);
}
.tour__scan {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: 10px;
  background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border);
}
.tour__scan-ico { width: 18px; height: 18px; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center; }
.tour__scan-ico--ok { background: var(--emerald-soft); border: 1px solid var(--emerald-line); }
.tour__scan-ico--ok::after { content: ""; width: 4px; height: 8px; border: solid var(--emerald-text); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-0.5px, -1px); }
.tour__scan-ico--bad { background: var(--rose-soft); border: 1px solid var(--rose-line); }
.tour__scan-ico--bad::before, .tour__scan-ico--bad::after { content: ""; position: absolute; width: 9px; height: 2px; border-radius: 2px; background: var(--rose-text); }
.tour__scan-ico--bad::before { transform: rotate(45deg); }
.tour__scan-ico--bad::after { transform: rotate(-45deg); }
.tour__scan-id { flex: 1; font-size: 0.85rem; color: var(--fg); }
.tour__scan-score { font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; padding: 0.16rem 0.45rem; border-radius: 6px; }
.tour__scan-score--ok { color: var(--emerald-text); background: var(--emerald-soft); }
.tour__scan-score--bad { color: var(--rose-text); background: var(--rose-soft); }

/* ---- 04 fakes auto-blocked (wide payoff) ---- */
.tour__mock--alert {
  display: flex; align-items: center; justify-content: center; min-height: 124px;
  position: relative;
  background:
    radial-gradient(120% 150% at 50% 0%, var(--rose-soft), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg-2));
}
/* one-shot "alarm fired" glow behind the toast at the narrative climax (top-anchored, stays in-card) */
.tour__mock--alert::after {
  content: ""; position: absolute; left: 50%; top: 8px; z-index: 0; pointer-events: none;
  width: 70%; height: 72px; border-radius: 50%; opacity: 0;
  transform: translateX(-50%) scale(0.7);
  background: radial-gradient(ellipse at center, rgba(244, 63, 94, 0.28), transparent 70%);
  filter: blur(6px);
}
.tour__toast {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0.9rem; width: 100%; max-width: 470px;
  padding: 0.85rem 1rem; border-radius: 14px;
  background: var(--surface-3); border: 1px solid var(--rose-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--rose-soft);
}
.tour__toast-ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--rose-soft); border: 1px solid var(--rose-line); }
.tour__toast-ico::before { content: "!"; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1; color: var(--rose-text); }
.tour__toast-body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.tour__toast-body b { font-size: 0.95rem; color: var(--fg); }
.tour__toast-body small { font-size: 0.77rem; color: var(--fg-2); }
.tour__toast-badge {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; flex: none;
  padding: 0.3rem 0.5rem; border-radius: 6px;
  color: var(--rose-text); background: var(--rose-soft); border: 1px solid var(--rose-line);
}

/* ---- scroll-gated inner motion (only after the card is revealed) ---- */
.js .tour__card .tour__field,
.js .tour__card .tour__progress,
.js .tour__card .tour__form-foot,
.js .tour__card .tour__hub { opacity: 0; transform: translateY(8px); }
.js .tour__card .tour__scan { opacity: 0; transform: translateX(-8px); }
.js .tour__card .tour__toast { opacity: 0; transform: translateY(14px) scale(0.97); }
.js .tour__card .tour__toast-badge { opacity: 0; transform: scale(1.18); }
.js .tour__card .tour__progress-bar { transform: scaleX(0); }

.js .tour__card.is-in .tour__field,
.js .tour__card.is-in .tour__progress,
.js .tour__card.is-in .tour__form-foot,
.js .tour__card.is-in .tour__hub { animation: tourFieldIn 0.55s var(--ease-soft) both; animation-delay: var(--ri, 0ms); }
.js .tour__card.is-in .tour__scan { animation: tourRowIn 0.5s var(--ease-soft) both; animation-delay: var(--ri, 0ms); }
.js .tour__card.is-in .tour__progress-bar { animation: tourFill 1.1s var(--ease-soft) both; animation-delay: 520ms; }
.js .tour__card.is-in .tour__toast { animation: tourToastIn 0.6s var(--ease-soft) 0.18s both, tourToastPulse 2.8s var(--ease) 1.6s infinite; }
.js .tour__card.is-in .tour__mock--alert::after { animation: tourAlarmBloom 1.5s var(--ease) 0.18s 1 both; }
.js .tour__card.is-in .tour__toast-badge { animation: tourStamp 0.42s var(--ease-out) 0.66s both; }
.js .tour__card.is-in .tour__sweep { animation: tourSweep 3.4s var(--ease) 0.7s infinite; }
.js .tour__card.is-in .tour__switch.is-on { animation: tourSwitchOn 0.55s var(--ease-soft) both; animation-delay: calc(var(--ri, 0ms) + 260ms); }
.js .tour__card.is-in .tour__switch.is-on::after { animation: tourKnob 0.55s var(--ease-soft) both; animation-delay: calc(var(--ri, 0ms) + 260ms); }

@keyframes tourFieldIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tourRowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes tourFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tourToastIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes tourToastPulse {
  0%, 100% { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--rose-soft); }
  50% { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5), 0 0 0 4px var(--rose-soft); }
}
@keyframes tourAlarmBloom {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  38% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.12); }
}
@keyframes tourStamp { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: scale(1); } }
@keyframes tourSweep {
  0% { transform: translateY(-110%); opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}
@keyframes tourSwitchOn { from { background: rgba(255, 255, 255, 0.1); } to { background: var(--emerald); } }
@keyframes tourKnob { from { left: 2px; background: var(--fg-2); } to { left: calc(100% - 15px); background: #04130d; } }

@media (max-width: 920px) {
  .tour__bento { grid-template-columns: 1fr; }
  .tour__card--feature, .tour__card--alert { grid-column: auto; grid-row: auto; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .command__frame { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .tour__card .tour__field, .js .tour__card .tour__progress, .js .tour__card .tour__form-foot,
  .js .tour__card .tour__hub, .js .tour__card .tour__scan, .js .tour__card .tour__toast,
  .js .tour__card .tour__toast-badge { opacity: 1 !important; transform: none !important; animation: none !important; }
  .tour__progress-bar { transform: scaleX(1) !important; animation: none !important; }
  .tour__sweep, .tour__mock--alert::after { display: none !important; }
  .faq__item::details-content { transition: none !important; }
  .js .tour__card.is-in .tour__switch.is-on, .js .tour__card.is-in .tour__switch.is-on::after { animation: none !important; }
  .js .passport__step-dot { background: var(--emerald) !important; }
  /* keep color/border feedback, drop movement */
  .btn:active, .btn--solid:active, .btn--lg:active, .demo__toggle-btn:active, .command__tab:active,
  .reg__chip:active, .nav__burger:active, .demo__run:active, .scroll-cue:active,
  .feed__row:hover, .stat-card:hover, .proof__metric:hover, .passport:hover,
  .closer__secondary-link:hover, .marquee__logo:hover, .bento__cell:hover .bento__icon { transform: none !important; }
  .pulse-dot, .demo__scanline, .demo__qr-frame, .worldmap .scan-dot::after, #commandMap .scan-dot::after, .demo__run-ico, .demo__run,
  .hero__aurora, .scroll-cue__mouse::after, .marquee__track, .wordmark__word--beam, .reg__barcode-sweep, .reg__forge-link::after,
  .film__toggle-ring { animation: none !important; }
  /* the film never autoplays under reduced motion (app.js), so the sweep would sit there forever */
  .film__scanline { display: none !important; }
  .film__chapter-fill { transition: none !important; }
  .wordmark__word--beam { opacity: 0; }
  .demo[data-state="scanning"] .demo__scanline { opacity: 0; }
  .reg__barcode-sweep { opacity: 0; }
  .btn--solid::after { display: none; }
  * { scroll-behavior: auto !important; }
}