/* ═══════════════════════════════════════════════════════════════
   🎨 PREMIUM VARIABLES
═══════════════════════════════════════════════════════════════ */
:root {
  --void-deep:      #000000;
  --void:           #0a0a0f;
  --deep:           #0d0d14;
  --card:           #111118;
  --card-hover:     #16161f;
  --lift:           #1a1a26;
  --surface:        #1e1e2e;

  --border-1:       rgba(255,255,255,.03);
  --border-2:       rgba(255,255,255,.06);
  --border-3:       rgba(255,255,255,.10);
  --border-gold:    rgba(255,215,0,.15);
  --border-gold-2:  rgba(255,215,0,.25);

  --gold-pure:      #FFD700;
  --gold:           #ffc850;
  --gold-bright:    #ffe066;
  --gold-dim:       #d4a947;
  --gold-dark:      #9a7a30;

  --gold-glow:      rgba(255,215,0,.4);
  --gold-glow-2:    rgba(255,215,0,.6);
  --gold-shimmer:   rgba(255,235,120,.8);
  --gold-bg-1:      rgba(255,215,0,.08);
  --gold-bg-2:      rgba(255,215,0,.12);
  --gold-bg-3:      rgba(255,215,0,.05);

  --cyan:           #00e5ff;
  --purple:         #b24bf3;
  --red:            #ff3366;
  --blue:           #3b82ff;
  --green:          #00ff88;

  --text-primary:   #ffffff;
  --text-secondary: #b4b8d4;
  --text-tertiary:  #6e7290;
  --text-dim:       #3e4257;

  --glass-1:        rgba(255,255,255,.03);
  --glass-2:        rgba(255,255,255,.05);
  --glass-3:        rgba(255,255,255,.08);
  --glass-gold:     rgba(255,215,0,.06);

  --ff-display:     'Orbitron', monospace;
  --ff-tech:        'Space Mono', monospace;
  --ff-body:        'Urbanist', sans-serif;

  --ease-smooth:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic:   cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-expo:      cubic-bezier(0.19, 1, 0.22, 1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--void-deep);
  color:var(--text-primary);
  font-family:var(--ff-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}

/* Prevent "bold-thin" shimmering on glass/blur layers (common on Windows/Chrome)
   by isolating text rendering from transformed/filtered parents. */
.hero, .card, .qcard, .pcard, .btn, .tab, .table-mini, .nav{
  transform:translateZ(0);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;height:auto;}

/* ═══════════════════════════════════════════════════════════════
   🌌 BACKGROUND LAYERS
═══════════════════════════════════════════════════════════════ */
#bg-mesh{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 120% 80% at 20% 20%, rgba(255,215,0,.04) 0%, transparent 50%),
    radial-gradient(ellipse 100% 90% at 80% 70%, rgba(0,229,255,.03) 0%, transparent 50%),
    linear-gradient(180deg, var(--void-deep) 0%, var(--void) 50%, var(--deep) 100%);
  animation:meshFloat 20s ease-in-out infinite alternate;
}
@keyframes meshFloat{
  0%{filter:hue-rotate(0deg) brightness(1);}
  50%{filter:hue-rotate(5deg) brightness(1.05);}
  100%{filter:hue-rotate(0deg) brightness(1);}
}

#bg-canvas{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.6;}

#spotlight{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(800px circle at var(--mx,50%) var(--my,50%),
    rgba(255,215,0,.08) 0%, rgba(255,215,0,.04) 30%, transparent 70%);
  opacity:0;transition:opacity .8s var(--ease-smooth);
}
body:hover #spotlight{opacity:1;}

#grain-overlay{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:.4;mix-blend-mode:overlay;
}

