/* ==================== Foundation: tokens, header, side rail, buttons, section heads ==================== */
:root {
  --bg: #0e0f11; --panel: #1c1d21; --panel-2: #2c2d32; --panel-3: #16171a; --line: rgba(255,255,255,.1); --muted: #b2b4ba; --text-2: #e0e1e4;
  --accent: #1fbed4; --on-accent: #061216; --done: #2ee07f; --on-done: #06140c; --r: 4px; --r-lg: 6px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--bg); color: #fff; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* system bar */
.sys { position: sticky; top: 0; z-index: 30; height: 56px; display: flex; align-items: center; gap: 1.5rem; padding: 0 1.6rem; border-bottom: 1px solid var(--line); background: rgba(14,15,17,.95); backdrop-filter: blur(12px); font-size: .85rem; color: var(--muted); }
.logo { display: flex; align-items: center; }
.logo img { height: 30px; width: auto; display: block; }
.sys .right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.chip-btn { height: 34px; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .95rem; border-radius: var(--r); font-weight: 600; font-size: .82rem; white-space: nowrap; transition: box-shadow .15s; }
.chip-btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip-btn--discord svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.chip-btn--ghost { color: #fff; background: var(--panel); }
.chip-btn:hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #fff; transform: translateY(-1px); }
/* rail */
.shell { display: grid; grid-template-columns: 80px minmax(0, 1fr); }
.rail { position: sticky; top: 56px; z-index: 30; height: calc(100vh - 56px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; border-right: 1px solid var(--line); padding: 1rem 0; overflow: visible; }
.rail a { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: rgba(255,255,255,.045); color: var(--muted); transition: box-shadow .2s, color .2s, background .2s; overflow: visible; }
.rail svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail .tip { position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%); white-space: nowrap; padding: .45rem .75rem; border-radius: var(--r); background: #fff; color: #0e0f11; font-size: .8rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.rail a:hover { color: #fff; transform: none; box-shadow: 0 0 0 2px #fff; }
.rail a:hover .tip, .rail a:focus .tip { opacity: 1; transform: translate(0, -50%); }
.rail a.on { color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
/* hero */
.screen { position: relative; overflow: hidden; min-height: min(860px, calc(100vh - 56px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding: 2rem clamp(1.5rem, 4vw, 4rem); border-bottom: 1px solid var(--line); }
.screen::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 50%, rgba(31,190,212,.3), transparent 45%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 48px 100%; -webkit-mask: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%); mask: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%); }
.screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 50%, rgba(31,190,212,.22), transparent 45%); pointer-events: none; }
.copy { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.title { margin-top: .8rem; font-family: Orbitron, sans-serif; font-weight: 900; font-size: clamp(3rem, 6.5vw, 5.6rem); letter-spacing: .03em; line-height: .95; }
.copy p.text { margin: 1rem 0 1.7rem; max-width: 44ch; color: var(--text-2); font-size: 1.1rem; line-height: 1.55; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.screen::before, .screen::after { z-index: -1; }
/* sections */
main { padding-inline: clamp(1.5rem, 4vw, 4rem); max-width: 1320px; }
#flywheel, #team { padding-top: 3.25rem; }
#faq { position: relative; padding-top: 3.25rem; }
.head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -.025em; }
.head small { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.road {
  position: relative;
  display: grid;
  gap: 2.85rem;
  counter-reset: phase;
  --when: 11rem;
  --rail: 28px;
  --gap-x: 1.5rem;
  --node: 18px;
  --node-top: .55rem;
  --stage-pad: .35rem;
}
.road::before {
  content: "";
  position: absolute;
  left: calc(var(--when) + var(--gap-x) + (var(--rail) - 3px) / 2);
  top: calc(var(--stage-pad) + var(--node-top) + (var(--node) / 2));
  bottom: calc(var(--stage-pad) + var(--node-top) + (var(--node) / 2));
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
  180deg,
  var(--done) 0%,
  var(--done) 22%,
  var(--accent) 30%,
  var(--accent) 48%,
  rgba(31,190,212,.35) 58%,
  rgba(255,255,255,.14) 72%,
  rgba(255,255,255,.1) 100%
  );
  box-shadow: 0 0 18px rgba(31,190,212,.12);
}
.stage {
  position: relative;
  counter-increment: phase;
  display: grid;
  grid-template-columns: var(--when) var(--rail) minmax(0, 1fr);
  column-gap: var(--gap-x);
  align-items: start;
  background: transparent;
  box-shadow: none;
  padding: var(--stage-pad) 0;
  border-radius: 0;
}
.stage::before { display: none; }
.stage .when {
  text-align: right;
  padding-top: .15rem;
}
.stage .tag {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.stage .tag::before {
  content: counter(phase, decimal-leading-zero) " · ";
  font-family: Orbitron, sans-serif;
  letter-spacing: .06em;
}
.stage.done .tag { color: var(--done); }
.stage.now .tag { color: var(--accent); }
.stage h3 {
  margin-top: .3rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
}
.stage .road-node {
  position: relative;
  z-index: 1;
  width: var(--node);
  height: var(--node);
  margin: var(--node-top) auto 0;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 0 0 4px var(--bg);
}
.stage.done .road-node {
  display: grid;
  place-items: center;
  color: var(--on-done);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  background: var(--done);
  border-color: var(--done);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(46,224,127,.45);
}
.stage.done .road-node::before { content: "✓"; }
.stage.now .road-node {
  background: var(--bg);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px rgba(31,190,212,.35);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,190,212,.6); } 100% { box-shadow: 0 0 0 12px rgba(31,190,212,0); } }
.stage ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.stage-tags {
  padding: .7rem .75rem;
  border-radius: var(--r);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.stage.done .stage-tags {
  background: rgba(46,224,127,.05);
  box-shadow: inset 0 0 0 1px rgba(46,224,127,.18);
}
.stage.now .stage-tags {
  background: rgba(31,190,212,.06);
  box-shadow: inset 0 0 0 1px rgba(31,190,212,.28);
}
.stage.next .stage-tags, .stage.later .stage-tags {
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.stage.done ul {
  background: transparent;
  box-shadow: none;
}
.stage.now ul {
  background: transparent;
  box-shadow: none;
}
.stage.next ul, .stage.later ul {
  background: transparent;
  box-shadow: none;
}
.stage li {
  padding: .45rem .8rem;
  border-radius: var(--r);
  background: var(--panel-2);
  font-size: .86rem;
  color: var(--text-2);
}
.stage.done li {
  position: relative;
  padding-left: 1.7rem;
  color: #d8f8e4;
  background: rgba(46,224,127,.12);
}
.stage.done li::before {
  content: "✓";
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--done);
  font-weight: 800;
  font-size: .75rem;
}
.stage.later li {
  background: var(--panel-2);
  box-shadow: none;
  color: var(--text-2);
}
.stage.now li {
  background: rgba(31,190,212,.08);
  color: #e8ecee;
  box-shadow: inset 0 0 0 1px rgba(31,190,212,.16);
}
.stage.next .tag { color: rgba(255,255,255,.55); }
.stage.next .road-node {
  background: transparent;
  border: 2px solid rgba(31,190,212,.55);
  box-shadow: 0 0 0 4px var(--bg), 0 0 12px rgba(31,190,212,.18);
}
.stage.next li {
  background: rgba(31,190,212,.06);
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px rgba(31,190,212,.12);
}
.stage.later .when, .stage.later .stage-tags { opacity: .72; }
.stage:not(.done):not(.now):not(.next):not(.later) ul { box-shadow: none; }
summary::-webkit-details-marker { display: none; }
input { flex: 1 1 180px; height: 52px; min-width: 0; padding: 0 1.1rem; border-radius: var(--r); border: 0; background: var(--panel-2); color: #fff; font: 500 1rem Inter, sans-serif; }
input:focus { outline: 2px solid var(--accent); }
.site-foot {
  margin-top: 2.5rem;
  padding: 3.2rem 0 5.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}
.site-foot a { color: inherit; transition: color .15s; }
.site-foot a:hover { color: #fff; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; }
/* partners */
.partners { margin-top: 1.6rem; display: flex; align-items: center; gap: 1.6rem; padding: 1.1rem 1.4rem; border-radius: var(--r-lg); background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
.partners[hidden] { display: none; }
.partners small { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.logos { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 2rem; }
@media (max-width: 900px) {
  html { scroll-padding-top: 124px; }
  .sys { padding: 0 1.25rem; gap: .8rem; }
  .chip-btn--ghost { display: none; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { top: 56px; z-index: 25; height: auto; flex-direction: row; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: .6rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--line); background: rgba(14,15,17,.95); backdrop-filter: blur(12px); }
  .rail a { width: 44px; height: 44px; }
  .rail a.on { transform: none; }
  .rail svg { width: 19px; height: 19px; }
  .rail .tip { display: none; }
  .content { grid-row: 2; }
  .screen { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 1.5rem 1.25rem 3rem; }
  main { padding-inline: 1.25rem; }
  #flywheel, #team, #faq { padding-top: 2.4rem; }
  .head small { display: none; }
  .road::before { left: calc((var(--rail) - 3px) / 2); }
  .stage {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    grid-template-areas:
    "node when"
    "node body";
    column-gap: .9rem;
  }
  .stage .when { grid-area: when; text-align: left; }
  .stage .road-node { grid-area: node; margin-top: .2rem; }
  .stage-tags { grid-area: body; margin-top: .35rem; }
  .partners { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .logos { justify-content: flex-start; gap: 1rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* ==================== Layout and shared section styles ==================== */
/* Story layout for the Xbox page.
   Tokens, type, buttons, rail and hero stay in xbox.css.
   Placeholder art lives in the .viz-* blocks. */
main { max-width: none; padding-inline: 0; --gut: clamp(1.5rem, 4vw, 4rem); --box: 1192px; }
.wrap { width: min(calc(var(--box) + 2 * var(--gut)), 100%); margin-inline: auto; padding-inline: var(--gut); }
section[id] { scroll-margin-top: 80px; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(../%23n)'/></svg>");
}
.screen { border-bottom: 0; }
.copy { z-index: 2; }
.screen::before { animation: env-drift 32s ease-in-out infinite alternate; }
@keyframes env-drift { to { transform: scale(1.05) translate3d(-1.2%, .8%, 0); } }
.eyebrow { letter-spacing: .14em; }
.editorial { padding-block: clamp(5.5rem, 13vh, 9.5rem); }
.system { padding-block: clamp(4rem, 9vh, 6.5rem); }
/* ——— section treatments: scenes, systems, quiet ——— */
.scene {
  position: relative;
  isolation: isolate;
}
.scene > .wrap {
  position: relative;
  z-index: 1;
}
/* open atmospheric wash — never a section box */
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
  radial-gradient(ellipse 70% 55% at 78% 28%, rgba(31,190,212,.08), transparent 58%),
  radial-gradient(ellipse 50% 45% at 12% 78%, rgba(31,190,212,.04), transparent 55%);
  opacity: .9;
}
.screen.scene::before { display: none; }
/* hero already has its own env */
.hub-loop.scene::before {
  display: block;
  background:
  radial-gradient(ellipse 52% 48% at 58% 36%, rgba(31,190,212,.1), transparent 62%),
  radial-gradient(ellipse 36% 32% at 18% 58%, rgba(31,190,212,.05), transparent 58%);
}
.system {
  position: relative;
  background: transparent;
}
.system::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 40% at 50% 0%, rgba(255,255,255,.02), transparent 60%);
}
.stakes.v7lock .lock-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}
.stakes.v7lock .lock-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: grab;
}
.stakes.v7lock .lock-slider::-moz-range-track {
  height: 2px;
  background: transparent;
  border: 0;
}
.stakes.v7lock .lock-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: grab;
}
/* ——— hub stack: beginning → platform → loop ——— */
.hub-loop {
  position: relative;
  background: #090b0d;
}
@media (min-width: 901px) {
  .screen { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); padding-inline: max(clamp(1.5rem, 4vw, 4rem), calc((100% - 1192px) / 2)); align-items: center; }
  .shell { grid-template-columns: 80px minmax(0, 1fr); }
  .rail {
    z-index: 30;
    gap: .5rem;
    background: transparent;
    overflow: visible;
    border-right: 1px solid var(--line);
  }
  .rail a {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.045);
    border-radius: 4px;
    box-shadow: none;
    overflow: visible;
    color: var(--muted);
    transform: none;
  }
  .rail a:hover {
    color: #fff;
    transform: none;
    box-shadow: 0 0 0 2px #fff;
  }
  .rail a.on {
    color: var(--on-accent);
    background: var(--accent);
    transform: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,.7);
  }
  .rail a.on::after { display: none; }
  .rail svg { width: 20px; height: 20px; }
  .rail .tip { left: calc(100% + 14px); }
  .screen .copy .title {
    margin-top: .7rem;
    font-family: Orbitron, sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 6.5vw, 5.4rem);
    letter-spacing: .03em;
    line-height: .95;
  }
  .screen .copy p.text {
    margin: 1rem 0 1.7rem;
    max-width: 44ch;
    color: var(--text-2);
    font-size: 1.1rem;
    line-height: 1.55;
  }
}
#roadmap .road {
  gap: 3.1rem;
  max-width: 920px;
}
#roadmap .stage.now .when h3 { color: #fff; }
#roadmap .stage.now .road-node {
  width: 20px;
  height: 20px;
}
#roadmap .stage.done .tag, #roadmap .stage.now .tag, #roadmap .stage.next .tag, #roadmap .stage.later .tag {
  font-family: Orbitron, sans-serif;
  letter-spacing: .14em;
}
/* Right-side action cards — match rail/r6.html */
#roadmap .stage-tags {
  padding: 1.3rem 1.5rem;
  border-radius: 4px;
  background: var(--panel);
  box-shadow: none;
  border: 0;
}
#roadmap .stage.done .stage-tags {
  background: linear-gradient(90deg, color-mix(in srgb, var(--done) 18%, transparent), var(--panel) 55%);
  box-shadow: inset 4px 0 0 var(--done);
}
#roadmap .stage.now .stage-tags {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--panel) 50%);
  box-shadow: inset 4px 0 0 var(--accent);
}
#roadmap .stage.next .stage-tags, #roadmap .stage.later .stage-tags {
  background: var(--panel);
  box-shadow: none;
  opacity: 1;
}
#roadmap .stage ul { gap: .5rem; }
#roadmap .stage li {
  border-radius: 4px;
  padding: .45rem .8rem;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
  background: var(--panel-2);
  box-shadow: none;
  border: 0;
}
#roadmap .stage.done li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem .5rem .85rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(46,224,127,.1);
  box-shadow: inset 0 0 0 1px rgba(46,224,127,.9);
  text-decoration: none;
}
#roadmap .stage.done li::before {
  content: "✓";
  display: inline-block;
  position: static;
  left: auto;
  top: auto;
  transform: none;
  flex: 0 0 auto;
  color: var(--done);
  font-weight: 800;
  font-size: .78rem;
  line-height: 1;
}
#roadmap .stage.now li {
  color: var(--text-2);
  background: var(--panel-2);
  box-shadow: none;
}
#roadmap .stage.next li, #roadmap .stage.later li {
  color: var(--text-2);
  background: var(--panel-2);
  box-shadow: none;
}
.partners { background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); padding: 1.2rem 0 0; }
.faq summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .shell, .content, .rail, main, .wrap { min-width: 0; }
  .rail { max-width: 100%; }
  main { --gut: 1.25rem; }
  .editorial { padding-block: 4.2rem; }
  .system { padding-block: 3.4rem; }
  section[id] { scroll-margin-top: 128px; }
  .rail { background: rgba(14,15,17,.92); gap: 0; justify-content: space-between; padding-inline: .5rem; overflow-x: hidden; }
  .rail a, .rail a.on { flex: 1 1 0; min-width: 0; max-width: 44px; width: auto; height: 36px; background: transparent; box-shadow: none; transform: none; color: var(--muted); }
  .rail a.on { color: var(--accent); }
  .site-foot { padding-bottom: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .screen::before { animation: none !important; }
}
/* ==================== Ambient background light ==================== */
/* Living-system motion. Layout stays in xbox.css / story.css. */
html { --lx: 0; --ly: 0; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .016;
  background:
  linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px) 0 0 / 64px 64px,
  linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px) 0 0 / 64px 64px;
  animation: grid-drift 56s linear infinite;
}
@keyframes grid-drift { to { background-position: 64px 48px, 64px 48px; } }
.editorial, .hub-loop, .screen {
  --wash-x: calc(48% + var(--lx, 0) * 5%);
  --wash-y: calc(42% + var(--ly, 0) * 4%);
}
.hub-loop {
  background:
  radial-gradient(ellipse at calc(62% + var(--lx, 0) * 4%) calc(44% + var(--ly, 0) * 3%), rgba(31,190,212,.07), transparent 46%),
  #090b0d;
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
  radial-gradient(ellipse at calc(72% + var(--lx, 0) * 5%) calc(48% + var(--ly, 0) * 4%), rgba(31,190,212,.26), transparent 48%);
  animation: room-light 18s ease-in-out infinite;
}
@keyframes room-light { 50% { opacity: .78; } }
@media (max-width: 900px) {
  .screen::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::after, .screen::after { animation: none !important; }
}
/* ==================== Cursor glow, scroll progress, section reveal ==================== */
/* R6 design system — loaded last so it wins over story/live/concepts.
   Mirrors rail/r6.html: flat #1c1d21 panels, 4–6px corners, compact .head titles,
   white focus rings on hover, an even section rhythm and no ambient washes. */
:root { --r: 4px; --r-lg: 6px; }
/* surfaces: one flat background, glow only in the hero */
body::before, body::after, main .scene::before, main .scene::after { display: none; }
/* rhythm: every section sits 5rem from the next, like section.block in r6 */
main > section[id]:not(.invest):not(.waitlist) { padding-block: 2.5rem; background: none; }
main > section#play { padding-top: 4rem; }
.head { margin-bottom: 1.4rem; }
.head h2 { font-weight: 600; letter-spacing: -.02em; color: #fff; }
/* type: Orbitron is reserved for the DEVORA logo and big figures
   (.title, countdown, KPIs, stake amount); every label is Inter */
.stage .tag::before, #roadmap .stage .tag {
  font-family: Inter, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums;
}
/* shape: one 4px corner everywhere */
#roadmap .stage.done li { border-radius: var(--r); }
/* Three-mode page system
   Game = atmospheric and media-led.
   Platform = quiet, structured explanation.
   Business = clean editorial conversion. */
