/* Componente reutilizabile. Depinde de tokens.css si base.css. */

:root { --tap-min: 44px; }

/* ============ BUTOANE ============
   Trei variante, aceeasi geometrie: 46px inaltime, raza 10, padding 10/18.
   Bone e rezervat unei singure actiuni pe ecran. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-10);
  min-height: 46px;
  padding: var(--s-10) 18px;
  border-radius: var(--r-button);
  font-size: var(--size-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-ui);
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn:active { transform: scale(0.985); }

.btn--blue {
  background: var(--blue);
  color: #FFFFFF;
  box-shadow: var(--glow-button);
}
.btn--blue:hover { background: var(--blue-hover); box-shadow: 0 10px 48px var(--blue-glow); }

.btn--bone { background: var(--bone); color: var(--on-bone); }
.btn--bone:hover { background: #FFFFFF; }

.btn--glass {
  background: var(--line-15);
  color: var(--text-1);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
.btn--glass:hover { background: rgba(255, 255, 255, 0.22); }

.btn--block { width: 100%; min-height: 50px; }

/* Doua butoane unul langa altul, centrate.

   Sta AICI, in foaia comuna, nu in cea a paginii: pagina 404 nu are foaie
   proprie, iar `.hero__actions` - care face exact acelasi lucru pe prima
   pagina - traieste in `home.css`, pe care 404 n-o incarca. Prima incercare
   a folosit o clasa din `about.css` si n-a facut nimic; butoanele au ramas
   lipite la stanga. Verificat in pagina, nu presupus.

   `--butoane-late` da o latime de pornire egala amandurora: fara ea „Inapoi"
   iese vizibil mai ingust decat „Acasa", fiindca cuvantul e mai scurt, si
   perechea arata strambe. Cuvintele mai lungi (rusa: „На главную") intind
   pastila peste prag, deci e `min-width`, nu `width`.

   Cerut de Vitalie pe 13 august 2026, uitandu-se la pagina: mai late, mai
   putin inalte, si cu un pas intre ele - nu lipite. */
.btn-rand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-12);
}
.btn-rand .btn {
  min-width: 148px;
  min-height: 38px;
  padding-block: 6px;
}

/* ============ EYEBROW ============
   Fiecare sectiune incepe cu una. Doua variante:
   hero (cu pastila colorata) si sectiune (cu punct). */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  min-height: 38px;
  padding: 6px 14px;
  border-radius: var(--r-button);
  background: var(--glass-pill);
  border: 1px solid var(--line-05);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  font-size: var(--size-small);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-ui);
  color: var(--text-1);
  position: relative;
  align-self: flex-start;
}

.section-head--center .eyebrow { align-self: center; }

/* punctul alb de 5px */
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-1);
  flex: none;
}

/* Firul albastru, sus si jos.
   A existat intai doar pe muchia de sus, ca in template. Am incercat apoi un
   inel complet, dar pe o pastila lata si joasa - 171x38px, din care coltul
   rotunjit mananca 20 - laturile din stanga si dreapta raman cu 18px de muchie
   dreapta. Chiar aprinse complet, aproape nu se vad. Vitalie a cerut atunci
   exact firul initial, repetat jos.

   Doua straturi de fundal pe acelasi pseudo-element, unul sus si unul jos.
   Fara masca si fara truc de decupare, deci merge in orice browser fara plasa
   de siguranta. Latimea de 60% si stingerea catre capete raman cele din
   varianta initiala - jos e aceeasi linie, nu alta. */
.eyebrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    var(--hairline-blue) top center / 60% 1px no-repeat,
    var(--hairline-blue) bottom center / 60% 1px no-repeat;
}

/* Varianta din hero avea o pastila albastra "2020" in stanga, scoasa la
   cererea lui Vitalie pe 8 august 2026. Odata cu ea a plecat si motivul
   pentru care se ascundea punctul alb si pentru care padding-ul din stanga
   era 6px in loc de 14px - pastila tinea ea locul. Acum insigna se comporta
   ca oricare alta: punct alb, padding simetric.
   Regula .eyebrow__chip a fost stearsa; nu o mai foloseste niciun sablon. */
.eyebrow--hero { gap: var(--s-12); }

/* ============ PASTILA DE ETICHETA ============
   Pastila cu un singur cuvant: o platforma, un serviciu, o tehnologie. O
   folosesc pagina Despre noi (platformele si serviciile) si paginile de
   studiu de caz (tehnologiile). Mutata din about.css pe 11 august 2026, cand
   a doua pagina i-a cerut-o; valorile au venit neschimbate.

   Asezarea NU sta aici: `.chips` / `.chips__rand` pe About us si
   `.stiva__lista` pe studiile de caz - fiecare pagina isi pune pastilele in
   rand cum are nevoie. */
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line-05);
  border-radius: var(--r-chip);
  background: var(--glass-pill);
  color: var(--text-1);
  font-size: var(--size-small);
  letter-spacing: var(--ls-ui);
  white-space: nowrap;
}

/* ============ PASTILA DE STATISTICA ============
   Atomul care duce "20+ / Proiecte". Motorul de convingere al
   template-ului sunt cifrele folosite ca textura. */

/* Pastilele cu cifre. Erau de marimea unei etichete: cifra si textul amandoua
   la 16px, unul sub altul, intr-o pastila de 38px. Aratau ca niste bilete, nu
   ca niste rezultate. Vitalie a cerut pe 8 august 2026 sa creasca.
   Ce s-a schimbat: cifra urca la 28px si textul coboara la 14, deci intre ele
   apare un contrast de doua ori - de marime si de culoare. Asa se citeste
   intai cifra si abia apoi ce inseamna, care e si ordinea in care se uita
   omul la ele. */
