/* Reset, tipografie de baza si primitive de layout.
   Depinde de tokens.css - se incarca dupa el. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  /* `clip`, nu `hidden`. Amandoua opresc derularea pe orizontala, dar `hidden`
     face din `body` un container de derulare, iar atunci `position: sticky`
     dinauntru se raporteaza la el, nu la fereastra - deci cartonasele din
     portofoliu nu s-ar mai lipi. `clip` taie fara sa creeze un container.
     Motivul initial ramane: antetele centrate depasesc deliberat ecranul. */
  overflow-x: clip;
}

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

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

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

/* Focusul: 2px albastru, offset 2px. Nenegociabil.
   Foaia veche il anuleaza global fara inlocuitor. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Legatura „Skip to content" e singurul `.sr-only` de pe sait, si e facuta
   dinadins ca s-o gaseasca cine merge cu tastatura. Fara regula asta ramanea
   ascunsa si CAND primea focus: omul apasa Tab pe orice pagina, focusul
   disparea in nimic, iar legatura era inutila tocmai pentru cine avea nevoie
   de ea. Se arata numai la focus de tastatura (`:focus-visible`), ca sa nu
   sara in ochi la un clic cu mausul. Gasit pe 13 august 2026. */
.sr-only:focus-visible {
  position: fixed;
  top: var(--s-12);
  left: var(--s-12);
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--s-12) var(--s-20);
  overflow: visible;
  clip: auto;
  border-radius: var(--r-button);
  background: var(--blue);
  color: #FFFFFF;
  font-weight: var(--w-medium);
  text-decoration: none;
}

/* --- Layout --- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-top: var(--s-100); }
.section--first { padding-top: var(--s-120); }
.section--tight { padding-top: var(--s-40); }
/* Ultima sectiune inainte de subsol. Marginea de jos e jumatate din cea de
   sus: deasupra ei incepe ceva, sub ea doar se termina. Erau amandoua 120 si
   se adunau cu marginea subsolului intr-un gol de 240px, pe care Vitalie l-a
   semnalat pe 8 august 2026. */
.section--closing { padding-block: var(--s-120) var(--s-60); }

.stack { display: flex; flex-direction: column; }

/* --- Tipografie ---
   Contrast de greutate aproape zero, contrast de marime urias.
   Cupletul pe doua randuri e mecanismul central: randul 1 alb pur,
   randul 2 la 60%, formand o singura fraza rupta la mijloc. */

.h1 {
  margin: 0;
  font-size: var(--size-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--w-regular);
  color: var(--text-1);
}

.h2 {
  margin: 0;
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--w-regular);
}

.h2__line-1 { display: block; color: var(--text-1); }

/* TITLURILE PE TELEFON: 32px, nu 44. Hotararea lui Vitalie, 14 august 2026,
   dupa auditul de telefon.

   Ce se intampla la 44 pe un ecran de 375: coloana are 329px, si titlul cel
   mai lung de pe /ru/hyperice - „Магазин, которым владелец управляет сам..." -
   ia SASE randuri si 254 de pixeli din 812. Adica aproape o treime din ecran,
   inainte de orice cuvant care spune ceva. Masurat, nu banuit.

   La 32 acelasi titlu ia 179 de pixeli. Randurile raman sase - rusa e lunga si
   atat - dar se castiga 75 de pixeli la fiecare titlu lung, si cele scurte
   coboara cu 20 fiecare.

   Numai sub 720px. Pe tableta si pe calculator raman 44, neatinse: acolo
   coloana e de doua-trei ori mai lata si titlul incape in doua randuri, asa
   cum a fost desenat.

   RANDUL SE SI RASFIRA, de la 0.93 la 1.02. Cei 0.93 sunt mai mici decat
   litera insasi, si la 44px auditul a masurat ca randurile CHIAR se ating:
   coada unui „p" de pe un rand si caciula unui „î" de pe urmatorul se
   suprapun cu un pixel in romana. La 44 se ierta, fiindca titlul are doua
   randuri; la sase randuri pe telefon, nu. */
