/* ============================================================
   BDS — Restaurant advertising funnel (/restaurants)
   ------------------------------------------------------------
   Само секциите, които съществуват единствено на рекламната
   landing страница. Всичко останало — бутони, badge, section,
   container, reveal — идва от style.css и tokens.css.
   Тук няма право да влиза суров hex, радиус или сянка: платеният
   трафик трябва да вижда СЪЩИЯ BDS, не втори дизайн.
   ============================================================ */

/* ---------- Landing header / footer ---------- */
/* Пълното меню изкарва посетителя от funnel-а, затова остават
   само логото, изход към основния сайт и една цел. */
.header--landing .nav { justify-content: space-between; }
.header--landing .nav__right { display: flex; align-items: center; gap: var(--space-4); }
.nav__exit {
  font-size: var(--fs-small);
  color: var(--text-3);
  transition: color var(--duration-normal) var(--ease-premium);
}
.nav__exit:hover { color: var(--brand-2); }
.nav__exit:focus-visible { color: var(--brand-2); }

.footer--landing { padding-top: var(--space-12); }
.footer--landing .footer__bottom { border-top: 0; }

@media (max-width: 560px) {
  /* На тесен екран изходът отстъпва пред CTA-то — то е целта. */
  .nav__exit { display: none; }
  .header--landing .nav__cta { font-size: var(--fs-small); padding: 10px 16px; }
}

@media (max-width: 380px) {
  /* При 320px логото и „Заяви безплатна консултация“ не се побират на
     един ред. `.btn` е с `white-space: nowrap`, затова nav-ът ставаше
     342px широк, layout viewport-ът се разтягаше до 370px и целият
     сайт тръгваше настрани. Пускаме бутона да се пренася и свиваме
     логото — вместо да режем текста. */
  .header--landing .nav__cta {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding: 8px 12px;
  }
  .header--landing .brand__logo { height: 34px; }
}

/* ---------- 1. Hero ---------- */
.rest-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + var(--space-12)) 0 var(--space-16);
  text-align: center;
}
.rest-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Градиенти, не filter: blur() — това е първият екран на платен трафик. */
.rest-hero__glow { position: absolute; border-radius: 50%; }
.rest-hero__glow--1 {
  width: 760px; height: 760px; top: -300px; left: -160px;
  background: radial-gradient(circle closest-side,
    rgba(0, 89, 255, 0.16) 0%, rgba(0, 89, 255, 0.11) 34%,
    rgba(0, 89, 255, 0.04) 62%, rgba(0, 89, 255, 0) 84%);
}
.rest-hero__glow--2 {
  width: 620px; height: 620px; bottom: -280px; right: -140px;
  background: radial-gradient(circle closest-side,
    rgba(164, 192, 235, 0.07) 0%, rgba(164, 192, 235, 0.03) 40%,
    rgba(164, 192, 235, 0) 80%);
}

/* 1080px кара двете изречения да легнат на два реда вместо на три. */
.rest-hero__inner { position: relative; z-index: 1; max-width: 1080px; }
.rest-hero__inner .badge { margin-inline: auto; }

