/* Собрано из src/css — правьте исходники или этот файл напрямую. */

/* ==== 00-base.css ==== */
/* ==========================================================================
   «Окна ТОП» · стиль «Улица / Дом» — фундамент.
   Токены, сброс, типографика, общие компоненты, reveal, фокус, reduced motion.
   Секции используют ТОЛЬКО эти имена и не переопределяют компоненты.
   Холодные тона = улица / проблема. Тёплый оранжевый = дом / результат / действие.
   ========================================================================== */

:root{
  --frame:#22272C; --frame-2:#2E353C; --frame-3:#3B444C;
  --ink:#1A1E22; --muted:#56616B; --line:rgba(26,30,34,.12); --line-strong:rgba(26,30,34,.24);
  --paper:#F4F5F3; --white:#FFFFFF; --fog:#E4EBEF; --fog-2:#CFDCE3; --street:#8FA4B2; --street-deep:#5D7385;
  --home:#FF8A3D; --home-hover:#FF9B57; --home-press:#E8742A; --home-soft:#FFF1E6; --home-glow:rgba(255,138,61,.35);
  --glass:#C7DCE7; --glass-hi:#EEF6FA; --glass-edge:#9FBBCB;
  --ok:#2F8F5B; --danger:#C8452C; --max:#0284C7; --max-hover:#0369A1;
  --on-dark:#F2F4F5; --on-dark-muted:#A9B4BC;
  --font-display:"Wix Madefor Display","Onest",system-ui,sans-serif; --font-body:"Onest",system-ui,sans-serif;
  --fs-hero:clamp(2.5rem, 1.6rem + 3.6vw, 5rem); --fs-h2:clamp(2rem, 1.5rem + 2vw, 3.5rem); --fs-h3:clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --fs-lead:clamp(1.1875rem, 1.1rem + .35vw, 1.4375rem); --fs-body:1.125rem; --fs-small:1rem; --fs-label:.9375rem;
  --lh-tight:1.02; --lh-heading:1.1; --lh-body:1.6;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --section-y:clamp(88px, 7vw + 40px, 176px); --container:1280px; --pad-x:clamp(16px, 4vw, 48px); --header-h:72px;
  --r-1:10px; --r-2:16px; --r-3:24px; --r-4:32px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(26,30,34,.06), 0 4px 12px -4px rgba(26,30,34,.10);
  --shadow-2:0 2px 6px rgba(26,30,34,.06), 0 24px 48px -20px rgba(26,30,34,.28);
  --shadow-warm:0 18px 40px -16px var(--home-glow);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-1:160ms; --dur-2:320ms; --dur-3:640ms; --dur-4:1200ms;
  --z-header:100; --z-mobilebar:110; --z-overlay:200;

  /* расширение фундамента (не ломает §2): */
  --mb-h:0px;                 /* высота нижней панели на мобильном, когда она видна (ставит mobilebar.js) */
  --home-ink:#9A4412;         /* тёмный оранжевый для текста на --home-soft (контраст AA) */
  --home-text:#CC5F1C;        /* оранжевый для крупных цифр и иконок на светлом фоне (4:1 на белом) */
}

/* ---------- схема цвета: светлая по умолчанию, тёмная для .section--dark / .card--dark ---------- */
:root, .scheme-light, .card, .card--glass{
  --fg:var(--ink);
  --muted:#56616B;
  --line:rgba(26,30,34,.12);
  --line-strong:rgba(26,30,34,.24);
  --surface:var(--white);
  --hover-tint:rgba(26,30,34,.05);
}
.section--dark, .card--dark, .scheme-dark{
  --fg:var(--on-dark);
  --muted:var(--on-dark-muted);
  --line:rgba(242,244,245,.14);
  --line-strong:rgba(242,244,245,.30);
  --surface:var(--frame-2);
  --hover-tint:rgba(242,244,245,.08);
  color:var(--fg);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-tap-highlight-color:transparent;
}
body{
  min-height:100vh;
  background:var(--paper); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  font-weight:400; font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,picture,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
button:disabled{cursor:default}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
table{border-collapse:collapse}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
[hidden]{display:none !important}
#main:focus{outline:none}
address{font-style:normal}

/* ---------- типографика ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:var(--lh-heading);letter-spacing:-.02em;text-wrap:balance;color:var(--fg)}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em}
p,li,dd,figcaption{text-wrap:pretty}
strong,b{font-weight:600}
small{font-size:var(--fs-small)}
::selection{background:var(--home);color:var(--ink)}

.h-hero{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-hero);
  line-height:var(--lh-tight); letter-spacing:-.035em; text-wrap:balance;
}
.h2{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2);
  line-height:var(--lh-heading); letter-spacing:-.03em; text-wrap:balance;
}
.h3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.012em}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--muted);max-width:58ch;text-wrap:pretty}
.muted{color:var(--muted)}
.tabular{font-variant-numeric:tabular-nums}
.small{font-size:var(--fs-small)}

/* заголовок секции */
.sec-head{display:grid;gap:clamp(16px, 1.6vw, 24px);max-width:860px;margin-bottom:clamp(40px, 5vw, 80px)}
.sec-head--center{margin-inline:auto;text-align:center;justify-items:center}
@media (min-width:900px){
  .sec-head--split{max-width:none;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;column-gap:clamp(32px,6vw,96px)}
}

/* надзаголовок: ТОЛЬКО в hero */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.3;
}
.kicker::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--home);box-shadow:0 0 0 4px var(--home-glow);flex:none}

/* ---------- раскладка ---------- */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--pad-x));margin-inline:auto;padding-inline:var(--pad-x)}
.section{position:relative;padding-block:var(--section-y);isolation:isolate}
.section--paper{background:var(--paper)}
.section--white{background:var(--white)}
.section--fog{background:var(--fog)}
.section--dark{background:var(--frame);color:var(--fg)}
.section--dark ::selection{background:var(--home);color:var(--ink)}

/* ---------- иконки (спрайт в index.html) ---------- */
.icon{
  width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.25em;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.icon--sm{width:1em;height:1em;vertical-align:-.14em}
.icon--lg{width:1.6em;height:1.6em}

/* ---------- кнопки ---------- */
.btn{
  --btn-h:52px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--btn-h);padding:0 26px;border-radius:var(--r-pill);
  border:1.5px solid transparent;background:transparent;color:var(--fg);
  font-family:var(--font-body);font-size:1.0625rem;font-weight:600;line-height:1.15;letter-spacing:-.005em;
  text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;user-select:none;
  transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease,
             box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.btn .icon{width:1.25em;height:1.25em}
.btn:active{transform:scale(.98);transition-duration:80ms}
.btn--primary{background:var(--home);color:var(--ink)}
.btn--primary:hover{background:var(--home-hover);box-shadow:var(--shadow-warm);transform:translateY(-1px)}
.btn--primary:active{background:var(--home-press);box-shadow:none;transform:scale(.98)}
.btn--dark{background:var(--frame);color:var(--white)}
.btn--dark:hover{background:var(--frame-2)}
.btn--light{background:var(--white);color:var(--ink);border-color:rgba(26,30,34,.16)}
.btn--light:hover{border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--fg);background:var(--hover-tint)}
.btn--max{background:var(--max);color:var(--white)}
.btn--max:hover{background:var(--max-hover)}
.btn--lg{--btn-h:60px;padding:0 32px;font-size:1.125rem}
.btn--sm{--btn-h:44px;padding:0 18px;font-size:1rem;gap:8px}
.btn--block{display:flex;width:100%}
.btn--icon{padding:0;width:var(--btn-h);flex:none}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none}
.btn[aria-busy="true"]{color:transparent !important;pointer-events:none}
.btn[aria-busy="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;
  border:2.5px solid rgba(26,30,34,.25);border-top-color:var(--ink);animation:hm-spin .8s linear infinite;
}
.btn--dark[aria-busy="true"]::after,.btn--max[aria-busy="true"]::after{border-color:rgba(255,255,255,.3);border-top-color:#fff}
@keyframes hm-spin{to{transform:rotate(360deg)}}
@media (max-width:379px){.btn{padding-inline:20px}.btn--lg{padding-inline:24px}}

/* текстовая ссылка */
.link{
  display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.25em;
  transition:text-decoration-color var(--dur-1) ease, color var(--dur-1) ease;
}
.link:hover{text-decoration-color:var(--home)}

/* ---------- чипы и сегменты ---------- */
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);background:transparent;color:var(--fg);
  font-size:1rem;font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;user-select:none;position:relative;
  transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.chip:hover{border-color:var(--fg)}
.chip:active{transform:scale(.97)}
.chip .icon{width:1.2em;height:1.2em}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.chip[aria-selected="true"],.chip.is-active,.chip:has(input:checked){
  background:var(--frame);border-color:var(--frame);color:var(--white);
}
.section--dark .chip[aria-pressed="true"],.section--dark .chip[aria-checked="true"],.section--dark .chip[aria-selected="true"],
.section--dark .chip.is-active,.section--dark .chip:has(input:checked),
.card--dark .chip[aria-pressed="true"],.card--dark .chip[aria-checked="true"],.card--dark .chip.is-active,.card--dark .chip:has(input:checked){
  background:var(--on-dark);border-color:var(--on-dark);color:var(--ink);
}
.section--dark .card .chip[aria-pressed="true"],.section--dark .card .chip[aria-checked="true"],
.section--dark .card .chip.is-active,.section--dark .card .chip:has(input:checked){
  background:var(--frame);border-color:var(--frame);color:var(--white);
}
.chip input[type="radio"],.chip input[type="checkbox"]{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip:has(input:focus-visible){outline:3px solid var(--home);outline-offset:3px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg > legend{font-size:var(--fs-label);font-weight:600;margin-bottom:10px;width:100%}

/* ---------- карточки ---------- */
.card{
  position:relative;background:var(--white);color:var(--fg);
  border-radius:var(--r-3);box-shadow:var(--shadow-1);
  padding:clamp(24px, 1.5vw + 18px, 40px);
}
.card--glass{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-2);
}
.card--dark{background:var(--frame-2);box-shadow:none;border:1px solid var(--line)}

/* ---------- формы ---------- */
.field{display:grid;gap:8px;min-width:0}
.field__label{font-size:var(--fs-small);font-weight:600;line-height:1.35;color:var(--fg)}
.field__label .req{color:var(--danger);margin-left:2px}
.field__hint{font-size:var(--fs-label);line-height:1.45;color:var(--muted)}
.field__error{display:none;align-items:flex-start;gap:8px;font-size:var(--fs-label);line-height:1.4;font-weight:500;color:var(--danger)}
.field__error::before{
  content:"!";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:.8125rem;font-weight:700;line-height:1;
}
.field.is-invalid .field__error{display:flex}
.input,.textarea,.select{
  width:100%;min-height:56px;padding:0 18px;border-radius:var(--r-2);
  border:1.5px solid rgba(26,30,34,.24);background:var(--white);color:var(--ink);
  font-size:1.125rem;line-height:1.4;outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color var(--dur-1) ease, box-shadow var(--dur-2) var(--ease-out);
}
.input::placeholder,.textarea::placeholder{color:#7A858F;opacity:1}
.input:hover,.textarea:hover,.select:hover{border-color:rgba(26,30,34,.42)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--home-press);box-shadow:0 0 0 4px var(--home-glow)}
.textarea{min-height:128px;padding:14px 18px;resize:vertical}
.select{
  padding-right:48px;cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 25px) 50%, calc(100% - 19px) 50%;background-size:6px 6px;background-repeat:no-repeat;
}
.field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{border-color:var(--danger);box-shadow:0 0 0 4px rgba(200,69,44,.14)}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--paper);color:var(--muted);cursor:not-allowed}

.check{display:flex;align-items:flex-start;gap:14px;cursor:pointer;font-size:var(--fs-small);line-height:1.5;position:relative;min-height:44px;padding-top:10px}
.check input{position:absolute;opacity:0;width:26px;height:26px;margin:0;top:10px;left:0;cursor:pointer}
.check__box{
  flex:none;position:relative;width:26px;height:26px;margin-top:-1px;border-radius:8px;
  border:1.5px solid var(--line-strong);background:var(--white);
  transition:background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.check__box::after{
  content:"";position:absolute;left:8px;top:3.5px;width:7px;height:13px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.3);opacity:0;
  transition:transform var(--dur-2) var(--ease-spring), opacity var(--dur-1) ease;
}
.check input:checked + .check__box{background:var(--home);border-color:var(--home)}
.check input:checked + .check__box::after{opacity:1;transform:rotate(45deg) scale(1)}
.check input:focus-visible + .check__box{outline:3px solid var(--home);outline-offset:3px}
.check a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong)}
.field.is-invalid .check__box,.check.is-invalid .check__box{border-color:var(--danger)}

.stepper{
  display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);background:var(--surface);
}
.stepper__btn{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--fg);
  transition:background-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.stepper__btn:hover{background:var(--hover-tint)}
.stepper__btn:active{transform:scale(.92)}
.stepper__btn:disabled{opacity:.35}
.stepper__btn .icon{width:22px;height:22px}
.stepper__value{min-width:4.5ch;text-align:center;font-family:var(--font-display);font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums}

/* ---------- цена, бейдж ---------- */
.price{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
.price__from{font-family:var(--font-body);font-weight:500;font-size:.55em;letter-spacing:0;color:var(--muted);margin-right:.25em}
.badge{
  display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--fog);color:var(--frame-2);font-size:var(--fs-label);font-weight:600;line-height:1.2;white-space:nowrap;
}
.badge .icon{width:1.1em;height:1.1em}
.badge--home{background:var(--home-soft);color:var(--home-ink)}
.badge--dark{background:var(--frame);color:var(--white)}
.badge--ok{background:#E3F2EA;color:#1F6B43}
.section--dark .badge:not(.badge--home):not(.badge--ok):not(.badge--dark){background:var(--frame-2);color:var(--on-dark)}
.section--dark .card .badge:not(.badge--home):not(.badge--ok):not(.badge--dark){background:var(--fog);color:var(--frame-2)}

/* заметка */
.note{padding:14px 18px;border-radius:var(--r-2);background:var(--home-soft);color:var(--ink);font-size:var(--fs-small);line-height:1.5}

/* ---------- фокус, доступность ---------- */
:focus{outline:none}
:focus-visible{outline:3px solid var(--home);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.chip:focus-visible{border-radius:var(--r-pill)}
.visually-hidden,.sr-only{
  position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;
}
.skip-link{
  position:fixed;left:var(--pad-x);top:12px;z-index:calc(var(--z-overlay) + 10);
  padding:14px 22px;border-radius:var(--r-pill);background:var(--home);color:var(--ink);
  font-weight:600;text-decoration:none;
  transform:translateY(calc(-100% - 24px));transition:transform var(--dur-2) var(--ease-out);
}
/* тень только у показанной ссылки: у спрятанной она проступала пятном у верхнего края */
.skip-link:focus,.skip-link:focus-visible{transform:none;box-shadow:var(--shadow-2)}

/* ---------- reveal ---------- */
html.js [data-reveal]:not(.is-revealed){opacity:0;transform:translate3d(0,24px,0)}
html.js [data-reveal="fade"]:not(.is-revealed){transform:none}
html.js [data-reveal="scale"]:not(.is-revealed){transform:scale(.96)}
html.js [data-reveal]{
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay:var(--rv-delay, 0ms);
}
html.js [data-reveal].is-revealed{opacity:1;transform:none}

/* ---------- черновик: плейсхолдеры ---------- */
html.is-draft [data-placeholder]{outline:1.5px dashed var(--danger);outline-offset:2px}

/* до загрузки стилей — без переходов (нет «мигания» состояний) */
html.js:not(.is-loaded) *,html.js:not(.is-loaded) *::before,html.js:not(.is-loaded) *::after{transition:none !important}

/* скриншот-режим */
html.is-shot [data-reveal]{opacity:1 !important;transform:none !important}
html.is-shot *,html.is-shot *::before,html.is-shot *::after{transition-duration:0s !important;transition-delay:0s !important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important;
  }
  html.js [data-reveal]:not(.is-revealed){opacity:1;transform:none}
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ==== header.css ==== */
/* ==========================================================================
   header — прозрачная над светлым hero (тёмный текст) → белая с тенью после 40px.
   Мобильный: знак + звонок + меню (светлая шторка на весь экран).
   ========================================================================== */
.site-header{
  --hdr-fg:var(--ink);
  --hdr-muted:#56616B;
  --hdr-line:rgba(26,30,34,.18);
  --hdr-tint:rgba(26,30,34,.05);
  --hdr-pane:var(--ink);
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  padding-top:env(safe-area-inset-top, 0px);
  color:var(--hdr-fg);
  transition:color var(--dur-2) ease;
}
/* фон — отдельным слоем: backdrop-filter на самой шапке сломал бы position:fixed у шторки меню */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:0 1px 0 rgba(26,30,34,.08), 0 12px 32px -20px rgba(26,30,34,.35);
  opacity:0;transform:translateY(-8px);
  transition:opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
.site-header.is-solid::before{opacity:1;transform:none}
html.menu-open .site-header{z-index:var(--z-overlay)}

.hdr{
  display:flex;align-items:center;gap:clamp(12px, 2vw, 28px);
  height:72px;
}

/* ---------- знак и название ---------- */
.hdr-brand{
  display:inline-flex;align-items:center;gap:12px;min-height:48px;
  color:inherit;text-decoration:none;flex:none;margin-right:auto;border-radius:12px;
}
.brand-mark{width:34px;height:34px;flex:none;overflow:visible}
.brand-mark__pane{fill:none;stroke:var(--hdr-pane, currentColor);stroke-width:2;transition:stroke var(--dur-2) ease}
.brand-mark__pane--lit{fill:var(--home);stroke:var(--home)}
.hdr-brand__text{display:grid;gap:3px;line-height:1}
.hdr-brand__word{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:.05em;white-space:nowrap}
.hdr-brand__addr{display:none;font-size:.875rem;font-weight:500;color:var(--hdr-muted);white-space:nowrap;letter-spacing:0;transition:color var(--dur-2) ease}

/* «включается свет» в окне: одна створка загорается после загрузки */
@media (prefers-reduced-motion: no-preference){
  html.is-booted .hdr-brand .brand-mark__pane--lit{animation:hm-lit 1.1s var(--ease-out) .2s both}
  html.is-shot .hdr-brand .brand-mark__pane--lit{animation:none}
}
@keyframes hm-lit{
  0%{opacity:.18}
  35%{opacity:.6}
  48%{opacity:.3}
  100%{opacity:1}
}


/* ---------- навигация ---------- */
.hdr-nav{display:none}
.hdr-nav__list{display:flex;align-items:center;gap:2px}
.hdr-nav__link{
  position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);
  font-size:1.0625rem;font-weight:500;color:inherit;text-decoration:none;white-space:nowrap;
  transition:background-color var(--dur-1) ease;
}
.hdr-nav__link::after{
  content:"";position:absolute;left:50%;bottom:4px;width:6px;height:6px;margin-left:-3px;border-radius:2px;
  background:var(--home);
  transform:scale(0);transition:transform var(--dur-2) var(--ease-spring);
}
.hdr-nav__link:hover{background:var(--hdr-tint)}
.hdr-nav__link.is-current::after{transform:scale(1)}

/* ---------- действия ---------- */
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.hdr-phone{
  display:none;flex-direction:column;align-items:flex-end;gap:2px;min-height:48px;justify-content:center;
  color:inherit;text-decoration:none;border-radius:12px;padding:0 4px;
}
.hdr-phone__num{font-family:var(--font-display);font-weight:700;font-size:1.1875rem;letter-spacing:-.01em;white-space:nowrap;line-height:1.1}
.hdr-phone:hover .hdr-phone__num{text-decoration:underline;text-decoration-color:var(--home);text-underline-offset:.2em;text-decoration-thickness:2px}
.hdr-phone__status{font-size:.875rem;color:var(--hdr-muted);transition:color var(--dur-2) ease}

.chr-status{display:inline-flex;align-items:center;gap:8px;line-height:1.3;white-space:nowrap}
.chr-status__dot{width:8px;height:8px;border-radius:50%;background:var(--street);flex:none}
.chr-status[data-state="open"] .chr-status__dot{background:#3FB877;box-shadow:0 0 0 3px rgba(63,184,119,.22)}

.hdr-max{display:none;--btn-h:48px;padding:0 20px;font-size:1rem;gap:8px}
.hdr-max__short{display:none}

.hdr-icon{
  display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none;
  color:inherit;border:1.5px solid var(--hdr-line);background:transparent;text-decoration:none;
  transition:background-color var(--dur-1) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.hdr-icon:hover{background:var(--hdr-tint)}
.hdr-icon:active{transform:scale(.94)}
.hdr-icon .icon{width:22px;height:22px}
.hdr-call{background:var(--home);border-color:var(--home);color:var(--ink)}
.hdr-call:hover{background:var(--home-hover)}
.hdr-burger__lines{position:relative;display:block;width:20px;height:12px}
.hdr-burger__lines i{
  position:absolute;left:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out);
}
.hdr-burger__lines i:first-child{top:0;width:20px}
.hdr-burger__lines i:last-child{bottom:0;width:13px}
.hdr-burger:hover .hdr-burger__lines i:last-child{width:20px}

@media (min-width:600px){
  .hdr-brand__addr{display:block}
  .hdr-max{display:inline-flex}
  .hdr-call{display:none}
}
@media (min-width:600px) and (max-width:899px){
  .hdr-max__long{display:none}
  .hdr-max__short{display:inline}
}
@media (min-width:900px){
  .hdr-phone{display:flex}
}
@media (min-width:1200px){
  .hdr-nav{display:block;margin-inline:auto}
  .hdr-brand{margin-right:0}
  .hdr-burger{display:none}
}
@media (min-width:1200px) and (max-width:1359px){
  .hdr-brand__addr,.hdr-phone__status{display:none}
  .hdr-max__long{display:none}
  .hdr-max__short{display:inline}
  .hdr-nav__link{padding:0 12px}
}

/* ==========================================================================
   Мобильное меню — светлая шторка. Открывается сверху вниз, как рулонная штора.
   ========================================================================== */
.msh{
  position:fixed;inset:0;z-index:var(--z-overlay);
  color:var(--ink);
}
.msh__panel{
  position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding-top:env(safe-area-inset-top, 0px);padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  background:var(--paper);
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-3) var(--ease-inout);
}
.msh.is-open .msh__panel{clip-path:inset(0 0 0 0)}
.msh__top{display:flex;align-items:center;justify-content:space-between;height:72px;flex:none}
.msh__brand{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.msh .brand-mark__pane{stroke:var(--ink)}
.msh .hdr-icon{border-color:rgba(26,30,34,.18);color:var(--ink)}
.msh .hdr-icon:hover{background:rgba(26,30,34,.05)}

.msh-nav{padding-block:8px 24px}
.msh-nav__list > li{
  border-bottom:1px solid rgba(26,30,34,.10);
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay:calc(120ms + var(--i, 0) * 50ms);
}
.msh.is-open .msh-nav__list > li{opacity:1;transform:none}
.msh-link{
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;row-gap:2px;
  padding:18px 0;min-height:72px;color:inherit;text-decoration:none;
}
.msh-link__label{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);letter-spacing:-.025em;line-height:1.05}
.msh-link__desc{grid-column:1;font-size:1rem;color:var(--muted)}
.msh-link .icon{grid-column:2;grid-row:1 / span 2;width:28px;height:28px;color:var(--muted);transition:transform var(--dur-2) var(--ease-out), color var(--dur-1) ease}
.msh-link:hover .icon,.msh-link:focus-visible .icon{transform:translateX(4px);color:var(--home-text)}
.msh-link.is-current .msh-link__label::after{
  content:"";display:inline-block;width:8px;height:8px;margin-left:12px;vertical-align:.45em;border-radius:2px;background:var(--home);
}

.msh-foot{
  margin-top:auto;display:grid;gap:14px;padding-top:12px;
  opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-3) var(--ease-out) 380ms, transform var(--dur-3) var(--ease-out) 380ms;
}
.msh.is-open .msh-foot{opacity:1;transform:none}
.msh-foot__phone{font-family:var(--font-display);font-weight:700;font-size:1.75rem;letter-spacing:-.015em;color:inherit;text-decoration:none;justify-self:start}
.msh-foot__status{color:var(--muted);font-size:1rem;white-space:normal}
.msh-foot__actions{display:grid;gap:10px;margin-top:6px}
.msh-foot__addr{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:1rem;line-height:1.5;margin-top:6px}
.msh-foot__addr .icon{margin-top:2px;color:var(--home-text)}
@media (min-width:600px){
  .msh-foot__actions{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion: reduce){
  .msh__panel{clip-path:none;opacity:0;transition:opacity var(--dur-1) linear}
  .msh.is-open .msh__panel{opacity:1}
  .msh-nav__list > li,.msh-foot{opacity:1;transform:none}
}

/* ==== hero.css ==== */
/* ============ HERO «Окно в мир» ============
   Светлая дневная сцена: стена комнаты, окно REHAU (антрацит), за стеклом город днём.
   Холодное = улица (шум, холод), тёплое = дом (результат, действие).
   3D: .hw-stage (perspective) → .hw-rig (preserve-3d) → грани .hf / группы .hp.
   Состояние окна — класс #hero.is-closed. Анимации: только transform / opacity.
   Телефон (<600px): текст и кнопки → сцена в карточке с приборами → факты строками таблицы. */

#hero {
  --hw-k: .6;                       /* масштаб сцены, уточняет hero.js по ширине колонки */
  --hero-wall: #ECEEEA;             /* стена комнаты: фон секции и край сцены */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, #F4F5F2 0%, var(--hero-wall) 100%);
  color: var(--ink);
  padding-block: calc(var(--header-h) + clamp(16px, 2.2vw, 32px)) 0;
}

/* ---------- сетка ---------- */
#hero .hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  #hero .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 4vw, 56px); }
}

/* ---------- текст ---------- */
#hero .hero__copy { position: relative; z-index: 2; max-width: 620px; }
#hero .hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2.9vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
#hero .hero__lead {
  margin: clamp(14px, 1.6vw, 24px) 0 0;
  max-width: 36ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
}
#hero .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
#hero .hero__cta .btn .icon { transition: transform var(--dur-2) var(--ease-out); }
#hero .hero__cta .btn--primary:hover .icon { transform: translateX(4px); }
#hero .hero__max .icon { color: var(--max); }
#hero .hero__call { display: none; }
#hero .hero__phone {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 20px 0 0;
  font-size: var(--fs-small); color: var(--muted);
}
#hero .hero__tel {
  font: 600 var(--fs-body)/1.3 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-1);
}
#hero .hero__tel:hover { text-decoration-color: var(--home); }
#hero .hero__status { display: none; margin: 14px 0 0; font-size: var(--fs-label); color: var(--muted); }
/* ночью статус длинный («Сейчас закрыто. Напишите, ответим завтра в 8:00») — переносим, а не распираем экран */
#hero .hero__status { white-space: normal; align-items: flex-start; }
#hero .hero__status .chr-status__dot { margin-top: .4em; }

/* ---------- визуал: сцена масштабируется целиком ---------- */
#hero .hero__visual { position: relative; min-width: 0; }
#hero .hw-box { position: relative; height: calc(566px * var(--hw-k)); }
#hero .hw-stage {
  position: absolute; left: calc(50% + var(--hw-bleed, 0px) / 2); top: 0;
  width: 600px; height: 612px; margin-left: -300px;
  transform: scale(var(--hw-k)); transform-origin: 50% 0;
  perspective: 1500px; perspective-origin: 50% 40%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#hero .hw-rig {
  position: absolute; left: 50%; top: 272px; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(4deg) rotateY(-18deg);
}
#hero .hp { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: var(--gt); }
#hero .hf {
  position: absolute; left: 0; top: 0;
  width: var(--w); height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform: var(--t);
}
#hero .hf > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* стена, откосы, подоконник: белая штукатурка, свет идёт от стекла */
#hero .hw-wall-edge { fill: none; stroke: rgba(26,30,34,.12); stroke-width: 1.5; }
#hero .hf--jamb { backface-visibility: hidden; }
#hero .hf--jamb-l { background: linear-gradient(90deg, #BCC5CA 0%, #D5DCDF 45%, #EEF2F3 100%); }
#hero .hf--jamb-r { background: linear-gradient(270deg, #B8C1C6, #D2D9DC); }
#hero .hf--jamb-t { background: linear-gradient(180deg, #BAC3C8, #D3DADD); }
#hero .hf--sill { background: linear-gradient(180deg, #E9EDEE, #F8F9F9 70%, #FFFFFF); }
#hero .hf--sill-in { background: linear-gradient(180deg, #C6CED2, #DDE3E6); }
#hero .hf--sill-edge {
  background: linear-gradient(180deg, #FFFFFF, #CDD4D8); border-radius: 0 0 3px 3px;
  box-shadow: 0 1px 0 rgba(26,30,34,.18), 0 18px 24px -12px rgba(26,30,34,.3);
}

