:root {
  --bg: #03070d;
  --bg-2: #06111c;
  --panel: rgba(9, 20, 31, 0.72);
  --panel-strong: rgba(10, 27, 42, 0.9);
  --line: rgba(134, 218, 255, 0.16);
  --line-strong: rgba(134, 218, 255, 0.32);
  --text: #edf8ff;
  --muted: #9bb2c1;
  --muted-2: #657f90;
  --cyan: #7ce7ff;
  --cyan-2: #2fb6d2;
  --green: #a7ffce;
  --amber: #ffd188;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --max: 1180px;
  --radius: 28px;
  --radius-sm: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

* {
  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 72% 8%, rgba(77, 198, 255, 0.15), transparent 34rem),
    radial-gradient(circle at 18% 22%, rgba(58, 113, 168, 0.16), transparent 32rem),
    linear-gradient(180deg, #03070d 0%, #04101a 48%, #020509 100%);
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: #001016;
  background: var(--cyan);
}

.site-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
}

#depth-canvas {
  position: fixed;
  inset: 0;
  z-index: -5;
  width: 100vw;
  height: 100vh;
  opacity: 0.64;
}

.grain,
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grain {
  z-index: -3;
  opacity: 0.14;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.45'/%3E%3C/svg%3E");
}

.scanline {
  z-index: -2;
  opacity: 0.16;
  background:
    linear-gradient(rgba(124, 231, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 231, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 8px, 72px 100%;
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 84%, transparent);
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 50%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  width: min(calc(100vw - 32px), var(--max));
  max-width: calc(100vw - 32px);
  min-height: 66px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(153, 229, 255, 0.13);
  border-radius: 999px;
  background: rgba(3, 8, 14, 0.68);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(22px);
  transform: translateX(-50%);
}

/* Masthead centering safeguard: reveal animations also use transform,
   so the fixed header must preserve its translateX(-50%) centering. */
.site-header[data-reveal] {
  transform: translate(-50%, 22px);
}

.site-header[data-reveal].is-visible {
  transform: translate(-50%, 0);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(124, 231, 255, 0.05), transparent 42%, rgba(124, 231, 255, 0.06));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(124, 231, 255, 0.32);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(124, 231, 255, 0.22), transparent 46%),
    rgba(7, 20, 30, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 24px rgba(47, 182, 210, 0.14);
}

.brand-mark span {
  width: 14px;
  height: 14px;
  border: 1px solid var(--cyan);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 4px;
  transform: rotate(-45deg);
}

.brand-word {
  font-size: 1rem;
}

.nav {
  justify-self: center;
  display: flex;
  gap: 2px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(124, 231, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.nav a {
  padding: 9px 11px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--text);
  background: rgba(124, 231, 255, 0.08);
  outline: none;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(124, 231, 255, 0.32);
  border-radius: 999px;
  color: #dffbff;
  background: rgba(124, 231, 255, 0.08);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: inset 0 0 28px rgba(124, 231, 255, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.header-cta:hover,
.header-cta:focus-visible {
  border-color: rgba(124, 231, 255, 0.58);
  background: rgba(124, 231, 255, 0.13);
  outline: none;
  transform: translateY(-1px);
}

.section {
  position: relative;
  width: min(calc(100% - 32px), var(--max));
  margin-inline: auto;
  padding: 110px 0;
}

.hero {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding-top: 152px;
  padding-bottom: 78px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: center;
}

.eyebrow,
.section-kicker,
.statement-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 22px rgba(167, 255, 206, 0.9);
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(167, 255, 206, 0.32);
  border-radius: inherit;
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0% { opacity: 0.7; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.55); }
}

h1,
h2,
h3,
p,
ul,
blockquote {
  margin-top: 0;
}

h1 {
  margin: 22px 0 26px;
  max-width: 850px;
  font-size: clamp(3.2rem, 8vw, 7.7rem);
  line-height: 0.87;
  letter-spacing: -0.085em;
  text-wrap: balance;
}

h1 span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(92deg, #effcff 0%, #86eaff 44%, #5da8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(124, 231, 255, 0.11));
}

.hero-lede {
  max-width: 720px;
  color: #bfd3dc;
  font-size: clamp(1.06rem, 2vw, 1.28rem);
  line-height: 1.65;
  letter-spacing: -0.018em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  overflow: hidden;
  transition: transform 190ms ease, border-color 190ms ease, background 190ms ease;
}

.button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: translateX(-120%);
  transition: transform 680ms var(--ease);
}

