/* CQTecnologia. Rules live in docs/DESIGN.md; change them there first.
   Palette: change the tokens in :root only. Components never use raw colours. */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('/assets/fonts/newsreader-latin.0af3d6404c.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap; src: url('/assets/fonts/newsreader-italic-latin.acaa3544ae.woff2') format('woff2'); }
@font-face { font-family: 'Victor Mono'; font-style: italic; font-weight: 600; font-display: swap; src: url('/assets/fonts/victor-mono-italic-latin.8f4e29e25e.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin.4549bae4c4.woff2') format('woff2'); }

:root {
  /* surfaces */
  --bg: #16161e;
  --panel: #1f2335;
  --panel-2: #24283b;
  --band-raised: rgba(31, 35, 53, .55);
  --band-deep: rgba(9, 9, 14, .78);
  --line: #2f3449;
  --line-2: #414868;
  /* text (muted passes WCAG AA on --bg, --panel and --panel-2) */
  --text: #c0caf5;
  --text-2: #a9b1d6;
  --muted: #8890ba;
  --faint: #4b5278;
  /* roles: cyan interactive, purple display emphasis, green state OK, yellow markers, pink punctuation */
  --cyan: #7dcfff;
  --blue: #7aa2f7;
  --purple: #bb9af7;
  --green: #9ece6a;
  --yellow: #e0af68;
  --pink: #f7768e;
  --cyan-rgb: 125, 207, 255;
  --green-rgb: 158, 206, 106;
  --purple-rgb: 187, 154, 247;
  --matrix-rgb: 86, 95, 137;

  --serif: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  /* body copy: the system sans stack costs no bytes and reads as a company, not a terminal */
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* the signature: cursive italic mono, used for one phrase only */
  --sig: 'Victor Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* constraint code: 8 px scale, left axis on a 12 column frame, one 45 degree cut */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  --sec-pad: var(--s8); --head-gap: var(--s6);
  --frame: 1200px;
  --w-text: 680px;
  --cut: 12px;
  --cut-s: 6px;
  --top-h: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + var(--s2)); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  /* the page column fills the screen: a short page (404) ends with its footer at the bottom */
  display: flex; flex-direction: column;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--purple); color: var(--bg); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
