@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,600&display=swap');

:root {
  /* Names below are historical (this was a dark theme) but the values
     are now the light palette — kept as-is so every page's existing
     var(--x) references still work. */
  --purple:        #5534A5;
  --purple-light:  #7A4FD1;
  --purple-bright: #6B40E0;
  --purple-dim:    #C9B8ED;
  --purple-deep:   #2E1A5C;
  --cream:         #241C38;
  --dark:          #FBF8F3;
  --dark2:         #FFFFFF;
  --dark3:         #F3EEE5;
  --dark4:         #EFE7D9;
  --text:          #3C3452;
  --text-muted:    #6C6380;
  --text-dim:      #6E6386;
  --border:        rgba(85,52,165,0.14);
  --border-bright: rgba(85,52,165,0.32);
  --font-display:  'Source Serif 4', Georgia, serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --paper:         #FBF8F3;
  --paper-ink:     #221A38;
  --tick:          #4C9A6A;
  --radius:        3px;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --accent:        #C97B4A;
  --accent-soft:   #F6E4D6;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--dark); color: var(--text); font-family: var(--font-body); overflow-x: hidden; cursor: auto; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 56px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(251,248,243,0.92);
  backdrop-filter: blur(24px);
  padding: 14px 56px;
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: var(--font-body);
  font-size: 24px; font-weight: 600; letter-spacing: .26em;
  color: var(--cream); text-decoration: none;
}
.nav-links { display: flex; gap: 30px; align-items: center; }
/* Seven links plus the CTA stop fitting below about 900px, so the nav hands
   over to the hamburger there rather than at 768px. Between 900 and 1180
   the gap tightens instead of letting a link wrap onto a second line. */
@media(max-width:1180px) { .nav-links { gap: 20px; } nav { padding: 22px 32px; } nav.scrolled { padding: 14px 32px; } }
.nav-links a {
  font-size: 12px; font-weight: 400; letter-spacing: .1em; white-space: nowrap;
  color: var(--text-muted); text-decoration: none; text-transform: uppercase;
  transition: color .3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-links a.active { border-bottom: 1px solid var(--purple); padding-bottom: 2px; }
.nav-cta {
  font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: none;
  padding: 9px 22px; border: 1px solid var(--purple); border-radius: var(--radius);
  color: var(--purple) !important; text-decoration: none;
  position: relative; overflow: hidden; transition: box-shadow .3s !important, color .3s !important;
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--purple); transform: translateX(-101%); transition: transform .3s ease;
}
.nav-cta:hover { color: #FBF8F3 !important; }
.nav-cta:hover::before { transform: translateX(0); }
.nav-cta:hover { box-shadow: 0 4px 20px rgba(85,52,165,.28); }
.nav-cta span { position: relative; z-index: 1; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; background: var(--purple);
  color: #FBF8F3; font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-decoration: none;
  border-radius: var(--radius);
  transition: background .25s, transform .25s, box-shadow .25s;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(85,52,165,.22);
}
.btn-primary:hover { background: var(--purple-bright); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(85,52,165,.32); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text); font-size: 14px; font-weight: 400;
  letter-spacing: 0; text-decoration: none;
  transition: border-color .25s, color .25s, background .25s;
  white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--purple); color: var(--cream); background: rgba(85,52,165,.06); }

