/* =========================================================================
   AI Carieră — ai-cariera.ro
   Un singur fisier CSS, folosit de:
     /index.html               (RO)
     /en/index.html            (EN)
     /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).

   IDEEA VIZUALA
   Pagina vorbeste despre munca fizica de sub stratul digital, deci paleta e
   pamanteasca: hartie de piatra, arama (temelia, munca fizica, tot ce e
   actionabil) si fier-albastrui (stratul digital, subtire, care sta deasupra).
   Motivul structural e TEMELIA: o linie de sol, deasupra ei lucruri subtiri,
   sub ea straturi tot mai groase. Se repeta in ilustratia din hero, in
   sectiunea „Temelia”, in cardurile de meserii (talpa de arama de jos) si in
   marca. Al doilea motiv, folosit o singura data si tot structural, e
   BIFURCATIA: doua drumuri dintr-un punct, pentru cele doua publicuri.

   Cuprins:
     01  Tokeni de tema (light / dark)
     02  Reset & baze
     03  Tipografie & utilitare
     04  Butoane
     05  Header, navigatie, comutator de limba
     06  Hero + ilustratia de sectiune transversala
     07  Bifurcatia (doua drumuri) — cele doua publicuri
     08  Straturile temeliei
     09  Criterii
     10  Meserii greu de automatizat
     11  Toata lumea are nevoie de…
     12  Cum lucram (pasi)
     13  Ce nu promitem (banda inchisa)
     14  Competente noi (learnai.ro)
     15  Contact + formular
     16  Footer
     17  Pagini mici (multumim, 404, erori Worker)
     17b Pagina de confidentialitate (/confidentialitate/, /en/privacy/)
     18  Focus, motion, print
   ========================================================================= */


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

:root {
  color-scheme: light;

  /* Suprafete — hartie de piatra, calda si mata. Distincta de celelalte
     site-uri din proiect (bleumarin / crem+corai / verde / indigo / ovaz cu
     serif / hartie rece petrol / in cald prun / hartie calda strugure). */
  --bg:            #f3f1ec;
  --bg-alt:        #e8e5dd;
  --surface:       #fffefa;
  --surface-2:     #f8f6f0;

  --ink:           #1e1b17;
  --ink-2:         #423c34;
  --muted:         #6b6358;

  --line:          #ddd8cd;
  --line-strong:   #c4bdae;
  /* contur pentru controale (butoane, campuri de formular): minim 3:1 fata de
     fundal, cerut de WCAG 1.4.11 */
  --line-control:  #7e7768;

  /* ARAMA = temelia. Munca fizica, ce e de facut, tot ce e actionabil. */
  --accent:        #9e4a18;
  --accent-ink:    #7d3810;
  --accent-soft:   #f7e7da;
  --accent-line:   #e0bb99;
  --on-accent:     #fffefa;

  /* FIER = stratul digital de deasupra. Rece, subtire, niciodata dominant. */
  --digital:       #4a5566;
  --digital-soft:  #e7e9ee;
  --digital-line:  #b8bfcc;

  /* Banda inchisa (sectiunea de limite) — aceeasi in ambele teme. */
  --band:          #211d17;
  --band-2:        #2c2419;
  --band-ink:      #efe9dd;
  --band-muted:    #b3a893;
  --band-line:     #3d352a;
  --band-control:  #8d8474;
  --band-accent:   #e8a06a;
  --band-digital:  #9fadc2;
  --on-band-accent:#1a1409;

  --radius:        13px;
  --radius-sm:     8px;
  --radius-lg:     20px;

  --shadow-sm:     0 1px 2px rgba(30, 27, 23, .07);
  --shadow:        0 1px 2px rgba(30, 27, 23, .06), 0 14px 30px -22px rgba(30, 27, 23, .55);

  --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:           #16140f;
    --bg-alt:       #1d1a14;
    --surface:      #201d16;
    --surface-2:    #26221a;

    --ink:          #f0ece2;
    --ink-2:        #cdc6b6;
    --muted:        #9d9484;

    --line:         #322d24;
    --line-strong:  #453e32;
    --line-control: #7d7565;

    --accent:       #e39158;
    --accent-ink:   #f2ab77;
    --accent-soft:  #33200f;
    --accent-line:  #6b4322;
    --on-accent:    #1a1409;

    --digital:      #a8b3c6;
    --digital-soft: #1b2028;
    --digital-line: #3a4352;

    --band:         #1b1813;
    --band-2:       #241f17;

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, .5);
    --shadow:       0 1px 2px rgba(0, 0, 0, .45), 0 16px 34px -24px 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.16;
  letter-spacing: -0.021em;
  font-weight: 700;
  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: 650; 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: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .num {
  display: inline-block;
  white-space: nowrap;      /* „ai-cariera.ro” nu se rupe in doua in pilula */
  padding: 0.16rem 0.5rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  letter-spacing: 0.07em;
  font-variant-numeric: tabular-nums;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.15rem); }
