/* =============================================================
   Felicia Meresescu — Psihoterapeut integrativ
   Paletă extrasă direct din materialul de brand:
     verde  #033D2E   auriu #C08B47 → #EFBA76   crem #EDDFD2
   ============================================================= */

:root {
  /* culori */
  --verde:        #033D2E;
  --verde-adanc:  #01251B;
  --verde-clar:   #0B5642;
  --verde-ceata:  rgba(3, 61, 46, .08);

  --auriu:        #C08B47;
  --auriu-clar:   #EFBA76;
  --auriu-adanc:  #A0692A;

  --crem:         #EDDFD2;
  --crem-clar:    #F5EBE0;
  --ivoriu:       #FCF8F3;

  --text:         #2B2620;
  --text-moale:   #6E6357;
  --text-pe-verde: rgba(245, 235, 224, .82);

  /* tipografie */
  --font-titlu:   "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-corp:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-scris:   "Pinyon Script", "Segoe Script", cursive;

  /* ritm */
  --container:    1180px;
  --pad-lat:      clamp(1.25rem, 4vw, 2.5rem);
  --pad-sectiune: clamp(4.5rem, 8.5vw, 8rem);
  --raza:         18px;
  --raza-mica:    10px;

  /* umbre */
  --umbra-mica:   0 2px 10px rgba(43, 38, 32, .05);
  --umbra:        0 18px 44px -22px rgba(43, 38, 32, .28);
  --umbra-mare:   0 40px 90px -40px rgba(3, 61, 46, .45);

  --tranzitie:    .38s cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-corp);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.78;
  color: var(--text);
  background: var(--crem-clar);
  /* „clip", nu „hidden": „hidden" ar transforma body-ul în container de derulare
     și ar dezactiva position:sticky (foto din secțiunea Despre, panoul de tarife). */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-titlu);
  font-weight: 500;
  line-height: 1.16;
  margin: 0;
  color: var(--verde);
  letter-spacing: -.005em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--auriu-clar); color: var(--verde-adanc); }

:focus-visible {
  outline: 2px solid var(--auriu-adanc);
  outline-offset: 3px;
  border-radius: 4px;
}

.sari-la-continut {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--verde);
  color: var(--crem);
  border-radius: 0 0 var(--raza-mica) var(--raza-mica);
  transition: top .25s ease;
}
.sari-la-continut:focus { top: 0; }

/* ---------- utilitare ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-lat);
}
.container--ingust { max-width: 820px; }

.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.ic--mic { width: 1em; height: 1em; }

/* marcaj pentru textul provizoriu, de înlocuit de client */
.de-completat {
  background: linear-gradient(transparent 58%, rgba(239, 186, 118, .45) 0);
  box-shadow: inset 0 -1px 0 rgba(160, 105, 42, .45);
  border-radius: 2px;
  padding-inline: .12em;
}
/* elementele de tip bloc nu trebuie să se întindă pe toată lățimea */
p.de-completat,
li.de-completat,
a.de-completat,
span.de-completat {
  display: inline-block;
  max-width: 100%;
}

/* ---------- tipografie de secțiune ---------- */
.supratitlu {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
  margin: 0 0 1rem;
}
.supratitlu--pe-verde { color: var(--auriu-clar); }

.supratitlu--linii {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .9rem;
}
.supratitlu--linii::before,
.supratitlu--linii::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 90px;
  background: linear-gradient(90deg, transparent, var(--auriu));
}
.supratitlu--linii::after { background: linear-gradient(90deg, var(--auriu), transparent); }

.titlu-sectiune {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem);
  margin-bottom: .7rem;
}

.subtitlu-sectiune {
  max-width: 58ch;
  color: var(--text-moale);
  font-size: 1.05rem;
}

.antet-sectiune { text-align: center; margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.antet-sectiune .supratitlu--linii { justify-content: center; }
.antet-sectiune .subtitlu-sectiune { margin-inline: auto; }

.scris-de-mana {
  font-family: var(--font-scris);
  font-weight: 400;
  line-height: 1.35;
}

/* separator cu lotus, ca în materialul de brand */
.separator-lotus {
  display: block;
  width: min(340px, 70%);
  margin: 1.75rem auto 0;
  height: 18px;
  position: relative;
}
.separator-lotus::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--auriu), transparent);
}
.separator-lotus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: linear-gradient(135deg, var(--auriu-clar), var(--auriu-adanc));
  border-radius: 2px;
}

/* ---------- butoane ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--font-corp);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--tranzitie), box-shadow var(--tranzitie),
              background-color var(--tranzitie), color var(--tranzitie),
              border-color var(--tranzitie);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--verde {
  background: var(--verde);
  color: var(--crem-clar);
  box-shadow: 0 14px 30px -16px rgba(3, 61, 46, .8);
}
.btn--verde:hover { background: var(--verde-clar); box-shadow: 0 20px 38px -16px rgba(3, 61, 46, .7); }

.btn--auriu {
  background: linear-gradient(120deg, var(--auriu-adanc), var(--auriu-clar) 55%, var(--auriu));
  color: var(--verde-adanc);
  box-shadow: 0 14px 30px -16px rgba(160, 105, 42, .85);
}
.btn--auriu:hover { filter: brightness(1.06); box-shadow: 0 20px 38px -16px rgba(160, 105, 42, .75); }

.btn--contur {
  border-color: rgba(3, 61, 46, .28);
  color: var(--verde);
  background: transparent;
}
.btn--contur:hover { border-color: var(--verde); background: rgba(3, 61, 46, .05); }

.sectiune--verde .btn--contur { border-color: rgba(239, 186, 118, .45); color: var(--crem-clar); }
.sectiune--verde .btn--contur:hover { border-color: var(--auriu-clar); background: rgba(239, 186, 118, .12); }

.btn--mic { padding: .68rem 1.35rem; font-size: .72rem; }
.btn--bloc { display: flex; width: 100%; }

/* =============================================================
   HEADER
   ============================================================= */
.sit-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background-color var(--tranzitie), box-shadow var(--tranzitie),
              padding var(--tranzitie), backdrop-filter var(--tranzitie);
}
.sit-header--fixat {
  padding: .6rem 0;
  background: rgba(252, 248, 243, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(192, 139, 71, .28), 0 10px 30px -24px rgba(43, 38, 32, .5);
}

.sit-header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.marca { display: flex; align-items: center; gap: .75rem; }
.marca__semn {
  width: 46px; height: auto;
  transition: transform var(--tranzitie);
}
.marca:hover .marca__semn { transform: scale(1.06); }
.marca__text { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nume {
  font-family: var(--font-titlu);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--verde);
}
.marca__rol {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
  font-weight: 400;
}

.nav-principal { display: flex; align-items: center; gap: 2rem; }
.nav-lista { display: flex; gap: 1.75rem; }
.nav-lista a {
  position: relative;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--text);
  padding-block: .35rem;
  transition: color var(--tranzitie);
}
.nav-lista a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--auriu);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--tranzitie);
}
.nav-lista a:hover, .nav-lista a.activ { color: var(--verde); }
.nav-lista a:hover::after, .nav-lista a.activ::after { transform: scaleX(1); transform-origin: left; }