.rest-hero__title {
  font-family: var(--font-head);
  /* Едно стъпало под --fs-hero: „Системата управлява ресторанта.“ е
     по-дълго от заглавието на началната страница и при 4.6rem увисва
     на трети ред само с една дума. */
  font-size: clamp(1.85rem, 5vw, 3.9rem);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.rest-hero__lead {
  margin: var(--space-6) auto var(--space-8);
  max-width: 680px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
.rest-hero__actions {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
}

@media (max-width: 720px) {
  .rest-hero { padding: calc(var(--nav-h) + var(--space-16)) 0 var(--space-16); }
}

@media (max-width: 460px) {
  /* Един палец, една цел — бутоните заемат цялата ширина. */
  .rest-hero__actions .btn { width: 100%; }
}

@media (max-width: 360px) {
  /* 320×568 е най-тесният екран, който тестваме. Там clamp()-ът опира
     в долната си граница (1.85rem), заглавието пада на 4 реда и
     „Получи оферта“ излизаше под линията на първия екран — платеният
     клик виждаше заглавие без бутон. Смъкваме една стъпка от типографията
     и от горния въздух, вместо да пипаме текста. */
  .rest-hero__title { font-size: 1.6rem; }
  .rest-hero__lead { margin: var(--space-4) auto var(--space-6); font-size: var(--fs-body); }
  .rest-hero { padding: calc(var(--nav-h) + var(--space-8)) 0 var(--space-12); }
}

/* ============================================================
   PHASE 2 — оферта, пакети, система, поддръжка
   Всичко стъпва на токените. Нула сурови стойности.
   ============================================================ */

/* Обща бележка под секция — условия, не дисклеймър за цената */
.rest-note {
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-3);
  text-align: center;
}

/* ---------- Сайт срещу система ---------- */
.rest-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.rest-compare__col {
  padding: var(--space-8);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.rest-compare__col--system {
  border-color: var(--brand-border);
  background: linear-gradient(160deg, var(--brand-soft), var(--card) 62%);
}
.rest-compare__title {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.rest-compare__lead {
  margin: var(--space-3) 0 var(--space-6);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
.rest-compare__list { list-style: none; display: grid; gap: var(--space-3); }
.rest-compare__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-body);
  color: var(--text);
}
.rest-compare__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px; border-radius: 2px;
  background: var(--gray-300);
}
.rest-compare__list--plus li::before {
  content: "+";
  top: 0; width: auto; height: auto; background: none;
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  color: var(--brand-2);
}
.rest-compare__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-3);
}

/* ---------- Пакетни карти ---------- */
.rpkg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.rpkg {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.rpkg__name {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}
.rpkg__price {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight);
  color: var(--brand-2);
}
.rpkg__for {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.rpkg__list { list-style: none; display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.rpkg__list li {
  position: relative; padding-left: var(--space-6);
  font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text-2);
}
.rpkg__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
}
.rpkg__limits { list-style: none; display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.rpkg__limits li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--fs-small);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.rpkg__limits span { color: var(--text-3); }
.rpkg__limits b { font-family: var(--font-head); font-weight: var(--fw-semibold); color: var(--white); text-align: right; }

/* Пълният списък е скрит по подразбиране — картата остава за сканиране */
.rpkg__more { margin-bottom: var(--space-4); }
.rpkg__more summary {
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--brand-2);
  padding: var(--space-2) 0;
}
.rpkg__more summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.rpkg__more ul { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.rpkg__more li {
  position: relative; padding-left: var(--space-4);
  font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text-2);
}
.rpkg__more li::before { content: "·"; position: absolute; left: 0; color: var(--brand-2); }
.rpkg__cta { margin-top: auto; width: 100%; }

/* ---------- Индивидуална система ---------- */
.rsys {
  padding: var(--space-8);
  background: var(--card);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-card);
}
.rsys__rule {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--text);
  margin-bottom: var(--space-8);
}
.rsys__scale h4,
.rsys__group h4 {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: var(--space-3);
}
.rsys__scale ul,
.rsys__group ul { list-style: none; display: grid; gap: var(--space-2); }
.rsys__scale li,
.rsys__group li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-size: var(--fs-small);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.rsys__scale span,
.rsys__group span { color: var(--text-2); }
.rsys__scale b,
.rsys__group b {
  font-family: var(--font-head);
  font-weight: var(--fw-semibold);
  color: var(--white);
  white-space: nowrap;
}
.rsys__modules { margin-top: var(--space-8); }
.rsys__modules summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--brand-2);
  padding: var(--space-3) 0;
}
.rsys__modules summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.rsys__groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: var(--space-4);
}
.rsys .btn { margin-top: var(--space-8); }

