/* =======================
   АДАПТИВНЫЕ СТИЛИ DST
   ======================= */

/* =====================================================
   MOBILE BURGER MENU
   ===================================================== */

:root {
  --header-height: 140px; /* синхронизируем с реальной высотой мобильного хедера (logo 90px + padding) для расчётов меню */
  --menu-width:   75vw;   /* ширина выезжающей панели меню */
  --burger-size:  44px;   /* размер кнопки бургер-меню */
}

/* Блокировка прокрутки body при открытом меню (fallback, основной lock делает JS через position: fixed). */
body.menu-open {
  overflow: hidden;
}

/* ---------- ≤ 768 px ---------- */
@media (max-width: 768px) {
  html {
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom)); /* Добавляем нижний scroll-padding на мобильных, чтобы якоря не упирались в нижний safe-area. */
  }

  :root {
    --header-height: calc(140px + env(safe-area-inset-top)); /* учитываем safe-area на устройствах с вырезом, чтобы меню и оверлей совпадали с высотой хедера */
    --menu-slogan-lift: 36px; /* увеличиваем подъём слогана в мобильном меню, чтобы поднять текст внутри панели меню на мобильных */
  }

  /* Добавляем безопасные боковые отступы для note-box на мобильных, чтобы рамка не касалась краёв экрана. */
  .note-box {
    margin-inline: 16px;
    padding-inline: 16px;
  }

  /* Сбрасываем фиксированные высоты и скрытый overflow у блока цитат в футере на мобильных, чтобы текст не обрезался. */
  .footer-quote .quotes_box_and_tips,
  .footer-quote .single_quotes_box {
    height: auto;
    overflow: visible;
  }

  /* Снимаем возможные ограничения высоты из плагина на мобильных для блоков цитат в футере, чтобы контент был полностью видим. */
  .site-footer .quotes_box_and_tips,
  .site-footer .single_quotes_box {
    max-height: none;
    height: auto;
    overflow: visible;
  }

  .site-header {
    padding-top: env(safe-area-inset-top); /* добавляем безопасный отступ для шапки на устройствах с "чёлкой", чтобы контент не ушёл под вырез */
  }

  .site-header .container {
    position: relative;
  }

  /* розовая, когда кнопка активна */
  .mobile-menu-toggle.active   { background: var(--color-accent); }

  /* JS-only overlay для off-canvas меню, чтобы без JS оверлей не блокировал доступ. */
  .js .menu-overlay {
    position: fixed;
    top: var(--header-height); /* не перекрываем хедер, чтобы он оставался видимым поверх оверлея */
    right: 0;
    left: 0;
    height: calc(min(100dvh, 100vh) - var(--header-height)); /* используем динамический vh, чтобы оверлей не "прыгал" на мобильных и не перекрывал шапку */
    background: rgba(0,0,0,.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    z-index: 998;
  }
  .js .menu-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }
  body.menu-open .js .menu-overlay {
    top: 0; /* растягиваем оверлей на весь экран при открытом меню (mobile), чтобы он перекрывал экран полностью */
    height: min(100dvh, 100vh); /* фиксируем полноэкранную высоту оверлея при открытом меню (mobile), чтобы покрыть весь viewport */
  }

  /* кнопка-бургер */
  .mobile-menu-toggle {
    position: fixed; /* фиксируем бургер в окне, чтобы он оставался кликабельным при любом скролле в мобильном хедере */
    top: calc(var(--header-height) / 2); /* центрируем кнопку по высоте хедера с учётом safe-area, чтобы не попасть под вырез */
    right: 20px;
    width: var(--burger-size);
    height: var(--burger-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: var(--color-primary);
    color: var(--color-foreground);
    font-size: 1.3rem;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 99999; /* держим бургер выше .js .menu (999) и .menu-overlay (998), чтобы он оставался кликабельным поверх панели и оверлея */
  }

  .burger-icon {
    position: relative;
    width: calc(var(--burger-size) - 2px); /* увеличиваем линии бургера на мобильном и держим симметричный отступ ~1px по краям */
    height: 2px;
    background: var(--color-foreground);
    border-radius: 2px;
  }

  .burger-icon::before,
  .burger-icon::after {
    content: "";
    position: absolute;
    left: 0; /* удерживаем линии бургера на мобильном по центру, используя симметричный отступ ~1px через ширину родителя */
    width: 100%; /* расширяем линии бургера на мобильном до ширины родителя с отступом ~1px по краям */
    height: 2px;
    background: var(--color-foreground);
    border-radius: 2px;
  }

  .burger-icon::before {
    top: calc(-1 * (var(--burger-size) / 2 - 1px)); /* поднимаем верхнюю линию бургера на мобильном, оставляя ~1px отступ до края кнопки */
  }

  .burger-icon::after {
    top: calc(var(--burger-size) / 2 - 1px); /* опускаем нижнюю линию бургера на мобильном, оставляя ~1px отступ до края кнопки */
  }

  .mobile-menu-toggle.active .burger-icon,
  .mobile-menu-toggle.active .burger-icon::before,
  .mobile-menu-toggle.active .burger-icon::after {
    background: var(--color-background);
  }

  /* JS-only off-canvas панель, чтобы без JS меню оставалось в потоке. */
  .js .menu {
    position: fixed;
    top: 0; /* тянем панель меню на весь экран по высоте при любом состоянии, чтобы открытое меню закрывало весь viewport */
    right: 0;
    width: var(--menu-width);          /* 75vw */
    height: min(100dvh, 100vh); /* задаём полноэкранную высоту панели, чтобы мобильное меню занимало весь экран */
    margin: 0;
    padding: calc(var(--header-height) + 8px) 24px 24px; /* уменьшаем верхний отступ, чтобы слоган в мобильном меню располагался выше и не уходил под шапку */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* фиксируем выравнивание элементов сверху, чтобы пункты меню не "уезжали" вниз на малых экранах */
    gap: 16px;
    background: var(--color-background);
    box-shadow: -2px 0 12px rgba(0,0,0,.3);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 999;
  }
  .js .menu.active { transform: translateX(0); }

  /* Fallback без JS: держим меню видимым на мобилке и прячем кнопку-бургер. */
  .no-js .menu {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-background);
    box-shadow: none;
    transform: none;
    overflow: visible;
  }
  .no-js .mobile-menu-toggle { display: none; }

  .menu li   { margin: 0; padding: 0; }
  .menu a    { color: var(--color-primary); transition: color .3s; }
  .menu a:hover { color: var(--color-accent); }

  /* Добавляем SVG-буллет перед пунктами, чтобы украсить мобильное off-canvas меню. */
  .menu > li > a::before {
    content: "";
    display: inline-block; /* Отображаем декоративный SVG как инлайн-буллет только в мобильном off-canvas меню. */
    width: 14px; /* Фиксируем размер буллета, чтобы он выглядел одинаково во всех пунктах мобильного off-canvas меню. */
    height: 14px; /* Фиксируем размер буллета, чтобы он выглядел одинаково во всех пунктах мобильного off-canvas меню. */
    margin-right: 10px; /* Добавляем отступ от текста пункта для читаемости мобильного off-canvas меню. */
    background-image: url('../images/decoration/orange-star.svg'); /* Используем оранжевую звезду как декор для пунктов мобильного off-canvas меню. */
    background-repeat: no-repeat; /* Не повторяем фон, чтобы SVG не дублировался в буллете мобильного off-canvas меню. */
    background-size: contain; /* Масштабируем SVG под размеры буллета в мобильном off-canvas меню. */
    animation: menuBulletSpin 6s linear infinite; /* Запускаем вращение буллета только для мобильного off-canvas меню. */
  }

  /* Отключаем буллет у слогана, чтобы он не отображался в мобильном off-canvas меню. */
  .menu-slogan::before {
    display: none; /* Убираем декоративный буллет у слогана в мобильном off-canvas меню. */
  }

  /* Анимация вращения буллета, используемая только для мобильного off-canvas меню. */
  @keyframes menuBulletSpin {
    to {
      transform: rotate(360deg); /* Плавно вращаем SVG, чтобы создать динамику в мобильном off-canvas меню. */
    }
  }

  /* Добавляем стили для слогана в мобильной панели меню, чтобы он был выровнен и отделён от пунктов. */
  .menu-slogan {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 12px;
    margin-top: calc(-1 * var(--menu-slogan-lift)); /* поднимаем слоган вверх в мобильном меню, чтобы он не уходил под шапку и оставался первым пунктом */
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    opacity: 0; /* Держим слоган скрытым по умолчанию, чтобы анимацию запускал JS при открытии меню. */
  }

  .menu-slogan + li {
    margin-top: var(--menu-slogan-lift); /* компенсируем подъём слогана в мобильном меню, чтобы первый пункт списка не подтягивался вверх */
  }

  .menu-slogan.is-animating {
    animation: sloganFadeIn 1.5s ease-out 0.2s forwards; /* Включаем fade-in через отдельный класс, чтобы можно было перезапускать анимацию. */
  }

  /* Настраиваем размеры изображения слогана, чтобы оно выглядело аккуратно в мобильном меню. */
  .menu-slogan .slogan-svg {
    max-width: 140px;
    height: auto;
    display: block;
  }
}

