@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Syne:wght@700;800;900&display=swap');

:root {
  --blue:#2563eb; --blue2:#60a5fa; --blue3:#1d4ed8; --blue4:#93c5fd;
  --bg:#03030a; --s1:#080810; --s2:#0e0f1a; --s3:#141527;
  --b1:rgba(255,255,255,0.045); --b2:rgba(96,165,250,0.2); --b3:rgba(96,165,250,0.07);
  --accent:#f0f0ff; --text-dim:rgba(240,240,255,0.3); --text-mid:rgba(240,240,255,0.55);
  --nav-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--accent);
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
  cursor:none;
}

/* ── CUSTOM CURSOR ── */
#y-cursor{
  position:fixed;width:9px;height:9px;
  background:var(--blue2);border-radius:50%;
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .15s,height .15s,background .2s;
  mix-blend-mode:screen;
}
#y-cursor-ring{
  position:fixed;width:36px;height:36px;
  border:1px solid rgba(96,165,250,0.45);border-radius:50%;
  pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:border-color .3s;
}
#y-cursor.hover{width:18px;height:18px;background:var(--blue4)}
#y-cursor-ring.hover{border-color:rgba(96,165,250,0.85)}

/* ── THREE.JS CANVAS ── */
#threejs-canvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;z-index:0;
  opacity:1;
  display:block;
}

/* ── NOISE ── */
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.026;pointer-events:none;z-index:9998;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:var(--blue3);border-radius:2px}

/* ═══════════════ PAGES ═══════════════ */
.page{display:none;min-height:100vh;position:relative;z-index:1;padding-top:90px;background:transparent}
.page.active{display:block;animation:pageIn .55s cubic-bezier(.22,1,.36,1) forwards}
#home.active{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:0;background:transparent}
@keyframes pageIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════ HERO ═══════════════ */
.hero-section{
  position:relative;width:100%;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:transparent;
}

/* Grid overlay */
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(96,165,250,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,0.03) 1px,transparent 1px);
  background-size:55px 55px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 0%,transparent 100%);
  pointer-events:none;
  animation:grid-drift 20s ease-in-out infinite;
}
@keyframes grid-drift{
  0%,100%{background-position:0 0}
  50%{background-position:27px 27px}
}

/* Ambient orbs */
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px)}
.orb-1{width:600px;height:600px;top:-15%;left:-20%;background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 70%);animation:orb-drift1 14s ease-in-out infinite}
.orb-2{width:500px;height:500px;bottom:-10%;right:-15%;background:radial-gradient(circle,rgba(96,165,250,0.09) 0%,transparent 70%);animation:orb-drift2 17s ease-in-out infinite}
.orb-3{width:400px;height:400px;top:35%;left:45%;background:radial-gradient(circle,rgba(37,99,235,0.06) 0%,transparent 70%);animation:orb-drift3 22s ease-in-out infinite}
.orb-4{width:300px;height:300px;top:20%;right:20%;background:radial-gradient(circle,rgba(96,165,250,0.05) 0%,transparent 70%);animation:orb-drift2 19s ease-in-out infinite 3s}
@keyframes orb-drift1{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-20px,35px)}}
@keyframes orb-drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,-40px)}}
@keyframes orb-drift3{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-28px)}}

/* HERO MARQUEE */
.hero-marquee{
  position:absolute;bottom:13%;left:0;right:0;overflow:hidden;
  height:28px;
  border-top:1px solid rgba(96,165,250,0.07);
  border-bottom:1px solid rgba(96,165,250,0.07);
  z-index:2;
}
.hero-marquee-inner{
  display:flex;gap:0;white-space:nowrap;
  animation:marquee 22s linear infinite;
}
.hero-marquee-inner span{
  font-size:9px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(96,165,250,0.35);padding:8px 22px;
}
.hero-marquee-inner span b{color:rgba(96,165,250,0.65);font-weight:900}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HERO CONTENT */
.hero-content{
  position:relative;z-index:3;text-align:center;
  padding:0 24px;max-width:900px;width:100%;
}

/* PILL TAG */
.pill-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(37,99,235,0.08);
  border:1px solid rgba(96,165,250,0.28);
  border-radius:100px;padding:5px 16px 5px 8px;
  margin-bottom:28px;
  animation:fadeUp .8s .1s both;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.pill-icon{width:20px;height:20px;background:rgba(96,165,250,0.12);border-radius:50%;display:flex;align-items:center;justify-content:center}