@media (max-width: 720px) {
  .h2 {
    font-size: 1.75rem;     /* 28px, de la 44 */
    line-height: 1.02;
  }

  /* Si titlul mare, din acelasi motiv, dar pentru un defect mai grav decat
     estetica. Gasit pe 14 august 2026 la matura finala: pe telefon, pagina
     juridica ruseasca SE TRAGEA IN LATERAL cu 181 de pixeli. Vinovat era
     `<h1>`-ul ei - „Политика конфиденциальности" e un singur cuvant care nu
     are unde sa se rupa, si la 56px cere 533 de pixeli intr-o coloana de 329.
     Romana avea acelasi defect, mai mic („confidentialitate", 31px in plus).

     La 36 cuvantul cere 228 si incape intreg.

     COBORATE INCA O DATA in aceeasi zi, 36 -> 32 si 32 -> 28, fiindca Vitalie
     a cerut titlul mai mic dupa ce a vazut saitul pe telefonul lui. Primele
     cifre fusesera alese cat sa INCAPA, nu cat sa arate bine - 36 era pragul
     la care cuvantul rusesc nu mai impingea pagina, si atat.

     AMANDOUA COBOARA, nu doar titlul mare, si asta nu e zel: la 32 si 32 ar fi
     ajuns EGALE, iar doua marimi egale nu fac o ierarhie, ci o insiruire. E
     chiar regula scrisa in tokens.css despre h1 si h2 pe calculator, unde
     Vitalie a cerut 44 tocmai ca sa nu stea prea aproape de 56. Raportul
     ramane 32/28, adica ceva mai stramt decat pe calculator, dar viu.

     Cuvantul rusesc incape cu si mai mult loc: la 32 cere ~203px din 329. */
  .h1 { font-size: 2rem; }      /* 32px, de la 56 */

  /* Subtitlurile coboara si ele, dar regula NU e aici: `.h1__line-2` si
     `.h2__line-2` se definesc mai jos in fisier, deci scrisa aici n-ar face
     nimic. Vezi blocul de la capatul sectiunii de tipografie. */
}

/* Plasa de siguranta, la orice latime: un cuvant care tot nu incape se rupe in
   loc sa impinga pagina. Nu se vede niciodata cat timp cuvintele incap - dar
   ziua in care un client se cheama „Bundesausbildungsförderungsgesetz" nu
   trebuie sa fie ziua in care saitul se trage in lateral. */
.h1, .h2, .h4 { overflow-wrap: break-word; }

/* Al doilea rand al cupletului de sectiune. Acelasi tratament ca in hero,
   cerut de Vitalie pe 8 august 2026: nu doua randuri egale, ci titlu si
   subtitlu. Inaltimea de rand si spatierea literelor se resincronizeaza -
   valorile de la titlu sunt calibrate pentru 44px si la 24 ar inghesui textul.
   ATENTIE: pragul aripilor din components.css numara si marginea de aici. */
.h2__line-2 {
  display: block;
  color: var(--text-2);
  font-size: 1.5rem;          /* 24 px */
  line-height: var(--lh-body);
  letter-spacing: normal;
  margin-top: var(--s-12);
}

.h1__line-1 { display: block; color: var(--text-1); }

/* Al doilea rand al cupletului din hero. Pana pe 8 august 2026 avea aceeasi
   marime ca primul, cu diferenta doar de culoare - asa face si template-ul.
   Vitalie a cerut 24px, deci cupletul devine titlu plus subtitlu, nu doua
   randuri egale.
   Inaltimea de rand si spatierea literelor se resincronizeaza odata cu el:
   valorile mostenite de la titlu (rand mai strans decat litera, litere trase
   una spre alta) sunt calibrate pentru 56px si la 24px ar face textul
   inghesuit si greu de citit. */
.h1__line-2 {
  display: block;
  color: var(--text-2);
  font-size: 1.5rem;          /* 24 px */
  line-height: var(--lh-body);
  letter-spacing: normal;
  margin-top: var(--s-12);
}

