/* Variabilele de design vevdev.
   Sursa unica de adevar. Nicio valoare de culoare sau marime nu se scrie
   direct in celelalte fisiere - se refera de aici. */

:root {
  /* --- Culori de suprafata --- */
  --bg: #000000;
  --surface-1: #080808;
  --surface-2: #0D0D0D;

  /* --- Accent: albastrul din logo-ul vevdev --- */
  --blue: #0061FE;
  --blue-hover: #004ECB;
  /* Albastrul CITET pe negru. Nu inlocuieste `--blue`, care ramane culoarea
     marcii pe butoane si pe fundaluri albe - il completeaza acolo unde
     albastrul e TEXT pe fundal negru.

     De ce exista: masurat cu Lighthouse pe 15 august 2026, `#0061FE` pe negru
     da un contrast de 4,14, sub pragul de 4,5 cerut pentru text mic. Se vedea
     pe legaturile „vezi mai mult" din portofoliu (de paisprezece ori pe
     pagina) si din blog. `#1A72FF` da 4,89 - aceeasi culoare pentru ochi, dar
     citeata si de cine vede mai slab.

     Butoanele NU se schimba: acolo albastrul e FUNDAL, cu text alb peste, si
     contrastul era deja bun. */
  --blue-text: #1A72FF;
  --blue-04: rgba(0, 97, 254, 0.04);
  --blue-08: rgba(0, 97, 254, 0.08);
  --blue-15: rgba(0, 97, 254, 0.15);
  --blue-20: rgba(0, 97, 254, 0.20);
  --blue-35: rgba(0, 97, 254, 0.35);
  --blue-glow: rgba(0, 97, 254, 0.50);

  /* --- Butonul principal, unul singur pe ecran --- */
  --bone: #EFEEEC;
  --on-bone: #131313;

  /* --- Scara de text: patru trepte, prin opacitate --- */
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, 0.60);
  --text-3: rgba(255, 255, 255, 0.50);
  --text-4: rgba(255, 255, 255, 0.20);
  --text-placeholder: #999999;

  /* --- Linii: nu exista margini adevarate in acest sistem --- */
  --line-05: rgba(255, 255, 255, 0.05);
  --line-07: rgba(255, 255, 255, 0.07);
  --line-10: rgba(255, 255, 255, 0.10);
  --line-15: rgba(255, 255, 255, 0.15);

  /* --- Tipografie --- */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Contrast de greutate aproape zero, contrast de marime urias.
     Nimic intre 44 si 35 in afara de h3 - golul e deliberat. */
  /* Titlul din hero. Era 56 -> 86px, adica crestea cu ecranul si se oprea la
     86. Vitalie a cerut 56 pe 8 august 2026, dupa ce l-a vazut la 86 pe
     ecranul lui. Fiindca 56 era deja podeaua vechii formule, valoarea nu mai
     are ce sa creasca: e fixa la orice latime.
     Pastrat ca valoare simpla, nu ca un clamp cu podea egala cu plafonul,
     fiindca acela ar fi cod care minte despre ce face.
     LA FAZA DE MOBIL: aici trebuie adaugata o podea mai mica - 56px pe un
     telefon de 375px inseamna aproximativ patru litere pe rand. */
  --size-h1: 3.5rem;                                    /*  56 px, fix */
  /* Titlurile de sectiune. Erau 35 -> 54px, deci pe ecranul lui Vitalie
     ajungeau la 45 si stateau prea aproape de cei 56 ai hero-ului: doua
     marimi aproape egale nu fac o ierarhie. A cerut 44, fix, pe 8 august 2026.
     Aceeasi nota de mobil ca la h1: aici trebuie o podea mai mica. */
  --size-h2: 2.75rem;                                   /*  44 px, fix */
  --size-h3: clamp(1.75rem, 1.2rem + 1vw, 2.1875rem);    /*  28 -> 35 px */
  --size-h4: 1.125rem;                                    /*  18 px */
  --size-body: 1rem;                                      /*  16 px */
  --size-small: 0.875rem;                                 /*  14 px */

  --lh-h1: 0.95;
  --lh-h2: 0.93;
  --lh-h4: 1.44;
  --lh-body: 1.63;

  --ls-h1: -0.044em;
  --ls-h2: -0.035em;
  --ls-h4: -0.028em;
  --ls-body: -0.0125em;
  --ls-ui: -0.031em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* --- Latimi maxime de text --- */
  --measure-hero: 500px;
  --measure-header: 630px;

  /* --- Colturi: scara imbricata, nu o singura valoare --- */
  --r-input: 5px;
  --r-chip: 6px;
  --r-button: 10px;
  --r-glass: 12px;
  --r-image: 20px;
  --r-card: 20px;
  --r-shell: 30px;
  /* Raza platformei dintre sectiuni. Iese din scara de mai sus intentionat:
     nu e coltul unui obiect, ci curbura unui orizont lat cat ecranul. */
  --r-horizon: 120px;

  /* --- Spatiere: scara inchisa. Nimic in afara ei. --- */
  --s-10: 10px;  --s-12: 12px; --s-20: 20px; --s-24: 24px;
  --s-26: 26px;  --s-30: 30px; --s-40: 40px; --s-50: 50px;
  --s-60: 60px;  --s-70: 70px; --s-90: 90px; --s-100: 100px;
  --s-120: 120px; --s-130: 130px;

  /* Latimea continutului. Era fixa la 1200px, ceea ce parea corect la 1440px
     (containerul ocupa 92% din ecran) dar prost pe ecrane mari: la 1920px
     ocupa 69%, la 2560px doar 52%, cu sute de pixeli goi pe margini.
     Vitalie a semnalat exact asta pe 8 august 2026.

     Acum creste odata cu ecranul, dar nu la nesfarsit: pana la 1440px ramane
     exact cat era, ca desktopul deja aprobat sa nu se schimbe; peste, castiga
     0.75px pentru fiecare pixel de ecran, si se opreste la 1500px. Plafonul
     exista fiindca un rand de text mai lat de aproximativ 1500px nu se mai
     citeste comod - ochiul pierde inceputul randului urmator. */
  --container: clamp(1200px, calc(1200px + (100vw - 1440px) * 0.75), 1500px);
  --gutter: clamp(1.25rem, 0.5rem + 4vw, 7.5rem);  /* 20 -> 120 px */
  --grid-gap: var(--s-24);

  /* --- Miscare --- */
  --dur-fast: 200ms;
  --dur-base: 250ms;
  --dur-reveal: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-stagger: 70ms;

  /* --- Materiale-semnatura --- */
  --glow-button: 0 8px 40px var(--blue-glow);
  --glass-card: linear-gradient(0deg, var(--blue-15) 0%, rgba(97, 97, 97, 0.09) 100%);
  --glass-pill: linear-gradient(0deg, var(--blue-08) 0%, rgba(153, 153, 153, 0.10) 100%);
  --dissolve: linear-gradient(rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.7) 77%, #000 100%);
  --hairline-blue: linear-gradient(90deg, transparent 0%, var(--blue) 50%, transparent 100%);
}

