/* ──────────────────────────────────────────────────────────────
   Smeltor design tokens + components — ONE source of truth.
   Extracted from the BD-approved v4 landing (3 Jun 2026) + one
   deliberate polish pass (deeper base, ~7:1 body contrast, amber
   used sparingly, more breathing room). Every page links this file.
   Fonts: Hanken Grotesk (sans) + JetBrains Mono (mono) via Google Fonts.
   ────────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────────
   SMELTOR — premium dark. Near-monochrome. Amber is rare.
─────────────────────────────────────────────────────────────── */
:root{
  --bg:#050505;
  --bg-2:#0a0a0a;
  --panel:#0f0f0f;
  --panel-2:#141414;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.11);
  --ink:#f2f0ed;
  --ink-2:#d6d3ce;
  --ink-3:#9c988f;
  --ink-faint:#67635c;
  --amber:#ff9e3d;
  --green:#62c98a;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --max:1080px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:rgba(255,158,61,.16); color:#fff; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

.shell{ max-width:var(--max); margin:0 auto; padding:0 28px; }
@media (max-width:620px){ .shell{ padding:0 20px; } }

/* one restrained radial glow, top-right ~7% */
.glow-bg{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.glow-bg::before{
  content:""; position:absolute; top:-200px; right:-160px;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,158,61,.05), transparent 72%);
}
.page{ position:relative; z-index:1; }

