/* =====================================================
   Landing — контейнеры и секции лэндинга
   Подключается на странице home. Переменные и компоненты — в base_site.css
   ===================================================== */

/* clip вместо hidden: не создаём второй вертикальный скролл в Chrome (overflow-x: hidden заставляет overflow-y становиться auto) */
html,
body {
  overflow-x: clip;
}
.page-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  overflow-x: visible; /* чтобы .growth-section с 100vw мог выходить на всю ширину экрана */
  box-sizing: border-box;
}

/* Между секциями расстояние 0, отступы только внутри секций */
.page-landing section {
  margin: 0 auto;
}

/* Main Section (hero) – padding 80px 40px 40px, gap 40px */
.main-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 80px 40px 40px;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
}

.main-section__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* H1 – заполняет левую часть, цвет под тёмный фон */
.main-section__title {
  flex: 1 1 0%;
  order: 0;
  min-width: 0;
  max-width: 660px;
  margin: 0;
  font-weight: 700;
  color:var(--text-primary);
}

/* Info Section – заполняет правую часть, сжимается; макс. 660px */
.main-section__content {
  flex: 1 1 0%;
  order: 1;
  min-width: 0;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 24px 0; /* снизу место для тени кнопки, чтобы не обрезалась */
  gap: 24px;
}

/* Info Container (Frame 89) – теги в ряд, при нехватке места переносятся по одному на новую строку */
.main-section__info-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  gap: 12px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  max-width: 660px;
  min-height: 36px;
}

/* Теги (Sales Details) – фон #EFF6FF, Body Text 18px/135%, color #1F2937 */
.main-section__chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 16px 6px 14px;
  gap: 8px;
  flex: none;
  flex-grow: 0;
  height: 36px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 135%;
  color: var(--gray-900);
  background: #EFF6FF;
  border-radius: 40px;
}

.main-section__chip--highlight {
  padding: 6px 16px 6px 14px;
  background: #EFF6FF;
  height: 36px;
}

/* Description – основной цвет текста */
.main-section__lead {
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  margin: 0;
  width: 100%;
  min-width: 0;
  color: var(--text-primary);
}

/* Button from base_site .btn-ps .btn-ps--primary .btn-ps--large; only layout here */
.main-section__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: none;
  order: 2;
  flex-grow: 0;
}

