:root {
  /* Culorile sunt luate din PDF-urile de design (options 3 si 4), nu din
     styleguide-ul scris initial, care ramasese in urma. */
  --purple: #7683E3;
  --purple-dark: #5D6BD6;
  --purple-light: #E8EAFF;
  --purple-bg: #E8EAFF;
  --green: #0FCE8B;
  --green-dark: #0BAF75;
  --green-bg: #DFF4E1;
  --navy: #394963;
  --gray-bg: #CFD5E1;
  --purple-pale: #BAC0F0;
  --bg: #F4F5FA;
  --card: #FFFFFF;
  --text: #394963;
  --text-2: #6B6B85;
  --text-3: #A6A6BF;
  --border: #4A4A63;
  --border-light: #D9D9E5;
  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 6px 24px rgba(65, 62, 130, .10);
  --font: 'Inter', sans-serif;      /* titluri */
  --font-body: 'Roboto', sans-serif; /* text normal */
}

/* Paleta paginii 5 (options_7): acelasi layout ca pagina 3, dar violet + mov-lila.
   E limitata la pagina care poarta clasa, ca sa nu atinga paginile 1-4. */
.theme-violet {
  --purple: #8079FD;
  --purple-dark: #6A63F0;
  --purple-bg: #E3E3FF;
  --purple-light: #EBDDFF;
  --mauve: #AA89D8;
}
.theme-violet .eyebrow,
.theme-violet .link-inline { color: var(--mauve) }
.btn-mauve { background: var(--mauve); color: #fff }
.btn-mauve:hover { background: #9878CC }
/* Aceeasi sectiune "Nu esti singur" de la pagina 4, recolorata lavanda (pagina 6) */
/* Pe pagina 6 golul dintre sondaj si taburi e mult mai mic decat pe pagina 4 */
.theme-violet .tabs-row { margin-top: 28px }
.theme-violet .section-lavender { background: var(--purple-light) }
.theme-violet .section-lavender .h-lg { margin: 0 0 36px }
.theme-violet .article-thumb { background: var(--mauve) }
.theme-violet .article-link { color: var(--mauve) }

/* Paleta paginii 7 (options_9): acelasi layout ca pagina 3, dar steel-blue + mov-lila. */
.theme-steel {
  --purple: #6998B4;
  --purple-dark: #5A84A0;
  --purple-bg: #DAEBF5;
  --purple-light: #ECF0F3;
  --mauve: #AA89D8;
}

/* Din CSS-ul oficial de design tokens: stilurile de caracter 1/3/4/7 (titluri
   si text normal) folosesc #32343B, nu #394963 ca restul paginilor. Aplicat
   aplicat pe toate paginile (1-7) la cererea explicita a clientului. */
.theme-p2-text {
  --text: #32343B;
}

.page-1 {
  --bg: #F4F4FB;
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .problem-slide { margin: 0 0 14px; font-family: var(--font); font-weight: 700; color: var(--text); line-height: 1.3 }
p { margin: 0 0 14px; color: var(--text-2) }
a { color: var(--purple); text-decoration: none }
img { max-width: 100%; height: auto; display: block }

.wrap { max-width: 420px; margin: 0 auto; padding: 0 20px }
.center { text-align: center }
.section { padding: 36px 0 }
.muted { color: var(--text-2) }
.small { font-size: .85rem }
.caption { font-size: .9rem; color: var(--text-2) }
.illustration { margin: 20px auto }

/* Header */
.site-header { background: var(--bg); padding: 16px 0; position: sticky; top: 0; z-index: 50 }
.header-inner { display: flex; align-items: center; justify-content: space-between }
.logo { font-weight: 700; font-size: 1.05rem; color: var(--text) }
.link-subscribe { font-weight: 600; text-decoration: underline }
.header-right { display: flex; align-items: center; gap: 10px }

/* Sub ~380px (telefoane mici: iPhone SE/mini, multe Android-uri de buget),
   logo-ul și butoanele din dreapta nu mai încap pe un singur rând — butonul
   "Intră în cont" ajungea suprapus peste text. Trecem header-right pe un al
   doilea rând, aliniat tot la dreapta. */
@media (max-width: 400px) {
  .header-inner { flex-wrap: wrap; row-gap: 8px }
  .header-right { margin-left: auto }
  /* La ecrane foarte inguste, padding-ul standard al butonului lasa prea
     putin loc textului "Continuă →" din sondaje, si sageata trece pe randul
     urmator. */
  .survey-nav .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap }
}
.auth-panel-title { margin: 0; font-family: var(--font); font-weight: 700; font-size: 1.1rem; color: var(--text); text-align: center }
.btn-forgot { background: none; border: none; cursor: pointer; font-size: .82rem; color: var(--text-2); font-family: var(--font-body); text-align: center; text-decoration: underline; padding: 0; margin-top: -4px }
.btn-forgot:hover { color: var(--purple) }
.btn-forgot:disabled { opacity: .6; cursor: default }
.btn-login-header {
  font-size: .82rem; font-weight: 600; font-family: var(--font);
  padding: 6px 14px; border-radius: 999px;
  background: var(--purple); color: #fff;
  border: none; cursor: pointer; text-decoration: none;
  transition: background .15s;
}
.btn-login-header:hover { background: var(--purple-dark); color: #fff }
.user-chip[hidden] { display: none }
.user-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--card);
  border: 1.5px solid var(--border-light);
  border-radius: 999px;
  padding: 3px 12px 3px 4px;
  box-shadow: 0 2px 8px rgba(65,62,130,.07);
  font-size: .82rem;
}
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; font-family: var(--font);
  flex-shrink: 0;
}
.user-label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); font-family: var(--font) }
.user-sep { color: var(--text-3); font-size: .75rem }