.stat {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-10);
  padding: var(--s-20) var(--s-24);
  border-radius: var(--r-card);
  background: var(--glass-pill);
  border: 1px solid var(--line-05);
}

.stat__value {
  font-size: 2.5rem;          /* 40 px */
  font-weight: var(--w-semibold);
  color: var(--text-1);
  line-height: 1;
  /* Aceeasi stransura ca la titluri. La 40px, spatierea normala face cifrele
     sa para desfacute langa un titlu de 44px care e tras la -0.035em. */
  letter-spacing: var(--ls-h2);
}

.stat__label {
  font-size: var(--size-body);
  font-weight: var(--w-regular);
  color: var(--text-2);
  line-height: 1.2;
}

/* Doua pe doua, nu trei si una.
   Cu `flex-wrap`, cele patru pastile intrau trei pe un rand si una ramanea
   singura dedesubt, langa doua locuri goale - se citea ca o greseala, nu ca o
   alegere. In doua coloane sunt patru lucruri egale, asa cum si sunt.
   Coloanele au latimea continutului, deci pastilele nu se intind degeaba pe
   ecranele late.

   `minmax(0, max-content)`, nu `max-content` singur. Al doilea da coloanei
   latimea textului nedesfacut si atat: nu are voie sa scada nici cand locul
   nu ajunge, deci randul iese pur si simplu din pagina. Pe prima pagina
   pastilele stau in `.split__body`, care intre 961px si ~1090px se strange la
   ~433px; in rusa cele doua coloane cer 445px, si pagina se tragea in lateral
   cu 12-23px. Cu minimul pus pe zero coloana are voie sa se stranga sub
   textul ei, iar eticheta se rupe pe doua randuri - urat ar fi doar daca ar
   ramane asa, dar sub 720px oricum intra regula de mai jos, cu o coloana.
   Maximul ramane `max-content`, deci pe ecranele late nu se schimba nimic:
   pastilele tot nu se intind. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--s-12);
}

/* Cele patru pe un singur rand, intinse pe toata latimea. Ceruta de Vitalie
   pe 11 august 2026 pentru cifrele de amploare de pe pagina de studiu de caz,
   unde ele sunt primul lucru pe care il vede omul si se citesc mai bine ca o
   linie decat ca un patrat. Prima pagina si About us raman doua pe doua -
   acolo pastilele stau langa un text, nu singure sub antet.

   Coloane egale si intinse, nu pe latimea continutului: asa pastilele ajung
   de aceeasi marime si tin randul de la un capat la altul al foii, in loc sa
   se stranga in stanga si sa lase un gol in dreapta.

   Regula nu numara pastilele. Coloanele se nasc singure, cate una de fiecare
   pastila. S-a scris asa cand pagina avea doua randuri cu numere diferite -
   patru cifre de amploare sus, doua de efort jos; cel de jos a ramas de
   atunci cu o singura cifra si nu mai foloseste modificatorul. Ramane
   generala dinadins: al doilea studiu de caz vine cu alt numar de cifre, si
   o regula scrisa pe patru ar cere a doua regula la fiecare numar nou.
   `grid-template-columns: none` sterge cele doua coloane ale blocului de
   baza, altfel pastilele le-ar umple pe ele intai. `minmax(0, 1fr)` in loc
   de `1fr` gol fiindca altfel o eticheta lunga ar putea impinge coloana
   peste partea ei si randul ar iesi din pagina.

   Doar de la 1024px in sus. Mai jos coloanele ar ajunge sub 230px si
   etichetele lungi s-ar rupe urat, deci ramane asezarea de baza, doua pe
   doua. */
