/* ==========================================================================
   Burghila Digital — design system (faza 2)
   Construit în jurul logo-ului și al paletei finale din design/.
   Culorile de brand (--brand-*) sunt FIXE. Restul tokenilor sunt nuanțe
   derivate din ele, calculate pentru contrast AA (vezi docs/06-design.md).
   Ordine: 0 font · 1 tokens · 2 reset · 3 tipografie · 4 layout · 5 componente
           · 6 utilitare · 7 preferințe (dark, motion, print)
   ========================================================================== */

/* 0. FONT ------------------------------------------------------------------
   Archivo (SIL OFL, în assets/fonts/OFL.txt), font variabil găzduit local:
   zero cereri către terți, deci CSP-ul `font-src 'self'` rămâne neatins.
   Subset latin + latin extins + română (ș/ț cu VIRGULĂ, nu sedilă) și punctuație
   tipografică; axa wdth fixată la 100, wght restrânsă la 400–800 → 38 KB.
   Folosit DOAR pe titluri; textul curent rămâne pe stiva de sistem, ca bugetul
   de performanță să nu depindă de un fișier descărcat.
   Calea de mai jos trebuie să rămână identică cu cea din <link rel="preload">
   din app/layout.php — altfel browserul descarcă fontul de două ori.
   Versiunea e în numele fișierului (nu prin ?v=), fiindcă `asset()` nu poate
   interveni într-un url() din CSS. Font nou = fișier cu nume nou, în ambele locuri.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-v1.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Paleta de brand — NU se modifică. */
  --brand-navy:   #023047;
  --brand-blue:   #219ebc;
  --brand-sky:    #8ecae6;
  --brand-amber:  #ffb703;
  --brand-orange: #fb8500;

  /* Nuanțe derivate (shade/tint din culorile de mai sus), pentru contrast AA. */
  --navy-900: #011f2e;  /* navy închis — fundal dark mode */
  --navy-950: #011722;  /* navy + negru 40% — fundalul paginii în dark mode */
  --navy-990: #010d15;  /* navy + negru 62% — footer în dark mode */
  --navy-700: #012a3d;  /* navy închis — benzi/hover pe fundal închis */
  --blue-ink: #167893;  /* blue închis — linkuri pe fundal deschis (5.07:1) */
  --navy-50:  #f2f9fc;  /* sky diluat — suprafețe */
  --navy-100: #e4f0f7;  /* sky diluat — benzi */
  --navy-200: #cfe3ee;  /* sky diluat — borduri decorative */
  --slate-600: #4e6e7e; /* navy + alb — text secundar (5.45:1) */

  /* Tokeni semantici (light). Dark mode le rescrie mai jos. */
  --bg: #ffffff;
  --bg-band: var(--navy-50);
  --surface: #ffffff;
  --surface-sunken: var(--navy-50);
  --text: var(--brand-navy);
  --text-muted: var(--slate-600);
  --link: var(--blue-ink);
  --link-hover: var(--brand-navy);
  --border: var(--navy-200);
  --border-strong: var(--slate-600);
  --accent: var(--brand-amber);
  --accent-hover: var(--brand-orange);
  --accent-text: #9c651b;   /* orange 62% + navy — accent de TEXT: 4,89:1 pe alb (portocaliul pur are 2,48:1) */
  --on-accent: var(--brand-navy);
  --focus: var(--brand-navy);
  --error: #b3261e;
  --error-bg: #fdf3f2;
  --invert-bg: var(--brand-navy);
  --footer-bg: var(--brand-navy);
  --footer-text: #d8e8f0;
  --footer-link: var(--brand-sky);
  /* Compoziția grafică din hero — nuanțe derivate din paletă, ca să meargă și dark mode. */
  --art-shadow: 0 18px 44px rgba(2, 48, 71, .18);
  /* Cartonul cărții de vizită. E bleumarin în AMBELE teme, ca o carte tipărită care nu-și
     schimbă culoarea după lumina din cameră — de aceea grupul ăsta nu se rescrie în blocul
     de temă întunecată de mai jos. Singura excepție e umbra (`--art-shadow`), care chiar
     depinde de fundalul paginii. */
  --card-stock: var(--brand-navy);
  --card-stock-lit: color-mix(in srgb, var(--brand-blue) 34%, var(--brand-navy));
  --card-text: #ffffff;
  --card-text-muted: color-mix(in srgb, var(--brand-sky) 78%, #ffffff);
  --card-hairline: color-mix(in srgb, var(--brand-sky) 30%, transparent);
  --card-tile: color-mix(in srgb, var(--brand-blue) 50%, var(--brand-navy));

  --shadow-sm: 0 1px 2px rgba(2, 48, 71, .06), 0 2px 8px rgba(2, 48, 71, .05);
  --shadow-md: 0 2px 6px rgba(2, 48, 71, .07), 0 12px 28px rgba(2, 48, 71, .08);

  /* Tipografie — stiva de sistem, zero fonturi descărcate. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo", var(--font-body);
  --step--1: clamp(.875rem, .84rem + .17vw, .95rem);
  --step-0:  clamp(1.0625rem, 1.03rem + .18vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.13rem + .35vw, 1.4rem);
  --step-2:  clamp(1.4rem, 1.28rem + .6vw, 1.8rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-4:  clamp(2.05rem, 1.6rem + 2.2vw, 3.25rem);

  /* Spațiere — scară de 4px. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --measure: 68ch;
  --field-width: 34rem;   /* toate câmpurile de formular, aceeași coloană */
  --width: 70rem;
  --width-narrow: 46rem;
}

/* 2. RESET ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main { flex: 1 0 auto; }

/* Header-ul e sticky: fără marja asta, ținta unei ancore (skip link, sumarul de erori
   din formular) ajunge exact sub el și pare că legătura nu a făcut nimic. */
main, :target { scroll-margin-top: 5.5rem; }

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

:where(:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--brand-amber); color: var(--brand-navy); }

/* 3. TIPOGRAFIE ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -.025em; }
h2 { font-size: var(--step-3); margin-top: var(--space-6); }
h3 { font-size: var(--step-1); margin-top: var(--space-5); }
h4 { font-size: var(--step-0); }
:is(h1, h2, h3) + * { margin-top: 0; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); text-wrap: pretty; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 54ch;
  margin-bottom: var(--space-5);
}

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--link-hover); }

strong { font-weight: 650; color: var(--text); }
small { font-size: var(--step--1); }

/* Liste de conținut: marker chihlimbariu, lizibilitate de text lung. */
main :is(ul, ol) { max-width: var(--measure); margin: 0 0 var(--space-4); padding-left: 1.35em; }
main li { margin-bottom: var(--space-2); }
main li::marker { color: var(--brand-orange); font-weight: 700; }

/* 4. LAYOUT ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container-narrow { max-width: var(--width-narrow); }

/* Ecrane mari: cadrul crește în trepte, rândul de text NU — `--measure` rămâne 68ch, deci
   lizibilitatea e neatinsă, dar site-ul nu mai stă ca o coloană îngustă la 1920 sau 2560 px.
   Titlul principal primește câte un palier, fiindcă `clamp()` e deja la maxim aici. */
