:root{--p:#2563eb;--d:#0f172a;--a:#06b6d4;--bg:#f8fafc}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:#222}
header{background:#fff;position:sticky;top:0;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.wrap{width:min(1150px,92%);margin:auto}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
nav a{text-decoration:none;color:#333;margin-left:18px;font-weight:600}
.hero{padding:90px 0;background:linear-gradient(135deg,var(--d),var(--p));color:#fff}
.hero h1{font-size:3rem}.btn{display:inline-block;margin-top:20px;padding:14px 26px;background:var(--a);color:#fff;text-decoration:none;border-radius:30px}
.sec{padding:70px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{background:#fff;padding:24px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
footer{background:var(--d);color:#fff;padding:35px 0;margin-top:40px}
h2{margin-bottom:20px}.banner{background:#e8f0ff;padding:60px 0;text-align:center}