/* ============================================================
   O.V.E.P. — landing-2 · Sistem de design (wireframe complet)
   Alb / negru / gri · Inter · sobru, ușor Apple.
   Reguli: ierarhie H1→H2→H3, măsură de rând 50–75c, paragrafe 2–4 fraze,
   "answer-first" 40–80 cuvinte sub fiecare H2. Un layout per secțiune.
   Etichetare: fiecare layout de secțiune e prefixat L01…Lxx (unic).
   ============================================================ */

:root{
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Cerneală & griuri — FĂRĂ culoare */
  --ink:#0b0b0c; --text:#2e2e30; --muted:#6e6e73; --faint:#9a9aa0;
  --line:rgba(0,0,0,.07); --line-2:rgba(0,0,0,.11); --line-3:rgba(0,0,0,.16);
  --bg:#ffffff; --surface:#fafafa; --surface-2:#f4f4f5; --black:#0b0b0c;

  /* Spacing (bază 4px) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Layout & măsură (din regulile UX) */
  --container:1120px; --wide:1280px; --narrow:720px;
  --measure:66ch;        /* corp de text: 50–75 caractere/rând */
  --measure-tight:54ch;  /* paragraf de sprijin */
  --pad-x:clamp(20px,5vw,40px);
  --section-y:clamp(72px,9vw,124px);

  --radius:18px; --radius-sm:12px; --pill:999px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth}
body{font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:17px; line-height:1.6; letter-spacing:-0.005em}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:#111; color:#fff}

/* ---------- Primitive ---------- */
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x)}
.container--wide{max-width:var(--wide)}
.container--narrow{max-width:var(--narrow)}
.section{padding-block:var(--section-y)}
.section--line{border-top:1px solid var(--line)}
.section--tint{background:var(--surface)}
.measure{max-width:var(--measure)}
.stack>*+*{margin-top:var(--s4)}

/* Tipografie & ierarhie */
h1,h2,h3,h4{color:var(--ink); font-weight:600; letter-spacing:-0.02em; line-height:1.12; text-wrap:balance}
.display{font-size:clamp(2.4rem,5.4vw,4.1rem); font-weight:700; letter-spacing:-0.038em; line-height:1.02; max-width:16ch}
.h2{font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:600; letter-spacing:-0.025em; line-height:1.1; max-width:20ch}
.h3{font-size:1.16rem; font-weight:600; letter-spacing:-0.015em}
.eyebrow{font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); display:block}
.lead{font-size:clamp(1.08rem,1.5vw,1.26rem); color:var(--muted); line-height:1.5; font-weight:400; letter-spacing:-0.01em; max-width:var(--measure)}
.muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:.9rem}
p{margin:0; max-width:var(--measure)}
.answer{font-size:1.06rem; color:var(--text); line-height:1.6; max-width:var(--measure)} /* nugget answer-first 40–80c */

/* Listă cu marcaje sobre */
.ticks{list-style:none; display:grid; gap:var(--s3)}
.ticks li{position:relative; padding-left:1.5em; color:var(--muted); max-width:var(--measure)}
.ticks li::before{content:"—"; position:absolute; left:0; color:var(--faint)}
.ticks strong{color:var(--ink); font-weight:600}

/* Butoane */
.btn{display:inline-flex; align-items:center; gap:.5em; font:inherit; font-size:.95rem; font-weight:500;
  letter-spacing:-0.01em; padding:.74em 1.4em; border-radius:var(--pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:opacity .2s,background .2s,border-color .2s,gap .2s}
.btn--primary{background:var(--black); color:#fff}
.btn--primary:hover{opacity:.85}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface); border-color:var(--muted)}
.btn--link{padding:0; background:none; border:none; border-radius:0; color:var(--ink); font-weight:500}
.btn--link:hover{gap:.85em}
.btn-row{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}

/* Bară de prototip */
.proto-bar{background:var(--surface-2); border-bottom:1px solid var(--line); font-size:.78rem;
  color:var(--muted); text-align:center; padding:.55em var(--pad-x); letter-spacing:.01em}
.proto-bar b{color:var(--ink); font-weight:600}

/* Navigație */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:62px; gap:var(--s5)}
.brand{font-weight:700; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; font-size:1.04rem; white-space:nowrap}
.nav__links{display:flex; gap:var(--s6); list-style:none}
.nav__links a{color:var(--muted); text-decoration:none; font-size:.92rem; transition:color .2s}
.nav__links a:hover{color:var(--ink)}
@media(max-width:900px){ .nav__links{display:none} }

