/* ==========================================================================
   Edilo — sistem de design
   --------------------------------------------------------------------------
   Fără framework. Trei straturi: token-uri, primitive, componente.
   Tipografie: Plus Jakarta Sans (titluri și etichete) + Inter (text curent).
   Grilă: 12 coloane, container 1200px, gutieră constantă pe toate ecranele.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Token-uri */

:root {
    /* Culori de bază. Albastrul instituțional rămâne, dar fundalul întunecat
       coboară spre bleumarin adânc — mai puțin „corporate albastru”, mai aproape
       de hârtia oficială. */
    --navy-900: #071425;
    --navy-800: #0b1b30;
    --navy-700: #0f2b4c;
    --navy-600: #16406f;
    --navy-500: #1d5490;
    --navy-100: #e7eef7;
    --navy-050: #f3f7fc;

    --mint-600: #1f9d74;
    --mint-700: #15734f;
    --mint-500: #27ae80;
    --mint-400: #2fcf9b;
    --mint-100: #dff7ee;

    --amber-500: #f39c12;
    --rose-500: #e74c3c;
    --violet-500: #8e44ad;
    --sky-500: #3498db;

    /* Neutre ușor calde: gri pur arată ieftin pe ecrane slabe. */
    --ink-900: #10151c;
    --ink-700: #2b333d;
    --ink-500: #5a6572;
    /* Trecut de la #78838f la #646e7a: raportul pe alb urca de la 3,86 la
       5,18, deci firimiturile, notele si „+ TVA” din pachete trec pragul de
       4,5 cerut pentru text mic. Nuanta ramane aceeasi, doar doua trepte mai
       inchisa — paleta nu se schimba, doar devine lizibila. */
    --ink-400: #646e7a;
    --ink-300: #9aa4b0;
    --ink-350: #6b7581;

    --line: #e4e8ee;
    --line-strong: #cfd6df;
    --paper: #ffffff;
    --paper-alt: #f6f8fb;
    --paper-tint: #eef3f9;

    /* Suprafețe semantice */
    --bg: var(--paper);
    --text: var(--ink-700);
    --heading: var(--navy-800);
    --muted: var(--ink-500);

    /* Tipografie */
    /* Plus Jakarta Sans poartă tot ce este scris ca să fie recunoscut dintr-o
       privire: titlurile, supratitlurile, butoanele, capetele de tabel, cifrele
       mari. Inter poartă textul curent. Aceeași familie la titlu și la
       supratitlul de deasupra lui înseamnă că perechea din capul fiecărei
       secțiuni se citește ca un singur obiect, nu ca două.

       „Jakarta rezervă” și „Inter rezervă” sunt definite în fonts.css, cu
       metricile potrivite pe fontul real, ca schimbul de font să nu miște
       rândurile. Când acel fișier nu este încărcat, numele nu se rezolvă și
       browserul trece direct la fontul de sistem. */
    --font-titlu: 'Plus Jakarta Sans', 'Jakarta rezervă', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: var(--font-titlu);
    --font-body: 'Inter', 'Inter rezervă', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Scară fluidă: aceleași valori de la 360px la 1440px, fără salturi. */
    --t-xs: 0.8125rem;
    --t-sm: 0.9063rem;
    --t-base: 1rem;
    --t-md: clamp(1.05rem, 0.3vw + 0.98rem, 1.15rem);
    --t-lg: clamp(1.08rem, 0.35vw + 1rem, 1.22rem);
    /* Titlurile: scară redusă cu circa o cincime față de varianta inițială.
       Un titlu de 60 px pe un ecran de birou nu se citește mai bine, doar
       împinge textul în jos și rupe rândurile în locuri nefirești. */
    --t-h4: clamp(1.05rem, 0.3vw + 1rem, 1.16rem);
    --t-h3: clamp(1.18rem, 0.55vw + 1.06rem, 1.38rem);
    --t-h2: clamp(1.45rem, 1.25vw + 1.12rem, 2.05rem);
    --t-h1: clamp(1.9rem, 2.3vw + 1.15rem, 3.05rem);

    /* Spațiere pe pas de 4px */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
    --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
    --s11: 80px; --s12: 96px; --s13: 128px;

    /* Ritmul secțiunilor — singura sursă pentru simetria verticală */
    --section-y: clamp(52px, 6vw, 96px);
    --section-y-tight: clamp(36px, 4.2vw, 64px);

    /* Container și gutieră: aceeași pe tot site-ul, ca marginile să se alinieze
       perfect între antet, conținut și subsol. */
    --shell: 1200px;
    --gutter: clamp(20px, 4vw, 40px);

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Umbre în straturi: o singură umbră dură arată plat. */
    --sh-1: 0 1px 2px rgba(11, 27, 48, .05), 0 1px 3px rgba(11, 27, 48, .07);
    --sh-2: 0 2px 4px rgba(11, 27, 48, .04), 0 8px 20px rgba(11, 27, 48, .08);
    --sh-3: 0 4px 8px rgba(11, 27, 48, .05), 0 20px 48px rgba(11, 27, 48, .12);
    --sh-accent: 0 8px 28px rgba(39, 174, 128, .28);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------- 2. Primitive */

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

/*
   `hidden` trebuie să ascundă. Întotdeauna.

   Atributul se bazează pe `[hidden] { display: none }` din foaia de stil a
   browserului, iar aceea pierde în fața ORICĂREI reguli scrise de noi care dă
   un `display` — indiferent de specificitate, pentru că stilurile autorului bat
   stilurile browserului.

   Efectul măsurat pe site: `.alert { display: flex }` făcea vizibile, pe
   `/comanda`, ambele casete ascunse din pagină. Un vizitator care deschidea
   formularul citea „Solicitarea a fost trimisă” fără să fi trimis nimic — și
   pleca, în cel mai bun caz nedumerit, în cel mai rău convins că a comandat.

   Regula de mai jos închide clasa întreagă de greșeli, nu doar cazul găsit:
   orice element cu `hidden` rămâne ascuns, oricâte reguli de `display` ar avea.
*/
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;   /* antetul lipicios nu trebuie să acopere ancorele */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: 1.68;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--s4);
    font-family: var(--font-titlu);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.022em;
    color: var(--heading);
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); letter-spacing: -0.032em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.026em; }
h3 { font-size: var(--t-h3); font-weight: 700; }
h4 { font-size: var(--t-h4); font-weight: 700; }

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration-color: rgba(22, 64, 111, .35); text-underline-offset: 3px; transition: color .18s var(--ease); }
a:hover { color: var(--mint-700); }

img, svg, canvas { max-width: 100%; display: block; }
/*
 * Plasa de siguranta pentru pictogramele inline: un <svg> fara atribut
 * width primeste implicit 300x150 px in browser, ceea ce sparge orice
 * rand de text in care apare. Regulile cu selector mai specific
 * (.card__icon svg, .hero__trust svg) raman prioritare.
 */
svg:not([width]) { width: 1.25em; height: 1.25em; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }

strong { color: var(--heading); font-weight: 600; }

hr { height: 1px; margin: var(--s9) 0; border: 0; background: var(--line); }

::selection { background: var(--mint-100); color: var(--navy-800); }

:focus-visible {
    outline: 3px solid var(--mint-500);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Containerul unic. Orice bloc care trebuie aliniat cu antetul îl folosește. */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.skip-link {
    position: fixed; top: -100px; left: var(--s4); z-index: 200;
    padding: var(--s3) var(--s5);
    background: var(--navy-800); color: #fff;
    border-radius: var(--r-md); text-decoration: none;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s4); color: #fff; }

/* --------------------------------------------------------------- 3. Secțiuni */

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--paper-alt); }
.section--tint { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-tint) 100%); }

/* Banda în contrast — prezentă pe fiecare pagină, ca ochiul să aibă unde
   se odihni și ca pagina să nu pară o listă nesfârșită de carduri albe. */
.section--contrast {
    position: relative;
    background: radial-gradient(120% 140% at 12% 0%, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
    color: #c8d5e4;
    overflow: hidden;
}
.section--contrast h1, .section--contrast h2, .section--contrast h3, .section--contrast h4 { color: #fff; }
.section--contrast strong { color: #fff; }
.section--contrast a:not(.btn) { color: var(--mint-400); }
.section--contrast::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(50% 60% at 85% 15%, rgba(47, 207, 155, .14), transparent 70%),
        radial-gradient(40% 50% at 10% 90%, rgba(52, 152, 219, .12), transparent 70%);
    pointer-events: none;
}
.section--contrast > * { position: relative; }

/* Antetul de secțiune: același ritm peste tot. */
.s-head { max-width: 50rem; margin-bottom: clamp(28px, 3.2vw, 44px); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head p { color: var(--muted); font-size: var(--t-md); margin-bottom: 0; }
.section--contrast .s-head p { color: #9fb3c8; }

/*
   Supratitlul poartă cuvintele-cheie ale secțiunii, deci are trei-patru
   cuvinte, nu unul. La majuscule și cu spațiere între litere, atât înseamnă
   un rând lung, care pe telefon trebuie să se rupă — iar într-un container
   `inline-flex` textul nu se rupe singur: elementul anonim care îl conține
   refuză să coboare sub lățimea lui minimă. De aceea `min-width: 0` pe text,
   `flex: none` pe liniuță (altfel se comprimă până dispare) și aliniere la
   prima linie, ca liniuța să stea în dreptul primului rând, nu la mijlocul
   blocului de două rânduri.
*/
.eyebrow {
    display: inline-flex; align-items: flex-start; gap: var(--s2);
    max-width: 100%;
    margin-bottom: var(--s4);
    font-family: var(--font-display);
    font-size: var(--t-xs); font-weight: 700; line-height: 1.45;
    letter-spacing: .1em; text-transform: uppercase;
    text-wrap: balance;
    color: var(--mint-700);
}
.eyebrow::before {
    content: ''; flex: none; width: 22px; height: 2px; border-radius: 2px;
    margin-top: .62em;
    background: currentColor;
}
.section--contrast .eyebrow { color: var(--mint-400); }

.lead { font-size: var(--t-lg); color: var(--muted); }
.section--contrast .lead { color: #a9bccf; }

/* --------------------------------------------------------------- 4. Butoane */

.btn {
    --btn-py: 13px;
    --btn-px: 24px;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    padding: var(--btn-py) var(--btn-px);
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: var(--t-sm); font-weight: 700; letter-spacing: -.01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; transform: none; }

/*
   Butonul mic avea 38 px de înălțime minimă, iar în antet ieșea 41,8 — sub
   pragul de 44. Creșterea este de trei pixeli pe înălțimea minimă; textul și
   spațierea orizontală rămân neschimbate.
*/
.btn--sm { --btn-py: 9px; --btn-px: 18px; min-height: 44px; font-size: var(--t-xs); }

/*
   Butonul scris cu majuscule.

   `text-transform`, nu majuscule în text. Un cititor de ecran pronunță un
   text scris cu majuscule reale literă cu literă — „ce-o-em-a-en-de-a" în loc
   de „comandă" —, iar o traducere automată sau o căutare pe pagină nu mai
   găsesc cuvântul. Aici textul din HTML rămâne „Comandă"; se schimbă doar ce
   se vede.

   Spațierea crescută nu e decorativă: la majuscule, literele scrise strâns
   devin greu de citit la dimensiune mică, pentru că dispar diferențele de
   înălțime care ajută ochiul să le deosebească.
*/
.btn--caps {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}
.btn--lg { --btn-py: 16px; --btn-px: 32px; min-height: 54px; font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn--primary { background: var(--navy-700); color: #fff; box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--navy-600); color: #fff; box-shadow: var(--sh-3); }

.btn--accent {
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    color: #fff; box-shadow: var(--sh-accent);
}
.btn--accent:hover { color: #fff; box-shadow: 0 12px 34px rgba(39, 174, 128, .38); }

.btn--outline { background: transparent; border-color: var(--line-strong); color: var(--navy-700); }
.btn--outline:hover { border-color: var(--navy-700); color: var(--navy-700); background: var(--navy-050); }

.btn--outline-light { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; }

.btn--quiet { background: transparent; color: var(--ink-700); }
.btn--quiet:hover { background: var(--paper-alt); color: var(--navy-700); }

.btn--light { background: #fff; color: var(--navy-700); }
.btn--light:hover { background: var(--navy-050); color: var(--navy-700); }

/* --------------------------------------------------------------- 5. Antet */

.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-stuck {
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--line);
    box-shadow: 0 1px 24px rgba(11, 27, 48, .06);
}

/* Reper de poziționare pentru panourile de meniu: ele se centrează pe banda de
   conținut, nu pe eticheta care le-a deschis. */
.site-header__inner {
    position: relative;
    display: flex; align-items: center; gap: var(--s6);
    min-height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--navy-700); }
.brand__mark { display: inline-flex; color: var(--navy-700); }
.brand__mark svg { border-radius: 9px; }
.brand__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy-800); }
.brand:hover .brand__name { color: var(--navy-600); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.site-nav li { margin: 0; }
.site-nav a {
    /* 10 px, nu 9: măsurate, legăturile ieșeau 42,4 px, cu 1,6 sub pragul de 44. */
    display: block; padding: 10px 14px;
    border-radius: var(--r-pill);
    font-size: var(--t-sm); font-weight: 500; color: var(--ink-700);
    text-decoration: none; white-space: nowrap;
    transition: background-color .18s var(--ease), color .18s var(--ease);
}
.site-nav a:hover { background: var(--paper-alt); color: var(--navy-700); }
.site-nav a[aria-current='page'] { background: var(--navy-050); color: var(--navy-700); font-weight: 600; }

/* ----------------------------------------------------------------------------
   Meniurile derulante
   ----------------------------------------------------------------------------
   Titlul de meniu rămâne o legătură către o pagină reală, iar lângă el stă un
   buton care deschide lista. Deschiderea se face la apăsare, nu la trecerea
   mouse-ului: un meniu care se deschide singur la trecere se deschide și când
   utilizatorul doar traversează antetul spre altceva, iar pe ecranele tactile
   nu se deschide deloc. Starea este ținută pe atributul `hidden` al listei, ca
   să fie una singură pentru CSS, pentru JavaScript și pentru cititoarele de
   ecran.
   -------------------------------------------------------------------------- */

/*
   Elementul cu submeniu este un singur buton vizual: eticheta și săgeata stau
   în aceeași pastilă, cu același fundal la trecerea mouse-ului. Altfel săgeata
   pare un al doilea element, iar utilizatorul nu știe pe care dintre ele să
   apese.

   `position: static` este intenționat: panoul nu se poziționează față de
   elementul de meniu, ci față de banda de conținut a antetului, ca să apară
   centrat pe mijlocul paginii indiferent unde se află eticheta care l-a
   deschis.
*/
.site-nav li.has-sub {
    position: static; display: flex; align-items: center;
    border-radius: var(--r-pill);
    transition: background-color .18s var(--ease);
}
.site-nav li.has-sub > a { padding-right: 2px; }
.site-nav li.has-sub > a:hover { background: transparent; }
.site-nav li.has-sub:hover,
.site-nav li.has-sub.e-deschis { background: var(--paper-alt); }
.site-nav li.has-sub:hover > a,
.site-nav li.has-sub.e-deschis > a { color: var(--navy-700); }

/*
   Butonul care deschide submeniul rămâne 30 px desenați — altfel ar înălța
   rândul de meniu —, dar zona sensibilă crește la 44 printr-un pseudo-element.
   Măsurat înainte: 30 px, sub pragul de 44 pe care ni-l impunem pe partea
   publică. Este singurul control din antet care nu are etichetă scrisă, deci
   cel mai greu de nimerit.
*/
.site-nav__deschide {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 30px;
    padding: 0 8px 0 0; border: 0; border-radius: var(--r-pill);
    background: transparent; color: var(--ink-700); cursor: pointer;
}
.site-nav__deschide::after { content: ''; position: absolute; inset: -7px -4px; }
.site-nav__deschide svg { transition: transform .18s var(--ease); }
.site-nav li.has-sub:hover .site-nav__deschide { color: var(--navy-700); }
.site-nav__deschide[aria-expanded='true'] svg { transform: rotate(180deg); }
.site-nav__deschide:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }

/*
   Lățimea panoului se ia dintr-o variabilă, pentru că cele două submeniuri nu
   au același număr de grupuri: „Module” are patru, „Resurse” trei. Un panou de
   lățime fixă ar fi ori prea strâns pentru primul, ori prea lat pentru al
   doilea, cu o coloană goală la capăt.
*/
.submeniu {
    position: absolute; top: calc(100% - 6px); left: 50%; z-index: 120;
    width: min(var(--panou-l, 920px), calc(100vw - 2 * var(--gutter)));
    transform: translateX(-50%);
    padding: var(--s6) var(--s7);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(11, 27, 48, .16);
}

/*
   Banda invizibilă dintre eticheta de meniu și panou. Fără ea, mouse-ul care
   coboară spre panou trece printr-un spațiu gol, elementul pierde starea de
   hover și panoul se închide exact în drum spre el.
*/
.submeniu::before { content: ''; position: absolute; inset: -14px 0 auto 0; height: 14px; }

/*
   Numărul de coloane nu se scrie: `grid-auto-flow: column` face exact câte
   coloane are grupuri. Scris ca `repeat(3, …)`, al patrulea grup ar fi coborât
   pe al doilea rând, sub primul, iar meniul s-ar fi rupt tăcut în ziua în care
   se adaugă o categorie. Ceea ce s-a și întâmplat.
*/
.submeniu__interior {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s5) var(--s7);
}
.submeniu__grup h2 {
    margin: 0 0 var(--s3);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.submeniu__grup ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.submeniu__grup li { margin: 0; }
/* Legăturile din meniul principal stau pe un rând; cele din submeniu se rup pe
   două, altfel „Organigramă și compartimente” ar intra peste coloana vecină. */
.submeniu__grup a {
    display: block; padding: 7px 9px;
    border-radius: 7px;
    font-size: var(--t-sm); font-weight: 500; color: var(--ink-700); line-height: 1.35;
    text-decoration: none; white-space: normal;
}
.submeniu__grup a:hover { background: var(--paper-alt); color: var(--navy-700); }
.submeniu__grup a[aria-current='page'] { background: var(--navy-050); color: var(--navy-700); font-weight: 600; }

/* Ambele submeniuri au acum trei grupuri, deci aceeași lățime și aceeași
   împărțire. Regula care îngusta „Resurse” la două coloane a fost scoasă: ea
   selecta elementul prin poziție, iar poziția s-a schimbat de îndată ce a
   apărut „Contact” în meniu — un selector care depinde de ordinea intrărilor
   greșește tăcut la prima adăugare. */

.site-header__actions { display: flex; align-items: center; gap: var(--s2); }

/* ----------------------------------------------------------------------------
   Rețelele sociale din subsol
   -------------------------------------------------------------------------- */

.social { display: flex; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.social li { margin: 0; }
.social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: #c8d5e4;
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.social a:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: #fff; }
.social a:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 2px; }

/* ----------------------------------------------------------------------------
   Zonele încorporate: filmul de prezentare și harta sediului
   ----------------------------------------------------------------------------
   Raportul se impune pe container, nu pe cadru, ca pagina să nu tresară în
   momentul în care se încarcă resursa externă.
   -------------------------------------------------------------------------- */

.video, .harta {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper-alt);
    box-shadow: var(--sh-1);
}
.video { aspect-ratio: 16 / 9; max-width: 62rem; margin-inline: auto; }
.harta { aspect-ratio: 16 / 10; }
.video iframe, .harta iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video--gol { display: grid; place-items: center; padding: var(--s7) var(--s5); text-align: center; }
.video--gol > div { display: grid; gap: var(--s3); justify-items: center; max-width: 34rem; }
.video--gol strong { font-family: var(--font-display); font-size: var(--t-lg); color: var(--navy-800); }
.video--gol span { font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }

.video__nota, .harta__nota {
    max-width: 62rem; margin: var(--s3) auto 0;
    font-size: var(--t-xs); color: var(--muted); text-align: center;
}

@media (max-width: 599px) {
    .harta { aspect-ratio: 4 / 5; }
}

/* ----------------------------------------------------------------------------
   Intrarea în cont
   ----------------------------------------------------------------------------
   Un singur semn, nu un cuvânt: „Autentificare” concura ca lungime cu „Solicită
   cont”, deși cele două nu au aceeași greutate — una este pentru cei care au
   deja cont, cealaltă este invitația. Numele accesibil rămâne însă cuvântul
   întreg, pus pe legătură prin `aria-label`, iar eticheta vizuală apare la
   trecerea cu mouse-ul și la navigarea din tastatură; cititoarele de ecran o
   ignoră, ca să nu audă textul de două ori.
   -------------------------------------------------------------------------- */

/* 44, nu 42: pragul pe care ni-l impunem pe partea publică este 44 px. */
.cont {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--navy-700);
    background: #fff;
    text-decoration: none;
    transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.cont:hover { background: var(--navy-050); border-color: var(--navy-200, var(--line)); color: var(--navy-800); }
.cont:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }

/* Cercul desenat are 42 px, cât butonul verde de alături; ținta de atingere
   este împinsă la 46 px, peste pragul de 44 din ghidul de accesibilitate. */
.cont::before {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 50%;
}

.cont__eticheta {
    position: absolute; top: calc(100% + 8px); right: 0;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--navy-800);
    color: #fff;
    font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    opacity: 0; visibility: hidden;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.cont:hover .cont__eticheta,
.cont:focus-visible .cont__eticheta { opacity: 1; visibility: visible; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .cont__eticheta { transition: none; transform: none; }
}

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    margin-left: auto;
    background: transparent; border: 1px solid var(--line-strong);
    border-radius: var(--r-md); cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 18px; }
.nav-toggle__bars span {
    display: block; height: 2px; border-radius: 2px; background: var(--navy-800);
    transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(7, 20, 37, .5);
    backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .25s var(--ease);
}
.nav-scrim.is-visible { opacity: 1; }

/* --------------------------------------------------------------- 6. Hero */

.hero {
    position: relative;
    padding-block: clamp(56px, 8vw, 104px) clamp(64px, 9vw, 120px);
    background: radial-gradient(130% 120% at 15% 0%, var(--navy-700) 0%, var(--navy-800) 50%, var(--navy-900) 100%);
    color: #c8d5e4;
    overflow: hidden;
    isolation: isolate;
}

/* Pânza cu animația de flux stă în spatele textului, decupată la marginea
   secțiunii. Dacă JavaScript lipsește sau utilizatorul cere mișcare redusă,
   rămâne fundalul static de mai sus — pagina arată la fel de bine. */
.hero__canvas {
    position: absolute; inset: 0; z-index: -1;
    width: 100%; height: 100%;
    opacity: .85;
}

.hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(7, 20, 37, .92) 0%, rgba(7, 20, 37, .55) 45%, transparent 72%);
    pointer-events: none;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.hero h1 { color: #fff; margin-bottom: var(--s5); }
.hero h1 .accent {
    background: linear-gradient(120deg, var(--mint-400), #7ee7c0);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: clamp(1.02rem, .45vw + .95rem, 1.18rem); color: #a9bccf; max-width: 36rem; margin-bottom: var(--s6); }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s7); }

/*
   Butonul principal ocupă singur primul rând.

   Cu cinci butoane de lățimi apropiate, zona le aranja 2 + 2 + 1, iar al
   cincilea rămânea orfan pe rândul lui — arăta ca o greșeală de așezare, nu
   ca o ierarhie. Măsurat în browser la 1024, 1366 și 1920 px: aceeași
   grupare la toate trei.

   Trecut pe rând propriu, îndemnul principal capătă și ierarhia care i se
   cuvine, iar celelalte patru cad curat 2 × 2. Nu s-a folosit `!important`:
   `.hero__actions .btn--accent` cântărește (0,2,0) și bate regula de bază a
   butonului, care are (0,1,0).

   Sub 600 px fiecare buton ocupă oricum toată lățimea, deci regula nu are ce
   schimba acolo — dar nici nu strică, iar o interogare de mediu în plus ar fi
   încă un prag de ținut minte.
*/
.hero__actions .btn--accent { flex: 1 0 100%; }

/*
   Cele patru secundare, două pe rând.

   Numai rândul propriu pentru butonul principal nu era de ajuns: pe zonele
   mai late intrau trei pe rând și al patrulea rămânea singur — măsurat 1 + 3
   + 1 la 1024 și la 1920 px, dar 1 + 2 + 2 la 1366. Adică gruparea depindea
   de lățimea ecranului, ceea ce înseamnă că nu era o așezare, ci o
   întâmplare.

   Baza de 50% minus gutiera le fixează două pe rând, indiferent de lățime.
   `min-width` le lasă să treacă pe câte unul pe rând când jumătatea ar fi
   prea îngustă ca să încapă textul — pe telefon, unde oricum asta trebuie să
   se întâmple.
*/
.hero__actions .btn--outline-light {
    flex: 1 1 calc(50% - var(--s3));
    min-width: 200px;
}

.hero__trust { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-size: var(--t-sm); color: #8ea4bb; }
.hero__trust span { display: inline-flex; align-items: center; gap: var(--s2); }
.hero__trust svg { width: 18px; height: 18px; color: var(--mint-400); flex-shrink: 0; }

/* Cartonașul din dreapta: fereastra platformei, sugerată, nu o captură reală. */
.hero__panel {
    padding: var(--s6);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--r-xl);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 32px 64px rgba(0, 0, 0, .28);
}
.hero__panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--s4); margin-bottom: var(--s4);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.hero__panel-head h2 { font-size: var(--t-sm); color: #fff; margin: 0; letter-spacing: .02em; }
.hero__panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-400); box-shadow: 0 0 0 4px rgba(47, 207, 155, .18); }

.flow { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.flow li {
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) var(--s4);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--r-md);
    font-size: var(--t-sm); color: #cbd9e7; margin: 0;
}
.flow__step {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(47, 207, 155, .16);
    color: var(--mint-400);
    font-family: var(--font-display); font-size: var(--t-xs); font-weight: 800;
}
.flow strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }

/* --------------------------------------------------------------- 7. Grile */

.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cardurile dintr-o grilă au aceeași înălțime: simetria se vede imediat. */
.grid > * { min-width: 0; }

/*
   Ultimul rând, centrat.
   ---------------------------------------------------------------------------
   Unele liste au un număr de elemente care nu se împarte la trei: șapte pași
   de circuit, cinci etape de sesizare. Conținutul este cât este — nu se adaugă
   un pas inventat ca să iasă rândul — deci se centrează ce rămâne.

   Grila nu poate centra un rând incomplet: coloanele sunt fixate, iar ultimele
   elemente se lipesc de stânga și lasă un gol cât un card, care se citește ca
   ceva lipsă. Aici lățimea coloanei se calculează o dată și se aplică pe
   fiecare element, iar `justify-content: center` face restul. Rezultatul arată
   identic cu `grid--3` pentru numerele care se împart exact.
*/
.grid--proces {
    display: flex; flex-wrap: wrap; justify-content: center;
    --coloane: 3;
}
.grid--proces > * {
    flex: 0 1 calc((100% - (var(--coloane) - 1) * clamp(16px, 2vw, 24px)) / var(--coloane));
    min-width: 0;
}

@media (max-width: 1029px) { .grid--proces { --coloane: 2; } }
@media (max-width: 699px) { .grid--proces { --coloane: 1; } }

/* --------------------------------------------------------------- 8. Carduri */

.card {
    display: flex; flex-direction: column;
    height: 100%;
    padding: clamp(20px, 2.2vw, 28px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card h3 { margin-bottom: var(--s3); }
.card p { color: var(--muted); font-size: var(--t-sm); }
.card--hover:hover { transform: translateY(-4px); border-color: var(--navy-100); box-shadow: var(--sh-3); }
.card--raised { box-shadow: var(--sh-1); }

.section--contrast .card {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .1);
}
.section--contrast .card p { color: #9fb3c8; }

.card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-bottom: var(--s4);
    background: linear-gradient(135deg, var(--mint-100), #eefaf5);
    border-radius: var(--r-md);
    color: var(--mint-600);
}
.card__icon svg { width: 22px; height: 22px; }
.section--contrast .card__icon { background: rgba(47, 207, 155, .14); color: var(--mint-400); }

/* Cifre mari, aliniate pe o singură linie de bază */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s6); }
.stat { text-align: center; }
.stat__value {
    display: block;
    font-family: var(--font-titlu);
    font-size: clamp(1.75rem, 2.1vw, 2.35rem); font-weight: 800;
    line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
    color: var(--navy-700);
    font-variant-numeric: tabular-nums;
}
.section--contrast .stat__value { color: #fff; }
.stat__label { display: block; margin-top: var(--s2); font-size: var(--t-sm); color: var(--muted); }
.section--contrast .stat__label { color: #8ea4bb; }

/* --------------------------------------------------------------- 9. Prețuri */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }

.plan {
    position: relative;
    display: flex; flex-direction: column;
    padding: clamp(24px, 2.6vw, 34px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }

.plan--featured {
    border-color: var(--mint-400);
    box-shadow: 0 0 0 1px var(--mint-400), var(--sh-3);
}
.plan__flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    padding: 5px 16px;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-600));
    border-radius: var(--r-pill);
    color: #fff; font-family: var(--font-display);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--sh-accent);
}

.plan__name {
    font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
    margin-bottom: var(--s4);
}
.plan__price {
    display: flex; align-items: baseline; gap: 6px;
    font-family: var(--font-titlu); font-size: clamp(2rem, 2.4vw, 2.5rem); font-weight: 800;
    letter-spacing: -.04em; font-variant-numeric: tabular-nums;
    color: var(--navy-800); line-height: 1;
    margin-bottom: var(--s2);
}
.plan__price small { font-size: var(--t-base); font-weight: 500; color: var(--muted); letter-spacing: normal; }
.plan__vat { font-size: var(--t-xs); color: var(--ink-400); margin-bottom: var(--s5); }
.plan__for {
    padding-bottom: var(--s5); margin-bottom: var(--s5);
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm); color: var(--muted);
    min-height: 3.2em;   /* aliniază linia de separare pe toate cele trei planuri */
}