/* ---------- Поддръжка ---------- */
.rmaint-block { margin-bottom: var(--space-12); }
.rmaint-block:last-of-type { margin-bottom: 0; }
.rmaint__title {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.rmaint__intro {
  margin: var(--space-2) 0 var(--space-6);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
  max-width: 60ch;
}
.rmaint-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.rmaint {
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.rmaint--featured { border-color: var(--brand-border); }
.rmaint__name {
  font-family: var(--font-head);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}
.rmaint__price {
  margin: var(--space-2) 0 var(--space-1);
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: var(--fw-extra);
  color: var(--brand-2);
}
.rmaint__price small {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-3);
}
.rmaint__for { font-size: var(--fs-small); color: var(--text-3); margin-bottom: var(--space-4); }
.rmaint__list { list-style: none; display: grid; gap: var(--space-2); }
.rmaint__list li {
  position: relative; padding-left: var(--space-6);
  font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text-2);
}
.rmaint__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
}
.rmaint__free {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--text-3);
}
.rmaint__free b { color: var(--brand-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .rpkg-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .rmaint-grid { grid-template-columns: 1fr; }
  .rsys__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .rest-compare { grid-template-columns: 1fr; }
  .rest-compare__col { padding: var(--space-6); }
  .rsys { padding: var(--space-6); }
  .rsys__groups { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  /* Дългите български редове не бива да разпъват картата. */
  .rpkg__limits li,
  .rsys__scale li,
  .rsys__group li { flex-direction: column; gap: var(--space-1); }
  .rpkg__limits b,
  .rsys__scale b,
  .rsys__group b { text-align: left; white-space: normal; }
  .rsys .btn,
  .rpkg__cta { width: 100%; }
}

/* ============================================================
   PHASE 3 — hero визуализация
   Реален екран от системата на Pizza Pazzo, поставен СЛЕД CTA-то
   в DOM реда: на телефон бутонът се вижда преди снимката.
   ============================================================ */

.rest-hero__visual {
  position: relative;
  margin: var(--space-12) auto 0;
  max-width: 940px;
  /* Долният ръб е отрязан нарочно — над сгъвката трябва да се вижда
     началото на екрана, не целият. */
  max-height: 46vh;
  overflow: hidden;
}

.rest-hero__frame {
  position: relative;
  border: 1px solid var(--border-strong);
  border-top: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--shadow-lg), var(--glow-premium);
}
/* Лента като на браузър — прави ясно, че това е екран от продукт. */
.rest-hero__frame::before {
  content: "";
  display: block;
  height: 30px;
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}
.rest-hero__dots {
  position: absolute; top: 11px; left: 14px;
  display: flex; gap: 6px;
}
.rest-hero__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mock-dot);
}
.rest-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Меко избледняване към фона, за да не реже рязко на сгъвката. */
.rest-hero__visual::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.rest-hero__caption {
  position: absolute; left: 0; right: 0; bottom: var(--space-3);
  z-index: 1;
  text-align: center;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  color: var(--text-3);
}

@media (max-width: 900px) {
  .rest-hero__visual { margin-top: var(--space-8); max-height: 38vh; }
}

@media (max-width: 460px) {
  /* На телефон визуалът е само загатване — CTA-то е важното. */
  .rest-hero__visual { max-height: 30vh; }
  .rest-hero__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rest-hero__frame { box-shadow: var(--shadow-lg); }
}

/* ============================================================
   PHASE 4 — Проблем → Решение
   Всяка карта е един ход: какво се чупи, стрелка надолу, какво
   се променя. Решението има собствен фон и акцент, за да се
   различава от проблема при бърз поглед.
   ============================================================ */

.pcards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-premium);
}
.pcard:hover { border-color: var(--brand-border); box-shadow: var(--glow-premium); }

