/* lp.css - pagina de vânzare Expert Architect */

.lp-page {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--text-primary);
}

.lp-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Butoane ── */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.lp-btn--gold {
  background: var(--gold);
  color: var(--text-inverse);
  padding: var(--space-4) var(--space-8);
}
.lp-btn--gold:hover {
  background: #c9960f;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(227,179,65,0.22);
}
.lp-btn--sm  { padding: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.lp-btn--xl  { font-size: var(--text-lg); padding: var(--space-5) var(--space-10); border-radius: var(--radius-lg); }
.lp-btn--block { width: 100%; display: flex; }

/* ── Badge ── */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(227,179,65,0.10);
  border: 1px solid rgba(227,179,65,0.30);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-5);
}
/* Badge de lansare - static (fără pulsația aurie, ca să folosim auriul mai discret) */

/* ── Gold text ── */
.lp-gold { color: var(--gold); font-style: normal; }

/* ── Secțiuni ── */
.lp-section { padding-block: var(--space-24); }
.lp-section--ink { background: var(--ink); }

.lp-section-head {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp-section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin-bottom: var(--space-4);
}
.lp-section-sub {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.65;
}
/* Subtitlul de sectiune e scris gri, ca sa nu concureze cu titlul. Cand insa o
   parte din el poarta chiar argumentul, ingrosarea singura nu se vede destul pe
   gri - primeste auriu. Ca la incheieri, se aplica doar unde textul are
   **marcaje**, deci subtitlurile scrise fara ele raman exact cum erau. */
.lp-section-sub strong { color: var(--gold); }

/* ── Reveal ── */
.lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity 500ms ease, transform 500ms ease; }
.lp-revealed { opacity: 1; transform: translateY(0); }

/* CTA centrat sub teaserul de pe pagina Home */
.lp-teaser-cta { text-align: center; margin-top: var(--space-12); }

/* ── Formular de contact (secțiunea #pret din lp.html) ── */
.lp-cform-wrap { max-width: 560px; margin-inline: auto; }
.lp-cform {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lp-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lp-cform__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: rgba(var(--tint-rgb),0.04);
  border: 1px solid rgba(var(--tint-rgb),0.12);
  border-radius: var(--radius-md);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.lp-cform__input::placeholder { color: var(--text-muted); }
.lp-cform__input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227,179,65,0.15); }
.lp-cform__input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.lp-cform__textarea { resize: vertical; min-height: 110px; }
.lp-cform__error { font-size: var(--text-sm); color: var(--danger); margin: 0; display: none; }
.lp-cform__error.is-visible { display: block; }
.lp-cform__fine { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: 0; }
.lp-cform__done {
  text-align: center;
  padding: var(--space-4) 0 0;
}
.lp-cform__done[hidden] { display: none; }
.lp-cform__done-icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); font-weight: 700;
}
.lp-cform__done-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--cream); margin: 0 0 var(--space-2); }
.lp-cform__done-text  { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 480px) {
  .lp-cform__row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.lp-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 68px;
  background: rgba(var(--surface-rgb),0.80);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--tint-rgb),0.05);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.lp-nav--scrolled {
  background: rgba(var(--surface-rgb),0.97);
  border-bottom-color: var(--gold-pale);
}
.lp-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.lp-nav__logo { height: 44px; width: auto; display: block; }
.lp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0; padding: 0;
}
.lp-nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.lp-nav__links a:hover { color: var(--cream); }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.lp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 68px;
  padding-block: var(--space-24);
  overflow: hidden;
  text-align: center;
}
.lp-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
.lp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--cream);
  max-width: 840px;
}
.lp-hero__sub {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: var(--cream-dim);
  line-height: 1.65;
  max-width: 640px;
}
.lp-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.lp-hero__stats strong { color: var(--gold); }
.lp-stat-sep { color: rgba(var(--tint-rgb),0.2); }
.lp-hero__note { font-size: var(--text-sm); color: var(--text-muted); }

.lp-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.lp-hero__glow--top {
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(227,179,65,0.045) 0%, transparent 60%);
}
.lp-hero__glow--bottom {
  bottom: -10%; right: -5%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--hero-glow-2) 0%, transparent 70%);
}

/* ══════════════════════════════════════
   COUNTDOWN
══════════════════════════════════════ */
.lp-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.lp-countdown__label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lp-countdown__timer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lp-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 64px;
  padding: var(--space-3) var(--space-4);
  background: rgba(var(--tint-rgb),0.04);
  border: 1px solid rgba(var(--tint-rgb),0.10);
  border-radius: var(--radius-md);
}
.lp-countdown__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.lp-countdown__unit-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lp-countdown__sep {
  font-size: var(--text-2xl);
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 16px;
}
.lp-countdown--dark .lp-countdown__unit {
  background: rgba(0,0,0,0.25);
  border-color: rgba(227,179,65,0.2);
}

/* ══════════════════════════════════════
   PROBLEME
══════════════════════════════════════ */
.lp-problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.lp-problem-card {
  padding: var(--space-8);
  background: rgba(var(--tint-rgb),0.02);
  border: 1px solid rgba(var(--tint-rgb),0.07);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}
