:root{
  --bg:#F7F6F2; --ink:#1C2321; --ink-muted:#5B6462;
  /* Paletă finală (2026-08-16, din logo-urile reale ale familiei HRwise)
     -- teal înlocuiește amber-ul respins ca "prea Egalis". Două
     nuanțe deliberate, nu una: --accent e teal ÎNCHIS, calculat să treacă
     WCAG AA ca text pe fundal crem/alb (contrast exact, nu presupus --
     5.25:1 pe crem, 5.67:1 pe alb, vezi raport). --accent-bright e teal-ul
     brut de brand (#0FC4E8) -- NICIODATĂ ca text pe fundal deschis (doar
     1.93-2.08:1, eșuează), rezervat exclusiv pentru fundal navy (footer) și
     elemente decorative mari (icoane, gradient-uri) unde nu se aplică prag
     de contrast pentru text. */
  --accent:#0A6F92; --accent-bright:#0FC4E8;
  --gold:#FECF0F; --magenta:#BA2AAD; /* accente RARE -- vezi CLAUDE.md, nu bază de culoare */
  --line:#D8D4C8; --calibrated:#3F6B54; --card:#FFFFFF;
  --bg-gradient:linear-gradient(165deg, #FAF8F3 0%, #F7F5EF 42%, #F2EEE4 100%);
  --shadow-card:0 1px 2px rgba(28,35,33,0.04), 0 6px 16px rgba(28,35,33,0.045);
  --shadow-card-hover:0 2px 4px rgba(28,35,33,0.05), 0 12px 24px rgba(10,111,146,0.09);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg-gradient) fixed; color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif; line-height:1.5;
}
.mono{font-family:'IBM Plex Mono', monospace;}
.display{font-family:'Space Grotesk', sans-serif;}
a{color:inherit;}
.wrap{max-width:960px; margin:0 auto; padding:0 24px;}

