/*
 * Вёрстка лендинга TopBro.
 *
 * Правило файла: ни одного значения цвета, шрифта или размера напрямую —
 * только `var(--tb-*)` из `tokens.css`. Исключение одно: доли сетки
 * (`repeat(3, 1fr)`) и нули, у которых нет единиц измерения.
 *
 * Порядок правил повторяет порядок блоков в разметке, а тот, в свою очередь,
 * повторяет прототип: шапка, первый экран, полоса доверия, «Как это
 * работает», услуги, команда, кейсы, отзывы, контакты, вопросы, финальный
 * призыв, подвал.
 */

/* ========================================================================
   Основа
   ======================================================================== */

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

html {
  /* Верхнее меню прокручивает страницу к своим блокам. Отступ равен высоте
     залипающей шапки — иначе заголовок блока уезжает под неё. */
  scroll-behavior: smooth;
  scroll-padding-top: var(--tb-header-height);
}

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

body {
  margin: 0;
  padding: 0;
  background: var(--tb-color-surface);
  color: var(--tb-color-ink);
  font-family: var(--tb-font-sans);
  -webkit-font-smoothing: antialiased;
  /* Прототип — макет фиксированной ширины 1280 px, мобильной раскладки в нём
     нет. Повторяем это поведение, а не придумываем своё. */
  min-width: var(--tb-page-width);
}

.page {
  width: var(--tb-page-width);
  margin: 0 auto;
}

a {
  color: var(--tb-color-ink);
  text-decoration: none;
}

/* Клавиатурная навигация: в прототипе фокуса нет, но убирать его нельзя. */
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: var(--tb-border-hairline) solid currentColor;
  outline-offset: var(--tb-space-4);
}

.section {
  padding: var(--tb-space-96) var(--tb-space-64);
}

.section--shaded {
  background: var(--tb-color-surface-alt);
}

.section--dark {
  background: var(--tb-color-ink);
}

.eyebrow {
  font-size: var(--tb-text-13);
  font-weight: var(--tb-weight-semibold);
  letter-spacing: var(--tb-tracking-wide);
  text-transform: uppercase;
  color: var(--tb-color-muted);
  margin-bottom: var(--tb-space-12);
}

.section__title {
  font-size: var(--tb-text-44);
  font-weight: var(--tb-weight-black);
  letter-spacing: var(--tb-tracking-tight);
  margin: 0 0 var(--tb-space-56);
}

.section__title--sm {
  font-size: var(--tb-text-40);
}

.section__title--on-dark {
  color: var(--tb-color-surface);
}

/* Ссылка-подчёркивание: «Записаться», «Смотреть все кейсы», соцсети. */
.link-underline {
  font-size: var(--tb-text-14);
  font-weight: var(--tb-weight-semibold);
  border-bottom: var(--tb-border-hairline) solid var(--tb-color-ink);
}

.num {
  font-variant-numeric: tabular-nums;
}

/* Подпись к месту, куда встанет фотография. */
.placeholder-note {
  font-family: var(--tb-font-mono);
  color: var(--tb-color-dim);
}

/* ========================================================================
   1. Шапка
   ======================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--tb-z-header);
  background: var(--tb-color-ink);
  padding: var(--tb-space-20) var(--tb-space-64);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header__logo {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-20);
  font-weight: var(--tb-weight-black);
  letter-spacing: var(--tb-tracking-tight);
}

.site-nav {
  display: flex;
  gap: var(--tb-space-32);
}

.site-nav__link,
.site-header__login {
  color: var(--tb-color-light);
  font-size: var(--tb-text-14);
  font-weight: var(--tb-weight-medium);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--tb-space-20);
}

/* Светлая кнопка-пилюля на тёмном фоне. */
.btn-light {
  padding: var(--tb-space-12) var(--tb-space-24);
  background: var(--tb-color-surface);
  color: var(--tb-color-ink);
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-text-14);
  font-weight: var(--tb-weight-semibold);
}

/* ========================================================================
   2. Первый экран
   ======================================================================== */

.hero {
  position: relative;
  height: var(--tb-hero-height);
  min-height: var(--tb-hero-min-height);
  display: flex;
  align-items: flex-end;
  background: var(--tb-stripe-hero);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--tb-overlay-hero);
}

.hero__note {
  position: absolute;
  top: var(--tb-space-24);
  left: var(--tb-space-24);
  font-family: var(--tb-font-mono);
  font-size: var(--tb-text-11);
  color: var(--tb-color-muted);
}