.meniu-buton {
  display: none;
  width: 44px; height: 44px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
}
.meniu-buton span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--verde);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.meniu-buton[aria-expanded="true"] span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.meniu-buton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.meniu-buton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  padding: clamp(7.5rem, 13vw, 10.5rem) 0 clamp(4rem, 7vw, 6.5rem);
  background:
    radial-gradient(900px 620px at 88% 12%, rgba(239, 186, 118, .16), transparent 62%),
    radial-gradient(760px 520px at 4% 78%, rgba(3, 61, 46, .07), transparent 60%),
    linear-gradient(170deg, var(--ivoriu) 0%, var(--crem-clar) 45%, var(--crem) 100%);
  overflow: hidden;
}

.hero__decor {
  position: absolute;
  top: -6%; right: -8%;
  width: min(46vw, 620px);
  color: rgba(3, 61, 46, .045);
  transform: rotate(12deg);
  pointer-events: none;
}
.hero__decor svg { width: 100%; height: auto; }

/* --- ornamentele florale care „cresc" o singură dată, în cele două colțuri de jos ---
   Cadre WebP cu fundalul verde decupat, desenate pe canvas. Stau sub .container
   (z-index 1), deci textul rămâne mereu deasupra. Apar abia după ce toate cadrele
   au ajuns, ca să nu clipească. */
.hero__flori {
  position: absolute;
  bottom: -1.5rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
/* nu se duc la opac: rămân un strat de fundal peste care textul respiră */
.hero__flori--vizibil { opacity: .44; }
.hero__flori canvas { width: 100%; height: 100%; }

.hero__flori--dreapta {
  right: -1.5rem;
  width: min(40vw, 570px);
  aspect-ratio: 488 / 590;
}

/* stânga stă în spatele portretului, așa că e ceva mai mică și mai retrasă.
   Aranjamentul e mai zvelt decât cel din dreapta: lățimea e scăzută de la 440px
   ca înălțimea afișată să rămână cât era înainte (~730px), altfel ornamentul ar
   urca peste antet. */
.hero__flori--stanga {
  left: -0.5rem;
  width: min(26.4vw, 375px);
  aspect-ratio: 340 / 663;
}

/* sub 900px hero-ul devine o singură coloană: ornamentele ar cădea peste text,
   iar cadrele n-au ce căuta pe date mobile */
@media (max-width: 900px) {
  .hero__flori { display: none; }
}

/* pe ecrane intermediare doar cel din dreapta rămâne — stânga s-ar bate cu portretul */
@media (max-width: 1180px) {
  .hero__flori--stanga { display: none; }
}

.hero__grila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* --- portret cu ramă aurie, ecou al materialului de brand --- */
.hero__vizual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 430px;
  isolation: isolate;
}

.portret-rama {
  position: relative;
  z-index: 1;
  padding: 7px;
  border-radius: 50% 50% 46% 46% / 40% 40% 32% 32%;
  background: linear-gradient(150deg, var(--auriu-clar), var(--auriu) 35%, var(--auriu-adanc) 62%, var(--auriu-clar));
  box-shadow: var(--umbra-mare);
}
.portret {
  border-radius: inherit;
  overflow: hidden;
  background: var(--crem);
}
.portret img {
  width: 100%;
  aspect-ratio: 53 / 78;
  object-fit: cover;
  object-position: 50% 22%;
}

.portret-inel {
  position: absolute;
  inset: -24px -24px 30px -28px;
  z-index: 0;
  border-radius: 50% 50% 46% 46% / 40% 40% 32% 32%;
  border: 1px solid rgba(192, 139, 71, .45);
  pointer-events: none;
}

.hero__continut { max-width: 620px; }

/* Marca și piciorul din panoul de meniu există doar pe telefon. */
.nav-marca,
.nav-picior { display: none; }

@keyframes intraMeniu {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__logo {
  width: clamp(112px, 13vw, 152px);
  height: auto;
  /* Centrat pe orice lățime. Înainte, „margin-inline: auto" exista doar în
     media query-ul de sub 900px, deci pe desktop logoul stătea lipit de marginea
     stângă a coloanei de text. */
  margin-inline: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 10px 22px rgba(3, 61, 46, .13));
}

.hero__titlu {
  font-size: clamp(2.75rem, 1.7rem + 4.6vw, 4.5rem);
  font-weight: 500;
  margin-bottom: .35rem;
}

.hero__deviza {
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.65rem);
  color: var(--verde-clar);
  margin-bottom: 1.4rem;
}

.hero__text {
  max-width: 52ch;
  color: var(--text-moale);
  font-size: 1.075rem;
  margin-bottom: 2rem;
}

.hero__actiuni { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }

.hero__nota {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--auriu-adanc);
}

/* =============================================================
   BANDĂ VALORI
   ============================================================= */
.banda {
  background: var(--verde);
  color: var(--text-pe-verde);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  position: relative;
}
.banda::before,
.banda::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--auriu), var(--auriu-clar), var(--auriu), transparent);
}
.banda::before { top: 0; }
.banda::after { bottom: 0; opacity: .5; }