.button:hover::after,
.button:focus-visible::after {
  transform: translateX(120%);
}

.button:hover,
.button:focus-visible {
  outline: none;
  transform: translateY(-2px);
}

.button.primary {
  border: 1px solid rgba(124, 231, 255, 0.62);
  color: #001118;
  background: linear-gradient(135deg, #e7fbff, #77e9ff 48%, #2fb6d2);
  box-shadow:
    0 16px 48px rgba(47, 182, 210, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.button.secondary {
  border: 1px solid rgba(124, 231, 255, 0.22);
  color: #e9fbff;
  background: rgba(124, 231, 255, 0.055);
}

.button.full {
  width: 100%;
}

.hero-console {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(124, 231, 255, 0.18);
  border-radius: calc(var(--radius) + 10px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 32%),
    rgba(4, 13, 21, 0.58);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
}

.hero-console::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 231, 255, 0.3), transparent 34%),
    linear-gradient(150deg, rgba(124, 231, 255, 0.22), transparent 38%, rgba(124, 231, 255, 0.13));
  opacity: 0.65;
}

.console-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 14px;
  color: var(--muted-2);
  font-size: 0.67rem;
  letter-spacing: 0.14em;
}

.console-topbar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(124, 231, 255, 0.25);
}

.console-topbar strong {
  margin-left: auto;
  color: rgba(229, 249, 255, 0.54);
  font-size: inherit;
}

.radar-card {
  position: relative;
  min-height: 430px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(124, 231, 255, 0.12);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 38%, rgba(124, 231, 255, 0.13), transparent 44%),
    radial-gradient(circle at 50% 50%, rgba(49, 115, 170, 0.13), transparent 52%),
    linear-gradient(180deg, rgba(11, 31, 48, 0.82), rgba(3, 9, 16, 0.92));
  overflow: hidden;
}

.radar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(124, 231, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 231, 255, 0.055) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 42%, black, transparent 70%);
}

.radar {
  position: relative;
  width: min(78vw, 330px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 28px;
  border-radius: 50%;
}

.radar-ring,
.radar-core,
.radar-sweep,
.blip {
  position: absolute;
  border-radius: 50%;
}

.radar-ring {
  inset: 0;
  border: 1px solid rgba(124, 231, 255, 0.17);
}

.radar-ring.r1 { inset: 15%; }
.radar-ring.r2 { inset: 30%; }
.radar-ring.r3 { inset: 45%; }

.radar::before,
.radar::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 231, 255, 0.25), transparent);
}

.radar::after {
  transform: rotate(90deg);
}

.radar-sweep {
  inset: 0;
  background: conic-gradient(from 0deg, rgba(124, 231, 255, 0.3), rgba(124, 231, 255, 0.08) 35deg, transparent 82deg);
  mask-image: radial-gradient(circle, black 1%, black 66%, transparent 67%);
  animation: sweep 5.6s linear infinite;
  animation-direction: reverse;
}

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

.radar-core {
  inset: 43%;
  border: 1px solid rgba(167, 255, 206, 0.54);
  background: radial-gradient(circle, rgba(167, 255, 206, 0.62), rgba(124, 231, 255, 0.08) 55%, transparent 70%);
  box-shadow: 0 0 40px rgba(124, 231, 255, 0.25);
}

.blip {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(124, 231, 255, 0.9);
}

.b1 { top: 27%; left: 61%; animation: blink 2.4s ease-in-out infinite; }
.b2 { top: 63%; left: 30%; animation: blink 3.1s ease-in-out infinite 0.4s; }
.b3 { top: 46%; right: 19%; animation: blink 2.7s ease-in-out infinite 0.9s; }

