:root{--navy:#0F172A;--cobalt:#1E40AF;--slate:#334155;--white:#F8FAFC;--green:#16A34A}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--slate);background:var(--white)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--navy);color:#fff}
.nav a{color:#fff;text-decoration:none;margin:0 8px;opacity:.9} .nav a:hover{opacity:1}
.brand{font-weight:700}
.container{max-width:1000px;margin:0 auto;padding:24px}
.hero{padding:40px 0}
.hero .accent{color:var(--cobalt)}
.sub{opacity:.85}
.btn{display:inline-block;padding:10px 14px;border:1px solid var(--slate);border-radius:10px;text-decoration:none;color:var(--slate);margin-right:10px}
.btn.primary{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.banner{margin-top:10px;font-size:.9rem;color:#0a0;opacity:.9}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.list{line-height:1.9}
.list.tight li{margin:2px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{border:1px solid #e5e7eb;border-radius:12px;padding:16px;background:#fff}
.price{font-size:1.4rem;font-weight:700}
.foot{padding:20px;background:#0b1022;color:#cbd5e1;text-align:center}
input,button{padding:10px;border-radius:8px;border:1px solid #cbd5e1}
.code{background:#0b1022;color:#e2e8f0;padding:12px;border-radius:10px;overflow:auto}