/* Sectiunile paginii principale.
   Depinde de tokens.css, base.css si components.css. */

/* ============ HERO ============ */

/* Hero-ul urca sub bara de navigare.
   `main` are padding-top 91px ca sa nu intre continutul sub bara fixa. Dar
   lumina de fundal TREBUIE sa ajunga acolo: masurata pe capturi, lumina
   template-ului e cea mai puternica exact in coltul din dreapta-sus, adica in
   spatele barei lui. Cu hero-ul incepand la 91px, zona aceea ramanea neagra si
   efectul se pierdea.
   Marginea negativa il trage inapoi la varful paginii, iar padding-ul pus la
   loc tine continutul acolo unde era. Bara e transparenta cu blur, deci lumina
   se vede prin ea. */
.hero {
  position: relative;
  margin-top: -91px;
  padding-top: calc(91px + var(--s-60));
  padding-bottom: var(--s-40);
  overflow: hidden;
}

/* Lumina de fundal din hero.
   Template-ul o face cu un videoclip care ruleaza in bucla: o lumina albastra
   mare, concentrata sus-dreapta, care se stinge spre stanga jos si care chiar
   se misca - doua capturi la cateva secunde distanta arata alta distributie.

   Aici e facuta din degradeuri. Motivul nu e economia de efort: un videoclip
   in hero ar sta exact peste globul WebGL, deci doua lucruri grele in acelasi
   loc, si ar consuma bateria pe laptop degeaba. Degradeurile costa cat un
   dreptunghi colorat.

   Prima versiune folosea --blue-20, adica 20% opacitate, si se oprea la 900px.
   Era prea slaba si prea scurta: pagina arata neagra si plata langa template.
   Vitalie a semnalat asta pe 8 august 2026, uitandu-se la amandoua. */
/* GEOMETRIE, de citit inainte de a schimba procentele.
   `.hero` are overflow: hidden, deci tot ce iese se taie. Stratul incepe la
   -100px si are 1000px, deci portiunea VIZIBILA e intre 100 si 1000 - adica
   y-ul 0..900 al hero-ului, care acum incepe chiar sub varful paginii.
   Procentele sunt raportate la cei 1000px ai stratului, nu la ce se vede.

   INTENSITATEA nu e aleasa din ochi. Am masurat pixelii template-ului: in
   coltul din dreapta-sus da rgb(4, 59, 188). Peste negru, asta inseamna
   albastrul de brand la aproximativ 74% opacitate (254 x 0.74 = 188). De acolo
   vine 0.76 de mai jos.
   Prima incercare punea miezul la 30% inaltime si 78% latime, deci prea jos si
   prea spre interior: masurat, dadea rgb(0, 15, 39) fata de 188 al
   template-ului. Nu opacitatea era problema, ci pozitia. */
.hero__aurora {
  position: absolute;
  /* Totul in procente, si pe verticala si pe orizontala.
     Prima versiune avea inaltimea in pixeli (1000px) si latimea in procente.
     Consecinta: pe un ecran mai lat lumina se intindea orizontal dar nu si
     vertical, deci proportiile se rupeau si pagina arata altfel decat in
     capturile mele de la 1440px. Vitalie a semnalat exact asta, a doua oara
     dupa aceeasi cauza - o valoare fixa intr-un layout care se intinde. */
  inset-block-start: -12%;
  inset-inline: -18%;
  height: 124%;
  background:
    /* ATENTIE inainte de a "corecta" valorile de aici catre template.
       Am facut exact asta o data: am masurat pixel cu pixel lumina lui Landin
       si am strans-o in colt, fiindca acolo template-ul e 188 in colt si 0 in
       centru. Rezultatul se potrivea mai bine cu template-ul si i-a displacut
       lui Vitalie - "acum e mai intunecat". Valorile de mai jos sunt varianta
       pe care a vazut-o si a vrut-o: mai lata si mai luminoasa decat a
       template-ului. E saitul lui, nu o copie a template-ului. */

    /* sursa principala, sus-dreapta */
    radial-gradient(46% 52% at 84% 16%,
      rgba(0, 97, 254, 0.76) 0%, rgba(0, 97, 254, 0.30) 32%,
      rgba(0, 55, 160, 0.10) 56%, transparent 74%),
    /* a doua sursa, mai rece si mai la stanga, ca lumina sa nu para un bec */
    radial-gradient(50% 40% at 26% 12%,
      rgba(0, 46, 160, 0.45) 0%, transparent 72%),
    /* spalarea lata care ridica tot ecranul de sus - asta e ce da senzatia de
       lumina in incapere, nu de bec intr-un colt */
    radial-gradient(95% 46% at 50% 8%,
      rgba(0, 16, 48, 0.90) 0%, transparent 86%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: aurora-plutire 34s ease-in-out infinite;
}

/* Un al doilea strat, mai mic si pe alt ciclu. Doua miscari lente si
   necoincidente se citesc ca ceva viu; una singura se citeste ca un obiect
   care aluneca. */
.hero__aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Stat mai jos si mai spre centru, intentionat. Il mutasem sus-dreapta ca sa
     nu ridice centrul paginii - corect fata de template, gresit fata de ce
     voia Vitalie. Aici el e cel care umple mijlocul cu lumina. */
  background: radial-gradient(40% 42% at 64% 42%,
    rgba(0, 97, 254, 0.40) 0%, transparent 68%);
  animation: aurora-plutire-2 47s ease-in-out infinite;
}