@media (min-width: 1024px) {
  .stat-row--un-rand {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* Pe telefon, una sub alta.
   `max-content` de mai sus da fiecarei coloane latimea textului nedesfacut si
   nu are niciun plan de rezerva cand ecranul e mai ingust decat suma lor. Pe
   un telefon de 375px raman 329px intre marginile foii, iar cele doua pastile
   de pe un rand cereau 387px in engleza si 445px in rusa. Randul nu iesea doar
   el din pagina: impingea intreaga pagina, care ajungea sa se traga in lateral
   cu 35px in engleza si cu 93px in rusa - masurat in browser pe 13 august
   2026, la 375px. Defectul era acolo de la inceput, in engleza; traducerile
   l-au facut doar mai mare.

   Nu s-au stramtat cele doua coloane la `minmax(0, 1fr)`, desi ar fi fost
   schimbarea mai mica. La 375px o coloana ar avea 158px, din care 48 sunt
   marginile pastilei: raman 110px pentru text. Cifra de 40px, care e chiar
   lucrul de citit intai, nu incape acolo - "In development" de pe pagina
   AgroData s-ar rupe in trei randuri. O singura coloana da fiecarei pastile
   toata latimea foii si le face si egale intre ele.

   Pragul e 720px, acelasi cu `.wings` si `.faq` din aceasta foaie. Peste el
   nu se schimba nimic: la 721px raman 675px pentru rand, destui pentru doua
   coloane chiar si in rusa. Nici cele doua reguli de 1024px nu se ating de
   asta - nici `.stat-row--un-rand` de mai sus, nici `.studiu__efort .stat-row`
   din studiu.css: 720 si 1024 nu se suprapun, deci sub prag toate paginile,
   si prima si studiile de caz, cad pe aceeasi coloana unica.

   `minmax(0, 1fr)`, nu `1fr` gol: coloana are voie sa fie mai ingusta decat
   cel mai lung cuvant din ea. Cu `1fr`, o eticheta ca "From first commit to
   launch" ar putea impinge coloana peste latimea foii si pagina s-ar trage
   iar in lateral, adica exact defectul reparat aici. */
@media (max-width: 720px) {
  .stat-row { grid-template-columns: minmax(0, 1fr); }
}

/* PE TABLETA COLOANELE SE INTIND. Gasit pe 14 august 2026 de auditul de
   tableta: la 768 si la 834, randul de cifre tine toata latimea paginii dar
   continutul lui se opreste dupa vreo doua treimi - masurat, 303px goi pe
   prima pagina englezeasca si 332 pe cea romaneasca. Se citea ca o gramada
   impinsa la stanga, nu ca o asezare.

   Cauza e chiar `max-content` de mai sus, care e alegerea buna pe calculator:
   acolo pastilele stau LANGA un text si n-au voie sa se intinda degeaba. Pe
   tableta insa randul e singur pe latime, si atunci n-are langa ce sa stea.

   Numai in banda de tableta, deci: sub 721 e o coloana, peste 1023 se intoarce
   asezarea de calculator (si `.stat-row--un-rand`, unde cele patru cifre stau
   pe un singur rand). */
@media (min-width: 721px) and (max-width: 1023px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ CARDURI ============ */

.card {
  position: relative;
  padding: var(--s-30);
  border-radius: var(--r-card);
  background: var(--surface-1);
  border: 1px solid var(--line-07);
  overflow: hidden;
}

.card--glass { background: var(--glass-card); border-color: var(--line-05); }

/* firul albastru de pe muchia de sus a cardului */
.hairline {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 170px; height: 1px;
  background: var(--hairline-blue);
  pointer-events: none;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blue-15);
  color: var(--blue);
  margin-bottom: var(--s-20);
}

.card__icon svg { width: 22px; height: 22px; fill: currentColor; }

/* ============ MEDIA ============
   Fiecare fotografie primeste voalul care o topeste in negru.
   Fara el, capturile de saituri albe se termina cu o muchie taiata. */

.media {
  position: relative;
  border-radius: var(--r-image);
  overflow: hidden;
  background: var(--surface-1);
}

.media__img { width: 100%; height: 100%; object-fit: cover; }

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dissolve);
  pointer-events: none;
}

/* invelisul concentric: 30px afara, 10px padding, 20px inauntru */
.media-shell {
  padding: var(--s-10);
  border-radius: var(--r-shell);
  background: var(--surface-1);
  border: 1px solid var(--line-07);
}

/* ============ ORIZONTUL DINTRE SECTIUNI ============

   Trecerea pe care o foloseste template-ul Landin intre sectiunile mari: o
   platforma lata cat ecranul, cu colturile de sus rotunjite, care rasare din
   negru, si o lumina albastra in spatele muchiei ei - ca un rasarit vazut
   peste un platou. Vitalie a cerut-o pe 8 august 2026, aratand doua capturi
   din template.

   Valorile de mai jos sunt masurate din template la 1440px latime, nu alese
   din ochi:
   - lumina de deasupra: 150px inaltime, cea mai tare exact la muchie, unde
     ajunge la albastrul de brand la 30% (masurat rgb(0,26,77) peste negru);
   - muchia: o linie de 1px de albastru plin in mijloc, care se stinge complet
     la 15% si la 85% din latime - de aici `70%` de mai jos, centrat;
   - firul alb subtire care continua pe colturile rotunjite: 10% alb;
   - platforma: #0A0A0A la muchie, stins in negru dupa ~110px;
   - raza colturilor: aproximativ 120px.

   Nu contine text si nu primeste focus: e desen, si sta in pagina cu
   aria-hidden. Inaltimea si raza scad pe ecrane mici, ca sa nu manance un
   sfert de telefon. */

.horizon {
  position: relative;
  /* Inaltimea a scazut de la 260px la 210, la cererea lui Vitalie: platforma
     ocupa prea mult negru sub muchie. Lumina de deasupra a ramas cat era -
     150px la 1440, cat am masurat in template - fiindca ea da tot efectul.
     S-a scurtat numai partea de dedesubt, de la 110px la 60. */
  height: clamp(140px, 14.6vw, 210px);
  /* Unde cade muchia luminata. Un singur numar pentru amandoua straturile:
     daca lumina si platforma nu se intalnesc exact, albastrul se aduna cu
     firul si linia iese de doua ori mai lata. */
  --edge: 71.5%;
  /* Platforma se taie aici. Ea e mai inalta decat se vede, ca sa incapa
     coltul rotunjit; ce trece de muchia de jos nu are voie sa iasa. */
  overflow: hidden;
  pointer-events: none;
}

/* Primul orizont al paginii nu desparte nimic, deci nu-si merita elanul.
   La mijlocul paginii, cei ~135px de lumina de deasupra muchiei sunt pauza
   dintre doua sectiuni - de-aia exista. Sub meniu, ele sunt doar negru gol:
   nu vine nimic de sus de care sa te desparta. Vitalie a aratat golul pe
   12 august 2026, pe pagina de studiu de caz; acelasi orizont incepe si
   About us, Portofoliul si Serviciile, deci se scurteaza in toate patru.
   Prima pagina n-are orizont la inceput, are erou - nu se atinge.

   Se scurteaza NUMAI elanul, nu si platforma: inaltimea scade de la 187px la
   115 (masurat la 1280px), iar muchia urca de la 71.5% la 55%, ca sub ea sa
   ramana tot vreo 52px de platforma, cati erau si inainte. Adica dispar ~72px
   de negru de deasupra muchiei si nimic altceva. */
