/* ==========================================================================
   Transfers in Sport — sistemul de design
   Extras din conceptul A (aprobat de client 02.09.2026) și aliniat cu
   specificațiile din Website Copy Pack FINAL (04.09.2026).
   Aici stau DOAR tokens, resetul, tipografia și utilitarele.
   Componentele sunt în componente.css, secțiunile Home în home.css.
   ========================================================================== */

:root{
  /* --- culoare -----------------------------------------------------------
     60-30-10: negrul e fundalul (60), albul e textul (30), roz-ul e accentul
     (10) și e rezervat acțiunilor, cusăturii și numerelor. Nicăieri altundeva. */
  --ink:#000;               /* fundalul, peste tot */
  --ink-lift:#0b0b0b;       /* fundal de secțiune ridicat, abia perceptibil */
  --paper:#fbfbfb;          /* textul principal */
  --mute:rgba(251,251,251,.62);   /* text secundar */
  --faint:rgba(251,251,251,.40);  /* etichete, numere de pas */
  --rule:rgba(251,251,251,.14);   /* linii */
  --rule-strong:rgba(251,251,251,.26);
  --pink:#f5a6c5;           /* accentul de brand, din copy pack */
  --pink-deep:#e07fa8;      /* doar stări și suprafețe, nu text mic */

  /* --- tipografie --------------------------------------------------------
     Inter e cerință de brand pentru text și UI. Display-ul e alegerea
     noastră: Barlow Condensed 800, condensat și sportiv, validat pe concept A. */
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --text:"Inter","Helvetica Neue",Arial,sans-serif;

  /* scara de display, uppercase, line-height strâns */
  --d1:clamp(56px,min(9.2vw,17svh),190px);  /* titlul din hero */
  --d2:clamp(38px,5.2vw,84px);              /* titlu de secțiune */
  --d3:clamp(28px,3.4vw,54px);              /* titlu de ușă, citat mare */
  --d4:clamp(22px,2vw,30px);                /* titlu de capabilitate */

  /* scara de text */
  --t-lead:clamp(17px,1.35vw,22px);
  --t-body:clamp(15.5px,1.05vw,17px);
  --t-small:13.5px;
  --t-eyebrow:12px;
  --track-eyebrow:.22em;
  --track-mark:.3em;

  /* --- ritm și spațiu ---------------------------------------------------- */
  --gutter:clamp(16px,3.6vw,56px);      /* 16px pe mobil, regula casei */
  --mast-y:clamp(22px,3vw,38px);        /* aerul de sus, deasupra barei */
  --mast-h:calc(var(--mast-y) * 2 + 44px); /* înălțimea barei fixe: padding + butonul de 44px */
  --section-y:clamp(64px,9vw,160px);    /* aerul dintre secțiuni */
  --stack:clamp(18px,2.2vw,32px);       /* între blocuri în aceeași secțiune */
  --measure:62ch;                       /* lățimea maximă a unei coloane de text */
  --shell:1560px;                       /* lățimea maximă a conținutului */
  --seam:2px;                           /* grosimea cusăturii roz */

  /* --- mișcare ----------------------------------------------------------- */
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--ink);color:var(--paper)}
body{
  font-family:var(--text);font-weight:400;font-size:var(--t-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
ul{list-style:none}
::selection{background:var(--pink);color:var(--ink)}

/* --- tipografie ---------------------------------------------------------- */
.display{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.9;letter-spacing:0;
}
h1.display{font-size:var(--d1);line-height:.88;letter-spacing:-.005em}
/* Pe ecrane mici titlurile se rup pe multe rânduri, iar 0.88-0.9 le lipește
   între ele. Rândurile primesc puțin aer, cât să rămână lizibile fără să
   piardă blocul compact (cerut de Anca, argument de lizibilitate). */
@media (max-width:767px){
  .display{line-height:1}
  h1.display{line-height:.96}
}
h2.display{font-size:var(--d2)}
h3.display{font-size:var(--d3)}
.eyebrow{
  font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;font-weight:600;color:var(--mute);
}
.eyebrow--pink{color:var(--pink)}
.lead{font-size:var(--t-lead);line-height:1.5;font-weight:400}
.prose{max-width:var(--measure)}
.prose p + p{margin-top:1em}
.prose--wide{max-width:76ch}
.mute{color:var(--mute)}

/* Bara de sus e fixă, deci orice salt la o ancoră trebuie să lase loc sub ea,
   altfel titlul secțiunii aterizează sub bară (verificat: se întâmpla pe mobil
   la „Join the network"). */
:target,[id]{scroll-margin-top:calc(var(--mast-h) + clamp(16px,2.4vw,32px))}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- structură ----------------------------------------------------------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--lift{background:var(--ink-lift)}
.section > * + *{margin-top:var(--stack)}
.rule{height:1px;background:var(--rule);border:0}

/* sări la conținut */
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:99;
  background:var(--pink);color:var(--ink);padding:12px 18px;font-weight:600;
  font-size:var(--t-small);letter-spacing:.06em;transition:top .2s var(--ease);
}
.skip:focus{top:12px}

/* vizibil doar pentru cititoarele de ecran */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}