/* =========================================================================
   AI Taxe — ai-taxe.ro
   Un singur fisier CSS, folosit de:
     /index.html            (RO)
     /en/index.html         (EN)
     /confidentialitate/    (RO, politica de confidentialitate)
     /en/privacy/           (EN, politica de confidentialitate)
     /multumim/             (RO, confirmare formular)
     /en/thank-you/         (EN, confirmare formular)
     /404.html
     paginile de eroare generate de Worker (400 / 502)
   Zero JavaScript, zero dependinte externe, zero url() (CSP: img-src 'self',
   deci nici macar data: URI in background-image).

   Directia vizuala: „masa curata, lumina buna, cineva care iti explica rabdator”.
   Publicul e speriat de o hartie oficiala, deci pagina nu are voie sa arate a
   somatie: fara rosu, fara urgenta, fara ornament. Cifrele si tabelele sunt
   tratate tipografic (cifre tabulare, aliniere la dreapta pe coloane numerice).

   Cuprins:
     01  Tokeni de tema (light / dark)
     02  Reset & baze
     03  Tipografie & utilitare
     04  Butoane
     05  Header, navigatie, comutator de limba
     06  Hero (+ fisa desenata + anuntul de lansare)
     07  Cele trei lucruri spuse de la inceput
     08  Sectiuni & antete de sectiune
     09  Pentru cine (profiluri)
     10  Notificarea (cele trei drumuri + primele zile)
     11  Graficul + tabelul de date
     12  Ritmul anului (pasi numerotati)
     13  Cum lucram (lantul de lucru)
     14  Ce nu promitem (banda inchisa)
     15  Contact + formular
     16  Footer
     17  Pagini mici (multumim, 404, erori Worker)
     18  Pagina legala (confidentialitate / privacy)
     19  Focus, motion, print
   ========================================================================= */


/* ---------- 01  Tokeni de tema ------------------------------------------ */

:root {
  color-scheme: light;

  /* Suprafete — portelan rece, albastru foarte pal: „lumina de dimineata pe o
     masa curata”. Distincta de celelalte site-uri din proiect (hartie calda,
     hartie de dosar, ceata verzuie, hartie rece violacee). */
  --bg:            #f0f4f8;
  --bg-alt:        #e5edf4;
  --surface:       #ffffff;
  --surface-2:     #f7fafc;

  --ink:           #14212e;
  --ink-2:         #35485a;
  --muted:         #566a7c;

  --line:          #dbe4ec;
  --line-strong:   #becddb;
  /* contur pentru controale (butoane, campuri de formular): minim 3:1 fata de
     fundal, cerut de WCAG 1.4.11 */
  --line-control:  #74879a;

  /* Albastru de cerneala = structura. Tot ce e „asa functioneaza sistemul”:
     ce se declara, baza de calcul, pasii, linkurile. */
  --accent:        #1a5c9e;
  --accent-ink:    #14477a;
  --accent-soft:   #e2edf7;
  --accent-line:   #a8c8e6;
  --on-accent:     #ffffff;

  /* Verde eucalipt = partea omului: expertul contabil care verifica, si ce se
     recunoaste in favoarea ta. Calm, nu triumfal. */
  --green:         #2f7159;
  --green-ink:     #245943;
  --green-soft:    #e2f0ea;
  --green-line:    #a9d3c1;
  --on-green:      #ffffff;

  /* A doua nuanta de verde, doar pentru feliile alaturate din grafic. */
  --green-2:       #5d9c81;
  --on-green-2:    #0f2b22;

  /* Neutru de figura — „suma finala”, ca sa nu fie confundata cu baza. */
  --fig:           #55697d;
  --on-fig:        #ffffff;

  /* Banda inchisa (sectiunea „ce nu promitem”). Aceeasi in ambele teme. */
  --band:          #0f2233;
  --band-2:        #142a3e;
  --band-ink:      #e8f0f7;
  --band-muted:    #a8bccd;
  --band-line:     #26405a;
  --band-control:  #7794ad;
  --band-accent:   #8dc2ee;
  --band-green:    #74c7a2;
  --on-band-accent:#0b1a28;

  --radius:        14px;
  --radius-sm:     9px;
  --radius-lg:     22px;

  --shadow-sm:     0 1px 2px rgba(20, 33, 46, .06);
  --shadow:        0 1px 2px rgba(20, 33, 46, .05), 0 14px 34px -24px rgba(20, 33, 46, .45);

  --wrap:          1140px;
  --gutter:        clamp(1.1rem, 4vw, 2.5rem);

  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:           #0c1620;
    --bg-alt:       #101d29;
    --surface:      #14212d;
    --surface-2:    #1a2936;

    --ink:          #e8eef4;
    --ink-2:        #c3d1de;
    --muted:        #9aadbe;

    --line:         #26343f;
    --line-strong:  #374a59;
    --line-control: #6b7f92;

    --accent:       #7db6ea;
    --accent-ink:   #a5cef5;
    --accent-soft:  #15293b;
    --accent-line:  #2e4d69;
    --on-accent:    #0a1a28;

    --green:        #63bd97;
    --green-ink:    #8ad4b3;
    --green-soft:   #12281f;
    --green-line:   #2c5a47;
    --on-green:     #07201a;

    --green-2:      #4f9c7c;
    --on-green-2:   #07201a;

    --fig:          #8aa0b5;
    --on-fig:       #0c1620;

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, .45);
    --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 16px 38px -26px rgba(0, 0, 0, .95);
  }
}