/* ═══════════════════════════════════════════════════════════════
   🎯 NAVIGATION
═══════════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px, 5vw, 60px);
  background:rgba(10,10,15,.7);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border-gold);
  transition:all .4s var(--ease-smooth);
}
.nav.scrolled{background:rgba(10,10,15,.95);height:64px;box-shadow:0 8px 32px rgba(0,0,0,.3);}

.nav-logo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--ff-display);font-size:1.4rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.nav-gem{
  width:34px;height:34px;position:relative;
  filter:drop-shadow(0 0 12px var(--gold-glow));
}
.nav-gem::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg, var(--gold-pure) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation:gemPulse 3s ease-in-out infinite;
}
@keyframes gemPulse{
  0%, 100%{transform:scale(1); filter:brightness(1);}
  50%{transform:scale(1.05); filter:brightness(1.2);}
}

.nav-links{display:flex;align-items:center;gap:clamp(20px, 3vw, 40px);}
.nav-links a{
  font-size:.85rem;font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.12em;
  position:relative;padding:8px 0;transition:color .3s;
}
.nav-links a::before{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);
  width:100%;height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-pure), transparent);
  filter:blur(.5px);box-shadow:0 0 8px var(--gold-glow);
  transition:transform .4s var(--ease-elastic);
}
.nav-links a:hover{color:var(--gold-pure);}
.nav-links a:hover::before{transform:translateX(-50%) scaleX(1);}

.nav-actions{display:flex;gap:12px;}

/* ═══════════════════════════════════════════════════════════════
   💎 BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff-body);font-size:.85rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:12px 28px;border-radius:8px;border:none;cursor:pointer;
  position:relative;overflow:hidden;transition:all .3s var(--ease-smooth);
}
.btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent);
  transform:translateX(-100%) skewX(-15deg);transition:transform .6s;
}
.btn:hover::before{transform:translateX(100%) skewX(-15deg);}
.btn:active{transform:scale(.97);}

.btn-gold{
  background:linear-gradient(135deg, var(--gold-dim) 0%, var(--gold) 50%, var(--gold-bright) 100%);
  background-size:200% 200%;color:var(--void-deep);font-weight:800;
  box-shadow:0 0 0 1px rgba(255,215,0,.3), 0 4px 16px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.3);
  animation:goldShimmer 3s ease-in-out infinite;
}
@keyframes goldShimmer{0%, 100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(255,215,0,.5), 0 8px 32px var(--gold-glow-2), inset 0 1px 0 rgba(255,255,255,.4);
}

.btn-ghost{
  background:var(--glass-2);color:var(--text-secondary);
  border:1px solid var(--border-2);backdrop-filter:blur(12px);
}
.btn-ghost:hover{
  background:var(--glass-gold);color:var(--gold-pure);
  border-color:var(--border-gold-2);
  box-shadow:0 0 0 1px var(--border-gold), 0 4px 16px var(--gold-glow);
}

/* ═══════════════════════════════════════════════════════════════
   📄 PAGE LAYOUT
═══════════════════════════════════════════════════════════════ */
.products-page{
  position:relative;z-index:10;
  min-height:100vh;padding-top:72px;
}

.pg-container{
  max-width:1400px;margin:0 auto;
  padding:0 clamp(20px, 5vw, 60px);
}

/* ═══════════════════════════════════════════════════════════════
   🎭 PAGE BANNER
═══════════════════════════════════════════════════════════════ */
.page-banner{
  position:relative;padding:100px 0 80px;overflow:hidden;
  border-bottom:1px solid var(--border-gold);
  background:linear-gradient(180deg, transparent, rgba(255,215,0,.02));
}
.page-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,215,0,.08) 0%, transparent 70%);
  pointer-events:none;
}

.banner-watermark{
  position:absolute;top:50%;right:5%;transform:translateY(-50%);
  font-family:var(--ff-display);font-size:clamp(8rem, 15vw, 18rem);
  font-weight:900;letter-spacing:.04em;line-height:1;
  color:rgba(255,215,0,.03);
  pointer-events:none;z-index:0;
}

.pg-container{position:relative;z-index:1;}

.banner-eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:24px;
  opacity:0;animation:fadeUp .7s .2s var(--ease-expo) forwards;
}
.banner-eyebrow-line{
  width:48px;height:2px;
  background:linear-gradient(90deg, var(--gold-pure), transparent);
  box-shadow:0 0 8px var(--gold-glow);
}
.banner-eyebrow-text{
  font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.18em;color:var(--gold-pure);
}

.banner-title{
  font-family:var(--ff-display);
  font-size:clamp(3.5rem, 8vw, 9rem);
  line-height:.9;letter-spacing:.02em;font-weight:900;
  margin-bottom:24px;
  opacity:0;animation:fadeUp .7s .35s var(--ease-expo) forwards;
}
.banner-title em{
  font-family:var(--ff-tech);font-style:italic;
  background:linear-gradient(135deg, var(--gold-pure), var(--gold-bright));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 40px var(--gold-glow));
}

