/* Stealth Systems — Modern Minimalist Cyber Luxury (Zinc-950 & Electric Red) */
@import url('tokens.css');
/* Google Fonts are loaded via <link> in each page's <head> (with preconnect) —
   not re-imported here, since @import is render-blocking and was previously
   fetching a second, mismatched set of font weights on every page load. */

/* Neometric — already in the project (release/neometric_extra_bold.otf),
   used until now only for the bot's generated status/leaderboard images,
   never on the actual site. /release/<file> is already served as a static
   asset by web/server.py (the same route product images use), so no new
   file needed. Rounder/smoother geometric face for the Team page's category
   labels (see .team-category-label) — was var(--font-mono), which read as
   a code/terminal label rather than a section heading. */
@font-face {
  font-family: 'Neometric';
  src: url('/release/neometric_extra_bold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  /* Two procedural diagonal hairline grids (crosshatch) give the page a
     textured pattern instead of flat color. Unlike a tiled raster image,
     repeating-linear-gradient has no fixed tile edge to line up, so it never
     shows a seam no matter how far the page scrolls — the same crosshatch
     just keeps going for the full height of the document. The soft radial
     glows are kept on top for depth near the hero, layered over the pattern
     rather than replacing it. */
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 51, 68, 0.05) 0px, rgba(255, 51, 68, 0.05) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(45deg, rgba(255, 51, 68, 0.035) 0px, rgba(255, 51, 68, 0.035) 1px, transparent 1px, transparent 42px),
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255, 51, 68, 0.10), transparent 60%),
    radial-gradient(ellipse 800px 500px at 90% 20%, rgba(255, 51, 68, 0.05), transparent 60%),
    radial-gradient(ellipse 700px 450px at 50% 85%, rgba(255, 51, 68, 0.04), transparent 60%);
  color: var(--text);
  font-family: var(--font-main);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--red);
  color: #fff;
}

/* Scroll reveal helper */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ambient Cursor Glow */
#cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 51, 68, 0.08), transparent 70%);
  transition: opacity 0.25s ease;
  opacity: 0;
}

#cursor-glow.active {
  opacity: 1;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.mono {
  font-family: var(--font-mono);
}

/* HEADER & NAVIGATION */
/* Starts transparent so it reads as part of the hero, not a bar sitting on
   top of it; nav.js toggles .nav-scrolled once the page scrolls past 24px.
   The solid background/blur/shape lives on <nav> itself (not <header>), so
   once scrolled it becomes a self-contained floating pill/capsule bar with
   room around it, instead of a full-width strip — smoothui-style. */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), margin 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

header.nav-scrolled nav {
  max-width: 1080px;
  margin: 10px auto 0;
  padding: 8px 18px;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--panel-line);
  box-shadow: var(--shadow-lg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

/* BRAND LOGO — animated 3D "ST" mark (extruded depth, glass-crack details,
   a slow float+tilt, a pulsing glow, a diagonal shine sweep). Split into two
   nested wrappers because a hover scale and a continuously-looping transform
   can't both live on the same element without overriding each other:
   .logo-scaler only ever reacts to :hover, .logo-float-wrap only ever runs
   the idle float/tilt loop. Markup comes from brandLogoSvg() in nav.js. */
.logo-scaler {
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.brand:hover .logo-scaler {
  transform: scale(1.045);
}

.logo-float-wrap {
  display: block;
  /* Quarter of the original float/tilt travel now (was rotateX(6deg)
     rotateY(-10deg) -> halved to 3deg/-5deg -> halved again here — see
     logoFloatTilt below for the matching keyframe values). */
  transform: translateY(0) rotateX(1.5deg) rotateY(-2.5deg);
  animation: logoFloatTilt 7.5s ease-in-out infinite;
}

.logo-svg {
  display: block;
  /* 90% of the previous 34.5px (which was itself 75% of the original 46px). */
  height: 31px;
  width: auto;
  /* Toned-down base glow — see logoGlowPulse below for the matching
     quieter pulse peak. */
  filter:
    drop-shadow(0 2px 3px rgba(110, 4, 10, 0.18))
    drop-shadow(0 0 3px rgba(255, 25, 55, 0.22))
    drop-shadow(0 0 6px rgba(255, 25, 55, 0.1));
  animation: logoGlowPulse 3.6s ease-in-out infinite;
}

.logo-face {
  stroke: #4a0610;
  stroke-width: 4;
  stroke-linejoin: round;
  paint-order: stroke;
}

.logo-gloss {
  mix-blend-mode: screen;
  opacity: 0.85;
}

.logo-crack-dark {
  fill: none;
  stroke: #170406;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-shard {
  fill: #120206;
}

.logo-crack-energy path {
  fill: none;
  stroke: #ff4b46;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  filter: drop-shadow(0 0 5px #ff4b46);
}

.logo-energy-1 {
  animation: logoCrackFlicker1 5.2s ease-in-out infinite;
}

.logo-energy-2 {
  animation: logoCrackFlicker2 4.4s ease-in-out 0.5s infinite;
}

.logo-shine {
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-260px) skewX(-20deg);
  animation: logoShineSweep 5s ease-in-out infinite;
}

/* A quarter of the original travel distance/rotation now (was translateY up
   to -14px/11px, rotateX/Y up to 11deg -> halved once already -> halved
   again here) — same float/tilt motion, just barely-there. */
@keyframes logoFloatTilt {
  0% { transform: translateY(0px) rotateX(1.5deg) rotateY(-2.5deg); }
  25% { transform: translateY(-3.5px) rotateX(-0.75deg) rotateY(1.25deg); }
  50% { transform: translateY(0.75px) rotateX(-1.75deg) rotateY(2.75deg); }
  75% { transform: translateY(2.75px) rotateX(1deg) rotateY(-1.5deg); }
  100% { transform: translateY(0px) rotateX(1.5deg) rotateY(-2.5deg); }
}

/* Quieter peak than before (opacity .45/.22 -> .32/.15) so the pulse reads
   as a soft breathing glow instead of a bright flare. */
@keyframes logoGlowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 2px 3px rgba(110, 4, 10, 0.18))
      drop-shadow(0 0 3px rgba(255, 25, 55, 0.22))
      drop-shadow(0 0 6px rgba(255, 25, 55, 0.1));
  }
  50% {
    filter:
      drop-shadow(0 2px 3px rgba(110, 4, 10, 0.18))
      drop-shadow(0 0 4px rgba(255, 25, 55, 0.32))
      drop-shadow(0 0 8px rgba(255, 25, 55, 0.15));
  }
}