.lp-problem-card:hover { border-color: rgba(227,179,65,0.2); }
.lp-problem-card__icon { font-size: 2rem; margin-bottom: var(--space-4); display: block; }
.lp-problem-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cream);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}
.lp-problem-card__text { font-size: var(--text-base); color: var(--text-muted); line-height: 1.65; }
/* Distanta fata de grila de deasupra o aduce banda, nu grila. Altfel trebuia
   pusa pe fiecare tip de grila in parte (probleme, livrabile...), iar acolo unde
   sectiunea nu are banda de incheiere ramanea un spatiu gol la final. */
/* In caseta de incheiere, ingrosarea nu marcheaza un cuvant important, ci
   concluzia intregii sectiuni - de aceea primeste auriu, nu cremul obisnuit al
   lui <strong>. Se aplica doar unde textul chiar are **marcaje**; incheierile
   scrise fara ele raman neschimbate. */
.lp-problems-close strong { color: var(--gold); }

.lp-problems-close {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--cream-dim);
  font-style: italic;
  margin-top: var(--space-10);
  padding: var(--space-8);
  border: 1px solid rgba(227,179,65,0.15);
  border-radius: var(--radius-lg);
  background: rgba(227,179,65,0.04);
}

/* ══════════════════════════════════════
   WHY DIFFERENT
══════════════════════════════════════ */
.lp-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-12);
}
.lp-compare__col { padding: var(--space-8); border-radius: var(--radius-lg); }
.lp-compare__col--bad {
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.15);
}
.lp-compare__col--good {
  background: rgba(34,197,94,0.05);
  border: 1px solid rgba(34,197,94,0.2);
}
.lp-compare__head {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(var(--tint-rgb),0.08);
}
.lp-compare__col--bad .lp-compare__head  { color: #ef4444; }
.lp-compare__col--good .lp-compare__head { color: var(--success); }
.lp-compare__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lp-compare__list li { font-size: var(--text-base); color: var(--cream-dim); line-height: 1.55; }
.lp-compare__col--bad  .lp-compare__list li::before { content: '✗ '; color: #ef4444; font-weight: 700; }
.lp-compare__col--good .lp-compare__list li::before { content: '✓ '; color: var(--success); font-weight: 700; }
.lp-compare__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-muted);
  padding-top: var(--space-16);
}
.lp-why-note {
  padding: var(--space-6) var(--space-8);
  background: rgba(227,179,65,0.06);
  border: 1px solid rgba(227,179,65,0.2);
  border-radius: var(--radius-md);
  color: var(--cream-dim);
  text-align: center;
  font-size: var(--text-base);
  line-height: 1.65;
}
.lp-why-note strong { color: var(--gold); }

/* ══════════════════════════════════════
   INSTRUCTOR
══════════════════════════════════════ */
.lp-instructor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-12);
  align-items: start;
  max-width: 900px;
  margin-inline: auto;
}
.lp-instructor__avatar-placeholder {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(227,179,65,0.08);
  border: 3px solid rgba(227,179,65,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--gold);
}
/* Fotografia instructorului - aceeasi forma ca placeholder-ul de mai sus */
.lp-instructor__avatar-img {
  display: block;
  width: 140px; height: 140px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(227,179,65,0.08);
  border: 3px solid rgba(227,179,65,0.4);
}
.lp-instructor__name {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-2);
}
.lp-instructor__tagline { color: var(--gold); font-weight: 600; font-size: var(--text-base); margin-bottom: var(--space-6); }
.lp-instructor__text { color: var(--cream-dim); line-height: 1.7; margin-bottom: var(--space-4); }
.lp-instructor__stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(var(--tint-rgb),0.08);
  flex-wrap: wrap;
}
.lp-instructor__stat { display: flex; flex-direction: column; gap: var(--space-1); }
.lp-instructor__stat strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--gold); }
.lp-instructor__stat span  { font-size: var(--text-sm); color: var(--text-muted); }