@keyframes aurora-plutire {
  0%,  100% { transform: translate3d(0, 0, 0) scale(1); }
  50%       { transform: translate3d(-3.5%, 2.5%, 0) scale(1.09); }
}

@keyframes aurora-plutire-2 {
  0%,  100% { transform: translate3d(0, 0, 0) scale(1); }
  50%       { transform: translate3d(5%, -3%, 0) scale(0.92); }
}

/* Cine a cerut mai putina miscare primeste aceeasi lumina, dar nemiscata.
   Nu se ascunde efectul - se opreste doar plutirea. */
@media (prefers-reduced-motion: reduce) {
  .hero__aurora,
  .hero__aurora::before { animation: none; }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--s-50);
  align-items: center;
  min-height: 640px;
}

.hero__content { gap: var(--s-24); align-items: flex-start; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); }

/* Cele doua butoane din cap RAMAN PE UN RAND pe telefon. Cerinta lui Vitalie,
   14 august 2026.

   Masurat la 375px in romana: „Începe acum" cere 128px, „Vezi proiectele
   noastre" 197px, spatiul dintre ele 12 - adica 337, si au loc 329. Se rupeau
   din OPT pixeli. Umplutura scade de la 18 la 12 in lateral si spatiul de la 12
   la 10, deci cer 311 - incap si la 360px, latimea celor mai multe telefoane cu
   Android.

   `flex-wrap: wrap` NU se scoate: sub ~340px se rup mai departe, si acolo asa e
   bine. Alternativa - `nowrap` - ar impinge al doilea buton in afara ecranului,
   iar butonul iesit din ecran e mai rau decat butonul mutat pe randul urmator. */
@media (max-width: 720px) {
  .hero__actions { gap: var(--s-10); }
  .hero__actions .btn { padding-inline: var(--s-12); }
}

.hero__visual { display: flex; justify-content: center; align-items: center; }

.globe { width: 100%; max-width: 560px; aspect-ratio: 1; position: relative; }

/* Substitutul cand globul nu se incarca: fara WebGL, fara retea, sau pe mobil.
   Tacut - originalul afiseaza un mesaj rosu de eroare in engleza, inacceptabil
   intr-un hero. */
.globe::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--blue-20), transparent 62%);
  filter: blur(24px);
}

.globe.is-live::before { display: none; }

/* ============ BANDA DE LOGOURI ============ */

/* Toate marcile devin siluete albe de aceeasi intensitate.
   Filtrul de dinainte era `grayscale(1) brightness(2.4)`. Mergea cat timp
   banda avea numai marci deja aproape albe. Logourile adaugate pe 8 august
   2026 vin din fotografii - Tyras Group, West Wheels - si pleaca de la culori
   inchise: gri plus luminozitate le lasa sterse si inegale langa celelalte.
   `brightness(0)` le face negru curat, `invert(1)` le intoarce in alb. Forma
   se pastreaza intreaga, culoarea dispare complet, si toate marcile se citesc
   la fel de tare. Vitalie a ales varianta asta dintre cele doua, comparate
   una langa alta. */
