/* ============================================================
   VerifyUGC — stylesheet
   Live-site brand (purple→blue→cyan · Space Grotesk / Inter /
   JetBrains Mono · hex-shield motif) elevated with cinematic
   scroll polish. Per-vertical themes via [data-theme].
   ============================================================ */

/* ---------------- tokens ---------------- */
/* --node / --shield: the WORLD's cast colors (server dots · protection ring +
   wash), themeable independently of the UI accent ramp. Vertical palettes
   chosen from the brand-researched sampler: Roblox “Cobalt Era” (2025 rebrand),
   UEFN “Creator Royale”, Minecraft “Diamond Tier”.
   Rule of thumb: --node must never approach corruption red (#f87171). */
:root, [data-theme="brand"] { --a1:#a855f7; --a2:#3b82f6; --a3:#22d3ee; --node:#3b82f6; --shield:#22d3ee; --t1:#bd6cff; --t2:#4d8dff; --t3:#21e8ff; --label:"Trust & Safety"; }
[data-theme="roblox"]    { --a1:#1f6bff; --a2:#4f9cff; --a3:#cfe3ff; --node:#4f8fea; --shield:#7fc0ff; --t1:#2f7bff; --t2:#5cb2ff; --t3:#8fd2ff; --label:"For Roblox creators"; }
[data-theme="uefn"]      { --a1:#8b5cf6; --a2:#4c51f7; --a3:#5fceea; --node:#7d74e8; --shield:#5fceea; --t1:#a578ff; --t2:#5d63ff; --t3:#4fdcff; --label:"For Fortnite / UEFN creators"; }
[data-theme="minecraft"] { --a1:#4ade80; --a2:#2dd4bf; --a3:#22d3ee; --node:#3ecf8e; --shield:#22d3ee; --t1:#54f08c; --t2:#2ee8c4; --t3:#1fe1ff; --label:"For Minecraft creators"; }

:root {
  --bg:#070710; --bg2:#0c0c18; --surface:#13131f; --surface2:#171726;
  --border:rgba(255,255,255,.08); --border2:rgba(255,255,255,.14);
  --text:#edecf7; --dim:#9b9bbd; --faint:#8b8ba8;
  --head:#f5f4ff; --line:rgba(255,255,255,.08);
  --grad:linear-gradient(120deg,var(--a1),var(--a2) 55%,var(--a3));
  --acc-glow:color-mix(in srgb,var(--a1) 42%,transparent);
  --maxw:1180px; --r:16px; --r-lg:20px;
  --success:#34d399; --danger:#f87171; --warning:#fbbf24;
  --sans:"Inter",system-ui,sans-serif;
  --display:"Space Grotesk","Inter",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; overflow-x:clip; }
body {
  background:var(--bg); color:var(--text); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4,.dsp { font-family:var(--display); line-height:1.06; letter-spacing:-.025em; font-weight:700; color:var(--head); }
a { color:inherit; text-decoration:none; }
img,svg,canvas { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.mono { font-family:var(--mono); }
/* ACCENT TEXT POP — gradient-clipped words use their own ELECTRIC stops
   (--t1/--t2/--t3): brighter + more saturated than the a1–a3 fill tokens, which
   read flat as text on the dark field. A soft self-colored drop-shadow gives the
   words luminosity (text-shadow can't — it bleeds through clipped fills). */
.gt { background:linear-gradient(120deg,var(--t1),var(--t2) 55%,var(--t3)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:saturate(1.12) drop-shadow(0 0 16px color-mix(in srgb,var(--t2) 30%,transparent)); }
.kicker { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; font-weight:600; color:var(--t3); min-height:1.2em; }
.kicker::before { content:""; width:22px; height:1px; background:var(--t3); opacity:.6; }
/* typewriter caret — blinks while the section tag types itself out */
.kicker.typing::after { content:"▍"; margin-left:1px; color:var(--a3); animation:blink 1s steps(1) infinite; }

/* ---------------- fixed background world ---------------- */
#network { position:fixed; inset:0; z-index:1; width:100vw; height:100vh; pointer-events:none; opacity:.85; }
/* GLOW DISCIPLINE — exactly THREE glow spots site-wide, one per brand accent:
   the orbs .o1/.o2/.o3. The two radial washes that used to live here duplicated
   a1/a2 (stacking up to 7 glows once an image backdrop's baked glows joined). */
.bg { position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--bg); }
.bg .hex { position:absolute; inset:-2px; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M30 1L59 18v34L30 69 1 52V18z'/%3E%3Cpath d='M30 69l29 17v33'/%3E%3Cpath d='M30 69L1 86v33'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 104px; }
.bg .orb { position:absolute; border-radius:50%; filter:blur(110px); opacity:.4; mix-blend-mode:screen; transition:background 1.2s ease; }
/* s2 — the threat scene borrows a glow instead of adding one: while the problem
   section owns the viewport (body.threat-zone, set by init.js), the right-side
   orb shifts to danger red. Glow count stays at exactly three. */
body.threat-zone .o2 { background:var(--danger); }

/* hex backdrop — "Dark Mamba", the shipped plate (set on <body data-hex="mamba">):
   matte black, bigger hexes, heavy vignette, zero inherent color. It is colored
   entirely by the page's theme-tinted orbs and the node world. The plate's baked
   glow counts as one of the three glow spots, so the orbs step back to .3. */
body[data-hex="mamba"] .bg .hex {
  background-image:url("/assets/hex-mamba.png?v=2");
  background-size:cover; background-position:center; opacity:.95; }
body[data-hex="mamba"] .bg .orb { opacity:.3; }
.o1 { width:520px; height:520px; background:var(--a1); top:-160px; left:-120px; animation:drift1 20s ease-in-out infinite; }
.o2 { width:460px; height:460px; background:var(--a2); top:30%; right:-180px; animation:drift2 24s ease-in-out infinite; }
.o3 { width:380px; height:380px; background:var(--a3); top:78%; left:18%; animation:drift1 28s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,40px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,60px)} }
.fx-vignette { position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%); }
.fx-grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* hero exit: children fall away from the page one-by-one when .leaving */
.hero-inner > * { will-change:opacity, transform; transition:opacity .4s ease, transform .55s cubic-bezier(.55,0,.85,.15); }
.hero.leaving .hero-inner > * { opacity:0; transform:translateY(56px) scale(.95); }
.hero.leaving .hero-inner > *:nth-child(1) { transition-delay:0s; }
.hero.leaving .hero-inner > *:nth-child(2) { transition-delay:.05s; }
.hero.leaving .hero-inner > *:nth-child(3) { transition-delay:.10s; }
.hero.leaving .hero-inner > *:nth-child(4) { transition-delay:.15s; }
.hero.leaving .hero-inner > *:nth-child(5) { transition-delay:.20s; }
.hero.leaving .hero-inner > *:nth-child(6) { transition-delay:.25s; }
.hero.leaving .hero-inner > *:nth-child(7) { transition-delay:.30s; }
/* scene-flash: fixed wash that peaks mid hero→problem to mask the section swap */
.scene-flash { position:fixed; inset:0; z-index:46; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--a3) 30%,var(--bg)) 0%, var(--bg) 55%); }

/* scanner lens frame: makes the hero→problem dive feel like looking THROUGH
   the instrument. Corner brackets + a travelling scan line + edge vignette,
   faded in only during the transition (opacity driven from init.js). */
.lensframe { position:fixed; inset:0; z-index:45; pointer-events:none; opacity:0; }
.lensframe::after { content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 220px 48px color-mix(in srgb,var(--bg) 82%,transparent); }
.lensframe .lf { position:absolute; width:46px; height:46px;
  border:2px solid color-mix(in srgb,var(--a3) 72%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--a3) 30%,transparent); }
