/* =========================================================
   responsive.css (REORDERED)
   - Правила НЕ удалялись.
   - @media блоки выстроены по убыванию max-width (от большего к меньшему).
   - Внизу добавлен FIX для хедер-бургера, чтобы не ломался ниже 571px.
   - Если увидишь конфликты: ищи пометки NOTE.
   ========================================================= */

/* responsive.css  */

@media (max-width: 1200px) /* and (min-width: 891px) */ {
  :root {
    /* 1200px -> ~126px, 900px -> ~12px */
    --stack-left: clamp(12px, calc(12px + (100vw - 901px) * 0.38), 126px);
  }

  .section-coverage {
    overflow: hidden;
  }

  /* размер маски фиксированный (как в десктопе), а позиция едет вправо */
  .visual-mask,
  .visual-outline {
    -webkit-mask-size: auto 90%;
    mask-size: auto 90%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* плавный сдвиг вправо: к 900px уедет заметно, но без деформаций */
    -webkit-mask-position: calc(5% + clamp(0px, (1200px - 100vw) * 0.12, 90px))
      center;
    mask-position: calc(5% + clamp(0px, (1200px - 100vw) * 0.12, 90px)) center;
  }

  .coverage-text {
    padding: 20px 40px 10px;
    min-width: 400px;
  }

  .coverage-text h3 {
    margin-bottom: 5px;
  }

  /* карточка: 10vw, но не меньше 72px и не больше 120px */
  .contact-card {
    left: clamp(72px, 10vw, 120px);
    transform: none; /* <- важно: иначе -225px утаскивает карточку влево */
  }

  /* Карточка должна жить на той же оси, что и team-text */
  .floating-contact-zone .contact-card {
    left: var(--stack-left) !important;
    transform: none !important; /* чтобы никакие -50% / -225px не сдвигали */
    margin-left: 0 !important; /* на всякий случай */
  }

  /* У родителя не должно быть "скрытых" смещений */
  .floating-contact-zone .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  /* 4) Копирайт: делаем в 2 строки */
  .footer-left {
    justify-content: flex-end;
    padding-right: 40px; /* вместо 55 — иначе сильно "уплывает" */
  }

  .footer-copy-wrap {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 16px 0;
    font-size: 13px;
  }

  .copy-divider {
    display: none; /* в 2 строки разделитель уже не нужен */
  }
}

@media (max-width: 1200px) /*and (min-width: 920px) */ {
  .team-image {
    /* на 1200px ≈ 520px (почти десктоп),
         на 1050px ≈ 420px (должна перестать вылезать шлемом вверх) */
    width: clamp(400px, 43.33vw, 520px);
  }
}

@media (max-width: 1100px) {
  .main-nav ul {
    gap: 8px;
  }

  .main-nav a {
    padding: 6px 10px;
    font-size: 11px;
  }

  .hero-content {
    flex: 0 0 65%; /* Даем чуть больше места текстовой части */
    padding-right: 2%;
  }

  .hero-content-inner {
    /* Уменьшаем максимальную ширину карточки, чтобы она стала компактнее */
    max-width: 550px;
    /* Сдвигаем её чуть вправо, освобождая место курьеру */
    margin: 0;
    border-radius: 30px;
  }

  .hero {
    height: 54.5vw;
    min-height: 400px;
    max-height: 600px;

    /* МАГИЯ ОБРЕЗКИ: */
    /* cover заставляет картинку всегда заполнять блок без искажений.
       Она будет просто "уходить" за края контейнера */
    background-size: cover;

    /* Сдвигаем фокус, чтобы при обрезке мы видели руку, 
       а пустое поле справа уходило за экран первым */
    background-position: 20% center;

    transition: height 0.1s ease-out;
  }

  .hero-cta {
    /* Кнопка плавно сужается от 360px до 240px к мобильным устройствам */
    /* Вместо жестких 360px даем ей уменьшаться */
    width: 100%;
    max-width: clamp(230px, 30vw, 360px);
    padding: clamp(10px, 1.5vw, 16px) 20px;
    font-size: clamp(13px, 1.2vw, 16px);

    transition: all 0.2s ease;
  }
}

@media (max-width: 976px) {
  .header-top {
    gap: 6px;
  }
  .header-tagline {
    font-size: 11px;
  }
}