.banda__grila {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.banda__element { text-align: center; }
.banda__element .ic {
  width: 30px; height: 30px;
  margin: 0 auto .8rem;
  color: var(--auriu-clar);
}
.banda__element h2 {
  font-size: 1.28rem;
  color: var(--crem-clar);
  margin-bottom: .3rem;
}
.banda__element p { font-size: .89rem; line-height: 1.6; }

/* =============================================================
   SECȚIUNI GENERICE
   ============================================================= */
.sectiune {
  position: relative;
  padding: var(--pad-sectiune) 0;
}
.sectiune--ivoriu { background: var(--ivoriu); }

.sectiune--verde {
  background:
    radial-gradient(800px 500px at 15% 0%, rgba(11, 86, 66, .8), transparent 60%),
    linear-gradient(160deg, var(--verde) 0%, var(--verde-adanc) 100%);
  color: var(--text-pe-verde);
  overflow: hidden;
}
.sectiune--verde h2, .sectiune--verde h3 { color: var(--crem-clar); }
.sectiune--verde .subtitlu-sectiune { color: rgba(245, 235, 224, .72); }

.decor-frunze {
  position: absolute;
  top: 50%; right: -140px;
  width: 460px; height: 460px;
  transform: translateY(-50%);
  background:
    radial-gradient(closest-side, rgba(239, 186, 118, .16), transparent 72%);
  pointer-events: none;
}
.decor-frunze--stanga { right: auto; left: -160px; }

/* =============================================================
   DESPRE
   ============================================================= */
.despre__grila {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* Fundalul animat, derulat de scroll (vezi main.js).
   Bandă pe toată lățimea, cu proporția cadrului: dacă ar acoperi toată
   secțiunea (mult mai înaltă), „cover" ar mări pasărea de aproape două ori
   și ar trece peste text. Centrată pe verticală și estompată la margini. */
.despre__film {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 3 / 2;
  max-height: 115%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* topire spre secțiunile vecine — cremul din videoclip nu e identic cu ivoriul */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.despre__film--pornit { opacity: .55; }
.despre__film canvas { display: block; width: 100%; height: 100%; }

/* peste coloana de text pasărea se retrage, ca lectura să rămână curată */
.despre__film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              transparent 0%, transparent 34%,
              rgba(252, 248, 243, .55) 58%,
              rgba(252, 248, 243, .82) 100%);
}

/* elementul de grilă se întinde pe toată înălțimea rândului (align-items: stretch,
   valoarea implicită), iar copilul lui, mai scund, poate deveni „lipicios". */
.despre__foto { position: relative; }
.despre__foto-lipicios { position: sticky; top: 7.5rem; }

.cadru-organic {
  position: relative;
  border-radius: 58% 42% 52% 48% / 44% 46% 54% 56%;
  overflow: hidden;
  box-shadow: var(--umbra);
  border: 6px solid rgba(252, 248, 243, .9);
  outline: 1px solid rgba(192, 139, 71, .3);
  outline-offset: 6px;
}
.cadru-organic img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.despre__foto:hover .cadru-organic img { transform: scale(1.04); }

.citat-plutitor {
  position: absolute;
  right: -12px; bottom: 6%;
  white-space: nowrap;
  background: var(--verde);
  color: var(--crem-clar);
  padding: .85rem 1.6rem;
  border-radius: 999px;
  box-shadow: var(--umbra);
  border: 1px solid rgba(239, 186, 118, .35);
}
.citat-plutitor .scris-de-mana { font-size: 1.55rem; color: var(--auriu-clar); }

.lista-acreditari {
  display: grid;
  gap: .9rem;
  margin: 2rem 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(192, 139, 71, .3);
}
.lista-acreditari li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .1rem 1rem;
  align-items: start;
  font-size: .95rem;
}
.lista-acreditari li::before {
  content: "";
  grid-row: span 2;
  width: 20px; height: 20px;
  margin-top: .35rem;
  border-radius: 50%;
  background:
    linear-gradient(135deg, var(--auriu-clar), var(--auriu-adanc));
  box-shadow: inset 0 0 0 4px var(--ivoriu);
}
.lista-acreditari strong {
  font-weight: 500;
  color: var(--verde);
  font-size: 1rem;
}
.lista-acreditari span {
  justify-self: start;
  color: var(--text-moale);
  font-size: .88rem;
}

.semnatura {
  font-size: 2.6rem;
  color: var(--verde-clar);
  margin-top: .5rem;
}

/* =============================================================
   SERVICII — ecran divizat
   Lista din stânga e sursa unică de conținut; pe ecrane mari, textul
   opțiunii active e „proiectat" în scena verde din dreapta, cu fondu.
   Sub 900px scena dispare, iar lista se comportă ca un acordeon.
   ============================================================= */
.alegere {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* --- lista --- */
.alegere__lista { border-top: 1px solid rgba(192, 139, 71, .3); }

.alegere__optiune { border-bottom: 1px solid rgba(192, 139, 71, .22); }
.alegere__optiune h3 { margin: 0; font-size: inherit; }

.alegere__buton {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  width: 100%;
  padding: 1.15rem .4rem;
  text-align: left;
  transition: padding-left .45s cubic-bezier(.22, .61, .36, 1);
}
/* liniuța aurie care crește în dreptul opțiunii alese */
.alegere__buton::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--auriu);
  transform: translateY(-50%);
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.alegere__nr {
  flex: none;
  font-family: var(--font-titlu);
  font-size: .8rem;
  font-variant-numeric: lining-nums;
  letter-spacing: .24em;
  color: var(--auriu-adanc);
}

.alegere__nume {
  font-family: var(--font-titlu);
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.15;
  color: rgba(43, 38, 32, .45);
  transition: color .45s ease;
}
.alegere__buton:hover .alegere__nume { color: rgba(3, 61, 46, .78); }

.alegere__optiune.activ .alegere__buton { padding-left: 2.6rem; }
.alegere__optiune.activ .alegere__buton::before { width: 1.9rem; }
.alegere__optiune.activ .alegere__nume { color: var(--verde); }

/* Pe ecrane mari conținutul e afișat în scenă, dar rămâne în DOM —
   ascuns doar vizual, ca să fie citit de cititoarele de ecran. */
