/*
Theme Name: Loyalty Day 2026 Child
Theme URI: http://localhost/loyalty-day-2026
Description: Child theme pentru site-ul Loyalty Day 2026. Bazat pe Hello Elementor.
Author: MHM Marketing
Template: hello-elementor
Version: 0.3.1
Text Domain: loyalty-day-child
*/

/* Fraunces italic (self-host, OFL-1.1), accent editorial pe cuvinte-cheie (ex. "diferit").
   Instanta statica opsz 144 / wght 500 italic; latin + latin-ext. Fara CDN (ca DM Sans).

   CAILE SUNT RELATIVE, deliberat. In CSS, un url() se rezolva fata de fisierul CSS, nu fata de
   pagina, iar fonturile stau chiar langa style.css. Asa merge oriunde e gazduit site-ul, fara
   nicio configurare: local in subdirectorul /loyalty-day-2026/, pe Railway la radacina, maine pe
   loyaltyday.ro. Cu cale absoluta (/loyalty-day-2026/...) fonturile dadeau 404 pe Railway si
   pagina se randa cu fonturi de sistem: masurat, nu presupus. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('experiments/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('experiments/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* DM Sans self-host (OFL-1.1) site-wide, inlocuieste Google Fonts CDN (elimina request extern render-blocking). */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('experiments/fonts/dm-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('experiments/fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ============================================
   Design tokens, Loyalty Day 2026
   ============================================ */
:root {
  /* Culori brand */
  --brand-primary:   #7868C6; /* violet */
  --brand-secondary: #E9E20E; /* galben */
  --brand-accent:    #37529E; /* albastru */

  /* Neutre */
  --brand-ink:       #1A1A2E; /* text principal */
  --brand-muted:     #6E6A84; /* text secundar */
  --brand-bg:        #FFFFFF; /* fundal */
  /* Fundalul alternativ (Program, Sponsori, Inscriere, Punte). Era scris de mana in 4 locuri,
     plus un var(--bg-muted, #f6f7f9) al carui token nu exista: acelasi tipar ca --radius-lg,
     doar ca avea fallback si de-aia n-a crapat vizibil. */
  --brand-bg-alt:    #f6f7f9; /* gri deschis */

  /* Raza colturilor. SINGURA valoare de schimbat. Design editorial: totul drept.
     Inainte erau 9 valori tastate pe loc (0/3/4/12/14/20/24/50%/999px) si un --radius-lg
     folosit de 3 ori dar nedefinit niciodata (var() nedefinit => declaratie invalida la
     calcul => border-radius cadea pe initial, 0: randau drept din greseala, nu din decizie).
     Schimba --radius si se schimba tot; nu mai tasta cifre in reguli. */
  --radius: 0;
  /* Cercuri (portrete, bullets). NU e stil de colt, e forma, de aia nu urmeaza --radius. */
  --radius-full: 50%;

  /* Gradientul de brand (albastru -> magenta). Aceleasi valori ca in hero (--blue/--pink din
     tasks/hero-current.html), unde imbraca butonul CTA si popup-ul. Tokenizat aici fiindca a
     ajuns la a doua folosire; hero-ul si le tine inca pe ale lui. */
  --grad-blue:    #2563EB;
  --grad-magenta: #EC4899;

  /* Imaginea de fundal a blocului "Cui i se adreseaza". SINGURUL loc de schimbat.
     Oamenii sunt SUBIECTUL pozei (publicul evenimentului), pe un perete in degrade albastru
     spre rosu si podea deschisa. Fara filtru de culoare: degradeul e fotografiat, nu adaugat.
     Cale RELATIVA, ca la fonturi: url() se rezolva fata de style.css, care sta in
     wp-content/themes/loyalty-day-child/, deci doua niveluri in sus pana la wp-content/,
     apoi uploads/. Merge si local (subdirector), si pe Railway (radacina), fara configurare. */
  --ld-audienta-bg: url('../../uploads/cui-i-se-adreseaza-evenimentul-loyalty-day-2026.jpg');
  /* Pelicula navy de deasupra pozei NU mai are token aici. Avea doua, pentru capetele unui
     gradient in doua opriri; varianta G cere cinci (titlul sus, profilurile jos, oamenii
     descoperiti la mijloc), iar doua din cinci tinute in alt fisier fac retusul mai greu, nu mai
     usor. Gradientul intreg, cu masuratorile de contrast langa el, sta in css/30-audienta.css. */

  /* Albastrul benzii cu companiile din grup. NU e ales, e MASURAT din fisierele de logo livrate
     (wp-content/uploads/mhm-*.jpg): coltul fiecaruia da exact #12489C, identic pe toate 7.
     Logo-urile sunt albe cu albastrul asta turnat in JPG, deci fundalul sectiunii trebuie sa fie
     bit-identic cu el, altfel se vad 7 dreptunghiuri. La orice schimbare de logo-uri, se
     remasoara: culoarea urmeaza fisierele, nu invers. */
  --ld-grup-blue: #12489C;

  /* Fonturi */
  --font-heading: 'DM Sans', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================
   Aplicare fonturi la nivel de site
   ============================================ */
body,
p, li, a, button, input, textarea, select {
  font-family: var(--font-body);
  color: var(--brand-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--brand-ink);
}

/* ============================================
   Utilitare de brand
   ============================================ */
.brand-gradient-text {
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-primary); /* fallback */
}

.brand-highlight {
  background: var(--brand-secondary);
  padding: 0 0.15em;
  color: var(--brand-ink);
}

/* accent editorial: cuvant-cheie in Fraunces italic (combinat cu .brand-highlight galben) */
.ld-diferit {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ============================================
   Layout global
   ============================================ */
.ld-main {
  display: block;
}

/* Hello Elementor default footer, pana construim custom */
#site-footer {
  display: none;
}

.site {
  margin: 0;
  padding: 0;
}

/* ============================================
   Header: sticky, logo apare la scroll
   ============================================ */
.ld-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 1.5rem;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.ld-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.ld-header__logo-link {
  display: block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ld-header__logo {
  height: 40px;
  width: auto;
  display: block;
}

.ld-header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ASCUNDEREA, sub .ld-js. Logo-ul si meniul stau ascunse cat esti pe hero si apar la derulare,
   prin .ld-header.is-scrolled, clasa pusa din inc/header-hero-video.php. Fara JavaScript clasa aia
   nu vine niciodata, deci site-ul ramanea complet fara navigatie. Sub .ld-js, ascunderea se aplica
   doar cand stim ca JS ruleaza si o poate anula; altfel header-ul e vizibil de la inceput.
   pointer-events intra si el aici: ascuns inseamna si neclicabil, iar fara JS trebuie clicabil.
   Regula de dezvaluire (.ld-header.is-scrolled ...) ramane la specificitatea ei, (0,3,0), deci bate
   in continuare aceste doua reguli urcate la (0,2,0). Verificat, nu presupus. */
.ld-js .ld-header__logo-link,
.ld-js .ld-header__nav {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.ld-header__link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--brand-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.ld-header__link:hover {
  color: var(--brand-primary);
}

/* Starea "am scroll-uit", logo si nav se materializeaza */
.ld-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 6px 24px rgba(26, 26, 46, 0.06);
  padding: 0.6rem 1.5rem;
}
.ld-header.is-scrolled .ld-header__logo-link,
.ld-header.is-scrolled .ld-header__nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Buton mic pentru CTA din header */
.ld-btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}

/* Ascundem nav pe mobil, o construim mai serios mai tarziu */
@media (max-width: 720px) {
  .ld-header__nav .ld-header__link {
    display: none;
  }
}

/* ============================================
   MENIU DE SECTIUNI (variant A din lab). Bara sticky doar pe homepage (randata de inc/meniu.php pe
   wp_body_open). .ld-header de mai sus ramane pentru paginile clasice; homepage-ul e Canvas si nu-l
   randeaza, deci nu exista bara dubla. Token-urile lab-ului (--violet/--yellow/--ink) mapate pe
   --brand-*; rgba(120,104,198)=--brand-primary, rgba(233,226,14)=--brand-secondary, rgba(26,26,46)=--brand-ink.
   ============================================ */
.ld-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  /* 45px inaltime, cu 20px respiro la capete (cerinta client): fara ele logoul lipea de marginea
     stanga si ultimul buton de cea dreapta. Inainte era 65px cu clamp(1.2rem, 4vw, 3rem). */
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Linia de jos e box-shadow, nu border, si nu e cosmetic: cu box-sizing:border-box un border de 1px
     ar taia cutia de continut la 44px din cei 45, iar butoanele intinse pe inaltime ar lasa dedesubt
     o dunga deschisa vizibila peste fundalul lor de hover. box-shadow nu consuma inaltime. */
  box-shadow: 0 1px 0 rgba(26, 26, 46, 0.08);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
/* Bara e vizibila de la inceput, inclusiv pe hero (cerinta client): reveal-ul pe scroll a fost scos.
   Logoul ei se vede cat esti pe hero si dispare dupa, cand ii ia locul cutia galbena flotanta din
   stanga-jos (inc/logo-flotant.php). .nav-on, pusa de JS cand hero-ul trece sub bara, e comutatorul
   comun al celor doua, deci nu pot fi vizibile simultan si nu pot lipsi amandoua. */
body.nav-on .ld-nav__logo {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
/* Logoul umple bara pe verticala (~90% din inaltime). */
.ld-nav__logo {
  height: 90%;
  display: flex;
  align-items: center;
}
.ld-nav__logo img {
  height: 100%;
  width: auto;
  display: block;
}
/* Linkurile stau centrate in spatiul liber dintre logo si grupul din dreapta, nu pe mijlocul geometric
   al barii. Centrarea absoluta pe mijlocul real a fost incercata si abandonata: partea dreapta e mult
   mai lata decat logoul, deci grupul iesea peste Contact, masurat 65px la 1280px latime. Cele doua
   margin:auto impart egal spatiul ramas, deci grupul nu poate depasi in niciuna dintre parti. */
.ld-nav__linkuri {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  /* 45px ficsi intre cuvinte, cerinta client, scrisi in px si nu in rem. Fara padding pe linkuri:
     distanta o da exclusiv gap-ul. Cere fereastra lata, vezi regula de sub 1500px de mai jos. */
  gap: 45px;
}
.ld-nav__linkuri a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* 25px ficsi, cerinta client, scrisi direct in px si nu in rem, ca sa nu depinda de font-size-ul
     radacinii. Fara padding pe link: inaltimea o da bara, nu textul. */
  font-size: 25px;
  font-weight: 600;
  color: var(--brand-ink);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.ld-nav__linkuri a:hover {
  opacity: 1;
}
.ld-nav__linkuri a.is-active {
  opacity: 1;
}
/* Puncte rotunde: gri in repaus, galben cu halou pe sectiunea activa (scrollspy). */
.ld-nav__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(120, 104, 198, 0.35);
  flex: 0 0 auto;
  transition: 0.2s;
}
.ld-nav__linkuri a.is-active .ld-nav__dot {
  background: var(--brand-secondary);
  box-shadow: 0 0 0 4px rgba(233, 226, 14, 0.25);
  transform: scale(1.12);
}
/* ABATERE DECLARATA fata de laborator (cerinta client): in meniu-lab.html:76 galbenul e rezervat
   sectiunii active, aici se aprinde si la trecerea cu mouse-ul. Doar punctul, nu si textul, fiindca
   galbenul pe fundalul alb al barii nu are contrast destul pentru text. Fara scale(), ca sectiunea
   activa sa ramana distincta de simpla trecere cu mouse-ul. */
.ld-nav__linkuri a:hover .ld-nav__dot {
  background: var(--brand-secondary);
  box-shadow: 0 0 0 4px rgba(233, 226, 14, 0.25);
}
/* Butoanele raman lipite de marginea din dreapta. Cei 90px ficsi fata de ultimul link au fost scosi:
   cu linkurile centrate absolut, distanta dintre ele si butoane se schimba cu latimea ferestrei, deci
   nu mai poate fi fixata. */
/* Grupul se intinde pe toata inaltimea barii, iar cele doua elemente stau lipite: separarea o face
   despartitorul vertical, nu un gap. De-aia align-items e stretch, nu center, si de-aia gap e 0. */
.ld-nav__actiuni {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 0;
  /* Fara margin-left:auto aici: impingerea spre dreapta o fac deja cele doua margin:auto ale
     linkurilor. Un al treilea auto ar imparti spatiul in trei si ar decentra grupul. */
}
/* Contact si Rezerva-ti locul nu mai sunt butoane (cerinta client): raman doua cuvinte simple, in
   gradientul de brand albastru spre magenta. Dispar deci conturul de la Contact si fundalul galben
   de la CTA, iar cele doua devin identice vizual, adica CTA-ul principal pierde ierarhia. Marimea
   urca de la 0.88rem (14.08px) la 1rem, ca sa stea in acelasi registru cu linkurile de meniu. */
.ld-nav__contact,
.ld-nav__cta {
  font-family: inherit;
  background: none;
  border: 0;
  /* Despartitor vertical intre cele doua, si inaintea primului, ca in referinta. Pe toata inaltimea,
     fiindca elementul e intins de align-items:stretch al parintelui. */
  border-left: 1px solid rgba(26, 26, 46, 0.14);
  /* Contact e <button>, iar reset.css al Elementorului pune border-radius:3px pe button; Rezerva-ti
     locul e <a>, deci era deja drept. Fara asta, coltul rotunjit se vedea pe fundalul de hover. */
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  padding: 0 1.35rem;
  cursor: pointer;
  font-size: 16px; /* mai mici decat cei 20px ai linkurilor de meniu, cerinta client */
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  /* Aceeasi culoare SI aceeasi opacitate ca linkurile de meniu (cerinta client): gradientul pe text a
     fost scos, deci a disparut si blocul @supports care il decupa pe litere. Opacitatea revine la 1
     in hover, altfel ar palidi si fundalul butonului, nu doar textul. */
  color: var(--brand-ink);
  opacity: 0.72;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
/* La hover fiecare bloc devine buton pe toata inaltimea barii. Contact ia gradientul de brand cu text
   alb; Rezerva-ti locul ia galbenul site-ului cu text inchis (cerinta client), aceeasi pereche de
   culori pe care o avea cand era buton propriu-zis. Diferenta dintre ele reda si ierarhia pierduta
   cand amandoua au devenit cuvinte simple. */
.ld-nav__contact:hover {
  background: linear-gradient(135deg, var(--grad-blue), var(--grad-magenta));
  color: #fff;
  opacity: 1;
  border-left-color: transparent;
}
.ld-nav__cta:hover {
  background: var(--brand-secondary);
  color: var(--brand-ink);
  opacity: 1;
  border-left-color: transparent;
}
/* Focus de tastatura, acelasi contur ca la .ld-sus (inc/back-to-top.php) si .ld-bbar__cta
   (98-bara-bilete.css). Fara el raman pe inelul implicit al browserului, care peste blocul umplut cu
   gradient nu se distinge. Cele trei sunt singurele repere pentru cine navigheaza cu Tab. */
.ld-nav__linkuri a:focus-visible,
.ld-nav__contact:focus-visible,
.ld-nav__cta:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: -4px;
  opacity: 1;
}
/* Sub 1400px cei 25px de font cu 45px intre cuvinte nu mai incap: masurat, meniul cere minimum
   1382px de fereastra ca sa stea pe un rand, iar sub atat textul linkurilor curge pe al doilea rand
   intr-o bara de 45px. Peste prag raman valorile cerute, sub el scad amandoua. */
@media (max-width: 1400px) {
  .ld-nav__linkuri {
    gap: 25px;
  }
  .ld-nav__linkuri a {
    font-size: 20px;
  }
}
@media (max-width: 860px) {
  .ld-nav__linkuri {
    display: none;
  }
}
/* Regula care ascundea logoul hero-ului cand aparea bara a fost stearsa odata cu logoul insusi:
   hero-current.html nu mai are .logo, deci nu mai exista nimic de ascuns. */

/* ============================================
   POPUP CONTACT, deschis din butonul Contact al meniului (portat din lab). Peste bara (z 1200 > 900),
   sub modalul de recompensa al hero-ului (9998), dar cele doua nu coexista.
   ============================================ */
.cpop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.cpop.is-open {
  display: block;
}
.cpop__veil {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 38, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.cpop__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 440px);
  background: #fff;
  padding: 2.6rem 2.2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  text-align: center;
}
.cpop__x {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--brand-primary);
}
.cpop__k {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.cpop h3 {
  margin-top: 0.6rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
/* Acelasi accent Fraunces italic ca in lab (fara galben pe popup, doar cursiva serifa). */
.cpop h3 em {
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-weight: 500;
}
.cpop p {
  margin-top: 0.8rem;
  color: var(--brand-muted);
  line-height: 1.55;
  font-size: 0.95rem;
}
.cpop__lines {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cpop__lines a {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-ink);
  text-decoration: none;
}
.cpop__lines a:hover {
  color: var(--brand-primary);
}
.cpop__cta {
  margin-top: 1.6rem;
  display: inline-block;
  background: var(--brand-secondary);
  color: var(--brand-ink);
  font-weight: 700;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
}

/* ============================================
   MENIUL DE MOBIL. Sub 860px bara nu se micsoreaza, se SCHIMBA: raman logoul si un buton, iar
   sectiunile, Contactul si CTA-ul trec intr-un panou pe tot ecranul.

   DE CE NU DOAR "mai mic". Masurat inainte, la un ecran de 375px: logoul cerea ~88px, Contact ~106px
   si "Rezervă-ți locul" ~186px, deci ~379px din 335 disponibili. Nu era o problema de spatiere, ci
   de continut care nu incape. Iar linkurile de sectiuni erau deja ascunse fara sa fie inlocuite cu
   nimic, deci pe telefon nu exista NICIO cale de navigare intre sectiuni.

   Desenul panoului vine din varianta B a laboratorului (experiments/meniu-lab.html), nu e inventat
   aici: sectiuni numerotate, deschidere in cascada, fundal cu gradientul de brand, CTA galben jos.
   Varianta A, cea de pe site, nu si-a desenat niciodata starea de mobil.
   ============================================ */

/* Burgerul exista DOAR pe mobil. Cele trei linii sunt un singur <span> plus doua pseudo-elemente,
   ca in laborator, si devin un X cand panoul e deschis. */
.ld-nav__burger {
  display: none;
  font-family: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  /* Zona de atins, nu doar desenul. Cele trei liniute au 24px, iar padding-ul de 14px doar la stanga
     dadea o tinta de ~38px lata. Pragul recomandat pentru deget e 44px in ambele directii, si bara
     are 45 pe inaltime, deci lipsea doar latimea. 10px de fiecare parte duc desenul de 24 la 44.
     margin-right negativ ca butonul sa nu impinga marginea de 20px a barii spre interior. */
  padding: 0 10px;
  margin-right: -10px;
  margin-left: auto;
  align-items: center;
  color: var(--brand-ink);
}
.ld-nav__burger span,
.ld-nav__burger span::before,
.ld-nav__burger span::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.ld-nav__burger span {
  position: relative;
}
.ld-nav__burger span::before,
.ld-nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
}
.ld-nav__burger span::before { top: -7px; }
.ld-nav__burger span::after  { top: 7px; }
/* Deschis: linia din mijloc dispare, celelalte doua se incruciseaza pe locul ei. */
.ld-nav__burger[aria-expanded="true"] span { background: transparent; }
.ld-nav__burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.ld-nav__burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

/* Panoul. visibility, nu display, ca sa existe o tranzitie; intarzierea de pe visibility la inchidere
   il tine in pagina pana se stinge opacitatea. Z-ul e 950: peste bara (900), sub popupul de contact
   (1200), care se poate deschide DIN el. */
.ld-mm {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 1.5rem 2.5rem;
  background: linear-gradient(150deg, var(--brand-primary), #EC4899);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  overflow-y: auto;
}
.ld-mm.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}
/* SPATIUL DINTRE SEGMENTE, cu 15% mai mult. Cerinta userului, 2026-08-07.
   Nu se obtine crescand gap-ul cu 15%: masurat, ar fi insemnat +0.36px, invizibil. Distanta dintre
   doua intrari e line-height plus padding plus gap, iar din cei ~42px de la marimea mica gap-ul
   aducea doar 2.4. Cresterea sta deci in padding, care e in em si scaleaza cu litera.
   Gap-ul trece si el din rem in em, din acelasi motiv: in rem ramanea 2.4px fix la orice marime,
   deci raportul dintre intrari se schimba singur intre telefon mic si telefon mare. */
.ld-mm__lista {
  display: flex;
  flex-direction: column;
  gap: 0.09em;
}
.ld-mm__lista a,
.ld-mm__lista button {
  font-family: inherit;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  /* 0.1em -> 0.2em: aici sta cresterea de 15% a pasului vertical, vezi nota de la .ld-mm__lista. */
  padding: 0.2em 0;
  display: flex;
  align-items: baseline;
  /* Departarea cifrei de cuvant, tot cu 15% mai mult: 0.9rem -> 1.035rem. Ramane in rem, ca in
     desenul din laborator: aici distanta e intre doua bucati de text de pe acelasi rand, si arata
     mai bine constanta decat crescand odata cu litera. */
  gap: 1.035rem;
}
/* CASCADA. Randul nu mai poarta el animatia, ci doar INTARZIEREA lui, intr-o variabila. Cele doua
   bucati dinauntru isi calculeaza din ea propriile momente, deci exista o singura sursa pentru
   ritmul randului si nu se poate desincroniza. 70ms intre randuri, nu 50: cu doua miscari pe rand,
   50 le suprapunea si totul parea un singur val neclar. */
.ld-mm__lista > *:nth-child(1) { --d: 0.06s; }
.ld-mm__lista > *:nth-child(2) { --d: 0.13s; }
.ld-mm__lista > *:nth-child(3) { --d: 0.20s; }
.ld-mm__lista > *:nth-child(4) { --d: 0.27s; }
.ld-mm__lista > *:nth-child(5) { --d: 0.34s; }
.ld-mm__lista > *:nth-child(6) { --d: 0.41s; }
.ld-mm__lista > *:nth-child(7) { --d: 0.48s; }
.ld-mm__lista > *:nth-child(8) { --d: 0.55s; }

/* CUVANTUL: urca de sub o margine. Invelisul taie, copilul se misca. inline-block pe amandoua,
   fiindca overflow nu taie nimic pe un element inline. vertical-align:bottom lipeste cutia de linia
   de baza, altfel spatiul rezervat pentru coada literelor lasa randul sa danseze cu un pixel.
   Curba e cea de "iesire lina", cu 0.62s: destul cat sa se vada frana, nu cat sa astepti. */
.ld-mm__t {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Coada lui g si t din "Audiență", "Locație", "Bilete" ar fi taiata de overflow. Padding-ul jos ii
     face loc, iar marginea negativa il ia inapoi din inaltimea randului. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.ld-mm__t i {
  display: inline-block;
  font-style: normal;
  transform: translateY(110%);
  transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.ld-mm.is-open .ld-mm__t i { transform: none; }

/* CIFRA: nu se taie, aluneca din stanga si SE APRINDE. Porneste in galbenul temei si se stinge in
   alb translucid, deci fiecare rand are o scanteie scurta care cade exact cand cuvantul termina de
   urcat. Intarzierea ei e cea a randului plus 0.18s, calculata din aceeasi variabila.
   Culoarea ramane pe alb dupa aceea: galbenul e accentul momentului, nu al starii. */
.ld-mm__nr {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-secondary);
  opacity: 0;
  transform: translateX(-0.5em);
  /* SCRIS PE LARG, nu prin scurtatura. Cu `transition: ... color .5s ease .25s` urmat de un
     `transition-delay`, al doilea suprascrie TOATE intarzierile din scurtatura, inclusiv cea a
     culorii, si scanteia galbena s-ar fi stins in acelasi moment in care apare, adica niciodata.
     Asa fiecare proprietate isi are momentul ei, iar culoarea porneste cu 0.25s dupa alunecare. */
  transition-property: opacity, transform, color;
  transition-duration: 0.4s, 0.5s, 0.9s;
  transition-timing-function: ease, cubic-bezier(0.16, 1, 0.3, 1), ease;
  /* GALBENUL TINE 1.2s, apoi se stinge in 0.9. Prima varianta il stingea de la 0.43s, deci cifra era
     galbena vreo jumatate de secunda, la 13.6px, in timp ce langa ea urca un cuvant de trei ori mai
     mare. Exista in cod si nu se vedea pe ecran. Cu 1.2s apuci sa te uiti la el dupa ce cuvantul s-a
     asezat, iar stingerea lunga il face sa se retraga, nu sa clipeasca. */
  transition-delay: calc(var(--d, 0s) + 0.18s), calc(var(--d, 0s) + 0.18s), calc(var(--d, 0s) + 1.2s);
}
.ld-mm.is-open .ld-mm__nr {
  opacity: 1;
  transform: none;
  color: rgba(255, 255, 255, 0.6);
}
.ld-mm__cta {
  margin-top: 2rem;
  align-self: flex-start;
  background: var(--brand-secondary);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.95rem 1.9rem;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.35s ease 0.45s;
}
.ld-mm.is-open .ld-mm__cta { opacity: 1; }

/* Miscarea redusa: cine si-a cerut-o din sistem primeste panoul dintr-o data, fara cascada si fara
   alunecare. Continutul e acelasi, doar drumul pana la el dispare. Tema respecta deja setarea in alte
   noua locuri; panoul nu avea voie sa fie exceptia. */
@media (prefers-reduced-motion: reduce) {
  .ld-mm,
  .ld-mm__t i,
  .ld-mm__nr,
  .ld-mm__cta,
  .ld-nav__burger span,
  .ld-nav__burger span::before,
  .ld-nav__burger span::after {
    transition: none !important;
  }
  /* Starile de plecare se anuleaza, altfel cuvintele ar ramane sub margine si cifrele in stanga,
     invizibile pentru totdeauna: fara tranzitie nu mai exista nimic care sa le aduca inapoi. */
  .ld-mm__t i { transform: none; }
  .ld-mm__nr {
    opacity: 1;
    transform: none;
    color: rgba(255, 255, 255, 0.6);
  }
}

@media (max-width: 860px) {
  /* Bara pastreaza logoul si primeste butonul; Contact si CTA pleaca in panou. Regula de mai sus
     ascundea deja .ld-nav__linkuri la acelasi prag. */
  .ld-nav__actiuni { display: none; }
  .ld-nav__burger  { display: flex; }

  /* BANDA IA CULOAREA PANOULUI, cerinta userului 2026-08-07: aceeasi ca fundalul meniului deschis,
     ca sa se potriveasca cu logoul alb. Pe desktop bara ramane alb translucid cu blur.
     Acelasi gradient si acelasi unghi ca .ld-mm, deci cand panoul se deschide bara nu mai e o dunga
     peste el, ci continuarea lui. Blurul si linia de jos pleaca: nu mai au ce sa filtreze si ar fi
     desenat o margine peste o suprafata continua. */
  .ld-nav {
    background: linear-gradient(150deg, var(--brand-primary), #EC4899);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .ld-nav__logo img { filter: brightness(0) invert(1); }
  .ld-nav__burger { color: #fff; }
  /* LOGOUL RAMANE VIZIBIL TOT TIMPUL pe mobil. Pe ecran mare se stinge dupa hero si ii ia locul cutia
     flotanta din stanga-jos; pe telefon aia sta peste continut, iar bara ramane fara nimic la stanga
     din prima derulare. Aici bara e singurul loc de unde te intorci acasa, deci logoul nu pleaca. */
  body.nav-on .ld-nav__logo { opacity: 1; pointer-events: auto; }
  /* BARA URCA PESTE PANOU, nu butonul singur. Prima varianta punea z-index: 960 pe .ld-nav__burger
     si nu functiona: .ld-nav are z-index 900 si creeaza un context de stivuire, iar un copil nu
     poate iesi din contextul parintelui, oricat de mare i-ar fi z-index-ul. Panoul l-ar fi acoperit,
     si meniul nu s-ar mai fi putut inchide de unde a fost deschis.
     Comutatorul e .ld-mm-on, pusa de JS DOAR de meniu. Nu ld-blocat, care e comuna cu dialogurile de
     inscriere: cu ea, bara s-ar fi albit si cand deschizi bonul, unde nu are ce cauta. */
  body.ld-mm-on .ld-nav {
    z-index: 960;
    /* Fundalul propriu pleaca DOAR cat panoul e deschis: gradientul barii si cel al panoului au
       acelasi unghi dar cutii de inaltimi diferite, deci suprapuse ar fi lasat o dunga la 45px.
       Transparenta lasa sa se vada un singur gradient, cel al panoului, neintrerupt.
       Logoul si liniile sunt deja albe de la regulile de mai sus, nu se repeta aici. */
    background: none;
  }
}

/* Comutatorul de limba ca pereche "RO | EN" (cerinta user, 2026-08-26: sa se vada limpede ca
   acolo se schimba limba). Limba curenta e aprinsa si NU e link; cealalta e link si poarta
   hoverul. Invelisul refoloseste .ld-nav__contact pentru separator si padding, dar isi anuleaza
   gradientul de hover: nu e un buton intreg, clicabila e doar jumatatea cealalta. Regulile stau
   DUPA .ld-nav__contact:hover in fisier, ca la specificitate egala sa castige ele. */
.ld-nav__limbi { display: inline-flex; align-items: center; gap: .5em; cursor: default; }
.ld-nav__limbi:hover { background: none; color: inherit; }
.ld-nav__limbi-cur { font-weight: 700; }
.ld-nav__limbi-sep { opacity: .35; }
.ld-nav__limbi .ld-nav__lang { color: inherit; text-decoration: none; opacity: .5; }
.ld-nav__limbi .ld-nav__lang:hover,
.ld-nav__limbi .ld-nav__lang:focus-visible { opacity: 1; text-decoration: underline; }

/* Aceeasi pereche in panoul mobil. Fara culori impuse: mosteneste ce mostenea si ancora veche,
   care traia aici fara CSS propriu; perechea adauga doar asezarea si ierarhia de opacitate. */
.ld-mm__limbi { display: inline-flex; align-items: center; gap: .6em; margin-top: 1.25rem; }
.ld-mm__limbi-cur { font-weight: 700; }
.ld-mm__limbi-sep { opacity: .35; }
.ld-mm__limbi .ld-mm__lang { color: inherit; text-decoration: none; opacity: .55; }
.ld-mm__limbi .ld-mm__lang:hover { opacity: 1; text-decoration: underline; }


/* ============================================
   Smooth scroll cu offset pentru header sticky
   ============================================ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ============================================
   Section container si header
   ============================================ */
.ld-section {
  padding: 6rem 1.5rem;
}

.ld-container {
  max-width: 1200px;
  margin: 0 auto;
}

.ld-section__head {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 4rem;
}

.ld-section__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.7rem;
  color: var(--brand-primary);
  margin: 0 0 calc(2rem + 40px);
  font-weight: 700;
}

.ld-section__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 90px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  color: var(--brand-ink);
  font-optical-sizing: auto;
}

.ld-section__lede {
  font-size: 1.125rem;
  color: var(--brand-muted);
  margin: 0 auto;
  line-height: 1.6;
  max-width: 1000px;
  font-weight: 700;
}

/* Statement mare (stil Stink), statistica la triplu fata de lede */
.ld-statement {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.625rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
  max-width: 1000px;
  margin: 3rem auto 1.4rem;
}

/* ============================================
   Info + tooltip (Popover API + CSS Anchor Positioning)
   ============================================ */
/* Butonul "i", langa ultimul cuvant din statement. Marimea urmeaza textul (em), nu px.
   Selectorul e "button.ld-info", nu ".ld-info": reset.css-ul temei parinte se incarca DUPA
   style.css-ul nostru (verificat in <head>: child = pozitia 2, reset = pozitia 3) si contine
   [type=button]{width:auto;border:1px solid #c36;border-radius:3px;padding:.5rem 1rem}.
   Un selector de atribut are specificitate (0,1,0), exact cat o clasa, deci la egalitate
   castiga ultimul incarcat, adica resetul: butonul iesea dreptunghi roz. button.ld-info e
   (0,1,1) si castiga indiferent de ordine. */
button.ld-info {
  anchor-name: --ld-info;
  appearance: none; -webkit-appearance: none;   /* resetul pune -webkit-appearance:button */
  box-sizing: border-box;
  aspect-ratio: 1;                              /* ramane cerc chiar daca ceva ii forteaza latimea */
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: super;
  /* ATENTIE la unitati: font-size in em se raporteaza la PARINTE, dar width/height/border/margin
     in em se raporteaza la font-size-ul PROPRIU al elementului. Cu S = font-size-ul statement-ului:
     font-size = 0.28S; de aici, 1em local = 0.28S, deci cercul de 0.5S se scrie 1.8em (0.5/0.28). */
  font: 700 0.336em/1 var(--font-body);   /* +20%: 0.28 -> 0.336. Cum restul e in em LOCAL, creste tot odata cu el. */
  width: 1.8em; height: 1.8em;        /* = 0.6 x statement (~25.4px la 42px, era 21.2) */
  margin-left: 1.84em;                 /* recalculat ca golul sa RAMANA ~26px, nu sa creasca si el cu 20% */
  padding: 0;
  border: 0.13em solid var(--brand-primary);   /* ~1.5px cand statement-ul e la 42px */
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
button.ld-info:hover, button.ld-info:focus-visible { background: var(--brand-primary); color: #fff; }
button.ld-info:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }

/* Popover-ul. Fara resetul asta, browserul il randeaza centrat pe ecran, cu bordura si
   inset:0: stilurile lui default. In top layer, deci NU e retezat de overflow:hidden-ul
   sectiunii (motivul principal pentru care e popover si nu un div absolut). */
.ld-tip {
  position: fixed;
  position-anchor: --ld-info;
  position-area: block-start;                        /* deasupra iconului */
  position-try-fallbacks: block-end, inline-end;     /* n-are loc sus -> jos, apoi dreapta */
  inset: auto;
  margin: 0 0 0.6rem;
  width: max-content; max-width: min(340px, 80vw);
  border: 0;
  padding: 0.7rem 0.9rem;
  background: var(--brand-ink);
  color: #fff;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; line-height: 1.45;
  text-align: left;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(26,26,46,0.25);
  opacity: 0;
  transition: opacity 0.18s ease, display 0.18s allow-discrete, overlay 0.18s allow-discrete;
}
.ld-tip__src {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
.ld-tip:popover-open { opacity: 1; }
@starting-style { .ld-tip:popover-open { opacity: 0; } }
/* Browsere fara anchor positioning: popover-ul ramane in top layer si e vizibil, dar nu e
   ancorat pe icon -> il punem jos-centrat, ca sa nu cada in mijlocul ecranului. */
@supports not (anchor-name: --x) {
  .ld-tip { inset: auto auto 2rem 50%; transform: translateX(-50%); margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .ld-tip { transition: none; } }

/* Slide-in la intrarea in viewport (IntersectionObserver adauga .is-visible).
   ASCUNDEREA sta sub .ld-js (clasa pusa de inc/js-flag.php inainte de prima pictare), TRANZITIA nu.
   Impartirea nu e de gust, e obligatorie: patru sectiuni isi redeclara `transition` cu intarzierea
   lor de stagger (.ld-teme__row, .ld-grup__st, .ld-agenda__l, .ld-agenda__r), toate la
   specificitate (0,1,0), si castiga doar fiindca stau mai jos in cascada. Daca as urca aici si
   tranzitia la (0,2,0), le-as bate pe toate patru si ar disparea cascada de aparitie. Capcana e
   descrisa si in 40-teme.css. Deci: sub .ld-js urca DOAR ce ascunde. */
.ld-slidein {
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.ld-js .ld-slidein { opacity: 0; transform: translateY(30px); }
/* Dezvaluirea urca odata cu ascunderea, (0,3,0) fata de (0,2,0): asa relatia dintre ele nu mai
   depinde de ordinea in fisier. */
.ld-js .ld-slidein.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ld-slidein { transition: none; }
  .ld-js .ld-slidein { opacity: 1; transform: none; }
}

/* Reveal litera-cu-litera (stil Stink/LOEWE). JS sparge textul in .ch cu index --i */
.ld-reveal-chars .wd { display: inline-block; }
.ld-reveal-chars .ch {
  display: inline-block;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: calc(var(--i, 0) * 18ms);
}
/* .ch nu exista fara JS (splitter-ul din inc/reveal-slidein.php le creeaza), deci scoparea lor e
   redundanta ca efect. O punem oricum, ca invariantul sa fie unul singur si citibil: tot ce ascunde
   sta sub .ld-js. Butonul de info, in schimb, e in markup si CHIAR ramanea invizibil fara JS. */
.ld-js .ld-reveal-chars .ch { opacity: 0; transform: translateY(0.45em); }
.ld-js .ld-reveal-chars.is-visible .ch { opacity: 1; transform: none; }
/* Butonul de info intra in aceeasi cascada, la indexul lui (--i pus de splitter = numarul de
   litere de dinaintea lui), deci apare DUPA ce se aseaza ultima litera. E animatie, nu
   transition, ca sa nu prinda delay-ul si tranzitiile de hover ale butonului. */
.ld-js .ld-reveal-chars .ld-info { opacity: 0; }
.ld-js .ld-reveal-chars.is-visible .ld-info {
  animation: ldInfoIn 0.4s ease forwards;
  animation-delay: calc(var(--i, 0) * 18ms);
}
@keyframes ldInfoIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ld-reveal-chars .ch { transition: none; }
  .ld-js .ld-reveal-chars .ch { opacity: 1; transform: none; }
  .ld-js .ld-reveal-chars .ld-info { opacity: 1; animation: none; }
}


/* De ce: index editorial pe 3 coloane, nume thin/bold stivuite (D1 x D7), doar DM Sans */
.ld-dece { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: calc(2.2rem + 95px); text-align: left; }
.ld-dece__row { padding: 1.6rem 0 0; }
/* Eticheta: rand propriu, sus, inchisa la culoare. Fara nowrap, "participare selectiva"
   (~186px) nu incape intr-o coloana la 821-916px (grila trece pe 1 coloana abia sub 820px). */
.ld-dece__meta { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--brand-ink); margin: 0 0 1rem; }
/* "01" mare si subtire, in STANGA numelui, cu talpa pe linia de baza a randului de JOS
   ("calitate"), acoperind ambele randuri.
   align-items: baseline ar alinia PRIMA linie de baza, adica pe cea a lui "Networking de" 
   si atunci numarul iese in sus, deasupra numelui. "last baseline" aliniaza ultima linie de
   baza a fiecarui element: pentru nume, aia e a randului de jos. flex-end e fallback pentru
   browsere fara "last baseline" (aproximeaza, aliniaza marginile de jos). */
.ld-dece__head {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}
.ld-dece__num {
  flex: none;
  font-weight: 200;
  /* 2.43 x numele: de la baza lui "calitate" pana la varful lui "Networking de" sunt
     un rand (1.0em) + inaltimea majusculelor (0.70em) = 1.70em; impartit la cap-height-ul
     lui DM Sans (0.70) => 2.43. Asa acopera exact cele doua randuri. */
  font-size: clamp(4.4rem, 6.6vw, 6.6rem);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--brand-ink);
}
.ld-dece__name { font-size: clamp(1.8rem, 2.7vw, 2.7rem); line-height: 1.0; letter-spacing: -0.02em; margin: 0; }
.ld-dece__name .thin { display: block; font-weight: 200; color: var(--brand-muted); }
.ld-dece__name .bold { display: block; font-weight: 800; color: var(--brand-ink); }
/* Masurat din referinta (rapoarte, ca sa nu depinda de scara capturii):
   paragraful e ~0.53 x numele (nu 0.37 cat era la 1rem), iar randurile stau la 1.75, nu 1.5.
   Scaleaza odata cu numele: clamp-ul e cel al lui .ld-dece__name x 0.53. */
.ld-dece__text {
  font-weight: 300;
  font-size: clamp(0.95rem, 1.43vw, 1.43rem);
  line-height: 1.75;
  color: var(--brand-muted);
  max-width: 34ch;   /* randuri de citit, nu benzi late, ca in referinta */
}
@media (max-width: 820px) { .ld-dece { grid-template-columns: 1fr; gap: 2.2rem; } }

/* "2026" urias, gri pal, in spatele blocului: parallax marginit (data-par-drop, vezi functions.php) */
.ld-year-ghost {
  position: absolute;
  /* Padding de 30px deasupra, masurat pana la CERNEALA lui 2026, nu pana la cutia lui.
     Cutia incepe mai sus decat cifrele: cu line-height 0.8, half-leading = (0.8 - 1.29)/2 = -0.245em
     (DM Sans: ascent 0.992 + descent 0.298 = 1.29em), deci varful cifrelor cade la
     -0.245 + 0.992 - 0.70 (cap-height) = 0.047em sub marginea de sus a cutiei. Il compensam. */
  top: calc(30px - 0.047em);
  bottom: auto;            /* NU mai intindem cutia pe toata sectiunea: inaltimea ei = randul de text */
  left: 0; right: 0;
  text-align: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: min(32vw, 620px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(26, 26, 46, 0.06);
  white-space: nowrap;
  will-change: transform;
}

/* Punte: statement manifest intre "De ce" si "Program".
   Directia din referinte (momentfactory / amplify / nve): tema light, TIPOGRAFIE URIASA ca
   element principal de design (ei: 58-154px), copy manifest, whitespace generos.
   Serif display (Canela-like, ca la Amplify) NU se poate: regula e DM Sans si atat, deci
   editorialul vine din contrastul thin(200)/bold(800), nu din al doilea font. */
/* Fundal gri (acelasi ca Programul zilei). Odata ce blocul are culoare proprie, padding-ul
   redevine SIMETRIC: griul isi defineste singur ambele margini, nu mai fuzioneaza cu albul
   sectiunii de deasupra, deci compensarea de 6rem de dinainte nu mai are sens si ar strica
   invers. Golul se egalizeaza acum pe cerneala, din marginile randurilor (mai jos). */
.ld-bridge { background: var(--brand-bg-alt); padding: 12rem 100px; }
.ld-bridge .ld-container { max-width: none; }     /* scapa de plafonul de 1200px, ca sa creasca pe ecrane mari */

/* Fiecare rand e o masca; interiorul urca din spatele ei la intrarea in viewport. */
.ld-bridge__line {
  overflow: hidden;
  /* Masca ar reteza coada lui "ț" din "construiește": la line-height 1.05, zona de continut
     (ascent+descent = 1.29em la DM Sans) iese din cutia randului. Coborâm masca cu 0.18em si
     recuperam spatiul din margine, ca sa nu apara gol intre randuri. */
  padding-bottom: 0.18em;
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  /* 5.4vw, nu mai mult: la 1440px raman 1240px utili, iar "Prin experiențe care contează."
     (30 car x ~0.5em) cere <= 82px. Peste, se rupe in patru randuri. */
  font-size: clamp(2rem, 5.4vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
/* Culoarea o da gradientul de pe .ld-bridge__in, aici raman doar greutatile. */
/* Marginea negativa anuleaza padding-ul mastii, dar DOAR intre randuri. Pe ultimul rand n-are
   ce compensa: s-ar colapsa in afara containerului si ar manca din padding-ul de jos al
   sectiunii (masurat atunci: container bottom 2417, sectiune bottom 2596 = 179px, nu 192px). */
.ld-bridge__line:not(:last-child) { margin-bottom: -0.18em; }

/* Golul se masoara pe CERNEALA, nu pe cutii: ochiul vede literele, nu box model-ul.
   Cutia randului incepe mai sus decat varful literelor cu (half-leading + ascent - cap-height)
   = (1.05-1.29)/2 + 0.99 - 0.70 = 0.17em; iar sub linia de baza mai raman coada literelor
   (half + descent = 0.18em) plus padding-ul mastii (0.18em) = 0.36em.
   Le anulam din margini, ca cei 12rem de padding sa fie 12rem de gol VIZIBIL de ambele parti.
   em-ul e cel al randului (font-size-ul mare), deci scaleaza cu tipografia. */
.ld-bridge__line:first-child { margin-top: -0.17em; }
.ld-bridge__line:last-child  { margin-bottom: -0.36em; }
.ld-bridge__line .thin { font-weight: 200; }
.ld-bridge__line .bold { font-weight: 800; }
.ld-bridge__in {
  display: block;
  color: var(--brand-ink);   /* fallback: daca background-clip:text nu prinde, textul ramane vizibil, nu invizibil */
  transition: transform 1s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--d, 0) * 140ms);   /* al doilea rand porneste dupa primul */
}
/* Randul porneste impins in jos cu 110% si urca la .is-visible. Parintele are overflow ascuns, deci
   translatia asta nu e decor, chiar scoate textul din cadru. Fara JS nu venea niciodata .is-visible
   si puntea ramanea goala, de-aia impingerea sta acum sub .ld-js. */
.ld-js .ld-bridge__in { transform: translateY(110%); }
/* Fill cu gradientul de brand. Sub @supports fiindca "color: transparent" fara background-clip
   inseamna text INVIZIBIL: nu doar nestilizat. Gradientul e per rand, deci fiecare rand isi
   face propria trecere albastru -> magenta. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ld-bridge__in {
    background: linear-gradient(120deg, var(--grad-blue) 0%, var(--grad-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.ld-js .ld-bridge__line.is-visible .ld-bridge__in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ld-bridge__in { transition: none; }
  .ld-js .ld-bridge__in { transform: none; }
}
@media (max-width: 820px) { .ld-bridge { padding: 6rem 1.5rem; } }
/* Pe telefon, padding vertical SIMETRIC. Golul dintre finalul sectiunii "de ce" si randul asta
   masura 171px, din cei 96 de jos ai sectiunii precedente plus cei 96 de aici, si userul l-a cerut
   cu 40% mai scurt: 62 aici si 62 dincolo (css/50-program-speakeri.css) il duc la ~103px.
   Prima incercare a taiat DOAR sus si a lasat jos la 96, iar cutia a iesit strambă: masurat, 55px
   deasupra textului si 82 sub el. Marginile negative de pe primul si ultimul rand sunt calibrate
   ca golul VIZIBIL sa fie egal cu padding-ul de fiecare parte, deci simetria cere aceeasi valoare
   sus si jos, nu una compensata de mana. */
@media (max-width: 640px) {
  .ld-bridge { padding-top: 62px; padding-bottom: 62px; }
  /* Textul cu 20% mai mare pe telefon, cerinta userului. Pe mobil clamp-ul de mai sus statea pe
     MINIM, fiindca 5.4vw da doar 20px la 375px latime, deci valoarea activa era 2rem. 38.4px e
     acel minim plus 20%. Masurat la 327px latime utila: randul lung cere 496px, deci ramane pe
     doua randuri, exact ca la 32px. */
  .ld-bridge__line { font-size: 38.4px; }
}

/* ============================================
   Cui i se adreseaza: poza pe tot ecranul, profilurile la picioarele oamenilor
   Varianta G din experiments/audienta-lab.html.
   ============================================ */
.ld-audienta {
  position: relative;
  isolation: isolate;              /* z-index-urile de aici nu ies din sectiune */
  background-color: #0D0F1F;       /* baza: se vede si daca imaginea lipseste. Acelasi navy ca pelicula hero-ului. */
  color: #fff;
  padding: 0;                      /* peste .ld-section: aerul il da containerul, ca poza sa mearga pana in margini */
  overflow: hidden;                /* cadrul e mai mare decat sectiunea, deliberat (vezi mai jos) */
  min-height: 100vh;
  display: flex;
}
/* PELICULA, peste poza, sub text. Cinci opriri, nu doua, fiindca textul nu mai e distribuit
   uniform: titlul sta sus, cele patru profiluri stau jos, iar la mijloc nu e nimic de citit, deci
   acolo oamenii pot ramane descoperiti.
   Cifrele sunt verificate pe pixelii pozei (1995x971), luand percentila 98 de luminanta pe banda
   in care cade fiecare text (pixelul cel mai deschis decide, acolo se pierde albul intai):
     titlu   (y 5.9..17.9%) : cel mai rau caz rgb(70,147,219)  x pelicula 0.362 -> 6.22:1 (prag 3.0)
     profile (y 76.8..96.9%): cel mai rau caz rgb(248,255,249) x pelicula 0.598 -> 5.01:1 (prag 4.5)
   Densa jos pentru ca podeaua e zona cea mai deschisa din toata poza; usoara la mijloc pentru ca
   acolo sunt fetele. ATENTIE: cifrele tin de POZA, se remasoara la orice schimbare de imagine. */
.ld-audienta::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(13,15,31,0.66)   0%,
    rgba(13,15,31,0.16)  30%,
    rgba(13,15,31,0.10)  50%,
    rgba(13,15,31,0.62)  78%,
    rgba(13,15,31,0.92) 100%);
}
/* CADRUL. Nu e un ambalaj, e ancora: reproduce exact ce face background-size:cover, iar cele
   patru etichete stau INAUNTRUL lui, deci se taie odata cu poza si raman lipite de oameni la
   orice raport de ecran. Fara el, etichetele ar fi in procente din SECTIUNE si s-ar dezlipi cu
   cat ecranul e mai patrat (masurat: +4 puncte la 21:9, +9.2 la 16:9, +13.5 la 16:10, +22.2 la
   4:3; marimea ecranului nu conteaza deloc, 1920x1080 si 3840x2160 dau acelasi rezultat).
     width: max(100%, 205.46vh) + aspect-ratio 1995/971
     - ecran ingust (raport sub 2.055): latimea vine din 205.46vh, inaltimea iese fix 100vh,
       deci taie lateral, exact ca cover;
     - ecran lat: latimea vine din 100%, inaltimea depaseste 100vh, deci taie vertical.
   Centrat din MARGINI NEGATIVE, nu din transform. Motivul e obligatoriu, nu de gust: transform
   creeaza context de stivuire, iar atunci z-index:2 de pe zona ramane prizonier in cadru si
   pelicula de mai sus (z-index:1) se picteaza PESTE etichete.
   La margin-top procentele se rezolva fata de LATIMEA blocului parinte (asa cere CSS), ceea ce
   aici pica exact bine: inaltimea cadrului chiar e latimea-sectiunii / 2.0546. */
.ld-audienta__frame {
  position: absolute; top: 50%; left: 50%;
  width: max(100%, 205.46vh);
  aspect-ratio: 1995 / 971;
  margin-left: calc(max(100%, 205.46vh) * -0.5);
  margin-top:  calc(max(100% / 2.0546, 100vh) * -0.5);
  background: var(--ld-audienta-bg) center / cover no-repeat;
}
/* Titlul e singurul din flux: sta sus, peste perete. Restul e ancorat in cadru. */
.ld-audienta .ld-container {
  position: relative; z-index: 2;
  max-width: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(2.6rem, 5vw, 55px) 0 clamp(2.6rem, 5vw, 55px);
}

/* Aliniat la MASTER (.ld-section__title): 700, urias, -0.02em. Ramane alb (sectiune pe foto
   inchisa); accentul galben vine din markup cu .brand-highlight.ld-diferit, ca la master.
   CENTRAT ca "Ce facem diferit", "Teme principale" si "Un ecosistem complet". */
.ld-audienta__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 90px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  margin: 0 clamp(1.5rem, 6vw, 100px);
}

/* left/right in procente din CADRU, adica exact marginile masurate ale grupului de siluete
   (16.4% si 100-79.6=20.4%). Nu mai depind de raportul ecranului.
   bottom: 3vh de la baza sectiunii; termenul al doilea aduce inapoi cat depaseste cadrul in jos
   pe ultrawide, altfel etichetele ar cobori sub ecran.
   align-items:start, NU end: descrierile au lungimi diferite (4/4/3/3 randuri), iar aliniate la
   baza coloanele scurte porneau mai jos cu exact un rand. */
.ld-audienta__zone {
  position: absolute;
  left: 16.4%; right: 20.4%;
  bottom: calc(3vh + max(0px, (48.671vw - 100vh) / 2));
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  /* Aerul dintre coloane vine din column-gap, nu din padding pe coloana: 56px la 1920 fata de
     19px. Ancorarea pe siluete rezista, golul impinge centrele cu cel mult 21px in afara, iar un
     om are ~158px latime. */
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
}
/* Coloana e si .ld-slidein, dar DOAR ca semnal de intrare in viewport: miscarea proprie o
   anulam, fiindca secventa apartine celor patru copii si doua animatii suprapuse s-ar bate.
   Acelasi tipar ca .ld-bridge__line, care tot asa foloseste .is-visible pentru altcineva. */
.ld-audienta__col {
  text-align: center;
  transition: none;
  will-change: auto;
}
/* Anularea miscarii proprii urca sub .ld-js odata cu ascunderea pe care o anuleaza. Ascunderea de
   baza e acum .ld-js .ld-slidein, adica (0,2,0); lasata aici la (0,1,0), regula asta ar fi pierdut
   si coloana ar fi fost si ea impinsa 30px, peste secventa copiilor. La (0,2,0) sunt la egalitate,
   iar 30-audienta.css vine dupa 10-de-ce.css in cascada, deci castiga asta. `transition` si
   `will-change` raman sus, nescopate: acolo bat oricum, fiindca in .ld-slidein au ramas tot la
   (0,1,0). */
.ld-js .ld-audienta__col { opacity: 1; transform: none; }
/* CRONOLOGIA. Cele patru se deschid pe rand, nu odata: fir, apoi numarul si functia, apoi textul
   ei, apoi urmatoarea. 595ms pe coloana:
     coloana 0: fir 0.000s | functie 0.105s | text 0.315s
     coloana 1: fir 0.595s | functie 0.700s | text 0.910s
     coloana 2: fir 1.190s | functie 1.295s | text 1.505s
     coloana 3: fir 1.785s | functie 1.890s | text 2.100s  (ultimul se aseaza pe la 2.49s) */
/* firul creste de jos in sus, spre picioarele omului */
.ld-audienta__wire {
  display: block;
  width: 1px;
  height: clamp(34px, 7vh, 72px);
  margin: 0 auto 0.75rem;
  background: rgba(255,255,255,0.55);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 595ms);
}
/* De aici in jos, cele cinci stari de start ale coloanei stau sub .ld-js. Regulile de dezvaluire
   (.ld-audienta__col.is-visible ...) NU se scopeaza: sunt (0,3,0) fata de (0,2,0), deci castiga
   prin specificitate, nu prin ordine, si nu au nevoie de ajutor. */