.banner-sub{
  font-size:1.1rem;color:var(--text-secondary);
  line-height:1.8;max-width:600px;margin-bottom:40px;
  opacity:0;animation:fadeUp .7s .5s var(--ease-expo) forwards;
}

.banner-stats{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  opacity:0;animation:fadeUp .7s .65s var(--ease-expo) forwards;
}
.bstat{display:flex;flex-direction:column;gap:6px;}
.bstat-num{
  font-family:var(--ff-display);font-size:2.2rem;
  font-weight:800;letter-spacing:.04em;line-height:1;
  background:linear-gradient(135deg, var(--gold-pure), var(--gold-bright));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.bstat-lbl{
  font-size:.72rem;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
.bstat-sep{
  width:1px;height:48px;
  background:linear-gradient(180deg, transparent, var(--border-gold), transparent);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

/* ═══════════════════════════════════════════════════════════════
   🔧 TOOLBAR
═══════════════════════════════════════════════════════════════ */
.toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;margin:60px 0 48px;flex-wrap:wrap;
  padding:24px 32px;
  background:var(--glass-2);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--border-gold);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
}

.toolbar-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:1;}

/* Search Box */
.search-box{
  position:relative;flex:1;min-width:280px;max-width:400px;
}
.search-box svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;
  stroke:var(--text-tertiary);stroke-width:2;
  fill:none;pointer-events:none;
}
.search-box input{
  width:100%;
  padding:14px 20px 14px 48px;
  background:var(--card);
  border:1px solid var(--border-2);
  border-radius:10px;
  color:var(--text-primary);
  font-family:var(--ff-body);font-size:.9rem;font-weight:500;
  transition:all .3s var(--ease-smooth);
}
.search-box input::placeholder{color:var(--text-tertiary);}
.search-box input:focus{
  outline:none;
  border-color:var(--border-gold-2);
  background:var(--card-hover);
  box-shadow:0 0 0 3px rgba(255,215,0,.1), 0 4px 16px rgba(0,0,0,.2);
}

/* Filter Chips */
.filter-chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  background:var(--glass-1);
  border:1px solid var(--border-1);
  border-radius:10px;
  font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all .3s var(--ease-smooth);
}
.chip:hover{
  background:var(--glass-2);
  border-color:var(--border-2);
  color:var(--text-primary);
  transform:translateY(-2px);
}
.chip.active{
  background:var(--gold-bg-2);
  border-color:var(--border-gold-2);
  color:var(--gold-pure);
  box-shadow:0 0 16px var(--gold-glow);
}
.chip-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gold-pure);
  box-shadow:0 0 8px var(--gold-glow);
  animation:dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%, 100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.3);opacity:.6;}
}

.toolbar-right{
  display:flex;align-items:center;gap:8px;
  font-size:.85rem;color:var(--text-tertiary);font-weight:600;
}
.toolbar-count{
  font-family:var(--ff-display);font-size:1.6rem;
  font-weight:800;letter-spacing:.04em;
  background:linear-gradient(135deg, var(--gold-pure), var(--gold-bright));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ═══════════════════════════════════════════════════════════════
   🎴 PRODUCT CARDS GRID
═══════════════════════════════════════════════════════════════ */
.products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:28px;
  margin-bottom:100px;
}

.pcard{
  background:var(--card);
  border:1px solid var(--border-2);
  border-radius:20px;
  overflow:hidden;
  position:relative;
  transition:all .4s var(--ease-smooth);
  cursor:pointer;
  opacity:0;
  animation:fadeUp .6s var(--ease-expo) forwards;
}
.pcard[data-index="0"]{animation-delay:.1s;}
.pcard[data-index="1"]{animation-delay:.15s;}
.pcard[data-index="2"]{animation-delay:.2s;}
.pcard[data-index="3"]{animation-delay:.25s;}
.pcard[data-index="4"]{animation-delay:.3s;}
.pcard[data-index="5"]{animation-delay:.35s;}

.pcard::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),
    rgba(255,215,0,.12) 0%, transparent 80%);
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.pcard:hover{
  transform:translateY(-12px);
  border-color:var(--border-gold-2);
  box-shadow:
    0 28px 80px rgba(0,0,0,.5),
    0 0 0 1px var(--border-gold),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.pcard:hover::before{opacity:1;}

/* Top Bar */
.pcard-topbar{
  height:4px;
  background:linear-gradient(90deg,
    var(--gold-dark), var(--gold-pure), var(--gold-bright), var(--gold-pure), var(--gold-dark));
  background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-expo);
  box-shadow:0 0 12px var(--gold-glow);
}
.pcard:hover .pcard-topbar{
  transform:scaleX(1);
  animation:topbarShine 2s ease-in-out infinite;
}
@keyframes topbarShine{to{background-position:200% 0%;}}

