/* ===== Темы ===== */
:root, :root[data-theme="light"]{
  --bg:#F1EFE9; --bg2:#FBFAF6; --bg3:#EAE7DE; --line:#DBD6C9;
  --fg:#20241F; --muted:#7C7A70; --pine:#2F4A38; --pine-deep:#9CB0A0; --copper:#B4622D;
  --on-pine:#F1EFE9; --on-copper:#FBF3EC;
  /* акцент WhatsApp: тёмный текст на ярко-зелёном — контраст ~6:1, читается и на солнце */
  --wa:#22A85B; --on-wa:#06210F;
  --sel-a:#E7EEE4; --sel-b:#F1EFE9; --selcol:#EAF0E6;
  --glass:rgba(251,250,246,.70); --grain:.05;
  --shadow:0 1px 2px rgba(32,36,31,.10); --shadow-lg:0 12px 40px -12px rgba(32,36,31,.22);
}
:root[data-theme="dark"]{
  --bg:#12160F; --bg2:#1A211A; --bg3:#222B22; --line:#31402F;
  --fg:#F1EFE9; --muted:#9AA694; --pine:#7CB489; --pine-deep:#3E6B4F; --copper:#C97B4A;
  --on-pine:#12160F; --on-copper:#160F0A;
  --wa:#2BC96C; --on-wa:#07240F;
  --sel-a:#20301F; --sel-b:#1A211A; --selcol:#212C21;
  --glass:rgba(24,30,23,.58); --grain:.08;
  --shadow:0 1px 2px rgba(0,0,0,.30); --shadow-lg:0 14px 44px -12px rgba(0,0,0,.55);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s;position:relative}
/* премиальная зернистость фона — «каменный гранулят» */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{filter:invert(1)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative}
.muted{color:var(--muted)}
.logo svg polygon{fill:var(--pine)}

:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Шапка ===== */
header{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line);gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:.02em}
.logo span em{font-style:normal;color:var(--pine)}
.head-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lang button{font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;padding:6px 11px;background:transparent;color:var(--muted);border:none;cursor:pointer;transition:.15s}
.lang button:hover{color:var(--fg)}
.lang button.on{background:var(--pine);color:var(--on-pine)}
.theme-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.theme-btn:hover{border-color:var(--pine-deep)}
.theme-btn .ico{display:none}
:root[data-theme="light"] .theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .sun{display:block}
.h-note{font-size:13px;color:var(--muted);text-align:right;line-height:1.4}
.h-note b{color:var(--fg);font-weight:700}

/* ===== Hero ===== */
.hero{padding:60px 0 38px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--pine);border:1px solid var(--pine-deep);padding:7px 14px;border-radius:100px;margin-bottom:22px}
h1{font-family:'Unbounded',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(32px,5vw,58px);line-height:1.1;max-width:880px;text-wrap:balance}
h1 em{font-style:normal;color:var(--pine)}
.hero p{max-width:660px;color:var(--muted);font-size:17px;margin-top:18px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.badge{font-size:13px;font-weight:600;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:9px 14px;display:flex;align-items:center;gap:8px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--pine);flex:none}

/* ===== Сетка ===== */
.grid{display:grid;grid-template-columns:1fr 400px;gap:28px;margin:44px 0 70px;align-items:start}
@media(max-width:920px){.grid{grid-template-columns:1fr}}
.panel{background:var(--glass);backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow-lg)}
.panel + .panel{margin-top:16px}
.panel h2{font-size:14px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.panel h2 b{color:var(--pine);margin-right:8px}

/* переключатель режима площади */
.modes{display:flex;gap:6px;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:18px}
.mode{flex:1;text-align:center;font-size:13px;font-weight:700;padding:9px 12px;border-radius:7px;cursor:pointer;color:var(--muted);transition:.15s}
.mode:hover{color:var(--fg)}
.mode.sel{background:var(--bg2);color:var(--fg);box-shadow:var(--shadow)}

/* площадь */
.area-row{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.area-val{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:44px;min-width:170px;line-height:1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.area-val input{font:inherit;color:inherit;background:transparent;border:none;border-bottom:2px dashed var(--line);width:3.2ch;min-width:2ch;padding:0;text-align:left;-moz-appearance:textfield;transition:border-color .15s}
.area-val input::-webkit-outer-spin-button,.area-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.area-val input:hover{border-color:var(--pine-deep)}
.area-val input:focus{outline:none;border-bottom-style:solid;border-color:var(--pine)}
.area-val small{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;color:var(--muted);font-weight:600;margin-left:4px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(to right,var(--pine) 0%,var(--pine) var(--fill,30%),var(--line) var(--fill,30%),var(--line) 100%);outline-offset:6px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--bg2);border:5px solid var(--pine);cursor:grab;box-shadow:var(--shadow)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg2);border:5px solid var(--pine);cursor:grab}

/* режим «размеры дома» */
.house-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);font-weight:600}
.fld input{background:var(--bg3);border:1px solid var(--line);color:var(--fg);font-family:inherit;font-weight:700;font-size:18px;border-radius:10px;padding:12px}
.fld input:focus{outline:none;border-color:var(--pine)}
.house-result{font-size:14px;color:var(--fg);font-weight:700;margin-top:12px;background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:12px 14px}

