/* ============================================================
   Rice AI Alignment — riceaialignment.com
   Night-mode terminal aesthetic · restrained retro accents
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* night surfaces */
  --bg:      #070A07;
  --bg-2:    #090D09;
  --card:    #0C110C;
  --card-2:  #0F150F;
  --footer:  #050805;

  /* type on dark */
  --ink:     #E9F2E4;
  --body-c:  #ADBBA7;
  --muted:   #798774;

  /* lines */
  --border:   #1A2418;
  --border-2: #263524;

  /* phosphor greens */
  --green:      #57C63F;
  --green-deep: #2FB917;
  --green-hi:   #8AFF6A;
  --green-tint: rgba(87, 198, 63, 0.07);
  --green-line: rgba(87, 198, 63, 0.30);
  --mint:       #0EFFA8;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 40px -14px rgba(0, 0, 0, 0.7);
  --glow: 0 0 0 1px rgba(87, 198, 63, 0.14), 0 10px 40px -14px rgba(87, 198, 63, 0.25);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 64px;
  /* announcement banner above the nav; everything fixed to the top offsets by it */
  --banner-h: 38px;
}

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

html { scroll-behavior: smooth; scrollbar-color: #1C271A var(--footer); }

body {
  background: var(--bg);
  color: var(--body-c);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--green); color: #06210A; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--footer); }
::-webkit-scrollbar-thumb {
  background: #1C271A;
  border-radius: 6px;
  border: 2px solid var(--footer);
}
::-webkit-scrollbar-thumb:hover { background: var(--green-deep); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.015em; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

section { scroll-margin-top: calc(var(--banner-h) + var(--nav-h) + 12px); }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 40px);
}

/* reusable inline SVG definitions */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- CRT overlay (scanlines + vignette) ---------- */
.crt {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(3, 6, 3, 0.20) 0px, rgba(3, 6, 3, 0.20) 1px,
    transparent 1px, transparent 3px
  );
}
.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 88% 82% at 50% 46%, transparent 60%, rgba(0, 0, 0, 0.30) 100%);
}
@media (max-width: 700px) { .crt { display: none; } }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: var(--banner-h); left: 0;
  width: 100%;
  height: 2px;
  z-index: 950;
  background: linear-gradient(90deg, var(--green-deep), var(--green-hi));
  box-shadow: 0 0 12px rgba(87, 198, 63, 0.5);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---------- Section rail (scroll tracker) ---------- */
.rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 15px;
}
.rail-track {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: rgba(121, 135, 116, 0.22);
  overflow: hidden;
}
.rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--green-deep), var(--green));
  box-shadow: 0 0 10px rgba(87, 198, 63, 0.5);
  transform: scaleY(0);
  transform-origin: top;
}
.rail a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.rail a i { font-style: normal; font-size: 10px; }
.rail a b {
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s, transform 0.25s var(--ease);
}
.rail a:hover, .rail a.active { opacity: 1; color: var(--green); }
.rail a:hover b, .rail a.active b { opacity: 1; transform: none; }
.rail a.active i { font-weight: 700; }
@media (max-width: 1280px) { .rail { display: none; } }

/* ---------- Type helpers ---------- */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.label::after {
  content: "";
  order: 5;
  flex: 1 1 40px;
  height: 1px;
  background: linear-gradient(90deg, var(--border-2), transparent);
}
.label-num { color: var(--muted); }
.label-num::before { content: "["; opacity: 0.7; }
.label-num::after  { content: "]"; opacity: 0.7; }
.label-dark { color: var(--green); }
.label-dark .label-num { color: var(--muted); }
/* labels settle into place as they reveal */
html.js .label.reveal { letter-spacing: 0.34em; }
html.js .label.reveal.on {
  letter-spacing: 0.14em;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              filter 0.7s var(--ease), letter-spacing 1s var(--ease);
}

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 14px;
}
/* animated underline draws in on reveal */
.section-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  box-shadow: 0 0 14px rgba(87, 198, 63, 0.4);
  transform-origin: left;
}
html.js .section-title.reveal::after,
html.js .reveal .section-title::after { transform: scaleX(0); }
html.js .section-title.reveal.on::after,
html.js .reveal.on .section-title::after {
  transform: scaleX(1);
  transition: transform 0.75s var(--ease) 0.25s;
}

.section-sub {
  max-width: 620px;
  color: var(--muted);
  margin-bottom: 40px;
}
.lead {
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.012em;
}

.text-link {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(87, 198, 63, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.text-link:hover { color: var(--green-hi); text-decoration-color: var(--green-hi); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.16s, border-color 0.16s, color 0.16s,
              transform 0.16s var(--ease), box-shadow 0.16s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 16px; font-size: 14px; }

.btn-primary {
  background: var(--green);
  color: #06210A;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(87, 198, 63, 0.3), 0 8px 26px -10px rgba(87, 198, 63, 0.5);
}
.btn-primary:hover {
  background: #68DB4E;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(87, 198, 63, 0.45), 0 10px 32px -8px rgba(87, 198, 63, 0.55);
}

.btn-outline,
.btn-outline-dark {
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
  border-color: var(--border-2);
}
.btn-outline:hover,
.btn-outline-dark:hover {
  border-color: var(--green-line);
  background: var(--green-tint);
  transform: translateY(-1px);
}

.btn-light {
  background: var(--ink);
  color: #0A0F0A;
}
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 12px 34px -12px rgba(233, 242, 228, 0.35); }

/* ---------- Announcement banner ---------- */
.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 945;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  /* side padding leaves a lane for the dismiss button without off-centering the text */
  padding: 0 clamp(34px, 5vw, 52px);
  background: var(--green);
  color: #06210A;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  box-shadow: 0 6px 24px -12px rgba(87, 198, 63, 0.6);
  transition: background 0.2s;
}
.banner:hover { background: var(--green-hi); }
/* dismissed: --banner-h collapses to 0 so the nav and page slide back up */
html.banner-off { --banner-h: 0px; }
html.banner-off .banner { display: none; }
.banner-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
}
.banner-close {
  position: absolute;
  top: 50%;
  right: clamp(4px, 1.4vw, 12px);
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.2s;
}
.banner-close:hover,
.banner-close:focus-visible { opacity: 1; background: rgba(6, 33, 10, 0.14); }
.banner-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #06210A;
  animation: banner-pulse 2s ease-in-out infinite;
}
.banner-text, .banner-text-sm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banner-text-sm { display: none; }   /* swapped in on narrow screens */
.banner-cta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@keyframes banner-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) { .banner-dot { animation: none; } }
@media (max-width: 620px) {
  .banner { font-size: 12.5px; gap: 8px; }
  .banner-dot { display: none; }
  .banner-text { display: none; }
  .banner-text-sm { display: block; }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: var(--banner-h); left: 0; right: 0;
  z-index: 940;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: var(--ink);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled, .nav.nav-solid {
  background: rgba(7, 10, 7, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}
.nav-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; }
/* The real RAIA logo (assets/logo-mark.png) painted via CSS mask, so it still
   tints with currentColor exactly like the old inline SVG did. */
.brand-logo {
  display: block;
  width: 61px;
  height: 30px;
  color: var(--ink);
  background-color: currentColor;
  -webkit-mask: url(../assets/logo-mark.png) center / contain no-repeat;
          mask: url(../assets/logo-mark.png) center / contain no-repeat;
  transition: color 0.3s, background-color 0.3s, filter 0.3s;
}
.brand:hover .brand-logo {
  color: var(--green);
  filter: drop-shadow(0 0 10px rgba(87, 198, 63, 0.5));
}
.brand-full {
  font-size: 13.5px;
  color: currentColor;
  opacity: 0.6;
  font-weight: 500;
}
@media (max-width: 640px) { .brand-full { display: none; } }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.nav-links a:not(.btn) {
  font-size: 14.5px;
  font-weight: 500;
  color: inherit;
  opacity: 0.78;
  transition: opacity 0.15s, color 0.15s;
}
.nav-links a:not(.btn):hover { opacity: 1; }
.nav-links a[aria-current="page"],
.nav-links a.active {
  opacity: 1;
  color: var(--green);
  font-weight: 600;
}

/* Programs dropdown */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 5px; }
.dd-caret { font-style: normal; font-size: 8px; opacity: 0.6; transition: transform 0.2s var(--ease); }
.nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 234px;
  padding: 8px;
  background: rgba(10, 15, 10, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-2);
  border-radius: 11px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s var(--ease), visibility 0.18s;
  z-index: 50;
}
/* invisible bridge so the pointer can cross the gap into the menu */
.nav-dd-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: none; }
.nav-dd-menu a {
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 14px !important;
  font-weight: 500;
  color: var(--body-c) !important;
  opacity: 1 !important;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}
