/* ==========================================================================
   Санмодуль · site.css — страницы многостраничника
   Токены и база — в tokens.css. Здесь только блоки сайта.
   ========================================================================== */

/* ── Каркас ─────────────────────────────────────────────── */
.header{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border-subtle)}
.header__in{display:flex;align-items:center;gap:var(--space-6);height:7.2rem}
.logo{display:flex;align-items:center;gap:.9rem;font-family:var(--font-display);font-weight:700;font-size:var(--fs-300);letter-spacing:-.02em}
.logo i{width:1.8rem;height:1.8rem;background:var(--color-action);border-radius:.2rem;display:block}
.nav{display:flex;gap:var(--space-5);margin-left:auto}
.nav a{font-size:var(--fs-100);font-weight:500;color:var(--color-ink-muted);position:relative;padding:.4rem 0}
.nav a:hover{color:var(--color-ink)}
.nav a[aria-current="page"]{color:var(--color-ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-.2rem;height:2px;background:var(--color-action)}
.header .btn{min-height:4.4rem;padding:0 var(--space-4)}
.header__phone{font-weight:600;white-space:nowrap}
@media (max-width:1120px){.nav{display:none}.header__in{justify-content:space-between}}
@media (max-width:700px){
  .header__phone{display:none}
  .header__in{gap:var(--space-3);height:6.4rem}
  .logo{font-size:var(--fs-200)}
  .header .btn{min-height:4rem;padding:0 var(--space-3);font-size:var(--fs-100)}
  .subnav{top:6.4rem}
}

.subnav{position:sticky;top:7.2rem;z-index:90;background:var(--color-surface);border-bottom:1px solid var(--color-border-subtle)}
.subnav__in{display:flex;gap:var(--space-5);overflow-x:auto;padding:1.2rem 0;scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{font-size:var(--fs-100);color:var(--color-ink-muted);white-space:nowrap;padding:.3rem 0;border-bottom:1px solid transparent}
.subnav a:hover{color:var(--color-ink);border-color:var(--color-ink)}

.crumbs{font-size:1.2rem;color:var(--color-ink-muted);padding:var(--space-3) 0 0}
.crumbs a{color:var(--color-ink-muted)}
.crumbs a:hover{color:var(--color-action)}
.crumbs span{margin:0 .6rem;opacity:.5}

/* ── Первый экран ───────────────────────────────────────── */
.hero{padding:var(--space-8) 0 var(--space-7);position:relative;background-color:#0C1D1C;background-size:cover;background-position:center;color:var(--color-ink-inverse)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,20,19,.94) 0%,rgba(8,20,19,.78) 55%,rgba(8,20,19,.42) 100%)}
.hero > .container{position:relative}
.hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:center}
.hero__text{grid-column:1/7}
.hero h1{font-size:var(--fs-600);line-height:1.07;letter-spacing:-.02em;margin:var(--space-3) 0 var(--space-4);color:var(--color-ink-inverse);max-width:22ch}
.hero .lead{color:#DCE5E3;max-width:44rem}
.hero__meta{display:flex;gap:var(--space-5);flex-wrap:wrap;margin:var(--space-5) 0 0}
.hero__meta div{border-top:1px solid rgba(255,255,255,.3);padding-top:.6rem;min-width:12rem}
.hero__meta b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-300);color:#F3F6F5;line-height:1.1}
.hero__meta span{font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;color:#9FB0AD}
.hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
.hero__media{grid-column:8/13}
.hero__media img{width:100%;height:auto;border-radius:var(--radius);display:block}
.hero .label{color:#9FB0AD}
.hero--compact{padding:var(--space-7) 0 var(--space-6)}
.hero--compact h1{font-size:var(--fs-500);max-width:26ch}
.hero--compact .hero__text{grid-column:1/7}
@media (max-width:1049px){
  .hero__text,.hero--compact .hero__text{grid-column:1/13}
  .hero__media{grid-column:1/13;margin-top:var(--space-5)}
  .hero h1{font-size:var(--fs-500)}
}

/* ── Блоки ──────────────────────────────────────────────── */
.section{padding:var(--space-8) 0}
.section--tint{background:var(--color-surface-tint)}
.section--tight{padding:var(--space-6) 0}
.section-head{max-width:70rem;margin-bottom:var(--space-6)}
.section-head h2{margin-bottom:var(--space-2)}
.section-head p{color:var(--color-ink-muted)}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);border-top:1px solid var(--color-ink);padding-top:var(--space-4)}
.facts div b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-400);line-height:1;letter-spacing:-.02em;margin-bottom:.6rem}
.facts div span{font-size:var(--fs-100);color:var(--color-ink-muted);line-height:1.4;display:block}
@media (max-width:1049px){.facts{grid-template-columns:repeat(2,1fr);row-gap:var(--space-5)}}

