/* Design tokens. Every colour, size and layout constant the stylesheet uses is declared here and nowhere else. This file previously carried two separate :root blocks, where the second silently overrode the first, so half of these values were dead and editing them did nothing. */

:root {
  --bg: #02050a;
  --panel: #07111d;
  --panel-2: #0b1c2d;
  --text: #f4fbff;
  --muted: #a7bbc9;
  --line: rgba(135, 202, 235, .22);
  --green: #43f59a;
  --green-soft: #a2ffd2;
  --blue: #36a4ff;
  --blue-soft: #91d2ff;
  --yellow: #ffd93d;
  --yellow-soft: #fff09c;
  --max: 1120px;
  --radius: 20px;
  --mx: 50vw;
  --my: 25vh;
  --orange: #ffb168;
  --orange-soft: #ffd2a8;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
        radial-gradient(circle at 12% 0%, rgba(101, 230, 167, 0.16), transparent 32rem),
        radial-gradient(circle at 92% 14%, rgba(89, 168, 255, 0.16), transparent 31rem),
        radial-gradient(circle at 54% 105%, rgba(255, 215, 90, 0.09), transparent 30rem),
        var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle 360px at var(--mx) var(--my), rgba(89, 168, 255, 0.09), transparent 72%);
  transition: background 120ms linear;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.22;
  background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

a {
  color: inherit;
}

.wrap {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(3, 7, 12, 0.82);
  backdrop-filter: blur(18px);
}

header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), var(--blue), var(--yellow), transparent);
  opacity: 0.55;
}

nav {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
        conic-gradient(from 30deg, var(--green), var(--blue), var(--yellow), var(--green)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 34px rgba(89, 168, 255, 0.14);
  animation: markFloat 4s ease-in-out infinite;
}

.mark::before {
  content: "";
  width: 13px;
  height: 19px;
  border: 2px solid var(--green-soft);
  border-top: 0;
  border-bottom: 0;
  transform: skew(-16deg);
  filter: drop-shadow(0 0 5px rgba(101,230,167,0.55));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 0.94rem;
}

.nav-links a {
  position: relative;
  text-decoration: none;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--yellow));
  transition: transform 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.hero {
  padding: 110px 0 80px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 56px;
  align-items: center;
}

.eyebrow,
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--green-soft);
  background: rgba(13, 28, 37, 0.82);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
  animation: pulseDot 2.1s ease-in-out infinite;
}

