:root {
  /* High-End Dark Palette (Linear/Vercel Dark Spec) */
  --bg-void: #050608;
  --bg-base: #07080c;
  --bg-surface: #0c0e14;
  --bg-elevated: #11141d;
  --bg-overlay: #161924;

  /* Primary Accent: Electric Blue & Tactical Gold */
  --blue-50: #eef4ff;
  --blue-100: #d6e6ff;
  --blue-400: #3b82f6;
  --blue-500: #0055ff;
  --blue-600: #0044cc;
  --blue-glow: rgba(0, 85, 255, 0.35);
  --blue-dim: rgba(0, 85, 255, 0.08);
  --blue-border: rgba(0, 85, 255, 0.28);

  --cyan-400: #00d4ff;
  --cyan-500: #00b8e6;
  --cyan-glow: rgba(0, 212, 255, 0.25);
  --cyan-dim: rgba(0, 212, 255, 0.06);

  --gold-300: #f0c84a;
  --gold-400: #c9a227;
  --gold-500: #a07c10;
  --gold-glow: rgba(201, 162, 39, 0.30);
  --gold-dim: rgba(201, 162, 39, 0.08);

  --green: #00ff88;
  --green-glow: rgba(0, 255, 136, 0.25);
  --red: #ff4444;
  --red-glow: rgba(255, 68, 68, 0.25);
  --yellow: #ffb800;

  /* Typography Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.92);
  --text-muted: rgba(255, 255, 255, 0.75);
  --text-disabled: rgba(255, 255, 255, 0.24);

  /* Precise Glass & Borders (No soft blurry soup) */
  --glass-1: rgba(255, 255, 255, 0.025);
  --glass-2: rgba(255, 255, 255, 0.045);
  --glass-3: rgba(255, 255, 255, 0.07);
  --glass-border-1: rgba(255, 255, 255, 0.07);
  --glass-border-2: rgba(255, 255, 255, 0.12);
  --glass-border-3: rgba(255, 255, 255, 0.22);

  /* Gradients */
  --grad-hero: linear-gradient(180deg, #090a0f 0%, #050608 100%);
  --grad-blue: linear-gradient(135deg, #0055ff 0%, #00b8e6 100%);
  --grad-gold: linear-gradient(135deg, #c9a227 0%, #f0c84a 50%, #a07c10 100%);
  --grad-premium: linear-gradient(135deg, #0055ff 0%, #7b2fbe 50%, #00d4ff 100%);
  --grad-text: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.70) 100%);
  --grad-mesh: radial-gradient(ellipse at 20% 20%, rgba(0, 85, 255, 0.10) 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 80%, rgba(0, 212, 255, 0.06) 0%, transparent 60%);
}

:root {
  --font-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: clamp(0.68rem, 1.2vw, 0.75rem);
  --text-sm: clamp(0.85rem, 1.5vw, 0.92rem);
  --text-base: clamp(0.95rem, 1.8vw, 1.05rem);
  --text-md: clamp(1rem, 2vw, 1.15rem);
  --text-lg: clamp(1.15rem, 2.5vw, 1.3rem);
  --text-xl: clamp(1.3rem, 3vw, 1.6rem);
  --text-2xl: clamp(1.6rem, 4vw, 2.2rem);
  --text-3xl: clamp(2.2rem, 5vw, 3rem);
  --text-4xl: clamp(2.7rem, 6vw, 3.8rem);
  --text-5xl: clamp(3.2rem, 8vw, 5.2rem);
  --text-hero: clamp(3.8rem, 10vw, 7.2rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.5;
  --lh-relaxed: 1.68;

  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.09em;
  --ls-widest: 0.16em;
}

.t-hero { font-family: var(--font-display); font-size: var(--text-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); }
.t-h1 { font-family: var(--font-display); font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); }
.t-h2 { font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--lh-snug); letter-spacing: var(--ls-wide); }
.t-h3 { font-family: var(--font-body); font-size: var(--text-2xl); line-height: var(--lh-snug); font-weight: var(--fw-bold); }
.t-h4 { font-family: var(--font-body); font-size: var(--text-xl); line-height: var(--lh-normal); font-weight: var(--fw-semibold); }
.t-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.t-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--lh-normal); }
.t-caption { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-normal); letter-spacing: var(--ls-wider); text-transform: uppercase; font-weight: var(--fw-semibold); }
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); }

.text-gradient-blue { background: var(--grad-blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient-gold { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient-premium { background: var(--grad-premium); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-gradient-white { background: var(--grad-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

:root {
  --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; --space-32: 128px;

  --section-gap: clamp(56px, 8vw, 104px);
  --section-gap-sm: clamp(36px, 5vw, 64px);

  --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1400px;
}

.container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.container-lg { width: 100%; max-width: var(--container-lg); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.container-md { width: 100%; max-width: var(--container-md); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

:root {
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 36px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 64px rgba(0,0,0,0.7);

  --glow-blue-sm: 0 0 12px rgba(0,85,255,0.4);
  --glow-blue-md: 0 0 24px rgba(0,85,255,0.3);
  --glow-gold-md: 0 0 20px rgba(201,162,39,0.3);
  --glow-green-md: 0 0 16px rgba(0,255,136,0.3);

  --glass-blur: blur(16px) saturate(160%);
}

:root {
  --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; border: 1px solid transparent;
  cursor: pointer; transition: all var(--dur-normal) var(--ease-smooth);
  position: relative; overflow: hidden; white-space: nowrap; user-select: none;
}
.btn-primary { background: var(--blue-500); color: #fff; border-color: rgba(255,255,255,0.15); box-shadow: var(--glow-blue-sm); }
.btn-primary:hover { background: #1a6eff; transform: translateY(-1px); box-shadow: var(--glow-blue-md); }
.btn-gold { background: var(--grad-gold); color: #000; font-weight: var(--fw-bold); }
.btn-ghost { background: var(--glass-1); color: var(--text-secondary); border-color: var(--glass-border-1); }
.btn-ghost:hover { border-color: var(--glass-border-2); color: var(--text-primary); background: var(--glass-2); }

.product-card {
  background: var(--glass-1); border: 1px solid var(--glass-border-1);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: all var(--dur-slow) var(--ease-out); backdrop-filter: var(--glass-blur);
}
.product-card:hover { border-color: var(--blue-border); background: rgba(0, 85, 255, 0.03); transform: translateY(-4px); }