/* ============================================
   FloatPeak — Design System v3.0
   CS2 Tactical Dark | Maximum Detail
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600&family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ───────────────────────── */
:root {
  /* Backgrounds */
  --bg-deep:     #0a0a0f;
  --bg-surface:  #12131a;
  --bg-elevated: #1a1b26;
  --bg-hover:    #22243a;
  --bg-overlay:  #2a2c3e;

  /* Borders */
  --border-subtle: #2a2d45;
  --border-muted:  #1e2038;
  --border-focus:  #3d4167;
  --border-active: #4f8cff;

  /* Accent colors */
  --accent-primary:     #4f8cff;
  --accent-primary-rgb: 79, 140, 255;
  --accent-hot:         #ff6b35;
  --accent-hot-rgb:     255, 107, 53;
  --accent-gold:        #ffd700;
  --accent-gold-rgb:    255, 215, 0;
  --accent-green:       #00e676;
  --accent-green-rgb:   0, 230, 118;
  --accent-red:         #ff1744;
  --accent-red-rgb:     255, 23, 68;
  --accent-purple:      #b388ff;
  --accent-purple-rgb:  179, 136, 255;

  /* CS2 Rarity System */
  --rarity-white:      #b0c3d9;
  --rarity-blue:       #4b69ff;
  --rarity-blue-rgb:   75, 105, 255;
  --rarity-purple:     #8847ff;
  --rarity-purple-rgb: 136, 71, 255;
  --rarity-pink:       #d32ce6;
  --rarity-pink-rgb:   211, 44, 230;
  --rarity-red:        #eb4b4b;
  --rarity-red-rgb:    235, 75, 75;
  --rarity-gold:       #ffd700;
  --rarity-gold-rgb:   255, 215, 0;
  --rarity-star:       #e4ae39;

  /* Backward-compat rarity aliases */
  --rarity-consumer:   var(--rarity-white);
  --rarity-industrial: var(--rarity-blue);
  --rarity-milspec:    var(--rarity-purple);
  --rarity-restricted: var(--rarity-pink);
  --rarity-classified: var(--rarity-red);
  --rarity-covert:     var(--rarity-gold);
  --rarity-ancient:    var(--rarity-star);

  /* Gradient presets */
  --gradient-hero:       linear-gradient(135deg, #0a0a0f 0%, #111024 55%, #0c1420 100%);
  --gradient-card-hover: linear-gradient(180deg, rgba(79,140,255,0.07) 0%, transparent 60%);
  --gradient-cta:        linear-gradient(135deg, #4f8cff 0%, #3a6fd8 100%);
  --gradient-gold:       linear-gradient(135deg, #ffd700 0%, #e4ae39 50%, #ffd700 100%);

  /* Glow presets */
  --glow-primary: 0 0 20px rgba(79,140,255,0.25), 0 0 60px rgba(79,140,255,0.10);
  --glow-hot:     0 0 20px rgba(255,107,53,0.30);
  --glow-gold:    0 0 25px rgba(255,215,0,0.30);
  --glow-purple:  0 0 20px rgba(179,136,255,0.25);

  /* Text scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Font weights — intentionally capped at 600 */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;

  /* Font families */
  --font-display: 'Bebas Neue', 'Oswald', system-ui, sans-serif;
  --font-head:    'Rajdhani', 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Text colors */
  --text-primary:   #e8eaf0;
  --text-secondary: #8b8fa3;
  --text-muted:     #555872;
  --text-disabled:  #383a52;
  --text-accent:    #4f8cff;
  --text-on-accent: #ffffff;

  /* Spacing (8px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Backward-compat sp aliases */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px;  --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px;  --sp-9: 96px; --sp-10: 128px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --r-xs: 4px; --r-sm: 4px; --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px;

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-mid:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container:    1280px;
  --container-sm: 800px;

  /* Backward-compat aliases (templates reference these) */
  --bg-0:            var(--bg-deep);
  --bg-1:            var(--bg-surface);
  --bg-2:            var(--bg-elevated);
  --bg-3:            var(--bg-hover);
  --bg-muted:        var(--bg-hover);
  --accent:          var(--accent-primary);
  --accent-hover:    #6fa3ff;
  --accent-dim:      #3a6ecc;
  --accent-glow:     rgba(79,140,255,0.28);
  --accent-subtle:   rgba(79,140,255,0.08);
  --accent-border:   rgba(79,140,255,0.20);
  --orange:          var(--accent-hot);
  --orange-glow:     rgba(255,107,53,0.25);
  --orange-subtle:   rgba(255,107,53,0.08);
  --purple:          var(--rarity-purple);
  --purple-glow:     rgba(136,71,255,0.25);
  --purple-subtle:   rgba(136,71,255,0.08);
  --cyan:            #00d9ff;
  --cyan-glow:       rgba(0,217,255,0.22);
  --cyan-subtle:     rgba(0,217,255,0.06);
  --green:           var(--accent-green);
  --green-subtle:    rgba(0,230,118,0.09);
  --red:             var(--accent-red);
  --red-subtle:      rgba(255,23,68,0.09);
  --gold:            var(--accent-gold);
  --gold-subtle:     rgba(255,215,0,0.09);
  --text-1:          var(--text-primary);
  --text-2:          var(--text-secondary);
  --text-3:          var(--text-muted);
  --text-4:          var(--text-disabled);
  --border-default:  var(--border-subtle);
  --border-strong:   var(--border-focus);
  --glass-bg:        rgba(18,19,26,0.75);
  --glass-bg-md:     rgba(18,19,26,0.93);
  --glass-border:    var(--border-subtle);
  --glass-border-hover: rgba(79,140,255,0.22);
  --glass-blur:      blur(20px);
  --glass-blur-sm:   blur(10px);
}

/* ── RESET ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

/* ── BODY — TACTICAL DEPTH ───────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: 1.7;
  color: var(--text-secondary);
  background-color: var(--bg-deep);
  /* Multi-layer: dot grid + ambient colour blobs */
  background-image:
    radial-gradient(circle, rgba(42,45,69,0.55) 1px, transparent 1px),
    radial-gradient(ellipse 900px 650px at 15% -5%,   rgba(79,140,255,0.065) 0%, transparent 70%),
    radial-gradient(ellipse 700px 500px at 88% 35%,   rgba(136,71,255,0.040) 0%, transparent 70%),
    radial-gradient(ellipse 800px 400px at 50%  105%, rgba(79,140,255,0.050) 0%, transparent 70%);
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--accent-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }

/* ── CUSTOM SCROLLBAR ────────────────────── */
::-webkit-scrollbar          { width: 7px; height: 7px; }
::-webkit-scrollbar-track    { background: var(--bg-deep); }
::-webkit-scrollbar-thumb    { background: var(--border-focus); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-primary); }

/* ── SELECTION ───────────────────────────── */
::selection { background: rgba(79,140,255,0.28); color: var(--text-primary); }

/* ── FOCUS ───────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── TYPOGRAPHY ──────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: 0.025em;
}
h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); }
h3 { font-size: clamp(var(--text-xl), 2vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); font-weight: var(--font-medium); }
h5 { font-size: var(--text-base); font-weight: var(--font-medium); }
h6 { font-size: var(--text-sm); font-weight: var(--font-medium); }

p { color: var(--text-secondary); margin-bottom: var(--space-4); line-height: 1.75; }
p:last-child { margin-bottom: 0; }

.display { font-family: var(--font-display); letter-spacing: 0.04em; line-height: 1.0; }

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, var(--text-primary) 20%, var(--accent-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PROSE ───────────────────────────────── */
.prose h2 { margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.prose h3 { margin: var(--space-8) 0 var(--space-3); }
.prose h4 { margin: var(--space-6) 0 var(--space-3); }
.prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { color: var(--text-secondary); margin-bottom: var(--space-2); line-height: 1.7; }
.prose strong { color: var(--text-primary); font-weight: var(--font-semibold); }
.prose em { color: var(--text-muted); }
.prose code {
  font-family: var(--font-mono); font-size: 0.84em;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 2px 6px;
  color: var(--accent-primary);
}
.prose a { color: var(--accent-primary); border-bottom: 1px solid rgba(79,140,255,0.25); }
.prose a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-primary); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; }
.prose th { background: var(--bg-elevated); font-family: var(--font-head); font-weight: var(--font-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); text-align: left; }
.prose td { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-muted); color: var(--text-secondary); font-size: var(--text-sm); }
.prose tr:hover td { background: rgba(79,140,255,0.04); }