.pcard__problem { padding: var(--space-6) var(--space-6) var(--space-4); }
.pcard__title {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
}
.pcard__problem p {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

/* Преходът между двете половини — не е декорация, а посока на четене. */
.pcard__arrow {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin: 0 var(--space-6);
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: var(--brand-soft);
  color: var(--brand-2);
  flex: none;
}

.pcard__solution {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--brand-soft), transparent 78%);
  flex: 1;
}
.pcard__label {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
}
.pcard__solution p {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text);
}

@media (max-width: 900px) {
  .pcards { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .pcard__problem { padding: var(--space-4) var(--space-4) var(--space-3); }
  .pcard__arrow { margin: 0 var(--space-4); }
  .pcard__solution { padding: var(--space-4); }
  .pcard__title { font-size: var(--fs-body-lg); }
}

/* ============================================================
   PHASE 5 — Какво получава ресторантът
   Осем основни карти отпред, останалото — компактен списък.
   Иконите са inline SVG: без библиотека, без emoji.
   ============================================================ */

.fcards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.fcard {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--duration-normal) var(--ease-premium),
              border-color var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-premium);
}
.fcard:hover {
  transform: translateY(-4px);
  border-color: var(--brand-border);
  box-shadow: var(--glow-premium);
}

/* Двете ключови функции носят лек акцент — те са разликата спрямо
   обикновен сайт. Разликата е сдържана, картите остават еднородни. */
.fcard--accent {
  border-color: var(--brand-border);
  background: linear-gradient(165deg, var(--brand-soft), var(--card) 58%);
}

.fcard__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--r-icon);
  background: var(--brand-soft-2);
  border: 1px solid var(--brand-border);
  color: var(--brand-2);
  flex: none;
}

.fcard__title {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}
.fcard__benefit {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text);
}
.fcard__detail {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--text-3);
}

/* ---------- Второстепенните функции ---------- */
.fmore {
  margin-top: var(--space-12);
  padding: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.fmore__title {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: var(--space-4);
}
.fmore__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}
.fmore__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-2);
}
.fmore__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
}
.fmore__note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--text-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .fcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fmore__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .fcards { grid-template-columns: 1fr; }
  .fmore { padding: var(--space-6); }
  .fmore__list { grid-template-columns: 1fr; }
}

/* ============================================================
   PHASE 6 — Case study: Pizza Pazzo
   Числа → модули → път на поръчката с екрани → галерия.
   Екраните са реални, затова им се дава истинска визуална тежест.
   ============================================================ */

/* ---------- Числа и модули ---------- */
.cs-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  padding: var(--space-8);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-content: start;
}
.cs-metric {
  padding: var(--space-4);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-md);
  background: var(--brand-soft);
}
.cs-metric b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight);
  color: var(--brand-2);
  line-height: var(--lh-tight);
}
.cs-metric span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--text-3);
}

.cs-modules__title,
.cs-flow__title,
.cs-gallery__title {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: var(--space-4);
}
.cs-modules__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cs-modules__list li {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  color: var(--text-2);
}

/* Честният статус на проекта — не се крие под екраните. */
.cs-status {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--brand-border);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-3);
}

/* ---------- Пътят на поръчката ---------- */
.cs-flow { margin-top: var(--space-12); }
.cs-flow__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  counter-reset: none;
}
.cs-step {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.cs-step__n {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--brand-grad);
  color: var(--brand-ink);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  flex: none;
}
.cs-step h4 {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-2);
}
.cs-step p {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
/* Липсващият екран се обявява, вместо да се замества с измислен. */
.cs-step__missing {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--fs-caption) !important;
  color: var(--text-3) !important;
  font-style: italic;
}

.cs-step__shot {
  margin-top: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-3);
}
/* Връзката е блок, за да не остави подчертаване или празнина. */
.cs-step__shot a,
.cs-gallery figure a { display: block; }
.cs-step__shot a:focus-visible,
.cs-gallery figure a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.cs-step__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: top center;
}
.cs-step__shot figcaption,
.cs-gallery figcaption {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--text-3);
}

