@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/InterTight-300-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/InterTight-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/InterTight-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/InterTight-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/InterTight-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/InterTight-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/InterTight-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/InterTight-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/InterTight-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/InterTight-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/InterTight-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/InterTight-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/InterTight-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/InterTight-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/InterTight-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================== base.css ==================== */
/* ============ База: переменные, сброс, типографика ============ */
:root {
  --c-dark: #292929;
  --c-bg: #f6f6f6;
  --c-white: #fff;
  --c-accent: #1d5be0;
  --c-accent-h: #0051ff;
  --r-sm: 10px;
  --r-lg: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter Tight', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--c-dark);
  background-color: var(--c-bg);
}
body.menu-open, body.popup-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea { font: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.sec-title {
  font-size: 54px;
  font-weight: 400;
  line-height: 1.23;
  text-transform: uppercase;
  color: var(--c-dark);
  text-align: center;
}
@media (max-width: 899px) { .sec-title { font-size: 42px; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 32px;
  background-color: var(--c-accent);
  color: var(--c-white);
  font-size: 16px;
  font-weight: 400;
  border: 0;
  border-radius: var(--r-sm);
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
  text-align: center;
}
.btn:hover, .btn:focus-visible { background-color: var(--c-accent-h); }

/* honeypot — скрытое поле-ловушка для спам-ботов */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============ Попапы ============ */
.popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  overflow-y: auto;
  background: rgba(0, 0, 0, .8);
  padding: 40px 20px;
}
.popup.is-open { display: flex; }
.popup__inner { margin: auto; position: relative; width: 100%; max-width: 560px; }
.popup__container {
  background: var(--c-bg);
  border-radius: var(--r-sm);
  overflow: hidden;
  padding: 40px 40px 45px;
}
.popup__close {
  position: absolute;
  right: 0;
  top: -36px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup__close svg { display: block; }
.popup__title {
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-dark);
}
.popup__descr { margin-top: 12px; text-align: center; font-size: 16px; color: var(--c-dark); }
.popup__form { margin-top: 25px; }
.popup__row { display: flex; gap: 10px; }
.popup__row .popup__field { flex: 1 1 0; }
.popup__field { margin-bottom: 10px; }
.popup__input, .popup__textarea {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  border: 1px solid #fff;
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-dark);
  outline: none;
}
.popup__textarea { height: 140px; padding: 18px 20px; resize: vertical; }
.popup__input::placeholder, .popup__textarea::placeholder { color: var(--c-dark); opacity: .5; }
.popup__input:focus, .popup__textarea:focus { border-color: var(--c-accent); }
.popup__submit { width: 100%; margin-top: 5px; }
.popup__error { display: none; margin-top: 12px; color: #d63c3c; font-size: 14px; text-align: center; }
.popup__error.is-visible { display: block; }
.popup__success { display: none; padding: 30px 0 20px; text-align: center; font-size: 18px; }
.popup__success.is-visible { display: block; }
@media (max-width: 559px) {
  .popup { padding: 30px 10px; }
  .popup__container { padding: 30px 20px 35px; }
  .popup__row { flex-direction: column; gap: 0; }
}

/* форма: сообщение об ошибке под полем */
.lead-form .field-error { border-color: #d63c3c !important; }

/* ============ Плавающий виджет мессенджеров (t898) ============ */
.chatw { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; }
.chatw__btn {
  width: 60px; height: 60px;
  border: 0; border-radius: 50%;
  background: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
  transition: background-color .2s ease-in-out;
}
.chatw__btn:hover { background: var(--c-accent-h); }
.chatw__icon-close { display: none; }
.chatw.is-open .chatw__icon-open { display: none; }
.chatw.is-open .chatw__icon-close { display: block; }
.chatw__links {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  margin-bottom: 14px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out, visibility .2s;
}
.chatw.is-open .chatw__links { opacity: 1; visibility: visible; transform: none; }
.chatw__link { display: flex; align-items: center; gap: 10px; }
.chatw__label {
  background: var(--c-white); color: var(--c-dark);
  font-size: 14px; line-height: 1;
  padding: 8px 12px; border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}
.chatw__circle {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.chatw__circle svg { display: block; width: 50px; height: 50px; }
@media (max-width: 639px) {
  .chatw { right: 14px; bottom: 14px; }
}

/* ==================== header.css ==================== */
/* =====================================================================
   ШАПКА (hdr)
   Оригинал — два Tilda T228 (оба position:fixed, высота 100px, z-index 2000):
   - rec871515501: фон rgba(41,41,41,0) — прозрачная, всегда видна поверх героя;
   - rec872353085: фон #292929, появляется после 500px скролла (appearoffset).
   Контент обоих идентичен => одна шапка position:fixed, прозрачная;
   JS при scrollY >= 500 добавляет .is-scrolled => фон #292929.
   Мобильные бары: 480-959px — тёмный бар 64px (лого + бургер, tmenu-mobile);
   <480px — бар 50px (лого + телефон + img/menu.svg, T396 rec871705315).
   Панель: T450 rec871710022 — СПРАВА, max-width 260px, фон #292929,
   контент прижат: меню сверху, соцссылки + кнопка — к низу.
   Метрики сверены с tilda-blocks-page63901379.min.css (t228, t450, t-btnflex_sm).

   JS-хуки (сам JS не здесь):
   - .js-burger        — клик тогглит меню (кнопки бургера/закрытия и оверлей);
   - .js-mobile-menu   — панель; открытие = класс .is-open;
   - .js-menu-link     — клик по ссылке внутри панели закрывает её;
   - body.menu-open    — на body при открытой панели (лочит скролл);
   - .hdr.is-scrolled  — при window.scrollY >= 500 (фон шапки становится #292929);
   - aria-expanded на .js-burger переключать true/false.
===================================================================== */

.hdr {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;                      /* как у t228 */
  background-color: transparent;
  transition: background-color .3s linear;
}
.hdr.is-scrolled { background-color: var(--c-dark); }

/* Компенсация фиксированной шапки: на десктопе она прозрачная и лежит поверх
   тёмного героя (контент начинается с y=0, как в оригинале); на мобильных бар
   непрозрачный — контент сдвигается (в оригинале это делал t396__updateTopShift). */
@media (max-width: 959px) { body { padding-top: 64px; } }
@media (max-width: 479px) { body { padding-top: 50px; } }

/* Лочим скролл страницы при открытой панели (класс вешает JS) */
body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   Десктопная шапка (>=960px). T228: высота 100px, боковые отступы 40px
   (20px при <1200), лого 20px + padding-right 30px (15px при <1200),
   пункты 14px/500 c padding 0 15px, справа gap 30px (почта | кнопки),
   между кнопками gap 10px, кнопки t-btnflex_sm: h45, 14px, padding 0 30px
   (0 25px при <1200).
--------------------------------------------------------------------- */
.hdr-bar-desktop {
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 40px;
}
.hdr-logo {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
}
.hdr-bar-desktop .hdr-logo { margin-right: 30px; }

.hdr-nav { min-width: 0; }
.hdr-nav-list {
  display: flex;
  flex-wrap: wrap;            /* как в оригинале (table-ячейка с inline-li):
                                 при нехватке места пункты переносятся */
  align-items: center;
  row-gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hdr-nav-list li { padding: 0 15px; white-space: nowrap; }
.hdr-nav-list li:first-child { padding-left: 0; }
.hdr-nav-list li:last-child  { padding-right: 0; }
.hdr-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
  text-decoration: none;
  transition: color .3s ease-in-out;
}
.hdr-nav-link:hover,
.hdr-nav-link:focus-visible,
.hdr-nav-link.is-active { color: var(--c-accent-h); }

.hdr-right {
  display: flex;
  align-items: center;
  gap: 30px;                  /* t228__rightcontainer: gap 30px */
  margin-left: auto;
  padding-left: 25px;         /* t228__rightcontainer: margin-left 25px */
  flex-shrink: 0;
}
.hdr-mail {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
}
.hdr-buttons {
  display: flex;
  align-items: center;
  gap: 10px;                  /* t228__right_buttons_wrap: gap 10px */
}
/* Телефон — «кнопка» без фона и рамки (t-btnflex_type_button: белый текст) */
.hdr-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 30px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 5px;
}
/* «Заказать звонок» — синяя #0051ff, радиус 5px, t-btnflex_sm */
.hdr-call {
  height: 45px;
  padding: 0 30px;
  border-radius: 5px;
  background-color: var(--c-accent-h);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* 960-1199px: как у Tilda при <1200 — отступы бара 20px, лого 15px,
   боковые паддинги кнопок 25px */
@media (max-width: 1199px) {
  .hdr-bar-desktop { padding: 0 20px; }
  .hdr-bar-desktop .hdr-logo { margin-right: 15px; }
  .hdr-right { gap: 20px; padding-left: 20px; }
  .hdr-phone { padding: 0 25px; }
  .hdr-call  { padding: 0 25px; }
}

/* ---------------------------------------------------------------------
   Мобильный бар (<=959px)
--------------------------------------------------------------------- */
.hdr-bar-mobile { display: none; }

@media (max-width: 959px) {
  .hdr-bar-desktop { display: none; }

  .hdr-bar-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;               /* tmenu-mobile: min-height 64px */
    padding: 0 20px;
    background-color: var(--c-dark);
  }
  .hdr-bar-mobile .hdr-logo { line-height: 1.2; }

  .hdr-mob-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hdr-mob-phone {                /* телефон виден только <480px */
    display: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--c-white);
    text-decoration: none;
    white-space: nowrap;
  }

  .hdr-burger {
    position: relative;
    display: block;
    width: 28px;                  /* t-menuburger: 28x20, полоски 3px */
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
  }
  .hdr-burger-lines { display: block; position: absolute; inset: 0; }
  .hdr-burger-lines span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--c-white);
    transition: .25s ease-in-out;
  }
  .hdr-burger-lines span:nth-child(1) { top: 0; }
  .hdr-burger-lines span:nth-child(2),
  .hdr-burger-lines span:nth-child(3) { top: 8px; }
  .hdr-burger-lines span:nth-child(4) { top: 16px; }
  /* лёгкое «сжатие» полосок при наведении, как у t-menuburger_first */
  .hdr-burger:hover .hdr-burger-lines span:nth-child(1) { transform: translateY(1px); }
  .hdr-burger:hover .hdr-burger-lines span:nth-child(4) { transform: translateY(-1px); }

  .hdr-burger-img { display: none; }
}

