/* =========================================================
   Floraria Iris Blue - style.css
   Ordinea fișierului urmează PRD-ul (secțiunea 4):
   :root → reset → utilitare → tipografie → layout → secțiuni
   (în ordinea din pagină) → componente → media queries → reduced-motion
   Scris mobile-first: stilurile de bază sunt cele de mobil.
   ========================================================= */

/* ===== 5.1 / 5.3 DESIGN TOKENS ===== */
:root {
  /* Albastru iris - culoarea semnătură */
  --iris-950:   #070B1F;
  --iris-900:   #0E1440;
  --iris-800:   #172167;
  --iris-700:   #23319B;
  --iris-600:   #3244C4;
  --iris-500:   #4C5FE6;
  --iris-300:   #93A0F2;
  --iris-100:   #DDE2FC;

  /* Neutre */
  --ivoriu:     #F6F3ED;
  --ivoriu-cald:#EFE9DF;
  --alb:        #FFFFFF;
  --cerneala:   #12152B;
  --gri-text:   #5A5F78;
  --linie:      #D8D2C7;

  /* Accente rare */
  /* --petala (roz) a fost scos: petalele din hero sunt acum in albastrul
     semnaturii, cu trei tonuri din scara --iris. Nu mai avea niciun consumator. */
  --auriu:      #C2A66B;

  /* Funcționale */
  --succes:     #2E7D5B;
  --eroare:     #B3261E;
  --overlay:    rgba(7, 11, 31, .82);

  /* Spațiere (5.3) */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

  /* Colțuri, umbre, easing */
  --radius-buton:  999px;
  --radius-card:   4px;
  --radius-img:    2px;
  --radius-input:  2px;
  --shadow-soft:   0 8px 28px rgba(18,21,43,.08);
  --shadow-lift:   0 20px 56px rgba(18,21,43,.16);
  --shadow-header: 0 1px 0 rgba(216,210,199,.6);
  --shadow-dark:   0 24px 64px rgba(7,11,31,.55);
  --ease-lux:      cubic-bezier(.22,.61,.36,1);
  --ease-out-soft: cubic-bezier(.16,1,.3,1);

  /* Layout */
  --container:     1320px;
  --container-text: 720px;
  --pad-x:         20px;
  --pad-y:         64px;
  --header-h:      64px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--iris-950);
  color: var(--cerneala);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 1.05vw, 1.0625rem);
  line-height: 1.7;
  /* `clip`, nu `hidden`: `hidden` face din body un container de derulare si
     rupe `position: sticky` din interiorul lui (fotografia din Despre).
     Browserele fara suport pentru `clip` raman pe `hidden`, de deasupra. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Bannerul de cookies e fixat jos si acoperea butonul de WhatsApp din Contact
     pana la prima apasare. `--fab-lift` e inaltimea lui, setata din JS cat timp e
     vizibil; ca spatiu de jos, impinge continutul deasupra lui si il face zero
     dupa ce omul alege. */
  padding-bottom: var(--fab-lift, 0px);
  -webkit-font-smoothing: antialiased;
  transition: background-color 600ms linear;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--iris-500); outline-offset: 4px; }

/* ===== UTILITARE ===== */
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.u-hidden { display: none !important; }
/* Centreaza si caseta, nu doar textul din ea. Regula globala `p { max-width:
   62ch }` face ca orice paragraf sa fie mai ingust decat containerul; fara
   margin-inline:auto, caseta ramane lipita la stanga si textul se centreaza
   inauntrul ei - adica descentrat fata de titlu. Asa aparea „OCAZII" aruncat
   in stanga, sub un titlu centrat. */
.u-center { text-align: center; margin-inline: auto; }
.u-desktop { display: none; }
.u-mobile { display: inline; }
.u-br-desktop { display: none; }

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 10000;
  background: var(--alb); color: var(--cerneala);
  padding: 12px 20px; border-radius: var(--radius-buton);
  font-size: .875rem; font-weight: 500;
  transition: top 200ms var(--ease-lux);
}
.skip-link:focus { top: 12px; }

/* ===== TIPOGRAFIE (5.2) ===== */
.eyebrow {
  font-size: .75rem; font-weight: 600; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--iris-500);
  margin-bottom: var(--sp-5);
}
.section--dark .eyebrow { color: var(--iris-300); }

.h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  max-width: 18ch;
  /* Browserul echilibreaza singur randurile in loc sa umple primul rand si sa lase
     un cuvant orfan pe al doilea („...in orice / zi"). Browserele fara suport
     ignora linia si se comporta ca inainte. */
  text-wrap: balance;
}

h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2;
}
p { max-width: 62ch; }
.lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.55;
}
.small { font-size: .875rem; line-height: 1.55; letter-spacing: .01em; }

/* Mască de linie pentru dezvăluirile de titlu (10.2) */
/* Masca ascunde randul cat timp urca la intrare. line-height sub 1 taia coada
   literelor (p, g, y), asa ca randul primeste o rezerva jos, iar masca o scade
   inapoi din spatiere. Rezerva sta pe RAND, nu pe masca: asa translatia de
   intrare (yPercent 100+) acopera si rezerva, si randul nu se vede iesind pe
   sub masca in timpul animatiei. */
.line-mask { display: block; overflow: hidden; margin-bottom: -.16em; }
.line, .sig__line { display: block; padding-bottom: .16em; }
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word { display: inline-block; }

/* Starea implicită este cea FINALĂ; JS o suprascrie doar dacă e activ (3) */
.js-enabled .reveal,
.js-enabled .reveal-words { will-change: transform, opacity; }

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: var(--pad-y); }
.section--light { background: var(--ivoriu); color: var(--cerneala); }
.section--dark  { background: var(--iris-950); color: var(--alb); }
.section--dark p { color: rgba(255,255,255,.82); }

/* Separator între secțiuni (5.5) */
.section--light + .section--light > .container { border-top: 1px solid var(--linie); padding-top: var(--pad-y); }

/* ===== PLACEHOLDER FOTO (9.4) ===== */
.ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--iris-900);
  overflow: hidden;
  border-radius: var(--radius-img);
}
.ph__frame { position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.ph__label { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 32px 24px; }
.ph__name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: 1.25rem; line-height: 1.25;
  color: var(--iris-300);
}
.ph__dim { font-size: .75rem; letter-spacing: .06em; color: rgba(147,160,242,.62); }

/* ===== 7.1 PRELOADER ===== */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--iris-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.preloader__logo {
  width: 108px; height: 108px;
  background: var(--ivoriu); border-radius: 50%;
}

/* ===== CORTINA DE NAVIGARE =====
   Acopera saltul instant peste galeria prinsa. Culoarea o pune JS, dupa
   sectiunea in care aterizam, ca sa nu clipeasca alb peste o sectiune inchisa.
   z-index sub preloader (9999) si peste tot restul. */
.nav-cortina {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--ivoriu);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms linear;
}
.nav-cortina.is-on { opacity: 1; }

/* ===== 7.2 HEADER ===== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  color: var(--alb);
  transition: background-color 320ms var(--ease-lux), height 320ms var(--ease-lux),
              color 200ms linear, transform 320ms var(--ease-lux), box-shadow 320ms var(--ease-lux);
}
.header__inner {
  position: relative; z-index: 1;
  /* .header este flex (din CSS-ul critic), deci bara interioara trebuie sa ceara
     explicit toata latimea - altfel se strange la latimea continutului. */
  width: 100%;
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
/* Voal fin sub header cat timp e transparent peste hero - altfel linkurile albe
   cad direct peste fotografie si compozitia arata neterminata la scroll 0. */
.header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 168px;
  background: linear-gradient(180deg, rgba(7,11,31,.68) 0%, rgba(7,11,31,.28) 55%, rgba(7,11,31,0) 100%);
  pointer-events: none;
  transition: opacity 320ms var(--ease-lux);
}
.header.is-scrolled::before { opacity: 0; }
.header.is-scrolled {
  background: rgba(246,243,237,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--cerneala);
  box-shadow: var(--shadow-header);
}
.header.is-hidden { transform: translateY(-100%); }
/* Cat timp caruselul 360 e pinned, header-ul nu revine la scroll in sus -
   altfel taie din compozitia galeriei. Clasa e pusa din gallery.js. */
.header.is-locked { transform: translateY(-100%); }

/* Din 2026-09 hero-ul e semnatura, pe ivoriu. De la 640px in sus partea de sus
   a paginii e deschisa la culoare, deci bara transparenta trece pe cerneala si
   isi pierde voalul intunecat. Sub 640px fotografia din hero urca pana sub bara,
   deci acolo textul alb ramane corect. */