/* ══════════════════════════════════════
   CURRICULUM
══════════════════════════════════════ */
.lp-modules {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 900px;
  margin-inline: auto;
}
.lp-module {
  border: 1px solid rgba(var(--tint-rgb),0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.lp-module[open] { border-color: rgba(227,179,65,0.30); }
.lp-module__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  cursor: pointer;
  list-style: none;
  background: rgba(var(--tint-rgb),0.02);
  transition: background var(--transition-fast);
  user-select: none;
}
.lp-module__header::-webkit-details-marker { display: none; }
.lp-module__header:hover { background: rgba(var(--tint-rgb),0.04); }
.lp-module[open] .lp-module__header { background: rgba(227,179,65,0.05); }
.lp-module__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gold);
  background: rgba(227,179,65,0.10);
  border: 1px solid rgba(227,179,65,0.25);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  letter-spacing: 0.06em;
}
.lp-module__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cream);
  flex: 1;
}
.lp-module__tag {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: rgba(var(--tint-rgb),0.05);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.lp-module__tag--gold {
  color: var(--gold);
  background: rgba(227,179,65,0.10);
  border: 1px solid rgba(227,179,65,0.2);
}
.lp-module__arrow {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  font-size: var(--text-lg);
}
.lp-module[open] .lp-module__arrow { transform: rotate(180deg); }
.lp-module__body {
  padding: var(--space-8);
  border-top: 1px solid rgba(var(--tint-rgb),0.06);
}
.lp-module__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.lp-module__cols h4 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.lp-module__cols ul {
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lp-module__cols ul li { color: var(--cream-dim); font-size: var(--text-base); line-height: 1.55; }
.lp-module__deliverable {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(227,179,65,0.06);
  border: 1px solid rgba(227,179,65,0.2);
  border-radius: var(--radius-md);
  color: var(--cream-dim);
  font-size: var(--text-base);
  line-height: 1.55;
}
.lp-module__deliverable strong { color: var(--cream); }
.lp-module__deliverable-icon { flex-shrink: 0; font-size: 1.2rem; margin-top: 2px; }
.lp-module__deliverable + .lp-module__deliverable { margin-top: var(--space-3); }

/* ══════════════════════════════════════
   LIVRABILE
══════════════════════════════════════ */
.lp-deliverables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.lp-deliverable-card {
  padding: var(--space-8);
  background: rgba(var(--tint-rgb),0.02);
  border: 1px solid rgba(var(--tint-rgb),0.07);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.lp-deliverable-card:hover { border-color: rgba(227,179,65,0.3); transform: translateY(-3px); }

/* Nota de imediat sub cardurile de pret: nu e un rand de serviciu, ci ultimul
   argument citit cat timp ochiul e inca pe comparatia dintre pachete. De aceea e
   mai mare decat notele obisnuite si are aer in jur. */
.lp-packages-note {
  max-width: 720px;
  margin: var(--space-10) auto 0;
  text-align: center;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--cream-dim);
}
.lp-packages-note strong { color: var(--gold); }

/* Cardul principal al unei grile de livrabile: cel care nu e unul dintre multe,
   ci motivul pentru care exista sectiunea. Se intinde pe doua coloane si poarta
   bordura aurie, ca pachetul recomandat din sectiunea de preturi.
   Latimea dubla doar cand grila are chiar mai multe coloane: sub 720px totul e
   pe o singura coloana, iar un „span 2" acolo ar sparge randul. */
/* Aceleasi valori ca la pachetul recomandat din sectiunea de preturi: bordura de
   2px la 50% si o aura difuza. `--gold-pale` (auriu la 12%) e gandit pentru
   despartituri subtile si, incercat aici, nu se vedea deloc - cardul arata exact
   ca vecinii lui. */
.lp-deliverable-card--principal {
  border: 2px solid rgba(227,179,65,0.5);
  background: rgba(227,179,65,0.04);
  box-shadow: 0 0 60px rgba(227,179,65,0.05);
}

/* Pe ecrane late grila trece pe SASE coloane: un card obisnuit ocupa doua, unul
   mare ocupa trei. Asa doua carduri mari stau pe acelasi rand, egale intre ele.
   Cu grila de trei coloane nu se putea: `span` accepta numai numere intregi, deci
   „un card si jumatate" nu exista.
   Doua marimi, doua roluri: --principal e miezul (lat SI auriu), --lat da doar
   greutate vizuala, fara sa concureze cu el. */
@media (min-width: 960px) {
  .lp-deliverables-grid { grid-template-columns: repeat(6, 1fr); }
  .lp-deliverable-card { grid-column: span 2; }
  .lp-deliverable-card--principal,
  .lp-deliverable-card--lat { grid-column: span 3; }
}
.lp-deliverable-card__icon { font-size: 2.2rem; margin-bottom: var(--space-4); display: block; }
.lp-deliverable-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--cream);
  margin-bottom: var(--space-3);
}
.lp-deliverable-card p { color: var(--text-muted); font-size: var(--text-base); line-height: 1.6; }

/* ══════════════════════════════════════
   GARANȚIE
══════════════════════════════════════ */
.lp-guarantee-wrap {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-12) var(--space-10);
  background: rgba(34,197,94,0.04);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: var(--radius-xl);
}
.lp-guarantee__icon { font-size: 3.5rem; display: block; margin-bottom: var(--space-5); }
.lp-guarantee__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}
.lp-guarantee__text { font-size: var(--text-lg); color: var(--cream-dim); line-height: 1.65; margin-bottom: var(--space-5); }
.lp-guarantee__condition {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: rgba(var(--tint-rgb),0.03);
  border-radius: var(--radius-md);
}
.lp-guarantee__condition strong { color: var(--cream); }
.lp-guarantee__bullets {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--success);
}

/* ══════════════════════════════════════
   PREȚ
══════════════════════════════════════ */
.lp-price-card {
  max-width: 600px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-10);
  background: rgba(var(--tint-rgb),0.02);
  border: 2px solid rgba(227,179,65,0.40);
  border-radius: var(--radius-xl);
  box-shadow: 0 0 80px rgba(227,179,65,0.04), var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}
.lp-price-card__savings {
  background: rgba(227,179,65,0.12);
  border: 1px solid rgba(227,179,65,0.3);
  color: var(--gold);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
}
.lp-price-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--cream);
}
.lp-price-card__prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.lp-price-card__old { font-size: var(--text-base); color: var(--text-muted); text-decoration: line-through; }
.lp-price-card__main { display: flex; align-items: baseline; gap: var(--space-3); }
.lp-price-card__amount {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.04em;
  line-height: 1;
}
.lp-price-card__vat { font-size: var(--text-sm); color: var(--text-muted); }
.lp-price-card__eur { font-size: var(--text-sm); color: var(--text-muted); }
.lp-price-card__includes {
  list-style: none;
  padding: var(--space-6);
  margin: 0;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: rgba(var(--tint-rgb),0.02);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--tint-rgb),0.06);
}
.lp-price-card__includes li { color: var(--cream-dim); font-size: var(--text-base); font-weight: 500; }
.lp-price-card__note { font-size: var(--text-xs); color: var(--text-muted); }

