:root{
  --void:#000000; --carbon:#111111; --graphite:#191919; --iron:#202020;
  --slate:#3a3a3a; --pewter:#505050; --steel:#606060; --ash:#7e7e7e;
  --fog:#b4b4b4; --chalk:#d9d9d9; --paper:#eeeeee; --ember:#da5c2c;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max:1200px; --gap:40px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--paper);
  font-family:var(--mono); font-size:14px; line-height:1.71;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}
.mono-sm{font-size:12px; line-height:1.5}
.muted{color:var(--fog)}
.dim{color:var(--steel)}
.tag{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel)}
.hr{height:1px; background:var(--iron); border:0; margin:0}

/* announcement */
.banner{background:var(--carbon); border-bottom:1px solid var(--iron); font-size:12px}
.banner .wrap{display:flex; gap:12px; align-items:center; justify-content:space-between; padding:8px 16px}
.banner b{color:var(--paper)}
.banner .dot{color:var(--ember)}

/* nav */
nav{position:sticky; top:0; z-index:50; background:rgba(0,0,0,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--iron)}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:56px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.08em}
.logo .mark{width:14px; height:14px; background:var(--ember); clip-path:polygon(0 100%,50% 0,100% 100%)}
.navlinks{display:flex; gap:24px; font-size:13px; color:var(--fog)}
.navlinks a:hover{color:var(--paper)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:2px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent; transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--ember); color:var(--paper)}
.btn-primary:hover{background:#c24f24}
.btn-ghost{border-color:var(--slate); color:var(--paper); font-weight:400; background:transparent}
.btn-ghost:hover{border-color:var(--chalk)}
.btn-sm{padding:7px 12px; font-size:12px}

/* hero */
header.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--iron)}
header.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; padding:72px 16px 64px; align-items:center}
@media (max-width:900px){header.hero .wrap{grid-template-columns:1fr; padding:48px 16px}}
h1{font-size:44px; line-height:1.1; margin:16px 0 0; letter-spacing:-.01em}
@media (max-width:640px){h1{font-size:32px}}
h1 .accent{color:var(--ember)}
.lead{color:var(--fog); font-size:15px; max-width:52ch; margin:20px 0 0}
.hero-cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.hero-note{margin-top:18px; color:var(--steel); font-size:12px}
.cursor{display:inline-block; width:8px; height:15px; background:var(--ember); vertical-align:-2px; animation:blink 1.05s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}

/* terminal mock */
.term{background:var(--carbon); border:1px solid var(--iron); border-radius:2px}
.term-bar{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--iron); font-size:12px; color:var(--steel)}
.term-dots{display:flex; gap:5px}
.term-dots i{width:8px;height:8px;border-radius:50%;background:var(--slate);display:block}
.term-body{padding:16px; font-size:12px; line-height:1.9}
.term-line{white-space:nowrap; overflow:hidden}
.term-line .k{color:var(--fog)}
.term-line .v{color:var(--paper)}
.term-line .ok{color:var(--ember)}
.bar{height:6px; background:var(--iron); border-radius:1px; overflow:hidden; margin:10px 0 4px}
.bar i{display:block; height:100%; width:0; background:var(--ember); animation:fill 3.2s ease forwards}
@keyframes fill{to{width:82%}}
.spark{display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:12px}
.spark i{display:block; width:5px; background:var(--slate); animation:grow 2.4s ease forwards; transform-origin:bottom}
.spark i:nth-child(3n){background:var(--ember)}
@keyframes grow{from{height:4px}to{height:var(--h)}}

/* marquee arrows bg */
.arrows{position:absolute; inset:0; pointer-events:none; opacity:.5; overflow:hidden}
.arrows span{position:absolute; color:var(--iron); font-size:12px; letter-spacing:.4em; white-space:nowrap; animation:slide 24s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* sections */
section{padding:64px 0; border-bottom:1px solid var(--iron)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:32px; flex-wrap:wrap}
h2{font-size:24px; line-height:1.33; margin:8px 0 0}
h3{font-size:18px; margin:0 0 8px}
p{margin:0}

/* stats */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--iron); border:1px solid var(--iron); border-radius:2px; overflow:hidden}
.stats div{background:var(--carbon); padding:24px}
.stats .n{font-size:28px; font-weight:700; letter-spacing:-.02em}
.stats .l{color:var(--steel); font-size:12px; margin-top:4px}
@media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}