@media (min-width: 640px) {
  .header:not(.is-scrolled) { color: var(--cerneala); }
  .header:not(.is-scrolled)::before { opacity: 0; }
  /* Sigla e un disc ivoriu: pe ivoriu s-ar topi in fundal fara conturul asta. */
  .header:not(.is-scrolled) .brand__mark { box-shadow: 0 0 0 1px var(--linie); }
  .header:not(.is-scrolled) .btn--secondary { --fill: var(--cerneala); --fill-text: var(--ivoriu); }
}

.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand__mark {
  width: 40px; height: 40px; flex: none;
  background: var(--ivoriu); border-radius: 50%;
  padding: 1px;
  transition: width 320ms var(--ease-lux), height 320ms var(--ease-lux);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__top { font-size: .6875rem; font-weight: 600; letter-spacing: .28em; }
.brand__bottom {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-style: italic; font-size: .9375rem;
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 40px; }
.nav__link {
  position: relative; font-size: .9375rem; opacity: .78;
  transition: opacity 240ms var(--ease-lux), color 240ms var(--ease-lux);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-lux);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { opacity: 1; color: var(--iris-500); }
.nav__link.is-active::after { transform: scaleX(1); background: var(--iris-500); }

.header .header__cta { display: none; }

.burger {
  width: 44px; height: 44px; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 22px; height: 1px; background: currentColor; }

/* Meniu mobil */
.mmenu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--iris-950); color: var(--alb);
  padding: var(--sp-9) var(--pad-x) var(--sp-7);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-8);
  clip-path: circle(0% at 92% 6%);
  transition: clip-path 620ms var(--ease-lux);
}
.mmenu[hidden] { display: none; }
.mmenu.is-open { clip-path: circle(140% at 92% 6%); }
.mmenu__close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
.mmenu__close svg { width: 24px; height: 24px; }
.mmenu__nav a {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: 2rem; line-height: 1.5;
  display: block; padding: var(--sp-1) 0;
}
.mmenu__contact { display: flex; flex-direction: column; gap: var(--sp-4); }
.mmenu__contact a { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-size: .9375rem; color: var(--iris-300); }
.mmenu__contact svg { width: 20px; height: 20px; flex: none; }

/* ===== 7.3 HERO ===== */
/* Hero-ul e semnatura IRIS BLUE: regulile de asezare stau in blocul 7.5,
   pe clasa .sig, ca sa nu se dubleze. Aici raman doar petalele si butoanele,
   folosite si de alte compozitii. */
.hero__petals {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  /* Petalele se sting spre marginea de sus si de jos, in loc sa apara si sa
     dispara brusc pe o linie dreapta. Masca e pe container, deci nu costa nimic
     in plus per petala. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
}
.hero__actions {
  /* width:100% e obligatoriu: ca element de flex intr-o coloana cu
     align-items:flex-start, latimea ar fi cat continutul, iar flex-wrap n-ar
     avea niciodata de la ce sa rupa randul. */
  width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
}

/* Petale (10.3) */
/* Doua elemente: .petal duce caderea si legănarea larga, .petal__leaf duce
   rasucirea. Suprapunerea lor e tot ce face diferenta dintre o petala si un
   confetti care cade drept - vezi js/flora.js. */
.petal { position: absolute; top: 0; }
/* Fara will-change si fara filter aici. Amandoua promoveaza petala pe strat
   propriu de compunere; peste o duzina de elemente care se si transforma, asta
   producea urme lungi pe ecran. Efectul nu are nevoie de ele. */
.petal__leaf { display: block; }

/* Trei planuri de adancime: departe = mic, incet, sters. Planul da marimea si
   apasarea; tonul se alege separat, in JS, fiindca hero-ul are doua fundaluri
   lipite si un singur albastru ar disparea pe unul dintre ele. */
.petal--fund   { opacity: .13; }
.petal--mijloc { opacity: .18; }
.petal--fata   { opacity: .24; }

/* Albastrul e cel al semnaturii, nu roz: petala e marca florariei. */
.petal.ton-palid   { color: var(--iris-100); }
.petal.ton-deschis { color: var(--iris-300); }
.petal.ton-mediu   { color: var(--iris-500); }
.petal.ton-inchis  { color: var(--iris-800); }

/* ===== 7.4 DESPRE ===== */
/* Petalele cununii ies cu cativa pixeli in afara containerului pe ecrane mici.
   `clip`, nu `hidden`: `hidden` ar face din sectiune un container de derulare si
   ar rupe fotografia lipita de scroll de pe desktop. Latimea ramei de mai jos e
   oricum calculata sa incapa - asta e doar plasa de siguranta. */
#despre { overflow-x: clip; }
.despre__grid { display: grid; gap: var(--sp-6); }
.despre__head { order: 1; }
.despre__media { position: relative; order: 2; }
.despre__media .ph { aspect-ratio: 4 / 5; }
/* Rama se stramteaza pana la latimea fotografiei, ca sa aiba cununa de ce sa se
   agate: fara ea cercul s-ar centra pe coloana, nu pe imagine. Latimea de 80%
   pe telefon nu e estetica, e aritmetica - cununa iese cu 12% in fiecare parte
   si trebuie sa incapa in latimea containerului, altfel pagina capata derulare
   orizontala. */
.despre__rama {
  position: relative;
  /* Petalele ies cu ~8% in fiecare parte. Latimea de aici e aritmetica, nu gust:
     84% + 2x8% = 100% din container, adica exact cat incape fara ca pagina sa
     capete derulare orizontala. */
  width: 78%; max-width: 380px; margin-inline: auto;
}
.despre__img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-img);
}

/* Cununa (7.4b) */
/* Petalele sunt elemente separate, asezate in procente pe o super-elipsa - vezi
   tools/cununa_despre.py pentru de ce. Stratul e cat fotografia; petalele ies in
   afara lui prin coordonate peste 100%, deci nu are nevoie de dimensiune proprie. */
.despre__siluete { position: absolute; width: 0; height: 0; }
.despre__cununa {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.cp {
  position: absolute; display: block;
  translate: -50% -50%;
  aspect-ratio: 1; height: auto;
}
/* Cateva petale trec peste marginea fotografiei. Fara stratul asta, cununa sta
   lipita in spate ca un fundal si nu imbratiseaza nimic. */
.despre__cununa--fata { z-index: 2; }

.despre__cununa .p1 { fill: var(--iris-800); }
.despre__cununa .p2 { fill: var(--iris-700); }
.despre__cununa .p3 { fill: var(--iris-500); }
.despre__cununa .p4 { fill: var(--iris-300); }
.despre__cununa .p5 { fill: var(--auriu); }
.despre__cununa .o1 { opacity: .16; }
.despre__cununa .o2 { opacity: .30; }
.despre__cununa .o3 { opacity: .46; }
.despre__cununa .o4 { opacity: .64; }

/* Respira, nu se invarte: o rotatie completa ar face petalele razlete sa orbiteze
   si s-ar vedea ca sunt un singur desen. `rotate` e proprietate separata, deci nu
   calca peste `translate` de mai sus. */
@media (prefers-reduced-motion: no-preference) {
  .despre__cununa--spate { animation: cununa-respira 34s var(--ease-lux) infinite; }
  .despre__cununa--fata  { animation: cununa-respira 46s var(--ease-lux) infinite reverse; }
}
@keyframes cununa-respira {
  0%, 100% { rotate: -2.6deg; }
  50%      { rotate: 2.6deg; }
}
.despre__text { order: 3; display: flex; flex-direction: column; gap: var(--sp-5); }
/* Primul paragraf e lead serif, al doilea e text de corp: contrastul dintre ele
   tine loc de delimitare, fara sa adaug linii peste tot. */
.despre__lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.5;
  color: var(--cerneala);
}
.rule-gold { display: block; width: 64px; height: 1px; background: var(--auriu); opacity: .55; }

.repere { margin-top: var(--sp-5); counter-reset: reper; }
.reper {
  counter-increment: reper;
  padding-block: var(--sp-5);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
}
.reper::before {
  content: counter(reper);
  grid-row: 1 / span 2;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: .8125rem; line-height: 1.7;
  color: var(--auriu);
}
.reper + .reper { border-top: 1px solid var(--linie); }
.reper dt {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: 1.25rem; line-height: 1.3;
}
.reper dd { color: var(--gri-text); font-size: .9375rem; }

/* ===== 7.5 HERO / SEMNĂTURA ===== */
/* Mobil: fotografia sus (ecran intreg minus copy), cuvantul alb peste ea,
   textul si butoanele dedesubt pe ivoriu. Header-ul cade peste fotografie,
   deci ramane alb - la 640px in sus partea de sus devine ivorie si trece pe
   cerneala (vezi blocul 7.2 din media query). */