/* <480px: бар 50px — лого 19px + телефон + иконка menu.svg 33x33 (T396) */
@media (max-width: 479px) {
  .hdr-bar-mobile { height: 50px; padding: 0 10px; }
  .hdr-bar-mobile .hdr-logo { font-size: 19px; }
  .hdr-mob-phone { display: block; }
  .hdr-burger { width: 33px; height: 33px; }
  .hdr-burger-lines { display: none; }
  .hdr-burger-img { display: block; width: 33px; height: 33px; }
}

/* ---------------------------------------------------------------------
   Выезжающая панель бургер-меню (T450): СПРАВА, max-width 260px,
   фон #292929, оверлей rgba(0,0,0,.6). Скрыта по умолчанию;
   JS добавляет .is-open на .js-mobile-menu.
--------------------------------------------------------------------- */
.hdr-menu {
  position: fixed;
  inset: 0;
  z-index: 2100;                            /* выше шапки */
  visibility: hidden;                       /* «изначально скрыта классом» */
  transition: visibility 0s linear .3s;
}
.hdr-menu.is-open { visibility: visible; transition-delay: 0s; }
@media (min-width: 960px) { .hdr-menu { display: none; } }

.hdr-menu-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .6);      /* t450__overlay_bg: #000, .6 */
  opacity: 0;
  transition: opacity .3s ease-in-out;
  cursor: pointer;
}
.hdr-menu.is-open .hdr-menu-overlay { opacity: 1; }

