/* THE ELDER — commercial homepage
   ---------------------------------------------------------------------------
   One stylesheet, no framework, no build step: the same shape as everything
   else served out of this repository. Colour, type and spacing come from the
   approved prototype; two values were corrected because the originals failed
   WCAG AA on this background (see --mute-faint and --gold-dim below).
   ------------------------------------------------------------------------ */

/* ── fonts ─────────────────────────────────────────────────────────────── */
/* Self-hosted. No CDN, no third-party request, nothing to fail offline.
   IBM Plex Sans ships as one variable file per subset (wght 100–700), so 400
   and 500 are real instances of one download rather than two files. */
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('../fonts/spectral-200-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('../fonts/spectral-200-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/spectral-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/spectral-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/spectral-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/spectral-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --ink:        #060A10;
  --ink-eco:    #070C12;
  --ink-card:   #0A1017;
  --ink-rise:   #08111A;
  --ink-proof:  #080D14;
  --ink-fall:   #060B11;

  --paper:      #FDFBF6;
  --paper-warm: #F4EFE6;
  --paper-soft: #E7E2D8;

  --mute:       #C6CBD1;
  --mute-2:     #9AA5AE;
  --mute-3:     #8A949D;
  --mute-4:     #7E8A94;
  /* Prototype used #6E7B85 here (4.57:1 — passes) and #5C6873 in the footer
     (3.48:1 — fails AA). One faint tone, set to the value that passes. */
  --mute-faint: #6E7B85;

  --gold:       #C9A24A;
  --gold-hi:    #E8C87E;
  --gold-hi-2:  #F2D89A;
  --gold-pale:  #F6E4B4;
  --gold-white: #FFF4DA;
  --gold-warm:  #A9853C;
  /* Prototype used #8A6E33 for mega-menu column titles (4.12:1 — fails AA). */
  --gold-dim:   #A9853C;
  --gold-deep:  #D9B25C;
  --on-gold:    #14100A;

  /* THOR reads in cold blue; gold stays THE ELDER's signature. */
  --thor-accent: #8FB8F0;
  /* Computer Intelligence reads colder still: this is observation, not
     command. Cyan for the structure it maps, gold left to the trunk. */
  --ci-accent:   #86D9EA;
  --ci-accent-2: #5FA9BC;
  /* Governed Autonomy ramane in aurul ELDER: aici nu se observa, se ACTIONEAZA
     -- cu permisiune. Culoarea confirma ce spun cuvintele, nu tine ea claimul.
     Ambele trec AA pe --ink: 8.31:1 si 5.42:1. */
  --gov-accent:   #E3C27A;
  --gov-accent-2: #B9954E;

  --line:       rgba(201, 162, 74, 0.16);
  --line-soft:  rgba(201, 162, 74, 0.12);
  --line-faint: rgba(201, 162, 74, 0.08);

  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --wrap: 1440px;
  --wrap-narrow: 1240px;
  --gutter: clamp(18px, 3vw, 44px);
  --header-h: 72px;
  --section-y: clamp(44px, 5.4vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper-warm);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
::selection { background: rgba(201, 162, 74, 0.28); color: var(--paper-warm); }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--gold); color: var(--on-gold); font-size: 14px; font-weight: 500;
  padding: 12px 20px; transition: top 140ms ease;
}
.skip-link:focus { top: 12px; color: var(--on-gold); }

/* ── shared shapes ─────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: var(--section-y) var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--center { text-align: center; }
.wrap--split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.wrap--end { align-items: end; padding-bottom: clamp(26px, 3vw, 38px); }

.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em;
  color: var(--mute-4); margin-bottom: 20px; text-transform: uppercase;
}
.eyebrow--gold { color: var(--gold-warm); }

.display {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--paper); text-wrap: balance;
}
.h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3.4vw, 42px); line-height: 1.16;
  color: var(--paper); text-wrap: balance;
}
.h2--tight { margin-bottom: clamp(30px, 3.4vw, 48px); }

.lead {
  margin-top: 26px; font-size: clamp(15.5px, 1.3vw, 18px); line-height: 1.66;
  color: var(--mute); max-width: 46ch; text-wrap: pretty;
}
.section__lead { font-size: 14px; line-height: 1.68; color: var(--mute-2); max-width: 52ch; text-wrap: pretty; }
.section__lead--center { margin: 16px auto 0; font-size: 15px; max-width: 52ch; }
.section__head { text-align: center; margin-bottom: clamp(28px, 3.4vw, 46px); }

.section { position: relative; border-top: 1px solid var(--line-soft); }
.section--eco   { background: var(--ink-eco); }
.section--aud   { background: var(--ink-eco); }
.section--comm  { background: linear-gradient(180deg, var(--ink-rise), var(--ink-eco)); }
.section--close { overflow: hidden; min-height: clamp(240px, 24vw, 340px); display: flex; align-items: center; }

.icon { flex: none; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: inherit; font-size: 14.5px; line-height: 1.2;
  padding: 15px 28px; min-height: 52px; border: 1px solid transparent; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn__arrow { font-family: var(--font-mono); }

.btn--gold {
  font-weight: 500; color: var(--on-gold);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
}
.btn--gold:hover {
  color: var(--on-gold);
  background: linear-gradient(180deg, var(--gold-hi-2), var(--gold-deep));
}
.btn--outline {
  color: var(--paper-warm); border-color: rgba(244, 239, 230, 0.3);
  background: rgba(10, 17, 23, 0.4);
}
.btn--outline:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn--quiet { color: var(--mute); background: none; padding: 15px 6px; }
/* The leading control of a pair, when neither can be live yet: it carries the
   gold edge so the hierarchy still reads, without wearing the gold fill that
   belongs to a button you can actually press. */
.btn--lead { border-color: var(--gold); }
.btn--lead.is-unavailable .btn__label { color: var(--gold-hi); }

/* A control the product will have and does not have yet. Focusable, announced
   as disabled, carries its own explanation — never a link to nowhere. */
.btn.is-unavailable {
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  color: var(--mute-3); cursor: not-allowed;
}
.btn.is-unavailable:hover { color: var(--mute-3); border-color: rgba(244, 239, 230, 0.3); background: rgba(10, 17, 23, 0.4); }
.btn--quiet.is-unavailable:hover { background: none; border-color: transparent; }
.btn.is-unavailable .btn__label { font-size: 13.5px; }
.btn.is-unavailable .btn__flag {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em;
  color: var(--gold-warm);
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; background: none;
  border: 1px solid transparent; color: var(--mute-3); cursor: pointer;
}
.icon-btn.is-unavailable { cursor: not-allowed; }

/* ── header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}
.site-header[data-scrolled] {
  background: rgba(8, 13, 19, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.site-header[data-open] {
  background: rgba(8, 13, 19, 0.98);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header__bar {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h); display: flex; align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}

.wordmark {
  flex: none; font-family: var(--font-display); font-size: 16px; font-weight: 400;
  letter-spacing: 0.22em; color: var(--gold-hi); white-space: nowrap;
}
.wordmark:hover { color: var(--gold-hi-2); }

.nav { display: flex; gap: clamp(10px, 1.7vw, 26px); flex: 1; min-width: 0; justify-content: center; }
.nav__btn {
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 6px 0; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 13.5px; letter-spacing: 0.01em; color: var(--mute);
  transition: color 160ms ease, border-color 160ms ease;
}
.nav__btn:hover { color: var(--paper-warm); }
.nav__btn[aria-expanded='true'] { color: var(--paper-warm); border-bottom-color: var(--gold); }

.header__actions { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); flex: none; }

.header__toggle {
  display: none; align-items: center; gap: 10px; margin-left: auto;
  background: none; border: 1px solid var(--line); color: var(--mute);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  padding: 9px 14px; cursor: pointer;
}
.header__toggle:hover { border-color: var(--gold); color: var(--paper-warm); }

.header__panels {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
  /* Opaque on purpose. At 0.98 with a blur the hero headline still ghosted
     through the panel and the menu read as broken rather than translucent. */
  background: #080D13;
  border-top: 1px solid var(--line);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.6);
}
.site-header:not([data-open]):not([data-drawer]) .header__panels { display: none; }

.drawer-nav { display: none; }

.mega__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(24px, 3.2vw, 40px) var(--gutter) clamp(18px, 2.4vw, 28px);
}
.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(22px, 3vw, 44px); }
.mega__title {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: 0.2em;
  color: var(--gold-dim); margin-bottom: 15px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.mega__list { display: grid; gap: 13px; }
.mega__item { display: grid; gap: 2px; }
.mega__label { font-size: 14px; color: var(--paper-warm); }
.mega__sub { font-size: 12.5px; color: var(--mute-3); line-height: 1.45; }
.mega__foot {
  margin-top: clamp(18px, 2.4vw, 30px); padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 12.5px; color: var(--mute-3);
}
.mega__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--gold-warm); }

/* ── hero ──────────────────────────────────────────────────────────────── */
/* The Owner's canonical artwork sets the hero's height: the picture box carries
   its own aspect ratio, the copy and the product names are absolutely placed
   over that same box, and nothing is cropped. That is the whole reason a name
   stays on its branch from 900px to 1920px -- percentages inside one box, not
   two boxes that drift apart when the viewport changes shape. */
/* The sticky header sits ABOVE the hero in normal flow -- it is not an overlay
   -- so the picture needs no top inset of its own. What it does need is enough
   air under the header for the crown of the tree, which is why the overlay
   layout only takes over from 1025px up; below that the hero stacks. */
.hero { position: relative; overflow: hidden; background: var(--ink); }

.hero__stage { position: relative; width: 100%; aspect-ratio: 1672 / 941; }
/* <picture> is inline by default, which lets the image's own 16:9 win over the
   box we asked for -- the phone framing silently did nothing until this. */
.hero__stage > picture { position: absolute; inset: 0; display: block; }
.hero__art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Readability on the left, without putting out the landscape: the picture's own
   left third is already night sky, so this only deepens it. */
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,10,16,0.84) 0%, rgba(6,10,16,0.66) 20%,
                    rgba(6,10,16,0.34) 38%, rgba(6,10,16,0.05) 54%, rgba(6,10,16,0) 64%),
    linear-gradient(180deg, rgba(6,10,16,0.62) 0%, rgba(6,10,16,0) 15%,
                    rgba(6,10,16,0) 74%, rgba(6,10,16,0.92) 100%);
}

.hero__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__inner {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-items: center;
  padding: var(--header-h) var(--gutter) clamp(30px, 3.4vw, 52px);
  /* It spans the whole hero to place the copy, so left as-is it would swallow
     every pointer event meant for the labels behind it. The copy takes its own
     events back; the empty space around it lets them through. */
  pointer-events: none;
}
.hero__copy { pointer-events: auto; }
.hero__copy {
  max-width: 46ch;
  /* Aligns the headline with the same 1440px column the rest of the page uses. */
  margin-inline-start: max(0px, calc((100% - (var(--wrap) - 2 * var(--gutter))) / 2));
}
.signature {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--mute-faint); margin-top: clamp(28px, 4vw, 56px);
}

/* ── names laid over the branches ──────────────────────────────────────── */
.hero__nodes, .hero__core, .hero__pulse, .hero__aside { position: absolute; }
.hero__nodes { inset: 0; }

