/* ============================================================
   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; }
  .marca__text-2 { display: none; }
}

@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; }
}