/* Лек дъх – манифест за наднорменото тегло
   Токени: бордо #962c46, тъмно бордо #5f1c2c, листо #59c072, мента #22c39b,
   пудра #faf5f6, розова плоскост #f3e2e7, мастило #2d1b1f.
   Шрифтове: Old Standard TT (заглавия, гигантски цифри), PT Sans (текст). */

:root {
  --bordo: #962c46;
  --bordo-tamno: #5f1c2c;
  --listo: #59c072;
  --menta: #22c39b;
  --pudra: #faf5f6;
  --ploskost: #f3e2e7;
  --mastilo: #2d1b1f;
  --serif: "Old Standard TT", Georgia, serif;
  --sans: "PT Sans", "Trebuchet MS", sans-serif;
  --r-golyam: 28px;
  --r-sreden: 18px;
  --shirina: 1180px;
  --kraj: max(1.25rem, calc((100vw - var(--shirina)) / 2));
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pudra);
  color: var(--mastilo);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  padding-bottom: 96px;
  font-variant-numeric: lining-nums;
}

img { max-width: 100%; height: auto; display: block; }

small { font-size: .9rem; }

a { color: var(--bordo-tamno); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); }
h4 { font-size: 1.35rem; }

p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; }

/* ---------- копчета ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 999px;
  background: var(--menta);
  color: var(--mastilo);
  font-family: var(--sans);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: 0 14px 28px -14px rgba(45, 27, 31, .55);
  transition: background-color .2s, transform .2s;
}
.btn:hover { background: #1db08b; transform: translateY(-1px); }

.kopche-glava { min-height: 52px; padding: .6rem 1.6rem; font-size: 1.125rem; }
.kopche-glavno { min-height: 86px; min-width: 330px; padding: 1rem 2.8rem; font-size: 1.45rem; }
.kopche-oferta { min-height: 86px; padding: 1rem 2.8rem; font-size: 1.45rem; }

/* ---------- първи екран: плътен бордо пас ---------- */
.plamak {
  background: var(--bordo);
  color: var(--pudra);
  padding: 0 var(--kraj) 190px;
  border-radius: 0 0 var(--r-golyam) var(--r-golyam);
}

.glava {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
}

.marka {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.85rem;
  color: var(--pudra);
  text-decoration: none;
}

.vik { padding: 2.2rem 0 0; }

.vik h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.04;
  margin: 0 0 1.6rem;
  font-weight: 400;
}
.vik h1, .vik .red { text-wrap: wrap; }
.vik .red { display: block; }
@media (min-width: 981px) {
  .vik h1 { font-size: clamp(2.4rem, 4.9vw, 4.15rem); }
  .vik .red { white-space: nowrap; }
}
.vik .red-2 { padding-left: 9%; }
.vik .red-3 { padding-left: 18%; font-style: italic; }

.vik-tekst {
  max-width: 62ch;
  margin-left: 18%;
  font-size: 1.2rem;
  color: #fbeef1;
}
.vik .kopche-glavno { margin-left: 18%; }

/* ---------- една голяма снимка в средата ---------- */
.golyama-snimka {
  max-width: 1040px;
  margin: -150px auto 0;
  padding: 0 1.25rem;
}
.golyama-snimka img {
  width: 100%;
  border-radius: var(--r-golyam);
  box-shadow: 0 40px 70px -40px rgba(95, 28, 44, .6);
  object-fit: cover;
  object-position: 50% 45%;
}
.golyama-snimka figcaption {
  text-align: center;
  font-size: 1rem;
  color: #5c3f46;
  margin-top: .8rem;
}

/* ---------- тези ---------- */
.teze { padding: 5.5rem 0 3rem; }

.teze-uvod {
  padding: 0 var(--kraj);
  max-width: calc(var(--shirina) + 2 * var(--kraj));
  margin-bottom: 2.5rem;
}
.teze-uvod p { font-size: 1.2rem; max-width: 72ch; }