.alegere__continut {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.alegere__desc {
  color: var(--text-moale);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42ch;
}

.alegere__fise {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.alegere__fise li {
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(192, 139, 71, .4);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}

/* --- scena --- */
.alegere__scena {
  position: relative;
  min-height: 27rem;
  padding: clamp(2rem, 3.4vw, 3rem);
  border-radius: var(--raza);
  overflow: hidden;
  background:
    radial-gradient(600px 320px at 78% 8%, rgba(11, 86, 66, .95), transparent 70%),
    linear-gradient(160deg, var(--verde), var(--verde-adanc));
  border: 1px solid rgba(239, 186, 118, .35);
  box-shadow: var(--umbra-mare);
}

.alegere__filigran {
  position: absolute;
  right: -3rem; bottom: -3rem;
  width: 18rem;
  opacity: .07;
  pointer-events: none;
}

.alegere__proiectie {
  position: relative;
  opacity: 1;
  transform: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
.alegere__proiectie.se-schimba {
  opacity: 0;
  transform: translateY(12px);
}

.alegere__nr-mare {
  font-family: var(--font-titlu);
  font-size: 3.6rem;
  font-weight: 300;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: rgba(239, 186, 118, .35);
  margin-bottom: 1rem;
}
/* e <p>, nu titlu real: scena e un duplicat decorativ (aria-hidden),
   titlurile adevărate sunt butoanele din listă. Deci fontul se pune aici. */
.alegere__titlu-mare {
  font-family: var(--font-titlu);
  font-weight: 500;
  line-height: 1.16;
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem);
  color: var(--crem-clar);
  margin-bottom: .9rem;
}
.alegere__proiectie .alegere__desc { color: rgba(245, 235, 224, .78); }
.alegere__proiectie .alegere__fise li {
  border-color: rgba(239, 186, 118, .32);
  color: var(--auriu-clar);
}

/* fără JS scena rămâne goală: o ascundem ca să nu apară o casetă verde pustie */
.fara-js .alegere__scena { display: none; }
.fara-js .alegere { grid-template-columns: 1fr; }
.fara-js .alegere__continut {
  position: static;
  width: auto; height: auto;
  margin: 0 0 1.6rem;
  clip-path: none;
  white-space: normal;
  padding-left: 2.6rem;
}

/* --- sub 900px: acordeon, fără scenă --- */
@media (max-width: 900px) {
  .alegere { grid-template-columns: 1fr; }
  .alegere__scena { display: none; }

  .alegere__continut {
    position: static;
    width: auto; height: auto;
    margin: 0;
    clip-path: none;
    white-space: normal;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.22, .61, .36, 1);
  }
  .alegere__continut > div { overflow: hidden; }
  .alegere__optiune.activ .alegere__continut { grid-template-rows: 1fr; }

  .alegere__desc {
    padding: 0 .4rem 1.5rem 2.6rem;
    font-size: .96rem;
  }
  .alegere__continut > div > p:last-child { padding: 0 .4rem 1.6rem 2.6rem; }
  .alegere__fise { padding: 0 .4rem 1.6rem 2.6rem; margin-top: -.4rem; }

  /* semnul + / − al acordeonului: bara verticală se strânge când se deschide.
     Cele două bare trebuie să aibă același centru — de aici valorile în px. */
  .alegere__buton { padding-right: 2.75rem; }
  .alegere__buton::after {
    content: "";
    position: absolute;
    right: 8px; top: 50%;
    width: 11px; height: 1.5px;
    background: var(--auriu-adanc);
    transform: translateY(-50%);
  }
  .alegere__nume::after {
    content: "";
    position: absolute;
    right: 12.75px; top: 50%;   /* 8px + 11px/2 − 1.5px/2 */
    width: 1.5px; height: 11px;
    background: var(--auriu-adanc);
    transform: translateY(-50%) scaleY(1);
    transition: transform .35s ease, opacity .35s ease;
  }
  .alegere__optiune.activ .alegere__nume::after {
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
  }
}

.legatura-subliniata {
  display: inline-block;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auriu-clar);
  border-bottom: 1px solid rgba(239, 186, 118, .5);
  padding-bottom: 3px;
  transition: border-color var(--tranzitie);
}
.legatura-subliniata:hover { border-color: var(--auriu-clar); }
/* în acordeonul de pe telefon linkul stă pe fundal crem, nu pe verde */
@media (max-width: 900px) {
  .alegere__lista .legatura-subliniata {
    color: var(--auriu-adanc);
    border-bottom-color: rgba(160, 105, 42, .5);
  }
}

/* =============================================================
   PAȘI
   ============================================================= */
.pasi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
  counter-reset: pas;
}
.pas { position: relative; padding-top: 2.6rem; }
.pas::before {
  content: "";
  position: absolute;
  top: 1.05rem; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--auriu), rgba(239, 186, 118, .12));
}
.pas::after {
  content: "";
  position: absolute;
  top: calc(1.05rem - 4px); left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--auriu-clar);
  box-shadow: 0 0 0 5px rgba(239, 186, 118, .18);
}
.pas__numar {
  position: absolute;
  top: -1.1rem; right: 0;
  font-family: var(--font-titlu);
  font-size: 3.4rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(239, 186, 118, .22);
}
.pas h3 { font-size: 1.42rem; margin-bottom: .5rem; }
.pas p { font-size: .93rem; line-height: 1.72; }

.abordare__cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }

/* =============================================================
   TARIFE
   ============================================================= */
.tarife__aranjament {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.lista-tarife {
  display: grid;
  border-top: 1px solid rgba(192, 139, 71, .3);
}

.rand-tarif {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .1rem 1.5rem;
  padding: 1.35rem .25rem;
  border-bottom: 1px solid rgba(192, 139, 71, .22);
  transition: background-color var(--tranzitie), padding-inline var(--tranzitie);
}
.rand-tarif:hover { background: rgba(239, 186, 118, .09); padding-inline: .9rem; }

.rand-tarif__nume {
  font-family: var(--font-titlu);
  font-size: 1.42rem;
  font-weight: 500;
  color: var(--verde);
}
.rand-tarif__durata {
  grid-column: 1;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-moale);
}
.rand-tarif__pret {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-titlu);
  font-size: 2.35rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--auriu-adanc);
  white-space: nowrap;
}
.rand-tarif__pret em {
  font-family: var(--font-corp);
  font-style: normal;
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--text-moale);
}

.tarife__lateral { align-self: start; }

.panou-tarife {
  padding: clamp(1.9rem, 3vw, 2.5rem);
  background:
    radial-gradient(520px 280px at 50% 0%, rgba(11, 86, 66, .92), transparent 72%),
    linear-gradient(165deg, var(--verde), var(--verde-adanc));
  border: 1px solid rgba(239, 186, 118, .4);
  border-radius: var(--raza);
  color: var(--text-pe-verde);
  box-shadow: var(--umbra-mare);
  font-size: .95rem;
}
.panou-tarife__deviza {
  font-size: 2.3rem;
  color: var(--auriu-clar);
  margin-bottom: .6rem;
}
.panou-tarife__lista {
  display: grid;
  gap: .6rem;
  margin: 1.4rem 0 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(239, 186, 118, .25);
  font-size: .9rem;
}
.panou-tarife__lista li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.55; }
.panou-tarife__lista li::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  margin-top: .28rem;
  border-radius: 50%;
  background-color: rgba(239, 186, 118, .2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23EFBA76'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* =============================================================
   MĂRTURII — „zid" în coloane (masonry)
   Coloane cu lățime fixă: mărturiile de lungimi diferite curg natural,
   fără cadre rigide care le-ar tăia. Cardul nu se rupe între coloane.
   Implicit e restrâns pe verticală; se extinde din buton.
   ============================================================= */
.marturii-invelis { position: relative; }
.marturii-invelis.restrans {
  max-height: 30rem;
  overflow: hidden;
}
/* voal de estompare peste ultimul rând, cât timp e restrâns */
.marturii-invelis.restrans::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--ivoriu) 88%);
  pointer-events: none;
}

