/* ==========================================================================
   isoprofi24 . stilul site-ului, v2
   Se incarca DUPA tokens.css. Nicio valoare literala care exista ca token.

   Principiul de asezare: TOTUL sta pe acelasi grid de 12 coloane, cu acelasi
   gutter, in acelasi container. Nicio sectiune nu are marginea ei proprie.
   Asa se aliniaza automat titlul unei sectiuni cu prima coloana a cardurilor
   de dedesubt, si textul din trei coloane cade pe aceleasi linii.
   ========================================================================== */

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-variation-settings: "wdth" var(--wd-normal);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   ASEZARE. Un singur container, un singur grid, peste tot.
   ========================================================================== */

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

.container--lat { max-width: var(--container-lat); }

/* Grid de 12 coloane. Orice bloc mai complicat de doua elemente se aseaza aici,
   ca sa nu apara nicio latime nimerita din ochi. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-6);
}
@media (max-width: 899px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}

.sectiune { padding-block: var(--sp-sectiune); }
.sectiune--stransa { padding-block: var(--sp-12); }
@media (min-width: 700px) { .sectiune--stransa { padding-block: var(--sp-16); } }
@media (min-width: 1100px) { .sectiune--stransa { padding-block: var(--sp-20); } }

/* Antetul unei sectiuni. Identic peste tot, deci ritmul paginii e constant. */
.cap-sectiune { margin-bottom: var(--sp-8); }
@media (min-width: 700px) { .cap-sectiune { margin-bottom: var(--sp-10); } }
@media (min-width: 1100px) { .cap-sectiune { margin-bottom: var(--sp-12); } }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-5);
}

/* Linia care creste din eticheta. Semnatura recurenta a site-ului:
   acelasi gest de cota tehnica pe fiecare sectiune. */
.eyebrow::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 5rem;
  background: currentColor;
  opacity: 0.4;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-5) var(--ease-intrare) 120ms;
}
[data-vazut] .eyebrow::after,
.eyebrow[data-vazut]::after { transform: scaleX(1); }
[data-fara-miscare] .eyebrow::after { transform: scaleX(1); transition: none; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.lead {
  font-size: var(--text-lg);
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
}

.text-mic { font-size: var(--text-sm); color: var(--ink-2); }
.text-nota { font-size: var(--text-xs); color: var(--ink-3); }

/* Text doar pentru cititoarele de ecran. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   MISCARE
   ========================================================================== */

[data-cu-miscare] [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-5) var(--ease-intrare),
              transform var(--dur-5) var(--ease-intrare);
  will-change: opacity, transform;
}
[data-cu-miscare] [data-reveal][data-vazut] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Fraza care se aseaza cuvant cu cuvant. */
.cuvant {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.cuvant > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--dur-5) var(--ease-intrare);
  transition-delay: calc(var(--i) * 55ms);
}
[data-vazut] .cuvant > span { transform: none; }
[data-fara-miscare] .cuvant > span { transform: none; transition: none; }

[data-parallax] { will-change: transform; }

/* Bara de progres a citirii, sub header. */
.progres {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: calc(var(--z-header) + 1);
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}

/* ==========================================================================
   BUTOANE
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-6);
  font: inherit;
  font-weight: var(--fw-medium);
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }

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

/* Sageata care porneste la hover. Semnal de directie, nu decor. */
.btn--primar .sg,
.btn--fantoma .sg {
  transition: transform var(--dur-2) var(--ease-standard);
}
.btn:hover .sg { transform: translateX(3px); }

.btn--fantoma {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn--fantoma:hover { border-color: var(--ink-3); background: var(--surface-2); }

.btn--pe-inchis {
  background: transparent;
  color: var(--noapte-text);
  border-color: rgba(255, 255, 255, 0.26);
}
.btn--pe-inchis:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--lat { width: 100%; }

/* Link de text de sine statator: tinta de deget, plus sublinierea care creste. */
.link-bloc {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.link-bloc span:first-child {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-3) var(--ease-standard);
}
.link-bloc:hover span:first-child { background-size: 0% 1px; background-position: 100% 100%; }
.link-bloc .sg { transition: transform var(--dur-2) var(--ease-standard); }
.link-bloc:hover .sg { transform: translateX(4px); }

/* ==========================================================================
   HEADER
   ========================================================================== */

.bara-incredere {
  background: var(--graphit-800);
  color: var(--kalk-400);
  font-size: var(--text-xs);
}

.bara-incredere ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) 0;
  list-style: none;
  padding-block: var(--sp-2);
}

/* Fara buline verzi. Un punct verde langa fiecare afirmatie e cliseul de
   "feature list" pe care il scoate orice generator, si nu inseamna nimic:
   verdele e rezervat pentru VERDICT, nu pentru decor. Separatorul e o linie
   subtire, ca pe o fisa tehnica. */
