/* ==========================================================================
   Componentele comune: masthead, meniu, acțiuni, banda de experiență, footer.
   Breakpoint-urile casei, în aceeași ordine peste tot:
   576 / 768 / 992 / 1200.
   ========================================================================== */

/* --- masthead ------------------------------------------------------------ */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:var(--mast-y) var(--gutter);
  transition:background .3s var(--ease),border-color .3s var(--ease),padding .3s var(--ease);
  border-bottom:1px solid transparent;
}
/* după ce pagina pleacă din hero, masthead-ul capătă fundal ca să rămână lizibil
   peste orice imagine, deschisă sau închisă */
.masthead.is-stuck{
  background:rgba(0,0,0,.86);backdrop-filter:blur(10px);
  border-bottom-color:var(--rule);padding-block:clamp(12px,1.7vw,20px);
}
.mark{
  font-size:clamp(13px,1.05vw,15px);letter-spacing:var(--track-mark);
  font-weight:600;line-height:1;color:var(--pink);text-transform:uppercase;
  white-space:nowrap;
}
a.mark{padding:15px 0}

/* navigația de pe desktop */
.nav-desk{display:none;align-items:center;gap:clamp(28px,3.2vw,52px)}
.nav-link{
  font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  font-weight:600;color:var(--mute);position:relative;
  /* suprafață de atins: pe telefon linia de text singură era de 13px înălțime */
  padding:13px 0;transition:color .25s;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:100%;bottom:9px;height:1px;
  background:var(--pink);transition:right .3s var(--ease);
}
.nav-link:hover{color:var(--paper)}
.nav-link:hover::after{right:0}

/* --- acțiuni ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 18px;border:1px solid var(--rule-strong);
  font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;font-weight:600;white-space:nowrap;
  transition:background .25s,border-color .25s,color .25s;
}
.btn svg{width:16px;height:12px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.btn:hover svg{transform:translateX(4px)}
.btn--solid{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.btn--solid:hover{background:var(--paper);border-color:var(--paper)}
/* CTA-ul lung („Building your team? Let's talk") depășea 375px cu nowrap și
   scotea pagina pe orizontală, iar cu ruperea pe două rânduri ajungea la 91%
   din lățime și arăta a banner, nu a buton (observat de Anca). Sub 576 scade
   litera, tracking-ul și paddingul, cât să încapă pe un rând și butonul să
   rămână cât conținutul lui. */
.btn--big{padding:16px 24px;font-size:13px;white-space:normal;text-wrap:balance}
@media (max-width:575px){
  .btn--big{padding:14px 18px;font-size:11.5px;letter-spacing:.12em;gap:10px;white-space:nowrap}
  .btn--big svg{width:14px}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:14px;padding:12px 0;
  font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--pink);
}
.link-arrow svg{width:26px;height:12px;flex:none;transition:transform .3s var(--ease)}
.link-arrow:hover svg{transform:translateX(8px)}

/* CTA-ul de pe ușile din hero: la 12,5px sub un titlu de 75px nu se citea ca
   acțiune. Capătă chenar și suprafață, dar rămâne gol până la hover. */
.door-label .link-arrow{
  padding:13px 20px;border:1px solid rgba(245,166,197,.5);
  font-size:13px;transition:background .25s,border-color .25s,color .25s;
}
.door-label .link-arrow:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}

/* --- meniul de pe mobil și tabletă -------------------------------------- */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;
}
.burger span{display:block;height:1.5px;background:var(--paper);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(2){width:70%;margin-left:auto}
.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.panel{
  position:fixed;inset:0;z-index:35;background:var(--ink);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--mast-y) + 44px) var(--gutter) var(--gutter);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.menu-open .panel{opacity:1;visibility:visible}
.panel a.panel-link{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,7.6vw,44px);line-height:1.06;
  display:block;padding:10px 0;border-bottom:1px solid var(--rule);
}
.panel .panel-foot{color:var(--mute);font-size:var(--t-small)}
/* aceeași acțiune arăta altfel în meniu și în pagină; în meniu butonul ia
   toată lățimea, ca cel din secțiunea de final */
.panel .panel-foot .btn{
  display:flex;width:100%;justify-content:space-between;margin-bottom:18px;
}
body.menu-open{overflow:hidden}

/* --- banda de experiență (dovada, imediat sub hero) ---------------------
   Eticheta și numele aveau aceeași greutate, așa că banda se citea ca șase
   lucruri egale puse cap la cap, iar eticheta părea un link (observat de
   Mihai). Acum eticheta e clar subordonată, pe rândul ei, iar numele poartă
   greutatea, ca niște wordmark-uri tipografice. Fără hover: nu sunt linkuri,
   iar un tratament de link ar sugera o relație de client care nu există. */