h1 {
  margin: 24px 0 18px;
  max-width: 840px;
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.gradient-text {
  background: linear-gradient(92deg, var(--green-soft) 4%, var(--blue-soft) 49%, var(--yellow-soft) 94%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 7s ease-in-out infinite alternate;
}

.lead {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(1.08rem, 2vw, 1.34rem);
}

.actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button.primary {
  color: #04120d;
  background: linear-gradient(100deg, var(--green), var(--yellow));
  border-color: transparent;
  box-shadow: 0 12px 34px rgba(101, 230, 167, 0.13);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 14px 36px rgba(89, 168, 255, 0.12);
}

.hero-card,
.card,
.roadmap-item,
.team-card,
.boundary {
  --rx: 0deg;
  --ry: 0deg;
  border: 1px solid var(--line);
  background:
        linear-gradient(145deg, rgba(13, 28, 37, 0.96), rgba(5, 13, 18, 0.96)) padding-box,
        linear-gradient(120deg, rgba(101,230,167,0.35), rgba(89,168,255,0.18), rgba(255,215,90,0.16)) border-box;
  border-radius: var(--radius);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.tilt:hover {
  border-color: rgba(89,168,255,0.52);
  box-shadow: 0 22px 70px rgba(0,0,0,0.25), 0 0 38px rgba(89,168,255,0.07);
}

.hero-card {
  padding: 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 90px rgba(0,0,0,0.28);
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: auto -12% -42% 25%;
  height: 190px;
  border-radius: 50%;
  background: conic-gradient(from 190deg, transparent, rgba(89,168,255,0.18), rgba(255,215,90,0.14), transparent);
  filter: blur(12px);
  animation: slowSpin 10s linear infinite;
  pointer-events: none;
}

.hero-card h2 {
  margin-top: 0;
  font-size: 1rem;
  color: var(--blue-soft);
}

.signal {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}

.signal div {
  padding: 15px;
  border-radius: 14px;
  background: rgba(2, 8, 12, 0.56);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 180ms ease, border-color 180ms ease;
}

.signal div:hover {
  transform: translateX(4px);
  border-color: rgba(255,215,90,0.38);
}

.signal strong {
  display: block;
  margin-bottom: 3px;
}

.signal span {
  color: var(--muted);
  font-size: 0.92rem;
}

section {
  padding: 82px 0;
}

.section-head {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 42px;
  align-items: start;
  margin-bottom: 36px;
}

.kicker {
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h2 {
  margin: 8px 0 0;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.section-copy {
  color: var(--muted);
  font-size: 1.08rem;
  margin: 0;
}

.grid-2,
.grid-3,
.grid-4,
.team-grid {
  display: grid;
  gap: 18px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.team-grid {
  grid-template-columns: repeat(3, 1fr);
}

.card,
.team-card,
.boundary {
  padding: 24px;
}

.card .number {
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.card:nth-child(2n) .number {
  color: var(--blue);
}

.card:nth-child(3n) .number {
  color: var(--green);
}

.card h3,
.team-card h3 {
  margin: 12px 0 9px;
}

.card p,
.team-card p,
.boundary p {
  margin: 0;
  color: var(--muted);
}

.team-card {
  border-color: rgba(255,215,90,0.42);
  box-shadow: inset 0 1px 0 rgba(255,215,90,0.08);
}

.team-card h3::after {
  content: "";
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roadmap {
  display: grid;
  gap: 14px;
}

.roadmap-horizon {
  margin-top: 56px;
}

.roadmap-item {
  padding: 22px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 22px;
  align-items: start;
}

.roadmap-item .time {
  color: var(--blue-soft);
  font-weight: 800;
}

.roadmap-item:nth-child(even) .time {
  color: var(--orange-soft);
}

.roadmap-item h3 {
  margin: 0 0 5px;
}

.roadmap-item p {
  margin: 0;
  color: var(--muted);
}

.boundary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
}

.boundary ul {
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.mini-orbit {
  width: 178px;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  animation: orbitFloat 4.6s ease-in-out infinite;
}

.orbit-ring {
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(89,168,255,0.45);
  border-radius: 50%;
  animation: slowSpin 8s linear infinite;
}

.orbit-ring.second {
  inset: 44px 15px;
  border-color: rgba(101,230,167,0.4);
  transform: rotate(58deg);
  animation-direction: reverse;
  animation-duration: 6s;
}

.orbit-dot {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: 0 0 24px currentColor;
}

.orbit-dot.green {
  color: var(--green);
  background: var(--green);
  top: 16px;
}

.orbit-dot.blue {
  color: var(--blue);
  background: var(--blue);
  right: 16px;
  bottom: 43px;
}

.orbit-dot.yellow {
  color: var(--yellow);
  background: var(--yellow);
  left: 22px;
  bottom: 33px;
}

.orbit-core {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue), var(--yellow));
  box-shadow: 0 0 34px rgba(89,168,255,0.5);
  animation: pulseCore 2.8s ease-in-out infinite;
}

.notice {
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 3px solid var(--yellow);
  background: linear-gradient(90deg, rgba(255,215,90,0.08), rgba(89,168,255,0.05));
  color: var(--muted);
}

footer {
  padding: 38px 0 52px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.9rem;
}

footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.2,.8,.2,1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes markFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(3deg);
  }
}

@keyframes pulseDot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.45);
    opacity: 0.62;
  }
}

@keyframes gradientShift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes slowSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulseCore {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.16);
    filter: brightness(1.2);
  }
}

@media (max-width: 860px) {
  .hero,
  .section-head,
  .boundary {
    grid-template-columns: 1fr;
  }
  .grid-2,
  .grid-3,
  .grid-4,
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mini-orbit {
    display: none;
  }
  .nav-links {
    display: none;
  }
}

