/* ============================================================
   THE MARKET LAB — site
   Straturi, navigație, secțiuni, obiecte, micro-interacțiuni.
   ============================================================ */

/* ---------- 1. Straturile de fundal ---------- */

.page { position: relative; z-index: 3; }

/* ---------- 2. Navigația: o pastilă de sticlă ---------- */

/* Geometria barei, într-un singur loc. O folosesc și hero-ul, ca să știe cât
   spațiu să lase sub ea: bara e `position: fixed`, deci nu ocupă loc în flux și
   orice spațiu de sus calculat „din ochi” ajunge s-o atingă. */
:root {
  --bara-sus: clamp(0.85rem, 1.8vh, 1.5rem);
  --bara-inaltime: 56px;        /* sub 1024px; pe desktop o dă conținutul */
}

.nav {
  position: fixed;
  z-index: 40;
  top: var(--bara-sus);
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 1.6rem, 1180px);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: 0.5rem 0.5rem 0.5rem 1.35rem;
  border-radius: 999px;
  background: rgba(16, 16, 19, 0.62);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9), var(--glass-lift);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: auto;
}
.mark b { font-weight: 400; color: var(--ink); }
.mark i { font-style: normal; color: var(--red-hot); }
.mark__glyph { width: 17px; height: 15px; overflow: visible; flex: none; }
.mark__glyph rect, .mark__glyph line { transition: transform 0.7s var(--ease); }
.mark:hover .mark__glyph .c2 { transform: translateY(-2.5px); }
.mark:hover .mark__glyph .c3 { transform: translateY(-4.5px); }

.nav__links { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.5rem); }
.nav__links a {
  position: relative;
  padding: 0.5rem 0.2rem;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.2rem; right: 0.2rem; bottom: 0.15rem;
  height: 1px;
  background: var(--red-hot);
  box-shadow: 0 0 10px color-mix(in srgb, var(--red-mid) 90%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease);
}
.nav__links a:hover, .nav__links a.is-here { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-here::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav__burger span {
  position: absolute; left: 12px; right: 12px; height: 1px;
  background: var(--ink);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 23px; }
.nav[data-open="1"] .nav__burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav[data-open="1"] .nav__burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Peste 1024px panoul nu e un container: linkurile, selectorul de limbă și
   butonul stau direct în bară, ca și cum n-ar exista div-ul din jurul lor. */
@media (min-width: 1024px) {
  .nav__panel { display: contents; }
  /* Selectorul e primul în DOM, ca pe mobil să stea în stânga barei. Pe desktop
     ordinea vizuală o dă `order`: logo, linkuri, limbă, buton. */
  .mark { order: 1; }
  .nav__links { order: 2; margin-right: auto; }
  .lang { order: 3; }
  .nav__cta { order: 4; }
}

/* Sub 1024px bara păstrează doar logo-ul centrat și butonul de meniu; restul
   intră în panoul care se deschide, una sub alta. */
@media (max-width: 1023px) {
  /* Bară de 56px cu trei lucruri: pastila de limbă în stânga, logo-ul centrat,
     butonul de meniu în dreapta.

     FĂRĂ `overflow: hidden`. Avea rost pentru conținutul din bară, dar tăia și
     cele două panouri — al meniului și al limbilor. Sunt `position: fixed`, deci
     ar fi trebuit să scape; nu scăpau, fiindcă bara are și `transform`, și
     `backdrop-filter`, iar fiecare dintre ele o face bloc de referință pentru
     descendenții `fixed`. Se deschideau corect, cu `hidden=false`, și erau
     decupate complet: pe telefon nu se vedea nimic.

     Ce ținea el în frâu ține acum lățimea: logo-ul e `nowrap` și centrat, iar
     pastila și butonul au lățimi fixe — la 320px încă rămâne loc. */
  .nav {
    height: var(--bara-inaltime);
    padding: 0 10px;
    justify-content: center;
  }
  /* Centrat pe bară, nu pe spațiul rămas: pastila de limbă din stânga îl
     împingea cu 30px la dreapta. */
  .mark { margin-right: 0; position: absolute; left: 50%; transform: translateX(-50%); }
  .lang { position: static; margin-right: auto; }
  .nav__burger {
    display: block;
    width: 36px; height: 36px;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  }
  .nav__burger span { left: 10px; right: 10px; }
  .nav__burger span:nth-child(1) { top: 14px; }
  .nav__burger span:nth-child(2) { top: 21px; }
  .nav__panel {
    /* Blocul de referință e bara (are transform și backdrop-filter), deci
       măsurăm din ea: imediat sub, pe toată lățimea ei. */
    position: fixed;
    top: calc(100% + 8px);
    left: 0; right: 0;
    transform: translateY(-8px);
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem;
    border-radius: var(--r-lg);
    /* Aproape opac: peste titlul mare al hero-ului, o pastilă translucidă
       făcea linkurile greu de citit. */
    background: rgba(12, 12, 14, 0.985);
    border: 1px solid var(--glass-brd);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  }
  .nav[data-open="1"] .nav__panel { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: 0.9rem 1rem; }
  .nav__cta { justify-content: center; margin-top: 0.4rem; }

  /* Selectorul de limbă pe mobil: vezi secțiunea 12, după regulile lui de bază
     — acolo poate să le suprascrie, aici ar fi suprascris el. */
}

/* ---------- 4. Crosshair ---------- */

.cross { position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0; transition: opacity 0.9s var(--ease); }
.cross.is-live { opacity: 1; }
.cross__x, .cross__y { position: absolute; background: color-mix(in srgb, var(--red-mid) 16%, transparent); }
.cross__x { left: 0; right: 0; height: 1px; }
.cross__y { top: 0; bottom: 0; width: 1px; }
@media (pointer: coarse) { .cross { display: none; } }

/* ---------- 5. Secțiuni ---------- */

.sect { position: relative; padding-block: clamp(5.5rem, 14vh, 11rem); }
.sect__head { margin-bottom: clamp(2rem, 5vh, 4rem); }

/* Umbră locală pentru text peste grafic */
.scrim { position: relative; }
.scrim::before {
  content: "";
  position: absolute;
  /* Fără întindere pe orizontală: gradientul se stinge exact în marginile
     blocului. Cu inset lateral negativ, pseudo-elementul lățea documentul
     dincolo de ecran și telefonul micșora toată pagina ca s-o încapă.

     Marginea de sus e 0, nu -70%. Procentele se calculează din înălțimea
     blocului, deci la fiecare reașezare a textului — când intră fontul, de
     exemplu — marginea se schimba și muta în jos un dreptunghi pictat de vreo
     380 px. Asta era aproape tot CLS-ul paginii /ebook (0,0086 din 0,0114).
     Ancorat sus, dreptunghiul nu mai pleacă de la o poziție care se schimbă;
     tot ce crește cade în jos, unde nu deranjează. Vizual, diferența e sub 9
     din 255 pe un gradient întunecat — invizibilă. */
  inset: 0 0 -140% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side at 42% 50%,
    rgba(8,8,9,0.9) 0%, rgba(8,8,9,0.68) 52%, rgba(8,8,9,0) 100%);
}