.mono        { font-family: var(--font-mono); }
.accent-text { color: var(--accent-primary); }
.muted       { color: var(--text-muted); }

/* ── LAYOUT ──────────────────────────────── */
.container    { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.container-sm { max-width: var(--container-sm); margin: 0 auto; padding: 0 var(--space-6); }
section { padding: var(--space-16) 0; }

/* ── GLASS ───────────────────────────────── */
.glass    { background: rgba(18,19,26,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.glass-md { background: rgba(18,19,26,0.93); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }

/* ── BUTTONS ─────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-head);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: all var(--t-mid);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* Subtle shimmer layer on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.btn:hover::after { transform: translateX(100%); }

.btn-primary {
  background: var(--gradient-cta);
  color: var(--text-on-accent);
  border-color: rgba(79,140,255,0.4);
  box-shadow: var(--glow-primary), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #6fa3ff 0%, #4f8cff 100%);
  color: var(--text-on-accent);
  box-shadow: 0 0 30px rgba(79,140,255,0.4), 0 0 80px rgba(79,140,255,0.15);
  transform: translateY(-2px);
}
.btn-primary:active { transform: scale(0.97); filter: brightness(0.95); }

.btn-gold {
  background: var(--gradient-gold);
  color: #0a0a0f;
  border-color: rgba(255,215,0,0.4);
  box-shadow: var(--glow-gold);
}
.btn-gold:hover { filter: brightness(1.15); transform: translateY(-2px); color: #0a0a0f; }

.btn-trading {
  background: rgba(0,217,255,0.12);
  color: #00d9ff;
  border-color: rgba(0,217,255,0.30);
}
.btn-trading:hover { background: rgba(0,217,255,0.20); border-color: rgba(0,217,255,0.55); transform: translateY(-2px); color: #00d9ff; }

.btn-gear {
  background: rgba(255,107,53,0.12);
  color: var(--accent-hot);
  border-color: rgba(255,107,53,0.30);
}
.btn-gear:hover { background: rgba(255,107,53,0.20); border-color: rgba(255,107,53,0.55); transform: translateY(-2px); color: var(--accent-hot); }

.btn-vpn {
  background: rgba(136,71,255,0.12);
  color: var(--rarity-purple);
  border-color: rgba(136,71,255,0.30);
}
.btn-vpn:hover { background: rgba(136,71,255,0.20); border-color: rgba(136,71,255,0.55); transform: translateY(-2px); color: var(--rarity-purple); }

.btn-ghost {
  background: transparent;
  color: var(--accent-primary);
  border-color: rgba(79,140,255,0.25);
}
.btn-ghost:hover { background: rgba(79,140,255,0.08); border-color: rgba(79,140,255,0.5); }

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}
.btn-outline:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-focus); }

.btn-lg   { padding: 13px var(--space-8); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-sm   { padding: 6px var(--space-4); font-size: var(--text-xs); }
.btn-full { width: 100%; justify-content: center; }

/* ── SKIN CARD ───────────────────────────── */
.skin-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 0;
}
/* Rarity top stripe */
.skin-card[data-rarity="consumer"]   { border-top: 2px solid var(--rarity-white); }
.skin-card[data-rarity="industrial"] { border-top: 2px solid var(--rarity-blue); }
.skin-card[data-rarity="milspec"]    { border-top: 2px solid var(--rarity-purple); }
.skin-card[data-rarity="restricted"] { border-top: 2px solid var(--rarity-pink); }
.skin-card[data-rarity="classified"] { border-top: 2px solid var(--rarity-red); }
.skin-card[data-rarity="covert"]     { border-top: 2px solid var(--rarity-gold); }
.skin-card[data-rarity="ancient"]    { border-top: 2px solid var(--rarity-star); }

/* Rarity glow on hover */
.skin-card:hover { transform: translateY(-3px); }
.skin-card[data-rarity="consumer"]:hover   { border-color: var(--rarity-white);  box-shadow: 0 0 16px rgba(176,195,217,0.12), 0 8px 32px rgba(0,0,0,0.4); }
.skin-card[data-rarity="industrial"]:hover { border-color: var(--rarity-blue);   box-shadow: 0 0 16px rgba(var(--rarity-blue-rgb),0.22), 0 8px 32px rgba(0,0,0,0.4); }
.skin-card[data-rarity="milspec"]:hover    { border-color: var(--rarity-purple); box-shadow: 0 0 16px rgba(var(--rarity-purple-rgb),0.25), 0 8px 32px rgba(0,0,0,0.4); }
.skin-card[data-rarity="restricted"]:hover { border-color: var(--rarity-pink);  box-shadow: 0 0 16px rgba(var(--rarity-pink-rgb),0.25), 0 8px 32px rgba(0,0,0,0.4); }
.skin-card[data-rarity="classified"]:hover { border-color: var(--rarity-red);   box-shadow: 0 0 16px rgba(var(--rarity-red-rgb),0.22), 0 8px 32px rgba(0,0,0,0.4); }
.skin-card[data-rarity="covert"]:hover     { border-color: var(--rarity-gold);  box-shadow: 0 0 20px rgba(var(--rarity-gold-rgb),0.30), 0 8px 32px rgba(0,0,0,0.4); }
.skin-card[data-rarity="ancient"]:hover    { border-color: var(--rarity-star);  box-shadow: 0 0 18px rgba(228,174,57,0.28), 0 8px 32px rgba(0,0,0,0.4); }

.skin-card__img-wrap { overflow: hidden; aspect-ratio: 4/3; position: relative; }
.skin-card__img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.skin-card:hover .skin-card__img { transform: scale(1.05) rotate3d(0, 1, 0, 3deg); }

.skin-card__body   { padding: var(--space-3); }
.skin-card__rarity { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-2); }
.skin-card[data-rarity="industrial"] .skin-card__rarity { color: var(--rarity-blue); }
.skin-card[data-rarity="milspec"]    .skin-card__rarity { color: var(--rarity-purple); }
.skin-card[data-rarity="restricted"] .skin-card__rarity { color: var(--rarity-pink); }
.skin-card[data-rarity="classified"] .skin-card__rarity { color: var(--rarity-red); }
.skin-card[data-rarity="covert"]     .skin-card__rarity { color: var(--rarity-gold); }
.skin-card[data-rarity="ancient"]    .skin-card__rarity { color: var(--rarity-star); }

.skin-card__name  { font-family: var(--font-head); font-weight: var(--font-semibold); font-size: var(--text-base); color: var(--text-primary); margin-bottom: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-card__sub   { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.skin-card__price { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--accent-green); }
.skin-card__float { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }

/* "HOT" badge absolute */
.skin-card__hot {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: var(--font-medium);
  text-transform: uppercase; letter-spacing: 0.1em;
  background: rgba(255,107,53,0.15); color: var(--accent-hot);
  border: 1px solid rgba(255,107,53,0.30);
  padding: 2px 7px; border-radius: var(--radius-sm);
}

/* ── RARITY BADGE ────────────────────────── */
.rarity-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: var(--font-medium);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.rarity-badge::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.rarity-badge--white    { color: var(--rarity-white);  background: rgba(176,195,217,0.07); }
.rarity-badge--blue     { color: var(--rarity-blue);   background: rgba(75,105,255,0.09); }
.rarity-badge--purple   { color: var(--rarity-purple); background: rgba(136,71,255,0.09); }
.rarity-badge--pink     { color: var(--rarity-pink);   background: rgba(211,44,230,0.09); }
.rarity-badge--red      { color: var(--rarity-red);    background: rgba(235,75,75,0.09); }
.rarity-badge--gold     { color: var(--rarity-gold);   background: rgba(255,215,0,0.09); }
.rarity-badge--star     { color: var(--rarity-star);   background: rgba(228,174,57,0.09); }
/* backward compat */
.rarity-badge--consumer   { color: var(--rarity-white);  background: rgba(176,195,217,0.07); }
.rarity-badge--milspec    { color: var(--rarity-purple); background: rgba(136,71,255,0.09); }
.rarity-badge--restricted { color: var(--rarity-pink);   background: rgba(211,44,230,0.09); }
.rarity-badge--classified { color: var(--rarity-red);    background: rgba(235,75,75,0.09); }
.rarity-badge--covert     { color: var(--rarity-gold);   background: rgba(255,215,0,0.09); }
.rarity-badge--ancient    { color: var(--rarity-star);   background: rgba(228,174,57,0.09); }
.rarity-badge--stattrak   { color: var(--rarity-star);   background: rgba(228,174,57,0.09); }

/* ── VERDICT BOX ─────────────────────────── */
.verdict-box {
  background: var(--bg-surface);
  border: 1px solid rgba(79,140,255,0.18);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}
.verdict-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
}
.verdict-box__header   { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.verdict-box__score    { font-family: var(--font-mono); font-size: 2.5rem; font-weight: var(--font-medium); color: var(--accent-primary); line-height: 1; }
.verdict-box__label    { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 2px; font-family: var(--font-mono); }
.verdict-box__name     { font-family: var(--font-head); font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--text-primary); }
.verdict-box__best-for { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.verdict-box__best-for strong { color: var(--text-secondary); font-weight: var(--font-medium); }
.verdict-box__cta      { margin-top: var(--space-4); }
.verdict-box__disclaimer { font-size: var(--text-xs); color: var(--text-disabled); margin-top: var(--space-2); }

/* ── GEAR SCORE BOX ──────────────────────── */
.gear-score { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-4); }
.gear-score__title    { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-disabled); margin-bottom: var(--space-3); font-family: var(--font-mono); }
.gear-score__row      { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.04); gap: var(--space-4); }
.gear-score__row:last-child { border-bottom: none; }
.gear-score__metric   { font-size: var(--text-sm); color: var(--text-secondary); font-weight: var(--font-regular); }
.gear-score__bar-wrap { flex: 1; height: 3px; background: var(--bg-hover); border-radius: 2px; overflow: hidden; max-width: 120px; }
.gear-score__bar      { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-primary), #6fa3ff); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.gear-score__val      { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--accent-primary); min-width: 36px; text-align: right; }
.gear-score__overall  { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); margin-top: var(--space-2); border-top: 1px solid rgba(79,140,255,0.18); }
.gear-score__overall-label { font-family: var(--font-head); font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--text-primary); }
.gear-score__overall-val   { font-family: var(--font-mono); font-size: 1.4rem; font-weight: var(--font-medium); color: var(--accent-primary); }