.logos__mark {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Marcile inalte, nu late, primesc mai multa inaltime.
   Regula e despre forma logoului, nu despre client. Doua o folosesc:
   - Doudou et Compagnie are patru randuri unul sub altul; la 32px, ultimul
     ("Paris") devine o dunga;
   - M2M are 126x63, adica de doua ori mai inalt in proportie decat celelalte
     marci, care sunt in jur de 4:1; la 32px iesea 64px lat, jumatate din
     AgroData, si literele lui erau vizibil mai mici. Vitalie a semnalat-o.
   La 44px, literele ambelor ajung cat ale vecinilor - masurat una langa alta,
   nu ghicit. */
.logos__mark--stivuit { height: 44px; }

/* Si invers: marcile foarte lungi primesc mai putina inaltime.
   Red Light Therapy e un singur rand de trei cuvinte, cu litere care coboara
   sub linie (g, p, y). La 32px, cat au celelalte, literele ies vizibil mai
   mari decat ale vecinilor si marca trage toata atentia benzii. La 26px
   literele se potrivesc cu ale celorlalti, iar latimea ajunge exact cat a
   marcii Hyperice.
   Cele 32px de baza nu sunt o lege, ci cazul obisnuit: o marca scrisa pe un
   singur rand, fara cozi. Ce iese din tipar se potriveste dupa inaltimea
   literelor, nu dupa inaltimea cutiei. */
.logos__mark--lat { height: 26px; }

/* Opacitatea sta pe element, nu pe imagine. Un element al benzii poate fi o
   imagine singura sau o imagine plus un cuvant ("Hyperice" + "Moldova"), iar
   cele doua trebuie sa se stinga si sa se aprinda impreuna. */
.logos__item {
  /* 0,5 si nu 0,45, de pe 15 august 2026. Cuvantul „Moldova" de langa Hyperice
     e scris cu alb, dar toata banda e stinsa de aici - iar alb la 45% peste
     negru da exact #737373, adica un contrast de 4,43, sub pragul de 4,5.
     Lighthouse l-a prins ca text prea slab.
     La 0,5 iese 4,90 si trece. Deosebirea la privit e sub ce vede ochiul, dar
     cine citeste greu o simte. Nu se putea repara din culoarea cuvantului:
     copilul nu poate fi mai opac decat parintele. */
  opacity: 0.5;
  transition: opacity var(--dur-base) var(--ease-out);
}

.marquee:hover .logos__item { opacity: 0.7; }

/* Marca plus un cuvant scris. Hyperice nu are un logo cu "Moldova" in el -
   reprezentanta locala e scrisa aici, cu fontul saitului. Cei 1.25rem sunt
   masurati, nu ghiciti: la marimea asta inaltimea literelor mari se potriveste
   cu cea a cuvantului "Hyperice" din logo. */
.logos__lockup { display: inline-flex; align-items: center; gap: var(--s-10); }

.logos__word {
  font-size: 1.25rem;
  font-weight: var(--w-medium);
  color: #FFFFFF;
  white-space: nowrap;
}

/* Banda de logouri pe telefon: mai deasa si mai iute.
   Cerut de Vitalie pe 15 august 2026 - „nu-mi place pe telefon". Pe un ecran
   de 375px fereastra benzii are 329px, iar la marimile de desktop se vedeau
   in medie 2,4 marci deodata (masurat, oprind animatia si numarand marcile
   care ating fereastra la fiecare 2px de drum) si 0,9 marci INTREGI. El vrea
   3-4 deodata, si o tura de ~20s in loc de 45s.

   Cele trei inaltimi se micsoreaza cu ACELASI factor, 25/32 = 0,78125. Asta
   nu e comoditate: cei 44px si cei 26px de mai sus sunt potriviti dupa
   inaltimea LITERELOR, nu a cutiei, deci orice alt factor pe una din ele
   le-ar dezechilibra intre ele. Din acelasi motiv coboara si cuvantul
   „Moldova" (1,25rem x 0,78125 = 0,98rem): altfel ar creste peste literele
   logoului Hyperice de langa el. Lockup-ul iese 249px lat, deci incape
   intreg in cei 329px, si `white-space: nowrap` de mai sus il tine pe un rand.

   De ce 25px si nu mai putin: cea mai scunda marca e Red Light Therapy, si
   25 x 26/32 = 20,3px - adica exact pragul de citet cerut, ~20px. Sub 25px
   de baza, ea trece sub prag.

   Cu spatiul de 20px in loc de 48, se vad in medie 3,3 marci deodata (2-5) si
   1,5 intregi - masurat la fel, dupa schimbare.

   `animation-duration`, nu `--marquee-duration`: durata sta INLINE in
   `index.html` (`style="--marquee-duration: 45s"`), iar un stil inline nu
   poate fi batut dintr-o foaie. Se scrie deci direct proprietatea finala, cu
   un selector mai tare decat `.marquee__track` din `components.css`.
   Drumul unei ture ajunge 1230px, deci 61px/s fata de 39px/s azi.

   Pragul e 767px: de la 768 in sus nu se schimba NIMIC (cerut asa). E singurul
   loc din proiect cu pragul asta - restul saitului taie la 720px - fiindca
   aici e vorba de telefon, nu de ingustarea generala a paginii. */
@media (max-width: 767px) {
  .logos__mark { height: 25px; }
  .logos__mark--stivuit { height: 34.4px; }   /* 44 x 0,78125 = 34,375 */
  .logos__mark--lat { height: 20.3px; }       /* 26 x 0,78125 = 20,3125 */
  .logos__word { font-size: 0.98rem; }
  .logos .marquee__track {
    gap: var(--s-20);
    animation-duration: 20s;
  }
}

/* ============ PORTOFOLIU: LISTA CARTONASELOR ============

   Aici a mai ramas doar teancul. Cartonasul insusi - forma, lipirea, vinieta,
   numele peste imagine - s-a mutat pe 9 august 2026 in `.lucrare`, din
   `portofoliu.css`, cand capturile pe fundal deschis au fost inlocuite cu
   scenele construite din saitul real al fiecarui client. Familia `.work__card`
   a mai stat aici, nefolosita, pana pe 13 august 2026; `tests.py` numara de
   atunci `class="work__card"` si cere zero.

   Lipirea are DOUA conditii, si amandoua se strica usor fara sa se vada de ce -
   sunt scrise langa `.lucrare`, acolo unde se aplica acum. Una il priveste si
   pe parintele de aici: niciun stramos nu are voie sa fie container de
   derulare, de aceea `body` foloseste `overflow-x: clip` si nu `hidden`. */

.work { display: flex; flex-direction: column; gap: var(--s-24); }

/* ============ UNELTELE ============
   Cele 27 de tehnologii din prezentare, pagina 3.

   Placa albastra e desenata aici, nu decupata din imagine: pictogramele sunt
   siluete albe transparente, deci placa iese curata la orice marime si isi ia
   albastrul din acelasi token ca tot restul saitului.

   Noua coloane, ca in prezentare: 27 se imparte exact la 9, deci ies trei
   randuri pline. Orice alt numar de coloane lasa ultimul rand ciuntit. */

.tools {
  list-style: none;
  padding: 0;
  margin-block-end: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--s-30) var(--s-12);
}