.nav-dd-menu a:hover,
.nav-dd-menu a[aria-current="page"] { background: var(--green-tint); color: var(--green) !important; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px; height: 42px;
  background: none;
  border: none;
  cursor: pointer;
  align-items: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  min-height: calc(100svh - var(--banner-h));
  display: flex;
  align-items: center;
  /* bottom padding reserves a lane for the absolute-positioned scroll cue,
     so the terminal (in flow) can never collide with it */
  padding: calc(var(--banner-h) + var(--nav-h) + 4vh) 0 max(12vh, 132px);
  overflow: hidden;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero::after {
  /* vignette for calm text ground + seamless fade into the page below */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 38%, rgba(7, 10, 7, 0.66) 0%, rgba(7, 10, 7, 0.2) 60%, rgba(7, 10, 7, 0) 100%),
    linear-gradient(180deg, rgba(7, 10, 7, 0.4), rgba(7, 10, 7, 0) 24%),
    linear-gradient(180deg, rgba(7, 10, 7, 0) 78%, var(--bg) 98%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 40px);
  text-align: center;
  will-change: transform;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 22px;
}
.hero-eyebrow::after {
  content: "▍";
  margin-left: 4px;
  color: var(--green);
  animation: caret-blink 1.15s steps(2) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-title {
  color: #F4FAF0;
  font-size: clamp(38px, 6.4vw, 64px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.06;
  margin-bottom: 22px;
  text-shadow: 0 0 60px rgba(87, 198, 63, 0.18);
}
.hero-sub {
  max-width: 640px;
  margin: 0 auto 34px;
  font-size: clamp(16.5px, 1.9vw, 18.5px);
  color: var(--body-c);
}
.hero-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
.hero-note {
  font-size: 14px;
  color: var(--muted);
}
.hero-note::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(87, 198, 63, 0.5);
  margin-right: 9px;
  vertical-align: 1px;
  animation: dot-pulse 2.6s ease-out infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(87, 198, 63, 0.45); }
  60%  { box-shadow: 0 0 0 7px rgba(87, 198, 63, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 198, 63, 0); }
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
.hero-scroll:hover { color: var(--green); }
.hero-scroll i {
  width: 1px;
  height: 38px;
  background: rgba(121, 135, 116, 0.25);
  overflow: hidden;
}
.hero-scroll i::after {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background: var(--green);
  animation: scroll-drip 2s var(--ease) infinite;
}
@keyframes scroll-drip {
  0%   { transform: translateY(-14px); }
  65%  { transform: translateY(38px); }
  100% { transform: translateY(38px); }
}

/* ---------- Terminal (hero) ---------- */
.terminal {
  max-width: 600px;
  margin: 38px auto 0;
  text-align: left;
  background: rgba(8, 13, 8, 0.82);
  border: 1px solid rgba(87, 198, 63, 0.16);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.8), 0 0 50px -18px rgba(87, 198, 63, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.t-dot { width: 11px; height: 11px; border-radius: 50%; }
.t-red    { background: #FF5F57; }
.t-yellow { background: #FEBC2E; }
.t-green  { background: #28C840; }
.terminal-title {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.terminal-body {
  padding: 16px 18px 18px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  min-height: 148px;
  color: var(--ink);
}
.terminal-body .t-prompt { color: var(--green); }
.terminal-body .t-out { color: var(--muted); }
.terminal-body .t-ok { color: var(--green); }
.terminal-body .t-mint { color: var(--mint); }
.t-cursor {
  display: inline-block;
  width: 7px; height: 15px;
  background: var(--green);
  vertical-align: -2px;
  margin-left: 2px;
  animation: caret-blink 1s steps(2) infinite;
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(64px, 9vh, 104px) 0; }
.section-tint {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* thin phosphor seam where a tinted section begins */
.section-tint::before,
.window-band::before,
.band::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green-line), transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- Mission ---------- */
.mission-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(40px, 6vh, 58px);
}
.mission-body p { color: var(--body-c); }
.mission-body p + p { margin-top: 14px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pillar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow);
  border-color: var(--green-line);
}
.pillar-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--green-tint);
  border: 1px solid rgba(87, 198, 63, 0.14);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.pillar-icon svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s;
}
.pillar:hover .pillar-icon { background: var(--green); transform: scale(1.06); }
.pillar:hover .pillar-icon svg { stroke: #06210A; }
.pillar h3 { font-size: 16.5px; margin-bottom: 7px; }
.pillar p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* ---------- Explainer grid (What is AI safety) ---------- */
.explain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.explain {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.explain:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow);
  border-color: var(--green-line);
}
.explain-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid rgba(87, 198, 63, 0.22);
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 14px;
}
.explain h3 { font-size: 18px; margin-bottom: 8px; }
.explain p { font-size: 15px; color: var(--body-c); }

/* ---------- Alignment vizzes ---------- */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: clamp(34px, 5vh, 56px);
}
.viz {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.viz:hover { border-color: var(--green-line); box-shadow: var(--glow); transform: translateY(-3px); }
.viz-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background:
    radial-gradient(ellipse 68% 68% at 50% 46%, rgba(87, 198, 63, 0.07), transparent 70%),
    repeating-linear-gradient(0deg, rgba(87, 198, 63, 0.038) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(87, 198, 63, 0.038) 0 1px, transparent 1px 27px),
    #050805;
}
/* faint scan sheen sweeping each stage */
.viz-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 42%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(87, 198, 63, 0.09), transparent);
  animation: viz-sheen 6s linear infinite;
}
@keyframes viz-sheen { 0% { transform: translateY(-110%); } 100% { transform: translateY(320%); } }
.viz-svg { width: min(80%, 300px); height: auto; overflow: visible; }
.viz-svg.nn { width: min(88%, 340px); }
.viz figcaption { padding: 22px 24px 24px; }
.viz-tag {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.viz figcaption h3 { font-size: 19px; margin-bottom: 8px; }
.viz figcaption p { font-size: 14.5px; color: var(--body-c); }
.viz figcaption p + p { margin-top: 10px; }
.viz-lbl { font-family: var(--font-mono); font-size: 10px; fill: var(--muted); letter-spacing: 0.06em; }
.viz-lbl.dim { fill: rgba(121, 135, 116, 0.7); }
.viz-readout {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 9px 12px;
  background: rgba(5, 8, 5, 0.55);
  overflow-x: auto;
  white-space: nowrap;
}
.viz-readout .vr-p { color: var(--green); }
.viz-readout .vr-arrow { color: var(--green); margin: 0 5px; }
.viz-readout .vr-feat { color: var(--mint); }

/* diagram 1 — recursive self-improvement: each generation more capable
   than the last. One shared 9s cycle; every element keys off it. */
.viz-svg.rsi { width: min(86%, 330px); --rsi-t: 9s; }
.rsi-sub { font-size: 7.5px; letter-spacing: 0.04em; }
.rsi-oversight {
  fill: none;
  stroke: rgba(121, 135, 116, 0.5);
  stroke-width: 1.5; stroke-dasharray: 5 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: rsi-spin 46s linear infinite, rsi-ov var(--rsi-t) linear infinite;
}
@keyframes rsi-spin { to { transform: rotate(360deg); } }
.rsi-ovl { animation: rsi-ov var(--rsi-t) linear infinite; }
@keyframes rsi-ov {
  0%, 54% { opacity: 1; }
  60%, 90% { opacity: 0.35; }
  97%, 100% { opacity: 1; }
}
.rsi-node { filter: drop-shadow(0 0 5px rgba(87, 198, 63, 0.45)); }
/* the seed keeps breathing — and flares when the loop returns to it */
.g1 .rsi-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: rsi-breathe 2.4s ease-in-out infinite, rsi-pop1 var(--rsi-t) linear infinite;
}
@keyframes rsi-breathe {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(87, 198, 63, 0.4)); }
  50%      { filter: drop-shadow(0 0 10px rgba(138, 255, 106, 0.8)); }
}
@keyframes rsi-pop1 {
  0%, 71% { transform: scale(1); }
  73.5%   { transform: scale(1.4); }
  76%, 100% { transform: scale(1); }
}
/* generations n+1…n+3 appear in sequence, each with a scale pop */
.rsi-gen.g2 { opacity: 0; animation: rsi-g2 var(--rsi-t) linear infinite; }
.rsi-gen.g3 { opacity: 0; animation: rsi-g3 var(--rsi-t) linear infinite; }
.rsi-gen.g4 { opacity: 0; animation: rsi-g4 var(--rsi-t) linear infinite; }
@keyframes rsi-g2 { 0%, 10% { opacity: 0; } 13%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes rsi-g3 { 0%, 32% { opacity: 0; } 35%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes rsi-g4 { 0%, 54% { opacity: 0; } 57%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
.g2 .rsi-node, .g3 .rsi-node, .g4 .rsi-node { transform-box: fill-box; transform-origin: center; }
.g2 .rsi-node { animation: rsi-pop2 var(--rsi-t) linear infinite; }
.g3 .rsi-node { animation: rsi-pop3 var(--rsi-t) linear infinite; }
.g4 .rsi-node { animation: rsi-pop4 var(--rsi-t) linear infinite; }
@keyframes rsi-pop2 { 0%, 10% { transform: scale(0.2); } 14% { transform: scale(1.18); } 17%, 100% { transform: scale(1); } }
@keyframes rsi-pop3 { 0%, 32% { transform: scale(0.2); } 36% { transform: scale(1.18); } 39%, 100% { transform: scale(1); } }
@keyframes rsi-pop4 { 0%, 54% { transform: scale(0.2); } 58% { transform: scale(1.18); } 61%, 100% { transform: scale(1); } }
/* build arcs: draw in clockwise, then a pulse orbits down each one */
.rsi-arrow {
  fill: none;
  stroke: rgba(87, 198, 63, 0.55); stroke-width: 1.6;
  stroke-dasharray: 86; stroke-dashoffset: 86;
}
.l1 .rsi-arrow { animation: rsi-a1 var(--rsi-t) linear infinite; }
.l2 .rsi-arrow { animation: rsi-a2 var(--rsi-t) linear infinite; }
.l3 .rsi-arrow { animation: rsi-a3 var(--rsi-t) linear infinite; }
.l4 .rsi-arrow { animation: rsi-a4 var(--rsi-t) linear infinite; }
@keyframes rsi-a1 {
  0%, 2% { stroke-dashoffset: 86; opacity: 1; }
  10%, 90% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rsi-a2 {
  0%, 24% { stroke-dashoffset: 86; opacity: 1; }
  32%, 90% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rsi-a3 {
  0%, 46% { stroke-dashoffset: 86; opacity: 1; }
  54%, 90% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rsi-a4 {
  0%, 62% { stroke-dashoffset: 86; opacity: 1; }
  70%, 90% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.rsi-head { fill: none; stroke: rgba(87, 198, 63, 0.8); stroke-width: 1.6; opacity: 0; }
.l1 .rsi-head { animation: rsi-h1 var(--rsi-t) linear infinite; }
.l2 .rsi-head { animation: rsi-h2 var(--rsi-t) linear infinite; }
.l3 .rsi-head { animation: rsi-h3 var(--rsi-t) linear infinite; }
.l4 .rsi-head { animation: rsi-h4 var(--rsi-t) linear infinite; }
@keyframes rsi-h1 { 0%, 9%  { opacity: 0; } 11%, 90% { opacity: 0.9; } 97%, 100% { opacity: 0; } }
@keyframes rsi-h2 { 0%, 31% { opacity: 0; } 33%, 90% { opacity: 0.9; } 97%, 100% { opacity: 0; } }
@keyframes rsi-h3 { 0%, 53% { opacity: 0; } 55%, 90% { opacity: 0.9; } 97%, 100% { opacity: 0; } }
@keyframes rsi-h4 { 0%, 69% { opacity: 0; } 71%, 90% { opacity: 0.9; } 97%, 100% { opacity: 0; } }
.rsi-pulse {
  fill: var(--green-hi);
  filter: drop-shadow(0 0 5px rgba(138, 255, 106, 0.9));
  opacity: 0;
  offset-rotate: 0deg;
}
.rsi-pulse.p1 {
  offset-path: path("M 191.9 61.0 A 70 70 0 0 1 248.2 114.1");
  animation: rsi-p1 var(--rsi-t) linear infinite;
}
.rsi-pulse.p2 {
  offset-path: path("M 248.2 145.9 A 70 70 0 0 1 200.7 196.9");
  animation: rsi-p2 var(--rsi-t) linear infinite;
}
.rsi-pulse.p3 {
  offset-path: path("M 159.3 196.9 A 70 70 0 0 1 115.9 158.2");
  animation: rsi-p3 var(--rsi-t) linear infinite;
}
.rsi-pulse.p4 {
  offset-path: path("M 115.9 101.8 A 70 70 0 0 1 168.1 61.0");
  animation: rsi-p4 var(--rsi-t) linear infinite;
}
@keyframes rsi-p1 {
  0%, 2% { offset-distance: 0%; opacity: 0; }
  3.5% { opacity: 1; }
  8.5% { opacity: 1; }
  10%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes rsi-p2 {
  0%, 24% { offset-distance: 0%; opacity: 0; }
  25.5% { opacity: 1; }
  30.5% { opacity: 1; }
  32%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes rsi-p3 {
  0%, 46% { offset-distance: 0%; opacity: 0; }
  47.5% { opacity: 1; }
  52.5% { opacity: 1; }
  54%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes rsi-p4 {
  0%, 62% { offset-distance: 0%; opacity: 0; }
  63.5% { opacity: 1; }
  68.5% { opacity: 1; }
  70%, 100% { offset-distance: 100%; opacity: 0; }
}
/* the final generation lands with an expanding shockwave */
.rsi-halo {
  fill: none; stroke: var(--green-hi); stroke-width: 1.5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: rsi-halo var(--rsi-t) linear infinite;
}
@keyframes rsi-halo {
  0%, 55% { opacity: 0; transform: scale(0.8); }
  58% { opacity: 0.9; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(1.75); }
}

/* diagram 2 — mechanistic interpretability */
.nn-edge { stroke: rgba(121, 135, 116, 0.22); stroke-width: 1; }
.nn-edge.on {
  stroke: var(--green); stroke-width: 2;
  stroke-dasharray: 6 6; opacity: 0.2;
  animation: nn-flow 1.3s linear infinite, nn-lit 6s ease-in-out infinite;
}
@keyframes nn-flow { to { stroke-dashoffset: -24; } }
@keyframes nn-lit { 0%, 54% { opacity: 0.18; } 62%, 86% { opacity: 0.95; } 100% { opacity: 0.18; } }
.nn-node { fill: #0b120b; stroke: rgba(121, 135, 116, 0.4); stroke-width: 1.5; }
.nn-node.on { animation: nn-node-lit 6s ease-in-out infinite; }
@keyframes nn-node-lit {
  0%, 54% { fill: #0b120b; stroke: rgba(121, 135, 116, 0.4); }
  62%, 86% { fill: var(--green); stroke: var(--green); }
  100% { fill: #0b120b; stroke: rgba(121, 135, 116, 0.4); }
}
.nn-node.out { animation: nn-node-out 6s ease-in-out infinite; }
@keyframes nn-node-out {
  0%, 60% { fill: #0b120b; stroke: rgba(121, 135, 116, 0.4); }
  70%, 88% { fill: var(--mint); stroke: var(--mint); }
  100% { fill: #0b120b; stroke: rgba(121, 135, 116, 0.4); }
}
.nn-probe {
  stroke: var(--green-hi); stroke-width: 2; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(138, 255, 106, 0.85));
  animation: nn-probe 6s ease-in-out infinite;
}
@keyframes nn-probe {
  0%   { transform: translateX(12px); opacity: 0; }
  8%   { opacity: 0.9; }
  48%  { transform: translateX(352px); opacity: 0.9; }
  55%  { transform: translateX(352px); opacity: 0; }
  100% { transform: translateX(352px); opacity: 0; }
}
.nn-lead { stroke: var(--mint); stroke-width: 1.5; opacity: 0; animation: nn-reveal 6s ease-in-out infinite; }
.nn-halo {
  fill: none; stroke: var(--mint); stroke-width: 1.5; opacity: 0;
  transform-origin: 332px 154px; animation: nn-halo 6s ease-in-out infinite;
}
@keyframes nn-reveal { 0%, 64% { opacity: 0; } 72%, 90% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes nn-halo {
  0%, 64% { opacity: 0; transform: scale(0.6); }
  72% { opacity: 0.9; transform: scale(1); }
  90% { opacity: 0.4; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ---------- Programs — sticky stack: each program gets its own moment ---------- */
.stack { position: relative; }
.panel {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  min-height: min(62vh, 560px);
  padding: clamp(26px, 4vw, 54px);
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.9), 0 34px 90px -40px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  transform-origin: top center;
}
.panel + .panel { margin-top: 16vh; }
.panel:nth-child(2) { top: calc(var(--nav-h) + 34px); }
.panel:nth-child(3) { top: calc(var(--nav-h) + 48px); }
.panel:nth-child(4) { top: calc(var(--nav-h) + 62px); }
.panel:nth-child(5) { top: calc(var(--nav-h) + 76px); }
/* corner ticks, echoing the intro frame */
.panel::before, .panel::after {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--green-line);
  position: absolute;
}
.panel::before { content: "+"; top: 12px; left: 16px; }
.panel::after  { content: "+"; bottom: 12px; right: 16px; }

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  margin-bottom: 20px;
}
.panel-num { font-size: 13px; font-weight: 600; color: var(--green); }
.panel-num::before { content: "["; opacity: 0.6; }
.panel-num::after  { content: "]"; opacity: 0.6; }
.panel-path {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.panel h3 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.022em;
  margin-bottom: 12px;
}
.panel-desc {
  font-size: clamp(15.5px, 1.6vw, 17px);
  color: var(--body-c);
  max-width: 46ch;
}
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.panel-meta span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.02);
}
.panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.panel-deadline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--green);
}
.panel-deadline::before {
  content: "◷ ";
  opacity: 0.8;
}
.panel-ghost {
  position: absolute;
  right: 20px;
  bottom: -18px;
  font-family: var(--font-mono);
  font-size: clamp(100px, 13vw, 160px);
  font-weight: 600;
  line-height: 1;
  color: rgba(87, 198, 63, 0.05);
  user-select: none;
  pointer-events: none;
}

.mini-term {
  position: relative;
  z-index: 2;
  border: 1px solid var(--border-2);
  background: rgba(5, 8, 5, 0.72);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(87, 198, 63, 0.04), 0 18px 50px -24px rgba(0, 0, 0, 0.8);
}
.mini-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border);
}
.mini-term-bar .t-dot { width: 9px; height: 9px; }
.mini-term-body {
  padding: 16px 16px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.9;
}
.mini-term-body .ml-p  { color: var(--green); }
.mini-term-body .ml-o  { color: var(--muted); }
.mini-term-body .ml-ok { color: var(--mint); }

.stack-cta {
  position: relative;
  z-index: 10;
  margin-top: clamp(48px, 9vh, 96px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 26px 30px;
  background: var(--card);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
}
.stack-cta h3 { font-size: 18px; margin-bottom: 4px; }
.stack-cta p { font-size: 14.5px; color: var(--muted); }

/* ---------- Research ---------- */
.pub-list {
  border-top: 1px solid var(--border);
}
.pub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 40px 22px 6px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.pub:hover { background: rgba(87, 198, 63, 0.04); }
.pub::after {
  content: "→";
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  color: var(--green);
  font-weight: 600;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.2s, transform 0.25s var(--ease);
}
.pub:hover::after { opacity: 1; transform: translateX(0); }
.pub-main h3 {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  transition: color 0.15s;
}
.pub:hover .pub-main h3 { color: var(--green-hi); }
/* a publication row with no link yet — no hover arrow, no pointer */
.pub-static { cursor: default; }
.pub-static::after { content: none; }
.pub-static:hover { background: transparent; }
.pub-static:hover .pub-main h3 { color: var(--ink); }
.pub-authors { font-size: 14.5px; color: var(--muted); }
.pub-side {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.pub-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}
.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid rgba(87, 198, 63, 0.24);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-muted {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-2);
}
.pub-note {
  margin-top: 22px;
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------- 404 — signal lost (standalone page, no main.js) ---------- */
.nf-body { min-height: 100vh; display: flex; flex-direction: column; }
.nf {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(64px, 12vh, 120px) 20px 72px;
  position: relative;
}
.nf::before {   /* phosphor wash behind the glyph */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 46% at 50% 40%, rgba(87, 198, 63, 0.11), transparent 70%);
  pointer-events: none;
}
.nf-inner { position: relative; width: 100%; max-width: 600px; min-width: 0; }
.nf-mark-link { display: inline-block; margin: 0 auto 32px; }
.nf-mark-link .brand-logo { width: 138px; height: 68px; }
.nf-mark-link:hover .brand-logo {
  color: var(--green);
  filter: drop-shadow(0 0 12px rgba(87, 198, 63, 0.55));
}
.nf-code {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(104px, 26vw, 224px);
  line-height: 0.86;
  letter-spacing: 0.04em;
  color: var(--green);
  text-shadow: 0 0 26px rgba(87, 198, 63, 0.45), 0 0 80px rgba(87, 198, 63, 0.22);
}
/* chromatic glitch: two offset copies of the "404" */
.nf-code[data-t]::before,
.nf-code[data-t]::after {
  content: attr(data-t);
  position: absolute; left: 0; right: 0; top: 0;
  pointer-events: none;
}
.nf-code[data-t]::before { color: var(--mint); opacity: 0.45; animation: nf-glitch-a 3.2s steps(2, end) infinite; }
.nf-code[data-t]::after  { color: #ff5a5a; opacity: 0.32; animation: nf-glitch-b 2.7s steps(2, end) infinite; }
@keyframes nf-glitch-a {
  0%, 88%, 100% { transform: translate(0, 0); }
  90% { transform: translate(-3px, 1px); }
  94% { transform: translate(2px, -1px); }
}
@keyframes nf-glitch-b {
  0%, 86%, 100% { transform: translate(0, 0); }
  91% { transform: translate(3px, -1px); }
  96% { transform: translate(-2px, 1px); }
}
.nf-title {
  font-size: clamp(23px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #F4FAF0;
  margin: 6px 0 14px;
}
.nf-desc { color: var(--body-c); font-size: 16px; margin: 0 auto 24px; max-width: 440px; }
.nf-term {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  background: rgba(5, 8, 5, 0.6);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 30px;
}
.nf-term .nf-prompt { color: var(--green); }
.nf-term .nf-err { color: #ff6b6b; }
.nf-term .nf-caret {
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(87, 198, 63, 0.7);
  animation: caret-blink 1.06s steps(2) infinite;
}
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nf-foot {
  flex-shrink: 0;
  padding: 22px 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
@media (prefers-reduced-motion: reduce) {
  .nf-code[data-t]::before,
  .nf-code[data-t]::after { animation: none; }
  .nf-term .nf-caret { animation: none; }
}

/* ---------- Why-now band ---------- */
.window-band {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(87, 198, 63, 0.09), transparent 60%),
    radial-gradient(rgba(87, 198, 63, 0.05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  padding: clamp(72px, 10vh, 116px) 0;
}
.window-title {
  color: #F4FAF0;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-bottom: 14px;
  max-width: 740px;
}
.window-sub { color: var(--muted); max-width: 560px; margin-bottom: 44px; }
.window-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.window-card {
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.window-card:hover {
  border-color: var(--green-line);
  background: rgba(87, 198, 63, 0.05);
  transform: translateY(-3px);
  box-shadow: var(--glow);
}
.window-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green);
  margin-bottom: 12px;
}
.window-num::before { content: "["; opacity: 0.6; }
.window-num::after  { content: "]"; opacity: 0.6; }
.window-card h3 {
  color: var(--ink);
  font-size: 17.5px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.window-card p { font-size: 14.5px; color: var(--body-c); line-height: 1.6; }
.window-kicker { margin-top: 38px; color: var(--muted); font-size: 15.5px; }
.text-link-dark { color: var(--green); text-decoration-color: rgba(87, 198, 63, 0.4); }
.text-link-dark:hover { color: var(--mint); text-decoration-color: var(--mint); }

/* ---------- METR time-horizon chart (Why now) ---------- */
.metr { margin: 0 0 44px; }
.metr-frame {
  background: rgba(5, 8, 5, 0.6);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 18px 20px 8px;
  box-shadow: var(--shadow-sm), inset 0 0 60px rgba(87, 198, 63, 0.03);
}
.metr-headrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.metr-headrow .viz-tag { margin-bottom: 0; }
.metr-src {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.metr-svg { width: 100%; height: auto; }
.metr-grid { stroke: rgba(87, 198, 63, 0.09); stroke-width: 1; }
.metr-grid.v { stroke: rgba(87, 198, 63, 0.045); }
.metr-axis { stroke: rgba(121, 135, 116, 0.45); stroke-width: 1.2; }
.metr-tick {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--muted);
  letter-spacing: 0.03em;
}
.metr-ylab {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: rgba(121, 135, 116, 0.8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.metr-trend {
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(87, 198, 63, 0.35));
}
.metr-recent { stroke: rgba(14, 255, 168, 0.75); stroke-width: 1.6; stroke-dasharray: 5 7; }
.metr-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  fill: var(--green);
  letter-spacing: 0.05em;
}
.metr-note.dim { fill: rgba(14, 255, 168, 0.85); font-size: 10.5px; }
.metr-pt { fill: #0b120b; stroke: var(--green); stroke-width: 2; }
/* preliminary lower-bound point (Mythos preview): hollow mint */
.metr-pt.last {
  fill: rgba(14, 255, 168, 0.14);
  stroke: var(--mint);
  stroke-dasharray: 3 2.5;
  filter: drop-shadow(0 0 7px rgba(14, 255, 168, 0.8));
}
.metr-pl { font-family: var(--font-mono); font-size: 10px; fill: var(--body-c); }
.metr-today { stroke: rgba(233, 242, 228, 0.22); stroke-dasharray: 3 6; }
.metr-cap {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 780px;
}
/* chart choreography: trend draws, points land in order, recent trend last */
html.js .metr.reveal .metr-trend { stroke-dasharray: 582; stroke-dashoffset: 582; }
html.js .metr.reveal.on .metr-trend { animation: metr-draw 1.6s var(--ease) 0.3s forwards; }
@keyframes metr-draw { to { stroke-dashoffset: 0; } }
html.js .metr.reveal .metr-p { opacity: 0; }
html.js .metr.reveal.on .metr-p {
  animation: metr-pop 0.5s var(--ease) forwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.13s);
}
@keyframes metr-pop {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
html.js .metr.reveal .metr-recent,
html.js .metr.reveal .metr-note,
html.js .metr.reveal .metr-today { opacity: 0; }
html.js .metr.reveal.on .metr-recent { animation: metr-fade 0.7s ease 2s forwards; }
html.js .metr.reveal.on .metr-note,
html.js .metr.reveal.on .metr-today { animation: metr-fade 0.7s ease 2.2s forwards; }
@keyframes metr-fade { to { opacity: 1; } }
@media (max-width: 700px) {
  .metr-frame { padding: 14px 12px 6px; overflow-x: auto; }
  .metr-svg { min-width: 560px; }
}

/* ---------- Rogue-AI animation (Why now) — minimal, all green ---------- */
.rogue {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  margin: clamp(30px, 5vh, 52px) 0 0;
}
.rogue-stage {
  position: relative;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 66% 66% at 50% 46%, rgba(87, 198, 63, 0.08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(87, 198, 63, 0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(87, 198, 63, 0.03) 0 1px, transparent 1px 26px),
    #050805;
  box-shadow: var(--shadow-sm), inset 0 0 60px rgba(87, 198, 63, 0.04);
}
.rogue-svg { display: block; width: 100%; height: auto; --rt: 6s; }
.rogue-cap .viz-tag { margin-bottom: 10px; }
.rogue-cap h3 { color: var(--ink); font-size: clamp(19px, 2.3vw, 24px); letter-spacing: -0.015em; margin-bottom: 10px; }
.rogue-cap p { font-size: 14.5px; color: var(--body-c); line-height: 1.6; }
.rogue-readout {
  position: absolute; left: 14px; bottom: 11px; margin: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted);
}
.rr-p, .rr-arrow { color: var(--green); }
.rr-arrow { margin: 0 4px; }
.rr-ok { color: var(--green-hi); }

.rogue-ground { stroke: rgba(121, 135, 116, 0.3); stroke-width: 1.4; stroke-dasharray: 3 5; }
/* firewall — thin green outline */
.rogue-wall { fill: none; stroke: rgba(87, 198, 63, 0.45); stroke-width: 1.2; }
.rogue-wall rect { fill: rgba(87, 198, 63, 0.04); }
.rogue-wall-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; fill: var(--muted); }
/* computer */
.rogue-monitor { fill: #0b120b; stroke: var(--green); stroke-width: 1.6; }
.rogue-screen { fill: #081007; stroke: rgba(87, 198, 63, 0.3); stroke-width: 1; }
.rogue-stand { fill: rgba(87, 198, 63, 0.18); }
.rogue-base { stroke: rgba(121, 135, 116, 0.5); stroke-width: 1.5; }
.rogue-lockbody { fill: none; stroke: var(--green); stroke-width: 2; }
.rogue-shackle {
  fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round;
  transform-origin: 303px 98px;
  animation: rl-open var(--rt) var(--ease) infinite;
}
@keyframes rl-open { 0%,60%{transform:rotate(0)} 70%,86%{transform:rotate(-40deg)} 94%,100%{transform:rotate(0)} }
/* the system quietly lights up green once it's reached */
.rogue-pc { animation: rp-access var(--rt) ease-in-out infinite; }
@keyframes rp-access {
  0%,58% { filter: none; }
  68%,84% { filter: drop-shadow(0 0 8px rgba(138, 255, 106, 0.5)); }
  92%,100% { filter: none; }
}
/* robot — thin green line-art */
.rogue-bot { animation: rb-move var(--rt) linear infinite; }
.rb-head, .rb-body { fill: rgba(87, 198, 63, 0.10); stroke: var(--green); stroke-width: 1.8; }
.rb-antenna { stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; }
.rb-antenna-dot { fill: var(--green-hi); }
.rb-leg { fill: var(--green); }
.rb-eye { fill: var(--green-hi); }
@keyframes rb-move {
  0%   { transform: translate(22px, 122px); opacity: 0; }
  5%   { opacity: 1; }
  14%  { transform: translate(26px, 122px); }
  22%  { transform: translate(60px, 104px); }
  30%  { transform: translate(104px, 64px); }
  38%  { transform: translate(168px, 34px); }
  48%  { transform: translate(228px, 66px); }
  55%  { transform: translate(266px, 104px); }
  60%  { transform: translate(273px, 122px); }
  60.01%, 84% { transform: translate(273px, 122px); }
  90%  { transform: translate(273px, 122px); opacity: 1; }
  93%  { transform: translate(273px, 122px); opacity: 0; }
  100% { transform: translate(22px, 122px); opacity: 0; }
}
@media (max-width: 760px) { .rogue { grid-template-columns: 1fr; } }
/* reduced motion: freeze to the "before" state — robot at left, firewall up, lock closed */
@media (prefers-reduced-motion: reduce) {
  .rogue-bot { animation: none !important; transform: translate(22px, 122px); opacity: 1; }
  .rogue-shackle, .rogue-pc { animation: none !important; transform: none; filter: none; }
}

/* ---------- Houston ---------- */
.label-coords {
  order: 6;
  margin-left: 12px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.1em;
}
.hou-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.hou-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 26px 24px 30px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.hou-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--green-deep), var(--green));
  opacity: 0.4;
  transition: opacity 0.2s;
}
.hou-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow);
  border-color: var(--green-line);
}
.hou-card:hover::before { opacity: 1; }
.hou-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.hou-card p { font-size: 15px; color: var(--body-c); }

/* ---------- Upcoming GBMs ---------- */
.gbm-layout {
  display: grid;
  /* the calendar rail carries a real embed now, so it needs a little more room */
  grid-template-columns: 1.25fr 0.75fr;
  gap: 16px;
  align-items: start;
}
.gbm-list { display: flex; flex-direction: column; gap: 12px; }
.gbm-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--nav-h) + 20px);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
/* brief highlight when reached via a nav-dropdown anchor */
.gbm-card:target { border-color: var(--green); box-shadow: var(--glow); }
.gbm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
  border-color: var(--green-line);
}
.gbm-tab {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 48px;
  padding-right: 18px;
  border-right: 1px solid var(--border-2);
  font-family: var(--font-mono);
}
.gbm-tab span { font-size: 10px; letter-spacing: 0.12em; color: var(--muted); }
.gbm-tab b { font-size: 20px; font-weight: 600; color: var(--green); line-height: 1; }
.gbm-main { flex: 1; }
.gbm-main h3 { font-size: 16.5px; margin-bottom: 3px; }
.gbm-main p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.gbm-when {
  flex-shrink: 0;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid rgba(87, 198, 63, 0.24);
  border-radius: 999px;
  padding: 4px 11px;
}
/* public Google Calendar embed — framed like a terminal */
.gbm-cal {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(5, 8, 5, 0.72);
  box-shadow: inset 0 0 50px rgba(87, 198, 63, 0.04), var(--shadow-sm);
}
.gbm-cal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border);
}
.gbm-cal-bar .t-dot { width: 9px; height: 9px; }
.gbm-cal-title {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}
.gbm-cal-tz {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--green);
  background: var(--green-tint);
  border: 1px solid rgba(87, 198, 63, 0.24);
  border-radius: 999px;
  padding: 1px 8px;
}
.gbm-cal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 14px;
}
.gbm-cal-frame {
  height: clamp(360px, 46vh, 460px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-2);
}
/* Google serves the embed light-only, so flip it onto the night palette;
   the hue-rotate spins event colours back to roughly where they started. */
.gbm-cal-embed {
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(1) hue-rotate(180deg);
}
.gbm-cal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.gbm-cal-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  transition: color 0.15s;
}
.gbm-cal-link:hover { color: var(--green); }
.gbm-cal-note { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .gbm-layout { grid-template-columns: 1fr; }
  .gbm-cal { position: static; }
  .gbm-cal-frame { height: min(70vh, 520px); }
}
@media (max-width: 460px) {
  .gbm-card { flex-wrap: wrap; gap: 12px 16px; }
  .gbm-when { align-self: auto; }
}

/* map + cards side by side */
.hou-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "cards map";
  gap: 16px;
  align-items: stretch;
}
.hou-grid { grid-area: cards; }
.hou-map { grid-area: map; }
.hou-map .viz-stage {
  aspect-ratio: auto;
  flex: 1;
  min-height: 300px;
}
.viz-svg.txmap { width: min(76%, 295px); }
.hou-map-note {
  font-size: 14px;
  color: var(--body-c);
}

/* Texas outline: draws itself in, then Houston pings */
.tx-outline {
  fill: rgba(87, 198, 63, 0.05);
  stroke: rgba(87, 198, 63, 0.55);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(87, 198, 63, 0.12));
}
html.js .hou-map.reveal .tx-outline {
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  fill-opacity: 0;
}
html.js .hou-map.reveal.on .tx-outline { animation: tx-draw 2.2s var(--ease) 0.25s forwards; }
@keyframes tx-draw {
  60% { fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}
.tx-city circle { fill: rgba(121, 135, 116, 0.75); }
.tx-city text {
  font-family: var(--font-mono);
  font-size: 8.5px;
  fill: var(--muted);
  letter-spacing: 0.08em;
}
html.js .hou-map.reveal .tx-city { opacity: 0; }
html.js .hou-map.reveal.on .tx-city { animation: tx-fade 0.7s ease 1.6s forwards; }
html.js .hou-map.reveal .tx-hou { opacity: 0; }
html.js .hou-map.reveal.on .tx-hou { animation: tx-fade 0.7s ease 1.9s forwards; }
@keyframes tx-fade { to { opacity: 1; } }
.tx-dot {
  fill: var(--green-hi);
  filter: drop-shadow(0 0 7px rgba(138, 255, 106, 0.95));
  animation: tx-glow 2.6s ease-in-out infinite;
}
@keyframes tx-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(138, 255, 106, 0.7)); }
  50%      { filter: drop-shadow(0 0 12px rgba(138, 255, 106, 1)); }
}
.tx-ping {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: tx-ping 2.6s ease-out infinite;
}
.tx-ping.pb { animation-delay: 1.3s; }
@keyframes tx-ping {
  0%        { opacity: 0.85; transform: scale(0.5); }
  70%, 100% { opacity: 0;    transform: scale(2.7); }
}
.tx-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--green-hi);
  letter-spacing: 0.16em;
}
@media (max-width: 1000px) {
  .hou-wrap { grid-template-columns: 1fr; grid-template-areas: "map" "cards"; }
  .hou-map .viz-stage { min-height: 280px; }
}

