/* ---------- 01 hero ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(56rem, 100svh);
  display: grid; align-content: center;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) clamp(5rem, 12vh, 8rem);
}
.hero__network {
  position: absolute; z-index: -1; inset: 0 -8% 0 auto;
  width: min(62rem, 72%); height: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.hero__content { max-width: 58rem; }
.hero h1 { font-size: min(var(--text-h1), 5.4rem); margin-top: 1.4rem; }
.hero__body { margin-top: 2rem; max-width: 36rem; color: var(--mute); font-size: var(--text-lead); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.6rem; }
.hero__film-link {
  display: inline-block; margin-top: 2.2rem; color: var(--mute);
  font: 500 var(--text-label) / 1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; transition: color var(--duration) var(--ease-out);
}
.hero__film-link:hover { color: var(--teal); }
.hero__line { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.6rem; }

/* network drawing */
.net__links line { stroke: rgb(140 170 190 / 0.2); stroke-width: 1; }
.net__spokes line { stroke: rgb(69 227 166 / 0.16); stroke-width: 1; }
.net__spokes line.is-pulse {
  stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 8 92; stroke-dashoffset: 100;
  animation: net-pulse 7.8s linear infinite; animation-delay: var(--delay, 0s);
}
.net__nodes circle { fill: rgb(140 170 190 / 0.55); }
.net__nodes circle.is-anchored { fill: var(--teal); }
.net__core .ring { fill: none; stroke: rgb(69 227 166 / 0.5); stroke-width: 1; }
.net__core .ring--1 { stroke: rgb(255 138 36 / 0.55); }
.net__core .ring--2 { stroke: rgb(69 227 166 / 0.25); }
.net__core-dot { fill: var(--teal); filter: drop-shadow(0 0 12px rgb(69 227 166 / 0.8)); }

@keyframes net-pulse {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: -100; }
}

@media (max-width: 859px) {
  .hero__network { inset: auto -30% -10% -30%; width: auto; height: 70%; opacity: 0.45; }
  .hero__line { position: static; margin-top: 3rem; }
}

/* ---------- 02 problem ---------- */

.problem__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(3rem, 6vw, 7rem); align-items: start;
}
.problem__head { position: sticky; top: 2rem; }
.problem__thesis {
  margin-top: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: var(--text-lead); color: var(--paper); max-width: 34rem;
}
.problem__list { list-style: none; counter-reset: none; }
.problem__item {
  display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem; row-gap: 0.4rem;
  padding: 2rem 0; border-top: 1px solid var(--line);
  transition: border-color var(--duration) var(--ease-out);
}
.problem__item:last-child { border-bottom: 1px solid var(--line); }
.problem__item:hover { border-top-color: var(--teal); }
.problem__index {
  grid-row: span 2;
  font: 300 2.6rem / 1 var(--font-display); letter-spacing: -0.04em; color: var(--line-strong);
  transition: color var(--duration) var(--ease-out);
}
.problem__item:hover .problem__index { color: var(--teal); }
.problem__item h3 { font-size: var(--text-h3); }
.problem__item p { color: var(--mute); }

@media (max-width: 959px) {
  .problem__grid { grid-template-columns: minmax(0, 1fr); }
  .problem__head { position: static; }
}

/* ---------- 03 pillars ---------- */

.pillars {
  list-style: none; margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}
.pillar {
  position: relative; display: grid; align-content: start; gap: 1rem;
  min-height: 24rem; padding: 2rem clamp(1rem, 1.6vw, 1.6rem) 2.4rem;
  border-right: 1px solid var(--line);
  background: linear-gradient(to top, rgb(69 227 166 / 0.06), transparent 55%);
  transition: background-color var(--duration) var(--ease-out);
}
/* each pillar rises a little higher: a foundation built up, not five equal boxes */
.pillar:nth-child(1) { margin-top: 4rem; }
.pillar:nth-child(2) { margin-top: 3rem; }
.pillar:nth-child(3) { margin-top: 2rem; }
.pillar:nth-child(4) { margin-top: 1rem; }
.pillar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--teal); transform: scaleX(0.18); transform-origin: left;
  transition: transform 600ms var(--ease-out);
}
.pillar:hover::before { transform: scaleX(1); }
.pillar__icon { width: 30px; height: 30px; fill: none; stroke: var(--teal); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); margin-top: auto; }
.pillar p { color: var(--mute); font-size: 0.95rem; }

@media (max-width: 1099px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; gap: 0; }
  .pillar { min-height: 0; margin-top: 0 !important; border: 0; border-top: 1px solid var(--line); }
  .pillar h3 { margin-top: 0.5rem; }
}
@media (max-width: 599px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 04 architecture ---------- */

.architecture__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(3rem, 6vw, 6rem); align-items: start;
}
.arch-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.4rem; }
.arch-picker .label { width: 100%; }
.arch-picker__option {
  padding: 0.75rem 1rem; border: 1px solid var(--line-strong); background: transparent; color: var(--paper);
  font: 400 0.95rem / 1 var(--font-display); cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.arch-picker__option:hover { border-color: var(--teal); }
.arch-picker__option[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--ink); font-weight: 600; }