.hint{font-size:13px;color:var(--muted);margin-top:12px}
.hint button{font:inherit;color:var(--fg);cursor:pointer;background:none;border:none;border-bottom:1px dashed var(--muted);padding:0}
.hint-box{display:none;font-size:13px;color:var(--muted);background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:10px}
.hint-box.open{display:block}

/* формы */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.opts{grid-template-columns:1fr}}
.opt{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .15s}
.opt:hover{border-color:var(--pine-deep)}
.opt.sel{border-color:var(--pine)}
.opt .t{font-weight:800;font-size:14px;margin-bottom:4px}
.opt .d{font-size:12px;color:var(--muted)}
.opt .k{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;color:var(--pine);letter-spacing:.06em}

/* бренды */
.brands{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.brands{grid-template-columns:1fr}}
.bcard{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative}
.bcard:hover{border-color:var(--pine-deep)}
.bcard.sel{border-color:var(--pine);box-shadow:0 0 0 1px var(--pine)}
.bcard .check{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);transition:.15s}
.bcard.sel .check{border-color:var(--pine);background:var(--pine)}
.bcard.sel .check::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--on-pine)}
.bcard .bn{font-weight:800;font-size:15px;padding-right:26px}
.bcard .bn .est{color:var(--copper)}
.bcard .bo{font-size:12px;color:var(--muted);margin:2px 0 10px}
.bcard .bp{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bcard .bp small{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--muted);font-weight:600}
.bcard .bw{font-size:11px;color:var(--muted);margin-top:8px;line-height:1.5}
.bcard .bw b{color:var(--fg);font-weight:700}

/* цвета */
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.sw{width:56px;cursor:pointer;text-align:center}
.sw i{display:block;width:52px;height:52px;border-radius:10px;border:2px solid transparent;transition:.15s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sw.sel i{border-color:var(--fg);box-shadow:0 0 0 3px var(--pine)}
.sw span{display:block;font-size:10px;color:var(--muted);margin-top:6px;line-height:1.2}
.roof-preview{margin-top:18px;border-radius:14px;overflow:hidden;border:1px solid var(--line);line-height:0;box-shadow:var(--shadow);aspect-ratio:420/190}
.roof-3d{display:none;position:relative;margin-top:18px;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);aspect-ratio:420/300;background:radial-gradient(120% 120% at 50% 20%, var(--bg3), var(--bg));cursor:grab;touch-action:none}
.roof-3d:active{cursor:grabbing}
.roof-3d canvas{display:block;width:100%;height:100%}
/* масштаб: кнопки поверх сцены; колесо и пинч работают и без них */
.zoom3d{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.zoom3d button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--fg);font-size:18px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:background .15s,transform .1s}
.zoom3d button:hover{background:var(--bg3)}
.zoom3d button:active{transform:scale(.92)}
.roof-preview svg{display:block}
.roof-cap{font-size:12px;color:var(--muted);margin-top:10px;font-weight:600;text-align:center}
.cdot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* тумблер монтажа */
.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.tg{width:46px;height:26px;border-radius:100px;background:var(--line);position:relative;transition:.2s;flex:none}
.tg::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bg2);transition:.2s;box-shadow:var(--shadow)}
.toggle.on .tg{background:var(--pine)}
.toggle.on .tg::after{left:23px}
.toggle .tl{font-size:14px;font-weight:600}
.toggle .ts{font-size:12px;color:var(--muted)}

