:root {
  --bg-deep: #050508;
  --bg-primary: #0a0a10;
  --bg-secondary: #0e0e16;
  --bg-card: #12121c;
  --bg-card-hover: #181826;
  --bg-elevated: #1a1a2a;
  --text-primary: #f2f0fa;
  --text-secondary: #a09cb5;
  --text-muted: #625f78;
  --accent: #a855f7;
  --accent-bright: #c084fc;
  --accent-light: #e9d5ff;
  --accent-glow: rgba(168,85,247,0.35);
  --accent2: #ec4899;
  --accent2-glow: rgba(236,72,153,0.25);
  --accent3: #06b6d4;
  --gold: #f59e0b;
  --gradient-main: linear-gradient(135deg, #a855f7, #ec4899);
  --gradient-cool: linear-gradient(135deg, #a855f7, #06b6d4);
  --gradient-warm: linear-gradient(135deg, #ec4899, #f59e0b);
  --border: rgba(255,255,255,0.05);
  --border-light: rgba(255,255,255,0.08);
  --border-accent: rgba(168,85,247,0.15);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 40px;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-accent: 'Cormorant Garamond', serif;
  --transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

/* ══════════════════════════════
   SECTION / LAYOUT
══════════════════════════════ */
section { padding: 120px 48px; position: relative; }
.container { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 80px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; color: var(--accent-bright); margin-bottom: 20px;
}
.section-tag::before, .section-tag::after {
  content: ''; width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.section-header h2 {
  font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: 4px; margin-bottom: 16px; line-height: 1.1;
  text-shadow: 0 0 60px rgba(168,85,247,0.2);
}
.section-header .subtitle {
  font-family: var(--font-accent); font-size: 1.2rem; font-style: italic;
  color: var(--text-secondary); max-width: 520px; margin: 0 auto;
}
.gradient-text { background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.page { display: none; opacity: 0; transition: opacity 0.5s ease; }
.page.active { display: block; opacity: 1; }

/* ══════════════════════════════
   NOISE OVERLAY
══════════════════════════════ */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}