:root {
  --bg: #0b1220;
  --card: #111a2b;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --brand: #60a5fa;
  --accent: #34d399;
  --ring: #3b82f6;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text); background: radial-gradient(1200px 800px at 20% 0%, #0f172a 0, #0b1220 50%, #0b1220 100%);
}
img { max-width: 100%; display: block; height: auto; }
.container { width: min(1100px, 92%); margin: 0 auto; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.small{ font-size:.9rem; color:var(--muted); }

.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 1rem; top: 1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11,18,32,.6); backdrop-filter: blur(6px); border-bottom:1px solid #172033; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; text-decoration:none; color:#fff; }
.nav-list { list-style:none; display:flex; gap:1rem; margin:0; padding:0; }
.nav-list a { color:var(--text); text-decoration:none; padding:.5rem .75rem; border-radius:.5rem; }
.nav-list a:hover { background:#0f1b30; }
.btn-ghost { background:none; border:1px solid #243045; color:#cbd5e1; padding:.45rem .6rem; border-radius:.5rem; display:none; }

.hero { padding: 5rem 0 3rem; background: linear-gradient(180deg, rgba(96,165,250,.15), rgba(52,211,153,.12)); border-bottom:1px solid #142038; }
.hero-inner h1 { font-size: clamp(1.8rem, 1.1rem + 2.5vw, 3rem); margin:.2rem 0 .6rem; }
.hero .search { margin-top:1rem; display:flex; gap:.5rem; }
.hero input[type="search"]{ flex:1; padding:.7rem .9rem; border-radius:.7rem; border:1px solid #1f2a3f; background:#0c1526; color:#e2e8f0; }
.btn-primary { background: linear-gradient(180deg, var(--brand), #2563eb); border:none; color:white; padding:.7rem 1rem; border-radius:.7rem; font-weight:600; cursor:pointer; box-shadow:0 10px 20px rgba(37,99,235,.15); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-outline { background:transparent; border:1px solid #2b3a55; color:#cbd5e1; padding:.6rem .9rem; border-radius:.6rem; cursor:pointer; }

.section { padding: 3rem 0; }
.grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:1rem; }
.cards { margin-top:1rem; }
.cards > article { grid-column: span 12; background: var(--card); border:1px solid #1a263c; border-radius:1rem; overflow:hidden; display:flex; gap:1rem; padding: .8rem; align-items:stretch; }
.cards .meta { display:flex; flex-direction:column; gap:.35rem; }
.tag { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:#cbd5e1; background:#0d1729; border:1px solid #1c2a44; padding:.25rem .5rem; border-radius:.5rem; }
.price { font-weight:800; color:#e5e7eb; }
.stock { color: var(--accent); font-weight:600; }
.kit { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.rating { color:#fbbf24; font-weight:700; }
.like-btn { background:#0d1729; border:1px solid #24334e; color:#cbd5e1; border-radius:.5rem; padding:.35rem .55rem; cursor:pointer; }
.like-btn[aria-pressed="true"]{ outline:2px solid var(--ring); }
.card-img { width: 140px; min-width:140px; height: 140px; border-radius:.7rem; object-fit:cover; border:1px solid #223253; background:#0b1220; }

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.5rem 0 1rem; }
.sort select { background:#0d1729; border:1px solid #24334e; color:#cbd5e1; border-radius:.5rem; padding:.4rem .6rem; }
.filter { display:flex; align-items:center; gap:.5rem; color:#cbd5e1; }

.prose p { color:#cbd5e1; line-height:1.7; }
.testimonials { display:grid; gap:1rem; list-style:none; padding:0; margin:0; }
.testimonials li { background: var(--card); border:1px solid #1a263c; border-radius:1rem; padding:1rem; }

.map-wrap { margin-top:1rem; min-height: 260px; border-radius: .75rem; overflow:hidden; border:1px solid #1d2b46; background:#0c1526; display:flex; align-items:center; justify-content:center; color:#93a4bf; }

.contact-form { display:grid; gap:.8rem; max-width:520px; }
.contact-form label { display:grid; gap:.3rem; }
.contact-form input, .contact-form textarea { background:#0d1729; border:1px solid #24334e; color:#e5e7eb; border-radius:.6rem; padding:.6rem .8rem; }
.form-status { margin-top:.5rem; color: var(--accent); }

.site-footer { border-top:1px solid #142038; padding:2rem 0; text-align:center; }

/* Responsive */
@media (max-width: 900px){
  .cards > article { flex-direction:column; }
  .card-img { width:100%; height:180px; min-width:auto; }
  .nav-list { display:none; position:absolute; right:1rem; top:56px; background:#0b1220; padding:.6rem; border:1px solid #1b2942; border-radius:.7rem; flex-direction:column; }
  .btn-ghost { display:inline-block; }
}