:root{
  --primary:#0d4ea2;
  --accent:#0d6efd;
  --muted:#666;
  --bg:#ffffff;
}
body{font-family:Inter, Arial, sans-serif; margin:0; color:#222; background:var(--bg);}
.header{display:flex;align-items:center;gap:20px;padding:18px 32px;border-bottom:1px solid #eee;}
.header img.logo{height:56px;}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center;}
.hero{background:linear-gradient(180deg,#e8f2ff,#cfe4ff);padding:60px 32px;text-align:left;}
.hero h1{font-size:42px;margin:0 0 12px;color:var(--primary);}
.hero p{color:var(--muted);margin:0 0 18px;}
.btn{background:var(--accent);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;}
.container{max-width:1100px;margin:30px auto;padding:0 20px;}
.cards{display:flex;gap:18px;flex-wrap:wrap;}
.card{flex:1 1 30%;background:#fff;border:1px solid #eee;padding:18px;border-radius:8px;min-width:220px;}
.card h3{margin-top:0;color:var(--primary);}
.section-title{font-size:28px;color:var(--primary);margin-bottom:12px;}
.footer{background:#f8f9fb;padding:20px 32px;text-align:center;color:#666;border-top:1px solid #eee;}
@media(max-width:800px){.cards{flex-direction:column;} .hero h1{font-size:28px}}