/* BlinkChart landing page — standalone noir stylesheet.
   The masthead, brand mark, capsule navigation and silver actions repeat the
   workspace's measured values so the two pages read as one product. */

@font-face { font-family:Inter; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2'); }

:root {
  --bg:#0a0b0d;
  --ink:#f3f4f6;
  --sub:#c3c6cd;
  --muted:#8d929b;
  --line:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.024);
  --card-rim:inset 0 0 0 1px rgba(255,255,255,.055),inset 0 1px 0 rgba(255,255,255,.04);
  --accent:#9dbdff;
  --green:#3ecf8e;
  --red:#f3545c;
  --silver:linear-gradient(180deg,#f6f7f9,#c9ccd2);
  --silver-rim:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.15),0 8px 22px -10px rgba(255,255,255,.35);
  --selected:radial-gradient(110% 100% at 50% 0,#45464c 0,#202125 62%);
  --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.22,1.1,.32,1);
  --noir-spring:linear(0,.076,.2463,.4458,.6338,.7894,.9054,.9833,1.029,1.0505,1.0555,1.0506,1.0409,1.0298,1.0195,1.011,1.0048,1.0006,.9982,.9971,.9972,.9984,1);
  --head-h:88px;
  --pill-min:740px;
  --pill-max:1140px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; font-optical-sizing:auto;
  overflow-x:hidden;
}
:is(h1,h2,h3,h4) { margin:0; font-weight:600; letter-spacing:-.02em; font-synthesis:none; line-height:1.1; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
canvas { display:block; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

.wrap { width:100%; max-width:1140px; margin-inline:auto; padding-inline:24px; }
.skip { position:fixed; top:-60px; left:16px; z-index:90; padding:10px 14px; border-radius:10px; background:#17181c; transition:top .2s; }
.skip:focus { top:12px; }

/* ── Masthead: the workspace capsule, floating and centred ─────────── */
.topbar {
  position:fixed; inset:0 0 auto; z-index:40;
  display:flex; justify-content:center; padding:14px 20px;
  pointer-events:none;
}
.topbar-bar {
  pointer-events:auto;
  /* --grow runs 0 → 1 over the first screenful, widening the capsule. */
  width:min(100%,calc(var(--pill-min) + (var(--pill-max) - var(--pill-min)) * var(--grow,0)));
  height:60px; padding:0 8px 0 20px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
  border:1px solid #ffffff1f; border-radius:999px;
  background:#16171bcc; backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 #ffffff0d,0 12px 40px #00000073;
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
.topbar.is-wide .topbar-bar { background:#121318e0; box-shadow:inset 0 1px 0 #ffffff14,0 18px 50px #00000080; }
.wordmark { display:flex; gap:8px; align-items:center; font-size:21px; font-weight:700; letter-spacing:-1.1px; white-space:nowrap; }
.wordmark .icon { width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; color:#e5e7eb; }
.wordmark.small { font-size:19px; letter-spacing:-1px; }
.wordmark.small .icon { width:20px; height:20px; }
.topbar-nav { position:relative; display:flex; align-items:center; gap:2px; isolation:isolate; }
.topbar-nav>a { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:34px; padding:0 15px; border-radius:999px; color:#9a9ca3; font-size:13.5px; font-weight:500; letter-spacing:-.0675px; white-space:nowrap; transition:color .25s; }
.topbar-nav>a:hover,.topbar-nav>a.active { color:#fff; }
.nav-slider { position:absolute; top:0; left:0; width:0; height:0; background:var(--selected); border-radius:999px; box-shadow:inset 0 1px 0 #ffffff24,0 6px 16px #0008; pointer-events:none; opacity:0; transition:transform .52s var(--noir-spring),width .52s var(--noir-spring),height .52s var(--noir-spring),opacity .3s; }
.nav-slider.on { opacity:1; }
.topbar-cta { justify-self:end; min-height:44px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:999px;
  font-size:14px; font-weight:600; white-space:nowrap;
  transition:transform .26s var(--spring), filter .26s var(--ease);
}
.btn svg { width:15px; height:15px; }
.btn-primary { background:var(--silver); box-shadow:var(--silver-rim); color:#0b0c0e; }
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0) scale(.98); }
.btn-quiet { background:radial-gradient(120% 140% at 50% -40%,rgba(255,255,255,.1),transparent 60%),#18191d; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06); color:var(--sub); }
.btn-quiet:hover { color:#fff; transform:translateY(-1px); }
.btn-lg { min-height:52px; padding:0 28px; font-size:15px; }
.btn-primary.shine { position:relative; overflow:hidden; }
.btn-primary.shine::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
  transform:translateX(-120%); animation:shine 5.5s var(--ease) infinite;
}
@keyframes shine { 0%,72%{transform:translateX(-120%)} 100%{transform:translateX(120%)} }

/* ── Section rhythm ─────────────────────────────────────────────────── */
section { position:relative; scroll-margin-top:112px; }
.band { padding:clamp(72px,9vw,124px) 0; border-top:1px solid var(--line); }
.eyebrow { display:block; margin-bottom:14px; font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
.h2 { font-size:clamp(28px,3.8vw,44px); }
.band-head { max-width:620px; margin-bottom:clamp(32px,4vw,52px); }
.center { text-align:center; margin-inline:auto; }

[data-reveal] { opacity:0; transform:translateY(24px); filter:blur(8px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay:calc(var(--d,0) * 80ms); }
[data-reveal].in { opacity:1; transform:none; filter:none; }
.word { display:inline-block; opacity:0; transform:translateY(.5em); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--w,0) * 55ms); }
.word.in { opacity:1; transform:none; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { min-height:100svh; display:grid; grid-template-rows:1fr auto; justify-items:center; text-align:center; padding:calc(var(--head-h) + clamp(8px,3vh,40px)) 0 0; overflow:hidden; }
.hero > .wrap { align-self:center; display:grid; justify-items:center; }
.aura { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.aura i { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; animation:drift 22s ease-in-out infinite; }
.aura i:nth-child(1) { width:46vw; height:46vw; left:-8vw; top:-14vw; background:rgba(157,189,255,.14); }
.aura i:nth-child(2) { width:38vw; height:38vw; right:-6vw; top:-6vw; background:rgba(255,255,255,.07); animation-delay:-7s; }
.aura i:nth-child(3) { width:40vw; height:40vw; left:32vw; bottom:-22vw; background:rgba(62,207,142,.07); animation-delay:-13s; }
@keyframes drift { 0%,100%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(4vw,3vh,0) scale(1.08)} 66%{transform:translate3d(-3vw,-2vh,0) scale(.95)} }

.hero h1 {
  max-width:17ch; font-size:clamp(42px,7.4vw,84px); letter-spacing:-.035em; line-height:1.02;
  background:linear-gradient(180deg,#fff 0%,#eceef1 42%,#9aa0a9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub { margin-top:22px; max-width:50ch; color:var(--sub); font-size:clamp(16px,1.6vw,19px); }
.hero-cta { margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-line {
  width:100%; height:clamp(210px,32vh,380px); align-self:end; opacity:1;
  /* Fades at both sides and into the page at the top. */
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 10%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 10%);
  mask-composite:intersect; -webkit-mask-composite:source-in;
}

/* ── Reels ──────────────────────────────────────────────────────────── */
.ways { display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(18px,2.4vw,34px); align-items:stretch; }
.way { display:grid; grid-template-rows:auto 1fr; gap:clamp(16px,1.8vw,22px); }
/* The two titles and the Or between them are one set of section headings. */
.way-title, .or span {
  font-size:clamp(26px,3.2vw,40px); font-weight:600; letter-spacing:-.03em; line-height:1.05;
  background:linear-gradient(180deg,#fff 0%,#eceef1 46%,#a4aab3 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.way-title { text-align:center; }
.or { display:grid; grid-template-rows:1fr auto 1fr; justify-items:center; align-items:center; gap:clamp(14px,2vw,22px); }
.or::before,.or::after { content:''; width:1px; justify-self:center; background:linear-gradient(180deg,#ffffff00,#ffffff1f,#ffffff00); }
.or span { display:block; padding:0 clamp(4px,.6vw,10px); }
.reel { position:relative; display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:24px; background:var(--card); box-shadow:var(--card-rim); }

/* Step strip, using the workspace's segmented control. */
.steps { display:flex; gap:3px; padding:4px; border:1px solid #ffffff1f; border-radius:999px; background:#16171bb8; box-shadow:inset 0 1px 0 #ffffff0d; }
.steps span {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0;
  height:34px; padding:0 8px; border-radius:999px; color:var(--muted);
  font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.steps span i { display:grid; place-items:center; width:17px; height:17px; flex:none; border-radius:50%; background:rgba(255,255,255,.08); font-style:normal; font-size:10px; font-weight:600; transition:background .4s, color .4s; }
.steps span.on { color:#fff; background:var(--selected); box-shadow:inset 0 1px 0 #ffffff24,0 6px 16px #0008; }
.steps span.on i { background:var(--silver); color:#0b0c0e; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(62,207,142,.4)} 70%{box-shadow:0 0 0 8px rgba(62,207,142,0)} 100%{box-shadow:0 0 0 0 rgba(62,207,142,0)} }

.stage { position:relative; height:clamp(320px,36vw,380px); border-radius:18px; overflow:hidden; background:#0d0e11; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.stage .chart { position:absolute; inset:0; }
.stage > canvas.fx { position:absolute; inset:0; width:100%; height:100%; }

/* Capture: pointer, selection rectangle, flash, single scan pass. */
.cursor { position:absolute; left:0; top:0; z-index:6; width:19px; height:19px; opacity:0; transition:opacity .3s; will-change:transform; }
.cursor svg { width:100%; height:100%; fill:#fff; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.cursor.on { opacity:1; }
.cursor.press svg { transform:scale(.86); }
.flash { position:absolute; inset:0; z-index:7; background:#fff; opacity:0; pointer-events:none; }
.flash.go { animation:flash .5s var(--ease); }
@keyframes flash { 0%{opacity:0} 12%{opacity:.8} 100%{opacity:0} }
.beam { position:absolute; left:0; right:0; top:0; height:150px; z-index:4; opacity:0; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(157,189,255,.16) 62%,rgba(157,189,255,.9) 99%,transparent); }
.stage[data-phase="scan"] .beam { opacity:1; animation:beam 1.7s cubic-bezier(.45,0,.55,1) 1 forwards; }
@keyframes beam { 0%{transform:translateY(-150px)} 100%{transform:translateY(420px)} }

/* Live reel: the workspace chart, its legend, and the celebration. */
.stage.live { background:#0d0e11; }
.stage .fx { z-index:4; pointer-events:none; }
.stage .fx.sel { z-index:5; }
.ohlc { position:absolute; left:14px; right:72px; top:11px; z-index:3; display:flex; align-items:center; gap:10px; color:#717a87; font-size:10px; white-space:nowrap; overflow:hidden; pointer-events:none; }
.ohlc > strong { margin-right:4px; color:#b9c0cb; font-size:10px; font-weight:500; }
.ohlc > strong > span { color:#78818f; font-weight:400; }
.ohlc > span { display:flex; gap:5px; }
.ohlc b { font-weight:400; color:#a3acba; font-variant-numeric:tabular-nums; }
.ohlc b.positive { color:var(--green); } .ohlc b.negative { color:var(--red); }
.ohlc em { margin-left:auto; font-style:normal; color:#78818f; }
.hit {
  position:absolute; left:50%; top:46%; z-index:5; display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:-.01em;
  color:#06130d; background:linear-gradient(180deg,#5fe0a6,#2fbb7d);
  box-shadow:0 14px 34px -12px rgba(62,207,142,.8), inset 0 1px 0 #ffffff5c;
  opacity:0; transform:translate(-50%,-50%) scale(.82); pointer-events:none;
  transition:opacity .34s var(--ease), transform .5s var(--spring);
}
.hit em { font-style:normal; font-variant-numeric:tabular-nums; }
/* Step one: a clean panel with a search bar, not a popup over the chart. */
.search {
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; gap:10px;
  padding:14px; background:#0d0e11;
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
}
.search.on { opacity:1; }
.search-field {
  display:flex; align-items:center; gap:9px; height:40px; padding:0 13px; flex:none;
  border:1px solid #ffffff14; border-radius:12px; background:#16171b;
  box-shadow:inset 0 1px 0 #ffffff0a; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search-field.typing { border-color:#9dbdff4d; box-shadow:inset 0 1px 0 #ffffff0a,0 0 0 3px #9dbdff1a; }
.search-icon { width:15px; height:15px; flex:none; color:#6f7682; }
.search-text { font-size:13.5px; font-weight:600; letter-spacing:.01em; color:var(--ink); white-space:nowrap; }
.search-text:empty::before { content:'Search markets'; font-weight:400; letter-spacing:0; color:#6f7682; }
.search-caret { width:1.5px; height:16px; flex:none; background:var(--accent); opacity:0; border-radius:1px; }
.search-field.typing .search-caret { opacity:1; animation:blink 1s steps(1,end) infinite; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.search-list { display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.search-list i {
  display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px;
  font-style:normal; font-size:13px;
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.search-list b { font-weight:600; letter-spacing:-.01em; }
.search-list span { margin-left:auto; color:var(--muted); font-weight:400; }
.search-list i.pick { background:var(--selected); box-shadow:inset 0 1px 0 #ffffff1f; }
.hit.on { opacity:1; transform:translate(-50%,-50%) scale(1); }
.stage.cheer::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(62,207,142,.55), inset 0 0 60px -18px rgba(62,207,142,.9);
  animation:flicker 1.5s steps(1,end) 2;
}
@keyframes flicker {
  0%,100% { opacity:1 } 8% { opacity:.25 } 14% { opacity:1 } 22% { opacity:.4 }
  28% { opacity:1 } 46% { opacity:.6 } 52% { opacity:1 } 74% { opacity:.35 } 80% { opacity:1 }
}

/* ── The system ─────────────────────────────────────────────────────── */
.proof { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.proof figure { margin:0; }
.proof-art { position:relative; display:grid; place-items:center; height:230px; padding:20px; border-radius:20px; overflow:hidden; background:#0d0e11; box-shadow:var(--card-rim); }
.proof figcaption { margin-top:16px; color:var(--muted); font-size:15px; line-height:1.45; }
.proof figcaption strong { color:var(--ink); font-weight:600; }

/* Win rate: a lit chip over a faint market grid. */
.art-chip { background:radial-gradient(120% 120% at 50% 40%,#15171b,#08090b 70%); }
.art-chip::before {
  content:''; position:absolute; inset:-10%;
  background:
    radial-gradient(circle at center,rgba(62,207,142,.5) 1.4px,transparent 1.6px) 0 0/22px 22px,
    radial-gradient(circle at center,rgba(243,84,92,.45) 1.4px,transparent 1.6px) 11px 11px/22px 22px;
  opacity:.5; animation:leds 7s ease-in-out infinite;
}
@keyframes leds { 0%,100%{opacity:.34; transform:translateY(0)} 50%{opacity:.6; transform:translateY(-6px)} }
.chip {
  position:relative; display:grid; place-items:center; gap:2px; width:150px; height:112px; border-radius:14px;
  background:linear-gradient(180deg,#24262c,#131418);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08),0 22px 40px -18px #000, 0 0 44px -10px rgba(246,247,249,.25);
}
.chip b { font-size:40px; font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; background:var(--silver); -webkit-background-clip:text; background-clip:text; color:transparent; }
.chip span { font-size:12px; color:var(--sub); }

/* Targets ladder. */
.art-ladder { align-content:center; gap:16px; display:grid; }
.rung { display:grid; grid-template-columns:62px 1fr 42px; align-items:center; gap:12px; width:100%; }
.rung em { font-style:normal; font-size:12.5px; font-weight:500; color:var(--sub); }
.rung .track { height:6px; border-radius:6px; background:rgba(255,255,255,.07); overflow:hidden; }
.rung .track i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,rgba(62,207,142,.4),var(--green)); transform:scaleX(0); transform-origin:left; transition:transform 1.5s var(--ease); transition-delay:calc(var(--d,0) * 140ms); }
.rung.in .track i { transform:scaleX(var(--fill,.5)); }
.rung output { font-size:13px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }

/* Scan time ring. */
.art-ring svg { width:168px; height:168px; transform:rotate(-90deg); }
.art-ring circle { fill:none; stroke-width:6; stroke-linecap:round; }
.ring-track { stroke:rgba(255,255,255,.07); }
.ring-fill { stroke:#f3f4f6; stroke-dasharray:314; stroke-dashoffset:314; transition:stroke-dashoffset 1.6s var(--ease) .2s; }
.in .ring-fill { stroke-dashoffset:78; }
.ring-value { position:absolute; display:grid; place-items:center; }
.ring-value b { font-size:36px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.ring-value span { font-size:12px; color:var(--muted); }
.note { margin-top:20px; font-size:12px; color:var(--muted); text-align:center; }

/* ── Reviews ────────────────────────────────────────────────────────── */
.rating { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; color:var(--sub); font-size:14px; }
.rating svg { width:15px; height:15px; color:#f0c674; }
.marquees { display:grid; gap:16px; }
.marquee { position:relative; display:flex; gap:16px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.marquee-row { display:flex; gap:16px; flex:none; animation:slide 62s linear infinite; }
.marquee.reverse .marquee-row { animation-duration:74s; animation-direction:reverse; }
.marquees:hover .marquee-row, .marquees:focus-within .marquee-row { animation-play-state:paused; }
@keyframes slide { from{transform:translateX(0)} to{transform:translateX(calc(-100% - 16px))} }
.review { flex:none; width:min(330px,76vw); padding:20px; border-radius:18px; background:var(--card); box-shadow:var(--card-rim); }
.review p { color:var(--sub); font-size:14.5px; }
.review footer { display:flex; align-items:center; gap:10px; margin-top:14px; }
.review footer i { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#1d1e23; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); font-style:normal; font-size:12px; font-weight:600; color:var(--sub); }
.review footer strong { font-size:13.5px; font-weight:600; }
.review footer small { display:block; font-size:11.5px; color:var(--muted); }

/* ── Pricing ────────────────────────────────────────────────────────── */
.plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:860px; margin-inline:auto; }
.plan { position:relative; padding:28px; border-radius:22px; background:var(--card); box-shadow:var(--card-rim); display:flex; flex-direction:column; gap:18px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.plan:hover { transform:translateY(-4px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -40px #000; }
.plan-best { background:radial-gradient(120% 100% at 50% 0,rgba(157,189,255,.07),rgba(255,255,255,.028) 55%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.plan-flag { position:absolute; right:22px; top:-11px; padding:4px 11px; border-radius:999px; background:var(--silver); color:#0b0c0e; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.plan h3 { font-size:15px; font-weight:600; color:var(--sub); }
.price { display:flex; align-items:flex-end; gap:8px; line-height:1; }
.price b { font-size:clamp(38px,4.4vw,52px); font-weight:600; letter-spacing:-.035em; }
.price s { color:var(--muted); font-size:17px; text-decoration-thickness:1px; }
.price small { color:var(--muted); font-size:13.5px; padding-bottom:4px; }
.plan ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.plan li { display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--sub); }
.plan li svg { width:14px; height:14px; margin-top:4px; flex:none; color:var(--accent); }
.plan .btn { width:100%; }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { max-width:760px; margin-inline:auto; }
.qa { border-bottom:1px solid var(--line); }
.qa:first-child { border-top:1px solid var(--line); }
.qa > button { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:22px 4px; text-align:left; font-size:16px; font-weight:500; transition:color .25s; }
.qa > button:hover { color:#fff; }
.qa-mark { position:relative; flex:none; width:16px; height:16px; }
.qa-mark::before,.qa-mark::after { content:''; position:absolute; inset:50% 0 auto; height:1.5px; background:var(--sub); transition:transform .4s var(--ease); }
.qa-mark::after { transform:rotate(90deg); }
.qa[data-open="true"] .qa-mark::after { transform:rotate(0); }
.qa-body { overflow:hidden; height:0; transition:height .45s var(--ease); }
.qa-body p { padding:0 48px 24px 4px; color:var(--muted); font-size:14.5px; }

/* ── Closing + footer ───────────────────────────────────────────────── */
.close-band { padding:clamp(80px,10vw,132px) 0; text-align:center; border-top:1px solid var(--line); }
.close-band h2 { margin-bottom:28px; font-size:clamp(30px,4.4vw,52px); background:linear-gradient(180deg,#fff,#9aa0a9); -webkit-background-clip:text; background-clip:text; color:transparent; }
footer.foot { padding:30px 0 42px; border-top:1px solid var(--line); }
footer.foot .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
footer.foot nav { display:flex; gap:20px; font-size:13px; color:var(--muted); }
footer.foot nav a:hover { color:var(--ink); }
.disclaimer { width:100%; font-size:11.5px; color:#6c717a; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:1020px) {
  .proof { grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .proof-art { height:200px; }
}
@media (max-width:980px) {
  .ways { grid-template-columns:1fr; gap:14px; }
  .or { grid-template-rows:none; grid-template-columns:1fr auto 1fr; align-items:center; padding:4px 0; }
  .or::before,.or::after { width:auto; height:1px; align-self:center; background:linear-gradient(90deg,#ffffff00,#ffffff1f,#ffffff00); }
  .stage { height:min(70vw,360px); }
}
@media (max-width:860px) {
  :root { --head-h:80px; }
  .topbar-nav { display:none; }
  .topbar-bar { grid-template-columns:1fr auto; width:100%; height:56px; padding:0 7px 0 16px; }
  .wordmark { font-size:19px; }
  /* Mobile GPUs repaint a blurred backdrop on every scroll frame; a near-opaque
     bar reads the same and scrolls smoothly. */
  .topbar-bar, .topbar.is-wide .topbar-bar { backdrop-filter:none; -webkit-backdrop-filter:none; background:#14151af2; }
  /* A smaller, still aurora costs far less to composite than three animated
     90px blurs. */
  .aura i { filter:blur(55px); opacity:.4; animation:none; }
  /* Reveals fade and rise only. A blur on .way would be re-rendered over the
     whole reel on every frame its charts repaint. */
  [data-reveal] { filter:none; }
}
@media (max-width:620px) {
  .topbar { padding:10px 14px; }
}
@media (max-width:620px) {
  .wrap { padding-inline:18px; }
  .band { padding:66px 0; }
  .plans { grid-template-columns:1fr; }
  .stage { height:330px; }
  .steps span { font-size:0; gap:0; padding:0; }
  .steps span i { width:22px; height:22px; font-size:11px; }
  .steps span.on { font-size:12px; gap:7px; padding:0 10px; flex:2; }
  .search { padding:11px; }
  .search-list i { padding:8px 10px; font-size:12.5px; }
  .ohlc { font-size:8.5px; gap:7px; }
  .ohlc > strong { font-size:8.5px; margin-right:0; }
  /* Only the close fits beside the price axis on a phone. */
  .ohlc > span:nth-of-type(-n+3) { display:none; }
  .hit { font-size:12px; padding:8px 13px; }
  .hero h1 { max-width:100%; }
  .btn-lg { width:100%; }
  .hero-cta { width:100%; }
  .header-actions .btn { min-height:40px; padding:0 15px; font-size:13px; }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal],.word { opacity:1 !important; transform:none !important; filter:none !important; }
  .beam,.flash,.aura i,.cursor,.sel,.search { display:none; }
}