/* Distribution Networks. Greyscale system taken from the brand layout.
   Radius rule: interactive controls are pills, containers are 16px. */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #0b1a2a;
  --charcoal: #10263a;
  --graphite: #1b3a57;
  --slate: #4b6076;
  --mid: #5aa0d6;
  --accent: #5aa0d6;
  --accent-deep: #1c6aa8;
  --line: #d3e0ea;
  --mist: #e8f0f6;
  --paper: #f3f7fa;
  --white: #fcfdfe;
  --alert: #a63a32;
  --alert-soft: #f6e4e2;

  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --r-card: 16px;
  --r-pill: 999px;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 52px);
  --section: clamp(72px, 10vw, 144px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .band-dark :focus-visible { outline-color: var(--white); }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 18px; border-radius: var(--r-pill);
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.display, h1, h2 { font-weight: 250; letter-spacing: -0.025em; line-height: 1.04; color: inherit; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.9rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; }
h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 38em; color: var(--slate); }
.band-dark .lede, .band-dark p, .band-ink .lede, .band-ink p { color: #c3cfdb; }
.small { font-size: 0.94rem; line-height: 1.55; color: var(--slate); }
.mono { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0; }
.label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  min-height: 46px; padding: 0 24px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-solid { background: var(--ink); color: var(--white); }
.btn-solid:hover { background: var(--accent-deep); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--mist); }
.btn-ghost { border-color: currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(127,127,127,0.16); }
.link {
  font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.link:hover { text-decoration-thickness: 2px; color: var(--accent-deep); }
.band-dark .link:hover, .band-ink .link:hover { color: var(--accent); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(254,254,254,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease);
}
.site-header.is-scrolled { border-color: var(--line); }
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand .mark { width: 40px; height: auto; }
.brand-word { display: grid; line-height: 1; font-size: 0.62rem; letter-spacing: 0.34em; color: var(--ink); }
.brand-word b { font-weight: 800; letter-spacing: 0.28em; margin-top: 5px; }
.mark .a { fill: var(--mid); }
.mark .b { fill: var(--charcoal); }
.on-dark .mark .b, .site-footer .mark .b { fill: #eaf3fa; }
.site-footer .mark .a { fill: #7fb2dc; }
.nav-links { display: flex; gap: clamp(14px, 2.2vw, 34px); }
.nav-links a {
  position: relative; text-decoration: none; font-size: 0.95rem; padding: 6px 0; color: var(--charcoal);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-deep);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { flex: none; }
.nav-toggle { display: none; }

@media (max-width: 1040px) {
  .nav-cta { display: none; }
}
@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; transition: transform 0.3s var(--ease); }
  .nav-toggle span::before { content: ""; position: absolute; top: 6px; left: 0; }
  .nav-toggle[aria-expanded="true"] span { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(-6px) rotate(-90deg); top: 6px; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--white); flex-direction: column; gap: 0;
    padding: 12px var(--gutter) 28px; border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform 0.35s var(--ease), opacity 0.25s, visibility 0.35s;
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { font-size: 1.25rem; padding: 16px 0; border-bottom: 1px solid var(--mist); font-weight: 300; }
  .nav-links a::after { display: none; }
  .nav-links .nav-cta-m { display: block; border: 0; margin-top: 18px; }
}
.nav-cta-m { display: none; }

/* ---------- bands ---------- */
.band { padding-block: var(--section); }
.band-dark { background: var(--charcoal); color: var(--white); }
.band-mist { background: var(--mist); }
.band-ink { background: var(--ink); color: var(--white); }
.band-tight { padding-block: clamp(56px, 7vw, 96px); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 52rem; }

/* ---------- hero (home) ---------- */
.hero { background: var(--charcoal); color: var(--white); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px);
  align-items: center; min-height: min(760px, calc(100dvh - var(--nav-h)));
  padding-block: clamp(56px, 7vw, 96px);
}
.hero h1 { margin-bottom: 28px; max-width: 13em; font-size: clamp(2.5rem, 4.8vw, 4.3rem); }
.hero h1 .hl { color: #8cc0e8; }
.hero .lede { color: #c9d4df; margin-bottom: 36px; max-width: 30em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* layered engine stack */
.stack { display: grid; gap: 10px; counter-reset: layer; }
.layer {
  --shift: 0px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 62px; padding: 14px 26px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.28); background: transparent; color: var(--white);
  text-align: left; cursor: default; width: calc(100% - var(--indent, 0px));
  margin-left: var(--indent, 0px); font-size: 1rem;
  transform: translateX(var(--shift));
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.9s var(--ease);
}
.layer strong { font-weight: 500; font-size: 1.1rem; letter-spacing: -0.005em; white-space: nowrap; }
.layer span { font-size: 0.86rem; color: #b4c3d2; text-align: right; }
.layer:nth-child(2) { --indent: 36px; background: #1d3d5c; border-color: #1d3d5c; }
.layer:nth-child(3) { --indent: 0px; background: #27537d; border-color: #27537d; }
.layer:nth-child(4) { --indent: 36px; background: #5aa0d6; border-color: #5aa0d6; color: var(--ink); }
.layer:nth-child(4) span { color: var(--ink); font-weight: 600; }
.layer:nth-child(5) { --indent: 0px; width: calc(92% - var(--indent)); }
.layer[data-active="true"], .layer:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.layer[data-active="true"] span, .layer:hover span { color: var(--slate); }
.layer:nth-child(4):hover, .layer:nth-child(4)[data-active="true"] { background: #8cc0e8; border-color: #8cc0e8; }
.layer:nth-child(4):hover span { color: var(--ink); }

/* ---------- shared code / separate data diagram ---------- */
.split-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.principles { display: grid; gap: 34px; }
.principles li { display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--ink); }
.principles li:nth-child(2) { border-color: var(--accent-deep); }
.principles li:nth-child(3) { border-color: var(--mid); }
.principles p { color: var(--slate); max-width: 34em; }

.topology { display: grid; gap: 0; margin-top: 8px; }
.topology .core-bar {
  background: var(--charcoal); color: var(--white); border-radius: var(--r-card); padding: 26px 30px;
  display: flex; justify-content: space-between; gap: 24px; align-items: end; flex-wrap: wrap;
}
.topology .core-bar b { font-weight: 300; font-size: 1.6rem; letter-spacing: -0.02em; }
.topology .core-bar span { color: #acbdce; font-size: 0.9rem; }
.topo-links { height: 56px; width: 100%; }
.topo-links path { stroke: var(--mid); stroke-width: 1; fill: none; stroke-dasharray: 3 5; }
.deploys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.deploy { border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 20px 22px; background: var(--white); display: grid; gap: 14px; }
.deploy h3 { font-weight: 500; font-size: 1.05rem; }
.deploy dl { display: grid; gap: 8px; font-size: 0.82rem; color: var(--slate); }
.deploy dl div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--mist); padding-top: 8px; }
.deploy dt { color: var(--accent-deep); }
.deploy dd { font-family: var(--mono); font-size: 0.74rem; color: var(--charcoal); }
.deploy.next { border-style: dashed; background: transparent; }
.consent {
  margin-top: 14px; display: flex; gap: 12px; align-items: center; color: var(--slate); font-size: 0.88rem;
  border: 1px dashed var(--mid); border-radius: var(--r-card); padding: 14px 18px;
}
.consent svg { width: 18px; height: 18px; flex: none; }

/* ---------- what we own ---------- */
.own-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); }
.own-list { border-radius: var(--r-card); background: var(--white); overflow: hidden; }
.own-list li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 28px; padding: 26px 30px; border-top: 1px solid var(--mist); align-items: baseline; transition: background-color 0.3s var(--ease); }
.own-list li:first-child { border-top: 0; }
.own-list li:hover { background: var(--paper); }
.own-list h3 { font-weight: 500; font-size: 1.15rem; }
.own-list p { color: var(--slate); font-size: 0.97rem; }

/* ---------- ledger demo ---------- */
.ledger-wrap { display: grid; gap: 28px; }
.ledger { display: grid; gap: 0; }
.entry {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center;
  padding: 18px 22px; border: 1px solid #2c4d6b; border-radius: var(--r-card); background: #162f46;
  position: relative; transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.entry + .entry { margin-top: 22px; }
.entry + .entry::before {
  content: ""; position: absolute; left: 46px; top: -23px; height: 22px; width: 1px; background: #4a7aa3;
  transition: background-color 0.4s var(--ease);
}
.entry .idx { font-family: var(--mono); font-size: 0.78rem; color: #829bb4; }
.entry .what { display: grid; gap: 4px; min-width: 0; }
.entry .what strong { font-weight: 500; font-size: 1rem; color: var(--white); }
.entry .what input {
  font: inherit; font-size: 0.95rem; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid #4f7396;
  padding: 4px 0; width: 100%; min-width: 0;
}
.entry .what input:focus { outline: none; border-color: var(--white); }
.entry .hashes { font-family: var(--mono); font-size: 0.72rem; line-height: 1.7; color: #92a8be; display: grid; gap: 2px; min-width: 0; }
.entry .hashes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry .hashes b { color: #5d82a6; font-weight: 500; margin-right: 8px; }
.entry[data-state="broken"] { border-color: var(--alert); background: #3a2f2e; }
.entry[data-state="broken"]::before { background: var(--alert); }
.entry[data-state="broken"] .hashes { color: #e9b8b3; }
.ledger-status {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  font-size: 0.95rem; color: #c7d2dd;
}
.ledger-status output { font-weight: 600; color: #8cc0e8; }
.ledger-status output[data-state="broken"] { color: #f0aaa3; }
.ledger-note { color: #a8b9ca; font-size: 0.92rem; max-width: 40em; }

/* ---------- licensing model flow ---------- */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; }
.flow-card { border-radius: var(--r-card); padding: 30px 30px 34px; display: grid; gap: 14px; align-content: start; min-height: 240px; }
.flow-card:nth-child(1) { background: var(--ink); color: var(--white); }
.flow-card:nth-child(2) { background: var(--graphite); color: var(--white); }
.flow-card:nth-child(3) { background: var(--mist); color: var(--charcoal); }
.flow-card h3 { font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; margin-top: auto; }
.flow-card p { font-size: 0.97rem; opacity: 0.88; }
.flow-card .glyph { width: 44px; height: 44px; stroke: currentColor; fill: none; stroke-width: 1.25; opacity: 0.75; }

/* ---------- solutions ---------- */
.solutions { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr; gap: 14px; }
.sol {
  background: var(--white); border-radius: var(--r-card); padding: 34px 30px 30px; display: grid; gap: 14px; align-content: start;
  position: relative; min-height: 320px;
}
.sol::before { content: ""; position: absolute; top: 0; left: 30px; width: 44px; height: 4px; background: var(--mid); }
.sol:nth-child(2)::before { background: var(--accent-deep); }
.sol .name { font-size: 2.6rem; font-weight: 200; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.sol h3 { font-weight: 600; }
.sol p { color: var(--slate); font-size: 0.97rem; }
.sol .link { margin-top: auto; padding-top: 10px; }
.sol.next { background: transparent; border: 1px dashed var(--mid); }
.sol.next::before { display: none; }
.sol.next .name { color: var(--slate); }

/* ---------- invite band ---------- */
.invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.invite p { font-size: 1.15rem; line-height: 1.6; margin-bottom: 30px; max-width: 34em; }

/* ---------- trust ---------- */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.trust li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--ink); }
.trust p { color: var(--slate); font-size: 0.97rem; }

/* ---------- footer ---------- */
.site-footer { background: #091624; color: #ced8e2; padding-block: clamp(48px, 6vw, 80px) 28px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 5vw, 80px); }
.site-footer .brand-word { color: #dfe5eb; }
.site-footer p { color: #b4c3d0; margin-top: 22px; max-width: 28em; line-height: 1.6; }
.site-footer h2.fh { color: var(--white); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; margin-bottom: 14px; }
.site-footer li { margin-bottom: 8px; color: #8cc0e8; }
.site-footer a { text-underline-offset: 4px; }
.site-footer a:hover { color: var(--white); }
.legal { margin-top: clamp(32px, 4vw, 56px); padding-top: 22px; border-top: 1px solid #23394d; font-size: 0.82rem; color: #8fa3b5; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; width: 100%; }
.site-footer .legal p { margin: 0; max-width: none; color: #8fa3b5; line-height: 1.5; }
.site-footer .legal .credit { color: #b4c3d0; }

/* ---------- inner pages ---------- */
.page-head { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); }
.crumbs { font-size: 0.88rem; color: var(--slate); margin-bottom: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { color: var(--mid); }
.page-head h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-bottom: 26px; max-width: 14em; }

/* layer map (engine page) */
.layermap { display: grid; }
.lm-row {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 4.4fr); gap: 30px;
  padding: 28px 0; border-top: 1px solid var(--line); align-items: start;
}
.lm-row:last-child { border-bottom: 1px solid var(--line); }
.lm-row h3 { font-weight: 400; font-size: 1.35rem; letter-spacing: -0.01em; }
.lm-row .small { margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--mid); font-size: 0.92rem; background: var(--white); color: var(--charcoal);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.chip:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip.sq { border-radius: 4px; background: var(--mist); border-color: var(--line); }
.chip.sq:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip.core { background: var(--mid); border-color: var(--mid); color: var(--ink); font-weight: 500; }
.chip.core:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.contract { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.contract li { background: var(--white); border-radius: var(--r-card); padding: 28px 24px 28px; display: grid; gap: 10px; align-content: start; position: relative; }
.contract li::before { content: ""; position: absolute; top: 0; left: 24px; width: 28px; height: 3px; background: var(--ink); }
.contract p { color: var(--slate); font-size: 0.94rem; }

.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { border-radius: var(--r-card); padding: clamp(28px, 3.4vw, 44px); }
.panel h3 { font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 22px; }
.panel li { padding: 12px 0 12px 22px; position: relative; border-top: 1px solid rgba(127,127,127,0.25); }
.panel li:first-child { border-top: 0; }
.panel li::before { content: ""; position: absolute; left: 0; top: 1.28em; width: 8px; height: 1px; background: currentColor; }
.panel.dark { background: var(--charcoal); color: var(--white); }
.panel.light { background: var(--mist); }

.rules { display: grid; }
.rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 26px 0; border-top: 1px solid #2a4a68; align-items: baseline; }
.rule:last-child { border-bottom: 1px solid #2a4a68; }
.rule h3 { font-weight: 400; font-size: 1.35rem; letter-spacing: -0.01em; }
.rule p { color: #bcc9d6; }

/* faq */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; gap: 24px;
  font-size: 1.2rem; font-weight: 400; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { color: var(--accent-deep); content: "+"; font-weight: 300; font-size: 1.6rem; line-height: 1; transition: transform 0.35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 26px; color: var(--slate); max-width: 44em; }

/* process steps (partnerships): a marker travels the line and lights each step as it arrives */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.process li { padding: 34px 24px 0 0; display: grid; gap: 10px; align-content: start; position: relative; }
.process li::before { content: ""; position: absolute; top: 5.5px; left: 0; width: 100%; height: 2px; background: var(--line); }
.process li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--accent-deep); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.process li h3 { color: var(--slate); transition: color 0.5s var(--ease); }
.process li p { color: var(--slate); font-size: 0.97rem; opacity: 0.6; transition: opacity 0.5s var(--ease); }
.process li.done::after { background: var(--accent-deep); }
.process li.done h3 { color: var(--ink); }
.process li.done p { opacity: 1; }
.process .trail { position: absolute; top: 5.5px; left: 0; right: 0; height: 2px; background: var(--accent-deep); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.process .runner {
  position: absolute; top: -4px; left: -4px; width: 21px; height: 21px; border-radius: 50%; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 0 5px rgba(90, 160, 214, 0.28), 0 0 18px 4px rgba(90, 160, 214, 0.45);
  opacity: 0; will-change: transform;
}
.process .runner.is-run { opacity: 1; }
.process.finished .runner { opacity: 1; animation: runner-rest 2.4s ease-in-out infinite; }
@keyframes runner-rest { 50% { box-shadow: 0 0 0 9px rgba(90, 160, 214, 0.12), 0 0 18px 4px rgba(90, 160, 214, 0.3); } }
@media (max-width: 980px) { .process .trail, .process .runner { display: none; } .process li::before { display: none; } }
.js .process:not(.armed) li::after { background: var(--white); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); }

/* contact */
.form { display: grid; gap: 22px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.field .help { font-size: 0.85rem; color: var(--slate); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--slate); border-radius: 10px; padding: 13px 16px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-msg { font-size: 0.92rem; color: var(--slate); min-height: 1.4em; }
.form-msg[data-state="error"] { color: var(--alert); }
.form-msg[data-state="ok"] { color: var(--accent-deep); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form button[disabled] { opacity: 0.6; cursor: progress; }
.detail-list { display: grid; gap: 22px; align-content: start; }
.detail-list div { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.detail-list dt { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }

/* ---------- contact options + dialog ---------- */
.reach { display: grid; gap: 10px; }
.reach a {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--white); text-decoration: none; color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.reach a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.reach a:active { transform: scale(0.99); }
.reach svg { width: 26px; height: 26px; flex: none; color: var(--accent-deep); transition: color 0.25s var(--ease); }
.reach a:hover svg { color: var(--accent); }
.reach span { display: grid; line-height: 1.3; }
.reach b { font-weight: 600; font-size: 1.05rem; }
.reach small { font-size: 0.9rem; color: var(--slate); transition: color 0.25s var(--ease); }
.reach a:hover small { color: #c5d3df; }
.reach.on-page { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin-top: 32px; }
@media (max-width: 760px) { .reach.on-page { grid-template-columns: 1fr; } }

.cdialog {
  border: 0; padding: clamp(26px, 4vw, 40px); border-radius: var(--r-card); width: min(480px, calc(100vw - 32px));
  background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(11, 26, 42, 0.35);
}
.cdialog::backdrop { background: rgba(11, 26, 42, 0.62); backdrop-filter: blur(3px); }
.cdialog[open] { animation: cd-in 0.35s var(--ease); }
@keyframes cd-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.cdialog h2 { font-size: 1.7rem; margin-bottom: 8px; }
.cdialog p { color: var(--slate); margin-bottom: 22px; }
.cdialog form { position: absolute; top: 14px; right: 14px; }
.cd-close { width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); }
.cd-close:hover { background: var(--mist); }


/* ---------- utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h2.h-small { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 28px; }

/* ---------- related links ---------- */
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.related-grid a {
  display: grid; gap: 8px; align-content: start; height: 100%; padding: 24px 24px 22px; border-radius: var(--r-card);
  background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.related-grid b { font-weight: 600; font-size: 1.1rem; }
.related-grid span { color: var(--slate); font-size: 0.95rem; transition: color 0.25s var(--ease); }
.related-grid svg { width: 18px; height: 18px; margin-top: 6px; color: var(--accent-deep); transition: transform 0.3s var(--ease), color 0.25s var(--ease); }
.related-grid a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.related-grid a:hover span { color: #c5d3df; }
.related-grid a:hover svg { transform: translateX(4px); color: var(--accent); }

/* ---------- 404: the trail stops here ---------- */
.lost { padding-block: clamp(48px, 7vw, 96px) clamp(24px, 4vw, 48px); }
.lost-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 80px); align-items: center; min-height: min(560px, calc(100dvh - var(--nav-h) - 80px)); }
.lost h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); margin-bottom: 24px; max-width: 12em; }
.lost .lede { color: #cfd9e2; }
.big404 {
  margin: 0; text-align: right; font-size: clamp(7rem, 21vw, 16rem); font-weight: 200; line-height: 0.9; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 2px var(--accent); user-select: none;
}
.trace { padding-block: clamp(24px, 4vw, 48px) clamp(80px, 12vw, 160px); }
.chain { position: relative; list-style: none; margin: 0; padding: 0 0 0 56px; max-width: 920px; --pad: clamp(34px, 9vh, 84px); }
.chain::before, .chain::after { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; }
.chain::before { background: #24425d; }
.chain::after { background: var(--accent); transform-origin: top; }
.chain li {
  position: relative; display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline;
  padding-block: var(--pad);
}
.chain li::before {
  content: ""; position: absolute; left: -52px; top: calc(var(--pad) + 0.55em); width: 13px; height: 13px; border-radius: 50%;
  background: var(--charcoal); border: 2px solid var(--accent);
}
.chain .k { font-family: var(--mono); font-size: 0.92rem; color: #8cc0e8; overflow-wrap: anywhere; }
.chain .t { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 300; color: var(--white); }
.chain .s { font-family: var(--mono); font-size: 0.8rem; color: #8fa3b5; }
.chain .lost-entry .k, .chain .lost-entry .s { color: #f0aaa3; }
.chain .lost-entry .t { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.chain .lost-entry::before { background: var(--alert); border-color: #f0aaa3; box-shadow: 0 0 0 6px rgba(166, 58, 50, 0.3); }
.chain .lost-entry { border-top: 1px dashed #5a3d3b; margin-top: 8px; }
@media (max-width: 760px) {
  .lost-grid { grid-template-columns: 1fr; min-height: 0; }
  .big404 { text-align: left; }
  .chain li { grid-template-columns: 1fr; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chain::after { transform: scaleY(0); animation: rail linear both; animation-timeline: view(); animation-range: entry 30% exit 60%; }
    .big404 { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    @keyframes rail { to { transform: scaleY(1); } }
    @keyframes drift { to { transform: translateY(-48px); opacity: 0.1; } }
  }
}

/* ---------- scroll reveal (kept minimal) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero-grid, .split-2, .own-grid, .invite { grid-template-columns: 1fr; }
  .hero-grid { min-height: 0; }
  .flow, .solutions { grid-template-columns: 1fr; }
  .flow-card, .sol { min-height: 0; }
  .contract { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .dual, .two-col { grid-template-columns: 1fr; }
  .rule { grid-template-columns: 1fr; gap: 8px; }
  .lm-row { grid-template-columns: 1fr; gap: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .own-list li { grid-template-columns: 1fr; gap: 6px; padding: 22px 22px; }
  .deploys { grid-template-columns: 1fr; }
  .topo-links { display: none; }
  .topology .core-bar { margin-bottom: 14px; }
  .entry { grid-template-columns: 1fr; gap: 10px; }
  .entry + .entry::before { left: 30px; }
  .contract, .trust, .process { grid-template-columns: 1fr; }
  .layer { padding: 14px 20px; flex-wrap: wrap; }
  .layer span { text-align: left; }
  .layer:nth-child(n) { --indent: 0px; width: 100%; border-radius: 36px; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { white-space: normal; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .layer, .btn, .btn svg { transition: none; }
  .cdialog[open] { animation: none; }
  .process .runner, .process .trail { display: none; }
  .process li p { opacity: 1; } .process li h3 { color: var(--ink); } .process li::after { background: var(--accent-deep); }
}