/* ═══════════════════════════════════════════════════════════
   EKRPT — THEME B · "SPECTRE Hybrid"
   Dramatic DARK hero / landing sections, but CLEAN LIGHT
   shopping surfaces. Load AFTER style.css.
   Strategy: keep the light base, make hero + key bands dark.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@500;600;700&display=swap');

:root{
  /* Keep a light, premium base but adopt the SPECTRE red + a crisp blue */
  --blue:        #1a8fc4;
  --blue-dark:   #0f6d9a;
  --blue-light:  #e8f5fc;
  --blue-mid:    #5eb8e8;
  --blue-glow:   rgba(26,143,196,.15);
  --red:         #e0202d;          /* SPECTRE performance red */
  --red-light:   #fdeaea;
  --ink:         #0a0b0d;          /* dark band background */
  --font-head:   'Orbitron', 'Syne', sans-serif;   /* gaming display for headings */
  --font-body:   'DM Sans', sans-serif;
  --font-display-alt:'Rajdhani', sans-serif;
}

/* Headings get the angular display face, but page stays light */
h1,h2,.section-title,.hero h1{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.02em}
.section-title{letter-spacing:.03em}

/* ── DARK HERO ── */
.hero{
  background:
    radial-gradient(900px 480px at 75% 25%, rgba(224,32,45,.22), transparent 55%),
    radial-gradient(700px 420px at 18% 85%, rgba(46,168,224,.16), transparent 50%),
    #050608;
  color:#cfd4da;
  border-bottom:3px solid var(--red);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse at 60% 20%, black, transparent 75%);
}
.hero-eyebrow{
  color:#ff5560;border:1px solid rgba(224,32,45,.4);background:rgba(224,32,45,.1);
  border-radius:100px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:11px;
}
.hero-dot{background:var(--red);box-shadow:0 0 10px var(--red)}
.hero h1{color:#fff;font-weight:900;line-height:1.05;text-shadow:0 0 40px rgba(224,32,45,.25)}
.hero h1 em{color:var(--red);font-style:normal}
.hero-desc{color:#aab1ba}
.stat-val{color:#fff;font-family:var(--font-head)}
.stat-lbl{color:#8a929c;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:10px}
.hero .btn-secondary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.hero .btn-secondary:hover{border-color:var(--blue);color:var(--blue-mid)}

/* Hero glass cards (dark) */
.hv-card,.hv-main{background:linear-gradient(160deg,#15171c,#101216);border:1px solid #23262d;box-shadow:0 16px 44px rgba(0,0,0,.55)}
.hv-main{border:1px solid rgba(224,32,45,.4)}
.hvc-label,.hv-main-label{color:#ff5560;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em}
.hvc-name,.hv-main-name{color:#fff}
.hv-main-price{color:var(--blue-mid);font-family:var(--font-head)}
.live-pill{background:rgba(46,168,224,.16);color:#7cc8ee;border:1px solid rgba(46,168,224,.3)}

/* ── DARK TRUST BAR (bridges hero into light content) ── */
.trust-bar{background:var(--ink);border-bottom:1px solid #1d2026}
.trust-item{color:#9aa3ad;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}

/* ── PRIMARY BUTTON adopts SPECTRE red everywhere ── */
.btn-primary{
  background:linear-gradient(135deg,var(--red),#b3151f);color:#fff;border:none;
  text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-head);font-weight:700;font-size:13px;
  box-shadow:0 6px 22px rgba(224,32,45,.3);
}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px)}

/* ── LIGHT SHOP SURFACES (kept bright + clean) ── */
.featured-strip,.products-layout,body{background:#f7fbfe}
.section-label{color:var(--red);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.filter-tab.active{background:var(--red);border-color:var(--red);color:#fff}
.product-card{border:1px solid #e4eaf0;transition:transform .18s,box-shadow .18s}
.product-card::after{content:'';display:block;height:3px;background:linear-gradient(90deg,var(--red),var(--blue));border-radius:3px;margin:0 16px;opacity:0;transition:opacity .2s}
.product-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(10,11,13,.12)}
.product-card:hover::after{opacity:1}
.product-name{font-family:var(--font-head);font-weight:600;letter-spacing:.01em}
.add-to-cart{background:var(--red);color:#fff;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-head);font-size:12px;font-weight:700}
.add-to-cart:hover{filter:brightness(1.12)}
.badge-hot{background:var(--red)}
.badge-branded{background:var(--ink);color:#fff}

/* ── ABOUT STRIP as a dark feature band ── */
.about-strip{background:linear-gradient(135deg,#0a0b0d,#14171c);color:#cfd4da;border-top:3px solid var(--red)}
.about-strip h2,.about-strip .section-title{color:#fff}
.about-strip p{color:#aab1ba}

/* ── DARK NEWSLETTER / FOOTER ── */
.newsletter{background:var(--ink);color:#cfd4da}
.newsletter h2{color:#fff}
.footer,footer{background:#050608;color:#9aa3ad;border-top:1px solid #1d2026}
.footer a,footer a{color:#9aa3ad}
.footer a:hover,footer a:hover{color:var(--blue-mid)}

/* ── NAV (light, with red active accent) ── */
.nav-links a.active,.nav-links a:hover{color:var(--red)}
.nav-links a.active::after,.nav-links a:hover::after{background:var(--red)}

/* Use the SPECTRE logo image in the nav */
.nav-logo-img{display:block!important}
.nav-logo .nav-logo-mark,.nav-logo .nav-brand{display:none!important}

/* ── Override inline hero styles ── */
.hero{background:radial-gradient(900px 480px at 75% 25%,rgba(224,32,45,.22),transparent 55%),radial-gradient(700px 420px at 18% 85%,rgba(46,168,224,.16),transparent 50%),#050608!important}
.hero h1{color:#fff!important}
.hero h1 em{color:var(--red)!important}
.hero-desc{color:#aab1ba!important}
.hero-eyebrow{background:rgba(224,32,45,.1)!important;color:#ff5560!important}
.hero .btn-secondary{color:#fff!important;border-color:rgba(255,255,255,.3)!important}

/* Dark nav so the white SPECTRE logo is visible, then content returns to light */
.nav{background:rgba(8,9,11,.92)!important;backdrop-filter:blur(12px);border-bottom:1px solid #1d2026!important}
.nav-links a{color:#aab1ba!important}
.nav-links a:hover,.nav-links a.active{color:#fff!important}
.nav .btn-secondary{color:#fff!important;border-color:rgba(255,255,255,.25)!important}
.cart-btn{color:#cfd4da!important}

/* ── Hero floating cards (override hardcoded white/inline) ── */
.hv-card{background:linear-gradient(160deg,#15171c,#101216)!important;border:1px solid #23262d!important;box-shadow:0 16px 44px rgba(0,0,0,.55)!important}
.hv-main{background:linear-gradient(160deg,#1a0e10,#101216)!important;border:1px solid rgba(224,32,45,.4)!important;border-bottom:none!important}
.hvc-label{color:#ff5560!important}
.hvc-name{color:#fff!important}
.hv-main-name{color:#fff!important}
.hv-main-price{color:#5ec3ef!important}