/* Звук в залата – табела във фоайе: черна табела в рамка, големи номера на етажи вляво */
:root {
  --hlavni: #2c4696;
  --hlavni-tmava: #1c2c5f;
  --doplnkova: #c07259;
  --doplnkova-tmava: #9b4e37;
  --akcent: #c39b22;
  --akcent-svetly: #e6c55e;
  --pozadi: #f5f6fa;
  --plocha: #e2e7f3;
  --text: #1b1f2d;
  --tablo: #16181e;
  --ram: #3b3e48;
  --linka-svetla: rgba(255, 255, 255, .32);
  --linka-tmava: rgba(27, 31, 45, .28);
  --mono: "Rubik Mono One", "Rubik", Arial, sans-serif;
  --pismo: "Rubik", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--pozadi);
  color: var(--text);
  font-family: var(--pismo);
  font-size: 18px;
  line-height: 1.62;
  padding-bottom: 104px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--hlavni); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}
small { font-size: .9rem; }

.ramka { width: min(1160px, 100% - 48px); margin-inline: auto; }

h1, h2 { font-family: var(--mono); font-weight: 400; letter-spacing: 0; word-spacing: -0.3em; }
.dvoetochie, .zapetaya { margin-left: -0.35em; }
h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; margin: 0 0 22px; max-width: 26ch; }
h3, h4 { font-family: var(--pismo); }

