/* =========================================================================
   PRO LUX CAR SPA — RUNDA 3, direcția CINEMATIC
   Designul e cel din r2-mockup-1 (ales de client). Paleta, tipografia,
   eyebrow-urile numerotate, butoanele, linia portocalie — identice.

   CORECȚIE, runda 3b: HOME se întoarce la STRUCTURA DE SECȚIUNI din
   r2-mockup-1 — hero pe tot ecranul, grila de prețuri, benzile foto
   alternate, o idee pe ecran. Blocurile alea sunt portate 1:1 mai jos
   (.pachete / .card / .price / .band / .proces / .dece).
   Tiparul full-height alternat (.full.ov / .full.sp) rămâne în fișier
   pentru că îl mai folosesc paginile secundare, dar Home NU mai duce cele
   șase etape: detaliul procedural (.fapte, .limita) a plecat pe Servicii.
   Restul neatins: matricea de pe Servicii, sloturile goale (.slot) și
   marcajele de neconfirmat (.marcaj) — parte din machetă, nu decor.
   =========================================================================

   PALETA — neschimbată față de r2-mockup-1
   --ember  #E55204  accent portocaliu — REZERVAT acțiunilor
   --field  #29241E  antracitul, câmpul paginii
   --stone  #534C46  linii, borduri
   --ash    #6D6660  text secundar
   --pitch  #0B0503  benzile „decupate"
   --steel  #8FA3AC  stratul faptic — numere de secțiune, etichete, ore, sume
   --bone   #EFE9E2  tenta de alb a textului pe fundal închis
   ========================================================================= */

:root {
  --ember: #E55204;
  --field: #29241E;
  --stone: #534C46;
  --ash:   #6D6660;
  --pitch: #0B0503;
  --steel: #8FA3AC;
  --bone:  #EFE9E2;

  --band: 160px;
  --band-sm: 120px;
  --gutter: 48px;
  --maxw: 1440px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--field);
  color: var(--bone);
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-transform: uppercase;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --- elemente recurente ------------------------------------------------ */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.eyebrow .nr {
  font-variant-numeric: tabular-nums;
  color: var(--ember);
}

/* UN SINGUR BUTON PE TOT SITE-UL (29.10). Pana azi erau trei: `.btn` plin,
   `.btn-ghost` doar contur si `.btn-quiet` aproape invizibil in hero — ultimul
   cerut explicit in copy la blocul 1, „buton discret, contrast mic". Peste o
   fotografie si pe fundal inchis, conturul subtire nu se mai citea ca buton,
   iar trei trepte de intensitate pe acelasi gest (du-te la Contact) imparteau
   atentia in loc s-o adune. Cererea lui Mihai: toate aprinse, la fel, colturi
   rotunjite, litera mai mare. Cele doua clase au fost deci sterse, nu doar
   nefolosite — o clasa moarta in foaie se reintoarce intr-o machete viitoare.
   Aura e tot ember, nu o culoare noua: accentul ramane rezervat actiunilor. */
.btn {
  display: inline-block;
  padding: 21px 44px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 800;
  text-decoration: none;
  background: var(--ember);
  color: #fff;
  border: 1px solid var(--ember);
  border-radius: 12px;
  cursor: pointer;
  /* IN REPAUS NU LUMINEAZA (cerere 30.10). Aura permanenta pusa dimineata
     pe toate butoanele facea opusul a ce trebuie sa faca un accent: cand
     toate strigau, niciunul nu mai era ridicat. Lumina devine deci RASPUNS
     — apare la hover si la apasare — iar singurul buton care sta aprins de
     la inceput e cel din hero, `.btn-hero`. */
  box-shadow: none;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease,
              border-color .18s ease;
}
.btn:hover {
  background: #ff6a1f;
  border-color: #ff9357;
  box-shadow: 0 0 0 1px rgba(255,147,87,.75), 0 16px 46px rgba(229,82,4,.6);
  transform: translateY(-1px);
}
/* apasat: se lumineaza si coboara un pixel — degetul primeste raspuns pe
   telefon, unde `:hover` nu exista deloc. */
.btn:active {
  background: #ff8137;
  border-color: #ffb183;
  box-shadow: 0 0 0 2px rgba(255,177,131,.9), 0 6px 22px rgba(229,82,4,.7);
  transform: translateY(1px);
}
.btn:focus-visible { outline: 3px solid #ffb183; outline-offset: 3px; }

/* Singurul buton aprins din start: cel din primul ecran, peste fotografie,
   unde un dreptunghi plat se pierde printre luminile din poza. */
.btn-hero {
  border-color: #ff7a33;
  box-shadow: 0 0 0 1px rgba(255,122,51,.55), 0 12px 36px rgba(229,82,4,.45);
}

.rule-ember { width: 64px; height: 3px; background: var(--ember); border: 0; margin: 0 0 30px; }

/* microcopy de sub buton (KB 5.7) */
.sub-btn {
  margin-top: 18px;
  font-size: 14px;
  color: #a7a099;
  font-style: italic;
  max-width: 54ch;
}

/* =========================================================================
   MARCAJE DE MACHETĂ — se citesc ca atare, nu ca text de pagină
   ========================================================================= */

/* banda de sus: imaginile sunt provizorii */
.avertisment {
  background: var(--pitch);
  border-bottom: 1px solid rgba(229,82,4,.45);
  color: #e8c2ab;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.avertisment .wrap {
  padding-top: 11px;
  padding-bottom: 11px;
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}
.avertisment b {
  color: var(--ember);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  white-space: nowrap;
}

/* revendicare neconfirmată — rămâne vizibilă în machetă, intenționat */
.marcaj {
  display: block;
  margin: 14px 0;
  padding: 11px 14px;
  background: rgba(229,82,4,.09);
  border: 1px dashed var(--ember);
  color: #f2bb9b;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-style: normal;
}
.marcaj::before {
  content: "DE CONFIRMAT · ";
  color: var(--ember);
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 11px;
}
.marcaj.inline { display: inline-block; margin: 8px 0 0; }

/* Același registru vizual (caseta portocalie punctată), alt cap de tabel.
   NU e „de retușat": clientul a decis pe 12.10 că sigla de producător din
   `01-hero.jpg` RĂMÂNE („folosim poza aia. Lasă sigla") — deci marcajul nu
   cere retuș. Ce rămâne blocant înainte de live e altceva, și e scris în
   `NOTITE-DE-FACUT.md`: poza e generată cu AI, nu e hala lui Andrei, și se
   înlocuiește cu o poză reală — moment în care chestiunea siglei dispare de
   la sine. Folosit o singură dată, în hero. */
.marcaj.inlocuit::before { content: "DE ÎNLOCUIT ÎNAINTE DE LANSARE · "; }

/* slot rămas gol: golul e intenționat, nu lipsă de machetă */
.slot {
  border: 1px dashed var(--stone);
  background:
    repeating-linear-gradient(135deg, rgba(143,163,172,.05) 0 10px, transparent 10px 20px);
  padding: 26px 22px;
  color: var(--ash);
  font-size: 14px;
  line-height: 1.5;
}
.slot .et {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 9px;
}
.slot strong { color: #bdb6ae; font-weight: 600; }

/* „lipsește" la nivel de câmp — adresă, telefon, program */
.lipsa {
  display: inline-block;
  padding: 3px 9px;
  border: 1px dashed var(--stone);
  color: var(--ash);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   TOPBAR + HERO
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--pitch);
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `01-hero.jpg`, încadrat exact ca în r2-mockup-1 — aceeași poză, același
     ecran. Sigla de pe mașină rămâne, prin decizia clientului. */
  object-position: 58% 56%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11,5,3,.95) 0%, rgba(11,5,3,.66) 34%, rgba(11,5,3,.12) 64%, rgba(11,5,3,.58) 100%),
    linear-gradient(to right, rgba(11,5,3,.72) 0%, rgba(11,5,3,.18) 56%, rgba(11,5,3,0) 100%);
}

.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar img {
  /* 22.10: sigla e acum SVG trasat din fotografie. Fundalul de perete nu mai
     exista, deci `mix-blend-mode` si filtrele de contrast au iesit — erau
     peticul pentru o fotografie, nu un tratament de design. Marita de la 58. */
  height: 78px;
  width: auto;
}
.topbar nav { display: flex; align-items: center; gap: 30px; }
.topbar nav a {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.topbar nav a:hover { border-color: var(--ember); }
.topbar nav a[aria-current="page"] { border-color: var(--ember); color: var(--ember); }
/* NU există CTA în topbar: inventarul de CTA din copy are opt poziții și
   topbar-ul nu e una din ele. Nu există nici număr de telefon — nu avem unul. */

.hero-copy {
  position: relative;
  z-index: 2;
  padding-bottom: 86px;
  padding-top: 150px;
  max-width: 1080px;
}

.hero h1 {
  font-size: clamp(2.3rem, 4.9vw, 4.7rem);
  margin: 26px 0 26px;
  max-width: 22ch;
  text-shadow: 0 2px 40px rgba(11,5,3,.78);
}

.hero-sub {
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  color: #d8d1c9;
  max-width: 56ch;
  margin-bottom: 40px;
  text-shadow: 0 2px 24px rgba(11,5,3,.8);
}
.hero-sub span { display: block; }

/* =========================================================================
   RUNDA 3 — CELE TREI VARIANTE DE ALINIERE A PRIMEI SECȚIUNI
   Singurul lucru care diferă între r3-mockup-1 / -2 / -3. Tot blocul se mișcă
   împreună: titlu · subtitlu · buton · microcopy de sub buton (plus marcajul
   de imagine, care stă în același bloc).
     .hero-left   → r3-mockup-1
     .hero-center → r3-mockup-2
     .hero-right  → r3-mockup-3
   Cele trei clase sunt definite în TOATE trei machetele, identic; diferă doar
   care dintre ele e pusă pe <section class="hero">.
   Marginile se rescriu pentru că h1/subtitlu/microcopy au max-width în `ch`:
   fără ele blocul ar rămâne lipit de stânga chiar cu textul centrat.
   ========================================================================= */

.hero-left   .hero-copy { text-align: left; }
.hero-center .hero-copy { text-align: center; }
.hero-right  .hero-copy { text-align: right; }

.hero-center .hero-copy h1,
.hero-center .hero-copy .hero-sub,
.hero-center .hero-copy .sub-btn,
.hero-center .hero-copy .marcaj { margin-left: auto; margin-right: auto; }

.hero-right .hero-copy h1,
.hero-right .hero-copy .hero-sub,
.hero-right .hero-copy .sub-btn,
.hero-right .hero-copy .marcaj { margin-left: auto; margin-right: 0; }

/* =========================================================================
   TIPARUL DE ECRAN FULL-HEIGHT
   .ov = text peste imaginea pe tot ecranul (ca „de ce aici" din r2)
   .sp = ecran împărțit: imaginea ține o jumătate, textul cealaltă
   Se alternează, ca să iasă benzile din direcția aleasă.
   ========================================================================= */

.full {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--band);
  padding-bottom: var(--band);
}
.full.pitch { background: var(--pitch); }
.full.field { background: var(--field); }
.full.ember-top { border-top: 3px solid var(--ember); }
.full.line-top { border-top: 1px solid var(--stone); }