.bara-incredere li { display: flex; align-items: center; gap: var(--sp-6); }

/* Separatorul apare doar cand randul chiar sta pe un rand. Pe telefon lista
   se rupe si linia ajungea la inceputul randului urmator, ca un semn ratacit. */
@media (min-width: 1000px) {
  .bara-incredere li + li::before {
    content: '';
    width: 1px; height: 10px;
    background: rgba(255,255,255,0.18);
    flex: none;
  }
}
@media (max-width: 999px) {
  .bara-incredere ul { gap: var(--sp-1) var(--sp-5); }
  .bara-incredere li { gap: 0; }
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* Fara backdrop-filter. Un blur pe o bara lipita se recalculeaza pe toata
     latimea ecranului la fiecare cadru de derulare, si se simte ca lag chiar
     daca framerate-ul pare bun. Fundalul aproape opac arata la fel de curat
     si nu costa nimic. */
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease-standard),
              box-shadow var(--dur-3) var(--ease-standard);
}
.header[data-lipit] {
  border-bottom-color: var(--border);
  box-shadow: var(--umbra-sm);
}

.header__rand {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 72px;
  transition: min-height var(--dur-3) var(--ease-standard);
}
.header[data-lipit] .header__rand { min-height: 62px; }

.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.logo span { color: var(--accent-hover); }

.nav {
  display: flex;
  gap: var(--sp-1);
  list-style: none;
  margin-right: auto;
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--sp-3);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: color var(--dur-1) var(--ease-standard);
}
.nav a::after {
  content: '';
  position: absolute;
  left: var(--sp-3); right: var(--sp-3);
  bottom: 14px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-standard);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.header__dreapta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
}

.tel {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--tap-min);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.tel small {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Traducerile sunt mai lungi decat germana ("Laibungsplatten" devine
   "Window reveal boards"). Fara asta, meniul se rupe pe doua randuri si
   antetul isi schimba inaltimea cand omul schimba limba. */
.nav a { white-space: nowrap; }
/* Telefonul iese din antet mai devreme decat meniul. Ocupa 150 px si e
   oricum in subsol si pe pagina de contact, in timp ce meniul e singurul
   mod de a naviga. Fara pragul asta, traducerile mai lungi imping antetul
   peste marginea ecranului. */
@media (max-width: 1300px) { .nav { gap: var(--sp-4); } .tel { display: none; } }
@media (max-width: 1120px) { .nav, .tel { display: none; } }

/* Pe telefon in antet raman logo, limba si butonul principal. La 390 px
   cele trei incap fix, deci butonul primeste padding mai mic in loc sa
   impinga pagina in lateral. */
@media (max-width: 460px) {
  .header__rand { gap: var(--sp-3); }
  .header__dreapta { gap: var(--sp-2); }
  .header__dreapta .btn { padding-inline: var(--sp-4); font-size: var(--text-sm); }
  .limba__buton { padding-inline: var(--sp-2); }
}

/* ==========================================================================
   BARA DE PAS URMATOR, doar mobil
   Pe telefon pagina de start e lunga, iar drumul spre calculator se pierde
   dupa hero. O singura actiune, mereu la deget, nimic altceva in bara.
   Apare dupa ce hero-ul iese din ecran, dispare la subsol.
   ========================================================================== */

.bara-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  /* Fara backdrop-filter, din acelasi motiv ca la antet: un blur pe o bara
     lipita se recalculeaza pe toata latimea ecranului la fiecare cadru, si
     tocmai pe telefon, unde bara asta apare. Fundal opac, zero cost. */
  background: var(--surface);
  border-top: 1px solid var(--border);
  transform: translateY(105%);
  /* visibility scoate linkul din ordinea de tab cat timp bara e ascunsa */
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-standard),
              visibility 0s linear var(--dur-3);
}
.bara-cta[data-vizibil] { transform: none; visibility: visible; transition-delay: 0s; }
.bara-cta .btn { width: 100%; }
@media (max-width: 700px) {
  .bara-cta { display: block; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--noapte);
  color: var(--noapte-text);
  overflow: hidden;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: center;
}

.hero__scena {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 15%, #1B2A34 0%, transparent 60%),
    radial-gradient(90% 80% at 85% 80%, #2A1D14 0%, transparent 55%),
    var(--noapte);
}
.hero__scena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero__vinieta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(11,16,19,0.97) 0%, rgba(11,16,19,0.93) 26%,
      rgba(11,16,19,0.55) 46%, transparent 62%),
    radial-gradient(80% 80% at 50% 50%, transparent 45%, rgba(0,0,0,0.5) 100%);
}

