/* =========================================================
   Fort Zox — основные стили (десктоп, макет 1530px)
   Единицы: rem. 1rem = 10px на ширине ≥1530px,
   на 1100–1529px масштабируется пропорционально (см. media.css)
   ========================================================= */

/* ---------- Шрифты: Inter v4.1 (SIL OFL, fonts/Inter-LICENSE.txt) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Переменные (из Figma) ---------- */
:root {
  --font-main:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --color-white: #ffffff;
  --color-red: #c51d25;
  --color-red-hover: #a8161d;
  --color-graphite: #1a1d20;
  --color-dark: #0b0d0e;
  --color-gray: #c5c9cc;
  --color-line: #d9dde0;
  --color-line-dark: rgba(217, 221, 224, 0.2);
  --color-surface: #f3f4f5;
  --color-text: #1a1d20;
  --color-text-muted: rgba(26, 29, 32, 0.6);
  --color-white-muted: rgba(255, 255, 255, 0.6);

  --page-width: 153rem;
  --aside: 43.8rem; /* левая колонка секций */
  --gutter: 10.5rem; /* боковое поле */

  --transition: 0.3s ease;
}

/* ---------- Reset поверх normalize ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 10px; /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  min-width: 32rem;
  font-family: var(--font-main);
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    opacity var(--transition);
}

img.is-broken {
  visibility: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  border-radius: 0;
}

/* ---------- Утилиты ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
}

.main {
  flex-grow: 1;
}

.muted {
  color: var(--color-text-muted);
}

/* ---------- Типографика ---------- */
.h1 {
  font-size: 5.2rem;
  font-weight: 500;
  line-height: 1.2;
}
.h2 {
  font-size: 4.4rem;
  font-weight: 500;
  line-height: 1.1;
  max-width: 88rem;
}
.h3 {
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1.1;
}
.h4 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}
.subtitle {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
}
.body-l {
  font-size: 1.8rem;
  line-height: 1.3;
}
.body-m {
  font-size: 1.6rem;
  line-height: 1.3;
}
.body-s {
  font-size: 1.4rem;
  line-height: 1.4;
}
.caption {
  font-size: 1.3rem;
  line-height: 1.2;
}
.caption-bold {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}
.number {
  font-size: 12.8rem;
  line-height: 1.2;
}

.h2--white {
  color: var(--color-white);
}

.label {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-red);
}

.caption-text {
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 3rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn--lg {
  padding: 2rem 3rem;
}

.btn--red {
  color: var(--color-white);
  background-color: var(--color-red);
}

.btn--red:hover {
  background-color: var(--color-red-hover);
}

.btn--outline-dark {
  color: var(--color-white);
  background-color: var(--color-graphite);
  border-color: var(--color-line-dark);
}

.btn--outline-dark:hover {
  border-color: var(--color-white);
}

.btn--outline {
  padding: 2rem 7rem;
  color: var(--color-text);
  border-color: var(--color-line);
}

.btn--outline:hover {
  color: var(--color-white);
  background-color: var(--color-graphite);
  border-color: var(--color-graphite);
}

.btn--wide {
  width: 100%;
}

/* ---------- Тег ---------- */
.tag {
  display: inline-flex;
  padding: .8rem 1rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-white);
  border: 1px solid var(--color-line-dark);
  border-radius: 10rem;
}

/* =========================================================
   ПЕРВЫЙ ЭКРАН
   ========================================================= */
.hero {
  background-color: var(--color-graphite);
  color: var(--color-white);
}

.hero__inner {
  display: flex;
  min-height: 50rem;
}

.hero__aside {
  flex-shrink: 0;
  width: var(--aside);
  border-right: 1px solid var(--color-line-dark);
}

.hero__crumbs {
  width: 42.1rem;
  height: 19.1rem;
  padding: 3.2rem 0 0 10.6rem;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-white-muted);
  border-bottom: 1px solid var(--color-line-dark);
}

.hero__crumbs a:hover {
  color: var(--color-white);
}

