/* =====================================================================
   Система 360 · Адаптивный слой (общий для всех страниц)
   Селекторы соответствуют БРАУЗЕРНОЙ нормализации инлайн-стилей
   (пробел после «:» и «,», 0→0px). !important переопределяет инлайн.
   ===================================================================== */

/* ---------- Планшет ≤1040px: 4 колонки → 2 ---------- */
@media (max-width: 1040px) {
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Узкий планшет ≤900px: 3 колонки → 2, контентные 2-кол → 1 ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 0.92fr 1.08fr"],
  [style*="grid-template-columns: 1.08fr 0.92fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 0.85fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- Телефон ≤640px: всё в одну колонку + типографика + отступы ---------- */
@media (max-width: 640px) {

  /* Сетки → одна колонка (матрицу сравнения НЕ трогаем — она скроллится).
     ВНИМАНИЕ: «1fr 1fr» — подстрока «1fr 1fr 1fr» (футер) тоже совпадёт,
     но футер переопределяется своим более специфичным правилом. */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Ячейки, растянутые на 2 колонки, больше не растягиваем */
  [style*="grid-column: span 2"] { grid-column: auto !important; }

  /* Горизонтальные поля внешних контейнеров: 24px → 18px */
  [style*="max-width: 1200px"],
  [style*="max-width: 1140px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1080px"],
  [style*="max-width: 940px"],
  [style*="max-width: 920px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* Вертикальный ритм секций */
  [style*="padding: 80px 24px"],
  [style*="padding: 84px 24px"],
  [style*="padding: 88px 24px"],
  [style*="padding: 72px 24px"] { padding-top: 30px !important; padding-bottom: 30px !important; }
  [style*="padding: 8px 24px 90px"] { padding-bottom: 22px !important; }
  [style*="padding: 14px 24px 120px"] { padding-bottom: 24px !important; }
  [style*="padding: 30px 24px 96px"] { padding-top: 12px !important; padding-bottom: 24px !important; }

  /* Крупные «тёмные» CTA-карточки */
  [style*="padding: 64px 40px"] { padding: 40px 22px !important; }

  /* Заголовки масштабируются вниз (никогда не крупнее исходных) */
  h1 { font-size: clamp(27px, 7.4vw, 44px) !important; letter-spacing: -0.4px !important; line-height: 1.14 !important; }
  h2 { font-size: clamp(22px, 5.6vw, 34px) !important; letter-spacing: -0.3px !important; line-height: 1.16 !important; }
  h3 { font-size: clamp(18px, 4.6vw, 23px) !important; }

  /* Изображения не переполняют вьюпорт */
  img { max-width: 100% !important; height: auto !important; }

  /* Декоративные «плавающие» карточки в hero прячем на телефоне,
     чтобы они не наезжали на дашборд и не разъезжались по экрану */
  .s360-hero-float { display: none !important; }

  /* Крупные лид-абзацы чуть компактнее */
  [style*="font-size: 19px"] { font-size: 16.5px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }
  [style*="font-size: 17px"] { font-size: 15.5px !important; }

  /* Точечное уменьшение крупных внутренних отступов на телефоне */
  [style*="padding: 44px 40px"] { padding: 30px 18px !important; }
  [style*="padding: 30px 40px"] { padding: 24px 18px !important; }
}

/* =====================================================================
   Мобильные утилиты (классы навешиваются на конкретные блоки)
   ===================================================================== */
@media (max-width: 640px) {

  /* --- Горизонтальный слайдер с «подглядыванием» следующей карточки --- */
  .m-slider {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 4px 18px 16px !important;
    scroll-padding-left: 18px;
    scrollbar-width: none;
    margin-top: 22px !important;
  }
  .m-slider::-webkit-scrollbar { display: none; }
  .m-slider > * {
    scroll-snap-align: start;
    flex: 0 0 78% !important;
    width: 78% !important;
    min-width: 0 !important;
    max-width: 78% !important;
    box-sizing: border-box;
    margin: 0 !important;
  }
  .m-slider > .m-arrow { display: none !important; }

  /* --- Скроллящийся ряд компактных ячеек (пайплайн и т.п.) --- */
  .m-track {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 8px !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 2px 18px 14px !important;
    scrollbar-width: none;
  }
  .m-track::-webkit-scrollbar { display: none; }
  .m-track > * { flex: 0 0 auto !important; scroll-snap-align: start; }
  .m-track > div { flex: 0 0 152px !important; min-width: 152px !important; width: 152px !important; }
  .m-track > .m-arrow, .m-track > span { align-self: center !important; }

  /* --- Карточка «текст + виджет» складывается вертикально --- */
  .m-stack { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  .m-stack > * { width: auto !important; flex: none !important; }

  /* --- Шаги «текст + мини-визуал»: визуал уезжает под текст на всю ширину --- */
  .m-steprow > * { flex-wrap: wrap !important; }
  .m-steprow > * > div { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin-top: 10px !important; }

  /* --- Веер из фикс. мокапов → горизонтальный слайдер на телефоне --- */
  .m-fan { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: flex-start !important; overflow-x: auto; gap: 12px !important; scroll-snap-type: x mandatory; margin-left: -18px !important; margin-right: -18px !important; padding: 4px 18px 16px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .m-fan::-webkit-scrollbar { display: none; }
  .m-fan > * { flex: 0 0 82% !important; width: 82% !important; max-width: 82% !important; transform: none !important; margin: 0 !important; scroll-snap-align: start; z-index: auto !important; }

  /* --- Бенто-раскладка со span-колонками → вертикальный стек на телефоне --- */
  .m-bento { display: flex !important; flex-direction: column !important; gap: 16px !important; grid-template-columns: none !important; overflow: visible !important; }
  .m-bento > * { width: 100% !important; grid-column: auto !important; flex: none !important; }

  /* --- Раскладки в 1 / 2 колонки для сеток, которые глобальные правила не ловят --- */
  .m-onecol { grid-template-columns: 1fr !important; gap: 16px !important; }
  .m-grid4 { grid-template-columns: repeat(4, 1fr) !important; }
  .jv-scroll-target { min-height: 340px !important; }
  /* Итоговые курсивные подписи под блоками — меньше отступа сверху на телефоне */
  p[style*="font-style: italic"][style*="text-align: center"] { margin-top: 16px !important; }
  .jv-scroll-target > div:last-child { flex: 1 1 auto !important; }
  /* Изображения в слайдер-карточках приводим к единой высоте, чтобы карточки
     были одинаковыми и под ними не оставалось пустого «трека» */
  .m-slider > * > div > img,
  .m-slider > * > div > div > img { height: 190px !important; object-fit: cover !important; object-position: top !important; }
  /* Контейнеры-обёртки картинок не должны держать фикс. высоту на телефоне */
  .m-slider [style*="min-height: 300px"],
  .m-slider [style*="min-height: 280px"],
  .m-slider [style*="min-height: 320px"] { min-height: 0 !important; flex: none !important; }
  .cp-visual > div:nth-child(2) { height: 244px !important; }
  .d2p-conn { height: 46px !important; }
  .d2p-conn > div:last-child { transform: rotate(90deg) !important; }
  .m-hidekids { display: none !important; }
  /* Пилюли «кому подходит» — одинаковой ширины (в столбец) на телефоне */
  .m-pillcol > span { width: 100% !important; box-sizing: border-box; }
  /* Шаги «номер + текст + мини-визуал»: визуал уезжает под текст на всю ширину */
  .m-steps > div { flex-wrap: wrap !important; }
  .m-steps > div > div:last-child { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; margin-top: 12px !important; margin-left: 52px !important; }
  .m-2col { grid-template-columns: 1fr 1fr !important; }

  /* Компактный внутренний отступ карточек на телефоне */
  .m-pad { padding: 18px !important; }

  /* --- Компактная строка метрик 2×2 --- */
  .m-metrics { grid-template-columns: 1fr 1fr !important; }
  .m-metrics > div { padding: 16px 15px !important; border-top: 1px solid #f1f1f5 !important; }
  .m-metrics [style*="font-size: 28px"] { font-size: 20px !important; }

  /* --- Масштабирование крупного декоративного мокапа под ширину экрана --- */
  .m-zoom { zoom: 0.5; }

  /* Диаграмма архитектуры (фикс. 520px) ужимается под экран телефона */
  [style*="width: 520px"][style*="height: 188px"] { zoom: 0.62; }

  /* --- Обрезка «пустых» высоких скриншотов --- */
  .m-crop { max-height: 260px !important; object-fit: cover !important; object-position: top center !important; }

  /* Крупный визуал-слайдер (Jarvis) — убираем пустое место */
  .jv-visual { height: auto !important; aspect-ratio: 1.5 !important; }

  /* Хиро-«веер» из фиксированных карточек → одна карточка на всю ширину */
  .crm-hero { display: block !important; }
  .crm-hero > div { flex: none !important; width: auto !important; max-width: 100% !important; transform: none !important; margin: 0 !important; }

  /* Хиро-визуал: меньше воздуха над и под дашбордом на телефоне */
  .hero-visual { margin-top: 14px !important; padding-bottom: 18px !important; }
  /* Карточки выгод: без галочки слева и с воздухом перед визуалом */
  .bnf-grid > * > div:first-child > span:first-child { display: none !important; }
  .bnf-grid > * > div:last-child { margin-top: 16px !important; }

  /* «Типичные проблемы»: гарантированный один столбец + меньше воздуха */
  .probl-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .probl-grid > div:last-child { min-width: 0 !important; }

  /* Плитки модулей в hero остаются в 3 колонки (не растягиваются) */
  .mod-tiles { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

  /* Избранная story-карточка блога: убрать разрыв заголовок→текст и лишний воздух */
  .feat-card h3 { min-height: 0 !important; margin-top: 10px !important; font-size: 23px !important; }
  .feat-card > div:last-child { padding: 22px 22px 24px !important; }
  .feat-card > div:first-child { min-height: 128px !important; padding: 20px 22px !important; }
  .feat-card > div:first-child > div[style*="150px"] { font-size: 96px !important; right: 8px !important; top: 8px !important; }

  /* Роут-визуал демо: адаптивная высота, чтобы под картинкой не было пустоты */
  .route-visual { min-height: 0 !important; aspect-ratio: 1.55 !important; }
  .route-visual img { height: 100% !important; object-fit: cover !important; }

  .ow-stage .ow-slide img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: top center !important; }
  /* Лид-модалка: в одну колонку, промо-панель скрыта, контент скроллится */
  .lead-modal { grid-template-columns: 1fr !important; max-height: 92vh !important; }
  .lead-modal-promo { display: none !important; }
  /* Демо-hero: обе кнопки одинаковой ширины */
  .demo-hero-cta > a { flex: 1 1 240px !important; }
  /* Блог: секции «направления» и «главное за неделю» компактнее */
  [style*="padding: 64px 24px"] { padding-top: 28px !important; padding-bottom: 28px !important; }
  /* Тарифы: блок «как устроены тарифы» — гарантированный свайп-слайдер */
  .t-how { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; gap: 12px !important; margin-left: -18px !important; margin-right: -18px !important; padding: 4px 18px 14px !important; }
  .t-how > * { flex: 0 0 84% !important; width: 84% !important; max-width: 84% !important; scroll-snap-align: start; box-sizing: border-box; }

  /* Универсальное скрытие на телефоне */
  .m-hide { display: none !important; }
}

/* =====================================================================
   Scroll-reveal · «дорогое» появление элементов при попадании в вид.
   Чистый CSS (view-timeline), без JS — переживает ре-рендеры React.
   Только там, где браузер поддерживает; иначе элементы видны сразу.
   ===================================================================== */
@keyframes s360RevealUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jvqGlow { 0%, 100% { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); transform: translateX(0); box-shadow: none; } 50% { border-color: rgba(109,86,232,0.6); background: rgba(109,86,232,0.16); transform: translateX(5px); box-shadow: 0 6px 20px rgba(109,86,232,0.25); } }
@media (prefers-reduced-motion: no-preference) {
  .jvq { animation: jvqGlow 7s ease-in-out infinite; will-change: transform; }
  .jvq:nth-child(1) { animation-delay: 0s; }
  .jvq:nth-child(2) { animation-delay: 1.4s; }
  .jvq:nth-child(3) { animation-delay: 2.8s; }
  .jvq:nth-child(4) { animation-delay: 4.2s; }
  .jvq:nth-child(5) { animation-delay: 5.6s; }
}
@keyframes s360RevealSoft { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* --- Основная CTA-кнопка: блеск + мягкая пульсация, работает на всех страницах --- */
@keyframes ctaSheen { 0% { left: -70%; } 55%, 100% { left: 130%; } }
@keyframes ctaGlow { 0%, 100% { box-shadow: 0 10px 30px rgba(109,86,232,0.35); } 50% { box-shadow: 0 14px 42px rgba(109,86,232,0.62); } }
.cta-primary { position: relative; overflow: hidden; animation: ctaGlow 3s ease-in-out infinite; }
.cta-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 55%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); animation: ctaSheen 3.6s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cta-primary { animation: none; } .cta-primary::after { display: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-item { animation: s360RevealUp 1s linear both; animation-timeline: view(); animation-range: entry 3% entry 30%; }
    .reveal-soft { animation: s360RevealSoft 1s linear both; animation-timeline: view(); animation-range: entry 0% entry 34%; }
  }
}