main > .horizon:first-child {
  height: clamp(90px, 9vw, 130px);
  --edge: 55%;
}

/* Sectiunea de dupa o trecere urca.
   Marginea ei normala de sus se aduna cu platforma trecerii, care are si ea
   vreo 110px pana se stinge in negru: impreuna dadeau peste 300px de negru gol
   intre muchia luminata si primul lucru vizibil. Vitalie a semnalat golul pe
   8 august 2026, apoi a cerut inca putin: de la 158px s-a coborat la 129.
   Template-ul are 156, deci suntem sub el - a fost alegerea lui, nu o
   potrivire. Mai jos de atat nu se poate din marginea sectiunii: platforma
   singura ocupa 110px pana se stinge, si abia apoi incepe marginea.
   Regula bate si `.section--first`, care cere 120px: are doua clase in
   selector, fata de una. */
.horizon + .section { padding-top: var(--s-20); }

/* Platforma. Firul alb urmeaza si colturile, fiindca e chenar, nu fundal.
   Muchia albastra sta tot aici, ca strat de fundal asezat sub chenar: asa cade
   exact pe randul lui, nu cu un pixel mai sus. */
.horizon::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: var(--edge);
  /* Inaltimea e egala cu raza, nu intamplator: cand raza de sus depaseste
     inaltimea cutiei, browserul micsoreaza TOATE razele ca sa incapa, si
     coltul iese altfel decat cel desenat. Egale, nu are ce micsora.
     Din cei ~115px, se vad numai primii 60 - restul e taiat de `.horizon`. */
  height: clamp(70px, 8vw, var(--r-horizon));
  border-top: 1px solid var(--line-10);
  border-radius: clamp(70px, 8vw, var(--r-horizon))
                 clamp(70px, 8vw, var(--r-horizon)) 0 0;
  background:
    var(--hairline-blue) top center / 63% 1px no-repeat,
    /* Se stinge pana la 55%, adica inainte de taietura. Pana la 100% ar
       ramane culoare in dreptul ei si s-ar vedea o muchie dreapta. */
    linear-gradient(180deg, #0A0A0A 0%, transparent 55%);
}

/* Lumina de deasupra. Se opreste exact la muchie, nu peste ea: altfel ar
   adauga albastru si acolo unde template-ul are doar firul alb, iar linia ar
   iesi de doua ori mai lata si mai tipatoare decat a lor.

   E o scurgere verticala taiata la capete cu masca, NU un cerc. Prima varianta
   era un radial-gradient si arata ca un reflector: tare in mijloc, stins
   repede in lateral. Masurata pe template, lumina lor e aproape plata pe toata
   latimea din mijloc - la 49px deasupra muchiei da 44, 46, 46, 45, 39 de la un
   sfert de ecran la celalalt, adica un val lat, nu un con. Gradientul vertical
   spune cat de tare e lumina, masca spune unde se termina. */