/* ── FLOAT BAR ───────────────────────────── */
.float-bar { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; }
.float-bar__labels { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--text-disabled); font-family: var(--font-mono); margin-bottom: var(--space-2); }
.float-bar__track  { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #22c55e 0%, #86efac 28%, #f59e0b 50%, #f97316 75%, #ef4444 100%); margin-bottom: var(--space-3); }
.float-bar__marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #fff; border-radius: 50%; border: 2px solid var(--bg-deep); box-shadow: 0 0 10px rgba(79,140,255,0.7); }
.float-bar__value  { text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-primary); }
.float-bar__tiers  { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-disabled); margin-top: var(--space-1); }

/* ── PRICE TICKER ────────────────────────── */
.price-tick      { font-family: var(--font-mono); font-weight: var(--font-medium); transition: color var(--t-fast); }
.price-tick.up   { color: var(--accent-green); animation: priceUp 0.5s ease forwards; }
.price-tick.down { color: var(--accent-red);   animation: priceDown 0.5s ease forwards; }

/* ── COMPARISON TABLE ────────────────────── */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); margin: var(--space-6) 0; background: var(--bg-surface); }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 560px; }
.compare-table thead { background: var(--bg-elevated); }
.compare-table th { font-family: var(--font-head); font-weight: var(--font-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; }
.compare-table th:first-child { color: var(--text-secondary); }
.compare-table th[data-sortable] { cursor: pointer; user-select: none; }
.compare-table th[data-sortable]:hover { color: var(--accent-primary); }
.compare-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-muted); color: var(--text-secondary); vertical-align: middle; }
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tbody tr { transition: background var(--t-fast); }
.compare-table tbody tr:hover td { background: rgba(79,140,255,0.04); }
.compare-table .winner-row td { background: rgba(79,140,255,0.04); border-left: 2px solid var(--accent-primary); }
.compare-table .col-name { font-weight: var(--font-semibold); color: var(--text-primary); font-family: var(--font-head); }
.compare-table .col-name a { color: var(--text-primary); }
.compare-table .col-name a:hover { color: var(--accent-primary); }
.compare-table .check { color: var(--accent-green); }
.compare-table .cross { color: var(--accent-red); }
.compare-table .highlight { color: var(--accent-primary); font-family: var(--font-mono); font-weight: var(--font-medium); }