@keyframes blink {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.18); }
}

.console-readout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.console-readout div {
  padding: 14px;
  border: 1px solid rgba(124, 231, 255, 0.12);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
}

.console-readout span,
.work-list span,
.terminal-lines span {
  display: block;
  color: var(--muted-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.console-readout strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.terminal-lines {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(124, 231, 255, 0.11);
  border-radius: var(--radius-sm);
  color: rgba(221, 244, 252, 0.74);
  background: rgba(0, 0, 0, 0.24);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem;
}

.terminal-lines p {
  display: flex;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terminal-lines span {
  color: rgba(124, 231, 255, 0.55);
  font-family: inherit;
}

.signal-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid rgba(124, 231, 255, 0.12);
  border-radius: 24px;
  background: rgba(124, 231, 255, 0.12);
}

.signal-strip span {
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 14px;
  color: rgba(228, 248, 255, 0.72);
  background: rgba(3, 10, 17, 0.82);
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
  gap: clamp(30px, 6vw, 78px);
  align-items: start;
}

.split.tight {
  align-items: end;
}

h2 {
  max-width: 860px;
  margin-bottom: 0;
  font-size: clamp(2.25rem, 5.8vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.074em;
  text-wrap: balance;
}

h3 {
  margin-bottom: 12px;
  color: #f2fbff;
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -0.032em;
}

.prose p,
.section-lede,
.invitation-copy p,
.work-list strong,
.principle-grid p,
.layer-stack p,
.compare-card li,
.site-footer p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: -0.01em;
}

.prose p:last-child,
.invitation-copy p:last-child,
.principle-grid p:last-child,
.layer-stack p:last-child,
.site-footer p:last-child {
  margin-bottom: 0;
}

.section-kicker {
  margin-bottom: 22px;
}

.statement {
  padding-top: 60px;
  padding-bottom: 60px;
}

.statement-card,
.work-card,
.invitation-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(124, 231, 255, 0.14);
  border-radius: calc(var(--radius) + 10px);
  background:
    linear-gradient(135deg, rgba(124, 231, 255, 0.12), transparent 40%),
    rgba(5, 16, 26, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.statement-card::before,
.work-card::before,
.invitation-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(124, 231, 255, 0.14), transparent 32%),
    linear-gradient(rgba(124, 231, 255, 0.04) 1px, transparent 1px);
  background-size: auto, 100% 12px;
  opacity: 0.7;
  pointer-events: none;
}

.statement-card {
  padding: clamp(28px, 6vw, 70px);
}

.statement-card blockquote {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 18px 0 0;
  color: #f6fcff;
  font-size: clamp(2rem, 5.2vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -0.075em;
  text-wrap: balance;
}

.system-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.9fr);
  gap: clamp(32px, 6vw, 74px);
  align-items: start;
}

.system-copy {
  display: grid;
  gap: 26px;
}

/*
  v3.1.1 visual anchors:
  These images are meant to support the narrative, not become full hero panels.
  We explicitly constrain the frame height and crop inside the frame so the layout
  remains stable across desktop, tablet, and mobile.
*/
.visual-anchor {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(124, 231, 255, 0.16);
  border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(5, 16, 25, 0.72);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.42);
}

.visual-anchor::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(124, 231, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(2, 8, 14, 0.18) 68%, rgba(2, 8, 14, 0.86) 100%);
  pointer-events: none;
  z-index: 1;
}

.visual-anchor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-anchor figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: #d7edf5;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.92);
}

.system-visual {
  aspect-ratio: 16 / 9;
  max-height: 280px;
}

.system-visual img {
  object-position: center center;
}

.section-lede {
  max-width: 620px;
  margin-top: 26px;
  margin-bottom: 0;
  font-size: clamp(1rem, 1.6vw, 1.16rem);
}

.layer-stack {
  position: relative;
  display: grid;
  gap: 14px;
}

.layer-stack::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: linear-gradient(var(--cyan), rgba(124, 231, 255, 0.06));
  opacity: 0.38;
}

