/* =============================================================================
   quality-pass.css — strat de corecție, încărcat ULTIMUL.
   Rescris 2026-08-05 după auditul Impeccable 4.0.4.

   Regula fișierului: fiecare bloc reparat o singură problemă măsurată, are
   comentariul cu numărul constatării, și poate fi șters independent.
   Reversibilitate: ștergerea <link>-ului readuce exact starea publicată azi.
   ========================================================================== */

:root {
  --focus-ring: 2px solid var(--copper);
  --focus-offset: 4px;

  /* [Golul mort] Scara de spațiere. Azi: 104px sus și 104px jos la fiecare
     secțiune, dar 16px între titlu și propriul lede. Titlul își pierdea
     legătura cu introducerea lui. Raportul 88/64 rupe simetria: începutul de
     secțiune citește a început. */
  --s-3: 12px;   /* titlu → propriul paragraf */
  --s-4: 16px;   /* între paragrafe */
  --s-5: 24px;   /* rânduri de registru */
  --s-6: 32px;   /* bloc-titlu → bloc-conținut */
  --s-7: 48px;   /* între blocuri distincte în secțiune */
  --s-8: 64px;   /* sfârșit de secțiune */
  --s-9: 88px;   /* început de secțiune */
}


/* ===========================================================================
   [P0] Conținutul rămânea invizibil pentru vizitatorul implicit de desktop.

   `html.js .rv{opacity:0}` are specificitate 0-2-1 și bate `.rv.on{opacity:1}`
   care are 0-2-0. Clasa `.on` adăugată de IntersectionObserver nu avea niciun
   efect. Neutralizarea exista deja în cod, dar închisă în
   @media(prefers-reduced-motion:reduce), deci se aplica doar acolo.

   Măsurat înainte: 31/37 blocuri la opacitate efectivă 0 la 1440×900.
   Măsurat după:    0/37, în toate cele trei moduri (JS normal, reduce, fără JS).

   Specificitatea de mai jos e 0-3-1, deci câștigă fără `!important`.
   ======================================================================== */
html.js .rv.on,
html.js .hero h1.rv.on,
html.js .hero-facts.on > div,
html.js .trust-in.on > span,
html.js .faq-list.on > .faq-item,
html.js .timeline.on li,
html.js .stack-list.on > div {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Ștampila își păstrează translateX(-50%) — nu primește `transform:none`,
   altfel iese din centrarea proprie și împinge inelul peste marginea paginii. */
html.js .hero-stamp.on .stamp { opacity: .85; }

/* Aceeași garanție când JS întârzie, e blocat sau pică. Fără `animation`:
   plasturele anterior folosea animation-fill-mode, iar propria lui regulă
   `html.js .rv.on{animation:none}` îl anula — conținutul apărea la 0,78 s și
   dispărea la primul scroll. */
html.js .rv,
html.js .hero h1.rv {
  animation: none;
}
html:not(.js) .rv,
html:not(.js) .hero h1.rv {
  opacity: 1;
  transform: none;
  filter: none;
}


/* ===========================================================================
   [P1] Overflow orizontal de 35px între 961 și 1180px.

   `styles.css:617` forța `.lead{width:calc(100% + 266px)}` — 107 caractere pe
   rând, față de plafonul de 75 — ca să umple golul lăsat de coloana îngustă a
   hero-ului. `html,body{overflow-x:hidden}` masca bara de scroll, deci
   conținutul era TĂIAT, nu accesibil: portretul, ștampila, „…remote" și
   „AI sharpens analysis".
   ======================================================================== */
@media (min-width: 961px) {
  .hero-grid > div:first-child .lead {
    width: auto;
    max-width: 68ch;
  }
  .hero h1 em::after {
    left: 0;
    width: 100%;
  }
}

/* Inelul decorativ al portretului (`<i class="profile-ring">`, 267px) e mai lat
   decât containerul lui și contribuia la scrollWidth. E decor, nu conținut:
   se oprește la marginea hero-ului în loc să lățească documentul.
   `clip`, nu `hidden` — `hidden` ar crea un container de derulare. */
.hero { overflow-x: clip; }

/* Ștampila era ancorată la `left:90%` într-un container de 170px, deci ieșea
   din shell înainte ca grila să aibă loc. */
@media (min-width: 961px) and (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr 200px; gap: 28px; }
  .hero-stamp { width: 200px; }
  .stamp { left: 50%; }
  html.js .hero-stamp .stamp,
  html.js .hero-stamp.on .stamp { transform: translateX(-50%) rotate(8deg) scale(.9) !important; }
  .profile-operator { left: 0; transform: scale(.9); }
}