.ld-js .ld-audienta__wire { transform: scaleY(0); }
.ld-audienta__col.is-visible .ld-audienta__wire { transform: scaleY(1); }

.ld-audienta__num {
  display: block;
  font-weight: 200;
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.35rem;
  transition: opacity 0.32s ease calc(var(--i, 0) * 595ms + 105ms);
}
.ld-js .ld-audienta__num { opacity: 0; }
.ld-audienta__col.is-visible .ld-audienta__num { opacity: 1; }

/* min-height de 2 randuri (2 x line-height 1.2): toate cele patru functii ocupa aceeasi inaltime,
   deci descrierile pornesc de pe aceeasi linie chiar daca un nume incape pe un rand la alta
   latime. Fara asta, alinierea la varf tine doar cat timp toate se rup identic, adica din
   intamplare. */
.ld-audienta__role {
  font-family: var(--font-body);
  font-size: clamp(1.24rem, 1.69vw, 1.63rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
  min-height: 2.4em;
  transition: opacity   0.32s ease                        calc(var(--i, 0) * 595ms + 105ms),
              transform 0.32s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 595ms + 105ms);
}
.ld-js .ld-audienta__role { opacity: 0; transform: translateY(10px); }
.ld-audienta__col.is-visible .ld-audienta__role { opacity: 1; transform: none; }

