:root{
  --black:#0A0B0D; --surface:#141210; --surface-2:#1B1815; --line:#2A2520;
  --ember:#FF6A1F; --ember-dim:#C24E14; --ember-soft:#FF8A4C;
  --ash:#8C8781; --ash-dim:#5E5A55; --paper:#F5EFE9;
  --live:#12E29A;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--black); color:var(--paper); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:radial-gradient(120% 90% at 50% -10%, rgba(255,106,31,.10), transparent 60%);
  background-attachment:fixed;
}
.wrap{max-width:1080px; margin:0 auto; padding:22px 24px 64px}
a{color:inherit; text-decoration:none}

/* top bar */
header{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:22px}
.mark{font-family:var(--mono); font-weight:700; font-size:20px; color:var(--ember); letter-spacing:.02em}
.mark b{color:var(--ember)}
.brandname{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ash)}
nav{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
nav a{font-size:13px; color:var(--ash); padding:4px 0; border-bottom:1px solid transparent}
nav a:hover{color:var(--paper); border-color:var(--ember)}
nav a.on{color:var(--paper); border-color:var(--ember)}
.preview{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ember-soft);
  border:1px solid var(--ember-dim); border-radius:999px; padding:4px 10px; white-space:nowrap}

/* header nav — CA chip + Buy/X links (hydrated by app.js; hidden pre-launch) */
header [hidden]{display:none !important}
.ca-chip{font-family:var(--mono); font-size:12px; color:var(--ash); border:1px solid var(--line);
  border-radius:999px; padding:4px 12px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.ca-chip .figure{color:var(--paper)}
nav a.buy{color:var(--ember-soft); border:1px solid var(--ember-dim); border-radius:999px; padding:4px 12px}
nav a.buy:hover{color:var(--paper); border-color:var(--ember)}
nav a.x{display:inline-flex; align-items:center; padding:4px 2px; color:var(--ash); border-bottom:none}
nav a.x svg{width:16px; height:16px}
nav a.x:hover{color:var(--paper)}

/* live strip */
.live{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ash);
  font-family:var(--mono); margin-bottom:22px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(18,226,154,.6);
  animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,226,154,.5)}70%{box-shadow:0 0 0 7px rgba(18,226,154,0)}100%{box-shadow:0 0 0 0 rgba(18,226,154,0)}}
.live b{color:var(--paper); font-weight:600}

/* hero furnace */
.furnace{position:relative; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, var(--surface), var(--black)); padding:40px 36px 34px}
.furnace::before{content:""; position:absolute; left:50%; top:100%; transform:translate(-50%,-40%);
  width:70%; height:120%; background:radial-gradient(50% 50% at 50% 50%, rgba(255,106,31,.28), transparent 70%);
  filter:blur(8px); animation:flicker 5s ease-in-out infinite; pointer-events:none}
@keyframes flicker{0%,100%{opacity:.75}50%{opacity:1}}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ember-soft)}
.bignum{font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(46px,9vw,92px); line-height:1; letter-spacing:-.02em; color:var(--paper); margin:14px 0 6px}
.bignum .u{color:var(--ember); font-size:.42em; margin-left:.25em; letter-spacing:0}
.subline{color:var(--ash); font-size:15px}
.subline b{color:var(--ember-soft); font-weight:600}
.tagline{margin-top:20px; font-size:15px; color:var(--paper); font-weight:500}
.tagline span{color:var(--ash); font-weight:400}

/* double burn split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; position:relative; z-index:1}
.src{border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:rgba(20,18,16,.6)}
.src .k{font-size:12px; color:var(--ash); letter-spacing:.03em}
.src .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:20px; color:var(--paper); margin-top:6px}
.src .n{font-size:12px; color:var(--ash-dim); margin-top:3px}

/* stat tiles */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px}
.tile{border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; background:var(--surface)}
.tile .k{font-size:12px; color:var(--ash); letter-spacing:.02em}
.tile .v{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:26px;
  color:var(--paper); margin-top:10px; letter-spacing:-.01em}
.tile .v small{color:var(--ember); font-size:.55em; font-weight:500; margin-left:.3em}
.tile .d{font-size:12px; color:var(--ash-dim); margin-top:6px}

/* activity */
.sechead{display:flex; align-items:baseline; gap:12px; margin:40px 0 14px}
.sechead h2{font-size:16px; margin:0; font-weight:600}
.sechead .hint{font-size:12px; color:var(--ash-dim); margin-left:auto; font-family:var(--mono)}
.cycle{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:0; margin-bottom:12px; overflow:hidden}
.cyc-top{display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line)}
.cyc-id{font-family:var(--mono); font-size:13px; color:var(--ember-soft)}
.cyc-time{font-size:12px; color:var(--ash)}
.cyc-badge{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--live);
  border:1px solid rgba(18,226,154,.35); border-radius:999px; padding:3px 9px}
.steps{display:grid; grid-template-columns:repeat(3,1fr)}
.step{padding:14px 18px; border-right:1px solid var(--line); position:relative}
.step:last-child{border-right:none}
.step .s{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash-dim)}
.step .a{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:15px; color:var(--paper); margin:7px 0 6px}
.step .a em{color:var(--ember); font-style:normal}
.tx{font-family:var(--mono); font-size:12px; color:var(--ash); border-bottom:1px dashed var(--ash-dim); padding-bottom:1px}
.tx:hover{color:var(--ember-soft); border-color:var(--ember)}
.arrow{position:absolute; right:-7px; top:50%; transform:translateY(-50%); color:var(--ash-dim); z-index:2; font-size:12px}

footer{margin-top:38px; padding-top:20px; border-top:1px solid var(--line); display:flex; gap:16px 28px;
  flex-wrap:wrap; font-size:12px; color:var(--ash)}
footer .ca{font-family:var(--mono); color:var(--ash)}
footer a{color:var(--ember-soft); border-bottom:1px dashed var(--ember-dim)}
.note{font-size:12px; color:var(--ash-dim); margin-top:12px; line-height:1.6}

@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:none; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  .arrow{display:none}
  nav{width:100%; order:3}
}
@media (prefers-reduced-motion:reduce){.dot,.furnace::before{animation:none}}

/* asof freshness line — new element (10-01), not in the brand preview; reuses existing tokens
   (mono, ash-dim) so it matches the ported system without introducing a new visual language. */
.asof{font-family:var(--mono); font-size:12px; color:var(--ash-dim); margin-top:10px}