/* SUBTITLURILE COBOARA ODATA CU TITLURILE, pe telefon. Cerut de Vitalie imediat
   dupa ce a vazut titlurile micsorate: „daca ai schimbat titlurile schimba si
   subtitlurile mai mici".

   Avea dreptate, si se arata cu cifre. Cei 24px de mai sus sunt calibrati
   pentru desktop, unde titlurile sunt 56 si 44 - rapoarte de 2.33 si 1.83,
   ierarhie limpede. Pe telefon titlurile coborasera la 32 si 28, iar
   subtitlurile ramasesera 24: raportul de la sectiune ajunsese 1.17. Adica
   doua randuri aproape la fel de mari, unul sub altul - nu titlu si subtitlu,
   ci doua titluri.

   La 20 rapoartele devin 1.6 si 1.4. NU se coboara mai mult, desi proportia de
   pe desktop ar cere vreo 15: sub 16px subtitlul ar ajunge mai mic decat textul
   obisnuit de sub el, si ierarhia s-ar rasturna in loc sa se repare.

   RANDUL SE STRANGE ODATA CU LITERA. `--lh-body` e 1.63, gandit pentru
   paragrafe lungi: la 24px dadea 39px pe rand, la 20 ar fi ramas 33 - deci un
   subtitlu de doua randuri ar fi tinut mai mult loc pe verticala decat titlul
   de deasupra lui. La 1.25 iese 25px, potrivit pentru doua-trei cuvinte.

   BLOCUL STA AICI, DUPA DEFINITII, SI NU SUS LANGA `.h1`. Prima varianta l-a
   pus in blocul de telefon de mai sus si N-A FACUT NIMIC: un `@media` nu adauga
   putere, deci la putere egala castiga ultimul scris din fisier - iar
   `.h1__line-2` se defineste mai jos. Masurat: subtitlurile ramasesera 24. E a
   doua oara in aceeasi zi cand capcana asta prinde, dupa cea din
   `portofoliu.css`, unde are si paznic. */
@media (max-width: 720px) {
  .h1__line-2,
  .h2__line-2 {
    font-size: 1.25rem;         /* 20px, de la 24 */
    line-height: 1.25;
  }
}

.h4 {
  margin: 0;
  font-size: var(--size-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  font-weight: var(--w-medium);
  color: var(--text-1);
}

.body { margin: 0; color: var(--text-2); }
.body--hero { max-width: var(--measure-hero); }
.body--header { max-width: var(--measure-header); }

/* --- Antetul de sectiune ---
   Stanga pentru sectiunile de argument, centrat pentru cele de expunere.
   Alternanta e deliberata. */

.section-head { display: flex; flex-direction: column; gap: var(--s-20); }
.section-head--center { align-items: center; text-align: center; }
.section-head--center .body { margin-inline: auto; }

/* Spatiul dintre un antet si continutul lui.
   Era 100 si 130. Vitalie a cerut mai putin pe 8 august 2026, uitandu-se la
   etapele de lucru: intre "to a site that is live." si cartele erau 111px, si
   parea o pauza, nu o legatura. Scazute impreuna si in acelasi raport, ca
   diferenta dintre un antet obisnuit si unul de vitrina sa ramana citibila. */
.section-head + * { margin-top: var(--s-60); }
.section-head--showcase + * { margin-top: var(--s-90); }

/* --- Aparitia la derulare ---
   Starea initiala se aplica DOAR cand JavaScript-ul a pornit si utilizatorul
   nu a cerut mai putina miscare. Fara asta, o pagina fara JS ramane neagra -
   exact defectul originalului Framer. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ BARA DE SUS ============
   Masurat pe template: 91px, fundal complet transparent, blur(10px),
   fara nicio margine. "Linia" care se vede e muchia blur-ului. */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: 91px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 6.6%, rgba(0, 0, 0, 0.3) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-40);
  height: 100%;
}

.nav__menu { display: flex; gap: var(--s-30); }

.nav__menu a {
  color: var(--text-2);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-ui);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__menu a:hover,
.nav__menu a[aria-current="page"] { color: var(--text-1); }

