/* Shared refinement layer for every inner page except the isolated Bitrix24 audit. */
.inner-system-v13 {
  --iv13-action: #ff5c35;
  --iv13-data: #43e5cf;
  --iv13-attention: #d94cff;
  --iv13-focus: #0a766e;
  min-width: 0;
  overflow: clip;
}

.inner-system-v13--integration,
.inner-system-v13--solution {
  --iv13-rail-start: var(--iv13-data);
  --iv13-rail-end: var(--iv13-action);
}

.inner-system-v13--problem {
  --iv13-rail-start: var(--iv13-attention);
  --iv13-rail-end: var(--iv13-action);
}

.inner-system-v13--scenario,
.inner-system-v13--service {
  --iv13-rail-start: var(--iv13-action);
  --iv13-rail-end: var(--iv13-data);
}

.inner-system-v13--index,
.inner-system-v13--article,
.inner-system-v13--glossary,
.inner-system-v13--comparison,
.inner-system-v13--utility {
  --iv13-rail-start: var(--iv13-attention);
  --iv13-rail-end: var(--iv13-data);
}

.inner-system-v13 :is([class*="__grid"], [class*="__layout"], [class*="__inner"], [class*="__copy"], [class*="__card"], article, aside, li, p, h1, h2, h3) {
  min-width: 0;
}

.inner-system-v13 .iv4-hero-copy {
  min-width: 0;
}

.inner-system-v13 :is(h1, h2, h3) {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
  text-wrap: pretty;
}

.inner-system-v13 :is(p, a, span, strong, b, small) {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Headings keep whole words. Wider copy rails and restrained type scales make
   that rule safe from 320px phones through wide desktop layouts. */
.inner-system-v13 :is(
  [class*="-hero"] .iv4-hero-copy h1,
  [class*="-hero__copy"] h1
) {
  max-inline-size: 100%;
  font-size: clamp(46px, 4.8vw, 78px);
  line-height: .96;
  letter-spacing: -.05em;
}

.inner-system-v13 :is(
  .iv4-section-head h2,
  .iv8-head h2,
  .iv9-head h2,
  .iv10-head h2,
  .iv11-head h2,
  .iv12-head h2
) {
  max-inline-size: 100%;
  font-size: clamp(32px, 3.3vw, 52px);
  line-height: 1;
  letter-spacing: -.045em;
}

.inner-system-v13 :is(
  .inner-v12--utility-privacy,
  .inner-v12--utility-consent
) .iv12-hero h1 {
  font-size: clamp(42px, 4.1vw, 66px);
}

@media (min-width: 1121px) {
  .inner-system-v13 :is(
    .iv4-service-hero__grid,
    .iv4-solution-hero__grid,
    .iv4-problem-hero__grid,
    .iv4-index-hero__grid,
    .iv5-implementation-hero__grid,
    .iv5-support-hero__grid,
    .iv5-automation-hero__grid,
    .iv7-crm-hero__grid,
    .iv7-integration-hero__grid,
    .iv7-development-hero__grid,
    .iv8-hero__grid,
    .iv8-phone-hero__grid,
    .iv8-message-hero__grid,
    .iv8-api-hero__grid,
    .iv9-hero__grid,
    .iv10-hero__grid,
    .iv11-hero__grid,
    .iv12-hero__grid
  ) {
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: clamp(32px, 4vw, 64px);
  }

  .inner-system-v13 :is(
    .iv4-integration-hero__copy,
    .iv5-migration-hero__copy,
    .iv7-process-hero__copy,
    .iv8-site-hero__copy,
    .iv8-sheets-hero__copy,
    .iv9-manufacturing-hero__copy,
    .iv9-logistics-hero__copy
  ) {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    gap: 24px clamp(36px, 5vw, 72px);
  }

  .inner-system-v13 :is(
    .iv8-split,
    .iv9-split,
    .iv10-split,
    .iv11-split,
    .iv12-split
  ) {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 76px);
  }
}

.inner-system-v13 :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--iv13-data) 75%, #ffffff);
  outline-offset: 4px;
}

/* The original 96px seams looked like blurred black bands. This shorter data rail
   preserves the intended light/dark handoff and makes the transition functional. */
.inner-system-v13 [data-section]:not(:first-child)::before,
.inner-system-v13 .iv4-faq::before,
.inner-system-v13 .iv4-related::before,
.inner-system-v13 .iv4-final::before {
  top: -62px !important;
  height: 64px !important;
  background:
    radial-gradient(circle at 50% 54%, var(--iv13-rail-end, var(--iv13-data)) 0 3px, transparent 4px),
    linear-gradient(90deg,
      transparent 0,
      color-mix(in srgb, var(--iv13-rail-start, var(--iv13-action)) 72%, transparent) 34%,
      color-mix(in srgb, var(--iv13-rail-end, var(--iv13-data)) 72%, transparent) 66%,
      transparent 100%) 50% 54% / min(720px, 68vw) 1px no-repeat,
    linear-gradient(180deg,
      var(--section-seam-from) 0%,
      color-mix(in srgb, var(--section-seam-from) 72%, var(--section-seam-to)) 36%,
      color-mix(in srgb, var(--section-seam-from) 30%, var(--section-seam-to)) 72%,
      var(--section-seam-to) 100%) !important;
}

.inner-system-v13 [data-section]:not(:first-child)::before {
  box-shadow: inset 0 1px color-mix(in srgb, var(--iv13-rail-start, var(--iv13-action)) 14%, transparent);
}

/* Dense catalog cards remain readable at zoom and can grow with longer Russian copy. */
.inner-system-v13 :is(.iv4-related__card, [class*="-card"], [class*="__card"], [class*="-board"] article, [class*="-grid"] article) {
  height: auto;
}

.inner-system-v13 :is(.iv4-related__card, [class*="-board"] article, [class*="-grid"] article) > :is(p, small) {
  line-height: 1.55;
}

.inner-system-v13 .iv4-related__card {
  min-height: 250px;
}

.inner-system-v13 .iv4-related__card h3 {
  margin-top: clamp(24px, 3vw, 42px);
}

.inner-system-v13 :is(.iv4-related__card, .iv12-card, article) {
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

@media (hover: hover) and (pointer: fine) {
  .inner-system-v13 :is(a.iv4-related__card, a.iv12-card):hover {
    border-color: color-mix(in srgb, var(--iv13-data) 58%, transparent);
    box-shadow: 0 18px 44px rgba(4, 17, 27, .12);
    transform: translateY(-3px);
  }
}

@media (max-width: 899px) {
  .inner-system-v13 [data-section]:not(:first-child)::before,
  .inner-system-v13 .iv4-faq::before,
  .inner-system-v13 .iv4-related::before,
  .inner-system-v13 .iv4-final::before {
    top: -42px !important;
    height: 44px !important;
    background:
      radial-gradient(circle at 50% 55%, var(--iv13-rail-end, var(--iv13-data)) 0 2px, transparent 3px),
      linear-gradient(90deg,
        transparent 0,
        color-mix(in srgb, var(--iv13-rail-start, var(--iv13-action)) 70%, transparent) 34%,
        color-mix(in srgb, var(--iv13-rail-end, var(--iv13-data)) 70%, transparent) 66%,
        transparent 100%) 50% 55% / min(270px, 70vw) 1px no-repeat,
      linear-gradient(180deg,
        var(--section-seam-from) 0%,
        color-mix(in srgb, var(--section-seam-from) 58%, var(--section-seam-to)) 48%,
        var(--section-seam-to) 100%) !important;
  }

  .inner-system-v13 :is(a, button, summary, input, textarea, select) {
    min-height: 44px;
  }

  .inner-system-v13 :is([class*="shot"], [class*="visual"], [class*="panel"], [class*="console"]) {
    backdrop-filter: none;
  }

  .inner-system-v13 .iv4-related__card {
    min-height: 0;
  }

  .inner-system-v13 .calculator {
    grid-template-columns: minmax(0, 1fr);
  }

  .inner-system-v13 :is(.calculator-inputs, .calculator-results) {
    min-width: 0;
  }

  .inner-system-v13 .calculator-results :is(.tech-label, p) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 960px) {
  .inner-system-v13 :is(
    .iv4-integration-hero__copy,
    .iv5-migration-hero__copy,
    .iv7-process-hero__copy,
    .iv8-site-hero__copy,
    .iv8-sheets-hero__copy,
    .iv9-manufacturing-hero__copy,
    .iv9-logistics-hero__copy
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .inner-system-v13 :is(
    .iv4-integration-hero__copy,
    .iv5-migration-hero__copy,
    .iv7-process-hero__copy,
    .iv8-site-hero__copy,
    .iv8-sheets-hero__copy,
    .iv9-manufacturing-hero__copy,
    .iv9-logistics-hero__copy
  ) > :is(.iv4-kicker, h1, p, .iv4-actions) {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 780px) {
  .inner-system-v13 :is(
    [class*="-hero"] .iv4-hero-copy h1,
    [class*="-hero__copy"] h1
  ) {
    font-size: clamp(34px, 8vw, 52px);
    line-height: .99;
    letter-spacing: -.045em;
  }

  .inner-system-v13 :is(
    .iv4-section-head h2,
    .iv8-head h2,
    .iv9-head h2,
    .iv10-head h2,
    .iv11-head h2,
    .iv12-head h2
  ) {
    font-size: clamp(23.5px, 7.2vw, 44px);
    line-height: 1.02;
  }
}

@media (max-width: 430px) {
  .inner-system-v13 :is(.iv4-final, .iv12-final) h2 {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.03;
  }
}

@media (max-width: 390px) {
  .inner-system-v13 :is(h1, h2, h3) {
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }

  .inner-system-v13 :is(
    [class*="-hero"] .iv4-hero-copy h1,
    [class*="-hero__copy"] h1
  ) {
    font-size: clamp(30px, 8.7vw, 34px);
    line-height: 1;
  }

  .inner-system-v13 :is(.inner-v12--utility-privacy, .inner-v12--utility-consent) .iv12-hero h1 {
    font-size: clamp(23px, 6.8vw, 26px);
    letter-spacing: -.045em;
  }
}

@media (max-width: 360px) {
  .inner-system-v13 .iv5-acceptance .iv4-section-head h2 {
    font-size: clamp(27px, 8.4vw, 30px);
  }
}

/* The manufacturing boundary contains a grid inside a section split. Keeping
   the section stacked through the medium desktop range prevents the nested
   cards from inheriting columns narrower than their whole-word labels. */
@media (max-width: 1365px) and (min-width: 781px) {
  .inner-system-v13 .iv9-manufacturing-boundary .iv9-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.inner-system-v13 .iv9-system-boundary h3 {
  font-size: 18px;
  line-height: 1.1;
}

.inner-system-v13 .inner-v12--utility-cost .iv12-hero h1 {
  overflow-wrap: normal;
}

@media (max-width: 400px) {
  .inner-system-v13 .inner-v12--utility-cost .iv12-hero h1 {
    font-size: clamp(27px, 7.8vw, 30px);
    letter-spacing: -.045em;
    line-height: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-system-v13 *,
  .inner-system-v13 *::before,
  .inner-system-v13 *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Keep helper copy and placeholders legible on the dark glass route forms. */
.inner-system-v13 .iv12-form-shell .form-note {
  color: #aab8c2;
  font-size: 13px;
  line-height: 1.5;
}

.inner-system-v13 .iv12-form-shell .lead-form:not(.lead-form--legacy) :is(input, textarea)::placeholder {
  color: #8799a6;
}

@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .inner-system-v13 [data-section]:not(:first-child)::before,
  .inner-system-v13 .iv4-faq::before,
  .inner-system-v13 .iv4-related::before,
  .inner-system-v13 .iv4-final::before {
    background: linear-gradient(180deg, var(--section-seam-from), var(--section-seam-to)) !important;
  }
}