:root { --bg: #0b0f14; --fg: #e6eef7; --muted:#8aa0b5; --brand:#55d6ff; --accent:#8affc1; --card:#121821; --border:#1b2430; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.4px}
.tag{font-size:.8rem;color:var(--muted);}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--brand);border-radius:12px}
.btn:hover{background:rgba(85,214,255,.1)}
.hero{display:grid;gap:16px;padding:54px 0 36px}
.hero h1{font-size:clamp(32px,6vw,56px);margin:0}
.hero p{color:var(--muted);max-width:70ch;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px}
.card{background:var(--card);border:1px solid var(--border);padding:18px;border-radius:16px}
.code{background:#0a0e13;border:1px solid var(--border);padding:14px;border-radius:12px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92rem}
.footer{margin-top:42px;padding:22px 0;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem;text-align:center}
.badge{background:#07141b;border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--brand);font-size:.85rem}
.hl{color:var(--accent)}
pre{margin:0}