/* ============================================================
   Consity — компоненты внутренних страниц
   Подключается вторым файлом после style.css.
   Токены, сетка (.container), кнопки, шапка и футер — в style.css.
   Методология БЭМ, те же брейкпоинты: 1250 / 1100 / 992 / 768 / 576.
   ============================================================ */

/* ============================================================
   ХЛЕБНЫЕ КРОШКИ
   ============================================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
}

.breadcrumbs__link {
  color: inherit;
  opacity: 0.85;
  transition: color var(--transition), opacity var(--transition);
}

.breadcrumbs__link:hover {
  color: var(--color-accent);
  opacity: 1;
}

.breadcrumbs__sep {
  flex-shrink: 0;
  opacity: 0.6;
}

.breadcrumbs__current {
  opacity: 0.85;
}

/* на тёмном фоне (герой внутренней страницы) */
.breadcrumbs--light {
  color: var(--color-white);
}

/* на белом фоне (страница «Контакты») */
.breadcrumbs--dark {
  color: var(--color-gray);
}

.breadcrumbs--dark .breadcrumbs__link:hover {
  color: var(--color-accent);
}

/* ============================================================
   ГЕРОЙ ВНУТРЕННЕЙ СТРАНИЦЫ (фото + затемнение)
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 600px;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 35, 64, 0.94) 0%, rgba(12, 35, 64, 0.6) 50%, rgba(12, 45, 81, 0.34) 100%),
    linear-gradient(180deg, rgba(12, 45, 81, 0.5) 0%, rgba(12, 45, 81, 0.12) 32%, rgba(10, 28, 52, 0.5) 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 44px;
  padding-bottom: 40px;
}

.page-hero__title {
  max-width: 1200px;
  margin-top: 44px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
}

.page-hero__subtitle {
  max-width: 1100px;
  margin-top: 27px;
  font-size: 24px;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.9);
}

.page-hero__subtitle .accent {
  color: var(--color-accent);
  font-weight: 600;
}

/* список пунктов через тире под заголовком */
.page-hero__list {
  max-width: 1200px;
  margin-top: 46px;
}

.page-hero__list-item {
  position: relative;
  padding-left: 30px;
  font-size: 24px;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.9);
}

.page-hero__list-item::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
}

/*
   Вариант, когда карточки наезжают на нижний край фото.
   Секция с карточками получает отрицательный отступ сверху,
   а герой — увеличенный padding-bottom под этот наезд.
*/
/* наезд карточек задаётся отрицательным отступом секции .cards-overlap */

.cards-overlap {
  position: relative;
  z-index: 2;
  margin-top: -140px;
}

/* ============================================================
   БЕЛАЯ ШАПКА СТРАНИЦЫ (крошки + заголовок, без фото)
   ============================================================ */
.page-head {
  background: var(--color-white);
  padding: 72px 0 108px;
}

/* у текстовой страницы под заголовком сразу идёт документ — отступ меньше */
.page-head--article {
  padding-bottom: 44px;
}

/* страница услуг: шапка плавно стыкуется с сеткой карточек */
.page-head--services {
  padding-bottom: 36px;
}

.page-head__title {
  margin-top: 40px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
}

/* ============================================================
   ПРОМО-БЛОК: тёмный фон + фото справа + текст и кнопка
   ============================================================ */
.promo {
  position: relative;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}

.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-navy) 42%, rgba(12, 45, 81, 0.86) 60%, rgba(12, 45, 81, 0.55) 100%);
}

.promo__inner {
  position: relative;
  z-index: 1;
  padding-top: 79px;
  padding-bottom: 74px;
}

.promo__text {
  max-width: 1010px;
  font-size: 24px;
  line-height: 40px;
  color: var(--color-white);
}

.promo__text + .promo__text {
  margin-top: 40px;
}

.promo__text--narrow {
  max-width: 660px;
}

.promo__brand {
  color: var(--color-accent);
  font-weight: 600;
}

.promo__btn {
  margin-top: 42px;
  min-width: 210px;
}

/* ============================================================
   ФИНАЛЬНАЯ ФОРМА «У вас остались вопросы?»
   ============================================================ */
.questions {
  background: var(--color-navy);
  padding: 69px 0 90px;
}

.questions__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.questions__form {
  width: 100%;
  max-width: 450px;
  margin-top: 56px;
  display: grid;
  gap: 20px;
}

.questions__input {
  width: 100%;
  min-height: 45px;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.questions__input::placeholder {
  color: #a7b0ba;
}

.questions__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 134, 255, 0.25);
}

.questions__submit {
  width: 100%;
}

.questions__success {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #8fe0b0;
  text-align: center;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */

/* ============================================================
   ИНФО-КАРТОЧКИ (сетки услуг на внутренних страницах)
   Базируются на .service-card из style.css, но контент другой:
   заголовок + список ИЛИ заголовок + абзац описания.
   ============================================================ */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

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

.info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 30px 30px 45px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.info-card__title {
  min-height: 60px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--color-ink);
}