@media (max-width: 900px) /*and (min-width: 769px) */ {
  :root {
    /* 600px -> ~560px к 768 */
    --coverage-h: clamp(560px, calc(600px - (900px - 100vw) * 0.3), 600px);
  }

  /* Секция 100%: не даём ей снова "гулять" */
  .section-coverage {
    overflow: hidden;
  }

  /* ВАЖНО: на этом диапазоне оставляем маску в состоянии 900px
     (без доп. сдвигов/масштабов), чтобы она была стабильной сценой */
  .visual-mask,
  .visual-outline {
    -webkit-mask-size: auto 90%;
    mask-size: auto 90%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* ключ: всегда по центру => симметричные поля слева/справа */
    -webkit-mask-position: 50% center;
    mask-position: 50% center;
  }

  /* 600px высота секции: 90% = 540px на ~900, хотим уйти к ~480px на 768 */
  .visual-mask {
    -webkit-mask-size: auto
      clamp(480px, calc(480px + (100vw - 768px) * 0.455), 540px);
    mask-size: auto clamp(480px, calc(480px + (100vw - 768px) * 0.455), 540px);
  }

  /* обводку делаем чуть крупнее, чтобы “золото” не съедалось */
  .visual-outline {
    -webkit-mask-size: auto
      clamp(484px, calc(484px + (100vw - 768px) * 0.455), 544px);
    mask-size: auto clamp(484px, calc(484px + (100vw - 768px) * 0.455), 544px);
  }

  .coverage-text {
    padding: 20px 40px 10px;

    left: auto; /* отключаем левую привязку 55% */
    right: 0;
    max-width: 430px;
    width: min(460px, calc(100vw - (2 * clamp(12px, 3vw, 28px))));
    box-sizing: border-box; /* чтобы padding входил в width */
  }

  .coverage-text h3 {
    margin-bottom: 5px;
  }
}

@media (max-width: 858px) /* and (min-width: 769px) */ {
  :root {
    /* ширина "стека" (текстовый блок + карточка): 450 -> 360 */
    --stack-w: clamp(460px, calc(460px + (100vw - 768px) * 0.25), 480px);

    /* внутренние паддинги карточки: чуть сжимаем, но не "впритык" */
    --card-pad-x: clamp(28px, calc(28px + (100vw - 770px) * 0.25), 50px);
    --card-pad-t: clamp(28px, calc(28px + (100vw - 770px) * 0.14), 40px);
    --card-pad-b: clamp(22px, calc(22px + (100vw - 770px) * 0.148), 35px);
  }

  .advantage-card {
    padding: 30px 15px;
  }

  /* КАРТОЧКА: та же ширина + плавные паддинги */
  .floating-contact-zone .contact-card {
    width: var(--stack-w);
    padding: var(--card-pad-t) var(--card-pad-x) var(--card-pad-b);
    left: var(--stack-left); /* ось остаётся твоей */
  }

  .footer-logo-av img {
    height: auto; /* убираем фикс высоту на узких */
    width: clamp(72px, 14vw, 96px); /* и даём адекватную ширину */
    object-fit: contain;
  }
}

@media (max-width: 858px) {
  .header-top::before {
    width: 280px;
  }

  .header-tagline {
    display: none;
  }

  .header-main {
    flex-direction: column; /* !!! вместо row */
    justify-content: flex-end;
    align-items: flex-end;
    gap: 8px; /* можно поменьше, чем 16 */
  }

  /* Если на этом этапе курьер всё равно перекрыт, 
     можно сместить фон самого блока .hero влево */
  .hero {
    background-position: -50px center;
  }

  .section-reach {
    padding: 40px 10px;
    margin-bottom: 40px;
  }

  .reach-container {
    padding: 40px 20px;
    background-attachment: scroll; /* Отключаем параллакс */
  }

  /* КАРТОЧКИ */
  .reach-cards-grid {
    gap: 10px;
  }

  .form-privacy-check {
    padding: 0;
    align-items: center;
  }

  .site-footer {
    padding-top: 70px; /* подгони: 70–120 */
  }

  /* и не трогаем девушку margin’ами */
  .footer-left {
    margin-top: 0;

    justify-content: center; /* больше не вправо */
    padding: 14px 16px; /* меньше боковых */
  }

  /* Создаем линию через псевдоэлемент для гибкого управления градиентом */
  .footer-left::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%; /* Линия на всю ширину блока */
    height: 1px;
    /* Градиент: прозрачный слева (под карточкой) -> полупрозрачный белый справа */
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.2) 100%
    );
  }

  .footer-copy-wrap {
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap; /* важно: не давать ломаться в 2 строки */
    gap: 10px;
    padding: 10px 0;
  }

  /* если линия мешает/лезет под карточку — временно выключаем на этом диапазоне */
  .footer-left::before {
    opacity: 0.35; /* или display:none; если хочется проще */
  }

  /* .copy-divider {
    display: none;
  }


  .footer-copy::after {
    content: "|";
    opacity: 0.2;
    margin: 0 12px;
  }*/
}

