
:root{--blue:#2563eb;--light:#f8fafc;--card:#ffffff;--text:#1e293b}
body{margin:0;font-family:Arial;background:var(--light);color:var(--text)}
a{text-decoration:none;color:var(--blue)}
.topbar{background:#e0edff;padding:10px;font-size:14px}
.header{background:white;box-shadow:0 2px 10px rgba(0,0,0,.05);position:sticky;top:0}
.container{width:min(1120px,92vw);margin:auto}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center}
.logo{background:var(--blue);color:white;border-radius:10px;padding:10px 12px;font-weight:bold}
.tag{color:#475569;font-size:12px;margin-top:2px}
.hero{background:#eff6ff;padding:46px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}
.card{background:white;padding:18px;border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.06)}
.section{padding:44px 0}
.alt{background:#f1f5f9}
.btn{display:inline-block;margin-top:10px;padding:12px 16px;border-radius:12px;font-weight:bold}
.primary{background:var(--blue);color:white}
.float{position:fixed;right:20px;bottom:20px;background:#25D366;color:#fff;padding:14px 18px;border-radius:999px;font-weight:bold}
footer{text-align:center;padding:18px;background:#e0edff}
button{margin-top:10px;padding:10px 14px;border:none;border-radius:10px;background:#dbeafe;color:#1e40af;font-weight:bold;cursor:pointer}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