.layer-stack article,
.principle-grid article,
.compare-card {
  position: relative;
  border: 1px solid rgba(124, 231, 255, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(5, 16, 25, 0.66);
  backdrop-filter: blur(16px);
}

.layer-stack article {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 8px;
  align-items: start;
  padding: 24px;
  overflow: hidden;
}

.layer-stack article span {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(124, 231, 255, 0.2);
  border-radius: 20px;
  color: var(--cyan);
  background: rgba(124, 231, 255, 0.065);
  font-size: 0.8rem;
  font-weight: 800;
}

.layer-stack article h3,
.layer-stack article p {
  grid-column: 2;
  min-width: 0;
}

.layer-stack article h3 {
  grid-row: 1;
  margin: 4px 0 0;
  padding-left: 0;
}

.layer-stack article p {
  grid-row: 2;
  margin: 0;
}

.comparison {
  padding-top: 60px;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
}

.compare-card {
  padding: clamp(24px, 4vw, 38px);
}

.compare-card.highlight {
  border-color: rgba(124, 231, 255, 0.28);
  background:
    radial-gradient(circle at 72% 12%, rgba(124, 231, 255, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    rgba(7, 22, 34, 0.78);
}

.compare-card h3 {
  margin-bottom: 18px;
  font-size: 1.35rem;
}

.compare-card ul,
.invitation-panel ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-card li,
.invitation-panel li {
  position: relative;
  padding-left: 22px;
}

.compare-card li::before,
.invitation-panel li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(124, 231, 255, 0.45);
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 42px;
}

.principle-grid article {
  min-height: 250px;
  padding: 24px;
  overflow: hidden;
}

.principle-grid article::after {
  content: "";
  position: absolute;
  inset: auto 18px 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(124, 231, 255, 0.4), transparent);
}

.icon-line {
  width: 64px;
  height: 64px;
  margin-bottom: 34px;
  border: 1px solid rgba(124, 231, 255, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(135deg, transparent 47%, rgba(124, 231, 255, 0.34) 48%, rgba(124, 231, 255, 0.34) 52%, transparent 53%),
    radial-gradient(circle at 48% 52%, rgba(124, 231, 255, 0.12), transparent 52%);
}

.principle-grid p {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.work {
  padding-top: 60px;
}

.work-card {
  display: grid;
  grid-template-columns: 0.84fr 1fr;
  gap: clamp(26px, 5vw, 68px);
  padding: clamp(28px, 5vw, 56px);
}

.work-card > * {
  position: relative;
  z-index: 1;
}

.programmable-card {
  align-items: start;
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 0.72fr);
}

.programmable-card .work-list {
  grid-column: 1 / -1;
}

.programmable-visual {
  align-self: start;
  aspect-ratio: 4 / 3;
  max-height: 330px;
}

.programmable-visual img {
  object-position: center center;
}

.work-list {
  display: grid;
  gap: 12px;
}

.work-list div {
  padding: 20px;
  border: 1px solid rgba(124, 231, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.16);
}

.work-list strong {
  display: block;
  margin-top: 7px;
  color: #d7edf5;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.45;
}

.invitation {
  padding-bottom: 90px;
}

.invitation-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(26px, 5vw, 70px);
  padding: clamp(30px, 6vw, 70px);
}

.invitation-copy,
.invitation-panel {
  position: relative;
  z-index: 1;
}

.invitation-copy p {
  max-width: 700px;
  margin-top: 28px;
  font-size: clamp(1rem, 1.6vw, 1.17rem);
}

.invitation-panel {
  align-self: start;
  padding: 24px;
  border: 1px solid rgba(124, 231, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.invitation-panel p {
  margin-bottom: 18px;
  color: var(--text);
  font-weight: 750;
}

.invitation-panel ul {
  margin-bottom: 24px;
}

.invitation-panel li {
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
  padding: 34px 0 46px;
  border-top: 1px solid rgba(124, 231, 255, 0.12);
}

.footer-brand {
  margin-bottom: 14px;
}

.site-footer p {
  margin: 0;
  font-size: 0.92rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-links a {
  color: #dff9ff;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--cyan);
  outline: none;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 820ms var(--ease),
    transform 820ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

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

@media (hover: hover) and (pointer: fine) {
  .principle-grid article,
  .compare-card,
  .layer-stack article,
  .work-list div {
    transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
  }

  .principle-grid article:hover,
  .compare-card:hover,
  .layer-stack article:hover,
  .work-list div:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 231, 255, 0.27);
    background-color: rgba(8, 23, 35, 0.78);
  }
}

@media (min-width: 1121px) and (max-width: 1240px) {
  .site-header {
    column-gap: 10px;
    padding-inline: 14px;
  }

  .nav a {
    padding-inline: 9px;
    font-size: 0.76rem;
  }

  .header-cta {
    padding-inline: 14px;
  }
}

@media (max-width: 1120px) {
  .nav {
    display: none;
  }

  .hero-grid,
  .system-layout,
  .split,
  .work-card,
  .invitation-shell {
    grid-template-columns: 1fr;
  }

  .system-visual {
    max-width: 720px;
    max-height: 320px;
  }

  .programmable-card {
    grid-template-columns: 1fr;
  }

  .programmable-visual {
    max-width: 720px;
    max-height: 340px;
  }

  .hero-console {
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
  }

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

  .comparison-grid {
    grid-template-columns: 1fr;
  }

  .invitation-panel {
    width: 100%;
    max-width: 520px;
  }
}

@media (max-width: 720px) {
  .site-header {
    top: 12px;
    width: calc(100vw - 22px);
    max-width: calc(100vw - 22px);
    min-height: 58px;
    padding: 9px 10px 9px 12px;
  }

  .brand-word {
    font-size: 0.94rem;
  }

  .brand-mark {
    width: 31px;
    height: 31px;
    border-radius: 11px;
  }

  .header-cta {
    min-height: 38px;
    padding: 0 13px;
    font-size: 0.76rem;
  }

  .section {
    width: min(calc(100% - 24px), var(--max));
    padding: 76px 0;
  }

  .hero {
    padding-top: 118px;
    padding-bottom: 48px;
  }

  h1 {
    font-size: clamp(3.05rem, 16vw, 5.2rem);
    letter-spacing: -0.08em;
  }

  h2,
  .statement-card blockquote {
    letter-spacing: -0.062em;
  }

  .hero-lede,
  .section-lede,
  .prose p,
  .invitation-copy p {
    font-size: 1rem;
    line-height: 1.62;
  }

  .button {
    width: 100%;
    min-height: 52px;
  }

  .hero-console {
    padding: 8px;
    border-radius: 28px;
  }

  .radar-card {
    min-height: auto;
    padding: 20px;
    border-radius: 22px;
  }

  .console-readout,
  .signal-strip,
  .principle-grid {
    grid-template-columns: 1fr;
  }

  .terminal-lines p {
    white-space: normal;
  }

  .layer-stack article {
    display: block;
    padding: 20px;
  }

  .layer-stack article h3 {
    margin-top: 18px;
    padding-left: 0;
  }

  .layer-stack article p {
    grid-column: auto;
    margin: 0;
  }

  .statement-card,
  .work-card,
  .invitation-shell {
    border-radius: 26px;
    padding: 24px;
  }

  .visual-anchor figcaption {
    left: 14px;
    right: 14px;
    bottom: 12px;
    font-size: 0.66rem;
    letter-spacing: 0.055em;
  }

  .system-visual,
  .programmable-visual {
    max-height: none;
  }

  .system-visual {
    aspect-ratio: 16 / 10;
  }

  .programmable-visual {
    aspect-ratio: 4 / 3;
  }

  .principle-grid article {
    min-height: auto;
  }

  .site-footer {
    flex-direction: column;
    width: min(calc(100% - 24px), var(--max));
  }

  .footer-links {
    justify-content: flex-start;
  }
}

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

  #depth-canvas {
    display: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}