:root{
  --bg:#0A0C0E;
  --grid:#12151A;
  --panel:#101317;
  --panel-2:#14181D;
  --hover:#181C22;
  --border:#1F242B;
  --border-soft:#191D23;
  --text:#F4F6F7;
  --text-2:#9AA4B0;
  --text-3:#5E6672;
  --amber:#E9A45D;
  --amber-dim:rgba(233,164,93,.14);
  --green:#5FB07C;
  --green-dim:rgba(95,176,124,.14);
  --blue:#7D93B0;
  --red:#D66B5C;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  background-position:-1px -1px;
  overflow-x:hidden;
}

.wrap{max-width:1080px; margin:0 auto; padding-inline:24px}

.icon{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
.icon.sm{width:14px; height:14px}

/* ---------- brand ---------- */
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.logo{
  width:28px; height:28px; border-radius:7px; flex:none;
  background:linear-gradient(135deg, var(--amber), #b9762f);
  display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; color:#1a1206; font-size:15px;
  box-shadow:0 0 0 1px rgba(233,164,93,.35), 0 4px 14px rgba(233,164,93,.18);
}
.brand b{font-size:16px; letter-spacing:-.2px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,12,14,.78);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:24px;
}
.nav-links{display:flex; align-items:center; gap:22px; margin-left:auto}
.nav-links a{
  color:var(--text-2); text-decoration:none; font-size:13.5px;
  transition:color .15s ease;
}
.nav-links a:hover{color:var(--text)}
.nav-login{font-family:var(--mono)}
.nav-toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--border);
  border-radius:8px; color:var(--text); width:38px; height:38px;
  align-items:center; justify-content:center; cursor:pointer;
}

.btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:8px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:filter .12s ease, background .12s ease, border-color .12s ease;
}
.btn-primary{background:var(--amber); color:#1a1206}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary .icon{stroke:#1a1206; width:15px; height:15px}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{background:var(--hover); border-color:var(--border-soft)}
.btn-lg{padding:12px 22px; font-size:14.5px}

/* ---------- eyebrow / headings ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:8px; margin:0 0 16px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px var(--amber-dim);}
.eyebrow.online::before{background:var(--green); box-shadow:0 0 0 3px var(--green-dim);}
.eyebrow.online{color:var(--green)}

h1,h2,h3,h4{font-family:var(--sans); font-weight:700; color:var(--text); text-wrap:balance; margin:0}
.title-xl{font-size:clamp(32px,5.4vw,58px); line-height:1.06; letter-spacing:-.02em; font-weight:800}
.title-xl em{color:var(--amber); font-style:normal}
.title-lg{font-size:clamp(24px,3.4vw,38px); line-height:1.15; letter-spacing:-.01em; max-width:22ch}

.lede{
  font-size:clamp(15px,1.6vw,18px); line-height:1.6; color:var(--text-2);
  max-width:60ch; margin:18px 0 0;
}

.statement{
  font-family:var(--sans); font-weight:700; font-size:clamp(26px,3.6vw,40px);
  line-height:1.22; color:var(--text); text-wrap:balance; max-width:22ch;
}
.statement em{color:var(--amber); font-style:normal}

.tag{
  font-family:var(--mono); font-size:11.5px; line-height:1;
  padding:6px 12px; border-radius:999px; border:1px solid var(--border);
  color:var(--text-2); background:var(--panel-2);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.tag.accent{color:var(--amber); border-color:rgba(233,164,93,.35); background:var(--amber-dim)}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}

/* ---------- panel ---------- */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px}

/* ---------- hero ---------- */
.hero{padding:96px 0 72px}
.hero .wrap{max-width:900px}

/* ---------- generic section ---------- */
.section{padding:72px 0; border-top:1px solid var(--border-soft)}

.reveal{opacity:0; transform:translateY(14px); 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} }