@media (max-width: 1100px) { .tools { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-12);
  text-align: center;
}

.tool__tile {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  /* 22% din latura, ca in prezentare - nu raza cardurilor, care ar face
     placa sa para un patrat cu colturile abia atinse. */
  border-radius: 14px;
  background: var(--blue);
}

.tool__icon { width: 40px; height: 40px; }

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

/* ============ FAQ ============
   Antet stanga, intrebari dreapta - ca in template. */

/* Antetul sus, pe toata latimea; intrebarile dedesubt, pe doua coloane.
   Pana pe 9 august 2026, antetul statea in stanga si toate cele sase intrebari
   in dreapta, ca in template. La noi antetul are doua randuri, nu cinci, deci
   sub el ramanea o suprafata neagra cat toata coloana de intrebari - se citea
   ca un gol, nu ca o alegere. Vitalie a cerut trei si trei. */
.faq-layout { display: block; }

/* Stilurile formularului de oferta (.quote-card-shell, .quote__grid,
   .field--wide, .quote__messages) s-au mutat in components.css pe 9 august
   2026, langa .field: formular.html a devenit piesa refolosibila (Task 1) si
   se aseaza acum si pe Contact, dar home.css se incarca DOAR pe prima pagina.
   Contact il randa fara nicio stilizare - campurile lipite unul de altul,
   0px intre ele - fiindca regulile care le dau grila si spatierea existau
   doar aici. Mutate, nu copiate, ca sa ramana o singura sursa. */

/* ============ LOGOURILE CAND OMUL A CERUT MAI PUTINA MISCARE ============

   Regula generala din `components.css` opreste banda si o face trasa cu
   degetul (`overflow-x: auto`). Bun ca purtare, urat ca privelieste: ramane un
   rand tepan din care se vad doua logouri si jumatate, si aproape nimeni nu-si
   da seama ca poate fi tras.

   Asa a vazut-o chiar Vitalie pe telefonul lui, pe 15 august 2026 - avea
   „Уменьшение движения" pornita si nu stia. Cand a inteles ce vede, a cerut
   pentru cazul asta o grila asezata: toate noua deodata, cate trei pe rand.

   A doua jumatate a pistei e o copie, pusa acolo NUMAI ca bucla sa nu sara la
   fiecare tura. Fara miscare n-are ce cauta: ar arata fiecare client de doua
   ori. Se stinge dupa `aria-hidden`, care e chiar semnul ei din sablon. */
@media (prefers-reduced-motion: reduce) {
  .logos .marquee { overflow: visible; }

  .logos .marquee__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-30) var(--s-20);
    width: 100%;
    place-items: center;
  }

  .logos .marquee__track > [aria-hidden="true"] { display: none; }
}