/* ============================================================
   MAYA DIGITAL — HOME (full-screen lateral slider)
   ============================================================

   LIQUID GLASS — cum e construit, în două locuri din pagină
   ------------------------------------------------------------
   Sticla nu are cum să se vadă singură. `backdrop-filter` ia ce e
   DEJA desenat în spatele elementului și îl deformează; pe fundal
   alb, un alb estompat rămâne tot alb — adică nimic. Deci fiecare
   efect de sticlă din pagină are nevoie de două straturi:

     1. un strat de CULOARE dedesubt (pete radiale în albastrul și
        mintul brandului, difuzate tare cu `filter: blur()`);
     2. peste el, SUPRAFAȚA DE STICLĂ, cu `backdrop-filter:
        blur() saturate()`, care estompează și intensifică
        culoarea de dedesubt, plus un gradient translucid propriu
        care dă senzația de grosime.

   Cele două locuri:

   A) IMAGINEA DE FUNDAL A HERO-ULUI
      Literele MAYA erau construite in browser, ca forme mascate cu
      sticla deasupra. Nu mai sunt: hero-ul foloseste acum doua
      imagini gata randate (assets/img/*-background.webp), in care
      sticla e reala, nu simulata. Regulile aferente au fost sterse.

   B) FUNDALUL ÎNTREGII PAGINI  (vezi „.page-aurora" și „.page-glass")
      Două `div`-uri fixe, declarate o singură dată în index.html,
      sub tot conținutul:
        .page-aurora = petele de brand, difuzate, animate lent;
        .page-glass  = foaia de sticlă mată peste ele.
      Fiind `position:fixed`, culoarea nu „fuge" odată cu
      secțiunile la derulare, iar blurul se calculează o singură
      dată pentru toată pagina, nu de fiecare secțiune în parte.
      Stau la z-index negativ, adică sub conținut, dar peste
      fundalul alb — care oricum se propagă pe pânza browserului,
      nu rămâne pe `body`.

   Reguli de respectat dacă se umblă aici
   ------------------------------------------------------------
   · Un strat cu `backdrop-filter` trebuie să fie DEASUPRA sursei
     de culoare, nu fratele ei mai vechi — altfel nu are ce prelua.
   · Nu pune `opacity`, `filter` sau `mask` pe un părinte comun:
     acestea creează un „backdrop root" și taie sticla de la sursă.
   · Nimic opac deasupra straturilor. De-aia au fundal alb
     TRANSLUCID cardurile de testimoniale (.tst), iar
     `.hero` a rămas fără fundal propriu: cu alb plin, fiecare
     dintre ele acoperea exact zona în care trebuia să se vadă
     sticla.
   · `backdrop-filter` lipsește pe browsere vechi și efectul devine
     invizibil, nu doar mai urât — de aceea literele au o rezervă
     în `@supports not (...)`, cu gradientul brandului aplicat direct.
   · Nu folosi z-index NEGATIV pentru straturi: pe unele combinatii de
     stivuire ajung sub fundalul paginii si dispar complet. Stau la
     z-index:0, iar sectiunile — pozitionate si mai jos in DOM — raman
     oricum deasupra.
   · Blurul e scump la redesenare: ține valorile în `clamp()`, ca pe
     ecrane mici să scadă, și oprește animațiile la
     `prefers-reduced-motion`. Pe ≤820px, `.page-glass` renunță de
     tot la `backdrop-filter` — un strat cât tot ecranul s-ar
     recalcula la fiecare cadru de scroll, iar aurora e oricum deja
     difuzată, așa că vălul alb singur arată aproape la fel.
   ============================================================ */

/* ---- Fixed chrome ---- */
.chrome{position:fixed;inset:0;z-index:40;pointer-events:none}
.chrome > *{pointer-events:auto}

/* logo top-left */
/* Antetul nu are banda proprie: logo-ul si butonul de meniu stau direct peste
   continut. S-a incercat o foaie de sticla in spatele lor si a fost scoasa —
   oricat de transparenta, tot se citea ca o dunga peste pagina. */
/* Logo-ul are aceeasi marime peste tot: si pe hero, si dupa derulare, si pe
   celelalte pagini. Marimea vine din --logo-h, in global.css. */
.brandmark{position:fixed;top:clamp(18px,2.6vh,30px);left:var(--gutter);z-index:58}
/* meniul e la z-index 55: logo-ul ramane deasupra, dar fiind negru trebuie
   inversat ca sa se vada pe fundalul intunecat */
.brandmark img{position:relative;height:var(--logo-h);width:auto;
  transition:filter var(--dur) var(--ease)}
/* meniul deschis e bleu deschis: logo-ul alb ar disparea in el */
body.nav-open .brandmark img{filter:invert(1) brightness(.1)}

/* Pe hero, fundalul e albastru: intreg chrome-ul din stanga si dreapta trece
   pe alb. Pe celelalte sectiuni, deschise, revine la culorile normale. */
body.on-hero .side-nav a{color:rgba(var(--alb-rgb),.8)}
body.on-hero .side-nav a:hover{color:var(--invert-fg)}
body.on-hero .side-nav a.active{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--invert-fg);
}
/* Pe hero, bulinele isi pastreaza gradientul — se vad bine si pe albastru.
   Inainte deveneau transparente, iar cea activa alba plina, ceea ce anula
   complet culoarea si arata ca o pastila alba. */
body.on-hero .side-nav a .dot{
  background:linear-gradient(135deg,var(--brand-mint),var(--invert-fg));
}
body.on-hero .side-nav a.active .dot{
  background:linear-gradient(135deg,var(--brand-mint),var(--brand-500));
}
body.on-hero .side-nav a .line{background:rgba(var(--alb-rgb),.5)}
body.on-hero .side-nav a.active .line{
  background:linear-gradient(90deg,transparent 0%,var(--invert-fg) 18%,rgba(var(--alb-rgb),.7) 82%,transparent 100%);
}
body.on-hero .side-nav .rail{
  background:linear-gradient(180deg,transparent 0%,rgba(var(--alb-rgb),.7) 24%,rgba(var(--alb-rgb),.4) 76%,transparent 100%);
}
body.on-hero .side-nav .rail-fill{background:linear-gradient(180deg,var(--invert-fg),rgba(var(--alb-rgb),.6))}
body.on-hero .lang-switch button{color:rgba(var(--alb-rgb),.72)}
body.on-hero .lang-switch button.active{color:var(--invert-fg)}
body.on-hero .lang-switch .sep{color:rgba(var(--alb-rgb),.4)}
body.on-hero .scroll-hint{color:rgba(var(--alb-rgb),.8)}
/* acelasi halo ca sub literele MAYA, la scara logo-ului.
   z-index:-1 il tine sub logo, dar in interiorul lui .brandmark, care e
   deja context de stivuire (position:fixed + z-index). */
.brandmark::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:210%;aspect-ratio:2.4/1;
  background:var(--brand-halo);
  filter:blur(clamp(10px,1.7vw,26px));
  opacity:.85;
}


/* language switch (left of hamburger) */
.lang-switch{
  position:fixed;top:clamp(16px,2.4vh,26px);
  right:calc(var(--gutter) + var(--ctrl-size) + clamp(10px,1.2vw,18px));
  height:var(--ctrl-size);z-index:60;display:flex;align-items:center;gap:3px;
}
.lang-switch button{
  font-size:.82rem;font-weight:300;letter-spacing:.14em;color:var(--muted);
  padding:6px 5px;transition:color var(--dur) var(--ease);
}
.lang-switch button.active{color:var(--fg)}
.lang-switch .sep{color:var(--line);font-size:.8rem}
body.nav-open .lang-switch button{color:rgba(var(--alb-rgb),.55)}
body.nav-open .lang-switch button.active{color:var(--invert-fg)}
body.nav-open .lang-switch .sep{color:rgba(var(--alb-rgb),.3)}