/* ===========================================================================
   [P1] Sub 961px nu exista NICIO navigație.

   `.topnav{display:none}` la ≤960px, fără hamburger, fără alternativă. Cele
   șapte destinații erau inaccesibile pe telefon, pe tabletă și la zoom 400%
   (viewport logic 320px). DESIGN.md prescria „compact menu on mobile".

   Soluția e o bandă orizontală derulabilă, fără JavaScript și fără nicio
   schimbare de markup — deci fără risc de meniu pe jumătate funcțional în
   producție.
   ======================================================================== */
@media (max-width: 960px) {
  .topbar-in { flex-wrap: wrap; row-gap: 10px; }

  .topnav {
    display: flex;
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 8px;
    border-top: 1px solid var(--line);
    margin-top: 4px;
    /* marginile se estompează, ca să se vadă că banda continuă */
    mask-image: linear-gradient(90deg, transparent 0, #000 14px,
                                #000 calc(100% - 22px), transparent 100%);
  }
  .topnav::-webkit-scrollbar { display: none; }

  .topnav a {
    flex: 0 0 auto;
    padding: 10px 0;      /* ținta tactilă urcă la 40px înălțime */
    font-size: 14px;
    scroll-snap-align: start;
  }
  .topnav { scroll-snap-type: x proximity; }
}


/* ===========================================================================
   [P1 + forced-colors] `background-clip: text` pe 32 de elemente.

   Efectul metalic auriu se obținea cu un gradient decupat pe glife, animat la
   infinit. Trei consecințe măsurate:
     · în `forced-colors: active`, `-webkit-text-fill-color: transparent`
       supraviețuiește forțării culorii → TOATE metricile, numerele de secțiune
       și etichetele mono deveneau invizibile în modul High Contrast;
     · oprirea cea mai închisă a gradientului (#b47b00) traversa fiecare glifă
       la fiecare ciclu de 6 s → 3,39–4,16:1 pe secțiunile tint, sub 4,5;
     · 38 din cele 48 de bucle infinite erau chiar aceste gradiente.

   Auriul plat dă 7,93:1 pe --paper. Emfaza vine din greutate și mărime.
   ======================================================================== */
.kicker, .sec-no, .model-col h3 span, .method-k, .tl-k, .model-verbs,
.stamp span, .stamp b, .lg-metric, .faq-item summary::after,
.hero h1 em, .trust-k {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}
/* Contraste măsurate pe fundalurile reale:
   --gold-mid #d9ad3e → 8,54:1 pe --paper, 7,20:1 pe secțiunile tint.
   Peste ținta internă de 7:1, nu doar peste pragul AA de 4,5.
   Pe banda verde saturată (#005c37) același auriu dă 3,87 — acolo, și numai
   acolo, se folosește --gold-hi (7,16:1). */
.kicker, .sec-no, .method-k, .tl-k, .model-verbs,
.lg-metric, .stamp span, .stamp b { color: var(--gold-mid); }
.trust-k { color: var(--gold-hi); }
/* Titlul: accentul e purtat de italic + șina aurie de dedesubt, nu de culoarea
   glifelor. 15,83:1, față de 4,24:1 cât avea capătul violet al gradientului. */
.hero h1 em { color: var(--gold-hi); }

/* [P1] Contrast 1,34:1 — cel mai grav de pe sit.
   `.closing h2 em` era --gold-deep (#b47b00) pe gradientul verde animat al
   panoului de contact. Prag pentru text mare: 3,0.
   „Leave with a clearer path." / „une voie plus claire" / „klareren Weg". */
.closing h2 em {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background: none;
  font-style: italic;
}
/* Informație de contact, nu metadata de dovadă — auriul nu are voie pe ea. */
.closing-meta { color: var(--ink); }

@media (forced-colors: active) {
  .stamp, .stamp::after, .profile-ring { forced-color-adjust: none; }
  .cta-solid, .cta-paper { border: 1px solid; }
}


/* ===========================================================================
   [P2] 48 de animații infinite = 23% din firul principal în repaus.

   Măsurat pe 5 s fără interacțiune, 1440×900: RecalcStyleCount 299,
   TaskDuration 1,136 s. Toate animau `background-position` sau `box-shadow`,
   deci repictare continuă, necompozabilă. Pe telefon, drenaj de baterie pe o
   pagină statică.

   Blocul de mai sus a scos 38. Aici cad restul. Rămân 3: inelul portretului,
   pulsul de disponibilitate și impresia de ștampilă — toate cu sens.
   ======================================================================== */
.cta-solid, .cta-paper { animation: none !important; }
.cta-solid::after { animation: none !important; opacity: 0 !important; }
.trust, .closing { animation: none !important; background-position: 50% 50% !important; }

/* O suprafață care pulsează singură citește ca reclamă. Apăsarea, nu
   strălucirea, e feedback-ul unui instrument. PRODUCT.md: „quietly formidable". */
.cta-solid, .cta-paper, .cta-line {
  transition: transform .12s cubic-bezier(.16, 1, .3, 1),
              box-shadow .18s cubic-bezier(.16, 1, .3, 1),
              border-color .18s linear, color .18s linear;
}
.cta-solid:hover, .cta-paper:hover { transform: translateY(-1px); }
.cta-solid:active, .cta-paper:active { transform: translateY(1px) scale(.994); }

/* `stampIn` folosea cubic-bezier(.2,1.35,.4,1) — overshoot. O ștampilă nu
   ricoșează, se așază. */
@keyframes qpStampPress {
  from { opacity: 0; transform: translateX(-50%) rotate(3deg) scale(1.06); }
  to   { opacity: .85; transform: translateX(-50%) rotate(8deg) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-stamp.on .stamp {
    animation: qpStampPress .58s cubic-bezier(.16, 1, .3, 1) .35s both !important;
  }
}

/* [P3] `body::after` — feTurbulence grain la opacity .028. Nu se vede și costă
   un strat position:fixed cât viewportul. */
body::after { display: none !important; }


/* ===========================================================================
   [P3] FAQ: `<details>` nativ, animat în CSS.

   `script.js` făcea preventDefault() pe un control nativ, gestiona manual
   `d.open`, `panel.style.height` și două setTimeout. Cost măsurat: 23 de
   layout-uri și 4,4 ms per comutare, față de 1 layout pentru nativ. Plus un
   bug: starea `open` rămânea în urmă 330 ms la închidere, deci un cititor de
   ecran interogat în acel interval raporta panoul ca deschis.

   JS-ul e scos din script.js; aici e echivalentul declarativ.
   ======================================================================== */
.faq-list { interpolate-size: allow-keywords; }
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size .34s cubic-bezier(.16, 1, .3, 1),
              opacity .22s linear,
              content-visibility .34s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; opacity: 1; }
.faq-item summary { cursor: pointer; }


/* ===========================================================================
   [Golul mort] 44,6% din înălțimea paginii desktop nu avea niciun pixel de
   conținut; benzile goale de peste 100px însumau 1 508px = 1,4 ecrane.

   Nimic de mai jos nu atinge o propoziție. Tot câștigul e structural.
   ======================================================================== */

/* Ritmul de secțiune: 104/104 → 88/64. */
.sec { padding-top: var(--s-9); padding-bottom: var(--s-8); }
.sec-head { margin-bottom: var(--s-3); }
.sec-head + .sec-lede { margin-top: var(--s-3); }
.sec-lede { margin-bottom: var(--s-6); }

/* `trust` duplica patru din cinci etichete din `lg-tag`, la 220px distanță pe
   scroll. Nu se șterge din DOM (rămâne pentru cititorul de ecran și pentru
   cine nu ajunge la `evidence`), dar nu mai primește o bandă proprie. */
.trust { padding-block: 14px; }

/* `stack` consuma 340px de cadru pentru 340px de conținut real — raport 1:1.
   Densitatea de cerneală măsurată: 3,8% pe 764px. */
#stack { padding-top: var(--s-7); padding-bottom: var(--s-8); }
#stack .sec-lede { margin-bottom: var(--s-5); }

/* `engage`: cardurile aveau 24 de caractere pe rând într-o coloană de 260px.
   Fără fundal și fără bordură, aceleași patru intrări citesc ca listă. */
#engage { padding-top: var(--s-7); }
.engage-item { box-shadow: none; }

/* `profile`: cea mai densă secțiune (60,1% cerneală) — conținutul nu se
   atinge, doar interlinierea și pasul timeline-ului. */
.profile-copy p { line-height: 1.7; }
.timeline li + li { margin-top: var(--s-4); }

/* `faq`: 51,1% cerneală, dar 72,5% din rânduri goale — costul e în padding-ul
   fiecărui summary. */
.faq-item summary { padding-block: 14px; }


/* ===========================================================================
   [Golul mort] `evidence` — 176…260px structural goi, de șase ori, pe cea mai
   importantă secțiune a paginii.

   Grila era `190px 1fr 180px`. Eticheta de sector plutea lipită de marginea
   dreaptă, fără nimic care s-o lege de metrica pe care o califică — deși exact
   asta e relația: „42 min" PROVINE din „Funds Industry".
   O cifră fără proveniență e un adjectiv.
   ======================================================================== */
@media (min-width: 961px) {
  .ledger-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-areas: "metric body" "tag body";
    align-items: start;
    column-gap: var(--s-7);
    row-gap: 6px;
  }
  .ledger-row .lg-metric { grid-area: metric; }
  .ledger-row .lg-tag {
    grid-area: tag;
    text-align: left;
    align-self: start;
  }
  .ledger-row > *:not(.lg-metric):not(.lg-tag) { grid-area: body; }
}