/* итог */
.sticky{position:sticky;top:20px}
.total-card{background:var(--glass);backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.total-head{padding:20px 26px;border-bottom:1px solid var(--line)}
.total-head .tt{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sel-block{padding:22px 26px;background:linear-gradient(135deg,var(--sel-a),var(--sel-b))}
.sel-block .brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:10px}
.sel-block .brand b{font-size:17px}
.tag{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--on-pine);background:var(--pine);border-radius:5px;padding:4px 8px;flex:none}
.sel-block .sum{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:42px;line-height:1.1;margin:6px 0 2px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sel-block .per{font-size:13px;color:var(--muted)}
.breakdown{padding:8px 26px 4px}
.brow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;gap:12px}
.brow:last-child{border-bottom:none}
.brow .n{color:var(--muted);font-weight:600}
.brow .v{font-weight:800;text-align:right}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:calc(100% - 52px);text-align:center;background:var(--copper);color:var(--on-copper);font:inherit;font-weight:800;font-size:16px;padding:17px;margin:18px 26px 12px;border:0;border-radius:12px;text-decoration:none;cursor:pointer;transition:filter .15s,box-shadow .15s}
.cta:hover{filter:brightness(1.06)}
/* главный CTA — канал, а не просто кнопка: цвет WhatsApp + глиф */
.cta--wa{background:var(--wa);color:var(--on-wa);box-shadow:0 8px 22px -10px var(--wa)}
.cta--wa:hover{box-shadow:0 10px 26px -8px var(--wa)}
.cta .wa-ico{flex:none}
.cta-note{font-size:12px;color:var(--muted);text-align:center;padding:0 26px 22px}

