:root{
--primary:#0b57d0;--accent:#ffb400;--dark:#111;--light:#fff;--bg:#f5f7fb;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:var(--bg);color:#222;line-height:1.7}
header{position:sticky;top:0;background:rgba(11,87,208,.95);color:#fff;padding:18px;z-index:1000}
nav{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:auto}
nav ul{display:flex;gap:20px;list-style:none}
nav a{text-decoration:none;color:#fff;font-weight:bold;transition:.3s}
nav a:hover{color:var(--accent)}
.hero{padding:80px 20px;background:linear-gradient(135deg,#0b57d0,#4f8cff);color:#fff;text-align:center}
.container{max-width:1100px;margin:auto;padding:30px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 10px 25px rgba(0,0,0,.08);transition:.3s}
.card:hover{transform:translateY(-6px)}
img{width:100%;display:block;border-radius:12px}
h1,h2,h3{margin:16px 0}
p{margin:12px 0}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:12px 22px;border-radius:30px;text-decoration:none}
.btn:hover{background:#0846a8}
footer{background:#111;color:#fff;padding:40px 20px}
@media(max-width:768px){
nav{flex-direction:column;gap:12px}
nav ul{flex-wrap:wrap;justify-content:center}
.hero{padding:50px 16px}
}