/* hamburger top-right */
.menu-toggle{
  position:fixed;top:clamp(16px,2.4vh,26px);right:var(--gutter);z-index:60;
}
.menu-toggle .bars{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.menu-toggle .bars{position:relative;z-index:1}
.menu-toggle .bars span{display:block;width:.95rem;height:1.5px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s var(--ease),background var(--dur) var(--ease)}
/* cu meniul deschis fundalul e negru: butonul se inverseaza */
body.nav-open .menu-toggle{background:transparent;border-color:rgba(var(--alb-rgb),.55);color:var(--invert-fg)}
body.nav-open .menu-toggle::before{background:var(--invert-fg)}
body.nav-open .menu-toggle:hover{color:var(--fg);border-color:var(--invert-fg)}
body.nav-open .menu-toggle .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.nav-open .menu-toggle .bars span:nth-child(2){opacity:0}
body.nav-open .menu-toggle .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---- Halo de brand in spatele grupurilor de controale ----
   Butoanele (.ctrl-btn) isi folosesc deja ::before pentru umplerea de la
   hover si ::after pentru linia de accent, deci nu mai am pseudo-elemente
   libere pe ele. De aceea haloul e un element propriu, pozitionat fix sub
   fiecare grup. z-index:44 il tine sub controale (45 si 60) si sub meniul
   overlay (55), dar peste continutul paginii. */
.chrome-halo{
  position:fixed;z-index:44;pointer-events:none;
  background:var(--brand-halo);
  filter:blur(clamp(12px,2vw,30px));
  opacity:.8;
}
/* sus dreapta: RO/EN + butonul de meniu */
.halo-menu{
  top:calc(clamp(16px,2.4vh,26px) + var(--ctrl-size) / 2);
  right:var(--gutter);
  width:clamp(12rem,20vw,18rem);aspect-ratio:2.6/1;
  transform:translate(22%,-50%);
}
/* jos dreapta: sagetile prev / next */
.halo-ctrl{
  bottom:calc(clamp(22px,4vh,40px) + var(--ctrl-size) / 2);
  right:var(--gutter);
  width:clamp(11rem,18vw,16rem);aspect-ratio:2.6/1;
  transform:translate(18%,50%);
}
/* cu meniul deschis, fundalul negru inghite haloul de sus */
body.nav-open .halo-menu{opacity:0}
/* pe telefon sagetile sunt ascunse, deci si haloul lor */
@media (max-width:820px){ .halo-ctrl{display:none} }

/* ---- Lateral section menu (desktop) ---- */
.side-nav{
  position:fixed;top:50%;right:var(--gutter);transform:translateY(-50%);
  z-index:45;display:flex;flex-direction:column;gap:1.15rem;
}
.side-nav{padding-left:22px}
/* rail vertical fin + fill portocaliu care crește în jos/sus după navigare */
.side-nav .rail{position:absolute;left:4px;top:0;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(180deg, transparent 0%, var(--brand-500) 24%, var(--brand-300) 76%, transparent 100%);opacity:.5}
.side-nav .rail-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;transition:height .55s var(--ease);
  background:linear-gradient(180deg, var(--brand-500), var(--brand-300))}
.side-nav a{
  position:relative;display:flex;flex-direction:column;gap:.5rem;
  font-size:.82rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-2);transition:color var(--dur) var(--ease);
}
/* Bulinele poarta gradientul liniei din hero — bleu spre vernil — si pulseaza
   incet, decalat una fata de alta, ca un val care coboara pe rail. */
.side-nav a .dot{
  position:absolute;left:-21px;top:50%;
  width:8px;height:8px;border-radius:50%;border:0;
  background:linear-gradient(135deg,var(--brand-500) 15%,var(--brand-mint) 100%);
  transform:translateY(-50%);
  animation:dotPuls 3s var(--ease) infinite;
  transition:box-shadow var(--dur) var(--ease);
}
@keyframes dotPuls{
  0%,100%{transform:translateY(-50%) scale(1);opacity:.42}
  50%    {transform:translateY(-50%) scale(1.28);opacity:.85}
}
.side-nav a:nth-of-type(1) .dot{animation-delay:0s}
.side-nav a:nth-of-type(2) .dot{animation-delay:.18s}
.side-nav a:nth-of-type(3) .dot{animation-delay:.36s}
.side-nav a:nth-of-type(4) .dot{animation-delay:.54s}
.side-nav a:nth-of-type(5) .dot{animation-delay:.72s}
.side-nav a .line{width:34px;height:1px;background:var(--line);transition:width var(--dur) var(--ease),background var(--dur) var(--ease)}
.side-nav a:hover{color:var(--fg)}
.side-nav a:hover .dot{opacity:1}
.side-nav a.active{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* cea activa pulseaza mai apasat, cu un inel care se deschide */
.side-nav a.active .dot{animation:dotPulsActiv 2.2s var(--ease) infinite}
@keyframes dotPulsActiv{
  0%,100%{transform:translateY(-50%) scale(1.1);opacity:1;
    box-shadow:0 0 0 2px rgba(var(--brand-rgb),.35),0 0 10px rgba(var(--mint-rgb),.55)}
  50%    {transform:translateY(-50%) scale(1.35);opacity:1;
    box-shadow:0 0 0 7px rgba(var(--brand-rgb),0),0 0 18px rgba(var(--mint-rgb),.8)}
}
@media (prefers-reduced-motion:reduce){
  .side-nav a .dot,.side-nav a.active .dot{animation:none;opacity:.6}
  .side-nav a.active .dot{opacity:1}
}
.side-nav a.active .line{width:54px;
  background:linear-gradient(90deg, transparent 0%, var(--brand-500) 18%, var(--brand-300) 82%, transparent 100%)}

/* ---- Slider mechanics ---- */
.slider{height:100svh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.slider::-webkit-scrollbar{width:0;display:none}
.slider{scrollbar-width:none}
.slide{min-height:100svh;height:auto;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;align-items:center}
/* Ecrane mici pe verticală: renunță la snap rigid, lasă conținutul să respire.
   `min-width:821px` nu e decorativ. Fără el, blocul ăsta se aplica și pe
   telefoane — aproape orice telefon are sub 820px înălțime utilă, după ce
   browserul își ia barele — și se bătea cap în cap cu blocul după lățime de
   mai jos, care stabilește ritmul pe telefon. Aveau aceeași specificitate,
   deci câștiga doar cel scris mai jos în fișier: o regulă corectă din
   întâmplare, care s-ar fi rupt la prima reordonare. Aici e doar desktop. */
@media (max-height:820px) and (min-width:821px){
  .slider{scroll-snap-type:none}
  .slide{scroll-snap-stop:normal;padding-block:clamp(56px,7vh,90px)}
  .slide.hero{padding-block:0}
  .slide-inner{padding-block:0}
}

/* ---- Controale: prev / next (dreapta jos) + inapoi sus (stanga jos) ----
   Aceeasi geometrie ca UI-ul de cookie-uri: patrat, muchie de 1px,
   umplere care urca de jos la hover. Totul in rem, deci scaleaza fluid. */
.slider-ctrl{
  position:fixed;right:var(--gutter);bottom:clamp(22px,4vh,40px);z-index:45;
  display:flex;gap:clamp(8px,1.2vw,14px);
}

.ctrl-btn{
  position:relative;overflow:hidden;
  width:var(--ctrl-size);height:var(--ctrl-size);
  display:grid;place-items:center;
  /* material aqua-glass (vezi global.css) */
  background:linear-gradient(160deg, rgba(var(--alb-rgb),.66) 0%, rgba(var(--alb-rgb),.24) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(185%);
          backdrop-filter:blur(16px) saturate(185%);
  border:1px solid rgba(var(--alb-rgb),.72);border-radius:0;color:var(--fg);
  box-shadow:
    inset 0 1px 0 rgba(var(--alb-rgb),.95),
    inset 0 -10px 20px -14px rgba(var(--umbra-rgb),.3),
    0 10px 26px -12px rgba(var(--umbra-rgb),.34);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
}
/* umplerea neagra intra de jos */
/* reflexia diagonala — semnul dupa care se recunoaste sticla */
.ctrl-btn::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,
    rgba(var(--alb-rgb),0) 30%, rgba(var(--alb-rgb),.55) 46%,
    rgba(var(--alb-rgb),.1) 56%, rgba(var(--alb-rgb),0) 70%);
  transform:translateX(-30%);
  transition:transform .7s var(--ease);
}
.ctrl-btn:hover:not(:disabled)::before{transform:translateX(30%)}
.ctrl-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(var(--alb-rgb),1),
    inset 0 -10px 20px -14px rgba(var(--umbra-rgb),.24),
    0 16px 34px -14px rgba(var(--umbra-rgb),.42);
}
.ctrl-btn:active:not(:disabled){transform:translateY(0)}