/* Переход в одну колонку раньше, чтобы не было наложения чипов на заголовок */
@media (max-width: 1100px) {
  .main-section__inner {
    flex-direction: column;
    gap: 32px;
  }
  .main-section__title {
    max-width: 100%;
  }
  .main-section__content {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .main-section {
    padding: 40px 24px 40px;
    gap: 24px;
  }
  .main-section__inner {
    gap: 24px;
  }
  .main-section__title {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  /* Теги в колонку, по ширине контента */
  .main-section__info-container {
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    gap: 12px;
  }
  .main-section__chip {
    width: auto;
  }
  .main-section__actions .btn-ps {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

/* =====================================================
   Metrics Section (Figma: Main Image + Conversion / Discount)
   ===================================================== */
.metrics-section {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.metrics-section__image-wrap {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 600px;
  margin: 0 auto;
  overflow: visible;
  flex: none;
  align-self: stretch;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Conversion Section — position: absolute; left: 66px; top: 165px */
.metrics-section__conversion {
  position: absolute;
  left: 66px;
  top: 165px;
  z-index: 13;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0 8px;
  gap: 9px;
  width: 233px;
}

/* Discount Section — position: absolute; right: 157px; top: 235px */
.metrics-section__discount {
  position: absolute;
  right: 157px;
  top: 235px;
  z-index: 13;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0 8px;
  gap: 9px;
  width: 201px;
}

/* Desktop/Metric Value — 40px/Bold/LH 130%/LS -0.01em, gradient */
.metrics-section__value {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 130%;
  letter-spacing: -0.01em;
  background: linear-gradient(30deg, var(--blue-500) 26.79%, var(--blue-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex: none;
}

/* Description — тот же синий градиент, что у цифр */
.metrics-section__description {
  background: linear-gradient(30deg, var(--blue-500) 26.79%, var(--blue-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex: none;
  white-space: nowrap;
}

/* Мобильная версия (Figma: 390×590, сейф-поля 16px у текстовых блоков) */
@media (max-width: 767px) {
  .metrics-section {
    padding: 0 24px 0;
  }
  .metrics-section__image-wrap {
    width: 100%;
    max-width: 100%;
    height: 624px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
  }
  .metrics-section__conversion {
    left: 0;
    right: 0;
    top: 16px;
    width: 100%;
    height: auto;
    padding: 16px;
  }
  .metrics-section__discount {
    left: 0;
    right: 0;
    top: auto;
    bottom: 24px;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 12px 16px 0;
    align-items: flex-end;
    max-width: none;
  }
  .metrics-section__value {
    font-size: 26px;
    line-height: 1.3;
  }
  .metrics-section__description {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* На средних и малых высотах экрана уменьшаем высоту блока, чтобы секция не обрезалась */
@media (max-width: 767px) and (max-height: 800px) {
  .metrics-section__image-wrap {
    height: min(590px, 65vh);
  }
  .metrics-section__discount {
    top: auto;
    bottom: 24px;
  }
}

/* Планшет только 768–1024px: стили metrics-section, чтобы не перебивать мобилку (≤767px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .metrics-section {
    padding: 0 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .metrics-section__image-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .metrics-section__conversion {
    left: 0;
    width: auto;
  }
  .metrics-section__discount {
    right: 0;
    width: auto;
    max-width: 160px;
  }
  .metrics-section__description {
    white-space: normal;
  }
}

/* Планшет (меньше 1024px): секции на всю ширину, сейф-зона 40px */
@media (max-width: 1024px) {
  .page-landing {
    width: 100%;
    max-width: 100%;
  }
  .main-section {
    padding: 80px 40px 40px;
    width: 100%;
    max-width: 100%;
  }
  .main-section__inner {
    width: 100%;
    min-width: 0;
  }
  .main-section__title,
  .main-section__content {
    min-width: 0;
    max-width: 100%;
  }
  .main-section__lead {
    max-width: 100%;
  }
  .logos-section {
    padding: 0 40px 40px;
    width: 100%;
    max-width: 100%;
  }
  .revenue-section {
    padding: 80px 40px;
    width: 100%;
    max-width: 100%;
  }
  .revenue-section__inner {
    width: 100%;
    min-width: 0;
  }
  .revenue-section__info {
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    gap: 16px;
  }
  .revenue-section__title,
  .revenue-section__description {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .revenue-section__details {
    width: 100%;
    min-width: 0;
  }
  .revenue-section__card {
    min-width: 0;
    flex: 1 1 280px;
  }
  .revenue-section__card--wide {
    min-width: 0;
    flex: 1 1 100%;
  }
  .sales-section {
    padding: 80px 40px;
    width: 100%;
    max-width: 100%;
  }
  .sales-section__inner {
    width: 100%;
    min-width: 0;
  }
  .sales-section__info {
    max-width: 100%;
  }
  .sales-section__title,
  .sales-section__description {
    max-width: 100%;
    min-width: 0;
  }
  .sales-section__details {
    width: 100%;
    min-width: 0;
  }
  .sales-section__card,
  .sales-section__card--wide {
    min-width: 0;
  }
  .ai-section {
    padding: 80px 40px;
    width: 100%;
    max-width: 100%;
  }
  .ai-section__inner {
    width: 100%;
    min-width: 0;
  }
  .ai-section__info {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ai-section__title,
  .ai-section__description {
    max-width: 100%;
  }
  .ai-section__details {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .report-section {
    padding: 40px 40px 80px;
    width: 100%;
    max-width: 100%;
  }
  .report-section__info {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .report-section__details {
    width: 100%;
    min-width: 0;
  }
  .report-section__title,
  .report-section__description {
    max-width: 100%;
  }
}

/* =====================================================
   Partners Section (Figma: padding 0 40px 40px, gap 32px)
   ===================================================== */
.logos-section {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px 40px;
  box-sizing: border-box;
}

.logos-section__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

/* Partners Title — Body Text 18px/Regular/LH 135%, color #6B7280 */
.logos-section__title {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 135%;
  color: var(--gray-600);
}

/* Partners Logos — row, gap 40px, height 48px */
.logos-section__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 48px;
}

.logos-section__item {
  flex: none;
}

/* Каждый логотип 131×48px, серые оттенки (grayscale для Safari iOS, где mix-blend-mode ненадёжен), opacity 0.8 */
.logos-section__img {
  display: block;
  width: 131px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  mix-blend-mode: luminosity;
  opacity: 0.8;
}

/* Мобильная версия (Figma: padding 40px 16px, gap 20px, заголовок + логотипы 48px, overflow-x scroll) */
@media (max-width: 767px) {
  .logos-section {
    padding: 40px 24px 40px 24px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .logos-section__inner {
    gap: 20px;
    width: 100%;
  }
  .logos-section__title {
    font-family: 'Inter', system-ui, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    color: var(--gray-600);
    width: 100%;
    max-width: 304px;
  }
  .logos-section__list {
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    min-height: 48px;
    box-sizing: content-box;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .logos-section__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .logos-section__item {
    flex-shrink: 0;
  }
  .logos-section__img {
    width: 131px;
    height: 48px;
    flex-shrink: 0;
    display: block;
  }
}

/* =====================================================
   Revenue Section (светлый фон, карточки с метриками)
   ===================================================== */
.revenue-section {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 40px;
  gap: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--background-primary);
  box-sizing: border-box;
}

.revenue-section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

/* Revenue Info — H2 + описание в ряд */
/* Revenue Info — H2 и описание в ряд, align-items: center */
.revenue-section__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 40px;
  width: 100%;
  max-width: 1360px;
}

.revenue-section__title {
  margin: 0 0 0.35em;
  flex: none;
  flex-grow: 1;
  width: 490px;
  max-width: 660px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

.revenue-section__description {
  margin: 0;
  flex: none;
  flex-grow: 1;
  width: 830px;
  max-width: 830px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  color: var(--gray-900);
}

/* Revenue Details — сетка карточек */
.revenue-section__details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

.revenue-section__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  gap: 32px;
  min-width: 560px;
  flex: 1 1 668px;
  background: var(--background-secondary);
  border-radius: var(--corners-cards);
  box-sizing: border-box;
}

.revenue-section__card--wide {
  flex: 1 1 100%;
  min-width: 560px;
  background: var(--blue-50);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Чип с иконкой и подписью */
.revenue-section__icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 16px 6px 14px;
  gap: 8px;
  background: var(--white);
  border-radius: 40px;
}

.revenue-section__icon-img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.revenue-section__icon-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 135%;
  color: var(--gray-600);
}

/* Revenue Details — gap 20px между блоком значения и блоком (H3 + описание) */
.revenue-section__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* Revenue Detail Value — отступ снизу 20px до заголовка */
.revenue-section__value {
  margin: 0 0 20px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--blue-500);
}

/* H3 — отступ снизу 6px до описания (Revenue Detail Item gap: 6px) */
.revenue-section__card-title {
  margin: 0 0 6px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 130%;
  color: var(--gray-900);
}

.revenue-section__card-description {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 135%;
  color: var(--gray-600);
}

/* Декоративная картинка в третьей карточке (spiral.png из static) */
.revenue-section__card-image {
  position: absolute;
  width: 545px;
  height: 545px;
  left: 711px;
  top: -49px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.revenue-section__card--wide .revenue-section__icon {
  position: relative;
  z-index: 1;
}

.revenue-section__card--wide .revenue-section__card-content {
  position: relative;
  z-index: 1;
  max-width: 588px;
}

@media (max-width: 1100px) {
  .revenue-section__info {
    flex-direction: column;
    gap: var(--size-12);
  }
  .revenue-section__title {
    max-width: 100%;
  }
  .revenue-section__description {
    max-width: 100%;
  }
  .revenue-section__card {
    min-width: 100%;
    flex: 1 1 100%;
  }
  .revenue-section__card--wide {
    min-width: 100%;
  }
  .revenue-section__card-image {
    display: none;
  }
}

/* Мобильная версия Revenue Section — ширина секции 100%, padding 40px 16px, gap 40px */
@media (max-width: 767px) {
  .revenue-section {
    padding: 40px 24px;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
  }
  .revenue-section__inner {
    gap: 40px;
    width: 100%;
  }
  /* Revenue Info — колонка, gap 12px */
  .revenue-section__info {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }
  /* Mobile/Section Heading (H2) — 28px/Bold/LH 120% */
  .revenue-section__title {
    font-size: 28px;
    line-height: 120%;
    width: 100%;
    max-width: 490px;
  }
  /* Mobile/Lead Text — 18px/Regular/LH 130% */
  .revenue-section__description {
    font-size: 18px;
    line-height: 130%;
    width: 100%;
  }
  /* Revenue Details — колонка, gap 24px */
  .revenue-section__details {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  /* Revenue Item — padding 24px, gap 20px, border-radius 24px */
  .revenue-section__card {
    min-width: 0;
    flex: none;
    align-self: stretch;
    width: 100%;
    padding: 24px;
    gap: 20px;
    border-radius: 24px;
    background: var(--background-secondary);
  }
  .revenue-section__card--wide {
    min-width: 0;
    width: 100%;
    background: var(--blue-50);
    border-radius: 24px;
  }
  /* Revenue Details (внутри карточки) — gap 16px между значением и блоком H3+описание */
  .revenue-section__card-content {
    max-width: 310px;
  }
  .revenue-section__value {
    font-size: 32px;
    line-height: 110%;
    margin-bottom: 16px;
  }
  /* Mobile/Card Heading (H3) — 20px/Medium/LH 130% */
  .revenue-section__card-title {
    font-size: 20px;
    line-height: 130%;
    margin-bottom: 6px;
  }
  /* Mobile: описание 14px/Regular/LH 135% */
  .revenue-section__card-description {
    font-size: 14px;
    line-height: 135%;
  }
}

/* =====================================================
   Sales Section (Figma: блок с H2, описание, сетка карточек)
   ===================================================== */
.sales-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 40px;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  flex: none;
  align-self: stretch;
  box-sizing: border-box;
}

.sales-section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

/* Sales Info — H2 + описание в ряд, gap 40px */
.sales-section__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 40px;
  width: 100%;
  max-width: 1360px;
}

.sales-section__title {
  margin: 0 0 0.35em;
  flex: none;
  flex-grow: 1;
  width: 100%;
  max-width: 660px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 130%;
  letter-spacing: -0.01em;
  color: #1F2937;
}

.sales-section__description {
  margin: 0;
  flex: none;
  flex-grow: 1;
  width: 660px;
  max-width: 660px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  color: #1F2937;
}

/* Sales Details — сетка карточек; stretch — одна высота карточек в одной строке на десктопе/планшете */
.sales-section__details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  padding: 0;
  gap: 24px;
  width: 100%;
}

/* Sales Item — карточка (Figma: 437px, min 339px, padding 40px, gap 16px, radius 32px) */
.sales-section__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  gap: 16px;
  min-width: 339px;
  flex: 1 1 437px;
  background: #F9FAFB;
  border-radius: 32px;
  box-sizing: border-box;
  isolation: isolate;
  overflow: visible;
}

/* Обычные карточки (не wide) в первом ряду — та же мин. высота, что у карточек с картинкой */
.sales-section__card:not(.sales-section__card--wide) {
  min-height: 424px;
}

/* Карточки с декоративной картинкой в углу: минимальная высота по Figma, чтобы картинка 180px помещалась */
.sales-section__card--align-end {
  align-items: flex-end;
  background: #EFF6FF;
  min-height: 424px;
}

/* Недвижимость: по Figma height 424px, картинка 180×180, left 225px / top 277px (right 32px, низ с переливом) */
.sales-section__card--accent {
  background: #EFF6FF;
  min-height: 424px;
}

/* Декоративная картинка в карточке по макету (static: education.png, plane.png, Sales Image.png) */
.sales-section__card-image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.sales-section__card-title,
.sales-section__detail,
.sales-section__card-content {
  position: relative;
  z-index: 1;
}

/* Карточка 1 — Онлайн-образование: шапка выпускника, правый нижний угол, поворот -6.48deg */
.sales-section__card-image--education {
  transform: rotate(-6.48deg);
}

/* Карточка 3 — Недвижимость: 180×180, по Figma left 225px / top 277px → right 32px, bottom -33px (перелив вниз по макету) */
.sales-section__card-image--real-estate {
  right: 32px;
  bottom: -33px;
  transform: rotate(5.75deg);
}

/* Карточка 4 — Туризм: в обычных карточках — absolute по центру справа; в --row — в потоке (flex), не absolute */
.sales-section__card-image--plane {
  right: 0;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  width: 208px;
  height: 208px;
}

/* Широкая карточка (Figma: 668px, height 298px) */
.sales-section__card--wide {
  flex: 1 1 668px;
  min-width: 339px;
}

/* Туризм: row, контент слева (404px) + картинка справа в потоке (180×180 по Figma), не absolute */
.sales-section__card--wide.sales-section__card--row {
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  min-height: 298px;
  height: 298px;
}

.sales-section__card--wide.sales-section__card--row .sales-section__card-content {
  order: 0;
  flex: 1 1 auto;
  max-width: 404px;
}

/* Картинка самолёта в потоке: не absolute, второй элемент строки */
.sales-section__card--wide.sales-section__card--row .sales-section__card-image--plane {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  order: 1;
}

.sales-section__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

/* H3 — Desktop/Card Heading 26px/Medium/LH 130% */
.sales-section__card-title {
  margin: 0 0 0 0;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 26px;
  line-height: 130%;
  color: #1F2937;
  flex: none;
  align-self: stretch;
}

/* Sales Detail — блок подзаголовок + описание, gap 4px */
.sales-section__detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 4px;
  width: 100%;
  min-width: 0;
  flex: none;
  align-self: stretch;
}

/* Типографика из base_site .text-body (добавить класс в HTML); на мобилке 16px через медиа в base */
.sales-section__detail-title {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.sales-section__detail-description {
  margin: 0;
  font-weight: 400;
  color: var(--text-secondary);
}

@media (max-width: 1100px) {
  .sales-section__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .sales-section__title,
  .sales-section__description {
    max-width: 100%;
    width: 100%;
  }
  .sales-section__card {
    min-width: 100%;
    flex: 1 1 100%;
  }
  .sales-section__card--wide {
    min-width: 100%;
  }
  .sales-section__card--wide.sales-section__card--row {
    flex-direction: column;
    height: auto;
  }

  .sales-section__card:not(.sales-section__card--wide) {
    min-height: 372px;
  }
}

/* =====================================================
   AI Section (заголовок с градиентом, дашборд + подсказки)
   ===================================================== */
.ai-section {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 40px;
  gap: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.ai-section__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* AI Info — колонка, по центру, gap 12px */
.ai-section__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  width: 100%;
  max-width: 1018px;
}

/* H2 — «Pipeline Sniper AI» синий #2C64ED, остальной текст тёмный #1A202C */
.ai-section__title {
  margin: 0 auto 0.35em;
  width: 100%;
  max-width: 1018px;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 130%;
  text-align: center;
  letter-spacing: -0.01em;
  color: #1A202C;
}
.ai-section__title-accent {
  color: #2C64ED;
}

.ai-section__description {
  margin: 0;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  text-align: center;
  color: var(--gray-900);
}

/* AI Details — по Figma: 1360×640, flex none */
.ai-section__details {
  position: relative;
  width: 1360px;
  max-width: 1440px;
  height: 640px;
  flex: none;
  align-self: stretch;
}

/* AI Image — по Figma */
.ai-section__image {
  position: absolute;
  width: 1018px;
  height: 581px;
  left: calc(50% - 1018px / 2);
  top: calc(50% - 581px / 2 - 29.5px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 34px rgba(31, 41, 55, 0.04)) drop-shadow(0 16px 70px rgba(31, 41, 55, 0.1));
  border-radius: 32px;
  box-sizing: border-box;
}

/* AI Detail Item — по Figma: flex row, padding 16px, gap 8px, #DBEAFE, radius 20px */
.ai-section__bubble {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px;
  gap: 8px;
  background: var(--background-active);
  box-shadow: 0 0 16px rgba(31, 41, 55, 0.04), 0 10px 56px rgba(31, 41, 55, 0.1);
  border-radius: 20px;
  box-sizing: border-box;
}

/* Текст внутри плашки: типографика из .text-body/.text-body-secondary (base_site), цвет из переменной */
.ai-section__bubble-text {
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --1: 282px ширина, высота по контенту, left 1030px, top 18px */
.ai-section__bubble--1 {
  width: 282px;
  min-height: 70px;
  height: auto;
  left: 1030px;
  top: 18px;
}

/* --2: 322px, высота по контенту, left 460px, top 550px */
.ai-section__bubble--2 {
  width: 322px;
  min-height: 70px;
  height: auto;
  left: 460px;
  top: 550px;
}

/* --3: 464px, высота по контенту, left 767px, top 307px */
.ai-section__bubble--3 {
  width: 464px;
  min-height: 70px;
  height: auto;
  left: 767px;
  top: 307px;
}

/* --4: 356px, высота по контенту, left 32px, top 296px */
.ai-section__bubble--4 {
  width: 356px;
  min-height: 89px;
  height: auto;
  left: 32px;
  top: 296px;
}

@media (max-width: 1100px) {
  .ai-section__details {
    height: 520px;
  }
  .ai-section__image {
    width: 90%;
    max-width: 1018px;
    height: auto;
    aspect-ratio: 1018 / 581;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% - 29.5px));
  }
  .ai-section__bubble--1,
  .ai-section__bubble--2,
  .ai-section__bubble--3,
  .ai-section__bubble--4 {
    display: none;
  }
}

/* Планшет (≤1024px): плашки на картинке как на десктопе, шрифт меньше (мобильный) */
@media (max-width: 1024px) {
  .ai-section__details {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0;
  }
  .ai-section__image {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1018 / 581;
    left: auto;
    top: auto;
    transform: none;
    border-radius: 24px;
    background-size: contain;
    background-position: center;
  }
  /* Плашки поверх картинки, позиции в % от контейнера; высота под контент (iPad 640 и др.) */
  .ai-section__bubble--1,
  .ai-section__bubble--2,
  .ai-section__bubble--3,
  .ai-section__bubble--4 {
    display: flex;
    position: absolute;
    width: auto;
    max-width: 28%;
    height: auto;
    min-height: auto;
    padding: 12px;
    border-radius: 16px;
    box-sizing: border-box;
    align-items: center;
  }
  /* Позиции как на десктопе, в процентах (1360×640 → %) */
  .ai-section__bubble--1 { left: 72%; top: 2%; }
  .ai-section__bubble--2 { left: 30%; top: 82%; }
  .ai-section__bubble--3 { left: 52%; top: 44%; }
  .ai-section__bubble--4 { left: 0; top: 42%; }
}

/* Мобильная версия: картинка и карточки на всю ширину, от картинки до карточки 32px, между карточками 12px */
@media (max-width: 767px) {
  .ai-section {
    padding: 40px 24px;
    gap: 40px;
    align-items: center;
  }
  .ai-section__inner {
    gap: 40px;
    align-items: center;
  }
  .ai-section__info {
    width: 100%;
    max-width: 358px;
    padding: 0;
    gap: 12px;
  }
  .ai-section__title {
    width: 100%;
    font-size: 28px;
    line-height: 120%;
    text-align: center;
  }
  .ai-section__description {
    width: 100%;
    font-size: 18px;
    line-height: 130%;
    text-align: center;
    color: #1F2937;
  }
  /* AI Details — колонка на всю ширину */
  .ai-section__details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    width: 100%;
    height: auto;
  }
  /* Картинка на всю ширину, отступ до первых карточек 32px */
  .ai-section__image {
    position: relative;
    width: 100%;
    height: 204px;
    left: auto;
    top: auto;
    transform: none;
    flex: none;
    align-self: stretch;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    margin-bottom: 32px;
  }
  /* Карточки на всю ширину, между карточками 12px, без теней */
  .ai-section__bubble--1,
  .ai-section__bubble--2,
  .ai-section__bubble--3,
  .ai-section__bubble--4 {
    display: flex;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 12px;
    padding: 16px;
    flex: none;
    align-self: stretch;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: none;
  }
  .ai-section__bubble--4 {
    margin-bottom: 0;
  }
  /* Порядок: 1 Подсвечиваем, 2 Отслеживайте, 3 Конвертируем, 4 Система выявляет; высота под контент */
  .ai-section__bubble--1 { order: 2; height: auto; }
  .ai-section__bubble--2 { order: 3; height: auto; }
  .ai-section__bubble--3 { order: 1; height: auto; }
  .ai-section__bubble--4 { order: 4; height: auto; }
}

/* =====================================================
   Report Section (CTA: отчёт через 7 дней + кнопка «Записаться на демо»)
   ===================================================== */
.report-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 40px 80px;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  flex: none;
  align-self: stretch;
  box-sizing: border-box;
}

.report-section__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 40px;
  gap: 40px;
  width: 100%;
  max-width: 1360px;
  min-height: 146px;
  background: #DBEAFE;
  border-radius: 32px;
  box-sizing: border-box;
}

.report-section__details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Типографика из base_site: добавить в HTML .text-section-h2 или .text-hero-h1 */
.report-section__title {
  margin: 0 0 0.35em;
  width: 100%;
  max-width: 100%;
  font-weight: 700;
  color: var(--text-primary);
  flex: none;
  align-self: stretch;
}

/* Типографика из base_site .text-lead (добавить класс в HTML) */
.report-section__description {
  margin: 0;
  width: 100%;
  color: var(--text-primary);
  flex: none;
  align-self: stretch;
}

/* Кнопка в report — тот же компонент, что в hero (btn-ps btn-ps--primary btn-ps--large); только раскладка */
.report-section__btn {
  flex: none;
  min-width: 262px;
  text-decoration: none;
}

/* Report Section — мобильная версия по Figma (358px карточка, 24px padding, gap 20px) */
@media (max-width: 767px) {
  .report-section {
    padding: 40px 24px;
    gap: 40px;
    width: 100%;
    max-width: 1440px;
  }
  .report-section__info {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-height: 241px;
    border-radius: 24px;
    box-sizing: border-box;
  }
  .report-section__details {
    width: 100%;
    gap: 8px;
    align-items: flex-start;
  }
  .report-section__title {
    font-weight: 600;
    text-align: center;
    width: 100%;
  }
  .report-section__description {
    text-align: center;
    width: 100%;
  }
  .report-section__btn {
    width: 100%;
    min-width: 0;
    align-self: stretch;
  }
}

/* Планшет (≤1024px): переопределения после базовых стилей секций — ширина и перенос текста */
@media (max-width: 1024px) {
  .main-section__title,
  .main-section__content {
    max-width: 100%;
    min-width: 0;
  }
  .revenue-section__info {
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
  }
  .revenue-section__title {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .revenue-section__description {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .revenue-section__card {
    min-width: 0;
    flex: 1 1 280px;
  }
  .revenue-section__card--wide {
    min-width: 0;
    flex: 1 1 100%;
  }
  .ai-section__details {
    width: 100%;
    max-width: 100%;
  }
  .ai-section__info {
    max-width: 100%;
  }
  .ai-section__title,
  .ai-section__description {
    max-width: 100%;
  }
  .sales-section__info {
    max-width: 100%;
  }
  .sales-section__title,
  .sales-section__description {
    max-width: 100%;
  }
  .report-section__info {
    max-width: 100%;
  }
  .report-section__title,
  .report-section__description {
    max-width: 100%;
  }
  .integration-section__info {
    max-width: 100%;
  }
  /* Раскладка без отступов: отступы задаются только в планшетном (768–1024) и мобильном (≤767) блоках */
  .integration-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .integration-section__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    border-radius: 24px;
    background: #F9FAFB;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .integration-section__block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
  .integration-section__block .integration-section__details { order: 0; }
  .integration-section__block .integration-section__visual { order: 1; }
  .integration-section__block .integration-section__divider { order: 2; }
  .integration-section__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0 40px 0;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
  .integration-section__details-title {
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .integration-section__details-description {
    margin: 0 0 24px;
    color: var(--text-secondary);
  }
  .integration-section__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .integration-section__list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
  }
  .integration-section__list-item::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%232563EB'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .integration-section__divider {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 24px 0;
    background: transparent;
    align-self: stretch;
  }
  .integration-section__divider::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #E5E7EB;
    border-radius: 5px;
  }
  .integration-section__visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    padding: 0;
    width: 100%;
    max-width: 100%;
    gap: 12px;
    box-sizing: border-box;
  }
  .integration-section__visual--logos {
    gap: 8px;
    border-radius: 40px;
  }
  .integration-section__image {
    border-radius: 8px;
  }
}

/* iPad (768px–1024px): плитка 2×2 (1–4: Образование, Клиники, Недвижимость, Инвестиции), затем Туризм на всю ширину */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Integration: отступы только на планшете (на мобильной заданы в блоке ≤767px) */
  .integration-section {
    padding: 40px;
  }
  .integration-section__inner {
    padding: 40px;
  }
  .sales-section__details {
    padding: 0 0 40px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr auto;
    gap: 24px;
    width: 100%;
  }
  .sales-section__card,
  .sales-section__card--wide {
    min-width: 0;
    flex: none;
    width: 100%;
    align-self: stretch;
  }
  /* Порядок на iPad: 1 Образование, 2 Клиники, 3 Инвестиции, 4 Недвижимость, 5 Туризм */
  .sales-section__card--align-end { order: 0; }
  .sales-section__card:not(.sales-section__card--accent):not(.sales-section__card--wide) { order: 1; }
  .sales-section__card--wide:not(.sales-section__card--row) { order: 3; }
  .sales-section__card--accent { order: 4; }
  .sales-section__card--wide.sales-section__card--row {
    order: 5;
    grid-column: span 2;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    min-height: 298px;
    height: auto;
  }
  .sales-section__card--wide.sales-section__card--row .sales-section__card-content {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 404px;
  }
  .sales-section__card--wide.sales-section__card--row .sales-section__card-image--plane {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
    order: 1;
  }
  /* Integration на планшете: гэп 40px между текстом и картинками, блок с картинками по центру */
  .integration-section__block {
    gap: 40px;
    align-items: center;
  }
  .integration-section__details {
    align-self: stretch;
    width: 100%;
    padding-bottom: 0;
  }
  .integration-section__visual {
    align-self: center;
    justify-content: center;
  }
  /* На планшете блок с двумя картинками — по центру, контейнер до 100% ширины */
  .integration-section__visual--images-stack {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .integration-section__visual--images-stack .integration-section__images-wrap {
    width: 709px;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  /* На планшете блок с двумя картинками — как на десктопе (наложение), стили в блоке (min-width: 768px) ниже */
}

/* Мобильная (≤767px): переопределяем отступы секций, кнопки hero и report, карточки AI, Sales */
@media (max-width: 767px) {
  .main-section {
    padding: 40px 24px 40px;
  }
  /* Sales Section — мобильная верстка по Figma, ширина блока 100% */
  .sales-section {
    padding: 40px 24px;
    gap: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .sales-section__inner {
    width: 100%;
    max-width: 100%;
  }
  .sales-section__info {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }
  .sales-section__title {
    width: 100%;
    max-width: 100%;
    font-size: 28px;
    font-weight: 700;
    line-height: 120%;
    color: #1F2937;
  }
  .sales-section__description {
    width: 100%;
    max-width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 130%;
    color: #1F2937;
  }
  .sales-section__details {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 100%;
  }
  .sales-section__card,
  .sales-section__card--wide {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    padding: 24px;
    gap: 16px;
    border-radius: 24px;
    box-sizing: border-box;
  }
  /* Туризм на мобильном: row по Figma, высота 378px, самолёт absolute в углу с переливом */
  .sales-section__card--wide.sales-section__card--row {
    flex-direction: row;
    min-height: 378px;
    height: 378px;
    gap: 32px;
    overflow: visible;
  }
  .sales-section__card--wide.sales-section__card--row .sales-section__card-content {
    width: 100%;
    max-width: 310px;
  }
  /* Самолёт: правый нижний угол, перелив вправо/вниз; левый край не левее отступа 24px */
  .sales-section__card--wide.sales-section__card--row .sales-section__card-image--plane {
    position: absolute;
    left: max(24px, calc(100% - 160px));
    right: auto;
    bottom: -12px;
    top: auto;
    transform: none;
    width: 144px;
    height: 144px;
  }
  .sales-section__card-content {
    width: 100%;
    max-width: 100%;
  }
  .sales-section__card-title {
    width: 100%;
    max-width: 100%;
    font-size: 20px;
    font-weight: 600;
    line-height: 130%;
    color: #1F2937;
  }
  .sales-section__detail {
    width: 100%;
    max-width: 100%;
  }
  .sales-section__detail-title {
    width: 100%;
  }
  .sales-section__detail-description {
    width: 100%;
  }
  /* Единый размер декоративных картинок на мобилке (образование, недвижимость, туризм) */
  .sales-section__card-image,
  .sales-section__card-image--plane {
    width: 144px;
    height: 144px;
  }
  /* На мобильном картинка 144px — достаточная высота карточки по макету */
  .sales-section__card--align-end,
  .sales-section__card--accent {
    min-height: 370px;
  }
  /* Без картинки — только по высоте контента (Клиники, Инвестиции) */
  .sales-section__card:not(.sales-section__card--align-end):not(.sales-section__card--accent):not(.sales-section__card--wide),
  .sales-section__card--wide:not(.sales-section__card--row) {
    min-height: 0;
    height: auto;
  }
  /* Integration (Как мы усиливаем продажи) — мобильная вёрстка по Figma */
  .integration-section {
    padding: 40px 24px;
    gap: 40px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .integration-section__info {
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
  .integration-section__badge {
    margin-bottom: 24px;
    padding: 6px 16px 6px 14px;
  }
  .integration-section__title {
    margin: 0 0 12px;
    text-align: center;
  }
  .integration-section__description {
    text-align: center;
  }
  /* Мобильная (≤767): боковые отступы 24px */
  /* Мобильная: верх/низ 40px, бока 24px */
  .integration-section__inner {
    padding: 40px 24px;
    gap: 40px;
    border-radius: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .integration-section__block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 40px;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
  .integration-section__block .integration-section__details { order: 0; align-self: stretch; }
  .integration-section__block .integration-section__visual { order: 1; }
  .integration-section__block .integration-section__divider { order: 2; align-self: stretch; }
  .integration-section__details {
    padding: 0;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
  .integration-section__details-title {
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--text-primary);
  }
  .integration-section__details-description {
    margin: 0 0 24px;
    color: var(--text-secondary);
  }
  .integration-section__list {
    gap: 12px;
  }
  .integration-section__list-item {
    color: var(--text-secondary);
  }
  .integration-section__list-item::before {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin: 0;
  }
  .integration-section__divider {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 24px 0;
    background: transparent;
    align-self: stretch;
  }
  .integration-section__divider::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #E5E7EB;
    border-radius: 5px;
  }
  .integration-section__visual {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* По Figma мобильная: контейнер логотипов 310×280px, gap 8px, чипы 40px, картинки уменьшены */
  .integration-section__visual--logos {
    width: 100%;
    max-width: 310px;
    min-height: 280px;
    gap: 8px;
    border-radius: 40px;
    align-items: flex-start;
    align-content: center;
    justify-content: center;
  }
  /* По Figma: блок с двумя картинками — колонка на всю ширину, картинки друг под другом, gap 12px */
  .integration-section__visual--images-stack {
    max-width: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .integration-section__visual--images-stack .integration-section__images-wrap {
    width: 100%;
    max-width: 100%;
  }
  .integration-section__images-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: static;
    min-height: 0;
  }
  .integration-section__images-wrap--call,
  .integration-section__images-wrap--dashboard {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }
  /* Картинки: ширина 100%, высота по пропорциям — без обрезки по краям на iPhone */
  .integration-section__image--first,
  .integration-section__image--second {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    object-fit: contain;
    border-radius: 8px;
  }
  .integration-section__visual--call .integration-section__image--first,
  .integration-section__visual--call .integration-section__image--second,
  .integration-section__visual--dashboard .integration-section__image--first,
  .integration-section__visual--dashboard .integration-section__image--second {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }
  .integration-section__logo-item {
    height: 40px;
    min-height: 40px;
    padding: 0px;
    gap: 16px;
    border-radius: 96px;
  }
  .integration-section__logo {
    height: 22px;
    max-width: 120px;
  }
  .integration-section__logo--round {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    border-radius: 27px;
  }
  /* Одиночные картинки в integration: 100% ширины, высота по пропорциям */
  .integration-section__image {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
  }
  .main-section__actions,
  .report-section__info {
    width: 100%;
  }
  /* Кнопки в первом и последнем блоке — один размер (высота/текст из .btn-ps--large), на всю ширину экрана */
  .main-section__actions .btn-ps,
  .report-section__btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    box-sizing: border-box;
  }
  .metrics-section {
    padding: 0 24px 0;
  }
  /* Карточки с подписями под картинкой — на всю ширину (перебиваем планшетные position: absolute, max-width: 28%) */
  .ai-section__details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .ai-section__bubble--1,
  .ai-section__bubble--2,
  .ai-section__bubble--3,
  .ai-section__bubble--4 {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    align-self: stretch;
    box-sizing: border-box;
  }
}

/* =====================================================
   Integration Section (Как мы усиливаем ваши продажи)
   ===================================================== */
/* Десктоп: отступы 40px; на планшете и мобильной — в своих медиа */
@media (min-width: 1025px) {
.integration-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
}

.integration-section__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 1018px;
  text-align: center;
}

.integration-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  padding: 6px 16px 6px 14px;
  background: var(--gray-50);
  border-radius: 40px;
  color: var(--text-primary);
}

.integration-section__title {
  margin: 0 0 12px;
  font-weight: 700;
  max-width: 1018px;
  text-align: center;
  color: var(--text-primary);
}
.integration-section__title-accent {
  color: var(--blue-500);
}

.integration-section__description {
  margin: 0;
  color: var(--text-primary);
}

/* Отступы inner только на десктопе; на планшете/мобильной — в своих медиа */
@media (min-width: 1025px) {
.integration-section__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  gap: 24px;
  width: 100%;
  max-width: 1360px;
  background: #F9FAFB;
  border-radius: 32px;
  box-sizing: border-box;
}
}

/* Три колонки: тексты (max 489px) | разделитель | картинки — только десктоп */
@media (min-width: 1025px) {
.integration-section__block {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 40px 0;
  gap: 40px;
  width: 100%;
  max-width: 1280px;
  box-sizing: border-box;
}

/* По Figma: padding 40px 0; заголовок–описание 6px, описание–список 24px, список gap 12px */
.integration-section__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 0;
  gap: 0;
  flex: 0 1 489px;
  width: 100%;
  max-width: 489px;
  min-width: 0;
  box-sizing: border-box;
}

.integration-section__details-title {
  margin: 0 0 6px;
  font-weight: 600;
  color: var(--text-primary);
}
.integration-section__details-description {
  margin: 0 0 24px;
  color: var(--text-secondary);
}
.integration-section__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.integration-section__list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}
.integration-section__list-item::before {
  content: '';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%232563EB'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.integration-section__divider {
  flex: 0 0 2px;
  width: 2px;
  align-self: stretch;
  min-height: 200px;
  background: #E5E7EB;
  border-radius: 5px;
}

.integration-section__visual {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: center;
  padding: 40px 0;
  gap: 12px;
  overflow: hidden;
}
}

.integration-section__visual--logos {
  border-radius: 40px;
}

/* Контейнер пилюли для логотипа (Integration Item): общая высота чипа 48px */
.integration-section__logo-item {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  height: 48px;
  min-height: 48px;
  background: var(--white);
  border-radius: 96px;
  flex-shrink: 0;
}

.integration-section__logo-item--accent {
  background: var(--blue-50);
}

/* Базовые стили картинки логотипа (должны быть до модификаторов, чтобы --bitrix и др. переопределяли размеры) */
.integration-section__logo {
  display: inline-block;
  width: 100%;
  min-width: 60px;
  max-width: 180px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  font-size: 0;
  text-indent: -999px;
  overflow: hidden;
  white-space: nowrap;
  mix-blend-mode: luminosity;
  opacity: 0.8;
}

.integration-section__logo--round {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  border-radius: 27px;
}

/* Bitrix: картинка 116×24px, ширина контейнера от паддингов */
.integration-section__logo--bitrix {
  width: 116px;
  height: 24px;
}

/* Мегафон по макету: контейнер 112×52px, картинка 64×34px, без opacity */
.integration-section__logo-item--megafon {
  background: var(--white);
}
.integration-section__logo--megafon {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 34px;
  opacity: 1;
}
/* amoCRM по макету: контейнер 203×52px, картинка 155×27px */
.integration-section__logo-item--amocrm {
  background: var(--blue-50);
}
.integration-section__logo--amocrm {
  width: 155px;
  min-width: 155px;
  max-width: 155px;
  height: 27px;
  opacity: 1;
}

/* OnlinePBX по макету: контейнер 198×52px, padding 0 16px, картинка 166×32px */
.integration-section__logo-item--onlinepbx {
  padding: 0 16px;
  background: var(--white);
}
.integration-section__logo--onlinepbx {
  width: 166px;
  min-width: 166px;
  max-width: 166px;
  height: 32px;
  opacity: 0.8;
}

/* Билайн по макету: контейнер 101×52px, padding 0 32px, картинка 37×36px */
.integration-section__logo-item--bilene {
  padding: 0 32px;
  background: var(--white);
}
.integration-section__logo--bilene {
  width: 37px;
  min-width: 37px;
  max-width: 37px;
  height: 36px;
  opacity: 0.8;
}

/* RetailCRM по макету: контейнер 191×52px, padding 0 40px, картинка 111×20px */
.integration-section__logo-item--retailcrm {
  padding: 0 40px;
  background: var(--blue-50);
}
.integration-section__logo--retailcrm {
  width: 111px;
  min-width: 111px;
  max-width: 111px;
  height: 20px;
  opacity: 0.8;
}

/* МТС по макету: контейнер 100×52px, padding 0 32px, картинка 36×36px, border-radius 27px */
.integration-section__logo-item--mts {
  padding: 0 32px;
  background: var(--white);
}
.integration-section__logo--mts {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  border-radius: 27px;
  opacity: 0.8;
}

/* Mango Office: картинка 227×32px, ширина контейнера от паддингов */
.integration-section__logo-item--mango {
  padding: 0 12px;
  gap: 16px;
  background: var(--white);
  flex: none;
}
.integration-section__logo--mango {
  width: 227px;
  min-width: 227px;
  max-width: 227px;
  height: 32px;
  mix-blend-mode: luminosity;
  opacity: 0.8;
}

/* D-logo: картинка 62×40px, ширина контейнера от паддингов */
.integration-section__logo-item--d {
  padding: 0 24px;
  background: var(--blue-50);
}
.integration-section__logo--d {
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  height: 40px;
  opacity: 0.8;
}

/* GetCourse по макету: контейнер 178×52px, картинка 130×16px */
.integration-section__logo-item--getcourse {
  padding: 0 24px;
  background: var(--white);
}
.integration-section__logo--getcourse {
  width: 130px;
  min-width: 130px;
  max-width: 130px;
  height: 16px;
  opacity: 0.8;
}

/* WZ по макету: контейнер 100×52px, padding 0 32px, картинка 36×36px, border-radius 27px */
.integration-section__logo-item--wz {
  padding: 0 32px;
  background: var(--white);
}
.integration-section__logo--wz {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  border-radius: 27px;
  opacity: 0.8;
}

/* UIN по макету: контейнер 122×52px, картинка 74×28px */
.integration-section__logo-item--uin {
  padding: 0 24px;
  background: var(--blue-50);
}
.integration-section__logo--uin {
  width: 74px;
  min-width: 74px;
  max-width: 74px;
  height: 28px;
  opacity: 0.8;
}

/* Sipuni по макету: контейнер 131×52px, padding 0 32px, картинка 67×42px */
.integration-section__logo-item--sipuni {
  padding: 0 32px;
  background: var(--white);
}
.integration-section__logo--sipuni {
  width: 67px;
  min-width: 67px;
  max-width: 67px;
  height: 42px;
  opacity: 0.8;
}

/* Webhook по макету: контейнер 107×52px, картинка 59×34px */
.integration-section__logo-item--webhook {
  padding: 0 24px;
  background: var(--blue-50);
}
.integration-section__logo--webhook {
  width: 59px;
  min-width: 59px;
  max-width: 59px;
  height: 34px;
  opacity: 1;
}

/* Одна картинка в блоке — на 100% ширины своей колонки (визуал) */
.integration-section__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  filter: drop-shadow(2px 4px 20px rgba(31, 41, 55, 0.04));
  display: block;
}

/* Две картинки с наложением — планшет (768px+) и десктоп; на мобильной (≤767px) колонка в своём медиа */
@media (min-width: 768px) {
.integration-section__visual--images-stack {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.integration-section__images-wrap {
  position: relative;
  flex-shrink: 0;
  width: 709px;
  max-width: 100%;
  height: 445px;
  min-height: 334px;
  overflow: hidden;
}
.integration-section__image--first {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 586px;
  max-width: 100%;
  height: 334px;
  object-fit: cover;
}
.integration-section__image--second {
  position: absolute;
  left: 163px;
  top: 133px;
  z-index: 2;
  width: 546px;
  max-width: calc(100% - 163px);
  height: 311px;
  object-fit: cover;
}
.integration-section__images-wrap--call {
  height: 512px;
  min-height: 311px;
}
.integration-section__visual--call .integration-section__image--first {
  width: 577px;
  max-width: 100%;
  height: 511px;
}
.integration-section__visual--call .integration-section__image--second {
  top: 174px;
}
.integration-section__images-wrap--dashboard {
  height: 523px;
  min-height: 349px;
}
.integration-section__visual--dashboard .integration-section__image--first {
  width: 613px;
  max-width: 100%;
  height: 349px;
  left: 96px;
  top: 0;
}
.integration-section__visual--dashboard .integration-section__image--second {
  width: 586px;
  max-width: calc(100% - 13px);
  height: 334px;
  left: 13px;
  top: 189px;
}
}

/* Мобильная: размеры картинок логотипов по Figma (переопределяют десктопные модификаторы) */
@media (max-width: 767px) {
  .integration-section__logo--bitrix {
    width: 78px;
    height: 16px;
  }
  .integration-section__logo--megafon {
    width: 41px;
    height: 22px;
  }
  .integration-section__logo--amocrm {
    width: 103px;
    height: 18px;
  }
  .integration-section__logo--onlinepbx {
    width: 114px;
    height: 22px;
  }
  .integration-section__logo--retailcrm {
    width: 89px;
    height: 16px;
  }
  .integration-section__logo--getcourse {
    width: 89px;
    height: 11px;
  }
  .integration-section__logo--mango {
    width: 170px;
    height: 24px;
  }
  .integration-section__logo--d {
    width: 47px;
    height: 18px;
  }
  .integration-section__logo--uin {
    width: 45px;
    height: 28px;
  }
  .integration-section__logo--sipuni {
    width: 46px;
    height: 26px;
  }
  .integration-section__logo--webhook {
    width: 44px;
    height: 28px;
  }
  .integration-section__logo--bilene {
    width: 37px;
    height: 22px;
  }
}

/* =====================================================
   Demo Section (CTA блок: запись на демо)
   Figma: секция padding 40 40 80, блок 64px 80px, #1F2937, radius 32px
   ===================================================== */
.demo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 40px 80px;
  gap: 40px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.demo-section__inner {
  width: 100%;
  max-width: 1360px;
  flex: none;
  box-sizing: border-box;
}

.demo-section__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 64px 80px;
  gap: 40px;
  width: 100%;
  min-height: 304px;
  background: #1F2937;
  border-radius: 32px;
  box-sizing: border-box;
}

.demo-section__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
}

.demo-section__title {
  margin: 0;
  color: #FFFFFF;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.demo-section__description {
  margin: 0;
  color: #FFFFFF;
  font-weight: 400;
  line-height: 1.4;
}

/* Кнопка: белый фон + градиентный текст в span (надёжное отображение во всех браузерах) */
.demo-section__btn {
  flex-shrink: 0;
  border-radius: 16px;
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
  color: #2563EB;
}
.demo-section__btn:hover {
  background-color: var(--button-inverse-background-hover);
  border-color: var(--button-inverse-border-hover);
}
.demo-section__btn:active {
  background-color: var(--button-inverse-background-active);
  border-color: var(--button-inverse-border-active);
}
.demo-section__btn:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.demo-section__btn:disabled,
.demo-section__btn.is-disabled {
  background-color: var(--button-inverse-background-disabled);
  border-color: var(--button-inverse-border-disabled);
  opacity: 0.8;
  cursor: not-allowed;
}
.demo-section__btn-text {
  background: linear-gradient(30deg, #2563EB 26.79%, #3B82F6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #2563EB;
}
.demo-section__btn:disabled .demo-section__btn-text,
.demo-section__btn.is-disabled .demo-section__btn-text {
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
}

@media (max-width: 1024px) {
  /* Планшет (iPad): текст слева, кнопка справа в одну строку */
  .demo-section {
    padding: 40px 40px 80px;
  }
  .demo-section__info {
    padding: 48px 40px;
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .demo-section__details {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
  }
  .demo-section__title,
  .demo-section__description {
    text-align: left;
  }
  .demo-section__btn {
    flex-shrink: 0;
    align-self: center;
  }
}

/* Мобильная Demo Section по Figma: padding 24 16 40, блок 40px 24px, gap 12/24, radius 24px */
@media (max-width: 767px) {
  .demo-section {
    padding: 24px 24px 40px;
    gap: 40px;
  }
  .demo-section__info {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 24px;
    gap: 24px;
    border-radius: 24px;
  }
  .demo-section__details {
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }
  .demo-section__title {
    font-size: 28px;
    line-height: 1.2;
  }
  .demo-section__description {
    font-size: 18px;
    line-height: 1.3;
  }
  .demo-section__btn {
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
  }
}

/* =====================================================
   Pricing Section (Тарифы)
   По Figma: тёмный фон, блок info 760px, details 1360px, карточки flex, gap 24px
   ===================================================== */
.pricing-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--size-40);
  gap: 64px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.pricing-section__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: var(--size-12);
  width: 100%;
  max-width: 760px;
}

.pricing-section__title {
  margin: 0;
  width: 100%;
  text-align: center;
  color: var(--text-primary);
}

.pricing-section__description {
  margin: 0;
  width: 100%;
  text-align: center;
  color: var(--text-secondary);
}

.pricing-section__details {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  gap: var(--size-24);
  width: 100%;
  max-width: 1360px;
}

.pricing-section__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--size-40);
  gap: var(--size-24);
  flex: 1 1 0;
  min-width: 0;
  background: var(--background-secondary);
  border-radius: var(--corners-cards);
  box-sizing: border-box;
  isolation: isolate;
}

.pricing-section__item--highlight {
  margin-top: -24px;
  background: var(--blue-100);
  box-shadow: 2px 4px 20px rgba(31, 41, 55, 0.04);
}

/* По Figma: 170×170px, top -53.74px, привязано к правому верхнему углу карточки */
.pricing-section__item-badge {
  position: absolute;
  left: auto;
  right: -28px;
  top: -54px;
  transform: none;
  width: 164px;
  height: 164px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.pricing-section__item-badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.pricing-section__item-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 6px;
  width: 100%;
}

.pricing-section__item-title {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.pricing-section__item-title--accent {
  background: linear-gradient(30deg, var(--blue-500) 26.79%, var(--blue-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-section__item-desc {
  margin: 0;
  color: var(--text-secondary);
}

.pricing-section__price-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  width: 100%;
}

.pricing-section__price-value {
  font-weight: 600;
  color: var(--text-primary);
}

.pricing-section__price-unit {
  color: var(--text-primary);
}

.pricing-section__item-btn {
  width: 100%;
  align-self: stretch;
  flex-shrink: 0;
}

/* Enterprise: на десктопе — «Запросить Enterprise-условия», на планшете/мобилке — «Запросить условия» */
.pricing-section__btn-label--mob {
  display: none;
}
.pricing-section__btn-label--desktop {
  display: inline;
}

.pricing-section__features {
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-12);
  width: 100%;
}

.pricing-section__feature {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--size-12);
  width: 100%;
}

.pricing-section__feature-bullet {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--blue-500);
}

.pricing-section__feature-text {
  color: var(--text-primary);
}

/* Pricing Section — планшет: три карточки по-прежнему в одну строку; Enterprise — короткий текст кнопки */
@media (max-width: 1024px) {
  .pricing-section__info {
    max-width: 100%;
  }
  .pricing-section__details {
    max-width: 100%;
  }
  .pricing-section__btn-label--desktop {
    display: none;
  }
  .pricing-section__btn-label--mob {
    display: inline;
  }
}

/* Pricing Section — мобильная (Figma: 390px, padding 40px 16px, gap 40px/16px, H2 28px, карточки 24px radius) */
@media (max-width: 767px) {
  .pricing-section {
    padding: var(--size-40) var(--size-24);
    gap: var(--size-40);
  }
  .pricing-section__info {
    width: 100%;
    max-width: 100%;
    gap: var(--size-12);
  }
  .pricing-section__title {
    width: 100%;
  }
  .pricing-section__description {
    width: 100%;
  }
  .pricing-section__details {
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--size-16);
    width: 100%;
  }
  .pricing-section__item {
    min-width: 0;
    width: 100%;
    padding: var(--size-24);
    gap: var(--size-24);
    border-radius: 24px;
  }
  .pricing-section__item--highlight {
    margin-top: 0;
  }
  .pricing-section__item-header {
    gap: 6px;
    width: 100%;
  }
  .pricing-section__item-title {
    font-weight: 600;
    color: var(--text-primary);
  }
  .pricing-section__item-desc {
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-secondary);
  }
  .pricing-section__price-value {
    font-size: 18px;
    line-height: 1.4;
  }
  .pricing-section__price-unit {
    font-size: 14px;
    line-height: 1.35;
  }
  .pricing-section__features {
    padding: 8px 0 0;
    gap: var(--size-12);
  }
  .pricing-section__feature-text {
    font-size: 16px;
    line-height: 1.35;
    color: var(--text-primary);
  }
  .pricing-section__item-badge {
    width: 100px;
    height: 100px;
    top: -32px;
  }
}