.horizon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--edge);
  background: linear-gradient(180deg, transparent 0%, var(--blue-04) 38%,
                              var(--blue-20) 74%, var(--blue-35) 100%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 3%, #000 24%, #000 76%, transparent 97%);
  mask-image:
    linear-gradient(90deg, transparent 3%, #000 24%, #000 76%, transparent 97%);
}

/* ============ ARIPILE DIN SPATELE UNUI ANTET ============

   Doua panouri intunecate care intra din marginile ecranului si coboara in
   diagonala spre centru, ca un evantai deschis in jurul titlului. Vitalie le-a
   aratat pe template pe 8 august 2026.

   Forma vine din SVG-ul lor, luat exact: 567x203, margine dreapta de sus pana
   la 368, colt rotunjit scurt, apoi diagonala pana in coltul opus. Umplerea e
   albastrul nostru la 20%, stins complet pana la doua treimi din inaltime;
   pe muchie merge un fir alb de 10%, mai luminos la mijlocul diagonalei.

   Iese in afara ecranului cu 83px de fiecare parte, ca in template la 1440px.
   Coada care iese se taie pe sectiune, mai jos. Pana pe 13 august 2026 aici
   scria ca se ocupa `body` de asta - nu era adevarat, si de-aia s-a putut
   trage pagina in lateral atata vreme.

   Titlul trece peste ele si asa trebuie: panourile sunt aproape negre, iar in
   template textul le calca la fel. De aceea containerul e ridicat cu z-index,
   nu mutat. */

/* Aripa din dreapta nu iesea doar ea din ecran: intindea documentul cu exact
   cei 83px ai ei, asa ca pagina intreaga se putea trage in lateral - 1363px
   pe un ecran de 1280, masurat in browser pe 13 august 2026. Cum aripa iese
   cu 83px indiferent de latimea ecranului, defectul era la fel de mare peste
   tot deasupra pragului de 720px, de la care aripile sunt ascunse.

   `clip`, nu `hidden`: pe prima pagina cele trei cartonase `.lucrare` stau
   chiar intr-o astfel de sectiune si sunt `position: sticky`. `hidden` ar
   face din sectiune un container de derulare, iar ele s-ar lipi de sectiune
   in loc de fereastra. `clip` taie fara sa creeze container - acelasi motiv
   pentru care si `body` are `clip` in base.css, nu `hidden`.

   Pe sectiune, nu pe `body`: `overflow-x` pus acolo se muta pe fereastra,
   fiindca `html` n-are unul al lui, si atunci `body` insusi ramane `visible`
   si nu taie nimic. Verificat pe 13 august 2026 - cu `clip`, cu `hidden` sau
   fara nimic pe `body`, documentul ramanea de 1363px.

   Pe ecran nu se schimba nimic: taietura cade pe marginea sectiunii, care e
   chiar marginea ferestrei, deci aripile pornesc de unde porneau si tin tot
   cei 203px ai lor. Doar coada care oricum nu se vedea nu mai are voie sa
   lungeasca pagina. Intr-un browser fara `clip` declaratia se ignora si
   ramane purtarea de pana acum, deci n-are cum sa strice ceva. */
.section--wings {
  position: relative;
  overflow-x: clip;
}

/* Continutul deasupra desenului, altfel aripile ar acoperi titlul. */
.section--wings > .container { position: relative; z-index: 1; }

.wings {
  position: absolute;
  /* Masurat pe template: muchia de sus a aripilor cade exact pe randul al
     doilea al titlului. Asa au si stat pana pe 8 august 2026, cand Vitalie a
     cerut sa urce: la latimea ecranului lui, muchia lor dreapta traversa
     ecranul de la margine si se citea ca o linie trasa peste titlu.
     Acum incep de unde incepe antetul, adica in dreptul pastilei, si tin cei
     203px ai lor - ceea ce ii duce fix pana in dreptul butonului de sub
     paragraf. Sunt inramarea antetului, nu o dunga prin mijlocul lui.
     `--wings-top` e marginea de sus a sectiunii. Aproape toate au 100px;
     sectiunea de incheiere are 120 si si-o declara singura. */
  inset-block-start: var(--wings-top, var(--s-100));
  inset-inline: 0;
  height: 203px;
  pointer-events: none;
  z-index: 0;
}

.wings::before,
.wings::after {
  content: "";
  position: absolute;
  inset-block: 0;
  /* Sub 1290px latimea de 567px ar inghiti tot ecranul, deci scade cu el. */
  width: min(567px, 44%);
  background: url("../../IMG/redesign/wing.svg") center / 100% 100% no-repeat;
}

.wings::before { inset-inline-start: -83px; }

/* Aceeasi imagine, intoarsa. Oglindirea muta si degradeurile din ea, deci
   lumina cade spre centru si de partea cealalta - exact ca in template, care
   are doua fisiere in oglinda. */
.wings::after { inset-inline-end: -83px; transform: scaleX(-1); }

@media (max-width: 720px) {
  .wings { display: none; }
}

/* ============ CEATA DE JOS ============

   Marginea de jos a ecranului se incetoseaza treptat, ca pagina sa nu se taie
   cu o linie dreapta la scroll. Vitalie a semnalat efectul pe template pe
   8 august 2026 ("partea de jos pare putin buruiaza").

   Nu e un singur blur, ci opt straturi suprapuse peste aceeasi fasie de 160px.
   Fiecare are blurul dublu fata de cel dinainte - 0.078, 0.156, ... pana la
   10px - si o masca de o optime din inaltime, decalata cu o optime fata de
   vecinul ei. Rezultatul e o crestere continua a cetii de sus in jos.
   Un singur strat cu blur mare ar da o dunga cu inceput vizibil; asa nu se
   vede unde incepe. Valorile sunt citite din template, nu inventate.

   Costa: fiecare strat cere browserului o copie a ce e in spatele lui, la
   fiecare cadru de derulare. De aceea sta doar pe ecrane late, unde exista si
   putere de calcul, si numai daca browserul chiar stie backdrop-filter. */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 1024px) {
    .fog {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      height: 160px;
      pointer-events: none;
      /* Sub bara de sus (100) si sub cursorul cu particule (9999). */
      z-index: 40;
    }

    .fog > i { position: absolute; inset: 0; display: block; }

    .fog > i:nth-child(1) {
      backdrop-filter: blur(0.078125px); -webkit-backdrop-filter: blur(0.078125px);
      -webkit-mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);
      mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);
    }
    .fog > i:nth-child(2) {
      backdrop-filter: blur(0.15625px); -webkit-backdrop-filter: blur(0.15625px);
      -webkit-mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
      mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
    }
    .fog > i:nth-child(3) {
      backdrop-filter: blur(0.3125px); -webkit-backdrop-filter: blur(0.3125px);
      -webkit-mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
      mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
    }
    .fog > i:nth-child(4) {
      backdrop-filter: blur(0.625px); -webkit-backdrop-filter: blur(0.625px);
      -webkit-mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
      mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
    }
    .fog > i:nth-child(5) {
      backdrop-filter: blur(1.25px); -webkit-backdrop-filter: blur(1.25px);
      -webkit-mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
      mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
    }
    .fog > i:nth-child(6) {
      backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);
      -webkit-mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%);
      mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%);
    }
    .fog > i:nth-child(7) {
      backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
      -webkit-mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%);
      mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%);
    }
    .fog > i:nth-child(8) {
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      -webkit-mask-image: linear-gradient(transparent 87.5%, #000 100%);
      mask-image: linear-gradient(transparent 87.5%, #000 100%);
    }
  }
}

