
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#070b12;color:#eef}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 8%;position:sticky;top:0;background:rgba(7,11,18,.75);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.5rem}.brand img{height:42px}
nav a{color:#ddd;text-decoration:none;margin:0 14px}nav a:hover{color:#63c6ff}
.btn{background:#42bfff;color:#001826;padding:12px 22px;border-radius:10px;text-decoration:none;font-weight:700}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:8%}
.eyebrow{color:#63c6ff;letter-spacing:3px}.hero h1{font-size:4rem;margin:.2em 0}
.logohero{max-width:360px;filter:drop-shadow(0 0 30px #42bfff55)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:0 8% 6%}
.card{background:#111827;border:1px solid #1e3a5f;border-radius:16px;padding:24px}
section{padding:5% 8%}footer{text-align:center;padding:30px;color:#9ab}
@media(max-width:800px){.hero{grid-template-columns:1fr;text-align:center}.hero h1{font-size:2.6rem}.nav{flex-wrap:wrap}}
