:root{
  --bg:#0f172a; --panel:#121a33; --card:#0b1224; --muted:#94a3b8; --text:#e2e8f0; --accent:#22d3ee;
  --ring:rgba(34,211,238,.25); --border:#1f2a44;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text); background:linear-gradient(180deg,#0b1224,#0f172a);
}
a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding: clamp(14px,3vw,24px)}
.site-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,rgba(11,18,36,.9),rgba(11,18,36,.6));
  backdrop-filter: blur(8px); border-bottom:1px solid var(--border);
}
.header-wrap{display:flex; align-items:center; gap:16px; justify-content:space-between}
.logo{font-weight:900; letter-spacing:.02em; text-decoration:none}
.nav{display:flex; gap:14px; flex-wrap:wrap}
.nav a{text-decoration:none; color:var(--muted)}
.nav a:hover{color:#fff}
.subheader{border-top:1px solid #111a33}
.page-content{min-height:60vh}
.site-footer{border-top:1px solid var(--border); margin-top:40px; background:#0b1224}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.foot-title{font-weight:700; margin-bottom:8px}
.foot-meta{border-top:1px solid var(--border); color:var(--muted); padding-top:12px; margin-top:8px; font-size:13px}

.hero{background:
  radial-gradient(800px 400px at 80% 10%, #22d3ee22, transparent 60%),
  radial-gradient(600px 300px at 10% 80%, #22d3ee18, transparent 55%);
  border-bottom:1px solid var(--border);
}
.hero-wrap{display:grid; grid-template-columns:1fr; min-height:180px}
.hero-text h1{font-size:clamp(28px,5vw,42px); margin:.2em 0}
.hero-actions .btn{margin-top:8px}

.grid.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.card{background:#0b1224; border:1px solid var(--border); border-radius:16px; overflow:hidden; border: 1px solid #eee}
.card-media{display:block; aspect-ratio:1/1; background:#0a0f20; }
.card-media img{width:100%; height:100%; object-fit:cover; display:block}
.card-body{padding:12px}
.card-title{font-size:16px; margin:.2em 0}
.card-meta{display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted)}
.price{ font-weight:700; font-size:1.2rem; color:#666; }
.chip{display:inline-flex; padding:4px 8px; border-radius:999px; background:#0a1328; border:1px solid var(--border); text-decoration:none; font-size:12px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:800;
  background:linear-gradient(90deg,#22d3ee,#60a5fa); color:#0b1224;
  box-shadow:0 6px 18px var(--ring);
}
.btn:hover{filter:saturate(1.2)}

.grid.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.cat{background:#0b1224; border:1px solid var(--border); border-radius:16px; padding:14px}
.muted{color:var(--muted)}
.ids{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.id-pill{display:inline-flex; padding:6px 8px; border:1px dashed var(--border); border-radius:10px; text-decoration:none; color:var(--muted)}
.id-pill:hover{border-style:solid; color:#fff}

.product{display:grid; grid-template-columns:1fr 1.1fr; gap:20px}
@media (max-width: 840px){ .product{grid-template-columns:1fr} }
.product-media{background:#0a0f20; border:1px solid var(--border); border-radius:16px; padding:8px}
.product-media img{max-width:100%; height:auto; display:block; border-radius:10px}
.img-placeholder{height:280px; display:grid; place-items:center; color:var(--muted)}
.product-body h1{margin:.1em 0 .4em}
.price-line{display:flex; align-items:center; gap:10px; margin-bottom:12px}