@keyframes logoShineSweep {
  0% { transform: translateX(-260px) skewX(-20deg); opacity: 0; }
  6% { opacity: 0.55; }
  22% { transform: translateX(760px) skewX(-20deg); opacity: 0; }
  100% { transform: translateX(760px) skewX(-20deg); opacity: 0; }
}

@keyframes logoCrackFlicker1 {
  0%, 100% { opacity: 0.08; }
  9% { opacity: 0.9; }
  12% { opacity: 0.15; }
  16% { opacity: 0.75; }
  42% { opacity: 0.08; }
  64% { opacity: 0.6; }
  68% { opacity: 0.08; }
}

@keyframes logoCrackFlicker2 {
  0%, 100% { opacity: 0.08; }
  30% { opacity: 0.8; }
  34% { opacity: 0.1; }
  38% { opacity: 0.95; }
  58% { opacity: 0.08; }
  80% { opacity: 0.55; }
  84% { opacity: 0.08; }
}

/* Respects reduced-motion visitors: the mark stays as a static image with
   the same glow and 3D volume, just without the looping motion. */
@media (prefers-reduced-motion: reduce) {
  .logo-float-wrap, .logo-svg, .logo-shine, .logo-energy-1, .logo-energy-2 {
    animation: none !important;
  }
}

.brand span {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--text-bright);
}

.brand small {
  display: block;
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-weight: 600;
}

/* Animated pill tabs (smoothui.dev "animated-tabs" pattern): a single white
   pill (.nav-pill-indicator) slides and resizes behind whichever link is
   active/hovered — positioned in JS (nav.js) since it has to measure real
   link widths, but the motion itself is a plain CSS transition.
   At rest (top of page) the track itself has no background at all — just
   bare links floating over the hero, with only the sliding pill giving any
   visual weight. Once scrolled, the track picks up its own subtle inset
   panel to sit inside the floating capsule (header.nav-scrolled below). */
.navlinks {
  position: relative;
  display: flex;
  gap: 2px;
  font-size: 14px;
  color: var(--muted);
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

header.nav-scrolled .navlinks {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--panel-line);
}

.nav-pill-indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  width: 0;
  border-radius: 999px;
  background: var(--text-bright);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform, width;
}

.navlinks a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.navlinks a svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.navlinks a:hover {
  color: var(--text-bright);
}

.navlinks a.nav-pill-target {
  color: #050507;
}

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

.nav-hamburger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-hamburger:hover {
  border-color: var(--panel-line-hover);
  background: rgba(255, 255, 255, 0.06);
}

.nav-hamburger:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.nav-hamburger svg {
  width: 20px;
  height: 20px;
}

/* Nav collapses to a hamburger below 860px: brand + toggle stay on one row,
   links and actions drop into a full-width panel underneath when opened —
   without this, four nav links plus two buttons had nowhere to go on phones
   and were silently clipped off-screen by body{overflow-x:hidden}. */
@media (max-width: 860px) {
  nav {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  .nav-hamburger {
    display: flex;
  }

  .navlinks,
  .nav-actions {
    display: none;
    width: 100%;
  }

  nav.mobile-nav-open .navlinks,
  nav.mobile-nav-open .nav-actions {
    display: flex;
  }

  .navlinks {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    order: 3;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    border-top: 1px solid var(--panel-line);
    padding-top: 14px;
  }

  /* The sliding-pill treatment only makes sense for the horizontal desktop
     track — the mobile menu is a plain vertical link list. */
  .nav-pill-indicator {
    display: none;
  }

  .navlinks a {
    width: 100%;
    padding: 10px 4px;
  }

  .navlinks a.nav-pill-target {
    color: var(--text-bright);
  }

  .nav-actions {
    order: 4;
    justify-content: flex-start;
    gap: 10px;
  }
}

.btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  transition: all 0.2s ease-out;
  cursor: pointer;
}

.btn-login svg {
  width: 14px;
  height: 14px;
}

.btn-login-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.btn-login-admin {
  border-color: rgba(255, 51, 68, 0.35);
}

.btn-login-admin:hover {
  border-color: var(--red);
}

.btn-login:hover {
  border-color: var(--panel-line-hover);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ff3344 0%, #e0212e 100%);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px -2px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease-out;
}

.btn-discord:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px -2px rgba(255, 51, 68, 0.65);
}

/* Progressive collapse: once the navbar has scrolled into its solid/blurred
   state (header.nav-scrolled, toggled in nav.js), both action buttons shed
   their text label and shrink down to a plain icon inside a circle — keeps
   the floating capsule bar compact instead of carrying full-width buttons
   once it's no longer sitting over the empty hero. */
header.nav-scrolled .btn-login,
header.nav-scrolled .btn-discord {
  width: 38px;
  height: 38px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  justify-content: center;
}

header.nav-scrolled .btn-login-label,
header.nav-scrolled .btn-discord-label {
  display: none;
}