/* ══════════════════════════════════════
   FAQ
══════════════════════════════════════ */
.lp-faq-list {
  max-width: 740px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.lp-faq-item {
  border: 1px solid rgba(var(--tint-rgb),0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.lp-faq-item[open] { border-color: rgba(227,179,65,0.25); }
.lp-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
  list-style: none;
  background: rgba(var(--tint-rgb),0.02);
  transition: background var(--transition-fast);
  user-select: none;
}
.lp-faq-q::-webkit-details-marker { display: none; }
.lp-faq-q::after {
  content: '+';
  color: var(--gold);
  font-size: var(--text-xl);
  font-weight: 400;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.lp-faq-item[open] .lp-faq-q::after { transform: rotate(45deg); }
.lp-faq-item[open] .lp-faq-q { background: rgba(227,179,65,0.04); }
.lp-faq-a {
  padding: var(--space-5) var(--space-6);
  color: var(--cream-dim);
  font-size: var(--text-base);
  line-height: 1.7;
  border-top: 1px solid rgba(var(--tint-rgb),0.06);
}

/* Răspunsurile lungi au mai multe paragrafe sau o listă. Linia de separare o
   desenează doar primul element, altfel ar apărea o linie între fiecare paragraf,
   ca și cum ar fi întrebări diferite. */
.lp-faq-a ~ .lp-faq-a,
.lp-faq-a ~ .lp-faq-list-inline {
  border-top: none;
  padding-top: 0;
}
.lp-faq-a:not(:first-of-type) { padding-top: 0; }

.lp-faq-list-inline {
  margin: 0;
  padding: 0 var(--space-6) var(--space-4) calc(var(--space-6) + var(--space-5));
  color: var(--cream-dim);
  font-size: var(--text-base);
  line-height: 1.7;
}
.lp-faq-list-inline li { margin-bottom: var(--space-2); }
.lp-faq-list-inline li:last-child { margin-bottom: 0; }
.lp-faq-list-inline strong { color: var(--cream); font-weight: 600; }

/* ══════════════════════════════════════
   FINAL CTA
══════════════════════════════════════ */
.lp-final-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24);
  text-align: center;
}
.lp-final-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.lp-final-cta__pre {
  font-size: var(--text-sm);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lp-final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--cream);
  max-width: 700px;
}
.lp-final-cta__sub { font-size: var(--text-lg); color: var(--cream-dim); }
.lp-final-cta__note { font-size: var(--text-sm); color: var(--text-muted); }
.lp-final-cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(227,179,65,0.05) 0%, transparent 65%);
  pointer-events: none;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.lp-footer {
  background: var(--ink);
  border-top: 1px solid rgba(var(--tint-rgb),0.06);
  padding-block: var(--space-8);
}
.lp-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}
.lp-footer__logo { height: 30px; width: auto; opacity: 0.65; }
.lp-footer__legal { font-size: var(--text-xs); color: var(--text-muted); max-width: 560px; line-height: 1.6; }
.lp-footer__links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}
.lp-footer__links a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); }
.lp-footer__links a:hover { color: var(--cream); }
.lp-footer__copy { font-size: var(--text-xs); color: rgba(var(--tint-rgb),0.2); }
.lp-footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.lp-footer__powered {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.lp-footer__powered:hover { opacity: 0.75; }
.lp-footer__powered-sep {
  display: block;
  width: 1px;
  height: 24px;
  background: rgba(var(--tint-rgb),0.15);
  margin-right: 4px;
}
.lp-footer__powered-text {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--tint-rgb),0.5);
}
.lp-footer__powered-logo {
  height: 44px;
  width: auto;
  mix-blend-mode: screen;
}

/* Date firmă + linkuri conformitate (ANPC / NETOPIA) în footer */
.lp-footer__company { text-align: center; font-size: var(--text-xs); line-height: 1.75; color: var(--text-muted); max-width: 640px; margin: 4px auto 0; }
.lp-footer__compliance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: center;
  margin: 6px 0 2px;
}
.lp-footer__compliance a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); }
.lp-footer__compliance a:hover { color: var(--cream); }

/* Pictograma oficială ANPC - SAL (Ordin 449/2022, Anexa 2), afișată la lățimea reglementată de 250px */
.lp-footer__anpc { display: inline-flex; align-items: center; line-height: 0; }
.lp-footer__anpc img { display: block; width: 250px; height: auto; border-radius: 4px; }