.proof{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof .shell{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2vw,24px);
  padding-block:clamp(22px,2.8vw,36px);
}
.proof .eyebrow{
  color:var(--faint);font-size:11px;letter-spacing:.26em;
}
.proof-list{
  display:flex;flex-direction:column;
  gap:clamp(14px,1.8vw,22px);
}
.proof-list li{
  color:var(--paper);font-family:var(--display);font-weight:800;
  text-transform:uppercase;line-height:1;letter-spacing:.02em;
  /* scara ține numele complete pe un rând de la 992 în sus: cu minimul la 20px
     ceruse 991px acolo unde erau 977 disponibili */
  font-size:clamp(18px,1.9vw,26px);
}
/* accentul: o linie scurtă, nu o subliniere de link */
.proof-list li::after{
  content:"";display:block;width:22px;height:2px;background:var(--pink);
  margin-top:clamp(7px,.7vw,10px);
}

/* --- footer -------------------------------------------------------------- */
.foot{border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,72px)}
.foot .shell{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px)}
/* pe mobil curgeau în două rânduri inegale; unul sub altul e mai curat */
.foot-nav{display:flex;flex-direction:column;gap:12px}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  color:var(--faint);font-size:var(--t-small);
  border-top:1px solid var(--rule);padding-top:22px;
}
.foot-bottom a:hover{color:var(--paper)}

/* ==========================================================================
   Praguri
   ========================================================================== */
@media (min-width:768px){
  .foot-nav{flex-direction:row;flex-wrap:wrap;gap:12px clamp(20px,2.4vw,36px)}
  .foot .shell{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
@media (min-width:992px){
  /* numele se distribuie de la o margine la alta a coloanei de conținut;
     space-between aliniază capetele cu restul paginii, iar accentul rămâne
     centrat sub fiecare nume */
  /* fără nowrap + flex-shrink 0, elementele se strâng și numele lungi se rup
     în interior („NATIONAL BASKETBALL / ASSOCIATION") în loc să-și țină rândul */
  .proof-list{flex-direction:row;justify-content:space-between;gap:12px clamp(16px,2vw,32px)}
  .proof-list li{white-space:nowrap;flex:0 0 auto}
  .proof-list li{text-align:center}
  .proof-list li::after{margin-inline:auto}

  .nav-desk{display:flex}
  .burger{display:none}
  .panel{display:none}
}

/* --- intrarea, o singură dată, orchestrată ------------------------------
   Ascunderea atârnă de clasa `anim`, nu de `js`, și `anim` se pune de script
   în aceeași respirație cu programarea lui `go`. Motivul e o pățanie: pe o
   pagină nouă scriptul avea `js` dar nu ajungea la `go`, iar CSS-ul a lăsat
   wordmark-ul și meniul la opacitate 0. O pagină fără scriptul complet
   trebuie să arate conținutul, nu să-l ascundă. */
.anim .door img{opacity:0}
.anim .seam{transform:scaleX(0)}
.anim .up{opacity:0;transform:translateY(22px)}
.anim.go .door img{opacity:1}
.anim.go .seam{animation:drawX 1.1s var(--ease) .5s forwards}
.anim.go .up{animation:up .9s var(--ease) forwards}
.anim.go .d0{animation-delay:.2s}
.anim.go .d1{animation-delay:.45s}
.anim.go .d2{animation-delay:.6s}
.anim.go .d3{animation-delay:.85s}
@keyframes up{to{opacity:1;transform:none}}
@keyframes drawX{to{transform:scaleX(1)}}
@keyframes drawY{to{transform:scaleY(1)}}

/* elementele care intră la scroll. Ascunderea atârnă tot de `anim`: fără JS,
   IntersectionObserver nu adaugă niciodată `.in`, iar o pagină întreagă ar
   rămâne goală. */
.anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.anim .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .anim .door img,.anim .seam,.anim .up,.anim .reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  *{transition:none!important}
}
/* ?static pentru capturi */
.static .door img,.static .seam,.static .up,.static .reveal,.static.anim .reveal{opacity:1!important;transform:none!important;animation:none!important}

/* --- citat cu linie roz (Candidate Experience, pe mai multe pagini) ----- */
.exp blockquote{border-left:var(--seam) solid var(--pink);padding-left:clamp(20px,2.4vw,36px)}
.exp blockquote p{max-width:26ch}
.exp .after{margin-top:clamp(22px,2.6vw,36px)}

@media (min-width:992px){
  /* alinierea la bază făcea ca blocul mai înalt din dreapta să pornească cu
     120px mai sus decât citatul, și cele două nu se citeau ca un rând (observat
     de Anca pe Join Our Network și About). Pornesc amândouă de sus. */
  .exp .frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
  .exp .after{margin-top:0}
}

/* --- recomandare, ultimul bloc înainte de formular ---------------------- */
/* Aceeași bară roz ca la `.exp`, ca să se citească drept aceeași familie de
   citate, dar litera e `--d4`, nu `--d3`: pe Home există deja două citate mari
   (banda și `exp`), iar un al treilea le-ar dilua pe toate. Aici greutatea o
   dă cine vorbește, nu mărimea.
   O coloană până la 992px, apoi aliniat la coloana din dreapta a lui `exp`,
   secțiunea de deasupra în pagină. Singurul prag folosit e cel pe care `exp`
   îl are deja. */
.reco blockquote{
  border-left:var(--seam) solid var(--pink);
  padding-left:clamp(20px,2.4vw,36px);
  /* Măsurat pe Home: casa are două spațieri sub eyebrow, 0 când dedesubt vine
     un titlu display (`prop`, `help`), care se separă singur prin mărime, și
     `--stack` când vine text de corp (`proof` 24px, `exp` 28px). Citatul de
     aici e de 25px, adică e text, nu titlu, deci ia `--stack`. Același token,
     nu o valoare nouă. */
  margin-top:var(--stack);
}
.reco-citat{font-size:var(--d4);line-height:1.35;max-width:34ch}
.reco-cine{
  display:flex;flex-wrap:wrap;column-gap:10px;row-gap:4px;   /* pe mobil numele și rolul cad pe rânduri separate */
  margin-top:clamp(14px,1.6vw,20px);
  /* `--t-small`, pasul care exista deja în scară între eyebrow (12px) și
     textul de corp (15,5px). Un 14px scris de mână ar fi fost o treaptă nouă
     doar aici, adică exact felul în care o scară de mărimi se destramă.
     Ierarhia din linie o face culoarea, nu mărimea: numele pe `--paper`,
     rolul pe `--mute`. */
  font-size:var(--t-small);line-height:1.5;
}
.reco-nume{color:var(--paper)}

/* ──────────────────────────────────────────────────────────────────────────
   Mai multe recomandări pe aceeași pagină (16.09.2026)

   Una singură păstrează EXACT aranjarea aprobată pe 09.09: eticheta relației
   deasupra, bara roz pe stânga citatului, totul în coloana din dreapta de la
   992 în sus. De-aia regulile de mai jos atârnă toate de `.reco--multe`, care
   apare doar de la două în sus.

   De la două, blocul iese din coloana din dreapta și ocupă lățimea întreagă:
   patru dovezi de livrare înghesuite pe jumătate de ecran s-ar fi citit ca o
   listă de bifat, nu ca mărturii. Litera rămâne `--d4`, adică exact cât la una
   singură: coloana e deja pe jumătate din lățime, deci măsura se strânge de la
   sine, fără să inventez o treaptă nouă în scară.
   ────────────────────────────────────────────────────────────────────────── */
.reco--multe .reco-lista{
  display:grid;grid-template-columns:1fr;
  gap:clamp(28px,3.4vw,48px);
  margin-top:var(--stack);
}
.reco--multe .reco-citat{max-width:none}

@media (min-width:768px){
  .reco--multe .reco-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:992px){
  /* Aliniat la coloana din dreapta a lui `exp`, secțiunea imediat de deasupra:
     aceeași grilă, același prag din tabelul casei, iar conținutul stă în
     coloana a doua. Cele două blocuri se citesc atunci ca un rând care
     continuă, nu ca două începuturi suprapuse. Cerut de Paul, 09.09.2026. */
  /* `column-gap`, nu `gap`: eyebrow-ul și citatul sunt două rânduri ale
     aceleiași coloane, iar un `gap` pe ambele axe le-ar depărta cu încă
     57px la 1440. Ritmul vertical îl ține `margin-top` de pe blockquote,
     cel potrivit cu `exp`. */
  .reco .frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,72px)}
  .reco .frame > *{grid-column:2}

  /* Mai multe: lățimea întreagă, deci grila de două coloane a lui `.frame` se
     anulează. Altfel patru mărturii ar sta toate în jumătatea dreaptă. */
  .reco--multe .frame{display:block}
}