.marturii-actiuni { text-align: center; margin-top: 1.75rem; }
.marturii-actiuni .btn { cursor: pointer; }
/* fără JS zidul se vede întreg, deci butonul n-are ce comuta */
.fara-js .marturii-actiuni { display: none; }

.marturii {
  columns: 3 320px;
  column-gap: clamp(1.1rem, 2.2vw, 1.7rem);
}
.marturie {
  position: relative;
  margin: 0 0 clamp(1.1rem, 2.2vw, 1.7rem);
  padding: clamp(1.8rem, 2.6vw, 2.4rem) clamp(1.5rem, 2.2vw, 2rem) clamp(1.4rem, 2vw, 1.8rem);
  background: var(--crem-clar);
  border: 1px solid rgba(192, 139, 71, .24);
  border-radius: var(--raza);
  break-inside: avoid;
  transition: transform var(--tranzitie), box-shadow var(--tranzitie), border-color var(--tranzitie);
}
.marturie:hover {
  transform: translateY(-4px);
  box-shadow: var(--umbra);
  border-color: rgba(192, 139, 71, .5);
}
.marturie::before {
  content: "\201C";
  display: block;
  font-family: var(--font-titlu);
  font-size: 3.4rem;
  line-height: .6;
  height: .5em;
  color: rgba(192, 139, 71, .4);
}
.marturie blockquote { margin: 0; }
.marturie p {
  font-family: var(--font-titlu);
  font-size: 1.14rem;
  font-style: italic;
  line-height: 1.62;
  color: var(--text);
}
.marturie p + p { margin-top: .8rem; }
.marturie figcaption {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(192, 139, 71, .25);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}

/* mărturiile mai lungi și mai puternice — pe verde */
.marturie--fp {
  background:
    radial-gradient(480px 260px at 30% 0%, rgba(11, 86, 66, .95), transparent 72%),
    linear-gradient(160deg, var(--verde), var(--verde-adanc));
  border-color: rgba(239, 186, 118, .4);
}
.marturie--fp::before { color: rgba(239, 186, 118, .5); }
.marturie--fp p { color: rgba(245, 235, 224, .9); }
.marturie--fp figcaption {
  color: var(--auriu-clar);
  border-top-color: rgba(239, 186, 118, .28);
}

.marturii__nota {
  max-width: 60ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
  font-size: .84rem;
  color: var(--text-moale);
}

/* =============================================================
   ACORDEON ÎNTREBĂRI
   ============================================================= */
.acordeon { display: grid; gap: .8rem; }

.acordeon__element {
  background: var(--ivoriu);
  border: 1px solid rgba(192, 139, 71, .26);
  border-radius: var(--raza-mica);
  overflow: hidden;
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie);
}
.acordeon__element:hover { border-color: rgba(192, 139, 71, .5); }
.acordeon__element.deschis { border-color: rgba(192, 139, 71, .6); box-shadow: var(--umbra-mica); }

.acordeon__element h3 { margin: 0; font-size: inherit; }

.acordeon__buton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.2rem clamp(1.1rem, 2vw, 1.6rem);
  text-align: left;
  font-family: var(--font-titlu);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--verde);
  transition: background-color var(--tranzitie);
}
.acordeon__buton:hover { background: rgba(239, 186, 118, .1); }

.acordeon__semn {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(192, 139, 71, .16);
  transition: background-color var(--tranzitie), transform var(--tranzitie);
}
.acordeon__semn::before,
.acordeon__semn::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: var(--auriu-adanc);
  transform: translate(-50%, -50%);
  transition: transform var(--tranzitie), opacity var(--tranzitie);
}
.acordeon__semn::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeon__buton[aria-expanded="true"] .acordeon__semn { background: var(--verde); }
.acordeon__buton[aria-expanded="true"] .acordeon__semn::before,
.acordeon__buton[aria-expanded="true"] .acordeon__semn::after { background: var(--auriu-clar); }
.acordeon__buton[aria-expanded="true"] .acordeon__semn::after { transform: translate(-50%, -50%) rotate(0); }

.acordeon__panou {
  height: 0;
  overflow: hidden;
  transition: height var(--tranzitie);
}
.acordeon__continut {
  padding: 0 clamp(1.1rem, 2vw, 1.6rem) 1.5rem;
  color: var(--text-moale);
  font-size: .97rem;
}

/* =============================================================
   CONTACT
   ============================================================= */
.contact__grila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.contact-card {
  display: block;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: rgba(252, 248, 243, .055);
  border: 1px solid rgba(239, 186, 118, .26);
  border-radius: var(--raza);
  transition: transform var(--tranzitie), background-color var(--tranzitie), border-color var(--tranzitie);
}
a.contact-card:hover {
  transform: translateY(-5px);
  background: rgba(252, 248, 243, .1);
  border-color: rgba(239, 186, 118, .6);
}
.contact-card--static { cursor: default; }

.contact-card--principal {
  background: rgba(239, 186, 118, .13);
  border-color: rgba(239, 186, 118, .55);
}
a.contact-card--principal:hover { background: rgba(239, 186, 118, .2); }
.contact-card--principal .contact-card__semn { background: var(--auriu-clar); color: var(--verde-adanc); }

.contact-card__semn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(239, 186, 118, .14);
  color: var(--auriu-clar);
}
.contact-card__semn .ic { width: 22px; height: 22px; }

.contact-card h3 {
  font-size: 1.05rem;
  font-family: var(--font-corp);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--auriu-clar);
  margin-bottom: .5rem;
}
.contact-card p {
  font-size: 1.12rem;
  color: var(--crem-clar);
  line-height: 1.5;
  margin-bottom: .8rem;
}
.contact-card__actiune {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .1em;
  color: rgba(245, 235, 224, .6);
}
a.contact-card .contact-card__actiune { color: var(--auriu-clar); }

