/* onbrainy — identidad C · Chispa (brainy-corp/04-identidad-visual/onbrainy).
   Violeta as the main colour, Uva ink on white and Lavanda, Chispa lime only for small signals (live dots, badges, the rotating word).
   Sora 600 for headlines, Inter for text, Inter 600 uppercase labels; rounded 8–14px corners and soft shadows. */

:root {
  --violet: #6A35FF;       /* Violeta: buttons, symbol, the hero */
  --violet-600: #552ACC;
  --violet-700: #402099;
  --violet-800: #2A1566;
  --violet-300: #9772FF;
  --violet-50: #E9E1FF;
  --violet-tint: #F3EFFF;
  --chispa: #CCFF60;       /* signal only, always with Uva text on it */
  --ok: #12A150;

  --ink: #1A0E3A;          /* Uva */
  --ink-2: #3A2F5E;
  --slate: #625A80;
  --slate-2: #A39DBA;
  --paper: #FFFFFF;
  --paper-2: #F8F6FF;      /* Lavanda, for section rhythm */
  --line: #ECE8F7;
  --line-2: #DCD5EE;

  --maxw: 1240px;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --shadow-xs: 0 1px 2px rgba(26,14,58,.05);
  --shadow-sm: 0 6px 24px rgba(26,14,58,.07);
  --shadow-md: 0 14px 40px rgba(26,14,58,.09);
  --shadow-violet: 0 8px 24px rgba(106,53,255,.22);

  --f-display: "Sora", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-label: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;   /* 600, uppercase, tracked */
  --f-code: ui-monospace, "SF Mono", Consolas, monospace;                        /* only the README card */

  --step--1: clamp(.85rem,.81rem + .15vw,.95rem);
  --step-0: clamp(1.05rem,1rem + .25vw,1.2rem);
  --step-1: clamp(1.35rem,1.15rem + .7vw,1.7rem);
  --step-2: clamp(1.9rem,1.45rem + 1.6vw,2.8rem);
  --step-3: clamp(2.4rem,1.8rem + 2.8vw,4rem);
  --giant: clamp(3.2rem,2rem + 8vw,9rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --pad-x: clamp(20px,4vw,40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--f-body); font-size: var(--step-0); line-height: 1.55;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: var(--r-sm); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: clamp(64px, 9vw, 150px); position: relative; }
.section.tint { background: var(--paper-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .8em; font-family: var(--f-label); font-weight: 600;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--violet); }
.section-head { max-width: 760px; display: grid; gap: 18px; margin-bottom: clamp(40px,5vw,68px); }
.section-head h2 { font-size: var(--step-3); }
.lead { font-size: var(--step-1); color: var(--slate); line-height: 1.45; font-weight: 400; }

/* ---------- buttons ---------- */
/* rounded, Violeta with white text; motion is the arrow, not a lift */
.btn { display: inline-flex; align-items: center; gap: .55em; font-family: var(--f-body); font-weight: 600;
  font-size: var(--step-0); padding: .85em 1.5em; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s; }
.btn svg { width: 1.05em; height: 1.05em; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-violet); }
.btn-primary:hover { background: var(--violet-600); }
.btn-ghost { background: rgba(255,255,255,.85); color: var(--ink-2); border-color: var(--slate-2); }
.btn-ghost:hover { border-color: var(--violet); color: var(--violet-600); }

/* ===================== TOP BAR ===================== */
/* full-width: transparent over the violet hero (white logo/links), frosted white once the page scrolls (.shrunk) */
.dock-wrap { position: fixed; inset: 0 0 auto; z-index: 80; }
.dock { display: flex; align-items: center; gap: 28px; height: 84px;
  padding: 0 max(var(--pad-x), calc((100% - 1320px) / 2));
  background: transparent; border-bottom: 1px solid rgba(255,255,255,.16);
  transition: height .35s var(--ease), background .35s, border-color .35s, box-shadow .35s; }
.dock.shrunk { height: 66px; background: rgba(255,255,255,.86); backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: var(--line); box-shadow: none; }
/* scrolled but still over the violet hero: compact and violet, so it never turns white over violet */
.dock.on-hero { height: 66px; background: rgba(106,53,255,.82); backdrop-filter: blur(16px) saturate(1.4); }
.dock.on-hero .brand-logo { height: 32px; }
.brand-logo { position: relative; height: 40px; flex: 0 0 auto; transition: height .35s var(--ease); }
.dock.shrunk .brand-logo { height: 32px; }
.brand-logo img { height: 100%; width: auto; }
/* white logo over the violet, colour logo once scrolled */
.dock .brand-logo img { transition: opacity .35s; }
.dock .brand-logo .lg-c { position: absolute; left: 0; top: 0; opacity: 0; }
.dock.shrunk .lg-w { opacity: 0; } .dock.shrunk .lg-c { opacity: 1; }
.dock-links { display: flex; gap: 6px; margin-inline: auto; }
.dock-links a { position: relative; font-family: var(--f-body); font-weight: 500; color: rgba(255,255,255,.86);
  padding: 8px 14px; transition: color .25s; }