.hero__content {
  position: relative;
  padding: 0 var(--tb-space-64) var(--tb-space-80);
  max-width: var(--tb-hero-text-width);
}

.hero__title {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-80);
  line-height: var(--tb-leading-hero);
  font-weight: var(--tb-weight-black);
  letter-spacing: var(--tb-tracking-hero);
  margin: 0 0 var(--tb-space-24);
}

.hero__lead {
  color: var(--tb-color-light);
  font-size: var(--tb-text-19);
  line-height: var(--tb-leading-normal);
  margin: 0 0 var(--tb-space-40);
  max-width: var(--tb-hero-lead-width);
}

.hero__actions {
  display: flex;
  gap: var(--tb-space-14);
}

.btn-light--lg {
  padding: var(--tb-space-16) var(--tb-space-32);
  font-size: var(--tb-text-15);
}

.btn-ghost {
  padding: var(--tb-space-16) var(--tb-space-32);
  background: transparent;
  color: var(--tb-color-surface);
  border: var(--tb-border-hairline) solid var(--tb-color-outline-dark);
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-text-15);
  font-weight: var(--tb-weight-semibold);
}

/* ========================================================================
   3. Полоса доверия
   ======================================================================== */

.stats {
  background: var(--tb-color-ink);
  padding: var(--tb-space-40) var(--tb-space-64);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
}

.stats__value {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-34);
  font-weight: var(--tb-weight-black);
  font-variant-numeric: tabular-nums;
}

.stats__label {
  color: var(--tb-color-dim);
  font-size: var(--tb-text-13);
  margin-top: var(--tb-space-4);
}

/* ========================================================================
   4. Как это работает
   ======================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tb-space-24);
  margin-bottom: var(--tb-space-32);
}

.step__number {
  font-size: var(--tb-text-48);
  font-weight: var(--tb-weight-black);
  color: var(--tb-color-light);
  letter-spacing: var(--tb-tracking-tight);
  margin-bottom: var(--tb-space-12);
}

/* Последний шаг выделен цветом — так он и выделен в прототипе. */
.step__number--accent {
  color: var(--tb-color-ink);
}

.step__title {
  font-size: var(--tb-text-17);
  font-weight: var(--tb-weight-bold);
  margin-bottom: var(--tb-space-6);
}

.step__text {
  font-size: var(--tb-text-14);
  color: var(--tb-color-muted);
  line-height: var(--tb-leading-snug);
  margin: 0;
}

.section__footnote {
  font-size: var(--tb-text-14);
  color: var(--tb-color-muted);
  border-top: var(--tb-border-hairline) solid var(--tb-color-line);
  padding-top: var(--tb-space-24);
  margin: 0;
}

/* ========================================================================
   5. Услуги — список приходит из API
   ======================================================================== */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tb-space-20);
}

.service-card {
  background: var(--tb-color-surface);
  border-radius: var(--tb-radius-16);
  padding: var(--tb-space-28);
  display: flex;
  flex-direction: column;
}

.service-card__title {
  font-size: var(--tb-text-18);
  font-weight: var(--tb-weight-bold);
  margin-bottom: var(--tb-space-8);
}

.service-card__text {
  font-size: var(--tb-text-13);
  color: var(--tb-color-muted);
  line-height: var(--tb-leading-snug);
  margin: 0 0 var(--tb-space-20);
  flex: 1;
}

.service-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--tb-space-16);
}

.service-card__term {
  font-size: var(--tb-text-13);
  color: var(--tb-color-muted);
}

.service-card__price {
  font-size: var(--tb-text-20);
  font-weight: var(--tb-weight-black);
  font-variant-numeric: tabular-nums;
}

/* Ссылка прижата влево: в карточке она занимает не всю ширину. */
.service-card__link {
  align-self: flex-start;
}

/* ========================================================================
   6. Команда — список приходит из API
   ======================================================================== */

.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tb-space-20);
}

.member-card {
  border: var(--tb-border-hairline) solid var(--tb-color-line);
  border-radius: var(--tb-radius-16);
  overflow: hidden;
}

.member-card__photo {
  height: var(--tb-portrait-height);
  background: var(--tb-stripe-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tb-text-10);
}

.member-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Портреты в прототипе чёрно-белые — снимок остаётся монохромным. */
  filter: grayscale(1);
}

.member-card__body {
  padding: var(--tb-space-20);
}

