/* ==========================================================================
   Floors — лендинг полимерных полов BULK
   Десктоп — по макету 1440; адаптив: 1180 / 1000 / 640
   ========================================================================== */

@font-face { font-family: "Geologica"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/geologica-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/geologica-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/geologica-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #15221f;
  --ink-2: #091715;
  --muted: #69746e;
  --muted-2: #575656;
  --line: #d9ded7;
  --line-2: #bec2bd;
  --line-3: #e5e7ea;
  --bg-grey: #eeeeee;
  --bg-cream: #f5f5f0;
  --bg-soft: #f3f4f4;
  --white: #ffffff;
  --gold: #f9ae17;
  --gold-2: #f98417;
  --gold-text: #ffbd3f;
  --gold-dark: #ec9d0f;
  --navy-1: #061d36;
  --navy-2: #1861a3;
  --navy-card: #0e3559;
  --on-dark: #b8c4bc;
  --on-dark-2: #c6d4e0;
  --teal: #33776e;
  --grad-gold: linear-gradient(166deg, var(--gold) 0%, var(--gold-2) 100%);
  --grad-navy: linear-gradient(90deg, var(--navy-1) 0%, var(--navy-2) 100%);

  --font: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(16px, 5vw, 72px);           /* боковой отступ контента */
  --frame: clamp(8px, 1.4vw, 20px);        /* отступ «рамочных» секций */
  --panel-max: 1400px;                     /* ширина скруглённых панелей и шапки */
  --hero-pad: 20px;                        /* внутренний отступ фото первого экрана */
  /* Отступ внутри панели так, чтобы её контент начинался на той же линии, что и .container.
     100% — ширина родителя панели; панель = min(100%, --panel-max). */
  --pad-panel: max(8px, calc(var(--gut) - var(--frame)), calc((min(100%, var(--panel-max)) - var(--maxw)) / 2));
  /* То же внутри первого экрана (он сам вложен с отступом --hero-pad) */
  --pad-hero: max(8px, calc(var(--gut) - var(--frame) - var(--hero-pad)), calc((min(100%, var(--panel-max) - 2 * var(--hero-pad)) - var(--maxw)) / 2));
  --sec: clamp(48px, 6.5vw, 72px);         /* вертикальный ритм секций */
  --maxw: 1296px;
  --r-lg: clamp(20px, 2.1vw, 30px);
  --r-md: 16px;
  --r-sm: 12px;
  --r-btn: 8px;
  --h2: clamp(28px, 1.35rem + 2.1vw, 48px);
  --h2-lh: 1.125;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--white); font-variation-settings: "CRSV" 0, "SHRP" 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