/* linia legală cerută de client: prezentă, dar deliberat discretă */
.foot-legal{
  color:var(--faint);font-size:12px;line-height:1.6;
  margin-top:clamp(14px,1.6vw,20px);max-width:64ch;
}

/* ==========================================================================
   Adăugiri de la build (06.09.2026), care nu erau în mockup
   Datele de contact au apărut abia la accesul pe hosting, de pe site-ul
   actual al clientului. Paul a decis atunci că intră în footer.
   ========================================================================== */
.foot-strap{margin-top:14px;max-width:34ch}

.foot-contact{font-style:normal;color:var(--mute);font-size:var(--t-small);line-height:1.9}
.foot-contact a:hover{color:var(--paper)}
.foot-program{color:var(--faint)}

.foot-social{display:flex;gap:14px;margin-top:20px}
.foot-social a{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--rule);color:var(--mute);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.foot-social a:hover{color:var(--pink);border-color:var(--rule-strong)}
.foot-social svg{width:17px;height:17px}

/* Blocul de contact e a treia coloană, deci grila de footer crește de la două
   la trei. Sub 768px rămâne una singură, ca înainte. */
@media (min-width:768px){
  .foot .shell{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.9fr)}
}

/* Starea formularelor, tot de la build: mockup-ul n-avea unde s-o arate,
   fiindcă formularele nu trimiteau nicăieri. */
.form-stare{
  margin-top:var(--stack);padding:14px 18px;font-size:var(--t-small);
  border-left:var(--seam) solid var(--pink);background:rgba(251,251,251,.05);
}
.form-stare.is-eroare{border-left-color:#ff6b6b}