.member-card__name {
  font-size: var(--tb-text-16);
  font-weight: var(--tb-weight-bold);
  margin-bottom: var(--tb-space-2);
}

.member-card__role {
  font-size: var(--tb-text-13);
  color: var(--tb-color-muted);
  margin-bottom: var(--tb-space-10);
}

.member-card__cta {
  display: block;
  text-align: center;
  padding: var(--tb-space-11);
  background: var(--tb-color-ink);
  color: var(--tb-color-surface);
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-text-13);
  font-weight: var(--tb-weight-semibold);
}

/* ========================================================================
   7. Кейсы
   ======================================================================== */

.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tb-space-20);
  margin-bottom: var(--tb-space-32);
}

.case-card {
  position: relative;
  height: var(--tb-case-height);
  border-radius: var(--tb-radius-16);
  overflow: hidden;
  background: var(--tb-stripe-dark);
}

.case-card__note {
  position: absolute;
  top: var(--tb-space-16);
  left: var(--tb-space-16);
  font-size: var(--tb-text-10);
}

/* Снимок работы. Правило то же, что у портретов команды: кейсы в прототипе
   чёрно-белые, и цветной скриншот выбивался бы из полосы. */
.case-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.case-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tb-overlay-case);
  padding: var(--tb-space-20);
}

.case-card__title {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-17);
  font-weight: var(--tb-weight-bold);
}

/* ========================================================================
   8. Отзывы
   ======================================================================== */

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tb-space-20);
}

.review-card {
  position: relative;
  background: var(--tb-color-ink-soft);
  border: var(--tb-border-hairline) solid var(--tb-color-line-dark);
  border-radius: var(--tb-radius-16);
  padding: var(--tb-space-28);
}

.review-card__quote {
  position: absolute;
  top: var(--tb-space-20);
  right: var(--tb-space-24);
  font-size: var(--tb-text-48);
  font-weight: var(--tb-weight-black);
  color: var(--tb-color-line-dark);
  line-height: var(--tb-leading-solid);
}

.review-card__text {
  color: var(--tb-color-light);
  font-size: var(--tb-text-14);
  line-height: var(--tb-leading-normal);
  margin: 0 0 var(--tb-space-24);
  max-width: var(--tb-review-text-width);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--tb-space-12);
}

.review-card__avatar {
  width: var(--tb-avatar-size);
  height: var(--tb-avatar-size);
  border-radius: var(--tb-radius-circle);
  background: var(--tb-color-line-dark);
  color: var(--tb-color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tb-text-13);
  font-weight: var(--tb-weight-bold);
  flex-shrink: 0;
}

.review-card__name {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-13);
  font-weight: var(--tb-weight-semibold);
}

.review-card__project {
  color: var(--tb-color-muted);
  font-size: var(--tb-text-12);
}

/* ========================================================================
   9. Контакты
   ======================================================================== */

.contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tb-space-64);
}

.contacts__row {
  font-size: var(--tb-text-15);
  margin-bottom: var(--tb-space-16);
}

.contacts__row--last {
  margin-bottom: var(--tb-space-24);
}

.hours {
  border-top: var(--tb-border-hairline) solid var(--tb-color-line);
  padding-top: var(--tb-space-20);
  margin-bottom: var(--tb-space-24);
}

.hours__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--tb-text-14);
  padding: var(--tb-space-6) 0;
}

.hours__day {
  color: var(--tb-color-muted);
}

.socials {
  display: flex;
  gap: var(--tb-space-16);
}

.map {
  border-radius: var(--tb-radius-16);
  overflow: hidden;
  height: var(--tb-map-height);
  background: var(--tb-stripe-map);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tb-text-11);
}

/* ========================================================================
   10. Частые вопросы
   ======================================================================== */

.faq {
  max-width: var(--tb-faq-width);
  margin: 0 auto;
}

.faq__title {
  margin: 0 0 var(--tb-space-40);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-12);
}

.faq__item {
  background: var(--tb-color-surface);
  border-radius: var(--tb-radius-12);
  padding: var(--tb-space-20) var(--tb-space-24);
}

.faq__question {
  font-size: var(--tb-text-15);
  font-weight: var(--tb-weight-semibold);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__sign {
  color: var(--tb-color-muted);
}

.faq__answer {
  font-size: var(--tb-text-14);
  color: var(--tb-color-muted);
  line-height: var(--tb-leading-normal);
  margin: var(--tb-space-12) 0 0;
}

/* ========================================================================
   11. Финальный призыв
   ======================================================================== */

.cta-final {
  text-align: center;
}

.cta-final__title {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-48);
  font-weight: var(--tb-weight-black);
  letter-spacing: var(--tb-tracking-tight);
  margin: 0 0 var(--tb-space-16);
}