main > section, main > footer { --mode-line: rgba(255,255,255,.1); }
main > .mode-game:not(.screen) {
  position: relative;
  isolation: isolate;
  background:
  radial-gradient(ellipse 54% 70% at 78% 45%, rgba(31,190,212,.055), transparent 68%),
  var(--bg);
}
.mode-game .head small { color: #b9bbc1; }
main > .mode-platform {
  position: relative;
  background: #111214;
}
.mode-platform .head small {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mode-platform#roadmap .stage li {
  border-radius: var(--r);
  border: 0;
  background-color: #1a1b1f;
  box-shadow: none;
}
main > .mode-business {
  position: relative;
  width: min(var(--box), calc(100% - 2 * var(--gut)));
  margin-inline: auto !important;
  background: transparent;
}
main > section.mode-business { margin-block: clamp(2.5rem, 6vw, 5rem) !important; }
.mode-business::before, .mode-business::after { display: none !important; }
.mode-business .eyebrow { color: #c5c7cc; }
.mode-business .eyebrow::before {
  border-radius: 1px;
  box-shadow: none;
  background: var(--accent);
}
.mode-business.site-foot {
  width: 100%;
  margin-top: clamp(4rem, 8vw, 7rem) !important;
  border-top: 1px solid var(--mode-line);
  background: #0b0c0e;
}
/* Cyan has one job: action, selection, or current state. */
.mode-platform :is(button, [role="button"], a):focus-visible, .mode-business :is(button, summary, a, input):focus-visible { outline-color: var(--accent); }
@media (max-width: 900px) {
  main > .mode-business { width: calc(100% - 2.5rem); }
}
/* Kinetic layer: a small number of reusable effects makes the page feel alive. */
body {
  --pointer-x: 72%;
  --pointer-y: 22%;
}
body::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--pointer-x) var(--pointer-y), rgba(31,190,212,.045), transparent 68%);
  transition: opacity .3s;
}
.sys { isolation: isolate; }
.page-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), #8b6bff 65%, #ff4fd8);
  box-shadow: 0 0 12px rgba(31,190,212,.65);
}
.screen .title {
  color: transparent;
  background: linear-gradient(100deg, #fff 18%, #fff 42%, #8eeaf5 50%, #fff 58%, #fff 82%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: title-sheen 7s ease-in-out infinite;
  filter: drop-shadow(0 0 28px rgba(31,190,212,.08));
}
@media (min-width: 901px) {
  .screen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
@keyframes title-sheen {
  0%, 68%, 100% { background-position: 100% 0; }
  82% { background-position: 0 0; }
}
main > section[data-index]:not(.screen)::after {
  content: attr(data-index);
  position: absolute;
  right: max(var(--gut), calc((100% - var(--box)) / 2));
  top: 1.2rem;
  z-index: 0;
  color: rgba(255,255,255,.025);
  font: 800 clamp(4rem, 8vw, 7rem)/1 Orbitron, sans-serif;
  letter-spacing: -.08em;
  pointer-events: none;
}
main > section[data-index] > .wrap { position: relative; z-index: 1; }
main > section[data-index]:not(.screen)::before {
  content: "";
  display: block !important;
  position: absolute;
  left: 0;
  top: -1px;
  width: min(38%, 460px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,190,212,.75), transparent);
  animation: section-scan 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes section-scan { to { transform: translateX(160%); opacity: .3; } }
.mode-platform .head h2, .mode-business .head h2 { text-wrap: balance; }
.mode-platform .head::before, .mode-business .head::before {
  content: attr(data-label);
  display: none;
}
.js main > section:not(.screen) .head, .js main > section:not(.screen) > .wrap > :not(.head) {
  opacity: .45;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1);
}
.js main > section.is-seen .head, .js main > section.is-seen > .wrap > :not(.head) {
  opacity: 1;
  transform: none;
}
@media (max-width: 900px) {
  body::after { display: none; }
  main > section[data-index]:not(.screen)::after { right: 1.25rem; font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .screen .title, main > section[data-index]:not(.screen)::before { animation: none !important; }
  .js main > section:not(.screen) .head, .js main > section:not(.screen) > .wrap > :not(.head) { opacity: 1; transform: none; }
}
/* ==================== Investor page overrides ==================== */
/* Investor-first variant. The consumer Xbox direction remains unchanged. */
.investor-build .screen .title {
  max-width: 9ch;
  font-size: clamp(2.7rem, 5.35vw, 4.75rem);
  line-height: .91;
  letter-spacing: -.035em;
}
.investor-build .screen .title span {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  font-size: .56em;
  letter-spacing: .08em;
}
.investor-build .screen .copy p.text { max-width: 49ch; }
.investor-build .screen .copy p.text b { color: #fff; font-weight: 650; }
/* ==================== Mode colours ==================== */
/* Borderless product launcher embedded inside the investor narrative. */
@property --launch-hue { syntax: '<color>'; inherits: true; initial-value: #1fbed4; }
/* ==================== Platform sections ==================== */
/* Component system — loaded last so it wins over every earlier layer.
   One secondary button, one label, one section header, one selected state.
   Glow is reserved for selected states; everything else is flat. */
:root {
  --label-size: .78rem;
  --label-size-sm: .64rem;
  --sel-bg: linear-gradient(100deg, color-mix(in srgb, var(--sel-hue, var(--accent)) 22%, #171a1f), #1a1c21 78%);
  --sel-edge: 3px;
}
/* ---------- Secondary button: the "See the wedge" style ---------- */
.chip-btn--ghost {
  background: var(--panel-2);
  color: #fff;
  box-shadow: none;
}
/* ---------- Label: the o1 "How the hub compounds" style ---------- */
.eyebrow, .mode-business .eyebrow, .head small, .mode-game .head small, .mode-platform .head small {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: var(--label-size);
  font-weight: 600;
  font-style: normal;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: none;
}
/* Leading labels carry the round dot, flat. */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.eyebrow::before, .mode-business .eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: none;
}
/* ---------- Section headers: every section uses .head ---------- */
/* ---------- Status colours ----------
   Green = done, cyan = now, amber = pre-launch / sample. Used only for status. */
:root { --status-done: #2ee07f; --status-now: var(--accent); --status-soon: #ffb020; }
/* ---------- The Clash Rush loop: embedded orbit run ---------- */
.orl-frame { display: block; width: 100%; height: 760px; border: 0; background: transparent; color-scheme: dark; }
/* ---------- Live arena strip under the hero ---------- */
.embed-frame { display: block; width: 100%; height: 470px; border: 0; background: #0e0f11; color-scheme: dark; }
/* ==================== "This is where the game ends" scroll scene ==================== */
/* "The game ends here" — the turn from DEVORA to the Clash Rush platform.
   Scroll drives --p from 0 to 1 while the stage stays pinned. */
.endgame { padding-block: 0 !important; }
.eg-track { position: relative; height: 260vh; }
.eg-sticky {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  width: min(1192px, calc(100% - 3rem));
  margin-inline: auto;
}
/* ---------- Copy: two headlines share one spot ---------- */
.eg-copy { display: grid; gap: 1.2rem; }
.eg-kicker { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.eg-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--done); }
.eg-kicker b { color: #fff; }
.eg-lines { display: grid; }
.eg-line {
  grid-area: 1 / 1;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
  will-change: opacity, transform;
}
.eg-line em { color: var(--accent); font-style: normal; }
.eg-a { opacity: var(--a, 1); transform: translateY(calc((1 - var(--a, 1)) * -18px)); filter: blur(calc((1 - var(--a, 1)) * 6px)); }
.eg-b { opacity: var(--b, 0); transform: translateY(calc((1 - var(--b, 0)) * 22px)); }
.eg-sub { max-width: 40ch; color: var(--text-2); font-size: 1.05rem; line-height: 1.6; opacity: var(--c, 0); transform: translateY(calc((1 - var(--c, 0)) * 14px)); }
.eg-pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.eg-pillars li {
  display: grid;
  gap: .3rem;
  padding: .8rem .85rem;
  border-radius: 6px;
  background: #1c1d21;
  opacity: var(--d, 0);
  transform: translateY(calc((1 - var(--d, 0)) * 16px));
}
.eg-pillars li:nth-child(2) { opacity: var(--d2, 0); transform: translateY(calc((1 - var(--d2, 0)) * 16px)); }
.eg-pillars li:nth-child(3) { opacity: var(--d3, 0); transform: translateY(calc((1 - var(--d3, 0)) * 16px)); }
.eg-pillars b { font-size: .95rem; }
.eg-pillars span { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.eg-pillars i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-bottom: .2rem; }
.eg-pillars li:nth-child(2) i { background: var(--done); }
.eg-pillars li:nth-child(3) i { background: #8b6bff; }
/* ---------- Stage: the game frame and the dashboard it lands in ---------- */
.eg-stage { position: relative; aspect-ratio: 1.3; width: 100%; }
.eg-dash {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .9rem;
  padding: 1.1rem;
  border-radius: 8px;
  background: #16171a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.45);
  opacity: var(--dash, 0);
}
.eg-top { display: flex; align-items: center; justify-content: space-between; }
.eg-top img { height: 20px; width: auto; display: block; }
.eg-me { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem .25rem .25rem; border-radius: 999px; background: rgba(255,255,255,.05); font-size: .74rem; font-weight: 700; }
.eg-me i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #8fe6f2, #1fbed4 45%, #0d5560); color: #061216; font-size: .62rem; font-style: normal; font-weight: 800; }
.eg-tabs { display: flex; gap: .3rem; }
.eg-tabs span { padding: .3rem .6rem; border-radius: 4px; background: rgba(255,255,255,.04); color: var(--muted); font-size: .72rem; font-weight: 600; }
.eg-tabs span:first-child { background: #fff; color: #0e0f11; box-shadow: none; }
.eg-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .7rem; min-height: 0; }
.eg-slot { position: relative; border-radius: 6px; }
.eg-slot.soon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .35rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  color: rgba(255,255,255,.32);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: var(--slots, 0);
  transform: scale(calc(.92 + var(--slots, 0) * .08));
}
.eg-slot.soon b { font: 800 1.1rem/1 Orbitron, sans-serif; color: rgba(255,255,255,.14); letter-spacing: .04em; }
.eg-slot.first::after {
  content: "DEVORA · LIVE";
  position: absolute;
  left: .6rem;
  bottom: .55rem;
  z-index: 3;
  padding: .2rem .45rem;
  border-radius: 3px;
  background: rgba(14,15,17,.85);
  color: var(--done);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  opacity: var(--tag, 0);
}
/* The game frame: starts as the whole stage, ends inside the first slot. */
.eg-frame {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #0b0d10;
  box-shadow: 0 40px 90px rgba(0,0,0,.5);
  transform-origin: 0 0;
  will-change: transform;
}
.eg-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eg-hint { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); color: var(--muted); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: calc(1 - var(--p, 0) * 4); pointer-events: none; }
@media (max-width: 900px) {
  .eg-track { height: 240vh; }
  .eg-sticky { grid-template-columns: 1fr; align-content: center; gap: 1.2rem; width: calc(100% - 2.5rem); }
  .eg-line { font-size: clamp(2rem, 9vw, 2.8rem); }
  .eg-sub { font-size: .95rem; }
  .eg-pillars { grid-template-columns: 1fr 1fr 1fr; gap: .35rem; }
  .eg-pillars li { padding: .55rem; }
  .eg-pillars span { display: none; }
  .eg-stage { aspect-ratio: 1.25; }
  .eg-dash { padding: .7rem; gap: .55rem; }
  .eg-top img { height: 16px; }
  .eg-tabs span { font-size: .62rem; padding: .25rem .45rem; }
  .eg-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-track { height: auto; }
  .eg-sticky { position: static; height: auto; padding-block: 4rem; }
}
/* The kicker turns with the headline. */
.eg-kickers { display: grid; }
.eg-kickers .eg-kicker { grid-area: 1 / 1; }
.eg-ka { opacity: var(--a, 1); }
.eg-kb { opacity: var(--b, 0); }
.eg-kb::before { background: var(--accent); }
.eg-me i.skin { overflow: hidden; padding: 0; background: #0b0d10; box-shadow: 0 0 0 1.5px #1fbed4; }
.eg-me i.skin img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ==================== Section refinements ==================== */
/* ---------- 2 · Section numbers removed ---------- */
main > section[data-index]:not(.screen)::after { content: none !important; display: none !important; }
/* ==================== Section refinements: roadmap ==================== */
/* Palette, entry picker, roadmap, next proof point. */
/* =========================================================
   Palette: cyan stays the action colour; violet is the second
   accent; pink, emerald and gold support, each with one job.
   ========================================================= */
:root {
  --accent-2: #8b6bff;          /* platform, progress, the bigger picture */
  --pink: #ff4fd8;              /* the fight */
  --mint: #2ee07f;              /* money, done */
  --gold: #ffb020;              /* status, new */
  --grad: linear-gradient(90deg, #1fbed4, #8b6bff);
}
/* Soft colour fields behind sections, so the page never goes flat. */
.v3-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#live .v3-glow { background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(255,79,216,.07), transparent 70%); }
#flywheel .v3-glow { background: radial-gradient(ellipse 45% 55% at 85% 35%, rgba(139,107,255,.1), transparent 70%); }
#roadmap .v3-glow { background: radial-gradient(ellipse 40% 60% at 8% 40%, rgba(31,190,212,.08), transparent 70%); }
/* Header labels pick up the second accent on platform sections. */
.mode-platform .head small { color: var(--accent-2) !important; }
/* Key highlighted words use the cyan-to-violet gradient. */
.eg-line em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ---------- Roadmap: tighter between phases ---------- */
#roadmap .road { gap: 1rem !important; }
#roadmap .stage.next .tag { color: var(--accent-2) !important; }
/* ==================== Section rhythm ==================== */
/* v3 round 3 — team, roadmap + proof, DEVORA crops, closing band, proof strip, rhythm. */
/* ---------- One rhythm between sections ---------- */
main > section[id]:not(.endgame):not(.invest):not(.waitlist):not(.screen) { padding-block: clamp(3.5rem, 7vw, 5.5rem) !important; }
main > section#live { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
/* ---------- Partners (placeholders until real logos land) ---------- */
.partners { margin-top: 2.2rem !important; }
/* ---------- Side nav: white highlight ---------- */
.rail a.on { background: #fff !important; color: #0e0f11 !important; box-shadow: 0 0 0 1px rgba(255,255,255,.6) !important; }
@media (max-width: 900px) {
  .rail a.on { background: #fff !important; color: #0e0f11 !important; box-shadow: none !important; }
}
.en-track input::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.en-track input::-moz-range-track { height: 6px; background: transparent; }
.en-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(31,190,212,.35), 0 4px 14px rgba(0,0,0,.4); }
.en-track input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(31,190,212,.35), 0 4px 14px rgba(0,0,0,.4); }
.en-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--accent); }
/* ==================== Launcher design system: hero, entry, DEVORA, team, round, investors, footer ==================== */
/* Sections redrawn in the launcher's design system (CR Platform Source Code/launcher/src/styles):
   flat panels, 4–8px corners, no strokes, white pill for the active item, cyan ring + check badge for
   picked cards, a white double ring on hover, Orbitron only for figures. Loaded last. */
:root {
  --tile: #1f2025;
  --tile-hover: #26282d;
  --row-hover: #25262b;
  --pick-rest: rgba(255,255,255,.045);
  --dim: #8d9098;
  --r-xl: 8px;
  --cr-ring: 0 0 0 2px var(--bg), 0 0 0 4px #fff;
  --cr-grad: linear-gradient(90deg, #1fbed4, #8b6bff);
  --cr-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23061216' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* Links without a real URL yet are hidden by site.config.js; make sure button styles don't bring them back. */
[data-link][hidden] { display: none !important; }
/* ---------- Shared launcher pieces ---------- */
.cr-panel { position: relative; min-width: 0; padding: 20px; border-radius: var(--r-xl); background: var(--panel); }
.cr-lab { font: 700 .68rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.cr-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.07); font: 700 .66rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.cr-chip.on { background: rgba(31,190,212,.14); color: var(--accent); }
.cr-chip.ok { background: rgba(46,224,127,.12); color: var(--done); }
.cr-chip.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.cr-btn-xl { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 26px; border: 0; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font: 700 1rem Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.cr-btn-xl:hover { outline: none; box-shadow: var(--cr-ring), 0 10px 30px rgba(31,190,212,.35); transform: translateY(-1px); }
.cr-btn-xl svg, .cr-demo-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.cr-iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r); background: var(--panel-2); color: #fff; cursor: pointer; transition: box-shadow .15s; }
.cr-iconbtn:hover { outline: none; box-shadow: var(--cr-ring); }
.cr-iconbtn svg, .cr-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cr-iconbtn[hidden], .cr-pill[hidden] { display: none; }
.cr-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: var(--r); background: #fff; color: #0e0f11; font: 700 .82rem Inter, sans-serif; cursor: pointer; transition: box-shadow .15s; }
.cr-pill:hover { outline: none; box-shadow: var(--cr-ring); }
.cr-sechead { display: grid; gap: .7rem; max-width: 62rem; margin-bottom: 1.8rem; }
.cr-sechead h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.cr-sechead p:not(.eyebrow) { color: var(--text-2); font-size: 1.05rem; line-height: 1.55; max-width: 52ch; }
.cr-sechead h2 em { font-style: normal; background: var(--cr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cr-demo-btn { display: inline-flex; align-items: center; gap: .55rem; }
.cr-hero-shot { position: relative; z-index: 1; margin: 0; padding: 40px 0 120px; }
.cr-hero-glow { position: absolute; inset: 4% 0 18% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,190,212,.38), rgba(139,107,255,.2) 55%, transparent); filter: blur(40px); animation: cr-breathe 8s ease-in-out infinite; }
.cr-tilt { perspective: 1600px; }
.cr-window { position: relative; overflow: hidden; border-radius: 12px; background: #08090a; transform: rotateY(-17deg) rotateX(7deg) rotateZ(1.5deg); transform-origin: 60% 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.12), -30px 50px 90px rgba(0,0,0,.65), 0 0 90px rgba(31,190,212,.16); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.cr-hero-shot:hover .cr-window { transform: rotateY(-11deg) rotateX(4deg) rotateZ(.8deg); }
.cr-window-bar { display: flex; align-items: center; gap: 8px; height: 30px; padding-left: 12px; background: #08090a; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--dim); font-size: .72rem; font-weight: 600; }
.cr-window-bar img { width: 14px; height: 14px; }
.cr-window-bar span { flex: 1; }
.cr-window-bar i { position: relative; width: 40px; height: 30px; }
.cr-window-bar i::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); }
.cr-window-bar i:nth-of-type(1)::before { height: 1.5px; background: var(--dim); }
.cr-window-bar i:nth-of-type(2)::before { border: 1.5px solid var(--dim); }
.cr-window-bar i:nth-of-type(3)::before { background: linear-gradient(45deg, transparent 45%, var(--dim) 45% 58%, transparent 58%), linear-gradient(-45deg, transparent 45%, var(--dim) 45% 58%, transparent 58%); }
.cr-window-shot { display: block; width: 100%; height: auto; }
.cr-window-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.1), transparent 30%, transparent 70%, rgba(31,190,212,.08)); pointer-events: none; }
.cr-hero-shot figcaption { position: absolute; right: 2%; bottom: -26px; color: var(--dim); font-size: .7rem; }
@keyframes cr-float { 50% { transform: translateY(-6px); } }
@keyframes cr-bob { 50% { transform: translate(6px, -10px); } }
@keyframes cr-breathe { 50% { opacity: .7; transform: scale(1.05); } }
@media (min-width: 901px) {
  #top.screen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); }
}
@media (max-width: 900px) {
  .cr-hero-shot { padding: 24px 0 0; }
  .cr-hero-shot figcaption { position: static; margin-top: 10px; }
}
/* ---------- Entry: one console — buy-in first, then the round plays in the same screen ---------- */
.cr-entry { overflow: hidden; }
.cre-console { overflow: hidden; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.45); }
.cre-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 14px 10px 18px; background: #16171a; border-bottom: 1px solid rgba(255,255,255,.06); }
.cre-bar-l, .cre-bar-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cre-bar-l img { width: 104px; height: auto; }
.cre-screen { position: relative; background: #0f1418; aspect-ratio: 16 / 9; min-height: 540px; }
.cre-screen:fullscreen { aspect-ratio: auto; }
.cre-pre { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); }
.cre-pre[hidden] { display: none; }
.cre-stage {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(31,190,212,.12), transparent 55%), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 46px 46px, #0f1418;
}
.cre-food { position: absolute; inset: 0; }
.cre-food i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: .6; box-shadow: 0 0 10px var(--c); animation: cr-bob 9s ease-in-out infinite; }
.cre-food i:nth-child(3n) { animation-delay: -3s; }
.cre-food i:nth-child(3n+1) { animation-delay: -6s; }
.cre-ring { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; border: 1px solid rgba(31,190,212,.22); }
.cre-ring--2 { width: 250px; height: 250px; margin: -125px 0 0 -125px; border-style: dashed; border-color: rgba(139,107,255,.35); animation: cr-spin 50s linear infinite; }
@keyframes cr-spin { to { transform: rotate(1turn); } }
.cre-me { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: -30px; }
.cre-tag { padding: 4px 10px; border-radius: var(--r); background: rgba(14,15,17,.85); font: 700 .68rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.cre-cell { --s: 185px; position: relative; display: block; width: min(var(--s), 58vw); height: min(var(--s), 58vw); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 calc(var(--s) / 40 + 1px) var(--accent), 0 0 calc(var(--s) / 4) rgba(31,190,212,.45), 0 24px 50px rgba(0,0,0,.45); transition: width .6s cubic-bezier(.22,1,.36,1), height .6s cubic-bezier(.22,1,.36,1); }
.cre-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cre-cell b { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; font: 800 clamp(.9rem, 1.8vw, 1.5rem)/1 Orbitron, sans-serif; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
/* Game-HUD style readout along the bottom of the stage. */
.cre-readout { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; display: flex; gap: 8px; }
.cre-readout span { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-lg); background: rgba(14,15,17,.82); backdrop-filter: blur(6px); }
.cre-readout small { font: 700 .6rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cre-readout b { color: #fff; font: 800 .9rem Orbitron, sans-serif; letter-spacing: .02em; }
.cre-readout span:last-child b { font-family: Inter, sans-serif; font-weight: 700; }
.cre-controls { display: flex; flex-direction: column; gap: 18px; padding: 22px; background: var(--panel); border-left: 1px solid rgba(255,255,255,.06); overflow: auto; }
.cre-figure { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cre-stake { display: grid; gap: 4px; }
.cre-stake b { font: 800 2.9rem/1 Orbitron, sans-serif; color: #fff; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cre-mass { white-space: nowrap; color: var(--muted); font-size: .88rem; }
.cre-mass b { color: var(--accent); font: 800 1.2rem Orbitron, sans-serif; }
.cre-slider { display: grid; gap: 6px; }
.cre-track { position: relative; height: 26px; margin: 0 11px; }
.cre-track::before { content: ""; position: absolute; left: -11px; right: -11px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(255,255,255,.08); }
.cre-track > i { position: absolute; left: -11px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--cr-grad); transition: width .25s cubic-bezier(.22,1,.36,1); }
.cre-track > b { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(255,255,255,.25); pointer-events: none; }
.cre-track > b.on { background: rgba(255,255,255,.75); }
/* padding/border reset: the site's text-input style (padding 0 1.1rem) would otherwise shrink the thumb's travel, so it stopped short of both ends */
.cre-track input, .en-track input { padding: 0; border: 0; border-radius: 0; min-width: 0; flex: none; }
.cre-track input { position: absolute; left: -11px; top: 0; width: calc(100% + 22px); height: 26px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: grab; }
.cre-track input:active { cursor: grabbing; }
.cre-track input::-webkit-slider-runnable-track { height: 26px; background: transparent; }
.cre-track input::-moz-range-track { background: transparent; }
.cre-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(31,190,212,.35), 0 4px 14px rgba(0,0,0,.4); }
.cre-track input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(31,190,212,.35); }
.cre-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--accent); }
.cre-ends { display: flex; justify-content: space-between; color: var(--dim); font-size: .76rem; }
.cre-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.cre-tiers button { position: relative; display: grid; gap: 5px; justify-items: center; padding: 15px 2px; border: 0; border-radius: var(--r-lg); background: var(--tile); color: var(--muted); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s, transform .15s; }
.cre-tiers button:hover { background: var(--tile-hover); }
.cre-tiers button:active { transform: scale(.97); }
.cre-tiers button[aria-pressed="true"] { background: #2a2b31; color: #fff; box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px rgba(31,190,212,.16); }
.cre-tiers button[aria-pressed="true"]::after { content: ""; position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent) var(--cr-check) center / 9px no-repeat; }
.cre-tiers b { font: 800 .8rem/1 Orbitron, sans-serif; color: #fff; letter-spacing: .02em; }
.cre-tiers small { font-size: .62rem; font-variant-numeric: tabular-nums; }
.cre-tiers button[aria-pressed="true"] small { color: var(--text-2); }
.cre-note { color: var(--dim); font-size: .78rem; line-height: 1.45; }
.cre-controls .cr-btn-xl { width: 100%; }
.cre-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; display: block; background: #0f1418; }
/* The game is laid out for a full window, as in the launcher: render it at that size and scale it down to the console. */
/* --z is set from JS so the game always lays out at the launcher's height (860px). */
.cre-frame { --z: .6; width: calc(100% / var(--z)); height: calc(100% / var(--z)); transform: scale(var(--z)); transform-origin: 0 0; }
.cre-console.is-playing { box-shadow: 0 0 0 1px rgba(31,190,212,.35), 0 40px 90px rgba(0,0,0,.45), 0 0 60px rgba(31,190,212,.12); }
@media (max-width: 900px) {
  .cre-screen { aspect-ratio: auto; min-height: 0; }
  .cre-pre { position: static; grid-template-columns: 1fr; }
  .cre-stage { min-height: 340px; }
  .cre-ring { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .cre-ring--2 { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
  .cre-controls { border-left: 0; border-top: 1px solid rgba(255,255,255,.06); }
  .cre-bar-l .cr-chip:nth-of-type(1) { display: none; }
}
@media (max-width: 560px) {
  .cre-controls { padding: 14px; }
  .cre-tiers { gap: 4px; }
  .cre-tiers b { font-size: .66rem; }
  .cre-tiers small { font-size: .56rem; }
  .cre-readout { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
  .cre-readout span { padding: 6px 9px; }
}
/* ---------- Team ---------- */
.crm { display: grid; grid-template-columns: minmax(250px, .36fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.crm-list { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-xl); background: var(--panel); }
.crm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border: 0; border-radius: var(--r-lg); background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
.crm-av { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 50%; background: var(--panel-2); }
.crm-av img, .crm-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crm-av.is-initials, .crm-pic.is-initials { background: var(--c); color: rgba(0,0,0,.6); font: 800 .8rem Inter, sans-serif; }
.crm-meta { display: grid; gap: 1px; min-width: 0; }
.crm-meta b { color: #fff; font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-meta small { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-no { font: 800 .68rem Orbitron, sans-serif; color: var(--dim); letter-spacing: .06em; }
/* Selected member: the launcher's active item, a solid white row with dark text. */
.crm-row[aria-selected="true"] { background: #fff; }
.crm-row[aria-selected="true"] .crm-meta b { color: #0e0f11; }
.crm-row[aria-selected="true"] .crm-meta small { color: #4a4c52; }
.crm-row[aria-selected="true"] .crm-no { color: #0e0f11; }
.crm-row[aria-selected="true"] .crm-av { box-shadow: 0 0 0 2px #0e0f11; }
.crm-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; align-items: stretch; padding: 14px; }
.crm-photo { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #0f1418; aspect-ratio: 1; align-self: start; }
.crm-pic { position: absolute; inset: 0; display: grid; place-items: center; }
.crm-pic.is-initials { font-size: 3rem; }
.crm-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, rgba(14,15,17,.55), transparent); pointer-events: none; }
.crm-info { display: flex; flex-direction: column; gap: 18px; padding: 10px 10px 10px 0; min-width: 0; }
.crm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crm-nav { display: flex; gap: 6px; }
.crm-text { display: grid; gap: 10px; margin-top: auto; margin-bottom: auto; }
.crm-text h3 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.crm-bio { color: var(--text-2); font-size: 1rem; line-height: 1.65; max-width: 52ch; }
.crm-card.swap .crm-pic, .crm-card.swap .crm-text { animation: cr-swap .45s cubic-bezier(.22,1,.36,1); }
@keyframes cr-swap { from { opacity: 0; transform: translateY(8px); } }
.cr-team .partners { margin-top: 18px; }
@media (max-width: 900px) {
  .crm { grid-template-columns: 1fr; }
  .crm-list { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .crm-no { display: none; }
  .crm-card { grid-template-columns: 1fr; }
  .crm-photo { aspect-ratio: 4 / 3; }
  .crm-info { padding: 0 6px 6px; }
}
/* ---------- The round: built like launcher Missions. Flat panels, solid colours, no gradients. ---------- */
main > section.cr-invest, main > section.cr-contact { width: auto; margin-inline: 0 !important; }
.cr-invest .eyebrow { color: var(--accent); }
.cr-invest .eyebrow::before { border-radius: 50%; }
.crn-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.crn-intro { display: grid; gap: 12px; justify-items: start; max-width: 48rem; }
.crn-intro h3 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.crn-intro h3 em { font-style: normal; color: var(--accent); }
.crn-intro p { color: var(--text-2); font-size: 1.05rem; line-height: 1.55; max-width: 52ch; }
/* Milestones: the "Getting started" panel. */
.crn-panel { display: grid; gap: 18px; padding: 20px 22px 22px; border-radius: var(--r-xl); background: #16171a; }
.crn-panel-head { display: flex; align-items: center; justify-content: space-between; }
.crn-count { color: var(--muted); font: 800 .74rem Orbitron, sans-serif; letter-spacing: .06em; }
.crn-count b { color: #fff; }
.crn-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* The line: green through the done steps, grey after. */
.crn-track li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.crn-track li + li::before { content: ""; position: absolute; top: 19px; right: calc(50% + 24px); left: calc(-50% + 24px); height: 2px; background: rgba(255,255,255,.1); }
.crn-track li.is-done + li::before { background: var(--done); }
.crn-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1f2025; color: var(--muted); font: 800 .8rem Orbitron, sans-serif; }
.crn-dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.crn-track li.is-done .crn-dot { background: transparent; color: var(--done); box-shadow: inset 0 0 0 2px var(--done); }
.crn-track li.is-now .crn-dot { background: #fff; color: #0e0f11; box-shadow: 0 0 0 4px #16171a, 0 0 0 6px rgba(255,255,255,.3), 0 0 18px rgba(255,255,255,.25); }
.crn-track li b { color: var(--muted); font-size: .86rem; font-weight: 600; }
.crn-track li.is-done b { color: var(--text-2); }
.crn-track li.is-now b { color: #fff; font-weight: 800; }
/* The outcome. */
.crn-goal { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px 18px; border-radius: var(--r-xl); background: var(--panel); }
.crn-goal-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(46,224,127,.12); color: var(--done); }
.crn-goal-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.crn-goal-text { display: grid; gap: 2px; }
.crn-goal-text b { color: #fff; font-size: 1.1rem; }
@media (max-width: 760px) {
  .crn-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .crn-track li:nth-child(4)::before { display: none; }
}
/* ---------- Team: each member is a separate tab ---------- */
.crm-list { gap: 8px; padding: 0; background: transparent; }
.crm-row { padding: 10px 14px 10px 10px; border-radius: var(--r-xl); background: var(--panel); }
.crm-row:hover { background: var(--row-hover); }
.crm-row[aria-selected="true"] { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.crm-av { width: 42px; height: 42px; }
@media (max-width: 900px) {
  .crm-list { grid-auto-columns: minmax(210px, 1fr); padding-bottom: 4px; }
}
/* ---------- Hero, round 4: a thick launcher screen that follows the pointer, two small cards ---------- */
.cr-hero-shot { padding: 30px 0 70px; }
.cr-tilt { --mx: 0; --my: 0; perspective: 1500px; animation: cr-drift 9s ease-in-out infinite; }
@keyframes cr-drift { 50% { transform: translateY(-10px); } }
/* The screen as a slab: layered shadows down and to the right read as its side and base. */
.cr-window {
  transform: rotateY(calc(-18deg + var(--mx) * 8deg)) rotateX(calc(8deg - var(--my) * 6deg)) rotateZ(1.2deg);
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  box-shadow:
  0 0 0 1px rgba(255,255,255,.14),
  1px 1px 0 #1b2b31, 2px 2px 0 #1a2a30, 3px 3px 0 #18272c, 4px 4px 0 #172428, 5px 5px 0 #152125,
  6px 6px 0 #141e22, 7px 7px 0 #121b1f, 8px 8px 0 #11181b, 9px 9px 0 #0f1518, 10px 10px 0 #0e1316,
  11px 11px 0 #0d1114, 12px 12px 0 #0c1012, 13px 13px 1px rgba(31,190,212,.35),
  -20px 60px 90px rgba(0,0,0,.7), 0 0 110px rgba(31,190,212,.18);
}
.cr-hero-shot:hover .cr-window { transform: rotateY(calc(-12deg + var(--mx) * 8deg)) rotateX(calc(5deg - var(--my) * 6deg)) rotateZ(.6deg); }
/* A light sweep across the glass every few seconds. */
.cr-window-sheen { background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 30%, transparent 70%, rgba(31,190,212,.08)); }
.cr-window-sheen::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 18%; left: -30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg); animation: cr-sweep 6s ease-in-out infinite; }
@keyframes cr-sweep { 0%, 55% { left: -30%; } 100% { left: 130%; } }
/* A reflection of the screen on the arena floor. */
.cr-tilt::after { content: ""; position: absolute; left: 12%; right: 6%; bottom: -46px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(31,190,212,.28), transparent); filter: blur(14px); pointer-events: none; }
.cr-tilt { position: relative; }
.cr-hero-shot figcaption { right: 2%; bottom: -30px; top: auto; }
@media (max-width: 900px) {
  .cr-hero-shot { padding: 18px 0 0; }
  .cr-window { transform: rotateY(-10deg) rotateX(5deg); }
  .cr-hero-shot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cr-hero-shot > .cr-tilt, .cr-hero-shot > figcaption, .cr-hero-shot > span { grid-column: 1 / -1; }
  .cr-tilt::after { display: none; }
}
/* The stage: the current moment, large. */
/* Four cards: the active one is white with its progress bar. */
/* ---------- Roadmap: the same timeline, in the launcher's finish ---------- */
#roadmap .road { max-width: none; gap: 1.4rem; --when: 12rem; --rail: 34px; --node: 28px; --node-top: 1.1rem; }
#roadmap .road::before { width: 4px; left: calc(var(--when) + var(--gap-x) + (var(--rail) - 4px) / 2); box-shadow: 0 0 18px rgba(31,190,212,.25); }
#roadmap .stage .when { padding-top: .9rem; }
#roadmap .stage .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: .62rem; }
#roadmap .stage.done .tag { background: rgba(46,224,127,.12); }
#roadmap .stage.now .tag { background: rgba(31,190,212,.14); }
#roadmap .stage .when h3 { margin-top: .5rem; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -.025em; }
#roadmap .stage.later .when h3 { color: var(--muted); }
#roadmap .stage .road-node { width: var(--node); height: var(--node); border-width: 2px; background: #1b1c20; box-shadow: 0 0 0 6px var(--bg); }
#roadmap .stage.done .road-node { font-size: .8rem; box-shadow: 0 0 0 6px var(--bg), 0 0 18px rgba(46,224,127,.5); }
#roadmap .stage.now .road-node { position: relative; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px var(--bg), 0 0 24px rgba(31,190,212,.6); animation: none; }
#roadmap .stage.now .road-node::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: cr-ping 2.4s ease-out infinite; }
#roadmap .stage-tags { position: relative; overflow: hidden; padding: 1.2rem 1.3rem; border-radius: 8px; background: var(--panel) !important; box-shadow: none !important; transition: transform .2s; }
#roadmap .stage-tags:hover { transform: translateX(4px); }
/* Done and now: the launcher's featured surface, a tinted fill with a glowing right edge. */
#roadmap .stage.done .stage-tags { background: linear-gradient(100deg, rgba(46,224,127,.14), #1a1c21 70%) !important; }
#roadmap .stage.now .stage-tags { background: linear-gradient(100deg, rgba(31,190,212,.2), #1a1c21 70%) !important; }
#roadmap .stage.done .stage-tags::after, #roadmap .stage.now .stage-tags::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--done); box-shadow: 0 0 16px var(--done); }
#roadmap .stage.now .stage-tags::after { background: var(--accent); box-shadow: 0 0 16px var(--accent); }
#roadmap .stage ul { gap: .45rem; }
#roadmap .stage li { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem .55rem .7rem; border-radius: 6px; background: #26282d; font-size: .9rem; color: var(--text-2); }
#roadmap .stage li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); flex: none; }
#roadmap .stage.done li, #roadmap .stage.now li.is-done { padding: .55rem .9rem .55rem .7rem; border-radius: 6px; color: #fff; background: rgba(46,224,127,.12); box-shadow: none; }
#roadmap .stage.done li::before, #roadmap .stage.now li.is-done::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306140c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; box-shadow: none; font-size: 0; }
#roadmap .stage.now li:not(.is-done)::before { box-shadow: inset 0 0 0 1.5px var(--accent); }
#roadmap .stage.later li { color: var(--muted); background: #222328; }
@media (max-width: 760px) {
  #roadmap .road { --when: 7rem; }
  #roadmap .stage .when h3 { font-size: 1.05rem; }
}
/* The founders: launcher player cards. */
.cio-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 420px) {
  .cio-founders { gap: 8px; }
}
/* ---------- Questions: a side note and a launcher-style accordion ---------- */
main > section.cr-faq { width: auto; margin-inline: 0 !important; }
.fq { display: grid; grid-template-columns: minmax(240px, .36fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fq-side { position: sticky; top: 80px; display: grid; justify-items: start; gap: 12px; padding: 22px; border-radius: var(--r-xl); background: #16171a; }
.fq-side h3 { color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.fq-side p { color: var(--muted); font-size: .92rem; line-height: 1.6; }
.fq-list { display: grid; gap: 8px; }
.fq-item { border-radius: var(--r-xl); background: var(--panel); transition: background .2s; }
.fq-item:hover { background: var(--row-hover); }
.fq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 16px 16px 18px; border: 0; background: none; color: #fff; font: 700 1rem Inter, sans-serif; text-align: left; cursor: pointer; }
.fq-no { flex: none; color: var(--dim); font: 800 .7rem Orbitron, sans-serif; letter-spacing: .06em; }
.fq-q > span:nth-child(2) { flex: 1; }
.fq-icon { position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r); background: var(--panel-2); transition: background .2s; }
.fq-icon::before, .fq-icon::after { content: ""; position: absolute; width: 12px; height: 2px; border-radius: 1px; background: #fff; transition: transform .25s cubic-bezier(.22,1,.36,1), background .2s; }
.fq-icon::after { transform: rotate(90deg); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1); }
.fq-a > div { overflow: hidden; }
.fq-a p { padding: 0 18px 18px 52px; color: var(--text-2); font-size: .95rem; line-height: 1.6; max-width: 70ch; }
/* Open: the launcher's active state, a white control. */
.fq-item.is-open { background: #222328; }
.fq-item.is-open .fq-no { color: var(--accent); }
.fq-item.is-open .fq-icon { background: #fff; }
.fq-item.is-open .fq-icon::before, .fq-item.is-open .fq-icon::after { background: #0e0f11; }
.fq-item.is-open .fq-icon::after { transform: rotate(0deg); }
.fq-item.is-open .fq-a { grid-template-rows: 1fr; }
@media (max-width: 900px) {
  .fq { grid-template-columns: 1fr; }
  .fq-side { position: static; }
}
@media (max-width: 560px) {
  .fq-a p { padding-left: 18px; }
  .fq-no { display: none; }
}
/* ---------- Footer: one flat panel and a bottom bar ---------- */
main > footer.site-foot.cr-foot { width: auto; margin: clamp(2rem, 5vw, 4rem) 0 0 !important; padding: 0 0 28px; border: 0; background: transparent; }
main > footer.site-foot.cr-foot::before { content: none; }
.cr-foot .wrap { display: grid; gap: 14px; }
@media (prefers-reduced-motion: reduce) {
  .cr-tilt, .cr-window-sheen::after, #roadmap .stage.now .road-node::after { animation: none; }
}
/* Round 4 fixes: the done phase keeps its filled node; the hero DEVORA card shows the cells clear of the logo. */
#roadmap .stage.done .road-node { background: var(--done); border-color: var(--done); color: var(--on-done); }
/* Team: the selected member's card matches the height of the member tabs. */
@media (min-width: 901px) {
  .crm { align-items: stretch; }
  .crm-card { align-items: stretch; }
  .crm-photo { aspect-ratio: auto; align-self: stretch; height: auto; min-height: 0; }
}
/* Choose your entry: a shorter console. */
@media (min-width: 901px) {
  .cre-screen { aspect-ratio: auto; height: 520px; min-height: 0; }
  .cre-controls { gap: 14px; padding: 18px 20px; }
  .cre-stake b { font-size: 2.4rem; }
  .cre-tiers button { padding: 11px 2px; }
  .cre-controls .cr-btn-xl { margin-top: auto; height: 52px; }
  .cre-ring { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
  .cre-ring--2 { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .cre-cell { width: min(var(--s), 200px); height: min(var(--s), 200px); }
}
.cr-entry .cr-sechead { margin-bottom: 1.3rem; }
/* Meet DEVORA: room for the buy-in range. */
/* ---------- Hero, round 9: the screen, its status in the title bar, and one DEVORA app tile ---------- */
.cr-hero-shot { padding: 30px 0 60px; }
.cr-window-bar { gap: 10px; }
.cr-window-bar span { flex: 0 1 auto; color: var(--text-2); }
.hx-status { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; height: 18px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font: 700 .58rem Inter, sans-serif; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.hx-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 6px #ffb020; animation: cr-blink 1.8s ease-in-out infinite; }
@keyframes hx-drift { 50% { transform: translate(5px, -6px); } }
.cr-hero-shot figcaption { right: 2%; bottom: -24px; }
@media (prefers-reduced-motion: reduce) {
  .hx-status::before { animation: none; }
}
/* ---------- Roadmap, round 9: no edge lines; one colour system (green done, white now, grey after) ---------- */
#roadmap .stage.done .stage-tags::after, #roadmap .stage.now .stage-tags::after { content: none; }
#roadmap .road::before { width: 2px; left: calc(var(--when) + var(--gap-x) + (var(--rail) - 2px) / 2); box-shadow: none; background: linear-gradient(180deg, var(--done) 0 30%, rgba(255,255,255,.12) 30%); }
#roadmap .stage-tags, #roadmap .stage.done .stage-tags, #roadmap .stage.now .stage-tags, #roadmap .stage.next .stage-tags { background: var(--panel) !important; }
#roadmap .stage.now .stage-tags { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important; }
#roadmap .stage.later .stage-tags { background: #18191d !important; }
#roadmap .stage-tags:hover { transform: none; background: var(--row-hover) !important; }
#roadmap .stage .road-node { background: var(--bg); border: 2px solid #3a3b41; box-shadow: 0 0 0 6px var(--bg); }
#roadmap .stage.done .road-node { background: var(--bg); border-color: var(--done); color: var(--done); box-shadow: 0 0 0 6px var(--bg); }
#roadmap .stage.now .road-node { background: #fff; border-color: #fff; box-shadow: 0 0 0 6px var(--bg), 0 0 0 8px rgba(255,255,255,.25); }
#roadmap .stage.now .road-node::after { border-color: rgba(255,255,255,.6); }
#roadmap .stage .tag { background: rgba(255,255,255,.07); color: var(--muted); }
#roadmap .stage.done .tag { background: rgba(46,224,127,.12); color: var(--done); }
#roadmap .stage.now .tag { background: #fff; color: #0e0f11; }
#roadmap .stage.now li:not(.is-done)::before { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
#roadmap .stage li, #roadmap .stage.done li, #roadmap .stage.now li.is-done { background: var(--tile); color: var(--text-2); }
#roadmap .stage.done li, #roadmap .stage.now li.is-done { color: #fff; }
#roadmap .stage.next .tag { color: var(--muted) !important; }
/* ---------- Footer: a full-width band, plain columns ---------- */
main > footer.site-foot.cr-foot { width: auto; margin: clamp(2rem, 5vw, 4rem) 0 0 !important; padding: 0; border: 0; background: #0a0b0d; position: relative; }
main > footer.site-foot.cr-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(31,190,212,.6), rgba(139,107,255,.6), transparent); }
.cr-foot .wrap { display: block; }
.crf2 { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); padding: clamp(40px, 6vw, 64px) 0 clamp(28px, 4vw, 40px); }
.crf2-brand { display: grid; align-content: start; gap: 16px; }
.crf2-logo img { width: 170px; height: auto; display: block; }
.crf2-brand p { max-width: 40ch; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.crf2-status { display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(46,224,127,.1); color: var(--done); font-size: .78rem; font-weight: 700; }
.crf2-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: cr-blink 2s ease-in-out infinite; }
@keyframes cr-blink { 50% { opacity: .35; } }
.crf2-col { display: grid; align-content: start; gap: 12px; }
.crf2-col h3 { margin: 0 0 4px; color: #fff; font: 700 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.crf2-col a { justify-self: start; color: var(--muted); font-size: .92rem; text-decoration: none; transition: color .15s, transform .15s; }
.crf2-col a:hover { outline: none; color: #fff; transform: translateX(3px); }
.crf2-bottom { display: grid; gap: 16px; padding: 20px 0 28px; border-top: 1px solid rgba(255,255,255,.07); }
.crf2-legal { color: var(--dim); font-size: .8rem; line-height: 1.55; }
.crf2-legal b { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; margin-right: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,107,74,.6); color: #ff8a6f; font: 800 .62rem Orbitron, sans-serif; }
.crf2-bar { display: flex; align-items: center; gap: 20px; color: var(--dim); font-size: .84rem; }
.crf2-bar .foot-legal { display: flex; gap: 16px; }
.crf2-bar .foot-legal a { color: var(--muted); text-decoration: none; }
.crf2-top { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-weight: 600; text-decoration: none; transition: color .15s; }
.crf2-top:hover { color: #fff; }
.crf2-top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .crf2 { grid-template-columns: 1fr 1fr 1fr; }
  .crf2-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .crf2 { grid-template-columns: 1fr 1fr; }
  .crf2-bar { flex-wrap: wrap; gap: 12px; }
}
.crm-in { justify-self: start; margin-top: 4px; gap: 8px; }
.crm-in svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.crm-in[hidden] { display: none; }
.crn-intro { max-width: 62rem; }
.crn-intro p { max-width: 60ch; }
.cr-pill.crm-in { background: var(--panel-2); color: #fff; }
.cr-pill.crm-in:hover { background: var(--row-hover); }
.dxg-fact { display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(31,190,212,.12); color: var(--accent); font: 700 .7rem Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
/* One screen, looping through the round; the steps beside it say what is happening. */
.dxl { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(0, 1.55fr); gap: 14px; align-items: stretch; }
.dxl-screen { position: relative; align-self: start; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-xl); background: #10171c; }
.dxl-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(calc(var(--z, 1) * 1.04)); transform-origin: var(--fx, 50%) var(--fy, 50%); transition: opacity .6s ease, transform 5s linear; }
.dxl-screen img.on { opacity: 1; transform: scale(var(--z, 1)); }
@media (max-width: 900px) {
  .dxl { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dxl-screen img { transition: none; }
}
/* Left: the game, then the step on screen. */
.dxl-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dxl-id { display: grid; gap: 14px; justify-items: start; padding: 22px; border-radius: var(--r-xl); background: var(--panel); }
.dxl-id p { color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.dxl-card { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; border-radius: var(--r-xl); background: var(--panel); }
.dxl-body { display: grid; justify-items: start; gap: 8px; margin-top: 24px; }
.dxl-kicker { color: var(--muted); font: 700 .66rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.dxl-body h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.dxl-body p { color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.dxl-body .dxg-fact { margin-top: 6px; font-style: normal; }
.dxl-body.swap > * { animation: cr-swap .5s cubic-bezier(.22,1,.36,1) both; }
.dxl-body.swap > :nth-child(2) { animation-delay: .04s; }
.dxl-body.swap > :nth-child(3) { animation-delay: .08s; }
@media (max-width: 900px) {
  .dxl-side { display: contents; }
  .dxl-id { order: 0; }
  .dxl-screen { order: 1; }
  .dxl-card { order: 2; }
}
@media (max-width: 560px) {
  .dxl-id, .dxl-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dxl-body.swap > * { animation: none; }
}
/* The step card as a deck: two card edges under it, a ring that fills as the moment plays, dots for the
   four steps, and the next card waiting at the bottom. */
.dxd { position: relative; gap: 18px; margin-bottom: 12px; }
.dxd::before, .dxd::after { content: ""; position: absolute; z-index: -1; left: 12px; right: 12px; bottom: -6px; height: 24px; border-radius: 0 0 var(--r-xl) var(--r-xl); background: #18191d; }
.dxd::after { left: 24px; right: 24px; bottom: -12px; background: #141518; }
.dxd-top { display: flex; align-items: center; gap: 12px; }
.dxd-ring { position: relative; flex: none; width: 46px; height: 46px; }
.dxd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dxd-ring circle { fill: none; stroke-width: 3; }
.dxd-ring .bg { stroke: rgba(255,255,255,.1); }
.dxd-ring .fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
.dxd-ring b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 .8rem Orbitron, sans-serif; }
.dxd-dots { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dxd-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.18); cursor: pointer; transition: width .3s cubic-bezier(.22,1,.36,1), background .2s; }
.dxd-dot:hover { background: rgba(255,255,255,.4); }
.dxd-dot[aria-selected="true"] { width: 24px; background: var(--accent); }
.dxd .dxl-body { margin-top: 0; gap: 8px; }
.dxd .dxl-body.swap > * { animation: dxd-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes dxd-in { from { opacity: 0; transform: translateX(18px); } }
@media (prefers-reduced-motion: reduce) {
  .dxd .dxl-body.swap > * { animation: none; }
  .dxd-dot { transition: none; }
}
/* The screen fills the height of the column beside it; on phones it keeps the game's 16:10. */
.dxl-screen { align-self: stretch; aspect-ratio: auto; min-height: 420px; }
@media (max-width: 900px) {
  .dxl-screen { aspect-ratio: 16 / 10; min-height: 0; }
}
/* ---------- Team card: the operator, their colour, and a short track record ---------- */
.crm-card { --mc: var(--accent); }
.crm-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc) 75%, transparent); pointer-events: none; transition: box-shadow .3s; }
.crm-op { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--mc) 14%, transparent); color: var(--mc); font: 700 .64rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.crm-op i { width: 7px; height: 7px; border-radius: 50%; background: var(--mc); box-shadow: 0 0 8px var(--mc); }
.crm-op b { color: #fff; font: 800 .74rem Orbitron, sans-serif; letter-spacing: .04em; }
.crm-count { color: var(--dim); font: 800 .7rem Orbitron, sans-serif; letter-spacing: .06em; }
.crm-text .eyebrow { color: var(--mc); }
.crm-text .eyebrow::before { background: var(--mc); }
.crm-rec { display: grid; gap: 8px; margin-top: 8px; }
.crm-rec[hidden] { display: none; }
.crm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-chips span { padding: 5px 10px; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); color: var(--text-2); font-size: .78rem; font-weight: 600; }
.crm-chips span:first-child { background: color-mix(in srgb, var(--mc) 14%, transparent); box-shadow: none; color: #fff; }
.crm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.crm-foot .crm-in { margin-top: 0; }
.crm-foot .crm-in[hidden] + .crm-nav { margin-left: auto; }
.crm-card.swap .crm-op { animation: cr-swap .45s cubic-bezier(.22,1,.36,1); }
/* ---------- Where we are: the milestone in progress ---------- */
.crn-now { overflow: hidden; border-radius: var(--r-xl); background: var(--panel-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.crn-now-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); }
.crn-now-tag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; color: #0e0f11; font: 800 .66rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.crn-now-tag i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #0e0f11; }
.crn-now-tag i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(14,15,17,.5); animation: crn-ping 1.8s ease-out infinite; }
@keyframes crn-ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.crn-now-step { color: var(--muted); font: 700 .7rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.crn-now-step b { color: #fff; font: 800 .8rem Orbitron, sans-serif; letter-spacing: .02em; }
.crn-now-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; padding: 22px 22px 22px; }
.crn-now-text { display: grid; align-content: start; justify-items: start; gap: 8px; min-width: 0; }
.crn-now-text h4 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.crn-now-text p { color: var(--text-2); font-size: .98rem; line-height: 1.55; max-width: 48ch; }
.crn-now-scope { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.crn-now-scope li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: .8rem; font-weight: 600; }
.crn-now-scope li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .7; }
.crn-now-side { display: grid; align-content: start; gap: 8px; min-width: 0; }
.crn-now-done { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: rgba(14,15,17,.55); }
.crn-now-done > span:last-child { display: grid; gap: 4px; }
.crn-now-done b { color: #fff; font-size: .95rem; font-weight: 600; line-height: 1.45; }
.crn-now-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
.crn-now-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.crn-now-next { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-lg); background: rgba(14,15,17,.3); }
.crn-now-next b { color: var(--text-2); font-size: .9rem; }
.crn-now-next svg { width: 15px; height: 15px; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .crn-now-body { grid-template-columns: 1fr; padding: 18px; }
  .crn-now-head { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .crn-now-tag i::after { animation: none; }
}
/* A pointer from the active node down into the panel, so the panel reads as that milestone opened up. */
.crn-panel { position: relative; }
.crn-now { position: relative; overflow: visible; margin-top: 18px; }
.crn-now::before { content: ""; position: absolute; top: -8px; left: var(--now-x, 25%); width: 14px; height: 14px; margin-left: -7px; background: var(--panel-2); border-left: 1px solid rgba(255,255,255,.14); border-top: 1px solid rgba(255,255,255,.14); transform: rotate(45deg); }
.crn-now-head { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.crf2-col a { display: inline-flex; align-items: center; gap: 5px; }
.crf2-ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.crf2-col a:hover .crf2-ext { opacity: 1; }
@media (max-width: 1100px) {
  .crf2 { grid-template-columns: 1fr 1fr 1fr; }
  .crf2-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .crf2 { grid-template-columns: 1fr 1fr; }
}
/* ---------- Navbar and hero: whitepaper as the call to action; the demo console wears the DEVORA wordmark ---------- */
.cr-wp-btn { display: inline-flex; align-items: center; gap: 8px; }
.cr-wp-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cre-bar-l img.cre-logo { width: 116px; height: auto; }
@media (max-width: 560px) {
  .chip-btn--discord { display: none; }
}
/* Now panel in the site's own language: flat panels, no outlines, tiles inside. */
.crn-now { background: var(--panel); box-shadow: none; }
.crn-now::before { background: var(--panel); border: 0; }
.crn-now-head { padding: 16px 22px 0; background: none; border-bottom: 0; }
.crn-now-body { padding: 14px 22px 22px; }
.crn-now-scope li { background: var(--tile); color: var(--text-2); }
.crn-now-done { background: var(--tile); }
.crn-now-ico { background: #fff; color: #0e0f11; }
.crn-now-next { background: var(--tile); }
.crn-now-next:hover { background: var(--row-hover); }
.dxl-rail { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r-xl); background: rgba(14,15,17,.92); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.dxl-r { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 40px; padding: 0 10px; overflow: hidden; border: 0; border-radius: var(--r-lg); background: transparent; color: var(--muted); font: 700 .84rem Inter, sans-serif; cursor: pointer; transition: background .25s, color .25s; }
.dxl-r svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dxl-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dxl-r i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.dxl-r:hover { color: #fff; }
.dxl-r.past { color: var(--text-2); }
.dxl-r.past svg { color: var(--done); }
.dxl-again svg { display: block; width: 14px; height: 14px; fill: none; stroke: var(--dim); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dxl-again { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: 2px; border-radius: 50%; background: var(--tile); }
.dxl-again svg { stroke: var(--accent); }
@media (max-width: 640px) {
  .dxl-r span { display: none; }
  .dxl-r { gap: 0; }
  .dxl-rail { left: 8px; right: 8px; bottom: 8px; }
}
/* ---------- Section openings: numbered chapters ---------- */
.head.chap-head { display: grid; gap: 14px; justify-items: start; margin-bottom: 1.8rem; }
.chap-head .chap { display: flex; align-items: center; gap: 14px; width: 100%; }
.chap-no { color: var(--accent); font: 800 .82rem/1 Orbitron, sans-serif; letter-spacing: .06em; padding: 7px 10px; border-radius: var(--r-lg); background: rgba(31,190,212,.12); }
.chap-head .chap-lab, .mode-platform .chap-head .chap-lab, .mode-game .chap-head .chap-lab { display: inline-flex !important; margin: 0; color: #fff !important; font: 700 .72rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.chap-head .chap-lab.eyebrow::before { display: none; }
.chap-rule { position: relative; flex: 1; height: 1px; background: rgba(255,255,255,.08); overflow: hidden; }
.chap-rule i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(.22,1,.36,1) .15s; }
.chap-head.in .chap-rule i { transform: scaleX(.18); }
.head.chap-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; }
.chap-w { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1); transition-delay: calc(.12s + var(--i) * .06s); }
.chap-head.in .chap-w { opacity: 1; transform: none; }
.chap-no, .chap-lab { opacity: 0; transform: translateX(-8px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.chap-head.in .chap-no, .chap-head.in .chap-lab { opacity: 1; transform: none; }
.chap-head.in .chap-lab { transition-delay: .06s; }
/* The demo section keeps its larger lead-in. */
.cr-sechead.chap-head { gap: 14px; }
@media (prefers-reduced-motion: reduce) {
  .chap-w, .chap-no, .chap-lab, .chap-rule i { transition: none; }
}
/* Under a chapter heading, a section's own intro headline steps down a size. */
.crn-intro h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.crn-top { margin-top: -6px; }
/* Now panel colour: each part carries a colour from the site's palette. */
.crn-now-head { padding-bottom: 2px; }
.crn-now-tag { background: linear-gradient(#fff, #fff); }
.crn-now-text h4 { background: none; }
.crn-now-scope li { gap: 7px; padding: 6px 12px 6px 8px; background: color-mix(in srgb, var(--sc) 12%, var(--tile)); color: #fff; }
.crn-now-scope li::before { display: none; }
.crn-now-scope svg { width: 15px; height: 15px; fill: none; stroke: var(--sc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.crn-now-done { background: rgba(255,176,32,.09); }
.crn-now-done .cr-lab { color: var(--gold, #ffb020); }
.crn-now-ico { background: #ffb020; color: #1a1000; }
.crn-now-next { background: rgba(139,107,255,.1); }
.crn-now-next .cr-lab { color: #a58cff; }
.crn-now-next svg { stroke: #a58cff; }
.crn-now-step b { color: var(--accent); }
/* Rail: a footer button after a short divider, marking the end of the page. */
.rail-sep { flex: none; width: 20px; height: 2px; margin: 4px auto; border-radius: 1px; background: rgba(255,255,255,.12); }
.rail a.rail-foot { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.rail a.rail-foot:hover { box-shadow: 0 0 0 2px #fff; }
.rail a.rail-foot.on { background: var(--accent); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.rail a.rail-foot svg path:nth-of-type(1) { stroke-width: 2.2; }
/* ---------- Meet DEVORA left side: one colour per step, shared with the rail; a player cell on the game card ---------- */
.dxl { --sc: var(--accent); }
.dxl-id { position: relative; overflow: hidden; }
.dxl-id > :not(.dxl-peek) { position: relative; z-index: 1; }
.dxd-dots { display: none; }
.dxd-count { margin-left: auto; color: var(--dim); font: 800 .72rem Orbitron, sans-serif; letter-spacing: .04em; }
.dxd-count b { color: #fff; }
.dxd .dxl-kicker { color: var(--sc); transition: color .3s; }
.dxd-ring .fg { stroke: var(--sc); transition: stroke .3s; }
.dxd-fact { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--sc) 14%, transparent); color: var(--sc); transition: background .3s, color .3s; }
.dxd-fact svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dxl-r.on svg { color: var(--sc); stroke: var(--sc); }
.dxl-r i { background: var(--sc); }
/* ---------- Questions: the side card guides the list ---------- */
.fq-side { gap: 18px; justify-items: stretch; padding: 22px; background: var(--panel); }
/* Filtering by topic: the rest of the list steps back. */
.fq-item { transition: background .2s, opacity .25s; }
.eg-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crn-goal-list { display: block; margin-top: 4px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
@media (max-width: 900px) {
  .eg-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eg-pillars span { display: block; }
}
.eg-line.eg-b { font-size: clamp(2rem, 3.9vw, 3.4rem); }
.eg-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .eg-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------- Hero: matched-width headline, floating cards, facts strip ---------- */
.investor-build .screen .title.hx-title { display: grid; justify-items: start; gap: .06em; max-width: none; margin-top: .9rem; line-height: .92; letter-spacing: .01em; white-space: nowrap; }
.hx-title span { display: block; width: max-content; font-size: 48px; }
.investor-build .screen .title.hx-title .hx-l2 { color: var(--accent); -webkit-text-fill-color: var(--accent); letter-spacing: .01em; }
.investor-build .screen .title.hx-title .hx-l1 { color: #fff; -webkit-text-fill-color: #fff; letter-spacing: .01em; }
.fq-item[hidden] { display: none; }
/* ---------- Meet DEVORA, round 3: simpler game card, a view with labels, a solid step bar ---------- */
.dxl-id { gap: 12px; }
.dxl-screen { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.dxl-view { position: relative; flex: 1; min-height: 360px; overflow: hidden; }
.dxl-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dxl-note { position: absolute; z-index: 2; padding: 7px 12px; border-radius: 999px; background: rgba(14,15,17,.92); box-shadow: inset 0 0 0 1.5px var(--nc), 0 10px 24px rgba(0,0,0,.45); color: #fff; font: 700 .8rem Inter, sans-serif; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .35s ease .25s, transform .45s cubic-bezier(.22,1,.36,1) .25s; pointer-events: none; }
.dxl-note::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--nc); vertical-align: 1px; }
.dxl-note.on { opacity: 1; transform: none; }
.dxl-rail { position: static; display: flex; align-items: stretch; gap: 6px; padding: 8px; border-radius: 0; background: #0e0f11; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.dxl-r { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; height: 48px; padding: 0 12px; overflow: hidden; border: 0; border-radius: var(--r-lg); background: var(--panel); color: var(--text-2); font: 700 .9rem Inter, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.dxl-r b { color: var(--dim); font: 800 .66rem Orbitron, sans-serif; }
.dxl-r svg { width: 18px; height: 18px; fill: none; stroke: var(--rc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dxl-r:hover { background: var(--row-hover); color: #fff; }
.dxl-r i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--rc); transform-origin: left; transform: scaleX(var(--p, 0)); }
.dxl-r.past { color: #fff; }
.dxl-r.past i { transform: scaleX(1); opacity: .5; }
.dxl-r.on { background: #fff; color: #0e0f11; }
.dxl-r.on b { color: #0e0f11; }
.dxl-r.on svg { stroke: var(--rc); }
.dxl-again { display: grid; place-items: center; flex: none; width: 48px; height: 48px; margin: 0; border-radius: var(--r-lg); background: var(--panel); }
.dxl-again svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .dxl-view { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
}
@media (max-width: 640px) {
  .dxl-r span, .dxl-r b { display: none; }
  .dxl-r { justify-content: center; }
  .dxl-note { font-size: .66rem; padding: 5px 9px; }
}
/* ---------- Section openings: one title, one lead (takeaway in white, detail in grey) ---------- */
.lead { max-width: 58ch; margin: -6px 0 26px; color: var(--muted); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.5; text-wrap: pretty; }
.lead b { color: #fff; font-weight: 650; }
.head.chap-head { margin-bottom: 1.1rem; }
.cr-sechead p:not(.eyebrow) { max-width: 58ch; color: var(--muted); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.5; }
.chap-head .chap-lab { font-size: .78rem !important; }
.cr-hero-glow { inset: -6% -8% 6% -2%; background: radial-gradient(closest-side at 55% 45%, rgba(31,190,212,.42), rgba(139,107,255,.26) 50%, rgba(255,79,216,.08) 72%, transparent); filter: blur(46px); }
.hx-stage { position: absolute; inset: -14% -10% -6% -14%; z-index: -1; pointer-events: none; -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
/* The arena floor in perspective, as in the game: dark ink with a cyan grid receding under the launcher. */
.hx-floorgrid {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 70%; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%;
  background: linear-gradient(rgba(31,190,212,.32) 1.5px, transparent 1.5px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(31,190,212,.32) 1.5px, transparent 1.5px) 0 0 / 56px 56px;
  animation: hx-floor 6s linear infinite;
}
@keyframes hx-floor { to { background-position: 0 56px, 0 0; } }
.hx-pellets i { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: .7; animation: hx-twinkle 4.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes hx-twinkle { 50% { opacity: .25; transform: scale(.7); } }
.hx-bgcell { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--c), 0 0 30px color-mix(in srgb, var(--c) 55%, transparent); opacity: .55; filter: saturate(1.1); animation: hx-drift 9s ease-in-out infinite; animation-delay: var(--d); }
.hx-bgcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) {
  .hx-floorgrid, .hx-pellets i, .hx-bgcell { animation: none; }
}
@media (max-width: 900px) {
  .hx-bgcell { display: none; }
}
.hx-stage { inset: -18% -12% -14% -18%; -webkit-mask: radial-gradient(ellipse 70% 65% at 55% 55%, #000 50%, transparent 100%); mask: radial-gradient(ellipse 70% 65% at 55% 55%, #000 50%, transparent 100%); }
.hx-floorgrid { bottom: 0; height: 62%; background: linear-gradient(rgba(31,190,212,.45) 1.5px, transparent 1.5px) 0 0 / 60px 60px, linear-gradient(90deg, rgba(31,190,212,.45) 1.5px, transparent 1.5px) 0 0 / 60px 60px, radial-gradient(ellipse at 50% 0%, rgba(31,190,212,.18), transparent 70%); }
.hx-pellets i { width: 9px; height: 9px; opacity: .9; }
.hx-bgcell { opacity: .75; }
/* ---------- Meet DEVORA images: screenshots with callouts ---------- */
.dxl-view { pointer-events: none; user-select: none; }
.dxl-view::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 90px rgba(0,0,0,.55); pointer-events: none; }
.dxl-view img { filter: saturate(.92) brightness(.9); }
.dxl-cap { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(14,15,17,.85); color: var(--muted); font: 700 .62rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.dxl-cap svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.dxl-note { padding: 0; background: none; box-shadow: none; width: 0; height: 0; transform: none; }
.dxl-note::before { display: none; }
.dxl-pt { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--nc); background: color-mix(in srgb, var(--nc) 30%, transparent); box-shadow: 0 0 12px var(--nc); }
.dxl-pt::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--nc); opacity: 0; animation: dxl-ping 1.8s ease-out infinite; }
@keyframes dxl-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.dxl-leg { position: absolute; left: 0; top: -1px; width: var(--len); height: 2px; background: linear-gradient(90deg, var(--nc), color-mix(in srgb, var(--nc) 40%, transparent)); transform-origin: 0 50%; transform: rotate(var(--ang)) scaleX(0); transition: transform .45s cubic-bezier(.22,1,.36,1) .2s; }
.dxl-lab { position: absolute; left: var(--dx); top: var(--dy); transform: translate(-50%, -50%); padding: 7px 12px; border-radius: 8px; background: #0e0f11; box-shadow: inset 0 0 0 1.5px var(--nc), 0 10px 24px rgba(0,0,0,.5); color: var(--text-2); font: 500 .82rem Inter, sans-serif; white-space: nowrap; opacity: 0; transition: opacity .3s ease .45s; }
.dxl-lab b { color: #fff; font-weight: 700; }
.dxl-note.on .dxl-leg { transform: rotate(var(--ang)) scaleX(1); }
.dxl-note.on .dxl-lab { opacity: 1; }
.dxl-note:not(.on) .dxl-pt { opacity: 0; }
.dxl-note.on .dxl-pt { opacity: 1; transition: opacity .2s ease .1s; }
@media (max-width: 640px) {
  .dxl-lab { font-size: .64rem; padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .dxl-pt::after { animation: none; }
}
/* ---------- Meet DEVORA game card: a game intro card (cover, title, play, controls) ---------- */
.dxl-id.dxi { display: block; padding: 0; overflow: hidden; background: var(--panel); }
.dxi-cover { position: relative; aspect-ratio: 16 / 7.4; overflow: hidden; background: #10171c; }
.dxi-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; transform: scale(1.12); }
.dxi-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(0deg, var(--panel), transparent); }
.dxi-badges { position: absolute; z-index: 1; left: 12px; top: 12px; display: flex; gap: 6px; }
.dxi-b { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(14,15,17,.85); color: #fff; font: 700 .62rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.dxi-b--live { color: var(--done); }
.dxi-b--live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dxi-body { display: grid; gap: 12px; padding: 4px 20px 20px; }
.dxi-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dxi-title { color: #fff; font: 900 1.6rem/1 Orbitron, sans-serif; letter-spacing: .04em; }
.dxi-genre { margin-top: 5px; color: var(--muted); font-size: .8rem; }
.dxi-play { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 24px rgba(31,190,212,.45); transition: transform .15s; }
.dxi-play:hover { transform: scale(1.08); }
.dxi-play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.dxi-pitch { color: var(--text-2); font-size: .94rem; line-height: 1.5; }
.dxi-pitch b { color: #fff; }
.dxi-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.dxi-keys li { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--r-lg); background: var(--tile); text-align: center; }
.dxi-keys kbd { min-width: 30px; padding: 4px 7px; border-radius: 5px; background: #2c2d32; box-shadow: inset 0 -2px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); color: #fff; font: 700 .72rem Inter, sans-serif; white-space: nowrap; }
.dxi-keys span { color: var(--muted); font-size: .74rem; }
@media (max-width: 520px) {
  .dxi-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dxl-id.dxi > * { position: relative; z-index: auto; }
.dxl-id.dxi .dxi-genre { margin-top: 6px; color: var(--muted); font-size: .8rem; font-weight: 500; letter-spacing: 0; text-shadow: none; line-height: 1.3; }
.dxl-id.dxi .dxi-pitch { color: var(--text-2); font-size: .94rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; text-shadow: none; }
.dxl-id.dxi .dxi-pitch b { color: #fff; font-weight: 700; }
.dxi-cover { aspect-ratio: 16 / 6.4; }
.dxi-cover img { object-position: 50% 30%; transform: scale(1.02); }
.dxi-badges { left: auto; right: 12px; }
.dxi-badges .dxi-b:not(.dxi-b--live) { display: none; }
.dxl { align-items: start; }
.dxl-screen { align-self: stretch; }
/* ---------- Questions side card: a topic menu and a contact panel ---------- */
.fq-side.fqs { gap: 0; padding: 0; overflow: hidden; background: var(--panel); }
.fqs-top { display: grid; gap: 6px; padding: 22px 22px 16px; }
.fqs-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: var(--r-lg); background: rgba(31,190,212,.12); color: var(--accent); }
.fqs-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fqs-top h3 { color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.fqs-top p { color: var(--muted); font-size: .9rem; }
.fqs-ask { display: grid; gap: 6px; padding: 18px 22px 22px; background: #16171a; border-top: 1px solid rgba(255,255,255,.06); }
.fqs-ask b { color: #fff; font-size: 1rem; }
.fqs-ask p { color: var(--muted); font-size: .86rem; }
.fqs-mail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-top: 8px; border-radius: var(--r-lg); background: var(--accent); color: var(--on-accent); font: 700 .9rem Inter, sans-serif; text-decoration: none; }
.fqs-mail svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fqs-mail:hover { filter: brightness(1.08); }
.fqs-wp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; color: var(--text-2); font-size: .84rem; text-decoration: none; }
.fqs-wp:hover { color: #fff; }
.fqs-wp svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- Hero, round 3 ---------- */
.hv-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: #fff; font: 700 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hv-chip i { width: 7px; height: 7px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 10px #ffb020; animation: cr-blink 1.8s ease-in-out infinite; }
.hv-chip span { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.15); color: var(--muted); }
.investor-build .screen .copy p.text.hv-sub { max-width: 34ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--text-2); }
/* The launcher: closer to straight-on, framed in light. */
.cr-hero-shot .cr-window { transform: perspective(1600px) rotateY(-8deg) rotateX(3deg); border-radius: 14px; box-shadow: 0 0 0 1px rgba(31,190,212,.35), 0 0 0 6px rgba(14,15,17,.85), 0 0 0 7px rgba(255,255,255,.08), 0 40px 90px rgba(0,0,0,.7), 0 0 120px rgba(31,190,212,.25); }
.cr-hero-shot:hover .cr-window { transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg); }
.cr-hero-glow { background: radial-gradient(closest-side at 50% 50%, rgba(31,190,212,.38), rgba(139,107,255,.22) 55%, transparent); }
.hx-bgcell { opacity: .45; filter: blur(1px) saturate(1.1); }
/* Cards: one shape. Dark panel, 14px corners, a coloured top edge and glow. */
.hv-card { position: absolute; z-index: 5; display: grid; gap: 10px; width: 236px; padding: 14px; border-radius: 14px; background: #16171a; color: var(--text-2); font-size: .76rem; text-decoration: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), inset 0 3px 0 var(--ac), 0 26px 60px rgba(0,0,0,.6), 0 0 44px color-mix(in srgb, var(--ac) 22%, transparent); animation: cr-float 8s ease-in-out infinite; }
.hv-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hv-txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.hv-txt b { color: #fff; font-size: .9rem; }
.hv-txt small { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .7rem; }
.hv-tag { flex: none; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--ac) 16%, transparent); color: var(--ac); font: 800 .64rem Orbitron, sans-serif; }
.hv-av { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px var(--ac); }
.hv-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--ac) 16%, transparent); color: var(--ac); }
.hv-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.hv-bar { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.hv-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 3px; background: linear-gradient(90deg, #1fbed4, #8b6bff); }
.hv-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .7rem; }
.hv-meta b { color: #fff; font-weight: 600; }
.hv-m { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: var(--tile); }
.hv-m i { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.hv-m.done { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.hv-m.done i { background: var(--done); box-shadow: none; }
.hv-game { padding: 0; overflow: hidden; gap: 0; width: 220px; cursor: pointer; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.hv-game:hover { transform: translateY(-4px); }
.hv-art { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.hv-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.06); display: block; }
.hv-game .hv-row { padding: 12px 14px; }
.hv-game .hv-txt small { color: var(--done); font-weight: 600; }
.hv-game .hv-txt small i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.hv-go { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.hv-go svg { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; }
/* Placement: game card bottom-left, profile top-right, missions bottom-right. */
.hv-game { left: -34px; bottom: 34px; animation-delay: -1s; }
.hv-prof { right: -18px; top: 0; animation-delay: -3s; }
.hv-miss { right: 2%; bottom: 20px; animation-delay: -5.5s; }
@media (max-width: 900px) {
  .hv-prof, .hv-miss { display: none; }
  .hv-game { position: relative; left: auto; bottom: auto; margin: -50px 0 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-card, .hv-chip i { animation: none; }
}
.hv-miss { width: 250px; }
.hv-txt b { white-space: nowrap; }
/* Callouts: a ring around the object, a short leader from its edge, a two-line label. */
.dxl-pt { left: calc(var(--rr) * -1 - 4px); top: calc(var(--rr) * -1 - 4px); width: calc(var(--rr) * 2 + 8px); height: calc(var(--rr) * 2 + 8px); border: 2px dashed var(--nc); background: none; box-shadow: 0 0 18px color-mix(in srgb, var(--nc) 45%, transparent); }
.dxl-pt::after { inset: -2px; border-style: solid; }
.dxl-note.on .dxl-pt { animation: dxl-spin 14s linear infinite; }
@keyframes dxl-spin { to { transform: rotate(1turn); } }
.dxl-leg { transform: rotate(var(--ang)) translateX(calc(var(--rr) + 4px)) scaleX(0); width: var(--len); }
.dxl-note.on .dxl-leg { transform: rotate(var(--ang)) translateX(calc(var(--rr) + 4px)) scaleX(1); }
.dxl-lab { display: grid; gap: 1px; padding: 8px 12px 8px 14px; border-radius: 10px; background: rgba(14,15,17,.94); box-shadow: inset 3px 0 0 var(--nc), 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.55); text-align: left; }
.dxl-lab b { color: #fff; font: 700 .86rem Inter, sans-serif; }
.dxl-lab small { color: var(--text-2); font: 500 .74rem Inter, sans-serif; }
@media (max-width: 640px) {
  .dxl-lab b { font-size: .7rem; }
  .dxl-lab small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dxl-note.on .dxl-pt { animation: none; }
}
.dxl-pt::after { display: none; }
/* Questions side card without tabs: an intro, three small facts, then the contact panel. */
.fqs-top { gap: 8px; padding: 24px 24px 22px; }
.fqs-top p { line-height: 1.55; font-size: .92rem; }
.fqs-ask { padding: 22px 24px 24px; }
/* ---------- Hero, back to the split layout; the round-4 buttons on a rectangular shape ---------- */
#top .actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Meet DEVORA: no zoom drift on the screenshots, so callouts stay centred on their targets. */
.dxl-view img, .dxl-view img.on { transform: none !important; transition: opacity .5s ease; }
/* Callouts, polished: a tinted ring, a leader that ends in a dot, a label that pops in. */
.dxl-pt { border: 2px solid var(--nc); background: color-mix(in srgb, var(--nc) 12%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nc) 14%, transparent), 0 0 24px color-mix(in srgb, var(--nc) 45%, transparent); transform: scale(.85); transition: opacity .25s ease .05s, transform .45s cubic-bezier(.3, 1.5, .5, 1) .05s; }
.dxl-note.on .dxl-pt { animation: none; transform: scale(1); }
.dxl-leg { height: 2px; background: var(--nc); }
.dxl-leg::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--nc); }
.dxl-lab { transform: translate(-50%, -50%) scale(.9); transition: opacity .3s ease .4s, transform .4s cubic-bezier(.3, 1.4, .5, 1) .4s; }
.dxl-note.on .dxl-lab { transform: translate(-50%, -50%) scale(1); }
.dxl-lab b { display: flex; align-items: center; gap: 7px; }
.dxl-lab b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--nc); box-shadow: 0 0 8px var(--nc); }
.cfx-founder { display: flex; flex-direction: column; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--panel); }
.cfx-photo { position: relative; flex: 1; min-height: 220px; overflow: hidden; background: #0f1418; }
.cfx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.cfx-founder:hover .cfx-photo img { transform: scale(1.04); }
.cfx-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--mc); }
.cfx-founder figcaption { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; }
.cfx-founder figcaption > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.cfx-founder b { color: #fff; font-size: 1rem; }
.cfx-founder small { color: var(--muted); font-size: .8rem; }
.cfx-founder .cr-iconbtn svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
@media (max-width: 520px) {
  .cfx-photo { min-height: 160px; }
  .cfx-founder figcaption { padding: 10px; }
  .cfx-founder b { font-size: .88rem; }
  .cfx-founder small { font-size: .7rem; }
}
/* ---------- Sub-pages: legal and contact ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r-lg); background: #fff; color: #0e0f11; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
body.sub { background: var(--bg); }
.sub-main { padding-top: 56px; }
.sub-main > .wrap { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 88px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: .84rem; }
.crumbs > * { white-space: nowrap; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.sub-head { display: grid; gap: 10px; margin: 18px 0 14px; }
.sub-kick { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font: 700 .72rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.sub-kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.sub-head h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.sub-lead { max-width: 56ch; margin-bottom: 28px; color: var(--muted); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.5; }
body.sub .site-foot { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto !important; }
/* Legal */
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; margin-top: 18px; }
.legal-toc { position: sticky; top: 80px; display: grid; gap: 10px; max-height: calc(100vh - 100px); overflow: auto; padding: 18px; border-radius: var(--r-xl); background: var(--panel); }
.legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: var(--r); color: var(--text-2); font-size: .86rem; line-height: 1.35; text-decoration: none; }
.legal-toc a span { flex: none; min-width: 18px; padding-top: 2px; color: var(--dim); font: 800 .7rem Orbitron, sans-serif; }
.legal-toc a:hover { background: var(--tile); color: #fff; }
.legal-body { max-width: 74ch; color: var(--text-2); font-size: 1rem; line-height: 1.7; }
.legal-updated { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; background: var(--panel); color: var(--muted); font-size: .82rem; }
.legal-body h2 { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 10px; scroll-margin-top: 80px; color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.legal-body h2 span { color: var(--accent); font: 800 .9rem Orbitron, sans-serif; }
.legal-body p { margin: 0 0 12px; }
.legal-body ul { margin: 0 0 14px; padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }
.legal-body li::marker { color: var(--accent); }
.legal-body a { color: var(--accent); }
@media (max-width: 900px) {
  .legal-toc { position: static; max-height: none; }
}
/* Contact */
.ct { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr); gap: 14px; align-items: start; }
.ct-form, .ct-done { display: grid; gap: 16px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--panel); }
.ct-form[hidden], .ct-done[hidden] { display: none; }
.ct-topics { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-topics legend { margin-bottom: 12px; padding: 0; }
.ct-step { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 9px; border-radius: 6px; background: rgba(31,190,212,.14); color: var(--accent); font: 800 .7rem Inter, sans-serif; letter-spacing: 0; vertical-align: 1px; }
.ct-sec { display: block; margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.06); }
.ct-topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.ct-topic { position: relative; display: grid; }
.ct-topic input { position: absolute; opacity: 0; pointer-events: none; }
/* Topic tile: flat, no outline; chosen = white, like every selected state on the site. */
.ct-topic-in { position: relative; display: grid; align-content: start; gap: 14px; padding: 16px; border-radius: 12px; background: var(--tile); cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.ct-topic-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(31,190,212,.12); transition: background .15s; }
.ct-topic-ico svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-topic-txt { display: grid; gap: 3px; }
.ct-topic-txt b { color: #fff; font-size: .95rem; letter-spacing: -.01em; }
.ct-topic-txt small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.ct-topic-tick { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0e0f11; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s cubic-bezier(.22,1,.36,1); }
.ct-topic-tick svg { width: 13px; height: 13px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ct-topic:hover .ct-topic-in { background: var(--row-hover); transform: translateY(-1px); }
.ct-topic:hover .ct-topic-ico { background: rgba(31,190,212,.2); }
.ct-topic input:focus-visible + .ct-topic-in { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px rgba(255,255,255,.7); }
.ct-topic input:checked + .ct-topic-in { background: #fff; transform: none; }
.ct-topic input:checked + .ct-topic-in .ct-topic-ico { background: #0e0f11; }
.ct-topic input:checked + .ct-topic-in b { color: #0e0f11; }
.ct-topic input:checked + .ct-topic-in small { color: #55575d; }
.ct-topic input:checked + .ct-topic-in .ct-topic-tick { opacity: 1; transform: none; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-field { display: grid; gap: 6px; }
.ct-field > span { color: #fff; font-size: .86rem; font-weight: 600; }
.ct-field > span small { margin-left: 6px; color: var(--dim); font-weight: 500; }
.ct-field input, .ct-field textarea { width: 100%; padding: 13px 14px; border: 0; border-radius: var(--r-lg); background: var(--tile); box-shadow: none; color: #fff; font: 500 .98rem Inter, sans-serif; resize: vertical; transition: box-shadow .15s, background .15s; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--dim); }
.ct-field input:focus, .ct-field textarea:focus { outline: none; background: #222328; box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(31,190,212,.15); }
.ct-err { display: none; color: #ff8a9e; font-size: .8rem; font-style: normal; }
.ct-field.is-bad input, .ct-field.is-bad textarea { box-shadow: inset 0 0 0 1.5px #ff6b81; }
.ct-field.is-bad .ct-err, .ct-err--consent.on { display: block; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-check { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: .88rem; line-height: 1.45; cursor: pointer; }
.ct-check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); }
.ct-check a { color: var(--accent); }
.ct-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ct-send { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 800 1rem Inter, sans-serif; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 6px rgba(31,190,212,.12), 0 16px 36px rgba(31,190,212,.28); transition: transform .15s, filter .15s; }
.ct-send:hover { transform: translateY(-2px); filter: brightness(1.06); }
.ct-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ct-send.is-busy { opacity: .7; cursor: progress; }
.ct-status { color: var(--muted); font-size: .9rem; }
.ct-done { justify-items: start; padding: clamp(28px, 4vw, 44px); }
.ct-done-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(46,224,127,.14); color: var(--done); }
.ct-done-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-done h2 { color: #fff; font-size: 2rem; letter-spacing: -.03em; }
.ct-done p { color: var(--text-2); }
.ct-done p b { color: #fff; }
.ct-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ct-side { display: grid; gap: 10px; }
.ct-card { display: grid; gap: 10px; padding: 18px; border-radius: var(--r-xl); background: var(--panel); }
.ct-mail { overflow-wrap: anywhere; color: #fff; font-size: 1.15rem; font-weight: 700; text-decoration: none; }
.ct-mail:hover { color: var(--accent); }
.ct-copy { position: relative; display: inline-flex; align-items: center; justify-self: start; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-lg); background: var(--panel-2); color: #fff; font: 600 .84rem Inter, sans-serif; cursor: pointer; }
.ct-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ct-founders { display: grid; gap: 6px; }
.ct-founders .cfx-founder { flex-direction: row; align-items: center; border-radius: var(--r-lg); background: var(--tile); }
.ct-founders .cfx-photo { flex: none; width: 48px; height: 48px; min-height: 0; margin: 8px 0 8px 8px; border-radius: 50%; }
.ct-founders .cfx-photo::after { display: none; }
.ct-founders .cfx-founder figcaption { flex: 1; min-width: 0; padding: 8px 10px; }
.ct-links { grid-template-columns: 1fr 1fr; }
.ct-links .cr-lab { grid-column: 1 / -1; }
.ct-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-lg); background: var(--tile); color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; }
.ct-links a:hover { background: var(--row-hover); }
.ct-links a[hidden] { display: none; }
.ct-links svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) {
  .ct { grid-template-columns: minmax(0, 1fr); }
  .ct-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ct-row { grid-template-columns: minmax(0, 1fr); }
  .ct-send { width: 100%; }
}
.ct-founders.cio-founders { grid-template-columns: minmax(0, 1fr); }
.legal-toc a span, .legal-body h2 span { font-family: Inter, sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .crn-now::before { display: none; }
}
/* Callout labels in the site's chip style: a coloured small-caps kicker over a white line. */
.dxl-lab { gap: 3px; padding: 9px 13px 10px; border-radius: 10px; background: #16171a; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.6); }
.dxl-lab b { gap: 6px; color: var(--nc); font: 700 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.dxl-lab b::before { width: 6px; height: 6px; }
.dxl-lab small { color: #fff; font: 600 .86rem Inter, sans-serif; }
/* ---------- Shared calls to action: a solid cyan action with an icon tile, and a quiet partner ---------- */
.cr-cta { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 8px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 800 1rem Inter, sans-serif; text-decoration: none; box-shadow: 0 10px 30px rgba(31,190,212,.25); transition: transform .15s, box-shadow .15s, filter .15s; border: 0; cursor: pointer; }
.cr-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(31,190,212,.35); filter: brightness(1.05); }
.cr-cta-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: rgba(6,18,22,.9); color: var(--accent); }
.cr-cta-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-cta-ico svg.fill { fill: currentColor; stroke: none; margin-left: 2px; width: 15px; height: 15px; }
.cr-cta2 { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; border-radius: 12px; background: var(--panel-2); color: #fff; font: 700 1rem Inter, sans-serif; text-decoration: none; transition: background .15s, color .15s, transform .15s; }
.cr-cta2:hover { background: #fff; color: #0e0f11; transform: translateY(-2px); }
.cr-cta2 svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cr-cta2 .cr-cta2-arr { width: 14px; height: 14px; margin-left: 2px; color: var(--muted); stroke-width: 2.4; transition: transform .15s; }
.cr-cta2:hover .cr-cta2-arr { color: inherit; transform: translate(2px, -2px); }
/* ---------- For investors: one focused panel, the deck shown, founders underneath ---------- */
/* For investors: one panel. The pitch with its two actions and three steps; the deck, stacked, with what is inside; the founders and the email underneath. */
.cv { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); background: #16171a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.cv-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 45% 70% at 78% 40%, rgba(31,190,212,.16), transparent 70%), radial-gradient(ellipse 35% 60% at 95% 90%, rgba(139,107,255,.12), transparent 70%); }
.cv-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(31,190,212,.07) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(31,190,212,.07) 1px, transparent 1px) 0 0 / 44px 44px; -webkit-mask: radial-gradient(ellipse 50% 80% at 78% 45%, #000, transparent 75%); mask: radial-gradient(ellipse 50% 80% at 78% 45%, #000, transparent 75%); }
.cv-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(24px, 4vw, 52px); }
.cv-pitch { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.cv-pitch h3 { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.02; letter-spacing: -.04em; }
.cv-pitch h3 em { font-style: normal; color: var(--accent); }
.cv-pitch > p { max-width: 44ch; color: var(--text-2); font-size: 1.08rem; line-height: 1.55; }
.cv-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cv-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; margin: 14px 0 0; padding: 0; list-style: none; }
.cv-steps li { position: relative; display: grid; gap: 2px; padding: 12px 14px 13px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 2px 0 var(--sc); }
.cv-steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #16171a; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }
.cv-steps b { color: var(--sc); font: 700 .66rem Orbitron, sans-serif; letter-spacing: .08em; }
.cv-steps span { color: #fff; font-size: .95rem; font-weight: 700; }
.cv-steps small { color: var(--muted); font-size: .78rem; }
/* The deck: a fanned stack that straightens on hover, and what is inside, as a card on its corner. */
.cv-deck { position: relative; display: grid; justify-items: center; padding: 0 0 84px; }
.cv-stack { position: relative; width: min(100%, 420px); }
.cv-sheet, .cv-cover { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; }
.cv-sheet { position: absolute; inset: 0; background: #23252b; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 20px 40px rgba(0,0,0,.4); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.cv-sheet--2 { transform: translate(16px, 12px) rotate(4deg); }
.cv-sheet--3 { transform: translate(30px, 24px) rotate(8deg); background: #1d1f24; }
.cv-cover { position: relative; z-index: 1; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 34px 70px rgba(0,0,0,.6), 0 0 80px rgba(31,190,212,.18); transform: rotate(-3deg); transition: transform .5s cubic-bezier(.22,1,.36,1); animation: cv-bob 7s ease-in-out infinite; }
@keyframes cv-bob { 50% { translate: 0 -6px; } }
.cv-deck:hover .cv-cover { transform: rotate(0) translateY(-6px); }
.cv-deck:hover .cv-sheet--2 { transform: translate(26px, 8px) rotate(7deg); }
.cv-deck:hover .cv-sheet--3 { transform: translate(48px, 16px) rotate(13deg); }
.cv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,12,15,.96) 8%, rgba(10,12,15,.5) 45%, transparent 70%); }
.cv-cover::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%); background-size: 250% 100%; animation: hv-glint 7s ease-in-out infinite; }
.cv-pdf { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 3px 8px; border-radius: 4px; background: rgba(10,12,15,.8); color: #fff; font: 800 .6rem Inter, sans-serif; letter-spacing: .14em; }
.cv-inside { position: absolute; z-index: 2; right: max(0px, calc(50% - 240px)); bottom: 0; display: grid; gap: 8px; width: 270px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, #1fbed4 14%, #18191d), #141518 60%); box-shadow: 0 0 0 1px rgba(31,190,212,.32), inset 0 1px 0 rgba(31,190,212,.7), 0 24px 50px rgba(0,0,0,.6), 0 0 40px rgba(31,190,212,.16); }
.cv-inside > small { color: var(--accent); font: 700 .62rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.cv-toc { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.cv-toc li { display: flex; align-items: center; gap: 9px; color: #fff; font-size: .88rem; font-weight: 600; }
.cv-toc svg { flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: rgba(46,224,127,.16); fill: none; stroke: var(--done); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* The founders and the email, under a hairline. */
.cv-people { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 16px clamp(18px, 4vw, 52px); border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.18); }
.cv-faces { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.cv-faces .cfx-founder { flex-direction: row; align-items: center; gap: 0; background: transparent; }
.cv-faces .cfx-photo { flex: none; width: 46px; height: 46px; min-height: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--mc); }
.cv-faces .cfx-photo::after { display: none; }
.cv-faces .cfx-founder figcaption { padding: 0 6px 0 12px; }
.cv-mail { display: grid; gap: 3px; justify-items: end; text-align: right; }
.cv-mail > span:first-child { color: var(--muted); font-size: .8rem; }
.cv-mail-row { display: inline-flex; align-items: center; gap: 8px; }
.cv-mail a { color: #fff; font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.cv-mail a:hover { color: var(--accent); }
.cv-mail .cr-iconbtn { position: relative; width: 32px; height: 32px; }
.cv-alt { display: inline-flex; gap: 14px; }
.cv-mail .cv-alt a { color: var(--text-2); font-size: .82rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.25); text-underline-offset: 3px; }
.cv-mail .cv-alt a:hover { color: var(--accent); }
@media (max-width: 1000px) {
  .cv-main { grid-template-columns: minmax(0, 1fr); }
  .cv-deck { margin-top: 10px; }
}
@media (max-width: 560px) {
  .cr-cta, .cr-cta2 { width: 100%; justify-content: center; }
  .cv-steps { grid-template-columns: minmax(0, 1fr); }
  .cv-steps li:not(:last-child)::after { display: none; }
  .cv-deck { padding-bottom: 0; gap: 14px; }
  .cv-inside { position: static; width: 100%; }
  .cv-sheet--3, .cv-sheet--2 { display: none; }
  .cv-mail { justify-items: start; text-align: left; }
  .cv-mail a { font-size: .95rem; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .cv-cover, .cv-cover::before { animation: none; } }
/* Contact form in the site style: filled fields with no outlines; focus lifts the field and draws a cyan underline. */
.ct-topic-in { box-shadow: none; }
.ct-field input, .ct-field textarea { box-shadow: none; background: var(--tile); border-radius: 10px; padding: 14px 16px; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 2px; background-position: 50% 100%; background-repeat: no-repeat; transition: background-color .15s, background-size .3s cubic-bezier(.22,1,.36,1); }
.ct-field input:hover, .ct-field textarea:hover { background-color: var(--row-hover); }
.ct-field input:focus, .ct-field textarea:focus { box-shadow: none; background-color: #26272d; background-size: 100% 2px; }
.ct-field.is-bad input, .ct-field.is-bad textarea { box-shadow: none; background-image: linear-gradient(#ff6b81, #ff6b81); background-size: 100% 2px; }
.ct-field > span { color: var(--text-2); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.ct-send.cr-cta { height: 56px; padding: 0 22px 0 8px; border-radius: 12px; box-shadow: 0 10px 30px rgba(31,190,212,.25); }
.ct-done .cr-cta2 { border: 0; font: 700 1rem Inter, sans-serif; cursor: pointer; }
.ct-check input { accent-color: var(--accent); }
/* Hero buttons on one row. */
#top .actions { flex-wrap: nowrap; }
@media (max-width: 560px) {
  #top .actions { flex-wrap: wrap; }
}
/* Navbar status: a quiet readout, not a button. Amber "pre-launch" dot, a four-step meter, the percentage. */
.cr-status { display: inline-flex; align-items: center; gap: 12px; height: 34px; margin-right: 8px; padding: 0 4px; color: var(--text-2); cursor: default; }
.cr-status-lab { display: inline-flex; align-items: center; gap: 8px; font: 700 .68rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.cr-status-lab i { width: 7px; height: 7px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 8px #ffb020; }
.cr-meter { display: grid; grid-template-columns: repeat(4, 14px); gap: 3px; }
.cr-meter i { height: 6px; border-radius: 3px; background: var(--accent); }
.cr-status b { color: #fff; font: 700 .78rem Inter, sans-serif; font-variant-numeric: tabular-nums; }
.cr-status + .chip-btn { position: relative; }
.cr-status::after { content: ""; width: 1px; height: 20px; margin-left: 6px; background: rgba(255,255,255,.1); }
@media (max-width: 700px) {
  .cr-status-lab { font-size: 0; gap: 0; }
  .cr-status::after { display: none; }
}
/* ---------- Scrollbars, site-wide: thin, dark, cyan on hover ---------- */
html { scrollbar-color: #2c2d32 #0e0f11; scrollbar-width: thin; }
* { scrollbar-color: #2c2d32 transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #2c2d32 padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent) padding-box; }
html::-webkit-scrollbar-track { background: #0e0f11; }
/* ---------- Legal pages: a reading layout ---------- */
.legal { grid-template-columns: 280px minmax(0, 1fr); }
.legal-toc { padding: 16px 12px; background: #16171a; }
.legal-toc .cr-lab { padding: 0 8px; }
.legal-toc a { position: relative; padding: 8px 10px; }
.legal-toc a.on { background: var(--tile); color: #fff; }
.legal-toc a.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); }
.legal-toc a.on span { color: var(--accent); }
.legal-body { max-width: 70ch; font-size: 1.04rem; line-height: 1.8; color: #c8cad0; }
.legal-updated { margin-bottom: 4px; }
.legal-sec { padding: 28px 0 8px; border-top: 1px solid rgba(255,255,255,.07); }
.legal-sec:first-of-type { border-top: 0; padding-top: 18px; }
.legal-body h2 { margin: 0 0 14px; font-size: 1.45rem; line-height: 1.25; align-items: center; }
.legal-body h2 span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: rgba(31,190,212,.12); color: var(--accent); font-size: .82rem; }
.legal-body p { margin: 0 0 16px; }
.legal-body ul { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.legal-body li { position: relative; margin: 0; padding: 12px 14px 12px 34px; border-radius: 10px; background: #16171a; }
.legal-body li::before { content: ""; position: absolute; left: 15px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal-caps { padding: 14px 16px; border-radius: 10px; background: rgba(255,176,32,.08); box-shadow: inset 3px 0 0 #ffb020; color: #e9e2d2; font-size: .9rem; line-height: 1.65; letter-spacing: .01em; }
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .legal-toc ol { grid-template-columns: minmax(0, 1fr); }
  .legal-body { font-size: 1rem; }
  .legal-body h2 { font-size: 1.2rem; }
}
.nf-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Hero, polished: aurora, lit floor, rising motes, richer cards, entrance and parallax ---------- */
#top { isolation: isolate; }
.hx-aurora { position: absolute; inset: -20% -15% -10% -10%; z-index: -2; pointer-events: none; opacity: .9; }
.hx-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: hx-aur 18s ease-in-out infinite alternate; }
.hx-aurora i:nth-child(1) { left: 20%; top: 10%; width: 55%; height: 60%; background: radial-gradient(closest-side, rgba(31,190,212,.45), transparent); }
.hx-aurora i:nth-child(2) { right: 0; top: 30%; width: 45%; height: 55%; background: radial-gradient(closest-side, rgba(139,107,255,.42), transparent); animation-duration: 22s; animation-delay: -6s; }
.hx-aurora i:nth-child(3) { left: 40%; bottom: 0; width: 40%; height: 40%; background: radial-gradient(closest-side, rgba(255,79,216,.22), transparent); animation-duration: 26s; animation-delay: -12s; }
@keyframes hx-aur { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -4%) scale(1.08); } 100% { transform: translate(-5%, 5%) scale(.95); } }
.cr-hero-glow { opacity: .55; }
/* The floor: brighter lines that fade into the horizon, a slow scroll toward the viewer. */
.hx-floorgrid { background: linear-gradient(rgba(31,190,212,.55) 1.5px, transparent 1.5px) 0 0 / 60px 60px, linear-gradient(90deg, rgba(31,190,212,.4) 1.5px, transparent 1.5px) 0 0 / 60px 60px; -webkit-mask: linear-gradient(0deg, #000 10%, transparent 85%); mask: linear-gradient(0deg, #000 10%, transparent 85%); animation-duration: 4s; }
.hx-horizon { position: absolute; z-index: -1; left: -10%; right: -10%; bottom: 22%; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(31,190,212,.9) 30%, rgba(139,107,255,.9) 70%, transparent); box-shadow: 0 0 24px 4px rgba(31,190,212,.35); opacity: .55; animation: hx-hz 6s ease-in-out infinite; }
@keyframes hx-hz { 50% { opacity: .85; } }
.hx-motes { position: absolute; inset: -10% -10% 0 -10%; z-index: -1; pointer-events: none; overflow: hidden; }
.hx-motes i { position: absolute; left: var(--x); bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); opacity: 0; animation: hx-mote var(--t) linear infinite; animation-delay: var(--d); }
@keyframes hx-mote { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translateY(-720px) scale(1.1); opacity: 0; } }
.hx-pellets i { opacity: .55; }
.hx-bgcell { opacity: .35; }
/* The window: crisper frame and a slow glint. */
.cr-hero-shot .cr-window { box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 0 0 6px rgba(14,15,17,.9), 0 0 0 7px rgba(31,190,212,.25), 0 50px 100px rgba(0,0,0,.7), 0 0 140px rgba(31,190,212,.22); }
/* Cards: tinted glass in the card's own colour, a lit top edge, a matching glow. */
.hv-card { background: linear-gradient(160deg, color-mix(in srgb, var(--ac) 16%, #18191d) 0%, #141518 55%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 35%, rgba(255,255,255,.06)), inset 0 1px 0 color-mix(in srgb, var(--ac) 70%, #fff), 0 30px 60px rgba(0,0,0,.6), 0 0 50px color-mix(in srgb, var(--ac) 28%, transparent); }
.hv-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%); background-size: 250% 100%; animation: hv-glint 7s ease-in-out infinite; }
@keyframes hv-glint { 0%, 60% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
.hv-m { background: rgba(255,255,255,.05); }
.hv-ico, .hv-tag { background: color-mix(in srgb, var(--ac) 22%, transparent); }
.hv-bar { background: rgba(255,255,255,.1); }
.hv-bar i { background: linear-gradient(90deg, #1fbed4, #8b6bff); box-shadow: 0 0 10px rgba(31,190,212,.6); }
.hv-game .hv-row { background: linear-gradient(180deg, transparent, rgba(255,79,216,.08)); }
.hv-go { box-shadow: 0 0 0 4px rgba(31,190,212,.18), 0 8px 20px rgba(31,190,212,.4); }
/* Parallax: each layer moves with the pointer by its depth (set from JS). */
[data-depth] { translate: calc(var(--px, 0) * var(--dep, 0) * 1px) calc(var(--py, 0) * var(--dep, 0) * 1px); transition: translate .5s cubic-bezier(.22,1,.36,1); }
/* Entrance: the window rises, then the cards land one after another. */
.js #top .cr-tilt { animation: hx-in-win 1s cubic-bezier(.22,1,.36,1) .1s both, cr-drift 9s ease-in-out 1.1s infinite; }
.js #top .hv-card { animation: hx-in-card .8s cubic-bezier(.22,1.3,.36,1) both, cr-float 8s ease-in-out 1.6s infinite; }
.js #top .hv-prof { animation-delay: .45s, 1.6s; }
.js #top .hv-game { animation-delay: .6s, 2.4s; }
.js #top .hv-miss { animation-delay: .75s, 3.2s; }
@keyframes hx-in-win { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes hx-in-card { from { opacity: 0; transform: translateY(30px) scale(.9); } }
.js #top .copy > * { animation: hx-in-copy .8s cubic-bezier(.22,1,.36,1) both; }
.js #top .copy > :nth-child(2) { animation-delay: .08s; }
.js #top .copy > :nth-child(3) { animation-delay: .16s; }
.js #top .copy > :nth-child(4) { animation-delay: .24s; }
@keyframes hx-in-copy { from { opacity: 0; transform: translateY(16px); } }
/* A light sweep across BATTLEFI. */
.hx-shine .hx-l2 { background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 40%, #c9f6ff 50%, var(--accent) 60%, var(--accent) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent !important; animation: hx-shine 6s ease-in-out infinite 1.2s; }
@keyframes hx-shine { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .hx-aurora i, .hx-motes i, .hx-horizon, .hv-card::after, .hx-shine .hx-l2, .js #top .cr-tilt, .js #top .hv-card, .js #top .copy > * { animation: none !important; }
  [data-depth] { translate: none; }
}
@media (max-width: 900px) { .hx-motes, .hx-horizon { display: none; } [data-depth] { translate: none; } }
.cr-window-bar > span, .hx-status { white-space: nowrap; }
@media (max-width: 600px) { .cr-window-bar > span { display: none; } }
/* Roadmap items: the original flat chips, with more contrast. */
#roadmap .stage li { background: #2a2c31; color: #e4e6ea; }
#roadmap .stage li::before { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
#roadmap .stage.done li, #roadmap .stage.now li.is-done { background: #2a2c31; color: #fff; }
#roadmap .stage.now li:not(.is-done) { color: #fff; }
#roadmap .stage.now li:not(.is-done)::before { box-shadow: inset 0 0 0 1.5px #fff; }
#roadmap .stage.later li { background: #26282c; color: #c9ccd2; }
#roadmap .stage.later li::before { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42); }
#roadmap .stage.later .stage-tags { opacity: 1; }
#roadmap .stage.later .when { opacity: .85; }
/* Meet DEVORA callouts, louder: a solid colour tab for the name, a larger line under it, a lit ring and leg, a soft pulse. */
.dxl-lab { gap: 0; padding: 0; overflow: hidden; border-radius: 10px; background: rgba(12,13,15,.96); box-shadow: 0 0 0 1.5px var(--nc), 0 0 28px color-mix(in srgb, var(--nc) 38%, transparent), 0 16px 34px rgba(0,0,0,.65); }
.dxl-lab b { display: flex; align-items: center; gap: 7px; padding: 6px 12px 5px; background: var(--nc); color: #0b0c0e; font: 800 .66rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.dxl-lab b::before { width: 6px; height: 6px; background: #0b0c0e; box-shadow: none; }
.dxl-lab small { display: block; padding: 8px 12px 9px; color: #fff; font: 600 .95rem/1.25 Inter, sans-serif; }
.dxl-note.on .dxl-lab { animation: dxl-lab-glow 2.6s ease-in-out 1s infinite; }
@keyframes dxl-lab-glow { 50% { box-shadow: 0 0 0 1.5px var(--nc), 0 0 44px color-mix(in srgb, var(--nc) 60%, transparent), 0 16px 34px rgba(0,0,0,.65); } }
.dxl-pt { border-width: 2.5px; background: color-mix(in srgb, var(--nc) 16%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nc) 18%, transparent), 0 0 30px color-mix(in srgb, var(--nc) 60%, transparent); }
.dxl-pt::after { display: block; inset: -3px; border: 2px solid var(--nc); animation: dxl-ring 2.2s ease-out infinite; }
@keyframes dxl-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
.dxl-leg { height: 3px; border-radius: 2px; box-shadow: 0 0 10px var(--nc); }
.dxl-leg::after { top: -2.5px; width: 8px; height: 8px; box-shadow: 0 0 8px var(--nc); }
/* The view dims a little while callouts are up, so they read first. */
.dxl-view::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.35)); }
@media (max-width: 640px) {
  .dxl-lab b { font-size: .58rem; padding: 5px 9px 4px; }
  .dxl-lab small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dxl-note.on .dxl-lab, .dxl-pt::after { animation: none; } }
/* Navbar readout: a flat panel with a live dot, one charging track (ticks at each quarter, a glowing head), and the figure. Not a control. */
.cr-status { gap: 12px; height: 38px; padding: 0 14px 0 12px; border-radius: 10px; background: #16171a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.cr-status::after { display: none; }
.cr-status-lab { color: #fff; font-size: .64rem; letter-spacing: .18em; }
.cr-status-lab i { position: relative; width: 8px; height: 8px; }
.cr-status-lab i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #ffb020; opacity: 0; animation: cr-status-ping 2.2s ease-out infinite; }
@keyframes cr-status-ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.cr-meter { position: relative; display: block; width: 92px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: visible; }
.cr-meter::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient(90deg, transparent calc(25% - 1px), #16171a calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) calc(50% - 1px), #16171a calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) calc(75% - 1px), #16171a calc(75% - 1px) calc(75% + 1px), transparent calc(75% + 1px)); }
.cr-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); height: auto; border-radius: inherit; background: linear-gradient(90deg, #1fbed4, #5fe3f2); box-shadow: 0 0 12px rgba(31,190,212,.55); overflow: hidden; }
.cr-meter i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); width: 40%; transform: translateX(-100%); animation: cr-meter-run 2.8s ease-in-out infinite; }
.cr-meter i::after { content: none; }
.cr-meter::after { content: ""; position: absolute; z-index: 3; left: var(--p); top: 50%; width: 4px; height: 14px; margin: -7px 0 0 -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #5fe3f2, 0 0 2px #fff; }
@keyframes cr-meter-run { 0% { transform: translateX(-100%); } 70%, 100% { transform: translateX(260%); } }
.cr-status b { font: 700 .9rem Orbitron, sans-serif; letter-spacing: .02em; }
.cr-status b small { margin-left: 1px; color: var(--text-2); font-size: .66rem; }
@media (max-width: 900px) { .cr-status { padding: 0 10px; } .cr-meter { width: 64px; } }
@media (prefers-reduced-motion: reduce) { .cr-meter i::before, .cr-status-lab i::after { animation: none; } }
@media (max-width: 700px) { .cr-status-lab { font-size: 0; gap: 0; } .cr-status { gap: 9px; height: 34px; } .cr-meter { width: 54px; } }

/* Gradient words in headings: each word paints its own gradient, since the word spans move independently. */
.cr-sechead h2 em { background: none; -webkit-text-fill-color: currentColor; }
.cr-sechead h2 em .chap-w { background: var(--cr-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* ---------- Entry console: a demo line in place of the mode switch ---------- */
.cre-demo { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px 0 6px; border-radius: var(--r-lg); background: var(--tile); color: var(--text-2); font-size: .8rem; }
.cre-demo-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 6px; background: rgba(46,224,127,.14); color: var(--done); font: 800 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.cre-demo-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--done); box-shadow: 0 0 8px var(--done); animation: cr-blink 1.8s ease-in-out infinite; }

/* ---------- "Play on a computer": a panel over a dimmed page ---------- */
.cr-modal { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 26px 22px 22px; border: 0; border-radius: 16px; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(31,190,212,.16), transparent 70%), #16171a; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 100px rgba(0,0,0,.7); color: var(--text-2); text-align: center; overflow: auto; }
.cr-modal::backdrop { background: rgba(6,7,9,.72); backdrop-filter: blur(6px); }
.cr-modal[open] { animation: crm-in .35s cubic-bezier(.22,1.2,.36,1); }
.cr-modal[open]::backdrop { animation: crm-fade .25s ease; }
@keyframes crm-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes crm-fade { from { opacity: 0; } }
.crm-x { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--r); background: var(--tile); color: var(--text-2); cursor: pointer; }
.crm-x:hover { background: var(--tile-hover); color: #fff; }
.crm-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* A small computer: the DEVORA wordmark on its screen, a cyan glow. */
.crm-art { display: grid; justify-items: center; margin: 6px 0 18px; }
.crm-screen { position: relative; display: grid; place-items: center; width: 168px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 30% 30%, rgba(255,79,216,.25), transparent 50%), radial-gradient(circle at 70% 70%, rgba(31,190,212,.3), transparent 55%), #0f1418; box-shadow: 0 0 0 4px #24262b, 0 0 0 5px rgba(255,255,255,.08), 0 0 40px rgba(31,190,212,.3); }
.crm-screen img { width: 70%; height: auto; }
.crm-screen i { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); background-size: 250% 100%; animation: hv-glint 4s ease-in-out infinite; }
.crm-base { width: 56px; height: 14px; margin-top: 5px; border-radius: 0 0 6px 6px; background: linear-gradient(#2a2c31, #1d1f23); box-shadow: 0 6px 0 -3px #24262b, 0 7px 0 -3px rgba(255,255,255,.06); }
.cr-modal h3 { color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.cr-modal p { margin: 8px auto 0; max-width: 32ch; font-size: .95rem; line-height: 1.5; }
.crm-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.crm-keys li { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--r-lg); background: var(--tile); color: var(--muted); font-size: .76rem; }
.crm-keys kbd { min-width: 30px; padding: 4px 7px; border-radius: 5px; background: #2c2d32; box-shadow: inset 0 -2px 0 rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08); color: #fff; font: 700 .72rem Inter, sans-serif; }
.crm-act { display: grid; gap: 8px; margin-top: 18px; }
.crm-act .cr-cta, .crm-act .cr-cta2 { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .cr-modal[open], .cr-modal[open]::backdrop, .crm-screen i, .cre-demo-tag i { animation: none; } }

/* ---------- Entry console on phones: fits one screen. A smaller stage, the tiers (no slider), the button. ---------- */
@media (max-width: 760px) {
  .cre-bar { min-height: 50px; padding: 8px 12px; }
  .cre-bar-l img { width: 88px; }
  .cre-stage { min-height: 0; height: 196px; }
  .cre-me { margin-top: -6px; gap: 8px; }
  .cre-tag { font-size: .58rem; padding: 3px 8px; }
  .cre-cell { width: calc(var(--s) * .52); height: calc(var(--s) * .52); }
  .cre-cell b { font-size: .9rem; }
  .cre-ring { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
  .cre-ring--2 { width: 136px; height: 136px; margin: -68px 0 0 -68px; }
  .cre-readout { top: 10px; bottom: auto; left: auto; right: 10px; flex-direction: column; gap: 4px; }
  .cre-readout span { grid-auto-flow: column; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 104px; padding: 5px 9px; }
  .cre-readout span:last-child { display: none; }
  .cre-readout b { font-size: .74rem; }
  .cre-controls { gap: 12px; padding: 14px; }
  .cre-demo { min-height: 34px; font-size: .74rem; }
  .cre-figure { align-items: center; }
  .cre-stake { grid-auto-flow: column; align-items: center; gap: 10px; }
  .cre-stake b { font-size: 1.7rem; }
  .cre-slider { display: none; }
  .cre-tiers button { padding: 10px 2px; gap: 3px; }
  .cre-note { font-size: .72rem; }
  .cre-controls .cr-btn-xl { height: 50px; }
}
.crm-act button { border: 0; font: 700 1rem Inter, sans-serif; cursor: pointer; }
/* Touch screens keep no hover after a tap. */
@media (hover: none) {
  .cr-cta2:hover { background: var(--panel-2); color: #fff; transform: none; }
  .cr-cta2:hover .cr-cta2-arr { color: var(--muted); transform: none; }
}

/* ---------- Meet DEVORA on phones and tablets: the game card on its own; a divider; the screen and its step card as one unit ---------- */
.dxl-split { display: none; }
@media (max-width: 900px) {
  .dxl { gap: 0; }
  .dxl-split { order: 1; display: flex; align-items: center; gap: 10px; padding: 30px 2px 12px; }
  .dxl-split-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(31,190,212,.14); }
  .dxl-split-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .dxl-split b { color: #fff; font: 700 .74rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
  .dxl-split i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(31,190,212,.5), rgba(255,255,255,.06)); }
  .dxl-split small { color: var(--muted); font: 700 .66rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .dxl-screen { order: 2; aspect-ratio: auto; min-height: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .dxl-view { aspect-ratio: 6 / 5; }
  .dxl-card { order: 3; margin: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
  .dxd::before, .dxd::after { display: none; }
}
@media (max-width: 640px) {
  .dxl-rail { gap: 4px; padding: 6px; }
  .dxl-r { flex-direction: column; justify-content: center; gap: 4px; height: 56px; padding: 0 4px; }
  .dxl-r span { display: block; font-size: .68rem; font-weight: 700; }
  .dxl-r b { display: none; }
  .dxl-again { display: none; }
}
.dxl-lab { left: var(--ddx, var(--dx)); top: var(--ddy, var(--dy)); }

/* ---------- Team on phones and tablets: no tab strip; the card, with arrows and swipe ---------- */
.crm-hint-touch { display: none; }
@media (max-width: 900px) {
  .crm-list { display: none; }
  .crm-hint-wide { display: none; }
  .crm-hint-touch { display: inline; }
  .crm-card { touch-action: pan-y; }
}

/* ---------- Questions on phones and tablets: the answers first, "Still curious?" after them ---------- */
@media (max-width: 900px) {
  .fq { display: flex; flex-direction: column; align-items: stretch; }
  .fq-side.fqs { display: contents; }
  .fqs-top { order: 0; border-radius: var(--r-xl); background: var(--panel); }
  .fq-list { order: 1; }
  .fqs-ask { order: 2; border-radius: var(--r-xl); border-top: 0; background: var(--panel); }
}

/* ---------- Milestones on phones: one row of six steps, then the step in progress, flat ---------- */
@media (max-width: 760px) {
  .crn-panel { gap: 14px; padding: 16px; }
  .crn-track { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 0; }
  .crn-track li:nth-child(4)::before { display: block; }
  .crn-track li + li::before { top: 15px; right: calc(50% + 17px); left: calc(-50% + 17px); }
  .crn-dot { width: 30px; height: 30px; font-size: .66rem; }
  .crn-dot svg { width: 13px; height: 13px; }
  .crn-track li b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .crn-track li.is-now .crn-dot { box-shadow: 0 0 0 3px #16171a, 0 0 0 5px rgba(255,255,255,.3); }
  .crn-now { margin-top: 4px; border-radius: var(--r-lg); }
  .crn-now-head { flex-wrap: nowrap; padding: 14px 14px 0; }
  .crn-now-tag { height: 24px; padding: 0 9px; font-size: .58rem; white-space: nowrap; }
  .crn-now-step { font-size: .66rem; white-space: nowrap; }
  .crn-now-body { grid-template-columns: 1fr; gap: 14px; padding: 10px 14px 14px; }
  .crn-now-text h4 { font-size: 1.35rem; }
  .crn-goal { align-items: flex-start; padding: 14px; }
  .crn-goal-ico { width: 36px; height: 36px; }
  .crn-goal-text b { font-size: 1rem; }
}
/* ---------- Section tabs on phones and tablets: the same tiles as the desktop rail, in a row ---------- */
@media (max-width: 900px) {
  .rail { gap: 4px; padding: 8px 10px; }
  .rail a, .rail a.on { flex: 1 1 0; min-width: 0; max-width: 44px; height: 36px; border-radius: 4px; background: rgba(255,255,255,.045); color: var(--muted); transform: none; }
  .rail a.on { background: #fff !important; color: #0e0f11 !important; }
  .rail a.rail-foot { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
  .rail-sep { width: 2px; height: 18px; margin: 0 2px; }
}
@media (max-width: 420px) {
  .rail { gap: 3px; padding: 7px 8px; }
  .rail a, .rail a.on { height: 32px; }
  .rail svg { width: 17px; height: 17px; }
}

/* ---------- Hero copy: the word, defined ---------- */
.hx-def { position: relative; display: grid; gap: 10px; width: min(100%, 600px); margin-top: 22px; padding: 18px 20px 16px 22px; border-radius: 12px; background: linear-gradient(100deg, rgba(31,190,212,.09), rgba(255,255,255,.025) 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.hx-def::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #1fbed4, #8b6bff); box-shadow: 0 0 14px rgba(31,190,212,.6); }
.hx-def-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.hx-def-head b { color: #fff; font: 700 1.05rem Orbitron, sans-serif; letter-spacing: .06em; }
.hx-def-head span { color: var(--muted); font-size: .9rem; font-style: italic; }
.hx-def-head em { align-self: center; padding: 3px 7px; border-radius: 4px; background: rgba(255,255,255,.07); color: var(--text-2); font: 700 .58rem Inter, sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.investor-build .screen .copy .hx-def-text { max-width: none; color: var(--text-2); font-size: clamp(1.02rem, 1.25vw, 1.14rem); line-height: 1.55; }
.hx-def-text b { color: #fff; font-weight: 700; }
.hx-def-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); color: var(--muted); font-size: .82rem; }
.hx-def-foot img { width: auto; height: 20px; }
.hx-def-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(46,224,127,.12); color: var(--done); font: 700 .62rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.hx-def-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--done); box-shadow: 0 0 8px var(--done); animation: cr-blink 1.8s ease-in-out infinite; }
#top .copy > .actions { margin-top: 22px; }
@media (max-width: 560px) {
  .hx-def { padding: 14px 14px 12px 16px; }
  .hx-def-foot { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .hx-def-tag i { animation: none; } }
/* Touch screens keep no hover ring on the section tabs after a tap. */
@media (hover: none) { .rail a:hover { box-shadow: none; } }
@media (max-width: 760px) { .crn-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .crn-now-head { flex-wrap: wrap; gap: 8px; } }
@media (max-width: 360px) { .chap-head .chap { gap: 10px; } .chap-head .chap-rule { flex: 1 1 0; min-width: 0; } .chap-head .chap-lab { white-space: normal; } }

/* ---------- For investors: "Write to us" and "Public" tiles under the pitch; three things to ask for underneath ---------- */
.cv-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 600px; margin-top: 8px; }
.cv-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 12px 12px 12px; border-radius: 12px; background: rgba(255,255,255,.05); color: inherit; text-decoration: none; transition: background .15s, transform .15s; }
a.cv-link:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); }
.cv-link--mail { background: rgba(31,190,212,.1); }
.cv-link-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: rgba(31,190,212,.16); color: var(--accent); }
.cv-link--wp .cv-link-ico { background: rgba(255,255,255,.08); color: #fff; }
.cv-link-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cv-link-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cv-link-text .cr-lab { color: var(--muted); }
.cv-link-text a, .cv-link-text b { overflow: hidden; color: #fff; font-size: 1rem; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.cv-link-text a:hover { color: var(--accent); }
.cv-copy { position: relative; flex: none; width: 36px; height: 36px; }
.cv-link-arr { flex: none; width: 16px; height: 16px; margin-right: 6px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s, stroke .15s; }
a.cv-link:hover .cv-link-arr { stroke: #fff; transform: translate(2px, -2px); }

.cv-asks { padding: 22px clamp(18px, 4vw, 52px) clamp(22px, 3vw, 36px); border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.18); }
.cv-asks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cv-asks-head h4 { color: #fff; font-size: 1.05rem; font-weight: 700; }
.cv-ask-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cv-ask { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px; border-radius: 12px; background: #1b1c20; box-shadow: inset 0 2px 0 var(--k); color: inherit; text-decoration: none; transition: background .15s, transform .15s; }
.cv-ask:hover { background: #222328; transform: translateY(-3px); }
.cv-ask-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
.cv-ask-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cv-ask-text { display: grid; gap: 4px; align-content: start; }
.cv-ask-text b { color: #fff; font-size: 1.05rem; }
.cv-ask-text > span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.cv-ask-text em { margin-top: 4px; color: var(--k); font: 700 .78rem Inter, sans-serif; font-style: normal; }
.cv-ask-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; font-size: .9rem; font-weight: 700; transition: background .15s, color .15s; }
.cv-ask-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.cv-ask:hover .cv-ask-go { background: var(--k); color: #0e0f11; }
.cv-ask:hover .cv-ask-go svg { transform: translateX(3px); }
/* The founder call: both founders' faces, overlapped. */
.cv-ask-faces { display: flex; height: 44px; }
.cv-ask-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #1b1c20; }
.cv-ask-faces img + img { margin-left: -12px; }
.cv-ask:hover .cv-ask-faces img { box-shadow: 0 0 0 3px #222328; }
@media (max-width: 900px) { .cv-ask-grid { grid-template-columns: minmax(0, 1fr); } .cv-ask { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; } .cv-ask-go { grid-column: 1 / -1; } }
@media (max-width: 560px) { .cv-links { grid-template-columns: minmax(0, 1fr); } }
@media (hover: none) { a.cv-link:hover, .cv-ask:hover { transform: none; } .cv-ask:hover .cv-ask-go { background: rgba(255,255,255,.06); color: #fff; } }
.cv-links { display: flex; flex-wrap: wrap; max-width: none; }
.cv-link { flex: 1 1 auto; gap: 10px; padding: 10px; }
.cv-link-ico { width: 38px; height: 38px; }
.cv-link-text a, .cv-link-text b { overflow: visible; text-overflow: clip; }
.cv-copy { width: 34px; height: 34px; }
/* ---------- Navbar pre-launch: a charging battery and two lines of text, no outline ---------- */
.cr-status { gap: 11px; height: auto; margin-right: 10px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.cr-batt { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; width: 40px; height: 20px; padding: 3px; border-radius: 5px; background: rgba(255,255,255,.1); }
.cr-batt::after { content: ""; position: absolute; right: -5px; top: 6px; width: 3px; height: 8px; border-radius: 0 2px 2px 0; background: rgba(255,255,255,.18); }
.cr-batt i { border-radius: 2px; background: linear-gradient(180deg, #6ae6f4, #1fbed4); box-shadow: 0 0 8px rgba(31,190,212,.55); }
.cr-batt i.chg { position: relative; overflow: hidden; background: rgba(255,255,255,.08); box-shadow: none; }
.cr-batt i.chg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #6ae6f4, #1fbed4); animation: cr-charge 2.2s ease-in-out infinite; }
@keyframes cr-charge { 0%, 15% { opacity: 0; } 55%, 75% { opacity: 1; } 100% { opacity: 0; } }
.cr-status-txt { display: grid; gap: 1px; line-height: 1.1; }
.cr-status-txt b { color: #fff; font: 800 .66rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.cr-status-txt small { color: var(--muted); font-size: .72rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .cr-batt i.chg::after { animation: none; opacity: .5; } }
/* Phones: Discord takes the place of the pre-launch readout. */
@media (max-width: 700px) {
  .cr-status { display: none; }
  .chip-btn--discord { display: inline-flex !important; height: 36px; padding: 0 12px; font-size: .84rem; }
}
@media (max-width: 900px) { .chip-btn--discord { display: inline-flex !important; } }

/* ---------- Meet DEVORA callouts: a numbered disc in the step's colour, a plain title and one short line; they arrive in turn ---------- */
.dxl-lab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 1px; padding: 8px 14px 8px 8px; overflow: visible; border-radius: 12px; background: rgba(12,13,15,.95); box-shadow: 0 0 0 1.5px var(--nc), 0 0 26px color-mix(in srgb, var(--nc) 34%, transparent), 0 14px 30px rgba(0,0,0,.6); }
.dxl-num { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nc); color: #0b0c0e; font: 800 .78rem Orbitron, sans-serif; box-shadow: 0 0 12px color-mix(in srgb, var(--nc) 70%, transparent); }
.dxl-lab b { display: block; padding: 0; background: none; color: #fff; font: 700 .92rem/1.2 Inter, sans-serif; letter-spacing: -.005em; text-transform: none; }
.dxl-lab b::before { content: none; }
.dxl-lab small { display: block; padding: 0; color: var(--text-2); font: 500 .78rem/1.3 Inter, sans-serif; }
@keyframes dxl-lab-glow { 50% { box-shadow: 0 0 0 1.5px var(--nc), 0 0 40px color-mix(in srgb, var(--nc) 55%, transparent), 0 14px 30px rgba(0,0,0,.6); } }
.dxl-note.on .dxl-pt { transition-delay: calc(.05s + var(--nd, 0s)); }
.dxl-note.on .dxl-leg { transition-delay: calc(.2s + var(--nd, 0s)); }
.dxl-note.on .dxl-lab { transition-delay: calc(.4s + var(--nd, 0s)); }
@media (max-width: 640px) {
  .dxl-lab { column-gap: 7px; padding: 5px 10px 5px 5px; }
  .dxl-num { grid-row: auto; width: 20px; height: 20px; font-size: .6rem; }
  .dxl-lab b { font-size: .72rem; }
  .dxl-lab small { display: none; }
}
.dxl-lab { grid-template-columns: auto auto; width: max-content; white-space: nowrap; }

/* ---------- What you can ask for: three rows, each an icon, the offer and one button ---------- */
.cv-ask-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cv-ask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: #1b1c20; box-shadow: none; transform: none; }
.cv-ask:hover { background: #1f2025; transform: none; }
.cv-ask--key { background: rgba(31,190,212,.09); box-shadow: inset 0 0 0 1px rgba(31,190,212,.32); }
.cv-ask--key:hover { background: rgba(31,190,212,.13); }
.cv-ask-ico { width: 44px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; }
.cv-ask--key .cv-ask-ico { background: var(--accent); color: #0e0f11; }
.cv-ask-text { gap: 3px; }
.cv-ask-text b { font-size: 1rem; }
.cv-ask-text > span:not(.cv-ask-with) { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.cv-ask-tag { justify-self: start; margin-top: 6px; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,.06); color: var(--text-2); font: 800 .6rem Inter, sans-serif; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.cv-ask--key .cv-ask-tag { background: rgba(31,190,212,.14); color: var(--accent); }
/* The founder call: two small faces and who you will talk to. */
.cv-ask-with { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--text-2); font-size: .84rem; font-weight: 600; }
.cv-ask-faces { display: inline-flex; height: auto; }
.cv-ask-faces img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #1b1c20; }
.cv-ask-faces img + img { margin-left: -7px; }
.cv-ask:hover .cv-ask-faces img { box-shadow: 0 0 0 2px #1f2025; }
.cv-ask-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 8px; background: #2a2b31; color: #fff; font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.cv-ask-btn:hover { background: #fff; color: #0e0f11; }
.cv-ask--key .cv-ask-btn { background: var(--accent); color: #0e0f11; }
.cv-ask--key .cv-ask-btn:hover { background: #fff; }
@media (max-width: 1180px) { .cv-ask-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .cv-ask { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none; } .cv-ask-go { grid-column: auto; } }
@media (max-width: 480px) { .cv-ask { grid-template-columns: auto minmax(0, 1fr); } .cv-ask-btn { grid-column: 1 / -1; } }
@media (hover: none) { .cv-ask-btn:hover { background: #2a2b31; color: #fff; } .cv-ask--key .cv-ask-btn:hover { background: var(--accent); color: #0e0f11; } }
.cv-ask-text .cv-ask-tag { margin-top: 8px; padding: 4px 8px; color: var(--text-2); font: 800 .58rem/1 Inter, sans-serif; letter-spacing: .12em; white-space: nowrap; }
.cv-ask--key .cv-ask-text .cv-ask-tag { color: var(--accent); }
.cv-ask-with { white-space: nowrap; }

/* ---------- Meet DEVORA callouts, refined: a spotlight on the targets, a clean ring and line, a calm label ---------- */
.dxl-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(6,7,9,.5); -webkit-mask-composite: source-in; mask-composite: intersect; }
.dxl-view::after { background: none; }
.dxl-pt { border: 2px solid var(--nc); background: none; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 22px color-mix(in srgb, var(--nc) 45%, transparent); }
.dxl-pt::after { inset: -2px; border-width: 2px; animation: dxl-ring 2.4s ease-out infinite; }
@keyframes dxl-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.18); opacity: 0; } }
.dxl-leg { height: 2px; box-shadow: 0 0 6px color-mix(in srgb, var(--nc) 60%, transparent); }
.dxl-leg::after { top: -3px; width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(12,13,15,.9); }
.dxl-lab { padding: 9px 16px 9px 9px; border-radius: 12px; background: rgba(14,15,17,.95); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 16px 34px rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.dxl-note.on .dxl-lab { animation: none; }
.dxl-num { width: 30px; height: 30px; box-shadow: none; }
.dxl-lab b { font-size: .95rem; }
.dxl-lab small { color: var(--muted); font-size: .8rem; }
.dxl-lab::after { content: ""; position: absolute; left: 9px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: var(--nc); opacity: .9; }
@media (max-width: 640px) {
  .dxl-lab { padding: 5px 11px 5px 5px; border-radius: 10px; }
  .dxl-num { width: 20px; height: 20px; }
  .dxl-lab::after { left: 5px; right: 11px; }
}
@media (prefers-reduced-motion: reduce) { .dxl-pt::after { animation: none; } }

/* ---------- Hero tag: the mark, what this page is, and the round's status. Flat, no outline. ---------- */
.hx-kick { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 5px; border-radius: 10px; background: rgba(255,255,255,.05); }
.hx-kick-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(31,190,212,.16); }
.hx-kick-mark img { width: 14px; height: 14px; }
.hx-kick b { color: #fff; font: 800 .68rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.hx-kick-yr { color: var(--muted); font: 700 .68rem Orbitron, sans-serif; letter-spacing: .08em; }
.hx-kick-live { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; background: rgba(46,224,127,.13); color: var(--done); font: 800 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hx-kick-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--done); box-shadow: 0 0 8px var(--done); animation: cr-blink 1.8s ease-in-out infinite; }
@media (max-width: 380px) { .hx-kick-yr { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-kick-live i { animation: none; } }
.hx-kick b, .hx-kick-live { white-space: nowrap; }
@media (max-width: 480px) { .hx-kick { gap: 8px; } .hx-kick-yr { display: none; } .hx-kick b { font-size: .62rem; letter-spacing: .12em; } .hx-kick-live { padding: 0 8px; font-size: .58rem; letter-spacing: .1em; } }

/* ---------- What you can ask for: the deck card set apart by colour alone ---------- */
.cv-ask--key, .cv-ask--key:hover { box-shadow: none; }
.cv-ask--key { background: linear-gradient(120deg, rgba(31,190,212,.16), rgba(31,190,212,.05) 70%); }
.cv-ask--key:hover { background: linear-gradient(120deg, rgba(31,190,212,.2), rgba(31,190,212,.08) 70%); }

/* ---------- "Get the investor deck": Chadly, his Telegram handle, one button ---------- */
.crd-who { position: relative; width: 84px; height: 84px; margin: 4px auto 18px; }
.crd-who img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #16171a, 0 0 0 6px rgba(31,190,212,.5), 0 0 40px rgba(31,190,212,.35); }
.crd-tg { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #229ed9; box-shadow: 0 0 0 3px #16171a; }
.crd-tg svg { width: 17px; height: 17px; }
.crd-tg svg .fill, .crd-go svg .fill { fill: #fff; stroke: none; }
.crd-card { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--tile); text-align: left; }
.crd-card-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.crd-card-text b { color: #fff; font-size: .92rem; }
.crd-card-text small { color: var(--muted); font-size: .76rem; }
.crd-handle { padding: 6px 10px; border-radius: 8px; background: rgba(34,158,217,.16); color: #5cc0ee; font: 700 .86rem Inter, sans-serif; white-space: nowrap; }
.crd-copy { position: relative; flex: none; width: 34px; height: 34px; }
.crd-go .cr-cta-ico svg { width: 18px; height: 18px; }
.cr-modal .crd-alt { margin-top: 14px; color: var(--muted); font-size: .84rem; }
.crd-alt a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.crd-alt a:hover { color: var(--accent); }
@media (max-width: 420px) { .crd-card { gap: 8px; padding-left: 12px; } .crd-card-text small { display: none; } .crd-handle { padding: 6px 8px; font-size: .8rem; } }
/* ---------- "This is where the game ends": a keep-scrolling cue with the scene's progress ---------- */
.eg-hint { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(22,23,26,.92); box-shadow: 0 14px 30px rgba(0,0,0,.45); color: #fff; font-size: inherit; letter-spacing: 0; text-transform: none; opacity: 1; backdrop-filter: blur(8px); }
.eg-hint b { font: 700 .74rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.eg-mouse { position: relative; width: 16px; height: 24px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.eg-mouse i { position: absolute; left: 50%; top: 5px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--accent); animation: eg-wheel 1.6s ease-in-out infinite; }
@keyframes eg-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(7px); opacity: 0; } 100% { opacity: 0; } }
.eg-prog { position: relative; width: 64px; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.1); }
.eg-prog i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #1fbed4, #8b6bff); transform-origin: left; transform: scaleX(var(--p, 0)); }
.eg-arrow { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: eg-nudge 1.4s ease-in-out infinite; }
@keyframes eg-nudge { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .eg-mouse i, .eg-arrow { animation: none; } }
/* ---------- Hero sizing: a wider frame, more air between copy and visual, one even rhythm down the copy ---------- */
@media (min-width: 901px) {
  #top.screen { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 5vw, 5rem); }
  #top .copy { max-width: 560px; }
  .investor-build .screen .title.hx-title { margin-top: 26px; }
  .hx-def { margin-top: 30px; padding: 20px 22px 16px 24px; gap: 12px; }
  .investor-build .screen .copy .hx-def-text { font-size: clamp(1rem, 1.12vw, 1.08rem); line-height: 1.6; }
  .hx-def-head b { font-size: .98rem; }
  .hx-def-head span { font-size: .86rem; }
  .hx-def-foot { padding-top: 14px; font-size: .8rem; }
  .hx-def-foot img { height: 18px; }
  #top .copy > .actions { margin-top: 30px; gap: 12px; }
  #top .actions .cr-cta, #top .actions .cr-cta2 { height: 54px; }
  .hv-game { left: -8px; }
}
/* Mid-size screens: the floating cards a touch smaller so the launcher stays the hero. */
@media (min-width: 901px) and (max-width: 1440px) {
  .hv-card { width: 214px; padding: 12px; gap: 8px; font-size: .72rem; }
  .hv-game { width: 200px; padding: 0; gap: 0; }
  .hv-miss { width: 244px; }
}
/* ---------- Entry console: the Play button asks to be pressed ---------- */
.cre-play { position: relative; isolation: isolate; overflow: hidden; gap: 14px; animation: cre-breathe 2.6s ease-in-out infinite; transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s; }
@keyframes cre-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,190,212,.0), 0 10px 26px rgba(31,190,212,.22); } 50% { box-shadow: 0 0 0 6px rgba(31,190,212,.16), 0 14px 40px rgba(31,190,212,.45); } }
/* A light sweep crosses the button every few seconds. */
.cre-play::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%); background-size: 260% 100%; background-position: 130% 0; animation: cre-sweep 3.4s ease-in-out infinite 1s; }
@keyframes cre-sweep { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
/* The play icon in a dark tile, with a ring that keeps pulsing out of it. */
.cre-play-ico { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #0e0f11; color: var(--accent); }
.cre-play-ico svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.cre-play-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(14,15,17,.6); animation: cre-ring 1.8s ease-out infinite; }
@keyframes cre-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.cre-play-arr { width: 18px; height: 18px; fill: none !important; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: cre-nudge 1.3s ease-in-out infinite; }
@keyframes cre-nudge { 50% { transform: translateX(4px); } }
.cre-play:hover { transform: translateY(-2px) scale(1.01); animation-play-state: paused; box-shadow: 0 0 0 6px rgba(31,190,212,.22), 0 16px 44px rgba(31,190,212,.5); }
.cre-play:active { transform: translateY(0) scale(.99); }
.cre-console.is-playing .cre-play, .cre-console.is-playing .cre-play::after, .cre-console.is-playing .cre-play-ico::after, .cre-console.is-playing .cre-play-arr { animation: none; }
@media (prefers-reduced-motion: reduce) { .cre-play, .cre-play::after, .cre-play-ico::after, .cre-play-arr { animation: none; } }
@media (min-width: 901px) and (max-width: 1180px) { .hv-miss { display: none; } .hv-prof { width: 200px; } }
/* ---------- Meet DEVORA callouts, in the site's own language: white tags like the selected step tile, a dark number tile in the step's colour, white rings and leader lines ---------- */
/* Same look as the hero arena labels: white tag, a solid number circle in the step's colour with a soft ring */
.dxl-lab { column-gap: 10px; padding: 8px 15px 8px 8px; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.5); backdrop-filter: none; }
.dxl-lab::after { content: none; }
.dxl-num { width: 28px; height: 28px; border-radius: 50%; background: var(--nc); color: #0e0f11; font: 800 .8rem/1 Inter, sans-serif; letter-spacing: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nc) 22%, transparent); }
.dxl-lab b { color: #0e0f11; font: 700 .94rem/1.2 Inter, sans-serif; letter-spacing: -.01em; }
.dxl-lab small { color: #6b6e76; font: 600 .78rem/1.3 Inter, sans-serif; }
.dxl-pt { border: 2px solid #fff; background: color-mix(in srgb, var(--nc) 10%, transparent); box-shadow: 0 0 0 3px rgba(14,15,17,.45), 0 0 26px color-mix(in srgb, var(--nc) 40%, transparent); }
.dxl-pt::after { border-color: #fff; }
.dxl-leg { height: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(14,15,17,.35); }
.dxl-leg::after { top: -3px; width: 8px; height: 8px; background: #fff; box-shadow: 0 0 0 3px rgba(14,15,17,.6); }
.dxl-spot { background: rgba(6,7,9,.42); }
@media (max-width: 640px) {
  .dxl-lab { column-gap: 7px; padding: 5px 10px 5px 5px; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
  .dxl-num { width: 20px; height: 20px; border-radius: 50%; font-size: .64rem; box-shadow: 0 0 0 2px color-mix(in srgb, var(--nc) 22%, transparent); }
  .dxl-lab b { font-size: .74rem; }
}

/* Text for search and screen readers only. */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Speed: the headline paints at once ---------- */
/* Both title lines fill the copy column (up to 600px): widths measured in Orbitron at 100px. */
#top .copy { container-type: inline-size; }
.hx-title .hx-l1 { font-size: calc(min(100cqw, 600px) * .12422) !important; }
.hx-title .hx-l2 { font-size: calc(min(100cqw, 600px) * .16694) !important; }
/* The headline slides in but is never hidden, so it counts as painted straight away. */
.js #top .copy > h1 { animation: hx-in-title .8s cubic-bezier(.22,1,.36,1) both .08s; }
@keyframes hx-in-title { from { transform: translateY(16px); } }
/* The soft glows are already gradients; no blur filter needed. */
.hx-aurora i { will-change: transform; }

/* ---------- Whitepaper: chapters on the left, the page in the middle, "On this page" on the right ---------- */
.is-wp .sub-main > .wrap.wp-wrap { width: min(1360px, calc(100% - 2.5rem)); }
.wp { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; gap: clamp(24px, 3.5vw, 48px); align-items: start; margin-top: 18px; }
.wp-side { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; scrollbar-width: thin; }
.wp-side-tog { display: none; }
.wp-side-in { display: grid; gap: 12px; padding: 14px 10px 14px 12px; border-radius: var(--r-xl); background: #16171a; }
.wp-nav-part { margin: 8px 8px 4px; color: var(--muted); font: 800 .62rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.wp-nav-list, .wp-nav-list ul { margin: 0; padding: 0; list-style: none; }
.wp-nav-list > li { position: relative; }
.wp-nav a { display: block; padding: 7px 34px 7px 10px; border-radius: 8px; color: var(--text-2); font-size: .88rem; line-height: 1.35; text-decoration: none; }
.wp-nav a:hover { background: var(--tile); color: #fff; }
.wp-nav a[aria-current="page"] { background: #fff; color: #0e0f11; font-weight: 700; }
.wp-nav-list ul { display: none; margin: 2px 0 6px 12px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.08); }
.wp-nav-sec.open > ul { display: block; }
.wp-nav-list ul a { padding-right: 10px; font-size: .84rem; color: var(--muted); }
.wp-nav-list ul a.d2 { padding-left: 20px; }
.wp-nav-tog { position: absolute; right: 2px; top: 3px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.wp-nav-tog:hover { background: var(--tile); color: #fff; }
.wp-nav-tog svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.wp-nav-sec.open > .wp-nav-tog svg { transform: rotate(90deg); }
.wp-nav-sec > a[aria-current="page"] + .wp-nav-tog { color: #0e0f11; }
/* The page. */
.wp-body { min-width: 0; max-width: 74ch; color: #c8cad0; font-size: 1.04rem; line-height: 1.75; }
.wp-head { display: grid; gap: 10px; margin-bottom: 18px; }
.wp-head h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.wp-body > p { margin: 0 0 16px; }
.wp-body b { color: #fff; }
.wp-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(31,190,212,.35); text-underline-offset: 3px; }
.wp-body a:hover { text-decoration-color: currentColor; }
.wp-body h2 { margin: 40px 0 12px; scroll-margin-top: 80px; color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.wp-body h3 { margin: 28px 0 10px; scroll-margin-top: 80px; color: #fff; font-size: 1.14rem; font-weight: 700; line-height: 1.3; }
.wp-body hr { height: 1px; margin: 34px 0; border: 0; background: rgba(255,255,255,.08); }
.wp-body ul, .wp-body ol:not(.wp-flow) { margin: 0 0 18px; padding-left: 22px; }
.wp-body li { margin-bottom: 6px; }
.wp-body li::marker { color: var(--accent); }
.wp-body li > ul, .wp-body li > ol { margin: 6px 0 0; }
.wp-body code { padding: 2px 6px; border-radius: 5px; background: var(--tile); color: #fff; font-size: .9em; }
.wp-body pre { margin: 0 0 18px; padding: 14px 16px; overflow: auto; border-radius: 10px; background: #16171a; }
.wp-body pre code { padding: 0; background: none; }
.wp-note { margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; background: rgba(255,176,32,.08); box-shadow: inset 3px 0 0 #ffb020; color: #e9e2d2; font-size: .94rem; }
.wp-note p { margin: 0; }
.wp-note p + p { margin-top: 8px; }
.wp-table { margin: 0 0 20px; overflow-x: auto; border-radius: 10px; background: #16171a; }
.wp-table table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.wp-table th { padding: 11px 14px; background: #1d1e22; color: #fff; font-weight: 700; text-align: left; white-space: nowrap; }
.wp-table td { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.06); }
.wp-table tr:hover td { background: rgba(255,255,255,.02); }
.wp-fig { margin: 8px 0 24px; }
.wp-fig img { display: block; width: 100%; height: auto; border-radius: 12px; background: #16171a; }
.wp-fig figcaption { margin-top: 8px; color: var(--muted); font-size: .84rem; }
/* Step-by-step flows. */
.wp-flow { display: grid; margin: 4px 0 22px; padding: 0; list-style: none; }
.wp-flow li { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px 10px 10px; border-radius: 10px; background: #16171a; color: #fff; font-weight: 600; }
.wp-flow li + li { margin-top: 18px; }
.wp-flow li + li::before { content: ""; position: absolute; left: 25px; top: -18px; width: 2px; height: 18px; background: linear-gradient(var(--accent), rgba(31,190,212,.3)); }
.wp-flow li::marker { content: none; }
.wp-flow span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(31,190,212,.14); color: var(--accent); font: 800 .72rem Orbitron, sans-serif; }
.wp-flow li:last-child span { background: var(--accent); color: #0e0f11; }
/* The chapter grid on the welcome page. */
.wp-chapters { margin-top: 40px; }
.wp-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wp-body a.wp-ch { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: #16171a; color: var(--text-2); text-decoration: none; transition: background .15s, transform .15s; }
.wp-body a.wp-ch:hover { background: #1d1e22; transform: translateY(-2px); }
.wp-ch span { color: var(--accent); font: 800 .72rem Orbitron, sans-serif; }
.wp-ch b { font-size: 1.02rem; }
.wp-ch small { color: var(--muted); font-size: .78rem; }
/* Previous and next. */
.wp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); }
.wp-body a.wp-pn { position: relative; display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #16171a; color: #fff; text-decoration: none; transition: background .15s; }
.wp-body a.wp-pn:hover { background: #1d1e22; }
.wp-pn small { color: var(--muted); font-size: .76rem; }
.wp-pn b { font-size: .98rem; }
.wp-pn svg { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wp-body a.wp-pn--prev { padding-left: 42px; }
.wp-pn--prev svg { left: 14px; }
.wp-body a.wp-pn--next { padding-right: 42px; text-align: right; grid-column: 2; }
.wp-pn--next svg { right: 14px; }
/* On this page. */
.wp-toc.legal-toc { top: 76px; max-height: calc(100vh - 92px); padding: 14px 10px; }
.wp-toc li.d2 a { padding-left: 22px; font-size: .8rem; }
.wp-toc a { font-size: .84rem; }
@media (max-width: 1180px) {
  .wp { grid-template-columns: 240px minmax(0, 1fr); }
  .wp-toc.legal-toc { display: none; }
}
@media (max-width: 900px) {
  .wp { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wp-side { position: static; max-height: none; overflow: visible; }
  .wp-side-tog { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: #16171a; color: var(--muted); font: 600 .9rem Inter, sans-serif; cursor: pointer; }
  .wp-side-tog svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
  .wp-side-tog b { margin-left: auto; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
  .wp-side-in { display: none; margin-top: 8px; }
  .wp.nav-open .wp-side-in { display: grid; }
  .wp-body { font-size: 1rem; }
  .wp-pager { grid-template-columns: minmax(0, 1fr); }
  .wp-body a.wp-pn--next { grid-column: auto; }
}
/* Drawn diagrams: the original spacing, the lines in cyan, centred in a panel. */
.wp-diagram { margin: 4px 0 22px; padding: 20px 16px; overflow-x: auto; border-radius: 12px; background: #16171a; text-align: center; }
.wp-diagram pre { display: inline-block; margin: 0; color: #fff; font: 600 .86rem/1.35 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; text-align: left; white-space: pre; }
.wp-diagram i { color: var(--accent); font-style: normal; font-weight: 400; }
/* The sidebar scrolls inside its panel, so nothing is clipped. */
.wp-side { overflow: visible; max-height: none; }
.wp-side-in { max-height: calc(100vh - 92px); overflow: auto; scrollbar-width: thin; }
@media (max-width: 900px) { .wp-side-in { max-height: none; } .wp-diagram pre { font-size: .72rem; } }
.wp-side-in { grid-template-columns: minmax(0, 1fr); }

/* ---------- Whitepaper, round 2: search in the navbar ---------- */
.wp-q { position: relative; flex: 0 1 420px; margin-left: clamp(16px, 4vw, 56px); }
.wp-q-open { display: none; }
.wp-q-box { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 12px; border-radius: 10px; background: #1b1c20; color: var(--muted); cursor: text; transition: background .15s, box-shadow .15s; }
.wp-q-box:hover { background: #212226; }
.wp-q-box:focus-within { background: #24262b; box-shadow: inset 0 -2px 0 var(--accent); color: #fff; }
.wp-q-box svg, .wp-q-open svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wp-q-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: #fff; font: 500 .88rem Inter, sans-serif; }
.wp-q-box input::placeholder { color: var(--muted); }
.wp-q-box input::-webkit-search-cancel-button { display: none; }
.wp-q-box kbd { padding: 3px 7px; border-radius: 6px; background: #2a2c31; color: var(--muted); font: 700 .66rem Inter, sans-serif; white-space: nowrap; }
.wp-q-box:focus-within kbd { display: none; }
.wp-q-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; gap: 4px; max-height: min(70vh, 560px); overflow: auto; padding: 8px; border-radius: 14px; background: #16171a; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.65); }
.wp-q-results[hidden] { display: none; }
.wp-q-results a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; }
.wp-q-results a:hover, .wp-q-results a.on { background: #212226; }
.wp-q-results a.on { box-shadow: inset 3px 0 0 var(--accent); }
.wp-q-results small { color: var(--accent); font: 700 .6rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.wp-q-results b { color: #fff; font-size: .92rem; }
.wp-q-results span { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.wp-q-results mark { padding: 0 2px; border-radius: 3px; background: rgba(31,190,212,.22); color: #fff; }
.wp-q-results p { padding: 12px; color: var(--muted); font-size: .86rem; }
@media (max-width: 900px) {
  .wp-q { flex: none; margin-left: auto; margin-right: 8px; position: static; }
  .wp-q-open { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: #1b1c20; color: #fff; cursor: pointer; }
  .wp-q-box { display: none; }
  .wp-q.open .wp-q-box { position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); z-index: 61; display: flex; height: 46px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 20px 50px rgba(0,0,0,.6); }
  .wp-q-results { left: 12px; right: 12px; top: calc(100% + 62px); }
  .is-wp .sys .right { margin-left: 0; }
}

/* ---------- Sidebar: smaller type, an icon per chapter ---------- */
.wp-nav a { padding: 6px 30px 6px 8px; font-size: .82rem; }
.wp-nav-top { display: flex !important; align-items: center; gap: 9px; color: #d6d8dd !important; font-weight: 600; }
.wp-nav-top svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wp-nav-top:hover svg { stroke: var(--accent); }
.wp-nav-sec.open > .wp-nav-top svg, .wp-nav-top[aria-current="page"] svg { stroke: var(--accent); }
.wp-nav-top[aria-current="page"] { color: #0e0f11 !important; }
.wp-nav-top[aria-current="page"] svg { stroke: #0e0f11; }
.wp-nav-list ul { margin-left: 15px; }
.wp-nav-list ul a { padding: 5px 8px; font-size: .78rem; }
.wp-nav-list ul a.d2 { padding-left: 16px; }
.wp-nav-tog { top: 2px; width: 26px; height: 26px; }
.wp-nav-part { margin: 10px 8px 4px; font-size: .58rem; }
.wp-side-in { padding: 12px 8px; }

/* ---------- Page header: chapter icon, title, reading time ---------- */
.wp-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
.wp-head-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; margin-top: 4px; border-radius: 14px; background: linear-gradient(150deg, rgba(31,190,212,.24), rgba(139,107,255,.16)); box-shadow: inset 0 0 0 1px rgba(31,190,212,.3); }
.wp-head-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wp-head-txt { display: grid; gap: 8px; min-width: 0; }
.wp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .8rem; }
.wp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.wp-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Reading: brighter text, a lead, takeaways, short lines kept together ---------- */
.wp-body { max-width: 70ch; color: #d2d4d9; font-size: 1.02rem; line-height: 1.72; }
.wp-body > p, .wp-lines p { margin: 0 0 14px; }
.wp-body p.wp-lead { margin-bottom: 20px; color: #fff; font-size: 1.22rem; line-height: 1.55; letter-spacing: -.005em; }
.wp-body p.wp-key { position: relative; margin: 22px 0; padding: 14px 18px 14px 46px; border-radius: 12px; background: linear-gradient(100deg, rgba(31,190,212,.13), rgba(31,190,212,.03) 70%); color: #fff; font-size: 1.06rem; line-height: 1.5; }
.wp-body p.wp-key::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wp-lines { margin: 2px 0 18px; padding: 4px 0 4px 18px; border-left: 2px solid rgba(31,190,212,.35); }
.wp-lines p { margin: 0 0 6px; color: #e4e5e9; }
.wp-lines p:last-child { margin-bottom: 0; }
.wp-body h2 { margin-top: 44px; font-size: 1.55rem; }
.wp-body h3 { color: #fff; }
.wp-body hr { margin: 38px 0 0; background: transparent; }

/* ---------- Visuals in place of words ---------- */
/* "Term: description" lists become cards. */
.wp-defs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 6px 0 22px; }
.wp-def { padding: 14px 16px; border-radius: 12px; background: #16171a; box-shadow: inset 0 2px 0 rgba(31,190,212,.55); }
.wp-def b { display: block; margin-bottom: 4px; color: #fff; font-size: .98rem; }
.wp-def b a { color: #fff; text-decoration: none; }
.wp-def b a:hover { color: var(--accent); }
.wp-def p { margin: 0; color: #b9bcc3; font-size: .9rem; line-height: 1.55; }
/* Lists of a few words each become chips. */
.wp-body ul.wp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; padding: 0; list-style: none; }
.wp-chips li { margin: 0; padding: 7px 13px; border-radius: 999px; background: #1d1e22; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: #fff; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.wp-chips li::marker { content: none; }
.wp-chips a { color: #fff; text-decoration: none; }
/* Short flows run across the page with arrows; long ones stay as a column. */
.wp-flow li { padding: 9px 14px 9px 9px; }
.wp-flow li + li { margin-top: 12px; }
.wp-flow li + li::before { top: -12px; height: 12px; }
.wp-flow b { font-weight: 600; }
.wp-flow--row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.wp-flow--row li, .wp-flow--row li + li { margin: 0; padding: 7px 12px 7px 7px; }
.wp-flow--row li + li { margin-left: 30px; }
.wp-flow--row li + li::before { left: -24px; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: var(--accent); }
.wp-flow--row li + li::after { content: ""; position: absolute; left: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); }
.wp-flow--row span { width: 26px; height: 26px; border-radius: 7px; font-size: .62rem; }
/* Percentages carry a bar. */
.wp-pct { position: relative; display: inline-block; min-width: 110px; padding: 2px 0 6px; }
.wp-pct::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--v), rgba(255,255,255,.08) var(--v)); }
/* Chapter and page cards. */
.wp-chapters { margin-top: 48px; }
.wp-ch-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wp-body a.wp-ch { position: relative; gap: 6px; padding: 16px; }
.wp-ch-ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 10px; background: rgba(31,190,212,.12); }
.wp-ch-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wp-ch-no { color: var(--accent); font: 800 .72rem Orbitron, sans-serif; }
.wp-ch b { color: #fff; }
.wp-ch small { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.wp-ch em { position: absolute; right: 14px; top: 16px; color: var(--muted); font: 600 .7rem Inter, sans-serif; font-style: normal; }
@media (max-width: 900px) {
  .wp-head { gap: 12px; }
  .wp-head-ico { width: 42px; height: 42px; border-radius: 12px; }
  .wp-body p.wp-lead { font-size: 1.1rem; }
  .wp-flow--row { display: grid; }
  .wp-flow--row li + li { margin: 10px 0 0; }
  .wp-flow--row li + li::before { left: 19px; top: -10px; width: 2px; height: 10px; margin: 0; }
  .wp-flow--row li + li::after { display: none; }
}
.wp-q-results mark { padding: 0; border-radius: 2px; }
.wp-body p.wp-label { margin: 22px 0 10px; color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wp-body p.wp-label b { color: var(--accent); font-weight: 800; }
.wp-body p.wp-stat { display: inline-block; margin: 6px 0 18px; padding: 12px 18px; border-radius: 12px; background: #16171a; box-shadow: inset 0 -2px 0 var(--accent); }
.wp-body p.wp-stat b { color: var(--accent); font: 800 1.5rem Orbitron, sans-serif; letter-spacing: .02em; }

/* ---------- Whitepaper charts: share tables drawn as a donut with a legend ---------- */
.wp-donut { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 28px; margin: 8px 0 26px; padding: 24px; border-radius: 14px; background: #16171a; }
.wp-donut-ring { position: relative; width: 220px; aspect-ratio: 1; }
.wp-donut-ring svg { display: block; width: 100%; height: 100%; }
.wp-donut-ring circle { transition: stroke-width .2s; }
.wp-donut-ring circle:hover { stroke-width: 34; }
.wp-donut-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.wp-donut-ring b { color: #fff; font: 800 1.8rem Orbitron, sans-serif; }
.wp-donut-ring small { color: var(--muted); font: 700 .62rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.wp-body ul.wp-donut-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wp-donut-legend li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #1b1c20; }
.wp-donut-legend li::marker { content: none; }
.wp-donut-legend i { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.wp-donut-legend span { display: grid; flex: 1; min-width: 0; color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.3; }
.wp-donut-legend small { color: var(--muted); font-size: .76rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.wp-donut-legend b { color: var(--c); font: 800 1rem Orbitron, sans-serif; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .wp-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 18px; } .wp-donut-ring { width: 180px; } .wp-body ul.wp-donut-legend { width: 100%; } }
/* Screenshots and charts sit in a frame. */
.wp-fig img { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.45); }

/* ---------- Whitepaper, round 3: node maps, charts, ladders, comparisons, stats, callouts, timeline ---------- */
/* Node maps: diagrams drawn as boxes joined by curved arrows. */
.wp-map { margin: 6px 0 24px; padding: 22px 16px; border-radius: 14px; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(31,190,212,.07), transparent 70%), #16171a; }
.wp-map figcaption { margin: 0 0 12px 4px; color: var(--muted); font: 800 .64rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.wp-map-in { overflow-x: auto; scrollbar-width: thin; }
.wp-map svg { display: block; max-width: 100%; min-width: var(--mw); height: auto; margin: 0 auto; overflow: visible; }
.dg-e { fill: none; stroke: rgba(31,190,212,.7); stroke-width: 1.8; }
.dg-loop { stroke-dasharray: 5 5; stroke: rgba(139,107,255,.8); }
.dg-ah { fill: #1fbed4; }
.dg-lp { fill: #a993ff; font: 700 9px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; }
.wp-map rect { stroke-width: 1.2; }
.dg-mid rect { fill: #1d1e22; stroke: rgba(255,255,255,.14); }
.dg-root rect { fill: rgba(31,190,212,.16); stroke: #1fbed4; }
.dg-end rect { fill: #fff; stroke: #fff; }
.dg-t { fill: #fff; font: 700 14px Inter, sans-serif; text-anchor: middle; }
.dg-s { fill: #a6a9b1; font: 500 12px Inter, sans-serif; text-anchor: middle; }
.dg-end .dg-t { fill: #0e0f11; }
.dg-end .dg-s { fill: #4b4f58; }
/* The halving chart. */
.wp-chart { margin: 6px 0 14px; padding: 18px 18px 8px; border-radius: 14px; background: #16171a; }
.wp-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.wp-chart-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; color: var(--muted); font-size: .78rem; }
.wp-chart-key span { display: inline-flex; align-items: center; gap: 7px; }
.wp-chart-key .k-bar::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(#5fe3f2, #1fbed4); }
.wp-chart-key .k-line::before { content: ""; width: 16px; height: 2px; border-radius: 1px; background: #a993ff; box-shadow: 0 0 0 1px rgba(139,107,255,.3); }
.hv-bar { fill: url(#none); fill: #1fbed4; opacity: .85; }
.hv-v { fill: #fff; font: 800 12px Orbitron, sans-serif; text-anchor: middle; }
.hv-x { fill: #fff; font: 700 11px Inter, sans-serif; text-anchor: middle; }
.hv-y { fill: #7d818b; font: 500 10px Inter, sans-serif; text-anchor: middle; }
.hv-line { fill: none; stroke: #a993ff; stroke-width: 2.4; }
.hv-dot { fill: #16171a; stroke: #a993ff; stroke-width: 2.4; }
.hv-p { fill: #c9b9ff; font: 700 10.5px Inter, sans-serif; }
/* Tier ladders. */
.wp-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 22px; }
.wp-tier { position: relative; display: grid; align-content: start; gap: 2px; padding: 14px 14px 16px; border-radius: 12px; background: linear-gradient(170deg, color-mix(in srgb, var(--tc) 18%, #16171a), #16171a 70%); box-shadow: inset 0 2px 0 var(--tc); }
.wp-tier-n { color: var(--tc); font: 800 .66rem Orbitron, sans-serif; }
.wp-tier b { color: #fff; font-size: 1.05rem; }
.wp-tier-bar { display: block; height: 4px; margin: 8px 0 8px; border-radius: 2px; background: linear-gradient(90deg, var(--tc) calc(var(--lv) * 100%), rgba(255,255,255,.08) calc(var(--lv) * 100%)); }
.wp-tier small { margin-top: 4px; color: var(--muted); font: 700 .58rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.wp-tier span { color: #e4e5e9; font-size: .84rem; line-height: 1.35; }
.wp-flow--tiers li:nth-child(1) span { background: rgba(138,143,153,.2); color: #b6bac2; }
.wp-flow--tiers li:nth-child(2) span { background: rgba(200,138,90,.2); color: #e0a77a; }
.wp-flow--tiers li:nth-child(3) span { background: rgba(184,195,209,.2); color: #dfe6ee; }
.wp-flow--tiers li:nth-child(4) span { background: rgba(255,176,32,.2); color: #ffc457; }
.wp-flow--tiers li:nth-child(5) span { background: #8b6bff; color: #fff; }
.wp-flow--tiers li:last-child { box-shadow: inset 0 0 0 1px rgba(139,107,255,.5); }
/* Comparisons. */
.wp-compare { display: grid; margin: 6px 0 24px; overflow: hidden; border-radius: 14px; background: #16171a; }
.wp-cmp-row { display: grid; grid-template-columns: minmax(110px, .8fr) 1fr 1fr; align-items: center; gap: 0 16px; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.06); }
.wp-cmp-head { border-top: 0; background: #1d1e22; }
.wp-cmp-head b { color: var(--muted); font: 800 .66rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.wp-cmp-head b:last-child { color: var(--accent); }
.wp-cmp-row > span { color: #fff; font-size: .9rem; font-weight: 700; }
.wp-body .wp-compare p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .9rem; line-height: 1.4; }
.wp-cmp-no { color: var(--muted); }
.wp-cmp-yes { color: #fff; }
.wp-compare svg { flex: none; width: 16px; height: 16px; margin-top: 1px; padding: 2px; border-radius: 50%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wp-cmp-no svg { background: rgba(255,255,255,.07); stroke: #7d818b; }
.wp-cmp-yes svg { background: rgba(46,224,127,.16); stroke: var(--done); }
/* Stat strips. */
.wp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 24px; }
.wp-stat-t { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: #16171a; box-shadow: inset 0 -2px 0 var(--accent); }
.wp-stat-t b { color: var(--accent); font: 800 1.45rem/1.1 Orbitron, sans-serif; letter-spacing: .01em; }
.wp-stat-t span { color: #c8cad0; font-size: .84rem; line-height: 1.4; }
/* Callout kinds. */
.wp-note { position: relative; padding-top: 32px; }
.wp-note-tag { position: absolute; left: 16px; top: 12px; color: #ffb020; font: 800 .6rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.wp-note--example { background: rgba(139,107,255,.1); box-shadow: inset 3px 0 0 #8b6bff; color: #e6e0ff; }
.wp-note--example .wp-note-tag { color: #a993ff; }
.wp-note--draft .wp-note-tag::before { content: "◔ "; }
.wp-body .wp-note p { margin: 0; }
/* The roadmap timeline. */
.wp-body ol.wp-tl { position: relative; display: grid; gap: 14px; margin: 10px 0 26px; padding: 0 0 0 34px; list-style: none; }
.wp-tl::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--done), var(--accent) 35%, rgba(255,255,255,.1) 60%); }
.wp-tl-item { position: relative; margin: 0; }
.wp-tl-item::marker { content: none; }
.wp-tl-dot { position: absolute; left: -32px; top: 20px; width: 18px; height: 18px; border-radius: 50%; background: #16171a; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.is-done .wp-tl-dot { background: var(--done) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e0f11' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 12px rgba(46,224,127,.5); }
.is-now .wp-tl-dot { background: var(--accent); box-shadow: 0 0 0 5px rgba(31,190,212,.2), 0 0 16px rgba(31,190,212,.6); }
.wp-tl-card { padding: 16px 18px; border-radius: 14px; background: #16171a; }
.is-now .wp-tl-card { box-shadow: inset 0 0 0 1px rgba(31,190,212,.45); background: linear-gradient(160deg, rgba(31,190,212,.1), #16171a 60%); }
.wp-body .wp-tl-card h2, .wp-body .wp-tl-card h3 { margin: 0 0 4px; font-size: 1.2rem; }
.wp-body .wp-tl-card p.wp-label { margin: 0 0 8px; }
.wp-body .wp-tl-card > p { margin: 0 0 10px; font-size: .95rem; }
.wp-body .wp-tl-card ul.wp-chips { margin: 4px 0 10px; }
.is-done .wp-chips li { background: rgba(46,224,127,.1); }
@media (max-width: 700px) {
  .wp-cmp-row { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
  .wp-cmp-row > span { grid-column: 1 / -1; margin-bottom: 6px; }
  .wp-cmp-head > span { display: none; }
  .wp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Screenshots stay a comfortable height: tall shots are cropped to their middle. */
.wp-fig--shot img { max-height: 440px; object-fit: cover; object-position: center 45%; }
.wp-fig img { background: none; }
@media (max-width: 700px) { .wp-map { padding: 16px 10px; } .wp-map svg { width: var(--mw); max-width: none; min-width: 0; } }

/* ---------- Whitepaper, round 4: no coloured edge stripes; flat panels and white selections, like the rest of the site ---------- */
.wp-q-box:focus-within { background: #26282d; box-shadow: none; }
.wp-q-results a.on { background: #fff; box-shadow: none; }
.wp-q-results a.on b, .wp-q-results a.on span { color: #0e0f11; }
.wp-q-results a.on small { color: #0e0f11; opacity: .6; }
.wp-q-results mark { background: rgba(255,255,255,.16); color: #fff; }
.wp-q-results a.on mark { background: rgba(14,15,17,.12); color: #0e0f11; }
/* Term cards: a small accent dot by the term instead of a top line. */
.wp-def { box-shadow: none; background: #16171a; }
.wp-def b { display: flex; align-items: center; gap: 9px; }
.wp-def b::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(31,190,212,.6); }
/* Stats: the figure carries the colour; no underline. */
.wp-stat-t { box-shadow: none; background: #16171a; }
.wp-body p.wp-stat { box-shadow: none; }
/* Notes: a tag chip, no side stripe. */
.wp-note, .wp-note--example { box-shadow: none; }
.wp-note-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: rgba(255,176,32,.16); }
.wp-note--example .wp-note-tag { background: rgba(139,107,255,.2); }
.wp-note { padding-top: 40px; }
/* Short lines sit together without a coloured rule. */
.wp-lines { border-left-color: rgba(255,255,255,.12); }
/* "On this page": the current section is a white tile. */
.wp-toc.legal-toc a.on { background: #fff; color: #0e0f11; }
.wp-toc.legal-toc a.on::before { content: none; }

/* ---------- Tier staircase (Mining Badges, Mystery Boxes) ---------- */
.wp-ladder { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: 8px; margin: 10px 0 24px; padding: 22px 18px 18px; border-radius: 14px; background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(139,107,255,.1), transparent 60%), #16171a; }
.wp-rung { display: grid; justify-items: center; align-content: end; gap: 6px; min-width: 0; text-align: center; }
.wp-medal { display: grid; place-items: center; width: 46px; height: 46px; filter: drop-shadow(0 0 calc(4px + var(--lv) * 14px) color-mix(in srgb, var(--tc) 70%, transparent)); }
.wp-medal svg { width: 100%; height: 100%; overflow: visible; }
.wp-medal .m-out { fill: color-mix(in srgb, var(--tc) 35%, #16171a); stroke: var(--tc); stroke-width: 2; stroke-linejoin: round; }
.wp-medal .m-in { fill: none; stroke: var(--tc); stroke-width: 1.6; stroke-linejoin: round; opacity: .75; }
.wp-medal .m-star { fill: var(--tc); stroke: var(--tc); stroke-width: 1.4; stroke-linejoin: round; }
.wp-medal .m-rib { fill: color-mix(in srgb, var(--tc) 55%, #16171a); }
.wp-rung-name { color: #fff; font-size: .9rem; line-height: 1.2; }
.wp-step { display: grid; align-content: start; justify-items: center; gap: 3px; width: 100%; height: calc(46px + var(--lv) * 74px); padding: 10px 6px 0; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, #1d1e22), #1b1c20); }
.wp-step-k { color: color-mix(in srgb, var(--tc) 55%, #fff); font: 800 .52rem Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.wp-step-v { color: #fff; font: 700 .82rem/1.25 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.wp-body .wp-rung-x { display: grid; gap: 2px; min-height: 52px; margin: 2px 0 0; color: #c8cad0; font-size: .76rem; line-height: 1.35; }
.wp-rung-x small { color: var(--muted); font: 700 .52rem Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) {
  .wp-ladder { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
  .wp-rung { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "m n v" "m x x"; justify-items: start; align-items: center; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, #1b1c20) calc(var(--lv) * 100%), #1b1c20 calc(var(--lv) * 100%)); text-align: left; }
  .wp-medal { grid-area: m; width: 40px; height: 40px; }
  .wp-rung-name { grid-area: n; }
  .wp-step { grid-area: v; height: auto; width: auto; padding: 0; background: none; justify-items: end; }
  .wp-body .wp-rung-x { grid-area: x; min-height: 0; }
}

/* ---------- Chapter index: one line each, grouped by part ---------- */
.wp-ix-part { margin: 20px 0 8px; color: var(--muted); font: 800 .62rem Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.wp-ix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wp-body a.wp-ix { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: #16171a; color: inherit; text-decoration: none; transition: background .15s, transform .15s; }
.wp-body a.wp-ix:hover { background: #1f2025; }
.wp-ix-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #23252b; color: var(--accent); font: 800 .7rem Orbitron, sans-serif; }
.wp-ix-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wp-ix-t { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.wp-ix-t b { color: #fff; font-size: .94rem; }
.wp-ix-t small { overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.wp-ix em { flex: none; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: #23252b; color: #c8cad0; font: 700 .7rem Inter, sans-serif; font-style: normal; }
.wp-ix > svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s, stroke .15s; }
.wp-body a.wp-ix:hover > svg { stroke: #fff; transform: translateX(2px); }
@media (max-width: 700px) { .wp-ix-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sidebar ---------- */
.wp-side-in { gap: 6px; padding: 0 8px 10px; overflow-x: hidden; }
.wp-side-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -8px 4px; padding: 14px 16px 16px; background: #16171a; border-bottom: 1px solid rgba(255,255,255,.06); }
.wp-side-ttl { display: inline-flex; align-items: center; gap: 8px; color: #fff; font: 800 .7rem Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.wp-side-ttl svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wp-side-pos { color: var(--muted); font: 600 .72rem Inter, sans-serif; font-variant-numeric: tabular-nums; }
.wp-side-pos b { color: #fff; }
.wp-side-bar { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.08) var(--p)); }
.wp-nav-part { margin: 12px 8px 6px; }
.wp-nav-list > li + li { margin-top: 1px; }
.wp-nav a.wp-nav-top { gap: 10px; padding: 5px 34px 5px 5px; border-radius: 10px; color: #d6d8dd !important; font-weight: 600; font-size: .84rem; }
.wp-nav-ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #1f2025; transition: background .15s; }
.wp-nav-top svg { width: 15px !important; height: 15px !important; stroke: var(--muted) !important; }
.wp-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-nav-n { flex: none; color: var(--muted); font: 600 .68rem Inter, sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.wp-nav a.wp-nav-top:hover { background: #1f2025; }
.wp-nav a.wp-nav-top:hover .wp-nav-ico { background: #2a2c31; }
.wp-nav a.wp-nav-top:hover svg { stroke: #fff !important; }
.wp-nav-sec.open > .wp-nav-top .wp-nav-ico { background: rgba(31,190,212,.16); }
.wp-nav-sec.open > .wp-nav-top svg { stroke: var(--accent) !important; }
.wp-nav-sec.open > .wp-nav-top { color: #fff !important; }
.wp-nav-sec.open > .wp-nav-top .wp-nav-n { opacity: 0; }
.wp-nav a.wp-nav-top[aria-current="page"] { background: #fff; color: #0e0f11 !important; }
.wp-nav a.wp-nav-top[aria-current="page"] .wp-nav-ico { background: #0e0f11; }
.wp-nav a.wp-nav-top[aria-current="page"] svg { stroke: #fff !important; }
.wp-nav a.wp-nav-top[aria-current="page"] .wp-nav-n { color: #0e0f11; }
.wp-nav-tog { top: 6px; right: 4px; }
/* Pages of the open chapter hang off a guide line, each with a dot. */
.wp-nav-list ul { position: relative; margin: 2px 0 8px 18px; padding: 2px 0 2px 14px; border-left: 0; }
.wp-nav-list ul::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,.12); }
.wp-nav-list ul li { position: relative; }
.wp-nav-list ul li::before { content: ""; position: absolute; left: -17px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #16171a; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.wp-nav-list ul a { padding: 6px 10px; border-radius: 8px; color: #a6a9b1; font-size: .8rem; }
.wp-nav-list ul a:hover { background: #1f2025; color: #fff; }
.wp-nav-list ul a[aria-current="page"] { background: #fff; color: #0e0f11; font-weight: 700; }
.wp-nav-list ul li:has(> a[aria-current="page"])::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.wp-body .wp-rung-x { align-content: start; height: 74px; min-height: 0; }
.wp-rung-x b { color: color-mix(in srgb, var(--tc) 60%, #fff); font: 800 1.05rem Orbitron, sans-serif; }
.wp-rung-x span { color: #a6a9b1; font-size: .72rem; }
@media (max-width: 760px) { .wp-body .wp-rung-x { height: auto; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px; } .wp-rung-x small { display: none; } }
/* ---------- Whitepaper layout: the contents panel sits flush under the navbar and scrolls on its own ---------- */
.is-wp .sub-main { padding-top: 0; }
.is-wp .sub-main > .wrap.wp-wrap { width: 100%; max-width: none; padding: 0; }
.is-wp .wp { grid-template-columns: 290px minmax(0, 1fr) 250px; gap: 0; margin-top: 0; align-items: start; }
.is-wp .wp-side { position: sticky; top: 56px; height: calc(100vh - 56px); max-height: none; overflow: hidden; background: #131417; border-right: 1px solid rgba(255,255,255,.06); }
.is-wp .wp-side-in { height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2c2d32 transparent; border-radius: 0; background: transparent; padding: 0 10px 24px; }
.is-wp .wp-side-head { background: #131417; margin: 0 -10px 4px; padding: 16px 18px 18px; }
.is-wp .wp-side-bar { left: 18px; right: 18px; }
.is-wp .wp-body { justify-self: center; width: 100%; max-width: 74ch; padding: 28px clamp(24px, 4vw, 56px) 48px; box-sizing: content-box; }
.is-wp .wp-body > .crumbs { margin-bottom: 22px; }
.is-wp .wp-toc.legal-toc { position: sticky; top: 76px; margin: 28px 20px 0 0; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1180px) { .is-wp .wp { grid-template-columns: 270px minmax(0, 1fr); } }
@media (max-width: 900px) {
  .is-wp .wp { grid-template-columns: minmax(0, 1fr); }
  .is-wp .wp-side { position: static; height: auto; overflow: visible; border-right: 0; background: none; padding: 16px 16px 0; }
  .is-wp .wp-side-in { height: auto; padding: 0 8px 10px; border-radius: 14px; background: #16171a; margin-top: 8px; }
  .is-wp .wp-side-head { margin: 0 -8px 4px; border-radius: 14px 14px 0 0; }
  .is-wp .wp-body { padding: 18px 16px 40px; box-sizing: border-box; max-width: none; }
}
.is-wp .wp-body .crumbs a { color: var(--text-2); text-decoration: none; }
.is-wp .wp-body .crumbs a:hover { color: #fff; }
/* Token emission chart. */
.wp-emission { margin: 6px 0 24px; padding: 18px 18px 14px; border-radius: 14px; background: #16171a; }
.wp-emission svg { display: block; width: 100%; height: auto; overflow: visible; }
.em-g { stroke: rgba(255,255,255,.07); }
.em-yl { fill: #7d818b; font: 600 10.5px Inter, sans-serif; text-anchor: end; }
.em-xl { fill: #a6a9b1; font: 700 10.5px Inter, sans-serif; text-anchor: middle; }
.em-cliff { stroke: rgba(255,255,255,.4); stroke-dasharray: 4 4; }
.em-note { fill: #c8cad0; font: 600 10.5px Inter, sans-serif; }
.em-dot { fill: #fff; stroke: #16171a; stroke-width: 2; }
.em-lab { fill: #fff; font: 800 11px Inter, sans-serif; }
.em-end { text-anchor: end; }
.wp-body ul.wp-em-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 6px; padding: 0; list-style: none; }
.wp-em-legend li { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: #c8cad0; font-size: .8rem; }
.wp-em-legend li::marker { content: none; }
.wp-em-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.wp-em-legend b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.wp-emission figcaption { color: var(--muted); font-size: .8rem; line-height: 1.5; }

/* Launcher screens in the whitepaper: whole on wide screens; on phones they keep a readable size and scroll sideways. */
.wp-fig-scroll { display: block; cursor: zoom-in; border-radius: 12px; }
@media (max-width: 720px) {
  .wp-fig--app .wp-fig-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 6px; }
  .wp-fig--app img { width: calc(var(--w) * .68); max-width: none; }
}

/* ---------- Whitepaper on phones ---------- */
@media (max-width: 900px) {
  /* The Contents bar stays under the navbar; the list opens over the page instead of pushing it down. */
  .is-wp .wp-side { position: sticky; top: 56px; z-index: 40; padding: 10px 16px; background: rgba(14, 15, 17, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .is-wp .wp-side-tog { height: 44px; }
  .is-wp .wp-side-in { position: absolute; left: 16px; right: 16px; top: calc(100% - 2px); z-index: 41; max-height: calc(100dvh - 56px - 84px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
  .is-wp .wp-side-tog::after { content: ""; width: 8px; height: 8px; margin-left: 4px; flex: none; border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
  .is-wp .wp.nav-open .wp-side-tog::after { transform: translateY(2px) rotate(-135deg); }
  .is-wp .wp-body { scroll-margin-top: 120px; }
  .is-wp .wp-body :is(h2, h3, h4)[id] { scroll-margin-top: 130px; }
}
@media (max-width: 700px) {
  /* Node maps up to a third wider than the screen shrink to fit, so every label shows; wider ones scroll. */
  .wp-map svg { width: max(100%, calc(var(--mw) * .75)); }
  /* Small labels stay legible. */
  .wp-step-k { font-size: .6rem; }
  .wp-note-tag { font-size: .64rem; }
  .wp-ix-part { font-size: .66rem; }
}
@media (max-width: 560px) {
  /* Wide tables: one card per row, each value with its column name. */
  .wp-table--stack { overflow: visible; background: none; }
  .wp-table--stack table, .wp-table--stack tbody { display: block; }
  .wp-table--stack thead { display: none; }
  .wp-table--stack tr { display: block; margin-bottom: 8px; padding: 12px 14px 8px; border-radius: 10px; background: #16171a; }
  .wp-table--stack td { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .06); text-align: right !important; }
  .wp-table--stack td::before { content: attr(data-label); flex: none; max-width: 48%; color: var(--muted); font-size: .8rem; font-weight: 600; text-align: left; }
  .wp-table--stack td:first-child { display: block; padding: 0 0 8px; border-top: 0; color: #fff; font-size: 1rem; font-weight: 700; text-align: left !important; }
  .wp-table--stack td:first-child::before { content: none; }
  .wp-table--stack tr:hover td { background: none; }
}

/* ---------- Cookie choice (js/analytics.js) ---------- */
.cr-consent { position: fixed; left: 20px; bottom: 20px; z-index: 300; display: grid; gap: 14px; width: min(380px, calc(100vw - 32px)); padding: 18px; border-radius: 14px; background: #16171a; box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); animation: cr-consent-in .3s ease-out; }
.cr-consent p { margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; }
.cr-consent p b { display: block; margin-bottom: 4px; color: #fff; font-size: .95rem; }
.cr-consent p a { color: #fff; }
.cr-consent-btns { display: flex; gap: 8px; }
.cr-consent-btns button { flex: 1; height: 40px; border: 0; border-radius: 8px; font: 700 .86rem Inter, sans-serif; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.cr-consent-no { background: #26282d; color: #fff; }
.cr-consent-yes { background: #fff; color: #0e0f11; }
.cr-consent-btns button:hover, .cr-consent-btns button:focus-visible { outline: none; transform: translateY(-1px); box-shadow: 0 0 0 2px #16171a, 0 0 0 4px rgba(255, 255, 255, .6); }
@keyframes cr-consent-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 560px) { .cr-consent { left: 16px; right: 16px; bottom: 16px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .cr-consent { animation: none; } }
.cr-consent-open { height: 40px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: 8px; background: #26282d; color: #fff; font: 700 .86rem Inter, sans-serif; cursor: pointer; }
.cr-consent-open:hover, .cr-consent-open:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(255, 255, 255, .6); }
@media (max-width: 560px) { .ct-topic-in { gap: 10px; padding: 14px; } .ct-topic-ico { width: 34px; height: 34px; } }

/* ==================== Cursor glow (performance) ==================== */
/* The glow used to be body::after drawn at var(--pointer-x/y) set on <body>, which restyled the whole page on
   every pointer move. It is now one fixed element that js/site.js moves with a transform. Same look: a 520px
   circle of faint cyan, centred on the pointer, wide screens only. */
body::after { content: none !important; }
.cr-glow { position: fixed; left: 0; top: 0; width: 1040px; height: 1040px; margin: -520px 0 0 -520px; z-index: 0; pointer-events: none; background: radial-gradient(520px circle at center, rgba(31,190,212,.045), transparent 68%); will-change: transform; contain: strict; }
@media (max-width: 900px) { .cr-glow { display: none; } }

/* Scroll progress bar: where the browser can tie an animation to the page scroll, it fills the bar itself
   (no JavaScript, no work on the main thread). js/site.js only paints it in browsers without this. */
@supports (animation-timeline: scroll()) {
  .page-progress { transform: scaleX(0); animation: cr-page-progress linear both; animation-timeline: scroll(root block); }
  @keyframes cr-page-progress { to { transform: scaleX(1); } }
}

/* Sections off screen pause their decorative loops (js/site.js toggles .is-idle with an IntersectionObserver). */
.is-idle, .is-idle *, .is-idle *::before, .is-idle *::after, .is-idle::before, .is-idle::after { animation-play-state: paused !important; }


/* Sections below the hero are laid out and painted only when they come near the screen; the browser keeps
   their last size afterwards (contain-intrinsic-size: auto). Halves the first layout of the home page.
   Not the hero, and not the sticky "game ends" section, which measures itself. */
main > section:not(#top):not(#launcher) { content-visibility: auto; contain-intrinsic-size: auto 1000px; }

/* Meet DEVORA, desktop: the entry screen has controls at its top and bottom edges, so it is shown whole rather
   than cropped to the panel (its dark backdrop fills the rest). Callouts follow the fit (js/site.js placeNotes). */
@media (min-width: 901px) {
  .dxl-view img[data-fit="contain"] { object-fit: contain; background: #111317; }
}

/* "Where the game ends" on phones: the pinned stage and its scroll track are sized in svh, which stays put while
   the address bar slides in and out (vh changes size mid-scroll, which made the pinned stage jump). */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .eg-track { height: 240svh; }
  .eg-sticky { height: calc(100svh - 56px); }
}

/* ---------- Hero on phones: one even rhythm (kicker 18 · title 26 · definition 24 · buttons), a calmer
   definition card and the two buttons side by side, so the title, the meaning and the next step read in order. */
@media (max-width: 560px) {
  #top .copy { display: grid; justify-items: start; }
  .investor-build .screen .title.hx-title { margin-top: 18px !important; }
  #top .hx-def { margin-top: 26px; gap: 10px; padding: 16px 16px 14px 18px; }
  .hx-def-head b { font-size: .92rem; }
  .hx-def-head span { font-size: .8rem; }
  .investor-build .screen .copy .hx-def-text { font-size: .98rem; line-height: 1.55; }
  .hx-def-foot { padding-top: 12px; gap: 8px; }
  .hx-def-foot img { height: 17px; }
  .hx-def-tag { height: 22px; font-size: .62rem; }
  #top .copy > .actions { width: 100%; margin-top: 24px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
  #top .actions .cr-cta, #top .actions .cr-cta2 { width: 100%; height: 50px; justify-content: center; font-size: .95rem; }
  #top .actions .cr-cta { padding: 0 14px 0 6px; gap: 10px; }
  #top .actions .cr-cta .cr-cta-ico { width: 38px; height: 38px; }
}

/* Get in touch: the deck card shows the deck's real cover, at its own 16:9, with nothing laid over it. */
.cv-sheet, .cv-cover { aspect-ratio: 16 / 9; }
.cv-cover::after { content: none; }

/* ---------- Whitepaper page head: the chapter icon is a small tinted tile in the kicker line (the same mark as the
   home hero's "Investor overview"), instead of a large glossy tile beside the title. CSS only: no shift on load. */
.wp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 10px; }
.wp-head-txt { display: contents; }
.wp-head-ico { grid-column: 1; grid-row: 1; width: 30px; height: 30px; margin: 0; border-radius: 8px; background: rgba(31,190,212,.14); box-shadow: none; }
.wp-head-ico svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2; }
.wp-head .sub-kick { grid-column: 2; grid-row: 1; }
.wp-head .sub-kick::before { display: none; }
.wp-head h1, .wp-head .wp-meta { grid-column: 1 / -1; }
.wp-head h1 { margin-top: 4px; }
@media (max-width: 900px) { .wp-head-ico { width: 28px; height: 28px; border-radius: 7px; } .wp-head-ico svg { width: 15px; height: 15px; } }

/* ---------- Whitepaper search on phones: a button beside Contents opens a full-screen sheet ---------- */
.wp-q-cancel, .wp-q-hint, .wp-bar-q { display: none; }
@media (max-width: 900px) {
  .wp-q-open { display: none !important; }
  .is-wp .wp-side { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; }
  .wp-bar-q { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #16171a; color: #fff; cursor: pointer; }
  .wp-bar-q svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .wp-bar-q:active { background: #212226; }
  .wp-q.open { position: fixed; inset: 0; z-index: 90; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr); align-content: start; column-gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
  .wp-q.open .wp-q-box { position: static; display: flex; height: 48px; padding: 0 14px; border-radius: 12px; background: #1b1c20; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .wp-q.open .wp-q-box:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
  .wp-q.open .wp-q-box input { font-size: 16px; }
  .wp-q.open .wp-q-box kbd { display: none; }
  .wp-q.open .wp-q-cancel { display: block; height: 48px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: 700 .95rem Inter, sans-serif; cursor: pointer; }
  .wp-q.open .wp-q-hint:not([hidden]) { display: block; grid-column: 1 / -1; margin: 28px 4px 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
  .wp-q.open .wp-q-hint b { color: #fff; font-weight: 700; }
  .wp-q.open .wp-q-results { position: static; grid-column: 1 / -1; grid-row: 3; max-height: none; margin-top: 12px; padding: 0 0 12px; border-radius: 0; background: none; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
  .wp-q.open .wp-q-results a { padding: 14px 14px; border-radius: 12px; background: #16171a; }
  .wp-q.open .wp-q-results a + a { margin-top: 6px; }
  html.wp-q-lock, html.wp-q-lock body { overflow: hidden; }
}

/* Icons: the send arrow on "Send us a question", and the copy button sitting quietly on the tinted email card. */
.fqs-mail svg { width: 17px; height: 17px; stroke-width: 2.1; stroke-linecap: round; }
.cv-copy { background: transparent; color: var(--muted); box-shadow: none; transition: background .15s, color .15s; }
.cv-copy:hover, .cv-copy:focus-visible { background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
.cv-copy svg { width: 17px; height: 17px; stroke-width: 1.9; }