*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#223}
.top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:18px 8%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.logo{font-size:2rem;font-weight:800}.blue{color:#2563eb}.green{color:#22c55e}
nav a{text-decoration:none;color:#334155;margin-left:22px}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:40px;padding:90px 8%;background:linear-gradient(135deg,#0b1d51,#2563eb,#1d4ed8);color:#fff}
.tag{color:#93c5fd;font-weight:700;letter-spacing:2px}
.hero h1{font-size:3.4rem;margin:.3em 0}.hero h2{font-weight:400;color:#dbeafe}
.hero-card{background:rgba(255,255,255,.12);backdrop-filter:blur(12px);padding:24px;border-radius:18px}
.btn{display:inline-block;padding:14px 24px;background:#22c55e;color:#fff;text-decoration:none;border-radius:8px;margin-right:10px}
.outline{background:transparent;border:1px solid #fff}
section{padding:70px 8%}h2{text-align:center;font-size:2.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{background:#fff;padding:22px;border-radius:16px;box-shadow:0 8px 20px rgba(0,0,0,.08);transition:.3s}
.card:hover{transform:translateY(-6px)}
.alt{background:#eef4ff}.badges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.badges span{background:#0b1d51;color:#fff;padding:10px 16px;border-radius:30px}
.center{text-align:center;font-size:1.1rem;max-width:900px;margin:auto}
footer{background:#08142f;color:#fff;text-align:center;padding:24px}
@media(max-width:900px){.hero{grid-template-columns:1fr}.top{flex-direction:column}.hero h1{font-size:2.5rem}}