:root{--bg:#0b0d10;--fg:#e8eaed;--muted:#9aa0a6;--accent:#4f8cff;--card:#14171c;--border:#22262c}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 6vw;border-bottom:1px solid var(--border)}
.logo{font-weight:700;font-size:20px}
nav a{color:var(--muted);text-decoration:none;margin-left:28px;font-size:14px}
nav a:hover{color:var(--fg)}
.hero{padding:96px 6vw 64px;max-width:760px}
.hero h1{font-size:44px;line-height:1.15;margin-bottom:20px}
.hero p{color:var(--muted);font-size:18px;margin-bottom:32px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 24px;border-radius:8px;text-decoration:none;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:0 6vw 96px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px}
.card h3{margin-bottom:8px;font-size:17px}
.card p{color:var(--muted);font-size:14px}
footer{border-top:1px solid var(--border);padding:32px 6vw;color:var(--muted);font-size:13px;display:flex;justify-content:space-between}