.sig {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  background: var(--ivoriu);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.sig__photo { position: relative; height: 52svh; flex: none; overflow: hidden; }
.sig__photo picture { display: block; width: 100%; height: 100%; }
.sig__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* Fotografia e deja intunecata (varianta V2), deci voalul are rolul doar de a
   calma zonele luminate de felinar si de fereastra, ca literele albe sa se
   citeasca peste ele. */
.sig__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,31,.44) 0%, rgba(7,11,31,.26) 45%, rgba(7,11,31,.40) 100%);
}
.sig__word-wrap {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 52svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--header-h) + var(--sp-4)) var(--pad-x) var(--sp-5);
}
.sig__eyebrow {
  color: var(--iris-100); margin-bottom: var(--sp-4);
  max-width: 100%; text-align: center;
  /* Pe telefon randul se rupe in doua: fara balance, „BUCUREȘTI” ramanea singur.
     Pe desktop e rupt intentionat in doua; line-height ca randurile sa nu se lipeasca. */
  text-wrap: balance;
  line-height: 1.75;
  /* Sub 400px randul cu spatiere de .22em nu incape: se strange, nu se taie. */
  font-size: clamp(.625rem, 2.9vw, .75rem); letter-spacing: .16em;
}
.sig__word {
  font-family: "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 15vw, 13rem);
  line-height: .86;
  letter-spacing: -.03em;
  text-align: center;
  max-width: 100%;
}
.sig__line { position: relative; display: block; }
.sig__fill { display: block; color: var(--alb); }
.sig__white { display: none; }
/* Fallback obligatoriu dacă background-clip: text nu e suportat (7.5) */
.no-bgclip .sig__fill {
  background-image: none;
  color: var(--iris-700);
  -webkit-text-fill-color: var(--iris-700);
}
.no-bgclip .sig__white { display: none; }
.sig__copy {
  position: relative; z-index: 3;
  flex: 1 1 auto;
  background: var(--ivoriu);
  padding: var(--sp-6) var(--pad-x) var(--sp-7);
  display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start;
  justify-content: center;
}
.sig__lead { max-width: min(46ch, 100%); color: var(--gri-text); }
.sig__copy p { max-width: min(46ch, 100%); }

/* ===== 7.5b FAȚADA - trecerea dintre Despre si Galerie ===== */
/* Sectiunea nu are margini proprii: incepe cu exact ivoriul sectiunii de
   deasupra si se termina cu exact bleumarinul galeriei de dedesubt. Fotografia
   apare din prima culoare si se stinge in a doua, asa ca imbinarile dispar si
   cele trei sectiuni se citesc ca o singura miscare. */
.fatada {
  position: relative;
  height: clamp(520px, 92svh, 940px);
  background: var(--iris-950);
  color: var(--alb);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.fatada__media { position: absolute; inset: 0; z-index: 0; }
.fatada__media picture { display: block; width: 100%; height: 100%; }
.fatada__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Cele doua topiri. Valorile sunt culorile vecinilor, scrise explicit:
   --ivoriu = #F6F3ED (sectiunea Despre), --iris-950 = #070B1F (galeria).
   Daca se schimba una dintre ele, se schimba si aici, altfel apare o dunga. */
.fatada__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      var(--ivoriu) 0%,
      rgba(246,243,237,.90) 4%,
      rgba(246,243,237,.45) 12%,
      rgba(246,243,237,0) 22%),
    linear-gradient(0deg,
      var(--iris-950) 0%,
      rgba(7,11,31,.97) 14%,
      rgba(7,11,31,.72) 26%,
      rgba(7,11,31,.28) 38%,
      rgba(7,11,31,0) 50%);
}

.fatada__copy { position: relative; z-index: 1; padding-bottom: var(--sp-7); }
/* Albastrul de accent dispare de aici: pe flori deschise la culoare nu se citea.
   Pe intunericul de jos, lavanda deschisa are contrastul necesar. */
.fatada__eyebrow { color: var(--iris-100); margin-bottom: var(--sp-3); }
.fatada__line {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  line-height: 1.45;
  max-width: 34ch;
  color: rgba(255,255,255,.92);
}

/* ===== 7.6 GALERIE ===== */
.gallery { background: var(--iris-950); color: var(--alb); padding-top: var(--pad-y); }
/* Pe telefon capul curge normal, dar indicatia de derulare a urcat in HTML ca sa
   poata sta sus-dreapta pe desktop. `order` o trimite inapoi la coada, unde ii e
   locul cand totul e pe o singura coloana. */
.gallery__head { padding-bottom: var(--sp-7); display: grid; }
.gallery__eyebrow { order: 1; }
#galerie-title   { order: 2; }
.gallery__aside  { order: 3; }
.gallery__hint   { order: 4; margin-top: var(--sp-5); }
/* Nota nu mai e text marunt albastru sub un titlu de 60px: creste, se albeste si
   devine a doua voce a capului, nu o precizare de subsol. */
.gallery__note {
  font-size: .9375rem; line-height: 1.7;
  color: rgba(255,255,255,.80);
  margin-top: var(--sp-4);
}
/* Precizarea despre preturi ramane text marunt, dar acum arata ca atare si nu se
   mai amesteca cu introducerea. */
.gallery__fine {
  margin-top: var(--sp-3);
  font-size: .8125rem; line-height: 1.6;
  color: var(--iris-300);
}
.gallery__hint {
  margin-top: var(--sp-5);
  font-size: .6875rem; letter-spacing: .3em; color: rgba(255,255,255,.6);
}
.gallery__viewport { position: relative; padding-bottom: var(--pad-y); }
.gallery__stage {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery__stage::-webkit-scrollbar { display: none; }
.gallery__ring {
  display: flex; gap: var(--sp-4);
  width: max-content;
  padding-inline: 9vw;
}
.g-card {
  width: 82vw; flex: none;
  scroll-snap-align: center;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.g-card__media {
  position: relative; overflow: hidden;
  background: var(--iris-900); border-radius: var(--radius-img);
}
/* Toate cardurile sunt verticale. Amestecul portret/peisaj facea ca jumatate
   dintre ele sa arate pitice pe cilindru, la aceeasi latime. */
.g-card__media { aspect-ratio: 3 / 4; }
.g-card__media .ph { position: absolute; inset: 0; border-radius: 0; }
.g-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fotografiile provizorii sunt decupaje pe fundal alb; pe un card intunecat ar
   arata ca niste dreptunghiuri albe, asa ca primesc un carton ivoriu. */
.g-card--photo .g-card__media { background: var(--ivoriu); }
.g-card__zoom {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  background: rgba(7,11,31,.5); color: var(--alb);
  font-size: 1.25rem; line-height: 1;
  transition: background-color 280ms var(--ease-lux), color 280ms var(--ease-lux), transform 280ms var(--ease-lux);
}
.g-card__zoom:hover { background: var(--alb); color: var(--iris-950); }
.g-card__title { color: var(--alb); }
.g-card__desc {
  font-size: .875rem; line-height: 1.55; color: var(--iris-300);
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gallery__progress {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-6) var(--pad-x) 0;
  max-width: var(--container); margin-inline: auto;
}
.gallery__bar { position: relative; flex: 1; height: 1px; background: rgba(255,255,255,.16); }
.gallery__bar span { display: block; height: 100%; width: 8%; background: var(--iris-500); transform-origin: left; }
.gallery__counter { font-size: .8125rem; font-weight: 500; color: var(--iris-300); margin: 0; }

/* ===== 7.7 OCAZII ===== */
.ocazii__hint { margin-top: var(--sp-4); color: var(--gri-text); font-size: .9375rem; }

/* Nota de sub titlul sectiunii Ocazii. Are fundal propriu si o dunga aurie, ca sa
   se citeasca inaintea listei: florile din afara sezonului sunt singurul lucru
   pentru care clientul trebuie sa sune din timp. Textul sta la stanga chiar daca
   blocul e centrat - doua randuri centrate se citesc mai greu. */
.ocazii__nota {
  margin: var(--sp-5) auto 0; max-width: 62ch;
  background: var(--alb); border-left: 3px solid var(--auriu);
  border-radius: 0 6px 6px 0;
  padding: var(--sp-4) var(--sp-5);
  text-align: left; font-size: .9375rem; line-height: 1.65; color: var(--cerneala);
  box-shadow: 0 1px 2px rgba(18,21,43,.05);
}
.ocazii__nota-eticheta {
  display: block; margin-bottom: .35rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--iris-700);
}

.olist { margin-top: var(--sp-7); border-top: 1px solid var(--linie); }
.olist__item { border-bottom: 1px solid var(--linie); }
.olist__head { margin: 0; font: inherit; font-weight: 400; }

/* Randul intreg e butonul: tinta de atingere e cat linia, nu cat textul. */
.olist__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "idx nume sign" ".  pret sign";
  align-items: center;
  column-gap: var(--sp-4); row-gap: var(--sp-1);
  padding: var(--sp-5) 0;
  text-align: left;
  transition: color 320ms var(--ease-lux);
}
.olist__idx {
  grid-area: idx;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: .75rem; line-height: 1;
  color: var(--auriu);
  align-self: center;
}
.olist__name {
  grid-area: nume;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 6.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  transition: transform 420ms var(--ease-lux);
}
.olist__pret {
  grid-area: pret;
  font-size: .8125rem; letter-spacing: .06em;
  color: var(--gri-text);
}
/* Semnul plus/minus, desenat din doua linii: se roteste in minus la deschidere. */
.olist__sign {
  grid-area: sign;
  position: relative;
  width: 22px; height: 22px; flex: none;
  align-self: center;
}
.olist__sign::before, .olist__sign::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 1px; background: currentColor;
  transition: transform 420ms var(--ease-lux), opacity 320ms var(--ease-lux);
}
.olist__sign::after { transform: rotate(90deg); }
.is-open .olist__sign::after { transform: rotate(0deg); opacity: 0; }