header.site{
  position:sticky; top:0; z-index:20; background:rgba(247,246,242,0.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
}
header.site .bar{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.wordmark{display:flex; align-items:center; gap:8px; text-decoration:none;}
.wordmark span{font-family:'Space Grotesk', sans-serif; font-size:1.15rem; font-weight:500; letter-spacing:-0.01em; color:var(--ink);}
/* Redenumire AuditSalariu -> PayWise (2026-08-27) -- badge discret "un
   produs HRwise" DOAR pe wordmark-ul din header (cerut explicit, "mărime
   mică, nu concurează cu wordmark-ul principal"); footer-ul rămâne text
   simplu, are deja atribuirea legală completă (furnizorul PayWise, din
   web/src/lib/furnizorPaywise.json) în rândul de sub el -- un al doilea badge acolo ar fi redundant. */
.wordmark-text{display:flex; flex-direction:column; line-height:1.1;}
/* Specificitate ridicată deliberat (.wordmark .wordmark-name, nu doar
   .wordmark-name) -- ca să bată regula generică ".wordmark span" de mai
   sus (1 clasă + 1 element = totuși specificitate mai mare decât o
   singură clasă simplă), fără să ating acea regulă (footer-ul tot are
   nevoie de ea, pe span-ul lui simplu, neschimbat). */
.wordmark .wordmark-name{font-family:'Space Grotesk', sans-serif; font-size:1.15rem; font-weight:500; letter-spacing:-0.01em; color:var(--ink);}
.wordmark .wordmark-sub{font-family:'IBM Plex Sans', sans-serif; font-size:0.62rem; font-weight:400; color:var(--ink-muted); letter-spacing:0.01em;}
nav.main{display:flex; gap:28px; font-size:0.9rem;}
/* Contrast corectat (2026-09-01, Ali: "foarte șters") -- starea implicită
   trece de la --ink-muted (gri deschis, sub pragul perceput lizibil) la
   --ink (charcoal, contrast solid pe fundalul aproape-alb al header-ului).
   Accentul de brand (--accent) rămâne rezervat STRICT pentru starea activă/
   hover, ca să nu aglomereze cele 5 linkuri cu culoare peste tot. */
nav.main a{color:var(--ink); text-decoration:none; font-weight:500;}
nav.main a:hover, nav.main a.active{color:var(--accent); font-weight:600;}
nav.main a.active{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px;}
/* Comutator de limbă (redesenat 2026-09-27, kickoff Ali) -- ambele
   variante vizibile deodată ("RO | EN"), nu doar limba-țintă -- limba
   activă evidențiată prin culoarea de accent + bold, nu gri neutru.
   NOTĂ: Ali a cerut "paleta navy/amber" -- paleta reală, deliberat
   stabilită (16.08.2026, vezi comentariul de la :root) e teal (--accent)
   + auriu STRICT ca accent rar, niciodată pe UI de bază/persistentă ca
   acest comutator (exact motivul respingerii paletei navy/amber inițiale,
   "prea Egalis"). Folosit --accent aici, nu auriu -- semnalat, nu ignorat. */
nav.main .lang-toggle{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:999px; padding:3px 11px;
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:600;
}
.lang-toggle-icon{width:13px; height:13px; color:var(--ink-muted);}
.lang-toggle-current{color:var(--accent); font-weight:700;}
.lang-toggle-sep{color:var(--line);}
.lang-toggle-link{color:var(--ink-muted); text-decoration:none; font-weight:600;}
.lang-toggle-link:hover{color:var(--accent); text-decoration:none;}
.btn{
  display:inline-block; font-size:0.9rem; padding:10px 18px; border-radius:6px;
  text-decoration:none; border:1px solid var(--ink); color:var(--ink);
  transition:background 0.15s, color 0.15s, transform 0.15s;
}
.btn:hover{background:var(--ink); color:#fff; transform:translateY(-1px);}
.btn.primary{background:var(--ink); color:#fff;}
.btn.primary:hover{opacity:0.85;}

.eyebrow{
  color:var(--accent); font-family:'IBM Plex Mono', monospace; font-size:0.75rem;
  letter-spacing:0.12em; text-transform:uppercase; margin-bottom:14px;
}
/* Tipografie (2026-08-26): serif pentru titluri mari (h1), character
   similar cu referința PwC trimisă de Ali, dar NU fontul lor literal
   (corporate/licențiat, nu-l putem identifica sigur dintr-o captură și nu
   e al nostru de clonat). Newsreader (Google Fonts, licență liberă),
   greutate 500 -- body/UI rămân pe IBM Plex Sans, neschimbat, una din cele
   2 combinații recomandate explicit de Ali. Captură comparativă trimisă
   înainte de a considera decizia finală. */
h1{font-family:'Newsreader', serif; font-weight:500; letter-spacing:0; line-height:1.08; font-size:2.6rem; max-width:640px; margin:0 0 18px;}
h2{font-family:'Space Grotesk', sans-serif; font-weight:500; letter-spacing:-0.01em; font-size:1.6rem; margin:0 0 12px;}
h3{font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:1.05rem; margin:0 0 6px; line-height:1.35;}
p{color:var(--ink-muted); margin:0 0 12px; text-align:justify; hyphens:auto;}
.lede{font-size:1.15rem; max-width:560px; line-height:1.6;}

/* Vizual ascuns, dar citit de screen readere -- tipar standard. Folosit la
   mesajele rotative din hero (2026-09-27): lista completă e mereu în DOM
   pentru screen readere, varianta rotativă (.hero-rotator) e aria-hidden. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Mesaje rotative sub H1 (homepage, 2026-09-27) -- fostul H1 ("nu generăm
   rapoarte din payroll") + 2 mesaje noi, cu crossfade simplu, fără librărie.
   Container aria-hidden -- lista .sr-only de mai sus e sursa reală pentru
   screen readere, ca să nu fie nevoie de aria-live (ar anunța fiecare
   schimbare, zgomot inutil pentru un mesaj secundar necritic). */
.hero-rotator{ position:relative; height:1.5em; margin:8px 0 16px; font-size:0.95rem; color:var(--ink-muted); }
.hero-rotator-msg{
  position:absolute; inset:0; opacity:0; transition:opacity 0.6s ease;
}
.hero-rotator-msg.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-rotator-msg{ transition:none; }
}

/* Gap redus 2026-08-28 (semnalat de Ali, "prea mult spațiu între chenare
   stivuite"): 64px -> 40px per parte = 128px -> 80px între panouri
   succesive, reducere de 37.5%, în intervalul cerut (30-40%). */
section{padding:40px 0; border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}

.grid2{display:grid; grid-template-columns:minmax(0,1fr); gap:40px;}
.grid3{display:grid; grid-template-columns:minmax(0,1fr); gap:20px;}
.grid4{display:grid; grid-template-columns:minmax(0,1fr); gap:16px;}
/* Ordinea breakpoint-urilor contează AICI (specificitate egală, câștigă
   ultima regulă din sursă) -- găsit real 2026-09-01: .grid4 la 860px era
   scris ÎNAINTEA regulii de 640px, deci 2 coloane câștiga silențios chiar
   și pe desktop larg. Corectat: mobil-first, strict crescător. */
@media(min-width:640px){
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:860px){
  .grid3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* Cei 4 piloni (homepage, 2026-09-01) -- iconițe Balanța, centrate, text
   scurt. Reutilizează .card, doar centrare + spațiere proprie. */
.pillar-card{ text-align:center; align-items:center; }
.pillar-card img{ margin-bottom:12px; }
.pillar-card h3{ margin-bottom:8px; }
.pillar-card p{ font-size:0.9rem; margin:0; }

/* .grid3 pe pagina Ghidul legii -- reducere spațiu deasupra primului rând
   de carduri, semnalată explicit de Ali (gol prea mare între ultimul panou
   de text și primul rând). Secțiunea în sine păstrează padding:40px 0 (nu
   modificăm regula generică -- ar atinge tot site-ul), doar cea care
   urmează imediat unui .ghid-panel, pe pagini ghid-legii. */
body.ghid-legii section:has(> .wrap-wide > .grid3){ padding-top:8px; }
.card .ladder-inherited{ text-align:left; }
.card .ladder-new{ text-align:left; font-size:0.88rem; }

/* Callout "ce puteți face acum" (2026-08-29) -- îndemn pozitiv, NU
   avertisment -- deliberat pe accentul de brand (teal), niciodată roșu de
   alertă. Fundal #EAF6FA verificat -- B(250) > R(234) și > G(246), rece,
   trece scanner-ul de fundal. */
.callout-urgent{
  background:#EAF6FA; border-left:4px solid var(--accent); border-radius:8px;
  padding:16px 20px; margin:20px 0; display:flex; gap:12px; align-items:flex-start;
}
.callout-urgent .icon{ color:var(--accent); flex-shrink:0; margin:2px 0 0; width:22px; height:22px; }
.callout-urgent p{ margin:0; font-size:0.9rem; }
.callout-urgent strong{ color:var(--accent); }
.callout-urgent--compact{ padding:12px 16px; font-size:0.85rem; }
.callout-urgent--compact p{ font-size:0.85rem; }

.item{display:flex; gap:16px;}
.item .num{color:var(--accent); font-family:'IBM Plex Mono', monospace; font-size:0.9rem; padding-top:2px;}
.item p{font-size:0.92rem;}

.icon{width:26px; height:26px; display:block; color:var(--ink); stroke-width:1.5; margin-bottom:14px;}
.card .icon, .stat .icon{color:var(--accent);}
.service h2{display:flex; align-items:center; gap:12px;}
.service h2 .icon{width:22px; height:22px; margin-bottom:0; flex-shrink:0;}

table.tiers{width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
table.tiers td{padding:16px 20px; border-top:1px solid var(--line); font-size:0.92rem; vertical-align:top;}
table.tiers tr:first-child td{border-top:none;}
table.tiers tr:nth-child(even){background:rgba(0,0,0,0.015);}
table.tiers td:first-child{font-family:'IBM Plex Mono', monospace; color:var(--accent); white-space:nowrap; width:120px;}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px;
  display:flex; flex-direction:column; box-shadow:var(--shadow-card);
  transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover);}
/* Afordanță de link pe cardurile clickable (Ghidul legii, 2026-09-27) --
   semnal vizual clar că cardul întreg e clickabil, nu doar text. */
.card-link .card-more-link{
  margin-top:auto; padding-top:14px; color:var(--accent); font-weight:600;
  font-size:0.85rem;
}
.card-link:hover .card-more-link{ text-decoration:underline; }
.card.featured{border-color:var(--accent);}
.card .tag{color:var(--accent); font-family:'IBM Plex Mono', monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px;}
.card .size{color:var(--ink-muted); font-size:0.78rem; display:block; margin-bottom:10px;}
.card .price{font-family:'IBM Plex Mono', monospace; font-size:1.1rem; margin-bottom:14px; color:var(--accent);}
.card ul{list-style:none; margin:0; padding:0; font-size:0.88rem; color:var(--ink-muted); flex:1;}
.card ul li{margin-bottom:7px; padding-left:14px; position:relative;}
.card ul li::before{content:"·"; position:absolute; left:0; color:var(--accent);}

.stat .value{font-family:'Space Grotesk', sans-serif; font-size:3rem; font-weight:500; margin-bottom:8px;}
.stat p{max-width:320px; font-size:0.9rem;}
.stat .why-list{max-width:340px; font-size:0.9rem; margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px;}

form label{display:block; font-size:0.78rem; color:var(--ink-muted); margin-bottom:6px;}
form input, form select{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:6px;
  font-size:0.9rem; font-family:'IBM Plex Sans', sans-serif; background:#fff; margin-bottom:16px;
  transition:border-color 0.15s;
}
form input:focus, form select:focus{outline:1px solid var(--accent); border-color:var(--accent);}
.notice{border:1px solid var(--calibrated); color:var(--calibrated); border-radius:6px; padding:14px 16px; font-size:0.9rem;}

footer.site{border-top:1px solid var(--line);}
footer.site .bar{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding:28px 0; font-size:0.8rem; color:var(--ink-muted);}
.footer-contact{padding:0 0 24px; font-size:0.85rem;}
.footer-contact a{color:var(--accent); font-family:'IBM Plex Mono', monospace; text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px;}
.footer-contact a:hover{opacity:0.7;}

/* --- Footer, 3 coloane + subsol --- */
/* Paletă navy/teal, STRICT pentru footer -- restul site-ului rămâne pe tema
   crem, neatinsă. Variabile proprii, scopate pe footer.site, ca să nu se
   amestece cu --ink/--accent globale folosite peste tot altundeva.
   --footer-accent = --accent-bright (#0FC4E8, teal brut de brand) --
   corect AICI, spre deosebire de fundal crem/alb, pentru că fundalul e
   navy închis: 6.64:1 pe navy principal, 8.10:1 pe navy închis (subsol) --
   ambele peste AA, al doilea peste AAA. Amber-ul inițial (#F2A93B, respins
   de Ali ca "prea Egalis") înlocuit complet -- 2026-08-16. */
footer.site{
  --footer-bg:#1E2761; --footer-bg-dark:#141A3D; --footer-text-secondary:#3A3F55;
  --footer-fg:#FFFFFF; --footer-fg-muted:#AEB6D6; --footer-fg-link:#CADCFC;
  --footer-accent:var(--accent-bright);
  background:var(--footer-bg); border-top:none;
}
.footer-columns{display:grid; grid-template-columns:1fr; gap:32px; padding:48px 0 32px;}
@media(min-width:640px){ .footer-columns{grid-template-columns:1.3fr 1fr 1fr;} }
.footer-col .wordmark span{color:var(--footer-fg);}
.footer-col .wordmark svg path, .footer-col .wordmark svg line{stroke:var(--footer-fg) !important;}
.footer-col .wordmark{margin-bottom:10px;}
.footer-col h4{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--footer-accent); margin:0 0 12px;}
.footer-col p{font-size:0.82rem; margin:0 0 6px; color:var(--footer-fg-muted);}
.footer-col a{display:block; color:var(--footer-fg-link); text-decoration:none; font-size:0.88rem; margin-bottom:8px;}
.footer-col a:hover{color:var(--footer-accent);}
.footer-bottom{background:var(--footer-bg-dark); padding:20px 0;}
.footer-bottom-inner{display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center; font-size:0.78rem; color:var(--footer-fg-muted);}
.footer-bottom .footer-legal-links a, .footer-bottom .footer-contact-inline a{color:var(--footer-accent); text-decoration:none; border-bottom:1px solid var(--footer-accent); padding-bottom:1px;}
.footer-bottom .footer-legal-links a:hover, .footer-bottom .footer-contact-inline a:hover{opacity:0.75;}
.footer-contact-inline{display:flex; gap:16px; flex-wrap:wrap;}

/* --- Listă cu bullet-uri, în afara unui .card (homepage, "pas cu pas") --- */
.checklist{list-style:none; margin:0; padding:0;}
.checklist li{margin-bottom:14px; padding-left:20px; position:relative; font-size:0.95rem; color:var(--ink-muted); line-height:1.5;}
.checklist li::before{content:"·"; position:absolute; left:0; top:-2px; color:var(--accent); font-size:1.3rem; line-height:1;}

/* --- Pagini legale (politici, termeni) --- */
.legal-content{max-width:720px;}
.legal-content h2{margin-top:36px; font-size:1.25rem;}
.legal-content h2:first-of-type{margin-top:0;}
.legal-content p, .legal-content li{font-size:0.92rem;}
.legal-content table{width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:0.85rem;}
.legal-content table th, .legal-content table td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top;}
.legal-content table th{background:rgba(0,0,0,0.02); font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-muted);}
.legal-content .updated{font-size:0.8rem; color:var(--ink-muted); font-style:italic; margin-top:40px;}
.legal-content .legal-version{font-size:0.9rem; color:var(--ink-muted); margin:-4px 0 28px;}
.legal-content .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0 24px;}
.legal-content .table-scroll table{margin:0;}