ul, ol { list-style: none; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

.skip { position: fixed; left: var(--s2); top: -100px; z-index: 200; background: var(--cyan); color: var(--bg); padding: var(--s1) var(--s2); font-family: var(--mono); }
.skip:focus { top: var(--s2); }

/* ---------- background layers ---------- */
/* The dot board, the glow and the aurora are painted into the page itself: no fixed position, no
   will-change, no running animation. Any composited layer under the content forces the content into a
   transparent layer of its own, and text in a transparent layer loses subpixel (ClearType) smoothing,
   which reads as blur on 1x screens. The cursor glow repaints only its own tile when the pointer moves. */
body { position: relative; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
/* the last section takes the spare height: a short page ends with its footer at the bottom */
main > .sec:last-child { flex: 1 0 auto; }
.matrix {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background-image: radial-gradient(circle, rgba(var(--matrix-rgb), .45) 1px, transparent 1.6px);
  background-size: 28px 28px; background-position: 14px 14px;
}
.matrix-glow {
  /* a 380 px tile that follows the cursor by transform (compositor only); its dot pattern is offset by the same
     amount so the lit dots stay on the board's grid. Only this tile repaints on pointer moves. */
  position: absolute; left: 0; top: 0; width: 380px; height: 380px; opacity: 0; transition: opacity .4s;
  transform: translate(calc(var(--mx, -400px) - 190px), calc(var(--my, -400px) - 190px));
  background-image: radial-gradient(circle, rgba(var(--cyan-rgb), .95) 1.5px, transparent 2.1px);
  background-size: 28px 28px;
  background-position: calc(14px - var(--mx, -400px) + 190px) calc(14px - var(--my, -400px) + 190px);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
}
.pointer .matrix-glow { opacity: 1; }
/* soft light without blur filters: radial gradients composite cheaply and only their transform animates */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora span { position: absolute; border-radius: 50%; opacity: .2; }
.aurora span:nth-child(1) { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(closest-side, var(--cyan), transparent); }
.aurora span:nth-child(2) { width: 70vw; height: 70vw; right: -22vw; bottom: -30vw; background: radial-gradient(closest-side, var(--purple), transparent); }

header.top, main, .foot { position: relative; z-index: 1; }

/* ---------- frame ---------- */
.frame {
  max-width: var(--frame);
  margin: 0 auto;
  padding-inline: var(--s4);
  border-inline: 1px solid var(--line);
  width: 100%;
}

/* ---------- header ---------- */
header.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22, 22, 30, .94);
  border-bottom: 1px solid var(--line);
}
.top-inner { height: var(--top-h); display: flex; align-items: center; gap: var(--s4); }
.mark { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.mark-glyph {
  display: grid; place-items: center; width: 32px; height: 32px;
  font: 700 13px/1 var(--mono); color: var(--bg); background: var(--cyan);
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}
.mark-name { font: 400 24px/1 var(--serif); letter-spacing: -.02em; color: var(--text); }
.mark-dot { font: 400 24px/1 var(--serif); color: var(--pink); margin-left: -10px; }
.nav { display: flex; gap: var(--s1); margin-left: var(--s2); font-size: 14px; font-weight: 500; }
.nav a { position: relative; padding: 8px 12px; color: var(--text-2); transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover { color: var(--text); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--text); }
.top-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.langs { display: inline-flex; gap: 2px; font: 500 11px/1 var(--mono); letter-spacing: .08em; }
.langs a { padding: 8px 6px; color: var(--muted); border-bottom: 1px solid transparent; }
.langs a:hover { color: var(--text); }
.langs a[aria-current] { color: var(--text); border-bottom-color: var(--cyan); }
/* below 900 px the links move into a disclosure menu: plain HTML, no script needed to open it */
.menu { display: none; }
.menu summary {
  display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 var(--s2); cursor: pointer;
  font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text);
  border: 1px solid var(--line-2);
}
.menu summary::after { content: ""; width: 14px; height: 8px; background: linear-gradient(var(--text), var(--text)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--text), var(--text)) 0 100% / 100% 2px no-repeat; }
.menu[open] summary { border-color: var(--cyan); color: var(--cyan); }
.menu-panel {
  position: absolute; right: var(--s2); top: calc(100% + 1px); width: min(320px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line-2); padding: var(--s1);
  display: flex; flex-direction: column;
}
.menu-panel a { padding: 14px var(--s2); font-size: 16px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line); }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a:hover, .menu-panel a[aria-current] { color: var(--cyan); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 44px; padding: 0 var(--s3);
  font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn-lg { height: 56px; padding: 0 var(--s4); font-size: 13px; }
.btn-primary { background: var(--cyan); border-color: var(--cyan); color: var(--bg); font-weight: 700; }
.btn-primary:hover { box-shadow: 0 0 0 1px var(--cyan), 0 0 36px rgba(var(--cyan-rgb), .45); }
.btn-ghost {
  --bc: var(--line-2);
  /* draw the 45 degree edges the clip-path cut out of the border */
  background-image: linear-gradient(225deg, transparent 3.4px, var(--bc) 3.4px 4.8px, transparent 4.8px),
    linear-gradient(45deg, transparent 3.4px, var(--bc) 3.4px 4.8px, transparent 4.8px);
}
.btn-ghost:hover { --bc: var(--cyan); border-color: var(--cyan); color: var(--cyan); }
.btn-top { height: 40px; padding: 0 var(--s2); }
.btn[aria-disabled="true"] { cursor: progress; }

/* ---------- sections: left axis, 7 + 5 head, full-width content ---------- */
.band { position: relative; }
/* skip rendering and animating sections far off screen; the reserved size keeps the scrollbar stable */
.sec:not(.hero):not(.page-hero) { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.band-raised { background: var(--band-raised); border-block: 1px solid var(--line); }
.band-deep { background: var(--band-deep); border-block: 1px solid var(--line); }
.band-close { background: radial-gradient(60% 80% at 50% 100%, rgba(var(--purple-rgb), .16), transparent 70%), var(--band-deep); border-top: 1px solid var(--line); }
.sec-grid { position: relative; padding-block: var(--sec-pad); }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s2) var(--s8); align-items: end;
  margin-bottom: var(--head-gap);
}
.sec-head > .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.sec-head > h2 { grid-column: 1; }
.sec-head > .sec-intro { grid-column: 2; margin: 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin-bottom: var(--s2); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.sec-head h2 { font: 300 clamp(34px, 4.2vw, 58px)/1.05 var(--serif); letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.sec-head h2 em, .display em, .statement em {
  font-style: italic; font-weight: 300;
  background: linear-gradient(100deg, var(--purple) 0%, var(--cyan) 45%, var(--blue) 70%, var(--purple) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
.sec-intro { max-width: 52ch; color: var(--text-2); font-size: 17px; text-wrap: pretty; }

/* ---------- hero ---------- */
.hero .sec-grid { padding-block: var(--s6) var(--s4); display: flex; flex-direction: column; }
.hero-copy {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s8); row-gap: var(--s4); align-items: center;
}
.hero-copy > .signature { grid-column: 1 / -1; }
.hero-side { padding-bottom: var(--s1); }
/* the signature phrase as a lit selection, the one thing highlighted on the page */
.signature { display: inline-flex; align-items: center; justify-self: start; }
.signature .sig {
  white-space: nowrap;
  font: italic 600 clamp(20px, 2vw, 26px)/1.25 var(--sig); letter-spacing: .01em; color: var(--bg);
  padding: 2px 14px 4px;
  background: linear-gradient(100deg, var(--purple), var(--cyan)) 0 0 / 100% 100% no-repeat;
  box-shadow: 0 0 32px rgba(var(--purple-rgb), .35);
  animation: select-sweep .7s var(--ease) .25s backwards;
}
.booting .signature .sig { animation-delay: 1.25s; }
@keyframes select-sweep { from { background-size: 0% 100%; color: var(--text); box-shadow: none; } to { background-size: 100% 100%; } }
.display {
  font: 300 clamp(46px, 6vw, 92px)/.96 var(--serif);
  letter-spacing: -.04em;
  color: var(--text);
  text-wrap: balance;
}
.display-page { font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.display-sub { font-size: clamp(48px, 6.6vw, 104px); }
.caret {
  display: inline-block; width: .3em; height: .7em; margin-left: .1em; vertical-align: -.02em;
  background: var(--cyan); box-shadow: 0 0 24px rgba(var(--cyan-rgb), .6);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.lead { max-width: 58ch; font-size: 18px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.trust { margin-top: var(--s3); font-size: 13px; color: var(--muted); }
.trust::before { content: "\2713  "; color: var(--green); }

/* hub page head: crumbs, H1 and lead on the left, one supporting panel on the right */
.page-hero .sec-grid { padding-block: var(--s6) var(--s8); }
.ph { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
.ph .lead { margin-top: var(--s3); }
.ph .actions { margin-top: var(--s4); }
.crumbs { display: flex; gap: 10px; font: 400 12px/1 var(--mono); color: var(--muted); margin-bottom: var(--s4); }
.crumbs a { color: var(--cyan); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }


.hero .sec-grid > .lead { margin-top: var(--s3); }

/* secondary action: a text link beside the primary button */
.btn-text { height: 56px; padding: 0 var(--s1) 0 0; color: var(--cyan); background: none; border-color: transparent; clip-path: none; }
.btn-text::after { content: "\2193"; }
.btn-text:hover { color: var(--text); }
.actions { align-items: center; column-gap: var(--s3); row-gap: var(--s1); }

.page-hero + .sec:not(.band) > .sec-grid { padding-top: var(--s4); }
/* ---------- forge: idea, code, result on one canvas stage (rules: DESIGN.md "Forge constraint code") ---------- */
.forge { width: 100%; margin-top: var(--s6); }
/* fixed height: the static strip and the live canvas occupy the same box, so going live never shifts layout.
   Wide screens get one short row (idea, code, result) that fits under the call to action; below 1000 px
   the stage is tall and the canvas stacks the three zones. */
.stage { height: 268px; text-align: left; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-static { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s4); padding: var(--s4); align-items: center; }
/* while the film plays the strip is hidden from sight only: the canvas is decorative (aria-hidden), so
   the strip stays the content screen readers get */
.stage.live .stage-static { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the strip stacks where the canvas stacks */
@media (max-width: 1000px) { .stage { height: 560px; } .stage-static { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s3); align-content: center; } }
.ss-l { display: block; margin-bottom: var(--s2); font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.ss-idea { font: italic 600 20px/1.4 var(--sig); color: var(--text); }
.ss-code { font: 12px/1.8 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ss-code .kw { color: var(--purple); }
.ss-code .n { color: var(--yellow); }
.ss-res { font: 400 22px/1.3 var(--serif); color: var(--text); }
.forge-cap { margin-top: var(--s2); font-size: 12px; color: var(--muted); }

/* one way to say "done": a green result chip, used by the forge and every service card */
.ok-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; font: 700 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--green); background: rgba(var(--green-rgb), .12); border: 1px solid rgba(var(--green-rgb), .45); white-space: nowrap; }
.ok-chip::before { content: "\2713"; }
/* ---------- cut frames ---------- */
.frame-cut {
  position: relative;
  --edge: var(--line-2);
  border: 1px solid transparent;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.frame-cut::before, .frame-cut::after {
  content: ""; position: absolute; width: calc(var(--cut) * 1.4142); height: 2px; background: var(--edge);
  transform-origin: 0 50%; transform: rotate(45deg); z-index: 2; pointer-events: none;
}
.frame-cut::before { left: calc(100% - var(--cut)); top: -1px; }
.frame-cut::after { left: -1px; top: calc(100% - var(--cut) - 1px); }
.led { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

.led { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.chip {
  display: inline-block; align-self: flex-start; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--line-2); padding: 6px 10px;
}
.chip-link { align-self: center; color: var(--cyan); border-color: rgba(var(--cyan-rgb), .35); white-space: nowrap; transition: border-color .2s, background .2s; }
.chip-link::after { content: " \2193"; }
.chip-go::after { content: " \2192"; }
.chip-out::after { content: " \2197"; }
.chip-link:hover, .chip-link:focus-visible { border-color: var(--cyan); background: rgba(var(--cyan-rgb), .08); }
/* a hovered tag sits inside the cursor glow: the glow dims so the lit dots stop competing with the letters */
.pointer:has(.chip-link:hover) .matrix-glow { opacity: .7; }

/* ---------- what we build: one ruled grid, eight cells ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) var(--s3);
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(22, 22, 30, .5);
  transition: background .25s;
}
.tile::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.tile:hover { background: rgba(var(--cyan-rgb), .05); }
.tile:hover::after { transform: scaleX(1); }
.tile svg { width: 32px; height: 32px; margin-bottom: var(--s2); fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.tile h3 { font: 400 26px/1.1 var(--serif); letter-spacing: -.015em; color: var(--text); }
.tile p { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.tile-cta { background: rgba(var(--cyan-rgb), .07); justify-content: space-between; }
.tile-cta::after { transform: scaleX(1); }
.tile-cta .btn { align-self: flex-start; margin-top: var(--s2); }

/* ---------- cut frames, services ---------- */
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); }
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.card { display: flex; flex-direction: column; grid-column: span 3; }
.card:hover {
  --edge: var(--cyan);
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--spin), var(--cyan), var(--purple), var(--pink), var(--cyan)) border-box;
  animation: spin 4s linear infinite;
  box-shadow: 0 0 48px rgba(var(--cyan-rgb), .12);
}
@keyframes spin { to { --spin: 360deg; } }
.card-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.card-wide .viz { height: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--line); }
.card h3 { font: 400 36px/1.05 var(--serif); letter-spacing: -.025em; margin-top: var(--s3); color: var(--text); }
.card-line { margin-top: var(--s2); color: var(--text); font-size: 16px; }
.ticks { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line); display: grid; gap: var(--s1); font-size: 14.5px; color: var(--text-2); }
.ticks li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; }
.ticks li::before { content: "+"; font: 700 14px/1.65 var(--mono); color: var(--green); }
.card-actions { margin-top: auto; padding-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
.viz-clean { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--s2); }
.viz-clean li { min-height: 28px; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.viz-clean b { color: var(--green); }
.viz-clean .wall { position: relative; width: 28px; display: flex; justify-content: center; }
.viz-clean .wall::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--pink); opacity: .7; }
.viz-clean .wall span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); background: rgba(22, 22, 30, .95); padding: 8px 2px; align-self: center; position: relative; }
.viz { height: 184px; border-bottom: 1px solid var(--line); background: rgba(22, 22, 30, .7); font-size: 12px; overflow: hidden; position: relative; padding: var(--s2) var(--s3); }
.viz .k, .viz .kw { color: var(--purple); }
.viz .s { color: var(--green); }
.vz-cmd { color: var(--text-2); padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 8px; }
.viz-run li { height: 30px; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; color: var(--text-2); }
.viz-run .tag { color: var(--muted); }
.viz-run b { font-weight: 700; color: var(--green); }
/* the run types itself in, line by line, then holds; every line resets together at the cycle start */
.viz-run li:nth-child(1) { animation: run-1 7s steps(1) infinite; }
.viz-run li:nth-child(2) { animation: run-2 7s steps(1) infinite; }
.viz-run li:nth-child(3) { animation: run-3 7s steps(1) infinite; }
.viz-run li:nth-child(4) { animation: run-4 7s steps(1) infinite; }
@keyframes run-1 { 0% { opacity: 0; } 6%, 100% { opacity: 1; } }
@keyframes run-2 { 0% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes run-3 { 0% { opacity: 0; } 18%, 100% { opacity: 1; } }
@keyframes run-4 { 0% { opacity: 0; } 24%, 100% { opacity: 1; } }
.viz-doc li { height: 28px; display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.viz-doc .box { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--green); font-size: 11px; font-weight: 700; flex: none; }
.viz-doc .box-late { animation: late 7s steps(1) infinite; }
@keyframes late { 0% { color: transparent; border-color: var(--cyan); } 45%, 100% { color: var(--green); border-color: var(--line-2); } }
/* outcomes: the hot path shrinks, the work ends in a result chip (same grammar as the forge) */
.vz-bars { position: absolute; right: var(--s3); top: 48px; width: 96px; height: 80px; display: flex; align-items: flex-end; gap: 6px; }
.vz-bars span { flex: 1; height: 40%; background: var(--line-2); }
.vz-bars span:nth-child(2) { height: 55%; }
.vz-bars span:nth-child(4) { height: 30%; }
.vz-bars .hot { height: 100%; transform-origin: bottom; transform: scaleY(.38); background: var(--green); animation: hot-h 7s var(--ease) infinite, hot-c 7s steps(1) infinite; }
@keyframes hot-h { 0%, 35% { transform: none; } 55%, 100% { transform: scaleY(.38); } }
@keyframes hot-c { 0% { background: var(--pink); } 50%, 100% { background: var(--green); } }
.vz-out { position: absolute; right: var(--s3); bottom: var(--s2); animation: out 7s steps(1) infinite; }
@keyframes out { 0% { opacity: 0; } 62%, 100% { opacity: 1; } }
.vz-exec { position: absolute; left: 0; right: 0; top: calc(var(--s2) + 56px); height: 28px; background: rgba(var(--cyan-rgb), .1); box-shadow: inset 2px 0 0 var(--cyan); transform: translateY(56px); animation: exec 7s steps(1) infinite; pointer-events: none; }
@keyframes exec { 0% { transform: none; } 20% { transform: translateY(28px); } 40%, 100% { transform: translateY(56px); } }
.viz-api pre { font: inherit; color: var(--text-2); white-space: pre-wrap; margin-top: 8px; }
.viz-api .res { animation: run-2 6s steps(1) infinite; }
.viz-api .arrow { color: var(--pink); }
.vz-check { margin-top: 12px; color: var(--muted); animation: run-3 6s steps(1) infinite; }
.vz-check b { color: var(--green); margin-right: 8px; }
.viz-code ol { counter-reset: cl; }
.viz-code li { counter-increment: cl; height: 28px; display: flex; align-items: center; white-space: pre; color: var(--text-2); }
.viz-code li::before { content: counter(cl); width: 32px; flex: none; color: var(--faint); }

/* ---------- products: drawn app windows (decorative, aria-hidden; the text next to them carries the facts) ---------- */
.prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.prod { display: flex; flex-direction: column; }
.prods > .prod { grid-column: auto; }
.prod-art { padding: var(--s4) var(--s4) 0; background: linear-gradient(180deg, rgba(var(--cyan-rgb), .05), transparent), rgba(22, 22, 30, .6); border-bottom: 1px solid var(--line); overflow: hidden; }
.prod-art .win { border-bottom: 0; margin-bottom: -1px; }
.prod-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.prod-body h3 { font: 400 40px/1.05 var(--serif); letter-spacing: -.025em; margin-top: var(--s2); color: var(--text); }
.win { background: var(--bg); border: 1px solid var(--line-2); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.win-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.win-bar b { margin-left: 12px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.win-bar .addr { margin-left: 12px; flex: 1; height: 16px; background: var(--bg); border: 1px solid var(--line); }
/* bars stand for text: width comes from --w, never from invented words */
.bar { display: block; height: 6px; width: var(--w, 60%); background: var(--line-2); }
.bar-s { height: 4px; background: var(--line); }
/* GrimDex: tabs, instant search, two panes of rows */
.gd { height: 252px; }
.gd-tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: var(--panel); }
.gd-tabs span { width: 84px; height: 22px; background: var(--bg); opacity: .5; }
.gd-tabs span.on { opacity: 1; box-shadow: inset 0 2px 0 var(--cyan); }
.gd-search { display: flex; align-items: center; gap: 8px; margin: 10px 10px 0; height: 26px; padding: 0 8px; border: 1px solid var(--cyan); box-shadow: 0 0 18px rgba(var(--cyan-rgb), .2); }
.gd-search::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--cyan); border-radius: 50%; }
.gd-search .bar { background: var(--cyan); opacity: .7; }
.gd-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.gd-pane { display: grid; gap: 0; align-content: start; border: 1px solid var(--line); }
.gd-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 28px; align-items: center; gap: 8px; height: 24px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.gd-row:last-child { border-bottom: 0; }
.gd-row::before { content: ""; width: 12px; height: 9px; background: var(--yellow); opacity: .75; }
.gd-row.f::before { width: 9px; height: 12px; background: var(--blue); opacity: .6; margin-left: 1px; }
.gd-row .bar { background: var(--text-2); opacity: .55; }
.gd-row .sz { height: 4px; background: var(--line-2); }
.gd-row.sel { background: rgba(var(--cyan-rgb), .12); box-shadow: inset 2px 0 0 var(--cyan); }
.gd-row.sel .bar { opacity: .9; background: var(--text); }
/* FeedTamer: a feed grid where filtered tiles fade out, and the extension popup with its switches */
.ft { height: 252px; position: relative; }
.ft-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; padding-right: 44%; }
.ft-tile { display: grid; gap: 6px; }
.ft-th { aspect-ratio: 16 / 9; background: var(--panel-2); position: relative; }
.ft-tile.off .ft-th { background: repeating-linear-gradient(135deg, var(--panel) 0 5px, var(--bg) 5px 10px); }
.ft-tile.off .bar { opacity: .35; }
.ft-tile.off .ft-th::after { content: ""; position: absolute; inset: 0; border: 1px dashed var(--pink); opacity: .7; }
.ft-pop { position: absolute; right: 14px; top: 46px; width: 38%; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 12px 36px rgba(0, 0, 0, .45); padding: 12px; display: grid; gap: 12px; }
.ft-pop .bar { height: 5px; }
.ft-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ft-sw::after { content: ""; flex: none; width: 24px; height: 12px; background: linear-gradient(var(--bg), var(--bg)) 14px 2px / 8px 8px no-repeat, rgba(var(--green-rgb), .85); }
.ft-sw.off::after { background: linear-gradient(var(--muted), var(--muted)) 2px 2px / 8px 8px no-repeat, var(--line-2); }
/* products page: feature rows, copy beside a large window */
.prod-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center; padding-block: var(--s6); border-top: 1px solid var(--line); }
.prod-row:first-child { border-top: 0; padding-top: 0; }
.prod-row .prod-art { border: 1px solid var(--line-2); padding: var(--s4); }
.prod-row .prod-art .win { margin-bottom: 0; border-bottom: 1px solid var(--line-2); }
.prod-row h2 { font: 300 clamp(44px, 5vw, 68px)/1 var(--serif); letter-spacing: -.035em; margin: var(--s2) 0 var(--s3); color: var(--text); }
.prod-row .lead { font-size: 19px; color: var(--text); }
.prod-row.rev .prod-copy { order: 2; }

