:root {
  /* Core colors */
  --clr-bg:          #05051a;
  --clr-bg-2:        #080820;
  --clr-surface:     #0e0e30;
  --clr-surface-2:   #14143a;
  --clr-border:      rgba(124, 58, 237, 0.22);
  --clr-border-cyan: rgba(6, 182, 212, 0.22);
  --clr-border-glow: rgba(124, 58, 237, 0.5);

  /* Brand colors */
  --clr-purple:      #7c3aed;
  --clr-purple-lt:   #9b6ffe;
  --clr-cyan:        #06b6d4;
  --clr-cyan-lt:     #38d0e8;
  --clr-pink:        #ec4899;

  /* Text */
  --clr-text:        #f8fafc;
  --clr-text-2:      #cbd5e1;
  --clr-text-muted:  #94a3b8;
  --clr-text-dim:    #64748b;

  /* Gradients */
  --grad-brand:      linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  --grad-brand-h:    linear-gradient(135deg, #9b6ffe 0%, #38d0e8 100%);
  --grad-text:       linear-gradient(90deg, #9b6ffe, #06b6d4, #ec4899);
  --grad-hero-bg:    radial-gradient(ellipse at 30% 40%, rgba(124,58,237,0.18) 0%, transparent 60%),
                     radial-gradient(ellipse at 70% 60%, rgba(6,182,212,0.12) 0%, transparent 60%),
                     #05051a;
  --grad-card:       linear-gradient(135deg, rgba(124,58,237,0.06), rgba(6,182,212,0.06));
  --grad-section:    radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.05) 0%, transparent 70%);

  /* Shadows & glows */
  --shadow-card:     0 4px 24px rgba(0,0,0,0.4);
  --shadow-card-h:   0 8px 40px rgba(124,58,237,0.25);
  --glow-purple:     0 0 40px rgba(124,58,237,0.35);
  --glow-cyan:       0 0 40px rgba(6,182,212,0.35);

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;

  --sz-xs:   0.75rem;
  --sz-sm:   0.875rem;
  --sz-base: 1rem;
  --sz-lg:   1.125rem;
  --sz-xl:   1.25rem;
  --sz-2xl:  1.5rem;
  --sz-3xl:  1.875rem;
  --sz-4xl:  2.25rem;
  --sz-hero: clamp(3.2rem, 8vw, 7rem);
  --sz-sec:  clamp(2rem, 4vw, 3.5rem);

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --max-w:          1200px;
  --nav-h:          68px;
  --section-py:     clamp(4rem, 8vw, 7rem);

  /* Borders */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  16px;
  --r-xl:  24px;

  /* Transitions */
  --ease-fast: 150ms ease;
  --ease-base: 260ms ease;
  --ease-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-nav:   100;
  --z-mega:   90;
}