/* рама и створки: профиль REHAU, антрацит */
#hero .hw-pvc-hi { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1.2; }
#hero .hw-pvc-lo { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 2; }
#hero .hw-bead { fill: none; stroke: rgba(0,0,0,.32); stroke-width: 1.2; }
#hero .hw-weep rect { fill: #1B2025; }
#hero .hf--depth { backface-visibility: hidden; background: #2A3137; }
#hero .hf--depth-lo { background: #3A434B; }
#hero .hf--depth-lit { background: linear-gradient(90deg, #46515A, #5A6670); }
#hero .hf--sash-edge { background: linear-gradient(90deg, #2B3238, #3F4851 50%, #2B3238); }
#hero .hf--sash-top { background: #4A545D; }
#hero .hf--pane {
  background:
    linear-gradient(118deg, transparent 28%, rgba(255,255,255,.34) 36%, rgba(255,255,255,.10) 44%, transparent 52%, rgba(255,255,255,.14) 68%, transparent 75%),
    rgba(199,220,231,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
#hero .hf--pane-mid, #hero .hf--pane-back { background: rgba(199,220,231,.06); box-shadow: inset 0 0 0 1px rgba(159,187,203,.28); }
#hero .hw-warm {
  background:
    radial-gradient(90% 60% at 18% 100%, rgba(255,138,61,.24), transparent 70%),
    radial-gradient(30% 18% at 74% 22%, rgba(255,214,170,.18), transparent 70%);
  opacity: 0;
  transition: opacity .9s var(--ease-out);
}
#hero.is-closed .hw-warm { opacity: 1; transition-delay: 1.05s; }
#hero .hf--rosette { border-radius: 6px; background: linear-gradient(90deg, #AEB6BC, #E4E8EA 55%, #B9C0C5); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
#hero .hf--lever { border-radius: 5px; background: linear-gradient(90deg, #BFC6CB, #F1F3F4 50%, #C3C9CE); box-shadow: 0 3px 6px rgba(0,0,0,.3); }

/* правая створка: открыто → повёрнута внутрь комнаты */
#hero .hw-sash--r {
  --gt: translate3d(212px, 0, -58px) rotateY(52deg);
  transition: transform 1.25s var(--ease-inout) .3s;
}
#hero.is-closed .hw-sash--r { --gt: translate3d(212px, 0, -58px) rotateY(0deg); transition-delay: 0s; }
#hero .hw-lever {
  --gt: translate3d(-195px, -9px, 2px) rotateZ(-90deg);
  transition: transform .34s var(--ease-out) 0s;
}
#hero.is-closed .hw-lever { --gt: translate3d(-195px, -9px, 2px) rotateZ(0deg); transition-delay: 1.2s; }

/* ---------- город днём ---------- */
#hero .hw-view { overflow: hidden; background: #DDE7ED; }
#hero .hw-l { position: absolute; left: -30px; right: -30px; top: -20px; bottom: -20px; will-change: transform; }
#hero .hw-l > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hero .hw-l--sky {
  background:
    radial-gradient(30% 20% at 74% 20%, rgba(255,251,238,.9), rgba(255,246,222,.3) 50%, transparent 72%),
    linear-gradient(180deg, #A7C8DF 0%, #BBD5E7 24%, #D2E2EC 42%, #E5EDF1 52%, #F0EEE8 57%, #E2E9EC 64%);
}
#hero .hw-stars, #hero .hw-plane, #hero .hw-av, #hero .hw-lit, #hero .hw-tw, #hero .hw-lamps { display: none; }
/* солнце в дымке: на месте ночной луны */
#hero .hw-moon {
  position: absolute; left: 386px; top: 92px; width: 30px; height: 30px; border-radius: 50%;
  background: #FFFCF2;
  box-shadow: 0 0 0 7px rgba(255,252,242,.35), 0 0 44px 18px rgba(255,240,205,.5);
}

#hero .hw-far { fill: #A9BBC8; }
#hero .hw-l--haze { background: linear-gradient(180deg, transparent 44%, rgba(255,255,255,.42) 56%, rgba(236,242,245,.32) 66%, transparent 80%); }
#hero .hw-bld { fill: #8FA3B2; }
#hero .hw-walk { fill: #B8C3CA; }
#hero .hw-road { fill: #7E8C96; }
#hero .hw-lane { stroke: rgba(255,255,255,.75); stroke-width: 1.2; stroke-dasharray: 10 12; }
#hero .hw-poles { fill: none; stroke: #6E7E89; stroke-width: 1.6; }
#hero .hw-car {
  position: absolute; left: 0; top: var(--y); width: 26px; height: 6px; margin-top: -3px; border-radius: 3px;
  transform: translate3d(var(--sx), 0, 0);
  animation: hw-drive var(--du) linear var(--dl) infinite;
}
#hero .hw-car--w { background: #F8F9F9; box-shadow: inset 0 -2px 0 rgba(26,30,34,.2); }
#hero .hw-car--r { background: #46515B; animation-name: hw-drive-back; }
@keyframes hw-drive { from { transform: translate3d(-120px, 0, 0); } to { transform: translate3d(560px, 0, 0); } }
@keyframes hw-drive-back { from { transform: translate3d(560px, 0, 0); } to { transform: translate3d(-120px, 0, 0); } }
#hero .hw-trees { fill: #7D9886; }
#hero .hw-trunk { fill: none; stroke: #637B6B; stroke-width: 6; stroke-linecap: round; }
#hero .hw-tree { transform-box: fill-box; transform-origin: 50% 100%; animation: hw-sway 7s ease-in-out infinite alternate; }
#hero .hw-tree--r { animation-duration: 8.5s; animation-delay: -3s; }
@keyframes hw-sway { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
#hero .hw-view__shade { position: absolute; inset: 0; box-shadow: inset 0 0 34px 4px rgba(46,62,76,.2); }

/* ---------- воздух с улицы: волны шума и холод ---------- */
#hero .hw-air { transition: opacity .5s var(--ease-out) .55s; }
#hero.is-closed .hw-air { opacity: 0; transition: opacity .55s var(--ease-out) 0s; }
#hero .hw-ring {
  position: absolute; left: -100px; top: -100px; width: 200px; height: 200px; border-radius: 50%;
  border: 2px solid rgba(93,115,133,.5);
  opacity: 0;
  animation: hw-wave 3.3s linear infinite;
}
#hero .hw-ring:nth-child(2) { animation-delay: -1.1s; }
#hero .hw-ring:nth-child(3) { animation-delay: -2.2s; }
@keyframes hw-wave {
  0% { transform: translate3d(0, 0, 0) scale(.3); opacity: 0; }
  18% { opacity: .75; }
  100% { transform: translate3d(-30px, 10px, 250px) scale(1.45); opacity: 0; }
}
#hero .hw-p {
  position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: 50%;
  background: #8BA2B3;
  opacity: 0;
  animation: hw-air var(--du) linear var(--dl) infinite;
}
@keyframes hw-air {
  0% { transform: translate3d(var(--x), var(--y), 0); opacity: 0; }
  15% { opacity: .85; }
  100% { transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), 230px); opacity: 0; }
}

/* ---------- панель «Закройте окно» ---------- */
#hero .hw-panel {
  position: relative; z-index: 3;
  display: grid; gap: 0 20px;
  margin: -16px auto 0; max-width: 560px;
  padding: 20px;
  border-radius: var(--r-3);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(26,30,34,.08);
  box-shadow: 0 1px 2px rgba(26,30,34,.05), 0 24px 48px -30px rgba(26,30,34,.4);
}
@media (min-width: 900px) {
  #hero .hw-panel { margin: -28px 0 0; max-width: none; padding: 18px 20px; }
  #hero .hw-panel__title, #hero .hw-panel__sub { display: none; }
  #hero .hw-panel .hw-read { margin-top: 0; }
}
@media (min-width: 1200px) {
  #hero .hw-panel {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "sw read" "note note";
    align-items: center;
    padding: 16px 20px 14px 16px;
  }
  #hero .hw-panel .hw-read { grid-area: read; }
  #hero .hw-panel .hw-switch { grid-area: sw; margin-top: 0; width: auto; }
  #hero .hw-panel .hw-panel__note { grid-area: note; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
  #hero .hw-panel .hw-read { gap: 0 20px; }
  #hero .hw-panel .hw-read dt { font-size: var(--fs-label); white-space: nowrap; }
  #hero .hw-panel .hw-read dt .icon { display: none; }
}
#hero .hw-panel__title { margin: 0; font: 700 var(--fs-h3)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
#hero .hw-panel__sub { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
#hero .hw-read { margin: 16px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; }
#hero .hw-read__row { display: grid; gap: 6px; }
#hero .hw-read dt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted); }
#hero .hw-read dt .icon { width: 20px; height: 20px; }
#hero .hw-read dd { margin: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 14px; }
#hero .hw-num { font: 500 1.125rem/1 var(--font-body); color: var(--muted); white-space: nowrap; }
#hero .hw-num b {
  display: inline-block; min-width: 2ch;
  font: 700 clamp(2rem, 1.7rem + 1vw, 2.5rem)/1 var(--font-display); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#hero .hw-read__row--temp .hw-num b { min-width: 2.6ch; }
#hero.is-closed .hw-read__row--temp .hw-num b { color: var(--home-text); transition: color .6s 1.4s; }
#hero .hw-read__row--temp .hw-num b { transition: color .4s; }

/* эквалайзер шума: высота всей группы = громкость */
#hero .hw-eq {
  justify-self: end; display: flex; align-items: flex-end; gap: 3px; height: 28px;
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-out) .45s;
}
#hero.is-closed .hw-eq { transform: scaleY(.22); transition-delay: .95s; }
#hero .hw-eq i {
  width: 4px; height: 100%; border-radius: 2px; background: var(--street);
  transform-origin: 50% 100%;
  animation: hw-eqb .9s ease-in-out infinite alternate;
}
#hero .hw-eq i:nth-child(2) { animation-duration: .62s; animation-delay: -.3s; }
#hero .hw-eq i:nth-child(3) { animation-duration: .78s; animation-delay: -.5s; }
#hero .hw-eq i:nth-child(4) { animation-duration: .55s; animation-delay: -.1s; }
#hero .hw-eq i:nth-child(5) { animation-duration: .7s; animation-delay: -.4s; }
@keyframes hw-eqb { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

#hero .hw-bar, #hero .hw-temp {
  grid-column: 1 / -1; position: relative; display: block;
  height: 6px; border-radius: 3px; background: rgba(26,30,34,.08);
}
#hero .hw-bar i {
  position: absolute; inset: 0; border-radius: inherit; background: var(--street);
  transform-origin: 0 50%; transform: scaleX(.8);
  transition: transform .5s var(--ease-out) .45s;
}
#hero.is-closed .hw-bar i { transform: scaleX(.32); transition: transform .7s var(--ease-out) .85s; }
#hero .hw-temp { background: linear-gradient(90deg, var(--street-deep), var(--glass-edge) 30%, #FFD9BC 58%, var(--home)); }
#hero .hw-temp__rail { position: absolute; inset: 0; display: block; transform: translateX(6.7%); transition: transform 1.2s var(--ease-inout) .5s; }
#hero .hw-temp__rail i {
  position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--white); box-shadow: 0 0 0 3px var(--ink), 0 2px 6px rgba(26,30,34,.3);
}
#hero.is-closed .hw-temp__rail { transform: translateX(73%); transition: transform 1.7s var(--ease-out) .9s; }

/* кнопка-переключатель */
#hero .hw-switch {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 56px; margin-top: 20px; padding: 8px 20px 8px 10px;
  border: 1.5px solid rgba(26,30,34,.12); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink);
  font: 600 var(--fs-body)/1.2 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-2), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2);
}
#hero .hw-switch[hidden] { display: none; }
#hero .hw-switch:hover { border-color: rgba(26,30,34,.34); }
#hero .hw-switch:active { transform: scale(.98); }
#hero .hw-switch:focus-visible { outline: 3px solid var(--home); outline-offset: 3px; }
#hero .hw-switch__track {
  position: relative; flex: none; width: 60px; height: 36px; border-radius: 18px;
  background: var(--street-deep);
  transition: background-color .5s var(--ease-out);
}
#hero .hw-switch__knob {
  position: absolute; left: 4px; top: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--white); box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .45s var(--ease-spring);
}
/* ручка окна на кнопке: горизонтально = открыто, вниз = закрыто */
#hero .hw-switch__knob::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 13px; margin: -2px 0 0 -2px; border-radius: 2px;
  background: var(--frame-2); transform-origin: 50% 2px; transform: rotate(-90deg);
  transition: transform .4s var(--ease-out);
}
#hero .hw-switch[aria-pressed="true"] .hw-switch__track { background: var(--home); }
#hero .hw-switch[aria-pressed="true"] .hw-switch__knob { transform: translateX(24px); }
#hero .hw-switch[aria-pressed="true"] .hw-switch__knob::after { transform: rotate(0deg); }

#hero .hw-panel__note { margin: 12px 0 0; font-size: var(--fs-label); line-height: 1.4; color: var(--muted); }
#hero .hw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- факты ---------- */
#hero .hero__facts {
  list-style: none; margin: clamp(32px, 3vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
#hero .hero-fact { display: grid; align-content: start; gap: 6px; padding: 20px 16px 24px 0; }
#hero .hero-fact:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
#hero .hero-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
#hero .hero-fact--sm { display: none; }
#hero .hero-fact b {
  font: 700 clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem)/1 var(--font-display);
  letter-spacing: -.03em; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#hero .hero-fact span { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
@media (min-width: 900px) {
  #hero .hero__facts { grid-template-columns: repeat(4, 1fr); }
  #hero .hero-fact { padding: 20px 24px 28px; border-left: 1px solid var(--line); }
  #hero .hero-fact:first-child { padding-left: 0; border-left: 0; }
  #hero .hero-fact:nth-child(n+3) { border-top: 0; }
  #hero .hero-fact:nth-child(even) { padding-left: 24px; }
}

/* ==========================================================================
   Телефон: одна колонка, всё важное на первом экране.
   Заголовок в три строки → цена → звонок и MAX рядом → статус «работаем».
   Ниже сцена карточкой (окно + приборы), затем факты строками, как в спецификации.
   ========================================================================== */
@media (max-width: 599.98px) {
  #hero { padding-top: calc(var(--header-h) + 12px); }
  #hero .hero__grid { gap: 28px; }
  #hero .hero__lead { margin-top: 12px; font-size: 1.0625rem; line-height: 1.5; }

  #hero .hero__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 24px; }
  #hero .hero__go { grid-column: 1 / -1; width: 100%; }
  #hero .hero__call, #hero .hero__max { display: inline-flex; min-height: 52px; padding: 0 18px; gap: 8px; }
  #hero .hero__call { justify-content: flex-start; font-variant-numeric: tabular-nums; }
  #hero .hero__max-long { display: none; }
  #hero .hero__phone { display: none; }
  #hero .hero__status { display: flex; margin-top: 12px; }

  /* сцена — карточка: окно на стене сверху, приборы снизу */
  #hero .hero__visual {
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--r-3);
    background: var(--white);
    box-shadow: 0 0 0 1px rgba(26,30,34,.07), 0 22px 44px -30px rgba(26,30,34,.4);
    -webkit-mask-image: -webkit-radial-gradient(white, black);  /* Safari: скругление поверх 3D-слоёв */
  }
  #hero .hw-box { height: calc(566px * var(--hw-k) + 18px); background: #EBEEEB; }
  #hero .hw-stage { top: 18px; }
  #hero .hw-panel {
    margin: 0; max-width: none;
    padding: 16px 16px 14px;
    border: 0; border-top: 1px solid var(--line); border-radius: 0;
    background: var(--white); box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #hero .hw-panel__title, #hero .hw-panel__sub { display: none; }
  #hero .hw-read { margin-top: 0; gap: 12px 20px; }
  #hero .hw-read dt { font-size: var(--fs-label); }
  #hero .hw-read dt .icon { width: 18px; height: 18px; }
  #hero .hw-num b { font-size: 2rem; }
  #hero .hw-switch { min-height: 52px; margin-top: 14px; }
  #hero .hw-panel__note { margin-top: 10px; font-size: .875rem; }

  /* факты: строки «что — сколько», без плиток */
  #hero .hero__facts { display: block; margin-top: 8px; border-top: 0; }
  #hero .hero-fact,
  #hero .hero-fact:nth-child(even),
  #hero .hero-fact:nth-child(n+3) {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 13px 0; border: 0; border-bottom: 1px solid var(--line);
  }
  #hero .hero-fact:last-child { border-bottom: 0; padding-bottom: 20px; }
  #hero .hero-fact b {
    order: 2; flex: none;
    font: 600 1.0625rem/1.3 var(--font-body); letter-spacing: 0; text-align: right;
  }
  #hero .hero-fact span { order: 1; display: block; font-size: 1rem; line-height: 1.35; }
  #hero .hero-fact span::first-letter { text-transform: uppercase; }
}
@media (max-width: 379.98px) {
  #hero .hero__call, #hero .hero__max { padding: 0 14px; }
  #hero .hero__call { font-size: 1rem; }
}
/* самые узкие экраны: номер целиком важнее подписи, MAX остаётся иконкой (имя — в aria-label) */
@media (max-width: 349.98px) {
  #hero .hero__max { width: 52px; padding: 0; justify-content: center; }
  #hero .hero__max > span { display: none; }
}

/* ---------- пауза вне экрана, без 3D, reduced motion ---------- */
#hero.is-paused *, #hero.is-paused *::after { animation-play-state: paused !important; }
#hero.hw-instant * , #hero.hw-instant *::after { transition: none !important; }
html.no-3d #hero .hw-rig { transform: none !important; }
html.no-3d #hero .hw-air { display: none; }
@media (prefers-reduced-motion: reduce) {
  #hero *, #hero *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  #hero .hw-air { display: none; }
  #hero .hw-stage { cursor: default; }
}

/* ==== builder.css ==== */
/* builder — живой конструктор окна (#builder). Все правила внутри #builder. Токены — SPEC-V2 §2. */
#builder {
  --bld-wall: #EEECE7;          /* стена комнаты: тёплая штукатурка */
  --bld-pvc: #FCFCFB;           /* белый ПВХ */
  --bld-pvc-2: #F1F1EF;
  --bld-pvc-edge: rgba(26, 30, 34, .16);
  --bld-concrete: #CDC8BF;
  position: relative;
}
#builder .bld-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#builder .bld-head { max-width: 860px; margin-bottom: var(--s-7); }

/* ---------- раскладка ---------- */
/* высота сцены: обычная и «на привязи» (сцена прилипла под шапкой, пока листают настройки) */
#builder .bld { --bld-stage-h: 360px; --bld-dock-h: clamp(168px, 27vh, 216px); }
@media (min-width: 600px) { #builder .bld { --bld-stage-h: 440px; --bld-dock-h: clamp(200px, 30vh, 280px); } }
@media (min-width: 900px) { #builder .bld { --bld-stage-h: 480px; --bld-dock-h: clamp(280px, 40vh, 360px); } }
@media (min-width: 1200px) { #builder .bld { --bld-stage-h: 540px; } }
@supports (height: 1svh) {
  #builder .bld { --bld-dock-h: clamp(168px, 27svh, 216px); }
  @media (min-width: 600px) { #builder .bld { --bld-dock-h: clamp(200px, 30svh, 280px); } }
  @media (min-width: 900px) { #builder .bld { --bld-dock-h: clamp(280px, 40svh, 360px); } }
}
#builder .bld { display: grid; gap: var(--s-7); }
/* колонка на flex: отступы не схлопываются (иначе отступ прилипшей сцены «съедается» и страница дёргается) */
#builder .bld-main { min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 900px) {
  #builder .bld { grid-template-columns: minmax(0, 1fr) 368px; gap: var(--s-6); align-items: start; }
}
@media (min-width: 1200px) {
  #builder .bld { grid-template-columns: minmax(0, 1fr) 412px; gap: var(--s-7); }
}

/* ---------- тип изделия ---------- */
#builder .bld-types {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-4);
}
@media (min-width: 600px) { #builder .bld-types { grid-template-columns: repeat(4, 1fr); } }
#builder .bld-type {
  display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-2); background: var(--white); color: var(--ink);
  font: 600 1rem/1.2 var(--font-body); text-align: left; cursor: pointer;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
#builder .bld-type .icon { width: 26px; height: 26px; flex: none; color: var(--street-deep); transition: color var(--dur-1); }
#builder .bld-type:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); }
#builder .bld-type[aria-checked="true"] { background: var(--frame); border-color: var(--frame); color: var(--on-dark); box-shadow: var(--shadow-1); }
#builder .bld-type[aria-checked="true"] .icon { color: var(--home); }
#builder .bld-type:focus-visible,
#builder .bld-lp:focus-visible,
#builder .bld-ot:focus-visible,
#builder .bld-tab:focus-visible,
#builder .bld-swatch:focus-visible,
#builder .bld-view__btn:focus-visible,
#builder .bld-lock:has(input:focus-visible),
#builder .bld-x:focus-visible,
#builder .bld-num__btn:focus-visible,
#builder .bld-handle:focus-visible,
#builder .bld-ledger summary:focus-visible,
#builder .bld-price:focus-visible { outline: 3px solid var(--home); outline-offset: 3px; }

/* ---------- сцена ---------- */
/* сцена прилипает под шапкой и ужимается (.is-docked ставит HM.dock), пока листают настройки:
   окно перекрашивается и меняет размер на глазах. Отступ снизу = разница высот, страница не прыгает. */
#builder .bld-stagewrap {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 8px); z-index: 6;
  container-type: inline-size; perspective: 1800px; perspective-origin: 50% 50%;
  transition: margin-bottom var(--dur-3) var(--ease-out), box-shadow var(--dur-2) ease;
}
#builder .bld-stagewrap.is-docked {
  margin-bottom: calc(var(--bld-stage-h) - var(--bld-dock-h));
  background: var(--paper);
  box-shadow: 0 -8px 0 var(--paper), 0 10px 0 var(--paper), 0 28px 22px -22px rgba(26, 30, 34, .3);
}
#builder .bld-stagewrap.is-flipping .bld-stage { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }
#builder .bld-stage {
  position: relative; height: var(--bld-stage-h); border-radius: var(--r-4); overflow: hidden; isolation: isolate;
  background: var(--bld-wall); perspective: 1300px; perspective-origin: 50% 45%;
  box-shadow: inset 0 0 0 1px var(--line);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: height var(--dur-3) var(--ease-out);
}
#builder .bld-stagewrap.is-docked .bld-stage { height: var(--bld-dock-h); }
/* поле ввода с клавиатурой не прячется под прилипшей сценой */
#builder .bld-main input { scroll-margin-top: calc(var(--header-h) + var(--bld-dock-h) + 32px); }
#builder .bld-scene { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
#builder .bld-street { position: absolute; left: -60%; top: -50%; width: 220%; height: 200%; pointer-events: none; }
#builder .bld-street svg { display: block; width: 100%; height: 100%; }
#builder .bld-street--far { transform: translateZ(-900px) scale(1.7); }
#builder .bld-street--near { transform: translateZ(-260px) scale(1.2); }
#builder .bld-glow {
  position: absolute; inset: -20%; pointer-events: none; transform: translateZ(1px);
  background:
    radial-gradient(40% 45% at 18% 12%, rgba(255, 170, 110, .16), transparent 70%),
    radial-gradient(70% 40% at 50% 115%, rgba(26, 30, 34, .07), transparent 70%);
}
#builder .bld-rig { position: absolute; transform-style: preserve-3d; }
#builder .bld-rig i { display: block; }
#builder .bld-ring { position: absolute; inset: 0; box-shadow: 0 0 0 3000px var(--bld-wall); pointer-events: none; }
#builder .bld-fill { position: absolute; background: var(--bld-wall); }
#builder .bld-ao { position: absolute; inset: 0; pointer-events: none; transform: translateZ(.5px); box-shadow: 0 0 0 1px rgba(26, 30, 34, .07), 0 22px 44px -18px rgba(26, 30, 34, .22), 0 0 60px -10px rgba(26, 30, 34, .08); }

/* откосы: без отделки — бетон, с отделкой — белые */
#builder .bld-rev {
  position: absolute; pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(26, 30, 34, .10) 0 .8px, transparent 1.3px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .35) 0 .8px, transparent 1.3px) 0 0 / 9px 9px,
    var(--bld-concrete);
}
#builder .bld-rev--t { transform-origin: 50% 0; transform: rotateX(-90deg); filter: brightness(.86); }
#builder .bld-rev--b { transform-origin: 50% 100%; transform: rotateX(90deg); filter: brightness(1.04); }
#builder .bld-rev--l { transform-origin: 0 50%; transform: rotateY(90deg); filter: brightness(.97); }
#builder .bld-rev--r { transform-origin: 100% 50%; transform: rotateY(-90deg); filter: brightness(.9); }
#builder .bld-rev.is-done { background: linear-gradient(var(--rev-dir, 180deg), #FAF9F7, #EDECE8); }
#builder .bld-rev--l.is-done { --rev-dir: 90deg; }
#builder .bld-rev--r.is-done { --rev-dir: 270deg; }
#builder .bld-rev--b.is-done { --rev-dir: 0deg; }

/* окно */
#builder .bld-win { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(var(--dz)); }
#builder .bld-frame {
  position: absolute; box-sizing: border-box; border-style: solid; border-color: var(--bld-pvc);
  transform-style: preserve-3d;
  box-shadow: 0 0 0 1px var(--bld-pvc-edge), inset 0 0 0 1px var(--bld-pvc-edge), inset 0 3px 6px -3px rgba(26, 30, 34, .18);
}
#builder .bld-impost {
  position: absolute; background: var(--bld-pvc);
  box-shadow: 1px 0 0 var(--bld-pvc-edge), -1px 0 0 var(--bld-pvc-edge);
}
#builder .bld-leaf { position: absolute; transform-style: preserve-3d; cursor: pointer; }
#builder .bld-bead {
  position: absolute; inset: 0; box-sizing: border-box; border-style: solid; border-color: var(--bld-pvc-2);
  box-shadow: inset 0 0 0 1px var(--bld-pvc-edge), inset 0 3px 5px -3px rgba(26, 30, 34, .2);
}
#builder .bld-sash {
  position: absolute; box-sizing: border-box; border-style: solid; border-color: var(--bld-pvc);
  transform-style: preserve-3d; transform-origin: 0 50%;
  box-shadow: 0 0 0 1px var(--bld-pvc-edge), inset 0 0 0 1px var(--bld-pvc-edge), 0 8px 16px -10px rgba(26, 30, 34, .4);
  transition: box-shadow var(--dur-2);
}
#builder .hinge-r > .bld-sash { transform-origin: 100% 50%; }
#builder .bld-glass {
  position: absolute; overflow: hidden;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .30) 33%, rgba(255, 255, 255, .08) 44%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(199, 220, 231, .34), rgba(238, 246, 250, .10));
  box-shadow: inset 0 0 0 1px rgba(93, 115, 133, .30), inset 0 0 0 4px rgba(143, 164, 178, .16);
  transition: box-shadow var(--dur-2);
}
#builder .bld-scheme {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none;
  stroke: var(--frame); stroke-width: 1.4; stroke-linejoin: round; opacity: .7;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95));
}
#builder .bld-scheme path { stroke-dasharray: 1; stroke-dashoffset: 0; }
#builder .bld-knob {
  position: absolute; border-radius: 3px;
  background: linear-gradient(90deg, var(--knob-a, #FFFFFF), var(--knob-b, #F1F1EE) 55%, var(--knob-c, #CFCFCA));
  box-shadow: 0 1px 2px rgba(26, 30, 34, .35), 0 3px 6px -2px rgba(26, 30, 34, .3), inset 0 0 0 .5px rgba(26, 30, 34, .18);
  transform: translateZ(1.5px);
}
#builder .bld-knob.is-top { background: linear-gradient(180deg, var(--knob-a, #FFFFFF), var(--knob-b, #F1F1EE) 55%, var(--knob-c, #CFCFCA)); }
#builder .bld-panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .06)), var(--bld-pvc);
  box-shadow: inset 0 1px 0 var(--bld-pvc-edge), inset 0 2px 4px -2px rgba(26, 30, 34, .2);
}
#builder .bld-net {
  position: absolute; inset: 5%; border: 3px solid #E6E6E3;
  background:
    repeating-linear-gradient(0deg, rgba(34, 39, 44, .26) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(34, 39, 44, .26) 0 1px, transparent 1px 3px);
}
/* выделение створки (наведение, фокус на легенде) */
#builder .bld-leaf.is-hl > .bld-sash { box-shadow: 0 0 0 3px var(--home), 0 8px 18px -8px var(--home-glow); }
#builder .bld-leaf.is-hl.is-fix > .bld-glass { box-shadow: inset 0 0 0 3px var(--home); }
@media (hover: hover) and (pointer: fine) {
  #builder .bld-leaf:hover > .bld-sash { box-shadow: 0 0 0 3px var(--home), 0 8px 18px -8px var(--home-glow); }
  #builder .bld-leaf.is-fix:hover > .bld-glass { box-shadow: inset 0 0 0 3px var(--home); }
}
/* показ открывания после переключения */
#builder .bld-leaf.is-demo > .bld-glass,
#builder .bld-leaf.is-demo.is-fix > .bld-glass { animation: bldFix 900ms var(--ease-out) both; }
#builder .bld-leaf.is-demo .bld-scheme path { animation: bldDraw 700ms var(--ease-out) both; }
#builder .bld-leaf.is-demo .bld-scheme .bld-scheme__tilt { animation-delay: 160ms; }
#builder .bld-leaf.is-demo.is-tilt > .bld-sash { animation: bldTilt 1700ms var(--ease-inout) both; }
#builder .bld-leaf.is-demo.is-turn.hinge-l > .bld-sash { animation: bldTurnL 1700ms var(--ease-inout) both; }
#builder .bld-leaf.is-demo.is-turn.hinge-r > .bld-sash { animation: bldTurnR 1700ms var(--ease-inout) both; }
#builder .bld-leaf.is-demo.is-tt.hinge-l > .bld-sash { animation: bldTTL 2600ms var(--ease-inout) both; }
#builder .bld-leaf.is-demo.is-tt.hinge-r > .bld-sash { animation: bldTTR 2600ms var(--ease-inout) both; }
@keyframes bldDraw { from { stroke-dashoffset: 1; } }
@keyframes bldFix { 0% { box-shadow: inset 0 0 0 3px var(--home); } 100% { box-shadow: inset 0 0 0 1px rgba(93, 115, 133, .30), inset 0 0 0 4px rgba(143, 164, 178, .16); } }
/* --sgn: из комнаты створка идёт к смотрящему, с улицы (зеркальная сцена) — от него */
@keyframes bldTilt { 0% { transform: none; transform-origin: 50% 100%; } 30%, 62% { transform: rotateX(calc(-13deg * var(--sgn, 1))); transform-origin: 50% 100%; } 100% { transform: none; transform-origin: 50% 100%; } }
@keyframes bldTurnL { 0% { transform: none; } 32%, 62% { transform: rotateY(calc(-40deg * var(--sgn, 1))); } 100% { transform: none; } }
@keyframes bldTurnR { 0% { transform: none; } 32%, 62% { transform: rotateY(calc(40deg * var(--sgn, 1))); } 100% { transform: none; } }
@keyframes bldTTL {
  0% { transform: none; transform-origin: 50% 100%; }
  16%, 32% { transform: rotateX(calc(-13deg * var(--sgn, 1))); transform-origin: 50% 100%; }
  46% { transform: none; transform-origin: 50% 100%; }
  46.5% { transform: none; transform-origin: 0 50%; }
  66%, 82% { transform: rotateY(calc(-38deg * var(--sgn, 1))); transform-origin: 0 50%; }
  100% { transform: none; transform-origin: 0 50%; }
}
@keyframes bldTTR {
  0% { transform: none; transform-origin: 50% 100%; }
  16%, 32% { transform: rotateX(calc(-13deg * var(--sgn, 1))); transform-origin: 50% 100%; }
  46% { transform: none; transform-origin: 50% 100%; }
  46.5% { transform: none; transform-origin: 100% 50%; }
  66%, 82% { transform: rotateY(calc(38deg * var(--sgn, 1))); transform-origin: 100% 50%; }
  100% { transform: none; transform-origin: 100% 50%; }
}