/* --- varianta OV ------------------------------------------------------- */

.full.ov > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.full.ov .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,5,3,.96) 0%, rgba(11,5,3,.90) 36%, rgba(11,5,3,.48) 64%, rgba(11,5,3,.12) 100%);
}
.full.ov .wrap { position: relative; z-index: 2; }
.full.ov .col { max-width: 660px; }

/* --- varianta SP ------------------------------------------------------- */

.full.sp .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: center;
}
.full.sp figure { margin: 0; }
.full.sp figure img {
  width: 100%;
  /* înălțime plafonată, ca ecranul să rămână UN ecran — altfel imaginea 4/5
     împinge secțiunea peste 100vh și se pierde „o idee pe ecran" */
  height: clamp(380px, 64vh, 720px);
  object-fit: cover;
  filter: saturate(.94);
}
.full.sp--right figure { order: 2; }

/* --- titluri de etapă -------------------------------------------------- */

.sec-head { margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); margin-top: 22px; max-width: 20ch; }

.full h2 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  margin-top: 20px;
  max-width: 22ch;
}

.full p.lead {
  margin-top: 28px;
  font-size: clamp(1.04rem, 1.35vw, 1.26rem);
  color: #d5cec6;
  max-width: 52ch;
}

/* =========================================================================
   LISTA DE FAPTE PE ETAPĂ — „cât durează · în ce stare e · ce poate merge prost"
   Eticheta în steel (strat faptic), faptul în bone. Același limbaj ca .pasi din r2.
   ========================================================================= */

.fapte {
  margin-top: 36px;
  border-top: 1px solid var(--stone);
  max-width: 62ch;
}
.fapte li {
  padding: 19px 0;
  border-bottom: 1px solid var(--stone);
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: baseline;
}
.fapte .et {
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--steel);
}
.fapte .val { color: #d5cec6; font-size: 16px; }
.fapte .val b { color: var(--bone); font-weight: 600; }
.fapte .val .nr { font-variant-numeric: tabular-nums; }

/* bloc de limită declarată — „ce nu putem", „ce încă nu ne iese" */
.limita {
  margin-top: 34px;
  padding: 26px 28px;
  background: rgba(143,163,172,.07);
  border-left: 3px solid var(--steel);
  max-width: 58ch;
}
.limita h3 {
  font-size: .95rem;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.limita p { color: #c7c0b8; font-size: 15.5px; }
.limita p + p { margin-top: 12px; }

/* adâncimile, la blocul 8 */
.adancimi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.adancimi li {
  background: #171009;
  border: 1px solid #241c14;
  padding: 30px 26px;
}
.adancimi h3 { font-size: 1.3rem; }
.adancimi .ore {
  display: block;
  margin: 12px 0 16px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.adancimi p { font-size: 15px; color: #c7c0b8; }

/* panourile din blocul 8 */
.panou + .panou {
  margin-top: 74px;
  padding-top: 62px;
  border-top: 1px solid var(--stone);
}
.panou h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.panou .lead { margin-top: 20px; }

.variabile {
  margin-top: 26px;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  color: #d5cec6;
  max-width: 62ch;
}

.incheiere {
  margin-top: 30px;
  padding: 22px 26px;
  border-left: 3px solid var(--ember);
  background: rgba(229,82,4,.07);
  font-size: 1.05rem;
  color: var(--bone);
  font-weight: 600;
  max-width: 54ch;
}

/* =========================================================================
   BLOCURILE DIN r2-mockup-1, REÎNTOARSE PE HOME
   Portate 1:1 din `r2-mockup-1/style.css` — aceleași valori, același
   vocabular vizual. Home se întoarce la structura direcției alese: hero pe
   tot ecranul, grila de prețuri, benzile foto alternate, o idee pe ecran.
   Detaliul procedural pe cele șase etape a plecat integral pe Servicii.
   ========================================================================= */

/* --- grila de prețuri (r2, secțiunea 2) -------------------------------- */

.pachete {
  background: var(--pitch);
  padding-top: var(--band);
  padding-bottom: var(--band);
  border-top: 3px solid var(--ember);
}

.grid-pachete {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  display: flex;
  flex-direction: column;
  background: #171009;
  border: 1px solid #241c14;
}

/* 30.10 — poza era 4/5 (verticala): pe un card de ~400px insemna 503px
   doar imagine, iar cele trei pachete nu incapeau pe un ecran de laptop.
   16/9 o taie la ~225px si se potriveste oricum mai bine subiectului, care
   e o masina culcata, nu un portret. Sub 1080px ramane 3/2 — acolo cardul
   e pe toata latimea si o banda prea joasa ar arata ca un chenar. */
.card-img { aspect-ratio: 16 / 9; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }

.card-body {
  padding: 30px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card h3 { font-size: 1.5rem; letter-spacing: 0.02em; }

/* BANDA DE ORE, ÎNAINTEA SUMEI — regula de ordine din copy (brief §6).
   Același tratament ca `.adancimi .ore`: strat faptic în steel, cifre
   tabulare. De-aia `.price` pierde marginea de sus pe care o avea în r2:
   locul ei e luat de banda de ore. */
.card .ore {
  display: block;
  margin: 16px 0 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}

.price {
  margin: 0 0 4px;
  /* 30.10 — coborata de la clamp(2.3, 3.1vw, 3.2). Suma ramane cel mai mare
     lucru din card, dar nu mai concureaza cu titlul sectiunii. */
  font-size: clamp(1.95rem, 2.5vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.price .cur { font-size: .42em; color: var(--ash); letter-spacing: 0.04em; }

/* r2 avea trei bullet-uri pe card. Copy-ul aprobat dă O propoziție pe
   adâncime (blocul 8), deci e o propoziție — nu se taie în trei ca să umple
   lista. Linia de sus se păstrează, ca ritmul cardului să rămână al lui. */
.card .descriere {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #2a211a;
  font-size: 15px;
  line-height: 1.5;
  color: #cfc8c0;
}

.nota-pret {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid #2a211a;
  color: #a7a099;
  font-size: 15px;
  max-width: 72ch;
}
.nota-pret b { color: var(--bone); font-weight: 600; }

/* --- banda foto cu titlu (r2, secțiunea 3) ----------------------------- */

.band {
  position: relative;
  height: 66vh;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,5,3,.90) 0%, rgba(11,5,3,.35) 45%, rgba(11,5,3,.05) 100%);
}
.band .wrap { position: relative; z-index: 2; padding-bottom: 58px; }
.band h2 {
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  margin-top: 20px;
  max-width: 18ch;
  text-shadow: 0 2px 30px rgba(11,5,3,.8);
}

/* --- ecranul de sub bandă: fotografie + text (r2, secțiunea 3) --------- */

.proces { padding-top: var(--band); padding-bottom: var(--band); background: var(--field); }
.proces .wrap {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 70px;
  align-items: center;
}
.proces figure { margin: 0; }
.proces figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.proces p.lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: #d5cec6; max-width: 48ch; }

/* --- text peste imagine, pe tot ecranul (r2, secțiunea 4) -------------- */

.dece {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--pitch);
  padding-top: var(--band);
  padding-bottom: var(--band);
}
.dece > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.dece-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(11,5,3,.95) 0%, rgba(11,5,3,.88) 34%, rgba(11,5,3,.45) 62%, rgba(11,5,3,.10) 100%);
}
.dece .wrap { position: relative; z-index: 2; }
.dece .col { max-width: 620px; }
.dece h2 { font-size: clamp(1.9rem, 4vw, 3.3rem); margin-top: 22px; max-width: 21ch; }
.dece p.lead {
  margin-top: 26px;
  font-size: clamp(1.04rem, 1.35vw, 1.26rem);
  color: #d5cec6;
  max-width: 52ch;
}
.dece p.lead + p.lead { margin-top: 18px; }

/* =========================================================================
   PAGINI SECUNDARE
   ========================================================================= */

.pag-head {
  background: var(--pitch);
  padding-top: 150px;
  padding-bottom: var(--band-sm);
  border-bottom: 3px solid var(--ember);
  position: relative;
}
.pag-head h1 {
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  margin-top: 22px;
  max-width: 24ch;
}
.pag-head .lead {
  margin-top: 28px;
  font-size: clamp(1.04rem, 1.35vw, 1.26rem);
  color: #d5cec6;
  max-width: 62ch;
}
/* topbar-ul paginilor secundare nu stă peste o fotografie */
.pag-head .topbar { position: absolute; }

.sectiune {
  padding-top: var(--band-sm);
  padding-bottom: var(--band-sm);
  background: var(--field);
}
.sectiune.pitch { background: var(--pitch); }
.sectiune + .sectiune { border-top: 1px solid var(--stone); }
.sectiune h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 30px; }
.sectiune p.lead { font-size: 1.1rem; color: #d5cec6; max-width: 58ch; }

.cta-jos { margin-top: 60px; }

/* două coloane pe o secțiune de pagină secundară (text + fotografie) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.duo figure { margin: 0; overflow: hidden; }
.duo figure img { width: 100%; height: clamp(280px, 42vh, 460px); object-fit: cover; }

/* cele șase etape, mutate de pe Home pe Servicii: textul ține coloana mare,
   fotografia pe cea mică, laturile alternate de la o etapă la alta.
   Densitate de pagină secundară, nu ecran full-height — ăsta era defectul
   care a mutat tot procesul pe prima pagină. */
.duo.etapa { grid-template-columns: 1.3fr 0.9fr; align-items: center; }
.duo.etapa.inv figure { order: -1; }
.duo.etapa figure img { height: clamp(320px, 52vh, 560px); }

/* --- matricea de pe Servicii ------------------------------------------- */

.matrice { overflow-x: auto; margin-top: 44px; -webkit-overflow-scrolling: touch; }
.matrice table {
  border-collapse: collapse;
  width: 100%;
  min-width: 920px;
  font-size: 15px;
}
.matrice th, .matrice td {
  text-align: left;
  vertical-align: top;
  padding: 20px 20px;
  border-bottom: 1px solid var(--stone);
}
.matrice thead th {
  border-bottom: 2px solid var(--ember);
  color: var(--bone);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  width: 22%;
}
.matrice thead th .ore {
  display: block;
  color: var(--steel);
  letter-spacing: 0.16em;
  font-weight: 400;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.matrice thead th.gol { border-bottom-color: var(--stone); }
.matrice tbody th {
  color: var(--bone);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 16%;
}
.matrice tbody th .nr { color: var(--ember); font-variant-numeric: tabular-nums; }
.matrice td { color: #c7c0b8; }
.matrice td b { color: var(--bone); font-weight: 600; }
.matrice td.vid { color: var(--ash); font-size: 22px; line-height: 1; }
.matrice tbody tr:nth-child(even) { background: rgba(143,163,172,.04); }

.nota-matrice {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ash);
  letter-spacing: 0.04em;
}

/* --- extra-urile, listă ------------------------------------------------ */

.extra { margin-top: 30px; max-width: 72ch; }
.extra li {
  padding: 18px 0 18px 22px;
  border-bottom: 1px solid var(--stone);
  color: #c7c0b8;
  font-size: 15.5px;
  position: relative;
}
.extra li::before {
  content: "";
  position: absolute;
  left: 0; top: 29px;
  width: 8px; height: 1px;
  background: var(--ember);
}
.extra li b { color: var(--bone); font-weight: 600; }
.extra .pret { color: var(--steel); font-variant-numeric: tabular-nums; }

/* --- Portofoliu: sloturile de suprafață -------------------------------- */

.suprafete {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.suprafete .slot {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* --- Despre: unelte ---------------------------------------------------- */

.unelte { margin-top: 26px; border-top: 1px solid var(--stone); max-width: 68ch; }
.unelte li {
  padding: 16px 0;
  border-bottom: 1px solid var(--stone);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: baseline;
  font-size: 15.5px;
  color: #c7c0b8;
}
.unelte .nume {
  color: var(--bone);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.refuza { margin-top: 26px; max-width: 70ch; }
.refuza li {
  padding: 18px 0;
  border-bottom: 1px solid var(--stone);
  color: #d5cec6;
  font-size: 16px;
}

/* --- Contact: formular ------------------------------------------------- */

.formular { margin-top: 40px; max-width: 620px; }
.camp { margin-bottom: 26px; }
.camp label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 10px;
}
.camp .ajutor {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ash);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.camp input, .camp select {
  width: 100%;
  background: rgba(11,5,3,.6);
  border: 1px solid var(--stone);
  color: var(--bone);
  font: inherit;
  font-size: 16px;
  padding: 15px 16px;
  border-radius: 0;
}
.camp input:focus, .camp select:focus { outline: 0; border-color: var(--ember); }
.camp.doua { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.camp.doua > div { margin: 0; }

.consimtamant {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 30px 0 8px;
  font-size: 15px;
  color: #c7c0b8;
}
.consimtamant input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ember); }

.date-contact { border-top: 1px solid var(--stone); margin-top: 30px; }
.date-contact div {
  padding: 22px 0;
  border-bottom: 1px solid var(--stone);
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  align-items: baseline;
}
.date-contact .et {
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--steel);
}
.date-contact .val { font-size: 16px; color: var(--bone); }

.harta.slot { min-height: 260px; display: flex; align-items: center; justify-content: center; text-align: center; }

/* =========================================================================
   HARTA — runda 3, adresa s-a deblocat
   Embed Google Maps construit pe interogare, fără cheie de API:
     https://www.google.com/maps?q=<adresa+urlencoded>&output=embed
   Problema de registru: embed-ul vine alb, iar pagina e antracit — un
   dreptunghi alb lipit ar fi singurul lucru luminos din tot site-ul.
   Iframe-ul nu se poate stiliza din afară (alt document, alt origin), dar
   CUTIA lui se poate: documentul părinte îi aplică un `filter`. Harta devine
   un element întunecat, în paleta paginii.
   Două straturi, ca să țină și dacă filtrul nu se aplică:
     1. `.harta-cadru` = același panou ca restul blocurilor (fundal --pitch,
        bordură, linie portocalie sus) — deci chiar fără filtru harta stă
        într-o ramă din pagină, nu pe nimic;
     2. `.harta-cadru iframe` = inversarea care o întunecă.
   ========================================================================= */

.harta-cadru {
  position: relative;
  margin-top: 30px;
  background: var(--pitch);
  border: 1px solid #241c14;
  border-top: 3px solid var(--ember);
  overflow: hidden;
}

.harta-cadru iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  /* inversare + rotația de nuanță readuce verdele/albastrul aproape de locul
     lor după invert; saturarea scăzută și contrastul îl așază în paletă. */
  filter: invert(0.9) hue-rotate(180deg) saturate(0.55) contrast(0.95) brightness(0.98);
}

/* voal subțire peste hartă, ca marginile ei să se topească în panou în loc să
   se taie drept. `pointer-events:none` — harta rămâne folosibilă dedesubt. */
.harta-cadru::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,5,3,.30) 0%, rgba(11,5,3,0) 22%, rgba(11,5,3,0) 78%, rgba(11,5,3,.30) 100%);
}