/* cards */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--graphite); border:1px solid var(--iron); border-radius:2px; padding:32px}
.card .step{color:var(--ember); font-weight:700; font-size:12px; letter-spacing:.12em}
.card p{color:var(--fog); margin-top:8px}
.card code{display:block; margin-top:16px; background:var(--carbon); border:1px solid var(--iron); padding:12px; font-size:12px; color:var(--chalk); white-space:pre-wrap; border-radius:2px}
.card-accent{border-left:2px solid var(--ember)}

/* pricing */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:14px 12px; border-bottom:1px solid var(--iron)}
th{color:var(--steel); font-weight:400; font-size:12px; text-transform:uppercase; letter-spacing:.08em}
td .price{font-weight:700; font-size:16px}
tr:hover td{background:var(--carbon)}
.note{color:var(--steel); font-size:12px; margin-top:14px}

/* modes */
.mode{background:var(--graphite); border:1px solid var(--iron); border-radius:2px; padding:24px}
.mode h3{display:flex; align-items:center; gap:8px}
.mode ul{margin:12px 0 0; padding-left:18px; color:var(--fog)}
.mode li{margin:4px 0}
pre.code{background:var(--carbon); border:1px solid var(--iron); border-radius:2px; padding:16px; overflow:auto; font-size:12px; line-height:1.8}
pre.code .c{color:var(--steel)}
pre.code .e{color:var(--ember)}

/* faq */
details{border-bottom:1px solid var(--iron); padding:16px 0}
details summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; color:var(--paper); font-size:14px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+'; color:var(--steel)}
details[open] summary::after{content:'−'; color:var(--ember)}
details p{color:var(--fog); margin-top:10px; max-width:80ch}

/* cta */
.cta{display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--carbon); border:1px solid var(--iron); border-radius:2px; padding:40px; flex-wrap:wrap}
.cta h2{margin:0}

footer{padding:40px 0; color:var(--steel); font-size:12px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a:hover{color:var(--paper)}

/* reveal */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .cursor,.arrows span,.bar i,.spark i{animation:none}
}

/* ---------- mobile ---------- */
@media (max-width: 760px){
  body{font-size:13px}
  .banner{font-size:11px}
  .banner .wrap{flex-direction:column;align-items:flex-start;gap:2px;padding:8px 16px}

  nav .wrap{height:auto;padding:10px 16px;flex-wrap:wrap;row-gap:10px}
  .logo{font-size:14px;letter-spacing:.06em}
  .navlinks{order:3;flex-basis:100%;display:flex;gap:18px;overflow-x:auto;white-space:nowrap;
            font-size:12px;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .btn-sm{padding:8px 12px;font-size:11px}

  header.hero .wrap{grid-template-columns:1fr;padding:40px 16px 40px;gap:28px}
  h1{font-size:30px;line-height:1.15}
  .lead{font-size:14px}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}

  section{padding:44px 0}
  .sec-head{margin-bottom:20px;gap:8px}
  h2{font-size:20px}
  h3{font-size:16px}

  .stats{grid-template-columns:1fr 1fr}
  .stats div{padding:16px}
  .stats .n{font-size:22px}

  .card{padding:20px}
  .grid3,.grid2{gap:12px}

  .term-body{font-size:11px;line-height:1.8}
  .term-line{white-space:normal;overflow-wrap:anywhere}
  .spark{display:none}

  table{display:block;width:100%;overflow-x:auto;white-space:nowrap;font-size:12px}
  thead,tbody{display:table;width:100%}
  th,td{padding:10px 8px}
  td .price{font-size:14px}

  pre.code{font-size:11px;padding:12px}
  .mode{padding:18px}
  .cta{padding:20px;flex-direction:column;align-items:flex-start}
  .cta .btn{width:100%;justify-content:center}
  details summary{font-size:13px}
  footer .wrap{flex-direction:column;gap:8px;font-size:11px}
}

/* ---------- overflow guards ---------- */
html,body{max-width:100%;overflow-x:hidden}
header.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.term{min-width:0;max-width:100%}
.term-body{overflow-x:auto}
.hero-copy{min-width:0}
@media (max-width: 900px){
  header.hero .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  .wrap{width:100%}
  .term-body{overflow-x:auto}
  .term-line{white-space:normal}
  .arrows{display:none}
}

@media (max-width: 760px){
  .hide-sm{display:none !important}
}