:root{
  --bg:#0b0e14; --bg2:#10141c; --panel:#141924; --panel2:#1a2030; --line:#252c3b; --line2:#323b4f;
  --ink:#eef1f6; --mut:#a9b2c3; --dim:#7c869a;
  --gold:#e8b94a; --gold2:#f6d58a; --teal:#4fd1c5; --blue:#6ea8ff; --rose:#ff7a90; --violet:#a78bfa; --green:#5bd68a;
  --r:14px; --r2:20px;
  --sans:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 520px at 78% -8%,rgba(232,185,74,.10),transparent 60%),radial-gradient(900px 600px at -10% 10%,rgba(110,168,255,.07),transparent 60%)}
a{color:var(--gold2);text-decoration-color:rgba(246,213,138,.35);text-underline-offset:3px}
a:hover{text-decoration-color:var(--gold2)}
code,.m{font-family:var(--mono);font-size:.88em}
code{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:#dfe6f3}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#111;padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:12px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(11,14,20,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.back{color:var(--mut);text-decoration:none;font-weight:600;font-size:14px}
.back:hover{color:var(--ink)}
.seg{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.seg a{font-size:13px;font-weight:600;color:var(--mut);text-decoration:none;padding:6px 14px;border-radius:999px;white-space:nowrap}
.seg a:hover{color:var(--ink)}
.seg a[aria-current="page"]{background:var(--ink);color:#0b0e14}

/* hero */
.hero{padding:76px 0 40px;display:grid;grid-template-columns:1.25fr .9fr;gap:48px;align-items:center}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.03em;margin:16px 0 18px;font-weight:800}
h1 span{background:linear-gradient(92deg,var(--gold2),var(--gold) 60%,#c9902a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;color:var(--mut);max-width:620px;margin:0 0 28px}
.lead strong{color:var(--ink);font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{appearance:none;border:0;cursor:pointer;font:700 15px/1 var(--sans);display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:12px;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s}
.btn svg{width:18px;height:18px;flex:none}
.btn.primary{background:linear-gradient(180deg,#f6d58a,#e8b94a);color:#1a1300;box-shadow:0 10px 30px -12px rgba(232,185,74,.8),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(232,185,74,.95),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.primary:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px var(--mut)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px}
.stat b{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1}
.stat span{display:block;color:var(--mut);font-size:13.5px;margin-top:8px;line-height:1.35}
.stat:nth-child(1) b{color:var(--gold2)} .stat:nth-child(2) b{color:var(--teal)} .stat:nth-child(3) b{color:var(--blue)} .stat:nth-child(4) b{color:var(--violet)}
.snap{margin-top:14px;font:500 12.5px var(--mono);color:var(--dim)}

/* sections */
section{padding:64px 0;border-top:1px solid var(--line)}
.sh{display:grid;grid-template-columns:280px 1fr;gap:40px;margin-bottom:32px}
.sh h2{font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.02em;margin:10px 0 0;font-weight:800}
.sh p{color:var(--mut);margin:0;font-size:17px;max-width:680px;align-self:end}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;position:relative;transition:border-color .2s,transform .2s var(--ease)}
.card:hover{border-color:var(--line2)}
.card h3{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;color:var(--mut);font-size:15px}
.card ul{margin:8px 0 0;padding-left:18px;color:var(--mut);font-size:15px}
.card li{margin:4px 0}
.ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;border:1px solid var(--line2)}
.ico svg{width:20px;height:20px}
.c-gold .ico{color:var(--gold2);background:rgba(232,185,74,.10)} .c-teal .ico{color:var(--teal);background:rgba(79,209,197,.10)}
.c-blue .ico{color:var(--blue);background:rgba(110,168,255,.10)} .c-violet .ico{color:var(--violet);background:rgba(167,139,250,.10)}
.c-rose .ico{color:var(--rose);background:rgba(255,122,144,.10)} .c-green .ico{color:var(--green);background:rgba(91,214,138,.10)}
.num{font:700 12px var(--mono);color:var(--dim);letter-spacing:.08em}
.note{color:var(--dim);font-size:14px;margin:18px 0 0;max-width:820px}

/* architecture diagram */
.arch{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:0;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:28px;position:relative;overflow:hidden}
.arch::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;opacity:.25;pointer-events:none}
.col{position:relative;display:flex;flex-direction:column;gap:8px}
.col h4{margin:0 0 6px;font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.chip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;font-weight:600}
.chip i{width:8px;height:8px;border-radius:50%;flex:none}
.chip small{color:var(--dim);font-weight:500;margin-left:auto;font-size:12px;text-align:right}
.hubcore{position:relative;margin:0 28px;padding:26px 22px;border-radius:18px;text-align:center;background:linear-gradient(180deg,#221d10,#171309);border:1px solid rgba(232,185,74,.45);box-shadow:0 0 0 6px rgba(232,185,74,.06),0 20px 60px -20px rgba(232,185,74,.45)}
.hubcore b{display:block;font-size:22px;letter-spacing:-.01em}
.hubcore .lock{display:inline-flex;gap:6px;align-items:center;font:600 11.5px var(--mono);color:var(--gold2);background:rgba(232,185,74,.12);border:1px solid rgba(232,185,74,.35);padding:4px 10px;border-radius:999px;margin-bottom:12px}
.hubcore ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hubcore li{font-size:12.5px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:6px}
.hubcore::before,.hubcore::after{content:"";position:absolute;top:50%;width:28px;height:2px;background:linear-gradient(90deg,transparent,var(--gold))}
.hubcore::before{left:-28px} .hubcore::after{right:-28px;transform:scaleX(-1)}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;color:var(--dim);font-size:13px}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:8px;height:8px;border-radius:50%}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border-top:2px solid var(--line2);padding-top:16px}
.step .num{color:var(--gold)}
.step h3{margin:6px 0 6px;font-size:17px}
.step p{margin:0;color:var(--mut);font-size:15px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.tier{border-radius:var(--r);padding:18px 20px;border:1px solid var(--line);background:var(--panel)}
.tier .t{font:700 12px var(--mono);letter-spacing:.06em}
.tier:nth-child(1) .t{color:var(--green)} .tier:nth-child(2) .t{color:var(--blue)} .tier:nth-child(3) .t{color:var(--rose)}
.tier h3{margin:6px 0 4px;font-size:16px}.tier p{margin:0;color:var(--mut);font-size:14.5px}

/* tables */
.tbl{border:1px solid var(--line);border-radius:var(--r);overflow:auto;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
th{text-align:left;font:600 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--mut);vertical-align:top}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.pill{display:inline-block;font:600 11.5px var(--mono);padding:3px 9px;border-radius:999px;white-space:nowrap}
.ok{color:var(--green);background:rgba(91,214,138,.12)} .warn{color:var(--gold2);background:rgba(232,185,74,.12)} .off{color:var(--dim);background:rgba(255,255,255,.06)}

/* safety */
.blocks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.blocks code{font-size:12.5px}
.guard{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.guard span{font:500 12.5px var(--mono);color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:var(--bg2)}

/* toolkit band */
.toolband{border-radius:var(--r2);padding:34px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;
  background:linear-gradient(135deg,rgba(232,185,74,.14),rgba(110,168,255,.06) 60%,transparent),var(--panel);border:1px solid rgba(232,185,74,.35)}
.toolband h2{margin:8px 0 10px;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.15}
.toolband p{color:var(--mut);margin:0 0 22px}
.tcount{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcount button{appearance:none;cursor:pointer;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);font:inherit;transition:border-color .15s,transform .15s var(--ease)}
.tcount button:hover{border-color:var(--gold);transform:translateY(-2px)}
.tcount b{display:block;font-size:26px;font-weight:800;line-height:1}
.tcount span{display:block;color:var(--mut);font-size:13px;margin-top:6px}

/* CTA + footer */
.cta{text-align:center;padding:72px 0}
.cta h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;margin:0 0 10px}
.cta p{color:var(--mut);max-width:620px;margin:0 auto 24px}
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--dim);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* dialog */
dialog{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none;width:100%;height:100%}
dialog::backdrop{background:rgba(5,7,11,.72);backdrop-filter:blur(4px)}
.dlg{width:min(980px,calc(100vw - 24px));height:min(860px,calc(100dvh - 24px));margin:12px auto;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 40px 120px -20px rgba(0,0,0,.8);overflow:hidden}
dialog[open] .dlg{animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.dh{padding:20px 22px 0;display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.dh h2{margin:4px 0 2px;font-size:24px;letter-spacing:-.02em}
.dh p{margin:0;color:var(--mut);font-size:14px}
.x{appearance:none;border:1px solid var(--line2);background:var(--panel);color:var(--ink);width:38px;height:38px;border-radius:10px;cursor:pointer;flex:none;font-size:20px;line-height:1}
.x:hover{background:var(--panel2)}
.dbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;flex-wrap:wrap}
.tabs button{appearance:none;border:0;background:transparent;color:var(--mut);font:600 13.5px var(--sans);padding:8px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--ink);color:#0b0e14}
.tabs button em{font-style:normal;opacity:.65;margin-left:4px;font-family:var(--mono);font-size:12px}
.search{flex:1 1 200px;min-width:160px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:500 14px var(--sans);padding:10px 12px}
.search::placeholder{color:var(--dim)}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts button{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:10px;font:600 13.5px var(--sans);padding:9px 12px}
.acts button:hover{border-color:var(--gold)}
.acts button.main{background:var(--gold);color:#1a1300;border-color:var(--gold)}
.acts svg{width:16px;height:16px}
.dbody{overflow:auto;padding:8px 22px 26px;flex:1}
.grp{margin-top:22px}
.grp h3{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 4px}
.grp>p{margin:0 0 10px;color:var(--dim);font-size:13.5px}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.it{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.it b{font:600 13.5px var(--mono);color:var(--ink);word-break:break-word}
.it .tg{font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:2px}
.tg.guarded{color:var(--rose);background:rgba(255,122,144,.12)} .tg.self{color:var(--teal);background:rgba(79,209,197,.12)} .tg.ours{color:var(--gold2);background:rgba(232,185,74,.14)} .tg.offt{color:var(--dim);background:rgba(255,255,255,.07)}
.it p{margin:4px 0 0;color:var(--mut);font-size:13.5px;line-height:1.5}
.empty{color:var(--dim);padding:30px 0;text-align:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#0b0e14;font-weight:700;font-size:14px;padding:10px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:all .2s var(--ease);z-index:100}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:48px;gap:32px}
  .sh{grid-template-columns:1fr;gap:10px}
  .g4,.steps{grid-template-columns:repeat(2,1fr)} .g3,.tiers{grid-template-columns:1fr 1fr}
  .arch{grid-template-columns:1fr;gap:18px}
  .hubcore{margin:0}.hubcore::before,.hubcore::after{display:none}
  .toolband{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .g2,.g3,.g4,.steps,.tiers,.items{grid-template-columns:1fr}
  section{padding:48px 0}
  .lead{font-size:17px}
  .top .wrap{padding-top:8px;padding-bottom:8px}
  .seg{width:100%;overflow-x:auto}
  .toolband{padding:22px}
  .dlg{width:100vw;height:100dvh;margin:0;border-radius:0}
  .dh,.dbar,.dbody{padding-left:16px;padding-right:16px}
  .acts{width:100%}.acts button{flex:1;justify-content:center}
}

/* ── background effects (fx.js) · 2026-10-19: 01 shader, 02 turbulence, 17 blueprint, 20 starfield ── */
body{overflow-x:clip}
.fx-host{position:relative;isolation:isolate;overflow:hidden}
canvas.fx-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none}
canvas.fx-nogl{background:radial-gradient(120% 90% at 70% 10%,#3b1d6e,#05030c 70%)}
/* hero: full-bleed shader */
.herox{margin:0 calc(50% - 50vw);padding:0 24px;border-bottom:1px solid var(--line)}
.herox::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,16,.82) 0%,rgba(8,10,16,.55) 55%,rgba(8,10,16,.25)),linear-gradient(180deg,transparent 70%,var(--bg))}
.herox .hero{max-width:1112px;margin:0 auto;padding-bottom:64px}
.herox .stat{background:rgba(16,20,30,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.herox+section{border-top:0}
/* 17 blueprint */
.fx-blueprint{background-color:#0a3274;background-image:linear-gradient(#ffffff1a 1px,transparent 1px),linear-gradient(90deg,#ffffff1a 1px,transparent 1px),linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px;border:1px solid #3d6bc0;border-radius:6px;color:#e8f0ff;position:relative}
.fx-blueprint::after{content:attr(data-sheet);position:absolute;right:14px;bottom:8px;font:600 10px var(--mono);letter-spacing:.2em;color:#ffffffaa}
.fx-blueprint::before{display:none}
.fx-blueprint h4{color:#cfe0ff}
.fx-blueprint .chip{background:transparent;border:1px solid #ffffffcc;border-radius:0;font-family:var(--mono);font-size:13px;color:#fff}
.fx-blueprint .chip small{color:#cfe0ff}
.fx-blueprint .chip i{border-radius:0;background:#fff!important}
.fx-blueprint .hubcore{background:rgba(255,255,255,.06);border:1.5px dashed #fff;border-radius:0;box-shadow:none;font-family:var(--mono)}
.fx-blueprint .hubcore .lock{color:#fff;background:transparent;border:1px solid #fff;border-radius:0}
.fx-blueprint .hubcore li{border-radius:0;border-color:#ffffff66;background:transparent;color:#e8f0ff}
.fx-blueprint .hubcore::before,.fx-blueprint .hubcore::after{background:#fff;height:1px}
/* 02 turbulence smoke */
.fx-smoke{border-radius:var(--r2);padding:28px;background:#0b0a09;border:1px solid #3a2f25}
.fx-smoke>.smk{position:absolute;inset:-10%;z-index:-1;filter:url(#fxSmoke);opacity:.7;pointer-events:none;will-change:transform;animation:smkDrift 40s ease-in-out infinite alternate;
  background:radial-gradient(circle at 25% 20%,#c2410c 0,transparent 38%),radial-gradient(circle at 80% 85%,#7c2d12 0,transparent 45%),radial-gradient(circle at 60% 40%,#92400e 0,transparent 30%)}
.fx-smoke .card{background:rgba(20,12,8,.72);border-color:#3a2f25;backdrop-filter:blur(2px)}
.fx-smoke .card p,.fx-smoke .card li{color:#e7d3c3}
.fx-smoke .guard span{background:rgba(20,12,8,.7);border-color:#4a3a2c;color:#fdba74}
/* 20 starfield */
.fx-stars{background:#05060c}
@media (max-width:640px){.herox{padding:0 16px}.fx-smoke{padding:18px}}
@keyframes smkDrift{from{transform:translate3d(-3%,-2%,0) scale(1.02)}to{transform:translate3d(3%,2%,0) scale(1.06)}}