/* ---------- ≥ 769 px ---------- */
@media (min-width: 769px) {

  .mobile-menu-toggle { display: none; }

  .menu {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    flex-direction: row;
    gap: 20px;
    padding: 0;
    box-shadow: none;
  }

  /* Прячем слоган внутри меню на десктопе, чтобы он оставался только в мобильной панели. */
  .menu-slogan { display: none; }
}


/* --- Футер --- */
@media (max-width: 768px) {
  .site-footer {
    padding-bottom: calc(40px + env(safe-area-inset-bottom)); /* Добавляем safe-area к нижнему отступу футера, чтобы контент не упирался в системную панель на мобильных. */
  }

  .footer-nav ul,
  .footer-bottom .legal-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-socials {
    /* На мобильных сохраняем двухстрочную структуру футера и центрируем каждую строку, чтобы новые CTA не расползались по ширине. */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 20px;
    gap: 12px;
  }

  .footer-socials-row {
    /* Разрешаем перенос элементов внутри каждой строки футера на узких экранах, чтобы избежать наложения текста и иконок. */
    justify-content: flex-start;
    row-gap: 10px;
  }

  .footer-secondary-label {
    /* Уменьшаем подпись второй строки в мобильном футере для стабильного переноса рядом с Telegram-иконкой. */
    font-size: 0.9rem;
  }

  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .footer-left,
  .footer-right {
    width: 100%;
  }

  .footer-right {
    min-width: 0; /* Разрешаем сжимать правую колонку футера на мобильных, чтобы текст корректно переносился при 430–432px. */
  }

  .footer-socials svg {
    width: 24px;
    height: 24px;
  }
}