.lensframe .lf.c1 { top:30px; left:30px; border-right:0; border-bottom:0; }
.lensframe .lf.c2 { top:30px; right:30px; border-left:0; border-bottom:0; }
.lensframe .lf.c3 { bottom:30px; left:30px; border-right:0; border-top:0; }
.lensframe .lf.c4 { bottom:30px; right:30px; border-left:0; border-top:0; }
.lensframe .lf-scan { position:absolute; left:8%; right:8%; height:2px; top:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a3) 80%,transparent),transparent);
  opacity:.5; animation:lfScan 3.4s ease-in-out infinite; }
@keyframes lfScan { 0%,100% { transform:translateY(12vh); } 50% { transform:translateY(86vh); } }
@media (prefers-reduced-motion:reduce) { .lensframe { display:none; } }

/* progress rail */
.rail { position:fixed; top:0; left:0; height:2px; width:100%; z-index:60; transform:scaleX(0); transform-origin:0 50%;
  background:var(--grad); box-shadow:0 0 14px var(--acc-glow); }

/* ---------------- nav ---------------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:55; height:70px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,40px); transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
.nav.solid { background:rgba(7,7,16,.72); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:1.16rem; color:var(--head); }
.brand .mark { width:30px; height:34px; filter:drop-shadow(0 0 14px var(--acc-glow)); }
.brand .mark svg { width:100%; height:100%; }
.brand b { font-weight:700; }
.brand .tag { color:var(--a2); }
.nav-links { display:flex; gap:30px; align-items:center; }
.nav-links a { color:var(--dim); font-weight:500; font-size:.93rem; transition:color .2s; }
.nav-links a:hover { color:var(--text); }
.nav-cta { display:flex; gap:12px; align-items:center; }
.nav-signin { color:var(--dim); font-weight:500; font-size:.93rem; }
.nav-signin:hover { color:var(--text); }
.nav-burger { display:none; background:none; border:0; color:var(--text); font-size:1.4rem; cursor:pointer; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:12px; font-weight:600; font-size:.95rem;
  font-family:var(--sans); cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .25s, border-color .2s, background .2s; white-space:nowrap; }
.btn .arr { transition:transform .2s; }
.btn:hover .arr { transform:translateX(4px); }
.btn-primary { position:relative; background:var(--grad); color:#fff; box-shadow:0 8px 30px -8px var(--acc-glow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 40px -10px var(--acc-glow); }
.btn-ghost { border-color:var(--border2); color:var(--text); background:rgba(255,255,255,.02); }
.btn-ghost:hover { border-color:var(--a1); color:#fff; }

/* ---------------- section scaffolding ---------------- */
section { position:relative; z-index:2; }
.sec-head { max-width:680px; margin:0 auto clamp(40px,6vh,64px); text-align:center; }
.sec-head h2 { font-size:clamp(2rem,4.6vw,3.2rem); margin:16px 0 14px; }
.sec-head p { color:var(--dim); font-size:1.08rem; }
[data-cam] { transform:translateY(var(--cam-y,0)) scale(var(--cam-s,1)); transform-origin:50% 70%; will-change:transform; }

/* reveals — driven by @keyframes (NOT transitions): animations run on their
   own timeline and are immune to the per-frame style-invalidation that can
   freeze a transition at frame 0 while rAF loops write to the page. */
.rv { opacity:0; }
.rv.in { animation:riseIn .7s cubic-bezier(.22,1,.36,1) forwards; }
.rv-1.in { animation-delay:.08s; } .rv-2.in { animation-delay:.16s; } .rv-3.in { animation-delay:.24s; }
.deck-item { opacity:0; }
.deck-item.in { animation:deckIn .6s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--i,0) * 80ms); }
.stagger .tok-line { display:block; overflow:hidden; }
.stagger .tok { display:block; transform:translateY(110%); }
.stagger.in .tok { animation:tokRise .8s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(var(--i,0) * 90ms); }
.draw-line { height:1px; background:linear-gradient(90deg,transparent,var(--border2),transparent); transform:scaleX(0); transform-origin:0 50%; }
.draw-line.in { animation:drawIn 1s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes riseIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes deckIn { from{opacity:0;transform:translateY(34px) scale(.985)} to{opacity:1;transform:none} }
@keyframes tokRise { from{transform:translateY(110%)} to{transform:none} }
@keyframes drawIn { from{transform:scaleX(0)} to{transform:scaleX(1)} }
/* safety net: forces the final state even if the entrance animation stalled */
.rv.shown, .deck-item.shown { opacity:1!important; transform:none!important; animation:none!important; }
.stagger.shown .tok { transform:none!important; animation:none!important; }
.draw-line.shown { transform:scaleX(1)!important; animation:none!important; }
@media (prefers-reduced-motion:reduce) { *{ animation:none!important; } .rv,.deck-item{opacity:1;transform:none;} .stagger .tok{transform:none;} .draw-line{transform:scaleX(1);} .reveal-head{--reveal:100%!important;} .reveal-head .rv-accent{--reveal:100%!important;} .fill-h,.fill-h .gt{--reveal:100%!important;} .sol-pillar{opacity:1;} .join-card .jc-top,.join-card h3,.join-card > p,.join-card .jc-list,.join-card .jc-cta{opacity:1;} }

/* ---------------- hero ---------------- */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:120px 24px 70px; overflow:hidden; }
.hero-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 46%, transparent 30%, var(--bg) 78%);
  /* feather the bottom edge — the veil's solid base used to end in a hard line
     exactly at the s1/s2 boundary, visible sliding over the world during the
     dive. The last ~28% now dissolves into the next scene. */
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 72%, transparent 100%); }
.hud { position:absolute; z-index:2; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }
.hud-tl { top:96px; left:clamp(20px,4vw,46px); } .hud-tr { top:96px; right:clamp(20px,4vw,46px); text-align:right; }
.hud-bl { bottom:34px; left:clamp(20px,4vw,46px); }
.hud-status { display:flex; align-items:center; gap:8px; }
.hud .dot { width:7px; height:7px; border-radius:50%; background:var(--a3); box-shadow:0 0 10px var(--a3); animation:blink 1.6s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.shards { position:absolute; inset:0; z-index:2; pointer-events:none; }
.hshard { position:absolute; transform:translate(calc(var(--mx,0)*var(--pan,40px)),calc(var(--my,0)*var(--pan,40px))); }
.hshard-c {
  display:flex; align-items:center; gap:9px;
  width:212px; box-sizing:border-box;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--dim);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:14px; padding:11px 15px; white-space:nowrap;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 60px -24px #000, inset 0 1px 0 rgba(255,255,255,.05);
  /* entrance: fade+rise+scale, staggered via --sd; then gentle float */
  opacity:0; transform:translateY(16px) scale(.94);
  animation:shardIn .7s cubic-bezier(.22,1,.36,1) forwards, floaty 7s ease-in-out infinite;
  animation-delay:var(--sd,0s), calc(var(--sd,0s) + .7s);
}
.hshard-c .lbl { color:var(--faint); text-transform:uppercase; letter-spacing:.06em; font-size:.68rem; }
.hshard-c .val { margin-left:auto; color:var(--text); font-weight:600; }
.hshard-c .hs-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.hshard-c .hs-dot.ok { background:var(--success); box-shadow:0 0 8px var(--success); animation:blink 2s infinite; }
.hshard-c .hs-dot.p { background:var(--a1); box-shadow:0 0 8px var(--a1); }
.hshard-c .hs-dot.c { background:var(--a3); box-shadow:0 0 8px var(--a3); }
.hshard-c .hs-dot.live { background:var(--a3); box-shadow:0 0 8px var(--a3); animation:blink 1.6s infinite; }
@keyframes shardIn { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.hero-inner { position:relative; z-index:3; text-align:center; max-width:840px; }
/* hero headline cycle: each line is an object that rises with a focus-pull */
.hero h1 .hl-line { display:block; }
.hero h1 .hl-in { display:inline-block; will-change:transform, opacity, filter; }
.hero .chip { display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border:1px solid var(--border2); border-radius:999px;
  font-size:.82rem; color:var(--dim); background:rgba(19,19,31,.66); margin-bottom:28px; backdrop-filter:blur(6px); }
.hero .chip .d { width:7px; height:7px; border-radius:50%; background:var(--a3); box-shadow:0 0 12px var(--a3); }
.hero .chip b { color:var(--text); font-weight:600; }
.hero h1 { font-size:clamp(2.7rem,7.5vw,5.4rem); letter-spacing:-.035em; margin-bottom:22px; }
.hero .lead { max-width:660px; margin:0 auto 30px; font-size:clamp(1.06rem,2.1vw,1.3rem); color:var(--dim); }

/* hero search widget — the product centerpiece */
.hero-searchlabel { font-size:1.02rem; font-weight:600; color:var(--text); margin-bottom:16px; letter-spacing:-.01em; }
.hero-search {
  position:relative; display:flex; align-items:center; gap:12px;
  max-width:620px; margin:0 auto 14px; padding:9px 9px 9px 20px;
  border:1.5px solid transparent; border-radius:18px;
  background:
    linear-gradient(rgba(13,13,24,.86), rgba(13,13,24,.86)) padding-box,
    linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3)) border-box;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px -32px color-mix(in srgb,var(--a1) 60%,transparent), inset 0 1px 0 rgba(255,255,255,.06);
  transition:box-shadow .3s, transform .3s;
}
.hero-search::after {
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:20px;
  background:linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3));
  filter:blur(26px); opacity:.26; transition:opacity .3s;
}
.hero-search:focus-within { transform:translateY(-1px);
  box-shadow:0 36px 90px -30px color-mix(in srgb,var(--a1) 78%,transparent), inset 0 1px 0 rgba(255,255,255,.06); }