/* Metrica și eticheta se mișcă împreună: sunt un singur fapt — cifra și locul
   din care vine. `:focus-within` adaugă paritatea de tastatură care lipsea. */
.ledger-row { box-shadow: none !important; }
.ledger-row .lg-metric, .ledger-row .lg-tag {
  transition: color .22s linear, transform .28s cubic-bezier(.16, 1, .3, 1);
}
.ledger-row:hover .lg-metric, .ledger-row:focus-within .lg-metric,
.ledger-row:hover .lg-tag,    .ledger-row:focus-within .lg-tag {
  transform: translateX(3px);
}
.ledger-row:hover .lg-tag, .ledger-row:focus-within .lg-tag { color: var(--gold-hi); }


/* ===========================================================================
   [Mobil] 14,8 ecrane, primul CTA la y=986 — sub pliu.

   Cauza pentru h1 la y=497: `.hero-stamp` (portret 180 + ștampilă 119 + margin
   = 288px) era PRIMUL în ordinea vizuală. Vizitatorul primea 288px de
   identitate grafică înainte de orice propoziție de poziționare.

   Portretul nu se șterge — e singurul semnal uman de pe o pagină care altfel
   citește ca un document. Se mută sub CTA. Atât.
   ======================================================================== */
@media (max-width: 960px) {
  .hero { padding-top: var(--s-6); }
  .hero-grid { display: flex; flex-direction: column; }
  .hero-grid > div:first-child { order: 1; }
  .hero-stamp { order: 2; margin: var(--s-6) auto 0; }
}