.arch-stack { list-style: none; display: grid; gap: 0.6rem; perspective: 1400px; }
.layer {
  position: relative; display: grid; gap: 0.6rem;
  padding: 1.4rem 1.6rem; background: var(--graphite);
  border: 1px solid var(--line);
  transition: border-color var(--duration) var(--ease-out), transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.layer h3 { font-size: 1.25rem; }
.layer > p:last-child, .layer [data-app-panel] p { color: var(--mute); font-size: 0.95rem; }
.layer__index { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; }
.layer__aside { color: var(--mute); }
.layer__aside--fixed { color: var(--amber); }

/* indentation reads as a stack resting on its foundation */
.layer--app { margin-inline: 2.4rem; border-color: rgb(69 227 166 / 0.5); box-shadow: 0 30px 60px -40px rgb(69 227 166 / 0.6); }
.layer--profile { margin-inline: 1.2rem; }
.layer--protocol { border-color: rgb(255 138 36 / 0.45); background: linear-gradient(90deg, var(--amber-dim), var(--graphite) 40%); }
.layer--trust { background: linear-gradient(90deg, var(--teal-dim), var(--graphite) 50%); }

.layer [data-app-panel]:not([hidden]) { animation: panel-in 500ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } }

.profile-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profile-chip {
  padding: 0.45rem 0.7rem; border: 1px dashed var(--line-strong); color: var(--mute);
  font: 500 0.7rem / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  transition: all var(--duration) var(--ease-out);
}
.profile-chip.is-selected { border-style: solid; border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }

.arch-boundary {
  display: grid; gap: 0.5rem; margin-top: 1.4rem; padding: 1.2rem 1.4rem;
  border: 1px solid var(--line); border-left: 2px solid var(--amber);
}
.arch-boundary p:last-child { color: var(--paper-soft); }

@media (max-width: 959px) {
  .architecture__grid { grid-template-columns: minmax(0, 1fr); }
  .layer--app { margin-inline: 1rem; }
  .layer--profile { margin-inline: 0.5rem; }
}

/* ---------- 05 applications ---------- */

.apps {
  list-style: none; margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.app {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.6rem, 2.4vw, 2.4rem); background: var(--ink);
  transition: background-color var(--duration) var(--ease-out);
}
.app:hover { background: var(--navy); }
.app h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); }
.app__tagline { color: var(--teal); font-weight: 400; }
.app > p:not(.label):not(.status-tag):not(.app__tagline) { color: var(--mute); }
.app__meta { display: grid; gap: 0.3rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.app__meta dd { font-size: 0.95rem; }
.app .status-tag { align-self: flex-start; }
.app__link {
  align-self: flex-start; color: var(--paper); text-decoration: none;
  font: 500 var(--text-label) / 1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 0.3rem;
  transition: border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.app__link:hover { color: var(--teal); border-color: var(--teal); }

@media (max-width: 959px) {
  .apps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 06 business ---------- */

.flow {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.flow__col { position: relative; display: grid; gap: 0.6rem; }
.flow__col:not(:last-child)::after {
  content: "→"; position: absolute; right: calc(clamp(2rem, 5vw, 5rem) / -2); top: 50%;
  transform: translate(50%, -50%); color: var(--amber); font: 300 1.6rem / 1 var(--font-display);
}
.flow__node {
  padding: 0.95rem 1.1rem; border: 1px solid var(--line-strong); background: var(--graphite);
  font-size: 0.98rem;
}
.flow__node--core {
  padding: 1.6rem 1.3rem; border-color: var(--teal); background: linear-gradient(135deg, var(--teal-dim), var(--graphite));
  font-weight: 600; font-size: 1.15rem;
}
.flow__node--core span { font-weight: 300; font-size: 0.92rem; color: var(--mute); }
.flow__node--future { border-style: dashed; color: var(--mute); background: transparent; }

.streams {
  list-style: none; margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-wrap: wrap; gap: 0.5rem 0;
  border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.streams li {
  font: 500 var(--text-label) / 1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  padding-right: 1.4rem; margin-right: 1.4rem; border-right: 1px solid var(--line-strong);
}
.streams li:last-child { border-right: 0; }

@media (max-width: 859px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .flow__col:not(:last-child)::after { content: "↓"; right: auto; left: 1.1rem; top: auto; bottom: -1.9rem; transform: none; }
}

/* ---------- 07 research ---------- */

.pathway {
  list-style: none; margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem);
  position: relative;
}
.pathway::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.15rem; height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--amber));
}
.pathway__step { position: relative; display: grid; gap: 0.7rem; align-content: start; padding-top: 3.4rem; }
.pathway__num {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  background: var(--ink); border: 1px solid var(--teal); border-radius: 50%;
  font: 500 0.72rem / 1 var(--font-mono); color: var(--teal);
}
.pathway__step:last-child .pathway__num { border-color: var(--amber); color: var(--amber); }
.pathway__step h3 { font-size: 1.2rem; }
.pathway__step p { color: var(--mute); font-size: 0.95rem; }

.research__status {
  display: grid; gap: 1rem; justify-items: start;
  margin-top: clamp(3rem, 5vw, 4rem); padding: 1.6rem; max-width: 52rem;
  border: 1px solid rgb(255 138 36 / 0.3); background: var(--amber-dim);
}
.research__status p:last-child { color: var(--paper-soft); }

@media (max-width: 959px) {
  .pathway { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .pathway::before { left: 1.15rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(var(--teal), var(--amber)); }
  .pathway__step { padding: 0 0 0 3.6rem; }
}

/* ---------- 08 cta ---------- */

.cta__paths {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.cta__path {
  position: relative; display: grid; gap: 1rem; align-content: start;
  min-height: 18rem; padding: clamp(1.8rem, 3vw, 3rem);
  border: 1px solid var(--line-strong); text-decoration: none; color: var(--paper);
  transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}
.cta__path h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); max-width: 14ch; }
.cta__path > p:not(.label) { color: var(--mute); max-width: 30rem; }
.cta__path--primary { border-color: var(--teal); background: linear-gradient(140deg, var(--teal-dim), transparent 60%); }
.cta__path:hover { border-color: var(--teal); background-color: var(--navy); }
.cta__arrow {
  position: absolute; right: clamp(1.8rem, 3vw, 3rem); bottom: clamp(1.8rem, 3vw, 3rem);
  font: 300 2rem / 1 var(--font-display); color: var(--teal);
  transition: transform var(--duration) var(--ease-out);
}
.cta__path:hover .cta__arrow { transform: translateX(6px); }

@media (max-width: 859px) {
  .cta__paths { grid-template-columns: minmax(0, 1fr); }
  .cta__path { min-height: 0; padding-bottom: 4.5rem; }
}

/* ---------- partners page ---------- */

.partners-hero { padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3rem, 6vh, 5rem); }
.partners-hero .section__inner { display: grid; gap: 1.2rem; }
.partners-hero h1 { font-size: var(--text-h2); max-width: 18ch; }