/* Textul se deschide dupa functie: 0fr -> 1fr, deci merge cu orice lungime, fara inaltimi fixe.
   PRAG DE SUPORT, verificat pe caniuse la 2026-07-19: animarea lui grid-template-rows exista din
   Chrome 107, Edge 107, Firefox 66, Safari 16.0, iOS Safari 16.0, Samsung Internet 21 si Opera 93,
   adica 92.45% din trafic global. Restul de circa 7.5% NU pierd nimic din continut: starea finala
   1fr se aplica oricum, doar ca textul apare instant in loc sa alunece. De-aia nu are fallback:
   n-ar avea ce sa repare. */
.ld-audienta__wrap {
  display: grid;
  transition: grid-template-rows 0.35s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 595ms + 315ms);
}
.ld-js .ld-audienta__wrap { grid-template-rows: 0fr; }
.ld-audienta__col.is-visible .ld-audienta__wrap { grid-template-rows: 1fr; }
.ld-audienta__inner { overflow: hidden; }
.ld-audienta__text {
  margin: 0.6rem 0 0;
  font-weight: 300;
  font-size: clamp(1.07rem, 1.2vw, 1.24rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  transition: opacity 0.32s ease calc(var(--i, 0) * 595ms + 385ms);
}
.ld-js .ld-audienta__text { opacity: 0; }
.ld-audienta__col.is-visible .ld-audienta__text { opacity: 1; }

/* Secventa dureaza ~2.5s. Cine a cerut mai putina miscare primeste totul asezat, instant.
   Aici tranzitiile se pot opri nescopate, ele n-au urcat nicaieri; dar ce ANULEAZA ascunderea
   trebuie sa fie tot sub .ld-js, altfel ar ramane la (0,1,0) si ar pierde in fata starilor de start
   urcate la (0,2,0), adica exact pe dos fata de ce vrea regula asta. */
@media (prefers-reduced-motion: reduce) {
  .ld-audienta__wire, .ld-audienta__num, .ld-audienta__role,
  .ld-audienta__wrap, .ld-audienta__text { transition: none; }
  .ld-js .ld-audienta__wire { transform: scaleY(1); }
  .ld-js .ld-audienta__num,
  .ld-js .ld-audienta__role,
  .ld-js .ld-audienta__text { opacity: 1; transform: none; }
  .ld-js .ld-audienta__wrap { grid-template-rows: 1fr; }
}

/* Sub 1100px ancorarea pe siluete nu mai are sens: cadrul ar fi mult mai lat decat ecranul si
   oamenii de la margini ies oricum din el. Aici cadrul iese cu totul din pozitionare si intra in
   flux, iar poza trece pe sectiune. Motivul e de continut, nu de stil: cu cadrul absolut, cele
   patru profiluri stivuite depaseau inaltimea sectiunii si primele doua erau taiate de
   overflow:hidden. In flux, sectiunea creste cat ii trebuie.
   Pelicula devine mai plata si mai densa: pe o sectiune inalta, opririle calculate pentru 100vh
   ar cadea aiurea, iar aici tot textul sta pe poza. */
@media (max-width: 1100px) {
  .ld-audienta { display: block; background-image: var(--ld-audienta-bg); background-size: cover; background-position: center; }
  .ld-audienta::before {
    background: linear-gradient(180deg,
      rgba(13,15,31,0.55)   0%,
      rgba(13,15,31,0.82)  55%,
      rgba(13,15,31,0.92) 100%);
  }
  .ld-audienta__frame {
    position: static;
    width: auto; margin: 0; aspect-ratio: auto;
    background: none;
    padding: 0 0 clamp(3rem, 6vh, 5rem);
  }
  /* position:relative ca z-index-ul sa se aplice: static, zona ar picta la nivelul cadrului,
     adica SUB pelicula, si textul s-ar stinge exact ca inainte de fix-ul de stivuire. */
  .ld-audienta__zone {
    position: relative; z-index: 2;
    inset: auto;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 clamp(1.5rem, 6vw, 100px);
    row-gap: clamp(2.4rem, 5vw, 3.4rem);
  }
  .ld-audienta__role { min-height: 0; }
}
@media (max-width: 760px) {
  .ld-audienta__zone { grid-template-columns: 1fr; }
}

/* ============================================
   Teme principale: index type-first (varianta B, aleasa in /teme-lab/)
   Fara cutii: randuri mari separate de hairline, numar mic la stanga.
   Fundal ALB deliberat. Motivul initial (vecina de dedesubt era .ld-agenda pe --brand-bg-alt,
   iar doua sectiuni gri lipite s-ar topi una in alta) s-a schimbat: intre ele a intrat
   .ld-grup, pe albastru inchis. Albul ramane oricum alegerea buna, acum ca sa dea contrast
   maxim benzii cu companiile.
   ============================================ */
.ld-teme {
  /* Scara randurilor pe un SINGUR numar: 1 = scara initiala, 0.5 = jumatate (ceruta de user).
     Titlul, gap-ul, coloana numarului si aerul vertical se leaga toate de ea, ca proportia
     sa nu se rupa. Ca sa reglezi marimea, se atinge DOAR linia asta. */
  --ld-teme-scale: 0.5;
  background: var(--brand-bg);
  padding: 55px 100px;   /* sus si jos 55px, cerut de user (era 10rem) */
}
.ld-teme .ld-container { max-width: none; }   /* scapa de plafonul de 1200px, ca la punte */
/* Centrat ca la "De ce" si "Un ecosistem complet". Tiparul casei e titlu centrat peste continut
   aliniat la stanga (exact ce face .ld-section__head peste cardurile din De ce), deci lista
   numerotata de dedesubt ramane neatinsa: numerele isi pastreaza coloana din stanga. */
.ld-teme__h { margin-bottom: 3.5rem; text-align: center; }
.ld-teme__h .thin { font-weight: 200; color: var(--brand-muted); }
/* LISTA E INGUSTA SI CENTRATA, ca albul din dreapta sa devina margine, nu gol. Cauza golului nu
   era latimea, ci scara: --ld-teme-scale sta la 0.5, deci textul ocupa jumatate din randul plin.
   Masurat inainte: 55% din rand gol la 1800px si 49% la 1366px.
   820px nu e o cifra aleasa din ochi, e masurata in pagina la scara curenta: cel mai lung rand are
   677px la 1800px si 548px la 1366px, deci raman 12% respectiv 28% aer, si NICIUN rand nu se rupe
   pe doua linii la nicio latime. Sub ~1020px viewport plafonul nici nu se aplica: acolo latimea o
   dicteaza oricum padding-ul sectiunii. Daca vreodata creste scara, se recalculeaza si asta. */
.ld-teme__list { max-width: 820px; margin-inline: auto; border-top: 1px solid rgba(26,26,46,0.16); }
.ld-teme__row {
  display: grid;
  grid-template-columns: calc(5.5rem * var(--ld-teme-scale)) 1fr;
  align-items: baseline;
  gap: calc(1.5rem * var(--ld-teme-scale));
  padding: calc(2.2rem * var(--ld-teme-scale)) 0;
  border-bottom: 1px solid rgba(26,26,46,0.16);
  /* Randul e si .ld-slidein. Daca as scrie doar "transition: padding-left", as STERGE
     tranzitia de reveal a lui .ld-slidein (aceeasi specificitate, dar regula asta e mai jos
     in fisier) si randurile ar pocni in loc sa apara. Deci le declar pe toate trei aici,
     cu intarzierea de stagger pusa per-proprietate: doar pe reveal, ca hover-ul sa ramana
     instant (altfel randul 05 ar reactiona la mouse cu 360ms intarziere). */
  transition:
    opacity   0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 90ms),
    transform 0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 90ms),
    padding-left 0.4s cubic-bezier(0.2,0.7,0.3,1) 0s;
}
.ld-teme__row:hover { padding-left: calc(1.25rem * var(--ld-teme-scale)); }
.ld-teme__num {
  /* NU scaleaza cu --ld-teme-scale: e eticheta, are prag de lizibilitate. La 0.5 ar iesi ~9px. */
  font-weight: 200; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--brand-muted);
}
.ld-teme__name {
  margin: 0;
  font-size: calc(clamp(1.6rem, 3.6vw, 3.8rem) * var(--ld-teme-scale));
  line-height: 1.1; letter-spacing: -0.025em;
}
.ld-teme__name .thin { font-weight: 200; color: var(--brand-muted); }
.ld-teme__name .bold { font-weight: 800; color: var(--brand-ink); }
/* La hover, partea groasa preia gradientul albastru->magenta deja folosit pe punte.
   @supports e obligatoriu: fara background-clip, "color: transparent" ar face textul
   INVIZIBIL, nu doar nestilizat. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ld-teme__row:hover .ld-teme__name .bold {
    background: linear-gradient(90deg, var(--grad-blue), var(--grad-magenta));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
@media (max-width: 900px) {
  .ld-teme { padding: 6rem 1.5rem; }
  .ld-teme__row {
    grid-template-columns: calc(3.2rem * var(--ld-teme-scale)) 1fr;
    gap: calc(0.9rem * var(--ld-teme-scale));
  }
}
/* Temele mai mari pe telefon, in doua cereri succesive ale userului: intai +40% (0.5 -> 0.7), apoi
   inca 30% peste (0.7 * 1.3 = 0.91). Se schimba DOAR butonul de reglaj, exact cum cere comentariul
   de sus, deci cresc odata cu numele si coloana numarului, gap-ul si aerul vertical, iar proportia
   randului ramane intreaga. Titlul NU e legat de scara, deci ramane cum e.
   Desktopul pastreaza 0.5: acolo numele sunt deja de 30px si nu s-a cerut nimic. */
@media (max-width: 640px) {
  .ld-teme { --ld-teme-scale: 0.91; }
  /* 26.5px ficsi, ceruti de user dupa ce a vazut 30px in pagina. Aici NU merge butonul de reglaj,
     si merita spus de ce: scara inmulteste si coloana numarului, si gap-ul, deci ridicand-o pana
     la marimea dorita as fi luat inapoi din latimea textului exact cat ii dadeam ca marime. Scara
     ramane la 0.91 pentru spatii, iar litera se declara direct. */
  .ld-teme__name { font-size: 26.5px; }
  /* Greutatile se departeaza pe telefon. La 200, calificativul devine paianjen la 17,92px: subtirea
     e o alegere care tine la 30px pe desktop, nu la jumatate din marime pe un ecran in mana.
     400 il face lizibil, 900 duce cuvantul-cheie pana la capatul axei, deci contrastul dintre ele
     ramane la fel de mare, doar mutat mai sus. DM Sans e variabil 100-900, deci ambele exista. */
  .ld-teme__name .thin { font-weight: 400; }
  .ld-teme__name .bold { font-weight: 900; }
}

/* ============================================
   Grupul MHM: banda celor 7 companii + veriga fiecareia
   Directia "Lantul" din experiments/grup-lab.html.

   Sectiune INCHISA, nu din gust: logo-urile sunt albe cu albastrul turnat in JPG, deci fundalul
   trebuie sa fie exact culoarea lor, altfel se vad 7 dreptunghiuri. Ca ritm, taie tronsonul
   luminos dintre Teme (alb) si Agenda (gri), iar pana la urmatorul bloc inchis (Locatie) e
   Agenda, cea mai lunga sectiune din pagina: distanta e reala.
   ============================================ */
.ld-grup {
  background: var(--ld-grup-blue);
  color: #fff;
  /* sus si jos: 55px la desktop (cerut de user); sub ~1100px scaleaza pe 5vw ca restul */
  padding: clamp(2.6rem, 5vw, 55px) 0 clamp(2.6rem, 5vw, 55px);
  position: relative;
  overflow: hidden;
}
/* aureola de sus, ca banda sa nu fie o suprafata plata de albastru */
.ld-grup::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,0.10), transparent 60%);
}
/* Plafoanele de latime scoase DOAR pentru antet, iar continutul ramane CENTRAT prin
   .ld-section__head (text-align: center). De-aia nu se muta nimic in stanga: latimea nu mai
   decide pozitia, decide doar unde se rupe randul.
   Titlul "Un ecosistem complet." are ~10em; la 136px inseamna 1360px, iar coloana casei
   (.ld-section__head, 1100px) il rupea in doua. Fara plafon, intra pe UN rand de la ~480px
   viewport in sus. Paragraful nu creste odata cu el: .ld-statement isi tine max-width: 1000px
   si ramane centrat, deci masura de citit nu se strica. */
.ld-grup .ld-container    { position: relative; z-index: 1; max-width: none; padding: 0 1.5rem; }
.ld-grup .ld-section__head { max-width: none; }
/* Eyebrow + titlu + lede folosesc clasele CASEI, deci scara tipografica e identica cu a
   celorlalte sectiuni: singurul titlu ramas cu clasa proprie e .ld-audienta__title, si acela cu
   aceleasi clamp(3rem,9vw,90px)/700/0.95/-0.02em (agenda si-a lasat clasele proprii si a trecut
   pe .ld-section__title in 2026-07-19). Aici se schimba DOAR culoarea, exact cum face
   .ld-locatie, cealalta sectiune inchisa. Varianta anterioara isi avea propria scara
   (5rem/weight 200) si sarea in ochi fata de restul paginii.
   Culorile se pun EXPLICIT: in cascada Elementor, regulile pe p/h2 bat valoarea mostenita din
   .ld-grup, iar textul cadea pe inchis. */
.ld-grup .ld-section__eyebrow {
  /* alb, nu violetul de brand: pe albastrul asta violetul e ilizibil */
  color: #fff;
  margin: 0 0 1.75rem;
}
/* Titlul pastreaza line-height-ul casei (0.95): pe un singur rand nu are ce sa suprapuna, deci
   arata exact ca "Ce facem diferit". */
.ld-grup .ld-section__title { color: #fff; }
/* .brand-highlight isi duce fundalul galben si textul inchis; aici doar oprim albul de mai sus
   sa i se aseze peste.
   Marginea negativa anuleaza padding-ul la calculul spatiului dintre cuvinte. Fara ea se aduna
   doua lucruri: spatiul normal dintre cuvinte (~0.26em) SI padding-ul casetei (0.15em) = 0.41em,
   cu 58% mai mult decat un spatiu, si chiar arata a doua spatii. Caseta ramane la fel de lata
   (padding-ul nu se schimba), doar cuvantul urmator nu mai e impins in plus.
   La "Ce facem diferit" si "Teme principale" problema nu apare: acolo evidentierea cade pe
   ULTIMUL cuvant, urmat de punct sau de nimic. Asta e primul titlu cu un cuvant dupa ea, deci
   regula sta aici, nu pe clasa globala. */
.ld-grup .ld-section__title .brand-highlight { color: var(--brand-ink); margin: 0 -0.15em; }
/* Paragraful de sub titlu e .ld-statement, NU .ld-section__lede. Motivul e masurabil: lede-ul
   are 1.125rem FIX, deci nu creste cu ecranul, iar langa un titlu care urca la 136px iese un
   raport de 7.6:1. Sectiunea "De ce", cea mai apropiata ca structura (titlu mare + paragraf
   dedesubt), foloseste .ld-statement: clamp(1.5rem,3.2vw,2.625rem) = 42px la 1920, adica 3.2:1.
   .ld-section__lede il foloseste doar Inscrierea, care are alte proportii.
   Centrat in .ld-section__head, ca la "De ce". */
.ld-grup__sub { margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.92); }
/* Fraza de final urmeaza antetul: centrata, pe aceeasi grila. */
.ld-grup__foot { text-align: center; }

/* --- banda ---------------------------------------------------------------
   FULL-BLEED ca suprafata, dar cele 5 companii stau CENTRATE ca grup, nu intinse pana la
   margini: cerinta userului 2026-08-06, odata cu iesirea lui MarTech din banda si cu
   descrierile scurte de maxim 65 de caractere. space-between avea sens cu 7 statii pline;
   cu mai putine, golurile crescute impingeau capetele in margini si mijlocul respira inegal.
   Golul dintre statii e acum explicit (column-gap), iar grupul se aseaza pe mijloc.
   Zero overflow-x, deci fara slider; sub 1180px trece pe mai multe randuri.
   Coloane de latime FIXA, nu 1fr: cu 1fr, fiecare logo e mai ingust decat coloana lui cu cat ii
   cere raportul propriu, iar restul se aduna ca spatiu mort la coada coloanei (masurat pe
   varianta cu 7). Grid, nu flex, ca la wrap randul incomplet sa pastreze coloanele.

   NUMARUL DE COLOANE TREBUIE SA FIE CAT NUMARUL DE FIRME din $firme, in
   tasks/sections/45-grup.php. A ramas in urma o data: banda a scazut de la 7 la 6 la 5, aici a
   fost actualizat doar pana la 6, iar a sasea pista, goala, impingea continutul cu 155px la
   stanga (246px coloana + 64px gol, injumatatit). Cand se adauga sau se scoate o companie,
   se schimba si cifra de mai jos. */
.ld-grup__rail { position: relative; z-index: 1; margin-top: clamp(3.5rem, 7vw, 6rem); padding: 0 clamp(1rem, 2vw, 2.5rem); }
.ld-grup__track {
  display: grid;
  grid-template-columns: repeat(5, clamp(150px, 12.8vw, 246px));
  justify-content: center;
  column-gap: clamp(1.5rem, 3.2vw, 4rem);
  row-gap: clamp(2.6rem, 4vw, 3.6rem);
}
/* Sub 1180px nu mai incap 7 pe rand fara ca marcile sa scada sub pragul de citit. Cu mai putine
   coloane, cadrul urca la 132px = marimea nativa a fisierului (1:1, fara scalare). */