.hdr-menu-panel {
  position: absolute;
  top: 0;
  right: 0;                     /* у t450 без t450__left — панель справа */
  bottom: 0;
  width: 100%;
  max-width: 260px;             /* inline-стиль оригинала */
  background-color: var(--c-dark);
  overflow-y: auto;
  transform: translateX(100%);  /* выезжает справа */
  transition: transform .3s ease-in-out;
}
.hdr-menu.is-open .hdr-menu-panel { transform: translateX(0); }

/* Кнопка «крестик»: квадрат 40x40 в правом верхнем углу (top/right 5px),
   фон #292929, иконка 24x20 из полосок 2px (t450__close) */
.hdr-menu-close {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background-color: var(--c-dark);
  cursor: pointer;
}
.hdr-menu-close-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 20px;
}
.hdr-menu-close-icon span {
  position: absolute;
  top: 8px;                     /* как t450_opened: полоски по центру 20px */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--c-white);
}
.hdr-menu-close-icon span:nth-child(1) { transform: rotate(45deg); }
.hdr-menu-close-icon span:nth-child(2) { transform: rotate(-45deg); }

/* Контейнер панели: t450__container — flex-колонка на всю высоту,
   padding 48px 40px 38px (42px 25px 25px при <640) */
.hdr-menu-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 48px 40px 38px;
}
@media (max-width: 639px) {
  .hdr-menu-inner { padding: 42px 25px 25px; }
}

.hdr-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hdr-menu-list li { margin-bottom: 15px; }
.hdr-menu-list li:last-child { margin-bottom: 0; }
.hdr-menu-link {
  display: inline-block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-white);
  text-decoration: none;
}

/* Низ панели прижат к низу (t450__rightside: margin-top auto) */
.hdr-menu-bottom { margin-top: auto; }

/* Phone / Telegram / WhatsApp — белые кружки 30px */
.hdr-menu-social {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
}
.hdr-menu-social a { display: block; width: 30px; height: 30px; }
.hdr-menu-social svg { display: block; width: 30px; height: 30px; }

/* «Заказать звонок» в панели: как глобальная .btn (фон #1d5be0, радиус 10px,
   hover #0051ff), но t-btnflex_sm: h45 (h50 при <480), 14px, padding 0 24px */
.hdr-menu-btn {
  height: 45px;
  padding: 0 24px;
  margin-top: 25px;
  font-size: 14px;
  align-self: flex-start;
}
@media (max-width: 479px) {
  .hdr-menu-btn { height: 50px; }
}

/* ==================== hero.css ==================== */
/* ============ ГЕРОЙ: первый экран (Zero-блок rec871521164) ============ */
/* Артборд: 768px (≥960), 778px (480–959), 842px (≤479); фон #f6f6f6.
   Композиция: скруглённая фоновая карточка 98%×680 + белая плашка,
   наезжающая на её нижний край (отрицательный margin вместо absolute). */

.hero {
  background-color: var(--c-bg);
  padding: 20px 0 1px; /* 20px до карточки; 1px = фон под плашкой до низа артборда (768) */
}

/* --- Фоновая карточка с фото --- */
.hero-stage {
  width: 98%;
  height: 680px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  background: url("../img/hero-bg.jpg") center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 139px; /* заголовок: top 159 артборда − 20 */
  text-align: center;
}

.hero-title {
  font-size: 96px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-white);
}
.hero-title-accent { color: #00ec8a; }

.hero-subtitle {
  margin-top: 10px;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-white);
}

.hero-note {
  margin-top: 60px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--c-white);
}