/* ── BADGE / TAG ─────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-size: 0.62rem; font-weight: var(--font-medium);
  font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.badge-accent { background: rgba(79,140,255,0.09);  color: var(--accent-primary); border: 1px solid rgba(79,140,255,0.20); }
.badge-orange { background: rgba(255,107,53,0.09);  color: var(--accent-hot);     border: 1px solid rgba(255,107,53,0.22); }
.badge-purple { background: rgba(136,71,255,0.09);  color: var(--rarity-purple);  border: 1px solid rgba(136,71,255,0.22); }
.badge-green  { background: rgba(0,230,118,0.09);   color: var(--accent-green);   border: 1px solid rgba(0,230,118,0.22); }
.badge-red    { background: rgba(255,23,68,0.09);   color: var(--accent-red);     border: 1px solid rgba(255,23,68,0.22); }
.badge-gold   { background: rgba(255,215,0,0.09);   color: var(--accent-gold);    border: 1px solid rgba(255,215,0,0.22); }

/* Specific badge variants per spec */
.badge-new    { background: rgba(79,140,255,0.12);  color: var(--accent-primary); border: 1px solid rgba(79,140,255,0.25); }
.badge-hot    { background: rgba(255,107,53,0.12);  color: var(--accent-hot);     border: 1px solid rgba(255,107,53,0.28); }
.badge-deal   { background: rgba(255,215,0,0.10);   color: var(--accent-gold);    border: 1px solid rgba(255,215,0,0.25); }
.badge-sold   { background: rgba(255,23,68,0.10);   color: var(--accent-red);     border: 1px solid rgba(255,23,68,0.25); }