h2 { font-size: clamp(1.48rem, 1.13rem + 1.6vw, 2.1rem); }
h3 { font-size: 1.1rem; letter-spacing: -0.012em; }

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

.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-bottom: 2px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.855rem;
  color: var(--ink-2);
}
.chips .icon { color: var(--accent); width: 1.05em; height: 1.05em; }


/* ---------- 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: 650;
  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); }

.btn--onband {
  background: var(--band-accent);
  color: var(--on-band-accent);
}
.btn--onband:hover { background: #ffffff; color: var(--on-band-accent); }

.btn--onband-ghost {
  background: transparent;
  border-color: var(--band-control);
  color: var(--band-ink);
}
.btn--onband-ghost:hover { border-color: var(--band-accent); color: var(--band-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: 700;
  font-size: 1.06rem;
  letter-spacing: -0.018em;
  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: 700; }

/* marca: un strat subtire deasupra, doua talpi tot mai grele dedesubt */
.m-plate { fill: var(--accent); }
.m-thin  { fill: var(--on-accent); opacity: .5; }
.m-slab  { fill: var(--on-accent); }
.m-slab--mid { opacity: .78; }

.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: 650;
}
.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.6rem) clamp(2rem, 1.2rem + 3.5vw, 3.8rem);
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 74%);
  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; }

.hero-note {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 56ch;
  padding-left: 0.85rem;
  border-left: 3px solid var(--accent-line);
}

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

/* Sectiunea transversala: ce se vede deasupra liniei de sol si pe ce sta.
   Aceleasi clase sunt folosite in ilustratie si in restul paginii. */
.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-sky     { fill: var(--digital-soft); }
.f-thin    { fill: none; stroke: var(--digital); stroke-width: 1.6;
             stroke-linecap: round; stroke-linejoin: round; }
.f-ground  { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.f-slab    { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1; }
.f-slab--deep { fill: var(--accent); stroke: var(--accent); }
.f-label   { fill: var(--ink); font-size: 13.5px; font-weight: 640; }
.f-label--deep { fill: var(--on-accent); }
.f-role    { fill: var(--muted); font-size: 10.5px; font-weight: 680;
             letter-spacing: 1.1px; text-transform: uppercase; }
.f-role--digital { fill: var(--digital); }
.f-role--accent  { fill: var(--accent); }
.f-glyph   { fill: none; stroke: var(--accent); stroke-width: 1.7;
             stroke-linecap: round; stroke-linejoin: round; }
.f-glyph--deep { stroke: var(--on-accent); }

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: 1.12fr 0.88fr;
    align-items: center;
  }
}
@media (min-width: 1120px) {
  .hero-grid { grid-template-columns: 1.18fr 0.82fr; }
}


/* ---------- 07  Bifurcatia ----------------------------------------------- */

/* Un singur punct de plecare, doua drumuri. Desenul e un SVG in HTML, ca sa
   ramana o singura linie continua pe orice latime; cardurile de sub el sunt
   cele doua capete. */
/* Latimea e cea a continutului, ca cele doua capete ale bifurcatiei sa cada
   exact peste centrele celor doua carduri (25% si 75%). Grosimea liniei e mica
   pentru ca desenul se scaleaza: la 1100 px latime, un `stroke-width: 2` din
   viewBox devine aproape 4 px pe ecran. */