/* Sagetile de navigare, umplute cu gradientul brandului: bleu spre vernil.
   Iconita ramane INCHISA — pe #7ab8fe si #a1fefa, albul da un contrast sub
   3:1, adica o sageata pe care n-o vezi. */
/* Butonul de meniu poartă exact aceeași haină ca săgețile: sunt controale de
   navigare de același rang, doar în colțuri diferite ale ecranului. */
.slider-ctrl .ctrl-btn,
.menu-toggle{
  background:linear-gradient(160deg, rgba(var(--mint-rgb),.88) 0%, rgba(var(--brand-rgb),.74) 100%);
  border-color:rgba(var(--alb-rgb),.78);color:var(--invert-fg);
}
.slider-ctrl .ctrl-btn:disabled{background:var(--bg-soft);color:var(--muted-2);opacity:1}
/* linie de accent in gradientul brandului, sus, la hover */
.ctrl-btn::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-mint));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.ctrl-btn:hover:not(:disabled)::after{transform:scaleX(1)}

.ctrl-btn svg{
  position:relative;z-index:1;
  width:.85rem;height:.85rem;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:square;
  transition:transform var(--dur) var(--ease);
}
.ctrl-btn:disabled{opacity:.3;cursor:default;border-color:var(--line)}
/* .ctrl-btn pune position:relative si e definit mai jos in fisier;
   controalele fixate si-o iau inapoi ca sa nu cada din pozitie */
.menu-toggle{position:fixed}
/* fiecare sageata se misca in directia ei */
#prevSlide:hover:not(:disabled) svg{transform:translateY(-3px)}
#nextSlide:hover:not(:disabled) svg{transform:translateY(3px)}

/* scroll hint */
.scroll-hint{
  position:absolute;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
}
.scroll-hint .stem{width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint .stem::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--fg);animation:scrolldot 1.9s var(--ease) infinite}
@keyframes scrolldot{0%{top:-50%}60%,100%{top:100%}}

/* Filigranul de secțiune a fost scos. Clasele `has-wm` / `wm-*` nu erau puse
   pe niciun element din pagină, dar regulile țineau în viață trei bannere PNG
   de 4,5 MB, care ajungeau pe server la fiecare publicare. Fișierele rămân în
   proiect ca material de brand; din pachetul de livrare au ieșit. */

/* ============ HERO — un singur container, flux vertical ============ */
/* ---- Hero: imaginea de fundal ----
   Imaginile sunt folosite NEMODIFICATE. Doua fisiere, servite prin media query,
   deci fiecare dispozitiv descarca doar ce ii trebuie — cel de desktop are
   1501x1048 (peisaj), cel de mobil 853x1844 (portret).
   Imaginea contine deja cuvantul MAYA DIGITAL in sticla, asa ca literele care
   cadeau si banda cu proiecte sunt ascunse: ar fi dublat acelasi lucru. */
.hero{
  position:relative;overflow:hidden;align-items:stretch;
  background-image:url('../img/mobile-background.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
@media (min-width:821px){
  .hero{background-image:url('../img/desktop-background.webp')}
}
/* imaginea le contine deja */
.hero .hero-wm,
.hero .hero-logo{display:none}
/* textul sta la baza hero-ului, sub literele de sticla din imagine */
.hero-stack{justify-content:flex-end}
.hero-stack{
  width:100%;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(110px,14vh,170px) var(--gutter) clamp(14px,2.2vh,28px);
  gap:clamp(12px,1.6vh,26px);
}

/* 3. text */
.hero-content{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;max-width:62rem;width:100%;
  /* margin-top:auto impinge blocul la baza coloanei flex; `auto` pe ambele
     margini l-ar centra, ceea ce il aducea peste literele din imagine */
  margin-top:auto;margin-bottom:0;padding-bottom:clamp(1.4rem,4vh,3rem)}
/* Pe desktop titlul sta pe UN rand. Marimea e in `vw`, nu in `rem`: fraza are
   ~74 de caractere, deci latimea ei depinde de latimea ferestrei, nu de
   radacina tipografica. `nowrap` garanteaza ca nu se rupe niciodata. */
/* Chemarea la acțiune de sub linie. Discretă intenționat: hero-ul e imaginea,
   iar textul de deasupra e mesajul — asta e doar poteca mai departe, nu un
   buton care să concureze cu ele. */
.hero .hero-cta{
  display:inline-flex;align-items:center;gap:.6em;margin-top:1.5em;
  font-size:clamp(.68rem,.64rem + .16vw,.76rem);font-weight:300;
  letter-spacing:.24em;text-transform:uppercase;
  color:rgba(var(--alb-rgb),.8);
  text-shadow:0 1px 10px rgba(var(--umbra-rgb),.45);
  transition:color var(--dur) var(--ease);
}
.hero .hero-cta::after{
  content:"";width:.4em;height:.4em;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(-45deg);margin-left:-.1em;
  transition:transform var(--dur) var(--ease);
}
.hero .hero-cta:hover{color:rgb(var(--alb-rgb))}
.hero .hero-cta:hover::after{transform:rotate(-45deg) translate(.14em,.14em)}
.hero .hero-cta:focus-visible{outline:2px solid rgba(var(--alb-rgb),.9);outline-offset:.5em}
/* Linia de accent care ramane in locul butonului, plus subtitlul dedesubt.
   Aceleasi culori ca sublinierea de dinainte — bleu spre vernil. */
.hero-linie{
  display:block;margin-top:1.1em;
  width:clamp(110px,16vw,240px);height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent 0%,var(--brand-500) 18%,var(--brand-mint) 82%,transparent 100%);
  box-shadow:0 0 14px rgba(var(--mint-rgb),.55);
}
.hero .hero-sub{
  margin:0 auto;max-width:56ch;
  /* 200 = ExtraLight, cea mai fina greutate Poppins incarcata */
  font-size:clamp(1rem,.94rem + .3vw,1.15rem);font-weight:200;letter-spacing:.05em;
  line-height:1.75;color:rgba(var(--alb-rgb),.94);
  text-shadow:0 1px 12px rgba(var(--umbra-rgb),.4);
}
/* Pe desktop, fraza sta pe UN rand. Regula vine DUPA cea de baza, altfel
   `font-size`-ul ei ar fi anulat: au aceeasi specificitate, deci castiga
   ultima din fisier. */
@media (min-width:821px){
  .hero-content{max-width:96vw}
  /* `max-width:none` e obligatoriu aici. Plafonul de 56ch e gandit pentru
     varianta care se rupe pe mai multe randuri, pe telefon. Pe desktop, cu
     `nowrap`, fraza iese mai lata decat plafonul si atunci depaseste cutia
     doar spre dreapta: parea decentrata cu vreo 90px pe un ecran de 1280. */
  .hero .hero-sub{white-space:nowrap;max-width:none;font-size:clamp(14px,1.62vw,27px)}
}
.hero .btn-underline{position:relative;text-decoration:none;padding-bottom:.5em;color:var(--invert-fg);
  font-weight:400;letter-spacing:.2em;
  text-shadow:0 1px 12px rgba(var(--umbra-rgb),.4)}
.hero .btn-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg, transparent 0%, var(--brand-500) 18%, var(--brand-mint) 82%, transparent 100%);
  transition:bottom var(--dur) var(--ease);
}
.hero .btn-underline:hover::after{bottom:2px}