/* подоконник, пол, балкон */
#builder .bld-sill {
  position: absolute; transform-origin: 50% 100%; transform: translateZ(var(--p)) rotateX(90deg);
  background: linear-gradient(0deg, #FFFFFF, #EFEFEC); box-shadow: 0 0 0 1px rgba(26, 30, 34, .10);
}
#builder .bld-sill-edge {
  position: absolute; transform: translateZ(var(--p)); background: #F3F3F1; border-radius: 0 0 3px 3px;
  box-shadow: 0 0 0 1px rgba(26, 30, 34, .10), 0 10px 14px -8px rgba(26, 30, 34, .35);
}
#builder .bld-floor {
  position: absolute; pointer-events: none; transform: translateZ(1px);
  background: linear-gradient(180deg, #D3CEC5, #DCD8D0 40%);
  box-shadow: inset 0 5px 0 #F7F6F3, inset 0 6px 0 rgba(26, 30, 34, .12), inset 0 14px 16px -10px rgba(26, 30, 34, .18);
}
#builder .bld-floor.is-room,
#builder .bld-floor.is-wood {
  background:
    repeating-linear-gradient(90deg, rgba(120, 84, 44, .12) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, #D5BE9B, #E3D0B3 60%);
}
#builder .bld-floor.is-heat::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 138, 61, .32), transparent 70%);
}
#builder .bld-bal { position: absolute; inset: 0; transform-style: preserve-3d; }
#builder .bld-bal__sec {
  position: absolute; box-sizing: border-box; border-style: solid; border-color: var(--bld-pvc);
  box-shadow: 0 0 0 1px var(--bld-pvc-edge), inset 0 0 0 1px var(--bld-pvc-edge);
}
#builder .bld-bal.is-cold .bld-bal__sec { border-color: #C9D0D5; box-shadow: 0 0 0 1px rgba(93, 115, 133, .35), inset 0 0 0 1px rgba(93, 115, 133, .3); }
#builder .bld-bal.is-cold .bld-bal__sec.is-back { transform: translateZ(-6px); }
#builder .bld-slide {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 12px; transform: translate(-50%, -50%); opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12' fill='none' stroke='%2322272C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h26M6 2L2 6l4 4M24 2l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
#builder .bld-parapet {
  position: absolute;
  background:
    radial-gradient(circle at 30% 40%, rgba(26, 30, 34, .10) 0 .8px, transparent 1.3px) 0 0 / 7px 7px,
    var(--bld-concrete);
  box-shadow: inset 0 4px 8px -4px rgba(26, 30, 34, .3);
}
#builder .bld-parapet.is-warm { box-shadow: inset 0 0 0 5px #E9E2D6, inset 0 6px 10px -4px rgba(26, 30, 34, .25); }
#builder .bld-parapet.is-panels {
  background: repeating-linear-gradient(90deg, #F4F2EE 0 34px, #E2DED6 34px 35px);
}
/* подписи размеров и ручки */
#builder .bld-dim {
  position: absolute; z-index: 2; transform: translate(-50%, -100%) translateZ(2px);
  padding: 6px 14px; border-radius: var(--r-pill); background: var(--white); color: var(--ink);
  font: 600 1rem/1.25 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--shadow-1); pointer-events: none;
}
#builder .bld-dim span { color: var(--muted); font-weight: 500; }
#builder .bld-dim--h { transform: translate(-100%, -50%) translateZ(2px); }
#builder .bld-handle {
  position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--white); color: var(--ink); cursor: ew-resize; touch-action: none;
  transform: translateZ(3px);
  box-shadow: 0 0 0 1.5px var(--line-strong), var(--shadow-2);
  transition: background var(--dur-1), box-shadow var(--dur-2), color var(--dur-1);
}
#builder .bld-handle--h { cursor: ns-resize; }
#builder .bld-handle[hidden] { display: none; }
#builder .bld-handle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#builder .bld-handle:hover,
#builder .bld-handle.is-active { background: var(--home); box-shadow: 0 0 0 6px var(--home-glow), var(--shadow-warm); }
#builder .bld-handle::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--home); opacity: 0; pointer-events: none;
}
#builder.is-hinting .bld-handle::after { animation: bldPing 1600ms var(--ease-out) 3; }
@keyframes bldPing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@media (hover: none), (pointer: coarse) { #builder .bld-handle { display: none; } }
#builder.is-dragging, #builder.is-dragging * { cursor: grabbing; }
#builder.bld--compact .bld-handle { display: none; }
#builder.bld--compact .bld-dim { font-size: .9375rem; padding: 5px 12px; }

/* ---------- цвет рамы: плёнка под дерево и гладкие цвета ----------
   Рецепт текстуры один на всех: рама на сцене, образцы, точка на вкладке. Тона --w-* ставит JS. */
#builder .bld-rig,
#builder .bld-swatch__disc.is-wood,
#builder .bld-tab__dot.is-wood {
  --grain-a: color-mix(in srgb, var(--w-dark) 58%, transparent);
  --grain-b: color-mix(in srgb, var(--w-dark) 28%, transparent);
  --grain-c: color-mix(in srgb, var(--w-light) 45%, transparent);
  --grain-d: color-mix(in srgb, var(--w-light) 20%, transparent);
  --wood-v:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--grain-a) 3px 4px, transparent 4px 9px, var(--grain-b) 9px 11px, transparent 11px 17px, var(--grain-c) 17px 18.5px, transparent 18.5px 26px),
    repeating-linear-gradient(90deg, var(--grain-d) 0 1px, transparent 1px 5px, var(--grain-b) 5px 5.6px, transparent 5.6px 13px),
    linear-gradient(90deg, var(--w-base), color-mix(in srgb, var(--w-base) 72%, var(--w-light)) 38%, var(--w-base) 62%, color-mix(in srgb, var(--w-base) 78%, var(--w-dark)));
  --wood-h:
    repeating-linear-gradient(180deg, transparent 0 3px, var(--grain-a) 3px 4px, transparent 4px 9px, var(--grain-b) 9px 11px, transparent 11px 17px, var(--grain-c) 17px 18.5px, transparent 18.5px 26px),
    repeating-linear-gradient(180deg, var(--grain-d) 0 1px, transparent 1px 5px, var(--grain-b) 5px 5.6px, transparent 5.6px 13px),
    linear-gradient(180deg, var(--w-base), color-mix(in srgb, var(--w-base) 72%, var(--w-light)) 38%, var(--w-base) 62%, color-mix(in srgb, var(--w-base) 78%, var(--w-dark)));
}
#builder .bld-rig .bld-skin { position: absolute; display: none; pointer-events: none; }
#builder .bld-rig.is-wood .bld-skin { display: block; }
#builder .bld-skin--v {
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 35%, transparent 65%, rgba(0, 0, 0, .16)), var(--wood-v);
  -webkit-mask: linear-gradient(90deg, #000 var(--b), transparent var(--b), transparent calc(100% - var(--b)), #000 calc(100% - var(--b)));
  mask: linear-gradient(90deg, #000 var(--b), transparent var(--b), transparent calc(100% - var(--b)), #000 calc(100% - var(--b)));
}
#builder .bld-skin--h {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 35%, transparent 65%, rgba(0, 0, 0, .16)), var(--wood-h);
  -webkit-mask: linear-gradient(180deg, #000 var(--b), transparent var(--b), transparent calc(100% - var(--b)), #000 calc(100% - var(--b)));
  mask: linear-gradient(180deg, #000 var(--b), transparent var(--b), transparent calc(100% - var(--b)), #000 calc(100% - var(--b)));
}
#builder .bld-rig.is-wood .bld-impost { background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 35%, transparent 65%, rgba(0, 0, 0, .16)), var(--wood-v); }
#builder .bld-rig.is-wood .bld-panel { background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .12)), var(--wood-v); }
/* гладкая плёнка: мягкий атласный блик по профилю */
#builder .bld-rig.is-color .bld-frame,
#builder .bld-rig.is-color .bld-sash { box-shadow: 0 0 0 1px var(--bld-pvc-edge), inset 0 0 0 1px var(--bld-pvc-edge), inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 16px -10px rgba(26, 30, 34, .45); }

/* номер створки на картинке — совпадает с кнопками «Створка 1/2/3» */
#builder .bld-badge {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  transform: translate(-50%, -50%) translateZ(3px);
  background: rgba(255, 255, 255, .92); color: var(--ink); font: 700 .9375rem/1 var(--font-body);
  box-shadow: 0 0 0 1.5px var(--line-strong), 0 2px 6px rgba(26, 30, 34, .18);
}
#builder .bld-badge.is-sel { background: var(--home); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 4px 12px -2px var(--home-glow); }
#builder.bld--compact .bld-badge { width: 26px; height: 26px; font-size: .875rem; }
#builder .bld-scheme.is-dashed path { stroke-dasharray: 7 5; }

/* ---------- вид с улицы ---------- */
#builder .bld-room { position: absolute; left: -60%; top: -50%; width: 220%; height: 200%; pointer-events: none; display: none; transform: translateZ(-420px) scale(1.33); }
#builder .bld-room svg { display: block; width: 100%; height: 100%; }
#builder .bld-stage.is-street { --bld-wall: #C7D2D9; --bld-concrete: #B3BFC7; }
#builder .bld-stage.is-street .bld-street { display: none; }
#builder .bld-stage.is-street .bld-room { display: block; }
#builder .bld-stage.is-street .bld-glow {
  background:
    radial-gradient(45% 50% at 85% 0%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(70% 40% at 50% 115%, rgba(26, 30, 34, .10), transparent 70%);
}
#builder .bld-stage.is-street .bld-rig { transform: scaleX(-1); --sgn: -1; }
#builder .bld-stage.is-street .bld-knob { display: none; }
#builder .bld-stage.is-street .bld-badge { transform: translate(-50%, -50%) translateZ(3px) scaleX(-1); }
#builder .bld-stage.is-street .bld-glass {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .38) 31%, rgba(255, 255, 255, .10) 44%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(214, 229, 237, .42), rgba(238, 246, 250, .12) 60%, rgba(143, 164, 178, .18));
}
#builder .bld-rev.is-out {
  background:
    radial-gradient(circle at 30% 40%, rgba(26, 30, 34, .08) 0 .8px, transparent 1.3px) 0 0 / 6px 6px,
    linear-gradient(var(--rev-dir, 180deg), #D3DCE2, #BCC8D0);
}
#builder .bld-rev--l.is-out { --rev-dir: 90deg; }
#builder .bld-rev--r.is-out { --rev-dir: 270deg; }
#builder .bld-rev--b.is-out { --rev-dir: 0deg; }
#builder .bld-stage.is-street .bld-floor { background: linear-gradient(180deg, #B7C2CA, #A9B5BE 50%); box-shadow: inset 0 4px 0 #D5DDE2, inset 0 14px 16px -10px rgba(26, 30, 34, .25); }
#builder .bld-stage.is-street .bld-floor::after { display: none; }
#builder .bld-drip {
  position: absolute; transform-origin: 50% 100%; transform: translateZ(var(--p)) rotateX(68deg);
  background: linear-gradient(0deg, #F4F6F7, #D9DFE3); box-shadow: 0 0 0 1px rgba(26, 30, 34, .14), 0 12px 14px -8px rgba(26, 30, 34, .35);
}

/* переключатель вида: над сценой, в узкой сцене — строкой сверху */
#builder .bld-view {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 var(--s-3); border-radius: var(--r-pill);
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line);
}
#builder .bld-view__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); cursor: pointer;
  font: 600 1rem/1.2 var(--font-body); white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1);
}
#builder .bld-view__btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#builder .bld-view__btn:hover { background: var(--paper); }
#builder .bld-view__btn[aria-pressed="true"] { background: var(--frame); color: var(--on-dark); }
#builder .bld-view__btn[aria-pressed="true"] svg { stroke: var(--home); }
@container (min-width: 600px) {
  #builder .bld-view {
    position: absolute; z-index: 5; top: 16px; left: 16px; margin: 0;
    background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
  }
  #builder .bld-view__btn { flex: none; }
}
#builder .bld-viewnote { margin: var(--s-3) 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
#builder .bld-viewnote::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--home); vertical-align: .05em; }

/* ---------- открывание: какая створка + 4 схемы ---------- */
#builder .bld-open { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
#builder .bld-open[hidden] { display: none; }
#builder .bld-open__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
#builder .bld-open__head .bld-label { margin: 0; }
#builder .bld-leafpick { display: flex; flex-wrap: wrap; gap: 6px; }
#builder .bld-leafpick[hidden] { display: none; }
#builder .bld-lp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 8px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font: 600 1rem/1.2 var(--font-body);
  transition: border-color var(--dur-1), box-shadow var(--dur-2);
}
#builder .bld-lp:hover { border-color: var(--line-strong); }
#builder .bld-lp__n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-strong); font: 700 .9375rem/1 var(--font-body);
}
#builder .bld-lp[aria-pressed="true"] { border-color: var(--frame); box-shadow: inset 0 0 0 1px var(--frame); }
#builder .bld-lp[aria-pressed="true"] .bld-lp__n { background: var(--home); box-shadow: none; }
#builder .bld-otypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--s-2); }
#builder .bld-ot {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-2); background: var(--white); color: var(--ink); font: inherit;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out);
}
#builder .bld-ot:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
#builder .bld-ot:active { transform: scale(.98); }
#builder .bld-ot__ico { flex: none; }
#builder .bld-ot__ico svg { display: block; width: 36px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
#builder .bld-ot__ico .o { stroke-width: 2.4; }
#builder .bld-ot__ico .r { opacity: .4; }
#builder .bld-ot__ico .k { stroke: var(--home); stroke-width: 3.2; }
#builder .bld-ot__txt { display: grid; gap: 2px; min-width: 0; }
#builder .bld-ot__name { font-weight: 600; font-size: 1rem; line-height: 1.2; }
#builder .bld-ot__hint { font-size: var(--fs-label); line-height: 1.3; color: var(--muted); }
#builder .bld-ot[aria-checked="true"] { background: var(--frame); border-color: var(--frame); color: var(--on-dark); box-shadow: var(--shadow-1); }
#builder .bld-ot[aria-checked="true"] .bld-ot__hint { color: var(--on-dark-muted); }
#builder .bld-ot[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
#builder .bld-open__note { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
#builder .bld-open__note b { color: var(--ink); }
#builder .bld-open__note--bal { margin-top: var(--s-4); }
#builder .bld-open__note[hidden] { display: none; }

/* ---------- цвет и фурнитура ---------- */
#builder .bld-decor {
  display: grid; gap: var(--s-4); margin-top: var(--s-6); padding: 22px 16px; min-width: 0;
  border-radius: var(--r-3); background: var(--white); box-shadow: var(--shadow-1);
}
@media (min-width: 600px) { #builder .bld-decor { padding: 28px; } }
#builder .bld-decor[hidden] { display: none; }
#builder .bld-decor__head { display: grid; gap: 6px; }
#builder .bld-decor__title { margin: 0; font: 700 var(--fs-h3)/1.15 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
#builder .bld-decor__lead { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
#builder .bld-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--paper);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%;
}
#builder .bld-tabs::-webkit-scrollbar { display: none; }
#builder .bld-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); cursor: pointer;
  font: 600 1.0625rem/1 var(--font-body); white-space: nowrap;
  transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-2);
}
#builder .bld-tab:hover { color: var(--ink); }
#builder .bld-tab[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-1); }
#builder .bld-tab__dot { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(26, 30, 34, .2); }
#builder .bld-tab__dot.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
#builder .bld-tab__dot.is-white { background: #FCFCFB; }
#builder .bld-tab__dot.is-wood { background: var(--wood-v); }
#builder .bld-tab__dot.is-color { background: var(--c); }
#builder .bld-tab__dot.is-metal { background: radial-gradient(circle at 35% 30%, var(--knob-a), var(--knob-b) 55%, var(--knob-c)); }
@media (max-width: 599.98px) {
  #builder .bld-tab { padding: 0 12px; gap: 6px; font-size: 1rem; }
  #builder .bld-tab__dot { width: 14px; height: 14px; }
}
#builder .bld-tabpanel { display: grid; gap: var(--s-4); min-width: 0; }
#builder .bld-tabpanel[hidden] { display: none; }
#builder .bld-tabpanel__note { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
#builder .bld-tabpanel__note b { color: var(--ink); font-weight: 600; white-space: nowrap; }

#builder .bld-sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 4px; }
@media (min-width: 600px) {
  #builder .bld-sw { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px 8px; }
  #builder .bld-sw[data-bld-sw="lam"] { --cols: 5; }
}
#builder .bld-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 6px 2px 8px;
  border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink); cursor: pointer; font: inherit; text-align: center;
  transition: background var(--dur-1);
}
#builder .bld-swatch:hover { background: var(--paper); }
#builder .bld-swatch__disc {
  position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(26, 30, 34, .14), 0 2px 6px -1px rgba(26, 30, 34, .22);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
@media (min-width: 600px) { #builder .bld-swatch__disc { width: 64px; height: 64px; } }
#builder .bld-swatch__disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 70% 85%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 55%);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .12), inset 0 2px 3px rgba(255, 255, 255, .25);
}
/* образец: «соборный» рисунок доски — дуги годовых колец поверх тонких продольных волокон */
#builder .bld-swatch__disc.is-wood {
  background:
    repeating-radial-gradient(ellipse 55% 150% at 42% 108%, transparent 0 5px, var(--grain-a) 5px 6px, transparent 6px 9px, var(--grain-b) 9px 10.5px, transparent 10.5px 14px, var(--grain-c) 14px 15px, transparent 15px 19px),
    repeating-linear-gradient(90deg, var(--grain-d) 0 1px, transparent 1px 5px, var(--grain-b) 5px 5.6px, transparent 5.6px 13px),
    linear-gradient(90deg, var(--w-base), color-mix(in srgb, var(--w-base) 72%, var(--w-light)) 38%, var(--w-base) 62%, color-mix(in srgb, var(--w-base) 78%, var(--w-dark)));
}
#builder .bld-swatch__disc.is-white { background: linear-gradient(145deg, #FFFFFF, #F1F1EE 60%, #E4E4E0); }
#builder .bld-swatch__disc.is-color { background: linear-gradient(145deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 80%, #000)); }
#builder .bld-swatch__disc.is-handle { background: radial-gradient(circle at 50% 35%, #FFFFFF, #EEF0EF 70%); }
#builder .bld-swatch__disc.is-handle::after { background: none; box-shadow: none; }
/* ручка: накладка + рычаг, металлический градиент */
#builder .bld-hnd { position: absolute; left: 50%; top: 6px; width: 16px; height: 46px; margin-left: -8px; }
@media (min-width: 600px) { #builder .bld-hnd { top: 8px; height: 50px; } }
#builder .bld-hnd__rose, #builder .bld-hnd__lever { position: absolute; left: 50%; display: block; }
#builder .bld-hnd__rose {
  top: 0; width: 14px; height: 32px; margin-left: -7px; border-radius: 7px;
  background: linear-gradient(90deg, var(--knob-c), var(--knob-a) 38%, var(--knob-b) 62%, var(--knob-c));
  box-shadow: 0 1px 2px rgba(26, 30, 34, .3), inset 0 0 0 .5px rgba(0, 0, 0, .2);
}
#builder .bld-hnd__lever {
  top: 9px; width: 9px; bottom: 0; margin-left: -4.5px; border-radius: 5px 5px 4.5px 4.5px;
  background: linear-gradient(90deg, var(--knob-c), var(--knob-a) 35%, var(--knob-b) 60%, var(--knob-c));
  box-shadow: 0 3px 5px -1px rgba(26, 30, 34, .4), inset 0 0 0 .5px rgba(0, 0, 0, .2);
}
#builder .bld-hnd__lever::before {
  content: ""; position: absolute; left: 50%; top: -2px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--knob-a), var(--knob-b) 60%, var(--knob-c));
  box-shadow: 0 1px 2px rgba(26, 30, 34, .35);
}
#builder .bld-swatch__name { font-size: var(--fs-label); font-weight: 500; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; hyphens: auto; }
#builder .bld-swatch__note { margin-top: -5px; font-size: .875rem; line-height: 1.2; color: var(--muted); }
#builder .bld-swatch[aria-checked="true"] .bld-swatch__disc {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--home), 0 8px 18px -6px var(--home-glow);
  transform: scale(1.04);
}
#builder .bld-swatch[aria-checked="true"] .bld-swatch__disc::before {
  content: ""; position: absolute; z-index: 1; right: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--home) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1E22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 0 0 2px var(--white);
}
#builder .bld-swatch[aria-checked="true"] .bld-swatch__name { font-weight: 700; }
#builder .bld-lock { grid-template-columns: 28px 1fr; position: relative; }
#builder .bld-lock__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#builder .bld-lock:has(input:checked) { border-color: var(--frame); box-shadow: inset 0 0 0 1px var(--frame); }
#builder .bld-lock:has(input:checked) .bld-x__mark { background: var(--home); border-color: var(--home); color: var(--ink); transform: scale(1.04); }
#builder .bld-side { display: grid; gap: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
#builder .bld-side[hidden] { display: none; }
#builder .bld-side .bld-seg .chip { flex: 1 1 auto; min-height: 52px; }
#builder .bld-side.is-idle .bld-seg { opacity: .55; }
#builder .bld-side__hint { margin: 10px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
#builder .bld-decor__pick {
  margin: 0; padding: 14px 16px; border-radius: var(--r-2); background: var(--home-soft);
  font-size: var(--fs-small); line-height: 1.45; color: var(--ink);
}
#builder .bld-decor__pick span { color: var(--muted); }
#builder .bld-decor__pick b { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- размеры ---------- */
#builder .bld-controls {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4) var(--s-4); margin-top: var(--s-6);
}
#builder .bld-field { min-width: 0; }
#builder .bld-field[hidden], #builder .bld-opt[hidden] { display: none; }
@media (max-width: 599.98px) {
  #builder .bld-field--leaves { grid-column: 1 / -1; }
  #builder .bld-field--qty { order: 2; }
}
#builder .bld-label {
  display: block; margin: 0 0 10px; padding: 0; font: 600 var(--fs-label)/1.3 var(--font-body); color: var(--muted);
}
#builder .bld-seg { display: flex; gap: var(--s-2); flex-wrap: wrap; }
#builder .bld-chip { min-height: 56px; min-width: 56px; gap: 8px; font-variant-numeric: tabular-nums; }
#builder .bld-chip--leaf { padding: 0 14px 0 10px; }
#builder .bld-chip svg { width: 28px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#builder .bld-num {
  display: flex; align-items: center; height: 56px; padding: 3px; gap: 2px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white);
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
#builder .bld-num:focus-within { border-color: var(--home); box-shadow: 0 0 0 3px var(--home-glow); }
#builder .bld-num__btn {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); cursor: pointer; transition: background var(--dur-1), transform var(--dur-1);
}
#builder .bld-num__btn:hover:not(:disabled) { background: var(--fog); }
#builder .bld-num__btn:active:not(:disabled) { transform: scale(.94); }
#builder .bld-num__btn:disabled { opacity: .35; cursor: default; }
#builder .bld-num__btn .icon { width: 20px; height: 20px; }
#builder .bld-num__box { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
#builder .bld-num__input {
  width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; outline: 0;
  font: 600 1.1875rem/1 var(--font-body); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------- доп. работы ---------- */
#builder .bld-extras { margin-top: var(--s-6); }
#builder .bld-extras__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
@media (min-width: 600px) { #builder .bld-extras__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#builder .bld-x {
  display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-height: 60px; padding: 10px 16px 10px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--r-2); background: var(--white);
  transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-2);
}
#builder .bld-x:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
#builder .bld-x__mark {
  grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); background: var(--white); color: transparent;
  transition: background var(--dur-1), border-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-spring);
}
#builder .bld-x__mark .icon { width: 18px; height: 18px; }
#builder .bld-x__name { font-weight: 600; font-size: 1rem; line-height: 1.25; }
#builder .bld-x__price { font-size: var(--fs-label); color: var(--muted); line-height: 1.3; font-variant-numeric: tabular-nums; }
#builder .bld-x[aria-pressed="true"] { border-color: var(--frame); box-shadow: inset 0 0 0 1px var(--frame); }
#builder .bld-x[aria-pressed="true"] .bld-x__mark { background: var(--home); border-color: var(--home); color: var(--ink); transform: scale(1.04); }

/* ---------- итог ---------- */
#builder .bld-sum { min-width: 0; display: grid; gap: var(--s-4); align-content: start; align-self: stretch; }
@media (min-width: 900px) and (min-height: 700px) {
  #builder .bld-sum__card--total { position: sticky; top: calc(var(--header-h) + 16px); }
}
#builder .bld-sum__card {
  display: grid; gap: var(--s-5); padding: 24px 20px; border-radius: var(--r-4);
  background: var(--white); box-shadow: var(--shadow-2);
}
@media (min-width: 600px) { #builder .bld-sum__card { padding: 28px; } }
#builder .bld-sum__title { margin: 0; font: 700 var(--fs-h3)/1.15 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
#builder .bld-sum__what { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
#builder .bld-opt { margin: 0; padding: 0; border: 0; min-width: 0; }
#builder .bld-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
#builder .bld-prof, #builder .bld-glz {
  position: relative; display: grid; gap: 3px; align-content: start; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-2); background: var(--paper); cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-2);
}
#builder .bld-prof input, #builder .bld-glz input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#builder .bld-prof:hover, #builder .bld-glz:hover { border-color: var(--line-strong); }
#builder .bld-prof:has(input:checked), #builder .bld-glz:has(input:checked) {
  border-color: var(--frame); background: var(--white); box-shadow: inset 0 0 0 1px var(--frame), var(--shadow-1);
}
#builder .bld-prof:has(input:focus-visible), #builder .bld-glz:has(input:focus-visible) { outline: 3px solid var(--home); outline-offset: 2px; }
#builder .bld-prof__name, #builder .bld-glz__name { font-weight: 700; font-size: 1rem; line-height: 1.2; color: var(--ink); }
#builder .bld-prof__spec { font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
#builder .bld-prof__bar { display: flex; gap: 2px; width: calc(var(--d) * 100%); height: 10px; margin: 5px 0 3px; }
#builder .bld-prof__bar i { flex: 1; border-radius: 2px; background: var(--fog-2); transition: background var(--dur-2); }
#builder .bld-prof:has(input:checked) .bld-prof__bar i { background: var(--home); }
#builder .bld-prof__price, #builder .bld-glz__price { font-size: var(--fs-label); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
#builder .bld-glazings { display: grid; gap: var(--s-2); }
#builder .bld-glz { grid-template-columns: 1fr auto; align-items: center; min-height: 56px; }