/* HERO SECTION */
.hero {
  padding: 56px 0 48px;
  position: relative;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
  align-items: center;
  gap: 32px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-text {
    align-items: center;
    text-align: center;
  }

  .hero-figure {
    order: -1;
    height: clamp(220px, 46vw, 340px) !important;
    width: 100%;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.05;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.025em;
  max-width: 860px;
  color: var(--text-bright);
}

.hero h1 em {
  font-style: normal;
  color: var(--red);
  text-shadow: 0 0 35px var(--red-glow);
}

/* "Most ADVANCED products" — every word stays plain white; only "advanced"
   sits inside a hand-drawn-style rounded red frame so it reads as the one
   emphasized word, rather than a full second-color line like before. */
.hero-highlight-word {
  position: relative;
  display: inline-block;
  color: var(--text-bright);
  padding: 2px 20px 8px;
  margin: 0 -4px;
  border: 2.5px solid var(--red);
  border-radius: 60px 66px 58px 64px / 40px 36px 44px 38px;
  box-shadow: 0 0 24px var(--red-glow-subtle);
}

/* BLUR REVEAL — smoothui.dev pattern: text starts blurred, offset down, and
   transparent, then settles into place on an Apple-style ease-out. Unlike a
   one-shot @keyframes entrance, this is transition-based and driven by an
   IntersectionObserver (app.js) that toggles .is-visible on and off — so it
   plays again every time the element re-enters the viewport, not just once
   on first load. Reduced-motion visitors get the global transition-duration
   override below and see the final state immediately. */
.blur-reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.blur-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.hero h1 .blur-word {
  display: inline-block;
}

.hero p {
  max-width: 620px;
  color: var(--muted);
  font-size: 16px;
  margin-top: 18px;
  line-height: 1.65;
}

/* Social proof row (smoothui.dev header-3 pattern) — stacked avatars + star
   rating, sitting below the tagline instead of as a badge above the title. */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.hero-social-proof-avatars {
  display: flex;
  align-items: center;
}

.hero-social-proof-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  object-fit: cover;
  background: var(--bg-card);
  margin-left: -10px;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-social-proof-avatars img:first-child {
  margin-left: 0;
}

/* Only the hovered avatar grows, and only while the pointer is actually on
   it — bumped in front of its neighbors so the zoom isn't clipped by the
   overlap. */
.hero-social-proof-avatars img:hover {
  transform: scale(1.35);
  z-index: 1;
}

.hero-social-proof-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-social-proof-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--gold);
  line-height: 1;
}

.hero-social-proof-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .hero-actions {
    justify-content: center;
  }
}

