/* ============================================
   BASE STYLES — Colors, Typography, Layout
   ============================================ */

:root {
  /* Core Palette */
  --midnight: #0b0b14;
  --charcoal: #1a1a2e;
  --slate: #2d2d44;
  --warm-bg: #faf7f2;
  --cream: #f5f0e8;
  --cream-white: #eee8dc;

  /* New Brand Colors */
  --ep-green: #2ecc71;
  --ep-green-glow: rgba(46, 204, 113, 0.35);
  --road-gold: #d4a853;
  --road-gold-light: #e8c97a;
  --neon-teal: #00e5c7;
  --neon-teal-glow: rgba(0, 229, 199, 0.35);
  --neon-pink: #ff2d7b;
  --neon-pink-glow: rgba(255, 45, 123, 0.4);
  --electric-blue: #00d4ff;
  --electric-blue-glow: rgba(0, 212, 255, 0.4);
  --vegas-purple: #7b2ff7;
  --heart-red: #e74c3c;
  --desert-dust: #c4956a;

  /* Story Colors */
  --story-a: #2ecc71;
  --story-b: #d4a853;
  --story-c: #00d4ff;

  /* Typography */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-accent: 'Playfair Display', serif;

  /* Spacing */
  --section-pad: clamp(4rem, 8vw, 7rem);
  --container-max: 1200px;
  --gap: clamp(1rem, 2vw, 2rem);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  line-height: 1.7;
  color: var(--cream-white);
  background: var(--midnight);
  overflow-x: hidden;
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.1; letter-spacing: 0.02em; }
a { color: var(--ep-green); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--neon-teal); }
img { max-width: 100%; display: block; }

/* Sections */
.section { padding: var(--section-pad) 0; position: relative; }
.section--dark { background: var(--midnight); color: var(--cream-white); }
.section--light { background: var(--warm-bg); color: var(--charcoal); }
.section--light .section__title { color: var(--midnight); }
.section--light .section__eyebrow { color: var(--ep-green); }

.section__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 1vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--road-gold);
  margin-bottom: 0.75rem;
}

.section__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--cream-white);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.section__body {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  max-width: 800px;
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.section__logline {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.9;
  max-width: 800px;
  margin-bottom: 3rem;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Gold text highlight */
.gold-text { color: var(--road-gold); font-weight: 700; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.5rem;
  font-family: var(--font-display); font-size: 1.3rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: all 0.4s var(--ease-out);
  position: relative; overflow: hidden; text-decoration: none;
}
.btn--primary { background: var(--ep-green); color: var(--midnight); }
.btn--primary:hover { background: var(--neon-teal); color: var(--midnight); transform: translateY(-3px); box-shadow: 0 10px 40px var(--ep-green-glow); }
.btn--secondary { background: transparent; color: var(--road-gold); border: 2px solid var(--road-gold); }
.btn--secondary:hover { background: var(--road-gold); color: var(--midnight); transform: translateY(-3px); }

::selection { background: var(--ep-green); color: var(--midnight); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--midnight); }
::-webkit-scrollbar-thumb { background: var(--slate); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ep-green); }