.hero-search:focus-within::after { opacity:.5; }
.hs-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
.hero-search:focus-within .hs-icon { stroke:var(--a3); }
.hero-search input {
  flex:1; min-width:0; background:transparent; border:0; outline:none;
  color:var(--text); font-family:inherit; font-size:1.08rem; padding:15px 0;
}
.hero-search input::placeholder { color:var(--faint); }
.hero-search .btn { flex-shrink:0; border-radius:12px; padding:14px 26px; font-size:1rem; }
.hero-subnote { font-size:.92rem; color:var(--faint); margin-bottom:8px; }
.hero-res { font-family:var(--mono); font-size:.86rem; min-height:22px; margin-bottom:26px; color:var(--faint); transition:color .2s; }
.hero-res.scanning { color:var(--a3); } .hero-res.ok { color:var(--success); } .hero-res.bad { color:var(--danger); }
.hero-res b { font-weight:700; }

/* compact proof strip — the narrow-screen stand-in for the floating stat shards */
.hero-proof { display:none; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--faint); margin-top:2px; }
.hero-proof b { color:var(--text); font-weight:600; }
.hero-proof i { width:3px; height:3px; border-radius:50%; background:var(--faint); opacity:.6; }

.scroll-cue { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  background:none; border:0; cursor:pointer; padding:10px 14px; transition:color .25s; }
.scroll-cue:hover { color:var(--text); }
.scroll-cue .line { width:1px; height:34px; background:linear-gradient(var(--a3),transparent); transition:height .25s; }
.scroll-cue:hover .line { height:42px; }

/* ---------------- multi-layer parallax depth ---------------- */
[data-plx] { transform:translate3d(0,var(--ty,0),0); will-change:transform; }
/* problem section: 2-class override so it always stays viewport height */
.section-pad.problem {
  height:100svh;
  padding:clamp(80px,10vh,96px) 0 clamp(28px,4vh,44px);
  overflow:hidden;
  justify-content:center;
}
/* ---- section-2 staggered entrance (transition-based on .p2-in; robust —
       transitions never get stranded play-pending the way delayed keyframe
       animations can, and they reverse cleanly on scroll-up) ---- */
