.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(to bottom,
    #050505 0%, #050505 56%, rgba(5, 5, 5, 0.86) 76%, rgba(5, 5, 5, 0) 100%);
}
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 75vw at 98% -9%,
      rgba(124, 92, 240, 0.34), rgba(124, 92, 240, 0.085) 50%, transparent 78%),
    radial-gradient(circle 60vw at 21% 111%,
      rgba(124, 92, 240, 0.10), rgba(124, 92, 240, 0.025) 50%, transparent 78%),
    radial-gradient(circle 35vw at 8% 95%,
      rgba(200, 216, 76, 0.045), transparent 72%);
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.027) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.027) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero__grid {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 82%);
}
.hero__glow {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--page-inset);
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-8);
}
.hero__text {
  flex: 0 1 auto;
  min-width: 0;
}
.hero__title {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-6xl));
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-100);
  margin-bottom: var(--space-6);
}
.hero__title span {
  display: block;
}
@media (min-width: 901px) {
  .hero__title span {
    white-space: nowrap;
  }
  .hero__mark {
    flex: 0 1 auto;
    min-width: 0;
  }
  .hero__mark img {
    max-width: 100%;
  }
}
.hero__subtitle {
  font-size: clamp(1rem, 1.667vw, 1.375rem);   
  line-height: 1.5;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.59);
  margin-bottom: clamp(2rem, 4.4vw, 3.25rem);
}
.hero__rule {
  width: min(52vw, 40rem);
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin-bottom: var(--space-5);
}
.hero__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.167vw, 0.875rem);   
  font-weight: 500;
  letter-spacing: 0.157em;   
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.41);
}
.hero__strip-domain {
  color: var(--accent);
}
.hero__strip-slash {
  color: rgba(255, 255, 255, 0.18);
}
.hero__strip-dot {
  color: rgba(255, 255, 255, 0.22);
}
.hero__strip a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}
.hero__strip a:hover {
  color: var(--text-90);
}
.hero__mark {
  flex: 0 0 auto;
  line-height: 0;
}
.hero__mark picture {
  display: block;
}
.hero__mark img {
  display: block;
  width: clamp(252px, 41vw, 38rem);
  height: auto;
  max-height: 74vh;
  object-fit: contain;
  filter:
    drop-shadow(0 0 3vw rgba(124, 92, 240, 0.45))
    drop-shadow(0 0 8vw rgba(124, 92, 240, 0.28));
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero__title,
.hero__subtitle,
.hero__rule,
.hero__strip {
  animation: heroRise 0.7s var(--ease-out-expo) both;
}
.hero__title    { animation-delay: 0.06s; }
.hero__subtitle { animation-delay: 0.12s; }
.hero__rule     { animation-delay: 0.18s; }
.hero__strip    { animation-delay: 0.22s; }
.hero__mark img {
  animation: heroRise 0.9s var(--ease-out-expo) 0.1s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__subtitle,
  .hero__rule,
  .hero__strip,
  .hero__mark img {
    animation: none;
  }
}
@media (max-width: 900px) {
  .hero__content {
    display: block;
  }
  .hero__mark {
    position: absolute;
    top: 50%;
    right: -14%;
    transform: translateY(-50%);
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
  }
  .hero__mark img {
    width: min(70vw, 26rem);
    max-height: none;
  }
  .hero__rule {
    width: min(100%, 22rem);
  }
}
@media (max-width: 768px) {
  .hero {
    min-height: 88vh;
  }
  .hero__strip {
    gap: 0.45em;
    letter-spacing: 0.1em;
  }
}
.home-metrics {
  padding-inline: var(--page-inset);
}
.home-metrics .metrics {
  max-width: var(--max-width);
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .home-metrics .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mission {
  padding: var(--section-gap) 0;
}
.mission__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.mission__sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.mission__heading {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 500;
  color: var(--text-100);
  line-height: var(--leading-tight);
}
.mission__body {
  padding-top: var(--space-2);
}
.mission__body p {
  font-size: var(--text-lg);
  color: var(--text-50);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: none;
}
.text-accent {
  color: var(--accent);
}
@media (max-width: 768px) {
  .mission__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .mission__sticky {
    position: static;
  }
}
.research-areas {
  padding: 0 var(--space-5);
  padding-bottom: var(--section-gap);
}
.research-areas__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.research-areas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border);
}
.research-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-200);
  transition: background var(--transition-slow);
}
.research-card:nth-child(2n) {
  border-right: none;
}
.research-card:nth-child(n+3) {
  border-bottom: none;
}
.research-card:hover {
  background: var(--surface-300);
}
.research-card__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--text-25);
  padding: var(--space-3) var(--space-5);
}
.research-card__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--space-5);
  padding-top: var(--space-2);
  gap: var(--space-3);
}
.research-card__title {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  font-weight: 500;
  color: var(--text-100);
  line-height: var(--leading-snug);
}
.research-card__desc {
  font-size: var(--text-sm);
  color: var(--text-50);
  line-height: var(--leading-relaxed);
  max-width: 40ch;
}
.research-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-50);
  margin-top: var(--space-2);
  transition: color var(--transition-fast);
}
.research-card__link:hover {
  color: var(--text-100);
}
@media (max-width: 768px) {
  .research-areas__grid {
    grid-template-columns: 1fr;
  }
  .research-card {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .research-card:last-child {
    border-bottom: none;
  }
}
.cta-banner {
  padding: var(--section-gap) var(--space-5);
}
.cta-banner__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.cta-banner__text {
  font-family: var(--font-mono);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 500;
  color: var(--text-100);
  line-height: var(--leading-tight);
  /* One line, one tone. The previous copy was written as two tinted
     halves; this is a single phrase and reads as one. */
  max-width: none;
  white-space: nowrap;
}
.theme-light.home {
  background: #e6dcfb;
}
.theme-light .hero {
  background: linear-gradient(to bottom,
    #ede4fd 0%, #dccff7 54%, rgba(213, 198, 245, 0.94) 76%, rgba(213, 198, 245, 0) 100%);
}
.theme-light .hero__glow {
  background:
    radial-gradient(circle 75vw at 98% -9%,
      rgba(124, 92, 240, 0.40), rgba(124, 92, 240, 0.13) 50%, transparent 78%),
    radial-gradient(circle 60vw at 21% 111%,
      rgba(108, 132, 245, 0.32), rgba(108, 132, 245, 0.10) 50%, transparent 78%);
}
.theme-light .hero__subtitle {
  color: var(--text-50);
}
.theme-light .hero__rule {
  background: rgba(18, 18, 26, 0.12);
}
.theme-light .hero__strip {
  color: var(--text-25);
}
.theme-light .hero__strip-slash {
  color: rgba(18, 18, 26, 0.22);
}
.theme-light .hero__strip-dot {
  color: rgba(18, 18, 26, 0.26);
}
.theme-light .site-aura__blob--a {
  background: radial-gradient(circle, rgba(124, 92, 240, 0.29), transparent 64%);
}
.theme-light .site-aura__blob--b {
  background: radial-gradient(circle, rgba(146, 116, 244, 0.24), transparent 68%);
}
.theme-light .site-aura__blob--c {
  background: radial-gradient(circle, rgba(96, 116, 240, 0.24), transparent 66%);
}
.theme-light .site-aura__blob--d {
  background: radial-gradient(circle, rgba(132, 104, 242, 0.22), transparent 70%);
}
.theme-light .site-aura::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 30vw at 4% 48%,
      rgba(150, 120, 245, 0.18), transparent 72%),
    radial-gradient(circle 32vw at 46% 96%,
      rgba(128, 100, 242, 0.16), transparent 74%),
    radial-gradient(circle 26vw at 58% 4%,
      rgba(118, 138, 246, 0.15), transparent 72%);
}
.theme-light .home-metrics .metrics {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
}
/* The four cards used to be near-black slabs, each carrying a photograph at
   0.85 under a dark gradient scrim so white text would read over it. On a
   lavender page that is four holes punched in the layout, and one of the four
   photographs was a CLI screenshot that goes stale the moment the CLI is
   renamed. They now use the same surface as the metrics band directly above
   them, and the text colours are left to resolve from the light-theme tokens
   instead of being pinned to white. */