.hero__continut {
  position: relative;
  z-index: 4;
  padding-block: var(--sp-16);
}

/* Latimea coloanei de text se limiteaza AICI, nu pe container.
   Pe container ar fi anulat centrarea si textul ar pluti la mijloc. */
.hero__text { max-width: 32rem; }

.hero__eticheta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--noapte-text-3);
  margin-bottom: var(--sp-6);
}
.hero__eticheta::before {
  content: '';
  width: var(--sp-6); height: 1px;
  background: currentColor;
}

.hero h1 {
  font-size: clamp(2.1rem, 1.35rem + 3.0vw, 3.6rem);
  font-variation-settings: "wdth" 108;
  font-weight: var(--fw-bold);
  line-height: 1.0;
  letter-spacing: -0.032em;
  margin-bottom: var(--sp-5);
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--noapte-text-2);
  margin-bottom: var(--sp-8);
  max-width: 28rem;
  text-wrap: pretty;
}

.hero__actiuni { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.hero__control {
  position: absolute;
  right: clamp(var(--sp-4), 3vw, var(--sp-10));
  bottom: clamp(var(--sp-5), 3vw, var(--sp-10));
  z-index: 3;
  width: min(19rem, calc(100vw - var(--sp-8)));
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  /* Panoul sta peste o scena 3D care se redeseneaza in fiecare cadru. Un
     blur aici ar insemna sa refacem neclaritatea de 60 de ori pe secunda,
     degeaba. Fundal plin, aceeasi impresie. */
  background: rgba(14, 19, 23, 0.94);
  border: 1px solid var(--noapte-linie);
  box-shadow: 0 20px 56px rgba(0,0,0,0.5);
}

.hero__control .nume {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--noapte-text-3);
  margin-bottom: var(--sp-2);
}

.hero__control .val {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-3);
}
.hero__control .val small { font-size: 0.4em; color: var(--noapte-text-3); font-weight: 400; }

.hero__verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  /* Verdictul nu mai e o pastila cu bulina care straluceste. Alea sunt
     "status pills" de dashboard, se citesc ca sablon. Aici e o linie de
     fisa tehnica: o bara verticala colorata si textul langa ea. */
  padding: 0 0 0 var(--sp-3);
  border-left: 2px solid currentColor;
  color: #8FD3A1;
  transition: color var(--dur-3) var(--ease-standard);
}
[data-status="schimmelgefahr"] .hero__verdict { color: #E8B865; }
[data-status="kondensat"]      .hero__verdict { color: #F0918A; }

/* --------------------------------------------------------------------------
   Grosimea placii: trepte apasabile, nu cursor de tras
   --------------------------------------------------------------------------
   Un input de tip range se trage greu cu degetul, nu spune ce valori exista
   pana nu-l misti, si pe telefon se bate cu derularea paginii. Cinci butoane
   spun tot dintr-o privire si nu se pot gresi. Asta e diferenta dintre
   "arata interactiv" si "chiar se foloseste". */

.trepte-placa {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.trepte-placa button {
  flex: 1 1 auto;
  min-width: 3.4rem;
  min-height: 44px;
  padding: 0 var(--sp-2);
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--noapte-text-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard);
}
.trepte-placa button:hover { background: rgba(255,255,255,0.12); color: #fff; }
.trepte-placa button:focus-visible { outline: 2px solid var(--terra-400); outline-offset: 2px; }
.trepte-placa button[aria-pressed="true"] {
  background: var(--kalk-50);
  border-color: var(--kalk-50);
  color: var(--graphit-800);
  font-weight: var(--fw-semibold);
}

/* Indiciul de rotire. Apare o data, dispare la prima atingere. */
.hero__rotire {
  position: absolute;
  left: 50%;
  bottom: clamp(var(--sp-5), 4vw, var(--sp-10));
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-plin);
  background: rgba(14,19,23,0.72);
  border: 1px solid var(--noapte-linie);
  color: var(--noapte-text-2);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--dur-4) var(--ease-standard);
}
.hero[data-atins] .hero__rotire { opacity: 0; }

/* Canvasul primeste gesturile, dar derularea verticala ramane a paginii.
   Fara pan-y, OrbitControls pune touch-action:none si jumatate de ecran
   de telefon nu mai deruleaza deloc. */
.hero__scena canvas { touch-action: pan-y; }

/* Textul de deasupra nu mai fura zona de rotire. Doar ce e chiar de apasat
   primeste inapoi evenimentele de pointer. */
.hero__continut { pointer-events: none; }
.hero__continut a,
.hero__continut button { pointer-events: auto; }

@media (max-width: 900px) {
  .hero { min-height: auto; display: block; }
  .hero__scena { position: relative; height: 48vh; inset: auto; }
  .hero__vinieta {
    background: linear-gradient(180deg, transparent 40%, rgba(11,16,19,0.92) 100%);
  }
  .hero__continut { padding-block: var(--sp-8) var(--sp-6); max-width: none; }
  .hero__control {
    position: relative; right: auto; bottom: auto; width: auto;
    margin: 0 var(--gutter) var(--sp-10);
  }
  /* Pe telefon scena are nevoie de aer ca sa se poata roti cu degetul,
     iar indiciul sta jos in scena, nu peste text. */
  .hero__scena { height: 52vh; }
  .hero__rotire { bottom: auto; top: calc(52vh - 52px); }
}

/* ==========================================================================
   ETICHETE ANCORATE IN SCENA 3D
   ========================================================================== */

.etichete3d { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.et {
  position: absolute;
  top: 0; left: 0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--noapte-text-3);
  line-height: 1.35;
  text-align: center;
  transition: opacity var(--dur-2) var(--ease-standard);
  text-shadow: 0 1px 10px rgba(0,0,0,0.85);
}
.et b {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  text-transform: none;
  color: #DCE4E9;
  font-variant-numeric: tabular-nums;
}
.et--accent b { color: var(--terra-300); }
.et--roua { color: #8FDBFF; font-size: 9px; }

@media (max-width: 900px) {
  .et { font-size: 9px; }
  .et b { font-size: 11px; }
}

/* ==========================================================================
   CARDURI DE PROBLEMA
   ========================================================================== */

.grid-probleme {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) { .grid-probleme { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .grid-probleme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .grid-probleme { grid-template-columns: 1fr; } }

.card-problema {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 4;
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: var(--graphit-700);
  isolation: isolate;
}

.card-problema img,
.card-problema__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--dur-5) var(--ease-standard),
              filter var(--dur-4) var(--ease-standard);
}
.card-problema:hover img,
.card-problema:hover .card-problema__foto {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.card-problema::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(10,14,16,0) 26%, rgba(10,14,16,0.68) 64%, rgba(10,14,16,0.95) 100%);
  transition: background var(--dur-4) var(--ease-standard);
}