/* Comutatorul de limba, in locul butonului "Contact Us".
   Forma vine de pe hyperice.md: jgheab rotunjit cu trei scurtaturi, limba
   curenta pe o pastila plina. La ei jgheabul e alb la 10% pe fotografie; la noi
   e albastru plin, cerut de Vitalie.

   Marimile nu mai sunt calculate din logo, ci masurate pe hyperice.md pe
   9 august 2026, la 1440px: jgheabul lor are 30px inaltime, scrisul 14px cu
   randul strans la 14px, umplutura pastilei 12px in lateral si 4px intre
   scurtaturi. Vechea socoteala pornea de la inaltimea literelor din "vev.dev"
   si dadea 20px - corect ca aritmetica, dar comutatorul iesea la 38px si se
   uita urat la bara de 91px. Vitalie a cerut sa fie cat al lor, deci de acolo
   vin cifrele.

   Singura abatere de la ei: pastila noastra sta trasa inauntru cu 4px, fiindca
   jgheabul e albastru plin si pastila alba are nevoie de un inel ca sa se vada
   ca sta pe ceva. La ei jgheabul e transparent, deci pastila il umple pana la
   margine. De aceea scurtatura are 22px, nu 30: 22 + 4 sus + 4 jos = 30, adica
   exact inaltimea lor. */

.lang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 9999px;
  background: var(--blue);
}

.lang__item {
  padding: 4px var(--s-12);
  border-radius: 9999px;
  font-size: var(--size-small);   /* 14 px */
  font-weight: var(--w-semibold);
  /* Randul strans la marimea fontului: doua majuscule nu au nici coada, nici
     caciula, deci orice spatiu peste 14px doar umfla pastila degeaba. */
  line-height: 1;
  /* Alb stins, nu gri: pe albastru, un gri adevarat se murdareste.

     0,95 si nu 0,7, de pe 15 august 2026: la 0,7 iesea un contrast de 3,23,
     sub pragul de 4,5 pe care il cere WCAG pentru text mic - masurat de
     Lighthouse pe fiecare pagina. Nuanta nu se poate pastra si trece pragul in
     acelasi timp: albastrul e prea deschis, iar orice albastru-pal se opreste
     la 4,40. La 0,95 contrastul e 4,71, iar deosebirea fata de limba curenta
     ramane oricum pastila alba din spatele ei, nu culoarea literelor. */
  color: rgba(255, 255, 255, 0.95);
}

.lang__item[aria-current="true"] {
  background: #FFFFFF;
  color: var(--blue);
}

/* ---- Antetul pe telefon ----
   Adaugat pe 14 august 2026. Pana atunci antetul de calculator se randa ca
   atare pe orice ecran: la 375px iesea in afara cu 242px (engleza), 248
   (romana), 256 (rusa), iar `overflow-x: clip` de pe `body` facea ca partea
   iesita sa nu se poata ajunge NICICUM - nici prin tragere laterala. Ce
   ramanea dincolo de margine: comutatorul de limba intreg, butonul „Contact
   Us", si logo-ul turtit la 0x0, care e singura legatura catre prima pagina.

   HOTARUL E 900px, si NU 720 ca restul foilor. Prima scriere l-a pus la 720,
   pe motiv ca „la 768 antetul de calculator incape". Masurat pe 14 august 2026,
   nu incape: antetul rusesc cere 834px cu totul - logo 159, meniul 403 cu
   spatiile lui, comutatorul 146, plus doua spatii de 40 si umplutura paginii.
   La 768 browserul il indesa oricum: logo-ul se micsora la 97x29 (61% din
   marimea lui) si „О нас", un cuvant de doua litere, se rupea in doua randuri.

   900 lasa si o rezerva: cuvintele meniului se mai schimba, si o traducere mai
   lunga n-are voie sa strice antetul a doua oara. De la 901 in sus incape tot,
   masurat in toate trei limbile.

   Butonul si panoul sunt SCRISE pentru telefon si STINSE pe calculator, nu
   invers, ca sa nu se atinga nimic din antetul aprobat. */

.nav__buton {
  display: none;              /* aprins mai jos, sub 721px */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;                /* 44x44 e cel mai mic loc pe care un deget il
                                 nimereste sigur */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-1);
  cursor: pointer;
}

