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

:root {
  --bg:        #000000;
  --surface:   #111111;
  --surface2:  #1c1c1e;
  --white:     #f5f5f7;
  --muted:     #86868b;
  --blue:      #2997ff;
  --gold:      #ffd166;
  --orange:    #f4845f;
  --purple:    #bf5af2;
  --green:     #30d158;
  --red:       #ff453a;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --r-sm:  12px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  36px;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── TYPOGRAPHY HELPERS ─────────────────────────────────── */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.eyebrow.light { color: rgba(255,255,255,0.5); }

.section-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--white);
}
.section-title.light { color: #fff; }
.section-title em { font-style: italic; font-weight: 300; }

/* ─── FADE-UP ANIMATION ──────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.60s; }

@keyframes fadeUp {
  to { opacity:1; transform:translateY(0); }
}

/* ─── SCROLL-REVEAL PANELS ───────────────────────────────── */
.panel {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.panel.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.cta-blue {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s, transform 0.2s;
}
.cta-blue:hover { background: #0070e0; transform: scale(1.03); }

.cta-ghost {
  display: inline-block;
  color: var(--blue);
  padding: 14px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.cta-ghost:hover { color: #fff; }

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ─── MEDIA QUERIES ──────────────────────────────────────── */
@media (max-width: 768px) {
  .section-title { font-size: clamp(1.8rem, 7vw, 2.8rem); }
}