/* ============ DESIGN TOKENS ============ */
:root {
  --ink:            #07060A;
  --ink-2:          #0D0B14;
  --surface:        #15121E;
  --surface-2:      #1F1A30;
  --line:           rgba(255,255,255,.10);
  --line-strong:    rgba(255,255,255,.18);
  --text:           #ECE9F5;
  --muted:          #B3AAC8;
  --gold:           #8B5CF6;
  --gold-deep:      #6D28D9;
  --glow:           rgba(139,92,246,.26);

  --font-display:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:      'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'Space Mono', 'SFMono-Regular', monospace;

  --max-width:      1180px;
  --radius:         16px;
  --radius-small:   10px;
}

/* ============ RESET ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

h1,
h2,
h3,
.hero__title,
.hero__tagline,
.hero__network-subheading,
.section__header h1,
.section__header h2,
.section__pillars-header h2,
.crosslink__headline {
  text-wrap: balance;
}

section {
  position: relative;
}

section[id] {
  scroll-margin-top: 88px;
}

/* ============ SPA PAGE SWITCHING ============ */
.page {
  display: none;
}

.page.is-active {
  display: block;
  animation: pageIn .4s ease;
}

/* network = lighter, brighter "broadcast" tone; membership stays deep/dark */
#page-network {
  --ink:          #1A1626;
  --ink-2:        #221C32;
  --surface:      #2A2340;
  --surface-2:    #352C4E;
  --line:         rgba(255,255,255,.12);
  --line-strong:  rgba(255,255,255,.22);
  --text:         #F5F2FB;
  --muted:        #CFC8DE;
  background: var(--ink);
}

/* apply = same broadcast tone as network — a violet dark that bridges
   cleanly into the Fillout form's purple, instead of a near-black page */
#page-apply {
  --ink:          #1A1626;
  --ink-2:        #221C32;
  --surface:      #2A2340;
  --surface-2:    #352C4E;
  --line:         rgba(255,255,255,.12);
  --line-strong:  rgba(255,255,255,.22);
  --text:         #F5F2FB;
  --muted:        #CFC8DE;
  background: var(--ink);
}

/* sponsor = same broadcast tone as network, since this page is reached
   from the network page's "put your brand in the room" section */
#page-sponsor {
  --ink:          #1A1626;
  --ink-2:        #221C32;
  --surface:      #2A2340;
  --surface-2:    #352C4E;
  --line:         rgba(255,255,255,.12);
  --line-strong:  rgba(255,255,255,.22);
  --text:         #F5F2FB;
  --muted:        #CFC8DE;
  background: var(--ink);
}

@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============ LAYOUT ============ */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ KICKER (eyebrow / mono label) ============ */
.kicker {
  font-family:     var(--font-mono);
  font-size:       12px;
  letter-spacing:  .22em;
  text-transform:  uppercase;
  color:           #8c8896;
  transition:      color 1s ease;
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
}

.kicker::before {
  content:    "";
  width:      26px;
  height:     1px;
  background: currentColor;
  opacity:    .6;
}

.kicker.is-active {
  color: var(--gold);
}

/* ============ HEADINGS ============ */
h1,
h2,
h3 {
  font-family:     var(--font-display);
  font-weight:     800;
  line-height:     1.02;
  letter-spacing:  -.02em;
}

h2 {
  font-size: clamp(2rem, 5vw, 3.4rem);
}

h3 {
  font-size:       clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing:  -.01em;
}

p {
  color: var(--muted);
}