.plan__features { flex: 1; margin: 0 0 var(--s6); padding: 0; list-style: none; font-size: var(--t-sm); }
.plan__features li { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.plan__features li::before {
    content: ''; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px;
    border-radius: 50%;
    background: var(--mint-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231f9d74'%3E%3Cpath d='M8.1 13.6 4.9 10.4l1.2-1.2 2 2 5-5 1.2 1.2z'/%3E%3C/svg%3E") center/14px no-repeat;
}
.plan__features li.is-off { color: var(--ink-400); }
.plan__features li.is-off::before {
    background: var(--paper-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239aa4b0'%3E%3Crect x='5' y='9.2' width='10' height='1.6' rx='.8'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* --------------------------------------------------------------- 10. Tabele */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    -webkit-overflow-scrolling: touch;
}
table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--t-sm); }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
    position: sticky; top: 0;
    background: var(--paper-alt);
    font-family: var(--font-display); font-weight: 700; color: var(--navy-800);
    white-space: nowrap;
}
tbody th { font-weight: 600; color: var(--heading); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover { background: var(--navy-050); }
/* „Da” din tabelul comparativ este text mic si ingrosat, deci ii trebuie 4,5:1.
   La --mint-600 raportul era 3,42; --mint-700 il duce la 5,84, cu aceeasi
   nuanta. Liniuta de „nu” trece de la --ink-300 (2,53) la --ink-400 (5,18). */
.is-yes { color: var(--mint-700); font-weight: 700; }
.is-no { color: var(--ink-400); }

/*
   Tabelul are fundal alb propriu, oriunde ar fi pus. Pe o bandă întunecată,
   textul unei celule fără culoare declarată moștenea culoarea secțiunii — gri
   deschis, gândit pentru fundal bleumarin — și ajungea aproape invizibil pe
   alb. Culoarea se declară aici, o dată, pentru orice tabel din site.
*/
.table-wrap { color: var(--ink-700); }
.is-val { color: var(--ink-900); font-weight: 700; }

/* --------------------------------------------------------------- 11. Formulare */

.form { max-width: 46rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { margin-bottom: var(--s5); }
.field:last-child { margin-bottom: 0; }
.form-grid .field { margin-bottom: 0; }

.field > label, .field__label {
    display: block; margin-bottom: var(--s2);
    font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; color: var(--heading);
}
.field__req { color: var(--rose-500); }

.control {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    background: var(--paper);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-md);
    color: var(--ink-900);
    font-family: var(--font-body); font-size: var(--t-base);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
/* Substituentul are nevoie de propria nuanta: --ink-300 ramane pentru
   chenare si stari de hover, unde 2,53 este suficient, dar ca text ar fi
   ilizibil. #6b7581 da 4,68 pe alb. */
.control::placeholder { color: var(--ink-350); opacity: 1; }
.control:hover { border-color: var(--ink-300); }
.control:focus {
    outline: none;
    border-color: var(--mint-500);
    box-shadow: 0 0 0 4px rgba(39, 174, 128, .16);
}
.control.is-invalid { border-color: var(--rose-500); }
.control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(231, 76, 60, .15); }

select.control {
    appearance: none; padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235a6572' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 7 7.5l6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
textarea.control { min-height: 8rem; resize: vertical; line-height: 1.6; }

.field__hint { margin: var(--s2) 0 0; font-size: var(--t-xs); color: var(--muted); }
.field__error { margin: var(--s2) 0 0; font-size: var(--t-xs); font-weight: 600; color: var(--rose-500); }

.check { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s5); }
.check input {
    flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px;
    accent-color: var(--mint-600); cursor: pointer;
    outline: 4px solid transparent; outline-offset: 3px;
}
.check label { font-size: var(--t-sm); cursor: pointer; }
.check label strong { display: block; margin-bottom: 2px; }

/* Alegere sub formă de carduri — mai clar decât un radio simplu. */
.picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.pick {
    position: relative; display: block;
    padding: var(--s5);
    background: var(--paper);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.pick:hover { border-color: var(--ink-300); transform: translateY(-2px); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick strong { display: block; font-family: var(--font-display); font-size: var(--t-md); color: var(--navy-800); margin-bottom: 4px; }
.pick span { display: block; font-size: var(--t-xs); color: var(--muted); }
.pick:has(input:checked) {
    border-color: var(--mint-500);
    background: linear-gradient(180deg, #fff, var(--mint-100));
    box-shadow: 0 0 0 1px var(--mint-500), var(--sh-2);
}
.pick:has(input:focus-visible) { outline: 3px solid var(--mint-500); outline-offset: 3px; }

/* --------------------------------------------------------------- 12. Pași */

.steps { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s8); padding: 0; list-style: none; counter-reset: step; }
.steps li {
    display: flex; align-items: center; gap: var(--s2);
    padding: 8px 16px 8px 8px;
    border-radius: var(--r-pill);
    background: var(--paper-alt);
    font-size: var(--t-xs); font-weight: 500; color: var(--ink-400); margin: 0;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.steps li::before {
    counter-increment: step; content: counter(step);
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 1.5px solid var(--line-strong);
    font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs);
}
.steps li[aria-current='step'] { background: var(--navy-050); color: var(--navy-700); font-weight: 600; }
.steps li[aria-current='step']::before { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.steps li.is-done { background: var(--mint-100); color: var(--mint-600); }
.steps li.is-done::before {
    content: ''; background: var(--mint-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3E%3Cpath d='M8.1 13.6 4.9 10.4l1.2-1.2 2 2 5-5 1.2 1.2z'/%3E%3C/svg%3E") center/16px no-repeat;
    border-color: var(--mint-500);
}

.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; margin-top: var(--s8); }

.summary { margin: 0 0 var(--s6); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.summary > div { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.summary > div:last-child { border-bottom: 0; }
.summary > div:nth-child(odd) { background: var(--paper-alt); }
.summary dt { color: var(--muted); font-size: var(--t-sm); }
.summary dd { margin: 0; font-weight: 600; color: var(--heading); text-align: right; }

/* --------------------------------------------------------------- 13. Alerte */

.alert {
    display: flex; gap: var(--s3); align-items: flex-start;
    padding: var(--s5);
    border-radius: var(--r-lg);
    font-size: var(--t-sm);
    margin-bottom: var(--s6);
    border: 1px solid transparent;
}
.alert svg { flex-shrink: 0; margin-top: 2px; }
.alert--info { background: var(--navy-050); border-color: #d5e3f3; color: #1a4a7d; }
.alert--success { background: var(--mint-100); border-color: #b9e9d5; color: #13674c; }
.alert--warn { background: #fef6e7; border-color: #f7e0b0; color: #8a5a06; }
.alert--error { background: #fdeceb; border-color: #f6c9c5; color: #97231a; }
.alert h2, .alert h3 { margin-bottom: var(--s2); font-size: var(--t-md); color: inherit; }

/* --------------------------------------------------------------- 14. FAQ */

/* ----------------------------------------------------------------------------
   Cardul de modul
   ----------------------------------------------------------------------------
   Cardul întreg este apăsabil, dar legătura rămâne pe titlu: aria extinsă se
   obține cu un pseudo-element, nu învelind cardul într-o ancoră. Așa, cine
   folosește un cititor de ecran aude un singur nume de legătură — titlul —, nu
   tot textul cardului citit ca etichetă.
   -------------------------------------------------------------------------- */

.card--link { position: relative; display: flex; flex-direction: column; }
.card--link h3 { margin-bottom: var(--s2); }
.card--link h3 a { color: inherit; text-decoration: none; }
.card--link h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card--link h3 a:focus-visible { outline: none; }
.card--link:focus-within { outline: 2px solid var(--navy-600); outline-offset: 3px; }

.card__mai {
    margin-top: auto; padding-top: var(--s3);
    font-size: var(--t-xs); font-weight: 600; color: var(--navy-600);
}
.card--link:hover .card__mai { color: var(--mint-600, var(--navy-700)); }

.grid--module .card { min-height: 100%; }

/* ----------------------------------------------------------------------------
   Rândul de grup din tabelul de pachete
   -------------------------------------------------------------------------- */

/*
   Tabelul are suprafață albă și în interiorul secțiunii întunecate, deci
   culorile din el se aleg față de alb, nu față de fundalul secțiunii. Prima
   variantă a acestui bloc folosea verdele deschis al benzii întunecate și albul
   pentru legături — verdele ajungea la 1,9:1, iar legăturile deveneau alb pe
   alb, adică invizibile. Ambele se măsoară acum față de alb.
*/
.tabel__grup th {
    padding-top: var(--s5);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--mint-700);
    background: transparent;
}
/* Specificitatea urcată intenționat: regula generală a benzii întunecate
   (`.section--contrast a:not(.btn)`) colorează legăturile în verde deschis,
   potrivit pe fundal închis și ilizibil pe suprafața albă a tabelului. */
.section--contrast .table-wrap th a:not(.btn) { color: var(--navy-600); text-decoration-color: rgba(22, 64, 111, .3); }
.section--contrast .table-wrap th a:not(.btn):hover { color: var(--mint-700); }
.table-wrap th a { color: var(--navy-600); }

/* ----------------------------------------------------------------------------
   Lista județelor
   ----------------------------------------------------------------------------
   Patruzeci și două de nume într-o grilă care se strânge singură: `auto-fill`
   cu o lățime minimă dă numărul de coloane potrivit fiecărui ecran, fără praguri
   scrise de mână. Nu sunt legături — ar duce la patruzeci și două de pagini
   aproape identice, exact conținutul subțire pe care motoarele îl
   retrogradează.
   -------------------------------------------------------------------------- */

.judete {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 2px var(--s4);
    max-width: 60rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.judete li {
    margin: 0;
    padding: 7px 0 7px 14px;
    position: relative;
    font-size: var(--t-sm);
    color: var(--ink-700);
    line-height: 1.4;
}
.judete li::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 5px; height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--mint-500);
}

@media (max-width: 599px) {
    .judete { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0 var(--s3); }
}

.faq { max-width: 52rem; margin-inline: auto; }

/*
   Întrebările pe două coloane. `align-items: start` este esențial: fără el,
   deschiderea unei întrebări ar întinde pe înălțime și întrebarea de alături,
   care nu are ce arăta. Ordinea rămâne pe verticală, ca parcurgerea din
   tastatură să urmeze ordinea vizuală.
*/
.faq--2col {
    max-width: 72rem;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--s3) var(--s5);
}

@media (max-width: 899px) {
    .faq--2col { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
}
.faq details {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    margin-bottom: var(--s3);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq details[open] { border-color: var(--navy-100); box-shadow: var(--sh-1); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    padding: 18px 22px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--heading);
    cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--paper-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230f2b4c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E") center/15px no-repeat;
    transition: transform .25s var(--ease), background-color .2s var(--ease);
}
.faq details[open] summary::after {
    transform: rotate(135deg);
    background-color: var(--mint-100);
}
.faq summary:hover { color: var(--navy-600); }
.faq details > p, .faq details > ul { margin: 0 22px 20px; color: var(--muted); font-size: var(--t-sm); }
.section--contrast .faq details { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.section--contrast .faq summary { color: #fff; }
.section--contrast .faq details > p { color: #9fb3c8; }

/* --------------------------------------------------------------- 15. Firimituri */

.crumbs { padding-block: var(--s5) 0; background: var(--paper); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--s2); }
.crumbs li + li::before { content: '/'; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--navy-700); text-decoration: underline; }
.crumbs span { color: var(--ink-400); }

/* Ultima firimitură poartă acum titlul paginii, care pe un articol poate avea
   70 de caractere. Se taie cu trei puncte în loc să rupă rândul; ierarhia
   rămâne vizibilă, iar titlul întreg este oricum imediat dedesubt, în h1. */
.crumbs li:last-child span {
    display: inline-block;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 699px) {
    .crumbs li:last-child span { max-width: 22ch; }
}

/* --------------------------------------------------------------- 16. Legături interne */

.related { background: var(--paper-alt); border-top: 1px solid var(--line); }
.related__title { font-size: var(--t-h3); margin-bottom: var(--s6); }
.related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.related__grid li { margin: 0; }
.related__grid a {
    position: relative;
    display: flex; flex-direction: column; gap: var(--s2);
    height: 100%;
    padding: var(--s5) var(--s5) var(--s8);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.related__grid a:hover { transform: translateY(-3px); border-color: var(--navy-100); box-shadow: var(--sh-2); }
.related__grid strong { font-family: var(--font-display); font-size: var(--t-sm); color: var(--navy-800); line-height: 1.35; }
.related__grid span { font-size: var(--t-xs); color: var(--muted); line-height: 1.55; }
.related__grid em {
    position: absolute; left: var(--s5); bottom: var(--s5);
    font-style: normal; color: var(--mint-600); font-size: var(--t-md);
    transition: transform .22s var(--ease);
}
.related__grid a:hover em { transform: translateX(5px); }

/* --------------------------------------------------------------- 17. Bandă CTA */

.cta {
    position: relative;
    padding-block: clamp(48px, 6vw, 88px);
    background: radial-gradient(120% 140% at 80% 0%, var(--navy-600) 0%, var(--navy-700) 40%, var(--navy-900) 100%);
    color: #c8d5e4;
    overflow: hidden;
}
.cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(45% 70% at 15% 100%, rgba(47, 207, 155, .16), transparent 70%);
}
.cta__inner {
    position: relative;
    display: flex; flex-wrap: wrap; gap: var(--s7);
    align-items: center; justify-content: space-between;
}
.cta__text { flex: 1 1 30rem; }
.cta__text h2 { color: #fff; margin-bottom: var(--s3); }
.cta__text p { color: #a9bccf; margin: 0; max-width: 42rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --------------------------------------------------------------- 18. Subsol */

.site-footer {
    padding-block: clamp(48px, 6vw, 80px) var(--s6);
    background: var(--navy-900);
    color: #8ea4bb;
    font-size: var(--t-sm);
}

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 2.65fr);
    gap: clamp(32px, 5vw, 72px);
    padding-bottom: var(--s9);
}

.brand--footer { margin-bottom: var(--s5); }
.brand--footer .brand__mark { color: #fff; }
.brand--footer .brand__name { color: #fff; }

.site-footer__brand p { max-width: 26rem; margin-bottom: var(--s5); line-height: 1.7; }

/*
   Legăturile din subsol sunt `inline-block`, nu inline. Ca elemente inline,
   caseta fiecăreia se întinde pe toată înălțimea rândului, iar la interlinierea
   folosită aici casetele vecine ajung să se suprapună pe verticală cu câțiva
   pixeli. Nu se vede, dar un deget care apasă în zona de suprapunere nimerește
   altă legătură decât cea citită — iar auditul de accesibilitate o semnalează
   exact așa: ținte de atingere care se suprapun.
*/
.site-footer__contact { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.site-footer__contact a { display: inline-block; padding: 3px 0; color: #c8d5e4; text-decoration: none; }
.site-footer__contact a:hover { color: var(--mint-400); }

/* Patru coloane egale — subsolul rămâne simetric indiferent de câte legături
   are fiecare rubrică. */
.site-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.site-footer__nav h2 {
    margin-bottom: var(--s4);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: #fff;
}
.site-footer__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.site-footer__nav li { margin: 0; }
.site-footer__nav a { display: inline-block; padding: 3px 0; color: #8ea4bb; text-decoration: none; }
.site-footer__nav a:hover { color: #fff; }

.site-footer__bottom {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s7);
    justify-content: space-between;
    padding-top: var(--s6);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--t-xs); color: #6f8198;
}
.site-footer__bottom p { margin: 0; line-height: 1.6; }

/* Butonul plutitor de WhatsApp stă în colțul din dreapta-jos, peste subsol.
   Rândul de identificare a firmei se retrage cu lățimea lui, altfel ultimele
   caractere ale numărului de înregistrare ajung sub bulină. */
.site-footer__bottom p:last-child { text-align: right; padding-right: 72px; }

@media (max-width: 699px) {
    .site-footer__bottom p:last-child { padding-right: 0; }
}

@media (max-width: 799px) {
    .site-footer__bottom p:last-child { text-align: left; }
}

/* --------------------------------------------------------------- 19. WhatsApp */

.wa {
    position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
    z-index: 95;
    display: inline-flex; align-items: center; gap: 0;
    height: 56px; padding: 0 15px;

    /*
       Verdele de marcă al WhatsApp este #25d366; cu text alb dă 1,98:1, sub
       pragul de 3 pentru text îngroșat de 14 px. Eticheta „Scrieți-ne” apare la
       trecerea cu mouse-ul, deci este text vizibil, nu decor. Folosim verdele
       închis din aceeași paletă de marcă, #128c7e, care duce raportul peste
       prag fără să piardă recunoașterea.
    */
    background: #128c7e; color: #fff;
    border-radius: var(--r-pill);
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(18, 140, 126, .38);
    transition: gap .28s var(--ease-out), padding .28s var(--ease-out), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa:hover, .wa:focus-visible {
    color: #fff; gap: 10px; padding-right: 22px;
    transform: translateY(-2px);
    box-shadow: 0 14px 38px rgba(18, 140, 126, .48);
}
.wa__label {
    max-width: 0; overflow: hidden; white-space: nowrap;
    font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
    transition: max-width .28s var(--ease-out);
}
.wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 140px; }

/* Pe telefon eticheta rămâne ascunsă: butonul nu trebuie să acopere conținutul. */
@media (max-width: 599px) {
    .wa { height: 52px; padding: 0 13px; }
    .wa:hover .wa__label, .wa:focus-visible .wa__label { max-width: 0; }
    .wa:hover, .wa:focus-visible { padding-right: 13px; gap: 0; }
}

/* --------------------------------------------------------------- 20. Conținut editorial */

/*
 * Latimea coloanei de text.
 *
 * 44rem era latimea „de carte”, corecta tipografic dar prea ingusta langa
 * tabele si carduri pe toata latimea: pagina parea rupta in doua. 58rem
 * pastreaza randul sub ~100 de caractere si umple vizual coloana.
 */
.prose { max-width: 58rem; }
.prose h2 { margin-top: var(--s10); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--s8); }
.prose ul, .prose ol { color: var(--text); }
.prose li { margin-bottom: var(--s3); }
.prose .table-wrap { margin-bottom: var(--s7); }
.prose > p:first-of-type { font-size: var(--t-md); }

/* ----------------------------------------------------------------------------
   Document cu cuprins lateral
   ----------------------------------------------------------------------------
   Textul păstrează măsura de citit și rămâne aliniat la stânga, în aceeași
   verticală cu titlul paginii și cu firul Ariadnei. Spațiul rămas în dreapta
   primește cuprinsul, lipit de ecran la derulare.

   Coloana de text este declarată în `ch`, aceeași unitate ca măsura din
   secțiunea 34, ca să nu existe două surse pentru aceeași lățime: dacă acolo
   se schimbă măsura, coloana o urmează.
   ------------------------------------------------------------------------- */

/*
   Documentul cu cuprins lateral.

   DE CE NU `1fr` PE COLOANA CUPRINSULUI. Prima variantă scria
   `minmax(0, 62ch) minmax(0, 1fr)`: textul primea 62 de caractere, iar `1fr`
   dădea cuprinsului TOT restul. Pe un ecran de 1440 px ieșeau două coloane
   aproape egale — 535 px de text lângă 513 px de cuprins, cu un gol mare sub el.
   Adică exact ce se vedea: informația pe jumătate de pagină, lângă o listă de
   cinci rânduri lățită degeaba.

   Acum cuprinsul are lățimea lui, potrivită unei liste de titluri, iar textul
   ia restul — mărginit la o măsură de citit, ca rândurile să nu devină prea
   lungi pe ecrane late.
*/
.document {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--s6) clamp(32px, 4vw, 64px);
    align-items: start;
}

.document > .prose { max-width: 74ch; }

@media (max-width: 1029px) {
    .document { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
    .document > .prose { max-width: none; }
}

/*
   Varianta cu titlu marginal: blocul are un singur titlu, deci nu are ce pune
   într-un cuprins. Titlul iese din coloana de text și stă în stânga lui, ca
   într-un text tipărit cu titluri marginale. Ordinea în cod rămâne titlu-text,
   deci și pentru cititorul de ecran, și pentru motoarele de căutare, nimic nu
   se schimbă; se schimbă doar așezarea.
*/
.document--titlu { grid-template-columns: minmax(0, 26ch) minmax(0, 62ch); }
.document__titlu { position: sticky; top: 104px; }
.document__titlu h2 {
    margin: 0;
    font-size: clamp(1.25rem, 0.9rem + 0.6vw, 1.5rem);
    line-height: 1.2;
    text-wrap: balance;
}

@media (max-width: 1029px) {
    .document--titlu { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
    .document__titlu { position: static; }
    .document__titlu h2 { font-size: var(--t-h3, 1.5rem); }
}

.document__cuprins {
    position: sticky; top: 104px;
    padding-left: var(--s5);
    border-left: 2px solid var(--line);
}

/*
   Pe ecran îngust cuprinsul trece deasupra textului, unde o bară verticală în
   stânga nu mai are sens: devine o casetă.
*/
@media (max-width: 1029px) {
    .document__cuprins {
        position: static;
        padding: var(--s4) var(--s5);
        border-left: 0;
        border-radius: 8px;
        background: var(--surface-2, #eef2f7);
    }
}
.document__cuprins h2 {
    margin: 0 0 var(--s3);
    font-family: var(--font-display);
    font-size: var(--t-xs); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
}
.document__cuprins ol {
    display: grid; gap: 1px;
    margin: 0; padding: 0;
    list-style: none;
    counter-reset: cuprins;
}
.document__cuprins li { margin: 0; counter-increment: cuprins; }
.document__cuprins a {
    display: grid; grid-template-columns: 1.6em 1fr;
    padding: 5px 8px 5px 0;
    border-radius: 6px;
    font-size: var(--t-sm); line-height: 1.35; font-weight: 500;
    color: var(--ink-500); text-decoration: none;
}
.document__cuprins a::before {
    content: counter(cuprins) '.';
    color: var(--ink-300);
    font-variant-numeric: tabular-nums;
}
.document__cuprins a:hover { color: var(--navy-700); }
.document__cuprins a:hover::before { color: var(--mint-600); }

/*
   Sub lățimea la care cele două coloane ar deveni ambele înguste, cuprinsul
   trece deasupra textului și își pierde lipirea: un bloc lipit de ecran pe
   telefon acoperă tocmai ce se citește.
*/
@media (max-width: 1029px) {
    .document { grid-template-columns: minmax(0, 1fr); }
    .document__cuprins {
        position: static;
        order: -1;
        padding: var(--s5);
        border: 1px solid var(--line); border-radius: var(--r-lg);
        background: var(--paper-alt);
    }
    .document__cuprins ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s4); }
}

@media (max-width: 599px) {
    .document__cuprins ol { grid-template-columns: minmax(0, 1fr); }
}

.meta {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
    margin-bottom: var(--s7); padding-bottom: var(--s5);
    border-bottom: 1px solid var(--line);
    font-size: var(--t-xs); color: var(--ink-400);
}
.meta a { color: var(--ink-500); }

/* Glosar: două coloane simetrice, cu fișe egale. */
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: 0; }
.glossary__item {
    height: 100%;
    padding: var(--s5) var(--s6);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--mint-400);
    border-radius: var(--r-md);
}
.glossary dt { margin-bottom: var(--s2); font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); color: var(--navy-800); }
.glossary dd { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.glossary__item:target { border-left-color: var(--navy-700); box-shadow: var(--sh-2); }

/* --------------------------------------------------------------- 21. Mișcare */

/*
 * Apariția la derulare.
 *
 * Elementul pornește invizibil DOAR dacă JavaScript a marcat documentul cu
 * `js-on`. Fără JavaScript, regula nu se aplică și conținutul se vede normal —
 * niciodată nu ascundem text pe care nu îl putem readuce.
 */
.js-on [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.js-on [data-reveal].is-visible { opacity: 1; transform: none; }

/* Numărătoarea cifrelor — vizual identică, doar conținutul se schimbă din JS. */
.counter { font-variant-numeric: tabular-nums; }

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(47, 207, 155, .35); }
    70% { box-shadow: 0 0 0 12px rgba(47, 207, 155, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 207, 155, 0); }
}
.hero__panel-dot { animation: pulse-ring 2.6s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .js-on [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- 22. Utilitare */

.u-center { text-align: center; }
.u-center-x { margin-inline: auto; }
.u-mt-4 { margin-top: var(--s4); }
.u-mt-6 { margin-top: var(--s6); }
.u-mt-8 { margin-top: var(--s8); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-8 { margin-bottom: var(--s8); }
.u-narrow { max-width: 58rem; }
.u-note { font-size: var(--t-xs); color: var(--ink-400); }
.section--contrast .u-note { color: #7e93aa; }
.u-tabular { font-variant-numeric: tabular-nums; }
.fieldset-plain { margin: 0; padding: 0; border: 0; }

/* ==========================================================================
   23. Praguri responsive
   --------------------------------------------------------------------------
   Patru praguri, alese după cum se sparg efectiv grilele, nu după numele
   dispozitivelor: desktop ≥1200, laptop 1000–1199, tabletă 700–999,
   telefon <700.
   ========================================================================== */

/* --- laptop --- */
@media (max-width: 1199px) {
    :root { --shell: 1040px; }

    .site-nav a { padding: 8px 11px; font-size: var(--t-xs); }
    .hero__grid { gap: var(--s8); }
    .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- tabletă ---

   PRAGUL DESKTOP ESTE 1030 px, NU 1000. A fost mutat după o măsurătoare, nu
   din gust: la 1000 px antetul desfășurat depășea marginea ecranului cu 30 px,
   la 1010 cu 20, la 1020 cu 10, și încăpea abia de la 1030. Marca, meniul de
   640 px și butoanele de 302 px nu au loc pe un rând sub această lățime.

   Banda este îngustă, dar 1024 px este o rezoluție reală — tabletă în peisaj
   și monitoare vechi —, iar acolo pagina derula lateral. Sub 1030 px se
   folosește acum așezarea de tabletă, cu meniul strâns în sertar, care încape.

   Interogarea din assets/js/site.js folosește același prag. Dacă se schimbă
   aici, se schimbă și acolo: altfel sertarul și foaia de stil nu mai sunt de
   acord asupra a ce înseamnă „desktop", iar meniul rămâne într-o stare
   intermediară pe care nu o testează nimeni.
*/
@media (max-width: 1029px) {
    :root { --shell: 760px; }

    /* Navigarea trece în sertar. Butonul „Solicită cont” rămâne vizibil în
       antet: este singura acțiune pentru care există site-ul. Intrarea în cont
       a devenit un semn de 40 px, deci încape alături de el fără să îl concureze. */
    .nav-toggle { display: inline-flex; }
    .site-header__inner { gap: var(--s4); }
    .site-header__actions { margin-left: auto; }

    .site-nav {
        position: fixed; inset: 76px 0 auto 0; z-index: 95;
        margin: 0;
        padding: var(--s5) var(--gutter) var(--s7);
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--sh-3);
        transform: translateY(-12px);
        opacity: 0; visibility: hidden;
        transition: transform .25s var(--ease), opacity .2s var(--ease), visibility .25s;
    }
    .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: var(--s1); }
    .site-nav a { padding: 13px 16px; font-size: var(--t-md); border-radius: var(--r-md); }

    /*
       În sertar, submeniul nu mai plutește: se deschide în pagină, sub titlul
       lui, iar sertarul se derulează. O listă suprapusă peste sertar ar acoperi
       exact intrările pe lângă care utilizatorul tocmai a trecut.
    */
    .site-nav li.has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; background: none; }
    .site-nav li.has-sub > a { grid-column: 1; padding-right: 16px; }
    .site-nav__deschide { grid-column: 2; width: 44px; height: 44px; padding: 0; }

    .submeniu {
        grid-column: 1 / -1;
        position: static; width: auto; transform: none;
        margin: var(--s1) 0 var(--s3);
        padding: var(--s3) var(--s3) var(--s1);
        border-radius: var(--r-md);
        box-shadow: none;
        background: var(--paper-alt);
    }
    .submeniu::before { display: none; }
    /*
       `grid-auto-flow: row` NU este decorativ și nu se scoate. Regula de bază
       folosește `grid-auto-flow: column`, iar într-un grid cu flux pe coloane
       `grid-template-columns` descrie doar coloanele EXPLICITE: restul
       grupurilor primesc coloane implicite, de lățimea din
       `grid-auto-columns`. Scrisă singură, linia de mai jos părea să impună o
       coloană, dar submeniul „Module”, cu patru grupuri, se desfășura tot pe
       patru coloane pe telefon — fiecare de vreo 80 px, cu „Organigramă și
       compartimente” rupt pe patru rânduri. Fluxul se întoarce explicit pe
       rânduri, abia apoi numărul de coloane înseamnă ceva.
    */
    .submeniu__interior {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--s4) var(--s3);
    }
    .submeniu__grup a { padding: 11px 12px; font-size: var(--t-sm); }

    .site-nav { max-height: calc(100dvh - 76px); overflow-y: auto; }

    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__panel { max-width: 34rem; }

    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plans { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; }
    .plan--featured { order: -1; }
    .plan__for { min-height: 0; }

    .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .glossary { grid-template-columns: minmax(0, 1fr); }

    /* Subsolul: brandul sus, apoi rubricile pe două rânduri egale. */
    .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
    .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
}

/* --- telefon --- */
@media (max-width: 699px) {
    :root { --shell: 100%; }

    .site-header__inner { min-height: 66px; }
    .site-nav { inset-block-start: 66px; }
    .brand__name { font-size: 1.2rem; }

    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .form-grid, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .picker { grid-template-columns: minmax(0, 1fr); }
    .related__grid { grid-template-columns: minmax(0, 1fr); }

    /* Acțiunile pe toată lățimea: degetul are o țintă previzibilă. */
    .hero__actions .btn, .cta__actions .btn, .form-actions .btn { width: 100%; }
    .form-actions { flex-direction: column-reverse; }

    .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
    .site-footer__bottom { flex-direction: column; gap: var(--s2); }

    .steps { gap: var(--s1); }
    .steps li { padding: 6px 12px 6px 6px; font-size: 11px; }
    .steps li::before { width: 22px; height: 22px; }

    .summary > div { flex-direction: column; gap: 2px; }
    .summary dd { text-align: left; }

    table { min-width: 480px; }
    th, td { padding: 12px 14px; }
}

/* --- telefon mic --- */
@media (max-width: 380px) {
    .site-header__actions .btn { --btn-px: 13px; font-size: 11px; }
    .brand__name { font-size: 1.1rem; }
}

/* --- ecrane foarte late: nu lăsăm textul să se întindă la nesfârșit --- */
@media (min-width: 1600px) {
    :root { --shell: 1280px; }
}

/* --------------------------------------------------------------- 24. Contrast sporit */

@media (prefers-contrast: more) {
    :root {
        --line: #b6bfca;
        --line-strong: #7c8795;
        --muted: var(--ink-700);
    }
    .btn--outline, .card, .control { border-width: 2px; }
    :focus-visible { outline-width: 4px; }
}

/* --------------------------------------------------------------- 25. Tipărire */

/*
   Tabelul de termene ajunge pe hârtie, pe avizier și în dosare. Ce se tipărește
   trebuie să fie textul, sursele și tabelele — nu navigarea, nu butoanele și nu
   adresele interne, care pe hârtie nu duc nicăieri.
*/
@media print {
    @page { margin: 16mm 14mm; }

    .site-header, .site-footer, .cta, .wa, .nav-toggle, .related, .crumbs,
    .hero__canvas, .subnav, .trust, .mobile-cta, .cauta-form, .istoric,
    .page-head__facts, .shot, .btn, .skip-link { display: none !important; }

    html { font-size: 11pt; }
    body { color: #000; background: #fff; }
    .section { padding-block: 10px; }
    .shell { max-width: none; padding-inline: 0; }
    .prose, .post-body, .prose > p, .prose > ul, .prose > ol,
    .s-head p, .u-note, .alert { max-width: none; }

    .section--contrast, .section--alt { background: #fff !important; color: #000 !important; }
    .section--contrast h1, .section--contrast h2,
    .section--contrast h3, .section--contrast h4,
    .section--contrast p, .section--contrast li { color: #000 !important; }

    h1, h2, h3, h4 { color: #000 !important; }
    h1 { font-size: 20pt; }
    h2 { font-size: 15pt; }
    h3 { font-size: 12.5pt; }

    /* Antetul de pagină își pierde fundalul decorativ: pe hârtie, un gradient
       fie nu se vede, fie mănâncă toner. */
    .page-head, .page-head--dark { background: #fff !important; color: #000 !important; }
    .page-head__lead, .page-head__meta, .lead, .u-note { color: #333 !important; }
    .eyebrow { color: #000 !important; }
    .eyebrow::before { display: none !important; }

    /* Legăturile interne se tipăresc ca text obișnuit, subliniat. Doar cele
       externe capătă adresa alături, pentru că doar ele sunt surse. */
    a { color: #000 !important; text-decoration: underline; background-image: none !important; }

    /* Titlurile nu rămân singure la baza paginii, iar tabelele și casetele nu
       se rup între foi. */
    h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
    table, .table-wrap, .alert, .answer, .notice, figure { break-inside: avoid; page-break-inside: avoid; }
    tr, li { break-inside: avoid; }
    thead { display: table-header-group; }

    /* Adresa se scrie lângă legătură, dar numai pentru legăturile externe:
       „(/preturi)” pe hârtie este zgomot, „(legislatie.just.ro/...)” este sursa. */
    a::after { content: none; }
    a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 8.5pt;
        color: #444;
        word-break: break-all;
    }

    .table-wrap {
        border: 1px solid #999;
        overflow: visible;
        background-image: none;
    }

    table { min-width: 0; font-size: 10pt; }
    th, td { padding: 6px 8px; }
    thead th { background: #eee !important; color: #000 !important; }

    /* Intrările din întrebări frecvente se tipăresc deschise: pe hârtie nu are
       cine să dea clic. */
    details > * { display: revert !important; }
    summary { list-style: none; font-weight: 700; }
    summary::after { display: none !important; }

    /* Sursa paginii, tipărită o singură dată la final. */
    main::after {
        content: 'Sursa: ' attr(data-sursa);
        display: block;
        margin-top: 14px;
        padding-top: 8px;
        border-top: 1px solid #999;
        font-size: 9pt;
        color: #444;
    }
}

/*
 * Ancorele din glosar și din paginile juridice sunt deschise direct din
 * legături interne; fără această rezervare, antetul lipicios ar acoperi exact
 * termenul căutat.
 */
[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------- 26. Antet de pagină

   Zona care lipsea: fiecare pagină interioară începea direct cu text pe alb,
   iar firimiturile pluteau nealiniate deasupra unei coloane centrate.

   Antetul rezolvă trei lucruri deodată: ancorează vizual începutul paginii,
   aliniază firimiturile cu titlul (sunt în același container) și oferă un loc
   pentru două-trei fapte care altfel s-ar pierde în text.
*/

.page-head {
    position: relative;
    overflow: hidden;
    padding-block: var(--s6) var(--s10);
    background:
        radial-gradient(60rem 28rem at 88% -10%, rgba(47, 207, 155, .10), transparent 60%),
        radial-gradient(46rem 24rem at 8% 120%, rgba(15, 43, 76, .07), transparent 65%),
        var(--paper-alt);
    border-bottom: 1px solid var(--line);
}

/* Rețeaua fină dă textură fără să ceară o imagine. */
.page-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 43, 76, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 43, 76, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 75%);
    pointer-events: none;
}

.page-head > .shell { position: relative; }

.page-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--s10);
    align-items: end;
}

/* Fără coloana de fapte, titlul primește toată lățimea — altfel rămâne o
   coloană goală care strânge inutil rândurile. */
.page-head__grid:not(:has(.page-head__facts)) { grid-template-columns: minmax(0, 1fr); }
.page-head__grid:not(:has(.page-head__facts)) > div { max-width: 54rem; }

.page-head .crumbs { padding: 0 0 var(--s5); background: none; }
.page-head .crumbs .shell { padding: 0; max-width: none; }

.page-head h1 {
    margin: var(--s3) 0 0;
    font-size: clamp(1.75rem, 1.25rem + 1.35vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -.025em;
}

.page-head__lead {
    max-width: 62ch;
    margin: var(--s4) 0 0;
    font-size: var(--t-md);
    color: var(--muted);
}

.page-head__meta {
    margin: var(--s5) 0 0;
    font-size: var(--t-xs);
    color: var(--ink-400);
}

.page-head__meta a { color: var(--navy-700); }

/* Coloana de fapte: trei cifre sau afirmații scurte, nu un al doilea paragraf. */
.page-head__facts { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }

.page-head__facts li {
    margin: 0;
    padding-left: var(--s5);
    border-left: 2px solid var(--mint-400);
}

.page-head__facts strong {
    display: block;
    font-family: var(--font-titlu);
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--navy-800);
}

.page-head__facts span { font-size: var(--t-xs); color: var(--muted); }

/* Varianta închisă, pentru paginile care suportă greutate vizuală. */
.page-head--dark {
    background:
        radial-gradient(58rem 26rem at 85% -15%, rgba(47, 207, 155, .18), transparent 62%),
        radial-gradient(40rem 22rem at 5% 115%, rgba(52, 152, 219, .14), transparent 60%),
        var(--navy-900);
    border-bottom-color: rgba(255, 255, 255, .08);
}

.page-head--dark::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}

.page-head--dark h1 { color: #fff; }
.page-head--dark .eyebrow { color: var(--mint-400); }
.page-head--dark .page-head__lead { color: #b9c9da; }
.page-head--dark .page-head__meta { color: #8ea4bb; }
.page-head--dark .page-head__meta a { color: #d7e3f1; }
.page-head--dark .crumbs a { color: #8ea4bb; }
.page-head--dark .crumbs span { color: #d7e3f1; }
.page-head--dark .crumbs li + li::before { color: #46607d; }
.page-head--dark .page-head__facts strong { color: #fff; }
.page-head--dark .page-head__facts span { color: #9fb3c8; }

/* Pagina care începe cu antet nu mai are nevoie de spațiu dublu deasupra. */
.page-head + .section { padding-top: var(--s10); }

@media (max-width: 1029px) {
    .page-head__grid { grid-template-columns: 1fr; gap: var(--s7); align-items: start; }
    .page-head { padding-block: var(--s5) var(--s8); }
}

/*
 * Coloana îngustă de text se aliniază la stânga, în același ax cu titlul din
 * antet. Centrată, cum era, lăsa firimiturile și titlul pe o margine și textul
 * pe alta — ochiul citea două pagini diferite lipite una de alta.
 */
.shell.u-narrow {
    margin-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    margin-right: auto;
}

@media (max-width: 1199px) {
    .shell.u-narrow { margin-inline: auto; }
}

/* --------------------------------------------------------------- 27. Zone de captură

   Site-ul nu arăta produsul nicăieri. Zonele de mai jos primesc capturi reale
   din aplicație; până atunci afișează specificația, ca să se știe exact ce
   fișier lipsește și la ce rezoluție.
*/

.shot {
    margin: var(--s8) 0 0;
    border-radius: var(--r-lg);
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
    overflow: hidden;
}

.shot--narrow { max-width: 46rem; margin-inline: auto; }

/* Rama de browser: dă context imaginii, fără să pretindă că e o fotografie. */
.shot__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--paper-alt);
    border-bottom: 1px solid var(--line);
}

.shot__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.shot__bar span:first-child { background: #e8a0a0; }
.shot__bar span:nth-child(2) { background: #ecd39a; }
.shot__bar span:nth-child(3) { background: #a6d9c0; }

.shot__bar em {
    margin-left: var(--s4);
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line);
    font-size: var(--t-xs);
    font-style: normal;
    color: var(--ink-400);
}

.shot__body { position: relative; background: var(--paper-alt); }
.shot__body--16x9 { aspect-ratio: 16 / 9; }
.shot__body--16x10 { aspect-ratio: 16 / 10; }
.shot__body--4x3 { aspect-ratio: 4 / 3; }
.shot__body--phone { aspect-ratio: 9 / 19; max-width: 20rem; margin-inline: auto; }

/*
 * Caseta care nu impune nimic.
 *
 * Se pune când fișierul există: înălțimea o dă imaginea, în raportul ei real,
 * deci nu se taie nimic din captură. Spațiul dinainte de descărcare îl rezervă
 * atributele `width` și `height` de pe `<img>`, nu o regulă de aici.
 */
.shot__body--liber { aspect-ratio: auto; }

/* Captura de telefon este înaltă și îngustă: lată cât pagina ar fi absurdă. */
.shot__body--ingust { max-width: 19rem; margin-inline: auto; }

.shot__body img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot__body--liber img { height: auto; object-fit: fill; }

.shot__ph {
    position: absolute;
    inset: var(--s4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    padding: var(--s6);
    text-align: center;
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-md);
    background:
        repeating-linear-gradient(135deg, rgba(15, 43, 76, .02) 0 12px, transparent 12px 24px);
}

.shot__size {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-lg);
    color: var(--navy-700);
}

.shot__path {
    padding: 4px 10px;
    border-radius: var(--r-sm);
    background: var(--navy-050);
    font-size: var(--t-xs);
    color: var(--navy-700);
    word-break: break-all;
}

.shot__hint { max-width: 34rem; font-size: var(--t-sm); color: var(--muted); }

.shot figcaption {
    padding: var(--s4) var(--s5);
    border-top: 1px solid var(--line);
    font-size: var(--t-xs);
    color: var(--muted);
}

.section--contrast .shot { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.section--contrast .shot__bar { background: rgba(255, 255, 255, .05); border-bottom-color: rgba(255, 255, 255, .08); }
.section--contrast .shot__bar em { background: transparent; border-color: rgba(255, 255, 255, .12); color: #9fb3c8; }
.section--contrast .shot__body { background: rgba(255, 255, 255, .03); }
.section--contrast .shot__size { color: #fff; }
.section--contrast .shot__path { background: rgba(255, 255, 255, .08); color: #d7e3f1; }
.section--contrast .shot__hint,
.section--contrast .shot figcaption { color: #9fb3c8; }

/* --------------------------------------------------------------- 28. Sub-navigație */

.subnav {
    position: sticky;
    top: 64px;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
}

.subnav ul {
    display: flex;
    gap: var(--s6);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.subnav ul::-webkit-scrollbar { display: none; }

.subnav li { margin: 0; flex-shrink: 0; }

.subnav a {
    display: block;
    padding: 14px 0;
    border-bottom: 2px solid transparent;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.subnav a:hover { color: var(--navy-700); border-bottom-color: var(--mint-400); }

/* --------------------------------------------------------------- 29. Bandă de încredere */

.trust { padding-block: var(--s8); background: var(--paper-tint); border-block: 1px solid var(--line); }

.trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--s6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.trust__grid li { margin: 0; }

.trust__grid strong {
    display: block;
    margin-bottom: var(--s1);
    font-family: var(--font-display);
    font-size: var(--t-md);
    color: var(--navy-800);
}

.trust__grid span { font-size: var(--t-xs); color: var(--muted); }

/* --------------------------------------------------------------- 30. Bară de acțiune pe telefon */

.mobile-cta { display: none; }

@media (max-width: 699px) {
    .mobile-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(160%) blur(10px);
        border-top: 1px solid var(--line);
    }

    /* Butonul plutitor de WhatsApp urcă, ca să nu se suprapună. */
    .wa { bottom: 84px; }

    body { padding-bottom: 72px; }
}

/* --------------------------------------------------------------- 31. Componente editoriale */

.pull {
    margin: var(--s8) 0;
    padding: var(--s6) var(--s7);
    border-left: 3px solid var(--mint-400);
    background: var(--paper-tint);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

.pull p {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    line-height: 1.45;
    color: var(--navy-800);
}

.pull cite { display: block; margin-top: var(--s3); font-size: var(--t-xs); font-style: normal; color: var(--muted); }

/* Pași numerotați, legați printr-o linie — ordinea se vede, nu se deduce. */
.timeline { counter-reset: pas; margin: var(--s7) 0 0; padding: 0; list-style: none; }

.timeline li {
    position: relative;
    margin: 0;
    padding: 0 0 var(--s7) var(--s10);
}

.timeline li::before {
    counter-increment: pas;
    content: counter(pas);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--navy-700);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--t-sm);
}

.timeline li::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 40px;
    bottom: 6px;
    width: 2px;
    background: linear-gradient(var(--line-strong), transparent);
}

.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }

.timeline h3 { margin: 4px 0 var(--s2); font-size: var(--t-md); }
.timeline p { margin: 0; color: var(--muted); font-size: var(--t-sm); }

/* --------------------------------------------------------------- 32. Micro-interacțiuni

   Suficient cât pagina să răspundă la mână, nu cât să distragă. Toate se
   dezactivează la `prefers-reduced-motion`, împreună cu restul animațiilor.
*/

.card--hover { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--navy-100); }

/* Sublinierea crește dinspre stânga, în loc să apară dintr-odată. */
.prose a:not(.btn),
.related__grid a strong,
.page-head__meta a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    transition: background-size .3s var(--ease-out);
}

.prose a:not(.btn) { background-size: 100% 1px; }
.prose a:not(.btn):hover { background-size: 0 1px; text-decoration: underline; }
.related__grid a:hover strong,
.page-head__meta a:hover { background-size: 100% 1px; }

.plan { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }

.glossary__item { transition: border-left-color .2s var(--ease), box-shadow .2s var(--ease); }
.glossary__item:hover { border-left-color: var(--navy-700); box-shadow: var(--sh-1); }

.shot { transition: box-shadow .3s var(--ease); }
.shot:hover { box-shadow: var(--sh-3); }

@media (prefers-reduced-motion: reduce) {
    .card--hover:hover,
    .plan:hover { transform: none; }
}

/* ==========================================================================
   33. Blog — listare
   --------------------------------------------------------------------------
   Cardurile au înălțimi diferite, pentru că titlurile au lungimi diferite:
   grila le egalează, ca rândul să nu arate rupt. Întreg cardul este zonă de
   click, nu doar titlul — pe telefon, o țintă de 44px nu se nimerește ușor.
   ========================================================================== */

.posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.posts > li { margin: 0; }

.post__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.post__link:hover {
    transform: translateY(-4px);
    border-color: var(--navy-100);
    box-shadow: var(--sh-3);
}

.post__cat {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: var(--s4);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--navy-050);
    color: var(--navy-600);
    font-size: var(--t-xs);
    font-weight: 600;
}

.post__title {
    margin: 0 0 var(--s3);
    font-size: var(--t-md);
    line-height: 1.35;
    color: var(--navy-800);
}

.post__desc {
    flex: 1;
    margin: 0 0 var(--s5);
    color: var(--muted);
    font-size: var(--t-sm);
}

.post__meta {
    display: block;
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    color: var(--ink-400);
    font-size: var(--t-xs);
}

.post__link:hover .post__title { color: var(--navy-600); }

.subnav a[aria-current='true'] {
    color: var(--navy-700);
    font-weight: 600;
    border-bottom-color: var(--mint-400);
}

/* ==========================================================================
   34. Blog — articol
   --------------------------------------------------------------------------
   Coloana de text rămâne îngustă chiar dacă ecranul este lat: un rând de 100
   de caractere se citește greu, oricât spațiu ar fi disponibil.
   ========================================================================== */

.post-body .prose { max-width: none; }

.answer {
    margin-bottom: var(--s8);
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--mint-100);
    border: 1px solid #b9e9d5;
    border-left: 4px solid var(--mint-500);
    border-radius: var(--r-lg);
}

.answer h2 {
    margin: 0 0 var(--s3);
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mint-600);
}

.answer__text {
    margin: 0;
    font-size: var(--t-md);
    line-height: 1.7;
    color: var(--ink-900);
}

.toc {
    margin-bottom: var(--s8);
    padding: clamp(18px, 2vw, 24px);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.toc h2 {
    margin: 0 0 var(--s3);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s2); }
.toc li { margin: 0; font-size: var(--t-sm); }
.toc a { color: var(--navy-700); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Ancorele nu trebuie să ajungă sub antetul lipicios. */
.prose h2[id], .prose h3[id] { scroll-margin-top: 88px; }

.notice {
    margin-top: var(--s9);
    padding: clamp(18px, 2vw, 24px);
    background: #fef6e7;
    border: 1px solid #f7e0b0;
    border-radius: var(--r-lg);
}

.notice h2 { margin: 0 0 var(--s3); font-size: var(--t-md); color: #8a5a06; }
.notice p { margin: 0 0 var(--s3); font-size: var(--t-sm); color: #6f4a08; }
.notice p:last-child { margin-bottom: 0; }
.notice a { color: #6f4a08; }

.sources {
    margin-top: var(--s8);
    padding-top: var(--s6);
    border-top: 1px solid var(--line);
}

.sources h2 { font-size: var(--t-md); margin-bottom: var(--s4); }
.sources ul { margin: 0 0 var(--s4); padding-left: 1.1rem; }
.sources li { margin-bottom: var(--s2); font-size: var(--t-sm); color: var(--muted); }
.sources a { color: var(--navy-700); }

.bio {
    display: flex;
    gap: var(--s5);
    align-items: flex-start;
    margin-top: var(--s9);
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--navy-050);
    border: 1px solid var(--navy-100);
    border-radius: var(--r-lg);
}

.bio__avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--navy-700);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
}

.bio h2 { margin: 0 0 var(--s2); font-size: var(--t-md); }
.bio p { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--muted); }
.bio__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; }
.bio__links a { color: var(--navy-700); font-size: var(--t-xs); font-weight: 600; }

/* Tabelele din articole scapă de coloana îngustă, fără să depășească ecranul. */
.post-body .table-wrap { max-width: 100%; }

@media (max-width: 1029px) {
    .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
    .posts { grid-template-columns: minmax(0, 1fr); }
    .bio { flex-direction: column; gap: var(--s4); }
}

/* ==========================================================================
   35. Lista de întrebări scurte
   ========================================================================== */

.qa-list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.qa-list li { margin: 0; }

.qa-list a {
    display: block;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--navy-100);
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: border-left-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.qa-list a:hover {
    border-left-color: var(--mint-500);
    box-shadow: var(--sh-2);
    transform: translateX(3px);
}

.qa-list strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: var(--t-base);
    color: var(--navy-800);
}

.qa-list span { display: block; font-size: var(--t-sm); color: var(--muted); }

/* ----------------------------------------------------------------------------
   Varianta pe patru coloane
   ----------------------------------------------------------------------------
   Lista pe un singur rând funcționează la opt intrări; la douăzeci și șase
   devine un sul. Pe patru coloane, aceleași intrări intră într-un ecran și se
   citesc prin scanare, nu prin derulare.

   Accentul se mută de pe latura stângă pe cea de sus: într-o grilă, liniile
   verticale din stânga fiecărei coloane se citesc ca margini de tabel, nu ca
   accente. Și mișcarea de la trecerea cu mouse-ul se schimbă din deplasare
   laterală în ridicare — la patru cartonașe alăturate, o alunecare spre
   dreapta pare că împinge vecinul.
   ------------------------------------------------------------------------- */
.qa-list--4 {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s4);
    --coloane: 4;
}
.qa-list--4 > li {
    flex: 0 1 calc((100% - (var(--coloane) - 1) * var(--s4)) / var(--coloane));
    min-width: 0;
}
.qa-list--4 a {
    height: 100%;
    padding: var(--s5);
    border-left: 1px solid var(--line);
    border-top: 3px solid var(--navy-100);
    transition: border-top-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.qa-list--4 a:hover {
    border-left-color: var(--line);
    border-top-color: var(--mint-500);
    transform: translateY(-3px);
}
.qa-list--4 strong { font-size: var(--t-sm); line-height: 1.35; margin-bottom: var(--s2); }
.qa-list--4 span { font-size: var(--t-xs); line-height: 1.55; }

@media (max-width: 1199px) { .qa-list--4 { --coloane: 3; } }
@media (max-width: 899px)  { .qa-list--4 { --coloane: 2; } }
@media (max-width: 599px)  { .qa-list--4 { --coloane: 1; } }

/* Articolele recente pe pagina principală. */
.latest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.latest li { margin: 0; }

@media (max-width: 1029px) {
    .latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

.glossary__more {
    display: inline-block;
    margin-top: var(--s2);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--navy-700);
    white-space: nowrap;
}

.glossary__more::after { content: ' →'; }

/* Istoricul modificărilor de conținut. */
.changes { margin: var(--s6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s4); }

.changes li {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--s4);
    margin: 0;
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
}

.changes li:last-child { border-bottom: 0; padding-bottom: 0; }
.changes time { font-size: var(--t-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.changes span { font-size: var(--t-sm); color: var(--text); }

@media (max-width: 699px) {
    .changes li { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
}

/* ==========================================================================
   36. Navigarea secvențială între articole
   ========================================================================== */

.seq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
    margin-top: var(--s9);
    padding-top: var(--s6);
    border-top: 1px solid var(--line);
}

.seq__item {
    display: block;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.seq__item:hover { border-color: var(--navy-100); box-shadow: var(--sh-2); transform: translateY(-2px); }

/* Când există un singur vecin, el rămâne pe latura care îi corespunde. */
.seq__item--next { grid-column: 2; text-align: right; }

.seq__label { display: block; margin-bottom: 4px; font-size: var(--t-xs); color: var(--muted); }
.seq__label::before { content: '← '; }
.seq__item--next .seq__label::before { content: ''; }
.seq__item--next .seq__label::after { content: ' →'; }

.seq__item strong {
    font-family: var(--font-display);
    font-size: var(--t-sm);
    line-height: 1.35;
    color: var(--navy-800);
}

@media (max-width: 699px) {
    .seq { grid-template-columns: minmax(0, 1fr); }
    .seq__item--next { grid-column: 1; text-align: left; }
    .seq__item--next .seq__label::before { content: '→ '; }
    .seq__item--next .seq__label::after { content: ''; }
}

/* ==========================================================================
   37. Logoul vectorizat
   --------------------------------------------------------------------------
   Fișierul este inserat direct în pagină și folosește `currentColor`, deci
   preia culoarea textului: albastru instituțional în antet, alb în subsol.
   Se dimensionează pe înălțime, iar lățimea urmează raportul desenului.
   ========================================================================== */

/*
   Înălțimea mărcii stă într-o variabilă, nu direct pe desen, pentru că din ea
   se calculează și alinierea sloganului. Un prag care schimbă înălțimea
   logoului mută automat și sloganul; scrise separat, cele două s-ar desincroniza
   la prima modificare.
*/
.brand { --logo-h: 42px; }
.brand__logo { display: inline-flex; color: var(--navy-700); }
.brand__logo svg { display: block; height: var(--logo-h); width: auto; }
.brand--footer .brand__logo { color: #fff; }
.brand:hover .brand__logo { opacity: .85; }

/*
   Marca stă peste slogan, nu lângă el: pe lățimea antetului, coloana de
   navigare are nevoie de fiecare pixel, iar un slogan așezat alături ar
   împinge meniul peste marginea ecranului la lățimi medii.
*/
.brand--marca { flex-direction: column; align-items: flex-start; gap: 0; }

/*
   Sloganul începe sub litera E din „EDILO”, nu sub scut.
   Aliniat la marginea din stânga a întregului logo, ar sta sub zona grafică și
   ar părea legat de ea, nu de nume. Decalajul se calculează din înălțimea
   mărcii: în desen, cuvântul începe la 0,955 din înălțimea lui, iar raportul se
   păstrează la orice dimensiune, deci o singură înmulțire ajunge pentru toate
   pragurile.
*/
/*
   Distanța pe verticală se ia tot din înălțimea mărcii, ca și decalajul din
   stânga. Desenul are sub cuvântul „EDILO” o bandă goală proprie — partea de
   viewBox rezervată coborâtoarelor — iar aceea se adaugă peste orice spațiu
   pus aici. Un `gap` fix de câțiva pixeli arăta, la dimensiunea din antet, ca
   un rând întreg de distanță. Marginea negativă anulează banda goală, iar
   fiind proporțională, raportul rămâne același și în antetul strâns, și pe
   telefon, și în subsol.
*/
.brand__slogan {
    padding-left: calc(var(--logo-h) * 0.955);
    margin-top: calc(var(--logo-h) * -0.27);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .005em;
    color: var(--ink-700);
    white-space: nowrap;
}
.brand--footer .brand__slogan { color: rgba(255, 255, 255, .78); }
.brand:hover .brand__slogan { color: var(--navy-600); }
.brand--footer:hover .brand__slogan { color: rgba(255, 255, 255, .92); }

/* Antetul se strânge la derulare; logoul îl urmează, ca să nu sară rândul. */
.site-header.is-stuck .brand { --logo-h: 36px; }

@media (max-width: 599px) {
    .brand { --logo-h: 34px; }
    .site-header.is-stuck .brand { --logo-h: 32px; }
}

/*
   Sloganul se retrage din antet acolo unde ar împinge butoanele peste marginea
   ecranului: între 1000 și 1549 px meniul este încă desfășurat pe toată
   lățimea, iar sub 1000 px el s-a strâns deja în buton, deci locul revine. Sub
   360 px rămâne doar marca. În subsol sloganul apare întotdeauna.

   PRAGUL DE SUS ERA 1199 px ȘI ERA GREȘIT — nu de acum, ci dintotdeauna.
   Măsurat în browser pe `/analiza-digilocal`, cu sloganul afișat, depășirea pe
   orizontală era: 130 px la 1200, 90 la 1280, 47 la 1366, 30 la 1400, 10 la
   1440 și 0 abia de la 1500 în sus. Adică fix lățimile de laptop obișnuite —
   1366 și 1440 — arătau o pagină care derulează lateral.

   Defectul nu se vedea pentru că bancul de așezare măsura o singură lățime,
   1440 px, unde sloganul scurt de dinainte încăpea la limită. Patru caractere
   în plus l-au scos la iveală; nu le-au produs. De aceea pragul nou nu este
   ales „cu marjă", ci din măsurătoare, iar bancul măsoară acum toată banda.

   `white-space: nowrap` de mai sus este motivul pentru care marca nu poate
   ceda: sloganul nu se rupe în două rânduri, deci împinge. Se păstrează —
   un slogan tăiat în mijlocul cuvântului arată mai rău decât unul absent.
*/
@media (min-width: 1030px) and (max-width: 1549px) {
    .site-header .brand__slogan { display: none; }
}

@media (max-width: 599px) {
    .site-header .brand__slogan { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .brand__logo svg { transition: height .28s var(--ease-out), opacity .2s var(--ease); }
    .brand__slogan { transition: padding-left .28s var(--ease-out), margin-top .28s var(--ease-out); }
}

/* ===========================================================================
   34. Lungimea rândului
   ---------------------------------------------------------------------------
   Ochiul citește confortabil rânduri de 60–75 de caractere. Peste 85, revenirea
   la începutul rândului următor începe să greșească linia. Limitele sunt
   exprimate în `ch`, nu în `rem`, ca să se ajusteze singure când se schimbă
   corpul de literă; se aplică numai textului curgător, nu grilelor sau
   tabelelor, care trebuie să rămână late.
   ========================================================================== */

/*
   Unitatea `ch` este lățimea cifrei zero, mai lată decât media literelor: la
   Inter, 1ch ≈ 1,27 caractere reale. Valorile de mai jos sunt alese ca măsura
   efectivă să cadă în 70–76 de caractere, verificată în browser, nu presupusă.
*/

.prose { max-width: 58ch; }
.prose .lead { max-width: 52ch; }
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote { max-width: 58ch; }

/* Caseta de atenționare se strânge ea însăși: un chenar lat cu text îngust
   lasă un gol care pare o eroare de aranjare. */
.alert { max-width: 70ch; }

/* Pe articole și pe paginile de răspuns, lățimea o dă containerul: casetele
   („Pe scurt”, cuprinsul, sursele) și textul trebuie să înceapă și să se
   termine pe aceeași verticală. Se îngustează containerul, nu paragrafele
   din el.

   Containerul ocupă toată zona de conținut. Anterior era mărginit la 40rem,
   adică 640 px într-o zonă de 1200: articolul se vedea pe jumătate de lățime,
   cu jumătate de ecran gol în dreapta. */
.post-body { max-width: none; }
.post-body .prose > p,
.post-body .prose > ul,
.post-body .prose > ol,
.post-body .prose > blockquote { max-width: none; }

.s-head p { max-width: 54ch; }
.s-head--center p { margin-inline: auto; }

.u-note,
.field__hint,
.page-head__meta,
.notice > p,
.notice > ul,
.faq details > p,
.faq details > ul { max-width: 60ch; }

.u-center.u-note,
.s-head--center .u-note { margin-inline: auto; }

/* ===========================================================================
   35. Semnalul de derulare laterală
   ---------------------------------------------------------------------------
   Tabelele ajung la 501 px într-un ecran de 390, iar sub-navigația la 703 px.
   Derularea funcționează, dar nimic nu o anunță: cititorul vede un tabel care
   pare complet și nu află că există o coloană în dreapta. Umbrele de mai jos
   sunt fixate de conținut (`background-attachment: local`), deci apar doar cât
   timp mai există ceva în direcția respectivă și dispar la capăt. Fără
   JavaScript și fără markup nou.
   ========================================================================== */

.table-wrap,
.subnav ul {
    background-image:
        linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper) 70%),
        linear-gradient(to right, rgba(15, 43, 76, .2), rgba(15, 43, 76, 0)),
        linear-gradient(to left, rgba(15, 43, 76, .2), rgba(15, 43, 76, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 18px 100%, 18px 100%;
    background-attachment: local, local, scroll, scroll;
}

/*
   Sub-navigația are fundal semitransparent, deci masca nu poate fi opacă: se
   folosește aceeași tehnică, cu straturile de acoperire în culoarea hârtiei.
   Fără ele, umbrele ar rămâne vizibile și când nu mai e nimic de derulat —
   exact ce se întâmplă pe ecran lat, unde toate rubricile încap.
*/
.subnav ul {
    background-image:
        linear-gradient(to right, var(--paper) 45%, rgba(255, 255, 255, 0)),
        linear-gradient(to left, var(--paper) 45%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(15, 43, 76, .22), rgba(15, 43, 76, 0)),
        linear-gradient(to left, rgba(15, 43, 76, .22), rgba(15, 43, 76, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-size: 36px 100%, 36px 100%, 18px 100%, 18px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ===========================================================================
   36. Tabelele de termene ca fișe, pe telefon
   ---------------------------------------------------------------------------
   Sub 640 px, derularea laterală pe tabelul de termene este o piedică reală:
   este pagina cea mai citită de pe telefon, iar coloana „Temei” rămâne mereu
   ascunsă. Fiecare rând devine o fișă, cu eticheta coloanei luată din
   `data-eticheta`. Structura semantică a tabelului rămâne neatinsă — se
   schimbă numai afișarea.
   ========================================================================== */

@media (max-width: 639px) {
    .table-wrap--fise {
        overflow-x: visible;
        border: 0;
        background: transparent;
        background-image: none;
    }

    .table-wrap--fise table { min-width: 0; display: block; }
    .table-wrap--fise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .table-wrap--fise tbody { display: block; }

    .table-wrap--fise tbody tr {
        display: block;
        margin-bottom: var(--s4);
        padding: var(--s5);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--paper);
    }

    .table-wrap--fise tbody tr:last-child { margin-bottom: 0; }
    .table-wrap--fise tbody tr:hover { background: var(--paper); }

    .table-wrap--fise tbody th,
    .table-wrap--fise tbody td {
        display: block;
        padding: 0;
        border-bottom: 0;
    }

    .table-wrap--fise tbody th {
        margin-bottom: var(--s3);
        font-family: var(--font-display);
        font-size: var(--t-md);
        font-weight: 700;
        color: var(--heading);
    }

    .table-wrap--fise tbody td { margin-top: var(--s3); }

    .table-wrap--fise tbody td::before {
        content: attr(data-eticheta);
        display: block;
        margin-bottom: 2px;
        font-size: var(--t-xs);
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--ink-400);
    }
}

/* ===========================================================================
   37. Randarea secțiunilor din afara ecranului
   ---------------------------------------------------------------------------
   Paginile lungi au până la nouă secțiuni, pe care browserul le așază toate la
   încărcare. Cu `content-visibility` sare peste așezarea și desenarea celor din
   afara ecranului până se apropie de ele, iar `contain-intrinsic-size`
   păstrează înălțimea estimată, ca bara de derulare să nu sară.

   Se aplică numai pe paginile de prezentare. Pe articole și pe paginile cu
   răspunsuri NU se aplică: acolo căutarea în pagină trebuie să găsească tot.
   ========================================================================== */

.pagina-lunga .section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* La tipărire nu există „în afara ecranului”: totul trebuie să ajungă pe
   hârtie. La fel, intrările din întrebări frecvente se tipăresc deschise. */
@media print {
    .pagina-lunga .section:not(:first-of-type) { content-visibility: visible; }
    .faq details > * { display: revert; }
}

/* ===========================================================================
   38. Intrările din întrebări frecvente, adresabile
   ---------------------------------------------------------------------------
   Fiecare `<details>` are acum identificator propriu, deci antetul lipicios de
   67 px trebuie compensat la sărirea către el. Intrarea deschisă din adresă se
   marchează o clipă, ca să se vadă unde a ajuns cititorul.
   ========================================================================== */

.faq details { scroll-margin-top: 88px; }
.faq details:target,
.faq details.is-tinta { border-color: var(--mint-500); box-shadow: 0 0 0 3px rgba(39, 174, 128, .16); }
.section--contrast .faq details:target,
.section--contrast .faq details.is-tinta { border-color: var(--mint-400); }

/* Capcana de roboți: copilul poziționat nu este tăiat de părintele ascuns. */
.visually-hidden > input { position: absolute; inset: 0; width: 100%; }


/* ===========================================================================
   40. Ținte de atingere pe telefon
   ---------------------------------------------------------------------------
   Recomandarea este 44 px pe latura mică. Măsurate la 390 px, patru grupuri
   erau sub prag: firimiturile (22 px), legăturile din subsol (16 px), rândul
   de meta din articol (15 px) și cuprinsul articolului (sub 30 px).

   Se rezolvă prin spațiere internă, nu prin mărirea literei: textul rămâne la
   dimensiunea lui, dar zona sensibilă crește. Marja negativă compensează, ca
   ritmul vertical al paginii să nu se schimbe.
   ========================================================================== */

@media (max-width: 699px) {
    /*
       CORECȚIE. Prima variantă a acestui bloc mărea zona sensibilă cu spațiere
       interioară și o anula cu marjă negativă, ca ritmul vertical să rămână
       neschimbat. Trucul funcționează numai dacă distanța dintre elemente este
       mai mare decât dublul spațierii adăugate. În subsol nu era: casetele
       vecine ajungeau să se suprapună cu șase pixeli, iar degetul care apăsa în
       zona de suprapunere nimerea altă legătură decât cea citită.

       Acolo unde legăturile stau una sub alta — subsolul —, marja negativă a
       fost scoasă și lista crește pe înălțime. Este singura variantă în care
       ținta este și mare, și a ei. Acolo unde legăturile stau pe un rând, între
       alt text — firimituri, meta de articol —, marja negativă rămâne: acolo nu
       are ce să se suprapună pe verticală.
    */
    .crumbs a,
    .crumbs span,
    .post__meta a,
    .page-head__meta a,
    .toc a {
        display: inline-block;
        padding-block: 11px;
        margin-block: -11px;
    }
}

/*
   Pe ecran lat, blocul de mai sus nu se aplică, iar firimiturile rămâneau la
   21,8 px — sub minimul de 24 px cerut de criteriul 2.5.8 din WCAG 2.2, care nu
   face deosebire între atingere și maus. Aceeași spațiere, mai mică, aplicată
   peste tot; marja negativă păstrează ritmul vertical.
*/
@media (min-width: 700px) {
    .crumbs a,
    .crumbs span {
        display: inline-block;
        padding-block: 3px;
        margin-block: -3px;
    }

    .site-footer__contact a,
    .site-footer__nav a {
        display: block;
        padding-block: 10px;
        margin-block: 0;
    }

    .site-footer__contact li,
    .site-footer__nav li { margin-bottom: 0; }
    .site-footer__contact { gap: 2px; }
    .site-footer__nav ul { gap: 2px; }
    .toc li + li { margin-top: var(--s2); }

    /* Legăturile care ocupă singure un rând — listele de surse, trimiterile
       din glosar, paragrafele formate dintr-o singură legătură. O legătură din
       mijlocul unei propoziții NU intră aici: mărirea ei ar rupe rândul, iar
       WCAG o exceptează tocmai din acest motiv. */
    .prose li > a:only-child,
    .prose p > a:only-child,
    .sources li > a:only-child,
    .faq details > p > a:only-child,
    .card p > a:only-child,
    .glossary__more {
        display: inline-block;
        padding-block: 12px;
        margin-block: -12px;
    }

    .prose li + li,
    .sources li + li { margin-top: var(--s3); }

    /* Marca din antet și din subsol: zona sensibilă crește fără ca desenul
       să se miște. */
    .brand { padding-block: 7px; }
}

/* ===========================================================================
   41. Căutarea pe site
   ---------------------------------------------------------------------------
   Formularul și lista de rezultate. Rezultatul este un card-legătură întreg,
   nu un titlu subliniat: pe telefon, ținta de atingere este tot blocul.
   ========================================================================== */

.cauta-form {
    display: flex;
    gap: var(--s3);
    max-width: 44rem;
}

.cauta-form .control { flex: 1 1 auto; min-width: 0; }
.cauta-form .btn { flex: 0 0 auto; }

.rezultate {
    margin: var(--s5) 0 0;
    padding: 0;
    list-style: none;
    max-width: 52rem;
}

.rezultate li + li { margin-top: var(--s3); }

.rezultate a {
    display: block;
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.rezultate a:hover {
    border-color: var(--navy-100);
    box-shadow: var(--sh-1);
    color: inherit;
}

.rezultate__tip {
    display: inline-block;
    margin-bottom: var(--s2);
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--paper-alt);
    font-family: var(--font-display);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.rezultate strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--t-md);
    line-height: 1.3;
    color: var(--navy-800);
}

.rezultate__desc {
    display: block;
    margin-top: var(--s2);
    font-size: var(--t-sm);
    color: var(--muted);
    max-width: 60ch;
}

@media (max-width: 559px) {
    .cauta-form { flex-direction: column; }
    .cauta-form .btn { width: 100%; }
}

/* Formularul de căutare din pagina 404 stă pe fond întunecat și centrat. */
.cauta-form--404 {
    margin: 0 auto var(--s6);
    max-width: 34rem;
}

.section--contrast .cauta-form .control {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}

.section--contrast .cauta-form .control::placeholder { color: #8ea4bb; }
.section--contrast .cauta-form .control:focus { border-color: var(--mint-400); }

/* --------------------------------------------- 41. Pagina de analiză

   Folosită de /analiza-digilocal — pagina-țintă a campaniilor de presă. Nu
   introduce culori noi: reia navy-700 și mint-500 din token-uri, pentru că
   aceleași două culori apar și în graficul care pleacă la redacții.

   Regula de fond a paginii este vizuală, nu doar redacțională: cifrele oficiale
   și estimările proprii NU au voie să arate la fel. De aceea marcajul are două
   variante, iar cea de estimare este cea implicită — dacă cineva uită
   modificatorul, rezultatul este „estimare”, adică partea prudentă.
*/

/*
 * Textul pe toată zona de conținut, nu pe jumătate.
 *
 * Restul site-ului mărginește paragrafele la o măsură de citit — 58 ch textul
 * curent, 54 ch descrierea de sub titlul de secțiune, 60 ch notele. Pe pagini
 * de prezentare, unde lângă text stau cartonașe, este exact ce trebuie. Aici,
 * unde fiecare secțiune are alături un tabel de cinci coloane sau un grafic lat
 * cât pagina, textul îngust lăsa jumătatea dreaptă goală și rupea alinierea cu
 * ce urma sub el.
 *
 * Nu se modifică regulile generale: se numește calea, prin clasa de pe <body>,
 * exact cum face `.post-body` pe articolele de blog. Fiecare selector de mai
 * jos îl repetă pe cel implicit cu o clasă în plus, deci câștigă prin
 * specificitate, nu prin `!important`.
 */
.pagina-analiza .prose,
.pagina-analiza .s-head { max-width: none; }

.pagina-analiza .prose > p,
.pagina-analiza .prose > ul,
.pagina-analiza .prose > ol,
.pagina-analiza .prose > blockquote,
.pagina-analiza .prose .lead { max-width: none; }

/*
 * Titlurile marginale rămân, coloana de text se lățește.
 *
 * `aseaza_cuprinsul()` rearanjează singur orice bloc `.prose`: un bloc cu un
 * singur titlu devine `.document--titlu`, adică titlu în stânga și text într-o
 * coloană de 62 ch în dreapta. Pe ecran lat asta lăsa textul pe jumătate de
 * pagină, exact lucrul pe care îl reproșa și comentariul de la `.document`.
 * Aici coloana de text primește tot ce rămâne; titlul marginal se păstrează,
 * pentru că el ajută ochiul să găsească subiectul blocului.
 */
/*
 * Titlul deasupra textului, nu lângă el.
 *
 * `aseaza_cuprinsul()` transformă orice bloc `.prose` cu un singur titlu în
 * `.document--titlu`: titlu marginal în stânga, text într-o coloană de 62 ch.
 * Este o așezare frumoasă pe pagini de prezentare, dar pe această pagină lăsa
 * textul pe două treimi de lățime, lângă tabele și un grafic care se întind pe
 * toată zona de conținut — iar alinierea dintre ele se rupea.
 *
 * Aici titlul urcă deasupra, iar textul ia toată lățimea. Regula NU are nevoie
 * de interogare de mediu: pe ecrane mici site-ul colapsează oricum blocul pe o
 * coloană, deci cele două spun același lucru. (O primă variantă lăsa titlul
 * marginal și lărgea doar coloana de text — și, cântărind (0,2,0), bătea
 * colapsarea de la `max-width: 1029px`, care cântărește (0,1,0): pe 390 px
 * pagina derula lateral cu 118 px.)
 */
.pagina-analiza .document--titlu { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.pagina-analiza .document__titlu { position: static; }


.pagina-analiza .s-head p,
.pagina-analiza .u-note,
.pagina-analiza .page-head__lead,
.pagina-analiza .alert { max-width: none; }

.analiza-rezumat {
    border: 1px solid var(--line);
    border-left: 4px solid var(--mint-500);
    border-radius: var(--r-lg);
    background: var(--paper-alt);
    padding: var(--s6) var(--s6) var(--s5);
}

.analiza-rezumat h2 { margin: 0 0 var(--s4); font-size: var(--t-lg); }
.analiza-rezumat ul { margin: 0; padding-left: var(--s5); }
.analiza-rezumat li { margin-bottom: var(--s3); }
.analiza-rezumat li:last-child { margin-bottom: 0; }
.analiza-rezumat strong { color: var(--heading); }
.analiza-rezumat .u-note { margin: var(--s5) 0 0; }

/* Marcajul din capul de tabel. Implicit spune „estimare”. */
.analiza-marcaj {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--navy-050);
    border: 1px solid var(--line-strong);
    color: var(--ink-400);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
}

.analiza-marcaj--oficial {
    background: var(--mint-100);
    border-color: var(--mint-500);
    color: var(--mint-700);
}

.analiza-grafic { margin: 0; }
/*
 * Calea este scrisă întreagă, nu din capriciu.
 *
 * Reseturile au, mai sus, `svg:not([width]) { width: 1.25em; height: 1.25em }`
 * — regula care împiedică icoanele fără dimensiune să umple pagina. Selectorul
 * ei cântărește (0,1,1), pentru că `:not([width])` numără ca atribut; o clasă
 * simplă, (0,1,0), pierde în fața ei. Graficul a ieșit lat de șase pixeli,
 * corect desenat și invizibil.
 *
 * Nu se rezolvă cu `!important` și nici cu o excepție adăugată în reset, care
 * ar pune pagina de analiză în regula generală a icoanelor. Se numește calea:
 * svg-ul graficului este copilul figurii lui, deci (0,2,0) — câștigă pentru că
 * descrie structura, nu pentru că strigă mai tare.
 */
.analiza-grafic > .analiza-grafic__svg { display: block; width: 100%; height: auto; }

.analiza-grafic__eticheta {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    fill: var(--heading);
}

.analiza-grafic__valoare {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    fill: var(--ink-500);
}

.analiza-grafic__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s6);
    margin: var(--s5) 0 var(--s4);
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: var(--muted);
}

.analiza-grafic__legenda li { display: flex; align-items: center; gap: var(--s2); }

.analiza-grafic__cheie {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.analiza-grafic__cheie--hw { background: var(--navy-700); }
.analiza-grafic__cheie--sw { background: var(--mint-500); }

.analiza-citat {
    margin: 0;
    padding: var(--s7);
    border-radius: var(--r-lg);
    background: var(--navy-700);
    color: #fff;
}

.analiza-citat p {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-lg);
    line-height: 1.55;
    color: #fff;
}

.analiza-citat footer {
    margin-top: var(--s5);
    padding-top: var(--s4);
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: var(--t-sm);
}

.analiza-citat footer strong { display: block; color: #fff; }
.analiza-citat footer span { color: #9fb3c8; }
.analiza-citat footer a { color: var(--mint-400); }

@media (max-width: 639px) {
    .analiza-citat { padding: var(--s5); }
    .analiza-citat p { font-size: var(--t-md); }
    .analiza-grafic__eticheta { font-size: 17px; }
    .analiza-grafic__valoare { font-size: 17px; }
}

/*
 * Echivalentul în euro stă sub suma în lei, în aceeași celulă.
 *
 * A avut coloana lui și tabelul ieșea din pagină: cinci coloane cu capete lungi
 * dădeau 1293 px într-o zonă de conținut de 1120, deci ultima coloană — tocmai
 * cea cu partea de software, adică miezul analizei — se vedea numai după o
 * derulare laterală pe care mulți nu o încearcă. Euro este oricum orientativ;
 * își pierde nimic stând ca rând secundar sub cifra care contează.
 */
.analiza-euro { display: block; font-size: var(--t-xs); color: var(--ink-400); font-weight: 400; }

/* ===========================================================================
   42. Pagina de comandă
   ---------------------------------------------------------------------------
   Formularul stătea direct pe fundalul secțiunii, într-o coloană lipită de
   marginea stângă, cu jumătatea dreaptă goală. Acum stă într-o fișă, cu un
   panou alături care spune ce se cumpără și ce urmează.

   Panoul se lipește de ecran la derulare, dar numai de la lățimea la care are
   loc lângă formular. Sub acel prag coboară dedesubt și redevine un bloc
   obișnuit — un panou lipit pe telefon ar acoperi tocmai câmpurile.
   ========================================================================== */

.comanda-grila {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    align-items: start;
}

.comanda-fisa {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: clamp(20px, 3vw, 40px);
}

.comanda-fisa .steps { margin-top: 0; }

.comanda-panou__lipit { display: grid; gap: var(--s5); }

.comanda-panou__bloc {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s6);
}

/* Blocul de jos este o asigurare, nu o informație: tonul lui este mai liniștit. */
.comanda-panou__bloc--linistit {
    background: var(--navy-050);
    border-color: var(--navy-100);
    font-size: var(--t-sm);
    color: var(--muted);
}

.comanda-panou__titlu {
    margin: 0 0 var(--s3);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.comanda-panou__pachet {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--heading);
}

.comanda-panou__pret { margin: var(--s3) 0 var(--s2); }

.comanda-panou__pret strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mint-700);
}

.comanda-panou__pret span { font-size: var(--t-sm); color: var(--muted); }

.comanda-panou__nota { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--muted); }

.comanda-panou__pasi {
    counter-reset: pas-comanda;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: var(--text);
}

.comanda-panou__pasi li {
    position: relative;
    margin-bottom: var(--s3);
    padding-left: 30px;
    line-height: 1.55;
}

.comanda-panou__pasi li:last-child { margin-bottom: 0; }

.comanda-panou__pasi li::before {
    counter-increment: pas-comanda;
    content: counter(pas-comanda);
    position: absolute;
    left: 0;
    top: 1px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--navy-050);
    border: 1px solid var(--navy-100);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--navy-700);
}

@media (min-width: 1030px) {
    .comanda-grila { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s7); }

    /* 104px = antetul lipit plus o gutieră; sub el panoul ar intra sub bară. */
    .comanda-panou__lipit { position: sticky; top: 104px; }
}

/* ==========================================================================
   43. Pagina de demonstrație
   --------------------------------------------------------------------------
   Refolosește fișa și grila de pe /comanda: sunt același tipar de pagină —
   formular în stânga, lămuriri în dreapta — iar o a doua variantă de card ar
   fi însemnat două locuri de întreținut pentru același lucru.

   Aici se adaugă numai ce lipsea: panoul din dreapta cu ton mai liniștit,
   lista rolurilor și fișa de confirmare.
   ========================================================================== */

.comanda-fisa--panou {
    background: var(--navy-050);
    border-color: var(--navy-100);
    box-shadow: none;
}

.comanda-fisa--panou h2 { font-size: 1.15rem; }

/*
 * Lista rolurilor. Termenul și explicația stau pe rânduri separate, nu
 * alăturate: „Șef de compartiment" nu încape pe o coloană îngustă lângă o
 * frază, iar pe telefon o listă de definiții în două coloane devine ilizibilă.
 */
.demo-roluri { margin: var(--s5) 0; }

.demo-roluri dt {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
}

.demo-roluri dd {
    margin: 0 0 var(--s4);
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--muted);
}

.demo-roluri dd:last-child { margin-bottom: 0; }

/*
 * Fișa de după trimitere. Marginea verde este singurul semn de reușită de care
 * are nevoie: omul tocmai a apăsat un buton și caută confirmarea, nu o
 * decorație.
 */
.comanda-fisa--reusita {
    max-width: 44rem;
    border-left: 4px solid var(--mint-600);
}

/* ==========================================================================
   Documentația — pagina unei sarcini
   --------------------------------------------------------------------------
   Scrisă pentru omul grăbit: culoarea spune ce fel de informație are în față
   (verde = de făcut / corect, roșu = greșit, violet = din lege), iar
   pastilele stărilor au exact culorile din aplicație, ca să le recunoască.
   ========================================================================== */

.doc-pagina {
    max-width: none;

    --ton-nou-bg: #e3f0fa;        --ton-nou-fg: #1a4a7d;        --ton-nou-dot: #2b7bc4;
    --ton-repartizat-bg: #f3e8ff; --ton-repartizat-fg: #6b21a8; --ton-repartizat-dot: #9333ea;
    --ton-preluat-bg: #fef3c7;    --ton-preluat-fg: #92400e;    --ton-preluat-dot: #d97706;
    --ton-in_lucru-bg: #dbeafe;   --ton-in_lucru-fg: #1e40af;   --ton-in_lucru-dot: #3b82f6;
    --ton-blocat-bg: #fee2e2;     --ton-blocat-fg: #991b1b;     --ton-blocat-dot: #dc2626;
    --ton-decizie-bg: #fde8e8;    --ton-decizie-fg: #9b1c1c;    --ton-decizie-dot: #e53e3e;
    --ton-finalizat-bg: #dcfce7;  --ton-finalizat-fg: #166534;  --ton-finalizat-dot: #22c55e;
    --ton-redistr-bg: #fff7ed;    --ton-redistr-fg: #9a3412;    --ton-redistr-dot: #f97316;
    --ton-anulat-bg: #f1f3f6;     --ton-anulat-fg: #4b5563;     --ton-anulat-dot: #9ca3af;
    --ton-neutru-bg: var(--navy-100); --ton-neutru-fg: var(--navy-700); --ton-neutru-dot: var(--navy-500);
    --ton-cetatean-bg: var(--mint-100); --ton-cetatean-fg: var(--mint-700); --ton-cetatean-dot: var(--mint-500);
    --ton-atentie-bg: #fef6e7;    --ton-atentie-fg: #8a5a06;    --ton-atentie-dot: var(--amber-500);
    --doc-rose-bg: #fdf0ef;
    --doc-rose-line: #f5c6c1;
    --doc-rose-fg: #9b2c21;
    --doc-lege-bg: #f4ecf8;
    --doc-lege-fg: #6c3483;
}

.doc-ton--nou              { --bg: var(--ton-nou-bg);        --fg: var(--ton-nou-fg);        --dot: var(--ton-nou-dot); }
.doc-ton--repartizat       { --bg: var(--ton-repartizat-bg); --fg: var(--ton-repartizat-fg); --dot: var(--ton-repartizat-dot); }
.doc-ton--preluat          { --bg: var(--ton-preluat-bg);    --fg: var(--ton-preluat-fg);    --dot: var(--ton-preluat-dot); }
.doc-ton--in_lucru         { --bg: var(--ton-in_lucru-bg);   --fg: var(--ton-in_lucru-fg);   --dot: var(--ton-in_lucru-dot); }
.doc-ton--blocat           { --bg: var(--ton-blocat-bg);     --fg: var(--ton-blocat-fg);     --dot: var(--ton-blocat-dot); }
.doc-ton--necesita_decizie { --bg: var(--ton-decizie-bg);    --fg: var(--ton-decizie-fg);    --dot: var(--ton-decizie-dot); }
.doc-ton--finalizat        { --bg: var(--ton-finalizat-bg);  --fg: var(--ton-finalizat-fg);  --dot: var(--ton-finalizat-dot); }
.doc-ton--redistribuit     { --bg: var(--ton-redistr-bg);    --fg: var(--ton-redistr-fg);    --dot: var(--ton-redistr-dot); }
.doc-ton--anulat,
.doc-ton--optional         { --bg: var(--ton-anulat-bg);     --fg: var(--ton-anulat-fg);     --dot: var(--ton-anulat-dot); }
.doc-ton--neutru           { --bg: var(--ton-neutru-bg);     --fg: var(--ton-neutru-fg);     --dot: var(--ton-neutru-dot); }
.doc-ton--cetatean         { --bg: var(--ton-cetatean-bg);   --fg: var(--ton-cetatean-fg);   --dot: var(--ton-cetatean-dot); }
.doc-ton--atentie          { --bg: var(--ton-atentie-bg);    --fg: var(--ton-atentie-fg);    --dot: var(--ton-atentie-dot); }

.doc-ico { flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }

.doc-pagina strong { color: var(--ink-900); font-weight: 700; }

/* Cuprinsul — o singură linie de legături, nu o listă de citit. */
.doc-cuprins {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s6);
    font-size: var(--t-sm);
}

.doc-cuprins__eticheta { color: var(--muted); margin-right: var(--s1); }

.doc-cuprins a {
    padding: 6px 12px;
    color: var(--navy-700);
    text-decoration: none;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
}

.doc-cuprins a:hover { background: var(--navy-100); border-color: var(--navy-100); }

/* Pe scurt + De reținut */
.doc-rezumat { margin-bottom: var(--s8); }

.doc-retine {
    margin-top: var(--s5);
    padding-top: var(--s5);
    border-top: 1px dashed #9fdcc3;
}

.doc-retine h3 {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: 0 0 var(--s3);
    font-size: var(--t-base);
    color: var(--mint-700);
}

.doc-retine ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }

.doc-retine li {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    margin: 0;
    padding: var(--s3) var(--s4);
    background: var(--paper);
    border-radius: var(--r-sm);
    font-size: var(--t-base);
    line-height: 1.55;
    color: var(--ink-900);
}

.doc-retine li .doc-ico {
    margin-top: 2px;
    padding: 3px;
    width: 22px;
    height: 22px;
    color: var(--paper);
    background: var(--mint-500);
    border-radius: 50%;
}

/* Titlurile blocurilor, cu pictograma lor */
.doc-bloc { margin-top: var(--s10); }

.doc-titlu {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0 0 var(--s5);
    scroll-margin-top: 88px;
}

.doc-titlu .doc-ico {
    padding: 7px;
    width: 36px;
    height: 36px;
    color: var(--navy-700);
    background: var(--navy-100);
    border-radius: var(--r-md);
}

.doc-intro { margin: 0 0 var(--s5); color: var(--muted); font-size: var(--t-sm); line-height: 1.7; }

/* Pastila unei stări — identică cu cea din aplicație */
.doc-pastila {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg, var(--navy-700));
    background: var(--bg, var(--navy-100));
    border-radius: var(--r-pill);
}

.doc-drum .doc-pastila,
.doc-carduri .doc-pastila { white-space: nowrap; }

.doc-pastila__punct {
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--dot, var(--navy-500));
    border-radius: 50%;
}

.doc-nod__detaliu {
    display: block;
    margin-top: var(--s2);
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--muted);
}

/* Ilustrațiile */
.doc-ilustratie {
    margin: 0 0 var(--s6);
    padding: clamp(16px, 2.4vw, 28px);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.doc-ilustratie figcaption {
    margin-top: var(--s5);
    font-size: var(--t-sm);
    color: var(--muted);
    line-height: 1.6;
}

/* Drumul: noduri legate prin săgeți, pe orizontală pe ecran lat. */
.doc-drum {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s6) var(--s8);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: drum;
}

.doc-drum__nod {
    position: relative;
    flex: 1 1 130px;
    min-width: 0;
    margin: 0;
    padding: var(--s4);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
}

.doc-drum__nod::before {
    counter-increment: drum;
    content: counter(drum);
    position: absolute;
    top: -10px;
    left: -10px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--paper);
    background: var(--navy-700);
    border-radius: 50%;
}

.doc-drum__nod:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--s8) + 6px);
    width: calc(var(--s8) - 12px);
    height: 12px;
    transform: translateY(-50%);
    background:
        linear-gradient(var(--navy-500), var(--navy-500)) left center / calc(100% - 6px) 2px no-repeat,
        conic-gradient(from 225deg at 100% 50%, var(--navy-500) 0 90deg, transparent 0) right center / 8px 12px no-repeat;
}

/* Un drum lung se așază pe rânduri de câte trei; săgeata de la capăt de rând ar arăta în gol. */
.doc-drum--lung .doc-drum__nod { flex-basis: calc((100% - 2 * var(--s8)) / 3); flex-grow: 0; }
.doc-drum--lung .doc-drum__nod:nth-child(3n)::after { display: none; }

/* Cardurile: variante puse una lângă alta, fiecare cu culoarea ei. */
.doc-carduri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-carduri__card {
    margin: 0;
    padding: var(--s4);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--dot, var(--navy-500));
    border-radius: var(--r-md);
}

/* Arborele organigramei */
.doc-arbore ul { margin: 0; padding: 0 0 0 var(--s6); list-style: none; }
.doc-arbore > ul { padding-left: 0; }
.doc-arbore li { position: relative; margin: 0; padding: var(--s2) 0 var(--s2) var(--s5); }
.doc-arbore > ul > li { padding-left: 0; }

.doc-arbore ul ul li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--s4);
    height: 28px;
    border-left: 2px solid var(--line-strong);
    border-bottom: 2px solid var(--line-strong);
    border-bottom-left-radius: 6px;
}

.doc-arbore ul ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-left: 2px solid var(--line-strong);
}

.doc-arbore__nod {
    display: inline-block;
    max-width: 100%;
    padding: var(--s3) var(--s4);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

/* Exemplul din practică */
.doc-exemplu {
    display: flex;
    gap: var(--s5);
    margin-top: var(--s10);
    padding: clamp(20px, 2.6vw, 32px);
    background: #fffaf0;
    border: 1px solid #f3dfb5;
    border-left: 5px solid var(--amber-500);
    border-radius: var(--r-lg);
}

.doc-exemplu__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #8a5a06;
    background: #fdecc8;
    border-radius: 50%;
}

.doc-exemplu__icon .doc-ico { width: 24px; height: 24px; }

.doc-exemplu__eticheta {
    margin: 0 0 var(--s1);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a5a06;
}

.doc-exemplu h2 { margin: 0 0 var(--s3); font-size: var(--t-h3); scroll-margin-top: 88px; }
.doc-exemplu p:not(.doc-exemplu__eticheta) { margin: 0 0 var(--s3); font-size: var(--t-md); line-height: 1.7; color: var(--ink-700); }
.doc-exemplu p:last-child { margin-bottom: 0; }

/* Pașii: numere mari, legate printr-o linie. */
.doc-pasi {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pas;
}

.doc-pasi li {
    position: relative;
    margin: 0;
    padding: 0 0 var(--s6) calc(44px + var(--s4));
    min-height: 44px;
    font-size: var(--t-md);
    line-height: 1.65;
    color: var(--ink-700);
}

.doc-pasi li::before {
    counter-increment: pas;
    content: counter(pas);
    position: absolute;
    top: -4px;
    left: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-weight: 700;
    color: var(--paper);
    background: var(--mint-600);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--mint-100);
}

.doc-pasi li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 38px;
    bottom: 2px;
    left: 17px;
    border-left: 2px dashed #9fdcc3;
}