/* --- Volumul I --- */
.volume { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.6rem, 3vw, 2.8rem); }
/* Copiile de grilă au implicit min-width:auto, deci nu pot coborî sub
   lățimea lor de min-content. Cu aspect-ratio pe copertă, Safari calculează
   acel minim din înălțime și lățește tot cardul dincolo de ecran. */
.volume > *, .grid > * { min-width: 0; }

@media (max-width: 900px) {
  .volume { grid-template-columns: 1fr; padding: clamp(1.1rem, 4.5vw, 1.8rem); }
  /* Coperta e un obiect, nu o bandă neagră lipită de margini */
  .volume__object { width: min(100%, 232px); margin-inline: auto; }
  .volume__object figcaption { left: 0.9rem; right: 0.9rem; bottom: 0.85rem; }
  .volume__object figcaption .mono { font-size: 0.5625rem; letter-spacing: 0.12em; }
}
.volume__object {
  position: relative;
  aspect-ratio: 3 / 4;
  /* `margin: 0 auto` scoate figura din întinderea pe coloană, iar fără lățime
     declarată înălțimea ieșea 0 (conținutul e absolut poziționat), deci și
     lățimea, prin aspect-ratio: coperta se făcea 2×3 px și dispărea. Se vedea
     și în producție, dinainte de reorganizare. */
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(155deg, #1C1418 0%, var(--void) 62%);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 40px 80px -50px rgba(155, 41, 53, 0.5);
}
.volume__object svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.volume__object figcaption { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; }

/* --- Formular --- */
.signal { margin-top: clamp(1.6rem, 4vh, 2.4rem); max-width: 32rem; }
.signal__row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 1.2rem;
  border-radius: 999px;
  background: rgba(8, 8, 9, 0.55);
  border: 1px solid var(--hairline-2);
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.signal__row:focus-within { border-color: rgba(155, 41, 53, 0.65); box-shadow: 0 0 34px -10px rgba(155, 41, 53, 0.8); }
.signal input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  color: var(--ink);
  /* Sub 16px, Safari pe iPhone mărește singur pagina la focus pe câmp
     și o lasă mărită — de acolo senzația că imaginea fuge în lateral. */
  font-family: var(--f-sans); font-size: 1rem; font-weight: 300;
  padding: 0.55rem 0;
}
.signal input::placeholder { color: var(--ink-dim); }
.signal__msg { margin-top: 0.8rem; min-height: 1.2em; }

/* --- Închidere --- */

/* --- Note și liste, folosite pe /promotii și /comunitate ---
   Tot din blocul tăiat odată cu secțiunile vechi de pe acasă. */
.note { padding: 1.1rem 1.3rem; border-radius: var(--r-md); max-width: 52ch; }

.remains { list-style: none; margin: 0; padding: 0; }
.remains li { padding: 0.8rem 0; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 0.9rem; }
.remains li:last-child { border-bottom: 0; }
.remains .dot {
  width: 3px; height: 12px; border-radius: 1px; flex: none;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  box-shadow: 0 0 12px rgba(155, 41, 53, 0.8);
}

/* --- Subsol și pagini interioare ---
   Blocul ăsta s-a pierdut la reorganizarea paginii de acasă: tăierea secțiunii
   de închidere a luat cu ea și regulile subsolului, ale paginilor interioare și
   ale cardurilor de pe /comunitate. Se vedea ca pictograma de Telegram uriașă
   (SVG fără dimensiune) și linkurile din subsol ca text simplu. Recuperat din
   main, fără `.close`, care chiar nu mai există. */
/* --- Subsol --- */
.foot { position: relative; z-index: 3; padding: clamp(2.5rem, 6vh, 4rem) 0 clamp(1.6rem, 4vh, 2.5rem); border-top: 1px solid var(--hairline); }
.foot__grid { display: flex; flex-wrap: wrap; gap: 2rem clamp(2rem, 7vw, 6rem); justify-content: space-between; }
.foot__nav { display: flex; flex-direction: column; gap: 0.6rem; }
.foot__nav a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); transition: color 0.4s var(--ease); }
.foot__nav a .tg {
  /* 16px, nu 11 ca înainte: la 10px text pictograma de 11px se pierdea. */
  width: 16px; height: 16px;
  flex: none;
  opacity: 0.6;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}
.foot__nav a:hover .tg { opacity: 1; color: var(--red-hot); }
.foot__nav a:hover { color: var(--ink); }
.foot__legal { max-width: 46ch; }

/* --- Pagini interioare --- */
.page-head { min-height: 76svh; display: flex; align-items: flex-end; padding-top: 30vh; padding-bottom: clamp(2.5rem, 8vh, 5rem); }

.chapters { list-style: none; margin: 0; padding: 0; }
.chapters li {
  position: relative;
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: baseline;
  padding: clamp(0.8rem, 1.8vh, 1.2rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.chapters li::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--red-hot), transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.8s var(--ease);
}
.chapters li:hover::after { transform: scaleX(1); }
.chapters .n { font-family: var(--f-mono); font-size: 0.5625rem; letter-spacing: 0.18em; color: var(--ink-dim); transition: color 0.5s var(--ease); }
.chapters li:hover .n { color: var(--red-hot); }
.chapters .t { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.05rem, 2.1vw, 1.6rem); line-height: 1.22; margin: 0; }
.chapters .d { grid-column: 2; color: var(--ink-dim); font-size: 0.875rem; margin: 0.3rem 0 0; max-width: 48ch; }

.negative { list-style: none; margin: 0; padding: 0; }
.negative li { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); color: var(--ink-dim); }
.negative li:last-child { border-bottom: 0; }
.negative .x { width: 10px; height: 1px; background: var(--red-deep); flex: none; }

.panel { padding: clamp(1.4rem, 2.4vw, 2rem); }

