:root{
  --bg: #0b1116;
  --surface: #101725;
  --ink: #e9eef9;
  --ink-muted: #a3b0c8;
  --brand: #29ffc6;
  --accent: #20e3b2;
  --line: #1c2436;
  --radius: 14px;
  --shadow: 0 10px 28px rgba(0,0,0,.35);
  --w: 980px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 900px at 12% 8%, #0e1526, var(--bg)) fixed;
  color: var(--ink);
  font: 16px/1.65 system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  text-rendering: optimizeLegibility;
}
.container{max-width: var(--w); margin: 0 auto; padding: 28px 18px 48px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:10px;height:28px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--accent));
  box-shadow:var(--shadow);
}
.brand-name{font-weight:900; font-size:18px; letter-spacing:.3px; text-transform:uppercase}
.badge{background:#0f182b; border:1px solid var(--line); padding:8px 12px; border-radius:999px; color:var(--ink-muted); font-weight:700}

.hero{margin-top:22px; padding:22px 22px 18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow)}
h1{font-size: clamp(28px,3.2vw,46px); line-height:1.08; margin: 0 0 6px; font-weight:900; letter-spacing:.2px}
h1 .site{background-image: linear-gradient(135deg, var(--brand), var(--accent));
         -webkit-background-clip: text; background-clip: text; color: transparent}
.lead{color:var(--ink-muted); margin:8px 0 12px}
.small{color:var(--ink-muted); font-size:12px}

.cta{
  display:inline-block; margin-top:12px; padding:12px 16px; font-weight:800; letter-spacing:.2px;
  border-radius:12px; text-decoration:none; color:#0b0f14;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  box-shadow: var(--shadow);
}
.cta:focus{outline:2px solid #fff3; outline-offset:2px}

.toc{margin: 18px 0 6px; padding: 14px 16px; border:1px dashed var(--line); border-radius: 12px; background:#0f172a}
.toc strong{display:block; margin-bottom:6px}
.toc a{color: var(--ink); text-decoration: none}
.toc a:hover{text-decoration: underline; text-underline-offset: 3px}

.section{margin: 18px 0; padding: 16px 18px; background: #0f1628; border:1px solid var(--line); border-radius: var(--radius)}
.section h2{font-size:22px; margin: 4px 0 8px}
.section h3{font-size:18px; margin: 10px 0 6px}
ul{margin:0; padding-left: 18px}
li{margin:4px 0}
.note{border-left:3px solid var(--brand); padding:10px 12px; background:#0e1526; color:var(--ink-muted); border-radius: 6px}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width: 860px){ .grid2, .grid3{ grid-template-columns: 1fr } }

hr{border:none; border-top:1px solid var(--line); margin: 20px 0}
footer{margin-top: 28px; padding-top: 12px; border-top:1px solid var(--line); color: var(--ink-muted); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
footer nav a{color:inherit; text-decoration: underline; text-underline-offset: 3px}