#builder .bld-price {
  padding: 18px 20px; border-radius: var(--r-3); background: var(--home-soft); outline: 0;
}
#builder .bld-price.is-tick { animation: bldTick 700ms var(--ease-out); }
@keyframes bldTick { 0% { box-shadow: 0 0 0 0 var(--home-glow); } 100% { box-shadow: 0 0 0 14px rgba(255, 138, 61, 0); } }
#builder .bld-price__label { margin: 0; font-weight: 600; font-size: var(--fs-label); color: var(--muted); }
#builder .bld-price__range {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; margin: 4px 0 0;
  font: 700 clamp(1.75rem, 1.45rem + 1vw, 2.25rem)/1.12 var(--font-display); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
#builder .bld-price__part { white-space: nowrap; }
#builder .bld-price__pre { margin-right: .15em; font: 500 1rem/1 var(--font-body); color: var(--muted); letter-spacing: 0; }
#builder .bld-price__cur { font-weight: 600; }
#builder .bld-ledger { margin-top: 10px; }
#builder .bld-ledger summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: var(--fs-small); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(26, 30, 34, .3); text-underline-offset: 4px;
}
#builder .bld-ledger summary::-webkit-details-marker { display: none; }
#builder .bld-ledger summary .icon { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
#builder .bld-ledger[open] summary .icon { transform: rotate(180deg); }
#builder .bld-ledger dl { margin: 6px 0 4px; display: grid; gap: 8px; }
#builder .bld-ledger__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-label); line-height: 1.35; }
#builder .bld-ledger__row dt span { color: var(--muted); }
#builder .bld-ledger__row dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
#builder .bld-ledger__row.is-main { font-weight: 600; }
#builder .bld-incl { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--fs-label); color: var(--ink); }
#builder .bld-incl li { display: inline-flex; align-items: center; gap: 6px; }
#builder .bld-incl .icon { width: 18px; height: 18px; color: var(--ok); flex: none; }

#builder .bld-cta { display: grid; gap: 10px; }
#builder .bld-cta__row { display: grid; gap: 10px; }
@media (min-width: 600px) and (max-width: 899.98px) { #builder .bld-cta__row { grid-template-columns: 1fr 1fr; } }
#builder .bld-cta .btn { width: 100%; }
#builder .bld-status { margin: 0; min-height: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); }
#builder .bld-status:empty { display: none; }
#builder .bld-status a { color: var(--max-hover); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
#builder .bld-note { margin: 0; font-size: var(--fs-label); line-height: 1.45; color: var(--muted); }

/* ---------- мобильная плашка ---------- */
#builder .bld-pill {
  position: fixed; left: 50%; z-index: calc(var(--z-mobilebar) - 1);
  bottom: calc(var(--mb-h, 0px) + 12px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px 8px 20px;
  border: 0; border-radius: var(--r-pill); background: var(--white); color: var(--ink);
  font: 600 1rem/1 var(--font-body); white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(26, 30, 34, .08), 0 14px 32px -12px rgba(26, 30, 34, .4);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
}
#builder .bld-pill.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#builder .bld-pill[hidden] { display: none; }
#builder .bld-pill__label { color: var(--muted); font-weight: 500; }
#builder .bld-pill__sum { color: var(--home-text); font: 700 1.125rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
#builder .bld-pill .icon { width: 20px; height: 20px; }
#builder .bld-pill:focus-visible { outline: 3px solid var(--home); outline-offset: 3px; }
@media (min-width: 900px) { #builder .bld-pill { display: none; } }

@media (prefers-reduced-motion: reduce) {
  #builder *, #builder *::before, #builder *::after { animation: none !important; transition: none !important; }
}

/* ==== profiles.css ==== */
/* profiles.css — «Профиль REHAU: чем отличаются». Всё под #profiles. Токены — SPEC-V2 §2. */

#profiles .pf__head { max-width: 46rem; }

/* ---------- выбор системы ---------- */
#profiles .pf-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
#profiles .pf-opt {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 112px;
  padding: 18px 18px 22px;
  text-align: left;
  font: inherit; color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
#profiles .pf-opt:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-1); }
#profiles .pf-opt:active { transform: scale(.98); }
#profiles .pf-opt:focus-visible { outline: 3px solid var(--home); outline-offset: 3px; }
#profiles .pf-opt__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.125rem; line-height: 1.15; letter-spacing: -.01em;
}
#profiles .pf-opt__meta { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
#profiles .pf-opt__meta b { font-weight: 700; color: var(--ink); }
#profiles .pf-opt__bar {
  position: absolute; left: 18px; right: 18px; bottom: 12px; height: 4px;
  border-radius: var(--r-pill); background: var(--fog);
  overflow: hidden;
}
#profiles .pf-opt__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: calc((var(--d) - 40) / 50 * 100%);
  border-radius: inherit; background: var(--street);
  transition: background-color var(--dur-2) var(--ease-out);
}
#profiles .pf-opt[aria-checked="true"] {
  background: var(--frame); border-color: var(--frame); color: var(--on-dark);
  box-shadow: var(--shadow-2);
}
#profiles .pf-opt[aria-checked="true"] .pf-opt__meta { color: var(--on-dark-muted); }
#profiles .pf-opt[aria-checked="true"] .pf-opt__meta b { color: var(--white); }
#profiles .pf-opt[aria-checked="true"] .pf-opt__bar { background: var(--frame-3); }
#profiles .pf-opt[aria-checked="true"] .pf-opt__bar::after { background: var(--home); }

/* ---------- основная сетка ----------
   Телефон: разрез → подпись → выбор системы → характеристики. Разрез прилипает под шапкой
   (.is-docked ставит HM.dock) и меняется на глазах, пока выбирают систему и читают цифры.
   Десктоп (≥900): выбор строкой сверху, разрез слева, характеристики справа. */
#profiles .pf-main { display: grid; margin-top: var(--s-7); }
#profiles .pf-stage { margin: 0; min-width: 0; }
#profiles .pf-spec { margin-top: var(--s-6); }
@media (max-width: 899.98px) {
  /* колонка на flex, не grid: в сетке прилипший элемент ходит только в своей строке, а отступы тут не схлопываются */
  #profiles .pf-main { display: flex; flex-direction: column; --pf-box-h: clamp(420px, 118vw, 480px); --pf-dock-h: clamp(200px, 30vh, 252px); }
  @media (min-width: 600px) { #profiles .pf-main { --pf-box-h: 500px; --pf-dock-h: clamp(220px, 32vh, 300px); } }
  @supports (height: 1svh) {
    #profiles .pf-main { --pf-dock-h: clamp(200px, 30svh, 252px); }
    @media (min-width: 600px) { #profiles .pf-main { --pf-dock-h: clamp(220px, 32svh, 300px); } }
  }
  #profiles .pf-stage {
    position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 8px); z-index: 6;
    transition: margin-bottom var(--dur-3) var(--ease-out), box-shadow var(--dur-2) ease;
  }
  #profiles .pf-stage.is-docked {
    margin-bottom: calc(var(--pf-box-h) - var(--pf-dock-h));
    background: var(--white);
    box-shadow: 0 -8px 0 var(--white), 0 10px 0 var(--white), 0 28px 22px -22px rgba(26,30,34,.3);
  }
  #profiles .pf-box { height: var(--pf-box-h); transition: height var(--dur-3) var(--ease-out); }
  #profiles .pf-view { transition: inset var(--dur-3) var(--ease-out); }
  #profiles .pf-side, #profiles .pf-hint { transition: opacity var(--dur-2) ease, visibility 0s linear 0s; }
  #profiles .pf-stage.is-docked .pf-box { height: var(--pf-dock-h); }
  #profiles .pf-stage.is-docked .pf-view { inset: 10px 0 56px; }
  #profiles .pf-stage.is-docked .pf-side,
  #profiles .pf-stage.is-docked .pf-hint { opacity: 0; visibility: hidden; transition: opacity var(--dur-2) ease, visibility 0s linear var(--dur-2); }
  #profiles .pf-stage.is-docked .pf-read { bottom: 10px; }
  #profiles .pf-stage.is-docked .pf-read__num { font-size: 1.625rem; }
}

/* ---------- 3D-сцена ---------- */
#profiles .pf-box {
  position: relative;
  height: clamp(420px, 118vw, 480px);
  border-radius: var(--r-4);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, var(--fog-2) 0%, var(--fog) 34%, #F7F4EF 62%, var(--home-soft) 100%);
}
#profiles .pf-box__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 0% 40%, rgba(93,115,133,.28), transparent 70%),
    radial-gradient(55% 75% at 100% 55%, var(--home-glow), transparent 70%);
  opacity: .9;
}
/* сторона «улица / комната»: цвет кодирует смысл */
#profiles .pf-side {
  position: absolute; top: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-label); font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 6px 16px -10px rgba(26,30,34,.35);
}
#profiles .pf-side .icon { width: 1.25em; height: 1.25em; }
#profiles .pf-side--street { left: 16px; }
#profiles .pf-side--street .icon { color: var(--street-deep); }
#profiles .pf-side--home { right: 16px; }
#profiles .pf-side--home .icon { color: var(--home-press); }

#profiles .pf-view {
  position: absolute; inset: 56px 0 84px;
  perspective: 1500px; perspective-origin: 50% 40%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
#profiles .pf-box.is-drag .pf-view { cursor: grabbing; }
#profiles .pf-cam {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
}
#profiles .pf-obj, #profiles .pf-scene {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
}
#profiles .pf-floor {
  position: absolute; left: 50%; bottom: -6%; width: 70%; height: 18%;
  transform: translateX(-46%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(26,30,34,.22), rgba(26,30,34,0) 70%);
  filter: blur(6px);
  pointer-events: none; z-index: -1;
}

#profiles .pf-face {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  backface-visibility: visible;
  overflow: hidden;
  box-shadow: inset 0 0 0 .5px rgba(26,30,34,.10);
}
#profiles .pf-face--sash { filter: brightness(.99); }
#profiles .pf-mark {
  position: absolute; top: 14%; left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; letter-spacing: .14em;
  color: rgba(26,30,34,.38);
}
#profiles .pf-pane {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  background: linear-gradient(0deg, rgba(159,187,203,.55) 0%, rgba(199,220,231,.32) 45%, rgba(238,246,250,0) 100%);
  pointer-events: none;
}
#profiles .pf-cap { position: absolute; display: block; max-width: none; max-height: none; overflow: visible; pointer-events: none; }
#profiles .pf-cap .c-body { fill: var(--white); }
#profiles .pf-cap--back .c-body { fill: #C9D3D9; }
#profiles .pf-cap--front .c-body { fill: #FBFCFC; }
#profiles .pf-cap .c-hole { fill: url(#pf-hole-g); }
#profiles .pf-cap .c-steel { fill: var(--frame-3); transition: opacity var(--dur-2); }
#profiles .pf-cap .c-glass { fill: url(#pf-glass-g); }
#profiles .pf-cap .c-spacer { fill: var(--frame-3); }
#profiles .pf-cap .c-gasket { fill: var(--frame); }
#profiles .pf-cap .c-line { fill: none; stroke: rgba(26,30,34,.28); stroke-width: 1; vector-effect: non-scaling-stroke; }
#profiles .pf-cap .c-num {
  font-family: var(--font-display); font-weight: 700;
  fill: var(--street-deep);
  paint-order: stroke; stroke: rgba(255,255,255,.7); stroke-width: 3px;
}
/* после выбора профиля камеры коротко «теплеют» — считаем их глазами */
#profiles.is-flash .pf-cap .c-num { animation: pf-num 1.6s var(--ease-out) both; }
@keyframes pf-num {
  0%, 20% { fill: var(--home-press); }
  100% { fill: var(--street-deep); }
}

/* цифры на сцене */
#profiles .pf-read {
  position: absolute; left: 20px; bottom: 18px; z-index: 3;
  display: flex; gap: var(--s-5);
}
#profiles .pf-read__item { display: flex; flex-direction: column; }
#profiles .pf-read__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#profiles .pf-read__num small { font-size: .42em; font-weight: 700; letter-spacing: 0; margin-left: .18em; }
#profiles .pf-read__cap { font-size: var(--fs-label); font-weight: 500; color: var(--muted); margin-top: 4px; }
#profiles .pf-hint {
  position: absolute; right: 18px; bottom: 22px; z-index: 3; margin: 0;
  display: none; align-items: center; gap: 8px;
  font-size: var(--fs-label); color: var(--muted);
  transition: opacity var(--dur-3) var(--ease-out);
}
#profiles .pf-hint svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#profiles .pf-box.is-touched .pf-hint { opacity: 0; }
#profiles .pf-stage__cap { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }

/* нет 3D — только торец */
.no-3d #profiles .pf-face, .no-3d #profiles .pf-pane, .no-3d #profiles .pf-cap--back { display: none; }

/* ---------- панель сравнения ---------- */
#profiles .pf-spec { min-width: 0; display: flex; flex-direction: column; }
#profiles .pf-spec__name {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: var(--lh-heading); letter-spacing: -.02em;
}
#profiles .pf-spec__for { margin: var(--s-2) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); }

#profiles .pf-rows { margin: var(--s-5) 0 0; padding: 0; }
#profiles .pf-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline;
  column-gap: var(--s-4);
  padding: 14px 0 16px;
  border-top: 1px solid var(--line);
}
#profiles .pf-row:last-child { border-bottom: 1px solid var(--line); }
#profiles .pf-row dt { font-size: var(--fs-small); color: var(--muted); }
#profiles .pf-row dd { margin: 0; text-align: right; }
/* длинное значение (Geneo: «стекловолокно RAU‑FIPRO») переносится, а не распирает строку на телефоне */
#profiles .pf-row dd b[data-pf-rein] { white-space: normal; }
#profiles .pf-row dd b {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#profiles .pf-row .pf-scale, #profiles .pf-row .pf-cells, #profiles .pf-row .pf-meter { grid-column: 1 / -1; margin-top: 10px; }

#profiles .pf-scale__track {
  position: relative; display: block; height: 8px;
  border-radius: var(--r-pill); background: var(--fog);
  overflow: hidden;
}
#profiles .pf-scale__fill {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--street) 0%, var(--home) 100%);
  transform-origin: 0 50%;
  transform: scaleX(var(--v, 0));
  transition: transform var(--dur-4) var(--ease-out);
}
#profiles .pf-scale__ticks { position: relative; display: block; height: 22px; margin-top: 6px; }
#profiles .pf-tick {
  position: absolute; top: 0; left: calc(var(--x) * 100%);
  transform: translateX(-50%);
  font-size: .875rem; line-height: 22px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2);
}
#profiles .pf-tick::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 2px; height: 8px;
  margin-left: -1px; border-radius: 1px; background: rgba(255,255,255,.95);
}
#profiles .pf-tick.is-on { color: var(--ink); font-weight: 700; }

#profiles .pf-cells, #profiles .pf-meter { display: grid; gap: 6px; }
#profiles .pf-cells { grid-template-columns: repeat(6, 1fr); }
#profiles .pf-meter { grid-template-columns: repeat(3, 1fr); }
#profiles .pf-cells i, #profiles .pf-meter i {
  display: block; height: 14px; border-radius: 4px;
  background: var(--fog);
  transition: background-color var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
#profiles .pf-meter i { height: 8px; border-radius: var(--r-pill); }
#profiles .pf-cells i.on { background: var(--street-deep); }
#profiles .pf-meter i.on { background: var(--frame-2); }
#profiles .pf-cells i:nth-child(2) { transition-delay: 40ms; }
#profiles .pf-cells i:nth-child(3) { transition-delay: 80ms; }
#profiles .pf-cells i:nth-child(4) { transition-delay: 120ms; }
#profiles .pf-cells i:nth-child(5) { transition-delay: 160ms; }
#profiles .pf-cells i:nth-child(6) { transition-delay: 200ms; }
#profiles.is-flash .pf-cells i.on { animation: pf-pop 520ms var(--ease-spring) both; }
@keyframes pf-pop { 0% { transform: scaleY(.4); } 100% { transform: none; } }

#profiles .pf-price {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-4);
  margin-top: var(--s-5);
}
#profiles .pf-price__label { font-size: var(--fs-small); color: var(--muted); }
#profiles .pf-price__val { white-space: nowrap; }
#profiles .pf-price .price {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem); letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
#profiles .pf-price__unit { font-size: var(--fs-body); color: var(--muted); }
#profiles .pf-spec__cta { margin-top: var(--s-5); }
#profiles .pf-spec__fine { margin: var(--s-4) 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
#profiles .pf-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- как отличить настоящий REHAU ---------- */
#profiles .pf-real {
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}
#profiles .pf-real__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: -.015em;
}
#profiles .pf-real__lead { margin: var(--s-2) 0 0; font-size: var(--fs-body); color: var(--muted); line-height: var(--lh-body); }
#profiles .pf-steps {
  list-style: none; margin: var(--s-6) 0 0; padding: 0;
  display: grid; gap: var(--s-5);
}
#profiles .pf-step {
  position: relative;
  display: grid; grid-template-columns: 96px 1fr; column-gap: var(--s-4); align-items: start;
}
#profiles .pf-step__pic {
  grid-row: 1 / span 2;
  width: 96px; height: 80px; padding: 8px 0;
  border-radius: var(--r-2); background: var(--paper);
  fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
#profiles .pf-step__n {
  position: absolute; left: -6px; top: -8px; z-index: 1;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: .9375rem;
  color: var(--white); background: var(--frame);
}
#profiles .pf-step__pic .s-face { fill: var(--fog-2); }
#profiles .pf-step__pic .s-base { fill: var(--white); }
#profiles .pf-step__pic .s-side { fill: var(--fog); }
#profiles .pf-step__pic .s-print { stroke: var(--frame-3); stroke-width: 2.2; }
#profiles .pf-step__pic .s-hl { stroke: var(--home); stroke-width: 3; }
#profiles .pf-step__pic .s-line { stroke-width: 1.4; }
#profiles .pf-step__pic .s-hlbox { fill: var(--home-soft); stroke: var(--home); stroke-width: 1.6; }
#profiles .pf-step__pic .s-seal { fill: var(--home); stroke: none; }
#profiles .pf-step__pic .s-tick { stroke: var(--white); stroke-width: 1.8; }
#profiles .pf-step__title {
  margin: 2px 0 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; line-height: 1.25;
}
#profiles .pf-step p { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }

#profiles .pf-real__cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: var(--paper);
}
#profiles .pf-real__cta p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); max-width: 40rem; }

/* ---------- ≥600 ---------- */
@media (min-width: 600px) {
  #profiles .pf-opt { min-height: 116px; padding: 20px 22px 26px; }
  #profiles .pf-opt__bar { left: 22px; right: 22px; bottom: 14px; }
  #profiles .pf-opt__name { font-size: 1.25rem; }
  #profiles .pf-box { height: 500px; }
  #profiles .pf-real__cta { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); }
  #profiles .pf-real__cta .btn { flex: none; }
}

/* ---------- ≥900 ---------- */
@media (min-width: 900px) {
  #profiles .pf-main {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "pick pick" "stage spec" "cap spec";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-7); align-items: start; margin-top: var(--s-8);
  }
  #profiles .pf-pick { grid-area: pick; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--s-5); }
  #profiles .pf-stage { grid-area: stage; }
  #profiles .pf-stage__cap { grid-area: cap; }
  #profiles .pf-spec { grid-area: spec; margin-top: 0; }
  #profiles .pf-box { height: 600px; }
  #profiles .pf-view { inset: 64px 0 96px; }
  #profiles .pf-spec { padding-top: var(--s-2); }
  #profiles .pf-real__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: end; }
  #profiles .pf-real__lead { margin: 0; }
  #profiles .pf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  #profiles .pf-step { grid-template-columns: 1fr; row-gap: var(--s-4); }
  #profiles .pf-step__pic { grid-row: auto; width: 100%; height: 132px; padding: 20px 0; }
  #profiles .pf-step__n { left: 16px; top: 16px; }
  #profiles .pf-step__title { margin-top: 0; }
}
@media (min-width: 1200px) {
  #profiles .pf-main { column-gap: var(--s-8); }
  #profiles .pf-box { height: 640px; }
}

/* подсказка про вращение — только там, где есть мышь или экран шире */
@media (hover: hover) and (pointer: fine) {
  #profiles .pf-hint { display: inline-flex; }
}
@media (hover: none) and (min-width: 0) {
  #profiles .pf-hint { display: inline-flex; left: auto; }
}
@media (max-width: 599px) {
  #profiles .pf-hint { display: none; }
  #profiles .pf-read { left: 16px; bottom: 14px; gap: var(--s-4); }
  #profiles .pf-read__num { font-size: 2.125rem; }
  #profiles .pf-view { inset: 52px 0 96px; }
  #profiles .pf-side { top: 12px; min-height: 36px; padding: 0 12px 0 10px; }
  #profiles .pf-side--street { left: 12px; }
  #profiles .pf-side--home { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #profiles .pf-opt, #profiles .pf-scale__fill, #profiles .pf-cells i, #profiles .pf-meter i, #profiles .pf-tick { transition: none; }
  #profiles.is-flash .pf-cap .c-num, #profiles.is-flash .pf-cells i.on { animation: none; }
  #profiles .pf-opt:hover { transform: none; }
}

/* ==== comfort.css ==== */
/* comfort — «Тишина и тепло»: тепловизор до/после + шум. Всё под #comfort.
   Секция светлая; экран тепловизора остаётся тёмным — это экран прибора. */
#comfort{
  --cf-ramp:linear-gradient(90deg,#070a24 0%,#16307a 14%,#3f2f9e 30%,#8a2a97 46%,#cf3669 60%,#f0612f 74%,#fca035 86%,#fde26a 95%,#fffbe0 100%);
  --cf-hud-bg:rgba(14,17,20,.72);
  overflow:clip;
}

/* ---------- раскладка ---------- */
#comfort .cf-top{display:grid;gap:clamp(24px,3vw,40px)}
#comfort .cf-head{margin-bottom:0}
#comfort .cf-thermo{display:grid;gap:clamp(24px,3vw,36px);position:relative}
#comfort .cf-controls{display:grid;gap:28px;align-content:start}
@media (min-width:900px) and (max-width:1199.98px){
  #comfort .cf-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  #comfort .cf-seg{grid-column:1/-1}
}
@media (min-width:1200px){
  #comfort .cf-top{grid-template-columns:minmax(0,4fr) minmax(0,7.4fr);grid-template-rows:auto 1fr;column-gap:clamp(48px,5vw,88px);row-gap:40px}
  #comfort .cf-head{grid-column:1;grid-row:1;align-self:start}
  #comfort .cf-thermo{grid-column:1/-1;grid-row:1/3;grid-template-columns:subgrid;grid-template-rows:subgrid;pointer-events:none}
  #comfort .cf-thermo > *{pointer-events:auto}
  #comfort .cf-stage{grid-column:2;grid-row:1/3}
  #comfort .cf-controls{grid-column:1;grid-row:2;align-self:end}
}

/* ---------- прибор ---------- */
#comfort .cf-stage{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-4);perspective:1600px;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;
}
@media (min-width:600px){ #comfort .cf-stage{aspect-ratio:5/4} }
#comfort .cf-stage__tilt{
  position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--dur-3) var(--ease-out);
}
#comfort .cf-stage.is-dragging .cf-stage__tilt{transition-duration:120ms}
#comfort .cf-layer{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#0d1220;
}
#comfort .cf-layer--old{box-shadow:0 36px 70px -34px rgba(26,30,34,.55), 0 0 0 1px rgba(26,30,34,.08)}
#comfort .cf-layer--new{clip-path:inset(0 0 0 var(--split));-webkit-clip-path:inset(0 0 0 var(--split))}
#comfort .cf-canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto}
#comfort .cf-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#comfort .cf-lines *{vector-effect:non-scaling-stroke;fill:none}
#comfort .cf-lines .l-main{stroke:rgba(255,255,255,.62);stroke-width:1.25}
#comfort .cf-lines .l-soft{stroke:rgba(255,255,255,.30);stroke-width:1}
#comfort .cf-lines .l-faint{stroke:rgba(255,255,255,.14);stroke-width:1}
#comfort .cf-lines .l-fill{fill:rgba(255,255,255,.55);stroke:none}

/* скан при «включении» тепловизора */
#comfort .cf-scan{
  position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;pointer-events:none;opacity:0;
  transform:translateY(var(--scan-y,0px));
  background:linear-gradient(90deg,transparent,rgba(253,226,106,.95) 15%,#fffbe0 50%,rgba(253,226,106,.95) 85%,transparent);
  box-shadow:0 0 18px 4px rgba(253,200,80,.45);
}
#comfort .cf-stage.is-scanning .cf-scan{opacity:1}

/* HUD: подписи и уголки видоискателя — чуть впереди (3D-параллакс) */
#comfort .cf-hud{position:absolute;inset:0;pointer-events:none;transform:translateZ(36px);border-radius:inherit}
#comfort .cf-hud::before,#comfort .cf-hud::after{
  content:"";position:absolute;inset:14px;border-radius:calc(var(--r-4) - 10px);pointer-events:none;
  border:2px solid rgba(255,255,255,.5);
  -webkit-mask:linear-gradient(#000 0 0) top left/34px 34px no-repeat,linear-gradient(#000 0 0) top right/34px 34px no-repeat,
    linear-gradient(#000 0 0) bottom left/34px 34px no-repeat,linear-gradient(#000 0 0) bottom right/34px 34px no-repeat;
  mask:linear-gradient(#000 0 0) top left/34px 34px no-repeat,linear-gradient(#000 0 0) top right/34px 34px no-repeat,
    linear-gradient(#000 0 0) bottom left/34px 34px no-repeat,linear-gradient(#000 0 0) bottom right/34px 34px no-repeat;
}
#comfort .cf-hud::after{display:none}
#comfort .cf-tag{
  position:absolute;top:22px;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-pill);background:var(--cf-hud-bg);color:var(--on-dark);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:var(--fs-label);font-weight:600;line-height:1.2;white-space:nowrap;
  transition:opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
#comfort .cf-tag::before{content:"";width:10px;height:10px;border-radius:50%;flex:none}
#comfort .cf-tag--old{left:22px}
#comfort .cf-tag--old::before{background:#f0612f;box-shadow:0 0 0 3px rgba(240,97,47,.3)}
#comfort .cf-tag--new{right:22px}
#comfort .cf-tag--new::before{background:#5a74d6;box-shadow:0 0 0 3px rgba(90,116,214,.3)}
#comfort .cf-tag.is-off{opacity:0;transform:translateY(-6px)}

/* граница сравнения */
#comfort .cf-divider{
  position:absolute;top:0;bottom:0;left:var(--split);width:0;pointer-events:none;
}
#comfort .cf-divider::before{
  content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 0 24px rgba(255,255,255,.35);
}
#comfort .cf-knob{
  position:absolute;top:50%;left:0;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  display:grid;place-items:center;background:var(--home);color:var(--ink);
  box-shadow:0 0 0 6px rgba(255,138,61,.28), 0 14px 30px -8px rgba(0,0,0,.6);
  transition:transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) ease;
}
#comfort .cf-stage:hover .cf-knob,#comfort .cf-stage.is-dragging .cf-knob{transform:scale(1.08);box-shadow:0 0 0 10px rgba(255,138,61,.24), 0 14px 30px -8px rgba(0,0,0,.6)}
#comfort .cf-range:focus-visible + .cf-stage .cf-knob{outline:3px solid #fff;outline-offset:4px}

/* метки на снимке */
#comfort .cf-pins{position:absolute;inset:0;pointer-events:none;transform:translateZ(18px)}
#comfort .cf-pin{position:absolute;width:0;height:0;transition:opacity var(--dur-2) ease}
#comfort .cf-pin.is-off{opacity:0}
#comfort .cf-pin__dot{
  position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px rgba(14,17,20,.55);
}
#comfort .cf-pin__dot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #fff;opacity:0;
  animation:cf-ping 2.4s var(--ease-out) infinite;
}
#comfort .cf-pin__label{
  position:absolute;top:-17px;left:18px;padding:7px 12px;border-radius:var(--r-pill);
  background:var(--cf-hud-bg);color:var(--on-dark);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:var(--fs-label);font-weight:600;line-height:1.2;white-space:nowrap;
}
#comfort .cf-pin[data-side="left"] .cf-pin__label{left:auto;right:18px}
@keyframes cf-ping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(2.2);opacity:0}}
@media (max-width:599.98px){
  #comfort .cf-pin[data-minor]{display:none}
  #comfort .cf-pin .cf-pin__label,#comfort .cf-pin[data-side="left"] .cf-pin__label{left:0;right:auto;top:16px;transform:translateX(-50%);padding:6px 11px}
  #comfort .cf-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #comfort .cf-seg .chip{padding:0 8px;white-space:normal;text-align:center}
  #comfort .cf-legend__ends{flex-direction:column;gap:8px}
  #comfort .cf-tag{top:16px;padding:7px 12px}
  #comfort .cf-tag--old{left:16px}
  #comfort .cf-tag--new{right:16px}
  #comfort .cf-knob{width:56px;height:56px;margin:-28px 0 0 -28px}
}

/* щуп температуры (мышь) */
#comfort .cf-probe{position:absolute;left:0;top:0;pointer-events:none;transform:translate3d(var(--px,0),var(--py,0),40px)}
#comfort .cf-probe__cross{
  position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