/* ---------- compare ---------- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px}
.compare .panel{padding:26px 24px; display:flex; flex-direction:column; gap:14px}
.compare .col-pos{border-color:rgba(233,164,93,.35); background:linear-gradient(180deg, var(--amber-dim), var(--panel) 60%)}
.col-label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); display:flex; align-items:center; gap:7px;
}
.col-pos .col-label{color:var(--amber)}
.compare h3{font-size:19px}
.compare ul{list-style:none; display:flex; flex-direction:column; gap:9px}
.compare li{font-size:13.5px; color:var(--text-2); line-height:1.5; padding-left:18px; position:relative}
.compare li::before{content:"\2013"; position:absolute; left:0; color:var(--text-3)}
.col-pos li::before{content:"+"; color:var(--amber)}
@media (max-width:720px){ .compare{grid-template-columns:1fr} }

/* ---------- diagrams ---------- */
.diagram-panel{margin-top:30px; padding:28px; display:flex; justify-content:center}
.diagram{max-width:100%; height:auto; display:block}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px}
.step{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:20px 18px; display:flex; flex-direction:column; gap:10px;
}
.step-num{
  font-family:var(--mono); font-size:13px; color:var(--amber);
  width:32px; height:32px; border-radius:8px; border:1px solid rgba(233,164,93,.35);
  display:flex; align-items:center; justify-content:center; background:var(--amber-dim);
}
.step h4{font-size:15.5px}
.step p{font-size:13px; color:var(--text-2); line-height:1.55}
@media (max-width:820px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* ---------- card grid ---------- */
.grid{display:grid; gap:16px; margin-top:32px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){ .grid.cols-3{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .grid.cols-3{grid-template-columns:1fr} }

.card{padding:22px 20px; display:flex; flex-direction:column; gap:10px}
.card .icon{color:var(--amber); width:22px; height:22px}
.card h3{font-size:17px}
.card .mem{font-family:var(--mono); font-size:12.5px; color:var(--amber)}
.card p{font-size:13.5px; color:var(--text-2); line-height:1.5}

/* ---------- kpi tiles ---------- */
.kpi{padding:20px 20px; display:flex; flex-direction:column; gap:8px}
.k-label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; color:var(--text-3); letter-spacing:.02em;
}
.k-val{font-family:var(--mono); font-size:28px; font-weight:600; color:var(--text); letter-spacing:-.5px}
.k-val u{font-size:13px; color:var(--text-3); font-weight:400; text-decoration:none; margin-left:5px}
.kpi p{font-size:13px; color:var(--text-2); line-height:1.5; margin-top:2px}

/* ---------- code block ---------- */
.codeblock{
  margin-top:30px; background:var(--bg); border-color:var(--border);
  padding:22px 24px; font-family:var(--mono); font-size:13.5px; line-height:1.7;
  overflow-x:auto; max-width:640px; color:var(--text-2);
}
.codeblock .kw{color:var(--blue)}
.codeblock .str{color:var(--green)}
.codeblock .cm{color:var(--text-3)}
.codeblock .fn{color:var(--amber)}

/* ---------- final cta ---------- */
.cta-section{text-align:center; padding:88px 0}
.cta-section .wrap{display:flex; flex-direction:column; align-items:center}
.cta-section .lede{margin-inline:auto}
.cta-section .cta-row{justify-content:center}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border-soft); padding:32px 0}
.footer-inner{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.footer-links{display:flex; gap:20px; flex-wrap:wrap; margin-left:auto}
.footer-links a{color:var(--text-2); text-decoration:none; font-size:13px}
.footer-links a:hover{color:var(--text)}
.copyright{font-family:var(--mono); font-size:11.5px; color:var(--text-3); width:100%; margin-top:8px}
@media (min-width:640px){ .copyright{width:auto; margin-top:0} }

::-webkit-scrollbar{width:9px; height:9px}
::-webkit-scrollbar-thumb{background:#22272e; border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- mobile nav ---------- */
@media (max-width:760px){
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed; top:65px; left:0; right:0; z-index:49;
    background:var(--bg); border-bottom:1px solid var(--border-soft);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 16px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-links.open{transform:none; opacity:1; pointer-events:auto}
  .nav-links a{padding:12px 0; border-bottom:1px solid var(--border-soft)}
  .nav-links .btn{margin-top:12px; justify-content:center}
}