.info-card__text {
  margin-top: 13px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-gray);
}

.info-card__list {
  margin-top: 13px;
}

.info-card__list-item {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-gray);
}

.info-card__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gray);
}

.info-card__more {
  position: absolute;
  right: 30px;
  bottom: 26px;
}

/* ============================================================
   БЛОК С ИКОНКАМИ НА ТЁМНОМ ФОНЕ («Мы обеспечим», «Почему доверяют»)
   ============================================================ */
.icon-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
  margin-top: 56px;
}

.icon-row--4 {
  grid-template-columns: repeat(4, 1fr);
}

.icon-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon-row__icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.icon-row__text {
  max-width: 430px;
  margin-top: 50px;
  font-size: 24px;
  line-height: 36px;
  color: var(--color-white);
}

/* ============================================================
   КАРТОЧКИ С ИКОНКОЙ (светлая секция «Наши преимущества»)
   ============================================================ */
.icon-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}

.icon-card {
  min-height: 260px;
  padding: 30px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.icon-card__icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.icon-card__text {
  margin-top: 34px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--color-ink);
}

/* ============================================================
   ТАРИФЫ
   ============================================================ */
.tariffs {
  background: var(--color-bg-light);
  padding: 120px 0 120px;
}

/* на странице ИТ-аутсорсинга в этой же секции ниже стоит калькулятор */
.tariffs--with-calc {
  padding-bottom: 88px;
}

.tariffs__head {
  text-align: center;
}

.tariffs__subtitle {
  max-width: 660px;
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray);
  text-align: center;
}

.tariffs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 30px;
  margin-top: 58px;
}

.tariff {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* выделенный тариф — синий и крупнее соседних */
.tariff--featured {
  margin-top: -18px;
  padding-top: 48px;
  padding-bottom: 46px;
  background: var(--color-accent);
  box-shadow: 0 16px 40px rgba(0, 90, 175, 0.28);
}

.tariff__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}

.tariff__note {
  margin-top: 20px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-gray);
}

.tariff__list {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid #d2d2d2;
}

.tariff__list-item {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 28px;
  color: var(--color-gray);
}

.tariff__list-item::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
}

.tariff__price {
  margin-top: auto;
  padding-top: 30px;
  border-top: 1px solid #d2d2d2;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: var(--color-ink);
}

.tariff__btn {
  margin-top: 30px;
  align-self: center;
  min-width: 210px;
}

/* инверсия цветов внутри выделенного тарифа */
.tariff--featured .tariff__name,
.tariff--featured .tariff__note,
.tariff--featured .tariff__list-item,
.tariff--featured .tariff__price {
  color: var(--color-white);
}

.tariff--featured .tariff__list {
  border-top-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   КАЛЬКУЛЯТОР СТОИМОСТИ
   ============================================================ */
.calc {
  margin-top: 44px;
  padding: 36px 40px 40px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.calc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 32px;
  align-items: start;
}

.calc__label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}

.calc__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid #d7dee6;
  border-radius: var(--radius-btn);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.calc__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 134, 255, 0.14);
}

.calc__input--num {
  max-width: 120px;
}

/* радиогруппа «Время обслуживания» */
.calc__radios {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 24px;
  justify-content: start;
}

.calc__radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-gray);
  cursor: pointer;
}

.calc__radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.calc__total-value {
  font-size: 26px;
  font-weight: 600;
  color: var(--color-ink);
}

.calc__send {
  display: grid;
  gap: 10px;
}

.calc__submit {
  width: 100%;
  min-height: 44px;
}

/* ============================================================
   СРАВНЕНИЕ (штатный админ / Consity)
   ============================================================ */
.compare {
  background: var(--color-white);
  padding: 108px 0 116px;
}

.compare__inner {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 30px;
  align-items: start;
}

/*
   Ряды обеих колонок должны совпадать по горизонтали (как в макете):
   grid-auto-flow: column раскладывает детей колонок по общим рядам,
   а display: contents у .compare__col снимает обёртку.
*/
.compare__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 30px;
}

.compare__col {
  display: contents;
}

.compare__col-title {
  padding-bottom: 27px;
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  color: var(--color-ink);
}

.compare__cell {
  min-height: 105px;
  padding: 30px 0;
  border-top: 1px solid #d2d2d2;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-gray);
}

/* ============================================================
   ПРЕИМУЩЕСТВА (строки: синий заголовок + описание)
   ============================================================ */
.advantages {
  background: var(--color-bg-light);
  padding: 119px 0 64px;
}

.advantages__inner {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 30px;
  align-items: start;
}

.advantages__list {
  display: grid;
}

.advantages__item {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid #d2d2d2;
}

/* шаг строк в макете — 191px, последняя строка по контенту */
.advantages__item:not(:last-child) {
  min-height: 191px;
}

.advantages__item:first-child {
  padding-top: 0;
}

