/* ═══ Services — широкие строки-аккордеоны с инверсией ═══ */

.services { --title-w: 22ch; --title-mb: 64px; }

.svc__list { border-top: 1px solid var(--lline); }

.svc__row {
  border-bottom: 1px solid var(--lline);
  color: var(--lfg);
  cursor: pointer;
  transition: background .32s var(--ease), color .32s var(--ease);
}

/* Раскрытие: hover — чисто CSS, клик — фиксация класса .is-pinned из JS.
   Высоту панели JS кладёт в --panel-h, поэтому transition остаётся плавным. */
.svc__row:hover,
.svc__row.is-pinned {
  background: #111;
  color: #FAFAFA;
}

/* h3 остаётся ради иерархии заголовков, но визуально не должен ничего добавлять */
.svc__heading { margin: 0; font: inherit; font-weight: inherit; }

/* Заголовок строки — настоящая <button>: это даёт клавиатуру и озвучку
   состояния через aria-expanded. Сбрасываем браузерные стили кнопки. */
.svc__head {
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 96px 1fr 44px;
  gap: 28px;
  align-items: start;
  padding: 34px 0;
  transition: padding .32s var(--ease);
}
.svc__row:hover .svc__head,
.svc__row.is-pinned .svc__head { padding-top: 42px; }

.svc__num {
  font-family: var(--mono);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  opacity: .4;
  line-height: 1;
}

.svc__title {
  display: block;
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.9vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.svc__desc {
  display: block;
  margin: 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.55;
  opacity: .55;
}

.svc__arrow {
  justify-self: end;
  font-size: 24px;
  opacity: .4;
  transition: transform .35s var(--ease);
}
.svc__row:hover .svc__arrow,
.svc__row.is-pinned .svc__arrow { transform: translate(5px, 5px); }

.svc__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--t-slow) var(--ease), opacity .4s var(--ease);
}
.svc__row:hover .svc__panel,
.svc__row.is-pinned .svc__panel {
  max-height: var(--panel-h, 600px);
  opacity: 1;
}

.svc__grid {
  display: grid;
  grid-template-columns: 96px 1.1fr 1fr;
  gap: 28px;
  padding: 4px 0 40px;
  align-items: center;
}

/* Список направлений внутри раскрытой строки (строка уже инвертирована) */
.svc__items { display: flex; flex-direction: column; }

/* Строка инвертирована, поэтому лейбл берёт цвет от неё, а не от светлой секции */
.svc__items .mono-label { color: inherit; opacity: .5; margin-bottom: 6px; }

.svc__item {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding: 11px 0;
  opacity: .85;
  font-size: 15px;
}
.svc__item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .16); }

.svc__cta { margin-top: 20px; align-self: flex-start; }

/* ─── Мокапы продуктов внутри раскрытых строк ───
   Собраны из div'ов, чтобы не тянуть картинки в первый экран. */

.mock { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; }

/* Два телефона */
.mock--phones {
  background: #F4F4F4;
  padding: 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-end;
}
.mock__phone {
  width: 31%;
  aspect-ratio: 9 / 17;
  border-radius: 12px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mock__phone--light { background: #fff; border: 1px solid #DADADA; }
.mock__phone--dark  { background: #111; }
.mock__notch { height: 6px; width: 60%; border-radius: 2px; margin: 2px auto 4px; background: #111; }
.mock__phone--dark .mock__notch { width: 50%; background: #fff; opacity: .8; }
.mock__block { border-radius: 4px; background: #EDEDED; height: 22px; }
.mock__phone--dark .mock__block { background: #2b2b2b; height: 30px; }
.mock__bar { height: 8px; border-radius: 2px; background: #E4E4E4; }
.mock__phone--dark .mock__bar { background: #2b2b2b; }
.mock__bar--70 { width: 70%; }
.mock__bar--60 { width: 60%; }

/* Дашборд CRM/ERP */
.mock--dashboard {
  background: #fff;
  border: 1px solid #E0E0E0;
  display: grid;
  grid-template-columns: 34% 1fr;
}
.mock__sidebar { background: #111; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.mock__sidebar-title { height: 8px; width: 70%; background: #fff; opacity: .85; border-radius: 2px; }
.mock__sidebar-item { height: 6px; background: #3a3a3a; border-radius: 2px; }
.mock__sidebar-item:first-of-type { margin-top: 6px; }
.mock__sidebar-item--80 { width: 80%; }
.mock__sidebar-item--60 { width: 60%; }
.mock__panel { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.mock__tabs { display: flex; gap: 8px; }
.mock__tab { flex: 1; height: 30px; background: #F1F1F1; border-radius: 4px; }
.mock__tab--active { background: #111; }
.mock__chart { flex: 1; display: flex; align-items: flex-end; gap: 7px; height: 60px; }
.mock__col { flex: 1; border-radius: 2px; background: #DADADA; }
.mock__col--mid  { background: #BDBDBD; }
.mock__col--peak { background: #111; }
/* высоты столбиков — форма графика на мокапе */
.mock__col--h1 { height: 40%; }
.mock__col--h2 { height: 70%; }
.mock__col--h3 { height: 100%; }
.mock__col--h4 { height: 55%; }
.mock__col--h5 { height: 82%; }

/* Браузер */
.mock--browser { background: #fff; border: 1px solid #E0E0E0; }
.mock__chrome {
  height: 26px;
  background: #F1F1F1;
  border-bottom: 1px solid #E0E0E0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
}
.mock__dot { width: 7px; height: 7px; border-radius: 50%; background: #CFCFCF; }
.mock__page { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mock__headline { height: 12px; width: 52%; background: #111; border-radius: 3px; }
.mock__line { height: 7px; width: 76%; background: #E2E2E2; border-radius: 2px; }
.mock__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.mock__tile { height: 44px; background: #F1F1F1; border-radius: 4px; }
.mock__tile--active { background: #111; }

/* Диалог с ИИ-ассистентом */
.mock--chat {
  background: #fff;
  border: 1px solid #E0E0E0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.mock__bubble { max-width: 70%; padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.mock__bubble--in  { align-self: flex-start; background: #F1F1F1; border-radius: 12px 12px 12px 3px; }
.mock__bubble--out { align-self: flex-end;  background: #111;    border-radius: 12px 12px 3px 12px; }
.mock__bubble--in .mock__bar  { width: 120px; background: #CFCFCF; }
.mock__bubble--out .mock__bar { background: #4a4a4a; }
.mock__bar--150 { width: 150px; }
.mock__bar--90  { width: 90px; }
.mock__typing { align-self: flex-start; display: flex; gap: 5px; padding: 4px 2px; }
.mock__typing span { width: 6px; height: 6px; border-radius: 50%; background: #111; }
.mock__typing span:nth-child(2) { background: #999; }
.mock__typing span:nth-child(3) { background: #CFCFCF; }