/* Eden Solutions · site de prezentare, v2 (după brandbook, versiunea 1, octombrie 2026)
   Un singur font: Onest. Iconițe: fontul Lucide. Paleta din brandbook: Navy Eden, Albastru Încredere, Miere.
   Limbajul vizual: registrul contabil și hexagonul (celula de fagure), în contur și discret. Linii fine (1px) ca structură;
   linia aurie Miere apare o singură dată pe ecran, sub titlul principal. Mișcarea răspunde mâinii: umplere, desen, trecere. */

@font-face {
  font-family: "Onest";
  /* woff2 redus de scripts/vendor-fonts.js (latină, diacritice românești, punctuație); ttf complet ca rezervă */
  src: url("assets/fonts/onest/Onest-Variable.woff2") format("woff2"),
       url("assets/fonts/onest/Onest-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Literele chirilice (paginile în rusă): același Onest variabil, într-un woff2 separat, descărcat doar când pagina le folosește */
@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest/Onest-Variable-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+040E, U+045E, U+2116;
}

/* Progresul hexagonului din pagina 404; înregistrat ca procent, ca să poată fi animat. Implicit conturul e complet. */
@property --ring {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

:root {
  /* Paleta din brandbook. Navy Eden: titluri, antet, fundaluri închise */
  --ink: #0A2342;
  /* Albastru Încredere: culoarea principală, linkuri, butoane (Ceață pe el: 7.7:1) */
  --brand: #1F4E8C;
  --brand-hover: #173D6E;
  /* Albastru Claritate: grafice, hexagonul din fundal */
  --brand-2: #3E7CC9;
  /* Gri-ardezie: text secundar (7.1:1 pe Ceață) */
  --slate: #44546A;
  /* Miere: accentul cald. Linia de sub titlu, semnele mici și butonul „Consultație gratuită” (text navy pe Miere, 7:1) */
  --accent: #D9A441;
  --accent-hover: #C8912F;
  /* Pe panourile Navy Eden, Miere e detaliul de accent (7:1) */
  --mark-dark: #D9A441;
  /* Ceață: fundalul pe ecran */
  --canvas: #F2F6FB;
  --white: #FFFFFF;
  --surface-alt: #E1ECFC;
  /* Cer Senin: linii și rânduri alternate */
  --divider: #BFD4EE;
  --on-dark: #F2F6FB;
  --on-dark-muted: #C9D9EE;
  --on-dark-label: #9DB4D6;
  --on-dark-dim: #8796AE;
  --dark-line: rgba(242, 246, 251, 0.18);
  --dark-control: #7C8795;
  --error-dark: #F6B8B2;
  /* Text secundar care rămâne activ (file inactive): 4.7:1 pe Ceață, nu pare dezactivat */
  --ink-soft: #5F6E82;
  --surface-press: #D2E2F8;
  /* Transparențele culorilor de brand, ca tokeni */
  --veil-04: rgba(242, 246, 251, 0.04);
  --veil-06: rgba(242, 246, 251, 0.06);
  --veil-10: rgba(242, 246, 251, 0.1);
  --veil-14: rgba(242, 246, 251, 0.14);
  --veil-22: rgba(242, 246, 251, 0.22);
  --veil-40: rgba(242, 246, 251, 0.4);
  --veil-70: rgba(242, 246, 251, 0.7);
  --ink-08: rgba(10, 35, 66, 0.08);
  --ink-10: rgba(10, 35, 66, 0.1);
  --ink-35: rgba(10, 35, 66, 0.35);
  --mark-dark-90: rgba(217, 164, 65, 0.9);
  /* Marginea foii de registru: Albastru Claritate, estompat */
  --margin-line: rgba(62, 124, 201, 0.45);
  /* Hexagonul în contur (celula de fagure): mască, culoarea vine din background */
  --hex-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpolygon points='60,8 105,34 105,86 60,112 15,86 15,34' fill='none' stroke='%23000' stroke-width='12' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Un singur titlu de secțiune pentru tot site-ul */
  --h2: clamp(40px, 4.6vw, 72px);

  --font: "Onest", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  /* Plutirea fundalului: pornește și se oprește la fel de lin, fără accent */
  --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
  /* Lumina care urmează cursorul pe foaia de registru */
  --sheen: rgba(62, 124, 201, 0.1);
  --gutter: 24px;
  --margin: clamp(24px, 4vw, 64px);
  --section-pad: clamp(80px, 8vw, 128px);
  --inset: clamp(12px, 1.6vw, 24px);
  --bar-h: 64px;
  --head-h: 184px;
  /* Culoarea descriptorului din logo-ul inversat */
  --brand-tag-dark: #8FB3E0;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Continuitate între pagina principală și pagina de contact */
  @view-transition { navigation: auto; }
}
html.menu-lock { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { display: block; overflow-x: clip; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
abbr[title] { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
.nobr { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: calc(1240px + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: var(--brand); color: var(--on-dark); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
[data-theme="dark"] :focus-visible { outline-color: var(--mark-dark); }

/* Suprafețele browserului poartă și ele paleta */
::selection { background: var(--brand); color: var(--white); }
input, textarea { caret-color: var(--brand); }
[data-theme="dark"] input, [data-theme="dark"] textarea { caret-color: var(--mark-dark); }
html { scrollbar-color: var(--ink-soft) var(--canvas); }

/* Iconițe: fontul Lucide (lucide-static), dimensionat prin font-size */
.ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1em; height: 1em; font-size: 24px; line-height: 1;
}

/* ---------- Elemente comune ---------- */
/* Eticheta de secțiune, una singură pe tot site-ul: hexagonul în contur și numele secțiunii.
   Nu stă niciodată deasupra unui titlu; e ea însăși titlul secțiunii, urmată de un enunț. */
.label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--ink);
}
/* Hexagonul etichetei e în Miere: accentul auriu al ecranului de secțiune */
.label::before {
  content: ""; width: 20px; height: 20px; flex: none; background: var(--accent);
  -webkit-mask: var(--hex-outline) center / contain no-repeat; mask: var(--hex-outline) center / contain no-repeat;
}
.tag {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-alt); color: var(--ink);
  font-size: 13px; font-weight: 500; line-height: 1.3;
}
/* Linia aurie din brandbook: Miere, 5px, sub titlul principal; o singură dată pe ecran */
.rule { display: block; width: 88px; height: 5px; background: var(--accent); transform-origin: left center; }

/* Logo-ul pentru web: monograma și numele vin din brandbook, sloganul e text real, lizibil.
   Coloana textului ia lățimea sloganului, iar numele se scalează exact la ea (width 0 + min-width 100%). */
.brand { --mark: 52px; --tag: 11.5px; display: inline-flex; align-items: center; gap: calc(var(--mark) * 0.24); color: inherit; text-decoration: none; }
.brand__mark { flex: none; width: var(--mark); height: var(--mark); }
.brand__text { display: grid; grid-template-columns: max-content; row-gap: calc(var(--tag) * 0.6); }
.brand__name { display: block; width: 0; min-width: 100%; height: auto; }
.brand__tag {
  font-size: var(--tag); font-weight: 600; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
  color: var(--slate);
}
[data-theme="dark"] .brand__tag { color: var(--brand-tag-dark); }
/* Măștile rândurilor de titlu: spațiul suplimentar păstrează diacriticele (Î, ș, ț) și codițele în mască */
.ln {
  display: block; overflow: hidden;
  padding: 0.16em 0.06em 0.16em; margin: -0.16em -0.06em -0.16em;
}
.ln__in { display: inline-block; }
.ln--brand { color: var(--brand); }
/* Cuvintele enunțurilor (create de script doar când grupul urmează să apară) */
.w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: 0.14em 0.04em 0.2em; margin: -0.14em -0.04em -0.2em;
}
.w__in { display: inline-block; }

/* ---------- Butoane ---------- */
.btn {
  --s: 1;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 28px; border-radius: 999px; border: 1.5px solid transparent;
  background: transparent; color: inherit;
  font: 600 16px/1.3 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transform: scale(var(--s));
  transition: transform 240ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease);
}
.btn:active { --s: 0.97; transition-duration: 200ms, 300ms, 300ms, 300ms; }
.btn .ic { font-size: 20px; }
.btn--sm { min-height: 44px; padding: 0 16px; gap: 8px; font-size: 15px; }
.btn--sm .ic { font-size: 18px; }
/* Butonul principal e Albastru Încredere, cum cere brandbook-ul; Miere rămâne pentru linia aurie */
.btn--primary { background: var(--brand); color: var(--on-dark); }
.btn--primary:focus-visible { background: var(--brand-hover); }
/* Butonul Miere: doar „Consultație gratuită”, în hero și în banda de la final; textul e navy, albul pe Miere nu se citește */
.btn--honey { background: var(--accent); color: var(--ink); }
.btn--honey:focus-visible { background: var(--accent-hover); }
.btn--dot { padding: 0 8px 0 28px; gap: 16px; }
.btn__dot {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  transition: transform 240ms var(--ease);
}
.btn__dot .ic { font-size: 20px; }
/* Butonul secundar se umple de la stânga și se golește spre dreapta; aceeași regulă pe fundal deschis și închis */
.btn--ghost { --fill: var(--ink); --fill-ink: var(--on-dark); border-color: var(--ink); color: var(--ink); }
[data-theme="dark"] .btn--ghost { --fill: var(--veil-14); --fill-ink: var(--on-dark); border-color: var(--veil-70); color: var(--on-dark); }
.btn--ghost::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--fill); transform: scaleX(0); transform-origin: right center;
  transition: transform 420ms var(--ease-expo);
}
.btn--ghost:focus-visible { color: var(--fill-ink); }
.btn--ghost:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

/* Săgeata trece prin cerc: iese spre dreapta și reintră din stânga */
@keyframes arrow-through {
  0% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  42% { transform: translateX(18px); opacity: 0; }
  43% { transform: translateX(-18px); opacity: 0; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  100% { transform: none; opacity: 1; }
}
/* Telefonul sună o singură dată */
@keyframes ring {
  0%, 100% { transform: none; }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(3deg); }
}

/* ---------- Bara de anunț ---------- */
.announce { position: relative; background: var(--ink); color: var(--on-dark); }
.announce__list {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 44px; padding-inline: var(--margin);
  font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center;
}
.announce__list li { display: inline-flex; align-items: center; gap: 14px; }
.announce__list li + li::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--mark-dark); }
.announce__list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.announce__list a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Limba site-ului ----------
   Pe desktop: un meniu derulant (<details>, merge și fără script) în bara de anunț a paginii principale,
   în antet pe celelalte pagini și în bara compactă. Pe telefon (în meniu) și în subsol: cele trei coduri, RO · RU · EN,
   limba curentă închisă la culoare, cu linia Miere dedesubt. */