/* The block is anchored by its centre on its lobe's optical centre, then nudged
   4px down. The name carries most of the visual weight and sits above the box's
   geometric middle, so centring the BOX would read as sitting slightly high --
   weighting icon, name and kind line by how much each one actually shows puts
   the perceived centre 4px below the geometric one. */
.hnode {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, calc(-50% + 4px));
  display: grid; justify-items: center; gap: 0.26vw; text-align: center;
  padding: 0.52vw 0.85vw 0.62vw;
  max-width: min(19ch, 22vw);
  /* Each label already sits on ground dark enough to read on -- that is what
     chose its seat. This is only the margin on top of it, and it is kept low
     and wide on purpose: a scrim heavy enough to be seen would turn five names
     into five stickers pasted over the artwork. */
  background: radial-gradient(closest-side ellipse at 50% 50%,
              rgba(6,10,16,0.38) 0%, rgba(6,10,16,0.3) 66%, rgba(6,10,16,0) 100%);
}
.hnode__mark { color: var(--accent); display: flex; filter: drop-shadow(0 1px 8px rgba(0,0,0,0.9)); }
.hnode__name {
  font-family: var(--font-display); font-weight: 400;
  /* Sized against the viewport, which here IS the picture's width, so the
     label keeps very nearly the same share of the artwork from 1025px to
     1920px -- that is what lets one measured seat hold at every width. */
  font-size: clamp(10px, 1.02vw, 19.5px); letter-spacing: 0.15em; color: var(--paper);
  white-space: nowrap; text-shadow: 0 1px 14px rgba(6,10,16,0.98), 0 0 30px rgba(6,10,16,0.9);
}
.hnode__kind {
  font-family: var(--font-mono); font-size: clamp(6px, 0.52vw, 10px);
  letter-spacing: 0.16em; color: var(--paper-soft); line-height: 1.62;
  text-shadow: 0 1px 12px rgba(6,10,16,0.98);
}
/* The longest name of the five. Left on one line it crowds its lobe; broken in
   two it sits in the violet hollow with air on both sides. */
.hnode[data-node='second-self'] .hnode__name { white-space: normal; }
.hnode[data-node='second-self'] { max-width: min(11ch, 15vw); }

/* The luminous ring already exists in the picture; this only breathes with it. */
.hero__pulse {
  left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 5.2%; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(242, 216, 154, 0.4), 0 0 60px 12px rgba(232, 200, 126, 0.16);
}

.hero__core {
  left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: grid; gap: 8px; text-align: center;
}
.hero__core-name {
  font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 26px);
  letter-spacing: 0.26em; color: var(--paper);
  text-shadow: 0 1px 16px rgba(6,10,16,0.98), 0 0 40px rgba(6,10,16,0.95);
}
.hero__core-line {
  font-family: var(--font-mono); font-size: clamp(7.5px, 0.62vw, 10px);
  letter-spacing: 0.24em; color: var(--gold-hi); line-height: 1.7;
  text-shadow: 0 1px 14px rgba(6,10,16,0.98);
}

.hero__aside {
  right: var(--gutter); top: 84%; text-align: right;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--mute-4); line-height: 1.9;
  text-shadow: 0 1px 12px rgba(6,10,16,0.95);
}

/* ══ MOTION SYSTEM (P6) ═══════════════════════════════════════════════════
   One place to tune everything. Three levels, declared on the hero itself:
   subtle (shipped), active (louder, for review), reduced (still).

   Everything below is CSS animation on opacity, filter and stroke-dashoffset.
   There is no requestAnimationFrame in the shipped page, so there is nothing to
   run when the page is idle; JavaScript only sets the active product and pauses
   the layer when the hero scrolls away or the tab hides.

   The paths are traced from the artwork (tools/trace_branches.py) and live in
   the artwork's own coordinate space, so light travels along fibres that are
   really there rather than along a curve that merely looks plausible.
   ────────────────────────────────────────────────────────────────────────── */
.hero {
  --m-breath-dur: 7.5s;
  --m-breath-lo: 0.24;
  --m-breath-hi: 0.66;

  --m-trunk-dur: 12s;
  --m-trunk-op: 0.42;
  --m-trunk-w: 3.4;
  --m-trunk-dash: 120;

  --m-signal-op: 0.5;
  --m-signal-w: 2.6;
  --m-signal-dash: 54;

  /* Idle sits this low on purpose. At 0.13 the canopy read visibly more
     saturated than the artwork the Owner approved -- the glow stopped being
     activity and started being a colour grade. */
  --m-glow-idle: 0.06;
  --m-glow-breathe: 0.12;
  --m-glow-active: 0.5;
  --m-glow-dur: 16s;

  --m-label-dim: 0.72;
  --m-mark-active: 1.6;

  --m-wake: 0.8s;
  --m-ease: cubic-bezier(0.42, 0, 0.35, 1);
}
.hero[data-motion="active"] {
  --m-breath-hi: 0.85;
  --m-trunk-op: 0.62;
  --m-signal-op: 0.72;
  --m-glow-idle: 0.2;
  --m-glow-active: 0.8;
}

/* ── the layer ─────────────────────────────────────────────────────────── */
.hero__motion {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen; z-index: 1;
}
/* Paused, not stopped: nothing animates while the hero is off screen or the tab
   is in the background, and it resumes where it left off. Stated as an opt-IN
   attribute that JavaScript adds, so a page whose script never runs still
   breathes rather than freezing. */
.hero[data-paused] .hero__motion *,
.hero[data-paused] .hero__pulse { animation-play-state: paused; }

/* ── A. THE ELDER breath ───────────────────────────────────────────────── */
/* The ring already glows in the artwork; this only lets it inhale. No scaling,
   no blink — opacity alone, over a cycle long enough that it registers as
   presence rather than as an effect. */
.hero__pulse {
  opacity: var(--m-breath-lo);
  animation: elderBreath var(--m-breath-dur) var(--m-ease) infinite,
             mWake var(--m-wake) var(--m-ease) 0.15s backwards;
}
@keyframes elderBreath {
  0%, 100% { opacity: var(--m-breath-lo); }
  50%      { opacity: var(--m-breath-hi); }
}

/* ── B. trunk energy flow ──────────────────────────────────────────────── */
.m-trunk {
  fill: none; stroke: url(#mTrunk); stroke-linecap: round;
  stroke-width: var(--m-trunk-w);
  stroke-dasharray: var(--m-trunk-dash) var(--len);
  opacity: var(--m-trunk-op);
  filter: blur(2.2px);
  animation: mTrunkFlow var(--m-trunk-dur) linear infinite,
             mWake var(--m-wake) var(--m-ease) 0.5s backwards;
}
@keyframes mTrunkFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: calc(-1 * (var(--len) + var(--m-trunk-dash))); }
}

/* ── C. branch signals ─────────────────────────────────────────────────── */
/* Each runs its length, then rests. The cadences are deliberately unequal so
   the five never fire together — the brief is activity that is rare and
   asynchronous, not a chorus. */
.m-signal {
  fill: none; stroke: var(--accent); stroke-linecap: round;
  stroke-width: var(--m-signal-w);
  stroke-dasharray: var(--m-signal-dash) var(--len);
  opacity: 0;
  filter: blur(1.4px);
  animation: mSignal var(--dur) linear var(--delay) infinite,
             mWake var(--m-wake) var(--m-ease) 1s backwards;
}
@keyframes mSignal {
  0%   { stroke-dashoffset: 0; opacity: 0; }
  5%   { opacity: var(--m-signal-op); }
  26%  { opacity: var(--m-signal-op); }
  34%  { stroke-dashoffset: calc(-1 * (var(--len) + var(--m-signal-dash))); opacity: 0; }
  100% { stroke-dashoffset: calc(-1 * (var(--len) + var(--m-signal-dash))); opacity: 0; }
}

/* ── lobe glow: idle breathing, per lobe, out of step ──────────────────── */
.m-glow {
  opacity: var(--m-glow-idle);
  transition: opacity 620ms var(--m-ease);
  animation: mGlowIdle var(--m-glow-dur) var(--m-ease) var(--delay) infinite,
             mWake var(--m-wake) var(--m-ease) var(--wake) backwards;
}
@keyframes mGlowIdle {
  0%, 100% { opacity: var(--m-glow-idle); }
  42%      { opacity: var(--m-glow-breathe); }
}

/* ── D. product response ───────────────────────────────────────────────── */
/* The label answers without moving: position, size and optical centre are
   locked by P5. Everything here is colour, light and opacity. */
.hnode { pointer-events: auto; transition: opacity 420ms var(--m-ease); }
.hnode__mark, .hnode__name {
  transition: filter 420ms var(--m-ease), color 420ms var(--m-ease);
}

.hero[data-state="THOR_ACTIVE"]        .m-glow[data-lobe="thor"],
.hero[data-state="ATLAS_ACTIVE"]       .m-glow[data-lobe="atlas"],
.hero[data-state="LEDGER_ACTIVE"]      .m-glow[data-lobe="ledger"],
.hero[data-state="CYBER_ACTIVE"]       .m-glow[data-lobe="cyber"],
.hero[data-state="SECOND_SELF_ACTIVE"] .m-glow[data-lobe="second-self"] {
  opacity: var(--m-glow-active);
  animation-play-state: paused;
}
/* Its own branch answers straight away instead of waiting for its turn. */
.hero[data-state="THOR_ACTIVE"]        .m-signal[data-lobe="thor"],
.hero[data-state="ATLAS_ACTIVE"]       .m-signal[data-lobe="atlas"],
.hero[data-state="LEDGER_ACTIVE"]      .m-signal[data-lobe="ledger"],
.hero[data-state="CYBER_ACTIVE"]       .m-signal[data-lobe="cyber"],
.hero[data-state="SECOND_SELF_ACTIVE"] .m-signal[data-lobe="second-self"] {
  animation: mSignal 4.2s linear infinite;
  stroke-width: calc(var(--m-signal-w) * 1.25);
}
.hnode:hover .hnode__name,
.hnode:focus-visible .hnode__name { filter: drop-shadow(0 0 12px var(--accent)); }
.hnode:hover .hnode__mark,
.hnode:focus-visible .hnode__mark {
  filter: drop-shadow(0 0 10px var(--accent)) brightness(var(--m-mark-active));
}
/* The others stay legible — they only step back. */
.hero[data-state]:not([data-state="IDLE"]) .hnode:not(:hover):not(:focus-visible) {
  opacity: var(--m-label-dim);
}

/* ── F. awakening ──────────────────────────────────────────────────────── */
/* Pure CSS, so it plays whether or not JavaScript runs, and `backwards` means
   the end state is simply the element's own: if animations are off, everything
   is already where it belongs. */