/* Pe mobile ascundem eticheta și separatorul — avatarul cu litera e suficient */
@media (max-width: 540px) {
  .user-label, .user-sep { display: none }
}
.btn-signout { background: none; border: none; cursor: pointer; font-size: .78rem; color: var(--text-2); padding: 0; font-family: var(--font-body) }
.btn-signout:hover { color: var(--text) }
.btn-admin-header {
  font-size: .78rem; font-weight: 600; font-family: var(--font);
  padding: 5px 12px; border-radius: 999px;
  background: var(--green); color: #fff;
  text-decoration: none; transition: background .15s;
}
.btn-admin-header:hover { background: var(--green-dark); color: #fff }

/* Hero */
.pill {
  display: inline-block;
  background: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.hero h1, .hero .problem-slide { font-size: 1.7rem; font-weight: 700 }

/* Carousel-ul de probleme din hero — înălțimea rândului de text e fixată din
   JS (--carousel-h, la înălțimea celui mai lung slide), ca la schimbarea
   slide-ului să nu împingă ilustrația de dedesubt în sus sau în jos.
   Slide-urile sunt suprapuse (position:absolute) și trec unul în altul
   printr-un fade lent — fără transform/translateX, care lăsa uneori
   textul nealiniat pe Safari mobil (bug descoperit anterior). */
.problem-carousel { position: relative; width: 100%; touch-action: pan-y; min-height: var(--carousel-h, auto) }
.problem-slide {
  margin: 0;
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.problem-slide.is-active { opacity: 1; pointer-events: auto }
.problem-dots { display: none }

/* Ilustrația se schimbă odată cu sloganul din carousel, cu același fade —
   proporții diferite la fiecare, deci fixăm o înălțime minimă (--illu-h,
   din JS) ca restul paginii să nu sară în sus/jos la comutare. */
.problem-illustrations { position: relative; min-height: var(--illu-h, auto) }
.problem-illustration {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: auto;
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.problem-illustration.is-active { opacity: 1 }
/* Nivel 7 - Vacanta.svg și Nivel 5 - Economii.svg au mai puțin spațiu gol
   sus în desen decât Hero Illustration P7.svg, deci textul de deasupra
   pare lipit de ilustrație la ele — compensăm cu un mic offset. */
.problem-illustration-pad { margin-top: 20px }
.problem-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px;
  background: var(--border-light); cursor: pointer; transition: background .2s, transform .2s;
}
.problem-dot.active { background: var(--purple); transform: scale(1.3) }

/* ════════════════════════════════════════════════════════════════════
   Redesign "dneros" (Andreea) — pagina-8.html. Scopat sub .theme-dneros
   ca restul paginilor (index, articole, nivel-1 deocamdată) să rămână
   neatinse. Lucrăm secțiune cu secțiune: aici doar header + hero +
   cardul "Aici găsești soluția" de sus. Restul paginii (sondaj, tab-uri,
   accordion, footer) rămâne cu stilul vechi până ajungem la ele.
   ════════════════════════════════════════════════════════════════════ */
.theme-dneros {
  --d-blue-1: #2391F0;
  --d-blue-2: #082C96;
  /* Al 2-lea gradient din Figma — nefolosit încă, pentru o secțiune
     ulterioară (urmează de confirmat exact unde). */
  --d-accent-1: #3FA2F9;
  --d-accent-2: #5720E3;
}

/* Header-ul stă peste gradient (transparent) cât timp ești sus pe
   pagină; după scroll primește fundal albastru solid (clasa .is-scrolled
   din js/script.js), ca să rămână lizibil și sticky ca înainte. */
.theme-dneros .site-header { background: transparent; transition: background .25s, box-shadow .25s }
.theme-dneros .site-header.is-scrolled { background: var(--d-blue-2); box-shadow: 0 4px 18px rgba(8, 44, 150, .25) }
.theme-dneros .logo { color: #fff; font-size: .95rem }
.theme-dneros .link-subscribe { color: #fff; text-decoration: none; font-size: .9rem }
.theme-dneros .link-subscribe:hover { opacity: .85 }

/* Blocul albastru de sus — urcă sub header (margin negativ = înălțimea
   header-ului, setată din JS în --header-h), cu colțurile de jos rotunjite. */
.theme-dneros .dneros-top {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--header-h, 64px));
  padding-top: var(--header-h, 64px);
  background: linear-gradient(160deg, var(--d-blue-1) 0%, var(--d-blue-2) 100%);
  border-radius: 0 0 32px 32px;
}
.theme-dneros .dneros-top > section { position: relative; z-index: 1 }

/* Hexagoanele decorative din design — doar CSS, fără imagini. */
.theme-dneros .hex {
  position: absolute; z-index: 0; pointer-events: none;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  border-radius: 12px;
}
.theme-dneros .hex-big    { width: 520px; height: 600px; right: -140px; top: 40px; background: rgba(255, 255, 255, .06) }
.theme-dneros .hex-mid    { width: 110px; height: 120px; right: 60px; bottom: 150px; background: rgba(255, 255, 255, .18) }
.theme-dneros .hex-small  { width: 34px;  height: 38px;  right: 120px; top: 230px; background: rgba(120, 210, 255, .55) }
.theme-dneros .hex-left-1 { width: 40px;  height: 44px;  left: 18px;  top: 260px; background: rgba(35, 145, 240, .55) }
.theme-dneros .hex-left-2 { width: 54px;  height: 60px;  left: -6px;  top: 300px; background: rgba(35, 145, 240, .35) }

.theme-dneros .hero-row {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 28px;
}
.theme-dneros .hero-text { width: 100% }
.theme-dneros .hero .pill {
  background: transparent; box-shadow: none; padding: 0; margin-bottom: 12px;
  color: #fff; font-weight: 600;
  font-size: clamp(.95rem, .86rem + .38vw, 1.25rem);
}
/* Tipografie fluidă: aceeași regulă de la telefon la desktop mare, ca să nu
   mai fie nevoie de o mărime fixă pe fiecare prag. */
.theme-dneros .hero h1, .theme-dneros .hero .problem-slide {
  color: #fff; font-weight: 400; line-height: 1.2;
  font-size: clamp(1.75rem, 1.05rem + 2.7vw, 3.4rem);
}
.theme-dneros .problem-illustrations { margin-top: 8px; width: 100% }

.theme-dneros .dneros-subscribe { padding-top: 8px; padding-bottom: 48px }
.theme-dneros .dneros-subscribe-row {
  display: flex; flex-direction: column; gap: 22px; text-align: center;
}
.theme-dneros .dneros-subscribe .eyebrow {
  color: #fff; margin-bottom: 8px;
  font-size: clamp(1rem, .92rem + .32vw, 1.3rem);
}
.theme-dneros .dneros-subscribe-text p {
  color: rgba(255, 255, 255, .88); line-height: 1.55; margin: 0;
  font-size: clamp(.88rem, .83rem + .22vw, 1.05rem);
}

/* Email + buton: pe mobil unul sub altul; de la 480px stau amândouă
   într-un singur „pill" translucid, ca în design. */
.theme-dneros .dneros-subscribe .subscribe-form {
  max-width: 520px; width: 100%; margin: 0 auto; position: relative;
}
.theme-dneros .dneros-subscribe .subscribe-form input {
  border: none; border-radius: 999px; padding: 15px 22px; min-width: 0;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.theme-dneros .dneros-subscribe .subscribe-form input::placeholder { color: rgba(255, 255, 255, .85) }
.theme-dneros .dneros-subscribe .subscribe-form input:focus {
  background: rgba(255, 255, 255, .24); box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.theme-dneros .dneros-subscribe .subscribe-form .btn {
  border-radius: 999px; background: #5CCFAE; color: #fff;
  text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; font-weight: 700;
  padding: 15px 22px; box-shadow: 0 6px 18px rgba(20, 60, 120, .3);
}
.theme-dneros .dneros-subscribe .subscribe-form .btn:hover { background: #4CC29F }
.theme-dneros .dneros-subscribe .form-note { color: #fff }

/* După abonare, bara de email + buton e înlocuită de confirmare, în
   aceeași formă rotunjită (clasa .is-sent vine din js/subscribe.js). */
.subscribe-done { display: none }
.theme-dneros .dneros-subscribe .subscribe-form.is-sent input,
.theme-dneros .dneros-subscribe .subscribe-form.is-sent .btn,
.theme-dneros .dneros-subscribe .subscribe-form.is-sent .form-note { display: none }
.theme-dneros .dneros-subscribe .subscribe-form.is-sent {
  background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 5px;
}
.theme-dneros .dneros-subscribe .subscribe-form.is-sent .subscribe-done {
  display: flex; align-items: center; gap: 14px; text-align: left;
  flex: 1 1 auto; padding: 6px 16px;
}
.theme-dneros .subscribe-done-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: #5CCFAE; display: flex; align-items: center; justify-content: center;
}
.theme-dneros .subscribe-done-text {
  color: rgba(255, 255, 255, .85); font-size: .82rem; line-height: 1.35;
}
.theme-dneros .subscribe-done-text strong {
  display: block; color: #fff; font-family: var(--font); font-size: .95rem;
}

@media (min-width: 480px) {
  .theme-dneros .dneros-subscribe .subscribe-form {
    flex-direction: row; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 5px;
  }
  .theme-dneros .dneros-subscribe .subscribe-form input {
    flex: 1 1 auto; background: transparent; padding: 12px 18px;
  }
  .theme-dneros .dneros-subscribe .subscribe-form .btn {
    flex: 0 0 auto; width: auto; white-space: nowrap;
    padding: 13px clamp(14px, 1.4vw, 24px);
    font-size: clamp(.7rem, .58rem + .35vw, .85rem);
  }
  /* Mesajul de eroare iese din „pill", sub el, ca să nu-l deformeze. */
  .theme-dneros .dneros-subscribe .form-note {
    position: absolute; top: 100%; left: 18px; margin: 6px 0 0;
  }
}

@media (min-width: 900px) {
  .theme-dneros .dneros-top { border-radius: 0 0 56px 56px }
  .theme-dneros .hero { padding-top: 56px }
  .theme-dneros .hero-row {
    flex-direction: row; align-items: center; text-align: left;
    justify-content: space-between; gap: clamp(24px, 3vw, 64px);
  }
  .theme-dneros .hero-text { flex: 1 1 52% }
  .theme-dneros .problem-illustrations {
    flex: 0 1 clamp(300px, 36vw, 520px); max-width: 520px; margin-top: 0;
  }
  .theme-dneros .dneros-subscribe { padding-top: 40px; padding-bottom: 64px }
  .theme-dneros .dneros-subscribe-row {
    flex-direction: row; align-items: center; text-align: left;
    justify-content: space-between; gap: clamp(24px, 3vw, 56px);
  }
  .theme-dneros .dneros-subscribe-text { flex: 1 1 45% }
  .theme-dneros .dneros-subscribe .subscribe-form {
    flex: 0 1 clamp(380px, 42vw, 560px); max-width: 560px; margin: 0;
  }
}

/* Blocul albastru respiră mai larg decât restul paginii pe ecrane mari —
   în design textul pornește aproape de marginea blocului. Header-ul
   folosește același container, altfel logo-ul nu se aliniază cu textul
   de dedesubt. */
@media (min-width: 900px) {
  .theme-dneros .dneros-top .wrap,
  .theme-dneros .site-header .wrap {
    max-width: min(1340px, 92vw); padding: 0 clamp(24px, 2.6vw, 48px);
  }
  .theme-dneros .hero { padding-top: 72px }
  .theme-dneros .dneros-subscribe { padding-bottom: 80px }
}
@media (max-width: 899px) {
  .theme-dneros .hex-big, .theme-dneros .hex-mid, .theme-dneros .hex-small { display: none }
}


/* ══ Varianta de telefon (pagina 8) ═══════════════════════════════════
   Designul de desktop rămâne neatins: tot ce urmează e în blocuri
   @media (max-width: 899px). Secțiunea 1: blocul albastru de sus. */
@media (max-width: 899px) {
  .theme-dneros .hero { padding-top: 26px; padding-bottom: 0 }
  .theme-dneros .hero-row { gap: 4px }
  .theme-dneros .hero .pill { font-size: .85rem; margin-bottom: 10px }
  .theme-dneros .hero h1, .theme-dneros .hero .problem-slide { font-size: 1.5rem; line-height: 1.28 }
  .theme-dneros .problem-illustrations { margin-top: 0 }

  /* „Aici găsești soluția" e aliniat la stânga pe telefon, nu centrat. */
  .theme-dneros .dneros-subscribe { padding-top: 4px; padding-bottom: 34px }
  .theme-dneros .dneros-subscribe-row { text-align: left; gap: 18px }
  .theme-dneros .dneros-subscribe .eyebrow { font-size: 1.1rem; margin-bottom: 6px }
  .theme-dneros .dneros-subscribe-text p { font-size: .94rem; line-height: 1.5 }

  .theme-dneros .dneros-subscribe .subscribe-form input { padding: 17px 24px; font-size: .95rem }
  .theme-dneros .dneros-subscribe .subscribe-form .btn {
    padding: 18px 20px; font-size: .9rem; border-radius: 999px;
  }
  .theme-dneros .dneros-subscribe .subscribe-form.is-sent { text-align: left }
}

/* ── Redesign dneros: zona de sondaj ─────────────────────────────── */
.theme-dneros .dneros-survey { position: relative; overflow: hidden }

/* Ilustrațiile laterale sunt decor: ies parțial în afara ecranului și
   dispar pe ecrane mici, ca să nu fure spațiu de la întrebări. */
.theme-dneros .survey-deco {
  position: absolute; z-index: 0; pointer-events: none; margin: 0;
  width: auto; opacity: .95;
}
/* Ancorate pe mijlocul blocului, ca să stea bine și când întrebarea are
   puține opțiuni, nu doar la prima. */
.theme-dneros .survey-deco { top: 50%; transform: translateY(-42%) }
.theme-dneros .survey-deco-left { left: 0; height: 270px }
.theme-dneros .survey-deco-right { right: 0; height: 240px }
.theme-dneros .dneros-survey > section { position: relative; z-index: 1 }

/* În design accentul e pe întrebare, nu pe titlul secțiunii: titlul e mic
   și închis la culoare, întrebarea e mare și albastră. */
.theme-dneros .dneros-survey-intro .h-lg {
  font-size: clamp(.95rem, .9rem + .2vw, 1.1rem);
  font-weight: 700; line-height: 1.45; margin-bottom: 4px;
}
.theme-dneros .card.survey { background: transparent; box-shadow: none; padding: 0 }
.theme-dneros .survey h2 {
  color: var(--d-blue-1); text-align: center; margin-bottom: 22px;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
}
.theme-dneros .survey-wrap { max-width: 520px; padding-top: 8px }
/* Bara de progres nu apare în design. */
.theme-dneros .survey-progress-bar,
.theme-dneros .survey-step-label { display: none }

.theme-dneros .chip {
  border: none; border-radius: 999px; padding: 16px 22px;
  text-align: center; background: #fff; color: #5A6478;
  box-shadow: 0 4px 14px rgba(27, 60, 120, .07);
  transition: box-shadow .15s, color .15s, background .15s;
}
.theme-dneros .chip-field input:checked + .chip {
  background: #fff; color: var(--d-blue-1); font-weight: 600;
  box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}
.theme-dneros .chip-field input:focus-visible + .chip { outline: 2px solid var(--d-blue-1) }
.theme-dneros .survey .form-note { text-align: center }

.theme-dneros .survey-nav { justify-content: center; margin-top: 22px }
.theme-dneros .survey-nav > span { display: none }
.theme-dneros .survey-nav .btn {
  /* Pe telefon cele două butoane trebuie să încapă unul lângă altul, deci
     pot să se strângă; lățimea „confortabilă" vine de la 560px în sus. */
  flex: 0 1 auto; min-width: 140px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(.78rem, .72rem + .2vw, .9rem);
  padding: 15px clamp(16px, 4vw, 34px);
}
.theme-dneros .survey-nav .btn-primary {
  background: linear-gradient(180deg, #3FA2F9, var(--d-blue-1));
  box-shadow: 0 8px 20px rgba(35, 145, 240, .35);
}
.theme-dneros .survey-nav .btn-primary:hover { background: var(--d-blue-1) }
.theme-dneros .survey-nav .btn-outline {
  background: #fff; color: var(--d-blue-1); border: 1px solid #CFE2F8;
}

/* Ecranul de rezultate / „Te-am recunoscut!" — fără card, titlu albastru,
   iar fiecare bară are eticheta și procentul pe un rând, bara dedesubt. */
.theme-dneros .survey-wrap .card {
  background: transparent; box-shadow: none; padding: 0; margin-top: 8px !important;
}
.theme-dneros .survey-wrap .icon-circle { display: none }
.theme-dneros .survey-wrap .card h2 {
  color: var(--d-blue-1); margin-bottom: 4px;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem);
}
.theme-dneros .survey-wrap .card .muted {
  color: var(--d-blue-1); font-weight: 600;
  font-size: clamp(.9rem, .86rem + .2vw, 1.05rem);
}
.theme-dneros .results-bars { gap: 18px; text-align: left }
/* Nota de sub grafic: explică din ce se calculează procentele. Trebuie să
   fie mai discretă decât textul .muted din card, de-aia selectorul e mai
   specific decât „.theme-dneros .survey-wrap .card .muted". */
.results-nota { margin-top: 16px; font-size: .78rem; line-height: 1.5; text-align: left }
.theme-dneros .survey-wrap .card .muted.results-nota {
  margin-top: 18px;
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.55;
  /* --text-3 ar fi prea deschis pentru text mic: 2,4:1 pe alb, sub pragul
     de lizibilitate. --text-2 dă 5,2:1. */
  color: var(--text-2);
  text-align: left;
}
.theme-dneros .results-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 12px; row-gap: 6px;
}
/* Învelișul vechi dispare din layout, ca bara să poată trece pe rândul
   ei, sub etichetă și procent. */
.theme-dneros .results-track-wrap { display: contents }
.theme-dneros .results-label { grid-column: 1; grid-row: 1; font-size: .9rem; color: #5A6478 }
.theme-dneros .results-pct {
  grid-column: 2; grid-row: 1; color: var(--d-blue-1); font-size: .95rem;
}
.theme-dneros .results-track {
  grid-column: 1 / -1; grid-row: 2;
  height: 42px; background: #fff; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(27, 60, 120, .07);
}
.theme-dneros .results-fill {
  height: 100%; border-radius: 999px;
  background: var(--d-blue-1);
  /* Stilul vechi avea umbră violet sub bară — în design e doar albastru. */
  box-shadow: none;
}

@media (min-width: 560px) {
  .theme-dneros .survey-nav .btn { min-width: 210px }
}

@media (min-width: 1100px) {
  .theme-dneros .survey-deco-left { left: 0; height: 320px }
  .theme-dneros .survey-deco-right { right: 0; height: 290px }
}
@media (max-width: 899px) {
  .theme-dneros .survey-deco { display: none }
}


/* ══ Telefon, secțiunea 2: sondajul ═══════════════════════════════════ */
/* Ilustrațiile de telefon există doar sub 720px. */
.theme-dneros .survey-deco-mob,
.theme-dneros .abonare-bot-mob { display: none }

@media (max-width: 899px) {
  .theme-dneros .survey-deco-mob {
    display: block; position: absolute; top: 0; z-index: 0;
    width: auto; margin: 0; pointer-events: none;
  }
  .theme-dneros .survey-deco-mob-left  { left: -36px; height: 102px }
  .theme-dneros .survey-deco-mob-right { right: -10px; height: 78px }

  /* Titlul sondajului stă între cele două ilustrații. */
  .theme-dneros .dneros-survey-intro { padding-top: 18px }
  .theme-dneros .dneros-survey-intro .wrap { padding-left: 76px; padding-right: 76px }
  .theme-dneros .dneros-survey-intro .h-lg {
    font-size: .95rem; line-height: 1.35; margin-bottom: 0;
  }

  /* Bara de progres: segmente, unul pe întrebare, ca în machetă. */
  .theme-dneros .survey-progress-bar {
    display: block; height: 4px; border-radius: 0; margin: 22px 0 26px;
    background: #DCE7F5;
    --seg: calc(100% / var(--steps, 6));
    --seg-gap: 10px;
    -webkit-mask-image: repeating-linear-gradient(90deg,
      #000 0, #000 calc(var(--seg) - var(--seg-gap)),
      transparent calc(var(--seg) - var(--seg-gap)), transparent var(--seg));
    mask-image: repeating-linear-gradient(90deg,
      #000 0, #000 calc(var(--seg) - var(--seg-gap)),
      transparent calc(var(--seg) - var(--seg-gap)), transparent var(--seg));
  }
  .theme-dneros .survey-progress-fill { background: var(--d-blue-1); border-radius: 0 }

  .theme-dneros .survey-wrap { padding-top: 0 }
  .theme-dneros .survey h2 { font-size: 1.35rem; line-height: 1.3; margin-bottom: 20px }

  /* Opțiunile: pastile albe pe toată lățimea, cu textul la stânga. */
  .theme-dneros .chips { gap: 14px }
  .theme-dneros .chip {
    text-align: left; padding: 18px 22px; font-size: .95rem; line-height: 1.35;
    box-shadow: 0 4px 16px rgba(27, 60, 120, .08);
  }

  .theme-dneros .survey .form-note { font-size: .8rem; font-weight: 700; margin-top: 16px }

  /* Butonul de continuare ocupă toată lățimea. */
  .theme-dneros .survey-nav { margin-top: 20px; gap: 12px }
  .theme-dneros .survey-nav .btn { flex: 1 1 auto; min-width: 0; padding: 18px 16px; font-size: .88rem }
}

/* ── Redesign dneros: blocul albastru cu taburile și acordeonul ──── */
/* Fără overflow:hidden pe secțiune — ar strica poziția sticky a
   taburilor. Hexagoanele stau într-un strat propriu, decupat. */
.theme-dneros .tabs-section {
  position: relative; margin: 0 16px 8px; padding: 26px 0 40px;
  border-radius: 32px;
  /* Gradientul e măsurat din fundalul primit în machetă: direcția și cele
     două capete reies dintr-o potrivire liniară pe zona lui curată. */
  background: linear-gradient(220deg, #218DEB 0%, #072C96 100%);
}
.theme-dneros .tabs-section [data-tab-panel] { background: transparent }
/* Hexagoanele din machetă, refăcute în CSS ca să nu se deformeze: cardul
   își schimbă înălțimea de la un tab la altul, iar o imagine întinsă le-ar
   alungi. Cele de sus sunt ancorate de marginea de sus, cele de jos de
   marginea de jos, deci compoziția rămâne aceeași la orice înălțime.
   Mărimile și pozițiile sunt măsurate din imaginea primită (1442×894). */
.theme-dneros .tabs-deco {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  pointer-events: none; z-index: 0;
}
.theme-dneros .tabs-deco .hex {
  position: absolute;
  /* Hexagoane cu vârful sus și jos, laturile din stânga/dreapta drepte. */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.theme-dneros .tabs-hex-1 {
  width: 608px; height: 702px; right: -288px; top: -65px;
  background: rgba(50, 192, 240, .22);
}
.theme-dneros .tabs-hex-2 {
  width: 520px; height: 600px; right: -278px; bottom: -130px;
  background: rgba(50, 192, 240, .16);
}
.theme-dneros .tabs-hex-3 {
  width: 113px; height: 131px; right: 5px; bottom: 182px;
  background: rgba(150, 225, 250, .36);
}
.theme-dneros .tabs-hex-4 {
  width: 41px; height: 45px; right: 61px; top: 325px;
  background: #32C0F0;
}
.theme-dneros .tabs-hex-5 {
  width: 44px; height: 42px; left: 9px; top: 212px;
  background: rgba(31, 136, 240, .57);
}
.theme-dneros .tabs-hex-6 {
  width: 21px; height: 19px; left: 81px; top: 204px;
  background: rgba(31, 136, 240, .57);
}
.theme-dneros .tabs-hex-7 {
  width: 62px; height: 72px; left: -25px; top: 284px;
  background: rgba(31, 136, 240, .45);
}

/* Roboții ies în afara cardului, deci nu intră în stratul decupat. */
.theme-dneros .tabs-bot { position: absolute; z-index: 2; margin: 0; width: auto; pointer-events: none }
.theme-dneros .tabs-bot-idea { right: 4px; bottom: -60px; height: 200px }
/* Panourile stau peste decor, dar sub bara de taburi — altfel panoul
   acoperă butoanele și nu se mai poate schimba tabul. */
.theme-dneros .tabs-panels { position: relative; z-index: 1 }

/* Cele două panouri stau suprapuse în aceeași celulă de grilă, deci blocul
   albastru are mereu înălțimea celui mai înalt dintre ele — nu mai sare
   când schimbi tabul. Panoul inactiv rămâne în layout (de aceea îi anulăm
   display:none pus de [hidden]), dar e invizibil, nu se poate da click pe
   el și nu intră nici în ordinea de taburi, nici la cititoarele de ecran. */
.theme-dneros .tabs-panels { display: grid }
.theme-dneros .tabs-panels > [data-tab-panel] { grid-area: 1 / 1 }
.theme-dneros .tabs-panels > [data-tab-panel][hidden] {
  display: block; visibility: hidden; pointer-events: none;
}

/* Comutatorul de taburi: un singur „pill" deschis, cu segmentul activ alb. */
.theme-dneros .proj-tabs-wrap { background: transparent; padding: 0 0 22px; z-index: 40 }
.theme-dneros .proj-tabs {
  background: #EEF2F8; border-radius: 999px; padding: 5px; gap: 4px;
  max-width: 420px; margin: 0 auto;
}
/* Selectorii includ .proj-tabs ca să bată regulile verde/mov de mai jos,
   care au aceeași specificitate dar vin după în fișier. */
.theme-dneros .proj-tabs .tab-box {
  background: transparent; border: none; color: #7C879C;
  border-radius: 999px; padding: 11px 14px; font-size: .9rem;
}
.theme-dneros .proj-tabs .tab-box.active {
  background: #fff; color: var(--d-blue-1);
  box-shadow: 0 3px 10px rgba(15, 50, 120, .18);
}

/* Cardurile din acordeon: albastru translucid pe fundalul albastru. */
.theme-dneros .tabs-section .info-box {
  background: rgba(255, 255, 255, .13); border-radius: 16px;
  box-shadow: none; color: #fff;
}
/* Aceeași mărime de titlu ca benzile din „Nivelele aplicației", ca cele
   două taburi să arate la fel. */
.theme-dneros .tabs-section .info-box-toggle {
  color: #fff; font-size: 1.05rem; line-height: 1.3;
}
.theme-dneros .tabs-section .info-box-toggle .chevron { color: rgba(255, 255, 255, .75) }
.theme-dneros .tabs-section .info-box-toggle[aria-expanded="true"] { color: #fff }
.theme-dneros .tabs-section .info-accordion:has(.info-box-toggle[aria-expanded="true"]) {
  background: rgba(255, 255, 255, .2);
}
.theme-dneros .tabs-section .info-box-detail { border-top: none; padding-top: 0 }
.theme-dneros .tabs-section .info-box-detail > p { color: rgba(255, 255, 255, .9) }
.theme-dneros .tabs-section .info-box-link { color: #BFE0FF }
.theme-dneros .tabs-section .muted { color: rgba(255, 255, 255, .85) }

/* ── „Nivelele aplicației": rânduri-pastilă cu ilustrația în stânga ──
   Marcajul rămâne cel vechi (acordeon + nivel1-progress.js), doar
   aspectul se schimbă: linia verticală cu bulinele dispare, fiecare
   card devine o bandă albastru-translucid, iar ilustrația stă peste
   marginea din stânga și iese deasupra benzii, ca în machetă. */
.theme-dneros .tabs-section .timeline { display: block; margin-top: 40px }
.theme-dneros .tabs-section .node { display: none }
/* Macheta are taburile și textul introductiv aproape unul de altul. */
.theme-dneros .tabs-section [data-tab-panel="aplicatia"] { padding-top: 6px }

.theme-dneros .tabs-section .tl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: visible;
  margin: 0 0 20px;
  padding: 18px 54px 18px 200px;
  min-height: 116px;
  border: none;
  border-radius: 18px;
  background: rgba(255, 255, 255, .15);
}
.theme-dneros .tabs-section .tl-item:last-child { margin-bottom: 0 }
.theme-dneros .tabs-section .tl-active { background: rgba(255, 255, 255, .26) }

/* Ilustrația: ancorată jos-stânga, taie peste marginea benzii. */
.theme-dneros .tabs-section .tl-ill {
  position: absolute; left: 4px; bottom: 0; width: auto; margin: 0;
  pointer-events: none; z-index: 1;
}
.theme-dneros .tabs-section .tl-ill-piggy { height: 150px; left: 24px }
.theme-dneros .tabs-section .tl-ill-plicuri { height: 122px; left: 6px }
.theme-dneros .tabs-section .tl-ill-portofel { height: 142px; left: 26px }

/* Titlul e doar text (nu mai e buton): benzile nu se mai deschid, aşa cum
   arată macheta — ilustraţiile vechi din acordeon au fost scoase. */
.theme-dneros .tabs-section .tl-toggle {
  grid-column: 1; grid-row: 1;
  display: block; width: auto; margin: 0; padding: 0;
  font-size: 1.05rem; line-height: 1.3; color: #fff;
}
.theme-dneros .tabs-section .tl-body { grid-column: 1; grid-row: 2; padding: 0 }
.theme-dneros .tabs-section .tl-body > p { color: rgba(255, 255, 255, .92); margin-top: 5px }

/* Săgeata „›": scoasă din fluxul titlului, centrată pe înălțimea benzii. */
.theme-dneros .tabs-section .tl-toggle .chevron {
  position: absolute; right: 24px; top: 50%; margin: 0;
  width: 11px; height: auto;
  color: rgba(255, 255, 255, .85);
  transform: translateY(-50%) rotate(-90deg);
}

/* Nivelul 1 are buton propriu în dreapta, deci săgeata lui dispare. */
.theme-dneros .tabs-section .tl-actions {
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; z-index: 2; text-align: right;
}
.theme-dneros .tabs-section .tl-item:has(.tl-actions) { padding-right: 24px }
.theme-dneros .tabs-section .tl-item:has(.tl-actions) .tl-toggle .chevron { display: none }
.theme-dneros .tabs-section .tl-actions .tl-link {
  margin: 0 0 0 auto; color: #fff; text-decoration: none;
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.theme-dneros .tabs-section .tl-actions .tl-link:hover { text-decoration: underline }
.theme-dneros .tabs-section .tl-link-arrow { margin-left: 8px; font-size: 1.1rem; line-height: 1 }

/* Nivelele neîncepute: aceeași bandă, dar estompată și fără ilustrație. */
.theme-dneros .tabs-section .tl-dashed,
.theme-dneros .tabs-section .tl-disabled {
  background: rgba(255, 255, 255, .09);
  border: none; padding: 16px 54px 16px 32px; min-height: 86px;
}
.theme-dneros .tabs-section .tl-dashed .tl-toggle,
.theme-dneros .tabs-section .tl-disabled .tl-toggle { color: rgba(255, 255, 255, .55) }
.theme-dneros .tabs-section .tl-dashed .tl-body > p,
.theme-dneros .tabs-section .tl-disabled .tl-body > p { color: rgba(255, 255, 255, .5) }
.theme-dneros .tabs-section .tl-dashed .chevron,
.theme-dneros .tabs-section .tl-disabled .chevron { color: rgba(255, 255, 255, .45) }


/* Sub 380px (ecrane mici de tot) banda nu mai are loc si pentru ilustrație,
   și pentru butonul „Mergi la Nivelul 1" pe un singur rând. */
@media (max-width: 379px) {
  .theme-dneros .tabs-section .tl-item { padding-left: 116px; padding-right: 32px }
  .theme-dneros .tabs-section .tl-ill-piggy { height: 90px }
  .theme-dneros .tabs-section .tl-ill-plicuri { height: 68px }
  .theme-dneros .tabs-section .tl-ill-portofel { height: 82px }
  .theme-dneros .tabs-section .tl-actions .tl-link { white-space: normal; font-size: .72rem }
  .theme-dneros .tabs-section .tl-toggle { font-size: .92rem }
}
@media (max-width: 899px) {
  .theme-dneros .tabs-section .tl-item { padding: 16px 40px 16px 140px; min-height: 96px }
  .theme-dneros .tabs-section .tl-ill-piggy { height: 104px }
  .theme-dneros .tabs-section .tl-ill-plicuri { height: 80px }
  .theme-dneros .tabs-section .tl-ill-portofel { height: 96px }
  .theme-dneros .tabs-section .tl-toggle,
  .theme-dneros .tabs-section .info-box-toggle { font-size: .98rem }
  /* Pe ecran îngust CTA-ul trece sub text, ca să nu strivească titlul. */
  .theme-dneros .tabs-section .tl-item:has(.tl-actions) { padding-right: 20px }
  .theme-dneros .tabs-section .tl-actions { grid-column: 1; grid-row: 3; text-align: left }
  .theme-dneros .tabs-section .tl-actions .tl-link { margin: 8px auto 0 0 }
}

@media (min-width: 900px) {
  .theme-dneros .tabs-section { margin: 0 32px 16px; border-radius: 40px; padding: 34px 0 48px }
  .theme-dneros .tabs-bot-idea { right: 24px; bottom: -95px; height: 290px }
}
@media (max-width: 899px) {
  .theme-dneros .tabs-bot { display: none }
}

/* ── Redesign dneros: pagina Nivelul 1 ───────────────────────────── */
.theme-n1 { background: #F2F6FD }

/* Banda albastră de sus: același gradient și aceleași hexagoane ca pe
   cardul cu taburi de pe pagina 8, măsurate din machetă. */
.theme-dneros .n1-top { background: linear-gradient(220deg, #218DEB 0%, #072C96 100%) }
.theme-dneros .n1-top-deco {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  pointer-events: none; z-index: 0;
}
.theme-dneros .n1-top-deco .hex {
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.theme-dneros .n1-hex-1 { width: 300px; height: 346px; right: -92px; top: -40px;  background: rgba(50, 192, 240, .22) }
.theme-dneros .n1-hex-2 { width: 108px; height: 124px; right: 112px; bottom: -40px; background: rgba(50, 192, 240, .16) }
.theme-dneros .n1-hex-3 { width: 26px;  height: 30px;  right: 128px; top: 44px;    background: #32C0F0 }
.theme-dneros .n1-hex-4 { width: 34px;  height: 38px;  left: 42px;   top: 62px;    background: rgba(31, 136, 240, .57) }
.theme-dneros .n1-hex-5 { width: 54px;  height: 62px;  left: -18px;  top: 112px;   background: rgba(31, 136, 240, .45) }

.theme-dneros .n1-titlu { padding: 30px 0 34px }
.theme-dneros .n1-back {
  display: inline-block; margin-bottom: 18px;
  color: rgba(255, 255, 255, .85); text-decoration: none;
  font-family: var(--font); font-weight: 600; font-size: .85rem;
}
.theme-dneros .n1-back:hover { color: #fff }
.theme-dneros .n1-eyebrow {
  margin: 0 0 8px; color: #fff; font-family: var(--font); font-weight: 700;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
}
.theme-dneros .n1-h1 {
  margin: 0; color: #fff; font-weight: 700; line-height: 1.2;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2rem);
}

/* Hexagoanele palide de pe fundalul deschis, ca în machetă. */
.theme-dneros .n1-main { position: relative; overflow: hidden }
.theme-dneros .n1-main > section { position: relative; z-index: 1 }
.theme-dneros .n1-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0 }
.theme-dneros .n1-deco .hex {
  position: absolute; background: rgba(31, 143, 245, .10);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.theme-dneros .n1-pale-1 { width: 300px; height: 346px; left: -150px; top: 40px }
.theme-dneros .n1-pale-2 { width: 420px; height: 484px; right: -210px; top: 560px }
.theme-dneros .n1-pale-3 { width: 360px; height: 416px; left: -200px; bottom: 60px }

/* Rândurile ilustrație / text. Pe mobil ilustrația stă deasupra textului. */
.theme-dneros .n1-split { padding: 34px 0 }
.theme-dneros .n1-row {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.theme-dneros .n1-ill { width: min(320px, 78vw); height: auto; margin: 0; flex-shrink: 0 }
.theme-dneros .n1-text { width: 100% }

.theme-dneros .n1-kicker {
  margin: 0 0 6px; color: var(--d-blue-1); font-family: var(--font);
  font-weight: 700; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
}
.theme-dneros .n1-h2 {
  margin: 0 0 14px; color: var(--d-blue-1); font-weight: 700; line-height: 1.25;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem);
}
.theme-dneros .n1-lead {
  margin: 0 0 12px; color: var(--text-2);
  font-family: var(--font-body); font-size: .98rem; line-height: 1.6;
}
/* Fără buline în machetă: doar eticheta îngroșată, apoi textul. */
.theme-dneros .n1-list { list-style: none; margin: 0; padding: 0 }
.theme-dneros .n1-list li {
  margin: 0 0 10px; color: var(--text-2);
  font-family: var(--font-body); font-size: .98rem; line-height: 1.6;
}
.theme-dneros .n1-list li:last-child { margin-bottom: 0 }
.theme-dneros .n1-list strong { color: var(--text); font-family: var(--font); font-weight: 700 }

/* Chemarea la sondaj */
.theme-dneros .n1-cta { padding: 44px 0 56px }
.theme-dneros .n1-cta-titlu {
  margin: 0 0 10px; color: var(--d-blue-1); font-weight: 700; line-height: 1.2;
  font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.3rem);
}
.theme-dneros .n1-cta-sub {
  margin: 0 auto 26px; max-width: 780px; color: var(--text);
  font-family: var(--font); font-weight: 700; font-size: .98rem;
}
.theme-dneros .n1-cta-btn {
  background: var(--d-blue-1); color: #fff; border: none; border-radius: 999px;
  padding: 15px 34px; font-weight: 700; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 10px 24px rgba(35, 145, 240, .3);
}
.theme-dneros .n1-cta-btn:hover { background: #1B7FD8 }

/* Banda de final e aceeași ca pe pagina 8, dar aici n-are colț rotunjit sus. */
.theme-n1 .welcome-banner { border-radius: 0 }

@media (min-width: 900px) {
  .theme-dneros .n1-titlu { padding: 44px 0 52px }
  .theme-dneros .n1-split { padding: 44px 0 }
  .theme-dneros .n1-row { flex-direction: row; align-items: center; gap: 56px }
  /* „Soluția": textul în stânga, ilustrația în dreapta. */
  .theme-dneros .n1-row-invers { flex-direction: row-reverse }
  .theme-dneros .n1-ill { width: 44%; max-width: 480px }
  .theme-dneros .n1-text { width: auto; flex: 1 }
}
@media (max-width: 899px) {
  .theme-dneros .n1-deco { display: none }
}



/* ── Nivelul 1: sondajul, după macheta primită ────────────────────── */
/* Blocul de chemare rămâne într-un .card (de el se agață scriptul), dar
   fără fundal propriu. */
.theme-n1 .n1-cta-card { background: transparent; box-shadow: none; padding: 0 }

.theme-n1 .survey-wrap { max-width: min(1080px, 92vw); padding-top: 0 }
/* Ecranele de final („Te-ai înscris", „Mulțumim") nu stau în .survey-wrap,
   deci nu prind regula de card transparent de pe pagina 8 — o punem aici. */
.theme-n1 #mini-survey-app > .card {
  background: transparent; box-shadow: none; padding: 0; text-align: center;
  max-width: min(1080px, 92vw); margin: 0 auto;
}
.theme-n1 #mini-survey-app > .card h2 {
  color: var(--d-blue-1); margin-bottom: 10px;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
}
.theme-n1 #mini-survey-app > .card > .muted:not(.valul1-q) {
  margin: 0 auto 10px; max-width: 820px; color: var(--text);
  font-family: var(--font); font-weight: 700; font-size: .98rem;
}
/* Ecranul „Mulțumim!": bulină verde cu bifă albă, ca în machetă. */
.theme-n1 .icon-circle {
  width: 64px; height: 64px; margin: 0 auto 18px;
  background: #33CEB1; box-shadow: 0 8px 22px rgba(51, 206, 177, .35);
}
.theme-n1 .icon-circle svg path { stroke: #fff }

/* Întrebarea de la final arată ca întrebările din sondaj, nu ca o notă. */
.theme-n1 #mini-survey-app > .card > .valul1-q {
  margin: 36px auto 22px; color: #10203A; font-style: normal; font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
}
/* Cele două variante: pastile pe toată lățimea, ca opțiunile din sondaj. */
.theme-n1 #mini-survey-app .btn-row { gap: 12px }
.theme-n1 #mini-survey-app .btn-row .btn {
  border: none; border-radius: 999px; padding: 16px 24px;
  background: #F4F7FC; color: #4A5468; font-weight: 500;
  box-shadow: 0 3px 10px rgba(27, 60, 120, .06);
}
/* Conturul albastru apare doar la hover — în machetă era surprins
   butonul al doilea cu cursorul pe el, nu o stare permanentă. */
.theme-n1 #mini-survey-app .btn-row .btn:hover {
  background: #fff; color: var(--d-blue-1);
  box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}
/* Sondajul se deschide chiar sub blocul de chemare, fără gol între ele. */
.theme-n1 #mini-survey-section { padding-top: 0 }
.theme-n1 .n1-cta { padding-bottom: 30px }

/* Bara de progres: câte un segment pentru fiecare pas, separate prin
   spații. Numărul de pași vine din --steps, pus pe element de script.
   Masca taie și fundalul deschis, și umplutura albastră de deasupra. */
.theme-n1 .survey-progress-bar {
  display: block; height: 4px; border-radius: 0; margin: 10px 0 34px;
  background: #DCE7F5;
  --seg: calc(100% / var(--steps, 3));
  --seg-gap: 16px;
  -webkit-mask-image: repeating-linear-gradient(90deg,
    #000 0, #000 calc(var(--seg) - var(--seg-gap)),
    transparent calc(var(--seg) - var(--seg-gap)), transparent var(--seg));
  mask-image: repeating-linear-gradient(90deg,
    #000 0, #000 calc(var(--seg) - var(--seg-gap)),
    transparent calc(var(--seg) - var(--seg-gap)), transparent var(--seg));
}
.theme-n1 .survey-progress-fill { background: var(--d-blue-1); border-radius: 0 }

/* Întrebarea e închisă la culoare aici, nu albastră ca pe pagina 8.
   Selectorul e lung ca să bată `.theme-dneros .survey-wrap .card h2`. */
.theme-n1 .survey-wrap .card h2 {
  color: #10203A; font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  margin-bottom: 26px;
}

/* Opțiunile curg pe rânduri, centrate, nu una sub alta. Selectorul include
   .survey-wrap ca să bată regula de la 560px în sus, care le pune pe o
   singură coloană. */
.theme-n1 .survey-wrap .chips {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin: 0;
}
.theme-n1 .chip-field { display: inline-block }
/* Casetele de text care însoțesc o opțiune trec pe rândul lor. */
.theme-n1 .chips .survey-extra-ta { flex: 1 0 100%; max-width: 560px }
.theme-n1 .chips-sep { flex: 1 0 100% }

.theme-n1 .chip {
  background: #F4F7FC; color: #4A5468; font-weight: 500;
  padding: 15px 30px; box-shadow: 0 3px 10px rgba(27, 60, 120, .06);
}
.theme-n1 .chip-field input:checked + .chip {
  background: #fff; color: var(--d-blue-1); font-weight: 700;
  box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .20);
}

.theme-n1 .survey-nav { margin-top: 34px }
.theme-n1 .survey-nav .btn { min-width: 220px; padding: 16px 34px }
.theme-n1 .survey-nav .btn-primary {
  background: var(--d-blue-1);
  box-shadow: 0 8px 22px rgba(35, 145, 240, .32);
}
.theme-n1 .survey-nav .btn-primary:hover { background: #1B7FD8 }

@media (max-width: 899px) {
  .theme-n1 .chip { padding: 13px 20px }
  .theme-n1 .survey-nav .btn { min-width: 150px }
}


/* Pasul cu emailul din „Valul 1": câmpurile capătă aceeași formă de
   pastilă deschisă ca opțiunile din sondaj. */
.theme-n1 #mini-survey-app .auth-email-input,
.theme-n1 #mini-survey-app .textarea {
  width: 100%; border: none; border-radius: 22px; padding: 16px 22px;
  background: #F4F7FC; color: var(--text);
  font-family: var(--font-body); font-size: .98rem;
  box-shadow: 0 3px 10px rgba(27, 60, 120, .06);
}
.theme-n1 #mini-survey-app .auth-email-input { border-radius: 999px; margin-bottom: 14px }
.theme-n1 #mini-survey-app .auth-email-input::placeholder,
.theme-n1 #mini-survey-app .textarea::placeholder { color: #8A93A8 }
.theme-n1 #mini-survey-app .auth-email-input:focus,
.theme-n1 #mini-survey-app .textarea:focus {
  outline: none; box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}
.theme-n1 #mini-survey-app .privacy-note {
  margin: 16px auto 0; max-width: 700px; text-align: center;
}

/* Ecranul final „Ești pe listă!": aceleași reguli ca la „Mulțumim!", plus
   cele două carduri de status, aduse la fundalul deschis al paginii. */
.theme-n1 #mini-survey-app .status-grid { margin-top: 0; justify-content: center }
.theme-n1 #mini-survey-app .status-grid .info-box {
  background: #F4F7FC; border: none; border-radius: 18px;
  box-shadow: 0 3px 10px rgba(27, 60, 120, .06);
}
.theme-n1 #mini-survey-app .status-grid .info-box-toggle { padding: 16px 22px }
.theme-n1 #mini-survey-app .status-tag {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
}
.theme-n1 #mini-survey-app .status-tag-research { color: #7C879C }
.theme-n1 #mini-survey-app .info-box-title { color: var(--text); font-size: .98rem }
.theme-n1 #mini-survey-app .info-box-detail > p { text-align: left }

/* Butonul de întoarcere arată ca celelalte variante de pe ecranele finale. */
.theme-n1 #mini-survey-app .valul1-back {
  margin-top: 22px; border: none; border-radius: 999px; padding: 16px 24px;
  background: #F4F7FC; color: #4A5468; font-weight: 500; text-decoration: none;
  box-shadow: 0 3px 10px rgba(27, 60, 120, .06);
}
.theme-n1 #mini-survey-app .valul1-back:hover {
  background: #fff; color: var(--d-blue-1);
  box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}

/* ══ Telefon: pagina Nivelul 1 ════════════════════════════════════════ */
@media (max-width: 899px) {
  .theme-dneros .n1-titlu { padding: 22px 0 26px }
  .theme-dneros .n1-back { margin-bottom: 14px; font-size: .8rem }
  .theme-dneros .n1-eyebrow { font-size: .72rem }
  .theme-dneros .n1-h1 { font-size: 1.3rem }

  /* Ilustrațiile nu mai ocupă toată lățimea: cea de la „Problema" stă în
     dreapta și urcă peste banda albastră, cea de la „Soluția" în stânga. */
  .theme-dneros .n1-split { padding: 8px 0 22px }
  .theme-dneros .n1-row { gap: 10px; align-items: stretch }
  .theme-dneros .n1-ill { width: 64% }
  .theme-dneros .n1-ill-problema { align-self: flex-end; width: 62%; margin-top: -30px }
  .theme-dneros .n1-ill-solutia { align-self: flex-start; width: 74% }

  .theme-dneros .n1-kicker { font-size: .72rem }
  .theme-dneros .n1-h2 { font-size: 1.25rem; margin-bottom: 10px }
  .theme-dneros .n1-lead, .theme-dneros .n1-list li { font-size: .92rem }

  .theme-dneros .n1-cta { padding: 20px 0 10px }
  .theme-dneros .n1-cta-titlu { font-size: 1.4rem }
  .theme-dneros .n1-cta-sub { font-size: .92rem; margin-bottom: 20px }
  .theme-dneros .n1-cta-btn { width: 100%; padding: 17px 20px; font-size: .85rem }

  /* Hexagoanele palide de fundal, mai mici decât pe desktop. */
  .theme-dneros .n1-deco { display: block }
  .theme-dneros .n1-pale-1 { width: 150px; height: 173px; left: -86px; top: 30px }
  .theme-dneros .n1-pale-2 { width: 190px; height: 219px; right: -112px; top: 620px }
  .theme-dneros .n1-pale-3 { width: 160px; height: 185px; left: -96px; bottom: 120px }

  /* Sondajul: aceleași pastile pe toată lățimea ca pe pagina 8. */
  .theme-n1 .survey-wrap { max-width: none }
  .theme-n1 .survey-wrap .chips { flex-direction: column; gap: 12px }
  .theme-n1 .chip { width: 100%; text-align: left; padding: 16px 20px }
  .theme-n1 .survey-nav .btn { flex: 1 1 auto; min-width: 0; padding: 17px 14px }
  .theme-n1 #mini-survey-app > .card { max-width: none }
  .theme-n1 #mini-survey-app .btn-row .btn { padding: 15px 18px; font-size: .92rem }
}



/* ══ Telefon, secțiunea 3: cardul albastru cu taburile ════════════════ */
@media (max-width: 899px) {
  .theme-dneros .tabs-section { margin: 0 12px 8px; border-radius: 26px; padding: 18px 0 26px }

  /* Hexagoanele sunt măsurate pentru cardul lat de desktop; pe telefon ar
     acoperi tot cardul, așa că aici sunt mult mai mici. */
  .theme-dneros .tabs-hex-1 { width: 170px; height: 196px; right: -56px; top: -30px }
  .theme-dneros .tabs-hex-2 { width: 150px; height: 174px; right: -62px; bottom: -40px }
  .theme-dneros .tabs-hex-3 { width: 34px;  height: 39px;  right: 14px;  bottom: 120px }
  .theme-dneros .tabs-hex-4 { width: 20px;  height: 22px;  right: 30px;  top: 150px }
  .theme-dneros .tabs-hex-5 { width: 22px;  height: 21px;  left: 8px;    top: 104px }
  .theme-dneros .tabs-hex-6 { width: 11px;  height: 10px;  left: 42px;   top: 98px }
  .theme-dneros .tabs-hex-7 { width: 30px;  height: 35px;  left: -12px;  top: 142px }

  /* Robotul cu becul revine, mic, în colțul din dreapta sus al cardului. */
  .theme-dneros .tabs-bot { display: block }
  .theme-dneros .tabs-bot-idea { right: -8px; top: -52px; bottom: auto; height: 96px }

  /* Comutatorul de taburi: pistă translucidă, tabul inactiv alb. */
  .theme-dneros .proj-tabs-wrap { padding-bottom: 16px }
  .theme-dneros .proj-tabs {
    background: rgba(255, 255, 255, .18); max-width: none; padding: 4px;
  }
  .theme-dneros .proj-tabs .tab-box { color: #fff; padding: 11px 8px; font-size: .88rem }
  .theme-dneros .proj-tabs .tab-box.active { color: var(--d-blue-1) }

  /* Pe telefon cardul se strânge pe conținutul tabului activ — altfel, cu
     panourile suprapuse, sub „Despre proiect" ar rămâne un gol mare. */
  .theme-dneros .tabs-panels { display: block }
  .theme-dneros .tabs-panels > [data-tab-panel][hidden] { display: none }

  .theme-dneros .tabs-section [data-tab-panel] { padding-top: 0; padding-bottom: 0 }
  .theme-dneros .tabs-section .info-box-toggle { padding: 15px 18px }
  .theme-dneros .tabs-section .info-list { gap: 12px }
}


/* ── Redesign dneros: pagina de cont (index.html) ─────────────────── */
.theme-cont { background: #F2F6FD }
.theme-dneros .cont-top { background: linear-gradient(220deg, #218DEB 0%, #072C96 100%) }
.theme-dneros .cont-main { padding-bottom: 10px }
.theme-dneros .cont-main .landing-buttons { max-width: 440px }

/* Butoanele devin pastile, în aceeași familie cu opțiunile din sondaj. */
.theme-cont .landing-buttons .btn {
  border: none; border-radius: 999px; padding: 17px 24px;
  font-size: .95rem; font-weight: 600; width: 100%;
  box-shadow: 0 3px 10px rgba(27, 60, 120, .06);
}
.theme-cont .landing-buttons .btn-primary {
  background: var(--d-blue-1); color: #fff; font-weight: 700;
  box-shadow: 0 8px 22px rgba(35, 145, 240, .32);
}
.theme-cont .landing-buttons .btn-primary:hover { background: #1B7FD8 }
.theme-cont .landing-buttons .btn-primary:disabled {
  background: #DCE7F5; color: #8A93A8; box-shadow: none; cursor: default;
}
.theme-cont .landing-buttons .btn-secondary {
  background: #5CCFAE; color: #fff; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: .85rem;
  box-shadow: 0 8px 20px rgba(92, 207, 174, .3);
}
.theme-cont .landing-buttons .btn-secondary:hover { background: #4CC29F }
.theme-cont .landing-buttons .btn-reg,
.theme-cont .landing-buttons .btn-anon {
  background: #fff; color: #4A5468; font-weight: 500; text-decoration: none;
}
.theme-cont .landing-buttons .btn-reg:hover,
.theme-cont .landing-buttons .btn-anon:hover {
  background: #fff; color: var(--d-blue-1);
  box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}

/* Câmpurile de email/parolă, aceeași pastilă deschisă ca pe Nivelul 1. */
.theme-cont .auth-email-input {
  border: none; border-radius: 999px; padding: 16px 22px;
  background: #fff; color: var(--text);
  font-family: var(--font-body); font-size: .95rem;
  box-shadow: 0 3px 10px rgba(27, 60, 120, .06);
}
.theme-cont .auth-email-input::placeholder { color: #8A93A8 }
.theme-cont .auth-email-input:focus {
  outline: none; box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}

.theme-cont .auth-panel-title {
  color: var(--d-blue-1); font-weight: 700; text-align: center;
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin: 0 0 4px;
}
.theme-cont .landing-divider { color: #8A93A8 }
/* „Ai uitat parola?" era doar text de 15px — prea mic de atins pe telefon. */
.theme-cont .btn-forgot { color: var(--d-blue-1); padding: 12px 10px; min-height: 40px }
.theme-cont .welcome-banner { border-radius: 0 }




/* Cardul alb al paginii de cont urcă peste banda albastră, ca la orice
   pagină de autentificare — altfel butoanele pluteau singure în pagină. */
.theme-dneros .cont-titlu { padding-bottom: 86px }
.theme-dneros .cont-intro {
  margin: 10px 0 0; max-width: 520px;
  color: rgba(255, 255, 255, .9); line-height: 1.55;
  font-family: var(--font-body); font-size: .95rem;
}
/* Cardul urcă peste banda albastră, deci `main` nu mai poate tăia ce iese
   din el (altfel robotul și marginea de sus a cardului dispăreau). Taierea
   hexagoanelor palide o face stratul lor, nu `main`. */
.theme-cont .cont-main {
  padding-top: 0; position: relative; z-index: 2; overflow: visible;
}
.theme-cont .n1-deco { overflow: hidden }
.theme-cont .cont-main > .section { padding-top: 0 }
.theme-cont .cont-card {
  position: relative; margin-top: -64px !important;
  background: #fff; border-radius: 28px; padding: 74px 26px 30px;
  box-shadow: 0 18px 44px rgba(27, 60, 120, .14);
}
.theme-cont .cont-card-bot {
  position: absolute; top: -52px; left: 50%; transform: translateX(-50%);
  width: auto; height: 112px; margin: 0; pointer-events: none;
}
/* Pe card butoanele albe au nevoie de contur, ca sa se vada pe alb. */
.theme-cont .landing-buttons .btn-reg,
.theme-cont .landing-buttons .btn-anon {
  background: #F4F7FC; box-shadow: none;
}
.theme-cont .landing-buttons .btn-reg:hover,
.theme-cont .landing-buttons .btn-anon:hover {
  background: #fff; box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}
.theme-cont .auth-email-input { background: #F4F7FC; box-shadow: none }
.theme-cont .landing-divider::before,
.theme-cont .landing-divider::after { background: #E3EBF5 }

@media (min-width: 560px) {
  .theme-cont .cont-card { padding: 78px 34px 34px }
}
@media (max-width: 899px) {
  /* Textul introductiv se rupe pe mai multe rânduri aici, deci banda are
     nevoie de mai mult loc jos ca să nu intre cardul peste el. */
  .theme-dneros .cont-top .cont-titlu { padding: 22px 0 104px }
  .theme-dneros .cont-intro { font-size: .9rem }
  .theme-cont .cont-card { margin-top: -56px !important; padding-top: 64px }
  .theme-cont .cont-card-bot { top: -44px; height: 96px }
}


/* ── Redesign dneros: pagina de articole ──────────────────────────── */
.theme-art { background: #F2F6FD }
.theme-dneros .art-top { background: linear-gradient(220deg, #218DEB 0%, #072C96 100%) }

/* Fiecare articol devine un card alb, cu imaginea rotunjită în el. */
.theme-art .art-list { padding-top: 34px }
.theme-art .article-wide {
  background: #fff; border-radius: 24px; padding: 22px;
  box-shadow: 0 6px 20px rgba(27, 60, 120, .08);
  margin-bottom: 24px; align-items: center; gap: 28px;
}
.theme-art .article-wide-img { border-radius: 18px; box-shadow: none }
.theme-art .article-wide-body h2 {
  color: var(--d-blue-1); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
}
.theme-art .article-wide-body p { font-size: .96rem; line-height: 1.7 }
.theme-art .article-wide-body strong { color: var(--text); font-weight: 700 }

/* „În curând" — titlu albastru și carduri deschise, ca restul site-ului. */
.theme-art .art-soon { padding-top: 10px }
.theme-art .art-soon-title {
  color: var(--d-blue-1); margin-bottom: 22px;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem);
}
.theme-art .art-soon .info-box {
  background: #fff; border: none; border-radius: 18px;
  box-shadow: 0 4px 16px rgba(27, 60, 120, .08); padding: 18px 22px;
}
.theme-art .art-soon .info-box-title { color: var(--text); font-size: 1rem }
.theme-art .art-soon .info-box p { color: var(--text-2) }

.theme-art .welcome-banner { border-radius: 0 }

@media (max-width: 899px) {
  .theme-art .article-wide { padding: 16px; gap: 18px; border-radius: 20px }
  .theme-art .art-list { padding-top: 24px }
}



/* ── Bifa de consimțământ de lângă formulare ──────────────────────── */
.consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 2px; cursor: pointer; text-align: left;
}
.consent-row .consent-check {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0;
  accent-color: #2391F0; cursor: pointer;
}
.consent-text {
  font-family: var(--font-body); font-size: .82rem; line-height: 1.5;
  color: var(--text-2);
}
.consent-text a { color: #2391F0; font-weight: 600 }

/* Pe fundal albastru (blocul „Aici găsești soluția") textul e alb. */
.theme-dneros .dneros-subscribe .consent-text { color: rgba(255, 255, 255, .9) }
.theme-dneros .dneros-subscribe .consent-text a { color: #fff; text-decoration: underline }
/* Odată trimis formularul, bifa dispare împreună cu câmpul și butonul. */
.theme-dneros .subscribe-form.is-sent .consent-row { display: none }

/* ── Bannerul de consimțământ ─────────────────────────────────────── */
/* Nu e lipit de marginile ecranului: e un card alb rotunjit care plutește
   deasupra paginii, în aceeași familie cu restul cardurilor din site. */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  padding: 0 12px 12px; pointer-events: none;
  transform: translateY(130%); transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
.cookie-bar.is-in { transform: translateY(0) }
.cookie-bar.is-leaving { transform: translateY(130%) }
.cookie-bar-inner {
  pointer-events: auto;
  max-width: min(960px, 100%); margin: 0 auto;
  background: #fff; border-radius: 24px; padding: 20px 22px;
  box-shadow: 0 18px 44px rgba(10, 40, 110, .22);
  display: flex; flex-direction: column; gap: 16px;
}
.cookie-bar-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #3FA2F9, #2391F0); color: #fff;
  box-shadow: 0 8px 18px rgba(35, 145, 240, .3);
}
.cookie-bar-body { flex: 1; min-width: 0 }
.cookie-bar-title {
  margin: 0 0 4px; font-family: var(--font); font-weight: 700;
  font-size: .95rem; color: var(--text);
}
.cookie-bar-text {
  margin: 0; color: var(--text-2);
  font-family: var(--font-body); font-size: .86rem; line-height: 1.55;
}
.cookie-bar-text a { color: #2391F0; font-weight: 600 }
.cookie-bar-actions { flex-shrink: 0; display: flex; gap: 10px; width: 100% }
.cookie-bar .cookie-btn {
  flex: 1 1 auto; border: none; border-radius: 999px; cursor: pointer;
  padding: 14px 22px; font-family: var(--font); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  transition: background .15s, box-shadow .15s, color .15s;
}
.cookie-bar .cookie-btn-reject { background: #F4F7FC; color: #4A5468 }
.cookie-bar .cookie-btn-reject:hover {
  background: #fff; color: #2391F0; box-shadow: 0 0 0 2px #2391F0;
}
.cookie-bar .cookie-btn-accept {
  background: linear-gradient(180deg, #3FA2F9, #2391F0); color: #fff;
  box-shadow: 0 8px 20px rgba(35, 145, 240, .32);
}
.cookie-bar .cookie-btn-accept:hover { background: #1B7FD8 }

@media (min-width: 560px) {
  .cookie-bar-inner { flex-direction: row; align-items: center; gap: 18px; padding: 20px 24px }
  .cookie-bar-actions { width: auto }
  .cookie-bar .cookie-btn { flex: 0 0 auto; padding: 14px 28px }
}
@media (min-width: 900px) {
  .cookie-bar { padding: 0 20px 20px }
  .cookie-bar-inner { gap: 22px; padding: 22px 28px }
}

/* ── Bara de final cu linkuri legale, pe toate paginile ───────────── */
.site-footer {
  background: #0B2E7A;
  /* Spațiu generos jos: pe telefon bara browserului stă peste ultimele
     rânduri. env(safe-area-inset-bottom) e 0 cât timp viewport-ul nu e
     declarat cu viewport-fit=cover, dar rămâne ca plasă de siguranță. */
  padding: 26px 0 calc(30px + env(safe-area-inset-bottom, 0px));
}
.site-footer-inner {
  display: flex; flex-direction: column; gap: 18px;
  align-items: center; text-align: center;
}
.site-footer-copy {
  margin: 0; color: rgba(255, 255, 255, .6);
  font-family: var(--font-body); font-size: .82rem; line-height: 1.6;
}
.site-footer-links { display: flex; gap: 14px 26px; flex-wrap: wrap; justify-content: center }
.site-footer-links a {
  color: rgba(255, 255, 255, .85); text-decoration: none;
  font-family: var(--font); font-weight: 600; font-size: .82rem; line-height: 1.6;
}
.site-footer-links a:hover { color: #fff; text-decoration: underline }
@media (min-width: 560px) {
  .site-footer-inner { flex-direction: row; justify-content: space-between; text-align: left }
}

/* ── Pagina de Politică de Confidențialitate ──────────────────────── */
.theme-legal { background: #F2F6FD }
.theme-dneros .legal-top { background: linear-gradient(220deg, #218DEB 0%, #072C96 100%) }
.theme-legal .legal-card {
  background: #fff; border-radius: 24px; padding: 30px 26px;
  box-shadow: 0 6px 20px rgba(27, 60, 120, .08);
  max-width: 760px; margin: 0 auto; text-align: left;
}
.theme-legal .legal-updated {
  margin: 0 0 22px; color: var(--text-3);
  font-family: var(--font-body); font-size: .82rem;
}
.theme-legal .legal-card h2 {
  color: var(--d-blue-1); margin: 30px 0 10px;
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem);
}
.theme-legal .legal-card h2:first-of-type { margin-top: 0 }
.theme-legal .legal-card p {
  margin: 0 0 12px; color: var(--text-2);
  font-family: var(--font-body); font-size: .95rem; line-height: 1.7;
}
.theme-legal .legal-card strong { color: var(--text); font-weight: 700 }
.theme-legal .legal-card a { color: var(--d-blue-1); font-weight: 600 }
.theme-legal .legal-list { margin: 0 0 12px; padding-left: 20px }
.theme-legal .legal-list li {
  margin-bottom: 10px; color: var(--text-2);
  font-family: var(--font-body); font-size: .95rem; line-height: 1.7;
}
@media (min-width: 720px) {
  .theme-legal .legal-card { padding: 40px 42px }
}

/* ── Redesign dneros: panoul de administrare ──────────────────────── */
/* Pagina de admin isi are stilurile ei, scrise cu variabilele mov. Le
   rescriem aici in albastru, ca sa nu fie nevoie sa umblam la fiecare
   regula din admin-export.html. */
.theme-admin {
  --purple: #2391F0;
  --purple-bg: #E9F3FD;
  --purple-light: rgba(35, 145, 240, .18);
  --purple-pale: #CFE3FA;
  background: #F2F6FD;
}
.theme-dneros .admin-top { background: linear-gradient(220deg, #218DEB 0%, #072C96 100%) }
.theme-dneros .admin-top .n1-titlu { padding: 26px 0 30px }
.theme-dneros .admin-top .admin-wrap { padding: 0 20px }
.theme-admin .site-header .wrap { max-width: 760px }

/* Cardurile si campurile capata colturile rotunjite din designul nou. */
.theme-admin .stat-tile,
.theme-admin .q-card,
.theme-admin .card {
  border: none; border-radius: 18px;
  box-shadow: 0 4px 16px rgba(27, 60, 120, .08);
}
.theme-admin .builder-input {
  border: none; border-radius: 12px; background: #F4F7FC;
  box-shadow: 0 2px 8px rgba(27, 60, 120, .05);
}
.theme-admin .builder-input:focus {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--d-blue-1), 0 6px 18px rgba(35, 145, 240, .18);
}
.theme-admin .filter-btn { border-color: #DCE7F5; background: #fff }
.theme-admin .q-bar-track, .theme-admin .q-bar-fill { border-radius: 999px }
.theme-admin .btn-icon { border-color: #DCE7F5; background: #fff; border-radius: 999px }

/* Butoanele principale, aceleasi pastile albastre ca pe restul site-ului. */
.theme-admin .btn-primary {
  background: var(--d-blue-1); border-radius: 999px;
  box-shadow: 0 8px 20px rgba(35, 145, 240, .28);
}
.theme-admin .btn-primary:hover { background: #1B7FD8 }
.theme-admin .btn-secondary, .theme-admin .btn-outline { border-radius: 999px }
.theme-admin .export-row .btn { border-radius: 999px }

/* ── Redesign dneros: abonarea de jos și banda de final ──────────── */
.theme-dneros .dneros-abonare { position: relative; overflow: hidden }
.theme-dneros .dneros-abonare .card { background: transparent; box-shadow: none; padding: 0 }
.theme-dneros .dneros-abonare .muted {
  color: var(--text); font-weight: 700;
  font-size: clamp(.95rem, .9rem + .2vw, 1.1rem);
}
.theme-dneros .dneros-abonare .h-lg {
  color: var(--d-blue-1); margin-bottom: 24px;
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem);
}
.theme-dneros .abonare-bot {
  position: absolute; left: 8px; bottom: 40px; height: 170px; width: auto;
  margin: 0; z-index: 0; pointer-events: none;
}
.theme-dneros .dneros-abonare .wrap { position: relative; z-index: 1 }

/* Aceeași bară ca sus, dar pe fundal deschis. */
.theme-dneros .dneros-abonare .subscribe-form { max-width: 560px; margin: 0 auto; position: relative }
.theme-dneros .dneros-abonare .subscribe-form input {
  border: none; border-radius: 999px; padding: 15px 22px;
  background: #fff; color: var(--text); min-width: 0;
  box-shadow: 0 4px 14px rgba(27, 60, 120, .07);
}
.theme-dneros .dneros-abonare .subscribe-form input::placeholder { color: #8A93A8 }
.theme-dneros .dneros-abonare .subscribe-form .btn {
  border-radius: 999px; background: #5CCFAE; color: #fff;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  padding: 15px 22px; font-size: clamp(.7rem, .58rem + .35vw, .85rem);
}
.theme-dneros .dneros-abonare .subscribe-form .btn:hover { background: #4CC29F }
.theme-dneros .dneros-abonare .privacy-note { max-width: 620px; margin: 16px auto 0; text-align: center }

/* Confirmarea, la fel ca la bara de sus, dar pe fundal deschis. */
.theme-dneros .dneros-abonare .subscribe-form.is-sent input,
.theme-dneros .dneros-abonare .subscribe-form.is-sent .btn,
.theme-dneros .dneros-abonare .subscribe-form.is-sent .form-note { display: none }
.theme-dneros .dneros-abonare .subscribe-form.is-sent {
  background: #fff; border-radius: 999px; padding: 5px;
  box-shadow: 0 4px 14px rgba(27, 60, 120, .07);
}
.theme-dneros .dneros-abonare .subscribe-form.is-sent .subscribe-done {
  display: flex; align-items: center; gap: 14px; text-align: left;
  flex: 1 1 auto; padding: 6px 16px;
}
/* După abonare, titlul devine mesajul de mulțumire, iar rândul
   introductiv dispare. */
.theme-dneros .abonare-multumim { display: none }
.theme-dneros .dneros-abonare.is-sent .abonare-intro,
.theme-dneros .dneros-abonare.is-sent .abonare-titlu { display: none }
.theme-dneros .dneros-abonare.is-sent .abonare-multumim { display: block }
.theme-dneros .dneros-abonare .subscribe-done-text { color: var(--text-2) }
.theme-dneros .dneros-abonare .subscribe-done-text strong { color: var(--text) }

@media (min-width: 480px) {
  .theme-dneros .dneros-abonare .subscribe-form {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    background: #fff; border-radius: 999px; padding: 5px;
    box-shadow: 0 4px 14px rgba(27, 60, 120, .07);
  }
  .theme-dneros .dneros-abonare .subscribe-form input {
    flex: 1 1 auto; background: transparent; padding: 12px 18px; box-shadow: none;
  }
  .theme-dneros .dneros-abonare .subscribe-form .btn { flex: 0 0 auto; width: auto; white-space: nowrap }
  .theme-dneros .dneros-abonare .form-note { position: absolute; top: 100%; left: 18px; margin: 6px 0 0 }
}

/* Banda de final: albastru, colțuri rotunjite sus, roboți pe margini. */
.theme-dneros .welcome-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #2E7BEE 0%, #1B4BB8 55%, #15399A 100%);
}
.theme-dneros .welcome-banner .wrap { position: relative; z-index: 1 }
/* În design robotul central e înlocuit de cei doi de pe margini. */
.theme-dneros .welcome-illustration { display: none }
.theme-dneros .welcome-banner p { margin-bottom: 0 }
.theme-dneros .welcome-outro { margin-top: 0; font-weight: 700; color: #fff }
/* Cei doi roboți stau pe verticală, centrați: cel cu plicurile călare pe
   marginea de sus a benzii, cel cu telefonul sub text. La fel pe toate
   paginile și pe toate lățimile. */
.theme-dneros .welcome-bot { width: auto; margin: 0; pointer-events: none }
.theme-dneros .welcome-banner {
  display: flex; flex-direction: column; align-items: center;
  overflow: visible; margin-top: 216px; padding: 150px 0 26px;
}
.theme-dneros .welcome-banner .wrap { order: 1; position: relative; z-index: 1 }
/* Mutat puțin la dreapta față de centrul exact: în desen, robotul stă
   ușor în stânga teancului de plicuri, deci așa pare centrat. */
.theme-dneros .welcome-bot-left {
  position: absolute; left: 50%; right: auto; top: -166px; bottom: auto;
  transform: translateX(calc(-50% + 16px)); height: 236px; z-index: 1;
}
.theme-dneros .welcome-bot-right {
  position: static; order: 2; right: auto; margin: 16px 0 0; height: 178px;
}

@media (min-width: 900px) {
  .theme-dneros .welcome-banner { margin-top: 248px; padding: 170px 0 36px }
  .theme-dneros .welcome-banner .wrap { max-width: 760px }
  .theme-dneros .welcome-bot-left {
    top: -186px; height: 278px; transform: translateX(calc(-50% + 20px));
  }
  .theme-dneros .welcome-bot-right { height: 212px; margin-top: 22px }
  .theme-dneros .abonare-bot { left: -14px; bottom: 90px; height: 190px }
}
@media (max-width: 899px) {
  .theme-dneros .abonare-bot { display: none }
}

/* Intre 900 si 1199px containerul de text e inca ingust (560–740px), iar
   roboții la mărimea de desktop mare ajung peste text. Îi ținem mai mici
   până când rămâne loc pentru ei. */
@media (min-width: 900px) and (max-width: 1199px) {
  .theme-dneros .abonare-bot { left: 6px; bottom: 70px; height: 150px }
  .theme-dneros .tabs-bot-idea { right: 10px; bottom: -64px; height: 196px }
}


/* ══ Telefon, secțiunea 4: abonarea de jos și banda de final ══════════ */
@media (max-width: 899px) {
  .theme-dneros .dneros-abonare { padding-top: 34px; padding-bottom: 34px }
  .theme-dneros .dneros-abonare .abonare-intro {
    font-size: .95rem; line-height: 1.4; max-width: 330px; margin: 0 auto 18px;
  }
  /* Robotul cu plicul stă lângă titlu, nu în fundal. */
  .theme-dneros .abonare-bot-mob {
    display: block; height: 118px; width: auto; flex: 0 0 auto;
    /* Iese un pic în afara containerului, ca să stea lipit de marginea
       din stânga a ecranului, nu la distanță de ea. */
    margin: 0 0 0 -22px;
  }
  .theme-dneros .dneros-abonare .h-lg {
    font-size: 1.7rem; line-height: 1.18; text-align: left; margin: 0;
  }
  .theme-dneros .abonare-rand {
    display: flex; align-items: center; gap: 6px; margin-bottom: 20px;
  }
  .theme-dneros .abonare-rand-text { flex: 1 1 auto; min-width: 0 }
  .theme-dneros .dneros-abonare .subscribe-form input { padding: 17px 24px }
  .theme-dneros .dneros-abonare .subscribe-form .btn { padding: 18px 20px; font-size: .9rem }
  .theme-dneros .dneros-abonare .privacy-note { font-size: .74rem; line-height: 1.5 }

  /* Banda de final: roboții stau unul deasupra textului (călare pe
     marginea benzii) și celălalt sub el, amândoi centrați. */
  /* Textul benzii era prea înghesuit pe telefon: rânduri mai aerisite și
     spațiu între titlu, paragraf și rândul de final. */
  .theme-dneros .welcome-banner h2 { line-height: 1.3; margin-bottom: 18px }
  .theme-dneros .welcome-banner p { line-height: 1.7 }
  .theme-dneros .welcome-outro { margin-top: 18px }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--r-sm);
  padding: 14px 26px;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
/* "display: inline-flex" de mai sus are prioritate peste [hidden] din foaia de
   stil a browserului (ambele sunt origine "author" vs "user-agent" la
   specificitate egală) — fără regula asta, un .btn ascuns via JS (elem.hidden
   = true) rămâne vizibil pe ecran. */
.btn[hidden] { display: none }
.btn:active { transform: scale(.98) }
.btn-primary { background: var(--purple); color: #fff }
.btn-primary:hover { background: var(--purple-dark) }
.btn-secondary { background: var(--green); color: #fff }
.btn-secondary:hover { background: var(--green-dark) }
.btn-dark { background: var(--navy); color: #fff }
.btn-dark:hover { background: #2C3A50 }
.btn-outline { background: var(--bg); color: var(--text-2); border: 1.5px solid var(--border-light) }
.btn-outline:hover { background: var(--card); border-color: var(--purple-pale) }
/* Stare palida a butonului "Raspunde" din sondajul paginii 4 */
.btn-muted { background: var(--purple-pale) }
.btn-muted:hover { background: var(--purple-pale) }
.btn-full { width: 100% }
.btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap }
.btn-row .btn { flex: 1; min-width: 130px }
.center-row { margin-top: 28px }

/* Cards */
.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 26px 22px;
  margin: 0 auto;
}
.card h2 { font-size: 1.25rem }
.card h2.h-lg { font-size: 1.6rem }
.eyebrow { display: block; color: var(--purple); font-weight: 700; font-size: 1.05rem; margin-bottom: 12px }
.link-inline { text-decoration: underline; font-weight: 600 }
.bullet-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px }
.bullet-list li { padding-left: 22px; position: relative; color: var(--text-2); font-size: .92rem; line-height: 1.5 }
.bullet-list li::before { content: '•'; position: absolute; left: 0; color: var(--purple); font-weight: 700 }
.bullet-list li strong { color: var(--text) }
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--purple-light);
  margin: 18px auto 12px;
}
.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 18px auto 12px;
}
.h-lg { font-size: 1.6rem; line-height: 1.48 }

/* Survey */
.survey h2 { font-size: 1.35rem }
.chips { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 }
.chips-inline { flex-direction: row; flex-wrap: wrap }
.chip-field { display: block; cursor: pointer }
.chip-field.is-disabled { cursor: default }
.chip {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: .95rem;
  color: var(--text-2);
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}
.chip-sm { padding: 10px 16px }
.chip-field input:checked + .chip {
  border-color: var(--purple);
  color: var(--purple);
  background: #EEF0FC;
  font-weight: 600;
}
.chip-field input:disabled + .chip { border-color: var(--border-light); color: var(--text-3) }
.chip-field input:focus-visible + .chip { outline: 2px solid var(--purple); outline-offset: 2px }

.form-note { margin: 12px 0 0; font-size: .9rem; font-weight: 600; color: var(--green-dark) }
.form-note.is-error { color: #C0392B }
.privacy-note { margin: 16px 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-3) }
.privacy-note .link-inline { color: var(--text-2); text-decoration: underline }
.privacy-note summary { cursor: pointer; color: var(--text-2); text-decoration: underline; list-style: none }
.privacy-note summary::-webkit-details-marker { display: none }
.privacy-note[open] summary { margin-bottom: 8px }
.field-label { display: block; margin: 18px 0 8px; color: var(--text-2); font-size: .95rem }
.textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: .95rem;
  resize: vertical;
  background: #fff;
  color: var(--text);
}
.textarea::placeholder { color: var(--text-3) }
.textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-light) }
.survey .btn-full { margin-top: 20px }
.survey .small { margin-top: 14px; margin-bottom: 0 }

/* Timeline */
.section-purple-light { background: var(--purple-bg) }
.section-purple-light .h-lg { margin-bottom: 8px }
.timeline { display: flex; flex-direction: column; align-items: center; margin-top: 8px }
.node { width: 45.5px; height: 45.5px; border-radius: 50%; position: relative; margin: 0; flex-shrink: 0 }
.node::before, .node::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 22px;
  background: var(--purple);
  transform: translateX(-50%);
}
.node::before { bottom: 100% }
.node::after { top: 100% }
.node-solid { background: var(--purple) }
.node-outline { background: #fff; border: 2px solid var(--purple) }
.node-dashed { background: #fff; border: 2px dashed var(--purple) }
.node-dashed::before, .node-dashed::after { background: transparent; border-left: 2px dashed var(--purple) }
.timeline > .node:first-child::before { display: none }

/* Geometria e identica cu .faq-item (pagina 2), masurata din PDF: card inchis
   128px, spatiu intre carduri 83px, aceleasi marimi de font si padding. */
.tl-item { width: 100%; border-radius: var(--r); margin: 18.75px 0; text-align: left; overflow: hidden }
.timeline > .tl-item:first-of-type { margin-top: 0 }
.tl-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 13px 22px 6px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.375rem;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
/* Padding mai mare decat la .faq-body: aici textul are 2 randuri, nu 3, dar
   cardul inchis are aceeasi inaltime (128px) in ambele PDF-uri. */
.tl-body { padding: 0 22px 37px }
.tl-body > p { margin: 0; font-family: var(--font-body); font-size: .95rem; line-height: 1.53 }
.chevron { flex-shrink: 0; margin-left: 12px; transition: transform .35s cubic-bezier(.4,0,.2,1) }
.chevron.up { transform: rotate(180deg) }

.tl-active { background: var(--purple); color: #fff }
.tl-active .tl-toggle { color: #fff }
.tl-active .tl-body > p { color: rgba(255, 255, 255, .9) }
/* Panoul se deschide animat. Am folosit initial trucul CSS grid (0fr/1fr),
   dar pe Safari iOS randul cu ilustratie nu se colapsa complet cand era
   inchis — ramanea o fasie din imagine vizibila sub card. Am incercat apoi
   un max-height fix (600px), dar continutul real (~300px) ajungea la
   marimea lui finala cu mult inainte ca animatia sa se termine — la
   inchidere in special, nu se intampla nimic vizibil o vreme (cat timp
   max-height animat era inca peste inaltimea continutului), apoi paroul
   se micsora brusc spre final. Acum js/script.js masoara inaltimea reala
   a continutului (scrollHeight) si o seteaza direct ca max-height, ca
   animatia sa acopere exact distanta care se vede.
*/
.tl-detail-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .42s cubic-bezier(.4,0,.2,1);
}
/* Spatiul de sus sta pe copii, nu pe .tl-detail: padding-ul lui ar ramane
   vizibil si cu randul colapsat, si panoul nu s-ar mai inchide complet. */
.tl-detail { overflow: hidden; min-height: 0; padding-bottom: 53px; opacity: 0; transition: opacity .25s ease }
.tl-item.is-open .tl-detail { opacity: 1; transition: opacity .3s ease .12s }
.tl-detail h3 { font-size: 1.05rem; margin-top: 14px }
.tl-detail p { font-family: var(--font-body); font-size: .95rem; margin: 0 }
.tl-detail > :first-child { margin-top: 18px }
.tl-detail .illustration { margin: 18px auto 0 }
/* In cardul de timeline ilustratia e afisata mai mica decat pe latimea
   intreaga a continutului, nu pe toata latimea cardului. */
.tl-detail .tl-illustration { width: 66%; max-width: 220px }
.tl-active .tl-detail h3 { color: #fff }
.tl-active .tl-detail p { color: rgba(255, 255, 255, .9) }
.tl-link {
  display: block;
  width: fit-content;
  margin: 16px 12px 0 auto;
  color: var(--purple);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
}
.tl-active .tl-link { color: #fff }
.tl-link-secondary { margin-top: 4px }

.tl-outline { background: #fff; border: 2px solid var(--purple) }
.tl-outline .tl-toggle { color: var(--purple) }
.tl-dashed { background: transparent; border: 2px dashed var(--purple) }
.tl-dashed .tl-toggle { color: var(--purple); cursor: default }
.tl-disabled { background: rgba(255, 255, 255, .6) }
.tl-disabled .tl-toggle { color: #A9A5E8; cursor: default }
.tl-disabled .tl-body > p { color: #A9A5E8 }

/* Sectiunea verde cu intrebari (pagina 2) */
.section-green { background: var(--green-bg) }
.section-green .h-lg { margin-bottom: 36px }

/* Aceeasi sectiune "Nu esti singur", recolorata gri (pagina 4). */
.section-gray { background: var(--gray-bg) }
.section-gray .h-lg { margin: 0 0 36px }
/* In PDF exista un gol mare (~225px) intre cardul de sondaj si taburile
   de dedesubt, mult mai mare decat spatiul normal dintre sectiuni. */
.tabs-row { margin-top: 225px }

/* Tab-urile "Despre proiect" / "Nivelele aplicației" de sub sondaj — rămân
   floating sub header la scroll (cerință client). --header-h e setat din JS
   cu înălțimea reală a header-ului. */
.proj-tabs-wrap {
  position: sticky; top: var(--header-h, 64px); z-index: 40;
  background: #fff; padding: 14px 0;
}
/* Fundal alb pe panou, distinct de fundalul gri-albăstrui al paginii —
   ca o "foaie" lipită direct sub tab-uri, ca să fie clar că tot ce e
   dedesubt (texte, nivele) ține de tab-ul selectat deasupra. */
[data-tab-panel] { background: #fff }
/* Cardurile din Despre proiect erau tot albe, pe panoul acum alb —
   nu se mai distingeau deloc. Le dăm un fundal gri-albăstrui deschis
   (culoarea de fundal a paginii), ca să iasă în evidență. */
/* Segmented control clasic (Revolut/Monzo): un singur track continuu,
   care leagă vizual cele 2 opțiuni, cu tab-ul activ ca pastilă plină,
   colorată solid — nu doar text sau o linie. */
.proj-tabs {
  display: flex; gap: 2px;
  background: var(--bg); border-radius: var(--r-sm); padding: 4px;
}
.tab-box {
  flex: 1; font-family: var(--font); font-weight: 700; font-size: .9rem;
  padding: 11px 10px; border-radius: 7px;
  cursor: pointer; text-align: center;
  transition: background .15s, color .15s;
  background: transparent; border: none;
  color: var(--text-2);
}
.tab-box.tab-box-green.active { background: var(--green); color: #fff }
.tab-box.tab-box-purple.active { background: var(--purple); color: #fff }

.info-list { display: flex; flex-direction: column; gap: 14px; text-align: left }
/* Fundal alb (ca restul cardurilor de pe site — .card, cardurile din
   Nivelele aplicației), nu mov-pal: pe fundalul paginii (tot deschis la
   culoare), un mov-pal peste alt aproape-alb "nu se lega" — părea o
   pată, nu un card. Alb + contur subțire creează contrast real. */
.info-box {
  background: #fff; border-radius: 16px; box-shadow: 0 6px 16px rgba(65, 62, 130, .18);
  padding: 16px 18px; font-family: var(--font); font-weight: 700; color: var(--text); font-size: .95rem;
}
.info-box-title { display: block }
.info-box-desc {
  display: block; font-style: italic; font-weight: 500; font-family: var(--font-body);
  color: var(--text-2); margin-top: 4px; font-size: .85rem;
}
.info-box-muted { border: 1.5px dashed var(--border-light); background: transparent }
.info-box-muted .info-box-title, .info-box-muted .info-box-desc { color: var(--text-3) }

/* Boxele extensibile din "Despre proiect" / "Nivelele aplicației" — închise
   implicit, click pe săgeată le deschide. */
.info-accordion { padding: 0; overflow: hidden }
.info-box-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: none; border: none; cursor: pointer; padding: 16px 18px;
  font-family: var(--font); font-weight: 700; color: var(--text); font-size: .95rem; text-align: left;
}
.info-box-toggle .chevron { flex-shrink: 0; color: var(--text-2); transition: transform .35s cubic-bezier(.4,0,.2,1) }
.info-box-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg) }
.info-box-title-group { display: flex; flex-direction: column }
.info-box-detail-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1) }
.info-box-toggle[aria-expanded="true"] + .info-box-detail-wrap { grid-template-rows: 1fr }
.info-box-detail {
  overflow: hidden; min-height: 0; opacity: 0; transition: opacity .25s ease;
  border-top: 1px solid var(--border-light); margin: 0 18px; padding-top: 14px;
}
.info-box-toggle[aria-expanded="true"] + .info-box-detail-wrap .info-box-detail { opacity: 1; transition: opacity .3s ease .1s }
.info-box-detail > p { font-size: .95rem; line-height: 1.6; color: var(--text); font-family: var(--font-body); margin: 0 0 16px }
.info-box-link { display: inline-block; margin: 0 0 16px; font-weight: 600; color: var(--purple); text-decoration: underline; font-size: .85rem; font-family: var(--font) }

/* Grila de status "Ce construim acum" de pe pagina Nivel 1 */
.status-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; text-align: left }
.status-tag { display: block; font-weight: 700; font-size: .72rem; margin-bottom: 4px }
.status-tag-progress { color: #2C8A4B }
.status-tag-research { color: var(--text-2) }
@media (min-width: 560px) {
  .status-grid { flex-direction: row }
  .status-grid .info-box { flex: 1 }
}
.faq { display: flex; flex-direction: column; gap: 42px; text-align: left }
.faq-item {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 13px 22px 6px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.faq-body { padding: 0 22px 12px }
.faq-lead { margin: 0; font-size: .9375rem; line-height: 1.53; color: var(--text) }
.faq-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.faq-item.is-open .faq-detail-wrap { grid-template-rows: 1fr }
.faq-detail { overflow: hidden; min-height: 0; opacity: 0; transition: opacity .25s ease }
.faq-item.is-open .faq-detail { opacity: 1; transition: opacity .3s ease .1s }
.faq-detail > :first-child { margin-top: 18px }
.faq-detail > p { font-size: .8125rem; line-height: 1.6; margin: 0 0 21px }
/* ultimul paragraf sta mai aproape de imaginea articolului */
.faq-detail > p:last-of-type { margin-bottom: 13px }

.article-thumb {
  background: var(--green);
  border-radius: var(--r);
  aspect-ratio: 1.41;
}
/* Textul articolului e indentat fata de thumbnail, ca in design */
.article-body { padding: 0 20px 24px }
.article-body h3 { font-size: 1.375rem; line-height: 1.32; margin: 13px 0 11px }
.article-body p { font-size: .9375rem; line-height: 1.53; margin: 0 0 10px }
.article-link { color: var(--green); font-weight: 700; text-decoration: underline }

/* Subscribe */
.subscribe-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px }
.subscribe-form input {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  background: #fff;
}
.subscribe-form input::placeholder { color: var(--text-3) }
.subscribe-form input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-light) }

/* Welcome banner */
.welcome-banner { background: var(--purple); padding: 48px 0 56px }
.welcome-banner h2 { color: #fff; font-size: 1.5rem }
.welcome-banner p { color: rgba(255, 255, 255, .92) }
.welcome-illustration { margin: 12px auto 20px; max-width: 300px }
.welcome-outro { margin-top: 22px; font-weight: 500 }

@media (min-width: 720px) {
  .wrap { max-width: 560px }
  .hero h1, .hero .problem-slide { font-size: 2rem }
  .h-lg { font-size: 2rem }
  /* Chips 2 coloane de la tablet in sus */
  .chips { display: grid; grid-template-columns: 1fr 1fr }
  /* Sondajul pas-cu-pas ramane pe o coloana — optiunile lungi (nume banci) nu incap in 2 coloane */
  .survey-wrap .chips { display: flex; flex-direction: column }
}

@media (min-width: 960px) {
  .wrap { max-width: 740px }
  .hero h1, .hero .problem-slide { font-size: 2.5rem }
  .h-lg { font-size: 2.4rem }
  .section { padding: 56px 0 }
  .hero { padding-top: 40px }
  .card { padding: 36px 32px }
  .survey h2 { font-size: 1.5rem }
  .tabs-row { margin-top: 160px }
  .welcome-banner { padding: 60px 0 70px }
}


/* Sondaj pas-cu-pas */
.survey-wrap { max-width: 420px; margin: 0 auto; padding: 24px 20px }
.survey-progress-bar { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 10px; overflow: hidden }
.survey-progress-fill { height: 100%; background: var(--purple); border-radius: 2px; transition: width .35s ease }
.survey-step-label { text-align: right; font-size: .8rem; color: var(--text-3); margin: 0 0 18px }
.survey-optional { margin-top: -4px; margin-bottom: 0 }
.survey-nav { display: flex; gap: 12px; margin-top: 16px }
.survey-nav .btn, .survey-nav > span { flex: 1 }
.survey-extra-ta { margin-top: 8px; display: block }
.survey-extra-ta[hidden] { display: none }
.chips-sep { border: none; border-top: 1px solid var(--border-light); margin: 4px 0; grid-column: 1 / -1 }

/* Rezultate sondaj — bare orizontale 3D */
.results-bars { display: flex; flex-direction: column; gap: 14px }
.results-row { display: flex; flex-direction: column; gap: 6px }
.results-label { font-size: .85rem; font-weight: 500; color: var(--text-2); line-height: 1.4 }
.results-track-wrap { display: flex; align-items: center; gap: 10px }
.results-track {
  flex: 1;
  height: 22px;
  background: var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.10);
}
.results-fill {
  height: 100%;
  min-width: 4px;
  border-radius: 6px;
  background: linear-gradient(180deg, #9b6fff 0%, var(--purple) 55%, #5a2fc2 100%);
  box-shadow: 0 3px 0 #3d1ea0, 0 4px 8px rgba(100,60,200,.30);
  transition: width .7s cubic-bezier(.22,.61,.36,1);
}
.results-pct { font-size: .88rem; font-weight: 700; color: var(--purple); min-width: 36px; text-align: right }

/* Pagina de resetare parolă */
.reset-wrap {
  min-height: calc(100svh - 60px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.reset-card {
  width: 100%; max-width: 380px;
  background: var(--card); border-radius: var(--r);
  padding: 32px 28px; box-shadow: var(--shadow);
}
.reset-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--purple-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.reset-icon-success { background: var(--green-bg) }
.reset-icon-error   { background: #FDE8E8 }
.reset-title { font-size: 1.2rem; margin: 0 0 6px; text-align: center }
.reset-email-label { margin: 0 0 4px; text-align: center }
.reset-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border-light);
  border-top-color: var(--purple);
  animation: spin .7s linear infinite;
  margin: 0 auto 12px;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Landing page (index.html) */
.landing-wrap {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.landing-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 320px;
}
.landing-buttons .btn {
  width: 100%;
  padding: 18px 24px;
  font-size: 1.05rem;
  border-radius: var(--r);
}
.landing-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  color: var(--text-3);
  font-size: 0.8rem;
  font-family: var(--font-body);
}
.landing-divider::before,
.landing-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}
.btn-reg {
  background: transparent;
  border: 1.5px solid var(--border-light);
  color: var(--text-2);
  font-size: 0.95rem;
  padding: 14px 24px;
}
.btn-reg:hover { background: var(--bg); border-color: var(--purple-pale) }
.btn-anon {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 0.9rem;
  text-decoration: underline;
  padding: 10px 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-anon:hover { color: var(--text-2) }

/* Autentificare (index.html) */
.auth-email-input {
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  background: var(--card);
  color: var(--text);
  box-sizing: border-box;
}
.auth-email-input::placeholder { color: var(--text-3) }
.auth-email-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-light) }
.auth-note { font-size: .85rem; text-align: center; color: var(--text-2); margin: 0 }
.auth-note.is-error { color: #C0392B }

@media (min-width: 1200px) {
  .wrap { max-width: 920px }
  .hero h1, .hero .problem-slide { font-size: 3rem }
  .h-lg { font-size: 2.8rem }
  .section { padding: 72px 0 }
  .card { padding: 44px 40px }
  .tabs-row { margin-top: 120px }
  /* Butoanele hero nu se intind pe toata latimea la desktop */
  .hero .btn-row .btn { flex: 0 0 auto; min-width: 160px }
  .faq { gap: 28px }
  .welcome-banner { padding: 80px 0 88px }
  .welcome-banner h2 { font-size: 2rem }
  .welcome-illustration { max-width: 380px }
}

@media (min-width: 1440px) {
  .wrap { max-width: 1100px }
  .hero h1, .hero .problem-slide { font-size: 3.5rem }
  .h-lg { font-size: 3.2rem }
  .section { padding: 88px 0 }
}

@media (min-width: 1800px) {
  .wrap { max-width: 1200px }
  .hero h1, .hero .problem-slide { font-size: 3.8rem }
  .h-lg { font-size: 3.5rem }
  .section { padding: 96px 0 }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .chevron, .tl-detail-wrap, .faq-detail-wrap, .chip,
  .info-box-detail-wrap, .info-box-detail, .tl-detail, .faq-detail { transition: none }
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Meniu de lucru: indexul paginilor. De scos înainte de lansare. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-nav {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.page-nav-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--purple);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.page-nav-toggle:hover { background: var(--purple-dark) }

/* display:flex ar bate [hidden] din stylesheet-ul browserului, deci il declaram explicit */
.page-nav-list[hidden] { display: none }
.page-nav-list {
  list-style: none;
  margin: 0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, .96);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.page-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--purple);
  border: 1px solid var(--purple);
}
.page-nav-item.is-current { background: var(--purple); color: #fff }
.page-nav-item.is-todo {
  border-style: dashed;
  border-color: var(--text-3);
  color: var(--text-3);
  cursor: default;
}

/* Pagina principală — grid variante */
.variants-intro { padding: 48px 0 32px }
.variants-intro h1 { font-size: 1.9rem }
.variants-intro p { font-size: 1rem; max-width: 520px; margin: 0 auto }

.variants-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-bottom: 56px;
}
.variant-card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 22px 18px 20px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1.5px solid transparent;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.variant-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(65, 62, 130, .18);
  border-color: var(--purple);
}
.variant-num {
  font-family: var(--font);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--purple);
  line-height: 1;
}
.variant-card h3 { font-size: .9rem; margin: 4px 0 0; color: var(--text) }
.variant-card p { font-size: .78rem; color: var(--text-2); margin: 0; line-height: 1.5 }
.variant-open {
  display: inline-block;
  margin-top: 10px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--purple);
}

@media (min-width: 600px) {
  .variants-grid { grid-template-columns: repeat(3, 1fr); gap: 18px }
}
@media (min-width: 960px) {
  .variants-grid { grid-template-columns: repeat(5, 1fr); gap: 20px }
  .variants-intro h1 { font-size: 2.5rem }
}
@media (min-width: 1200px) {
  .variants-grid { gap: 24px }
}

/* Layout articole (articole.html) — imagine + text, alternând stânga/dreapta.
   Pe mobile imaginea e sus, textul jos. Pe desktop, side-by-side.
   Articol nou: copiază <article class="article-wide"> sau cu --rev pentru imagine dreapta. */
.article-wide {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  margin-bottom: 56px;
}
.article-wide:last-child { margin-bottom: 0 }
.article-wide--rev { flex-direction: row-reverse }

.article-wide-img {
  flex: 0 0 44%;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.article-wide-img img { width: 100%; height: auto; display: block }

.article-wide-body { flex: 1; padding-top: 4px }
.article-wide-body h2 { font-size: 1.35rem; margin: 0 0 14px }
.article-wide-body p { font-size: .95rem; line-height: 1.72; margin: 0; color: var(--text-2) }
.article-wide-body strong { color: var(--text); font-weight: 600 }

/* Fade-in la scroll — stare inițială */
.article-wide-img,
.article-wide-body {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
}
.article-wide-img { transition-delay: 0s }
.article-wide-body { transition-delay: .14s }
.article-wide--rev .article-wide-img { transition-delay: .14s }
.article-wide--rev .article-wide-body { transition-delay: 0s }

/* Stare vizibilă — adăugată de JS prin Intersection Observer */
.article-wide-img.is-visible,
.article-wide-body.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Utilizatorii care preferă mișcare redusă — animație dezactivată */
@media (prefers-reduced-motion: reduce) {
  .article-wide-img,
  .article-wide-body { transition: none; opacity: 1; transform: none }
}

@media (max-width: 719px) {
  .article-wide,
  .article-wide--rev { flex-direction: column; gap: 20px }
  .article-wide-img { flex: none; width: 100% }
  .article-wide { margin-bottom: 40px }
  /* Pe mobile ambele vin din jos, fără decalaj */
  .article-wide-img,
  .article-wide-body,
  .article-wide--rev .article-wide-img,
  .article-wide--rev .article-wide-body { transition-delay: 0s }
}

/* Link navigare spre articole (header index.html) */
.link-nav-art {
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 0;
}
.link-nav-art:hover { color: var(--purple) }

/* Secțiunea de articole (index.html) */
.article-section-title { margin: 0 0 32px; text-align: center }

/* Un articol = card alb cu titlu → imagine → text.
   Adaugă articole noi prin copy/paste al blocului <article class="card article-item">.  */
.article-item { margin-bottom: 24px; text-align: left }
.article-item:last-child { margin-bottom: 0 }

.article-item-label {
  margin: 0 0 8px;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--purple);
}
.article-item-title {
  font-size: 1.3rem;
  margin: 0 0 18px;
  line-height: 1.3;
}
.article-item-thumb {
  background: var(--purple-light);
  border-radius: var(--r-sm);
  aspect-ratio: 16 / 9;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.article-item-thumb--green { background: var(--green-bg) }
.article-item-thumb img {
  width: 38%;
  max-height: 62%;
  object-fit: contain;
}
.article-item-text {
  font-size: .95rem;
  line-height: 1.72;
  color: var(--text-2);
  margin: 0;
}

/* Bara prev/next pentru navigarea între variante (dev) */
.pg-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 8px;
}
.pg-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-weight: 600;
  font-size: .875rem;
  color: var(--purple);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--purple);
  transition: background .15s, color .15s;
  white-space: nowrap;
  cursor: pointer;
}
.pg-bar-btn:hover { background: var(--purple); color: #fff }
.pg-bar-btn[aria-disabled="true"] {
  border-color: var(--border-light);
  color: var(--text-3);
  pointer-events: none;
}
.pg-bar-info {
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2);
  text-align: center;
  flex: 1;
}

/* De la 480px în sus, câmpul și butonul formează o singură „pastilă", iar
   bifa n-are ce căuta înăuntru: o scoatem sub ea, fără să ieșim din <form>
   (subscribe.js o caută acolo). Mesajul de eroare coboară sub bifă. */
@media (min-width: 480px) {
  .theme-dneros .dneros-subscribe .subscribe-form,
  .theme-dneros .dneros-abonare .subscribe-form { margin-bottom: 52px }
  .theme-dneros .dneros-subscribe .subscribe-form .consent-row,
  .theme-dneros .dneros-abonare .subscribe-form .consent-row {
    position: absolute; top: 100%; left: 16px; right: 0; margin: 12px 0 0;
  }
  .theme-dneros .dneros-subscribe .form-note,
  .theme-dneros .dneros-abonare .form-note { margin-top: 62px !important }
  .theme-dneros .dneros-subscribe .subscribe-form.is-sent,
  .theme-dneros .dneros-abonare .subscribe-form.is-sent { margin-bottom: 0 }
}

/* ── Admin: evidența datelor personale ────────────────────────────── */
.gdpr-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: #fff; border-radius: 16px; padding: 14px 18px; margin-bottom: 10px;
  box-shadow: 0 3px 12px rgba(27, 60, 120, .07);
}
.gdpr-row-main { min-width: 0; flex: 1 1 320px }
.gdpr-email {
  display: block; font-family: var(--font); font-weight: 700;
  font-size: .92rem; color: var(--text); word-break: break-all;
}
.gdpr-meta {
  display: block; margin-top: 3px;
  font-family: var(--font-body); font-size: .76rem; color: var(--text-3);
}
.gdpr-row-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }
.gdpr-badge {
  font-family: var(--font); font-weight: 700; font-size: .68rem;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 12px; white-space: nowrap;
}
.gdpr-badge-ok      { background: #E3F5E9; color: #2C8A4B }
.gdpr-badge-soon    { background: #FFF2DC; color: #9A6400 }
.gdpr-badge-expired { background: #FDE6E6; color: #C0392B }
.gdpr-badge-nodate  { background: #EEF2F8; color: #7C879C }
.gdpr-del { color: #C0392B !important }
.gdpr-del:hover:not(:disabled) { border-color: #C0392B !important; background: #FDE6E6 !important }