:root{
  --blue:#0b66ff;
  --white:#ffffff;
  --red:#e63946;
  --yellow:#ffcc00;
  --text:#222;
  --maxw:1000px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, Arial, sans-serif;margin:0;color:var(--text);background:#f7f9fc}
.container{max-width:var(--maxw);margin:0 auto;padding:24px}
.site-header{background:linear-gradient(90deg,var(--blue),#5aa6ff);color:var(--white);padding:12px 0}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{height:48px}
.nav a{color:var(--white);margin-left:16px;text-decoration:none;font-weight:600}
.hero{padding:56px 0;background:linear-gradient(180deg, rgba(11,102,255,0.08), transparent);text-align:center}
.hero h1{font-size:36px;margin:0 0 8px}
.hero h2{font-size:22px;margin:0 0 16px;color:#555}
.btn{display:inline-block;padding:10px 18px;background:var(--red);color:var(--white);text-decoration:none;border-radius:10px}
h2{margin-top:0}
ul.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;list-style:none;padding:0;margin:16px 0}
ul.grid li{background:var(--white);padding:12px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.05)}
.site-footer{padding:16px 0;text-align:center;font-size:14px;color:#666}
@media(max-width:700px){
  .site-header .container{flex-direction:column;gap:12px}
  .nav a{margin-left:8px}
}