#comfort .cf-probe__cross::before,#comfort .cf-probe__cross::after{content:"";position:absolute;background:#fff}
#comfort .cf-probe__cross::before{left:50%;top:-8px;bottom:-8px;width:2px;margin-left:-1px}
#comfort .cf-probe__cross::after{top:50%;left:-8px;right:-8px;height:2px;margin-top:-1px}
#comfort .cf-probe__read{
  position:absolute;left:26px;top:14px;display:grid;gap:2px;padding:8px 14px;border-radius:var(--r-2);
  background:var(--cf-hud-bg);color:var(--on-dark);white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#comfort .cf-probe__read b{font-family:var(--font-display);font-size:1.375rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
#comfort .cf-probe__read span{font-size:var(--fs-label);color:var(--on-dark-muted)}
#comfort .cf-probe.is-flip .cf-probe__read{left:auto;right:26px}

/* ---------- управление, шкала, сноска ---------- */
#comfort .cf-seg .chip{min-height:52px;font-size:var(--fs-small);font-weight:600}
#comfort .cf-legend{display:grid;gap:12px}
#comfort .cf-legend__title{font-size:var(--fs-small);font-weight:600;color:var(--fg)}
#comfort .cf-legend__bar{
  position:relative;height:16px;border-radius:var(--r-pill);background:var(--cf-ramp);margin-bottom:30px;
  box-shadow:inset 0 0 0 1px rgba(26,30,34,.08);
}
#comfort .cf-legend__bar span{
  position:absolute;top:24px;transform:translateX(-50%);font-size:var(--fs-label);font-weight:600;color:var(--fg);
  font-variant-numeric:tabular-nums;line-height:1;
}
#comfort .cf-legend__bar span::before{content:"";position:absolute;left:50%;top:-10px;width:1px;height:6px;background:var(--line-strong)}
#comfort .cf-legend__bar span:last-child{transform:translateX(-100%)}
#comfort .cf-legend__bar span:last-child::before{left:auto;right:0}
#comfort .cf-legend__ends{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-label);color:var(--muted);line-height:1.35}
#comfort .cf-legend__ends span{display:inline-flex;align-items:center;gap:8px}
#comfort .cf-legend__ends span:last-child{text-align:right}
#comfort .cf-dot{width:12px;height:12px;border-radius:50%;flex:none}
#comfort .cf-dot--cold{background:#16307a}
#comfort .cf-dot--hot{background:#fca035}
#comfort .cf-note{
  display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-2);
  border:1px solid var(--line);background:var(--white);
  font-size:var(--fs-small);line-height:1.5;color:var(--muted);
}
#comfort .cf-note b{color:var(--fg)}
#comfort .cf-note .icon{margin-top:2px;color:var(--fg)}

/* ---------- низ: шум + факты ---------- */
#comfort .cf-bottom{display:grid;gap:clamp(40px,4vw,56px);margin-top:clamp(64px,7vw,128px)}
@media (min-width:1000px){
  #comfort .cf-bottom{grid-template-columns:minmax(0,7.4fr) minmax(0,4fr);column-gap:clamp(48px,5vw,88px);align-items:start}
}
#comfort .cf-noise{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:var(--shadow-1);
  padding:clamp(22px,3vw,44px);display:grid;gap:clamp(20px,2.4vw,32px);overflow:hidden;
}
#comfort .cf-noise__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
#comfort .cf-noise__title{font-size:var(--fs-h3);font-weight:700}
#comfort .cf-noise__seg .chip{min-height:52px;font-size:var(--fs-small);font-weight:600}
@media (max-width:599.98px){
  #comfort .cf-noise__seg{width:100%;display:grid;grid-template-columns:1fr 1fr}
  #comfort .cf-noise__seg .chip{padding:0 12px;white-space:normal;text-align:center}
}

/* 3D: волна шума проходит сквозь стёкла */
#comfort .cf-sound{
  --L:560px;--gap:38px;--out:var(--street-deep);--in:var(--home);
  position:relative;height:250px;border-radius:var(--r-3);
  background:
    linear-gradient(90deg,rgba(143,164,178,.20),rgba(143,164,178,0) 46%,rgba(255,138,61,0) 54%,rgba(255,138,61,.12)),
    #F2F5F6;
}
#comfort .cf-sound[data-mode="old"]{--in:var(--street-deep)}
#comfort .cf-sound__side{
  position:absolute;top:16px;font-size:var(--fs-label);font-weight:600;color:var(--muted);z-index:2
}
#comfort .cf-sound__side--out{left:20px}
#comfort .cf-sound__side--in{right:20px}
#comfort .cf-sound__scene{position:absolute;inset:0;perspective:900px;perspective-origin:50% 40%;overflow:hidden;border-radius:inherit}
#comfort .cf-sound__rig{
  position:absolute;left:50%;top:54%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-14deg) rotateY(58deg);
}
#comfort .cf-wave-plane{
  position:absolute;width:var(--L);height:160px;left:calc(var(--L) / -2);top:-80px;
  transform:rotateY(-90deg);transform-style:preserve-3d;
}
#comfort .cf-wave{width:100%;height:100%;overflow:visible}
#comfort .cf-wave path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#comfort .cf-wave__out{stroke:var(--out)}
#comfort .cf-wave__in{stroke:var(--in);transition:stroke var(--dur-3) ease}
#comfort .cf-pane{
  position:absolute;width:168px;height:196px;left:-84px;top:-98px;border-radius:6px;
  background:linear-gradient(150deg,rgba(255,255,255,.75),rgba(199,220,231,.38) 55%,rgba(255,255,255,.6));
  border:2px solid #9FBBCB;
  box-shadow:inset 0 0 0 6px rgba(46,53,60,.78), 0 10px 24px -14px rgba(26,30,34,.4);
  transform:translateZ(calc(var(--z) * var(--gap)));
  transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-3) ease;
}
#comfort .cf-sound[data-mode="old"] .cf-pane{transform:translateZ(calc(var(--z) * var(--gap) * .3))}
#comfort .cf-sound[data-mode="old"] .cf-pane--third{opacity:0;transform:translateZ(calc(var(--gap) * 1.6))}
@media (max-width:599.98px){
  #comfort .cf-sound{--L:330px;--gap:22px;height:210px}
  #comfort .cf-pane{width:112px;height:136px;left:-56px;top:-68px}
  #comfort .cf-wave-plane{height:130px;top:-65px}
}

#comfort .cf-meter{display:grid;gap:18px}
#comfort .cf-meter__read{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
#comfort .cf-meter__num{font-family:var(--font-display);font-size:clamp(2.5rem,1.8rem + 2vw,3.5rem);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
#comfort .cf-meter__num b{font-weight:700;color:var(--home-text);transition:color var(--dur-2) ease}
#comfort .cf-sound[data-mode="old"] ~ .cf-meter .cf-meter__num b{color:var(--street-deep)}
#comfort .cf-meter__approx{font-weight:500;color:var(--muted);margin-right:4px}
#comfort .cf-meter__what{font-size:var(--fs-body);color:var(--fg);max-width:34ch;line-height:1.4}
#comfort .cf-meter__track{
  position:relative;height:14px;border-radius:var(--r-pill);background:rgba(26,30,34,.07);margin:34px 0 30px;
}
#comfort .cf-meter__fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:inherit;width:calc(var(--v) * 100%);
  background:linear-gradient(90deg,rgba(255,138,61,.55),var(--home));
  transition:width var(--dur-4) var(--ease-out), background var(--dur-3) ease;
}
#comfort .cf-sound[data-mode="old"] ~ .cf-meter .cf-meter__fill{background:linear-gradient(90deg,rgba(143,164,178,.45),var(--street))}
#comfort .cf-meter__street{position:absolute;left:calc(var(--v) * 100%);top:-6px;bottom:-6px;width:0}
#comfort .cf-meter__street i{position:absolute;left:-1.5px;top:0;bottom:0;width:3px;border-radius:2px;background:var(--street-deep)}
#comfort .cf-meter__street em{
  position:absolute;bottom:calc(100% + 6px);right:-10px;font-style:normal;font-size:var(--fs-label);font-weight:600;color:var(--street-deep);white-space:nowrap
}
#comfort .cf-meter__tick{
  position:absolute;top:24px;left:calc(var(--v) * 100%);transform:translateX(-50%);
  font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap
}
#comfort .cf-meter__tick:first-of-type{transform:none}
#comfort .cf-meter__tick:last-child{transform:translateX(-100%)}
#comfort .cf-meter__note{font-size:var(--fs-small);color:var(--muted);line-height:1.5}

#comfort .cf-side{display:grid;gap:40px;align-content:start}
#comfort .cf-facts{list-style:none;padding:0;display:grid;gap:0}
#comfort .cf-fact{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:28px 0;border-top:1px solid var(--line)}
#comfort .cf-fact:first-child{border-top:0;padding-top:4px}
#comfort .cf-fact__icon{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
  background:var(--home-soft);color:var(--home-text);font-size:1.5rem;
}
#comfort .cf-fact__title{font-size:var(--fs-h3);margin-bottom:8px}
#comfort .cf-fact p{color:var(--muted);font-size:var(--fs-body);line-height:var(--lh-body)}
@media (max-width:599.98px){
  #comfort .cf-cta .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  #comfort .cf-stage__tilt,#comfort .cf-tag,#comfort .cf-knob,#comfort .cf-pane,#comfort .cf-meter__fill,#comfort .cf-wave__in{transition:none}
  #comfort .cf-pin__dot::after{animation:none}
}

/* ==== balconies.css ==== */
/* ==========================================================================
   Балконы и лоджии (v2) — лоджия в разрезе, CSS-3D, вид из квартиры.
   Единица модели --m = 1 метр (считается от размера сцены, container units).
   Координаты граней — в метрах, центр коробки лоджии (3 × 2,6 × 1,3 м) в нуле:
   x вправо, y вниз, z к зрителю (в квартиру). Остекление на z = −0,65.
   ========================================================================== */
#balconies{
  --bl-concrete:#C3CACE; --bl-concrete-2:#AEB7BC;
  --bl-plaster:#DCE2E5;
  --bl-foam:#F0DFA8; --bl-foam-2:#DFC67E;
  --bl-panel:#F5F1E9; --bl-panel-2:#E4DCCD;
  --bl-wood:#C9976A; --bl-wood-2:#AE7B50; --bl-wood-3:#8E5F3A;
  --bl-mat:#88939A;
  --bl-alu:#DCE2E6; --bl-alu-2:#B3BEC6;
  --bl-poche:var(--frame-2);
  overflow:clip;
}

.bl-head{max-width:820px}

/* ---------- раскладка ---------- */
.bl{display:grid;gap:clamp(20px, 3vw, 32px);align-items:start}
.bl-panel{display:grid;gap:clamp(16px, 2vw, 24px);min-width:0}

@media (min-width:1200px){
  .bl{grid-template-columns:minmax(0, 1.22fr) minmax(0, 1fr);gap:clamp(40px, 4vw, 64px)}
}

/* ---------- сцена ---------- */
.bl-stage{
  position:sticky;top:calc(var(--header-h) + 8px);z-index:2;
  height:clamp(300px, 42svh, 520px);
  margin:0;border-radius:var(--r-4);overflow:hidden;isolation:isolate;
  container-type:size;
  background:linear-gradient(180deg, #D3DEE5 0%, #E8EEF1 52%, #DCE5EA 100%);
  box-shadow:var(--shadow-1);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;
  cursor:grab;
}
.bl-stage.is-dragging{cursor:grabbing}
@media (min-width:1200px){
  .bl-stage{top:calc(var(--header-h) + 24px);height:min(680px, calc(100svh - var(--header-h) - 48px));min-height:560px}
}
/* узкий экран: сцена от края до края контейнера, но с безопасными полями */
@media (max-width:599px){
  .bl-stage{border-radius:var(--r-3);height:min(46svh, 104cqw, 400px)}
}

/* улица за стеклом */
.bl-street{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bl-street::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 58%, rgba(255,138,61,.26), rgba(255,138,61,0) 70%);
  opacity:var(--bl-warmth, 1);transition:opacity var(--dur-4) var(--ease-out);
}
.bl-street::after{ /* мягкая тень под моделью */
  content:"";position:absolute;left:14%;right:10%;bottom:7%;height:14%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(26,30,34,.22), rgba(26,30,34,0) 70%);
  filter:blur(6px);
}
.bl-city{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%}
.bl-city__far{fill:#C9D6DE}
.bl-city__near{fill:#BACAD4}
.bl-stage[data-glz="cold"]{--bl-warmth:0}
.bl-stage[data-glz="warm"]{--bl-warmth:1}
.bl-stage[data-glz="panoramic"]{--bl-warmth:.55}
.bl-stage.has-electric{--bl-warmth:1.25}
.bl-stage[data-glz="cold"].has-electric{--bl-warmth:.6}

/* ---------- 3D ---------- */
.bl-view{
  --m:min(22.5cqw, 25cqh);
  position:absolute;inset:0;
  perspective:calc(var(--m) * 16);perspective-origin:50% 40%;
  pointer-events:none;
}
@media (max-width:599px){
  .bl-view{--m:min(23.5cqw, 25cqh)}
  .bl-world{--wy:-.06}
  .bl-hint{min-height:30px;font-size:.875rem;padding:0 12px 0 8px}
}
.bl-world{
  --rx:-24deg;--ry:-34deg;--wy:.05;
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:translate3d(0, calc(var(--m) * var(--wy)), 0) rotateX(var(--rx)) rotateY(var(--ry));
}
.bl-g,.bl-lay{position:absolute;inset:0;transform-style:preserve-3d}

/* параметры остекления (в метрах): высота и глубина парапета, глубина и ширина рамы, ширина створки */
.bl-stage{--P:1;--pd:.24;--fd:.13;--fw:.07;--sb:.05;--sash-c:var(--frame);--sill-c:#F4F5F3}
.bl-stage[data-glz="cold"]{--P:1;--pd:.12;--fd:.07;--fw:.03;--sb:.022;--sash-c:var(--bl-alu);--sill-c:var(--bl-alu-2)}
.bl-stage[data-glz="panoramic"]{--P:.14;--pd:.12;--fd:.1;--fw:.045;--sb:.032;--sash-c:var(--frame-2);--sill-c:var(--frame-2)}

.f{
  --lift:0;
  position:absolute;left:50%;top:50%;display:block;
  width:calc(var(--m) * var(--w));height:calc(var(--m) * var(--h));
  margin:calc(var(--m) * var(--h) / -2) 0 0 calc(var(--m) * var(--w) / -2);
  transform:translate3d(calc(var(--m) * var(--x)), calc(var(--m) * (var(--y) - var(--lift))), calc(var(--m) * var(--z))) var(--rot, rotate(0deg));
  transition:
    transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out),
    margin var(--dur-3) var(--ease-out), opacity var(--dur-2) ease, background-color var(--dur-3) ease;
  transition-delay:var(--gd, 0ms);
}
.f--up{--rot:rotateX(90deg)}
.f--side{--rot:rotateY(90deg)}
.f--cut{
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.07) 0 1px, transparent 1.5px) 0 0 / 7px 7px,
    var(--bl-poche);
}

/* сборка при первом появлении */
.bl-view:not(.is-built) .f{opacity:0}
.bl-view:not(.is-built) .bl-g--slab .f,
.bl-view:not(.is-built) .bl-g--wall .f{--lift:-.5}
.bl-view:not(.is-built) .bl-g--par .f{--lift:.6}
.bl-view:not(.is-built) .bl-g--glz .f{--lift:1.1}
.bl-view:not(.is-built) .bl-g--wl .f,
.bl-view:not(.is-built) .bl-g--fl .f{--lift:.9}
.bl-g--slab{--gd:0ms}
.bl-g--wall{--gd:140ms}
.bl-g--par{--gd:280ms}
.bl-g--glz{--gd:420ms}
.bl-g--wl{--gd:620ms}
.bl-g--fl{--gd:760ms}
.bl-view.is-settled .f{transition-delay:0ms}
.bl-view.is-settled .bl-lay .f{transition-delay:var(--ld, 0ms)}

/* слой выключен — лежит выше и прозрачен; включение = «падает» на место */
.bl-lay:not(.is-on) .f{--lift:.7;opacity:0}
.bl-view.is-settled .bl-lay .f{
  transition:
    transform 760ms var(--ease-spring), width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out),
    margin var(--dur-3) var(--ease-out), opacity var(--dur-2) ease;
}
.bl-view.is-settled .bl-lay:not(.is-on) .f{transition-timing-function:var(--ease-out)}

/* ---------- материалы ---------- */
.bl-slab-top{
  background:
    radial-gradient(circle at 20% 30%, rgba(26,30,34,.10) 0 1px, transparent 1.6px) 0 0 / 9px 9px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0 1px, transparent 1.6px) 0 0 / 13px 13px,
    var(--bl-concrete);
}
.bl-wall{background:var(--bl-plaster);overflow:hidden}
.bl-mood{position:absolute;inset:0;transition:opacity var(--dur-4) ease, background-color var(--dur-4) ease}
.bl-stage[data-glz="cold"] .bl-mood{background:rgba(93,115,133,.26)}
.bl-stage[data-glz="warm"] .bl-mood{background:linear-gradient(180deg, rgba(255,241,230,0), rgba(255,138,61,.10))}
.bl-stage[data-glz="panoramic"] .bl-mood{background:linear-gradient(200deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%)}

.bl-m-foam{
  background:
    linear-gradient(90deg, rgba(150,120,40,.22) 1px, transparent 1px) 0 0 / calc(var(--m) * .6) 100%,
    linear-gradient(0deg, rgba(150,120,40,.22) 1px, transparent 1px) 0 0 / 100% calc(var(--m) * .6),
    var(--bl-foam);
}
.bl-m-foam--cut{
  background:
    radial-gradient(circle, rgba(120,90,20,.25) 0 1px, transparent 1.4px) 0 0 / 5px 5px,
    var(--bl-foam-2);
}
.bl-m-panel{
  background:
    linear-gradient(90deg, rgba(120,100,70,.18) 1px, transparent 1px) 0 0 / calc(var(--m) * .25) 100%,
    linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%),
    var(--bl-panel);
  overflow:hidden;
}
.bl-m-panel--cut{background:var(--bl-panel-2)}
.bl-m-heat{background:var(--bl-mat);overflow:hidden}
.bl-m-heat--cut{
  background:
    radial-gradient(circle, var(--home) 0 2px, transparent 2.5px) 0 50% / calc(var(--m) * .14) 100% repeat-x,
    var(--bl-mat);
}
.bl-cable{
  position:absolute;inset:6% 4%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--m) * .11), var(--home) calc(var(--m) * .11) calc(var(--m) * .14));
}
.bl-cable::before,.bl-cable::after{ /* петли змейки */
  content:"";position:absolute;left:0;right:0;height:calc(var(--m) * .03);background:var(--home);
}
.bl-cable::before{top:0}
.bl-cable::after{bottom:0}
.bl-stage.has-heating .bl-cable{animation:bl-heat 2.8s ease-in-out infinite}
@keyframes bl-heat{50%{filter:drop-shadow(0 0 6px rgba(255,138,61,.9)) brightness(1.08)}}

.bl-m-wood{
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--m) * .19), rgba(80,50,25,.45) calc(var(--m) * .19) calc(var(--m) * .196)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--m) * .9), rgba(80,50,25,.35) calc(var(--m) * .9) calc(var(--m) * .905)),
    repeating-linear-gradient(91deg, rgba(255,255,255,.08) 0 3px, rgba(0,0,0,.04) 3px 7px),
    linear-gradient(180deg, var(--bl-wood), var(--bl-wood-2));
}
.bl-m-wood--cut{background:var(--bl-wood-3)}
.bl-floorglow{
  background:radial-gradient(55% 60% at 45% 45%, rgba(255,176,110,.62), rgba(255,138,61,0) 72%);
  mix-blend-mode:screen;
}

/* подсветка: светодиодная линия под потолком + свет на стенах */
.bl-led{
  position:absolute;left:4%;right:4%;top:3%;height:calc(var(--m) * .03);border-radius:4px;
  background:#FFE9D4;box-shadow:0 0 10px 3px rgba(255,160,90,.75), 0 0 34px 10px rgba(255,138,61,.35);
  opacity:0;transition:opacity var(--dur-3) ease;
}
.bl-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--dur-3) ease}
.bl-glow--wall{background:linear-gradient(180deg, rgba(255,170,100,.55), rgba(255,170,100,.08) 55%, rgba(255,170,100,0))}
.bl-glow--par{background:linear-gradient(0deg, rgba(255,170,100,.35), rgba(255,170,100,0) 70%)}
.bl-stage.has-electric .bl-led,
.bl-stage.has-electric .bl-glow{opacity:1}

/* парапет */
.bl-par{background:#D9DFE2;overflow:hidden;transition-property:transform, width, height, margin, opacity, background-color}
.bl-stage[data-glz="cold"] .bl-par{
  background:
    radial-gradient(circle at 30% 30%, rgba(26,30,34,.10) 0 1px, transparent 1.6px) 0 0 / 8px 8px,
    var(--bl-concrete-2);
}
.bl-stage[data-glz="panoramic"] .bl-par{background:var(--frame-2)}
.bl-par__panels{
  position:absolute;inset:0;opacity:0;transition:opacity var(--dur-3) ease;
  background:
    linear-gradient(90deg, rgba(120,100,70,.18) 1px, transparent 1px) 0 0 / calc(var(--m) * .25) 100%,
    var(--bl-panel);
}
.bl-stage.has-panels:not([data-glz="panoramic"]) .bl-par__panels{opacity:1}
.bl-sill{background:var(--sill-c);box-shadow:inset 0 -2px 0 rgba(26,30,34,.08)}

/* разрез парапета: отделка · утеплитель · основание · наружный лист */
.bl-par-cut{display:flex;overflow:hidden;background:var(--bl-poche)}
.bl-par-cut > i{display:block;height:100%;flex:var(--g, 0) 1 0;min-width:0;transition:flex-grow var(--dur-3) var(--ease-out)}
.bl-par-cut__lin{--g:0;background:var(--bl-panel-2)}
.bl-par-cut__ins{--g:0;background:radial-gradient(circle, rgba(120,90,20,.25) 0 1px, transparent 1.4px) 0 0 / 5px 5px, var(--bl-foam-2)}
.bl-par-cut__base{--g:5;background:radial-gradient(circle at 30% 40%, rgba(255,255,255,.07) 0 1px, transparent 1.5px) 0 0 / 7px 7px, var(--bl-poche)}
.bl-par-cut__skin{--g:1;background:var(--bl-alu-2)}
.bl-stage[data-glz="warm"] .bl-par-cut__ins{--g:5}
.bl-stage.has-panels .bl-par-cut__lin{--g:1.2}
.bl-stage[data-glz="panoramic"] .bl-par-cut > i{--g:0}
.bl-stage[data-glz="panoramic"] .bl-par-cut__base{--g:1;background:var(--frame-3)}

/* остекление */
.bl-frame-top{background:var(--sash-c);box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.08)}
.bl-glz{
  transform-style:preserve-3d;
  border:calc(var(--m) * var(--fw)) solid var(--sash-c);
  transition-property:transform, width, height, margin, opacity, border-color, border-width;
}
.bl-frame-cut{
  background:
    linear-gradient(180deg, var(--sash-c) 0 calc(var(--m) * var(--fw) * 1.6), transparent 0 calc(100% - var(--m) * var(--fw) * 1.6), var(--sash-c) 0),
    var(--glass);
  position:absolute;
}
.bl-frame-cut::before{ /* стёкла в разрезе: одно у холодного, три у стеклопакета */
  content:"";position:absolute;left:0;right:0;top:calc(var(--m) * var(--fw) * 1.6);bottom:calc(var(--m) * var(--fw) * 1.6);
  background:repeating-linear-gradient(90deg, transparent 0 22%, var(--glass-edge) 22% 30%, transparent 30% 34%);
  background-position:center;
  transition:opacity var(--dur-3) ease;
}
.bl-stage[data-glz="cold"] .bl-frame-cut::before{background:linear-gradient(90deg, transparent 44%, var(--glass-edge) 44% 58%, transparent 58%)}

.bl-sash{
  --sx:0;--sw:25;--sz:0;--so:1;--low:0;--hand:0;
  position:absolute;top:0;bottom:0;left:calc(var(--sx) * 1%);width:calc(var(--sw) * 1%);
  border:calc(var(--m) * var(--sb)) solid var(--sash-c);
  background:
    linear-gradient(112deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.5) 30%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 42%, rgba(255,255,255,.28) 44%, rgba(255,255,255,0) 48%) 0 0 / 300% 100% no-repeat,
    linear-gradient(170deg, rgba(238,246,250,.55), rgba(199,220,231,.22) 50%, rgba(159,187,203,.38));
  background-position:var(--sheen, 100%) 0, 0 0;
  opacity:var(--so);
  transform:translateZ(calc(var(--m) * var(--sz)));
  transition:
    left var(--dur-3) var(--ease-inout), width var(--dur-3) var(--ease-inout), transform var(--dur-3) var(--ease-inout),
    opacity var(--dur-2) ease, border-color var(--dur-3) ease, border-width var(--dur-3) var(--ease-inout),
    background-position 1100ms var(--ease-inout);
}
.bl-sash::before{ /* иней у холодного / тёплый отблеск у тёплого */
  content:"";position:absolute;inset:0;transition:opacity var(--dur-3) ease;
  background:radial-gradient(120% 90% at 50% 50%, rgba(255,255,255,0) 55%, rgba(255,255,255,.7) 100%);
  opacity:0;
}
.bl-stage[data-glz="cold"] .bl-sash::before{opacity:1}
.bl-stage[data-glz="warm"] .bl-sash::before{opacity:1;background:linear-gradient(0deg, rgba(255,138,61,.18), rgba(255,138,61,0) 45%)}
.bl-sash__low{
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--low) * 1%);
  border-top:calc(var(--m) * var(--sb)) solid var(--sash-c);
  background:linear-gradient(180deg, rgba(238,246,250,.7), rgba(207,220,227,.55));
  transition:height var(--dur-3) var(--ease-inout), border-width var(--dur-3) ease;
}
.bl-sash__h{
  position:absolute;right:calc(var(--m) * .04);top:44%;width:calc(var(--m) * .035);height:calc(var(--m) * .16);
  border-radius:3px;background:#EEF1F3;box-shadow:0 1px 2px rgba(0,0,0,.3);
  opacity:var(--hand);transition:opacity var(--dur-2) ease;
}
.bl-stage.is-morph .bl-sash{--sheen:0%}

/* раскладка створок по типам */
.bl-stage[data-glz="cold"] .bl-sash:nth-child(1){--sx:0;--sw:26.5;--sz:0}
.bl-stage[data-glz="cold"] .bl-sash:nth-child(2){--sx:24.5;--sw:26.5;--sz:.045}
.bl-stage[data-glz="cold"] .bl-sash:nth-child(3){--sx:49;--sw:26.5;--sz:0}
.bl-stage[data-glz="cold"] .bl-sash:nth-child(4){--sx:73.5;--sw:26.5;--sz:.045}
.bl-stage[data-glz="warm"] .bl-sash:nth-child(1){--sx:0;--sw:33.34}
.bl-stage[data-glz="warm"] .bl-sash:nth-child(2){--sx:33.33;--sw:33.34;--hand:1}
.bl-stage[data-glz="warm"] .bl-sash:nth-child(3){--sx:66.66;--sw:33.34;--hand:1}
.bl-stage[data-glz="warm"] .bl-sash:nth-child(4){--sx:100;--sw:0;--so:0}
.bl-stage[data-glz="panoramic"] .bl-sash{--sw:25;--low:30}
.bl-stage[data-glz="panoramic"] .bl-sash:nth-child(2){--sx:25}
.bl-stage[data-glz="panoramic"] .bl-sash:nth-child(3){--sx:50;--hand:1}
.bl-stage[data-glz="panoramic"] .bl-sash:nth-child(4){--sx:75}
.bl-stage[data-glz="panoramic"] .bl-sash__h{top:30%}