/* ============ BANDA RULANTA ============
   Inlocuieste cele patru carusele slick. Se opreste la hover si complet sub
   prefers-reduced-motion.

   ATENTIE la `:focus-within` de mai jos: astazi NU se declanseaza niciodata -
   banda poarta numai `<img>` si `<span>`, deci n-are nimic care sa ia focus.
   Regula ramane dinadins, pentru ziua in care emblemele devin legaturi catre
   studiile de caz. NU s-a pus `tabindex="0"` pe banda ca s-o „repare": ar
   adauga un popas de Tab pe un ornament care nu spune nimic, adica ar strica
   mai mult decat repara. Scris pe 13 august 2026, dupa ce o revizie a semnalat
   pe buna dreptate ca vechiul comentariu promitea ceva ce nu se intampla. */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-70);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ============ ACORDEON ============
   <details>/<summary> nativ: functioneaza fara JavaScript,
   accesibil de la tastatura din start. */

/* Doua coloane, deci trei intrebari de fiecare parte. `align-items: start` e
   obligatoriu: fara el, o intrebare deschisa ar intinde si vecina ei de pe
   acelasi rand, care ar ramane o cutie goala si inalta. */
.faq {
  display: grid;
  /* Exact doua coloane, deci trei intrebari de fiecare parte. `auto-fit` cu o
     latime minima parea echivalent si nu e: la 1200px incapeau trei coloane,
     deci ieseau doua randuri de cate trei, nu doua coloane de cate trei. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-12);
  align-items: start;
}

@media (max-width: 720px) { .faq { grid-template-columns: 1fr; } }

.faq__item {
  border-radius: var(--r-card);
  background: var(--surface-1);
  border: 1px solid var(--line-07);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-20);
  min-height: var(--tap-min);
  padding: var(--s-30);
  font-size: var(--size-h4);
  font-weight: var(--w-regular);
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "+";
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-2);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__item[open] .faq__q::after { content: "−"; }

.faq__a {
  padding: 0 var(--s-30) var(--s-30);
  color: var(--text-2);
}

/* ============ CAMPURI DE FORMULAR ============
   52px, raza 5, fara margine. Doua trepte de raza fata de cardul de 30px
   care le contine - deliberat. */

.field { display: flex; flex-direction: column; gap: var(--s-10); }

.field__label {
  font-size: var(--size-small);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-ui);
  color: var(--text-1);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-input);
  background: rgba(51, 51, 51, 0.2);
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--size-small);
}

.field textarea { min-height: 140px; padding: 16px 18px; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-placeholder); }

.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--surface-2); color: var(--text-1); }

/* Campul de atasat fisier.
   Arata ca un buton de sistem, alb si patrat, lipit intr-un formular negru -
   singurul element din pagina neimbracat. Vitalie l-a semnalat de doua ori.

   Se imbraca fara JavaScript. `::file-selector-button` e chiar butonul din
   interiorul campului nativ, deci se poate colora ca orice altceva. Solutia
   obisnuita - ascunzi campul si pui o eticheta care arata a buton - cere
   JavaScript ca sa arate numele fisierului ales; aici numele ramane afisat de
   browser, ca la orice camp nativ, si merge si cu JavaScript oprit. */
.field input[type="file"] {
  padding: 9px 9px 9px 12px;
  cursor: pointer;
  color: var(--text-2);
}

.field input[type="file"]::file-selector-button,
.field input[type="file"]::-webkit-file-upload-button {
  margin-inline-end: var(--s-12);
  padding: 0 var(--s-20);
  min-height: 34px;
  border: 1px solid var(--line-15);
  border-radius: var(--r-input);
  background: transparent;
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--size-small);
  font-weight: var(--w-medium);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.field input[type="file"]:hover::file-selector-button { background: var(--line-07); }

.field__error { font-size: var(--size-small); color: #FF6B6B; }

/* ============ CARTELA FORMULARULUI DE OFERTA ============
   Mutate aici din home.css pe 9 august 2026: formular.html s-a extras ca piesa
   refolosibila (Task 1) si se aseaza acum si pe pagina Contact, dar home.css
   se incarca doar pe prima pagina - Contact randa campurile lipite unul de
   altul, fara nicio spatiere, fiindca regulile de grila stateau doar acolo.
   Mutate, nu copiate: doua copii ar diverge la prima schimbare uitata intr-o
   singura parte. */

/* Cartela sta cat mai aproape de textul de deasupra - cerut de Vitalie pe
   8 august 2026. Sistemul pune 60px sub orice antet; aici e formularul, adica
   exact lucrul pentru care omul a citit paragraful, si nu are rost sa-l lase
   sa astepte. Selectorul are doua clase, deci bate regula generala. */
.section-head + .quote-card-shell { margin-top: var(--s-20); }

.quote-card-shell {
  max-width: 828px;
  margin-inline: auto;
  padding: var(--s-40) var(--s-40) var(--s-30);
  border-radius: var(--r-shell);
  background: var(--surface-1);
  border: 1px solid var(--line-07);
}

.quote__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-20);
  margin-bottom: var(--s-30);
}

.field--wide { grid-column: 1 / -1; }

/* Momeala pentru roboti: campul pe care omul nu-l vede niciodata, dar pe care
   un program care umple tot formularul il completeaza. Cine il atinge nu e om,
   iar cererea lui nu se salveaza si nu pleaca nicaieri (`forms.py`, `clean`).

   NU `display: none` si nici `visibility: hidden`, si asta e tot rostul regulii:
   robotii cei mai simpli chiar se uita la doua-trei feluri de ascuns si sar
   peste campurile ascunse asa. Mutat in afara ecranului, campul ramane un camp
   obisnuit pentru oricine citeste HTML-ul, si dispare numai pentru ochi.

   `height: 0` si `overflow: hidden` sunt pentru cazul in care ceva ar aduce
   randul inapoi in pagina: fara ele, momeala ar impinge formularul in jos cu un
   rand gol pe care nimeni nu l-ar putea explica. */