@keyframes mWake { from { opacity: 0; } }
@keyframes mWakeRise { from { opacity: 0; transform: translateY(7px); } }
.hero__copy > * { animation: mWakeRise 0.75s var(--m-ease) backwards; }
.hero__copy > :nth-child(1) { animation-delay: 0.05s; }
.hero__copy > :nth-child(2) { animation-delay: 0.14s; }
.hero__copy > :nth-child(3) { animation-delay: 0.26s; }
.hero__copy > :nth-child(4) { animation-delay: 0.38s; }
.hero__copy > :nth-child(5) { animation-delay: 0.52s; }
.hnode { animation: mWake 0.7s var(--m-ease) backwards; }
.hnode[data-node="thor"]        { animation-delay: 1.15s; }
.hnode[data-node="atlas"]       { animation-delay: 1.28s; }
.hnode[data-node="ledger"]      { animation-delay: 1.41s; }
.hnode[data-node="cyber"]       { animation-delay: 1.54s; }
.hnode[data-node="second-self"] { animation-delay: 1.67s; }
.hero__core { animation: mWake 0.8s var(--m-ease) 1.5s backwards; }
.hero__aside { animation: mWake 0.8s var(--m-ease) 1.9s backwards; }
/* Second time in this tab, the page is simply there. */
html[data-seen] .hero__copy > *,
html[data-seen] .hnode,
html[data-seen] .hero__core,
html[data-seen] .hero__aside { animation-name: none; }
html[data-seen] .hero__pulse { animation-name: elderBreath; }
html[data-seen] .m-trunk { animation-name: mTrunkFlow; }
html[data-seen] .m-signal { animation-name: mSignal; }
html[data-seen] .m-glow { animation-name: mGlowIdle; }

/* ── diagnostics: absent unless explicitly asked for ───────────────────── */
.hero__diag { display: none; }
.hero[data-diag] .hero__diag { display: block; }
.hero[data-diag] .m-trunk,
.hero[data-diag] .m-signal { opacity: 0.9; filter: none; }
.hero[data-diag] .hnode { outline: 1px dashed rgba(255, 90, 90, 0.85); outline-offset: 0; }


/* ── diagnostic panel ──────────────────────────────────────────────────── */
.diag-panel {
  position: absolute; left: 12px; bottom: 12px; z-index: 40;
  display: grid; gap: 3px; padding: 12px 14px;
  background: rgba(4, 8, 13, 0.92); border: 1px solid rgba(51, 255, 136, 0.5);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: #C9F5DA; pointer-events: none;
}
.diag-panel b { color: #33FF88; letter-spacing: 0.14em; }
.diag-panel--hero { }
.diag-panel--prod { left: auto; right: 12px; bottom: auto; top: 12px; border-color: rgba(143,184,240,0.6); color: #CFE0FA; }
.diag-panel--prod b { color: #8FB8F0; }

/* ── image placeholders ────────────────────────────────────────────────── */
/* Deliberately unlike a photograph: flat, hatched, labelled. If one of these
   ever reads as finished imagery, it has failed at its only job. */
.ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(201,162,74,0.055) 0 2px, rgba(201,162,74,0) 2px 11px),
    linear-gradient(155deg, #0B131C 0%, #0A1017 55%, #070C12 100%);
  display: flex; align-items: flex-start; justify-content: center;
}
.ph__label { margin-top: 28px; }
.ph::after {
  content: ''; position: absolute; inset: 12px;
  border: 1px dashed rgba(201, 162, 74, 0.22);
}
.ph__label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--gold-warm); padding: 7px 12px;
  border: 1px solid rgba(201, 162, 74, 0.3); background: rgba(6, 10, 16, 0.6);
}
.ph--stage { z-index: 0; }
.ph--stage .ph__label { position: absolute; right: var(--gutter); bottom: 20px; margin-top: 0; }
.ph--stage::after { inset: 0; border: 0; }

/* ══ PRODUCT SECTIONS (P7) ════════════════════════════════════════════════
   The first specialized intelligence sits directly under the hero and is built
   the same way: a stage that carries the artwork's own ratio, with the copy laid
   over the part of the picture that is dark enough to hold type.

   Nothing here is a taste call. tools/measure_thor_section.py reports that the
   left 40% of the frame stays under the luminance ceiling the ink needs for AA,
   and that a vertical crop of any common cinematic ratio clips the data column.
   So: no crop, and the copy column stops at 40%.
   ────────────────────────────────────────────────────────────────────────── */
.prod {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  /* No border-top on purpose. Every other section is separated by a gold
     hairline; between the ecosystem and its first intelligence a hard line
     would read as a cut rather than as a descent. */
}

.prod__stage { position: relative; z-index: 0; width: 100%; aspect-ratio: 1672 / 941; }
.prod__stage > picture { position: absolute; inset: 0; display: block; }
.prod__art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Two jobs in one layer: readability on the left, and the seam at the top.
   The hero ends in near-solid ink; this opens in the same ink and lets the
   night sky arrive over about a tenth of the section, so the two pictures meet
   without a band, a gap or a rule between them. */
.prod__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,10,16,0.94) 0%, rgba(6,10,16,0.86) 22%,
                    rgba(6,10,16,0.62) 36%, rgba(6,10,16,0.12) 50%, rgba(6,10,16,0) 60%),
    linear-gradient(180deg, var(--ink) 0%, rgba(6,10,16,0.72) 5%,
                    rgba(6,10,16,0) 14%, rgba(6,10,16,0) 82%, rgba(6,10,16,0.9) 100%);
}

.prod__inner {
  position: absolute; inset: 0; z-index: 3;
  display: grid; align-items: center;
  padding: clamp(40px, 5vw, 80px) var(--gutter);
  pointer-events: none;
}
.prod__copy {
  pointer-events: auto;
  width: min(46ch, 38%);
  margin-inline-start: max(0px, calc((100% - (var(--wrap) - 2 * var(--gutter))) / 2));
}

/* ── type ──────────────────────────────────────────────────────────────── */
.eyebrow--thor { color: var(--thor-accent); }
.prod__head {
  font-family: var(--font-display); font-weight: 300;
  /* Deliberately under the hero: the page has one first voice, and a product
     section that matches it competes with the thing it belongs to. */
  font-size: clamp(24px, 2.5vw, 38px); line-height: 1.16;
  color: var(--paper); text-wrap: balance; margin: 0;
}
.prod__lead {
  margin-top: 20px; font-size: clamp(14.5px, 1.05vw, 16.5px); line-height: 1.68;
  color: var(--mute); max-width: 44ch; text-wrap: pretty;
}

/* ── the four capabilities: a quiet 2x2, not four cards ────────────────── */
.caps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(16px, 1.6vw, 28px);
  margin-top: clamp(22px, 2.4vw, 32px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--line-soft);
}
.caps__item {
  position: relative; padding-left: 15px;
  font-size: clamp(13px, 1vw, 15px); line-height: 1.45; color: var(--paper-soft);
}
.caps__item::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; background: var(--thor-accent);
}

.prod__support {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: 13.5px; line-height: 1.6; color: var(--mute-2); max-width: 40ch;
}
.prod .cta-row { margin-top: clamp(22px, 2.4vw, 32px); }
.prod__gov {
  margin-top: clamp(24px, 2.6vw, 34px);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--gold-warm);
}

/* ── diagnostics: absent unless explicitly asked for ───────────────────── */
.prod__diag { display: none; }
.prod[data-diag] .prod__diag {
  display: block; position: absolute; inset: 0; z-index: 20; pointer-events: none;
}
.prod__diag-svg { width: 100%; height: 100%; }
.prod[data-diag] .prod__copy { outline: 2px dashed rgba(255, 90, 90, 0.9); outline-offset: 10px; }

/* ── below 1025px ──────────────────────────────────────────────────────── */
/* The copy needs the left 40% of the picture, and below this width that column
   is too narrow to set a paragraph in. So the section stops being an overlay and
   becomes two blocks: the words, then the artwork framed on THOR's own mass.
   Same order as the hero, so the page keeps one rhythm. */
@media (max-width: 1024px) {
  .prod { display: flex; flex-direction: column; }
  .prod__inner {
    position: static; padding: clamp(34px, 7vw, 56px) var(--gutter) clamp(26px, 5vw, 38px);
  }
  .prod__copy { width: min(46ch, 100%); margin-inline-start: 0; }
  .prod__stage { aspect-ratio: 4 / 5; max-height: 72vh; }
  /* Framed on the measured optical centre of THOR's mass, so the column, the
     candles and the platform stay in frame when the picture is cropped. */
  .prod__art { object-position: 78% 48%; }
  .prod__veil {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(6,10,16,0.55) 8%,
                                rgba(6,10,16,0) 26%, rgba(6,10,16,0) 72%,
                                rgba(6,10,16,0.94) 100%);
  }
  .prod[data-diag] .prod__diag { position: absolute; }
}
@media (max-width: 560px) {
  .caps { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .prod__stage { aspect-ratio: 3 / 4; }
}


/* ── product page: the section becomes the page's own hero ─────────────── */
/* Same stage, same measured framing. What changes is that it now sits directly
   under the header instead of under THE ELDER hero, so it opens with the ink the
   header leaves rather than with a transition out of another picture. */
.prod--page { min-height: calc(100svh - var(--header-h)); }
.prod--page .prod__veil {
  background:
    linear-gradient(90deg, rgba(6,10,16,0.94) 0%, rgba(6,10,16,0.86) 22%,
                    rgba(6,10,16,0.62) 36%, rgba(6,10,16,0.12) 50%, rgba(6,10,16,0) 60%),
    linear-gradient(180deg, rgba(6,10,16,0.55) 0%, rgba(6,10,16,0) 12%,
                    rgba(6,10,16,0) 84%, rgba(6,10,16,0.92) 100%);
}
.prod--page .prod__head { font-size: clamp(26px, 3.1vw, 46px); }

/* ── the signature beside a product wordmark ───────────────────────────── */
/* Small, permanent, and a real way back. It must read as belonging, never as a
   competing brand: mono, tracked out, in THE ELDER's gold against THOR's blue. */
.wordmark__sig {
  flex: none; margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--gold-warm); white-space: nowrap; align-self: center;
}
.wordmark__sig:hover, .wordmark__sig:focus-visible { color: var(--gold-hi); }

/* ── flat product navigation ───────────────────────────────────────────── */
/* Named, not linked. The pages these open do not exist yet, and this site has
   refused to ship a control that looks alive and is not since its first commit. */
.fnav {
  display: flex; flex: 1; min-width: 0; align-items: center;
  gap: clamp(12px, 1.8vw, 28px); justify-content: center;
}
.fnav__item {
  font-size: 13.5px; letter-spacing: 0.01em; color: var(--mute-3); white-space: nowrap;
}
.fnav__note {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--gold-warm); white-space: nowrap;
}
@media (max-width: 1024px) {
  .fnav { display: none; }
  .wordmark__sig { margin-left: 12px; padding-left: 12px; }
}

/* ── product-page footer: one clear way home ───────────────────────────── */
.foot__back {
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.22em;
  color: var(--gold-hi);
}

/* ── what THE ELDER is (P9) ────────────────────────────────────────────── */
/* The section this replaces was four abstract claims. This one has to carry an
   argument, so it is built like one: a statement, then a comparison the reader
   can check, then the four claims as the consequence rather than the opening.

   Everything here is HTML and CSS. A claim about three different things is a
   table, and the honest way to draw a table is to draw a table. */
.section--what { background: linear-gradient(180deg, var(--ink-proof), var(--ink-card)); }
.section--what .wrap { padding-block: clamp(52px, 6vw, 96px); }

.what__head { max-width: 74ch; }
.what__lead {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.7;
  color: var(--mute); max-width: 66ch; text-wrap: pretty;
}