/* --- Hero (index.html) --- */
.wrap-hero{max-width:1180px; margin:0 auto; padding:0 24px;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center;}
@media(min-width:860px){
  .hero-grid{grid-template-columns:1fr 1.15fr; gap:64px;}
}
.hero-scale{width:100%;}
.tick-scale{width:100%; height:auto; max-width:520px; display:block; margin-top:0;}
@media(min-width:860px){ .tick-scale{max-width:560px;} }
/* Bug real, găsit prin scanare automată (nu vizual): la 390px, un singur
   cuvânt EN nedespărțibil ("disagreements", "uncalibrated") depășea
   bugetul de ~74px alocat prin flex:1, forțând întregul rând -- și, prin
   min-width:auto implicit pe track-ul de grid al .hero-grid, ÎNTREAGA
   coloană hero -- să se lățească peste viewport (confirmat izolat,
   element cu element, nu presupus). Fix robust: rândul se poate rupe pe
   2 linii sub 480px, în loc să forțeze o singură linie indiferent de
   lungimea textului -- 0 risc de overflow, oricât de lungă ar fi o
   traducere viitoare. */
.scale-caption{
  display:flex; flex-wrap:wrap; justify-content:center; column-gap:10px; row-gap:2px;
  font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--ink-muted);
  max-width:100%; margin-top:4px;
}
.scale-caption span{ text-align:center; }
@media(min-width:480px){
  .scale-caption{ flex-wrap:nowrap; justify-content:space-between; gap:4px; }
  .scale-caption span{ flex:1; min-width:0; }
  .scale-caption span:first-child{text-align:left;}
  .scale-caption span:last-child{text-align:right;}
}
@media(min-width:600px){ .scale-caption{max-width:520px;} }
@media(min-width:860px){ .scale-caption{max-width:560px; font-size:0.72rem;} }

/* --- Homepage section variety --- */
section.no-line{border-bottom:none;}
/* section.tinted (fundal amber-brun translucid) ELIMINAT -- 2026-08-16,
   audit de fundal: singura utilizare (secțiunea roadmap) tocmai a fost
   scoasă din acea zonă cromatică. Regulă ștearsă complet, nu doar
   dezactivată, ca să nu poată fi reintrodusă din greșeală mai târziu. */
.grid2.asym{grid-template-columns:1fr;}
@media(min-width:640px){ .grid2.asym{grid-template-columns:1.15fr 0.85fr;} }

.scale-divider{
  height:7px; margin:0;
  background-image:linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size:22px 7px; background-repeat:repeat-x; background-position:left top;
  opacity:0.8;
}

.closing-cta{text-align:center;}
.closing-cta .lede{margin:0 auto 24px;}
.closing-cta .actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center;}

/* --- Calibration marker: continuous life + periodic recalibration --- */
.calibration-marker{transform-box:fill-box; transform-origin:center; animation:marker-recalibrate 18s ease-in-out infinite;}
.marker-dot{transform-box:fill-box; transform-origin:center; animation:marker-pulse 2.6s ease-in-out infinite;}
@keyframes marker-pulse{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.15); opacity:0.82;}
}
@keyframes marker-recalibrate{
  0%,88%,100%{transform:translateX(0);}
  91%{transform:translateX(-5px);}
  94%{transform:translateX(4px);}
  97%{transform:translateX(0);}
}
@media (prefers-reduced-motion: reduce){
  .calibration-marker, .marker-dot{animation:none;}
}