.nav__liniute {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.nav__liniute i {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

/* Deschis, cele trei liniute se fac cruce: liniuta din mijloc se stinge, iar
   celelalte doua se rotesc una peste alta. 7px e jumatatea distantei dintre
   prima si a treia (2px liniuta + 5px spatiu), deci exact cat trebuie ca sa se
   intalneasca la mijloc. */
.nav__buton[aria-expanded="true"] .nav__liniute i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__buton[aria-expanded="true"] .nav__liniute i:nth-child(2) { opacity: 0; }
.nav__buton[aria-expanded="true"] .nav__liniute i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Pe calculator panoul nu exista pentru asezare: `display: contents` il face
   nevazut ca element, iar meniul si comutatorul raman copiii directi ai barei,
   exact ca inainte. */
.nav__panou { display: contents; }

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

  /* Logo-ul nu se mai turteste. Fara `flex-shrink: 0` ajungea la 0x0 pe 375px
     si nu mai era nicio cale inapoi acasa. */
  .nav__logo { flex-shrink: 0; }
  .nav__logo img { width: 120px; height: auto; }

  .nav__inner { gap: var(--s-12); }

  /* MARIMILE SE IAU DIN `tokens.css` SI TREBUIE SA EXISTE ACOLO. Prima
     scriere a acestui bloc cerea `--s-16` si `--s-32`, care nu exista in
     scara: un `var()` fara valoare face browserul sa arunce RANDUL INTREG,
     deci panoul a ramas cu zero umplutura si textul lipit de marginea
     ecranului - fara nicio eroare nicaieri. Scara are 10, 12, 20, 24, 26, 30,
     40, 50, 60, 70, 90, 100, 120, 130. */
  .nav__panou {
    display: flex;
    position: fixed;
    inset-block-start: 91px;    /* chiar sub bara */
    inset-inline: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-30);
    padding: var(--s-30) var(--s-24) var(--s-40);
    /* OPAC, nu 92%. Cu 8% de transparenta, titlul urias si deschis de pe prima
       pagina se citea prin panou si meniul arata a greseala. `--surface-1` e
       aproape negru, deci panoul ramane al saitului si nu al unei ferestre
       straine puse peste el. Verificat la 375px pe /ru/, unde titlul e cel mai
       mare. */
    background: var(--surface-1);
    /* Marginea de jos tine locul umbrei: panoul se opreste in mijlocul paginii
       si, fara ea, taietura nu se citeste ca margine de meniu. */
    border-block-end: 1px solid var(--line-07);
    /* Nu se ia focus si nu se citeste cat e inchis. `visibility` face si una,
       si alta - `opacity: 0` singur ar lasa legaturile apasabile si citibile,
       adica un meniu invizibil peste care se poate cadea cu Tab. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out),
                visibility var(--dur-fast);
    /* Daca cineva pune candva mai multe intrari decat incap, se deruleaza. */
    max-height: calc(100dvh - 91px);
    overflow-y: auto;
  }

  .nav[data-meniu="deschis"] .nav__panou {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .nav__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }

  /* Randuri intregi, ca degetul sa aiba unde cadea. */
  .nav__menu a {
    display: block;
    width: 100%;
    padding: var(--s-12) 0;
    font-size: var(--size-h4);
  }

  /* Bara fixa are 91px si nu creste: panoul e deasupra paginii, nu in ea. */
}

/* Fara JavaScript butonul n-are cine sa-l apese, deci se stinge si panoul
   ramane la vedere, pe un rand care se trage cu degetul. Nu e frumos, dar
   totul se poate ajunge - iar varianta cealalta ar fi un meniu care nu se
   deschide niciodata. */
html:not(.js) .nav__buton { display: none; }

@media (max-width: 900px) {
  html:not(.js) .nav__panou {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--s-20);
    visibility: visible;
    opacity: 1;
    transform: none;
    padding: 0;
    background: none;
    backdrop-filter: none;
    max-height: none;
    overflow-x: auto;
  }
  html:not(.js) .nav__menu { flex-direction: row; width: auto; gap: var(--s-20); }
  html:not(.js) .nav__menu a { display: inline; width: auto; padding: 0; font-size: inherit; }
}