/* `hero-facts` pe 4 rânduri = 408px. Pe 2×2 = 208px. */
@media (max-width: 700px) {
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
}

@media (max-width: 560px) {
  html, body { max-width: 100%; }
  .topbar-in { gap: 8px; padding-left: 16px; padding-right: 16px; }
  .brand-stack, .hero-grid, .hero-grid > div { min-width: 0; max-width: 100%; }
  .topbar-cta, .hero-cta .cta, .hero-cta .cta-line { min-width: 0; max-width: 100%; }
  .topbar-cta { flex: 0 1 116px; width: 116px; overflow-wrap: anywhere; white-space: normal; }
  .hero h1, .hero .lead { width: auto !important; max-width: 100%; }
  .hero h1 { font-size: clamp(2.35rem, 10vw, 3rem); line-height: 1.08; }
  :lang(fr) .hero h1, :lang(de) .hero h1 { font-size: clamp(2.2rem, 9.5vw, 2.9rem); }
  .sec { padding-top: var(--s-7); padding-bottom: var(--s-7); }
}


/* ===========================================================================
   Focus și navigație — păstrate din stratul precedent.
   ======================================================================== */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.lang-nav a:focus-visible, .topnav a:focus-visible,
.cta:focus-visible, .faq-item summary:focus-visible { color: var(--gold-hi); }

.topnav a.is-current { color: var(--gold-hi); }
.topnav a.is-current::after { right: 0; }

/* Traducerile nu mai rup cuvinte pe lățimi mici. */
.hero h1, .lead, .sec-head h2, .sec-lede, .cta, .engage-item,
.faq-item summary, .profile-copy, .timeline, .stack-list {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.hero h1, .lead, .cta, .faq-item summary { max-width: 100%; }


/* ===========================================================================
   „Reduce" înseamnă starea finală fără drum, nu ștergerea elementului.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .rv, html.js .rv.on,
  html.js .hero h1.rv, html.js .hero h1.rv.on,
  html.js .hero-facts > div, html.js .trust-in > span,
  html.js .faq-list > .faq-item, html.js .timeline li,
  html.js .stack-list > div, html.js .hero-stamp .stamp {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }
  html.js .hero-stamp .stamp,
  html.js .hero-stamp.on .stamp {
    opacity: .85;
    transform: translateX(-50%) rotate(8deg) !important;
  }
  .faq-item::details-content { transition: none; }
  .cta-solid, .cta-paper, .cta-line,
  .ledger-row .lg-metric, .ledger-row .lg-tag { transition: none; }
  .topnav a.is-current::after { transition: none; }
  .profile-ring, .stamp::after { animation: none !important; }
}