:root{--blue:#0057B8;--dark:#111;--text:#1B1B1B}
*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
.container{max-width:1100px;margin:0 auto;padding:24px}
.hero{background:linear-gradient(180deg,#0b1a33, #0b1a33 55%, #fff 55%);color:#fff}
.hero .logo{width:160px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25));}
.hero h1{margin:18px 0 0;font-size:40px;font-weight:800}
.hero h1 span{display:block;font-size:18px;font-weight:600;opacity:.9}
.tagline{opacity:.9;margin-top:8px}
.cta{display:inline-block;margin-top:18px;background:var(--blue);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:700}
.features h2,.pricing h2{color:var(--dark)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.grid div{background:#f6f8fb;border:1px solid #e6e9ef;border-radius:12px;padding:16px}
.pricing ul{list-style: none;padding:0;display:grid;gap:10px}
.pricing li{background:#f6f8fb;border:1px solid #e6e9ef;border-radius:12px;padding:12px}
footer{background:#fafafa;border-top:1px solid #eee;color:#444}
footer a{color:var(--blue);text-decoration:none}
@media (max-width:640px){.hero h1{font-size:28px}.hero .logo{width:120px}}