.olist__item.is-open .olist__trigger { color: var(--iris-700); }
.olist__item.is-open .olist__pret { color: var(--iris-600); }

/* Panoul: se deschide animand grid-template-rows de la 0fr la 1fr - singura
   metoda care merge pe inaltime necunoscuta fara sa masor nimic din JS.
   `visibility` scoate continutul inchis din ordinea de tabulare si din
   cititoarele de ecran; fara ea butoanele dinauntru raman focusabile. */
.olist__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 520ms var(--ease-lux);
}
.olist__item.is-open .olist__panel { grid-template-rows: 1fr; }
.olist__inner {
  overflow: hidden; min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 520ms;
}
.olist__item.is-open .olist__inner { visibility: visible; transition-delay: 0s; }

/* Fotografiile: banda cu derulare pe telefon, grila pe ecrane late. */
.olist__shots {
  display: flex; gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--pad-x));
  padding-inline: var(--pad-x);
  padding-bottom: var(--sp-5);
}
.olist__shots::-webkit-scrollbar { display: none; }
.olist__shot {
  flex: none;
  width: 74%; max-width: 320px;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-img);
  scroll-snap-align: center;
}
.olist__body { padding-bottom: var(--sp-7); }
.olist__desc { color: var(--gri-text); max-width: 62ch; }

.olist__facts {
  margin-top: var(--sp-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5);
  max-width: 620px;
}
.ofact dt {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gri-text);
  margin-bottom: var(--sp-1);
}
.ofact dd {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: 1.125rem; line-height: 1.3;
  color: var(--cerneala);
}
.olist__cta { margin-top: var(--sp-6); }

.ocazii__cta {
  margin-top: var(--sp-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); text-align: center;
}
.ocazii__livrare { font-size: .875rem; color: var(--gri-text); }

/* ===== 7.8 ATELIER ===== */
.atelier {
  background: var(--iris-950); color: var(--alb);
  padding-block: var(--pad-y); overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.atelier__band { display: flex; gap: var(--sp-4); }
/* Pe telefon: o banda deasupra citatului si una dedesubt */
.atelier__band--a { order: 1; }
.atelier__quote  { order: 2; }
.atelier__band--b { order: 3; display: flex; }
.atelier__band .ph, .atelier__img { flex: none; width: 240px; height: 160px; object-fit: cover; border-radius: var(--radius-img); }
.atelier__quote {
  padding: var(--sp-6) var(--pad-x);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--sp-5); align-items: center;
}
.atelier__quote p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.35;
  color: var(--alb);
  max-width: 24ch;
}
.atelier__quote cite {
  font-style: normal; font-size: .75rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--iris-300);
}

/* ===== 7.8b INTREBARI FRECVENTE ===== */
/* Raspunsurile stau deschise, nu sub un acordeon: sunt scurte, sunt exact ce
   cauta omul inainte sa sune, iar o lista deschisa se citeste dintr-o privire. */
.faq__grid { margin-top: var(--sp-7); display: grid; gap: var(--sp-2); }
.faq__item {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-6) var(--sp-7);
  border-radius: var(--radius-card);
  transition: background-color 420ms var(--ease-lux);
}
/* Linia de sus nu mai e un chenar plat gri: porneste in albastrul semnaturii si
   se stinge spre dreapta. Acelasi cost ca un border, alta greutate vizuala. */
.faq__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: var(--sp-4); height: 1px;
  background: linear-gradient(to right, var(--iris-500) 0, var(--linie) 26%, transparent 100%);
  opacity: .75;
}
/* Petala e semnul de lista. Aceeasi silueta care cade in hero: intrebarile devin
   parte din marca, nu un tabel de ajutor lipit la final. */
.faq__petal {
  position: absolute; left: 0; top: calc(var(--sp-5) + .2em);
  width: 17px; height: 17px; flex: none;
  color: var(--iris-500); opacity: .5;
  transform: rotate(-14deg);
  transition: transform 560ms var(--ease-lux), opacity 420ms var(--ease-lux);
}
.faq__q {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.1875rem, 2.1vw, 1.5rem);
  line-height: 1.25;
  margin-bottom: var(--sp-3);
  transition: color 420ms var(--ease-lux);
}
.faq__a { color: var(--gri-text); font-size: .9375rem; line-height: 1.7; max-width: 52ch; }

@media (hover: hover) and (pointer: fine) {
  .faq__item:hover { background: var(--ivoriu-cald); }
  .faq__item:hover .faq__q { color: var(--iris-700); }
  /* petala se intoarce, ca si cum ar fi prins-o aerul */
  .faq__item:hover .faq__petal { transform: rotate(12deg) scale(1.14); opacity: 1; }
}

/* Finalul sectiunii: singurul panou intunecat dintr-o sectiune deschisa. Acolo
   se termina cititul, deci acolo trebuie sa fie si numarul de telefon. */
.faq__ajutor {
  margin-top: var(--sp-8);
  background: var(--iris-900); color: var(--ivoriu);
  border-radius: var(--radius-card);
  padding: var(--sp-7) var(--sp-6);
  display: grid; gap: var(--sp-6);
  box-shadow: var(--shadow-dark);
}
.faq__ajutor-titlu {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.15;
}
.faq__ajutor-sub { margin-top: var(--sp-3); color: var(--iris-100); font-size: .9375rem; line-height: 1.65; max-width: 46ch; }
.faq__ajutor-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.faq__ajutor-tel { color: var(--alb); }
.faq__ajutor-tel::after { background: var(--alb); }