.hero__lead {
  width: 42.1rem;
  padding: 2.8rem 0 2.8rem 10.4rem;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-white-muted);
  border-bottom: 1px solid var(--color-line-dark);
}

.hero__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.5rem 0 3.4rem 10.3rem;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  padding: 12.9rem 0 0 11rem;
}

.hero__title {
  max-width: 82rem;
  font-size: 5.2rem;
  font-weight: 500;
  line-height: 1.15;
}

.hero__title .muted {
  color: var(--color-white-muted);
}

.hero__btns {
  display: flex;
  gap: 1.4rem;
}

/* =========================================================
   СЕКЦИИ С ЛЕВОЙ КОЛОНКОЙ (Задача, Проектирование, Применение)
   ========================================================= */
.section-split {
  border-bottom: 1px solid var(--color-line);
}

.section-split__inner {
  display: flex;
}

.section-split__aside {
  flex-shrink: 0;
  width: var(--aside);
  padding-left: var(--gutter);
  border-right: 1px solid var(--color-line);
}

.section-split__main {
  flex-grow: 1;
  min-width: 0;
}

.section-split__spacer {
  border-bottom: 1px solid var(--color-line);
}

.section-split__spacer--task {
  height: 27.9rem;
}
.section-split__spacer--usage {
  height: 28.2rem;
}

.section-head--bordered {
  border-bottom: 1px solid var(--color-line);
}

.feature-list__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2.8rem 0 2.8rem 1.3rem;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.feature-list__item:not(:last-child){
  border-bottom: 1px solid var(--color-line);
}