/* --- Блок "Как мы работаем" --- */
@media (max-width: 768px) {
  .how-title {
    font-size: 2rem;
  }

  .tools-grid {
    flex-direction: column;
  }

  .tools-visual {
    justify-content: flex-start;
  }
}

/* --- Команда --- */
@media (max-width: 768px) {
  .team-member {
    flex-direction: column;
    text-align: center;
  }

  .team-photo {
    margin: 0 auto 20px;
  }

  .team-text {
    max-width: 100%;
  }
}

/* --- Hero-блок --- */
@media (max-width: 768px) {
  .hero-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-right {
    justify-content: flex-start;
    text-align: left;
    padding-right: 0;
    margin-top: 30px;
  }

  .hero-ommaje-svg {
    max-width: 400px;
    margin-top: 20px;
  }

  .hero-title {
    font-size: 2.1rem;
  }

  .hero-subtitle {
    /* Уточняем размер подзаголовка на мобильных, чтобы сохранить визуальную иерархию hero-блока. */
    font-size: 1.1rem;
  }

  .hero-subtext {
    font-size: 1rem;
  }
}

/* --- Кнопки сценариев --- */
@media (max-width: 768px) {
  .scenario-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .scenario-button {
    flex: 1 1 calc(50% - 10px);
    text-align: center;
  }
}