/* ── STARS / RATING ──────────────────────── */
.stars     { display: flex; gap: 2px; align-items: center; }
.star      { color: var(--accent-gold); font-size: var(--text-sm); }
.star.empty { color: var(--text-disabled); }
.rating-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-gold); margin-left: var(--space-2); font-weight: var(--font-medium); }

/* ── PROS / CONS ─────────────────────────── */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-6) 0; }
.pros-cons__list { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.pros-cons__list.pros { border-top: 2px solid var(--accent-green); }
.pros-cons__list.cons { border-top: 2px solid var(--accent-red); }
.pros-cons__title { font-family: var(--font-head); font-weight: var(--font-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-3); }
.pros-cons__list.pros .pros-cons__title { color: var(--accent-green); }
.pros-cons__list.cons .pros-cons__title { color: var(--accent-red); }
.pros-cons__item { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03); font-weight: var(--font-regular); }
.pros-cons__item:last-child { border-bottom: none; }

/* ── FAQ ACCORDION ───────────────────────── */
.faq-section       { margin: var(--space-12) 0; }
.faq-section__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: var(--space-6); font-family: var(--font-mono); }
.faq-list          { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item          { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--t-fast); }
.faq-item:hover    { border-color: var(--border-focus); }
.faq-item__q       {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); background: none; border: none;
  color: var(--text-primary); cursor: pointer;
  font-size: var(--text-base); font-weight: var(--font-medium); font-family: var(--font-head);
  letter-spacing: 0.02em; padding: var(--space-4) var(--space-5); text-align: left;
  transition: color var(--t-fast);
}
.faq-item__q:hover { color: var(--accent-primary); }
.faq-item__icon    { color: var(--accent-primary); font-size: 1.1rem; font-weight: 300; flex-shrink: 0; transition: transform var(--t-fast); line-height: 1; }
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item__a       { padding: 0 var(--space-5) var(--space-4); color: var(--text-muted); font-size: var(--text-sm); line-height: 1.75; font-weight: var(--font-regular); }
.faq-item__a[hidden] { display: none; }