/* Rusa are alt font fiindca DM Sans NU are chirilice - verificat pe 13 august
   2026, inclusiv cerut explicit cu `&subset=cyrillic`, care tot nu le
   intoarce. Fara regula asta, toata versiunea rusa ar cadea pe fontul de
   sistem si ar arata a alt sait.

   Onest e ales fiindca are chirilicele desenate pentru ele, nu adaptate dintr-un
   latin, si fiindca are aceeasi geometrie circulara ca DM Sans - la 44px ritmul
   randului se citeste la fel. Engleza si romana raman pe DM Sans: un singur font
   peste tot ar fi recules cele cincisprezece pagini aprobate. */
:lang(ru) { --font: "Onest", "DM Sans", -apple-system, sans-serif; }

/* SCARA MARE SE INGUSTEAZA PE TELEFON.

   PANA PE 14 AUGUST 2026 FISIERUL ASTA N-AVEA NICIUN `@media`. Adica treptele
   de mai sus erau aceleasi pe un ecran de 2560px si pe unul de 375: intre doua
   sectiuni ramaneau 100-120px si pe telefon. Pe un monitor lat golul acela e
   respiratie; pe 375 e o treime de fereastra pierduta, si omul deruleaza prin
   negru crezand ca s-a terminat pagina. Vitalie a semnalat-o dupa un audit de
   telefon, aratand cu degetul distanta dintre pastila de oferta si logoul din
   subsol.

   SE MICSOREAZA NUMAI TREPTELE MARI - cele care dau ritmul dintre sectiuni.
   Cele mici (10-50) sunt distante dinauntrul componentelor: intre o eticheta si
   titlul ei, intre doua randuri de formular. Alea nu se schimba cu latimea
   ecranului, fiindca nu ecranul le-a cerut, ci lizibilitatea.

   BLOCUL STA IN AFARA LUI `:root`, DINADINS. Un `@media` scris INAUNTRUL unui
   bloc de reguli cere imbricare CSS - si daca browserul n-o are, nu se plange:
   pur si simplu nu face nimic, iar reparatia pare facuta si nu e. Forma asta
   merge peste tot.

   PRAGUL E 720px, cel mai folosit din proiect (zece locuri) - nu unul nou, ca
   sa nu apara o a doua granita care se desincronizeaza de prima.

   SE SCHIMBA INTR-UN LOC, nu in fiecare foaie: `.section` din base.css, cele
   saptesprezece folosiri ale lui `--s-60`, orizontul, subsolul - toate se
   ingusteaza deodata si raman in acelasi raport intre ele. O reparatie pagina
   cu pagina ar fi lasat, sigur, o pagina uitata. */
@media (max-width: 720px) {
  :root {
    --s-60: 44px;  --s-70: 48px; --s-90: 56px; --s-100: 60px;
    --s-120: 72px; --s-130: 76px;
  }
}