/* --- Intrarea în grup --- */
/* Pe butoane iconița trebuie să se vadă: altfel scrie „intră" și nu spui unde. */
.tg { width: 17px; height: 17px; flex: none; }
.btn--lg { padding: 1.05rem 2.1rem; letter-spacing: 0.22em; }
.btn--lg .tg { width: 21px; height: 21px; }
.join { text-align: left; }
.join__cta { margin: clamp(1.6rem, 4vh, 2.4rem) 0 1.1rem; }


/* ---------- 5b. Corecții pentru ecrane mici ---------- */

@media (max-width: 640px) {
  /* Etichetele mono sunt lizibile pe desktop la 11px, pe telefon nu. */
  .mono { font-size: 0.75rem; letter-spacing: 0.16em; }
  .tiny { font-size: 0.875rem; }
  .nav__links a { font-size: 0.6875rem; }
  .chapters .d { font-size: 0.9375rem; }
}

/* ---------- 6. Reveal ---------- */

.has-js .rev { opacity: 0; transform: translateY(16px); }
.has-js .rev.is-in { opacity: 1; transform: none; }
.rev {
  transition:
    opacity 1.1s var(--ease-soft) var(--d, 0s),
    transform 1.1s var(--ease) var(--d, 0s);
}

/* Primul ecran NU așteaptă JavaScript ca să apară.
   În rest, `.rev` pornește de la opacitate 0 și e aprins de IntersectionObserver
   — corect pentru ce e sub linia de plutire. Dar în primul ecran asta înseamnă
   că textul cel mai mare al paginii rămâne invizibil până rulează site.js, iar
   Lighthouse a măsurat 3,4 s de „render delay” exact pe subtitlul hero-ului.
   Aici animația e pur CSS: pleacă odată cu pagina, fără să depindă de nimic.

   Regula ține și pentru `.page-head`, primul ecran al paginilor interioare
   (/ebook, /comunitate, /promotii). Fără ea, pe /promotii titlul apărea atât de
   târziu încât elementul cel mai mare măsurat de Lighthouse ajungea rândul
   mărunt cu data de sub lede, nu h1-ul. Întârzierile din `--d` rămân: ordinea
   în care intră elementele e aceeași, doar că pleacă odată cu pagina. */
.has-js .hero .rev,
.has-js .page-head .rev { opacity: 0; transform: translateY(16px); animation: rev-in 1.1s var(--ease-soft) var(--d, 0s) forwards; }
.has-js .hero .rev.is-in,
.has-js .page-head .rev.is-in { opacity: 0; transform: translateY(16px); }   /* animația decide, nu clasa */
@keyframes rev-in { to { opacity: 1; transform: none; } }

/* ---------- 7. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .has-js .rev, .has-js .hero .rev, .has-js .hero .rev.is-in,
  .has-js .page-head .rev, .has-js .page-head .rev.is-in { opacity: 1; transform: none; animation: none; }
  .cross { display: none; }
}

/* ---------- 8. Promoții (pagina generată pe server, src/pages/promotii.js) ---------- */

.promo-sect .sect__head { margin-bottom: clamp(1.4rem, 3vh, 2.2rem); }

/* Informarea despre afiliere: vizibilă, deasupra listei, nu în subsol */
.promo-note {
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.4rem; align-items: baseline;
  padding: 1rem 1.3rem; border-radius: var(--r-md); margin-bottom: clamp(1.2rem, 3vh, 1.8rem);
  border-left: 2px solid var(--red);
}
.promo-note__k { margin: 0; color: var(--red-hot); }
.promo-note__t { margin: 0; max-width: none; font-size: 0.9375rem; color: var(--ink-70); }
@media (max-width: 640px) { .promo-note { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Filtre și ordonare: linkuri reale, generate pe server */
.promo-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 1.6rem; margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.promo-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.promo-filters__label { margin-right: 0.4rem; }
.promo-filter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--hairline-2); background: var(--glass-soft);
  font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.promo-filter:hover { color: var(--ink); border-color: rgba(155, 41, 53, 0.55); }
.promo-filter.is-on { color: var(--ink); border-color: var(--red); background: rgba(155, 41, 53, 0.14); box-shadow: 0 0 24px -10px rgba(155, 41, 53, 0.8); }
.promo-filter__n { color: var(--ink-dim); font-size: 0.5625rem; letter-spacing: 0.08em; }
.promo-filter.is-on .promo-filter__n { color: var(--red-hot); }

/* Grila de carduri */
.promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
@media (max-width: 1100px) { .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .promo-grid { grid-template-columns: 1fr; } }

.promo {
  position: relative; display: flex; flex-direction: column; gap: 0.9rem;
  padding: clamp(1.3rem, 2.2vw, 1.7rem); border-radius: var(--r-lg);
  transition: border-color 0.7s var(--ease), transform 0.7s var(--ease);
}
.promo:hover { border-color: rgba(155, 41, 53, 0.45); transform: translateY(-3px); }
/* Urgență reală: doar cardurile care chiar expiră în 7 zile primesc roșu */
.promo.is-expiring { border-color: rgba(206, 54, 68, 0.42); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95), 0 0 60px -30px rgba(206, 54, 68, 0.55), var(--glass-lift); }

.promo__head { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; align-items: center; }
.promo__logo {
  width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none;
  background: var(--surface); border: 1px solid var(--hairline);
}
.promo__logo--mono { display: grid; place-items: center; font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; color: var(--ink-70); }
.promo__who { min-width: 0; }
.promo__name { font-family: var(--f-display); text-transform: uppercase; font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.15; overflow-wrap: anywhere; }
.promo__type { margin: 0.25rem 0 0; }
.promo__badge {
  grid-column: 1 / -1; justify-self: start;
  padding: 0.4rem 0.75rem; border-radius: 999px;
  color: #F4EFE8; background: linear-gradient(180deg, var(--red-hot) 0%, var(--red) 100%);
  box-shadow: 0 8px 26px -8px rgba(155, 41, 53, 0.8);
}
.promo__title { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.4; color: var(--ink); max-width: none; margin: 0; }
.promo__details { margin: -0.3rem 0 0; max-width: none; }

/* Codul: monospațiat, cu buton de copiere; fără JavaScript rămâne text selectabil */
.promo__code {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.65rem 0.65rem 0.65rem 1rem; border-radius: 999px;
  background: rgba(8, 8, 9, 0.55); border: 1px solid var(--hairline-2);
}
.promo__code--none { border-style: dashed; }
.promo__code-k { flex: none; }
.promo__code-v { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 1rem; letter-spacing: 0.12em; color: var(--ink); overflow-wrap: anywhere; }
.promo__copy {
  appearance: none; cursor: pointer; flex: none;
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--hairline-2);
  background: var(--glass-soft); color: var(--ink); font-size: 0.5625rem; letter-spacing: 0.18em;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}