.pill-dot{
  width:6px;height:6px;background:var(--blue2);border-radius:50%;
  animation:blink 2.2s infinite;
  box-shadow:0 0 6px rgba(96,165,250,0.9);
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.pill-tag span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#93c5fd}

/* ── HERO TITLE ── */
.htitle{
  font-family:'Syne',sans-serif;font-weight:900;text-transform:uppercase;
  line-height:.84;letter-spacing:-.055em;
}

/* "yiza" — blanc pur, glow chaud */
.htitle-l1 {
  display: block;
  font-size: clamp(4rem, 20vw, 12rem);
  color: #ffffff;
  animation: fadeUp .9s .2s both;
  text-shadow:
    0 0 60px rgba(96, 165, 250, 0.5),
    0 0 120px rgba(37, 99, 235, 0.3),
    0 2px 0 rgba(0, 0, 0, 0.8);
}

/* "DARK" — was 0.45 opacity → monté à 0.85 + stroke renforcé */
.htitle-l2 {
  display: block;
  font-size: clamp(4rem, 20vw, 12rem);
  color: rgba(255, 255, 255, 0.85);
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
  text-shadow:
    0 0 80px rgba(96, 165, 250, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.6);
  animation: fadeUp .9s .32s both;
}

/* "SHOP/" — dégradé lumineux, inchangé (déjà bien visible) */
.htitle-l3 {
  display: block;
  font-size: clamp(2rem, 10vw, 7rem);
  background: linear-gradient(125deg, #7cc4ff 0%, #ffffff 38%, #a8d8ff 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0px;
  filter: drop-shadow(0 0 30px rgba(96, 165, 250, 0.6));
  animation: fadeUp .9s .44s both, gradient-shift 7s ease-in-out infinite alternate;
}

/* Sous-titre — taille augmentée, opacité montée */
.hero-sub {
  font-size: 11px;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.88);
  margin-top: 20px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.95);
  animation: fadeUp .9s .56s both;
}

/* Pill tag — inchangé (déjà lisible) */
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.22);
  border: 1px solid rgba(96, 165, 250, 0.6);
  border-radius: 100px;
  padding: 5px 16px 5px 8px;
  margin-bottom: 28px;
  animation: fadeUp .8s .1s both;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pill-tag span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #d0e8ff;
}

/* Marquee — opacité montée, taille augmentée */
.hero-marquee-inner span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(200, 225, 255, 0.75);
  padding: 8px 22px;
}
.hero-marquee-inner span b {
  color: rgba(180, 215, 255, 0.95);
  font-weight: 900;
}

/* Stats bar — inchangée (déjà bien) */
.stats-bar {
  width: 100%;
  background: rgba(3, 3, 10, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(96, 165, 250, 0.18);
  border-bottom: 1px solid rgba(96, 165, 250, 0.18);
  padding: 22px 0;
  position: relative;
  z-index: 2;
}
.stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.04em;
  display: block;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.4);
}

/* Stat label — taille et opacité revues */
.stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(200, 225, 255, 0.80);
  display: block;
  margin-top: 3px;
}

/* Section titre — inchangé (déjà bien) */
.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -.03em;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}
.section-title em {
  color: #60a5fa;
  font-style: italic;
  text-shadow: 0 0 40px rgba(96, 165, 250, 0.5), 0 2px 20px rgba(0, 0, 0, 0.8);
}

/* Section label — taille augmentée, mieux visible */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 12px;
  text-shadow: 0 0 24px rgba(96, 165, 250, 0.7);
}
.section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #93c5fd;
}

/* Bestsellers wrapper */
.home-bestsellers {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 70px 16px 90px;
  position: relative;
  z-index: 2;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 24px;
  font-size: .95rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
  letter-spacing: .04em;
}

.btn-primary {
  background: #2563eb;
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.4);
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  z-index: 3;
}

.scroll-mouse {
  width: 22px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}

.scroll-wheel {
  width: 4px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  animation: scrollWheel 1.4s ease-in-out infinite;
}

.scroll-label {
  letter-spacing: .26em;
}

@keyframes scrollWheel {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(6px); opacity: 1; }
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 16px 0;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.cat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
  overflow-x: auto;
  padding-bottom: 4px;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Noms produits — blanc net, inchangé */
.pname {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color .2s;
}
.pname a { color: inherit; text-decoration: none; }
.pname:hover,
.pname a:hover { color: #7cc4ff; }

/* Prix — inchangé */
.pprice {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -.02em;
  text-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

/* Cat pills — bien visibles */
.cat-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(220, 235, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all .25s;
  background: rgba(10, 10, 30, 0.70);
  white-space: nowrap;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
}
.cat-pill:hover,
.cat-pill.active {
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.7);
  background: rgba(37, 99, 235, 0.22);
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.2);
}

/* ═══════════════ PRODUCT CARDS ═══════════════ */
.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}