.problem{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.problem > div{padding:var(--space-5);border-radius:var(--radius);border:1px solid var(--color-border-subtle)}
.problem .pain{background:var(--color-surface-tint)}
.problem h3{font-size:var(--fs-300);margin-bottom:var(--space-3)}
.problem ul{list-style:none;padding:0;margin:0}
.problem li{position:relative;padding:var(--space-2) 0 var(--space-2) 2.4rem;font-size:var(--fs-200);color:var(--color-ink-muted)}
.problem li::before{content:"";position:absolute;left:0;top:1.7rem;width:1rem;height:2px;background:var(--color-border)}
.problem .fix li::before{background:var(--color-action)}
.problem .fix li{color:var(--color-ink)}
@media (max-width:1049px){.problem{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start}
.split__text{grid-column:1/7}
.split__media{grid-column:8/13}
.split--rev .split__text{grid-column:7/13;order:2}
.split--rev .split__media{grid-column:1/6;order:1}
.split h2{font-size:var(--fs-500);margin-bottom:var(--space-3)}
.split p{color:var(--color-ink-2, #3A3733)}
.split p + p{margin-top:var(--space-3)}
.split__media img{width:100%;height:auto;border-radius:var(--radius);display:block}
.split__media .cap{margin-top:var(--space-2);font-size:1.2rem;color:var(--color-ink-muted)}
@media (max-width:1049px){
  .split__text,.split__media,.split--rev .split__text,.split--rev .split__media{grid-column:1/13;order:initial}
  .split__media{margin-top:var(--space-5)}
}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--color-border-subtle);border:1px solid var(--color-border-subtle)}
.features > div{background:var(--color-surface);padding:var(--space-5)}
.features b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-400);line-height:1;color:var(--color-action);margin-bottom:var(--space-2)}
.features h3{font-size:var(--fs-200);margin-bottom:.4rem}
.features p{font-size:var(--fs-100);color:var(--color-ink-muted)}
@media (max-width:1049px){.features{grid-template-columns:1fr}}

.steps{display:grid;gap:1px;background:var(--color-border-subtle);border:1px solid var(--color-border-subtle);grid-template-columns:repeat(4,1fr)}
.steps--3{grid-template-columns:repeat(3,1fr)}
.steps > div{background:var(--color-surface);padding:var(--space-5)}
.steps b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-300);color:var(--color-action);line-height:1;margin-bottom:var(--space-2)}
.steps h3{font-size:var(--fs-200);margin-bottom:.4rem}
.steps p{font-size:var(--fs-100);color:var(--color-ink-muted)}
@media (max-width:1049px){.steps,.steps--3{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);display:block}
.gallery figcaption{margin-top:var(--space-2);font-size:1.2rem;color:var(--color-ink-muted)}
@media (max-width:1049px){.gallery{grid-template-columns:1fr}}

.models{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.model{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.model img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.model__body{padding:var(--space-4);display:flex;flex-direction:column;flex:1}
.model h3{font-size:var(--fs-300);margin-bottom:.2rem}
.model .dim{font-size:var(--fs-100);color:var(--color-ink-muted)}
.model .sum{font-family:var(--font-display);font-weight:700;font-size:var(--fs-400);letter-spacing:-.02em;margin:var(--space-3) 0 var(--space-1)}
.model .per{font-size:1.2rem;color:var(--color-ink-muted);margin-bottom:var(--space-3)}
.model .btn{margin-top:auto}
@media (max-width:1049px){.models{grid-template-columns:1fr}}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.compare article{border:1px solid var(--color-border-subtle);border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}
.compare img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.compare .body{padding:var(--space-5)}
.compare h3{margin-bottom:var(--space-2)}
.compare .sum{font-family:var(--font-display);font-weight:700;font-size:var(--fs-400);letter-spacing:-.03em;margin:var(--space-2) 0 var(--space-3)}
.compare ul{list-style:none;padding:0;margin:0}
.compare li{position:relative;padding-left:2.2rem;margin-bottom:var(--space-2);color:var(--color-ink-muted);font-size:var(--fs-100)}
.compare li::before{content:"";position:absolute;left:0;top:.9rem;width:.9rem;height:1px;background:var(--color-border)}
.compare__ours{border-color:var(--color-action)}
.compare__ours .sum{color:var(--color-action)}
.compare__ours li::before{background:var(--color-action);height:2px}
@media (max-width:1049px){.compare{grid-template-columns:1fr}}

/* направления */
.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.direction{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius);overflow:hidden}
.direction img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.direction__body{padding:var(--space-4)}
.direction h3{font-size:var(--fs-300);margin-bottom:.3rem}
.direction p{font-size:var(--fs-100);color:var(--color-ink-muted);margin-bottom:var(--space-3)}
.direction .more{font-size:var(--fs-100);font-weight:600;color:var(--color-action)}
@media (max-width:1049px){.directions{grid-template-columns:1fr}}

/* статистика проникновения */
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);border-top:1px solid var(--color-ink);padding-top:var(--space-4)}
.kpi div b{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-600);line-height:1;letter-spacing:-.03em;margin-bottom:.6rem}
.kpi div span{display:block;font-size:var(--fs-100);color:var(--color-ink-muted)}
.kpi div small{display:block;margin-top:var(--space-2);font-size:1.1rem;color:var(--color-ink-muted);opacity:.8}
@media (max-width:1049px){.kpi{grid-template-columns:1fr;row-gap:var(--space-5)}}

