/* ==========================================================================
   Futuristic skin — glass, neon cyan + gold craft accent
   ========================================================================== */

:root {
  --noir: #020408;
  --noir-2: #060d18;
  --noir-3: #0a1424;
  --line: rgba(37, 211, 255, .18);
  --line-soft: rgba(37, 211, 255, .08);
  --ink: #f4f8ff;
  --ink-dim: #b8c9e6;
  --muted: #7b92b8;
  --neon: #25d3ff;
  --neon-dim: #1a9ec4;
  --neon-glow: rgba(37, 211, 255, .45);
  --gold: #e8c547;
  --gold-lite: #fff0a8;
  --gold-glow: rgba(232, 197, 71, .4);
  --gold-grad: linear-gradient(135deg, #fff4c4 0%, #e8c547 40%, #c99a2e 100%);
  --sapphire-glow: rgba(37, 211, 255, .35);
  --sapphire-grad: linear-gradient(135deg, #3ee8ff 0%, #1a7fd4 50%, #0d3d7a 100%);
  --glass: rgba(8, 16, 32, .62);
  --glass-strong: rgba(6, 12, 26, .88);
  --glass-border: rgba(37, 211, 255, .22);
  --shadow: 0 28px 80px -28px rgba(0, 0, 0, .9), 0 0 40px -12px rgba(37, 211, 255, .15);
  --r: 18px;
  --display-serif: "Marcellus", Georgia, serif;
  --display: "Syne", "Plus Jakarta Sans", system-ui, sans-serif;
}

html {
  background: var(--noir);
}

/* ambient mesh + grid */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 8% -5%, rgba(37, 211, 255, .14), transparent 52%),
    radial-gradient(ellipse 55% 45% at 95% 8%, rgba(232, 197, 71, .1), transparent 48%),
    radial-gradient(ellipse 50% 40% at 50% 105%, rgba(26, 78, 212, .18), transparent 55%),
    var(--noir);
}

html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(37, 211, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 211, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 15%, transparent 72%);
}

body::after {
  opacity: .028;
}

h1, h2, h3, h4, .display {
  font-family: var(--display);
  letter-spacing: -0.02em;
}

.hero-title,
.para-quote {
  font-family: var(--display-serif);
  letter-spacing: 0;
}

.hero-title em {
  font-style: italic;
  background: linear-gradient(90deg, var(--neon), var(--gold-lite));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  color: var(--neon);
  text-shadow: 0 0 20px rgba(37, 211, 255, .35);
}

.eyebrow::before {
  background: linear-gradient(90deg, var(--neon), var(--gold));
  height: 2px;
  box-shadow: 0 0 12px var(--neon-glow);
}

::selection {
  background: var(--neon);
  color: #020408;
}

/* chrome */
.topbar {
  background: rgba(2, 4, 10, .85);
  border-bottom-color: var(--glass-border);
}

.site-preloader {
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(37, 211, 255, .12) 0%, var(--noir) 65%);
}

.site-preloader-logo {
  filter: drop-shadow(0 0 24px var(--neon-glow)) drop-shadow(0 0 40px var(--gold-glow));
}

.site-head {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(37, 211, 255, .06);
}

.site-head.is-stuck {
  background: var(--glass-strong);
  box-shadow: 0 16px 48px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(37, 211, 255, .08);
}

.brand-logo {
  filter: drop-shadow(0 0 14px var(--gold-glow));
}

.brand-text b {
  color: var(--neon);
  text-shadow: 0 0 16px var(--neon-glow);
}

.nav-link:hover,
.nav-link.active {
  color: var(--neon);
  text-shadow: 0 0 18px rgba(37, 211, 255, .4);
}

.nav-link::after {
  background: linear-gradient(90deg, var(--neon), var(--gold));
  height: 2px;
  box-shadow: 0 0 10px var(--neon-glow);
}

.icon-btn {
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(37, 211, 255, .04);
  transition: border-color .35s var(--ease), box-shadow .35s, background .35s, color .35s;
}

.icon-btn:hover {
  border-color: var(--neon);
  color: var(--neon);
  box-shadow: 0 0 20px rgba(37, 211, 255, .25);
  background: rgba(37, 211, 255, .1);
}

.burger {
  border-color: rgba(37, 211, 255, .35);
  background: linear-gradient(145deg, rgba(37, 211, 255, .12), rgba(8, 16, 32, .6));
}

