/* Automotive Solutions ALN — v1
   Sistem: design/DESIGN.md  ·  Copy: design/COPY-RO.md */

:root {
  --bg:        #0D1114;
  --bg-2:      #141A20;
  --light:     #EAF1F5;
  --text:      #C9D4DB;
  --muted:     #7D8B95;
  --line:      #1E262D;
  --line-2:    #2A343C;
  --oil:       #E2A144;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --rail: 96px;              /* lățimea culoarului din stânga */
  --pad: clamp(20px, 5vw, 76px);
  --maxw: 1360px;

  /* Metricile titlului, scoase în variabile fiindcă le citesc DOUĂ locuri: titlul însuși și
     banda întunecată a vălului din hero, care trebuie să se termine acolo unde se poate
     termina coloana de titlu. `ch` înseamnă „lățimea lui 0 în fontul ELEMENTULUI", deci cele
     două locuri au nevoie de exact același font ca să însemne același lucru — vezi regula
     comună `:where(.hero h1), .hero__veil`. */
  --h1-size: clamp(2.7rem, 7.4vw, 6.1rem);
  --h1-wght: 640;
  --h1-vf: "wdth" 112, "wght" 640;
  --hero-col: 13ch;          /* lățimea MAXIMĂ a coloanei de titlu din hero */
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: var(--h1-vf);
  font-weight: var(--h1-wght);
  letter-spacing: -0.022em;
  line-height: 0.98;
  color: var(--light);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--h1-size); line-height: 0.94; }
h2 { font-size: clamp(1.9rem, 4.1vw, 3.35rem); }
h3 { font-size: clamp(1.12rem, 1.55vw, 1.34rem); font-variation-settings: "wdth" 106, "wght" 600; letter-spacing: -0.012em; }

/* `pretty` interzice ultimul rând cu un singur cuvânt (orfanul tipografic). Lucian l-a
   văzut pe nota de sub butonul formularului — „acceptată." singură pe rândul doi la
   1280px — dar defectul e al clasei, nu al blocului: leadul din hero lasă „spate."
   singur la 390px, la fel. Deci regula stă pe TOATE paragrafele, o singură dată.
   Nu e un plafon ales de noi: nu fixăm un număr de cuvinte sau de caractere, browserul
   rearanjează ultimele două rânduri. Verificat pe seria de 14 lățimi, nu pe una. */
p { margin: 0 0 1.05em; max-width: 62ch; text-wrap: pretty; }
a { color: inherit; }

::selection { background: var(--oil); color: #14100A; }

:focus-visible {
  outline: 2px solid var(--oil);
  outline-offset: 3px;
}

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }

/* ============ culoarul: linia de lumină + nodul ============ */

.rail {
  position: fixed;
  left: clamp(14px, 3.4vw, 46px);
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent, var(--line-2) 8%, var(--line-2) 92%, transparent);
  z-index: 3;
  pointer-events: none;
}
.rail__node {
  position: absolute;
  left: 50%; top: 0;
  width: 7px; height: 7px;
  margin-left: -3px; margin-top: -3px;
  border-radius: 50%;
  background: var(--oil);
  box-shadow: 0 0 12px 2px rgba(226,161,68,0.55), 0 0 34px 6px rgba(226,161,68,0.16);
  will-change: transform;
}
@media (max-width: 720px) { .rail { display: none; } }

/* ============ antet ============ */

.hdr {
  position: fixed; inset: 0 0 auto 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 16px var(--pad);
  background: linear-gradient(to bottom, rgba(13,17,20,0.94), rgba(13,17,20,0));
  backdrop-filter: blur(3px);
}
/* Logo-ul clientului, primit 5 sep 2026. Raport 3.03:1, deci lățimea e cea care se
   reglează; înălțimea vine din ea. 168px e minimul la care rândul „SOLUTIONS" încă se
   citește — sub atât devine o dungă aurie. `min-height: 44px` pe legătură rămâne, e
   țintă de atins pe telefon. */
.hdr__mark {
  display: flex; align-items: center;
  flex-shrink: 0;              /* altfel antetul îl strivea la 64px pe telefon */
  text-decoration: none;
}
.hdr__mark img { width: 168px; max-width: none; height: auto; }
@media (max-width: 420px) { .hdr__mark img { width: 132px; } }
.hdr__right { display: flex; align-items: center; gap: 22px; }
.hdr__tel {
  font-size: 0.95rem; font-weight: 500;
  color: var(--text); text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .18s, color .18s;
}
.hdr__tel:hover { color: var(--light); border-color: var(--oil); }
@media (max-width: 520px) {
  .hdr { padding-block: 13px; }
  .btn--sm { padding: 9px 15px; font-size: 0.82rem; }
}