/* aparitia textului dupa ce cade logo-ul */
@keyframes heroReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-linie,.hero-content .hero-sub,.hero-content .hero-cta{opacity:0;animation:heroReveal .85s var(--ease-out) forwards}
.hero-content .hero-sub{animation-delay:.25s}
.hero-linie{animation-delay:.45s}
.hero-content .hero-cta{animation-delay:.65s}   /* ultima, după linie */
@media (prefers-reduced-motion:reduce){
  .hero-linie,.hero-content .hero-sub,.hero-content .hero-cta{opacity:1;animation:none}
}

/* ============ PORTOFOLIU — studii de caz ============
   Randuri alternante: captura pe o parte, textul pe cealalta. Alternanta se
   face din CSS, dupa pozitia in lista, nu din clase scrise de mana — asa nu
   trebuie atins nimic cand se adauga sau se scoate un proiect. */
.slide.work{flex-direction:column;justify-content:center;overflow:hidden}

.pf-intro{
  margin:1.1em auto 0;max-width:56ch;
  font-size:clamp(.88rem,.82rem + .22vw,.98rem);line-height:1.7;color:var(--muted);
}

.pf-lista{
  margin-top:clamp(2.6rem,6vw,5rem);
  display:flex;flex-direction:column;gap:clamp(3.4rem,7vw,6.5rem);
  text-align:left;
}

.pf{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(1.8rem,4.5vw,4rem);align-items:center;
}
/* Proiectele pare isi muta captura la dreapta. `order` schimba doar ordinea
   vizuala, nu si pe cea din DOM: la citirea cu tastatura sau cu un cititor de
   ecran, textul vine tot dupa imaginea lui. */
.pf:nth-child(even) .pf-vizual{order:2}

/* ---- Vizualul ----
   Capturile sunt mockup-uri pe fundal transparent, deci un chenar in jurul
   cutiei ar incadra aer. Aura o dam cu `drop-shadow` PE IMAGINE: urmareste
   silueta reala a ecranelor, nu dreptunghiul din jurul lor. */
.pf-vizual{
  position:relative;display:block;isolation:isolate;
  border-radius:0;outline:2px solid transparent;outline-offset:0;
  transition:outline-color var(--dur) var(--ease),outline-offset var(--dur) var(--ease);
}
.pf-vizual img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;
  transition:transform .6s var(--ease),filter .5s var(--ease);
}
/* inelul: un cadru care creste din marginea capturii */
.pf-inel{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  border:1px solid transparent;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),inset var(--dur) var(--ease);
}
a.pf-vizual:hover .pf-inel,
a.pf-vizual:focus-visible .pf-inel{
  inset:calc(-1 * clamp(10px,1.6vw,20px));
  border-color:rgba(var(--brand-rgb),.9);
  box-shadow:0 0 0 1px rgba(var(--alb-rgb),.5),0 0 34px -4px rgba(var(--brand-rgb),.5);
}
a.pf-vizual:hover img,
a.pf-vizual:focus-visible img{
  transform:scale(1.015);
  filter:drop-shadow(0 0 26px rgba(var(--brand-rgb),.55));
}
a.pf-vizual:focus-visible{outline-color:rgba(var(--brand-rgb),.9);outline-offset:clamp(10px,1.6vw,20px)}
/* bulina cu sageata, semnul ca se deschide in alta fila */
.pf-bula{
  position:absolute;z-index:3;right:clamp(10px,1.6vw,20px);bottom:clamp(10px,1.6vw,20px);
  width:var(--ctrl-size);height:var(--ctrl-size);display:grid;place-items:center;
  background:linear-gradient(160deg, rgba(var(--mint-rgb),.9) 0%, rgba(var(--brand-rgb),.78) 100%);
  border:1px solid rgba(var(--alb-rgb),.8);color:var(--invert-fg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(.5rem) scale(.9);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.pf-bula svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
a.pf-vizual:hover .pf-bula,
a.pf-vizual:focus-visible .pf-bula{opacity:1;transform:none}
/* proiect nelansat: fara link, fara inel, captura estompata */
.pf-vizual.is-wip{cursor:default}
.pf-vizual.is-wip img{filter:grayscale(.35) opacity(.6)}

/* ---- Textul ---- */
.pf-numar{
  font-size:clamp(.72rem,.68rem + .16vw,.8rem);font-weight:600;
  letter-spacing:var(--tracking-wide);color:var(--muted-2);margin-bottom:.9em;
}
.pf-numar span{color:var(--brand-500)}
.pf-titlu{
  font-size:clamp(1.15rem,1.02rem + .55vw,1.6rem);font-weight:500;
  letter-spacing:var(--tracking-tight);line-height:1.25;max-width:24ch;
}
.pf-domeniu{
  margin-top:.5em;font-size:clamp(.72rem,.68rem + .16vw,.79rem);font-weight:500;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--brand-600,var(--brand-500));
}
.pf-desc{
  margin-top:1em;max-width:52ch;
  font-size:clamp(.86rem,.81rem + .2vw,.94rem);line-height:1.75;color:var(--muted);
}
.pf-et{
  margin-top:1.6em;font-size:.68rem;font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-2);
}
.pf-tag{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7em}
.pf-tag li{
  font-size:clamp(.7rem,.67rem + .14vw,.77rem);color:var(--fg-2);
  border:1px solid var(--line);padding:.42em .8em;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pf:hover .pf-tag li{border-color:var(--line-soft)}
.pf-tag li:hover{border-color:var(--brand-500);background:var(--brand-100)}

.pf-link{
  display:inline-flex;align-items:center;gap:.5em;margin-top:1.6em;
  font-size:clamp(.76rem,.72rem + .16vw,.84rem);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
  padding-bottom:.4em;position:relative;
}
.pf-link svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur) var(--ease)}
.pf-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-mint));
  transform:scaleX(1);transform-origin:left;transition:transform .45s var(--ease)}
.pf-link:hover svg{transform:translate(2px,-2px)}
.pf-link:hover::after{transform:scaleX(.4)}

/* ---- Carusel coverflow ----
   Cardurile nu stau intr-o banda care deruleaza: sunt suprapuse in acelasi
   punct si impinse lateral prin transform. Fiecare nivel de departare are
   propria scara, opacitate si estompare — de aici senzatia de adancime. */