@media (max-width: 1180px) {
  .ld-grup__track { grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: clamp(1rem, 2.5vw, 2rem); }
  .ld-grup__logo  { height: clamp(84px, 8.5vw, 132px); }
}
@media (max-width: 820px) {
  .ld-grup__track { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ld-grup__logo  { height: clamp(84px, 11vw, 132px); }
}
@media (max-width: 560px) {
  .ld-grup__track { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ld-grup__logo  { height: clamp(84px, 15vw, 132px); }
  /* Sub ~512px titlul chiar se rupe in doua randuri, si abia atunci apare problema casetei
     galbene: fundalul unui span inline se picteaza peste zona de continut a fontului, inaltime
     data de METRICILE lui, nu de line-height. Caseta are ~1.32em (masurat pe "Ce facem
     diferit"), deci la 0.95em intre randuri ar urca 0.37em peste randul vecin.
     Nu departam randurile pana la 1.32 (titlul ar deveni lenes), ci MICSORAM caseta: pe
     inline-block inaltimea fundalului vine din propriul line-height, deci o comandam. 1.06em
     incape lejer pe "ecosistem" (niciun descender). Scope-uit aici ca sa nu atinga "diferit"
     din De ce, unde f-ul italic din Fraunces chiar coboara sub linie.
     Rezultat: caseta 1.06em intre randuri la 1.15em => 0.09em spatiu, nu 0.37em suprapunere. */
  .ld-grup .ld-section__title { line-height: 1.15; }
  .ld-grup .ld-section__title .brand-highlight { display: inline-block; line-height: 1.06; }
}

/* Statia e si .ld-slidein. Declar tranzitia intreaga aici, cu intarzierea de stagger, ca sa nu
   sterg reveal-ul temei (acelasi tipar ca .ld-teme__row). */
.ld-grup__st {
  position: relative;
  transition:
    opacity   0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 90ms),
    transform 0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 90ms);
}
/* padding-ul sta pe TEXT, nu pe statie: asa logo-ul foloseste toata latimea coloanei. Separarea
   dintre coloane o dau golurile lui space-between, la care textul adauga inca putin. */
.ld-grup__stin { padding-right: 0; }

/* Fisierele livrate sunt pre-echilibrate intre ele (aceeasi inaltime de cadru, greutate optica
   ajustata per marca), deci randam la inaltime EGALA de cadru si lasam latimea libera: fara
   max-width, fara object-fit, fara corectii per logo.
   Plafonul de 100px nu e ales estetic, e aritmetica, refacuta dupa iesirea lui MarTech
   (322x132): cel mai lat cadru ramas e Hit Mail, 310x132 (raport 2.35), statia la 1920px are
   246px, deci plafonul care il tine in coloana e 246/2.35 = 104px; 100 ramane cu putina marja. */
.ld-grup__logo { height: clamp(54px, 5.2vw, 100px); display: flex; align-items: center; margin-bottom: 1.1rem; }
.ld-grup__logo img { height: 100%; width: auto; display: block; }

/* 1rem / 0.94rem la weight 700/400. Sub atat (era 0.94/0.82 la 600/300) marcile se citeau, dar
   rolurile nu: la 13px fontul subtire pierde mai mult decat dimensiunea. Contrastul nu era
   problema (alb 0.8 pe albastrul asta trece pragul), marimea era. */
.ld-grup__role { margin: 0; font-size: clamp(1rem, 1.05vw, 1.12rem); font-weight: 700; line-height: 1.3; color: #fff; padding-right: clamp(0.5rem, 1vw, 1.2rem); }
.ld-grup__what { margin: 0.45rem 0 0; font-size: clamp(0.9rem, 0.92vw, 1rem); font-weight: 400; line-height: 1.5; color: rgba(255,255,255,0.8); padding-right: clamp(0.5rem, 1vw, 1.2rem); }
/* Cuvintele cu cratima raman intregi pe un rand. Vezi tasks/sections/45-grup.php, unde marcajul
   se pune peste textul deja escapat. Coloana are ~30 de caractere pe rand, deci un compus de
   10-11 caractere incape lejer; fara asta, browserul rupea "e-commerce" dupa cratima. */
.ld-grup__what .ld-nb { white-space: nowrap; }

/* Golul DE SUS (de la linie la text) e egal cu cel DE JOS (de la text la capatul albastrului),
   deci fraza sta pe mijlocul benzii de final. Nu e o valoare aleasa, e chiar padding-ul de jos al
   sectiunii, scris identic, ca cele doua sa se miste impreuna la orice latime. Masurat inainte,
   in browser: 30px sus fata de 42px jos, cu 1.8rem fix; masurat dupa: egale. */
.ld-grup__foot { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2.6rem, 5vw, 55px); border-top: 1px solid rgba(255,255,255,0.16); }
/* Fara plafonul de 44ch (cerinta user 2026-08-06): fraza sta pe UN singur rand, centrata de
   text-align-ul lui __foot. Are ~73 de caractere; la marimea maxima de 1.45rem incape pe un rand
   de la ~900px de viewport in sus, iar sub atat se rupe natural, nu fortat de plafon. */
/* Marimea creste cu 20% (cerinta user 2026-08-06), pe toate cele trei capete ale clamp-ului, ca
   sa creasca la fel pe telefon, pe scara fluida si pe monitor mare: 1.05 -> 1.26rem,
   1.9 -> 2.28vw, 1.45 -> 1.74rem. */
.ld-grup__claim { margin: 0 auto; font-size: clamp(1.26rem, 2.28vw, 1.74rem); font-weight: 300; line-height: 1.45; color: #fff; }
.ld-grup__claim .bold { font-weight: 700; color: #fff; }

/* ============================================
   Program + Speakeri: un singur segment, directia "Firul" (aleasa din experiments/divider-lab.html).
   Agenda la stanga, speakerii la dreapta pe un GRID COMUN: fiecare sesiune si speakerul ei sunt in
   acelasi rand de grid => aceeasi inaltime, hairline-uri aliniate, speakerul la inaltimea sesiunii
   lui (pauzele lasa gol in dreapta, deci speakerii se intind pe toata inaltimea, nu se ingramadesc).
   La hover: descrierea coboara (dropdown, 2 randuri) pe agenda + un FIR SVG se aprinde pana la
   portret. Firele + hover-ul le deseneaza functions.php.
   A inlocuit vechea agenda pe 2 coloane si vechii speakeri (CSS-ul lor sters la refactorul 2026-07-18).
   Fundal gri (--brand-bg-alt). Motivul initial era ca vecina de deasupra, .ld-teme, e alba. De
   cand intre ele a intrat segmentul 45, vecina de deasupra e .ld-grup, pe albastrul masurat din
   logo-uri, iar cea de dedesubt e .ld-locatie, navy. Griul separa in continuare, dar acum e
   treapta deschisa dintre doua sectiuni inchise, nu contrastul fata de alb. Secventa completa a
   paginii: audienta navy, teme alb, grup albastru, agenda gri, locatie navy, inscriere gri.
   ============================================ */
/* sus si jos: 55px la desktop (cerut de user). Mobil: vezi @820 */
.ld-agenda { background: var(--brand-bg-alt); padding: clamp(2.6rem, 5vw, 55px) 100px clamp(2.6rem, 5vw, 55px); }
.ld-agenda .ld-container { max-width: none; }
/* Capul sectiunii vine intreg din 06-section.css (.ld-section__head + __eyebrow + __title), ca la
   "De ce" si "Un ecosistem complet": centrat, cu acelasi 4rem sub el ca la celelalte segmente.
   Avea clase proprii care copiau master-ul cuvant cu cuvant si il aliniau la stanga, deci era
   singurul cap de sectiune iesit din rand.
   Ridicam DOAR plafonul de latime, exact ca la .ld-grup: containerul agendei e full-width, iar la
   marimea master titlul ajunge foarte aproape de 1100px, deci plafonul l-ar impinge pe doua
   randuri la cea mai mica schimbare de text. Un titlu rupt inseamna caseta galbena peste randul de
   deasupra, defectul deja semnalat de doua ori. Centrarea nu se pierde: ea vine din text-align,
   nu din latime. */
.ld-agenda .ld-section__head { max-width: none; }

/* Invelis relativ: ancoreaza SVG-ul cu fire peste grid. */
.ld-agenda__wrap { position: relative; }
.ld-agenda__svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; }
.ld-agenda__svg path {
  fill: none; stroke: var(--brand-ink); stroke-width: 1; opacity: 0.1;
  transition: opacity 0.3s, stroke-width 0.3s, stroke 0.3s;
}
.ld-agenda__svg path.is-hot { opacity: 1; stroke: url(#ld-thread); stroke-width: 2; }
.ld-agenda__svg.is-hovering path:not(.is-hot) { opacity: 0.04; }

/* Grid comun: stretch (implicit) => cele doua celule ale unui rand au aceeasi inaltime =>
   hairline-urile stanga/dreapta se aliniaza si speakerul sta la inaltimea sesiunii lui. */
.ld-agenda__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(4rem, 12vw, 11rem); position: relative; z-index: 2;
}
/* "AGENDĂ" si "SPEAKERI" sunt capetele celor doua coloane, nu o nota de subsol: erau la 0.72rem
   (11.5px), sub orice alt text din segment, inclusiv sub ora sesiunii. Urcate la 18.4px pe ecran
   mare, adica la nivelul titlului de sesiune. Nu concureaza cu el: majuscule, spatiate la 0.2em si
   in gri, deci se citesc ca eticheta, nu ca titlu. Padding-ul creste odata cu litera, ca hairline-ul
   sa nu ramana lipit de ea. */
.ld-agenda__colhead {
  font-size: clamp(1rem, 1.1vw, 1.15rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand-muted); padding-bottom: 1.15rem; border-bottom: 1px solid var(--brand-ink);
}

/* Stanga = randul de agenda. E si .ld-slidein (reveal la scroll) => toate tranzitiile intr-o
   singura regula, ca "padding-left" singur sa nu stearga revealul (capcana documentata la .ld-teme). */
.ld-agenda__l {
  display: grid; grid-template-columns: 70px 1fr; gap: 1rem; align-content: start;
  padding: 1.1rem 0; border-bottom: 1px solid rgba(26,26,46,0.13);
  transition:
    opacity   0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 60ms),
    transform 0.7s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 60ms),
    padding-left 0.4s cubic-bezier(0.2,0.7,0.3,1) 0s, background 0.3s;
}
.ld-agenda__l .ld-agenda__time {
  font-weight: 200; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}
.ld-agenda__time small {
  display: block; margin-top: 0.35rem;
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; color: var(--brand-muted);
}
.ld-agenda__ttl { font-weight: 700; font-size: clamp(0.95rem, 1.4vw, 1.15rem); line-height: 1.15; letter-spacing: -0.01em; }
.ld-agenda__l.is-break { align-items: center; align-content: center; padding: 0.8rem 0; }
.ld-agenda__l.is-break .ld-agenda__time { font-size: 0.9rem; font-weight: 300; color: var(--brand-muted); }
.ld-agenda__brk { display: flex; align-items: center; gap: 0.6rem; color: var(--brand-muted); font-weight: 300; font-size: 0.92rem; }
.ld-agenda__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--brand-muted); flex: 0 0 auto; }
.ld-agenda__l.is-talk { cursor: pointer; }
.ld-agenda__l.is-talk.is-hot { padding-left: 0.7rem; background: linear-gradient(90deg, rgba(120,104,198,0.09), transparent 70%); }
.ld-agenda__l.is-dim { opacity: 0.4; }

/* Dropdown descriere pe agenda: 2 randuri dure (-webkit-line-clamp). Buget 130c = 2 randuri pline
   pe laptop 1366px (masurat). Ce depaseste se taie cu "…" => layoutul nu se sparge niciodata. */
.ld-agenda__desc {
  overflow: hidden;
  color: var(--brand-muted); font-weight: 300; font-size: 0.9rem; line-height: 1.5; max-width: 60ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  transition: max-height 0.45s cubic-bezier(0.2,0.7,0.3,1), opacity 0.35s, margin-top 0.35s;
}
/* Inchiderea sta sub .ld-js. Descrierea se deschide la hover, prin .is-hot pusa din
   inc/agenda-threads.php, deci fara JavaScript nu s-ar fi deschis niciodata si textul ramanea
   inaccesibil. Sub .ld-js e inchisa doar cand exista si mecanismul care o deschide.
   Regula de deschidere e (0,4,0), deci ramane deasupra fara sa fie atinsa.
   Nota: pe touch nu exista hover, deci acolo descrierea tot nu apare. E o problema separata, de
   interactiune, nu de JavaScript; mobilul are versiune proprie. */
.ld-js .ld-agenda__desc { max-height: 0; opacity: 0; margin-top: 0; }
.ld-agenda__l.is-talk.is-hot .ld-agenda__desc { max-height: 3rem; opacity: 1; margin-top: 0.5rem; }

/* Dreapta = speakerul, pinned SUS (flex-start) ca portretul sa nu se miste cand descrierea creste randul. */
.ld-agenda__r {
  display: flex; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid rgba(26,26,46,0.13);
  /* si .ld-slidein: reveal in cascada la scroll, ca randurile din stanga (acelasi --i). */
  transition:
    opacity   0.6s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 60ms),
    transform 0.6s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 60ms);
}
.ld-agenda__r.is-dim { opacity: 0.4; }
/* Portret pinned sus + bloc text (nume, functie·companie, bio) care umple latimea coloanei. */
.ld-agenda__spk { display: flex; align-items: flex-start; gap: 1.1rem; }
.ld-agenda__mono {
  width: 60px; height: 60px; border-radius: var(--radius-full); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1.1rem;
  background: linear-gradient(135deg, var(--grad-blue), var(--grad-magenta));
  transition: transform 0.35s, box-shadow 0.35s;
}
.ld-agenda__who { min-width: 0; }
.ld-agenda__name { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.15; }
.ld-agenda__role {
  margin-top: 0.25rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--brand-accent); text-transform: none;
}
/* Fara plafon de latime pe bio (era 52ch): cu bio-urile reale din Excel, textul se rupea pe 4
   randuri langa o coloana pe jumatate goala. Cerinta userului 2026-08-06: se foloseste spatiul.
   Latimea efectiva o da coloana din grid minus portret si gap. */
.ld-agenda__bio {
  margin-top: 0.55rem; font-size: 0.85rem; font-weight: 300; line-height: 1.5;
  color: var(--brand-muted);
}
.ld-agenda__r.is-hot .ld-agenda__mono { transform: scale(1.12); box-shadow: 0 14px 34px -12px rgba(120,104,198,0.7); }
.ld-agenda__r.is-hot .ld-agenda__name { color: var(--brand-primary); }
/* Portretul real (cand exista fisier): mosteneste cutia discului prin clasa __mono, aici
   decupajul si tratamentul ALB-NEGRU cu trecere in culoare la hover, ca pe loializare.com,
   referinta data de user. Tranzitia repeta perechile lui __mono si adauga filter.
   SELECTORUL E DESCENDENT (0,2,0) DINTR-UN MOTIV MASURAT in browser (2026-08-06, scanarea
   regulilor care se potrivesc pe img): Elementor pune `.elementor img { border-radius: 0 }` in
   frontend.min.css, specificitate (0,1,1), care bate o clasa simpla (0,1,0) indiferent de ordine.
   Discul div cu initiale nu e <img>, de-aia el era rotund si poza nu, ca un patrat alb sub umbra
   de hover. Raza explicita, nu var(): sa nu depinda de nimic cand se lupta cu reset-uri straine. */
.ld-agenda__spk .ld-agenda__foto {
  border-radius: 50%; background: #fff;
  object-fit: cover; filter: grayscale(1);
  transition: transform 0.35s, box-shadow 0.35s, filter 0.35s;
}
/* Zoomul pe portret: 1.12 al discului, marit in doua trepte de +30% cerute de user (2026-08-06):
   1.12 x 1.3 x 1.3 = 1.9. Doar pe poza; sursa de 240px acopera cei ~114px randati (peste 2x).
   Specificitatea (trei clase) bate scale-ul de 1.12 al regulii is-hot de pe __mono. */
.ld-agenda__r:hover .ld-agenda__foto,
.ld-agenda__r.is-hot .ld-agenda__foto { filter: grayscale(0); transform: scale(1.9); }

@media (max-width: 820px) {
  .ld-agenda { padding: clamp(2.6rem, 5vw, 55px) 1.5rem clamp(2.6rem, 5vw, 55px); }
  .ld-agenda__grid { grid-template-columns: 1fr; column-gap: 0; }   /* se stivuiesc: sesiune, apoi speakerul ei */
  .ld-agenda__svg { display: none; }                                /* fara fire pe touch/stacked */
  .ld-agenda__colhead:nth-child(2) { display: none; }
  .ld-agenda__r { padding-top: 0; padding-bottom: 1.4rem; }
}

/* De ce: full-bleed (margine laterala 100px, fara cutie) + ancora pentru "2026" din spate.
   position/overflow sunt aici, nu langa .ld-year-ghost: un singur loc unde se declara .ld-de-ce. */
.ld-de-ce {
  background: var(--brand-bg);
  position: relative;      /* ancora pentru "2026" absolut din spate */
  overflow: hidden;        /* 2026 nu are voie sa dea pe afara din bloc */
  padding-top: 38vh;       /* mutat aici din stilul inline al sectiunii, ca sa poata fi rescris pe mobil */
  padding-left: 100px;
  padding-right: 100px;
}
.ld-de-ce .ld-container { position: relative; z-index: 1; max-width: none; }

/* MOBIL. Sectiunea asta era singura din pagina care pastra cei 100px laterali si pe telefon:
   masurat pe 375px, ramaneau 175px de continut, adica 53% din ecran aruncat, iar de-acolo veneau
   titlul pe trei randuri, fraza pe sase si senzatia de inghesuiala. Restul sectiunilor coboara
   demult la 24px. Golul de sus scade de la 38vh (308px pe un ecran de 812) la 40px, cerut de user
   ca distanta intre finalul hero-ului si supratitlu. */
@media (max-width: 640px) {
  .ld-de-ce { padding-top: 40px; padding-left: 24px; padding-right: 24px; }
  /* Supratitlul la 20px, nu 27,2: masurat, la 27,2 cere 349px si se rupe pe doua randuri, la 22
     cere 282 si incape pe 375 dar nu si pe un ecran de 320, la 20 cere 256 si incape peste tot.
     E o eticheta, nu un al doilea titlu; la marimea veche batea titlul de sub ea. */
  .ld-de-ce .ld-section__eyebrow { font-size: 20px; }
  /* Golul pana la primul rand al grilei: 40px, cerut de user. Se compune din trei surse care se
     adunau la 186px, deci se sting toate trei si se pune valoarea o singura data. */
  .ld-de-ce .ld-section__head { margin-bottom: 0; }
  .ld-de-ce .ld-dece { margin-top: 40px; }
  .ld-de-ce .ld-dece__row:first-child { padding-top: 0; }
  /* Titlul cu 20% mai mare, 48 -> 58. Distanta dintre randuri: vezi blocul RITMUL TITLURILOR de
     mai jos, unde e explicata o singura data pentru toate trei. */
  .ld-de-ce .ld-section__title { font-size: 58px; }
  /* Blocul 01/02/03 centrat pe mijloc, cu tot cu cifra si textele. Pe desktop ramane la stanga,
     unde sunt trei coloane si alinierea la stanga leaga randurile intre ele. */
  .ld-de-ce .ld-dece { text-align: center; }
  .ld-de-ce .ld-dece__head { justify-content: center; }
  .ld-de-ce .ld-dece__text { margin-left: auto; margin-right: auto; }
  /* Ruperea de rand din textul lui 02 dispare pe mobil, ca frazele sa curga una dupa alta.
     In markup exista acum un spatiu inaintea lui <br>, altfel ascunderea ar fi lipit
     "generale." de "Doar". */
  .ld-de-ce .ld-dece__text br { display: none; }
  /* Supratitlurile randurilor (participare selectivă, experiență practică, context relevant) cu
     35% mai mari: 0.82rem inseamna 13.12px, prea mic pe telefon langa nume de 26.5px. */
  .ld-de-ce .ld-dece__meta { font-size: 17.7px; }
  /* Golul pana la segmentul urmator scade cu 40%: masurat 171px, din doua paduri de 96px care se
     aduna (jos aici, sus la bridge). 62 plus 62 il duc la ~103px. Perechea e in css/20-bridge.css. */
  .ld-de-ce { padding-bottom: 62px; }
}

/* ============ RITMUL TITLURILOR CU CASETA, PE MOBIL ============
   Modelul cerut de user e "Un ecosistem complet" din segmentul Grup: acolo caseta galbena sta
   sub randul de deasupra, nu peste el. Masurat pe 375px, de-aia arata singurul bine:

     titlu                  raport   caseta    spatiu liber
     Un ecosistem complet    1.15     1.06em     +4px      <- modelul
     Agenda & speakerii      0.95     1.23em    -13px
     Cui i se adreseaza      0.95     1.23em    -13px
     Ce facem diferit        1.04     1.24em    -12px

   Fundalul unui span se picteaza pe zona de continut a fontului, deci inaltimea casetei vine din
   METRICILE lui, nu din line-height. La 1.23em caseta e mai inalta decat distanta dintre randuri,
   si urca peste randul vecin. Exact asta se vede ca "prea apropiate".

   Modelul si-a permis 1.15 fiindca si-a MICSORAT caseta la 1.06em, iar "ecosistem" nu are nicio
   litera sub linie. Aici nu se poate: "speakerii" are p, iar "diferit" are f-ul italic din
   Fraunces, care chiar coboara (avertisment scris deja in css/45-grup.css). Deci nu micsoram
   caseta, ci marim distanta.

   1.31 = caseta (1.23-1.24em) plus aceiasi 4px de spatiu liber ca la model, si la 48px si la 58px.
   O singura cifra pentru toate trei, fiindca toate trei au aceeasi caseta. */
@media (max-width: 640px) {
  .ld-de-ce .ld-section__title,
  .ld-agenda .ld-section__title,
  .ld-audienta .ld-audienta__title { line-height: 1.31; }
}

/* ============================================
   Locatie: 2 columns
   ============================================ */
/* Full-bleed STATIC (directia A fara scroll): vila pe tot ecranul, identitate stanga, info dreapta.
   Inaltime fixa 1 ecran; fundal cu inset:0 (se lipeste de margini indiferent de inaltime => nu mai
   poate lasa gol navy; bug-ul de dinainte era height:120% fara inaltime definita pe parinte).
   Parallax = doar ZOOM (scale) din functions.php: nu descopera niciodata margini. */
.ld-locatie {
  position: relative; isolation: isolate; overflow: hidden;
  /* ca .ld-hero: min-height + flex e tiparul care se aplica in structura Elementor (sectiune
     stretched, flex). height:100vh NU se aplica acolo (de-aia in lab mergea, in test nu).
     align-items:flex-start: continutul porneste de sus la 55px, ca grup/agenda (cerut de user);
     inainte era center si continutul plutea la mijloc. */
  min-height: 100vh; display: flex; align-items: flex-start;
  padding-top: 0;   /* anuleaza cei 96px de sus mosteniti din .ld-section: golul de sus il da inner-ul (65px) */
  background-color: #0D0F1F; color: #fff;
}
.ld-locatie__bg {
  /* DIV cu background-image, nu <img>: un <img> (element "replaced") NU se intinde cu inset:0 singur
     (are dimensiuni intrinseci) => ramaneau margini navy sus/dreapta. Un div se intinde complet cu
     inset:0 chiar pe parinte min-height. Acelasi tipar ca .ld-audienta::before. Imaginea vine din
     stilul inline pe element (portabil prin $UP). */
  position: absolute; inset: 0; z-index: -2;
  /* auto 145% (nu cover): ancorat jos, arata partea de jos ~69% si taie ~31% din varf, adica din
     cerul care ocupa jumatatea de sus a fisierului. Reincadrare din CSS, cerut de user; fisierul
     hero-LD.webp si hero-ul care il foloseste raman neatinse. Fractia taiata NU depinde de ecran. */
  background-size: auto 145%; background-position: center bottom; background-repeat: no-repeat;
  transform: scale(1.03); transform-origin: center bottom; will-change: transform;   /* ancoreaza JOSUL: vila intreaga */
}
/* Scrim: mai dens spre stanga (unde sta identitatea), lasa vila + apusul vizibile spre dreapta. */
.ld-locatie::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(13,15,31,0.82) 0%, rgba(13,15,31,0.5) 42%, rgba(13,15,31,0.34) 100%);
}
.ld-locatie__inner {
  position: relative; width: 100%;
  /* align-items:start + padding-top 65px: eyebrow-ul porneste de sus (cerut de user; grup/agenda
     sunt la 55px, vila la 65). Inainte: center + 7rem, continut centrat pe verticala. Jos 5rem. */
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2.6rem, 5vw, 65px) clamp(1.5rem, 6vw, 100px) 5rem;
}
/* Eyebrow + titlu = CONVENTIA standard (.ld-section__eyebrow / .ld-section__title), ca restul
   sectiunilor. Doar culoarea titlului trece pe alb (sectiune pe foto). Accentul galben "villa"
   ramane (Fraunces italic pe galben, din .brand-highlight.ld-diferit global). */