/* ===== 7.9 CONTACT ===== */
.contact__grid { display: grid; gap: var(--sp-8); }
.contact__intro { margin-top: var(--sp-5); max-width: 46ch; font-size: .9375rem; }
#contact .h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.contact__list { margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); }
.crow { display: flex; align-items: flex-start; gap: var(--sp-4); }
.crow__icon { width: 24px; height: 24px; flex: none; color: var(--iris-300); margin-top: 6px; transition: transform 240ms var(--ease-lux); }
.crow dt {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: .875rem; line-height: 1.4;
  letter-spacing: .02em;
  color: var(--iris-300);
}
.crow dd {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.45;
  color: var(--alb);
  margin: 0;
}
.crow a { transition: color 240ms var(--ease-lux); }
.crow:hover .crow__icon { transform: translateX(4px); }
.crow:hover a { color: var(--iris-300); }
.contact__actions { margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); }
.contact__actions .btn { width: 100%; min-height: 48px; }
.contact__map { position: relative; }
.map {
  position: relative; height: 300px; overflow: hidden;
  border-radius: var(--radius-img); background: var(--iris-900);
}
.map .ph { position: absolute; inset: 0; border-radius: 0; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map .map__load {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  white-space: nowrap;
  transition: transform 280ms var(--ease-lux), background-color 280ms var(--ease-lux);
}
.map__load svg { width: 18px; height: 18px; }
.map .map__load:hover { transform: translateX(-50%) scale(1.04); }
.map .map__load.is-loading { opacity: .7; pointer-events: none; }
.map__load .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid currentColor; border-top-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.map__note { margin-top: var(--sp-3); font-size: .875rem; color: var(--iris-300); }
.map__msg { margin-top: var(--sp-2); font-size: .8125rem; color: var(--iris-300); opacity: .8; }

/* ===== 7.11 FOOTER ===== */
/* Subsolul vine imediat dupa Contact, tot pe fundal inchis. Fara o schimbare
   de culoare care sa justifice distanta, `--sp-9` lasa un gol mort intre ele. */
#footer { background: var(--iris-800); color: var(--alb); padding: var(--sp-8) 0 40px; }
.footer__grid { display: grid; gap: var(--sp-6); }
.footer__tag { margin-top: var(--sp-4); font-size: .875rem; color: rgba(255,255,255,.72); }
.footer__nav a, .footer__contact a, .footer__contact li {
  font-size: .875rem; color: rgba(255,255,255,.82); line-height: 2;
}
.footer__nav a, .footer__contact a { position: relative; display: inline-block; }
.footer__nav a::after, .footer__contact a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-lux);
}
.footer__nav a:hover::after, .footer__contact a:hover::after { transform: scaleX(1); }
.footer__social { margin-top: var(--sp-4); display: flex; gap: var(--sp-5); }
.footer__social a { display: flex; align-items: center; gap: var(--sp-2); color: var(--iris-300); transition: color 240ms var(--ease-lux), transform 240ms var(--ease-lux); }
.footer__social a:hover { color: var(--alb); transform: translateY(-2px); }
.footer__social svg { width: 20px; height: 20px; }
/* Identificarea firmei si linkurile legale (Legea 365/2002) */
.footer__legal {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: var(--sp-3);
  align-items: center; text-align: center;
  font-size: .8125rem; line-height: 1.7; color: rgba(255,255,255,.56);
}
.footer__firma { max-width: 68ch; margin: 0; }
.footer__firma--sec { opacity: .72; }
.footer__legal-links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2) var(--sp-4);
}
.footer__legal-links a {
  color: rgba(255,255,255,.72);
  text-decoration: underline; text-underline-offset: 3px;
}
.footer__legal-links a:hover { color: var(--alb); }
/* „Preferinte cookies” e buton, nu link: nu duce nicaieri, redeschide bannerul */
.footer__consent {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.72);
  text-decoration: underline; text-underline-offset: 3px;
}
.footer__consent:hover { color: var(--alb); }

/* Telefonul, adresa si programul: cifre de aceeasi inaltime si latime.
   Cormorant are implicit cifre "old-style", bune in text curgator, dar in
   0723 949 990 sau 08:00–20:00 sar in sus si in jos si orele nu se aliniaza. */
.crow dd { font-variant-numeric: lining-nums tabular-nums; }

/* Reperele de sub adresa: cum gasesti magazinul fara harta. Mai mic si mai stins
   decat adresa, ca adresa sa ramana primul lucru citit. */
.crow__reper {
  display: block; margin-top: .3rem; max-width: 42ch;
  font-family: Inter, system-ui, sans-serif;
  font-size: .8125rem; line-height: 1.55;
  color: rgba(255,255,255,.64);
}

/* Randul legal preia separatorul, ca sa nu apara doua linii una sub alta */
.footer__legal + .footer__bottom { margin-top: var(--sp-5); padding-top: 0; border-top: 0; }

.footer__bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; text-align: center;
  font-size: .875rem; color: rgba(255,255,255,.72);
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== 7.10 LIGHTBOX ===== */
.lb {
  position: fixed; inset: 0; z-index: 500;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  color: var(--alb);
}
.lb[hidden] { display: none; }
/* Inaltimea ferestrei e plafonata de ecran, iar fotografia ia doar spatiul ramas
   dupa text. Cand fotografia avea o inaltime fixa in vh iar textul una in pixeli,
   suma trecea de ecran pe orice laptop scund si randul de jos cadea afara. */
.lb__inner {
  width: 100%; max-width: 900px;
  max-height: 100%; min-height: 0;
  display: flex; flex-direction: column; gap: var(--sp-5); align-items: center;
  /* plasa de siguranta pentru ecranele foarte joase, unde nici textul singur nu incape */
  overflow-y: auto; overscroll-behavior: contain;
}
.lb__stage {
  width: 100%;
  /* inaltimea de mai jos e o preferinta: `flex-shrink` plus `min-height: 0` o
     lasa sa cedeze exact cat trebuie ca textul de dedesubt sa incapa */
  flex: 0 1 auto; min-height: 0;
  height: 58svh; max-height: 58svh;
  display: flex; align-items: center; justify-content: center;
}
.lb__stage .ph { flex: none; width: auto; max-width: 100%; height: 100%; aspect-ratio: 3 / 4; }
.lb__stage .ph[hidden] { display: none; }
.lb__img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-img); }
.lb__meta { flex: none; text-align: center; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; }
.lb__num { font-size: .8125rem; color: var(--iris-300); margin: 0; }
.lb__title { font-size: 1.75rem; color: var(--alb); }
.lb__desc { font-size: 1rem; color: rgba(255,255,255,.78); max-width: 60ch; }
.lb__fine { font-size: .8125rem; color: var(--iris-300); max-width: 60ch; }

/* Butonul de WhatsApp din lightbox - singurul loc din site unde vizitatorul
   se uita deja la un buchet anume, deci merita sa fie la indemana acolo. */
.lb__wa {
  margin-top: var(--sp-3);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
}
.lb__wa svg { width: 20px; height: 20px; flex: none; }
.lb__dots { display: flex; gap: 6px; margin-top: var(--sp-3); }
.lb__dots li { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); }
.lb__dots li.is-active { background: var(--iris-500); }
.lb__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
}
.lb__close svg { width: 24px; height: 24px; }
.lb__nav { display: none; }

/* ===== COMPONENTE: BUTOANE (10.4) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: .9375rem; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 16px 34px;
  border-radius: var(--radius-buton);
  min-height: 48px;
  position: relative;
  transition: background-color 280ms var(--ease-lux), color 280ms var(--ease-lux),
              transform 280ms var(--ease-lux), box-shadow 280ms var(--ease-lux);
}
.btn--primary { background: var(--iris-700); color: var(--alb); }
.btn--primary:hover { background: var(--iris-600); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn--primary:active { transform: translateY(0) scale(.985); }
.btn--on-dark { background: var(--alb); color: var(--iris-950); }
.btn--on-dark:hover { background: var(--iris-100); }

.btn--secondary {
  border: 1px solid currentColor;
  overflow: hidden;
  isolation: isolate;
  --fill: var(--alb);
  --fill-text: var(--iris-950);
}
.btn--secondary::before {
  content: ""; position: absolute; inset: 0; background: var(--fill);
  transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--ease-lux);
  z-index: -1;
}
.btn--secondary:hover::before { transform: scaleX(1); }
.btn--secondary:hover { color: var(--fill-text); }
.section--light .btn--secondary { --fill: var(--cerneala); --fill-text: var(--ivoriu); }
.header.is-scrolled .btn--secondary { --fill: var(--cerneala); --fill-text: var(--ivoriu); }

.btn--text {
  padding: 0; min-height: 44px; border-radius: 0;
  background: none; color: inherit;
  text-transform: none; letter-spacing: .02em; font-size: 1rem;
}
.btn--text::after {
  content: ""; position: absolute; left: 0; bottom: 8px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-lux);
}
.btn--text:hover::after { transform: scaleX(1); }
.btn__arrow { display: inline-block; transition: transform 240ms var(--ease-lux); }
.btn--text:hover .btn__arrow { transform: translateX(6px); }

/* ===== COMPONENTE: CURSOR PERSONALIZAT (10.5) ===== */
.cursor { display: none; }

/* ===== BUTON DE APEL RAPID (doar sub 1024px) =====
   Mic si discret: 48px, in coltul din dreapta-jos, apare abia dupa ce hero-ul a
   iesit din ecran si dispare in sectiunea de contact, unde exista deja butoane. */
.call-fab {
  position: fixed; z-index: 90;
  right: 16px; bottom: calc(16px + var(--fab-lift, 0px));
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--iris-700); color: var(--alb);
  box-shadow: 0 6px 20px rgba(7,11,31,.45);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.94);
  transition: opacity 280ms var(--ease-lux), transform 280ms var(--ease-lux),
              visibility 280ms linear, bottom 280ms var(--ease-lux);
}
.call-fab svg { width: 20px; height: 20px; }
.call-fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.call-fab:active { transform: scale(.96); }

/* ===== CONSIMȚĂMÂNT COOKIES =====
   Card mic, nu bara peste tot ecranul; nu blocheaza scroll-ul si nu are overlay. */