/* таблица характеристик */
.specs{width:100%;border-collapse:collapse}
.specs th{text-align:left;font-size:1.1rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-muted);padding:var(--space-2) var(--space-4) var(--space-2) 0;border-bottom:1px solid var(--color-ink)}
.specs td{padding:var(--space-3) var(--space-4) var(--space-3) 0;border-bottom:1px solid var(--color-border-subtle);font-size:var(--fs-200)}
.specs td:first-child{color:var(--color-ink-muted);width:45%}
.specs td:last-child{font-weight:500}

/* документы */
.docs{list-style:none;padding:0;margin:0;border-top:1px solid var(--color-ink)}
.docs li{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-subtle);font-size:var(--fs-200)}
.docs .note{color:var(--color-ink-muted);font-size:var(--fs-100);text-align:right}

/* видео */
.video{max-width:90rem}
.video video,.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);display:block;background:#000}
.video .cap{margin-top:var(--space-2);font-size:1.2rem;color:var(--color-ink-muted)}

/* связанные страницы */
.related{border-top:1px solid var(--color-ink);padding-top:var(--space-4);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.related a{display:block;padding:var(--space-3) 0}
.related b{display:block;font-size:var(--fs-200);margin-bottom:.2rem}
.related span{font-size:var(--fs-100);color:var(--color-ink-muted)}
@media (max-width:1049px){.related{grid-template-columns:1fr 1fr}}

/* заявка */
.cta{background:var(--color-surface-inverse);color:var(--color-ink-inverse);padding:var(--space-8) 0}
.cta__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.cta__text{grid-column:1/6}
.cta__form{grid-column:7/13;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:var(--space-5)}
.cta h2{color:#F3F6F5;margin-bottom:var(--space-3)}
.cta p{color:#C8D3D1}
.cta .label{color:#9FB0AD}
.cta .field__label{color:#9FB0AD}
.cta .input{background:#fff;border-color:rgba(255,255,255,.4)}
.cta .checkbox{color:#9FB0AD}
.cta .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
@media (max-width:1049px){.cta__text,.cta__form{grid-column:1/13}.cta__form{margin-top:var(--space-5)}}

/* подвал */
.footer{background:var(--color-surface-tint);border-top:1px solid var(--color-border-subtle);padding:var(--space-7) 0 var(--space-6)}
.footer__in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--gutter)}
.footer h4{font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-muted);font-weight:500;margin-bottom:var(--space-3)}
.footer ul{list-style:none;padding:0}
.footer li{margin-bottom:var(--space-2);font-size:var(--fs-100)}
.footer p{font-size:var(--fs-100);color:var(--color-ink-muted);max-width:34rem}
.footer__legal{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle);display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;font-size:1.2rem;color:var(--color-ink-muted)}
@media (max-width:1049px){.footer__in{grid-template-columns:1fr 1fr}}

/* ── мобильное меню ─────────────────────────────────────── */
.burger{display:none;background:none;border:0;padding:.8rem;cursor:pointer;margin-left:auto}
.burger span{display:block;width:2.2rem;height:.2rem;background:var(--color-ink);margin:.45rem 0;transition:transform .16s,opacity .16s}
.burger.is-open span:nth-child(1){transform:translateY(.65rem) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-.65rem) rotate(-45deg)}
.mnav{background:var(--color-surface);border-bottom:1px solid var(--color-border-subtle)}
.mnav .container{display:flex;flex-direction:column;padding-top:var(--space-3);padding-bottom:var(--space-4)}
.mnav a{padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-subtle);font-size:var(--fs-200)}
.mnav a:last-child{border-bottom:0;color:var(--color-action);font-weight:600}
@media (max-width:1120px){.burger{display:block}}
@media (max-width:700px){.header__cta{padding:0 var(--space-2);font-size:1.2rem}}

/* ── светлая шапка служебной страницы ───────────────────── */
.pagehead{padding:var(--space-7) 0 var(--space-5);border-bottom:1px solid var(--color-border-subtle)}
.pagehead h1{font-size:var(--fs-500);line-height:1.1;letter-spacing:-.02em;margin:var(--space-2) 0 var(--space-3);max-width:34ch}
.pagehead .lead{color:var(--color-ink-muted);max-width:64rem}

/* ── история (таймлайн) ─────────────────────────────────── */
.tl{margin:0;border-top:1px solid var(--color-ink)}
.tl > div{display:grid;grid-template-columns:14rem 1fr;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-subtle)}
.tl dt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-300);color:var(--color-accent);line-height:1.2}
.tl dd{margin:0;font-size:var(--fs-200);color:var(--color-ink-muted);max-width:76rem}
.tl dd b{display:block;color:var(--color-ink);font-family:var(--font-text);font-weight:600;font-size:var(--fs-200);margin-bottom:.3rem}
@media (max-width:1049px){.tl > div{grid-template-columns:1fr;gap:.4rem}.tl dt{font-size:var(--fs-200)}}

