/* Секции главной. Раскладка — по макету Figma «Kubera — DS (Corporate Blue)», узел 24109:2. Только токены. */

/* ================= Шапка ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--space-16) var(--grid-margin-x);
  background: var(--color-bg-default);
}

.site-header__bar {
  max-width: var(--grid-container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.brand__dot {
  color: var(--color-bg-primary);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

/* Пункт меню — компонент Figma Link: отступ только снизу 4; у активного (Active) линия снизу */
.nav__link {
  padding-bottom: var(--space-4);
}

.nav__link:hover {
  color: var(--color-text-primary);
}

.nav__link[aria-current="true"] {
  border-bottom: var(--border-width-default) solid var(--color-border-primary);
  color: var(--color-text-accent);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.site-header__menu-btn {
  display: none;
}

/* ================= Первый экран ================= */
.hero {
  padding-block: var(--space-64) var(--space-40);
}

.hero .container {
  gap: var(--space-40);
}

.hero__top {
  align-items: start;
}

/* Отступы между частями блоков — по макету: каталог 40, процесс 64 */
.catalog .container { gap: var(--space-40); }
.process .container { gap: var(--space-64); }

.hero__aside {
  grid-column: 1 / span 4;
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.hero__main {
  grid-column: 5 / span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.status {
  display: flex;
  gap: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width-default) solid var(--color-border-default);
}

.status__dot {
  margin-top: var(--space-4);
  color: var(--color-border-success);
}

.status__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cta-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.hero__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

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

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-64) var(--space-24) var(--space-24); /* высота 180 из макета получается из содержимого + верхнего отступа */
  border-radius: var(--radius-block);
  background: var(--color-bg-muted);
}

.stat__value {
  display: flex;
  flex-direction: column;
}

.stat__title {
  color: var(--color-text-accent);
}

.banner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.84; /* 1536 × 540 из макета */
  border-radius: var(--radius-container);
  background: var(--color-bg-muted);
}

.banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner__tag {
  position: absolute;
  left: var(--space-32);
  bottom: var(--space-32);
  max-width: var(--grid-column-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-24);
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-block);
  background: var(--color-bg-default);
  box-shadow: var(--shadow-sm);
}

.banner__tag-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.banner__tag-dot {
  color: var(--color-bg-primary);
}

.banner__badge {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-button);
}

/* ================= Блок 2: точность и чистая зона ================= */
.tech__head {
  align-items: start;
  row-gap: var(--space-24);
}

.tech__label {
  grid-column: 1 / span 4;
}

.tech__title {
  grid-column: 1 / -1;
}

.equipment {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.4; /* 1536 × 640 из макета */
  border-radius: var(--radius-container);
  background: var(--color-bg-subtle);
}

.equipment__img {
  position: absolute;
  inset: var(--space-80) var(--space-64);
  width: calc(100% - var(--space-64) * 2);
  height: calc(100% - var(--space-80) * 2);
  object-fit: contain;
}

.callout {
  position: absolute;
  width: var(--grid-column-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  border: var(--border-width-default) solid var(--color-border-subtle);
  border-radius: var(--radius-block);
  isolation: isolate;
  -webkit-backdrop-filter: blur(10px); /* ds-allow: размытие «стекла», как в макете */
  backdrop-filter: blur(10px); /* ds-allow: размытие «стекла», как в макете */
}

/* «Стекло»: цвет bg.strong с прозрачностью 30 % — слоем позади текста, сам блок остаётся без цвета фона */
.callout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-bg-strong);
  opacity: 0.3;
}

.callout--1 { left: 4.3%;  bottom: 13.9%; }
.callout--2 { left: 12%;   top: 12.8%; }
.callout--3 { left: 61.8%; top: 5.2%; }
.callout--4 { left: 67.1%; bottom: 3.3%; }

/* ================= Блок 3: каталог ================= */
.catalog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--grid-gutter);
}

.catalog__head .heading {
  flex: 1 1 0;
}

.catalog__note {
  flex: 1 1 0;
  max-width: var(--grid-column-4);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}

.bento .product--1 { grid-column: 1; grid-row: 1; }
.bento .product--2 { grid-column: 3; grid-row: 1; }
.bento .product--3 { grid-column: 4; grid-row: 1; }
.bento .product--4 { grid-column: 2; grid-row: 2; }
.bento .product--5 { grid-column: 3 / span 2; grid-row: 2; }
.bento .product--6 { grid-column: 1; grid-row: 3; }
.bento .product--7 { grid-column: 2; grid-row: 3; }
.bento .product--8 { grid-column: 4; grid-row: 3; }

.product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-block);
  background: var(--color-bg-default);
}

.product__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-bg-subtle);
}

.product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__tag {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-button); /* метка — radius.button (docs/apply-to-layout.md, раздел 9); в макете капсула */
}

.product__fav {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-lg);
  height: var(--size-control-lg);
  border-radius: 50%;
  background: var(--color-bg-subtle);
  color: var(--color-icon-default);
  transition: color var(--duration-base) var(--easing-standard);
}

.product__fav:hover,
.product__fav[aria-pressed="true"] {
  color: var(--color-text-error);
}

.product__fav:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--border-width-focus);
}

