:root {
  scroll-behavior: smooth;

  /* =========================================================
     ТИПОГРАФИКА
     Меняйте параметры здесь: селекторы ниже получают их через var(...).
     ========================================================= */
  --font-family-base: "Inter Display", Inter, Arial, sans-serif;

  --fs-hero-title: 61px;
  --fw-hero-title: 800;
  --lh-hero-title: 0.98;
  --ls-hero-title: -1.65px;

  --fs-hero-subtitle: 28px;
  --fw-hero-subtitle: 700;
  --lh-hero-subtitle: 1.17;
  --ls-hero-subtitle: -0.35px;

  --fs-hero-accent: 32px;
  --fw-hero-accent: 600;

  --fs-h2: 40px;
  --fw-h2: 700;
  --lh-h2: 1.05;
  --ls-h2: -0.7px;
  --mb-h2: 20px;

  --fs-h3-section: 26px;
  --fw-h3-section: 700;
  --lh-h3-section: 1.1;
  --ls-h3-section: -0.25px;

  --fs-lead: 20px;
  --fw-lead: 400;
  --lh-lead: 1.30;
  --ls-lead: normal;

  --fs-body: 15px;
  --fw-body: 400;
  --lh-body: 1.38;
  --ls-body: normal;

  --fs-card: 16px;
  --fw-card: 400;
  --lh-card: 1.32;
  --ls-card: normal;

  --fs-caption: 16px;
  --fw-caption: 600;
  --lh-caption: 1.25;
  --ls-caption: normal;

  --fs-meta: 16px;
  --fw-meta: 400;
  --lh-meta: 1.32;
  --ls-meta: normal;

  --fs-nav: 15px;
  --fw-nav: 500;

  --fs-header-cta: 19px;
  --fw-header-cta: 400;

  --fs-standard-primary-title: 21px;
  --fw-standard-primary-title: 700;
  --lh-standard-primary-title: 1.12;

  --fs-standard-list-title: 19px;
  --fw-standard-list-title: 700;
  --lh-standard-list-title: 1.14;

  --fs-product-number: 67px;
  --fw-product-number: 800;
  --lh-product-number: 0.8;

  --fs-product-card-title: 17px;
  --fw-product-card-title: 700;
  --lh-product-card-title: 1.12;

  --fs-feature-title: 17px;
  --fw-feature-title: 700;
  --lh-feature-title: 1.15;

  --fs-company-number: 82px;
  --fw-company-number: 700;
  --lh-company-number: 0.8;

  --fs-company-stat-label: 16px;
  --fw-company-stat-label: 700;

  --fs-company-card-title: 15px;
  --fw-company-card-title: 700;
  --lh-company-card-title: 1.12;

  --fs-format-title: 26px;
  --fw-format-title: 700;

  --fw-format-support-label: 600;

  --fs-form-input: 13px;
  --fw-form-input: 400;

  --fs-form-button: 18px;
  --fw-form-button: 400;

  --fs-footer-phone: 16px;
  --fw-footer-phone: 600;
  --lh-footer-phone: 1;
  --ls-footer-phone: 0.1px;

  /* =========================================================
     ЦВЕТА
     ========================================================= */
  --color-page-bg: #edf6fb;
  --color-page-gradient-top: #f1f8fc;
  --color-page-gradient-mid: #eaf5fa;
  --color-page-gradient-bottom: #f0f8fc;
  --color-page-glow: rgba(208, 240, 248, 0.62);
  --color-page-glow-transparent: rgba(208, 240, 248, 0);

  --color-surface: #ffffff;
  --color-heading: #0b216d;
  --color-nav: #172568;

  --color-text-lead: #697893;
  --color-text-body: #65728a;
  --color-text-card: #6b7890;
  --color-text-meta: #74819a;
  --color-text-input: #8a97a8;
  --color-text-on-dark: #e7f7fb;
  --color-footer-text: #dceaf2;
  --color-text-on-accent: #ffffff;

  --color-accent: #0aa8b8;
  --color-product-number: #08b7c4;
  --color-company-number: #0eb8c6;
  --color-orientation-divider: #62d3df;
  --color-check-accent: #09a9b7;
  --color-lifecycle-label: #101728;
  --color-format-title: #142149;
  --color-divider: rgba(202, 222, 232, 0.72);

  --color-header-cta-start: #27c3d0;
  --color-header-cta-end: #099db7;
  --color-station-start: #075177;
  --color-station-end: #0b6c95;
  --color-cta-bg: #06486f;
  --color-footer-bg: #064775;
  --color-form-button-start: #18d1d8;
  --color-form-button-end: #0cb4ce;

  --ribbon-surface: rgba(248, 252, 254, 0.84);
  --ribbon-surface-soft: rgba(240, 249, 252, 0.9);

  /* =========================================================
     ИКОНКИ
     Только размеры иконок. Геометрия секций и изображений не управляется здесь.
     ========================================================= */
  --icon-standards-large: 92px;
  --icon-standards-small: 68px;
  --icon-application-marker: 22px;
  --icon-application-tick-width: 5px;
  --icon-application-tick-height: 9px;
  --icon-station-note: 38px;
  --icon-telemetry: 48px;
  --icon-company-title-width: 44px;
  --icon-company-title-height: 36px;
  --icon-service-step: 128px;
  --icon-format-title: 66px;
  --icon-format-check-width: 7px;
  --icon-format-check-height: 12px;
  --icon-support: 28px;
  --icon-footer-phone: 28px;

  /* =========================================================
     РАДИУСЫ
     ========================================================= */
  --radius-large-container: 20px;
  --radius-section: 18px;
  --radius-card: 14px;
  --radius-media: 14px;
  --radius-header-cta: 29px;
  --radius-input: 5px;
  --radius-form-button: 24px;

  /* =========================================================
     ТЕНИ
     ========================================================= */
  --shadow-header: 0 4px 18px rgba(45, 98, 126, 0.16);
  --shadow-header-cta: 0 5px 14px #9bd5df;
  --shadow-card-soft: 0 8px 18px rgba(141, 175, 193, 0.08);

  /* =========================================================
     СЕТКА И РИТМ — существующие параметры Pass 4.
     В Pass 5 они НЕ менялись и вынесены здесь только потому, что уже были переменными.
     ========================================================= */
  --page-width: 1440px;
  --grid-gap: 18px;
  --section-inline: 10px;
  --content-x: 48px;
  --section-gap: 8px;
  --section-pad-y: 32px;
  --subsection-pad-y: 26px;
  --space-title-lead: 10px;
  --space-title-content: 18px;
  --space-lead-content: 24px;
}

* {
  box-sizing: border-box;
}

:where(html, body) {
  margin: 0;
  min-width: 0;
  background: var(--color-page-bg);
  color: var(--color-heading);
  font-family: var(--font-family-base);
}

body {
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
a {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.page {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  background:
    radial-gradient(ellipse at 88% 18%, var(--color-page-glow) 0%, var(--color-page-glow-transparent) 30%),
    linear-gradient(180deg, var(--color-page-gradient-top) 0%, var(--color-page-gradient-mid) 48%, var(--color-page-gradient-bottom) 100%);
}

.site-header {
  position: sticky;
  top: 8px;
  z-index: 1000;
  min-height: 84px;
  margin: 8px var(--section-inline) 12px;
  padding: 0 var(--content-x);
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--color-surface);
  border-radius: var(--radius-large-container);
  box-shadow: var(--shadow-header);
}

.logo {
  width: 300px;
  flex: 0 0 300px;
  display: flex;
  align-items: center;
  color: var(--color-heading);
  text-decoration: none;
}

.logo img {
  width: 280px;
  height: auto;
  object-fit: contain;
}

.site-nav {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 46px;
}

.site-nav a {
  color: var(--color-nav);
  font-size: var(--fs-nav);
  font-weight: var(--fw-nav);
  text-decoration: none;
  white-space: nowrap;
}

.header-cta {
  width: 306px;
  height: 55px;
  flex: 0 0 306px;
  display: grid;
  place-items: center;
  color: var(--color-text-on-accent);
  font-size: var(--fs-header-cta);
  text-decoration: none;
  border-radius: var(--radius-header-cta);
  background: linear-gradient(var(--color-header-cta-start), var(--color-header-cta-end));
  box-shadow: var(--shadow-header-cta);
  font-weight: var(--fw-header-cta);
}

.hero {
  min-height: 520px;
  margin: 0 var(--section-inline) var(--section-gap);
  overflow: hidden;
  border-radius: var(--radius-large-container);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.91) 0%, rgba(255, 255, 255, 0.76) 36%, rgba(255, 255, 255, 0.22) 58%, rgba(255, 255, 255, 0) 76%),
    url("assets/hero-mall.png") right 48px center / auto 104% no-repeat;
}

.hero-copy {
  padding: 80px 0 0 56px;
} 


.hero h1 {
  margin: 0 0 55px;
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-hero-title);
  line-height: var(--lh-hero-title);
  letter-spacing: var(--ls-hero-title);
}

.hero-subtitle {
  margin: 0 0 20px;
  font-size: var(--fs-hero-subtitle);
  font-weight: var(--fw-hero-subtitle);
  line-height: var(--lh-hero-subtitle);
  letter-spacing: var(--ls-hero-subtitle);
}

.hero .text-lead {
  margin: 0 0 60px;
}

.hero strong {
  color: var(--color-accent);
  font-size: var(--fs-hero-accent);
  font-weight: var(--fw-hero-accent);
}

.standards {
  min-height: 688px;
  margin: 0 var(--section-inline);
  padding: 36px var(--content-x) 34px;
  display: grid;
  grid-template-columns: minmax(0, 59%) minmax(0, 41%);
  grid-template-rows: auto 1fr;
  column-gap: 30px;
  overflow: hidden;
  border-radius: var(--radius-section);
  background: linear-gradient(90deg, rgba(252, 254, 255, 0.94) 0%, rgba(248, 253, 255, 0.91) 58%, rgba(238, 249, 252, 0.96) 100%);
}

.standards-intro {
  grid-column: 1;
  grid-row: 1;
}

.standards .lead {
  margin: 0;
}

.standards-primary {
  min-width: 0;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  padding-top: var(--space-lead-content);
  padding-right: 6px;
}

.standards-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-right: 0;
}

.standard-benefit {
  min-width: 0;
  min-height: 170px;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--color-divider);
}