@media (min-width: 100rem) {        /* ≥ 1600 px */
  :root { --width: 80rem; --step-4: 3.6rem; }
}
@media (min-width: 131.25rem) {     /* ≥ 2100 px */
  :root { --width: 90rem; --step-4: 3.9rem; }
}

/* Pagini interioare: <main><div class="container"> */
main > .container { padding-block: var(--space-7) var(--space-8); }

/* Pagini interioare cu coloană laterală: <div class="container page-grid">, cu .page-main și
   <aside class="page-rail"> înăuntru.

   Sub prag e o singură coloană, plafonată la `--measure` și CENTRATĂ. Asta rezolvă problema
   veche: paragrafele erau deja limitate la 68ch, dar stăteau aliniate la stânga într-un cadru
   de 70rem, deci textul atârna în stânga cu un gol imens în dreapta. Acum cadrul se strânge
   pe text, la orice lățime.

   Peste prag apar două coloane. `justify-content: center` centrează compoziția în cadru, deci
   mijlocul blocului cade exact pe mijlocul ecranului — indiferent cât de lat e monitorul.
   Coloana de citit rămâne `--measure`: NU se lărgește niciodată, spațiul câștigat se umple cu
   alt conținut, nu cu rânduri mai lungi.

   Pragul nu e ales estetic, ci aritmetic: la 1200px cadrul are 1072px pe dinăuntru, iar grila
   cere 675 (text) + 48 (gap) + 320 (coloana laterală) = 1043px. Dacă lărgești coloana laterală,
   ridici și pragul. `minmax(0, …)` pe ambele coloane le lasă să se strângă în loc să depășească. */
.page-grid { max-width: var(--measure); margin-inline: auto; }

@media (min-width: 75rem) {          /* ≥ 1200 px */
  .page-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 20rem);
    gap: var(--space-7);
    /* Fără `start`, coloana laterală s-ar întinde pe toată înălțimea grilei și `sticky` n-ar
       mai avea unde să alunece — ar tăcea, fără eroare. */
    align-items: start;
    justify-content: center;
    max-width: none;
  }
  /* `top` e aliniat cu `scroll-margin-top`, ca să nu intre sub antetul lipit. */
  .page-rail { position: sticky; top: 5.5rem; }
}

/* Peste 1600px cadrul crește (vezi mai sus); coloana laterală crește odată cu el, ca golul
   lateral să nu se mărească la loc. */
@media (min-width: 100rem) {
  .page-grid { grid-template-columns: minmax(0, var(--measure)) minmax(0, 24rem); }
}

/* Secțiune de nivel înalt (homepage) vs. secțiune imbricată (pagini interioare). */
.section { padding-block: var(--space-7); }
.container .section { padding-block: 0; margin-top: var(--space-7); }

/* Bandă colorată pe toată lățimea — doar pe secțiuni de nivel înalt. */
.band { background: var(--bg-band); border-block: 1px solid var(--border); }

/* Titlu de pagină cu accent chihlimbariu. */
main > .container > h1::after,
main > .container > .page-main > h1::after,
.section > .container > h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 4px;
  margin-top: var(--space-4);
  border-radius: 2px;
  background: var(--brand-amber);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand-navy);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
}
.skip-link:focus { left: var(--space-4); top: var(--space-2); }

/* 5. COMPONENTE ------------------------------------------------------------ */

/* 5.1 Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.brand { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.brand picture { display: block; }
.brand-logo { display: block; width: auto; height: 2.6rem; }
.brand-tagline {
  display: none;
  font-size: .78rem;
  line-height: 1.2;
  color: var(--text-muted);
  letter-spacing: .01em;
}
@media (min-width: 62rem) { .brand-tagline { display: block; } }

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.nav-menu a:hover { background: var(--surface-sunken); color: var(--link); }
.nav-menu a[aria-current="page"] { color: var(--link); box-shadow: inset 0 -2px 0 var(--brand-amber); }

/* Selectorii încep cu `.nav-menu a` ca să bată `.nav-menu a[aria-current="page"]` pe
   specificitate — altfel butonul de CTA s-ar colora ca un link obișnuit pe pagina lui.
   Înainte se rezolva cu `!important`. */
.nav-menu a.nav-cta {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.nav-menu a.nav-cta:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Linia explicativă de sub fiecare pagină și intrarea de WhatsApp aparțin DOAR panoului
   mobil. Ascunse aici, nu în media query, ca desktopul și varianta fără JS să nu le vadă
   niciodată — WhatsApp rămâne oricum în subsol, pe fiecare pagină. */
.nav-hint, .nav-extra { display: none; }

/* Comutatorul de limbă. Nu mai stă în listă, ci direct în bara de sus, ca un vizitator
   care nu știe românește să-l vadă fără să deschidă meniul. Perechea sky/navy e fixă în
   ambele teme, exact ca butonul de acțiune pe amber — vezi docs/06-design.md.
   `order` îl trimite după navigație pe desktop, unde lumea îl caută; pe mobil rămâne în
   ordinea din HTML, lângă „Meniu", ca ordinea vizuală și cea de tab să coincidă. */
.site-header-inner > .nav-lang { order: 1; }
.site-nav { margin-left: auto; }
.nav-lang {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--brand-sky);
  color: var(--brand-navy);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: box-shadow .2s ease;
}
/* Hover-ul adaugă un contur, nu schimbă fondul: orice altă culoare din paletă sub textul
   navy ar coborî contrastul sub 4.5:1, iar inelul se vede la fel pe antetul alb și pe cel
   închis. */
.nav-lang:hover { box-shadow: inset 0 0 0 2px var(--brand-navy); }
.lang-globe { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }

.nav-toggle { display: none; }
/* Fără JS butonul rămâne ascuns: `.nav-toggle[hidden]` are specificitate (0,2,0) și bate
   regula de `display: inline-flex` din media query-ul de mobil, fără `!important`. */
.nav-toggle[hidden] { display: none; }

/* 5.2 Butoane */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.button:active { transform: translateY(1px); }

.button-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.button-secondary:hover { background: var(--surface-sunken); color: var(--text); border-color: var(--text); }

