/* Lumen / The Trace — isolated flagship landing experience */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
/* Runde 7: Die beiden Mono-Dateien waren vertauscht, alles Mono lief
   kursiv. Jetzt stimmen die Namen; ?v=2, damit kein Browser die alte
   Fassung aus dem Zwischenspeicher nimmt. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin.woff2?v=2') format('woff2');
}

:root {
  --xl-night: #05080b;
  --xl-night-2: #090f14;
  --xl-panel: #0c141b;
  --xl-paper: #f1f0e9;
  --xl-paper-2: #e5e8df;
  --xl-ink: #f4f6f4;
  --xl-muted: #8c9aa2;
  --xl-line: rgba(224, 237, 242, .13);
  --xl-lime: #caff63;
  --xl-cyan: #63ddf4;
  --xl-violet: #8d7dff;
  --xl-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  --xl-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
}

body.xl-active {
  min-width: 0;
  margin: 0;
  overflow-x: clip;
  background: var(--xl-night);
  color: var(--xl-ink);
}

body.xl-active > :not(.sp-frame):not(.xl-experience):not(script) {
  display: none !important;
}

.xl-experience,
.xl-experience * { box-sizing: border-box; }

.xl-experience {
  position: relative;
  width: 100%;
  overflow: clip;
  background: var(--xl-night);
  color: var(--xl-ink);
  font-family: var(--xl-sans);
}

.xl-experience a { color: inherit; text-decoration: none; }
.xl-experience button { padding: 0; color: inherit; background: none; border: 0; font: inherit; }

.xl-nav {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(24px, 4vw, 68px);
  border-bottom: 1px solid rgba(224, 237, 242, .1);
  background: linear-gradient(to bottom, rgba(5,8,11,.8), transparent);
}

.xl-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  font-size: 16px;
  letter-spacing: .12em;
}

.xl-brand > i {
  position: relative;
  width: 19px;
  height: 25px;
  display: block;
}

.xl-brand > i::before,
.xl-brand > i::after {
  content: '';
  position: absolute;
  inset: 1px 4px;
  border: 1.5px solid var(--xl-cyan);
  border-radius: 50%;
  transform: rotate(34deg);
}
.xl-brand > i::after { border-color: var(--xl-lime); transform: rotate(-34deg); }
.xl-brand > i span { position: absolute; left: 8px; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 14px var(--xl-cyan); }

.xl-nav > p { display: flex; gap: 22px; color: #87949b; font: 8px/1 var(--xl-mono); letter-spacing: .19em; }
.xl-nav > p span { color: #d9e1e3; }
.xl-nav > p em { font-style: normal; }
.xl-nav-links { justify-self: end; display: flex; align-items: center; gap: 26px; color: #9da9ae; font-size: 11px; }
.xl-nav-links > a { transition: color .2s ease; }
.xl-nav-links > a:hover { color: #fff; }
.xl-nav-live { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid rgba(224,237,242,.2); border-radius: 999px; color: #eef5f5 !important; background: rgba(255,255,255,.035); }
.xl-nav-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--xl-lime); box-shadow: 0 0 12px var(--xl-lime); }

/* Hero (Runde 5, AK: "sehr ueberladen"): Ueberschrift, ein Satz, ein Knopf
   und eine Buehne. Auf der Buehne tippt sich ein Auftrag ein, zerfaellt in
   Partikel und setzt sich rechts zum Ergebnis zusammen, drei Auftraege im
   Wechsel (hero.js). Vom Auftrag zum Artefakt, wortwoertlich. */
.xl-hero {
  position: relative;
  min-height: max(760px, 100svh);
  display: grid;
  grid-template-rows: auto minmax(340px, 1fr);
  gap: clamp(30px, 4.5vh, 60px);
  padding: clamp(128px, 15vh, 168px) clamp(24px, 4vw, 68px) clamp(36px, 5vh, 64px);
  isolation: isolate;
  overflow: clip;
  background: var(--xl-night);
}

.xh-licht {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at 76% 72%, rgba(202,255,99,.075), transparent 72%),
    radial-gradient(34% 40% at 24% 74%, rgba(99,221,244,.05), transparent 72%);
}

.xh-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  column-gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.xh-kicker {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(20px, 3vh, 34px);
  color: #9aa7ad;
  font: 500 13px/1 var(--xl-mono);
  letter-spacing: .16em;
}

.xh-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--xl-lime); box-shadow: 0 0 14px var(--xl-lime); }

/* Die Ueberschrift richtet sich nach ihrer Spalte, nicht nach dem Fenster:
   sonst lief "ZUM ARTEFAKT." zwischen 1120 und 1500 px in Text und Knopf
   (AK, Runde 6). Die zweite Zeile ist samt Einzug rund 7,8 em breit. */
.xl-hero h1 {
  grid-column: 1;
  container-type: inline-size;
  margin: 0;
  font-weight: 670;
  line-height: .84;
  text-transform: uppercase;
}
.xl-hero h1 span { display: block; white-space: nowrap; font-size: min(12.4cqi, 136px); letter-spacing: -.078em; }
.xl-hero h1 span:last-child { margin-left: .62em; }
.xl-hero h1 em { color: var(--xl-lime); font-style: normal; }

.xh-rechts { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.xh-rechts p { margin: 0 0 24px; color: #b4bfc3; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; letter-spacing: -.012em; }

.xl-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 200px; padding: 15px 18px 15px 20px; border-radius: 2px; font-size: 14px; font-weight: 650; transition: transform .25s ease, box-shadow .25s ease; }
.xl-button span { font-size: 17px; }
.xl-button--light { color: #0b100f !important; background: var(--xl-lime); box-shadow: 0 18px 50px rgba(202,255,99,.12); }
.xl-button:hover { transform: translateY(-2px); }
.xl-button--light:hover { box-shadow: 0 22px 64px rgba(202,255,99,.23); }

/* Buehne: oben eine Leiste mit AUFTRAG links, ARTEFAKT rechts; die gerade
   aktive Seite leuchtet. Darunter zwei Ebenen: Partikel (mit Nachleuchten)
   und die scharfe Schrift. */
.xh-buehne {
  position: relative;
  min-height: 340px;
  margin: 0;
  border-top: 1px solid var(--xl-line);
}

.xh-leiste {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 16px;
  color: #66747b;
  font: 500 13px/1 var(--xl-mono);
  letter-spacing: .14em;
}

.xh-leiste .xh-zaehler { margin-left: auto; margin-right: auto; color: #4f5c62; }
.xh-leiste .xh-seite { display: inline-flex; align-items: center; gap: 10px; transition: color .4s ease; }
.xh-leiste .xh-seite i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: background .4s ease, box-shadow .4s ease; }
.xh-leiste .xh-seite.is-an { color: #eef4f4; }
.xh-leiste .xh-seite.is-an i { background: var(--xl-lime); box-shadow: 0 0 12px var(--xl-lime); }

.xh-ebene {
  position: absolute;
  left: 0;
  top: 46px;
  width: 100%;
  height: calc(100% - 46px);
  display: block;
  pointer-events: none;
}

.xh-vorlesen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .xh-kopf { grid-template-columns: 1fr; }
  .xh-rechts { grid-column: 1; grid-row: auto; margin-top: 30px; max-width: 520px; }
  .xl-hero { grid-template-rows: auto minmax(420px, 1fr); }
}

@media (max-width: 620px) {
  .xl-hero { min-height: auto; padding: 100px 17px 72px; grid-template-rows: auto 340px; gap: 34px; }
  .xh-buehne { min-height: 0; }
  .xl-hero h1 { line-height: .86; }
  .xl-hero h1 span { font-size: min(13.4cqi, 58px); letter-spacing: -.07em; }
  .xl-hero h1 span:last-child { margin-left: 0; }
  .xh-kicker { font-size: 12px; }
  .xh-rechts p { font-size: 16px; }
  .xh-leiste { font-size: 12px; gap: 10px; }
}

.xl-manifesto {
  position: relative;
  min-height: 980px;
  padding: clamp(100px,12vw,180px) clamp(24px,4vw,68px) 190px;
  overflow: hidden;
  color: #080b09;
  background: var(--xl-lime);
}
.xl-manifesto-index { margin-bottom: 76px; font: 8px/1 var(--xl-mono); letter-spacing: .18em; }
.xl-manifesto h2 { margin: 0; font-size: clamp(68px,10vw,146px); font-weight: 690; line-height: .82; letter-spacing: -.075em; }
.xl-manifesto h2 em { color: transparent; -webkit-text-stroke: 2px #080b09; font-style: normal; }
.xl-manifesto-note { width: min(440px,36vw); margin: 70px 4vw 0 auto; }
.xl-manifesto-note p { margin: 0 0 38px; font-size: clamp(17px,1.4vw,21px); line-height: 1.55; letter-spacing: -.02em; }
.xl-manifesto-note span { font: 8px/1 var(--xl-mono); letter-spacing: .16em; }
.xl-type-river { position: absolute; left: 0; right: 0; bottom: 0; height: 94px; overflow: hidden; display: flex; align-items: center; color: var(--xl-lime); background: #080b09; white-space: nowrap; }
.xl-type-river span { display: block; font: 650 clamp(33px,4.3vw,68px)/1 var(--xl-sans); letter-spacing: -.045em; animation: xl-river 14s linear infinite; }
.xl-type-river span::after { content: ' CONTEXT / ROUTE / EXECUTE / VERIFY / SHIP /'; }
@keyframes xl-river { to { transform: translateX(-50%); } }

.xl-story {
  position: relative;
  padding: clamp(120px,12vw,180px) clamp(24px,4vw,68px);
  background: #070b0e;
}
.xl-story > header { margin-bottom: 120px; }
.xl-story > header p,
.xl-light-head > p,
.xl-capabilities > header > p { margin: 0 0 32px; color: var(--xl-cyan); font: 8px/1 var(--xl-mono); letter-spacing: .2em; }
.xl-story > header h2,
.xl-light-head h2,
.xl-capabilities > header h2 { margin: 0; font-size: clamp(62px,8.3vw,124px); font-weight: 660; line-height: .86; letter-spacing: -.07em; }
.xl-story > header h2 em { color: var(--xl-lime); font-style: normal; }
.xl-story-layout { display: grid; grid-template-columns: minmax(330px,.72fr) minmax(580px,1.28fr); gap: clamp(50px,8vw,130px); align-items: start; }
.xl-story-steps { display: grid; }
.xl-story-step { min-height: 55vh; display: grid; grid-template-columns: 42px 1fr; gap: 24px; align-content: center; padding: 50px 0; border-top: 1px solid var(--xl-line); opacity: .32; transition: opacity .35s ease; }
.xl-story-step:last-child { border-bottom: 1px solid var(--xl-line); }
.xl-story-step.is-active { opacity: 1; }
.xl-story-step > span { color: var(--xl-cyan); font: 9px/1 var(--xl-mono); }
.xl-story-step small { color: var(--xl-lime); font: 8px/1 var(--xl-mono); letter-spacing: .16em; }
.xl-story-step h3 { max-width: 430px; margin: 15px 0 18px; color: #eef2f1; font-size: clamp(28px,3vw,46px); font-weight: 570; line-height: 1.02; letter-spacing: -.045em; }
.xl-story-step p { max-width: 390px; margin: 0; color: #8f9ca2; font-size: 15px; line-height: 1.65; }

.xl-story-stage {
  position: sticky;
  top: 90px;
  height: min(640px, calc(100vh - 120px));
  min-height: 540px;
  overflow: hidden;
  border: 1px solid rgba(224,237,242,.14);
  background: linear-gradient(145deg,#0c151c,#080d11);
  box-shadow: 0 50px 120px rgba(0,0,0,.35);
}
.xl-story-stage::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(224,237,242,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(224,237,242,.035) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(#000,transparent); -webkit-mask-image: linear-gradient(#000,transparent); }
.xl-stage-chrome { position: relative; z-index: 5; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--xl-line); color: #839299; font: 7px/1 var(--xl-mono); letter-spacing: .12em; }
.xl-stage-chrome span { display: flex; align-items: center; gap: 9px; }
.xl-stage-chrome i { width: 5px; height: 5px; border-radius: 50%; background: var(--xl-lime); box-shadow: 0 0 10px var(--xl-lime); }
.xl-stage-chrome em { color: var(--xl-cyan); font-style: normal; }
.xl-stage-view { position: absolute; inset: 54px 0 0; padding: clamp(26px,3.5vw,54px); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1); }
.xl-story-stage[data-view="route"] [data-view-panel="route"],
.xl-story-stage[data-view="execute"] [data-view-panel="execute"],
.xl-story-stage[data-view="prove"] [data-view-panel="prove"] { opacity: 1; transform: none; pointer-events: auto; }

.xl-stage-prompt { max-width: 560px; margin: 0; color: #e9efef; font-size: clamp(18px,2vw,27px); line-height: 1.3; letter-spacing: -.03em; }
.xl-stage-prompt small { display: block; margin-bottom: 12px; color: #70828a; font: 7px/1 var(--xl-mono); letter-spacing: .15em; }
.xl-router-map { position: relative; height: 310px; margin-top: 50px; display: grid; grid-template-columns: 110px 1fr 110px; gap: 24px; align-items: center; }
.xl-router-map::before { content: ''; position: absolute; left: 90px; right: 93px; top: 50%; height: 1px; background: linear-gradient(90deg,var(--xl-cyan),var(--xl-violet),var(--xl-lime)); opacity: .7; }
.xl-router-source { position: relative; z-index: 2; width: 82px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(99,221,244,.35); border-radius: 50%; color: var(--xl-cyan); background: #0a151b; font: 8px/1 var(--xl-mono); }
.xl-router-source i { position: absolute; right: -7px; width: 7px; height: 7px; border-radius: 50%; background: var(--xl-cyan); box-shadow: 0 0 15px var(--xl-cyan); }
.xl-router-map > div { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.xl-router-map > div span { min-height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--xl-line); color: #78868d; background: #0a1116; font: 8px/1 var(--xl-mono); }
.xl-router-map > div small { color: #5f6b71; font-size: 6px; }
.xl-router-map > div .is-selected { color: #eeeaff; border-color: var(--xl-violet); background: rgba(141,125,255,.12); box-shadow: 0 0 55px rgba(141,125,255,.13); transform: translateY(-16px); }
.xl-router-map > div .is-selected small { color: #a99eff; }
.xl-router-map > em { position: relative; z-index: 2; color: var(--xl-lime); font: normal 7px/1.7 var(--xl-mono); text-align: right; }
.xl-router-map > em strong { color: #dce7e6; font-size: 10px; }

.xl-terminal-head { display: flex; justify-content: space-between; margin-bottom: 25px; color: #72828a; font: 7px/1 var(--xl-mono); letter-spacing: .14em; }
.xl-terminal-head em { color: var(--xl-lime); font-style: normal; }
.xl-terminal-row { display: grid; grid-template-columns: 32px 1fr auto 48px; align-items: center; gap: 15px; min-height: 72px; border-top: 1px solid var(--xl-line); }
.xl-terminal-row > i { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(99,221,244,.24); border-radius: 50%; color: var(--xl-cyan); font: normal 7px/1 var(--xl-mono); }
.xl-terminal-row > span { display: flex; flex-direction: column; gap: 5px; }
.xl-terminal-row small { color: #65767e; font: 6px/1 var(--xl-mono); letter-spacing: .12em; }
.xl-terminal-row b { color: #dbe4e5; font: 400 10px/1 var(--xl-mono); }
.xl-terminal-row > em { color: #7f9097; font: normal 7px/1 var(--xl-mono); }
.xl-terminal-row > strong { color: var(--xl-lime); font: 7px/1 var(--xl-mono); }
.xl-stage-execute pre { margin: 28px 0 0; padding: 22px; overflow: hidden; border: 1px solid rgba(141,125,255,.14); background: #070b0e; color: #9cabb1; font: 9px/1.8 var(--xl-mono); }
.xl-stage-execute code span { color: #a79cff; }

.xl-stage-prove > header { display: flex; justify-content: space-between; align-items: flex-start; }
.xl-stage-prove > header span { display: flex; flex-direction: column; gap: 8px; color: #edf2f1; font-size: 18px; font-weight: 570; }
.xl-stage-prove > header small { color: #788990; font: 6px/1 var(--xl-mono); letter-spacing: .14em; }
.xl-stage-prove > header em { color: var(--xl-lime); font: normal 7px/1 var(--xl-mono); }
.xl-proof-chart { height: 310px; display: flex; align-items: end; justify-content: center; gap: clamp(18px,3vw,42px); padding: 50px 25px 0; border-bottom: 1px solid var(--xl-line); }
.xl-proof-chart i { position: relative; width: min(70px,12%); height: var(--h); display: block; background: linear-gradient(to top,rgba(99,221,244,.25),rgba(141,125,255,.72)); box-shadow: 0 0 34px rgba(99,221,244,.08); }
.xl-proof-chart i:nth-child(2) { background: linear-gradient(to top,rgba(202,255,99,.28),rgba(99,221,244,.76)); }
.xl-proof-chart b { position: absolute; left: 50%; bottom: -24px; color: #73858d; font: 6px/1 var(--xl-mono); transform: translateX(-50%); }
.xl-stage-prove > footer { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin-top: 40px; }
.xl-stage-prove > footer strong { color: var(--xl-lime); font-size: 21px; }
.xl-stage-prove > footer span { color: #8f9ea4; font-size: 10px; line-height: 1.5; }
.xl-stage-prove > footer em { color: var(--xl-cyan); font: normal 7px/1 var(--xl-mono); }

.xl-light {
  position: relative;
  padding: clamp(120px,13vw,190px) clamp(24px,5vw,80px);
  color: #0c1210;
  background: var(--xl-paper);
}
.xl-light::before { content: ''; position: absolute; left: 50%; top: 0; width: 78vw; height: 1px; transform: translateX(-50%); background: #a8aea7; }
.xl-light-head { display: grid; grid-template-columns: 1.35fr .65fr; column-gap: 7vw; align-items: end; }
.xl-light-head > p { grid-column: 1/-1; color: #52615a; }
.xl-light-head h2 { color: #0b110f; }
.xl-light-head h2 em { color: transparent; -webkit-text-stroke: 2px #0b110f; font-style: normal; }
.xl-light-head > span { max-width: 350px; padding-bottom: 12px; color: #48544e; font-size: 17px; line-height: 1.6; }

.xl-receipt-card { max-width: 1220px; margin: 120px auto 0; border: 1px solid #aab0a9; background: #f7f7f1; box-shadow: 0 55px 120px rgba(31,43,36,.16); }
.xl-receipt-card > header,.xl-receipt-card > footer { min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; border-bottom: 1px solid #b8beb7; font: 8px/1 var(--xl-mono); letter-spacing: .13em; }
.xl-receipt-card > header span { display: flex; align-items: center; gap: 10px; }
.xl-receipt-card > header i { width: 7px; height: 7px; border-radius: 50%; background: #6cab3a; box-shadow: 0 0 10px rgba(108,171,58,.5); }
.xl-receipt-main { min-height: 360px; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 7vw; padding: 60px 7vw; }
.xl-receipt-seal { position: relative; width: min(270px,22vw); aspect-ratio: 1; margin: auto; }
.xl-receipt-seal i { position: absolute; inset: 14% 30%; border: 2px solid #101713; border-radius: 50%; transform: rotate(34deg); }
.xl-receipt-seal i:nth-child(2) { transform: rotate(-34deg); }
.xl-receipt-seal span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; font-weight: 700; }
.xl-receipt-summary small { color: #607068; font: 8px/1 var(--xl-mono); letter-spacing: .15em; }
.xl-receipt-summary h3 { max-width: 760px; margin: 20px 0 24px; font-size: clamp(32px,4.3vw,62px); font-weight: 600; line-height: .97; letter-spacing: -.055em; }
.xl-receipt-summary p { max-width: 520px; margin: 0; color: #566159; font-size: 15px; line-height: 1.6; }
.xl-receipt-grid { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid #b8beb7; border-bottom: 1px solid #b8beb7; }
.xl-receipt-grid p { min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 9px; margin: 0; padding: 0 20px; border-right: 1px solid #b8beb7; }
.xl-receipt-grid p:last-child { border-right: 0; }
.xl-receipt-grid span { color: #68766e; font: 7px/1 var(--xl-mono); letter-spacing: .13em; }
.xl-receipt-grid strong { color: #101713; font-size: 13px; }
.xl-receipt-card > footer { border: 0; color: #647169; }
.xl-receipt-card > footer strong { color: #4c8e28; }

.xl-capabilities { padding: clamp(120px,12vw,180px) clamp(24px,4vw,68px); background: #070b0e; }
.xl-capabilities > header { max-width: 1050px; margin-bottom: 110px; }
.xl-capabilities > header h2 { font-size: clamp(56px,7.5vw,112px); }
.xl-capabilities > header h2 em { color: #7f8c92; font-style: normal; font-weight: 430; }
.xl-cap-list { border-top: 1px solid var(--xl-line); }
.xl-cap-list > a { position: relative; min-height: 145px; display: grid; grid-template-columns: 60px minmax(220px,.75fr) 1fr auto; align-items: center; gap: 24px; overflow: hidden; border-bottom: 1px solid var(--xl-line); transition: color .25s ease,padding .35s cubic-bezier(.2,.8,.2,1); }
.xl-cap-list > a::before { content: ''; position: absolute; z-index: 0; inset: 0; background: var(--xl-lime); transform: scaleY(0); transform-origin: bottom; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.xl-cap-list > a > * { position: relative; z-index: 1; }
.xl-cap-list > a:hover { padding-inline: 25px; color: #0a0f0c; }
.xl-cap-list > a:hover::before { transform: scaleY(1); }
.xl-cap-list > a > span { color: var(--xl-cyan); font: 8px/1 var(--xl-mono); }
.xl-cap-list h3 { margin: 0; color: #eef2f1; font-size: clamp(28px,3.2vw,48px); font-weight: 560; letter-spacing: -.045em; }
.xl-cap-list p { max-width: 410px; margin: 0; color: #829098; font-size: 14px; line-height: 1.55; }
.xl-cap-list em { color: var(--xl-lime); font: normal 8px/1 var(--xl-mono); letter-spacing: .1em; }
.xl-cap-list > a:hover > span,.xl-cap-list > a:hover h3,.xl-cap-list > a:hover p,.xl-cap-list > a:hover em { color: #0a0f0c; }

.xl-final { position: relative; min-height: max(850px,100svh); display: flex; flex-direction: column; justify-content: center; padding: 120px clamp(24px,4vw,68px) 75px; overflow: hidden; color: #080b09; background: var(--xl-lime); }
.xl-final-light { position: absolute; right: -8vw; top: -18vw; width: 68vw; aspect-ratio: 1; border: 1px solid rgba(8,11,9,.25); border-radius: 50%; }
.xl-final-light::before,.xl-final-light::after { content: ''; position: absolute; inset: 13%; border: inherit; border-radius: inherit; }
.xl-final-light::after { inset: 29%; background: rgba(255,255,255,.18); }
.xl-final > p { position: relative; margin: 0 0 55px; font: 8px/1 var(--xl-mono); letter-spacing: .18em; }
.xl-final h2 { position: relative; margin: 0; font-size: clamp(80px,12vw,180px); font-weight: 690; line-height: .75; letter-spacing: -.08em; }
.xl-final h2 em { color: transparent; -webkit-text-stroke: 2px #080b09; font-style: normal; }
.xl-button--dark { position: relative; align-self: flex-end; margin: 60px 7vw 80px 0; color: var(--xl-lime) !important; background: #080b09; box-shadow: 0 24px 60px rgba(8,11,9,.18); }
.xl-final > footer { position: absolute; left: clamp(24px,4vw,68px); right: clamp(24px,4vw,68px); bottom: 32px; display: flex; justify-content: space-between; padding-top: 22px; border-top: 1px solid rgba(8,11,9,.24); font: 7px/1 var(--xl-mono); letter-spacing: .13em; }

.xl-reveal { opacity: 1; transform: none; }

@media (max-width: 1120px) {
  .xl-nav { grid-template-columns: 1fr auto; }
  .xl-nav > p { display: none; }
  .xl-story-layout { grid-template-columns: minmax(300px,.65fr) minmax(520px,1.35fr); gap: 50px; }
  .xl-receipt-main { min-height: 320px; }
}

@media (max-width: 900px) {
  .xl-nav { min-height: 70px; }
  .xl-nav-links > a:not(.xl-nav-live) { display: none; }
  .xl-story-layout { grid-template-columns: 1fr; }
  .xl-story-step { min-height: auto; padding: 75px 0; opacity: 1; }
  .xl-story-stage { position: relative; top: auto; height: 580px; min-height: 0; }
  .xl-light-head { grid-template-columns: 1fr; }
  .xl-light-head > span { margin-top: 42px; }
  .xl-receipt-grid { grid-template-columns: repeat(3,1fr); }
  .xl-receipt-grid p:nth-child(3n) { border-right: 0; }
  .xl-receipt-grid p:nth-child(-n+3) { border-bottom: 1px solid #b8beb7; }
  .xl-cap-list > a { grid-template-columns: 45px 1fr auto; }
  .xl-cap-list p { display: none; }
}

@media (max-width: 620px) {
  .xl-nav { min-height: 62px; padding-inline: 17px; }
  .xl-brand { font-size: 13px; }
  .xl-brand > i { width: 16px; height: 21px; }
  .xl-brand > i span { left: 6.5px; }
  .xl-nav-live { padding: 9px 11px; font-size: 9px; }
  .xl-button { min-width: 172px; padding: 12px 14px; }
  .xl-manifesto { min-height: 760px; padding: 100px 17px 140px; }
  .xl-manifesto-index { margin-bottom: 48px; }
  .xl-manifesto h2 { font-size: clamp(49px,15.2vw,68px); line-height: .85; }
  .xl-manifesto h2 em { -webkit-text-stroke-width: 1px; }
  .xl-manifesto-note { width: 100%; margin: 60px 0 0; }
  .xl-manifesto-note p { font-size: 16px; }
  .xl-type-river { height: 68px; }
  .xl-story { padding: 100px 17px; }
  .xl-story > header { margin-bottom: 70px; }
  .xl-story > header h2,.xl-light-head h2,.xl-capabilities > header h2 { font-size: clamp(48px,14vw,66px); }
  .xl-story-step { grid-template-columns: 30px 1fr; gap: 12px; padding: 55px 0; }
  .xl-story-step h3 { font-size: 30px; }
  .xl-story-stage { height: 455px; }
  .xl-stage-view { padding: 22px 16px; }
  .xl-router-map { height: 250px; grid-template-columns: 48px 1fr; gap: 12px; margin-top: 35px; }
  .xl-router-map::before { left: 35px; right: 0; }
  .xl-router-source { width: 45px; }
  .xl-router-map > div { gap: 4px; }
  .xl-router-map > div span { min-height: 70px; font-size: 6px; }
  .xl-router-map > em { display: none; }
  .xl-terminal-row { grid-template-columns: 27px 1fr auto; gap: 9px; min-height: 62px; }
  .xl-terminal-row > em { display: none; }
  .xl-stage-execute pre { padding: 13px; font-size: 7px; }
  .xl-proof-chart { height: 245px; gap: 18px; padding-inline: 10px; }
  .xl-stage-prove > footer { grid-template-columns: 1fr auto; }
  .xl-stage-prove > footer span { display: none; }
  .xl-light { padding: 100px 17px; }
  .xl-light-head h2 em { -webkit-text-stroke-width: 1px; }
  .xl-receipt-card { margin-top: 70px; }
  .xl-receipt-card > header,.xl-receipt-card > footer { padding-inline: 13px; font-size: 6px; }
  .xl-receipt-main { min-height: 0; grid-template-columns: 1fr; gap: 22px; padding: 38px 22px; }
  .xl-receipt-seal { width: 115px; }
  .xl-receipt-seal span { font-size: 26px; }
  .xl-receipt-summary h3 { font-size: 34px; }
  .xl-receipt-grid { grid-template-columns: repeat(2,1fr); }
  .xl-receipt-grid p { min-height: 78px; padding-inline: 12px; }
  .xl-receipt-grid p:nth-child(3n) { border-right: 1px solid #b8beb7; }
  .xl-receipt-grid p:nth-child(2n) { border-right: 0; }
  .xl-receipt-grid p:nth-child(-n+4) { border-bottom: 1px solid #b8beb7; }
  .xl-receipt-card > footer span { max-width: 190px; line-height: 1.4; }
  .xl-capabilities { padding: 100px 17px; }
  .xl-capabilities > header { margin-bottom: 70px; }
  .xl-cap-list > a { min-height: 112px; grid-template-columns: 28px 1fr auto; gap: 10px; }
  .xl-cap-list h3 { font-size: 26px; }
  .xl-cap-list em { font-size: 0; }
  .xl-cap-list em::after { content: '↗'; font-size: 14px; }
  .xl-final { min-height: 760px; padding: 100px 17px 70px; }
  .xl-final h2 { font-size: clamp(60px,18vw,78px); line-height: .79; }
  .xl-final h2 em { -webkit-text-stroke-width: 1px; }
  .xl-button--dark { align-self: flex-start; margin: 55px 0 80px; }
  .xl-final > footer { left: 17px; right: 17px; font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .xl-experience *,
  :root:not([data-motion="full"]) .xl-experience *::before,
  :root:not([data-motion="full"]) .xl-experience *::after { animation: none !important; transition: none !important; }
  :root:not([data-motion="full"]) .xl-reveal { opacity: 1; transform: none; }
}