/* Image */
.pcard-img{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(135deg, var(--lift) 0%, var(--card-hover) 100%);
}
.pcard-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-smooth);
}
.pcard:hover .pcard-img img{transform:scale(1.08);}

.pcard-img-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
  background:linear-gradient(135deg, rgba(255,215,0,.05), rgba(255,215,0,.02));
}
.placeholder-icon{font-size:3rem;opacity:.5;}
.placeholder-text{
  font-size:.85rem;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:.15em;font-weight:600;
}

.pcard-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.8) 100%);
  opacity:0;transition:opacity .4s;
}
.pcard:hover .pcard-img-overlay{opacity:1;}

.pcard-quick{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  padding:10px 24px;
  background:var(--glass-gold);
  backdrop-filter:blur(12px);
  border:1px solid var(--border-gold-2);
  border-radius:8px;
  font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--gold-pure);
  opacity:0;
  transition:all .4s var(--ease-smooth);
  white-space:nowrap;
  box-shadow:0 4px 16px var(--gold-glow);
}
.pcard:hover .pcard-quick{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Body */
.pcard-body{padding:28px 28px 24px;}
.pcard-name{
  font-size:1.25rem;font-weight:800;
  margin-bottom:12px;letter-spacing:-.02em;line-height:1.2;
}
.pcard-desc{
  font-size:.88rem;color:var(--text-secondary);
  line-height:1.7;font-weight:400;
}

/* Footer */
.pcard-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px 24px;
  border-top:1px solid var(--border-1);
  gap:16px;
  background:linear-gradient(180deg, transparent, rgba(255,215,0,.02));
}

.pcard-price{display:flex;flex-direction:column;gap:4px;}
.price-amount{
  font-family:var(--ff-display);font-size:1.9rem;
  font-weight:800;letter-spacing:.04em;line-height:1;
  background:linear-gradient(135deg, var(--gold-pure), var(--gold-bright));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.price-unit{
  font-size:.7rem;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;
}

.pcard-actions{display:flex;gap:10px;}

.pbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;
  border-radius:10px;
  font-size:.82rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
  transition:all .3s var(--ease-smooth);
  position:relative;overflow:hidden;
  white-space:nowrap;
}
.pbtn svg{width:16px;height:16px;flex-shrink:0;}

.pbtn-ghost{
  background:var(--glass-1);
  border:1px solid var(--border-2);
  color:var(--text-secondary);
  stroke:currentColor;
  stroke-width:2;fill:none;
}
.pbtn-ghost:hover{
  background:var(--glass-2);
  border-color:var(--border-gold);
  color:var(--gold-pure);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}

.pbtn-gold{
  background:linear-gradient(135deg, var(--gold-dim), var(--gold-pure), var(--gold-bright));
  background-size:200% 200%;
  color:var(--void-deep);
  fill:currentColor;
  box-shadow:0 4px 16px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
.pbtn-gold::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform:translateX(-100%) skewX(-15deg);transition:transform .6s;
}
.pbtn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 32px var(--gold-glow-2), inset 0 1px 0 rgba(255,255,255,.4);
  background-position:100% 0%;
}
.pbtn-gold:hover::before{transform:translateX(100%) skewX(-15deg);}

/* Bottom Glow */
.pcard::after{
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-pure), transparent);
  opacity:0;transition:opacity .5s;
  filter:blur(2px);box-shadow:0 0 16px var(--gold-glow);
}
.pcard:hover::after{opacity:.8;}