/* ---------- 02  Reset & baze -------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

/* antetul e lipit doar de la 860px in sus (vezi sectiunea 05), deci numai acolo
   are nevoie ancora de spatiu deasupra */
@media (min-width: 860px) {
  html { scroll-padding-top: 5.5rem; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 650;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

svg { display: block; max-width: 100%; }

b, strong { font-weight: 640; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--accent); color: var(--on-accent); }

/* sprite-ul de iconite, ascuns fara sa iasa din flux in mod ciudat */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.7;
                 stroke-linecap: round; stroke-linejoin: round; }

.icon {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}


/* ---------- 03  Tipografie & utilitare ---------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
}
.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-size: 0.775rem;
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .num {
  display: inline-block;
  white-space: nowrap;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 3.1vw, 3.05rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.05rem); }
h3 { font-size: 1.08rem; letter-spacing: -0.008em; }

.lede {
  font-size: clamp(1.03rem, 0.99rem + 0.22vw, 1.15rem);
  color: var(--ink-2);
  max-width: 64ch;
}

.note { font-size: 0.9rem; color: var(--muted); max-width: 64ch; }

.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.35rem; }
.mt-3 { margin-top: 2.1rem; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.36rem 0.75rem 0.36rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.855rem;
  color: var(--ink-2);
}
.chips .icon { color: var(--accent); width: 1.05em; height: 1.05em; }

/* bloc de accentuare, folosit oriunde o propozitie trebuie sa nu fie sarita */
.callout {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-control);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--ink-2);
  max-width: 72ch;
}
.callout b { color: var(--ink); }
.callout--accent { border-color: var(--accent-line); border-left-color: var(--accent);
                   background: var(--accent-soft); }
.callout--green  { border-color: var(--green-line);  border-left-color: var(--green);
                   background: var(--green-soft); }

/* eticheta de avertisment tipografic („exemplu ilustrativ”) */
.stamp {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}


/* ---------- 04  Butoane -------------------------------------------------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.7rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.965rem;
  font-weight: 620;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-ink); color: var(--on-accent); }

.btn--ghost {
  background: transparent;
  border-color: var(--line-control);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }


/* ---------- 05  Header --------------------------------------------------- */

/* Pe telefon antetul NU e lipit: cu meniul pe doua randuri ar manca o cincime
   din ecran la fiecare derulare. Devine sticky abia de la 860px, unde intra pe
   un singur rand. */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-block: 0.7rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 680;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand .mark { width: 30px; height: 30px; flex: 0 0 auto; }
.brand b { color: var(--accent); font-weight: 680; }

/* marca: doua bare — sus intreg, jos aceeasi lungime, dar taiata in doua.
   Adica exact graficul din pagina, la scara de 16 pixeli. */
.m-plate { fill: var(--accent); }
.m-bar   { fill: var(--on-accent); }
.m-bar--soft { opacity: .5; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  order: 3;
  width: 100%;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.2rem 0;
}
.nav a:hover { color: var(--accent); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 620;
}
.lang a { color: var(--muted); text-decoration: none; padding: 0.15rem 0.25rem; }
.lang a:hover { color: var(--accent); }
.lang a[aria-current] { color: var(--ink); text-decoration: underline; }
.lang span { color: var(--line-strong); }