.ld-locatie .ld-section__eyebrow { margin: 0 0 1.75rem; }
.ld-locatie .ld-section__title { color: #fff; margin: 0; }
/* Spatiere subheadline = conventia paginii: subheadline-ul de sub un titlu master sta la 3rem
   (vezi .ld-statement sub "Ce facem diferit"). Titlul are margin:0, deci gap-ul sta pe sub. */
.ld-locatie__sub { margin-top: 3rem; font-size: clamp(1.35rem, 2.5vw, 2.1rem); font-weight: 300; color: rgba(255,255,255,0.9); }
.ld-locatie__desc { margin-top: 1.5rem; font-size: 1.35rem; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,0.92); max-width: 40ch; }

.ld-locatie__info { align-self: center; }
/* Index numerotat (R2 din lab): randuri mari, reveal in cascada la scroll (.ld-slidein cu --i),
   hover care impinge randul. Randul e si .ld-slidein => toate tranzitiile intr-o regula, ca
   "padding-left" singur sa nu stearga revealul (capcana documentata la .ld-teme). */
.ld-locatie__index { margin: 0 0 2.2rem; border-top: 1px solid rgba(255,255,255,0.2); }
.ld-locatie__row {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.4rem; align-items: baseline;
  padding: 1.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.14);
  transition:
    opacity   0.6s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 90ms),
    transform 0.6s cubic-bezier(0.22,1,0.36,1) calc(var(--i, 0) * 90ms),
    padding-left 0.35s cubic-bezier(0.2,0.7,0.3,1) 0s, background 0.3s;
}
.ld-locatie__row:hover { padding-left: 0.7rem; background: linear-gradient(90deg, rgba(120,104,198,0.16), transparent 70%); }
.ld-locatie__num { font-weight: 200; font-size: 1.05rem; letter-spacing: 0.1em; color: var(--brand-secondary); }
.ld-locatie__fact {
  font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; color: #fff;
}
.ld-locatie__fact b { font-weight: 700; }
/* Ghost button pe fundal inchis: contur alb, fill alb la hover. */
/* CTA proeminent: plin galben pe fundal inchis, mai mare si bold, iese in evidenta. */
.ld-locatie__cta {
  background: var(--brand-secondary); color: var(--brand-ink); border: 0;
  font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em; padding: 1.05rem 2.3rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease;
}
/* La hover ia gradientul brand (blue->magenta) de la butonul CTA din hero (.cta-btn). */
.ld-locatie__cta:hover {
  background: linear-gradient(135deg, var(--grad-blue), var(--grad-magenta)); color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 820px) {
  .ld-locatie { align-items: flex-start; }   /* pe mobil se stivuieste de sus; min-height:100vh + inset:0 acopera */
  .ld-locatie__inner { grid-template-columns: 1fr; gap: 2.5rem; align-content: center; padding: clamp(2.6rem, 5vw, 65px) 1.5rem 4rem; }
  .ld-locatie::after { background: linear-gradient(180deg, rgba(13,15,31,0.42) 0%, rgba(13,15,31,0.82) 100%); }
}

/* ============================================
   Inscriere
   ============================================ */
.ld-inscriere {
  background: var(--brand-bg-alt);
  padding: 0 1.5rem;   /* anuleaza verticalul mostenit din .ld-section (6rem); golul sus/jos il da __in (55px) */
}

/* A doua linie din titlu ("Conexiuni care conteaza") la jumatate din marimea primei: un hook mare
   plus un subtitlu. font-size in em, deci scaleaza cu clamp-ul titlului. */
.ld-inscriere__titlu2 {
  display: block;
  margin-top: 0.35em;
  font-size: 0.5em;
  line-height: 1.1;
}

/* Conturul punctat a disparat odata cu placeholderul: cutia gazduieste acum o plata reala, iar
   punctatul citea ca "nefinalizat". */
.ld-inscriere__box {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 2rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(120, 104, 198, 0.22);
  text-align: center;
  color: var(--brand-muted);
}

/* Pretul. Gol cand variabilele de mediu lipsesc, si atunci nu trebuie sa lase spatiu alb in
   mijlocul cutiei; :empty scoate si marginea, nu doar textul. */
.ld-inscriere__pret {
  margin: 0 0 1.75rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.05;
  color: var(--brand-ink);
}
.ld-inscriere__pret:empty {
  display: none;
}

/* Suma in lei, sub pretul in euro. NU e fine print: e cifra care se debiteaza de pe card, deci sta in
   culoarea textului principal, nu in gri de nota de subsol. Marimea in rem, nu in em, ca sa nu creasca
   odata cu clamp-ul pretului de deasupra, iar font-family se reia explicit fiindca parintele impune
   fontul de titlu, in care o propozitie intreaga se citeste prost. */
.ld-inscriere__lei {
  display: block;
  max-width: 44ch;
  margin: 0.9rem auto 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brand-ink);
}

.ld-inscriere__form {
  margin: 0;
}

.ld-inscriere__buton {
  width: 100%;
  max-width: 320px;
}

/* Nota de sub buton spune cine emite factura. Ramane deliberat discreta, dar lizibila: e
   informatie contractuala, nu text decorativ. */
.ld-inscriere__nota {
  max-width: 42ch;
  margin: 1.25rem auto 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--brand-muted);
}

/* Mesajul "inscrierile se deschid in curand": o stare de lansare, nu un formular lipsa. Fara cutie
   alba in jur (vezi regula :has de mai jos), doar text mare cu un tag galben pe "in curand", ca
   ochiul sa prinda momentul, nu absenta butonului. */
.ld-inscriere__soon {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
  text-align: center;
}
/* Acelasi "tag galben" ca in pop-up (.ld-modal__titlu em): Fraunces italic pe galben. Titlul ramane
   DM Sans, accentul e serif italic, exact tiparul din h1-ul hero (sans + cuvant serif italic). */