/* ═══════════════════════════════════════════════════════════════
   📭 EMPTY STATE
═══════════════════════════════════════════════════════════════ */
.empty-state{
  text-align:center;padding:100px 20px;
  opacity:0;animation:fadeUp .7s .3s var(--ease-expo) forwards;
}
.empty-icon{
  font-size:6rem;margin-bottom:24px;
  filter:drop-shadow(0 0 20px var(--gold-glow));
}
.empty-title{
  font-family:var(--ff-display);font-size:2.5rem;
  font-weight:800;letter-spacing:.06em;margin-bottom:16px;
  background:linear-gradient(135deg, var(--gold-pure), var(--gold-bright));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.empty-text{
  font-size:1rem;color:var(--text-secondary);
  line-height:1.8;max-width:500px;margin:0 auto;
}
.empty-text code{
  background:var(--gold-bg-1);
  border:1px solid var(--border-gold);
  border-radius:4px;padding:2px 8px;
  font-family:var(--ff-tech);font-size:.9em;
  color:var(--gold-pure);
}

/* ═══════════════════════════════════════════════════════════════
   📱 RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .products-grid{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));}
}

@media(max-width:768px){
  .nav{padding:0 20px;}
  .nav-links{display:none;}

  .page-banner{padding:80px 0 60px;}
  .banner-title{font-size:clamp(3rem, 10vw, 5rem);}
  .banner-watermark{font-size:clamp(6rem, 12vw, 10rem);}

  .toolbar{flex-direction:column;align-items:stretch;padding:20px;}
  .toolbar-left{flex-direction:column;align-items:stretch;}
  .search-box{max-width:100%;}
  .toolbar-right{justify-content:center;}

  .products-grid{grid-template-columns:1fr;gap:20px;}
}

@media(max-width:480px){
  .banner-title{font-size:clamp(2.5rem, 12vw, 4rem);}
  .banner-stats{flex-direction:column;align-items:flex-start;gap:20px;}
  .bstat-sep{display:none;}

  .pcard-footer{flex-direction:column;align-items:stretch;}
  .pcard-actions{width:100%;}
  .pbtn{flex:1;justify-content:center;}
}
/* ═══════════════════════════════════════════════════════════════
   🧩 DASHBOARD UI (Profile/Orders/Licenses/Wallet)
═══════════════════════════════════════════════════════════════ */
.container{max-width:1400px;margin:0 auto;padding:0 clamp(20px,5vw,60px);position:relative;z-index:10}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:18px 0 14px}
.section-title{font-family:var(--ff-display);font-weight:900;letter-spacing:.04em;font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.2}
.section-sub{color:var(--text-tertiary);margin-top:6px;font-size:.92rem;line-height:1.6}

.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:16px}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}

.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--border-2);border-radius:16px;backdrop-filter:blur(18px) saturate(160%);box-shadow:0 18px 60px rgba(0,0,0,.35);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(700px circle at var(--mx,50%) var(--my,30%),rgba(255,215,0,.10),transparent 55%);opacity:.75;pointer-events:none}

.field{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.field label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}

.form-control{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border-2);background:rgba(10,10,15,.55);color:var(--text-primary);outline:none;transition:all .25s var(--ease-smooth)}
.form-control::placeholder{color:rgba(180,184,212,.55)}
.form-control:focus{border-color:var(--border-gold-2);box-shadow:0 0 0 3px rgba(255,215,0,.10),0 0 24px rgba(255,215,0,.12)}
.form-control:disabled{opacity:.65;cursor:not-allowed}