/* =====================================================
   Testimonial Section (Кейсы наших клиентов)
   По Figma: badge + блок с цитатами, padding 80px 40px, gap 40px/32px
   ===================================================== */
.testimonial-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--size-80) var(--size-40);
  gap: var(--size-40);
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.testimonial-section__badge {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: var(--size-6) var(--size-16) var(--size-6) 14px;
  gap: var(--size-8);
  background: var(--background-secondary);
  border-radius: 40px;
}

.testimonial-section__title {
  color: var(--text-primary);
}

.testimonial-section__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--size-40);
  gap: var(--size-32);
  width: 100%;
  background: var(--blue-50);
  border-radius: var(--corners-cards);
  box-sizing: border-box;
}

.testimonial-section__details {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding: 0;
  gap: var(--size-40);
  width: 100%;
}

.testimonial-section__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: var(--size-16);
  flex: 1 1 300px;
  min-width: 0;
}

.testimonial-section__quote {
  margin: 0;
  width: 100%;
  min-height: 112px;
  color: var(--text-primary);
}

.testimonial-section__category {
  margin: 0;
  color: var(--text-secondary);
}

/* Testimonial Section — планшет и мобильная */
@media (max-width: 1024px) {
  .testimonial-section__details {
    gap: var(--size-40);
  }
  .testimonial-section__item {
    flex: 1 1 260px;
  }
}

/* Testimonial Section — мобильная (Figma: 390px, padding 40px 16px, gap 24px, inner 24px, details gap 40px, Lead 18px/130%) */
@media (max-width: 767px) {
  .testimonial-section {
    padding: var(--size-40) var(--size-24);
    gap: 24px;
  }
  .testimonial-section__inner {
    padding: var(--size-24);
    gap: var(--size-32);
    border-radius: 24px;
    width: 100%;
  }
  .testimonial-section__details {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-40);
    width: 100%;
  }
  .testimonial-section__item {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .testimonial-section__quote {
    min-height: 28px;
    font-size: 18px;
    line-height: 1.3;
  }
}

/* =====================================================
   Connection Section (Как подключить Pipeline Sniper AI)
   Цвета: var(--text-primary), var(--background-secondary), var(--blue-50), var(--blue-500).
   Типографика: из базовых .text-section-h2, .text-lead, .text-card-h3, .text-body (в HTML).
   ===================================================== */
.connection-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--size-80) var(--size-40);
  gap: var(--size-40);
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.connection-section__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  gap: var(--size-12);
  width: 100%;
  max-width: 1360px;
}

/* Типографика из базовых классов .text-section-h2, .text-lead */
.connection-section__title {
  margin: 0;
  width: 100%;
  color: var(--text-primary);
}

.connection-section__description {
  margin: 0;
  width: 100%;
  color: var(--text-primary);
}

.connection-section__items {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: var(--size-24);
  width: 100%;
  max-width: 1360px;
}

.connection-section__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--size-24) var(--size-16) var(--size-16);
  gap: var(--size-16);
  flex: 1 1 0;
  min-width: 0;
  background: var(--background-secondary);
  border-radius: var(--corners-cards);
  box-sizing: border-box;
}

.connection-section__card--accent {
  background: var(--blue-50);
}

.connection-section__step {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.connection-section__step img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.connection-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 var(--size-24) var(--size-24);
  gap: var(--size-16);
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Типографика из .text-card-h3, .text-body */
.connection-section__card-title {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.connection-section__card-desc {
  margin: 0;
  min-height: 96px;
  color: var(--text-primary);
}

.connection-section__benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 0 0;
  gap: var(--size-16);
  width: 100%;
}

.connection-section__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
}

.connection-section__icon svg {
  width: 100%;
  height: 100%;
}

/* Типографика из .text-lead; на мобильной — как .text-body-secondary */
.connection-section__benefit-text {
  color: var(--text-primary);
}

/* Connection Section — планшет (iPad): карточки в ряд одной высоты, без «лесенки» */
@media (max-width: 1024px) {
  .connection-section__info {
    max-width: 100%;
  }
  .connection-section__items {
    max-width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .connection-section__card {
    flex: 1 1 280px;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .connection-section__content {
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* Connection Section — мобильная (по Figma 390px).
   Типографика H2, lead, H3 карточек — из базовых .text-section-h2, .text-lead, .text-card-h3 (медиа в base_site.css). */
@media (max-width: 767px) {
  .connection-section {
    padding: var(--size-40) var(--size-24);
    gap: var(--size-40);
  }
  .connection-section__info {
    gap: var(--size-12);
  }
  .connection-section__items {
    flex-direction: column;
    gap: var(--size-16);
    width: 100%;
  }
  .connection-section__card {
    flex: none;
    width: 100%;
    min-width: 0;
    padding: var(--size-16);
    gap: var(--size-8);
    border-radius: 24px;
  }
  .connection-section__step {
    width: 80px;
    height: 80px;
  }
  .connection-section__content {
    padding: 0 var(--size-8) var(--size-8);
    gap: var(--size-12);
  }
  /* В карточках на мобильной — размер как .text-body-secondary (14px/1.35) */
  .connection-section__card-desc,
  .connection-section__benefit-text {
    font-size: 14px;
    min-height: 16px;
    line-height: 1.35;
  }
  .connection-section__benefit {
    padding: 4px 0 0;
    gap: var(--size-16);
  }
  .connection-section__icon {
    width: 24px;
    height: 24px;
  }
}

/* =====================================================
   Growth Section (форма «Где скрыт потенциал роста»)
   Цвета: var(--text-primary), var(--text-secondary), var(--blue-50), var(--blue-500), var(--border-error).
   Типографика: из базовых .text-section-h2, .text-lead, .text-body, .text-body-secondary (в HTML).
   ===================================================== */
/* Фон на всю ширину страницы: выход из ограниченного .page-landing (max-width 1440px) на всю вьюпорт */
.growth-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--size-80) 0 0;
  width: 100%;
  background: var(--blue-50);
  box-sizing: border-box;
}

.growth-section__inner {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--size-40) var(--size-80);
  box-sizing: border-box;
  min-width: 0;
}

.growth-section__info {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: var(--size-40);
  width: 100%;
  min-width: 0;
}

/* По Figma: между H2 и описанием 12px, между блоком (H2+описание) и списком 32px */
.growth-section__details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  gap: var(--size-32);
  flex: 1 1 auto;
  min-width: 0;
}