@media (max-width: 580px) {
  .wrap {
    width: min(calc(100% - 26px), var(--max));
  }
  .hero {
    padding-top: 76px;
  }
  .grid-2,
  .grid-3,
  .grid-4,
  .team-grid {
    grid-template-columns: 1fr;
  }
  .roadmap-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  h1 {
    font-size: clamp(3rem, 17vw, 4.6rem);
  }
  .brand {
    letter-spacing: 0.025em;
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
  body::before {
    display: none;
  }
}

body {
  background:
    radial-gradient(circle at 12% -5%, rgba(67,245,154,.22), transparent 34rem),
    radial-gradient(circle at 94% 4%, rgba(54,164,255,.24), transparent 38rem),
    radial-gradient(circle at 50% 110%, rgba(255,217,61,.11), transparent 32rem),
    linear-gradient(180deg, #02050a, #05101a 52%, #02050a);
}

body.modal-open {
  overflow: hidden;
}

body::before {
  background: radial-gradient(circle 430px at var(--mx) var(--my), rgba(54,164,255,.13), transparent 73%);
}

body::after {
  opacity: .34;
  background-image:
    linear-gradient(rgba(138,202,235,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,202,235,.05) 1px, transparent 1px);
  background-size: 58px 58px;
}

#field {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
}

header {
  background: linear-gradient(180deg, rgba(2,5,10,.94), rgba(2,5,10,.68));
}

header::after {
  opacity: .8;
  background: linear-gradient(90deg, transparent, var(--green), var(--blue), var(--yellow), transparent);
  background-size: 220% 100%;
  animation: spectrum 7s linear infinite;
}

.brand {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}



.hero {
  min-height: 100svh;
  padding: 128px 0 62px;
  grid-template-columns: 1.08fr .92fr;
  gap: 48px;
  position: relative;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.hero-enter {
  animation: launchIn .9s cubic-bezier(.2,.75,.25,1) both;
}

.hero-machine.hero-enter {
  animation-delay: .12s;
}

.hero h1 {
  font-size: clamp(3.35rem, 7.9vw, 7.2rem);
  line-height: .91;
  letter-spacing: -.068em;
}

.hero-subline {
  margin: -2px 0 16px;
  color: var(--blue-soft);
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  font-weight: 750;
  letter-spacing: .01em;
}

.tri-green,
.tri-blue,
.tri-yellow {
  display: inline-block;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 220% 100%;
  animation: textSpectrum 5s linear infinite;
  /* The h1 line-height (0.91) is shorter than its font size, and these spans are
     inline-block with background-clip:text, so descenders fell outside the background
     box and painted transparent. Growing the box downward fixes it; the negative margin
     keeps the layout where it was. */
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}

.tri-green {
  background-image: linear-gradient(90deg, var(--green-soft), var(--green), var(--blue-soft), var(--green-soft));
}

.tri-blue {
  background-image: linear-gradient(90deg, var(--blue-soft), var(--blue), var(--yellow-soft), var(--blue-soft));
}

.tri-yellow {
  background-image: linear-gradient(90deg, var(--yellow-soft), var(--yellow), var(--green-soft), var(--yellow-soft));
}

.eyebrow {
  border-color: rgba(67,245,154,.34);
  color: var(--green-soft);
  background: rgba(3,13,20,.74);
  box-shadow: 0 0 24px rgba(67,245,154,.08);
}

.actions {
  margin-top: 32px;
}

.button {
  min-height: 49px;
  border-radius: 13px;
  background: rgba(8,19,33,.8);
}

.button.primary {
  color: #03110b;
  background: linear-gradient(105deg, var(--green), #70f6b4 58%, var(--yellow));
  border-color: transparent;
  box-shadow: 0 12px 36px rgba(67,245,154,.18);
}

.button.online {
  border-color: rgba(54,164,255,.55);
  background: linear-gradient(115deg, rgba(54,164,255,.2), rgba(8,19,33,.87));
}

.launch-chips {
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.launch-chips span {
  position: relative;
  overflow: hidden;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #c8d7e0;
  background: rgba(3,10,17,.58);
  font-size: .76rem;
  letter-spacing: .04em;
}

.launch-chips span::before {
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-115%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent);
  animation: chipSweep 5.5s ease-in-out infinite;
}

.launch-chips span:nth-child(2)::before {
  animation-delay:.8s;
}

.launch-chips span:nth-child(3)::before {
  animation-delay:1.6s;
}

.launch-chips span:nth-child(4)::before {
  animation-delay:2.4s;
}

.hero-machine {
  min-height: 600px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.machine-shell {
  width:min(100%,570px);
  aspect-ratio:1/1.03;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(145,210,255,.3);
  border-radius:36px;
  background:linear-gradient(135deg,rgba(67,245,154,.065),transparent 38%),linear-gradient(315deg,rgba(255,217,61,.065),transparent 38%),rgba(5,13,23,.78);
  box-shadow:0 36px 95px rgba(0,0,0,.45),inset 0 0 55px rgba(54,164,255,.055),0 0 70px rgba(54,164,255,.1);
  transform-style:preserve-3d;
  transition:transform .16s ease;
}

.machine-shell::before {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(141,208,255,.04) 29px 30px),repeating-linear-gradient(90deg,transparent 0 28px,rgba(141,208,255,.04) 29px 30px);
  mask-image:radial-gradient(circle,black,transparent 76%);
}

.scan-line {
  position:absolute;
  left:-30%;
  right:-30%;
  height:2px;
  top:12%;
  background:linear-gradient(90deg,transparent,var(--blue),var(--green),var(--yellow),transparent);
  box-shadow:0 0 16px var(--blue);
  animation:scan 4.2s ease-in-out infinite;
  z-index:3;
}

.orbit {
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(145,210,255,.26);
}

.orbit i {
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  left:50%;
  top:-6px;
  transform:translateX(-50%);
}

.orbit-a {
  width:67%;
  aspect-ratio:1;
  animation:spin 19s linear infinite;
}

.orbit-a i {
  background:var(--blue);
  box-shadow:0 0 18px var(--blue);
}

.orbit-b {
  width:49%;
  aspect-ratio:1;
  border-color:rgba(67,245,154,.28);
  animation:spinBack 13s linear infinite;
}

.orbit-b i {
  background:var(--green);
  box-shadow:0 0 18px var(--green);
}

.orbit-c {
  width:31%;
  aspect-ratio:1;
  border-color:rgba(255,217,61,.3);
  animation:breathe 3.2s ease-in-out infinite;
}

.orbit-c i {
  background:var(--yellow);
  box-shadow:0 0 18px var(--yellow);
}

.machine-core {
  position:absolute;
  left:50%;
  top:50%;
  width:23%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(from 20deg,rgba(67,245,154,.85),rgba(54,164,255,.85),rgba(255,217,61,.85),rgba(67,245,154,.85));
  box-shadow:0 0 50px rgba(54,164,255,.25),inset 0 0 30px rgba(2,5,10,.6);
  animation:coreFloat 4s ease-in-out infinite;
}

.machine-core span {
  width:74%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:50%;
  background:#050c15;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.machine-node {
  position:absolute;
  min-width:116px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(3,10,18,.9);
  box-shadow:0 12px 35px rgba(0,0,0,.35);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
  animation:nodeFloat 4.5s ease-in-out infinite;
}

.node-model {
  left:6%;
  top:21%;
  color:var(--green);
}

.node-control {
  right:5%;
  top:23%;
  color:var(--blue);
  animation-delay:.5s;
}

.node-validate {
  left:5%;
  bottom:17%;
  color:var(--yellow);
  animation-delay:1s;
}

.node-repeat {
  right:5%;
  bottom:17%;
  color:var(--green);
  animation-delay:1.5s;
}

.machine-readout {
  position:absolute;
  left:22px;
  right:22px;
  top:10px;
  bottom:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:end;
  gap:8px;
}

.machine-readout span {
  display:grid;
  place-items:center;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:rgba(2,7,12,.6);
  color:#9fb3c1;
  font-size:.65rem;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}

.machine-readout span:nth-child(2) {
  align-self:start;
}

.launch-ticker {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(3,8,14,.65);
  backdrop-filter:blur(12px);
}

.ticker-track {
  width:max-content;
  display:flex;
  gap:34px;
  padding:10px 0;
  color:#9fb3c1;
  font-size:.73rem;
  font-weight:750;
  letter-spacing:.11em;
  text-transform:uppercase;
  animation:tickerMove 25s linear infinite;
}

.ticker-track span::before {
  content:"◆";
  margin-right:12px;
  color:var(--green);
}

.ticker-track span:nth-child(3n+2)::before {
  color:var(--blue);
}

.ticker-track span:nth-child(3n)::before {
  color:var(--yellow);
}

section::before {
  background:linear-gradient(90deg,transparent,rgba(54,164,255,.25),rgba(67,245,154,.25),rgba(255,217,61,.17),transparent);
}

.kicker {
  color:var(--yellow);
}

.card,
.team-card,
.roadmap-item,
.boundary {
  border-color:rgba(135,202,235,.2);
  background:linear-gradient(145deg,rgba(54,164,255,.05),transparent 40%),rgba(7,16,27,.73);
  box-shadow:0 24px 68px rgba(0,0,0,.23);
}

.card::before,
.team-card::before,
.roadmap-item::before,
.boundary::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(circle 230px at var(--cx,50%) var(--cy,50%),rgba(54,164,255,.17),transparent 72%);
  transition:opacity .2s ease;
  pointer-events:none;
}

.card:hover::before,
.team-card:hover::before,
.roadmap-item:hover::before,
.boundary:hover::before {
  opacity:1;
}

.number {
  color:var(--green);
}

.grid-3 .card:nth-child(2) .number,
.grid-4 .card:nth-child(2) .number {
  color:var(--blue);
}

.grid-3 .card:nth-child(3) .number,
.grid-4 .card:nth-child(3) .number {
  color:var(--orange);
}

sup.cite {
  color:var(--blue-soft);
  font-size:.62em;
  font-weight:800;
  margin-left:2px;
  letter-spacing:.02em;
}

.cite-trigger {
  display:inline-flex;
  align-items:center;
  margin-left:10px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(54,164,255,.32);
  background:rgba(54,164,255,.09);
  color:var(--blue-soft);
  font:inherit;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:lowercase;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}

.cite-trigger:hover {
  background:rgba(54,164,255,.17);
  border-color:rgba(54,164,255,.5);
}

.cite-card {
  max-width:min(760px,calc(100vw - 40px));
}

.cite-list {
  margin:14px 0 0;
  padding-left:22px;
  display:grid;
  gap:11px;
}

.cite-list li {
  font-size:.87rem;
  line-height:1.55;
  color:rgba(226,240,252,.76);
}

.cite-list li::marker {
  color:var(--blue-soft);
  font-weight:800;
}

.role {
  display:inline-flex;
  margin-bottom:28px;
  padding:6px 9px;
  border-radius:8px;
  background:rgba(67,245,154,.11);
  color:var(--green-soft);
  font-size:.71rem;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.team-card:nth-child(3n+2) .role {
  background:rgba(54,164,255,.11);
  color:var(--blue-soft);
}

.team-card:nth-child(3n) .role {
  background:rgba(255,217,61,.11);
  color:var(--orange-soft);
}

.team-card h3 {
  font-size:1.55rem;
  letter-spacing:-.03em;
}

.contact-modal {
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  place-items:center;
  padding:22px;
}

.contact-modal.open {
  display:grid;
}

.modal-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(0,4,8,.8);
  backdrop-filter:blur(12px);
}

.modal-card {
  width:min(100%,540px);
  position:relative;
  z-index:1;
  border:1px solid rgba(141,208,255,.4);
  border-radius:25px;
  padding:29px;
  background:radial-gradient(circle at 92% 5%,rgba(54,164,255,.17),transparent 35%),radial-gradient(circle at 5% 100%,rgba(67,245,154,.13),transparent 42%),#07111d;
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 45px rgba(54,164,255,.11);
  animation:modalIn .22s ease both;
}

.modal-close {
  position:absolute;
  right:15px;
  top:15px;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(2,8,14,.7);
  color:var(--text);
  cursor:pointer;
  font-size:1.25rem;
}

.modal-card h2 {
  padding-right:42px;
  font-size:clamp(2rem,7vw,3.2rem);
}

.modal-card p {
  color:var(--muted);
}

.email-box {
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px;
  border:1px solid rgba(67,245,154,.3);
  border-radius:14px;
  background:rgba(2,9,15,.75);
}

.email-box a {
  overflow-wrap:anywhere;
  color:var(--green-soft);
  font-weight:760;
  text-decoration:none;
}

#copyEmail {
  flex:0 0 auto;
  border:1px solid rgba(54,164,255,.4);
  border-radius:10px;
  padding:8px 11px;
  background:rgba(54,164,255,.11);
  color:var(--blue-soft);
  cursor:pointer;
}

@keyframes spectrum {
  to {
    background-position:220% 0;
  }
}

@keyframes launchIn {
  from {
    opacity:0;
    transform:translateY(28px) scale(.98);
  }
}

@keyframes textSpectrum {
  to {
    background-position:-220% 0;
  }
}

@keyframes chipSweep {
  0%,
  62%,
  100% {
    transform:translateX(-115%);
  }
  78% {
    transform:translateX(115%);
  }
}

@keyframes scan {
  0%,
  100% {
    top:12%;
    opacity:.25;
  }
  50% {
    top:83%;
    opacity:.95;
  }
}

@keyframes spin {
  to {
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

@keyframes spinBack {
  to {
    transform:translate(-50%,-50%) rotate(-360deg);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform:translate(-50%,-50%) scale(.96);
  }
  50% {
    transform:translate(-50%,-50%) scale(1.05);
  }
}

@keyframes coreFloat {
  0%,
  100% {
    transform:translate(-50%,-50%) translateY(-4px);
  }
  50% {
    transform:translate(-50%,-50%) translateY(5px);
  }
}

@keyframes nodeFloat {
  0%,
  100% {
    transform:translateY(-4px);
  }
  50% {
    transform:translateY(5px);
  }
}

@keyframes tickerMove {
  to {
    transform:translateX(-50%);
  }
}

@keyframes modalIn {
  from {
    opacity:0;
    transform:translateY(12px) scale(.98);
  }
}

@media (max-width:980px) {
  .hero {
    grid-template-columns:1fr;
  }
  .hero-machine {
    min-height:510px;
  }
}

@media (max-width:760px) {
  .nav-links a {
    display:none;
  }
  .hero-machine {
    min-height:430px;
  }
  .machine-node {
    min-width:98px;
    font-size:.62rem;
    padding:8px;
  }
  .machine-readout {
    display:none;
  }
}

@media (max-width:520px) {
  .hero {
    padding-top:104px;
    gap:25px;
  }
  .hero h1 {
    font-size:clamp(3rem,17vw,4.9rem);
  }
  .hero-machine {
    min-height:365px;
  }
  .machine-shell {
    border-radius:24px;
  }
  .actions {
    display:grid;
  }
  .button {
    width:100%;
  }
  .email-box {
    align-items:stretch;
    flex-direction:column;
  }
  #copyEmail {
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce) {
  #field {
    display:none;
  }
}

/* Article pages (note-NNN.html). These had no styles of their own, so every heading fell back to plain --text and the page read as colourless next to the rest of the site. */


/* Section titles cycle through the brand triad instead of all being white, so the reader can see structure while scrolling a long piece. */

.article-body h2 {
  color: var(--green-soft);
  letter-spacing: -0.03em;
}

.article-body h2:nth-of-type(3n+2) {
  color: var(--blue-soft);
}

.article-body h2:nth-of-type(3n) {
  color: var(--yellow-soft);
}

/* Subsection titles alternate between two of the same hues, one step softer, so they read as subordinate to the h2 above them. */

.article-body h3 {
  color: var(--blue-soft);
  font-size: 1.28rem;
  letter-spacing: -0.02em;
}

.article-body h3:nth-of-type(even) {
  color: var(--green-soft);
}

/* Notes page hero art. The .hero grid is two columns, and on this page the second one had no child, which is what left the header looking empty. The transparent logo variant is used here rather than the opaque one, because the page supplies its own background and the opaque version's dark grey square would read as a mismatched box against it. */
.hero-art {
  display: grid;
  place-items: center;
}
.hero-art img {
  width: min(100%, 300px);
  height: auto;
  filter: drop-shadow(0 0 55px rgba(54, 164, 255, 0.16));
}
@media (max-width: 860px) {
  .hero-art img {
    width: min(58%, 220px);
  }
}

/* Back control on pages that open away from the home page. The brand mark already links home, but a labelled arrow makes the way back obvious on a page a reader may have arrived at directly from a shared link. */
.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--green-soft);
  background: rgba(3, 13, 20, 0.6);
  text-decoration: none;
  font-size: 0.86rem;
  transition: border-color 180ms ease, color 180ms ease;
}
.nav-back:hover,
.nav-back:focus-visible {
  border-color: rgba(67, 245, 154, 0.5);
  color: var(--text);
}
.nav-back span {
  font-size: 1.05em;
  line-height: 1;
}

/* Anything that leaves the current page or opens a dialog is drawn as a button, so it reads differently from the plain links that only scroll to a section. Shares its shape with the back control. */
.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--green-soft);
  background: rgba(3, 13, 20, 0.6);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-size: 0.86rem;
  transition: border-color 180ms ease, color 180ms ease;
}
.nav-button:hover,
.nav-button:focus-visible {
  border-color: rgba(67, 245, 154, 0.5);
  color: var(--text);
}