.card-problema h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  font-variation-settings: "wdth" 108;
  letter-spacing: var(--ls-titlu);
  margin-bottom: var(--sp-1);
  color: #fff;
}

.card-problema p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.80);
  text-wrap: pretty;
}

.card-problema .sageata {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--terra-300);
}
.card-problema .sageata .sg { transition: transform var(--dur-2) var(--ease-standard); }
.card-problema:hover .sageata .sg { transform: translateX(4px); }

/* ==========================================================================
   PASII
   ========================================================================== */

.pasi {
  display: grid;
  gap: var(--sp-10) var(--sp-8);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: pas;
}
@media (max-width: 900px) { .pasi { grid-template-columns: 1fr; } }

.pas { counter-increment: pas; display: flex; flex-direction: column; }

.pas__desen {
  width: 100%;
  aspect-ratio: 300 / 130;
  margin-bottom: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.pas__nr {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  /* text mic pe kalk: terra-600 da 5,5:1, terra-500 pica sub 4,5 */
  color: var(--accent-hover);
  margin-bottom: var(--sp-3);
}
.pas__nr::before { content: counter(pas, decimal-leading-zero); }

.pas h3 { margin-bottom: var(--sp-3); }
.pas p { color: var(--ink-2); font-size: var(--text-sm); text-wrap: pretty; }

/* ==========================================================================
   BANDA DE MATERIAL
   ========================================================================== */

.banda-material {
  position: relative;
  min-height: min(74vh, 660px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.banda-material img {
  position: absolute;
  inset: -6% 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  z-index: -2;
}

.banda-material::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(10,14,16,0.06) 0%, rgba(10,14,16,0.58) 56%, rgba(10,14,16,0.94) 100%);
}

.banda-material__text {
  width: 100%;
  padding-block: var(--sp-16);
  color: var(--noapte-text);
}
.banda-material h2 {
  color: #fff;
  max-width: 20ch;
  margin-bottom: var(--sp-5);
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.banda-material p {
  color: #C7D0D6;
  max-width: 50ch;
  text-shadow: 0 1px 14px rgba(0,0,0,0.7);
  text-wrap: pretty;
}

/* Cifrele de material, sub text. */
.banda-cifre {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  max-width: 42rem;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--noapte-linie);
}
@media (max-width: 600px) { .banda-cifre { grid-template-columns: 1fr; gap: var(--sp-4); } }

.banda-cifre dt {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--noapte-text-3);
  margin-bottom: var(--sp-1);
}
.banda-cifre dd {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: -0.02em;
}
.banda-cifre dd small { font-size: 0.44em; color: var(--noapte-text-2); font-weight: 400; }