/* подписи на сцене */
.bl-state{
  position:absolute;left:clamp(12px, 2cqw, 20px);top:clamp(12px, 2cqw, 20px);z-index:3;
  display:grid;pointer-events:none;
}
.bl-state__item{
  grid-area:1 / 1;justify-self:start;
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 2px rgba(26,30,34,.08);
  font-size:var(--fs-label);font-weight:600;color:var(--ink);white-space:nowrap;
  opacity:0;transform:translateY(-6px);transition:opacity var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
.bl-state__item .icon{width:20px;height:20px;color:var(--street-deep)}
.bl-stage[data-glz="warm"] .bl-state__item .icon,
.bl-stage[data-glz="panoramic"] .bl-state__item .icon{color:var(--home-press)}
.bl-stage[data-glz="cold"] [data-state="cold"],
.bl-stage[data-glz="warm"] [data-state="warm"],
.bl-stage[data-glz="panoramic"] [data-state="panoramic"]{opacity:1;transform:none}

.bl-hint{
  position:absolute;right:clamp(12px, 2cqw, 20px);bottom:clamp(12px, 2cqw, 20px);z-index:3;
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px 0 10px;border-radius:var(--r-pill);
  background:rgba(34,39,44,.72);color:var(--on-dark);font-size:.9375rem;font-weight:500;pointer-events:none;
  transition:opacity var(--dur-3) ease;
}
.bl-hint .icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bl-stage.is-touched .bl-hint{opacity:0}

/* ---------- выбор остекления ---------- */
.bl-types{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px}
.bl-type{
  position:relative;display:grid;align-content:space-between;gap:6px;min-height:84px;min-width:0;
  padding:14px 16px;border-radius:var(--r-2);
  background:var(--white);border:1.5px solid transparent;box-shadow:var(--shadow-1);color:var(--ink);
  transition:background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease;
}
.bl-type:hover{border-color:var(--line-strong)}
.bl-type:active{transform:scale(.98)}
.bl-type:focus-visible{outline:3px solid var(--home);outline-offset:3px;border-radius:var(--r-2)}
.bl-type__name{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;line-height:1.2;letter-spacing:-.01em}
.bl-type__price{font-size:var(--fs-label);font-weight:500;color:var(--muted);line-height:1.25}
.bl-type[aria-checked="true"]{background:var(--frame);color:var(--white);box-shadow:var(--shadow-2)}
.bl-type[aria-checked="true"] .bl-type__price{color:var(--home)}
.bl-type[aria-checked="true"]::after{
  content:"";position:absolute;right:16px;bottom:20px;width:8px;height:8px;border-radius:50%;
  background:var(--home);box-shadow:0 0 0 4px rgba(255,138,61,.25);
}
@media (max-width:599px){
  .bl-type{padding:12px 12px;min-height:80px}
  .bl-type__name{font-size:1rem}
  .bl-type[aria-checked="true"]::after{display:none}
}
@media (min-width:600px){ .bl-type__name{font-size:1.1875rem} }

/* ---------- описание выбранного ---------- */
.bl-opts{display:grid;gap:24px;padding:clamp(24px, 3vw, 36px)}
.bl-opt{display:grid;gap:14px}
.bl-opt.is-in{animation:bl-in var(--dur-3) var(--ease-out) both}
@keyframes bl-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bl-opt__title{font-size:var(--fs-h3)}
.bl-opt__text{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
.bl-facts{display:grid;gap:10px;margin-top:4px}
.bl-facts li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);line-height:1.45}
.bl-facts .icon{flex:none;width:22px;height:22px;margin-top:2px;color:var(--home-press)}
.bl-opts__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;
  padding-top:22px;border-top:1px solid var(--line);
}
.bl-sum{display:grid;gap:4px}
.bl-sum__val{font-size:clamp(2rem, 1.6rem + 1.4vw, 2.625rem);color:var(--ink)}
.bl-sum__val--sm{font-size:clamp(1.75rem, 1.5rem + 1vw, 2.25rem)}
.bl-sum__unit{font-size:var(--fs-small);color:var(--muted)}
.bl-opts__foot .btn{min-width:200px}
@media (max-width:599px){ .bl-opts__foot .btn{width:100%} }

/* ---------- отделка ---------- */
.bl-fin{display:grid;gap:14px;padding:clamp(24px, 3vw, 36px);border-radius:var(--r-3);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9)}
.bl-fin__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.012em;color:var(--ink);float:left;width:100%}
.bl-fin__title + *{clear:both}
.bl-fin__hint{font-size:var(--fs-small);color:var(--muted);margin-top:-4px}
.bl-fin__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;margin-top:4px}
@media (min-width:600px) and (max-width:1199px){ .bl-fin__grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }

.bl-tile{
  position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;
  min-height:76px;padding:12px 40px 12px 14px;border-radius:var(--r-2);
  background:var(--white);border:1.5px solid var(--line);color:var(--ink);text-align:left;
  transition:background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
.bl-tile:hover{border-color:var(--line-strong)}
.bl-tile:active{transform:scale(.98)}
.bl-tile:focus-visible{outline:3px solid var(--home);outline-offset:3px;border-radius:var(--r-2)}
.bl-tile__sw{grid-row:1 / 3;width:30px;height:30px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(26,30,34,.14)}
.bl-tile__name{font-weight:600;font-size:1.0625rem;line-height:1.2}
.bl-tile__rate{font-size:var(--fs-label);color:var(--muted);line-height:1.3}
.bl-tile__ok{position:absolute;right:12px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--home);opacity:0;transform:scale(.6);transition:opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-spring)}
.bl-tile[aria-pressed="true"]{background:var(--frame);border-color:var(--frame);color:var(--white)}
.bl-tile[aria-pressed="true"] .bl-tile__rate{color:var(--on-dark-muted)}
.bl-tile[aria-pressed="true"] .bl-tile__ok{opacity:1;transform:none}
.bl-tile[aria-pressed="true"] .bl-tile__sw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
@media (max-width:599px){
  .bl-tile{grid-template-columns:1fr;padding:12px 34px 12px 12px;row-gap:4px}
  .bl-tile__sw{grid-row:auto;width:26px;height:26px;margin-bottom:4px}
  .bl-tile__ok{top:14px;margin-top:0;right:10px}
}
.bl-tile__sw--foam{background:linear-gradient(90deg, rgba(150,120,40,.3) 1px, transparent 1px) 0 0 / 10px 100%, var(--bl-foam)}
.bl-tile__sw--panel{background:linear-gradient(90deg, rgba(120,100,70,.28) 1px, transparent 1px) 0 0 / 7px 100%, var(--bl-panel)}
.bl-tile__sw--wood{background:linear-gradient(90deg, transparent 0 13px, rgba(80,50,25,.45) 13px 14px, transparent 14px), linear-gradient(180deg, var(--bl-wood), var(--bl-wood-2))}
.bl-tile__sw--heat{background:repeating-linear-gradient(90deg, var(--bl-mat) 0 5px, var(--home) 5px 7px)}
.bl-tile__sw--light{background:radial-gradient(circle at 50% 45%, #FFF3E6 0 4px, #FFB070 7px, var(--home) 13px, var(--home-press))}

.bl-fin__total{display:grid;gap:8px;padding-top:18px;margin-top:6px;border-top:1px solid var(--line)}
.bl-fin__total.is-empty .bl-sum{display:none}
.bl-fin__note{font-size:var(--fs-small);line-height:1.5;color:var(--muted);max-width:52ch}
.bl-fin__cta{justify-self:start;margin-top:4px}
@media (max-width:599px){ .bl-fin__cta{justify-self:stretch;white-space:normal} }

/* ---------- без движения ---------- */
@media (prefers-reduced-motion: reduce){
  .bl-stage *,.bl-stage *::before,.bl-stage *::after{transition-duration:1ms !important;transition-delay:0ms !important;animation:none !important}
  .bl-opt.is-in{animation:none}
}

/* пятая плитка в сетке из двух колонок — на всю ширину */
@media (max-width:599px), (min-width:1200px){
  .bl-fin__grid .bl-tile:last-child{grid-column:1 / -1}
}

/* ==== houses.css ==== */
/* ==========================================================================
   Окна для частного дома (#houses, .hs-*)
   3D-дом: W 320 · D 380 · стены H 200 · конёк R 120 (скат 200, угол 36.87°)
   ========================================================================== */
#houses { overflow-x: clip; --warm: .55; }

/* ---------- материалы стен (используются и домом, и чипами) ---------- */
#houses [data-wall="brus"] {
  --wall:
    repeating-linear-gradient(90deg, rgba(120,70,30,.06) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(180deg, #E2B983 0, #D4A56B 3px, #C8975C 18px, #A9763F 20px, #7D5227 21px, #7D5227 22px);
  --case: #F0DDB8; --case-edge: #B88B55;
}
#houses [data-wall="brevno"] {
  --wall:
    repeating-linear-gradient(180deg, #5C3818 0, #8B5A2B 3px, #B98049 9px, #CE985E 13px, #B27A43 18px, #8B5A2B 23px, #5C3818 26px);
  --case: #E9CB98; --case-edge: #9C6A35;
}
#houses [data-wall="karkas"] {
  --wall: repeating-linear-gradient(180deg, #C4CCC5 0 14px, #A5AFA8 14px 16px, #D6DDD7 16px 17px);
  --case: #F4F6F3; --case-edge: #9AA49E;
}
#houses [data-wall="gazobeton"] {
  --wall: #E6E3DC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='44'%3E%3Crect width='124' height='44' fill='%23CFCBC2'/%3E%3Cg fill='%23ECE9E3'%3E%3Crect x='1' y='1' width='60' height='20'/%3E%3Crect x='63' y='1' width='60' height='20' fill='%23E7E4DD'/%3E%3Crect x='-30' y='23' width='60' height='20' fill='%23E7E4DD'/%3E%3Crect x='32' y='23' width='60' height='20'/%3E%3Crect x='94' y='23' width='60' height='20' fill='%23E7E4DD'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 124px 44px repeat;
  --case: #F6F5F2; --case-edge: #B9B4AA;
}
#houses [data-wall="kirpich"] {
  --wall: #C9B8A6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='24'%3E%3Crect width='56' height='24' fill='%23CDBBA8'/%3E%3Crect x='1' y='1' width='26' height='10' fill='%23A65238'/%3E%3Crect x='29' y='1' width='26' height='10' fill='%23B5603F'/%3E%3Crect x='-13' y='13' width='26' height='10' fill='%239C4A31'/%3E%3Crect x='15' y='13' width='26' height='10' fill='%23AE5A3C'/%3E%3Crect x='43' y='13' width='26' height='10' fill='%239C4A31'/%3E%3C/svg%3E") 0 0 / 56px 24px repeat;
  --case: #EDE7DF; --case-edge: #9C8A78;
}

/* ---------- цвета ламинации (дом, образцы, подпись) ---------- */
#houses [data-lam="white"] {
  --lam-bg: linear-gradient(135deg, #FFFFFF 0%, #F1F3F2 60%, #E3E7E7 100%);
  --lam-edge: rgba(26,30,34,.30); --lam-hi: rgba(255,255,255,.9);
}
#houses [data-lam="anthracite"] {
  --lam-bg: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px), linear-gradient(135deg, #4A5156 0%, #383E42 55%, #2E3336 100%);
  --lam-edge: rgba(0,0,0,.55); --lam-hi: rgba(255,255,255,.14);
}
#houses [data-lam="graphite"] {
  --lam-bg: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px), linear-gradient(135deg, #767C80 0%, #62686C 55%, #53595D 100%);
  --lam-edge: rgba(0,0,0,.45); --lam-hi: rgba(255,255,255,.16);
}
#houses [data-lam="walnut"] {
  --lam-bg: repeating-linear-gradient(97deg, #72472A 0 2px, #5B371E 2px 3px, #7E5131 3px 6px, #633C21 6px 8px, #6E4427 8px 11px);
  --lam-edge: rgba(40,20,5,.6); --lam-hi: rgba(255,220,180,.14);
}
#houses [data-lam="oak"] {
  --lam-bg: repeating-linear-gradient(97deg, #C79253 0 2px, #AE7A3C 2px 3px, #D3A263 3px 6px, #B8844A 6px 8px, #C38D4F 8px 11px);
  --lam-edge: rgba(90,55,20,.55); --lam-hi: rgba(255,240,210,.3);
}

/* ==========================================================================
   Раскладка: сцена + панель
   ========================================================================== */
#houses .hs-studio { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) {
  #houses .hs-studio { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: clamp(40px, 4vw, 64px); }
}

/* ---------- сцена ---------- */
#houses .hs-stage {
  --k: .56;
  position: relative; margin: 0; height: 380px;
  border-radius: var(--r-4); overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #C9D8E1 0%, #DCE6EC 34%, #E9EFF1 60%, #E4E8E1 60.2%, #DADFD5 100%);
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 899px) and (min-height: 700px) {
  /* на телефоне дом «едет» вместе с настройками: видно, как меняется рама и стена */
  #houses .hs-stage { position: sticky; top: calc(var(--header-h) + 8px); z-index: 2; height: 340px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }
}
@media (min-width: 600px) { #houses .hs-stage { --k: .78; height: 520px; } }
@media (min-width: 900px) { #houses .hs-stage { --k: .84; height: 580px; position: sticky; top: calc(var(--header-h) + 24px); } }
@media (min-width: 1200px) { #houses .hs-stage { --k: 1.06; height: 660px; } }

/* небо и дальний план (холодные «уличные» тона) */
#houses .hs-sky { position: absolute; inset: 0; pointer-events: none; }
#houses .hs-sky::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(93,115,133,.30) 0%, rgba(93,115,133,.08) 45%, transparent 62%);
  opacity: calc(var(--warm) * .9);
}
#houses .hs-far {
  position: absolute; left: -15%; width: 130%; bottom: 40%; height: 90px; overflow: visible;
  will-change: transform;
}
#houses .hs-far__a { fill: #C3D1D9; }
#houses .hs-far__b { fill: #B3C3CD; }
#houses .hs-trees { position: absolute; left: -20%; width: 140%; bottom: 39.6%; height: 140px; will-change: transform; }
#houses .hs-tree { position: absolute; bottom: 0; width: var(--w, 40px); height: calc(var(--w, 40px) * 2); }
#houses .hs-tree::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 14%;
  background: var(--c, #9DB0BB); border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
}
#houses .hs-tree::after { content: ""; position: absolute; left: calc(50% - 1.5px); bottom: 0; width: 3px; height: 22%; background: #7E919C; border-radius: 2px; }
#houses .hs-tree--1 { left: 14%; --w: 46px; --c: #A6B8C2; }
#houses .hs-tree--2 { left: 19%; --w: 30px; --c: #93A7B3; }
#houses .hs-tree--3 { left: 71%; --w: 54px; --c: #9CB0BB; }
#houses .hs-tree--4 { left: 77%; --w: 34px; --c: #8CA1AE; }
#houses .hs-tree--5 { left: 84%; --w: 26px; --c: #A9BBC4; }
#houses .hs-tree--2::before, #houses .hs-tree--4::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ---------- 3D ---------- */
#houses .hs-view {
  position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 36%;
  touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
}
#houses .hs-view.is-drag { cursor: grabbing; }
#houses .hs-scale {
  position: absolute; left: 50%; top: calc(47% + 64px * var(--k)); width: 0; height: 0;
  transform: scale(var(--k)); transform-style: preserve-3d;
}
#houses .hs-rig {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-35deg);
  --sh-f: 0; --sh-r: .22; --sh-b: .3; --sh-l: .3;
}
#houses .hs-rig > * { position: absolute; left: 0; top: 0; }

/* земля, тень, тёплое пятно света из окна */
#houses .hs-ground {
  width: 860px; height: 860px; margin: -430px 0 0 -430px;
  transform: translate3d(0, 101px, 0) rotateX(90deg);
  background: radial-gradient(closest-side, #D3DACD 0%, #D8DED2 55%, rgba(218,223,213,0) 100%);
}
#houses .hs-shadow {
  width: 420px; height: 480px; margin: -240px 0 0 -210px;
  transform: translate3d(34px, 100.5px, -24px) rotateX(90deg);
  background: radial-gradient(closest-side, rgba(30,42,52,.34), rgba(30,42,52,.14) 60%, rgba(30,42,52,0));
}
#houses .hs-spill {
  width: 240px; height: 150px; margin: -75px 0 0 -120px;
  transform: translate3d(0, 100px, 262px) rotateX(90deg);
  background: radial-gradient(closest-side, rgba(255,160,90,calc(var(--warm) * .5)), rgba(255,160,90,0));
}

/* стены */
#houses .hs-f, #houses .hs-g { background: var(--wall); overflow: hidden; }
#houses .hs-f { height: 200px; margin-top: -100px; }
#houses .hs-f--front, #houses .hs-f--back { width: 320px; margin-left: -160px; }
#houses .hs-f--right, #houses .hs-f--left { width: 380px; margin-left: -190px; }
#houses .hs-f--front { transform: translateZ(190px); --sh: var(--sh-f); }
#houses .hs-f--back  { transform: rotateY(180deg) translateZ(190px); --sh: var(--sh-b); }
#houses .hs-f--right { transform: rotateY(90deg) translateZ(160px); --sh: var(--sh-r); }
#houses .hs-f--left  { transform: rotateY(-90deg) translateZ(160px); --sh: var(--sh-l); }
#houses .hs-g { width: 320px; height: 120px; margin: -60px 0 0 -160px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#houses .hs-g--front { transform: translate3d(0, -160px, 190px); --sh: var(--sh-f); }
#houses .hs-g--back  { transform: translate3d(0, -160px, -190px) rotateY(180deg); --sh: var(--sh-b); }
/* цоколь */
#houses .hs-f::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 1;
  background: linear-gradient(180deg, #8C949A 0 2px, #6D757B 2px);
}
/* свет: затемнение грани по углу к «солнцу» (JS пишет --sh-*) */
#houses .hs-f::after, #houses .hs-g::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #0E1A24; opacity: var(--sh, 0);
}
/* угловые доски у каркасного дома */
#houses .hs-house[data-wall="karkas"] .hs-f { box-shadow: inset 8px 0 0 #EEF1ED, inset -8px 0 0 #EEF1ED; }

/* крыша: фальц, свет у конька */
#houses .hs-roof {
  width: 224px; height: 420px; margin: -210px 0 0 -112px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 1.5px, rgba(0,0,0,.18) 1.5px 3px, transparent 3px 26px),
    linear-gradient(90deg, #414950, #2B3136);
}
#houses .hs-roof--r { transform: translate3d(91.4px, -155.2px, 0) rotateZ(36.87deg) rotateX(90deg); }
#houses .hs-roof--l {
  transform: translate3d(-91.4px, -155.2px, 0) rotateZ(-36.87deg) rotateX(90deg);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 1.5px, rgba(0,0,0,.18) 1.5px 3px, transparent 3px 26px),
    linear-gradient(270deg, #4B545B, #353C42);
}
#houses .hs-fascia { width: 224px; height: 12px; margin: -6px 0 0 -112px; background: #262B30; box-shadow: inset 0 2px 0 rgba(255,255,255,.12); }
#houses .hs-fascia--fr { transform: translate3d(87.8px, -150.4px, 210.5px) rotateZ(36.87deg); }
#houses .hs-fascia--fl { transform: translate3d(-87.8px, -150.4px, 210.5px) rotateZ(-36.87deg); }
#houses .hs-fascia--br { transform: translate3d(87.8px, -150.4px, -210.5px) rotateZ(36.87deg); }
#houses .hs-fascia--bl { transform: translate3d(-87.8px, -150.4px, -210.5px) rotateZ(-36.87deg); }

/* труба */
#houses .hs-chim { width: 34px; height: 86px; margin: -43px 0 0 -17px; background: linear-gradient(180deg, #5A6268 0 8px, #7B838A 8px); }
#houses .hs-chim--f { transform: translate3d(70px, -193px, -80px) translateZ(17px); }
#houses .hs-chim--b { transform: translate3d(70px, -193px, -80px) rotateY(180deg) translateZ(17px); filter: brightness(.7); }
#houses .hs-chim--r { transform: translate3d(70px, -193px, -80px) rotateY(90deg) translateZ(17px); filter: brightness(.82); }
#houses .hs-chim--l { transform: translate3d(70px, -193px, -80px) rotateY(-90deg) translateZ(17px); filter: brightness(.9); }
#houses .hs-chim--t { width: 34px; height: 34px; margin: -17px 0 0 -17px; background: #30363B; transform: translate3d(70px, -236px, -80px) rotateX(90deg); }

/* ---------- окна на фасадах ---------- */
#houses .hs-win { position: absolute; z-index: 2; }
#houses .hs-win--pano  { left: 85px;  top: 62px; width: 150px; height: 138px; }
#houses .hs-win--attic { left: 128px; top: 50px; width: 64px;  height: 52px; }
#houses .hs-win--r1    { left: 62px;  top: 44px; width: 88px;  height: 106px; }
#houses .hs-win--r2    { left: 230px; top: 44px; width: 88px;  height: 106px; }
#houses .hs-win--b     { left: 110px; top: 48px; width: 100px; height: 92px; }
#houses .hs-win--l     { left: 160px; top: 44px; width: 60px;  height: 106px; }

#houses .hs-frame {
  position: absolute; inset: 0; z-index: 1;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; padding: 6px;
  background: var(--lam-bg); border-radius: 2px;
  box-shadow: 0 0 0 1px var(--lam-edge), inset 0 1px 0 var(--lam-hi), 0 4px 8px -3px rgba(10,20,30,.45);
}
#houses .hs-win--pano .hs-frame { padding: 7px 7px 5px; }
#houses .hs-p {
  display: block; position: relative; border-radius: 1px;
  background:
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.55) 44%, rgba(255,255,255,0) 52%),
    linear-gradient(to top, rgba(255,146,72,calc(var(--warm) * .78)) 0%, rgba(255,176,112,calc(var(--warm) * .32)) 42%, rgba(255,176,112,0) 72%),
    linear-gradient(160deg, #F4FAFC 0%, #CFE2EC 30%, #9FBBCB 60%, #7F9CAE 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), inset 0 2px 3px rgba(0,0,0,.18);
}
#houses .hs-p--open::after { /* ручка */
  content: ""; position: absolute; left: 3px; top: 44%; width: 3px; height: 12px; border-radius: 2px;
  background: #E9ECEE; box-shadow: 0 1px 1px rgba(0,0,0,.35);
}
#houses .hs-sill {
  position: absolute; left: -6px; right: -6px; bottom: -7px; height: 7px; z-index: 2; border-radius: 1px;
  background: linear-gradient(180deg, #F3F5F6, #B8C1C7); box-shadow: 0 4px 5px -2px rgba(10,20,30,.4);
}
#houses .hs-win--pano .hs-sill { display: none; }
/* обсада и наличник — только у деревянных домов */
#houses .hs-case {
  display: none; position: absolute; left: -10px; right: -10px; top: -16px; bottom: -4px; z-index: 0;
  background: var(--case); border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--case-edge), 0 3px 5px -2px rgba(40,25,10,.45);
}
#houses .hs-case::before { /* верхний наличник с «козырьком» */
  content: ""; position: absolute; left: -5px; right: -5px; top: -4px; height: 9px;
  background: var(--case); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--case-edge), 0 2px 3px rgba(40,25,10,.3);
}
#houses .hs-house[data-wall="brus"] .hs-case,
#houses .hs-house[data-wall="brevno"] .hs-case { display: block; }
#houses .hs-win--pano .hs-case { bottom: 0; }

/* смена ламинации и стены: короткий «блик» по рамам */
#houses .hs-house.is-swap .hs-frame { animation: hs-swap 720ms var(--ease-out) calc(var(--i, 0) * 70ms) both; }
#houses .hs-house.is-wall .hs-f,
#houses .hs-house.is-wall .hs-g { animation: hs-wall 640ms var(--ease-out) both; }
@keyframes hs-swap {
  0% { filter: brightness(1.9) saturate(.2); transform: scale(.9); }
  55% { filter: brightness(1.15); }
  100% { filter: none; transform: none; }
}
@keyframes hs-wall {
  0% { filter: brightness(1.3) saturate(.5); }
  100% { filter: none; }
}

/* ---------- поверх сцены ---------- */
#houses .hs-ui {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; pointer-events: none;
}
#houses .hs-ui > * { pointer-events: auto; }
#houses .hs-turn { display: flex; align-items: center; gap: 8px; }
#houses .hs-turn__btn { box-shadow: var(--shadow-1); border-color: transparent; }
#houses .hs-turn__btn .icon { width: 22px; height: 22px; }
#houses .hs-turn__hint { display: none; margin-left: 6px; font-size: var(--fs-label); font-weight: 600; color: var(--frame-3); }
#houses .hs-cap {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 10px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.8); color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1), inset 0 0 0 1px rgba(255,255,255,.6);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.25; max-width: 62%;
}
#houses .hs-cap__sw { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--lam-bg); box-shadow: inset 0 0 0 1px var(--lam-edge); }
@media (max-width: 599px) {
  #houses .hs-stage { --k: .52; }
  #houses .hs-scale { top: calc(50% + 64px * var(--k)); }
  /* на телефоне подпись наверху, в небе: не закрывает дом */
  #houses .hs-ui { inset: 12px; flex-direction: column-reverse; align-items: flex-start; justify-content: space-between; }
  #houses .hs-cap { max-width: 100%; min-height: 44px; font-size: .9375rem; padding: 6px 14px 6px 6px; }
  #houses .hs-cap__sw { width: 30px; height: 30px; }
}
@media (min-width: 1200px) { #houses .hs-turn__hint { display: inline; } }

/* ==========================================================================
   Панель настроек
   ========================================================================== */
#houses .hs-panel { position: relative; z-index: 1; }
#houses .hs-group + .hs-group { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
#houses .hs-label {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em;
  margin-bottom: var(--s-4); color: var(--ink);
}

/* образцы ламинации */
#houses .hs-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
#houses .hs-sw {
  position: relative; width: 60px; height: 60px; padding: 5px; border-radius: 50%;
  border: 2px solid transparent; background: transparent; cursor: pointer;
  transition: border-color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
#houses .hs-sw:hover { transform: translateY(-2px); border-color: var(--line-strong); }
#houses .hs-sw:active { transform: scale(.95); }
#houses .hs-sw[aria-checked="true"] { border-color: var(--frame); }
#houses .hs-sw:focus-visible { outline: 3px solid var(--home); outline-offset: 2px; border-radius: 50%; }
#houses .hs-sw__dot {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--lam-bg);
  box-shadow: inset 0 0 0 1px var(--lam-edge), inset 0 3px 6px -2px var(--lam-hi), 0 2px 6px -2px rgba(26,30,34,.3);
  position: relative;
}
#houses .hs-sw[aria-checked="true"] .hs-sw__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 8px; margin: -6px 0 0 -7px;
  border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
#houses .hs-sw[data-value="white"][aria-checked="true"] .hs-sw__dot::after { border-color: var(--ink); filter: none; }
#houses .hs-lam { margin-top: var(--s-4); }
#houses .hs-lam__name { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
#houses .hs-lam__text { margin-top: 6px; font-size: var(--fs-body); line-height: 1.55; color: var(--muted); max-width: 42ch; }

/* материал стен */
#houses .hs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#houses .hs-chip { padding-left: 10px; gap: 10px; }
#houses .hs-chip__tx {
  flex: none; width: 56px; height: 56px; zoom: .5; border-radius: 50%; background: var(--wall);
  box-shadow: inset 0 0 0 2px rgba(26,30,34,.12);
}
#houses .hs-chip[aria-checked="true"] .hs-chip__tx { box-shadow: 0 0 0 3px rgba(255,255,255,.7); }

/* совет по монтажу — тёплый: это решение */
#houses .hs-tip {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
  margin-top: var(--s-5); padding: 20px 22px 22px 18px; border-radius: var(--r-3);
  background: var(--home-soft); color: var(--ink);
}
#houses .hs-tip__ic {
  width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--home);
  fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
#houses .hs-tip__t { font-weight: 700; font-size: var(--fs-body); line-height: 1.35; }
#houses .hs-tip__x { margin-top: 6px; font-size: var(--fs-body); line-height: 1.55; }
#houses .hs-tip__more { margin-top: 12px; min-height: 44px; }
#houses .hs-tip.is-swap .hs-tip__body { animation: hs-rise var(--dur-3) var(--ease-out) both; }
@keyframes hs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

#houses .hs-cta { margin-top: var(--s-6); }
#houses .hs-cta__note { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); text-align: center; }

/* ==========================================================================
   Большие проёмы: аккордеон со схемами
   ========================================================================== */
#houses .hs-more { margin-top: clamp(72px, 8vw, 128px); display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  #houses .hs-more { grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  #houses .hs-more__head { position: sticky; top: calc(var(--header-h) + 32px); }
}
#houses .hs-more__title { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
#houses .hs-more__lead { margin-top: var(--s-4); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); max-width: 40ch; }

#houses .hs-acc { border-top: 1px solid var(--line-strong); }
#houses .hs-acc__item { border-bottom: 1px solid var(--line-strong); }
#houses .hs-acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 88px; padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);
  line-height: 1.25; letter-spacing: -.01em; color: var(--ink);
  transition: color var(--dur-1) ease;
}
#houses .hs-acc__q::-webkit-details-marker { display: none; }
#houses .hs-acc__q:focus-visible { outline-offset: 4px; border-radius: 8px; }
#houses .hs-acc__pm {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--white);
  transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
#houses .hs-acc__pm::before, #houses .hs-acc__pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px;
  border-radius: 2px; background: var(--ink); transition: transform var(--dur-3) var(--ease-out);
}
#houses .hs-acc__pm::after { transform: rotate(90deg); }
#houses .hs-acc__q:hover .hs-acc__pm { border-color: var(--ink); }
#houses .hs-acc__item.is-open .hs-acc__pm { background: var(--home); border-color: var(--home); transform: rotate(180deg); }
#houses .hs-acc__item.is-open .hs-acc__pm::after { transform: rotate(0deg); }

