:root { --bg:#0f172a; --fg:#e5e7eb; --muted:#94a3b8; --brand:#22d3ee; --card:#111827; }
*{box-sizing:border-box} body{margin:0;font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--fg); background:linear-gradient(180deg,#0b1220 0%, #0f172a 60%, #111827 100%);}
.container{max-width:1100px;margin:auto;padding:0 20px}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:800;font-size:22px;letter-spacing:.3px}
.logo span{color:var(--brand)}
nav a{color:var(--fg);text-decoration:none;margin-left:18px;opacity:.85}
nav a:hover{opacity:1}
.hero{padding:80px 0 40px}
.hero h1{font-size:44px;line-height:1.15;margin:0 0 10px}
.hero h1 span{color:var(--brand)}
.hero p{color:var(--muted);margin:0 0 22px}
.cta{display:inline-block;background:var(--brand);color:#032028;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.section{padding:40px 0}
.section h2{margin:0 0 16px;font-size:26px}
.cards{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0;margin:0}
.cards li{background:var(--card);border:1px solid #1f2937;border-radius:14px;padding:16px}
.cards h3{margin:0 0 6px;font-size:18px}
.cards p{margin:0;color:var(--muted)}
.footer{padding:30px 0;color:var(--muted);border-top:1px dashed #243041;margin-top:30px}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)} .hero h1{font-size:34px}}
@media(max-width:560px){.cards{grid-template-columns:1fr} .hero{padding-top:60px}}