/* таблица сравнения */
section.compare{margin:0 0 40px}
.sec-title{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.sec-sub{color:var(--muted);font-size:15px;margin-bottom:26px;max-width:680px}
.sec-sub b{color:var(--fg)}
.tbl-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--glass);backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05)}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:14px 16px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
th{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
th .th-sub{font-weight:400;letter-spacing:0;text-transform:none}
tbody tr:last-child td{border-bottom:none}
td.bname{font-weight:800;font-size:14px}
td .num{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
col.selcol{background:var(--selcol)}
th.selth{color:var(--pine)}
.tbl-note{font-size:12px;color:var(--muted);margin-top:12px}
.rng{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.facs{display:inline-flex;gap:5px}
.fac{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;font-style:normal}
.fac.ok{background:color-mix(in srgb,var(--pine) 20%,transparent);color:var(--pine)}
.fac.mid{background:color-mix(in srgb,var(--copper) 18%,transparent);color:var(--copper)}
.fac.no{background:var(--bg3);color:var(--muted)}
.legend{font-size:12px;color:var(--muted);margin-top:12px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.legend b{color:var(--fg);font-weight:700}
.scroll-hint{position:absolute;right:12px;bottom:12px;background:var(--copper);color:var(--on-copper);font-size:12px;font-weight:700;padding:6px 12px;border-radius:100px;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.28)}

/* источники */
details.src{background:var(--glass);backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);border:1px solid var(--line);border-radius:14px;margin-bottom:24px}
.src-row a{color:var(--pine);font-weight:600;text-decoration:underline}
details.src summary{cursor:pointer;padding:20px 26px;font-weight:700;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.src summary::-webkit-details-marker{display:none}
details.src summary::after{content:'+';font-size:20px;color:var(--pine)}
details.src[open] summary::after{content:'–'}
.src-body{padding:0 26px 24px}
.src-row{display:grid;grid-template-columns:210px 160px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
@media(max-width:680px){.src-row{grid-template-columns:1fr;gap:4px}}
.src-row:last-child{border-bottom:none}
.src-row b{font-size:14px}
.src-row input{background:var(--bg3);border:1px solid var(--line);color:var(--fg);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;border-radius:8px;padding:8px 10px;width:130px}
.src-row input:focus{outline:none;border-color:var(--pine)}
.src-row .s{color:var(--muted)}
.src-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.src-note{font-size:12px;color:var(--muted);max-width:640px}
.reset-link{font:inherit;font-size:12px;font-weight:700;color:var(--pine);background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;white-space:nowrap}
.edited-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--copper);border:1px solid var(--copper);border-radius:6px;padding:3px 8px;margin-left:10px}

footer{border-top:1px solid var(--line);padding:26px 0 40px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.noscript-warn{background:var(--copper);color:var(--on-copper);text-align:center;padding:12px;font-weight:700;font-size:14px}

/* ===== Блок «за 24 часа» и вторые действия ===== */
.get24{margin:14px 26px 0;background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.get24-t{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);margin-bottom:8px}
.get24 ul{list-style:none;display:grid;gap:6px}
.get24 li{font-size:13px;color:var(--fg);padding-left:18px;position:relative}
.get24 li::before{content:'✓';position:absolute;left:0;color:var(--pine);font-weight:800}
/* осталось одно вторичное действие — «Скачать расчёт»; ставим во всю ширину */
.second-acts{display:grid;grid-template-columns:1fr;gap:10px;margin:0 26px 12px}

/* ===== Кнопки в языке системы: прямые углы 10px, тонкая линия,
   единственный акцент — диагональный блик под фирменным уклоном 26,6° ===== */
.btn{
  position:relative;display:inline-block;cursor:pointer;overflow:hidden;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--fg);text-align:center;text-decoration:none;
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  transition:border-color .15s,filter .15s,transform .15s;
}
.btn span{display:block;padding:11px 18px;position:relative;z-index:1;user-select:none}
.btn:hover{border-color:var(--pine)}
.btn:active{transform:scale(.97)}
.btn--pine{background:var(--pine);border-color:var(--pine);color:var(--on-pine)}
.btn--pine:hover{filter:brightness(1.08)}
.btn::before{content:"";position:absolute;top:-2px;bottom:-2px;left:-45%;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-26.6deg);pointer-events:none}

/* ===== KP-хук под сравнением ===== */
.kp-hook{margin-top:22px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:14px;padding:18px 22px}
.kp-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.kp-t{font-size:14px;font-weight:600;max-width:560px}
.kp-panel{margin-top:18px;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:14px}
.kp-panel-t{font-weight:800;font-size:15px}
.kp-drop{border:2px dashed var(--line);border-radius:14px;padding:26px;text-align:center;cursor:pointer;display:grid;gap:6px;transition:border-color .2s,background .2s}
.kp-drop:hover,.kp-drop.over{border-color:var(--pine);background:color-mix(in srgb,var(--pine) 7%,transparent)}
.kp-drop b{font-size:14px}
.kp-drop span{font-size:12px;color:var(--muted)}
.kp-result{font-size:14px;background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:14px 16px;line-height:1.6}
.kp-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ===== Состав черепицы ===== */
section.layers{margin:0 0 48px}
.layers-wrap{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;padding:26px}
@media(max-width:680px){.layers-wrap{grid-template-columns:1fr}}
.layers-svg{width:100%;height:auto;max-width:340px;margin:0 auto}
.lg rect{stroke:rgba(0,0,0,.15);stroke-width:.5}
.lg[data-l="1"] rect{fill:#DCE6DE}   /* бесцветный акрил — светлый «стеклянный» тон */
.lg[data-l="2"] rect{fill:var(--pine)}
.lg[data-l="2"]{color:#F1EFE9}
.lg[data-l="2"] .chips{fill:url(#chips);stroke:none}
.lg[data-l="3"] rect{fill:#C98B5E}
/* 4/8 — пассивирующий, 5/7 — алюмоцинк: одинаковые заливки читаются как
   симметрия защиты стали с обеих сторон, ради неё схема и переделана */
.lg[data-l="4"] rect{fill:#A5A196}
.lg[data-l="5"] rect{fill:#8C9299}
.lg[data-l="6"] rect{fill:#4A4D52}
.lg[data-l="7"] rect{fill:#8C9299}
.lg[data-l="8"] rect{fill:#A5A196}
.layers-scale{font-size:10px;fill:var(--muted);font-family:inherit}
.layers-list{list-style:none;counter-reset:ln;display:grid;gap:11px}
.layers-list li{counter-increment:ln;position:relative;padding-left:36px;font-size:14px}
.layers-list li::before{content:counter(ln);position:absolute;left:0;top:-2px;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#F6F4EE}
.layers-list li:nth-child(1)::before{background:#DCE6DE;color:#20241F}
.layers-list li:nth-child(2)::before{background:var(--pine)}
.layers-list li:nth-child(3)::before{background:#C98B5E}
.layers-list li:nth-child(4)::before{background:#A5A196;color:#20241F}
.layers-list li:nth-child(5)::before{background:#8C9299}
.layers-list li:nth-child(6)::before{background:#4A4D52}
.layers-list li:nth-child(7)::before{background:#8C9299}
.layers-list li:nth-child(8)::before{background:#A5A196;color:#20241F}

/* ===== FAQ (кастомный аккордеон с плавным раскрытием) ===== */
section.faq{margin:0 0 48px}
.faq-item{background:var(--bg2);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;overflow:hidden}
.faq-q{width:100%;font:inherit;color:var(--fg);background:none;border:none;cursor:pointer;text-align:left;padding:15px 20px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-x{position:relative;width:14px;height:14px;flex:none}
.faq-x::before,.faq-x::after{content:'';position:absolute;background:var(--pine);left:0;top:6px;width:14px;height:2px;border-radius:1px}
.faq-x::after{transform:rotate(90deg)}
.faq-item.open .faq-x::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-ain{overflow:hidden;min-height:0;padding:0 20px;font-size:14px;color:var(--muted);max-width:720px}
.faq-item.open .faq-ain{padding-bottom:16px}

/* ===== «Для кого» ===== */
section.who{margin:0 0 56px}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:680px){.who-grid{grid-template-columns:1fr}}
.who-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:20px}
.who-card .t{font-weight:800;font-size:15px;margin-bottom:8px}
.who-card .t::before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--pine);margin-right:9px;transform:rotate(45deg)}
.who-card .d{font-size:13px;color:var(--muted)}

/* ===== Мобильные карточки брендов (вместо таблицы) ===== */
.brands-mobile{display:none;gap:10px;grid-template-columns:1fr}
.bm-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px;position:relative}
.bm-card.sel{border-color:var(--pine);box-shadow:0 0 0 1px var(--pine)}
.bm-head{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:2px}
.bm-name{font-weight:800;font-size:15px}
.bm-name small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:2px}
.bm-price{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bm-price small{font-size:11px;color:var(--muted);font-weight:600}
.bm-rows{display:grid;gap:6px;margin-top:10px}
.bm-row{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.bm-row .l{color:var(--muted)}
.bm-row .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.bm-tag{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--on-pine);background:var(--pine);border-radius:5px;padding:3px 7px}
@media(max-width:680px){
  .tbl-wrap,.legend{display:none}
  .brands-mobile{display:grid}
}

/* ===== Тост ===== */
/* ===== Блок доверия под калькулятором ===== */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 8px}
.trust-i{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.trust-i svg{flex:none;color:var(--pine)}
.trust-i span{font-size:14px;font-weight:600;line-height:1.35}
@media(max-width:820px){.trust{grid-template-columns:1fr;gap:10px}.trust-i{padding:14px 16px}}

/* ===== Окно фиксации контакта ===== */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(18,22,15,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* min-width:0 обязателен: без него авто-минимум flex-элемента распирает карточку
   по самому длинному содержимому, и на узком экране она уезжает за край */
.modal-card{position:relative;width:min(100%,420px);min-width:0;max-height:calc(100vh - 40px);overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-lg)}
.modal-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;border-radius:9px;cursor:pointer}
.modal-x:hover{background:var(--bg3);color:var(--fg)}
.modal-t{font-family:'Unbounded',sans-serif;font-weight:700;font-size:20px;line-height:1.25;padding-right:30px}
.modal-s{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}
.lead-sum{margin:16px 0 4px;background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px}
.lead-sum b{display:block;font-size:19px;font-weight:800;margin-top:2px}
.lead-f{display:block;margin-top:14px}
.lead-f span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.lead-f input{width:100%;font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 14px;transition:border-color .15s}
.lead-f input:focus{outline:none;border-color:var(--pine)}
.lead-f input.bad{border-color:var(--copper)}
.lead-err{margin-top:12px;font-size:13px;font-weight:600;color:var(--copper)}
.modal .cta{width:100%;margin:18px 0 0}
.lead-privacy{font-size:11px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.4}
@media(max-width:480px){
  .modal{padding:12px}
  .modal-card{padding:20px}
  .modal-t{font-size:18px}
  .modal .cta{font-size:15px;padding:16px 12px}
}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);background:var(--fg);color:var(--bg);font-size:14px;font-weight:600;padding:12px 20px;border-radius:12px;box-shadow:0 10px 34px -8px rgba(0,0,0,.4);opacity:0;pointer-events:none;z-index:60;max-width:min(92vw,480px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== Галочка на карточках формы ===== */
.opt{position:relative}
.opt .check{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);transition:.15s}
.opt.sel .check{border-color:var(--pine);background:var(--pine)}
.opt.sel .check::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--on-pine)}

/* ===== Анимации (только transform/opacity, с уважением к reduced-motion) ===== */
@media(prefers-reduced-motion:no-preference){
  .toast{transition:opacity .25s ease,transform .25s ease}
  .bcard,.bm-card{transition:border-color .15s,box-shadow .2s,transform .2s}
  .bcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(0,0,0,.28)}
  .second-acts button:active,.kp-hook button:active{transform:scale(.97)}

  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .hero,.grid>div>.panel,.sticky .total-card{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
  .grid>div>.panel:nth-of-type(1){animation-delay:.05s}
  .grid>div>.panel:nth-of-type(2){animation-delay:.11s}
  .grid>div>.panel:nth-of-type(3){animation-delay:.17s}
  .grid>div>.panel:nth-of-type(4){animation-delay:.23s}
  .grid>div>.panel:nth-of-type(5){animation-delay:.29s}
  .sticky .total-card{animation-delay:.2s}
  /* hero: каскад по детям */
  .hero .eyebrow,.hero h1,.hero p,.hero .badges{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
  .hero .eyebrow{animation-delay:.02s}
  .hero h1{animation-delay:.1s}
  .hero p{animation-delay:.18s}
  .hero .badges{animation-delay:.26s}

  /* появление нижних секций при прокрутке */
  .reveal{opacity:0;transform:translateY(18px)}
  .reveal.revealed{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

  /* микро-отклики выбора: пульс на галочке, НЕ на карточке —
     transform карточки конфликтовал с hover-подъёмом и давал рывок */
  @keyframes checkPulse{0%{transform:scale(.55)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
  .bcard.sel .check,.opt.sel .check{animation:checkPulse .3s cubic-bezier(.2,.7,.3,1)}
  @keyframes swPop{0%{transform:scale(.9)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
  .sw.sel i{animation:swPop .28s ease}

  /* кнопки: диагональный блик 26,6° пробегает при наведении */
  .btn::before{transition:left .5s ease}
  .btn:hover::before{left:112%}

  /* раскрытие FAQ */
  .faq-a{transition:grid-template-rows .35s ease}
  .faq-ain{transition:padding-bottom .35s ease}
  .faq-x::after{transition:transform .25s ease}

  /* пульс подсказки скролла таблицы */
  @keyframes hintNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  .scroll-hint{animation:hintNudge 1.6s ease-in-out infinite}

  /* фейд-ин 3D-канваса */
  .roof-3d canvas{opacity:0;transition:opacity .6s ease}
  .roof-3d.on canvas{opacity:1}

  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.025)}100%{transform:scale(1)}}
  .sum.pop{animation:pop .24s ease}
  .tbl-wrap,.brands-mobile{transition:opacity .22s ease}
  .xfade{opacity:.45}
  @keyframes bmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .bm-card{animation:bmIn .4s ease both}
  .bm-card:nth-child(2){animation-delay:.06s}
  .bm-card:nth-child(3){animation-delay:.12s}
  .bm-card:nth-child(4){animation-delay:.18s}
  .bm-card:nth-child(5){animation-delay:.24s}
}

/* ===== Мобильная адаптация ===== */
@media(max-width:920px){
  .sticky{position:static}
  .head-right{width:100%;justify-content:space-between}
}
/* Мобильная производительность: backdrop-filter (стеклянное размытие) заставляет
   GPU пересчитывать блюр каждый кадр, а при смене темы фон анимируется 0.2с — на
   телефоне это лагает. Отключаем блюр и делаем панели сплошными: выглядит почти
   так же, но перерисовка становится дешёвой и переключение темы — плавным. */
@media(max-width:920px){
  .panel,.total-card,.tbl-wrap,details.src,.kp-hook,.layers-wrap{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--bg2);
  }
  /* большой fixed-слой «зерна» на мобильных дорог при перерисовке — убираем */
  body::before{display:none}
  /* На время смены темы гасим ВСЕ переходы: иначе десятки элементов с transition:.15s
     одновременно перекрашиваются 150мс и дают лаг. Класс theme-switch навешивается
     в app.js только на момент переключения и тут же снимается. */
  html.theme-switch *,
  html.theme-switch *::before,
  html.theme-switch *::after{
    transition:none !important;
  }
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .panel{padding:20px}
  .hero{padding:38px 0 26px}
  .hero p{font-size:16px}
  .area-val{font-size:36px;min-width:120px}
  .sel-block .sum{font-size:34px}
  .h-note{display:none}
  .badge{font-size:12px;padding:8px 12px}
  footer{flex-direction:column;gap:10px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after{transition:none!important}
}