.promo__copy:hover { border-color: rgba(155, 41, 53, 0.6); }
.promo__copy.is-done { color: #F4EFE8; background: var(--red); border-color: var(--red); }
html:not(.has-js) .promo__copy { display: none; }

.promo__cta { justify-content: center; margin-top: auto; }
.promo__until { margin: -0.2rem 0 0; text-align: center; }
.promo__until.is-hot { color: var(--red-hot); }

.promo-empty { text-align: left; }
.promo-risk__t { max-width: 62ch; color: var(--ink-70); margin-top: 1.2rem; }

@media (max-width: 640px) {
  .promo__code-v { font-size: 1.05rem; }
  .promo__copy { font-size: 0.6875rem; }
  .promo-filter { font-size: 0.6875rem; letter-spacing: 0.14em; padding: 0.6rem 0.9rem; }
}

/* ---------- 9. Promoții pe acasă: starea goală ---------- */
/* Cardurile cu oferte sunt la secțiunea 10. Aici rămâne doar blocul afișat
   când nu există nicio ofertă activă — un singur card lat, nu o grilă. */
.tease {
  position: relative; display: flex; flex-direction: column; gap: 0.7rem;
  padding: clamp(1.3rem, 2.2vw, 1.7rem); border-radius: var(--r-lg);
  color: inherit; border-color: rgba(155, 41, 53, 0.28);
}
.tease__status {
  align-self: flex-start; padding: 0.38rem 0.7rem; border-radius: 999px;
  font-size: 0.5625rem; letter-spacing: 0.18em;
  border: 1px solid var(--hairline-2); color: var(--ink-dim);
}
.tease__status--soon { color: var(--ink-dim); background: var(--glass-soft); }
.tease__title { margin: 0; font-family: var(--f-display); text-transform: uppercase; font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.18; }
.tease__desc { margin: 0; font-size: 0.9375rem; color: var(--ink-70); }
.tease--empty { grid-column: 1 / -1; max-width: 46rem; }

/* ---------- 10. Pagina de acasă, structura nouă ---------- */

/* Singurul strat de fundal rămas sub hero: o lumină roșie statică în spatele
   secțiunii „Procesul”. Fără canvas, fără scroll, fără rAF. */
#procesul::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 40% at 50% 0%, rgba(155, 41, 53, .10), transparent 70%);
}

/* --- Antetul unei secțiuni --- */
.sect__head { margin-bottom: clamp(2rem, 5vh, 4rem); max-width: 56rem; }
.sect__head .tag { margin-bottom: 1.3rem; }
.sect__lede { margin-top: 1.2rem; max-width: 52ch; }
.sect__cta { margin-top: 1.8rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* --- Promoții pe acasă: trei coloane × două rânduri --- */
.deals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1000px) { .deals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.deal {
  position: relative;
  overflow: hidden;                 /* taie filigranul la marginea cardului */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r-lg);
  transition: border-color .7s var(--ease), transform .7s var(--ease);
}
.deal:hover { border-color: rgba(155, 41, 53, .45); transform: translateY(-3px); }

/* Filigranul: același logo, mare, în colțul din dreapta-sus, decupat de margine.
   Alb-negru și aproape invizibil — textură, nu al doilea logo. */
.deal__wm {
  position: absolute;
  top: -26px; right: -26px;
  width: 120px; height: 120px;
  object-fit: contain;
  opacity: .07;
  filter: grayscale(1);
  pointer-events: none;
  z-index: 0;
}
.deal > *:not(.deal__wm) { position: relative; z-index: 1; }

.deal__brand { display: flex; align-items: center; gap: 10px; }
.deal__mark {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(230, 225, 217, .06);
  overflow: hidden;
}
.deal__logo { width: 40px; height: 40px; object-fit: contain; display: block; }
.deal__logo--gol { font-size: .875rem; color: var(--ink-70); }
.deal__partner { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }

/* Conținutul stă lipit sus, iar spațiul liber se adună la final. Marginile
   paragrafelor se anulează explicit: regula generală din base.css le dă
   1.1em, adică 70px sub o cifră de 64px — exact golul pe care nu-l vrem. */
.deal > p { margin: 0; }
.deal__pct {
  font-family: var(--f-display); font-weight: 500; line-height: .9;
  font-size: 64px; color: var(--ink);
  margin: 2px 0 0;
}
.deal__pct span { font-size: .5em; margin-left: .06em; }
.deal__title { margin: -2px 0 0; font-size: .9375rem; color: var(--ink-70); }

.deal__code {
  margin-top: 6px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .45rem .5rem .45rem .7rem;
  border: 1px solid var(--hairline-2); border-radius: var(--r-md);
}
.deal__code code { font-family: var(--f-mono); font-size: .8125rem; color: var(--ink); }
.deal__code--none { justify-content: center; color: var(--ink-dim); font-size: .6875rem; text-align: center; }
.deal__go { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-70); }
.deal__go:hover { color: var(--red-hot); }
.deal__arrow { font-style: normal; color: var(--red-hot); }

/* Slotul liber din grilă, cu bordură punctată: trimiterea către pagina completă. */
.deal--all {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px; border-radius: var(--r-lg);
  border: 1px dashed var(--hairline-2);
  background: none;
  color: inherit;
  transition: border-color .5s var(--ease);
}
.deal--all:hover { border-color: rgba(206, 54, 68, .5); }
.deal--all > p { margin: 0; }
.deal__alltag { color: var(--ink-dim); }
.deal__alltext { font-size: .9375rem; color: var(--ink-70); max-width: 28ch; }

/* Sub grilă: un singur buton, apoi mențiunea. Butonul e randat în interiorul
   grilei (are nevoie de numărul de oferte, care vine din bază), deci ține toată
   lățimea rândului și se centrează în ea.
   Alb cald pe fundal negru, cu scrisul roșu — inversul butonului „Vezi Volumul
   I”, deci se vede că e tot un îndemn, dar nu concurează cu el. */