@media (max-width: 800px) {
  .section-team {
    overflow: hidden;
  }

  /* чем уже экран, тем сильнее уводим курьера вправо */
  .team-image {
    right: clamp(-260px, calc((800px - 100vw) * -0.6), 0px);
  }
}

@media (max-width: 770px) and (min-width: 481px) {
  :root {
    /* 360 -> 312 */
    --stack-w: clamp(460px, calc(460px + (100vw - 768px) * 0.25), 480px);

    --card-pad-x: clamp(22px, calc(22px + (100vw - 480px) * 0.02), 28px);
    --card-pad-t: clamp(24px, calc(24px + (100vw - 480px) * 0.014), 28px);
    --card-pad-b: clamp(20px, calc(20px + (100vw - 480px) * 0.007), 22px);
  }

  .floating-contact-zone .contact-card {
    width: var(--stack-w);
    padding: var(--card-pad-t) var(--card-pad-x) var(--card-pad-b);
    left: var(--stack-left);
  }
}

/* =========================================================
   NOTE (CANDIDATE FOR REMOVAL): этот диапазон 571–768px.
   Ниже 571px он НЕ работает, из-за этого хедер может
   возвращаться к десктопному горизонтальному меню.
   Внизу файла добавлен FIX-блок для <=768px без min-width.
   ========================================================= */
@media (max-width: 768px) /* and (min-width: 571px) */ {
  .main-nav a {
    width: 100%;
    text-align: center;
    padding: 10px 20px;
    font-size: 13px;
  }

  /* =========================================================
   FIX: HEADER BURGER <= 768px (без min-width)
   Причина: раньше бургер-режим был ограничен 571–768px,
   и ниже 571px меню могло возвращаться в горизонтальный вид.
   Этот блок стоит В КОНЦЕ, чтобы побеждать по каскаду.
   ========================================================= */

  .nav-toggle {
    display: inline-flex;
  }

  .main-nav ul {
    margin-top: 40px; /* сильнее опускаем вниз от крестика */

    min-width: 200px;

    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    flex-direction: column;
    gap: 18px;
    background: #ffffff;
    padding: 22px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    width: 220px;
    z-index: 9999;
  }

  .section-reach {
    padding: 40px 40px;
  }

  .reach-container {
    padding: 40px 40px;
    background-attachment: scroll; /* Отключаем параллакс */
  }

  .reach-cards-grid {
    grid-template-columns: 1fr; /* В одну колонку */
    gap: 15px;
  }

  /* 600px (на 768) -> 520px (на 570) */
  .section-coverage {
    height: clamp(440px, calc(440px + (100vw - 570px) * 0.606), 560px);
    overflow: hidden;
  }

  /* фиксируем сцену по центру и уменьшаем её “высоту” плавно */
  .visual-mask,
  .visual-outline {
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% center;
    mask-position: 50% center;
  }

  /* маска: 480px (на 768) -> 440px (на 570) */
  .visual-mask {
    -webkit-mask-size: auto
      clamp(440px, calc(440px + (100vw - 570px) * 0.202), 480px);
    mask-size: auto clamp(440px, calc(440px + (100vw - 570px) * 0.202), 480px);
  }

  /* обводка чуть больше */
  .visual-outline {
    -webkit-mask-size: auto
      clamp(444px, calc(444px + (100vw - 570px) * 0.202), 484px);
    mask-size: auto clamp(444px, calc(444px + (100vw - 570px) * 0.202), 484px);
  }
}

