:root {
  --brand: #0066cc;
  --brand-dark: #004c99;
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #666666;
}
body {margin:0;font-family:'Segoe UI',sans-serif;background:var(--bg);color:var(--text);}
header{background:var(--brand);color:#fff;padding:10px 0;position:sticky;top:0;z-index:1000;}
header .container{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 16px;}
header a{color:#fff;text-decoration:none;margin:0 10px;font-weight:600;}
header a:hover{text-decoration:underline;}
.hero{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:white;text-align:center;padding:80px 16px;}
.hero h1{font-size:40px;margin-bottom:10px;}
.hero p{font-size:18px;max-width:700px;margin:auto;}
.section{padding:60px 16px;max-width:1200px;margin:auto;}
.section h2{text-align:center;color:var(--brand);margin-bottom:30px;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.card{border:1px solid #ddd;border-radius:8px;padding:20px;background:#f9f9f9;}
.card h3{color:var(--brand);}
footer{background:var(--brand-dark);color:white;text-align:center;padding:30px 10px;margin-top:40px;}
form input,form textarea{width:100%;padding:10px;margin:8px 0;border-radius:6px;border:1px solid #ccc;}
form button{background:var(--brand);color:white;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;}
form button:hover{background:var(--brand-dark);}