/* type */
h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin:0; }
.kicker{ font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.mono{ font-family:var(--mono); }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:14.5px; padding:11px 18px; border-radius:8px; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; white-space:nowrap; }
.btn-primary{ background:var(--ink); color:#0a0a0a; }
.btn-primary:hover{ background:#fff; }
.btn-ghost{ border:1px solid var(--line-2); color:var(--ink-2); }
.btn-ghost:hover{ border-color:var(--ink-3); color:var(--ink); }
.btn .arr{ width:14px; height:14px; }
.tlink{ color:var(--ink-3); font-size:14px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s; }
.tlink:hover{ color:var(--ink); border-color:var(--line-2); }

/* ── NAV ───────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:50; background:rgba(5,5,5,.72); backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); border-bottom:1px solid var(--line); }
.nav-in{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:15px; letter-spacing:-.01em; }
.brand .mk{ width:18px; height:18px; flex:none; }
.nav-mid{ display:flex; gap:26px; }
.nav-mid a{ font-size:14px; color:var(--ink-3); transition:color .15s; }
.nav-mid a:hover{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:18px; }
@media (max-width:860px){ .nav-mid{ display:none; } }

/* ── HERO ──────────────────────────────────────────────────── */
.hero{ padding:132px 0 108px; }
.hero-eyebrow{ margin-bottom:26px; }
.hero h1{ font-size:clamp(38px,5.4vw,62px); font-weight:700; letter-spacing:-.035em; line-height:1.04; max-width:13ch; text-wrap:balance; }
.hero-sub{ margin:26px 0 0; max-width:560px; font-size:17.5px; font-weight:300; color:var(--ink-2); line-height:1.62; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:start; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:36px; } .hero{ padding:84px 0 72px; } }
.hero-actions{ margin-top:34px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-trust{ margin-top:30px; font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em; }
.hero-trust .sep{ opacity:.5; margin:0 9px; }

/* code block */
.code{ background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.code-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); }
.code-bar .fname{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.code-bar .copy{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:6px; padding:4px 10px; transition:color .15s, border-color .15s; }
.code-bar .copy:hover{ color:var(--ink); border-color:var(--line-2); }
.code-bar .copy.done{ color:var(--green); border-color:rgba(98,201,138,.3); }
.code pre{ margin:0; padding:20px 20px; font-family:var(--mono); font-size:13.5px; line-height:1.7; color:var(--ink-2); white-space:pre; overflow-x:auto; }
.c-kw{ color:#c9a6ff; } .c-fn{ color:var(--amber); } .c-str{ color:var(--green); } .c-prop{ color:var(--ink); } .c-punc{ color:var(--ink-faint); } .c-var{ color:var(--ink-2); } .c-cmt{ color:var(--ink-faint); font-style:italic; }

/* ── SECTION SCAFFOLD ──────────────────────────────────────── */
section.blk{ padding:118px 0; border-top:1px solid var(--line); }
.sec-head{ max-width:680px; margin-bottom:60px; }
.sec-head .kicker{ margin-bottom:16px; }
.sec-head h2{ font-size:clamp(27px,3.4vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; }
.sec-head p{ margin:16px 0 0; font-size:17px; font-weight:300; color:var(--ink-2); max-width:540px; }

/* ── PROBLEM ───────────────────────────────────────────────── */
.prob-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:820px){ .prob-grid{ grid-template-columns:1fr; gap:36px; } }
.prob-aside{ position:sticky; top:96px; }
/* Un-stick the aside once the grid collapses to one column, else the pinned
   heading overlaps the steps scrolling up beneath it. MUST come after the base
   sticky rule above (equal specificity → later source order wins). */
@media (max-width:820px){ .prob-aside{ position:static; top:auto; } }
.prob-aside h3{ font-size:24px; font-weight:600; letter-spacing:-.02em; line-height:1.18; }
.prob-aside p{ margin:14px 0 0; color:var(--ink-3); font-weight:300; font-size:15.5px; }
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.step:first-child{ padding-top:0; }
.step .n{ font-family:var(--mono); font-size:12.5px; color:var(--ink-faint); }
.step .t{ font-size:16.5px; color:var(--ink-2); font-weight:400; }
.step .t b{ color:var(--ink); font-weight:600; }
.step.win{ border-bottom:0; margin-top:14px; padding:20px 22px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; }
.step.win .n{ color:var(--amber); }
.step.win .t{ color:var(--ink); }

/* ── DEMO ──────────────────────────────────────────────────── */
.demo-app{ background:var(--panel); border:1px solid var(--line-2); border-radius:16px; overflow:hidden; box-shadow:0 40px 90px -50px rgba(0,0,0,.9); }
.demo-top{ display:flex; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.demo-top .dt-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(98,201,138,.6); }
.demo-top .dt-label{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.demo-top .dt-right{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); }
.demo-body{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
@media (max-width:820px){ .demo-body{ grid-template-columns:1fr; } }
.demo-left{ padding:26px 26px 30px; border-right:1px solid var(--line); }
@media (max-width:820px){ .demo-left{ border-right:0; border-bottom:1px solid var(--line); } }
.demo-right{ padding:26px 26px 30px; background:var(--bg-2); }
.di-label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
.di-input{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--bg); border:1px solid var(--line-2); border-radius:10px; }
.di-input .gt{ color:var(--amber); font-family:var(--mono); }
.di-input .goal{ font-size:15.5px; color:var(--ink); }
.di-input .cur{ display:inline-block; width:7px; height:1.05em; background:var(--ink-3); margin-left:1px; vertical-align:text-bottom; animation:blink 1.05s steps(2,start) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.chip{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); padding:6px 11px; border:1px solid var(--line); border-radius:999px; opacity:0; transform:translateY(4px); transition:all .3s ease; }
.chip.on{ opacity:1; transform:none; }
.chip.sel{ color:var(--amber); border-color:rgba(255,158,61,.35); background:rgba(255,158,61,.06); }

.plan-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.plan-head .pt{ font-size:13px; color:var(--ink-3); font-family:var(--mono); }
.opt{ padding:13px 15px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; opacity:0; transform:translateY(6px); transition:all .35s ease; }
.opt.on{ opacity:1; transform:none; }
.opt.lead{ border-color:rgba(255,158,61,.3); background:rgba(255,158,61,.04); }
.opt-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.opt-name{ font-size:14.5px; font-weight:600; color:var(--ink); }
.opt-apy{ font-family:var(--mono); font-size:13px; color:var(--green); }
.opt-meta{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:3px; }
.opt-rank{ font-family:var(--mono); font-size:10px; color:var(--amber); text-transform:uppercase; letter-spacing:.1em; }

.seq{ margin-top:18px; }
.seq-step{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--line); opacity:0; transform:translateY(6px); transition:all .35s ease; }
.seq-step.on{ opacity:1; transform:none; }
.seq-step .sn{ width:22px; height:22px; border-radius:6px; background:var(--panel-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.seq-step .sl{ font-size:14px; color:var(--ink-2); }
.seq-step .sl b{ color:var(--ink); font-weight:600; }
.seq-step .tag{ font-family:var(--mono); font-size:10px; padding:2px 7px; border-radius:4px; border:1px solid var(--line-2); color:var(--ink-3); }
.seq-step .tag.bridge{ color:var(--amber); border-color:rgba(255,158,61,.3); background:rgba(255,158,61,.06); }
.seq-step .calldata{ grid-column:2 / -1; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); word-break:break-all; margin-top:2px; }

.reasoning{ margin-top:20px; padding:18px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel); opacity:0; transform:translateY(8px); transition:all .5s ease; }
.reasoning.on{ opacity:1; transform:none; }
.reasoning .rh{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); margin-bottom:12px; }
.reasoning .rh .rdot{ width:6px; height:6px; border-radius:50%; background:var(--amber); }
.reasoning p{ margin:0 0 9px; font-size:13.5px; color:var(--ink-2); line-height:1.6; font-weight:300; }
.reasoning p:last-child{ margin-bottom:0; }
.reasoning b{ color:var(--ink); font-weight:600; }
.demo-stats{ display:flex; gap:24px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.demo-stats .ds .v{ font-family:var(--mono); font-size:16px; color:var(--ink); }
.demo-stats .ds .l{ font-size:11px; color:var(--ink-faint); margin-top:1px; }
.demo-replay{ margin-top:22px; display:flex; justify-content:center; }

/* ── CAPABILITIES ──────────────────────────────────────────── */
.compose-card{ padding:32px; border:1px solid var(--line-2); border-radius:14px; background:var(--panel); margin-bottom:14px; }
.compose-card .cc-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); }
.compose-card h3{ font-size:24px; font-weight:700; letter-spacing:-.02em; margin:10px 0 8px; }
.compose-card p{ color:var(--ink-2); font-weight:300; font-size:15.5px; max-width:560px; margin:0 0 20px; }
.compose-flow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; }
.cf-node{ padding:8px 13px; border:1px solid var(--line-2); border-radius:8px; color:var(--ink-2); background:var(--bg); }
.cf-node.amber{ color:var(--amber); border-color:rgba(255,158,61,.3); background:rgba(255,158,61,.05); }
.cf-arr{ color:var(--ink-faint); }
.cap-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
@media (max-width:820px){ .cap-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .cap-grid{ grid-template-columns:1fr; } }
.cap{ padding:22px 20px; border-right:1px solid var(--line); }
.cap:last-child{ border-right:0; }
@media (max-width:820px){ .cap{ border-bottom:1px solid var(--line); } .cap:nth-child(2n){ border-right:0; } }
.cap h4{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.cap p{ margin:7px 0 0; font-size:13px; color:var(--ink-3); font-weight:300; line-height:1.5; }

/* ── MOAT / lists ──────────────────────────────────────────── */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:820px){ .two{ grid-template-columns:1fr; gap:32px; } }
.mlist{ display:flex; flex-direction:column; }
.mrow{ display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 0; border-top:1px solid var(--line); align-items:baseline; }
.mrow .mk2{ font-family:var(--mono); font-size:11px; color:var(--amber); }
.mrow .mt{ font-size:15px; color:var(--ink-2); font-weight:300; }
.mrow .mt b{ color:var(--ink); font-weight:600; }

