/* Стили страниц раздела «Интеграции — integrations, telephony, payments, mail, analytics».

   Подключён на всех страницах сайта (шаблон SITE_PAGE в build.py) после
   styles.css. Общий язык оформления — токены, кнопки, первый экран, плитки,
   подложки сцен .stage — живёт в styles.css; здесь только то, что нужно
   страницам этого раздела. Правила начинайте с `body[data-page="имя"]` или с класса блока,
   а не с голого тега: файл читают все страницы сайта.

   Страницы раздела (и «Данные и надёжность», security) собраны одинаково
   (фаза 2 «Рядом», 09.10.2026): первый экран — заголовок слева, вводный абзац
   справа (`.ihero`), под ними широкая подложка со сценой и заметками от руки;
   дальше — общие блоки styles.css (`.sec`, `.duo`, `.cmp`, `.steplist`,
   `.numlist`, `.cta-card`) и несколько своих ниже. Классы с приставкой `i`
   — этого раздела. */

/* ── Первый экран: заголовок слева, абзац справа, сцена под ними ── */
.ihero {
  padding-bottom: 0;
}

.ihero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 24px 64px;
  align-items: end;
}

.ihero__title h1 {
  margin-top: 20px;
  max-width: 16ch;
}

.ihero__text .lead:first-child {
  margin-top: 0;
}

.ihero__text .lead + .lead {
  margin-top: 16px;
}

.ihero__stage {
  margin-top: clamp(40px, 5.4vw, 80px);
}

.ihero__stage > .stage__in {
  max-width: 780px;
}

@media (max-width: 980px) {
  .ihero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ihero__title h1 {
    max-width: 18ch;
  }
}

/* Раздел сразу под первым экраном — ближе к нему. */
.sec--first {
  padding-top: clamp(64px, 8vw, 112px);
}

/* ── «Как сейчас / в кабинете» строками: номер, как сейчас, как в кабинете ── */
.cmp--2 {
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.cmp--2 .cmp__row {
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 20px 40px;
}

.cmp--2 .cmp__row .cmp__lbl {
  display: block;
  margin-bottom: 10px;
}

.cmp--2 .cmp__now p {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.cmp__no {
  font-size: 12px;
  color: var(--muted-2);
  padding-top: 1px;
}

@media (max-width: 900px) {
  .cmp--2 .cmp__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .cmp--2 .cmp__now p {
    font-size: 17px;
  }

  .cmp__no {
    display: none;
  }
}

/* ── Текст строки «текст + сцена» с заголовком раздела и галочками ── */
.duo__text .sec-head h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.duo__text .checks {
  margin-top: 28px;
}

.duo__text .sec-head .lead {
  font-size: 17px;
}

/* Снимок экрана кабинета на подложке. */
.ishot .stage {
  padding: clamp(14px, 3vw, 36px);
}

.duo .ishot .stage {
  min-height: 0;
}

.ishot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 50px -28px rgba(40, 50, 80, 0.38);
}

/* ── Список слева, сцена справа и стоит, пока список листается ── */
.isplit {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.isplit__stage {
  position: sticky;
  top: 96px;
}

.isplit__stage .stage {
  min-height: 0;
}

@media (max-width: 980px) {
  .isplit {
    grid-template-columns: minmax(0, 1fr);
  }

  .isplit__stage {
    position: static;
    order: -1;
  }
}

/* Нумерованные строки с заголовком и выводом. */
.inum {
  margin-top: 0;
}

.inum li {
  padding: 24px 0;
}

.inum h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.inum li p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.inum li .inum__us {
  margin-top: 12px;
  color: var(--ink);
  font-weight: 500;
}

/* Шаги строками: второй абзац — вывод. */
.steplist .steplist__us {
  margin-top: 12px;
  color: var(--ink);
  font-weight: 500;
}

/* ── Плитки без коробок: черта сверху ── */
.tiles--lines {
  margin-top: 48px;
  gap: 8px 40px;
}

.tiles--lines .tile {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 0 12px;
}

.tiles--lines .tile p {
  margin-top: 10px;
}

.tiles--lines .tile p strong {
  font-weight: 500;
  color: var(--ink);
}

/* Названия операторов и сервисов — таблетками. */
.ilogos {
  margin-top: 36px;
  gap: 8px;
}

.ilogos span {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}

/* Первый блок раздела без своего отступа сверху. */
.duos--top {
  margin-top: 0;
}

.duo__text .duo__us {
  color: var(--ink);
}

.duo__text .duo__us strong {
  font-weight: 500;
}

.tiles--flush {
  margin-top: 0;
}

.tile__no {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted-2);
}

.tiles--lines .tile__kicker {
  margin: 0 0 12px;
}

/* ── Числа на подложке («2 счётчика», «0 счётчиков») ── */
.istats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.istats__item {
  padding: 26px 24px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 22px 44px -30px rgba(70, 55, 35, 0.4);
}

.istats__value {
  font-size: clamp(72px, 8vw, 112px);
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.istats__label {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 520px) {
  .istats {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Интеграции: лучи от знака к плашкам ──
   Ядро в центре, плашки сервисов вокруг; луч идёт из центра ядра в центр
   плашки (координаты плашки и конца луча — одни и те же числа, их пишет
   разметка), поэтому каждый луч упирается в свою плашку при любой ширине.
   Короба два: широкий (1000 × 460) и квадратный для телефона (400 × 400),
   у каждого свой рисунок лучей и свои места плашек (`--x/--y`, `--mx/--my`).
   По лучу бежит точка; когда она доходит, плашка мягко вспыхивает. */
.ihub > .stage__in {
  max-width: 900px;
}

.hub {
  position: relative;
  aspect-ratio: 1000 / 460;
}

.hub__rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hub__rays--narrow {
  display: none;
}

.hub__lines path {
  fill: none;
  stroke: rgba(30, 29, 28, 0.16);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.hub__flow {
  fill: none;
  stroke: rgba(30, 29, 28, 0.42);
  stroke-width: 1.4;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: hub-flow 1.6s linear infinite;
}

@keyframes hub-flow {
  to { stroke-dashoffset: -22; }
}

.hub__pulse {
  fill: #d39a52;
}

.hub__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(92px, 14%, 132px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 30%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 30px 60px -28px rgba(70, 50, 30, 0.45);
}

.hub__core img {
  width: 46%;
  height: auto;
}

.hub__core::before,
.hub__core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 34%;
  border: 1px solid rgba(30, 29, 28, 0.1);
  animation: hub-ring 3.1s ease-out infinite;
}

.hub__core::after {
  animation-delay: 1.55s;
}

@keyframes hub-ring {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.hub__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 28px -18px rgba(70, 50, 30, 0.45);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  animation: hub-hit 3.1s ease-out var(--d, 0s) infinite;
}

@keyframes hub-hit {
  0% { box-shadow: 0 0 0 0 rgba(211, 154, 82, 0.45), 0 14px 28px -18px rgba(70, 50, 30, 0.45); }
  30% { box-shadow: 0 0 0 7px rgba(211, 154, 82, 0), 0 14px 28px -18px rgba(70, 50, 30, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(211, 154, 82, 0), 0 14px 28px -18px rgba(70, 50, 30, 0.45); }
}

.hub__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.hub__dot--sage { background: #6f9a6a; }
.hub__dot--amber { background: #d39a52; }
.hub__dot--blue { background: #6f8fd2; }

@media (max-width: 700px) {
  .hub {
    aspect-ratio: 1;
  }

  .hub__rays--wide {
    display: none;
  }

  .hub__rays--narrow {
    display: block;
  }

  .hub__node {
    left: var(--mx);
    top: var(--my);
    padding: 7px 11px 7px 10px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hub__pulse {
    display: none;
  }

  .hub__flow,
  .hub__node,
  .hub__core::before,
  .hub__core::after {
    animation: none;
  }
}

/* ── Интеграции: слайды в языке «Рядом» ──
   Разметку слайдера читает app.js, её не трогаем: белая карточка с тонкой
   рамкой, справа — рисунок на подложке. У каждого слайда своя подложка из
   семейства сцен; виден всегда один слайд. */
body[data-page="integrations"] .slider {
  margin-top: 40px;
}

body[data-page="integrations"] .slide {
  padding: 12px 12px 12px clamp(20px, 3.4vw, 48px);
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
}

body[data-page="integrations"] .slide__text {
  align-self: center;
  padding: 28px 0;
}

body[data-page="integrations"] .slide__text > p:not(.slide__n) {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

body[data-page="integrations"] .slide h3 {
  margin-top: 6px;
}

body[data-page="integrations"] .slide .slide__sub {
  font-family: var(--mono);
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

body[data-page="integrations"] .slide .logos span {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

body[data-page="integrations"] .slide__art {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: 380px;
  padding: clamp(18px, 3vw, 40px);
  border-radius: 18px;
  overflow: hidden;
}

body[data-page="integrations"] .slide:nth-child(1) .slide__art { background: linear-gradient(180deg, #f1f5f9 0%, #e6edf4 100%); }
body[data-page="integrations"] .slide:nth-child(2) .slide__art { background: linear-gradient(180deg, var(--cream) 0%, #fdeedb 40%, var(--peach) 100%); }
body[data-page="integrations"] .slide:nth-child(3) .slide__art { background: #ece9ef; }
body[data-page="integrations"] .slide:nth-child(4) .slide__art { background: linear-gradient(180deg, #eef1ea 0%, #dfe6d9 100%); }
body[data-page="integrations"] .slide:nth-child(5) .slide__art { background: linear-gradient(160deg, #f1eeea 0%, #e8e4de 100%); }
body[data-page="integrations"] .slide:nth-child(6) .slide__art { background: radial-gradient(70% 60% at 18% 8%, #f6f8fb 0, rgba(246, 248, 251, 0) 70%), #e4eaf0; }
body[data-page="integrations"] .slide:nth-child(7) .slide__art {
  background-color: #fbfaf7;
  background-image: linear-gradient(rgba(60, 50, 40, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 50, 40, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Детали рисунков — как окна сцен: белые, тонкая рамка, мягкая тень. */
body[data-page="integrations"] .slide__art .chain li,
body[data-page="integrations"] .slide__art .vis-rows li,
body[data-page="integrations"] .slide__art .vis-pane,
body[data-page="integrations"] .slide__art .vis-chat,
body[data-page="integrations"] .slide__art .vis-table {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 18px 40px -28px rgba(70, 45, 10, 0.32);
}

body[data-page="integrations"] .slide__art .chain {
  max-width: 400px;
  width: 100%;
  justify-self: center;
}

body[data-page="integrations"] .slide__art .chain li {
  border-radius: 14px;
  font-weight: 500;
}

body[data-page="integrations"] .slide__art .chain li:not(:last-child)::after {
  border-color: var(--muted-2);
  width: 7px;
  height: 7px;
  border-width: 1.5px;
}

body[data-page="integrations"] .slide__art .chain li.is-final {
  background: #fff;
  border-color: rgba(44, 118, 81, 0.35);
  color: #2c7651;
  box-shadow: 0 0 0 4px rgba(44, 118, 81, 0.08), 0 18px 40px -28px rgba(70, 45, 10, 0.32);
}

body[data-page="integrations"] .slide__art .chain--both li:not(:last-child)::after {
  background: var(--muted-2);
  width: 1.5px;
  border: 0;
}

body[data-page="integrations"] .slide__art .vis-file {
  background: var(--ink) !important;
  border-color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
}

body[data-page="integrations"] .vis-chip {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
}

body[data-page="integrations"] .vis-chip--ok { background: rgba(44, 118, 81, 0.1); color: #2c7651; }
body[data-page="integrations"] .vis-chip--warn { background: rgba(214, 140, 40, 0.15); color: #9a530d; }
body[data-page="integrations"] .vis-chip--off { background: rgba(0, 0, 0, 0.05); color: var(--muted); }

body[data-page="integrations"] .vis-rows li {
  font-weight: 500;
}

body[data-page="integrations"] .vis-pane {
  border-radius: 16px;
}

body[data-page="integrations"] .vis-pane--closed {
  background: rgba(255, 255, 255, 0.55);
  border-style: dashed;
  box-shadow: none;
}

body[data-page="integrations"] .vis-pane__title {
  font-weight: 600;
}

body[data-page="integrations"] .vis-bars i {
  background: linear-gradient(180deg, #d9a77f, #ecd2a6);
  opacity: 1;
}

body[data-page="integrations"] .vis-lock,
body[data-page="integrations"] .vis-lock::before {
  background-color: var(--muted-2);
  border-color: var(--muted-2);
}

body[data-page="integrations"] .vis-lock::before {
  background: none;
}

body[data-page="integrations"] .vis-chat__who {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="integrations"] .vis-chat__msg {
  background: #f4f1ec;
}

body[data-page="integrations"] .vis-chat__btn,
body[data-page="integrations"] .vis-buttons span {
  border-radius: 999px;
  background: var(--ink);
  font-weight: 600;
}

body[data-page="integrations"] .vis-buttons span + span {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.14);
}

body[data-page="integrations"] .vis-table {
  border-radius: 16px;
}

body[data-page="integrations"] .vis-table__row--head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

body[data-page="integrations"] .vis-table__row span:last-child {
  font-weight: 600;
}

@media (max-width: 1100px) {
  body[data-page="integrations"] .slide {
    padding: 28px 12px 12px;
  }

  body[data-page="integrations"] .slide__text {
    padding: 0 12px;
  }

  body[data-page="integrations"] .slide__art {
    min-height: 0;
  }
}

/* Метка раздела внутри текста строки: правило `.duo__text p` её не трогает. */
.duo__text .sec-head p.eyebrow {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}

.duo__text p.duo__us {
  color: var(--ink);
}

/* Строка, где текст длиннее сцены: колонки поровну. */
.duo--even,
.duo--even.duo--rev {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
  .duo--even,
  .duo--even.duo--rev {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Слайд на узком экране: рисунок занимает остаток высоты карточки
   (все слайды стоят в одной ячейке и берут высоту самого высокого). */
@media (max-width: 1100px) {
  body[data-page="integrations"] .slider.is-on .slide {
    grid-template-rows: auto 1fr;
    align-content: stretch;
  }
}

/* Чип внутри сцены — подпись, а не цель касания: правило «44 точки на
   телефоне» для `.chip` из styles.css раздувало его в таблетку. */
body:is([data-page="integrations"], [data-page="telephony"], [data-page="payments"], [data-page="mail"], [data-page="analytics"], [data-page="security"]) .sc .chip {
  min-height: 0;
}