.partner-track { scroll-margin-top: 1rem; }
.partner-track__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.partner-track__list { list-style: none; display: grid; }
.partner-track__list li { padding: 1.3rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.35rem; }
.partner-track__list li:last-child { border-bottom: 1px solid var(--line); }
.partner-track__list h3 { font-size: 1.15rem; }
.partner-track__list p { color: var(--mute); font-size: 0.95rem; }
.partner-contact {
  margin-top: 2rem; padding: 1.4rem; display: grid; gap: 0.6rem;
  border: 1px dashed var(--line-strong);
}
.partner-contact p:last-child { color: var(--mute); }

@media (max-width: 959px) {
  .partner-track__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- brand marks ---------- */

.layer--protocol { padding-right: 6.5rem; }
.layer__mark {
  position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
  width: 64px; height: auto; filter: drop-shadow(0 0 14px rgb(69 227 166 / 0.3));
}
@media (max-width: 599px) {
  .layer--protocol { padding-right: 1.6rem; }
  .layer__mark { position: static; transform: none; width: 48px; }
}

.research__figures {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.research__figures > div { display: grid; gap: 0.5rem; padding: 1.3rem; background: var(--ink); }
.research__figures dd { color: var(--paper-soft); }
.research__figures strong { font-size: 1.6rem; font-weight: 600; color: var(--paper); letter-spacing: -0.03em; }
.research .button { margin-top: 1.6rem; }
@media (max-width: 859px) { .research__figures { grid-template-columns: minmax(0, 1fr); } }

/* ---------- kill test clip ---------- */

.kill__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 6rem); align-items: center;
}
.kill__head .button { justify-self: start; margin-top: 0.6rem; }
.kill__figure { display: grid; gap: 1.1rem; margin: 0; }
/* amber brackets: the film is teal (running), this is the moment everything stops */
.kill__frame {
  position: relative; aspect-ratio: 1920 / 1200; background: #000;
  box-shadow: 0 40px 120px -40px rgb(255 138 36 / 0.2), 0 0 0 1px var(--line);
}
.kill__frame::before, .kill__frame::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid var(--amber); opacity: 0.7;
}
.kill__frame::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.kill__frame::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.kill__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.kill__caption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  font: 400 0.82rem / 1.6 var(--font-mono); color: var(--mute);
}
.kill__caption code { font: inherit; color: var(--paper); white-space: nowrap; }

@media (max-width: 959px) {
  .kill__grid { grid-template-columns: minmax(0, 1fr); }
}