:root{--bg:#0b1220;--panel:#0f172a;--muted:#94a3b8;--brand:#06b6d4}
html,body{background:#0b1220;color:#fff;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:#9bdcfe} .muted{color:#cbd5e1}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px}
.badge{background:rgba(6,182,212,.2);border-radius:8px;padding:.15rem .4rem;font-size:.75rem}
.btn{border-radius:14px;padding:.6rem 1rem;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:#fff}
.btn-primary{background:#06b6d4}.btn-primary:hover{background:#0891b2}
.btn-ghost{border:1px solid rgba(255,255,255,.12)}.btn-ghost:hover{background:rgba(255,255,255,.08)}
.reveal{opacity:0;transform:translateY(16px);transition:all .7s ease}
.reveal.in{opacity:1;transform:none}
.soft{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}
header.sticky{position:sticky;top:0;background:rgba(11,18,32,.7);backdrop-filter:blur(8px);z-index:40;border-bottom:1px solid rgba(255,255,255,.08)}
nav a{color:#cbd5e1;text-decoration:none;margin:0 .75rem}nav a:hover{color:#fff}
.footer{border-top:1px solid rgba(255,255,255,.08);color:#94a3b8}
.search{background:#0f172a;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.5rem .75rem;color:#e2e8f0}
.product{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.product img{width:100%;height:170px;object-fit:cover}
.product .title{font-weight:600;margin:.25rem 0}
.price{color:#67e8f9;font-weight:700}