.teze-red { list-style: none; margin: 0; padding: 0; }

.teza {
  display: grid;
  grid-template-columns: minmax(170px, 260px) 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 3rem var(--kraj);
}

.teza-cifra {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(8rem, 17vw, 15rem);
  line-height: .8;
  color: var(--bordo);
  text-align: right;
  font-variant-numeric: lining-nums;
}

.teza-tyalo { max-width: 46rem; }
.teza-tyalo h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.teza-tyalo p { font-size: 1.2rem; margin: 0; }
.teza-tyalo small { display: block; margin-top: .5rem; color: #6b4a52; }

.teza-pas {
  background: var(--bordo);
  color: var(--pudra);
  margin: 0 12px;
  border-radius: var(--r-golyam);
  padding-left: calc(var(--kraj) - 12px);
  padding-right: calc(var(--kraj) - 12px);
}
.teza-pas .teza-cifra { color: var(--ploskost); }
.teza-pas small { color: #f3dbe1; }

.teza-graf { grid-template-columns: minmax(170px, 260px) 1fr minmax(380px, 500px); }
.teza-graf .graf { width: 100%; }

/* ---------- обяснение ---------- */
.vyklad {
  background: var(--ploskost);
  border-radius: var(--r-golyam);
  margin: 2rem 12px;
  padding: 5rem calc(var(--kraj) - 12px);
}

.vyklad-glava { max-width: 50rem; margin: 0 auto 2.5rem; text-align: center; }
.vyklad-glava p { font-size: 1.2rem; }

.ilustracia { max-width: 720px; margin: 0 auto 4rem; }
.ilustracia img { width: 100%; background: var(--ploskost); border-radius: var(--r-sreden); }
.ilustracia figcaption { font-size: 1rem; color: #5c3f46; margin-top: .6rem; text-align: center; }

.vyklad-podzaglavie { text-align: center; margin-bottom: 2rem; }

.prichini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 4rem;
}
.prichina h4 { font-style: italic; color: var(--bordo-tamno); }
.prichina p { font-size: 1.1rem; margin: 0; }

.proyavi {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 1rem 3rem;
  background: var(--pudra);
  border-radius: var(--r-golyam);
  padding: 2.5rem 3rem;
}
.proyavi h3 { grid-row: span 2; }
.proyavi ul { margin: 0; padding-left: 1.2rem; font-size: 1.15rem; }
.proyavi li { margin-bottom: .4rem; }
.proyavi p { margin: 0; font-style: italic; }

/* ---------- моменти ---------- */
.momenti { padding: 5rem var(--kraj); }
.momenti h2 { max-width: 32ch; }

.momenti-mreja {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 3rem;
  align-items: start;
}
.momenti-snimka { margin: 0; }
.momenti-snimka img { width: 100%; border-radius: var(--r-golyam); object-fit: cover; object-position: 45% 30%; }
.momenti-snimka figcaption { font-size: 1rem; color: #5c3f46; margin-top: .6rem; }

.moment { padding: 1.4rem 0; }
.moment + .moment { border-top: 1px solid rgba(150, 44, 70, .25); }
.moment h3 { font-size: 1.5rem; color: var(--bordo-tamno); }
.moment p { margin: 0; }

/* ---------- оферта: тъмен пас ---------- */
.oferta {
  background: var(--bordo-tamno);
  color: var(--pudra);
  border-radius: var(--r-golyam);
  margin: 0 12px;
  padding: 5rem calc(var(--kraj) - 12px);
}
.oferta-vatre {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3rem;
  align-items: start;
}
.oferta h2 { margin: 0; }
.oferta-tekst p { font-size: 1.2rem; }
.oferta-tekst .btn { margin-top: .6rem; border: 2px solid var(--pudra); }

/* ---------- мнения ---------- */
.mnenia { padding: 5.5rem var(--kraj) 4rem; }
.mnenia-red {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-top: 2.5rem;
}
.mnenie { margin: 0; }
.mnenie blockquote {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.3;
}
.mnenie cite { font-style: normal; font-weight: 700; color: var(--bordo-tamno); font-size: 1.05rem; }

/* ---------- въпроси ---------- */
.vaprosi {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3rem;
  padding: 4rem var(--kraj) 5rem;
}
.vaprosi details { border-bottom: 1px solid rgba(150, 44, 70, .25); padding: 1.1rem 0; }
.vaprosi summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.2rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.vaprosi summary::-webkit-details-marker { display: none; }
.vaprosi summary::after { content: "+"; font-family: var(--serif); font-size: 1.8rem; line-height: 1; color: var(--bordo); }
.vaprosi details[open] summary::after { content: "–"; }
.vaprosi details p { margin: .8rem 0 0; }

/* ---------- край ---------- */
.krai {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 3rem;
  align-items: center;
  background: var(--bordo);
  color: var(--pudra);
  border-radius: var(--r-golyam);
  margin: 0 12px 2rem;
  padding: 4rem calc(var(--kraj) - 12px);
}
.krai-snimka { margin: 0; }
.krai-snimka img { width: 100%; border-radius: var(--r-sreden); object-fit: cover; }
.krai-snimka figcaption { font-size: 1rem; color: #f3dbe1; margin-top: .6rem; }
.krai-tekst p { font-size: 1.2rem; }
.krai-tekst .btn { border: 2px solid var(--pudra); }

/* ---------- подножие ---------- */
.podnozhie {
  padding: 2rem var(--kraj) 2.5rem;
  font-size: .95rem;
  color: #5c3f46;
}
.podnozhie p { margin: 0 0 .5rem; }
.vrazki a { margin-right: 1.2rem; }

/* ---------- подстраници ---------- */
body.podstranica {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.podstranica .plamak-maluk {
  background: var(--bordo);
  padding: 0 var(--kraj);
  border-radius: 0 0 var(--r-golyam) var(--r-golyam);
}
.karta {
  flex: 1;
  width: 100%;
  max-width: 800px;
  margin: 3rem auto;
  padding: 0 1.25rem;
}
.karta h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.karta h2 { font-size: 1.6rem; margin-top: 1.8rem; }
.karta ul { padding-left: 1.2rem; }

.formular { display: grid; gap: 1rem; background: var(--ploskost); border-radius: var(--r-golyam); padding: 2rem; }
.formular label { font-weight: 700; display: grid; gap: .35rem; }
.formular input, .formular textarea {
  font: inherit;
  font-weight: 400;
  border: 1px solid rgba(95, 28, 44, .35);
  border-radius: 14px;
  padding: .8rem 1rem;
  background: #fff;
  color: var(--mastilo);
}
.formular button {
  justify-self: start;
  min-height: 60px;
  padding: .8rem 2.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--bordo);
  color: var(--pudra);
  font: 700 1.15rem var(--sans);
  cursor: pointer;
}
#kontaktDakujeme { background: var(--ploskost); border-radius: var(--r-golyam); padding: 2rem; font-size: 1.2rem; }

/* ---------- popup и лента (engine) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(45, 27, 31, .82);
}
.modal-overlay.show { display: flex; }
.modal {
  position: relative;
  width: min(640px, 100%);
  max-height: 94vh;
  overflow: auto;
  background: var(--pudra);
  color: var(--mastilo);
  border-radius: var(--r-golyam);
  padding: 2.6rem 2.4rem 2.2rem;
  text-align: center;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.modal .close {
  position: absolute;
  top: .8rem;
  right: .9rem;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--ploskost);
  color: var(--bordo-tamno);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.modal .badge {
  display: inline-block;
  background: var(--bordo);
  color: var(--pudra);
  border-radius: 999px;
  padding: .35rem 1.1rem;
  font-weight: 700;
  font-size: 1rem;
}
.modal h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.9rem;
  color: var(--bordo);
  margin: 1rem 0 .4rem;
  white-space: nowrap;
}
.modal > p { font-size: 1.3rem; font-weight: 700; }
.modal .offer {
  background: var(--ploskost);
  border-radius: var(--r-sreden);
  padding: 1rem 1.2rem;
  margin: 1rem 0 1.4rem;
}
.modal .offer p { margin: .3rem 0; }
.modal .btn { white-space: normal; text-wrap: balance; }
.btn-cta-xl { min-height: 86px; width: 100%; padding: 1rem 1.6rem; font-size: 1.375rem; }

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: .8rem 1rem;
  background: var(--bordo-tamno);
  color: var(--pudra);
  font-weight: 700;
}
.sticky-cta > span { font-size: 1.05rem; }
.sticky-cta .btn { flex: 0 0 auto; min-height: 60px; padding: .6rem 1.8rem; font-size: 1.15rem; border: 2px solid var(--pudra); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---------- таблет ---------- */
@media (max-width: 980px) {
  .teza-graf { grid-template-columns: minmax(140px, 200px) 1fr; }
  .teza-graf .graf { grid-column: 1 / -1; max-width: 560px; justify-self: center; }
  .prichini { grid-template-columns: 1fr; gap: 1.6rem; }
  .momenti-mreja, .oferta-vatre, .vaprosi, .krai, .proyavi { grid-template-columns: 1fr; }
  .proyavi h3 { grid-row: auto; }
  .mnenia-red { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- мобилен ---------- */
@media (max-width: 640px) {
  body { padding-bottom: 122px; font-size: 1.08rem; }
  .marka { font-size: 1.5rem; }
  .kopche-glava { font-size: 1.125rem; min-height: 50px; padding: .5rem 1.1rem; }
  .plamak { padding-bottom: 90px; }
  .vik { padding-top: 1rem; }
  .vik h1 { font-size: 2.2rem; }
  .vik .red-2 { padding-left: 6%; }
  .vik .red-3 { padding-left: 12%; }
  .vik-tekst, .vik .kopche-glavno { margin-left: 0; }
  .vik-tekst { font-size: 1.08rem; }
  .kopche-glavno, .kopche-oferta { min-width: 0; width: 100%; min-height: 76px; font-size: 1.3rem; padding: .9rem 1.2rem; }
  .golyama-snimka { margin-top: -60px; padding: 0 .75rem; }
  .golyama-snimka img { aspect-ratio: 4 / 3.4; }
  .teze { padding-top: 3.5rem; }
  .teza { grid-template-columns: 1fr; gap: .6rem; padding-top: 2.2rem; padding-bottom: 2.2rem; }
  .teza-pas { margin: 0 8px; padding-left: 1.2rem; padding-right: 1.2rem; }
  .teza-cifra { text-align: left; font-size: 7.5rem; }
  .teza-graf { grid-template-columns: 1fr; }
  .teza-graf .graf { max-width: 100%; }
  .vyklad, .oferta, .krai { margin-left: 8px; margin-right: 8px; padding: 3rem 1.2rem; }
  .vyklad-glava { text-align: left; }
  .ilustracia { margin-bottom: 2.5rem; }
  .vyklad-podzaglavie { text-align: left; }
  .proyavi { padding: 1.6rem 1.2rem; }
  .momenti, .mnenia, .vaprosi { padding-top: 3.5rem; padding-bottom: 3rem; }
  .mnenie blockquote { font-size: 1.4rem; }
  .modal { padding: 2.4rem 1.2rem 1.4rem; }
  .modal h3 { font-size: 1.95rem; }
  .btn-cta-xl { font-size: 1.2rem; min-height: 72px; }
  .sticky-cta { flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; text-align: center; }
  .sticky-cta > span { flex: 1 1 100%; font-size: 1rem; }
  .sticky-cta .btn { width: 100%; min-height: 60px; }
}