/* Regulile */
.doc-reguli { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }

.doc-regula {
    display: flex;
    gap: var(--s4);
    margin: 0;
    padding: var(--s4) var(--s5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-500);
    border-radius: var(--r-md);
}

.doc-regula--lege { border-left-color: var(--violet-500); background: #fcf9fd; }

.doc-regula__icon { flex: none; color: var(--navy-600); padding-top: 2px; }
.doc-regula--lege .doc-regula__icon { color: var(--violet-500); }

.doc-regula p { margin: 0 0 var(--s2); line-height: 1.65; color: var(--ink-700); }

.doc-sursa {
    display: inline-block;
    padding: 2px 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--navy-700);
    background: var(--navy-100);
    border-radius: var(--r-pill);
}

.doc-sursa--lege { color: var(--doc-lege-fg); background: var(--doc-lege-bg); }

/* Greșit / corect, față în față */
.doc-greseli { display: grid; gap: var(--s4); }

.doc-greseala {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.doc-greseala__gresit,
.doc-greseala__corect { padding: var(--s4) var(--s5); }

.doc-greseala__gresit { background: var(--doc-rose-bg); border-right: 1px solid var(--doc-rose-line); }
.doc-greseala__corect { background: #f1fbf6; }

.doc-greseala__eticheta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--s2);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.doc-greseala__gresit .doc-greseala__eticheta { color: var(--doc-rose-fg); }
.doc-greseala__corect .doc-greseala__eticheta { color: var(--mint-700); }
.doc-greseala p { margin: 0; line-height: 1.6; color: var(--ink-700); }

.doc-pagina .notice { margin-top: var(--s10); }
.doc-pagina .notice > p,
.doc-pagina .answer__text,
.doc-pagina .doc-intro { max-width: none; }
.doc-pagina .shot { margin-top: var(--s2); }

@media (max-width: 699px) {
    .doc-drum { flex-direction: column; gap: var(--s6); }
    .doc-drum__nod,
    .doc-drum--lung .doc-drum__nod { flex: none; }
    .doc-drum--lung .doc-drum__nod:nth-child(3n):not(:last-child)::after { display: block; }

    .doc-drum__nod:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: calc(-1 * var(--s6) + 2px);
        left: 24px;
        width: 12px;
        height: calc(var(--s6) - 4px);
        transform: none;
        background:
            linear-gradient(var(--navy-500), var(--navy-500)) center top / 2px calc(100% - 6px) no-repeat,
            conic-gradient(from 135deg at 50% 100%, var(--navy-500) 0 90deg, transparent 0) center bottom / 12px 8px no-repeat;
    }

    .doc-greseala { grid-template-columns: 1fr; }
    .doc-greseala__gresit { border-right: 0; border-bottom: 1px solid var(--doc-rose-line); }
    .doc-exemplu { flex-direction: column; gap: var(--s3); }
    .doc-pasi li { font-size: var(--t-base); }
}