.mega {
  background: var(--glass-strong);
  backdrop-filter: blur(24px);
  border-color: var(--glass-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.navsheet {
  background: linear-gradient(165deg, rgba(8, 16, 36, .98) 0%, rgba(2, 4, 12, .99) 100%);
  border-left-color: var(--glass-border);
  box-shadow: -20px 0 80px rgba(0, 0, 0, .6), inset 1px 0 0 rgba(37, 211, 255, .12);
}

/* buttons */
.btn {
  border-radius: 12px;
  border: 1px solid rgba(37, 211, 255, .35);
  background: linear-gradient(135deg, rgba(37, 211, 255, .95) 0%, rgba(26, 127, 212, .95) 55%, rgba(13, 61, 122, .98) 100%);
  color: #020408;
  box-shadow: 0 12px 32px -8px rgba(37, 211, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  letter-spacing: .12em;
}

.btn:hover {
  box-shadow: 0 16px 40px -6px rgba(37, 211, 255, .55), 0 0 28px rgba(37, 211, 255, .25);
}

.btn-ghost {
  background: rgba(37, 211, 255, .06);
  border-color: var(--glass-border);
  color: var(--ink);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  border-color: var(--neon);
  color: var(--neon);
  background: rgba(37, 211, 255, .12);
  box-shadow: 0 0 24px rgba(37, 211, 255, .2);
}

.chip {
  border-radius: 10px;
  background: rgba(37, 211, 255, .05);
  border-color: var(--glass-border);
  backdrop-filter: blur(6px);
}

.chip:hover,
.chip.on {
  border-color: var(--neon);
  color: var(--neon);
  background: rgba(37, 211, 255, .12);
  box-shadow: 0 0 20px rgba(37, 211, 255, .18);
}

.pill {
  border-radius: 8px;
  background: var(--gold-grad);
}

.pill-sale {
  background: var(--sapphire-grad);
  box-shadow: 0 0 16px var(--sapphire-glow);
}

.link-more {
  color: var(--neon);
}

/* hero */
.hero::before {
  background:
    linear-gradient(105deg, rgba(2, 4, 12, .94) 0%, rgba(2, 4, 12, .55) 42%, rgba(2, 4, 12, .15) 70%),
    radial-gradient(ellipse 80% 50% at 70% 20%, rgba(37, 211, 255, .08), transparent 55%),
    radial-gradient(70% 60% at 50% 120%, rgba(2, 4, 12, .95), transparent 70%);
}

.hero-dot.on::after {
  background: linear-gradient(90deg, var(--neon), var(--gold));
  box-shadow: 0 0 12px var(--neon-glow);
}

.stats {
  background: rgba(6, 12, 24, .75);
  backdrop-filter: blur(12px);
  border-color: var(--glass-border);
}

.stat b {
  background: linear-gradient(180deg, var(--neon), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ticker {
  background: linear-gradient(90deg, var(--noir), rgba(8, 20, 40, .9), var(--noir));
  border-color: var(--glass-border);
}

.ticker span i,
.topbar-track i {
  color: var(--neon);
  text-shadow: 0 0 12px var(--neon-glow);
}

/* cards & tiles */
.tile,
.card-p {
  border-radius: var(--r);
  border-color: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(37, 211, 255, .35), transparent 40%, rgba(232, 197, 71, .25));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
}

.tile:hover::before,
.card-p:hover::before {
  opacity: 1;
}

.card-p::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(37, 211, 255, .35), transparent 45%, rgba(232, 197, 71, .2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
}

.card-p:hover::before {
  opacity: 1;
}

.card-p:hover {
  border-color: rgba(37, 211, 255, .45);
  box-shadow: var(--shadow), 0 0 32px -8px rgba(37, 211, 255, .2);
}

.tile-body,
.tile-count,
.tile-arrow {
  position: relative;
  z-index: 2;
}

.tile-arrow {
  border-radius: 10px;
  background: rgba(37, 211, 255, .1);
  backdrop-filter: blur(8px);
}

.values .value {
  background: rgba(8, 16, 32, .85);
  backdrop-filter: blur(10px);
}

.value svg {
  stroke: var(--neon);
  filter: drop-shadow(0 0 8px var(--neon-glow));
}

@keyframes meshPulse {
  0%, 100% { opacity: .32; }
  50% { opacity: .48; }
}

html::after {
  animation: meshPulse 14s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html::after { animation: none; opacity: .32; }
}


.news {
  border-color: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(16px);
}

/* forms & cart */
.field input,
.field textarea,
.field select {
  border-radius: 12px;
  border-color: var(--glass-border);
  background: rgba(37, 211, 255, .04);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(37, 211, 255, .12);
  background: rgba(37, 211, 255, .06);
}

.drawer {
  background: var(--glass-strong);
  backdrop-filter: blur(22px);
  border-left-color: var(--glass-border);
}

.scrim {
  background: rgba(2, 4, 10, .78);
  backdrop-filter: blur(8px);
}

.mob-nav {
  background: rgba(4, 10, 22, .92);
  backdrop-filter: blur(20px) saturate(160%);
  border-top-color: var(--glass-border);
  box-shadow: 0 -8px 40px rgba(37, 211, 255, .08);
}

.mob-nav-item.on {
  background: rgba(37, 211, 255, .1);
  color: var(--neon);
  box-shadow: inset 0 0 20px rgba(37, 211, 255, .08);
}

/* footer */
.site-foot {
  border-top-color: var(--glass-border);
  background: linear-gradient(180deg, rgba(6, 12, 24, .95), #020408);
  position: relative;
}

.site-foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon), var(--gold), transparent);
  opacity: .5;
}

.foot-col h6 {
  color: var(--neon);
}

.social a:hover {
  border-color: var(--neon);
  color: var(--neon);
  box-shadow: 0 0 16px rgba(37, 211, 255, .25);
}

.foot-dev-url {
  color: var(--neon);
}

/* search */
.search-overlay {
  background: rgba(2, 4, 12, .94);
}

.search-box input {
  border-bottom-color: var(--glass-border);
}

.search-box input:focus {
  border-bottom-color: var(--neon);
}

/* filters / shop */
.filters {
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: blur(12px);
}

.summary {
  background: var(--glass);
  backdrop-filter: blur(14px);
  border-color: var(--glass-border);
}

.banners {
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
}