:root { --bg:#060810; --card:#0D1117; --blue:#00D4FF; --green:#39FF14; --text:#F5F7FA; --muted:#A7B0BF; --line:rgba(0,212,255,.18); }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Space Grotesk',sans-serif; line-height:1.7; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px); background-size:72px 72px; }
.container { max-width:920px; margin:0 auto; padding:0 24px; }
header { display:flex; justify-content:space-between; align-items:center; padding:28px 0; }
.logo { color:var(--text); font-size:21px; font-weight:800; text-decoration:none; }
.logo span { color:var(--blue); }
nav { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
nav a,.link { color:var(--blue); text-decoration:none; }
nav a { border:1px solid rgba(0,212,255,.3); border-radius:7px; padding:7px 13px; font-size:14px; font-weight:700; }
nav a:hover,.link:hover { color:var(--green); }
.hero { padding:64px 0 58px; border-bottom:1px solid rgba(255,255,255,.08); }
.eyebrow { display:inline-block; color:var(--blue); border:1px solid rgba(0,212,255,.35); border-radius:999px; padding:5px 14px; margin-bottom:20px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:820px; margin:0 0 20px; font-size:clamp(38px,6vw,66px); line-height:1.08; letter-spacing:-.04em; }
h1 span { color:var(--blue); }
.dek { max-width:700px; color:var(--muted); font-size:19px; }
main { padding-bottom:40px; }
section { padding:54px 0; border-bottom:1px solid rgba(255,255,255,.08); }
h2 { margin:0 0 16px; font-size:clamp(27px,4vw,40px); line-height:1.15; }
h3 { margin:0 0 8px; font-size:20px; }
p { margin:0 0 16px; }
.muted { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }
.card { background:linear-gradient(150deg,rgba(13,17,23,.97),rgba(11,22,28,.92)); border:1px solid var(--line); border-radius:14px; padding:24px; }
.card p,.card li { color:var(--muted); font-size:15px; }
.card ul { padding-left:20px; margin:12px 0 0; }
.steps { display:grid; gap:14px; margin-top:24px; counter-reset:step; }
.step { display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:start; }
.step::before { counter-increment:step; content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#001015; background:var(--green); font-weight:800; }
.step p { color:var(--muted); }
.callout { background:rgba(57,255,20,.05); border:1px solid rgba(57,255,20,.23); border-radius:14px; padding:24px; margin-top:28px; }
.callout strong { color:var(--green); }
.share-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.share-link { color:var(--text); border:1px solid rgba(255,255,255,.15); border-radius:7px; padding:8px 12px; text-decoration:none; font-size:14px; font-weight:700; }
.share-link:hover { color:var(--blue); border-color:rgba(0,212,255,.45); }
.cta { text-align:center; background:radial-gradient(circle at 50% 0,rgba(0,212,255,.12),transparent 60%); }
.btn { display:inline-block; color:#001015; background:var(--blue); border-radius:8px; padding:14px 23px; font-weight:800; text-decoration:none; }
.btn:hover { box-shadow:0 10px 34px rgba(0,212,255,.28); transform:translateY(-1px); }
footer { color:#738094; padding:28px 0 42px; font-size:14px; }
footer .links { display:flex; gap:18px; flex-wrap:wrap; margin-top:9px; }
@media (max-width:680px) { header { align-items:flex-start; gap:16px; } .grid { grid-template-columns:1fr; } .hero { padding-top:42px; } .step { grid-template-columns:34px 1fr; gap:12px; } }