.retele { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.retele a { border-bottom: 1px solid rgba(239, 186, 118, .5); }

.contact__disclaimer {
  max-width: 66ch;
  margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
  padding: 1.2rem 1.6rem;
  text-align: center;
  font-size: .86rem;
  line-height: 1.7;
  color: rgba(245, 235, 224, .78);
  background: rgba(1, 37, 27, .45);
  border: 1px solid rgba(239, 186, 118, .22);
  border-radius: var(--raza-mica);
}
.contact__disclaimer strong { color: var(--auriu-clar); font-weight: 500; }

/* =============================================================
   MODAL CONTACT
   Deschis din butoanele „Programează". Fără JS, butoanele duc la #contact.
   ============================================================= */
.modal-contact {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.modal-contact[hidden] { display: none; }

.modal-contact__fundal {
  position: absolute;
  inset: 0;
  background: rgba(1, 37, 27, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s ease;
}
.modal-contact.deschis .modal-contact__fundal { opacity: 1; }

.modal-contact__cutie {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.6rem, 3vw, 2.4rem) clamp(1.75rem, 3vw, 2.25rem);
  text-align: center;
  background:
    radial-gradient(560px 320px at 50% -8%, rgba(239, 186, 118, .14), transparent 60%),
    linear-gradient(168deg, var(--ivoriu), var(--crem-clar));
  border: 1px solid rgba(192, 139, 71, .4);
  border-radius: var(--raza);
  box-shadow: var(--umbra-mare);
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .35s ease;
}
.modal-contact.deschis .modal-contact__cutie { transform: none; opacity: 1; }

.modal-contact__x {
  position: absolute;
  top: .85rem; right: .85rem;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--verde);
  background: rgba(192, 139, 71, .12);
  transition: background-color var(--tranzitie), color var(--tranzitie), transform var(--tranzitie);
}
.modal-contact__x:hover { background: var(--verde); color: var(--auriu-clar); transform: rotate(90deg); }
.modal-contact__x svg { width: 18px; height: 18px; fill: currentColor; }

.modal-contact__logo {
  width: 78px;
  height: auto;
  margin: 0 auto .9rem;
  filter: drop-shadow(0 8px 18px rgba(3, 61, 46, .14));
}
.modal-contact .supratitlu--linii { justify-content: center; margin-bottom: .5rem; }
.modal-contact__titlu {
  font-size: clamp(1.7rem, 1.3rem + 1.3vw, 2.1rem);
  margin-bottom: .5rem;
}
.modal-contact__text {
  max-width: 34ch;
  margin: 0 auto 1.6rem;
  color: var(--text-moale);
  font-size: .95rem;
}

.modal-contact__optiuni { display: grid; gap: .7rem; text-align: left; }

.modal-contact__optiune {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(192, 139, 71, .3);
  border-radius: var(--raza-mica);
  background: rgba(252, 248, 243, .6);
  transition: transform var(--tranzitie), border-color var(--tranzitie), background-color var(--tranzitie), box-shadow var(--tranzitie);
}
.modal-contact__optiune:hover {
  transform: translateY(-2px);
  border-color: rgba(192, 139, 71, .6);
  background: var(--ivoriu);
  box-shadow: var(--umbra-mica);
}

.modal-contact__semn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(239, 186, 118, .28), rgba(3, 61, 46, .1));
  color: var(--verde);
  transition: background var(--tranzitie), color var(--tranzitie);
}
.modal-contact__semn svg { width: 22px; height: 22px; fill: currentColor; }
.modal-contact__optiune:hover .modal-contact__semn { background: var(--verde); color: var(--auriu-clar); }

.modal-contact__detaliu { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.modal-contact__eticheta {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}
.modal-contact__valoare {
  font-family: var(--font-titlu);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--verde);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.modal-contact__nota {
  margin: 1.5rem 0 0;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
}

body.modal-activ { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .modal-contact__fundal,
  .modal-contact__cutie { transition: none; }
  .modal-contact__cutie { transform: none; }
}

/* =============================================================
   SUBSOL
   ============================================================= */
.subsol {
  background: var(--verde-adanc);
  color: rgba(245, 235, 224, .68);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
  font-size: .92rem;
}
.subsol::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--auriu), transparent);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.subsol__grila {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
}

/* logo-ul are petale verde-închis: pe fundal închis are nevoie de un disc crem */
.subsol__marca img {
  width: 74px;
  padding: 9px;
  margin-bottom: 1rem;
  background: var(--crem);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(239, 186, 118, .4);
}
.subsol__nume {
  font-family: var(--font-titlu);
  font-size: 1.55rem;
  color: var(--crem-clar);
  margin-bottom: .1rem;
}
.subsol__rol {
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--auriu);
  margin-bottom: .9rem;
}
.subsol__deviza { font-size: 1.5rem; color: var(--auriu-clar); }

.subsol__titlu {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--auriu-clar);
  margin-bottom: 1.1rem;
}
.subsol ul { display: grid; gap: .55rem; }
.subsol a { transition: color var(--tranzitie); }
.subsol a:hover { color: var(--auriu-clar); }
.subsol__legal { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(239, 186, 118, .18); }

.subsol__jos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(239, 186, 118, .16);
  font-size: .78rem;
  color: rgba(245, 235, 224, .45);
}
.subsol__jos p { margin: 0; }

/* =============================================================
   BUTON FLOTANT (mobil)
   ============================================================= */
.buton-flotant {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 90;
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.35rem;
  background: linear-gradient(120deg, var(--auriu-adanc), var(--auriu-clar) 55%, var(--auriu));
  color: var(--verde-adanc);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px -12px rgba(1, 37, 27, .6);
  transition: transform var(--tranzitie), opacity var(--tranzitie);
}
.buton-flotant svg { width: 18px; height: 18px; fill: currentColor; }
/* nu are rost peste secțiunea de contact — acolo ar acoperi chiar datele de contact */
.buton-flotant--ascuns {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}

/* =============================================================
   ANIMAȚII LA DERULARE
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1),
              transform .8s cubic-bezier(.22, .61, .36, 1);
}
.reveal.vizibil { opacity: 1; transform: none; }

/* =============================================================
   PAGINI INTERIOARE (confidențialitate)
   ============================================================= */
.pagina-text { padding: clamp(8rem, 14vw, 11rem) 0 var(--pad-sectiune); }
.pagina-text h2 { font-size: 1.8rem; margin: 2.4rem 0 .8rem; }
.pagina-text h2:first-of-type { margin-top: 1.5rem; }
.pagina-text p, .pagina-text li { color: var(--text-moale); }
.pagina-text ul { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.1rem; }
.pagina-text ul li { position: relative; padding-left: 1.4rem; }
.pagina-text ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--auriu);
}
.pagina-text a:not(.btn) { color: var(--verde-clar); border-bottom: 1px solid rgba(192, 139, 71, .5); }

/* =============================================================
   FRUNZE DE FUNDAL
   Ecou al filigranului din materialul de brand. Fiecare frunză își
   primește poziția, mărimea, opacitatea și ritmul prin variabile,
   ca să nu se miște două la fel.
   Stratul își taie singur conținutul (overflow: hidden pe el, nu pe
   secțiune) — altfel ar strica position: sticky din Despre și Tarife.
   ============================================================= */
.svg-simboluri { position: absolute; width: 0; height: 0; overflow: hidden; }

.frunze {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--verde);
}
.frunze--aurii { color: var(--auriu); }
.frunze--pe-verde { color: var(--auriu-clar); }