/* Footer pe 3 coloane: stânga linkuri · centru brand+copyright · dreapta sigle ANPC+NETOPIA */
.lp-footer__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6) var(--space-10);
  width: 100%;
}
.lp-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.lp-footer__col--left   { align-items: flex-start; }
.lp-footer__col--center { align-items: center; text-align: center; gap: var(--space-3); }
.lp-footer__col--right  { align-items: flex-end; }
.lp-footer__col--left .lp-footer__links { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.lp-footer__col--center .lp-footer__brand-row { justify-content: center; flex-wrap: wrap; }
.lp-footer__col--center .lp-footer__copy { margin: 0; }
.lp-footer__col--right .lp-footer__compliance { flex-direction: column; align-items: flex-end; gap: var(--space-3); }
@media (max-width: 900px) {
  .lp-footer__grid { grid-template-columns: 1fr; justify-items: center; gap: var(--space-8); }
  .lp-footer__col { align-items: center; }
  .lp-footer__col--center { order: -1; }
  .lp-footer__col--left .lp-footer__links { align-items: center; }
  .lp-footer__col--right .lp-footer__compliance { align-items: center; }
  .lp-footer__anpc img { max-width: 100%; }
}

/* Sigla Netopia - imaginea oficială (np-white pe dark / np-black pe light), schimbată de theme.js. */
.lp-footer__netopia { display: inline-flex; align-items: center; }
.lp-footer__netopia img { display: block; width: 250px; height: auto; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
  /* Linkurile de navigație dispar pe telefon (sunt ancore către secțiuni aflate oricum mai jos),
     dar butonul de acțiune RĂMÂNE: pe index e singura cale către Login, iar pe curs.html singura
     către formularul de contact. Fără el, header-ul de mobil rămânea doar cu logo-ul.
     Ca să încapă lângă logo pe ecrane mici, micșorăm logo-ul și strângem spațiul dintre ele. */
  .lp-nav__links { display: none; }
  .lp-nav__inner { gap: var(--space-3); }
  .lp-nav__logo  { height: 36px; }
  .lp-nav__brand { min-width: 0; }            /* lasă logo-ul să cedeze primul, nu butonul */
  .lp-nav__cta   { flex-shrink: 0; white-space: nowrap; }

  .lp-compare {
    grid-template-columns: 1fr;
  }
  .lp-compare__vs { padding-top: 0; }

  .lp-instructor {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .lp-instructor__avatar-placeholder,
  .lp-instructor__avatar-img { margin-inline: auto; }
  .lp-instructor__stats { justify-content: center; }

  .lp-module__cols { grid-template-columns: 1fr; gap: var(--space-6); }
  .lp-module__tag  { display: none; }

  .lp-price-card { padding: var(--space-8) var(--space-6); }

  .lp-countdown__unit { min-width: 52px; }
  .lp-countdown__num  { font-size: var(--text-2xl); }

  .lp-guarantee-wrap { padding: var(--space-8) var(--space-6); }
}

@media (max-width: 480px) {
  .lp-problems-grid   { grid-template-columns: 1fr; }
  .lp-deliverables-grid { grid-template-columns: 1fr; }
  .lp-hero__title     { font-size: 1.8rem; }

  /* Telefoane înguste (iPhone SE ≈ 320px): mai strângem, ca butonul din header să nu împingă
     logo-ul în afara ecranului. Butonul cel mai lat e „Contactează-ne" de pe curs.html. */
  .lp-nav__logo { height: 30px; }
  .lp-nav__cta  { padding-inline: var(--space-3); }
}

/* ══════════════════════════════════════
   WEBINAR (înscriere workshop)
   - refolosește tokenii + componentele premium de mai sus
══════════════════════════════════════ */
.wbn-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(68px + var(--space-16));
  padding-bottom: var(--space-16);
}
.wbn-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: start;
  position: relative;
  z-index: 1;
}
.wbn-hero-content { max-width: 580px; }

.wbn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(227,179,65,0.10);
  border: 1px solid rgba(227,179,65,0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-5);
}
.wbn-pill::before { content: '●'; font-size: 8px; animation: wbn-pulse-dot 2s ease-in-out infinite; }
@keyframes wbn-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.wbn-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0 0 var(--space-5);
}
.wbn-desc {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--cream-dim);
  margin: 0 0 var(--space-6);
  max-width: 520px;
}
.wbn-date-block {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(var(--tint-rgb),0.03);
  border: 1px solid rgba(var(--tint-rgb),0.09);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.wbn-date-icon { font-size: 22px; flex-shrink: 0; }
.wbn-date-text { font-size: var(--text-base); font-weight: 600; color: var(--cream); line-height: 1.35; }
.wbn-date-loading { color: var(--text-muted); font-style: italic; font-weight: 400; }

.wbn-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wbn-trust li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.wbn-trust li::before { content: '✓'; color: var(--success); font-weight: 700; }

/* ── Card formular ── */
.wbn-form-card {
  background: var(--ink);
  border: 1px solid rgba(var(--tint-rgb),0.10);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position: sticky;
  top: calc(68px + var(--space-4));
  box-shadow: 0 20px 60px rgba(0,0,0,0.40);
}
/* Centrate: titlul formularului e raspunsul la intrebarea din titlul sectiunii,
   care e si el centrat. Distanta de dedesubt e calculata pentru cazul in care
   subtitlul lipseste - altfel titlul ar sta lipit de primul camp. */
.wbn-form-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--cream); margin: 0 0 var(--space-5); text-align: center; }
.wbn-form-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin: calc(-1 * var(--space-3)) 0 var(--space-6); text-align: center; }
.wbn-form-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.wbn-form-submit { width: 100%; margin-top: var(--space-2); }
.wbn-form-fine { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: var(--space-3); }
/* Aici linkul e o trimitere pe care omul are dreptul sa o urmeze inainte sa-si
   lase datele, nu un cuvant colorat. Auriul singur, pe un rand mic si gri, nu
   spune „se poate da click" - sublinierea o spune. */
.wbn-form-fine a { text-decoration: underline; text-underline-offset: 2px; }
.wbn-form-error { font-size: var(--text-sm); color: var(--danger); margin-top: var(--space-2); display: none; }
/* Numele și prenumele stau pe același rând; pe telefon se despart mai jos. */
.wbn-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ── Antetul fără formular ──
   Formularul a coborât în banda finală, deci antetul rămâne pe o coloană.
   Blocul se centrează, dar bifele își păstrează alinierea la stânga: o listă
   de bife centrată se citește prost. */