/* --- Форма: телефон + кнопка (горизонтальная) --- */
.hero-form {
  display: flex;
  gap: 10px;
  width: 515px;
  max-width: 100%;
  margin-top: 38px;
}
.hero-form-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 60px;
  padding: 0 20px;
  background: transparent;
  border: 1px solid var(--c-white);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
  font-size: 14px;
  font-weight: 300;
  color: var(--c-white);
  outline: none;
}
.hero-form-input::placeholder { color: var(--c-white); opacity: .55; }
.hero-form-btn {
  flex: 0 0 250px;
  width: 250px;
  height: 60px;
  border: 0;
  border-radius: var(--r-sm);
  background-color: var(--c-accent-h); /* #0051ff */
  color: var(--c-white);
  font-size: 16px;
  font-weight: 400;
  transition: background-color .2s ease-in-out;
}
.hero-form-btn:hover,
.hero-form-btn:focus-visible { background-color: #0047df; }

/* --- Белая плашка с 5 пунктами --- */
.hero-plate {
  position: relative; /* поверх низа карточки */
  width: 1160px;
  height: 160px;
  margin: -93px auto 0; /* низ карточки 700 − верх плашки 607 */
  padding: 40px 32px 0; /* иконки на 40px от верха плашки */
  border-radius: var(--r-sm);
  background-color: var(--c-white);
  box-shadow: 0 4px 19px rgba(242, 242, 242, .3);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.hero-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px; /* иконка 647 → текст 686 (19 + 20) */
  width: 178px;
  flex-shrink: 0;
}
.hero-feat-icon {
  display: block;
  width: 19px;
  height: 19px;
}
.hero-feat-text {
  width: 100%;
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  color: #1b1b1b;
  text-align: center;
}

/* ============ 960–1199: та же композиция, плашка 960 ============ */
@media (max-width: 1199px) {
  .hero-plate { width: 960px; }
}

/* ============ 640–959: артборд 778, плашка 640×221, пункты 3+2 ============ */
@media (max-width: 959px) {
  .hero { padding-bottom: 0; } /* плашка заканчивается ровно на низе артборда */

  .hero-title { font-size: 80px; }
  .hero-subtitle { font-size: 35px; }
  .hero-note { margin-top: 43px; font-size: 24px; }

  .hero-plate {
    width: 640px;
    height: 221px;
    margin-top: -143px; /* низ карточки 700 − верх плашки 557 */
    padding: 30px 16px 0;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    column-gap: 10px;
    row-gap: 19px; /* ряд 1: 587/626, ряд 2: 677/716 */
  }
}

/* ============ 480–639: плашка 480, форма в столбик ============ */
@media (max-width: 639px) {
  .hero-title { font-size: 60px; }
  .hero-subtitle { margin-top: 13px; font-size: 25px; }
  .hero-note { margin-top: 34px; font-size: 18px; }

  .hero-form {
    flex-direction: column;
    gap: 20px;
    width: 357px;
    margin-top: 43px;
  }
  .hero-form-input { flex: 0 0 auto; width: 100%; }
  .hero-form-btn { flex-basis: auto; width: 100%; }

  .hero-plate {
    width: 480px;
    padding: 30px 4px 0;
    column-gap: 8px;
  }
  .hero-feat { width: 150px; }
}

/* ============ ≤479: артборд 842, плашка 95%×285, пункты 2+1+2 ============ */
@media (max-width: 479px) {
  .hero-stage { padding-top: 99px; } /* заголовок: top 119 − 20 */

  .hero-title { font-size: 50px; line-height: 1; max-width: 205px; }
  .hero-subtitle { margin-top: 9px; font-size: 20px; max-width: 238px; }
  .hero-note { margin-top: 25px; font-size: 16px; max-width: 293px; }

  .hero-form { width: 300px; margin-top: 21px; }

  .hero-plate {
    width: 95%;
    height: 285px;
    padding: 30px 0 0;
    row-gap: 12px;
  }
  .hero-feat { width: calc(50% - 5px); }
  /* порядок оригинала на 320: (Ведем, Оздоравливаем) / (Сокращаем) / (Снижаем, Оптимизируем) */
  .hero-feat--acc    { order: 1; }
  .hero-feat--health { order: 2; }
  .hero-feat--save   { order: 3; width: 100%; }
  .hero-feat--risk   { order: 4; }
  .hero-feat--tax    { order: 5; }
}

/* ==================== about.css ==================== */
/* ============ Секция «О НАС» (id="about") ============ */
/* Серый спейсер над секцией из оригинала (rec871528678): 100px, 90 @≤959, 80 @≤639 */
.about {
  padding-top: 100px;
  background-color: var(--c-bg);
}

/* Заголовок «О нас» в оригинале идет вплотную к карточкам (pt/pb записи = 0),
   оптический зазор дает только line-height заголовка — поэтому margin-top: 0 */
.about-grid {
  margin-top: 0;
  display: grid;
  /* сетка 1200: 400 | 340 | 400, зазоры 10 (в контейнере 1160 — точно как в оригинале) */
  grid-template-columns: 400fr 340fr 400fr;
  gap: 10px;
}

/* Карточки-списки: подложки — декоративные картинки (иконки «рукопожатие»/«знак качества»),
   текст поверх — живой HTML (в оригинале так же: текст отдельными элементами над фоном) */
.about-card {
  min-height: 420px;
  /* нижний паддинг символический: высоту держит min-height (в оригинале высота фиксированная,
     текст заканчивается свободно) — иначе на узких сетках карточка вырастала бы выше 420 */
  padding: 40px 30px 6px;
  border-radius: var(--r-sm);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--c-white);
}
/* фолбэки под картинками (зеленый — из оригинала, синий — в тон картинке) */
.about-card--green { background-color: #13af6e; }
.about-card--blue  { background-color: var(--c-accent); }

/* Заголовок карточки: верх 40px; список в оригинале зафиксирован на 236px от верха
   карточки — резервируем зону заголовка через min-height (236 - 40 = 196) */
.about-card-title {
  min-height: 196px;
  max-width: 340px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-white);
}