.btn {
  padding: 11px 22px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.btn-primary {
  background: linear-gradient(135deg, #ff3344 0%, #e0212e 100%);
  color: #fff;
  box-shadow: 0 4px 18px -3px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px -3px rgba(255, 51, 68, 0.65);
}

/* SHINE TEXT — smoothui.dev pattern, adapted to trigger on hover (rather than
   an always-on loop) for Purchase CTAs specifically: a bright band sweeps
   across the label via a clipped moving gradient. Static color at rest so the
   button reads normally until the visitor is actually considering it. */
.btn-shine-label {
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.65) 35%, #fff 50%, rgba(255, 255, 255, 0.65) 65%);
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.btn-primary:hover .btn-shine-label {
  animation: btnShineSweep 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes btnShineSweep {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

/* Flat price folded straight into a button's own label (Accounts-category
   products only — no day/week/month tiers to pick from: used by both the
   "Full Details" modal's purchase button in openProductModal(), and the
   storefront banner's BUY NOW button in renderAccountsBanner(), app.js).
   Its own copy of the shine-text treatment above — background properties
   don't inherit, so nesting it inside .btn-shine-label would just render
   invisible — set in var(--font-heading) instead of the button's default
   body font so the price visually reads as its own distinct element. */
.btn-price-inline {
  font-family: var(--font-heading);
  font-weight: 800;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.65) 35%, #fff 50%, rgba(255, 255, 255, 0.65) 65%);
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.btn-primary:hover .btn-price-inline {
  animation: btnShineSweep 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-ghost {
  border-color: var(--panel-line);
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
}

.btn-ghost:hover {
  border-color: var(--panel-line-hover);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

/* HERO TRUST ROW — small inline line of facts (not boxed cards): icon + a
   bold lead-in word, separated by hairline dividers, wrapping freely on
   narrow screens instead of collapsing into stacked buttons. */
.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}

.hero-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
}

.hero-trust-icon {
  display: inline-flex;
  flex-shrink: 0;
}

/* Web-native outline icons, not emoji. They keep their resting muted color on
   hover (no red fill swap) — instead a quick bouncy pop plays once, so the
   feedback is motion rather than a color change. */
.hero-trust-icon-svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  filter: drop-shadow(0 0 6px var(--red-glow-subtle));
}

.hero-trust-item:hover .hero-trust-icon-svg {
  animation: trustIconBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes trustIconBounce {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.22) rotate(-10deg); }
  65% { transform: scale(0.94) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* A little life in the key icon instead of a static emoji — a small jiggle
   on a loop, like it's about to turn in a lock. */
@keyframes keyJiggle {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(-14deg); }
  20% { transform: rotate(10deg); }
  30% { transform: rotate(-6deg); }
  40%, 90% { transform: rotate(0deg); }
}

.hero-trust-icon-key {
  animation: keyJiggle 3.2s ease-in-out infinite;
  transform-origin: 70% 70%;
}

.hero-trust-item strong {
  color: var(--text-bright);
  font-weight: 700;
  margin-right: 4px;
}

.hero-trust-sep {
  width: 1px;
  height: 16px;
  background: var(--panel-line);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .hero-trust-sep {
    display: none;
  }

  .hero-trust-row {
    gap: 10px 20px;
  }
}

/* HERO FIGURE — character art cropped from the existing product splash art
   (release/external.png) so it matches the rest of the site. The outer panel
   gets a soft crimson glow for ambience and centers a fixed-aspect frame
   (so the crop stays tight regardless of the panel's own height at a given
   viewport); a mask fades the whole thing out at its edges so it dissolves
   into the page instead of sitting in a hard box. */
.hero-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(360px, 34vw, 560px);
  border-radius: var(--radius-card);
  background:
    radial-gradient(ellipse 62% 58% at 60% 42%, var(--red-glow-subtle), transparent 68%),
    radial-gradient(ellipse 46% 46% at 46% 32%, rgba(255, 255, 255, 0.05), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 86%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-composite: intersect;
}

.hero-figure img {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 0.66;
  object-fit: cover;
  object-position: 0% 18%;
  border-radius: var(--radius-card);
  /* Darkened and mostly desaturated so the full-color splash art reads as a
     moody, near-monochrome figure that fits the dark/crimson palette instead
     of a bright, jarring inline photo. */
  filter: brightness(0.55) saturate(0.35) contrast(1.15);
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

.stat-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Premium hover: a gentle scale-up with a slight counter-clockwise tilt and a
   red glow, instead of a flat color swap — reads as the card physically
   lifting toward the cursor. z-index keeps the tilted card from tucking
   under its neighbors in the 3-up grid while it's rotated. */
.stat-card:hover {
  transform: scale(1.05) rotate(-7deg);
  border-color: var(--red);
  box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.6), 0 0 40px var(--red-glow);
  z-index: 2;
}

.stat-icon {
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.stat-icon svg {
  fill: none;
}

.stat-main .num {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 800;
  color: var(--text-bright);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-main .lbl {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}

.stat-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 51, 68, 0.1);
  color: var(--red);
  border: 1px solid rgba(255, 51, 68, 0.25);
  letter-spacing: 0.05em;
}

.stat-badge-green {
  background: rgba(34, 197, 94, 0.1);
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.25);
}

/* The "ALL / Production Builds" card only: kept in the same 3-up grid as its
   siblings, but deliberately calmer — smaller number, tighter padding, and no
   hover tilt/glow — so it reads as a quick static fact instead of competing
   for attention with the two genuinely interactive stat cards next to it. */
.stat-card-quiet {
  padding: 16px 20px;
}

.stat-card-quiet .stat-main .num {
  font-size: 26px;
}

.stat-card-quiet:hover {
  transform: none;
  border-color: var(--panel-line);
  box-shadow: none;
}

.stat-card-quiet::before {
  display: none;
}

/* ========================================================================= */
/* PRODUCT SHOWCASE — SELECTOR + TWO-COLUMN DETAIL VIEW                      */
/* ========================================================================= */
/* Underline tabs (smoothui.dev "animated-tabs" underline variant): plain
   text tabs on a hairline baseline, with a sliding colored underline (JS
   measures + positions #product-tab-indicator in app.js) instead of the
   filled pill style used elsewhere on the site. */
/* Outer frame shared by the tab selector and the image/info card below it —
   one bordered component instead of a tab row floating loose above a
   separate card. The mouse-tracked glow effect (further down this file)
   targets this wrapper now, not the inner grid. */
.product-showcase-panel {
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.product-showcase-panel:hover {
  border-color: var(--panel-line-hover);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

/* RANKED ACCOUNTS BANNER — a distinct upsell card below the product
   showcase (see renderAccountsBanner() in app.js). Same card chrome as
   .product-showcase-panel (border/radius/glow) so it reads as part of the
   same family, just laid out as a wide row: headline left, BUY NOW + price
   stacked right. */
.accounts-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  cursor: pointer;
}

/* A plain class selector always beats the UA [hidden] rule regardless of
   specificity (author origin outranks user-agent origin) — without this,
   the "display: flex" above would keep the banner visible even while the
   hidden attribute is set (i.e. before app.js finds an "Accounts"-category
   product, or after that product is removed), and a click on it would
   silently no-op since cachedAccountsProduct is null. */
.accounts-banner[hidden] {
  display: none;
}

.accounts-banner:hover {
  border-color: var(--panel-line-hover);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

.accounts-banner:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.accounts-banner-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
}

.accounts-banner-buy-btn {
  flex-shrink: 0;
  padding: 8px 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Sized down slightly from the modal's .btn-price-inline (this button is
   already smaller) but otherwise the exact same shared shine+typography
   treatment — see the shared rule above. */
.accounts-banner-buy-btn .btn-price-inline {
  font-size: 12px;
  margin-left: 8px;
  padding-left: 8px;
}

@media (max-width: 700px) {
  .accounts-banner {
    flex-direction: column;
    text-align: center;
    padding: 14px 16px;
  }
}

.product-select-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 20px 0;
  border-bottom: 1px solid var(--panel-line);
}

.product-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.product-select-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: color 0.18s ease;
}

.product-select-tab:hover {
  color: var(--text-bright);
}

.product-select-tab.active {
  color: var(--text-bright);
}

.product-select-mobile-wrap {
  display: none;
  margin: 16px 20px 0;
}

.product-select-mobile {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--panel-line);
  background: var(--bg-card);
  color: var(--text-bright);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

@media (max-width: 760px) {
  .product-select-bar { display: none; }
  .product-select-mobile-wrap { display: block; }
}

/* One unified card (shared border/background/radius/shadow live on the outer
   grid, not on each half) instead of two separate boxes sitting side by side. */
.product-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .product-showcase {
    /* minmax(0, 1fr), not bare 1fr: a bare 1fr track's minimum size
       defaults to its content's max-content size, and the product image
       below (width:100% with no min-width:0) has a huge intrinsic/natural
       size — so on a single-column mobile layout the track (and the image
       inside it) was inflating past the card and off the edge of the
       screen instead of shrinking to fit it. minmax(0, 1fr) is the same
       fix already used for .hero-inner/.showcase-info elsewhere in this
       file. */
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Image column no longer stretches to match the (usually taller) info
   column — align-self:start lets it sit at its own natural height instead,
   which is what actually made the frame feel oversized/empty before.
   min-width:0 overrides the flex/grid default of min-width:auto, which is
   what let the product image (see .product-showcase mobile query above)
   force this column wider than its actual grid track. */
.showcase-media-col {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
}

/* Every product image has its name and the Stealth watermark baked directly
   into the artwork at a fixed 16:9 ratio. Matching the container's own
   aspect-ratio to that means object-fit:contain needs zero letterboxing —
   the image fills the box edge to edge, so the like button (anchored to
   this box's own top-right corner) always lands on the actual artwork
   instead of floating in empty space above it. */
.showcase-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255, 0, 30, 0.10), transparent 70%),
    var(--bg-card);
}

.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Favorite/like toggle riding on the product image: a bare heart glyph + like
   count, always visible (no circular badge/background behind it — just a
   drop-shadow so it reads over any artwork) so the count works as visible
   social proof rather than a hover-only affordance. */
.showcase-like-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 0;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
  transition: color 0.18s ease, transform 0.18s ease;
}

.showcase-like-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}

.showcase-like-btn:hover svg {
  transform: scale(1.08);
}

.showcase-like-btn.liked {
  color: var(--red);
}

.showcase-like-btn.liked svg {
  fill: var(--red);
  stroke: var(--red);
}

.showcase-like-count {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono, inherit);
  line-height: 1;
}