.wbn-hero-grid--solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.wbn-hero-grid--solo .wbn-hero-content { max-width: 760px; }
.wbn-hero-grid--solo .wbn-trust { display: inline-flex; text-align: left; }
/* Lista de bife devine inline ca să se centreze, iar butonul e tot un element
   inline - fără regula asta s-ar așeza unul lângă altul, pe același rând. */
.wbn-hero-grid--solo .wbn-hero-btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
/* Aceeași capcană, între data workshopului și lista de bife: caseta cu data e și
   ea `inline-flex`, deci cele două se lipeau una de alta pe același rând, cu
   data în stânga și bifele în dreapta. Le punem pe rânduri separate, păstrând
   centrarea. */
.wbn-hero-grid--solo .wbn-date-block { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
/* Paragraful de sub titlu are max-width 520px; într-un antet centrat rămânea
   lipit la stânga, fiindcă nu avea marginile automate. */
.wbn-hero-grid--solo .wbn-desc { margin-left: auto; margin-right: auto; }

/* ── Formularul din banda finală ──
   `sticky` avea sens cât stătea în coloana din dreapta a antetului; aici, într-o
   secțiune centrată, ar face cardul să se agațe inutil la derulare. */
.wbn-final__form { max-width: 540px; margin: var(--space-10) auto 0; text-align: left; }
.wbn-form-card--final { position: static; }

/* ── Stare mulțumire ── */
.wbn-thankyou { text-align: center; padding: var(--space-4) 0; }
.wbn-ty-icon { font-size: 48px; margin-bottom: var(--space-4); display: block; }
.wbn-ty-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--cream); margin: 0 0 var(--space-3); }
.wbn-ty-sub { font-size: var(--text-base); color: var(--text-muted); line-height: 1.6; margin: 0 0 var(--space-5); }
.wbn-ty-date { background: rgba(227,179,65,0.08); border: 1px solid rgba(227,179,65,0.20); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.wbn-ty-date-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-1); }
.wbn-ty-date-val { font-size: var(--text-base); font-weight: 600; color: var(--cream); }
.wbn-ty-note { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Agenda ── */
.wbn-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 900px;
  margin-inline: auto;
}
.wbn-step {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: rgba(var(--tint-rgb),0.02);
  border: 1px solid rgba(var(--tint-rgb),0.07);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base);
}
.wbn-step:hover { border-color: rgba(227,179,65,0.2); }
.wbn-step-num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: rgba(227,179,65,0.35); line-height: 1; flex-shrink: 0; min-width: 42px; }
.wbn-step-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--cream); margin: 0 0 var(--space-2); }
.wbn-step-desc { font-size: var(--text-sm); line-height: 1.65; color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .wbn-hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .wbn-form-card { position: static; }
}
@media (max-width: 640px) {
  .wbn-steps { grid-template-columns: 1fr; }
  .wbn-form-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   PACHETE (Basic / Pro) - pagina de ofertă
══════════════════════════════════════ */
.lp-packages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 840px;
  margin-inline: auto;
  align-items: stretch;
}
.lp-package {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  background: rgba(var(--tint-rgb),0.02);
  border: 1px solid rgba(var(--tint-rgb),0.09);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.lp-package:hover { border-color: rgba(227,179,65,0.25); }
.lp-package--featured {
  border: 2px solid rgba(227,179,65,0.5);
  background: rgba(227,179,65,0.03);
  box-shadow: 0 0 60px rgba(227,179,65,0.04);
}
.lp-package__ribbon {
  position: absolute;
  top: 0; right: var(--space-6);
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}
.lp-package__name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--cream); }
.lp-package__tagline { font-size: var(--text-sm); color: var(--text-muted); margin-top: calc(-1 * var(--space-3)); }
.lp-package__price { display: flex; flex-direction: column; gap: 2px; padding-block: var(--space-2); }
.lp-package__oldrow { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 1.4em; }
.lp-package__old { font-size: var(--text-base); color: var(--text-muted); text-decoration: line-through; }
.lp-package__disc {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-inverse);
  background: var(--gold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.lp-package__disc[hidden] { display: none; }
.lp-package__amount { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; color: var(--gold); letter-spacing: -0.03em; line-height: 1; }
.lp-package__vat { font-size: var(--text-xs); color: var(--text-muted); }
.lp-package__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.lp-package__features li { font-size: var(--text-sm); color: var(--cream-dim); line-height: 1.5; }
.lp-package__features li.is-off { color: var(--text-muted); }
.lp-package__split { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: 0; }
.lp-package__split strong { color: var(--cream-dim); }
.lp-btn--outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid rgba(227,179,65,0.5);
  padding: var(--space-4) var(--space-8);
}
.lp-btn--outline-gold:hover { background: rgba(227,179,65,0.08); border-color: var(--gold); transform: translateY(-2px); }
.lp-price-guarantee-note { text-align: center; font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-10); }

/* ── Rezervare (plasă de siguranță sub pachete) ── */
.lp-reserve {
  max-width: 560px;
  margin: var(--space-10) auto 0;
  padding: var(--space-8);
  background: rgba(var(--tint-rgb),0.02);
  border: 1px dashed rgba(227,179,65,0.35);
  border-radius: var(--radius-xl);
  text-align: center;
}
.lp-reserve__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.lp-reserve__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--cream);
  margin: 0 0 var(--space-2);
}
.lp-reserve__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-5);
}
.lp-reserve__text strong { color: var(--cream-dim); }