/* ============ butoane ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 0.94rem; font-weight: 600; letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--solid { background: var(--light); color: #0B0F12; }
.btn--solid:hover { background: #fff; }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--light); color: var(--light); }
.btn--sm { padding: 10px 19px; font-size: 0.86rem; }
.btn { white-space: nowrap; }

/* ============ hero ============ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 132px 0 64px;
  overflow: hidden;
}
/* canvas e element înlocuit: `inset:0` NU îl întinde, are nevoie de dimensiuni explicite */
.hero__canvas {
  position: absolute;
  top: 0; left: 42%;
  width: 58%; height: 100%;
  z-index: 0;
  opacity: 0.95;
  /* motorul iese din întuneric, nu stă desenat pe el */
  -webkit-mask-image: radial-gradient(ellipse 62% 54% at 50% 50%, #000 38%, rgba(0,0,0,.55) 68%, transparent 88%);
          mask-image: radial-gradient(ellipse 62% 54% at 50% 50%, #000 38%, rgba(0,0,0,.55) 68%, transparent 88%);
}
/* Coloana de titlu și banda întunecată a vălului se măsoară în ACELAȘI `ch`: unitatea
   înseamnă „lățimea lui 0 în fontul elementului", deci vălul primește exact metricile lui
   h1. Stau într-o singură regulă tocmai ca să nu poată fi schimbate una fără cealaltă.
   Vălul n-are text; fontul de aici e doar unitatea de măsură.
   `:where()` pe titlu îi ține specificitatea la zero: regula asta e o egalizare de unități,
   nu o decizie de stil, și n-are voie să calce peste un viitor `h1 {}` dintr-un media query.
   Vălul, care n-ar primi altfel nimic, îl primește la specificitatea lui normală. */
:where(.hero h1), .hero__veil {
  font-family: var(--display); font-size: var(--h1-size);
  font-weight: var(--h1-wght); font-variation-settings: var(--h1-vf);
}
/* ============ vălul din hero pe desktop: banda întunecată ține de COLOANA DE TEXT ============
   ---- ISTORIC: regula de până pe 7 sep 2026, păstrată cu motivul ei ----
   Era: linear-gradient(90deg, var(--bg) 30%, rgba(13,17,20,0.82) 46%,
                               rgba(13,17,20,0.15) 62%, transparent 72%)
   cu motivul „textul stă mereu pe negru curat, indiferent unde ajunge un piston".
   Motivul era bun, opririle nu: erau procente din LĂȚIMEA FERESTREI, adică un pariu pe cât
   de lung e titlul de azi. Titlul are `max-width: var(--hero-col)` = 13ch, iar 13ch la
   1280px înseamnă 824px, deci coloana se poate întinde până la 69,4% din fereastră — cu mult
   dincolo de 62%, unde vălul era deja la alfa 0,15. Ultimele litere din „motoare" cădeau
   peste conturul luminos al unui cilindru.

   ---- 7 sep 2026: ce s-a măsurat și ce s-a schimbat. Cine a ales numerele: eu, pe
        măsurătoare, cu `build/masoara-contrastul.mjs` trecut pe glife. ----
   Defectul, măsurat la 1280px pe 8 cadre de animație, PE LITERE (nu pe cutie): 165 de pixeli
   de glifă sub 4,5 și 28 sub 3,0, toți între x=697 și x=800, adică 54,5%–62,5% din fereastră.
   Cel mai prost: fundal 189,196,200 sub o literă albă #EAF1F5 → contrast 1,55. Nu e o
   coliziune imaginară de cutie: sunt litere peste linia unui cilindru.

   (1) Opririle nu mai sunt procente din fereastră, ci se leagă de unde POATE ajunge coloana
       de text: `--hero-text-end` = marginea din stânga a coloanei (centrarea lui
       `.hero__inner` + `--pad`) + `--hero-col`. Dacă textul se schimbă, banda nu se mișcă;
       dacă se schimbă LĂȚIMEA coloanei (13ch), se mișcă amândouă, dintr-un singur loc.
       Titlul nu poate depăși 13ch — `max-width` e un plafon, nu o dorință — deci acoperirea
       nu depinde de lungimea copy-ului de azi.
   (2) Alfa 0,62 pe toată banda. Numărul NU e ales pe ochi și nici pe cadrul de azi: cu vălul
       scos, masca scoasă și pânza la opacitate 1, cel mai luminos pixel pe care motorul îl
       poate desena sub cutia titlului e 233,240,244 (capul de bielă), identic la 1280 și la
       1680, pe 14 cadre. Compus peste EL, alfa 0,62 lasă la ecran 97,99,101 → contrast 5,28
       cu #EAF1F5. Pragul lui `h1` e 3,0 (text mare, 95px), deci marja e 2,3 — și rămâne peste
       4,5 chiar dacă cineva pune cândva text MIC în coloana asta. Alternativele măsurate pe
       același pixel: 0,50 → 3,56 · 0,55 → 4,18 · 0,58 → 4,61 · 0,66 → 6,06. Sub 0,58 marja
       s-ar fi sprijinit pe presupunerea că motorul nu desenează niciodată mai alb de atât.
   (3) Marja de 1,5rem la capătul benzii: `--pad` e în `vw` (cu bară de derulare cu tot), iar
       `%`-ul gradientului e din lățimea ELEMENTULUI (fără bară). Diferența e de ordinul a
       15px; 24px o acoperă cu totul. E o marjă de rotunjire aleasă de mine, nu o calibrare
       vizuală.
   (4) Degradeul de ieșire, 12% din lățime: e singurul număr pur vizual de aici, ales de mine
       ca marginea benzii să nu se vadă ca o dungă. Varianta scurtă (7%) a fost randată și
       comparată: schimbă doar fâșia 913–1065px la 1280 și readuce ~4% din luminozitatea
       medie a ei — prea puțin ca să merite o margine mai tăioasă. Capturile ei sunt în
       `hero-desktop/variante-incercate/` lângă celelalte.
   (5) Ce se PIERDE, măsurat pe capturi, nu spus din burtă (1280px, pixelii peste 50/255 din
       banda motorului): imediat la dreapta titlului (760–900px) rămân 63% din pixelii aprinși
       și luminozitatea lor medie scade 146 → 100; pe fâșia următoare (900–1050px) rămân 80%,
       126 → 85; de la ~1050px încolo NIMIC nu se schimbă (115 → 115). În ochi: primele două
       ansambluri de cilindri se sting bine, al treilea se stinge pe jumătate, al patrulea și
       arborele din dreapta rămân neatinse. Compromisul îl ADJUDECĂ Lucian, cu capturile
       înainte/după la 1280 și 1680 din `build/verificari-2026-09-07/hero-desktop/`.
       De ce nu o bandă limitată și pe VERTICALĂ, doar în dreptul titlului (ar fi cruțat
       bielele de jos): înălțimea ei ar depinde de câte RÂNDURI are titlul, adică exact de
       lungimea copy-ului de care trebuia să scăpăm. Lățimea are un plafon scris în CSS
       (`--hero-col`), înălțimea nu are.
   Măsurat DUPĂ, pe glife, minim pe 6 cadre: `h1` 1,55 → 6,93 la 1280px și 2,32 → 7,15 la
   1680px (prag 3,0); `.hero__lead` rămâne 12,4 (prag 4,5). Fracția efectivă a pânzei la
   1280px: p50 23,9 → 14,1 · p90 87,5 → 61,2 · max 94,9 neschimbat (vârful e în dreapta, unde
   vălul nu s-a mișcat). Mobilul (≤1080px) nu e atins, și nu doar fiindcă media query-ul de
   mai jos înlocuiește tot fundalul: randarea paginii ÎNTREGI înainte/după e identică pixel cu
   pixel la 390px (390×14378) și la 860px (860×10717), diferență zero pe toate canalele. */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  --hero-text-end: calc(max((100% - var(--maxw)) / 2, 0px) + var(--pad) + var(--hero-col) + 1.5rem);
  /* Rezervă pentru un parser care nu digeră `max()` într-o oprire de degrade. Fără ea, dacă
     a doua declarație pică la parsare, vălul rămâne FĂRĂ fundal — adică exact defectul pe
     care îl reparăm, litere peste un motor luminos. Procentele fixe de aici acoperă coloana
     la toate lățimile măsurate (capătul ei cade între 62,7% și 71,6% din fereastră, marja
     inclusă); stinge motorul ceva mai mult pe ecrane late, dar e o plasă, nu calea normală.
     Chromium ia a doua declarație — verificat: randarea e identică pixel cu pixel cu cea de
     dinaintea adăugării plasei. */
  background: linear-gradient(90deg,
    var(--bg) 30%, rgba(13,17,20,0.82) 46%, rgba(13,17,20,0.62) 73%, transparent 85%);
  background: linear-gradient(90deg,
    var(--bg) 30%,
    rgba(13,17,20,0.82) 46%,
    rgba(13,17,20,0.62) var(--hero-text-end),
    transparent calc(var(--hero-text-end) + 12%));
}
/* ============ motorul din hero pe ecran îngust ============
   Pe desktop textul stă în stânga și motorul în dreapta, deci vălul cade LATERAL și pânza
   poate sta la 0.95. Pe telefon textul ocupă toată lățimea și cade exact peste motor, deci
   vălul devine vertical și pânza se stinge. Motivul ăsta nu se schimbă.

   ---- ISTORIC: regula de până pe 7 sep 2026, păstrată cu motivul ei ----
   Era:
       .hero__canvas { left: 0; width: 100%; opacity: 0.34 }
       .hero__veil   { linear-gradient(180deg, rgba(13,17,20,0.55), rgba(13,17,20,0.8)) }
       masca rămânea cea de pe desktop: ellipse 62% 54%
   Motivul scris atunci era „textul stă mereu pe negru curat, indiferent unde ajunge un
   piston" — observație corectă, calibrare greșită. Cele trei atenuări se ÎNMULȚESC, iar
   nimeni nu măsurase produsul: 0,34 × (1 − 0,55) = 15,3% sus și 0,34 × (1 − 0,80) = 6,8%
   jos, iar peste ele mai vine masca radială și `.hero__scrim`.

   De ce a fost înlocuită (7 sep 2026). Constatarea clientului: „nici motorul din hero nu se
   vede bine în mobile". Măsurat cu `build/masoara-contrastul.mjs` la 390px, fracția efectivă
   pe rândurile 0/25/50/75/100% din pânză era 0 · 11,8 · 11,4 · 4,7 · 0 (p50 3,9 · p90 11,4 ·
   max 13,3). Chiar și cel mai luminos punct de pe toată pânza livra 13,3% dintr-un pixel
   opac — un desen de linie la 13% e o fantomă. M-am uitat la captura de la 390px: se
   ghiceau niște contururi, nu se citea un mecanism.

   ---- 7 sep 2026: ce s-a măsurat și ce s-a schimbat ----
   Cine a ales numerele de mai jos și după ce: eu, pe măsurătoarea asta, nu pe ochi.

   (1) Plafonul. Ipoteza de la stații (unde limitatorul era CULOAREA unui text, `--muted`)
       a fost verificată aici, nu presupusă — și nu se aplică. Cu pânza la opacitate 1, fără
       mască, fără văl, fără scrim, pe 12 cadre de animație la 390px, cel mai luminos pixel
       de sub fiecare cutie de text și fracția maximă pe care o suportă la 4,5:1:
            `h1`          `--light` #EAF1F5   pixel 230,237,240  →  plafon 42,4%
            `.hero__lead` `--text`  #C9D4DB   pixel 232,240,244  →  plafon 33,6%
            `.hero__cta`  butoanele — motorul nu ajunge sub ele (pixel maxim 42,52,60)
       Deci aici chiar vălul și opacitatea erau limitatorul, nu culoarea textului: invers
       decât la stații. Textul din hero NU se atinge.

   (2) Fracția țintă: 0,62 × (1 − 0,55) = 27,9% nominal, 28,2% măsurat la vârf.
       De ce ne oprim acolo și nu mai sus: plafonul dur e 33,6% (`.hero__lead` la exact
       4,5:1). La 27,9% leadul măsoară 5,4–5,6, adică ~1,0 marjă; la 31% ar rămâne ~0,5, iar
       animația motorului mișcă singură rezultatul cu ±0,2 de la o rulare la alta — marja
       reală ar scădea spre 0,3, exact cât s-a refuzat la stații pe 6 sep. Nu ne oprim la
       24,8% ca la stații fiindcă aici e desen de LINIE, nu fotografie: semnalul e pe câțiva
       la sută din pixeli, restul e gol, deci aceeași fracție se vede mai puțin.

   (3) Vălul devine PLAT. Rampa 0,55→0,80 întuneca tocmai partea de jos a motorului
       (arborele cotit și bielele, singurele piese care se mișcă vizibil), iar racordul cu
       pagina de dedesubt îl face oricum `.hero__scrim`, care e un strat separat. Plat, vălul
       lasă și arcul (`.hero__arc`, sub văl) la fel sus și jos, nu stins doar la bază.

   (4) Masca se lărgește pe orizontală, 62% → 76%, DOAR pe ecran îngust. Motorul desenat de
       `engine.js` se întinde la 390px pe ±133px față de centru, iar miezul plat al măștii de
       62% ajungea doar la ±92px: cei doi cilindri exteriori stăteau în cădere, la ~75–90%
       din restul. La 76%, miezul plat ajunge la ±113px și îi cuprinde. Costul în contrast e
       ZERO și asta e măsurat, nu dedus: pixelul cel mai prost de sub lead era deja într-un
       loc cu masca = 1 (cilindrii din mijloc), deci lărgirea nu-l poate face mai luminos —
       leadul a măsurat 5,49/5,52 cu masca lărgită față de 5,43/5,61 fără, adică diferență în
       interiorul zgomotului de animație. Ce se câștigă e ARIE: p50 de la 7,8% la 11,4%
       (măsurat cu textul vizibil, ca să fie comparabile între ele). Căderea pe verticală
       rămâne neatinsă, deci motorul tot „iese din întuneric".

   Comportamentul măsurat DUPĂ schimbare, la 390px:
       fracția efectivă pe rândurile 0/25/50/75/100%:  0 · 25,1 · 28,2 · 13,7 · 0
         (p50 14,5 · p90 27,8 · max 28,2 — înainte: p50 3,9 · p90 11,4 · max 13,3)
       contrast în hero (minim pe 6 cadre de animație): `h1` 7,53 · `.hero__lead` 5,49 ·
         butoanele 8,41 și 16,86 — pragul e 4,5, deci leadul are ~1,0 marjă
   Desktopul (≥1081px) nu e atins de niciuna dintre cele patru linii de mai jos. */
@media (max-width: 1080px) {
  .hero__canvas { left: 0; width: 100%; opacity: 0.62;
    -webkit-mask-image: radial-gradient(ellipse 76% 54% at 50% 50%, #000 38%, rgba(0,0,0,.55) 68%, transparent 88%);
            mask-image: radial-gradient(ellipse 76% 54% at 50% 50%, #000 38%, rgba(0,0,0,.55) 68%, transparent 88%); }
  .hero__veil { background: linear-gradient(180deg, rgba(13,17,20,0.55), rgba(13,17,20,0.55)); }
}
.hero__arc {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(148vh, 128vw);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: .8;
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  padding-inline: var(--pad);
}
.hero__eyebrow {
  font-size: 0.87rem;
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 44ch;
}
/* 13ch, dar scris o singură dată: `--hero-col` e citit și de banda întunecată a vălului.
   Dacă îl schimbi aici, se mută și vălul — asta e toată ideea. */
.hero h1 { max-width: var(--hero-col); }
.hero__lead {
  margin: 26px 0 34px;
  font-size: clamp(1.02rem, 1.32vw, 1.15rem);
  color: var(--text);
  max-width: 50ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__scrim {
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to bottom, transparent, var(--bg) 88%);
  z-index: 1; pointer-events: none;
}

/* ============ banda de mărci ============ */

.marquee {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: clamp(54px, 7.5vw, 108px);
  width: max-content;
  animation: slide 74s linear infinite;
}
.marquee__track > * { flex: none; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
/* --shift vine din JS: lățimea grupului + un gap. -50% sare jumătate de gap. */
@keyframes slide { to { transform: translateX(calc(-1 * var(--shift, 50%))); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}
.brand {
  display: flex; align-items: center;
  color: var(--text);
  opacity: .58;
  transition: opacity .25s, color .25s;
}
.marquee:hover .brand { opacity: .3; }
.marquee .brand:hover { opacity: 1; color: var(--light); }
@media (max-width: 620px) { .brand svg { height: 36px; width: 36px; } }
.brand svg { height: 44px; width: 44px; fill: currentColor; stroke: none; }

/* ============ secțiuni ============ */

.sec { padding: clamp(80px, 11vh, 148px) 0; position: relative; }
.sec--tight { padding-block: clamp(64px, 8vh, 104px); }

.sec__head { margin-bottom: clamp(38px, 5vw, 62px); max-width: 46ch; }
.sec__head p { color: var(--muted); margin-top: 20px; }

/* Capul de secțiune e desenat pentru UN paragraf scurt: 46ch, lipit de stânga, spațiu
   liber în dreapta (DESIGN.md, „culoarul"). „Service-ul nostru" a primit al doilea
   paragraf pe 6 sep și capul a devenit o coloană de 520×394px în stânga, cu jumătatea
   dreaptă goală — deasupra unei grile de poze late cât toată pagina. Nu secțiunea e
   defectă, forma e: regula prinde ORICE cap cu două sau mai multe paragrafe, deci și
   pe următorul care mai crește. Cele cinci capete cu un singur paragraf rămân neatinse
   (verificat: numai acesta are `p + p`).
   Pragul 1000px e ales aici: sub el cele două coloane cad sub 45 de caractere pe rând
   și măsura devine mai proastă decât coloana înaltă pe care o înlocuiesc. */
@media (min-width: 1000px) {
  .sec__head:has(p + p) {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(38px, 5vw, 76px);
  }
  .sec__head:has(p + p) > h2 { grid-column: 1 / -1; max-width: 46ch; }
}

/* rigla care se trage lateral când secțiunea se aprinde */
.rule {
  height: 1px; background: var(--line-2);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
  margin-bottom: 34px;
}
.js .rule { transform: scaleX(0); }
.is-lit .rule { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .rule, .js .rule { transform: scaleX(1); transition: none; } }

.label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* ============ intro ============ */

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 96px);
}
.intro__body { font-size: clamp(1.04rem, 1.4vw, 1.2rem); }
.intro__body p:last-child { margin-bottom: 0; }
.intro__fig { margin: 0; }
.intro__fig img { width: 100%; height: auto; filter: contrast(1.02); }
/* `figcaption` scoasă la cererea clientului (6 sep 2026, runda 2): spunea ce se
   vede deja în poză. Regula de mai jos a rămas fără element de folosit — scoasă
   odată cu textul, nu lăsată cod mort. */
/* Textul din intro a ajuns la trei paragrafe pe 6 sep. Cu `align-items: end` poza se
   agăța de baza textului și lăsa un gol deasupra ei: 76px la 1280, 92px la 1680 și
   177px la 950 — cu cât coloana de text e mai îngustă, cu atât textul e mai înalt și
   golul mai mare. Golul nu se închide lărgind poza: ca să ajungă singură la înălțimea
   textului i-ar trebui 635px la 1280, iar textul ar rămâne cu 421px, sub măsura minimă.
   Deci poza umple coloana pe verticală (`stretch` + `cover`), cu marginea de sus ȘI cea
   de jos aliniate la text.
   Pragul de colaps urcă de la 900px la 1080px: sub 1080 cutia pozei devine mai înaltă
   decât lată (la 950px ar fi 371×385) și `cover` ar tăia lateral peste jumătate din
   cadru — adică exact mașinile din descrierea `alt`. Peste 1081px cutia rămâne peisaj
   (raport 1,27 la 1081px, 1,40 la 1280px) și decupajul ia doar marginile. */
@media (min-width: 1081px) {
  .intro__grid { align-items: stretch; }
  .intro__fig img { height: 100%; object-fit: cover; object-position: center; }
}
@media (max-width: 1080px) { .intro__grid { grid-template-columns: 1fr; } }

/* ============ servicii: stații ============ */

.stations { border-top: 1px solid var(--line); }
.station {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.station__media {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity .8s ease;
  pointer-events: none;
}
.station__media video, .station__media img { width: 100%; height: 100%; object-fit: cover; }
.station__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 18%, rgba(13,17,20,0.72) 58%, rgba(13,17,20,0.42));
}
.station.is-lit .station__media { opacity: .42; }

/* diagrama fiecărui serviciu, în același limbaj de linie ca motorul din hero.
   Stă unde va sta videoul; când videoul se încarcă, se retrage. */
.station__art {
  position: absolute;
  right: clamp(-20px, 2vw, 46px);
  top: 50%; translate: 0 -50%;
  width: clamp(150px, 21vw, 268px);
  z-index: 0;
  color: var(--light);
  transition: opacity 1s ease .12s, translate 1s cubic-bezier(.16,1,.3,1) .12s;
}
.station__art { opacity: .17; }
.js .station__art { opacity: 0; }
.js .station.is-lit .station__art { opacity: .17; }
.station.has-video .station__art { opacity: 0; }
.station__art svg {
  width: 100%; height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 1180px) { .station__art { display: none; } }
@media (prefers-reduced-motion: reduce) { .station__art { transition: none; } }

.station__inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(38px, 5vw, 62px) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 4vw, 66px);
  align-items: start;
}
.station__lead { margin: 14px 0 0; color: var(--muted); }
/* Al doilea paragraf al unei stații (completările de 6 sep pe Revizii și
   Diagnoză): cârlig cu greutate proprie, nu un al doilea `.station__lead`.
   Folosește `--text`, nu `--muted` — la stații `--text` are marjă de zece ori
   mai mare peste media video (măsurat, vezi comentariul de la 860px mai jos),
   iar textul de aici e mai lung decât leadul și cade mai jos în zona vălului. */
.station__hook { margin: 14px 0 0; color: var(--text); font-size: 1.02rem; }
.station__hook strong { color: var(--light); font-weight: 600; }
.station__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 3px 30px;
  font-size: 0.96rem;
}
.station__list li {
  padding: 7px 0 7px 20px;
  position: relative;
  color: var(--text);
}
.station__list li::before {
  content: ""; position: absolute; left: 0; top: 1.02em;
  width: 8px; height: 1px; background: var(--line-2);
  transition: background-color .3s, width .3s;
}
.station.is-lit .station__list li::before { background: var(--oil); }
@media (min-width: 1181px) {
  /* lăsăm loc diagramei din dreapta, ca textul să nu treacă peste ea */
  .station__inner { padding-right: clamp(290px, 25vw, 420px); }
}
/* Banda 861–1180px: nimeni n-o măsurase. Auditul mobil s-a oprit la 768, desktopul
   s-a verificat lat. Aici stațiile sunt deja pe două coloane, dar încă fără rezerva
   din dreapta de la 1181px — deci `.station__lead` ajunge în partea luminoasă a
   vălului orizontal și pică la 4,42:1, sub prag. Defect vechi, prins de
   `build/masoara-contrastul.mjs` pe 4 sep. Mutăm opririle vălului spre dreapta. */
