/* ===== STOREBIGTECH — premium dark theme ===== */
:root{
  --ink:#08080a;
  --panel:#0f0f13;
  --panel2:#15151b;
  --line:rgba(255,255,255,.08);
  --txt:#f4f4f6;
  --muted:#9a9aa6;
  --a1:#6d5efc;
  --a2:#00d4ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:'Inter',system-ui,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Sora','Inter',sans-serif;letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}

/* gradient text + accents */
.grad{background:linear-gradient(100deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.glow{box-shadow:0 0 0 1px var(--line),0 24px 60px -20px rgba(109,94,252,.35)}

/* ambient background blobs */
.bg-fx{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-fx::before,.bg-fx::after{content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(120px);opacity:.22}
.bg-fx::before{background:var(--a1);top:-20vw;left:-10vw}
.bg-fx::after{background:var(--a2);bottom:-25vw;right:-15vw;opacity:.15}

/* glass card */
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(8px)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;
  font-weight:600;font-size:.95rem;transition:.2s transform,.2s box-shadow,.2s opacity;cursor:pointer;border:none}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(100deg,var(--a1),var(--a2));color:#06060a;
  box-shadow:0 14px 34px -12px rgba(0,212,255,.6)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--txt);border:1px solid var(--line)}

/* product card */
.prod{display:flex;flex-direction:column;overflow:hidden;transition:.25s transform,.25s box-shadow}
.prod:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(109,94,252,.5)}
.prod .ph{aspect-ratio:4/3;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:3.4rem;
  background:radial-gradient(120% 120% at 30% 20%,rgba(109,94,252,.35),transparent 60%),var(--panel2)}
.ph img,.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;background:#fff}
.pimg{position:relative;overflow:hidden}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px}
.badge-new{background:rgba(0,212,255,.15);color:#7fe9ff;border:1px solid rgba(0,212,255,.3)}
.badge-ref{background:rgba(255,176,32,.14);color:#ffcf7a;border:1px solid rgba(255,176,32,.3)}
.price{font-family:'Sora',sans-serif;font-weight:700}
.old{color:var(--muted);text-decoration:line-through;font-size:.9rem}
.save{color:#67e8a3;font-weight:600;font-size:.85rem}

/* nav */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(8,8,10,.7);border-bottom:1px solid var(--line)}
.nav a.link{color:var(--muted);font-size:.92rem;font-weight:500;transition:.15s}
.nav a.link:hover,.nav a.link.active{color:var(--txt)}
.logo{font-family:'Sora';font-weight:800;font-size:1.15rem;letter-spacing:-.02em}

/* sections */
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--a2);font-weight:700}
.muted{color:var(--muted)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* grid helpers */
.grid{display:grid;gap:20px}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
footer{border-top:1px solid var(--line);background:var(--panel)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:.9rem;cursor:pointer;transition:.15s;white-space:nowrap}
.chip:hover,.chip.active{background:linear-gradient(100deg,var(--a1),var(--a2));color:#06060a;border-color:transparent}

/* иконки */
.ic{display:inline-block;vertical-align:middle;flex:none}
.ph-ico{color:#8983ff;opacity:.85}
.cat-card{padding:22px;text-align:center;display:block;transition:.2s transform}
.cat-card:hover{transform:translateY(-4px)}
.cat-ic{display:inline-flex;color:var(--a2)}
.tile-ic{color:var(--a2)}
[data-icon]{display:inline-flex;align-items:center;justify-content:center}