hr { border: 0; height: 1px; background: var(--line); margin: 0; width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- Типографика ---------- */
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; color: var(--muted); margin-bottom: 32px; }
.eyebrow--gold { color: var(--gold-text); }
.eyebrow--dark { color: #000; }
.h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 400; letter-spacing: -.005em; color: var(--ink); }
.h2--light { color: #fff; }
.h2--wide { max-width: 800px; }
.h3 { font-size: clamp(24px, 1.2rem + 1vw, 32px); line-height: 1.34; font-weight: 400; }
.h4 { font-size: clamp(17px, 1rem + .3vw, 20px); font-weight: 700; color: var(--ink-2); line-height: 1.3; }
.h5 { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.lead-text { font-size: 17px; line-height: 26px; color: var(--muted); }
.lead-text--light { color: #fff; }
.body-lg { font-size: 18px; line-height: 27px; color: #000; }
.muted { color: var(--muted); font-size: 14px; }
.muted-2 { color: var(--muted-2); }
.small { font-size: 13px; line-height: 1.4; }
.note { font-size: 13px; line-height: 18px; color: var(--muted); margin-top: 20px; }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 24px; border-radius: var(--r-btn); border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--grad-gold); color: #fff; font-weight: 500; font-size: 16px; }
.btn--primary:hover { filter: brightness(1.05); box-shadow: 0 8px 22px -10px rgba(249, 132, 23, .8); }
.btn--gold { background: var(--gold); color: var(--ink); font-weight: 500; font-size: 16px; }
.btn--gold:hover { filter: brightness(1.04); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; font-weight: 500; font-size: 16px; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--outline-light { border-color: #fff; color: #fff; background: transparent; font-weight: 500; font-size: 16px; border-radius: 11px; }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn--light { background: #fff; border-color: #d2d0d0; color: var(--ink-2); }
.btn--light:hover { border-color: var(--ink-2); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn--lg { min-height: 56px; padding-inline: 30px; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn--xs { min-height: 28px; padding: 6px 20px; font-size: 12px; text-transform: uppercase; }
.btn--block { width: 100%; }
.btn--caps { text-transform: uppercase; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }


/* ---------- Первый экран ---------- */
.hero-wrap { padding: var(--frame); }
.hero { position: relative; isolation: isolate; border-radius: 20px; overflow: hidden; min-height: 707px; padding: var(--hero-pad); display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; max-width: var(--panel-max); margin-inline: auto; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,16,32,.1) 0%, rgba(3,16,32,.0) 30%, rgba(3,16,32,.45) 100%); pointer-events: none; }
.hero__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-inline: calc(var(--pad-hero) - 0px); }
.hero__main { max-width: 1068px; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.hero__eyebrow { font-size: 16px; font-weight: 600; text-transform: uppercase; }
.hero__title { font-size: clamp(32px, 1.2rem + 3.4vw, 62px); line-height: 1.08; font-weight: 600; text-transform: uppercase; max-width: 920px; }
.hero__text { font-size: 16px; line-height: 1.46; max-width: 750px; }
.price-chip { display: inline-flex; align-self: flex-start; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: 100px; background: rgba(0,0,0,.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(249,174,23,.5); }
.price-chip strong { color: var(--gold); font-size: 14px; font-weight: 500; }
.price-chip span { color: rgba(255,255,255,.6); font-size: 12px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__cards { display: flex; flex-direction: column; gap: 16px; width: 375px; flex-shrink: 0; }
.glass-card { display: flex; gap: 10px; padding: 20px; border-radius: 19px; background: rgba(0,0,0,.3); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); color: #fff; text-decoration: none; transition: background-color .2s ease; }
.glass-card:hover { background: rgba(0,0,0,.42); }
.glass-card__img { width: 113px; flex-shrink: 0; border-radius: 16px; overflow: hidden; }
.glass-card__img img { width: 100%; height: 100%; object-fit: cover; }
.glass-card__body { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0; }
.glass-card__title { font-size: 15px; line-height: 1.1; }
.glass-card__text { font-size: 11px; font-weight: 300; line-height: 1.1; }
.glass-card__prefix { font-size: 16px; line-height: 1; }
.glass-card__num { display: flex; align-items: flex-start; gap: 6px; }
.glass-card__num b { font-size: 61px; line-height: .8; font-weight: 400; }
.glass-card__num span { font-size: 15px; line-height: 1; }
.glass-card__more { color: var(--gold); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Факты ---------- */
.facts { background: var(--bg-cream); padding-block: 40px; }
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fact__title { font-size: clamp(20px, 1rem + .6vw, 25px); line-height: 1.2; font-weight: 500; }
.fact__text { font-size: 14px; line-height: 19px; color: var(--muted); margin-top: 5px; }

/* ---------- Секции и рамки ---------- */
.section { padding-block: var(--sec); }
.section--white { background: var(--white); }
.section--grey { background: var(--bg-grey); }
.section--cream { background: var(--bg-cream); }
.frame { padding: var(--frame); }
.frame--white { background: var(--white); padding-bottom: calc(var(--frame) + 40px); }
.frame--grey { background: var(--bg-grey); }
.frame--cream { background: var(--bg-cream); }
.panel { max-width: var(--panel-max); margin-inline: auto; border-radius: var(--r-lg); padding: clamp(24px, 5vw, 72px) var(--pad-panel); }
.panel--blue { background: var(--grad-navy); color: #fff; }
.panel--white { background: #fff; }
.panel--grey { background: var(--bg-grey); padding-block: clamp(16px, 4.2vw, 60px); }
.panel--certs { padding-block: clamp(24px, 4.2vw, 56px); }
.panel > * { width: 100%; max-width: var(--maxw); margin-inline: auto; }

.sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 48px; margin-bottom: 32px; }
.sec-head > .h2 { flex: 1 1 auto; min-width: 0; }
.sec-head > .lead-text { flex: 0 0 min(448px, 36%); }
.sec-head--stack { flex-direction: column; gap: 10px; }
.sec-head--stack > .h2 { max-width: none; }
.sec-head--stack > .lead-text { flex: none; max-width: 900px; }
.panel--blue .sec-head:not(.sec-head--stack) { align-items: center; }

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

.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; border-top: 1px solid #c9c9c9; padding-top: 32px; margin-top: 32px; }
#steps .cta-row { border-top: 0; padding-top: 0; }
.cta-row__text { font-size: 21px; line-height: 28px; max-width: 910px; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 80px; align-items: start; }
.split__text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.split__text .eyebrow { margin-bottom: 0; }

.card { background: #fff; border-radius: var(--r-md); padding: clamp(20px, 2.3vw, 32px); }
.rule { background: var(--line); margin-block: 40px; }

/* ---------- Объекты ---------- */
.objects { row-gap: 32px; }
.object { display: flex; flex-direction: column; gap: 9px; text-align: left; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; text-decoration: none; }
.object__img { display: block; aspect-ratio: 416 / 218; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-soft); }
.object__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.object:hover .object__img img { transform: scale(1.04); }
.object__name { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: clamp(19px, 1rem + .4vw, 23px); line-height: 28px; font-weight: 500; }
.object__arrow { font-size: 25px; font-weight: 400; transition: transform .2s ease; }
.object:hover .object__arrow { transform: translate(2px, -2px); color: var(--gold-2); }
.object__text { font-size: 16px; line-height: 22px; color: var(--muted); max-width: 310px; }

/* ---------- Система (слои) ---------- */
.system { display: grid; grid-template-columns: 660fr 588fr; gap: 48px; align-items: center; }
.system__figure { background: var(--navy-card); border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.system__img { display: block; aspect-ratio: 604 / 341; border-radius: var(--r-sm); overflow: hidden; }
.system__img img { width: 100%; height: 100%; object-fit: cover; }
.system__figure figcaption { display: flex; flex-direction: column; gap: 20px; }
.system__caption { font-size: clamp(18px, 1rem + .6vw, 25px); line-height: 1.2; font-weight: 500; }
.system__note { font-size: 12px; line-height: 16px; }

.numbered { display: flex; flex-direction: column; }
.numbered li { display: flex; gap: 20px; padding-block: 20px; border-bottom: 1px solid #c5c5c5; }
.numbered li:last-child { border-bottom: 0; }
.numbered__n { font-size: 14px; line-height: 19px; font-weight: 500; color: var(--gold-dark); width: 32px; flex-shrink: 0; }
.numbered__title { display: block; font-size: 22px; line-height: 30px; font-weight: 500; }
.numbered__text { display: block; font-size: 15px; line-height: 20px; margin-top: 4px; }
.numbered--light li { border-bottom: 1px solid rgba(255,255,255,.14); padding-block: 30px; }
.numbered--light li:first-child { border-top: 1px solid rgba(255,255,255,.14); }
.numbered--light li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.numbered--light .numbered__n { color: var(--gold-text); font-size: 16px; width: 40px; }
.numbered--light .numbered__title { font-size: clamp(20px, 1rem + .6vw, 25px); line-height: 34px; color: #fff; }
.numbered--light .numbered__text { font-size: 16px; line-height: 24px; color: var(--on-dark); margin-top: 10px; }

/* ---------- Сравнение систем ---------- */
.compare { border: 1px solid #bcc4cc; border-radius: var(--r-sm); overflow: hidden; }
.compare__row { display: grid; grid-template-columns: 200fr repeat(5, 130fr) 40fr; gap: 16px; align-items: center; padding: 12px 20px; border-top: 1px solid #bcc4cc; font-size: 14px; }
.compare__row--head { background: #f0f2f4; border-top: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.compare__name { color: var(--ink); }
.compare__cell { color: var(--muted); }
.compare__dots { color: var(--gold); letter-spacing: 1px; }
.compare__go { text-align: center; }
.compare__go a, .compare__go button { color: #2a5a9a; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 15px; padding: 4px 8px; border-radius: 6px; }
.compare__go a:hover, .compare__go button:hover { background: #eaf0f8; }
.legend { font-size: 13px; color: var(--muted); margin-top: 32px; }
.legend .dots { color: var(--gold); }

/* ---------- Составы ---------- */
.sys-card { background: #fff; border-radius: var(--r-sm); padding: 28px; display: flex; flex-direction: column; gap: 24px; }
.sys-card .eyebrow { margin: 0; }
.sys-card__title { font-size: clamp(26px, 1.2rem + .8vw, 32px); line-height: 37px; font-weight: 400; }
.sys-card__text { font-size: 16px; line-height: 22px; color: var(--muted); flex-grow: 1; }
.sys-card__tags { font-size: 13px; line-height: 18px; }
.sys-card--accent { background: linear-gradient(63deg, #07213c 10%, #185e9e 99%); color: #fff; }
.sys-card--accent .sys-card__text { color: #fff; }
.sys-card--accent hr { background: #717e77; }

/* ---------- Цена ---------- */
.price { display: grid; grid-template-columns: 648fr 568fr; gap: 32px 80px; margin-bottom: 32px; }
.price__offer { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.price__offer .eyebrow { margin: 0; }
.price__offer .btn { min-width: min(390px, 100%); }
.price .numbered li { padding-block: 10px; }
.price .numbered li:first-child { padding-top: 0; }
.price-cards { gap: 16px; }
.price-card { background: var(--bg-soft); border-radius: var(--r-sm); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.price-card__title { font-size: 18px; line-height: 24px; }
.price-card__value { font-size: 27px; line-height: 36px; font-weight: 500; }
.price-card__text { font-size: 14px; line-height: 19px; color: var(--muted); }

/* ---------- Квиз (тизер + модалка) ---------- */
.split .h2 + .lead-text { margin-top: 0; }
.quiz-teaser { background: var(--bg-cream); border-radius: var(--r-md); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.quiz-teaser__q { font-size: 18px; font-weight: 500; }
.quiz-teaser__foot { display: flex; justify-content: flex-end; }
.quiz__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz__progress-text { font-size: 16px; }
.quiz__bar { display: flex; gap: 8px; }
.quiz__bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background-color .3s ease; }
.quiz__bar.is-1 i:nth-child(-n+1), .quiz__bar.is-2 i:nth-child(-n+2), .quiz__bar.is-3 i:nth-child(-n+3), .quiz__bar.is-4 i { background: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span, .chip--btn { display: inline-flex; padding: 10px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.chip--btn { cursor: pointer; }
.chip--btn span { padding: 0; border: 0; background: none; }
.chip input:checked + span, .chip--btn:hover, .chip:hover span { border-color: var(--gold); box-shadow: inset 0 0 0 .5px var(--gold); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.modal { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 20px; padding: clamp(24px, 5vw, 40px); background: #fff; color: var(--ink); box-shadow: 0 30px 80px -20px rgba(6,29,54,.5); overflow: auto; }
.modal::backdrop { background: rgba(6, 18, 32, .6); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in .22s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__close { width: 40px; height: 40px; border: 0; background: var(--bg-cream); border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; margin-left: auto; }
.modal__close:hover { background: var(--line); }
.quiz, .lead-modal { display: flex; flex-direction: column; gap: 20px; }
.quiz__back { border: 0; background: none; font-size: 13px; color: var(--muted); cursor: pointer; padding: 6px 0; }
.quiz__back:hover { color: var(--ink); }
.quiz__step { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.quiz__title { font-size: clamp(24px, 1.1rem + 1vw, 32px); line-height: 1.3; font-weight: 400; padding: 0; }
.quiz__hint { font-size: 15px; color: var(--muted); }
.quiz__actions { display: flex; }
.quiz__actions .btn { min-width: min(280px, 100%); }
.radios { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; min-height: 32px; }
.radio input { width: 18px; height: 18px; accent-color: var(--gold-2); margin: 0; }
.field--group { background: var(--bg-soft); border-radius: var(--r-btn); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.field__label--strong { font-size: 15px; font-weight: 500; color: var(--ink); }

/* ---------- Поля форм ---------- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--muted); }
.field__input { width: 100%; min-height: 54px; padding: 15px 16px; border-radius: var(--r-btn); border: 1px solid transparent; background: var(--bg-cream); font: inherit; font-size: 16px; color: var(--ink); transition: border-color .15s ease, background-color .15s ease; }
textarea.field__input { resize: vertical; min-height: 90px; }
.field__input::placeholder { color: var(--muted); }
.field__input:focus { outline: none; border-color: var(--gold); background: #fff; }
.field__input[aria-invalid="true"] { border-color: #d64545; background: #fff5f5; }
.field__select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2369746e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 18px; color: var(--muted); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--gold-2); flex-shrink: 0; }
.check a { color: inherit; }
.check.is-invalid { color: #c23b3b; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-error { font-size: 14px; color: #c23b3b; background: #fff1f1; border-radius: 8px; padding: 10px 14px; }
.attach { position: relative; display: inline-flex; font-size: 14px; font-weight: 500; cursor: pointer; align-self: flex-start; }
.attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.attach:hover span { color: var(--gold-2); }
.attach:focus-within span { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.form-success { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.form-success .eyebrow { margin: 0; }
.form-success__title { font-size: clamp(28px, 1.2rem + 1.2vw, 36px); line-height: 1.3; }
.form-success__text { font-size: 16px; color: var(--muted-2); max-width: 520px; }
form.is-sending { opacity: .6; pointer-events: none; }

/* ---------- RAL ---------- */
.ral { display: flex; flex-direction: column; gap: 32px; }
.ral__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.ral__top > *, .ral__preview > *, .split > *, .price > *, .system > *, .video > * { min-width: 0; }
.ral__intro { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.ral__intro > div:nth-child(2) { display: flex; flex-direction: column; gap: 16px; }
.ral__intro .body-lg { font-size: clamp(16px, .9rem + .3vw, 19px); line-height: 1.42; }
.ral__brand { display: flex; align-items: center; gap: 13px; font-size: 11px; line-height: 17.6px; letter-spacing: .06em; text-transform: uppercase; color: #0f3928; }
.ral__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ral__features li { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink-2); }
.icon-box { display: inline-flex; align-self: flex-start; padding: 14px; border-radius: 14px; border: 2px solid #fff; }
.icon-box--grey { background: #eaeaea; }
.ral__preview { background: #fff; border-radius: 20px; padding: 10px; display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
.ral__side { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ral__side-title { font-size: 11px; font-weight: 600; text-transform: uppercase; opacity: .8; padding: 8px 6px 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 16px; border-radius: 100px; border: 1px solid #000; background: rgba(255,255,255,.9); font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.pill:hover { background: var(--bg-cream); }
.pill.is-active { background: var(--grad-gold); border-color: transparent; color: #fff; }
.pill--white { border: 0; justify-content: center; width: 100%; min-height: 38px; }
.ral__chosen { background: var(--sw, #cd5c22); color: #fff; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; justify-content: flex-end; min-height: 180px; transition: background-color .3s ease; }
.ral__chosen-label { font-size: 11px; font-weight: 600; text-transform: uppercase; opacity: .8; display: flex; justify-content: space-between; margin-bottom: auto; }
.ral__chosen-label i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.ral__chosen-code { font-size: 24px; font-weight: 700; }
.ral__chosen-name { font-size: 13px; opacity: .9; margin-bottom: 8px; }
.ral__interior { position: relative; border-radius: 16px; overflow: hidden; min-height: 300px; }
.ral__interior img, .ral__interior canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ral__interior canvas { transition: opacity .2s ease; }
.ral__interior.is-loading canvas { opacity: .6; }
.ral__badge, .ral__tag { position: absolute; right: 16px; padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.ral__badge { top: 16px; }
.ral__tag { bottom: 16px; font-weight: 500; padding-block: 8px; }
.ral__swatches { display: flex; flex-direction: column; gap: 24px; }
.ral__sw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.ral__sw-head .small { margin-top: 8px; }
.link-teal { color: var(--teal); font-size: 13px; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; }
.link-teal:hover { text-decoration: underline; }
.swatches { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
.swatch { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; }
.swatch__color { position: relative; display: block; height: 69px; border-radius: 8px; margin-bottom: 8px; border: 2px solid transparent; transition: transform .15s ease; }
.swatch:hover .swatch__color { transform: translateY(-2px); }
.swatch.is-active .swatch__color { border-color: #ffb76e; }
.swatch.is-active .swatch__color::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--ink-2); font-size: 11px; display: grid; place-items: center; font-weight: 700; }
.swatch__code { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.swatch__name { font-size: 11px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ral__custom { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ral__custom-text { display: flex; align-items: center; gap: 16px; max-width: 560px; }
.ral__custom-text .small { margin-top: 4px; }
.ral__custom-action { display: flex; align-items: center; gap: 24px; flex: 0 1 664px; }
.spectrum { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.spectrum i { display: block; width: 100%; height: 16px; border-radius: 100px; background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.spectrum span { font-size: 10px; color: #87888c; text-align: center; }
.ral__custom-action .btn { min-width: 257px; }

/* ---------- Кейсы ---------- */
.cases { row-gap: 40px; }
.case { display: flex; flex-direction: column; gap: 14px; }
.case .eyebrow { margin: 0; }
.case__img { display: block; aspect-ratio: 416 / 240; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-soft); }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
.case__title { font-size: 22px; line-height: 28px; font-weight: 500; }
.case__text { font-size: 15px; line-height: 20px; color: var(--muted); }
.guarantee { display: flex; align-items: center; gap: 32px; padding: 32px; border-radius: var(--r-md); background: var(--grad-navy); color: #fff; margin-top: 32px; }
.guarantee__icon { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 40px; background: rgba(249,174,23,.2); font-size: 32px; flex-shrink: 0; }
.guarantee__title { font-size: clamp(21px, 1rem + .8vw, 28px); font-weight: 600; }
.guarantee__text { font-size: 16px; line-height: 24px; color: var(--on-dark-2); margin-top: 8px; }

/* ---------- Этапы ---------- */
.steps { gap: 32px; }
.step { background: #fff; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.step__n { font-size: 54px; line-height: 54px; font-weight: 300; color: var(--gold); padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.step__title { font-size: 23px; line-height: 31px; font-weight: 500; }
.step__text { font-size: 16px; line-height: 24px; color: var(--muted); }
.video { display: grid; grid-template-columns: 540fr 652fr; gap: 48px; align-items: center; padding: 28px; }
.video__preview { position: relative; display: grid; place-items: center; aspect-ratio: 540 / 326; border-radius: 20px; overflow: hidden; background: #0a355c; }
.video__preview > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play { position: relative; width: 72px; height: 72px; transition: transform .2s ease; }
.video__preview:hover .video__play { transform: scale(1.08); }
.video__caption { position: absolute; left: 20px; right: 20px; bottom: 20px; color: #fff; font-size: clamp(15px, .9rem + .3vw, 20px); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.video__text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.video__text .lead-text { line-height: 23px; }

/* ---------- Материалы ---------- */
.params { display: flex; flex-direction: column; width: 100%; }
.params li { display: flex; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.params li:last-child { border-bottom: 0; }
.params__n { color: var(--gold); font-size: 14px; font-weight: 500; }
.params b { display: block; font-size: 18px; font-weight: 500; }
.params li span span { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }
.products { display: flex; flex-direction: column; gap: 16px; }
.product { background: #fff; border: 1px solid var(--line-3); border-radius: var(--r-sm); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.product b { font-size: 16px; font-weight: 600; }
.product span { font-size: 14px; color: var(--muted); }

/* ---------- Сертификаты ---------- */
.certs { gap: 24px; }
.cert { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: #fff; }
.cert__sheet { display: block; background: #fff; border-radius: 8px; padding: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.cert:hover .cert__sheet { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.7); }
.cert__sheet img { width: 100%; aspect-ratio: 278 / 393; object-fit: contain; }
.cert__title { font-size: 17px; font-weight: 500; line-height: 1.35; }
.cert__meta { font-size: 13px; line-height: 1.35; color: var(--on-dark-2); }

/* ---------- Документы и аккордеон ---------- */
.doc-list { width: 100%; border: 1px solid var(--line-3); border-radius: var(--r-sm); overflow: hidden; }
.doc-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line-3); font-size: 15px; }
.doc-list li:last-child { border-bottom: 0; }
.doc-pill { flex-shrink: 0; padding: 4px 12px; border-radius: 100px; background: var(--bg-cream); border: 1px solid var(--line-2); font-size: 12px; color: var(--muted); text-decoration: none; cursor: pointer; }
.doc-pill:hover { border-color: var(--ink); color: var(--ink); }
.accordion { border: 1px solid var(--line-3); border-radius: var(--r-md); overflow: hidden; }
.acc { border-bottom: 1px solid var(--line-3); }
.acc:last-child { border-bottom: 0; }
.acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-size: 16px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary span { font-size: 18px; color: var(--muted); transition: transform .2s ease; flex-shrink: 0; }
.acc[open] summary span { transform: rotate(45deg); }
.acc summary:hover { background: #fafaf7; }
.acc p { padding: 0 24px 20px; font-size: 15px; line-height: 22px; color: var(--muted); }

/* ---------- FAQ ---------- */
.split--faq { grid-template-columns: 648fr 629fr; gap: 32px 24px; }
.split--faq .split__text .body-lg { max-width: 465px; }
.qa { display: flex; flex-direction: column; }
.qa__item { padding-block: 12px 24px; border-bottom: 1px solid var(--line-2); }
.qa__item + .qa__item { padding-top: 24px; }
.qa dt { font-size: 21px; line-height: 28px; font-weight: 500; }
.qa dd { font-size: 16px; line-height: 24px; color: var(--muted); margin-top: 10px; }

/* ---------- Заявка ---------- */
.lead-sec { background: var(--grad-navy); color: #fff; padding-block: var(--sec); }
.lead-sec .eyebrow { margin: 0; color: var(--gold); }
.lead-sec__title { font-size: clamp(34px, 1.4rem + 2.6vw, 58px); line-height: 1.05; font-weight: 400; text-transform: uppercase; }
.lead-sec__text { font-size: clamp(17px, 1rem + .3vw, 20px); line-height: 1.5; font-weight: 300; color: #cbd2cc; max-width: 570px; }
.lead-sec hr { background: var(--line-2); }
.lead-sec__phone { font-size: 29px; line-height: 39px; font-weight: 500; color: #fff; text-decoration: none; }
.lead-sec__meta { font-size: 15px; color: var(--on-dark); margin-top: -14px; }
.lead-sec__meta a { color: inherit; }
.form-card { background: #fff; color: var(--ink); border-radius: var(--r-md); padding: clamp(20px, 2.3vw, 32px); }
.lead-form { display: flex; flex-direction: column; gap: 20px; }
.form-card__title { font-size: clamp(22px, 1rem + .9vw, 28px); line-height: 1.35; font-weight: 500; }
.form-card__text { font-size: 14px; color: var(--muted); margin-top: -8px; }
.form-card__req { font-size: 11px; color: var(--muted); margin-top: -8px; }


/* ---------- Cookie ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 560px; margin-left: auto; background: var(--ink); color: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 14px; font-size: 13px; line-height: 1.45; }
.cookie a { color: var(--gold); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Внутренние страницы ---------- */
.crumbs { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.prose { max-width: 820px; font-size: 16px; line-height: 1.6; }
.prose h1 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: 400; margin-bottom: 24px; }
.prose h2 { font-size: 24px; font-weight: 500; margin: 32px 0 12px; }
.prose p, .prose ul, .prose ol { margin-bottom: 14px; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose ol { list-style: decimal; padding-left: 20px; }


/* ---------- Подстраница ---------- */
.sub-hero { background: var(--bg-cream); padding: 14px 0 32px; }
.sub-hero .crumbs { margin: 4px 0 16px; }
.sub-hero__grid { display: grid; grid-template-columns: minmax(0, 670fr) minmax(0, 658fr); gap: 32px 48px; align-items: stretch; }
.sub-hero__offer { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.sub-hero__offer .eyebrow { margin: 0; font-size: 13px; line-height: 18px; }
.eyebrow--gold2 { color: var(--gold); }
.sub-hero__title { font-size: clamp(30px, 1.1rem + 2.4vw, 48px); line-height: 1.125; font-weight: 600; text-transform: uppercase; color: #000; }
.sub-hero__text { font-size: 17px; line-height: 1.46; color: #000; }
.sub-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 212px)); gap: 10px; width: 100%; }
.sub-fact { border: 1px solid #000; border-radius: var(--r-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.sub-fact__value { font-size: clamp(18px, 1rem + .4vw, 22px); line-height: 30px; font-weight: 500; }
.sub-fact__text { font-size: 12px; line-height: 16px; }
.sub-fact__dots { font-size: 12px; line-height: 16px; color: #f99317; letter-spacing: 1px; }
.sub-hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.sub-hero__note { font-size: 12px; line-height: 16px; color: #000; }
.sub-hero__media { display: flex; flex-direction: column; gap: 16px; min-height: 360px; }
.sub-hero__img { flex: 1; position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-soft); min-height: 320px; }
.sub-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sub-hero__media figcaption { font-size: 13px; line-height: 18px; white-space: pre-wrap; }

.need { background: var(--bg-cream); border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.need__icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--gold), var(--gold-2)); display: grid; place-items: center; font-size: 22px; }
.need__title { font-size: 19px; line-height: 26px; font-weight: 600; }
.need__text { font-size: 14px; line-height: 20px; color: var(--muted); }

.compare__row--rec { background: #fff4e0; border-top-color: var(--gold); border-bottom: 1px solid var(--gold); }
.compare__name small { display: block; font-size: 11px; color: var(--gold-2); margin-top: 2px; }
.compare__row--rec .compare__name { font-weight: 600; }
.price-card--rec { background: #fff4e0; box-shadow: inset 0 0 0 1px var(--gold); }

.ral__swatches--sub { max-width: var(--panel-max); margin-inline: auto; padding: clamp(20px, 2.3vw, 32px) var(--pad-panel); }
.ral__swatches--sub .eyebrow { margin-bottom: -12px; }
.swatches--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.link-gold { color: var(--gold); font-size: 13px; font-weight: 600; background: none; border: 0; cursor: pointer; padding: 0; }
.link-gold:hover { text-decoration: underline; }

.sub-certs { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sub-certs .cert { flex: 0 1 280px; min-width: 0; }
.sub-certs .doc-box { flex: 1 1 380px; }
.doc-box { background: rgba(6, 29, 54, .55); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.doc-box__title { font-size: 17px; font-weight: 600; }
.doc-list--dark { border-color: rgba(255,255,255,.14); }
.doc-list--dark li { border-color: rgba(255,255,255,.14); color: #fff; font-size: 14px; }
.doc-list--dark .doc-pill { background: transparent; color: var(--on-dark-2); border-color: rgba(255,255,255,.3); }
.doc-list--dark .doc-pill:hover { color: #fff; border-color: #fff; }

.related { gap: 24px; }
.rel-card { background: var(--bg-cream); border-radius: var(--r-md); padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.rel-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(6,29,54,.5); }
.rel-card__img { display: block; aspect-ratio: 180 / 100; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 6px; }
.rel-card__img img { width: 100%; height: 100%; object-fit: cover; }
.rel-card__title { font-size: 17px; line-height: 1.35; font-weight: 500; }
.rel-card__text { font-size: 13px; line-height: 1.4; color: var(--muted-2); flex-grow: 1; }
.rel-card__more { font-size: 13px; color: #2a5a9a; text-decoration: underline; text-underline-offset: 2px; }
.rel-card--hub { background: var(--grad-navy); color: #fff; justify-content: center; align-items: center; text-align: center; min-height: 220px; }
.rel-card--hub .rel-card__text { color: var(--on-dark-2); flex-grow: 0; }
.rel-card__arrow { color: var(--gold); font-size: 24px; margin-top: 12px; }


.need__svg { width: 56px; height: 52px; object-fit: contain; object-position: left center; }
.sub-fact__text--accent { color: #f99317; }
.h2--caps { text-transform: uppercase; }
.fit { border: 1px solid #bcc4cc; border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.fit__row { display: grid; grid-template-columns: 200fr 140fr 230fr 280fr; gap: 16px; padding: 12px 20px; border-top: 1px solid #bcc4cc; font-size: 14px; align-items: start; }
.fit__row--head { background: #f0f2f4; border-top: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.fit__row--rec { background: #fff4e0; border-top-color: var(--gold); border-bottom: 1px solid var(--gold); }
.fit__name { color: var(--ink); }
.fit__row--rec .fit__name { font-weight: 600; }
.fit__name small { display: block; font-size: 11px; color: var(--gold-2); margin-top: 2px; font-weight: 400; }
.fit__cell { color: var(--muted); }
.fit__cell--accent { color: var(--gold-2); }


/* ---------- Видео ---------- */
button.video__preview { border: 0; padding: 0; cursor: pointer; width: 100%; font: inherit; text-align: left; }
.modal--video { width: min(1100px, calc(100vw - 24px)); padding: 0; background: #000; overflow: visible; }
.video-frame { position: relative; aspect-ratio: 16 / 9; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; }
.modal__close--float { position: absolute; top: -48px; right: 0; background: #fff; }

/* ==========================================================================
   Адаптив
   ========================================================================== */


/* Планшет, крупный */
@media (max-width: 1180px) {

  .hero { min-height: 0; }
  :root { --hero-pad: 10px; }
  .hero::after { background: linear-gradient(180deg, rgba(3,16,32,.35) 0%, rgba(3,16,32,.55) 40%, rgba(3,16,32,.82) 100%); }
  .hero__body { flex-direction: column; align-items: stretch; }
  .hero__main { padding-top: calc(var(--header-h) + clamp(64px, 12vw, 140px)); }
  .hero__cards { width: auto; flex-direction: row; }
  .hero__cards .glass-card { flex: 1 1 0; }

  .ral__top { grid-template-columns: minmax(0, 1fr); }
  .ral__custom { flex-direction: column; align-items: stretch; }
  .ral__custom-action { flex: none; }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Планшет */
@media (max-width: 1000px) {
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head { flex-direction: column; gap: 12px; }
  .sec-head > .lead-text { flex: none; max-width: 640px; }
  .panel--blue .sec-head:not(.sec-head--stack) { align-items: flex-start; }
  .split, .split--faq, .price, .system, .video { grid-template-columns: minmax(0, 1fr); }
  .split { gap: 32px; }
  .system { gap: 24px; }
  .video { gap: 24px; }
  .price { gap: 32px; }
  .compare__row { grid-template-columns: 1.5fr repeat(5, 1fr) 32px; gap: 10px; padding-inline: 14px; font-size: 13px; }
  .ral__features { grid-template-columns: repeat(2, 1fr); }
  .sub-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sub-hero__media { min-height: 0; }
  .sub-hero__img { min-height: 0; aspect-ratio: 16 / 10; flex: none; }
  .sub-certs .cert { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }
  .sub-certs .doc-box { flex-basis: 100%; }
  .swatches--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-row { flex-direction: column; align-items: flex-start; }
  .cta-row__text { font-size: 19px; line-height: 26px; }
}

/* Телефон */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .eyebrow { margin-bottom: 20px; }
  .lead-text { font-size: 16px; line-height: 24px; }
  .body-lg { font-size: 16px; line-height: 24px; }

  :root { --hero-pad: 6px; }

  .hero { border-radius: 16px; gap: 28px; }
  .hero__main { padding-top: calc(var(--header-h) + 48px); gap: 14px; }
  .hero__eyebrow { font-size: 12px; }
  .hero__text { font-size: 15px; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__cards { flex-direction: column; }
  .glass-card { padding: 12px; }
  .glass-card__img { width: 88px; }

  .facts { padding-block: 32px; }
  .facts__grid { gap: 20px 16px; }

  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .price-card { padding: 16px; gap: 10px; }
  .price-card__title { font-size: 16px; }
  .price-card__value { font-size: 21px; line-height: 28px; }
  .price-card__text { font-size: 13px; }
  .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cert__sheet { padding: 6px; }
  .cert__title { font-size: 15px; }
  .cert__meta { font-size: 12px; }
  .steps { gap: 12px; }
  .step { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 18px; }
  .step__n { font-size: 36px; line-height: 1; border: 0; padding: 0; }
  .step__title { font-size: 20px; line-height: 1.3; flex: 1; }
  .step__text { flex-basis: 100%; }

  .system__figure { padding: 14px; gap: 14px; }
  .numbered--light li { padding-block: 20px; }
  .numbered__title { font-size: 19px; line-height: 26px; }

  /* Таблица сравнения → карточки */
  .compare { border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  .compare__row--head { display: none; }
  .compare__row { grid-template-columns: 1fr 1fr; gap: 10px 16px; border: 1px solid #bcc4cc; border-radius: var(--r-sm); padding: 16px; position: relative; }
  .compare__name { grid-column: 1 / -1; font-size: 17px; font-weight: 500; padding-right: 40px; }
  .compare__cell { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
  .compare__cell::before { content: attr(data-label); font-size: 12px; color: var(--muted); letter-spacing: 0; }
  .compare__go { position: absolute; top: 10px; right: 10px; }

  .sys-card { padding: 22px; gap: 18px; }
  .ral__features { gap: 16px; }
  .ral__preview { grid-template-columns: minmax(0, 1fr); }
  .ral__interior { min-height: 240px; order: -1; }
  .ral__chosen { min-height: 150px; }
  .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -10px; padding: 2px 10px; }
  .pills::-webkit-scrollbar { display: none; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .swatch__color { height: 56px; }
  .ral__custom-text { align-items: flex-start; }
  .ral__custom-action { flex-direction: column; align-items: stretch; }
  .ral__custom-action .btn { min-width: 0; width: 100%; }
  .btn-row .btn { width: 100%; }

  .guarantee { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; }
  .guarantee__icon { width: 60px; height: 60px; font-size: 26px; }
  .video { padding: 12px; }
  .video__text { padding: 0 8px 12px; }

  .quiz-teaser { padding: 20px; }
  .chips { gap: 8px; }
  .quiz__actions .btn { width: 100%; }

  .form-row { grid-template-columns: 1fr; }
  .fit { border: 0; background: none; display: flex; flex-direction: column; gap: 12px; overflow: visible; }
  .fit__row--head { display: none; }
  .fit__row { grid-template-columns: 1fr; gap: 8px; border: 1px solid #bcc4cc; border-radius: var(--r-sm); background: #fff; padding: 16px; }
  .fit__row--rec { background: #fff4e0; border-color: var(--gold); }
  .fit__name { font-size: 17px; font-weight: 500; }
  .fit__cell { display: flex; flex-direction: column; gap: 2px; }
  .fit__cell::before { content: attr(data-label); font-size: 12px; color: var(--muted); }
  .sub-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sub-fact { padding: 8px; min-width: 0; }
  .h2--caps, .sub-hero__title { overflow-wrap: anywhere; hyphens: auto; }
  .h2--caps { font-size: clamp(22px, 7vw, 30px); }
  .sub-fact__value { font-size: 16px; line-height: 22px; hyphens: auto; overflow-wrap: anywhere; }
  .sub-fact__text { hyphens: auto; overflow-wrap: anywhere; }
  .compare__go a, .compare__go button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .doc-pill { padding: 9px 14px; }
  .link-gold, .link-teal { padding-block: 10px; }
  .sub-hero__cta { grid-template-columns: 1fr; }
  .need { padding: 20px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .need__text { flex-basis: 100%; }
  .sub-certs { gap: 14px; }
  .sub-certs .cert { flex-basis: calc(50% - 7px); max-width: calc(50% - 7px); }
  .rel-card--hub { min-height: 160px; }
  .lead-sec__phone { font-size: 24px; }
  .split__text > .btn, .price__offer .btn, .video__text .btn { width: 100%; min-width: 0; }
  .cta-row .btn { width: 100%; }

  .qa dt { font-size: 18px; line-height: 25px; }
  .acc summary { padding: 16px 18px; font-size: 15px; }
  .acc p { padding: 0 18px 16px; }
  .doc-list li { padding: 12px 14px; font-size: 14px; }


  .modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .modal--video { height: auto; margin: auto; padding: 0; background: #000; }
  .video-frame iframe { border-radius: 0; }
  .cookie { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  .price-cards { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__grid { grid-template-columns: 1fr; }
}