.product__body {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gutter);
  padding: var(--space-16);
}

.product__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.product__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.chip {
  padding: var(--space-4) var(--space-8);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: var(--color-bg-muted);
}

.product__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.price {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.price__old {
  color: var(--color-text-disabled);
  text-decoration: line-through;
}

/* ================= Блок 4: три маршрута ================= */
.routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.route {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-24);
  min-height: calc(var(--space-128) * 3 + var(--space-96)); /* 480 из макета */
  padding: var(--space-24);
  border-radius: var(--radius-block);
  background: var(--color-bg-muted);
}

.route__number {
  position: absolute;
  top: var(--space-32);
  left: var(--space-24);
  color: var(--color-text-accent);
  pointer-events: none;
}

.route__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.checklist__item .icon {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  color: var(--color-icon-primary);
}

/* ================= Блок 5: пять шагов ================= */
.process__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--grid-gutter);
}

.process__total {
  color: var(--color-text-accent);
}

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-16); /* в макете 12, вне шкалы — вверх до 16 */
}

.step {
  display: grid;
  grid-template-columns: var(--grid-column-6) var(--grid-column-5) minmax(0, 1fr) var(--grid-column-6);
  align-items: start;
  gap: var(--space-24);
  min-height: var(--space-128);
  padding: var(--space-24);
  border-radius: var(--radius-block);
  background: var(--color-bg-muted);
}

.step__time {
  color: var(--color-text-accent);
}

/* ================= Блок 6: стоимость (тёмная тема секции) ================= */
.cost__grid {
  align-items: stretch;
}

.cost__aside {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-48);
}

.cost__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.note {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16);
  border: var(--border-width-default) solid var(--color-border-default);
  background: var(--color-bg-muted);
}

.cost-card {
  grid-column: 6 / span 7;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: var(--space-24);
  border-radius: var(--radius-block);
  background: var(--color-bg-muted);
}

.cost-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.cost-card__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
}

.cost-card__badge {
  padding: var(--space-8);
  border-radius: var(--radius-button);
  background: var(--color-bg-primary);
  color: var(--color-text-on-primary);
  white-space: nowrap;
}

.cost-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.cost-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.cost-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.cost-item__name {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.bar {
  height: var(--space-8); /* в макете 6, вне шкалы — вверх до 8 */
  overflow: hidden;
  background: var(--color-border-default);
}

.bar__fill {
  height: 100%;
  background: currentColor;
}

/* Доля полоски — процент от суммы, из данных макета */
.bar__fill--41 { width: 41%; }
.bar__fill--30 { width: 30%; }
.bar__fill--15 { width: 15%; }
.bar__fill--14 { width: 14%; }

.cost-item--1 { color: var(--color-bg-primary); }
.cost-item--2 { color: var(--color-text-default); }
.cost-item--3 { color: var(--color-icon-secondary); }
.cost-item--4 { color: var(--color-text-default); }

.cost-item__label {
  color: var(--color-text-default);
}

.cost-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  padding-top: var(--space-16);
  border-top: var(--border-width-default) solid var(--color-border-default);
}

.cost-card__total {
  color: var(--color-text-accent);
  white-space: nowrap;
}


/* ================= Подвал (компонент Figma «Footer», 24162:969) ================= */
.site-footer {
  padding: var(--space-40) var(--grid-margin-x);
  background: var(--color-bg-default);
  color: var(--color-text-default);
}

.site-footer__container {
  max-width: var(--grid-container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.site-footer__top {
  border-bottom: var(--border-width-default) solid var(--color-border-default);
}

.site-footer__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--space-24); }
.site-footer__col--links1 { grid-column: 5 / span 3; }
.site-footer__col--links2 { grid-column: 8 / span 2; }
.site-footer__newsletter { grid-column: 10 / span 3; }

.site-footer__group { display: flex; flex-direction: column; gap: var(--space-16); }
.site-footer__about { max-width: var(--grid-column-4); }
.site-footer__contacts { display: flex; flex-direction: column; gap: var(--space-4); }

.site-footer__col { display: flex; flex-direction: column; gap: var(--space-24); }
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-8); }
.site-footer__list a:hover { color: var(--color-text-primary); }

.site-footer__form { display: flex; gap: var(--space-8); }
.site-footer__form .field { flex: 1; min-width: 0; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-80);
  padding-block: var(--space-8);
}

.site-footer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24); }


/* ================= FAQ (Figma 24109:665) ================= */
.faq__aside {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-bottom: var(--space-96);
}

.faq__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }

.faq__list { grid-column: 6 / span 7; }

/* ================= Форма-заявка (Figma 24109:712) ================= */
.section--form { padding-block: var(--space-96); }

.brief {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-40) var(--space-64);
  border-radius: var(--radius-container);
  background: var(--color-bg-muted);
}

.brief__head { max-width: var(--grid-column-2); align-items: center; text-align: center; }

.brief__form {
  width: 100%;
  max-width: 672px; /* ds-allow: ширина формы из макета, в шкалах такой нет */
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.brief__group { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.brief__group legend { padding: 0; margin-bottom: var(--space-8); }

.brief__row { display: flex; gap: var(--space-16); }
.brief__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }

.brief__note { text-align: center; }