/* Star rating row (smoothui.dev product-card pattern) — sits directly under
   the image itself (inside .showcase-media-col) instead of the old
   "Recommended" badge that used to float on the artwork. */
.showcase-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px 0;
}

.showcase-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--gold);
  /* smoothui.dev "shimmer-sweep" text animation, ported to CSS: a blur+slide
     dissolve-in. Re-renderShowcaseDetail() rebuilds this element from scratch
     on every product switch, so the animation replays automatically each
     time the user picks a different product — no JS re-trigger needed. */
  animation: showcaseStarsShimmerIn 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes showcaseStarsShimmerIn {
  from { filter: blur(8px); opacity: 0; transform: translateX(-22px); }
  to { filter: blur(0); opacity: 1; transform: translateX(0); }
}

.showcase-rating-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.showcase-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 30px;
  border-left: 1px solid var(--panel-line);
}

@media (max-width: 900px) {
  .showcase-info {
    border-left: none;
    border-top: 1px solid var(--panel-line);
  }
}

/* Product name + online/offline status dot — replaces the old game/category
   mini-tag row ("VALORANT • EXTERNAL") so the showcase card reads as one
   clean product presentation instead of a generic tag-covered card. */
.showcase-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.showcase-info h3 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.showcase-info .showcase-desc {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.showcase-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 7px 14px;
  margin-top: 14px;
  list-style: none;
}

.showcase-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.4;
}

.showcase-features li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--red);
}

.showcase-divider {
  height: 1px;
  background: var(--panel-line);
  margin: 16px 0 14px;
}

.showcase-tier-label {
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.showcase-tier-grid {
  display: flex;
  /* All durations stay on a single row (Valorant Emulator has 6) instead of
     wrapping to a second line with a big gap underneath — the pills shrink
     to fit via their own tight sizing below.
     Deliberately NOT overflow-x:auto here: setting only one axis to
     non-visible makes the browser compute the OTHER axis as non-visible too
     (there's no such thing as "clip horizontally but not vertically"), which
     was silently clipping the recommended pill's glow ring at the container's
     top/bottom edge — a soft box-shadow getting chopped into a hard rectangle.
     Plain overflow:visible (the default) lets that glow bleed out normally. */
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 0;
}

.showcase-tier-pill {
  position: relative;
  flex-shrink: 0;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}

/* Restricted to one specific product+duration (see isRecommendedProduct in
   app.js) so it reads as a genuine pick rather than a label every product
   repeats. Redesigned as a soft persistent glow ring + a small inline star
   sitting on the same line as the duration text — no more badge floating
   off the pill's corner, which read as messy rather than "smooth". */
.showcase-tier-pill.is-recommended {
  border-color: rgba(255, 51, 68, 0.4);
  background: rgba(255, 51, 68, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 51, 68, 0.12), 0 4px 16px -6px var(--red-glow-subtle);
}

.tier-recommended-star {
  display: inline-block;
  margin-right: 5px;
  color: var(--gold);
  vertical-align: -1px;
}

.showcase-tier-pill:hover {
  border-color: var(--panel-line-hover);
}

.showcase-tier-pill.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 4px 14px -2px var(--red-glow);
}

.showcase-tier-pill.active .tier-recommended-star {
  color: #fff;
}

.showcase-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.showcase-price {
  display: flex;
  flex-direction: column;
}

.showcase-price .price-num {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-bright);
}

.showcase-price .price-tier {
  font-size: 12px;
  color: var(--muted);
  text-transform: capitalize;
}

/* SECTION HEADINGS & SPACING */
section {
  padding: 90px 0;
}

.section-head {
  margin-bottom: 34px;
}

.section-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 38px);
  text-transform: uppercase;
  font-weight: 900;
  color: var(--text-bright);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.section-head p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 8px;
  max-width: 620px;
  line-height: 1.6;
}

.live-core-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pulse 1.6s ease-in-out infinite;
}

/* PRODUCT STATUS SECTION — one framed panel: a summary header on top of a
   plain scannable row list, closer to a real status page (Vercel/Stripe
   style) than a grid of bordered cards each repeating the same three
   facts (category, a pill, a name). Simpler to read, and it matches the
   "encuadrado" treatment used for Our Products above it. */
.status-panel {
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.status-panel:hover {
  border-color: var(--panel-line-hover);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

.status-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--panel-line);
}

.telemetry-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.live-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px 2px var(--green-glow);
  animation: pulse 1.6s ease-in-out infinite;
}

.telemetry-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-bright);
}

.telemetry-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.telemetry-ticket-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  transition: all 0.2s ease-out;
}

.telemetry-ticket-btn:hover {
  background: rgba(34, 197, 94, 0.16);
  transform: translateY(-2px);
}

/* Replaces the old bold green "Everything is working" headline + pulse dot —
   just a quiet timestamp line, deliberately NOT styled as a pill/tag (no
   border, no background chip) so it reads as plain metadata rather than a
   status badge competing with the per-row states below it. */
.status-last-update {
  font-size: 12px;
  color: var(--muted);
}

/* Discord Ticket button, collapsed to a single circular icon (Discord's
   brand color) instead of a labelled pill — matches the icon-only treatment
   used elsewhere once a control's meaning is obvious from its glyph alone. */
.status-discord-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  color: #fff;
  background: #5865f2;
  box-shadow: 0 4px 16px -3px rgba(88, 101, 242, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease-out;
}

.status-discord-icon-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px -2px rgba(88, 101, 242, 0.75);
}

/* STATUS ROW LIST — one line per product: a pulsing dot, the name, a small
   category tag, and a right-aligned state label. Deliberately plain (no
   bordered pill, no per-row card chrome) so a dozen products stay scannable
   at a glance instead of turning into a wall of near-identical boxes. */
.status-list {
  display: flex;
  flex-direction: column;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s ease;
}

.status-row:last-child {
  border-bottom: none;
}

.status-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.status-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-row-dot.is-online {
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pulse 1.6s ease-in-out infinite;
}

.status-row-dot.is-down {
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 0, 30, 0.5);
}

.status-row-name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-bright);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-row-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-line);
  padding: 2.5px 8px;
  border-radius: 5px;
  flex-shrink: 0;
}