/* ---------- Останалите екрани ---------- */
.cs-gallery { margin-top: var(--space-12); }
.cs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.cs-gallery figure {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  transition: border-color var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-premium);
}
.cs-gallery figure:hover { border-color: var(--brand-border); box-shadow: var(--glow-premium); }
.cs-gallery img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
}

.cs-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .cs-summary { grid-template-columns: 1fr; gap: var(--space-6); }
  .cs-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cs-flow__steps { grid-template-columns: 1fr; }
  .cs-summary { padding: var(--space-6); }
  .cs-gallery__grid { grid-template-columns: 1fr; }
  /* Връзката е блок, за да не остави подчертаване или празнина. */
.cs-step__shot a,
.cs-gallery figure a { display: block; }
.cs-step__shot a:focus-visible,
.cs-gallery figure a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.cs-step__shot img { max-height: 300px; }
}
@media (max-width: 460px) {
  .cs-metrics { grid-template-columns: 1fr; }
  .cs-cta .btn { width: 100%; }
}

/* ============================================================
   PHASE 7 — Доверие
   Сдържано по замисъл: доверието идва от реални проекти, реални
   контакти и работещи правни страници, не от значки и звезди.
   ============================================================ */

.trust__label {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: var(--space-4);
}
.trust__label--spaced { margin-top: var(--space-8); }

/* ---------- Реални проекти ---------- */
.tprojects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}
.tproj {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-premium);
}
.tproj:hover { border-color: var(--brand-border); box-shadow: var(--glow-premium); }
.tproj__shot { background: var(--bg-3); }
.tproj__shot img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top center;
}
.tproj__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-6);
}
.tproj__industry {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gray-200);
}
.tproj__name {
  margin: var(--space-2) 0;
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.tproj__summary {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
/* Самостоятелна връзка-действие: 44px минимална цел за пръст. */
.tproj__link {
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--brand-2);
}
.tproj__link:hover { color: var(--brand-3); }

/* ---------- Кой сме / контакти / правно ---------- */
.tinfo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.tinfo__col {
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.tinfo__col p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
.tinfo__col p + p { margin-top: var(--space-4); }
.tinfo__col b { color: var(--text); font-weight: var(--fw-semibold); }

.tinfo__list { list-style: none; display: grid; gap: var(--space-3); }
.tinfo__list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-2);
}
.tinfo__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.tinfo__list span { color: var(--text-3); }
/* Имейлът и телефонът в тази колона се тапват от телефон — целта
   беше ~23px, под минимума 24px на WCAG 2.5.8. */
.tinfo__list a { display: inline-block; color: var(--brand-2); padding-block: 6px; }
.tinfo__list a:hover { color: var(--brand-3); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .tprojects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tinfo { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .tprojects__grid { grid-template-columns: 1fr; }
  .tinfo__col { padding: var(--space-6); }
}
@media (max-width: 460px) {
  /* Дългите български етикети не бива да разкъсват реда. */
  .tinfo__list li { flex-direction: column; gap: var(--space-1); }
}

/* ============================================================
   PHASE 8 — Оферта и цени
   Три нови блока: какво влиза базово, разграничението сайт/система
   и защо системата няма една цена.
   ============================================================ */

/* ---------- Базово решение ---------- */
.rbase {
  margin-bottom: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.rbase__title,
.rbridge__title {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: var(--space-4);
}
.rbase__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}
.rbase__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-2);
}
.rbase__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
}
.rbase__note {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  color: var(--text-3);
}

/* Фиксираната цена се обявява като фиксирана — без „приблизително“. */
.rpkg__price-note {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-3);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- Разграничението сайт / система ---------- */
.rbridge {
  margin-top: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--brand-soft), transparent 70%);
}
.rbridge__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
.rbridge__lead + .rbridge__lead { margin-top: var(--space-3); }
.rbridge__lead b { color: var(--text); font-weight: var(--fw-semibold); }