.standard-icon {
  flex: 0 0 auto;
  object-fit: contain;
}

.standard-icon--large {
  width: var(--icon-standards-large);
  height: var(--icon-standards-large);
}

.standard-icon--small {
  width: var(--icon-standards-small);
  height: var(--icon-standards-small);
}

.standard-benefit h3 {
  margin: 2px 0 0;
  color: var(--color-heading);
  font-size: var(--fs-standard-primary-title);
  line-height: var(--lh-standard-primary-title);
  font-weight: var(--fw-standard-primary-title);
}

.standard-benefit p {
  max-width: none;
  margin: 10px 0 0;
}

.standards-photo {
  width: 100%;
  height: 236px;
  margin: 0;
  border-radius: var(--radius-media);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255,255,255,0.02) 100%),
    url("assets/standards_photo_fixed_hr.png") center center / cover no-repeat;
}

.standards-list {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  align-self: stretch;
  margin-top: 6px;
  padding: 10px 0 6px;
  display: grid;
  grid-template-rows: repeat(4, auto);
  gap: 10px;
}

.standards-list article {
  min-width: 0;
  min-height: 118px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--color-divider);
}

.standards-list article:last-child {
  border-bottom: 1px solid var(--color-divider);
}

.standards-list h3 {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--fs-standard-list-title);
  line-height: var(--lh-standard-list-title);
  font-weight: var(--fw-standard-list-title);
}

.standards-list p {
  margin: 8px 0 0;
}

.applications {
  min-height: 457px;
  margin: var(--section-gap) var(--section-inline);
  padding: var(--section-pad-y) var(--content-x) 24px;
  overflow: hidden;
  border-radius: var(--radius-section);
  background: var(--ribbon-surface);
}

.application-points {
  margin: 0 18px 19px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.application-points span {
  position: relative;
  padding-left: 31px;
}

.application-points span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: var(--icon-application-marker);
  height: var(--icon-application-marker);
  /* Намеренное исключение: 50% формирует круглый маркер, это не радиус карточек/контейнеров. */
  border-radius: 50%;
  background: var(--color-accent);
}

.application-points span::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: var(--icon-application-tick-width);
  height: var(--icon-application-tick-height);
  border-right: 2px solid var(--color-text-on-accent);
  border-bottom: 2px solid var(--color-text-on-accent);
  transform: rotate(45deg);
}

.application-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.application-gallery figure {
  min-width: 0;
  margin: 0;
}

.application-gallery img {
  width: 100%;
  height: 257px;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.application-gallery figcaption {
  margin-top: 10px;
  text-align: center;
}

.product {
  min-height: 448px;
  margin: var(--section-gap) var(--section-inline) 0;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  overflow: hidden;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background: var(--ribbon-surface);
}

.product-visual {
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
}

.product-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.product-copy {
  min-width: 0;
  padding: 24px var(--content-x) 18px 30px;
}

.eyebrow {
  margin: 0 0 4px;
}

.product h2 {
  margin: 0 0 8px;
}

.modes {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.modes em {
  color: var(--color-product-number);
  font-size: var(--fs-product-number);
  font-style: normal;
  font-weight: var(--fw-product-number);
  line-height: var(--lh-product-number);
}

.modes p {
  margin: 0;
}

.product-columns {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.product-columns > div {
  min-width: 0;
  padding-right: 16px;
  border-right: 1px solid var(--color-divider);
}

.product-columns > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.product-columns h3 {
  margin: 0;
  font-size: var(--fs-product-card-title);
  line-height: var(--lh-product-card-title);
  font-weight: var(--fw-product-card-title);
}

.product-columns p {
  margin: 6px 0 0;
}

.materials {
  margin-top: 14px;
  padding-right: 2px;
}

.materials img {
  width: 100%;
  height: auto;
}

.features {
  min-height: 335px;
  margin: 0 var(--section-inline);
  padding: var(--subsection-pad-y) var(--content-x) 22px;
  overflow: hidden;
  background: var(--ribbon-surface);
}

.features > h3 {
  margin: 0 0 var(--space-title-content);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.feature-grid article {
  min-width: 0;
}

.feature-grid img {
  width: 100%;
  height: 188px;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.feature-grid h4 {
  margin: 6px 0 0;
  color: var(--color-heading);
  font-size: var(--fs-feature-title);
  font-weight: var(--fw-feature-title);
  line-height: var(--lh-feature-title);
}

.feature-grid p {
  margin: 3px 0 0;
}

.orientation {
  min-height: 173px;
  margin: 0 var(--section-inline);
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  overflow: hidden;
  background: var(--ribbon-surface-soft);
}

.orientation-copy {
  padding: var(--subsection-pad-y) var(--content-x);
}

.orientation h3 {
  margin: 0 0 var(--space-title-content);
}

.orientation-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.orientation-points p {
  margin: 0;
  padding-left: 13px;
  border-left: 2px solid var(--color-orientation-divider);
}

.orientation > img {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  margin: 4px 4px 4px 0;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-media);
}

.smart {
  min-height: 325px;
  margin: 0 var(--section-inline);
  display: grid;
  grid-template-columns: minmax(0, 39%) minmax(0, 61%);
  overflow: hidden;
  border-radius: 0 0 var(--radius-section) var(--radius-section);
  background: var(--ribbon-surface);
}

.smart-copy {
  padding: var(--subsection-pad-y) var(--content-x) 18px;
}

.smart h3 {
  margin: 0 0 var(--space-title-content);
}

.smart p {
  margin: 0 0 12px;
}

.smart > img {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  margin: 4px 4px 4px 0;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-media);
}

.station {
  min-height: 213px;
  margin: var(--section-gap) var(--section-inline) 0;
  display: grid;
  grid-template-columns: minmax(0, 29%) minmax(0, 44%) minmax(0, 27%);
  align-items: center;
  overflow: hidden;
  color: var(--color-text-on-accent);
  border-radius: var(--radius-section);
  background: linear-gradient(90deg, var(--color-station-start), var(--color-station-end));
}

.station > h3 {
  margin: 0;
  padding-left: var(--content-x);
}

.station-visual {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  margin: 5px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-media);
}

.station-notes {
  padding: 22px var(--content-x) 18px 14px;
}

.station-notes p {
  margin: 0 0 13px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.station-notes p:last-child {
  margin-bottom: 0;
}

.station-notes img {
  width: var(--icon-station-note);
  height: var(--icon-station-note);
  flex: 0 0 var(--icon-station-note);
  object-fit: contain;
}

.telemetry {
  min-height: 330px;
  margin: var(--section-gap) var(--section-inline) 0;
  display: grid;
  grid-template-columns: minmax(0, 31%) minmax(0, 41%) minmax(0, 28%);
  align-items: center;
  overflow: hidden;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background: linear-gradient(90deg, rgba(250, 253, 255, 0.95) 0%, rgba(244, 250, 253, 0.96) 72%, rgba(236, 249, 252, 0.98) 100%);
}

.telemetry-copy {
  padding: 42px 30px 38px var(--content-x);
}


.telemetry-copy > p {
  max-width: 356px;
  margin: 0;
}

.telemetry-visual {
  width: calc(100% - 18px);
  height: calc(100% - 28px);
  margin: 14px 10px 14px 8px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-media);
}

.telemetry-list {
  padding: 32px var(--content-x) 30px 12px;
}

.telemetry-list p {
  margin: 0 0 12px;
  padding: 10px 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--color-divider);
}

.telemetry-list p:last-child {
  margin-bottom: 0;
}

.telemetry-list img {
  width: var(--icon-telemetry);
  height: var(--icon-telemetry);
  flex: 0 0 var(--icon-telemetry);
  object-fit: contain;
}

.company {
  min-height: 318px;
  margin: 0 var(--section-inline);
  display: grid;
  grid-template-columns: minmax(0, 26%) minmax(0, 30%) minmax(0, 44%);
  align-items: stretch;
  overflow: hidden;
  border-radius: 0 0 var(--radius-section) var(--radius-section);
  background: linear-gradient(90deg, rgba(248, 252, 254, 0.92) 0%, rgba(241, 249, 252, 0.94) 65%, rgba(236, 248, 252, 0.96) 100%);
}

.company-intro {
  padding: 40px 0 26px var(--content-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.company-intro strong {
  display: block;
  margin-top: 18px;
  color: var(--color-company-number);
  font-size: var(--fs-company-number);
  line-height: var(--lh-company-number);
  font-weight: var(--fw-company-number);
}

.company-intro b {
  font-size: var(--fs-company-stat-label);
  font-weight: var(--fw-company-stat-label);
}

.company-intro p {
  margin: 4px 0 0;
}

.company-map {
  min-width: 0;
  padding: 18px 10px 18px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

.company-map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.company-cards {
  padding: 30px var(--content-x) 26px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
}

.company-cards article {
  min-width: 0;
  padding: 16px 14px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-card-soft);
}

.company-card-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.company-card-title img {
  width: var(--icon-company-title-width);
  height: var(--icon-company-title-height);
  flex: 0 0 var(--icon-company-title-width);
  object-fit: contain;
}

.company-card-title h3 {
  margin: 0;
  font-size: var(--fs-company-card-title);
  line-height: var(--lh-company-card-title);
  font-weight: var(--fw-company-card-title);
}

.company-cards p {
  margin: 9px 0 0;
}

.service {
  min-height: 486px;
  margin: var(--section-gap) var(--section-inline) 0;
  position: relative;
  isolation: isolate;
  padding: 36px var(--content-x) 34px;
  overflow: hidden;
  border-radius: var(--radius-section);
  background:
    radial-gradient(circle at 84% 18%, rgba(207, 240, 247, 0.7) 0%, rgba(207, 240, 247, 0) 28%),
    linear-gradient(180deg, rgba(234, 248, 252, 0.98) 0%, rgba(241, 250, 253, 0.98) 100%);
}

.service::before {
  content: "";
  position: absolute;
  left: -12%;
  right: -8%;
  bottom: -22%;
  height: 72%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(88% 82% at 18% 100%, rgba(255, 255, 255, 0.65) 0 38%, transparent 38.8%),
    radial-gradient(92% 84% at 50% 100%, rgba(201, 239, 246, 0.88) 0 34%, transparent 34.8%),
    radial-gradient(94% 86% at 83% 100%, rgba(182, 234, 242, 0.72) 0 31%, transparent 31.8%);
}

.service::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -17%;
  height: 64%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 96% at 16% 100%, transparent 0 57%, rgba(81, 200, 217, 0.18) 57.4% 60.2%, transparent 60.8%),
    radial-gradient(95% 98% at 50% 100%, transparent 0 54%, rgba(81, 200, 217, 0.16) 54.4% 57.2%, transparent 57.8%),
    radial-gradient(102% 104% at 84% 100%, transparent 0 51%, rgba(81, 200, 217, 0.14) 51.4% 54.2%, transparent 54.8%);
}

.service > :is(h2, p, .lifecycle) {
  position: relative;
  z-index: 1;
}

.service > p {
  max-width: 865px;
  margin: 0;
}

.lifecycle {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1fr 98px 1fr 98px 1fr 98px 1fr 98px 1fr;
  align-items: center;
}

.lifecycle-step {
  min-width: 0;
  text-align: center;
}

.lifecycle-step img {
  width: var(--icon-service-step);
  height: var(--icon-service-step);
  margin: 0 auto 14px;
  object-fit: contain;
}

.lifecycle-step b {
  color: #164968;
}

.lifecycle-connector {
  height: 28px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='28' viewBox='0 0 170 28'%3E%3Cline x1='8' y1='14' x2='134' y2='14' stroke='%2308b6c3' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='84' cy='14' r='7' fill='%23effcff' stroke='%2308b6c3' stroke-width='3'/%3E%3Cpath d='M134 5 L162 14 L134 23 Z' fill='%2308b6c3'/%3E%3C/svg%3E");
}

.formats {
  min-height: 444px;
  margin: var(--section-gap) var(--section-inline) 0;
  padding: var(--section-pad-y) var(--content-x) 18px;
  overflow: hidden;
  border-radius: var(--radius-section);
  background: var(--ribbon-surface);
}

.format-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.format-cards article {
  min-height: 270px;
  padding: 18px 30px 16px;
  background: rgba(238, 250, 254, 0.95);
  border-radius: var(--radius-card);
}

.format-title {
  display: flex;
  align-items: center;
  gap: 18px;
}

.format-title img {
  width: var(--icon-format-title);
  height: var(--icon-format-title);
  flex: 0 0 var(--icon-format-title);
  object-fit: contain;
}

.format-title h3 {
  margin: 0;
  color: var(--color-format-title);
  font-size: var(--fs-format-title);
  font-weight: var(--fw-format-title);
}

.format-cards ul {
  margin: 5px 0 0 82px;
  padding: 0;
  list-style: none;
}

.format-cards li {
  position: relative;
  margin: 10px 0;
  padding-left: 26px;
}

.format-cards li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: var(--color-check-accent);
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}