/* ── the comparison ────────────────────────────────────────────────────── */
.cmp {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line-soft);
  margin-top: clamp(34px, 4vw, 56px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cmp__col {
  background: var(--ink-eco);
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 28px) clamp(26px, 2.8vw, 36px);
  display: grid; align-content: start; gap: 10px;
}
.cmp__kind {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--mute-4);
}
.cmp__line {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(17px, 1.5vw, 22px); line-height: 1.25; color: var(--mute);
}
.cmp__desc { font-size: 13.5px; line-height: 1.62; color: var(--mute-2); max-width: 34ch; }

/* The third column is the answer, so it is lit rather than merely last. */
.cmp__col[data-kind='elder'] {
  background: linear-gradient(180deg, rgba(201,162,74,0.07), rgba(201,162,74,0.02));
  box-shadow: inset 0 1px 0 var(--gold), inset 0 0 60px rgba(201,162,74,0.05);
}
.cmp__col[data-kind='elder'] .cmp__kind { color: var(--gold-warm); }
.cmp__col[data-kind='elder'] .cmp__line { color: var(--paper); }
.cmp__col[data-kind='elder'] .cmp__desc { color: var(--paper-soft); }

/* ── the four claims, now a consequence rather than an opening ─────────── */
.claims {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
  margin-top: clamp(34px, 4vw, 54px);
}
.claim {
  display: grid; gap: 11px; align-content: start;
  padding-left: clamp(0px, 1.2vw, 20px); border-left: 1px solid var(--line);
}
.claim__mark { color: var(--gold); display: flex; }
.claim__title { font-size: 14.5px; font-weight: 500; color: var(--paper); }
.claim__desc { font-size: 13px; line-height: 1.6; color: var(--mute-2); }

@media (max-width: 1024px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .claims { grid-template-columns: minmax(0, 1fr); }
  .claim { border-left: 0; padding-left: 0; }
}


/* ══ P13 · THE ELDER ECOSYSTEM ═════════════════════════════════════════════
   Ce s-a scos de aici, si de ce.
   Blocul anterior desena `.eco-grid` + `.pcard`: cinci carduri EGALE, unul
   langa altul, fiecare cu un placeholder „IMAGE PENDING". Un rand de carduri
   identice afirma tacut exact ce principiul canonic neaga -- ca ar exista
   cinci platforme paralele. Nimic din el nu mai e referit de niciun renderer
   sau script, deci se scoate: CSS mort care descrie o afirmatie retrasa e mai
   rau decat CSS mort oarecare.

   Compozitia de acum are doua parti si o singura idee: un NUCLEU dominant, si
   RAMURI care pleaca din el. Spinarea e desenata in CSS -- ideea canonica de
   arbore ramane vizibila fara sa se atinga sau sa se regenereze vreun asset,
   si fara nicio imagine noua. ═══════════════════════════════════════════ */
.section--eco { background: var(--ink-eco); }
.section--eco > .wrap { padding-block: clamp(48px, 5.4vw, 88px) 0; }
.section--eco > .wrap:last-child {
  padding-block: clamp(34px, 3.6vw, 56px) clamp(52px, 6vw, 96px);
}

/* Nucleul in stanga, ramurile in dreapta. Raportul e deliberat inegal:
   nucleul trebuie CITIT ca nucleu inainte sa fie citit, iar doua coloane
   egale ar spune ca sunt doua lucruri de acelasi rang. */
.eco__body {
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 3.4vw, 64px);
  /* Coloana din stanga tine nucleul SI concluzia. Asa cele doua coloane se
     termina aproape la fel, fara sa umflu panoul ca sa acopere diferenta:
     `stretch` singur inaltase panoul si mutase golul INAUNTRUL lui -- acelasi
     defect corectat in P12, doar cu un chenar in jur. */
  align-items: start;
}
.eco__side { display: grid; align-content: start; min-width: 0; }

/* ── nucleul ──────────────────────────────────────────────────────────── */
.eco__core {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 2.4vw, 34px) clamp(26px, 2.6vw, 36px);
  border: 1px solid rgba(201, 162, 74, 0.22);
  border-radius: 2px;
  background:
    radial-gradient(120% 90% at 6% 0%, rgba(201,162,74,0.09) 0%, rgba(201,162,74,0) 62%),
    var(--ink-card);
}
.ecore__label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--gold-dim);
}
.ecore__name {
  margin-top: 10px;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04;
  letter-spacing: 0.01em; color: var(--gold-hi);
}
.ecore__role {
  margin-top: clamp(14px, 1.4vw, 20px);
  font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.65;
  color: var(--mute); text-wrap: pretty;
}
/* Cele patru capabilitati comune. Plat si scurt: sunt ce ofera nucleul, nu o
   lista de functii de vandut. */
.ecore__caps {
  list-style: none; margin: clamp(18px, 1.8vw, 26px) 0 0; padding: 0;
  display: grid; gap: 9px;
}
.ecore__cap {
  position: relative; padding-left: 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--mute-2);
}
.ecore__cap::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 8px; height: 1px; background: rgba(201, 162, 74, 0.6);
}
.ecore__principle {
  margin-top: clamp(18px, 1.8vw, 26px);
  padding-top: clamp(14px, 1.4vw, 20px);
  padding-top: clamp(14px, 1.4vw, 20px);
  border-top: 1px solid rgba(201, 162, 74, 0.16);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(13.5px, 1.15vw, 16px); line-height: 1.45;
  color: var(--gold-hi); text-wrap: pretty;
}

/* ── ramurile ─────────────────────────────────────────────────────────── */
/* O coloana vertebrala si cinci noduri. Desenata cu un gradient, nu cu o
   imagine: se stinge la capete, deci nu arata ca o bordura care s-a oprit. */
.eco__branches {
  list-style: none; margin: 0; padding: 0 0 0 clamp(22px, 2.2vw, 34px);
  position: relative;
}
.eco__branches::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, rgba(201,162,74,0) 0%,
              rgba(201,162,74,0.42) 12%, rgba(201,162,74,0.42) 88%,
              rgba(201,162,74,0) 100%);
}
.ebr {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr) auto;
  gap: clamp(12px, 1.4vw, 26px);
  align-items: start;
  padding: clamp(16px, 1.7vw, 24px) 0;
  border-bottom: 1px solid var(--line-faint);
}
.ebr:first-child { padding-top: 6px; }
.ebr:last-child { border-bottom: 0; padding-bottom: 0; }
/* Nodul: capatul ramurii pe spinare. Culoarea produsului, nu a paginii --
   asa ramura se leaga vizual de randul ei fara nicio eticheta in plus. */
.ebr__node {
  position: absolute; left: calc(-1 * clamp(22px, 2.2vw, 34px)); top: clamp(24px, 2.3vw, 32px);
  width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(6, 10, 16, 1);
}
.ebr__node::after {
  content: ""; position: absolute; left: 5px; top: 3px;
  width: clamp(16px, 1.7vw, 27px); height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(201,162,74,0));
  opacity: 0.6;
}
.ebr__id { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ebr__mark { color: var(--accent); display: flex; }
.ebr__name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(18px, 1.55vw, 23px); line-height: 1.1; color: var(--txt);
  letter-spacing: 0.02em;
}
.ebr__kind {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--mute-3); line-height: 1.5;
}
.ebr__say { display: grid; gap: 7px; min-width: 0; }
.ebr__role {
  font-size: clamp(13px, 1vw, 14.5px); line-height: 1.6; color: var(--mute);
  text-wrap: pretty;
}
.ebr__context {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
  color: var(--mute-3);
}
.ebr__act {
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding-top: 2px;
}
/* Buton numai unde exista o usa. Patru din cinci randuri nu au niciunul, si
   asta e informatie -- nu o omisiune de completat mai tarziu. */
.ebr__go {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--gold-hi); text-decoration: none;
  padding: 7px 2px;
}
.ebr__arrow { font-family: var(--font-mono); }
.ebr__go:hover, .ebr__go:focus-visible { color: var(--gold-hi-2); }

.eco__closing {
  margin: clamp(26px, 2.8vw, 42px) 0 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.38;
  color: var(--gold-hi); text-wrap: balance;
  padding-right: max(0px, calc(100% - 64ch));
}

/* Sub latimea la care nucleul si ramurile mai incap alaturi, povestea devine
   verticala: nucleul intai, ramurile dupa el. Aceeasi ordine ca in DOM.
   Masurat: la 1024 coloana rolului ar cobori sub 210px, adica sub masura la
   care o propozitie de o linie ramane o linie. */
@media (max-width: 1024px) {
  .eco__body { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.4vw, 40px); }
  .eco__branches { padding-left: clamp(20px, 4vw, 30px); }
  .ebr { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
  .ebr__act { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
}
/* Pe telefon, fiecare ramura devine un bloc citit de sus in jos. Nodul ramane
   pe spinare: legatura cu nucleul e tot ce nu are voie sa se piarda aici. */
@media (max-width: 640px) {
  .ebr { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
  /* Pictograma langa nume, iar categoria aliniata SUB NUME, nu sub
     pictograma. Cu `grid-column: 1 / -1` eticheta pornea din marginea
     pictogramei, iar numele din alta parte -- doua margini stangi in acelasi
     bloc, si cea gresita mai vizibila. Latimea pictogramelor difera (SECOND
     SELF deseneaza pe 28, restul pe 24), deci diferenta se vedea si de la un
     produs la altul. */
  .ebr__id { grid-template-columns: auto minmax(0, 1fr); align-items: center;
             gap: 2px 10px; }
  .ebr__kind { grid-column: 2; }
  .ebr__node { top: 26px; }
  .eco__core { padding: 22px 20px 24px; }
}

/* ── how it works (P10) ────────────────────────────────────────────────── */
/* Six stages in the order a request passes through them, closing into a loop.
   This absorbs the old Lifecycle block: Understand/Decide/Act/Learn described a
   shape, these describe the parts that exist.

   Drawn in markup. A sequence is honestly drawn as a numbered sequence, and a
   numbered sequence still reads when it folds to one column on a phone. */
.section--how { background: var(--ink-eco); }
.section--how .wrap { padding-block: clamp(52px, 6vw, 96px); }

.how__head { max-width: 74ch; }
.how__lead {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.7;
  color: var(--mute-2); max-width: 68ch; text-wrap: pretty;
}

.steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--line-soft);
  margin-top: clamp(34px, 4vw, 56px);
  border: 1px solid var(--line-soft);
}
.step {
  position: relative; background: var(--ink);
  padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 32px);
  display: grid; align-content: start; gap: 9px;
}
.step__n {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  color: var(--gold-warm);
}
.step__title { font-size: 15px; font-weight: 500; color: var(--paper); }
.step__line {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.3; color: var(--gold-hi);
}
.step__desc { font-size: 13px; line-height: 1.62; color: var(--mute-2); }

/* The last stage feeds the second. Marked on the tile itself so the loop is
   visible before the sentence under the grid explains it. */
.step[data-step='learning'] { background: linear-gradient(180deg, rgba(201,162,74,0.05), rgba(6,10,16,0)); }
.step[data-step='learning']::after {
  content: '\21BA'; position: absolute; right: clamp(16px, 1.8vw, 24px);
  top: clamp(20px, 2.2vw, 28px);
  font-family: var(--font-mono); font-size: 15px; color: var(--gold-warm);
}
.step[data-step='memory'] { box-shadow: inset 2px 0 0 rgba(201,162,74,0.32); }

.how__loop {
  margin-top: clamp(24px, 2.8vw, 36px);
  font-size: 13.5px; line-height: 1.66; color: var(--mute-3);
  max-width: 72ch; text-wrap: pretty;
}