.ld-inscriere__tag {
  font-family: Fraunces, Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.15em;
  letter-spacing: -0.01em;
  background: var(--brand-secondary);
  color: var(--brand-ink);
  padding: 0 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
/* Cand cutia gazduieste doar anuntul (nu formularul real), nu mai e o "cutie": fara fundal alb,
   fara chenar, fara padding. :has prinde exact starea de lansare fara sa ating markup-ul Elementor. */
.ld-inscriere__box:has(> .ld-inscriere__soon) {
  max-width: 720px;
  padding: 0;
  background: none;
  border: none;
}


/* ==========================================================================
   Segment 6. INSCRIERE, fluxul complet de cumparare.
   GENERAT din experiments/inscriere-flux-lab.html de tasks/_port_inscriere.php.
   Culorile sunt identice cu ale laboratorului, doar redenumite la variabilele temei.
   Toate clasele sunt prefixate cu ld-: in laborator erau goale si s-ar fi ciocnit.
   ========================================================================== */

/* Cele patru variabile pe care laboratorul le are si tema nu. Restul vin din
   css/01-variabile.css si NU se redefinesc aici. */
:root {
	--mov:          #5B3FD1;                 /* capatul inchis al gradientului de buton */
	--muted-inchis: #58556A;                 /* --brand-muted inchis cu 20%, contrast pe alb */
	--line:         rgba(26, 26, 46, .12);   /* linia de despartire, --brand-ink la 12% */
	--mono:         ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* Blocarea derularii cat timp un dialog e deschis, salvata din blocul de reset aruncat mai sus.
   Prefixata, ca sa nu revendicam cuvantul 'blocat' pe <body>: acolo se intalnesc toate temele
   si toate pluginurile. JS-ul cere acelasi nume, prin $sir_clase. */
body.ld-blocat { overflow: hidden; }

/* ARMURA SEGMENTULUI. Laboratorul se apara cu 'button,input{...inherit}', si acolo era de
   ajuns: nu exista alta foaie de stil. In pagina se incarca noua, iar a noastra e A DOUA.
   reset.css din hello-elementor vine DUPA ea si stapaneste orice <button> care nu se apara
   singur: culoare #c36, bordura de 1px, colturi de 3px, alt font-size, alt padding, nowrap.
   Are specificitate (0,0,1), exact cat regula laboratorului, deci castiga pe ORDINE.
   Laboratorul mai avea si un reset global, care il facea imun. Etapa 2 il arunca deliberat: in
   WordPress ar lovi Elementor si bara de admin. Aruncat fara inlocuitor insa, lasa segmentul
   descoperit. Masurat inainte de regula asta: 11 din 11 butoane portate primeau colturi
   rotunjite, iar 4 din 11 primeau roz, cele care se bazau pe color:inherit.
   :where() NU adauga specificitate, deci selectorii raman la (0,1,0), cat o clasa: bat
   reset-ul, care e mai slab, si pierd in fata regulilor laboratorului, tot (0,1,0) dar scrise
   mai jos. Nimic din afara celor trei radacini nu e atins. */
.ld-inscriere :where(button),
.ld-panou :where(button),
.ld-ov :where(button) { border-radius: 0; color: inherit; font-family: inherit;
	font-size: inherit; white-space: normal; }

/* HOVER-UL, a doua repriza a aceleiasi lupte, si aici ordinea NU mai ajuta.
   reset.css mai are o regula:  [type=button]:hover,button:hover{background-color:#c36;color:#fff}
   Are (0,2,0), atribut plus pseudo-clasa. Regulile de hover ale laboratorului nu stabilesc DELOC
   fundalul: spun doar "scoate gradientul" si se bazeaza pe cel din regula de baza, care are (0,1,0).
   Cine nu repeta, pierde. Rezultatul masurat: toate cele 11 butoane ale segmentului se faceau rosii
   la hover, in loc de violetul din laborator.
   Aici se reafirma fundalul si culoarea de BAZA la (0,2,0), cat regula lor, iar foaia noastra vine
   dupa a lor, deci castiga. Valorile sunt copiate din regulile de mai jos, nu alese acum.
   BLOCUL STA INAINTEA regulilor laboratorului, deliberat: hover-urile lui sunt tot (0,2,0) si trebuie
   sa castige pe ordine acolo unde chiar au ceva de spus, cum face .ld-cta--sec:hover cu textul alb. */
.ld-inscriere .ld-cta,
.ld-panou .ld-cta,
.ld-panou .ld-cod__rand button,
.ld-panou .ld-cod__confirma,
.ld-ov .ld-ov__x,
.ld-ov .ld-ov__inapoi,
.ld-ov .ld-bon__cta,
.ld-ov .ld-form__trimite { background-color: var(--brand-primary); color: #fff; }
.ld-inscriere .ld-cta--sec,
.ld-panou .ld-cta--sec { color: var(--brand-ink); }
.ld-panou .ld-met,
.ld-ov .ld-cant button { background-color: #fff; color: inherit; }
.ld-panou .ld-x { background-color: transparent; color: inherit; }

button,input{font-family:inherit;font-size:inherit;color:inherit}
.ld-fr{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500}
.ld-inscriere__tag{background:var(--brand-secondary);color:var(--brand-ink);padding:0 .15em}

/* ============================ SECTIUNEA DIN PAGINA ============================ */
.ld-inscriere__in{max-width:900px;margin:0 auto;padding:clamp(3.5rem,10vw,7rem) 1.5rem 55px;text-align:center}
/* ANTETUL NU MAI ARE SUPRASCRIERI, si asta e reparatia, nu o omisiune.
   Aveam trei reguli aici, copiate din laborator. Doua repetau cuvant cu cuvant valorile din
   css/06-section.css, deci nu faceau nimic; a treia schimba titlul.
   Ce stricau, vazut abia pe pagina livrata:
   1. SPATIEREA. Suprascrierea eyebrow-ului copia marimea si culoarea dar NU si `margin`, deci ramanea
      marginea temei, calc(2rem + 40px). Iar `margin-top:1.6rem` de pe titlu, adica spatierea voita de
      laborator, se pierdea prin colapsarea marginilor intre fratii adiacenti: castiga cea mai mare.
      Rezultat, un gol de ~72px in loc de ~26px, si nici macar consecvent cu restul paginii.
   2. MARIMEA. clamp(2rem, 5vw, 3.4rem) fata de clamp(3rem, 9vw, 90px) la toate celelalte segmente,
      adica jumatate. In laborator arata bine fiindca era singurul titlu de pe pagina; in homepage
      concureaza cu cinci segmente care il striveau.
   Fara ele, antetul cade pe conventia temei si se aseaza singur, corect si consecvent. Decizie a
   userului, luata dupa ce a vazut pagina in productie: initial ceruse pastrarea valorilor din
   laborator, apoi le-a vazut langa celelalte segmente. */
/* TITLUL NU MAI ARE MARIME PROPRIE, si nici eyebrow-ul. Amandoua cad pe conventia casei din
   css/06-section.css: clamp(3rem, 9vw, 90px) pe titlu, calc(2rem + 40px) sub eyebrow.
   Ce am incercat inainte si de ce a fost gresit: titlul intreg fusese coborat la scara lui
   .ld-statement, clamp(1.5rem, 3.2vw, 2.625rem), pe reperul dat de user, "acelasi font size cu «Un
   singur grup aduce impreuna toate competentele necesare loializarii»". Reperul era corect, doar ca
   se referea la RANDUL AL DOILEA, nu la tot titlul. Chenarul lui din captura incadra exact "Doar 110
   locuri in sala.", cu observatia ca marimea nu e ca a celorlalte headline-uri, ceea ce era adevarat
   si masurabil: 40,96px acolo fata de 115,2px la 'de ce', 'grup' si 'program', masurat in pagina la
   1280. Cele doua cerinte pareau contradictorii si sunt de fapt structura casei: eyebrow, titlu mare,
   .ld-statement dedesubt. Fraza a doua a iesit din <h2> in tasks/sections/70-inscriere.php si e acum
   .ld-statement, adica exact 40,96px, cat elementul aratat ca reper. */
/* GOLUL DE DEASUPRA eyebrow-ului, singura marime reglata in antet. Cardul aduce din laborator
   padding-top clamp(3.5rem, 10vw, 7rem), adica 112px la 1280. 55px il aduce la golul uniform de sus
   (cerut de user), la fel ca celelalte segmente. */
.ld-inscriere .ld-inscriere__in{padding-top:55px}
/* TAGUL GALBEN la aceeasi marime cu randul din care face parte. Blocul lui de pop-up (mai sus in
   fisier) ii da 1.15em, iar blocul de sectiune nu declara font-size deloc, deci castiga primul: la un
   rand de 40,96px cuvantul iesea la ~47px. Masurat in browser, nu presupus.
   Aici se vede si de ce userul a spus de trei ori ca marimea nu e reglata desi titlul era exact cat
   ceruse: se uita la "Conexiuni", care sare in ochi, nu la randul din jurul lui.
   Selectorul e pe invelis, nu pe titlu: tagul s-a mutat din <h2> in .ld-statement.
   line-height ramane 1.3, ca fondul galben sa nu stranga literele; el nu schimba marimea literei. */
.ld-inscriere__in .ld-inscriere__tag{font-size:1em;line-height:1.3}
/* Randurile cat mai egale, cerinta explicita a userului. text-wrap:balance lasa browserul sa aleaga
   punctele de rupere astfel incat randurile sa iasa aproximativ egale, in loc sa umple primul rand
   pana la capat si sa lase o coada scurta dedesubt. Se aplica doar blocurilor scurte, ceea ce si
   sunt astea trei. Titlul e in lista de cand a ajuns la 115,2px: pe doua randuri iesea 771px si
   367px, adica exact coada scurta reclamata la lede. Cu balance iese 441px si 699px, masurat in
   pagina; diferenta scade de la 404px la 258px. Nu e perfect, fraza are cinci cuvinte si nu exista
   taietura mai buna, dar e cea mai egala pe care o poate da. */
.ld-inscriere .ld-section__title,
.ld-inscriere .ld-section__lede,
.ld-inscriere .ld-actiuni__sub{text-wrap:balance}

/* Butonul principal. Gradientul de brand pornit din mov, taiat mai lat decat butonul ca sa poata
   aluneca la hover (background-image nu se anima intre doua valori, background-position da). */
/* Blocul de pret, aceeasi compozitie ca bara sticky de jos (css/98-bara-bilete.css:42-47):
   eticheta treptei, pretul, "+ TVA" si pretul intreg taiat sunt TOATE la aceeasi marime, si se
   deosebesc doar prin greutate si opacitate. Marimea difera de bara (acolo 22px, aici 2rem)
   fiindca aici e titlu de sectiune, nu bara de 55px; raportul dintre cele patru ramane identic.
   "+ TVA" nu se micsoreaza niciodata: bara are motivul scris in CSS, TVA mic langa un pret mare
   ascunde costul real. Eticheta e violet, nu galben ca in bara, fiindcă aici fundalul e alb. */
.ld-pret{margin-top:2.6rem;display:flex;align-items:baseline;justify-content:center;gap:.9rem;flex-wrap:wrap}
.ld-pret__k{font-size:2rem;font-weight:900;letter-spacing:.01em;text-transform:uppercase;color:var(--brand-primary)}
.ld-pret__nr{font-size:2rem;font-weight:900;letter-spacing:-.02em;line-height:1}
.ld-pret__tva{font-size:2rem;font-weight:400;opacity:.85}
.ld-pret__vechi{font-size:2rem;font-weight:400;opacity:.5}

.ld-actiuni{margin-top:2.2rem;display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.ld-actiuni__sub{margin:1.3rem auto 0;max-width:52ch;color:var(--brand-muted);font-size:.95rem;line-height:1.6}
/* Conventia de buton a site-ului, luata de la .cta-btn din hero si .ld-btn din css/95-buttons.css:
   colturi drepte (--radius e 0 in tema), gradient la 135 de grade, ZERO umbra in repaus, iar la
   hover se ridica 2px si capata o umbra difuza. Placa plina de dedesubt era o inventie locala si
   nu exista nicaieri altundeva pe site. Bordura transparenta de 1px e acolo ca ghost-ul de langa
   sa aiba exact aceeasi inaltime, exact cum face .ld-btn in tema. */
.ld-cta{border:1px solid transparent;cursor:pointer;color:#fff;
  background-color:var(--brand-primary);
  background-image:linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%);
  font-size:1.235rem;font-weight:600;padding:1.17rem 2.21rem;
  transition:transform .2s ease,box-shadow .2s ease,background-image .2s ease}
/* REGULA UNICA a butoanelor din lab: gradient mov->magenta in repaus, mov sters plin la hover.
   Movul plin sta pe background-color, gradientul deasupra pe background-image, iar hover-ul doar
   scoate gradientul si lasa culoarea sa se vada.
   ATENTIE, comutarea e INSTANTANEE, nu in fade: background-image nu se interpoleaza intre "none"
   si un gradient, deci `transition` pe el nu produce nicio tranzitie. Singura cale spre un fade
   real e gradientul pus pe un ::before si stins din opacity. Nefacut deliberat, ar fi insemnat
   pseudo-element si z-index pe fiecare din cele sase butoane. Ridicarea de 2px si umbra CHIAR se
   animeaza, deci hover-ul nu pare rupt. */
.ld-cta:hover{background-image:none;transform:translateY(-2px);box-shadow:0 12px 30px rgba(120,104,198,.4)}
/* Contur de 10px in gradient. border-color nu accepta decat culori, deci conturul se face din
   DOUA fundaluri suprapuse: albul decupat la padding-box (interiorul) si gradientul decupat la
   border-box (marginea). Bordura ramane transparenta si lasa gradientul sa se vada prin ea.
   Padding-ul scade cu 2px, diferenta fata de bordura de 1px a butonului principal, ca cele doua
   sa ramana exact la aceeasi inaltime pe rand. */
.ld-cta--sec{color:var(--brand-ink);border:3px solid transparent;
  padding:calc(1.17rem - 2px) calc(2.21rem - 2px);background-color:var(--brand-primary);
  background-image:linear-gradient(#fff,#fff),linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%);
  background-origin:border-box;background-clip:padding-box,border-box}
/* Acelasi principiu ca la primar: cade umplutura alba si iese movul sters de dedesubt, deci
   secundarul se umple la hover in loc sa ramana gol. */
/* background-clip:border-box e OBLIGATORIU aici, nu decorativ. Cu background-image:none ramane un
   singur strat de fundal, iar lista `padding-box, border-box` se reduce atunci la PRIMA valoare,
   padding-box. Culoarea plina s-ar opri la marginea interioara, cei 3px de bordura ar ramane
   nepictati si prin ei s-ar vedea albul de dedesubt: exact inelul alb apărut la hover. */
.ld-cta--sec:hover{background-image:none;background-clip:border-box;color:#fff;
  transform:translateY(-2px);box-shadow:0 12px 30px rgba(120,104,198,.4)}
/* Varianta mica a aceluiasi buton, pentru panou. Nu o alta clasa cu alt aspect: acelasi contur
   gradient, aceeasi umplere la hover, doar text si padding mai mici. Compensarea de 2px se
   recalculeaza pentru padding-ul mic, altfel bordura de 3px il ingrasa fata de fratii lui. */
.ld-cta--mic{font-size:1rem;padding:.85rem 1.6rem}
.ld-cta--sec.ld-cta--mic{padding:calc(.85rem - 2px) calc(1.6rem - 2px)}

/* ============================ STRATURI: PANOU + POPUPURI ============================
   visibility in loc de display: cu display:none nu porneste nicio tranzitie, fiindca elementul
   nu are stare anterioara de la care sa plece. Intarzierea de pe visibility la inchidere tine
   panoul in pagina cat aluneca afara. */
.ld-panou{position:fixed;inset:0;z-index:900;visibility:hidden;transition:visibility 0s .42s}
.ld-panou.on{visibility:visible;transition:visibility 0s}
.ld-panou__veil{position:absolute;inset:0;background:rgba(20,18,38,.55);opacity:0;transition:opacity .35s ease}
.ld-panou.on .ld-panou__veil{opacity:1}
/* 880px, masurat pe ecranul userului: panoul se oprea la ~1237 dintr-un viewport de ~1905, deci
   668 latime; linia ceruta era pe la 1040, adica ~865 latime. Rotunjit in sus la 880.
   Plafonul ramane 94vw, ca pe telefon sa nu incerce 880px pe un ecran de 390. */
.ld-panou__in{position:absolute;top:0;right:0;bottom:0;width:min(94vw,880px);background:#fff;
  overflow-y:auto;transform:translateX(100%);transition:transform .42s cubic-bezier(.22,1,.36,1);
  box-shadow:-30px 0 80px rgba(0,0,0,.3)}
.ld-panou.on .ld-panou__in{transform:none}
.ld-panou__cap{background:var(--brand-ink);color:#fff;padding:2.2rem 2.2rem 1.9rem;position:relative}
.ld-panou__cap p{font-family:var(--mono);font-size:.91rem;letter-spacing:.22em;color:var(--brand-secondary)}
/* Titlul, un singur font pe tot randul: accentul Fraunces italic a fost scos, nu doar neutralizat,
   ca sa nu ramana o regula moarta care sa reinvie la primul <em> pus din reflex. */
.ld-panou__cap h2{margin-top:.7rem;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ld-x{position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;font-size:1.9rem;
  line-height:1;color:inherit;opacity:.7}
.ld-x:hover{opacity:1}
.ld-panou__corp{padding:2.2rem}

/* Cele doua metode de plata. Carduri mari, cu ce se intampla dupa scris pe ele: diferenta reala
   dintre card si OP nu e forma de plata, ci CAND e sigur locul. */
.ld-met{width:100%;text-align:left;background:#fff;border:2px solid var(--line);cursor:pointer;
  padding:1.7rem 1.6rem;transition:.16s;display:block}
.ld-met+.ld-met{margin-top:1rem}
.ld-met:hover{border-color:var(--mov);transform:translateY(-2px)}
.ld-met__k{display:block;font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;color:var(--brand-primary)}
.ld-met b{display:block;margin-top:.55rem;font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
/* Fiecare propozitie e propriul bloc, nu despartita cu <br>: asa a doua fraza nu mai porneste
   din mijlocul primului rand.
   Clasa proprie, NU ".ld-met span": selectorul ala avea specificitate (0,1,1), peste (0,1,0) al lui
   .ld-met__k, deci ii fura etichetei "INSTANT" marimea si culoarea si o randa gri in loc de violet. */
.ld-met__d{display:block;margin-top:.5rem;font-size:1.05rem;color:var(--brand-ink);line-height:1.5}
.ld-met__d+.ld-met__d{margin-top:.3rem}
/* Culorile inversate fata de prima versiune: randul intai ia ink-ul plin, al doilea gri inchis.
   Ingrosarea a ramas pe randul al doilea, deci fiecare rand se impune altfel, unul prin culoare
   si celalalt prin greutate, si niciunul nu dispare in celalalt. */
.ld-met__d--tare{color:var(--muted-inchis);font-weight:700}
/* Codul NU e a treia metoda de plata, e o cale proprie de intrare, deci sta sub cele doua carduri
   si cantareste mai putin: fundal, nu chenar gros, si titlu de marimea unei intrebari, nu a unei
   oferte. */
.ld-cod{margin-top:1.6rem;padding:1.3rem 1.4rem;background:var(--brand-bg-alt);border:1px solid var(--line)}
/* Titlul e <button> din 2026-08-13, fiindca pliaza blocul; arata insa exact ca titlul dinainte, deci
   se resetează stilul implicit de buton si se intinde pe toata latimea, ca zona de click sa fie tot
   randul, nu doar cele doua cuvinte. */
.ld-cod__t{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:0;border:0;background:none;text-align:left;cursor:pointer;
  font-size:1.05rem;font-weight:700;color:inherit;font-family:inherit}
.ld-cod__corp[hidden]{display:none}
/* Sageata, desenata din doua laturi de chenar rotite: fara imagine, fara font de iconite. Se
   intoarce cand blocul e deschis. */
.ld-cod__sageata{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--brand-primary);
  border-bottom:2px solid var(--brand-primary);transform:rotate(45deg);margin-bottom:4px;
  transition:transform .2s ease}
.ld-cod__t[aria-expanded="true"] .ld-cod__sageata{transform:rotate(-135deg);margin-bottom:-2px}
/* Doua coloane, sase celule, deci trei randuri: cod si nume, telefon si email, companie si buton.
   Ultimul rand aseaza actiunea LANGA ultimul camp, nu pe toata latimea: ritmul neregulat e cerut,
   nu accidental. Sub 520px se strange pe o coloana, altfel campurile ies mai inguste decat
   continutul lor si formularul devine nefolosibil pe telefon. */
.ld-cod__form{margin-top:.8rem}
.ld-cod__grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ld-cod__camp{min-width:0;border:2px solid var(--line);background:#fff;padding:.75rem .9rem;font-size:1rem}
.ld-cod__camp:focus{outline:0;border-color:var(--mov)}
/* Doar CODUL e monospace si cu versale: acolo forma conteaza si se citeste caracter cu caracter.
   Numele, telefonul si emailul unui om nu se scriu cu majuscule. */
.ld-cod__camp[name="cod"]{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* Acordul: bifa si textul pe acelasi rand, cu bifa aliniata la PRIMA linie de text, nu la mijlocul
   blocului, ca sa nu pluteasca atunci cand textul trece pe doua randuri. */
/* Bifa de marketing din bon foloseste aceeasi asezare ca acordul din formularul de cod: acelasi
   panou, aceeasi marime de text, deci selectori impartiti in loc de reguli duplicate. */
.ld-cod__acord,.ld-bon__acord{margin-top:.9rem;display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;line-height:1.45}
.ld-cod__acord input,.ld-bon__acord input{flex:0 0 auto;margin-top:.2rem;width:1.05rem;height:1.05rem;accent-color:var(--brand-primary)}
.ld-cod__acord a,.ld-bon__acord a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
/* DUPA REVENDICARE REUSITA formularul dispare si ramane doar confirmarea.
   Pana pe 2026-08-12 campurile ramaneau pe ecran, doar dezactivate: omul isi vedea propriile date
   gri si un buton mort sub un mesaj de reusita. Arata a eroare, nu a confirmare, si invita la o a
   doua apasare care oricum ar fi fost refuzata cu "codul a fost deja folosit".
   Se ascunde si intrebarea de deasupra: "Ai un cod de acces?" nu mai are sens dupa ce l-ai folosit.
   Clasa sta pe .ld-cod, nu pe form, fiindca mesajul e frate cu formularul, nu copil. */
.ld-cod.gata .ld-cod__t,
.ld-cod.gata .ld-cod__form{display:none}
/* Ramasa singura in caseta, confirmarea se aseaza pe mijloc si respira. Captuseala verticala tine
   inaltimea casetei apropiata de ce era, ca panoul sa nu sara cand formularul dispare. */
.ld-cod.gata .ld-cod__raspuns.ok{
	margin:0;
	padding:1.4rem .5rem;
	text-align:center;
	font-size:1.25rem;
	line-height:1.45;
}

/* FARA display:none pe zona asta, si e o corectie, nu o preferinta.
   Elementul poarta role="status", adica e o zona live: cititoarele de ecran o urmaresc si anunta
   singure ce apare in ea. Dar `display:none` o SCOATE din arborele de accesibilitate, deci nu mai e
   urmarita, deci textul pus in ea mai tarziu nu se anunta niciodata. Un om nevazator introducea
   codul, apasa, si nu afla daca a mers: nici la reusita, nici la eroare. Gasit 2026-08-12.
   Acum ramane mereu in pagina, goala. Cat e goala nu ocupa spatiu, prin :empty, deci nu se schimba
   nimic vizual. Clasele .ok si .nu raman, dar DOAR pentru culoare. */
.ld-cod__raspuns{margin-top:.7rem;font-size:.95rem;line-height:1.5}
.ld-cod__raspuns:empty{margin:0}
.ld-cod__raspuns.ok{color:var(--brand-ink);font-weight:700}
/* Rosu de eroare: singura culoare din lab care nu vine din paleta site-ului. Tema nu are token
   de eroare, iar mesajul asta chiar trebuie sa citeasca a refuz. De discutat la portare. */
.ld-cod__raspuns.nu{color:#B3261E}
/* Focusul ateriza pe ea dupa reusita, deci trebuie sa se vada ca e focusata, dar fara conturul gros
   de buton: e text, nu comanda. */
.ld-cod__raspuns:focus{outline:2px solid var(--mov);outline-offset:4px}
/* Dupa ce locul e confirmat fara plata, plata nu mai are ce cauta in panou: cardurile se sting.
   Altfel omul care tocmai si-a luat locul ar fi trimis mai departe catre Stripe. */
.ld-panou.cod-total .ld-met{opacity:.3;pointer-events:none}
.ld-cod__confirma{border:0;cursor:pointer;color:#fff;
  background-color:var(--brand-primary);
  background-image:linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%);
  font-size:1rem;font-weight:600;padding:.75rem 1rem;
  transition:transform .2s ease,box-shadow .2s ease,background-image .2s ease}
.ld-cod__confirma:hover{background-image:none;transform:translateY(-2px);box-shadow:0 12px 30px rgba(120,104,198,.4)}
/* Cat timp cererea e pe drum, butonul nu mai poate fi apasat a doua oara: a doua trimitere ar
   consuma degeaba o incercare din limita de rata, pe acelasi cod. */
.ld-cod__confirma[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
@media (max-width:520px){.ld-cod__grid{grid-template-columns:1fr}}

/* Trei greutati descrescatoare: intrebarea, explicatia, actiunea. Intrebarea e cea care opreste
   ochiul, deci ea e cea mare; explicatia sta intre ea si textul curent din panou. */
/* Textul si butonul pe acelasi rand; textul ia spatiul ramas, butonul sta la dreapta. Sub 260px
   de text disponibil rândul se rupe singur si butonul coboara, deci pe telefon nu se striveste.
   Butonul NU mai are reguli proprii aici: folosea `.ld-panou__alt button`, cu specificitate (0,1,1),
   care batea `.ld-cta--sec` (0,1,0) si ii impunea conturul negru. Exact capcana de la `.ld-met span`. */
.ld-panou__alt{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.ld-panou__alt-txt{flex:1 1 260px}
.ld-panou__alt-t{font-size:1.25rem;font-weight:800;letter-spacing:-.01em;color:var(--brand-ink)}
.ld-panou__alt-d{margin-top:.4rem;font-size:1.05rem;color:var(--brand-muted);line-height:1.55}

/* Popupurile. Aceeasi carcasa pentru bon, pentru OP si pentru aprobare. */
.ld-ov{position:fixed;inset:0;z-index:1100;visibility:hidden;transition:visibility 0s .3s}
.ld-ov.on{visibility:visible;transition:visibility 0s}
.ld-ov__veil{position:absolute;inset:0;background:rgba(20,18,38,.6);opacity:0;transition:opacity .3s ease}
.ld-ov.on .ld-ov__veil{opacity:1}
.ld-ov__wrap{position:absolute;inset:0;overflow-y:auto;padding:2.5rem 1rem;display:flex;
  align-items:flex-start;justify-content:center}
/* --scara e pusa din JS dupa ce masoara cat loc e in fereastra. Sta intr-o variabila, nu direct
   pe transform, ca sa nu calce animatia de intrare: aceeasi proprietate transform e folosita si
   de tranzitia de deschidere, iar un style inline scris de JS ar fi anulat-o.
   transform-origin sus, ca bonul sa se micsoreze de la antet in jos, nu din centru. */
.ld-ov__card{position:relative;width:100%;opacity:0;transform:translateY(18px) scale(.98);
  transform-origin:top center;
  transition:opacity .3s ease,transform .34s cubic-bezier(.22,1,.36,1)}
.ld-ov.on .ld-ov__card{opacity:1;transform:scale(var(--scara,1))}
/* Inchiderea, vizibila. Pana acum popup-urile se inchideau doar din val sau din Escape, adica din
   doua gesturi pe care nimeni nu le are scrise pe ecran. Sta INAUNTRU coltului, nu suprapus peste
   el: .ld-ov__wrap are overflow pe verticala, deci si orizontala devine auto, iar un buton scos in
   afara cu top/right negativ ar fi fost taiat sau ar fi pornit o bara de derulare laterala. */
.ld-ov__x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;line-height:1;
  background-color:var(--brand-primary);
  background-image:linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%);
  transition:transform .2s ease,box-shadow .2s ease,background-image .2s ease}
.ld-ov__x:hover{background-image:none;transform:translateY(-2px);box-shadow:0 8px 20px rgba(120,104,198,.45)}
/* Intoarcerea, mutata in coltul de sus. Statea sub bon, deci pe orice ecran mai scund decat bonul
   cadea sub linia de plutire si trebuia ghicita prin derulare. Sus, ramane vizibila din prima
   indiferent de inaltimea ferestrei, langa perechea ei, inchiderea. */
.ld-ov__inapoi{position:absolute;top:12px;left:12px;z-index:2;height:38px;padding:0 1rem;border:0;
  cursor:pointer;display:flex;align-items:center;gap:.4rem;color:#fff;font-size:.88rem;font-weight:700;
  background-color:var(--brand-primary);
  background-image:linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%);
  transition:transform .2s ease,box-shadow .2s ease,background-image .2s ease}
.ld-ov__inapoi:hover{background-image:none;transform:translateY(-2px);box-shadow:0 8px 20px rgba(120,104,198,.45)}

/* ---- BONUL, varianta B, cu tot ce a ramas dupa iteratii ---- */
/* 655px = 504 plus 30%. Doar max-width, deci pe telefon nu se schimba nimic: acolo latimea o
   dicteaza oricum viewportul minus padding-ul lui .ld-ov__wrap. */
.ld-bon{max-width:655px;margin:0 auto;background:#fff;padding:4rem 2.2rem 2rem;position:relative;
  font-family:var(--mono);font-size:1rem;line-height:1.55;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.ld-bon__zig{position:absolute;left:0;right:0;bottom:-13px;width:100%;height:14px;display:block;fill:#fff}
.ld-bon__cap{text-align:center}
.ld-bon__cap h3{font-size:1.3rem;font-weight:700;letter-spacing:.16em}
.ld-bon__cap p{margin-top:.45rem;font-size:.84rem;letter-spacing:.08em;color:var(--brand-muted)}
.ld-bon__rupt{margin:1.2rem 0;border-top:1px dashed rgba(26,26,46,.35)}
.ld-bon__linie{display:flex;justify-content:space-between;gap:1rem}
/* ASCUNDEREA RANDURILOR DE REDUCERE, si nu e o subtilitate de stil: e chiar capcana scrisa mai jos,
   la .ld-op-red__linie. display:flex de deasupra BATE display:none pe care browserul il da lui
   [hidden], deci un rand marcat hidden ramanea VIZIBIL. Pe 2026-09-03 asta a scos pe ecran de doua
   ori "RECOMPENSA DIN JOC" plus un total ramas de la starea dinainte, adica sume vechi langa pretul
   curent. Proba de atunci verificase PROPRIETATEA hidden, nu ce se vede, si a trecut. */
.ld-bon__linie[hidden]{display:none}
.ld-bon__linie span:last-child{white-space:nowrap}
/* Moneda de pe fiecare rand, adaugata 2026-08-07. Acelasi tratament ca <small> de pe randul TOTAL,
   doar la scara randului: mai mica decat cifra, distantata, si stinsa, ca sa nu concureze cu suma.
   Fara regula asta ar fi ramas pe <small> implicit al browserului, adica doar mai mic. */
.ld-bon__linie small{font-size:.78em;letter-spacing:.1em;font-weight:400;opacity:.6}
.ld-bon__linie--eco{color:var(--brand-primary);font-weight:700}
.ld-bon__linie--gratis{margin-top:.35rem;color:var(--brand-muted)}
.ld-bon__linie--gratis span:last-child{color:var(--brand-ink)}
.ld-bon__linie--eco+.ld-bon__linie--gratis{margin-top:1rem}
.ld-bon__total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.7rem;
  font-weight:700;letter-spacing:-.01em}
.ld-bon__total small{font-size:.84rem;letter-spacing:.14em;font-weight:400;color:var(--brand-muted)}
/* Randul in lei, sub total. COMENTARIUL DE AICI ERA INVERS si a fost corectat pe 2026-08-07: scria
   ca suma incasata ramane cea in euro si ca prin Stripe se debiteaza euro. Nu mai e adevarat de la
   trecerea pe incasare in lei. Se debiteaza LEI, suma din randul asta, iar cea in euro e pretul
   convenit. De-aia randul si-a pierdut semnul "≈" si a capatat numele "DE PLATĂ ÎN LEI". */
.ld-bon__lei{margin-top:.6rem;display:flex;justify-content:space-between;align-items:baseline;
  gap:.8rem;flex-wrap:wrap;color:var(--brand-muted);font-size:1rem}
/* Tagul galben al temei, copiat din .ld-inscriere__tag (css/70-inscriere.css): acelasi fond
   --brand-secondary, aceeasi culoare de text, acelasi padding de .14em si acelasi
   box-decoration-break, ca sa arate identic daca vreodata se rupe pe doua randuri.
   SINGURA abatere, deliberata: nu trece pe Fraunces italic. Pe homepage tagul imbraca un cuvant
   dintr-un titlu; aici imbraca cifre intr-un bon monospace, iar o serifa cursiva le-ar scoate si
   din coloana, si din caracterul hartiei. Fondul galben face oricum toata treaba de accent.
   Marimea randului a urcat de la .9rem la 1rem: tagul e cel mai puternic accent al temei, nu are
   ce cauta pe cel mai mic si mai sters rand de pe bon. */
.ld-bon__lei-tag{background:var(--brand-secondary);color:var(--brand-ink);padding:0 .14em;font-weight:700;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap}
.ld-bon__lei-curs{font-size:.78rem}
.ld-bon__cant{margin:1.2rem 0;padding:.7rem 0;display:flex;align-items:center;justify-content:space-between;
  border-top:1px dashed rgba(26,26,46,.35);border-bottom:1px dashed rgba(26,26,46,.35)}
.ld-bon__cant>span{font-size:.94rem;letter-spacing:.08em}
.ld-bon__nota{margin-top:1.1rem;font-size:.96rem;line-height:1.65;color:var(--brand-muted)}
/* Intrat si el in regula unica: gradient in repaus, mov sters la hover. Placa plina de dedesubt
   si gradientul alunecator au iesit, erau singurul buton din lab care se purta altfel. */
.ld-bon__cta{margin-top:1.5rem;width:100%;border:0;cursor:pointer;color:#fff;
  background-color:var(--brand-primary);
  background-image:linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%);
  font-family:var(--mono);font-size:1.26rem;font-weight:700;letter-spacing:.12em;padding:1.2rem 1rem;
  transition:transform .2s ease,box-shadow .2s ease,background-image .2s ease}
.ld-bon__cta:hover{background-image:none;transform:translateY(-2px);box-shadow:0 12px 30px rgba(120,104,198,.4)}
.ld-bon__stripe{margin-top:1rem;text-align:center;font-size:.94rem;letter-spacing:.1em;color:var(--brand-muted)}

.ld-cant{display:flex;align-items:center;gap:.25rem}
.ld-cant button{width:40px;height:40px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:1.15rem;font-weight:700;line-height:1;transition:.15s}
.ld-cant button:hover:not(:disabled){background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}
.ld-cant button:disabled{opacity:.3;cursor:not-allowed}
.ld-cant output{min-width:44px;text-align:center;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.ld-bon .ld-cant button{font-family:var(--mono);border-color:rgba(26,26,46,.28)}
.ld-bon .ld-cant output{font-family:var(--mono)}

/* ---- FORMULARE: OP si aprobare. Aceeasi hartie ca bonul, ca sa se vada ca sunt acelasi flux. ---- */
/* padding-top 4rem, nu 2.4: sub el trec cele doua butoane din colturi (12px sus plus 38 inaltime),
   iar antetul trebuie sa inceapa dedesubtul lor, nu peste. */
.ld-form{max-width:620px;margin:0 auto;background:#fff;padding:4rem 2.2rem 2.2rem;position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.ld-form--mic{max-width:520px}
.ld-form__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--brand-primary)}
.ld-form__t{margin-top:.7rem;font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ld-form__t em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500}
/* Cuvantul accentuat, in cele doua locuri unde e cerut: titlul ordinului de plata (2026-08-12) si
   titlul confirmarilor (2026-08-13). Mai mare decat restul randului si pe fond galben, acelasi
   tratament ca .brand-highlight din pagina.

   DE CE URCA MARIMEA, nu doar culoarea: Fraunces are ochiul literei mai mic decat DM Sans, deci la
   acelasi font-size cuvantul italic PARE scris mai mic decat vecinii lui. Cei 1.28em compenseaza
   optic, nu decoreaza; fara ei, accentul arata a greseala, cum s-a si vazut pe confirmarea cererii
   de aprobare.

   Selectorul NU e .ld-form__t em: cele trei dialoguri impart clasa aia, iar highlight-ul e cerut doar
   unde e cerut. box-decoration-break tine fundalul intreg cand cuvantul cade pe doua randuri; fara
   el, a doua bucata ar pierde marginile din stanga si dreapta. */
#opTitlu em,
.ld-gata h3 em{font-size:1.28em;line-height:1;background:var(--brand-secondary);color:var(--brand-ink);
  padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ld-form__d{margin-top:.9rem;color:var(--brand-muted);line-height:1.6;font-size:.95rem}
.ld-grid{margin-top:1.8rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ld-camp{display:flex;flex-direction:column;gap:.4rem}
.ld-camp--lat{grid-column:1/-1}
/* Eticheta DEASUPRA campului, mereu vizibila: un placeholder care dispare la tastare lasa omul
   fara reper cand reciteste formularul inainte de trimitere. */
.ld-camp label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--brand-muted)}
.ld-camp input{border:0;border-bottom:2px solid var(--line);padding:.6rem 0;background:none;
  font-size:1.02rem;transition:border-color .15s}
.ld-camp input:focus{outline:0;border-color:var(--mov)}
.ld-form__bara{margin-top:1.4rem;padding-top:1.2rem;border-top:1px dashed rgba(26,26,46,.3);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ld-form__bara span{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--brand-muted)}
.ld-form__bara b{font-family:var(--mono);font-size:1.3rem}
/* Suma si moneda stau lipite, ca perechea de pe randul TOTAL al bonului: bara e space-between, deci
   fara wrapper "EUR" ar fi zburat la capatul opus cifrei pe care o masoara. Marimea monedei se scrie
   explicit, fiindca span-ul care o poarta cade sub regula de deasupra si ar micsora-o de doua ori. */
.ld-form__bara .ld-form__suma{display:inline-flex;align-items:baseline;gap:.4rem;font-size:inherit}
.ld-form__bara .ld-form__suma small{font-family:var(--mono);font-size:.84rem;letter-spacing:.14em;
  font-weight:400;color:var(--brand-muted)}
/* ---- Defalcarea reducerilor pe ordinul de plata (2026-08-26) ----
   Ascunsa pana cand serverul spune ca e ceva de aratat: un bloc gol cu chenar deasupra ar fi pus o
   linie in plus sub campuri pentru toata lumea, iar cei mai multi nu au niciun cod. */
.ld-op-red{display:none;margin-top:1.3rem;padding-top:1rem;border-top:1px dashed rgba(26,26,46,.3)}
.ld-op-red.on{display:block}
.ld-op-red__linie{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--brand-muted);margin-bottom:.55rem}
.ld-op-red__linie:last-child{margin-bottom:0}
.ld-op-red__linie b{font-family:var(--mono);font-size:.98rem;color:var(--brand-primary)}
/* Randul ascuns chiar dispare. hidden e pus din JS, dar regula de mai sus e display:flex, iar o
   declaratie de display din foaia autorului BATE display:none pe care browserul il da lui [hidden].
   Fara randul asta, randurile reducerii s-ar vedea si cand nu exista nicio reducere. */
.ld-op-red__linie[hidden]{display:none}
/* Mesajul de sub campul de cod. Gol cat timp nu s-a spus nimic; fara :empty ar lasa un rand alb sub
   camp de la prima randare, exact problema rezolvata la .ld-form__raspuns. */
/* Codul se scrie cu majuscule vizual, iar forma canonica o face serverul. text-transform, NU o
   transformare din JS la fiecare tasta: aceea muta cursorul la capat si face codul de netastat pe
   telefon. Sta AICI si nu in atributul style al campului fiindca proba 1:1 numara stilurile in
   linie, si pe buna dreptate: un style scapat in markup e primul pas spre o foaie de stil imprastiata. */
#opCod{text-transform:uppercase;letter-spacing:.06em}
.ld-op-cod__msg{margin:.45rem 0 0;font-size:.86rem;line-height:1.5}
.ld-op-cod__msg:empty{margin:0}
.ld-op-cod__msg.ok{color:var(--brand-primary)}
.ld-op-cod__msg.nu{color:#B3261E}
/* Acelasi buton ca in sectiune: gradient 135 de grade, fara umbra in repaus, ridicare la hover. */
.ld-form__trimite{margin-top:1.6rem;width:100%;border:0;cursor:pointer;color:#fff;
  background-color:var(--brand-primary);
  background-image:linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%);
  font-size:1.1rem;font-weight:600;padding:1.15rem 1rem;
  transition:transform .2s ease,box-shadow .2s ease,background-image .2s ease}
.ld-form__trimite:hover{background-image:none;transform:translateY(-2px);box-shadow:0 12px 30px rgba(120,104,198,.4)}
.ld-form__trimite:disabled{opacity:.6;cursor:progress;transform:none;box-shadow:none}
/* Raspunsul serverului la cererea de proforma. Gol cat timp nu s-a spus nimic, deci nu lasa un rand
   alb sub buton: fara :empty, marginea ar impinge textul marunt in jos de la prima randare. */
.ld-form__raspuns{margin-top:.9rem;font-size:.88rem;line-height:1.5}
.ld-form__raspuns:empty{margin:0}
.ld-form__raspuns.ok{color:var(--brand-primary)}
.ld-form__raspuns.nu{color:#B3261E}
/* Campul-capcana. NU display:none si nu hidden: unele scripturi automate sar peste campurile ascunse
   asa, tocmai fiindca stiu ce inseamna. Scos din pagina prin pozitionare, ramane "vizibil" pentru
   ele si invizibil pentru om, iar aria-hidden si tabindex il tin departe de tastatura si de
   cititoarele de ecran. */
.ld-capcana{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ld-form__mic{margin-top:1rem;font-size:.82rem;color:var(--brand-muted);line-height:1.6}
/* Confirmarea inlocuieste formularul in aceeasi carcasa, ca sa nu apara al treilea strat. */
.ld-gata{display:none;text-align:center;padding:1.5rem 0 .5rem}
.ld-gata h3{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.ld-gata h3 em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500}
.ld-gata p{margin:1rem auto 0;max-width:44ch;color:var(--brand-muted);line-height:1.65}
.ld-form.trimis .ld-form__continut{display:none}
.ld-form.trimis .ld-gata{display:block}

@media (max-width:620px){
  .ld-grid{grid-template-columns:1fr}
  .ld-form{padding:3.6rem 1.4rem 1.6rem}
  .ld-bon{padding:3.6rem 1.4rem 1.6rem}
}
/* AUTORESIZE PE INALTIME. Bonul are ~20 de randuri; pe un laptop scund depaseste fereastra si
   butonul de plata ramane sub linia de plutire. Pragurile sunt pe max-height, nu pe max-width:
   problema e inaltimea ferestrei, nu latimea ecranului, si un laptop de 1920x800 pica exact aici.
   Se strang intai spatiile, apoi si corpul de litera, in ordinea asta: spatiul se pierde mai usor
   decat lizibilitatea. */
@media (max-height:900px){
  .ld-ov__wrap{padding:1.4rem 1rem}
  .ld-bon{padding:3.4rem 2rem 1.6rem;font-size:.94rem}
  .ld-bon__rupt{margin:.9rem 0}
  .ld-bon__cant{margin:.9rem 0;padding:.55rem 0}
  .ld-bon__cap h3{font-size:1.15rem}
  .ld-bon__total{font-size:1.45rem}
  .ld-bon__cta{font-size:1.12rem;padding:1rem}
  .ld-bon__nota{font-size:.88rem}
}
@media (max-height:760px){
  .ld-bon{padding:3.2rem 1.8rem 1.4rem;font-size:.88rem}
  .ld-bon__rupt{margin:.7rem 0}
  .ld-bon__cant{margin:.7rem 0;padding:.45rem 0}
  .ld-bon__cap h3{font-size:1.05rem}
  .ld-bon__cap p{font-size:.76rem}
  .ld-bon__total{font-size:1.3rem}
  .ld-bon__cta{font-size:1rem;padding:.85rem}
  .ld-bon__nota{font-size:.82rem}
  .ld-bon__stripe{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .ld-cta,.ld-bon__cta,.ld-form__trimite,.ld-met,.ld-panou__in,.ld-ov__card{transition:none}
}

/* ==== REDUCEREA DIN JOC, abatere declarata (2026-08-05). Schelet umplut de JS: fara jocul din hero
   terminat sau fara JS, totul ramane ascuns si bonul arata exact ca in laborator. Randul reducerii
   refoloseste infatisarea reducerii early bird (--eco); aici sunt doar vizibilitatea si piesele noi.
   Declarat in tasks/_proba_1la1.php, sectiunea ABATERI. ==== */
.ld-bon__joc, .ld-bon__ident, .ld-bon__joc-msg { display: none; }
.ld-bon__joc.on, .ld-bon__ident.on, .ld-bon__joc-msg.on { display: block; }

/* Totalul de plata poarta cipul galben (clasa .ld-bon__lei-tag e pusa in markup); cipul de pe
   randul aproximativ se stinge prin JS cand reducerea e activa, ca accentul sa arate ce se
   plateste efectiv, nu suma dinaintea reducerii. */
.ld-bon__lei-tag--stins { background: none; color: inherit; font-weight: 400; }

/* ==== BONUL: +20% lateral (655 -> 786px) si +15% pe TOATE corpurile de litera (cerinta user,
   2026-08-06). Valorile sunt cele ORIGINALE din blocul portat, inmultite cu 1.15 si rotunjite la
   doua zecimale; randurile de linie mostenesc baza, deci cresc singure. Randul aproximativ si
   cursul erau deja exact la +15% (1.15rem si .9rem), raman. Randurile reducerii stau la 1.15em
   RELATIV la baza marita, deliberat: blocul de plata ramane accentul bonului. Oglinzile media de
   mai jos pastreaza autoresize-ul pe inaltime, tot la +15% fata de valorile lor originale; fara
   ele, suprascrierea de aici, venind mai tarziu in cascada, ar fi omorat strangerea pe laptopuri
   scunde. Cuplajul vertical ramane: bon mai inalt inseamna scara mai mica pe ferestre scunde. */
/* A doua treapta (+15% peste prima, cerinta user 2026-08-06): net fata de original, latimea
   655 -> 904px (+38%) si literele la 1.3225x. Aceleasi reguli, doar valorile inmultite. */
.ld-bon { max-width: 904px; font-size: 1.32rem; }
.ld-bon__lei { font-size: 1.32rem; }
.ld-bon__lei-curs { font-size: 1.04rem; }
.ld-bon__joc { font-size: 1.15em; }
.ld-bon__cap h3 { font-size: 1.73rem; }
.ld-bon__cap p { font-size: 1.12rem; }
.ld-bon__total { font-size: 2.25rem; }
.ld-bon__total small { font-size: 1.12rem; }
.ld-bon__cant > span { font-size: 1.24rem; }
.ld-bon__nota { font-size: 1.27rem; }
.ld-bon__cta { font-size: 1.67rem; }
.ld-bon__stripe { font-size: 1.24rem; }
.ld-bon .ld-cant button, .ld-bon .ld-cant output { font-size: 1.52rem; }
/* Campurile Email/Telefon ale reducerii imprumuta .ld-cod__camp (1rem in formularul de cod);
   scopat pe bon ca sa creasca odata cu el, fara sa atinga formularul de cod din panou. */
.ld-bon .ld-cod__camp { font-size: 1.32rem; }
@media (max-height:900px){
  .ld-bon{font-size:1.24rem}
  .ld-bon__cap h3{font-size:1.52rem}
  .ld-bon__total{font-size:1.92rem}
  .ld-bon__cta{font-size:1.48rem}
  .ld-bon__nota{font-size:1.16rem}
}
@media (max-height:760px){
  .ld-bon{font-size:1.16rem}
  .ld-bon__cap h3{font-size:1.39rem}
  .ld-bon__cap p{font-size:1rem}
  .ld-bon__total{font-size:1.73rem}
  .ld-bon__cta{font-size:1.32rem}
  .ld-bon__nota{font-size:1.08rem}
  .ld-bon__stripe{font-size:1.06rem}
}

/* Identitatea reducerii, pe bon, inaintea butonului de plata. Campurile refolosesc .ld-cod__camp,
   ca sa nu se nasca un al doilea stil de input in acelasi panou. */
.ld-bon__ident { margin: 0 0 .9rem; text-align: left; }
.ld-bon__ident-t { font-weight: 700; font-size: 1.22rem; margin: 0 0 .5rem; }
.ld-bon__ident-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ld-bon__ident-nota { font-size: 1.04rem; color: var(--muted-inchis); margin: .45rem 0 0; }

/* ==== REDUCEREA PE COD (Loializare Mail, 2026-08-19), abatere declarata in tasks/_proba_1la1.php.
   Acelasi tipar ca identitatea jocului: schelet umplut de JS, ascuns fara JS si fara modul pornit.
   Campul refoloseste .ld-cod__camp; majusculele sunt doar infatisare, normalizarea o face JS la
   blur si serverul la primire. Cu cod, identitatea cere doar e-mailul, pe o singura coloana:
   telefonul ramane dezactivat si nu ocupa loc. ==== */
.ld-bon__cod { display: none; margin: 0 0 .9rem; text-align: left; }
.ld-bon__cod.on { display: block; }
.ld-bon__cod-t { font-weight: 700; font-size: 1.22rem; margin: 0 0 .5rem; }
.ld-bon__cod .ld-cod__camp { width: 100%; text-transform: uppercase; letter-spacing: .08em; }
.ld-bon__cod-nota { font-size: 1.04rem; color: var(--muted-inchis); margin: .45rem 0 0; }
.ld-bon__ident--email .ld-bon__ident-grid { grid-template-columns: 1fr; }
.ld-bon__ident--email .ld-cod__camp[name="ld_telefon"] { display: none; }

/* Mesajul de refuz venit de la server (discount=folosit|eroare), inaintea butonului de plata. */
.ld-bon__joc-msg { font-size: 1.16rem; font-weight: 600; color: var(--muted-inchis); margin: 0 0 .9rem; text-align: left; }

/* ==== BONUL PE TELEFON (2026-08-06). Maririle de mai sus, cerute pentru desktop, nu aveau garda de
   latime: se aplicau si pe 390px, unde baza de 1.32rem lasa ~345px de continut, deci jumatate din
   randuri se rupeau in doua. Strangerea pe inaltime (max-height) nu ajuta: ea a fost calibrata
   pentru laptopuri scunde, iar un telefon are ecranul INALT si ingust, adica exact cazul pe care
   nu il acopera. Blocul de aici sta DUPA toate suprascrierile de mai sus, deci castiga in cascada
   pe telefon, si lasa desktopul neatins. Valorile pornesc de la marimile ORIGINALE ale bonului
   (dinaintea celor doua trepte de +15%) si coboara sub ele, fiindca latimea utila e la jumatate. */
@media (max-width:620px){
  .ld-bon{max-width:100%;font-size:.92rem;padding:3.2rem 1.1rem 1.4rem}
  .ld-bon__cap h3{font-size:1.15rem}
  .ld-bon__cap p{font-size:.72rem}
  .ld-bon__total{font-size:1.45rem}
  .ld-bon__total small{font-size:.8rem}
  .ld-bon__lei{font-size:.95rem}
  .ld-bon__lei-curs{font-size:.72rem}
  .ld-bon__joc{font-size:1.08em}
  .ld-bon__cant > span{font-size:.86rem}
  .ld-bon__nota{font-size:.78rem}
  .ld-bon__cta{font-size:1.05rem;padding:.9rem}
  .ld-bon__stripe{font-size:.72rem}
  .ld-bon .ld-cant button, .ld-bon .ld-cant output{font-size:1.1rem}
  .ld-bon .ld-cod__camp{font-size:.95rem}
  /* Email si telefon unul sub altul: pe 390px, doua coloane taie ambele valori la jumatate de
     cuvant, iar userul nu mai poate citi ce a scris. */
  .ld-bon__ident-grid{grid-template-columns:1fr}
  .ld-bon__ident-t{font-size:.95rem}
  .ld-bon__ident-nota{font-size:.78rem}
  .ld-bon__cod-t{font-size:.95rem}
  .ld-bon__cod-nota{font-size:.78rem}
  .ld-bon__joc-msg{font-size:.88rem}
}

/* ============================================
   Footer, varianta "Gradient"
   ============================================ */

/* Banda albastru->magenta full-bleed, aceleasi valori ca --grad-blue/--grad-magenta din tokeni
   (butonul CTA, popup-ul de recompensa si bara de bilete folosesc acelasi gradient). Brand centrat
   sus, trei coloane (companiile grupului / utile / datele firmei), descrierea grupului dedesubt,
   copyright jos. Aleasa din experiments/footer-lab.html; variantele A Deschis si B Violet au ramas
   acolo. Fundalul e full-bleed prin $FB (inline, din orchestrator); latimea de continut o da
   .ld-footer__in. Culorile prin var() se rezolva: footerul e sectiune in pagina, nu injectat pe
   wp_footer ca bara de bilete. */

.ld-footer {
  background: linear-gradient(135deg, var(--grad-blue), var(--grad-magenta));
  color: #fff;
  padding: clamp(3.4rem, 6vw, 4.6rem) 0 0;
}
.ld-footer__in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 4rem);
}

/* brand centrat sus */
.ld-footer__head { text-align: center; padding-bottom: 2.2rem; }
.ld-footer__logo { height: 40px; width: auto; filter: brightness(0) invert(1); margin: 0 auto 0.9rem; display: block; }
.ld-footer__tag { max-width: 46ch; margin: 0 auto; color: rgba(255, 255, 255, 0.88); font-size: 1.14rem; font-weight: 500; line-height: 1.5; }

/* trei coloane */
.ld-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: clamp(2rem, 3.5vw, 3.2rem);
  padding: 2.2rem 0 2.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.ld-footer__col h4 {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

/* companiile grupului: doua coloane in interiorul coloanei */
.ld-footer__firme { columns: 2; column-gap: 1.2rem; }
.ld-footer__firme a {
  display: block;
  margin-bottom: 0.55rem;
  color: rgba(255, 255, 255, 0.94);
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 500;
  transition: color 0.15s ease;
}
.ld-footer__firme a:hover { color: var(--brand-secondary); }

/* utile (pagini legale, inca #) */
.ld-footer__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ld-footer__nav a { color: rgba(255, 255, 255, 0.94); text-decoration: none; font-size: 1.08rem; transition: color 0.15s ease; }
.ld-footer__nav a:hover { color: var(--brand-secondary); }

/* datele firmei, definition list */
.ld-footer__legal { font-size: 0.96rem; color: rgba(255, 255, 255, 0.85); line-height: 1.55; }
.ld-footer__co { display: block; margin-bottom: 0.55rem; color: #fff; font-weight: 800; letter-spacing: 0.02em; }
.ld-footer__legal dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.6rem; margin: 0; }
.ld-footer__legal dt { opacity: 0.72; white-space: nowrap; }
.ld-footer__legal dd { margin: 0; }
.ld-footer__legal a { color: inherit; text-decoration: none; }
.ld-footer__legal a:hover { color: var(--brand-secondary); }

/* descrierea grupului, centrata sub coloane */
.ld-footer__desc {
  max-width: 82ch;
  margin: 0 auto;
  padding: 1.5rem 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.96rem;
  line-height: 1.68;
  text-align: center;
}

.ld-footer__bottom { padding: 1.2rem 0; text-align: center; font-size: 0.98rem; color: rgba(255, 255, 255, 0.75); }

@media (max-width: 760px) {
  .ld-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
}
@media (max-width: 480px) {
  .ld-footer__cols { grid-template-columns: 1fr; }
  .ld-footer__firme { columns: 1; }
}

/* ============================================
   Hero
   ============================================ */
.ld-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 1.5rem 4rem;
  background-color: var(--brand-ink);
  color: #fff;
  isolation: isolate;
}

.ld-hero__video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  z-index: 0;
  /* Fallback poster background pana video loading */
  background: url('../../uploads/hero-LD.webp') center/cover no-repeat, var(--brand-ink);
}

.ld-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.35) 0%, rgba(26, 26, 46, 0.65) 100%);
  pointer-events: none;
}

.ld-hero__inner {
  position: relative;
  z-index: 2;
}

/* Respectam preferinta user pt reduced motion, poster only */
@media (prefers-reduced-motion: reduce) {
  .ld-hero__video {
    display: none;
  }
  .ld-hero {
    background-image:
      linear-gradient(180deg, rgba(26, 26, 46, 0.35) 0%, rgba(26, 26, 46, 0.65) 100%),
      url('../../uploads/hero-LD.webp');
    background-size: cover;
    background-position: center;
  }
}

.ld-hero__title,
.ld-hero .ld-hero__eyebrow,
.ld-hero .ld-hero__meta {
  color: #fff;
}

.ld-hero .ld-hero__meta {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ld-hero .ld-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.ld-hero .ld-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.ld-hero .ld-hero__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.ld-hero__logo {
  max-width: 180px;
  height: auto;
  margin: 0 auto 2.5rem;
  display: block;
}

.ld-hero__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  color: var(--brand-muted);
  margin: 0 0 1.5rem;
}

.ld-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
  color: var(--brand-ink);
}

.ld-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.5rem;
  border: 1px solid rgba(26, 26, 46, 0.12);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink);
  margin: 0 0 2.5rem;
}

.ld-hero__sep {
  opacity: 0.4;
}

.ld-hero__cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Ajustari NUMAI pentru paginile engleze (LD-3.1). html[lang="en"] vine din inc/seo.php
   (ld_seo_limba scrie limba paginii in atribut), deci nimic de aici nu atinge randarea
   romaneasca. Cerute de user la review-ul copy-ului final EN, 2026-08-26.

   1. Titlul sectiunii "de ce": pe EN textul incape pe doua randuri, iar la line-height-ul
      mostenit (0.95, css/06-section.css) fondul galben al lui "different" ajungea lipit de
      coboratoarele randului de sus. Pe un rand (RO) problema nu exista, de-aia corectia sta
      sub lang="en".
   2. Tagul galben din titlul inscrierii ("The right people."), cu 20% mai mare, cerinta user.
   3. Cuvantul accentuat din titlul modalului de aprobare ("convincing"), cu 20% mai mare,
      cerinta user. Tintit prin #aprTitlu, ca sa nu creasca si celelalte titluri .ld-form__t. */

html[lang="en"] .ld-de-ce .ld-section__title { line-height: 1.1; }

html[lang="en"] .ld-inscriere__in .ld-inscriere__tag { font-size: 1.2em; }

html[lang="en"] #aprTitlu em { font-size: 1.2em; }
/* ============================================
   Bannerul de consimtamant pentru cookie-uri (inc/analytics.php)

   Jos-stanga, discret, in tokenii temei: cartonas alb pe umbra puternica, butonul de accept in
   gradientul brandului, refuzul la fel de vizibil si la fel de usor de apasat, cum cere legea:
   refuzul nu are voie sa fie mai greu decat acceptul. `hidden` il tine nevazut pana decide JS-ul,
   deci cine a ales deja nu vede nicio clipire.
   ============================================ */
.ld-cookie{position:fixed;left:24px;bottom:24px;z-index:120;max-width:420px;background:var(--brand-bg);
  color:var(--brand-ink);padding:1.1rem 1.2rem;box-shadow:0 18px 50px rgba(0,0,0,.35);
  font-size:.9rem;line-height:1.5}
.ld-cookie[hidden]{display:none}
.ld-cookie p{margin:0 0 .8rem}
.ld-cookie a{color:var(--brand-primary);text-decoration:underline}
.ld-cookie__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.ld-cookie__ok,.ld-cookie__nu{border:0;cursor:pointer;padding:.6rem 1.1rem;font-size:.9rem;font-weight:600}
.ld-cookie__ok{color:#fff;background-color:var(--brand-primary);
  background-image:linear-gradient(135deg,var(--mov) 0%,var(--grad-magenta) 100%)}
.ld-cookie__ok:hover{background-image:none}
.ld-cookie__nu{background:var(--brand-bg-alt);color:var(--brand-ink)}
.ld-cookie__nu:hover{background:var(--line)}
@media (max-width:560px){
  .ld-cookie{left:12px;right:12px;bottom:12px;max-width:none}
}
/* Linkul persistent de redeschidere (art. 7(3): retragerea la fel de usoara ca acordarea). Discret
   dar mereu prezent, jos-stanga, sub nivelul bannerului: cand bannerul e deschis, linkul se ascunde
   din JS ca sa nu se suprapuna. */
/* ICOANA, de la 2026-09-03. Era un buton cu text, si se suprapunea cu logoul flotant din stanga-jos:
   logoul statea la bottom:50px cu inaltime 56px, butonul la bottom:24px cu vreo 30px, deci se atingeau
   in banda 50-54px. Logoul a urcat la 70px, iar butonul a devenit o pastila rotunda, mai mica si mai
   discreta. Textul traieste mai departe in aria-label si in title. */
.ld-cookie-set{position:fixed;left:24px;bottom:14px;z-index:119;border:0;cursor:pointer;
  width:26px;height:26px;border-radius:50%;padding:0;display:grid;place-items:center;
  background:var(--brand-bg);box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .18s ease,box-shadow .18s ease}
.ld-cookie-set img{display:block;width:17px;height:17px}
/* ZONA DE APASARE ramane 44px, desi pastila vazuta are 26. 44px e pragul de tinta tactila, iar un
   buton rotund sub el devine greu de nimerit pe telefon; aici insa butonul deschide chiar poarta prin
   care omul isi retrage consimtamantul, si aia nu are voie sa fie mai greu de apasat decat a fost de
   acordat (art. 7(3)). Pseudo-elementul intinde suprafata sensibila fara sa mareasca nimic vizibil.
   inset:-9px pe 26px da 44px. */
.ld-cookie-set::before{content:"";position:absolute;inset:-9px;border-radius:50%}
/* 44px e pragul de tinta tactila; sub el, un buton rotund devine greu de nimerit pe telefon. */
.ld-cookie-set:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.26)}
.ld-cookie-set[hidden]{display:none}
@media (max-width:560px){
  .ld-cookie-set{left:12px;bottom:12px}
}
/* ============================================
   Buttons
   ============================================ */