.advantages__item:last-child {
  border-bottom: none;
}

.advantages__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: var(--color-accent);
}

.advantages__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-ink);
}

/* ============================================================
   SLA
   ============================================================ */
.sla {
  background: var(--color-navy);
  padding: 88px 0 77px;
}

.sla__inner {
  display: grid;
  grid-template-columns: 690px 1fr;
  gap: 30px;
  align-items: start;
}

.sla__title {
  color: var(--color-white);
}

.sla__text {
  max-width: 620px;
  margin-top: 22px;
  font-size: 24px;
  line-height: 40px;
  color: rgba(255, 255, 255, 0.9);
}

.sla__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.sla__num {
  display: block;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

.sla__item-text {
  margin-top: 11px;
  font-size: 16px;
  line-height: 26px;
  hyphens: auto;
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   НУМЕРОВАННАЯ СЕТКА С ЗАГОЛОВКАМИ (01–06 / 01–05)
   ============================================================ */
.numbered {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px 30px;
}

.numbered__item {
  display: block;
}

.numbered__num {
  display: block;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
}

.numbered__name {
  margin-top: 22px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: var(--color-ink);
}

.numbered__text {
  margin-top: 18px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-gray);
}

/* вариант на тёмном фоне */
.numbered--light .numbered__name {
  color: var(--color-white);
}

.numbered--light .numbered__text {
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   ЭТАПЫ РАБОТ — горизонтальный таймлайн с кружками
   ============================================================ */
.steps {
  margin-top: 56px;
}

.steps__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
}

.steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

/* соединительная линия между кружками */
.steps__item::before {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(-50% + 35px);
  width: calc(100% - 70px);
  height: 2px;
  background: var(--color-accent);
}

.steps__item:first-child::before {
  display: none;
}

.steps__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 34px;
  font-weight: 700;
}

.steps__text {
  width: max-content;
  max-width: 280px;
  margin-top: 26px;
  font-size: 24px;
  line-height: 36px;
  color: var(--color-ink);
}

/* ============================================================
   КОНТАКТЫ: адрес + форма обратной связи
   ============================================================ */
.contacts {
  background: var(--color-navy);
  padding: 59px 0 73px;
}

.contacts__inner {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 30px;
  align-items: start;
}

/* только колонка адреса — без пустой половины сетки */
.contacts--solo .contacts__inner {
  grid-template-columns: minmax(0, 560px);
}

.contacts__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
}

.contacts__address {
  margin-top: 30px;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 40px;
  color: var(--color-white);
}

.contacts__links {
  margin-top: 28px;
  display: grid;
  gap: 12px;
  justify-items: start;
}

.contacts__link {
  font-size: 24px;
  font-weight: 300;
  line-height: 40px;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition);
}

.contacts__link:hover {
  color: var(--color-accent-hover);
}

.contacts__note {
  margin-top: 18px;
  max-width: 390px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.85);
}

.contacts__form {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
  align-items: start;
}

.contacts__fields {
  display: grid;
  gap: 20px;
}

.contacts__input,
.contacts__textarea {
  width: 100%;
  min-height: 45px;
  padding: 10px 20px;
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.contacts__textarea {
  min-height: 110px;
  padding-top: 12px;
  resize: vertical;
}

.contacts__input::placeholder,
.contacts__textarea::placeholder {
  color: #a7b0ba;
}

.contacts__input:focus,
.contacts__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 134, 255, 0.25);
}

.contacts__submit {
  width: 100%;
}

.contacts__agree {
  max-width: 330px;
  font-size: 14px;
  line-height: 20px;
  color: #a4a4a4;
}

/* ============================================================
   КАРТА
   ============================================================ */
.map {
  height: 560px;
  background: #e8eaed;
}