.feature-list__item strong,
.feature-list__title {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.feature-list__item strong{
  color: var(--graphite-card);
}

.feature-list__text {
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* ---------- Задача ---------- */
.task__head {
  gap: 1.3rem;
  padding: 12rem 0 2.9rem 11rem;
}

.task__content {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding: 4rem 0 0 11rem;
}

.task__text {
  max-width: 40rem;
}

.levels {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  width: 87.7rem;
  height: 31.5rem;
  padding-left: 0.1rem;
  overflow: hidden;
}

.levels__item {
  position: relative;
  flex-shrink: 0;
  width: 21rem;
  padding: 1.5rem 1.5rem 0;
  overflow: hidden;
  background-color: var(--color-line);
}

.levels__item--1 {
  height: 22.6rem;
}
.levels__item--2 {
  height: 27.5rem;
  width: 21.8rem;
  padding: 1.8rem 1.6rem 0;
}
.levels__item--3 {
  height: 30.7rem;
  color: var(--color-white);
  padding-top: 1.2rem;
}
.levels__item--4 {
  height: 19.5rem;
  width: 20.9rem;
}

.levels__title {
  position: relative;
  z-index: 1;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
}

.levels__text {
  position: relative;
  z-index: 1;
  max-width: 15.5rem;
  margin-top: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-muted);
}

.levels__item--1 .levels__text {
  max-width: 12rem;
}
.levels__item--2 .levels__text {
  max-width: 13.5rem;
}
.levels__item--3 .levels__text {
  max-width: 15.3rem;
  color: var(--color-white-muted);
}
.levels__item--4 .levels__text {
  max-width: 15.6rem;
}

.levels__num {
  position: absolute;
  bottom: -2.9rem;
  left: -5rem;
  font-size: 12.8rem;
  line-height: 1.2;
  white-space: nowrap;
}

.levels__item--2 .levels__num {
  left: -4.3rem;
}
.levels__item--3 .levels__num {
  left: -5.3rem;
}

.levels__bg {
  position: absolute;
  top: -0.8rem;
  left: -1.6rem;
  width: 25.3rem;
  max-width: none;
  height: 32.5rem;
  object-fit: cover;
}

.levels__line {
  position: relative;
  z-index: 1;
  width: 3rem;
  margin-top: 2.5rem;
}

/* =========================================================
   СОСТАВ
   ========================================================= */
.sostav__inner {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding: 14.1rem 2rem 0;
}

.sostav__head {
  gap: 1.3rem;
  padding-left: 9.8rem;
}

.scheme {
  position: relative;
  height: 73.9rem;
  overflow: hidden;
  background-color: #d6d7d8;
}

.scheme__img {
  position: absolute;
  top: 2.5%;
  left: 13.02%;
  width: 70.67%;
  max-width: none;
  height: 94.99%;
}

.scheme__leader {
  position: absolute;
  max-width: none;
}

.scheme__leader--1 {
  left: 30.7rem;
  top: 59.5rem;
  width: 11.25rem;
  height: 4.1rem;
}
.scheme__leader--2 {
  left: 46.4rem;
  top: 8.6rem;
  width: 11.25rem;
  height: 4.1rem;
}
.scheme__leader--3 {
  left: 77.9rem;
  top: 6rem;
  width: 11.25rem;
  height: 4.1rem;
}
.scheme__leader--4 {
  left: 59.7rem;
  top: 54.15rem;
  width: 4.1rem;
  height: 11.25rem;
}
.scheme__leader--5 {
  left: 91.2rem;
  top: 52rem;
  width: 4.1rem;
  height: 11.25rem;
}

.scheme__callout {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 1.9rem;
  color: var(--color-red);
  white-space: nowrap;
}

.scheme__num {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.scheme__text {
  padding-top: 0.2rem;
  font-size: 1.6rem;
  line-height: 1.3;
}

.scheme__callout--1 {
  left: 5.6rem;
  top: 62.1rem;
}
.scheme__callout--2 {
  left: 61.6rem;
  top: 4.6rem;
  gap: 2rem;
}
.scheme__callout--3 {
  left: 23.6rem;
  top: 7.3rem;
  gap: 2rem;
}
.scheme__callout--4 {
  left: 56.9rem;
  top: 66.4rem;
  gap: 0.6rem;
}
.scheme__callout--5 {
  left: 95rem;
  top: 63.6rem;
}
.scheme__callout--5 .scheme__text {
  padding-top: 0;
}

/* =========================================================
   ЖЕРТВЕННАЯ ЛОГИКА
   ========================================================= */
.sacrifice__inner {
  padding: 0 2rem;
}

.sacrifice__box {
  display: flex;
  flex-direction: column;
  gap: 4.7rem;
  padding: 13.1rem 8.5rem 9.3rem;
  background-color: var(--color-graphite);
}

.sacrifice__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.sacrifice__btn {
  width: 34.3rem;
}

.sacrifice__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dark-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 20rem;
  padding: 2rem;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-white-muted);
  border: 1px solid var(--color-line-dark);
}

.dark-card__num {
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-white-muted);
}

.dark-card__title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
}

.dark-card strong{
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
}

.dark-card__text {
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--color-white-muted);
}

/* =========================================================
   ПРОЕКТИРОВАНИЕ
   ========================================================= */
.design__aside {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-top: 35.5rem;
  padding-bottom: 5rem;
}

.design__subtitle {
  max-width: 30rem;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.design__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 31rem;
  color: var(--color-text-muted);
}

.design__list li {
  position: relative;
  padding-left: 1.6rem;
}

.design__list li::before {
  content: "•";
  position: absolute;
  left: 0;
}

.design__main {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  padding: 15.3rem 0 3.8rem 11rem;
}

.stages {
  position: relative;
  width: 87.7rem;
  height: 35.2rem;
  background-color: rgba(217, 221, 224, 0.2);
}

.stages__item {
  position: absolute;
  display: flex;
  flex-direction: column;
}

.stages__num {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-gray);
}

.stages__num--active {
  font-weight: 400;
  color: var(--color-red);
}