.cta-final__text {
  color: var(--tb-color-light);
  font-size: var(--tb-text-16);
  line-height: var(--tb-leading-normal);
  margin: 0 0 var(--tb-space-32);
}

.cta-final__button {
  display: inline-block;
  padding: var(--tb-space-16) var(--tb-space-40);
  background: var(--tb-color-surface);
  color: var(--tb-color-ink);
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-text-15);
  font-weight: var(--tb-weight-semibold);
}

/* ========================================================================
   12. Подвал
   ======================================================================== */

.site-footer {
  background: var(--tb-color-ink);
  padding: var(--tb-space-64);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--tb-space-32);
}

.site-footer__logo {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-18);
  font-weight: var(--tb-weight-black);
}

.site-footer__about {
  color: var(--tb-color-muted);
  font-size: var(--tb-text-13);
  line-height: var(--tb-leading-normal);
  margin: var(--tb-space-12) 0 0;
  max-width: var(--tb-footer-about-width);
}

.site-footer__socials {
  display: flex;
  gap: var(--tb-space-14);
  margin-top: var(--tb-space-20);
}

.site-footer__icon {
  width: var(--tb-social-size);
  height: var(--tb-social-size);
  border-radius: var(--tb-radius-circle);
  border: var(--tb-border-hairline) solid var(--tb-color-outline-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tb-color-light);
  font-size: var(--tb-text-13);
}

.site-footer__heading {
  color: var(--tb-color-surface);
  font-size: var(--tb-text-13);
  font-weight: var(--tb-weight-semibold);
  margin-bottom: var(--tb-space-16);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-10);
}

.site-footer__links a {
  color: var(--tb-color-dim);
  font-size: var(--tb-text-13);
}

.site-footer__bottom {
  grid-column: 1 / -1;
  border-top: var(--tb-border-hairline) solid var(--tb-color-line-dark);
  padding-top: var(--tb-space-24);
  display: flex;
  justify-content: space-between;
  color: var(--tb-color-muted);
  font-size: var(--tb-text-12);
}

.site-footer__bottom a {
  color: var(--tb-color-muted);
  font-size: var(--tb-text-12);
}

/* ========================================================================
   Заглушки на время загрузки
   ======================================================================== */

/*
 * Пока список услуг или команды едет из API, на его месте стоит карточка той
 * же формы и того же размера. Так страница не «прыгает», когда данные
 * приходят, и место занято ровно тем, что там появится.
 */

.skeleton {
  background: var(--tb-color-line);
  border-radius: var(--tb-radius-12);
  color: transparent;
  animation: tb-pulse 1.4s ease-in-out infinite;
}

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

@keyframes tb-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Отдельные полосы внутри карточки-заглушки. */
.skeleton-line {
  height: var(--tb-space-12);
  margin-bottom: var(--tb-space-8);
}

.skeleton-line--title  { height: var(--tb-space-20); width: 70%; margin-bottom: var(--tb-space-12); }
.skeleton-line--text   { width: 100%; }
.skeleton-line--text-2 { width: 80%; margin-bottom: var(--tb-space-20); }
.skeleton-line--meta   { height: var(--tb-space-20); width: 45%; margin-bottom: var(--tb-space-16); }
.skeleton-line--link   { height: var(--tb-space-14); width: 30%; margin-bottom: 0; }
.skeleton-line--name   { height: var(--tb-space-16); width: 65%; margin-bottom: var(--tb-space-8); }
.skeleton-line--role   { height: var(--tb-space-12); width: 85%; margin-bottom: var(--tb-space-16); }

.skeleton-photo {
  height: var(--tb-portrait-height);
  border-radius: 0;
}

.skeleton-button {
  height: var(--tb-space-40);
  border-radius: var(--tb-radius-pill);
  margin-bottom: 0;
}

/* Заглушка услуги стоит на белой карточке — её фон задан секцией. */
.service-card--skeleton,
.member-card--skeleton {
  /* Форма карточки та же, содержимое — полосы. */
  pointer-events: none;
}

/* ========================================================================
   Отказ загрузки
   ======================================================================== */

/*
 * Если API не ответил, на месте списка появляется не пустота и не вечная
 * заглушка, а объяснение и кнопка повтора: молчащая страница выглядит
 * сломанной, и человек не понимает, ждать ему или уходить.
 */

