/* Miscarea din pagina. Trei lucruri, toate optionale:
   cursorul propriu, titlul care se ridica litera cu litera, si imaginile care
   se misca pe scroll. Nimic din ele nu tine pagina in picioare — daca scriptul
   nu porneste, site-ul arata exact ca inainte. De-aia starile de plecare sunt
   puse din JS, nu din CSS: altfel un JS blocat ar lasa titlul invizibil. */

/* --- cursorul ------------------------------------------------------------ */
/* Un patrat mic care urmareste mouse-ul cu o intarziere. Nimic altceva: punctul
   lipit de varful sagetii a picat, se vedea ca o pata neagra sau alba peste tot
   pe unde treceai.

   mix-blend-mode: difference il inverseaza singur peste orice fundal, deci nu
   trebuie sa stim ce e dedesubt. */
.vs-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  color: #ff1f1f;
  opacity: 0;
  pointer-events: none;
  z-index: 2147483000;
  will-change: transform;
  transition: width .28s cubic-bezier(.22,1,.36,1), height .28s cubic-bezier(.22,1,.36,1),
              margin .28s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
/* Un plus, nu un patrat: patratul e o forma, plusul e un reper — arata unde
   esti fara sa incadreze nimic. */
.vs-cursor::before, .vs-cursor::after {
  content: ""; position: absolute; background: currentColor;
}
.vs-cursor::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.vs-cursor::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
/* Pana nu se termina animatia de intrare nu exista: intrarea trebuie sa fie
   curata, iar un cursor care se plimba peste ea o strica. */
.vs-cursor.is-ready { opacity: 1; }
/* Regula: cursorul nu creste niciodata intr-o bula. Peste ceva pe care poti
   apasa, el se strange si iese din drum — reactioneaza obiectul, nu cursorul. */