.momeala {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 0;
  overflow: hidden;
}

.quote__messages { margin-bottom: var(--s-20); }

.quote__message {
  margin: 0 0 var(--s-10);
  padding: var(--s-12) var(--s-20);
  border-radius: var(--r-button);
  font-size: var(--size-small);
}

.quote__message--success { background: var(--blue-15); color: var(--text-1); }
.quote__message--error { background: rgba(255, 107, 107, 0.12); color: #FF9B9B; }

/* Cursorul cu particule. Cadrul fixat pe fereastra e ce masoara biblioteca
   pentru suprafata de lucru - fara el, containerul ar deveni document.body,
   cat toata pagina derulata. Nici cadrul, nici panza dinauntru nu prind
   vreodata un clic - orice buton de dedesubt ramane apasabil. Se stinge in
   loc sa se taie: simularea nu poate fi oprita din afara, si o disparitie
   instantanee peste particule inca in miscare se citeste ca o defectiune. */
#cursor-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms linear;

  /* OBLIGATORIU, nu decorativ. Lantul de post-procesare al bibliotecii
     (bloom plus pasul final) scrie alpha = 1 pe tot cadrul, chiar daca
     contextul WebGL a fost cerut cu alpha. Panza iese NEAGRA OPACA, iar la
     z-index 9999 acopera integral pagina - saitul devine un dreptunghi negru
     cu o pata de lumina, din clipa primei miscari de mouse.

     "screen" rezolva la nivel de compunere: negru peste orice lasa orice
     neschimbat, iar lumina se aduna. Exact semantica unui efect aditiv pe
     fundal negru.

     Se pune pe CADRU, nu pe panza: cadrul e fixed cu z-index, deci creeaza
     strat propriu, iar un amestec pus pe panza s-ar aplica doar inauntrul
     acelui strat si n-ar ajunge la pagina. Verificat pe amandoua. */
  mix-blend-mode: screen;
}

#cursor-fx > canvas { width: 100%; height: 100%; display: block; }

#cursor-fx.is-live { opacity: 1; }

/* Bifa de acord. Caseta si textul pe acelasi rand, textul aliniat sus, ca sa
   nu pluteasca pe langa caseta cand se rupe pe doua randuri.
   `margin-bottom` cerut in runda de corectura 1 din 9 august 2026: fara el,
   butonul "Request a Quote" statea lipit direct sub bifa, la 0px distanta -
   parea ca butonul creste din text, nu ca e piesa urmatoare a formularului.
   Aceeasi valoare cu spatiul dintre restul campurilor. */
.acord { display: flex; align-items: flex-start; gap: var(--s-10); margin-top: var(--s-20); margin-bottom: var(--s-20); }

/* `accent-color` (varianta veche) vopseste doar caseta BIFATA - nebifata
   ramane patratul alb al sistemului de operare, care pe o cartela aproape
   neagra iese in evidenta mai tare decat orice camp din formular (campurile
   au fundal rgba(51,51,51,0.2), nu alb). Vitalie a semnalat exact acelasi
   defect de doua ori la campul de fisier (vezi comentariul de la
   `.field input[type="file"]` mai sus) - motivul e identic aici.
   `appearance: none` scoate desenul nativ ca sa poata fi refacut din chenar
   plus bifa desenata cu `::after`; elementul ramane un `<input type=checkbox>`
   adevarat, deci click, tastatura (Space) si `:focus-visible` continua sa
   functioneze fara nicio linie de JavaScript. */
.acord input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  border: 1px solid var(--line-15);
  border-radius: var(--r-chip);
  background: rgba(51, 51, 51, 0.2);
  cursor: pointer;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.acord input[type="checkbox"]:hover { border-color: var(--line-15); background: var(--line-07); }

.acord input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}

/* Bifa desenata cu un colt de patrat rotit 45 de grade - nicio imagine,
   niciun font de iconite, doar doua muchii ale pseudo-elementului. */
.acord input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--text-1);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.acord__text { font-size: var(--size-small); color: var(--text-2); }
.acord__text a { color: var(--text-1); text-decoration: underline; }

/* ============ SPLIT IMAGINE / TEXT ============
   Nu 50/50 - 506px imagine contra 588px text, ca in template.

   Mutat din home.css pe 11 august 2026: pagina Despre noi foloseste aceeasi
   asezare, iar home.css se incarca doar pe prima pagina. */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--s-60);
  align-items: center;
}

.split__body { gap: var(--s-24); }
.split__body .section-head + * { margin-top: 0; }

/* ============ GRILA DE CARTONASE ============
   Coloane care se aseaza singure, minimum 300px fiecare. Prima pagina o
   foloseste pentru cele trei capabilitati, Despre noi pentru cele trei
   moduri de lucru. Mutata din home.css pe 11 august 2026. */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--grid-gap);
}

.features .card { display: flex; flex-direction: column; gap: var(--s-12); }