/* ── SECTION LABELS ── */
/* Warm DM Sans kicker instead of the old monospace/terminal-style label. */
.section-label {
  font-family: var(--font-body); font-weight: 600;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 18px;
}
.section-label::before, .section-label::after { content: none; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── FOOTER ── */
footer {
  padding: 64px 56px 40px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px; align-items: start;
  background: var(--dark2);
}
.footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.7; max-width: 300px; margin-top: 12px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-col h4 { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: var(--text-muted); text-decoration: none; margin-bottom: 10px; transition: color .3s; }
.footer-col a:hover { color: var(--purple); }
.footer-copy {
  grid-column: 1/-1; padding-top: 28px;
  border-top: 1px solid rgba(85,52,165,.08);
  font-size: 12px; color: var(--text-dim);
  display: flex; justify-content: space-between;
}

/* ── STATS TICKER ── */
.stats-strip {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--accent-soft); padding: 20px 0; overflow: hidden;
}
.stats-inner { display: flex; width: max-content; animation: ticker 32s linear infinite; }
.stat-item {
  display: flex; align-items: center; gap: 28px;
  padding: 0 52px; border-right: 1px solid var(--border); white-space: nowrap;
}
.stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--cream); letter-spacing: -.02em; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.stat-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 4px; background: none; border: none; z-index: 200;
}
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--cream); transition: transform .3s, opacity .3s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Seven links stop fitting around 900px, so the hamburger takes over there
   rather than at 768px. This has to sit after the rule above, which sets
   .nav-hamburger to display:none by default. */
@media(max-width:900px) { .nav-links { display: none; } .nav-hamburger { display: flex; } }

.nav-mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(251,248,243,0.97); backdrop-filter: blur(24px);
  z-index: 150; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  font-size: 30px; font-family: var(--font-display); font-weight: 500;
  color: var(--text-muted); text-decoration: none; letter-spacing: .06em; transition: color .3s;
}
.nav-mobile-menu a:hover { color: var(--cream); }
.nav-mobile-menu .mob-cta {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 32px; border: 1px solid var(--purple);
  color: var(--purple) !important; margin-top: 8px;
}

/* ── ANIMATIONS ── */
@keyframes ticker    { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes fadeUp    { to{opacity:1;transform:translateY(0)} }
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.08)} }

/* ── MOBILE BASE ── */
@media(max-width:768px) {
  nav { padding: 18px 20px; }
  nav.scrolled { padding: 12px 20px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  footer { grid-template-columns: 1fr; padding: 48px 20px 32px; gap: 40px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-copy { flex-direction: column; gap: 6px; }
  .section-label { justify-content: center; }
  .btn-primary, .btn-ghost { width: 100%; max-width: 300px; justify-content: center; }
}
@media(max-width:480px) {
  .footer-cols { grid-template-columns: 1fr; }
}


/* ── PAGE HERO RING ──
   The faint circle behind the heading on results, subjects and method came
   from a three.js torus, which meant 589KB of library for one outline. As a
   CSS ring it costs nothing, so every hero can carry it instead of three
   pages having it and six not. Sits behind content and ignores pointers. */
.page-hero { position: relative; overflow: hidden; }
.page-hero > * { position: relative; z-index: 1; }
.page-hero::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  border: 1px solid rgba(74,46,122,.10);
  border-radius: 50%;
  pointer-events: none; z-index: 0;
}
@media(max-width:900px) {
  .page-hero::before { width: 520px; height: 520px; margin: -260px 0 0 -260px; }
}

/* ── COOKIE / PECR NOTICE ──
   Injected by assets/cookie-notice.js. Dark bar against the light page so it
   reads as chrome rather than content, and dismissed for good on "Got it". */
.ile-cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--purple-deep); color: #FBF8F3;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  box-shadow: 0 -8px 30px -14px rgba(28,23,48,.4);
}
.ile-cookie-text { font-size: 13.5px; line-height: 1.6; margin: 0; max-width: 660px; }
.ile-cookie-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.ile-cookie-link { font-size: 13px; color: #D8CFF2; text-decoration: underline; text-underline-offset: 3px; }
.ile-cookie-link:hover { color: #FBF8F3; }
.ile-cookie-btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 10px 24px; cursor: pointer; white-space: nowrap;
  background: #FBF8F3; color: var(--purple-deep);
  border: none; border-radius: var(--radius);
  transition: background .25s;
}
.ile-cookie-btn:hover { background: #FFFFFF; }
@media(max-width:768px) {
  .ile-cookie-bar { padding: 16px 20px; gap: 14px; }
  .ile-cookie-text { font-size: 13px; }
}

/* ── QUALITY FLOOR ── */
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(85,52,165,.22); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}