.cv{position:relative;margin-top:clamp(3rem,6vw,5rem);text-align:center}
.cv-scena{position:relative;height:clamp(19rem,33vw,23.5rem)}
.cv-card{
  position:absolute;left:50%;top:0;height:100%;
  width:min(88vw,26rem);
  transition:transform .55s var(--ease-out),opacity .55s var(--ease-out),filter .55s var(--ease-out);
  will-change:transform,opacity;
}
.cv-in{
  display:flex;flex-direction:column;height:100%;text-align:left;
  background:rgba(var(--alb-rgb),.42);
  -webkit-backdrop-filter:blur(6px) saturate(150%);backdrop-filter:blur(6px) saturate(150%);
  border:1px solid rgba(var(--alb-rgb),.75);border-radius:0;
  box-shadow:0 18px 40px -22px rgba(var(--umbra-rgb),.32);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.cv-card.este-activ .cv-in{box-shadow:0 30px 60px -26px rgba(var(--umbra-rgb),.44)}
a.cv-in:hover{border-color:rgba(var(--brand-rgb),.9);
  box-shadow:0 30px 60px -26px rgba(var(--umbra-rgb),.44),0 0 30px -6px rgba(var(--brand-rgb),.45)}
a.cv-in:focus-visible{outline:2px solid var(--brand-500);outline-offset:4px}
.cv-shot{display:block;flex:1 1 auto;min-height:0;overflow:hidden}
.cv-shot img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .6s var(--ease)}
a.cv-in:hover .cv-shot img{transform:scale(1.03)}
.cv-cap{
  display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap;flex:0 0 auto;
  padding:.9em clamp(.9rem,2vw,1.2rem) 1.05em;
  border-top:1px solid var(--line-soft);
}
.cv-cap b{font-size:clamp(.82rem,.78rem + .18vw,.9rem);font-weight:600;letter-spacing:var(--tracking-tight)}
.cv-cap i{font-size:clamp(.72rem,.69rem + .14vw,.78rem);font-style:normal;color:var(--muted)}

/* sagetile, in materialul controalelor de pe restul paginii */
.cv-nav{position:absolute;top:calc(50% - var(--ctrl-size) / 2);z-index:40}
.cv-prev{left:0}
.cv-next{right:0}
.cv-nav svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

.cv-puncte{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:clamp(1.4rem,3vw,2rem)}
.cv-puncte button{
  height:6px;width:6px;border:0;padding:0;cursor:pointer;border-radius:0;
  background:var(--line);
  transition:width .35s var(--ease),background .35s var(--ease);
}
.cv-puncte button[aria-current]{width:24px;background:linear-gradient(90deg,var(--brand-500),var(--brand-mint))}
.cv-puncte button:hover{background:var(--muted-2)}
.cv-puncte button[aria-current]:hover{background:linear-gradient(90deg,var(--brand-500),var(--brand-mint))}

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

/* ---- Chemarea la actiune de la finalul portofoliului ---- */
.pf-cta{
  margin-top:clamp(3.4rem,7vw,6rem);padding-top:clamp(2.2rem,4.5vw,3.4rem);
  border-top:1px solid var(--line-soft);text-align:center;
}
.pf-cta-t{font-size:clamp(1.1rem,1rem + .5vw,1.5rem);font-weight:500;letter-spacing:var(--tracking-tight)}
.pf-cta-s{margin:.6em auto 0;max-width:44ch;font-size:clamp(.86rem,.81rem + .2vw,.94rem);
  line-height:1.7;color:var(--muted)}
.pf-cta .btn-pill{margin-top:1.4em}

@media (max-width:820px){
  /* Pe telefon randul devine coloana, iar captura urca mereu deasupra
     textului: `order` de la proiectele pare nu mai are ce alterna. */
  .pf{grid-template-columns:1fr;gap:1.4rem}
  .pf:nth-child(even) .pf-vizual{order:0}
  .pf-lista{gap:clamp(2.8rem,9vw,4rem)}
  .pf-titlu{max-width:none}
  .pf-desc{max-width:none}
}

/* generic slide content padding */
.slide-inner{width:100%;padding-block:clamp(90px,14vh,150px)}

/* ============ SERVICES ============ */
/* același gradient blob ca pe hero */
#services,#testimonials,.contact-top{position:relative;isolation:isolate}
#services::before,#testimonials::before,.contact-top::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 78% at -4% 22%,  var(--brand-500) 0%, rgba(var(--brand-rgb),.5) 34%, rgba(var(--brand-rgb),0) 66%),
    radial-gradient(60% 82% at 104% 34%, var(--brand-mint) 0%, rgba(var(--mint-rgb),.5) 32%, rgba(var(--mint-rgb),0) 66%),
    radial-gradient(52% 62% at 22% 108%, var(--brand-300) 0%, rgba(var(--brand-400-rgb),0) 62%),
    radial-gradient(50% 60% at 80% 104%, var(--brand-200) 0%, rgba(var(--brand-400-rgb),0) 60%),
    radial-gradient(46% 52% at 50% 46%,  rgba(var(--alb-rgb),.92) 0%, rgba(var(--alb-rgb),0) 68%),
    var(--invert-fg)fff;
}

/* titluri centrate pe toate secțiunile */
.slide .slide-inner > .eyebrow,
.slide .slide-inner > .h1,
.slide .slide-inner > .display{text-align:center;margin-left:auto;margin-right:auto}
.slide .slide-inner > .h1{max-width:26ch}

.svc-list{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,1.8vw,30px) clamp(20px,2vw,34px);margin-top:clamp(28px,4vh,52px)}
/* de la 6 servicii incoace, trei coloane se inghesuie sub ~1100px */
@media (max-width:1100px) and (min-width:821px){
  .svc-list{grid-template-columns:repeat(2,1fr)}
}
.svc{padding-top:26px;border-top:1px solid var(--line)}
.svc .num{font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--muted-2)}
/* numerotarea de la Servicii, in albastrul brandului. Tintit pe #services:
   sectiunea Resurse foloseste aceeasi clasa, dar acolo `.num` sunt cuvinte
   (Ghid, Design, Publicitate), nu numere. */
#services .svc .num{color:var(--brand-500)}
.svc h3{margin-top:1.1em}
.svc p{margin-top:.7em;color:var(--muted);font-size:clamp(.92rem,.88rem + .15vw,1rem);line-height:1.55}

/* ============ ABOUT ============ */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
.stat-row{display:flex;gap:clamp(28px,4vw,64px);margin-top:clamp(28px,4vh,48px);flex-wrap:wrap}
.stat .n{font-size:clamp(1.7rem,2.8vw,2.6rem);font-weight:600;letter-spacing:var(--tracking-tight);line-height:1}
.stat .l{margin-top:.5em;font-size:.82rem;color:var(--muted);letter-spacing:.02em}

/* ---- Despre ----
   Textul e mai lung acum, deci are nevoie de o coloana ingusta: peste ~70 de
   caractere pe rand, ochiul pierde inceputul randului urmator. */
.despre-text{max-width:46rem;margin-inline:auto;text-align:center}
.despre-text .h1{max-width:22ch;margin:.3em auto 0}
.despre-text .lead{margin:1.1em auto 0;max-width:58ch}
.despre-p{
  margin:1.1em auto 0;max-width:64ch;
  font-size:clamp(.92rem,.88rem + .22vw,1rem);line-height:1.75;color:var(--muted);
}

/* ---- Tehnologii ----
   Deocamdata scrise cu text; cand vin siglele, <li> primeste <img> si
   regula de mai jos ascunde textul, pastrandu-l ca nume accesibil. */