/* Eyebrow de secțiune (kicker reutilizabil — NU e layout) */
.kicker{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5)}
.kicker__no{font-size:.76rem; font-weight:600; color:var(--faint); letter-spacing:.04em}
.kicker__line{height:1px; width:40px; background:var(--line-3)}

/* ============================================================
   L01 — HERO (split asimetric: titlu mare + coloană lead/CTA)
   ============================================================ */
.l01{padding-block:clamp(64px,9vw,128px) clamp(48px,7vw,96px)}
.l01__grid{display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(32px,5vw,72px); align-items:end}
.l01__lead{font-size:clamp(1.1rem,1.5vw,1.3rem); color:var(--muted); line-height:1.5; max-width:42ch}
.l01__cta{margin-top:var(--s6)}
.l01__id{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:.9rem; color:var(--faint); display:flex; gap:var(--s2) var(--s5); flex-wrap:wrap}
.l01__id b{color:var(--muted); font-weight:500}
@media(max-width:860px){ .l01__grid{grid-template-columns:1fr; gap:var(--s6); align-items:start} }

/* ============================================================
   L02 — DEFINIȚIE (answer-first 7col + raft de glosar 4col)
   ============================================================ */
.l02{display:grid; grid-template-columns:7fr 4fr; gap:clamp(32px,5vw,80px); align-items:start}
.l02__terms{display:grid; gap:0; border-top:1px solid var(--line)}
.l02__term{padding:var(--s4) 0; border-bottom:1px solid var(--line); display:grid; gap:var(--s1)}
.l02__term dt{color:var(--ink); font-weight:600; font-size:.98rem}
.l02__term dd{color:var(--muted); font-size:.92rem}
@media(max-width:860px){ .l02{grid-template-columns:1fr; gap:var(--s7)} }

/* ============================================================
   L03 — PILONI (3-up, rulă sus + număr suspendat, borderless)
   ============================================================ */
.l03{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,56px)}
.l03__item{border-top:2px solid var(--ink); padding-top:var(--s5)}
.l03__no{font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:.05em}
.l03__item h3{margin:var(--s5) 0 var(--s3)}
.l03__item p{color:var(--muted); font-size:.97rem}
@media(max-width:820px){ .l03{grid-template-columns:1fr; gap:var(--s6)} }

/* ============================================================
   L04 — OFERTĂ (titlu sticky stânga + rânduri-definiție dreapta)
   ============================================================ */
.l04{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,72px); align-items:start}
.l04__aside{position:sticky; top:90px}
.l04__rows{display:grid}
.l04__row{display:grid; grid-template-columns:auto 1fr; gap:var(--s5); padding:var(--s6) 0; border-top:1px solid var(--line)}
.l04__row:last-child{border-bottom:1px solid var(--line)}
.l04__ic{font-size:.82rem; font-weight:600; color:var(--faint); padding-top:.2em; white-space:nowrap}
.l04__row h3{margin-bottom:var(--s2)}
.l04__row p{color:var(--muted); font-size:.97rem}
@media(max-width:820px){ .l04{grid-template-columns:1fr; gap:var(--s6)} .l04__aside{position:static} }

/* ============================================================
   L05 — SLIDER (scroll-snap, fără carduri) — pentru >4 elemente
   ============================================================ */
.l05__head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s7)}
.l05__nav{display:flex; gap:var(--s2)}
.l05__nav button{width:46px; height:46px; border-radius:var(--pill); border:1px solid var(--line-2);
  background:var(--bg); color:var(--ink); font-size:1.2rem; line-height:1; cursor:pointer; flex:none;
  transition:background .2s,border-color .2s}
.l05__nav button:hover{background:var(--surface); border-color:var(--muted)}
@media(max-width:600px){ .l05__nav{display:none} }
.l05__track{display:flex; gap:clamp(20px,2.5vw,40px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--s5); scrollbar-width:none}
.l05__track::-webkit-scrollbar{display:none}
.l05__slide{scroll-snap-align:start; flex:0 0 auto; width:min(78vw,320px); display:flex; flex-direction:column;
  min-height:230px; padding-left:var(--s5); border-left:2px solid var(--ink)}
