/* ============================================================
   DaviX Cafe — site de prezentare
   Aceleași culori și fonturi ca aplicația: site-ul și produsul
   trebuie să arate ca același lucru, nu ca doi vecini.
   ============================================================ */

:root {
  /* suprafețe */
  --bg: #f5f1eb;
  --bg-2: #ede7de;
  --surface: #ffffff;
  --surface-2: #faf7f3;
  --line: rgba(38, 26, 18, 0.08);
  --line-2: rgba(38, 26, 18, 0.14);

  /* text */
  --ink: #1e1713;
  --ink-2: #66584d;
  --ink-3: #8f8277;
  --ink-inv: #fbf7f1;

  /* maro, culoarea produsului */
  --accent: #9a5b23;
  --accent-inchis: #7d4819;
  --accent-slab: rgba(154, 91, 35, 0.09);
  --cafea-sus: #5b3a1e;
  --cafea-jos: #36220f;
  --cafea-cerneala: #ecc9a3;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --cuprins: 1160px;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 28px;
  --r-xl: 40px;

  --umbra-1: 0 1px 2px rgba(38, 26, 18, 0.05), 0 1px 1px rgba(38, 26, 18, 0.03);
  --umbra-2: 0 10px 30px -12px rgba(38, 26, 18, 0.16), 0 2px 6px rgba(38, 26, 18, 0.04);
  --umbra-3: 0 30px 70px -24px rgba(38, 26, 18, 0.34), 0 8px 20px -10px rgba(38, 26, 18, 0.12);
  --umbra-4: 0 60px 120px -40px rgba(38, 26, 18, 0.42), 0 16px 40px -20px rgba(38, 26, 18, 0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- temelie ------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* antetul lipicios nu trebuie să acopere titlul secțiunii spre care sari */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.cuprins {
  width: 100%;
  max-width: var(--cuprins);
  margin: 0 auto;
  padding: 0 24px;
}

.sari {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--ink-inv);
  border-radius: var(--r-s);
}
.sari:focus { left: 16px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- tipografie comună -------------------------------------- */

.eticheta {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eticheta--clar { color: var(--cafea-cerneala); }

.titlu {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.intro {
  margin-top: 18px;
  max-width: 58ch;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--ink-2);
}

.cap { margin-bottom: 56px; }

.sectiune { padding: clamp(72px, 11vw, 132px) 0; }
.sectiune--alt { background: var(--bg-2); }

.sectiune--intunecat {
  background: linear-gradient(160deg, var(--cafea-sus), var(--cafea-jos));
  color: var(--ink-inv);
}
.sectiune--intunecat .titlu { color: var(--ink-inv); }
.sectiune--intunecat .intro { color: rgba(251, 247, 241, 0.72); }

/* --- butoane ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 28px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-inv);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: var(--umbra-2);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn:hover { background: var(--accent-inchis); transform: translateY(-2px); box-shadow: var(--umbra-3); }
.btn:active { transform: translateY(0) scale(0.99); }

.btn--gol {
  color: var(--ink);
  background: transparent;
  border-color: var(--line-2);
  box-shadow: none;
}
.btn--gol:hover { background: var(--surface); border-color: transparent; }

.btn--mic { min-height: 42px; padding: 0 20px; font-size: 14px; box-shadow: none; }
.btn--lat { width: 100%; }

/* --- antet --------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 241, 235, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.nav.este-lipit { border-bottom-color: var(--line); }

.nav__interior {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--cuprins);
  margin: 0 auto;
  padding: 14px 24px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.marca__semn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--accent);
  background: var(--surface);
  border-radius: 11px;
  box-shadow: var(--umbra-1);
}
.marca__semn--mic { width: 30px; height: 30px; border-radius: 9px; }
.marca__text-2 { color: var(--ink-3); font-weight: 400; }

.nav__legaturi {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-size: 14.5px;
  color: var(--ink-2);
}
.nav__legaturi a {
  position: relative;
  padding: 11px 15px;
  border-radius: 999px;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.nav__legaturi a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }

/* --- cele trei linii (meniul de telefon/tabletă) -------------- */

.nav__meniu {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.nav__meniu:hover { background: rgba(255, 255, 255, 0.7); }
.nav__linii { display: flex; flex-direction: column; gap: 4px; width: 17px; }
.nav__linii span {
  display: block;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__meniu[aria-expanded="true"] .nav__linii span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav__meniu[aria-expanded="true"] .nav__linii span:nth-child(2) { opacity: 0; }
.nav__meniu[aria-expanded="true"] .nav__linii span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.meniu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 49;
  background: rgba(245, 241, 235, 0.98);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--umbra-2);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.meniu.este-vizibil { opacity: 1; transform: none; }
.meniu__interior {
  display: flex;
  flex-direction: column;
  max-width: var(--cuprins);
  margin: 0 auto;
  padding: 6px 24px 22px;
}
.meniu__interior a {
  padding: 14px 4px;
  font-size: 15.5px;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.meniu__interior a:last-of-type { border-bottom: none; }
.meniu__btn { justify-content: center; margin-top: 14px; }

/* --- erou ---------------------------------------------------- */

.erou {
  position: relative;
  padding: clamp(56px, 9vw, 104px) 0 clamp(72px, 11vw, 128px);
  overflow: hidden;
}

/* o singură pată caldă, foarte difuză: dă adâncime fără să ceară atenție */
.erou__fundal {
  position: absolute;
  top: -22%;
  right: -12%;
  width: min(760px, 90vw);
  height: min(760px, 90vw);
  background: radial-gradient(circle, rgba(154, 91, 35, 0.14), transparent 66%);
  pointer-events: none;
}

.erou__grila {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.titlu-erou {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 70px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.titlu-erou em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.subtitlu {
  margin-top: 26px;
  max-width: 50ch;
  font-size: clamp(16.5px, 1.7vw, 19px);
  color: var(--ink-2);
}

.erou__butoane {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.erou__puncte {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 36px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.erou__puncte li { display: inline-flex; align-items: center; gap: 9px; }

.bif {
  position: relative;
  flex: none;
  width: 19px;
  height: 19px;
  background: var(--accent-slab);
  border-radius: 50%;
}
.bif::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 9px;
  border: solid var(--accent);
  border-width: 0 1.9px 1.9px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* --- rama de telefon ----------------------------------------- */

.telefon {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 11px;
  background: linear-gradient(150deg, #2a2420, #14100d);
  border-radius: 46px;
  box-shadow: var(--umbra-4);
}
/* reflexia discretă de pe marginea ramei */
.telefon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 46px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.22), transparent 40%);
  pointer-events: none;
}
.telefon__ecran {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 36px;
}
/* decupajul camerei */
.telefon__ecran::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  width: 78px;
  height: 22px;
  background: #14100d;
  border-radius: 999px;
  transform: translateX(-50%);
}

.telefon--mic { max-width: 226px; padding: 8px; border-radius: 34px; }
.telefon--mic::before { border-radius: 34px; }
.telefon--mic .telefon__ecran { border-radius: 27px; }
.telefon--mic .telefon__ecran::after { top: 8px; width: 56px; height: 16px; }

/* Unele capturi (ex. ecranul de înscriere) au antetul lipit de marginea de
   sus, fără loc pentru decupajul camerei. Le coborâm cu puțin fundal
   crem, ca să nu stea camera peste text. */
.telefon__ecran--antet { padding-top: 30px; }

.telefon--plutitor { animation: plutire 7s ease-in-out infinite; }
@keyframes plutire {
  0%, 100% { transform: translateY(0) rotate(-1.1deg); }
  50% { transform: translateY(-14px) rotate(-0.4deg); }
}

.pereche {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 34px;
}
.pereche .telefon--in-spate {
  margin-left: -74px;
  margin-top: 46px;
  z-index: -1;
  opacity: 0.94;
}

.tableta {
  overflow: hidden;
  padding: 12px;
  background: linear-gradient(150deg, #2a2420, #14100d);
  border-radius: 24px;
  box-shadow: var(--umbra-3);
}
.tableta img { border-radius: 14px; }

/* --- pași ---------------------------------------------------- */

.pasi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: pas;
}

.pas {
  position: relative;
  padding: 36px 30px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--umbra-1);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.pas:hover { transform: translateY(-4px); box-shadow: var(--umbra-2); }

.pas__nr {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--accent);
  opacity: 0.32;
}
.pas h3 { margin-bottom: 10px; font-size: 20px; }
.pas p { font-size: 15.5px; color: var(--ink-2); }

/* --- blocuri în două coloane --------------------------------- */

.doua {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.doua--inversat .doua__text { order: 2; }

.lista { margin-top: 28px; display: grid; gap: 16px; }
.lista li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  color: var(--ink-2);
}
.lista li strong { color: var(--ink); font-weight: 600; }
.lista li::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 4px;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.5;
}

/* --- ecranul mare al patronului ------------------------------- */

.ecran-mare {
  margin: 0 0 56px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--umbra-3);
}
.ecran-mare img { border-radius: 28px; }
.ecran-mare figcaption {
  padding: 16px 8px 6px;
  font-size: 13px;
  text-align: center;
  color: var(--ink-3);
}

/* --- cartonașe ------------------------------------------------ */

.cartonase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cartonas {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.cartonas:hover { transform: translateY(-3px); box-shadow: var(--umbra-2); }
.cartonas h3 { margin-bottom: 8px; font-size: 17px; }
.cartonas p { font-size: 14.5px; color: var(--ink-2); }

/* --- siguranță ------------------------------------------------ */

.siguranta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}
.sig {
  padding: 32px 28px;
  background: var(--bg);
  transition: background-color 0.4s var(--ease);
}
.sig:hover { background: var(--surface); }
.sig h3 { margin-bottom: 8px; font-size: 16.5px; }
.sig p { font-size: 14.5px; color: var(--ink-2); }

/* --- ce urmează ------------------------------------------------ */

.urmeaza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.urm {
  padding: 36px 32px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(251, 247, 241, 0.13);
  border-radius: var(--r-l);
  transition: background-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.urm:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-3px); }

.urm__stare {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cafea-cerneala);
  border: 1px solid rgba(236, 201, 163, 0.34);
  border-radius: 999px;
}
.urm h3 { margin-bottom: 12px; font-size: 21px; color: var(--ink-inv); }
.urm p { font-size: 15.5px; color: rgba(251, 247, 241, 0.7); }

.nota {
  margin-top: 36px;
  font-size: 14px;
  text-align: center;
  color: rgba(251, 247, 241, 0.5);
}

/* --- preț ------------------------------------------------------ */

.pret {
  max-width: 520px;
  margin: 0 auto;
  padding: 44px 40px 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--umbra-3);
}
.pret__sus { padding-bottom: 28px; border-bottom: 1px solid var(--line); text-align: center; }
.pret__nume { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.pret__cifra {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 10px;
}
.pret__suma {
  font-family: var(--font-display);
  font-size: 84px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pret__moneda { font-size: 19px; color: var(--ink-2); }
.pret__moneda span { display: block; font-size: 14px; color: var(--ink-3); }
.pret__tva { font-size: 13.5px; color: var(--ink-3); }

.pret__lista { display: grid; gap: 13px; margin: 28px 0 32px; }
.pret__lista li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  color: var(--ink-2);
}
.pret__lista li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pret__lista li:first-child { font-weight: 600; color: var(--ink); }

/* --- contact ---------------------------------------------------- */

.contact { max-width: 640px; margin: 0 auto; text-align: center; }
.contact .intro { margin-left: auto; margin-right: auto; }

.contact__date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 40px 0 26px;
}
.contact__rand {
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.contact__rand:hover { transform: translateY(-2px); box-shadow: var(--umbra-2); }
.contact__eticheta {
  display: block;
  margin-bottom: 5px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact__valoare { font-size: 16px; font-weight: 500; color: var(--accent); word-break: break-word; }
.contact__mic { font-size: 13.5px; color: var(--ink-3); }

/* --- subsol ------------------------------------------------------ */

.subsol { padding: 56px 0 44px; background: var(--bg); border-top: 1px solid var(--line); }
.subsol__interior { display: grid; gap: 12px; text-align: center; justify-items: center; }
.subsol__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 17px;
}
.subsol__text { font-size: 14.5px; color: var(--ink-2); }
.subsol__mic { font-size: 13px; color: var(--ink-3); }

/* --- apariția la derulare ---------------------------------------- */

.anima {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc((var(--pas, 0)) * 90ms);
}
.anima.este-vizibil { opacity: 1; transform: none; }

/* --- ecrane mici --------------------------------------------------- */

@media (max-width: 960px) {
  .erou__grila { grid-template-columns: 1fr; text-align: center; }
  .erou__text { order: 1; }
  .erou__telefon { order: 2; }
  .subtitlu, .intro { margin-left: auto; margin-right: auto; }
  .erou__butoane, .erou__puncte { justify-content: center; }

  .doua { grid-template-columns: 1fr; }
  .doua--inversat .doua__text { order: 1; }

  .pasi, .cartonase, .siguranta { grid-template-columns: 1fr 1fr; }
  .urmeaza { grid-template-columns: 1fr; }

  .nav__legaturi { display: none; }
  .nav__interior { justify-content: space-between; }
  .nav__meniu { display: inline-flex; }
}

.nav__demo-scurt { display: none; }

@media (max-width: 700px) {
  .nav__demo-lung { display: none; }
  .nav__demo-scurt { display: inline; }
}

@media (max-width: 460px) {
  .nav__incearca { display: none; }
  /* numele întreg rămâne: „DaviX Cafe”, nu doar „DaviX” */
  .nav__interior { gap: 12px; padding-left: 20px; padding-right: 20px; }
  .marca { gap: 9px; font-size: 18px; white-space: nowrap; }
  .marca__semn { width: 34px; height: 34px; }
  .marca__semn img { width: 30px; height: 30px; }
  .nav__demo { padding: 0 14px; }
}

@media (max-width: 340px) {
  .nav__interior { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .marca { font-size: 17px; }
  .nav__demo { padding: 0 12px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .cuprins { padding: 0 20px; }
  .pasi, .cartonase, .siguranta, .contact__date { grid-template-columns: 1fr; }

  .cap { margin-bottom: 40px; }
  .pas { padding: 28px 24px; }
  .sig { padding: 26px 24px; }
  .urm { padding: 28px 24px; }
  .pret { padding: 36px 26px 32px; }
  .pret__suma { font-size: 68px; }

  .ecran-mare { padding: 6px; border-radius: 22px; }
  .ecran-mare img { border-radius: 16px; }

  /* două telefoane suprapuse nu încap pe un ecran îngust */
  .pereche { padding-bottom: 0; }
  .pereche .telefon--in-spate { display: none; }
  .telefon--mic { max-width: 260px; }
}

/* --- respectăm setarea de sistem ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima { opacity: 1; transform: none; transition: none; }
  .telefon--plutitor { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   Atmosfera caldă
   Lumini foarte difuze, în spatele conținutului. Rolul lor e să
   scoată cartonașele albe în față, nu să se vadă ele.
   ============================================================ */

body {
  background-image:
    radial-gradient(760px 520px at 88% -4%, rgba(198, 138, 74, 0.16), transparent 62%),
    radial-gradient(620px 460px at -8% 22%, rgba(154, 91, 35, 0.07), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Secțiunile colorate stau peste lumini, ca să nu se amestece. */
.sectiune--alt,
.sectiune--intunecat,
.subsol { position: relative; z-index: 1; }

/* A doua lumină în erou, de sub telefon: pare că ecranul luminează masa. */
.erou__telefon { position: relative; }
.erou__telefon::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 118%;
  height: 58%;
  background: radial-gradient(ellipse, rgba(154, 91, 35, 0.2), transparent 68%);
  transform: translateX(-50%);
  filter: blur(26px);
  pointer-events: none;
}

/* Cartonașele albe capătă un strop de sticlă: se citesc peste lumini. */
.pas,
.cartonas,
.pret,
.contact__rand,
.ecran-mare {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(130%) blur(10px);
  -webkit-backdrop-filter: saturate(130%) blur(10px);
}

/* Secțiunea întunecată primește aceeași lumină caldă, dinăuntru. */
.sectiune--intunecat { overflow: hidden; }
.sectiune--intunecat::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(900px, 120vw);
  height: min(900px, 120vw);
  background: radial-gradient(circle, rgba(236, 201, 163, 0.11), transparent 62%);
  transform: translateX(-50%);
  pointer-events: none;
}
.sectiune--intunecat > .cuprins { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}

/* `background-attachment: fixed` e greu pe iOS și pe Android vechi: pe ecrane
   mici lumina stă pe loc, se derulează cu pagina. */
@media (max-width: 960px) {
  body { background-attachment: scroll; }
}

/* ============================================================
   Demo: butonul din antet și invitația
   ============================================================ */

.nav__actiuni { display: flex; align-items: center; gap: 8px; }

.nav__demo { gap: 9px; padding-left: 16px; }

/* punctul verde: „e viu, se poate atinge acum” */
.punct-viu {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  background: #2e7d52;
  border-radius: 50%;
}
.punct-viu::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px solid #2e7d52;
  border-radius: 50%;
  animation: puls-viu 2.4s ease-out infinite;
}
@keyframes puls-viu {
  0% { opacity: 0.6; transform: scale(0.7); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}

.invitatie {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(360px, calc(100vw - 32px));
  padding: 15px 17px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--umbra-3);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.invitatie.este-vizibil { opacity: 1; transform: none; }
.invitatie.pleaca { opacity: 0; transform: translateY(10px) scale(0.98); }

.invitatie__semn {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--accent);
  background: var(--accent-slab);
  border-radius: 12px;
}

.invitatie__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.invitatie__text strong { font-size: 14.5px; font-weight: 600; }
.invitatie__text span { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }

.invitatie__btn {
  flex: none;
  padding: 10px 17px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-inv);
  background: var(--accent);
  border-radius: 999px;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.invitatie__btn:hover { background: var(--accent-inchis); transform: translateY(-1px); }

.invitatie__inchide {
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--umbra-1);
  cursor: pointer;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.invitatie__inchide:hover { color: var(--ink); transform: scale(1.08); }

@media (max-width: 620px) {
  /* pe telefon stă jos de tot, mai mică, discretă, ca o notificare de sistem */
  .invitatie {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 16px;
  }
  .invitatie__semn { width: 32px; height: 32px; border-radius: 10px; }
  .invitatie__semn img { width: 17px; height: 17px; }
  .invitatie__text strong { font-size: 13px; }
  .invitatie__text span { display: none; }
  .invitatie__btn { padding: 8px 13px; font-size: 12.5px; }
  .invitatie__inchide { width: 22px; height: 22px; top: -7px; right: -7px; }
}

/* ============================================================
   Luna gratuită
   Stă deasupra prețului și arată în jos spre el: întâi înțelegi
   că nu dai nimic acum, abia apoi vezi cât costă mai târziu.
   ============================================================ */

.gratis {
  position: relative;
  max-width: 520px;
  margin: 0 auto 46px;
  padding: 36px 40px 40px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--umbra-2);
}

.gratis__insigna {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 15px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  background: var(--ok-slab);
  border-radius: 999px;
}

.gratis__titlu {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.gratis__text {
  margin: 14px auto 0;
  max-width: 42ch;
  font-size: 15.5px;
  color: var(--ink-2);
}
.gratis__text strong { color: var(--ink); font-weight: 600; }

.gratis__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}
.gratis__lista li {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 999px;
}

.gratis__jos {
  margin-top: 24px;
  padding-top: 22px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  border-top: 1px solid var(--line);
}

/* săgeata care leagă cele două cartonașe */
.gratis__sageata {
  position: absolute;
  bottom: -19px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--umbra-1);
  transform: translateX(-50%);
  animation: arata-jos 2.8s ease-in-out infinite;
}
@keyframes arata-jos {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}