/* Formular: ascuns până la deschidere */
.lp-reserve__form {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  margin-top: var(--space-5);
  animation: lp-reserve-slide var(--transition-slow);
}
.lp-reserve.is-open .lp-reserve__form   { display: flex; }
.lp-reserve.is-open .lp-reserve__toggle { display: none; }

@keyframes lp-reserve-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lp-reserve__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.lp-reserve__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.lp-reserve__consent input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  flex-shrink: 0;
  cursor: pointer;
}
.lp-reserve__consent a { color: var(--gold); }

.lp-reserve__error { font-size: var(--text-sm); color: var(--danger); margin: 0; display: none; }
.lp-reserve__fine  { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: var(--space-2) 0 0; }

.form-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }

/* Confirmare rezervare */
.lp-reserve__done { animation: lp-reserve-slide var(--transition-slow); }
.lp-reserve__done[hidden] { display: none; }
.lp-reserve__done-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 700;
}
.lp-reserve__done-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--cream); margin: 0 0 var(--space-2); }
.lp-reserve__done-text  { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; margin: 0; }

@media (max-width: 480px) {
  .lp-reserve__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   MODAL CHECKOUT
══════════════════════════════════════ */
.lp-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.lp-modal[hidden] { display: none; }
.lp-modal__backdrop { position: absolute; inset: 0; background: rgba(5,10,18,0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lp-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: var(--ink);
  border: 1px solid rgba(227,179,65,0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lp-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: none; border: none; color: var(--text-muted);
  font-size: 28px; line-height: 1; cursor: pointer; transition: color var(--transition-fast);
}
.lp-modal__close:hover { color: var(--cream); }
.lp-modal__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-2); }
.lp-modal__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--cream); margin: 0 0 var(--space-1); }
.lp-modal__price { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; color: var(--gold); margin: 0 0 var(--space-6); }
.lp-modal__fields { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
/* Numele si prenumele stau pe acelasi rand, ca la formularul de rezervare. Pe
   ecran ingust cad unul sub altul: doua campuri de 40% latime nu se completeaza. */
.lp-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 480px) { .lp-modal__row { grid-template-columns: 1fr; } }
.lp-modal__error { font-size: var(--text-sm); color: var(--danger); margin-top: var(--space-3); display: none; }
.lp-modal__fine { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: var(--space-3); line-height: 1.5; }

/* ── Link „în 2 rate" pe cardul Pro ── */
.pro-rate-link {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.pro-rate-link:hover { color: var(--gold); }

/* ── Bloc explicativ rate în modalul de checkout ── */
.co-rate-info { margin-bottom: var(--space-5); }
.co-rate-info[hidden] { display: none; }

.co-rate-rows {
  border: 1px solid rgba(var(--tint-rgb),0.08);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.co-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-1) 0;
}
.co-rate-row strong { color: var(--cream); font-family: var(--font-display); }
.co-rate-row em { font-style: normal; opacity: 0.7; font-size: var(--text-xs); }
.co-rate-row--total {
  border-top: 1px solid rgba(var(--tint-rgb),0.08);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  color: var(--cream);
  font-weight: 600;
}

.co-rate-note {
  font-size: var(--text-xs);
  color: var(--warning);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}
.co-rate-access {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
  background: rgba(var(--tint-rgb),0.03);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
}
.co-rate-access strong { color: var(--cream-dim); }

/* Banda verde „plătește integral" */
.co-integral-band {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--transition-fast);
}
.co-integral-band:hover { background: rgba(34,197,94,0.18); }
.co-integral-band span:first-child { font-size: var(--text-sm); font-weight: 600; color: var(--success); }
.co-integral-band span:last-child  { font-size: var(--text-xs); color: var(--cream-dim); }