@media (max-width: 1024px) {
}
@media (max-width: 640px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}


/* ══ P14 · FOR YOU / BUSINESS / ENTERPRISE ═════════════════════════════════
   Ce s-a scos: `.aud-grid` + `.acard` -- trei carduri identice de 400px cu un
   placeholder in fiecare. Nimic din ele nu mai e referit; reguli care descriu
   o afirmatie retrasa sunt mai rele decat CSS mort oarecare.

   Doua etaje, si ordinea lor E argumentul:
     CONTEXTELE   trei coloane de ACEEASI greutate. Nu o scara. Enterprise nu e
                  „mai mult" si For You nu e o versiune mica -- au acelasi
                  chenar, aceeasi scara tipografica si acelasi spatiu. Ce
                  difera se citeste pe linia de control, nu din marime.
     FUNDAMENTUL  o banda pe sub toate trei, legata de fiecare coloana printr-un
                  fir scurt. Aceeasi platforma, vazuta de dedesubt.

   Fara chenare de card, fara umbre, fara coloana evidentiata: orice accent pus
   pe una dintre ele ar transforma segmentarea in tabel de preturi, exact ce nu
   e. ═════════════════════════════════════════════════════════════════════ */
/* Golul grilei se declara O SINGURA DATA, pe sectiune: firele care leaga
   coloanele de banda de dedesubt trebuie sa cada pe centrul fiecarei coloane,
   iar centrul depinde de gol. Cu un procent fix (16.6%) firele exterioare
   cadeau langa coloana, cu 11px -- destul cat sa se vada ca nu se leaga. */
.section--aud { --actx-gap: clamp(20px, 2.4vw, 44px); }
.aud__contexts {
  list-style: none; margin: clamp(34px, 4vw, 62px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--actx-gap);
}
/* Coloana: plata, despartita de o linie verticala, nu de un chenar. */
.actx {
  position: relative;
  display: grid; gap: clamp(10px, 1vw, 14px); align-content: start;
  padding: clamp(18px, 1.8vw, 26px) 0 clamp(22px, 2.2vw, 32px)
           clamp(18px, 1.8vw, 28px);
  border-left: 1px solid var(--line-soft);
}
/* Marcajul de sus: acelasi la toate trei. Culoarea nu ierarhizeaza. */
.actx__tick {
  position: absolute; left: -1px; top: 0; width: 1px;
  height: clamp(26px, 2.6vw, 38px); background: var(--gold-deep);
}
.actx__scope {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--gold-dim);
}
.actx__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 2.3vw, 34px); line-height: 1.06; color: var(--paper);
}
.actx__lead {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(15px, 1.3vw, 18px); line-height: 1.4; color: var(--gold-hi);
  text-wrap: pretty;
}
.actx__who {
  font-size: clamp(12.5px, 0.98vw, 14px); line-height: 1.6; color: var(--mute-2);
}
.actx__role {
  font-size: clamp(13px, 1vw, 14.5px); line-height: 1.65; color: var(--mute);
  text-wrap: pretty;
}
/* Linia care chiar diferentiaza cele trei contexte. Are eticheta ei, ca sa se
   citeasca drept „nivel de implementare si control", nu drept inca o fraza. */
.actx__control {
  margin-top: clamp(6px, 0.8vw, 10px);
  padding-top: clamp(12px, 1.2vw, 16px);
  border-top: 1px solid var(--line-faint);
  font-size: 12.5px; line-height: 1.6; color: var(--mute-3);
}
.actx__control-key {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
  color: var(--gold-dim);
}

/* ── fundamentul comun ────────────────────────────────────────────────── */
/* Banda trece pe sub toate trei si e legata de fiecare coloana printr-un fir
   scurt, desenat cu `::before` pe trei pozitii procentuale -- aceleasi treimi
   pe care le imparte grila de deasupra. */
.aud__found {
  position: relative;
  margin-top: clamp(30px, 3.2vw, 52px);
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 32px);
  border: 1px solid rgba(201, 162, 74, 0.18);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(201,162,74,0.045) 0%, rgba(201,162,74,0) 70%),
    var(--ink-card);
}
.aud__found::before {
  /* Centrul primei coloane, exact: (100% - 2*gol) / 3 / 2. */
  content: ""; position: absolute;
  left: calc((100% - 2 * var(--actx-gap)) / 6);
  right: calc((100% - 2 * var(--actx-gap)) / 6);
  top: calc(-1 * clamp(30px, 3.2vw, 52px)); height: clamp(30px, 3.2vw, 52px);
  /* TREI fire, cate unul pe centrul fiecarei coloane. Prima versiune folosea
     doua placi de 50% latime si desena linia la marginea lor STANGA -- adica
     amandoua cadeau pe centru, iar firul catre a treia coloana nu exista.
     Se vedea: doua fire in loc de trei. Acum fiecare fir e o placa de 1px,
     pozitionata explicit la 0%, 50% si 100% din caseta. */
  --fir: linear-gradient(180deg, rgba(201,162,74,0) 0%, rgba(201,162,74,0.38) 100%);
  background:
    var(--fir) 0 0 / 1px 100% no-repeat,
    var(--fir) 50% 0 / 1px 100% no-repeat,
    var(--fir) 100% 0 / 1px 100% no-repeat;
  opacity: 0.85;
}
.afound__label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--gold-dim);
}
.afound__list {
  list-style: none; margin: clamp(16px, 1.8vw, 24px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px) clamp(20px, 2.2vw, 40px);
}
.afound__item {
  position: relative; padding-left: 18px;
  font-size: 12.5px; line-height: 1.55; color: var(--mute-2);
}
.afound__item::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 1px; background: rgba(201, 162, 74, 0.55);
}

.aud__closing {
  margin: clamp(28px, 3vw, 44px) 0 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(15px, 1.4vw, 20px); line-height: 1.4;
  color: var(--gold-hi); text-wrap: balance;
  max-width: 74ch;
}

/* Sub latimea la care trei coloane devin trei fasii, povestea se stivuieste.
   Masurat: la 1024 coloana contextului ar cobori la ~300px, si linia de
   control (cea mai lunga) ar trece de cinci randuri. */
@media (max-width: 1024px) {
  .aud__contexts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .actx { padding-block: clamp(22px, 3vw, 30px); }
  .actx + .actx { border-top: 1px solid var(--line-faint); }
  .afound__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Cu o singura coloana deasupra, firele catre banda n-ar mai lega nimic:
     raman unul singur, pe axa. */
  .aud__found::before { left: 50%; right: auto; width: 1px;
    background: linear-gradient(180deg, rgba(201,162,74,0) 0%,
                rgba(201,162,74,0.34) 100%); }
}
@media (max-width: 640px) {
  .afound__list { grid-template-columns: minmax(0, 1fr); }
  .aud__found { padding: 20px 18px; }
}

/* ══ P15 · COMMERCIAL ACCESS ═══════════════════════════════════════════════
   Ce s-a scos: `.cmodels` + `.cmodel` -- patru coloane centrate, cu o
   pictograma si o propozitie fiecare. Forma de brosura: spunea ce se poate
   face, niciodata in ce conditii. Jumatatea a doua a adevarului lipsea, si e
   chiar jumatatea care conteaza.

   Doua capcane evitate, amandoua vizuale:
     PATRU CARDURI EGALE cu chenar arata ca patru PLANURI, iar un tabel de
     planuri fara preturi e mai neserios decat lipsa lui. Deci: plate, pe o
     linie de sus, ca orice alta lista din pagina.
     UN BLOC DE CTA mare la final ar cere o destinatie care nu exista. Nu e
     niciunul -- si textul spune de ce, in loc sa acopere lipsa.
   ══════════════════════════════════════════════════════════════════════ */
.section--comm { background: var(--ink); }

/* ── modalitatile de acces ────────────────────────────────────────────── */
.amodels {
  list-style: none; margin: clamp(34px, 4vw, 60px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 36px);
  text-align: left;
}
.amodel {
  display: grid; gap: 9px; align-content: start;
  padding-top: 14px; border-top: 1px solid rgba(201, 162, 74, 0.26);
}
.amodel__title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em;
  font-weight: 500; color: var(--gold-hi);
}
.amodel__desc { font-size: 13px; line-height: 1.6; color: var(--mute); text-wrap: pretty; }
/* Limita fiecarui model. Nu e o nota de subsol: e partea pe care o pagina
   comerciala o lasa de obicei afara. */
.amodel__bound {
  font-size: 12px; line-height: 1.55; color: var(--mute-3);
  padding-top: 9px; border-top: 1px solid var(--line-faint);
}

/* ── unde ruleaza ─────────────────────────────────────────────────────── */
.adeploy {
  margin-top: clamp(30px, 3.4vw, 52px);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px);
  border: 1px solid rgba(201, 162, 74, 0.16); border-radius: 2px;
  background: var(--ink-card); text-align: left;
}
.adeploy__label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--gold-dim);
}
.adeploy__list {
  list-style: none; margin: clamp(14px, 1.6vw, 20px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 28px);
}
.adep { display: grid; gap: 5px; padding-left: 16px; position: relative; }
.adep::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 1px; background: rgba(201, 162, 74, 0.5);
}
.adep__title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--gold-hi);
}
.adep__desc { font-size: 12.5px; line-height: 1.55; color: var(--mute-2); }
.adeploy__note {
  margin-top: clamp(14px, 1.6vw, 20px); padding-top: 12px;
  border-top: 1px solid var(--line-faint);
  font-size: 12px; line-height: 1.55; color: var(--mute-3);
}

/* ── pasul urmator ────────────────────────────────────────────────────── */
/* Fara buton, fara chenar, fara „contact". Doua propozitii si una care spune
   ce lipseste. Linia de adevar sta pe aceeasi axa cu restul, nu marginalizata
   intr-un subsol: e parte din mesaj, nu o rezerva legala. */
/* Coda pe DOUA coloane: pasul urmator in stanga, termenii in dreapta.
   Intr-o singura coloana, ultima treime lasa jumatatea dreapta goala -- acelasi
   gol mort reparat in P12, P13 si P14, a patra oara cu alt nume. */
.acoda {
  margin-top: clamp(32px, 3.6vw, 54px);
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(201, 162, 74, 0.18);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 56px); align-items: start; text-align: left;
}
.acoda__terms { display: grid; gap: clamp(12px, 1.3vw, 18px); align-content: start; }
.anext {
  display: grid; gap: clamp(10px, 1.1vw, 15px); text-align: left;
}
.anext__head {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(21px, 2vw, 29px); line-height: 1.1; color: var(--paper);
}
.anext__body {
  font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.65; color: var(--mute);
  text-wrap: pretty;
}
.anext__truth {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(14px, 1.2vw, 17px); line-height: 1.45;
  color: var(--gold-hi); text-wrap: pretty;
}

.comm__note {
  margin: 0; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; color: var(--mute-2);
  text-align: left;
}
.comm__closing {
  margin: 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(14.5px, 1.3vw, 18px); line-height: 1.45;
  color: var(--gold-hi); text-wrap: pretty; text-align: left;
}