.inline-actions{display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:all .25s var(--ease-smooth);user-select:none}
.btn-primary{color:var(--void-deep);background:linear-gradient(135deg,var(--gold-dim),var(--gold),var(--gold-bright));box-shadow:0 10px 28px rgba(255,215,0,.16),0 0 0 1px rgba(255,215,0,.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 46px rgba(255,215,0,.22),0 0 0 1px rgba(255,215,0,.45)}
.btn-primary:active{transform:translateY(-1px)}

.alert{border-radius:14px;padding:12px 14px;margin:12px 0;border:1px solid var(--border-2);background:rgba(255,255,255,.03);backdrop-filter:blur(14px)}
.alert-success{border-color:rgba(0,255,136,.25);background:rgba(0,255,136,.08)}
.alert-error{border-color:rgba(255,51,102,.25);background:rgba(255,51,102,.08)}

/* spotlight for cards (mouse tracking) */
.card{--mx:50%;--my:30%}
.card:hover{border-color:var(--border-gold)}
/* ═══════════════════════════════════════════════════════════════
   📘 GUIDES (Public)
═══════════════════════════════════════════════════════════════ */
.guides{padding:40px 0 90px}
.guides-hero{padding:26px 0 18px}
.guides-kicker{display:flex;align-items:center;gap:12px;color:var(--text-tertiary);font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}
.guides-kicker::before{content:'';width:54px;height:1px;background:linear-gradient(90deg,var(--border-gold),transparent)}
.guides-title{font-family:var(--ff-display);font-weight:900;letter-spacing:.06em;font-size:clamp(2.0rem,4vw,3.2rem);line-height:1.05;margin-top:14px}
.guides-title em{font-style:normal;color:var(--gold-pure);text-shadow:0 0 30px rgba(255,215,0,.25)}
.guides-sub{color:var(--text-secondary);max-width:780px;line-height:1.8;margin-top:12px;font-size:1.02rem}

.guides-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
@media(max-width:900px){.guides-grid{grid-template-columns:1fr}}

.gcard{padding:18px 18px 16px}
.gcard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.gcard-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--border-2);background:rgba(255,255,255,.03);color:var(--text-secondary);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.gcard-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-pure);box-shadow:0 0 16px rgba(255,215,0,.45)}
.gstep{display:flex;gap:14px;padding:14px;border-radius:14px;border:1px solid var(--border-1);background:rgba(0,0,0,.18)}
.gstep + .gstep{margin-top:10px}
.gnum{width:36px;height:36px;border-radius:12px;flex:0 0 36px;display:grid;place-items:center;font-family:var(--ff-display);font-weight:900;color:var(--void-deep);background:linear-gradient(135deg,var(--gold-dim),var(--gold),var(--gold-bright));box-shadow:0 10px 26px rgba(255,215,0,.16)}
.gtext .t{font-weight:900;letter-spacing:.02em}
.gtext .s{color:var(--text-secondary);line-height:1.7;margin-top:4px}

.gcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.gcta a{flex:0 0 auto}
/* ═══════════════════════════════════════════════════════════════
   💳 WALLET / DASHBOARD COMPONENTS
═══════════════════════════════════════════════════════════════ */
.hero{padding:18px;border-radius:18px;border:1px solid var(--border-2);background:linear-gradient(135deg,rgba(255,215,0,.06),rgba(0,229,255,.04),rgba(178,75,243,.04));box-shadow:0 18px 60px rgba(0,0,0,.35);backdrop-filter:blur(18px) saturate(160%);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(700px circle at var(--mx,50%) var(--my,30%),rgba(255,215,0,.12),transparent 58%);opacity:.85;pointer-events:none}
.hero h1{font-family:var(--ff-display);letter-spacing:.04em;font-weight:900;font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.2}
.hero p{color:var(--text-secondary);margin-top:8px;line-height:1.7}

.quick{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.qcard{min-width:150px;padding:12px 14px;border-radius:14px;border:1px solid var(--border-2);background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));cursor:pointer;transition:all .25s var(--ease-smooth);position:relative;overflow:hidden;backdrop-filter:blur(18px)}
.qcard::before{content:'';position:absolute;inset:-45%;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,215,0,.26),transparent 56%);opacity:0;transition:opacity .30s var(--ease-smooth)}
.qcard:hover::before{opacity:1}
.qcard:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(0,0,0,.5);border-color:var(--border-gold)}
.qnum{font-family:var(--ff-display);font-weight:900;font-size:1.15rem;letter-spacing:.02em}
.qlabel{font-size:.72rem;color:var(--text-tertiary);margin-top:6px;text-transform:uppercase;letter-spacing:.14em}

.small-note{margin-top:10px;color:var(--text-tertiary);font-size:.92rem;line-height:1.6}
.note{color:var(--text-secondary);background:rgba(255,255,255,.03);border:1px dashed var(--border-2);padding:12px;border-radius:14px}

.tabs{display:flex;gap:10px;flex-wrap:wrap}
.tab{appearance:none;border:1px solid var(--border-2);background:rgba(255,255,255,.03);color:var(--text-secondary);padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;transition:all .2s var(--ease-smooth)}
.tab:hover{border-color:var(--border-gold)}
.tab.is-active{background:linear-gradient(135deg,var(--gold-dim),var(--gold),var(--gold-bright));color:var(--void-deep);border-color:rgba(255,215,0,.45);box-shadow:0 12px 30px rgba(255,215,0,.16)}

.scroll{overflow:auto;border-radius:14px;border:1px solid var(--border-1);background:rgba(0,0,0,.18)}
.table-mini{width:100%;border-collapse:collapse;min-width:720px}
.table-mini th,.table-mini td{padding:12px 12px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)}
.table-mini th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);font-weight:900}
.table-mini td{color:var(--text-primary)}