/* ── REVENUE ───────────────────────────────────────────────── */
.rev-band{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; padding:30px 32px; border:1px solid var(--line-2); border-radius:14px; background:var(--panel); }
.rev-band .big{ font-family:var(--mono); font-size:40px; color:var(--ink); letter-spacing:-.02em; }
.rev-band .big .am{ color:var(--amber); }
.rev-band .rt{ font-size:15.5px; color:var(--ink-2); font-weight:300; max-width:520px; }

/* ── HONESTY ───────────────────────────────────────────────── */
.honest{ max-width:680px; }
.honest p{ font-size:18px; color:var(--ink-2); font-weight:300; line-height:1.6; }
.honest p b{ color:var(--ink); font-weight:600; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:38px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
@media (max-width:620px){ .stat-row{ grid-template-columns:1fr 1fr; } }
.statc{ padding:26px 22px; border-right:1px solid var(--line); }
.statc:last-child{ border-right:0; }
@media (max-width:620px){ .statc:nth-child(2n){ border-right:0; } .statc:nth-child(-n+2){ border-bottom:1px solid var(--line); } }
.statc .sv{ font-family:var(--mono); font-size:34px; color:var(--ink); letter-spacing:-.02em; }
.statc .sl{ font-size:12.5px; color:var(--ink-3); margin-top:5px; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq{ max-width:760px; }
.fitem{ border-top:1px solid var(--line); }
.fitem:last-child{ border-bottom:1px solid var(--line); }
.fq{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; cursor:pointer; list-style:none; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.fq::-webkit-details-marker{ display:none; }
.fq .pl{ flex:none; width:20px; height:20px; position:relative; }
.fq .pl::before,.fq .pl::after{ content:""; position:absolute; background:var(--ink-3); transition:transform .2s, background .2s; }
.fq .pl::before{ left:0; right:0; top:9px; height:1.5px; }
.fq .pl::after{ top:0; bottom:0; left:9px; width:1.5px; }
.fitem[open] .fq .pl::after{ transform:scaleY(0); }
.fitem[open] .fq .pl::before{ background:var(--amber); }
.fa{ padding:0 0 24px; font-size:15px; color:var(--ink-2); font-weight:300; line-height:1.66; max-width:640px; }

/* ── FINAL CTA ─────────────────────────────────────────────── */
.final{ padding:118px 0; border-top:1px solid var(--line); }
.final-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:820px){ .final-grid{ grid-template-columns:1fr; gap:32px; } }
.final h2{ font-size:clamp(28px,3.6vw,42px); font-weight:700; letter-spacing:-.03em; line-height:1.08; }
.final-actions{ margin-top:26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }

/* ── FOOTER ────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line); padding:40px 0 44px; }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot .fb{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:14px; }
.foot .fb .mk{ width:16px; height:16px; }
.foot-links{ display:flex; gap:22px; }
.foot-links a{ font-size:13.5px; color:var(--ink-3); transition:color .15s; }
.foot-links a:hover{ color:var(--ink); }
.foot-strip{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-faint); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* reveal */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv,.chip,.opt,.seq-step,.reasoning{ opacity:1 !important; transform:none !important; transition:none !important; }
  .di-input .cur{ animation:none; }
}