.stages__title {
  position: absolute;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* позиции номеров / заголовков из макета */
.stages__item--1 {
  left: 5rem;
  top: 4.2rem;
}
.stages__item--1 .stages__title {
  top: 4.7rem;
}
.stages__item--2 {
  left: 39.8rem;
  top: 4rem;
}
.stages__item--2 .stages__title {
  top: 4.7rem;
}
.stages__item--3 {
  left: 72.4rem;
  top: 4.2rem;
}
.stages__item--3 .stages__title {
  left: -0.1rem;
  top: 4.7rem;
}
.stages__item--4 {
  left: 5rem;
  top: 20.9rem;
}
.stages__item--4 .stages__title {
  top: 4.7rem;
  width: 17.4rem;
  white-space: normal;
}
.stages__item--5 {
  left: 39.8rem;
  top: 20.7rem;
}
.stages__item--5 .stages__title {
  top: 4.7rem;
}

.stages__line {
  position: absolute;
  max-width: none;
  height: 0.2rem;
}

.stages__line--1 {
  left: 11.3rem;
  top: 5.1rem;
  width: 26.5rem;
}
.stages__line--2 {
  left: 11.3rem;
  top: 21.8rem;
  width: 26.5rem;
}
.stages__line--3 {
  left: 0;
  top: 21.8rem;
  width: 3.1rem;
}
.stages__line--4 {
  left: 45.4rem;
  top: 5.1rem;
  width: 25.9rem;
}
.stages__line--5 {
  left: 45.4rem;
  top: 21.8rem;
  width: 25.9rem;
}
.stages__line--6 {
  left: 78.9rem;
  top: 5.1rem;
  width: 8.8rem;
}

/* =========================================================
   ПРИМЕНЕНИЕ
   ========================================================= */
.usage__aside {
  padding-left: 9.2rem;
}

.usage__head {
  padding: 13rem 0 2.7rem 11rem;
}

.usage__content {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  width: 98.7rem;
  padding: 4.6rem 0 14.2rem 11rem;
}

.objects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem 1rem;
}

.object {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 16.7rem;
  padding: 0 1.3rem 1.1rem 1.6rem;
  overflow: hidden;
  border: 1px solid var(--color-line);
}

.object--accent {
  border: none;
  background-image: repeating-linear-gradient(to right, var(--signal-red) 0, var(--signal-red) 10px, transparent 10px, transparent 20px), repeating-linear-gradient(to bottom, var(--signal-red) 0, var(--signal-red) 10px, transparent 10px, transparent 20px), repeating-linear-gradient(to bottom, var(--signal-red) 0, var(--signal-red) 10px, transparent 10px, transparent 20px);
  background-size: 100% .1rem, .1rem 100%, .1rem 100%;
  background-position: bottom left, top left, top right;
  background-repeat: no-repeat;
}

.object--dashed {
  border-style: dashed;
}

.object__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9.8rem;
  object-fit: cover;
}

.object__name {
  font-size: 1.8rem;
  line-height: 1.3;
}

/* =========================================================
   СВЯЗАННЫЕ РЕШЕНИЯ
   ========================================================= */
.related {
  display: flex;
  flex-direction: column;
  gap: 5.1rem;
}

.related__top {
  border-bottom: 1px solid var(--color-line);
}

.related__head {
  display: flex;
  align-items: stretch;
}

.related__caption {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  width: var(--aside);
  padding: 0 2.4rem 4.8rem var(--gutter);
  border-right: 1px solid var(--color-line);
}

.related__title {
  padding: 5.2rem 0 4.8rem 11rem;
}

.related__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0 2rem;
}

.solution {
  position: relative;
  height: 44.5rem;
  padding: 2rem 2rem 1.6rem;
  overflow: hidden;
  background-color: var(--color-line);
}

.solution__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.solution__pic {
  position: absolute;
  overflow: hidden;
}

.solution__pic img {
  position: absolute;
  max-width: none;
}

.solution__pic--mats-1 {
  top: -11.9rem;
  right: -7.9rem;
  width: 43.1rem;
  height: 44.5rem;
}

.solution__pic--mats-1 img,
.solution__pic--mats-2 img {
  width: 149.54%;
  height: 96.56%;
}

.solution__pic--mats-1 img {
  left: 4.73%;
  top: -16.72%;
}

.solution__pic--mats-2 {
  top: -0.1rem;
  right: 0;
  width: 43.1rem;
  height: 44.5rem;
}