/* Masurat pe descrierea cea mai lunga din cele patru:
     1440  4 coloane  317px  3 randuri
     1100  4 coloane  242px  3 randuri
     1025  4 coloane  226px  4 randuri   <- prea ingust
     1025  2 coloane  471px  2 randuri   <- ce se livreaza
   Pragul e la 1100, nu la 1024, ca sa nu ajunga la 226px si patru randuri --
   aceeasi judecata ca la P14, unde 265px si patru randuri au fost respinse. */
@media (max-width: 1100px) {
  .amodels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .acoda { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); }
}
@media (max-width: 640px) {
  .amodels { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .adeploy__list { grid-template-columns: minmax(0, 1fr); }
  .adeploy { padding: 20px 18px; }
}

/* ══ P16 · TRUST · SECURITY · CONTROL ══════════════════════════════════════
   Increderea nu se deseneaza cu un lacat. Un scut, un badge sau un verde de
   tip „totul e in regula" sunt exact ce pune o pagina care nu are ce arata --
   si aici exista ce arata, deci nu e nevoie de ele. Culoarea ramane aurul
   ELDER, iar singurul mijloc vizual e structura.

   Doua jumatati, si a doua NU e o nota de subsol:
     LANTUL         cinci pasi in ordine, pe o coloana vertebrala. Numarul se
                    vede, dar nu se aude de doua ori -- `<ol>` il spune deja.
     CE NU SE SPUNE patru limite reale, in acelasi chenar si la aceeasi scara
                    tipografica cu lantul. Daca ar fi mai mici sau mai palide,
                    forma ar dezminti textul.
   ══════════════════════════════════════════════════════════════════════ */
.section--trust { background: var(--ink-proof); }
.section--trust > .wrap { padding-block: clamp(52px, 6vw, 96px); }

/* ── lantul ───────────────────────────────────────────────────────────── */
/* Coloana vertebrala, desenata cu un gradient care se stinge la capete: o
   bordura care s-ar opri brusc ar arata ca o eroare de randare. */
.tsteps {
  list-style: none; margin: clamp(34px, 4vw, 60px) 0 0;
  padding: 0 0 0 clamp(22px, 2.2vw, 34px);
  position: relative; text-align: left;
  display: grid; gap: clamp(16px, 1.8vw, 26px);
}
.tsteps::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, rgba(201,162,74,0) 0%,
              rgba(201,162,74,0.4) 10%, rgba(201,162,74,0.4) 90%,
              rgba(201,162,74,0) 100%);
}
/* Fiecare pas e o BANDA orizontala: numar, apoi ce se intampla, apoi cum.
   Intr-o singura coloana, descrierea se opreste la ~82ch si lasa jumatatea
   dreapta goala -- al saselea gol mort din aceeasi familie, dupa P12..P15.
   Banda foloseste latimea SI face secventa mai lizibila: un rand per pas. */
.tstep {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 4px 14px; align-items: start;
  padding-top: 13px; border-top: 1px solid var(--line-faint);
}
.tstep:first-child { border-top: 0; padding-top: 2px; }
/* Nodul pe spinare: capatul pasului. Aceeasi culoare la toti cinci -- nimic nu
   sugereaza ca unul ar fi mai important, fiindca lantul cade daca oricare
   lipseste. */
.tstep::before {
  content: ""; position: absolute;
  left: calc(-1 * clamp(22px, 2.2vw, 34px)); top: clamp(18px, 1.8vw, 24px);
  width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--gold-deep); box-shadow: 0 0 0 3px var(--ink-proof);
}
.tstep__num {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--gold-dim); padding-top: 1px;
}
.tstep__body { display: grid; gap: 6px; min-width: 0; }
.tstep__title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em;
  font-weight: 500; color: var(--gold-hi);
}
.tstep__claim {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(15px, 1.35vw, 19px); line-height: 1.35; color: var(--paper);
}
.tstep__desc {
  font-size: clamp(12.8px, 1vw, 14.5px); line-height: 1.65; color: var(--mute);
  text-wrap: pretty; padding-top: 2px;
}

/* ── ce nu se spune ───────────────────────────────────────────────────── */
/* Acelasi chenar si aceeasi greutate ca restul sectiunii. Limitele nu sunt o
   rezerva legala ascunsa jos: sunt jumatatea a doua a mesajului. */
.tbound {
  margin-top: clamp(32px, 3.6vw, 54px);
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 32px);
  border: 1px solid rgba(201, 162, 74, 0.2); border-radius: 2px;
  background: var(--ink-card); text-align: left;
}
.tbound__label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.24em;
  color: var(--gold-dim);
}
.tbound__list {
  list-style: none; margin: clamp(16px, 1.8vw, 24px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px) clamp(22px, 2.4vw, 44px);
}
.tbound__item {
  position: relative; padding-left: 18px;
  font-size: 12.8px; line-height: 1.6; color: var(--mute-2);
}
.tbound__item::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1px; background: rgba(201, 162, 74, 0.5);
}

.trust__closing {
  margin-top: clamp(30px, 3.2vw, 48px);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.38;
  color: var(--gold-hi); text-align: left; text-wrap: pretty;
}
.trust__closing-part { display: inline-block; }

/* Sub 1025 banda ar da o coloana de rol prea ingusta, deci pasul se
   stivuieste: numar+titlu, apoi descrierea dedesubt. Aceeasi ordine ca in DOM. */
@media (max-width: 1024px) {
  .tbound__list { grid-template-columns: minmax(0, 1fr); }
  .tstep { grid-template-columns: auto minmax(0, 1fr); }
  .tstep__desc { grid-column: 2; }
}
@media (max-width: 640px) {
  .tsteps { padding-left: clamp(20px, 4vw, 30px); }
  .tstep { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .tstep__desc { grid-column: 1; }
  .tstep__num { padding-top: 0; }
  .tbound { padding: 20px 18px; }
}

/* ── closing ───────────────────────────────────────────────────────────── */
.close__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,10,16,0.93), rgba(6,10,16,0.7) 60%, rgba(6,10,16,0.86));
}
.close__inner {
  position: relative; display: flex; flex-wrap: wrap;
  gap: clamp(24px, 3vw, 44px); align-items: center; justify-content: space-between;
}
.close__inner .cta-row { margin-top: 0; }
.section--close .h2 { max-width: 34ch; }

/* ── footer ────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); border-top: 1px solid var(--line); }
.foot__top {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 48px);
  justify-content: space-between; align-items: flex-start;
  padding-block: clamp(30px, 3.4vw, 46px) 0;
}
.foot__brand { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.22em; color: var(--gold-hi); }
.foot__tagline { font-size: 12.5px; color: var(--mute-4); margin-top: 10px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 34px); }
.foot__nav-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--mute-2);
}
.foot__nav-btn:hover { color: var(--gold-hi); }
.foot__copy { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--mute-4); }
.foot__notice {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7; letter-spacing: 0.1em;
  color: var(--mute-2); border-top: 1px solid var(--line-faint); padding-top: 16px;
}
.site-footer .wrap:last-child { padding-block: 0 clamp(24px, 2.6vw, 34px); }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Art direction, not a second picture. The hero stops being one overlaid
     frame and becomes three stacked blocks: the words, then the artwork framed
     on the trunk and its core, then the product names as a real list. Branches
     this narrow cannot carry five labels legibly, and the Owner's rule is that
     the names may move below the artwork rather than be crushed onto it. */
  .hero { display: flex; flex-direction: column; }
  /* display:contents lets the four overlay pieces join the hero's own column
     instead of needing a second copy of the markup. */
  .hero__overlay { display: contents; }
  .hero__inner {
    position: static; padding: clamp(28px, 7vw, 48px) var(--gutter) clamp(24px, 5vw, 36px);
  }
  .hero__copy { max-width: 46ch; margin-inline-start: 0; }
  .hero__stage { aspect-ratio: 4 / 5; max-height: 70vh; }
  .hero__art { object-position: 68% 38%; }
  .hero__veil {
    background: linear-gradient(180deg, rgba(6,10,16,0.5) 0%, rgba(6,10,16,0) 22%,
                                rgba(6,10,16,0) 68%, rgba(6,10,16,0.96) 100%);
  }
  .hero__pulse { display: none; }
  .hero__core {
    position: static; transform: none; justify-items: center;
    margin-top: clamp(20px, 5vw, 30px); padding: 0 var(--gutter);
  }
  .hero__nodes {
    position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 4vw, 26px) 12px; padding: clamp(24px, 6vw, 34px) var(--gutter) 0;
  }
  .hnode {
    position: static; transform: none; background: none;
    padding: 0; max-width: none;
  }
  .hnode[data-node='second-self'] { max-width: none; }
  /* Out of the artwork the type is no longer sized against the picture, so it
     goes back to sizes meant to be read rather than to fit a branch. */
  .hnode__name { font-size: 15px; letter-spacing: 0.14em; text-shadow: none; }
  .hnode__kind { font-size: 9px; letter-spacing: 0.16em; text-shadow: none; }
  .hero__aside {
    position: static; text-align: center; margin: clamp(22px, 5vw, 32px) 0 0;
    padding: 0 var(--gutter) clamp(30px, 7vw, 48px);
  }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
}
@media (max-width: 1024px) {
  /* The bar keeps the wordmark and one control; everything else moves into a
     drawer that opens from it. The panels are the same elements as on desktop. */
  .nav, .header__actions--bar { display: none; }
  .header__toggle { display: inline-flex; }
  .header__panels {
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  }
  .drawer-nav { display: block; padding: 8px var(--gutter) 16px; }
  .drawer-nav__btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    gap: 12px; background: none; border: 0; border-bottom: 1px solid var(--line-soft);
    padding: 15px 0; cursor: pointer;
    font-family: inherit; font-size: 15px; color: var(--paper-warm); text-align: left;
  }
  .drawer-nav__btn::after {
    content: '+'; font-family: var(--font-mono); font-size: 15px; color: var(--gold);
  }
  .drawer-nav__btn[aria-expanded='true']::after { content: '–'; }
  .mega { border-bottom: 1px solid var(--line-soft); }
  .mega__inner { padding-block: 6px 22px; }
  .mega__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .header__actions--drawer {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
    padding: 18px var(--gutter) 26px; border-top: 1px solid var(--line-soft);
  }
  .header__actions--drawer .btn { flex: 1 1 160px; }
}
@media (min-width: 1025px) {
  .header__actions--drawer { display: none; }
}
@media (max-width: 640px) {
  .close__inner { align-items: flex-start; }
}
@media (max-width: 1024px) {
}
@media (max-width: 560px) {
  .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .btn.is-unavailable { align-items: center; }
}

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

/* ── motion below 1025px ───────────────────────────────────────────────── */
/* The overlay is drawn in the artwork's coordinates and the artwork is cropped
   here (object-fit: cover, framed on the trunk), so the traced paths no longer
   describe what is on screen. Rather than let light travel somewhere it does
   not belong, the whole layer stands down and the picture itself takes a very
   slow breath — the one ambient sign the brief allows on a phone. */
@media (max-width: 1024px) {
  .hero__motion { display: none; }
  .hero__art {
    animation: mArtBreath 9.5s var(--m-ease) infinite,
               mWake 0.9s var(--m-ease) 0.2s backwards;
  }
  .hero[data-paused] .hero__art { animation-play-state: paused; }
  .hnode { animation-delay: 0s; }
}
@keyframes mArtBreath {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.035); }
}