.lang { display: flex; align-items: center; gap: 2px; }
.lang a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px;
  padding-inline: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; text-decoration: none;
  color: var(--ink-soft); transition: color 240ms var(--ease);
}
.lang a::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 2px; background: var(--accent);
  transform: scaleX(0); transition: transform 300ms var(--ease);
}
.lang a[aria-current] { color: var(--ink); }
.lang a[aria-current]::after { transform: scaleX(1); }
.lang a:focus-visible { color: var(--ink); }
[data-theme="dark"] .lang a, .lang--menu a, .lang--footer a { color: var(--on-dark-label); }
[data-theme="dark"] .lang a[aria-current], .lang--menu a[aria-current], .lang--footer a[aria-current] { color: var(--on-dark); }
/* Meniul derulant: butonul arată globul și limba curentă; lista se deschide sub el, pe hârtie albă */
.langdd { position: relative; flex: none; }
.langdd > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 10px; border-radius: 999px;
  list-style: none; cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink); transition: background-color 240ms var(--ease);
}
.langdd > summary::-webkit-details-marker { display: none; }
.langdd > summary .icon-globe { font-size: 17px; color: var(--brand); }
.langdd__chev { font-size: 15px; transition: transform 300ms var(--ease); }
.langdd[open] .langdd__chev { transform: rotate(180deg); }
.langdd > summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.langdd__list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 196px; padding: 6px;
  border: 1px solid var(--divider); border-radius: 14px; background: var(--white);
  box-shadow: 0 24px 48px -24px var(--ink-35);
}
.langdd__list a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding-inline: 12px; border-radius: 9px;
  font-size: 15px; font-weight: 500; letter-spacing: 0; text-decoration: none; color: var(--ink);
  transition: background-color 200ms var(--ease);
}
.langdd__code { width: 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--slate); }
.langdd__name { flex: 1; }
.langdd__on { font-size: 17px; color: var(--brand); visibility: hidden; }
.langdd__list a[aria-current] { font-weight: 600; }
.langdd__list a[aria-current] .langdd__code { color: var(--brand); }
.langdd__list a[aria-current] .langdd__on { visibility: visible; }
.langdd__list a:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.langdd__list a:active { background: var(--surface-alt); }
/* În bara de anunț: textul și globul pe navy, lipit de marginea din dreapta */
.langdd--announce { position: absolute; top: 0; right: calc(var(--margin) - 10px); }
.langdd--announce > summary { color: var(--on-dark); }
.langdd--announce > summary .icon-globe { color: var(--mark-dark); }
.langdd--announce > summary:focus-visible { outline-color: var(--mark-dark); }
/* În antetul paginilor fără bară de anunț: dreapta sus, aliniat cu logo-ul */
.langdd--masthead { position: absolute; top: 24px; right: calc(var(--margin) - 10px); }
/* În bara compactă: navigația rămâne la mijloc, limba stă lângă telefon */
.langdd--bar { margin-left: auto; }
.bar__inner > .bar__nav { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .langdd[open] .langdd__list { animation: langdd-in 240ms var(--ease) both; }
}
@keyframes langdd-in { from { opacity: 0; transform: translateY(-6px); } }
.lang--menu { gap: 8px; padding: 16px var(--margin) 0; }
.lang--menu a { flex: 1; min-height: 44px; border: 1px solid var(--dark-line); border-radius: 999px; font-size: 14px; }
.lang--menu a::after { display: none; }
.lang--menu a[aria-current] { border-color: var(--mark-dark); color: var(--mark-dark); }
.lang--footer { justify-content: flex-end; margin-top: 4px; margin-right: -6px; }
.lang--footer a { min-height: 44px; }

/* ---------- Antet centrat ---------- */
.masthead {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px var(--margin) 8px;
  view-transition-name: masthead;
}
.masthead__brand { min-height: 44px; }
.masthead__nav ul { display: flex; justify-content: center; gap: 36px; }
.masthead__nav a {
  position: relative; display: flex; align-items: center; min-height: 44px; padding-inline: 4px;
  font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
/* Sublinierea intră de la stânga și iese spre dreapta, ca o linie trasă dintr-o mișcare */
.masthead__nav a::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 8px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform 300ms var(--ease);
}
.masthead__nav a:focus-visible::after, .masthead__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.masthead--dark { color: var(--on-dark); }
.masthead--dark a[aria-current="page"]::after { background: var(--mark-dark); }

/* ---------- Bara compactă fixă ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  background: var(--canvas); color: var(--ink); border-bottom: 1px solid var(--divider);
  transform: translateY(-101%); visibility: hidden;
  transition: transform 260ms var(--ease-expo), visibility 0s linear 260ms;
}
.bar.is-armed { visibility: visible; transition: transform 260ms var(--ease-expo), visibility 0s; }
.bar.is-shown { transform: none; }
.bar--dark { background: var(--ink); color: var(--on-dark); border-bottom-color: var(--dark-line); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
/* În bara compactă rămân doar monograma și numele */
.bar__brand { --mark: 34px; min-height: 44px; flex: none; }
.bar__brand .brand__name { width: auto; min-width: 0; height: 17px; }
.bar__nav { position: relative; }
.bar__nav ul { display: flex; gap: 32px; }
.bar__nav a {
  position: relative; display: flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
/* Sublinierea de hover e mai discretă decât indicatorul secțiunii curente, care alunecă peste ea */
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor; opacity: 0.3;
  transform: scaleX(0); transform-origin: right center; transition: transform 300ms var(--ease);
}
.bar__indicator {
  position: absolute; left: 0; bottom: 4px; width: 100px; height: 2px;
  background: var(--ink); transform-origin: left center; transform: scaleX(0); opacity: 0;
  transition: transform 280ms var(--ease), opacity 200ms var(--ease);
}
.bar--dark .bar__indicator { background: var(--mark-dark); }
.bar__nav.has-active .bar__indicator { opacity: 1; }
.bar__phone { flex: none; min-height: 44px; padding: 0 18px 0 14px; gap: 10px; font-size: 15px; }
.bar__phone .ic { font-size: 18px; }
.bar__icon {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; text-decoration: none; cursor: pointer;
}
.bar__icon .ic { font-size: 24px; }
.bar__call { background: var(--surface-alt); color: var(--ink); }
.bar--dark .bar__call { background: var(--veil-10); color: var(--on-dark); }
/* Cele trei linii se strâng în mijloc și se rotesc într-un X; la închidere fac drumul invers */
.bar__toggle { position: relative; }
svg.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bar__burger line {
  transform-box: view-box; transform-origin: 12px 12px;
  transition: transform 500ms var(--ease), opacity 300ms var(--ease);
}
.bar__toggle[aria-expanded="true"] .bar__burger line:nth-child(1) { transform: rotate(45deg) translateY(6px); }
.bar__toggle[aria-expanded="true"] .bar__burger line:nth-child(2) { transform: scaleX(0); opacity: 0; }
.bar__toggle[aria-expanded="true"] .bar__burger line:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }
/* Pe telefon, receptorul sună o dată de fiecare dată când bara intră în ecran */
@media (prefers-reduced-motion: no-preference) {
  .bar.is-shown .bar__call .ic { animation: ring 700ms var(--ease) 360ms both; }
}

/* Meniul mobil: panou lateral navy sub bara compactă; pagina rămâne vizibilă în stânga, estompată */
.menu {
  position: fixed; top: var(--bar-h); right: 0; bottom: 0; z-index: 59; width: min(86vw, 360px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink); color: var(--on-dark); border-top: 1px solid var(--dark-line);
  box-shadow: -16px 0 40px -16px var(--ink-35);
}
html::after {
  content: ""; position: fixed; inset: var(--bar-h) 0 0 0; z-index: 58; pointer-events: none;
  background: var(--ink-35); opacity: 0; transition: opacity 500ms var(--ease);
}
html.menu-lock::after { opacity: 1; }
.menu[hidden] { display: none; }
.menu { display: flex; flex-direction: column; }
.menu > ul { padding: 16px var(--margin) 32px; }
.menu > ul > li > a:not(.btn) {
  position: relative; display: flex; align-items: center; min-height: 72px;
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-decoration: none;
  border-bottom: 1px solid var(--dark-line);
  transition: color 300ms var(--ease);
}
/* Sub deget, rândul se aprinde și linia lui de registru se trage de la stânga */
.menu > ul > li > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--mark-dark);
  transform: scaleX(0); transform-origin: right center; transition: transform 500ms var(--ease);
}
.menu > ul > li > a:not(.btn):active, .menu > ul > li > a:not(.btn):focus-visible { color: var(--mark-dark); }
.menu > ul > li > a:not(.btn):active::after, .menu > ul > li > a:not(.btn):focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.menu .btn { width: 100%; justify-content: space-between; margin-top: 32px; }
/* Jos în meniu, în zona degetului mare: telefonul și programul, cele trei aplicații ca butoane cu logo,
   e-mailul, apoi politica de confidențialitate și firma */
.menu__foot {
  margin-top: auto; padding: 24px var(--margin) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--dark-line);
}
.menu__phone {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; font-variant-numeric: tabular-nums;
}
.menu__phone .ic { font-size: 22px; color: var(--mark-dark); }
.menu__hours { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--on-dark-muted); }
.menu__apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.menu__apps a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px;
  border: 1px solid var(--dark-line); border-radius: 14px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--on-dark);
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease), transform 240ms var(--ease);
}
.menu__app-ic { width: 24px; height: 24px; fill: currentColor; transition: color 300ms var(--ease); }
.menu__apps a:active, .menu__apps a:focus-visible { border-color: var(--mark-dark); background: var(--veil-10); }
.menu__apps a:active .menu__app-ic, .menu__apps a:focus-visible .menu__app-ic { color: var(--mark-dark); }
.menu__mail {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px;
  font-size: 15px; font-weight: 500; color: var(--on-dark); text-decoration: none; overflow-wrap: anywhere;
}
.menu__mail .ic { font-size: 20px; color: var(--mark-dark); }
.menu__mail:active span, .menu__mail:focus-visible span { text-decoration: underline; text-underline-offset: 4px; }
.menu__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--dark-line); font-size: 13px; line-height: 1.4; color: var(--on-dark-muted);
}
.menu__legal a { display: inline-flex; align-items: center; min-height: 32px; color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--dark-line); text-underline-offset: 4px; }
.menu__legal a[aria-current] { text-decoration-color: var(--mark-dark); }
.menu__legal span { display: inline-flex; align-items: center; min-height: 32px; }
/* Ecrane scunde: rândurile meniului se strâng, ca totul să încapă fără derulare */
@media (max-height: 760px) {
  .menu > ul { padding-block: 4px 20px; }
  .menu > ul > li > a:not(.btn) { min-height: 58px; font-size: 24px; }
  .menu .btn { margin-top: 20px; }
  .menu__foot { padding-top: 16px; }
  .menu__apps { margin-top: 10px; }
  .menu__apps a { min-height: 58px; }
  .menu__mail { margin-top: 6px; }
}
@media (max-height: 660px) {
  .menu > ul > li > a:not(.btn) { min-height: 52px; }
  .menu__apps a { min-height: 54px; }
  .menu__legal { margin-top: 6px; padding-top: 8px; }
}


/* ======================================================
   HERO
   ====================================================== */
/* --title: mărimea titlului, limitată și de înălțimea ecranului.
   --row: înălțimea unui rând din foaia de registru; crește cu ecranul, ca foaia să încapă sub butoane. */
.hero {
  --title: clamp(48px, min(7.6vw, 11dvh), 96px);
  --row: clamp(34px, 4.4dvh, 48px);
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--head-h));
  padding-block: 12px 24px;
}

/* Fundal: trei hexagoane în contur, ca pe coperta brandbook-ului. Se desenează la intrare, apoi plutesc și se rotesc
   foarte încet (vezi MIȘCAREA FUNDALULUI); fără mișcare, stau pe loc. */