/* --- Roadmap (homepage, "cum funcționează") --- */
/* Redesign 2026-08-16: traseu conectat (linie punctată, orizontală pe
   desktop) cu marcaje care alternează deasupra/dedesubtul liniei, cerculețe
   PASTELATE (nu pline/saturate) cu iconița Lucide în interior -- două
   tonuri, alternate, DERIVATE din paleta deja stabilită (teal + un roz/coral
   pal din magenta), NICIODATĂ din zona cromatică galben/auriu (regulă fermă
   Ali, repetată de 3 ori -- fundalul auriu-transparent folosit anterior la
   iconița "Onboarding" a fost exact greșeala de evitat, eliminat complet).
   Toate valorile pastelate + culorile de iconiță calculate exact (WCAG),
   nu presupuse -- vezi raportul din chat pentru cifrele de contrast. */
.roadmap-path{position:relative; margin-top:56px;}
.roadmap-line{
  display:none; position:absolute; left:0; right:0; top:50%; height:2px;
  background-image:repeating-linear-gradient(to right, var(--accent) 0 6px, transparent 6px 14px);
  transform:translateY(-50%); z-index:0;
}
@media(min-width:860px){
  .roadmap-path{display:flex; gap:4px;}
  .roadmap-line{display:block;}
}
.roadmap-step{
  flex:1; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:0; position:relative; z-index:1; min-width:0;
  opacity:0; transform:translateY(12px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.roadmap-step.in-view{opacity:1; transform:translateY(0);}
.roadmap-marker{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; margin:14px 0;
  order:1; /* pe mobil: mereu marker apoi text, indiferent de --above/--below */
}
.roadmap-content{padding:0 6px; order:2; max-width:220px;}
@media(min-width:860px){
  /* Marker-ul e ancorat prin poziționare absolută EXACT pe linie (top:50%
     al coloanei) -- nu prin flex justify-content/stretch. Găsire prin
     măsurare directă (bounding box, Playwright), nu presupunere: varianta
     inițială (flex-end/flex-start pe o coloană "stretched") NU alinia
     marker-ele pe linie deloc (diferență reală de 65-89px față de linie) --
     lungimea variabilă a titlurilor (1 vs 2 rânduri) strica alinierea.
     Poziția absolută decuplează complet marker-ul de înălțimea textului. */
  .roadmap-step{min-height:250px; justify-content:center;}
  /* Conținutul pozițiilor "dedesubt" e absolut poziționat -- nu contribuie
     la înălțimea naturală a .roadmap-path (250px), dar se întinde vizual
     ~75px sub ea. Fără marja de mai jos, butonul "Toate serviciile" și
     separatorul următor se suprapun peste text -- găsit prin măsurare
     directă (bounding box), nu presupus. */
  .roadmap-path{margin-bottom:90px;}
  .roadmap-marker{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); margin:0; z-index:2;}
  .roadmap-content{
    position:absolute; left:50%; transform:translateX(-50%); width:100%;
  }
  .roadmap-step--above .roadmap-content{bottom:calc(50% + 34px);}
  .roadmap-step--below .roadmap-content{top:calc(50% + 34px);}
}
.roadmap-marker svg{width:18px; height:18px; stroke-width:1.75;}
/* Pastel teal -- fundal #CFF3FA (mix 20% #0FC4E8 pe alb), iconiță #0A6F92
   (deja folosit ca --accent) -- 4.82:1, peste AA. */
.roadmap-marker--teal{background:#CFF3FA;}
.roadmap-marker--teal svg{color:var(--accent);}
/* Pastel roz/coral, derivat din magenta -- fundal #F1D4EF (mix 20%
   #BA2AAD pe alb), iconiță #8C1C7D (magenta închisă, NU cea brută -- brută
   dă doar 3.83:1) -- 5.98:1, peste AA. */
.roadmap-marker--pink{background:#F1D4EF;}
.roadmap-marker--pink svg{color:#8C1C7D;}
.roadmap-num{font-family:'IBM Plex Mono', monospace; font-size:0.68rem; color:var(--ink-muted); display:block; margin-bottom:2px;}
.roadmap-step h3{font-size:0.88rem; margin-bottom:4px;}
.roadmap-step p{font-size:0.78rem; margin-bottom:0;}
@media (prefers-reduced-motion: reduce){
  .roadmap-step{opacity:1; transform:none; transition:none;}
}

/* --- Ghidul legii: fundal decorativ propriu (2026-08-24) --- */
/* Gradientul navy->violet->magenta a fost DECIS de Ali pe 2026-08-16 ca
   fundal final al ÎNTREGULUI site, dar verificat direct în acest fișier
   ÎNAINTE de construcție -- --bg-gradient tot cremul vechi, niciodată
   aplicat. Scopat AICI strict pe cele 11 pagini "Ghidul legii" (clasă pe
   <body>), conform "nu atinge alte pagini existente" din acest prompt --
   raportat separat lui Ali ca discrepanță reală, nu presupus rezolvat.
   Regula fermă (B < R ȘI B < G = cald/gălbui, indiferent de luminozitate)
   verificată pe toate cele 3 opriri: 1E2761 (B>R,G), 5A2E8C (B>R,G),
   BA2AAD (B<R dar B>G -- magenta, nu cade în capcana galben/crem). Tot
   conținutul stă în chenare aproape-albe (.ghid-panel) -- gradientul e
   strict decorativ, nu poartă text direct. */
body.ghid-legii{
  background: linear-gradient(135deg, #1E2761 0%, #5A2E8C 50%, #BA2AAD 100%) fixed;
}
body.ghid-legii header.site{ background: rgba(255,255,255,0.94); }
/* Extindere site-wide (2026-08-26, decizie confirmată de Ali): cele 8
   pagini vechi primesc ACELAȘI body.ghid-legii (reutilizat, nu o variantă
   nouă) -- dar nu au fost restructurate cu .ghid-panel explicit în HTML
   (ar fi însemnat editarea manuală a fiecărei secțiuni, risc mare pe 8
   fișiere). În loc de asta: orice .wrap/.wrap-wide, copil direct al unui
   <section> din <main>, care NU conține deja un .ghid-panel (paginile
   Ghidul legii, verificat cu :has()), devine el însuși panelul -- același
   tratament vizual, zero HTML nou. .wrap-flat rămâne o portiță de ieșire
   dacă o secțiune anume nu trebuie panelată (ex. grile de carduri deja
   albe, ca să nu iasă cutie-în-cutie). */
body.ghid-legii main > section > .wrap:not(:has(.ghid-panel)),
body.ghid-legii main > section > .wrap-wide:not(:has(.ghid-panel)),
body.ghid-legii .wrap-hero{
  background: rgba(255,255,255,0.98); border-radius:16px;
  padding: 44px clamp(28px,4.5vw,60px); box-shadow: var(--shadow-card);
}
body.ghid-legii main > section > .wrap.wrap-flat{
  background:none; box-shadow:none; padding:0; border-radius:0;
}
/* Card/text din paginile vechi, panelate acum -- aceleași dimensiuni ca
   la Ghidul legii, ca să nu arate ca 2 sisteme tipografice diferite. */
body.ghid-legii main p, body.ghid-legii main li{ font-size:1.02rem; }
body.ghid-legii main .lede{ font-size:1.25rem; }

/* --- Meniu hamburger (2026-08-26) -- fix pentru scroll orizontal la
   390px, găsit pe TOATE paginile (inclusiv cele vechi) la fix-ul de
   proporții anterior. header.site .bar e flex fără wrap -- sub ~900px,
   4 linkuri + buton nu mai încap, ies din viewport. Injectat prin JS
   (script.js), nu prin HTML editat manual pe 19 fișiere -- markup-ul de
   header e identic pe toate paginile, un singur punct de control. */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  width:40px; height:40px; align-items:center; justify-content:center;
}
.nav-toggle svg{ width:22px; height:22px; color:var(--ink); }
@media(max-width:899px){
  .nav-toggle{ display:flex; }
  nav.main{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); flex-direction:column;
    gap:0; padding:8px 24px 16px; box-shadow:0 8px 16px rgba(28,35,33,0.08);
  }
  nav.main.nav-open{ display:flex; }
  nav.main a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:1rem; }
  nav.main a:last-child{ border-bottom:none; }
  header.site .bar .btn{ display:none; }
  header.site .bar.nav-open .btn{
    display:block; order:3; width:100%; text-align:center; margin-top:8px;
  }
  header.site .bar{ flex-wrap:wrap; position:relative; }
}

/* --- Modul cookies (2026-08-26) -- panou colț, funcțional (localStorage),
   NU doar cosmetic. Culori aliniate la .btn existent (ink/negru, folosit
   deja la "Intră în platformă") -- verificat în cod înainte de construcție,
   NU teal cum sugera inițial cerința (butoanele reale ale site-ului nu
   sunt teal). */
#cookie-banner{
  position:fixed; bottom:20px; right:20px; z-index:100; max-width:380px;
  width:calc(100% - 40px); background:#fff; border-radius:14px;
  box-shadow:0 8px 24px rgba(28,35,33,0.18); padding:24px;
  font-family:'IBM Plex Sans', sans-serif;
}
#cookie-banner h3{ font-size:1.05rem; margin:0 0 8px; }
#cookie-banner p{ font-size:0.85rem; margin:0 0 6px; }
#cookie-banner a{ color:var(--accent); text-decoration:underline; }
.cookie-actions{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.cookie-actions button{
  width:100%; padding:11px 14px; border-radius:6px; font-size:0.88rem; cursor:pointer;
  font-family:'IBM Plex Sans', sans-serif; transition:background 0.15s, color 0.15s;
}
.cookie-actions .cookie-accept{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.cookie-actions .cookie-accept:hover{ opacity:0.85; }
.cookie-actions .cookie-reject{ background:none; color:var(--ink); border:1px solid var(--ink); }
.cookie-actions .cookie-reject:hover{ background:var(--ink); color:#fff; }
.cookie-actions .cookie-settings{ background:none; color:var(--ink-muted); border:1px solid var(--line); }
.cookie-actions .cookie-settings:hover{ border-color:var(--ink); color:var(--ink); }
#cookie-settings-panel{
  position:fixed; inset:0; z-index:101; background:rgba(28,35,33,0.5);
  display:none; align-items:center; justify-content:center; padding:20px;
}
#cookie-settings-panel.open{ display:flex; }
.cookie-settings-box{
  background:#fff; border-radius:14px; padding:28px; max-width:440px; width:100%;
  max-height:85vh; overflow-y:auto;
}
.cookie-settings-box h3{ font-size:1.2rem; margin-bottom:16px; }
.cookie-toggle-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.cookie-toggle-row:last-of-type{ border-bottom:none; }
.cookie-toggle-row strong{ font-size:0.92rem; display:block; margin-bottom:4px; }
.cookie-toggle-row p{ font-size:0.82rem; margin:0; }
.cookie-toggle-row input[type="checkbox"]{ width:20px; height:20px; flex-shrink:0; margin-top:2px; accent-color:var(--ink); }
.cookie-settings-box .cookie-actions{ margin-top:20px; }
@media(max-width:480px){
  #cookie-banner{ right:12px; left:12px; width:auto; bottom:12px; }
}

/* --- Widget captare mini-curs gratuit (2026-08-25) -- doar UI, trimitere
   PLACEHOLDER (mailto:, ca la access-form/contact-form -- niciun mesaj fals
   de succes). Bara sticky (4 pagini de trafic mare) și blocul din footer
   (toate paginile) reutilizează paleta navy/teal deja stabilită pentru
   footer -- #1E2761/#0FC4E8, aceleași rate de contrast deja verificate
   (6.64:1+ pe navy). Vezi assets/script.js pentru injectare + integrarea
   reală de completat (Brevo sau alt serviciu ales de Ali). */
#minicurs-bar{
  position:sticky; top:0; z-index:30; background:#1E2761; color:#fff;
  font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem;
}
#minicurs-bar .wrap{
  display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center;
  justify-content:center; padding:12px 24px;
}
#minicurs-bar .minicurs-text{ color:#fff; flex:1 1 260px; min-width:0; align-self:center; }
#minicurs-bar .minicurs-text strong{ color:#0FC4E8; }

/* Formular comun (bară + footer, 2026-09-01) -- checkbox-uri + rând de
   e-mail/submit, ambele centrate pe verticală cu textul din stânga
   (Ali: "aliniate pe centrul vertical", indiferent că textul are 2 rânduri
   -- align-items:center pe fiecare nivel de flex, nu doar cel exterior). */
#minicurs-bar form{ display:flex; flex-direction:column; gap:6px; flex:0 1 460px; min-width:260px; }
/* Fără flex imbricat (label ÎN flex row) -- cauza reală a overflow-ului
   găsit la testare: un flex item care e el însuși flex container primește
   un min-width bazat pe conținut care nu se mai comprimă normal, textul
   ieșea vizual din propria cutie (scrollWidth > clientWidth, confirmat
   măsurat). Checkbox-ul e doar un element inline normal, aliniat cu
   vertical-align -- se comportă ca text obișnuit, se rupe normal la nevoie. */
.minicurs-checks{ display:flex; flex-wrap:wrap; column-gap:20px; row-gap:4px; font-size:0.78rem; margin:0; }
.minicurs-checks label{ cursor:pointer; flex:0 1 auto; max-width:100%; }
.minicurs-checks input[type="checkbox"]{ margin:0 5px 0 0; vertical-align:middle; }
.minicurs-hint{ font-size:0.7rem; margin:0; }
#minicurs-bar .minicurs-hint{ color:#AEB6D6; }
.minicurs-submit-row{ display:flex; gap:8px; align-items:center; }
.minicurs-submit-row input[type="email"]{
  flex:1; min-width:0; padding:8px 10px; border-radius:6px; border:1px solid transparent;
  font-family:'IBM Plex Sans', sans-serif; font-size:0.85rem;
}
.minicurs-submit-row button[type="submit"]{
  background:#0FC4E8; color:#0A2233; border:none; border-radius:6px;
  padding:8px 14px; font-size:0.85rem; font-weight:600; cursor:pointer;
  white-space:nowrap; transition:opacity 0.15s;
}
.minicurs-submit-row button[type="submit"]:hover{ opacity:0.85; }
.minicurs-submit-row button[type="submit"]:disabled{ opacity:0.6; cursor:default; }
.minicurs-eroare{ font-size:0.75rem; color:#FCA5CB; margin:0; }
.minicurs-confirmare{ color:#fff; font-size:0.85rem; align-self:center; }
@media(max-width:640px){
  #minicurs-bar .wrap{ justify-content:flex-start; }
  #minicurs-bar form{ flex:1 1 100%; }
  .minicurs-checks{ flex-direction:column; align-items:flex-start; gap:6px; }
  .minicurs-checks label{ white-space:normal; }
}

.footer-minicurs{ background:var(--footer-bg-dark, #141A3D); padding:28px 0; }
.footer-minicurs-inner{
  display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between;
}
.footer-minicurs-text h4{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.1em; color:#0FC4E8; margin:0 0 6px;
}
.footer-minicurs-text p{ font-size:0.85rem; color:#AEB6D6; margin:0; max-width:420px; }
.footer-minicurs-inner form{ display:flex; flex-direction:column; gap:8px; flex:0 1 460px; min-width:260px; }
.footer-minicurs-inner .minicurs-hint{ color:#AEB6D6; }
.footer-minicurs-inner .minicurs-submit-row input[type="email"]{ padding:10px 12px; font-size:0.88rem; }
.footer-minicurs-inner .minicurs-submit-row button[type="submit"]{ padding:10px 16px; font-size:0.88rem; }
@media(max-width:640px){
  .footer-minicurs-inner form{ flex:1 1 100%; }
}

/* --- Servicii: hero band + grilă de 3 coloane pe categorii (2026-08-26)
   -- structură de FORMAT după referința PwC trimisă de Ali, conținut
   100% propriu (cele 6 servicii deja scrise, doar regrupate). Bandă hero
   = strict gradientul, decorativ, fără chenar peste el (spre deosebire de
   restul paginii) -- separată vizual de banda de titlu de mai jos. */
/* Redus 2026-09-01 (Ali: "spațiu excesiv" între navigare și cardul alb de
   introducere) -- măsurat direct: banda decorativă gol-violet lua 200-260px
   din ecran, fără niciun conținut, singură cauza reală a golului mare de
   sus (nu padding-ul secțiunii de dedesubt, deja verificat/redus separat). */
.services-hero{ height:64px; }
@media(min-width:640px){ .services-hero{ height:90px; } }
/* Explicit, nu doar implicit -- gardă structurală cerută (align-items:
   stretch e deja valoarea implicită CSS Grid, dar măsurată/confirmată acum
   corectă: fiecare rând de 3 carduri iese la ÎNĂLȚIME IDENTICĂ, verificat
   geometric, nu presupus -- vezi și .grid3 de mai sus, unde e deja setat). */
#categorii .grid3{ align-items:stretch; }

/* Rescris 2026-09-01 -- Ali a semnalat cele 6 servicii (01-06) afișate ca
   3 coloane cu 2 elemente înghesuite sub un header comun, fără separare
   vizuală proprie. Acum 6 carduri individuale (.card, tiparul deja folosit
   pe ghidul-legii.html, .grid3), în ordine numerică strictă 01->06 --
   ordinea vizuală veche (01,02 / 03,05 / 04,06) era ea însăși confuză.
   Eticheta de categorie păstrată ca badge mic pe fiecare card, nu ca
   header comun. */
.service-card h3{ display:flex; align-items:center; gap:10px; font-size:1.02rem; margin-bottom:6px; }
.service-card h3 a{ text-decoration:underline; text-underline-offset:3px; color:inherit; }
.service-card h3 a:hover{ opacity:0.7; }
.service-card .icon{ width:19px; height:19px; margin-bottom:0; flex-shrink:0; }

/* Contrast text-alb pe fiecare accent, verificat: teal 5.67:1, violet
   9.53:1, magenta 5.22:1 -- toate peste AA (calculate/confirmate în
   sesiuni anterioare, nu presupuse). */
.service-card--teal .article-badge{ background:#0A6F92; }
.service-card--teal .icon{ color:#0A6F92; }
.service-card--violet .article-badge{ background:#5A2E8C; }
.service-card--violet .icon{ color:#5A2E8C; }
.service-card--magenta .article-badge{ background:#BA2AAD; }
.service-card--magenta .icon{ color:#BA2AAD; }

/* --- Componentă "ladder" comparativă (2026-08-28) -- reutilizată pe
   pagina de praguri legale (obligatii-marime.html, scară verticală) ȘI pe
   cardurile de tarife (preturi.html, în interiorul fiecărui card) -- un
   singur tipar vizual pentru "doar ce se adaugă față de anterior", nu
   textul integral repetat. Partea moștenită = gri/discretă; partea nouă =
   text normal/bold, cu accentul cardului. */
.ladder{ display:flex; flex-direction:column; gap:16px; }
.ladder-step{
  border:1px solid var(--line); border-radius:12px; padding:22px 26px;
  background:#fff; box-shadow:var(--shadow-card);
}
.ladder-step h3{ margin-bottom:10px; }
.ladder-inherited{
  color:var(--ink-muted); font-size:0.88rem; font-style:italic; margin-bottom:8px; text-align:left;
}
.ladder-new{ font-size:0.95rem; color:var(--ink); margin:0; text-align:left; }
.ladder-new strong{ color:var(--accent); font-weight:600; }
.ladder-new ul{ list-style:none; margin:6px 0 0; padding:0; }
.ladder-new ul li{ margin-bottom:6px; padding-left:16px; position:relative; font-weight:500; }
.ladder-new ul li::before{ content:"+"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* --- Proporții (2026-08-25) -- fix cerut de Ali: coloana era prea
   îngustă pe monitor lat, textul din carduri prea mic. Scopat pe
   body.ghid-legii, ca să nu ating restul site-ului (semnalat separat dacă
   aceeași problemă există și acolo). Verificat vizual la 1920/1440/1024/
   768/390, nu doar calculat -- vezi capturile din raport. */
body.ghid-legii .wrap{ max-width:1040px; }
/* Container mai lat, DOAR pentru secțiuni de tip grilă (carduri
   multiple/coloane) -- "ex. cele 4 carduri de obligații pe mărime",
   citat exact din cerință. Panelul de text simplu (hero, prose) rămâne pe
   .wrap (1040px) -- deja în intervalul orientativ 880-960 cerut, cu o
   marjă rezonabilă peste, nu dincolo de el. */
body.ghid-legii .wrap-wide{ max-width:1240px; margin:0 auto; padding:0 24px; }

body.ghid-legii h1{ font-size:2.85rem; }
body.ghid-legii h2{ font-size:1.85rem; }

.ghid-panel{
  background: rgba(255,255,255,0.98); border-radius:16px;
  padding: 44px clamp(28px,4.5vw,60px); box-shadow: var(--shadow-card);
}
/* Text de bază în chenare -- ridicat de la ~13-15px la >=16px, cerința
   explicită a lui Ali ("prea mic pentru o pagină de citit"). */
body.ghid-legii .ghid-panel p{ font-size:1.05rem; }
body.ghid-legii .ghid-panel .lede{ font-size:1.25rem; }
/* Clase folosite ÎN interiorul chenarelor -- fiecare avea propriul
   font-size mic, apucat separat (nu acoperit de regula generică de mai
   sus, fiindcă multe stau în afara unui .ghid-panel propriu-zis, ex.
   .card din grila de pe index). Toate scopate pe body.ghid-legii, ca să
   nu afecteze .card/.checklist de pe restul site-ului. */
body.ghid-legii .card p,
body.ghid-legii .card ul{ font-size:1.02rem; }
body.ghid-legii .checklist li{ font-size:1.05rem; }
body.ghid-legii .ghid-disclaimer{ font-size:0.95rem; padding:18px 22px; }
body.ghid-legii .tree-node p{ font-size:1rem; }
body.ghid-legii .tree-node h4{ font-size:1.1rem; }
body.ghid-legii .casc-card p{ font-size:1rem; }
body.ghid-legii .casc-card h4{ font-size:1.15rem; }
body.ghid-legii .casc-outcome p{ font-size:0.95rem; }
body.ghid-legii .size-card ul{ font-size:0.98rem; }
body.ghid-legii .size-card h3{ font-size:1.15rem; }
body.ghid-legii .found-card h3{ font-size:1.3rem; }
body.ghid-legii .found-card p{ font-size:1.05rem; }
body.ghid-legii .faq-item summary{ font-size:1.08rem; }
body.ghid-legii .faq-item p{ font-size:1rem; }
body.ghid-legii table.tiers td{ font-size:1rem; padding:18px 22px; }
/* Padding intern al cardurilor -- mărit, cerință explicită ("textul nu
   trebuie să pară înghesuit lângă margine"). */
body.ghid-legii .card{ padding:28px; }
body.ghid-legii .size-card{ padding:28px; }
body.ghid-legii .casc-card{ padding:24px 28px; }
body.ghid-legii .found-card{ padding:34px 36px; }
/* Breadcrumb sticky (2026-08-28) -- era un link mic, ușor de ratat mai
   ales derulat în josul paginii (semnalat de Ali). Acum rămâne lipit sub
   header cât timp utilizatorul citește sub-pagina, în stilul cardurilor
   (chenar + umbră), target de minim 44px pe mobil (regula de touch
   targets din regula responsive standing). */
/* Container-ul sticky trebuie să fie copil DIRECT al <main> (înalt cât
   toată pagina) -- găsit prin verificare vizuală reală, nu presupus: cu
   breadcrumb-ul înfășurat într-un <div class="wrap"> propriu (înalt doar
   cât el însuși), sticky nu avea loc să "rămână" nicăieri -- dispărea
   odată cu părintele lui minuscul la primul scroll. margin-left calc()
   aliniază pila cu coloana de conținut (aceeași logică ca .wrap:
   max-width 1040px + padding 24px), fără să folosească .wrap ca părinte. */
/* top:88px, NU 12px -- bug real găsit la verificare vizuală (nu doar
   măsurat): header-ul e tot sticky, 76.6px înalt, z-index:20 (mai mare
   decât breadcrumb-ul) -- la top:12px breadcrumb-ul se lipea DEDESUBTUL
   header-ului, complet ascuns, deși coordonatele calculate arătau corect.
   88px = înălțimea header-ului + o mică respirație vizuală. */
/* Redesenat 2026-09-27 (kickoff Ali): de la pastilă mică plutitoare peste
   hero-ul mov (greu de reperat) la bară pe toată lățimea, chiar sub
   meniul principal, fundal deschis -- text/săgeată mai mari și mai
   groase. Sticky păstrat (era fix-ul anterior, 2026-08-28, pentru
   "greu de reperat la derulare" -- problemă diferită, încă validă, nu
   anulată de acest redesign). box-sizing:border-box + padding calculat
   ca la .wrap, ca textul să rămână aliniat cu restul coloanei de
   conținut, deși bara (fundalul) se întinde pe toată lățimea -- .ghid-
   breadcrumb e copil direct al <main>, fără constrângere de lățime. */
.ghid-breadcrumb{
  position:sticky; top:88px; z-index:10; display:flex; align-items:center;
  width:100%; box-sizing:border-box; background:#fff; border-bottom:1px solid var(--line);
  padding:16px max(24px, calc((100% - 1040px) / 2 + 24px));
  margin:0 0 20px; box-shadow:0 1px 3px rgba(28,35,33,0.05);
  font-size:1rem; font-weight:600; color:var(--ink); min-height:44px;
}
.ghid-breadcrumb a{ color:var(--accent); text-decoration:none; font-weight:700; margin-right:6px; }
.ghid-breadcrumb a:hover{ opacity:0.75; }

.ghid-disclaimer{
  background:#F4F1FA; border-left:4px solid var(--magenta);
  border-radius:8px; padding:14px 18px; font-size:0.83rem; color:var(--ink);
  margin-bottom:26px; line-height:1.55;
}
.ghid-disclaimer strong{ color:var(--ink); }

.article-badge{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem;
  text-transform:uppercase; letter-spacing:0.06em; color:#fff; background:var(--accent);
  padding:3px 9px; border-radius:5px; margin-bottom:10px;
}
.card .article-badge{ align-self:flex-start; }

/* --- FAQ accordion --- */
.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{
  cursor:pointer; font-family:'Space Grotesk',sans-serif; font-weight:500;
  font-size:1rem; list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:12px; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:1.2rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ margin-top:12px; }

/* --- Decision tree (cascada decalaj >=5%, Art. 9+10) --- */
/* Refolosește exact vocabularul vizual al roadmap-ului (cerc marker +
   linie conectoare), NU un sistem nou -- doar orientat vertical/ramificat
   (roadmap-ul e strict liniar orizontal, cascada are 2 ramuri reale). */
.tree{ display:flex; flex-direction:column; align-items:center; margin:36px 0 8px; }
.tree-node{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:16px 22px; max-width:460px; width:100%; text-align:center; box-shadow:var(--shadow-card);
}
/* .roadmap-marker capătă position:absolute la >=860px (regulă globală,
   gândită pentru .roadmap-path de pe homepage) -- bug real reprodus: fără
   acest reset, iconița "plutea" la top:50%/left:50% al celui mai apropiat
   ancestor poziționat, suprapunându-se peste titlul paginii. Specificitate
   (0,2,0) > (0,1,0) a regulii globale, deci câștigă indiferent de media query. */
.tree-node .roadmap-marker{ position:static; left:auto; top:auto; transform:none; margin:0 auto 10px; }
.tree-node h4{ font-family:'Space Grotesk',sans-serif; font-size:0.96rem; margin:0 0 4px; }
.tree-node p{ font-size:0.85rem; margin:0; }
/* NU var(--line) (#D8D4C8) -- B(200) < R(216) și B < G(212), deci
   tehnic "cald" după regula lui Ali, chiar dacă abia vizibil ca linie
   subțire. Găsit de scanner, corectat la un gri rece explicit. */
.tree-connector{ width:2px; height:26px; background:#C9CEDB; flex-shrink:0; }
.tree-branches{ display:flex; flex-direction:column; gap:20px; width:100%; margin:0; }
@media(min-width:640px){
  .tree-branches{ flex-direction:row; justify-content:center; align-items:flex-start; gap:28px; }
}
.tree-branch{ display:flex; flex-direction:column; align-items:center; flex:1; max-width:340px; margin:0 auto; }
.tree-branch .tree-connector{ height:20px; }
.tree-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.66rem; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--ink-muted); margin-bottom:8px;
}
.tree-node--ok{ border-color:#0A6F92; }
.tree-node--alert{ border-color:#8C1C7D; }
.tree-node--strong{ background:var(--magenta); border-color:var(--magenta); }
.tree-node--strong h4, .tree-node--strong p{ color:#fff; }
.tree-node--strong .roadmap-marker{ background:rgba(255,255,255,0.25); }
.tree-node--strong .roadmap-marker svg{ color:#fff; }

/* --- Remedierea și evaluarea comună: fundație + obligații pe mărime +
   cascadă CORECTATĂ (2026-08-25) -- vezi CLAUDE.md, corecție legală Art.
   10: justificarea și remedierea NU sunt căi alternative cu o aprobare la
   mijloc, sunt aceeași fereastră de 6 luni, autoevaluare. Culori: exact
   cele 6 din paletă (navy/navy deep/violet/magenta/teal/teal deschis),
   nimic inventat. Toate verificate cu scanner-ul + contrast text -- vezi
   raport. */
.found-card{
  background:var(--accent); color:#fff; border-radius:14px;
  padding:28px 30px; display:flex; align-items:center; gap:20px;
}
.found-card .icon{ width:34px; height:34px; color:#fff; margin:0; flex-shrink:0; }
.found-card h3, .found-card p{ color:#fff; margin:0 0 4px; }
.found-card p{ margin-bottom:0; }
.found-card .article-badge{ background:rgba(255,255,255,0.22); }

.size-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:640px){ .size-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:960px){ .size-grid{ grid-template-columns:repeat(4,1fr); } }
.size-card{ border-radius:14px; padding:22px; }
.size-card h3{ margin-bottom:8px; }
.size-card ul{ list-style:none; margin:0; padding:0; font-size:0.84rem; }
.size-card li{ margin-bottom:6px; padding-left:14px; position:relative; }
.size-card li::before{ content:"·"; position:absolute; left:0; }
/* #0FC4E8 cu text alb = 2.08:1, eșuează AA -- text închis pe acest card
   dă 7.69:1. Singurul din grup care nu poate avea text alb. */
.size-card--light{ background:#0FC4E8; color:#1C2321; }
.size-card--light h3, .size-card--light p, .size-card--light li{ color:#1C2321; }
.size-card--light .article-badge{ background:rgba(28,35,33,0.15); color:#1C2321; }
.size-card--teal{ background:#0A6F92; }
.size-card--violet{ background:#5A2E8C; }
.size-card--magenta{ background:#BA2AAD; }
.size-card--teal h3, .size-card--teal p, .size-card--teal li,
.size-card--violet h3, .size-card--violet p, .size-card--violet li,
.size-card--magenta h3, .size-card--magenta p, .size-card--magenta li{ color:#fff; }
.size-card--teal .article-badge, .size-card--violet .article-badge, .size-card--magenta .article-badge{ background:rgba(255,255,255,0.22); color:#fff; }

/* Cascadă: carduri numerotate (cerc-badge), săgeți SIMPLE (caracter, nu
   linie curbată continuă -- mai robust pe mobil, cerut explicit). */
.cascade{ display:flex; flex-direction:column; align-items:center; margin:32px 0 8px; }
.casc-card{
  background:#fff; border-radius:14px; padding:20px 24px; max-width:540px; width:100%;
  box-shadow:var(--shadow-card); display:flex; gap:16px; align-items:flex-start; text-align:left;
}
.casc-num{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:500;
}
.casc-card h4{ margin:0 0 4px; font-size:0.98rem; }
.casc-card p{ margin:0; font-size:0.85rem; }
.casc-arrow{ font-size:1.4rem; color:var(--ink-muted); margin:4px 0; line-height:1; }
.casc-branch-row{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:660px; margin:4px 0; }
@media(min-width:640px){ .casc-branch-row{ flex-direction:row; justify-content:center; align-items:stretch; } }
.casc-outcome{
  flex:1; background:#F4F1FA; border:1px dashed #B9B4CF; border-radius:12px; padding:16px 18px;
  max-width:300px; margin:0 auto; text-align:center;
}
.casc-outcome .casc-label{ font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-muted); display:block; margin-bottom:6px; }
.casc-outcome p{ margin:0; font-size:0.85rem; }
.casc-outcome.casc-continues{ background:#fff; border:1px solid var(--accent); }
.casc-final{
  background:linear-gradient(135deg, var(--magenta) 0%, #5A2E8C 100%); color:#fff; max-width:600px;
}
.casc-final h4, .casc-final p{ color:#fff; }
.casc-final .casc-num{ background:rgba(255,255,255,0.28); }

.callout{
  display:flex; align-items:center; gap:18px; background:#F4F1FA; border-radius:14px; padding:22px 26px; flex-wrap:wrap;
}
.callout .icon{ margin:0; flex-shrink:0; color:var(--magenta); }
.callout p{ margin:0; flex:1; min-width:220px; }

/* Tabele pe telefon (13.10.2026): fără depășirea ecranului; cuvintele rămân întregi. */
@media(max-width:640px){
  .legal-content table{font-size:0.8rem;}
  .legal-content table th, .legal-content table td{padding:8px; overflow-wrap:break-word; hyphens:auto;}
  .legal-content table th{font-family:inherit; text-transform:none; letter-spacing:0; font-size:0.75rem; font-weight:600;}
  table.tiers td, body.ghid-legii table.tiers td{padding:12px 10px; font-size:0.9rem; overflow-wrap:break-word; hyphens:auto;}
  table.tiers td:first-child{white-space:normal; width:32%; font-size:0.85rem;}
}

/* Tabele cu multe coloane din paginile legale (DPA, 19.10.2026): pe telefon, fiecare rând devine un bloc. */
@media(max-width:640px){
  .legal-content table.stack thead{display:none;}
  .legal-content table.stack, .legal-content table.stack tbody, .legal-content table.stack tr, .legal-content table.stack td{display:block; width:100%;}
  .legal-content table.stack tr{border:1px solid var(--line); margin-bottom:12px;}
  .legal-content table.stack td{border:none; border-top:1px solid var(--line); padding:8px 10px;}
  .legal-content table.stack td:first-child{border-top:none;}
  .legal-content table.stack td::before{content:attr(data-label); display:block; font-size:0.72rem; font-weight:600; color:var(--ink-muted); margin-bottom:2px;}
}

/* Formularul „Solicită un cont demo”: câmpul-capcană anti-spam, ascuns vizitatorilor
   (rămâne în pagină pentru roboți; nu folosim display:none, pe care unii roboți îl sar). */
.camp-capcana{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}