.consent {
  position: fixed; z-index: 400;
  left: 16px; right: 16px; bottom: 16px;
  background: var(--iris-900);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-dark);
  padding: var(--sp-5);
  color: var(--alb);
  display: flex; flex-direction: column; gap: var(--sp-4);
  opacity: 0; transform: translateY(12px);
  transition: opacity 320ms var(--ease-lux), transform 320ms var(--ease-lux);
}
.consent[hidden] { display: none; }
.consent.is-visible { opacity: 1; transform: translateY(0); }
.consent__text { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.86); margin: 0; max-width: 46ch; }
.consent__actions { display: flex; gap: var(--sp-3); }
.consent__btn {
  flex: 1;
  min-height: 44px; padding: 10px 20px;
  border-radius: var(--radius-buton);
  font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color 240ms var(--ease-lux), color 240ms var(--ease-lux), border-color 240ms var(--ease-lux);
}
.consent__btn--yes { background: var(--alb); color: var(--iris-950); }
.consent__btn--yes:hover { background: var(--iris-100); }
.consent__btn--no { border: 1px solid rgba(255,255,255,.34); color: rgba(255,255,255,.86); }
.consent__btn--no:hover { border-color: var(--alb); color: var(--alb); }
.consent__link {
  font-size: .75rem; color: var(--iris-300);
  text-decoration: underline; text-underline-offset: 3px;
  align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center;
}
.consent__link:hover { color: var(--alb); }

/* =========================================================
   MEDIA QUERIES
   ========================================================= */

/* ===== ≥ 640px - TABLETĂ ===== */
@media (min-width: 640px) {
  :root { --pad-x: 32px; --pad-y: 88px; --header-h: 76px; }

  .u-desktop { display: inline; }
  .u-mobile { display: none; }

  /* 7.3 / 7.5 Hero - semnatura pe ivoriu, fotografia banda jos.
     Cuvantul se plafoneaza si dupa inaltimea ecranului (27svh), altfel pe
     laptopurile scunde impinge butoanele sub linia de indoire. */
  .sig {
    justify-content: flex-start;
    padding-top: calc(var(--header-h) + var(--sp-6));
  }
  .sig__photo {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    height: 34svh;
  }
  .sig__photo::after { display: none; }
  .sig__word-wrap {
    position: relative; height: auto; top: auto;
    align-items: flex-start; justify-content: flex-start;
    padding: 0 var(--pad-x);
    max-width: var(--container); margin-inline: auto; width: 100%;
  }
  .sig__eyebrow { color: var(--iris-500); text-align: left; letter-spacing: .22em; font-size: .75rem; }
  /* Pe tableta cuvantul e aliniat la stanga, deci 15vw (regula de mobil, unde
     e centrat) lasa jumatate de rand gol. */
  .sig__word { text-align: left; font-size: clamp(3rem, min(19vw, 24svh), 12rem); }
  /* Fotografia din litere e UN SINGUR cadru pentru ambele randuri: JS calculeaza
     dimensiunea si originea (--sig-bg-w/h) o data pe tot blocul de text, iar
     fiecare rand isi primeste doar decalajul lui (--sig-fx/--sig-fy). Fara asta,
     `background-size: cover` decupa alta bucata de fotografie in IRIS decat in
     BLUE si literele arata ca doua taieturi fara legatura intre ele. */
  .sig__fill {
    background-image: url("../assets/images/semnatura-fundal.webp");
    background-repeat: no-repeat;
    background-size: var(--sig-bg-w, cover) var(--sig-bg-h, auto);
    background-position: var(--sig-fx, 50%) calc(var(--sig-fy, 50%) + var(--sig-drift, 0px));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .sig__white {
    display: block;
    position: absolute; inset: 0;
    color: var(--alb);
    clip-path: inset(var(--cut, 100%) 0 0 0);
  }
  .sig__copy {
    flex: 0 1 auto;
    background: none;
    max-width: var(--container); margin-inline: auto; width: 100%;
    padding: var(--sp-5) var(--pad-x) calc(34svh + var(--sp-6));
  }
  .sig__lead { max-width: 52ch; }

  /* 7.5b Fațada */
  .fatada__copy { padding-bottom: var(--sp-8); }

  /* 7.4 Despre */
  .despre__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--sp-6); row-gap: var(--sp-5);
    align-items: start;
  }
  .despre__head  { grid-column: 2; grid-row: 1; }
  .despre__media { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .despre__media .ph { aspect-ratio: 3 / 4; }
  .despre__rama { width: 78%; max-width: 430px; }
  .despre__img { aspect-ratio: 3 / 4; }
  .despre__text  { grid-column: 2; grid-row: 2; }

  /* 7.6 Galerie - carusel 360°, pinned.
     Stilurile 3D atârnă de clasa `.is-ring`, pusă din gallery.js DOAR când
     caruselul chiar poate fi construit. Fără GSAP rămâne banda cu scroll
     orizontal de mai jos, care funcționează singură. */
  /* Latimea cardului e limitata si de inaltimea ecranului: un card portret
     (3/4) plus titlul si descrierea trebuie sa incapa intre bara de progres si
     marginea de sus a viewportului, altfel caruselul iese din ecran pe laptop. */
  :root { --card-w: max(260px, min(52vw, (100svh - 250px) * 0.75)); }
  .g-card { width: var(--card-w); }

  .is-ring .gallery__viewport {
    height: 100vh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-bottom: 0;
    overflow: hidden;
  }
  .is-ring .gallery__stage {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    overflow: visible;
    scroll-snap-type: none;
    perspective: 2000px;
    perspective-origin: 50% 46%;
    cursor: grab;
  }
  .is-ring .gallery__stage.is-dragging { cursor: grabbing; }
  .is-ring .gallery__ring {
    position: relative;
    display: block;
    width: var(--card-w);
    height: 0;
    padding: 0;
    transform-style: preserve-3d;
    transform: translateZ(calc(-1 * var(--ring-r, 900px))) rotateY(var(--ring-angle, 0deg));
  }
  .is-ring .g-card {
    position: absolute; top: 0; left: 0;
    width: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateY(var(--a, 0deg)) translateZ(var(--ring-r, 900px)) translateY(-50%);
    opacity: var(--op, 1);
    filter: saturate(var(--sat, 1)) brightness(var(--bri, 1));
    scroll-snap-align: none;
  }
  .g-card__media { box-shadow: var(--shadow-dark); }
  .is-ring .g-card__title, .is-ring .g-card__desc { opacity: var(--txt-op, 1); }
  .gallery__progress { width: 100%; padding-bottom: 40px; }
  .gallery__hint { display: block; }

  /* 7.7 Ocazii */
  .olist__trigger {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "idx nume pret sign";
    column-gap: var(--sp-6);
    padding: var(--sp-6) 0;
  }
  .olist__pret { justify-self: end; font-size: .875rem; white-space: nowrap; }
  .olist__shots {
    display: grid; grid-template-columns: repeat(3, 1fr);
    overflow: visible; margin-inline: 0; padding-inline: 0;
    gap: var(--sp-4);
  }
  .olist__shot { width: 100%; max-width: none; }
  .olist__inner { display: grid; }
  .olist__facts { grid-template-columns: repeat(4, 1fr); }

  /* 7.8 Atelier */
  .atelier { display: block; position: relative; padding-block: var(--sp-9); }
  .atelier__band { padding-block: 0; }
  .atelier__band--b { display: flex; margin-top: var(--sp-4); }
  .atelier__band .ph, .atelier__img { width: 320px; height: 200px; }
  .atelier__quote {
    position: absolute; z-index: 2;
    /* Centrare cu inset + margin:auto, nu cu translate(-50%,-50%).
       Caseta are si clasa `.reveal`, iar GSAP isi scrie propriul `transform` pe
       ea ca s-o animeze; transformarea din CSS ar fi stearsa si caseta ar sari
       in jos si la dreapta. Asa centrarea nu depinde de transform. */
    inset: 0; margin: auto;
    width: min(88%, 720px); height: max-content;
    background: var(--iris-950);
    padding: var(--sp-7);
  }

  /* 7.8b Intrebari - doua coloane: opt raspunsuri unul sub altul fac sectiunea
     de doua ecrane inaltime degeaba. */
  .faq__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); }

  /* 7.9 Contact */
  .contact__actions { flex-direction: row; flex-wrap: wrap; }
  .contact__actions .btn { width: auto; }
  .map { height: 380px; }

  /* 7.10 Lightbox */
  .lb__stage { height: 62vh; max-height: 62vh; }
  .lb__dots { display: none; }
  .lb__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; color: var(--alb);
  }
  .lb__nav svg { width: 28px; height: 28px; }
  .lb__nav--prev { left: 20px; }
  .lb__nav--next { right: 20px; }
  .lb__close { top: 20px; right: 20px; }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ===== ≥ 1024px - DESKTOP ===== */