/* ── reduced motion ────────────────────────────────────────────────────── */
/* Not "less" motion: none. What stays is a still frame that still reads as the
   same picture — the ring lit, the lobes faintly present, the travelling light
   gone entirely. Hover keeps working, instantly, because the relationship it
   shows is information, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .hero__pulse { opacity: 0.5 !important; }
  .m-trunk, .m-signal { opacity: 0 !important; }
  .m-glow { opacity: var(--m-glow-idle) !important; }
  .hero[data-state="THOR_ACTIVE"]        .m-glow[data-lobe="thor"],
  .hero[data-state="ATLAS_ACTIVE"]       .m-glow[data-lobe="atlas"],
  .hero[data-state="LEDGER_ACTIVE"]      .m-glow[data-lobe="ledger"],
  .hero[data-state="CYBER_ACTIVE"]       .m-glow[data-lobe="cyber"],
  .hero[data-state="SECOND_SELF_ACTIVE"] .m-glow[data-lobe="second-self"] {
    opacity: var(--m-glow-active) !important;
  }
}


/* ── computer intelligence (P11) ───────────────────────────────────────── */
/* A capability that looks and never touches, so the section has to make the
   boundary impossible to miss: four things it does, then one line saying what
   it does not do. No CTA -- there is nowhere honest to send anyone yet.

   Composition is measured, never judged. Both numbers come out of
   tools/measure_computer_section.py:

     copy width   the ground stays dark enough for AA type across the left 44%
                  of the artwork, so the copy ends there -- computed against the
                  viewport, because the picture is full-bleed while the copy
                  aligns to the page's 1440 grid.
     framing      the section runs at 2:1, shorter than the 1.7768 source, so it
                  does not eat a screen mid-page. object-position 100% 49% is one
                  declaration covering both regimes: the y half acts when the box
                  is wider than the source (desktop -> vertical crop) and the x
                  half when it is taller (phones -> horizontal crop). At that
                  anchor every measured feature survives at every width: worst
                  feature loss 0.0%. */
.section--ci {
  background: var(--ink);
  /* An explicit single column. Left to auto, the track sizes itself to the
     max-content of its items, and an item with aspect-ratio reports a width
     derived from its own height -- so the picture grew wider than the section
     it lives in and got clipped by an amount nobody measured. */
  display: grid; grid-template-columns: 100%; overflow: hidden;
}
/* On screens wider than the page grid the picture starts at the grid's own
   left edge instead of the viewport's. The artwork's left margin is night sky
   at L=0.006 and the page ink is L=0.005, so the join is invisible -- and the
   copy gets the room the grid promises it instead of being squeezed into the
   sliver of dark left over after a full-bleed picture. */
.ci__inner, .ci__stage {
  grid-area: 1 / 1; min-width: 0;
  --ci-inset: max(0px, calc((100% - var(--wrap)) / 2));
  margin-left: var(--ci-inset);
}

/* Width pinned, height purely from the ratio -- never stretched to the row.
   Both halves matter. An auto width plus aspect-ratio lets a stretched height
   dictate the width, and the picture grew wider than its own section. A
   stretched HEIGHT is worse and quieter: the box turns taller than the source,
   cover switches from a vertical crop to a horizontal one, the dark left edge
   is cropped away, and the copy that was measured to stop at 44%% of the
   artwork is suddenly sitting at 54%% of it -- on the lit structure. Fixed at
   2:1 the crop is always vertical, the horizontal mapping is always 1:1, and
   the measured safe zone means what it says at every width. Where the copy runs
   taller than the band, the section keeps its ink above and below it. */
.ci__stage {
  position: relative; z-index: 0;
  aspect-ratio: 2 / 1; align-self: center;
}
/* <picture> is inline by default, and an inline picture hands the image's own
   intrinsic ratio to the box instead of taking the stage's. */
.ci__stage > picture { position: absolute; inset: 0; display: block; }
.ci__art { width: 100%; height: 100%; object-fit: cover; object-position: 100% 49%; }

/* Readability on the left, and the two seams. The section opens and closes in
   the same ink as its neighbours so P10 and P12 meet it without a band. */
.ci__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,10,16,0.95) 0%, rgba(6,10,16,0.9) 24%,
                    rgba(6,10,16,0.7) 38%, rgba(6,10,16,0.2) 52%, rgba(6,10,16,0) 62%),
    linear-gradient(180deg, var(--ink) 0%, rgba(6,10,16,0.7) 6%,
                    rgba(6,10,16,0) 16%, rgba(6,10,16,0) 84%, rgba(6,10,16,0.92) 100%);
}

.ci__inner { position: relative; z-index: 1; align-self: center; }
.ci__inner > .wrap { max-width: none; padding-inline: 0; padding-block: clamp(52px, 6vw, 96px); }
/* Where the copy stops, and why it is 39% rather than 44%.
   Luminance says the ground stays dark enough for AA type across the left 44%
   of the artwork. Structure says otherwise: the measured content box starts at
   39%, and the first thing inside it is a relation path. Type set to 44% still
   reads -- but its hairlines cross the paths, and covering them was the one
   thing the framing was told not to do. So the tighter of the two bounds wins,
   and the looser one is left as headroom.
   Both margin and limit are percentages of the picture, never vw: vw counts a
   scrollbar the picture does not have. */
.ci__copy {
  margin-left: var(--gutter);
  max-width: calc(39% - var(--gutter));
}

.eyebrow--ci { color: var(--ci-accent-2); }

/* Visible, and not an alarm: a state, set in the same mono as every other
   label on the page. The words carry the meaning, the colour only agrees. */
.ci__status {
  display: flex; align-items: center; gap: 9px;
  margin: -8px 0 22px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em;
  color: var(--ci-accent);
}
.ci__status-dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--ci-accent); box-shadow: 0 0 0 3px rgba(134,217,234,0.14);
}
.ci__head { max-width: 15ch; }
.ci__lead {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.7;
  color: var(--mute); text-wrap: pretty;
}

/* Two by two on desktop: four parts of one capability, not four products. Kept
   flat -- a hairline and a label, no card, no tile, no box. */
.cicaps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px) clamp(20px, 2.4vw, 36px);
  margin-top: clamp(28px, 3.2vw, 44px);
}
.cicap {
  display: grid; gap: 7px; align-content: start;
  padding-top: 13px; border-top: 1px solid rgba(134,217,234,0.24);
}
.cicap__title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em;
  font-weight: 500; color: var(--ci-accent);
}
.cicap__desc { font-size: 13px; line-height: 1.6; color: var(--mute-2); }

/* The boundary, in the page's own voice. This is the sentence that has to
   survive being read on its own. */
.ci__closing {
  margin-top: clamp(26px, 3vw, 40px);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.36;
  color: var(--gold-hi); text-wrap: balance;
}
.ci__closing-part { display: inline-block; }

/* Under the overlay width the copy would sit on the structure, so it stops
   overlaying and the picture becomes upright instead of a decorative band. */
@media (max-width: 1024px) {
  .section--ci { display: block; }
  .ci__inner, .ci__stage { margin-left: 0; }
  .ci__inner > .wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
  .ci__copy { margin-left: 0; max-width: 62ch; }
  .ci__stage { aspect-ratio: 1.35; }
  .ci__veil {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(6,10,16,0.6) 7%,
                                rgba(6,10,16,0) 18%, rgba(6,10,16,0) 86%,
                                rgba(6,10,16,0.9) 100%);
  }
}
@media (max-width: 640px) {
  .cicaps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ci__head { max-width: none; }
  .ci__stage { aspect-ratio: 1.2; }
}