.format-support {
  min-height: 88px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.7fr 1.45fr;
  gap: 20px;
  align-items: center;
  border-top: 1px solid var(--color-divider);
}

.format-support b {
  font-weight: var(--fw-format-support-label);
}

.format-support span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.format-support img {
  width: var(--icon-support);
  height: var(--icon-support);
  flex: 0 0 var(--icon-support);
  object-fit: contain;
}

.cta {
  min-height: 335px;
  margin: var(--section-gap) var(--section-inline) 0;
  overflow: hidden;
  color: var(--color-text-on-accent);
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background:
    linear-gradient(90deg, var(--color-cta-bg) 0%, var(--color-cta-bg) 58%, rgba(6, 72, 111, 0.32) 66%, rgba(6, 72, 111, 0.02) 77%),
    url("assets/cta_clean2.png") right center / 620px auto no-repeat;
}

.cta-copy {
  padding: var(--section-pad-y) 0 0 var(--content-x);
}


.cta p {
  margin: 0 0 14px;
}

.contact-form {
  width: min(735px, calc(100% - var(--content-x)));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.contact-form input {
  width: 100%;
  height: 39px;
  padding: 10px 12px;
  color: var(--color-text-input);
  font-size: var(--fs-form-input);
  border: 0;
  border-radius: var(--radius-input);
  outline: 0;
  background: var(--color-surface);
  font-weight: var(--fw-form-input);
}

.contact-form button {
  grid-column: 1 / -1;
  height: 48px;
  color: var(--color-text-on-accent);
  font-size: var(--fs-form-button);
  border: 0;
  border-radius: var(--radius-form-button);
  background: linear-gradient(90deg, var(--color-form-button-start), var(--color-form-button-end));
  cursor: pointer;
  font-weight: var(--fw-form-button);
}

.site-footer {
  min-height: 203px;
  margin: 0 var(--section-inline) var(--section-inline);
  padding: 52px var(--content-x) 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--color-footer-text);
  border-radius: 0 0 var(--radius-section) var(--radius-section);
  background: var(--color-footer-bg);
}

.site-footer strong {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-on-accent);
  font-size: var(--fs-footer-phone);
  line-height: var(--lh-footer-phone);
  letter-spacing: var(--ls-footer-phone);
  font-weight: var(--fw-footer-phone);
}

.site-footer strong img {
  width: var(--icon-footer-phone);
  height: var(--icon-footer-phone);
  object-fit: contain;
}