@media (max-width: 768px) {
  :root {
    /* ~560px -> ~460px к 540 */
    --coverage-h: clamp(460px, calc(560px - (768px - 100vw) * 0.44), 560px);
    /* плавно “опускаем” текстовый блок, чем меньше экран — тем ниже */
    --cov-text-drop: clamp(0px, (768px - 100vw) * 0.18, 40px);
  }

  .header-main {
    gap: 0;
  }

  .site-header {
    padding: 6px 6px 0 0;
  }

  .board-logo-link {
    margin-top: 100px;
  }

  /* === приведение выпадашек меню к единому стилю ===== */

  :root {
    /* размер почти “как экран”, но не на 100% */
    --burgerW: min(84vw, 380px);
    --burgerPad: 18px;
    --burgerRadius: 22px;
    --burgerGap: 14px;

    /* типографика — чуть тоньше */
    --burgerFs: 15px;
    --burgerFw: 500;
    --burgerLs: 0.16em;

    /* короткое подчёркивание */
    --uW: 28px;
    --uH: 2px;
    --uGap: 8px;
    --uOpacity: 0.55;
  }

  /* ---------- HEADER POPUP (светлый) ---------- */
  .main-nav.main-nav--open ul {
    /* важно: убираем “перекосы” от прошлых трансформов */
    transform: none !important;

    min-width: 220px; /* тут поправить ширину !!!*/
    padding: var(--burgerPad);
    border-radius: var(--burgerRadius);

    display: flex;
    flex-direction: column;
    align-items: stretch; /* ключ к “кнопкам на всю ширину” */
    gap: var(--burgerGap);

    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);

    /* если где-то было “сплющивание” */
    height: auto !important;
    min-height: auto !important;
  }

  .main-nav.main-nav--open ul a {
    width: 100%;
    display: flex; /* вместо inline-flex */
    justify-content: center;
    text-align: center;

    padding: 14px 8px; /* высота как у футера (подстрой потом) */
    font-weight: 500; /* тоньше, как ты хочешь */
    letter-spacing: 0.16em;
  }
  .main-nav.main-nav--open ul a:hover,
  .main-nav.main-nav--open ul a:focus-visible {
    opacity: 1;
  }
  .main-nav.main-nav--open ul a::after {
    background: #f1ddc0; /* золотая линия как в дизайне */
  }

  .main-nav.main-nav--open ul li {
    width: 100%;
  }

  /* Tablón в поповере НЕ должен быть “пилюлей” как на десктопе */
  .main-nav.main-nav--open .board-cta-tablon {
    margin-left: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    padding: 14px 8px !important;

    color: rgba(59, 113, 136, 0.95) !important; /* как в футере */
  }

  /* вернуть underline для Tablón (на десктопе он выключен !important) */
  .main-nav.main-nav--open .board-cta-tablon::after {
    display: block !important;
    background: rgba(59, 113, 136, 0.7) !important;
  }

  /* ==== section reach ===== */

  .section-reach {
    flex-direction: column; /* вместо ряда */
    padding: 40px 40px 80px;
    gap: 4px;
    max-width: 100%;
  }

  .section-reach .reach-image,
  .section-reach .reach-text {
    order: initial; /* естественный порядок */
    flex: 1 1 auto;
    max-width: 100%;
  }

  /* 1) Сначала картинка */
  .section-reach .reach-image {
    order: 1;
  }

  /* 2) Потом текст и кнопка */
  .section-reach .reach-text {
    order: 2;
    /* внутри — левый край */
    text-align: left;

    /* снаружи — блок по центру белого поля */
    max-width: 420px;
    margin-inline: auto;

    gap: 12px;
  }

  /* 768 -> 481: продолжаем плавно уменьшать сцену СИММЕТРИЧНО, без сдвига влево */
  .visual-mask {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 768 -> ~480px, 570 -> ~353px, 480 -> ~298px (не упираемся рано в минимум) */
    -webkit-mask-size: auto clamp(280px, 62vw, 480px);
    mask-size: auto clamp(280px, 62vw, 480px);

    -webkit-mask-position: 50% center;
    mask-position: 50% center;
  }

  .visual-outline {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* чуть больше, чтобы “золото” оставалось по краю */
    -webkit-mask-size: auto clamp(284px, 62vw, 484px);
    mask-size: auto clamp(284px, 62vw, 484px);

    -webkit-mask-position: 50% center;
    mask-position: 50% center;
  }

  .reach-cta {
    width: min(92%, 420px);
    margin-left: 0;
    margin-right: 0;
    padding: 14px 16px;
    font-size: 14px;
  }

  .section-team {
    overflow: hidden;
  }

  .team-image {
    /* 1) фиксируем позицию относительно левого края,
            чтобы курьер НЕ мог ехать на текст */
    left: clamp(32%, calc(46% - ((768px - 100vw) * 0.01)), 46%);
    right: auto;

    /* 2) продолжаем уводить вправо — теперь через translateX */
    transform: translateX(clamp(0px, calc((768px - 100vw) * 0.6), 260px));
  }

  .footer-copy-wrap {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .footer-copy {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
    font-size: 12px;
  }

  /* Контейнер попапа */
  .footer-menu {
    display: none; /* по умолчанию скрыто */
    position: absolute;
    bottom: 100%; /* открываемся ВВЕРХ над бургером */
    right: 0;
    margin-bottom: 12px;

    padding: 18px 18px 20px;
    border-radius: 20px 20px 0 20px;
    background-color: #2b2616; /* тот же тёмный оливковый, что и футер */
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.4);

    display: none;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    min-width: 240px;

    z-index: 30; /* выше логотипа BúscaTe (у него z-index: 10) */
  }

  /* Капсулы-ссылки внутри попапа */
  .footer-menu a {
    display: block;
    padding: 10px 24px;
    border-radius: 999px;

    background-color: #ffffff;
    color: #2b2616; /* чуть темнее текст */
    font-weight: 600; /* делаем пожирнее */

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;

    transition: all 0.15s ease;
  }

  .footer-menu a:hover,
  .footer-menu a:focus-visible {
    background-color: #f7f3ea;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }

  /* =============== бургер-выпадашка в футере ============== */
  /* якорь для выпадашки */
  .footer-nav {
    position: relative;
    z-index: 5000;
  }

  /* ===== Burger -> X ===== */
  .footer-nav.is-open .footer-nav-toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    width: 24px;
  }
  .footer-nav.is-open .footer-nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .footer-nav.is-open .footer-nav-toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    width: 24px;
  }

  /* ===== Premium dropdown (dark) ===== */
  .footer-menu {
    /* важно: если раньше было display:flex — выключаем до открытия */
    display: none;

    position: absolute;
    right: 0;
    bottom: calc(100% + 10px); /* ближе к кнопке */
    transform: translateX(0); /* на случай старых сдвигов */

    min-width: 220px;
    padding: 14px;

    background: rgba(43, 38, 22, 0.94);
    border: 1px solid rgba(247, 243, 234, 0.14);
    border-radius: 18px;

    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 99999;
  }

  /* открыто */
  .footer-nav.is-open .footer-menu {
    display: flex;
    flex-direction: column;
    gap: 2px; /* почти как в хедере: плотнее */
    align-items: stretch;
  }

  /* ссылки — без “базарных” огромных капсул */
  .footer-menu a {
    position: relative;
    display: block;

    padding: 12px 4px;
    border-radius: 10px; /* чисто для hover-подсветки, очень мягко */

    color: rgba(247, 243, 234, 0.88);
    text-decoration: none;

    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 13px;

    background: transparent;
    border: 0;

    transition: color 0.2s ease, background 0.2s ease;
  }

  /* тонкий “разделитель” появляется при наведении */
  .footer-menu a::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: 7px;

    width: 46px; /* коротенькое */
    /* можно адаптивно: width: clamp(34px, 10vw, 54px); */

    height: 1px;
    background: rgba(241, 221, 192, 0.55);

    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
  }

  .footer-menu a:hover {
    color: rgba(247, 243, 234, 0.98);
    background: rgba(247, 243, 234, 0.04); /* еле заметная “вуаль” */
  }

  .footer-menu a:hover::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* TABLÓN — как активный пункт (без капсулы), чуть более “синий” */
  .footer-menu .footer-link-tablon {
    color: rgba(59, 113, 136, 0.95) !important;
    opacity: 1 !important;
  }
  .footer-menu .footer-link-tablon::after {
    background: rgba(59, 113, 136, 0.7);
  }

  /* ===== Premium burger button ===== */

  .footer-nav-toggle {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;
    padding: 0;

    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  .footer-nav-toggle span {
    opacity: 0.85;

    display: block;

    margin: 0 auto;

    width: 22px;
    height: 2px;
    background: rgba(247, 243, 234, 0.8);
    border-radius: 999px;
    transition: 0.25s ease;
  }

  .site-footer {
    margin-top: 0;

    padding-top: 20px; /* подгони: 70–120 */
  }

  /* =========================================================
     FOOTER PORTAL ALIAS
     ========================================================= */

  .footer-menu.footer-menu--portal,
  .footer-menu.is-portal {
    position: fixed;
    right: var(--menu-right, 12px);
    bottom: var(--menu-bottom, 12px);

    /* критично: иначе меню остаётся display:none */
    display: flex !important;
    flex-direction: column;

    z-index: 20000; /* выше карточки */
  }

  /* и подчёркивания для портала тоже (по центру, тонкие) */
  .footer-menu.footer-menu--portal a::after,
  .footer-menu.is-portal a::after {
    left: 50%;
    width: 34px;
    height: 1px;
    transform: translateX(-50%) scaleX(0);
  }

  .footer-menu.footer-menu--portal a:hover::after,
  .footer-menu.is-portal a:hover::after {
    transform: translateX(-50%) scaleX(1);
  }
}

