/* ============================================
   Base — Reset, typography, shared components
   ============================================ */

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

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

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
}

/* blur-fade removed — transition handled by .blurred-content mask */

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* Typography */
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--text); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--text); }

.text-muted { color: var(--text-muted); }
.text-amber { color: var(--primary); }
.text-gradient {
  background: var(--grad-amber);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Container */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s6); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s6); border-radius: var(--r-full);
  font-family: var(--font); font-size: 0.9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: all 200ms var(--ease); white-space: nowrap;
}

.btn--primary {
  background: var(--grad-amber); color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover {
  box-shadow: var(--shadow-glow-lg); transform: translateY(-2px); text-decoration: none;
}

.btn--ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); padding: var(--s3) var(--s6);
}
.btn--ghost:hover {
  border-color: var(--primary); color: var(--primary); text-decoration: none;
}

.btn--sm {
  padding: var(--s2) var(--s4); font-size: 0.8125rem;
}

.btn--lg {
  padding: var(--s4) var(--s8); font-size: 1.0625rem; min-height: 52px;
}

/* Pill badge */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s4); border-radius: var(--r-full);
  font-size: 0.8125rem; font-weight: 500;
  background: rgba(251,191,36,0.1); color: var(--amber-400);
  border: 1px solid rgba(251,191,36,0.2);
}

/* Sections — no individual blur, parent wrapper handles it */
.section {
  padding: var(--s20) 0;
  position: relative;
}

/* Single blur wrapper — one backdrop-filter for everything below hero.
   Top edge uses a gradient mask so blur fades in smoothly. */
.blurred-content {
  position: relative;
  z-index: 2;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding-top: 200px;
  margin-top: -200px;
  mask-image: linear-gradient(to bottom, transparent 0px, black 200px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 200px);
}

.section--sm { padding: var(--s12) 0; }

/* Everything below the hero is blurred. A fixed full-viewport
   pseudo on body handles the blur, masked so the top (hero)
   is clear and it fades into full blur below. */

.section__header {
  text-align: center; max-width: 700px; margin: 0 auto var(--s12);
}

.section__header p {
  margin-top: var(--s4); font-size: 1.125rem; color: var(--text-muted); line-height: 1.7;
}

/* Selection */
::selection { background: rgba(217,119,6,0.3); color: inherit; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}