.about-card-list {
  max-width: 340px;
  padding-left: 20px; /* возвращаем маркеры после глобального сброса списков */
  list-style: disc outside;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

/* Фото в центре */
.about-photo {
  width: 100%;
  height: 420px;
  border-radius: var(--r-sm);
  object-fit: cover;
  object-position: center center;
}

/* ---------- ≤1199: сетка 960 — пропорции 345 | 238 | 345, зазор ~7 ---------- */
@media (max-width: 1199px) {
  .about-grid { grid-template-columns: 345fr 238fr 345fr; gap: 7px; }
  .about-card { padding: 40px 20px 6px; }
  .about-card--green .about-card-title { max-width: 287px; }
  .about-card--blue  .about-card-list  { max-width: 314px; }
}

/* ---------- ≤959: столбик (карточка 268 / фото 453 / карточка 268), ширина 620 ---------- */
@media (max-width: 959px) {
  .about { padding-top: 90px; }
  .about-grid {
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
    gap: 15px;
  }
  .about-card { min-height: 268px; padding: 30px 20px 6px; }
  /* заголовок с 30px, список со 128px от верха карточки: 128 - 30 = 98 */
  .about-card-title { min-height: 98px; }
  .about-card--green .about-card-title { max-width: 454px; }
  .about-card--green .about-card-list  { max-width: 529px; }
  .about-card--blue  .about-card-list  { max-width: 510px; }
  /* в оригинале на этом диапазоне фон фото: size 100% (по ширине), сдвиг 15.454% по Y —
     при пропорциях фото 1020x1260 cover масштабирует так же, по ширине */
  .about-photo { height: 453px; object-position: 0 15.454%; }
}

/* ---------- ≤639: столбик 460, фото 314 ---------- */
@media (max-width: 639px) {
  .about { padding-top: 80px; }
  .about-grid { grid-template-columns: minmax(0, 460px); }
  .about-card--green .about-card-title { max-width: 423px; }
  .about-photo { height: 314px; }
}

/* ---------- ≤479: карточки почти во всю ширину окна (~94%), высоты 283 ---------- */
@media (max-width: 479px) {
  .about-grid {
    grid-template-columns: 1fr;
    /* выходим за паддинги контейнера: остается ~10px до краев окна, как 94% у оригинала */
    margin-left: -10px;
    margin-right: -10px;
  }
  .about-card { min-height: 283px; padding: 20px 20px 6px; }
  .about-card--blue { padding-top: 30px; }
  /* список со 110px от верха карточки: зеленая 110 - 20 = 90, синяя 110 - 30 = 80 */
  .about-card-title { font-size: 20px; min-height: 90px; }
  .about-card--blue .about-card-title { min-height: 80px; }
  .about-card--green .about-card-title { max-width: 243px; }
  .about-card--blue  .about-card-title { max-width: 259px; }
  .about-card-list { font-size: 15px; }
  .about-card--green .about-card-list { max-width: 324px; }
  .about-card--blue  .about-card-list { max-width: 281px; }
  .about-photo { height: 283px; object-position: 49.877% 29.273%; }
}

/* ==================== services.css ==================== */
/* ============================================================
   Секция «НАШИ УСЛУГИ» (#services)
   Оригинал: rec871532811 (t396-спейсер 140/120/100/90) +
   rec871533248 (t795 «Наши услуги») + rec1861939281 (t795 подзаголовок) +
   rec871533618 (t1072, ряд 3 карточки) + rec871540269 (t396-спейсер 40) +
   rec871538075 (t1072, ряд 2 карточки)
   ============================================================ */

.services {
  background-color: var(--c-bg);
  /* серый спейсер перед заголовком (t396: 140px на десктопе) */
  padding-top: 140px;
}

/* --- Заголовок и подзаголовок --- */

.services-title {
  margin-bottom: 40px; /* t795__title */
}

.services-subtitle {
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.23;
  text-transform: uppercase;
  text-align: left;
  color: var(--c-dark);
}

/* --- Сетка карточек: десктоп — ряд 3 + ряд 2 (выравнивание слева) --- */

.services-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3×360px при контенте 1160 */
  gap: 40px;                             /* желоба Тильды 20+20 */
  align-items: stretch;                  /* равная высота карточек в ряду */
}

.services-row--second {
  margin-top: 40px; /* t396-спейсер между рядами, 40px на всех брейкпоинтах */
}

/* --- Карточка-тариф (t1072) --- */

.services-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-sm); /* 10px, t1072__content */
  overflow: hidden;
}

/* синяя шапка */
.services-card-head {
  background-color: var(--c-accent); /* #1d5be0 */
  padding: 0 20px 10px;              /* t1072__header */
}

.services-card-title {
  padding: 18px 0;
  border-bottom: 1px solid var(--c-accent-h); /* #0051ff — линия под заголовком */
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-white);
}

/* белая часть; flex-колонка прижимает кнопку к низу */
.services-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: var(--c-white);
  padding: 1px 20px 0; /* t1072__footer (1px сверху — как в оригинале) */
}

/* текстовый блок растягивается — кнопки соседних карточек на одном уровне */
.services-card-text {
  flex: 1 1 auto;
  margin: 34px 0 3px; /* t-card__descr */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-dark);
}

/* список фич: в оригинале маркеры отключены — просто строки с шагом 9px */
.services-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-card-list li {
  margin-bottom: 9px;
}

/* цена: зелёная, 20px, идёт после двух <br> внутри текстового блока */
.services-card-price {
  font-size: 20px;
  color: #13b06f;
}

.services-card-btnwrap {
  padding: 33px 0 40px; /* t1072__buttonwrapper */
}