@media (min-width: 861px) and (max-width: 1180px) {
  .station .station__media::after {
    background: linear-gradient(90deg,
      var(--bg) 30%, rgba(13,17,20,0.82) 68%, rgba(13,17,20,0.50) 100%);
  }
}
@media (max-width: 860px) {
  .station__inner { grid-template-columns: 1fr; }
}

/* ============ tesla: nota onestă ============ */

.honest {
  border: 1px solid var(--line);
  border-left: 2px solid var(--oil);
  padding: clamp(28px, 4vw, 46px);
  background:
    linear-gradient(to right, rgba(226,161,68,0.045), transparent 42%);
  max-width: 78ch;
}
.honest h2 { font-size: clamp(1.55rem, 2.9vw, 2.3rem); margin-bottom: 22px; }
.honest p:last-child { margin-bottom: 0; }

/* ============ proces (o secvență reală, deci numerotată) ============ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step { background: var(--bg); padding: clamp(24px, 2.6vw, 34px); }
.step__n {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 500;
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 26px;
  display: block;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 0.96rem; margin: 0; }

/* ============ dovezi ============ */

/* Grila trece de la 4 la 3 carduri (6 sep 2026, "5 specialiști în echipă" iese).
   Cu `auto-fit` și 3 elemente, măsurat cu Playwright pe 320→900px: sub ~390px
   intră pe o coloană (bun), dar 390–570px cădea 2+1 — un card orfan, izolat
   sub primele două. Peste 590px auto-fit dădea deja 3 pe un rând.
   Fix: coloană unică sub prag, 3 coloane egale peste — fără fereastra 2+1.
   Pragul 590px e cel măsurat, nu ghicit; rotunjit la 600px ca reper ușor de ținut minte. */
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 52px);
  /* Banda de cifre stătea în secțiunea ei, între două `sec--tight`: 144px de gol până
     la „Service-ul nostru" (72 jos + 72 sus), pentru un rând înalt de 123px. Cu patru
     carduri banda era mai înaltă și raportul se ținea; cu trei nu se mai ține.
     Secțiunea s-a unit cu cea de dedesubt (aceeași temă: 6 posturi de lucru — și hala
     care le arată), deci golul e acum unul singur, scris aici. */
  margin-bottom: clamp(56px, 6vw, 88px);
}
@media (min-width: 600px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
}
.fact__n {
  font-family: var(--display);
  font-variation-settings: "wdth" 116, "wght" 620;
  font-size: clamp(3rem, 5.6vw, 4.6rem);
  line-height: 1;
  color: var(--light);
  letter-spacing: -0.03em;
}
/* Aliniere OPTICĂ, nu tehnică. Cifrele pornesc deja din același x ca eticheta; la peste
   70px corpul propriu al glifei lasă o margine de cerneală pe care ochiul o citește ca
   decalaj spre dreapta. Se compensează pe cifră, nu mutând eticheta.
   Valorile NU sunt alese de noi: sunt diferența MĂSURATĂ, în pixeli, între prima coloană
   aprinsă a cifrei și prima coloană aprinsă a etichetei de sub ea (captură fullPage la
   scale 2, 1280px, prag de luminanță 60/255 — vezi raportul de polish), împărțită la
   corpul cifrei ca să scaleze cu `clamp`. Fiecare cifră de start are valoarea ei: o
   compensare unică ar strâmba celelalte două. Selectorul e pe glifa de start, nu pe
   poziția în grilă, ca să țină și dacă se schimbă ordinea sau numărul cardurilor. */
