:root { --bg:#040d18; --bg-soft:#071523; --card:#0a1c2e; --text:#e8ffff; --muted:rgba(196,237,247,.72); --faint:rgba(150,210,225,.52); --accent:#2ef4b2; --border:rgba(46,244,178,.2); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; line-height:1.7; }
a { color:var(--accent); }
code,pre { font-family:"Cascadia Code","JetBrains Mono",monospace; }
.site-nav { border-bottom:1px solid var(--border); background:rgba(4,13,24,.95); position:sticky; top:0; z-index:10; }
.site-nav-inner { max-width:1080px; margin:auto; min-height:60px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { color:var(--accent); font-weight:900; letter-spacing:.08em; text-decoration:none; }
.nav-links { display:flex; gap:20px; align-items:center; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:.9rem; }
.nav-links a:hover { color:var(--accent); }
.hero { background:radial-gradient(circle at 75% 20%,rgba(46,244,178,.12),transparent 35%),linear-gradient(180deg,var(--bg-soft),var(--bg)); border-bottom:1px solid rgba(95,248,255,.09); }
.hero-inner,.content,.related,.footer-inner { max-width:920px; margin:auto; padding-left:24px; padding-right:24px; }
.hero-inner { padding-top:84px; padding-bottom:76px; }
.eyebrow { color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1 { max-width:780px; font-size:clamp(2.45rem,7vw,4.8rem); line-height:1.04; letter-spacing:-.035em; margin:14px 0 22px; }
.lede { max-width:720px; color:var(--muted); font-size:1.18rem; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.button { display:inline-block; padding:11px 18px; border-radius:8px; border:1px solid var(--border); font-weight:750; text-decoration:none; }
.button.primary { color:#04120e; background:var(--accent); border-color:var(--accent); }
.button.secondary { color:var(--accent); background:rgba(46,244,178,.06); }
.content { padding-top:64px; padding-bottom:42px; }
.content h2 { font-size:clamp(1.7rem,4vw,2.35rem); line-height:1.18; margin:60px 0 16px; }
.content h3 { font-size:1.22rem; margin:34px 0 10px; }
.content p,.content li { color:var(--muted); }
.content strong { color:var(--text); }
.content li { margin:8px 0; }
.callout { padding:22px 24px; margin:30px 0; background:var(--card); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; }
.callout p:first-child { margin-top:0; } .callout p:last-child { margin-bottom:0; }
pre { overflow-x:auto; padding:22px; color:#c7fff0; background:#020810; border:1px solid rgba(95,248,255,.14); border-radius:10px; line-height:1.55; }
.steps { counter-reset:steps; list-style:none; padding:0; }
.steps li { counter-increment:steps; position:relative; padding:4px 0 18px 48px; }
.steps li::before { content:counter(steps); position:absolute; left:0; top:2px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#04120e; background:var(--accent); font-weight:900; }
.related { padding-top:30px; padding-bottom:70px; }
.related h2 { font-size:1.55rem; }
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.card { padding:22px; color:var(--text); background:var(--card); border:1px solid var(--border); border-radius:10px; text-decoration:none; }
.card span { display:block; margin-top:6px; color:var(--faint); font-size:.9rem; }
footer { border-top:1px solid var(--border); }
.footer-inner { padding-top:28px; padding-bottom:36px; color:var(--faint); font-size:.86rem; display:flex; justify-content:space-between; gap:20px; }
@media (max-width:650px) { .nav-links a:not(:last-child){display:none}.hero-inner{padding-top:58px;padding-bottom:54px}.card-grid{grid-template-columns:1fr}.footer-inner{display:block} }