@media (min-width: 1024px) {
  :root { --pad-x: 48px; --pad-y: 112px; --header-h: 88px; }

  .u-br-desktop { display: inline; }
  /* Randul de deasupra semnaturii sta pe jumatatea ivorie, care se termina unde
     incepe fotografia (--photo-left, calculat in JS). Cu adresa completa nu mai
     incape pe un rand: pe desktop se rupe in doua, iar punctul de legatura dispare. */
  .sig__sep { display: none; }

  /* 7.2 Header */
  /* Pe hero, fotografia ocupa jumatatea din dreapta, iar bara de navigatie cade
     peste ea. Colorata uniform in cerneala, „Despre" disparea complet peste
     copacul intunecat, iar butonul avea contur negru pe fotografie.
     Bara urmeaza acum compozitia hero-ului: sigla ramane cerneala, pe ivoriul
     din stanga; linkurile si butonul trec pe alb, peste fotografie. */
  .header:not(.is-scrolled) .nav,
  .header:not(.is-scrolled) .header__cta { color: var(--alb); }
  .header:not(.is-scrolled) .nav__link.is-active { color: var(--iris-100); }
  .header:not(.is-scrolled) .nav__link.is-active::after { background: var(--iris-100); }
  .header:not(.is-scrolled) .btn--secondary { --fill: var(--alb); --fill-text: var(--cerneala); }

  /* Albul singur n-ar ajunge: fotografia are si zone deschise (peretele casei,
     fereastra luminata). Un voal subtire doar peste jumatatea din dreapta face
     contrastul sigur indiferent ce se afla dedesubt. Masca il topeste pe
     orizontala, ca sa nu apara nicio dunga la marginea ivoriului. */
  .header:not(.is-scrolled)::before {
    opacity: 1;
    height: 150px;
    background: linear-gradient(180deg, rgba(7,11,31,.60) 0%, rgba(7,11,31,.20) 62%, rgba(7,11,31,0) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 58%);
    mask-image: linear-gradient(90deg, transparent 40%, #000 58%);
  }


  .header { height: 88px; }
  .header.is-scrolled { height: 68px; }
  .header__inner { justify-content: flex-start; }
  .nav { display: block; margin-left: auto; }
  .nav__list { gap: 32px; }
  .header .header__cta { display: inline-flex; margin-left: 32px; padding: 12px 24px; min-height: 44px; }
  .burger { display: none; }
  .brand__mark { width: 48px; height: 48px; }
  .brand__bottom { font-size: 1.375rem; }

  /* 7.4 Despre */
  .despre__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--sp-6); }
  .despre__head  { grid-column: 7 / span 6; grid-row: 1; }
  .despre__media { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .despre__text  { grid-column: 7 / span 6; grid-row: 2; }
  /* Fotografia urmareste derularea si se opreste odata cu textul: coloana ei
     tine ambele randuri, deci lipirea se termina exact unde se termina coloana
     din dreapta. `align-self: start` e obligatoriu - altfel grila intinde
     elementul pe toata inaltimea si sticky n-are pe ce sa alunece.

     Inaltimea fotografiei e fixata aici, nu lasata pe seama latimii coloanei:
     doar asa se poate calcula marginea de sus incat sa stea pe centrul
     ecranului cat timp aluneca. */
  .despre__media {
    --foto-h: min(56svh, 560px);
    position: sticky;
    top: calc((100svh - var(--foto-h)) / 2);
    align-self: start;
  }
  .despre__rama {
    width: max-content; max-width: 100%;
    margin-inline: auto;
  }
  .despre__img {
    display: block;
    height: var(--foto-h);
    width: auto; max-width: 100%;
    aspect-ratio: 3 / 4;
  }


  /* 7.5 Hero / Semnătura - fotografie în jumătatea dreaptă, litere peste ivoriu */
  /* Cuvantul, eyebrow-ul si textul stau intr-o singura coloana din stanga,
     centrata vertical - asa textul nu poate cadea niciodata peste litere.
     Marginea din stanga a fotografiei o pozitioneaza JS (--photo-left), ca
     suprapunerea peste litere sa fie aceeasi la orice latime de ecran. */
  .sig {
    min-height: 100vh; min-height: 100svh;
    /* justify-content: start este obligatoriu - altfel coloana mosteneste
       flex-start de la tableta si tot blocul sare in dreapta. */
    display: grid; align-content: center; justify-content: start;
    padding: calc(var(--header-h) + var(--sp-5)) 0 var(--sp-8) 6%;
    overflow: hidden;
  }
  /* Ca in referinta Lara & Oak: fotografia curge pana la marginile sectiunii,
     fara rotatie, iar cuvantul intra peste ea cu aproximativ o litera. */
  /* Marginea din stanga a fotografiei o fixeaza JS (--photo-left) exact pe
     spatiul dintre doua litere, ca taietura sa nu treaca niciodata prin
     mijlocul uneia. Fara JS ramane 42%, ca inainte. */
  .sig__photo {
    position: absolute; left: var(--photo-left, 42%); right: 0; top: 0; bottom: 0;
    height: auto;
    transform: none;
    border-radius: 0;
  }
  .sig__photo picture, .sig__photo img { height: 100%; border-radius: 0; }
  /* Pe desktop nu mai e nevoie de voal: literele albe cad pe o fotografie
     deja intunecata, iar cele umplute cu fotografie stau pe ivoriu. */
  .sig__photo::after { display: none; }
  .sig__word-wrap {
    position: static; transform: none;
    align-items: flex-start; justify-content: flex-start;
    padding: 0; margin: 0; width: auto; max-width: none;
    z-index: 2;
  }
  /* Plafonul de 27svh tine cele doua randuri, textul si butoanele intr-un
     singur ecran si pe laptopurile de 900px inaltime. */
  .sig__word { font-size: clamp(4rem, min(15vw, 27svh), 20rem); }
  .sig__white { clip-path: inset(0 0 0 var(--cut, 100%)); }
  .sig__copy {
    position: static; z-index: 3;
    flex: none;
    background: none; padding: var(--sp-6) 0 0; max-width: 38ch; width: auto; margin: 0;
  }
  .sig__lead { max-width: 38ch; }

  /* 7.5b Fațada */
  .fatada { height: clamp(620px, 96svh, 1040px); }
  .fatada__line { font-size: clamp(1.25rem, 1.5vw, 1.625rem); max-width: 40ch; }

  /* 7.6 Galerie */
  /* Cap editorial: eticheta si indicatia de derulare incadreaza latimea sus,
     dedesubt titlul in stanga si nota in dreapta, aliniate la baza. Inainte tot
     capul statea in primii 550px dintr-un container de 1320, cu restul gol. */
  .gallery__head {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--sp-6);
    align-items: end;
  }
  .gallery__eyebrow { grid-column: 1 / span 6; grid-row: 1; }
  .gallery__hint {
    grid-column: 9 / span 4; grid-row: 1;
    margin: 0; text-align: right; align-self: center;
  }
  /* Latimea o da coloana, nu o limita in `ch`: asa titlul se rupe unde trebuie,
     nu dupa prepozitie. */
  #galerie-title { grid-column: 1 / span 6; grid-row: 2; max-width: none; }
  .gallery__aside { grid-column: 8 / span 5; grid-row: 2; padding-bottom: .35em; }
  .gallery__note { margin-top: 0; }

  :root { --card-w: max(260px, min(33vw, (100svh - 250px) * 0.75)); }
  .is-ring .gallery__stage { padding-block: var(--sp-5); }

  /* 7.7 Ocazii */
  .olist__trigger { padding: var(--sp-7) 0; }
  .olist__name { font-size: clamp(2rem, 3.6vw, 3.25rem); }
  /* Randul se muta putin la dreapta la hover: singurul semn ca e apasabil,
     fiindca fotografia de langa cursor spune deja restul. */
  @media (hover: hover) and (pointer: fine) {
    .olist__trigger:hover .olist__name { transform: translateX(var(--sp-4)); }
    .olist__trigger:hover { color: var(--iris-700); }
  }
  .olist__inner { grid-template-columns: 5fr 7fr; column-gap: var(--sp-7); align-items: start; }
  .olist__shots { grid-template-columns: 1fr 1fr; padding-bottom: var(--sp-7); }
  /* Prima fotografie tine toata coloana din stanga; celelalte doua stau sub ea. */
  .olist__shot:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .olist__facts { grid-template-columns: 1fr 1fr; max-width: none; }

  /* 7.8 Atelier */
  /* Fotografiile din banda stau stinse si se aprind sub indicator. Diferenta de
     dinainte (.85 -> 1 pe saturare) era prea mica ca sa se vada in trecere. */
  .atelier__band .ph, .atelier__img {
    width: 400px; height: 260px;
    filter: saturate(.62) brightness(.82);
    transition: filter 420ms var(--ease-lux), transform 420ms var(--ease-lux);
  }
  .atelier__band .ph:hover, .atelier__img:hover {
    filter: saturate(1.08) brightness(1.06);
    transform: scale(1.04);
  }
  .atelier__quote { width: 560px; padding: 48px; }

  /* 7.8b Intrebari */
  .faq__grid { gap: var(--sp-4) var(--sp-8); }
  .faq__ajutor {
    grid-template-columns: 1fr auto; align-items: center;
    gap: var(--sp-8); padding: var(--sp-8) var(--sp-8);
  }

  /* 7.9 Contact */
  .contact__grid { grid-template-columns: repeat(12, 1fr); gap: var(--sp-6); }
  .contact__info { grid-column: 1 / span 5; }
  .contact__map { grid-column: 7 / span 6; }
  .map { height: 460px; }

  /* Footer */
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-7); }

  /* 7.10 Lightbox */
  .lb__stage { height: min(62vh, 760px); max-height: min(62vh, 760px); }
  .lb__close { top: 32px; right: 32px; }
  .lb__nav--prev { left: 32px; }
  .lb__nav--next { right: 32px; }

  /* Butonul de apel exista doar pe ecrane fara bara de navigatie completa */
  .call-fab { display: none; }
  .consent {
    /* pe desktop sta in dreapta: in stanga ar acoperi butonul principal din hero */
    right: 32px; left: auto; bottom: 32px;
    max-width: 400px;
    flex-direction: row; flex-wrap: wrap; align-items: center;
  }
  .consent__text { flex: 1 1 100%; }
  .consent__actions { flex: 1 1 auto; }
  .consent__btn { flex: 0 0 auto; }
  .consent__link { flex: 1 1 100%; min-height: 0; }

  /* 10.5 Cursor personalizat */
  .cursor { display: block; pointer-events: none; opacity: 0; transition: opacity 200ms linear; }
  .cursor.is-ready { opacity: 1; }
  .cursor__dot, .cursor__ring {
    position: fixed; top: 0; left: 0; z-index: 900;
    border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%);
  }
  .cursor__dot { width: 12px; height: 12px; background: var(--iris-500); transition: opacity 200ms linear; }
  .cursor__ring {
    width: 34px; height: 34px; border: 1px solid var(--iris-500);
    display: flex; align-items: center; justify-content: center;
    transition: width 280ms var(--ease-lux), height 280ms var(--ease-lux), background-color 280ms var(--ease-lux);
  }
  .cursor__label {
    font-size: .625rem; font-weight: 500; letter-spacing: .2em; color: var(--alb);
    opacity: 0; transition: opacity 200ms linear;
  }
  .cursor.is-link .cursor__ring { width: 52px; height: 52px; }
  .cursor.is-link .cursor__dot { opacity: 0; }
  .cursor.is-card .cursor__ring { width: 72px; height: 72px; background: rgba(76,95,230,.18); }
  .cursor.is-card .cursor__label { opacity: 1; }
  .cursor.is-card .cursor__dot { opacity: 0; }
}

