/* ═══════════════════════════════════════════════════════════════════
   TEXTILES MARKET DZ — QUANTUM COTTON UNIVERSE
   Sci-Fi × Cotton | Deep Space × Fiber | Holographic × Luxury
   Loaded AFTER inline <style> — overrides all base variables
═══════════════════════════════════════════════════════════════════ */

/* ── QUANTUM COLOR SYSTEM ──────────────────────────────────────── */
:root {
  /* Void backgrounds */
  --bg:      #02040E;
  --bg2:     #040816;
  --bg3:     #010208;
  --dark:    #02040E;
  --dark2:   #050A1A;
  --dark3:   #030710;

  /* Card surfaces — translucent holographic glass */
  --card-bg: rgba(8,14,40,.92);
  --card2:   rgba(5,9,26,.88);

  /* Text */
  --text:    #D8ECFF;
  --muted:   #4A6A8A;
  --muted2:  #1A2A40;

  /* ── Warm neon gold — prices & primary CTA ── */
  --gold:    #FFD060;
  --gold2:   #FFAA20;
  --gold3:   #FF8C00;

  /* ── Quantum neon accent palette ── */
  --neon:    #00D9FF;
  --neon2:   #0088CC;
  --plasma:  #8B3FFF;
  --plasma2: #5B18CC;
  --fiber:   #C8E8FF;

  /* ── Status ── */
  --green:   #00FFB3;
  --danger:  #FF3D6B;
  --blue:    #1A8FFF;
  --warn:    #FFB830;

  /* ── Borders & FX ── */
  --border:  rgba(0,217,255,.10);
  --border2: rgba(0,217,255,.22);
  --shadow:  0 32px 90px rgba(0,0,0,.95);
  --glow:    0 0 40px rgba(0,217,255,.18);
  --glow2:   0 0 80px rgba(0,217,255,.32);
  --glow-gold: 0 0 40px rgba(255,208,96,.28);
  --r16: 16px;
  --r24: 22px;
}

/* ── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,var(--neon),var(--plasma)); border-radius: 4px; }

/* ── BASE ──────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  background-image: none !important;
}

/* ── NEBULA BACKGROUND ─────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 15% 12%, rgba(0,100,220,.07) 0%, transparent 58%),
    radial-gradient(ellipse 55% 65% at 85% 80%, rgba(139,63,255,.06) 0%, transparent 52%),
    radial-gradient(ellipse 45% 35% at 60% 30%, rgba(0,217,255,.04) 0%, transparent 48%),
    radial-gradient(ellipse 70% 45% at 5%  85%, rgba(0,80,180,.05)  0%, transparent 55%),
    radial-gradient(ellipse 35% 40% at 90% 20%, rgba(139,63,255,.04) 0%, transparent 50%);
  animation: nebula-breathe 22s ease-in-out infinite alternate;
}
@keyframes nebula-breathe {
  0%   { opacity: .7;  transform: scale(1)    rotate(0deg); }
  50%  { opacity: 1;   transform: scale(1.04) rotate(.8deg); }
  100% { opacity: .75; transform: scale(.97)  rotate(-.6deg); }
}

/* ── SCANLINES ─────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.06) 3px,
    rgba(0,0,0,.06) 4px
  );
}

/* ── PARTICLES ─────────────────────────────────────────────────── */
#particles-canvas { opacity: .75 !important; }