.filters{display:flex;gap:10px;flex-wrap:wrap}
.input{width:100%;max-width:320px;padding:11px 12px;border-radius:12px;border:1px solid var(--border-2);background:rgba(10,10,15,.55);color:var(--text-primary);outline:none;transition:all .25s var(--ease-smooth)}
.input:focus{border-color:var(--border-gold-2);box-shadow:0 0 0 3px rgba(255,215,0,.10),0 0 24px rgba(255,215,0,.12)}

.success{color:#00ff88;font-weight:900}
.danger{color:#ff3366;font-weight:900}
/* =====================
   PRO AUTH (Register/Login/Forgot/Reset)
   ===================== */
.auth-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch;max-width:1040px;margin:44px auto;}
@media (max-width: 920px){.auth-wrap{grid-template-columns:1fr;}}

.auth-hero{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:
  radial-gradient(900px 500px at 10% 20%, rgba(255,215,0,.10), transparent 60%),
  radial-gradient(720px 520px at 85% 30%, rgba(120,170,255,.10), transparent 62%),
  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
box-shadow:0 30px 90px rgba(0,0,0,.45);padding:26px;min-height:520px;}
.auth-hero:before{content:"";position:absolute;inset:-2px;opacity:.75;pointer-events:none;background:
  radial-gradient(420px 260px at 35% 25%, rgba(255,215,0,.13), transparent 60%),
  radial-gradient(380px 240px at 75% 70%, rgba(255,255,255,.08), transparent 60%);
filter:blur(2px)}

.auth-brand{display:flex;gap:12px;align-items:center;position:relative;z-index:1}
.auth-brand .mark{width:46px;height:46px;border-radius:16px;background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.18);display:grid;place-items:center;box-shadow:0 18px 60px rgba(255,215,0,.16)}
.auth-brand .mark svg{width:22px;height:22px;opacity:.95}
.auth-brand .name{font-family:'Orbitron',sans-serif;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.auth-brand .tag{margin-top:2px;color:var(--text-tertiary);font-size:.92rem}

.auth-perks{margin-top:18px;display:grid;gap:12px;position:relative;z-index:1}
.auth-perk{display:flex;gap:12px;align-items:flex-start;padding:14px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(10,10,15,.32)}
.auth-perk .ic{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.auth-perk b{display:block;font-weight:900}
.auth-perk span{display:block;color:var(--text-tertiary);font-size:.92rem;margin-top:2px}

.auth-card{border-radius:24px;padding:22px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.auth-card h1{font-size:1.25rem;margin:0 0 8px;font-family:'Orbitron',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.auth-card .auth-muted{color:var(--text-tertiary)}

.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 560px){.auth-grid{grid-template-columns:1fr;}}

.auth-foot{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-top:14px}
.auth-foot .small{font-size:.85rem;opacity:.8}

.btn.btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:#fff}
.btn.btn-ghost:hover{background:rgba(255,255,255,.06)}
/* Password field: toggle + strength meter */
.pw-field{position:relative}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);height:34px;padding:0 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-weight:900;letter-spacing:.02em;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.pw-toggle:hover{background:rgba(255,255,255,.06)}
.pw-toggle:active{transform:translateY(-50%) scale(.98)}
.pw-meter{margin-top:10px}
.pw-meter .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.pw-meter .label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
.pw-meter .score{font-size:.78rem;font-weight:900;color:rgba(255,255,255,.85)}
.pw-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.pw-bar > i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#ff3366,#ffd700,#00ff88);box-shadow:0 0 24px rgba(255,215,0,.12);transition:width .25s var(--ease-smooth)}
.pw-hints{display:grid;gap:6px;margin-top:10px}
.pw-hint{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;color:var(--text-tertiary)}
.pw-dot{width:10px;height:10px;border-radius:999px;margin-top:4px;background:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.pw-hint.ok{color:rgba(0,255,136,.85)}
.pw-hint.ok .pw-dot{background:rgba(0,255,136,.85);box-shadow:0 0 0 1px rgba(0,255,136,.35) inset,0 0 22px rgba(0,255,136,.22)}
.pw-hint.bad{color:rgba(255,51,102,.9)}
.pw-hint.bad .pw-dot{background:rgba(255,51,102,.9);box-shadow:0 0 0 1px rgba(255,51,102,.35) inset,0 0 22px rgba(255,51,102,.22)}
@media (max-width: 560px){.pw-toggle{right:8px}}