:root{
  --bg:#0A0A0B;--panel:#141416;--line:rgba(255,255,255,.06);--line-strong:rgba(255,255,255,.12);
  --text:#F5F5F7;--muted:#A1A1A8;--subtle:#6A6A72;
  --accent:#2E5BFF;--accent-hover:#244FE0;
  --green:#35C793;--red:#F0616D;--yellow:#F5A524;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Space Grotesk",var(--font-body);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--text);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent)}
h1,h2,h3{font-family:var(--font-display);font-weight:600}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

header.top{border-bottom:1px solid var(--line);background:rgba(10,10,11,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--font-display);font-size:20px;letter-spacing:-.025em;color:var(--text)}
.brand:hover{color:var(--text)}
.brand .c{font-weight:500}
.brand .d{color:var(--accent)}
.brand .h{font-weight:700;letter-spacing:.025em}
nav a{margin-left:20px;color:var(--muted);font-size:14px}
nav a:hover{color:var(--text)}

.hero{padding:104px 0 80px;position:relative}
.hero::before{content:"";position:absolute;left:50%;top:-40px;width:680px;height:340px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(46,91,255,.16),transparent);pointer-events:none;z-index:-1}
.hero h1{font-size:clamp(34px,6vw,56px);line-height:1.08;margin:0 0 20px;letter-spacing:-.03em;font-weight:700}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{color:var(--muted);font-size:18px;max-width:640px;margin:0 0 32px}

.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:12px 22px;border-radius:12px;border:1px solid transparent;transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent-hover);color:#fff}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--text);margin-left:10px}
.btn.ghost:hover{background:rgba(255,255,255,.04);color:var(--text)}

section{padding:64px 0;border-top:1px solid var(--line)}
section h2{font-size:28px;margin:0 0 10px;letter-spacing:-.02em}
section .lead{color:var(--muted);margin:0 0 32px;max-width:680px}
section .lead a{color:var(--accent)}
section .lead a:hover{color:var(--accent-hover)}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;transition:border-color .2s}
.card:hover{border-color:var(--line-strong)}
.card h3{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:15px}
.step{display:inline-block;color:var(--accent);background:rgba(46,91,255,.12);border-radius:999px;padding:2px 10px;font-weight:600;font-size:12px;letter-spacing:.04em;margin-bottom:14px}

table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;font-size:15px}
th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--subtle);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
td{color:var(--muted)}
tr:last-child td{border-bottom:0}
code{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:13px;color:var(--text);word-break:break-all}

main.doc{padding:56px 0 80px}
main.doc h1{font-size:36px;margin:0 0 6px;letter-spacing:-.03em}
main.doc .meta{color:var(--subtle);font-size:14px;margin-bottom:32px}
main.doc h2{font-size:21px;margin:36px 0 8px;letter-spacing:-.01em}
main.doc p,main.doc li{color:var(--muted)}
main.doc strong{color:var(--text);font-weight:600}
main.doc a{color:var(--accent)}
main.doc a:hover{color:var(--accent-hover)}
main.doc ul,main.doc ol{padding-left:22px}

.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:16px;padding:16px 20px;margin:20px 0;color:var(--muted)}
.note a{color:var(--accent)}

footer{border-top:1px solid var(--line);padding:32px 0;color:var(--subtle);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
footer a{color:var(--muted);margin-right:16px}
footer a:hover{color:var(--text)}

@media (max-width:600px){
  nav a{margin-left:14px}
  .hero{padding:72px 0 56px}
  .btn.ghost{margin-left:0;margin-top:10px}
  th,td{padding:12px 14px}
}