/* adresa scrisă, lângă hartă: un iframe care nu se încarcă nu are voie să
   lase pagina fără adresă. */
.harta-text {
  margin: 0;
  padding: 20px 22px;
  border-top: 1px solid #241c14;
  background: rgba(0,0,0,.25);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bone);
}
.harta-text .et {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 7px;
}
.harta-text .reper { display: block; color: #c7c0b8; font-size: 15px; margin-top: 4px; }
.harta-text a { color: var(--ember); text-decoration: none; border-bottom: 1px solid rgba(229,82,4,.45); }
.harta-text a:hover { border-bottom-color: var(--ember); }

/* =========================================================================
   BARA PERSISTENTĂ PE MOBIL + FOOTER
   ========================================================================= */

.bara-mobil {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  background: rgba(11,5,3,.96);
  border-top: 1px solid rgba(229,82,4,.5);
  padding: 12px 16px;
}
.bara-mobil .btn { display: block; text-align: center; padding: 16px 14px; }

footer {
  background: var(--pitch);
  border-top: 1px solid #241c14;
  padding: 34px 0 40px;
}
footer .sus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
footer img { height: 56px; width: auto; }
footer small { color: var(--ash); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border-bottom: 1px solid var(--stone);
  padding-bottom: 3px;
}
footer nav a:hover { border-color: var(--ember); }
footer .nota-maceta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #241c14;
  color: #8e867f;
  font-size: 13px;
  line-height: 1.6;
  max-width: 86ch;
}
footer .nota-maceta b { color: #e8c2ab; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  :root { --band: 120px; --band-sm: 100px; --gutter: 34px; }

  .full { min-height: 0; }
  .full.sp .wrap { grid-template-columns: 1fr; gap: 44px; }
  .full.sp--right figure { order: 0; }
  .full.sp figure img { height: clamp(300px, 46vh, 460px); }
  .full.ov .scrim {
    background: linear-gradient(to top, rgba(11,5,3,.96) 0%, rgba(11,5,3,.90) 50%, rgba(11,5,3,.58) 100%);
  }
  .full.ov { align-items: flex-end; }
  .adancimi { grid-template-columns: 1fr; max-width: 560px; }
  .suprafete { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 40px; }
  .duo.etapa { grid-template-columns: 1fr; }
  .duo.etapa.inv figure { order: 0; }

  /* blocurile portate din r2 — aceleași praguri ca în r2-mockup-1 */
  .grid-pachete { grid-template-columns: 1fr; max-width: 560px; }
  .card-img { aspect-ratio: 3 / 2; }
  .proces .wrap { grid-template-columns: 1fr; gap: 44px; }
  .proces figure img { aspect-ratio: 16 / 10; }
  .dece { align-items: flex-end; min-height: 74vh; }
  .dece-scrim {
    background: linear-gradient(to top, rgba(11,5,3,.96) 0%, rgba(11,5,3,.88) 48%, rgba(11,5,3,.55) 100%);
  }
}