.hero__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.hex { position: absolute; fill: none; stroke-linejoin: round; }
.hex polygon { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Hexagonul mare, în dreapta sus, peste marginea paginii; cel mediu, în stânga, mai jos; cel mic, lângă el, ca o celulă de fagure */
.hex--a { top: -10%; right: -26%; width: min(46vw, 680px); stroke: var(--brand-2); stroke-width: 0.45; opacity: 0.24; }
.hex--b { left: -5%; bottom: 10%; width: min(24vw, 320px); stroke: var(--divider); stroke-width: 1.2; opacity: 0.8; }
/* Hexagonul mic e singurul în Miere: o celulă aurie în fagurele albastru */
.hex--c { left: 13%; bottom: 40%; width: min(6.5vw, 96px); stroke: var(--accent); stroke-width: 2.4; opacity: 0.7; }
/* Jumătățile de pe margini: una sus în stânga, una jos în dreapta, ca fagurele să continue dincolo de ecran */
.hex--d { left: max(-5vw, -72px); top: 6%; width: min(10vw, 144px); stroke: var(--brand-2); stroke-width: 1.4; opacity: 0.3; }
.hex--e { right: max(-4.5vw, -64px); bottom: 5%; width: min(9vw, 128px); stroke: var(--divider); stroke-width: 1.6; opacity: 0.9; }
.hero__inner { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero__title {
  position: relative;
  font-size: var(--title); font-weight: 700; line-height: 0.92; letter-spacing: -0.035em;
  text-align: center;
}
/* Linia aurie de sub titlul principal: singurul accent Miere al primului ecran */
.hero__rule { margin: clamp(20px, 2vw, 32px) auto 0; transform-origin: center; }
/* Ce face, spus direct sub slogan: titlul dă tonul, rândul acesta dă oferta */
.hero__lead {
  max-width: 34em; margin-top: clamp(16px, 1.6vw, 24px);
  font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.4; color: var(--slate);
  text-align: center; text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 28px; }
.hero__trust { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--slate); text-align: center; }

/* Foaia de registru: serviciile pe rânduri bifate, închise de dubla linie de total.
   Desenată în cod (fără imagini), pe axa paginii, unde stătea portretul. E o ilustrație: cititorul de ecran o sare. */
.hero__stage { width: 100%; margin-top: auto; padding-top: 24px; display: flex; justify-content: center; }
.sheet {
  --name: 11.5em;
  position: relative; width: min(100%, 720px);
  padding: 12px 28px 16px; border: 1px solid var(--divider); border-radius: 6px;
  background: var(--white); box-shadow: 0 28px 56px -40px var(--ink-35);
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.3; text-align: left;
}
/* Marginea hârtiei de registru: două linii verticale între nume și notă, în Albastru Claritate */
.sheet::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(28px + var(--name) + 9px); width: 6px;
  border-inline: 1.5px solid var(--margin-line); pointer-events: none;
}
.sheet__head, .sheet__row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr) 24px; column-gap: 24px; align-items: center; }
/* Mărimea mică stă pe etichete, nu pe rând: coloana numelui (în em) trebuie să aibă aceeași lățime ca în rândurile de dedesubt */
.sheet__head { padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.sheet__head span { font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.sheet__row { min-height: var(--row); padding-block: 4px; border-bottom: 1px solid var(--divider); }
.sheet__name { position: relative; font-weight: 600; letter-spacing: -0.01em; transition: color 300ms var(--ease); }
/* Descrierea scurtă a serviciului: există doar pentru cursorul fin (vezi CURSOR FIN); pe atingere foaia rămâne simplă */
.sheet__tip { display: none; }
.sheet__note { font-size: 0.94em; color: var(--slate); }
.sheet__tick { width: 22px; height: 22px; justify-self: end; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sheet__tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sheet__total { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 12px; }
.sheet__sum { font-size: 1.15em; font-weight: 700; letter-spacing: -0.015em; }
/* Dubla subliniere a totalului, ca în contabilitate; navy, ca linia aurie să rămână una singură pe ecran */
.sheet__dbl { width: 38%; height: 8px; border-block: 2.5px solid var(--ink); transform-origin: left center; }

/* Laptopuri (late și scunde, ex. 1366×768): titlul și acțiunile trec în stânga, foaia ocupă înălțimea în dreapta */
@media (min-width: 1024px) and (max-height: 980px) {
  .hero {
    --title: clamp(44px, min(4.6vw, 9dvh), 84px);
    --row: clamp(38px, 6dvh, 52px);
    padding-block: 8px 32px;
  }
  .hero__inner {
    display: grid; align-content: center; align-items: start;
    grid-template-columns: minmax(0, 1fr) min(42%, 560px);
    grid-template-areas: "title sheet" "rule sheet" "lead sheet" "actions sheet" "trust sheet";
    column-gap: clamp(40px, 5vw, 96px);
  }
  .hero__title { grid-area: title; text-align: left; align-self: end; }
  .hero__rule { grid-area: rule; margin-left: 0; transform-origin: left center; }
  .hero__lead { grid-area: lead; text-align: left; }
  .hero__actions { grid-area: actions; justify-content: flex-start; }
  .hero__trust { grid-area: trust; text-align: left; }
  .hero__stage { grid-area: sheet; align-self: center; margin: 0; padding: 0; }
  .sheet { --name: 10.5em; width: 100%; padding-inline: 24px; }
  /* Hexagonul mic trece în culoarul dintre text și foaie, departe de titlu */
  .hex--c { left: auto; right: 44%; bottom: auto; top: 12%; }
  .sheet::before { left: calc(24px + var(--name) + 9px); }
}
/* Laptopuri înguste (1024–1199px): coloana de note nu mai încape lângă nume; rămân serviciile, bifele și totalul */
@media (min-width: 1024px) and (max-width: 1199px) and (max-height: 980px) {
  .sheet__note, .sheet__head span:nth-child(2) { display: none; }
  /* Fără coloana de note, marginea trece la stânga hârtiei */
  .sheet::before { left: 10px; }
  .sheet__head, .sheet__row { grid-template-columns: minmax(0, 1fr) 24px; }
}

/* ======================================================
   DESPRE
   ====================================================== */
.about { padding-block: clamp(80px, 8vw, 128px) clamp(80px, 9vw, 144px); }
.about__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.about__statement {
  max-width: 27em; margin-top: clamp(24px, 2.4vw, 36px);
  font-size: clamp(24px, 2.3vw, 38px); font-weight: 500; line-height: 1.3; letter-spacing: -0.012em;
  text-wrap: balance;
}
/* Registrul cifrelor: trei celule între linii fine, cifre tabulare, „+” de accent */
.ledger {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1240px; margin: clamp(56px, 6vw, 96px) auto 0;
  border-block: 1px solid var(--divider);
}
.ledger__row { display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 2.8vw, 44px) clamp(20px, 2.6vw, 40px); }
.ledger__row:first-child { padding-left: 0; }
.ledger__row + .ledger__row { border-left: 1px solid var(--divider); }
.ledger__fig {
  font-size: clamp(52px, 5.4vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -0.035em;
  /* La mărimea de afișaj, cifrele proporționale: cele tabulare lasă goluri în jurul lui „1” */
  font-variant-numeric: lining-nums proportional-nums; color: var(--ink); white-space: nowrap;
  transition: color 300ms var(--ease), transform 500ms var(--ease);
}
/* „+” e un semn mic de Miere în a doua secțiune, la mărimea cifrei */
.ledger__plus { display: inline-block; margin-left: 0.04em; color: var(--accent); transition: transform 500ms var(--ease); }
.ledger__text { max-width: 20em; margin: 0; font-size: 16px; line-height: 1.45; color: var(--slate); text-wrap: balance; }

/* Cele trei sectoare stau exact sub cele trei celule ale registrului */
.sectors {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 0;
  max-width: 1240px; margin: clamp(40px, 4vw, 64px) auto 0;
}
.sectors .sector { padding-inline: clamp(20px, 2.6vw, 40px); }
.sectors .sector:first-child { padding-left: 0; }
.sector { display: flex; align-items: center; gap: 18px; }
.sector__icon {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease);
}
.sector__icon .ic { font-size: 22px; transition: transform 500ms var(--ease); }
.sector__text { display: block; min-width: 0; }
.sector__title { display: block; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.sector__desc { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--slate); }

/* ======================================================
   SERVICII
   ====================================================== */
.todo { padding-block: var(--section-pad); }
/* Titlul și legenda pe același rând, închise de o linie de registru */
.todo__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24em); align-items: end; gap: 20px 48px;
  padding-bottom: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--divider);
}
.todo__title { font-size: var(--h2); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.todo__caption { max-width: 24em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--slate); }
.todo__list { container-type: inline-size; }
/* Fiecare serviciu e un rând de registru */
.todo__item { padding-block: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--divider); }
/* Numele real al serviciului e eticheta rândului: destul de mare cât să se citească de departe,
   destul de mic cât detaliul din pătrat să rămână pe primul loc */
.todo__name {
  display: block; font-size: clamp(26px, 7.4cqi, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
  color: var(--ink); transition: color 240ms var(--ease);
}
.todo__mask {
  display: block; overflow: hidden;
  padding: 0.12em 0.06em 0.16em; margin: -0.12em -0.06em -0.16em;
}
.todo__name-in { display: inline-block; }
.todo__detail { max-width: 40em; margin-top: 14px; }
.todo__icon { display: none; }
/* Promisiunea serviciului, spusă ca rezultat pentru client; în pătrat devine titlul detaliului */
.todo__lead { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.todo__text { max-width: 52ch; margin-top: 8px; font-size: 17px; line-height: 1.55; color: var(--slate); }
.todo__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px;
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.todo__link span {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--ink-35); transition: text-decoration-color 300ms var(--ease);
}
.todo__link .ic { font-size: 18px; }
.todo__link:focus-visible span { text-decoration-color: currentColor; }
.todo__aside { display: none; }

/* Lista de file: doar pe ecrane de la 768px cu cursor fin */
.todo.is-tabs .todo__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head head" "list aside"; grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 96px); align-items: start;
}
.todo.is-tabs .todo__head { grid-area: head; }
.todo.is-tabs .todo__list { grid-area: list; }
/* Pătratul ține înălțimea listei: detaliul stă lângă toate cele cinci nume, nu sub ele */
.todo.is-tabs .todo__aside { grid-area: aside; display: block; align-self: stretch; margin-top: clamp(16px, 1.6vw, 24px); }
.todo.is-tabs .todo__item { padding-block: clamp(10px, 1.1vw, 16px); }
/* Fila activă: numele se retrage puțin spre dreapta și se aprinde; restul rămân lizibile, doar mai discrete */
.todo__tab {
  position: relative; display: block; width: 100%; margin: 0; padding: 0.07em 0; border: 0; border-radius: 6px;
  background: none; text-align: left; cursor: pointer; color: var(--ink-soft);
}
.todo__tab .todo__mask { transition: transform 420ms var(--ease); }
.todo__tab[aria-selected="true"] { color: var(--ink); }
.todo__tab[aria-selected="true"] .todo__mask { transform: translateX(0.36em); }
/* Săgeata spre pătrat: semnul că rândul se poate alege. Fila activă o poartă, celelalte o arată la hover și la focus */
.todo__tab { padding-right: 56px; }
.todo__go {
  position: absolute; top: 50%; right: 4px; font-size: 28px; color: var(--ink);
  opacity: 0; transform: translate(-10px, -50%);
  transition: opacity 240ms var(--ease), transform 320ms var(--ease), color 240ms var(--ease);
}
.todo__tab[aria-selected="true"] .todo__go { opacity: 1; transform: translate(0, -50%); }
.todo__tab:focus-visible .todo__go { opacity: 1; transform: translate(0, -50%); }
/* Pătratul de detaliu poartă sus un cotor Miere de 28px, aliniat cu textul, ca la coloanele din panoul navy */
.todo__square {
  --pad: clamp(24px, 2.8vw, 40px);
  position: relative; display: grid; height: 100%; min-height: 360px;
  padding: var(--pad); color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) var(--pad) 0 / 28px 4px no-repeat, var(--surface-alt);
}
.todo__square > .todo__detail { grid-area: 1 / 1; display: flex; flex-direction: column; max-width: none; margin: 0; }
.todo__square .todo__icon { display: inline-flex; font-size: 40px; }
.todo__square .todo__lead { margin-top: clamp(20px, 2vw, 28px); font-size: clamp(24px, 2.3vw, 34px); font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; }
.todo__square .todo__text { margin-top: 14px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--slate); }
.todo__square .todo__link { margin-top: auto; padding-top: 16px; }
.todo__detail.is-off { visibility: hidden; }