.problem.p2anim .problem-intro { opacity:0; transform:translateX(-48px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.problem.p2anim .problem-canvas-col { opacity:0; transition:opacity .9s ease; }
.problem.p2anim .pcard { opacity:0; transform:translateY(52px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.problem.p2anim.p2-in .problem-intro { opacity:1; transform:none; transition-delay:.05s; }
.problem.p2anim.p2-in .problem-canvas-col { opacity:1; transition-delay:.25s; }
.problem.p2anim.p2-in .pcard { opacity:1; transform:none; }
.problem.p2anim.p2-in .pcard:nth-child(1) { transition-delay:.18s; }
.problem.p2anim.p2-in .pcard:nth-child(2) { transition-delay:.30s; }
.problem.p2anim.p2-in .pcard:nth-child(3) { transition-delay:.42s; }
@media (prefers-reduced-motion:reduce) {
  .problem.p2anim .problem-intro, .problem.p2anim .problem-canvas-col, .problem.p2anim .pcard { opacity:1!important; transform:none!important; }
}
/* s2 depth blobs removed — glow discipline: the three fixed orbs are the only
   ambient glows; s2 recolors .o2 to danger red via body.threat-zone instead. */
.problem .wrap { position:relative; z-index:2; }

/* ---------------- problem layout (2-col with infographic) ---------------- */
/* 2-col top: intro left, canvas right */
.problem-top { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px); align-items:stretch; margin-bottom:clamp(20px,3vh,34px); }
.problem-intro { display:flex; flex-direction:column; justify-content:center; }
/* canvas col: relative container, canvas fills it */
.problem-canvas-col { position:relative; min-height:min(280px,36vh); }
@property --reveal { syntax:'<percentage>'; inherits:true; initial-value:0%; }
.reveal-head { font-size:clamp(2.2rem,6vw,4.4rem); max-width:14ch; margin:18px 0 22px; letter-spacing:-.03em; text-wrap:balance;
  --reveal:0%;
  background:linear-gradient(90deg, var(--head) 0, var(--head) var(--reveal), color-mix(in srgb,var(--head) 20%,transparent) calc(var(--reveal) + 1%));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
/* .rv-accent gradient defined above (inherits --reveal from parent) */
.reveal-head.fill { animation:fillSweep 1.5s cubic-bezier(.5,0,.2,1) forwards; }
/* accent words end at FULL .gt vibrancy — the old fill mixed the accents with
   --head (white), leaving "move to the next server" looking washed out. The
   filled state now matches the electric t1→t2→t3 text ramp every .gt uses. */
.reveal-head .rv-accent, .fill-h .gt { background:linear-gradient(90deg,
  var(--t1) 0,
  var(--t2) calc(var(--reveal) * .55),
  var(--t3) var(--reveal),
  color-mix(in srgb,var(--t1) 18%,transparent) calc(var(--reveal) + 1%));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes fillSweep { from{--reveal:0%} to{--reveal:100%} }
/* generic fill header — every section h2 sweeps in like s2's (size unchanged;
   triggered by .fill via the data-fill-head observer, replays on re-entry).
   Delayed .3s so the kicker's typewriter leads the beat. */
.fill-h { --reveal:0%;
  background:linear-gradient(90deg, var(--head) 0, var(--head) var(--reveal), color-mix(in srgb,var(--head) 20%,transparent) calc(var(--reveal) + 1%));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.fill-h.fill { animation:fillSweep 1.15s .3s cubic-bezier(.5,0,.2,1) forwards; }
.problem-sub { max-width:600px; color:var(--dim); font-size:1.1rem; margin-bottom:clamp(40px,6vh,60px); }

/* ---------------- horizontal journey ---------------- */
.hsec { position:relative; height:480vh; z-index:2; }
.hpin { position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; }
.htrack { display:flex; height:100%; align-items:center; will-change:transform; padding:0 max(6vw, calc(50vw - 350px)); gap:4vw; }
.hpanel { flex:0 0 auto; width:min(700px,88vw); display:flex; flex-direction:column; justify-content:center; transition:opacity .4s, transform .4s; opacity:.4; }
.hpanel.focus { opacity:1; }
.hp-intro h2 { font-size:clamp(2.2rem,5vw,3.6rem); margin:14px 0 16px; }
.hp-intro .lead { color:var(--dim); font-size:1.1rem; max-width:380px; }
.hp-scrollhint { margin-top:30px; font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--a3); }
.hp-step { flex-direction:row; align-items:center; gap:22px; }
.hp-num { font-family:var(--mono); font-size:clamp(3rem,7vw,5.5rem); font-weight:600; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.7; flex-shrink:0; }
.hp-card {
  flex:1; min-width:0; position:relative; overflow:hidden;
  background:rgba(255,255,255,.034); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:26px;
  transition:border-color .3s, box-shadow .3s;
}
.hp-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3)); opacity:.5; }
.hp-tag { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--a3); margin-bottom:10px; }
.hp-card h3 { font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:12px; }
.hp-card p { color:var(--dim); font-size:1rem; }
.hp-card .mono { color:var(--text); }
.hp-chip { display:inline-block; margin-top:18px; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; padding:8px 14px; border-radius:999px; border:1px solid var(--border2); }
.hp-chip.bad { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent); background:color-mix(in srgb,var(--danger) 10%,transparent); }
.hp-chip.warn { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 45%,transparent); background:color-mix(in srgb,var(--warning) 10%,transparent); }
.hp-chip.ok { color:var(--success); border-color:color-mix(in srgb,var(--success) 45%,transparent); background:color-mix(in srgb,var(--success) 10%,transparent); }
/* shared skip button — the journey "Continue" cue */
.hnext-wrap { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:4; }
.scene-skip {
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  color:rgba(255,255,255,.28); padding:8px 4px;
  transition:color .25s;
}
.scene-skip:hover { color:rgba(255,255,255,.7); }
/* journey "Continue" — same visual language as the hero scroll-cue */
.scene-skip.skip-cue { flex-direction:column; gap:8px; font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
.scene-skip.skip-cue .line { width:1px; height:34px; background:linear-gradient(var(--a3),transparent); }
.scene-skip.skip-cue:hover { color:rgba(255,255,255,.75); }

/* ---------------- problem cards ---------------- */
.section-pad { padding:clamp(70px,10vh,110px) 0; min-height:100svh; display:flex; flex-direction:column; justify-content:safe center; }
.prob { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.prob .pcard {
  position:relative; overflow:hidden;
  padding:20px 22px 22px;
  background:rgba(255,255,255,.034);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  transition:border-color .3s, transform .3s cubic-bezier(.22,1,.36,1);
}
.prob .pcard::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--danger),color-mix(in srgb,var(--danger) 40%,var(--a1)));
  opacity:.5; transition:opacity .3s;
}
.prob .pcard:hover { border-color:rgba(248,113,113,.22); transform:translateY(-3px); }
.prob .pcard:hover::before { opacity:.9; }
/* reuse identical .card-head / .ic / h3 / p from section 4 — danger-tinted icon only */
.prob .pcard .card-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.prob .pcard .ic {
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex-shrink:0;
  background:color-mix(in srgb,var(--danger) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
}
.prob .pcard .ic svg { width:15px; height:15px; stroke:var(--danger); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.prob .pcard h3 { font-size:1rem; font-weight:600; letter-spacing:-.01em; margin:0; }
.prob .pcard p { color:var(--dim); font-size:.875rem; line-height:1.6; }

/* ---------------- features scaffold (s6 uses .sol-pillars; the old bento .card
   family was removed with the section in v5 — dead rules deleted in the v7
   style pass) ---------------- */
.features-sec { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,9vh,100px) 0; }

/* ---------------- check demo ---------------- */
.check-sec { min-height:100svh; display:flex; align-items:center; padding:clamp(40px,6vh,70px) 0; }
.check-sec > .wrap { width:100%; }
/* console TALL on the LEFT · intro copy off to the RIGHT — the full scan log fits
   with no scrollbar, and the sonar show plays in the open space around it */
.check-layout { display:grid; grid-template-columns:minmax(440px,640px) 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.check-intro { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:12px; max-width:560px; order:2; justify-self:center; }
.check-intro h2 { font-size:clamp(2rem,4.6vw,3.2rem); margin:0; }
.check-intro p { color:var(--dim); font-size:clamp(.95rem,1.3vw,1.06rem); line-height:1.6; max-width:48ch; }
/* TRY chips — live inside the scanner under the search field; each is tinted to
   the verdict it demos (green · verified / yellow · caution / red · blacklisted) */
.check-chips { display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap; padding:0 16px 13px; }
.cc-lbl { font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.12em; text-transform:uppercase; }
.chip-btn { display:inline-flex; align-items:center; gap:7px; }
.chip-btn::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 9px currentColor; flex:none; }
.chip-btn.cb-ok   { color:var(--success); border-color:color-mix(in srgb,var(--success) 42%,transparent); background:color-mix(in srgb,var(--success) 8%,transparent); }
.chip-btn.cb-warn { color:#fbbf24;        border-color:color-mix(in srgb,#fbbf24 42%,transparent);        background:color-mix(in srgb,#fbbf24 8%,transparent); }
.chip-btn.cb-bad  { color:var(--danger);  border-color:color-mix(in srgb,var(--danger) 42%,transparent);  background:color-mix(in srgb,var(--danger) 8%,transparent); }
.chip-btn.cb-ok:hover   { border-color:var(--success); color:var(--success); }
.chip-btn.cb-warn:hover { border-color:#fbbf24; color:#fbbf24; }
.chip-btn.cb-bad:hover  { border-color:var(--danger); color:var(--danger); }
.demo-shell {
  position:relative; width:100%; max-width:640px; margin:0; order:1;
  background:rgba(255,255,255,.034); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 70px -30px color-mix(in srgb,var(--a1) 22%,transparent);
}
.demo-shell::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3)); opacity:.7; }
.demo-bar { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); background:rgba(7,7,16,.3); }
.demo-bar .dots { display:flex; gap:6px; } .demo-bar .dots i { width:10px; height:10px; border-radius:50%; background:var(--border2); }
.demo-bar .title { font-family:var(--mono); font-size:.76rem; color:var(--faint); }
.demo-bar .live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--a3); }
.demo-bar .live .dot { width:6px; height:6px; border-radius:50%; background:var(--a3); box-shadow:0 0 8px var(--a3); animation:blink 1.4s infinite; }
.demo-input { display:flex; gap:10px; padding:13px 16px 10px; }
.demo-field { flex:1; min-width:0; display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; padding:0 14px; }
.demo-field:focus-within { border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb,var(--a1) 22%,transparent); }
.demo-field span { color:var(--faint); font-family:var(--mono); font-size:.9rem; }
.demo-field input { flex:1; background:none; border:none; outline:none; color:var(--text); font-family:var(--mono); font-size:.9rem; padding:10px 0; }
.chip-btn { font-family:var(--mono); font-size:.82rem; color:var(--dim); background:var(--bg2); border:1px solid var(--border2); border-radius:999px; padding:6px 13px; cursor:pointer; transition:border-color .2s, color .2s; }
.chip-btn:hover { border-color:var(--a1); color:var(--text); }
.demo-body { display:grid; grid-template-columns:1.05fr .95fr; gap:14px 18px; padding:0 16px 16px; }
.demo-body > .d-log { grid-column:1 / -1; }
/* reserve the results' space BEFORE they populate — the console's height never changes,
   so snap anchors computed at load stay correct on the very first visit */