.dock-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.dock-links a:hover { color: #fff; }
.dock-links a:hover::after { transform: scaleX(1); }
.dock.shrunk .dock-links a { color: var(--ink-2); }
.dock.shrunk .dock-links a:hover { color: var(--violet-700); }
.dock-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.lang-toggle { display: inline-flex; gap: 2px; font-family: var(--f-label); font-weight: 600; font-size: .76rem; letter-spacing: .08em; }
.lang-toggle button { position: relative; border: 0; background: transparent; padding: .35em .45em; cursor: pointer;
  color: rgba(255,255,255,.55); transition: color .25s; }
.lang-toggle button + button::before { content: "/"; position: absolute; left: -4px; color: rgba(255,255,255,.35); }
.lang-toggle button[aria-pressed="true"] { color: #fff; }
.dock.shrunk .lang-toggle button { color: var(--slate-2); }
.dock.shrunk .lang-toggle button + button::before { color: var(--line-2); }
.dock.shrunk .lang-toggle button[aria-pressed="true"] { color: var(--violet-700); }
.dock .btn { padding: .6em 1.2em; font-size: .95rem; }
.dock .btn-primary { background: #fff; color: var(--violet-700); box-shadow: none; }
.dock .btn-primary::after { content: "→"; transition: transform .25s var(--ease); }
.dock .btn-primary:hover::after { transform: translateX(3px); }
.dock.shrunk .btn-primary { background: var(--violet); color: #fff; box-shadow: var(--shadow-violet); }
.dock :focus-visible { outline-color: #fff; }
.dock.shrunk :focus-visible { outline-color: var(--violet); }
.burger { display: none; }

/* full-screen overlay menu */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(255,255,255,.98); backdrop-filter: blur(8px);
  display: grid; align-content: center; gap: 6px; padding: var(--pad-x);
  clip-path: circle(0% at calc(100% - 44px) 44px); transition: clip-path .55s var(--ease); pointer-events: none; }
.overlay.open { clip-path: circle(150% at calc(100% - 44px) 44px); pointer-events: auto; }
.overlay a { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.2rem,10vw,4rem); color: var(--ink);
  letter-spacing: -.03em; line-height: 1.1; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s; }
.overlay.open a { opacity: 1; transform: none; }
.overlay.open a:nth-child(1){ transition-delay:.12s } .overlay.open a:nth-child(2){ transition-delay:.18s }
.overlay.open a:nth-child(3){ transition-delay:.24s } .overlay.open a:nth-child(4){ transition-delay:.30s }
.overlay a:hover { color: var(--violet); }
.overlay-close { position: absolute; top: 30px; right: var(--pad-x); width: 48px; height: 48px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: #fff; cursor: pointer; display: grid; place-items: center; }

/* ===================== SCROLL RULER ===================== */
/* right edge, wide screens with a mouse. A ruler slides under the playhead (--hy, written by scrollRail() in i18n.js) at
   --k px per 1%; the sections stack beside it, the current one big and the next one upright by the ruler. On hover --k
   eases to --kx so the whole page fits the track, and every section becomes a tag on its own mark. The .inv copy is the same rail for dark bands;
   each copy is masked to its own stretch of screen (--n0..--n1 names, --r0..--r1 ruler). */
@property --k { syntax: "<number>"; inherits: true; initial-value: 46; }
.srail { --k: 46; --hy: 104; --p: 0; --kx: 8; --bandp: 10;
  --tick: rgba(98,90,128,.32); --num: var(--slate-2); --name: var(--slate); --name-on: var(--ink); --head: var(--violet); --on-head: #fff;
  --tag: #fff; --tag-line: var(--line-2); --dot: var(--paper);
  position: fixed; z-index: 70; inset: 0 0 0 auto; width: 0; display: none; transition: --k .7s var(--ease); }
.srail.open { --k: var(--kx); }
@media (hover: hover) and (min-width: 1180px) { .srail { display: block; } }
.sr-layer { position: absolute; inset: 0 0 0 auto; width: 0; }
.sr-layer.inv { --tick: rgba(255,255,255,.28); --num: rgba(255,255,255,.5); --name: rgba(255,255,255,.62); --name-on: #fff;
  --head: var(--chispa); --on-head: var(--ink); --tag: var(--ink); --tag-line: rgba(255,255,255,.2); --dot: var(--ink); pointer-events: none; }
.sr-names { position: absolute; inset: 0 0 0 auto; width: 460px; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 var(--n0), transparent var(--n0), transparent var(--n1), #000 var(--n1));
          mask-image: linear-gradient(#000 var(--n0), transparent var(--n0), transparent var(--n1), #000 var(--n1)); }
.sr-ruler { position: absolute; inset: 0 0 0 auto; width: 64px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 var(--r0), transparent var(--r0), transparent var(--r1), #000 var(--r1));
          mask-image: linear-gradient(#000 var(--r0), transparent var(--r0), transparent var(--r1), #000 var(--r1)); }
.inv .sr-names { -webkit-mask-image: linear-gradient(transparent var(--n0), #000 var(--n0), #000 var(--n1), transparent var(--n1));
                         mask-image: linear-gradient(transparent var(--n0), #000 var(--n0), #000 var(--n1), transparent var(--n1)); }
.inv .sr-ruler { -webkit-mask-image: linear-gradient(transparent var(--r0), #000 var(--r0), #000 var(--r1), transparent var(--r1));
                         mask-image: linear-gradient(transparent var(--r0), #000 var(--r0), #000 var(--r1), transparent var(--r1)); }
/* the scale: tick v sits v·k px below 0%, and the scale moves so the current % lands on the playhead */
.sr-ruler::before { content: ""; position: absolute; top: 0; bottom: 0; right: 20px; width: 1px; background: var(--tick); }
.sr-scale { position: absolute; inset: 0 0 auto; transform: translateY(calc(var(--hy) * 1px - var(--p) * var(--k) * 1px)); }
.sr-scale > i { position: absolute; right: 21px; top: calc(var(--v) * var(--k) * 1px); width: 5px; height: 1px; background: var(--tick); }
.sr-scale > i.mj { width: 9px; background: var(--num); }
.sr-scale b { position: absolute; right: 13px; top: -.55em; font: 500 .6rem/1.1 var(--f-label); font-variant-numeric: tabular-nums;
  letter-spacing: .04em; color: var(--num); transition: opacity .3s; }
.srail.open .sr-scale b { opacity: 0; }   /* zoomed out, the section tags do the labelling */
/* section marks on the spine; the current one is filled */
.sr-scale u { position: absolute; right: 17px; top: calc(var(--v) * var(--k) * 1px - 3.5px); width: 7px; height: 7px; box-sizing: border-box;
  border: 1.5px solid var(--num); border-radius: 50%; background: var(--dot); transition: background .3s, border-color .3s; }
.sr-scale u.on { border-color: var(--head); background: var(--head); }
/* the screen's share of the page, as a thumb on the spine */
.sr-band { position: absolute; top: 0; right: 19px; width: 3px; border-radius: 2px; background: var(--head); opacity: .28;
  height: calc(var(--bandp) * var(--k) * 1px); transform: translateY(calc(var(--hy) * 1px - 50%)); }
/* the playhead: a line across the ticks and the % in a tag that covers the numbers under it */
.sr-head { position: absolute; top: 0; right: 0; width: 30px; height: 2px; background: var(--head); transform: translateY(calc(var(--hy) * 1px - 1px)); }
.sr-head b { position: absolute; right: 28px; top: 50%; translate: 0 -50%; padding: 3px 5px; border-radius: 5px; background: var(--head);
  font: 600 .6rem/1 var(--f-label); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--on-head); }

/* names, right-aligned beside the ruler: a small label, and the display word (one <i> per letter) for the current
   section and the next one */
.sr-names a { position: absolute; top: 0; right: 72px; display: block; white-space: nowrap; pointer-events: auto;
  transform: translateY(var(--y, 0)); transition: transform .7s var(--ease); }
.sr-names a .lb { display: block; padding: 4px 0; border: 1px solid transparent; border-radius: 7px;
  font: 600 .64rem/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--name);
  transition: opacity .3s, color .3s, background-color .35s, border-color .35s, padding .35s var(--ease), box-shadow .35s; }
.sr-names a .bg { position: absolute; right: 0; top: 50%; font: 600 1.55rem/1 var(--f-display); letter-spacing: -.03em; color: var(--name-on);
  transform-origin: 100% 50%; transform: translateY(-50%) scale(.5); opacity: 0; transition: opacity .3s, transform .6s var(--ease); }
.sr-names a:hover .lb { color: var(--name-on); }
.sr-names a.big .lb { opacity: 0; }
.sr-names a.big .bg { transform: translateY(-50%); opacity: 1; }
.sr-names i { display: inline-block; font-style: normal; will-change: transform; }
/* the next word's letters are turned by scrollRail() (inline transforms); they ease back only when the rail opens or closes.
   Its link jumps straight to the current slot, since the letters already make up the distance */
.srail.tween .sr-names i { transition: transform .6s var(--ease); }
.sr-names a.next, .sr-names a.next .lb { transition: none; }
.srail.open .sr-names a.next, .srail.tween .sr-names a.next { transition: transform .7s var(--ease); }

/* zoomed out: every section is a tag pinned to its mark by a dashed lead, like the method chart's markers */
.srail.open .sr-names a .lb { opacity: 1; padding: 5px 9px; background-color: var(--tag); border-color: var(--tag-line); box-shadow: var(--shadow-xs);
  transition-delay: 0s, 0s, calc(var(--n) * 30ms), calc(var(--n) * 30ms), 0s, 0s; }
.srail.open .sr-names a .bg { opacity: 0; }
.srail.open .sr-names a .bg i { transform: none !important; }
.srail.open .sr-names a.on .lb { background-color: var(--head); border-color: var(--head); color: var(--on-head); }
.srail.open .sr-names a:not(.on):hover .lb { border-color: var(--head); color: var(--name-on); }
.sr-names a::after { content: ""; position: absolute; top: 50%; left: calc(100% + 1px); width: 50px; border-top: 1px dashed var(--num);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sr-names a.on::after { border-top: 1.5px solid var(--head); }
.srail.open .sr-names a::after { transform: none; transition: transform .4s var(--ease) calc(.2s + var(--n) * 30ms); }

/* ===================== HERO ===================== */
/* full-bleed Violeta panel with the neural canvas drawn white; service cards straddle its bottom edge */
.hero { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); }
.hero::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(106,53,255,.10), rgba(106,53,255,0) 70%); }
.panel { position: relative; z-index: 1; flex: 1; display: flex; padding-bottom: 72px; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(70% 90% at 88% 8%, #9772FF 0%, rgba(151,114,255,0) 60%),
    radial-gradient(60% 80% at 5% 100%, var(--violet-700) 0%, rgba(42,21,102,0) 70%),
    var(--violet); }
.panel :focus-visible { outline-color: #fff; }
#neural { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; --neural-rgb: 255,255,255; --neural-hot: 255,255,255; }
/* violet veil behind the copy so the network doesn't cost legibility */
.panel .veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 48%, rgba(85,42,204,.85) 20%, rgba(106,53,255,0) 75%); }
.panel .wm { position: absolute; z-index: -1; right: -4%; bottom: -16%; width: min(46%, 620px); opacity: .1; transform: rotate(-8deg); }
.hero .wrap { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-block: clamp(110px,16svh,140px) 24px; }
.hero-content { min-width: 0; max-width: 60rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* capped by viewport height too, so headline + CTAs + cards fit above the fold on short screens */
/* stretch so the rotator box is never narrower than its longest word (e.g. "We build" vs "platforms") */
.hero h1 { align-self: stretch; font-size: min(clamp(2.6rem,1.3rem + 4.6vw,6rem), 10.5svh); font-weight: 600; letter-spacing: -.04em; }
.hero h1 .lead-word { display: block; color: #fff; }
.rotator { display: block; position: relative; height: 1.15em; overflow: hidden; }
.rotator span { position: absolute; left: 0; right: 0; top: 0; text-align: center; color: var(--chispa); white-space: nowrap;
  opacity: 0; transform: translateY(1.1em); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.rotator span.active { opacity: 1; transform: none; }
.rotator span.out { opacity: 0; transform: translateY(-1.1em); }
.hero .lead { margin-top: 20px; max-width: 40ch; color: rgba(255,255,255,.88); text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.hero .btn-primary { background: #fff; color: var(--violet-700); }
.hero .btn-primary:hover { background: var(--violet-50); }
.hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.hero .btn-ghost:hover { border-color: #fff; color: #fff; }

.pill-badge { display: inline-flex; align-items: center; gap: .6em; padding: .38em .9em .38em .42em; margin-bottom: 22px;
  border-radius: var(--r-sm); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px);
  font: 600 .76rem var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.pill-badge b { display: inline-flex; align-items: center; gap: .45em; background: #fff; color: var(--violet-700);
  font-weight: 500; padding: .22em .7em; border-radius: var(--r-sm); font-size: .9em; }
.pill-badge .live { width: 7px; height: 7px; border-radius: 50%; background: var(--chispa); box-shadow: 0 0 0 1.5px var(--violet); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(106,53,255,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(106,53,255,0); } }

@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-g { 0% { box-shadow: 0 0 0 0 rgba(18,161,80,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(18,161,80,0); } }

/* ===================== VALUE BAND ===================== */
/* right under the hero: a lead line + three short value statements divided by hairlines (no boxes), fading into the tinted services */
.proof { position: relative; padding-block: clamp(48px,6vw,96px) clamp(72px,9vw,140px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 40%, var(--paper-2) 100%); }
.proof-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,2fr); align-items: center; gap: clamp(32px,5vw,80px); }
.proof-lead { font: 600 clamp(1.6rem,1.15rem + 1.1vw,2.3rem)/1.15 var(--f-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.proof-lead em { font-style: normal; color: var(--violet-600); }
.stats { display: grid; grid-template-columns: repeat(3,1fr); }
.stat { position: relative; display: grid; align-content: start; gap: 10px; padding: 4px clamp(20px,2.4vw,36px); border-left: 1px solid var(--line-2); }
/* small violet square above each statement; becomes a hairline on hover together with the side line */
.stat::before { content: ""; width: 7px; height: 7px; border-radius: 2px; margin-bottom: 10px;
  background: var(--violet); transition: width .4s var(--ease), height .4s var(--ease); }
.stat:hover::before { width: 40px; height: 2px; }
.stat::after { content: ""; position: absolute; left: -1px; top: 4px; width: 1px; height: 0; background: var(--violet);
  transition: height .5s var(--ease); }
.stat:hover::after { height: calc(100% - 8px); }
.stat b { font: 600 clamp(1.15rem,1rem + .45vw,1.4rem)/1.25 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.stat span { font: 400 1rem/1.55 var(--f-body); color: var(--slate); text-wrap: pretty; }

/* ===================== AGENTS BOARD (live agent inbox) ===================== */
/* an app window on the tinted band: white chrome, three hairline-split columns of white task cards */
.section.agents { padding-top: clamp(8px,2vw,24px); }
.board { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.board-bar { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--line);
  font: 600 .76rem var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.board-crumb { display: inline-flex; gap: .6em; }
.board-crumb i { font-style: normal; color: var(--slate-2); }
.board-crumb b { font-weight: 500; color: var(--ink); }
.board-live { display: inline-flex; align-items: center; gap: .5em; margin-left: auto; color: var(--ink-2); }
.board-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); animation: pulse 2s infinite; }
.board-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.board-seg > * { padding: .35em .8em; font-weight: 400; }
.board-seg b { background: var(--paper-2); color: var(--ink); font-weight: 500; }
.board-cols { display: grid; grid-template-columns: repeat(3,1fr); background: var(--paper-2); }
.board-col { min-width: 0; padding: 14px; border-left: 1px solid var(--line); }
.board-col:first-child { border-left: 0; }
.board-col h3 { display: flex; align-items: center; gap: .6em; margin: 2px 4px 12px; font: 600 .74rem var(--f-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.board-col h3 em { font-style: normal; margin-left: auto; padding: .1em .55em; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--ink-2); }
.cdot { width: 6px; height: 6px; background: #F5A524; }
[data-col="run"] .cdot { background: var(--violet); }
[data-col="done"] .cdot { background: var(--ok); }
.board-list { display: grid; gap: 10px; align-content: start; min-height: 300px; }

.ag-card { display: grid; gap: 6px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs); transition: border-color .3s, box-shadow .3s; }
.ag-card.enter { animation: ag-in .55s var(--ease) both; }
@keyframes ag-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.ag-card[data-col="wait"]:first-child { border-color: #F0D29C; box-shadow: 0 0 0 3px rgba(245,165,36,.10); }
.ag-top { display: flex; justify-content: space-between; gap: 8px; font: 600 .66rem var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.ag-who { color: var(--violet-700); }
.ag-card b { font: 600 .95rem/1.3 var(--f-display); color: var(--ink); }
.ag-card p { font-size: .84rem; line-height: 1.45; color: var(--slate); }
.ag-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px;
  font: 600 .68rem var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.ag-meta .ok { color: var(--ok); }
.ag-meta .saved { padding: .15em .5em; border-radius: 6px; background: var(--chispa); color: var(--ink); }
.ag-meta .spin { width: 10px; height: 10px; border: 1.5px solid var(--line-2); border-top-color: var(--violet); border-radius: 50%; animation: spin .9s linear infinite; }
.ag-prog { height: 3px; margin-top: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ag-prog i { display: block; height: 100%; background: var(--violet); transition: width 1.8s var(--ease); }
.ag-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.ag-btn { padding: .45em .9em; border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer;
  font: 600 .8rem var(--f-body); color: var(--ink-2); background: #fff; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.ag-btn:hover { border-color: var(--slate-2); }
.ag-btn.pri { background: var(--ink); border-color: var(--ink); color: #fff; }
.ag-btn.pri:hover, .ag-btn.pri.press { background: var(--violet); border-color: var(--violet); }
.ag-btn.press { transform: scale(.95); }
.board-foot { display: flex; align-items: baseline; gap: .6em; padding: 12px 18px; border-top: 1px solid var(--line);
  font: 600 .76rem var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.board-foot b { font: 600 1.3rem var(--f-display); letter-spacing: -.01em; color: var(--violet-700); text-transform: none; }

/* ===================== SERVICES (horizontal accordion) ===================== */
/* four photo panels; the open one grows and shows its copy, the closed ones keep a greyed photo and a vertical title */
.sva { display: flex; gap: 10px; height: clamp(440px,40vw,580px); container-type: inline-size; }
.sva-p { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); color: #fff;
  cursor: pointer; outline: none; transition: flex-grow .75s var(--ease); }
.sva-p.on { flex-grow: 3.6; cursor: default; }
.sva-p:focus-visible { box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 5px var(--violet); }
.sva-p > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.6) brightness(.6); transform: scale(1.12); transition: filter .7s, transform 1.2s var(--ease); }
.sva-p.on > img { filter: none; transform: none; }
.sva-p:not(.on):hover > img { filter: grayscale(.3) brightness(.75); }
.sva-p > img.p-ops { object-position: 72% 60%; }
.sva-p::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,14,58,.1) 0%, rgba(26,14,58,.35) 45%, rgba(26,14,58,.92) 100%); }
/* index chip, same label tag as the hero badge; violet on the open panel */
.sva-n { position: absolute; top: 18px; left: 18px; padding: 6px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.92);
  font: 600 .72rem/1 var(--f-label); letter-spacing: .14em; color: var(--ink-2); transition: background .4s, color .4s; }
.sva-p.on .sva-n { background: var(--violet); color: #fff; }
/* closed panels read bottom-up; the label only comes back once the panel has shrunk */
.sva-v { position: absolute; left: 22px; bottom: 24px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 600 clamp(1.1rem,.85rem + .7vw,1.55rem)/1 var(--f-display); letter-spacing: -.01em; transition: opacity .35s .45s; }
.sva-p.on .sva-v { opacity: 0; transition-delay: 0s; }
/* sized to the open panel's final width (3.6 of 6.6 shares, minus the gaps) so the copy doesn't reflow while it grows */
.sva-body { position: absolute; left: 0; bottom: 0; width: calc((100cqi - 30px) * 3.6 / 6.6); padding: clamp(22px,2.4vw,32px); display: grid; gap: 8px;
  opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; }
.sva-p.on .sva-body { opacity: 1; transform: none; transition: opacity .5s .3s, transform .6s .3s var(--ease); pointer-events: auto; }
.sva-body h3 { font: 600 var(--step-2)/1.1 var(--f-display); letter-spacing: -.025em; color: #fff; max-width: 16ch; text-wrap: balance; }
.sva-body p { font-size: 1.02rem; line-height: 1.5; color: rgba(255,255,255,.78); max-width: 38ch; }
.sva-body ul { margin: 8px 0 0; padding: 14px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid rgba(255,255,255,.22); }
.sva-body li { padding: 6px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  font: 600 .72rem/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: #fff; backdrop-filter: blur(6px); }

/* ===================== METHOD ===================== */
/* the method as a value curve in an app window (same chrome as the agents board): five bands roughly sized by duration,
   the dashed plan, the pilot goal, a step per weekly demo and the go / no-go fork in the board's "needs a human" amber;
   a playhead walks it and the active phase's detail sits under the window */
.method { --m-amber: #F5A524; --m-amber-ink: #8A5A00;
  --cols: 13fr 12fr 27fr 21fr 27fr; }   /* same band edges as B in methodCurve() */
.method-head { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(24px,5vw,80px); align-items: end;
  margin-bottom: clamp(36px,4.5vw,60px); }
.method-head .section-head { margin: 0; }
.method-head .lead { max-width: 34ch; }

.mcv { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.mcv-bar, .mcv-foot { display: flex; align-items: center; gap: 16px; padding: 12px 18px;
  font: 600 .74rem var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.mcv-bar { border-bottom: 1px solid var(--line); }
.mcv-y::before { content: "↑ "; color: var(--violet); }
.mcv-play { display: inline-flex; align-items: center; gap: .7em; margin-left: auto; padding: .4em .8em; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: #fff; color: var(--ink-2); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
  transition: border-color .2s, color .2s; }
.mcv-play:hover { border-color: var(--violet); color: var(--violet-600); }
.mcv-play i { width: 8px; height: 9px; box-sizing: border-box; border-inline: 2.5px solid currentColor; }
.mcv-play.paused i { width: 0; height: 0; border: 0; border-left: 8px solid currentColor; border-block: 4.5px solid transparent; }

/* phase tabs, one per band; the violet hairline on top is how far the playhead has walked through that phase */
.mcv-tabs, .mcv-bands { display: grid; grid-template-columns: var(--cols); }
.mcv-tabs { border-bottom: 1px solid var(--line); }
.mcv-tab { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 16px 12px 14px; border: 0;
  border-left: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .3s; }
.mcv-tab:first-child { border-left: 0; }
.mcv-tab::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--f, 0) * 100%); background: var(--violet); }
.mcv-tab .n { font: 600 .72rem var(--f-label); letter-spacing: .12em; color: var(--slate-2); transition: color .3s; }
.mcv-tab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--step-0)/1.15 var(--f-display); letter-spacing: -.01em;
  color: var(--ink-2); transition: color .3s; }
.mcv-tab em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .66rem var(--f-label); font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.mcv-tab:hover b { color: var(--violet-700); }
.mcv-tab.on { background: var(--violet-tint); }
.mcv-tab.on .n { color: var(--violet); } .mcv-tab.on b { color: var(--ink); }

/* plot: the SVG stretches to the box (strokes stay hairline), markers are HTML placed in the same % space */
.mcv-plot { position: relative; height: clamp(260px,28vw,390px); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mcv-bands { position: absolute; inset: 0; }
.mcv-bands i { border-left: 1px solid var(--line); transition: background .4s; }
.mcv-bands i:first-child { border-left: 0; }
.mcv-bands i.on { background: var(--violet-tint); }
.mcv-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.mcv-plot path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.mcv-plot .ghost { stroke: var(--slate-2); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .7; }
.mcv-plot .curve { stroke: var(--violet); stroke-width: 2.2; }
.mcv-plot .area { fill: url(#mcvFill); }
.mcv-plot .goal { stroke: var(--slate-2); stroke-width: 1; stroke-dasharray: 1 4; }
.mcv-plot .stop { stroke: var(--m-amber); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity .4s; }
.mcv.forked .stop { opacity: 1; }

.mk { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; }
.mk::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; box-sizing: border-box;
  border: 1.5px solid var(--violet); background: #fff; transition: background .3s; }
.mk.dot::before { left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; }
.mk.gate::before { left: -7px; top: -7px; width: 14px; height: 14px; rotate: 45deg; border: 2px solid var(--m-amber); }
.mk.note::before { display: none; }
.mk.hit::before { background: var(--violet); }
.mk.gate.hit::before { background: var(--m-amber); }
/* labels only show for the active phase, as small square chips */
.mk em { --tx: -50%; --ty: 4px; position: absolute; left: 0; bottom: 12px; translate: var(--tx) var(--ty); padding: 4px 8px; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-xs);
  font: 600 .66rem/1.2 var(--f-label); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  opacity: 0; transition: opacity .3s, translate .35s var(--ease); pointer-events: none; }
.mk.show em { --ty: 0px; opacity: 1; }
.mk.l em { --tx: -10px; } .mk.r em { --tx: calc(-100% + 10px); }
.mk.below em { bottom: auto; top: 10px; }
.mk.gate em { bottom: 16px; border-color: #F0D29C; background: #FFF8EC; color: var(--m-amber-ink); }
.mk.note em { border-style: dashed; box-shadow: none; color: var(--slate); }
.mk.note.below em { border-color: #F0D29C; color: var(--m-amber-ink); }
.mcv-head { position: absolute; top: 0; bottom: 0; left: calc(var(--px, 0) * 1%); width: 1px; background: rgba(26,14,58,.28); pointer-events: none; }
.mcv-head i { position: absolute; left: -6px; top: calc(var(--py, 94) * 1%); width: 12px; height: 12px; margin-top: -6px; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 50%; background: var(--violet); animation: pulse 2s infinite; }

.mcv-foot { flex-wrap: wrap; border-top: 1px solid var(--line); }
.mcv-team::before { content: "↳ "; color: var(--violet); }
.mcv-key { display: flex; gap: 18px; margin-left: auto; }
.mcv-key > span { display: inline-flex; align-items: center; gap: .6em; }
.mcv-key > span::before { content: ""; width: 18px; border-top: 2px solid var(--violet); }
.mcv-key .k-plan::before { border-top: 1.5px dashed var(--slate-2); }
.mcv-key .k-gate::before { width: 7px; height: 7px; border: 0; rotate: 45deg; background: var(--m-amber); }

/* detail of the active phase: the five panes share one grid cell, so the block keeps the height of the tallest */
.mcv-detail { display: grid; margin-top: clamp(36px,4.5vw,60px); }
.mpane { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr); gap: clamp(24px,4vw,64px); align-items: start;
  opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity .35s var(--ease), translate .45s var(--ease), visibility 0s .35s; }
.mpane.on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.mp-n { font: 600 .74rem var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-600); }
.mp-t h3 { margin: 10px 0 12px; font-size: var(--step-2); }
.mp-t p { max-width: 32ch; color: var(--slate); }
.mpane h4 { margin: 4px 0 14px; font: 600 .72rem var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.mp-do ul { margin: 0; padding: 0; list-style: none; counter-reset: w; }
.mp-do li { display: grid; grid-template-columns: 2.4em 1fr; padding: 11px 0; border-top: 1px solid var(--line-2); counter-increment: w;
  font-size: var(--step--1); line-height: 1.45; color: var(--ink-2); }
.mp-do li:last-child { border-bottom: 1px solid var(--line-2); }
.mp-do li::before { content: counter(w, decimal-leading-zero); font: 600 .72rem/1.9 var(--f-label); letter-spacing: .1em; color: var(--violet); }
.mp-get p { padding-left: 18px; border-left: 1px solid var(--violet); font: 600 var(--step-1)/1.25 var(--f-display); letter-spacing: -.015em;
  color: var(--ink); text-wrap: balance; }
/* the go / no-go note, styled like the board's card that waits for a human */
.mp-gate { display: flex; gap: 10px; align-items: baseline; margin-top: 20px; padding: 10px 12px; border: 1px solid #F0D29C; border-radius: var(--r-md);
  box-shadow: 0 0 0 3px rgba(245,165,36,.10); font: 500 .84rem/1.45 var(--f-body); color: var(--m-amber-ink); }
.mp-gate::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; rotate: 45deg; translate: 0 -1px; background: var(--m-amber); }

/* ===================== ABOUT ===================== */
/* read one principle at a time: under a full-width head, a pinned frame on the left shows one photo per principle
   while the principles scroll past on the right. With .scrolly (set by about.js) only the principle crossing the
   middle of the screen is lit, and its photo fades in. The README closes the column */
.about-head { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); column-gap: clamp(32px,6vw,96px); row-gap: 22px;
  align-items: end; margin-bottom: clamp(56px,7vw,104px); }
.about-head .eyebrow { grid-column: 1 / -1; }
.about-head h2 { font-size: var(--step-3); }
.about-head h2 em { font-style: normal; color: var(--violet); }
.about-head .lead { max-width: 46ch; }
.about-scroll { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(40px,6vw,104px); align-items: start; }
.about-aside { position: sticky; top: 96px; }
/* the photos stack in one frame and crossfade; a story-style bar on top says which principle is showing */
.about-frame { position: relative; height: min(calc(100vh - 136px), 660px); min-height: 380px; border-radius: var(--r-xl); overflow: hidden;
  background: var(--ink); box-shadow: var(--shadow-md); }
.about-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.about-frame img.on { opacity: 1; transform: none; }
.about-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(26,14,58,.45), transparent 22%), linear-gradient(0deg, rgba(106,53,255,.18), transparent 50%); }
.about-toc { position: absolute; z-index: 1; left: 18px; right: 18px; top: 16px; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.about-toc button { all: unset; box-sizing: border-box; display: grid; gap: 8px; width: 100%; cursor: pointer;
  font: 600 .72rem var(--f-label); letter-spacing: .12em; color: rgba(255,255,255,.6); transition: color .3s; }
.about-toc button::before { content: ""; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); transition: background .3s; }
.about-toc li.on button { color: #fff; }
.about-toc li.on button::before { background: var(--chispa); }
.creed { list-style: none; margin: 0; padding: 0; }
.creed li { display: grid; gap: 16px; padding-bottom: 26vh; transition: opacity .5s var(--ease); }
.creed li:last-child { padding-bottom: clamp(56px,7vw,96px); }
.creed .n { font: 600 clamp(3.4rem,2rem + 4.6vw,6.5rem)/.9 var(--f-display); letter-spacing: -.05em; color: var(--violet); }
.creed b { font: 600 var(--step-3)/1.04 var(--f-display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.creed p { font-size: var(--step-1); line-height: 1.45; color: var(--slate); max-width: 34ch; }
.about.scrolly .creed li { opacity: .16; }
.about.scrolly .creed li.on { opacity: 1; }
.readme { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 460px; }
.readme-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.readme-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.readme-bar span { margin-left: 8px; font: 400 .72rem var(--f-code); letter-spacing: .02em; color: var(--slate); }
.readme pre { margin: 0; padding: 16px 18px 18px; font: 400 .8rem/1.65 var(--f-code); color: var(--ink-2); white-space: pre-wrap; }
.readme b { font-weight: 500; color: var(--ink); }
.readme .c { color: var(--violet-600); }
.readme s { color: var(--slate-2); text-decoration-color: rgba(106,53,255,.6); }
.readme .cur { display: inline-block; width: .5em; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--chispa); animation: blink 1s steps(1) infinite; }

/* ===================== CONTACT (light) ===================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 640px); gap: 48px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow-xs); }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-family: var(--f-label); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.field input, .field textarea { font-family: inherit; font-size: var(--step-0); color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .85em 1em; width: 100%; transition: border-color .2s, background .2s; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--violet); background: #fff; }
.contact-info { display: grid; gap: 14px; align-content: start; }
.info-row { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.info-row:hover { transform: translateX(6px); border-color: var(--violet-50); box-shadow: var(--shadow-xs); }
.info-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--violet-50); display: grid; place-items: center; }
.info-ic svg { width: 22px; height: 22px; stroke: var(--violet); }
.info-row b { font-family: var(--f-display); font-weight: 600; display: block; }
.info-row a, .info-row span { color: var(--slate); }
.info-row a:hover { color: var(--violet-700); }

/* ===================== FOOTER (light) ===================== */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: 56px 30px; color: var(--slate); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.footer-brand { max-width: 340px; display: grid; gap: 16px; }
.footer-brand .brand-logo { height: 32px; }
.footer-nav { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-nav h4 { font-family: var(--f-label); font-weight: 600; color: var(--ink); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-nav a:hover { color: var(--violet-700); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: var(--step--1); }
.badge-private { display: inline-flex; align-items: center; gap: .5em; }
.badge-private::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--violet); }

.form-note { font-size: var(--step--1); color: var(--slate); }
.form-note a { color: var(--violet-600); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--violet-700); }

/* ===================== LEGAL PAGES ===================== */
.legal-top { border-bottom: 1px solid var(--line); }
.legal-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; }
.legal-top .brand-logo { height: 36px; }
.legal-top a.back { font-family: var(--f-body); font-weight: 600; color: var(--violet-600); }
.legal { max-width: 760px; padding-block: clamp(48px,7vw,96px); }
.legal h1 { font-size: var(--step-3); margin: 18px 0 12px; }
.legal .updated { color: var(--slate); font-size: var(--step--1); margin-bottom: 40px; }
.legal h2 { font-size: var(--step-1); margin: 40px 0 14px; letter-spacing: -.01em; line-height: 1.2; }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; margin: 12px 0 0; display: grid; gap: 6px; }
.legal a { color: var(--violet-600); text-decoration: underline; text-underline-offset: 2px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.legal dt { font-weight: 600; color: var(--ink); }
.legal dd { margin: 0; color: var(--ink-2); }

@media (max-width: 680px) { .legal dl { grid-template-columns: 1fr; } .legal dd { margin-bottom: 8px; } }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .08s; } [data-reveal][data-d="2"] { transition-delay: .16s; }
[data-reveal][data-d="3"] { transition-delay: .24s; } [data-reveal][data-d="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .rotator span { position: static; opacity: 1; transform: none; } .rotator span:not(.active){ display:none; }
  .readme .cur { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) { .proof-grid { grid-template-columns: 1fr; } .proof-lead { max-width: 30ch; } }
@media (max-width: 920px) {
  .contact-grid { grid-template-columns: 1fr; }
  /* one column, nothing pinned: the frame sits above the creed and every principle stays lit */
  .about-head { grid-template-columns: 1fr; }
  .about-scroll { grid-template-columns: 1fr; gap: 24px; }
  .about-aside { position: static; }
  .about-frame { height: auto; min-height: 0; aspect-ratio: 4/3; }
  .creed li { padding-block: 28px; border-top: 1px solid var(--line-2); }
  .creed li:last-child { padding-bottom: 48px; }
  .creed .n { font-size: 2.6rem; }
  .creed b { font-size: var(--step-2); }
  .about.scrolly .creed li { opacity: 1; }
  .method-head { grid-template-columns: 1fr; align-items: start; }
  .mpane { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .mp-t { grid-column: 1 / -1; }
  /* stacked strips: closed ones are a title bar, the open one shows photo and copy */
  .sva { flex-direction: column; height: auto; }
  .sva-p { flex: none; height: 84px; transition: height .6s var(--ease); }
  .sva-p.on { height: 440px; }
  .sva-n { top: 50%; transform: translateY(-50%); } .sva-p.on .sva-n { top: 18px; transform: none; }
  .sva-v { writing-mode: horizontal-tb; transform: translateY(50%); left: 74px; right: 18px; bottom: 50%; white-space: normal; font-size: 1.25rem; }
  .sva-body { width: 100%; }
}
/* logo + links + actions need ~800px of bar: below that the links move into the burger menu */
@media (max-width: 1024px) {
  .dock-links { display: none; }
  .dock-actions { margin-left: auto; }
  .burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.45); background: transparent; cursor: pointer; }
  .burger svg { width: 20px; height: 20px; stroke: #fff; }
  .dock.shrunk .burger { background: #fff; border-color: var(--line-2); }
  .dock.shrunk .burger svg { stroke: var(--ink); }
}
@media (max-width: 680px) {
  .dock .btn, .lang-toggle { display: none; }
  .dock { height: 68px; } .dock.shrunk { height: 60px; }
  .brand-logo { height: 34px; min-width: 0; flex-shrink: 1; }
  .burger { margin-left: auto; }
  .stats { grid-template-columns: 1fr; gap: 32px; }
  /* method: the phase tabs keep only their number, the curve gets shorter and the detail stacks */
  .mcv-tab { justify-items: center; padding: 12px 4px 10px; }
  .mcv-tab b, .mcv-tab em, .mcv-key, .mk.dot em { display: none; }
  .mcv-plot { height: 230px; }
  .mk em { font-size: .6rem; }
  .mk.note.below em { max-width: 130px; white-space: normal; }
  .mpane { grid-template-columns: 1fr; gap: 28px; }
  .hero .wrap { padding-block: 120px 24px; }
  /* board: columns stack, the view toggle goes, each column shows only its first cards */
  .board-seg { display: none; }
  .board-cols { grid-template-columns: 1fr; }
  .board-col { border-left: 0; border-top: 1px solid var(--line); }
  .board-col:first-child { border-top: 0; }
  .board-list { min-height: 0; }
  [data-col="wait"] .ag-card:nth-child(n+2), [data-col="run"] .ag-card:nth-child(n+2), [data-col="done"] .ag-card:nth-child(n+3) { display: none; }
  .board-foot { flex-wrap: wrap; }
}