/* ===== CSS VARIABLES ===== */
:root {
  /* Colors */
  --cyan: #00C2D4;
  --blue: #2E8BF7;
  --purple: #7B3FF2;
  --violet: #9B59F0;
  --dark-bg: #0A0E1A;
  --dark-card: #111827;
  --gray-text: #8892A7;
  --light-gray: #C5CBD6;
  --white: #F8FAFC;

  /* Gradients */
  --gradient-cta: linear-gradient(135deg, #00C2D4, #2E8BF7);
  --gradient-logo: linear-gradient(135deg, #00C2D4, #7B3FF2);
  --gradient-text: linear-gradient(135deg, #00C2D4, #7B3FF2);

  /* Typography */
  --font-main: 'Instrument Sans', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-width: 1200px;
  --section-pad-v: 100px;
  --section-pad-h: clamp(16px, 4vw, 64px);

  /* Cards */
  --card-radius: 16px;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: 1px solid rgba(255, 255, 255, 0.06);
  --card-border-hover: rgba(255, 255, 255, 0.12);

  /* Nav */
  --nav-height: 72px;

  /* Transitions */
  --transition: 0.3s ease;
}