/* ── LOADER ────────────────────────────────────────────────────── */
#loader {
  background: var(--bg) !important;
  position: fixed !important;
}
#loader::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(0,180,255,.06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(139,63,255,.05) 0%, transparent 55%);
}
.loader-emblem {
  font-size: 1.6rem !important;
  background: linear-gradient(135deg, var(--neon), var(--plasma)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: .12em !important;
  filter: drop-shadow(0 0 18px rgba(0,217,255,.6)) !important;
  animation: loader-pulse 1.8s ease-in-out infinite !important;
}
@keyframes loader-pulse {
  0%,100% { opacity:.9; filter:drop-shadow(0 0 18px rgba(0,217,255,.6)); }
  50% { opacity:1; filter:drop-shadow(0 0 36px rgba(139,63,255,.9)); }
}
.loader-bar {
  background: rgba(0,217,255,.08) !important;
  border: 1px solid rgba(0,217,255,.15) !important;
  border-radius: 4px !important;
  height: 3px !important;
  width: 160px !important;
}
.loader-fill {
  background: linear-gradient(90deg, var(--neon), var(--plasma)) !important;
  box-shadow: 0 0 12px rgba(0,217,255,.6) !important;
}

/* ── NAVBAR ────────────────────────────────────────────────────── */
nav {
  background: rgba(2,4,14,.82) !important;
  backdrop-filter: blur(32px) saturate(2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(2) !important;
  border-bottom: 1px solid rgba(0,217,255,.10) !important;
  box-shadow: 0 0 0 0 transparent, 0 4px 40px rgba(0,0,0,.6) !important;
}
nav::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 8%; right: 8% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,217,255,.4), rgba(139,63,255,.3), transparent) !important;
  animation: nav-beam 6s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes nav-beam {
  0%,100% { opacity:.5; transform: scaleX(.8); }
  50% { opacity:1; transform: scaleX(1); }
}
nav.scrolled {
  background: rgba(2,4,14,.97) !important;
  border-bottom-color: rgba(0,217,255,.16) !important;
  box-shadow: 0 6px 50px rgba(0,0,0,.8), 0 0 20px rgba(0,217,255,.04) !important;
}

.logo-mark {
  background: linear-gradient(135deg, var(--neon), var(--plasma)) !important;
  box-shadow: 0 0 20px rgba(0,217,255,.55), 0 4px 16px rgba(0,0,0,.5) !important;
  animation: logo-glow 3.5s ease-in-out infinite !important;
  border-radius: 10px !important;
}
@keyframes logo-glow {
  0%,100% { box-shadow: 0 0 20px rgba(0,217,255,.55), 0 4px 16px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 0 40px rgba(0,217,255,.9), 0 0 20px rgba(139,63,255,.5), 0 4px 16px rgba(0,0,0,.5); }
}
.logo-name {
  background: linear-gradient(90deg, var(--neon), var(--plasma)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(0,217,255,.4)) !important;
}
.nav-link { color: var(--muted) !important; }
.nav-link:hover { color: var(--neon) !important; text-shadow: 0 0 12px rgba(0,217,255,.6) !important; }
.nav-pill {
  color: var(--danger) !important;
  background: rgba(255,61,107,.08) !important;
  border-color: rgba(255,61,107,.22) !important;
}
.lang-toggle {
  background: rgba(0,217,255,.04) !important;
  border-color: rgba(0,217,255,.15) !important;
}
.lang-btn { color: var(--muted) !important; }
.lang-btn.active {
  background: linear-gradient(135deg, var(--neon), var(--neon2)) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 14px rgba(0,217,255,.5) !important;
}
#scroll-progress {
  background: linear-gradient(90deg, var(--neon), var(--plasma), var(--neon)) !important;
  box-shadow: 0 0 8px rgba(0,217,255,.6) !important;
  height: 2px !important;
}