/* conținutul secțiunilor stă deasupra frunzelor */
.container { position: relative; z-index: 1; }

.frunza {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 200px);
  aspect-ratio: 100 / 140;
  fill: currentColor;
  opacity: var(--o, .06);
  animation: plutire var(--d, 30s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes plutire {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1);
  }
  30% {
    transform: translate3d(calc(var(--dx, 20px) * .55), calc(var(--dy, 30px) * -1), 0)
               rotate(calc(var(--r, 0deg) + 7deg)) scale(1.04);
  }
  62% {
    transform: translate3d(var(--dx, 20px), calc(var(--dy, 30px) * .35), 0)
               rotate(calc(var(--r, 0deg) - 5deg)) scale(.98);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1);
  }
}

/* =============================================================
   ECRAN DE ÎNCĂRCARE
   Apare la fiecare intrare pe pagină și se ridică precum o cortină.
   Fără JavaScript nu se afișează deloc (vezi .fara-js), ca să nu
   existe riscul de a rămâne blocat peste conținut.
   ============================================================= */
.fara-js .incarcare { display: none; }
html.se-incarca body { overflow: hidden; }

.incarcare {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.75rem;
  padding: 2rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(760px 520px at 50% 34%, rgba(239, 186, 118, .18), transparent 62%),
    linear-gradient(170deg, var(--ivoriu) 0%, var(--crem-clar) 52%, var(--crem) 100%);
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), visibility 0s .9s;
}

.incarcare--gata {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  pointer-events: none;
}
.incarcare--gata .incarcare__interior,
.incarcare--gata .incarcare__text {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .4s ease, transform .55s cubic-bezier(.76, 0, .24, 1);
}

.incarcare__interior {
  position: relative;
  display: grid;
  place-items: center;
  width: 182px; height: 182px;
}

.incarcare__logo {
  width: 122px;
  height: auto;
  animation: apareLogo 1s cubic-bezier(.22, .61, .36, 1) both;
  filter: drop-shadow(0 12px 26px rgba(3, 61, 46, .16));
}
@keyframes apareLogo {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: none; }
}

.incarcare__inel {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: rotire 2.4s linear infinite;
}
.incarcare__urma {
  fill: none;
  stroke: rgba(192, 139, 71, .22);
  stroke-width: 1.5;
}
.incarcare__arc {
  fill: none;
  stroke: var(--auriu);
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: deseneazaArc 1.8s ease-in-out infinite;
}
@keyframes rotire { to { transform: rotate(360deg); } }
@keyframes deseneazaArc {
  0%   { stroke-dasharray: 2 200; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 108 200; stroke-dashoffset: -28; }
  100% { stroke-dasharray: 2 200; stroke-dashoffset: -138; }
}