@media (max-width: 640px) {
  .hero-content-inner {
    padding: 60px 10px 20px 10px;
    margin: 0 6px;
  }

  /* --- SECTION 3: team --- */
  .section-team {
    flex-direction: column;
    align-items: center;
    padding: 40px 0 0 0;
    min-height: auto;
    overflow: visible !important;
  }

  .team-text {
    width: min(92vw, 520px);

    /* сбиваем десктопную ось/сдвиги */
    margin: 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    transform: none !important;

    /* центрируем содержимое внутри */
    text-align: center;
    align-items: center; /* важно: это flex-контейнер */

    flex: none !important; /* убираем flex: 0 1 450px */
    flex-basis: auto !important; /* на случай если где-то снова задано */
    height: auto !important;
    min-height: 0 !important;
  }

  /* Девушка больше не absolute, чтобы не перекрывала ничего */
  .team-image {
    position: relative;
    right: 0 !important;
    left: auto !important;

    width: min(78vw, 320px);
    margin-top: 10px; /* меньше воздуха после текстов */
    margin-bottom: 0; /* не оставляем щель перед карточкой */

    /* убираем translateX/translateY из более верхних брейкпоинтов */
    transform: none;
  }

  /* --- SECTION 4: floating-contact-zone --- */
  .floating-contact-zone {
    position: relative; /* вместо "плавающего" поведения */
    top: auto;
    padding: 0 16px;
    margin-top: 0; /* убираем зазор между девушкой и карточкой */

    height: auto; /* было height:0 на десктопе */
  }

  .floating-contact-zone .container {
    padding: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .floating-contact-zone .contact-card {
    position: relative; /* как у тебя */
    left: auto !important; /* перебиваем var(--stack-left) !important */
    right: auto !important;
    bottom: auto !important;

    transform: none !important; /* на всякий случай */
    margin: 0 auto !important;
    /*  margin-right: auto !important;*/

    width: min(92vw, 420px); /* можно оставить твою min(100%, 420px) */
    max-width: 100%;
  }
  /* =========================
     Centering polish <=640
     ========================= */

  /* 1) Центрируем текстовую часть */
  .team-text,
  .team-block {
    text-align: center;

    /* Центруем содержимое flex-колонки по горизонтали */
    align-items: center;
  }

  /* Чтобы сами блоки не тянулись на всю ширину,
     иначе центрирование будет "незаметно" */
  .team-block {
    width: 100%;
    max-width: 520px;
  }

  /* 2) Центрируем "золотые черточки" под заголовками */
  .team-block h2::after {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .site-footer {
    margin-top: 0;

    padding-top: 0; /* подгони: 70–120 */
  }
}

@media (max-width: 570px) /* and (min-width: 481px) */ {
  .section-coverage {
    height: clamp(380px, calc(380px + (100vw - 480px) * 0.667), 440px);
    overflow: hidden;
  }
  .visual-mask,
  .visual-outline {
    height: 100%;
  }

  .section-reach {
    padding: 40px 10px;
    margin: 0;
  }

  .reach-container {
    padding: 50px 20px 20px 20px;
  }

  .reach-container::before {
    content: "";
    position: absolute;
    top: 28px; /* Дистанция от верхнего края */
    left: 50%;
    transform: translateX(-50%);
    width: 50px; /* Длина черточки */
    height: 4px; /* Толщина */
    background: linear-gradient(
      90deg,
      rgba(241, 221, 192, 0.2),
      rgba(241, 221, 192, 0.6),
      rgba(241, 221, 192, 0.2)
    );
    border-radius: 10px;
    opacity: 0.8;
  }

  .reach-header.appear {
    margin: 20px;
  }

  /* Центрируем заголовок в карточке */
  .advantage-card h3 {
    text-align: center;
  }

  /* Магия центровки для черточки ::after */
  .advantage-card h3::after {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px; /* Чуть больше воздуха на мобилках */
    width: 60px; /* Можно сделать чуть длиннее для баланса на узком экране */
  }

  /* Также не забудьте центрировать остальные элементы в карточке */
  .advantage-card {
    text-align: center;
  }

  .card-num {
    margin-bottom: 15px;
  }
}

@media (max-width: 540px) {
  .hero {
    /* 1. Сбрасываем флекс-центровку десктопа */
    display: block;
    height: auto;
    min-height: auto;
    background-image: url("../img/hero-courier-mobile.jpg");
    background-position: center top;
    background-size: 100% auto; /* Картинка занимает всю ширину сверху */
    background-repeat: no-repeat;
    background-color: var(
      --color-bg-page
    ); /* Фон секции такой же как у карточки */

    /* Создаем пространство сверху, чтобы текст не закрывал лицо на фото */
    padding-top: 320px;
    overflow: visible;
  }

  .hero-content {
    /* 1. Заставляем контейнер занимать всю ширину */
    flex: 0 0 100%;
    max-width: 100%;

    /* 2. Убираем боковой отступ, который толкал карточку влево */
    padding-right: 0 !important;

    /* 3. Центрируем содержимое внутри контейнера */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-content-inner {
    /* 5. На мобильных карточка должна быть чуть уже, чтобы не липнуть к краям экрана */
    width: 96%;
    min-width: unset; /* Сбрасываем десктопное ограничение */
  }

  .hero-content-inner::before {
    content: "";
    position: absolute;
    top: 22px; /* Дистанция от верхнего края */
    left: 50%;
    transform: translateX(-50%);
    width: 50px; /* Длина черточки */
    height: 4px; /* Толщина */
    background: linear-gradient(
      90deg,
      rgba(241, 221, 192, 0.2),
      rgba(241, 221, 192, 0.6),
      rgba(241, 221, 192, 0.2)
    );
    border-radius: 10px;
    opacity: 0.8;
  }

  /* 1. Возвращаем линейность основной строке */
  .hero-main-row {
    display: flex;
    flex-direction: row; /* Выстраиваем в ряд */
    align-items: center;
    justify-content: center;
    gap: 0; /* Зазор между текстом и "48" */
    width: 100%;
    /* Добавляем отступ только снизу, до кнопки */
    margin-bottom: 20px;
  }

  /* 2. Текстовый блок внутри ряда */
  .hero-text {
    text-align: left; /* Текст внутри блока прижат влево */
  }

  /* 3. Заголовок и подзаголовок */
  .hero-title {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.1;
    /* 4. ОБНУЛЯЕМ маргин, который может "толкать" блок вниз */
    margin: 0;
  }

  .hero-subtitle {
    font-size: clamp(12px, 3.5vw, 16px);
    margin: 4px 0 0;
  }

  /* 4. Картинка "48" */
  .hero-deadline-img {
    width: clamp(60px, 15vw, 90px); /* Делаем её соразмерной тексту */
    height: auto;
    margin-top: 0; /* Сбрасываем десктопные отрицательные маргины */
  }

  .hero-cta {
    /* Кнопка на мобильном */
    width: 100%;
    max-width: 250px;
    min-width: 0 !important;
    margin: 0 auto;
    padding: 14px 26px;
  }

  /* секция больше НЕ фиксируется по высоте */
  .section-coverage {
    height: auto !important;
    min-height: unset !important;
    overflow: hidden;
    padding-bottom: 18px;
  }

  /* контейнер в колонку: сначала сцена, потом текст */
  .coverage-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  /* ключ: сцена теперь В ПОТОКЕ (а не absolute) */
  .coverage-visual {
    position: relative !important; /* перебиваем absolute из style.css */
    inset: auto !important;
    width: 100%;
    height: clamp(240px, 70vw, 340px);
    z-index: 2;
  }

  /* слои сцены остаются absolute, но внутри coverage-visual */
  .visual-mask,
  .visual-outline {
    position: absolute;
    inset: 0;
    background-attachment: scroll; /* мобильным так стабильнее */

    /* ВАЖНО: маска теперь масштабируется от ширины, чтобы “100%” реально ужимался */
    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: 96% auto;
    mask-size: 96% auto;
  }

  /* текстовый блок тоже в потоке (не absolute) */
  .coverage-text {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: min(92vw, 520px);
    max-width: 520px;
    margin: 0 auto;
    padding: 18px 16px;

    text-align: center;

    border-top: 2px solid #f1ddc0;
    border-left: none;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .header-top::before {
    width: 200px;
  }

  .section-coverage {
    padding-bottom: 12px; /* чуть воздуха снизу */
  }

  :root {
    /* разрешаем секции реально уменьшаться на узких */
    --coverage-h: clamp(340px, 92vw, 460px);
  }

  .section-coverage {
    height: auto !important;
    min-height: 0 !important;
    /* можно оставить hidden, но лучше так: */
    overflow: visible !important;
    padding-bottom: 12px;
  }

  .visual-mask,
  .visual-outline {
    height: 100%;
  }

  .coverage-wrapper {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .coverage-text {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100%;

    min-width: 300px;
    margin: 0 auto;
    box-sizing: border-box;

    padding: 16px 14px;

    border-top: 2px solid #f1ddc0;
    border-left: none;
    border-radius: 0;
  }
}

@media (max-width: 456px) {
  /* На совсем узких телефонах копирайт и политика в колонку, разделитель не нужен */
  .copy-divider {
    display: none;
  }

  /* На всякий случай глушим возможный псевдоэлемент, если где-то останется */
  .footer-copy::after {
    content: "";
    margin: 0;
  }
}

@media (max-width: 360px) {
  .floating-contact-zone {
    padding: 0 12px 20px;
  }

  .floating-contact-zone .contact-card {
    width: 100% !important;
    max-width: 100% !important;

    padding: 20px 16px 16px !important;
    border-radius: 18px !important;

    /* если есть тень/фильтры — уменьшаем визуальный шум */
    box-shadow: none !important;
  }

  /* делаем "ручку" компактнее */
  .floating-contact-zone .card-handle {
    margin: 0 auto 12px;
    width: 44px;
  }

  /* чуть компактнее заголовок */
  .floating-contact-zone .contact-card h4 {
    font-size: 16px;
    letter-spacing: 0.18em;
  }

  .floating-contact-zone .form-subtitle {
    font-size: 12px;
  }

  /* кнопка во всю ширину карточки */
  .floating-contact-zone .btn-card-cta {
    width: 100%;
  }
}

@media (max-width: 344px) {
  .floating-contact-zone {
    padding: 0 10px 18px;
  }

  .floating-contact-zone .contact-card {
    padding: 18px 14px 14px !important;
    border-radius: 16px !important;
  }

  .floating-contact-zone .contact-card h4 {
    font-size: 15px;
    letter-spacing: 0.16em;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =========================
   FIX: разделитель копирайта (двойной цикл)
   ========================= */

/* 1) Средний “колоночный” диапазон под плавающей карточкой: 1200–859px */
@media (max-width: 1200px) and (min-width: 859px) {
  .copy-divider {
    display: none;
  }

  /* На всякий случай глушим псевдоэлемент, если вдруг где-то останется */
  .footer-copy::after {
    content: "";
    margin: 0;
  }
}

/* 2) Здесь футер снова в строку: 858–457px — показываем разделитель */
@media (max-width: 858px) and (min-width: 457px) {
  .copy-divider {
    display: inline;
  }

  .footer-copy::after {
    content: "";
    margin: 0;
  }
}

/* 3) Самый узкий телефон: всё ломается в колонку, палочка не нужна */
@media (max-width: 456px) {
  .copy-divider {
    display: none;
  }

  .footer-copy::after {
    content: "";
    margin: 0;
  }
}