.deals__all {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-flex; align-items: center; gap: .5rem;
  height: 44px; padding: 0 1.4rem;
  margin-top: 8px;
  border: 0; border-radius: 999px;
  background: var(--ink);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.deals__all:hover, .deals__all:focus-visible { background: #FFFFFF; color: var(--red-hot); }

/* Mențiunea, sub buton: text normal, nu mono — se citește, nu se scanează. */
.deals__aff {
  margin: 16px auto 0;
  max-width: 52ch;
  text-align: center;
  font-family: var(--f-sans); font-weight: 300; font-size: 13px; line-height: 1.5;
  color: var(--ink-dim);
}

.deal__copiat { display: none; }

/* Pe telefon, trei carduri pe un rând, în variantă mini: logo, procent, cod.
   Titlul și linkul dispar — la lățimea asta n-ar încăpea citibil. În schimb
   tot cardul copiază codul, deci gestul e mai mare, nu mai mic. */
@media (max-width: 640px) {
  .deals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .deal:nth-of-type(n+4), .deal--all { display: none; }

  .deal { padding: 10px; gap: 6px; cursor: pointer; }
  .deal__wm { width: 64px; height: 64px; top: -14px; right: -14px; }
  /* Numele trece sub logo: lângă el are 53px și „FORTRADER” se rupe în
     „FORTRAD / ER”. Sub logo are toată lățimea cardului și încape întreg. */
  .deal__brand { flex-direction: column; align-items: flex-start; gap: 6px; }
  .deal__mark { width: 32px; height: 32px; border-radius: 8px; }
  .deal__logo { width: 32px; height: 32px; }
  /* Numele se rupe pe două rânduri în loc să fie tăiat cu „…”: la 111px lățime
     „FUNDINGPI…” nu spune nimic, „FUNDING PIPS” pe două rânduri spune tot. */
  .deal__partner {
    font-size: 10px; letter-spacing: .04em; line-height: 1.15;
    white-space: normal; min-width: 0;
  }
  .deal__pct { font-size: 36px; margin: 0; }
  .deal__title, .deal__go, .deal .promo__copy { display: none; }
  .deal__code {
    margin-top: auto; justify-content: center;
    padding: .3rem .25rem; border-radius: 8px;
  }
  .deal__code code { font-size: 10px; letter-spacing: .04em; }
  .deal__code--none .mono { font-size: 9px; }
  /* Confirmarea ia locul codului o clipă, ca degetul să vadă că s-a întâmplat ceva. */
  .deal.is-copiat .deal__code code { display: none; }
  .deal__copiat { font-size: 10px; letter-spacing: .08em; color: var(--red-hot); }
  .deal.is-copiat .deal__copiat { display: inline; }

}

/* --- Volumul I --- */
.vol-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.vol-list li { display: flex; gap: .9rem; align-items: flex-start; color: var(--ink-70); }
.vol-list li::before {
  content: ""; flex: none; margin-top: .45em;
  width: 3px; height: 12px; border-radius: 1px;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  box-shadow: 0 0 12px rgba(155, 41, 53, .8);
}
.vol-meta { margin-top: 1.6rem; color: var(--ink-dim); text-transform: uppercase; }
.vol-cta { margin-top: 1.4rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }

/* --- Procesul: grilă bento --- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  grid-auto-rows: minmax(0, auto);
}
.bento > * { padding: 28px; border-radius: var(--r-lg); }
.bento__a { grid-column: span 8; }
.bento__b { grid-column: span 4; }
.pil      { grid-column: span 3; }
.bento__g { grid-column: span 12; }

@media (max-width: 1100px) { .pil { grid-column: span 6; } }
@media (max-width: 900px) {
  .bento__a, .bento__b { grid-column: span 12; }
  /* Pe o coloană, cifrele se citesc primele: sunt cel mai scurt drum spre „cine
     sunt ăștia”. Lista lungă vine după. */
  .bento__b { order: -1; }
}
@media (max-width: 600px) {
  .pil { grid-column: span 12; }
  .bento > * { padding: 20px; }
}

.subtract { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.subtract .tag { display: block; margin-bottom: 1.2rem; }
@media (max-width: 900px) {
  .subtract { grid-template-columns: 1fr; gap: 24px; }
  /* „A rămas” înaintea listei tăiate: concluzia, apoi drumul până la ea. */
  .subtract__col:last-child { order: -1; }
}

.cut { list-style: none; margin: 0; padding: 0; }
.cut li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .55rem 0; border-bottom: 1px solid var(--hairline);
}
.cut li:last-child { border-bottom: 0; }
/* Numărul NU se taie: el numără, nu e unul dintre lucrurile scoase. Linia stă
   pe text, nu pe rând — `text-decoration` moștenită de pe părinte n-ar mai
   putea fi scoasă de pe copil. */
.cut .idx { font-size: .5625rem; letter-spacing: .16em; color: var(--red); flex: none; }
.cut .txt {
  font-size: .9375rem;
  /* Tăiat, dar lizibil: culoarea rămâne peste 0.5 opacitate, iar linia e roșie,
     nu textul — altfel rândul devine un gri pe care nu-l mai citește nimeni. */
  color: rgba(230, 225, 217, .55);
  text-decoration: line-through;
  text-decoration-color: rgba(206, 54, 68, .7);
  text-decoration-thickness: 1px;
}

.kept { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.kept li {
  position: relative; padding: .7rem 0 .7rem 1.1rem;
  font-family: var(--f-sans); font-weight: 400; font-size: 1.0625rem; color: var(--ink);
}
.kept li::before {
  content: ""; position: absolute; left: 0; top: .85rem; bottom: .85rem;
  width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  box-shadow: 0 0 12px rgba(155, 41, 53, .7);
}

.nums { list-style: none; margin: 0; padding: 0; display: grid; }
.nums li { padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
.nums li:first-child { padding-top: 0; }
.nums li:last-child { border-bottom: 0; padding-bottom: 0; }
.num__n { display: block; font-family: var(--f-display); font-weight: 300; font-size: 4rem; line-height: .95; color: var(--ink); }
.num__l { display: block; margin-top: .35rem; text-transform: uppercase; }
@media (max-width: 900px) {
  .nums { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .nums li { border-bottom: 0; padding: 0; }
  .num__n { font-size: 3rem; }
}
@media (max-width: 420px) { .num__n { font-size: 2.4rem; } }

.pil__glyph { display: block; width: 40px; height: 28px; color: var(--red); opacity: .8; margin-bottom: 1.4rem; }
.pil__t { font-family: var(--f-display); font-weight: 500; font-size: 1.375rem; line-height: 1.15; text-transform: uppercase; margin-bottom: .7rem; }
.pil__d { font-family: var(--f-sans); font-weight: 300; font-size: .9375rem; color: var(--ink-70); }

/* Citatul nu mai e card: e nota de final a secțiunii. Fără bordură, fără
   fundal, doar o linie subțire deasupra și textul pe un rând. */
.bento__g {
  grid-column: span 12;
  padding: 40px 0;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.bento__g::before {
  content: "";
  width: 48px; height: 1px;
  background: var(--hairline);
}
.quote {
  font-family: var(--f-display); font-weight: 300;
  font-size: 20px; line-height: 1.4; letter-spacing: .02em;
  text-align: center; color: var(--ink-70);
  max-width: none; margin: 0;
}
@media (max-width: 700px) { .quote { font-size: 18px; max-width: 34ch; } }

/* --- Comunitate: ce găsești în grup --- */
.incl__tag { display: block; margin-bottom: 1.2rem; }
.incls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); }
@media (max-width: 700px) { .incls { grid-template-columns: 1fr; } }
.incl { padding: clamp(1.2rem, 2vw, 1.6rem); border-radius: var(--r-md); }
.incl__t { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: .8rem; }
.incl__d { font-size: .9375rem; color: var(--ink-70); }

/* --- Newsletter --- */
.news { padding: clamp(1.6rem, 3vw, 2.4rem); }
.news .signal { margin-top: 0; max-width: 40rem; }
.news .signal > .tag { margin-bottom: 1rem; }
/* Eticheta e lungă și `.tag` e nowrap: pe telefon trebuie să se rupă, altfel
   împinge pagina în lateral. */
@media (max-width: 560px) {
  .news .signal > .tag { white-space: normal; align-items: flex-start; }
  .news .signal > .tag::before { margin-top: .45em; flex: none; }
}

/* ---------- 11. Hero ----------
   Static: niciun canvas, niciun rAF, niciun listener de scroll. Singura mișcare
   e hover-ul de pe copertă, oprit la prefers-reduced-motion. */

.hero {
  position: relative;
  min-height: min(100svh, 900px);
  background: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(7rem, 14vh, 9rem) 0;
  overflow: hidden;
}

/* Singura lumină din pagină: un cerc în spatele copertei. */
.hero__glow {
  position: absolute;
  width: 820px; height: 820px;
  right: -90px; top: 50%;
  transform: translateY(-54%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(155,41,53,.28), rgba(155,41,53,.08) 55%, transparent 72%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero__kicker--mobil { display: none; }

.hero__h1 {
  font-family: var(--f-display);
  font-weight: 500;
  /* Plafonul e 56px, nu 64: într-o coloană de 600px, „PE CARE ÎL POȚI REPETA.”
     nu încape pe un rând la 64px, iar titlul s-ar rupe în trei. Macheta îl
     arată pe două rânduri, iar două rânduri sunt și cerința. */
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hero__h1 .hot { color: var(--red-hot); }

.hero__p {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(230, 225, 217, .78);
  max-width: 520px;
}

/* Pastilele: lista își pierde marcatorii și devine un rând care se înfășoară. */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 30px; padding: 0 .8rem;
  border: 1px solid var(--hairline-2); border-radius: 999px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-70); white-space: nowrap;
}
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--red-hot); box-shadow: 0 0 8px rgba(206, 54, 68, .8);
}
.hero__chips { justify-content: flex-start; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hero__arrow { font-style: normal; color: var(--red-hot); }
/* Disclaimerul nu mai e etichetă mono, ci frază: un singur paragraf, text
   normal, maximum două rânduri. Se citește, nu se scanează. */
.hero__fine {
  font-family: var(--f-sans); font-weight: 300;
  font-size: 13px; line-height: 1.5; letter-spacing: 0;
  color: var(--ink-dim);
  max-width: 440px;
  text-align: left;
}
.hero__fine--mobil { display: none; }

/* --- Coperta --- */
.hero__cover { position: relative; display: grid; place-items: center; justify-self: end; }

/* `max-width: none` anulează regula generală pentru svg din base.css: altfel
   lumânările s-ar strânge la lățimea copertei și n-ar mai ieși din spatele ei. */
.hero__candles {
  position: absolute;
  width: 560px; height: 560px; max-width: none;
  /* Împinse spre dreapta, ca din spatele copertei să iasă capătul urcător al
     seriei — partea care se citește ca „piață”, nu două dreptunghiuri. */
  right: -150px; top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  opacity: .9;
  filter: drop-shadow(0 0 18px rgba(206, 54, 68, .55));
  pointer-events: none;
}
.hero__candles--mobil { display: none; }

.cover {
  position: relative;
  z-index: 1;
  width: 360px; height: 500px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(160deg, #17171A, #0D0D0F);
  border: 1px solid rgba(230, 225, 217, .14);
  box-shadow: -30px 40px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(230, 225, 217, .12);
  transform: perspective(1400px) rotateY(-16deg) rotateX(4deg);
  transform-origin: left center;
  transition: transform 600ms var(--ease);
}
.cover:hover { transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); }
.cover__top { color: var(--ink-dim); }
.cover__art { flex: 1; width: 100%; min-height: 0; margin: 8px 0 12px; }
.cover__foot { display: grid; gap: 2px; }
.cover__brand, .cover__vol { font-family: var(--f-display); font-size: 34px; line-height: 1.04; }
.cover__brand { font-weight: 500; color: var(--ink); }
.cover__vol { font-weight: 300; color: var(--red-hot); }
.cover__sub { margin-top: 10px; font-size: 10px; color: var(--ink-dim); }

/* --- Banda de dovezi --- */
.proof {
  position: relative;
  z-index: 1;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Se înfășoară mai degrabă decât să se înghesuie: la 1024px cele două grupuri
     nu mai încap pe un rând, iar logo-urile ieșeau din bandă. */
  flex-wrap: wrap;
  gap: 16px 48px;
  padding-block: 14px;
  border-top: 1px solid var(--hairline);
}
.proof__nums { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; }
.proof__nums li { display: flex; align-items: baseline; gap: .6rem; }
.proof__nums li + li { border-left: 1px solid var(--hairline); padding-left: 28px; }
.proof__n { font-family: var(--f-display); font-weight: 300; font-size: 28px; line-height: 1; color: var(--ink); }
.proof__l { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.proof__partners { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.proof__k { font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.proof__logo { height: 18px; width: auto; display: block; object-fit: contain; }
.proof__name { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(230, 225, 217, .7); white-space: nowrap; }

/* --- Între 1024 și 1200: coloana stângă se strânge, coperta se micșorează --- */
@media (max-width: 1200px) and (min-width: 1024px) {
  .hero__grid { grid-template-columns: 52% minmax(0, 1fr); }
  /* Mai puțin loc: cifrele se strâng, logo-urile scad de la 18 la 16px. */
  .proof__nums { gap: 18px; }
  .proof__nums li + li { padding-left: 18px; }
  .proof__partners { gap: 14px; }
  .proof__logo { height: 16px; }
  .cover { width: 300px; height: 416px; padding: 20px; }
  .cover__brand, .cover__vol { font-size: 28px; }
  .hero__candles { width: 460px; height: 460px; right: -20px; }
}

/* --- Mobil: o coloană, varianta lejeră --- */
@media (max-width: 1023px) {
  .hero {
    min-height: 0;
    /* 24px liberi sub bară, oricât ar fi ea de jos. Socotiți din bară, nu de
       la marginea paginii: bara e `position: fixed`, nu ocupă loc în flux, iar
       poziția ei depinde de înălțimea ecranului. Au fost întâi 48px — nu se mai
       atingeau, dar se căsca un gol și împingeau coperta sub prima pagină. */
    padding: calc(var(--bara-sus) + var(--bara-inaltime) + 24px) 0 0;
    justify-content: flex-start;
  }
  .hero__grid { grid-template-columns: 1fr; gap: 51px; padding-inline: 24px; }
  .hero__text { align-items: center; text-align: center; gap: 18px; }
  .hero__kicker { display: none; }
  /* Marginea de jos vine din regula de bază pentru <p> (1.1em). O scriem
     explicit ca să putem strânge rândul etichetă → titlu separat de restul:
     altfel `gap` le-ar muta pe amândouă deodată. */
  .hero__kicker--mobil { display: inline-flex; margin-bottom: 12px; }
  .hero__h1 { font-size: 44px; line-height: 1.04; max-width: none; }
  /* Pe mobil cade tot ce nu ajută decizia: paragraful, pastilele, al doilea
     rând de disclaimer și banda „Coduri active la…”. */
  .hero__p, .hero__chips, .proof__partners { display: none; }
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; gap: 12px; }
  .hero__cta .btn--red { width: 100%; height: 54px; justify-content: center; }
  .hero__cta-ghost { align-self: center; height: 42px; width: auto; padding: 0 22px; font-size: 11px; }
  .hero__text .hero__fine { display: none; }
  /* Fără plafonul de 34ch: la 13px îl rupea în patru rânduri. Lățimea o dă
     ecranul minus marginile, iar fraza intră în două. */
  .hero__fine--mobil {
    display: block; text-align: center;
    max-width: none; margin-inline: auto;
    padding: 18px 24px 28px;
  }

  /* Ancorat de copertă, nu de marginea de jos a hero-ului: altfel, cât timp
     pagina încă se așează, mutarea lui se contorizează ca salt de aspect. */
  .hero__glow { position: absolute; width: 560px; height: 560px; right: 50%; top: 58%; bottom: auto; transform: translate(50%, -40%); }
  .hero__cover { justify-self: center; }
  .cover {
    width: 200px; height: 278px; padding: 16px;
    transform: perspective(1200px) rotateY(-12deg) rotateX(3deg);
  }
  .cover__brand, .cover__vol { font-size: 20px; }
  .cover__sub, .cover__foot .cover__sub { display: none; }
  .hero__candles--desktop { display: none; }
  .hero__candles--mobil { display: block; width: 300px; height: 420px; right: auto; opacity: .7; }

  .proof { margin-top: 48px; padding-inline: 24px; min-height: 0; padding-block: 20px; gap: 0; }
  .proof__nums { width: 100%; gap: 0; }
  .proof__nums li { flex: 1; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .proof__nums li + li { padding-left: 0; }
  .proof__n { font-size: 26px; }
  .proof__l { font-size: 9px; letter-spacing: .08em; max-width: 96px; white-space: normal; }
}

/* Sub 390px titlul mai ia un rând și hero-ul trece de 960px. Strângem spațiile,
   nu scoatem conținut — regula e aceeași ca în machetă, doar mai îndesată. */
@media (max-width: 389px) {
  /* Spațiul de sub bară NU se strânge aici: era singurul loc de unde eticheta
     ajungea din nou sub bară. Ce se strânge sunt distanțele dintre blocuri. */
  .hero__grid { gap: 40px; }
  .hero__text { gap: 15px; }
  .hero__kicker--mobil { margin-bottom: 11px; }
  .proof { margin-top: 36px; padding-block: 16px; }
  .hero__fine--mobil { padding: 14px 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cover, .cover:hover { transition: none; }
}

/* ---------- 12. Selectorul de limbă ---------- */

.lang { position: relative; display: inline-flex; }
.lang__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 40px; padding: 0 .8rem;
  border: 1px solid var(--hairline-2); border-radius: 999px;
  background: var(--glass-soft);
  color: var(--ink);
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.lang__btn:hover { border-color: rgba(206, 54, 68, .5); }
.lang__chev { width: 10px; height: 6px; color: var(--red-hot); transition: transform .3s var(--ease); }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  z-index: 50;
  width: 168px; padding: 6px;
  list-style: none; margin: 0;
  border-radius: 16px;
  background: rgba(14, 14, 16, .96);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95), var(--glass-lift);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.lang__menu [role="option"] {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 12px;
  border-radius: 10px;
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .08em;
  color: var(--ink-dim);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.lang__menu [role="option"]:hover { background: var(--glass-soft); color: var(--ink); }
.lang__menu [role="option"]:focus-visible { outline: 1px solid var(--red-hot); outline-offset: -1px; }
.lang__menu [aria-selected="true"] { background: rgba(155, 41, 53, .18); color: var(--ink); }
/* Bulina roșie marchează limba curentă; pe celelalte rânduri nu există. */
.lang__menu [aria-selected="true"] i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red-hot); box-shadow: 0 0 10px rgba(206, 54, 68, .9);
}

/* ============================================================
   10. Selector de limbă
   Coduri din două litere în bară, discret; limba activă în roșul
   de brand. Marcajul îl pune Worker-ul, cu linkuri gata calculate
   către aceeași pagină în cealaltă limbă.
   ============================================================ */
.langbar {
  position: fixed; left: 1rem; bottom: 1.1rem;
  display: flex; align-items: center; gap: .9rem; z-index: 60; max-width: 320px;
  padding: .6rem .9rem; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--glass-brd); box-shadow: var(--glass-lift);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: 400 12px/1.4 var(--f-sans); color: var(--ink-70);
}
.langbar a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.langbar button {
  appearance: none; background: none; border: 0; color: var(--ink-45); cursor: pointer;
  font: 400 16px/1 var(--f-sans); padding: 0 .2rem;
}
.langbar button:hover { color: var(--ink); }
@media (max-width: 480px) {
  .langbar {
    left: 0; right: 0; bottom: 0; max-width: none; max-height: 48px;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: .55rem .9rem; gap: .7rem;
  }
  .langbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: no-preference) { .langbar { animation: langbar-in .4s var(--ease) both; } }
@keyframes langbar-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ------------------------------------------------------------
   Limbile traduse au fraze mai lungi decât româna (engleza ~15 %,
   franceza ~20 %). Titlurile mari sunt singurul loc unde asta se
   vede: ar trece de la două rânduri la patru și ar împinge
   butoanele sub ecran. Le lăsăm puțin mai mici și le dăm mai
   multă lățime, doar în afara românei.
   ------------------------------------------------------------ */
html:not([lang="ro"]) .display--l  { font-size: clamp(2rem, 5.2vw, 4.2rem); }

/* ============================================================
   11. Pagini legale, blocul de identificare și disclaimerele
   Text lung, citit rar dar cu atenție: măsură îngustă, contrast
   liniștit, tabele care se derulează singure pe telefon.
   ============================================================ */
.legal { padding: clamp(7rem, 14vh, 10rem) 0 4rem; max-width: 78ch; }
.legal h1 { margin: 0 0 .6rem; }
.legal__meta { color: var(--ink-45); font-size: 12px; letter-spacing: .04em; margin: 0 0 2.6rem; }

.legal__prose { color: var(--ink-70); font-size: 1rem; line-height: 1.75; }
.legal__prose h2 {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.2; color: var(--ink); margin: 3rem 0 1rem; scroll-margin-top: 6rem;
}
.legal__prose h3 {
  font-family: var(--f-sans); font-weight: 400; font-size: 1.02rem;
  color: var(--ink); margin: 2rem 0 .6rem; scroll-margin-top: 6rem;
}
.legal__prose h2:first-child { margin-top: 0; }
.legal__prose p { margin: 0 0 1rem; }
.legal__prose strong { color: var(--ink); font-weight: 500; }
.legal__prose a { color: var(--red-mid); text-underline-offset: 3px; }
.legal__prose ul, .legal__prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal__prose li { margin-bottom: .5rem; }

/* Tabelele: pe telefon se derulează în interiorul lor, pagina nu se lățește. */
.legal__table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4rem; }
.legal__table table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .92rem; }
.legal__table th, .legal__table td {
  text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--hairline); vertical-align: top;
}
.legal__table th { color: var(--ink); font-weight: 500; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }

/* Avertismentul de risc — pe fiecare pagină, în subsol. */
.legal-risk {
  margin: 2.4rem auto 0; max-width: var(--measure);
  border-top: 1px solid var(--hairline); padding-top: 1.4rem;
}
.legal-risk p {
  margin: 0; max-width: 82ch; font-size: 12px; line-height: 1.65; color: var(--ink-45);
}

/* Identificarea firmei + linkurile către documentele legale. */
.legal-id { margin: 1.6rem auto 0; max-width: var(--measure); }
.legal-id__line { margin: 0 0 .25rem; font-size: 11px; line-height: 1.6; color: var(--ink-45); }
.legal-id__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .9rem; }
.legal-id__nav a {
  font-size: 12px; color: var(--ink-45); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.legal-id__nav a:hover { color: var(--ink); border-bottom-color: var(--hairline-2); }

/* Pictogramele ANPC, doar pe prima pagină. */
.legal-anpc { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
.legal-anpc img { display: block; height: auto; max-width: 250px; }

/* Mențiunea de lângă un link de afiliere. Vizibilă, nu ascunsă în subsol. */
.legal-aff {
  margin: .6rem 0 0; font: 400 11px/1.5 var(--f-mono); color: var(--ink-45);
}

@media (max-width: 640px) {
  .legal { padding-top: 6rem; }
  .legal__prose { font-size: .96rem; }
  .legal__prose h2 { margin-top: 2.2rem; }
}

/* Textul de consimțământ de sub formularul de abonare. Vizibil, nu ascuns:
   e dovada pe care o păstrăm în baza de date odată cu adresa. */
.signal__consent { margin: .9rem 0 0; max-width: 52ch; line-height: 1.6; }
.signal.is-sending .signal__row { opacity: .6; }
.signal button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }

/* Sub 1024px selectorul nu se mai deschide: limbile stau desfășurate în meniu,
   una sub alta, iar pastila nu mai are rost. Regulile stau AICI, după cele de
   bază: aceeași specificitate, deci câștigă cine e scris ultimul. */
/* Pe mobil pastila stă în stânga barei, mai mică, iar panoul se deschide la fel
   ca pe desktop. E `position: fixed` fiindcă bara are `overflow: hidden`: un
   panou absolut ar fi tăiat de marginea ei. */
@media (max-width: 1023px) {
  .lang { position: static; }
  .lang__btn { height: 32px; padding: 0 .6rem; gap: .35rem; }
  .lang__menu {
    /* Ca și panoul de meniu: măsurat din bară, nu din ecran. Aliniat la stânga
       cu pastila, adică la padding-ul barei. */
    position: fixed;
    top: calc(100% + 8px);
    left: 10px;
    right: auto;
  }
}

/* ---------- 13. Mențiunea de traducere și pagina 404 ---------- */

/* Pe paginile legale traduse: un rând discret care spune că originalul e în
   română. Nu e un avertisment, e o precizare — deci nu țipă. */
.legal__machine {
  margin: -1.6rem 0 2.6rem;
  padding: .7rem .9rem;
  border-left: 2px solid var(--hairline-2);
  font-family: var(--f-sans); font-weight: 300; font-size: 13px; line-height: 1.5;
  color: var(--ink-dim);
  max-width: 62ch;
}

.notfound {
  min-height: 70svh;
  /* Același spațiu de sus ca paginile legale: bara e fixă și ar acoperi titlul. */
  padding: clamp(7rem, 14vh, 10rem) 0 4rem;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1.2rem;
}
.notfound .lede { max-width: 46ch; }
.notfound__cta { margin-top: .6rem; }

/* Rândul de legături de sub buton: aceeași tipografie ca subsolul, pe orizontală. */
.notfound__links { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; margin-top: .4rem; }
.notfound__links a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); border-bottom: 1px solid var(--hairline); padding-bottom: .3rem;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.notfound__links a:hover { color: var(--ink); border-bottom-color: var(--hairline-2); }
.notfound__links .tg { width: 16px; height: 16px; flex: none; opacity: 0.6; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); }
.notfound__links a:hover .tg { opacity: 1; color: var(--red-hot); }