:root{--c1:#0ea5e9;--c2:#0f172a;--c3:#f8fafc;}
*{box-sizing:border-box}html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
body{margin:0;background:var(--c3);color:#0f172a}
header{background:linear-gradient(90deg,var(--c1),#14b8a6);color:white;padding:22px}
header .wrap,main .wrap,footer .wrap{max-width:1000px;margin:0 auto;padding:0 16px}
nav a{color:#fff;text-decoration:none;margin-right:16px;font-weight:600}
nav a:hover{text-decoration:underline}
.hero{padding:28px 0}
h1{font-size:32px;margin:8px 0 12px}
h2{margin-top:28px}
.btn{display:inline-block;background:#0ea5e9;color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.card{background:#fff;border-radius:12px;padding:18px;margin:18px 0;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
footer{background:#0f172a;color:#cbd5e1;margin-top:40px;padding:20px 0}
small.muted{color:#64748b}