.vs-cursor.is-hot { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.vs-cursor.is-down { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
/* Peste poze dispare cu totul: acolo fereastra de cod e cursorul. */
.vs-cursor.is-lens { opacity: 0; }
.vs-cursor.is-out { opacity: 0; }

/* --- titlul care se ridica ----------------------------------------------- */
/* Fiecare cuvant e o fereastra cu fundul taiat; litera urca din ea si se
   indreapta. Perspectiva sta pe cuvant, nu pe litera, ca sa se roteasca toate
   in jurul aceleiasi axe si sa para o singura bucata de hartie. */
.vs-split { display: inline-block; }
.vs-split__w { display: inline-block; vertical-align: top; }

/* Litera se scrie de doua ori peste ea insasi: intai conturul, apoi plinul.
   Litera adevarata ramane in pagina, dar nevopsita — ea tine latimea, randul
   si ruperea in cuvinte, iar cele doua straturi se aseaza peste ea. Daca am
   fi desenat direct in ::before si ::after fara ea, fiecare litera ar fi avut
   latime zero si cuvintele s-ar fi strans unul in altul. */
.vs-split__c {
  position: relative;
  display: inline-block;
  white-space: pre;
  color: transparent;
}
.vs-split__c::before,
.vs-split__c::after {
  content: attr(data-ch);
  position: absolute;
  left: 0; top: 0;
  white-space: pre;
}
/* Conturul: creionul trece o data, de la stanga la dreapta. */
.vs-split__c::before {
  color: transparent;
  -webkit-text-stroke: 1px var(--vs-ink, #121212);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.33, 1, .68, 1) calc(var(--vs-i) * 70ms),
              opacity .5s ease calc(var(--vs-i) * 70ms + 1.9s);
}
/* Plinul vine dupa, de jos in sus, ca o cerneala care urca in desen. */
.vs-split__c::after {
  color: var(--vs-ink, #121212);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1) calc(var(--vs-i) * 70ms + 1s);
}
.vs-split.is-in .vs-split__c::before { clip-path: inset(0); opacity: 0; }
.vs-split.is-in .vs-split__c::after  { clip-path: inset(0); }

/* --- imaginile ----------------------------------------------------------- */
/* Parallax si inclinarea dupa viteza scroll-ului se scriu din JS in --vs-py si
   --vs-sk. Le tinem intr-un singur transform, altfel se calca una pe alta. */
.vs-par {
  transform: translate3d(0, var(--vs-py, 0px), 0) skewY(var(--vs-sk, 0deg));
  will-change: transform;
}
/* Fara marire la trecerea cursorului: cadrele galeriei nu au latime proprie,
   asa ca imaginea marita iesea din ele si impingea toata grila. Ramane doar
   lupa cu codul, care nu atinge asezarea. */

@media (prefers-reduced-motion: reduce) {
  .vs-split__c { color: inherit; }
  .vs-split__c::before, .vs-split__c::after { display: none; }
  .vs-par { transform: none; }
  .vs-cursor { display: none; }
  html.vs-has-cursor, html.vs-has-cursor * { cursor: auto !important; }
}

/* --- latimea paginii ----------------------------------------------------- */
/* Builder-ul aseaza fiecare bloc intr-o coloana de 1224px si centreaza tot.
   Pe un ecran de 1920 raman aproape 350px goi de fiecare parte, si de-acolo
   vine senzatia de sablon. Doua schimbari: coloana creste, iar galeria iese
   complet din ea, pana in marginile ferestrei. */
/* Aceeasi margine ca galeria si ca antetul: 32px de marginea ferestrei, si
   fara plafon de latime — pe un ecran de 1900 un plafon i-ar trage inapoi spre
   mijloc tocmai cand galeria ajunge in margini, si s-ar vedea doua incadrari
   diferite in aceeasi pagina. Randurile de text nu cresc odata cu coloana:
   pentru ele e regula de mai jos. */
/* Scrisul nu se lipeste de linie: liniile raman unde sunt, textul intra putin.
   Galeria nu e atinsa — ea isi pune singura latimea, masurata, si pozele au
   voie sa ajunga pana in cadru. */
.block-layout {
  max-width: calc(100vw - var(--vs-sbw, 0px) - (var(--vs-edge) + var(--vs-pad)) * 2) !important;
}

/* Galeria pana la marginea ecranului.
   `50% - 50vw` duce marginea din stanga exact pe marginea ferestrei, oricat de
   lata ar fi coloana — deci latimea nu se scrie nicaieri si nu se strica la
   alt breakpoint. Scadem latimea barei de derulare (--vs-sbw, masurata din JS)
   pentru ca 100vw o include, si fara asta pagina ar capata o derulare
   orizontala de vreo 15px. */
#selection .grid-gallery {
  --vs-vw: calc(100vw - var(--vs-sbw, 0px));
  width: var(--vs-vw);
  max-width: var(--vs-vw);
  margin-left: calc(50% - var(--vs-vw) / 2);
  padding: 0 32px;
  box-sizing: border-box;
}

/* Randurile de text nu cresc odata cu coloana. Un rand de 16px intins pe 1560px
   ajunge pe la 190 de caractere, de vreo trei ori peste cat se citeste comod;
   titlul poate sa fie lat, textul curent nu. */
#hero .text-box p, #cta .text-box p { max-width: 68ch; }

@media (max-width: 920px) {
  /* Pe telefon coloana e deja cat ecranul; galeria nu mai are din ce sa iasa. */
  #selection .grid-gallery { width: auto; max-width: none; margin-left: 0; padding: 0; }
}

/* Lenis: pagina isi pierde inaltimea fixa, iar cat timp e oprita nu se
   deruleaza deloc. */
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-stopped { overflow: hidden; }

/* ---------- logo: cercul care il cuprinde ---------- */
/* Singurul lucru rotund ramas pe site.

   Caseta logoului e 166x52, dar marca e desenata cu object-fit: contain dintr-o
   imagine inalta si e lipita la stanga casetei — deci ocupa doar ~40x52 acolo,
   restul casetei e gol. Un disc socotit din latimea casetei ar iesi de trei ori
   cat marca si mult prea la dreapta. Il socotim din inaltime si il asezam pe
   marca:

   marca e lata cat 0.765 din inaltimea casetei (raportul imaginii), deci
   centrul ei cade la 0.383 * inaltime de marginea din stanga. Cu left: 0,
   centrul discului sta deja la jumatatea lui, adica la 0.7 * inaltime, si mai
   are de mers inapoi 0.317 * inaltime. Procentele din translate se socotesc din
   marimea discului, iar discul e lat cat 1.4 * inaltime — deci
   0.317 / 1.4 = 22.6% din el. */
.block-header-logo { position: relative; }
.block-header-logo::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  height: 140%;
  width: auto;
  aspect-ratio: 1;
  translate: -22.6% -50%;
  border-radius: 50%;
  background: #121212;
  transform: scale(0);
  transition: transform .5s cubic-bezier(.19, 1, .22, 1);
  z-index: 0;
  pointer-events: none;
}
.block-header-logo:hover::before { transform: scale(1); }
.block-header-logo__image, .block-header-logo img {
  position: relative; z-index: 1;
  transition: filter .3s ease .06s;
}
.block-header-logo:hover .block-header-logo__image,
.block-header-logo:hover img { filter: invert(1); }

/* ---------- codul din spatele pozelor ---------- */
/* Poza ramane intreaga. Prin fereastra cursorului se vede o pagina de cod, ca
   si cum acolo poza ar fi transparenta.

   Fereastra e un element fix, cu cursorul in centrul ei, si se deschide taind
   in ea insasi — inset() masoara de la marginile ei, deci nu exista nimic de
   potrivit cu nimic. Patrat, si nu cerc, si din acelasi motiv pentru care e
   curat: marginile sunt drepte si cad pe pixeli intregi, deci nu au ce zimti.
   Un cerc trebuie neted, si peste un contur alb neted se vedea o dunga care
   se batea cu ea insasi. */
@property --vs-r {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

.vs-par { position: relative; }

.vs-lens {
  position: fixed;
  top: 0; left: 0;
  width:  calc(var(--vs-lens, 26px) * 2);
  height: calc(var(--vs-lens, 26px) * 2);
  margin: calc(var(--vs-lens, 26px) * -1) 0 0 calc(var(--vs-lens, 26px) * -1);
  overflow: hidden;
  pointer-events: none;
  z-index: 2147482999;          /* imediat sub punctul cursorului */
  will-change: transform;
  /* Se deschide din mijloc spre margini. In procente, deci fara @property. */
  clip-path: inset(50%);
  transition: clip-path .28s cubic-bezier(.22, 1, .36, 1);
}
.vs-lens.is-on { clip-path: inset(0); }

.vs-lens__page {
  position: absolute;
  background: #0e0e0e; color: #d8d6d2;
  /* Fara padding: prin inel trebuie sa se vada cod si in coltul de sus-stanga,
     nu o rama goala. Randurile sunt lungite in JS ca sa treaca si de marginea
     din dreapta, oricat de lata ar fi poza. */
  padding: 0;
  font: 400 10px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}
.vs-lens__page b { font-weight: 400; color: #56585e; }   /* comentarii, acolade */
.vs-lens__page i { font-style: normal; color: #f4f3f1; }
.vs-lens__page u { text-decoration: none; color: #4a4c52; }  /* numarul randului */

/* Fara cursor propriu (atingere, ecran mic) n-ai cum sa tii lupa. */
@media (max-width: 1023px), (pointer: coarse) {
  .vs-lens { display: none; }
}

/* ---------- incadrarea, o singura linie pentru toata pagina ---------- */
/* Toate se opresc la aceeasi distanta de marginea ferestrei: logoul, meniul,
   pozele din galerie, textul si footerul. Distanta e scrisa o singura data,
   aici; se schimba numarul si se muta toate deodata. */
:root {
  --vs-edge: 20px;   /* unde cad liniile de cadru */
  --vs-pad: 14px;    /* si cat sta scrisul departe de ele */
}

/* Builder-ul tine antetul intr-o coloana de 1224px si blocurile de continut in
   alta, si de-aia logoul si meniul stateau vizibil mai inauntru decat restul.

   Marginea dupa care ne luam e galeria: ea iese pana in marginile ferestrei si
   isi tine pozele la 32px de ele. Antetul si footerul primesc exact aceeasi
   margine, deci logoul, meniul, pozele si footerul cad toate pe aceeasi linie,
   la stanga si la dreapta, oricat de lat ar fi ecranul. Fara plafon de latime:
   pe un ecran de 1900 un plafon de 1560 i-ar trage inapoi spre mijloc tocmai
   cand galeria ajunge in margini.

   100vw include si bara de derulare, de-aia o scadem (--vs-sbw, masurata din
   JS) — altfel marginea din dreapta ar iesi cu vreo 7px mai mica decat cea din
   stanga.

   Meniul e deja aliniat la dreapta in interiorul lui, deci se duce singur pana
   la marginea noua. */
.block-header-layout-desktop,
#footer .block-layout {
  max-width: calc(100vw - var(--vs-sbw, 0px) - (var(--vs-edge) + var(--vs-pad)) * 2) !important;
}
.block-header-layout-desktop {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Desenul din logo: imaginea e inalta, caseta lata, iar object-fit: contain
   aseaza desenul in mijloc — raman vreo 60 de pixeli goi in stanga marcii, si
   logoul ar parea in continuare tras inauntru. Il lipim de marginea casetei. */
.block-header-logo__image { object-position: left center; }

/* Linia de sub pagina curenta. Builder-ul o pune ca text-decoration, deci trece
   si peste dreptunghiul negru de la hover si se vede ca o dunga alba taind
   butonul. */
.block-header__nav .item-content,
.block-header__nav .item-content:hover { text-decoration: none !important; }

/* ---------- meniul din antet ---------- */
/* Un dreptunghi negru cat butonul, care urca de jos, si textul se face deschis
   peste el. Colturi drepte — in rest pe site nu se rotunjeste nimic afara de
   discul de sub logo.

   isolation: isolate ii da linkului propriul context de stivuire, deci
   z-index: -1 de pe dreptunghi ramane in spatele textului fara sa cada in
   spatele fundalului antetului. */
.block-header__nav .item-content {
  position: relative;
  isolation: isolate;
  transition: color .2s ease .05s;
}
.block-header__nav .item-content::before {
  content: "";
  position: absolute;
  inset: -7px -13px;
  background: #121212;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .36s cubic-bezier(.19, 1, .22, 1);
}
.block-header__nav .item-content:hover::before { transform: scaleY(1); }
.block-header__nav .item-content:hover { color: #f4f3f1 !important; }

/* ---------- fontul site-ului ---------- */
/* SF Pro Display, servit de pe acelasi domeniu — fara Google, fara CDN. Din
   pachet vin trei grosimi drepte (Regular, Medium, Bold); restul grosimilor din
   pachet sunt doar cursive, si cursivele nu se folosesc nicaieri pe site.

   Intervalele de grosime din font-weight acopera tot ce cere builder-ul (400,
   500, 600, 700) fara sa lase nicio valoare pe dinafara: fara ele, un 600 ar
   cadea intre doua fisiere si browserul l-ar ingrosa singur, iar o ingrosare
   facuta de browser se vede — literele isi pierd desenul.

   font-display: swap — textul se vede din prima cu fontul de sistem si se
   aseaza cand ajunge al nostru. Alternativa e o pagina goala cat se incarca
   300 KB. */
/* Cele doua taieturi vin cu ascendente diferite: 56 si 60 de pixeli la un corp
   de 64. Fiecare litera din titlu e o casuta asezata pe propria ei baza, deci
   ESSENCE cadea cu 2px mai jos decat CONCEPT si IDENTITY, si nicio linie nu
   putea trece prin amandoua. Le impunem aceleasi metrici verticale. */
/* Inter, o singura data: e font variabil, deci acelasi fisier da orice
   greutate intre 100 si 900 si isi potriveste singur desenul dupa marimea
   corpului (axa opsz). Asa avem in sfarsit Medium si SemiBold adevarate, nu
   un Regular ingrosat cu contur.

   Tot de-aici vine si ce lipsea de luni de zile: a-breve, s-virgula,
   t-virgula. Arhiva dinainte n-avea niciuna, si de-aia a trecut tot site-ul
   pe engleza. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fx/fonts/inter-var.woff2") format("woff2-variations"),
       url("/assets/fx/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* Fontul builder-ului se cere prin variabile (--h1-font-family si celelalte),
   deci nu ajunge sa scriem font-family pe elemente: le rescriem si pe ele. */
*, *::before, *::after {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-optical-sizing: auto;
}
.vs-lens__page, .vs-lens__page * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}


/* --- titlurile, dupa modelul cerut ---------------------------------------- */
/* Valorile sunt luate din pagina de referinta, nu ghicite: capitale, greutate
   600, apropiere -0.02em, interlinie 1. Fara ele, acelasi font arata cu totul
   altfel — jumatate din "alt font" era de fapt asta. */
#hero h1, h1, h2, h3, .text-box h1, .text-box h2, .text-box h3 {
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  /* Majuscula lui Inter e 0.7275em fata de 0.7778 la modelul de referinta, deci
     la acelasi corp titlul iese cu 6.9% mai scund. Corpul NU se atinge totusi:
     marimea din pagina e cea in care CONCEPT. IDENTITY. ESSENCE. incape pe un
     rand si in care linia de baza se opreste fix in punct. O crestere de 7%
     ar sparge randul ca sa castige o potrivire pe care oricum n-o vede nimeni
     alaturi de original. */
}

/* Cuvantul accentuat sare peste o treapta, nu peste doua. Intre 600 si 700
   Inter pune un singur pixel de bara la un corp de 100 — masurat: 13 fata de
   14 — deci contrastul nu se vedea deloc, si CONCEPT arata la fel de gras ca
   ESSENCE. La 800 bara ajunge la 17: aceeasi diferenta pe care o vedeai
   inainte, dar acum din fisier, nu dintr-un contur lipit peste litera.
   Restul titlului ramane semibold adevarat. */
h1 strong, h1 b, .vs-split strong, .vs-split b { font-weight: 800 !important; }

/* --- corecturi cerute -------------------------------------------------- */

/* Galeria nu mai sare la intrare. Builder-ul porneste fiecare poza din
   translateY(32%) scale(.98) si le duce pe toate sase la 1 in aceeasi clipa —
   de aici impresia ca se mareste galeria intreaga. Ramane doar miscarea
   noastra: o coloana urca, cealalta coboara. */
.vs-par .image, .vs-par [data-animation-role="image"] { transform: none !important; }

/* Numele din footer e logotip, nu titlu: se intoarce la fontul si la
   spatierea lui de dinainte. Regula de titluri il prinsese la gramada. */
#footer h3 {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  -webkit-text-stroke: 0 !important;
  /* Valorile logotipului stau in stilul din pagina (build.py). Regula de titluri
     le batea, fiind !important, asa ca le scriem inapoi identic. */
  text-transform: uppercase !important;
  letter-spacing: .3em !important;
  word-spacing: .32em !important;
  font-weight: 400 !important;
  line-height: normal !important;
}

/* Conturul care facea din Regular un fals semibold a plecat: acum 600 e o
   greutate adevarata din fisier. Cu el pleaca si motivul pentru care ESSENCE
   statea cu doi pixeli mai jos — o singura taietura, o singura linie de baza,
   fara ascent-override pus ca proptea.

   Conturul de pe litera plina a plecat si el. In ::before e desenul care se
   traseaza, si acolo ramane; in ::after e cerneala, si acolo ingrosa fiecare
   litera la fel — asa ca 600 si 700 ajungeau la aceeasi grosime si CONCEPT
   nu se mai deosebea de ESSENCE. */
/* Cuvantul accentuat are fisier propriu (Bold), deci nu are nevoie de trucul asta. */
/* Conturul subtire care face din Regular un semibold creste litera in toate
   partile, cu vreo jumatate de pixel. Cuvantul ingrosat il primeste si el, ca
   toate trei sa aiba exact aceeasi inaltime — altfel ESSENCE statea mai jos
   decat CONCEPT si linia de deasupra nu-l atingea. */

/* Fontul logotipului din footer, asa cum il cerea builder-ul inainte. */
@font-face {
  font-family: "Poppins";
  src: url("/assets/fx/fonts/poppins-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/fx/fonts/poppins-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Galeria: fixa, din marginea din stanga in cea din dreapta, pozele lipite.

   Marirea la trecerea cursorului venea de la .hover--grow, pusa nu pe poza ci
   pe cutia care tine toata galeria — de aceea se umfla blocul intreg, nu poza
   de sub cursor. */
.hover--grow:hover { scale: none !important; }
/* Galeria sta in acelasi cadru ca tot restul, ca pozele sa inceapa exact sub
   logo si deasupra footerului. Cei 32px de captuseala ai builder-ului ar fi
   tras pozele inauntru fata de logo, deci ies. */
#selection .grid-gallery { padding-left: 0 !important; padding-right: 0 !important; }
.layout-element:has(.grid-gallery) {
  scale: none !important;
  translate: none !important;
}
/* Fara golul dintre poze: alunecarea coloanei din mijloc se citeste doar daca
   are de ce sa se desprinda. */
.grid-gallery-grid { gap: 0 !important; }
/* Nicio micsorare, nici la intrare, nici la hover. */
.vs-par .image, .vs-par [data-animation-role="image"] {
  transform: none !important; scale: none !important; translate: none !important;
}
/* Cadrele stau fixe si lipite; se plimba fotografia inauntrul lor. Inainte
   miscam cadrul, si atunci vecinele se calcau una pe alta. Cadrul taie ce
   iese (.image are deja overflow: hidden), iar poza e cu 18% mai inalta decat
   el, deci are de unde aluneca fara sa dezveleasca fundalul. */
.vs-par { transform: none !important; }
.vs-par .image__image {
  position: absolute !important;
  left: 0 !important; top: -9% !important;
  width: 100% !important; height: 118% !important;
  object-fit: cover !important;
  transform: translate3d(0, var(--vs-py, 0px), 0);
  will-change: transform;
}

/* --- ramele in care se deruleaza un site intreg ------------------------- */
/* Aici poza nu mai e o fotografie plimbata cativa pixeli, ci pagina intreaga
   a unui site: rama e fereastra browserului, iar derularea paginii noastre
   trage captura prin ea. De-aia inaltimea e "auto" — trebuie sa ramana cat e
   captura, nu cat rama. */
.vs-par.vs-site .image__image {
  height: auto !important;
  top: 0 !important;
  transform: translate3d(0, var(--vs-sy, 0px), 0);
  /* Site-ul intra in pagina ca o schita: fara culoare, cu contrastul putin
     ridicat, ca o copie la imprimanta. Pe masura ce rama urca prin ecran isi
     primeste culorile inapoi. --vs-gray vine din cat ai derulat, deci merge si
     inapoi daca urci — nu e o animatie care se joaca o data. */
  filter: grayscale(var(--vs-gray, 1))
          contrast(calc(1 + var(--vs-gray, 1) * .14))
          brightness(calc(1 + var(--vs-gray, 1) * .04));
}

/* Textul din hero statea lipit de antet, cu tot golul adunat sub buton: ultimul
   rand al grilei e 1fr si inghite singur spatiul ramas. Ii dam un pic de aer
   deasupra, iar 1fr cedeaza exact cat luam noi — inaltimea blocului nu creste. */
#hero .block-layout { padding-top: 72px; }

/* ---------- coala de desen ---------------------------------------------- */
/* Pagina se poarta ca o plansa de arhitectura: doua linii de cadru pe margini,
   cate o linie la fiecare sectiune, marcaje in colturi si cote scrise marunt,
   cu litera de masina de scris. Totul sub continut si fara sa prinda mouse-ul —
   e hartia pe care sta desenul, nu desenul. */
:root {
  --vs-line: rgba(18, 18, 18, .13);
  --vs-line-soft: rgba(18, 18, 18, .07);
  --vs-note: rgba(18, 18, 18, .34);
}

.vs-sheet {
  position: fixed; inset: 0;
  pointer-events: none;
  /* Peste sectiuni, nu sub ele: sectiunile isi fac fiecare contextul lor de
     stivuire, si o coala asezata dedesubt nu s-ar vedea nicaieri. Liniile sunt
     destul de subtiri cat sa treaca peste continut fara sa-l tulbure — asa
     trec si pe plansa adevarata. */
  z-index: 3;
}
/* Cele doua linii de cadru cad exact pe marginea dupa care se aliniaza tot
   restul paginii, deci raman lipite de logo si de pozele din galerie. */
.vs-sheet__v {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--vs-line);
}
.vs-sheet__v--l { left: var(--vs-edge); }
.vs-sheet__v--r { right: var(--vs-edge); }

/* Marcajele de colt: doua capete de cruce, ca reperele de taiere de pe plansa. */
.vs-sheet__x {
  position: absolute; width: 13px; height: 13px;
}
.vs-sheet__x::before, .vs-sheet__x::after {
  content: ""; position: absolute; background: var(--vs-line);
}
.vs-sheet__x::before { left: 0; right: 0; top: 6px; height: 1px; }
.vs-sheet__x::after { top: 0; bottom: 0; left: 6px; width: 1px; }

/* Linia dintre sectiuni, cu cota ei. Sta in curgerea paginii, deci se muta
   odata cu ea; liniile de cadru stau fixe, ca o rama. */
.vs-rule {
  position: absolute;
  /* Intr-o parte trece peste linia de cadru, in cealalta se opreste in ea:
     asta e regula colturilor pe tot site-ul — una fuge, cealalta se opreste. */
  left: calc(-1 * var(--vs-pad));
  right: calc(-1 * var(--vs-pad));
  top: 0;
  height: 1px; background: var(--vs-line);
  pointer-events: none; z-index: 1;
}
.vs-rule__t, .vs-rule__n {
  position: absolute; top: 7px;
  font: 400 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vs-note); white-space: nowrap;
}
/* Liniile isi schimba capetele de la o sectiune la alta, scrisul nu: eticheta
   si cota stau fix pe verticala de unde incepe si unde se termina continutul,
   la fel in toata pagina. Doar liniile sunt desen. */
.vs-rule__t { left: var(--vs-pad); }
.vs-rule__n { right: var(--vs-pad); }
.vs-rule--a .vs-rule__t { left: calc(var(--vs-pad) + var(--vs-edge)); }
.vs-rule--a .vs-rule__n { right: var(--vs-pad); }
.vs-rule--b .vs-rule__t { left: var(--vs-pad); }
.vs-rule--b .vs-rule__n { right: calc(var(--vs-pad) + var(--vs-edge)); }

/* Continutul sta deasupra colii. */
.block, #footer { position: relative; z-index: 1; }

/* ---------- titlul, trasat ca o schita ---------------------------------- */
/* Doua repere il incadreaza: unul deasupra literelor, unul dedesubt. Niciunul
   nu trece prin scris — reperele stau in afara lui, la 12px peste linia
   capetelor si la 10px sub linia de baza, iar pozitiile alea vin din metricile
   fontului, nu din em-uri ghicite.

   La capete, liniile nu se opresc politicos una in cealalta: se incaleca, cu
   depasire, cum lasa un desenator coltul cand traseaza cu rigla. Bratele nu
   sunt egale — cel din stanga sus si cel din dreapta jos ies mai mult — ca sa
   nu iasa un chenar, ci un reper. */
.vs-split { position: relative; }
.vs-split__mk {
  position: absolute;
  height: 1px; background: var(--vs-line);
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
/* Linia de sub titluri e scoasa la cerere. Masuratoarea liniei de baza ramane
   in JS (e ieftina si poate fi refolosita); linia doar nu se mai arata. */
.vs-split__mk { display: none !important; }
.vs-split.is-in .vs-split__mk { transform: scaleX(1); }

/* O singura linie, si aia pe linia de baza a scrisului: literele stau pe ea,
   nu deasupra ei si nici taiate de ea. Unde cade linia de baza nu se calculeaza
   din metrici — se masoara in pagina, cu o bucata de zero pixeli asezata langa
   scris, care se aliniaza singura pe baza.

   La stanga pleaca pana in marginea ecranului, dincolo de cadru; la dreapta se
   opreste fix in punctul de dupa ultimul cuvant. */
.vs-split__mk--b {
  top: var(--vs-base, 100%);
  left: calc(-1 * var(--vs-pad) - var(--vs-edge));
  right: 0;
  transform-origin: 100% 50%;
}



/* Capetele liniilor de sectiune nu sunt la fel de la una la alta: una pleaca
   din marginea ecranului si se opreste in cadrul din dreapta, urmatoarea
   incepe in cadrul din stanga si iese prin dreapta. Simetria ar face din ele
   un chenar, si un chenar nu seamana cu o schita. */
.vs-rule--a { left: calc(-1 * var(--vs-pad) - var(--vs-edge)); right: calc(-1 * var(--vs-pad)); }
.vs-rule--b { left: calc(-1 * var(--vs-pad)); right: calc(-1 * var(--vs-pad) - var(--vs-edge)); }

/* --- ordinea desenului la intrare ---------------------------------------- */
/* Pagina nu apare, se deseneaza: intai cadrul, apoi liniile de sectiune, apoi
   conturul fiecarui element, si abia la urma continutul. Cat tine perdeaua,
   toate stau nedesenate sub clasa de mai jos. */
.vs-sheet__v {
  transform-origin: 50% 0;
  transition: transform 1.05s cubic-bezier(.22, 1, .36, 1);
}
.vs-sheet__x { transition: opacity .45s ease .7s; }
/* Longhand, nu prescurtare: o prescurtare care contine var() se reanalizeaza
   la calcul, si Chrome refuza acolo un calc() pentru intarziere — declaratia
   pica in intregime si linia apare desenata, fara nicio tranzitie. */
.vs-rule {
  transition-property: transform;
  transition-duration: .85s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* Mana nu pleaca de fiecare data din acelasi capat: una se trage spre dreapta,
   urmatoarea spre stanga, ca la capetele lor. */
.vs-rule--a { transform-origin: 0 50%; }
.vs-rule--b { transform-origin: 100% 50%; }
.vs-rule__t, .vs-rule__n {
  transition-property: opacity;
  transition-duration: .5s;
  transition-timing-function: ease;
}
html.vs-wait .vs-sheet__v { transform: scaleY(0); }
html.vs-wait .vs-sheet__x { opacity: 0; }
html.vs-wait .vs-rule { transform: scaleX(0); }
html.vs-wait .vs-rule__t, html.vs-wait .vs-rule__n { opacity: 0; }

/* Conturul de mana din jurul fiecarui element. Sta peste pagina cat se
   deseneaza si pleaca pe masura ce vine continutul in locul lui. */
.vs-draw {
  position: absolute; left: 0; top: 0;
  pointer-events: none; z-index: 4;
  transition: opacity .6s ease;
}
.vs-draw.is-gone { opacity: 0; }
.vs-draw__b { position: absolute; overflow: visible; }
.vs-draw__b path {
  fill: none;
  stroke: var(--vs-note);
  stroke-width: 1;
  stroke-dasharray: var(--vs-l);
  stroke-dashoffset: var(--vs-l);
  vector-effect: non-scaling-stroke;
  transition-property: stroke-dashoffset;
  transition-duration: .38s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-delay: var(--vs-d, 0ms);
}
.vs-draw.is-on path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .vs-draw { display: none; }
  .vs-sheet__v, .vs-sheet__x, .vs-rule, .vs-rule__t, .vs-rule__n { transition: none; }
}

/* --- telefonul ------------------------------------------------------------ */
/* Punctul de dupa cuvantul ingrosat ramane lipit de el. */
.vs-split__nb { white-space: nowrap; }
/* Un cuvant nu se rupe in mijloc; daca nu incape, titlul scade (fitHeads). */
.vs-split__w { white-space: nowrap; }

/* Starea de hover, data de mijlocul ecranului in loc de mouse. Aceleasi
   valori ca .hover--lift:hover din builder. */
.hover--lift.vs-hot {
  translate: 0 -6px;
  box-shadow: 0 18px 38px -18px #00000073;
}

@media (max-width: 920px) {
  /* Pe telefon totul sta pe axa din mijloc: titlurile si textele erau deja
     centrate, footerul si formularul nu — meniul si adresa stateau la dreapta,
     drepturile la stanga, etichetele si butonul formularului la stanga. */
  #footer .text-box,
  #footer .text-box p,
  #footer .text-box h3 { text-align: center !important; }
  #footer .text-box { justify-content: center !important; }

  .input__label { display: block !important; text-align: center !important; }
  form button[type="submit"], .grid-form button, [class*="form"] button[type="submit"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- literele desenate de mana ------------------------------------------- */
/* Cand litera are schita ei, masca veche nu mai lucreaza: fara contur care se
   descopera, fara plin care urca. Plinul (textul adevarat) apare doar la final,
   peste forma deja desenata. */
.vs-split.has-sk .vs-split__c::before { display: none; }
.vs-split.has-sk .vs-split__c::after {
  clip-path: none;
  opacity: 0;
  transition: opacity .35s ease var(--vs-swap, 1.5s);
}
.vs-split.has-sk.is-in .vs-split__c::after { opacity: 1; }

.vs-sk {
  position: absolute;
  left: 0;
  overflow: visible;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 0s;
  transition-delay: var(--vs-hide, 1.9s);
}
.vs-split.has-sk.is-in .vs-sk { opacity: 0; }

/* Creionul. pathLength=1 face ca fiecare contur sa se traga exact o data,
   oricat de lung ar fi. Curba porneste incet, grabeste si incetineste la
   capat — cum trage o mana o linie, nu cum se umple o bara. */
.vs-sk__p {
  fill: none;
  stroke: var(--vs-ink, #121212);
  stroke-width: 1.15px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset var(--t, .6s) cubic-bezier(.5, .05, .3, 1) var(--d, 0s),
    opacity .5s ease var(--vs-fade, 1.2s);
}
/* A doua trecere e mai subtire si mai deschisa: urma, nu linie. */
.vs-sk__p--2 { stroke-width: .8px; stroke-opacity: .45; }
.vs-split.is-in .vs-sk__p { stroke-dashoffset: 0; opacity: 0; }

/* Plinul formei, inainte de textul adevarat. */
.vs-sk__f {
  fill: var(--vs-ink, #121212);
  opacity: 0;
  transition: opacity .3s ease var(--vs-fill, 1s);
}
.vs-split.is-in .vs-sk__f { opacity: 1; }

/* Cand titlul iese din ecran si se rearmeaza, se intoarce instant la foaia
   goala — altfel s-ar vedea desenul derulat invers. */
.vs-split:not(.is-in) .vs-sk,
.vs-split:not(.is-in) .vs-sk__p,
.vs-split:not(.is-in) .vs-sk__f,
.vs-split.has-sk:not(.is-in) .vs-split__c::after { transition: none; }

/* ---------- tema intunecata ---------- */
/* O tema adevarata, nu un filtru: un filtru pe toata pagina o rasterizeaza si
   textul iese pixelat. Aici fiecare culoare a builder-ului isi primeste perechea
   ei inchisa. Pozele si capturile din portofoliu nu sunt atinse deloc. */
html.vs-dark {
  --vs-bg: #0a0a0a;
  --vs-ink: #ededed;
  --vs-line: #262626;
  color-scheme: dark;
  background: var(--vs-bg);
}
html.vs-dark :is(body, .page, .block-background, .background) { background-color: var(--vs-bg) !important; }
html.vs-dark [style*="--background-color:#f4f3f1"] { --background-color: var(--vs-bg) !important; }
html.vs-dark [style*="--v4cfc8878:#f4f3f1"] { --v4cfc8878: var(--vs-bg) !important; }

/* text */
html.vs-dark .text-box,
html.vs-dark [style*="color: rgb(18, 18, 18)"] { color: var(--vs-ink) !important; }
html.vs-dark .block-header {
  --nav-link-text-color: var(--vs-ink) !important;
  --nav-link-text-color-hover: var(--vs-ink) !important;
}
html.vs-dark .block-header__nav .item-content::before { background: var(--vs-ink); }
html.vs-dark .block-header__nav .item-content:hover { color: var(--vs-bg) !important; }

/* logo: desen negru pe transparent, se intoarce doar el */
html.vs-dark .block-header-logo img { filter: invert(1); }
html.vs-dark .block-header-logo::before { background: var(--vs-ink); }
html.vs-dark .block-header-logo:hover img { filter: none; }

/* butoane */
html.vs-dark [style*="--background-color:#121212"] {
  --background-color: var(--vs-ink) !important;
  --background-color-hover: #ffffff !important;
  --font-color: var(--vs-bg) !important;
  --font-color-hover: var(--vs-bg) !important;
  --border-color: var(--vs-ink) !important;
  --border-color-hover: #ffffff !important;
}
html.vs-dark .block-header,
html.vs-dark [style*="--grid-button-primary-background-color"] {
  --grid-button-primary-background-color: var(--vs-ink) !important;
  --grid-button-primary-background-color-hover: #ffffff !important;
  --grid-button-primary-font-color: var(--vs-bg) !important;
  --grid-button-primary-color-hover: var(--vs-bg) !important;
  --grid-button-secondary-font-color: var(--vs-ink) !important;
  --grid-button-secondary-color-hover: var(--vs-ink) !important;
  --grid-button-secondary-background-color-hover: #1a1a1a !important;
}

/* linii si forme */
html.vs-dark [style*="--shape-color:#d8d6d3"] { --shape-color: var(--vs-line) !important; }
html.vs-dark [style*="--shape-color:#121212"] { --shape-color: var(--vs-ink) !important; }

/* formular */
html.vs-dark :is(.input, .grid-form, form) {
  --label-text-color: var(--vs-ink) !important;
  --input-text-color: var(--vs-ink) !important;
  --input-text-color--hover: var(--vs-ink) !important;
}
html.vs-dark .input__component,
html.vs-dark :is(input, textarea) {
  background-color: #141414 !important;
  color: var(--vs-ink) !important;
  border-color: var(--vs-line) !important;
}
html.vs-dark .input__component:focus { border-color: #5a5a5a !important; }
/* Butonul animat (button-fx): discul de hover e alb, textul ramane negru, deci
   butonul e deschis si in repaus, si la hover. */
html.vs-dark .vs-fx__fill { background: #ffffff !important; }
html.vs-dark .vs-fx.is-on .vs-fx__label { color: #0a0a0a !important; }
html.vs-dark :is(input, textarea)::placeholder { color: #6b6b6b !important; }
html.vs-dark .input__label { color: var(--vs-ink) !important; }
/* Schita literelor: culoarea o ia scriptul din text in clipa in care imparte
   titlul, adica de obicei inainte sa se aplice tema. Pe negru o fixam alba. */
html.vs-dark .vs-split { --vs-ink: #ffffff !important; }
/* Pe negru o linie de 1px alba se pierde; schita e mai groasa si a doua trecere
   a creionului nu mai e aproape transparenta. */
html.vs-dark .vs-sk__p { stroke-width: 1.9px; }
html.vs-dark .vs-sk__p--2 { stroke-width: 1.3px; stroke-opacity: .85; }
/* Butoanele pline: deschise cu text negru, orice ar fi calculat builder-ul. */
html.vs-dark .grid-button:not(.grid-button--secondary) {
  background-color: #ededed !important;
  border-color: #ededed !important;
  color: #0a0a0a !important;
}
html.vs-dark .grid-button:not(.grid-button--secondary) .vs-fx__label { color: #0a0a0a !important; }

/* Butonul din ultimul rand al unei sectiuni statea lipit de linia sectiunii
   urmatoare. Sectiunile care au un buton primesc aer dedesubt, pe ambele teme. */
@media (min-width: 920px) {
  section.block:has(.layout-element__component--GridButton) { padding-bottom: 72px !important; }
}
/* Cardurile: umbra neagra nu se vede pe negru, deci conturul il da o linie fina. */
/* Pe alb cardul se vede prin umbra de dedesubt, care pleaca de la jumatate in
   jos. Pe negru o umbra nu se vede, asa ca facem acelasi lucru cu lumina: fata
   cardului se lumineaza foarte putin spre baza, iar marginea de jos are un fir
   de lumina. Sus cardul se topeste in fundal, exact ca pe alb. */
html.vs-dark .grid-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.035)) !important;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.09), 0 2px 6px -2px rgba(255,255,255,.05) !important;
}
html.vs-dark .hover--lift:hover .grid-card,
html.vs-dark .hover--lift.vs-hot .grid-card {
  background-image: linear-gradient(180deg, rgba(255,255,255,.01) 30%, rgba(255,255,255,.06)) !important;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.14), 0 14px 30px -18px rgba(255,255,255,.12) !important;
}

.vs-theme { display: flex !important; align-items: center; gap: 8px; margin-left: 28px; }
.vs-theme button {
  width: 14px; height: 14px; padding: 0; cursor: pointer;
  border: 1px solid #8a8a8a; border-radius: 0;
  transition: transform .3s ease, outline-color .3s ease;
  outline: 1px solid transparent; outline-offset: 3px;
}
.vs-theme button[data-t="light"] { background: #f4f3f1; }
.vs-theme button[data-t="dark"] { background: #121212; }
html.vs-dark .vs-theme button { border-color: #555; }
.vs-theme button:hover { transform: scale(1.15); }
.vs-theme button[aria-pressed="true"] { outline-color: #fa3600; }