/* ── мировая практика: четыре метрики ───────────────────── */
.kpi--4{grid-template-columns:repeat(4,1fr)}
.kpi--4 div b{font-size:var(--fs-500)}
@media (max-width:1049px){.kpi--4{grid-template-columns:1fr 1fr;row-gap:var(--space-5)}}

/* ── компоновки внутри размера ──────────────────────────── */
.variants{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.variant{margin:0;display:grid;grid-template-columns:14rem 1fr;gap:var(--space-4);align-items:start;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius);padding:var(--space-3)}
.variant img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);display:block}
.variant figcaption b{display:block;font-family:var(--font-display);font-size:var(--fs-200);font-weight:600;margin-bottom:.3rem}
.variant figcaption span{font-size:var(--fs-100);color:var(--color-ink-muted);line-height:1.45}
@media (max-width:1049px){.variants{grid-template-columns:1fr}.variant{grid-template-columns:1fr}.variant img{aspect-ratio:16/9}}

/* ── контекстные ссылки внутри блоков ───────────────────── */
.ctx{margin:var(--space-5) 0 0;padding-top:var(--space-3);border-top:1px solid var(--color-border-subtle);font-size:var(--fs-100);color:var(--color-ink-muted)}
.ctx span{color:var(--color-ink);font-weight:600;margin-right:.5rem}
.ctx a{color:var(--color-action);border-bottom:1px solid rgba(14,92,99,.35);padding-bottom:1px}
.ctx a:hover{border-color:var(--color-action)}

/* ── полоса возврата к месту ────────────────────────────── */
.backbar{background:var(--color-tint);border-bottom:1px solid var(--color-border-subtle)}
.backbar a{display:inline-block;padding:10px 0;font-size:var(--fs-100);color:var(--color-action);font-weight:500}
.backbar a:hover{border-bottom:1px solid var(--color-action)}
section[id]{scroll-margin-top:170px}

/* ── калькулятор на узком экране ───────────────────────── */
@media (max-width:720px){
  .calc-grid{grid-template-columns:1fr!important}
}

/* ── состав комплекта списком ───────────────────────────── */
.bom{columns:2;column-gap:var(--space-6);margin:var(--space-4) 0 0;padding:0;list-style:none;font-size:var(--fs-200)}
.bom li{padding:9px 0 9px 20px;border-bottom:1px solid var(--color-border-subtle);position:relative;break-inside:avoid}
.bom li::before{content:"—";position:absolute;left:0;color:var(--color-action)}
@media (max-width:720px){.bom{columns:1}}

/* ровно четыре карточки — в два столбца, без пустых ячеек (на планшете блок остаётся в одну колонку) */
@media (min-width:1050px){
  .features:has(> div:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}