.map__frame,
.map__img {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

/* ============================================================
   АДАПТИВ КОМПОНЕНТОВ
   ============================================================ */

/* ============================================================
   ДОПОЛНЕНИЯ ПОД КОНКРЕТНЫЕ СЕКЦИИ ВНУТРЕННИХ СТРАНИЦ
   ============================================================ */

/*
   Серый фон секции с наезжающими карточками начинается не от верха
   секции, а ровно от нижней кромки фото героя — поэтому он рисуется
   псевдоэлементом со сдвигом, равным величине наезда.
*/
.cards-overlap {
  position: relative;
  margin-top: -120px;
  padding-bottom: 120px;
}

.cards-overlap::before {
  content: "";
  position: absolute;
  inset: 120px 0 0;
  background: var(--color-bg-light);
}

.cards-overlap > .container {
  position: relative;
}

/* на странице Битрикс24 сетка 2×2 — нижний отступ секции меньше */
.cards-overlap--tight {
  padding-bottom: 80px;
}

/* карточки услуг под героем — выше обычных инфо-карточек */
.info-cards--tall .info-card {
  min-height: 310px;
}

/* блок «Почему нам доверяют» в трёхколоночном варианте */
/*
   Нижний отступ блока «Почему нам доверяют / Мы обеспечим» зависит от того,
   на сколько колонок разложены подписи: чем уже колонка, тем больше строк
   и тем меньше остаётся воздуха снизу. Высота секции везде 560px.
*/
.trust--3col {
  padding-bottom: 77px;
}

.trust--4col {
  padding-bottom: 41px;
}

.trust .icon-row {
  margin-top: 106px;
}

/* заголовок и лид тарифов по левому краю (страница «Поддержка сайтов») */
.tariffs__head--left {
  text-align: left;
}

.tariffs__subtitle--left {
  margin-left: 0;
  margin-right: 0;
  max-width: 520px;
  color: var(--color-ink);
  text-align: left;
}

/* нумерованная секция на белом фоне */
.numbered-section {
  background: var(--color-white);
  padding: 119px 0 176px;
}

.numbered-section .numbered {
  margin-top: 65px;
}

/* отзывы на внутренних страницах чуть плотнее, чем на главной */
.page--inner .reviews {
  padding: 116px 0;
}

/* ============================================================
   СЕКЦИИ КОНКРЕТНЫХ СТРАНИЦ (продолжение)
   ============================================================ */

/* --- варианты героя --- */
.page-hero__subtitle--narrow {
  max-width: 560px;
}

/* когда под подзаголовком идёт список, свой отступ не нужен */
.page-hero__list--tight {
  margin-top: 0;
}

/* --- «Когда нужна настройка 1С»: заголовок слева, номера справа --- */
.numbered-dark {
  background: var(--color-navy);
  padding: 59px 0 95px;
}

.numbered-dark__inner {
  display: grid;
  grid-template-columns: 690px 1fr;
  gap: 30px;
  align-items: start;
}

.numbered-dark .numbered {
  margin-top: 10px;
}

.numbered--2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 72px 30px;
}

/* в тёмном варианте у пунктов нет заголовков — текст идёт сразу за номером */
.numbered--light .numbered__text {
  margin-top: 11px;
}

/* --- «Наши преимущества» (карточки с иконками) --- */
.benefits {
  background: var(--color-bg-light);
  padding: 119px 0 120px;
}

.benefits .icon-cards {
  margin-top: 55px;
}

/* --- «Этапы работ» (таймлайн) --- */
.steps-section {
  background: var(--color-white);
  padding: 118px 0 153px;
}

.steps-section .steps {
  margin-top: 115px;
}

/* --- «Этапы работ» нумерованной сеткой (Битрикс24) --- */
.numbered-section--left {
  padding-bottom: 192px;
}

.numbered-section--left .section-title {
  text-align: left;
}

.numbered-section--left .numbered {
  margin-top: 66px;
  gap: 79px 30px;
}

/* --- CTA-полоса с фото: заголовок по центру + широкая кнопка --- */
.promo--center .promo__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* только вертикальные отступы: боковые приходят из .container,
     сокращённая запись padding их бы затёрла и блок ушёл бы в край экрана */
  padding-top: 105px;
  padding-bottom: 93px;
}

.promo__title {
  max-width: 1000px;
  margin: 0 auto 24px;
}

.promo__btn--wide {
  min-width: 450px;
  margin-top: 47px;
}

/* --- Калькулятор: панель шире контейнера --- */
.calc-wrap {
  max-width: 1570px;
}

.calc__title {
  margin-top: 119px;
}

.calc {
  margin-top: 44px;
  padding: 41px 90px 45px;
}

.calc__col {
  display: grid;
  align-content: start;
  gap: 40px;
}