/* Bara e fixa, deci continutul are nevoie de spatiu sub ea. */
main { padding-top: 91px; }

/* Si tot din cauza barei fixe: orice element la care se ajunge prin derulare
   trebuie sa se opreasca mai jos, altfel ramane sub bara.

   Regula a fost intai numai pe `[id]`, si asa acoperea ancorele dar NU si
   parcurgerea cu tastatura. Masurat in browser pe 13 august 2026, mergand
   inapoi cu Shift+Tab de la subsol: butonul „Request a Quote" iesea cu 5px
   sub bara, iar legatura „Privacy Policy" din randul de acord ramanea
   ACOPERITA cu totul - browserul nici nu derula, fiindca o socotea deja pe
   ecran. Cine merge numai cu tastatura pierdea focusul din vedere.

   De-aia primesc spatiul toate elementele care pot lua focus, nu doar cele cu
   `id`. `:where()` le da specificitate zero, deci nu incurca nimic. */
[id],
:where(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-top: calc(91px + var(--s-20));
}

/* ============ SUBSOL ============ */

/* Subsolul isi poarta singur spatierea, nu mai imprumuta `section--closing`.
   Cele trei goluri de la capatul paginii erau 240, 120 si 120px - Vitalie le-a
   marcat pe toate trei. Acum 120, 60 si 60: raportul se pastreaza, dar
   despartirea mare ramane una singura, cea dintre formular si subsol. */
.footer {
  border-top: 1px solid var(--line-07);
  margin-top: var(--s-60);
  /* Jos e dublu fata de sus, si nu din estetica: ceata de la marginea de jos a
     ecranului tine 160px, iar randul de copyright cadea in ea si se citea
     incetosat cand ajungeai la capatul paginii. Vitalie a semnalat-o si a
     preferat spatiu, nu oprirea cetii. Cu 120px, randul ramane la vreo 110px
     de marginea de jos, unde neclaritatea e sub o zecime de pixel. */
  padding-block: var(--s-60) var(--s-120);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-50);
}

.footer__brand { display: flex; flex-direction: column; gap: var(--s-20); max-width: 280px; }

.footer__col { display: flex; flex-direction: column; gap: var(--s-12); font-style: normal; }

.footer__title {
  margin: 0 0 var(--s-10);
  font-size: var(--size-small);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-ui);
  color: var(--text-1);
}

.footer__col a, .footer__col span { color: var(--text-2); }
.footer__col a:hover { color: var(--text-1); }

/* "Stay connected" sta putin mai jos decat textul de deasupra - cerut de
   Vitalie. `.footer__brand` are deja 20px intre elemente, deci se adauga
   diferenta, nu toata distanta. */
.footer__title--social { margin-top: var(--s-10); }

.social { display: flex; }

/* Umplutura face tinta de 36px pentru deget fara sa se vada vreo cutie, iar
   marginea negativa readuce prima pictograma pe aceeasi linie verticala cu
   textul de deasupra. */
.social__link { display: grid; place-items: center; padding: 8px; }
.social { margin-inline-start: -8px; }

.social__icon {
  /* 24px, marite la cererea lui Vitalie. Tinta pentru deget ramane 40px,
     fiindca umplutura s-a micsorat cu cat a crescut pictograma. */
  height: 24px;
  width: auto;
  opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.social__link:hover .social__icon,
.social__link:focus-visible .social__icon { opacity: 1; }

.footer__legal {
  margin-top: var(--s-60);
  padding-top: var(--s-30);
  border-top: 1px solid var(--line-07);
  color: var(--text-3);
  font-size: var(--size-small);
}

/* Coloana de contact poarta acum si datele de inregistrare: unsprezece randuri
   scurte, nu patru. Distanta dintre ele scade, altfel coloana se lungeste cat
   toate celelalte trei la un loc si subsolul se dezechilibreaza. */
.footer__contact { gap: 6px; }

.footer__company { color: var(--text-1); font-weight: var(--w-medium); }

.footer__copy { margin: 0; }