/* ── HERO ──────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse 75% 85% at 68% 38%, rgba(0,100,220,.08) 0%, transparent 58%),
    radial-gradient(ellipse 55% 65% at 15% 82%, rgba(139,63,255,.07) 0%, transparent 52%)
  !important;
}
.hero-orb1 {
  background: radial-gradient(circle, rgba(0,160,255,.07) 0%, transparent 68%) !important;
  animation: orb-drift 10s ease-in-out infinite !important;
}
.hero-orb2 {
  background: radial-gradient(circle, rgba(139,63,255,.05) 0%, transparent 68%) !important;
  animation: orb-drift 15s ease-in-out infinite reverse !important;
}

.hero-eyebrow {
  background: rgba(0,217,255,.06) !important;
  border-color: rgba(0,217,255,.22) !important;
  color: var(--neon) !important;
  text-shadow: 0 0 10px rgba(0,217,255,.4) !important;
}
.hero-h1 .accent {
  background: linear-gradient(100deg, var(--gold), var(--gold3)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 16px rgba(255,208,96,.5)) !important;
}
.hero-h1 .accent2 {
  color: var(--neon) !important;
  text-shadow: 0 0 20px rgba(0,217,255,.6) !important;
}
.hero-desc { color: var(--muted) !important; }
.trust-chip { color: var(--muted) !important; }
.trust-chip .dot { color: var(--green) !important; filter: drop-shadow(0 0 4px var(--green)) !important; }

.hero-visual {
  position: relative !important;
}
/* Holographic rings around product */
.hero-visual::before {
  content: '' !important;
  position: absolute !important;
  inset: -18px !important;
  border-radius: 48px !important;
  border: 1px solid rgba(0,217,255,.14) !important;
  animation: holo-ring1 5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.hero-visual::after {
  content: '' !important;
  position: absolute !important;
  inset: -36px !important;
  border-radius: 64px !important;
  border: 1px solid rgba(139,63,255,.08) !important;
  animation: holo-ring2 8s ease-in-out infinite reverse !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@keyframes holo-ring1 {
  0%,100% { transform: scale(1)    rotate(0deg);  opacity:.5; }
  50%      { transform: scale(1.02) rotate(1.5deg); opacity:1; }
}
@keyframes holo-ring2 {
  0%,100% { transform: scale(1)    rotate(0deg);  opacity:.25; }
  50%      { transform: scale(1.04) rotate(-2deg); opacity:.6; }
}
.hero-img {
  border-radius: 28px !important;
  box-shadow:
    0 50px 120px rgba(0,0,0,.90),
    0 0 0 1px rgba(0,217,255,.15),
    0 0 80px rgba(0,217,255,.08) !important;
  filter: saturate(1.15) contrast(1.06) !important;
  position: relative !important;
  z-index: 1 !important;
}
.hero-frame {
  border: 1px solid rgba(0,217,255,.14) !important;
  border-radius: 36px !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
/* Scanning light on hero image */
.hero-frame::after {
  content: '' !important;
  position: absolute !important;
  top: -5% !important; left: 0 !important; right: 0 !important;
  height: 80px !important;
  background: linear-gradient(180deg,
    transparent,
    rgba(0,217,255,.04) 40%,
    rgba(0,217,255,.06) 50%,
    rgba(0,217,255,.04) 60%,
    transparent
  ) !important;
  animation: hero-scan 5s linear infinite !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
@keyframes hero-scan {
  0%   { top: -10%; }
  100% { top: 110%; }
}
.hero-price-card {
  background: rgba(4,8,28,.94) !important;
  border: 1px solid rgba(0,217,255,.28) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.7), 0 0 20px rgba(0,217,255,.08) !important;
  backdrop-filter: blur(20px) !important;
  z-index: 3 !important;
}
.hpc-label { color: var(--neon) !important; font-size: .6rem !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.hpc-price {
  background: linear-gradient(90deg, var(--gold), var(--gold2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(255,208,96,.5)) !important;
}
.hero-badge-float {
  background: linear-gradient(135deg, #C00030, var(--danger)) !important;
  box-shadow: 0 6px 24px rgba(255,61,107,.45), 0 0 12px rgba(255,61,107,.3) !important;
  z-index: 3 !important;
}

/* ── CTA BUTTONS ───────────────────────────────────────────────── */
.btn-gold {
  background: linear-gradient(135deg, #D07800, var(--gold), #D07800) !important;
  background-size: 200% 100% !important;
  color: #040810 !important;
  box-shadow: 0 8px 32px rgba(255,208,96,.32), 0 0 0 1px rgba(255,208,96,.12), inset 0 1px 0 rgba(255,255,255,.12) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
  animation: btn-gold-shift 4s linear infinite !important;
}
@keyframes btn-gold-shift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.btn-gold:hover {
  box-shadow: 0 16px 55px rgba(255,208,96,.55), 0 0 30px rgba(255,208,96,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: translateY(-4px) scale(1.02) !important;
}
.btn-ghost {
  border-color: rgba(0,217,255,.28) !important;
  color: var(--neon) !important;
  text-shadow: 0 0 10px rgba(0,217,255,.4) !important;
}
.btn-ghost:hover {
  background: rgba(0,217,255,.06) !important;
  border-color: rgba(0,217,255,.5) !important;
  box-shadow: 0 0 20px rgba(0,217,255,.15) !important;
}

/* ── URGENCY BAR ───────────────────────────────────────────────── */
.urgency-bar {
  background: linear-gradient(90deg,
    rgba(2,4,14,1) 0%,
    rgba(80,0,20,.9) 20%,
    rgba(180,0,50,.7) 40%,
    rgba(255,61,107,.5) 50%,
    rgba(180,0,50,.7) 60%,
    rgba(80,0,20,.9) 80%,
    rgba(2,4,14,1) 100%
  ) !important;
  border-top: 1px solid rgba(255,61,107,.18) !important;
  border-bottom: 1px solid rgba(255,61,107,.18) !important;
}
.cd-box { background: rgba(0,0,0,.5) !important; border: 1px solid rgba(255,61,107,.2) !important; }
.cd-num { text-shadow: 0 0 10px rgba(255,61,107,.6) !important; }

/* ── MARQUEE ───────────────────────────────────────────────────── */
.marquee-wrap {
  background: linear-gradient(90deg,
    rgba(2,4,14,1) 0%,
    rgba(0,30,60,.9) 12%,
    rgba(0,100,180,.65) 35%,
    rgba(0,217,255,.5) 50%,
    rgba(0,100,180,.65) 65%,
    rgba(0,30,60,.9) 88%,
    rgba(2,4,14,1) 100%
  ) !important;
  border-top: 1px solid rgba(0,217,255,.18) !important;
  border-bottom: 1px solid rgba(0,217,255,.18) !important;
  position: relative !important;
  overflow: hidden !important;
}
.marquee-item { color: rgba(220,240,255,.9) !important; font-size: .76rem !important; letter-spacing: .02em !important; }

/* ── SECTION FRAMEWORK ─────────────────────────────────────────── */
section { position: relative !important; z-index: 1 !important; }
.sec-tag {
  background: rgba(0,217,255,.06) !important;
  border-color: rgba(0,217,255,.20) !important;
  color: var(--neon) !important;
  text-shadow: 0 0 10px rgba(0,217,255,.4) !important;
  letter-spacing: .06em !important;
}
.sec-title {
  color: var(--text) !important;
  text-shadow: 0 0 40px rgba(0,217,255,.08) !important;
}
.sec-sub { color: var(--muted) !important; }

/* Section separator lines */
section + section::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 10%; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,217,255,.12), rgba(139,63,255,.10), transparent) !important;
  pointer-events: none !important;
}

/* ── PRODUCT CARDS — HOLOGRAPHIC FLOATING ──────────────────────── */
.prod-card {
  background: linear-gradient(148deg, rgba(8,15,42,.92) 0%, rgba(4,8,26,.97) 100%) !important;
  border: 1px solid rgba(0,217,255,.13) !important;
  border-radius: 22px !important;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .3s !important;
}
/* HUD top-right corner */
.prod-card::before {
  content: '' !important;
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  width: 18px !important; height: 18px !important;
  border-top: 1.5px solid var(--neon) !important;
  border-right: 1.5px solid var(--neon) !important;
  border-radius: 0 8px 0 0 !important;
  z-index: 5 !important;
  opacity: .4 !important;
  transition: opacity .3s, box-shadow .3s !important;
  pointer-events: none !important;
}
/* HUD bottom-left corner */
.prod-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important; left: 8px !important;
  width: 18px !important; height: 18px !important;
  border-bottom: 1.5px solid var(--plasma) !important;
  border-left: 1.5px solid var(--plasma) !important;
  border-radius: 0 0 0 8px !important;
  z-index: 5 !important;
  opacity: .4 !important;
  transition: opacity .3s !important;
  pointer-events: none !important;
}
.prod-card:hover {
  transform: translateY(-14px) !important;
  border-color: rgba(0,217,255,.32) !important;
  box-shadow:
    0 50px 110px rgba(0,0,0,.88),
    0 0 0 1px rgba(0,217,255,.22),
    0 0 50px rgba(0,217,255,.12),
    inset 0 0 50px rgba(0,217,255,.03) !important;
}
.prod-card:hover::before { opacity: 1 !important; box-shadow: 0 0 8px rgba(0,217,255,.5) !important; }
.prod-card:hover::after  { opacity: 1 !important; box-shadow: 0 0 8px rgba(139,63,255,.5) !important; }
.prod-card:hover .prod-img-wrap img { transform: scale(1.07) !important; filter: saturate(1.1) !important; }

/* Image area — holographic projection */
.prod-img-wrap { overflow: hidden !important; position: relative !important; }
.prod-img-wrap::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(2,4,14,.55) 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.prod-sweep {
  background: linear-gradient(110deg, transparent 25%, rgba(0,217,255,.08) 50%, transparent 75%) !important;
  background-size: 200% 100% !important;
  animation: holo-sweep 3.5s ease infinite !important;
  z-index: 2 !important;
}
@keyframes holo-sweep {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Badges */
.pb.hot  { background: linear-gradient(135deg, #CC0030, var(--danger)) !important; box-shadow: 0 4px 16px rgba(255,61,107,.45) !important; }
.pb.best { background: linear-gradient(135deg, #A06000, var(--gold)) !important; color: var(--bg) !important; box-shadow: 0 4px 16px rgba(255,208,96,.4) !important; }
.pb.new  { background: linear-gradient(135deg, var(--neon2), var(--neon)) !important; color: var(--bg) !important; box-shadow: 0 4px 16px rgba(0,217,255,.4) !important; }

.prod-stock-chip { background: rgba(2,4,14,.9) !important; color: var(--danger) !important; border: 1px solid rgba(255,61,107,.25) !important; }
.prod-wish:hover, .prod-wish.active { background: rgba(255,61,107,.12) !important; border-color: rgba(255,61,107,.3) !important; }
.prod-brand {
  background: rgba(0,217,255,.06) !important;
  border-color: rgba(0,217,255,.16) !important;
  color: var(--neon) !important;
}
.prod-name { color: var(--text) !important; }
.prod-tagline { color: var(--muted) !important; }
.price-now {
  background: linear-gradient(90deg, var(--gold), var(--gold2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 8px rgba(255,208,96,.4)) !important;
}
.price-pct  { background: rgba(255,61,107,.12) !important; color: var(--danger) !important; }
.price-save { background: rgba(0,255,179,.08) !important; color: var(--green) !important; }
.size-chip  { border-color: rgba(0,217,255,.14) !important; color: var(--muted) !important; }

.btn-buy {
  background: linear-gradient(135deg, #C07000, var(--gold), #C07000) !important;
  background-size: 200% 100% !important;
  color: #040810 !important;
  box-shadow: 0 6px 22px rgba(255,208,96,.25), inset 0 1px 0 rgba(255,255,255,.1) !important;
  font-weight: 800 !important;
  transition: all .28s cubic-bezier(.16,1,.3,1) !important;
}
.btn-buy:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(255,208,96,.50), 0 0 20px rgba(255,208,96,.15) !important;
  background-position: 100% 50% !important;
}

/* ── PRODUCTS SECTION ──────────────────────────────────────────── */
#products {
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(0,80,180,.05) 0%, transparent 60%)
  !important;
}
.filter-row { justify-content: center !important; }
.ftab {
  border-color: rgba(0,217,255,.12) !important;
  color: var(--muted) !important;
  background: rgba(0,217,255,.02) !important;
  transition: all .22s !important;
}
.ftab:hover { border-color: rgba(0,217,255,.35) !important; color: var(--neon) !important; box-shadow: 0 0 12px rgba(0,217,255,.1) !important; }
.ftab.active {
  background: linear-gradient(135deg, rgba(0,120,200,.6), rgba(0,180,255,.4)) !important;
  border-color: rgba(0,217,255,.5) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(0,217,255,.2) !important;
}

/* ── HOW TO ORDER ──────────────────────────────────────────────── */
.steps-wrap {
  background: linear-gradient(180deg, rgba(0,100,200,.04), rgba(139,63,255,.02)) !important;
  border-top-color: rgba(0,217,255,.10) !important;
  border-bottom-color: rgba(0,217,255,.10) !important;
}
.step-circle {
  background: linear-gradient(135deg, var(--neon), var(--plasma)) !important;
  color: var(--bg) !important;
  box-shadow: 0 0 24px rgba(0,217,255,.45), 0 6px 20px rgba(0,0,0,.5) !important;
}
.step-name { color: var(--text) !important; }
.step-info { color: var(--muted) !important; }

/* ── STATS ─────────────────────────────────────────────────────── */
.stat-box {
  background: linear-gradient(148deg, rgba(8,15,42,.90), rgba(4,8,26,.95)) !important;
  border: 1px solid rgba(0,217,255,.10) !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
}
.stat-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 10%; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--neon), transparent) !important;
  opacity: .35 !important;
}
.stat-box:hover { box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 30px rgba(0,217,255,.10) !important; }
.stat-num {
  background: linear-gradient(90deg, var(--gold), var(--gold2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(255,208,96,.35)) !important;
}
.stat-lbl { color: var(--muted) !important; }

/* ── BRANDS ────────────────────────────────────────────────────── */
.brands-pills { gap: .7rem !important; }
.brand-pill {
  background: rgba(8,15,42,.8) !important;
  border-color: rgba(0,217,255,.12) !important;
  color: var(--neon) !important;
  transition: all .22s !important;
}
.brand-pill:hover {
  background: rgba(0,217,255,.06) !important;
  box-shadow: 0 0 18px rgba(0,217,255,.15) !important;
  border-color: rgba(0,217,255,.3) !important;
}
.brand-card {
  background: linear-gradient(148deg, rgba(8,15,42,.92), rgba(4,8,26,.97)) !important;
  border: 1px solid rgba(0,217,255,.10) !important;
  border-radius: 22px !important;
  position: relative !important;
  overflow: hidden !important;
}
.brand-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--neon), var(--plasma), transparent) !important;
  opacity: .5 !important;
}
.brand-card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(0,217,255,.25) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.75), 0 0 30px rgba(0,217,255,.10) !important;
}
.bc-name {
  background: linear-gradient(90deg, var(--neon), var(--plasma)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.bc-badge {
  background: rgba(0,255,179,.06) !important;
  border-color: rgba(0,255,179,.18) !important;
  color: var(--green) !important;
}

/* ── FEATURES ──────────────────────────────────────────────────── */
.feat-card {
  background: linear-gradient(148deg, rgba(8,15,42,.90), rgba(4,8,26,.95)) !important;
  border: 1px solid rgba(0,217,255,.10) !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
}
.feat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, var(--neon), var(--plasma), transparent) !important;
  opacity: .4 !important;
}
.feat-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(0,217,255,.22) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.72), 0 0 30px rgba(0,217,255,.09) !important;
}
.feat-title { color: var(--text) !important; }
.feat-desc  { color: var(--muted) !important; }