.calc__field {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

.calc__fieldset {
  min-width: 0;
}

.calc__label {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.calc__input {
  border-color: #a4a4a4;
}

.calc__input--num {
  max-width: 60px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--color-accent);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

.calc__total-value {
  margin-top: 14px;
  font-size: 36px;
  font-weight: 400;
}

.calc__send {
  gap: 20px;
}

.calc__radios {
  margin-top: 14px;
  gap: 14px 30px;
}

/* ============================================================
   АДАПТИВ — все медиазапросы собраны здесь и идут по убыванию ширины.
   Порядок важен: при равной специфичности выигрывает правило ниже,
   поэтому узкие брейкпоинты обязаны стоять последними.
   ============================================================ */

@media (max-width: 1250px) {
  /* подписи «Этапов работ»: ширина по колонке, а не по max-content —
     на 992–1250 текст соседних шагов иначе наезжает друг на друга */
  .steps__text {
    width: auto;
    max-width: none;
    font-size: 20px;
    line-height: 30px;
  }

  .page-hero__title {
    max-width: 760px;
    font-size: 36px;
  }
  .info-cards {
    gap: 20px;
  }

  .info-card {
    padding: 24px 26px 56px;
  }

  .info-card__more {
    right: 26px;
  }

  .tariff {
    padding: 26px 24px 30px;
  }

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

  .compare__inner,
  .advantages__inner,
  .sla__inner,
  .contacts__inner {
    grid-template-columns: 280px 1fr;
    gap: 40px;
  }

  .contacts--solo .contacts__inner {
    grid-template-columns: minmax(0, 560px);
  }

  .advantages__item {
    grid-template-columns: 240px 1fr;
    gap: 32px;
  }

  .numbered {
    gap: 40px 40px;
  }
  .numbered-dark__inner,
  .sla__inner,
  .compare__inner {
    grid-template-columns: 1fr 1fr;
  }

  /*
     «Наши преимущества» на 992–1250: заголовок встаёт сверху на всю ширину,
     а строки «название — текст» получают весь контейнер — иначе текстовая
     колонка сжималась до ~200px и читалась столбиком.
  */
  .advantages__inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .advantages__item {
    grid-template-columns: 280px 1fr;
    gap: 40px;
  }

  /* десктопная распорка рядов (191px) при широкой текстовой колонке не нужна */
  .advantages__item:not(:last-child) {
    min-height: 0;
  }

  .promo__btn--wide {
    min-width: 360px;
  }

  .calc {
    padding: 32px 40px 36px;
  }
}

@media (max-width: 992px) {
  /* на планшете и мобильном высоту героя задаёт контент,
     а не макетные 600px: карточки уже не наезжают на фото */
  .page-hero {
    min-height: 420px;
  }

  .page-hero__inner {
    padding-top: 36px;
    padding-bottom: 72px;
  }

  .page-hero--overlap .page-hero__inner {
    padding-bottom: 150px;
  }

  .page-hero__title {
    margin-top: 36px;
    font-size: 32px;
  }

  /* фиксированные line-height макета (40px/36px) на узких экранах
     дают слишком воздушный текст — переводим их в пропорциональные */
  .page-hero__subtitle,
  .page-hero__list-item {
    font-size: 19px;
    line-height: 1.5;
  }

  .page-hero__list {
    margin-top: 24px;
  }

  .icon-row__text,
  .steps__text,
  .promo__text,
  .sla__text,
  .contacts__address,
  .contacts__link {
    font-size: 19px;
    line-height: 1.55;
  }

  .icon-card__text,
  .info-card__title,
  .numbered__name,
  .advantages__name,
  .compare__col-title,
  .tariff__name,
  .contacts__title,
  .calc__label {
    font-size: 20px;
    line-height: 1.35;
  }

  .numbered__num,
  .sla__num {
    font-size: 46px;
  }

  .cards-overlap {
    margin-top: -110px;
  }

  .page-head {
    padding: 40px 0 56px;
  }

  .page-head__title {
    margin-top: 28px;
    font-size: 38px;
  }

  .promo__inner {
    padding-top: 64px;
    padding-bottom: 68px;
  }

  .promo__text {
    font-size: 18px;
  }

  .questions {
    padding: 72px 0 76px;
  }
  .info-cards,
  .info-cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .icon-row,
  .icon-row--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px;
    margin-top: 44px;
  }

  .icon-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .icon-card {
    padding: 22px 20px 24px;
  }

  .icon-card__text {
    font-size: 16px;
  }

  .tariffs {
    padding: 72px 0 80px;
  }

  .tariffs__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 520px;
    margin: 40px auto 0;
  }

  .tariff--featured {
    margin-top: 0;
    padding-top: 32px;
    padding-bottom: 36px;
  }

  .compare,
  .advantages {
    padding: 72px 0 80px;
  }

  .compare__inner,
  .advantages__inner,
  .sla__inner,
  .contacts__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .sla,
  .contacts {
    padding: 72px 0 80px;
  }

  .numbered {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
  }

  .steps__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 16px;
  }

  .steps__item::before {
    display: none;
  }

  .map {
    height: 340px;
  }
  .cards-overlap {
    margin-top: -90px;
    padding-bottom: 80px;
  }

  .cards-overlap::before {
    inset: 90px 0 0;
  }

  .trust--3col,
  .trust--4col {
    padding-bottom: 72px;
  }

  .trust .icon-row {
    margin-top: 56px;
  }

  .numbered-section {
    padding: 72px 0 80px;
  }

  .numbered-section .numbered {
    margin-top: 48px;
  }

  .page--inner .reviews {
    padding: 72px 0 80px;
  }
  .numbered-dark {
    padding: 72px 0 80px;
  }

  /*
     Эти правила должны идти после блока 1250px выше, иначе на узких экранах
     двухколоночная раскладка не сбрасывается: при равной специфичности
     выигрывает то правило, что записано ниже.
  */
  .numbered-dark__inner,
  .compare__inner,
  .advantages__inner,
  .sla__inner,
  .contacts__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .numbered-dark .numbered {
    margin-top: 0;
  }

  .benefits {
    padding: 72px 0 80px;
  }

  .benefits .icon-cards {
    margin-top: 40px;
  }

  .steps-section {
    padding: 72px 0 80px;
  }

  .steps-section .steps {
    margin-top: 56px;
  }

  .numbered-section--left {
    padding-bottom: 80px;
  }

  .numbered-section--left .numbered {
    margin-top: 48px;
    gap: 48px 30px;
  }

  .promo--center .promo__inner {
    padding-top: 64px;
    padding-bottom: 68px;
  }

  .calc__title {
    margin-top: 72px;
  }

  .steps__text {
    font-size: 18px;
    line-height: 26px;
  }
}