.theme-light .research-areas__grid,
.theme-light .research-card {
  border-color: rgba(18, 18, 26, 0.11);
}
.theme-light .research-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
}
.theme-light .research-card:hover {
  background: rgba(255, 255, 255, 0.66);
}

/* Each card is washed in the colour of the page it links to, so the grid
   previews the section it leads into: CLI green, Neuralese slate,
   MultiThink blue. The hue is the destination page's own accent, laid on
   as a corner wash rather than a flat fill because the rest of the site
   states colour as a bloom, not a block.

   Cards 01 and 04 share the slate: both link to /neuralese. That is the
   rule applied, not an oversight.

   --card-wash is the only thing each modifier sets; the geometry below is
   shared, so a new card needs one line. */
/* These are the pages' BLOOM hues, not their accents. The accents
   (#17553f, #173f80, #252d3d) are dark and nearly unsaturated, and a dark
   unsaturated colour at 20% over white just makes grey: laid on the cards
   they were three shades of the same putty. The bloom is what actually
   gives each page its colour, so that is what the card borrows. */
.theme-light .research-card--neuralese  { --card-wash:  72,  86, 108; }
.theme-light .research-card--cli        { --card-wash:  58, 170, 118; }
.theme-light .research-card--multithink { --card-wash:  56, 140, 224; }

