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

:root{
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #16161f;
  --bg-card-hover: #1c1c2a;
  --text-primary: #f0f0f5;
  --text-secondary: #8888a0;
  --text-muted: #55556a;
  --accent-purple: #a855f7;
  --accent-blue: #6366f1;
  --accent-cyan: #22d3ee;
  --gradient-main: linear-gradient(135deg, #a855f7, #6366f1, #3b82f6);
  --gradient-glow: linear-gradient(135deg, rgba(168,85,247,.4), rgba(99,102,241,.4));
  --gradient-card: linear-gradient(145deg, rgba(168,85,247,.08), rgba(99,102,241,.04));
  --glass: rgba(22,22,31,.7);
  --glass-border: rgba(168,85,247,.15);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --shadow-glow: 0 0 30px rgba(168,85,247,.15);
  --shadow-glow-lg: 0 0 60px rgba(168,85,247,.2);
  --transition: .3s cubic-bezier(.4,0,.2,1);
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
}

html{scroll-behavior:smooth;font-size:16px}

body{
  font-family:var(--font-main);
  background:var(--bg-primary);
  color:var(--text-primary);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ===== SECTION HEADERS ===== */
.section-header{text-align:center;margin-bottom:48px}
.section-tag{
  display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--accent-purple);margin-bottom:12px;
  background:rgba(168,85,247,.1);padding:6px 16px;border-radius:var(--radius-full);
}
.section-header h2{
  font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;letter-spacing:-.02em;
}

/* ===== ANIMATIONS ===== */
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.animate-on-scroll:nth-child(2){transition-delay:.1s}
.animate-on-scroll:nth-child(3){transition-delay:.2s}
.animate-on-scroll:nth-child(4){transition-delay:.3s}