.status-row-state {
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.status-row-state.is-online {
  color: var(--green);
}

.status-row-state.is-down {
  color: var(--red);
}

/* ONLINE INDICATOR — a decorative (non-interactive, pointer-events:none)
   checkbox that plays its "checked" pulse once the row scrolls into view
   (see observeStatusCheckIndicators() in app.js), replacing the plain
   "Operational" text label. */
.status-check-indicator {
  display: inline-block;
  position: relative;
  font-size: 0.85rem;
  line-height: 0;
  pointer-events: none;
}

.status-check-indicator input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.status-checkmark {
  position: relative;
  display: block;
  height: 1.3em;
  width: 1.3em;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transition: 300ms;
}

.status-check-indicator input:checked ~ .status-checkmark {
  background-color: var(--green);
  border-radius: 0.45em;
  animation: statusCheckPulse 500ms ease-in-out;
}

.status-checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 0.44em;
  top: 0.22em;
  width: 0.28em;
  height: 0.56em;
  border: solid rgba(255, 255, 255, 0.92);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.status-check-indicator input:checked ~ .status-checkmark::after {
  display: block;
}

@keyframes statusCheckPulse {
  0% { box-shadow: 0 0 0 0 var(--green-glow); rotate: 20deg; }
  50% { rotate: -20deg; }
  75% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.25); }
  100% { box-shadow: 0 0 0 13px rgba(34, 197, 94, 0); rotate: 0; }
}

/* OFF INDICATOR — a small shuffling 7-square loader standing in for "still
   being worked on", replacing the plain "Maintenance" text label. */
.status-off-loader {
  position: relative;
  width: 24px;
  height: 24px;
  transform: rotate(45deg);
  pointer-events: none;
}

.status-off-loader-sq {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: 0.5px;
  background: var(--red);
  box-shadow: 0 0 6px rgba(255, 0, 30, 0.5);
  animation: statusOffSquareAnim 10s ease-in-out infinite both;
}

.status-off-loader-sq:nth-child(1) { animation-delay: 0s; }
.status-off-loader-sq:nth-child(2) { animation-delay: -1.4285714286s; }
.status-off-loader-sq:nth-child(3) { animation-delay: -2.8571428571s; }
.status-off-loader-sq:nth-child(4) { animation-delay: -4.2857142857s; }
.status-off-loader-sq:nth-child(5) { animation-delay: -5.7142857143s; }
.status-off-loader-sq:nth-child(6) { animation-delay: -7.1428571429s; }
.status-off-loader-sq:nth-child(7) { animation-delay: -8.5714285714s; }

@keyframes statusOffSquareAnim {
  0%, 10.5% { left: 0; top: 0; }
  12.5%, 23% { left: 8px; top: 0; }
  25%, 35.5% { left: 16px; top: 0; }
  37.5%, 48% { left: 16px; top: 8px; }
  50%, 60.5% { left: 8px; top: 8px; }
  62.5%, 73% { left: 8px; top: 16px; }
  75%, 85.5% { left: 0; top: 16px; }
  87.5%, 98% { left: 0; top: 8px; }
  100% { left: 0; top: 0; }
}

@media (max-width: 560px) {
  .status-row-tag {
    display: none;
  }
}

/* MARQUEE REVIEWS (SILKY SMOOTH TICKER WITH RED ACTIVE HIGHLIGHT & NO CLIPPING) */
.marquee-container {
  overflow: hidden;
  position: relative;
  margin-top: 24px;
  /* Extra vertical breathing room so a scaled + rotated card mid-hover doesn't
     get clipped by this container's own overflow:hidden. */
  padding: 44px 0 48px 0;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding: 12px 0;
  animation: marquee-scroll 75s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.review-card {
  width: 360px;
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

/* Same premium tilt as the hero stat-cards: scale + a slight counter-clockwise
   rotation + red glow — one consistent hover language across the page. */
.review-card:hover {
  transform: scale(1.05) rotate(-7deg);
  border-color: var(--red);
  box-shadow: 0 20px 45px -14px rgba(0, 0, 0, 0.6), 0 0 40px var(--red-glow);
  z-index: 2;
}

/* Custom Cyber Luxury Stars */
.review-stars-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.star-icon-custom {
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 0 8px rgba(255, 0, 30, 0.45));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.review-card:hover .star-icon-custom {
  transform: scale(1.12);
}

.review-card p {
  font-size: 14px;
  color: var(--mono);
  margin-top: 14px;
  line-height: 1.6;
}

.review-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--panel-line);
}

.review-card:hover .review-avatar {
  border-color: var(--panel-line-hover);
}

.review-author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
}

/* SECTION SUBTABS */
.section-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 32px;
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 6px;
  width: fit-content;
}

.section-subtab-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.section-subtab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.section-subtab-btn.active {
  background: rgba(255, 51, 68, 0.12);
  border: 1px solid rgba(255, 51, 68, 0.3);
  color: #fff;
}

.section-subpane {
  display: none;
  animation: fadeInUp 0.25s ease;
}

.section-subpane.active {
  display: block;
}

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

/* TEAM CATEGORY GROUPS */
.team-category-group {
  margin-bottom: 48px;
}

.team-category-label {
  font-family: 'Neometric', var(--font-heading), sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  border-bottom: 1px solid var(--panel-line-red);
  padding-bottom: 8px;
  margin-bottom: 24px;
}

/* TEAM CARDS — minimalist, animated per-category cards (uiverse.io
   "blue-wombat" style rounded-card look, adapted): a small circular avatar
   sitting in its own soft radial-gradient spot at the top, with name/role/bio
   below it in a plain rectangle body. At rest it's just a quiet circle; on
   hover the whole card lifts + grows and the avatar itself morphs from a
   circle into a rounded square to reveal the full photo, reverting the
   instant the pointer leaves. The shared spotlight-on-hover effect
   (.interactive-glow-card, applied via the class list further down) still
   layers its own red glow on top of this. */
.team-grid {
  display: grid;
  /* auto-fill + a capped max (not 1fr) so a category with only one or two
     people doesn't stretch that lone card to fill the whole row width;
     every card stays a normal, consistent size. 10% bigger than before
     (160/200 -> 176/220). */
  grid-template-columns: repeat(auto-fill, minmax(176px, 220px));
  gap: 16px;
}