.solution__pic--mats-2 img {
  left: 6.8%;
  top: -9.22%;
}

.solution__pic--camera {
  top: -1.9rem;
  right: -1.6rem;
  width: 43.1rem;
  height: 46.4rem;
}

.solution__pic--camera img {
  left: -173.09%;
  top: 0;
  width: 306.06%;
  height: 189.21%;
}

.solution__label,
.solution__title,
.solution__text,
.solution__btn {
  position: relative;
  z-index: 1;
}

.solution__title {
  max-width: 22rem;
  margin-top: 2.6rem;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.solution__text {
  max-width: 27.2rem;
  margin-top: 1.2rem;
  color: var(--color-text-muted);
}

.solution__btn {
  position: absolute;
  left: 2rem;
  bottom: 1.6rem;
  width: 26.6rem;
  border-color: rgba(0, 0, 0, 0.2);
}

/* =========================================================
   РЕЗУЛЬТАТ
   ========================================================= */
.result__inner {
  display: flex;
  flex-direction: column;
  gap: 4.3rem;
  padding: 15.4rem 0 10rem;
}

.result__head {
  padding-left: 55rem;
}

.mosaic {
  position: relative;
  width: 132rem;
  height: 125.7rem;
  margin-left: var(--gutter);
}

.r-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 28.3rem;
  padding: 2rem;
  border: 1px solid var(--color-line);
}

.r-card__title {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.r-card__text {
  margin-top: auto;
  padding-top: 1.8rem;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-line);
}

.r-card--stage {
  left: 0;
  top: 0;
  width: 32.3rem;
}
.r-card--stage .r-card__title {
  max-width: 19.2rem;
}
.r-card--stage .r-card__text {
  padding-top: 1.8rem;
}

.r-card--continuity {
  left: 44.3rem;
  top: 34.2rem;
  width: 43.3rem;
}
.r-card--continuity .r-card__title {
  max-width: 22.6rem;
}
.r-card--continuity .r-card__text {
  max-width: 41rem;
}
.r-card--continuity .r-card__text span {
  display: block;
}

.r-card--build {
  left: 0;
  top: 69.5rem;
  width: 32.3rem;
  padding-left: 2.9rem;
}
.r-card--build .r-card__title {
  max-width: 26.2rem;
}

.r-card--repair {
  left: 99.5rem;
  top: 69.5rem;
  width: 32.4rem;
  padding: 2.4rem 1.8rem 1.8rem 1.7rem;
}

/* Меньше риск — большая карточка с графиком */
.r-card--risk {
  left: 44.3rem;
  top: 0;
  width: 87.7rem;
  padding: 2rem 2.7rem;
  background-color: var(--color-line);
  border: none;
}

.r-card__desc {
  max-width: 33.9rem;
  margin-top: 1.2rem;
  color: var(--color-text-muted);
}

.risk-stat {
  position: absolute;
  left: 3rem;
  top: 20.3rem;
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  border-left: 1px solid var(--color-graphite);
}

.risk-stat strong,
.risk-stat__value {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-red);
}

.risk-stat span,
.risk-stat__caption {
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--color-text-muted);
}

.risk-chart {
  position: absolute;
  inset: 0;
}

.risk-chart__graph {
  position: absolute;
  left: 22.2rem;
  top: 5.4rem;
  width: 52.7rem;
  max-width: none;
  height: 20.5rem;
}

.risk-chart__dot {
  position: absolute;
  left: 52.1rem;
  width: 1.2rem;
  height: 1.2rem;
}

.risk-chart__dot--high {
  top: 5.9rem;
}
.risk-chart__dot--low {
  top: 16.5rem;
}

.risk-chart__note {
  position: absolute;
  display: flex;
  flex-direction: column;
  font-size: 1.3rem;
  line-height: 1.2;
  white-space: nowrap;
}

.risk-chart__note b {
  font-weight: 600;
}

.risk-chart__note span {
  color: var(--color-text-muted);
}

.risk-chart__note--high {
  left: 64.7rem;
  top: 6rem;
}
.risk-chart__note--low {
  left: 71rem;
  top: 16.3rem;
}

