/* ============================================================
   BASE — resets, typography, layout helpers
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@600;700;800;900&display=swap');

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

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

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--navy);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.2;
}

a    { color: inherit; text-decoration: none; }
button { font-family: 'Inter', sans-serif; cursor: pointer; border: none; }
img  { max-width: 100%; display: block; }
ul   { list-style: none; }

/* Layout */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Hero */
.hero {
  padding: 56px 24px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(200,168,78,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, var(--white) 30%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p.subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Draft note */
.draft-note {
  background: rgba(200,168,78,0.08);
  border: 1px solid rgba(200,168,78,0.25);
  border-radius: var(--radius);
  padding: 12px 20px;
  margin: 16px auto 0;
  max-width: var(--max-w);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--gold);
}
.draft-note::before { content: '⚠'; font-size: 1rem; }

/* Section */
.section { padding: 40px 24px; }
.section-header { margin-bottom: 28px; }
.section-header h2 {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: var(--white);
}
.section-header p { color: var(--text-muted); font-size: 0.9rem; }

/* Chip / badge */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.chip-gold   { background: rgba(200,168,78,0.15); color: var(--gold); }
.chip-green  { background: var(--green-bg);  color: var(--green); }
.chip-blue   { background: var(--blue-bg);   color: var(--blue); }
.chip-purple { background: var(--purple-bg); color: var(--purple); }
.chip-orange { background: var(--orange-bg); color: var(--orange); }
.chip-red    { background: var(--red-bg);    color: var(--red); }
.chip-teal   { background: var(--teal-bg);   color: var(--teal); }
.chip-dim    { background: var(--glass);     color: var(--text-dim); border: 1px solid var(--glass-border); }

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}