.tehnologii{max-width:52rem;margin:clamp(2.2rem,4.5vh,3.4rem) auto 0;text-align:center}
.teh-intro{
  max-width:52ch;margin:0 auto clamp(1.4rem,3vh,2.2rem);
  font-size:clamp(.86rem,.82rem + .2vw,.94rem);line-height:1.7;color:var(--muted);
}
.teh-grup + .teh-grup{margin-top:clamp(1.1rem,2.4vh,1.7rem)}
.teh-titlu{
  font-size:clamp(.64rem,.61rem + .12vw,.7rem);font-weight:600;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-2);
  margin-bottom:.9em;
}
.teh-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.teh-lista li{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.5em 1em;border:1px solid var(--line);
  font-size:clamp(.76rem,.73rem + .16vw,.84rem);color:var(--fg);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.teh-lista li:hover{border-color:var(--brand-500);background:var(--brand-100)}
/* siglele sunt monocrome (simple-icons), deci raman in aceeasi familie
   vizuala cu restul paginii, oricat de diferite ar fi brandurile intre ele */
.teh-lista li img{height:1.15em;width:auto;display:block;opacity:.8;transition:opacity var(--dur) var(--ease)}
.teh-lista li:hover img{opacity:1}
/* serviciile romanesti nu au sigla in seturile publice: raman text, dar cu
   acelasi chenar, ca randul sa nu para neterminat */
.teh-lista li.fara-sigla{padding-inline:1.1em}
/* integrarile — numele pe care un client le recunoaste imediat */
.teh-grup:first-of-type .teh-lista li{border-color:var(--brand-500);font-weight:600}

@media (max-height:560px) and (orientation:landscape){
  .despre-p{margin-top:.7em}
}

/* ============ TESTIMONIALS ============ */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(28px,5vh,56px)}
.tst{margin:0;padding:clamp(24px,2.4vw,38px);border:1px solid rgba(var(--alb-rgb),.75);
  border-radius:0;background:rgba(var(--alb-rgb),.45);
  -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);
  box-shadow:0 22px 48px -30px rgba(var(--umbra-rgb),.35);display:flex;flex-direction:column}
.tst .quote{font-size:clamp(.95rem,.9rem + .25vw,1.08rem);line-height:1.5;color:var(--fg-2);margin:0}
.tst .quote::before{content:"\201C";display:block;font:700 3rem/.5 Georgia,serif;color:var(--maya);margin-bottom:.12em}
.tst .author{margin-top:1.5em;font-weight:600;font-size:.95rem}
.tst .role{color:var(--muted);font-size:.85rem;margin-top:.2em}
@media (max-width:900px){.tst-grid{grid-template-columns:1fr}}
/* ecrane mici: compactare ca să încapă mai bine */
@media (max-height:820px){
  .slide .slide-inner > .h1{font-size:clamp(1.3rem,2.6vw,2.1rem);max-width:30ch}
  .slide .slide-inner > .eyebrow{font-size:.72rem}
  .svc-list{margin-top:clamp(20px,3vh,36px);gap:clamp(14px,2vh,24px)}
  .svc{padding-top:18px}
  .svc p{font-size:.88rem;line-height:1.5}
  .tst-grid{margin-top:clamp(18px,3vh,32px);gap:14px}
  .tst{padding:clamp(16px,2vw,26px)}
  .tst .quote::before{font-size:2.2rem;margin-bottom:.05em}
  .tst .author{margin-top:1em}
  .contact-list{gap:1rem;margin-top:clamp(18px,3vh,30px)}
  .contact-item{padding-top:.7rem}
  .contact-actions{margin-top:1.4rem}
}

/* ============ RECENZII ============
   Randate pe server din registrul aprobat (vezi inc/recenzii.php). */