.pcard{
  background:rgba(8,8,16,0.7);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:22px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .45s;
  opacity:0;transform:translateY(32px);
  position:relative;
}
.pcard:nth-child(1) { animation-delay: .1s; }
.pcard:nth-child(2) { animation-delay: .2s; }
.pcard:nth-child(3) { animation-delay: .3s; }
.pcard:nth-child(4) { animation-delay: .4s; }
.pcard:nth-child(5) { animation-delay: .5s; }
.pcard:nth-child(6) { animation-delay: .6s; }
.pcard.visible{animation:cardIn .65s cubic-bezier(.22,1,.36,1) forwards}
.pcard.highlight{
  border-color:rgba(96,165,250,0.1);
  background:rgba(8,8,22,0.75);
}
@keyframes cardIn{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}

.pcard::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(96,165,250,0.04) 0%,transparent 60%);
  opacity:0;transition:opacity .4s;pointer-events:none;border-radius:22px;
}
.pcard:hover{
  transform:translateY(-8px) scale(1.005);
  border-color:rgba(96,165,250,0.3);
  box-shadow:0 40px 80px rgba(0,0,0,0.6),0 0 40px rgba(37,99,235,0.06);
}
.pcard:hover::after{opacity:1}

/* BADGE */
.badge-hot{
  position:absolute;top:12px;left:12px;z-index:5;
  background:var(--blue);color:#fff;
  font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
  box-shadow:0 4px 18px rgba(37,99,235,0.45);
}

/* PRODUCT IMAGE */
.pimg{
  aspect-ratio:3/4;background:var(--s2);
  position:relative;overflow:hidden;display:block;
}
.product-img-main,.product-img-hover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .65s ease,transform .7s ease;
}
.product-img-hover{opacity:0}
.pimg:hover .product-img-hover{opacity:1}
.pimg:hover .product-img-main{opacity:0;transform:scale(1.07)}

.pimg-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
}
.pimg-placeholder svg{opacity:.055}
.pimg-placeholder span{font-size:8px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,0.09)}

/* OVERLAY */
.poverlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 65%);
  opacity:0;display:flex;align-items:flex-end;justify-content:center;
  padding:16px;transition:opacity .3s;
}
.pcard:hover .poverlay{opacity:1}
.poverlay-btn{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,0.96);color:#000;
  padding:10px 22px;border-radius:10px;border:none;cursor:pointer;
  transform:translateY(14px);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.pcard:hover .poverlay-btn{transform:translateY(0)}

/* PRODUCT INFO */
.pinfo{padding:16px 16px 0;flex:1}
.pname{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(240,240,255,0.85);
  margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;transition:color .2s;
}
.pname:hover,.pname a:hover{color:var(--blue2)}
.pname a{color:inherit;text-decoration:none}

.pcard-footer{
  padding:12px 16px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.pprice{
  font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:900;
  color:#fff;letter-spacing:-.02em;
}

/* STOCK BADGES */
.pstock{
  font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;display:inline-block;
}
.pstock.in-stock{background:rgba(74,222,128,0.08);color:#4ade80}
.pstock.low-stock{background:rgba(251,146,60,0.08);color:#fb923c}
.pstock.out-stock{background:rgba(239,68,68,0.08);color:#f87171}

.btn-add{
  padding:9px 16px;background:var(--blue);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  border-radius:10px;text-align:center;text-decoration:none;
  transition:all .25s;border:none;flex-shrink:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn-add:hover{background:var(--blue3);box-shadow:0 10px 28px rgba(37,99,235,0.5);transform:translateY(-1px)}
.btn-add.disabled{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.3);cursor:not-allowed}
.btn-add.disabled:hover{transform:none;box-shadow:none}

/* EMPTY STATE */
.empty-state{
  text-align:center;padding:70px 0;
  font-size:11px;letter-spacing:.6em;text-transform:uppercase;
  color:rgba(240,240,255,0.1);grid-column:1/-1;
}

/* ═══════════════ FEATURED BANNER ═══════════════ */
.featured-banner{
  width:100%;max-width:1300px;margin:0 auto 80px;padding:0 16px;
}
.banner-inner{
  background:linear-gradient(135deg,rgba(37,99,235,0.1) 0%,rgba(96,165,250,0.05) 50%,rgba(37,99,235,0.08) 100%);
  border:1px solid rgba(96,165,250,0.16);
  border-radius:28px;padding:48px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  position:relative;overflow:hidden;flex-wrap:wrap;
}
.banner-inner::before{
  content:'';position:absolute;top:-60%;right:-8%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(96,165,250,0.06) 0%,transparent 70%);
  border-radius:50%;animation:banner-pulse 9s ease-in-out infinite alternate;
}
@keyframes banner-pulse{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.15)}}
.banner-inner::after{
  content:'';position:absolute;bottom:-40%;left:-5%;
  width:250px;height:250px;
  background:radial-gradient(circle,rgba(37,99,235,0.04) 0%,transparent 70%);
  border-radius:50%;
}
.banner-text .section-label{margin-bottom:8px}
.banner-title{
  font-family:'Syne',sans-serif;font-size:clamp(1.6rem,4.5vw,3rem);
  font-weight:900;text-transform:uppercase;letter-spacing:-.035em;
  color:#fff;margin-bottom:10px;line-height:1;
}
.banner-title span{color:var(--blue2)}
.banner-desc{font-size:13px;color:var(--text-mid);max-width:350px;line-height:1.65}
.banner-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ═══════════════ CATEGORY PAGES ═══════════════ */
.catalog{padding:32px 16px 70px;max-width:1300px;margin:0 auto}
.cat-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:38px;flex-wrap:wrap;gap:12px;
  border-bottom:1px solid var(--b1);padding-bottom:18px;
}
.cat-h{
  font-family:'Syne',sans-serif;font-weight:900;
  font-size:clamp(2.5rem,9vw,5.5rem);
  text-transform:uppercase;font-style:italic;
  line-height:1;letter-spacing:-.04em;
}
.cat-h span{color:var(--blue2)}
.cat-count{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-dim);padding-bottom:4px;
}