/* ---------- Team band ---------- */
.band {
  position: relative;
  background:
    radial-gradient(rgba(87, 198, 63, 0.08) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  padding: clamp(56px, 8vh, 88px) 0;
}
.band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.band-title {
  color: #F4FAF0;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  max-width: 560px;
}
.band-sub { color: var(--muted); max-width: 520px; }

/* ---------- Collaborators — sliding logo marquee ---------- */
/* The CRT scanline/vignette overlay is faded out over this section (see main.js)
   so the light logo tiles read cleanly. */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  /* soft-fade the two edges so tiles slide in and out, never pop */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: collab-marquee 44s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item {
  flex: 0 0 auto;
  width: 188px;
  height: 96px;
  margin-right: 16px;
  display: grid;
  place-items: center;
  padding: 18px 24px;
  background: #fafaf7;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.marquee-item:hover {
  border-color: var(--green-line);
  box-shadow: var(--glow);
}
.collab-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 50px;
  object-fit: contain;
}
/* Optional per-logo fit tweaks when you drop in a real logo (see partners/README.md) */
.collab-logo.is-wordmark { max-height: 30px; }   /* wide name/wordmark logos */
.collab-logo.is-square {                          /* square app-icon logos */
  max-height: 52px;
  border-radius: 11px;
}
/* sponsorship CTA sitting directly under the logo carousel */
.collab-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 30px;
}
.collab-cta p {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
}
@keyframes collab-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 16px; }
  .marquee-item { margin-right: 0; }
  .marquee-item[aria-hidden="true"] { display: none; }   /* drop the loop duplicates */
}