.rec-lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(14px,2vw,26px);margin-top:clamp(28px,5vh,56px);
}
.rec{
  margin:0;padding:clamp(1.2rem,2.4vw,1.8rem);
  border:1px solid rgba(var(--alb-rgb),.75);border-radius:0;
  background:rgba(var(--alb-rgb),.45);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
          backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 22px 48px -30px rgba(var(--umbra-rgb),.35);
  display:flex;flex-direction:column;text-align:left;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.rec:hover{transform:translateY(-4px);border-color:var(--brand-500)}
.rec-text{
  font-size:clamp(.92rem,.88rem + .22vw,1rem);font-weight:300;
  line-height:1.75;color:var(--fg-2);
}
.rec-text::before{
  content:"„";display:block;
  font-size:clamp(2rem,3.4vw,2.8rem);line-height:.6;color:var(--brand-500);
  margin-bottom:.35em;
}
.rec-autor{margin-top:auto;padding-top:1.2em}
.rec-autor b{display:block;font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.rec-autor span{
  display:block;margin-top:.25em;
  font-size:clamp(.74rem,.71rem + .14vw,.8rem);color:var(--muted);
}
@media (max-width:640px){
  .rec-lista{grid-template-columns:1fr}
}

/* ============ CONTACT ============ */
/* ---- Butoanele de contact ----
   Text INCHIS pe ambele: pe mint (#a1fefa) si pe albastrul brandului (#7ab8fe)
   albul da un contrast sub 3:1, adica nelizibil. */
/* butoanele de contact, in acelasi material aqua-glass */
.btn-wa,.btn-mail{
  position:relative;overflow:hidden;
  color:var(--invert-fg);font-weight:600;
  border:1px solid rgba(var(--alb-rgb),.78);
  -webkit-backdrop-filter:blur(16px) saturate(185%);
          backdrop-filter:blur(16px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(var(--alb-rgb),.95),
    inset 0 -10px 20px -14px rgba(var(--umbra-rgb),.3),
    0 10px 26px -12px rgba(var(--umbra-rgb),.34);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-wa{background:linear-gradient(160deg, rgba(var(--mint-rgb),.92) 0%, rgba(var(--mint-rgb),.72) 100%)}
.btn-mail{background:linear-gradient(160deg, rgba(var(--brand-400-rgb),.92) 0%, rgba(var(--brand-rgb),.76) 100%)}
.btn-wa::after,.btn-mail::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,
    rgba(var(--alb-rgb),0) 30%, rgba(var(--alb-rgb),.5) 46%,
    rgba(var(--alb-rgb),.08) 56%, rgba(var(--alb-rgb),0) 70%);
  transform:translateX(-40%);transition:transform .7s var(--ease);
}
.btn-wa:hover::after,.btn-mail:hover::after{transform:translateX(40%)}
.btn-wa:hover,.btn-mail:hover{
  color:var(--invert-fg);transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(var(--alb-rgb),1),
    inset 0 -10px 20px -14px rgba(var(--umbra-rgb),.24),
    0 16px 34px -14px rgba(var(--umbra-rgb),.42);
}
.btn-wa:active,.btn-mail:active{transform:translateY(0)}

/* ---- Formular de contact ----
   Etichete VIZIBILE, nu placeholder: placeholder-ul dispare cum incepi sa
   scrii si nu e citit consecvent de cititoarele de ecran. */
.contact-intro{display:flex;flex-direction:column}
.cf{
  border:1px solid var(--line);border-radius:0;
  padding:clamp(1.3rem,2.6vw,2rem);
  background:rgba(var(--alb-rgb),.55);
  -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 26px 56px -34px rgba(var(--umbra-rgb),.4);
  /* linia de accent, ca la panoul de cookie-uri */
  background-image:linear-gradient(90deg,var(--brand-500),var(--brand-mint));
  background-repeat:no-repeat;background-size:100% 2px;
}
.cf-titlu{font-size:clamp(1rem,.94rem + .3vw,1.15rem);font-weight:600;letter-spacing:var(--tracking-tight)}
.cf-sub{margin-top:.35em;font-size:clamp(.8rem,.76rem + .18vw,.88rem);color:var(--muted)}

.cf-stare{
  margin-top:1.1em;padding:.85em 1.1em;
  border-left:3px solid var(--brand-500);background:var(--bg-soft);
  font-size:clamp(.82rem,.78rem + .18vw,.9rem);line-height:1.6;
}
.cf-stare[data-rau]{border-left-color:var(--rosu);color:var(--rosu-inchis)}
/* Confirmarea trebuie sa se vada, nu doar sa existe: bifa verde o face de
   recunoscut dintr-o privire, inainte de a citi textul. */
.cf-stare[data-bun]{border-left-color:var(--verde);color:var(--verde-inchis);
  display:flex;align-items:center;gap:.7em}
.cf-stare[data-bun]::before{
  content:"";flex:0 0 auto;width:1.45em;height:1.45em;border-radius:50%;
  background:var(--verde) no-repeat center/.8em .8em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

.cf-rand{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.4vw,1rem)}
.cf-camp{margin-top:clamp(.85rem,1.6vw,1.1rem);display:flex;flex-direction:column}
.cf-rand .cf-camp{margin-top:clamp(.85rem,1.6vw,1.1rem)}
.cf-camp label{
  margin-bottom:.5em;font-size:clamp(.72rem,.68rem + .14vw,.78rem);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.cf-opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted-2)}
.cf-camp input,.cf-camp select,.cf-camp textarea{
  width:100%;font:inherit;font-size:clamp(.88rem,.84rem + .2vw,.96rem);color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:0;
  padding:.75em .9em;
  transition:border-color var(--dur) var(--ease);
}
.cf-camp textarea{resize:vertical;min-height:6em}
.cf-camp input:hover,.cf-camp select:hover,.cf-camp textarea:hover{border-color:var(--muted-2)}
.cf-camp input:focus-visible,.cf-camp select:focus-visible,.cf-camp textarea:focus-visible{
  outline:2px solid var(--brand-500);outline-offset:1px;border-color:var(--brand-500);
}
.cf-camp [aria-invalid="true"]{border-color:var(--rosu)}

.cf-acord{
  display:flex;gap:.7em;align-items:flex-start;margin-top:clamp(1rem,2vw,1.3rem);
  font-size:clamp(.76rem,.73rem + .16vw,.83rem);line-height:1.6;color:var(--muted);cursor:pointer;
}
.cf-acord input{flex:0 0 auto;width:1.05em;height:1.05em;margin-top:.2em;accent-color:var(--brand-500)}
.cf-acord a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

.cf-trimite{width:100%;justify-content:center;margin-top:clamp(1.1rem,2.2vw,1.5rem);border-radius:0;
  position:relative;overflow:hidden;color:var(--invert-fg);
  background:linear-gradient(160deg, rgba(var(--mint-rgb),.9) 0%, rgba(var(--brand-rgb),.78) 100%);
  border:1px solid rgba(var(--alb-rgb),.78);
  -webkit-backdrop-filter:blur(16px) saturate(185%);backdrop-filter:blur(16px) saturate(185%);
  box-shadow:inset 0 1px 0 rgba(var(--alb-rgb),.95),
    inset 0 -10px 20px -14px rgba(var(--umbra-rgb),.3),
    0 10px 26px -12px rgba(var(--umbra-rgb),.34)}
.cf-trimite:hover{color:var(--invert-fg);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(var(--alb-rgb),1),0 16px 34px -14px rgba(var(--umbra-rgb),.42)}
.cf-trimite[disabled]{opacity:.55;cursor:default}

/* capcana anti-robot: scoasa din pagina, dar nu cu display:none —
   unii roboti ignora campurile ascunse asa */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- ecrane mici: o coloana, campurile pe toata latimea --- */
@media (max-width:820px){
  .cf-rand{grid-template-columns:1fr;gap:0}
}
@media (max-height:560px) and (orientation:landscape){
  .cf{padding:1rem 1.1rem}
  .cf-camp{margin-top:.7rem}
}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
.contact-list{display:grid;gap:1.4rem;margin-top:clamp(28px,4vh,44px)}
.contact-item{display:flex;flex-direction:column;gap:.3em;border-top:1px solid var(--line);padding-top:1rem}
.contact-item .k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.contact-item .v{font-size:clamp(1rem,1.3vw,1.25rem);font-weight:600;letter-spacing:-0.01em}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:2rem}

/* ---- Footer (dark, full-bleed, la baza secțiunii Contact) ---- */
.slide.contact-slide{flex-direction:column;justify-content:space-between;align-items:stretch;padding:0;overflow:hidden}
.contact-top{width:100%;flex:1 1 auto;display:flex;align-items:center;padding-block:clamp(40px,6vh,80px)}
.contact-top .slide-inner{width:100%}
/* ---- Subsol ----
   Fundal din imaginile tale, nemodificate. Fiind deschise, tot textul trece
   pe inchis — pe albastrul asta, albul are un contrast de circa 1,5:1. */
.wf-footer{
  width:100%;color:var(--fg);padding-block:clamp(34px,4.4vh,56px);scroll-snap-align:end;
  background-image:url('../img/footer-mobile.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
@media (min-width:821px){
  .wf-footer{background-image:url('../img/footer-desktop.webp')}
}
.wf-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,3.2vw,52px);align-items:start}
.wf-brand img{height:clamp(34px,3.6vw,50px);width:auto;margin-bottom:1.1em}
.wf-brand p{color:var(--muted);font-size:clamp(.78rem,.74rem + .14vw,.86rem);line-height:1.65;max-width:42ch}
.wf-col{display:flex;flex-direction:column;gap:.8em;font-size:clamp(.78rem,.74rem + .14vw,.86rem)}
.wf-col .wf-h{font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.4em}
.wf-col a,.wf-col button{color:var(--fg-2);transition:color var(--dur) var(--ease);width:fit-content;
  background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer}
.wf-col a:hover,.wf-col button:hover{color:var(--invert-bg)}
.wf-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(26px,4vh,44px);padding-top:clamp(18px,2.6vh,26px);
  border-top:1px solid rgba(var(--umbra-rgb),.16);color:var(--muted);
  font-size:clamp(.7rem,.66rem + .1vw,.76rem);line-height:1.75}
@media (max-width:1100px){.wf-inner{grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,38px)}
  .wf-brand{grid-column:1/-1}}
@media (max-width:560px){.wf-inner{grid-template-columns:1fr;gap:26px}}