.fork {
  width: 100%;
  height: auto;
  margin-bottom: 0.2rem;
}
.fk-line { fill: none; stroke: var(--line-strong); stroke-width: 2;
           stroke-linecap: round; stroke-linejoin: round; }
.fk-line--live { stroke: var(--accent); }
.fk-dot  { fill: var(--accent); }
.fk-cap  { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }

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

.road {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.road-tag {
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.road h3 { margin-top: 0.75rem; font-size: 1.22rem; }
.road p { margin-top: 0.7rem; font-size: 0.95rem; color: var(--ink-2); }
.road .road-key {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink);
}
.road .road-key b { color: var(--accent); }

.parent-note {
  margin-top: 1.4rem;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 0.94rem;
  color: var(--ink-2);
  max-width: 72ch;
}
.parent-note b { color: var(--accent); }


/* ---------- 08  Straturile temeliei -------------------------------------- */

/* Deasupra: stratul subtire care se vede. Dedesubt: straturile pe care stă,
   fiecare cu talpa lui de arama, tot mai groasă spre bază. */
.surface-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--digital-line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--digital-soft);
  color: var(--digital);
  font-size: 0.875rem;
  font-weight: 620;
}
.surface-strip .icon { width: 1.1rem; height: 1.1rem; }
.surface-strip span { color: var(--ink-2); font-weight: 500; }

.ground {
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
}

.strata { margin-top: 1.1rem; display: grid; gap: 0.75rem; }

.stratum {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.9rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* fiecare strat de mai jos e putin mai „greu”: talpa creste */
.stratum:nth-child(2) { border-bottom-width: 4px; }
.stratum:nth-child(3) { border-bottom-width: 5px; }
.stratum:nth-child(4) { border-bottom-width: 6px; }
.stratum:nth-child(5) { border-bottom-width: 7px; border-bottom-color: var(--accent); }

.stratum .icon {
  grid-row: span 2;
  width: 1.4rem; height: 1.4rem;
  margin-top: 0.25rem;
  color: var(--accent);
}
.stratum h3 { font-size: 1.02rem; }
.stratum p { font-size: 0.94rem; color: var(--ink-2); }

.joke {
  margin-top: 1.4rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--accent-line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: 0.96rem;
  max-width: 72ch;
}
.joke b { color: var(--accent-ink); }


/* ---------- 09  Criterii ------------------------------------------------- */

.criteria {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  counter-reset: crit;
}

.criterion {
  position: relative;
  padding: 1.05rem 1.15rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  counter-increment: crit;
}
.criterion::before {
  content: "C" counter(crit);
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.criterion h3 { font-size: 1rem; }
.criterion p { margin-top: 0.4rem; font-size: 0.925rem; color: var(--ink-2); }

.criteria-note {
  margin-top: 1.4rem;
  font-size: 0.96rem;
  color: var(--ink-2);
  max-width: 72ch;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
}


/* ---------- 10  Meserii -------------------------------------------------- */

.jobs { display: grid; gap: 1rem; }

.job {
  position: relative;
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid var(--line);
  /* talpa de arama: acelasi semn ca la straturile temeliei */
  border-bottom: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
}
.job-num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.job h3 { width: 100%; font-size: 1.28rem; }

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.85rem;
}
.job-tags li {
  padding: 0.16rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 620;
  color: var(--ink-2);
}
.job-tags b { color: var(--ink); font-weight: 700; }

.job-why { margin-top: 1rem; font-size: 0.975rem; color: var(--ink-2); }
.job-why + .job-why { margin-top: 0.7rem; }

.job-honest {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--digital-line);
  border-radius: var(--radius-sm);
  background: var(--digital-soft);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.job-honest b { color: var(--digital); }

@media (min-width: 880px) {
  .jobs { grid-template-columns: repeat(2, 1fr); }
  /* prima meserie ocupa randul intreg: e argumentul-cheie al paginii */
  .job:first-child { grid-column: 1 / -1; }
}


/* ---------- 11  Toata lumea are nevoie de… ------------------------------- */

.everyone {
  margin-top: 1.6rem;
  padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.everyone h3 { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.55rem); color: var(--ink); }
.everyone > p { margin-top: 0.8rem; color: var(--ink-2); max-width: 68ch; }

.everyone-list {
  display: grid;
  gap: 0.5rem 1.2rem;
  margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.everyone-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.96rem;
  color: var(--ink);
}
.everyone-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.85rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.everyone-foot {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--accent-line);
  font-size: 0.97rem;
  color: var(--ink-2);
  max-width: 70ch;
}
.everyone-foot b { color: var(--accent-ink); }


/* ---------- 12  Cum lucram ----------------------------------------------- */

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

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  counter-increment: pas;
}
.step::before {
  content: counter(pas, decimal-leading-zero);
  grid-row: span 2;
  align-self: start;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.step h3 { font-size: 1.02rem; }
.step p { font-size: 0.94rem; color: var(--ink-2); }

.steps-note {
  margin-top: 1.6rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.95rem;
  max-width: 74ch;
}
.steps-note b { color: var(--accent); }

@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- 13  Sectiuni & banda ----------------------------------------- */

.section {
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
  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.5rem); }
.section-head .lede { margin-top: 0.85rem; }

/* In tema deschisa banda se vede singura, prin contrast. In tema inchisa e
   aproape de culoarea paginii, asa ca primeste doua linii care o delimiteaza. */
.band {
  background: linear-gradient(165deg, var(--band) 0%, var(--band-2) 100%);
  color: var(--band-ink);
  border-top: 1px solid var(--band-line);
  border-bottom: 1px solid var(--band-line);
}
.band h2, .band h3, .band b, .band strong { color: var(--band-ink); }
.band .lede { color: var(--band-muted); }
.band .eyebrow { color: var(--band-muted); }
.band .eyebrow .num { background: rgba(232, 160, 106, .16); color: var(--band-accent); }
.band a { color: var(--band-accent); }
.band a:hover { color: #ffffff; }
.band .note { color: var(--band-muted); }

.limits {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.limit {
  display: grid;
  grid-template-columns: auto 1fr;
  /* cardurile din acelasi rand au aceeasi inaltime; fara `align-content: start`
     spatiul in plus s-ar imparti intre randuri si titlul s-ar departa de text */
  align-content: start;
  gap: 0.2rem 0.75rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--band-line);
  border-radius: var(--radius-sm);
  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-accent);
}
.limit h3 { font-size: 1rem; }
.limit p { font-size: 0.925rem; color: var(--band-muted); }


/* ---------- 14  Competente noi (learnai.ro) ------------------------------ */

.learn-card {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  border: 1px solid var(--line);
  border-bottom: 5px solid var(--digital-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.learn-card h3 { font-size: 1.2rem; }
.learn-card p { margin-top: 0.7rem; color: var(--ink-2); font-size: 0.97rem; }
.learn-card .note { margin-top: 0.9rem; }

.learn-list { margin-top: 1rem; display: grid; gap: 0.45rem; }
.learn-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.learn-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.6rem;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--digital);
}

@media (min-width: 820px) {
  .learn-card { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
}


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

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

@media (min-width: 900px) {
  .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.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}
.next-steps li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.63rem;
  width: 0.8rem; height: 3px;
  border-radius: 2px;
  background: 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: 640; }

/* --- cardul de formular --- */
.form-card {
  padding: clamp(1.2rem, 0.9rem + 1.2vw, 1.8rem);
  border: 1px solid var(--line);
  border-bottom: 5px solid var(--accent);
  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: 700;
  letter-spacing: -0.012em;
  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: 640;
  color: var(--ink);
}
.req { color: var(--accent); 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;
}
/* selectul isi pastreaza sageata nativa: o sageata proprie ar cere o imagine
   de fundal, iar CSP-ul interzice pana si `data:` URI in `background-image`. */
.field select { height: auto; }
.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);
}
.field-hint { margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); }

.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. Regulile de mai jos raman asa cum sunt —
   `display:none` ar fi un semnal clar pentru boti. Cititoarele de ecran nu il
   mai anunta: invelisul are `aria-hidden="true"` in HTML, ca sa nu fie auzita o
   eticheta pe care nimeni nu o poate explica. */
.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: 700;
  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-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

/* linkurile din dreapta liniei de subsol (confidentialitate + cealalta limba):
   pe telefon cad unul sub altul fara sa se lipeasca */