/* The white base is high on purpose. The homepage ground is a strong
   lavender bloom, and at 50% white it bled through hard enough to pull
   every wash back toward violet: all four cards read as the same panel.
   At 78% the lavender is mostly neutralised and the hue that survives is
   the card's own. The wash never reaches zero either, so the far corner
   is still tinted rather than plain white. */
.theme-light .research-card[class*="research-card--"] {
  background:
    linear-gradient(152deg,
      rgba(var(--card-wash), 0.22) 0%,
      rgba(var(--card-wash), 0.13) 50%,
      rgba(var(--card-wash), 0.07) 100%),
    rgba(255, 255, 255, 0.78);
}
.theme-light .research-card[class*="research-card--"]:hover {
  background:
    linear-gradient(152deg,
      rgba(var(--card-wash), 0.30) 0%,
      rgba(var(--card-wash), 0.19) 50%,
      rgba(var(--card-wash), 0.11) 100%),
    rgba(255, 255, 255, 0.82);
}
.theme-light .mission .research-card__link {
  color: var(--accent);
}
.theme-light .mission .research-card__link:hover {
  color: var(--accent-muted);
}

/* Phones: no full-screen hero. Size it to its content, and move the
   butterfly out from behind the title where it was muddying the text. */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
  }
  .hero__content {
    padding-block: calc(var(--header-height) + var(--space-10)) var(--space-12);
  }
  .hero__mark {
    top: 22%;
    right: -34%;
    opacity: 0.22;
  }
}

/* The hero's third line. Orbitron for this line only, at 0.62em because
   Orbitron sets far wider than Inter and would overrun the column at the
   title's own size. The flat accent fill read as unfinished against the
   lavender ground, so the line carries a tonal violet gradient (the page
   accent through the two violets the site's aura is already built from)
   and a soft glow behind it, the same lit-from-behind treatment the
   butterfly mark has. Tonal, inside one hue: not a rainbow.

   0.85em is measured, not guessed: at 1600px the two Inter lines set at
   584px and Orbitron at 0.85em sets at 573px, so the third line matches
   the optical width of the two above it and the block reads as one
   heading. Both scale on the same clamp, so the ratio holds at every
   width where nowrap applies, and there is still 648px of room before
   the butterfly. */
.home .hero__title .text-chrome {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.005em;
  line-height: 1.24;
  padding-top: 0.10em;
  color: var(--accent);
}
.home .hero__title .text-chrome::before {
  content: '';
  position: absolute;
  inset: -0.26em -0.42em -0.16em;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(ellipse at 38% 55%,
    rgba(124, 92, 240, 0.42), rgba(124, 92, 240, 0.16) 48%, transparent 74%);
  filter: blur(22px);
  pointer-events: none;
}
/* Guarded: without background-clip the transparent fill would erase the
   line entirely, so the flat accent above stays as the fallback. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home .hero__title .text-chrome {
    background-image: linear-gradient(96deg,
      #3a2080 0%, #4a2c9b 24%, #6a4ae0 62%, #8f78f0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home .hero__title .text-chrome::before { filter: blur(20px); }
}


/* ── /samaritan entry point ───────────────────────────────────────
   One quiet line under the closing banner. It is the only route to
   /samaritan from the front of the site, so it has to be findable
   without competing with the call to action directly above it. */
.samaritan-note {
  padding: 0 0 var(--space-16);
  text-align: center;
}
.samaritan-note__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-25);
  text-decoration: none;
  transition: color var(--transition-base);
}
.samaritan-note__link:hover {
  color: var(--text-70);
}
.samaritan-note__link span {
  margin-left: 0.4em;
}