/* кнопка карточки: зелёная (модификатор глобальной .btn) */
.services-btn {
  padding: 0 60px;            /* t-btnflex_md на десктопе */
  background-color: #22ba7b;
  transition: background-color 0.2s ease-in-out;
}

.services-btn:hover,
.services-btn:focus-visible {
  background-color: #159861;
}

/* --- ≤1199: сетка Тильды 960 — карточки 300px, желоба 20px --- */
@media screen and (max-width: 1199px) {
  .services {
    padding-top: 120px;
  }

  .services-inner {
    max-width: 940px; /* 3×300 + 2×20 — контент как в t-container 960 */
    margin: 0 auto;
  }

  .services-row {
    gap: 20px;
  }

  .services-btn {
    padding: 0 45px;
  }
}

/* --- ≤959: карточки в столбик, колонка 600px по центру --- */
@media screen and (max-width: 959px) {
  .services {
    padding-top: 100px;
  }

  .services-inner {
    max-width: 600px; /* контент t-container 640 c полями колонок 20px */
  }

  .services-row {
    grid-template-columns: 1fr;
    gap: 35px; /* t1072__col margin-bottom 35px */
  }
}

/* --- ≤639 --- */
@media screen and (max-width: 639px) {
  .services {
    padding-top: 90px;
  }

  .services-btn {
    padding: 0 30px;
  }
}

/* --- ≤479 --- */
@media screen and (max-width: 479px) {
  .services-subtitle {
    font-size: 18px;
  }
}

/* ==================== compare.css ==================== */
/* ============ Секция «ПОЧЕМУ ПЕРЕХОДЯТ НА АУТСОРС?» (id=outsourcing) ============
   Оригинал: серый спейсер 140px + заголовок t795 + zero-блок rec871541428 (артборд 700px).
   Две карточки 360×700 (серая #e8e8e8 и зелёная #21ba7a, r10) с 8 рядами:
   шапка (30/20 + линия на 70px) и 7 критериев (18px до подписи, 10px до текста,
   20px до 2px-разделителя). Пересобрано на grid: 2 колонки × 8 общих рядов
   (grid-auto-flow:column), разделители — border-bottom ячеек, всегда на одной высоте. */

/* Спейсер (rec871539532): 140px, на брейкпоинтах 120/100/90/90 */
.compare { background: var(--c-bg); padding-top: 140px; }

/* У t795 заголовок имеет нижний отступ 40px до артборда */
.compare-title { margin-bottom: 40px; }

.compare-zone { position: relative; overflow: hidden; }