@media (max-width: 620px) {
  .gratis { padding: 30px 24px 34px; margin-bottom: 42px; }
  .gratis__lista { gap: 6px; }
  .gratis__lista li { padding: 7px 12px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gratis__sageata { animation: none; }
}

/* ============================================================
   Strat premium
   Doar finisaj: margini, lumini, mișcare. Spațierile de mai sus
   rămân exact cum sunt — aici nu se mută nimic din loc.
   ============================================================ */

:root {
  --ok: #2e7d52;
  --ok-slab: rgba(46, 125, 82, 0.1);
  --aur: #c8894a;
  --aur-2: #e7c197;
  --grad-accent: linear-gradient(180deg, #ab6a2e 0%, #8e531f 100%);
  --grad-accent-hover: linear-gradient(180deg, #9d5e25 0%, #7a4618 100%);
  --grad-text: linear-gradient(100deg, #8a4f1c 0%, #c8894a 48%, #9a5b23 100%);
  --lumina-sus: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ease-arc: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* `hidden` trebuie să ascundă cu adevărat, chiar dacă o clasă cere `display: flex`:
   altfel un panou invizibil stă peste pagină și înghite clicurile. */
[hidden] { display: none !important; }

html { scrollbar-color: rgba(154, 91, 35, 0.35) transparent; }
body { -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; }
::selection { background: rgba(200, 137, 74, 0.26); color: var(--ink); }

/* granulația fină a hârtiei — se simte, nu se vede */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- antet ---------------------------------------------------- */

.nav.este-lipit {
  background: rgba(247, 243, 238, 0.8);
  box-shadow: 0 12px 30px -24px rgba(38, 26, 18, 0.35);
}
/* bara de progres a lecturii, un fir de caramel sub antet */
.nav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--aur) 30%, var(--accent));
  transform: scaleX(var(--progres, 0));
  transform-origin: 0 50%;
  opacity: 0.85;
  pointer-events: none;
}

.marca__semn {
  background: linear-gradient(180deg, #fff, #f7f1ea);
  box-shadow: var(--lumina-sus), 0 0 0 1px rgba(154, 91, 35, 0.12), 0 6px 14px -8px rgba(154, 91, 35, 0.5);
  transition: transform 0.5s var(--ease-arc);
}
.marca:hover .marca__semn { transform: rotate(-6deg) scale(1.05); }

/* pe calculator marca are loc: sigla și numele cresc */
.marca, .nav__legaturi a, .nav__actiuni .btn { white-space: nowrap; }

/* Cu marca mare, cele patru legături încap pe un rând abia de la ~1180px.
   Sub atât, trec în meniul cu trei linii, ca pe tabletă. */
@media (max-width: 1180px) {
  .nav__legaturi { display: none; }
  .nav__interior { justify-content: space-between; }
  .nav__meniu { display: inline-flex; }
}

@media (min-width: 961px) {
  .marca { gap: 13px; font-size: 24px; }
  .marca__semn { width: 48px; height: 48px; border-radius: 14px; }
  .marca__semn img { width: 42px; height: 42px; }
}

.nav__legaturi a.este-activ {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--lumina-sus), 0 1px 3px rgba(38, 26, 18, 0.06);
}

/* --- butoane --------------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(38, 26, 18, 0.18),
    0 10px 24px -10px rgba(154, 91, 35, 0.6);
}
.btn:hover {
  background: var(--grad-accent-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 2px 4px rgba(38, 26, 18, 0.16),
    0 18px 34px -12px rgba(154, 91, 35, 0.7);
}
/* reflexia care trece peste buton la hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.28) 45%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.12s; }

.btn--gol {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(38, 26, 18, 0.1);
  box-shadow: var(--lumina-sus), 0 1px 2px rgba(38, 26, 18, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--gol:hover { background: #fff; border-color: rgba(38, 26, 18, 0.06); box-shadow: var(--lumina-sus), var(--umbra-2); }
.btn--gol::after { display: none; }
.btn--mic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -8px rgba(154, 91, 35, 0.6); }
.btn--mic.btn--gol { box-shadow: var(--lumina-sus), 0 1px 2px rgba(38, 26, 18, 0.05); }

/* --- tipografie ------------------------------------------------ */

.eticheta::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1.5px;
  margin-right: 10px;
  vertical-align: middle;
  background: linear-gradient(90deg, transparent, currentColor);
  border-radius: 2px;
  transform: translateY(-1px);
}

.titlu-erou em {
  padding-right: 0.06em;
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: luciu-text 9s ease-in-out infinite;
}
@keyframes luciu-text {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.titlu { text-wrap: balance; }
.intro, .subtitlu { text-wrap: pretty; }

/* --- cartonașele: margine de lumină + reflector sub cursor ------- */

.pas, .cartonas, .pret, .gratis, .contact__rand, .ecran-mare, .urm, .sig {
  position: relative;
  isolation: isolate;
}
.pas, .cartonas, .pret, .gratis, .contact__rand, .ecran-mare {
  border-color: rgba(38, 26, 18, 0.07);
  box-shadow: var(--lumina-sus), var(--umbra-1);
}
.pas::before, .cartonas::before, .pret::before, .gratis::before, .contact__rand::before, .urm::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(200, 137, 74, 0.7), rgba(200, 137, 74, 0.05) 45%, rgba(154, 91, 35, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.pas::after, .cartonas::after, .contact__rand::after, .urm::after, .sig::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(200, 137, 74, 0.12), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.pas:hover::before, .cartonas:hover::before, .contact__rand:hover::before, .urm:hover::before,
.pas:hover::after, .cartonas:hover::after, .contact__rand:hover::after, .urm:hover::after, .sig:hover::after { opacity: 1; }
.pas:hover, .cartonas:hover {
  box-shadow: var(--lumina-sus), 0 22px 44px -22px rgba(38, 26, 18, 0.28), 0 4px 10px -6px rgba(38, 26, 18, 0.08);
}

.pas__nr {
  opacity: 1;
  background: linear-gradient(180deg, var(--aur) 10%, rgba(154, 91, 35, 0.18) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* iconițele mici din titluri */
.ic {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--accent);
  background: linear-gradient(180deg, #fff, #f6ede3);
  border-radius: 9px;
  box-shadow: var(--lumina-sus), 0 0 0 1px rgba(154, 91, 35, 0.14), 0 4px 10px -6px rgba(154, 91, 35, 0.45);
  transition: transform 0.5s var(--ease-arc);
}
.ic svg { width: 16px; height: 16px; }
.cartonas h3, .sig h3 { display: flex; align-items: center; gap: 11px; }
.cartonas:hover .ic, .sig:hover .ic { transform: translateY(-2px) rotate(-5deg); }

/* punctele din liste devin mici boabe luminate */
.lista li::before {
  opacity: 1;
  background: radial-gradient(circle at 35% 35%, var(--aur-2), var(--accent) 70%);
  box-shadow: 0 0 0 3px rgba(154, 91, 35, 0.1);
}

/* --- ramele de telefon și tabletă -------------------------------- */

.telefon {
  box-shadow:
    var(--umbra-4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 0 2.5px #0c0a08,
    inset 0 0 0 3.5px rgba(255, 255, 255, 0.06);
}
.telefon__ecran { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.tableta {
  box-shadow: var(--umbra-3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 2.5px #0c0a08;
  transition: transform 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.doua__imagine:hover .tableta {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow: var(--umbra-4), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 2.5px #0c0a08;
}
.pereche .telefon { transition: transform 0.8s var(--ease); }
.pereche:hover .telefon:first-child { transform: translateY(-6px) rotate(-1.5deg); }
.pereche:hover .telefon--in-spate { transform: translateY(4px) rotate(2deg); }

.ecran-mare { overflow: hidden; }
.ecran-mare img { transition: transform 1.2s var(--ease); }
.ecran-mare:hover img { transform: scale(1.012); }

/* etichetele care plutesc lângă telefonul din erou */
.plutitor {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(38, 26, 18, 0.4), 0 2px 6px rgba(38, 26, 18, 0.06);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  animation: plutire-eticheta 6s ease-in-out infinite;
}
.plutitor__ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--grad-accent);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.plutitor__ic svg { width: 16px; height: 16px; }
.plutitor--ok .plutitor__ic { background: linear-gradient(180deg, #3b9466, #2a6f4a); }
.plutitor--1 { top: 40%; left: -196px; }
.plutitor--2 { bottom: 13%; right: -150px; animation-delay: -3s; }
@media (max-width: 1100px) { .plutitor--1 { left: -150px; } .plutitor--2 { right: -110px; } }
@keyframes plutire-eticheta {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* Pe telefon etichetele rămân, doar mai mici, lipite de marginile
   telefonului desenat — nu ies din ecran. */
@media (max-width: 620px) {
  .plutitor {
    gap: 7px;
    padding: 6px 10px 6px 6px;
    font-size: 11.5px;
    border-radius: 13px;
  }
  .plutitor__ic { width: 24px; height: 24px; border-radius: 8px; }
  .plutitor__ic svg { width: 13px; height: 13px; }
  .plutitor--1 { top: 38%; left: -16px; }
  .plutitor--2 { bottom: 12%; right: -16px; }
}
@media (max-width: 340px) {
  .plutitor { font-size: 10.5px; }
  .plutitor--1 { left: -10px; }
  .plutitor--2 { right: -10px; }
}

/* --- secțiunea întunecată --------------------------------------- */

.sectiune--intunecat {
  background:
    radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.3px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--cafea-sus), var(--cafea-jos));
}
.urm { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.urm::before { background: linear-gradient(160deg, rgba(236, 201, 163, 0.6), transparent 50%, rgba(236, 201, 163, 0.25)); }
.urm::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(236, 201, 163, 0.1), transparent 62%); }
.urm__stare { display: inline-flex; align-items: center; gap: 8px; background: rgba(236, 201, 163, 0.06); }
.urm__stare::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--cafea-cerneala);
  border-radius: 50%;
  animation: puls-cald 2.4s ease-out infinite;
}
@keyframes puls-cald {
  0% { box-shadow: 0 0 0 0 rgba(236, 201, 163, 0.55); }
  80%, 100% { box-shadow: 0 0 0 7px rgba(236, 201, 163, 0); }
}

/* --- preț --------------------------------------------------------- */

.pret::before, .gratis::before { opacity: 1; }
.pret::before { background: linear-gradient(170deg, rgba(200, 137, 74, 0.85), rgba(200, 137, 74, 0.08) 40%, rgba(154, 91, 35, 0.5)); }
.gratis::before { background: linear-gradient(170deg, rgba(46, 125, 82, 0.35), rgba(46, 125, 82, 0.03) 45%, rgba(38, 26, 18, 0.08)); }
.pret { box-shadow: var(--lumina-sus), var(--umbra-3), 0 0 80px -30px rgba(200, 137, 74, 0.5); }
.pret__suma {
  padding-right: 0.04em;
  background: linear-gradient(180deg, var(--ink) 30%, #6b4424);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pret__lista li::before { border-color: var(--aur); }
.gratis__insigna { display: inline-flex; align-items: center; gap: 7px; box-shadow: inset 0 0 0 1px rgba(46, 125, 82, 0.16); }
.gratis__insigna::before { content: ''; width: 6px; height: 6px; background: var(--ok); border-radius: 50%; }
.gratis__lista li {
  box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.06);
  transition: transform 0.4s var(--ease-arc), background-color 0.3s;
}
.gratis__lista li:hover { transform: translateY(-2px); background: #fff; }

/* --- contact și subsol ---------------------------------------------- */

.contact__valoare { transition: color 0.3s var(--ease); }
.contact__rand:hover .contact__valoare { color: var(--accent-inchis); }
.contact__rand:active, .cartonas:active, .pas:active { transform: scale(0.985); transition-duration: 0.15s; }
.subsol { background: linear-gradient(180deg, var(--bg), #efe8df); }

/* --- apariția: un strop de blur, ca la aplicațiile native ------------ */

.anima {
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: calc((var(--pas, 0)) * 90ms);
}
.anima.este-vizibil { filter: none; }

/* După apariție, cartonașele trebuie să se poată ridica iar la hover —
   regula de apariție de mai sus le-ar ține lipite de loc. */
.pas.este-vizibil { transition: opacity 0.9s var(--ease), transform 0.45s var(--ease), filter 0.9s var(--ease), box-shadow 0.45s var(--ease); }
.cartonas.este-vizibil, .urm.este-vizibil { transition: opacity 0.9s var(--ease), transform 0.45s var(--ease), filter 0.9s var(--ease), box-shadow 0.45s var(--ease), background-color 0.45s var(--ease); }
.pas.este-vizibil:hover { transform: translateY(-4px); }
.cartonas.este-vizibil:hover, .urm.este-vizibil:hover { transform: translateY(-3px); }
.pas.este-vizibil:active, .cartonas.este-vizibil:active { transform: scale(0.985); transition-duration: 0.15s; }

/* invitația la demo stă deasupra butonului asistentului */
.invitatie { bottom: 92px; }

@media (prefers-reduced-motion: reduce) {
  .anima { filter: none; }
  .titlu-erou em, .plutitor, .urm__stare::before { animation: none; }
}

/* ============================================================
   Asistentul
   ============================================================ */

.asistent { position: fixed; right: 22px; bottom: 22px; z-index: 70; }

.asistent__lansator {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 7px;
  font: 600 14px/1 var(--font-body);
  color: var(--ink-inv);
  background: linear-gradient(160deg, #4a2f18, #24170b);
  border: none;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(236, 201, 163, 0.18),
    0 18px 40px -14px rgba(38, 26, 18, 0.6);
  cursor: pointer;
  transition: transform 0.45s var(--ease-arc), box-shadow 0.45s var(--ease), opacity 0.3s;
}
.asistent__lansator:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(236, 201, 163, 0.3), 0 24px 48px -16px rgba(38, 26, 18, 0.7);
}
.asistent__lansator:active { transform: scale(0.96); }
.asistent__lansator-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #2a1a0c;
  background: linear-gradient(160deg, var(--aur-2), var(--aur));
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.asistent__lansator-ic svg { width: 20px; height: 20px; animation: scanteie 4s ease-in-out infinite; }
.asistent__lansator-ic::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1.5px solid rgba(231, 193, 151, 0.6);
  border-radius: 50%;
  animation: puls-viu 2.8s ease-out infinite;
}
@keyframes scanteie {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(18deg) scale(1.08); }
}
.asistent.este-deschis .asistent__lansator-ic::after { display: none; }

.asistent__panou {
  position: absolute;
  right: 0;
  bottom: 68px;
  display: flex;
  flex-direction: column;
  width: 384px;
  height: min(600px, calc(100vh - 130px));
  overflow: hidden;
  background: rgba(250, 247, 243, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(38, 26, 18, 0.5), 0 0 0 1px rgba(38, 26, 18, 0.06), 0 8px 24px -12px rgba(38, 26, 18, 0.2);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transform-origin: 100% 100%;
  transition: opacity 0.32s var(--ease), transform 0.45s var(--ease-arc);
}
.asistent__panou.este-vizibil { opacity: 1; transform: none; }

.asistent__cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  color: var(--ink-inv);
  background:
    radial-gradient(260px 120px at 90% -20%, rgba(231, 193, 151, 0.28), transparent 70%),
    linear-gradient(160deg, #4a2f18, #24170b);
}
.asistent__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #fbf7f1;
  border-radius: 13px;
  box-shadow: 0 0 0 1px rgba(236, 201, 163, 0.35), 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.asistent__titlu { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.asistent__titlu strong { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.asistent__titlu span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(251, 247, 241, 0.66); }
.asistent__viu { width: 7px; height: 7px; flex: none; background: #4cc184; border-radius: 50%; box-shadow: 0 0 0 3px rgba(76, 193, 132, 0.2); }
.asistent__inchide {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: rgba(251, 247, 241, 0.75);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.4s var(--ease-arc);
}
.asistent__inchide:hover { background: rgba(255, 255, 255, 0.16); color: #fff; transform: rotate(90deg); }

.asistent__mesaje {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.msg { display: flex; flex-direction: column; max-width: 88%; animation: msg-intra 0.45s var(--ease) both; }
.msg--bot { align-self: flex-start; }
.msg--eu { align-self: flex-end; align-items: flex-end; }
@keyframes msg-intra {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.msg__bula {
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  background: #fff;
  border-radius: 18px 18px 18px 6px;
  box-shadow: var(--lumina-sus), 0 0 0 1px rgba(38, 26, 18, 0.06), 0 4px 12px -8px rgba(38, 26, 18, 0.2);
}
.msg__bula strong { color: var(--ink); font-weight: 600; }
.msg__bula a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(154, 91, 35, 0.3); text-underline-offset: 2px; }
.msg__bula ol { margin: 8px 0 0; padding-left: 20px; list-style: decimal; display: grid; gap: 5px; }
.msg__bula ol li::marker { color: var(--accent); font-weight: 600; }
.msg__despre {
  display: block;
  margin: 12px 0 4px;
  padding-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--line);
}
.msg--eu .msg__bula {
  color: var(--ink-inv);
  background: var(--grad-accent);
  border-radius: 18px 18px 6px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 14px -8px rgba(154, 91, 35, 0.7);
}

.msg__actiuni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg__actiuni a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-inchis);
  background: rgba(154, 91, 35, 0.08);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(154, 91, 35, 0.16);
  transition: background-color 0.3s, transform 0.3s var(--ease-arc);
}
.msg__actiuni a::after { content: '→'; transition: transform 0.3s var(--ease); }
.msg__actiuni a:hover { background: rgba(154, 91, 35, 0.14); transform: translateY(-1px); }
.msg__actiuni a:hover::after { transform: translateX(2px); }

.msg--scrie .msg__bula { display: flex; gap: 4px; padding: 14px 16px; }
.msg--scrie i { width: 6px; height: 6px; background: var(--ink-3); border-radius: 50%; animation: puncte 1.2s ease-in-out infinite; }
.msg--scrie i:nth-child(2) { animation-delay: 0.15s; }
.msg--scrie i:nth-child(3) { animation-delay: 0.3s; }
@keyframes puncte {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.asistent__sugestii { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.asistent__sugestii:empty { display: none; }
.asistent__chip {
  padding: 7px 12px;
  font: 500 12.5px/1.2 var(--font-body);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  border: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.1);
  cursor: pointer;
  animation: msg-intra 0.45s var(--ease) both;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.35s var(--ease-arc);
}
.asistent__chip:nth-child(2) { animation-delay: 0.06s; }
.asistent__chip:nth-child(3) { animation-delay: 0.12s; }
.asistent__chip:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(154, 91, 35, 0.35); transform: translateY(-1px); }
.asistent__chip:active { transform: scale(0.96); }

.asistent__form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 6px 6px 6px 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(38, 26, 18, 0.09), 0 6px 18px -10px rgba(38, 26, 18, 0.25);
  transition: box-shadow 0.3s var(--ease);
}
.asistent__form:focus-within {
  box-shadow: 0 0 0 1px rgba(154, 91, 35, 0.45), 0 0 0 4px rgba(154, 91, 35, 0.1), 0 6px 18px -10px rgba(38, 26, 18, 0.25);
}
.asistent__camp {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  font: 400 15px/1.3 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
}
.asistent__camp::placeholder { color: var(--ink-3); }
.asistent__trimite {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff;
  background: var(--grad-accent);
  border: none;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px -4px rgba(154, 91, 35, 0.6);
  cursor: pointer;
  transition: transform 0.35s var(--ease-arc);
}
.asistent__trimite:hover { transform: scale(1.06); }
.asistent__trimite:active { transform: scale(0.92); }

@media (max-width: 620px) {
  .asistent { right: 12px; bottom: 12px; }
  .asistent__lansator { width: 54px; padding: 0; justify-content: center; }
  .asistent__lansator-text { display: none; }
  .asistent.este-deschis .asistent__lansator { opacity: 0; pointer-events: none; }
  .asistent__panou {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(88dvh, 680px);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 24px 24px 0 0;
    transform: translateY(40px);
  }
  .asistent__camp { font-size: 16px; }
  /* pe telefon, pagina din spate se estompează: panoul devine o foaie, ca în aplicații */
  .asistent::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(30, 23, 19, 0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
  }
  .asistent.este-deschis::before { opacity: 1; pointer-events: auto; }
  /* invitația se așază lângă buton, pe același rând */
  .invitatie { bottom: 12px; right: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .asistent__lansator-ic svg, .asistent__lansator-ic::after { animation: none; }
}

/* ============================================================
   Cele două planuri
   Growth e cel recomandat: mai înalt, cu margine de aur și insignă.
   Pe calculator stă în dreapta; pe telefon, sub Start.
   ============================================================ */

.planuri {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}
.planuri .pret { max-width: none; margin: 0; }
.pret--start { order: 1; }
.pret--recomandat { order: 2; }

.pret--start { box-shadow: var(--lumina-sus), var(--umbra-2); }
.pret--start::before { background: linear-gradient(170deg, rgba(38, 26, 18, 0.12), rgba(38, 26, 18, 0.03) 45%, rgba(38, 26, 18, 0.08)); }

.pret--recomandat {
  padding-top: 56px;
  padding-bottom: 48px;
  background: linear-gradient(180deg, #fffaf3 0%, #fff 55%);
  box-shadow: var(--lumina-sus), var(--umbra-4), 0 0 110px -30px rgba(200, 137, 74, 0.7);
}
.pret--recomandat::before {
  padding: 2px;
  inset: -2px;
  background: linear-gradient(160deg, var(--aur-2), var(--aur) 35%, rgba(200, 137, 74, 0.25) 60%, var(--accent));
}

.pret__insigna {
  position: absolute;
  top: -15px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: var(--grad-accent);
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(154, 91, 35, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateX(-50%);
}
.pret__insigna::before { content: '★'; font-size: 12px; color: var(--aur-2); }

.pret--recomandat .pret__nume { color: var(--accent); }
.pret--recomandat .pret__suma {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
}

.pret__pentru {
  max-width: 34ch;
  margin: 0 auto 10px;
  font-size: 15px;
  color: var(--ink-2);
}
.pret--recomandat .pret__pentru { font-weight: 500; color: var(--ink); }

/* funcțiile pe care Start nu le are: tăiate discret, cu un ✕ în loc de bifă */
.pret__lista li.pret__lipsa { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(38, 26, 18, 0.2); }
.pret__lista li.pret__lipsa::before {
  content: '✕';
  top: 1px;
  left: 3px;
  width: auto;
  height: auto;
  font-size: 12px;
  color: var(--ink-3);
  border: 0;
  transform: none;
}
.pret__lista li:first-child { font-weight: inherit; color: var(--ink-2); }
.pret--recomandat .pret__lista li { color: var(--ink); }

@media (max-width: 860px) {
  .planuri { grid-template-columns: 1fr; max-width: 520px; gap: 40px; }
}
@media (max-width: 620px) {
  .pret--recomandat { padding-top: 48px; }
}

/* ============================================================
   Kitul de pornire
   O bandă lată sub planuri: se vede, dar nu concurează cu ele.
   ============================================================ */

.kit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  max-width: 980px;
  margin: 44px auto 0;
  padding: 32px 40px;
  background: var(--surface);
  border: 1px dashed rgba(154, 91, 35, 0.35);
  border-radius: var(--r-l);
  box-shadow: var(--lumina-sus), var(--umbra-1);
}

.kit__eticheta {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-slab);
  border-radius: 999px;
}
.kit__titlu {
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.kit__text p { max-width: 58ch; font-size: 15px; color: var(--ink-2); }
.kit__text p strong { color: var(--ink); font-weight: 600; }

.kit__lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kit__lista li {
  padding: 7px 13px;
  font-size: 13.5px;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(38, 26, 18, 0.06);
}

.kit__preturi {
  max-width: 270px;
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.kit__pret { display: flex; align-items: baseline; gap: 8px; }
.kit__plus { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.kit__plus strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.kit__exemplu { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.kit__suma {
  font-family: var(--font-display);
  font-size: 58px;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--ink) 30%, #6b4424);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kit__moneda { font-size: 17px; color: var(--ink-2); }
.kit__moneda span { display: block; font-size: 13px; color: var(--ink-3); white-space: nowrap; }

@media (max-width: 860px) {
  .kit { grid-template-columns: 1fr; max-width: 520px; gap: 20px; }
  .kit__preturi { max-width: none; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .kit { padding: 26px 22px; margin-top: 36px; }
}

/* ============================================================
   Mișcarea din secțiunea de preț
   Pornește abia când cartonașul apare pe ecran și se oprește
   pentru cine a cerut mai puțină mișcare din setările telefonului.
   ============================================================ */

@property --unghi {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* marginea de aur a planului Growth se rotește încet, ca o lumină care
   trece pe lângă el. Fără @property (Safari vechi) rămâne o margine fixă. */
.pret--recomandat { --unghi: 0deg; }
.pret--recomandat::before {
  background: conic-gradient(from var(--unghi),
    rgba(200, 137, 74, 0.35), var(--aur-2) 12%, var(--aur) 22%,
    rgba(200, 137, 74, 0.25) 40%, rgba(154, 91, 35, 0.6) 70%, rgba(200, 137, 74, 0.35));
}
.pret--recomandat.este-vizibil::before { animation: pret-roteste 7s linear infinite; }
@keyframes pret-roteste { to { --unghi: 360deg; } }

/* reflexia care trece peste insigna „Recomandat” */
.pret__insigna { overflow: hidden; }
.pret__insigna::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
}
.pret--recomandat.este-vizibil .pret__insigna::after { animation: pret-luceste 4.5s var(--ease) 1.2s infinite; }
@keyframes pret-luceste {
  0% { transform: translateX(-120%); }
  35%, 100% { transform: translateX(120%); }
}

/* prețul de 199 și cel al kitului: aurul curge încet prin cifre */
.pret--recomandat .pret__suma,
.kit__suma {
  background-size: 220% 100%;
}
.pret--recomandat .pret__suma {
  background-image: linear-gradient(100deg, #8a4f1c 0%, #c8894a 25%, #e7c197 40%, #c8894a 55%, #8a4f1c 80%, #9a5b23 100%);
}
.kit__suma {
  background-image: linear-gradient(100deg, var(--ink) 0%, #6b4424 30%, #c8894a 45%, #6b4424 60%, var(--ink) 100%);
}
.pret--recomandat.este-vizibil .pret__suma,
.kit.este-vizibil .kit__suma { animation: pret-curge 6s ease-in-out infinite; }
@keyframes pret-curge {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0 0; }
}

/* rândurile din planuri și bucățile kitului apar una după alta */
.planuri .pret__lista li,
.kit__lista li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.pret.este-vizibil .pret__lista li,
.kit.este-vizibil .kit__lista li { opacity: 1; transform: none; }
.pret.este-vizibil .pret__lista li:nth-child(1), .kit.este-vizibil .kit__lista li:nth-child(1) { transition-delay: 0.35s; }
.pret.este-vizibil .pret__lista li:nth-child(2), .kit.este-vizibil .kit__lista li:nth-child(2) { transition-delay: 0.45s; }
.pret.este-vizibil .pret__lista li:nth-child(3), .kit.este-vizibil .kit__lista li:nth-child(3) { transition-delay: 0.55s; }
.pret.este-vizibil .pret__lista li:nth-child(4) { transition-delay: 0.65s; }
.pret.este-vizibil .pret__lista li:nth-child(5) { transition-delay: 0.75s; }
.pret.este-vizibil .pret__lista li:nth-child(6) { transition-delay: 0.85s; }
.pret.este-vizibil .pret__lista li:nth-child(7) { transition-delay: 0.95s; }
.pret.este-vizibil .pret__lista li:nth-child(n+8) { transition-delay: 1.05s; }

/* Growth: „Tot ce e în Start, plus:” și cele două funcții în plus, mai mari */
.pret__titlu-lista {
  margin-top: 26px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.pret__lista--plus { gap: 16px; margin-top: 16px; }
.pret__lista--plus li { padding: 14px 16px 14px 44px; background: rgba(200, 137, 74, 0.07); border-radius: var(--r-s); box-shadow: inset 0 0 0 1px rgba(200, 137, 74, 0.16); }
.pret__lista--plus li::before { top: 19px; left: 19px; }
.pret__lista--plus li strong { display: block; font-weight: 600; color: var(--ink); }
.pret__lista--plus li span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.pret__lista--plus li:first-child { font-weight: inherit; }

/* kitul: marginea punctată prinde culoare, iar cartonașul se ridică la hover */
.kit.este-vizibil { transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 0.5s var(--ease-arc), box-shadow 0.5s var(--ease), border-color 0.5s; }
.kit.este-vizibil:hover {
  transform: translateY(-3px);
  border-color: rgba(154, 91, 35, 0.6);
  box-shadow: var(--lumina-sus), var(--umbra-3);
}
.kit__lista li { transition-property: opacity, transform, background-color; }
.kit.este-vizibil .kit__lista li:hover { background: #fff; transform: translateY(-2px); transition-delay: 0s; }

/* pe calculator, planurile se ridică puțin la hover; pe telefon nu, unde
   hover-ul ar rămâne „agățat” după atingere */
@media (hover: hover) {
  .planuri .pret.este-vizibil { transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 0.6s var(--ease-arc), box-shadow 0.6s var(--ease); }
  .planuri .pret.este-vizibil:hover { transform: translateY(-4px); }
}
@media (hover: none) {
  .kit.este-vizibil:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pret--recomandat.este-vizibil::before,
  .pret--recomandat.este-vizibil .pret__insigna::after,
  .pret--recomandat.este-vizibil .pret__suma,
  .kit.este-vizibil .kit__suma { animation: none; }
  .planuri .pret__lista li, .kit__lista li { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Compară planurile
   O fereastră peste pagină: pe calculator în mijloc, pe telefon
   urcă de jos, ca foile din aplicații.
   ============================================================ */

.compara-deschide { display: flex; justify-content: center; margin-top: 34px; }
.compara-deschide .btn { gap: 10px; }

html.compara-deschisa { overflow: hidden; }

.compara {
  width: min(860px, calc(100% - 32px));
  max-height: min(88dvh, 860px);
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: var(--r-l);
  box-shadow: var(--umbra-4);
  overflow: hidden;
}
.compara[open] { display: flex; flex-direction: column; animation: compara-intra 0.45s var(--ease); }
.compara::backdrop {
  background: rgba(30, 23, 19, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: compara-umbra 0.35s var(--ease);
}
@keyframes compara-intra { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes compara-umbra { from { opacity: 0; } }

.compara__cap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px 18px;
  border-bottom: 1px solid var(--line);
}
.compara__cap .eticheta { margin-bottom: 6px; }
.compara__titlu {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.compara__inchide {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ink-2);
  background: var(--bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.3s var(--ease-arc);
}
.compara__inchide:hover { background: var(--bg-2); transform: rotate(90deg); }

.compara__tabel {
  flex: 1;
  padding: 0 30px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.compara__antet,
.compara__rand {
  display: grid;
  grid-template-columns: 1fr 92px 92px;
  align-items: center;
  gap: 12px;
}

/* capul tabelului rămâne sus cât derulezi */
.compara__antet {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 16px 0 12px;
  background: linear-gradient(var(--surface) 80%, rgba(255, 255, 255, 0));
}
.compara__plan {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
}
.compara__plan span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.compara__plan--growth { color: var(--accent); }
.compara__plan--growth span { color: var(--accent); }

.compara__grup {
  margin: 14px 0 4px;
  padding: 8px 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.compara__grup--growth { color: var(--accent); }

.compara__rand { padding: 14px 0; border-top: 1px solid var(--line); }
.compara__functie strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.compara__functie span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.compara__functie em { font-style: normal; font-weight: 600; color: var(--ink-3); }

.compara__celula { display: grid; place-items: center; align-self: stretch; }
.compara__celula--growth { background: rgba(200, 137, 74, 0.07); border-radius: 10px; }
.compara__da,
.compara__nu {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
}
.compara__da { color: #fff; background: var(--grad-accent); box-shadow: 0 4px 10px -4px rgba(154, 91, 35, 0.6); }
.compara__nu { color: var(--ink-3); background: var(--bg); }

.compara__jos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 30px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.compara__jos p { font-size: 14px; color: var(--ink-2); }
.compara__jos strong { color: var(--ink); font-weight: 600; }
.compara__jos .btn { flex: none; }

@media (max-width: 620px) {
  .compara {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .compara[open] { animation: compara-urca 0.4s var(--ease); }
  @keyframes compara-urca { from { transform: translateY(100%); } }
  .compara__cap { padding: 20px 18px 14px; }
  .compara__tabel { padding: 0 16px 8px; }
  .compara__antet, .compara__rand { grid-template-columns: 1fr 50px 58px; gap: 8px; }
  .compara__plan { font-size: 11px; letter-spacing: 0.04em; }
  .compara__plan span { font-size: 11px; }
  .compara__functie strong { font-size: 14.5px; }
  .compara__functie span { font-size: 13px; }
  .compara__jos { flex-direction: column; align-items: stretch; padding: 14px 16px 16px; text-align: center; }
  .compara__jos p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .compara[open], .compara::backdrop { animation: none; }
}