@media (max-width: 768px) {
  .page-hero {
    min-height: 340px;
  }

  .breadcrumbs {
    font-size: 14px;
    gap: 8px;
  }

  .page-hero__inner {
    padding-top: 28px;
    padding-bottom: 56px;
  }

  /* на мобильном наезд карточек убираем — они идут обычным потоком */
  .page-hero--overlap .page-hero__inner {
    padding-bottom: 56px;
  }

  .cards-overlap {
    margin-top: 0;
    padding-top: 40px;
  }

  .page-hero__title {
    margin-top: 24px;
    font-size: 27px;
  }

  .page-hero__subtitle {
    margin-top: 20px;
    font-size: 17px;
  }

  .page-hero__list-item {
    font-size: 17px;
    padding-left: 24px;
  }

  .icon-row__text,
  .steps__text,
  .promo__text,
  .sla__text,
  .contacts__address,
  .contacts__link {
    font-size: 17px;
  }

  .info-card__title {
    min-height: 0;
  }

  .numbered__num,
  .sla__num {
    font-size: 42px;
  }

  .page-head {
    padding: 28px 0 40px;
  }

  .page-head__title {
    margin-top: 20px;
    font-size: 30px;
  }

  .promo__inner {
    padding-top: 48px;
    padding-bottom: 52px;
  }

  .promo__text {
    font-size: 16px;
  }

  .promo__btn {
    width: 100%;
    max-width: 360px;
  }

  .questions {
    padding: 56px 0 60px;
  }

  .questions__form {
    margin-top: 32px;
  }
  .info-cards,
  .info-cards--2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .icon-row,
  .icon-row--4 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .icon-cards {
    grid-template-columns: 1fr;
  }

  .tariffs {
    padding: 56px 0 64px;
  }

  .calc {
    padding: 24px 20px 28px;
  }

  .calc__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .calc__input--num {
    max-width: 100%;
  }

  .compare,
  .advantages,
  .sla,
  .contacts {
    padding: 56px 0 64px;
  }

  .compare__cols {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    row-gap: 8px;
  }

  .compare__col {
    display: block;
  }

  .compare__col-title {
    padding-bottom: 12px;
  }

  .advantages__item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }

  .sla__list {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .numbered {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .steps__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .steps__item {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 0;
  }

  .steps__text {
    margin-top: 0;
  }

  .contacts__form {
    grid-template-columns: 1fr;
  }

  .map {
    height: 280px;
  }
  .cards-overlap {
    margin-top: 0;
    padding-top: 40px;
    padding-bottom: 56px;
  }

  .cards-overlap::before {
    inset: 0;
  }

  .info-cards--tall .info-card {
    min-height: 0;
  }

  .numbered-section {
    padding: 56px 0 64px;
  }

  .page--inner .reviews {
    padding: 56px 0 64px;
  }
  .numbered-dark {
    padding: 56px 0 64px;
  }

  .numbered--2col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .benefits,
  .steps-section {
    padding: 56px 0 64px;
  }

  .numbered-section--left {
    padding-bottom: 64px;
  }

  .promo--center .promo__inner {
    padding-top: 48px;
    padding-bottom: 52px;
  }

  .promo__btn--wide {
    width: 100%;
    min-width: 0;
    max-width: 450px;
  }

  .calc {
    margin-top: 32px;
  }

  .calc__title {
    margin-top: 56px;
  }

  .calc__label {
    font-size: 20px;
  }

  .calc__col {
    gap: 22px;
  }

  .calc__total-value {
    margin-top: 0;
  }

  .advantages__item {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   СТРАНИЦА 404
   ============================================================ */
.error-page {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  padding: 90px 0 110px;
  background-color: var(--color-navy);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.error-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 35, 64, 0.96) 0%, rgba(12, 35, 64, 0.72) 55%, rgba(12, 45, 81, 0.5) 100%),
    linear-gradient(180deg, rgba(12, 45, 81, 0.5) 0%, rgba(10, 28, 52, 0.6) 100%);
}

.error-page__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.error-page__code {
  display: block;
  font-size: 200px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

.error-page__title {
  max-width: 760px;
  margin-top: 34px;
  color: var(--color-white);
}

.error-page__text {
  max-width: 620px;
  margin-top: 22px;
  font-size: 20px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.85);
}

.error-page__search {
  margin-top: 28px;
  max-width: 520px;
}

.error-page__search .search-form__input {
  border-color: transparent;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 44px;
}

.error-page__btn {
  min-width: 210px;
}

/* быстрые ссылки на услуги */
.error-page__links {
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.error-page__links-title {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

.error-page__links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin-top: 20px;
}

.error-page__link {
  font-size: 18px;
  color: var(--color-white);
  transition: color var(--transition);
}

.error-page__link:hover {
  color: var(--color-accent);
}

/* ============================================================
   ТЕКСТОВАЯ СТРАНИЦА (политика, оферта, статьи)
   ============================================================ */
.article {
  background: var(--color-white);
  padding: 0 0 110px;
}

/* колонка текста выровнена по левому краю контейнера, как заголовок страницы */
.article__inner {
  max-width: 940px;
}

.article__lead {
  padding: 26px 30px;
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-ink);
}

.article__date {
  margin-top: 18px;
  font-size: 16px;
  color: var(--color-gray);
}

.article h2 {
  margin-top: 54px;
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  color: var(--color-ink);
}

.article h3 {
  margin-top: 34px;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-ink);
}