.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: 700;
  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: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.mini-code--ok { color: var(--accent); }
.mini-code--warn { color: var(--accent-ink); }

.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-bottom: 4px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.mini-what h2 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.mini-what li {
  position: relative;
  padding-left: 1.6rem;
  margin-top: 0.7rem;
}
.mini-what li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.63rem;
  width: 0.9rem; height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.mini-what .cs-role {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.mini-what p { margin-top: 0.1rem; font-size: 0.95rem; 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: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.mini-errors p {
  font-size: 1.05rem;
  font-weight: 640;
  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.66rem;
  width: 8px; height: 3px;
  border-radius: 2px;
  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; }

/* linia de drepturi de autor de pe paginile mici. Mai specifica decat `.mini p`,
   altfel ar mosteni culoarea si marimea textului obisnuit. */
.mini .mini-legal {
  margin-top: 1.3rem;
  color: var(--muted);
  font-size: 0.82rem;
}


/* ---------- 17b  Pagina de confidentialitate ----------------------------- */
/*
   /confidentialitate/ si /en/privacy/. Un singur sir de lectura, mai ingust
   decat `.wrap`: textul juridic se citeste pe rand scurt.

   Acelasi limbaj vizual ca restul site-ului, cu aceleasi semne:
     talpa de arama sub un card        = ce sustine, ce e asezat (ca la meserii);
     linia punctata + arama            = ce nu e inca in regula (ca la nota de
                                         parinte si la gluma din „Temelia”);
     bara scurta de arama in fata unui rand = element de lista (ca la
                                         „Toata lumea are nevoie de…”).
   Datele operatorului care lipsesc NU se ascund: sunt desenate cu marcajul
   punctat, ca sa se vada din text ca urmeaza sa fie completate.
*/

.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) 82%);
  border-bottom: 1px solid var(--line);
}
.legal-hero .lede { margin-top: 1rem; }

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

/* ultima sectiune a paginii: fara linia de jos, footerul o inchide oricum */
.legal { border-bottom: 0; }

/* avertismentul de date lipsa — acelasi desen ca `.parent-note` (contur
   punctat) plus muchia de arama de la `.joke` */
.legal-alert {
  padding: 1.1rem 1.2rem 1.25rem 1.3rem;
  border: 1px dashed var(--accent-line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.legal-alert h2 { font-size: 1.02rem; color: var(--accent-ink); }
.legal-alert p {
  margin-top: 0.65rem;
  font-size: 0.94rem;
  color: var(--ink-2);
}

/* cuprinsul, ca sir de pastile — acelasi desen ca `.chips` din hero */
.legal-toc { margin-top: 2.1rem; }
.legal-toc h2 {
  margin-bottom: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.legal-toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.34rem 0.75rem;
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--accent-line);
  border-radius: var(--radius-sm);
  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;
}

/* corpul politicii */
.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.75rem;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
}

/* nodul numerotat: patrat rotunjit de arama, acelasi semn ca talpa marcii */
.legal-num {
  position: absolute;
  left: 0;
  top: -0.05rem;
  width: 1.95rem;
  height: 1.95rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1.5px 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-list { margin-top: 0.85rem; }
.legal-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: 0.45rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}
/* aceeasi bara scurta de arama ca la „Toata lumea are nevoie de…” */
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 0.85rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* dată a operatorului care inca nu ne-a fost furnizata: se vede ca lipsa, nu se
   ascunde. `anywhere` + `clone` ca marcajul lung sa se rupa curat la 360 px si
   sa isi pastreze conturul pe fiecare rand. */
.legal-todo {
  padding: 0.05rem 0.4rem;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 650;
  font-size: 0.92em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* blocul de informatii legale cerut de legislatia comertului electronic —
   talpa de arama, ca la cardurile de meserii */
.legal-id {
  margin-top: 2.4rem;
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--line);
  border-bottom: 5px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.legal-id h2 {
  font-size: 0.8rem;
  font-weight: 700;
  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;
}
.legal-id .legal-note {
  margin-top: 0.7rem;
  font-size: 0.885rem;
  color: var(--muted);
}


/* ---------- 18  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 { border: 0; padding-block: 1rem; }
}