@media (min-width: 860px) {
  .site-header { position: sticky; top: 0; z-index: 40; }
  .nav {
    order: 0;
    width: auto;
    padding-top: 0;
    border-top: 0;
    margin-right: 1.25rem;
  }
}


/* ---------- 06  Hero ----------------------------------------------------- */

.hero {
  padding-block: clamp(2.4rem, 1.4rem + 4vw, 4.4rem) clamp(2rem, 1.2rem + 3.5vw, 3.6rem);
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 76%);
  border-bottom: 1px solid var(--line);
}

.hero-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.2rem); }

.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { margin-top: 1.1rem; }

/* Pozitionarea etica, spusa in hero, nu doar in sectiunea `.pledge` de mai jos.
   Sectiunea aceea incepe sub pliu pe orice ecran obisnuit (masurat: y=1080 pe
   desktop 1440x900, y=1594 pe 390x844), deci cine citeste doar hero-ul si apasa
   „Scrie-ne situatia ta” nu ar intalni-o niciodata. Randul asta sta intre `h1`
   si `.lede` — masurat, se termina la y=484 pe 1440x900 si la y=509 pe 390x844,
   deci e integral deasupra pliului — si spune ambele lucruri care nu au voie sa
   fie ratate: taxele se platesc, iar pagina nu e consultanta fiscala.
   Daca se adauga text in hero deasupra lui, se remasoara. */
.hero-pledge {
  margin-top: 1.1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--green);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
}
.hero-pledge b { color: var(--ink); }

/* anuntul de lansare — singurul loc cu ton cald din pagina */
.launch {
  margin-top: 1.6rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--green-line);
  border-radius: var(--radius);
  background: var(--green-soft);
  max-width: 60ch;
}
.launch h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.launch p { margin-top: 0.5rem; font-size: 0.95rem; color: var(--ink-2); }
.launch b { color: var(--ink); }
.launch .wink { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); }

.hero-figure { align-self: start; }

/* fisa desenata din hero */
.fig {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.f-plate  { fill: var(--surface); }
.f-rail   { fill: none; stroke: var(--line-strong); stroke-width: 2;
            stroke-linecap: round; stroke-linejoin: round; }
.f-card   { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.f-card--q { fill: var(--accent-soft); stroke: var(--accent-line); }
.f-card--g { fill: var(--green-soft);  stroke: var(--green-line); }
.f-role   { fill: var(--muted); font-size: 10.5px; font-weight: 660;
            letter-spacing: 1.1px; text-transform: uppercase; }
.f-role--q { fill: var(--accent); }
.f-role--g { fill: var(--green-ink); }
.f-head   { fill: var(--ink); font-size: 14.5px; font-weight: 620; }
.f-glyph  { fill: none; stroke: var(--ink-2); stroke-width: 1.7;
            stroke-linecap: round; stroke-linejoin: round; }
.f-glyph--q { stroke: var(--accent); }
.f-glyph--g { stroke: var(--green); }

@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.16fr 0.84fr; align-items: center; }
}


/* ---------- 07  Trei lucruri spuse de la inceput ------------------------- */

.pledge {
  padding-block: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.pledge h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.pledge-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.pledge-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 0.25rem 0.7rem;
  padding-left: 0;
}
.pledge-item .icon {
  grid-row: span 2;
  width: 1.4rem; height: 1.4rem;
  margin-top: 0.2rem;
  color: var(--green);
}
.pledge-item h3 { font-size: 1rem; }
.pledge-item p { font-size: 0.92rem; color: var(--muted); }


/* ---------- 08  Sectiuni ------------------------------------------------- */

.section {
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  border-bottom: 1px solid var(--line);
}
.section--alt { background: var(--bg-alt); }