/* CRT overlay fades away while the collaborators section is on screen */
.crt { transition: opacity 0.45s ease; }
body.crt-off .crt { opacity: 0; }

/* ---------- Join ---------- */
.section-join { padding-top: 0; }
.join-box {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 90% at 50% -20%, rgba(87, 198, 63, 0.13), transparent 60%),
    radial-gradient(rgba(87, 198, 63, 0.06) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--card);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  color: var(--ink);
  text-align: center;
  padding: clamp(48px, 7vw, 76px) clamp(24px, 5vw, 64px);
}
.join-title {
  color: #F4FAF0;
  font-size: clamp(26px, 3.8vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.join-sub {
  color: var(--body-c);
  max-width: 540px;
  margin: 0 auto 30px;
}
.join-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.join-actions .btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-2);
}
.join-actions .btn-outline:hover { border-color: var(--green-line); background: var(--green-tint); }

/* ---------- Team page ---------- */
.page-head {
  padding: calc(var(--banner-h) + var(--nav-h) + clamp(48px, 9vh, 92px)) 0 clamp(20px, 4vh, 36px);
}
.section-team { padding-top: 28px; }

/* ---------- Program detail + mission placeholder pages ---------- */
.apply-card {
  align-self: start;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(87, 198, 63, 0.10), transparent 60%),
    var(--card);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: var(--glow);
}
.apply-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}
.apply-card h3 { font-size: 20px; margin-bottom: 10px; }
.apply-deadline {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 18px;
}
.apply-deadline::before { content: "◷ "; color: var(--green); }
.apply-deadline strong { color: var(--green); }
.apply-card .btn { width: 100%; }
.apply-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* ---------- Corporate sponsorship tiers ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 8px;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 30px 26px;
  overflow: hidden;
}
.tier::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tier-accent, var(--green));
}
.tier-gold   { --tier-accent: #E8C24A; }
.tier-silver { --tier-accent: #C2CBD4; }
.tier-bronze { --tier-accent: #CB8A4E; }
.tier--featured {
  border-color: rgba(232, 194, 74, 0.42);
  box-shadow: 0 0 0 1px rgba(232, 194, 74, 0.18), 0 18px 50px -22px rgba(232, 194, 74, 0.3);
}
.tier-badge {
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b0b0b;
  background: var(--tier-accent);
  border-radius: 999px;
  padding: 3px 10px;
}
.tier-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tier-accent);
}
.tier-price {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tier-price span { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tier-desc { margin-top: 8px; font-size: 14px; color: var(--body-c); }
.tier-feats {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}
.tier-feats li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--body-c);
  line-height: 1.5;
}
.tier-feats li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: 0;
  color: var(--tier-accent);
  font-weight: 700;
}
.tier .btn { margin-top: auto; width: 100%; }
.tiers-note {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--muted);
  font-family: var(--font-mono);
}
@media (max-width: 820px) {
  .tiers { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

/* ---------- Mission page — the statement (one paragraph, no boxes) ----------
   The mission is a single large paragraph. All emphasis is typographic:
   phosphor-glow highlights, a typed command line, a blinking block cursor,
   and a word-by-word decrypt on arrival (js/main.js §12). Nothing is boxed. */
.mission-read { position: relative; padding-top: 4px; }
/* soft phosphor wash behind the copy — atmosphere, not a container */
.mission-read::before {
  content: "";
  position: absolute;
  top: -70px; left: -6%;
  width: 72%; height: 460px;
  background: radial-gradient(ellipse 62% 55% at 34% 38%, rgba(87, 198, 63, 0.065), transparent 66%);
  pointer-events: none;
}
.mission-cmd {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 30px;
}
.mission-cmd .cmd-prompt { color: var(--green); }
.mission-cmd .cmd-caret {
  display: inline-block;
  width: 8px; height: 15px;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(87, 198, 63, 0.7);
  animation: caret-blink 1.06s steps(2) infinite;
}
.mission-text {
  position: relative;
  max-width: 940px;
  margin: 0;
  font-size: clamp(20.5px, 2.7vw, 30px);
  font-weight: 600;
  line-height: 1.56;
  letter-spacing: -0.013em;
  color: var(--ink);
  text-wrap: pretty;
  /* faint bloom over the whole statement — reads like a lit CRT */
  text-shadow: 0 0 24px rgba(87, 198, 63, 0.10);
}
.mission-text .mi {
  font-style: normal;
  font-weight: 800;
  color: var(--green-hi);
  text-shadow: 0 0 12px rgba(138, 255, 106, 0.38), 0 0 32px rgba(87, 198, 63, 0.26);
}
/* words mid-decrypt (class set by JS while a word is still scrambled) */
.mission-text .mw.sc { opacity: 0.38; color: var(--green-deep); text-shadow: none; }
.mission-cursor {
  display: inline-block;
  width: 0.52em; height: 1em;
  margin-left: 0.18em;
  vertical-align: -0.08em;
  background: var(--green);
  box-shadow: 0 0 16px rgba(87, 198, 63, 0.8);
  animation: caret-blink 1.06s steps(2) infinite;
}
.mission-sig {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.mission-sig b { color: var(--green); font-weight: 600; }
/* the "not a fringe view" echo — a rule above it, never a box around it */
.mission-echo {
  max-width: 820px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted);
}
.mission-echo .echo-q { color: var(--body-c); }
.mission-actions { justify-content: flex-start; margin-top: 36px; }

/* ---------- Mission page — takeover sim (earth → compute) ---------- */
.takeover-band {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(87, 198, 63, 0.08), transparent 60%),
    radial-gradient(rgba(87, 198, 63, 0.045) 1px, transparent 1.4px) 0 0 / 26px 26px,
    #060906;
}
.takeover { margin: clamp(28px, 5vh, 46px) 0 clamp(36px, 6vh, 56px); }
.takeover-frame {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  background: rgba(4, 7, 4, 0.78);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 0 90px rgba(87, 198, 63, 0.05);
}
.takeover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px 0;
}
.takeover-head .viz-tag { margin-bottom: 0; }
.takeover-src { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.takeover-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 20px) 0 8px;
  /* local scanlines so the sim stays CRT on phones (the global overlay hides ≤700px) */
  background: repeating-linear-gradient(0deg, rgba(87, 198, 63, 0.03) 0 1px, transparent 1px 3px);
}
#takeoverCanvas { display: block; }
.tk-hud {
  position: absolute;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.tk-hud b {
  display: block;
  margin-top: 3px;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.04em;
  color: var(--green);
  text-shadow: 0 0 14px rgba(87, 198, 63, 0.55);
}
.tk-hud-tl { left: 20px; }
.tk-hud-tr { right: 20px; text-align: right; }
.takeover-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.tk-status { color: var(--green); }
.tk-status.warn { color: var(--mint); }
.tk-status.fail {
  color: var(--green-hi);
  text-shadow: 0 0 10px rgba(138, 255, 106, 0.5);
  animation: banner-pulse 1.1s ease-in-out infinite;
}
.tk-legend { display: inline-flex; align-items: center; gap: 16px; }
.tk-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.tk-legend i { display: inline-block; }
.tk-l-land { width: 5px; height: 5px; border-radius: 50%; background: rgba(87, 198, 63, 0.5); }
.tk-l-dc { width: 7px; height: 7px; background: var(--green-hi); box-shadow: 0 0 8px rgba(138, 255, 106, 0.8); }
.tk-l-link { width: 16px; height: 1px; background: linear-gradient(90deg, transparent, var(--green)); }
@media (max-width: 640px) {
  .takeover-head { padding: 14px 14px 0; }
  .takeover-bar { padding: 10px 14px 12px; justify-content: center; text-align: center; }
  .tk-hud { top: 12px; font-size: 9.5px; }
  .tk-hud b { font-size: 15.5px; }
  .tk-hud-tl { left: 14px; }
  .tk-hud-tr { right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mission-cursor, .mission-cmd .cmd-caret, .tk-status.fail { animation: none; }
}
.team-grid {
  display: grid;
  /* auto-fit: column count follows the available width, so the roster reflows
     as seats are added instead of leaving a lone card on the last row */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.member {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.member:hover { transform: translateY(-3px); box-shadow: var(--glow); border-color: var(--green-line); }
.avatar {
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #10160F;
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  object-fit: cover;
}
.avatar svg {
  width: 34px; height: 34px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* vacant board seat — reads as a slot to fill, not a person */
.member-open { border-style: dashed; }
.member-open .member-name { color: var(--muted); font-weight: 600; }
.member-apply { margin-top: 10px; font-size: 13px; }
.member-name { font-size: 17px; margin-bottom: 4px; }
.member-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

/* ---------- Resources page (placeholder library) ---------- */
.res-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.res-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s;
}
.res-group:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow);
  border-color: var(--green-line);
}
.res-group h3 { font-size: 17px; margin-bottom: 6px; }
.res-group > p { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.res-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.014);
  transition: border-color 0.2s, color 0.2s;
}
.res-slot + .res-slot { margin-top: 10px; }
.res-slot::before { content: "·"; color: var(--green); font-weight: 700; }
.res-slot:hover { border-color: var(--green-line); color: var(--green); }
@media (max-width: 900px) { .res-groups { grid-template-columns: 1fr; } }

/* ---------- AI × Biosecurity — hero with spinning DNA helix ---------- */
.aixbio-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.aixbio-copy .section-sub { margin-bottom: 0; }

.dna-stage {
  position: relative;
  height: clamp(300px, 44vh, 400px);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding-bottom: 30px;   /* keep the helix clear of the readout caption */
  background:
    radial-gradient(ellipse 62% 62% at 50% 50%, rgba(87, 198, 63, 0.10), transparent 70%),
    repeating-linear-gradient(0deg, rgba(87, 198, 63, 0.038) 0 1px, transparent 1px 27px),
    repeating-linear-gradient(90deg, rgba(87, 198, 63, 0.038) 0 1px, transparent 1px 27px),
    #050805;
  box-shadow: inset 0 0 60px rgba(87, 198, 63, 0.05);
}
/* dashed center "backbone" guide behind the helix — retro schematic feel */
.dna-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 12%; bottom: 12%;
  width: 1px;
  transform: translateX(-0.5px);
  background: repeating-linear-gradient(180deg, rgba(87, 198, 63, 0.26) 0 4px, transparent 4px 10px);
  pointer-events: none;
}
.dna-tick {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--green-line);
  pointer-events: none;
}
.dna-tick.tl { top: 10px; left: 12px; }
.dna-tick.tr { top: 10px; right: 12px; }
.dna-tick.bl { bottom: 10px; left: 12px; }
.dna-tick.br { bottom: 10px; right: 12px; }
.dna-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(87, 198, 63, 0.10), transparent);
  animation: dna-scan 5s linear infinite;
}
@keyframes dna-scan { 0% { transform: translateY(-110%); } 100% { transform: translateY(320%); } }
.dna-cap {
  position: absolute;
  left: 13px; bottom: 11px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.dna-cap span { color: var(--green); }
.dna-cap::after {
  content: "▊";
  margin-left: 3px;
  color: var(--green);
  animation: caret-blink 1.1s steps(2) infinite;
}

/* the double helix — one shared spin cycle; each rung phase-offset by --i */
.dna {
  --dna-dur: 2.8s;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 90px;
  height: clamp(230px, 36vh, 320px);
  filter: drop-shadow(0 0 10px rgba(87, 198, 63, 0.22));
}
.dna-rung { position: relative; flex: 1; }
.dna-dot, .dna-bar { position: absolute; left: 50%; top: 50%; }
.dna-dot {
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--green-hi), var(--green-deep));
  box-shadow: 0 0 7px rgba(138, 255, 106, 0.7);
  animation: dna-a var(--dna-dur) linear infinite;
  animation-delay: calc(var(--i) * var(--dna-dur) / -8);
}
/* second strand: a deeper phosphor green (all green — no blue) */
.dna-dot.b {
  background: radial-gradient(circle at 38% 34%, var(--green), var(--green-deep));
  box-shadow: 0 0 6px rgba(87, 198, 63, 0.5);
  animation-delay: calc(var(--i) * var(--dna-dur) / -8 - var(--dna-dur) / 2);
}
/* base-pair rungs drawn as segmented "data lines" for a retro-digital read */
.dna-bar {
  width: 60px; height: 3px;
  margin: -1.5px 0 0 -30px;
  transform-origin: center;
  opacity: 0.82;
  background: repeating-linear-gradient(90deg,
    var(--green-hi) 0 3.5px, rgba(87, 198, 63, 0.22) 3.5px 6.5px);
  animation: dna-bar var(--dna-dur) linear infinite;
  animation-delay: calc(var(--i) * var(--dna-dur) / -8);
}
.dna-rung.odd .dna-bar {
  background: repeating-linear-gradient(90deg,
    var(--green) 0 3.5px, rgba(46, 185, 23, 0.18) 3.5px 6.5px);
}