.team-card {
  /* Noticeably blacker than the standard card background (--bg-card is a
     dark gray-black; this is closer to true black) per feedback that the
     cards read too gray. */
  background: #030304;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.4s ease;
}

.team-card:hover {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--panel-line-hover);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.team-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 0 8px;
  background: var(--bg-input);
}

/* Soft color-cycled glow behind the avatar — hidden at rest, fades in on
   hover for a subtle "spotlight" moment instead of a static blob. Colors
   cycle per card (gold / blue / magenta) so a category row of several
   members doesn't read as one flat repeated tile.
   Centered on the avatar (top:50%/translate -50%) and sized to fit inside
   .team-photo's own box instead of poking above it (previously top:-34px) —
   that offset put part of the glow above .team-card's own overflow:hidden
   boundary, so it got hard-clipped into a flat-edged rectangle instead of
   fading out smoothly like it does now. */
.team-photo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.team-grid .team-card:nth-child(3n+1) .team-photo::before {
  background: radial-gradient(circle, rgba(246, 173, 32, 0.35) 0%, transparent 72%);
}

.team-grid .team-card:nth-child(3n+2) .team-photo::before {
  background: radial-gradient(circle, rgba(32, 164, 246, 0.35) 0%, transparent 72%);
}

.team-grid .team-card:nth-child(3n+3) .team-photo::before {
  background: radial-gradient(circle, rgba(213, 32, 246, 0.35) 0%, transparent 72%);
}

.team-card:hover .team-photo::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.team-avatar {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--panel-line);
  transition: border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1), width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

/* The circle -> rounded-square morph, revealing the full image. Reverts the
   instant the pointer leaves (:hover), no separate class/JS needed. */
.team-card:hover .team-avatar {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  border-color: var(--panel-line-red);
}

.team-card-body {
  padding: 12px 15px 16px;
  text-align: center;
}

.team-card h4 {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.team-card .role {
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  margin-top: 2px;
}

.team-card p {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.55;
}

/* PARTNER PROGRAMS */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 28px;
}

@media (max-width: 500px) {
  .programs-grid {
    grid-template-columns: 1fr;
  }
}

.program-card {
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s ease-out;
}

.program-card:hover {
  border-color: var(--panel-line-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 35px var(--red-glow-subtle);
}

.program-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  background: rgba(255, 51, 68, 0.12);
  border: 1px solid rgba(255, 51, 68, 0.3);
  color: var(--red);
}

.program-badge-gold {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
  color: var(--gold);
}

.program-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.program-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 51, 68, 0.08);
  border: 1px solid rgba(255, 51, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}

.program-header h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-bright);
}

.program-sub {
  font-size: 12.5px;
  color: var(--muted);
}

.program-body {
  margin-top: 20px;
  flex: 1;
}

.program-body p {
  font-size: 14px;
  color: var(--mono);
  line-height: 1.6;
  margin-bottom: 12px;
}

.program-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.perk-item {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--panel-line);
}

.perk-item-gold {
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.04);
}

.requirements-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.requirements-list div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.requirements-list span {
  color: var(--gold);
  font-weight: 700;
}

.program-foot {
  margin-top: 24px;
}

/* FOOTER */
footer {
  border-top: 1px solid var(--panel-line);
  padding: 50px 0;
  background: var(--bg);
}

.foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.foot-row .links {
  display: flex;
  gap: 24px;
}

.foot-row .links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.2s ease;
}

.foot-row .links a:hover {
  color: var(--text-bright);
}

/* MODALS */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px var(--red-glow-subtle);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-line);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease-out;
  font: inherit;
  padding: 0;
  appearance: none;
}

.modal-close:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.modal-close:hover {
  background: var(--red);
  border-color: var(--red);
}

/* Same real 16:9 ratio as the showcase image — no crop, no stretch, no fake fill. */
.modal-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #09090b;
}

.modal-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.modal-content {
  padding: 26px;
}

.game-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.08em;
}

.modal-content h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  margin-top: 4px;
  color: var(--text-bright);
}

.modal-content .desc {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.6;
}

.modal-sections-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
}

.modal-sections-wrap::-webkit-scrollbar {
  width: 6px;
}

.modal-sections-wrap::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.modal-sections-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 51, 68, 0.4);
  border-radius: 3px;
}

.modal-section-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.2s ease-out;
}

.modal-section-card:hover {
  border-color: rgba(255, 51, 68, 0.35);
  background: rgba(255, 51, 68, 0.04);
}

.modal-section-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 10px;
}