/* ---------- фасада (горна лента) ---------- */
.fasada { background: var(--tablo); border-bottom: 1px solid var(--akcent); }
.fasada .ramka { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.ime {
  font-family: var(--mono);
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}

/* ---------- бутони ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--pismo);
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  background: var(--akcent);
  border: 1px solid var(--text);
  border-radius: 0;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--akcent-svetly); }
.vhod-btn { min-height: 54px; padding: 8px 22px; font-size: 18px; border-color: var(--akcent); }
.btn-glavno { min-height: 86px; min-width: 320px; padding: 14px 30px; font-size: 22px; line-height: 1.25; }

/* ---------- фоайе (hero) ---------- */
.foaie { padding: 44px 0 64px; border-bottom: 1px solid var(--linka-tmava); }
.foaie-glava { margin-bottom: 30px; }
.foaie h1 {
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.14;
  color: var(--hlavni-tmava);
  margin: 0 0 16px;
  max-width: 22ch;
}
.vodach { font-size: 20px; max-width: 62ch; margin: 0; }

.foaie-mreja { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 36px; align-items: start; }

.tablo-ram { background: var(--ram); padding: 14px; border: 1px solid var(--akcent); }
.tablo { background: var(--tablo); border: 1px solid var(--akcent); padding: 22px 26px 10px; color: #fff; }
.tablo-zaglavie { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: var(--akcent-svetly); }
.tablo-redove { list-style: none; margin: 0; padding: 0; }
.tablo-redove li { border-top: 1px solid var(--linka-svetla); }
.tablo-redove a {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  color: #fff;
  text-decoration: none;
}
.tablo-redove a:hover .red-text b { text-decoration: underline; text-underline-offset: 4px; }
.nomer { font-family: var(--mono); font-size: 46px; line-height: 1; color: #fff; text-align: center; border-right: 1px solid var(--linka-svetla); padding-right: 18px; }
.red-text { display: flex; flex-direction: column; }
.red-text b { font-weight: 500; font-size: 20px; line-height: 1.3; }
.red-text span { font-size: 17px; color: #fff; }

.gishe { border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); padding: 22px 0 18px; }
.gishe-ime { font-family: var(--mono); font-size: 17px; color: var(--hlavni-tmava); margin: 0 0 10px; }
.gishe p { margin: 0 0 18px; }
.gishe .btn-glavno { width: 100%; min-width: 0; }
.gishe-belejka { font-size: 16px; margin-top: 12px !important; }

/* ---------- етажи ---------- */
.etaj { padding: 76px 0; }
.etaj-plyten { background: var(--hlavni-tmava); color: #fff; }
.etaj-plyten a { color: #fff; }
.etaj-vazduh { background: var(--pozadi); }
.etaj-mreja { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; }
.etaj-nomer span {
  position: sticky;
  top: 24px;
  display: block;
  font-family: var(--mono);
  font-size: 128px;
  line-height: .9;
  color: var(--hlavni);
  border-bottom: 1px solid currentColor;
  padding-bottom: 14px;
}
.etaj-plyten .etaj-nomer span { color: #fff; }
.etaj-uvod { max-width: 68ch; margin: 0 0 34px; }

/* етаж 1 – зали */
.zala { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; border-top: 1px solid var(--linka-svetla); padding: 26px 0 8px; }
.zala-ime { margin: 4px 0 0; font-weight: 500; font-size: 17px; color: var(--akcent-svetly); }
.zala h3 { font-size: 22px; line-height: 1.35; font-weight: 500; margin: 0 0 10px; max-width: 46ch; }
.zala p { margin: 0 0 16px; max-width: 66ch; }

/* етаж 2 – обяснение */
.shema { max-width: 640px; margin: 0 auto 44px; }
.shema img { width: 100%; mix-blend-mode: multiply; filter: saturate(.8); border-top: 1px solid var(--linka-tmava); border-bottom: 1px solid var(--linka-tmava); padding: 16px 0; }
.shema figcaption { font-size: 16px; margin-top: 10px; }
.podzaglavie { font-size: 24px; font-weight: 500; margin: 0 0 14px; color: var(--hlavni-tmava); }
.prichini { margin-bottom: 40px; }
.prichina { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px; border-top: 1px solid var(--linka-tmava); padding: 22px 0; }
.prichina:last-child { border-bottom: 1px solid var(--linka-tmava); }
.prichina h4 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 500; }
.prichina p { margin: 0; }
.proiavi { margin: 0 0 14px; padding: 0; list-style: none; }
.proiavi li { border-top: 1px solid var(--linka-tmava); padding: 14px 0 14px 34px; position: relative; max-width: 72ch; }
.proiavi li::before { content: ""; position: absolute; left: 4px; top: 27px; width: 16px; height: 1px; background: var(--doplnkova-tmava); }
.zabelejka { font-size: 17px; max-width: 68ch; }

/* етаж 3 – числа */
.chisla { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 44px; align-items: start; }
.chisla-text p { margin: 0 0 24px; font-size: 19px; max-width: 54ch; }
.chisla-text small { display: block; margin-top: 6px; color: #fff; }

/* етаж 4 – въпроси */
.vaprosi details { border-top: 1px solid var(--linka-tmava); }
.vaprosi details:last-child { border-bottom: 1px solid var(--linka-tmava); }
.vaprosi summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 48px 18px 0;
  font-size: 19px;
  font-weight: 500;
  position: relative;
}
.vaprosi summary::-webkit-details-marker { display: none; }
.vaprosi summary::after { content: "+"; position: absolute; right: 8px; top: 12px; font-family: var(--mono); font-size: 24px; color: var(--hlavni); }
.vaprosi details[open] summary::after { content: "–"; }
.vaprosi details p { margin: 0 0 20px; max-width: 66ch; }

/* етаж 5 – бележки */
.belejki blockquote { margin: 0; border-top: 1px solid var(--linka-svetla); padding: 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: baseline; }
.belejki blockquote:last-child { border-bottom: 1px solid var(--linka-svetla); }
.belejki p { margin: 0; font-size: 23px; line-height: 1.4; }
.belejki cite { font-style: normal; font-size: 17px; color: var(--akcent-svetly); }

/* ---------- рецепция ---------- */
.recepcia { padding: 76px 0 90px; }
.recepcia-tablo {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 40px;
  background: var(--tablo);
  color: #fff;
  border: 1px solid var(--akcent);
  outline: 14px solid var(--ram);
  outline-offset: 0;
  padding: 44px 40px;
  margin: 14px;
}
.recepcia-tablo .etaj-nomer span { color: #fff; position: static; }
.recepcia-text h2 { color: #fff; }
.recepcia-text p { max-width: 62ch; margin: 0 0 26px; }
.recepcia-text .gishe-belejka { margin-top: 14px !important; }

/* ---------- цокъл ---------- */
.tsokal { background: var(--tablo); color: #fff; padding: 30px 0; font-size: 15px; }
.tsokal .ramka { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; justify-content: space-between; }
.tsokal p { margin: 0; }
.tsokal-ime { font-family: var(--mono); font-size: 14px; }
.tsokal-vrazki { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.tsokal a { color: #fff; }
.tsokal-avtor { flex-basis: 100%; font-size: 14px; }

/* ---------- подстраници ---------- */
.podstranica { min-height: 100vh; display: flex; flex-direction: column; }
.kabinet { flex: 1; padding: 56px 0 70px; }
.lista { max-width: 760px; margin-inline: auto; }
.lista h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.2; color: var(--hlavni-tmava); margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--linka-tmava); }
.lista h2 { font-family: var(--pismo); font-weight: 500; word-spacing: normal; font-size: 22px; margin: 30px 0 8px; max-width: none; }
.lista p { margin: 0 0 14px; }
.formular { display: grid; gap: 8px; margin-top: 26px; }
.formular label { font-weight: 500; margin-top: 10px; }
.formular input, .formular textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--text);
  border-radius: 0;
  background: #fff;
}
.formular-btn {
  margin-top: 18px;
  justify-self: start;
  min-height: 60px;
  padding: 10px 30px;
  font: 700 19px var(--pismo);
  color: #fff;
  background: var(--hlavni-tmava);
  border: 1px solid var(--hlavni-tmava);
  border-radius: 0;
  cursor: pointer;
}
.formular-btn:hover { background: var(--hlavni); }
#kontaktDakujeme { margin-top: 24px; padding: 20px 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); font-size: 19px; }

/* ---------- popup (engine) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 18, .84);
}
.modal-overlay.show { display: flex; }
.modal {
  position: relative;
  width: min(660px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--pozadi);
  border: 1px solid var(--akcent);
  outline: 12px solid var(--tablo);
  padding: 46px 44px 40px;
  text-align: center;
}
.modal .close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  font-size: 34px;
  line-height: 1;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  border-radius: 0;
  cursor: pointer;
}
.modal .badge {
  display: inline-block;
  background: var(--doplnkova-tmava);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.modal h3 { font-family: var(--mono); font-weight: 400; font-size: 44px; line-height: 1.15; color: var(--hlavni-tmava); margin: 0 0 10px; }
.modal > p { font-size: 22px; font-weight: 700; margin: 0 0 18px; }
.modal .offer { border-top: 1px solid var(--linka-tmava); border-bottom: 1px solid var(--linka-tmava); padding: 12px 0; margin-bottom: 24px; }
.modal .offer p { margin: 6px 0; font-size: 18px; }
.modal .btn { white-space: normal; text-wrap: balance; }
.btn-cta-xl { width: 100%; min-height: 86px; padding: 14px 24px; font-size: 22px; line-height: 1.25; }

/* ---------- долна лента (engine) ---------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 12px 20px;
  background: var(--tablo);
  color: #fff;
  border-top: 1px solid var(--akcent);
}
.sticky-cta > span { font-size: 18px; }
.sticky-cta .btn { flex: 0 0 auto; min-height: 64px; padding: 8px 26px; font-size: 19px; border-color: var(--akcent); }

/* ---------- таблет и мобилен ---------- */
@media (max-width: 980px) {
  .foaie-mreja { grid-template-columns: 1fr; }
  .gishe { order: -1; }
  .etaj-mreja, .recepcia-tablo { grid-template-columns: 1fr; gap: 18px; }
  .etaj-nomer span { position: static; font-size: 80px; display: inline-block; padding-right: 30px; }
  .chisla { grid-template-columns: 1fr; }
  .chisla .grafika { max-width: 440px; width: 100%; }
}

@media (max-width: 640px) {
  body { font-size: 17.5px; padding-bottom: 152px; }
  .ramka { width: calc(100% - 32px); }
  .fasada .ramka { min-height: 68px; }
  .ime { font-size: 15px; }
  .vhod-btn { min-height: 50px; padding: 6px 14px; font-size: 18px; }
  .foaie { padding: 28px 0 44px; }
  .foaie h1 { font-size: 27px; }
  .vodach { font-size: 18px; }
  .btn-glavno { min-width: 0; width: 100%; font-size: 21px; }
  .tablo-ram { padding: 8px; }
  .tablo { padding: 16px 14px 6px; }
  .tablo-redove a { grid-template-columns: 52px 1fr; gap: 12px; }
  .nomer { font-size: 30px; padding-right: 10px; }
  .red-text b { font-size: 18px; }
  .etaj { padding: 52px 0; }
  .etaj-nomer span { font-size: 64px; }
  h2 { font-size: 22px; }
  .zala { grid-template-columns: 1fr; gap: 4px; }
  .zala h3 { font-size: 20px; }
  .prichina { grid-template-columns: 1fr; gap: 8px; }
  .belejki blockquote { grid-template-columns: 1fr; gap: 8px; }
  .belejki p { font-size: 20px; }
  .recepcia { padding: 52px 0 64px; }
  .recepcia-tablo { padding: 28px 18px; outline-width: 8px; margin: 8px; }
  .modal { padding: 54px 18px 26px; outline-width: 6px; }
  .modal h3 { font-size: 23px; white-space: nowrap; }
  .modal > p { font-size: 19px; }
  .btn-cta-xl { font-size: 19px; }
  .sticky-cta { flex-direction: column; gap: 8px; padding: 10px 14px; text-align: center; }
  .sticky-cta > span { font-size: 16px; }
  .sticky-cta .btn { width: 100%; min-height: 60px; font-size: 18px; }
}

@media (max-width: 640px) {
  .vhod-btn { white-space: nowrap; }
  .gishe { display: flex; flex-direction: column; padding-top: 16px; }
  .gishe-ime { display: none; }
  .gishe .btn-glavno { order: -1; }
  .gishe p { margin-bottom: 0; margin-top: 14px; }
}