@keyframes dna-a {
  0%    { transform: translateX(30px)    scale(0.875); opacity: 0.65; }
  12.5% { transform: translateX(21.2px)  scale(1.069); opacity: 0.897; }
  25%   { transform: translateX(0)       scale(1.15);  opacity: 1; }
  37.5% { transform: translateX(-21.2px) scale(1.069); opacity: 0.897; }
  50%   { transform: translateX(-30px)   scale(0.875); opacity: 0.65; }
  62.5% { transform: translateX(-21.2px) scale(0.681); opacity: 0.403; }
  75%   { transform: translateX(0)       scale(0.6);   opacity: 0.3; }
  87.5% { transform: translateX(21.2px)  scale(0.681); opacity: 0.403; }
  100%  { transform: translateX(30px)    scale(0.875); opacity: 0.65; }
}
@keyframes dna-bar {
  0%    { transform: scaleX(1);     opacity: 0.85; }
  12.5% { transform: scaleX(0.707); opacity: 0.68; }
  25%   { transform: scaleX(0.06);  opacity: 0.28; }
  37.5% { transform: scaleX(0.707); opacity: 0.68; }
  50%   { transform: scaleX(1);     opacity: 0.85; }
  62.5% { transform: scaleX(0.707); opacity: 0.68; }
  75%   { transform: scaleX(0.06);  opacity: 0.28; }
  87.5% { transform: scaleX(0.707); opacity: 0.68; }
  100%  { transform: scaleX(1);     opacity: 0.85; }
}
@media (max-width: 860px) {
  .aixbio-hero { grid-template-columns: 1fr; }
  .dna-stage { height: 340px; }
  .dna { height: 250px; }
}