/* ============ FULLSCREEN OVERLAY MENU ============ */
.nav-overlay{
  position:fixed;inset:0;z-index:55;color:var(--fg);
  /* Sticla in bleul brandului: gradient translucid, blur pe ce e dedesubt si
     o dunga de lumina pe muchia de sus — acelasi material ca butoanele. */
  background:linear-gradient(168deg,
    rgba(var(--brand-rgb),.82) 0%,
    rgba(var(--brand-400-rgb),.78) 48%,
    rgba(var(--mint-rgb),.7) 100%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
          backdrop-filter:blur(34px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(var(--alb-rgb),.6);
  display:flex;flex-direction:column;justify-content:center;padding-inline:var(--gutter);
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .7s var(--ease);pointer-events:none;
}
body.nav-open .nav-overlay{clip-path:circle(150% at calc(100% - 46px) 46px);pointer-events:auto}
/* acelasi halo de brand, dar in adancime: `screen` adauga lumina peste
   fundalul intunecat, deci petele se citesc ca o aura, nu ca niste pete */
.nav-overlay::before{
  content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:var(--brand-halo);
  filter:blur(clamp(40px,7vw,120px));
  opacity:.5;mix-blend-mode:soft-light;
}
.nav-overlay ol,.nav-overlay .foot{position:relative;z-index:1}
/* Lista are latime limitata si linii fine intre elemente: fara ele, la
   dimensiunea mare, meniul arata ca un perete de text. */
.nav-overlay ol{counter-reset:m;display:flex;flex-direction:column;
  width:min(100%,34rem);gap:0}
.nav-overlay li{counter-increment:m;opacity:0;transform:translateY(16px)}
body.nav-open .nav-overlay li{animation:navIn .55s var(--ease-out) forwards}
body.nav-open .nav-overlay li:nth-child(1){animation-delay:.10s}
body.nav-open .nav-overlay li:nth-child(2){animation-delay:.15s}
body.nav-open .nav-overlay li:nth-child(3){animation-delay:.20s}
body.nav-open .nav-overlay li:nth-child(4){animation-delay:.25s}
body.nav-open .nav-overlay li:nth-child(5){animation-delay:.30s}
body.nav-open .nav-overlay li:nth-child(6){animation-delay:.35s}
body.nav-open .nav-overlay li:nth-child(7){animation-delay:.40s}
.nav-overlay .foot{opacity:0}
body.nav-open .nav-overlay .foot{animation:navIn .6s .48s var(--ease-out) forwards}
@keyframes navIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .nav-overlay li,.nav-overlay .foot{opacity:1;transform:none;animation:none}
}
.nav-overlay li a{
  font-size:clamp(1.5rem,3.4vw,2.7rem);font-weight:200;letter-spacing:.03em;
  color:var(--fg);position:relative;display:flex;align-items:baseline;gap:1em;
  padding:clamp(.5rem,1.5vh,.85rem) 0;
  border-top:1px solid rgba(var(--umbra-rgb),.18);
  transition:transform var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
/* linia de brand creste sub element la hover */
/* accent vertical la stanga, nu o linie peste tot randul */
.nav-overlay li a::after{
  content:"";position:absolute;left:0;top:.55em;bottom:.55em;width:2px;
  background:linear-gradient(180deg,var(--brand-500),var(--brand-mint));
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--dur) var(--ease);
}
.nav-overlay li a:hover::after{transform:scaleY(1)}
.nav-overlay li:last-child a{border-bottom:1px solid rgba(var(--umbra-rgb),.18)}
.nav-overlay li a::before{content:"0" counter(m);font-size:.72rem;font-weight:400;
  color:rgba(var(--umbra-rgb),.5);letter-spacing:.18em;min-width:2.2em}
.nav-overlay li a:hover{padding-left:.9rem}
.nav-overlay li a:hover::before{color:var(--invert-bg)}
.nav-overlay .foot{position:absolute;bottom:clamp(20px,4.5vh,44px);left:var(--gutter);right:var(--gutter);
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);font-size:.85rem;color:var(--fg)}
.nav-overlay .foot-info{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap}
.nav-overlay .foot-legal{display:flex;flex-wrap:wrap;gap:.5em clamp(14px,2vw,26px);
  padding-bottom:clamp(10px,1.6vh,16px);border-bottom:1px solid rgba(var(--umbra-rgb),.18)}
.nav-overlay .foot-legal a,.nav-overlay .foot-legal button{
  font-size:clamp(.78rem,.74rem + .18vw,.86rem);color:var(--fg);
  background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
  transition:color var(--dur) var(--ease)}
.nav-overlay .foot-legal a:hover,.nav-overlay .foot-legal button:hover{color:var(--invert-bg)}
.nav-overlay .foot a{color:var(--fg)}
.nav-overlay .foot a:hover{color:var(--invert-bg)}

/* ecrane joase (laptop scund, telefon in landscape): meniul + randul legal
   nu mai incap centrate, asa ca lista curge de sus si subsolul sta jos */
@media (max-height:700px){
  .nav-overlay{overflow-y:auto;padding-block:clamp(60px,11vh,88px) clamp(16px,3vh,28px)}
  .nav-overlay ol{gap:clamp(2px,.8vh,8px)}
  .nav-overlay li a{font-size:clamp(1.25rem,4.6vw,2rem);gap:.8em}
  .nav-overlay li a::before{font-size:.9rem}
  .nav-overlay .foot{position:static;margin-top:auto;left:auto;right:auto;bottom:auto}
}

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

/* tablet / small desktop: keep lateral nav but tighter */
@media (max-width:1100px){
  :root{--nav-w:0px}
  .side-nav{gap:.9rem}
  .side-nav a .line{width:26px}
}

/* phones + portrait tablet: hide lateral nav + arrows, use overlay + native scroll */
@media (max-width:820px){
  .side-nav{display:none}
  .slider{scroll-snap-type:none;height:auto;overflow:visible}
  .slide{min-height:auto;scroll-snap-align:none;display:block}
  /* Ritmul vertical pe telefon. Inainte se adunau doua reguli: 110-150px pe
     interiorul sectiunii, din regula de latime, plus 56-90px pe sectiune, din
     cea de inaltime — peste 240px de gol intre doua sectiuni vecine. */
  /* Un singur spațiu, nu două suprapuse. Secțiunea și interiorul ei aveau
     fiecare padding pe verticală, iar între două secțiuni vecine se adunau
     ~200px de gol pe un ecran de 844px — un sfert de ecran fără nimic în el.
     Acum interiorul nu mai contribuie, iar distanța rămâne 68–104px. */
  .slide{padding-block:clamp(44px,5.8vh,64px)}
  .slide-inner{padding-block:0}
  .slide.work{padding-block:clamp(36px,4.8vh,54px)}
  /* Hero-ul își pune singur respirația, prin hero-stack: padding aici i-ar
     adăuga o bandă în plus sub imagine și l-ar face mai înalt decât ecranul. */
  .slide.hero{padding-block:0}
  /* butoanele de navigare sunt tinta pentru deget, nu pentru cursor:
     44px e minimul recomandat pentru o zona atinsa cu degetul */
  :root{--ctrl-size:clamp(2.9rem,9vw,3.4rem)}
  .ctrl-btn svg{width:1.05rem;height:1.05rem}
  .svc-list{grid-template-columns:1fr}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:34px}
  /* 16px nu e o alegere estetica, e pragul de la care Safari pe iPhone nu mai
     mareste singur pagina cand atingi un camp. Sub el, formularul „sare" la
     fiecare click si vizitatorul trebuie sa dea zoom inapoi manual. */
  .cf-camp input,.cf-camp select,.cf-camp textarea{font-size:16px}
}

/* landscape phones: compress vertical rhythm, keep it usable */

@media (min-width:821px) and (max-height:640px){
  .slide-inner{padding-block:clamp(80px,12vh,110px)}
}

/* ecrane scunde (laptop): coboara textul ca sa nu se suprapuna cu DIGITAL */
@media (max-height:800px){
  .hero-stack{padding-top:clamp(100px,13vh,140px);padding-bottom:clamp(16px,3vh,32px);gap:clamp(8px,1.4vh,18px)}
      .hero .hero-cta{margin-top:.7em}
}

/* landscape phones — ultima regula, are prioritate */
@media (max-height:560px) and (orientation:landscape){
  .slider{scroll-snap-type:none;height:auto;overflow:visible}
  .slide{min-height:auto;display:block}
  .slide-inner{padding-block:96px}
  .hero{min-height:auto}
  .side-nav{gap:.7rem}
  .side-nav a{font-size:.76rem}
  .display{font-size:clamp(1.9rem,4.6vw,3.4rem)}
  .hero-stack{min-height:100svh;padding-top:clamp(72px,12vh,96px);padding-bottom:8px;gap:4px}
    }