.l05__slide .tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin-bottom:var(--s4)}
.l05__slide h3{margin-bottom:var(--s3)}
.l05__slide p{color:var(--muted); font-size:.95rem}
.l05__slide .more{margin-top:auto; padding-top:var(--s5); font-size:.88rem; color:var(--ink); font-weight:500}

/* ============================================================
   L06 — PRINCIPII (listă verticală, număr mare suspendat la stânga)
   ============================================================ */
.l06{display:grid; gap:0; border-top:1px solid var(--line)}
.l06__row{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,64px);
  padding:clamp(28px,4vw,52px) 0; border-bottom:1px solid var(--line); align-items:start}
.l06__n{font-size:clamp(2.4rem,5vw,3.6rem); font-weight:700; letter-spacing:-0.04em; color:var(--ink); line-height:.9}
.l06__row h3{font-size:clamp(1.2rem,2vw,1.5rem); margin-bottom:var(--s3)}
.l06__row p{color:var(--muted)}
@media(max-width:720px){ .l06__row{grid-template-columns:1fr; gap:var(--s4)} }

/* ============================================================
   L07 — METRICI (bandă cu cifre mari) — dovezi
   ============================================================ */
.l07{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6) clamp(24px,3vw,48px)}
.l07__m{display:flex; flex-direction:column; gap:var(--s3)}
.l07__num{font-size:clamp(2rem,4vw,3.1rem); font-weight:700; letter-spacing:-0.035em; color:var(--ink); line-height:1}
.l07__lbl{color:var(--text); font-size:.95rem}
.l07__src{color:var(--faint); font-size:.8rem; margin-top:auto; padding-top:var(--s3)}
@media(max-width:820px){ .l07{grid-template-columns:repeat(2,1fr); gap:var(--s7) var(--s5)} }

/* ============================================================
   L08 — CATALOG (rânduri-director numerotate) — cele 6 studii
   ============================================================ */
.l08{border-top:1px solid var(--line-2)}
.l08__row{display:grid; grid-template-columns:auto 1.1fr 1fr auto; gap:clamp(16px,2.5vw,40px);
  align-items:baseline; padding:var(--s6) 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
  transition:padding-left .25s}
.l08__row:hover{padding-left:var(--s3)}
.l08__idx{font-size:.82rem; color:var(--faint); font-variant-numeric:tabular-nums}
.l08__ttl{color:var(--ink); font-weight:600; font-size:1.04rem; letter-spacing:-0.015em}
.l08__meta{color:var(--muted); font-size:.92rem}
.l08__arrow{color:var(--muted); font-size:1.1rem}
@media(max-width:820px){ .l08__row{grid-template-columns:auto 1fr; gap:var(--s2) var(--s4)}
  .l08__meta{grid-column:2}  .l08__arrow{display:none} }

/* ============================================================
   L09 — COLABORĂRI (strip centrat cu instituții)
   ============================================================ */
.l09{text-align:center}
.l09__label{font-size:.8rem; color:var(--faint); text-transform:uppercase; letter-spacing:.12em; margin-bottom:var(--s6)}
.l09__row{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s5) var(--s8)}
.l09__row span{color:var(--muted); font-weight:600; font-size:1.05rem; letter-spacing:-0.01em}
.l09__row span small{display:block; font-weight:400; font-size:.78rem; color:var(--faint); letter-spacing:0; margin-top:.2em}

/* ============================================================
   L10 — DESPRE (stat gigant + narațiune + valori)
   ============================================================ */
.l10{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center}
.l10__stat{font-size:clamp(4rem,11vw,8.5rem); font-weight:700; letter-spacing:-0.05em; color:var(--ink); line-height:.85}
.l10__stat span{font-size:.28em; font-weight:600; letter-spacing:-0.02em; color:var(--muted); display:block; margin-top:var(--s4)}
.l10__vals{margin-top:var(--s6); display:flex; flex-wrap:wrap; gap:var(--s2)}
.l10__vals span{font-size:.84rem; color:var(--text); border:1px solid var(--line-2); border-radius:var(--pill); padding:.4em .85em}
@media(max-width:820px){ .l10{grid-template-columns:1fr; gap:var(--s6)} }

/* ============================================================
   L11 — CITAT / POZIȚIONARE (band centrat)
   ============================================================ */
.l11{text-align:center; max-width:900px; margin-inline:auto}
.l11__q{font-size:clamp(1.5rem,3.4vw,2.6rem); font-weight:600; letter-spacing:-0.025em; color:var(--ink); line-height:1.18}
.l11__q em{font-style:normal; color:var(--muted)}
.l11__who{margin-top:var(--s6); color:var(--faint); font-size:.92rem}