@media (max-width: 720px) {
  :root { --band: 96px; --band-sm: 88px; --gutter: 22px; }

  body { font-size: 16px; padding-bottom: 86px; }

  .topbar { padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; gap: 12px; }
  .topbar img { height: 54px; }
  .topbar nav { gap: 16px; flex-wrap: wrap; }
  .topbar nav a { font-size: 11px; letter-spacing: 0.12em; }

  .hero { min-height: 96vh; min-height: 96svh; }
  .hero-copy { padding-top: 142px; padding-bottom: 54px; }
  .hero h1 { font-size: clamp(1.9rem, 7.6vw, 2.5rem); max-width: 100%; }
  .hero-sub { margin-bottom: 32px; }

  .pag-head { padding-top: 150px; }

  .btn { display: block; text-align: center; padding: 20px 22px; font-size: 13px; letter-spacing: 0.13em; }

  .sec-head { margin-bottom: 36px; }
  .fapte li { grid-template-columns: 1fr; gap: 6px; }
  .unelte li { grid-template-columns: 1fr; gap: 4px; }
  .panou + .panou { margin-top: 54px; padding-top: 44px; }
  .limita { padding: 22px 20px; }
  .suprafete { grid-template-columns: 1fr; }
  .camp.doua { grid-template-columns: 1fr; }
  .date-contact div { grid-template-columns: 1fr; gap: 6px; }
  .harta-cadru iframe { height: 280px; }
  .harta-text { padding: 18px 18px; }

  .card-body { padding: 30px 24px 28px; }
  .band { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .band .wrap { padding-bottom: 34px; }

  .bara-mobil { display: block; }

  footer .sus { justify-content: center; text-align: center; }
  footer nav { justify-content: center; }
}

/* ===== titluri de secțiune pe mijloc ===== */
.sec-head.centrat { text-align: center; }
.sec-head.centrat h2 { max-width: 24ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.sec-head.centrat .proces-nota { margin: 22px auto 0; max-width: 54ch; }

/* ===== BENEFICII — bandă orizontală, totul pe mijloc ===== */
.beneficii { background: var(--carbon, #14100D); }
.banda-beneficii {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09);
}
.banda-beneficii .ben {
  padding: 48px 24px; text-align: center;
  border-left: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.banda-beneficii .ben:first-child { border-left: 0; }
.ben-ic { display: grid; place-items: center; color: #E55204; }
.ben-ic svg { width: 46px; height: 46px; stroke-linecap: round; stroke-linejoin: round; }
.banda-beneficii h3 { margin: 0; font-size: .99rem; line-height: 1.45; letter-spacing: -.004em; max-width: 24ch; }
@media (max-width: 1060px) {
  .banda-beneficii { grid-template-columns: repeat(2, 1fr); }
  .banda-beneficii .ben { border-top: 1px solid rgba(255,255,255,.07); }
  .banda-beneficii .ben:nth-child(odd) { border-left: 0; }
}
@media (max-width: 560px) { .banda-beneficii { grid-template-columns: 1fr; } .banda-beneficii .ben { border-left: 0; } }

/* ===== CINE SUNTEM / MISIUNEA ===== */
.misiune { background: #0B0503; border-top: 3px solid #E55204; }
.mis-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.mis-foto { padding: 0; }
.slot-foto {
  aspect-ratio: 4 / 5; border: 1px dashed rgba(229,82,4,.55); border-radius: 2px;
  display: grid; align-content: center; justify-items: center; gap: 10px;
  padding: 30px; text-align: center; color: rgba(244,240,234,.62); font-size: .95rem;
  background: rgba(229,82,4,.04);
}
.slot-foto .et { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #E55204; }
.mis-kicker { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #E55204; margin: 0 0 20px; }
.mis-fraza {
  text-transform: none; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.3;
  letter-spacing: -.018em; margin: 0; max-width: 26ch;
}
.mis-fraza em { font-style: normal; color: #E55204; }
.mis-viziune { margin-top: 28px; opacity: .58; font-size: .98rem; }
@media (max-width: 900px) { .mis-grid { grid-template-columns: 1fr; } .slot-foto { aspect-ratio: 16 / 10; } }

/* ===== PROCESUL — rută în S ===== */
.etape-proces { padding-top: var(--band); padding-bottom: var(--band); background: var(--field); }
.proces-nota { opacity: .66; }
.ruta-s { position: relative; margin-top: 10px; }
.ruta-linie { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(229,82,4,.5); pointer-events: none; }
.ruta-grid {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.ruta-grid li {
  min-height: 210px; padding: 26px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
/* rândul 2 merge invers: 04 dreapta, 06 stânga */
.ruta-grid li:nth-child(4) { grid-area: 2 / 3; }
.ruta-grid li:nth-child(5) { grid-area: 2 / 2; }
.ruta-grid li:nth-child(6) { grid-area: 2 / 1; }
.ruta-grid li:nth-child(7) { grid-area: 3 / 1; }
.nod {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; font-size: .9rem; letter-spacing: .04em; color: #E55204;
  background: var(--field); border: 1px solid rgba(229,82,4,.55);
}
.ruta-grid strong { display: block; font-size: 1.08rem; }
.pas-txt { display: block; opacity: .72; line-height: 1.6; font-size: .92rem; max-width: 34ch; }
@media (max-width: 880px) {
  .ruta-linie { display: none; }
  .ruta-grid { grid-template-columns: 1fr; }
  .ruta-grid li, .ruta-grid li:nth-child(n) { grid-area: auto; min-height: 0; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.09); }
  .ruta-grid li:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
}

/* ===== LOCAȚIA ===== */
.locatie { padding-top: var(--band); padding-bottom: var(--band); background: var(--carbon, #14100D); }
.slot-harta {
  min-height: 420px; border: 1px dashed rgba(229,82,4,.55); border-radius: 2px;
  display: grid; align-content: center; justify-items: center; gap: 10px;
  text-align: center; color: rgba(244,240,234,.62); background: rgba(229,82,4,.04);
}
.slot-harta .et { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #E55204; }

/* ===== corecturi rundă 3 ===== */
.beneficii { padding-top: 0; }
.beneficii .wrap > .banda-beneficii { border-top: 0; }

/* bullet-uri în carduri + aer înainte de buton */
.card-body ul.bife { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.card-body ul.bife li { position: relative; padding-left: 20px; line-height: 1.55; }
.card-body ul.bife li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
  border: 1px solid #E55204; border-radius: 50%;
}
.card-body .btn { margin-top: 26px; }

/* nota de preț, centrată și lipită de carduri */
.nota-pret.centrat { text-align: center; margin: 28px auto 0; max-width: 62ch; }

/* ===== CINE SUNTEM / SPA — aer sub poză ===== */
.misiune, .spa { padding-top: var(--band); padding-bottom: var(--band); }
.spa { background: #0B0503; border-top: 1px solid rgba(255,255,255,.09); position: relative; z-index: 1; }
.spa .wrap { position: relative; z-index: 5; }
.mis-grid.inversat { grid-template-columns: 1.15fr 0.85fr; }
.mis-grid .mis-foto { padding: 0 0 clamp(18px, 3vw, 44px); }
.spa-corp { margin: 20px 0 0; opacity: .76; line-height: 1.68; max-width: 54ch; }
@media (max-width: 900px) { .mis-grid.inversat { grid-template-columns: 1fr; } }

/* butoanele celor trei pachete, aliniate jos */
.grid-pachete .card { display: flex; flex-direction: column; }
.grid-pachete .card-body { display: flex; flex-direction: column; flex: 1; }
.card-body .btn { margin-top: auto; align-self: start; }
.card-body ul.bife { margin-bottom: 26px; }

/* descrierea fiecărei etape: un singur rând */
.pas-txt { max-width: none; white-space: nowrap; font-size: .9rem; }
@media (max-width: 1100px) { .pas-txt { white-space: normal; } }

/* ===== PROCESUL — stropi + numere-fantomă ===== */
.etape-proces { position: relative; overflow: hidden; }
.stropi { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stropi-a { opacity: .52; }
.stropi-b { opacity: .44; }
.stropi-c { opacity: .20; }
.etape-proces .wrap { position: relative; z-index: 1; }
.ruta-grid li { position: relative; }
.umbra-nr {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: 7.4rem; line-height: 1; font-weight: 800; letter-spacing: -.05em;
  color: rgba(244,242,236,.035); pointer-events: none; z-index: 0;
  font-variant-numeric: tabular-nums;
}
.ruta-grid .nod, .ruta-grid strong, .ruta-grid .pas-txt { position: relative; z-index: 1; }
@media (max-width: 880px) { .umbra-nr { display: none; } .stropi { opacity: .6; } }

/* ===== PROCES — nodurile variantei D (lumina moderata) ===== */
.etape-proces .nod {
  width: 64px; height: 64px; font-size: 1.16rem; font-weight: 800;
  letter-spacing: .02em; border-width: 2px; border-color: rgba(229,82,4,.85);
  color: #FF8A4C; box-shadow: 0 0 0 6px rgba(229,82,4,.08);
}
.etape-proces .ruta-grid strong { font-size: 1.14rem; }


/* ===== vopseaua trece peste cusatura dintre sectiuni ===== */
.etape-proces { overflow: visible; }
.etape-proces .stropi {
  top: -420px; height: calc(100% + 680px);
  z-index: 3;                      /* peste fundalul sectiunii de deasupra, sub textul ei */
}
.etape-proces .wrap { position: relative; z-index: 4; }
.misiune { position: relative; z-index: 1; }
.misiune .wrap { position: relative; z-index: 5; }

/* ===== tranzitii in gradient intre sectiuni, in loc de linie dreapta ===== */
.etape-proces::before,
.etape-proces::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 190px; pointer-events: none; z-index: 2;   /* peste fundal, sub vopsea (z-index 3) */
}
.etape-proces::before { top: 0;    background: linear-gradient(to bottom, #0B0503 0%, rgba(11,5,3,.72) 38%, rgba(11,5,3,0) 100%); }
.etape-proces::after  { bottom: 0; background: linear-gradient(to top,    #0B0503 0%, rgba(11,5,3,.72) 38%, rgba(11,5,3,0) 100%); }

/* sectiunile vecine nu mai au nevoie de muchie proprie */
.misiune { border-top-width: 3px; }
.spa { border-top: 0; }


/* ============================================================
   20.10 — trei reglaje, fiecare cu clasa lui
   (regula invatata pe 15.10: ce trebuie sa ramana intr-o singura
   pagina se scrie cu clasa proprie, nu peste o regula comuna)
   ============================================================ */

/* 1 · fotografia din „Masina ta la spa" — tine exact formatul slotului */
.foto-spa { margin: 0; }
.foto-spa img {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 2px;
}
/* pe telefon ramane portret: la 16/10 se taia firma de neon din cadru */
@media (max-width: 900px) { .foto-spa img { aspect-ratio: 4 / 5; } }

/* 2 · harta Google interactiva (pin pe adresa, se poate trage si mari) */
.harta { display: grid; gap: 14px; }
.harta-cadru {
  display: block; width: 100%; height: 420px; border: 0; border-radius: 2px;
  background: rgba(229,82,4,.04);
}
@media (max-width: 700px) { .harta-cadru { height: 320px; } }
.harta-adresa { margin: 0; text-align: center; font-size: .95rem; opacity: .74; }
.harta-adresa a {
  color: #E55204; text-decoration: none; margin-left: 8px;
  border-bottom: 1px solid rgba(229,82,4,.45);
}
.harta-adresa a:hover { border-bottom-color: #E55204; }

/* 3 · cusatura Proces → Spa: pata de vopsea ramane, golul de sub ea nu.
      Erau 160px + 160px de padding si 260px de scurgere a vopselei. */
.etape-proces { padding-bottom: 84px; }
.spa { padding-top: 84px; }
.etape-proces .stropi { height: calc(100% + 540px); }   /* scurgere in jos: 120px, nu 260 */

/* 4 · 20.10 — cele doua video-uri de pe Portofoliu (clasa proprie, doar aici) */
.video-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 30px); }
.video-duo figure { margin: 0; }
.video-duo video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 2px; background: #0B0503;
}
@media (max-width: 760px) { .video-duo { grid-template-columns: 1fr; } }

/* 5 · 20.10 — insigna de rating Google, centrata la finalul sectiunii „Masina ta la spa" */
.rating-google { margin-top: clamp(44px, 6vw, 78px); display: flex; justify-content: center; }
.rg-card {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 26px); text-decoration: none; color: inherit;
  padding: clamp(20px, 2.6vw, 30px) clamp(26px, 3.4vw, 46px);
  border: 1px solid rgba(244,240,234,.16); border-radius: 3px;
  background: rgba(244,240,234,.035);
  transition: border-color .18s ease, background .18s ease;
}
.rg-card:hover { border-color: rgba(229,82,4,.65); background: rgba(229,82,4,.06); }
.rg-g svg { display: block; width: clamp(30px, 3.4vw, 42px); height: auto; }
.rg-nota {
  font-size: clamp(2.6rem, 5vw, 4.1rem); font-weight: 800; line-height: 1;
  letter-spacing: -.035em; color: #F4F0EA; font-variant-numeric: tabular-nums;
}
.rg-stele { display: inline-flex; gap: 3px; }
.rg-stele .stea { width: clamp(22px, 2.4vw, 30px); height: auto; fill: #FBBC04; display: block; }
.rg-text { font-size: clamp(.95rem, 1.2vw, 1.1rem); opacity: .8; }
.rg-text strong { font-weight: 700; opacity: 1; }
.rg-link {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #E55204;
  border-bottom: 1px solid rgba(229,82,4,.45); padding-bottom: 2px;
}
.rg-card:hover .rg-link { border-bottom-color: #E55204; }
@media (max-width: 640px) {
  .rg-card { flex-direction: column; gap: 12px; text-align: center; padding: 26px 22px; }
}


/* ===== PACHETE — al patrulea card a fost SCOS pe 25.10 ==================
   Grila `.patru`, tipografia ei redusa si `.custom-sub` au plecat odata cu
   el: Custom nu mai e card, e sectiune proprie (blocul 13). Pachetele sunt
   din nou trei, pe `repeat(3, 1fr)`, adica regula comuna de la `.pachete`.
   ====================================================================== */

/* ============================================================
   22.10 — doua reglaje in „Masina ta la spa", fiecare cu clasa
   lui (regula din 15.10: nimic peste o regula comuna)
   ============================================================ */

/* 6 · vopseaua nu mai atinge titlul. NU ating SVG-ul: `slice` il
      decupeaza dupa cutie, deci orice schimbare de inaltime muta
      TOATE petele. Dau aer titlului, atat. Varful petei ramane
      unde e (y 5045), titlul coboara sub el. */
.spa { padding-top: 128px; }
@media (max-width: 900px) { .spa { padding-top: 96px; } }

/* 7 · fotografia nu mai are muchie taiata — se stinge in fundal.
      Doua straturi, amandoua doar aici:
      a) aura calda, pusa pe SECTIUNE, nu pe cutia pozei. Pe cutia
         pozei elipsa iesea in afara si se taia drept — se vedea un
         dreptunghi. Pe sectiune are loc sa se stinga singura.
         Centrul ei cade pe marginea din stanga a pozei, la ~29% din
         inaltimea sectiunii: exact de unde bate lumina din imagine.
      b) masca pe toate laturile. Coada cea mai lunga e jos: acolo e
         podeaua luminata, deci acolo se vede cel mai tare taietura. */
.spa::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(720px 560px at 59% 29%,
      rgba(229,82,4,.22) 0%,
      rgba(229,82,4,.08) 42%,
      rgba(229,82,4,0) 72%);
}
.spa .foto-spa { position: relative; z-index: 1; }
.spa .foto-spa img {
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 10%, #000 72%, rgba(0,0,0,0) 100%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 13%, #000 88%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 10%, #000 72%, rgba(0,0,0,0) 100%),
    linear-gradient(to right,  rgba(0,0,0,0) 0%, #000 13%, #000 88%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}

/* pe o coloana poza coboara sub text, deci aura coboara cu ea */
@media (max-width: 900px) {
  .spa::before {
    background: radial-gradient(640px 620px at 50% 58%,
        rgba(229,82,4,.20) 0%,
        rgba(229,82,4,.07) 44%,
        rgba(229,82,4,0) 74%);
  }
}

/* 8 · 22.10 — poza mai mare, textul strans spre ea.
      Coloana de text era 731px, dar textul ocupa 521 (masura lui de
      54ch): 210px de gol inauntru, plus 72 de sant = 282px intre
      text si poza. Strang COLOANA, nu masura textului — randul de
      lectura ramane citibil, golul dispare, poza ia diferenta.
      Marginea din stanga a textului ramane pe 48px, ca in restul
      paginii. Poza iese 34px in santul din dreapta, pentru ca
      estomparea ei ocupa ultimii ~12%: asa muchia care SE VEDE cade
      pe aceeasi linie cu marginea din dreapta, nu inaintea ei. */
.spa .mis-grid.inversat { grid-template-columns: 0.78fr 1fr; }
.spa .mis-foto { margin-right: -34px; }
@media (max-width: 900px) {
  .spa .mis-grid.inversat { grid-template-columns: 1fr; }
  .spa .mis-foto { margin-right: 0; }
}

/* ============================================================
   22.10 — datele de contact, widgetul flotant, retelele
   ============================================================ */

/* 9 · telefon + program, sub harta. Email nu exista: decizia clientului. */
.date-jos {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px clamp(28px, 4vw, 64px);
}
.date-jos li { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.date-jos .et {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--steel);
}
.date-jos a, .date-jos span:not(.et) { font-size: 1.12rem; color: #F4F0EA; text-decoration: none; }
.date-jos a { border-bottom: 1px solid rgba(229,82,4,.45); padding-bottom: 2px; }
.date-jos a:hover { border-bottom-color: #E55204; color: #FF8A4C; }

/* 10 · widget flotant: sunat + WhatsApp, pe toata pagina */
.flotant {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
}
.fl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px;
  font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; color: #0B0503;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .16s ease, box-shadow .16s ease;
}
.fl-btn svg { width: 19px; height: 19px; flex: none; }
.fl-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.55); }
.fl-tel { background: #E55204; color: #fff; }
.fl-wa  { background: #25D366; color: #06331a; }

/* pe telefon urca deasupra barei persistente si ramane doar iconita */
@media (max-width: 720px) {
  .flotant { right: 14px; bottom: 100px; }
  .fl-btn { padding: 14px; border-radius: 50%; }
  .fl-btn span { display: none; }
  .fl-btn svg { width: 22px; height: 22px; }
}

/* 11 · retele + politica de confidentialitate, jos de tot */
footer .jos {
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
}
.retele { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.retele a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid rgba(244,240,234,.18); border-radius: 50%;
  color: rgba(244,240,234,.72);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.retele a:hover { border-color: #E55204; color: #FF8A4C; background: rgba(229,82,4,.08); }
.retele svg { width: 18px; height: 18px; }
/* linkul inca necompletat se vede ca atare, nu trece drept functional */
.retele a[data-lipsa] { border-style: dashed; opacity: .55; }
.privacy-link {
  font-size: .82rem; color: rgba(244,240,234,.5); text-decoration: none;
  border-bottom: 1px solid rgba(244,240,234,.18); padding-bottom: 2px;
}
.privacy-link:hover { color: #FF8A4C; border-bottom-color: rgba(229,82,4,.6); }
@media (max-width: 560px) { footer .jos { justify-content: center; } }

/* 12 · pagina de politica de confidentialitate — text lung, masura ingusta */
.wrap-text { max-width: 760px; }
.h-legal {
  margin: 48px 0 14px; font-size: 1.32rem; letter-spacing: -.01em;
  text-transform: none; line-height: 1.25;
}
.h-legal:first-of-type { margin-top: 0; }
.wrap-text p { margin: 0 0 14px; line-height: 1.72; opacity: .84; }
.wrap-text p a { color: #E55204; text-decoration: none; border-bottom: 1px solid rgba(229,82,4,.45); }
.wrap-text p a:hover { border-bottom-color: #E55204; }
.lista-legal { margin: 0 0 18px; padding: 0; list-style: none; }
.lista-legal li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  line-height: 1.66; opacity: .84;
}
.lista-legal li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: #E55204;
}
.data-legal { margin-top: 42px; font-size: .9rem; opacity: .55; }


/* ============================================================
   13 · 25.10 — PACHET CUSTOM, SECTIUNE PROPRIE (à la carte)
   Cardul din grila de pachete nu putea duce ideea: Custom nu e un
   pachet, e lista din care clientul alege. De-aia tiparul e de
   MENIU — nume, conducator punctat, pret — si de-aia cardul al
   patrulea a fost scos cu totul din grila de deasupra.

   FARA strat interactiv. Prima varianta avea bife, adunare si
   trimitere pe WhatsApp; clientul le-a scos pe toate in aceeasi zi:
   sectiunea doar arata optiunile, fiecare pe randul ei. Deci zero
   JS, zero <button>, zero stare — doar text si pret.

   Clasa proprie peste tot. `/r4-proces/` incarca aceeasi foaie.
   ============================================================ */

.custom {
  position: relative;
  overflow: hidden;
  background: #17110C;                     /* camera ei: intre --field si --pitch */
  border-top: 1px solid rgba(229,82,4,.3);
  padding-top: var(--band);
  padding-bottom: var(--band);
}
/* aura calda sus-dreapta — aceeasi gramatica de lumina ca la .spa */
.custom::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 580px at 82% 8%, rgba(229,82,4,.17), rgba(229,82,4,0) 68%);
}
/* textura de hasuri foarte fine — fisa tehnica, nu fundal plat */
.custom::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(244,240,234,.028) 0 1px, rgba(244,240,234,0) 1px 9px);
}
.custom > .wrap { position: relative; z-index: 2; }

.custom-head { max-width: 74ch; }
.custom-head h2 {
  margin: 18px 0 0;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: .94;
}
.custom-head .lead { margin-top: 22px; opacity: .8; line-height: 1.66; max-width: 66ch; }

/* --- piciorul sectiunii ------------------------------------------------ */
.custom-jos {
  margin-top: clamp(40px, 4.6vw, 64px);
  padding-top: 24px;
  border-top: 1px dashed rgba(244,240,234,.16);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 3vw, 56px); flex-wrap: wrap;
}
.cta-custom { margin: 0; flex: none; }

@media (max-width: 560px) {
  .custom-jos { flex-direction: column; align-items: stretch; }
  .cta-custom .btn { display: block; text-align: center; }
}

/* =========================================================================
   14 · REGLAJE DE MOBIL — 26.10.2026
   -------------------------------------------------------------------------
   Pagina avea deja praguri responsive (1080 / 880 / 720 / 560). Blocul asta
   nu le rescrie: repara patru defecte vazute pe un ecran real de 390 x 844,
   nu presupuse din latimea ferestrei.

   Scrise ca bloc separat la finalul foii, nu peste regulile comune — foaia e
   incarcata si de /r4-proces/, deci o regula comuna atinsa aici se muta si
   acolo fara sa vada nimeni.
   ========================================================================= */

/* --- 14.1 · stropii decorativi dispar pe telefon -------------------------
   Pe desktop sunt un ornament de fundal care se citeste ca o textura. Sub
   latimea unui telefon, decupajul lor nu mai incape si iese ca o PATA maro
   peste etapele 7 si 8 — am vazut-o in captura. `opacity: .6` de la pragul
   de 880px nu rezolva nimic: subtiaza pata, n-o face ornament.
   Un ornament care se citeste ca defect e mai rau decat absenta lui. */
@media (max-width: 720px) {
  .stropi { display: none; }
}

/* --- 14.3 · tinte de atins cu degetul ------------------------------------
   Pragul de 44 x 44 px e minimul pentru un deget (Apple HIG; Material cere
   48). In navigatie linkurile masurau 57 x 23 px — se nimeresc din a doua
   incercare. Inaltimea vine din padding, deci zona de atins creste fara ca
   textul sa se mareasca si sa rupa randul. */
@media (max-width: 720px) {
  .topbar nav a { font-size: 12px; padding: 11px 0; }

  footer nav a,
  .date-jos a,
  .harta-text a,
  .date-contact .val a,
  .date-contact .reper a,
  .privacy-link { display: inline-block; padding: 11px 0; }

  /* Linkul din interiorul unui paragraf nu poate primi padding: `inline-block`
     il scoate din randul de text si lasa linia stramba. Zona de atins se
     intinde atunci cu un pseudo-element, care nu misca nimic din flux. */
  .harta-adresa a,
  .wrap-text a[href^="tel:"] { position: relative; }
  .harta-adresa a::after,
  .wrap-text a[href^="tel:"]::after {
    content: ""; position: absolute;
    left: 0; right: 0; top: -13px; bottom: -13px;
  }

  footer .jos { gap: 10px; }
}

/* --- 14.4 · textul sub 13px, ridicat -------------------------------------
   Sub 13px un text nu se mai citeste pe telefon la lumina zilei — se
   ghiceste. Etichetele care ramaneau la 10-11px urca la 12, atat cat sa nu
   se piarda ierarhia fata de randul de deasupra. */
@media (max-width: 720px) {
  .lipsa { font-size: 12px; }

  .et,
  .slot .et,
  .fapte .et,
  .date-contact .et,
  .harta-text .et,
  .slot-foto .et,
  .slot-harta .et,
  .date-jos .et { font-size: 12px; }

  .camp label { font-size: 13px; }
  footer small { font-size: 12.5px; }
  .privacy-link { font-size: .86rem; }
}

/* --- 14.5 · pe telefon ramane O SINGURA actiune: sunatul -----------------
   Decizia clientului, 26.10: „pe telefon sa ramana doar ala de sunat".

   Erau trei butoane permanente pe un ecran de 390px — bara portocalie pe
   toata latimea, bulina de telefon si bulina de WhatsApp — iar bulinele
   acopereau preturile la derulare („PRET DE STABIL…", „pret pe ma…ina").
   Cauza nu era pozitia lor, ci numarul: widgetul flotant a fost facut pe
   22.10 pentru DESKTOP, unde bara mobila nu exista, deci nimeni n-a pus
   intrebarea daca ambele au ce cauta pe acelasi ecran. Pe mobil s-a ridicat
   doar deasupra barei — un petic, nu o solutie.

   Nimic nu se sterge din HTML: pe desktop bara oricum nu apare, iar
   WhatsApp ramane acolo cu text. Diferenta e doar sub 720px.             */
@media (max-width: 720px) {
  .bara-mobil { display: none; }
  .fl-wa { display: none; }

  /* fara bara dedesubt, bulina coboara la locul ei */
  .flotant { bottom: 20px; right: 16px; }

  /* `padding-bottom: 86px` de la pragul de 720 rezerva inaltimea barei.
     Bara nu mai e — ramanea un gol gol sub footer. Ce ramane e distanta
     care tine bulina departe de linkul de politica din subsol. */
  body { padding-bottom: 28px; }
}

/* --- 14.6 · procesul, strans pe telefon ---------------------------------
   Cerere directa, 26.10: „partea cu procesul trebuie micsorata pe telefon
   neaparat, prea mult."

   Avea dreptate si se masoara: pe desktop cele opt etape stau pe trei
   coloane, deci inaltimea unui rand e cat cea mai inalta etapa din el. Sub
   880px grila cade pe o coloana, dar FIECARE etapa ramane un bloc centrat pe
   verticala — bulina de 64px, titlu, text, toate unul sub altul, cu gap de
   12px si 22px de padding. Iese ~300px per etapa, adica ~2.400px de derulat
   doar aici: patru ecrane de telefon pentru opt propozitii.

   Cauza nu e spatierea, e ORIENTAREA. Un bloc centrat pe verticala e un
   format de coloana lata; pe 390px aceeasi informatie se citeste pe
   orizontala — bulina in stanga, textul langa ea. Trece de la ~300px la
   ~100px per etapa fara sa se taie un singur cuvant.                     */
@media (max-width: 720px) {
  .etape-proces .ruta-grid li,
  .etape-proces .ruta-grid li:nth-child(n) {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px; row-gap: 2px;
    align-items: start; align-content: start;
    text-align: left;
    padding: 15px 0;
  }
  /* bulina tine ambele randuri din dreapta ei, deci ramane in dreptul lor */
  .etape-proces .nod {
    grid-row: span 2;
    width: 44px; height: 44px;
    font-size: 1rem; border-width: 1px;
    box-shadow: 0 0 0 4px rgba(229,82,4,.07);
  }
  .etape-proces .ruta-grid strong { font-size: 1rem; line-height: 1.35; }
  .etape-proces .ruta-grid .pas-txt { font-size: .88rem; line-height: 1.5; }
}

/* =========================================================================
   15 · CUSTOM, STRANS — 26.10.2026
   -------------------------------------------------------------------------
   Cerere directa: „la sectiunea cu pachetul custom, trebuie redusa si de
   mentionat ca optiunile vor fi alese la programare — si pe desktop si pe
   telefon."

   Cele doua cereri se tin una de alta, si de-aia se fac impreuna: din
   momentul in care pagina spune ca alegerea se face la programare, lista nu
   mai are de ce sa explice fiecare pozitie. Asa ca au iesit cele CINCI note
   tehnice de sub optiuni (Tornador, pad de lana, abur pe scaune, cafeaua
   varsata) — alea sunt raspunsuri la intrebari puse la telefon, nu text de
   citit intr-o lista de preturi. Leadul a pierdut a treia propozitie, care
   repeta a doua. Ce ramane e ce cauta cineva aici: ce se poate si cat costa.

   Reducerea se vede pe AMBELE, nu doar pe telefon: notele si propozitia erau
   in HTML, deci dispar peste tot. Reglajele de mai jos strang ce a ramas.
   ========================================================================= */

/* mentiunea — linie proprie sub lead, cu bara ember in stanga ca sa se
   citeasca drept conditie de lucru, nu drept continuarea leadului */
.custom-cum {
  margin: 22px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--ember);
  font-size: 1rem; line-height: 1.6; color: var(--bone);
  max-width: 52ch;
}

/* Fara notele de dedesubt, randurile devin uniforme: un rand = o pozitie.
   Padding-ul de 17px era calculat cu notele in minte, ca sa le despartă de
   randul urmator. Acum doar departeaza linii de aceeasi inaltime. */

@media (max-width: 720px) {
  .custom-cum { margin-top: 18px; font-size: .95rem; padding-left: 13px; }
}

/* =========================================================================
   16 · REGLAJE 26.10.2026, RUNDA 2
   ========================================================================= */

/* --- 16.1 · „Cine suntem noi" — ascunsa peste tot ------------------------
   Cerere: „da-i hide la sectiune si pe desktop, si pe mobil, pentru ca nu o
   sa avem prea curand niste poze."

   Sectiunea e construita in jurul unui slot de fotografie cu Andrei si
   echipa, care nu exista si nu se stie cand apare. Textul misiunii singur,
   langa un dreptunghi punctat, arata ca o pagina neterminata.

   Ramane INTACTA in HTML, doar ascunsa. Cand vine fotografia, se sterge
   regula asta si sectiunea revine exact cum era — zero refacut.          */
.misiune { display: none; }

/* --- 16.2 · cusatura proces -> „Masina ta la spa" ------------------------
   „Nu as lasa atata loc pana la urmatoarea sectiune."

   Erau doua padding-uri care se adunau: 96px sub etape + 96px deasupra
   titlului urmator = ~192px de gol intre ultima etapa si „Masina ta la spa".
   Pe desktop golul e proportional cu latimea; pe un ecran de 390px e un
   ecran intreg de nimic.

   Petele de vopsea nu mai sunt o grija aici — sunt ascunse pe telefon de la
   14.1, deci inaltimea sectiunii nu mai re-decupeaza niciun desen.       */
@media (max-width: 720px) {
  .etape-proces { padding-bottom: 48px; }
  .spa { padding-top: 56px; }
}

/* --- 16.3 · „Masina ta la spa": poza dupa primul paragraf, pe telefon ----
   Cerere: „vreau ca poza sa apara dupa primul paragraf si dupa aia sa apara
   celelalte doua texte. Asta pe versiunea de mobil."

   Pe desktop e text-stanga / poza-dreapta, deci ordinea nu se pune. Pe mobil
   coloana cadea text-text-text-poza: trei paragrafe la rand, iar imaginea
   abia la final, unde n-o mai leaga nimeni de fraza de deschidere.

   Paragrafele si poza stau in DOUA cutii diferite (.mis-text si .mis-foto),
   deci `order` singur nu le poate amesteca — ordoneaza cutiile, nu
   continutul lor. `display: contents` scoate cele doua cutii din randarea
   lor: copiii urca si devin itemi directi ai coloanei, iar de-acolo `order`
   ii poate aseza unul intre altii. Fara nicio schimbare in HTML.         */
@media (max-width: 900px) {
  .spa .mis-grid.inversat { display: flex; flex-direction: column; }
  .spa .mis-grid.inversat > .mis-text,
  .spa .mis-grid.inversat > .mis-foto { display: contents; }

  .spa .mis-fraza  { order: 1; }
  .spa .foto-spa   { order: 2; margin: 26px 0 4px; }
  .spa .spa-corp   { order: 3; }
}

/* --- 16.4 · Custom: exemple in loc de lista cu preturi -------------------
   Cerere: „asta trebuie micsorata. Adica nu trebuie mentionate preturile
   aici la fiecare. Alea le vom afla pe pagina de programare. Dai exemplu de
   cateva si zici ca restul, toate serviciile pe care le oferim, pot fi alese
   individual de pe pagina de programare."

   Cele cincisprezece pozitii cu pret au iesit. Raman SASE exemple, fara
   sume, alese sa acopere toate trei zonele — interior, lac, protectie —
   fiindca rolul lor nu mai e sa se aleaga de aici, ci sa arate cat de fin se
   poate taia o lucrare. Pretul se afla la programare, unde se si alege.

   Forma: etichete pe un rand care curg si se aseaza singure. Deliberat NU
   randuri cu conducatoare punctate — alea sunt gramatica unui meniu cu
   preturi, iar aici nu mai exista preturi de aliniat. Coltul drept si bara
   ember din stanga sunt aceleasi ca in restul paginii.                    */
.exemple {
  list-style: none; margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.exemple li {
  padding: 14px 20px;
  border: 1px solid rgba(244,240,234,.14);
  border-left: 2px solid var(--ember);
  background: rgba(244,240,234,.025);
  font-size: 1rem; font-weight: 600; letter-spacing: -.008em;
  color: var(--bone); line-height: 1.4;
}

/* mentiunea a coborat din cap in piciorul sectiunii: acolo o citeste cineva
   care tocmai a terminat exemplele si se intreaba „si restul?" */
.custom-jos .custom-cum { margin: 0; flex: 1 1 320px; }

@media (max-width: 560px) {
  .exemple { gap: 10px; }
  .exemple li { padding: 13px 16px; font-size: .95rem; }
}

/* --- 16.5 · doua reparatii vazute in captura ----------------------------
   1 · Bara ember a mentiunii se intindea ~300px in gol sub text. Cauza:
   `.custom-jos` trece pe coloana sub 560px, iar `flex: 1 1 320px` nu mai
   inseamna „latime de baza 320px", ci INALTIME de baza 320px — baza unui
   flex-item se masoara pe axa principala, care s-a rotit. Elementul primea
   deci 320px de inaltime, iar border-left-ul ii urma cuminte.
   2 · Poza din „Masina ta la spa" are masca de estompare pe toate laturile,
   deci isi aduce propriul aer; marginile adaugate peste ea se simteau ca gol. */
@media (max-width: 560px) {
  .custom-jos .custom-cum { flex: 0 1 auto; }
}
@media (max-width: 900px) {
  .spa .foto-spa { margin: 10px 0 0; }
}

/* =========================================================================
   17 · PACHETELE, PE OFERTA DIN 26.10
   -------------------------------------------------------------------------
   Preturile au trecut pe setul confirmat de client: 350 · 600 · 1.000, in
   locul lui 150 · 350 · 3.000-4.000.

   `.price .pre` — eticheta mica de deasupra sumei („de la", „pret fix",
   „intre") — a iesit din toate trei: cele trei sume sunt acum ferme, iar
   conditia care le insoteste (masina mica sau medie, in stare obisnuita) e
   scrisa intreaga in nota de sub grila, unde are loc sa fie exacta. O
   eticheta de doua cuvinte deasupra cifrei ar fi spus-o pe jumatate.

   Eticheta era `display: block` cu 10px dedesubt, deci tinea si distanta
   fata de titlul cardului. Fara ea, suma urca in h3 — de-aia marginea se
   muta pe `.price`.                                                      */
.card .price { margin-top: 18px; }



/* =========================================================================
   18 · RUNDA 29.10
   -------------------------------------------------------------------------
   Patru lucruri cerute de client: nota despre polish iese si Custom urca ·
   cusatura Custom→Proces redevine lina · pe telefon poza din hero se vede
   intreaga · banda de beneficii se strange.
   ========================================================================= */

/* --- 18.1 · nota despre polish a iesit; Custom urca ----------------------
   Nota („polishul e intr-o etapa, nu corectie completa") a fost stearsa din
   HTML si regula ei din foaie. Golul de sub grila se strange din ambele
   parti ale cusaturii, nu doar dintr-una: 160 + 160 erau calibrate pe o
   nota care nu mai e acolo.                                              */
.pachete { padding-bottom: 104px; }
.custom  { padding-top: 104px; }

/* --- 18.2 · cusatura Custom → Proces, recalibrata pe vecina reala -------
   CAUZA, nu simptomul. Procesul isi face tranzitia de sus cu un gradient de
   190px (`.etape-proces::before`) care porneste din `#0B0503` si se stinge
   in fundalul propriu, `--field` (#29241E). Negrul acela era culoarea
   vecinei de deasupra: `.misiune`, cu `background: #0B0503`.

   Pe 26.10 `.misiune` a fost ascunsa. Vecina a devenit `.custom`, cu
   `background: #17110C`. Gradientul a ramas pornit din #0B0503 — deci la
   cusatura se lovesc doua culori diferite si apare o treapta, o banda mai
   intunecata de 190px lipita peste brunul secțiunii Custom. Asta se vedea,
   nu stropii.

   Jos nu se schimba nimic: `.etape-proces::after` porneste tot din #0B0503,
   iar vecina de jos e `.spa`, care chiar are `background: #0B0503`.

   Si iese peticul de ieri (`.custom { z-index: 4 }`): el oprea vopseaua la
   granita, adica transforma exact cusatura pe care pictura trebuia s-o
   treaca intr-o linie dreapta. Ascundea pata in loc s-o aseze.           */
/* 19.4: banda de sus creste de la 190 la 300px si se stinge mai tarziu.
   Pe mijloc tranzitia era deja buna, dar pe laterale — exact unde cad
   petele — vopseaua e inca intensa cand gradientul s-a terminat deja, deci
   se citea ca o taietura. Stingerea trebuie sa tina pana trece pata. */
.etape-proces::before {
  height: 300px;
  background: linear-gradient(to bottom,
              #17110C 0%, rgba(23,17,12,.88) 26%, rgba(23,17,12,.52) 58%,
              rgba(23,17,12,.18) 82%, rgba(23,17,12,0) 100%);
}

/* 19.5: banda de jos se stingea in #0B0503, culoarea sectiunii „Masina ta
   la spa". Acum cusatura aia o face sageata, deci gradientul isi vede de
   treaba lui: topeste vopseaua in fundalul PROPRIU al Procesului. Altfel
   ultimii 190px ar fi fost deja negri si varful in V n-ar fi avut pe ce
   sa se vada. */
.etape-proces::after {
  height: 260px;
  background: linear-gradient(to top,
              #29241E 0%, rgba(41,36,30,.86) 30%, rgba(41,36,30,.46) 62%,
              rgba(41,36,30,0) 100%);
}

/* 19.6: a doua sageata, la intrarea in „Masina ta la spa". `.spa` avea deja
   `position: relative` si `z-index: 1`; titlul ei sta la 5, deci varful nu
   are cum sa-l acopere. */
.spa { border-top: 0; padding-top: 132px; }
@media (max-width: 720px) { .spa { padding-top: 92px; } }

/* --- 18.3 · pe telefon, poza din hero se desprinde de sub text ----------
   GEOMETRIE, nu reglaj. `01-hero.jpg` e 1920×1080 (raport 1.778, lat).
   Cadrul hero pe telefon e ~390×780 (raport 0.5, inalt). `object-fit:
   cover` taie 72% din latimea pozei ca sa umple cadrul — se vede cam o
   treime din imagine.

   Ca poza sa se vada INTREAGA pe 390px de latime, cadrul ei are 219px de
   inaltime. Titlul, subtitlul si butonul nu incap peste o banda de 219px —
   deci poza netaiata + text peste ea + hero pe tot ecranul nu se pot avea
   simultan pe telefon. Se bat intre ele ca numere.

   Deci pe telefon poza iese de sub text: topbar, apoi poza intreaga la
   16/9, apoi textul pe negru. `aspect-ratio: 16/9` e exact raportul pozei,
   deci `cover` nu mai are ce tăia si nu apar nici bare — spre deosebire de
   `contain`, care ar lasa dungi negre la orice alta nepotrivire.

   Pe desktop nu se schimba nimic: hero rămâne pe tot ecranul.            */
@media (max-width: 720px) {
  .hero { min-height: 0; }

  /* cele trei straturi absolute intra in flux, in ordinea citirii */
  .topbar   { position: static; order: 1; }
  .hero-img { position: static; order: 2;
              display: block; width: 100%; height: auto;
              aspect-ratio: 16 / 9; }
  .hero-copy { order: 3; padding-top: 32px; padding-bottom: 44px; }

  /* voalul era acolo ca sa se citeasca textul PESTE poza; textul nu mai e
     peste poza, deci voalul ar intuneca doar fotografia */
  .hero-scrim { display: none; }
}

/* --- 18.4 · banda de beneficii, strânsă pe telefon ----------------------
   Pe telefon banda trece pe o coloana (regula de la 560px), deci cele patru
   casete se aseaza una sub alta si inaltimea lor se adună. 48px de padding
   si 22px de gol erau calibrate pentru patru coloane pe un rand.         */
@media (max-width: 720px) {
  .banda-beneficii .ben { padding: 24px 18px; gap: 13px; }
  .ben-ic svg { width: 32px; height: 32px; }
  .banda-beneficii h3 { font-size: .92rem; line-height: 1.42; max-width: 28ch; }
}

/* --- 18.5 · vopseaua ramane in camera Procesului ------------------------
   Urcarea de 420px peste vecina a fost desenata cand vecina era `.misiune`:
   negru plat, pe care o pata portocalie estompata se citeste ca ornament.
   `.custom` are fundal brun CU textura proprie — hasuri la 135° si o aura
   calda sus-dreapta. Peste ele, aceeasi pata nu mai citeste ca ornament, ci
   ca niste pete: doua texturi care se suprapun fara sa se lege.

   Deci cusatura n-o mai trece pictura, o trece culoarea — gradientul de la
   18.2, care duce #17110C in #29241E pe 190px. Aia e tranzitia lina pe care
   o cere clientul; o forma care intra in sectiunea de deasupra e opusul.  */
.etape-proces .stropi { top: 0; height: calc(100% + 120px); }

/* --- 18.6 · gradientele topesc vopseaua, nu trec pe sub ea --------------
   Cele doua benzi de 190px (`::before` / `::after`) stau la z-index 2, iar
   vopseaua la 3 — deci pictura era DEASUPRA lor si ajungea la cusatura cu
   muchie taiata, nu stinsa. Benzile estompau fundalul, adica singurul lucru
   care nu avea nevoie.

   Inversat: vopseaua coboara la 1, benzile raman la 2. Acum fiecare capat
   al picturii se stinge in culoarea vecinei — sus #17110C (Custom), jos
   #0B0503 (Masina ta la spa). Textul sectiunii e la 4, neatins.          */
.etape-proces .stropi { z-index: 1; }


/* =========================================================================
   19 · RUNDA 29.10, PARTEA A DOUA
   ========================================================================= */

/* --- 19.1 · varful in V intre Pachete si Custom -------------------------
   Dupa modelul trimis de client: doua oblice care pleaca din marginile de
   stanga si de dreapta si se intalnesc intr-un varf, in centru. Culoarea
   sectiunii de deasupra coboara in V peste cea de dedesubt — de acolo vine
   senzatia de sageata in jos.

   NU se face cu `clip-path` pe `.custom`: prin taietura s-ar vedea fundalul
   paginii (`--field`, #29241E), nu negrul sectiunii Pachete (`--pitch`).
   Deci V-ul e pictat, nu decupat: o banda opaca in culoarea vecinei de sus,
   taiata in triunghi.

   Borderul portocaliu de sus al sectiunii iese — o linie dreapta peste un
   varf oblic s-ar citi ca o greseala, nu ca un accent.                   */
.custom { border-top: 0; padding-top: 132px; }

.sageata-jos {
  position: absolute; top: 0; left: 0; right: 0;
  height: clamp(44px, 6vw, 88px);   /* panta ramane aceeasi la orice latime */
  display: block; width: 100%;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 720px) {
  /* inaltimea V-ului o da `clamp` de mai sus, legata de latime: o valoare
     fixa ar fi sarit brusc exact la pragul asta. Aici ramane doar aerul de
     sub varf, care nu se scaleaza cu latimea. */
  .custom { padding-top: 92px; }
}

/* --- 19.2 · piciorul sectiunii Custom, centrat --------------------------
   Erau doua coloane cu `justify-content: space-between`: textul la stanga,
   butonul impins in marginea dreapta. Cerere 29.10: textul sub exemple,
   totul pe mijloc. Deci o singura coloana centrata, cu butonul sub text.  */
.custom-jos {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; text-align: center;
  gap: 26px;
}
.custom-jos .custom-cum {
  /* `flex: 1 1 320px` de mai sus era scris pentru un rand pe orizontala,
     unde 320px inseamna LATIME de baza. Pe coloana, aceeasi valoare devine
     INALTIME — de unde 320px de paragraf pentru doua randuri de text.
     A doua oara cand axa schimba sensul aceleiasi cifre (prima: 26.10). */
  flex: 0 0 auto;
  margin: 0; max-width: 62ch;
  border-left: 0; padding-left: 0;      /* bara ember era pentru text aliniat stanga */
  border-top: 2px solid var(--ember); padding-top: 18px;
}
.cta-custom { margin: 0; }

/* --- 19.3 · muchia V-ului ------------------------------------------------
   Pe modelul trimis, cele doua culori erau alb si bleumarin: forma se citea
   din contrast. Paleta paginii are de o parte #0B0503 si de alta #17110C —
   doua brunuri aproape negre, deci varful se ghiceste mai mult decat se
   vede, mai ales pe latimea de desktop.

   Dunga de accent NU se poate face nici din `drop-shadow` (filtrul se
   aplica inaintea decuparii, deci `clip-path` taie chiar umbra), nici din
   doua triunghiuri suprapuse: un triunghi are si o latura orizontala sus,
   iar in cele doua colturi, unde triunghiul opac s-a ingustat deja, latura
   aia se vedea ca o liniuta orizontala parazita.

   Deci forma e un SVG: `polygon` umple, `polyline` traseaza DOAR cele doua
   oblice. Varful e scris la 50 din 100 in viewBox, adica exact pe mijloc
   la orice latime.                                                      */
/* Nimic de pictat aici: forma si dunga vin din SVG-ul din pagina, unde
   `polyline` deseneaza exact cele doua oblice si nimic altceva, iar
   `vector-effect` ii tine grosimea in pixeli de ecran la orice scalare. */


/* --- 19.7 · golul dintre Custom si Proces --------------------------------
   Masurat la 1280: 342px de la baza butonului „Spune-ne ce vrei" pana la
   titlul „Cum arata o zi". Doodle-ul clientului cere cam jumatate.

   Taietura e asimetrica, cum a cerut: mai mult de sus. Partea de jos tine
   intrarea in Proces — acolo incep banda de stingere si petele de vopsea,
   iar scurtarea ei ar strange exact tranzitia care trebuie lasata in pace.
   Sus nu e decat aer sub un buton.                                       */
.custom { padding-bottom: 48px; }
.etape-proces { padding-top: 100px; }

@media (max-width: 720px) {
  .custom { padding-bottom: 36px; }
  .etape-proces { padding-top: 72px; }
}

/* --- 19.8 · banda de stingere tine pana trece vopseaua ------------------
   Dupa strangerea golului (19.7) sectiunea s-a scurtat cu 60px, iar SVG-ul
   vopselei — inaltime legata de a sectiunii, cu `slice` — s-a retezat cu
   30px mai mult la varf. Petele au urcat deci cu 30px fata de banda, si
   ajungeau pline (ecran ~315px) chiar dupa ce banda murise (300px). Fix la
   doua capete: masca SVG se intinde acum pana la 790 (in pagina), iar banda
   creste la 380px, ca sa existe o suprapunere lata intre ele.            */
.etape-proces::before { height: 380px; }


/* --- 19.9 · cusatura „Masina ta la spa" → „Unde ne gasesti" -------------
   Acelasi tipar de 160+160 ca intre Custom si Proces: 342px de la insigna
   Google pana la titlul de dedesubt. Dus la ~170, cu taietura mai mare sus.

   Aici NU se pune a treia forma. Valul incercat intai era frumos pe cont
   propriu, dar vorbea alta limba decat pagina — curbe de apa intre doua
   sectiuni despre masini si adresa atelierului. Ramane muchia dreapta cu
   care se despart deja Beneficiile de Pachete: aceeasi linie de 3px ember,
   acelasi gest, zero vocabular nou.                                     */
.spa { padding-bottom: 40px; }
.locatie { padding-top: 110px; border-top: 3px solid var(--ember); }

/* --- 19.10 · Pachetele urca spre Beneficii -----------------------------
   186px de la ultima caseta de beneficii pana la titlul „Trei pachete".
   Banda de beneficii e deja lipita de marginea sectiunii (padding 0), deci
   tot golul venea din padding-ul de sus al Pachetelor.                   */
.pachete { padding-top: 104px; }

@media (max-width: 720px) {
  .spa { padding-bottom: 32px; }
  .locatie { padding-top: 80px; }
}


/* =========================================================================
   20 · RUNDA 29.10, PARTEA A TREIA
   ========================================================================= */

/* --- 20.1 · subtitlu de sectiune ----------------------------------------
   Clasa generala, nu `.proces-nota` — aia isi poarta sectiunea in nume si
   ar fi insemnat sa scriu „nota de proces" sub titlul Pachetelor.        */
.sec-sub { margin: 20px 0 0; opacity: .66; font-size: 1.06rem; }
.sec-head.centrat .sec-sub { margin: 20px auto 0; max-width: 54ch; }

/* --- 20.2 · Custom: capul si exemplele pe un rand, piciorul centrat -----
   Stanga capul sectiunii, dreapta exemplele pornind de la aceeasi linie de
   sus; sub ele, pe toata latimea, mentiunea si butonul pe mijloc.

   Titlul scade de la 4.4rem la 3.2rem: clamp-ul lui era scris pentru un
   titlu pe toata latimea sectiunii, iar pe jumatate de latime „Creeaza
   pachetul tau custom" ar fi curs pe patru randuri.                      */
.custom-doua {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.4vw, 76px);
  align-items: start;
}
.custom-doua .custom-head { max-width: none; }
.custom-doua .custom-head h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); }
.custom-doua .custom-head .lead { max-width: 46ch; }

/* Exemplele pornesc de la linia TITLULUI, nu din varful coloanei: altfel
   se aliniau cu supratitlul „À la carte" si stateau cu 37px mai sus decat
   el. Decalajul e inaltimea supratitlului plus marginea de sus a lui h2 —
   constant, fiindca ambele sunt in pixeli, nu in procente. */
.custom-doua .exemple { margin-top: 37px; }

/* Piciorul: centrat, cu textul putin mai mare decat corpul paginii. Bara
   de ember de deasupra textului iese — linia punctata a piciorului o face
   deja, pe toata latimea, iar a doua linie la 17px sub ea se citea ca o
   dublare, nu ca un accent. */
.custom-jos { margin-top: clamp(44px, 5vw, 72px); padding-top: 30px; }
.custom-jos .custom-cum {
  border-top: 0; padding-top: 0;
  font-size: 1.08rem; line-height: 1.64;
}

@media (max-width: 860px) {
  .custom-doua { grid-template-columns: 1fr; gap: 30px; }
  /* pe o coloana nu mai e nimic de aliniat lateral: exemplele vin pur si
     simplu dupa cap */
  .custom-doua .exemple { margin-top: 0; }
}

/* --- 20.3 · sigla duce acasa -------------------------------------------
   Pe paginile interioare nu exista „Acasa" in meniu, deci singura cale
   inapoi era butonul de back al browserului. Sigla e locul unde oricine
   apasa din reflex. `display: block` ca linkul sa nu primeasca spatiul de
   sub linia de baza a imaginii. */
.logo-link { display: block; line-height: 0; }

/* --- 20.4 · titlul hero, rupt pe propozitii ----------------------------
   Lasat sa curga singur, se rupea „DETAILING AUTO ÎN / SIBIU" — prepozitia
   ramanea atarnata la capat de rand, departe de orasul ei. Cele doua
   propozitii devin deci blocuri: prima spune ce facem, a doua ce iese.
   `text-wrap: balance` imparte apoi egal randurile din fiecare. */
.hero h1 span { display: block; text-wrap: balance; }

/* `max-width: 22ch` si clamp-ul de pana la 4.7rem erau masurate pe titlul
   vechi, de 50 de caractere pe doua randuri. Noul titlu are doua propozitii
   de 24 si 31 de caractere: in 22ch nu incapea nici prima, si iesea pe
   patru randuri. Cutia creste la 30ch, iar varful scade la 4rem — un titlu
   mai lung cere litera ceva mai mica, altfel umple ecranul. */
.hero h1 { max-width: 30ch; font-size: clamp(2.1rem, 4.3vw, 4rem); }

/* === BLOC 21 · 29.10 ==================================================== */

/* --- 21.1 · „doar", in linia de sub titlul Custom ----------------------
   `.lead` e scris in #d5cec6, cu vreo treapta sub alb. Bold-ul singur, pe
   un text deja stins, abia se vede — cuvantul urca deci la culoarea plina
   a textului, ca accentul cerut sa se si citeasca. */
.custom-head .lead b { color: var(--bone); font-weight: 700; }

/* --- 21.2 · capul sectiunii Pachete, mai stramt ------------------------
   `.sec-head` lasa 56px pana la continut peste tot. Aici, unde scopul e sa
   intre trei carduri pe un ecran de laptop, spatiul gol e primul care se
   taie — inaintea pozei si inaintea textului. Doar la Pachete. */
.pachete .sec-head { margin-bottom: 34px; }

/* --- 21.3 · ecrane scunde: poza se mai aplatizeaza ---------------------
   Cauza nu e latimea, e INALTIMEA ferestrei. La 1440x900 si 1536x864 cele
   trei carduri intra deja intregi sub titlu; la 1366x768 mai lipsesc 42px.
   Regula se leaga deci de `max-height`, nu de `max-width`: pe un ecran
   scund poza coboara la o banda 21/9 si capul cardului se stramteaza, iar
   monitoarele inalte pastreaza 16/9. Nimeni nu plateste pentru altcineva. */
@media (min-width: 1081px) and (max-height: 820px) {
  .card-img { aspect-ratio: 21 / 9; }
  .card-body { padding: 26px 28px 26px; }
  .card-body ul.bife { margin-bottom: 22px; gap: 7px; }
  .card-body ul.bife li { line-height: 1.45; }
  .pachete .sec-head { margin-bottom: 26px; }
}