/* ===== ≥ 1600px - DESKTOP MARE ===== */
@media (min-width: 1600px) {
  .is-ring .gallery__ring { width: var(--card-w, 28vw); }
}

/* ===== < 640px - ZONE DE ATINGERE (11: minim 44px) ===== */
@media (max-width: 639px) {
  /* Linkurile din footer si valorile de contact sunt tinte de atingere reale,
     nu doar text - cresc pe verticala, iar linia de subliniere le urmeaza. */
  .footer__nav a, .footer__contact a { padding-block: 8px; }
  .footer__nav a::after, .footer__contact a::after { bottom: 8px; }
  .footer__social a { min-height: 44px; }
  .footer__bottom a { display: inline-block; padding-block: 14px; }
  .footer__legal-links a, .footer__consent { display: inline-block; padding-block: 10px; }
  .crow dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ===== Ecran jos (laptop scund, telefon în landscape) =====
   Fereastra de buchet e singura compozitie din site care aduna fotografie plus
   patru randuri de text intr-un singur ecran. Sub 720px inaltime isi strange
   spatierile, ca fotografia sa nu ramana un timbru. */
@media (max-height: 720px) {
  .lb { padding: var(--sp-2); }
  .lb__inner { gap: var(--sp-3); }
  .lb__title { font-size: 1.35rem; }
  .lb__desc { font-size: .9375rem; }
  .lb__wa { margin-top: var(--sp-2); }
  .lb__dots { margin-top: var(--sp-2); }
}

/* ===== Telefon în landscape (11) ===== */
@media (max-height: 500px) and (orientation: landscape) {
  /* Ecran foarte jos: fotografia din hero se strange la o banda, ca textul si
     butoanele sa ramana deasupra liniei de indoire. */
  .sig { height: auto; min-height: 100svh; padding-top: calc(var(--header-h) + var(--sp-4)); }
  .sig__photo { height: 26svh; }
  .sig__word-wrap { height: 26svh; }
  .sig__word { font-size: clamp(2.5rem, 11vw, 6rem); }
  .sig__copy { padding-block: var(--sp-4) var(--sp-5); }
}

/* ===== Fără hover (touch) ===== */
@media (hover: none) {
  .g-card__zoom { background: rgba(7,11,31,.5); }
}

/* =========================================================
   10.7 prefers-reduced-motion - ULTIMUL BLOC
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
  .hero__petals, .cursor { display: none; }

  /* Galeria devine grilă verticală, fără pin și fără 3D */
  .gallery__viewport { height: auto; display: block; overflow: visible; padding-bottom: var(--pad-y); }
  .gallery__stage { display: block; perspective: none; overflow: visible; }
  .gallery__ring {
    display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
    width: 100%; height: auto;
    max-width: var(--container); margin-inline: auto;
    padding-inline: var(--pad-x);
    transform: none;
  }
  .g-card {
    position: static; width: 100%;
    transform: none; opacity: 1; filter: none;
  }
  .gallery__progress { display: none; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 640px) {
  .gallery__ring { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   PAGINI LEGALE (confidentialitate, cookies)
   Structura simpla, aceleasi culori si fonturi ca pagina principala.
   ========================================================= */
.legal-page { background: var(--ivoriu); color: var(--cerneala); }

.legal-head {
  background: var(--iris-950); color: var(--alb);
  padding-block: var(--sp-6);
}
.legal-head .brand { color: var(--alb); }
.legal-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.legal-back {
  color: rgba(255,255,255,.78); font-size: .875rem;
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.legal-back:hover { color: var(--alb); }

.legal {
  max-width: 76ch; margin-inline: auto;
  padding-block: var(--sp-8);
}
.legal h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0 0 var(--sp-3);
}
.legal__actualizat { font-size: .875rem; color: var(--gri-text); margin: 0 0 var(--sp-6); }
.legal h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.25; margin: var(--sp-7) 0 var(--sp-3);
}
.legal h3 { font-size: 1rem; font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
.legal p, .legal li { color: var(--gri-text); }
.legal p { margin: 0 0 var(--sp-3); }
.legal ul { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
.legal li { margin-bottom: var(--sp-2); }
.legal a { color: var(--iris-700); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--iris-500); }
.legal strong { color: var(--cerneala); font-weight: 600; }
.legal__intro { font-size: 1.0625rem; color: var(--cerneala); }

/* Tabelul cu temeiurile legale are cinci coloane si nu incape in coloana de text
   (76ch). Iese din ea pana la latimea containerului, iar pe ecrane inguste se
   deruleaza pe orizontala in propria caseta - pagina nu se misca. */
.legal__tabel-wrap {
  overflow-x: auto;
  margin: 0 0 var(--sp-5);
  width: min(100%, 100vw - 2 * var(--pad-x));
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .legal__tabel-wrap {
    width: min(1040px, 100vw - 2 * var(--pad-x));
    margin-left: 50%; transform: translateX(-50%);
  }
}
.legal table {
  border-collapse: collapse; width: 100%; min-width: 720px;
  font-size: .9375rem;
}
.legal th, .legal td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.legal th { color: var(--cerneala); font-weight: 600; white-space: nowrap; }
.legal td { color: var(--gri-text); }

.legal__caseta {
  background: var(--ivoriu-cald);
  border-left: 3px solid var(--auriu);
  border-radius: var(--radius-card);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.legal__caseta p:last-child { margin-bottom: 0; }

.legal-foot {
  background: var(--iris-950); color: rgba(255,255,255,.66);
  padding-block: var(--sp-6); font-size: .875rem; text-align: center;
}
.legal-foot a { color: rgba(255,255,255,.82); text-decoration: underline; text-underline-offset: 3px; }
.legal-foot p { margin: 0 0 var(--sp-2); }
.legal-foot p:last-child { margin-bottom: 0; }