@media print {
    .doc-cuprins { display: none; }
    .doc-ilustratie, .doc-exemplu, .doc-regula, .doc-greseala { break-inside: avoid; }
}

/* Documentația — legenda de pe pagina de intrare și rolurile de pe carduri */
.doc-legenda {
    padding: clamp(18px, 2.4vw, 28px);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.doc-legenda h2 { margin: 0 0 var(--s4); font-size: var(--t-h4); }

.doc-legenda ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s3) var(--s6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-legenda li { display: flex; gap: var(--s3); align-items: flex-start; margin: 0; font-size: var(--t-sm); line-height: 1.55; }

.doc-legenda__mostra {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: var(--t-sm);
    font-weight: 700;
    border-radius: 50%;
}

.doc-legenda__mostra .doc-ico { width: 16px; height: 16px; }
.doc-legenda__mostra--scurt   { color: var(--paper); background: var(--mint-500); }
.doc-legenda__mostra--exemplu { color: #8a5a06; background: #fdecc8; }
.doc-legenda__mostra--pasi    { color: var(--paper); background: var(--mint-600); }
.doc-legenda__mostra--lege    { color: #6c3483; background: #f4ecf8; }
.doc-legenda__mostra--gresit  { color: #9b2c21; background: #fdf0ef; }

.doc-card-roluri { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s3) 0 0; }

.doc-card-roluri span {
    padding: 2px 9px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--navy-700);
    background: var(--navy-100);
    border-radius: var(--r-pill);
}

/* ==========================================================================
   Documentația — pagina de intrare, ca centru de ajutor
   --------------------------------------------------------------------------
   Căutarea este eroul paginii. Sub ea: trei pagini de început, rolurile,
   apoi subiectele ca fișe cu lista paginilor lor. Fiecare subiect și fiecare
   rol are o pictogramă și un accent de culoare, ca să fie recunoscut dintr-o
   privire la a doua vizită.
   ========================================================================== */

.doc-accent--navy   { --acc: var(--navy-600);  --acc-bg: var(--navy-100); }
.doc-accent--mint   { --acc: var(--mint-700);  --acc-bg: var(--mint-100); }
.doc-accent--amber  { --acc: #b36b00;          --acc-bg: #fdf0d8; }
.doc-accent--violet { --acc: #7d3c98;          --acc-bg: #f4ecf8; }
.doc-accent--sky    { --acc: #1f6fb2;          --acc-bg: #e3f0fa; }
.doc-accent--teal   { --acc: #0f7c77;          --acc-bg: #dcf3f1; }

.doc-tigla {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--acc, var(--navy-600));
    background: var(--acc-bg, var(--navy-100));
    border-radius: var(--r-md);
}

.doc-tigla .doc-ico { width: 22px; height: 22px; }

/* Eroul */
.doc-hero {
    position: relative;
    overflow: hidden;
    padding: var(--s6) 0 clamp(40px, 5vw, 72px);
    color: #dbe6f3;
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(39, 174, 128, .22), transparent 60%),
        radial-gradient(700px 380px at 0% 110%, rgba(52, 152, 219, .18), transparent 60%),
        linear-gradient(180deg, var(--navy-800), var(--navy-700));
}

.doc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
    pointer-events: none;
}

.doc-hero > .shell { position: relative; }

.doc-hero__crumbs { padding: 0 0 var(--s7); background: none; }
.doc-hero__crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); }
.doc-hero__crumbs li { display: inline-flex; align-items: center; gap: var(--s2); color: #9fb3c8; }
.doc-hero__crumbs li + li::before { content: "/"; color: #5f7896; }
.doc-hero__crumbs a { color: #cfdcea; text-decoration: none; }
.doc-hero__crumbs a:hover { color: #fff; text-decoration: underline; }
.doc-hero__crumbs [aria-current] { color: #fff; }

.doc-hero__corp { max-width: 48rem; margin-inline: auto; text-align: center; }

.doc-hero__eticheta {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s4);
    padding: 6px 14px;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mint-400);
    background: rgba(39, 174, 128, .12);
    border: 1px solid rgba(47, 207, 155, .28);
    border-radius: var(--r-pill);
}

.doc-hero h1 { margin: 0 0 var(--s4); color: #fff; font-size: var(--t-h1); letter-spacing: -.02em; }

.doc-hero__lead {
    max-width: 40rem;
    margin: 0 auto var(--s7);
    font-size: var(--t-md);
    line-height: 1.65;
    color: #c2d2e3;
}

.doc-cautare {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 8px;
    background: var(--paper);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 24px 60px rgba(4, 12, 24, .45);
    text-align: left;
}

.doc-cautare:focus-within { box-shadow: 0 0 0 4px rgba(47, 207, 155, .45), 0 24px 60px rgba(4, 12, 24, .45); }

.doc-cautare__icon { flex: none; display: grid; place-items: center; width: 40px; color: var(--ink-400); }
.doc-cautare__icon .doc-ico { width: 22px; height: 22px; }

.doc-cautare__camp {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    padding: 0 var(--s2);
    font-family: var(--font-body);
    font-size: var(--t-md);
    color: var(--ink-900);
    background: transparent;
    border: 0;
    outline: none;
}

.doc-cautare__camp::placeholder { color: var(--ink-350); opacity: 1; }
.doc-cautare__camp::-webkit-search-cancel-button { cursor: pointer; }

.doc-cautare__tasta {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ink-400);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 6px;
}

.doc-cautare__buton { flex: none; min-height: 52px; }

.doc-hero__sugestii {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s2);
    margin: var(--s5) 0 0;
    font-size: var(--t-sm);
    color: #9fb3c8;
}

.doc-hero__sugestii a {
    padding: 5px 12px;
    color: #e5eef8;
    text-decoration: none;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-pill);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}

.doc-hero__sugestii a:hover { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }

.doc-hero__cifre {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s3) var(--s7);
    margin: var(--s7) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: #aebfd2;
}

.doc-hero__cifre li { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.doc-hero__cifre strong { color: #fff; font-size: var(--t-md); }
.doc-hero__cifre .doc-ico { color: var(--mint-400); }

/* Corpul paginii de intrare */
.doc-acasa .doc-stare:empty { display: none; }

.doc-stare {
    margin: 0 0 var(--s6);
    padding: var(--s3) var(--s4);
    font-size: var(--t-sm);
    color: var(--navy-700);
    background: var(--navy-050);
    border: 1px solid var(--navy-100);
    border-radius: var(--r-md);
}

.doc-bloc-acasa + .doc-bloc-acasa,
[data-doc-ascunde] + .doc-bloc-acasa { margin-top: var(--s10); }

.doc-cap { margin-bottom: var(--s6); }
.doc-cap h2 { margin: 0 0 var(--s2); }
.doc-cap p { margin: 0; color: var(--muted); max-width: 46rem; }

/* Începeți aici */
.doc-start {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-start__card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--s6);
    background: linear-gradient(180deg, var(--paper), var(--paper-alt));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.doc-start__card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--mint-500); }

.doc-start__nr {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: var(--s4);
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--mint-500), var(--mint-700));
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--mint-100);
}