/* ── AUTHOR BOX ──────────────────────────── */
.author-box         { display: flex; align-items: flex-start; gap: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-top: var(--space-12); }
.author-box__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-focus); }
.author-box__name   { font-family: var(--font-head); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: 2px; font-size: var(--text-base); }
.author-box__role   { font-size: var(--text-xs); color: var(--accent-primary); margin-bottom: var(--space-2); font-family: var(--font-mono); }
.author-box__bio    { font-size: var(--text-sm); color: var(--text-muted); margin: 0; font-weight: var(--font-regular); }

/* ── BREADCRUMB ──────────────────────────── */
.breadcrumb         { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-disabled); margin-bottom: var(--space-6); font-family: var(--font-mono); }
.breadcrumb a       { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-primary); }
.breadcrumb__sep    { color: var(--text-disabled); margin: 0 2px; }
.breadcrumb__current { color: var(--text-secondary); }

/* ── ALERTS ──────────────────────────────── */
.alert         { padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); border-left: 2px solid; margin: var(--space-6) 0; line-height: 1.6; }
.alert p       { margin: 0; font-size: inherit; }
.alert-info    { border-color: var(--accent-primary); background: rgba(79,140,255,0.07);  color: var(--text-secondary); }
.alert-warning { border-color: var(--accent-gold);   background: rgba(255,215,0,0.07);   color: var(--text-secondary); }
.alert-success { border-color: var(--accent-green);  background: rgba(0,230,118,0.07);   color: var(--text-secondary); }
.alert-danger  { border-color: var(--accent-red);    background: rgba(255,23,68,0.07);   color: var(--text-secondary); }