.incarcare__text { animation: apareText .9s .35s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes apareText {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.incarcare__nume {
  font-family: var(--font-titlu);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  color: var(--verde);
  margin: 0 0 .35rem;
}
.incarcare__rol {
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--auriu-adanc);
  margin: 0;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1080px) {
  .nav-lista { gap: 1.25rem; }
  .nav-lista a { font-size: .78rem; }
  .banda__grila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 900px) {
  .meniu-buton { display: flex; }

  /* ATENȚIE, capcană rezolvată aici:
     „backdrop-filter" pe .sit-header--fixat transformă antetul în bloc
     conținător pentru descendenții „position: fixed" — la fel ca „transform".
     Panoul de meniu, fiind copil al antetului, se micșora brusc la înălțimea
     lui, iar jumătate din linkuri ieșeau peste pagină. Se vedea doar DUPĂ
     derulare, când apare clasa --fixat, de unde impresia că se strică „uneori".
     Cât timp meniul e deschis, antetul renunță la blur. */
  body.meniu-activ .sit-header--fixat {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-principal {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(370px, 88vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 4.75rem 2rem 2rem;
    /* pe ecrane mici conținutul poate depăși înălțimea: să se poată derula,
       nu să iasă din panou */
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(420px 300px at 100% 0%, rgba(239, 186, 118, .16), transparent 62%),
      linear-gradient(170deg, var(--ivoriu) 0%, var(--crem-clar) 100%);
    box-shadow: -20px 0 60px -30px rgba(43, 38, 32, .6);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--tranzitie), visibility var(--tranzitie);
  }
  .nav-principal.deschis { transform: none; visibility: visible; }

  /* --- marca din capul panoului --- */
  .nav-marca,
  .nav-picior { display: block; }

  .nav-marca { text-align: center; padding-bottom: 1.5rem; }
  .nav-marca img {
    width: 74px;
    margin: 0 auto .6rem;
    filter: drop-shadow(0 8px 18px rgba(3, 61, 46, .14));
  }
  .nav-marca__nume {
    font-family: var(--font-titlu);
    font-size: 1.45rem;
    color: var(--verde);
    margin: 0;
    line-height: 1.1;
  }
  .nav-marca__rol {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--auriu-adanc);
    margin: .3rem 0 0;
  }
  /* firul auriu care desparte marca de linkuri */
  .nav-marca::after {
    content: "";
    display: block;
    width: 68px;
    height: 1px;
    margin: 1.4rem auto 0;
    background: linear-gradient(90deg, transparent, var(--auriu), transparent);
  }

  /* --- linkurile --- */
  .nav-lista { flex-direction: column; gap: 0; width: 100%; }
  .nav-lista li { border-bottom: 1px solid rgba(192, 139, 71, .16); }
  .nav-lista li:last-child { border-bottom: 0; }
  .nav-lista a {
    display: block;
    padding: .95rem .25rem;
    font-size: 1.2rem;
    font-family: var(--font-titlu);
    letter-spacing: 0;
    color: var(--verde);
    transition: color var(--tranzitie), padding-left var(--tranzitie);
  }
  /* punctul auriu apare la atingere, ca un semn de „aici ești" */
  .nav-lista a::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 5px;
    margin-right: 0;
    border-radius: 50%;
    background: var(--auriu);
    vertical-align: middle;
    transition: width var(--tranzitie), margin-right var(--tranzitie);
  }
  .nav-lista a:hover,
  .nav-lista a:focus-visible,
  .nav-lista a.activ { color: var(--auriu-adanc); }
  .nav-lista a:hover::before,
  .nav-lista a:focus-visible::before,
  .nav-lista a.activ::before { width: 5px; margin-right: .55rem; }

  .nav-cta { width: 100%; margin-top: 1.75rem; }

  /* --- piciorul: numărul la un deget distanță --- */
  .nav-picior { margin-top: auto; padding-top: 1.75rem; text-align: center; }
  .nav-picior__telefon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-titlu);
    font-size: 1.15rem;
    color: var(--verde);
  }
  .nav-picior__telefon svg { width: 17px; height: 17px; fill: var(--auriu); }
  .nav-picior__nota {
    margin: .5rem 0 0;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-moale);
  }

  /* --- intrarea scalonată a linkurilor --- */
  .nav-principal.deschis .nav-marca,
  .nav-principal.deschis .nav-lista li,
  .nav-principal.deschis .nav-cta,
  .nav-principal.deschis .nav-picior {
    animation: intraMeniu .5s cubic-bezier(.22, .61, .36, 1) both;
  }
  .nav-principal.deschis .nav-marca { animation-delay: .05s; }
  .nav-principal.deschis .nav-lista li:nth-child(1) { animation-delay: .10s; }
  .nav-principal.deschis .nav-lista li:nth-child(2) { animation-delay: .145s; }
  .nav-principal.deschis .nav-lista li:nth-child(3) { animation-delay: .19s; }
  .nav-principal.deschis .nav-lista li:nth-child(4) { animation-delay: .235s; }
  .nav-principal.deschis .nav-lista li:nth-child(5) { animation-delay: .28s; }
  .nav-principal.deschis .nav-lista li:nth-child(6) { animation-delay: .325s; }
  .nav-principal.deschis .nav-lista li:nth-child(7) { animation-delay: .37s; }
  .nav-principal.deschis .nav-cta { animation-delay: .42s; }
  .nav-principal.deschis .nav-picior { animation-delay: .47s; }

  body.meniu-activ { overflow: hidden; }
  body.meniu-activ::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(1, 37, 27, .45);
    backdrop-filter: blur(2px);
  }

  .hero__grila { grid-template-columns: 1fr; gap: 3rem; }
  .hero__vizual { order: 2; max-width: 360px; }
  .hero__continut { order: 1; text-align: center; margin-inline: auto; }
  .hero__text { margin-inline: auto; }
  .hero__actiuni { justify-content: center; }
  .hero__nota { justify-content: center; }
  .portret-inel { inset: -20px -20px 26px -22px; }

  .despre__grila { grid-template-columns: 1fr; gap: 3rem; }
  .despre__foto { max-width: 440px; margin-inline: auto; width: 100%; }
  .despre__foto-lipicios { position: static; }

  /* Pasărea rămâne vizibilă și pe telefon, dar altfel așezată.

     Pe desktop banda stă centrată vertical, în spatele celor două coloane.
     Pe mobil secțiunea e o singură coloană foarte înaltă, deci o bandă fixată
     la mijloc ar fi trecut o dată prin ecran și ar fi dispărut. Aici devine
     LIPICIOASĂ: rămâne agățată sub antet cât timp derulezi secțiunea și se
     desprinde abia la capătul ei.

     „margin-bottom" negativ, egal cu înălțimea: elementul nu consumă spațiu în
     flux, deci nu împinge fotografia mai jos — se comportă ca un fundal, dar
     rămâne lipicios, ceea ce „position: absolute" nu permite. */
  .despre__film {
    position: sticky;
    top: 5rem;                                  /* sub antetul fix */
    left: auto;
    right: auto;
    transform: none;
    aspect-ratio: auto;
    height: min(52vh, 420px);
    margin-bottom: calc(-1 * min(52vh, 420px));
    max-height: none;
    /* topire în jos, spre text — pe desktop estomparea e laterală */
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 97%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 97%);
  }

  /* Conținutul trebuie să treacă PESTE fundal. Fără „position", un bloc
     nepoziționat s-ar desena sub elementul lipicios, care e poziționat. */
  .despre__grila { position: relative; z-index: 1; }

  /* Mai discretă decât pe desktop: aici textul chiar trece peste ea. */
  .despre__film--pornit { opacity: .3; }
  .despre__film::after {
    background: linear-gradient(to bottom, rgba(252, 248, 243, .12) 0%, rgba(252, 248, 243, .8) 100%);
  }

  /* Cu bara de administrare, antetul coboară — și pasărea odată cu el. */
  html.are-bara-admin .despre__film { top: 8.25rem; }

  .tarife__aranjament { grid-template-columns: 1fr; }

  .subsol__grila { grid-template-columns: 1fr 1fr; }
  .subsol__marca { grid-column: 1 / -1; }

  .buton-flotant { display: inline-flex; }
}

@media (max-width: 620px) {
  :root { --raza: 14px; }

  /* mai puține frunze și mai mici: ecran mic, plus mai puțină muncă de randare */
  .frunza { width: calc(var(--w) * .62); }
  .frunze .frunza:nth-child(n+4) { display: none; }
  .incarcare__interior { width: 156px; height: 156px; }
  .incarcare__logo { width: 104px; }

  .marca__nume { font-size: 1.1rem; }
  .marca__semn { width: 38px; }

  .banda__grila { grid-template-columns: 1fr; gap: 1.75rem; }
  .banda__element { display: grid; grid-template-columns: 34px 1fr; gap: .2rem .9rem; text-align: left; }
  .banda__element .ic { grid-row: span 2; margin: .2rem 0 0; width: 26px; height: 26px; }

  .pas { padding-top: 2.2rem; }
  .pas__numar { font-size: 2.8rem; }

  .subsol__grila { grid-template-columns: 1fr; }
  .subsol__jos { flex-direction: column; text-align: center; }
  .subsol__jos p { width: 100%; }

  .citat-plutitor { right: 50%; transform: translateX(50%); bottom: -18px; }
  .citat-plutitor .scris-de-mana { font-size: 1.3rem; }

  .rand-tarif { gap: .15rem .9rem; padding-block: 1.1rem; }
  .rand-tarif__nume { font-size: 1.22rem; }
  .rand-tarif__pret { font-size: 1.9rem; }
  .acordeon__buton { font-size: 1.1rem; padding: 1rem 1.1rem; }
}

/* =============================================================
   ACCESIBILITATE / PREFERINȚE
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .alegere__proiectie.se-schimba { opacity: 1; transform: none; }
  /* frunzele rămân, dar nemișcate; ecranul de încărcare doar se estompează */
  .frunza { animation: none !important; }
  .incarcare__inel { display: none; }
  .incarcare__logo, .incarcare__text { animation: none !important; }
  .incarcare { transition: opacity .3s ease, visibility 0s .3s !important; }
  .incarcare--gata { clip-path: none; opacity: 0; }
}

@media print {
  .sit-header, .buton-flotant, .hero__decor, .decor-frunze { display: none !important; }
  body { background: #fff; color: #000; }
  .sectiune--verde, .banda, .subsol { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}