/* Единая ответственность — карточка с картинкой */
.r-card--single {
  left: 44.2rem;
  top: 69.5rem;
  width: 43.3rem;
  height: 56.2rem;
  padding: 2rem 3.1rem;
  overflow: hidden;
  border: none;
}

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

.r-card__cover {
  position: absolute;
  left: 2.4rem;
  top: 1.9rem;
  width: 24.2rem;
  height: 9rem;
  background: linear-gradient(to left, #d9dbdd, #d5d8d9 50%, #ced2d3);
  filter: blur(2.15px);
}

.r-card--single .r-card__title,
.r-card--single .r-card__sub {
  position: relative;
  max-width: 23.9rem;
}

.r-card__sub {
  margin-top: 1.2rem;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* =========================================================
   ДОКУМЕНТЫ
   ========================================================= */
.docs__inner {
  position: relative;
  height: 91.3rem;
}

.docs__line {
  position: absolute;
  left: 0;
  top: 22.4rem;
  width: 35.1rem;
  border-top: 1px solid var(--color-line);
}

.docs__timeline {
  position: absolute;
  left: 54rem;
  top: 5.8rem;
  width: 1.6rem;
  height: 78.4rem;
  max-width: none;
}

.docs__left .doc-item {
  position: absolute;
  left: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.doc-item--1 {
  top: 25.8rem;
}
.doc-item--2 {
  top: 48rem;
}
.doc-item--3 {
  top: 70.2rem;
}

.doc-item__text {
  margin-top: 1.2rem;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.doc-item--1 .doc-item__text {
  max-width: 29.7rem;
}
.doc-item--3 .doc-item__text {
  max-width: 42rem;
}

.btn--doc {
  width: 31.1rem;
  margin-top: 2.4rem;
}

.doc-item--1 .btn--doc {
  margin-top: 0.5rem;
}

.docs__right {
  position: absolute;
  left: 59.8rem;
  top: 6.5rem;
}

.docs__head {
  gap: 2.4rem;
}

.docs__block {
  position: absolute;
  left: 0;
}

.docs__block--class {
  top: 19.3rem;
  width: 53rem;
}
.docs__block--norm {
  top: 42.1rem;
  width: 66rem;
}

.docs__list {
  margin-top: 1.2rem;
  padding-left: 2.7rem;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  list-style: disc;
}

.docs__norm {
  font-size: 1.8rem;
  line-height: 1.3;
}

.docs__norm b {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.docs__note {
  max-width: 40.9rem;
  margin-top: 1.2rem;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.docs__photo {
  position: absolute;
  right: 0;
  top: 66.8rem;
  width: 98.2rem;
  height: 24.6rem;
  overflow: hidden;
}

.docs__photo img {
  position: absolute;
  left: 0;
  top: -28.32%;
  width: 100%;
  max-width: none;
  height: 149.7%;
}

/* =========================================================
   ЗАГОЛОВОК С ПОДПИСЬЮ СЛЕВА (Вопросы, Что нужно)
   ========================================================= */
.split-head {
  display: flex;
  align-items: flex-end;
}

.split-head__caption {
  flex-shrink: 0;
  width: 44.3rem;
  padding-right: 20.3rem;
}

.need__caption {
  width: 44.5rem;
  padding-right: 10.5rem;
}

/* =========================================================
   ВОПРОСЫ
   ========================================================= */
.faq__inner {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  padding: 18.3rem var(--gutter) 8rem;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--color-line);
}

.faq-item__head {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.8rem 2.8rem;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}

.faq-item__head::-webkit-details-marker {
  display: none;
}

.faq-item__num {
  flex-shrink: 0;
  width: 41.9rem;
  color: var(--color-text-muted);
}

.faq-item__q {
  flex-grow: 1;
}

.faq-item__icon {
  flex-shrink: 0;
  font-size: 3.6rem;
  line-height: 1.1;
  transition: transform var(--transition);
}

.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__head:hover .faq-item__q {
  color: var(--color-red);
}

.faq-item__body {
  padding: 0 2.8rem 2.8rem calc(2.8rem + 41.9rem + 1.6rem);
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--color-text-muted);
}

/* =========================================================
   ЧТО НУЖНО ДЛЯ РАСЧЁТА
   ========================================================= */
.need__inner {
  display: flex;
  flex-direction: column;
  gap: 6.3rem;
  padding: 0 var(--gutter) 10rem;
}

.need__cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.need-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 16.6rem;
  padding: 2rem;
  font-size: 1.8rem;
  line-height: 1.3;
  background-color: var(--color-white);
  border: 1px solid var(--color-line);
}

.need-card__num {
  color: var(--color-text-muted);
}

/* =========================================================
   КОНСУЛЬТАЦИЯ И ФОРМА
   ========================================================= */
.consult {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.consult__inner {
  display: flex;
  align-items: flex-start;
  gap: 7.9rem;
  min-height: 72.5rem;
  padding: 7.7rem 16.6rem 7.3rem var(--gutter);
}

.consult__card {
  position: relative;
  flex-shrink: 0;
  width: 64.9rem;
  height: 57.5rem;
  overflow: hidden;
  background-color: var(--color-graphite);
}

.consult__circle {
  position: absolute;
  width: 46.8rem;
  height: 46.8rem;
  max-width: none;
}

.consult__circle--1 {
  left: -10.1rem;
  top: 42.2rem;
}
.consult__circle--2 {
  left: 60.9rem;
  top: -3.4rem;
}
.consult__circle--3 {
  left: -20.1rem;
  top: 37.9rem;
}
.consult__circle--4 {
  left: 50.9rem;
  top: -7.7rem;
}

.consult__photo {
  position: absolute;
  left: 33rem;
  top: 14.2rem;
  width: 31.9rem;
  height: 43.3rem;
  object-fit: cover;
}

.consult__icon {
  position: absolute;
  max-width: none;
}

.consult__icon--plus {
  left: 43rem;
  top: 27rem;
  width: 2.2rem;
  height: 2.34rem;
}
.consult__icon--target {
  left: 44.2rem;
  top: 8.1rem;
  width: 2.55rem;
  height: 2.75rem;
}

.consult__label {
  position: absolute;
  left: 3.8rem;
  top: 3.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
}

.consult__title {
  position: absolute;
  left: 3.8rem;
  top: 10.9rem;
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1.1;
}

.consult__text {
  position: absolute;
  left: 3.8rem;
  top: 21.3rem;
  width: 36rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white-muted);
}

/* ---------- Форма ---------- */
.form {
  display: grid;
  grid-template-columns: repeat(2, 25.5rem);
  gap: 1.2rem 2.1rem;
  padding-top: 0.3rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 1.4rem;
  line-height: 1.4;
}

.field__input {
  width: 100%;
  height: 4.9rem;
  padding: 1.4rem 1.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid var(--color-line-dark);
  outline: none;
  transition: border-color var(--transition);
}

.field__input::placeholder {
  color: var(--color-white-muted);
  opacity: 1;
}

.field__input:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

.field__select {
  appearance: none;
  padding-right: 4rem;
  color: var(--color-white-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%23fff' stroke-opacity='.6' stroke-width='1.5' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 1.2rem;
  cursor: pointer;
}

.field__select.is-filled {
  color: var(--color-white);
}

.field__select option {
  color: var(--color-text);
}

.field__textarea {
  height: 10.8rem;
  resize: vertical;
}

.form__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.3rem;
  padding-top: 0.2rem;
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkbox__box {
  position: relative;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--color-line-dark);
  transition:
    border-color var(--transition),
    background-color var(--transition);
}

.checkbox__input:checked + .checkbox__box {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.checkbox__input:checked + .checkbox__box::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 0.3rem;
  width: 0.6rem;
  height: 1.2rem;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox__input:focus-visible + .checkbox__box {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

.checkbox__text {
  max-width: 28.3rem;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--color-white-muted);
}

.form__submit {
  flex-shrink: 0;
}