[data-d-factors] { min-height:200px; }
[data-d-plats] { min-height:26px; }
[data-d-speed] { min-height:20px; display:block; }
.demo-left { display:flex; flex-direction:column; gap:9px; }

.d-dial { position:relative; width:150px; height:150px; margin:0 auto; }
.d-dial svg { width:100%; height:100%; transform:rotate(0deg); }
.d-dial .track { fill:none; stroke:var(--border2); stroke-width:8; stroke-linecap:round; }
.d-dial .arc { fill:none; stroke:var(--a1); stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 0 8px var(--acc-glow)); }
.v-good .d-dial .arc { stroke:var(--success); } .v-warn .d-dial .arc { stroke:var(--warning); } .v-bad .d-dial .arc { stroke:var(--danger); }
.d-dialmeta { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.d-num { font-family:var(--mono); font-size:2rem; font-weight:600; color:var(--head); line-height:1; }
.d-num small { font-size:.78rem; color:var(--faint); }
.d-verdict { font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; color:var(--faint); }
.v-good .d-verdict { color:var(--success); } .v-warn .d-verdict { color:var(--warning); } .v-bad .d-verdict { color:var(--danger); }
.d-meta { display:flex; align-items:center; gap:6px; justify-content:center; font-size:.78rem; color:var(--dim); flex-wrap:wrap; }
.d-meta .mono { color:var(--text); }

.d-log { font-family:var(--mono); font-size:.74rem; color:var(--dim); background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; min-height:148px; overflow-y:auto; }
.d-logline { display:flex; gap:8px; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; padding:2px 0; }
.d-logline.show { opacity:1; transform:none; }
.d-logline.warn { color:var(--danger); }
.d-caret { color:var(--a3); }
.demo-right { display:flex; align-items:center; }
.d-factors { width:100%; display:flex; flex-direction:column; gap:9px; }
.d-factor { opacity:0; transform:translateX(10px); transition:opacity .35s, transform .35s; }
.d-factor.show { opacity:1; transform:none; }
.d-frow { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.d-flabel { font-size:.8rem; color:var(--text); }
.d-fval { font-size:.78rem; color:var(--head); }
.d-fmax { color:var(--faint); margin-left:4px; font-size:.7rem; }
.d-bar { height:5px; border-radius:3px; background:var(--bg2); overflow:hidden; }
.d-bar i { display:block; height:100%; width:0; border-radius:3px; background:var(--grad); transition:width .9s cubic-bezier(.22,1,.36,1); }
.d-bar i.bad { background:linear-gradient(90deg,var(--danger),#fb7185); }
.d-speed { font-family:var(--mono); font-size:.74rem; color:var(--a3); opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.d-speed.show { opacity:1; transform:none; } .d-speed b { color:var(--text); }
.d-plats { display:flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:center; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s; }
.d-plats.show { opacity:1; transform:none; }
.d-plats-lbl { font-family:var(--mono); font-size:.7rem; color:var(--faint); letter-spacing:.1em; text-transform:uppercase; margin-right:4px; }
/* linked accounts — bare white glyphs (flagged lookups tint danger-red) */
.d-plat-ic { width:16px; height:16px; flex:none; color:#fff; opacity:.88; }
.d-plat-ic.bad { color:var(--danger); opacity:.95; }
.d-factor.show .d-bar i { width:var(--w); }

/* ---------------- linked-identity graph ---------------- */
.constel { position:relative; min-height:112vh; }
.constel-pin { position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; perspective:1200px; }
/* the wrap is a flex item here — force it full-width so the copy sits at the standard
   wrap LEFT edge (matching s3), instead of shrink-to-fit centering itself mid-screen */
.constel-pin .wrap { width:100%; }
.constel-svg { position:absolute; inset:0; width:100%; height:100%; opacity:.92; will-change:transform; }
.constel-copy { position:relative; z-index:3; max-width:480px; }
/* type scale — standard section h2 tier (matches .sec-head h2) */
.constel-copy h2 { font-size:clamp(2rem,4.6vw,3.2rem); margin:14px 0 14px; }
.constel-copy .lead { color:var(--dim); font-size:1.06rem; }
.constel-stats { margin-top:26px; display:flex; flex-direction:column; gap:12px; max-width:420px; font-family:var(--mono); font-size:.82rem; color:var(--dim); }
.constel-stats > div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:8px; }
.constel-stats b { color:#fda4af; }
/* s4 — a slower, more deliberate build: type → fill → lead → stats */
.constel .rv-2.in { animation-delay:.7s; animation-duration:.95s; }
.constel .rv-3.in { animation-delay:1.1s; animation-duration:.95s; }

/* ---------------- faq ---------------- */
.faq { max-width:780px; margin:0 auto; }
.faq details {
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:0 22px; margin-bottom:10px;
  background:rgba(255,255,255,.034); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.faq summary { cursor:pointer; padding:20px 0; font-family:var(--display); font-weight:600; font-size:1.06rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--a1); font-size:1.4rem; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--dim); padding:0 0 20px; }

/* ---------------- final cta ---------------- */
.final { position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
/* footer merged into the final scene (s10) — brand left · links right · legal bar below */
/* the closing copy is pinned to the SAME anchor the finale camera parks the core at
   (50%, 46% of the viewport — see network.js s10 frame): the scanner rings, the core
   and the text read as ONE instrument, exactly like the hero. (translate is used for
   the centering so the .rv reveal transform still composes with it.) */
.final-inner { position:absolute; left:0; right:0; top:46svh; translate:0 -50%; z-index:2; margin:0 auto; max-width:680px; padding:0 24px; }
.final-foot { margin-top:auto; }
/* short / narrow viewports: footer collisions are possible at 46svh — fall back to
   flow centering (the radar still tracks the core, which sits near centre anyway) */
@media (max-height:740px), (max-width:720px) {
  .final-inner { position:relative; top:auto; translate:none; margin:auto; }
}
.final-foot { position:relative; z-index:2; width:100%; text-align:left; color:var(--faint); font-size:.9rem; padding-bottom:20px; }
.ff-grid { display:flex; justify-content:space-between; align-items:flex-start; gap:clamp(24px,4vw,60px); flex-wrap:wrap; margin-bottom:8px; }
.ff-brand { max-width:300px; }
.ff-brand p { font-size:.88rem; color:var(--dim); margin-top:10px; }
.ff-links { display:flex; gap:clamp(28px,5vw,72px); }
.final-foot .foot-bottom { margin-top:18px; padding-top:18px; }
@media (max-width:720px){ .ff-grid { flex-direction:column; } }
/* radar sits BENEATH the dimming veil (same layering as the hero, where the
   scanner draws on the world canvas under the vignette): the veil's radial
   falloff softens the ring edges so the scanner glows through the darkness
   instead of sitting crisply on top of it. */
.final-radar { position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none; }
/* sized to MATCH the hero scanner: hero rings span ≈1.09×vmin of the viewport
   (SCALE·1.05·2); the radar draws its outer ring at 0.92× its canvas, so the
   canvas needs ≈119vmin for the two scanners to read as the same instrument. */
.final-radar canvas { width:119vmin; height:119vmin; opacity:.5; }
/* hero-style vignette so the 3-D node graph FILLS the section like every other
   scene (visible through the centre, fading to bg at the edges) — just enough
   centre tint to keep the closing copy legible. */
.final-veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(66% 60% at 50% 46%, rgba(7,7,16,.44) 12%, rgba(7,7,16,.66) 56%, var(--bg) 84%);
  /* fade the darker backdrop IN over the first ~260px so the hand-off from the scene
     above is a soft dissolve instead of a hard horizontal break */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 260px);
  mask-image:linear-gradient(to bottom, transparent, #000 260px); }
.final-inner h2 { font-size:clamp(2.4rem,6vw,4rem); margin-bottom:18px; }
.final-inner .lead { color:var(--dim); max-width:520px; margin:0 auto 30px; font-size:1.1rem; }
.loop-hint { margin-top:28px; font-family:var(--mono); font-size:.78rem; color:var(--faint); }
.replay { background:none; border:none; color:var(--a3); cursor:pointer; font-family:var(--mono); font-size:.78rem; }
.replay:hover { color:var(--text); }

/* ---------------- footer (merged into s10) ---------------- */
.foot-col h5 { color:var(--text); font-family:var(--display); font-size:.92rem; margin-bottom:14px; }
.foot-col a { display:block; color:var(--dim); margin-bottom:9px; transition:color .2s; }
.foot-col a:hover { color:var(--text); }
.foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }

/* ---------------- responsive · ≤9 20px = stacked, native-scroll world ---------------- */
@media (max-width:920px) {
  .nav-signin { display:none; }
  .nav-burger { display:block; width:44px; height:44px; }
  /* burger opens a real dropdown sheet (was display:none with no .open rule — dead button) */
  .nav-links { display:none; position:fixed; top:70px; left:0; right:0; z-index:54; flex-direction:column; align-items:stretch; gap:0;
    padding:6px 22px 14px; background:rgba(7,7,16,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:15px 2px; font-size:1.04rem; border-bottom:1px solid var(--border); }
  .nav-links a:last-child { border-bottom:0; }
  /* floating stat shards collide with the headline on narrow screens — swap for the proof strip */
  .shards { display:none; }
  .hero-proof { display:flex; }
  .prob { grid-template-columns:1fr; }
  .problem-top { grid-template-columns:1fr; }
  .problem-canvas-col { display:none; }
  .section-pad.problem { height:auto; min-height:100svh; overflow:visible; }
  .hsec { height:auto; }
  .hpin { position:relative; height:auto; overflow:visible; padding:70px 0 36px; }
  .htrack { flex-direction:column; transform:none!important; padding:0 24px; gap:26px; }
  .hpanel { width:100%; opacity:1; }
  .hp-step { flex-direction:row; }
  .hnext-wrap { display:none; }
  .demo-body { grid-template-columns:1fr; }
  .check-layout { grid-template-columns:1fr; }
  .check-intro { order:1; margin-top:0; }
  .demo-shell { order:2; max-width:100%; }
  .constel { min-height:auto; }
  .constel-pin { position:relative; height:auto; padding:90px 0; }
  .hud { display:none; }
  .reveal-head, .fill-h, .fill-h .gt { --reveal:100%!important; }
}
@media (max-width:600px) {
  input,select,textarea { font-size:16px!important; }
  .hero h1 { font-size:clamp(2rem,9.6vw,5.4rem); }
  .hero-search { padding-left:14px; gap:8px; }
  .hero-search .btn { padding:14px 18px; }
}

/* ================================================================
   v5 — back-half scenes (s5 solution · s7 two-ways-in) + footer trim
   ================================================================ */

/* ===== s5 · the solution — copy left, living world parked right ===== */
.sol-sec { min-height:100svh; display:flex; align-items:center; }
/* content sits LOW in the frame — the upper half belongs to the chase-cam node graph */
.sol-wrap { display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(28px,5vw,64px); align-items:center; width:100%; margin-top:clamp(60px,14vh,170px); }
.sol-copy { max-width:560px; }
.sol-copy h2 { font-size:clamp(2.1rem,4.6vw,3.4rem); margin:14px 0 18px; }
.sol-lead { color:var(--dim); font-size:clamp(1rem,1.4vw,1.12rem); max-width:50ch; margin-bottom:clamp(22px,3.2vh,34px); }
.sol-pillars { display:flex; flex-direction:column; gap:16px; }
.sol-pillar { display:flex; gap:15px; align-items:flex-start; }
.sp-ic { width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--a3) 13%,transparent); border:1px solid color-mix(in srgb,var(--a3) 30%,transparent); }
.sp-ic svg { width:19px; height:19px; stroke:var(--a3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sp-txt h3 { font-size:1.04rem; font-weight:600; letter-spacing:-.01em; margin-bottom:3px; }
.sp-txt p { color:var(--dim); font-size:.91rem; line-height:1.55; }
/* s6 entrance — type → header fill → lead → id-card pops out of the world
   reticle → pillars slide in from the left, one at a time */
.sol-sec .rv-2.in { animation-delay:.55s; }
@keyframes pillarIn { from{opacity:0;transform:translateX(-36px)} to{opacity:1;transform:none} }
.sol-sec .sol-pillar.in { animation-name:pillarIn; animation-duration:.6s; }
.sol-sec .sol-pillar:nth-child(1).in { animation-delay:1.5s; }
.sol-sec .sol-pillar:nth-child(2).in { animation-delay:1.7s; }
.sol-sec .sol-pillar:nth-child(3).in { animation-delay:1.9s; }
@keyframes idcPop { 0%{opacity:0;transform:translateX(-44px) scale(.55)} 60%{opacity:1} 100%{opacity:1;transform:none} }
.sol-stage .idcard.in { transform-origin:0% 38%; animation-name:idcPop; animation-duration:.85s; animation-delay:.95s; }
.sol-stage { position:relative; min-height:min(440px,54vh); display:flex; align-items:center; justify-content:center; }

/* ===== s5 · verified-identity card (replaces the wandering-dot stage) ===== */
/* pinned-HUD readability — the live panel sits at the top of the stack, solid
   enough to read while the world flows behind it */
.idcard { position:relative; z-index:4; width:min(420px,100%); display:flex; flex-direction:column; gap:14px;
  background:rgba(13,16,28,.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid color-mix(in srgb,var(--a3) 26%,transparent); border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 30px 80px -34px color-mix(in srgb,var(--a3) 40%,transparent); }
.idcard::before { content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.idc-head { display:flex; align-items:center; gap:12px; }
.idc-av { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:1.1rem;
  color:#04121a; background:linear-gradient(135deg,#67e8f9,var(--a3)); box-shadow:0 0 20px color-mix(in srgb,var(--a3) 50%,transparent); }
.idc-id { display:flex; flex-direction:column; line-height:1.25; }
.idc-id b { font-size:1rem; letter-spacing:-.01em; }
.idc-id span { font-size:.76rem; color:var(--faint); }
.idc-badge { margin-left:auto; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--a3);
  background:color-mix(in srgb,var(--a3) 14%,transparent); border:1px solid color-mix(in srgb,var(--a3) 34%,transparent);
  border-radius:999px; padding:4px 9px; white-space:nowrap; }
.idc-sub { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.idc-plats { display:flex; align-items:center; gap:14px; }
/* linked accounts — bare white glyphs, no pills: just the public connections.
   Icons are mask-rendered from the official SVG files (assets/icons/), painted
   with currentColor so status tints (e.g. flagged red) come free. */
.pic { display:inline-block; background-color:currentColor;
  -webkit-mask:var(--ic) no-repeat center / contain; mask:var(--ic) no-repeat center / contain; }
.ic-rb   { --ic:url("/assets/icons/roblox.svg"); }
.ic-fn   { --ic:url("/assets/icons/fortnite.svg"); }
.ic-mc   { --ic:url("/assets/icons/minecraft.svg"); }
.ic-x    { --ic:url("/assets/icons/x.svg"); }
.ic-bsky { --ic:url("/assets/icons/bluesky.svg"); }
.ic-sp   { --ic:url("/assets/icons/spotify.svg"); }
.ic-ds   { --ic:url("/assets/icons/discord.svg"); }
.ic-yt   { --ic:url("/assets/icons/youtube.svg"); }
.ic-tw   { --ic:url("/assets/icons/twitch.svg"); }
.ic-gh   { --ic:url("/assets/icons/github.svg"); }
.ic-ig   { --ic:url("/assets/icons/instagram.svg"); }
.ic-ps   { --ic:url("/assets/icons/playstation.svg"); }
.ic-rd   { --ic:url("/assets/icons/reddit.svg"); }
.ic-tt   { --ic:url("/assets/icons/tiktok.svg"); }
.ic-xb   { --ic:url("/assets/icons/xbox.svg"); }
.ic-pp   { --ic:url("/assets/icons/paypal.svg"); }
.ic-rt   { --ic:url("/assets/icons/riot.svg"); }
.ic-web  { --ic:url("/assets/icons/website.svg"); }
.ic-fb   { --ic:url("/assets/icons/facebook.svg"); }
.ic-lol  { --ic:url("/assets/icons/league.svg"); }
.acct-ic { width:18px; height:18px; flex:none; color:#fff; opacity:.85; transition:opacity .2s; }
.acct-ic:hover { opacity:1; }
.srv-ic { width:15px; height:15px; flex:none; color:#fff; opacity:.8; }
.idc-rec { display:flex; flex-direction:column; gap:7px; margin-top:2px; }
.idc-reclbl { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:1px; }
.idc-row { display:flex; align-items:center; gap:9px; font-size:.86rem;
  padding:7px 11px; border-radius:9px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.idc-row span { color:var(--text); flex:1; }
.idc-row b.ok { color:var(--a3); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; }
/* tracker re-acquire — the head swaps to the new creator's identity */
.idc-head.resync, .idc-plats.resync { animation:idcResync .55s cubic-bezier(.22,1,.36,1); }
@keyframes idcResync { 0% { opacity:.15; transform:translateY(-7px); } 100% { opacity:1; transform:none; } }
/* staged reveal — the "recognized" feed is NEWEST-FIRST: each arrival slides in
   at the TOP (from the front — slightly raised + scaled, like it's dropping out
   of the tether) while the older entries get pushed down a slot */
.idc-rec .idc-row { opacity:0; }
.idc-rec .idc-row.on { opacity:1; transform:none; animation:idcRowIn .55s cubic-bezier(.22,1,.36,1); }
.idc-rec .idc-row.on.push { animation:idcRowPush .45s cubic-bezier(.22,1,.36,1); }
@keyframes idcRowIn { 0% { opacity:0; transform:translateY(-14px) scale(1.06); } 100% { opacity:1; transform:none; } }
@keyframes idcRowPush { 0% { transform:translateY(-38px); } 100% { transform:none; } }
@media (prefers-reduced-motion:reduce){ .idc-rec .idc-row{ opacity:1; transform:none; } }

/* ===== s7 · two ways in — the dual CTA ===== */
.join-sec { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,9vh,100px) 0; }
.join-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); max-width:940px; margin:0 auto; width:100%; }
.join-card { position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:rgba(255,255,255,.04); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:clamp(24px,3vw,36px);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s; }
.join-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3)); opacity:.6; }
.join-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.16);
  box-shadow:0 24px 70px -24px color-mix(in srgb,var(--a1) 32%,transparent); }
.jc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.jc-tag { font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.jc-dot { width:10px; height:10px; border-radius:50%; }
.jc-dot.s { background:var(--a1); box-shadow:0 0 12px var(--a1); }
.join-card h3 { font-size:clamp(1.5rem,2.7vw,2.05rem); margin-bottom:10px; }
.join-card > p { color:var(--dim); font-size:.96rem; line-height:1.6; margin-bottom:18px; }
.jc-list { list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.jc-list li { position:relative; padding-left:28px; color:var(--text); font-size:.9rem; line-height:1.45; }
.jc-list li::before { content:""; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%;
  background:color-mix(in srgb,var(--a3) 16%,transparent); border:1px solid color-mix(in srgb,var(--a3) 36%,transparent); }
.jc-list li::after { content:""; position:absolute; left:5.5px; top:4.5px; width:4px; height:8px;
  border:solid var(--a3); border-width:0 2px 2px 0; transform:rotate(40deg); }
.jc-cta { margin-top:auto; align-self:flex-start; }
/* s8 entrance — maximalist, deliberate: type + fill first, then each card
   makes an ENTRANCE — a long rise from deep below with a slow-blooming accent
   flare — Create takes the stage, holds it, then Add answers. Contents follow
   inside each card as their own measured cascade; the subheader closes the
   scene. Nothing rushes; every element presents itself. */
@keyframes joinIn {
  0%   { opacity:0; transform:translateY(72px) scale(.9); }
  45%  { opacity:1; }
  70%  { box-shadow:0 42px 130px -24px color-mix(in srgb,var(--a3) 55%,transparent); }
  100% { opacity:1; transform:none; box-shadow:0 0 0 transparent; }
}
.join-grid .deck-item.in { animation-name:joinIn; animation-duration:1.2s;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
  animation-delay:calc(.7s + var(--i) * .65s); }
.join-card .jc-top, .join-card h3, .join-card > p, .join-card .jc-list, .join-card .jc-cta { opacity:0; }
.join-card.in .jc-top, .join-card.in h3, .join-card.in > p, .join-card.in .jc-list, .join-card.in .jc-cta {
  animation:riseIn .75s cubic-bezier(.16,1,.3,1) forwards; }
.join-card.in .jc-top  { animation-delay:calc(1.45s + var(--i) * .65s); }
.join-card.in h3       { animation-delay:calc(1.63s + var(--i) * .65s); }
.join-card.in > p      { animation-delay:calc(1.81s + var(--i) * .65s); }
.join-card.in .jc-list { animation-delay:calc(1.99s + var(--i) * .65s); }
.join-card.in .jc-cta  { animation-delay:calc(2.17s + var(--i) * .65s); }
.join-card.shown .jc-top, .join-card.shown h3, .join-card.shown > p, .join-card.shown .jc-list, .join-card.shown .jc-cta {
  opacity:1!important; animation:none!important; }
.join-sec .sec-head p.in { animation-delay:3.3s; animation-duration:1s; }

/* v6 — conversion hierarchy: the account card is the primary path */
.join-card.jc-primary { border-color:color-mix(in srgb,var(--a3) 34%,transparent);
  box-shadow:0 24px 70px -30px color-mix(in srgb,var(--a3) 40%,transparent); }
.join-card.jc-primary::before { opacity:1; height:3px; }
.jc-badge { font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--a3); background:color-mix(in srgb,var(--a3) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--a3) 30%,transparent); border-radius:999px; padding:3px 10px; }

/* ===== footer trim ===== */

@media (max-width:920px) {
  .sol-wrap { grid-template-columns:1fr; margin-top:clamp(40px,8vh,90px); }
  /* the verified id-card is the belonging payoff — stack it under the pillars instead of hiding it */
  .sol-stage { min-height:0; margin-top:10px; justify-content:flex-start; }
  .join-grid { grid-template-columns:1fr; max-width:520px; }
}

/* ===== s8 · FAQ — calm centred-graph breathe ===== */
.faq-sec { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.faq-veil { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(64% 56% at 50% 50%, color-mix(in srgb,var(--bg) 78%,transparent) 30%, transparent 80%); }
.faq-wrap { position:relative; z-index:1; width:100%; }
.faq-sec .sec-head { margin-bottom:clamp(22px,3.4vh,40px); }

/* ===== s9 · FAQ — a reachable last anchor ===== */

/* ===== s4.5 · the storm clears — held calm exhale ===== */
.calm-sec { position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.calm-veil { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 52% at 50% 50%, color-mix(in srgb,var(--bg) 72%,transparent) 28%, transparent 78%); }
.calm-inner { position:relative; z-index:1; max-width:680px; padding:0 24px; }
.calm-inner h2 { font-size:clamp(2.4rem,5.4vw,3.8rem); margin:14px 0 16px; letter-spacing:-.02em; }
.calm-lead { color:var(--dim); font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:42ch; margin:0 auto; }
/* s5 — the header materialises from the calm world first; the line under it
   exhales in well after */
.calm-sec .rv-2.in { animation-delay:1.15s; animation-duration:1.1s; }

/* ===== s4.5 · the storm clears — held calm exhale (end) ===== */

/* ================================================================
   v7 — responsive staging layer (touch · tablet · widescreen · perf)
   ================================================================ */

/* touch ergonomics — every tappable control ≥ 44px effective target */
@media (pointer:coarse) {
  .chip-btn { padding:11px 16px; font-size:.88rem; }
  .faq summary { padding:22px 0; }
  .nav-cta .btn { padding:12px 18px; }
  .scene-skip { padding:12px 10px; }
}

/* widescreen ≥ 1680px — let the canvas breathe, don't stretch the measure */
@media (min-width:1680px) {
  :root { --maxw:1320px; }
  .hero-inner { max-width:920px; }
  .hero h1 { font-size:clamp(2.7rem,6.5vw,6rem); }
  .sol-copy { max-width:620px; }
}

/* short viewports (split-screen laptops, small landscape windows): the centred
   hero copy grows into shard territory regardless of width — same swap as the
   narrow-width rule: shards out, proof strip in. */
@media (max-height:620px) {
  .shards { display:none; }
  .hero-proof { display:flex; }
}

/* small-screen perf — backdrop blurs are the single most expensive paint on
   mobile GPUs; swap glass for solid panels, soften the bg orbs, drop the grain */
@media (max-width:720px) {
  .pcard, .hp-card, .join-card, .idcard, .demo-shell, .faq details, .hero-search {
    backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  .prob .pcard, .hp-card, .join-card, .faq details { background:rgba(15,16,28,.82); }
  .idcard { background:rgba(13,16,28,.9); }
  .demo-shell { background:rgba(15,16,28,.88); }
  .bg .orb { filter:blur(70px); }
  .fx-grain { display:none; }
}


/* ---------------- production integration ---------------- */
/* <main> wraps the scenes for landmark semantics (skip link / a11y) without
   touching the shipped layout — display:contents keeps every child exactly
   where the design put it. */
main { display:contents; }
/* skip-to-content (WCAG 2.4.1) — mirrors the sitewide .skip-link in tokens.css;
   duplicated here because the v7 homepage is intentionally self-contained. */
.skip-link { position:fixed; top:8px; left:8px; z-index:1000; transform:translateY(-150%);
  background:var(--surface); color:var(--text); border:1px solid var(--a1);
  border-radius:9px; padding:10px 16px; font-family:var(--sans);
  font-weight:600; font-size:.9rem; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:transform .15s ease; }
.skip-link:focus, .skip-link:focus-visible { transform:translateY(0); outline:2px solid var(--a1); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .skip-link { transition:none; } }