/* ═══════════════ FOOTER ═══════════════ */
footer{
  border-top:1px solid var(--b1);padding:60px 16px 36px;
  position:relative;z-index:10;background:var(--s1);
}
.footer-inner{
  max-width:1300px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:56px;
}
.footer-logo{
  font-family:'Syne',sans-serif;font-size:2rem;font-weight:900;
  color:#fff;letter-spacing:-.05em;margin-bottom:12px;cursor:pointer;
  display:flex;align-items:center;
}
.footer-tagline{font-size:12px;color:var(--text-dim);line-height:1.65;max-width:210px}
.footer-col-title{
  font-size:8px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:18px;
}
.footer-links-col{display:flex;flex-direction:column;gap:13px}
.footer-links-col a{
  font-size:13px;font-weight:500;
  color:rgba(240,240,255,0.4);text-decoration:none;transition:color .2s;
}
.footer-links-col a:hover{color:#fff}
.footer-bottom{
  max-width:1300px;margin:44px auto 0;
  padding-top:24px;border-top:1px solid var(--b1);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.copyright{font-size:10px;color:rgba(240,240,255,0.18);letter-spacing:.08em}
.footer-social{display:flex;gap:10px}
.social-btn{
  width:36px;height:36px;border:1px solid var(--b1);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.social-btn:hover{border-color:var(--b2);background:var(--b3)}
.social-btn svg{width:14px;height:14px;stroke:var(--text-dim);stroke-width:1.8;fill:none;transition:stroke .2s}
.social-btn:hover svg{stroke:var(--blue2)}

/* ═══════════════ TOAST ═══════════════ */
.y-toast{
  position:fixed;bottom:20px;right:16px;left:16px;
  background:rgba(8,8,16,0.96);
  border:1px solid rgba(96,165,250,0.22);color:#fff;
  padding:14px 18px;border-radius:18px;font-size:12px;font-weight:700;
  z-index:9999;transform:translateY(110px);opacity:0;
  transition:all .5s cubic-bezier(.22,1,.36,1);
  backdrop-filter:blur(24px);display:flex;align-items:center;gap:10px;
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
}
.y-toast.show{transform:translateY(0);opacity:1}
.y-toast-icon{
  width:28px;height:28px;background:rgba(96,165,250,0.1);
  border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.y-toast-icon svg{width:13px;height:13px;stroke:var(--blue2);stroke-width:2;fill:none}
.page {
  background: transparent !important;
}

#home.active {
  background: transparent !important;
}
#threejs-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1 !important;
  display: block !important;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:768px){
  .page{padding-top:max(80px,calc(env(safe-area-inset-top) + 70px))}
  #home.active{padding-top:0}
  .hero-btns{flex-direction:column;width:100%;max-width:280px;margin-left:auto;margin-right:auto}
  .btn-primary,.btn-ghost{width:100%;text-align:center}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .banner-inner{flex-direction:column;padding:28px 20px;text-align:center}
  .banner-desc{max-width:100%}
  .banner-actions{justify-content:center}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .footer-logo{grid-column:1/-1}
  .catalog{padding:20px 12px 55px}
  .home-bestsellers{padding:50px 12px 70px}
}
@media(max-width:480px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .pcard{border-radius:18px}
  .pinfo{padding:12px 12px 0}
  .pcard-footer{padding:10px 12px 14px}
  .pname{font-size:11px}
  .pprice{font-size:.95rem}
  .btn-add{padding:8px 10px;font-size:8px}
  .footer-inner{grid-template-columns:1fr;gap:28px}
}
@supports(padding:max(0px)){
  footer{padding-bottom:max(36px,env(safe-area-inset-bottom))}
  .y-toast{bottom:max(16px,env(safe-area-inset-bottom))}
}