.section-head { max-width: 68ch; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
.section-head .lede { margin-top: 0.85rem; }

.band {
  background: linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%);
  color: var(--band-ink);
  border-bottom: 0;
}
.band h2, .band h3, .band b, .band strong { color: var(--band-ink); }
.band .lede, .band .note { color: var(--band-muted); }
.band .eyebrow { color: var(--band-muted); }
.band .eyebrow .num { background: rgba(141, 194, 238, .16); color: var(--band-accent); }
.band a { color: var(--band-accent); }
.band a:hover { color: #ffffff; }


/* ---------- 09  Pentru cine (profiluri) ---------------------------------- */

.profiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.profile {
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.profile-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 620;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.profile h3 { margin-top: 0.7rem; }
.profile > p { margin-top: 0.5rem; font-size: 0.93rem; color: var(--muted); }

.profile dl {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.profile dt {
  font-size: 0.685rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.profile dd {
  margin: 0.15rem 0 0.9rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}
.profile dd:last-child { margin-bottom: 0; }
.profile .dt--help { color: var(--green-ink); }


/* ---------- 10  Notificarea de la ANAF ----------------------------------- */

.roads {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: 1.6rem;
}
.road {
  padding: 1.2rem 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.road-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.road h3 { margin-top: 0.75rem; }
.road p { margin-top: 0.45rem; font-size: 0.94rem; color: var(--ink-2); }
.road .road-then {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line-strong);
  font-size: 0.9rem;
  color: var(--muted);
}
.road .road-then b { color: var(--green-ink); }

/* ce faci in primele zile — o lista de bifat, nu un ordin */
.firstdays {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: 1.4rem;
}
.firstdays li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.94rem;
  color: var(--ink-2);
}
.firstdays li::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 1.1rem;
  width: 12px; height: 12px;
  border: 2px solid var(--green);
  border-radius: 3px;
  background: var(--green-soft);
}
.firstdays b { display: block; color: var(--ink); }


/* ---------- 11  Graficul + tabelul --------------------------------------- */

.figure-grid {
  display: grid;
  gap: clamp(1.6rem, 1rem + 3vw, 2.6rem);
  align-items: start;
}
@media (min-width: 940px) {
  .figure-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}

/* Textul din SVG e scris in unitati de viewBox, deci marimea lui reala depinde
   de latimea la care e desenat graficul: efectiv_px = declarat × latime/viewBox.
   Doua consecinte, amandoua tratate aici:
     - pe telefon desenul se micsora la 0.81 din viewBox, iar tot textul cadea
       sub 11px efectivi (masurat: 8.5–10.1px la 360px latime ecran);
     - intre 480 si 940px desenul se intindea pe toata coloana si acelasi text
       ajungea la ~18px, adica mai mare decat textul din jur.
   `max-width` opreste umflarea, iar paddingul mai mic pe telefon recupereaza
   latime de desen. Restul se face din marimile declarate, mai jos. */
.chart {
  margin: 0;
  max-width: 420px;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.chart svg { width: 100%; height: auto; }
.chart figcaption {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.845rem;
  color: var(--muted);
}
.chart figcaption b { color: var(--ink); }

/* Pe ecrane inguste fiecare pixel de latime inseamna text mai mare in desen.
   Textul legendei ramane insa la distanta de marginea cartonasului. */
@media (max-width: 520px) {
  .chart { padding: 0.55rem 0.55rem 0.95rem; }
  .chart figcaption { margin-inline: 0.35rem; }
}

/* Sub 430px conteaza si paddingul lateral al cartonasului. Desenul isi are
   propria margine inauntrul viewBox-ului — barele incep la x=16 din 360, adica
   4.4% pe fiecare parte —, deci `<svg>` poate merge pana la marginea
   cartonasului fara ca desenul sa atinga chenarul. Cei ~18px recuperati se duc
   direct in marimea textului: la 360px latime de ecran graficul se deseneaza la
   322.8px in loc de 305.2, iar cel mai mic text urca de la 11.02 la 11.66px
   efectivi. Legenda de sub desen isi pastreaza marginea, ea e text normal. */
@media (max-width: 430px) {
  .chart { padding-inline: 0; }
  .chart figcaption { margin-inline: 0.9rem; }
}

/* Clasele folosite in interiorul SVG-ului. Culorile vin din tokeni, deci
   graficul se schimba odata cu tema — nimic nu e scris direct in desen.

   Marimile sunt in unitati de viewBox (viewBox-ul e 360 lat). Cu `max-width`-ul
   si cu paddingul de mai sus, un telefon de 360px deseneaza graficul la ~323px,
   adica 0.897 din unitati: 13 unitati = 11.66px reali (masurat). Pragul de sub
   care textul devine ilizibil pe telefon e 11px efectivi, deci nu cobori sub 13
   unitati aici fara sa recalculezi.
   In sens invers, marimile nu pot creste oricat: latimea e in aceleasi unitati
   si nu se scaleaza. Sirurile din desen sunt scurte tocmai ca sa incapa; daca
   lungesti un text sau maresti o marime, verifica in browser ca `getBBox()`
   ramane sub x=352 — inclusiv cu un font de sistem mai lat (Verdana), unde
   sirurile lungi de aici ajung deja la ~350. */
.c-stamp-box { fill: var(--ink); }
.c-stamp     { fill: var(--bg); font-size: 13px; font-weight: 700; letter-spacing: 0.6px; }
.c-label     { fill: var(--muted); font-size: 13px; font-weight: 700;
               letter-spacing: 0.6px; text-transform: uppercase; }
.c-cap       { fill: var(--ink-2); font-size: 14px; }
.c-note      { fill: var(--muted); font-size: 13px; }
.c-zero      { stroke: var(--line-strong); stroke-width: 1; }
.c-rule      { stroke: var(--line); stroke-width: 1; }
.c-base      { fill: var(--accent); }
.c-green     { fill: var(--green); }
.c-green-2   { fill: var(--green-2); }
.c-final     { fill: var(--fig); }
/* „Recunoscut 40” sta intr-o bara lata de doar 129 de unitati, deci textul din
   barele principale nu poate trece de 14px fara sa atinga marginea barei. */
.c-on-base   { fill: var(--on-accent); font-size: 14px; font-weight: 640; }
.c-on-green  { fill: var(--on-green); font-size: 14px; font-weight: 640; }
.c-on-green-2{ fill: var(--on-green-2); font-size: 13.5px; font-weight: 640; }
.c-on-final  { fill: var(--on-fig); font-size: 13.5px; font-weight: 640; }
.c-brace     { fill: none; stroke: var(--green); stroke-width: 1.4; }
.c-brace-lab { fill: var(--green-ink); font-size: 13px; font-weight: 640; }
.c-num       { font-variant-numeric: tabular-nums; }

/* tabelul care spune acelasi lucru ca desenul, in cuvinte si cifre */
.table-wrap {
  /* Ca element de grila are implicit min-width:auto, deci s-ar intinde dupa
     continut si ar impinge pagina in loc sa deruleze. Limitarea e pusa DOAR aici,
     nu pe toti copiii grilei: daca s-ar aplica si graficului, desenul s-ar
     micsora la 320px si textul din SVG ar cobori sub pragul de 11px lizibili. */
  min-width: 0;
  overflow-x: auto;
  margin-top: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
table.data caption {
  padding: 0.9rem 1rem 0.6rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
table.data th, table.data td {
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table.data thead th {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  background: var(--surface-2);
  white-space: normal;
}
/* capetele de rând se pot rupe pe două rânduri; numai coloanele numerice sunt
   ținute pe o linie, ca cifrele să rămână aliniate */
table.data tbody th, table.data tfoot th { font-weight: 620; color: var(--ink); }
table.data .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.data tfoot th, table.data tfoot td {
  background: var(--surface-2);
  font-weight: 660;
  color: var(--ink);
}
table.data .cell-green { color: var(--green-ink); }


/* ---------- 12  Ritmul anului (pasi numerotati) -------------------------- */

.steps { display: grid; gap: 1.4rem; counter-reset: pas; }

.step {
  position: relative;
  padding-left: 3.3rem;
  counter-increment: pas;
}
.step::before {
  content: counter(pas, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step::after {
  content: "";
  position: absolute;
  left: calc(1.175rem - 1px);
  top: 2.6rem;
  height: calc(100% - 1.2rem);
  width: 2px;
  background: var(--accent-line);
}
.step:last-child::after { content: none; }

@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .step::after {
    left: calc(1.175rem - 6.5px);
    width: 13px;
    clip-path: polygon(
      5.5px 0, 7.5px 0,
      7.5px calc(100% - 8px),
      13px calc(100% - 8px),
      6.5px 100%,
      0 calc(100% - 8px),
      5.5px calc(100% - 8px)
    );
  }
}

.step h3 { padding-top: 0.35rem; }
.step p { margin-top: 0.3rem; font-size: 0.94rem; color: var(--ink-2); max-width: 46ch; }

@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  .step { padding-left: 0; padding-top: 3.1rem; }
  .step::before { left: 0; top: 0; }
  .step::after {
    left: 2.6rem;
    top: calc(1.175rem - 1px);
    width: calc(100% - 2.6rem - 0.35rem);
    height: 2px;
  }
  @supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
    .step::after {
      top: calc(1.175rem - 6.5px);
      height: 13px;
      clip-path: polygon(
        0 5.5px, 0 7.5px,
        calc(100% - 8px) 7.5px,
        calc(100% - 8px) 13px,
        100% 6.5px,
        calc(100% - 8px) 0,
        calc(100% - 8px) 5.5px
      );
    }
  }
  .step p { max-width: none; }
}


/* ---------- 13  Cum lucram (lantul de lucru) ----------------------------- */

.work { display: grid; gap: 0; }

.wk {
  position: relative;
  padding-left: 2.3rem;
  padding-bottom: 1.3rem;
}
.wk:last-child { padding-bottom: 0; }

.wk::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.45rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--line-control);
  background: var(--surface);
}
.wk::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 1.5rem;
  bottom: 0.2rem;
  width: 2px;
  background: var(--line-strong);
}
.wk:last-child::after { content: none; }

@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .wk::after {
    left: 7.5px;
    width: 13px;
    clip-path: polygon(
      5.5px 0, 7.5px 0,
      7.5px calc(100% - 8px),
      13px calc(100% - 8px),
      6.5px 100%,
      0 calc(100% - 8px),
      5.5px calc(100% - 8px)
    );
  }
}

.wk-role {
  display: block;
  font-size: 0.685rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.wk h3 { margin-top: 0.1rem; font-size: 1.02rem; }
.wk p { margin-top: 0.3rem; font-size: 0.94rem; color: var(--ink-2); max-width: 60ch; }

.wk--ai::before { border-color: var(--accent); background: var(--accent-soft); }
.wk--ai .wk-role { color: var(--accent); }

.wk--human::before { border-color: var(--green); background: var(--green-soft); }
.wk--human .wk-role { color: var(--green-ink); }

.wk--out::before { border-color: var(--ink); background: var(--ink); }
.wk--out .wk-role { color: var(--ink); }


/* ---------- 14  Ce nu promitem (banda inchisa) --------------------------- */

.limits {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.limit {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 0.2rem 0.75rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--band-line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .035);
}
.limit .icon {
  grid-row: span 2;
  width: 1.35rem; height: 1.35rem;
  margin-top: 0.15rem;
  color: var(--band-green);
}
.limit h3 { font-size: 1rem; }
.limit p { font-size: 0.925rem; color: var(--band-muted); }


/* ---------- 15  Contact + formular --------------------------------------- */

.contact-grid { display: grid; gap: clamp(1.6rem, 1rem + 3vw, 2.8rem); }

@media (min-width: 920px) {
  .contact-grid { grid-template-columns: 0.92fr 1.08fr; align-items: start; }
}

.contact-aside .lede { margin-top: 0.9rem; }

.next-steps { margin-top: 1.6rem; }
.next-steps li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}
.next-steps li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

.contact-direct {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--muted);
}
.contact-direct a { font-weight: 620; }