/* System typography: section headings and non-heading text roles. */
.section-title {
  color: var(--color-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  margin: 0 0 var(--mb-h2);
}

.subsection-title {
  color: inherit;
  font-size: var(--fs-h3-section);
  font-weight: var(--fw-h3-section);
  line-height: var(--lh-h3-section);
  letter-spacing: var(--ls-h3-section);
}

.text-lead {
  color: var(--color-text-lead);
  font-size: var(--fs-lead);
  font-weight: var(--fw-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}

.text-body {
  color: var(--color-text-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.text-card {
  color: var(--color-text-card);
  font-size: var(--fs-card);
  font-weight: var(--fw-card);
  line-height: var(--lh-card);
  letter-spacing: var(--ls-card);
}

.text-caption {
  color: var(--color-heading);
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
}

.text-meta {
  color: var(--color-text-meta);
  font-size: var(--fs-meta);
  font-weight: var(--fw-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
}

.text-on-dark {
  color: var(--color-text-on-dark);
}

.cta .section-title {
  color: var(--color-text-on-accent);
}

/* Sticky header offset for in-page navigation. */
main[id],
section[id],
footer[id] {
  scroll-margin-top: 112px;
}

/*
  Responsive foundation only: the desktop composition remains the source of truth.
  Section layouts are grid/flex-based, images use object-fit, and .page can contract
  below 1440px. Tablet/mobile breakpoints are intentionally left for the next stage.
*/

/* ===== PASS 6: форма обратной связи и success pop-up ===== */
.form-field {
  min-width: 0;
}

.form-field input {
  display: block;
}

.contact-form input::placeholder {
  color: var(--color-text-input);
  opacity: 1;
}

.contact-form input:focus {
  box-shadow: 0 0 0 2px rgba(24, 209, 216, 0.28);
}

.contact-form input.is-invalid {
  box-shadow: 0 0 0 1px #d85a5a;
}

.field-error {
  display: block;
  min-height: 14px;
  margin-top: 3px;
  color: #ffd9d9;
  font-size: 11px;
  line-height: 1.2;
}

.contact-form .contact-submit {
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.contact-form .contact-submit:disabled {
  cursor: wait;
  opacity: 0.72;
  filter: saturate(0.72);
}

.form-status {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  color: #d9fbff;
  font-size: 12px;
  line-height: 1.3;
}

.form-status.is-error {
  color: #ffd9d9;
}

body.modal-open {
  overflow: hidden;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 22, 45, 0.68);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.modal-overlay.is-visible {
  opacity: 1;
}

.success-modal {
  position: relative;
  width: min(820px, 100%);
  padding: 54px 64px 52px;
  text-align: center;
  border: 1px solid rgba(185, 222, 232, 0.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 0%, rgba(198, 243, 249, 0.62) 0%, rgba(198, 243, 249, 0) 34%),
    #f6fbfd;
  box-shadow: 0 28px 80px rgba(1, 34, 65, 0.28);
  transform: translateY(8px) scale(0.985);
  transition: transform 0.18s ease;
}

.modal-overlay.is-visible .success-modal {
  transform: translateY(0) scale(1);
}

.success-modal h2 {
  margin: 0 42px 18px;
  color: var(--color-heading);
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.08;
  font-weight: 700;
}

.success-modal p {
  max-width: 590px;
  margin: 0 auto 32px;
  color: var(--color-text-body);
  font-size: 19px;
  line-height: 1.5;
}

.success-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--color-heading);
  font-size: 34px;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.success-modal-close:hover,
.success-modal-close:focus-visible {
  background: rgba(13, 184, 198, 0.10);
  outline: none;
}

.success-modal-ok {
  width: min(430px, 100%);
  height: 56px;
  color: var(--color-text-on-accent);
  font-size: 18px;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-form-button);
  background: linear-gradient(90deg, var(--color-form-button-start), var(--color-form-button-end));
  box-shadow: 0 10px 24px rgba(13, 180, 206, 0.22);
  cursor: pointer;
}

.success-modal-ok:hover,
.success-modal-ok:focus-visible {
  filter: brightness(1.04);
  outline: none;
}

@media (max-width: 720px) {
  .success-modal {
    padding: 48px 24px 32px;
  }

  .success-modal h2 {
    margin-inline: 24px;
    font-size: 30px;
  }

  .success-modal p {
    font-size: 16px;
  }
}

/* =========================================================
   TASKS 1–8 — финальная дизайнерская доработка секций
   ========================================================= */

/* Task 1 — .standards: compact layout + unified restrained glass cards */
.standards {
  min-height: 610px;
  padding-top: 34px;
  padding-bottom: 30px;
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  column-gap: 28px;
}

.standard-benefit,
.standards-list article {
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 22px rgba(70, 121, 149, 0.07);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

.standard-benefit {
  min-height: 146px;
  padding: 16px 17px;
}

.standards-primary {
  gap: 20px;
  padding-top: 20px;
}

.standards-photo {
  height: 218px;
  align-self: end;
}

.standards-list {
  height: 100%;
  margin-top: 0;
  padding: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.standards-list article {
  min-height: 0;
  padding: 13px 16px;
  align-items: center;
}

.standards-list p {
  margin-top: 6px;
}

/* Task 2 — .applications: one five-column rhythm top and bottom */
.application-points {
  margin: 0 0 20px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.application-points span {
  min-width: 0;
  padding-left: 30px;
}

/* Task 3 — .product: calmer system typography and individually controlled materials */
.product {
  min-height: 485px;
}

.product-copy {
  padding-top: 30px;
  padding-bottom: 24px;
}

.product h2 {
  max-width: 720px;
  margin-bottom: 14px;
}

.modes {
  gap: 16px;
  align-items: center;
}

.modes p {
  max-width: 650px;
  font-size: 21px;
}

.product-columns {
  margin-top: 18px;
  gap: 24px;
}

.product-columns > div,
.product-columns > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.materials {
  margin-top: 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.materials figure {
  min-width: 0;
  margin: 0;
  text-align: center;
}

.materials figure img {
  width: 100%;
  height: 62px;
  object-fit: cover;
  border-radius: 11px;
}

.materials figcaption {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

/* Task 4 — .orientation and .smart: deliberately different compositions */
.orientation {
  min-height: 388px;
  grid-template-columns: minmax(0, 31%) minmax(0, 69%);
  align-items: stretch;
  padding: 30px var(--content-x);
  gap: 34px;
  background: var(--ribbon-surface-soft);
}

.orientation-visual {
  min-width: 0;
  align-self: end;
  height: 265px;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.orientation-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.orientation-copy {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.orientation-copy .section-title {
  margin-bottom: 34px;
}

.orientation-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.feature-item {
  min-width: 0;
  padding: 0 8px 0 0;
}

.feature-icon,
.company-feature-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  flex: 0 0 48px;
}

.feature-icon svg,
.company-feature-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-item h3,
.smart-feature h3,
.company-features h3 {
  margin: 13px 0 7px;
  color: var(--color-heading);
  font-size: var(--fs-product-card-title);
  line-height: var(--lh-product-card-title);
  font-weight: var(--fw-product-card-title);
}

.feature-item p,
.smart-feature p {
  margin: 0;
}

.smart {
  min-height: 425px;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  gap: 30px;
  padding: 30px var(--content-x) 34px;
  border-radius: 0 0 var(--radius-section) var(--radius-section);
}

.smart-copy {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.smart-copy .section-title {
  margin-bottom: 26px;
}

.smart-features {
  display: grid;
  gap: 16px;
}

.smart-feature {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.smart-feature h3 {
  margin-top: 1px;
}

.smart-visual {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.smart-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Task 5 — .telemetry: full-width introduction, large laptop, three aligned functions + CTA */
.telemetry {
  min-height: 625px;
  padding: 42px var(--content-x) 38px;
  display: block;
  border-radius: var(--radius-section);
}

.telemetry-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
}

.telemetry-head > div {
  min-width: 0;
  max-width: 980px;
}

.telemetry-head .section-title {
  margin-bottom: 14px;
}

.telemetry-head .lead {
  margin: 0;
  max-width: 840px;
}

.telemetry-cta {
  min-width: 176px;
  height: 48px;
  padding: 0 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--color-text-on-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  text-decoration: none;
  border-radius: var(--radius-form-button);
  background: linear-gradient(90deg, var(--color-header-cta-start), var(--color-header-cta-end));
  box-shadow: 0 8px 20px rgba(10, 168, 184, 0.18);
}

.telemetry-body {
  margin-top: 42px;
  display: grid;
  grid-template-columns: minmax(0, 62%) minmax(0, 38%);
  gap: 38px;
  align-items: center;
}

.telemetry-visual-wrap {
  min-width: 0;
  height: 390px;
  overflow: hidden;
  border-radius: var(--radius-media);
}

.telemetry-visual {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-media);
}

.telemetry-list {
  padding: 0;
}

.telemetry-list p {
  margin: 0;
  padding: 16px 0;
  gap: 16px;
  border-bottom: 1px solid var(--color-divider);
}

.telemetry-list p:first-child {
  padding-top: 0;
}

.telemetry-list p:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Task 6 — .company: strong image section, KPI over calm Russia silhouette + three equal features */
.company {
  min-height: 590px;
  padding: 42px var(--content-x) 44px;
  display: block;
  border-radius: var(--radius-section);
  background: linear-gradient(115deg, rgba(248,252,254,.96) 0%, rgba(238,249,252,.98) 100%);
}

.company > .section-title {
  max-width: 1180px;
  margin-bottom: 34px;
}

.company-layout {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  gap: 44px;
  align-items: stretch;
}

.company-scale {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(255,255,255,.46);
}

.company-map {
  position: absolute;
  inset: 12px 6px 4px;
  width: calc(100% - 12px);
  height: calc(100% - 16px);
  object-fit: contain;
  object-position: center;
  opacity: .72;
}

.company-kpi {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 98px 0 0 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.company-kpi strong {
  color: var(--color-company-number);
  font-size: var(--fs-company-number);
  line-height: var(--lh-company-number);
  font-weight: var(--fw-company-number);
  text-shadow: 0 2px 14px rgba(255,255,255,.86);
}

.company-kpi b {
  margin-top: 10px;
  font-size: var(--fs-company-stat-label);
  font-weight: var(--fw-company-stat-label);
}

.company-kpi p {
  margin: 5px 0 0;
}

.company-features {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.company-features article {
  min-width: 0;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(205,225,234,.84);
  border-radius: var(--radius-card);
  box-shadow: 0 7px 20px rgba(78,125,151,.06);
}

.company-feature-icon {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

.company-features h3 {
  margin: 0 0 7px;
}

.company-features p {
  margin: 0;
}

/* Task 8 — .formats: two equal scenario cards with light product compositions */
.formats {
  min-height: 580px;
  padding-top: 38px;
  padding-bottom: 24px;
}

.format-cards {
  gap: 22px;
}

.format-cards article {
  min-height: 338px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  overflow: hidden;
  background: rgba(243, 251, 253, 0.92);
  border: 1px solid rgba(202, 226, 235, .86);
  box-shadow: 0 9px 24px rgba(80, 130, 155, .07);
}

.format-illustration {
  position: relative;
  min-width: 0;
  min-height: 338px;
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 28%, rgba(121,222,232,.34) 0%, rgba(121,222,232,0) 42%),
    linear-gradient(145deg, rgba(218,244,249,.9), rgba(242,250,253,.96));
}

.format-robot {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 90%;
  height: 76%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: 58% 50%;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(17, 64, 95, .12);
}

.format-symbol {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 68px;
  height: 68px;
  padding: 8px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 7px 18px rgba(11, 121, 145, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.format-symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.format-content {
  min-width: 0;
  padding: 34px 30px 28px;
}

.format-content h3 {
  margin: 0 0 12px;
  color: var(--color-format-title);
  font-size: var(--fs-format-title);
  font-weight: var(--fw-format-title);
}

.format-subtitle {
  min-height: 43px;
  margin: 0 0 20px;
  color: var(--color-heading);
}

.format-cards ul {
  margin: 0;
}

.format-cards li {
  margin: 12px 0;
  padding-left: 25px;
}

.format-support {
  margin-top: 20px;
}

/* Task 7 — final CTA and footer */
.cta {
  position: relative;
  background:
    linear-gradient(90deg,
      var(--color-cta-bg) 0%,
      var(--color-cta-bg) 50%,
      rgba(6,72,111,.93) 57%,
      rgba(6,72,111,.68) 64%,
      rgba(6,72,111,.34) 72%,
      rgba(6,72,111,.08) 80%,
      rgba(6,72,111,0) 87%),
    url("assets/cta_clean2.png") right center / 620px auto no-repeat;
}

.contact-form input {
  color: var(--color-heading);
}

.contact-form input::placeholder {
  color: rgba(116, 129, 154, 0.68);
  opacity: 1;
}

.contact-form input:focus {
  color: var(--color-heading);
  box-shadow: 0 0 0 2px rgba(24, 209, 216, 0.34);
}

.site-footer {
  min-height: 185px;
  padding-top: 46px;
  align-items: flex-start;
  border-top: 1px solid rgba(219, 239, 247, 0.2);
}

.site-footer > * {
  align-self: flex-start;
}

/* Final QA refinements: keep icons and material labels on existing system tokens. */
.feature-icon svg,
.company-feature-icon svg {
  stroke: var(--color-accent);
}

.materials figcaption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  white-space: normal;
}

/* === Tasks 1–7, 24 Sep 2026 === */
/* 1: product lower alignment + 8 materials */
.product { align-items: stretch; }
.product-visual { display:flex; align-items:flex-end; }
.product-visual img { height:100%; object-position:center bottom; }
.product-copy { display:flex; flex-direction:column; }
.materials { grid-template-columns:repeat(8,minmax(0,1fr)); margin-top:auto; padding-top:20px; }

/* 2: feature images — taller, equal and cropped below source blue strip */
.features { min-height:390px; }
.feature-grid img { height:238px; object-fit:cover; object-position:center 58%; }
.feature-grid article:nth-child(1) img { object-position:center 62%; }
.feature-grid article:nth-child(2) img { object-position:center 58%; }
.feature-grid article:nth-child(3) img { object-position:center 60%; }
.feature-grid article:nth-child(4) img { object-position:center 58%; }

/* 3: headings align to illustration top edges */
.orientation { align-items:start; }
.orientation-visual { align-self:start; }
.orientation-copy { justify-content:flex-start; }
.smart { align-items:start; }
.smart-copy { justify-content:flex-start; }
.smart-visual { align-self:start; }

/* 4: service station — image left, soft transition, deep site navy */
.station { min-height:300px; grid-template-columns:minmax(0,52%) minmax(0,48%); align-items:stretch; background:var(--color-station-end); }
.station-visual-wrap { position:relative; min-width:0; overflow:hidden; }
.station-visual-wrap::after { content:""; position:absolute; inset:0 -1px 0 auto; width:30%; background:linear-gradient(90deg,transparent,var(--color-station-end)); pointer-events:none; }
.station-visual { width:100%; height:100%; margin:0; border-radius:0; object-fit:cover; object-position:center; }
.station-copy { padding:34px var(--content-x) 30px 20px; display:flex; flex-direction:column; justify-content:center; }
.station-copy > h3 { margin:0 0 28px; color:#fff; }
.station-notes { padding:0; display:grid; gap:24px; }
.station-notes article { display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:start; }
.station-notes article > img { width:46px; height:46px; object-fit:contain; }
.station-notes h4 { margin:0 0 6px; color:#fff; font-size:var(--fs-product-card-title); line-height:var(--lh-product-card-title); }
.station-notes p { margin:0; display:block; padding:0; }

/* 5: telemetry — CTA belongs to intro; balanced 50/50 body; stronger points */
.telemetry-head { display:block; }
.telemetry-head > div { max-width:900px; }
.telemetry-cta { width:max-content; min-width:176px; margin-top:20px; }
.telemetry-body { margin-top:34px; grid-template-columns:minmax(0,50%) minmax(0,50%); gap:44px; align-items:stretch; }
.telemetry-visual-wrap { height:360px; }
.telemetry-list { display:flex; flex-direction:column; justify-content:space-between; padding:4px 0; }
.telemetry-list p { flex:1; padding:18px 0; gap:20px; align-items:center; border-bottom:0; font-size:18px; line-height:1.42; }
.telemetry-list img { width:52px; height:52px; flex:0 0 52px; }

/* 6: company — lead, map on section background, 3 vertical equal cards */
.company > .section-title { margin-bottom:12px; }
.company-lead { max-width:980px; margin:0 0 32px; }
.company-layout { grid-template-columns:minmax(0,38%) minmax(0,62%); gap:34px; }
.company-scale { min-height:360px; border-radius:0; background:transparent; }
.company-map { inset:0; width:100%; height:100%; opacity:.72; }
.company-kpi { padding:122px 0 0 158px; }
.company-features { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr; gap:16px; }
.company-features article { padding:24px 20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0; }
.company-feature-icon { width:54px; height:54px; flex:0 0 54px; margin-bottom:18px; }
.company-features h3 { margin:0 0 9px; }

/* 7: formats — distinct compact technology illustrations, title-integrated icons, no divider */
.format-cards article { grid-template-columns:minmax(0,34%) minmax(0,66%); }
.format-illustration { min-height:338px; display:grid; place-items:center; }
.format-illustration--purchase { background:radial-gradient(circle at 50% 44%,rgba(89,215,225,.25),transparent 38%),linear-gradient(145deg,#dff5f8,#f4fbfd); }
.format-illustration--rent { background:radial-gradient(circle at 50% 44%,rgba(69,172,210,.22),transparent 38%),linear-gradient(145deg,#e5f1fa,#f6fbfd); }
.format-illustration .format-symbol { position:static; width:112px; height:112px; padding:20px; border-radius:32px; background:rgba(255,255,255,.72); box-shadow:0 14px 34px rgba(11,121,145,.12); }
.format-title-group { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.format-title-group .format-symbol { position:static; width:58px; height:58px; padding:7px; border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 7px 18px rgba(11,121,145,.10); }
.format-title-group h3 { margin:0; }
.format-support { min-height:105px; margin-top:28px; padding-top:0; grid-template-columns:1.1fr repeat(3,minmax(0,1fr)); gap:28px; border-top:0; }
.format-support span { justify-content:flex-start; }
.format-support img { width:42px; height:42px; flex-basis:42px; }

@media (max-width: 720px) {
  .materials { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .feature-grid img { height:210px; }
  .station { grid-template-columns:1fr; }
  .station-visual-wrap { min-height:260px; }
  .station-visual-wrap::after { inset:auto 0 -1px; width:100%; height:32%; background:linear-gradient(180deg,transparent,var(--color-station-end)); }
  .station-copy { padding:28px 22px 30px; }
  .telemetry-body { grid-template-columns:1fr; }
  .telemetry-visual-wrap { height:auto; aspect-ratio:16/10; }
  .company-layout { grid-template-columns:1fr; }
  .company-features { grid-template-columns:1fr; }
  .format-cards article { grid-template-columns:1fr; }
  .format-illustration { min-height:180px; }
  .format-support { grid-template-columns:1fr; gap:18px; }
}


/* === Tasks 1–2, 25 Sep 2026 === */
/* Task 1 — .telemetry: one-line title, intro + CTA row, 3 structured benefits */
.telemetry-head {
  display: block;
}

.telemetry-head .section-title {
  max-width: none;
  margin: 0 0 16px;
  white-space: nowrap;
}

.telemetry-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.telemetry-head .telemetry-intro-row .lead {
  max-width: 900px;
  margin: 0;
}

.telemetry-intro-row .telemetry-cta {
  width: max-content;
  min-width: 176px;
  margin: 0;
  flex: 0 0 auto; 
}

.telemetry-body {
  margin-top: 36px;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  gap: 38px;
  align-items: stretch;
}

.telemetry-visual-wrap {
  height: 320px;
}

.telemetry-list {
  height: 320px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.telemetry-item {
  min-height: 0;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.telemetry-item > img {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

.telemetry-item > div {
  min-width: 0;
}

.telemetry-item h3 {
  margin: 0 0 5px;
  color: var(--color-heading);
  font-size: var(--fs-product-card-title);
  line-height: var(--lh-product-card-title);
  font-weight: var(--fw-product-card-title);
}

.telemetry-item p {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

/* Neutralize earlier paragraph-specific telemetry rules after semantic rebuild. */
.telemetry-list > p,
.telemetry-list p:first-child,
.telemetry-list p:last-child {
  padding: 0;
  border: 0;
}

/* Task 2 — .formats: full-height illustration -> soft gradient -> text */
.format-cards article {
  min-height: 338px;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  overflow: hidden;
}

.format-illustration {
  position: relative;
  min-width: 0;
  min-height: 338px;
  height: 100%;
  display: block;
  overflow: hidden;
  background: transparent;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.format-illustration--purchase,
.format-illustration--rent {
  background: transparent;
}

.format-illustration-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.format-illustration--purchase .format-illustration-image {
  object-position: 66% center;
}

.format-illustration--rent .format-illustration-image {
  object-position: 58% center;
}

.format-illustration::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: 46%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(243, 251, 253, 0) 0%,
    rgba(243, 251, 253, 0.32) 28%,
    rgba(243, 251, 253, 0.76) 68%,
    rgba(243, 251, 253, 1) 100%
  );
}

.format-content {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 34px 30px 28px 28px;
  background: rgba(243, 251, 253, 0.92);
}

@media (max-width: 1180px) {
  .telemetry-head .section-title {
    white-space: normal;
  }
}

@media (max-width: 900px) {
  .telemetry-intro-row {
    align-items: flex-start;
    gap: 20px;
  }

  .telemetry-body {
    gap: 30px;
  }

  .telemetry-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
  }

  .telemetry-item > img {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 720px) {
  .telemetry-intro-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .telemetry-intro-row .telemetry-cta {
    margin-top: 2px;
  }

  .telemetry-visual-wrap,
  .telemetry-list {
    height: auto;
  }

  .telemetry-list {
    gap: 24px;
  }

  .format-cards article {
    grid-template-columns: 1fr;
  }

  .format-illustration {
    min-height: 220px;
    height: 220px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .format-illustration::after {
    inset: auto 0 0;
    width: 100%;
    height: 42%;
    background: linear-gradient(
      180deg,
      rgba(243, 251, 253, 0) 0%,
      rgba(243, 251, 253, 0.76) 68%,
      rgba(243, 251, 253, 1) 100%
    );
  }

  .format-content {
    padding: 28px 24px 26px;
  }
}

/* Fix — purchase card robot must be fully visible and sharp */
.format-illustration--purchase .format-illustration-image {
  object-position: 35% center;
}

.format-illustration--purchase::after {
  width: 38%;
  background: linear-gradient(
    90deg,
    rgba(243, 251, 253, 0) 0%,
    rgba(243, 251, 253, 0.22) 26%,
    rgba(243, 251, 253, 0.68) 66%,
    rgba(243, 251, 253, 1) 100%
  );
}


/* =========================================================
   RESPONSIVE — STAGE 1
   Desktop / laptop: 1000–1440 px
   ========================================================= */

@media (max-width: 1240px) {

  /* --- Общая геометрия --- */

  :root {
    --content-x: 32px;
  }


  /* --- Шапка --- */

  .site-header {
    gap: 18px;
  }

  .logo {
    width: 230px;
    flex-basis: 230px;
  }

  .logo img {
    width: 220px;
  }

  .site-nav {
    gap: 24px;
  }

  .site-nav a {
    font-size: 14px;
  }

  .header-cta {
    width: 235px;
    flex-basis: 235px;
    font-size: 16px;
  }


  /* --- Первый экран --- */

  .hero-copy {
    padding-left: 42px;
  }

  .hero h1 {
    font-size: 54px;
  }

  .hero-subtitle {
    font-size: 24px;
  }

  .hero strong {
    font-size: 28px;
  }


  /* --- Общие заголовки --- */

  .section-title {
    font-size: 36px;
  }


  /* --- Стандарты чистоты --- */

  .standards {
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
    column-gap: 20px;
  }

  .standard-benefit {
    gap: 12px;
  }

  .standard-icon--large {
    width: 72px;
    height: 72px;
  }

  .standard-icon--small {
    width: 56px;
    height: 56px;
  }


  /* --- Сферы применения --- */

  .application-gallery {
    gap: 12px;
  }

  .application-points {
    gap: 12px;
  }

  .application-points span {
    padding-left: 27px;
  }


  /* --- Робот / характеристики --- */

  .product {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  }

  .product-copy {
    padding-left: 24px;
  }

  .product-columns {
    gap: 16px;
  }

  .materials {
    gap: 5px;
  }


  /* --- Навигация и инфраструктура --- */

  .orientation {
    grid-template-columns: minmax(0, 34%) minmax(0, 66%);
    gap: 24px;
  }

  .orientation-features {
    gap: 16px;
  }

  .smart {
    grid-template-columns: minmax(0, 43%) minmax(0, 57%);
    gap: 24px;
  }


  /* --- Телеметрия --- */

  .telemetry {
    padding-left: 32px;
    padding-right: 32px;
  }

  .telemetry-body {
    gap: 28px;
  }

  .telemetry-item {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
  }

  .telemetry-item > img {
    width: 58px;
    height: 58px;
  }


  /* --- Инситех --- */

  .company {
    padding-left: 32px;
    padding-right: 32px;
  }

  .company-layout {
    grid-template-columns: minmax(0, 36%) minmax(0, 64%);
    gap: 24px;
  }

  .company-kpi {
    padding-left: 100px;
  }

  .company-features {
    gap: 10px;
  }

  .company-features article {
    padding: 20px 16px;
  }


  /* --- Сервисная модель --- */

  .lifecycle {
    grid-template-columns:
      minmax(0, 1fr) 60px
      minmax(0, 1fr) 60px
      minmax(0, 1fr) 60px
      minmax(0, 1fr) 60px
      minmax(0, 1fr);
  }

  .lifecycle-step img {
    width: 110px;
    height: 110px;
  }


  /* --- Покупка / аренда --- */

  .format-cards {
    gap: 14px;
  }

  .format-cards article {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  }

  .format-content {
    padding: 28px 22px 26px 20px;
  }

  .format-content h3 {
    font-size: 23px;
  }

  .format-title-group {
    gap: 10px;
  }

  .format-title-group .format-symbol {
    width: 50px;
    height: 50px;
  }

  .format-support {
    gap: 18px;
  }
}


/* =========================================================
   RESPONSIVE — STAGE 1B
   Narrow laptop: 1000–1100 px
   ========================================================= */

@media (max-width: 1100px) {

  :root {
    --content-x: 26px;
  }


  /* --- Шапка --- */

  .site-header {
    padding-left: 26px;
    padding-right: 26px;
    gap: 14px;
  }

  .logo {
    width: 190px;
    flex-basis: 190px;
  }

  .logo img {
    width: 185px;
  }

  .site-nav {
    gap: 16px;
  }

  .site-nav a {
    font-size: 13px;
  }

  .header-cta {
    width: 205px;
    flex-basis: 205px;
    height: 50px;
    font-size: 15px;
  }


  /* --- Первый экран --- */

  .hero {
    min-height: 480px;
  }

  .hero-copy {
    padding: 68px 0 0 36px;
  }

  .hero h1 {
    font-size: 48px;
  }

  .hero-subtitle {
    font-size: 21px;
  }

  .hero .text-lead {
    font-size: 18px;
  }

  .hero strong {
    font-size: 25px;
  }


  /* --- Типографика --- */

  .section-title {
    font-size: 32px;
  }


  /* --- Стандарты --- */

  .standards {
    grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    column-gap: 16px;
  }

  .standard-benefit {
    padding: 14px;
  }

  .standard-benefit h3 {
    font-size: 18px;
  }

  .standards-list article {
    padding: 12px;
    gap: 12px;
  }

  .standards-list h3 {
    font-size: 17px;
  }


  /* --- Сферы применения --- */

  .application-points span {
    font-size: 14px;
  }

  .application-gallery figcaption {
    font-size: 14px;
  }


  /* --- Робот --- */

  .product {
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  }

  .product-copy {
    padding-left: 20px;
    padding-right: 24px;
  }

  .product-columns {
    gap: 12px;
  }

  .product-columns h3 {
    font-size: 15px;
  }

  .product-columns p {
    font-size: 14px;
  }

  .materials figcaption {
    font-size: 13px;
  }


  /* --- Ориентация --- */

  .orientation {
    grid-template-columns: minmax(0, 32%) minmax(0, 68%);
    gap: 20px;
  }

  .orientation-features {
    gap: 12px;
  }

  .feature-icon {
    width: 42px;
    height: 42px;
  }


  /* --- Телеметрия --- */

  .telemetry-intro-row {
    gap: 20px;
  }

  .telemetry-body {
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    gap: 24px;
  }

  .telemetry-item {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 14px;
  }

  .telemetry-item > img {
    width: 50px;
    height: 50px;
  }


  /* --- Компания --- */

  .company-layout {
    grid-template-columns: minmax(0, 34%) minmax(0, 66%);
    gap: 20px;
  }

  .company-kpi {
    padding-left: 70px;
  }

  .company-kpi strong {
    font-size: 68px;
  }

  .company-features article {
    padding: 18px 14px;
  }

  .company-feature-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }


  /* --- Сервисная модель --- */

  .lifecycle {
    grid-template-columns:
      minmax(0, 1fr) 42px
      minmax(0, 1fr) 42px
      minmax(0, 1fr) 42px
      minmax(0, 1fr) 42px
      minmax(0, 1fr);
  }

  .lifecycle-step img {
    width: 96px;
    height: 96px;
  }


  /* --- Покупка / аренда --- */

  .format-cards article {
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  }

  .format-content {
    padding: 24px 18px 24px 18px;
  }

  .format-subtitle {
    min-height: 0;
  }

  .format-cards li {
    margin: 9px 0;
  }

  .format-support {
    grid-template-columns: 1fr 1fr 0.8fr 1.3fr;
    gap: 12px;
  }

  .format-support img {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* =========================================================
   TABLET ADAPTIVE — 721–999 px
   ========================================================= */

@media (min-width: 721px) and (max-width: 999px) {

  /* ---------- Общая геометрия ---------- */

  :root {
    --content-x: 28px;
    --grid-gap: 14px;
  }

  .section-title {
    font-size: 32px;
    line-height: 1.08;
  }


  /* ---------- Шапка ---------- */

  .site-header {
    min-height: 68px;
    padding: 0 22px;
    gap: 18px;
  }

  .logo {
    width: 180px;
    flex-basis: 180px;
  }

  .logo img {
    width: 180px;
  }

  .site-nav {
    gap: 18px;
  }

  .site-nav a {
    font-size: 12px;
  }

  .site-nav a:last-child {
    display: none;
  }

  .header-cta {
    width: 190px;
    height: 46px;
    flex-basis: 190px;
    font-size: 13px;
  }


  /* ---------- Hero ---------- */

  .hero {
    min-height: 460px;
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.82) 40%,
        rgba(255, 255, 255, 0.28) 68%,
        rgba(255, 255, 255, 0) 88%
      ),
      url("assets/hero-mall.png") center center / cover no-repeat;
  }

  .hero-copy {
    max-width: 72%;
    padding: 60px 0 0 38px;
  }

  .hero h1 {
    margin-bottom: 42px;
    font-size: 48px;
  }

  .hero-subtitle {
    font-size: 22px;
  }

  .hero .text-lead {
    margin-bottom: 44px;
  }

  .hero strong {
    font-size: 26px;
  }


  /* ---------- Стандарты чистоты ---------- */

  .standards {
    min-height: 0;
    padding: 30px var(--content-x);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 24px;
  }

  .standards-intro,
  .standards-primary,
  .standards-list {
    grid-column: 1;
    grid-row: auto;
  }

  .standards-primary {
    padding-top: 0;
    padding-right: 0;
    gap: 18px;
  }

  .standards-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .standards-photo {
    height: 250px;
  }

  .standards-list {
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 12px;
  }

  .standards-list article {
    min-height: 120px;
  }


  /* ---------- Сферы применения ---------- */

  .applications {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .application-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
    margin-bottom: 22px;
  }

  .application-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .application-gallery img {
    height: 220px;
  }


  /* ---------- Представление робота ---------- */

  .product {
    min-height: 0;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  }

  .product-copy {
    padding: 28px 28px 24px;
  }

  .product-columns {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .product-columns p {
    margin-top: 3px;
  }

  .materials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 22px;
    padding-top: 0;
  }


  /* ---------- 4 режима / конфигурация ---------- */

  .features {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 14px;
  }

  .feature-grid img {
    height: 220px;
  }


  /* ---------- Ориентация ---------- */

  .orientation {
    min-height: 0;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  }

  .orientation-visual {
    height: 100%;
  }

  .orientation-visual img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
  }

  .orientation-copy {
    padding: 28px;
  }

  .orientation-features {
    grid-template-columns: 1fr;
    gap: 16px;
  }


  /* ---------- Адаптация под инфраструктуру ---------- */

  .smart {
    min-height: 0;
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  }

  .smart-copy {
    padding: 28px;
  }

  .smart-visual {
    height: 100%;
  }

  .smart-visual img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
  }


  /* ---------- Сервисная станция ---------- */

  .station {
    min-height: 340px;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  }

  .station-copy {
    padding: 28px;
  }

  .station-copy > h3 {
    margin-bottom: 22px;
  }

  .station-notes {
    gap: 18px;
  }


  /* ---------- Телеметрия ---------- */

  .telemetry {
    padding: 30px var(--content-x);
  }

  .telemetry-body {
    grid-template-columns: minmax(0, 48%) minmax(0, 52%);
    gap: 26px;
  }

  .telemetry-visual-wrap,
  .telemetry-list {
    height: 330px;
  }

  .telemetry-item {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
  }

  .telemetry-item > img {
    width: 54px;
    height: 54px;
  }


  /* ---------- О компании ---------- */

  .company {
    padding: 30px var(--content-x);
  }

  .company-lead {
    margin-bottom: 24px;
  }

  .company-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .company-scale {
    min-height: 300px;
  }

  .company-kpi {
    padding: 94px 0 0 120px;
  }

  .company-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .company-features article {
    padding: 20px 16px;
  }


  /* ---------- Сервисная модель ---------- */

  .service {
    min-height: 0;
    padding: 30px var(--content-x) 34px;
  }

  .lifecycle {
    margin-top: 36px;
    grid-template-columns:
      1fr 50px
      1fr 50px
      1fr 50px
      1fr 50px
      1fr;
  }


  /* ---------- Покупка / аренда ---------- */

  .formats {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .format-cards {
    grid-template-columns: 1fr;
  }

  .format-cards article {
    min-height: 300px;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  }

  .format-illustration {
    min-height: 300px;
  }

  .format-content {
    padding: 28px 26px;
  }

  .format-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
  }


  /* ---------- Финальный CTA ---------- */

  .cta {
    min-height: 335px;
    background:
      linear-gradient(
        90deg,
        var(--color-cta-bg) 0%,
        var(--color-cta-bg) 54%,
        rgba(6, 72, 111, 0.48) 68%,
        rgba(6, 72, 111, 0.05) 100%
      ),
      url("assets/cta_clean2.png") right center / auto 100% no-repeat;
  }

  .cta-copy {
    width: 68%;
    padding: 30px 0 0 var(--content-x);
  }

  .contact-form {
    width: 100%;
  }


  /* ---------- Footer ---------- */

  .site-footer {
    min-height: 150px;
    padding: 38px var(--content-x) 30px;
    gap: 24px;
    flex-wrap: wrap;
  }
}

/* =========================================================
   TABLET FIXES — изображения, карта, CTA
   ========================================================= */

@media (min-width: 721px) and (max-width: 999px) {

  /* 1. HERO — сохраняем робота в кадре */
  .hero {
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.82) 40%,
        rgba(255, 255, 255, 0.28) 68%,
        rgba(255, 255, 255, 0) 88%
      ),
      url("assets/hero-mall.png") 72% center / cover no-repeat;
  }


  /* 2. PRODUCT — не режем робота */
  .product-visual img {
    object-position: center center;
  }


  /* 3. КАРТА — KPI остаётся привязан к карте */
  .company-scale {
    position: relative;
    min-height: 300px;
  }

  .company-kpi {
    position: absolute;
    left: 16%;
    top: 42%;
    height: auto;
    padding: 0;
    transform: translateY(-50%);
  }


  /* 4. CTA — робот остаётся справа и не лезет под форму */
  .cta {
    background:
      linear-gradient(
        90deg,
        var(--color-cta-bg) 0%,
        var(--color-cta-bg) 58%,
        rgba(6, 72, 111, 0.76) 68%,
        rgba(6, 72, 111, 0.12) 100%
      ),
      url("assets/cta_clean2.png") right center / auto 100% no-repeat;
  }

  .cta-copy {
    width: 64%;
  }
}

/* Сферы применения — стабильная пропорция карточек */
.application-gallery img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* =========================================================
   NARROW TABLET — TELEMETRY
   ========================================================= */

@media (min-width: 721px) and (max-width: 820px) {

  .telemetry-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .telemetry-visual-wrap {
    width: 100%;
    height: 280px;
    aspect-ratio: auto;
  }

  .telemetry-visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .telemetry-list {
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
  }

  .telemetry-item {
    min-width: 0;
    display: block;
  }

  .telemetry-item > img {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }

  .telemetry-item h3 {
    margin-bottom: 6px;
  }

  .telemetry-item p {
    min-width: 0;
  }
}

/* =========================================================
   NARROW TABLET — STRUCTURAL FIXES
   721–820 px
   ========================================================= */

@media (min-width: 721px) and (max-width: 820px) {

  /* =======================================================
     1. PRODUCT
     Картинка сверху, контент снизу
     ======================================================= */

  .product {
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-visual {
    width: 100%;
    height: 360px;
  }

  .product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
  }

  .product-copy {
    width: 100%;
    padding: 28px;
  }


  /* =======================================================
     2. ORIENTATION
     Картинка сверху, текст снизу
     ======================================================= */

  .orientation {
    display: grid;
    grid-template-columns: 1fr;
  }

  .orientation-visual {
    width: 100%;
    height: 360px;
  }

  .orientation-visual img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 35%;
  }

  .orientation-copy {
    width: 100%;
    padding: 28px;
  }


  /* =======================================================
     3. SERVICE STATION
     Оставляем две колонки, но даём изображению больше места
     ======================================================= */

  .station {
    grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  }

  .station-visual {
  object-fit: cover;
  object-position: 35% center;
}

.station-visual-wrap::after {
  width: 14%;
}

  .station-copy {
    padding-left: 16px;
    padding-right: 24px;
  }


  /* =======================================================
     4. CTA
     На узком планшете робот больше не конкурирует с формой
     ======================================================= */

  .cta {
    min-height: 0;
    padding-bottom: 30px;

    background:
      linear-gradient(
        90deg,
        rgba(6, 72, 111, 1) 0%,
        rgba(6, 72, 111, 0.98) 55%,
        rgba(6, 72, 111, 0.70) 72%,
        rgba(6, 72, 111, 0.20) 100%
      ),
      url("assets/cta_clean2.png") calc(100% + 110px) center / auto 100% no-repeat;
  }

  .cta-copy {
    width: 100%;
    padding: 30px 28px 0;
  }

  .cta-copy > h2,
  .cta-copy > p {
    max-width: 62%;
  }

  .contact-form {
    width: 62%;
  }
}
/* =========================================================
   721–760 px — FINAL TABLET FIXES
   ========================================================= */

@media (min-width: 721px) and (max-width: 760px) {

  /* Сервисная станция */
  .station {
    grid-template-columns: 1fr;
  }

  .station-visual-wrap {
    min-height: 360px;
  }

  .station-visual {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: 35% center;
  }

  .station-visual-wrap::after {
    inset: auto 0 -1px 0;
    width: 100%;
    height: 18%;
    background: linear-gradient(
      180deg,
      transparent,
      var(--color-station-end)
    );
  }

  .station-copy {
    padding: 24px 28px 30px;
  }
}
/* =========================================================
   MOBILE LARGE — FINAL OVERRIDES
   481–720 px
   ========================================================= */

@media (min-width: 481px) and (max-width: 720px) {

  :root {
    --content-x: 24px;
  }


  /* =======================================================
     1. HEADER
     ======================================================= */

  .site-header {
    min-height: 68px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .logo {
    width: 180px;
    flex: 0 0 180px;
  }

  .logo img {
    width: 180px;
    max-width: 100%;
  }

  .site-nav {
    display: none;
  }

  .header-cta {
    width: auto;
    min-width: 190px;
    flex: 0 0 auto;
    padding: 0 22px;
    font-size: 15px;
  }


  /* =======================================================
     2. HERO
     Текст слева, робот остаётся фоном справа
     ======================================================= */

  .hero {
    min-height: 500px;
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.93) 46%,
        rgba(255,255,255,.60) 66%,
        rgba(255,255,255,.10) 100%
      ),
      url("assets/hero-mall.png") 72% center / cover no-repeat;
  }

  .hero-copy {
    max-width: 72%;
    padding: 56px 0 36px 32px;
  }

  .hero h1 {
    font-size: 44px;
    line-height: 1.02;
    margin-bottom: 34px;
  }

  .hero-subtitle {
    font-size: 21px;
    line-height: 1.18;
  }

  .hero .text-lead {
    font-size: 17px;
    line-height: 1.35;
  }

  .hero strong {
    font-size: 25px;
  }


  /* =======================================================
     3. СОВРЕМЕННЫЕ СТАНДАРТЫ
     Всё в одну нормальную вертикальную ленту
     ======================================================= */

  .standards {
    min-height: 0;
    padding: 30px var(--content-x);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 22px;
  }

  .standards-intro,
  .standards-primary,
  .standards-list {
    grid-column: 1;
    grid-row: auto;
  }

  .standards-primary {
    padding: 0;
    gap: 20px;
  }

  .standards-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .standard-benefit {
    min-height: 0;
    padding: 16px;
  }

  .standards-photo {
    height: 300px;
    background-position: 22% center;
  }

  .standards-list {
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 14px;
  }

  .standards-list article {
    min-height: 0;
    padding: 16px;
  }


  /* =======================================================
     4. PRODUCT
     Робот сверху, информация ниже
     ======================================================= */

  .product {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-visual {
    width: 100%;
    height: 390px;
  }

  .product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
  }

  .product-copy {
    width: 100%;
    padding: 28px var(--content-x) 30px;
  }

  .product-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .materials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }


  /* =======================================================
     5. КОНФИГУРАЦИИ ДЛЯ РОССИИ
     2 карточки в ряд
     ======================================================= */

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

  .feature-grid img {
    height: 250px;
    object-fit: cover;
  }


  /* =======================================================
     6. TELEMETRY
     Фото сверху, преимущества ниже
     ======================================================= */

  .telemetry {
    min-height: 0;
    padding-left: var(--content-x);
    padding-right: var(--content-x);
  }

  .telemetry-intro-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .telemetry-intro-row .telemetry-cta {
    width: max-content;
    margin: 0;
  }

  .telemetry-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 30px;
  }

  .telemetry-visual-wrap {
    width: 100%;
    height: 340px;
    aspect-ratio: auto;
  }

  .telemetry-visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .telemetry-list {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0;
  }

  .telemetry-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  .telemetry-item > img {
    width: 58px;
    height: 58px;
  }


  /* =======================================================
     7. ВАРИАНТЫ ВНЕДРЕНИЯ
     Каждая карточка отдельной строкой
     ======================================================= */

  .format-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .format-cards article {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  }

  .format-illustration {
    min-height: 330px;
    height: 100%;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }

  .format-illustration::after {
    inset: 0 0 0 auto;
    width: 30%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(243,251,253,0) 0%,
      rgba(243,251,253,.45) 55%,
      rgba(243,251,253,1) 100%
    );
  }

  .format-content {
    padding: 26px 24px;
  }


  /* =======================================================
     8. CTA
     Сохраняем уже найденную рабочую логику
     ======================================================= */

  .cta {
    min-height: 0;
    background:
      linear-gradient(
        90deg,
        rgba(6,72,111,1) 0%,
        rgba(6,72,111,.98) 54%,
        rgba(6,72,111,.68) 72%,
        rgba(6,72,111,.16) 100%
      ),
      url("assets/cta_clean2.png")
      calc(100% + 110px) center / auto 100% no-repeat;
  }

  .cta-copy {
    width: 100%;
    padding: 30px 28px 32px;
  }

  .cta-copy > h2,
  .cta-copy > p {
    max-width: 66%;
  }

  .contact-form {
    width: 66%;
    /* =======================================================
     600 px — локальные уплотнения
     ======================================================= */

  /* 1. Сферы применения:
     галочки и подписи больше не толкаются в 5 узких колонках */
  .application-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
  }

  .application-points span {
    min-width: 0;
    padding-left: 34px;
  }


  /* 2. Адаптируется под инфраструктуру:
     на этой ширине больше не держим две узкие колонки */
  .smart {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .smart-copy {
    padding: 28px var(--content-x);
  }

  .smart-visual {
    width: 100%;
    height: 340px;
  }

  .smart-visual img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 48%;
  }


  /* 3. Сервисная модель:
     5 этапов уже не помещаются в одну строку */
  .lifecycle {
    margin-top: 34px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .lifecycle-arrow {
    display: none;
  }

  .lifecycle-step {
    min-width: 0;
  }

  .lifecycle-step img {
    max-width: 72px;
    height: auto;
  }

  .lifecycle-step p {
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
  }}
}
/* =========================================================
   MOBILE ADAPTIVE — 0–720 px
   PART 1: HEADER → SMART
   ДЕРЖАТЬ В САМОМ КОНЦЕ ФАЙЛА
   ========================================================= */

@media (max-width: 720px) {

  /* =======================================================
     ОБЩАЯ ГЕОМЕТРИЯ
     ======================================================= */

  :root {
    --content-x: 24px;
    --grid-gap: 16px;
  }

  .section-title {
    font-size: 32px;
    line-height: 1.08;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  .site-header {
    min-height: 68px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .logo {
    width: 180px;
    flex: 0 0 180px;
  }

  .logo img {
    width: 180px;
    max-width: 100%;
  }

  .site-nav {
    display: none;
  }

  .header-cta {
    width: auto;
    min-width: 190px;
    flex: 0 0 auto;
    padding: 0 22px;
    font-size: 15px;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .hero {
    min-height: 500px;
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.93) 46%,
        rgba(255,255,255,.60) 66%,
        rgba(255,255,255,.10) 100%
      ),
      url("assets/hero-mall.png") 72% center / cover no-repeat;
  }

  .hero-copy {
    max-width: 72%;
    padding: 56px 0 36px 32px;
  }

  .hero h1 {
    font-size: 44px;
    line-height: 1.02;
    margin-bottom: 34px;
  }

  .hero-subtitle {
    font-size: 21px;
    line-height: 1.18;
  }

  .hero .text-lead {
    font-size: 17px;
    line-height: 1.35;
  }

  .hero strong {
    font-size: 25px;
  }


  /* =======================================================
     СОВРЕМЕННЫЕ СТАНДАРТЫ ЧИСТОТЫ
     ======================================================= */

  .standards {
    min-height: 0;
    padding: 30px var(--content-x);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 22px;
  }

  .standards-intro,
  .standards-primary,
  .standards-list {
    grid-column: 1;
    grid-row: auto;
  }

  .standards-primary {
    padding: 0;
    gap: 20px;
  }

  .standards-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .standard-benefit {
    min-height: 0;
    padding: 16px;
  }

  .standards-photo {
    height: 300px;
    background-position: 22% center;
  }

  .standards-list {
    height: auto;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 14px;
  }

  .standards-list article {
    min-height: 0;
    padding: 16px;
  }


  /* =======================================================
     СФЕРЫ ПРИМЕНЕНИЯ
     ======================================================= */

  .applications {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .application-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
    margin-bottom: 24px;
  }

  .application-points span {
    min-width: 0;
    padding-left: 34px;
  }

  .application-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .application-gallery figure {
    min-width: 0;
  }

  .application-gallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }


  /* =======================================================
     ПРЕДСТАВЛЯЕМ РОБОТА
     ======================================================= */

  .product {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-visual {
    width: 100%;
    height: 390px;
  }

  .product-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 48%;
  }

  .product-copy {
    width: 100%;
    padding: 28px var(--content-x) 30px;
  }

  .product-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .materials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }


  /* =======================================================
     КОНФИГУРАЦИЯ / РЕЖИМЫ УБОРКИ
     ======================================================= */

  .features {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

  .feature-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }


  /* =======================================================
     ОРИЕНТАЦИЯ В ПРОСТРАНСТВЕ
     ======================================================= */

  .orientation {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .orientation-visual {
    width: 100%;
    height: 360px;
  }

  .orientation-visual img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 35%;
  }

  .orientation-copy {
    width: 100%;
    padding: 28px var(--content-x);
  }

  .orientation-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }


  /* =======================================================
     АДАПТИРУЕТСЯ ПОД ИНФРАСТРУКТУРУ ОБЪЕКТА
     ======================================================= */

  .smart {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .smart-copy {
    width: 100%;
    padding: 28px var(--content-x);
    order: 2;
  }

  .smart-visual {
    width: 100%;
    height: 340px;
    order: 1;
  }

  .smart-visual img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 48%;
  }
    /* =======================================================
     СЕРВИСНАЯ СТАНЦИЯ
     ======================================================= */

  .station {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .station-visual-wrap {
    width: 100%;
    min-height: 0;
    height: 360px;
  }

  .station-visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% center;
  }

  .station-visual-wrap::after {
    inset: auto 0 -1px 0;
    width: 100%;
    height: 18%;
    background:
      linear-gradient(
        180deg,
        transparent,
        var(--color-station-end)
      );
  }

  .station-copy {
    width: 100%;
    padding: 26px var(--content-x) 30px;
  }


  /* =======================================================
     ТЕЛЕМЕТРИЯ
     ======================================================= */

  .telemetry {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .telemetry-intro-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .telemetry-intro-row .telemetry-cta {
    width: max-content;
    margin: 0;
  }

  .telemetry-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 30px;
  }

  .telemetry-visual-wrap {
    width: 100%;
    height: 340px;
    aspect-ratio: auto;
  }

  .telemetry-visual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .telemetry-list {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0;
  }

  .telemetry-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  .telemetry-item > img {
    width: 58px;
    height: 58px;
  }


  /* =======================================================
     О КОМПАНИИ
     ======================================================= */

  .company {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .company-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .company-scale {
    position: relative;
    width: 100%;
    min-height: 300px;
  }

  .company-kpi {
    position: absolute;
    left: 16%;
    top: 42%;
    width: auto;
    height: auto;
    padding: 0;
    transform: translateY(-50%);
  }

  .company-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .company-features article {
    min-width: 0;
    padding: 18px 14px;
  }


  /* =======================================================
     СЕРВИСНАЯ МОДЕЛЬ
     ======================================================= */

  .service {
    min-height: 0;
    padding: 30px var(--content-x) 34px;
  }

  /* =======================================================
   СЕРВИСНАЯ МОДЕЛЬ — MOBILE
   ======================================================= */

.lifecycle {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px 0;
}

.lifecycle-connector {
  display: none;
}

.lifecycle-step {
  min-width: 0;
  width: 33.333%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* последние два элемента — по половине второй строки */
.lifecycle-step:nth-child(7),
.lifecycle-step:nth-child(9) {
  width: 50%;
}

.lifecycle-step img {
  width: 72px;
  height: auto;
  margin: 0 auto 12px;
}

.lifecycle-step .text-caption {
  display: block;
  width: 100%;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}


  /* =======================================================
     ПОКУПКА / АРЕНДА
     ======================================================= */

  .formats {
    min-height: 0;
    padding: 30px var(--content-x);
  }

  .format-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .format-cards article {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  }

  .format-illustration {
    min-height: 330px;
    height: 100%;
    border-radius:
      var(--radius-card) 0 0 var(--radius-card);
  }

  .format-illustration::after {
    inset: 0 0 0 auto;
    width: 30%;
    height: 100%;
    background:
      linear-gradient(
        90deg,
        rgba(243,251,253,0) 0%,
        rgba(243,251,253,.45) 55%,
        rgba(243,251,253,1) 100%
      );
  }

  .format-content {
    padding: 26px 24px;
  }

  .format-support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
  }


  /* =======================================================
     ФИНАЛЬНЫЙ CTA
     ======================================================= */

  .cta {
    min-height: 0;
    background:
      linear-gradient(
        90deg,
        rgba(6,72,111,1) 0%,
        rgba(6,72,111,.98) 54%,
        rgba(6,72,111,.68) 72%,
        rgba(6,72,111,.16) 100%
      ),
      url("assets/cta_clean2.png")
      calc(100% + 110px) center / auto 100% no-repeat;
  }

  .cta-copy {
    width: 100%;
    padding: 30px 28px 32px;
  }

  .cta-copy > h2,
  .cta-copy > p {
    max-width: 66%;
  }

  .contact-form {
    width: 66%;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .site-footer {
    min-height: 0;
    padding: 34px var(--content-x) 30px;
    gap: 24px;
    flex-wrap: wrap;
  }

}
/* =========================================================
   MOBILE SMALL — 0–480 px
   ========================================================= */

@media (max-width: 480px) {

  /* =======================================================
     1. СТАНДАРТЫ ЧИСТОТЫ
     Карточки в одну колонку — тексту снова хватает места
     ======================================================= */

  .standards-benefits {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .standards-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .standard-benefit,
  .standards-list article {
    min-height: 0;
    height: auto;
  }


  /* =======================================================
     2. ПРЕДСТАВЛЯЕМ РОБОТА — блок "5 режимов"
     ======================================================= */

  .modes {
    gap: 18px;
    align-items: flex-start;
  }

  .modes em {
    font-size: 72px;
    line-height: 0.95;
  }

  .modes .text-body {
    font-size: 18px;
    line-height: 1.35;
  }

  .product-columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }


  /* =======================================================
     3. ИНСИТЕХ — ФЕДЕРАЛЬНЫЙ ИНТЕГРАТОР
     Карточки перестают быть тремя узкими башнями
     ======================================================= */

  .company-features {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .company-features article {
    min-height: 0;
    height: auto;
    padding: 20px 18px;
  }


  /* =======================================================
     4. ФИНАЛЬНЫЙ CTA — без робота
     ======================================================= */

  .cta {
    min-height: 0;
    background: var(--color-cta-bg);
  }

  .cta-copy {
    width: 100%;
    padding: 30px 24px 34px;
  }

  .cta-copy > h2,
  .cta-copy > p {
    max-width: 100%;
  }

  .contact-form {
    width: 100%;
  }

.format-illustration--sell .format-illustration-image {
  object-position: 25% center;
}

.format-illustration--rent .format-illustration-image {
  object-position: 25% center;
} 
/* ФОРМАТЫ — на мобильных убираем иллюстрации */
.format-illustration {
  display: none;
}

.format-cards article {
  grid-template-columns: 1fr;
}

.format-content {
  padding: 24px 20px;
}
}
/* =========================================================
   MOBILE SMALL — 0–390 px
   Финальные корректировки
   ========================================================= */

@media (max-width: 390px) {

  /* 1. СФЕРЫ ПРИМЕНЕНИЯ — галочки по одной в строке */
  .application-points {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-left: 0;
    margin-right: 0;
  }

  .application-points span {
    min-width: 0;
    padding-left: 34px;
  }


  /* 2. ПРЕДСТАВЛЯЕМ РОБОТА — уменьшаем "5 режимов работы" */
  .modes {
    gap: 14px;
  }

  .modes em {
    font-size: 58px;
    line-height: 0.95;
  }

  .modes .text-body,
  .modes p {
    font-size: 16px;
    line-height: 1.35;
  }


  /* 3. КОНФИГУРАЦИЯ — карточки по одной */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .feature-grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }


  /* 4. БАННЕР / большое изображение в блоке стандартов */
  .standards-photo {
    height: 240px;
    background-position: 18% center;
  }

}