/* ============================================================
   L12 — FAQ (acordeon, progressive disclosure)
   ============================================================ */
.l12{border-top:1px solid var(--line); max-width:840px}
.l12 details{border-bottom:1px solid var(--line)}
.l12 summary{cursor:pointer; list-style:none; padding:var(--s5) 0; display:flex; justify-content:space-between;
  gap:var(--s4); align-items:center; font-weight:600; color:var(--ink); font-size:1.05rem; letter-spacing:-0.01em}
.l12 summary::-webkit-details-marker{display:none}
.l12 summary::after{content:"+"; font-weight:400; font-size:1.5rem; color:var(--muted); line-height:1}
.l12 details[open] summary::after{content:"\2013"}
.l12__a{padding:0 0 var(--s5); color:var(--muted); max-width:72ch}

/* ============================================================
   L13 — BENTO (grilă de destinații, dale fără card, hairline)
   ============================================================ */
.l13{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden}
.l13 a{background:var(--bg); padding:clamp(24px,3vw,40px); text-decoration:none; color:inherit;
  display:flex; flex-direction:column; min-height:180px; transition:background .2s}
.l13 a:hover{background:var(--surface)}
.l13 .t{grid-column:span 4} .l13 .s{grid-column:span 2} .l13 .f{grid-column:span 6}
.l13__k{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin-bottom:var(--s3)}
.l13 h3{margin-bottom:var(--s2)}
.l13 p{color:var(--muted); font-size:.93rem}
.l13 .more{margin-top:auto; padding-top:var(--s5); color:var(--ink); font-weight:500; font-size:.9rem}
@media(max-width:820px){ .l13{grid-template-columns:1fr} .l13 .t,.l13 .s,.l13 .f{grid-column:auto} }

/* ============================================================
   L14 — CTA INK (band negru + newsletter inline)
   ============================================================ */