/* --- Сетка кейсов --- */
@media (max-width: 768px) {
  .cases-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Карточка цен --- */
@media (max-width: 768px) {
  .price-card {
    width: 100%;
    max-width: 300px;
  }
}

/* Cleanup after positioning section removal: removed now-unused mobile margin override for .positioning-text-column. */

/* --- Сетка сертификатов --- */
@media (max-width: 1024px) {
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* --- Лид-форма --- */
@media (max-width: 600px) {
  .leadform-wrapper {
    padding: 40px 20px;
  }

  .leadform-title {
    font-size: 24px;
  }
}

/* --- ФИКС блока скролла--- */
body.menu-open {
  overflow: hidden !important; /* fallback на случай, если inline-стили JS не применились */
}

/* --- Слоган-оммаж --- */
@media (max-width: 768px) {
  .hero-ommaje-svg {
    max-width: 90vw;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

/* --- Фикс отступов между блоками --- */
@media (max-width: 768px) {
  /* Сужаем список селекторов, чтобы сброс отступов не затрагивал все теги section и не ломал awards-note. */
  .section,
  .main-block,
  .why-block,
  .how-it-works-section,
  .services-wrapper,
  .tools-section {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
  }

  .container,
  .block,
  .wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
  }
}
/* --- Слоган-оммаж фикс отступа --- */
@media (max-width: 768px) {
  .hero-grid {
    margin-bottom: 0 !important; /* Убираем нижний отступ сетки в мобильном hero, чтобы не суммировать расстояния перед слоганом. */
    gap: 0 !important; /* Обнуляем gap в мобильном hero, чтобы не добавлять лишний вертикальный интервал. */
  }

  .hero-right {
    margin-top: 30px !important; /* Фиксируем верхний отступ перед слоганом в мобильном hero до 30px. */
    margin-bottom: 0 !important; /* Убираем дополнительный нижний отступ в мобильном hero, чтобы не увеличивать разрыв. */
    padding-bottom: 0 !important; /* Обнуляем нижний padding в мобильном hero для контроля вертикального интервала. */
  }

  .hero-ommaje-svg {
    display: block;
    margin: 0 auto 30px auto !important; /* Фиксируем единственный нижний отступ после SVG на мобильных (30px). */
    max-width: 90vw;
    height: auto;
  }

  .hero-section {
    margin-bottom: 0 !important; /* Убираем нижний margin у мобильного hero, чтобы не добавлять зазор к отступу SVG. */
    /* Сбрасываем нижний padding у мобильного hero, чтобы основным источником отступа был SVG. */
    padding-bottom: 0 !important;
  }

  .dst-extension {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .dst-extension-block {
    /* Уменьшаем верхний отступ блока extension на мобильных до 10px, чтобы не добавлять лишние 40px к расстоянию после слогана. */
    padding-top: 10px !important;
  }
  /* Уточняем, что все правки hero/dst-extension находятся в одном мобильном @media без лишних закрытий. */
}
/* === АДАПТАЦИЯ HADI-БЛОКА ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ === */
@media (max-width: 768px) {
  .hadi-cycle-block {
    padding-top: 20px;
    /* Добавляем безопасные боковые отступы в мобильном контейнере Services, чтобы круг HADI и подписи не упирались в край экрана 360px. */
    padding-left: 12px !important;
    padding-right: 12px !important;
    /* Фиксируем расчёт ширины через контентную область секции, чтобы дочерний .hadi-grid центрировался внутри контейнера, а не от viewport. */
    box-sizing: border-box;
  }

  /* Наследуем border-box на ближайшие контейнеры HADI в мобильном Services, чтобы margin: 0 auto работал по ширине контейнера. */
  .hadi-cycle-block,
  .hadi-cycle-block .hadi-grid,
  .hadi-cycle-block .hadi-node {
    box-sizing: border-box;
  }

  .hadi-title {
    font-size: 1.6rem;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
  }
  /* === mobile fix: HADI grid === */
  /* Держим мобильную схему HADI как на десктопе, чтобы круговая раскладка не ломалась на Services. */
  .hadi-grid {
    position: relative; /* Возвращаем десктопный контекст позиционирования для круговой схемы. */
    /* Выносим базовый мобильный размер сетки HADI в переменную, чтобы <=480 менял только масштаб без дублирования координат. */
    --hadi-grid-size: min(360px, 100%);
    /* Выносим базовый мобильный диаметр кругов H/A/I/D в переменную для точечной регулировки в <=480. */
    --hadi-circle-size: clamp(52px, 14vw, 60px);
    /* Выносим базовый мобильный размер букв H/A/I/D в переменную, чтобы масштаб оставался консистентным. */
    --hadi-circle-font-size: clamp(1.2rem, 3.4vw, 1.4rem);
    /* Добавляем базовый мобильный размер шрифта чипа Leads, чтобы управлять иерархией центра через каскад переменных HADI. */
    --hadi-leads-font-size: 0.72rem;
    /* Добавляем базовые внутренние отступы чипа Leads, чтобы мини-кнопка оставалась компактной и не конкурировала с узлами H/A/D/I. */
    --hadi-leads-padding: 5px 10px;
    /* Удаляем переменную вертикального сдвига Leads, чтобы центр в HADI-блоке Services всегда считался строго по геометрии между H/D и A/I. */
    /* Переводим размер круга на контейнерную логику: на 390/412 остаётся прежний максимум 360px, а на 360 учитывается реальная внутренняя ширина секции. */
    width: var(--hadi-grid-size);
    /* Держим квадратную геометрию через отношение сторон, чтобы высота следовала за контейнерной шириной без привязки к 100vw. */
    aspect-ratio: 1 / 1;
    /* Явно синхронизируем высоту с шириной для круговой схемы HADI в мобильном блоке Services. */
    height: auto;
    margin: 0 auto; /* Центрируем круговую схему на мобильных, как на десктопе. */
    display: block; /* Убираем мобильный flex-стек, чтобы узлы оставались абсолютными. */
  }

  .hadi-node {
    position: absolute; /* Возвращаем абсолютные позиции узлов, чтобы сохранить круговую геометрию. */
    /* Делаем ширину узлов адаптивной для 360/390/412, чтобы карточки подсказок не пересекали соседние узлы. */
    width: clamp(88px, 24vw, 120px);
  }

  .hadi-node.h {
    top: 0; /* Дублируем десктопное положение H на верхней точке круга. */
    left: 50%;
    transform: translateX(-50%);
  }

  .hadi-node.a {
    top: 50%; /* Дублируем десктопное положение A справа от центра. */
    /* Для Android 360px в секции HADI (page-services.php) смещаем A мягче, чтобы оставить место карточке подсказки внутри экрана. */
    right: clamp(0px, 2vw, 8px);
    transform: translateY(-50%);
    text-align: left;
  }

  .hadi-node.i {
    top: 50%; /* Дублируем десктопное положение I слева от центра. */
    /* Для Android 360px в секции HADI (page-services.php) смещаем I мягче, чтобы карточка не уходила влево за viewport. */
    left: clamp(0px, 2vw, 8px);
    transform: translateY(-50%);
    text-align: right;
  }

  .hadi-node.d {
    bottom: 0; /* Дублируем десктопное положение D снизу круга. */
    left: 50%;
    transform: translateX(-50%);
  }

  .hadi-center {
    position: absolute; /* Возвращаем центральный блок в середину круга, как на десктопе. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Фиксируем кликовый центр поверх фоновых элементов, чтобы чип Leads стабильно оставался читаемым в центре круга. */
    z-index: 2;
  }

  .hadi-leads-link {
    /* Убираем мобильный translateY для Leads, чтобы в HADI-блоке Services центрирование шло только через .hadi-center (геометрический центр квадрата). */
    transform: none;
  }

  .hadi-leads {
    /* Ограничиваем размер чипа Leads через переменные, чтобы визуально сохранять вторичный акцент относительно узлов H/A/D/I. */
    padding: var(--hadi-leads-padding);
    font-size: var(--hadi-leads-font-size);
    line-height: 1;
    /* Слегка уменьшаем контраст тени на мобильных, чтобы Leads читался, но не доминировал над кругами HADI. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  .hadi-circle {
    /* Привязываем диаметр кругов к переменной масштаба, чтобы позиционирование H/A/I/D не дублировалось в <=480. */
    width: var(--hadi-circle-size);
    /* Держим окружность квадратной через ту же переменную масштаба для единообразного мобильного каскада. */
    height: var(--hadi-circle-size);
    /* Привязываем размер букв к переменной масштаба, чтобы сохранить пропорции при сжатии сетки. */
    font-size: var(--hadi-circle-font-size);
  }

  .hadi-text {
    position: absolute; /* Возвращаем десктопное позиционирование подсказок. */
    /* Ограничиваем ширину подсказок единым правилом для 360/390/412, чтобы убрать горизонтальный скролл в Services. */
    width: min(210px, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
    font-size: 0.95rem; /* Дублируем десктопный размер текста подсказки. */
    line-height: 1.5;
  }


  /* Перенастраиваем позиции подсказок в мобильном Services, чтобы всплывающие блоки оставались внутри 360px-контейнера HADI. */
  .hadi-node.h .hadi-text,
  .hadi-node.d .hadi-text {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  /* Разворачиваем левую подпись внутрь круга на мобильных Services, чтобы текст не выходил за левую границу экрана. */
  .hadi-node.i .hadi-text {
    /* Для Android 360px в секции HADI (page-services.php) уменьшаем привязку I, чтобы текст оставался в безопасной зоне. */
    left: clamp(68px, 21vw, 88px);
    right: auto;
    transform: translateY(-50%);
    text-align: left;
  }

  /* Разворачиваем правую подпись внутрь круга на мобильных Services, чтобы текст не выходил за правую границу экрана. */
  .hadi-node.a .hadi-text {
    /* Для Android 360px в секции HADI (page-services.php) уменьшаем привязку A, чтобы текст не обрезался справа. */
    right: clamp(68px, 21vw, 88px);
    left: auto;
    transform: translateY(-50%);
    text-align: right;
  }

  .hadi-info-text {
    padding: 12px 14px;
    font-size: 0.95rem;
    /* Фиксируем читаемую ширину #hadi-info-block на мобильных и не даём блоку выходить за границы viewport. */
    max-width: min(720px, calc(100vw - 24px));
    margin-top: 20px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #ffffff;
    line-height: 1.4;
    text-align: center;
    /* Разрешаем безопасные переносы длинных слов в #hadi-info-block для мобильных профилей Services. */
    overflow-wrap: anywhere;
  }

  .hadi-info-text p {
    margin: 0;
  }
}

/* === mobile fine-tune: HADI grid for compact phones === */
@media (max-width: 480px) {
  .hadi-grid {
    /* На <=480 уменьшаем только размер сетки HADI, оставляя все мобильные координаты из базового блока <=768 без повторного описания. */
    --hadi-grid-size: min(300px, 100%);
    /* На <=480 уменьшаем только диаметр кругов H/A/I/D как точечную правку масштаба. */
    --hadi-circle-size: clamp(48px, 15vw, 56px);
    /* На <=480 синхронно уменьшаем размер букв в кругах, чтобы сохранить читабельные пропорции. */
    --hadi-circle-font-size: clamp(1.1rem, 3.2vw, 1.3rem);
    /* На <=480 дополнительно уменьшаем чип Leads, чтобы центральный элемент не пересекался с мобильными подписями. */
    --hadi-leads-font-size: 0.68rem;
    /* На <=480 уменьшаем внутренние отступы Leads для сохранения «мини-чипа» при сжатии HADI-сетки. */
    --hadi-leads-padding: 4px 9px;
    /* Удаляем переменную сдвига Leads на <=480, чтобы не возвращать скрытое смещение центра в HADI-блоке Services. */
  }
}

@media (max-width: 380px) {
  .hadi-grid {
    /* Для Android ~360px дополнительно уменьшаем Leads, чтобы центр оставался в безопасной зоне между кругами и текстом. */
    --hadi-leads-font-size: 0.64rem;
    /* Для Android ~360px ещё компактнее делаем отступы Leads, чтобы чип оставался аккуратным и не доминировал в композиции HADI. */
    --hadi-leads-padding: 4px 8px;
    /* Удаляем переменную сдвига Leads на <=380, чтобы центр оставался геометрическим по осям H/D и A/I в HADI-блоке Services. */
  }

  .hadi-text {
    /* Для Android 360px в секции HADI (page-services.php) отключаем всплывающие карточки, оставляя #hadi-info-block главным каналом пояснений. */
    display: none !important;
  }
}
/* === МОБИЛЬНЫЙ FIX FRAMEWORK-БЛОКА: абсолютный override  (n5_final_bypass) === */
@media (max-width: 768px) {
  main.services-page .how-we-work-dst .framework-cards {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  main.services-page .how-we-work-dst .framework-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
  }
}

/* ===  === Фиксим tools-grid n2=== */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    padding: 0;
    margin: 0;
  }

  .how-block, .tools-section, .tools-grid {
    padding-left: 12px;
    padding-right: 12px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .tool-tile {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  /* Для home.php усиливаем боковые поля контейнера, чтобы карточки не упирались в края на планшетах и мобильных. */
  .home-page {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Для карточек рубрик на home.php переводим сетку в одну колонку, чтобы intro и список постов оставались читаемыми на планшетах/мобилках. */
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* На <=768 делаем карточку компактнее по внутренним отступам, сохраняя визуальное разделение intro/posts. */
  .category-tile {
    padding: 16px;
  }

  /* На контрольной ширине 768 фиксируем минимальную высоту интро-зоны, чтобы тап-область оставалась удобной. */
  .category-tile__intro {
    min-height: 160px;
  }
}

@media (max-width: 1024px) {
  /* Для контрольной ширины 1024 разрешаем CTA переноситься и сохраняем читаемую длину строки в интро. */
  .category-tile__cta {
    white-space: normal;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* На самых узких экранах слегка уменьшаем боковые поля home.php, сохраняя безопасный зазор от границ viewport. */
  .home-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* На узких экранах дополнительно уменьшаем заголовок рубрики, чтобы строка не «ломала» высоту карточки. */
  .category-tile__title {
    font-size: 1.1rem;
  }

  /* На контрольной ширине 480 ужимаем CTA-плашку, чтобы текст Open category не обрезался при переносе. */
  .category-tile__cta {
    padding: 8px 12px;
    font-size: 0.88rem;
  }
}

@media (max-width: 412px) {
  /* Для контрольных ширин 412/390/360 увеличиваем межстрочный интервал CTA, чтобы перенос читался без наложений. */
  .category-tile__cta {
    line-height: 1.3;
  }
}

@media (max-width: 390px) {
  /* Для контрольной ширины 390 поднимаем минимальную высоту интро, компенсируя потенциальный перенос заголовка и CTA. */
  .category-tile__intro {
    min-height: 174px;
  }
}

@media (max-width: 360px) {
  /* Для контрольной ширины 360 дополнительно уменьшаем горизонтальные отступы интро, чтобы hit-area не теряла полезную площадь. */
  .category-tile__intro {
    padding: 12px;
  }
}