.load-error {
  grid-column: 1 / -1;
  border: var(--tb-border-hairline) solid var(--tb-color-line);
  border-radius: var(--tb-radius-16);
  padding: var(--tb-space-28);
  background: var(--tb-color-surface);
}

.load-error__text {
  font-size: var(--tb-text-15);
  color: var(--tb-color-muted);
  line-height: var(--tb-leading-snug);
  margin: 0 0 var(--tb-space-16);
}

.load-error__retry {
  font-family: var(--tb-font-sans);
  font-size: var(--tb-text-14);
  font-weight: var(--tb-weight-semibold);
  color: var(--tb-color-ink);
  background: transparent;
  border: 0;
  border-bottom: var(--tb-border-hairline) solid var(--tb-color-ink);
  padding: 0;
  cursor: pointer;
}

/* ========================================================================
   Узкий экран
   ======================================================================== */

/*
 * Раскладка одна и та же: те же блоки, тот же порядок, те же цвета. Меняется
 * только то, что на узком экране не помещается, — число колонок в сетках,
 * отступы секций и шапка, где меню сворачивается в кнопку.
 *
 * Ничего не убирается: на телефоне доступны те же разделы и те же действия,
 * что на компьютере. Значения точек перелома — в конце `tokens.css`.
 */

/* Кнопка «Меню». На широком экране её нет: меню и так стоит строкой. */
.burger {
  display: none;
  padding: var(--tb-space-8) var(--tb-space-14);
  border: var(--tb-border-hairline) solid var(--tb-color-outline-dark);
  border-radius: var(--tb-radius-pill);
  background: transparent;
  color: var(--tb-color-surface);
  font-family: inherit;
  font-size: var(--tb-text-13);
  font-weight: var(--tb-weight-semibold);
  cursor: pointer;
}

@media (max-width: 1279px) {
  /* Макет перестаёт быть фиксированным: 1280 px — ширина прототипа, а не
     требование к окну. Ниже неё страница тянется, а не уезжает вбок. */
  body {
    min-width: 0;
  }

  .page {
    width: 100%;
  }

  .section,
  .site-footer,
  .stats,
  .hero__content,
  .site-header {
    padding-left: var(--tb-space-32);
    padding-right: var(--tb-space-32);
  }

  .team,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .services,
  .cases,
  .reviews {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  /*
   * Пять разделов меню в строку уже не помещаются, поэтому меню
   * сворачивается в кнопку. Логотип, «Войти» и «Записаться» остаются на
   * месте: это вход в сервис, и прятать его за кнопкой нельзя.
   */
  .site-header {
    flex-wrap: wrap;
    gap: var(--tb-space-12);
    padding: var(--tb-space-16) var(--tb-space-24);
  }

  .site-header__logo {
    order: 1;
  }

  .site-header__actions {
    order: 2;
    margin-left: auto;
    gap: var(--tb-space-12);
  }

  .burger {
    display: block;
    order: 3;
  }

  .site-nav {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    gap: var(--tb-space-4);
    display: none;
  }

  .site-header[data-open] .site-nav {
    display: flex;
  }

  /* Пункт меню в столбце — строка, в которую попадают пальцем. */
  .site-nav__link {
    padding: var(--tb-space-12) 0;
  }

  .section {
    padding-top: var(--tb-space-64);
    padding-bottom: var(--tb-space-64);
  }

  .section__title {
    font-size: var(--tb-text-34);
    margin-bottom: var(--tb-space-32);
  }

  .section__title--sm {
    font-size: var(--tb-text-30);
  }

  .hero__title {
    font-size: var(--tb-text-48);
  }

  .contacts {
    grid-template-columns: 1fr;
    gap: var(--tb-space-32);
  }
}

@media (max-width: 600px) {
  .section,
  .site-footer,
  .stats,
  .hero__content,
  .site-header {
    padding-left: var(--tb-space-20);
    padding-right: var(--tb-space-20);
  }

  /* На телефоне в строку помещается одна карточка, а счётчики — по две. */
  .services,
  .cases,
  .reviews,
  .team,
  .steps,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tb-space-24);
  }

  .hero__title {
    font-size: var(--tb-text-40);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions > * {
    text-align: center;
  }

  .section__title {
    font-size: var(--tb-text-30);
  }

  .cta-final__title {
    font-size: var(--tb-text-34);
  }
}