/* freeze the helix into its baked static shape when motion is reduced */
@media (prefers-reduced-motion: reduce) {
  .dna-scan { animation: none !important; opacity: 0.5; }
  .dna-dot, .dna-bar { animation: none !important; }
  .dna-dot.a { transform: translateX(var(--xa)) scale(var(--sa)); opacity: var(--oa); }
  .dna-dot.b { transform: translateX(var(--xb)) scale(var(--sb)); opacity: var(--ob); }
  .dna-bar   { transform: scaleX(var(--bw)); opacity: var(--bo); }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--footer);
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding-top: 56px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
}
.brand-footer { color: var(--ink); }
.brand-footer .brand-logo { width: 94px; height: 46px; }
.footer-brand p {
  margin-top: 16px;
  font-size: 14.5px;
  max-width: 320px;
}
.footer-col h4 {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--muted);
  transition: color 0.15s, transform 0.15s var(--ease);
}
.footer-col a:hover { color: var(--green); transform: translateX(3px); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-family: var(--font-mono);
}
.footer-status { display: inline-flex; align-items: center; gap: 8px; }
.footer-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: dot-pulse 2.6s ease-out infinite;
}
.footer-bottom-left { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* footer social icon row */
.footer-social { display: inline-flex; align-items: center; gap: 6px; }
.footer-social .social {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.16s, background 0.16s, border-color 0.16s, transform 0.16s var(--ease);
}
.footer-social .social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.footer-social .social:hover {
  color: var(--green);
  background: var(--green-tint);
  border-color: var(--green-line);
  transform: translateY(-2px);
}

/* human-verified contact reveal (Cloudflare Turnstile) */
.contact-gate { display: grid; justify-items: center; gap: 12px; margin-top: 30px; }
.contact-gate[hidden] { display: none; }
.gate-label { font-family: var(--font-mono); font-size: 13.5px; color: var(--muted); margin: 0; }
.gate-note { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.cf-turnstile { min-height: 65px; }
.contact-revealed { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.contact-revealed[hidden] { display: none; }
.contact-revealed .btn-outline { background: transparent; color: var(--ink); border-color: var(--border-2); }
.contact-revealed .btn-outline:hover { border-color: var(--green-line); background: var(--green-tint); }

/* ---------- Reveal on scroll (soft focus-up; gated on .js) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(7px);
}
html.js .reveal-scale { transform: translateY(12px) scale(0.985); }
html.js .reveal.on {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .window-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .mission-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* programs fall back to a simple stacked flow */
  .panel {
    position: static;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 24px;
  }
  .panel + .panel { margin-top: 18px; }
  .panel-ghost { display: none; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #0A0F0A;
    border-bottom: 1px solid var(--border-2);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9);
    padding: 10px 20px 18px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) {
    color: var(--ink);
    opacity: 1;
    padding: 13px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--border);
  }
  .nav-links a.active { color: var(--green); }
  .nav-links a:not(.btn):last-of-type { border-bottom: none; }
  .nav-links .btn { margin-top: 12px; }
  /* dropdown collapses to a static indented sub-list inside the mobile menu */
  .nav-dd { display: block; }
  .nav-dd-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0;
    gap: 0;
    padding: 0 0 4px 16px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-dd-menu::before { display: none; }
  .nav-dd-menu a {
    padding: 11px 4px !important;
    font-size: 14.5px !important;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    color: var(--body-c) !important;
  }
  .dd-caret { display: none; }
  /* solid nav while menu is open so text is readable over the hero */
  .nav.menu-open {
    background: #0A0F0A;
    border-bottom-color: var(--border-2);
  }
}