/* ---------- process: four steps on one rail ---------- */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); position: relative; counter-reset: st; }
.rail::before { content: ""; position: absolute; left: 22px; right: 0; top: 22px; height: 1px; background: var(--line-2); }
.rail::after {
  content: ""; position: absolute; top: 21px; left: 0; width: 25%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); filter: drop-shadow(0 0 6px var(--cyan));
  animation: flow 6s var(--ease) infinite;
}
@keyframes flow { from { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateX(300%); opacity: 0; } }
.step { position: relative; display: flex; flex-direction: column; padding-top: var(--s8); z-index: 1; }
.node { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; font: 300 24px/1 var(--serif); color: var(--text); background: var(--bg); border: 1px solid var(--line-2); }
.node-ok { color: var(--green); border-color: var(--green); box-shadow: 0 0 18px rgba(var(--green-rgb), .3); }
.step h3 { font: 400 30px/1.1 var(--serif); letter-spacing: -.02em; color: var(--text); }
.step p { margin-top: var(--s1); font-size: 15px; color: var(--text-2); }
/* each step leaves an artifact; the last one is the result chip */
.step .art { align-self: flex-start; margin-top: auto; padding: 5px 10px; font: 400 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--text-2); border: 1px dashed var(--line-2); white-space: nowrap; }
.step p { margin-bottom: var(--s3); }
.step .art.ok-chip { border-style: solid; color: var(--green); }