/* ==========================================================================
   PACHETE
   ========================================================================== */

.grid-pachete {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 900px) { .grid-pachete { grid-template-columns: 1fr; } }

.pachet {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-2) var(--ease-standard);
}
.pachet:hover {
  border-color: var(--border-strong);
  box-shadow: var(--umbra-lg);
  transform: translateY(-2px);
}

.pachet--evidentiat { border-color: var(--accent); box-shadow: var(--umbra-lg); }

.pachet__insigna {
  align-self: flex-start;
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-plin);
  background: var(--accent-tint);
  color: var(--accent-hover);
  margin-bottom: var(--sp-4);
}
/* Rezerva de spatiu, ca toate cele trei carduri sa inceapa pe aceeasi linie. */
.pachet__insigna--fantoma { visibility: hidden; }

.pachet h3 { margin-bottom: var(--sp-2); }

.pachet__pentru {
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-bottom: var(--sp-6);
  min-height: 2.8em;
  text-wrap: pretty;
}

.pachet__pret {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-1);
}
.pachet__pret small { font-size: 0.5em; font-weight: 400; color: var(--ink-3); }

.pachet__acoperire { font-size: var(--text-xs); color: var(--ink-3); margin-bottom: var(--sp-6); }

.pachet ul {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.pachet li { display: flex; gap: var(--sp-3); align-items: flex-start; }
/* Bifa PLINA, nu patrat gol: un checkbox gol se citeste "nu e inclus".
   Continutul pachetului e o promisiune tinuta, nu o optiune de bifat. */
.pachet li::before {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--moos-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='%232F6540' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.pachet .btn { margin-top: auto; }

/* ==========================================================================
   TABEL DE PRETURI
   ========================================================================== */

.tabel-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.comutator {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}
.comutator button {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard);
}
.comutator button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--umbra-sm);
}

.tabel-invelis {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

table.preturi {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 42rem;
}
table.preturi th,
table.preturi td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.preturi thead th {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  white-space: nowrap;
}
table.preturi tbody tr:last-child th,
table.preturi tbody tr:last-child td { border-bottom: 0; }
table.preturi tbody tr { transition: background var(--dur-1) var(--ease-standard); }
table.preturi tbody tr:hover { background: var(--surface-2); }

table.preturi th[scope="row"] { font-weight: var(--fw-medium); }
table.preturi th[scope="row"] small {
  display: block;
  font-weight: 400;
  color: var(--ink-3);
  font-size: var(--text-xs);
  margin-top: 2px;
}

td.pret {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
td.pret span { color: var(--ink-3); font-size: var(--text-xs); }
td.pret.gol { color: var(--ink-3); }

/* ==========================================================================
   BANDA PENTRU PROFESIONISTI
   ========================================================================== */

.profi { background: var(--graphit-800); color: var(--noapte-text); }
/* Comutatorul de TVA, varianta pe fundal inchis (banda Profi). */
.profi .comutator { background: rgba(255, 255, 255, 0.10); margin-top: var(--sp-4); }
.profi .comutator button { color: var(--noapte-text-2); }
.profi .comutator button[aria-pressed="true"] { background: var(--kalk-50); color: var(--graphit-800); }
.profi h2 { color: #fff; margin-bottom: var(--sp-5); }
.profi .lead { color: #B7B3A5; }
.profi .eyebrow { color: var(--terra-300); }

.profi__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: var(--sp-12);
}
@media (max-width: 900px) { .profi__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

.profi__punct { padding-top: var(--sp-5); border-top: 1px solid var(--noapte-linie); }
.profi__punct h3 { font-size: var(--text-md); margin-bottom: var(--sp-2); color: #fff; }
.profi__punct p { font-size: var(--text-sm); color: #A7A296; text-wrap: pretty; }

.profi__actiuni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
}
.profi__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.025em;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { max-width: var(--container-text); }

.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  min-height: var(--tap-min);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  font-variation-settings: "wdth" 104;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-1) var(--ease-standard);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-hover); }

.faq summary::after {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  color: var(--accent);
  transition: transform var(--dur-3) var(--ease-standard);
}
.faq details[open] summary::after { transform: rotate(135deg); }

.faq details p {
  padding-bottom: var(--sp-6);
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ==========================================================================
   INCREDERE SI FOOTER
   ========================================================================== */

.incredere { border-block: 1px solid var(--border); background: var(--surface-2); }

.incredere__rand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
  padding-block: var(--sp-10);
}
.incredere p { font-size: var(--text-sm); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.incredere strong { color: var(--ink); font-weight: var(--fw-medium); }

.footer {
  background: var(--graphit-900);
  color: #A7A296;
  font-size: var(--text-sm);
  padding-block: var(--sp-16) var(--sp-8);
}

.footer__grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--sp-12);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

.footer h4 {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--noapte-text);
  margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; display: grid; }
.footer li { display: flex; align-items: center; min-height: var(--tap-min); }
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: #A7A296;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-standard);
}
.footer a:hover { color: var(--noapte-text); }

.footer__jos {
  border-top: 1px solid var(--noapte-linie);
  padding-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-8);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: #9A9488;
}

/* ==========================================================================
   NOTA DE LUCRU. Se scoate inainte de live.
   ========================================================================== */

.nota-lucru {
  background: var(--avert-tint);
  border-top: 2px solid var(--avert);
  color: var(--graphit-700);
  font-size: var(--text-sm);
}
.nota-lucru div { padding-block: var(--sp-5); }
.nota-lucru strong { color: var(--amber-600); }

/* ==========================================================================
   PAGINI DE CONTINUT
   Ratgeber, liste de produse mici si textele legale. Adaugate dupa
   sistemul de baza, ca sa se vada clar ce a venit odata cu ele.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Capul de pagina cu fotografie
   -------------------------------------------------------------------------- */

.cap-foto {
  position: relative;
  min-height: 58svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
}
.cap-foto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.cap-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(21,20,15,0.30) 0%, rgba(21,20,15,0.55) 52%, rgba(21,20,15,0.92) 100%);
}
/* Blocul poarta clasa .container, deci latimea si marginile vin de acolo.
   Daca ii punem si un max-width propriu, il ingusteaza si il CENTREAZA, iar
   capul paginii nu mai porneste din aceeasi verticala cu textul de dedesubt.
   Limita de latime sta pe copii, unde ii e locul. */
.cap-foto__text {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-10) var(--sp-10);
  color: var(--kalk-100);
}
.cap-foto__text h1,
.cap-foto__text .lead,
.cap-foto__text .eyebrow { max-width: 46rem; }
.cap-foto__text h1 { color: #fff; }
.cap-foto__text .eyebrow { color: var(--terra-300); }
.cap-foto__text .lead { color: var(--kalk-200); margin-top: var(--sp-5); }

/* Firimiturile de drum */
.drum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--ink-3);
  padding-block: var(--sp-5);
}
.drum a { color: inherit; }
.drum a:hover { color: var(--ink); }
.drum span[aria-hidden] { opacity: 0.5; }
.cap-foto .drum { color: var(--kalk-400); }
.cap-foto .drum a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   2. Articolul: o coloana de text ingusta, cu marginea pentru cifre
   -------------------------------------------------------------------------- */

.articol {
  display: grid;
  gap: var(--sp-10);
  align-items: start;
}
@media (min-width: 1000px) {
  .articol { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--sp-12); }
}

.articol__text > * + * { margin-top: var(--sp-6); }
.articol__text > h2 { margin-top: var(--sp-12); }
.articol__text > h3 { margin-top: var(--sp-10); }
.articol__text p,
.articol__text li { max-width: 68ch; text-wrap: pretty; }
.articol__text ul,
.articol__text ol { padding-left: var(--sp-6); display: grid; gap: var(--sp-3); }
.articol__text li::marker { color: var(--terra-500); }

/* Marginea lipita, cu fisa scenariului */
.articol__margine { position: sticky; top: calc(var(--sp-12) + 24px); display: grid; gap: var(--sp-6); }
@media (max-width: 999px) { .articol__margine { position: static; } }

/* --------------------------------------------------------------------------
   3. Fisa cu cifre. Aici traieste dovada.
   -------------------------------------------------------------------------- */

.fisa {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--sp-6);
}
.fisa__titlu {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-5);
}
.fisa dl { display: grid; gap: var(--sp-4); margin: 0; }
.fisa dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.fisa dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.fisa dt { font-size: var(--text-sm); color: var(--ink-2); }
.fisa dd {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.fisa dd small { color: var(--ink-3); }
.fisa dd[data-rau] { color: var(--terra-600); }
.fisa dd[data-bine] { color: var(--moos-600); }
.fisa__nota { margin-top: var(--sp-5); font-size: var(--text-xs); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   4. Caseta de atentionare
   -------------------------------------------------------------------------- */

.caseta {
  border-left: 3px solid var(--border-strong);
  background: var(--surface-2);
  padding: var(--sp-5) var(--sp-6);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.caseta__titlu {
  font-weight: var(--fw-semibold);
  font-variation-settings: "wdth" 104;
  margin-bottom: var(--sp-2);
}
.caseta p { margin: 0; }
.caseta p + p { margin-top: var(--sp-3); }
.caseta--atentie { border-left-color: var(--terra-500); }
.caseta--atentie .caseta__titlu { color: var(--terra-600); }
.caseta--bine { border-left-color: var(--moos-500); }
.caseta--bine .caseta__titlu { color: var(--moos-600); }

/* --------------------------------------------------------------------------
   5. Pasii numerotati din ghiduri
   -------------------------------------------------------------------------- */

.pasi-lista { list-style: none; padding: 0; display: grid; gap: var(--sp-6); counter-reset: p; }
/* Nu grid: textul liber de dupa <b> ar deveni grid item anonim si ar
   cadea in coloana ingusta a numarului, un cuvant pe linie. Numarul sta
   absolut, textul curge normal. */
.pasi-lista > li {
  position: relative;
  padding-left: 3.25rem;
  counter-increment: p;
}
.pasi-lista > li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  /* text mic pe kalk: terra-600 trece AA, terra-500 nu */
  color: var(--accent-hover);
}
.pasi-lista b { display: block; font-variation-settings: "wdth" 104; margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------------------
   6. Lista scurta de produse (pachete, glafuri, accesorii)
   -------------------------------------------------------------------------- */

.lista-p { display: grid; gap: var(--sp-5); }
@media (min-width: 700px)  { .lista-p { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .lista-p { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--sp-6);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
}
.p-card:hover { border-color: var(--border-strong); box-shadow: var(--umbra-md); }
.p-card__eticheta {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.p-card h3 {
  font-size: var(--text-lg);
  font-variation-settings: "wdth" 106;
  letter-spacing: var(--ls-titlu);
  margin-bottom: var(--sp-3);
}
.p-card > p { font-size: var(--text-sm); color: var(--ink-2); text-wrap: pretty; }
.p-card__lista {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.p-card__lista li { display: flex; gap: var(--sp-3); }
.p-card__lista li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--terra-300);
}
.p-card__jos {
  margin-top: auto;
  padding-top: var(--sp-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}
.p-card__pret {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Primul small e simbolul monedei si ramane linga cifra: "289,00 EUR" pe
   un rand, format german. Doar al doilea small (descrierea) coboara. */
.p-card__pret small { display: block; font-size: var(--text-xs); color: var(--ink-3); }
.p-card__pret small:first-of-type { display: inline; font-size: 0.7em; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   7. Textele legale
      Se citesc, nu se sar. Coloana ingusta, titluri clare, cuprins lipit.
   -------------------------------------------------------------------------- */

.legal { display: grid; gap: var(--sp-10); align-items: start; }
@media (min-width: 1000px) {
  .legal { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-12); }
}

.legal__cuprins { position: sticky; top: calc(var(--sp-12) + 24px); }
@media (max-width: 999px) { .legal__cuprins { position: static; } }
.legal__cuprins ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  counter-reset: c;
  border-left: 1px solid var(--border);
}
.legal__cuprins li { counter-increment: c; }
.legal__cuprins a {
  display: flex;
  gap: var(--sp-3);
  padding-left: var(--sp-4);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.legal__cuprins a::before {
  content: counter(c, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.legal__cuprins a:hover { color: var(--ink); border-left-color: var(--terra-400); }

.legal__text > section + section { margin-top: var(--sp-12); }
.legal__text h2 {
  font-size: var(--text-xl);
  font-variation-settings: "wdth" 108;
  letter-spacing: var(--ls-titlu);
  margin-bottom: var(--sp-5);
  scroll-margin-top: 6rem;
}
.legal__text h3 {
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.legal__text p,
.legal__text li { max-width: 70ch; color: var(--ink-2); text-wrap: pretty; }
.legal__text p + p { margin-top: var(--sp-4); }
.legal__text ul,
.legal__text ol { padding-left: var(--sp-6); margin-top: var(--sp-4); display: grid; gap: var(--sp-2); }
.legal__text dl { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.legal__text dt { font-weight: var(--fw-semibold); font-size: var(--text-sm); }
.legal__text dd { margin: 0; color: var(--ink-2); }

.legal__data {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* Formularul din caseta de retragere, scris ca sa poata fi copiat */
.formular-model {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--ink-2);
  white-space: pre-wrap;
  margin-top: var(--sp-5);
}

/* --------------------------------------------------------------------------
   8. Formularul de cerere pentru meseriasi
   -------------------------------------------------------------------------- */

.form-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 700px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-camp { display: grid; gap: var(--sp-2); }
.form-camp--lat { grid-column: 1 / -1; }
.form-camp label { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.form-camp small { font-size: var(--text-xs); color: var(--ink-3); }
.form-camp input,
.form-camp select,
.form-camp textarea {
  font: inherit;
  font-size: var(--text-md);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
}
.form-camp textarea { min-height: 8rem; resize: vertical; }
.form-camp input:focus-visible,
.form-camp select:focus-visible,
.form-camp textarea:focus-visible {
  outline: 2px solid var(--terra-500);
  outline-offset: 1px;
  border-color: var(--terra-500);
}

/* --------------------------------------------------------------------------
   9. Saritul peste navigatie
      Un link ascuns care nu apare NICIODATA nu ajuta pe nimeni. Asta sta in
      afara ecranului si coboara in coltul din stanga sus in clipa in care
      cineva ajunge la el cu tasta Tab.
   -------------------------------------------------------------------------- */

.link-sari {
  position: fixed;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-toast);
  transform: translateY(calc(-100% - var(--sp-8)));
  background: var(--ink);
  color: var(--kalk-50);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: var(--umbra-lg);
  transition: transform var(--dur-2) var(--ease-intrare);
}
.link-sari:focus { transform: none; outline: 2px solid var(--terra-400); outline-offset: 2px; }
[data-fara-miscare] .link-sari { transition: none; }

/* --------------------------------------------------------------------------
   10. Tinte de deget pe telefon
      Un link de 19 px inaltime se poate apasa cu mouse-ul si nu se poate
      apasa cu degetul. Pe ecran tactil orice link care sta singur pe un rand
      primeste inaltime de 44 px. Linkurile din mijlocul unei propozitii sunt
      exceptate, acolo inaltimea ar rupe randul.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .drum a,
  .legal__cuprins a,
  .footer ul a,
  .footer ul li,
  .fisa a,
  .legal__text dd > a:only-child,
  .p-card__lista a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .legal__cuprins a { padding-block: var(--sp-3); }
  .footer ul { gap: 0; }
}

/* Un link din mijlocul unei propozitii nu poate primi 44 px inaltime fara sa
   rupa randul. Ii marim zona de apasare cu padding si o compensam cu margine
   negativa, deci se apasa usor si layout-ul ramane neatins. */
@media (pointer: coarse) {
  .form-camp small a,
  .fisa__nota a,
  .caseta a {
    padding-block: 15px;
    margin-block: -15px;
  }
}

/* Formularul model se deruleaza in cutia lui, nu impinge pagina lateral */
.formular-model { overflow-x: auto; overflow-wrap: anywhere; }

/* Butonul din piciorul unui card de produs nu se lasa strans pana rupe textul */
.p-card__jos { flex-wrap: wrap; }
.p-card__jos .btn { flex: none; white-space: nowrap; }
.p-card__pret { flex: 1 1 auto; min-width: 0; }

/* Un card care e in intregime un link nu are voie sa mosteneasca sublinierea
   si culoarea de link pe tot ce e in el. Altfel titlul, textul si eticheta
   apar toate portocalii si subliniate, si cardul arata ca un accident. */
a.p-card { text-decoration: none; color: inherit; }
a.p-card h3 { color: var(--ink); transition: color var(--dur-2) var(--ease-standard); }
a.p-card:hover h3 { color: var(--terra-600); }
a.p-card p { color: var(--ink-2); }
a.p-card .sageata { color: var(--terra-600); font-weight: var(--fw-medium); }
a.p-card:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   11. Comutatorul de limba
      Sta langa telefon in antet. Discret cat sa nu fure atentia germanului,
      vizibil cat sa-l gaseasca in doua secunde turcul si polonezul.
   -------------------------------------------------------------------------- */

.limba { position: relative; display: flex; align-items: center; }

.limba__buton {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-3);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--ink-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.limba__buton:hover { color: var(--ink); background: var(--surface-2); }
.limba__buton:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 1px; }
.limba__buton svg { opacity: 0.7; }

.limba__meniu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 11rem;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--umbra-lg);
  display: grid;
  gap: 2px;
}
.limba__meniu[hidden] { display: none; }

.limba__optiune {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.limba__optiune b {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  min-width: 1.6rem;
}
.limba__optiune:hover { background: var(--surface-2); color: var(--ink); }
.limba__optiune[aria-current] { background: var(--ink); color: var(--kalk-50); }
.limba__optiune[aria-current] b { color: var(--terra-300); }
.limba__optiune:focus-visible { outline: 2px solid var(--terra-500); outline-offset: -2px; }

.limba__buton { min-width: 44px; justify-content: center; }

/* Nota de pe paginile care raman in germana */
.nota-limba {
  margin-bottom: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--terra-400);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: 62ch;
}
.nota-limba[hidden] { display: none; }