/* Fără file (telefon, tabletă): rândul ajuns la mijlocul ecranului se aprinde ca fila activă de pe desktop.
   Numele se retrage puțin spre dreapta, celelalte nume rămân lizibile, doar mai discrete. */
.todo--spy .todo__name { position: relative; color: var(--ink-soft); }
.todo--spy .todo__mask { transition: transform 500ms var(--ease); }
.todo--spy .is-active .todo__name { color: var(--ink); }
.todo--spy .is-active .todo__mask { transform: translateX(0.36em); }
.todo--spy .todo__link .ic { transition: transform 500ms var(--ease); }
.todo--spy .is-active .todo__link .ic { transform: translateX(4px); }

/* ======================================================
   SPECIALIZĂRI
   ====================================================== */
.spec { padding-inline: var(--inset); }
.spec__panel {
  position: relative; isolation: isolate;
  border-radius: 28px; background: var(--ink); color: var(--on-dark);
  padding-block: clamp(64px, 8vw, 128px) clamp(64px, 8.5vw, 136px);
}
/* Hexagonul panoului: în golul dintre titlu și introducere, tăiat de marginea de sus; clip, nu hidden, ca să nu devină container de scroll */
.spec__bg { position: absolute; inset: 0; z-index: -1; overflow: clip; border-radius: inherit; pointer-events: none; }
/* Pe navy, Miere e culoarea detaliului: hexagonul panoului e auriu, la intensitate mică */
.hex--spec { top: -30%; left: 38%; width: min(24vw, 360px); stroke: var(--accent); stroke-width: 0.8; opacity: 0.4; }
.spec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); align-items: start; column-gap: 48px; }
.spec__title { font-size: var(--h2); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.spec__aside { padding-top: clamp(4px, 2.6vw, 40px); }
.spec__aside p { font-size: 17px; line-height: 1.5; color: var(--on-dark-muted); }
.spec__aside .btn { margin-top: 24px; }
/* Patru coloane de registru: linie fină deasupra, titlul sus, descrierea dedesubt; fără cutii și fără iconițe */
.spec__cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 5.4vw, 80px); border-top: 1px solid var(--dark-line);
}
.scard { position: relative; display: flex; flex-direction: column; padding-top: clamp(24px, 2.4vw, 36px); }
/* Linia aurie, detaliul de accent pe navy, marchează începutul fiecărei coloane.
   Stă decupată la 28px; la hover (sau la scroll, pe ecrane înguste) se trage pe toată lățimea coloanei. */
.scard::before {
  content: ""; position: absolute; top: -2.5px; left: 0; width: 100%; height: 4px; background: var(--mark-dark);
  clip-path: inset(0 calc(100% - 28px) 0 0); transition: clip-path 500ms var(--ease);
}
.scard__title {
  font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;
  hyphens: auto; overflow-wrap: break-word; text-wrap: balance;
}
.scard__desc { margin-top: 14px; font-size: 17px; line-height: 1.5; color: var(--on-dark-muted); }

/* ======================================================
   MOD DE LUCRU
   ====================================================== */
.steps { padding-block: var(--section-pad); }
/* Rând de registru: eticheta în coloana îngustă, enunțul în cea lată; nicio jumătate goală */
.steps__intro {
  display: grid; grid-template-columns: minmax(0, 33.5fr) minmax(0, 66.5fr); align-items: start;
}
.steps__intro .label { margin-top: 0.7em; }
.steps__statement {
  max-width: 24em;
  font-size: clamp(24px, 2.4vw, 42px); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance;
}
.steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(64px, 8vw, 128px); }
/* Fiecare pas începe pe o linie de registru; numerele arată ordinea, deci rămân */
.step { position: relative; padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--divider); }
/* Linia albastră a pasului: ascunsă, se trage peste linia de registru la hover */
.step::before {
  content: ""; position: absolute; top: -2.5px; left: 0; right: 0; height: 4px; background: var(--brand);
  clip-path: inset(0 100% 0 0); transition: clip-path 500ms var(--ease);
}
.step__num {
  display: block; overflow: hidden;
  padding: 0.1em 0.04em 0.12em; margin: -0.1em -0.04em -0.12em;
}
.step__num-in {
  display: inline-block; font-size: clamp(44px, 4.3vw, 78px); font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; transition: color 300ms var(--ease);
}
.step__name { margin-top: 18px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.step__desc { max-width: 26ch; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--slate); }

/* ======================================================
   ÎNTREBĂRI
   ====================================================== */
.faq { padding-block: var(--section-pad); }
.faq__grid {
  display: grid; grid-template-columns: minmax(0, 42.5fr) minmax(0, 52.5fr); grid-template-rows: auto 1fr;
  column-gap: 5%;
}
/* Titlul stă fixat cât se citesc răspunsurile, ca să nu rămână o coloană goală */
.faq__head { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--bar-h) + 40px); }
.faq__list { grid-column: 2; grid-row: 1 / span 2; }
.faq__title { font-size: var(--h2); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.faq__rule { display: none; }
.faq__intro { max-width: 30em; margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--slate); }
/* Când răspunsul lipsește: pasul următor, direct lângă întrebări */
.faq__ask { max-width: 30em; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--divider); font-size: 17px; line-height: 1.6; color: var(--slate); }
.faq__ask a {
  display: inline-block; padding-block: 10px; margin-block: -10px;
  font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: var(--ink-35); transition: text-decoration-color 300ms var(--ease);
}
.faq__ask a:focus-visible { text-decoration-color: currentColor; }

.faq__item { border-bottom: 1px solid var(--divider); }
.faq__btn {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "text icon";
  align-items: center; column-gap: 24px; width: 100%; min-height: 88px; padding: 20px 0;
  border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.faq__text { grid-area: text; font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; line-height: 1.3; transition: color 300ms var(--ease); }
.faq__icon {
  grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-alt); color: var(--ink);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.faq__icon .ic { font-size: 20px; transition: transform 280ms var(--ease); }
.faq__btn[aria-expanded="true"] .faq__icon { background: var(--ink); color: var(--on-dark); }
.faq__btn[aria-expanded="true"] .faq__icon .ic { transform: rotate(180deg); }
.faq__panel { overflow: hidden; }
.faq__panel p, .values { padding: 0 68px 24px 0; font-size: 17px; line-height: 1.55; color: var(--slate); }
.values li + li { margin-top: 6px; }
.values strong { font-weight: 600; color: var(--ink); }


/* ======================================================
   CONTACT
   ====================================================== */
.cta { position: relative; isolation: isolate; background: var(--surface-alt); padding-block: clamp(96px, 11vw, 184px) clamp(88px, 9.5vw, 152px); }
/* Fundalul benzii: un hexagon jos în dreapta, tăiat de marginea ecranului, în pereche cu semnul din stânga */
.cta__bg { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.hex--cta-e { right: max(-5vw, -80px); bottom: -9%; width: min(17vw, 260px); stroke: var(--brand-2); stroke-width: 1; opacity: 0.4; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 33.5fr) minmax(0, 57fr) minmax(0, 9.5fr); }
/* Programul închide banda, sub acțiuni, pe coloana textului; numărul nu se mai repetă aici (e în bară, în antet și în butonul de apel) */
.cta__sign { grid-column: 2; grid-row: 2; margin-top: 28px; }
/* Coloana din stânga poartă semnul brandului: hexagonul mare în Albastru Claritate și o celulă Miere, ca un fagure */
.cta__mark { grid-column: 1; grid-row: 1 / span 2; position: relative; pointer-events: none; }
.hex--cta { left: 2%; top: -6%; width: min(20vw, 288px); stroke: var(--brand-2); stroke-width: 0.8; opacity: 0.5; }
.hex--cta-c { left: calc(2% + min(18.6vw, 268px)); top: calc(-6% + min(12.4vw, 179px)); width: min(5.2vw, 75px); stroke: var(--accent); stroke-width: 2.4; opacity: 0.8; }
.cta__hours { font-size: 15px; line-height: 1.4; color: var(--slate); font-variant-numeric: tabular-nums; }
.cta__body { grid-column: 2; }
.cta__title { font-size: var(--h2); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.cta__text { max-width: 40em; margin-top: clamp(20px, 2vw, 32px); font-size: clamp(17px, 1.4vw, 24px); line-height: 1.5; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(28px, 3vw, 48px); }
/* Pe atingere: apelul e acțiunea principală, iar pagina de contact rămâne la un pas. Cu mouse-ul: formularul. */
.cta__form { display: none; }
.cta__more { margin-top: 16px; }
/* Aplicațiile, ca butoane cu logo, chiar sub acțiune: textul le promite, deci stau aici, nu o pagină mai departe */
.cta__apps { margin-top: clamp(24px, 2.4vw, 32px); }
.cta__apps-label { font-size: 15px; line-height: 1.4; color: var(--slate); }
.cta__apps ul { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.cta__apps a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px;
  border: 1px solid var(--divider); border-radius: 999px; background: var(--white);
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); text-decoration: none;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease), transform 240ms var(--ease);
}
.cta__app-ic { flex: none; width: 20px; height: 20px; fill: var(--brand); }
.cta__apps a:focus-visible { border-color: var(--brand); outline: 3px solid var(--brand); outline-offset: 2px; }
.cta__apps a:active { background: var(--surface-press); transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .cta__call, .cta__more { display: none; }
  .cta__form { display: inline-flex; }
  .cta__apps a:hover { border-color: var(--brand); }
}
.btn--ghost .icon-arrow-right { margin-right: -4px; }

/* ======================================================
   SUBSOL
   ====================================================== */
.footer { background: var(--ink); color: var(--on-dark); padding-block: clamp(72px, 7.5vw, 120px) clamp(28px, 3vw, 44px); }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.footer__about { flex: 0 1 470px; }
.footer__brand { --mark: 48px; min-height: 44px; }
.footer__lead { max-width: 30em; margin-top: 18px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--on-dark-muted); }
.footer__mail {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  font-size: 17px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: var(--veil-40);
  transition: text-decoration-color 300ms var(--ease);
}
.footer__mail:focus-visible { text-decoration-color: currentColor; }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); column-gap: clamp(32px, 6.4vw, 112px); }
.footer__col li + li { margin-top: 12px; }
.footer__col a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.footer__col a span { position: relative; }
.footer__col a span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform 300ms var(--ease);
}
.footer__col .ic { font-size: 16px; color: var(--mark-dark); }
.footer__col a:focus-visible span::after, .footer__col a[aria-current="page"] span::after { transform: scaleX(1); transform-origin: left center; }

.footer__sign {
  container-type: inline-size;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-top: clamp(72px, 9vw, 144px);
}
/* Semnătura: mai mică decât în varianta anterioară (cel mult aprox. jumătate din lățime) */
.footer__name {
  padding-bottom: 0.18em; color: var(--divider);
  font-size: clamp(44px, 8.5cqi, 120px); font-weight: 700; line-height: 0.85; letter-spacing: -0.04em;
}
.footer__mask {
  display: block; overflow: hidden;
  padding: 0.08em 0.08em 0.22em 0.02em; margin: -0.08em -0.08em -0.22em -0.02em;
}
.footer__name-in { display: block; }
.footer__copy { font-size: 13px; line-height: 1.5; color: var(--on-dark-label); text-align: right; }
.footer__meta { display: flex; flex-direction: column; align-items: flex-end; }
/* Linkul legal: discret ca rândul de copyright, cu aceeași subliniere trasă ca linkurile din subsol */
.footer__legal a {
  display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -12px;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--on-dark-muted); text-decoration: none;
  transition: color 300ms var(--ease);
}
.footer__legal a span { position: relative; }
.footer__legal a span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  opacity: 0.4; transition: opacity 300ms var(--ease);
}
.footer__legal a:focus-visible, .footer__legal a:active, .footer__legal a[aria-current="page"] { color: var(--on-dark); }
.footer__legal a:active span::after, .footer__legal a[aria-current="page"] span::after { opacity: 1; }

/* ======================================================
   CONFIDENȚIALITATE
   ====================================================== */
.legal { padding-block: clamp(40px, 5vw, 80px) var(--section-pad); }
.legal__title { max-width: 14em; font-size: var(--h2); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.legal__lead { max-width: 36em; margin-top: clamp(20px, 2vw, 32px); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--slate); }
.legal .ledger { margin-top: clamp(48px, 5vw, 80px); }
/* Cuprinsul ia coloana îngustă a registrului, textul cea lată, ca la „Mod de lucru” */
.legal__grid {
  display: grid; grid-template-columns: minmax(0, 33.5fr) minmax(0, 66.5fr); align-items: start;
  margin-top: clamp(64px, 7vw, 112px);
}
.legal__toc { position: sticky; top: calc(var(--bar-h) + 40px); padding-right: 32px; }
.legal__toc ol { margin-top: 20px; }
.legal__toc a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px;
  font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); text-decoration: none;
  transition: color 300ms var(--ease), transform 500ms var(--ease);
}
.legal__num { flex: none; width: 2ch; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-soft); transition: color 300ms var(--ease); }
/* Secțiunea citită acum: numărul se aprinde, rândul face un pas spre dreapta */
.legal__toc a[aria-current="true"] { color: var(--ink); transform: translateX(8px); }
.legal__toc a[aria-current="true"] .legal__num { color: var(--ink); }
.legal__toc a:focus-visible, .legal__toc a:active { color: var(--ink); }
.legal__body { min-width: 0; }
.legal__sec { padding-block: clamp(28px, 3vw, 40px); border-top: 1px solid var(--divider); }
.legal__sec:first-child { padding-top: 0; border-top: 0; }
.legal__h { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
/* Măsura de lectură: în Onest, 36em la 17px dau aproximativ 70 de caractere pe rând */
.legal__sec p, .legal__list { max-width: 36em; margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--slate); }
.legal__list li { position: relative; padding-left: 22px; }
.legal__list li + li { margin-top: 10px; }
/* Marcatorul listei: hexagonul mic, în Albastru Încredere */
.legal__list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 12px; height: 12px; background: var(--brand);
  -webkit-mask: var(--hex-outline) center / contain no-repeat; mask: var(--hex-outline) center / contain no-repeat;
}
.legal__sec strong { font-weight: 600; color: var(--ink); }
.legal__sec p a:not(.todo__link) {
  font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: var(--ink-35); transition: text-decoration-color 300ms var(--ease);
}
.legal__sec p a:not(.todo__link):focus-visible, .legal__sec p a:not(.todo__link):active { text-decoration-color: currentColor; }
.legal__back { margin-top: 24px; }
.faq__panel p a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; }

/* ======================================================
   404
   ====================================================== */
.lost {
  position: relative; isolation: isolate;
  display: flex; align-items: center; min-height: calc(100dvh - var(--head-h));
  padding-block: 24px clamp(64px, 8vw, 96px);
}
.lost__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* „404” cu zeroul desenat ca hexagonul mărcii; atins sau apăsat, conturul se redesenează */
.lost__code {
  display: flex; align-items: center; gap: 0.04em;
  font-size: clamp(96px, min(20vw, 22dvh), 224px); font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums; color: var(--ink); user-select: none;
}
.lost__code .ln { display: inline-block; }
.lost__zero { display: inline-block; width: 0.66em; height: 0.66em; margin-inline: 0.04em; }
.lost__ring {
  display: block; width: 100%; height: 100%; background: var(--accent);
  -webkit-mask: var(--hex-outline) center / contain no-repeat, conic-gradient(#000 var(--ring), transparent 0);
  -webkit-mask-composite: source-in;
  mask: var(--hex-outline) center / contain no-repeat, conic-gradient(#000 var(--ring), transparent 0);
  mask-composite: intersect;
}
.lost__title { margin-top: clamp(16px, 2vw, 32px); font-size: var(--h2); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.lost__lead { max-width: 34em; margin-top: clamp(16px, 1.6vw, 24px); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--slate); text-wrap: balance; }
.lost__lead a { font-weight: 600; color: var(--ink); text-underline-offset: 4px; }
.lost__actions { margin-top: 32px; }
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; margin-top: 24px; }
.page--lost .footer { padding-top: clamp(40px, 5vw, 64px); }
.page--lost .footer__sign { margin-top: 0; }

/* ======================================================
   PAGINA DE CONTACT
   ====================================================== */
/* Aceeași pagină deschisă ca restul site-ului: canalele sunt rânduri de registru, formularul stă în panoul navy
   (același tipar ca „Specializări”). Un singur buton plin: apelul. */
.cpage { padding-block: clamp(24px, 3vw, 48px) var(--section-pad); }
.cpage__title { font-size: var(--h2); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; }
.cpage__lead { max-width: 36em; margin-top: clamp(16px, 1.6vw, 24px); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--slate); }

.cpage__grid {
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 54fr); grid-template-areas: "head head" "ways form";
  column-gap: 6%; align-items: start;
}
/* Pe ecrane late învelișul dispare: titlul trece deasupra ambelor coloane */
.cpage__first { display: contents; }
.cpage__head { grid-area: head; margin-bottom: clamp(40px, 4.6vw, 72px); }
.cways { grid-area: ways; }
.cform { grid-area: form; }
.cways { border-top: 1px solid var(--divider); }
.cway {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start;
  padding-block: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid var(--divider);
}
.cway__icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink);
}
.cway__icon .ic { font-size: 24px; }
.cway__title { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.cway__text { max-width: 40ch; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.cway__btn { margin-top: 20px; }
.cway__apps { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 12px; }

.cform {
  position: relative; border-radius: 28px; padding: clamp(24px, 3vw, 48px);
  background: var(--ink); color: var(--on-dark);
}
.cform__title { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.field__hint { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--on-dark-muted); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-label); opacity: 1; }
.cform__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin-top: 16px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { margin-bottom: 6px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--on-dark); transition: color 300ms var(--ease); }
/* Câmpul activ își colorează eticheta în Miere și se luminează ușor */
.field:focus-within label { color: var(--mark-dark); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 44px; margin: 0; padding: 9px 14px;
  font: 400 16px/1.4 var(--font); color: var(--on-dark);
  background: var(--veil-04); border: 1px solid var(--dark-control); border-radius: 12px;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { background: var(--veil-06); }
.field textarea { min-height: 72px; resize: vertical; }
.field__error { margin-top: 4px; font-size: 14px; line-height: 1.3; color: var(--error-dark); }
.field__error:empty { display: none; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer; }
.select select option { color: var(--on-dark); background: var(--ink); }
.select .ic { position: absolute; top: 50%; right: 14px; translate: 0 -50%; font-size: 20px; color: var(--mark-dark); pointer-events: none; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--mark-dark); outline-offset: 2px; border-color: var(--on-dark-muted); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error-dark); }
.cform__submit {
  --s: 1;
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; margin-top: 16px; padding: 0 8px 0 28px;
  border: 0; border-radius: 999px; background: var(--canvas); color: var(--ink);
  font: 600 16px/1.3 var(--font); cursor: pointer;
  transform: scale(var(--s));
  transition: transform 240ms var(--ease), background-color 300ms var(--ease);
}
.cform__submit .btn__dot .ic { font-size: 20px; }
.cform__submit:active { --s: 0.98; transition-duration: 200ms, 300ms; }
.cform__submit:focus-visible { background: var(--white); }
/* Trimiterea în curs: eticheta se schimbă, săgeata devine un cerc care se rotește */
.cform__submit[aria-busy="true"] { cursor: progress; background: var(--surface-alt); }
.cform__submit .icon-loader-circle { display: none; }
.cform__submit[aria-busy="true"] .icon-arrow-right { display: none; }
.cform__submit[aria-busy="true"] .icon-loader-circle { display: inline-flex; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cform__note { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); }
/* Linkurile din text primesc o zonă de atingere de 44px, fără să miște rândul */
.cform__mail {
  display: inline-block; padding-block: 13px; margin-block: -13px;
  font-weight: 500; color: var(--on-dark); text-underline-offset: 3px;
}
.cform__copy {
  margin: -12px -6px; padding: 12px 6px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--mark-dark); text-decoration: underline; text-underline-offset: 3px;
}
.form__status { min-height: 1.4em; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--on-dark-muted); }
.form__status.is-error { color: var(--error-dark); }
.form__status.is-ok {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px;
  border: 1px solid var(--mark-dark-90); border-radius: 14px;
  color: var(--on-dark); font-weight: 500;
}
.form__check { flex: none; width: 32px; height: 32px; fill: none; stroke: var(--mark-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form__check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.form__status .cform__copy { color: var(--mark-dark); }
.form__status a { color: var(--on-dark); text-underline-offset: 3px; }
/* Confirmarea ia locul câmpurilor: bifa, ce urmează, telefonul și drumul înapoi */
.cform__done { margin-top: 20px; padding: clamp(20px, 2vw, 28px); border: 1px solid var(--mark-dark-90); border-radius: 14px; }
.cform__done[hidden] { display: none; }
.cform__done:focus { outline: none; }
.cform__done:focus-visible { outline: 3px solid var(--mark-dark); outline-offset: 3px; }
.cform__done .form__check { width: 40px; height: 40px; }
.cform__done-title { margin-top: 16px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.cform__done-text { max-width: 44ch; margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--on-dark-muted); }
.cform__done-text a { color: var(--on-dark); }
.cform__again {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 20px;
  border: 1.5px solid var(--veil-70); border-radius: 999px; background: transparent; color: var(--on-dark);
  font: 600 15px/1.3 var(--font); cursor: pointer; transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.cform.is-done .cform__fields, .cform.is-done .cform__submit, .cform.is-done .cform__note, .cform.is-done .form__status { display: none; }

/* ======================================================
   INTRAREA PAGINII (stări aplicate înainte de primul paint)
   ====================================================== */
.intro-pending [data-intro="line"] { transform: translateY(calc(100% + 0.25em)); }
.intro-pending [data-intro="rise"] { opacity: 0; transform: translateY(16px); }
.intro-pending [data-intro="left"] { opacity: 0; transform: translateX(-16px); }
.intro-pending [data-intro="right"] { opacity: 0; transform: translateX(16px); }
.intro-pending [data-intro="portrait"] { transform: translateY(40px); }
.intro-pending [data-intro="check"] { stroke-dashoffset: 1; }
.intro-pending [data-intro="trace"] { stroke-dashoffset: 1; }
.intro-pending [data-intro="grow"] { scale: 0.86; }
.intro-pending [data-intro="ring"] { --ring: 0%; }
.intro-pending [data-intro="rule"], .intro-pending [data-intro="draw"] { transform: scaleX(0); }
.intro-pending [data-intro="fade"] { opacity: 0; }
.intro-pending [data-intro="nudge-l"] { opacity: 0; transform: translateX(-8px); }
.intro-pending [data-intro="nudge-r"] { opacity: 0; transform: translateX(8px); }
.intro-pending [data-intro-group][data-anim], .intro-pending [data-intro-group] [data-anim] { opacity: 0; }

/* ======================================================
   CURSOR FIN: răspunsuri la hover (informația rămâne disponibilă și fără ele)
   ====================================================== */
@media (hover: hover) and (pointer: fine) {
  .announce__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .lang a:hover { color: var(--ink); }
  .langdd > summary:hover { background: var(--surface-alt); }
  .langdd--announce > summary:hover { background: var(--veil-10); }
  .langdd__list a:hover { background: var(--surface-alt); }
  [data-theme="dark"] .lang a:hover, .lang--menu a:hover, .lang--footer a:hover { color: var(--on-dark); }
  .lang a:not([aria-current]):hover::after { transform: scaleX(1); }
  .masthead__nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
  .btn--primary:hover { background: var(--brand-hover); }
  .btn--honey:hover { background: var(--accent-hover); }
  .btn--ghost:hover { color: var(--fill-ink); }
  [data-theme="dark"] .btn--ghost:hover { border-color: var(--on-dark); }
  .btn--ghost:hover::before { transform: scaleX(1); transform-origin: left center; }
  .todo__tab:hover { color: var(--ink); }
  .todo__tab:hover .todo__go { opacity: 1; transform: translate(0, -50%); }
  .todo__link:hover span { text-decoration-color: currentColor; }
  /* Cursorul pe numele serviciului deschide o fișă navy cu descrierea scurtă, cu vârful spre nume.
     Primele rânduri o deschid în jos, ultimele două în sus, ca fișa să rămână lângă foaie. */
  .sheet__tip {
    display: block; position: absolute; left: -16px; top: calc(100% + 14px); z-index: 3;
    width: min(320px, 72vw); padding: 14px 18px 15px; border-radius: 10px;
    background: var(--ink);
    color: var(--on-dark-muted); box-shadow: 0 28px 48px -24px var(--ink-35);
    font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; white-space: normal;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(0.96); transform-origin: 32px 0;
    transition: opacity 200ms var(--ease), transform 360ms var(--ease-expo), visibility 0s linear 360ms;
  }
  .sheet__tip::before {
    content: ""; position: absolute; top: -5px; left: 26px; width: 12px; height: 12px; border-radius: 2px;
    background: var(--ink); transform: rotate(45deg);
  }
  .sheet__row:nth-child(n+4) .sheet__tip { top: auto; bottom: calc(100% + 14px); transform: translateY(8px) scale(0.96); transform-origin: 32px 100%; }
  .sheet__row:nth-child(n+4) .sheet__tip::before { top: auto; bottom: -5px; }
  .sheet__name:hover .sheet__tip {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 240ms var(--ease) 60ms, transform 420ms var(--ease-expo) 60ms, visibility 0s;
  }
  .faq__btn:hover .faq__text { color: var(--brand); }
  .faq__ask a:hover { text-decoration-color: currentColor; }
  .faq__btn:hover .faq__icon { background: var(--surface-press); }
  .faq__btn[aria-expanded="true"]:hover .faq__icon { background: var(--brand); }
  .footer__mail:hover { text-decoration-color: currentColor; }
  .footer__col a:hover span::after { transform: scaleX(1); transform-origin: left center; }
  .cform__submit:hover { background: var(--white); }
  .cform__again:hover { border-color: var(--on-dark); background: var(--veil-10); }
  .footer__legal a:hover { color: var(--on-dark); }
  .footer__legal a:hover span::after { opacity: 1; }
  .legal__toc a:hover { color: var(--ink); }
  .legal__sec p a:not(.todo__link):hover { text-decoration-color: currentColor; }
  .field input:hover, .field textarea:hover, .field select:hover { border-color: var(--on-dark-muted); }
}

/* Micro-mișcare la hover: săgeata trece prin cerc, săgețile din text avansează, iconițele externe ies în diagonală,
   telefonul sună o dată, fila de serviciu face un pas spre punctul de accent. Doar cu cursor fin și fără reduced-motion. */
.btn--ghost .icon-arrow-right, .todo__link .ic, .cform__submit .icon-arrow-right,
.footer__col .icon-arrow-up-right {
  transition: transform 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn--dot:not(.btn--call):hover .btn__dot .ic { animation: arrow-through 520ms both; }
  .btn--call:hover .btn__dot .ic { animation: ring 600ms var(--ease) both; }
  .btn--dot:hover .btn__dot { transform: scale(1.06); }
  .btn--ghost:hover .icon-arrow-right,
  .todo__link:hover .ic { transform: translateX(4px); }
  .cform__submit:not([aria-busy="true"]):hover .btn__dot .icon-arrow-right { animation: arrow-through 520ms both; }
  .cform__submit:hover .btn__dot { transform: scale(1.06); }
  .footer__col a:hover .icon-arrow-up-right,
  .cway__apps a:hover .icon-arrow-up-right { transform: translate(2px, -2px); }
  .todo__tab:not([aria-selected="true"]):hover .todo__mask { transform: translateX(0.16em); }
  .faq__btn[aria-expanded="false"]:hover .faq__icon .ic { transform: translateY(2px); }

  .bar__nav a:not([aria-current]):hover::after { transform: scaleX(1); transform-origin: left center; }
  /* Conținutul răspunde fără să pară un link: nicio schimbare de cursor, doar limbajul de registru al site-ului */
  /* Rândul de registru sub cursor: numele se colorează, bifa se îngroașă */
  .sheet__row:hover .sheet__name { color: var(--brand); }
  .sheet__row:hover .sheet__tick { stroke-width: 3; }

  /* Foaia în relief: sub cursor se înclină spre el (latura de sub cursor coboară), rândurile și totalul se ridică din hârtie
     deasupra liniilor de margine, rândul atins urcă mai sus, iar o lumină albastră urmează cursorul.
     Variabilele --tx, --ty (-1…1) și --lift (0…1) vin din script, netezite pe cadre; în repaus foaia rămâne plată. */
  .hero__stage { perspective: 1400px; }
  .sheet.is-tilt {
    transform: rotateX(calc(var(--ty) * -7deg)) rotateY(calc(var(--tx) * 9deg)) translateZ(calc(var(--lift) * 20px));
    transform-style: preserve-3d;
    box-shadow: calc(var(--tx) * -28px) calc(28px + var(--ty) * -16px + var(--lift) * 18px) calc(56px + var(--lift) * 28px) -40px var(--ink-35);
  }
  .sheet.is-tilt .sheet__rows { transform-style: preserve-3d; }
  .sheet.is-tilt .sheet__row, .sheet.is-tilt .sheet__total { transform: translateZ(calc(var(--lift) * 18px)); transition: transform 420ms var(--ease); }
  .sheet.is-tilt .sheet__row:hover { transform: translateZ(calc(var(--lift) * 46px)); }
  .sheet.is-tilt::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle at calc(50% + var(--tx) * 50%) calc(50% + var(--ty) * 50%), var(--sheen), transparent 60%);
    opacity: var(--lift);
  }
  .ledger__row:hover .ledger__fig { color: var(--brand); transform: translateY(-4px); }
  .ledger__row:hover .ledger__plus { transform: rotate(90deg) scale(1.15); }
  .sector:hover .sector__icon { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
  .sector:hover .sector__icon .ic { transform: translateY(-2px) rotate(-8deg); }
  .scard:hover::before { clip-path: inset(0); }
  .step:hover::before { clip-path: inset(0); }
  .step:hover .step__num-in { color: var(--brand); }
}

/* ======================================================
   APĂSARE: orice control răspunde sub deget, nu doar butoanele.
   Pe atingere, apăsarea arată exact ce arată hover-ul pe desktop.
   ====================================================== */
a, button, summary { -webkit-tap-highlight-color: transparent; }
.btn--primary:active { background: var(--brand-hover); }
.cform__submit:active { background: var(--surface-alt); }
.btn--ghost:active { color: var(--fill-ink); }
.btn--ghost:active::before { transform: scaleX(1); transform-origin: left center; }
.masthead__nav a:active::after, .bar__nav a:active::after { transform: scaleX(1); transform-origin: left center; }
.todo__link:active span, .faq__ask a:active, .footer__mail:active { text-decoration-color: currentColor; }
.footer__col a:active span::after { transform: scaleX(1); transform-origin: left center; }
.faq__btn:active .faq__icon { background: var(--surface-press); }
.faq__btn[aria-expanded="true"]:active .faq__icon { background: var(--brand); }
.cform__again:active { border-color: var(--on-dark); background: var(--veil-10); }
.bar__icon, .cform__again { transition: transform 240ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease); }
.faq__icon { transition: background-color 300ms var(--ease), color 300ms var(--ease), transform 240ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .bar__icon:active { transform: scale(0.88); }
  .faq__btn:active .faq__icon { transform: scale(0.88); }
  .btn--dot:active .btn__dot, .cform__submit:active .btn__dot { transform: scale(0.86); }
  .cform__again:active { transform: scale(0.97); }
  .todo__link:active .ic, .btn--ghost:active .icon-arrow-right { transform: translateX(4px); }
  .footer__col a:active .icon-arrow-up-right, .cway__apps a:active .icon-arrow-up-right { transform: translate(2px, -2px); }
}

/* ======================================================
   MEDIUM · 768–1099px
   ====================================================== */
@media (max-width: 1099px) {
  .masthead__nav ul { gap: 28px; }
  .bar__nav ul { gap: 20px; }
  .bar__nav a { font-size: 14px; }
  .bar__inner { gap: 16px; }

  .about__statement { max-width: 24em; }
  .sector { align-items: flex-start; gap: 14px; }
  .sector__icon { width: 48px; height: 48px; }

  .todo.is-tabs .todo__grid { column-gap: 5%; }
  /* Titlul și legenda trec una sub alta: pe două coloane, „dumneavoastră” nu mai încape */
  .todo__head { grid-template-columns: minmax(0, 1fr); }


  .spec__head { grid-template-columns: minmax(0, 58fr) minmax(0, 36fr); column-gap: 6%; }
  .spec__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; border-top: 0; }
  .scard { border-top: 1px solid var(--dark-line); }

  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }

  .faq__grid { grid-template-columns: minmax(0, 40fr) minmax(0, 56fr); column-gap: 4%; }

  .cta__grid { grid-template-columns: minmax(0, 1fr); }
  /* Pe o coloană, numărul și programul închid banda, sub acțiuni (deasupra titlului ar fi o etichetă) */
  .cta__sign { grid-column: 1; }
  .cta__mark { display: none; }
  .hex--cta-e { width: min(26vw, 220px); }
  .cta__body { grid-column: 1; }


  .footer__top { flex-direction: column; gap: 48px; }
  .footer__about { flex: none; }
  .footer__nav { column-gap: clamp(32px, 8vw, 96px); }
  .footer__name { font-size: clamp(44px, 9.5cqi, 96px); }

}
@media (max-width: 899px) {
  /* Tabletă: canalele unul lângă altul deasupra, formularul pe toată lățimea dedesubt */
  .cpage__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "ways" "form"; row-gap: 40px; }
  .cways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}

/* ======================================================
   COMPACT · sub 768px
   ====================================================== */
@media (max-width: 767px) {
  :root { --bar-h: 60px; --head-h: 170px; --h2: clamp(34px, 9.4vw, 44px); }
  body { font-size: 17px; }

  /* Pe telefon, bara de jos poartă deja telefonul: anunțul ar fi a treia copie, deasupra titlului */
  .announce { display: none; }
  .masthead { gap: 6px; padding: 20px var(--margin) 4px; }
  .masthead__brand { --mark: 44px; --tag: 11px; }
  .masthead__nav ul { gap: 14px; }
  .masthead__nav a { font-size: 15px; }

  .bar__nav, .bar__phone { display: none; }
  /* Limba rămâne în bară și pe telefon: cine citește în rusă nu trebuie s-o caute în meniu. Globul și codul, fără săgeată. */
  .langdd--bar > summary { gap: 5px; min-width: 44px; padding-inline: 8px; justify-content: center; }
  .langdd--bar .langdd__chev { display: none; }
  .bar__icon { display: inline-flex; }
  .bar__inner { gap: 8px; }
  .bar__brand { margin-right: auto; }
  .bar__brand { --mark: 30px; }
  .bar__brand .brand__name { height: 15px; }

  /* Pe telefon hero-ul e oferta: titlul, linia, serviciile în text și cele două acțiuni, centrate pe un ecran întreg,
     ca orice secțiune, urmate de foaia de registru scurtată (vezi mai jos);
     hexagoanele umplu golurile de sus și de jos. */
  .hero {
    --title: clamp(34px, 9.6vw, 46px);
    padding-block: 32px 40px;
  }
  .hero__rule { margin-top: 24px; }
  .hero__lead { margin-top: 24px; font-size: 18px; line-height: 1.5; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 14px; margin-top: 36px; }
  .hero__actions .btn { width: 100%; min-height: 54px; }
  /* Textul stă pe centrul butonului; cercul cu săgeata e scos din flux, lipit de marginea dreaptă */
  .hero__actions .btn--dot { justify-content: center; padding-inline: 56px; }
  .hero__actions .btn__dot { position: absolute; right: 7px; top: 50%; margin-top: -20px; }
  /* Conturul hexagoanelor nu trece prin butonul transparent */
  .hero__actions .btn--ghost { background: var(--canvas); }
  .hero__trust { margin-top: 20px; }
  .hero__inner { justify-content: center; }
  /* Foaia de registru rămâne semnătura primului ecran și pe telefon, scurtată: trei rânduri bifate și totalul,
     fără note (serviciile sunt toate în text, imediat deasupra) */
  .hero__stage { margin-top: 28px; padding-top: 0; }
  .sheet { --row: 38px; padding: 8px 18px 12px 26px; font-size: 16px; }
  .sheet::before { left: 10px; }
  .sheet__head { display: flex; justify-content: space-between; padding-bottom: 6px; }
  .sheet__row { grid-template-columns: minmax(0, 1fr) 22px; column-gap: 16px; }
  .sheet__note, .sheet__row:nth-child(3), .sheet__row:nth-child(4) { display: none; }
  .sheet__total { padding-top: 10px; }
  .sheet__sum { font-size: 1.05em; }
  /* Pe ecranul mic conturul fin dispare: liniile se îngroașă puțin, iar estomparea de sus și de jos se scurtează */
  .hero__bg {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
  }
  .hex--a { top: -8%; right: -46%; width: 92vw; stroke-width: 0.7; opacity: 0.3; }
  .hex--b { left: -34%; bottom: 0; width: 72vw; stroke: var(--brand-2); stroke-width: 0.8; opacity: 0.22; }
  .hex--c { left: 18%; bottom: auto; top: 3%; width: 13vw; }
  .hex--d { left: auto; right: -11vw; top: auto; bottom: 12%; width: 22vw; }
  .hex--e { right: auto; left: -9vw; bottom: auto; top: 3%; width: 18vw; }
  /* Pe telefon panoul e plin de text: hexagonul ar trece peste el */
  .hex--spec { display: none; }

  .about { padding-block: 88px 96px; }
  .about__statement { max-width: 22em; }
  .ledger { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .ledger__row { flex-direction: row; align-items: center; gap: 20px; padding: 20px 0; }
  .ledger__row + .ledger__row { border-left: 0; border-top: 1px solid var(--divider); }
  .ledger__fig { flex: 0 0 max(34%, 2.75em); font-size: 44px; }
  .ledger__text { font-size: 16px; }
  .sectors { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: none; margin-top: 40px; }
  .sectors .sector { padding-inline: 0; align-items: center; }
  .sector__icon { width: 48px; height: 48px; }
  .sector__icon .ic { font-size: 20px; }
  .sector__title { font-size: 18px; }
  .sector__desc { font-size: 15px; }

  .todo { padding-block: 88px; }
  .todo__head { grid-template-columns: minmax(0, 1fr); padding-bottom: 28px; }
  .todo__caption { font-size: 18px; }

  .spec__panel { border-radius: 24px; padding-block: 64px 56px; }
  .spec__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .spec__aside { max-width: 30em; padding-top: 20px; }
  .spec__aside .btn { margin-top: 20px; }
  .spec__cards { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 40px; text-align: left; }
  .scard__title { font-size: 22px; }
  .scard__desc { margin-top: 10px; font-size: 16px; }

  .steps { padding-block: 88px; }
  .steps__intro { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .steps__intro .label { margin-top: 0; }
  .steps__statement { max-width: none; }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 48px; }
  .step__num-in { font-size: 36px; }
  .step__desc { max-width: none; }

  .faq { padding-block: 88px; }
  .faq__grid { display: flex; flex-direction: column; }
  .faq__head { position: static; }
  .faq__rule { display: block; margin-top: 20px; }
  .faq__intro { font-size: 17px; }
  .faq__ask { margin-top: 20px; padding-top: 20px; font-size: 16px; }
  .faq__list { margin-top: 32px; }
  .faq__btn { min-height: 88px; column-gap: 16px; }
  .faq__text { font-size: 19px; }
  .faq__panel p, .values { padding-right: 0; font-size: 16px; }

  .cta { padding-block: 80px 88px; }
  .cta__sign { margin-top: 20px; }
  .cta__text { font-size: 17px; }
  .cta__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .cta__actions .btn, .cta__more { width: 100%; white-space: normal; }
  .cta__actions .btn--dot { justify-content: space-between; text-align: left; }
  /* Pe telefon, aplicațiile sunt trei plăci egale, ca în meniu: logo deasupra, numele dedesubt */
  .cta__apps { margin-top: 20px; }
  .cta__apps ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .cta__apps a { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 64px; padding: 0 4px; border-radius: 14px; font-size: 13px; }
  .cta__app-ic { width: 24px; height: 24px; }
  .cta__more { margin-top: 12px; }
  /* Pe telefon, hexagonul urcă în golul de sub program, tot tăiat de margine */
  .hex--cta-e { right: -14vw; bottom: 4%; width: 40vw; }
  /* Conturul hexagonului nu trece prin butonul transparent */
  .cta__more { background: var(--surface-alt); }

  .footer { padding-block: 64px 28px; }
  .footer__top { gap: 40px; }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; column-gap: 16px; width: 100%; }
  .footer__col a { font-size: 17px; }
  .footer__sign { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 64px; }
  .footer__name { font-size: clamp(40px, 12vw, 56px); }
  .footer__copy { text-align: left; }
  .footer__meta { align-items: flex-start; }

  .legal { padding-top: 32px; }
  .legal__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 56px; }
  .legal__toc { position: static; padding-right: 0; }
  .legal__toc a[aria-current="true"] { transform: none; }
  .legal__sec p, .legal__list { font-size: 16px; }
  .lost__links { gap: 0 24px; }

  .cpage { padding-block: 24px 72px; }
  .cways { grid-template-columns: minmax(0, 1fr); }
  /* Pe telefon, chipul sau iconița stau lângă titlu; textul și acțiunile iau toată lățimea rândului */
  .cway { column-gap: 16px; align-items: center; }
  .cway__body { display: contents; }
  .cway__text, .cway__btn, .cway__apps { grid-column: 1 / -1; }
  .cway__icon { width: 52px; height: 52px; }
  .cway__btn { width: 100%; justify-content: space-between; }
  .cform { border-radius: 24px; padding: 28px 20px; }
  .cform__fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field textarea { min-height: 120px; }
}

/* ======================================================
   TELEFON: o secțiune pe ecran
   Antetul centrat lipsește (bara fixă îl înlocuiește), fiecare secțiune ocupă cel puțin un ecran
   și își centrează conținutul, iar derularea se oprește ușor la începutul secțiunilor.
   Ce se repetă în altă parte sau doar introduce secțiunea rămâne pe ecranele late.
   ====================================================== */
@media (max-width: 767px) {
  :root { --head-h: var(--bar-h); --screen: calc(100svh - var(--bar-h)); }
  html { scroll-padding-top: var(--bar-h); scroll-snap-type: y proximity; }
  body { padding-top: var(--bar-h); }
  .masthead { display: none; }

  .hero, .about, .todo, .spec, .steps, .faq, .cta, .footer { scroll-snap-align: start; }
  .about, .todo, .steps, .faq, .cta {
    display: flex; flex-direction: column; justify-content: center;
    min-height: var(--screen); padding-block: 40px 48px;
  }
  .spec { display: flex; flex-direction: column; min-height: var(--screen); padding-block: 12px; }
  .spec__panel { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 40px 48px; }

  /* Despre: sectoarele apar deja în hero, la Specializări și în subsol */
  .sectors { display: none; }
  .ledger { margin-top: 32px; }

  /* Servicii: file și pe telefon; lista și detaliul încap împreună */
  .todo__caption { display: none; }
  .todo__head { padding-bottom: 16px; }
  .todo.is-tabs .todo__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "aside"; grid-template-rows: auto; }
  .todo.is-tabs .todo__item { padding-block: 8px; }
  .todo__name { font-size: 24px; }
  .todo__tab { padding-right: 40px; }
  .todo__go { font-size: 22px; }
  .todo.is-tabs .todo__aside { margin-top: 16px; }
  .todo__square { --pad: 24px; min-height: 0; height: auto; }
  .todo__square .todo__icon { display: none; }
  .todo__square .todo__lead { margin-top: 0; font-size: 22px; }
  .todo__square .todo__text { margin-top: 10px; font-size: 16px; }
  .todo__square .todo__link { padding-top: 8px; }

  /* Specializări: titlul și cele patru coloane; introducerea rămâne pe ecranele late */
  .spec__aside { display: none; }
  .spec__cards { row-gap: 20px; margin-top: 24px; }
  .scard { padding-top: 16px; }
  .scard__title { font-size: 20px; }
  .scard__desc { margin-top: 6px; font-size: 16px; line-height: 1.45; }

  /* Mod de lucru: fiecare pas e un rând de registru, numărul în stânga */
  .steps__intro { row-gap: 16px; }
  .steps__statement { font-size: 20px; }
  .steps__list { gap: 16px; margin-top: 28px; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding-top: 14px; }
  .step__num { grid-row: 1 / span 2; }
  .step__num-in { font-size: 28px; }
  .step__name { margin-top: 0; font-size: 17px; }
  .step__desc { margin-top: 2px; font-size: 16px; line-height: 1.45; }

  /* Întrebări: titlul, întrebările, apoi drumul spre telefon */
  .faq__head { display: contents; }
  .faq__title { order: 1; }
  .faq__list { order: 2; margin-top: 20px; }
  .faq__ask { order: 3; margin-top: 20px; }
  .faq__intro, .faq__rule { display: none; }
  .faq__btn { min-height: 60px; padding: 10px 0; }
  .faq__text { font-size: 17px; }
  .faq__panel p { padding-bottom: 16px; font-size: 16px; }

  /* Contact: primul ecran sunt titlul și canalele, al doilea formularul */
  .cpage { padding-block: 24px 40px; }
  .cpage__lead { font-size: 16px; }
  /* Primul ecran: titlul și canalele, centrate; formularul începe exact pe al doilea */
  .cpage__grid { display: block; }
  .cpage__first { display: flex; flex-direction: column; justify-content: center; min-height: calc(var(--screen) - 24px); }
  .cpage__head { margin-bottom: 24px; }
  .cform { margin-top: 12px; }
  .cway { padding-block: 20px; }
  .cform {
    scroll-snap-align: start; scroll-margin-top: 12px;
    display: flex; flex-direction: column; justify-content: center; min-height: calc(var(--screen) - 24px);
    padding: 24px 20px;
  }
  .cform__fields { gap: 12px; margin-top: 12px; }
  .field textarea { min-height: 96px; }
  .field__hint, .cform__note { font-size: 13px; }

  /* Subsol: descrierea repetă hero-ul; rămân drumurile și semnătura, pe un ecran întreg care închide pagina */
  .footer { display: flex; flex-direction: column; justify-content: center; min-height: var(--screen); padding-block: 48px 24px; }
  .footer__lead { display: none; }
  /* Fără descriere, adresa ar urca pe rândul logo-ului: rămâne pe rândul ei */
  .footer__mail { display: flex; width: fit-content; margin-top: 4px; }
  .footer__top { gap: 28px; }
  .footer__col li + li { margin-top: 0; }
  .footer__sign { margin-top: 32px; }
}

/* Telefoane scunde (iPhone SE, Android compact): titluri și respirații mai mici, ca ecranul să rămână întreg */
@media (max-width: 767px) and (max-height: 760px) {
  :root { --h2: 32px; }
  /* Titlul încape pe două rânduri și la 360–375px */
  .hero { --title: clamp(32px, 9.6vw, 44px); }
  .hero__lead { margin-top: 20px; font-size: 17px; }
  .about, .todo, .steps, .faq, .cta { padding-block: 24px 32px; }
  .spec__panel { padding-block: 28px 32px; }
  .about__statement { font-size: 20px; }
  .ledger__row { padding-block: 14px; }
  .ledger__fig { font-size: 36px; }
  .todo.is-tabs .todo__item { padding-block: 4px; }
  .todo__name { font-size: 20px; }
  .todo__square { --pad: 20px; padding-block: 16px; }
  .todo__square .todo__lead { font-size: 19px; }
  .spec { padding-block: 8px; }
  .spec__panel { padding-block: 22px 24px; }
  .spec__title { font-size: 28px; }
  .spec__cards { row-gap: 10px; margin-top: 16px; }
  .scard { padding-top: 10px; }
  .scard__title { font-size: 17px; }
  /* Textul de citit nu coboară sub 16px: pe ecranele scunde se strâng spațiile, nu literele;
     secțiunile pot trece de un ecran (fixarea e „proximity”) */
  .scard__desc { margin-top: 4px; line-height: 1.4; }
  .steps__intro { row-gap: 10px; }
  .steps__statement { font-size: 17px; }
  .steps__list { gap: 8px; margin-top: 16px; }
  .step { padding-top: 8px; }
  .step__num-in { font-size: 24px; }
  .step__name { font-size: 16px; }
  .step__desc { line-height: 1.4; }
  .faq__btn { min-height: 48px; padding: 5px 0; }
  .faq__text { font-size: 16px; }
  .faq__list { margin-top: 12px; }
  .faq__ask { margin-top: 12px; padding-top: 12px; font-size: 16px; }
  .cpage__title { font-size: 32px; }
  .cway { padding-block: 14px; }
  /* Pe ecranele scunde rămân titlul canalului și acțiunea; explicațiile sunt deja în titlul paginii */
  .cway__text, .field__hint { display: none; }
  .cform { padding: 20px 18px; }
  .cform__title { font-size: 20px; }
  .field label { margin-bottom: 4px; }
  .field textarea { min-height: 72px; }
  .footer__name { font-size: 40px; }
  .footer__sign { margin-top: 20px; }
}

/* Telefoane foarte scunde (360×640): întrebările mai joase, spațiile mai strânse; literele rămân de cel puțin 16px
   și ținta de atingere de 44px, chiar dacă lista trece de un ecran */
@media (max-width: 767px) and (max-height: 660px) {
  .faq__btn { min-height: 44px; padding: 4px 0; }
  .faq__list { margin-top: 8px; }
  .todo__name { font-size: 19px; }
  :lang(ru) .faq__ask { margin-top: 8px; padding-top: 8px; }
  .steps__statement { font-size: 16px; }
  .steps__list { margin-top: 12px; }
}

/* Tablete (768–1023px): în bara compactă numărul nu mai încape lângă navigație și limbă; rămâne receptorul, într-un cerc */
@media (min-width: 768px) and (max-width: 1023px) {
  .bar__inner { gap: 12px; }
  .bar__nav ul { gap: 14px; }
  .bar__phone { width: 44px; padding: 0; gap: 0; }
  .bar__phone span { display: none; }
}
/* Telefoane de până la 820px înălțime: hero-ul se strânge, ca foaia scurtată să încapă în același ecran */
@media (max-width: 767px) and (max-height: 820px) {
  .hero { padding-block: 20px 24px; }
  .hero__actions { margin-top: 24px; gap: 10px; }
  .hero__actions .btn { min-height: 50px; }
  .hero__trust { margin-top: 14px; }
  .hero__stage { margin-top: 20px; }
  .sheet { --row: 34px; }
}
/* Telefoane sub 700px înălțime (iPhone SE): foaia nu mai încape lângă acțiuni; hero-ul rămâne oferta, ca înainte */
@media (max-width: 767px) and (max-height: 700px) {
  .hero__stage { display: none; }
}

@media (max-width: 400px) {
  .masthead__nav ul { gap: 8px; }
  .masthead__nav a { font-size: 14px; }
}
/* Telefoane înguste: marca puțin mai mică și spații mai strânse, ca limba, apelul și meniul să stea în marginea paginii */
@media (max-width: 400px) {
  .bar__inner { gap: 4px; }
  .bar__brand { --mark: 28px; }
  .bar__brand .brand__name { height: 13px; }
}
/* Sub 380px în bară rămâne doar codul limbii */
@media (max-width: 379px) {
  .langdd--bar > summary .icon-globe { display: none; }
}

/* ======================================================
   SCROLL CA RIGLĂ (ecrane înguste): dubla linie urmărește lectura.
   Animații legate de timeline-ul de vizibilitate, pe compositor, fără ascultători de scroll.
   Unde nu există suport, pagina rămâne exact ca înainte.
   ====================================================== */
@keyframes rule-draw { to { clip-path: inset(0); } }
@keyframes rail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Numerele pornesc din gri-ul textului secundar, nu din cel al liniilor: încă se citesc, doar nu sunt aprinse */
@keyframes num-on { from { color: var(--ink-soft); } to { color: var(--ink); } }
@supports (animation-timeline: view()) {
  @media (max-width: 1099px) and (prefers-reduced-motion: no-preference) {
    /* Specializări: linia fiecărei coloane se trage pe toată lățimea cât coloana urcă prin ecran */
    .scard { view-timeline: --scard block; }
    .scard::before { animation: rule-draw linear both; animation-timeline: --scard; animation-range: cover 18% cover 48%; }
  }
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* Mod de lucru: o riglă verticală se umple de albastru pe măsură ce pașii sunt citiți, iar fiecare număr se aprinde când rigla ajunge la el */
    .steps__list { position: relative; padding-left: 28px; view-timeline: --steps block; }
    .steps__list::before, .steps__list::after { content: ""; position: absolute; top: 0; bottom: 0; }
    .steps__list::before { left: 1.5px; width: 1px; background: var(--divider); }
    .steps__list::after {
      left: 0; width: 4px; background: var(--brand); transform-origin: center top;
      animation: rail-fill linear both; animation-timeline: --steps; animation-range: cover 22% cover 70%;
    }
    /* Timeline-ul stă pe pas: masca numărului are overflow ascuns și ar deveni ea însăși containerul de scroll */
    .step { view-timeline: --step block; }
    .step__num-in { animation: num-on linear both; animation-timeline: --step; animation-range: cover 25% cover 40%; }
  }
}

/* ======================================================
   MIȘCARE REDUSĂ: starea finală, fără deplasări decorative
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
  .bar, .bar__indicator, .bar__burger line, .masthead__nav a::after, .bar__nav a::after, .btn, .btn::before, .btn__dot,
  .cform__submit, .todo__name, .todo__tab .todo__mask, .faq__icon, .faq__icon .ic, .faq__text,
  .footer__col a span::after, .footer__mail, .todo__link span, .sheet__name, .sheet__tip, .field label, .todo__go, .faq__ask a,
  .menu > ul > li > a, .menu > ul > li > a::after, .menu__apps a, .menu__app-ic, .cta__apps a, .bar__icon, .cform__again, .ledger__fig, .ledger__plus,
  .sector__icon, .sector__icon .ic, .scard::before, .step::before, .step__num-in,
  .footer__legal a, .footer__legal a span::after, .legal__toc a, .legal__num, .legal__sec p a,
  .todo--spy .todo__mask, .todo--spy .todo__link .ic { transition: none; }
  .btn:active, .cform__submit:active { --s: 1; }

  .cform__submit[aria-busy="true"] .icon-loader-circle { animation: none; }
}

/* ======================================================
   MIȘCAREA FUNDALULUI: hexagoanele plutesc și se rotesc foarte încet, fiecare în ritmul lui,
   iar la scroll rămân în urmă la adâncimi diferite. Doar translate, rotate și transform: totul pe compositor.
   Ies din ecran → pauză (clasa is-paused, din script). Fără mișcare: stau pe loc.
   ====================================================== */
@keyframes hex-float { from { translate: 0 0; } to { translate: var(--fx) var(--fy); } }
@keyframes hex-turn { to { rotate: 360deg; } }
@keyframes hex-depth { to { transform: translateY(var(--depth)); } }
@media (prefers-reduced-motion: no-preference) {
  .hex {
    animation: hex-float var(--float) var(--ease-sine) infinite alternate, hex-turn var(--turn) linear infinite var(--spin, normal);
    will-change: translate, rotate;
  }
  .hex--a { --float: 23s; --turn: 160s; --fx: -3%; --fy: 4%; --depth: 22vh; }
  .hex--b { --float: 17s; --turn: 110s; --spin: reverse; --fx: 6%; --fy: -5%; --depth: 10vh; }
  .hex--c { --float: 13s; --turn: 70s; --fx: -40%; --fy: 55%; --depth: 34vh; }
  .hex--d { --float: 15s; --turn: 90s; --fx: 18%; --fy: 22%; --depth: 16vh; }
  .hex--e { --float: 19s; --turn: 120s; --spin: reverse; --fx: -16%; --fy: -20%; --depth: 6vh; }
  .hex--spec { --float: 21s; --turn: 140s; --spin: reverse; --fx: -4%; --fy: 5%; }
  .hex--cta { --float: 22s; --turn: 150s; --fx: 3%; --fy: -4%; }
  .hex--cta-e { --float: 18s; --turn: 130s; --fx: -6%; --fy: -5%; }
  .hex--cta-c { --float: 14s; --turn: 80s; --spin: reverse; --fx: -30%; --fy: 35%; }
  [data-hex-bg].is-paused .hex { animation-play-state: paused; }

  /* Parallax la scroll, unde există timeline de scroll: hexagoanele hero coboară mai încet decât pagina */
  @supports (animation-timeline: scroll()) {
    .hero__bg .hex {
      animation:
        hex-float var(--float) var(--ease-sine) infinite alternate,
        hex-turn var(--turn) linear infinite var(--spin, normal),
        hex-depth linear both;
      animation-timeline: auto, auto, scroll(root);
      animation-range: normal, normal, 0 100svh;
      will-change: translate, rotate, transform;
    }
  }
}

/* Tranziția între pagini: conținutul nou urcă 12px și apare; antetul își păstrează locul */
::view-transition-old(root) { animation: 200ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 280ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }