/* ============================================================
   ЕДИНЫЙ СТИЛЬ КОММЕРЧЕСКИХ СТРАНИЦ
   Подключение: header.php, после стилей страниц и mobile.css.
   Область: body.commercial-page. Имена существующих файлов сохранены.
   1. Переменные  2. Текст  3. Первый экран  4. Кнопки
   5. Карточки  6. Иконки  7. Раскладка  8. Мобильная версия
   Цвет, форма иконок и оформление карточек одинаковы на всех экранах.
   ============================================================ */
body.commercial-page {
  --ci-blue: #2563eb;
  --ci-navy: #0f172a;
  --ci-violet: #7c3aed;
  --ci-text: #334155;
  --ci-muted: #64748b;
  --ci-line: #e2e8f0;
  --ci-surface: #f8fafc;
  --ci-radius: 16px;
  --ci-shadow: 0 8px 28px rgb(15 23 42 / 6%);
  --ci-primary: linear-gradient(115deg, #2563eb, #7c3aed);
  font-family: "Montserrat", Arial, sans-serif;
  line-height: 1.65;
}

/* 2. Сохраняем иерархию, не превращая все заголовки в один размер. */
body.commercial-page h1 {
  font-size: clamp(30px, 4.4vw, 56px) !important;
  line-height: 1.16 !important;
  font-weight: 800;
  letter-spacing: -.025em;
  word-break: normal !important;
  overflow-wrap: break-word;
  hyphens: none !important;
}
body.commercial-page :is(h2.section-title, h2.section__title, .section-header > h2) {
  font-size: clamp(26px, 3vw, 38px) !important;
  line-height: 1.25 !important;
  font-weight: 750;
  text-transform: none;
  letter-spacing: -.02em;
  word-break: normal !important;
  hyphens: none !important;
}
body.commercial-page :is(.section-subtitle, .section__subtitle) {
  font-size: clamp(16px, 1.6vw, 18px) !important;
  line-height: 1.7 !important;
  hyphens: none !important;
}
body.commercial-page :is(.justified-text p, .article-text) { text-align: left; }
body.commercial-page :is(button, input, select, textarea) { font-family: inherit; }

/* 3. Единый первый экран: тёмно-синий фон и светлый текст. */
body.commercial-page :is(section.hero, section.hero-section, .eim-hero, .pricing-header) {
  background: radial-gradient(ellipse at 90% 15%, rgb(124 58 237 / 20%), transparent 55%), linear-gradient(125deg, #0f172a, #1e3a8a) !important;
  color: #fff;
}
body.commercial-page :is(.hero, .hero-section, .eim-hero, .pricing-header) h1 {
  color: #fff !important;
  -webkit-text-fill-color: currentColor;
  background: none;
}
body.commercial-page :is(.hero, .hero-section, .eim-hero, .pricing-header) h1 span {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
  background: none !important;
}
body.commercial-page :is(.hero__subtitle, .hero-subtitle, .eim-hero-description, .pricing-subtitle) {
  color: #e2e8f0 !important;
  font-size: clamp(16px, 1.7vw, 20px) !important;
  line-height: 1.7 !important;
  text-shadow: none;
  -webkit-line-clamp: unset;
  overflow: visible;
}
body.commercial-page .pricing-header { padding: 36px; border-radius: 20px; }
body.commercial-page :is(.hero-section, .eim-hero) .breadcrumbs a { color: #dbeafe; }

/* 4. Основные, вторичные и Telegram-кнопки; единые состояния. */
body.commercial-page :is(.btn, .service-cta, .case-card__btn, .offer__submit, .product-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  max-width: 100%;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 10px !important;
  background: var(--ci-primary);
  color: #fff;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.4 !important;
  text-align: center;
  white-space: normal;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow .2s, filter .2s;
}
body.commercial-page :is(.btn-outline, .btn--outline, .btn-secondary) {
  background: transparent;
  border-color: var(--ci-blue);
  color: var(--ci-blue);
}
body.commercial-page :is(.hero, .hero-section, .eim-hero, .pricing-header, .bg-dark) :is(.btn-outline, .btn--outline, .btn-secondary) {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 50%);
  color: #fff;
}
body.commercial-page :is(.btn--telegram, .btn-telegram) { background: #087eaf; color: #fff; }
@media (hover: hover) {
  body.commercial-page :is(.btn, .service-cta, .case-card__btn, .offer__submit, .product-btn):hover {
    transform: none;
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgb(37 99 235 / 18%);
  }
}
body.commercial-page :is(a, button, input, textarea, summary):focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }

/* 5. Содержательные карточки; декоративные схемы и FAQ сюда не входят. */
body.commercial-page :is(.advantage-card, .service-card, .feature-card, .benefit-card,
.capability-card, .product-card, .value-card, .pricing-card, .config-card,
.case-card, .tasks__card, .integrations__card, .advantages__card, .asset-types__card,
.who-needs-aim__card, .other-services__card, .systems-integration__card) {
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius) !important;
  background: #fff;
  color: var(--ci-text);
  box-shadow: var(--ci-shadow);
  min-width: 0;
}
body.commercial-page :is(.advantage-card, .service-card, .feature-card, .benefit-card,
.capability-card, .product-card, .value-card, .pricing-card, .config-card,
.tasks__card, .integrations__card, .advantages__card, .asset-types__card,
.who-needs-aim__card, .other-services__card, .systems-integration__card) :is(h3, h4) {
  color: var(--ci-navy);
  font-size: clamp(19px, 1.8vw, 23px) !important;
  line-height: 1.35 !important;
  text-transform: none;
  hyphens: none;
}
body.commercial-page :is(.advantage-card, .service-card, .feature-card, .benefit-card,
.capability-card, .product-card, .value-card, .config-card,
.tasks__card, .integrations__card, .advantages__card, .asset-types__card,
.who-needs-aim__card, .other-services__card, .systems-integration__card) p {
  color: var(--ci-text);
  font-size: 16px;
  line-height: 1.7;
}

/* 6. Одна библиотека и одинаковые плашки 48×48 / пиктограммы 22 px.
   Логотипы продуктов, рисунки схем и управляющие стрелки не подменяются. */
body.commercial-page :is(.feature-icon, .benefit-icon, .value-icon, .service-card-icon,
.config-card-icon, .quick-nav-icon, .download-icon, .component-icon, .support-icon,
.advantages__icon, .asset-types__icon, .integrations__icon, .tasks__icon,
.other-services__icon, .systems-integration__card-icon, .trust-icon, .problem-icon,
.stage-card__icon-wrap, .case-card__industry-icon, .offer__include-icon,
.who-needs-aim__card > i) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 1px solid #dbeafe;
  border-radius: 12px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  font-size: 22px !important;
  line-height: 1;
  box-shadow: none !important;
  transform: none !important;
}
body.commercial-page :is(.feature-icon, .benefit-icon, .value-icon, .service-card-icon,
.config-card-icon, .quick-nav-icon, .download-icon, .component-icon, .support-icon,
.advantages__icon, .asset-types__icon, .integrations__icon, .tasks__icon,
.other-services__icon, .systems-integration__card-icon, .trust-icon, .problem-icon,
.stage-card__icon-wrap, .case-card__industry-icon, .offer__include-icon) > :is(i, svg) {
  display: inline-block !important;
  width: 1em;
  height: 1em;
  margin: 0;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1;
  background: none;
  -webkit-text-fill-color: currentColor;
}
/* CSS-иконки сохраняют свой шрифт, даже если у страницы есть общий reset. */
body.commercial-page i:is(.fas, .fa-solid, .fa) { font-family: "Font Awesome 7 Free" !important; font-weight: 900 !important; font-style: normal; }
body.commercial-page i:is(.far, .fa-regular) { font-family: "Font Awesome 7 Free" !important; font-weight: 400 !important; font-style: normal; }
body.commercial-page i:is(.fab, .fa-brands) { font-family: "Font Awesome 7 Brands" !important; font-weight: 400 !important; font-style: normal; }

/* 7. Карточки услуг занимают высоту содержимого, а не фиксированные 500–750 px. */
body.service-page .service-cards-container { display: grid; height: auto !important; min-height: 0; overflow: visible; }
body.service-page .service-cards-container > .service-card { grid-area: 1 / 1; position: relative !important; height: auto !important; min-height: 0; align-self: start; }
body.service-page .service-card:not(.active) { display: none !important; }
body.service-page .service-card.active { display: flex; opacity: 1; visibility: visible; transform: none; }
body.service-page .service-card-inner { height: auto; min-height: 0; }
body.service-page .service-features-grid { overflow: visible; }
body.service-page .service-card-icon i { display: inline-block !important; }
body.commercial-page :is(.capabilities-grid, .demo-content) > * { min-width: 0; }

/* 8. Адаптация меняет размеры и сетку. Цвета, иконки и содержание те же. */
@media (max-width: 1024px) {
  body.commercial-page .capabilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.commercial-page .hero__inner { gap: 32px; }
}
@media (max-width: 768px) {
  body.commercial-page :is(.container, .eim-container, .pricing-container) { width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: 20px; }
  body.commercial-page :is(.hero-grid, .hero__inner, .demo-content) { grid-template-columns: minmax(0, 1fr) !important; }
  body.commercial-page :is(.hero__content, .hero-content, .hero__visual) { min-width: 0; max-width: 100%; }
  body.commercial-page :is(section.hero, section.hero-section) { min-height: auto; height: auto; padding-block: 120px 56px; }
  body.commercial-page .hero-inner { padding-block: 0; }
  body.commercial-page .fullpage { min-height: auto; height: auto; }
  body.commercial-page .pricing-header { padding: 28px 20px; }
  body.commercial-page :is(h1, h2, h3) { word-break: normal !important; hyphens: none !important; }
  body.commercial-page :is(.hero__subtitle, .hero-subtitle, .hero__bullet, .hero-chips .chip) { display: block !important; max-height: none; overflow: visible; white-space: normal; }
  body.commercial-page .hero__bullet { display: flex !important; }
  body.commercial-page .hero__trust { display: flex !important; flex-wrap: wrap; gap: 12px; }
  body.commercial-page :is(.hero__cta, .hero-actions, .cta-buttons) { display: flex; flex-wrap: wrap; gap: 12px; }
  body.commercial-page :is(.hero__cta, .hero-actions, .cta-buttons) > .btn { flex: 1 1 220px; }
  body.commercial-page :is(.services-grid, .capabilities-grid, .demo-content) { grid-template-columns: minmax(0, 1fr); }
  body.commercial-page .eim-benefits .benefits-grid { flex-direction: column; }
  body.commercial-page .benefits-column { width: 100%; }
  body.commercial-page .benefit-card { min-height: 0; }
  body.commercial-page :is(.demo-visual, .demo-info) { padding: 24px; }
  body.commercial-page .service-card { padding: 24px; }
  body.service-page .services-container { display: flex; flex-direction: column; gap: 24px; }
  body.service-page .services-sidebar { position: static; width: 100%; padding: 12px; }
  body.service-page .services-nav { display: flex; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 8px; }
  body.service-page .service-nav-item { flex: 0 0 auto; white-space: nowrap; }
  body.service-page .services-content { min-width: 0; width: 100%; }
  body.service-page .service-card-header { flex-direction: row; align-items: center; gap: 16px; }
  body.service-page .service-features-grid { grid-template-columns: minmax(0, 1fr); }
  body.commercial-page .how-it-works__schema { overflow-x: auto; }
  body.commercial-page :is(.tasks__card, .integrations__card, .advantages__card, .asset-types__card, .who-needs-aim__card, .principle-card--light) p {
    display: block !important; max-height: none !important; opacity: 1 !important; overflow: visible !important;
  }
  body.commercial-page .how-aim-works__step p { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
  body.commercial-page img { max-width: 100%; }
}
@media (max-width: 480px) {
  body.commercial-page :is(.container, .eim-container, .pricing-container) { padding-inline: 16px; }
  body.commercial-page .btn { padding-inline: 18px; }
  body.commercial-page :is(.hero__cta, .hero-actions, .cta-buttons) > .btn { flex-basis: 100%; }
  body.commercial-page .orbit { width: min(100%, 300px); }
}

/* Дополнения для существующей разметки отдельных продуктов. */
body.commercial-page .eim-subtitle { color: #e2e8f0; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7; }
body.commercial-page :is(.hero__bg, .hero__glow) { pointer-events: none; }
@media (max-width: 768px) {
  body.commercial-page .hero__inner { padding-block: 0 !important; }
  body.commercial-page .hero__trust { padding-block: 24px 0; }
  body.commercial-page .eim-hero { padding: 40px 24px; }
  body.commercial-page .hero-content .btn { min-width: 0; }
  body.commercial-page .hero-right { padding-right: 0; }
  body.commercial-page .hero__schema .schema-svg { display: block; width: 100%; height: auto; }
}

/* Страницы услуг: цельный заголовок и более выразительный первый экран. */
body.commercial-page.service-page section.hero-section {
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 76vh, 760px);
  padding: 148px 0 88px;
  background:
    radial-gradient(ellipse at 9% 30%, rgb(37 99 235 / 38%), transparent 48%),
    radial-gradient(ellipse at 93% 65%, rgb(124 58 237 / 30%), transparent 45%),
    linear-gradient(rgb(147 197 253 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(147 197 253 / 6%) 1px, transparent 1px),
    linear-gradient(125deg, #0f172a, #172554) !important;
  background-size: auto, auto, 56px 56px, 56px 56px, auto !important;
}
body.service-page .hero-section::before,
body.service-page .hero-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(240px, 30vw, 460px);
  aspect-ratio: 1;
  border: 1px solid rgb(147 197 253 / 16%);
  border-radius: 28%;
  transform: rotate(30deg);
  pointer-events: none;
  background: linear-gradient(140deg, rgb(96 165 250 / 5%), transparent);
}
body.service-page .hero-section::before { left: -12%; top: 12%; }
body.service-page .hero-section::after { right: -10%; bottom: -26%; transform: rotate(-25deg); }
body.service-page .hero-section .container { position: relative; z-index: 1; }
body.service-page .hero-section .hero-content { width: 100%; max-width: 1040px; padding-inline: 0; }
body.commercial-page.service-page h1.hero-title {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 28px;
  font-size: clamp(30px, 4.2vw, 56px) !important;
  line-height: 1.18 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal;
  text-wrap: balance;
  letter-spacing: -.025em;
}
body.service-page .hero-section .hero-subtitle {
  max-width: 760px;
  margin: 0 auto 32px;
  line-height: 1.7 !important;
  text-wrap: pretty;
}
body.service-page .hero-section .cta-buttons { justify-content: center; }
@media (max-width: 768px) {
  body.commercial-page.service-page section.hero-section {
    min-height: auto;
    padding: 116px 0 64px;
    background-size: auto, auto, 40px 40px, 40px 40px, auto !important;
  }
  body.commercial-page.service-page h1.hero-title { margin-bottom: 24px; font-size: clamp(28px, 6.8vw, 42px) !important; }
  body.service-page .hero-section .hero-subtitle { margin-bottom: 28px; }
  body.service-page .hero-section .scroll-down-arrow { display: none; }
}