.modal-section-items {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.modal-section-items li {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.modal-section-items li:hover {
  background: rgba(255, 0, 30, 0.05);
  border-color: rgba(255, 0, 30, 0.2);
}

.modal-chk-badge {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(255, 0, 30, 0.25) 0%, rgba(255, 0, 30, 0.08) 100%);
  border: 1px solid rgba(255, 0, 30, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(255, 0, 30, 0.3);
}

.modal-chk-badge svg {
  width: 11px;
  height: 11px;
  stroke: #ff001e;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px #ff001e);
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.stealth-toast {
  background: rgba(14, 12, 16, 0.95);
  border: 1px solid rgba(255, 0, 30, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  padding: 12px 18px;
  color: #fff;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg), 0 0 25px rgba(255, 0, 30, 0.25);
  pointer-events: auto;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.stealth-toast.hide {
  opacity: 0;
  transform: translateY(10px) scale(0.95);
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.tier-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tier-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease-out;
}

.tier-card:hover,
.tier-card.selected {
  border-color: var(--red);
  background: rgba(255, 51, 68, 0.12);
}

.tier-card .duration {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.tier-card .price {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-bright);
  margin-top: 2px;
}

/* ========================================================================== */
/* PODIUM & LEADERBOARD SYSTEM (TOP 1-3 & EXPANDABLE RANKINGS)               */
/* ========================================================================== */
.podium-container {
  margin-top: 24px;
}

.podium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: end;
}

@media (max-width: 768px) {
  .podium-grid {
    grid-template-columns: 1fr;
  }
}

.podium-card {
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 26px 20px;
  text-align: center;
  position: relative;
  transition: all 0.2s ease-out;
  overflow: hidden;
}

.podium-card:hover {
  transform: translateY(-2px);
  border-color: var(--panel-line-hover);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.podium-1 {
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow: 0 0 35px var(--gold-glow);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, var(--bg-card) 100%);
  order: 2;
  transform: scale(1.02);
}

.podium-1:hover {
  transform: scale(1.02) translateY(-2px);
  border-color: rgba(251, 191, 36, 0.6);
}

.podium-2 {
  border-color: rgba(200, 205, 215, 0.25);
  background: linear-gradient(180deg, rgba(200, 205, 215, 0.05) 0%, var(--bg-card) 100%);
  order: 1;
}

.podium-3 {
  border-color: rgba(205, 127, 50, 0.25);
  background: linear-gradient(180deg, rgba(205, 127, 50, 0.05) 0%, var(--bg-card) 100%);
  order: 3;
}

/* Simple 1st, 2nd, 3rd Podium Badges */
.simple-podium-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-1st {
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.badge-2nd {
  background: rgba(200, 205, 215, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(200, 205, 215, 0.3);
}

.badge-3rd {
  background: rgba(205, 127, 50, 0.12);
  color: #ed8936;
  border: 1px solid rgba(205, 127, 50, 0.3);
}

.podium-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 12px auto 14px;
  border: 2px solid transparent;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.podium-1 .podium-avatar {
  width: 84px;
  height: 84px;
  border-color: var(--gold);
  box-shadow: 0 0 20px var(--gold-glow);
}

.podium-2 .podium-avatar {
  border-color: #cbd5e1;
}

.podium-3 .podium-avatar {
  border-color: #ed8936;
}

.podium-name {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.podium-score {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  margin-top: 8px;
}

.podium-1 .podium-score { color: var(--gold); }
.podium-2 .podium-score { color: #cbd5e1; }
.podium-3 .podium-score { color: #ed8936; }

.podium-metric-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* Full Leaderboard Table */
.leaderboard-table-card {
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-top: 24px;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.lb-table th {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--panel-line);
}

.lb-table td {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 14px;
}

.lb-table tr:hover td {
  background: rgba(255, 51, 68, 0.04);
}

.lb-user-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--panel-line);
}

.lb-user-name {
  font-weight: 700;
  color: var(--text-bright);
}

.lb-user-handle {
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.lb-rank-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 16px;
  color: var(--muted);
}

.lb-rank-1 { color: var(--gold) !important; }
.lb-rank-2 { color: #cbd5e1 !important; }
.lb-rank-3 { color: #ed8936 !important; }

/* Standalone Page Header */
.subpage-hero {
  padding: 70px 0 40px;
  text-align: center;
}

.subpage-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-bright);
}

.subpage-hero p {
  font-size: 16px;
  color: var(--muted);
  max-width: 680px;
  margin: 14px auto 0;
}

.subpage-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  background: var(--bg-card);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 14px 20px;
}

/* TEAM HERO — kept deliberately spare: just the blur-reveal heading (the
   homepage's hand-drawn highlight-frame word) and two buttons. An earlier
   pass here added a status badge and a trust row of stats; removed per
   feedback that it read as cluttered/off-brand rather than minimal.
   .subpage-hero itself stays untouched — /privacy and /terms use it too and
   are meant to stay plain — this is scoped to .team-hero / .team-hero-*. */
.subpage-hero h1 .blur-word {
  display: inline-block;
}

.team-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

/* ========================================================================== */
/* MOUSE SPOTLIGHT & CARD INTERACTIVITY (Smooth diffused radial glow)         */
/* ========================================================================== */
.interactive-glow-card,
.product-showcase-panel,
.review-card,
.stat-card,
.team-card,
.program-card,
.podium-card,
.chart-panel,
.purchases-panel,
.leaderboard-table-card {
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-out;
}

.interactive-glow-card::before,
.product-showcase-panel::before,
.review-card::before,
.stat-card::before,
.team-card::before,
.program-card::before,
.podium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 51, 68, 0.12), transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1;
}

.interactive-glow-card:hover::before,
.product-showcase-panel:hover::before,
.review-card:hover::before,
.stat-card:hover::before,
.team-card:hover::before,
.program-card:hover::before,
.podium-card:hover::before {
  opacity: 1;
}

/* Respect reduced-motion preference: drop continuous/ambient animations
   (pulse dots, marquee) to save CPU/GPU and avoid motion sickness triggers
   for visitors who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee-track {
    animation: none !important;
  }
}

/* ========================================================================= */
/* FOOTER — injected by nav.js into <footer id="site-footer">                */
/* ========================================================================= */
#site-footer {
  margin-top: 80px;
  border-top: 1px solid var(--panel-line);
  background: var(--bg-alt);
}

.footer-inner {
  padding: 56px 28px 28px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: space-between;
  padding-bottom: 40px;
}

.footer-brand {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-tagline {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  transition: all 0.2s ease-out;
}

.footer-social-btn:hover {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-red);
}

.footer-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 16px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.18s ease;
  width: fit-content;
}

.footer-link-arrow {
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.footer-col a:hover {
  color: var(--red);
}

.footer-col a:hover .footer-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--panel-line);
  font-size: 12.5px;
  color: var(--muted);
}

.footer-bottom-sub {
  font-size: 11.5px;
  color: var(--muted);
  opacity: 0.7;
}

@media (max-width: 700px) {
  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .footer-brand {
    max-width: none;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========================================================================= */
/* LEGAL PAGES (Privacy / Terms) — simple prose layout on the same shell     */
/* ========================================================================= */
.legal-page {
  padding: 48px 0 80px;
}

.legal-page .wrap {
  max-width: 820px;
}

.legal-page h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  color: var(--text-bright);
}

.legal-page .legal-updated {
  margin-top: 10px;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--muted);
}

.legal-page h2 {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-bright);
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.75;
}

.legal-page ul {
  margin-top: 8px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-page a {
  color: var(--red);
  text-decoration: none;
}

.legal-page a:hover {
  text-decoration: underline;
}