/* Декоративные фото у краёв окна (в оригинале container:window, z-index выше карточек) */
.compare-photo {
  position: absolute;
  z-index: 2;
  width: 360px;
  height: 300px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.compare-photo--left  { left: -15px;  top: 100px; }
.compare-photo--right { right: -15px; top: 300px; }

/* Сравнительная «таблица»: первые 8 ячеек DOM — колонка «Штатный бухгалтер»,
   следующие 8 — «Бридж Консалт»; общие grid-ряды выравнивают разделители */
.compare-table {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 360px 360px;
  grid-template-rows: repeat(8, auto);
  grid-auto-flow: column;
  column-gap: 20px;
  justify-content: center;
}

.compare-cell { padding: 18px 30px 20px; min-height: 0; }
.compare-cell--staff  { background: #e8e8e8; border-bottom: 2px solid #d0d0d0; }
.compare-cell--bridge { background: #21ba7a; border-bottom: 2px solid #3fcd92; }

/* Шапки карточек */
.compare-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding-top: 30px;
  padding-bottom: 20px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: #414141;
}
.compare-head.compare-cell--bridge { color: var(--c-white); }

/* Иконки-бейджи по бокам «Бридж Консалт» */
.compare-badge { width: 19px; height: 19px; object-fit: cover; }

/* Подпись критерия и текст */
.compare-crit {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #949494;
}
.compare-cell--bridge .compare-crit { color: #83e3bb; }

.compare-val {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #454545;
}
.compare-cell--bridge .compare-val { color: var(--c-white); }

/* Последний ряд: без разделителя, нижние скругления, отступ до низа карточки */
.compare-cell--last {
  border-bottom: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding-bottom: 34px;
}

/* 980-артборд: фото почти целиком уходят за края окна (видны полосы ~142px) */
@media (max-width: 1199px) {
  .compare { padding-top: 120px; }
  .compare-photo--left  { left: -218px;  top: 61px; }
  .compare-photo--right { right: -218px; top: 402px; }
}

/* 640-артборд: колонки по-прежнему рядом, но 302px; фото скрыты
   (в оригинале выведены за пределы экрана). Высоты рядов фиксируются как
   в оригинале (артборд 700px): тексты плотнее заполняют свои слоты */
@media (max-width: 959px) {
  .compare { padding-top: 100px; }
  .compare-photo { display: none; }
  .compare-table {
    grid-template-columns: 302px 302px;
    grid-template-rows: 72px 104px 76px 90px 90px 90px 76px 102px;
    column-gap: 17px;
  }
  .compare-cell { padding-left: 25px; padding-right: 25px; }
  .compare-cell--last { padding-bottom: 20px; }
  .compare-badge { width: 16px; }
}

/* 480-артборд: колонки складываются в столбик — сначала весь «Штатный бухгалтер»,
   затем целиком «Бридж Консалт» (как в оригинале). Зазор 36px даёт margin-top
   зелёной шапки внутри увеличенного ряда (72+36=108); итог 1436px как артборд */
@media (max-width: 639px) {
  .compare { padding-top: 90px; }
  .compare-table {
    grid-template-columns: 302px;
    grid-template-rows:
      72px 104px 76px 90px 90px 90px 76px 102px
      108px 104px 76px 90px 90px 90px 76px 102px;
  }
  .compare-head.compare-cell--bridge { margin-top: 36px; }
}

/* 320-артборд: зазор между карточками 20px (ряд 72+20=92, итог 1420px),
   бейджи снова 19px */
@media (max-width: 479px) {
  .compare-table {
    grid-template-rows:
      72px 104px 76px 90px 90px 90px 76px 102px
      92px 104px 76px 90px 90px 90px 76px 102px;
  }
  .compare-head.compare-cell--bridge { margin-top: 20px; }
  .compare-badge { width: 19px; }
}

/* ==================== reviews.css ==================== */
/* ============ Секция «ОТЗЫВЫ» (#reviews) ============
   Оригинал: спейсер t396 (140px ≥980 / 100px 640–979 / 90px <640) до заголовка
   и такой же спейсер после кнопки; t795 (заголовок), t650 (карточки), t191 (кнопка).
   t650 — статичная сетка 3 колонки (не слайдер), карточки без теней и аватарок. */

.reviews {
  background-color: var(--c-bg);
  padding-top: 140px;    /* спейсер rec871542974 */
  padding-bottom: 140px; /* спейсер rec871546113 (до секции контактов) */
}

.reviews-title {
  margin-bottom: 40px; /* .t795__title { margin-bottom: 40px } */
}

/* --- Карточки: ≥1200 три колонки по 360px, зазор 40px (t-col margin 20+20) --- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
}

.reviews-card {
  background-color: var(--c-white); /* inline bg #ffffff у .t650__inner-col */
  border-radius: var(--r-sm);       /* #rec871543455 .t650__inner-col { border-radius:10px } */
  padding: 30px 30px 40px;          /* .t650 .t650__text { padding:30px 30px 40px } */
}

.reviews-card-name {
  font-size: 16px;   /* #rec .t-card__title — прибит на всех ширинах */
  font-weight: 400;
  line-height: 1.35; /* .t-name_lg */
  color: var(--c-accent); /* #1d5be0 */
  margin-bottom: 10px;    /* .t650__bottommargin */
}

.reviews-card-text {
  font-size: 14px;   /* #rec .t-card__descr — прибит на всех ширинах */
  font-weight: 400;
  line-height: 1.55; /* .t-text_sm */
  color: #464646;
}

/* --- Кнопка «Оставить отзыв»: t142 flex по центру, отступ записи 30px --- */
.reviews-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px; /* t-rec_pt_30 у rec871545335 */
}

.reviews .reviews-btn {
  padding: 0 60px; /* .t-btnflex_md ≥1200 (высота 60px и цвета — из глобальной .btn) */
}

/* --- ≤1199: зазор колонок 20px (t-col margin 10+10), паддинг кнопки 45px --- */
@media (max-width: 1199px) {
  .reviews-grid { column-gap: 20px; }
  .reviews .reviews-btn { padding: 0 45px; }
}

/* --- ≤959: столбик (t-col 100%), вертикальный зазор 20px, контент ≤600px --- */
@media (max-width: 959px) {
  .reviews {
    padding-top: 100px;   /* спейсер @640–979 */
    padding-bottom: 100px;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
    row-gap: 20px;        /* .t650 .t-card__col { margin-bottom:20px } */
    max-width: 600px;     /* t-container 640 − паддинги колонок 2×20 */
    margin-left: auto;
    margin-right: auto;
  }
  .reviews-card { padding-bottom: 30px; }      /* .t650__text @≤960 */
  .reviews-card-name { margin-bottom: 15px; }  /* .t650__bottommargin @≤960 */
}

/* --- ≤639: спейсеры 90px, межстрочный 1.45, паддинг кнопки 30px --- */
@media (max-width: 639px) {
  .reviews {
    padding-top: 90px;    /* спейсер @480–639 и @320–479 */
    padding-bottom: 90px;
  }
  .reviews-card-text { line-height: 1.45; } /* .t-text_sm @≤640 */
  .reviews .reviews-btn { padding: 0 30px; }
}

/* ==================== contacts.css ==================== */
/* ============ Секция «КОНТАКТЫ» (#contacts) ============
   Оригинал rec871546279 (t555): фон #f6f6f6, pt 0 / pb 45px.
   Слева t-col_6 — контент (вертикально отцентрирован в боксе 400px),
   справа t-col_6 — карта 400px, радиус 10px. */

.contacts {
  background-color: var(--c-bg);
  padding-top: 0;
  padding-bottom: 45px; /* t-rec_pb_45 */
}

/* ≥1200: две колонки по 560px, зазор 40px (t-col_6 margin 20+20) */
.contacts-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

.contacts-info {
  display: flex;
  flex-direction: column;
  justify-content: center; /* .t555__contentwrapper: table-cell middle */
  min-height: 400px;       /* .t555__contentbox { height:400px } */
}

/* Заголовок t555: те же 54/42px uppercase, но слева и с lh 1.17 (.t-heading_sm) */
.contacts .contacts-title {
  text-align: left;
  line-height: 1.17;
  margin: 0 0 30px; /* .t555__title { margin-bottom:30px } */
}

.contacts-text {
  font-size: 16px;   /* #rec .t-text — прибит на всех ширинах */
  font-weight: 400;
  line-height: 1.55; /* .t-text_md */
  color: #464646;
}

.contacts-label { color: var(--c-accent); }      /* span «Адрес:» #1d5be0 */
.contacts-note { font-size: 14px; }              /* подчёркнутые строки графика */
.contacts-link { color: var(--c-accent); }       /* tel / mailto, без подчёркивания */

.contacts-socials {
  display: flex;
  align-items: center;
  gap: 6px;         /* margin 1px+1px у items + &nbsp; между ними */
  margin-top: 30px; /* .t555 .t-sociallinks { margin-top:30px } */
}
.contacts-socials-link {
  display: block;
  width: 30px;
  height: 30px;
}
.contacts-socials-link svg { display: block; }

/* Карта: embed Яндекс.Карт в боксе с фоном ленивой загрузки как у оригинала */
.contacts-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.contacts-map {
  height: 400px;               /* inline height:400px */
  border-radius: var(--r-sm);  /* .t555__map { border-radius:10px } */
  overflow: hidden;
  background-color: #e5e3df;   /* .t555 .t-map-lazyload { background-color:rgb(229,227,223) } */
}

/* --- ≤1199: зазор колонок 20px (t-col margin 10+10) --- */
@media (max-width: 1199px) {
  .contacts-cols { column-gap: 20px; }
}

/* --- ≤959: столбик, контент ≤600px (t-container 640 − 2×20), у текста паддинг 40px --- */
@media (max-width: 959px) {
  .contacts-cols {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    /* колонки в оригинале впритык — row-gap не задаём */
  }
  .contacts-info { padding: 40px; } /* .t555__contentwrapper @≤960 */
}

/* --- ≤639 (в оригинале порог 750): компактный паддинг, карта 300px --- */
@media (max-width: 639px) {
  .contacts-info {
    padding: 30px 20px; /* .t555__contentwrapper @≤750 */
    min-height: 0;      /* .t555__contentbox { height:auto } */
  }
  .contacts .contacts-title { margin-bottom: 24px; } /* .t555__title @≤750 */
  .contacts-text { line-height: 1.45; }              /* .t-text_md @≤640 */
  .contacts-map { height: 300px; }                   /* .t555__map @≤750 */
}

/* ==================== footer.css ==================== */
/* =====================================================================
   ПОДВАЛ (ftr). Оригинал: Tilda T981 rec871550270, фон #292929.
   Метрики сверены с tilda-blocks-page63901379.min.css:
   - t981__wrapper: flex, padding 50px 0, align-items flex-start;
   - лого слева (20px, белый), правая колонка прижата вправо;
   - реквизиты: 14px, weight 600, UPPERCASE, белые, в строку, зазор 15px;
   - документы: 14px, #d4d4d4, подчёркнутые, в строку, зазор 15px,
     БЕЗ маркеров (у t981__secondary-menu ul { list-style:none });
   - <=960: колонки в столбик; <=640: шрифт меню 12px.
===================================================================== */

.ftr {
  background-color: var(--c-dark);
}
.ftr-inner {
  display: flex;
  align-items: flex-start;
  padding-top: 50px;
  padding-bottom: 50px;
}

.ftr-left {
  flex-shrink: 0;
  margin-right: auto;
  padding-right: 50px;
}
.ftr-logo {
  display: inline-block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
}

/* ИНН / КПП / ОГРН — в строку, зазор 15px (t981__menu-item) */
.ftr-req {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.ftr-req-item {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-white);
  text-transform: uppercase;
  margin-right: 15px;
  margin-bottom: 10px;
}
.ftr-req-item:last-child { margin-right: 0; }

/* Документы — строка без маркеров */
.ftr-docs {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftr-docs li { margin-right: 15px; }
.ftr-docs li:last-child { margin-right: 0; }
.ftr-doc-link {
  font-size: 14px;
  line-height: 1.55;
  color: #d4d4d4;
  text-decoration: underline;
  transition: opacity .2s ease-in-out;
}
.ftr-doc-link:hover,
.ftr-doc-link:focus-visible { opacity: .75; }

/* Планшет и уже: в столбик, как t981 при <=960 */
@media (max-width: 959px) {
  .ftr-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .ftr-left {
    margin-right: 0;
    padding-right: 0;
    margin-bottom: 20px;
  }
}

/* Мобильный: шрифт меню 12px (t981 при <=640) */
@media (max-width: 639px) {
  .ftr-req-item { font-size: 12px; }
  .ftr-doc-link { font-size: 12px; }
}

/* ==================== subpages.css ==================== */
/* ============ Подстраницы: политика и спасибо ============ */
.policy { padding: 60px 0; background: var(--c-white); }
.policy .container { max-width: 960px; }
.policy-title { font-size: 34px; font-weight: 500; line-height: 1.25; margin-bottom: 30px; }
.policy-h2 { font-size: 24px; font-weight: 500; margin: 35px 0 15px; }
.policy p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
@media (max-width: 639px) {
  .policy { padding: 40px 0; }
  .policy-title { font-size: 26px; }
  .policy-h2 { font-size: 20px; }
}

.thanks { padding: 120px 0 140px; text-align: center; }
.thanks__title { font-size: 54px; font-weight: 400; text-transform: uppercase; }
.thanks__text { margin-top: 20px; font-size: 20px; line-height: 1.5; }
.thanks__btn { margin-top: 40px; }
@media (max-width: 639px) {
  .thanks { padding: 80px 0 100px; }
  .thanks__title { font-size: 32px; }
  .thanks__text { font-size: 17px; }
}