.ld-btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.ld-btn--primary {
  background: var(--brand-primary);
  color: #fff;
}
.ld-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(120, 104, 198, 0.35);
}

.ld-btn--ghost {
  background: transparent;
  color: var(--brand-ink);
  border-color: rgba(26, 26, 46, 0.2);
}
.ld-btn--ghost:hover {
  border-color: var(--brand-ink);
  background: rgba(26, 26, 46, 0.04);
}
/* ============================================
   Ecran de incarcare, hero homepage
   ============================================

   Acopera intervalul dintre deschiderea paginii si momentul in care filmul din hero chiar
   ruleaza. Se stinge DUPA ce imaginea s-a pus in miscare, nu inainte: altfel ar aparea exact
   golul pe care ecranul asta exista ca sa-l ascunda.

   Nu e opac: e sticla mata peste site. Dedesubt se ghiceste hero-ul (posterul ajunge in ~64 KB,
   deci e acolo aproape instant), destul cat sa se vada ca exista un site, prea putin cat sa se
   citeasca. Cand se stinge, imaginea se limpezeste in loc sa fie descoperita.

   Markup-ul e injectat din inc/header-hero-video.php, doar pe paginile cu hero. */

.ld-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;                  /* peste header (sticky) si peste logo-ul hero-ului (z-index 10) */
  background: rgba(13, 15, 31, 0.62);   /* #0d0f1f, ink-ul hero-ului, la 62% */
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;                     /* pornim invizibil: vezi .is-visible */
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* Fara sticla mata, cei 62% lasa continutul sa se citeasca pe dedesubt, iar numele scris cu
   contur de 34% peste el devine ilizibil. Acolo unde filtrul lipseste, stratul se inchide
   aproape complet: pierdem efectul, nu si lizibilitatea. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ld-loader { background: rgba(13, 15, 31, 0.96); }
}

/* Pornim ascuns si il aprinde JS-ul, imediat, din <body>. Invers (vizibil din CSS, stins de JS)
   ar fi lasat pagina inaccesibila daca scriptul crapa. Asa, in cel mai rau caz, ramai fara
   ecran de incarcare, nu fara site.
   Aprinderea NU e animata: trebuie sa acopere pagina din prima, nu sa se stinga treptat peste
   ea. Doar disparitia e animata (.is-done). */
.ld-loader.is-visible {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.ld-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ld-loader__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.2vw, 30px);
  padding: 2rem;
}

/* Cuvantul se umple de jos in sus, cat se incarca filmul. Doua straturi suprapuse: conturul
   stă pe loc, iar peste el urca varianta plina cu gradientul de brand. Fara scale la final:
   marirea ameteste pe ecran mare. */
.ld-loader__word {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 7.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.ld-loader__word span {
  display: block;
}

.ld-loader__word-out {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.34);
}

/* clip-path-ul e scris din JS: 100% inseamna "filmul poate rula pana la capat fara sa se
   opreasca", NU "fisierul s-a descarcat integral". */
.ld-loader__word-in {
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, #2563EB, #EC4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.2s linear;
}

.ld-loader__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(42vw, 260px);
}

.ld-loader__track {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.ld-loader__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #2563EB, #EC4899);
  transition: width 0.2s linear;
}

.ld-loader__pct {
  font: 400 11px/1 var(--font-body);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;   /* cifrele nu mai danseaza la fiecare procent */
  min-width: 34px;
  text-align: right;
}

/* Sub preferinta de miscare redusa filmul nu se descarca deloc (vezi hero-current.html), deci
   nu exista ce astepta: ramane posterul. Ecranul de incarcare nu are ce cauta aici. */
@media (prefers-reduced-motion: reduce) {
  .ld-loader { display: none; }
}

@media (max-width: 640px) {
  .ld-loader__row { width: min(64vw, 220px); }
}
/* PAGINILE CLASICE, adica cele care NU sunt homepage: termeni, confidentialitate, cookies.
 *
 * DE CE EXISTA. Homepage-ul e Elementor Canvas si isi aduce singur tot: meniul injectat, sectiunile,
 * footerul. O pagina obisnuita trece prin sablonul temei, si acolo nu era nimic: continutul iesea
 * lipit de marginea din stanga, pe toata latimea ecranului, sub un antet fix si invizibil.
 *
 * ANTETUL, si de-aia parea ca lipseste. .ld-header e position:fixed si transparent, iar clasa care
 * il face opac, .is-scrolled, o pune JS-ul din inc/header-hero-video.php, care ruleaza DOAR pe
 * homepage. Pe o pagina legala ramanea deci alb pe alb, invizibil, dar continua sa acopere primele
 * randuri de text. Aici i se da fundal din start.
 *
 * DOMENIUL DE APLICARE. Totul e sub .page-template-default, adica sablonul implicit. Laburile au
 * sabloanele lor (page-lab.php, page-teme-lab.php) si nu sunt atinse, iar homepage-ul nici nu
 * randeaza .ld-header, deci nu are ce sa se calce.
 *
 * LATIMEA. 820px pentru text curgator. Nu 1200 ca la sectiunile de pe homepage: acolo sunt grile si
 * imagini, aici sunt paragrafe, iar un rand prea lung se citeste greu.
 */