.doc-start__card h3 { margin: 0 0 var(--s2); font-size: var(--t-h4); }
.doc-start__card h3 a { color: var(--heading); text-decoration: none; }
.doc-start__card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.doc-start__card p { flex: 1 1 auto; margin: 0 0 var(--s4); font-size: var(--t-sm); line-height: 1.6; color: var(--muted); }

.doc-start__mai,
.doc-rol__jos {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--mint-700);
}

.doc-start__card:hover .doc-start__mai .doc-ico,
.doc-rol:hover .doc-rol__jos .doc-ico { transform: translateX(3px); }
.doc-start__mai .doc-ico,
.doc-rol__jos .doc-ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }

/* Rolurile */
.doc-roluri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-rol {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--s5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--acc);
    border-radius: var(--r-lg);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}

.doc-rol:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.doc-rol .doc-tigla { margin-bottom: var(--s4); }
.doc-rol h3 { margin: 0 0 var(--s2); font-size: var(--t-h4); }
.doc-rol h3 a { color: var(--heading); text-decoration: none; }
.doc-rol h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.doc-rol p { flex: 1 1 auto; margin: 0 0 var(--s4); font-size: var(--t-sm); line-height: 1.6; color: var(--muted); }
.doc-rol__jos { color: var(--acc); }

/* Subiectele */
.doc-subiecte {
    display: grid;
    gap: var(--s5);
}

