/* =============================================================================
   БотКлик — компоненты
   Подключается ПОСЛЕ styles.css: переопределяет старые стили новыми.
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════
   Кнопки
   Было: плоская синяя заливка с тяжёлой тенью снизу.
   Стало: градиент, блик по краю, свечение при наведении.
   ══════════════════════════════════════════════════════════════════════ */

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: #fff;
  background: var(--gradient-brand);
  border: none;
  box-shadow: var(--glow-md);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
}

/* Блик, пробегающий по кнопке при наведении */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 75%
  );
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: -1;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-lg);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:active { transform: translateY(0) scale(0.985); }

.btn-primary svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.btn-primary:hover svg { transform: translateX(4px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  /* На светлом фоне — тёмный текст, иначе кнопка исчезает */
  color: var(--color-gray-900, #111827);
  background: transparent;
  border: 1px solid var(--color-gray-300, #d1d5db);
  transition: all var(--transition);
}
.btn-outline:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
  transform: translateY(-2px);
}

/* Стрелка ведёт себя так же, как в .btn-primary — одинаковый жест
   на обеих кнопках одной пары читается как единый стиль. */
.btn-outline svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.btn-outline:hover svg { transform: translateX(4px); }

/* В тёмном контексте — наоборот */
.section--dark .btn-outline,
.hero .btn-outline {
  color: var(--ink-primary);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-default);
}
.section--dark .btn-outline:hover,
.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand-400);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   Карточки
   ══════════════════════════════════════════════════════════════════════ */

/* Подсветка, следующая за курсором. Координаты пишет JS в --mx/--my.
   На светлой карточке синее свечение почти не видно — там вместо него
   мягкая тень, будто карточку слегка приподняли под курсором. На тёмной
   секции наоборот: тень не читается на тёмном, там нужен свет. */
.card-spotlight {
  position: relative;
}
.card-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    480px circle at var(--mx, 50%) var(--my, 50%),
    rgba(15, 23, 42, 0.10),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.card-spotlight:hover::after { opacity: 1; }

.section--dark .card-spotlight::after,
.hero .card-spotlight::after {
  background: radial-gradient(
    480px circle at var(--mx, 50%) var(--my, 50%),
    rgba(96, 165, 250, 0.22),
    transparent 60%
  );
}

/* Наклон карточки за курсором. Углы считает JS. */
.card-tilt {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateZ(0);
  transition: transform var(--dur-fast) var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════════════
   Секции
   ══════════════════════════════════════════════════════════════════════ */

.section {
  position: relative;
  padding-block: var(--section-py);
}

.section__header {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}

.section__title {
  font-size: var(--text-4xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section__subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  /* Цвет — от контекста: на светлом сером, на тёмном приглушённо-белым */
  color: var(--color-gray-600, #4b5563);
}
.section--dark .section__subtitle,
.hero .section__subtitle {
  color: var(--ink-tertiary);
}

/* .section--gray остаётся светлой, как в styles.css: внутри тёмный текст.
   Тёмные блоки помечаются отдельным классом .section--dark. */
.section--dark {
  background: linear-gradient(135deg, var(--color-navy-900, #060e1f), var(--color-navy-800, #0d1f3c));
  border-block: 1px solid var(--line-subtle);
}

/* ══════════════════════════════════════════════════════════════════════
   Анимации появления
   Базовое состояние задаётся только при поддержке JS (класс js-anim
   ставит скрипт) — иначе при отключённом JS контент останется скрытым.
   ══════════════════════════════════════════════════════════════════════ */

.js-anim [data-anim] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.js-anim [data-anim="up"]    { transform: translateY(28px); }
.js-anim [data-anim="down"]  { transform: translateY(-28px); }
.js-anim [data-anim="left"]  { transform: translateX(-32px); }
.js-anim [data-anim="right"] { transform: translateX(32px); }
.js-anim [data-anim="zoom"]  { transform: scale(0.93); }
.js-anim [data-anim="blur"]  { filter: blur(10px); }

.js-anim [data-anim].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ══════════════════════════════════════════════════════════════════════
   Полоса прогресса чтения
   ══════════════════════════════════════════════════════════════════════ */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--gradient-brand);
  z-index: 1000;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   Живая демонстрация диалога с ботом
   ══════════════════════════════════════════════════════════════════════ */

.chat-demo {
  /* Высота фиксированная, а не min-height: иначе окно росло по мере
     появления сообщений и вся секция дёргалась при каждой реплике.
     Переполнение уходит в прокрутку, скрипт доскроливает к последней. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5);
  height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-default) transparent;
}
.chat-demo::-webkit-scrollbar { width: 6px; }
.chat-demo::-webkit-scrollbar-track { background: transparent; }
.chat-demo::-webkit-scrollbar-thumb {
  background: var(--line-default);
  border-radius: 3px;
}

.chat-demo__msg {
  max-width: 78%;
  padding: 11px 16px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  animation: chatIn var(--dur-slow) var(--ease-spring) forwards;
}
.chat-demo__msg--user {
  align-self: flex-end;
  background: var(--gradient-brand);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-demo__msg--bot {
  align-self: flex-start;
  background: var(--surface-3);
  color: var(--ink-secondary);
  border: 1px solid var(--line-subtle);
  border-bottom-left-radius: 5px;
}
@keyframes chatIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Три точки «бот печатает» */
.chat-demo__typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 13px 16px;
}
.chat-demo__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: typingBounce 1.3s var(--ease-in-out) infinite;
}
.chat-demo__typing span:nth-child(2) { animation-delay: 0.16s; }
.chat-demo__typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   Кейсы
   ══════════════════════════════════════════════════════════════════════ */

.cases__grid {
  display: grid;
  /* min() обязателен: без него трек остаётся 320px и на экране 320–360px
     сетка вылезает за контейнер, появляется горизонтальный скролл. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-5);
}

/* Разделитель между группами карточек на странице с несколькими
   категориями (cases.html: «Сайты», «Боты», ...). Раньше отступ
   задавался инлайн-стилем (var(--space-9) = 96px) и не уменьшался
   на телефоне — на фоне остального ритма в 44px это смотрелось
   как лишняя дыра посреди страницы. */
.cases__grid--spaced { margin-bottom: var(--space-9, 96px); }
.section__header--group { margin-bottom: var(--space-6, 32px); }

/* Карточка живёт и на светлой, и на тёмной секции.
   По умолчанию — светлая; тёмный вариант ниже, под .section--dark. */
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.case-card:hover {
  transform: translateY(-6px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.section--dark .case-card {
  background: var(--surface-2);
  border-color: var(--line-subtle);
  box-shadow: none;
}
.section--dark .case-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: none;
}

.case-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #eef2f7, #dde5ef);
  overflow: hidden;
}
.section--dark .case-card__media {
  background: linear-gradient(135deg, var(--surface-3), var(--surface-1));
}
.case-card__media img,
.case-card__media svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.case-card:hover .case-card__media img { transform: scale(1.05); }

.case-card__body { padding: var(--space-5); }

.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.case-card__tag {
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-600, #2563eb);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.section--dark .case-card__tag { color: var(--brand-400); }

.case-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}
.case-card__desc {
  font-size: var(--text-sm);
  color: var(--color-gray-600, #4b5563);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}
.section--dark .case-card__desc { color: var(--ink-tertiary); }

/* Список возможностей внутри карточки-концепта (когда нет метрик реального проекта) */
.case-card__features {
  list-style: none;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.section--dark .case-card__features { border-top-color: var(--line-subtle); }
.case-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  /* Цвет от контекста: карточка живёт и на светлой, и на тёмной секции */
  color: var(--color-gray-600, #4b5563);
}
.section--dark .case-card__features li {
  color: var(--ink-tertiary);
}
.case-card__features li svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--brand-500, #3b82f6);
}
.section--dark .case-card__features li svg { color: var(--brand-400); }

/* ══════════════════════════════════════════════════════════════════════
   Карусель этапов (cases.html: «Как мы делаем сайт» / «...чат-бота»)

   Раньше это были два ряда по пять полноразмерных карточек — почти
   экран прокрутки на каждую нишу. Теперь один и тот же контент (текст
   этапов не менялся) живёт в двух карточках-каруселях: сайт и бот
   листаются независимо, видно один этап за раз.
   ══════════════════════════════════════════════════════════════════════ */

/* Переключатель «Сайт / Бот» над каруселью — виден один процесс за раз,
   вместо двух карточек рядом (JS: initStageSwitch в main.js). */
.stage-switch {
  display: flex;
  width: fit-content;
  gap: 4px;
  padding: 4px;
  margin: 0 auto var(--space-6);
  border-radius: var(--r-full);
  background: var(--color-gray-100, #f3f4f6);
  border: 1px solid var(--color-gray-200, #e5e7eb);
}
.section--dark .stage-switch {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-subtle);
}

.stage-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 20px;
  border: none;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--color-gray-600, #4b5563);
  font-family: inherit;
  font-size: var(--text-sm, 0.9rem);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.stage-switch__btn svg { width: 17px; height: 17px; }
.stage-switch__btn:hover { color: var(--brand-600, #2563eb); }
.stage-switch__btn.is-active {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--glow-sm, 0 2px 10px rgba(59, 130, 246, 0.3));
}
.stage-switch__btn.is-active:hover { color: #fff; }
.section--dark .stage-switch__btn { color: var(--ink-tertiary); }
.section--dark .stage-switch__btn:hover { color: #fff; }

.stage-carousel__wrap {
  max-width: 640px;
  margin-inline: auto;
}

.stage-carousel {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.section--dark .stage-carousel {
  background: var(--surface-2);
  border-color: var(--line-subtle);
  box-shadow: none;
}

.stage-carousel__head {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}
.section--dark .stage-carousel__head { border-bottom-color: var(--line-subtle); }

.stage-carousel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-600, #2563eb);
}
.stage-carousel__icon svg { width: 20px; height: 20px; }
.section--dark .stage-carousel__icon { color: var(--brand-400); }

.stage-carousel__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-gray-900, #111827);
}
.section--dark .stage-carousel__name { color: var(--ink-primary); }

.stage-carousel__hint {
  font-size: 0.82rem;
  color: var(--color-gray-500, #6b7280);
}
.section--dark .stage-carousel__hint { color: var(--ink-muted); }

.stage-carousel__viewport {
  overflow: hidden;
  transition: height var(--dur-base) var(--ease-out);
}

.stage-carousel__track {
  display: flex;
  align-items: flex-start;
  transition: transform var(--dur-slow) var(--ease-out);
  touch-action: pan-y;
  cursor: grab;
  /* Без этого перетаскивание мышью для свайпа на десктопе попутно
     выделяет текст слайда — курсор «спотыкается», а следующий свайп
     тянет за собой выделенный текст вместо карусели. */
  user-select: none;
  -webkit-user-select: none;
}
.stage-carousel__track:active { cursor: grabbing; }

.stage-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  min-height: 280px;
  padding: 22px 24px;
  text-align: center;
}
.stage-carousel__slide .case-card__tags { justify-content: center; margin-bottom: 10px; }
/* Заголовок и описание центрируются наследованием text-align от слайда.
   Список остаётся строками «иконка + текст» слева направо — это
   читается легче построчного центрирования, но сам блок списка
   центрируем целиком, каждую строку по её собственной ширине. */
.stage-carousel__slide .case-card__features {
  align-items: center;
}

.stage-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 12px 20px 20px;
}

.stage-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-gray-200, #e5e7eb);
  background: #fff;
  color: var(--color-gray-600, #4b5563);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), transform var(--dur-fast) var(--ease-out);
}
.stage-carousel__arrow:hover { border-color: var(--brand-500); color: var(--brand-600, #2563eb); }
.stage-carousel__arrow:active { transform: scale(0.92); }
.stage-carousel__arrow svg { width: 15px; height: 15px; }
.section--dark .stage-carousel__arrow {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-default);
  color: var(--ink-tertiary);
}
.section--dark .stage-carousel__arrow:hover { border-color: var(--brand-400); color: #fff; }

.stage-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-gray-300, #d1d5db);
  cursor: pointer;
  transition: background var(--transition), width var(--transition);
}
.stage-carousel__dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--gradient-brand);
}
.section--dark .stage-carousel__dot { background: var(--line-default); }

@media (max-width: 639px) {
  .stage-carousel__slide { padding: 18px; }
  .stage-carousel__head { padding: 16px 18px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Гарантии / условия работы
   ══════════════════════════════════════════════════════════════════════ */

.guarantees__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-5);
}

.guarantee-card {
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-subtle);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.guarantee-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(59, 130, 246, 0.4);
}

.guarantee-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-4);
  border-radius: var(--r-md);
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  transition: transform var(--dur-base) var(--ease-spring);
}
.guarantee-card:hover .guarantee-card__icon {
  transform: scale(1.12) rotate(-4deg);
}
.guarantee-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--brand-400);
}

.guarantee-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.guarantee-card p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-tertiary);
}

/* На светлой секции карточка тоже должна читаться */
.section:not(.section--dark) .guarantee-card {
  background: #fff;
  border-color: var(--color-gray-200, #e5e7eb);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.section:not(.section--dark) .guarantee-card p {
  color: var(--color-gray-600, #4b5563);
}
.section:not(.section--dark) .guarantee-card__icon svg {
  color: var(--brand-600, #2563eb);
}

/* ══════════════════════════════════════════════════════════════════════
   Мелочи
   ══════════════════════════════════════════════════════════════════════ */

/* Точка «онлайн» с расходящимся кольцом */
.online-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-emerald);
}
.online-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent-emerald);
  animation: dotRipple 2s var(--ease-out) infinite;
}
@keyframes dotRipple {
  0%   { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Шапка, уплотняющаяся при скролле */
.header--scrolled {
  background: rgba(5, 11, 24, 0.82);
  border-bottom: 1px solid var(--line-subtle);
}
@supports (backdrop-filter: blur(1px)) {
  .header--scrolled {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

/* Сетка-фон для секций */
.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent);
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════
   Двухколоночные секции

   auto-fit с minmax(320px, 1fr) при промежуточной ширине контейнера
   оставлял колонки узкими, и заголовок ломался на три строки.
   Явные точки переключения дают предсказуемый результат.
   ══════════════════════════════════════════════════════════════════════ */

.split-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .split-section {
    grid-template-columns: minmax(420px, 1fr) minmax(400px, 1fr);
    gap: var(--space-8);
  }
}

/* В узкой колонке заголовок не должен занимать всю ширину строки:
   так он читается как блок, а не как рваная лесенка. */
.split-section__title {
  font-size: var(--text-3xl);
  text-align: left;
  margin-bottom: var(--space-4);
  max-width: 18ch;
}
@media (min-width: 1200px) {
  .split-section__title { max-width: 20ch; }
}

.split-section__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  /* Цвет — от контекста: на светлом сером, на тёмном приглушённо-белым (как .section__subtitle) */
  color: var(--color-gray-600, #4b5563);
  margin-bottom: var(--space-6);
  max-width: 46ch;
}
.section--dark .split-section__lead,
.hero .split-section__lead {
  color: var(--ink-tertiary);
}

.split-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.split-section__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  color: var(--color-gray-700, #374151);
  line-height: var(--leading-snug);
}
.section--dark .split-section__item,
.hero .split-section__item {
  color: var(--ink-secondary);
}
.split-section__item .online-dot {
  flex: 0 0 auto;
  margin-top: 8px;
}

/* Ширину контейнера тоже увеличиваем: 1240px против прежних 1200px
   даёт колонкам заметно больше воздуха. */
.container { max-width: var(--container-max); }


/* ══════════════════════════════════════════════════════════════════════
   Контекстные цвета

   Сайт светлый, тёмные — отдельные секции (герой, section--dark).
   Внутри них текст светлый, снаружи остаётся исходным.

   Блок лежит здесь, а не в design-system.css: этот файл грузится
   последним, иначе правила из styles.css перебивали бы наши.
   ══════════════════════════════════════════════════════════════════════ */

.section--dark,
.hero {
  color: var(--ink-secondary);
}

.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.hero h1, .hero h2, .hero h3 {
  color: var(--ink-primary);
}

.section--dark .section__subtitle,
.hero .hero__description {
  color: var(--ink-tertiary);
}

/* Светлые секции: заголовки остаются тёмными, как было */
.section:not(.section--dark) h1,
.section:not(.section--dark) h2,
.section:not(.section--dark) h3,
.section:not(.section--dark) h4 {
  color: var(--color-gray-900, #111827);
}


/* ══════════════════════════════════════════════════════════════════════
   Мобильная адаптация — сводный блок

   Файл грузится последним, поэтому правки здесь перекрывают базовые
   стили без !important. Всё, что касается телефонов и планшетов,
   собрано в одном месте, чтобы не искать по трём файлам.
   ══════════════════════════════════════════════════════════════════════ */

/* Ничто не должно вылезать за ширину экрана и рождать
   горизонтальный скролл — на телефоне это выглядит как поломка. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table { max-width: 100%; }

@media (max-width: 767px) {
  /* ── Поля ввода ──────────────────────────────────────────────────
     iOS зумит страницу при фокусе, если шрифт меньше 16px.
     Пользователь потом не может вернуть масштаб — форма «ломается». */
  .contact__input,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Комфортная высота полей и чекбокса под палец */
  .contact__input { min-height: 48px; }
  .contact__consent-checkbox { width: 20px; height: 20px; }
  .contact__submit-btn { min-height: 52px; }

  /* ── Цели нажатия ───────────────────────────────────────────────
     Рекомендация WCAG — не меньше 44×44px. */
  .footer__legal a,
  .footer__contact a,
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer__social {
    min-width: 44px;
    min-height: 44px;
  }
  .faq__question {
    min-height: 56px;
  }

  /* ── Секции ─────────────────────────────────────────────────────
     На телефоне вертикальные отступы в 60px съедают экран.
     Единое правило для ВСЕХ .section — на каждой странице сайта
     блоки используют один и тот же класс, так что 44px применяются
     одинаково везде: на главной, в услугах, ботах, ценах, кейсах. */
  .section { padding: 44px 0; }
  .section__header { margin-bottom: 28px; }
  .section__header--group { margin-bottom: 20px; }
  .section__title { font-size: 1.5rem; }
  .section__subtitle { font-size: 0.95rem; }
  .cases__grid--spaced { margin-bottom: 32px; }

  /* Футер — не .section, но по той же логике: 64px сверху на телефоне
     смотрелись тяжелее, чем отступы у остальных блоков. */
  .footer { padding: 40px 0 24px; }

  /* ── Сетки в одну колонку ───────────────────────────────────────── */
  .cases__grid,
  .guarantees__grid { gap: 16px; }

  .case-card__body { padding: 18px; }
  .case-card__title { font-size: 1.05rem; }
  .guarantee-card { padding: 18px; }

  /* Двухколоночный блок «бот отвечает» — текст выше, чат ниже */
  .split-section { gap: 28px; }
  .split-section__title { font-size: 1.5rem; max-width: none; }
  .split-section__lead { font-size: 0.95rem; margin-bottom: 20px; }
  .split-section__list { gap: 12px; margin-bottom: 24px; }

  /* Демо-чат: фиксированная высота на десктопе слишком велика для телефона */
  .chat-demo { height: 340px; }
  .chat-demo__msg { max-width: 88%; font-size: 0.85rem; }

  /* ── Плавающая кнопка ───────────────────────────────────────────
     Учитываем «шторку» iPhone, иначе кнопка попадает под неё. */
  .sticky-cta {
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
  }

  /* Модалка: кнопка закрытия должна быть удобной для пальца */
  .modal__close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Совсем узкие экраны (iPhone SE и подобные) */
@media (max-width: 380px) {
  .section__title { font-size: 1.35rem; }
  .case-card__tags { gap: 6px; }
  .case-card__tag { padding: 3px 9px; font-size: 0.7rem; }
  .hero__robot { width: 170px; }
  .nav__logo-text { font-size: 1.15rem; }
}

/* Горизонтальная ориентация телефона: hero на 100vh не помещается */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 90px 0 48px; }
  .hero__image { padding: 24px 20px; }
  .hero__robot { width: 160px; }
  .mobile-menu { overflow-y: auto; }
}

/* Шаги процесса: пять карточек с текстом.
   В две колонки на узком экране заголовки рвутся по слогам —
   ниже 520px разворачиваем в одну колонку.

   Раньше здесь была попытка сделать ряд «кружок слева, текст справа»
   через grid-template-columns: 44px 1fr на самой карточке. В карточке
   три ребёнка (кружок, h3, p), а колонок только две — сетка сама
   перенесла третий элемент (p) на новую строку в ПЕРВУЮ колонку,
   под кружок, а не под заголовок. Отсюда и «кривое выравнивание».
   Проще и надёжнее — оставить карточку такой же, как в двухколоночной
   раскладке (кружок сверху по центру, текст под ним), просто в одну
   колонку на всю ширину. */
@media (max-width: 520px) {
  .process__grid { grid-template-columns: 1fr; gap: 10px; }
  .process__step { padding: 20px 18px; }
}

/* Карточки услуг и тарифов */
@media (max-width: 639px) {
  .package-card__inner { padding: 20px 16px; }
  .package-card__price { font-size: 1.6rem; }
  .package-card__btn { min-height: 48px; }
  .service-card__tags { gap: 6px; }
  .service-card__tag { font-size: 0.72rem; padding: 3px 9px; }
}

/* ============================================================================
   Карточки услуг и ботов на тёмном фоне.

   Эти блоки пришли со страниц «Сайты» и «Чат-боты», которые были сплошь
   светлыми, поэтому тёмных вариантов у них не существовало. После слияния
   в «Кейсы» секции чередуются светлый/тёмный, и без этих правил карточки
   на тёмной секции остались бы светло-серыми с почти нечитаемым текстом.

   Цвета берём из тех же переменных, что и .section--dark .case-card —
   иначе два вида карточек на одной странице разъедутся по оттенкам.
   ========================================================================== */
.section--dark .service-card,
.section--dark .bot-card {
  background: var(--surface-2);
  border-color: var(--line-subtle);
  box-shadow: none;
}

.section--dark .service-card:hover,
.section--dark .bot-card:hover {
  background: var(--surface-3, #16273f);
  border-color: var(--brand-400);
  box-shadow: none;
}

.section--dark .service-card h3,
.section--dark .bot-card h3 { color: var(--ink-primary, #f8fafc); }

.section--dark .service-card p,
.section--dark .bot-card__desc { color: var(--ink-tertiary); }

.section--dark .bot-card__feature { color: var(--ink-secondary); }

.section--dark .service-card__tag {
  background: rgba(96, 165, 250, .12);
  border-color: rgba(96, 165, 250, .3);
  color: var(--brand-400);
}

/* Плашки платформ — на тёмном фоне светлая заливка выглядит заплаткой. */
.section--dark .chatbots__platform {
  background: var(--surface-2);
  border-color: var(--line-subtle);
  color: var(--ink-secondary);
}

/* Мини-карточки цен (prices.html) — раньше жили только на светлых
   секциях. На тёмных (после чередования фона блоков) без этого текст
   заголовка и цены остаётся тёмно-синим на тёмно-синем — невидим. */
.section--dark .price-mini__card {
  background: var(--surface-2);
  border-color: var(--line-subtle);
  box-shadow: none;
}
.section--dark .price-mini__card:hover {
  border-color: var(--brand-400);
  box-shadow: none;
}
.section--dark .price-mini__card h3 { color: var(--ink-primary); }
.section--dark .price-mini__val { color: var(--ink-primary); }
.section--dark .price-mini__val--free { color: #4ade80; }
.section--dark .price-mini__row { border-bottom-color: var(--line-subtle); }

/* Шаги «Стратегии» на about.html — тот же переход на тёмный фон. */
.section--dark .strategy__step-title { color: var(--ink-primary); }
.section--dark .strategy__step-desc { color: var(--ink-tertiary); }

/* ══════════════════════════════════════════════════════════════════════
   Карусель карточек на мобильных

   Любой грид с карточками, помеченный data-mobile-carousel, на ширине
   ≤767px превращается из вертикального стека в горизонтальную ленту
   со scroll-snap: карточки листаются свайпом, а не скроллом через
   весь блок. JS не нужен — snap нативный, браузер сам гасит инерцию
   и прилипает к следующей карточке.

   Блок лежит в самом конце файла: у части гридов (process__grid,
   services__cards и т.п.) уже есть свои collables по grid-template-columns
   на этих же брейкпоинтах в styles.css — правило должно грузиться позже,
   чтобы наверняка их перебить.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  [data-mobile-carousel] {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 0;
    padding-bottom: 6px;
    scrollbar-width: none;
    /* Только в режиме карусели (эта секция активна лишь на ≤767px) —
       на десктопе тот же грид остаётся обычным, текст в карточках
       по-прежнему можно выделять и копировать. */
    user-select: none;
    -webkit-user-select: none;
  }
  [data-mobile-carousel]::-webkit-scrollbar { display: none; }

  /* Одна карточка на экран: ширина = ширине карусели, без «выглядывания»
     соседней. align-items: flex-start выше — иначе flex растягивал бы
     все карточки в ряд по высоте самой длинной (в т.ч. невидимые
     соседние), и короткая карточка получала пустой хвост и вертикальный
     скролл на пустом месте. */
  [data-mobile-carousel] > * {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Список наследует gap от исходного .xxx__grid { gap: … } —
     переопределяем только там, где в оригинале gap: 0 (process__grid). */
  .process__grid[data-mobile-carousel] { gap: 16px; }

  /* «5 простых шагов» и «Какой сайт вам нужен?» — карточки короткие
     и почти одной длины, поэтому здесь возвращаем растяжение по высоте
     самой длинной в ряду (flex-start выше — общее правило, снятое
     специально из-за package-card/guarantee-card с разной длиной
     контента, там растяжение создавало пустой хвост и лишний скролл). */
  .process__grid[data-mobile-carousel],
  .services__cards[data-mobile-carousel] {
    align-items: stretch;
  }

}

/* .benefit-pair существует только как разметочный крючок для мобильной
   карусели ниже. На десктопе он не должен ничего менять в сетке
   .about__benefits — display:contents убирает обёртку из потока,
   и грид по-прежнему видит шесть .benefit-card напрямую. Правило
   объявлено до media-запроса намеренно: иначе оно, как более позднее
   по каскаду при равной специфичности, перебивало бы мобильный
   display:flex ниже вместо того, чтобы быть базой для него. */
.benefit-pair {
  display: contents;
}

@media (max-width: 767px) {
  /* «6 причин работать с нами» больше не карусель со свайпом — три пары
     дают статичную сетку в две колонки: 3 строки на весь экран сразу,
     без «страниц» и точек-индикаторов. */
  .benefit-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* Иконка и текст в ряд из .benefit-card (styles.css) в колонке ~150px
     сжимали текст до нечитаемой полоски. Иконка сверху, текст на всю
     ширину карточки — так у описания есть место для нормального переноса. */
  .benefit-pair .benefit-card {
    flex-direction: column;
    padding: 14px;
    gap: 8px;
  }
  .benefit-pair .benefit-card__icon {
    width: 36px;
    height: 36px;
    margin-top: 0;
  }
}

/* Точки + стрелки под каруселью (добавляются на JS, initMobileCarouselNav
   в main.js). Без этого блока карусель листается, но ничто на экране
   не подсказывает, что там больше одной карточки — прячем панель на
   десктопе и показываем только там, где сама карусель активна.
   .stage-carousel__nav уже задаёт display:flex без медиа-условия —
   здесь этот блок ниже по файлу, поэтому наше display:none побеждает
   по порядку каскада, а внутри @media его снимаем обратно. */
.mobile-carousel-nav { display: none; }
@media (max-width: 767px) {
  .mobile-carousel-nav {
    display: flex;
    margin-top: 6px;
  }
}