@media (max-width: 760px) {
  .viz-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .explain-grid { grid-template-columns: 1fr; }
  .hou-grid { grid-template-columns: 1fr; }
  .label-coords { display: none; }
}

@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .join-actions { flex-direction: column; align-items: stretch; }
  .band-inner { flex-direction: column; align-items: flex-start; }
  .pub { flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 6px; }
  .pub::after { display: none; }
  .hero-scroll { display: none; }
}

/* ============================================================
   Intro overlay — cipher wall boot sequence (once per session)
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
}
html:not(.js) .intro { display: none; }

/* -- cipher wall -- */
.intro-wall {
  position: absolute;
  inset: -7vh -6vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.intro-row {
  font-weight: 700;
  font-size: clamp(52px, 13.5vh, 170px);
  line-height: 1;
  letter-spacing: 0.015em;
  white-space: nowrap;
  color: #86A47E;
  opacity: var(--row-o, 0.14);
  transform: translateX(var(--row-a, 0));
  animation: intro-drift var(--row-t, 7s) ease-in-out infinite alternate;
  will-change: transform;
  user-select: none;
}
@keyframes intro-drift {
  from { transform: translateX(var(--row-a, -2vw)); }
  to   { transform: translateX(var(--row-b, 2vw)); }
}

/* -- frame lines + ticks -- */
.if-line { position: absolute; background: rgba(87, 198, 63, 0.32); }
.if-top    { top: 26px; left: 26px; right: 26px; height: 1px; transform: scaleX(0); transform-origin: left;   animation: intro-draw-x 1.1s var(--ease) 0.2s forwards; }
.if-bottom { bottom: 26px; left: 26px; right: 26px; height: 1px; transform: scaleX(0); transform-origin: right; animation: intro-draw-x 1.1s var(--ease) 0.4s forwards; }
.if-left   { left: 26px; top: 26px; bottom: 26px; width: 1px; transform: scaleY(0); transform-origin: top;    animation: intro-draw-y 1.1s var(--ease) 0.3s forwards; }
.if-right  { right: 26px; top: 26px; bottom: 26px; width: 1px; transform: scaleY(0); transform-origin: bottom; animation: intro-draw-y 1.1s var(--ease) 0.5s forwards; }
@keyframes intro-draw-x { to { transform: scaleX(1); } }
@keyframes intro-draw-y { to { transform: scaleY(1); } }
.if-tick {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 1;
  color: rgba(87, 198, 63, 0.85);
  opacity: 0;
  animation: intro-tick 0.5s ease 1.3s forwards;
}
.if-tl { top: 18px; left: 18px; }
.if-tr { top: 18px; right: 18px; }
.if-bl { bottom: 18px; left: 18px; }
.if-br { bottom: 18px; right: 18px; }
@keyframes intro-tick { to { opacity: 1; } }

/* -- boot log (top-left, typed by JS) -- */
.intro-boot {
  position: absolute;
  top: 46px;
  left: 48px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-align: left;
  pointer-events: none;
}
.intro-boot .ib-ok { color: var(--green); }
@media (max-width: 640px) { .intro-boot { top: 40px; left: 34px; font-size: 11px; } }

/* -- center lockup -- */
.intro-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  background: radial-gradient(ellipse 46% 36% at 50% 50%,
    rgba(7, 10, 7, 0.94) 0%, rgba(7, 10, 7, 0.6) 55%, transparent 78%);
  pointer-events: none;
}
.intro-lockup {
  display: grid;
  place-items: center;
}
.intro-brand {
  grid-area: 1 / 1;
  font-family: var(--font-sans);
  font-size: clamp(72px, 15vw, 170px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 70px rgba(87, 198, 63, 0.4);
  opacity: 0;
}
.intro.brand-in .intro-brand { opacity: 1; transition: opacity 0.35s ease; }
.intro-logo {
  grid-area: 1 / 1;
  width: clamp(240px, 44vw, 520px);
  aspect-ratio: 645 / 317;
  height: auto;
  color: #EDF5E8;
  background-color: currentColor;
  -webkit-mask: url(../assets/logo-mark.png) center / contain no-repeat;
          mask: url(../assets/logo-mark.png) center / contain no-repeat;
  filter: drop-shadow(0 0 44px rgba(87, 198, 63, 0.3));
  opacity: 0;
  transform: scale(1.03);
}
/* scrambled wordmark resolves, then gives way to the real mark */
.intro.logo-in .intro-brand {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.5s ease, transform 0.6s var(--ease);
}
.intro.logo-in .intro-logo {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease 0.12s, transform 0.9s var(--ease) 0.12s;
}
.intro-rule {
  width: 84px;
  height: 2.5px;
  border-radius: 2px;
  margin: 26px 0 18px;
  background: linear-gradient(90deg, var(--green-deep), var(--green));
  box-shadow: 0 0 18px rgba(87, 198, 63, 0.45);
  transform: scaleX(0);
}
.intro.rule-in .intro-rule { transform: scaleX(1); transition: transform 0.65s var(--ease); }
.intro-tag {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--green);
  opacity: 0;
}
.intro.tag-in .intro-tag { opacity: 1; transition: opacity 0.65s ease; }
.intro-status {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  min-height: 1.5em;
  opacity: 0;
}
.intro-status .is-ok { color: var(--green); }
.intro.status-in .intro-status { opacity: 1; transition: opacity 0.4s ease; }