/* --- antetul, vizibil din prima pe paginile clasice --- */
.page-template-default .ld-header {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(26, 26, 46, 0.08);
  backdrop-filter: saturate(180%) blur(8px);
}

/* --- containerul de continut --- */
.page-template-default .site-main {
  max-width: 820px;
  margin: 0 auto;
  /* Sus: inaltimea antetului fix (logo 40px + 2rem padding) plus aer. */
  padding: 8rem 1.5rem 6rem;
  color: var(--brand-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* --- titlul paginii --- */
.page-template-default .page-header {
  margin: 0 0 2.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 2px solid var(--brand-ink);
}

.page-template-default .entry-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--brand-ink);
}

/* --- continutul --- */
.page-template-default .page-content > *:first-child {
  margin-top: 0;
}

.page-template-default .page-content h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 3rem 0 0.9rem;
  color: var(--brand-ink);
}

.page-template-default .page-content h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  margin: 2rem 0 0.6rem;
  color: var(--brand-accent);
}

.page-template-default .page-content p {
  margin: 0 0 1.15rem;
}

.page-template-default .page-content ul,
.page-template-default .page-content ol {
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}

.page-template-default .page-content li {
  margin: 0 0 0.5rem;
}

.page-template-default .page-content strong {
  font-weight: 700;
  color: var(--brand-ink);
}

.page-template-default .page-content a {
  color: var(--brand-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-template-default .page-content a:hover {
  color: var(--brand-primary);
}

.page-template-default .page-content code {
  font-size: 0.94em;
  background: var(--brand-bg-alt);
  padding: 0.1em 0.35em;
}

/* NU pune stil pe `.page-content > p:first-child`. A existat aici o regula care il facea mic si gri,
 * fiindca pe atunci primul paragraf era eticheta de versiune si data. Eticheta a fost scoasa din
 * documente la cererea userului, 2026-08-07, iar regula a ramas o clipa si micsora prima fraza reala
 * a fiecarei pagini. Un selector de pozitie supravietuieste continutului pentru care a fost scris. */

/* --- tabelul din politica de cookies ---
 * Invelisul cu overflow-x exista pentru telefon: tabelul are cinci coloane si nu incape sub 620px.
 * Deruleaza TABELUL, nu pagina, altfel intreg documentul capata derulare orizontala. */
.ld-tabel {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.page-template-default .page-content table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 0.9375rem;
}

.page-template-default .page-content th,
.page-template-default .page-content td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.12);
}

.page-template-default .page-content th {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-muted);
  border-bottom-width: 2px;
  border-bottom-color: var(--brand-ink);
  white-space: nowrap;
}

.page-template-default .page-content td code {
  white-space: nowrap;
}

/* --- tiparirea documentelor juridice in PDF, pentru arhiva ---
 * Chromium nu stie sa rupa un RAND de tabel intre pagini: un rand mai inalt decat pagina incepe pe
 * pagina lui, iar ce nu incape dedesubt se TAIE, fara urma. Masurat pe 2026-08-27, la arhivarea
 * v3.0: notificarea pierdea ~5,7% din caractere (celulele lungi din tabelul de scopuri, paginile
 * 9-13 din PDF incepeau fiecare cu randul urmator, iar restul celulei nu mai aparea nicaieri),
 * politica de cookies ~1,4%. Arhiva exista ca dovada juridica, deci completitudinea bate aspectul:
 * la tiparire, tabelul se liniarizeaza in blocuri, care se fragmenteaza natural. Pe ecran, nimic. */
@media print {
  .page-template-default .page-content .ld-tabel { overflow-x: visible; }
  .page-template-default .page-content table,
  .page-template-default .page-content thead,
  .page-template-default .page-content tbody,
  .page-template-default .page-content tr,
  .page-template-default .page-content th,
  .page-template-default .page-content td {
    display: block;
    min-width: 0;
    white-space: normal;
  }
  .page-template-default .page-content tr {
    border-bottom: 2px solid var(--brand-ink);
    padding: 0.35rem 0;
  }
}

/* --- subsolul simplu, injectat din inc/pagini-simple.php --- */
.ld-subsol {
  border-top: 1px solid rgba(26, 26, 46, 0.12);
  background: var(--brand-bg-alt);
  padding: 2.5rem 1.5rem 3rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-muted);
}

.ld-subsol__in {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
}

.ld-subsol__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.ld-subsol a {
  color: var(--brand-accent);
  text-decoration: none;
}

.ld-subsol a:hover {
  text-decoration: underline;
}

.ld-subsol__co {
  color: var(--brand-ink);
  font-weight: 700;
}

.ld-subsol__date {
  margin: 0.35rem 0 0;
  line-height: 1.55;
}

/* --- telefon --- */
@media (max-width: 620px) {
  .page-template-default .site-main {
    padding: 6.5rem 1.15rem 4rem;
    font-size: 1rem;
  }
  .page-template-default .page-header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.1rem;
  }
  .page-template-default .page-content h2 {
    margin-top: 2.25rem;
  }
  .ld-subsol__in {
    flex-direction: column;
    gap: 1.25rem;
  }
}
/* ============================================
   Bara de bilete, jos, sticky
   ============================================

   Apare cand butonul CTA din hero iese din ecran si duce la inscriere. O singura bara care isi
   schimba continutul dupa treapta de pret (early bird / normal, decise de codul Stripe) si dupa
   locurile ramase. Fundal, inaltime si culori sunt IDENTICE in toate starile; se schimba doar ce
   scrie in ea.

   INALTIME FIXA 55px. Toate marimile interioare sunt in px si calibrate sa incapa in cei 55, cu
   conteinerul fara padding vertical (align-items:center centreaza continutul). La orice schimbare
   de inaltime, se schimba aici SI valoarea de coexistenta a butonului "Sus" din back-to-top.php.

   Culorile sunt LITERALE, nu var(): bara e injectata pe wp_footer, in afara containerelor temei,
   iar un var() nerezolvat ar face declaratia invalida (vezi butonul "Sus"). Aceleasi valori ca
   tokenii din css/00-tokens.css. Starea o alege serverul (inc/bara-bilete.php). */

.ld-bbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  color: #fff;
  background: linear-gradient(135deg, #2563EB, #EC4899);
  transform: translateY(105%);
  /* Ascunderea are DOUA parti, si a doua s-a adaugat pe 2026-09-01, dupa un defect vizibil.
     translateY(105%) coboara cutia de 55px, dar overflow-ul e vizibil, deci orice continut mai
     inalt decat ea ramane pe ecran, plutind peste hero. S-a intamplat exact asa: pe 375px blocul
     cu locurile se rupea pe trei randuri (masurat 92px pe RO, 113px pe EN), iar primul rand,
     cifra, se vedea in coltul din dreapta jos ca un "120" fara nicio explicatie.
     Al doilea castig, si cel mai important: bara ascunsa doar prin transform ramanea in ordinea
     de tab si in arborele de accesibilitate. Masurat pe pagina vie in aceeasi zi: linkul
     "Rezerva-ti locul" primea focus cu bara coborata, deci tastatura ateriza pe un buton
     invizibil. visibility:hidden scoate elementul SI descendentii lui din ambele.
     Nu overflow:hidden: ar rezolva doar scurgerea vizuala, nu si focusul.
     Intarzierea de 0.45s lasa alunecarea de iesire sa se vada intreaga; la intrare, 0s, ca bara
     sa fie vizibila din prima clipa a alunecarii. */
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(.23,1,.32,1), visibility 0s linear 0.45s;
  will-change: transform;
}
.ld-bbar.is-sus {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.45s cubic-bezier(.23,1,.32,1), visibility 0s linear 0s;
}

/* inaltime fixa; fara padding vertical, continutul se centreaza pe verticala.
   Latime completa (fara max-width), cu padding mic la margini: blocul de pret sta mai la stanga si
   ramane loc pentru pretul vechi la fel de mare ca cel nou. */
.ld-bbar__in {
  max-width: none; margin: 0; padding: 0 40px; height: 55px;
  display: flex; align-items: center; justify-content: center; gap: 90px;
}
/* flex:0, nu flex:1: blocul de text NU se mai intinde ca sa impinga butonul la marginea dreapta.
   Impreuna cu justify-content:center, tot grupul (text + buton) sta in mijloc, iar gap-ul de 90px
   de mai sus e spatiul dintre text si buton. */
.ld-bbar__stg { flex: 0 1 auto; display: flex; align-items: center; gap: 22px; min-width: 0; }
/* eticheta, pret nou si pret vechi pe aceeasi linie, TOATE la 22px (cererea userului); doar "+ TVA"
   ramane mic, ca nota, nu ca pret. */
.ld-bbar__cap { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.ld-bbar__eticheta { font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase; font-weight: 900; color: #E9E20E; }
.ld-bbar__pret { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
/* "+ TVA" la aceeasi marime ca pretul: TVA scris mic langa un pret mare ascunde costul real, e
   marketing dubios. Aici e vizibil ca parte din pret. */
.ld-bbar__tva { font-size: 22px; font-weight: 400; opacity: 0.85; }
.ld-bbar__vechi { font-size: 22px; font-weight: 400; opacity: 0.5; }
/* MICI SUNT DOAR CUVINTELE, nu si cifra. Cerinta userului, 2026-08-07: "în loc de" cu 40% mai mic,
   iar "<pret> EUR + TVA" ramane cat era. Prima incercare a micsorat tot randul, adica exact pe dos.
   Cifra nu se scrie aici, vine din LD_TICKET_NORMAL_NET; comentariul spunea "190" pana pe 2026-08-10,
   cand standardul a devenit 175.
   0.6em, nu pixeli: se leaga de marimea randului, deci raportul de 40% se pastreaza singur si pe
   telefon, unde randul coboara la 18px. O a doua regula in media query ar fi fost o a doua sursa de
   adevar pentru acelasi raport. */
.ld-bbar__vechi-et { font-size: 0.6em; }

/* ceasul, doar in early. In linie, fara cutii: cutiile stivuiau cifra peste o eticheta de 8px,
   ilizibila intr-o bara de 55px. Aici numarul e mare (20px) si cuvantul e lizibil (13px) langa el. */
.ld-bbar__ceas { display: flex; align-items: baseline; gap: 14px; font-variant-numeric: tabular-nums; }
.ld-bbar__u { font-size: 13px; font-weight: 500; opacity: 0.85; letter-spacing: 0.02em; }
.ld-bbar__u b { font-size: 20px; font-weight: 900; margin-right: 3px; opacity: 1; }

/* umplerea salii, in normal si ultimele: bara scurta, nu 130 de scaune intinse pe toata latimea */
.ld-bbar__locuri { display: flex; align-items: center; gap: 10px; }
.ld-bbar__prog { width: 180px; height: 9px; background: rgba(255,255,255,0.22); flex: 0 0 auto; }
.ld-bbar__prog span { display: block; height: 100%; background: #E9E20E; }
.ld-bbar__prog span.putin { animation: ld-bbar-clip 1.4s ease-in-out infinite; }
@keyframes ld-bbar-clip { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.ld-bbar__nr { font-size: 14px; }
.ld-bbar__nr b { font-size: 19px; font-weight: 900; }

.ld-bbar__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap;
  height: 40px; padding: 0 22px;
  background: #E9E20E; color: #1A1A2E;
  transition: transform 0.2s ease;
}
.ld-bbar__cta:hover { transform: translateY(-2px); }
.ld-bbar__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* epuizat: fara pret, cu iesire onesta. Butonul devine contur, ca sa nu para acelasi indemn. */
.ld-bbar--epuizat .ld-bbar__cta { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.55); }

@media (prefers-reduced-motion: reduce) {
  .ld-bbar { transition: opacity 0.3s ease; }
  .ld-bbar__prog span.putin { animation: none; }
  .ld-bbar__cta:hover { transform: none; }
}

/* ECRANE INTERMEDIARE. Pragul a fost 720px pana pe 2026-09-01, si intre 721 si 1000 bara era
   rupta: peste 720 reveneau marimile de desktop (pretul la 22px, bara de progres la 180px, gap de
   90px), dar ecranul e inca prea ingust pentru ele, deci blocul din stanga se rupea pe trei
   randuri si masura 92px intr-o cutie de 55. Masurat pe pagina vie la 721, 800, 900 si 950px.
   Cu pragul la 1000px, aceleasi marimi stranse dau 29px la toate lătimile din banda, iar de la
   1001 marimile mari incap din nou (50px la 1001, 33px de la 1100). Pragul e latimea de la care
   desktopul chiar are loc, nu una ghicita.
   Blocul de 640px ramane DUPA acesta, deci telefonul il suprascrie ca pana acum. */
@media (max-width: 1000px) {
  /* inaltimea ramane 55px; se strang doar spatiile si cateva marimi */
  .ld-bbar__in { padding: 0 16px; gap: 12px; }
  .ld-bbar__stg { gap: 12px; }
  .ld-bbar__eticheta { font-size: 15px; }
  .ld-bbar__pret, .ld-bbar__vechi, .ld-bbar__tva { font-size: 18px; }
  .ld-bbar__ceas { gap: 9px; }
  .ld-bbar__u { font-size: 11px; }
  .ld-bbar__u b { font-size: 16px; }
  .ld-bbar__prog { width: 70px; }
  .ld-bbar__cta { padding: 0 14px; font-size: 14px; }
}

/* TELEFON. Blocul sta DUPA cel de 1000px, nu inaintea lui: ambele au aceeasi specificitate, deci
   ordinea decide, si asezat mai sus marimile de aici ar fi fost suprascrise tacut de cele de acolo.

   Pe telefon bara pastreaza TREI lucruri: eticheta, pretul cu TVA, butonul. Masurat pe 375px,
   continutul intreg cerea 608px intr-un spatiu de 343, iar consecintele erau pretul vechi iesit
   30px in afara ecranului, butonul calcand peste el si ceasul (417..608) complet invizibil.
   Ce a ramas incape pe un rand, deci bara ramane la 55px si nu misca nimic. */
@media (max-width: 640px) {
  .ld-bbar__in { padding: 0 14px; gap: 10px; }
  .ld-bbar__stg { gap: 10px; }
  /* Pretul vechi si ceasul se scot: pretul vechi cerea inca 166px, iar ceasul 191, si niciunul nu
     mai avea unde sa stea dupa pret si buton. Raman pe desktop, unde e loc. */
  /* Blocul cu locurile intra aici pe 2026-09-01. Regula de deasupra spune de pe 9 august ca pe
     telefon raman TREI lucruri: eticheta, pretul cu TVA, butonul. Locurile erau al patrulea si
     nu incapeau: bara de progres cere 70px, iar textului ii ramaneau 35px pe engleza si 48px pe
     romana, deci se rupea pe trei randuri si iesea din bara. Intentia era scrisa, regula lipsea. */
  .ld-bbar__vechi, .ld-bbar__ceas, .ld-bbar__locuri { display: none; }
  .ld-bbar__eticheta { font-size: 13px; }
  .ld-bbar__pret, .ld-bbar__tva { font-size: 19px; }
  .ld-bbar__cta { padding: 0 13px; font-size: 13px; height: 38px; }
}
/* ==========================================================================
   Segment 9. ALOCAREA LOCURILOR, dialogul deschis din biletul primit pe email.
   Markup-ul e in inc/aloca-popup.php.

   ULTIMUL IN CASCADA, si numarul 99 e ales dinadins: fisierele din css/ se
   concateneaza in ordine ALFABETICA de tasks/_build_css.php, iar ordinea aia
   ESTE cascada. Dialogul asta reia clasele fluxului de inscriere (.ld-ov,
   .ld-form, .ld-grid, .ld-camp) si le ajusteaza pe alocuri, deci trebuie sa
   vina dupa 70-inscriere.css, nu inainte.

   CE NU E AICI, dinadins: fereastra, valul, cardul, butonul de trimitere,
   eticheta si inputul. FORMA lor exista deja in 70-inscriere.css si arata exact
   cum trebuie. Un al doilea set de reguli pentru aceleasi lucruri ar fi ajuns
   sa difere de primul, si diferenta s-ar fi vazut abia intr-un dialog, pe un
   telefon, la cineva care tocmai a platit.

   SINGURA exceptie e MARIMEA textului, ridicata mai jos. Se rescriu doar
   font-size-urile, nimic altceva: culori, chenare, captuseala si comportament
   raman de unde erau.

   Variabilele (--mono, --line, --mov, --brand-ink, --brand-muted) sunt pe
   :root, puse de 00-tokens.css si de 70-inscriere.css. Nu se redefinesc aici.
   ========================================================================== */

/* Cardul e mai lat decat la celelalte dialoguri: la trei participanti sunt 18
   campuri, iar pe latimea implicita coloanele ies prea inguste pentru un email. */
.ld-aloca .ld-ov__card { max-width: 46rem; }

/* --------------------------------------------------------------------------
   SCARA DE TEXT, +40% fata de formularul de plata.

   Dialogul asta nu e la fel cu celelalte, si de-aia nu imprumuta si marimile.
   Formularul de plata se completeaza o data, de omul care tocmai a ales sa
   cumpere si e atent. Aici se bat la masina 18 campuri, nume si adrese de
   email ale altor oameni, adica text pe care nu il stii pe de rost si pe care
   trebuie sa il RECITESTI ca sa il verifici. La .66rem, o eticheta de camp are
   in jur de 10px: prea putin pentru cineva miop, si exact genul de lucru pe
   care il observi abia cand e prea tarziu, fiindca datele gresite nu dau nicio
   eroare, ajung doar la adresa gresita.

   Factorul e unul singur, 1.4, aplicat pe toate marimile din dialog, ca sa nu
   se strice raporturile intre ele. Valorile de baza sunt in 70-inscriere.css,
   la .ld-form__* si .ld-camp; daca acolo se schimba ceva, aici se recalculeaza,
   nu se ajusteaza din ochi.
   -------------------------------------------------------------------------- */
.ld-aloca .ld-form__k       { font-size: .98rem; }   /* .70 x 1.4 */
.ld-aloca .ld-form__t       { font-size: 2.45rem; line-height: 1.25; } /* 1.75 x 1.4 */
.ld-aloca .ld-form__d       { font-size: 1.33rem; }  /* .95 x 1.4 */
.ld-aloca .ld-camp label    { font-size: .92rem; }   /* .66 x 1.4 */
.ld-aloca .ld-camp input    { font-size: 1.43rem; }  /* 1.02 x 1.4 */
.ld-aloca .ld-form__trimite { font-size: 1.54rem; }  /* 1.10 x 1.4 */

/* Numele evenimentului in titlu, pe galbenul temei. Ia .brand-highlight din
   02-brand.css, aceeasi pereche galben pe text inchis ca peste tot in site; aici
   se adauga doar marimea. In em, nu in rem, ca sa ramana legat de titlu: daca
   scara de mai sus se schimba vreodata, raportul dintre "Cine vine la" si numele
   evenimentului ramane cel gandit, fara a doua ajustare uitata. */
.ld-aloca__marca { font-size: 1.25em; }

/* --------------------------------------------------------------------------
   Un loc = un fieldset. Chenarul nu e decor: la trei segmente identice unul sub
   altul, fara el nu se vede unde se termina participantul 1 si incepe al 2-lea,
   iar omul completeaza jumatate dintr-unul si jumatate din celalalt.
   -------------------------------------------------------------------------- */
.ld-aloca__loc {
	margin: 1.6rem 0 0;
	padding: 1.1rem 1.2rem 1.4rem;
	border: 1px solid var(--line);
	border-radius: 2px;
}
.ld-aloca__loc.are-erori { border-color: #C0392B; }

.ld-aloca__legenda {
	padding: 0 .5rem;
	font-family: var(--mono);
	font-size: .98rem; /* .70 x 1.4 */
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--brand-ink);
}

/* Bifa "salvat". Verde inchis, nu verde viu: e o confirmare linistita, nu o
   sarbatoare, si sta langa un text care trebuie sa ramana cel mai vizibil. */
.ld-aloca__bifa {
	margin-left: .5rem;
	padding: .12rem .45rem;
	border-radius: 2px;
	background: #1E7A4B;
	color: #fff;
	font-size: .87rem; /* .62 x 1.4 */
	letter-spacing: .1em;
}

/* Grila din fieldset nu are nevoie de marginea de sus a celei din formularul de
   plata: acolo separa de textul de deasupra, aici de legenda, care e mai aproape.
   Colapsarea la o coloana sub 620px vine din 70-inscriere.css si se mosteneste. */
.ld-aloca__grid { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   Erorile. Rosul e singurul din foaie, si ramane singurul: daca mai apare unul
   pe undeva, cele doua se vor bate pe intelesul "ceva nu e in regula".
   -------------------------------------------------------------------------- */
.ld-camp.e-gresit input { border-bottom-color: #C0392B; }

.ld-camp__eroare {
	color: #C0392B;
	font-size: 1.09rem; /* .78 x 1.4 */
	line-height: 1.3;
}

/* Banda de sus, dupa o trimitere cu greseli. Spune INTAI ce a mers, fiindca
   partea aia e deja facuta si omul nu trebuie sa o refaca. */
.ld-aloca__alerta {
	margin: 1.2rem 0 0;
	padding: .8rem 1rem;
	border-left: 3px solid #C0392B;
	background: rgba(192, 57, 43, .06);
	font-size: 1.29rem; /* .92 x 1.4 */
	line-height: 1.45;
	color: var(--brand-ink);
}

/* Textul marunt de sub buton: nota de confidentialitate si legatura de
   modificare. Mic, dar nu sters: la 12px si gri deschis nu l-ar citi nimeni,
   iar unul din ele spune unde se duc datele personale. */
.ld-aloca__mic {
	margin: 1rem 0 0;
	font-size: 1.15rem; /* .82 x 1.4 */
	line-height: 1.5;
	color: var(--brand-muted);
}
.ld-aloca__mic a { color: var(--mov); }

/* --------------------------------------------------------------------------
   Ecranul de final. Fara formular, deci are loc sa respire.
   -------------------------------------------------------------------------- */
.ld-aloca__gata { padding-top: .5rem; padding-bottom: .5rem; }
.ld-aloca__gata .ld-form__d { margin-top: 1rem; }

/* Sub 620px cardul se lipeste de margini, deci chenarul fieldset-ului ar manca
   din latimea utila a campurilor. Se subtiaza captuseala, nu se scoate chenarul:
   fara el segmentele se amesteca exact pe ecranul unde asta doare cel mai tare. */
@media (max-width: 620px) {
	.ld-aloca__loc { padding: .9rem .8rem 1.1rem; }
	.ld-aloca .ld-ov__card { max-width: none; }
}

/* --------------------------------------------------------------------------
   PANOURILE FARA FORMULAR ISI PRIMESC CARTONUL ALB.
   Reparatie 2026-09-04, gasita de user intr-o captura: ecranul "Linkul nu mai
   este valabil" aparea ca text inchis peste imaginea paginii, fara nicio cutie
   sub el, deci aproape necitibil.

   CAUZA. Fundalul alb, captuseala si umbra cardului nu traiesc pe .ld-ov__card,
   ci pe .ld-form. Panoul cu formular le primeste fiindca invelisul lui CHIAR e
   un <form class="ld-form">. Celelalte doua panouri, cel de link neverificat si
   ECRANUL DE FINAL, pun continutul direct in card, deci ramaneau transparente.
   Al doilea nu fusese raportat de nimeni: il vede oricine isi completeaza
   datele, adica exact drumul reusit.

   Se tinteste doar copilul DIRECT al cardului, deci formularul, unde
   .ld-form__continut sta INAUNTRUL lui .ld-form, nu e atins de regula asta.
   -------------------------------------------------------------------------- */
.ld-aloca .ld-ov__card > .ld-form__continut {
	max-width: 620px;
	margin: 0 auto;
	background: #fff;
	padding: 4rem 2.2rem 2.2rem;
	position: relative;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

@media (max-width: 620px) {
	.ld-aloca .ld-ov__card > .ld-form__continut { padding: 3.6rem 1.4rem 1.6rem; }
}

/* --------------------------------------------------------------------------
   MEMENTOUL CU NUMELE DAT LA REVENDICARE (2026-09-04).
   Nu e eroare si nu e ajutor de camp, deci nu imprumuta niciunul din stilurile
   lor: e o informatie pe care omul ne-a dat-o si i-o dam inapoi. Fundal calm,
   aceeasi familie de mov ca restul dialogului.
   -------------------------------------------------------------------------- */
.ld-aloca__amintire {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	background: #F4F2FB;
	border-left: 3px solid var(--brand-primary);
	font-size: .9rem;
	line-height: 1.5;
	color: #4A4560;
}
.ld-aloca__amintire strong { color: #1A1A2E; }