/* ── GIFT / CTA BANNER ─────────────────────────────────────────── */
.gift-box {
  background: linear-gradient(148deg, rgba(8,15,42,.92), rgba(4,8,26,.97)) !important;
  border: 1px solid rgba(0,217,255,.14) !important;
  border-radius: 26px !important;
}
.gift-box::before {
  background: radial-gradient(circle, rgba(0,217,255,.07), transparent 70%) !important;
}
.gift-box::after {
  background: radial-gradient(circle, rgba(139,63,255,.05), transparent 70%) !important;
}
.gift-title .g {
  background: linear-gradient(90deg, var(--gold), var(--gold2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gift-tag {
  background: rgba(0,217,255,.06) !important;
  border-color: rgba(0,217,255,.14) !important;
  color: var(--neon) !important;
}

/* ── REVIEWS ───────────────────────────────────────────────────── */
.rev-card {
  background: linear-gradient(148deg, rgba(8,15,42,.88), rgba(4,8,26,.93)) !important;
  border: 1px solid rgba(0,217,255,.08) !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
}
.rev-card::before {
  content: '◉' !important;
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  font-size: 7px !important;
  color: var(--green) !important;
  filter: drop-shadow(0 0 4px var(--green)) !important;
  animation: blink 2.5s ease infinite !important;
}
.rev-card:hover {
  border-color: rgba(0,217,255,.18) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.65), 0 0 22px rgba(0,217,255,.07) !important;
  transform: translateY(-5px) !important;
}
.rev-avatar {
  background: linear-gradient(135deg, var(--neon), var(--plasma)) !important;
  box-shadow: 0 0 18px rgba(0,217,255,.3) !important;
  color: var(--bg) !important;
}
.rev-name { color: var(--text) !important; }
.rev-loc  { color: var(--muted) !important; }
.stars { color: var(--gold) !important; filter: drop-shadow(0 0 4px rgba(255,208,96,.4)) !important; }
.verified-chip { background: rgba(0,255,179,.06) !important; color: var(--green) !important; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-item {
  background: rgba(8,15,42,.6) !important;
  border-color: rgba(0,217,255,.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.faq-item.open {
  border-color: rgba(0,217,255,.22) !important;
  box-shadow: 0 8px 35px rgba(0,0,0,.5), 0 0 18px rgba(0,217,255,.06) !important;
}
.faq-q:hover { background: rgba(0,217,255,.04) !important; }
.faq-q { color: var(--text) !important; }
.faq-arrow { color: var(--neon) !important; }
.faq-a { color: var(--muted) !important; }

/* ── QUALITY SECTION ───────────────────────────────────────────── */
.qm-bar {
  background: rgba(0,217,255,.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.qm-fill {
  background: linear-gradient(90deg, var(--neon), var(--plasma)) !important;
  box-shadow: 0 0 8px rgba(0,217,255,.3) !important;
  border-radius: 6px !important;
  transition: width 1.2s cubic-bezier(.16,1,.3,1) !important;
}
.qc {
  background: linear-gradient(148deg, rgba(8,15,42,.90), rgba(4,8,26,.95)) !important;
  border: 1px solid rgba(0,217,255,.10) !important;
  border-radius: 18px !important;
}

/* ── LIVE NOTIFICATION ─────────────────────────────────────────── */
.live-notif {
  background: rgba(4,9,28,.96) !important;
  border-color: rgba(0,217,255,.22) !important;
  box-shadow: 0 14px 50px rgba(0,0,0,.75), 0 0 24px rgba(0,217,255,.08) !important;
  backdrop-filter: blur(20px) !important;
}
.notif-dot { background: var(--green) !important; box-shadow: 0 0 8px var(--green) !important; }
.notif-text strong { color: var(--neon) !important; }

/* ── FOOTER ────────────────────────────────────────────────────── */
footer {
  background: rgba(2,4,14,.98) !important;
  border-top: 1px solid rgba(0,217,255,.08) !important;
  position: relative !important;
}
footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 8%; right: 8% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,217,255,.3), rgba(139,63,255,.2), transparent) !important;
  pointer-events: none !important;
}
.footer-brand {
  background: linear-gradient(90deg, var(--neon), var(--plasma)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(0,217,255,.35)) !important;
}
.footer-tagline { color: var(--muted) !important; }
.footer-links a { color: var(--muted) !important; }
.footer-links a:hover { color: var(--neon) !important; }
.trust-badge {
  background: rgba(0,255,179,.05) !important;
  border-color: rgba(0,255,179,.16) !important;
  color: var(--green) !important;
}
.footer-copy { color: rgba(74,106,138,.3) !important; }

/* ── FLOAT BUTTONS ─────────────────────────────────────────────── */
.wa-float {
  background: linear-gradient(135deg, #20BB5A, #25D366) !important;
  box-shadow: 0 8px 30px rgba(37,211,102,.40) !important;
}
.back-top {
  background: rgba(8,15,42,.9) !important;
  border-color: rgba(0,217,255,.18) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}
.back-top:hover {
  background: rgba(0,217,255,.08) !important;
  border-color: var(--neon) !important;
  color: var(--neon) !important;
  box-shadow: 0 0 18px rgba(0,217,255,.25) !important;
}

/* ── STICKY CTA ────────────────────────────────────────────────── */
.sticky-cta {
  background: rgba(2,4,14,.97) !important;
  border-top-color: rgba(0,217,255,.10) !important;
  backdrop-filter: blur(20px) !important;
}

/* ── EXIT MODAL ────────────────────────────────────────────────── */
.overlay { background: rgba(0,0,0,.85) !important; backdrop-filter: blur(8px) !important; }
.modal {
  background: linear-gradient(148deg, rgba(8,15,42,.98), rgba(4,8,26,1)) !important;
  border-color: rgba(0,217,255,.22) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.9), 0 0 50px rgba(0,217,255,.08) !important;
}
.modal-code {
  background: rgba(0,217,255,.06) !important;
  border-color: rgba(0,217,255,.35) !important;
  color: var(--neon) !important;
}

/* ── 3D TILT GLOW OVERRIDE ─────────────────────────────────────── */
.prod-card.tilt-active {
  border-color: rgba(0,217,255,.35) !important;
}
.brand-card.tilt-active {
  border-color: rgba(0,217,255,.28) !important;
}

/* ── QUANTUM COLLECTION SHOWCASE ──────────────────────────────── */
.qc-showcase {
  padding: 5rem 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}
.qc-showcase::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 50% at 25% 60%, rgba(0,100,220,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(139,63,255,.05) 0%, transparent 52%) !important;
  pointer-events: none !important;
}
.qcs-grid {
  display: grid !important;
  grid-template-columns: 1.1fr .9fr !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
.qcs-main, .qcs-side { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; }
.qcs-img-wrap {
  position: relative !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,217,255,.14) !important;
  background: rgba(4,8,24,.8) !important;
  flex: 1 !important;
  min-height: 260px !important;
}
.qcs-img-wrap img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s !important;
  filter: saturate(1.1) contrast(1.05) !important;
}
.qcs-img-wrap:hover img {
  transform: scale(1.05) !important;
  filter: saturate(1.2) contrast(1.08) brightness(1.05) !important;
}
.qcs-sm { max-height: 320px !important; }
/* HUD corner decorators */
.qcs-hud-tl {
  position: absolute !important; top: 10px !important; left: 10px !important;
  width: 22px !important; height: 22px !important;
  border-top: 2px solid var(--neon) !important;
  border-left: 2px solid var(--neon) !important;
  border-radius: 4px 0 0 0 !important;
  pointer-events: none !important; z-index: 3 !important;
  filter: drop-shadow(0 0 6px rgba(0,217,255,.6)) !important;
}
.qcs-hud-br {
  position: absolute !important; bottom: 10px !important; right: 10px !important;
  width: 22px !important; height: 22px !important;
  border-bottom: 2px solid var(--plasma) !important;
  border-right: 2px solid var(--plasma) !important;
  border-radius: 0 0 4px 0 !important;
  pointer-events: none !important; z-index: 3 !important;
  filter: drop-shadow(0 0 6px rgba(139,63,255,.6)) !important;
}
.qcs-overlay {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  padding: 2rem 1.1rem .9rem !important;
  background: linear-gradient(0deg, rgba(2,4,14,.9) 0%, transparent 100%) !important;
  z-index: 2 !important;
}
.qcs-label {
  font-size: .58rem !important; font-family: monospace !important;
  letter-spacing: .14em !important; color: var(--neon) !important;
  text-transform: uppercase !important; margin-bottom: .2rem !important;
  filter: drop-shadow(0 0 6px rgba(0,217,255,.5)) !important;
}
.qcs-sub { font-size: .82rem !important; font-weight: 700 !important; color: var(--text) !important; }
/* CTA box */
.qcs-cta-box {
  background: linear-gradient(148deg, rgba(8,15,42,.92), rgba(4,8,26,.97)) !important;
  border: 1px solid rgba(0,217,255,.13) !important;
  border-radius: 22px !important;
  padding: 1.5rem 1.25rem !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.qcs-cta-box::before {
  content: '' !important;
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, var(--neon), var(--plasma), transparent) !important;
  opacity: .5 !important;
}
.qcb-label {
  font-size: .88rem !important; font-weight: 800 !important;
  color: var(--text) !important; margin-bottom: 1rem !important;
}
.qcb-stats { display: flex !important; gap: 1rem !important; flex-wrap: wrap !important; margin-bottom: .25rem !important; }
.qcb-stats > div { text-align: center !important; }
.qcb-num {
  display: block !important; font-size: 1.15rem !important; font-weight: 900 !important;
  background: linear-gradient(90deg, var(--gold), var(--gold2)) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 6px rgba(255,208,96,.3)) !important;
}
.qcb-key { font-size: .6rem !important; color: var(--muted) !important; letter-spacing: .04em !important; }
/* Row 2 — triple image strip */
.qcs-row2 {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.25rem !important;
  margin-top: 1.25rem !important;
}
.qcs-row2 .qcs-img-wrap {
  height: 220px !important;
  min-height: unset !important;
}
@media (max-width: 768px) {
  .qcs-grid { grid-template-columns: 1fr !important; }
  .qcs-sm { max-height: 220px !important; }
  .qcs-row2 { grid-template-columns: 1fr 1fr !important; }
  .qcs-row2 .qcs-img-wrap:last-child { grid-column: span 2 !important; }
}

/* ── RESPONSIVE TWEAKS ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #particles-canvas { opacity: .5 !important; }
  .hero-visual::before, .hero-visual::after { display: none !important; }
}
@media (max-width: 480px) {
  .prod-card::before, .prod-card::after { display: none !important; }
}