.article p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 30px;
  color: #4a4a4a;
}

.article ul,
.article ol {
  margin-top: 18px;
  display: grid;
  gap: 12px;
  counter-reset: item;
}

.article li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  line-height: 28px;
  color: #4a4a4a;
}

.article ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.article ol > li::before {
  counter-increment: item;
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-accent);
}

.article a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article a:hover {
  color: var(--color-accent-active);
}

.article strong {
  font-weight: 700;
  color: var(--color-ink);
}

.article__thumb {
  margin: 0 0 28px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-light);
}

.article__thumb-img {
  width: 100%;
  height: auto;
}

.article .post-meta {
  margin-bottom: 18px;
}

.article__tags {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(12, 45, 81, 0.1);
}

.article__pages {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 16px;
  color: var(--color-gray);
}

.article__pages a {
  color: var(--color-accent);
}

/* ---------- мета записи ---------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-gray);
}

.post-meta a {
  color: var(--color-accent);
  transition: color var(--transition);
}

.post-meta a:hover {
  color: var(--color-accent-active);
}

.post-meta__sep {
  margin: 0 6px;
  color: rgba(128, 128, 128, 0.7);
}

.post-meta__label {
  margin-right: 4px;
}

/* ---------- шапка: подзаголовок и поиск ---------- */
.page-head__lead {
  max-width: 760px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 30px;
  color: var(--color-gray);
}

.page-head__lead p {
  margin: 0;
}

.page-head__search {
  margin-top: 28px;
  max-width: 640px;
}

/* ============================================================
   БЛОГ / АРХИВ / ПОИСК
   ============================================================ */
.blog {
  background: var(--color-bg-light);
  padding: 48px 0 100px;
}

.blog__found {
  margin-bottom: 24px;
  font-size: 16px;
  color: var(--color-gray);
}

.blog__list {
  display: grid;
  gap: 24px;
}

.post-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: stretch;
  padding: 24px;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.post-card__media {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-light);
  min-height: 180px;
}

.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 4px 4px 0;
}

.post-card__title {
  margin-top: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}

.post-card__link {
  color: inherit;
  transition: color var(--transition);
}

.post-card__link:hover {
  color: var(--color-accent);
}

.post-card__excerpt {
  margin-top: 12px;
  flex-grow: 1;
  font-size: 16px;
  line-height: 26px;
  color: #4a4a4a;
}

.post-card__excerpt p {
  margin: 0;
}

.post-card__more {
  margin-top: 18px;
  align-self: flex-start;
}

/* карточка без картинки — одна колонка */
.post-card--no-media {
  grid-template-columns: 1fr;
}

/* ---------- форма поиска ---------- */
.search-form {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 45px;
  padding: 10px 16px;
  border: 1px solid rgba(12, 45, 81, 0.18);
  border-radius: var(--radius-btn);
  background: var(--color-white);
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-form__input::placeholder {
  color: var(--color-gray);
}

.search-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15);
}

.search-form__submit {
  flex-shrink: 0;
  min-width: 120px;
}

/* ---------- пустой результат ---------- */
.content-none {
  padding: 40px 0 20px;
  max-width: 640px;
}

.content-none__text {
  font-size: 18px;
  line-height: 30px;
  color: #4a4a4a;
}

.content-none__search {
  margin-top: 24px;
}

.content-none__actions {
  margin-top: 28px;
}

/* ---------- пагинация ---------- */
.pagination-wrap {
  margin-top: 40px;
}

.pagination-wrap .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.pagination-wrap .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: background-color var(--transition), color var(--transition);
}

.pagination-wrap a.page-numbers:hover {
  color: var(--color-accent);
}

.pagination-wrap .page-numbers.current {
  background: var(--color-accent);
  color: var(--color-white);
}

.pagination-wrap .page-numbers.dots {
  background: transparent;
  box-shadow: none;
  color: var(--color-gray);
}

.pagination-wrap .prev,
.pagination-wrap .next {
  min-width: 0;
}