/* ---------- situations: typographic columns ---------- */
.sits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.sit { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.sit .num { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--pink); }
.sit .problem { font: 400 clamp(20px, 1.9vw, 24px)/1.3 var(--serif); letter-spacing: -.01em; color: var(--text); }
.sit .chip-link { margin-top: auto; align-self: flex-start; }

/* ---------- Delphi: before and after, the secondary service ---------- */
.ba { padding: var(--s4); }
.ba-grid { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 0; align-items: stretch; }
.ba-grid > * { display: flex; align-items: center; padding-block: 14px; border-top: 1px solid var(--line); }
.ba-grid .ba-h { border-top: 0; padding-top: 0; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ba-grid .ba-h.from { color: var(--muted); }
.ba-grid .ba-h.to { color: var(--cyan); }
.ba-grid .a { color: var(--text-2); }
.ba-grid .ar { color: var(--pink); font-family: var(--mono); justify-content: center; }
.ba-grid .b { color: var(--text); font-weight: 600; }
.ba-note { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.dl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s6); align-items: center; padding: var(--s6); }
.dl h2 { font: 300 clamp(30px, 3.4vw, 44px)/1.08 var(--serif); letter-spacing: -.025em; text-wrap: balance; color: var(--text); }
.dl p { margin-top: var(--s2); color: var(--text-2); max-width: 52ch; }
.dl .actions { margin-top: var(--s3); }
.scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.scope li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s3); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(22, 22, 30, .5); }
.scope .num { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--pink); }
.scope .scope-d { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.scope .tenet { font: 400 21px/1.35 var(--serif); letter-spacing: -.01em; color: var(--text); }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
.qa > div { padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.qa h3 { font: 400 clamp(21px, 2vw, 26px)/1.25 var(--serif); letter-spacing: -.01em; color: var(--text); }
.qa p { margin-top: var(--s1); color: var(--text-2); font-size: 15.5px; }

/* ---------- company: facts, principles, quotes ---------- */
.facts { padding: var(--s4); display: grid; gap: 0; }
.facts-top { display: flex; align-items: center; gap: var(--s2); padding-bottom: var(--s3); }
.facts-top .mark-glyph { width: 48px; height: 48px; font-size: 18px; }
.facts-top strong { font: 400 30px/1 var(--serif); letter-spacing: -.02em; color: var(--text); font-weight: 400; }
.facts li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s2); align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text); font-weight: 500; }
.facts .fl { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tenets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); margin-bottom: var(--s6); }
.tenets li { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s3); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(22, 22, 30, .5); }
.tenets .num { font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--pink); }
.tenet { font: 400 clamp(20px, 2vw, 25px)/1.3 var(--serif); letter-spacing: -.01em; color: var(--text); }
.tenets-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tenets-4 .tenet { font-size: clamp(19px, 1.7vw, 22px); }
.lineage { display: grid; gap: var(--s3); }
.lineage-l { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.lineage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.cite { display: grid; align-content: start; gap: var(--s2); padding-left: var(--s3); border-left: 1px solid rgba(var(--cyan-rgb), .45); }
.cite blockquote p { font: italic 300 clamp(19px, 1.8vw, 23px)/1.4 var(--serif); color: var(--text); }
.cite figcaption { font: 400 12px/1.5 var(--mono); color: var(--text-2); }
.cite figcaption a { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--cyan-rgb), .45); text-underline-offset: 3px; }
.cite figcaption a:hover, .cite figcaption a:focus-visible { color: var(--cyan); }
.svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.svcs a { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) var(--s3); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: rgba(22, 22, 30, .5); position: relative; transition: background .25s; }
.svcs a::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.svcs a:hover, .svcs a:focus-visible { background: rgba(var(--cyan-rgb), .05); }
.svcs a:hover::after, .svcs a:focus-visible::after { transform: scaleX(1); }
.svcs h3 { font: 400 26px/1.1 var(--serif); letter-spacing: -.015em; color: var(--text); }
.svcs p { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.svcs .go { margin-top: auto; padding-top: var(--s2); font: 500 16px/1 var(--mono); color: var(--cyan); }
.svcs .go::after { content: "\2192"; }

/* ---------- contact ---------- */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.kinds > .kind { grid-column: auto; }
.kind { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); }
.kind .num { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--pink); }
.kind h3 { font: 400 36px/1.05 var(--serif); letter-spacing: -.025em; color: var(--text); }
.kind p { color: var(--text-2); }
.kind .btn { align-self: flex-start; margin-top: auto; }
.kind .grow { flex: 1; }
.checklist { padding: var(--s4); }
.checklist h2 { font: 700 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--s2); }
.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s1); padding: 14px 0; border-top: 1px solid var(--line); color: var(--text); }
.checklist li::before { content: "\2713"; color: var(--green); font-family: var(--mono); }