.growth-section__title {
  margin: 0;
  color: var(--text-primary);
}

.growth-section__description {
  margin: 0;
  margin-top: calc(var(--size-12) - var(--size-32)); /* 12px между H2 и описанием при gap 32px */
  color: var(--text-primary);
}

.growth-section__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--size-12);
  width: 100%;
}

.growth-section__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--size-12);
}

.growth-section__bullet {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  background: var(--blue-500);
  flex-shrink: 0;
}

/* Текст пунктов: класс .text-body в HTML, цвет из base */
.growth-section__item-text {
  color: var(--text-secondary);
}

/* По Figma: padding-top 98px, между формой и кнопкой Telegram gap 24px */
.growth-section__form-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 98px 0 0;
  gap: var(--size-24);
  width: 100%;
  max-width: 489px;
  min-width: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* По Figma: между полями и кнопкой «Записаться» gap 20px */
.growth-section__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--size-20);
  width: 100%;
}

/* Между инпутами gap 20px (Figma: inner Growth Details gap 20) */
.growth-section__fields {
  display: flex;
  flex-direction: column;
  gap: var(--size-20);
  width: 100%;
}

.growth-section__fields .input-ps__field {
  max-width: none;
}

.growth-section__fields .input-ps__wrap .input-ps {
  height: 64px;
  min-height: 64px;
  padding: var(--size-12) var(--size-16);
  padding-top: var(--size-24);
}

/* Сообщение об ошибке: класс .text-body-secondary в HTML, цвет из base */
.growth-section__form-error {
  margin: 0;
  color: var(--border-error);
}

.growth-section__form-error[hidden],
.growth-section__form-success[hidden],
.growth-section__form-fail[hidden] {
  display: none;
}

.growth-section__form-success {
  margin: 0;
  color: #059669;
}

.growth-section__form-fail {
  margin: 0;
  color: var(--border-error);
}

/* Блок текста согласия и кнопки */
.growth-section__submit-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.growth-section__submit {
  width: 100%;
  height: 56px;
  min-height: 56px;
}

.growth-section__consent {
  margin: 0;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 135%;
  color: #6B7280;
}

.growth-section__consent-link {
  color: #6B7280;
  text-decoration: underline;
}

.growth-section__consent-link:hover {
  color: var(--text-primary, #1f2937);
  text-decoration: underline;
}

.growth-section__telegram {
  width: 100%;
  height: 56px;
  min-height: 56px;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* Growth Section — планшет: как на десктопе (текст слева, форма справа). Колонка только на мобильной */

/* Growth Section — мобильная (по Figma 390px). H2/lead — из базовых классов */
@media (max-width: 767px) {
  .growth-section {
    padding: var(--size-40) 0 0;
  }
  .growth-section__inner {
    padding: 0 var(--size-24) var(--size-40);
  }
  .growth-section__info {
    flex-direction: column;
    align-items: stretch;
    gap: var(--size-32);
  }
  .growth-section__form-wrap {
    max-width: none;
    padding-top: 0;
    gap: var(--size-20);
  }
  /* Текстовый блок: 16px между (H2+описание) и списком; 6px между H2 и описанием */
  .growth-section__details {
    gap: var(--size-16);
  }
  .growth-section__description {
    margin-top: calc(var(--size-12) - var(--size-16));
  }
  .growth-section__list {
    gap: var(--size-12);
  }
  .growth-section__item {
    gap: var(--size-8);
  }
  .growth-section__bullet {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
  }
  /* На мобильной — размер/межстрочный как .text-body-secondary, цвет --text-secondary */
  .growth-section__item-text {
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-secondary);
  }
  /* Форма: 20px между полями и кнопкой, 8px между инпутами */
  .growth-section__form {
    gap: var(--size-20);
  }
  .growth-section__fields {
    gap: var(--size-8);
  }
}

/* =====================================================
   Result Section (Прозрачный результат для всей команды)
   По Figma: padding 80px 40px 40px, gap 40px, background #FFFFFF
   ===================================================== */
.team-section {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 40px 40px;
  gap: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFFFF;
  box-sizing: border-box;
}

.team-section::before {
  display: none;
}

.team-section__inner {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
}

/* Result Info: заголовок, gap 24px */
.team-section__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 24px;
  width: 100%;
  max-width: 1360px;
}

/* H2: типографика из .text-section-h2 (десктоп 40px, мобильная 28px); только выравнивание и цвет */
.team-section__title {
  margin: 0;
  width: 100%;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
}

/* impact: табы + контент, gap 32px */
.team-section__impact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 32px;
  width: 100%;
  max-width: 1360px;
}

/* Segment control по Figma: padding 10px 12px, border, radius 120px; таб 16px 20px, gap 16px, height 60px, radius 48px */
.team-segment {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 10px 12px;
  width: 100%;
  max-width: 1018px;
  min-height: 80px;
  border: 1px solid var(--border-default);
  border-radius: 120px;
  background: var(--background-primary);
  flex: none;
}

.team-segment__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
  gap: 16px;
  min-height: 60px;
  margin: 0;
  border: none;
  border-radius: 48px;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s ease-out, color 0.25s ease-out, box-shadow 0.25s ease-out;
  min-width: 0;
  box-sizing: border-box;
}

.team-segment__item:hover {
  background: var(--gray-100);
  color: var(--text-secondary);
}

/* Выбранный таб: фон blue-100, текст primary, weight 600 */
.team-segment__item--active {
  background: var(--background-active);
  color: var(--text-primary);
  font-weight: 600;
}

.team-segment__item--active:hover {
  background: var(--blue-100);
  color: var(--text-primary);
}

.team-segment__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color 0.25s ease-out;
}

.team-segment__item:hover .team-segment__icon {
  color: var(--text-secondary);
}

.team-segment__item--active .team-segment__icon {
  color: var(--blue-500);
}

.team-segment__item--active:hover .team-segment__icon {
  color: var(--blue-500);
}

.team-segment__icon svg,
.team-segment__icon .team-segment__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.team-segment__label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Короткая подпись первого таба только на мобильной */
.team-segment__label--mobile {
  display: none;
}

/* content: flex row, gap 24px; left 668px flex 1, right 668px flex 1 */
.team-cards {
  position: relative;
  width: 100%;
  max-width: 1360px;
}

.team-cards__panel {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.team-cards__panel--active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.team-cards__panel[hidden] {
  display: none !important;
}

/* content: flex row, gap 24px; left — две карточки, right — широкая карточка */
.team-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  max-width: 1360px;
}

.team-cards__card--wide {
  grid-column: 2;
  grid-row: 1 / -1;
}

/* card 1: padding 24px; head — gap 2px между heading и text; остальные карточки — свой gap */
.team-cards__card {
  background: var(--background-secondary);
  border-radius: 32px;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 0;
  overflow: visible;
}

/* первая карточка: заголовок .text-metric-value, текст .text-lead; head = gap 2px */
.team-cards__grid > .team-cards__card:first-child {
  gap: 2px;
  align-items: flex-start;
}

/* вторая карточка в колонке: gap 8px */
.team-cards__card:has(.team-cards__card-title) + .team-cards__card {
  gap: 8px;
}

.team-cards__card--accent-text {
  gap: 8px;
}

.team-cards__card--wide {
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 24px;
  gap: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  align-items: end;
  justify-items: end;
}

.team-cards__card--wide .team-cards__card-title,
.team-cards__card--wide .team-cards__card-text {
  justify-self: start;
  align-self: start;
  grid-column: 1;
}

.team-cards__card--wide .team-cards__chart {
  grid-column: 2;
  grid-row: 1 / -1;
}

.team-cards__card-title {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--blue-500);
}

.team-cards__card-title--dark {
  color: var(--text-primary);
}

.team-cards__card-text {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* card 2 (Собственник): текст 24px/130%; синий только у фраз в .team-cards__card-accent */
.team-cards__card--accent-text .team-cards__card-text {
  font-size: 24px;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Выделенный фрагмент (не ссылка), синий без подчёркивания */
.team-cards__card-link {
  color: var(--text-link);
  font-weight: 500;
}

/* Синий акцент без подчёркивания (фразы во второй карточке) */
.team-cards__card-accent {
  color: var(--blue-500);
}

/* В правых карточках типографика от .text-body на карточке */
.team-cards__card--wide .team-cards__card-text {
  flex: 1 1 auto;
  font-size: inherit;
  line-height: inherit;
}

/* третья карточка (Собственник): текст .text-lead */
.team-cards__card--wide .team-cards__card-text.text-lead {
  font-size: 20px;
  line-height: 1.4;
}

/* chart: 216×216, картинка из static/images/chart.png (подключается в шаблоне) */
.team-cards__chart {
  width: 216px;
  height: 216px;
  flex-shrink: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Панель Менеджеры: третья карточка — без верхнего паддинга, loot 246×308 прижат к верху */
#team-panel-managers .team-cards__card--wide {
  padding: 0 24px 24px;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  flex-direction: row;
  grid-template-columns: unset;
  grid-template-rows: unset;
  justify-items: unset;
}

#team-panel-managers .team-cards__card--wide .team-cards__card-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 358px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-primary);
  justify-self: unset;
  align-self: center;
  grid-column: unset;
}

#team-panel-managers .team-cards__card--wide .team-cards__chart {
  width: 246px;
  height: 308px;
  flex-shrink: 0;
  align-self: flex-start;
  grid-column: unset;
  grid-row: unset;
}

/* Панель Менеджеры: первая карточка — текст 24px/130%, #1F2937 */
.team-cards__card--managers-first .team-cards__card-text {
  font-size: 24px;
  line-height: 1.3;
  color: var(--text-primary);
}

/* Карточка с заголовком: head gap 2px, заголовок слева */
.team-cards__grid > .team-cards__card:has(.team-cards__card-title) {
  gap: 2px;
  align-items: flex-start;
}

/* Панель РОП: сетка 2×2, четыре карточки */
.team-cards__grid--quad .team-cards__card:has(.team-cards__card-title) {
  gap: 2px;
  align-items: flex-start;
}

/* Карточка с картинкой (чеклист): по Figma — flex-end, align-start, gap 8px; текст 18px/135%; чеклист 186×186 */
.team-cards__card--with-image {
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}

.team-cards__card--with-image .team-cards__card-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 426px;
  font-size: inherit;
  line-height: inherit;
  color: var(--text-primary);
}

.team-cards__card-image {
  flex-shrink: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.team-cards__card-image--checklist {
  width: 186px;
  height: 186px;
}

@media (max-width: 1024px) {
  .team-section {
    padding: 60px 40px;
  }
  .team-segment {
    max-width: 100%;
  }
  .team-segment__label {
    font-size: 14px;
  }
  /* Планшет: сетка 2 колонки; если 3 карточки — третья на всю ширину */
  .team-cards__grid {
    grid-template-columns: 1fr 1fr;
  }
  .team-cards__grid--quad {
    grid-template-columns: 1fr 1fr;
  }
  .team-cards__card--wide {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: 1fr;
  }
  .team-cards__card--with-image {
    flex-direction: column;
    align-items: flex-start;
  }
  /* РОП: на планшете картинка остаётся справа от текста */
  #team-panel-rop .team-cards__card--with-image {
    flex-direction: row;
    justify-content: flex-end;
  }
  .team-cards__chart {
    justify-self: start;
  }
}

/* Мобильная по Figma: табы padding 4px, активный 209×48 px 12 gap 8, неактивные 70.5×48, иконка 24×24; контент колонка gap 16px; карточки radius 24px, chart 156×156 */
@media (max-width: 767px) {
  .team-section {
    padding: 40px 24px;
  }
  .team-section__inner {
    gap: 24px;
    width: 100%;
    max-width: 100%;
  }
  .team-section__impact {
    gap: 24px;
    width: 100%;
    max-width: 100%;
  }
  /* tabs: padding 4px, height 56px, border, radius 120px */
  .team-segment {
    flex-direction: row;
    align-items: flex-start;
    padding: 4px;
    width: 100%;
    min-height: 56px;
    height: 56px;
    border: 1px solid var(--border-default);
    border-radius: 120px;
    flex-wrap: nowrap;
  }
  /* tab: padding 12px, height 48px, radius 48px; неактивные — только иконка */
  .team-segment__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px;
    min-height: 48px;
    height: 48px;
    border-radius: 48px;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.35;
    gap: 16px;
  }
  .team-segment__item .team-segment__label {
    display: none;
  }
  .team-segment__item--active {
    flex: 0 0 auto;
    width: 209px;
    gap: 8px;
    background: var(--background-active);
    color: var(--text-primary);
    font-weight: 600;
  }
  .team-segment__item--active .team-segment__label {
    display: inline;
  }
  .team-segment__label--desktop {
    display: none !important;
  }
  .team-segment__item--active .team-segment__label--mobile {
    display: inline;
  }
  .team-segment__item--active .team-segment__icon {
    color: var(--blue-500);
  }
  .team-segment__icon {
    width: 24px;
    height: 24px;
  }
  .team-segment__item:hover {
    background: var(--gray-100);
    color: var(--text-secondary);
  }
  .team-segment__item--active:hover {
    background: var(--blue-100);
    color: var(--text-primary);
  }
  /* content: flex column, gap 16px */
  .team-cards__panel--active {
    display: block;
  }
  .team-cards__grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
  }
  /* Карточка с текстом и графиком: текст сверху на всю ширину по левому краю, под ним картинка 156×156 справа */
  .team-cards__card--wide {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 24px;
  }
  .team-cards__card--wide .team-cards__card-title,
  .team-cards__card--wide .team-cards__card-text {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }
  .team-cards__card--wide .team-cards__chart {
    align-self: flex-end;
  }
  /* card 1: padding 24px, gap 8px; heading 28px Bold 120%; text 16px 130% */
  .team-cards__card {
    width: 100%;
    padding: 24px;
    gap: 8px;
    border-radius: 24px;
    align-items: flex-end;
  }
  .team-cards__card:first-child .team-cards__card-title {
    margin: 0 0 2px 0;
  }
  .team-cards__card-title {
    font-size: 28px;
    line-height: 1.2;
    color: var(--blue-500);
  }
  .team-cards__card-title--dark {
    color: var(--text-primary);
  }
  .team-cards__card-text {
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-primary);
  }
  /* Текст с .text-lead в карточках на мобилке — 16px (перебиваем десктопные 20px) */
  .team-cards__card--wide .team-cards__card-text.text-lead,
  #team-panel-managers .team-cards__card--wide .team-cards__card-text.text-lead,
  #team-panel-managers .team-cards__card--wide .team-cards__card-text {
    font-size: 16px;
    line-height: 1.35;
  }
  .team-cards__card--accent-text .team-cards__card-text {
    font-size: 16px;
    line-height: 1.3;
    color: var(--text-primary);
  }
  .team-cards__card--managers-first .team-cards__card-text {
    font-size: 16px;
    line-height: 1.35;
  }
  /* chart 156×156 на мобильной */
  .team-cards__chart {
    width: 156px;
    height: 156px;
  }
  /* РОП: карточка с картинкой — текст сверху, под ним картинка 156×156 справа (перебиваем планшетный row) */
  #team-panel-rop .team-cards__card--with-image,
  .team-cards__card--with-image {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    justify-content: flex-start;
  }
  .team-cards__card--with-image .team-cards__card-text {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }
  .team-cards__card--with-image .team-cards__card-image {
    align-self: flex-end;
  }
  .team-cards__card-image--checklist {
    width: 156px;
    height: 156px;
  }
  /* Менеджеры: карточка с loot — картинка сверху без отступа, под ней текст на всю ширину */
  #team-panel-managers .team-cards__card--wide {
    padding: 0 24px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  #team-panel-managers .team-cards__card--wide .team-cards__card-text {
    order: 2;
    width: 100%;
    max-width: 100%;
    text-align: left;
    font-size: 16px;
    line-height: 1.35;
  }
  #team-panel-managers .team-cards__card--wide .team-cards__chart {
    order: 1;
    align-self: center;
    width: 100%;
    max-width: 280px;
    max-height: 185px;
    height: auto;
    aspect-ratio: 246 / 308;
  }
}

/* =====================================================
   Demo Modal — запись на демо (по макету)
   Оверлей: основной тёмный цвет, прозрачность 24%.
   Закрытие: крестик, клик вне окна.
   ===================================================== */
/* Блокировка скролла страницы при открытой модалке (важно для мобильных) */
body.demo-modal-open {
  position: fixed;
  overflow: hidden;
  width: 100%;
  left: 0;
  right: 0;
}

.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-24);
  box-sizing: border-box;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease, opacity 0.2s ease;
}

.demo-modal.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.demo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 41, 55, 0.24); /* --gray-900, 24% */
  cursor: pointer;
}

.demo-modal__box {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
  gap: 32px;
  width: 100%;
  max-width: 520px;
  min-height: 556px;
  background: #F9FAFB;
  border-radius: 32px;
  box-sizing: border-box;
  cursor: default;
}

.demo-modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #9CA3AF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.demo-modal__close:hover {
  color: var(--gray-600);
  background: var(--gray-200);
}

.demo-modal__close svg {
  width: 100%;
  height: 100%;
}

.demo-modal__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0 0;
  gap: 6px;
  width: 100%;
}

/* Типографика из base_site .text-section-h2 (добавить класс в HTML) */
.demo-modal__title {
  margin: 0;
  font-weight: 700;
  color: var(--text-primary);
  align-self: stretch;
}

/* Типографика из base_site .text-lead (добавить класс в HTML) */
.demo-modal__description {
  margin: 0;
  color: var(--text-primary);
  align-self: stretch;
}

.demo-modal__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  flex: 1;
}

.demo-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.demo-modal__fields .input-ps__field {
  max-width: none;
  width: 100%;
}

.demo-modal__fields .input-ps__wrap {
  width: 100%;
}

/* Только размеры и фон; типографика из компонента .input-ps + .text-body (base_site) */
.demo-modal__fields .input-ps__wrap .input-ps {
  width: 100%;
  height: 64px;
  min-height: 64px;
  padding: 12px 16px;
  padding-top: 24px;
  box-sizing: border-box;
  background: var(--input-background-default, #FFFFFF);
  border-radius: 16px;
}

.demo-modal__fields .input-ps__wrap .input-ps::placeholder {
  color: var(--input-placeholder);
}

.demo-modal__form-error {
  margin: 0;
  color: var(--border-error);
}

.demo-modal__form-error[hidden],
.demo-modal__form-success[hidden],
.demo-modal__form-fail[hidden] {
  display: none;
}

.demo-modal__form-success {
  margin: 0;
  color: #059669;
}

.demo-modal__form-fail {
  margin: 0;
  color: var(--border-error);
}

.demo-modal__submit-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.demo-modal__consent {
  margin: 0;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 135%;
  color: #6B7280;
}

.demo-modal__consent-link {
  color: #6B7280;
  text-decoration: underline;
}

.demo-modal__consent-link:hover {
  color: var(--text-primary, #1f2937);
  text-decoration: underline;
}

/* Кнопка — только раскладка; типографика и вид из .btn-ps .btn-ps--primary .btn-ps--large .text-button-large (base_site) */
.demo-modal__submit {
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
}

.demo-modal__btn-text--short {
  display: none;
}

.demo-modal__btn-text--long {
  display: inline;
}

@media (max-width: 559px) {
  .demo-modal__btn-text--short {
    display: inline;
  }
  .demo-modal__btn-text--long {
    display: none;
  }
  .demo-modal__box {
    padding: 24px 20px;
    gap: 24px;
    min-height: auto;
  }
  /* Заголовок модалки меньше на узких экранах (24px вместо 28px из base) */
  .demo-modal__title {
    font-size: 24px;
    line-height: 1.2;
  }
}

/* =====================================================
   Scroll Reveal — плавное появление секций при скролле
   Включается классом .js-scroll-reveal на .page-landing
   ===================================================== */
.page-landing.js-scroll-reveal section:not(.main-section) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.page-landing.js-scroll-reveal section:not(.main-section).is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-landing.js-scroll-reveal section:not(.main-section) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}