.form-card {
  padding: clamp(1.2rem, 0.9rem + 1.2vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.form-card fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-card legend {
  padding: 0;
  font-size: 1.15rem;
  font-weight: 660;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.form-intro { margin-top: 0.5rem; font-size: 0.925rem; color: var(--muted); }

.field { margin-top: 1.15rem; }

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  font-weight: 620;
  color: var(--ink);
}
.req { color: var(--green-ink); font-weight: 700; }
.opt { color: var(--muted); font-weight: 500; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.68rem 0.8rem;
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-2); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  background: var(--surface);
}

.select-wrap { position: relative; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  margin-top: -2px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink-2);
  pointer-events: none;
}

.field-hint { margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); }

/* nota despre ce NU se trimite prin formular — sta langa campuri, nu in subsol */
.form-privacy {
  margin-top: 1.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--green-line);
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  font-size: 0.875rem;
  color: var(--ink-2);
}
.form-privacy b { color: var(--ink); }

.form-card .btn { margin-top: 1.4rem; width: 100%; }

.form-foot { margin-top: 0.95rem; font-size: 0.845rem; color: var(--muted); }

/* honeypot: scos din flux vizual, fara display:none — un bot simplu il vede in
   DOM si il completeaza. De cititoarele de ecran e sarit prin `aria-hidden` pe
   invelis, nu de aici; regulile de mai jos raman strict vizuale. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------- 16  Footer --------------------------------------------------- */