#houses .hs-acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
#houses .hs-acc__item.is-open .hs-acc__a { grid-template-rows: 1fr; }
#houses .hs-acc__inner { overflow: hidden; min-height: 0; }
#houses .hs-acc__body { display: grid; gap: var(--s-5); padding: 4px 0 var(--s-6); }
@media (min-width: 1200px) { #houses .hs-acc__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-6); align-items: start; } }
#houses .hs-acc__copy, #houses .hs-dg { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
#houses .hs-acc__item.is-open .hs-acc__copy, #houses .hs-acc__item.is-open .hs-dg { opacity: 1; transform: none; transition-delay: 80ms; }
#houses .hs-acc__item.is-open .hs-dg { transition-delay: 160ms; }
#houses .hs-acc__copy p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 60ch; }
#houses .hs-acc__copy p + p { margin-top: 12px; }

/* схемы: холодное = улица, тёплое = комната и то, что делаем мы */
#houses .hs-dg { margin: 0; padding: 20px; border-radius: var(--r-3); background: var(--paper); }
#houses .hs-dg__svg { display: block; width: 100%; height: auto; max-width: 440px; margin-inline: auto; overflow: visible; }
#houses .hs-dg__legend { display: grid; gap: 8px; margin-top: 16px; font-size: var(--fs-small); line-height: 1.4; color: var(--ink); }
#houses .hs-dg__legend span { display: flex; align-items: center; gap: 10px; }
#houses .hs-n {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--home); color: var(--ink); font-size: .875rem; font-weight: 700;
}
#houses .d-wall { fill: #D5DCE0; }
#houses .d-frame { fill: var(--frame); }
#houses .d-sash { fill: var(--frame-3); }
#houses .d-glass { fill: var(--glass); }
#houses .d-glass--front { fill: #B3CFDE; }
#houses .d-handle { fill: var(--home); }
#houses .d-floor { stroke: var(--frame-3); stroke-width: 2; stroke-linecap: round; }
#houses .d-num { fill: var(--home); }
#houses .d-num__t { fill: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 700; text-anchor: middle; }
#houses .d-street { fill: var(--fog-2); }
#houses .d-room { fill: var(--home-soft); }
#houses .d-t { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
#houses .d-t--cool { fill: var(--street-deep); }
#houses .d-t--warm { fill: #9A4513; }
#houses .d-logs rect { fill: #C9955B; stroke: #9C6C3B; stroke-width: 1.5; }
#houses .d-case { fill: #EACB98; stroke: #A87A43; stroke-width: 1.5; }
#houses .d-soft { fill: #FFD7B3; stroke: var(--home); stroke-width: 1.5; stroke-dasharray: 4 3; }
#houses .d-safe { fill: #A8C4D3; }
#houses .d-steel { stroke: var(--home); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 8 5; }
#houses .d-ghost { fill: none; stroke: var(--home); stroke-width: 2; stroke-dasharray: 6 5; opacity: .9; }
#houses .d-sun__c { fill: #FFBF85; }
#houses .d-ray { stroke: #FF9E5C; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 7; fill: none; }

#houses .hs-dg .d-move, #houses .hs-dg .d-settle, #houses .hs-dg .d-gap { transform-box: view-box; }
#houses .hs-acc__item.is-open .hs-dg--hs .d-move { animation: hs-dg-hs 6s var(--ease-inout) 400ms infinite; }
#houses .hs-acc__item.is-open .hs-dg--psk .d-move { animation: hs-dg-psk 6s var(--ease-inout) 400ms infinite; }
#houses .hs-acc__item.is-open .hs-dg--obs .d-settle { animation: hs-dg-settle 4.5s var(--ease-inout) 300ms infinite alternate; }
#houses .hs-acc__item.is-open .hs-dg--obs .d-gap { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-dg-gap 4.5s var(--ease-inout) 300ms infinite alternate; }
#houses .hs-acc__item.is-open .hs-dg--pano .d-ray { animation: hs-dg-ray 1.6s linear infinite; }
@keyframes hs-dg-hs {
  0%, 10% { transform: translate(0, 0); }
  20% { transform: translate(0, -7px); }
  48%, 70% { transform: translate(124px, -7px); }
  86% { transform: translate(0, -7px); }
  96%, 100% { transform: translate(0, 0); }
}
@keyframes hs-dg-psk {
  0%, 10% { transform: translate(0, 0); }
  22% { transform: translate(0, 16px); }
  50%, 70% { transform: translate(118px, 16px); }
  86% { transform: translate(0, 16px); }
  96%, 100% { transform: translate(0, 0); }
}
@keyframes hs-dg-settle { 0%, 15% { transform: translateY(0); } 85%, 100% { transform: translateY(10px); } }
@keyframes hs-dg-gap { 0%, 15% { transform: scaleY(1); } 85%, 100% { transform: scaleY(.44); } }
@keyframes hs-dg-ray { to { stroke-dashoffset: -24; } }

/* ---------- reduced motion: схемы показываем в «рабочем» положении ---------- */
@media (prefers-reduced-motion: reduce) {
  #houses .hs-acc__item .hs-dg .d-move, #houses .hs-acc__item .hs-dg .d-settle,
  #houses .hs-acc__item .hs-dg .d-gap, #houses .hs-acc__item .hs-dg .d-ray,
  #houses .hs-house .hs-frame, #houses .hs-house .hs-f, #houses .hs-house .hs-g { animation: none !important; }
  #houses .hs-dg--hs .d-move { transform: translate(62px, -7px); }
  #houses .hs-dg--psk .d-move { transform: translate(60px, 16px); }
  #houses .hs-view { cursor: default; }
}

/* ==== week.css ==== */
/* «Неделя до тёплого окна» — календарная лента, которая теплеет при прокрутке.
   Холод (улица) слева/сверху → тепло (дом) к дню монтажа. Плитки дат — перекидной календарь (3D flip). */
#week .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#week .wk-head{max-width:760px}

#week .wk{
  --p:1;
  --pad:clamp(20px, 3vw, 40px);
  --tw:68px;            /* ширина плитки (мобильная, вертикальная лента) */
  --th:80px;            /* высота плитки */
  --g:12px;
  position:relative;isolation:isolate;overflow:hidden;
  padding:var(--pad);
  background:var(--white);
  border-radius:var(--r-4);
  box-shadow:var(--shadow-1);
}
/* улица: холодная дымка в начале недели */
#week .wk::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(143,164,178,.20), transparent 70%),
    linear-gradient(180deg, rgba(228,235,239,.55), rgba(255,255,255,0) 40%);
}
/* дом: тёплый свет разгорается к концу недели */
#week .wk::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 70% at 100% 100%, var(--home-glow), transparent 72%);
  opacity:calc(var(--p) * var(--p));
}

/* ---------- ось прогресса ---------- */
#week .wk-rail{display:none;position:absolute;z-index:0;border-radius:var(--r-pill);background:var(--fog-2)}
#week .wk.is-live .wk-rail{display:block}
#week .wk-rail__fill{position:absolute;inset:0;border-radius:inherit;transform-origin:0 0}
#week .wk-rail__spark{
  position:absolute;width:18px;height:18px;border-radius:50%;
  background:var(--home);
  box-shadow:0 0 0 6px var(--home-glow), 0 0 28px 8px var(--home-glow);
  transform:translate(-50%,-50%);
  opacity:clamp(0, calc(var(--p) * 20), 1);
}
/* вертикальная (мобильная) ось */
#week .wk-rail{left:calc(var(--pad) + var(--tw) / 2 - 2px);width:4px;top:var(--rail-a, 0px);height:var(--rail-len, 0px)}
#week .wk-rail__fill{background:linear-gradient(180deg, var(--street), var(--home));transform:scaleY(var(--p))}
#week .wk-rail__spark{left:50%;top:calc(var(--p) * 100%)}

/* ---------- дни ---------- */
#week .wk-days{list-style:none;margin:0;padding:0;display:grid;position:relative;z-index:1}
#week .wk-day{display:grid;grid-template-columns:var(--tw) minmax(0,1fr);column-gap:20px;padding-bottom:28px}
#week .wk-day:last-child{padding-bottom:0}
#week .wk-tiles{display:flex;flex-direction:column;gap:8px}

/* плитка-дата: две грани, переворот по оси X */
#week .wk-tile{height:var(--th);perspective:640px}
#week .wk-tile__in{
  position:relative;height:100%;transform-style:preserve-3d;
  transform:rotateX(-180deg);
  transition:transform 900ms var(--ease-spring);
}
#week .wk.is-live .wk-tile:not(.is-on) .wk-tile__in{transform:rotateX(0deg)}
#week .wk-tile__face{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:var(--r-2);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  font-family:var(--font-display);line-height:1;text-align:center;
}
#week .wk-tile__face--cool{background:var(--fog);color:var(--street-deep);box-shadow:inset 0 0 0 1px var(--fog-2)}
/* шов перекидного календаря */
#week .wk-tile__face::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg, rgba(93,115,133,.28) 0 7px, transparent 7px calc(100% - 7px), rgba(93,115,133,.28) calc(100% - 7px))}
#week .wk-tile__face--warm{
  transform:rotateX(180deg);
  background:var(--home-soft);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,138,61,.38);
}
#week .wk-tile__face--warm::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--home)}
#week .wk-tile__face--warm::after{background:linear-gradient(90deg, rgba(232,116,42,.45) 0 7px, transparent 7px calc(100% - 7px), rgba(232,116,42,.45) calc(100% - 7px))}
#week .wk-day--final .wk-tile__face--warm{background:var(--home);box-shadow:var(--shadow-warm)}
#week .wk-day--final .wk-tile__face--warm::before{background:var(--white);opacity:.55}

#week .wk-tile__wd{font-family:var(--font-body);font-size:.875rem;font-weight:600;letter-spacing:.02em}
#week .wk-tile__num{font-size:1.75rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#week .wk-tile__mon{font-family:var(--font-body);font-size:.875rem;font-weight:500}
#week .wk-tile__mon:empty{display:none}

/* текст дня */
#week .wk-body{padding-top:4px;min-width:0}
#week .wk-body__n{margin:0 0 10px;font-size:var(--fs-label);font-weight:600;color:var(--muted);letter-spacing:.01em}
#week .wk-body__ic{
  display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--fog);color:var(--street-deep);font-size:1.125rem;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
#week .wk-body__title{margin:14px 0 6px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--ink);letter-spacing:-.01em}
#week .wk-body__text{margin:0;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}

#week .wk-day.is-on .wk-body__n{color:var(--ink)}
#week .wk-day.is-on .wk-body__ic,
#week .wk:not(.is-live) .wk-body__ic{background:var(--home);color:var(--ink)}
#week .wk-day--final.is-on .wk-body__ic{box-shadow:0 0 0 6px var(--home-glow)}

/* после недели — гарантия */
#week .wk-after{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:16px;
  margin-top:var(--s-6);padding:18px 22px;
  border-radius:var(--r-3);background:var(--home-soft);color:var(--muted);
}
#week .wk-after__ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--home);color:var(--ink);font-size:1.25rem}
#week .wk-after__t{margin:0;font-size:var(--fs-body);line-height:1.45}
#week .wk-after__t strong{color:var(--ink);font-weight:600}

/* низ секции */
#week .wk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:var(--s-6)}
#week .wk-foot__note{margin:0;max-width:52ch;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
#week .wk-foot__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
#week .wk-foot__tel{
  display:inline-flex;align-items:center;gap:10px;min-height:52px;
  font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
#week .wk-foot__tel .icon{color:var(--home-press)}
#week .wk-foot__tel:hover span{text-decoration:underline;text-decoration-color:var(--home);text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- широкий экран: горизонтальная неделя ----------
   Дни 0, 1 и 6 шире, четыре дня производства уже: неделя читается как календарь, а текст не зажат. */
@media (min-width:1200px){
  #week .wk{--th:116px;--g:12px}
  #week .wk-days{grid-template-columns:2fr 2fr 4.4fr 2.4fr}
  #week .wk-day{display:flex;flex-direction:column;padding-bottom:0}
  #week .wk-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--g);padding-inline:calc(var(--g) / 2)}
  #week .wk-tile__num{font-size:2.75rem}
  #week .wk-tile__wd,#week .wk-tile__mon{font-size:.9375rem}
  #week .wk-body{flex:1;padding:60px calc(var(--g) / 2 + 18px) 4px}
  #week .wk-day + .wk-day .wk-body{border-left:1px solid var(--line)}
  #week .wk-day--span .wk-body__text{max-width:36ch}

  #week .wk-rail{left:var(--rail-a, 0px);width:var(--rail-len, 0px);top:calc(var(--pad) + var(--th) + 27px);height:4px}
  #week .wk-rail__fill{background:linear-gradient(90deg, var(--street), var(--home));transform:scaleX(var(--p))}
  #week .wk-rail__spark{top:50%;left:calc(var(--p) * 100%)}

  #week .wk-after{margin-left:calc(100% * 4 / 10.8)}
}
/* планшет: вертикальная лента в две колонки текста не нужна — просто крупнее плитки */
@media (min-width:600px) and (max-width:1199.98px){
  #week .wk{--tw:88px;--th:92px}
  #week .wk-tile__num{font-size:2.125rem}
  #week .wk-day{column-gap:28px}
}

@media (prefers-reduced-motion:reduce){
  #week .wk-tile__in,#week .wk-body__ic{transition:none}
}

/* ==== trust.css ==== */
/* «Честно о нас»: три обещания слева, справа — стопка листов договора в 3D.
   Когда читаешь обещание, тот же пункт в «договоре» подсвечивается маркером и приподнимается над листом. */
#trust .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#trust .tr-head{max-width:760px}

/* ---------- обещания ---------- */
#trust .tr-deal{display:grid;gap:var(--s-7);align-items:start}
#trust .tr-sts{list-style:none;margin:0;padding:0}
#trust .tr-st{
  display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;
  padding:clamp(28px, 3vw, 44px) 0;border-top:1px solid var(--line);
}
#trust .tr-st:last-child{border-bottom:1px solid var(--line)}
#trust .tr-st__ic{
  grid-row:span 2;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--fog);color:var(--street-deep);font-size:1.375rem;
  transition:background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
#trust .tr-st__title{
  margin:4px 0 0;font-family:var(--font-display);font-weight:700;color:var(--ink);
  font-size:clamp(1.875rem, 1.3rem + 2.1vw, 3.25rem);line-height:1.06;letter-spacing:-.025em;
}
#trust .tr-st__text{margin:14px 0 0;max-width:46ch;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}

/* маркер: тот же жест, что и в «договоре» */
#trust .tr-mark,
#trust .tr-clause span{
  color:inherit;background-color:transparent;
  background-image:linear-gradient(var(--home), var(--home));
  background-repeat:no-repeat;background-position:0 96%;background-size:100% 30%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 820ms var(--ease-out);
}
#trust .tr-mark{padding:0 .06em}
#trust .tr-deal.is-live .tr-st:not(.is-lit) .tr-mark{background-size:0% 30%}
#trust .tr-st.is-lit .tr-st__ic,
#trust .tr-deal:not(.is-live) .tr-st__ic{background:var(--home);color:var(--ink)}
#trust .tr-st.is-active .tr-st__ic{box-shadow:0 0 0 8px var(--home-soft)}

/* ---------- 3D-договор ---------- */
#trust .tr-doc{margin:0;max-width:440px;justify-self:center;width:100%}
#trust .tr-doc__scene{position:relative;perspective:1600px;padding:18px 18px 54px}
#trust .tr-doc__stack{
  position:relative;transform-style:preserve-3d;
  transform:rotateX(calc(16deg + var(--rx, 0deg))) rotateY(calc(-20deg + var(--ry, 0deg))) rotateZ(3deg);
}
#trust .tr-sheet{border-radius:var(--r-2);background:var(--white)}
#trust .tr-sheet--b1,
#trust .tr-sheet--b2{position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--line)}
#trust .tr-sheet--b1{background:#FAFBFA;transform:translate3d(12px, 12px, -22px) rotateZ(2.5deg)}
#trust .tr-sheet--b2{background:var(--fog);transform:translate3d(24px, 22px, -44px) rotateZ(5deg)}
#trust .tr-sheet--front{
  position:relative;transform-style:preserve-3d;
  padding:28px 26px 26px;
  box-shadow:inset 0 0 0 1px var(--line), 0 40px 60px -34px rgba(26,30,34,.45);
}
#trust .tr-sheet__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
#trust .tr-sheet__h{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--ink)}
#trust .tr-sheet__no{display:flex;gap:6px}
#trust .tr-sheet__no i{display:block;width:34px;height:8px;border-radius:var(--r-pill);background:var(--fog-2)}
#trust .tr-sheet__no i + i{width:54px}
#trust .tr-bar{display:block;width:var(--w, 80%);height:8px;margin:11px 0;border-radius:var(--r-pill);background:var(--fog)}

#trust .tr-clause{
  position:relative;margin:14px -12px;padding:10px 12px;border-radius:var(--r-1);
  font-weight:600;font-size:1rem;line-height:1.35;color:var(--ink);
  transform:translateZ(0);
  transition:transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
#trust .tr-clause span{padding:0 .1em}
#trust .tr-doc.is-live .tr-clause:not(.is-lit) span{background-size:0% 30%}
#trust .tr-doc.is-live .tr-clause:not(.is-lit){color:var(--muted)}
#trust .tr-clause.is-active{
  background-color:var(--white);
  transform:translateZ(34px);
  box-shadow:0 1px 0 var(--line), 0 22px 36px -18px rgba(26,30,34,.45);
}

#trust .tr-sign{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
#trust .tr-sign__col{position:relative;padding-top:30px}
#trust .tr-sign__line{display:block;height:1.5px;background:var(--line-strong)}
#trust .tr-sign__cap{display:block;margin-top:6px;font-size:.875rem;color:var(--muted)}
#trust .tr-sign__ink{position:absolute;left:4px;bottom:22px;width:92%;height:auto;overflow:visible}
#trust .tr-sign__ink path{
  fill:none;stroke:var(--frame);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1400ms var(--ease-inout) 200ms;
}
#trust .tr-doc.is-live:not(.is-signed) .tr-sign__ink path{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 0s, opacity 0s}

#trust .tr-doc__shadow{
  position:absolute;left:14%;right:8%;bottom:14px;height:34px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(26,30,34,.22), transparent);
  filter:blur(4px);
}
#trust .tr-doc__cap{margin:0 auto;max-width:36ch;text-align:center;font-size:var(--fs-small);line-height:1.5;color:var(--muted)}

/* телефон: задние листы «Договора» повёрнуты и торчат за край экрана — обрезаем, чтобы страница не ходила вбок */
@media (max-width:899.98px){
  #trust{overflow-x:hidden;overflow-x:clip}
}
@media (min-width:900px){
  #trust .tr-deal{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px, 5vw, 96px)}
  #trust .tr-doc{position:sticky;top:calc(var(--header-h) + 40px)}
  #trust .tr-st{grid-template-columns:64px minmax(0,1fr);column-gap:28px}
  #trust .tr-st__ic{width:64px;height:64px;font-size:1.5rem}
}

/* ---------- отзывы (только настоящие; пока скрыты) ---------- */
#trust .tr-sub{margin:0 0 var(--s-5);font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
#trust .tr-list,#trust .tr-videos{margin-top:var(--s-8)}
#trust .tr-list__items{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr))}
#trust .tr-review{margin:0;overflow:hidden;border-radius:var(--r-3);background:var(--white);box-shadow:var(--shadow-1);border:1px solid var(--line)}
#trust .tr-review__photo{aspect-ratio:4/3;background:var(--fog)}
#trust .tr-review__photo img{display:block;width:100%;height:100%;object-fit:cover}
#trust .tr-review__body{padding:24px}
#trust .tr-review__text{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
#trust .tr-review__text p{margin:0}
#trust .tr-review__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:16px;font-size:var(--fs-small);color:var(--muted)}
#trust .tr-review__name{font-weight:600;color:var(--ink)}
#trust .tr-review__link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--home);text-underline-offset:4px}
#trust .tr-videos__strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px, 260px);gap:var(--s-5);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;overscroll-behavior-x:contain;
}
#trust .tr-video{margin:0;scroll-snap-align:start}
#trust .tr-video__frame{aspect-ratio:9/16;overflow:hidden;border-radius:var(--r-3);background:var(--frame)}
#trust .tr-video__frame video{display:block;width:100%;height:100%;object-fit:cover}
#trust .tr-video__meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:10px;font-size:var(--fs-small);color:var(--muted)}

/* ---------- карточки: отзывы на картах + шоурум ---------- */
#trust .tr-cards{display:grid;gap:var(--s-5);margin-top:var(--s-9)}
@media (min-width:900px){ #trust .tr-cards{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }

#trust .tr-rev{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(28px, 3vw, 44px);border-radius:var(--r-4);background:var(--fog);
}
#trust .tr-rev__pic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--white);color:var(--street-deep);font-size:1.375rem;box-shadow:var(--shadow-1)}
#trust .tr-rev__title{margin:6px 0 0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--ink)}
#trust .tr-rev__text{margin:0 0 10px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
#trust .tr-rev__rules{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px;font-size:var(--fs-body);color:var(--ink)}
#trust .tr-rev__rules li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
#trust .tr-rev__rules .icon{flex:none;margin-top:.15em;color:var(--street-deep)}
#trust .tr-rev .btn{margin-top:auto}

#trust .tr-shop{
  display:grid;overflow:hidden;border-radius:var(--r-4);
  background:var(--paper);color:var(--muted);
}
#trust .tr-shop__art{
  position:relative;min-height:280px;overflow:hidden;
  background:linear-gradient(180deg, #EEF0ED, #E3E7E5);
}
/* окно шоурума: тёплый свет изнутри */
#trust .tr-shop__win{
  position:absolute;left:50%;top:50%;width:min(56%, 200px);aspect-ratio:1/1.08;transform:translate(-50%,-50%);
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-radius:6px;
  background:var(--frame-3);box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 26px 40px -22px rgba(26,30,34,.55);
}
#trust .tr-shop__pane{
  display:block;border-radius:2px;
  background:linear-gradient(160deg, #FFE2C8 0%, var(--home) 70%, var(--home-press) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
#trust .tr-shop__pane:nth-child(2){background:linear-gradient(160deg, #FFEBDA 0%, #FFB47F 60%, var(--home) 100%)}
#trust .tr-shop__pane:nth-child(3){opacity:.92}
/* свет из окна на полу */
#trust .tr-shop__art::after{
  content:"";position:absolute;left:50%;bottom:-6%;width:70%;height:22%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,138,61,.16), transparent);
}

#trust .tr-shop__body{padding:clamp(28px, 3vw, 44px);display:flex;flex-direction:column;gap:14px}
#trust .tr-shop__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--ink)}
#trust .tr-shop__text{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
#trust .tr-shop__meta{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--fs-body);color:var(--ink)}
#trust .tr-shop__meta li{display:flex;align-items:center;gap:10px}
#trust .tr-shop__meta .icon{color:var(--home-text);flex:none}
#trust .tr-shop__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

@media (min-width:600px){
  #trust .tr-shop{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  #trust .tr-shop__art{min-height:100%}
}

@media (prefers-reduced-motion:reduce){
  #trust .tr-mark,#trust .tr-clause,#trust .tr-clause span,#trust .tr-sign__ink path,#trust .tr-st__ic{transition:none}
  #trust .tr-clause.is-active{transform:none}
}

/* ==== faq.css ==== */
/* «Частые вопросы»: крупные строки-карточки, плюс превращается в минус, ответ раскрывается плавно (0fr → 1fr).
   Закрытый вопрос — холодный (номер цвета улицы), открытый — тёплый. */
#faq .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

#faq .fq{display:grid;gap:var(--s-7);align-items:start}
#faq .fq-head{margin-bottom:0}
/* телефон: сначала вопросы, карточка «спросить» — после них */
#faq .fq-side{display:contents}
#faq .fq-head{order:1}
#faq .fq-list{order:2}
#faq .fq-ask{order:3}

/* ---------- карточка «спросить» ---------- */
#faq .fq-ask{
  margin-top:0;padding:clamp(24px, 3vw, 36px);
  border-radius:var(--r-4);background:var(--white);box-shadow:var(--shadow-1);
  position:relative;overflow:hidden;isolation:isolate;
}
#faq .fq-ask::after{
  content:"";position:absolute;right:-30%;bottom:-40%;width:80%;aspect-ratio:1;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, var(--home-soft), transparent);
}
#faq .fq-ask__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-heading);color:var(--ink)}
#faq .fq-ask__text{margin:10px 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)}
#faq .fq-ask__status{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:var(--fs-label);font-weight:600;color:var(--ink)}
#faq .fq-ask__status i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--street)}
#faq .fq-ask__status.is-open i{background:var(--ok);box-shadow:0 0 0 4px rgba(47,143,91,.18)}
#faq .fq-ask__actions{display:grid;gap:12px;margin-top:22px}
#faq .fq-ask__actions .btn{font-variant-numeric:tabular-nums}

/* ---------- список ---------- */
#faq .fq-list{display:grid;gap:12px;counter-reset:fq}
#faq .fq-item{
  counter-increment:fq;
  border-radius:var(--r-3);background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
#faq .fq-item:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
#faq .fq-item.is-open{box-shadow:inset 0 0 0 1px transparent, var(--shadow-2)}

#faq .fq-q{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 16px;
  min-height:84px;padding:16px 16px 16px 20px;border-radius:var(--r-3);
  font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);line-height:1.28;letter-spacing:-.005em;
  -webkit-tap-highlight-color:transparent;
}
#faq .fq-q::-webkit-details-marker{display:none}
#faq .fq-q::marker{content:""}
#faq .fq-q::before{
  content:counter(fq, decimal-leading-zero);
  font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--street-deep);
  min-width:1.6em;transition:color var(--dur-2) var(--ease-out);
}
#faq .fq-item.is-open .fq-q::before{color:var(--home-press)}
#faq .fq-q__text{transition:transform var(--dur-2) var(--ease-out)}
@media (hover:hover){ #faq .fq-q:hover .fq-q__text{transform:translateX(4px)} }

/* плюс → минус */
#faq .fq-pm{
  position:relative;flex:none;width:48px;height:48px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--line-strong);background:var(--white);
  transition:background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring);
}
#faq .fq-pm i{
  position:absolute;left:50%;top:50%;width:18px;height:2.5px;margin:-1.25px 0 0 -9px;border-radius:2px;background:var(--ink);
  transition:transform var(--dur-3) var(--ease-spring);
}
#faq .fq-pm i + i{transform:rotate(90deg)}
#faq .fq-item:hover .fq-pm{box-shadow:inset 0 0 0 1.5px var(--ink)}
#faq .fq-item.is-open .fq-pm{background:var(--home);box-shadow:var(--shadow-warm);transform:rotate(180deg)}
#faq .fq-item.is-open .fq-pm i + i{transform:rotate(0deg) scaleX(.2);opacity:0;transition:transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) linear}

/* ответ */
#faq .fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 380ms var(--ease-out)}
#faq .fq-item.is-open .fq-a,
html:not(.js) #faq .fq-item[open] .fq-a{grid-template-rows:1fr}
#faq .fq-a__in{min-height:0;overflow:hidden}
#faq .fq-a__in p{
  margin:0;padding:0 20px 24px;max-width:64ch;
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
#faq .fq-item.is-open .fq-a__in p,
html:not(.js) #faq .fq-item[open] .fq-a__in p{opacity:1;transform:none;transition-delay:90ms}
#faq .fq-short{font-weight:700;background:linear-gradient(transparent 58%, rgba(255,138,61,.34) 58%);padding:0 .08em}
#faq .fq-link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--home);text-decoration-thickness:2px;text-underline-offset:4px}
#faq .fq-link:hover{text-decoration-color:var(--ink)}

@media (min-width:600px){
  #faq .fq-q{padding:18px 20px 18px 28px;gap:14px 22px}
  #faq .fq-pm{width:52px;height:52px}
  #faq .fq-a__in p{padding:0 28px 28px calc(28px + 1.6em + 22px)}
}
@media (min-width:900px){
  #faq .fq{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px, 5vw, 96px)}
  #faq .fq-side{display:block;position:sticky;top:calc(var(--header-h) + 32px)}
  #faq .fq-ask{margin-top:var(--s-6)}
}

@media (prefers-reduced-motion:reduce){
  #faq .fq-a,#faq .fq-a__in p,#faq .fq-pm,#faq .fq-pm i,#faq .fq-q__text,#faq .fq-item{transition:none}
}

/* ==== contacts.css ==== */
/* ==========================================================================
   #contacts — запись на бесплатный замер.
   Светлая секция. Слева «улица»: офис, схема района в 3D (холодные тона), зоны выезда.
   Справа «дом»: белая карточка записи с календарём, тёплое действие.
   ========================================================================== */

#contacts{overflow:hidden}

/* ---------- раскладка ---------- */
#contacts .ct-layout{
  display:grid;gap:clamp(28px,4vw,48px);
  grid-template-areas:"info" "card" "map" "zones";
}
#contacts .ct-info{grid-area:info}
#contacts .ct-map{grid-area:map}
#contacts .ct-zones{grid-area:zones}
#contacts .ct-stage{grid-area:card;min-width:0}
@media (min-width:900px){
  #contacts .ct-layout{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    grid-template-rows:auto auto 1fr;
    grid-template-areas:"info card" "map card" "zones card";
    column-gap:clamp(40px,5vw,88px);row-gap:clamp(32px,3vw,48px);
    align-items:start;
  }
}
@media (min-width:1200px){
  #contacts .ct-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}

/* ---------- офис ---------- */
#contacts .ct-info{display:grid;gap:18px;justify-items:start}
#contacts .ct-info__h{font-size:var(--fs-label);font-family:var(--font-body);font-weight:600;letter-spacing:0;color:var(--muted)}
#contacts .ct-addr{display:grid;gap:4px;margin-top:-6px}
#contacts .ct-addr__main{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.08;
  font-size:clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);color:var(--ink);
}
#contacts .ct-addr__sub{color:var(--muted);font-size:var(--fs-small)}
#contacts .ct-status{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink)}
#contacts .ct-status__dot{
  width:10px;height:10px;border-radius:50%;flex:none;background:var(--street);
  box-shadow:0 0 0 4px rgba(143,164,178,.18);
}
#contacts .ct-status.is-open .ct-status__dot{background:var(--home);box-shadow:0 0 0 4px var(--home-glow)}
@media (prefers-reduced-motion:no-preference){
  #contacts .ct-status.is-open .ct-status__dot{animation:ct-breathe 2.8s var(--ease-inout) infinite}
}
@keyframes ct-breathe{50%{box-shadow:0 0 0 8px rgba(255,138,61,.08)}}
#contacts .ct-phone{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.625rem, 1.3rem + 1vw, 2.125rem);color:var(--ink);text-decoration:none;
  background:linear-gradient(var(--home),var(--home)) 0 100%/0 2px no-repeat;padding-bottom:4px;
  transition:background-size var(--dur-3) var(--ease-out), color var(--dur-1) ease;
}
#contacts .ct-phone:hover{background-size:100% 2px}
#contacts .ct-info__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}