/* 5.3 Hero */
.hero {
  position: relative;
  padding-block: var(--space-8) var(--space-7);
  background:
    radial-gradient(60rem 26rem at 88% -18%, color-mix(in srgb, var(--brand-sky) 42%, transparent), transparent 70%),
    linear-gradient(180deg, var(--navy-50), var(--bg) 78%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 56ch; font-size: var(--step-2); color: var(--text); }
.hero .form-hint { margin-top: var(--space-4); }

/* CARTEA DE VIZITĂ DIN HERO
   ------------------------------------------------------------------------------------
   Carton bleumarin, accent chihlimbariu ca folia aurie, portret decupat care iese din
   marginea de jos. Fără iconițe, fără pastile, fără ornamente: pe o carte de vizită scumpă
   e mai mult aer decât desen, iar diferența o face tipografia — nume mare, meseria în
   majuscule rărite, datele mici și liniștite sub o linie de păr.

   Totul e HTML adevărat, nu straturi de `background`, fiindcă se vede și pe telefon: cartea
   nu mai e decor care dispare sub 62rem, ci conținut. Vine după butoane în DOM, deci pe
   telefon stă sub îndemnul principal.

   O SINGURĂ așezare, la orice lățime — text în stânga, portret în dreapta — fiindcă asta E
   o carte de vizită: nu se rearanjează, doar își schimbă mărimea. `aspect-ratio: 16 / 10` e
   proporția unui carton de 85×55 mm și e o podea, nu o tăietură: dacă textul crește (o
   traducere mai lungă, un font mărit din browser), cartea crește cu el.

   `max-width` sub 62rem nu e cosmetică: fără el, pe o tabletă de 900px cartea ar deveni un
   dreptunghi de 900×560, adică un poster, nu o carte de vizită. */
.hero-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 26rem;
  margin-top: var(--space-6);
  /* Pe telefon cartonul are lățimea ecranului, adică ~340px: la 16:10 ar ieși 214px
     înălțime, în care sigla ajunge lipită de nume. Acolo îl las să crească după conținut,
     cu o podea, și îi dau proporția de carte de vizită abia când are lățime de dat. */
  min-height: 16rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--art-shadow);
  color: var(--card-text);
  background:
    linear-gradient(118deg, transparent 38%, color-mix(in srgb, var(--card-text) 5%, transparent) 52%, transparent 66%),
    radial-gradient(120% 130% at 88% 4%, var(--card-stock-lit), var(--card-stock) 62%);
}
/* Muchia cartonului: un fir de lumină pe interior, cât să se vadă că e un obiect, nu un
   dreptunghi colorat. Pseudo-element, nu `border`, ca să nu intre în calculul de mărime. */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--card-hairline);
  pointer-events: none;
}

/* Portretul stă într-o PLACĂ, nu liber pe carton. Un decupaj lăsat liber trebuie să se
   termine cumva, iar orice fel de a-l termina se vede: tăiat pe muchie arată ca o greșeală
   de decupaj, stins în carton arată ca o pată. Într-o ramă, tăietura de jos e a RAMEI, adică
   exact ce face orice fotografie tipărită. De asta placa are fundal mai deschis decât
   cartonul și un fir de contur: dacă nu se vede rama, ne întoarcem la decupajul plutitor.
   Aura din spatele capului rămâne — părul e aproape negru și fără ea creștetul dispare. */
/* Pe telefon placa se măsoară pe LĂȚIME, cu proporția ei, și se centrează pe verticală.
   Întinsă de sus până jos, ea creștea odată cu textul (o traducere mai lungă = un carton mai
   înalt), ajungea mult mai îngustă decât poza și tăia din umeri până rămânea doar capul. */
.vcard-figure {
  position: absolute;
  top: 50%;
  right: var(--space-4);
  transform: translateY(-50%);
  width: 46%;
  aspect-ratio: 41 / 52;
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - var(--space-2));
  background: var(--card-tile);
  box-shadow: inset 0 0 0 1px var(--card-hairline);
}
.vcard-figure::before {
  content: "";
  position: absolute;
  left: 6%;
  top: 6%;
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand-sky) 52%, transparent) 0 30%,
    color-mix(in srgb, var(--brand-sky) 30%, transparent) 55%,
    color-mix(in srgb, var(--brand-sky) 10%, transparent) 76%,
    transparent 92%);
}
/* `object-fit: cover` e obligatoriu, nu o preferință: regula globală `img { max-width: 100% }`
   de mai sus ar strivi o poză lăsată pe `width: auto; height: 100%` atunci când placa e mai
   îngustă decât ea — exact ce se întâmpla pe telefon, unde fața ieșea alungită. Aici poza
   umple rama și se taie, niciodată nu se deformează. Fundalul decupajului rămâne transparent,
   deci aura de sub el se vede în continuare. */
.vcard-figure img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* Coloana de text. Lățimea de 52% e dictată de portret: la 92% înălțime pe un carton 16:10,
   decupajul ocupă ~48% din lățime, deci textul se oprește exact înainte de umăr. */
/* Ordinea pe coloană: numele sus, datele sub o linie de păr, sigla jos de tot — mică, ca o
   semnătură. Sus stătea peste nume și, fiind amberul cel mai lat de pe carton, fura privirea
   de la om. Pe o carte de vizită scumpă marca e cel mai discret element, nu cel mai mare. */
.vcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  padding: var(--space-4);
  box-sizing: border-box;
}
.vcard-logo {
  width: 5.4rem;
  height: auto;
  margin-top: auto;
  padding-top: var(--space-5);
  opacity: .85;
}
.vcard-id { margin-top: 0; }
.vcard-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--card-text);
}
/* Meseria e singurul lucru chihlimbariu de pe carte. Majusculele rărite fac rândul să pară
   gravat, nu scris — e trucul cel mai ieftin din tipografie și cel mai eficient aici. */
.vcard-role {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .66rem;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-amber);
}
.vcard-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--card-hairline);
  font-size: .78rem;
  line-height: 1.75;
  color: var(--card-text-muted);
  overflow-wrap: anywhere;
}
.vcard-list a {
  color: inherit;
  text-decoration-color: var(--card-hairline);
  text-underline-offset: 3px;
}
.vcard-list a:hover { color: var(--brand-amber); text-decoration-color: currentColor; }

/* De la 46rem cartonul are lățime de dat, deci primește proporția de 85×55 mm. */
@media (min-width: 46rem) {
  .hero-art { aspect-ratio: 16 / 10; min-height: 0; }
  /* De la 46rem cartonul are proporție fixă, deci placa poate reveni la înălțimea plină:
     se aliniază cu coloana de text sus și jos, ca într-un carton tipărit. */
  .vcard-figure {
    top: var(--space-5);
    right: var(--space-5);
    bottom: var(--space-5);
    transform: none;
    width: 42%;
    aspect-ratio: auto;
  }
  .vcard { width: 54%; padding: var(--space-5); }
}

/* De la 62rem cartea intră în coloana din dreapta a hero-ului (435–565px) și scapă de
   `max-width`: acolo o limitează grila, nu ea însăși. */
@media (min-width: 62rem) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: var(--space-7);
  }
  .hero-art { max-width: none; margin-top: 0; }
}

/* Peste 1200px cartea are loc de peste 450px: totul urcă o treaptă, ca un carton ținut mai
   aproape de ochi. Sub prag ar fi fost înghesuit, deci creșterea vine aici, nu mai devreme. */
@media (min-width: 75rem) {
  .vcard { padding: var(--space-6); }
  .vcard-figure { top: var(--space-6); right: var(--space-6); bottom: var(--space-6); }
  .vcard-logo { width: 6.6rem; padding-top: var(--space-6); }
  .vcard-name { font-size: 1.45rem; }
  .vcard-role { font-size: .72rem; margin-top: var(--space-3); }
  .vcard-list { font-size: .86rem; margin-top: var(--space-6); padding-top: var(--space-5); }
}


.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
  margin-bottom: var(--space-4);
}
/* Sub 30rem cele două butoane oricum se rup pe rânduri separate, dar cu lățimi diferite —
   arată a greșeală. Egale și pe toată lățimea, arată a decizie. */
@media (max-width: 30rem) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .button { width: 100%; }
}

/* 5.4 Carduri */
.cards {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: var(--space-5);
}
/* Exact patru carduri: auto-fit ar așeza 3 + 1 orfan la lățimile de desktop, pentru că al
   patrulea nu mai încape pe rând. Le punem 2×2, o compoziție echilibrată la orice lățime. */
@media (min-width: 48rem) {
  .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Peste 1600 px, 2×2 ar da carduri de ~40 de cuvinte pe un singur rând de text. Patru pe rând
   păstrează linia scurtă și folosesc lățimea câștigată mai sus. */
@media (min-width: 100rem) {
  .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
/* Titlul unui card poate fi h2 sau h3, după nivelul lui real în pagină (Radio Intens e un
   proiect de sine stătător, deci h2). Cardul îl arată la fel în ambele cazuri. */
.card > :is(h2, h3) {
  margin-top: 0;
  font-size: var(--step-1);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.card > :is(h2, h3)::before {
  content: "";
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: 2px;
  background: var(--brand-amber);
}
.card > :last-child { margin-bottom: 0; }
.card p { max-width: none; }

/* 5.5 Studiu de caz */
.case-study {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-left: 5px solid var(--brand-amber);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-block: var(--space-6);
}
.case-study > h2 { margin-top: 0; }
.case-study h3 {
  margin-top: var(--space-6);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--link);
}
.case-study > :last-child { margin-bottom: 0; }

/* Capturile dintr-un studiu de caz (`.shots` + `.shot`). Ecrane de telefon cu legendă.
   Două așezări, după lățime, fiindcă o captură și o propoziție au nevoi opuse:
   - pe telefon, fiecare captură e un RÂND: miniatura în stânga, legenda lângă ea, pe restul
     lățimii. Trei coloane pe un ecran de telefon ar da legende de vreo 130px, adică un
     cuvânt pe rând, iar ultima s-ar tăia la jumătatea unei propoziții. O imagine poate să se
     vadă pe muchie și se înțelege că mai urmează ceva; un text tăiat pare doar stricat;
   - de la 48rem în sus e loc real: cele trei trec în rând, cu legenda sub fiecare.
   Nicăieri nu există derulare pe orizontală, nici a paginii, nici în interiorul fâșiei: la
   48rem cele trei coloane de minim 8,5rem încap oricum, deci n-are ce să depășească.
   Miniatura de pe telefon crește cu ecranul până la 12rem (`clamp`), ca pe o tabletă mică să
   nu rămână o poză mică lângă o legendă foarte lată.
   `align-content: start` în blocul de desktop nu e cosmetică: `.shots` întinde cele trei
   `.shot` la aceeași înălțime, iar rândurile automate ar înghiți surplusul și ar TRAGE
   imaginea pe verticală, cu atât mai mult cu cât legenda de sub ea e mai scurtă. Aceeași
   capcană ca la poza din cartea de vizită: `height: auto` nu apără de `stretch`.
   Chenarul de telefon cerut de Alin vine din IMAGINE, nu din CSS: capturile sunt decupate din
   materialele de Google Play, unde telefonul e deja desenat cu ramă și colțuri rotunjite, iar
   decupajul păstrează alpha în afara siluetei. Deci `.shot img` nu are voie să adauge `border`
   sau `border-radius`: ar ieși două rame una în alta. Nici `background`, fiindcă ar picta un
   dreptunghi plin pe sub colțurile rotunjite, adică patru pătrate vizibile în tema întunecată. */
.shots {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
}
.shot {
  display: grid;
  grid-template-columns: clamp(9rem, 32%, 12rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  margin: 0;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot figcaption {
  font-size: var(--step--1);
  color: var(--text-muted);
  text-wrap: pretty;
}
@media (min-width: 48rem) {
  .shots {
    grid-auto-flow: column;
    grid-auto-columns: minmax(8.5rem, 1fr);
    gap: var(--space-4);
  }
  .shot {
    grid-template-columns: none;
    gap: var(--space-3);
    align-content: start;
    align-items: start;
  }
}

/* 5.6 Pașii procesului — cronologie verticală */
/* Selectorul începe cu `main` ca să bată `main :is(ul, ol)`, fără `!important`.
   Cardurile de dinainte s-au dizolvat: pașii atârnă acum de o singură șină verticală,
   fiecare cu numărul lui conturat deasupra.
   Trei lucruri de știut înainte să atingi blocul:
   1. Numerele vin din `counter`, nu din text — de aceea titlurile din process.php NU mai
      încep cu „1.", „2.". Dacă le pui la loc, numerotarea apare de două ori.
   2. Distanța dintre pași e `padding-bottom` pe `li`, nu `gap` pe listă: cu `gap`
      șina (`border-left`) s-ar rupe în bucăți între pași.
   3. Textul pierde ~2rem din lățime față de `--measure`, fiindcă șina și numărul stau
      în același padding. Rămâne peste 55 de caractere pe rând, deci în zona bună. */
main .process-steps {
  list-style: none;
  padding-left: 0;
  margin-top: var(--space-7);
  max-width: none;
  counter-reset: step;
}
.process-steps > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-8) var(--space-6);
  border-left: 2px solid var(--border);
}
.process-steps > li:last-child { padding-bottom: 0; }

/* Numărul mare. Culoarea plină e fallback-ul; conturul se aplică doar unde există
   `-webkit-text-stroke`. Fără `@supports`, un browser care nu-l cunoaște ar păstra
   `color: transparent` și numărul ar dispărea complet. */
.process-steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--border-strong);
}
@supports (-webkit-text-stroke: 1px currentColor) {
  .process-steps > li::before {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--border-strong);
  }
}

.process-steps h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--step-2);
  text-transform: uppercase;
}
/* Cuvântul accentuat din titlu. Culoarea vine din `--accent-text`, NU direct din
   `--brand-orange`: portocaliul pur are 2,48:1 pe alb și ar pica AA la orice mărime. */
.step-accent { color: var(--accent-text); }
.process-steps > li > :last-child { margin-bottom: 0; }

/* Pe telefon numărul și șina nu mai pot lua 2rem din rând. */
@media (max-width: 34rem) {
  .process-steps > li { padding-left: var(--space-4); padding-bottom: var(--space-7); }
}

/* 5.7 Despre */
.about-intro { margin-bottom: var(--space-6); }
.about-photo {
  float: right;
  width: 9.5rem;
  margin: 0 0 var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 34rem) {
  .about-photo { float: none; width: 7.5rem; margin: 0 0 var(--space-4); }
}

/* 5.8 Formular */
.contact-form {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-block: var(--space-6);
}
.contact-form > p, .contact-form fieldset { margin: 0 0 var(--space-5); max-width: none; }
.contact-form > p:last-child { margin-bottom: 0; }
.contact-form fieldset {
  max-width: var(--field-width);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
}
.contact-form legend { font-weight: 650; padding-inline: var(--space-2); }
.contact-form label { display: block; font-weight: 650; margin-bottom: var(--space-2); }
.contact-form .radio, .contact-form .checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 400;
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.contact-form :is(.radio, .checkbox) input { margin: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--brand-blue); }
.contact-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 100%;
  max-width: var(--field-width);
  padding: .65rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.contact-form :is(input, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
/* Aceeași lățime ca la restul câmpurilor: o coloană dreaptă, nu o scară. */
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form :is(input, textarea)[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.contact-form .button { width: 100%; padding-block: .85rem; }
@media (min-width: 34rem) { .contact-form .button { width: auto; } }

.form-hint { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-2); }
.form-req { color: var(--error); font-weight: 700; }
.form-req-note { margin-top: 0; }
.form-error {
  display: block;
  margin-top: var(--space-2);
  color: var(--error);
  font-size: var(--step--1);
  font-weight: 600;
}
.form-errors {
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  color: var(--error);
  font-size: var(--step-0);
}
.form-errors p { margin: 0 0 var(--space-2); max-width: none; font-weight: 600; }
.form-errors ul { margin: 0; padding-left: var(--space-5); }
.form-errors li { margin-bottom: var(--space-1); }
.form-errors li:last-child { margin-bottom: 0; }
.form-errors a { color: inherit; font-weight: 600; }
/* Fieldset-ul „de ce ai nevoie" e țintă de ancoră: focusul programatic nu trebuie să arate
   ca un contur rătăcit în jurul întregului grup, dar nici să dispară complet. */
.contact-form fieldset:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Honeypot: invizibil pentru oameni, prezent pentru boți. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 5.9 Footer */
.site-footer {
  margin-top: var(--space-9);
  background: var(--footer-bg);
  color: var(--footer-text);
  padding-block: var(--space-7) var(--space-6);
  font-size: var(--step--1);
}
.site-footer a { color: var(--footer-link); }
.site-footer a:hover { color: var(--brand-amber); }
.footer-inner {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .footer-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.footer-logo { height: 2.6rem; width: auto; margin-bottom: var(--space-4); }
.footer-tagline { color: var(--footer-text); max-width: 48ch; margin-bottom: 0; }
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.footer-links a { text-decoration: none; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(142, 202, 230, .25);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  color: color-mix(in srgb, var(--footer-text) 78%, transparent);
}
.footer-bottom p { margin: 0; max-width: none; }

/* 5.10 Homepage: secțiunea inversată, pașii pe scurt, cifrele */

/* Un singur bloc închis în pagină, ca ritm vizual între benzile deschise. Pe fundal închis,
   inelul de focus bleumarin ar fi invizibil — de aceea `--focus` se rescrie local, aici și
   în footer, care are aceeași problemă. */
.section-invert, .site-footer { --focus: var(--brand-amber); }
.section-invert {
  background: var(--invert-bg);
  color: var(--footer-text);
}
.section-invert :is(h2, h3) { color: #fff; }
.section-invert p { color: var(--footer-text); }
.section-invert .button-secondary {
  color: var(--footer-text);
  border-color: color-mix(in srgb, var(--brand-sky) 55%, transparent);
}
.section-invert .button-secondary:hover {
  background: color-mix(in srgb, var(--brand-sky) 14%, transparent);
  color: #fff;
  border-color: var(--brand-sky);
}

/* Cei cinci pași ai procesului, în rezumat. Selectorul începe cu `main` ca să bată
   `main :is(ul, ol)` pe specificitate, fără `!important`. */
main .steps-mini {
  list-style: none;
  padding-left: 0;
  max-width: none;
  margin: var(--space-6) 0 var(--space-5);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.steps-mini > li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.step-text { font-weight: 600; font-size: var(--step--1); line-height: 1.35; }

/* Cifrele verificabile din studiul de caz. */
main .stat-list {
  list-style: none;
  padding-left: 0;
  max-width: none;
  margin: var(--space-6) 0 var(--space-5);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.stat-list > li { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand-amber);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: var(--step--1); line-height: 1.4; }

/* Detaliul erorii de pe pagina de 500 — emis DOAR în dev și pe staging (app/errors.php). */
.dev-error {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--step--1);
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

/* 5.11 Coloana laterală (.page-rail) */

/* Coloana laterală NU introduce conținut nou care să lipsească de pe telefon. Sub prag ea
   coboară sub coloana principală, deci ordinea din DOM e ordinea de pe telefon — de aceea
   în ea intră doar lucruri care se citesc bine și la sfârșit de pagină. Ce e doar o repetare
   a paginii (navigarea pe ancore, butonul de consultație de jos) primește `page-rail-extra`
   și dispare complet sub prag: pe telefon ar fi al doilea exemplar al aceluiași lucru. */
.page-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 75rem) {
  .page-rail { margin-top: var(--space-6); }
}
.page-rail-extra { display: none; }
@media (min-width: 75rem) {
  .page-rail-extra { display: flex; }
}

.rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.rail-card > :last-child { margin-bottom: 0; }
/* În 20rem nu încape un rând de citit; tot ce e în card e text scurt, pe toată lățimea lui. */
.rail-card :is(p, ul, ol) { max-width: none; }

/* Cardul de consultație: singurul accent tare din coloană, ca ochiul să nu ezite între două. */
.rail-cta { border-left: 5px solid var(--brand-amber); }
.rail-cta .button { width: 100%; }
.rail-cta .actions { margin-bottom: var(--space-3); }

/* Titlu de card lateral: aceeași etichetă mică și distanțată ca `h3` din studiul de caz —
   coloana are alt rang decât pagina, iar tipografia trebuie s-o spună. */
.rail-title {
  margin: 0 0 var(--space-3);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--link);
}

/* Navigarea pe ancore: fără marcatori, fiindcă nu e o listă de citit, ci un cuprins. */
.rail-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rail-nav li { margin: 0; }
.rail-nav a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--border);
  color: var(--text);
  text-decoration: none;
  line-height: 1.35;
}
.rail-nav a:hover {
  border-left-color: var(--brand-amber);
  color: var(--link-hover);
  text-decoration: underline;
}

/* Fapte scurte: termen deasupra, valoare dedesubt — la 20rem, o listă pe două coloane
   s-ar rupe urât la primul cuvânt mai lung. */
.rail-facts { margin: 0; }
.rail-facts dt {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.rail-facts dd { margin: 0 0 var(--space-4); font-weight: 650; }
.rail-facts dd:last-child { margin-bottom: 0; }

/* Poza din coloană e ACELAȘI fișier ca `.about-photo` — aceeași adresă, deci browserul o
   descarcă o singură dată, oricare dintre cele două e ascunsă. Se schimbă doar locul:
   lângă text pe ecran lat, în capul paginii pe telefon (unde coloana ajunge jos, iar o poză
   la subsol n-ar mai spune nimic). */
.rail-photo { display: none; }
@media (min-width: 75rem) {
  .rail-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .about-intro .about-photo { display: none; }
}

/* 5.12 Rezervări (/rezerva/) ------------------------------------------------
   Ziua și ora stau pe același ecran: o bandă orizontală de șapte zile, apoi orele
   zilei alese. Grila lunară a dispărut fiindcă disponibilitatea e rară — o lună cu
   trei zile deschise arăta ca un calendar stricat.
   Regula de aur a blocului: tot ce e „ales", „liber" sau „plin" se marchează prin
   DOUĂ semnale (formă + culoare), niciodată doar prin culoare. */
.booking { margin-block: var(--space-6); }
.booking h2 { font-size: var(--step-2); margin-top: var(--space-6); }
.booking-note, .booking-empty { color: var(--text-muted); font-size: var(--step--1); }
.booking-empty {
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-5);
  font-size: var(--step-0);
}
.booking-back { font-size: var(--step--1); }

/* Panoul care ține pasul curent. Fără el, alegerea plutea singură într-o coloană de
   aproape 50rem și pagina părea neterminată pe ecran lat. */
.booking-panel {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-block: var(--space-5);
}
.booking-panel > :last-child { margin-bottom: 0; }

/* Titlurile mici dinăuntrul panoului („Alege o zi", „Alege o oră"). */
.booking-strip-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  max-width: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.booking-strip-title span { font-family: var(--font-body); font-size: var(--step--1); color: var(--text-muted); }
.booking-times-title { margin-top: var(--space-6); }

/* Rândul cu titlul barei și săgețile. Când o săgeată nu se poate folosi, locul ei
   rămâne ocupat de un semn stins, ca titlul să nu sară dintr-o parte în alta. */
.booking-strip-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.booking-strip-nav .booking-strip-title { margin-bottom: 0; }
.booking-arrows { display: flex; gap: var(--space-2); }
.booking-arrows :is(a, span) {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: var(--step-1);
  line-height: 1;
  text-decoration: none;
}
.booking-arrows a:hover, .booking-arrows a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.booking-arrow-off { opacity: .35; }

/* Banda de zile. Sub 34rem cele șapte celule nu încap la o lățime de atins cu degetul,
   deci banda derulează pe orizontală, în propriul container — pagina nu se lățește. */
main .booking-strip {
  list-style: none;
  padding-left: 0;
  max-width: none;
  margin: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--space-2);
}
.booking-dayx { flex: 0 0 4.25rem; margin: 0; scroll-snap-align: start; }
@media (min-width: 34rem) { .booking-dayx { flex: 1 1 0; } }
.booking-dayx > :is(a, span) {
  display: grid;
  gap: .1rem;
  justify-items: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  line-height: 1.15;
}
.booking-dayx-wd, .booking-dayx-mo { font-size: .72rem; color: var(--text-muted); }
.booking-dayx-num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Zi liberă = chenar plin, gros. Zi fără ore = chenar punctat, subțire, text stins.
   Diferența se vede și pe un ecran alb-negru, nu doar prin culoare.
   Ziua plină NU primește `opacity`: ar dilua și textul sub pragul de contrast AA.
   Se stinge cu --text-muted, care e verificat (5,45:1). */
.booking-dayx.is-free > a { border: 2px solid var(--border-strong); }
.booking-dayx.is-full > span { border: 1px dashed var(--border); color: var(--text-muted); }

/* Aceeași limbă de interacțiune în tot widget-ul: ce se poate alege se umple cu
   accent la hover și la focus — zile, ore, săgeți. */
.booking-dayx.is-free > a:hover, .booking-dayx.is-free > a:focus-visible,
.booking-dayx.is-on > :is(a, span) {
  background: var(--accent);
  border: 2px solid var(--accent);
  color: var(--on-accent);
}
.booking-dayx.is-free > a:hover :is(.booking-dayx-wd, .booking-dayx-mo),
.booking-dayx.is-free > a:focus-visible :is(.booking-dayx-wd, .booking-dayx-mo),
.booking-dayx.is-on :is(.booking-dayx-wd, .booking-dayx-mo) { color: var(--on-accent); }

/* Orele libere: rânduri late, ușor de atins, așezate pe câte coloane încap. O listă
   pe o singură coloană ar fi însemnat 25 de rânduri într-o zi plină. */
main .booking-times {
  list-style: none;
  padding-left: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.booking-times li { margin: 0; }
.booking-times a {
  display: block;
  padding: .7rem 1rem;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.booking-times a:hover, .booking-times a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Ziua fără ore libere. În loc să lăsăm vizitatorul să caute singur prin zile goale,
   îi dăm saltul la următoarea zi liberă. */
.booking-none {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.booking-none-title { font-family: var(--font-display); font-size: var(--step-1); margin: 0 auto var(--space-4); max-width: 26rem; }
.booking-none p { max-width: none; }

/* Recapitularea de pe pasul cu datele: vizitatorul vede ce rezervă cât completează. */
.booking-recap {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-block: var(--space-5);
}
.booking-recap p { max-width: none; margin: 0; }
.booking-recap-label { font-size: var(--step--1); color: var(--text-muted); }
.booking-recap-day { font-family: var(--font-display); font-size: var(--step-1); font-weight: 650; }
.booking-recap-time {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.booking-recap-time span { font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: var(--text-muted); }
.booking-recap .booking-back { display: inline-block; margin-top: var(--space-3); }

/* Formularul reia stilul celui de contact — un vizitator nu trebuie să învețe
   două feluri de câmpuri pe același site. */
.booking-form {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-block: var(--space-5);
}
.booking-form > p { margin: 0 0 var(--space-5); max-width: none; }
.booking-form > p:last-child { margin-bottom: 0; }
.booking-form label { display: block; font-weight: 650; margin-bottom: var(--space-2); }
.booking-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 100%;
  max-width: var(--field-width);
  padding: .65rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.booking-form :is(input, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.booking-form textarea { resize: vertical; min-height: 6rem; }
.booking-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.booking-form legend { padding: 0; font-weight: 650; margin-bottom: var(--space-2); }

/* Pastilele cu tipul proiectului. Butoane radio normale, deci merg fără JS; ce vezi
   e eticheta. Starea „ales" se citește cu `input:checked + span`, nu cu `:has()`:
   pe un browser fără `:has()` vizitatorul n-ar vedea deloc ce a bifat. */
.booking-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.booking-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.booking-pill span {
  display: block;
  padding: .5rem .9rem;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.booking-pill input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.booking-pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.booking-form .button { width: 100%; padding-block: .85rem; }
@media (min-width: 34rem) { .booking-form .button { width: auto; } }

/* Confirmarea și anularea. Bordura groasă din stânga e singura diferență între
   „e bine" (accent) și „doar te informez" (bordură neutră). */
.booking-ok {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.booking-ok-neutral { border-left-color: var(--border-strong); }
.booking-ok h2 { margin-top: 0; }
.booking-ok p { max-width: none; }
.booking-slot {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 650;
}
.booking-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: 0;
}
.booking-cancel { font-size: var(--step--1); }

/* 5.13 Panoul de rezervări (/admin/) ---------------------------------------
   Unealtă internă, nu pagină publică: fără antet, fără footer, fără decor.
   Folosește însă aceiași tokeni, deci merge și în dark mode. */
.admin { background: var(--bg); color: var(--text); }
.admin-page { padding-block: var(--space-6) var(--space-8); }
.admin-page section { margin-top: var(--space-8); }
.admin-lede { color: var(--text-muted); }
.admin-flash {
  background: var(--surface-sunken);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-4);
  max-width: none;
  font-weight: 600;
}
.admin-flash-bad { border-left-color: var(--error); color: var(--error); }
.admin-empty { color: var(--text-muted); }

/* Cifrele de sus: rezultatul bifelor, nu bifele. „Am salvat" nu spune nimic;
   „24 de ore deschise pe săptămână" spune. */
main .admin-stats {
  list-style: none;
  padding-left: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.admin-stats li {
  flex: 1 1 8rem;
  margin: 0;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.admin-stats span { font-size: var(--step--1); color: var(--text-muted); }

/* Butoanele „toată ziua" / „toate zilele". Ascunse în HTML, arătate de JS — fără el
   ar trebui să fie formulare separate care salvează la fiecare clic. */
.admin-toggle {
  display: block;
  margin: var(--space-1) auto 0;
  padding: .1rem .4rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: .65rem;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}
.admin-toggle:hover, .admin-toggle:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Bara de salvare rămâne la vedere: grila are 25 de rânduri, iar butonul ascuns
   la capătul ei înseamnă un scroll întreg după fiecare bifă. */
.admin-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.admin-hint { margin: 0; max-width: none; font-size: var(--step--1); color: var(--text-muted); }

/* Grila de disponibilitate: 25 de ore × 7 zile. Pe telefon nu încape, deci
   derulează pe orizontală în propriul container — pagina nu se lățește. */
.admin-scroll { overflow-x: auto; margin-bottom: var(--space-5); }
.admin-grid { border-collapse: collapse; font-size: var(--step--1); }
.admin-grid :is(th, td) { border: 1px solid var(--border); padding: 0; text-align: center; }
.admin-grid thead th { padding: var(--space-2) var(--space-3); background: var(--surface-sunken); }
.admin-grid tbody th {
  padding: 0 var(--space-3);
  background: var(--surface-sunken);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ținta de click e toată celula, nu doar pătrățelul de 16px. */
.admin-cell { display: block; padding: .4rem 1rem; cursor: pointer; }
.admin-cell input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--brand-blue); }
.admin-cell:has(input:checked) { background: var(--accent); }

.admin-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.admin-inline label { font-weight: 650; }
.admin-inline input[type="date"] {
  padding: .5rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.admin-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
main .admin-list { list-style: none; padding-left: 0; max-width: none; margin-top: var(--space-4); }
.admin-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 26rem;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.admin-booking {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.admin-booking h3 { margin-top: 0; font-size: var(--step-1); }
.admin-booking dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); }
.admin-booking dt { font-weight: 650; color: var(--text-muted); }
.admin-booking dd { margin: 0; }
.admin-back { margin-top: var(--space-8); font-size: var(--step--1); }

/* 6. UTILITARE ------------------------------------------------------------- */

/* Apariție discretă la scroll. Clasa `.reveal` e pusă din JS DOAR pe elementele aflate sub
   linia de plutire în momentul rulării: nimic vizibil nu poate rămâne ascuns dacă scriptul
   nu pornește, și nu există licărire la încărcare.
   Animația folosește `backwards`, nu `forwards`: după ce se termină, elementul revine la
   valorile din regulile lui normale, deci ridicarea la hover a cardurilor rămâne funcțională.
   `prefers-reduced-motion` o oprește prin regula globală din 7.3. */
.reveal { opacity: 0; }
.reveal.in {
  opacity: 1;
  animation: reveal-in .5s ease var(--reveal-delay, 0ms) backwards;
}
.reveal:nth-child(3n + 2) { --reveal-delay: 70ms; }
.reveal:nth-child(3n + 3) { --reveal-delay: 140ms; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 7. PREFERINȚE ------------------------------------------------------------ */

/* 7.1 Mobil: meniul devine buton + listă verticală (progresiv, cu JS). */
@media (max-width: 49.99rem) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 650;
    cursor: pointer;
  }
  .nav-toggle::before {
    content: "";
    width: 1.05rem;
    height: .7rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: inset 0 0 0 1px transparent, 0 0 0 0 transparent;
    background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
  }
  /* Deschis, cele trei linii devin X: bara de sus și cea de jos dispar, linia din mijloc
     se rotește, iar ::after aduce contra-bara. Numele butonului rămâne „Meniu" —
     starea o duce `aria-expanded`, nu textul. */
  .nav-toggle { position: relative; }
  .nav-toggle::before { transition: transform .2s ease, border-color .2s ease; }
  .nav-toggle[aria-expanded="true"] { background: var(--surface-sunken); }
  .nav-toggle[aria-expanded="true"]::before {
    border-top-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--space-4);
    width: 1.05rem;
    height: .7rem;
    margin-top: -.35rem;
    background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
    transform: rotate(-45deg);
  }
  /* <nav> e item de flex și se strânge pe lățimea conținutului, așa că `width: 100%`
     de mai jos s-ar raporta la el, nu la antet — meniul deschis ar rămâne o coloană
     îngustă lipită de dreapta. Îl ducem pe toată lățimea, ceea ce îl trimite pe al
     doilea rând al antetului; închis e gol, deci `row-gap: 0` nu lasă spațiu mort. */
  .site-header-inner { row-gap: 0; }
  .js .site-nav { width: 100%; }
  /* Pe mobil pastila rămâne în ordinea din HTML — brand, limbă, „Meniu" — iar marginea
     automată le lipește pe ultimele două de dreapta. Navigația trece pe rândul al doilea
     singură, fiindcă ocupă toată lățimea. */
  .site-header-inner > .nav-lang { order: 0; margin-left: auto; }
  .site-nav { margin-left: 0; }

  .js .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    /* `.nav-menu` de bază e `flex-wrap: wrap`, ceea ce pe coloană înseamnă a doua
       COLOANĂ când conținutul nu încape pe înălțime (text mărit din setările
       telefonului, ecran scund). Aici vrem derulare, nu coloane. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-3);
    border-top: 1px solid var(--border);
  }
  /* Panou pe tot ecranul. NU folosim `position: fixed`: antetul are `backdrop-filter`,
     iar un element cu backdrop-filter devine bloc de referință pentru descendenții
     fixați — panoul s-ar ancora de antet, nu de ecran, diferit de la browser la browser.
     Rămâne în flux normal, cu înălțime cât ecranul minus antetul. */
  .js .nav-menu.open {
    display: flex;
    height: calc(100dvh - 4.5rem);
    padding-bottom: var(--space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
  }
  html.nav-open { overflow: hidden; }
  html.nav-open .site-header { background: var(--bg); }

  .js .nav-menu > li { border-bottom: 1px solid var(--border); flex: 0 0 auto; }
  .js .nav-menu a { padding: var(--space-4) var(--space-3); border-radius: 0; font-size: var(--step-0); }

  /* Numele paginii cu fontul de titlu, explicația dedesubt. */
  .js .nav-menu .nav-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.15;
  }
  .js .nav-menu .nav-hint {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-muted);
  }

  /* Pagina curentă: bară verticală chihlimbarie la marginea din stânga. Bate regula
     generală de `aria-current` (0,3,1 față de 0,2,1), care pune o linie sub tot rândul. */
  .js .nav-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand-amber); }

  /* Acțiunile stau lipite de marginea de jos, în zona degetului mare. */
  .js .nav-menu > li:has(.nav-cta) { margin-top: auto; }
  .js .nav-menu .nav-extra { display: block; }

  /* „Ce intră în fiecare site": umple golul dintre pagini și acțiuni cu răspunsul la
     întrebarea care oprește omul din decizie. Nu e rând de meniu, deci nu are link, nu
     are bordurile lui și nu intră în numărătoarea de mai jos ca element apăsabil. */
  .js .nav-menu .nav-included { padding: var(--space-5) var(--space-3); }
  .nav-included-label {
    margin: 0 0 var(--space-3);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .nav-included ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-included li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--step--1);
    line-height: 1.4;
  }
  /* Bifa e desenată din două borduri rotite, nu dintr-un caracter „✓": nu depinde de
     fontul de sistem. `--link` (nu chihlimbariul) pentru că e text colorat pe alb. */
  .nav-included li::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: .34em;
    width: .68rem;
    height: .36rem;
    border-left: 2px solid var(--link);
    border-bottom: 2px solid var(--link);
    transform: rotate(-45deg);
  }
  .nav-included-note {
    margin: var(--space-4) 0 0;
    font-size: var(--step--1);
    font-weight: 650;
  }
  .js .nav-menu .nav-cta { border-radius: var(--radius); margin: var(--space-3) 0; text-align: center; }
  .js .nav-menu .nav-whatsapp {
    border: 2px solid var(--border-strong);
    border-radius: var(--radius);
    text-align: center;
    font-weight: 650;
  }
  .js .nav-menu > li:has(.nav-cta),
  .js .nav-menu > li:has(.nav-whatsapp) { border-bottom: 0; }

  /* Intrare decalată, cu aceeași animație ca restul site-ului. Fără JS și fără clase
     puse din script: totul pornește de la `.open`. */
  .js .nav-menu.open > li { animation: reveal-in .34s ease var(--reveal-delay, 0ms) backwards; }
  .js .nav-menu.open > li:nth-child(2) { --reveal-delay: 45ms; }
  .js .nav-menu.open > li:nth-child(3) { --reveal-delay: 90ms; }
  .js .nav-menu.open > li:nth-child(4) { --reveal-delay: 135ms; }
  .js .nav-menu.open > li:nth-child(5) { --reveal-delay: 180ms; }
  .js .nav-menu.open > li:nth-child(6) { --reveal-delay: 225ms; }
  .js .nav-menu.open > li:nth-child(7) { --reveal-delay: 270ms; }
}

/* Regula globală de mai jos (7.4) taie doar durata animațiilor, nu și întârzierea:
   un element cu 270 ms de așteptare ar rămâne invizibil și apoi ar clipi. */
@media (prefers-reduced-motion: reduce) {
  .js .nav-menu.open > li { animation: none; }
}

/* 7.2 Telefoane înguste: antetul are acum trei lucruri pe rând — logo, limbă, „Meniu" —
   și sub ~408 px nu mai încap. Strângem spațiile în loc să lăsăm bara pe două rânduri;
   sub 352 px cuvântul „Meniu" rămâne doar pentru cititoarele de ecran, iconița ajunge.
   Pastila de limbă NU se micșorează: ea e motivul pentru care există bara. */
@media (max-width: 25.5rem) {
  .site-header-inner { gap: var(--space-3); }
  .brand-logo { height: 2.2rem; }
  .nav-lang { padding-inline: var(--space-2); }
  .nav-toggle { gap: var(--space-2); padding-inline: var(--space-3); }
  /* Contra-bara din X e poziționată absolut, deci urmează padding-ul cu mâna. */
  .nav-toggle[aria-expanded="true"]::after { left: var(--space-3); }
}
@media (max-width: 22rem) {
  /* Aceleași declarații ca .visually-hidden, aplicate condiționat: butonul rămâne cu
     numele „Meniu" pentru tastatură și cititoare de ecran, fără text pe ecran. */
  .nav-toggle-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .nav-toggle { min-width: 2.75rem; justify-content: center; }
  .nav-toggle[aria-expanded="true"]::after { left: 50%; margin-left: -.525rem; }
}

/* 7.3 Dark mode — doar tokenii semantici se schimbă. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Cinci trepte distincte, de la cea mai închisă la cea mai deschisă:
       footer → pagină → suprafețe scufundate → benzi și secțiunea inversată → carduri.
       Înainte, fundalul și footerul difereau cu câteva procente și secțiunile se topeau
       una într-alta. */
    --bg: var(--navy-950);
    --bg-band: var(--navy-900);
    --surface: #022c40;
    --surface-sunken: var(--navy-900);
    --text: #e8f2f7;
    --text-muted: #9fbdcc;
    --link: var(--brand-sky);
    --link-hover: var(--brand-amber);
    --border: #0e4a66;
    --border-strong: #4e7c94;
    --accent-text: var(--brand-amber);   /* 10,49:1 pe fundal, 8,37:1 pe carduri */
    --focus: var(--brand-amber);
    --error: #ff9e96;
    --error-bg: #3a1512;
    --invert-bg: var(--navy-700);
    --footer-bg: var(--navy-990);
    --footer-text: #cfe3ee;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, .45);
    --art-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  }
  .hero {
    background:
      radial-gradient(60rem 26rem at 88% -18%, rgba(33, 158, 188, .28), transparent 70%),
      linear-gradient(180deg, var(--navy-700), var(--bg) 78%);
  }
  .site-header { background: color-mix(in srgb, var(--bg) 90%, transparent); }
  .card { background: var(--surface); }
  ::selection { background: var(--brand-amber); color: var(--brand-navy); }
}

/* 7.4 Mișcare redusă */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 7.5 Print */
@media print {
  /* Coloana laterală e navigare și îndemn, nu conținut: pe hârtie n-are ce căuta. */
  .site-header, .actions, .contact-form, .hero-art, .nav-toggle, .page-rail { display: none; }
  /* Capturile din aplicație sunt ecrane aproape negre: pe hârtie ies pete de toner, iar
     textul din ele e ilizibil la 11pt. Listele din jur spun oricum ce era în ele. */
  .shots { display: none; }
  /* Footerul rămâne: e singurul loc din pagină cu adresa de email. Fără el, o pagină
     tipărită nu spune cititorului cum să ne contacteze. */
  .site-footer {
    margin-top: var(--space-5);
    padding: var(--space-4) 0 0;
    background: none;
    color: #000;
    border-top: 1px solid #999;
  }
  .site-footer a { color: #000; }
  .footer-logo, .footer-bottom p:last-child { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .card, .case-study, .process-steps > li { border: 1px solid #999; box-shadow: none; background: none; }
  /* La tipărire nu există scroll, deci IntersectionObserver nu apucă să dezvăluie nimic:
     fără regula asta, jumătate din pagină s-ar tipări goală. */
  .reveal { opacity: 1; animation: none; }
}