/* ── STAT BOX ────────────────────────────── */
.stat-box        { text-align: center; padding: var(--space-5); }
.stat-box__value { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; color: var(--accent-primary); margin-bottom: var(--space-2); letter-spacing: 0.04em; }
.stat-box__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-family: var(--font-mono); }

/* ── SECTION HEADER ──────────────────────── */
.section-header        { text-align: center; margin-bottom: var(--space-12); }
.section-header__label { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent-primary); margin-bottom: var(--space-3); padding: 4px 14px; background: rgba(79,140,255,0.07); border: 1px solid rgba(79,140,255,0.18); border-radius: var(--radius-full); }
.section-header h2     { margin-bottom: var(--space-4); }
.section-header p      { max-width: 560px; margin: 0 auto; color: var(--text-muted); font-weight: var(--font-regular); }

/* ── HUB CARDS — Tactical gradient border on hover ── */
.hub-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--t-mid);
  position: relative;
  overflow: hidden;
}
/* Gradient corner glow on hover — mask technique */
.hub-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(135deg, rgba(79,140,255,0.5) 0%, transparent 40%, transparent 60%, rgba(79,140,255,0.2) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  transition: opacity var(--t-mid);
  pointer-events: none;
}
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.45); }
.hub-card:hover::before { opacity: 1; }

/* Top silo stripes */
.hub-card--gear    { border-top: 2px solid var(--accent-hot); }
.hub-card--trading { border-top: 2px solid #00d9ff; }
.hub-card--vpn     { border-top: 2px solid var(--rarity-purple); }
.hub-card--guides  { border-top: 2px solid var(--accent-green); }
.hub-card--tools   { border-top: 2px solid var(--accent-gold); }

/* Silo-specific glow on hover */
.hub-card--gear:hover    { box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 30px rgba(255,107,53,0.08); }
.hub-card--trading:hover { box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 30px rgba(0,217,255,0.07); }
.hub-card--vpn:hover     { box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 30px rgba(136,71,255,0.10); }
.hub-card--guides:hover  { box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 30px rgba(0,230,118,0.07); }

.hub-card__icon   { font-size: 1.6rem; margin-bottom: var(--space-4); display: block; }
.hub-card__title  { font-family: var(--font-head); font-weight: var(--font-semibold); font-size: var(--text-xl); margin-bottom: var(--space-3); color: var(--text-primary); letter-spacing: 0.02em; }
.hub-card__desc   { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); line-height: 1.65; font-weight: var(--font-regular); }
.hub-card__links  { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.hub-card__link   { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); transition: color var(--t-fast); padding: 3px 0; font-weight: var(--font-regular); }
.hub-card__link:hover { color: var(--text-primary); }
.hub-card__link::before { content: '›'; color: var(--accent-primary); font-size: 1rem; flex-shrink: 0; }

/* ── PRODUCT CARD ────────────────────────── */
.product-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: all var(--t-mid);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-xl) + 1px);
  background: linear-gradient(135deg, rgba(79,140,255,0.45) 0%, transparent 45%, transparent 55%, rgba(79,140,255,0.18) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  transition: opacity var(--t-mid);
  pointer-events: none;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.product-card:hover::before { opacity: 1; }

.product-card__rank    { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-disabled); margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.14em; }
.product-card__name    { font-family: var(--font-head); font-weight: var(--font-semibold); font-size: var(--text-lg); color: var(--text-primary); margin-bottom: var(--space-2); line-height: 1.3; letter-spacing: 0.02em; }
.product-card__name a  { color: inherit; }
.product-card__name a:hover { color: var(--accent-primary); }
.product-card__price   { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-gold); margin-bottom: var(--space-3); font-weight: var(--font-medium); }
.product-card__summary { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); line-height: 1.65; flex: 1; font-weight: var(--font-regular); }
.product-card__cta     { width: 100%; justify-content: center; margin-top: auto; }

/* ── SKELETON LOADER ─────────────────────── */
.skeleton { background: var(--bg-elevated); border-radius: var(--radius-md); position: relative; overflow: hidden; }
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  animation: shimmer 1.6s infinite;
  background-size: 200% 100%;
}
.skeleton-text  { height: 14px; margin-bottom: 8px; border-radius: var(--radius-sm); }
.skeleton-title { height: 24px; margin-bottom: 12px; width: 60%; border-radius: var(--radius-sm); }
.skeleton-card  { height: 180px; border-radius: var(--radius-xl); }

/* ── STICKY CTA ──────────────────────────── */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: rgba(10,10,15,0.97); border-top: 1px solid rgba(79,140,255,0.18); backdrop-filter: blur(20px); padding: var(--space-3) var(--space-4); transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); }
.sticky-cta--visible { transform: translateY(0); }
.sticky-cta__inner   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: 900px; margin: 0 auto; flex-wrap: wrap; }
.sticky-cta__text    { font-size: var(--text-sm); color: var(--text-secondary); }
.sticky-cta__text strong { color: var(--text-primary); font-weight: var(--font-medium); }
.sticky-cta__close   { background: none; border: none; color: var(--text-disabled); cursor: pointer; font-size: 1rem; padding: 4px 8px; transition: color var(--t-fast); }
.sticky-cta__close:hover { color: var(--text-primary); }

/* ── TOAST NOTIFICATIONS ─────────────────── */
.toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 1000; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
.toast { pointer-events: all; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); max-width: 380px; font-size: var(--text-sm); color: var(--text-secondary); border-left: 3px solid var(--border-focus); animation: fadeInUp 0.2s ease; display: flex; align-items: flex-start; gap: var(--space-3); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.toast--success { border-left-color: var(--accent-green); }
.toast--error   { border-left-color: var(--accent-red); }
.toast--info    { border-left-color: var(--accent-primary); }
.toast--warn    { border-left-color: var(--accent-gold); }

/* ── EMPTY STATE ─────────────────────────── */
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); }
.empty-state__icon { font-size: 2.5rem; margin-bottom: var(--space-4); opacity: 0.3; }
.empty-state__title { font-family: var(--font-head); font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: var(--space-3); }
.empty-state__text { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-6); max-width: 400px; margin-inline: auto; }

/* ── DIVIDERS ────────────────────────────── */
.glow-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(79,140,255,0.25), transparent); border: none; margin: 0; }
.tactical-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-12) 0; color: var(--text-disabled); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; }
.tactical-divider::before, .tactical-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-muted); }

/* ── GRID UTILITIES ──────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.col-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }

/* ── ANIMATIONS ──────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes priceUp {
  0%   { color: var(--text-secondary); transform: scale(1); }
  40%  { color: var(--accent-green); transform: scale(1.1); }
  100% { color: var(--accent-green); transform: scale(1); }
}
@keyframes priceDown {
  0%   { color: var(--text-secondary); transform: scale(1); }
  40%  { color: var(--accent-red); transform: scale(0.95); }
  100% { color: var(--accent-red); transform: scale(1); }
}
@keyframes subtlePulse {
  0%, 100% { box-shadow: var(--glow-primary); }
  50%       { box-shadow: 0 0 28px rgba(79,140,255,0.40), 0 0 80px rgba(79,140,255,0.15); }
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
@keyframes heroAmbient {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1; }
}
/* Backward compat alias */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(79,140,255,0.2); }
  50%       { box-shadow: 0 0 24px rgba(79,140,255,0.4); }
}

.animate-fade-up { animation: fadeInUp 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
.glow-pulse { animation: subtlePulse 2.5s ease-in-out infinite; }

/* Stagger — 50ms per child */
.stagger > *:nth-child(1) { animation-delay:   0ms; }
.stagger > *:nth-child(2) { animation-delay:  50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .skeleton::after { animation: none; }
  body { background-attachment: scroll, scroll, scroll, scroll; }
}

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .col-8, .col-6 { grid-column: span 12; }
  .col-4, .col-3 { grid-column: span 6; }
}
@media (max-width: 768px) {
  :root { --space-16: 48px; --space-24: 64px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .pros-cons { grid-template-columns: 1fr; }
  .container { padding: 0 var(--space-4); }
  .verdict-box__header { flex-direction: column; align-items: flex-start; }
  .col-4, .col-3 { grid-column: span 12; }
  .toast-container { right: var(--space-4); bottom: var(--space-4); left: var(--space-4); }
  .toast { max-width: 100%; }
}
@media (max-width: 480px) {
  .compare-table th, .compare-table td { padding: var(--space-2) var(--space-3); }
  .author-box { flex-direction: column; }
}