/* Doua pe doua, pentru grilele de PATRU cartonase.

   `auto-fit` cu minimum 300px scoate trei coloane intr-un container de
   1162px, si al patrulea cartonas ramane singur pe randul doi langa aproape
   800px de gol. E exact greseala respinsa mai sus la `.stat-row`: se citeste
   ca o scapare, nu ca o alegere. Grilele de trei cartonase nu primesc
   modificatorul - lor auto-fit le da deja trei coloane.

   Sub 721px se intoarce la regula de baza, adica unul sub altul. */
@media (min-width: 721px) {
  .features--doua { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ MARTURII ============
   Patru recenzii reale, cu clienti cu nume. Au iesit de pe prima pagina pe
   8 august 2026, inlocuite de unelte, si au ajuns pe pagina Despre noi pe
   11 august - unde stilurile astea le asteptau. */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--grid-gap);
}

.testimonial { margin: 0; display: flex; flex-direction: column; gap: var(--s-20); }

.testimonial blockquote { margin: 0; color: var(--text-2); }

.testimonial__who {
  font-size: var(--size-small);
  font-weight: var(--w-medium);
  color: var(--text-1);
  margin-top: auto;
}

/* ============ CARTONAS DE PROIECT ============
   Captura saitului unui client, intr-o rama rotunjita, cu numele si
   etichetele dedesubt. Mutat din about.css pe 11 august 2026, cand pagina
   Portofoliu a cerut aceeasi piesa.

   Raportul e 16/9 pentru toata lumea, fiindca asa sunt capturile din
   portofoliu - 1920x1080, exact 16:9, deci nu se taie nimic din ele.
   About us nu-l mai suprascrie: o caseta mai inalta (16/10) intindea
   cartonasul Hyperice dincolo de hero-ul clientului, pana in continutul
   alb de sub el - vezi about.css:159-162. */

.proiecte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--grid-gap);
}

.proiect {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.proiect__poza {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-05);
  border-radius: var(--r-image);
  margin-block-end: var(--s-12);
}

.proiect__poza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Numai cartonasul care CHIAR duce undeva reactioneaza la mouse. Un cartonas
   static care se aprinde la trecerea mouse-ului promite ceva ce nu are. */
a.proiect:hover .proiect__poza img,
a.proiect:focus-visible .proiect__poza img { transform: scale(1.03); }

.proiect__nume {
  font-size: var(--size-h4);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-h4);
  color: var(--text-1);
}

.proiect__tags { font-size: var(--size-small); color: var(--text-2); }

/* ============ ETAPE ============
   Pasi numerotati, folositi de "How We Work" pe prima pagina si de
   "How It Works" pe paginile de studiu de caz. Mutati din home.css pe
   11 august 2026, cand a doua pagina i-a cerut.

   `margin: 0` ar parea reseturl obisnuit al unei liste, dar aici facea rau:
   `.section-head + *` din base.css pune 60px (`--s-60`) deasupra fiecarui
   bloc care urmeaza un antet, iar cele doua reguli au aceeasi greutate.
   home.css se incarca dupa base.css, deci zeroul castiga si etapele stateau
   lipite de titlu - 11px in loc de 60 (era 100px pana pe 8 august 2026, cand
   valoarea a scazut). Se vedea de cand exista sectiunea; a iesit in fata cand
   subtitlul a scazut la 24px si a lasat mai mult aer in jurul lui. Se
   reseteaza doar marginea de jos; cea de sus ramane a sistemului. */
.stages {
  list-style: none;
  margin-block-end: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--grid-gap);
}

.stage { display: flex; flex-direction: column; gap: var(--s-20); }

.stage__num {
  font-size: var(--size-h3);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-h2);
  color: var(--blue);
}

/* ============ PROIECTE RECENTE: CARUSEL PE TELEFON ============
   Cerut de Vitalie pe 14 august 2026, dupa ce a privit pagina pe telefon:
   „Adauga un carousel de carduri cu swipe orizontal, cate una din categorie".

   FARA NICIUN RAND DE JAVASCRIPT, si asta e o hotarare, nu o lene. Un carusel
   scris de mana inseamna ascultatori de atingere, inertie, si o bara de
   derulare falsa care nu se poarta niciodata ca cea adevarata. Derularea cu
   lipire („scroll-snap") e chiar unealta browserului pentru asta: degetul
   trage, telefonul frineaza cum stie el, si cartonasul se aseaza singur. Merge
   si cu tastatura, si cu cititorul de ecran, fiindca ramane o simpla derulare.

   `flex: 0 0 86%` NU e 100%: cartonasul urmator trebuie sa se vada pe o
   sfarama de ecran, altfel nimeni nu ghiceste ca mai e ceva la dreapta. Un
   carusel care arata un singur cartonas intreg se citeste ca o poza, si nimeni
   nu-l trage.

   Marginile negative plus `padding` readuc cartonasele la marginea ecranului:
   containerul are `--gutter` de 20px, iar un carusel care incepe si se termina
   la 20 de pixeli de margine pare taiat, nu continuat.

   `scroll-padding-inline` tine lipirea aliniata cu marginea aceea, altfel
   primul cartonas se opreste cu 20px prea la stanga. */
@media (max-width: 720px) {
  .proiecte {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Loc pentru umbra si pentru degetul care trage putin prea departe. */
    padding-block-end: var(--s-10);
    overscroll-behavior-x: contain;
    /* Bara de derulare se ascunde: pe telefon oricum nu se vede, dar pe un
       ecran mic de laptop cu mouse ar aparea o bara sub cartonase, care nu e
       parte din desen. Derularea ramane intreaga. */
    scrollbar-width: none;
  }
  .proiecte::-webkit-scrollbar { display: none; }

  .proiecte > .proiect {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}