.doc-subiect {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    overflow: hidden;
}

.doc-subiect__cap {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s4) var(--s5);
    background: linear-gradient(90deg, var(--acc-bg), var(--paper) 85%);
    border-bottom: 1px solid var(--line);
}

.doc-subiect__cap h2,
.doc-subiect__cap h3 { flex: 1 1 auto; margin: 0; font-size: var(--t-h4); }

.doc-subiect__nr {
    flex: none;
    min-width: 28px;
    padding: 2px 9px;
    font-size: var(--t-xs);
    font-weight: 700;
    text-align: center;
    color: var(--acc);
    background: var(--acc-bg);
    border-radius: var(--r-pill);
}

.doc-subiect__lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-subiect__lista li {
    position: relative;
    margin: 0;
    padding: var(--s3) var(--s5) var(--s3) calc(var(--s5) + 14px);
}

.doc-subiect__lista li { border-bottom: 1px solid var(--line); }
.doc-subiect__lista li:nth-child(odd) { border-right: 1px solid var(--line); }
.doc-subiect__lista li:last-child,
.doc-subiect__lista li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.doc-subiect__lista li::before {
    content: "";
    position: absolute;
    top: calc(var(--s3) + 9px);
    left: var(--s5);
    width: 6px;
    height: 6px;
    background: var(--acc);
    border-radius: 50%;
}