/* скрытый текст для скринридеров */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   ПОХОЖИЕ ЗАПИСИ / ПОЛЕЗНЫЕ ССЫЛКИ
   ============================================================ */
.related {
  background: var(--color-bg-light);
  padding: 72px 0 80px;
}

.related__title {
  margin-bottom: 28px;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.related-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-light);
  overflow: hidden;
}

.related-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}

.related-card__date {
  font-size: 14px;
  color: var(--color-gray);
}

.related-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

.related-card__title a {
  color: inherit;
  transition: color var(--transition);
}

.related-card__title a:hover {
  color: var(--color-accent);
}

.help-links {
  background: var(--color-white);
  padding: 72px 0 80px;
}

.help-links__title {
  margin-bottom: 28px;
}

.help-links__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
}

.help-links__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 16px 20px;
  background: var(--color-bg-light);
  border-radius: var(--radius);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
  transition: background-color var(--transition), color var(--transition);
}

.help-links__link:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.help-links__arrow {
  flex-shrink: 0;
  transition: transform var(--transition);
}

.help-links__link:hover .help-links__arrow {
  transform: translateX(3px);
}

/* ============================================================
   ПЛАШКА COOKIE
   ============================================================ */
.cookies {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 250;
  display: none;
}

.cookies.is-visible {
  display: block;
  animation: cookies-in 0.35s ease both;
}

@keyframes cookies-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookies__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 24px 30px;
  background: var(--color-navy);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(4, 16, 32, 0.35);
}

.cookies__icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.cookies__text {
  flex: 1;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-white);
}

.cookies__link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.cookies__link:hover {
  color: var(--color-accent-hover);
}

.cookies__btn {
  flex-shrink: 0;
  min-width: 180px;
}

/* --- адаптив новых блоков (порядок: широкий → узкий) --- */
@media (max-width: 992px) {
  .error-page {
    padding: 64px 0 80px;
  }

  .error-page__code {
    font-size: 150px;
  }

  .error-page__title {
    margin-top: 26px;
  }

  .error-page__text {
    font-size: 18px;
    line-height: 28px;
  }

  .error-page__links {
    margin-top: 48px;
  }

  .article {
    padding-bottom: 80px;
  }

  .article h2 {
    margin-top: 44px;
    font-size: 24px;
    line-height: 32px;
  }

  .post-card {
    grid-template-columns: 220px 1fr;
    gap: 20px;
    padding: 20px;
  }

  .post-card__title {
    font-size: 22px;
  }

  .blog {
    padding: 36px 0 80px;
  }

  .related,
  .help-links {
    padding: 56px 0 64px;
  }

  .related__grid,
  .help-links__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .cookies__inner {
    gap: 20px;
    padding: 20px 24px;
  }

  .cookies__btn {
    min-width: 160px;
  }
}

@media (max-width: 768px) {
  .error-page {
    min-height: 0;
    padding: 48px 0 64px;
  }

  .error-page__code {
    font-size: 104px;
  }

  .error-page__text {
    margin-top: 16px;
    font-size: 17px;
    line-height: 27px;
  }

  .error-page__actions {
    gap: 14px;
    margin-top: 32px;
  }

  .error-page__btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
  }

  .error-page__links {
    margin-top: 36px;
    padding-top: 26px;
  }

  .error-page__links-list {
    gap: 12px;
    flex-direction: column;
  }

  .error-page__link {
    font-size: 17px;
  }

  .article {
    padding-bottom: 56px;
  }

  .article__lead {
    padding: 20px 22px;
    font-size: 16px;
    line-height: 26px;
  }

  .article h2 {
    margin-top: 36px;
    font-size: 21px;
    line-height: 29px;
  }

  .article h3 {
    font-size: 18px;
  }

  .article p,
  .article li {
    font-size: 16px;
    line-height: 26px;
  }

  .page-head__lead {
    font-size: 16px;
    line-height: 26px;
  }

  .page-head__search {
    margin-top: 22px;
  }

  .blog {
    padding: 28px 0 64px;
  }

  .post-card,
  .post-card--no-media {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .post-card__media {
    min-height: 180px;
    aspect-ratio: 16 / 9;
  }

  .post-card__body {
    padding: 0;
  }

  .post-card__title {
    font-size: 20px;
  }

  .search-form {
    flex-direction: column;
  }

  .search-form__submit {
    width: 100%;
  }

  .pagination-wrap {
    margin-top: 28px;
  }

  .related,
  .help-links {
    padding: 44px 0 52px;
  }

  .related__grid,
  .help-links__list {
    grid-template-columns: 1fr;
  }

  .help-links__link {
    font-size: 16px;
    min-height: 56px;
  }

  /* плашка cookie на мобильном — колонкой, кнопка на всю ширину */
  .cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .cookies__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .cookies__icon {
    display: none;
  }

  .cookies__text {
    font-size: 15px;
    line-height: 24px;
  }

  .cookies__btn {
    width: 100%;
  }
}