/* ---------- closing call to action ---------- */
.band-close .sec-grid { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.band-close .sec-head { display: block; max-width: 900px; margin-bottom: var(--s6); }
.band-close .sec-head .eyebrow { justify-content: center; margin-bottom: var(--s2); }
.band-close .sec-head h2 { font-size: clamp(38px, 5.2vw, 70px); }
.band-close .sec-intro { margin: var(--s3) auto 0; }
.contact { display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact .btn + .btn { margin-top: var(--s2); }
.note { margin-top: var(--s4); font-size: 13px; color: var(--muted); }

/* ---------- legal documents ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--top-h) + var(--s4)); display: grid; gap: 0; font-size: 14px; }
.doc-toc b { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: var(--s2); }
.doc-toc a { display: block; padding: 10px 0 10px 14px; border-left: 1px solid var(--line-2); color: var(--text-2); }
.doc-toc a:hover, .doc-toc a:focus-visible { color: var(--cyan); border-left-color: var(--cyan); }
.doc-body { max-width: var(--w-text); counter-reset: ds; }
.doc-body section { padding-block: var(--s3); border-top: 1px solid var(--line); counter-increment: ds; scroll-margin-top: calc(var(--top-h) + var(--s2)); }
.doc-body section:first-child { border-top: 0; padding-top: 0; }
.doc-body h2 { font: 400 30px/1.15 var(--serif); letter-spacing: -.02em; color: var(--text); }
.doc-body h2::before { content: counter(ds, decimal-leading-zero); display: block; margin-bottom: var(--s1); font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--pink); }
.doc-body p { margin-top: var(--s2); color: var(--text-2); }
.updated { margin-top: var(--s3); font: 400 12px/1.4 var(--mono); color: var(--muted); }
.nf-links { display: grid; gap: 0; max-width: 420px; margin-top: var(--s4); }
.nf-links a { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line-2); color: var(--text); font-weight: 500; }
.nf-links a:last-child { border-bottom: 1px solid var(--line-2); }
.nf-links a::after { content: "\2192"; font-family: var(--mono); color: var(--cyan); }
.nf-links a:hover { color: var(--cyan); }

/* ---------- footer ---------- */
.foot { background: var(--band-deep); border-top: 1px solid var(--line); }
.foot-main { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s6); padding-block: var(--s8); }
.foot-brand p { margin: var(--s2) 0 var(--s3); max-width: 34ch; font-size: 14.5px; color: var(--text-2); }
.foot-col h2 { font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.foot-col li a { display: inline-block; padding: 5px 0; font-size: 14.5px; color: var(--text-2); }
.foot-col li a:hover, .foot-col li a:focus-visible { color: var(--cyan); }
.foot-col li a[href^="https:"]::after { content: " \2197"; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.foot-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- boot (once per session, never under reduced motion) ---------- */
.boot { display: none; }
.booting .boot {
  display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center;
  background: var(--bg); font-size: 14px;
  animation: boot-out .3s ease-out .85s forwards;
}
.boot-inner { width: min(520px, 86vw); }
.boot-line { opacity: 0; color: var(--text-2); animation: boot-in .01s linear forwards; }
.boot-line .ok { color: var(--green); }
.boot-line:nth-child(1) { animation-delay: .05s; }
.boot-line:nth-child(2) { animation-delay: .22s; }
.boot-line:nth-child(3) { animation-delay: .4s; }
.boot-gauge { display: flex; align-items: center; gap: 12px; margin-top: var(--s3); font-size: 12px; }
.boot-label { color: var(--pink); font-weight: 700; letter-spacing: .1em; }
.boot-track { flex: 1; height: 10px; border: 1px solid var(--line-2); padding: 1px; }
.boot-fill {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 11px);
  box-shadow: 0 0 14px rgba(var(--cyan-rgb), .5);
  animation: boot-fill .75s var(--ease) .05s forwards;
}
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-fill { to { width: 100%; } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }


/* ---------- entrance + scroll reveal (CSS only; content never depends on JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* fill backwards, never both: an animation that holds its end state keeps its element on a compositor
     layer for good, and that text loses subpixel smoothing */
  .hero-copy > *, .ph > * { animation: rise .8s var(--ease) backwards; }
  /* the headline is the largest content: it rises into place but is never invisible, so it counts as painted
     on its first frame (an element that starts at opacity 0 only counts when its fade ends) */
  .hero-copy > .display, .ph > :first-child { animation-name: rise-in-place; }
  .hero-copy > .hero-side, .ph > :nth-child(2) { animation-delay: .16s; }
  .booting .hero-copy > *, .booting .ph > * { animation-delay: 1.05s; }
  .hero .forge { animation: rise .8s var(--ease) .34s backwards; }
  .booting .hero .forge { animation-delay: 1.15s; }
  /* one-shot reveals: app.js hides only what starts below the fold, then plays this once and clears it */
  .pre { opacity: 0; }
  .in { animation: rise .7s var(--ease) backwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rise-in-place { from { transform: translateY(24px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aurora { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .rail::after, .rail::before { display: none; }
  .foot-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .sits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope, .svcs, .tenets-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --sec-pad: var(--s6); --head-gap: var(--s4); }
  .nav { display: none; }
  .menu { display: block; }
  .hero-copy, .ph, .sec-head, .prod-row, .dl, .doc { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { row-gap: var(--s3); }
  .sec-head > .sec-intro { grid-column: 1; }
  .ph { gap: var(--s6); }
  .prod-row { gap: var(--s4); padding-block: var(--s6); }
  .prod-row.rev .prod-copy { order: 0; }
  .prods, .kinds, .lineage-grid, .qa { grid-template-columns: minmax(0, 1fr); }
  .tenets, .tenets-4 { grid-template-columns: minmax(0, 1fr); }
  .card { grid-column: 1 / -1; }
  .card-wide { grid-template-columns: minmax(0, 1fr); }
  .card-wide .viz { border-right: 0; border-bottom: 1px solid var(--line); }
  .dl { padding: var(--s4); gap: var(--s4); }
  .doc { gap: var(--s4); }
  .doc-toc { position: static; }
  .foot-main { padding-block: var(--s6); gap: var(--s4); }
  .hero .sec-grid, .page-hero .sec-grid { padding-block: var(--sec-pad); }
}
@media (max-width: 600px) {
  .frame { padding-inline: var(--s2); }
  .mark-name, .mark-dot { display: none; }
  .top-inner { gap: var(--s2); }
  .top-actions { gap: var(--s1); }
  .tiles, .scope, .svcs, .sits { grid-template-columns: minmax(0, 1fr); }
  .tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s2); row-gap: 4px; padding: var(--s3) var(--s2); align-content: start; }
  .tile svg { grid-row: 1 / span 2; margin: 2px 0 0; }
  .tile h3 { font-size: 24px; grid-column: 2; }
  .tile p { grid-column: 2; }
  .tile-cta > div { grid-column: 2; grid-row: 1 / span 2; }
  .tile-cta .btn { grid-column: 1 / -1; width: auto; margin-top: var(--s2); }
  .rail { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
  .rail::before { display: block; left: 22px; right: auto; top: 44px; bottom: 44px; width: 1px; height: auto; }
  .step { padding-top: 0; padding-left: 68px; min-height: 44px; }
  .step .art { margin-top: 0; }
  .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card h3, .prod-body h3 { font-size: 32px; }
  .signature { margin-bottom: 0; }
  /* drawn mechanisms grow with their text on a narrow card, and the result chip joins the flow instead of floating over it */
  .viz { height: auto; min-height: 184px; }
  .vz-out { position: static; margin-top: var(--s1); display: flex; justify-content: flex-end; }
  .viz-run .vz-out { display: none; }
  /* phones: the stage follows the headline, so idea, code and result fill the first screen; the lead and
     the call to action follow it (the header keeps a contact button in view) */
  .hero-copy, .hero-side { display: contents; }
  .hero .signature { order: 1; }
  .hero .display { order: 2; }
  .hero .forge { order: 3; margin-top: var(--s3); }
  .hero .lead { order: 4; margin-top: var(--s3); }
  .hero .actions { order: 5; margin-top: var(--s3); }
  .hero .trust { order: 6; }
  .hero .sec-grid { padding-top: var(--s3); }
  .hero .signature, .hero .display { margin-bottom: var(--s2); }
  .stage { height: 520px; }
  .actions .btn { width: 100%; }
  .gd-panes { padding: 8px; gap: 8px; }
  .ft-feed { gap: 8px; padding: 10px; padding-right: 46%; }
  .ft-feed .ft-tile:nth-child(n+7) { display: none; }
  .ft-pop { width: 40%; right: 10px; top: 40px; padding: 10px; gap: 10px; }
  .prod-art { padding: var(--s2) var(--s2) 0; }
  .ba { padding: var(--s3); }
  .facts, .checklist, .kind { padding: var(--s3); }
  .foot-bar { flex-wrap: wrap; }
}

/* ---------- contact dialog: one modal form, opened by the hero action, the contact action and the header ---------- */
.cdlg {
  /* the universal reset zeroes margins, which would pin a modal dialog to the top left; auto centres it */
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--text);
  width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: visible;
}
/* browsers without native <dialog> do not hide it while closed */
.cdlg:not([open]) { display: none; }
/* literal value: custom properties reach ::backdrop only in 2024+ engines (same colour as --band-deep) */
.cdlg::backdrop { background: rgba(9, 9, 14, .78); }
/* the page behind does not scroll while the dialog is open; the scrollbar gutter stays reserved so nothing shifts */
html:has(.cdlg[open]) { overflow: hidden; scrollbar-gutter: stable; }
/* the box is the cut frame (.frame-cut); its scroll area keeps a tall form inside the viewport */
.cdlg-scroll { max-height: calc(100dvh - 32px); overflow-y: auto; padding: var(--s4); }
@media (max-width: 600px) { .cdlg-scroll { padding: var(--s3); } }
.cdlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s3); }
.cdlg-head h2 { font: 300 clamp(26px, 3.2vw, 34px)/1.1 var(--serif); letter-spacing: -.02em; color: var(--text); }
.cdlg-x { width: 44px; padding: 0; flex: none; font-size: 20px; letter-spacing: 0; }
.cform { display: grid; gap: var(--s3); }
.cform[hidden], .cf-done[hidden] { display: none; }
.cf-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.cf-field > label, .cf-field > legend, .cf-row > label {
  display: block;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
.cf-field > label { margin-bottom: var(--s1); }
.cf-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: var(--s1); }
.cf-row > label { margin-bottom: 0; }
.cf-count { font: 400 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.cform input[type="email"], .cform textarea {
  display: block; width: 100%;
  /* 16px: iOS Safari zooms the page when a smaller field takes focus */
  font: 400 16px/1.5 var(--mono); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 0;
  padding: 12px var(--s2); appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.cform textarea { resize: vertical; min-height: 144px; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--muted); }
.cform input[type="email"]:focus, .cform textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.cform input[aria-invalid="true"], .cform textarea[aria-invalid="true"] { border-color: var(--pink); }
/* legend margins vary between browsers inside a fieldset, so the gap under the question sits on the choice row */
.cf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); margin-top: var(--s1); }
@media (max-width: 420px) { .cf-seg { grid-template-columns: 1fr; } }
.cf-seg label {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s2); margin: 0;
  border: 1px solid var(--line-2);
  font: 500 13px/1.3 var(--mono); letter-spacing: 0; text-transform: none; color: var(--text-2); text-align: center;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
/* the radio covers its whole cell and stays focusable, so the cell is both the hit area and the keyboard target */
.cf-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cf-seg label:hover { border-color: var(--muted); }
.cf-seg label:has(input:checked) { border-color: var(--cyan); color: var(--cyan); background: rgba(var(--cyan-rgb), .08); }
.cf-seg label:has(input:focus-visible) { box-shadow: 0 0 0 1px var(--cyan); }
.cf-field[aria-invalid="true"] .cf-seg label { border-color: var(--pink); }
.cf-err { margin-top: var(--s1); font: 400 12px/1.4 var(--mono); color: var(--pink); }
/* the honeypot is off screen and out of the layout: people never reach it, bots fill it */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-send { width: 100%; }
.cf-send[aria-disabled="true"] { opacity: .6; cursor: progress; }
.cf-send[aria-disabled="true"]:hover { box-shadow: none; }
.cform .trust { text-align: center; margin-top: 0; }
/* one line is always reserved: the live region stays rendered (one shown from display:none is often not announced) and "Sending..." never shifts the form */
.cf-status { min-height: 1.4em; font: 400 12px/1.4 var(--mono); color: var(--text-2); text-align: center; }

.cf-status.is-error { color: var(--pink); }
.cf-done { display: grid; justify-items: center; gap: var(--s2); text-align: center; outline: none; }
.cf-done-h { font: 300 28px/1.15 var(--serif); color: var(--text); }
.cf-done-h::before { content: "\2713  "; color: var(--green); }
.cf-done-d { color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .cdlg[open] .cdlg-box { animation: cdlg-in .18s var(--ease) backwards; }
}
@keyframes cdlg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }