/* ─────────────────────────────────────────────────────────────────────
   Fonturi găzduite local — 4 fișiere woff2, doar latin și latin-ext.

   Amândouă sunt VARIABILE: un fișier per subset acoperă toată plaja de
   greutăți. Sistemul a scăzut de la 6 fișiere / 187 KB la 4 / 110 KB, iar
   perechea preîncărcată deasupra liniei de plutire de la 105 KB la 59 KB.

   Româna are nevoie de amândouă subseturile: â și î stau în `latin`, dar
   ă (U+0103), ș (U+0219) și ț (U+021B) stau în `latin-ext`.
   ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/bitter-latin-ext-66dee4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/bitter-latin-0f3d8f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/public-sans-latin-ext-e969b8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/public-sans-latin-fd76a1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   IMPERIAL FORAJE OLTENIA — sistem vizual

   DIRECȚIA: „tabela de preț".

   Site-ul e construit ca o tabelă de prețuri, nu ca o broșură. Firma vinde
   absența minciunii într-o piață construită pe ea; design-ul face un lucru
   pe care concurența nu îl poate copia fără să-și strice modelul de
   business — pune cifra în față, mare, prima, fără scăpare.

   TREI REGULI DE CARE NU SE ABATE NIMIC:

   1. Fără carduri, fără umbre, fără colțuri rotunjite. Secțiunile se
      despart prin LINII DE RULARE și prin saltul de mărime al cifrelor,
      niciodată prin alternanță de fundal alb/gri.
   2. Cifra e element de design, nu conținut. Prețurile sunt cel mai mare
      lucru de pe ecran, după titlu.
   3. Culoarea vine în BLOCURI PLINE, nu în accente. Oceanul nu e culoarea
      titlurilor — e culoarea unor benzi întregi de pagină.

   Sistemul e deliberat mic: două familii de font, patru grupe de culoare,
   o singură rază de colț (zero). Tot caracterul vine din scară și din
   spațiere, nu din efecte.

   Contrastele sunt măsurate, nu estimate: toate cele 18 perechi folosite
   trec 4,5:1 (elementele mari, 3:1). Verificarea în
   01-analiza/design/paletar-si-tipografie.md.
   ============================================================ */

:root{
  /* ── CERNEALĂ — titluri, corp, linii. Neutru CALD, nu verde-gri. ──── */
  --ink-950:#14110E; --ink-900:#221E19; --ink-800:#332E26;
  --ink-700:#453E35; --ink-600:#5C5348; --ink-500:#7A705F;
  --ink-400:#9C9384; --ink-300:#BDB5A6; --ink-200:#DAD3C4;
  --ink-100:#E9E4D9;

  /* ── OS — hârtia. Alb cald, nu gri. ────────────────────────────────── */
  --bone:#F8F5EF;  --bone-2:#F1EDE4;  --white:#fff;

  /* ── OCEAN — culoarea de brand, cerută de client: #00243B. ─────────
     Nuanță 203°, saturație 100%, luminozitate 11,6%. E un albastru foarte
     închis, iar asta schimbă felul în care se folosește: are 15,96:1 cu
     albul PESTE el și 14,67:1 PE hârtie. Adică aceeași culoare poate fi și
     fundal de bloc, și text, și cifră de preț — fără nicio variantă
     intermediară. Sistemul devine mai simplu, nu mai complicat.

     Treptele de sub ancoră sunt aproape negre; cele de deasupra pierd
     saturație pe măsură ce urcă lumina, altfel ar deveni electrice. */
  --ocean-950:#00090F; --ocean-900:#00101A; --ocean-800:#001726;
  --ocean-700:#001E30; --ocean-600:#00243B; --ocean-500:#02385A;
  --ocean-400:#095586; --ocean-300:#3E94CC; --ocean-200:#92C0DD;
  --ocean-100:#D0E4F1;

  /* ── SEMNAL — un singur ARGUMENT, nu un singur loc.
     Apare exact acolo unde vorbim despre ce ascund alții: lista „nu intră
     în preț" și blocul de comparație. Nicăieri altundeva. Dacă ar ajunge
     pe butoane sau pe cifre de preț, n-ar mai semnala nimic.
     Nu roșu: o firmă sigură pe ea nu țipă. ─────────────────────────── */
  --signal:#B03A07;       /* 5,59:1 pe --bone */
  --signal-dark:#F0873F;  /* 7,38:1 pe --ink-950 */

  /* Etichetele mici, majuscule și spațiate, apar pe ambele fundaluri. Un
     singur cod nu poate trece 4,5:1 și pe hârtie, și pe fundal închis:
     condițiile se exclud reciproc. De aceea sunt doi tokeni.
     Prima valoare încercată, #7A705F, dădea 4,48:1 pe --bone — sub prag
     cu patru sutimi. Măsurat, nu aproximat. */
  --label:#6B6153;       /* 5,58:1 pe --bone · 5,19:1 pe --bone-2 */
  --label-dark:#BDB5A6;  /* 9,25:1 pe --ink-950 */

  /* ── Tipografie ───────────────────────────────────────────────────────
     Bitter: slab variabil, cu serife tăiate drept, desenat pentru ecran.
     Nu e un serif elegant de firmă de avocatură — e greu, blunt, cu cifre
     late. La 800 și la mărime mare arată ca un preț bătut în cui.

     Public Sans la corp: neutru, desenat pentru documente publice, cu o
     lizibilitate care contează când cititorul are 55 de ani și e în curte,
     în soare, pe un telefon ieftin.

     Nu există al treilea font. Etichetele tehnice merg tot pe Bitter, cu
     majuscule și spațiere — un slab tracked citește „registru contabil",
     exact registrul de care avem nevoie. `--f-mono` rămâne ca alias, ca
     regulile vechi să nu se rupă. */
  --f-display:'Bitter',Georgia,'Times New Roman',serif;
  --f-body:'Public Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --f-num:'Bitter',Georgia,serif;
  --f-mono:'Bitter',Georgia,serif;

  /* ── Linii de rulare. Structura paginii, nu decor. ─────────────────── */
  --rule:1px solid var(--ink-200);
  --rule-strong:2px solid var(--ink-950);
  --rule-dark:1px solid rgba(255,255,255,.18);

  /* `--hair` / `--hair-dark` sunt numele vechi, din proiectul anterior. Au
     rămas în ~30 de reguli din `pages.css` și `site.css`, iar cum nu mai erau
     definite nicăieri, TOATE bordurile alea nu se randau deloc: `border` cu o
     variabilă nedefinită e o declarație invalidă, iar browserul o aruncă în
     tăcere. Alias, nu căutare-și-înlocuire: același tipar ca `--f-mono`, și
     nu atinge treizeci de reguli ca să schimbe un nume. */
  --hair:var(--rule);
  --hair-dark:var(--rule-dark);

  --gut:clamp(20px,5vw,64px);
  /* Lățimea utilă pe desktop. Cerută de Cosmin (2026-09-01): puțin mai lată
     decât proiectul anterior, care mergea pe 1360. Pe direcția „tabelă de
     preț" lățimea nu e cosmetică — matricea de prețuri are cinci coloane și
     câștigă direct din fiecare pixel: cu cât respiră mai mult, cu atât se
     citește un rând dintr-o privire. Gutiera rămâne aceeași, deci pe ecrane
     mici nu se schimbă nimic. */
  --maxw:1440px;

  /* Zero. Nicăieri. Un colț rotunjit strică tot registrul. */
  --radius:0;
}

/* Cifrele se aliniază unitate sub unitate, oriunde apar. Pe un site
   construit în jurul prețurilor, asta nu e un detaliu. */
.num,[class*="__n"],table td,table th{font-variant-numeric:tabular-nums}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink-900);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Sari la conținut — invizibil până când primește focus de la tastatură.
   Nu folosim display:none, care l-ar scoate din ordinea de tabulare. */
.skip{
  position:absolute;left:16px;top:-64px;z-index:200;
  background:var(--ocean-600);color:#fff;padding:12px 20px;border-radius:0;
  font-family:var(--f-mono);font-size:13px;
  transition:top .14s ease;
}
.skip:focus{top:16px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.04;letter-spacing:-.022em;margin:0}
p{margin:0}
::selection{background:var(--ocean-600);color:#fff}

/* grain — textură fină, doar atmosferă */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.032;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* eticheta tehnică — se repetă în tot site-ul */
.tag{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label);
  display:inline-flex;align-items:flex-start;gap:10px;
}
/* flex:none — altfel linia se comprimă când eticheta se rupe pe două rânduri */
.tag::before{
  content:"";width:22px;height:1px;flex:none;background:var(--ink-400);
  align-self:flex-start;margin-top:.62em;
}
.tag--light{color:var(--ocean-300)}

/* Pe fundal închis, `--label` (#6B6153) dă 3,1:1 — sub pragul de 4,5:1 pentru
   text mic. Tokenul pentru contextul închis există deja și dă 9,25:1; lipsea
   doar regula care îl aplică. `:not(.tag--light)` ca varianta explicită să
   rămână mai tare decât cea contextuală. */
:is(.sec--dark,.cmp,.ftr) .tag:not(.tag--light){color:var(--label-dark)}
:is(.sec--dark,.cmp,.ftr) .tag:not(.tag--light)::before{background:var(--ink-500)}
.tag--light::before{background:var(--ocean-300);opacity:.6}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:-.005em;
  padding:15px 26px;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--ocean-600);color:#fff}
.btn--primary:hover{background:var(--ocean-800)}
.btn--ghost{border-color:var(--ink-300);color:var(--ink-900)}
.btn--ghost:hover{border-color:var(--ink-900);background:var(--ink-900);color:var(--bone)}
.btn--ghost:hover svg{transform:none}
.btn--onDark{border-color:rgba(255,255,255,.28);color:#fff}
.btn--onDark:hover{background:#fff;color:var(--ink-950);border-color:#fff}
.btn--solidLight{background:#fff;color:var(--ocean-800);border-color:#fff}
.btn--solidLight:hover{background:var(--ocean-100);border-color:var(--ocean-100);color:var(--ocean-900)}
.btn--tel{font-family:var(--f-mono);font-weight:500;letter-spacing:.01em}
.btn--wa{background:#128C7E;color:#fff}
.btn--wa:hover{background:#0d6b60}

/* ================= BANDĂ DE PREȚ =================
   Înlocuiește banda rulantă din sistemul anterior. Nu se mișcă: e o cifră,
   iar o cifră în mișcare nu se poate citi. Model mental: tabela de la
   benzinărie — un preț, un număr de telefon, permanent la vedere.

   Fundal întunecat, nu albastru de brand: albastrul e rezervat blocurilor
   mari din pagină. Aici avem nevoie de ceva care să nu concureze cu ele.
   ============================================================== */
.pbar{
  background:var(--ink-950);
  color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.pbar__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:42px;
}
.pbar__k{
  font-family:var(--f-body);
  font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--label-dark);
}
.pbar__price,.pbar__tel{
  display:flex;align-items:baseline;gap:10px;
  margin:0;white-space:nowrap;
}
.pbar__price b,.pbar__tel b{
  font-family:var(--f-num);font-weight:700;font-size:15px;
  letter-spacing:-.01em;
}
.pbar__price b{color:var(--ocean-300)}
.pbar__note{
  font-size:12px;color:var(--ink-300);
}
.pbar__tel{text-decoration:none;color:inherit}
.pbar__tel:hover b{color:var(--ocean-300)}

@media (max-width:760px){
  /* Pe telefon, banda păstrează doar prețul. Telefonul e deja în bara fixă
     de jos, la degetul mare — repetat aici ar fi zgomot, nu ajutor. */
  .pbar__tel{display:none}
  .pbar__note{display:none}
  .pbar__in{min-height:36px;justify-content:flex-start}
  .pbar__k{font-size:10px}
  .pbar__price b{font-size:14px}
}

/* ================= HEADER ================= */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(251,248,242,.86);
  backdrop-filter:saturate(1.3) blur(14px);border-bottom:var(--hair);
  transition:box-shadow .2s ease;
}
/* Singura umbră din tot sistemul, și e funcțională, nu decorativă: antetul
   plutește peste conținut, iar linia de 1 px nu ajunge când sub ea trece un
   tabel cu linii proprii. Apare doar după ce pagina s-a mișcat — în capul
   paginii nu are ce despărți, iar o umbră permanentă ar fi exact decorul pe
   care sistemul îl refuză.

   Umbra e caldă (tokenul de cerneală, nu negru pur): pe fundalul de os, un
   negru neutru se vede gri-albăstrui și iese din paletă. */
.hdr.is-stuck{
  box-shadow:0 1px 0 rgba(20,17,14,.05), 0 10px 26px -14px rgba(20,17,14,.30);
}
@media (prefers-reduced-motion:reduce){ .hdr{transition:none} }
.hdr__in{display:flex;align-items:center;gap:32px;height:74px}
/* Sigla din antet. Lockup-ul trimis de client conține și numele, deci nu mai
   există text alături — de aici și lățimea mult mai mică a blocului.
   Înălțimea o dă bara (74 px, 64 sub 640), lățimea vine din raport, deci
   sigla nu se deformează niciodată. */
.brand{display:flex;align-items:center;margin-right:auto;flex:none;min-width:0}
.brand__logo{
  display:block;width:auto;
  /* Înălțimea e a MARCII, nu a fișierului: după ce s-a tăiat spațiul gol de
     la bază, aceeași valoare arată sigla vizibil mai mare. 36 px într-o bară
     de 74 lasă marginile egale sus și jos. */
  height:clamp(26px,2.7vw,36px);
  transition:opacity .18s ease;
}
.brand:hover .brand__logo{opacity:.78}


.nav{display:flex;gap:30px}
.nav a{
  font-size:14.5px;font-weight:500;color:var(--ink-700);position:relative;padding:4px 0;
  transition:color .16s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ocean-600);transition:right .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink-950)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}

.hdr__cta{display:flex;align-items:center;gap:14px;flex:none}
.hdr__tel{
  font-family:var(--f-mono);font-size:14.5px;font-weight:500;color:var(--ink-900);
  display:flex;align-items:center;gap:9px;transition:color .16s;
}
.hdr__tel:hover{color:var(--ocean-600)}
.hdr__tel svg{width:15px;height:15px;color:var(--ocean-600)}
.burger{display:none;width:42px;height:42px;border:var(--hair);background:none;cursor:pointer;place-items:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink-900);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink-900)}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* ---------- meniu mobil ---------- */
.burger[aria-expanded="true"]{border-color:var(--ink-900);background:var(--ink-900)}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before,
.burger[aria-expanded="true"] span::after{background:var(--bone);top:0}
.burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}
.burger span::before,.burger span::after{transition:transform .22s cubic-bezier(.2,.7,.3,1),top .22s cubic-bezier(.2,.7,.3,1)}

/* ══════════════════════════════════════════════════════════════════════
   MENIU MOBIL — panou off-canvas

   Alunecă de la dreapta la stânga. Aceeași durată și aceeași curbă ca
   dropdown-ul dinainte (.32s), doar direcția e alta.

   Se animează `transform`, nu `height`: e singura proprietate pe care
   browserul o poate anima pe compositor, fără recalcul de layout la fiecare
   cadru. Dropdown-ul de dinainte trebuia să-și măsoare înălțimea în JS,
   să forțeze reflow între două valori și să pună `height:auto` la final —
   treizeci de linii care acum dispar.

   Antetul rămâne vizibil deasupra: panoul pornește de sub el (`--mnav-top`,
   măsurat la deschidere, fiindcă poziția antetului diferă după cum banda de
   preț a fost derulată sau nu) și stă pe un `z-index` mai mic decât el.
   ══════════════════════════════════════════════════════════════════════ */
.mnav{
  position:fixed;
  top:var(--mnav-top,116px);right:0;bottom:0;
  width:100%;
  z-index:90;                 /* sub .hdr (100) — antetul rămâne deasupra */
  background:var(--bone);
  border-top:var(--hair);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.22,.68,.28,1);
  /* Deliberat FĂRĂ umbră spre stânga: panoul e lat cât ecranul, deci nu are
     margine vizibilă pe care să o desprindă de ceva. */
}
.mnav.is-open{transform:translateX(0)}
.mnav[hidden]{display:none}   /* explicit — regulile de mai sus ar bate altfel atributul */

@media (prefers-reduced-motion:reduce){
  .mnav{transition:none}
}

.mnav__scroll{
  flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px var(--gut) calc(24px + env(safe-area-inset-bottom,0px));
}

.mnav__list{display:grid}
.mnav__list a{
  display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:var(--hair);
  font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.024em;
  transition:padding-left .22s cubic-bezier(.2,.7,.3,1),color .16s;
}
.mnav__list a:hover{padding-left:8px;color:var(--ocean-600)}
.mnav__list a[aria-current]{color:var(--ocean-600)}
.mnav__list i{
  font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:var(--label);flex:none;
}
.mnav__list a[aria-current] i{color:var(--ocean-300)}
.mnav__foot{display:grid;gap:10px;margin-top:22px}

/* ══════════════════════════════════════════════════════════════════════
   PROFILURI SOCIALE

   Singura formă rotundă din tot sistemul. Cerută de Cosmin, și e convenția
   pe care ochiul o caută la iconuri sociale — regula „zero colțuri
   rotunjite" privește containerele de conținut, nu butoanele de 34 px.

   La hover se inversează: fundalul devine hârtie, iconul devine albastru,
   conturul rămâne. Nu e doar un efect — inversarea păstrează exact aceeași
   suprafață și același contur, deci rândul din antet nu se mișcă cu un pixel.
   ══════════════════════════════════════════════════════════════════════ */
.soc{display:flex;align-items:center;gap:9px}
.soc__a{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--ocean-600);
  border:1.5px solid var(--ocean-600);
  color:#fff;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.soc__a svg{width:17px;height:17px;display:block}
.soc__a:hover,.soc__a:focus-visible{
  background:var(--bone);
  color:var(--ocean-600);
}

/* În antet stau lipite de zona de acțiune, cu o linie care le desparte de
   meniu — altfel se citesc ca încă trei intrări de navigare. */
/* Fără `margin-left:auto`: `.brand` are deja `margin-right:auto`, iar două
   margini automate ar împărți spațiul liber în două și ar lăsa meniul să
   plutească la mijloc. Grupul meniu + social + acțiuni rămâne lipit la dreapta,
   cum era. */
.soc--hdr{
  padding-left:clamp(16px,1.8vw,26px);
  border-left:var(--hair);
}
/* Sub 1240 px antetul e deja strâmt (meniul își micșorează fontul acolo);
   iconurile ies primele, pentru că telefonul și butonul contează mai mult. */
@media (max-width:1240px){ .soc--hdr{display:none} }

/* În panoul mobil: pe fundal deschis, cu aer deasupra și o linie de rulare,
   ca să nu pară al treilea buton. */
.soc--mnav{
  margin-top:22px;padding-top:22px;border-top:var(--hair);
  justify-content:center;gap:14px;
}
.soc--mnav .soc__a{width:44px;height:44px}   /* țintă de atingere, nu decor */
.soc--mnav .soc__a svg{width:21px;height:21px}

/* În subsol, pe fundal închis: cercul plin ar dispărea în negru, deci pornim
   invers — contur albastru pe gol — și se umple la hover. Aceeași inversare,
   citită de la celălalt capăt. */
.soc--ftr{margin-top:26px;padding-top:24px;border-top:var(--hair-dark);gap:12px}
.soc--ftr .soc__a{
  width:38px;height:38px;
  background:transparent;border-color:var(--ocean-400);color:var(--ocean-200);
}
.soc--ftr .soc__a svg{width:18px;height:18px}
.soc--ftr .soc__a:hover,.soc--ftr .soc__a:focus-visible{
  background:var(--ocean-300);border-color:var(--ocean-300);color:var(--ink-950);
}

/* În plăcuța de pe pagina „Despre noi": mai mari decât în antet, fiindcă aici
   sunt conținut, nu navigare secundară — sunt dovada pe care pagina o promite. */
.soc--despre{margin-top:20px;gap:12px}
.soc--despre .soc__a{width:46px;height:46px}
.soc--despre .soc__a svg{width:22px;height:22px}
.mnav__foot .btn{justify-content:center}

@media (min-width:901px){ .mnav{display:none} }
/* Decalajul dintre elemente: fiecare linie apare cu o clipă după cea de
   deasupra, în loc ca tot blocul să se aprindă odată.

   Starea de pornire (opacitate zero) e legată de clasa `mnav--anim`, pe care
   JS o pune la deschidere și o SCOATE după ce animația ar trebui să se fi
   terminat. Dacă ceasul de animație nu rulează — filă throttled, animații
   oprite din sistem — elementele ajung oricum vizibile, pentru că starea
   finală nu are nicio regulă de opacitate. Lecția din sesiunea în care meniul
   mobil rămânea invizibil: vizibilitatea nu depinde niciodată de o tranziție. */
/* Decalajul intră acum dinspre DREAPTA, nu de sus: panoul vine de la dreapta
   la stânga, iar niște rânduri care coboară în timp ce panoul alunecă lateral
   se citesc ca două animații diferite suprapuse. Aceeași durată, aceeași
   curbă, doar axa e cea a panoului. */
.mnav--anim .mnav__list a,
.mnav--anim .mnav__foot .btn,
.mnav--anim .soc--mnav{opacity:0;transform:translateX(9px)}
.mnav--anim.is-open .mnav__list a,
.mnav--anim.is-open .mnav__foot .btn,
.mnav--anim.is-open .soc--mnav{
  opacity:1;transform:none;
  transition:opacity .26s ease-out, transform .3s cubic-bezier(.22,.68,.28,1),
             padding-left .22s cubic-bezier(.2,.7,.3,1), color .16s;
}
.mnav--anim.is-open .mnav__list a:nth-child(1){transition-delay:.04s}
.mnav--anim.is-open .mnav__list a:nth-child(2){transition-delay:.07s}
.mnav--anim.is-open .mnav__list a:nth-child(3){transition-delay:.1s}
.mnav--anim.is-open .mnav__list a:nth-child(4){transition-delay:.13s}
.mnav--anim.is-open .mnav__list a:nth-child(5){transition-delay:.16s}
.mnav--anim.is-open .mnav__list a:nth-child(6){transition-delay:.185s}
.mnav--anim.is-open .mnav__list a:nth-child(7){transition-delay:.21s}
.mnav--anim.is-open .mnav__list a:nth-child(8){transition-delay:.23s}
.mnav--anim.is-open .mnav__foot .btn:nth-child(1){transition-delay:.25s}
.mnav--anim.is-open .mnav__foot .btn:nth-child(2){transition-delay:.27s}
.mnav--anim.is-open .soc--mnav{transition-delay:.29s}

@media (prefers-reduced-motion:reduce){
  .mnav{transition:none}
  .mnav--anim .mnav__list a,
  .mnav--anim .mnav__foot .btn,
  .mnav--anim .soc--mnav{opacity:1;transform:none;transition:none;transition-delay:0s}
}
html.is-locked{overflow:hidden}

/* ================= SECȚIUNI ================= */
.sec{padding:clamp(72px,9vw,130px) 0}
.sec--sm{padding:clamp(52px,6vw,86px) 0}
.sec--tint{background:var(--bone-2);border-block:var(--hair)}
.sec--dark{background:var(--ink-950);color:var(--bone)}
.sec__head{max-width:52ch;margin-bottom:clamp(44px,5vw,68px)}
.sec__head h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.03em;margin-top:22px}
.sec__head p{margin-top:20px;font-size:18px;color:var(--ink-600);max-width:48ch}
.sec--dark .sec__head p{color:var(--ink-400)}

/* ================= BANDĂ DATE ================= */
.strip{background:var(--ink-950);color:var(--bone)}
.strip__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:clamp(30px,3.6vw,46px) clamp(18px,2.4vw,34px);border-left:var(--hair-dark)}
.stat:first-child{border-left:0;padding-left:0}
.stat__n{
  font-family:var(--f-display);font-size:clamp(30px,3.5vw,46px);font-weight:600;
  letter-spacing:-.035em;line-height:1;color:#fff;
}
.stat__n small{font-size:.46em;font-weight:500;color:var(--ocean-300);margin-left:5px;letter-spacing:0}
.stat__t{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--label-dark);margin-top:13px;line-height:1.5;
}

/* ========== COLOANA DE ADÂNCIME — elementul-semnătură ==========
   Folosită pe homepage (0–200 m, generic) și pe paginile de județ
   (interval real, specific zonei). Straturile se dau prin --l1..--l5.
   ============================================================== */
.depth{position:relative;height:clamp(420px,52vw,560px);user-select:none;margin:0}
.depth__label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);margin-bottom:14px;display:block;
}
.depth--onDark .depth__label{color:var(--label-dark)}
.depth__col{
  position:relative;height:calc(100% - 30px);border:1px solid var(--ink-300);
  background:linear-gradient(180deg,
    #EDE4D2 0%, #E3D6BE 11%,
    #D2C0A0 11%, #C6B08B 27%,
    #A9B7B8 27%, #8FA4AA 46%,
    #5C7E9C 46%, #3C6592 66%,
    #114E96 66%, #054FB3 84%,
    #033A81 84%, #022C63 100%);
}
.depth--onDark .depth__col{border-color:rgba(255,255,255,.2)}
/* granițele de strat */
.depth__col::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 10.6%,rgba(20,17,13,.22) 10.6%,rgba(20,17,13,.22) 11.2%,transparent 11.2%),
    linear-gradient(180deg,transparent 26.6%,rgba(20,17,13,.22) 26.6%,rgba(20,17,13,.22) 27.2%,transparent 27.2%),
    linear-gradient(180deg,transparent 45.6%,rgba(20,17,13,.2) 45.6%,rgba(20,17,13,.2) 46.2%,transparent 46.2%),
    linear-gradient(180deg,transparent 65.6%,rgba(255,255,255,.28) 65.6%,rgba(255,255,255,.28) 66.2%,transparent 66.2%),
    linear-gradient(180deg,transparent 83.6%,rgba(255,255,255,.22) 83.6%,rgba(255,255,255,.22) 84.2%,transparent 84.2%);
}
.tick{position:absolute;left:0;right:0;display:flex;align-items:center;pointer-events:none}
.tick::before{content:"";width:14px;height:1px;background:currentColor;opacity:.55;flex:none}
.tick__m{
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;
  margin-left:9px;flex:none;
}
.tick__t{
  font-family:var(--f-body);font-size:11.5px;letter-spacing:.01em;margin-left:12px;
  opacity:.78;
}
.tick--dark{color:var(--ink-800)}
.tick--light{color:#fff}

/* marcajul care spune povestea */
.depth__stop{
  position:absolute;left:-1px;right:-1px;top:65.9%;height:0;
  border-top:1.5px dashed rgba(255,255,255,.62);
}
.depth__stopLabel{
  position:absolute;right:0;top:calc(65.9% + 9px);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:#fff;background:rgba(2,31,71,.72);padding:5px 9px;
  backdrop-filter:blur(3px);
}
.depth__we{
  position:absolute;left:0;right:0;top:84.2%;bottom:0;
  border:1.5px solid var(--ocean-300);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.depth__weLabel{
  position:absolute;left:0;right:0;bottom:0;padding:11px 12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ocean-100);
}
.depth__weLabel b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;
  letter-spacing:-.02em;text-transform:none;color:#fff;margin-top:4px}

/* bandă de acvifer marcată pe interval real (pagina de județ) */
.depth__band{
  position:absolute;left:0;right:0;border:1.5px solid var(--ocean-300);
  background:rgba(97,154,255,.16);
}
.depth__bandLabel{
  position:absolute;left:0;top:0;padding:7px 10px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:rgba(2,31,71,.78);white-space:nowrap;
}

/* ================= CTA ================= */
.cta{background:var(--ocean-600);color:#fff;position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent,transparent 46px,rgba(255,255,255,.055) 46px,rgba(255,255,255,.055) 47px);
}
.cta__in{position:relative;padding-block:clamp(64px,7.5vw,104px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.cta h2{font-size:clamp(29px,3.9vw,48px);letter-spacing:-.032em;max-width:18ch}
.cta p{margin-top:20px;font-size:17.5px;color:var(--ocean-100);max-width:44ch}
.cta__box{border:1px solid rgba(255,255,255,.3);padding:clamp(26px,3vw,36px)}
.cta__box .tag{color:var(--ocean-100)}
.cta__box .tag::before{background:var(--ocean-100);opacity:.55}
.cta__tel{
  display:block;font-family:var(--f-display);font-size:clamp(26px,3.1vw,37px);font-weight:600;
  letter-spacing:-.028em;margin-top:16px;
}
.cta__hours{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ocean-100);margin-top:12px}
.cta__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* varianta întunecată — folosită pe ramura tehnică */
.cta--dark{background:var(--ink-950)}
.cta--dark p{color:var(--ink-400)}
.cta--dark .cta__box{border-color:rgba(255,255,255,.18)}
.cta--dark .cta__box .tag{color:var(--ocean-300)}
.cta--dark .cta__box .tag::before{background:var(--ocean-300)}
.cta--dark .cta__hours{color:var(--label-dark)}

/* ================= FOOTER ================= */
/* ═══════════════════════════════════════════════════════════════════
   SUBSOL
   Trei benzi despărțite de linii, nu de fundaluri alternante. Ordinea e
   ordinea utilității: identitate + acțiune, navigare, legal. Cine ajunge
   aici a derulat toată pagina și tot nu a sunat — deci prima bandă are un
   scop, nu doar linkuri.
   ═══════════════════════════════════════════════════════════════════ */
.ftr{background:var(--ink-950);color:var(--ink-400)}
.ftr__i{width:19px;height:19px;flex:none;stroke:currentColor}

/* ── Țeava, element decorativ ──────────────────────────────────────────
   Tubulatura portocalie e produsul, nu un ornament ales la întâmplare: e
   exact materialul din coloana „irigații" a tabelului de preț.

   Trei lucruri o țin în plan secund, ca să rămână decor și nu al doilea
   subiect al subsolului:

   1. `opacity` sub 1 — la saturație plină, portocaliul pe negru ar fi cel
      mai luminos lucru din pagină și ar trage ochiul înaintea telefonului.
   2. O mască de degradeu care o topește spre stânga. Fără ea, țeava s-ar
      tăia brusc la marginea ecranului și s-ar citi ca o imagine tăiată
      greșit, nu ca un obiect care intră în cadru.
   3. `z-index:0` sub conținut, plus `pointer-events:none` — nu prinde
      niciun clic destinat linkurilor de deasupra.

   Poziționarea pleacă de la capătul cu mufă: `right` îl fixează puțin peste
   jumătatea ecranului, iar restul țevii curge spre stânga și iese din cadru.
   Lățimea e în `vw`, deci raportul rămâne același pe orice ecran — imaginea
   nu se deformează niciodată. */
.ftr__banda{position:relative;overflow:hidden}
.ftr__banda > .wrap{position:relative;z-index:1}

.ftr__teava{
  position:absolute;
  z-index:0;
  pointer-events:none;
  /* `max-width:none`: regula generală de imagini o plafona la lățimea benzii,
     deci pe telefon `width:148vw` nu avea niciun efect — țeava rămânea la 96vw
     și la 36 px înălțime, exact cât să nu se mai citească drept țeavă. */
  max-width:none;
  right:46%;
  bottom:clamp(34px,6vw,104px);
  width:58vw;
  height:auto;
  opacity:.62;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
}

/* Sub 900 px banda se așază pe o singură coloană și nu mai are gol în care să
   încapă: țeava coboară la baza benzii, sub tot conținutul, unde rămâne padding.
   Devine un accent pe muchie, nu un fundal peste text — contrastul textului nu
   are voie să depindă de ea. */
/* Pe telefon, banda se așază pe o singură coloană și nu mai are gol în care să
   încapă țeava. Prima variantă o strecura între iconuri și linia de jos, la
   36 px înălțime și opacitate 0,42: acolo nu se mai citea ca o țeavă, ci ca o
   pată maro. Acum primește o bandă proprie sub conținut — mai lată, mai groasă,
   mai aproape de opacitatea de pe desktop, cu mufa bine intrată în ecran.
   Rămâne sub tot textul, deci contrastul lui nu depinde de ea. */
@media (max-width:900px){
  .ftr__banda{padding-bottom:clamp(64px,17vw,104px)}
  .ftr__teava{
    right:auto;left:-52vw;
    bottom:clamp(18px,4.6vw,32px);
    width:148vw;
    opacity:.58;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
            mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
  }
}

/* Cine a cerut mai puțină mișcare nu a cerut mai puțin decor — dar cine a cerut
   contrast ridicat, da: acolo dispare. */
@media (prefers-contrast:more){
  .ftr__teava{display:none}
}


/* ---------- banda 1 · identitate și acțiune ---------- */
.ftr__top{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(38px,4.4vw,64px);
  padding:clamp(48px,5.6vw,80px) 0;
}
@media (min-width:900px){
  .ftr__top{
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:clamp(48px,6vw,96px);
  }
  /* Linia verticală desparte identitatea de acțiune. E singura despărțire din
     bandă: fără ea, cele două jumătăți se citesc ca o singură listă lungă. */
  .ftr__act{padding-left:clamp(40px,5vw,80px);border-left:var(--hair-dark)}
}

/* Sigla din subsol: aceeași marcă, în alb. Lockup-ul conține numele, deci nu
   se mai scrie și ca text — apărea de două ori. Eticheta de dedesubt rămâne:
   ea spune ce face firma, lucru pe care sigla nu îl spune. */
.ftr__brand{display:inline-block;text-decoration:none}
.ftr__logo{
  display:block;width:auto;
  height:clamp(38px,4.2vw,54px);
  transition:opacity .18s ease;
}
.ftr__brand:hover .ftr__logo{opacity:.78}

.ftr__tagline{
  margin:14px 0 0;
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--label-dark);
}
.ftr__about{
  margin:clamp(22px,2.4vw,30px) 0 0;
  font-size:16px;line-height:1.65;color:var(--ink-400);max-width:38ch;
}

/* Eticheta de secțiune. Varianta cu linie o subliniază pe scurt — un accent
   de patru caractere lungime, cât să prindă ochiul fără să devină titlu. */
.ftr__k{
  margin:0 0 22px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-300);
}
.ftr__k--rule{padding-bottom:14px;position:relative}
.ftr__k--rule::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;
  background:var(--ocean-300);
}
.ftr__k--icon{display:flex;align-items:center;gap:12px;color:#fff;font-size:12px}
.ftr__k--icon .ftr__i{width:22px;height:22px;color:var(--ocean-300)}

.ftr__tel,.ftr__mail{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--ink-300);
}
.ftr__tel .ftr__i,.ftr__mail .ftr__i{color:var(--ocean-300)}
.ftr__tel{margin-bottom:14px}
.ftr__tel span{
  font-family:var(--f-num);font-weight:700;
  font-size:clamp(25px,2.6vw,32px);letter-spacing:-.01em;
  color:#fff;font-variant-numeric:tabular-nums;
}
.ftr__mail{margin:0 0 clamp(24px,2.6vw,32px);font-size:16px}
.ftr__mail span{word-break:break-word}
.ftr__tel:hover span,.ftr__mail:hover span{color:var(--ocean-200)}
/* Adresa de email încă neactivată: se vede, dar nu e link și spune de ce. */
.ftr__mail--off{align-items:flex-start;color:var(--label-dark)}
.ftr__mail--off .ftr__i{color:var(--label-dark);margin-top:2px}
.ftr__mail--off i{
  display:block;margin-top:5px;font-style:normal;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--signal-dark);
}

/* Butonul principal al subsolului. Fond de ocean închis cu chenar deschis: pe
   un fundal aproape negru, un buton plin și deschis ar fi singura pată
   luminoasă din pagină și ar trage ochiul înaintea numărului de telefon. */
.ftr__cta{
  display:flex;align-items:center;gap:16px;
  padding:19px 22px;
  background:var(--ocean-800);border:1.5px solid var(--ocean-400);
  color:#fff;text-decoration:none;
  font-family:var(--f-display);font-weight:600;font-size:17px;
  transition:background .18s ease,border-color .18s ease;
}
.ftr__cta span{margin-right:auto}
.ftr__cta .ftr__i:first-child{color:var(--ocean-200)}
.ftr__cta:hover{background:var(--ocean-600);border-color:var(--ocean-300)}

.ftr__link{
  display:flex;align-items:center;gap:16px;
  margin-top:18px;padding:4px 0;
  color:var(--ocean-300);text-decoration:none;font-size:16px;
}
.ftr__link span{margin-right:auto}
.ftr__link:hover{color:#fff}

/* ---------- banda 2 · navigare ---------- */
.ftr__nav{border-top:var(--hair-dark)}
.ftr__navin{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,4vw,56px);
  padding-block:clamp(40px,4.6vw,64px);
}
@media (min-width:840px){
  .ftr__navin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftr__navin nav:last-child{padding-left:clamp(40px,5vw,80px);border-left:var(--hair-dark)}
}

/* Două coloane de linkuri în fiecare bloc: șase-șapte intrări pe o singură
   coloană ar face subsolul mai înalt decât secțiunile de deasupra lui. */
/* `columns`, nu `grid`. Într-un grid, șase linkuri se aranjează pe rânduri —
   ochiul citește stânga-dreapta-stânga și ordinea listei se pierde. Cu coloane
   CSS, se umple întâi coloana din stânga, deci lista se citește de sus în jos,
   în ordinea în care a fost scrisă. Se și adaptează singură la 6 sau 7 intrări,
   fără să numărăm rândurile în șablon. */
.ftr__list{
  list-style:none;margin:0;padding:0;
}
@media (min-width:520px){ .ftr__list{columns:2;column-gap:28px} }
.ftr__list li{break-inside:avoid;margin-bottom:14px}
.ftr__list li:last-child{margin-bottom:0}
.ftr__list a{
  display:flex;align-items:center;gap:11px;
  font-size:15.5px;color:var(--ink-300);text-decoration:none;
  transition:color .16s;
}
.ftr__list .ftr__i{width:15px;height:15px;color:var(--ocean-400);transition:transform .16s,color .16s}
.ftr__list a:hover{color:#fff}
.ftr__list a:hover .ftr__i{color:var(--ocean-300);transform:translateX(3px)}

/* ---------- banda 3 · legal ---------- */
.ftr__jos{border-top:var(--hair-dark);background:var(--ocean-950)}

.ftr__ident{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;
  padding:24px 0;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--label-dark);
}
.ftr__ident-nume,.ftr__adresa{display:flex;align-items:center;gap:11px}
.ftr__ident-nume{color:var(--ink-300)}
.ftr__ident .ftr__i{width:17px;height:17px;color:var(--ocean-400)}
/* Câmpurile care lipsesc din brief §1 se marchează, nu se ascund: un subsol
   care tace despre CUI arată identic cu unul completat, iar la lansare nimeni
   nu-și mai amintește ce lipsea. */
.ftr__lipsa{font-style:normal;color:var(--signal-dark);opacity:.9}

.ftr__legal{
  border-top:var(--hair-dark);padding:20px 0 30px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;
  color:var(--label-dark);
}
.ftr__legal a{font-family:var(--f-mono);font-size:11px;color:var(--label-dark);text-decoration:none}
.ftr__legal a:hover{color:#fff}
/* Punctele de separare sunt desenate, nu tastate: un caracter scris în markup
   ar fi citit cu voce tare de cititoarele de ecran, între fiecare două linkuri. */
.ftr__legal > *:not(:first-child):not(.ftr__anpc)::before{
  content:"";display:inline-block;vertical-align:middle;
  width:3px;height:3px;margin-right:26px;
  background:currentColor;opacity:.5;border-radius:50%;
}
/* Bannerele ANPC: împinse în dreapta cu `margin-left:auto`; pe ecran îngust
   rândul se rupe și coboară dedesubt, aliniate stânga.

   Înălțimea a urcat de la 30 la 42 px: la 30, textul din ele era ilizibil, iar
   o plăcuță pe care nu o poți citi nu își face treaba. Rămân clare pentru că
   varianta @2x are oricum 242 px lățime.

   Regulile astea existau de două ori în fișier, iar copia de mai jos o
   suprascria pe asta. A rămas una singură. */
/* Pe telefon rândul se rupe la fiecare element, iar punctul de separare ajunge
   la începutul liniei — unde se citește ca marcator de listă, nu ca despărțitor.
   Sub 640 px dispare; ruperea rândului separă deja suficient. */
@media (max-width:640px){
  .ftr__legal > *:not(:first-child):not(.ftr__anpc)::before{display:none}
  .ftr__legal{gap:10px 20px}
}

.ftr__anpc{display:flex;gap:14px;margin-left:auto;align-items:center}
.ftr__anpc a{display:block;line-height:0;opacity:.9;transition:opacity .18s ease}
.ftr__anpc a:hover{opacity:1}
.ftr__anpc img{display:block;width:auto;height:42px}
@media (max-width:640px){ .ftr__anpc{margin-left:0;flex-wrap:wrap} }

/* butonul de setări cookies e injectat de CookieYes; îl aliniem cu restul */
.ftr__legal button,.cky-banner-element{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--label-dark);
  background:none;border:0;padding:0;cursor:pointer;transition:color .16s;
}
.ftr__legal button:hover,.cky-banner-element:hover{color:#fff}

/* ================= RESPONSIVE ================= */
@media (max-width:1080px){
  .strip__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-left:var(--hair-dark);padding-left:clamp(18px,2.4vw,34px)}
  .stat:nth-child(1),.stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(3),.stat:nth-child(4){border-top:var(--hair-dark)}
  .cta__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1240px){
  .nav{gap:20px}
  .nav a{font-size:14px}
  .hdr__in{gap:22px}
}
@media (max-width:1040px){
  .nav{gap:15px}
}
/* Telefonul scris în antet dispare de aici în jos.
   Între 861 și ~1030 px nu mai încăpeau toate: meniul, telefonul și butonul
   depășeau lățimea ecranului cu până la 138 px, iar burgerul — care ar fi
   simplificat rândul — apare abia sub 861. Rezultatul era derulare orizontală
   pe fiecare pagină, exact pe lățimile de tabletă în peisaj.
   Nu se pierde nimic: numărul stă permanent în banda neagră de deasupra, iar
   sub 900 px apare și bara fixă de jos cu butonul de apel. */
/* Telefonul scris în antet dispare de aici în jos. Numărul stă permanent în
   banda neagră de deasupra, iar sub 900 px apare și bara fixă de jos cu apelul,
   deci nu se pierde nimic. Pragul a urcat de la 1080 la 1400 când meniul a
   trecut de la cinci la șapte elemente: cu telefonul pe ecran, rândul se rupea
   pe două între 1300 și 1500 px. */
@media (max-width:1400px){ .hdr__tel{display:none} }
/* 900, nu 860: la 861 px meniul desktop încă se afișa și antetul depășea
   lățimea ecranului cu 18 px. Pragul e acum același cu al barei fixe de jos
   (`.abar`, min-width:901) — sub el, navigarea trece integral pe burger plus
   bară, deasupra rămâne antetul complet. Un singur prag, nu două apropiate. */
@media (max-width:900px){
  .nav,.hdr__cta .btn{display:none}
  .burger{display:grid}
}
@media (max-width:640px){
  body{font-size:16px}
  .hdr__in{height:64px;gap:14px}
  .depth{height:380px}
  .tick__t{display:none}
  /* reperele secundare cad — altfel se ciocnesc de etichetele de strat */
  .tick--dense{display:none}
}

/* reveal la scroll */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}
}

/* `.link__go` e componentă comună — stătea greșit în pages.css, care nu se
   încarcă pe prima pagină. Folosită acolo, săgeata ei se randa la 532 px. */
.link__go{
  margin-top:auto;padding-top:18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  color:var(--ocean-600);display:flex;align-items:center;gap:8px;
}
.link__go svg{width:13px;height:13px;flex:0 0 auto;transition:transform .22s cubic-bezier(.2,.7,.3,1)}

/* ══════════════════════════════════════════════════════════════════════
   WHATSAPP — buton flotant

   Verdele e cel oficial al WhatsApp. E singura culoare din site care nu vine
   din paletar, și are motiv: butonul funcționează pentru că e recunoscut
   dintr-o privire, iar un WhatsApp albastru nu mai e recunoscut.

   Cerc, ca iconurile sociale — aceeași excepție, același motiv.
   ══════════════════════════════════════════════════════════════════════ */
.wa{
  position:fixed;right:clamp(16px,2.4vw,28px);
  /* Pe mobil se ridică peste bara de acțiuni: 56 px de bară, plus zona de
     siguranță a telefonului, plus aer. `calc()`, nu o cifră fixă — dacă bara
     își schimbă înălțimea, butonul urcă odată cu ea. */
  bottom:calc(56px + env(safe-area-inset-bottom,0px) + 16px);
  z-index:55;                    /* sub .abar (60) și sub panoul de meniu (90) */
  display:flex;align-items:center;gap:0;
  width:56px;height:56px;
  /* Rază fixă, jumătate din înălțime — nu `50%`. Pe cercul strâns rezultatul e
     identic, dar la desfășurare `50%` ar da o elipsă, nu o pastilă. */
  border-radius:28px;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px -6px rgba(20,17,14,.55);
  overflow:hidden;
  transition:width .26s cubic-bezier(.22,.68,.28,1),background .18s ease,box-shadow .18s ease;
}
.wa svg{width:30px;height:30px;flex:none;margin:13px}
.wa__eticheta{
  white-space:nowrap;padding-right:22px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  opacity:0;transition:opacity .18s ease;
}
/* Peste 900 px bara de jos nu mai există, deci butonul coboară la marginea
   normală și are loc să se desfășoare la hover. Pe telefon rămâne cerc: acolo
   nu există hover, iar o etichetă permanentă ar acoperi conținutul. */
@media (min-width:901px){
  .wa{bottom:clamp(20px,2.6vw,32px)}
  .wa:hover,.wa:focus-visible{
    width:246px;background:#1FB255;
    box-shadow:0 10px 26px -8px rgba(20,17,14,.6);
  }
  .wa:hover .wa__eticheta,.wa:focus-visible .wa__eticheta{opacity:1;transition-delay:.06s}
}
@media (prefers-reduced-motion:reduce){ .wa{transition:none} }
/* Cât timp panoul de meniu e deschis, butonul iese din drum: ar pluti peste el. */
.wa[inert]{opacity:0;pointer-events:none}

/* ══════════════════════════════════════════════════════════════════════
   BARĂ DE ACȚIUNI, MOBIL — .abar

   86% din trafic vine de pe telefon, iar vizitatorul e adesea în curte,
   lângă locul unde vrea puțul. În situația aia nu deschide un meniu.

   Trei acțiuni, fixe jos, în zona degetului mare. Ținta de atingere e de
   56 px înălțime — peste minimul de 44 px, pentru că publicul e mai în
   vârstă și adesea cu mâinile murdare.

   `env(safe-area-inset-bottom)` ține bara deasupra barei de gesturi de pe
   iPhone. Fără ea, „Cere ofertă" ajunge fix sub linia de swipe.
   ═══════════════════════════════════════════════════════════════════ */
.abar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
  background:var(--white);
  border-top:2px solid var(--ink-950);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.abar__a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:56px;padding:8px 6px;
  font-family:var(--f-body);font-size:12px;font-weight:600;
  letter-spacing:.01em;color:var(--ink-950);text-decoration:none;
  border-left:1px solid var(--ink-200);
}
.abar__a:first-child{border-left:0}
.abar__a svg{width:19px;height:19px}
.abar__a--tel{color:var(--ocean-700)}
.abar__a--cta{background:var(--ocean-600);color:var(--white);border-left-color:var(--ocean-600)}
.abar__a:active{background:var(--bone-2)}
.abar__a--cta:active{background:var(--ocean-700)}

/* Peste 900 px antetul face deja treaba asta. */
@media (min-width:901px){ .abar{display:none} }

/* Bara acoperă ultimele rânduri ale subsolului dacă pagina nu are pernă. */
@media (max-width:900px){ body{padding-bottom:64px} }

/* ══════════════════════════════════════════════════════════════════════
   AJUSTĂRI PENTRU SLAB

   Bitter e mai lat și mai greu decât un grotesc la aceeași mărime. Trei
   corecții, altfel titlurile par umflate și textul pare înghesuit:

   1. Tracking negativ pe titlurile mari. Un slab la 800 și la 64 px are
      nevoie de strângere ca să nu se destrame în cuvinte separate.
   2. Înălțime de rând mai mică pe titluri — serifele leagă deja rândurile
      vizual, deci nu au nevoie de tot aerul pe care îl cere un sans.
   3. Etichetele merg pe slab, majuscule, spațiate. Un slab tracked citește
      „registru contabil" — exact registrul care ne trebuie.
   ═══════════════════════════════════════════════════════════════════ */
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em}
h1{line-height:1.02;font-weight:800}
h2{line-height:1.08}
h3{line-height:1.15;letter-spacing:-.015em}

/* Cifrele mari — elementul de design al site-ului. */
.num-xl{
  font-family:var(--f-num);font-weight:800;
  font-size:clamp(48px,9vw,104px);
  line-height:.9;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  color:var(--ocean-600);
}
.num-xl small{
  display:block;font-size:.24em;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--label);margin-top:10px;
}

/* Eticheta tehnică, peste tot. */
.tag,.plate__hd span,.link__k,.step__n{
  font-family:var(--f-display);
  font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
}

/* Linia de rulare — cum se despart secțiunile în acest sistem.
   Fără alternanță de fundal, fără carduri: doar reguli. */
.rule{border:0;border-top:var(--rule);margin:0}
.rule--strong{border-top:var(--rule-strong)}

/* ══════════════════════════════════════════════════════════════════════
   TABELUL DE PREȚ — .ptab
   Componenta centrală a poziționării. Apare pe cele șase ghiduri de
   adâncime și pe pagina de cost.

   Alegeri deliberate:
   · `<table>` real, nu grid de div-uri. Sunt date tabelare, iar cititorul
     de ecran trebuie să anunțe antetul de coloană la fiecare celulă.
   · Cifrele în JetBrains Mono, cu `tabular-nums`: coloana de totaluri se
     aliniază unitate sub unitate fără nicio regulă de lățime.
   · Derulare orizontală în containerul propriu — pe telefon de 360 px
     tabelul se derulează, pagina nu.
   · Totalul e singurul element în alamă. Restul rămâne neutru: dacă tot
     tabelul ar fi colorat, nimic nu ar mai fi accentuat.
   ═══════════════════════════════════════════════════════════════════ */
/* Riglat, nu încadrat. Prima variantă avea chenar pe toate laturile și
   fundal alb propriu — adică un card așezat peste hârtie, exact tipul de
   obiect pe care sistemul îl interzice. Aici rămân două linii groase, sus
   și jos, iar tabelul stă direct pe pagină. */
.ptab{
  margin:0 0 8px;
  border:0;
  border-top:var(--rule-strong);
  border-bottom:var(--rule-strong);
  background:none;
}
.ptab--dark{
  background:none;
  border-top-color:rgba(255,255,255,.5);
  border-bottom-color:rgba(255,255,255,.5);
}

/* Containerul care derulează, nu pagina. */
.ptab__t{
  width:100%;
  border-collapse:collapse;
  display:block;
  overflow-x:auto;
  white-space:nowrap;
  font-size:15px;
}
@media (min-width:720px){ .ptab__t{display:table;white-space:normal} }

.ptab__cap{
  caption-side:top;
  text-align:left;
  padding:16px 0 14px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(17px,2.2vw,20px);
  line-height:1.25;
  color:var(--ink-950);
  border-bottom:1px solid var(--ink-200);
}
.ptab--dark .ptab__cap{color:var(--white);border-bottom-color:rgba(255,255,255,.14)}

.ptab__t thead th{
  text-align:left;
  padding:11px 16px 11px 0;
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--label);
  background:none;
  border-bottom:1px solid var(--ink-200);
}
.ptab--dark .ptab__t thead th{color:var(--label-dark);background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.14)}

.ptab__t tbody td{
  padding:14px 16px 14px 0;
  border-bottom:1px solid var(--ink-100);
  color:var(--ink-800);
  vertical-align:baseline;
}
.ptab--dark .ptab__t tbody td{color:var(--ink-200);border-bottom-color:rgba(255,255,255,.08)}
.ptab__t tbody tr:last-child td{border-bottom:0}

/* Rândul întreg se ridică la hover — semnalează că e o linie de citit,
   nu un element de apăsat. Pe telefon nu există hover, deci nu lipsește. */
@media (hover:hover){
  .ptab__t tbody tr:hover td{background:var(--bone-2)}
  .ptab--dark .ptab__t tbody tr:hover td{background:rgba(255,255,255,.04)}
}

.ptab__t tbody td b{font-family:var(--f-mono);font-weight:600;color:var(--ink-950)}
.ptab--dark .ptab__t tbody td b{color:var(--white)}

.ptab__uz{
  display:block;
  margin-top:3px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--label);
}
.ptab--dark .ptab__uz{color:var(--label-dark)}

.ptab__n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* Totalul e în albastrul de brand, nu în culoarea de semnal. Semnalul e
   rezervat unui singur loc din tot site-ul — blocul de comparație cu
   oferta-capcană. Aici încălcasem propria regulă. */
.ptab__tot{
  font-weight:700;
  font-size:17px;
  color:var(--ocean-600);
}
.ptab--dark .ptab__tot{color:var(--ocean-300)}

.ptab__prag{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border:1px solid currentColor;
  border-radius:0;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  vertical-align:1px;
}

.ptab__nota{
  margin:0;
  padding:16px 0 4px;
  background:none;
  border-top:1px solid var(--ink-200);
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-700);
}
.ptab--dark .ptab__nota{background:rgba(255,255,255,.04);border-top-color:rgba(255,255,255,.14);color:var(--ink-300)}
.ptab__nota b{color:var(--ink-950);font-weight:600}
.ptab--dark .ptab__nota b{color:var(--white)}

/* ── Matricea: adâncimi pe rânduri, variante de tubulatură pe coloane ──
   Aceleași reguli ca `.ptab`, plus un antet de rând. Prima coloană rămâne
   lipită la derulare orizontală, altfel pe telefon citești patru sume fără
   să mai știi a cărei adâncimi sunt. */
.ptab--mat .ptab__t tbody th{
  text-align:left;
  padding:14px 18px 14px 0;
  border-bottom:1px solid var(--ink-100);
  font-family:var(--f-num);
  font-weight:800;
  font-size:clamp(19px,2.2vw,24px);
  letter-spacing:-.03em;
  color:var(--ink-950);
  white-space:nowrap;
  background:var(--bone);
  position:sticky;
  left:0;
  z-index:1;
}
.ptab--mat .ptab__t tbody tr:last-child th{border-bottom:0}
.ptab--mat .ptab__t tbody th a{color:inherit;text-decoration:none;border-bottom:2px solid var(--ink-200)}
.ptab--mat .ptab__t tbody th a:hover{border-bottom-color:var(--ocean-600);color:var(--ocean-600)}

/* Rândul cu prețul pe metru e antet, nu date: cifre mici, ton de etichetă.
   Fără el, cineva ar putea citi totalurile ca prețuri pe metru. */
.ptab--mat .ptab__t tbody tr.ptab__rate th,
.ptab--mat .ptab__t tbody tr.ptab__rate td{
  padding-top:10px;padding-bottom:10px;
  border-bottom:var(--rule-strong);
  font-size:13px;
  color:var(--ink-600);
}
.ptab--mat .ptab__t tbody tr.ptab__rate th{
  font-family:var(--f-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--label);
}
@media (hover:hover){ .ptab--mat .ptab__t tbody tr:hover th{background:var(--bone-2)} }