.fact__n[data-cifra^="2"] { text-indent: -0.042em; }   /* „20": 3,00px la corp 71,68px */
.fact__n[data-cifra^="6"] { text-indent: -0.035em; }   /* „6" : 2,50px la corp 71,68px */
.fact__n[data-cifra^="3"] { text-indent: -0.028em; }   /* „39": 2,00px la corp 71,68px */
.fact__l { color: var(--muted); font-size: 0.92rem; margin-top: 12px; max-width: 24ch; }

/* ============ atelier ============ */

/* Rândul de poze de interior. Înălțimea NU mai vine din poze, vine din grilă.
   Înainte: poza lată (`hala-wide`, raport 1,575) stătea singură în coloana largă, iar
   coloana îngustă avea stiva cu poza-portret a Mercedesului (raport 0,749). Portretul
   dicta înălțimea rândului — 946px la 1280 — și `cover` întindea poza lată într-o cutie
   de 671×946, adică raport 0,71: din ea se vedea aproape numai podeaua. Cel mai mare
   element de pe pagină arăta a decupaj greșit.
   Acum: portretul stă singur în coloana îngustă (acolo raportul lui e aproape nativ) și
   cele două poze late se stivuiesc în coloana largă — aceeași regulă pe care ledgerul o
   scrisese deja pentru `.shop--ext`: raportul cel mai lat în coloana cea mai lată.
   Raportul 2,097 impus celor două poze stivuite nu e ales pe ghicite, e dedus: ca stiva
   din coloana largă (1,4k) să iasă exact cât portretul din coloana îngustă (k), trebuie
   2 × (1,4k / r) = k / 0,749, adică r = 2,8 × 0,749 = 2,097. Independent de lățimea
   ecranului. Portretul rămâne astfel practic nedecupat, iar pozele late pierd 25% pe
   verticală, din tavan și din podea — exact ce prisosea.
   Cusătura verticală rămâne la 1.4fr/1fr, deci se aliniază în continuare cu rândul de
   poze de exterior de dedesubt. */
.shop {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3px;
}
.shop img { width: 100%; height: 100%; object-fit: cover; }
.shop__stack { display: grid; gap: 3px; }
.shop__stack img { height: auto; aspect-ratio: 2.097; }
@media (max-width: 820px) {
  /* pe o coloană nu mai există stivă lângă portret, deci nici raport de potrivit:
     pozele late se întorc la cadrul lor întreg */
  .shop { grid-template-columns: 1fr; }
  .shop img { height: auto; }
  .shop__stack img { aspect-ratio: auto; }
}

/* Al doilea rând de imagini din aceeași secțiune „Service-ul nostru": pozele
   exterioare ale locului (ansamblu + fațadă), de la Alin. ACEEAȘI grilă ca `.shop`
   — 1.4fr/1fr, gap 3px, prag de colaps 820px — ca să se citească drept aceeași
   familie și ca să cadă cusătura verticală în același loc pe ecran, în ambele
   rânduri. `<figure>` are `margin: 1em 40px` din foaia de stil a browserului;
   fără resetul de mai jos, rândul se retrage 40px de fiecare parte față de
   `.shop` de deasupra, care se întinde pe toată lățimea `.wrap`. */
.shop--ext {
  margin: 3px 0 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3px;
  align-items: stretch;
}
.shop--ext img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .shop--ext { grid-template-columns: 1fr; } }

/* ============ faq ============ */

/* `max-width: 92ch` oprea liniile FAQ-ului la 1040px, cu 112px înainte de marginea
   dreaptă a grilei de recenzii de deasupra și a celei de contact de dedesubt. Pe o
   pagină în care toate celelalte blocuri se termină la marginea `.wrap`, blocul ăsta
   se citea ca retras din greșeală. Măsura de citire o ține răspunsul (`.faq__a p`,
   76ch), nu chenarul; întrebările sunt de sub 40 de caractere, deci nu au ce pierde. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--display);
  font-variation-settings: "wdth" 106, "wght" 580;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--light);
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 13px; height: 1px; background: var(--muted);
  transition: transform .25s;
}
.faq summary::before {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 1px; height: 13px; background: var(--muted);
  margin-top: -6px;
  transition: transform .25s, opacity .25s;
}
.faq details[open] summary::before { opacity: 0; transform: rotate(90deg); }
.faq details[open] summary { color: var(--light); }
.faq__a { padding: 0 0 24px; color: var(--muted); }
.faq__a p { margin: 0; max-width: 76ch; }

/* ============ contact ============ */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(38px, 6vw, 88px);
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.nap { list-style: none; margin: 0 0 34px; padding: 0; }
.nap li { padding: 17px 0; border-bottom: 1px solid var(--line); display: grid; gap: 5px; }
.nap dt, .nap .k { color: var(--muted); font-size: 0.79rem; letter-spacing: 0.1em; text-transform: uppercase; }
.nap .v { color: var(--light); font-size: 1.04rem; }
.nap a { text-decoration: none; border-bottom: 1px solid var(--oil); padding-bottom: 1px; }
.nap a:hover { color: #fff; }

/* Butoanele de traseu stau în coloana adresei, nu într-o bandă separată sub hartă —
   harta a fost scoasă de tot (6 sep, clientul: „scoate harta, nu se intelege oricum
   nimic pe ea" — sub 600px, decupajul rămânea ilizibil oricât am strâns cadrul).
   Butoanele au rămas exact aici, unde le pusese polish-ul înainte de scoatere: umpleau
   golul de 187px de sub „Vorbim", și „unde suntem"/„cum ajungi" sunt același gest.
   Acum fac singure toată treaba de orientare; `geo`/`hasMap` din schema JSON-LD duc
   mai departe treaba pentru motoarele de căutare, fără nicio imagine pe pagină. */
.harta__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* formularul — componentă izolată, se înlocuiește cu agent conversațional fără a atinge restul */
.form { display: grid; gap: 15px; }
.form__row { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field > span { font-size: 0.79rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .field select {
  font-family: var(--sans); font-size: 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--light);
  padding: 13px 15px;
  border-radius: 0;
  width: 100%;
  transition: border-color .18s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--line-2); }
.field textarea { min-height: 118px; resize: vertical; }
.form__note { color: var(--muted); font-size: 0.86rem; margin: 0; }
/* min-height acoperă mesajul de succes (3 rânduri la 390px, măsurat cu Playwright pe
   6 sep 2026 — vezi audit) ca să nu sară pagina în jos când apare mesajul după trimitere. */
.form__status { font-size: 0.92rem; color: var(--oil); min-height: calc(1.62em * 3); margin: 0; }

/* ============ subsol ============ */

.ftr {
  border-top: 1px solid var(--line);
  padding: 44px 0 54px;
  color: var(--muted);
  font-size: 0.87rem;
}
.ftr__grid { display: flex; flex-wrap: wrap; gap: 18px 46px; justify-content: space-between; align-items: baseline; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: var(--light); }

/* ============ aprinderea secțiunilor ============ */

.lit { transition: opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.js .lit { opacity: 0; transform: translateY(14px); }
.lit.is-lit, .is-lit .lit { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lit, .js .lit { opacity: 1; transform: none; transition: none; }
  .js .station__art { opacity: .17; }
}

.skip {
  position: absolute; left: -9999px;
  background: var(--light); color: #0B0F12; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: var(--pad); top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* diagrama Tesla e mai lată decât celelalte (siluetă, nu piesă) */
.station__art--tesla { width: clamp(200px, 27vw, 340px); }


/* ============ reparații după atacul de accesibilitate (4 sep 2026) ============ */

/* Zone de atins de 44px pe linkurile de telefon — sunt exact cele pe care le apeși
   de pe mobil ca să suni service-ul, și aveau 22px înălțime reală. */
.nap a, .ftr a[href^="tel:"], .hdr__mark, .hdr__tel, .revs__sursa a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ⚠️ Ordinea de aici contează. Regula de deasupra pune `display: inline-flex` pe
   `.hdr__tel` ca să prindă cele 44px de zonă de atins — și, fiind mai jos în fișier,
   ANULA `display: none` din media query-ul de telefon, care stătea la rândul 123.
   Rezultatul: numărul reapărea în antetul de mobil și înghesuia logo-ul, tăcut, de pe
   4 sep. Ascunderea trebuie să vină DUPĂ, nu înainte. (5 sep 2026) */
@media (max-width: 720px) { .hdr__tel { display: none; } }
.nap li { padding-block: 10px; }

/* Fără JS formularul făcea un GET gol pe pagina curentă și pierdea lead-ul în tăcere.
   Îl ascundem și dăm numărul de telefon în loc. */
.form { display: none; }
.js .form { display: grid; }
.form__nojs {
  border: 1px solid var(--line);
  border-left: 2px solid var(--oil);
  padding: 22px 24px;
  margin: 0;
  color: var(--text);
}
.form__nojs a { border-bottom: 1px solid var(--oil); text-decoration: none; }
.js .form__nojs { display: none; }

/* ============ cadre fixe în loc de video (4 sep 2026) ============
   Grok generează imagini, nu clipuri. Un drift foarte lent de scală și poziție,
   la opacitate joasă și în spatele textului, citește ca video. Se oprește la
   prefers-reduced-motion, unde imaginea rămâne pur și simplu fixă. */

.station.is-lit .station__media { opacity: .42; }

.station__media img {
  transform-origin: 62% 50%;
  animation: drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
.station:nth-child(even) .station__media img {
  transform-origin: 38% 50%;
  animation-duration: 41s;
  animation-direction: alternate-reverse;
}
@keyframes drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .station__media img { animation: none; transform: scale(1.04); }
}

/* ============ Proces: singura secțiune cu oameni ============ */
.proces { position: relative; overflow: hidden; }
.proces > .wrap { position: relative; z-index: 1; }
.proces .station__media::after {
  /* aici textul e pe toată lățimea, deci vălul cade de sus în jos, nu lateral.
     Zonele, măsurate:            390px          1280px
       h2 `--light`               9–12%          16–25%
       lead `--muted` ← pragul   14–19%         29–34%
       blocul de pași            23–91%         45–84%
     Vălul rămâne apăsat cât ține leadul șters și se deschide sub blocul de pași,
     ca la stații. Atelierul e singura secțiune cu oameni — merită să se vadă. */
  background: linear-gradient(to bottom,
    rgba(13,17,20,0.86) 0%,
    rgba(13,17,20,0.90) 36%,
    rgba(13,17,20,0.60) 70%,
    rgba(13,17,20,0.46) 100%);
}
.proces.is-lit .station__media { opacity: .62; }

/* Cardurile pașilor: sticlă fumurie, nu lespezi opace. Fără asta, orice s-ar face
   la văl e degeaba — `.steps` și `.step` acopereau media cu fundal opac.
   Tenta lor e a doua atenuare peste văl; se înmulțesc, deci se măsoară împreună. */
.proces .steps { background: rgba(42,52,60,0.46); }
.proces .step  { background: rgba(13,17,20,0.72); }

/* ============ recenzii ============
   Cuvintele unor oameni reali. Tipografia le tratează ca text citit, nu ca
   ornament: fără ghilimele decorative uriașe, fără carduri cu umbră. */
.revs {
  display: grid;
  /* Numărul de coloane trebuie să împartă exact numărul de citate (6), altfel
     celulele goale lasă fundalul grilei la vedere ca un bloc gri. */
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px)  { .revs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .revs { grid-template-columns: repeat(3, 1fr); } }
.rev {
  margin: 0;
  background: var(--bg);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rev blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--text);
  flex: 1;
}
.rev figcaption {
  display: grid;
  gap: 3px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.rev__stele { color: var(--oil); font-size: 0.86rem; letter-spacing: 0.14em; }
.rev__nume  { color: var(--light); font-size: 0.95rem; font-weight: 600; }
.rev__cand  { color: var(--muted); font-size: 0.84rem; }

.revs__sursa { margin: 26px 0 0; }
.revs__sursa a {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color .18s, border-color .18s;
}
.revs__sursa a:hover { color: var(--light); border-color: var(--oil); }

/* ============================================================================
   Polish de interacțiune (4 sep 2026)
   Reguli respectate: se animează DOAR transform și opacity (glow-ul e un
   pseudo-element cu box-shadow fix, animăm opacitatea lui, nu umbra); curbă
   proprie de ease-out, fiindcă cele din CSS sunt prea moi; sub 300ms; hover-ul
   e închis în spatele `hover: hover`, altfel telefoanele îl declanșează la
   atingere și rămâne agățat.
   ========================================================================= */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---- glow-ul, ca strat separat: schimbăm doar opacitatea ---- */
.step, .rev {
  position: relative;
  isolation: isolate;
  transition: transform 220ms var(--ease-out);
}
.step::after, .rev::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
  box-shadow:
    inset 0 0 0 1px rgba(234, 241, 245, 0.16),
    inset 0 1px 0 0 rgba(234, 241, 245, 0.10),
    0 18px 40px -18px rgba(0, 0, 0, 0.9),
    0 0 34px -10px rgba(226, 161, 68, 0.28);
  background: linear-gradient(to bottom,
    rgba(234, 241, 245, 0.035), rgba(234, 241, 245, 0) 62%);
}

@media (hover: hover) and (pointer: fine) {
  .step:hover, .rev:hover {
    transform: translateY(-4px);
    z-index: 2;
  }
  .step:hover::after, .rev:hover::after { opacity: 1; }

  /* numărul pasului se aprinde odată cu cardul */
  .step { --n-color: var(--muted); }
  .step:hover .step__n { color: var(--oil); }
  .step__n { transition: color 220ms var(--ease-out); }

  /* stelele recenziei ies puțin în față */
  .rev:hover .rev__stele { opacity: 1; }
  .rev__stele { opacity: .8; transition: opacity 220ms var(--ease-out); }
}

/* focusul cu tastatura primește același tratament ca hover-ul */
.step:focus-within::after, .rev:focus-within::after { opacity: 1; }

/* ---- butoanele răspund la apăsare ----
   `--btn-lift` și `--btn-press` compun ridicarea de hover cu apăsarea, ca să nu se
   bată cap în cap: dacă apeși un buton din hero cât ești deja cu mouse-ul pe el,
   `translateY(-4px)` de la hover și `scale(0.975)` de la `:active` trebuie să
   coexiste într-un singur `transform`, nu să se înlocuiască unul pe altul —
   `transform` e o singură proprietate (7 sep 2026, vezi mai jos „butoanele din
   hero”). E proprietate a clasei `.btn`, nu doar a hero-ului, ca orice alt buton cu
   ridicare de hover, viitor, să compună la fel, nu doar cel de azi. */
.btn {
  --btn-lift: 0px;
  --btn-press: 1;
  transform: translateY(var(--btn-lift)) scale(var(--btn-press));
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 140ms var(--ease-out);
}
.btn:active { --btn-press: 0.975; }

/* ---- întrebările din FAQ ---- */
.faq summary { transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .faq details:not([open]) summary:hover { color: #fff; }
  .faq summary:hover::after, .faq summary:hover::before { background: var(--oil); }
}
.faq summary::after, .faq summary::before { transition: background-color 180ms ease, transform .25s, opacity .25s; }

/* ---- câmpurile formularului ---- */
.field input, .field textarea, .field select {
  transition: border-color 180ms ease, background-color 180ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--line-2);
  background: #171E25;
}

/* ---- mișcarea redusă: păstrăm glow-ul, scoatem deplasarea ---- */
@media (prefers-reduced-motion: reduce) {
  .step, .rev, .btn { transition: opacity 200ms ease; }
  .step:hover, .rev:hover, .btn:active { transform: none; }
}

/* ---- butoanele din hero primesc efectul de hover al cardurilor (7 sep 2026) ----
   Cerut de client: „să facă hover ca celelalte de pe site — cele de la «cum
   lucrăm»”. Aceeași rețetă ca la `.step, .rev` mai sus: glow pe `::after` separat
   (`box-shadow` fix, animăm doar `opacity`), ridicarea vine doar din `transform`
   (compusă cu apăsarea prin `--btn-lift`, vezi mai sus), curbă `--ease-out`, 220ms
   ca la carduri, închis în spatele `hover: hover` ca să nu rămână agățat la
   atingere pe telefon. Focusul cu tastatura (`:focus-visible`, nu `:focus`, ca să
   nu se aprindă la un simplu click de mouse) primește același tratament, în afara
   media query-ului — cine navighează cu tastatura n-are „hover” de telefon.
   `.btn--solid` are fundal alb opac: umbrele `inset` din `::after` (care e ÎN
   SPATELE butonului, `z-index:-1`) nu se văd prin el, doar haloul exterior — pe
   `.btn--ghost`, transparent, se văd și umbrele inset. Verificat vizual pe amândouă
   (captură în raport); dacă haloul plin arăta urât ar fi trebuit ajustată doar
   opacitatea/culoarea lui pe `.btn--solid`, nu forma efectului — nu a fost cazul.
   NU pe `.hdr__tel` — decizie explicită de client, 6 sep 2026 (antetul e fix,
   hover-ul accidental ar deveni zgomot vizual; vezi LISTA-POLISH-inainte-de-live.md,
   „Antetul NU primește efectul”). */
/* ---- 7 sep 2026, a doua rundă: haloul ambră, întărit DOAR pe butoanele din hero ----
   Reclamația clientului, verbatim: „nu e vorba de opacitate la căsuțe, e vorba că trebuie să
   leviteze ȘI când merg cu cursorul pe ele să se aprindă portocaliu în jurul lor". Ridicarea
   mergea (0 → −4px, aceeași curbă ca la carduri); portocaliul nu se citea.

   Cauza, nu simptomul: rețeta era copiată de la carduri, `0 0 34px -10px` — spread NEGATIV
   de 10px. Pe un card de ~260px înălțime, cutia strânsă cu 10px rămâne mare, iar marginea ei
   iese concentrată; pe un buton de 54px înălțime, aceeași strângere lasă o cutie de 34px,
   adică exact cât raza de blur, deci ambra se întinde peste toată forma și se diluează într-o
   pată caldă. Aceeași declarație, două rezultate — depinde de mărimea suprafeței. De asta
   întărirea stă DOAR pe `.hero__cta .btn`: cardurile n-au defectul.

   Cele trei straturi noi și ce face fiecare (le-am ales eu, pe măsurătoarea de mai jos):
     0 0  0px 1px  .45   conturul lipit de margine — ĂSTA face „portocaliu", nu aura
     0 0 12px 1px  .45   aura strânsă, care leagă conturul de fundal
     0 0 30px 4px  .22   aura largă, ce mai rămâne din efectul de card

   Măsurătoarea (`build/verificari-2026-09-07/hover-portocaliu/`, la 1440px): media canalelor
   pe un inel de 6–20px în jurul butonului, repaus vs hover.
     ÎNAINTE  fantomă ΔR +1,0 · plin ΔR +1,2   → practic zero ambră; „tonul" R−B creștea doar
                                                 fiindcă umbra neagră mânca albastru
     DUPĂ     fantomă ΔR +11,4 · plin ΔR +12,3 → tonul R−B urcă de la −7,2 la +4,2/+4,7,
                                                 adică inelul chiar trece în portocaliu
     MARTOR   cardul `.step`, măsurat identic: ΔR +3,7, ton −6,5 → −2,4
   Butoanele ies de ~3× mai tari pe pixel decât cardul, DELIBERAT: perimetrul lor e de câteva
   ori mai scurt, iar la aceeași intensitate pe pixel ochiul nu citește lumină, ci murdărie —
   exact ce reclama clientul. Varianta blândă (.34/.30/.16, ΔR +5,5) e randată și păstrată la
   `hover-portocaliu/incercari/`: în captură bordura arată tot albicioasă, nu portocalie.
   `.btn--solid` NU a avut nevoie de reglaj separat, deși `::after` îi stă în spatele
   fundalului opac: măsurat, iese chiar cu un fir mai puternic decât cel fantomă (+12,3 față
   de +11,4), fiindcă haloul se sprijină pe marginea albă.

   Ce NU s-a schimbat, fiindcă sunt regulile rețetei: se animează DOAR `opacity` (umbra e fixă
   pe `::after`), 220ms, `--ease-out`, hover-ul închis în `hover: hover` + `pointer: fine`,
   `:focus-visible` primește exact același halo, `prefers-reduced-motion` scoate ridicarea și
   păstrează haloul. `.step` și `.rev` nu s-au atins.

   Textul de pe buton nu pierde nimic, și asta e MĂSURAT, nu dedus din spec: contrastul lui pe
   glife URCĂ în hover, de la 12,57 la 16,22 (fantomă, textul trece pe `--light`) și de la
   16,86 la 19,08 (plin, fundalul trece pe alb curat); la `:focus-visible` rămâne 12,27 și
   16,86. Poarta obișnuită nu putea spune asta — ea nu duce mouse-ul pe nimic. */
.hero__cta .btn {
  position: relative;
  isolation: isolate;
}
.hero__cta .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
  box-shadow:
    inset 0 0 0 1px rgba(234, 241, 245, 0.16),
    inset 0 1px 0 0 rgba(234, 241, 245, 0.10),
    0 18px 40px -18px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(226, 161, 68, 0.45),
    0 0 12px 1px rgba(226, 161, 68, 0.45),
    0 0 30px 4px rgba(226, 161, 68, 0.22);
  background: linear-gradient(to bottom,
    rgba(234, 241, 245, 0.035), rgba(234, 241, 245, 0) 62%);
}
@media (hover: hover) and (pointer: fine) {
  .hero__cta .btn:hover {
    --btn-lift: -4px;
    z-index: 2;
  }
  .hero__cta .btn:hover::after { opacity: 1; }
}
.hero__cta .btn:focus-visible {
  --btn-lift: -4px;
  z-index: 2;
}
.hero__cta .btn:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__cta .btn:hover, .hero__cta .btn:focus-visible { --btn-lift: 0px; }
}

/* ============ media stațiilor pe ecran îngust ============
   Pe desktop textul stă în stânga, deci vălul cade lateral. Pe telefon textul
   ocupă toată lățimea — un văl lateral lasă litere peste partea luminoasă a
   imaginii. Sub 860px vălul rămâne vertical: ăsta e motivul, nu se schimbă.

   Ce s-a schimbat (4 sep 2026): cele două atenuări se ÎNMULȚESC, iar prima
   versiune le-a pus separat fără să măsoare nimeni produsul. Opacitate .3 sub
   un văl de 0.80–1.0 lăsa din imagine 6% sus, 3% la mijloc și 0% jos — pe
   desktop ajung 24%. Imaginea nu era ștearsă, era absentă.
   Bugetul se ține acum pe fracția EFECTIVĂ = opacitate × (1 − alfa văl), iar
   contrastul textului peste fundalul rendat se măsoară, nu se presupune. */
@media (max-width: 860px) {
  /* ---- ISTORIC: regula de până pe 7 sep 2026, păstrată cu motivul ei ----
     Era:
         .station.is-lit .station__media { opacity: .62 }
         văl vertical  0.915 @0%  ·  0.935 @60%  ·  0.62 @88%  ·  0.44 @100%
     Motivul opririlor, scris atunci: „Opririle stau pe măsurătoare, nu pe ochi.
     Reglaj inițial (4 sep, pe leaduri de-o singură propoziție): întuneric până la
     42%, apoi 78%, apoi 100%. Completările de 6 sep au lungit leadurile (Motor,
     Frâne) și au adăugat un al doilea paragraf (`.station__hook`,
     Revizii/Diagnoză). Măsurat cu `build/masoara-contrastul.mjs` pe 320–860px: la
     stația «Sistem de frânare», cea mai scurtă ca înălțime totală, leadul nou
     ajunge până la 56% din înălțimea stației la 520px — peste vechiul prag de 42%
     — și pică sub 4,5:1 (a scăzut până la 4,05:1 la 520px). Opririle mutate la
     60/88/100 țin întunericul sub toate leadurile măsurate, cu marjă."
     Motivul rămâne valabil ca CONSTRÂNGERE (leadul chiar coboară până la 56% din
     înălțime la 520px); ce a căzut e calibrarea, nu observația.

     De ce a fost înlocuită (7 sep 2026). Regula ținea contrastul, dar nu punea
     niciun prag pe cât din imagine mai ajunge la ochi. Fracția efectivă
     (= opacitate × (1 − alfa văl)) ieșea 5,3% la 0%, 4,2% la 60%, 23,6% la 88%,
     34,7% la 100% — pe desktop ajung 24,4%. Textul stației acoperă însă 3%–97%
     din înălțime pe telefon (măsurat la 390px pe toate cele 6 stații), deci
     practic toată stația stătea la 4–5%. Constatarea clientului, 7 sep: „în
     varianta de mobil nu se prea văd videourile din spate". */

  /* ---- 7 sep 2026: ce s-a măsurat și ce s-a schimbat ----
     Cine a ales numerele de mai jos și după ce: eu, pe măsurătoarea asta, nu pe ochi.

     (1) Geometrie, 390px, toate cele 6 stații: cutiile de text merg de la 5,1% la
         94,9% din LĂȚIME (toate elementele, inclusiv `li`), iar pe verticală textul
         ocupă 3%–97% din înălțimea stației. Nu există bandă fără text în care să se
         deschidă un gradient, și nu există loc pentru un scrim „doar în spatele
         blocului de text": pe telefon textul E stația. Ambele direcții au fost
         măsurate întâi și abandonate pe cifre, nu pe gust.
     (2) Vălul rămâne VERTICAL, ca înainte. Cutiile fiind pe toată lățimea, un văl
         lateral ar aduce partea luminoasă exact sub litere.
     (3) Luminanța brută de sub text, 390px, cu textul ascuns și media la opacitate
         1 fără văl: cel mai luminos pixel de sub cutia fiecărui text e 243,243,243
         la toate cele 6 stații. De acolo iese fracția maximă de imagine pe care o
         suportă fiecare culoare de text la 4,5:1:
              `--muted` #7D8B95  →   9%   ← `.station__lead`
              `--text`  #C9D4DB  →  35%   ← `li`, `.station__hook`
              `--light` #EAF1F5  →  42%   ← `h3`
         Plafonul nu era vălul, era o singură culoare de text: leadul, singurul
         element din stație cu două trepte mai închis decât vecinii lui.

     Schimbarea: pe ecran îngust leadul trece pe `--text`, adică pe aceeași culoare
     cu restul corpului stației (`li` și `.station__hook` erau deja acolo — marja
     lui `--text` peste media video era deja măsurată, vezi comentariul de la
     `.station__hook`). Plafonul urcă de la 9% la 35%, deci vălul se poate deschide
     de la 4–5% la 24,8%, cât ajunge pe desktop (24,4%).
     Ce se pierde: pe telefon leadul nu mai e mai șters decât lista. Ierarhia rămâne
     în `h3` (`--light`), în corp de literă și în ordine — nu în culoare. Pe desktop
     leadul rămâne `--muted`, nemodificat.
     Comportamentul măsurat DUPĂ schimbare, pe cele 14 lățimi 320→1680:
       fracția efectivă la stații pe 320–860px:  24,8% de la 0% la 92%, 33,5% la 100%
         (înainte: 5,3% · 4,2% · 23,6% · 34,7%)
       contrast: 0 sub prag din 64 pe fiecare lățime, cod 0
       contrastul cel mai slab DIN STAȚII pe 320–860px: 5,74–5,80 (înainte 4,88)
       minimul pe toată pagina rămâne 4,79, dat de `.proces`, care n-a fost atins.
     De ce ne oprim la 24,8% și nu mai sus: am pus efectiv vălul pe 0.5161 (adică
     f = 30%) și am măsurat — contrastul cel mai slab din stații cade de la 5,74 la
     **4,80** la 390px ȘI la 520px. Trece, dar cu 0,3 peste prag: exact marja pe
     care a mâncat-o pe 6 sep o simplă lungire a textului, și care ar face ca
     următoarea completare de copy să pice poarta. 24,8% e valoarea de pe desktop
     (24,4%) și lasă marja înapoi. */
  .station__lead { color: var(--text); }
  .station.is-lit .station__media { opacity: .62; }
  .station .station__media::after {
    /* Plat pe 0–92% fiindcă textul e peste tot; se deschide abia după 92%, sub
       ultimul `li` al celei mai înghesuite stații (textul se termină între 88,8%
       și 97,0% din înălțime, în funcție de stație). */
    background: linear-gradient(to bottom,
      rgba(13,17,20,0.60) 0%,
      rgba(13,17,20,0.60) 92%,
      rgba(13,17,20,0.46) 100%);
  }
  .station__media img, .station__media video { object-position: 62% center; }
}

/* ============ formularul care chiar trimite (6 sep 2026) ============
   Până azi formularul deschidea programul de e-mail al vizitatorului (`mailto:`) și, pe
   un dispozitiv fără client de e-mail configurat, nu se întâmpla nimic. Acum face POST
   către o funcție Cloudflare Pages. Ce se adaugă aici e strict ce cere mecanismul nou:
   capcana anti-robot, locul widgetului Turnstile, cele trei stări ale mesajului și
   butonul cât timp se lucrează. */

/* Capcana. NU `display: none` și nu `visibility: hidden` — o parte din roboți le citesc
   și sar peste câmp; scoaterea din flux îl lasă „real" pentru ei și invizibil pentru om.
   `tabindex="-1"` pe input (în HTML) îl scoate și din drumul tastaturii, ca omul care
   navighează cu Tab să nu ajungă niciodată în el. */
.form__capcana {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Locul widgetului Turnstile. Cu `appearance: interaction-only` containerul rămâne gol
   la majoritatea vizitatorilor, deci nu i se dă înălțime proprie: ar lăsa un gol în
   formular pentru toată lumea, ca să acopere cazul rar. Marginea apare doar când
   widgetul chiar a pus ceva înăuntru. */
.form__ts:not(:empty) { margin-block: 3px; }

/* Cele trei stări ale mesajului. Culorile sunt din paletă, nu inventate:
   `--text` pentru „se lucrează" (neutru), `--light` pentru confirmare (cel mai citibil
   lucru din pagină — e singurul moment în care omul chiar trebuie să citească), `--oil`
   pentru eșec (aceeași culoare de atenție ca în restul paginii). Verde nu există în
   paleta ALN și nu se introduce unul doar pentru mesajul ăsta. */
.form__status--lucru { color: var(--text); }
.form__status--ok    { color: var(--light); }
.form__status--rau   { color: var(--oil); }

/* Butonul cât timp se trimite. Rămâne lizibil (nu-l stingem sub pragul de contrast),
   dar nu mai arată ca ceva pe care merită să apeși a doua oară. */
.btn[disabled] {
  opacity: .72;
  cursor: progress;
  pointer-events: none;
}

/* Telefonul din mesajul de eșec: se apelează, nu se recitește. Subliniere în culoarea
   de accent, ca la celelalte legături de telefon din pagină (`.nap a`). Rămâne inline —
   nu primește cele 44px de zonă de atins ca linkurile de sine stătătoare, fiindcă e în
   mijlocul unei propoziții, iar WCAG scutește explicit legăturile din corpul textului. */
.form__status a { color: inherit; border-bottom: 1px solid var(--oil); text-decoration: none; }