/* ---------- схема: плоскость района в перспективе ---------- */
#contacts .ct-map{
  position:relative;margin:0;border-radius:var(--r-4);
  background:linear-gradient(180deg, #F7F9FA, #EEF3F5);
  border:1px solid var(--line);overflow:hidden;
}
#contacts .ct-map__stage{
  position:relative;aspect-ratio:5/4;container-type:inline-size;
  perspective:1100px;perspective-origin:50% 30%;
  touch-action:pan-y;
}
@media (min-width:900px){
  #contacts .ct-map__stage{aspect-ratio:10/9}
  #contacts .ct-map__plane{width:74%;top:52%}
}
#contacts .ct-map__plane{
  --rx:56deg;--rz:-30deg;
  position:absolute;left:50%;top:55%;width:68%;aspect-ratio:1;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(var(--rx)) rotateZ(var(--rz));
  will-change:transform;
}
#contacts .ct-map__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#contacts .ct-m-ground{fill:#E3E9EC;stroke:rgba(26,30,34,.08);stroke-width:2}
#contacts .ct-m-streets path{fill:none;stroke:#FFFFFF;stroke-width:7;stroke-linecap:round}
#contacts .ct-m-streets .ct-m-minor{stroke:rgba(255,255,255,.6);stroke-width:3}
#contacts .ct-m-avenue{fill:none;stroke:#FFFFFF;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
#contacts .ct-m-park{fill:#D3E2D5}
#contacts .ct-m-park--p{fill:url(#ct-park-p)}
#contacts .ct-m-river-bank{fill:none;stroke:#D2E0E8;stroke-width:66;stroke-linecap:round;stroke-linejoin:round}
#contacts .ct-m-river{fill:none;stroke:url(#ct-river-g);stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
#contacts .ct-m-embank{fill:none;stroke:rgba(232,116,42,.75);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 12}

/* пульс у нашего дома — лежит на земле */
#contacts .ct-map__pulse{
  position:absolute;left:47%;top:75.5%;width:18%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,138,61,.55), rgba(255,138,61,.18) 55%, transparent 72%);
}
@media (prefers-reduced-motion:no-preference){
  #contacts .ct-map__pulse::after{
    content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,138,61,.7);
    animation:ct-ripple 2.8s var(--ease-out) infinite;
  }
}
@keyframes ct-ripple{0%{transform:scale(.25);opacity:1}100%{transform:scale(1.5);opacity:0}}

/* дома: коробки CSS-3D, высота в cqw сцены */
#contacts .ct-map__blds{position:absolute;inset:0;transform-style:preserve-3d}
#contacts .ct-bld{
  --c-top:#FFFFFF;--c-n:#CBD4DA;--c-s:#E2E8EB;--c-e:#D3DBE0;--c-w:#DCE3E7;
  --win:rgba(93,115,133,.32);
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--d);
  transform-style:preserve-3d;transform-origin:50% 50% 0;
  transform:scale3d(1,1,var(--grow,1));
  transition:transform 1100ms var(--ease-spring);transition-delay:var(--bd,0ms);
}
#contacts .ct-map.is-armed .ct-bld{--grow:.01}
#contacts .ct-map.is-built .ct-bld{--grow:1}
#contacts .ct-bld i{position:absolute;display:block;backface-visibility:visible}
#contacts .ct-bld .t{inset:0;background:var(--c-top);transform:translateZ(calc(var(--h) * 1cqw));box-shadow:inset 0 0 0 1px rgba(26,30,34,.06)}
#contacts .ct-bld .n,#contacts .ct-bld .s{left:0;width:100%;height:calc(var(--h) * 1cqw);transform-origin:0 0;transform:rotateX(90deg)}
#contacts .ct-bld .n{top:0;background-color:var(--c-n)}
#contacts .ct-bld .s{top:100%;background-color:var(--c-s)}
#contacts .ct-bld .w,#contacts .ct-bld .e{top:0;height:100%;width:calc(var(--h) * 1cqw);transform-origin:0 0;transform:rotateY(-90deg)}
#contacts .ct-bld .w{left:0;background-color:var(--c-w)}
#contacts .ct-bld .e{left:100%;background-color:var(--c-e)}
#contacts .ct-bld .n,#contacts .ct-bld .s,#contacts .ct-bld .w,#contacts .ct-bld .e{
  background-image:radial-gradient(circle, var(--win) 0 1.1px, transparent 1.5px);
  background-size:6px 6px;background-position:3px 3px;
}
/* наш офис: тёплый свет в окнах */
#contacts .ct-bld--home{
  --c-top:#FFE9D6;--c-n:#EDBF9B;--c-s:#F6D4B8;--c-e:#F0C7A5;--c-w:#F3CEB0;
  --win:rgba(204,95,28,.8);
}
#contacts .ct-bld--home .t{background:linear-gradient(135deg,#FFF1E6,#FFDCC0);box-shadow:inset 0 0 0 1px rgba(204,95,28,.25)}

/* подписи-«билборды»: всегда смотрят на зрителя */
#contacts .ct-map__bb{
  position:absolute;width:0;height:0;transform-style:preserve-3d;
  transform:rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1));
}
#contacts .ct-map__bb--river{left:27%;top:40%}
#contacts .ct-map__bb--river span{
  position:absolute;left:0;bottom:6px;transform:translateX(-50%);white-space:nowrap;
  font-size:clamp(.8125rem, .7rem + .3vw, .9375rem);font-weight:500;font-style:italic;color:var(--street-deep);letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
#contacts .ct-map__bb--pin{left:47%;top:75.5%}
#contacts .ct-pin{
  position:absolute;left:0;bottom:0;display:flex;flex-direction:column;align-items:center;
  transform:translateX(-50%) translateZ(var(--pz,48px));transform-origin:50% 100%;
  transition:transform 900ms var(--ease-spring), opacity 400ms ease;
}
#contacts .ct-map.is-armed .ct-pin{transform:translate(-50%,-60px) translateZ(var(--pz,48px));opacity:0}
#contacts .ct-map.is-built .ct-pin{transform:translateX(-50%) translateZ(var(--pz,48px));opacity:1;transition-delay:700ms}
#contacts .ct-pin__tag{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 14px 8px 10px;border-radius:var(--r-pill);
  background:var(--home);color:var(--ink);font-weight:600;font-size:clamp(.875rem,.8rem + .25vw,1rem);line-height:1.2;
  box-shadow:0 10px 22px -10px rgba(204,95,28,.55), 0 1px 2px rgba(26,30,34,.18);
}
/* мини-знак «окно, в котором горит свет» */
#contacts .ct-pin__glyph{
  width:18px;height:18px;flex:none;border-radius:4px;border:2px solid var(--ink);
  background:
    linear-gradient(var(--ink),var(--ink)) 50% 0/2px 100% no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 50%/100% 2px no-repeat,
    linear-gradient(#FFF1E6,#FFF1E6) 100% 0/50% 50% no-repeat;
}
#contacts .ct-pin__stem{width:2px;height:clamp(28px,6cqw,44px);background:linear-gradient(var(--home),rgba(255,138,61,0))}

#contacts .ct-map__cap{
  padding:0 clamp(20px,2.4vw,28px) clamp(20px,2.4vw,26px);margin-top:-6px;
  color:var(--muted);font-size:var(--fs-label);line-height:1.5;max-width:52ch;
}

/* ---------- зоны выезда ---------- */
#contacts .ct-zones{display:grid;gap:0;border-top:1px solid var(--line)}
#contacts .ct-zone{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
#contacts .ct-zone dt{font-weight:600;color:var(--ink)}
#contacts .ct-zone dd{color:var(--muted);font-size:var(--fs-small);line-height:1.5}
@media (min-width:600px){
  #contacts .ct-zone{grid-template-columns:11.5em 1fr;gap:16px}
}

/* ==========================================================================
   Карточка записи
   ========================================================================== */
#contacts .ct-sheet{
  container-type:inline-size;
  border-radius:var(--r-4);
  padding:clamp(18px, 2.6vw + 8px, 48px);
  box-shadow:0 1px 2px rgba(26,30,34,.06), 0 36px 72px -44px rgba(26,30,34,.45);
}
#contacts .ct-sheet__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px;margin-bottom:clamp(24px,3vw,36px)}
#contacts .ct-sheet__title{font-size:clamp(1.625rem,1.3rem + 1vw,2.25rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
#contacts .ct-sheet__sub{margin-top:8px;color:var(--muted);font-size:var(--fs-small)}
#contacts .ct-sheet__free{margin-top:4px}

#contacts .ct-form{display:grid;gap:0}
#contacts .ct-step{display:block;padding-block:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
#contacts .ct-step > :not(legend){clear:both}
#contacts .ct-step > :not(legend) ~ :not(legend){margin-top:18px}
#contacts .ct-step:first-of-type{border-top:0;padding-top:0}
#contacts .ct-step__h{
  display:flex;align-items:center;gap:14px;float:left;width:100%;margin:0;padding-bottom:18px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem);letter-spacing:-.01em;line-height:1.25;
}
#contacts .ct-step__n{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--fog);color:var(--frame);font-size:1rem;font-weight:700;font-family:var(--font-body);
  transition:background-color var(--dur-2) ease, color var(--dur-2) ease;
}
#contacts .ct-step.is-done .ct-step__n{background:var(--home);color:var(--ink)}
#contacts .ct-row{display:grid;gap:18px}
@container (min-width:560px){
  #contacts .ct-row{grid-template-columns:1fr 1fr}
}
#contacts .ct-opt{font-weight:400;color:var(--muted)}
#contacts .ct-topics{gap:10px}
#contacts .ct-task{min-height:104px}

/* --- расчёт из конструктора --- */
#contacts .ct-calc{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:18px 56px 18px 18px;border-radius:var(--r-2);
  background:var(--home-soft);border:1px solid rgba(232,116,42,.28);
}
@container (max-width:439px){
  #contacts .ct-calc{grid-template-columns:1fr;padding-right:52px}
  #contacts .ct-calc__ico{display:none !important}
}
#contacts .ct-calc__ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--white);color:var(--home-press);box-shadow:var(--shadow-1);
}
#contacts .ct-calc__ico .icon{width:22px;height:22px}
#contacts .ct-calc__body{display:grid;gap:4px;min-width:0}
#contacts .ct-calc__k{font-size:var(--fs-label);font-weight:600;color:var(--home-ink)}
#contacts .ct-calc__sum{white-space:pre-line;font-size:var(--fs-small);line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
#contacts .ct-calc__price{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink)}
#contacts .ct-calc__add{justify-self:start;margin-top:8px}
#contacts .ct-calc__x{
  position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  transition:background-color var(--dur-1) ease;
}
#contacts .ct-calc__x:hover{background:rgba(26,30,34,.07)}
#contacts .ct-calc.is-flash{animation:ct-flash 900ms var(--ease-out)}
#contacts .ct-task.is-flash{animation:ct-flash 900ms var(--ease-out)}
@keyframes ct-flash{0%{box-shadow:0 0 0 0 rgba(255,138,61,.6)}100%{box-shadow:0 0 0 14px rgba(255,138,61,0)}}

/* --- когда: календарь + время --- */
#contacts .ct-when{display:grid;gap:24px}
@container (min-width:540px){
  #contacts .ct-when{grid-template-columns:minmax(0,1fr) 188px;gap:20px;align-items:start}
}
#contacts .ct-cal{
  border:1.5px solid var(--line);border-radius:var(--r-3);padding:10px 4px 6px;background:var(--white);
}
#contacts .ct-cal__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;padding-inline:4px}
#contacts .ct-cal__month{
  font-family:var(--font-display);font-weight:600;font-size:1.1875rem;letter-spacing:-.01em;text-align:center;flex:1;
}
#contacts .ct-cal__nav{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none;
  transition:background-color var(--dur-1) ease, opacity var(--dur-1) ease;
}
#contacts .ct-cal__nav:hover{background:var(--fog)}
#contacts .ct-cal__nav:disabled{opacity:.25}
#contacts .ct-cal__nav:disabled:hover{background:none}
#contacts .ct-cal__nav--prev .icon{transform:scaleX(-1)}
#contacts .ct-cal__grid{display:grid;gap:0}
#contacts .ct-cal__row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
@container (min-width:420px){
  #contacts .ct-cal{padding:14px 12px 10px}
  #contacts .ct-cal__grid,#contacts .ct-cal__row,#contacts .ct-cal__body{gap:2px}
}
#contacts .ct-cal__wd{
  display:grid;place-items:center;height:32px;font-size:.875rem;font-weight:600;color:var(--muted);
}
#contacts .ct-cal__wd.is-we{color:var(--street-deep)}
#contacts .ct-cal__cell{display:grid;place-items:center;min-width:0}
#contacts .ct-cal.is-turning .ct-cal__body{animation:ct-turn 360ms var(--ease-out)}
#contacts .ct-cal.is-turning.is-back .ct-cal__body{animation-name:ct-turn-back}
@keyframes ct-turn{from{opacity:0;transform:translateX(14px)}}
@keyframes ct-turn-back{from{opacity:0;transform:translateX(-14px)}}
#contacts .ct-cal__body{display:grid;gap:0}
#contacts .ct-day{
  position:relative;width:100%;max-width:52px;aspect-ratio:1;min-height:44px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-body);font-weight:500;font-size:1.0625rem;font-variant-numeric:tabular-nums;color:var(--ink);
  transition:background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) ease;
}
#contacts .ct-day:hover{background:var(--fog)}
#contacts .ct-day.is-we{color:var(--street-deep)}
#contacts .ct-day[aria-disabled="true"]{color:rgba(26,30,34,.28);cursor:default;background:none}
#contacts .ct-day[aria-disabled="true"]:not(.is-past){text-decoration:none}
#contacts .ct-day.is-past{color:rgba(26,30,34,.22)}
#contacts .ct-day.is-today::after{
  content:"";position:absolute;left:50%;bottom:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--home-press);
}
#contacts .ct-day[aria-pressed="true"]{background:var(--frame);color:var(--white);box-shadow:0 8px 18px -8px rgba(26,30,34,.6)}
#contacts .ct-day[aria-pressed="true"].is-today::after{background:var(--home)}
@media (prefers-reduced-motion:no-preference){
  #contacts .ct-day[aria-pressed="true"]{animation:ct-pop 420ms var(--ease-spring)}
}
@keyframes ct-pop{0%{transform:scale(.8)}100%{transform:none}}
#contacts .ct-day:focus-visible{outline:3px solid var(--home);outline-offset:1px;border-radius:50%}

#contacts .ct-slots{display:grid;gap:8px;grid-template-columns:1fr 1fr;align-content:start}
#contacts .ct-slots__h{grid-column:1/-1;font-size:var(--fs-small);font-weight:600}
@container (min-width:540px){
  #contacts .ct-slots{grid-template-columns:1fr;gap:10px}
}
#contacts .ct-slot{
  position:relative;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 10px 10px 8px;
  border-radius:var(--r-2);border:1.5px solid var(--line-strong);background:var(--white);cursor:pointer;
  transition:border-color var(--dur-1) ease, background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-2) var(--ease-out);
}
#contacts .ct-slot:hover{border-color:var(--ink)}
#contacts .ct-slot:active{transform:scale(.98)}
#contacts .ct-slot input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
#contacts .ct-slot__sky{
  width:32px;height:32px;flex:none;border-radius:10px;background:var(--sky);position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(26,30,34,.08);
}
/* солнце/окна по времени суток */
#contacts .ct-slot__sky::after{
  content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#FFC37F;left:4px;top:17px;
  box-shadow:0 0 10px 2px rgba(255,195,127,.7);
}
#contacts .ct-slot:nth-of-type(2) .ct-slot__sky::after{left:11px;top:4px;background:#FFE6A8}
#contacts .ct-slot:nth-of-type(3) .ct-slot__sky::after{left:18px;top:15px;background:#FFAE6B}
#contacts .ct-slot--eve .ct-slot__sky::after{
  left:6px;top:11px;width:8px;height:10px;border-radius:2px;background:var(--home);
  box-shadow:12px 0 0 var(--home), 0 0 12px 3px rgba(255,138,61,.6);
}
#contacts .ct-slot__txt{display:grid;gap:1px;line-height:1.25;min-width:0}
#contacts .ct-slot__name{font-weight:600;font-size:1rem}
#contacts .ct-slot__t{font-size:.9375rem;color:var(--muted);white-space:nowrap}
#contacts .ct-slot:has(input:checked){background:var(--frame);border-color:var(--frame);color:var(--white)}
#contacts .ct-slot:has(input:checked) .ct-slot__t{color:var(--on-dark-muted)}
#contacts .ct-slot:has(input:focus-visible){outline:3px solid var(--home);outline-offset:3px}
#contacts .ct-slot.is-off{opacity:.4;cursor:not-allowed}
#contacts .ct-slot.is-off input{cursor:not-allowed}
#contacts .ct-slot.is-off .ct-slot__t{text-decoration:line-through}

#contacts .ct-pick{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 16px;border-radius:var(--r-2);
  background:var(--paper);color:var(--muted);font-size:var(--fs-label);line-height:1.45;
  transition:background-color var(--dur-2) ease, color var(--dur-2) ease;
}
#contacts .ct-pick.is-set{background:var(--home-soft);color:var(--ink);font-weight:500}
#contacts .ct-pick.is-set::before{
  content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--home-press);box-shadow:0 0 0 4px rgba(255,138,61,.2);
}

/* --- низ формы --- */
#contacts .ct-foot{display:grid;gap:18px;padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
#contacts .ct-foot .check a{color:var(--ink);font-weight:500}
#contacts .ct-foot__note{font-size:var(--fs-label);color:var(--muted);line-height:1.5}
#contacts .ct-submit{white-space:normal}

/* ==========================================================================
   Заявка собрана
   ========================================================================== */
#contacts .ct-sheet.is-done .ct-form,#contacts .ct-sheet.is-done .ct-sheet__head{display:none}
#contacts .ct-done{display:grid;gap:24px}
#contacts .ct-done__top{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
#contacts .ct-done__title{font-size:clamp(1.5rem,1.2rem + 1vw,2.125rem);font-weight:700;letter-spacing:-.025em;line-height:1.12}
#contacts .ct-done__title:focus{outline:none}
#contacts .ct-done__lead{margin-top:8px;color:var(--muted)}

/* окно 2×2: стёкла загораются по одному — «в доме зажгли свет» */
#contacts .ct-lamp{
  display:grid;grid-template-columns:1fr 1fr;gap:4px;width:64px;height:64px;padding:5px;flex:none;
  border-radius:12px;background:var(--frame);
}
#contacts .ct-lamp i{border-radius:4px}
#contacts .ct-done.is-in .ct-lamp i{animation:ct-lamp-on 500ms var(--ease-out) both}
#contacts .ct-done.is-in .ct-lamp i:nth-child(1){animation-delay:180ms}
#contacts .ct-done.is-in .ct-lamp i:nth-child(2){animation-delay:340ms}
#contacts .ct-done.is-in .ct-lamp i:nth-child(3){animation-delay:500ms}
#contacts .ct-done.is-in .ct-lamp i:nth-child(4){animation-delay:660ms}
#contacts .ct-lamp i,#contacts .ct-done.is-in .ct-lamp i{background:var(--home);box-shadow:0 0 14px rgba(255,138,61,.55)}
@keyframes ct-lamp-on{from{background:#3E4A55;box-shadow:none}}

#contacts .ct-ticket{
  display:grid;gap:0;border-radius:var(--r-3);overflow:hidden;border:1.5px solid var(--line);
}
#contacts .ct-ticket__when{
  position:relative;padding:22px 24px;background:var(--home-soft);color:var(--ink);
}
#contacts .ct-ticket__k{font-size:var(--fs-label);color:var(--home-ink);font-weight:600}
#contacts .ct-ticket__date{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.5rem);letter-spacing:-.03em;line-height:1.1;margin-top:4px;color:var(--ink);
}
#contacts .ct-ticket__time{color:var(--ink);margin-top:4px}
#contacts .ct-ticket__rows{display:grid;padding:8px 24px 12px}
#contacts .ct-ticket__rows > div{display:grid;gap:2px;padding:12px 0;border-bottom:1px dashed var(--line-strong)}
#contacts .ct-ticket__rows > div:last-child{border-bottom:0}
#contacts .ct-ticket__rows dt{font-size:var(--fs-label);color:var(--muted)}
#contacts .ct-ticket__rows dd{white-space:pre-line;overflow-wrap:anywhere}
@container (min-width:520px){
  #contacts .ct-ticket__rows > div{grid-template-columns:7.5em 1fr;gap:12px}
}

#contacts .ct-send{display:grid;gap:10px}
#contacts .ct-send .btn{white-space:normal;padding-inline:16px}
@container (min-width:560px){
  #contacts .ct-send{grid-template-columns:1fr 1fr}
  #contacts .ct-send__max{grid-column:1/-1}
}
#contacts .ct-copy{border-radius:var(--r-2);background:var(--paper)}
#contacts .ct-copy__sum{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px;font-weight:600}
#contacts .ct-copy__sum .icon{transition:transform var(--dur-2) var(--ease-out)}
#contacts .ct-copy[open] .ct-copy__sum .icon{transform:rotate(180deg)}
#contacts .ct-copy__text{
  margin:0;padding:0 18px 18px;white-space:pre-wrap;overflow-wrap:anywhere;
  font-family:var(--font-body);font-size:var(--fs-small);line-height:1.55;color:var(--ink);
}
#contacts .ct-again{display:flex;flex-wrap:wrap;gap:10px}

/* появление заявки */
@media (prefers-reduced-motion:no-preference){
  #contacts .ct-done.is-in > *{animation:ct-rise 640ms var(--ease-out) both}
  #contacts .ct-done.is-in > :nth-child(2){animation-delay:90ms}
  #contacts .ct-done.is-in > :nth-child(3){animation-delay:180ms}
  #contacts .ct-done.is-in > :nth-child(n+4){animation-delay:260ms}
  #contacts .ct-done.is-in .ct-ticket{animation-name:ct-ticket}
}
@keyframes ct-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes ct-ticket{from{opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(22px);transform-origin:50% 0}}

/* ---------- reduced motion / скриншот: схема сразу построена ---------- */
@media (prefers-reduced-motion:reduce){
  #contacts .ct-map.is-armed .ct-bld{--grow:1}
  #contacts .ct-map.is-armed .ct-pin{transform:translateX(-50%) translateZ(var(--pz,48px));opacity:1}
}
html.is-shot #contacts .ct-bld{--grow:1 !important}
html.is-shot #contacts .ct-pin{transform:translateX(-50%) translateZ(var(--pz,48px)) !important;opacity:1 !important}

/* ==== footer.css ==== */
/* ==========================================================================
   footer — светлый. Призыв к замеру, 4 колонки, крупное слово-знак, юр. строка.
   ========================================================================== */
.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--white);color:var(--fg);
  border-top:1px solid var(--line);
  padding-top:clamp(64px, 6vw + 32px, 128px);
}

/* ---------- призыв ---------- */
.ftr-cta{
  display:grid;gap:28px;align-items:end;
  padding-bottom:clamp(48px, 5vw, 80px);
}
.ftr-cta__title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;
  font-size:clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);max-width:24ch;
}
.ftr-cta__actions{display:grid;gap:12px}
@media (min-width:600px){
  .ftr-cta__actions{display:flex;flex-wrap:wrap}
}
@media (min-width:1000px){
  .ftr-cta{grid-template-columns:minmax(0,1fr) auto;column-gap:48px}
  .ftr-cta__actions{justify-content:flex-end}
}

/* ---------- колонки ---------- */
.ftr-grid{
  display:grid;gap:40px 32px;
  padding-top:clamp(40px, 4vw, 64px);
  border-top:1px solid var(--line);
}
@media (min-width:700px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ftr-grid{grid-template-columns:1.25fr 1fr .9fr 1fr}}

.ftr-logo{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:inherit;text-decoration:none;border-radius:12px}
.ftr-logo .brand-mark{width:36px;height:36px}
.site-footer .brand-mark__pane{fill:none;stroke:var(--ink);stroke-width:2}
.site-footer .brand-mark__pane--lit{fill:var(--home);stroke:var(--home)}
.ftr-logo__word{font-family:var(--font-display);font-weight:800;font-size:1.375rem;letter-spacing:.05em}
.ftr-brand__desc{margin-top:14px;color:var(--muted);max-width:32ch}
.ftr-facts{display:grid;gap:10px;margin-top:20px}
.ftr-facts li{display:flex;align-items:center;gap:12px}
.ftr-facts .icon{color:var(--home-text)}

.ftr-k{font-size:var(--fs-label);font-weight:600;color:var(--muted);margin-bottom:14px}
.ftr-phone{
  display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1.625rem;letter-spacing:-.015em;
  color:inherit;text-decoration:none;line-height:1.2;
}
.ftr-phone:hover{text-decoration:underline;text-decoration-color:var(--home);text-decoration-thickness:2px;text-underline-offset:.18em}
.ftr-status{display:flex;margin-top:6px;color:var(--muted);font-size:1rem;white-space:normal}
.ftr-link{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:10px;
  color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:.25em;
}
.ftr-link .icon{color:var(--max)}
.ftr-link:hover{text-decoration-color:var(--home)}
.ftr-addr{display:flex;gap:12px;align-items:flex-start;margin-top:10px;line-height:1.5}
.ftr-addr .icon{margin-top:3px;color:var(--home-text)}
.ftr-muted{color:var(--muted)}

.ftr-nav{display:grid;gap:2px}
.ftr-nav a{
  display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;
  background:linear-gradient(var(--home),var(--home)) 0 calc(100% - 8px)/0 2px no-repeat;
  transition:background-size var(--dur-2) var(--ease-out), color var(--dur-1) ease;
}
.ftr-nav a:hover{background-size:100% 2px}

.ftr-req{display:grid;gap:6px;margin-top:18px;font-size:1rem}
.ftr-req div{display:flex;gap:10px;flex-wrap:wrap}
.ftr-req dt{color:var(--muted)}
.ftr-req dd{margin:0}

/* ---------- крупное слово-знак ---------- */
.ftr-mark{
  position:relative;margin-top:clamp(56px, 7vw, 112px);
  padding-inline:var(--pad-x);max-width:calc(var(--container) + 2 * var(--pad-x));margin-inline:auto;
  line-height:.8;user-select:none;pointer-events:none;
}
.ftr-mark__word{
  display:block;white-space:nowrap;text-align:center;
  font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;
  font-size:min(17.4vw, 236px);
  background:linear-gradient(180deg, #DFE5E8 0%, #F1F4F5 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(12%);
}

/* ---------- юр. строка ---------- */
.ftr-legal{
  position:relative;display:grid;gap:12px;
  padding-block:24px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
  font-size:var(--fs-label);color:var(--muted);
}
.ftr-legal__tm{max-width:70ch}
.ftr-top{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;justify-self:start;
  color:var(--fg);font-weight:600;text-decoration:none;
}
.ftr-top .icon{transition:transform var(--dur-2) var(--ease-out)}
.ftr-top:hover .icon{transform:translateY(-3px)}
@media (min-width:900px){
  .ftr-legal{grid-template-columns:auto 1fr auto;align-items:center;column-gap:40px}
  .ftr-top{justify-self:end}
}
/* место под нижнюю панель на мобильном */
@media (max-width:899px){
  .ftr-legal{padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px))}
}

/* ==== mobilebar.css ==== */
/* ==========================================================================
   mobilebar — «Позвонить» + MAX. Плавающая светлая капсула снизу, только < 900px.
   Появляется, когда кнопка hero ушла вверх. html.mb-visible + --mb-h для секций
   (липкие элементы снизу поднимайте на var(--mb-h)).
   ========================================================================== */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobilebar);
  padding:0 12px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
  transform:translateY(calc(100% + 12px));opacity:0;visibility:hidden;
  transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease, visibility 0s linear var(--dur-3);
}
.mobilebar.is-visible{
  transform:none;opacity:1;visibility:visible;
  transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) ease, visibility 0s;
}
.mb{
  display:flex;gap:8px;max-width:480px;margin-inline:auto;padding:6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 0 0 1px rgba(26,30,34,.08), 0 18px 40px -14px rgba(26,30,34,.4);
  pointer-events:auto;
}
.mb .btn{min-height:56px}
.mb-call{flex:1 1 auto;font-size:1.125rem}
.mb-max{flex:0 0 auto;padding:0 24px}
html:not(.is-booted) .mobilebar{display:none}
html.menu-open .mobilebar{visibility:hidden;opacity:0;transition:none}
@media (min-width:900px){
  .mobilebar{display:none}
}
@media (prefers-reduced-motion: reduce){
  .mobilebar{transform:none}
}