:root{--bg:#050816;--text:#111827;--card:#f5f7fb}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);line-height:1.7}
header{background:#050816;color:white;padding:20px 8%;display:flex;justify-content:space-between;align-items:center}
nav a{color:white;text-decoration:none;margin-left:22px;font-size:15px}
.hero{background:#050816;color:white;text-align:center;padding:120px 20px}
.hero h1{font-size:64px;line-height:1.1;margin:0 0 20px}
.hero p{font-size:22px}
.button{display:inline-block;margin-top:30px;padding:15px 38px;border-radius:40px;background:white;color:#050816;text-decoration:none;font-weight:700}
.container{max-width:1200px;margin:auto;padding:80px 24px}
.dark{background:#050816;color:white;max-width:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.card{padding:30px;border-radius:22px;background:var(--card)}
.dark .card{background:#111827}
h1,h2{letter-spacing:-1px}h2{font-size:42px}
footer{background:#050816;color:#aaa;text-align:center;padding:45px}
@media(max-width:700px){.hero h1{font-size:40px}header{flex-direction:column}nav{margin-top:15px}}