/* ---------- Защо няма една цена ---------- */
.rsys__why {
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border-left: 3px solid var(--brand-border);
  background: var(--surface);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.rsys__why h4 {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: var(--space-2);
}
.rsys__why p {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

/* ---------- Допълнителни възможности ---------- */
.rsys__extras { margin-top: var(--space-8); }
.rsys__extras > h4 {
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: var(--space-4);
}
/* Компактният преглед е чипове, не таблица от трийсет реда. */
.rsys__extras .rsys__groups:not(.rsys__groups--full) ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.rsys__extras .rsys__groups:not(.rsys__groups--full) li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 5px;
  font-size: var(--fs-small);
  color: var(--text-2);
  justify-content: flex-start;
}
.rsys__extras .rsys__groups:not(.rsys__groups--full) li b {
  color: var(--brand-2);
  white-space: nowrap;
}
.rsys__groups--full { margin-top: var(--space-4); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .rbase__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rbase { padding: var(--space-6); }
  .rbase__list { grid-template-columns: 1fr; }
  .rbridge { padding: var(--space-6); }
}

/* ============================================================
   PHASE 9 — Форма за запитване и Thank You
   Формата ползва .form от style.css; тук е само това, което е
   специфично за ресторантската заявка.
   ============================================================ */

.rform {
  max-width: 660px;
  margin-inline: auto;
}
.rform__req { color: var(--brand-2); }
.rform__opt {
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
}

/* Групата за контакт е fieldset, за да е ясно, че двете полета
   са едно изискване, а не две отделни. */
.rform__group {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-4) var(--space-2);
  margin-bottom: var(--space-4);
}
.rform__group legend {
  padding: 0 var(--space-2);
  font-family: var(--font-head);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-2);
}
.rform__hint {
  margin: 0 0 var(--space-3) var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-3);
}

.rform__err {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--error);
}
.form .is-invalid {
  border-color: var(--error-border);
  background: rgba(255, 122, 140, 0.06);
}

/* Капанът за ботове е извън екрана, но остава във формата. */
.rform__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.rform__privacy {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-3);
}
.rform__privacy a { color: var(--brand-2); }
.rform__privacy a:hover { color: var(--brand-3); text-decoration: underline; }

.rform button[type="submit"][disabled] { opacity: 0.75; cursor: progress; }

/* ---------- Thank You ---------- */
.ty { padding-top: calc(var(--nav-h) + var(--space-16)); }
.ty__inner { max-width: 760px; text-align: center; }
.ty__mark {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: var(--brand-soft-2);
  border: 1px solid var(--brand-border);
  color: var(--brand-2);
}
.ty__title {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.ty__lead {
  margin: var(--space-4) auto var(--space-12);
  max-width: 560px;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.ty__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  text-align: left;
}
.ty__steps li {
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.ty__n {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--brand-grad);
  color: var(--brand-ink);
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
}
.ty__steps h2 {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-2);
}
.ty__steps p {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.ty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
}
.ty__contact {
  margin-top: var(--space-8);
  font-size: var(--fs-small);
  color: var(--text-3);
}
.ty__contact a { color: var(--brand-2); }
.ty__contact a:hover { color: var(--brand-3); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .ty__steps { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .rform__group { padding: var(--space-3) var(--space-3) var(--space-1); }
}
@media (max-width: 460px) {
  .ty__actions .btn { width: 100%; }
}

/* Референцията на заявката — бизнес номерът, не аналитичният ID. */
.ty__ref {
  margin: calc(var(--space-8) * -1) auto var(--space-12);
  font-size: var(--fs-small);
  color: var(--text-3);
}
.ty__ref b {
  font-family: var(--font-head);
  letter-spacing: var(--ls-wide);
  color: var(--brand-2);
}