/* ── diagnostics: absent unless explicitly asked for ───────────────────── */
.ci__diag { display: none; }
.section--ci[data-diag] .ci__diag {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.ci-mark { position: absolute; box-sizing: border-box; }
.ci-mark--section { border: 2px solid #FF5A5A; }
.ci-mark--safe { background: rgba(51,255,136,0.10); border: 2px solid #33FF88; }
.ci-mark--lum { background: rgba(51,255,136,0.04); border: 1px dashed rgba(51,255,136,0.55); }
.ci-mark--copy { border: 2px dashed #FF5A5A; }
.ci-mark--content { border: 2px dashed #8FB8F0; }
.ci-mark--structure { border: 2px dotted #FFD166; }
.ci-mark--centre {
  border: 3px solid #FFD166; border-radius: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
}
.ci-mark--source {
  border: 2px dashed #CFE0FA; width: 20px; height: 20px; margin: -10px 0 0 -10px;
}
.ci-mark__tag {
  position: absolute; top: 3px; left: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
}
.ci-mark--section .ci-mark__tag, .ci-mark--copy .ci-mark__tag { color: #FF5A5A; }
.ci-mark--safe .ci-mark__tag, .ci-mark--lum .ci-mark__tag { color: #33FF88; }
.ci-mark--content .ci-mark__tag { color: #8FB8F0; }
.ci-mark--structure .ci-mark__tag { color: #FFD166; }
.diag-panel--ci {
  left: 12px; right: auto; bottom: 12px; top: auto;
  border-color: rgba(134,217,234,0.6); color: #CFEFF6;
}
.diag-panel--ci b { color: var(--ci-accent); }

/* ══ P12 · GOVERNED AUTONOMY ═══════════════════════════════════════════════
   Fiecare numar de aici e o CONCLUZIE a lui tools/measure_governed_section.py,
   nu o preferinta. Rulat pe assetul canonic (1672x941, ratio 1.7768):

     zona sigura pentru text   0 .. 31.9% din latime
     AA singur ar permite      44.0%  -- dar prima masa luminoasa incepe la 31.9%,
                                         iar textul se opreste inaintea ei
     centru optic              x=0.6676  y=0.4879
     bbox mecanism             x 0.4366..0.9049   y 0.0967..0.8682
     axa fasciculului          y=0.3985
     desktop 2.00 / pos-y 42%  pastreaza 88.8% din inaltime, pierdere 0.00%
     mobil   1.20 / pos-x 100% pastreaza 67.5% din latime,  pierdere 0.00%
     contrast sub copy         6.51:1 in cel mai rau caz (p100)

   „Pierdere 0.00%" inseamna masurat zero pe toate cele sase porti, pe punctul
   final SI pe fasciculul de intentie -- nu „aproape nimic". ══════════════ */
/* DOUA BLOCURI, si asta E compozitia.
   Prima varianta punea toate cele sase etape in coloana de 31.9% de langa
   poza. Masurat la 1440: sectiunea iesea 1330px, artwork-ul 720px, deci 610px
   de cerneala goala in dreapta, dupa ce imaginea se terminase. Etapele sunt
   partea DENSA a sectiunii -- deci primesc latimea paginii, nu marginea. */
.section--gov { background: var(--ink); overflow: hidden; }

/* BANDA: intro in stanga, artwork in dreapta, suprapuse pe aceeasi celula.
   Inaltimea benzii e a POZEI, nu a textului, deci nimic gol nu ramane langa
   un intro scurt. */
.gov__band {
  position: relative;
  display: grid; grid-template-columns: 100%; overflow: hidden;
}
/* Pe ecrane mai late decat grila paginii, poza incepe de la marginea grilei,
   nu a ferestrei. Marginea stanga a artwork-ului e cer de noapte la L=0.003,
   iar cerneala paginii e L=0.005 -- imbinarea nu se vede. */
.gov__inner, .gov__stage {
  grid-area: 1 / 1; min-width: 0;
  --gov-inset: max(0px, calc((100% - var(--wrap)) / 2));
  margin-left: var(--gov-inset);
}
/* Poza dicteaza randul benzii; intro-ul se aseaza peste el. Fara asta, un
   intro mai inalt ar intinde caseta si decupajul ar deveni orizontal. */
.gov__stage { align-self: start; }
/* Latime fixata, inaltime pur din raport -- niciodata intinsa pe rand.
   La 2:1 decuparea e mereu VERTICALA, deci maparea orizontala e 1:1 si zona
   sigura masurata la 31.9% inseamna exact 31.9% la orice latime. Un raport sub
   1.7768 ar inversa decuparea in orizontala si ar taia porti. */
.gov__stage {
  position: relative; z-index: 0;
  aspect-ratio: 2 / 1; align-self: center;
}
.gov__stage > picture { position: absolute; inset: 0; display: block; }
/* O singura declaratie pentru ambele regimuri: jumatatea y lucreaza cand cutia
   e mai lata decat sursa (desktop -> decupare verticala), jumatatea x cand e
   mai inalta (telefon -> decupare orizontala). In ambele, pierdere 0.00%. */
.gov__art { width: 100%; height: 100%; object-fit: cover; object-position: 100% 42%; }

/* Lizibilitate in stanga, si cele doua cusaturi. Sectiunea se deschide si se
   inchide in aceeasi cerneala ca vecinii ei, deci P11 si P13 o intalnesc fara
   banda. Valul se stinge INAINTE de 32%, ca sa nu atinga prima poarta. */
.gov__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,10,16,0.95) 0%, rgba(6,10,16,0.9) 18%,
                    rgba(6,10,16,0.66) 27%, rgba(6,10,16,0.22) 36%, rgba(6,10,16,0) 46%),
    linear-gradient(180deg, var(--ink) 0%, rgba(6,10,16,0.7) 6%,
                    rgba(6,10,16,0) 16%, rgba(6,10,16,0) 84%, rgba(6,10,16,0.92) 100%);
}

/* Intro-ul se centreaza in banda si NU o inalta: `min-height: 0` il lasa sa
   fie mai scurt decat poza, ceea ce e chiar cazul normal. Daca vreodata ar fi
   mai inalt, banda creste -- dar atunci nu mai e gol, e text. */
.gov__inner { position: relative; z-index: 1; align-self: center; min-height: 0; }
.gov__inner > .wrap { max-width: none; padding-inline: 0; padding-block: clamp(28px, 3vw, 48px); }
/* Unde se opreste textul, si de ce 31.9% si nu 44%.
   Luminanta spune ca fundalul ramane destul de intunecat pentru text AA pe
   stanga 44% din artwork. Structura spune altceva: prima masa luminoasa --
   evantaiul fasciculului de intentie -- incepe la 31.9%. Text pus la 44% inca
   se citeste, dar sta peste fascicul, exact lucrul pe care compozitia a fost
   instruita sa nu-l acopere. Castiga limita mai stransa; cealalta ramane spatiu
   de siguranta.
   Procent din POZA, niciodata vw: vw numara o bara de derulare pe care poza
   n-o are. */
.gov__copy {
  margin-left: var(--gutter);
  max-width: calc(31.9% - var(--gutter));
}

/* SINA: sub banda, la latimea paginii. Aceeasi cerneala, deci imbinarea cu
   banda nu se vede -- sectiunea ramane un singur camp, nu doua. */
.gov__rail {
  position: relative; z-index: 1;
  padding-block: clamp(44px, 4.6vw, 76px) clamp(52px, 6vw, 92px);
}
/* `.wrap` isi aduce propriul `padding-block` din sistem -- 78px sus si jos la
   1440. Adunat peste al sinei, dadea 138px intre poza si grila: un gol care
   arata exact ca greseala pe care recompunerea o repara. Distanta se declara
   INTR-UN SINGUR loc. */
.gov__rail > .wrap {
  max-width: var(--wrap); padding-inline: var(--gutter); padding-block: 0;
}

.eyebrow--gov { color: var(--gov-accent-2); }

/* Vizibil, si fara alarma: o stare, in acelasi mono ca orice alta eticheta.
   Cuvintele poarta intelesul; punctul doar e de acord. Fara culoare, textul
   „PROVEN AT A2 · OWNER APPROVED" spune acelasi lucru intreg. */
.gov__status {
  display: flex; align-items: center; gap: 9px;
  margin: -8px 0 22px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em;
  color: var(--gov-accent);
}
.gov__status-dot {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--gov-accent); box-shadow: 0 0 0 3px rgba(227,194,122,0.14);
}
.gov__head { max-width: 14ch; }
.gov__lead {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.7;
  color: var(--mute); text-wrap: pretty;
}

/* Sase etape, una sub alta, in ordine. Lista e ORDONATA fiindca ordinea E
   claimul: o etapa nu poate fi atinsa inaintea celei care o autorizeaza.
   Numarul e decorativ in DOM (aria-hidden) fiindca <ol> il spune deja; e aici
   ca sa se vada, nu ca sa se auda de doua ori.
   Plat, deliberat: o linie si o eticheta. Fara card, fara tile, fara cutie
   opaca peste artwork -- exact ce a cerut compozitia. */
/* Trei pe orizontala, doua randuri. Ordinea vizuala 01->06 e ordinea din DOM
   citita pe randuri: grila nu reordoneaza nimic, deci ce se vede si ce se aude
   sunt acelasi lucru. Fara `grid-auto-flow: column`, tocmai ca sa ramana asa. */
.gstages {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 44px);
}
.gstage {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0 14px; align-items: start;
  padding-top: 12px; border-top: 1px solid rgba(227,194,122,0.22);
}
/* Poarta se ingusteaza la fiecare pas, si asa o arata si lista: linia de sus
   pastreaza aceeasi greutate, dar numarul se stinge -- autoritatea nu creste
   fiindca munca merge mai departe. */
.gstage__num {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--gov-accent-2); padding-top: 1px;
}
.gstage__body { display: grid; gap: 5px; min-width: 0; }
.gstage__title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em;
  font-weight: 500; color: var(--gov-accent);
}
.gstage__claim {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.4; color: var(--txt);
}
.gstage__desc { font-size: 12.5px; line-height: 1.6; color: var(--mute-2); }

/* Granita, in vocea paginii. Propozitia care trebuie sa reziste citita singura. */
/* Linia de inchidere primeste latimea intreaga a sinei, nu 62ch: hairline-ul
   e o cusatura intre grila si concluzie, iar o cusatura care se opreste la
   jumatate arata ca o scapare, nu ca o decizie. Textul se echilibreaza singur
   pe doua randuri. */
.gov__closing {
  margin: clamp(34px, 3.6vw, 52px) 0 0;
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid rgba(227,194,122,0.18);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.36;
  color: var(--gold-hi); text-wrap: balance;
  /* Cusatura merge pe toata latimea, TEXTUL nu. 113 de caractere pe un rand
     depasesc masura confortabila a unei seife de afisaj; textul se restrange
     prin padding, nu prin `max-width`, tocmai ca linia de sus sa ramana
     intreaga. */
  padding-right: max(0px, calc(100% - 62ch));
}
.gov__closing-part { display: inline-block; }

/* Sub latimea de suprapunere textul ar sta pe mecanism, deci inceteaza sa se
   suprapuna: se stivuieste INAINTEA imaginii, iar poza devine verticala in loc
   de banda decorativa. La 1.2 decuparea e orizontala si ancorata la dreapta --
   se pierde cer gol din stanga, niciodata o poarta. */
/* 1024px in jos: textul ar sta pe mecanism, deci inceteaza sa se suprapuna.
   Ordinea devine intro -> artwork -> etape -> closing, care e si ordinea din
   DOM: nimic nu se reordoneaza.
   Etapele raman 3x2 pana la 768. Masurat la 1025: coloana are 301px, iar
   descrierea cea mai lunga cade pe 4 randuri la 12.5px -- adica ~42 de
   caractere pe rand, in intervalul lizibil. Sub 768 coloana ar cobori la
   ~215px si aceeasi descriere ar ajunge la 6 randuri; acolo se trece la 2x3. */
@media (max-width: 1024px) {
  .gov__band { display: block; }
  .gov__inner, .gov__stage { margin-left: 0; }
  .gov__inner > .wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
  .gov__copy { margin-left: 0; max-width: 62ch; }
  .gov__inner > .wrap { padding-block: clamp(40px, 5vw, 64px) clamp(28px, 3vw, 40px); }
  .gov__stage { aspect-ratio: 1.35; align-self: auto; }
  .gov__veil {
    background: linear-gradient(180deg, var(--ink) 0%, rgba(6,10,16,0.6) 7%,
                                rgba(6,10,16,0) 18%, rgba(6,10,16,0) 86%,
                                rgba(6,10,16,0.9) 100%);
  }
}
/* Pragurile sunt masurate pe descrierea cea mai lunga din cele sase, si ce se
   LIVREAZA la fiecare latime:
     1440px  3 coloane  426px  2 randuri
     1025px  3 coloane  303px  3 randuri   -- 3x2 confirmat lizibil aici
      900px  2 coloane  411px  2 randuri
      768px  2 coloane  349px  3 randuri
      640px  1 coloana  602px  2 randuri
      390px  1 coloana  354px  3 randuri
   Pragul de 900 exista fiindca trei coloane sub el ar da ~265px si patru
   randuri: incape pe hartie, dar se citeste ingust. */
@media (max-width: 900px) {
  .gstages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gov__head { max-width: none; }
  .gov__stage { aspect-ratio: 1.2; }
  .gstages { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .gstage { grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; }
  .gstage__num { padding-top: 1px; }
}

/* ── diagnostice: absente daca nu sunt cerute explicit ─────────────────── */
.gov__diag { display: none; }
.section--gov[data-diag] .gov__diag {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.gov-mark { position: absolute; box-sizing: border-box; }
.gov-mark--section { border: 2px solid #FF5A5A; }
.gov-mark--safe { background: rgba(51,255,136,0.10); border: 2px solid #33FF88; }
.gov-mark--copy { border: 2px dashed #FF5A5A; }
.gov-mark--mech { border: 2px dashed #8FB8F0; }
.gov-mark--gate { border: 1px dotted #FFD166; }
.gov-mark--point { border: 2px solid #FFD166; }
.gov-mark--beam { border: 1px dashed rgba(227,194,122,0.7); }
.gov-mark--centre {
  border: 3px solid #FFD166; border-radius: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
}
.gov-mark--source {
  border: 2px dashed #CFE0FA; width: 20px; height: 20px; margin: -10px 0 0 -10px;
}
.gov-mark__tag {
  position: absolute; top: 3px; left: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
}
.gov-mark--section .gov-mark__tag, .gov-mark--copy .gov-mark__tag { color: #FF5A5A; }
.gov-mark--safe .gov-mark__tag { color: #33FF88; }
.gov-mark--mech .gov-mark__tag { color: #8FB8F0; }
.gov-mark--gate .gov-mark__tag, .gov-mark--point .gov-mark__tag { color: #FFD166; }
.gov-mark--beam .gov-mark__tag { color: #E3C27A; }
.diag-panel--gov {
  left: 12px; right: auto; bottom: 12px; top: auto;
  border-color: rgba(227,194,122,0.6); color: #F2E4C4;
}
.diag-panel--gov b { color: var(--gov-accent); }