/* -- controls -- */
.intro-skip, .intro-sound {
  position: absolute;
  bottom: 24px;
  z-index: 3;
  background: rgba(7, 10, 7, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  padding: 9px 15px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.intro-skip { right: 26px; }
.intro-sound { left: 26px; }
.intro-skip:hover, .intro-sound:hover {
  opacity: 1;
  border-color: rgba(87, 198, 63, 0.55);
  color: var(--ink);
}
body.intro-lock { overflow: hidden; }

/* ---------- Intro leave — rows dissolve apart, veil lifts slowly ---------- */
.intro.leave {
  opacity: 0;
  transition: opacity 0.9s ease 0.55s;
  pointer-events: none;
}
.intro.leave .intro-row {
  animation: none;
  opacity: 0 !important;
  filter: blur(9px);
  transition: transform 1s var(--ease), opacity 0.8s ease, filter 1s ease;
}
.intro.leave .intro-row:nth-child(odd)  { transform: translateY(-9vh); }
.intro.leave .intro-row:nth-child(even) { transform: translateY(9vh); }
.intro.leave .intro-row:nth-child(4) { transition-delay: 0s; }
.intro.leave .intro-row:nth-child(3),
.intro.leave .intro-row:nth-child(5) { transition-delay: 0.07s; }
.intro.leave .intro-row:nth-child(2),
.intro.leave .intro-row:nth-child(6) { transition-delay: 0.14s; }
.intro.leave .intro-row:nth-child(1),
.intro.leave .intro-row:nth-child(7) { transition-delay: 0.21s; }
.intro.leave .intro-frame { opacity: 0; transition: opacity 0.55s ease 0.1s; }
.intro.leave .intro-center { background: transparent; transition: background 0.7s ease; }
.intro.leave .intro-boot,
.intro.leave .intro-status,
.intro.leave .intro-rule,
.intro.leave .intro-tag { opacity: 0 !important; transition: opacity 0.4s ease; }
.intro.leave .intro-skip,
.intro.leave .intro-sound { opacity: 0; transition: opacity 0.25s; }

/* ---------- Hero entrance (choreographed with the intro) ---------- */
html.js body .hero-inner > * { opacity: 0; transform: translateY(26px); filter: blur(6px); }
html.js body.intro-done .hero-inner > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.8s var(--ease);
}
body.intro-done .hero-inner > *:nth-child(1) { transition-delay: 0.1s; }
body.intro-done .hero-inner > *:nth-child(2) { transition-delay: 0.22s; }
body.intro-done .hero-inner > *:nth-child(3) { transition-delay: 0.34s; }
body.intro-done .hero-inner > *:nth-child(4) { transition-delay: 0.46s; }
body.intro-done .hero-inner > *:nth-child(5) { transition-delay: 0.58s; }
body.intro-done .hero-inner > *:nth-child(6) { transition-delay: 0.7s; }
html.js body .hero-scroll { opacity: 0; }
html.js body.intro-done .hero-scroll { opacity: 1; transition: opacity 1s ease 1.3s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  html.js body .hero-inner > * { opacity: 1; transform: none; filter: none; }
  html.js body .hero-scroll { opacity: 1; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; filter: none; }
  html.js .section-title.reveal::after,
  html.js .reveal .section-title::after { transform: none; }
  html.js .label.reveal { letter-spacing: 0.14em; }
  .hero-canvas { display: none; }
  .scroll-progress { display: none; }
  .panel { position: static; min-height: 0; }
  .panel + .panel { margin-top: 18px; }

  /* freeze the alignment vizzes into a clean, fully-resolved static state */
  .viz-stage::after,
  .rsi-oversight, .rsi-ovl, .rsi-gen, .rsi-node, .rsi-arrow, .rsi-head,
  .rsi-pulse, .rsi-halo,
  .nn-edge.on, .nn-node.on, .nn-node.out, .nn-probe, .nn-lead, .nn-halo {
    animation: none !important;
  }
  .rsi-gen.g2, .rsi-gen.g3, .rsi-gen.g4 { opacity: 1; }
  .rsi-arrow { stroke-dashoffset: 0; }
  .rsi-head { opacity: 0.9; }
  .rsi-pulse, .rsi-halo { opacity: 0; }

  /* METR chart + Texas map: fully-resolved static state */
  html.js .metr.reveal .metr-trend,
  html.js .hou-map.reveal .tx-outline {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
    animation: none !important;
  }
  html.js .metr.reveal .metr-p,
  html.js .metr.reveal .metr-recent,
  html.js .metr.reveal .metr-note,
  html.js .metr.reveal .metr-today,
  html.js .hou-map.reveal .tx-city,
  html.js .hou-map.reveal .tx-hou {
    opacity: 1;
    animation: none !important;
  }
  .tx-dot { animation: none !important; }
  .tx-ping { animation: none !important; opacity: 0; }
  .nn-edge.on { opacity: 0.9; }
  .nn-node.on { fill: var(--green); stroke: var(--green); }
  .nn-node.out { fill: var(--mint); stroke: var(--mint); }
  .nn-lead, .nn-halo { opacity: 0.75; }
  .nn-probe { opacity: 0; }
}