.site-footer {
  padding-block: clamp(2.2rem, 1.5rem + 2.5vw, 3.2rem);
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
}

.footer-grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.footer-brand p { margin-top: 0.8rem; color: var(--muted); max-width: 42ch; }

.footer-col h2 {
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.footer-col li { margin-bottom: 0.35rem; }
.footer-col a { color: var(--ink-2); text-decoration: none; }
.footer-col a:hover { color: var(--accent); text-decoration: underline; }

.footer-legal {
  margin-top: 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--muted);
}
.footer-legal b { color: var(--ink); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

/* randul de legaturi din subsolul de jos (confidentialitate + cealalta limba);
   la 360px cade sub linia de copyright, fara sa stranga textul */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}


/* ---------- 17  Pagini mici (multumim, 404, erori Worker) ---------------- */

.mini {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.6rem, 1.6rem + 5vw, 5rem) var(--gutter);
}
.mini-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.8rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 680;
  font-size: 1.06rem;
}
.mini-brand .mark { width: 30px; height: 30px; }
.mini-brand b { color: var(--accent); }

.mini-code {
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.mini-code--ok { color: var(--green-ink); }
.mini-code--warn { color: var(--accent); }

.mini p { margin-top: 1rem; color: var(--ink-2); }
.mini .lede { margin-top: 1.1rem; }

.mini-what {
  margin-top: 1.8rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.mini-what h2 {
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.mini-what .wk p { color: var(--ink-2); }

.mini-errors {
  margin-top: 1.4rem;
  padding: 1.05rem 1.15rem 1.05rem 1.3rem;
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.mini-errors p { font-size: 1.05rem; font-weight: 620; color: var(--ink); }
.mini-errors li {
  position: relative;
  padding-left: 1.2rem;
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.mini-errors li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.mini-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
}

.mini-en { color: var(--muted); font-size: 0.95rem; }


/* ---------- 18  Pagina legala (confidentialitate / privacy) -------------- */

/* Aceeasi structura ca pe celelalte site-uri din proiect: coloana ingusta,
   cuprins ca sir de pastile, sectiuni numerotate. Nimic nou vizual — nodurile
   numerotate sunt aceleasi cu cele de la „Ritmul anului fiscal”. */

.wrap--legal { max-width: 820px; }

.legal-hero {
  padding-block: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem) clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 85%);
  border-bottom: 1px solid var(--line);
}
.legal-hero .lede { margin-top: 1rem; }

.legal-updated {
  margin-top: 1.3rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--green-line);
  font-size: 0.9rem;
  color: var(--muted);
}
.legal-updated b { color: var(--ink-2); }

.legal {
  border-bottom: 0;
  padding-top: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
}
/* nota despre datele operatorului deschide sectiunea, deci nu mai are nevoie de
   marginea de sus pe care o are `.callout` in mijlocul unui text */
.legal > .wrap > .callout { margin-top: 0; max-width: none; }

.legal-toc { margin-top: 2.1rem; }
.legal-toc h2 {
  margin-bottom: 0.7rem;
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.legal-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.855rem;
}
.legal-toc a:hover { border-color: var(--accent); color: var(--accent); }
.legal-toc .n {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.legal-body { margin-top: 2.4rem; }

.legal-sec {
  margin-top: 2.1rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.legal-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal-sec h2 {
  position: relative;
  padding-left: 2.6rem;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
}
.legal-num {
  position: absolute;
  left: 0;
  top: -0.05rem;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.legal-sec p { margin-top: 0.9rem; color: var(--ink-2); }
.legal-sec p b { color: var(--ink); }

.legal-list { margin-top: 0.85rem; }
.legal-list li {
  position: relative;
  padding-left: 1.55rem;
  margin-top: 0.4rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.62rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* blocul de informatii legale cerut de legislatia comertului electronic */
.legal-id {
  margin-top: 2.4rem;
  padding: 1.15rem 1.25rem 1.3rem 1.35rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.legal-id h2 {
  font-size: 0.8rem;
  font-weight: 680;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-id p {
  margin-top: 0.75rem;
  color: var(--ink-2);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}


/* ---------- 19  Focus, motion, print ------------------------------------- */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.band :focus-visible { outline-color: var(--band-accent); }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .skip-link, .btn-row, .form-card { display: none; }
  body { background: #fff; color: #000; }
  .section, .hero, .pledge { border: 0; padding-block: 1rem; }
  .chart, .table-wrap { break-inside: avoid; }
}