@media (max-width: 700px) {
  .lp-packages { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   HOMEPAGE (informativ)
══════════════════════════════════════ */
.hp-lead {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(var(--text-lg), 2.4vw, var(--text-2xl));
  line-height: 1.6;
  color: var(--cream-dim);
}
.hp-lead strong { color: var(--gold); font-weight: 600; }

.hp-modules {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.hp-mod {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgba(var(--tint-rgb),0.02);
  border: 1px solid rgba(var(--tint-rgb),0.07);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.hp-mod:hover { border-color: rgba(227,179,65,0.25); transform: translateY(-4px); }
.hp-mod__num { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; }
.hp-mod__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--cream); line-height: 1.3; }
.hp-mod__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; flex: 1; }
/* Varianta FARA descriere (banda de acoperire de pe curs.html: numar, titlu,
   eticheta). Fara `.hp-mod__desc`, care are `flex: 1`, nimic nu mai impinge
   eticheta in jos, iar cele opt carduri ar avea eticheta la inaltimi diferite,
   dupa cum titlul se rupe pe unul sau doua randuri. Selectorul se aplica doar
   cand eticheta vine imediat dupa titlu, deci cardurile cu descriere raman
   neatinse. */
.hp-mod__title + .hp-mod__tech { margin-top: auto; }
.hp-mod__tech {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-pale);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

@media (max-width: 1024px) { .hp-modules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hp-modules { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════
   DOCUMENT LEGAL (termeni, confidențialitate)
══════════════════════════════════════ */
.lp-doc {
  max-width: 760px;
  margin-inline: auto;
  padding-block: calc(68px + var(--space-16)) var(--space-20);
}
.lp-doc__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}
.lp-doc__updated { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-8); }
.lp-doc__note {
  background: rgba(227,179,65,0.06);
  border: 1px solid rgba(227,179,65,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  color: var(--cream-dim);
  line-height: 1.6;
  margin-bottom: var(--space-10);
}
.lp-doc h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--cream);
  margin: var(--space-10) 0 var(--space-4);
}
.lp-doc h3 { font-size: var(--text-base); font-weight: 700; color: var(--cream); margin: var(--space-6) 0 var(--space-2); }
.lp-doc p { font-size: var(--text-base); color: var(--cream-dim); line-height: 1.75; margin-bottom: var(--space-4); }
.lp-doc ul, .lp-doc ol { padding-left: var(--space-6); margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.lp-doc li { font-size: var(--text-base); color: var(--cream-dim); line-height: 1.7; }
.lp-doc strong { color: var(--cream); }
.lp-doc a { color: var(--gold); }
.lp-doc__placeholder { color: var(--gold); background: rgba(227,179,65,0.10); padding: 0 4px; border-radius: 3px; font-style: normal; }

/* ══════════════════════════════════════
   ASEZAREA PE SECTIUNI LA DERULARE
══════════════════════════════════════ */
/* Efectul urmarit: cine deruleaza vede o sectiune intreaga pe ecran, nu randuri
   taiate din cea de dinainte si din cea care urmeaza.
   Se obtine din doua mecanisme care lucreaza impreuna:
     1. sectiunile scunde sunt INTINSE pe toata fereastra, cu continutul centrat
        pe verticala - altfel sub ele s-ar vedea inceputul urmatoarei;
     2. derularea se AGATA de inceputul lor.

   Nimic din blocul asta nu se aplica singur. Totul atarna de clasa .lp-snap pusa
   pe <html> din scriptul paginii, iar scriptul o pune doar dupa ce a masurat
   fiecare sectiune - si numai pe cele care chiar incap in fereastra (.lp-snap-fit).
   O sectiune mai lunga decat ecranul ramane cu derulare libera: agatata, browserul
   ar trage inapoi exact cand omul incearca sa citeasca restul.

   mandatory, nu proximity: fiecare oprire cade pe o sectiune, deci nu se poate
   ramane niciodata cu jumatate dintr-o sectiune si jumatate din urmatoarea pe
   ecran. Reproșul obisnuit adus lui mandatory - ca ascunde continut mai lung
   decat fereastra - nu ne atinge, fiindca scriptul activeaza tot mecanismul doar
   cand TOATE sectiunile incap deja in ecran. Cu proximity, masuratorile aratau
   ca doar una din doua opriri se aseaza; restul ramaneau la mijloc de drum.

   dvh, nu vh: pe telefon vh se calculeaza cu bara de adresa ascunsa, deci o
   sectiune de 100vh depaseste ecranul vizibil cu inaltimea barei. */
:root { --nav-h: 68px; }

html.lp-snap {
  scroll-snap-type: y mandatory;
  /* Bara de sus e fixa, deci punctul de aterizare coboara sub ea. */
  scroll-padding-top: var(--nav-h);
}

html.lp-snap .lp-snap-fit {
  scroll-snap-align: start;
  /* Fereastra minus bara fixa - inaltimea chiar vizibila sub ea. */
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Antetele isi tin deja singure spatiul barei in padding-top, deci se intind pe
   toata fereastra, nu doar pe ce ramane sub bara. */
html.lp-snap .wbn-hero.lp-snap-fit,
html.lp-snap .lp-hero.lp-snap-fit { min-height: 100dvh; }

/* La o sectiune agatata, cei 96px de sus si de jos nu se vad niciodata: inaltimea
   e oricum intinsa la fereastra, iar continutul e centrat pe verticala. Padding-ul
   ramane doar o garda pentru cazul in care continutul ar creste. Stramtorat la
   24px, sectiunea „probleme" scade de la 967px la ~823px, deci pragul de la care
   merge toata pagina coboara de la ferestre de 1035px la ~890px. Nu se pierde
   niciun rand de text si nu se vede nicio diferenta.
   .lp-snap-masor e clasa pusa de script cat tine masuratoarea: sectiunile trebuie
   masurate exact in conditiile in care vor fi daca se agata, altfel ar fi judecate
   dupa o inaltime pe care oricum nu o vor avea. */
html.lp-snap-masor .lp-section,
html.lp-snap-masor .lp-final-cta,
html.lp-snap .lp-section.lp-snap-fit,
html.lp-snap .lp-final-cta.lp-snap-fit { padding-block: var(--space-6); }

/* Subsolul are nevoie de punctul lui de agatare, altfel devine de neatins.
   Agatarea dura obliga derularea sa se opreasca pe un punct declarat, iar fara
   randul asta ultimul punct valid e sectiunea finala - deci pagina refuza sa
   mearga mai departe si nimeni nu mai ajunge la Termeni, Confidentialitate sau
   ANPC. Verificat: fara regula asta, nici rotita si nici tasta End nu coborau
   sub sectiunea finala.
   Aliniat la capatul ferestrei (end), nu la inceput: subsolul are ~200px, iar
   agatat cu marginea de sus ar lasa restul ecranului gol. */
html.lp-snap footer { scroll-snap-align: end; }