.l14{background:#0b0b0c; border-radius:var(--radius); padding:clamp(40px,6vw,80px); text-align:center}
.l14 .eyebrow{color:rgba(255,255,255,.55)}
.l14 h2{color:#fff; max-width:20ch; margin:var(--s4) auto 0}
.l14 p{color:rgba(255,255,255,.7); margin:var(--s4) auto 0; max-width:46ch}
.l14__form{display:flex; gap:var(--s2); max-width:440px; margin:var(--s7) auto 0; flex-wrap:wrap; justify-content:center}
.l14__form input{flex:1; min-width:220px; font:inherit; font-size:1rem; padding:.85em 1.1em; border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#fff}
.l14__form input::placeholder{color:rgba(255,255,255,.5)}
.l14__form input:focus{outline:none; border-color:rgba(255,255,255,.5)}
.l14__form .btn--primary{background:#fff; color:#0b0b0c}
.l14__alt{margin-top:var(--s5); color:rgba(255,255,255,.5); font-size:.86rem}
.l14__alt a{color:#fff}

/* ============================================================
   FOOTER (mega, 4 coloane)
   ============================================================ */
.footer{border-top:1px solid var(--line); padding-block:var(--s8) var(--s6); font-size:.92rem; color:var(--muted)}
.footer__grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s6)}
@media(max-width:760px){ .footer__grid{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1/-1} }
.footer h4{font-size:.74rem; text-transform:uppercase; letter-spacing:.11em; color:var(--faint); margin-bottom:var(--s4); font-weight:600}
.footer a{color:var(--muted); text-decoration:none} .footer a:hover{color:var(--ink)}
.footer__brand .brand{font-size:1.12rem}
.footer .stack{display:grid; gap:var(--s2)}
.footer__legal{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:.82rem; color:var(--faint); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}

/* Marcaj de gol (date lipsă) */
.gap{color:var(--muted); border-bottom:1px dashed var(--line-2); white-space:nowrap}

/* Callout / disclaimer (reutilizabil, non-layout) */
.callout{border:1px solid var(--line-2); border-left:3px solid var(--ink); background:var(--surface);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:var(--s5) var(--s6); color:var(--muted); font-size:.95rem; max-width:var(--measure)}
.callout strong{color:var(--ink)}

/* ============================================================
   LAYOUTURI SUPLIMENTARE pentru SUBPAGINI (L15…)
   (definite din timp ca să existe vocabular fără repetare)
   ============================================================ */

/* L15 — Hero de subpagină (breadcrumb + titlu + rezumat TL;DR) */
.l15{padding-block:clamp(48px,7vw,92px) clamp(28px,4vw,48px)}
.l15__crumbs{font-size:.85rem; color:var(--faint); margin-bottom:var(--s5)}
.l15__crumbs a{color:var(--muted); text-decoration:none}
.l15__crumbs a:hover{color:var(--ink)}
.l15__tldr{margin-top:var(--s6); padding:var(--s5) var(--s6); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); max-width:var(--measure)}
.l15__tldr .eyebrow{margin-bottom:var(--s3)}

/* L16 — Două coloane text + media (motiv rezonanță), alternabile */
.l16{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.l16--rev .l16__media{order:-1}
.l16__media{position:relative; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  aspect-ratio:4/3; overflow:hidden; display:flex; align-items:center; justify-content:center}
.l16__media::before{content:""; position:absolute; inset:-30%;
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 21px, rgba(0,0,0,.05) 21px 22px)}
.l16__media.ink{background:#0b0b0c; border-color:#0b0b0c}
.l16__media.ink::before{background:repeating-radial-gradient(circle at 50% 50%, transparent 0 21px, rgba(255,255,255,.07) 21px 22px)}
.l16__tag{position:relative; font-size:.72rem; color:var(--faint); text-transform:uppercase; letter-spacing:.12em;
  background:var(--bg); padding:.45em .85em; border:1px solid var(--line); border-radius:var(--pill)}
.l16__media.ink .l16__tag{background:#0b0b0c; color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.2)}
@media(max-width:820px){ .l16{grid-template-columns:1fr; gap:var(--s6)} .l16--rev .l16__media{order:0} }

/* L17 — Timeline / proces vertical cu șină */
.l17{display:grid; gap:0}
.l17__row{display:grid; grid-template-columns:auto 1fr; gap:var(--s5)}
.l17__rail{display:flex; flex-direction:column; align-items:center}
.l17__dot{flex:none; width:42px; height:42px; border-radius:var(--pill); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--ink); background:var(--bg); font-size:.9rem}
.l17__line{width:1px; flex:1; background:var(--line); margin:var(--s2) 0}
.l17__row:last-child .l17__line{display:none}
.l17__body{padding-bottom:var(--s7)} .l17__row:last-child .l17__body{padding-bottom:0}
.l17__body h3{margin-bottom:var(--s2)} .l17__body p{color:var(--muted)}

/* L18 — Tabel de date (înainte/după, dB, valori) */
.l18{width:100%; border-collapse:collapse; font-size:.96rem}
.l18 caption{text-align:left; color:var(--faint); font-size:.85rem; margin-bottom:var(--s4)}
.l18 th,.l18 td{text-align:left; padding:var(--s4) var(--s5); border-bottom:1px solid var(--line); vertical-align:top}
.l18 thead th{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600}
.l18 tbody th{color:var(--ink); font-weight:600}
.l18 td b{color:var(--ink)}
.l18 tr:last-child td,.l18 tr:last-child th{border-bottom:0}

/* L19 — Comparație 2 coloane (clasic vs O.V.E.P.) */
.l19{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2);
  border-radius:var(--radius); overflow:hidden}
.l19__col{background:var(--bg); padding:clamp(24px,3vw,40px)}
.l19__col--hi{background:var(--surface)}
.l19__col h3{margin-bottom:var(--s4)}
.l19__col .ticks li{font-size:.95rem}
@media(max-width:700px){ .l19{grid-template-columns:1fr} }

/* L20 — Două panouri lipite: aside sticky + conținut (subpagină tehnologie) */
.l20{display:grid; grid-template-columns:.55fr 1.45fr; gap:clamp(32px,5vw,72px); align-items:start}
.l20__aside{position:sticky; top:90px}
.l20__aside .nav-mini{display:grid; gap:var(--s2); margin-top:var(--s4); border-left:1px solid var(--line); padding-left:var(--s4)}
.l20__aside .nav-mini a{color:var(--muted); text-decoration:none; font-size:.92rem}
.l20__aside .nav-mini a:hover{color:var(--ink)}
.l20__block+.l20__block{margin-top:var(--s8); padding-top:var(--s8); border-top:1px solid var(--line)}
@media(max-width:820px){ .l20{grid-template-columns:1fr; gap:var(--s6)} .l20__aside{position:static} }

/* L21 — Definiție-grid (termen → explicație, 2 col) */
.l21{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.l21 div{background:var(--bg); padding:var(--s6)}
.l21 dt{color:var(--ink); font-weight:600; margin-bottom:var(--s2)}
.l21 dd{color:var(--muted); font-size:.95rem}
@media(max-width:700px){ .l21{grid-template-columns:1fr} }

/* L22 — Contact split (detalii stânga + formular dreapta) */
.l22{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start}
.l22__list{display:grid; gap:var(--s5)}
.l22__list .it{display:grid; gap:var(--s1)}
.l22__list .it .k{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.l22__list .it .v{color:var(--ink); font-size:1.05rem}
.l22__social{display:flex; gap:var(--s4); margin-top:var(--s3)}
.l22__social a{color:var(--muted); text-decoration:none; font-weight:500}
.l22__social a:hover{color:var(--ink)}
@media(max-width:820px){ .l22{grid-template-columns:1fr; gap:var(--s7)} }

/* Formular (reutilizabil) */
.form{display:grid; gap:var(--s4)}
.field{display:grid; gap:var(--s2)}
.field label{font-size:.85rem; color:var(--muted); font-weight:500}
.field input,.field textarea{font:inherit; font-size:1rem; padding:.8em 1em; border:1px solid var(--line-2);
  border-radius:var(--radius-sm); background:#fff; color:var(--ink); width:100%}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--ink)}
.field textarea{min-height:120px; resize:vertical}
.consent{display:flex; gap:var(--s3); align-items:flex-start; font-size:.85rem; color:var(--muted)}
.consent input{margin-top:.25em}

/* L23 — Grilă flexibilă de caracteristici (auto-fit, fără celule goale) */
.l23{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(24px,3vw,48px)}
.l23__item{border-top:2px solid var(--ink); padding-top:var(--s5)}
.l23__k{font-size:.78rem; font-weight:600; color:var(--faint); letter-spacing:.05em; text-transform:uppercase}
.l23__item h3{margin:var(--s4) 0 var(--s3)}
.l23__item p{color:var(--muted); font-size:.95rem}
.l23__item .ticks{margin-top:var(--s4)}

/* L24 — Spec-sheet (cheie → valoare, ca o fișă tehnică) */
.l24{display:grid; gap:0; border-top:1px solid var(--line-2)}
.l24__row{display:grid; grid-template-columns:minmax(160px,.4fr) 1fr; gap:clamp(16px,3vw,48px);
  padding:var(--s5) 0; border-bottom:1px solid var(--line); align-items:baseline}
.l24__k{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:600}
.l24__v{color:var(--ink); font-size:1.02rem}
.l24__v small{display:block; color:var(--muted); font-size:.88rem; margin-top:var(--s1)}
@media(max-width:600px){ .l24__row{grid-template-columns:1fr; gap:var(--s2)} }

/* Bloc de studiu (dosar) — antet meta + tabel de date */
.studyblock{padding-block:clamp(36px,5vw,64px); border-top:1px solid var(--line-2)}
.studyblock:first-of-type{border-top:0}
.studyblock__head{display:grid; grid-template-columns:auto 1fr; gap:var(--s4) var(--s5); align-items:baseline; margin-bottom:var(--s6)}
.studyblock__idx{font-size:clamp(1.4rem,2.4vw,2rem); font-weight:700; letter-spacing:-0.03em; color:var(--faint); line-height:1; font-variant-numeric:tabular-nums}
.studyblock__title h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.studyblock__meta{color:var(--muted); font-size:.9rem; margin-top:var(--s2)}
.studyblock__body{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4vw,64px); align-items:start}
.studyblock__body .lead{font-size:1.04rem; color:var(--text)}
@media(max-width:820px){ .studyblock__body{grid-template-columns:1fr; gap:var(--s5)} .studyblock__head{grid-template-columns:1fr} }

/* Index hub (pentru index.html landing-2) */
.l00-hero{padding-block:clamp(64px,9vw,120px) var(--s7)}
.l00-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2);
  border-radius:var(--radius); overflow:hidden}
.l00-grid a{background:var(--bg); padding:var(--s7); text-decoration:none; color:inherit; display:flex; flex-direction:column; min-height:160px; transition:background .2s}
.l00-grid a:hover{background:var(--surface)}
@media(max-width:700px){ .l00-grid{grid-template-columns:1fr} }