.doc-subiect__lista li:hover { background: var(--paper-alt); }

.doc-subiect__lista a { display: block; text-decoration: none; }
.doc-subiect__lista a::after { content: ""; position: absolute; inset: 0; }

.doc-subiect__titlu { display: block; font-weight: 650; color: var(--heading); line-height: 1.4; }
.doc-subiect__lista li:hover .doc-subiect__titlu { color: var(--acc); }

.doc-subiect__desc {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--muted);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.doc-subiect__roluri { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s2); pointer-events: none; }

.doc-subiect__roluri span {
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--acc);
    background: var(--acc-bg);
    border-radius: var(--r-pill);
}

.doc-subiect__roluri .doc-subiect__pachet { color: #8a5a06; background: #fef6e7; }

/* Rezultat gol, ajutor */
.doc-gol {
    display: grid;
    justify-items: center;
    gap: var(--s3);
    padding: var(--s9) var(--s5);
    text-align: center;
    background: var(--paper-alt);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-lg);
}

.doc-gol[hidden] { display: none; }
.doc-gol h2 { margin: 0; font-size: var(--t-h3); }
.doc-gol p { max-width: 36rem; margin: 0; color: var(--muted); }

.doc-acasa .doc-legenda { margin-top: var(--s10); }

.doc-ajutor {
    display: flex;
    align-items: center;
    gap: var(--s5);
    margin-top: var(--s8);
    padding: clamp(20px, 2.6vw, 32px);
    background: linear-gradient(135deg, var(--navy-050), var(--mint-100));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    --acc: var(--mint-700);
    --acc-bg: #fff;
}

.doc-ajutor > div { flex: 1 1 auto; }
.doc-ajutor h2 { margin: 0 0 var(--s1); font-size: var(--t-h4); }
.doc-ajutor p { margin: 0; color: var(--ink-700); font-size: var(--t-sm); }
.doc-ajutor__buton { flex: none; }

@media (max-width: 1029px) {
    .doc-roluri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
    .doc-start,
    .doc-subiect__lista { grid-template-columns: minmax(0, 1fr); }
    .doc-subiect__lista li:nth-child(odd) { border-right: 0; }
    .doc-subiect__lista li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 599px) {
    .doc-roluri { grid-template-columns: minmax(0, 1fr); }
    .doc-cautare { flex-wrap: wrap; padding: 6px; }
    .doc-cautare__icon { width: 32px; }
    .doc-cautare__camp { flex-basis: calc(100% - 48px); font-size: var(--t-base); }
    .doc-cautare__tasta { display: none; }
    .doc-cautare__buton { flex-basis: 100%; }
    .doc-hero__cifre { gap: var(--s2) var(--s4); }
    .doc-ajutor { flex-direction: column; align-items: flex-start; }
}

@media (hover: none) {
    .doc-cautare__tasta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .doc-start__card, .doc-rol, .doc-start__mai .doc-ico, .doc-rol__jos .doc-ico { transition: none; }
    .doc-start__card:hover, .doc-rol:hover { transform: none; }
}

/* ==========================================================================
   Documentația — termeni, păreri, capturi, lista de pornire, ghidul tipărit,
   istoricul, raportul intern și trimiterile din module
   ========================================================================== */

/* Termenii explicați la trecerea cu mouse-ul sau la focalizare */
.doc-termen { position: relative; display: inline; }

.doc-termen > a {
    color: inherit;
    text-decoration: underline dotted var(--mint-600);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: help;
}

.doc-termen__def {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 10px);
    left: 50%;
    width: min(300px, 80vw);
    padding: var(--s3) var(--s4);
    font-size: var(--t-sm);
    font-weight: 400;
    line-height: 1.5;
    color: #e8eef6;
    text-align: left;
    background: var(--navy-800);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
    pointer-events: none;
}

.doc-termen__def::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 7px solid transparent;
    border-top-color: var(--navy-800);
    transform: translateX(-50%);
}

.doc-termen:hover .doc-termen__def,
.doc-termen:focus-within .doc-termen__def { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Butonul de tipărire din cuprins */
.doc-cuprins__tipar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 12px;
    font: inherit;
    color: var(--navy-700);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    cursor: pointer;
}

.doc-cuprins__tipar:hover { background: var(--navy-050); }
.doc-cuprins__tipar[hidden] { display: none; }

/* Părerea */
.doc-parere {
    margin-top: var(--s10);
    padding: var(--s6);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    scroll-margin-top: 88px;
}

.doc-parere h2 { margin: 0 0 var(--s4); font-size: var(--t-h4); }
.doc-parere__butoane { display: flex; flex-wrap: wrap; gap: var(--s3); }
.doc-parere__butoane .btn { display: inline-flex; align-items: center; gap: var(--s2); min-width: 110px; justify-content: center; }
.doc-parere__detalii { display: grid; gap: var(--s3); margin-top: var(--s5); max-width: 42rem; }
.doc-parere__detalii[hidden] { display: none; }
.doc-parere__detalii label { font-weight: 600; color: var(--heading); }
.doc-parere__detalii .btn { justify-self: start; }
.doc-parere__detalii .u-note { margin: 0; }

.doc-parere__multumim {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin: 0;
    font-weight: 600;
    color: var(--mint-700);
}

.doc-parere__multumim[hidden] { display: none; }
.doc-parere__multumim .doc-ico { padding: 3px; width: 24px; height: 24px; color: #fff; background: var(--mint-500); border-radius: 50%; }

.doc-parere__capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Captura cu repere */
.doc-captura { margin: 0 0 var(--s6); }

.doc-captura__cadru {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
}

.doc-captura__cadru img { display: block; width: 100%; height: auto; }
.doc-captura__cadru .doc-captura__repere { position: absolute; inset: 0; width: 100%; height: 100%; }
.doc-captura__halou { fill: rgba(39, 174, 128, .28); }
.doc-captura__punct { fill: var(--mint-600); stroke: #fff; stroke-width: 3; }
.doc-captura__nr { fill: #fff; font-family: var(--font-body); font-weight: 800; }
.doc-captura figcaption { margin-top: var(--s3); font-size: var(--t-sm); color: var(--muted); }

/* Pagina rolului: lista de pornire și ghidul tipărit */
.doc-rol-sus {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
    margin-bottom: var(--s8);
}

.doc-pornire {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--acc);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
}

.doc-pornire__cap { display: flex; align-items: center; gap: var(--s4); padding: var(--s5); border-bottom: 1px solid var(--line); }
.doc-pornire__cap > div { flex: 1 1 auto; }
.doc-pornire__cap h2 { margin: 0 0 2px; font-size: var(--t-h4); }
.doc-pornire__cap p { margin: 0; font-size: var(--t-sm); color: var(--muted); }

.doc-pornire__progres {
    flex: none;
    padding: 4px 12px;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--acc);
    background: var(--acc-bg);
    border-radius: var(--r-pill);
}

.doc-pornire__progres:empty { display: none; }
.doc-pornire.is-gata .doc-pornire__progres { color: #fff; background: var(--mint-600); }

.doc-pornire__lista { margin: 0; padding: var(--s2) 0; list-style: none; counter-reset: pornire; }

.doc-pornire__lista li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s3);
    margin: 0;
    padding: var(--s3) var(--s5);
}

.doc-pornire__lista li + li { border-top: 1px solid var(--line); }

.doc-pornire__lista input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--mint-600);
    cursor: pointer;
}

.doc-pornire__lista label { cursor: pointer; line-height: 1.5; color: var(--ink-900); }
.doc-pornire__lista input:checked + label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ink-300); }

.doc-pornire__lista a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    color: var(--acc);
    text-decoration: none;
}

.doc-pornire__lista a .doc-ico { width: 15px; height: 15px; }
.doc-pornire__lista a:hover { text-decoration: underline; }

.doc-ghid-tipar {
    display: grid;
    gap: var(--s3);
    padding: var(--s6);
    background: linear-gradient(160deg, var(--navy-800), var(--navy-700));
    border-radius: var(--r-lg);
    color: #c2d2e3;
    --acc: var(--mint-400);
    --acc-bg: rgba(39, 174, 128, .16);
}

.doc-ghid-tipar h2 { margin: 0; font-size: var(--t-h4); color: #fff; }
.doc-ghid-tipar p { margin: 0; font-size: var(--t-sm); line-height: 1.6; }
.doc-ghid-tipar .btn { justify-self: start; }

/* Ghidul tipărit */
.doc-ghid__bara {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    margin-bottom: var(--s6);
}

.doc-ghid__bara .btn { display: inline-flex; align-items: center; gap: var(--s2); }
.doc-ghid__bara .btn[hidden] { display: none; }

.doc-ghid__coperta {
    padding: clamp(24px, 4vw, 48px);
    margin-bottom: var(--s8);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.doc-ghid__coperta .doc-hero__eticheta { color: var(--mint-700); background: var(--mint-100); border-color: #b9e9d5; }
.doc-ghid__coperta h1 { margin: 0 0 var(--s4); }
.doc-ghid__intro { max-width: 46rem; font-size: var(--t-md); line-height: 1.65; }
.doc-ghid__meta { font-size: var(--t-sm); color: var(--muted); }
.doc-ghid__cuprins { margin-top: var(--s7); columns: 2 280px; column-gap: var(--s8); }
.doc-ghid__cuprins h2 { column-span: all; margin: 0 0 var(--s4); font-size: var(--t-h4); }
.doc-ghid__cuprins h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-base); break-after: avoid; }
.doc-ghid__cuprins ol { margin: 0; padding-left: 1.3rem; }
.doc-ghid__cuprins li { margin: 0 0 4px; font-size: var(--t-sm); break-inside: avoid; }

.doc-ghid__pagina { margin-bottom: var(--s10); padding-top: var(--s8); border-top: 2px solid var(--line); }
.doc-ghid__sectiune { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-700); }
.doc-ghid__titlu { margin: 0 0 var(--s6); font-size: var(--t-h2); }

/* Istoricul documentației */
.doc-istoric { margin: 0; padding: 0; list-style: none; max-width: 54rem; }
.doc-istoric__zi { position: relative; margin: 0; padding: 0 0 var(--s8) var(--s8); border-left: 2px solid var(--line); }

.doc-istoric__zi::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -8px;
    width: 14px;
    height: 14px;
    background: var(--mint-500);
    border: 3px solid var(--paper);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--mint-500);
}

.doc-istoric__zi h2 { margin: 0 0 var(--s4); font-size: var(--t-h4); }
.doc-istoric__zi ul { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }

.doc-istoric__intrare {
    display: flex;
    gap: var(--s4);
    align-items: baseline;
    margin: 0;
    padding: var(--s4) var(--s5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.doc-istoric__intrare p { margin: 0; line-height: 1.6; }

.doc-istoric__fel {
    flex: none;
    padding: 2px 10px;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--mint-700);
    background: var(--mint-100);
    border-radius: var(--r-pill);
}

.doc-istoric__intrare--corectura .doc-istoric__fel { color: #8a5a06; background: #fef6e7; }

/* Raportul intern */
.doc-raport-cheie { display: grid; gap: var(--s3); max-width: 28rem; }
.doc-raport-cheie label { font-weight: 600; }
.doc-raport-cheie .btn { justify-self: start; }
.doc-raport-eroare { margin: 0; color: var(--rose-500); font-weight: 600; }
.doc-raport { display: grid; gap: var(--s9); }
.doc-raport h2 { margin: 0 0 var(--s4); font-size: var(--t-h3); }
.doc-raport__tabel { width: 100%; border-collapse: collapse; }
.doc-raport__tabel th, .doc-raport__tabel td { padding: var(--s3); text-align: left; border-bottom: 1px solid var(--line); }
.doc-raport__tabel td:nth-child(n+2), .doc-raport__tabel th:nth-child(n+2) { width: 80px; text-align: right; }
.doc-raport__motive { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.doc-raport__motive li { padding: var(--s4); background: var(--paper-alt); border-radius: var(--r-md); }
.doc-raport__motive p { margin: var(--s2) 0 0; }

/* „Cum se face în Edilo” pe paginile de module și pe articole */
.doc-trimiteri { background: var(--paper-alt); border-block: 1px solid var(--line); }

.doc-trimiteri__cap { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); --acc: var(--mint-700); --acc-bg: var(--mint-100); }
.doc-trimiteri__cap > div { flex: 1 1 auto; }
.doc-trimiteri__cap h2 { margin: 0 0 2px; font-size: var(--t-h3); }
.doc-trimiteri__cap p { margin: 0; color: var(--muted); font-size: var(--t-sm); }

.doc-trimiteri__toate { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--mint-700); text-decoration: none; white-space: nowrap; }
.doc-trimiteri__toate .doc-ico { width: 16px; height: 16px; }
.doc-trimiteri__toate:hover { text-decoration: underline; }

.doc-trimiteri__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-trimiteri__lista a {
    display: grid;
    gap: var(--s2);
    height: 100%;
    padding: var(--s5);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--mint-500);
    border-radius: var(--r-md);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.doc-trimiteri__lista a:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.doc-trimiteri__lista strong { color: var(--heading); line-height: 1.4; }
.doc-trimiteri__lista span { font-size: var(--t-sm); line-height: 1.55; color: var(--muted); }

@media (max-width: 899px) {
    .doc-rol-sus { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
    .doc-pornire__lista li { grid-template-columns: auto minmax(0, 1fr); }
    .doc-pornire__lista a { grid-column: 2; }
    .doc-trimiteri__cap { flex-wrap: wrap; }
    .doc-istoric__intrare { flex-direction: column; gap: var(--s2); }
    .doc-cuprins__tipar { margin-left: 0; }
}

@media print {
    .doc-parere, .doc-cuprins, .doc-ghid__bara, .doc-trimiteri, .doc-ghid-tipar, .doc-hero__sugestii { display: none !important; }
    .doc-termen__def { display: none !important; }
    .doc-termen > a { text-decoration: none; color: inherit; }
    .doc-ghid__coperta { border: 0; padding: 0; background: #fff; break-after: page; }
    .doc-ghid__pagina { break-before: page; border-top: 0; padding-top: 0; margin-bottom: 0; }
    .doc-ghid__pagina .answer, .doc-exemplu, .doc-retine li { background: #fff !important; }
    .doc-drum__nod, .doc-carduri__card, .doc-regula, .doc-greseala, .doc-pasi li { break-inside: avoid; }
    .doc-pagina a[href^="/"]::after { content: none; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}