/* Послушные рольставни — демо. Две краски: цвет ламелей (RAL) и белый; третий цвет — только огонёк пульта и свет в окне. */

@font-face { font-family: "Geologica"; src: url("../fonts/geologica-cyr.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; src: url("../fonts/geologica-lat.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-cyr.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-lat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --lam: #45322E;          /* RAL 8017 */
  --lam-ink: #F4F2EC;      /* текст на полотне */
  --ink: #45322E;          /* текст на белом */
  --paper: #F3F3EF;        /* RAL 9016 */
  --paper-2: #E9E8E2;
  --wall: #E2E0D8;         /* штукатурка */
  --metal: #A5A8A6;        /* RAL 9006 — направляющие */
  --led-on: #3FCB72;
  --led-off: #F2A13A;
  --glow: #FFD08C;
  --deep: color-mix(in oklab, var(--lam) 62%, black);
  --soft: color-mix(in oklab, var(--ink) 80%, var(--paper));
  --rib-hi: color-mix(in oklab, var(--lam) 78%, white);
  --rib-lo: color-mix(in oklab, var(--lam) 70%, black);
  --gut: clamp(16px, 4.2vw, 64px);
  --max: 1320px;
  --pad: max(var(--gut), (100vw - var(--max)) / 2);
  --f-d: "Geologica", "Onest", system-ui, sans-serif;
  --f-t: "Onest", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
[data-ral="7016"] { --lam: #383E42; --ink: #383E42; }
[data-ral="6005"] { --lam: #17463A; --ink: #17463A; }
[data-ral="3005"] { --lam: #5E2129; --ink: #5E2129; }
[data-ral="9006"] { --lam: #A5A8A6; --lam-ink: #202426; --ink: #30353A; }
[data-ral="1015"] { --lam: #E3CFB1; --lam-ink: #3A2E22; --ink: #4A3A2A; }
[data-ral="9016"] { --lam: #E6E7E2; --lam-ink: #2A2D30; --ink: #30353A; }
[data-ral="9006"], [data-ral="1015"], [data-ral="9016"] { --deep: color-mix(in oklab, var(--lam) 55%, #3a3a3a); --rib-lo: color-mix(in oklab, var(--lam) 78%, black); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.58 var(--f-t); font-kerning: normal; text-rendering: optimizeLegibility; }
::selection { background: var(--lam); color: var(--lam-ink); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--led-off); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--lam); color: var(--lam-ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
h1, h2, h3 { font-family: var(--f-d); font-weight: 600; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.5rem); line-height: 1.04; }
h3 { font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.015em; }
p { margin: 0 0 .9em; text-wrap: pretty; }
.small { font-size: .875rem; color: var(--soft); }
.ask, .ask-i { text-decoration: underline dotted 1.5px; text-underline-offset: .25em; }
.ask { font-size: .9375rem; color: var(--soft); margin-top: .4em; }
html { scrollbar-color: color-mix(in oklab, var(--lam) 60%, var(--paper)) var(--paper-2); }

/* Полотно: рёбра ламелей */
.ribs, .lam-field, .curtain, .pull-curtain, .op-hole span, .cw-curtain, .sw-c, .case > summary, .opt:has(input:checked) {
  --rh: 16px;
  background-color: var(--lam);
  background-image:
    repeating-linear-gradient(180deg, var(--rib-hi) 0 1px, transparent 1px calc(var(--rh) - 3px), var(--rib-lo) calc(var(--rh) - 3px) var(--rh)),
    repeating-linear-gradient(180deg, rgb(255 255 255 / .08) 0, rgb(0 0 0 / .07) var(--rh));
}
.lam-field { --rh: 38px; color: var(--lam-ink); }
.lam-field .small, .lam-field .ask { color: color-mix(in oklab, var(--lam-ink) 82%, var(--lam)); }

/* Кнопки */
.btn { --b: var(--lam); --t: var(--lam-ink); appearance: none; border: 0; cursor: pointer; font: 600 1rem/1.15 var(--f-d); letter-spacing: -0.01em; padding: 15px 22px 16px; border-radius: 12px; background: var(--b); color: var(--t); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .16), inset 0 -4px 0 rgb(0 0 0 / .22), 0 10px 22px -14px rgb(0 0 0 / .5); transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgb(255 255 255 / .1), inset 0 -1px 0 rgb(0 0 0 / .2); }
.btn:disabled { cursor: not-allowed; filter: grayscale(.4) opacity(.55); transform: none; }
.btn-paper { --b: var(--paper); --t: var(--ink); }
.btn-big { font-size: 1.125rem; padding: 18px 28px 19px; }
[data-ral="9016"] .btn-lam, [data-ral="1015"] .btn-lam, [data-ral="9006"] .btn-lam { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--lam-ink) 30%, transparent), inset 0 -4px 0 rgb(0 0 0 / .14), 0 10px 22px -14px rgb(0 0 0 / .4); }

/* Плашка демо и шапка */
.demo-bar { background: var(--deep); color: color-mix(in oklab, var(--lam-ink) 92%, var(--deep)); font-size: .8125rem; line-height: 1.4; padding: 7px var(--pad); text-align: center; }
[data-ral="9006"] .demo-bar, [data-ral="1015"] .demo-bar, [data-ral="9016"] .demo-bar { color: #fff; }
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in oklab, var(--paper) 94%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }
.top-in { display: flex; align-items: center; gap: 28px; padding: 12px var(--pad); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.bm-bg { fill: var(--lam); } .bm-fg { fill: var(--lam-ink); } .bm-last { opacity: .55; }
[data-ral="9016"] .bm-bg { fill: var(--lam-ink); } [data-ral="9016"] .bm-fg { fill: var(--paper); }
.brand-name { font: 650 .98rem/1.02 var(--f-d); letter-spacing: -0.02em; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: .9375rem; }
.nav a { text-decoration: none; padding: 6px 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lam); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.top-cta { padding: 11px 16px 12px; font-size: .9375rem; }
.l-short { display: none; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border-radius: 10px; background: var(--paper-2); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); }
.menu-in { position: absolute; right: 0; top: 52px; width: min(300px, calc(100vw - 32px)); background: var(--paper); border-radius: 14px; padding: 10px; display: grid; gap: 2px; box-shadow: 0 24px 48px -16px rgb(0 0 0 / .35); }
.menu-in a { padding: 11px 12px; border-radius: 8px; text-decoration: none; }
.menu-in a:hover { background: var(--paper-2); }
.menu-in .btn { margin-top: 8px; }

/* Первый экран */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 56px); padding-left: var(--pad); min-height: calc(100svh - 104px); align-items: stretch; }
.hero-text { padding: clamp(40px, 6vh, 88px) 0 48px; align-self: center; }
.hero h1 { font-size: clamp(2.6rem, 1.1rem + 4.1vw, 5.1rem); line-height: .98; letter-spacing: -0.035em; font-weight: 640; margin-bottom: .45em; }
.lead { font-size: clamp(1.06rem, 1rem + .3vw, 1.25rem); line-height: 1.5; max-width: 34em; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 28px 0 30px; }
.link-down { font-weight: 600; font-family: var(--f-d); letter-spacing: -0.01em; display: inline-flex; gap: 8px; align-items: center; }
.link-down::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.hero-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .9375rem; }
.hero-facts li { display: flex; gap: 12px; align-items: center; }
.hero-facts li::before { content: ""; flex: none; width: 22px; height: 8px; border-radius: 2px; background: var(--lam); box-shadow: 0 -5px 0 -2px color-mix(in oklab, var(--lam) 60%, var(--paper)); }

.stage { position: relative; display: flex; flex-direction: column; --pos: .45; }
.wall { position: relative; flex: 1; min-height: 560px; background-color: var(--wall);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 40% 30%, rgb(255 255 255 / .55), transparent 60%);
  border-bottom-left-radius: 28px; overflow: hidden; }
.opening { position: absolute; left: 27%; top: 17%; width: 44%; height: 66%; }
.box { position: absolute; left: -7%; right: -7%; bottom: 100%; height: 13%; min-height: 44px; background: var(--lam); border-radius: 6px 6px 3px 3px; box-shadow: inset 0 3px 0 rgb(255 255 255 / .16), inset 0 -6px 0 rgb(0 0 0 / .2), 0 26px 30px -18px rgb(0 0 0 / .45); }
.box-cap { position: absolute; inset: 22% 4% 30%; border-radius: 3px; background: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(0 0 0 / .08)); }
.guide { position: absolute; top: 0; bottom: -2%; width: 6.5%; background: linear-gradient(90deg, #8E9290, #C5C8C6 40%, #9DA09E); border-radius: 0 0 3px 3px; z-index: 3; box-shadow: 0 10px 16px -8px rgb(0 0 0 / .35); }
.guide-l { left: -3.5%; } .guide-r { right: -3.5%; }
.glass { position: absolute; inset: 0; border-radius: 2px; background: var(--paper); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), inset 14px 0 18px -10px rgb(0 0 0 / .22), inset 0 16px 18px -10px rgb(0 0 0 / .28); padding: 6% 7% 7%; }
.room { position: absolute; inset: 6% 7% 7%; overflow: hidden; border-radius: 1px; background:
  radial-gradient(70% 55% at 50% 22%, color-mix(in oklab, var(--glow) 90%, white), transparent 70%),
  linear-gradient(180deg, #E9B978, #B88552 70%, #7A5638); transition: filter .9s var(--ease), background .9s; }
.stage[data-power="off"] .room { filter: brightness(.32) saturate(.4) hue-rotate(190deg); }
.lamp { position: absolute; left: 50%; top: 0; width: 26%; height: 18%; translate: -50% 0; background: linear-gradient(#5b4030, #3c2a20) top / 3px 52% no-repeat; }
.lamp::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 50%; background: #3c2a20; border-radius: 50% 50% 6px 6px / 90% 90% 6px 6px; }
.lamp-light { position: absolute; left: 50%; top: 18%; width: 60%; height: 50%; translate: -50% 0; background: radial-gradient(50% 40% at 50% 0, rgb(255 236 200 / .85), transparent 70%); }
.stage[data-power="off"] .lamp-light { opacity: 0; }
.sill { position: absolute; left: -2%; right: -2%; bottom: 0; height: 6%; background: #6E4E36; }
.frame-v { position: absolute; left: 50%; top: 6%; bottom: 7%; width: 5%; translate: -50% 0; background: var(--paper); box-shadow: 0 0 0 1px rgb(0 0 0 / .06); }
.frame-h { position: absolute; left: 7%; right: 7%; top: 6%; height: 0; }
.curtain { --rh: clamp(10px, 1.05vw, 15px); position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: calc(var(--pos) * (100% - 14px) + 14px); box-shadow: 0 12px 16px -10px rgb(0 0 0 / .45); }
.endbar { position: absolute; left: -1px; right: -1px; bottom: 0; height: 14px; background: linear-gradient(180deg, var(--rib-hi), var(--lam) 30%, var(--deep)); border-radius: 0 0 3px 3px; }
.endbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 0 0 3px 3px; background: #2a2a2a; opacity: .7; }
.crank { position: absolute; left: -15%; top: 0; height: 66%; width: 34px; z-index: 4; opacity: 0; translate: 0 -12px; transition: opacity .5s var(--ease), translate .5s var(--ease); pointer-events: none; }
.stage[data-power="off"] .crank { opacity: 1; translate: 0 0; }
.crank-rod { position: absolute; left: 50%; top: 0; bottom: 26px; width: 8px; translate: -50% 0; background: linear-gradient(90deg, #6f7371, #d6d9d7 45%, #7d8180); border-radius: 4px; box-shadow: 0 6px 10px -4px rgb(0 0 0 / .35); }
.crank-handle { position: absolute; left: 50%; bottom: 0; width: 34px; height: 34px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f2ee, #9a9d9b); box-shadow: 0 4px 8px rgb(0 0 0 / .35); }
.crank-handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 10px; translate: 0 -50%; border-radius: 4px; background: var(--deep); transform-origin: 0 50%; rotate: var(--crank, 0deg); }

.switch { position: absolute; left: 7%; top: 47%; width: 74px; display: grid; justify-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.switch-key { width: 64px; height: 64px; border-radius: 10px; background: linear-gradient(160deg, #fff, #e3e3de); box-shadow: 0 10px 18px -8px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(0 0 0 / .06); position: relative; }
.switch-key::before { content: ""; position: absolute; inset: 11px 15px; border-radius: 6px; background: linear-gradient(180deg, #fafaf7 0 50%, #d8d8d2 50%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); transition: background .25s; }
.switch[aria-pressed="false"] .switch-key::before { background: linear-gradient(180deg, #d8d8d2 0 50%, #fafaf7 50%); }
.switch-key::after { content: ""; position: absolute; right: 7px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--led-on); box-shadow: 0 0 6px var(--led-on); }
.switch[aria-pressed="false"] .switch-key::after { background: #9a9a96; box-shadow: none; }
.switch-cap { font-size: .8125rem; line-height: 1.2; text-align: center; font-weight: 600; }

.remote { position: absolute; right: 8%; bottom: 7%; z-index: 6; width: clamp(96px, 8.6vw, 124px); padding: 22px 0 26px; display: grid; justify-items: center; gap: 14px; border-radius: 60px 60px 38px 38px; background: linear-gradient(165deg, #ffffff, #e6e6e1 60%, #d5d5cf); box-shadow: 0 34px 50px -22px rgb(0 0 0 / .55), 0 4px 10px rgb(0 0 0 / .12), inset 0 -8px 14px rgb(0 0 0 / .06), inset 0 2px 0 #fff; rotate: -7deg; }
.led { width: 10px; height: 10px; border-radius: 50%; background: var(--led-on); box-shadow: 0 0 10px 2px color-mix(in oklab, var(--led-on) 70%, transparent); margin-bottom: 4px; }
.stage[data-moving] .led { animation: blink .5s steps(2) infinite; }
.stage[data-power="off"] .led { background: #b9b9b4; box-shadow: none; }
.stage[data-power="off"][data-nopower] .led { background: var(--led-off); box-shadow: 0 0 10px 2px color-mix(in oklab, var(--led-off) 60%, transparent); }
@keyframes blink { 50% { opacity: .25; } }
.rb { width: 64%; aspect-ratio: 1; border: 0; padding: 0; cursor: pointer; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 38% 30%, color-mix(in oklab, var(--lam) 70%, white), var(--lam) 55%, var(--deep)); box-shadow: 0 6px 10px -4px rgb(0 0 0 / .45), inset 0 -3px 4px rgb(0 0 0 / .25); transition: transform .12s, box-shadow .12s; }
.rb svg { width: 52%; fill: var(--lam-ink); }
.rb-stop { width: 46%; }
.rb:active, .rb.is-press { transform: translateY(2px) scale(.97); box-shadow: 0 2px 4px -2px rgb(0 0 0 / .5), inset 0 3px 6px rgb(0 0 0 / .35); }
.stage[data-power="off"] .rb { cursor: default; }
.stage[data-nopower] .remote { animation: shake .4s; }
@keyframes shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

.stage-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; padding: 16px var(--pad) 18px 22px; background: var(--paper); min-height: 76px; }
.state { margin: 0; font-size: .9375rem; max-width: 46em; }
.state b { font-family: var(--f-d); font-weight: 650; }
.btn-crank { touch-action: none; user-select: none; -webkit-user-select: none; }

/* Разделы */
.sec { padding: clamp(60px, 7vw, 108px) var(--pad); }
.sec-head { max-width: 50rem; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head h2 { margin-bottom: .45em; }
.sec-head > p { font-size: 1.125rem; max-width: 40em; }
.quote, .quote-big { font-family: var(--f-d); letter-spacing: -0.01em; }
.quote { font-size: 1rem; }
.quote span, .quote-big span { display: block; font-family: var(--f-t); font-size: .8125rem; letter-spacing: 0; opacity: .75; margin-top: 4px; }
.quote-big { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); line-height: 1.3; font-weight: 500; margin: .2em 0 1em; max-width: 30em; }

/* Если не слушается */
.cases { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.parts { margin: 0; position: sticky; top: 110px; background: var(--wall); border-radius: 22px; padding: 26px 22px 18px; }
.parts-svg { width: 100%; height: auto; overflow: visible; }
.p-lam { fill: var(--lam); } .p-hi { fill: var(--rib-hi); } .p-lo { fill: var(--rib-lo); }
.p-metal { fill: var(--metal); } .p-paper { fill: var(--paper); } .p-dark { fill: var(--deep); }
.p-signal { fill: color-mix(in oklab, var(--lam) 22%, var(--paper)); }
.p-stroke { stroke: color-mix(in oklab, var(--ink) 25%, transparent); stroke-width: 1.5; }
.part { transition: opacity .45s var(--ease); }
.part :is(rect, circle) { transition: stroke-width .3s; stroke: var(--led-off); stroke-width: 0; }
.parts[data-focus] .part { opacity: .3; }
.parts[data-focus="all"] .part { opacity: 1; }
.parts .part.is-on { opacity: 1; }
.parts .part.is-on :is(rect, circle) { stroke-width: 3; }
.parts-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: .9rem; line-height: 1.25; }
.parts-key li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: color-mix(in oklab, var(--paper) 55%, transparent); transition: background-color .3s, color .3s, opacity .3s; }
.parts[data-focus] .parts-key li { opacity: .78; }
.parts .parts-key li.is-on, .parts[data-focus="all"] .parts-key li { opacity: 1; background: var(--lam); color: var(--lam-ink); }
.pk-m { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--led-off); opacity: 0; transition: opacity .3s; }
.parts-key li.is-on .pk-m, .parts[data-focus="all"] .pk-m { opacity: 1; }
.case-list { display: grid; gap: 4px; }
.case > summary { --rh: 14px; list-style: none; cursor: pointer; color: var(--lam-ink); padding: 18px 64px 18px 22px; border-radius: 6px; display: grid; gap: 2px; position: relative; transition: filter .2s; }
.case > summary::-webkit-details-marker { display: none; }
.case > summary:hover { filter: brightness(1.1); }
.case > summary::after, .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat; transition: rotate .3s var(--ease); }
.case[open] > summary::after, .faq details[open] summary::after { rotate: 45deg; }
.case-t { font: 600 1.25rem/1.2 var(--f-d); letter-spacing: -0.015em; }
.case-s { font-size: .875rem; opacity: .8; }
.case-b { padding: 22px 24px 18px; background: var(--paper-2); border-radius: 0 0 8px 8px; margin: 0 6px 8px; }
.case-b p:last-child { margin-bottom: 0; }
.case-b .quote { padding-bottom: .6em; }
.steps3 { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps3 li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.steps3 li::before { content: counter(s); font: 650 1rem/34px var(--f-d); text-align: center; height: 34px; border-radius: 8px; background: var(--lam); color: var(--lam-ink); }

/* Что выдержит */
.guard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.pull { display: grid; gap: 16px; justify-items: start; }
.pull-frame { position: relative; width: 100%; aspect-ratio: 5 / 4; background: var(--wall); border-radius: 18px; padding: 15% 13% 12%; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .6); }
.pull-frame::before { content: ""; position: absolute; left: 9%; right: 9%; top: 6%; height: 10%; border-radius: 5px; background: var(--lam); box-shadow: inset 0 -5px 0 rgb(0 0 0 / .22), 0 16px 18px -12px rgb(0 0 0 / .4); }
.pull-frame::after { content: ""; position: absolute; left: 9%; right: 9%; top: 16%; bottom: 10%; pointer-events: none; background: linear-gradient(90deg, #9da09e, #c9ccca 3.2%, transparent 3.2% 96.8%, #c9ccca 96.8%, #9da09e); border-radius: 0 0 4px 4px; }
.pull-curtain { --rh: 16px; position: relative; height: 100%; transform: translateY(calc(var(--lift, 0) * -1px)); transition: transform .5s var(--ease); touch-action: none; }
.pull-curtain.is-drag { transition: none; }
.pull-bar { position: absolute; left: -1px; right: -1px; bottom: 0; height: 18%; background: linear-gradient(180deg, var(--rib-hi), var(--lam) 25%, var(--deep)); border-radius: 0 0 4px 4px; cursor: grab; display: grid; place-items: center; }
.pull-grip { width: 34%; height: 34%; border-radius: 6px; background: var(--paper); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 4px 10px rgb(0 0 0 / .3); }
.bolt { position: absolute; bottom: 17%; width: 5%; height: 8%; border-radius: 3px; background: var(--led-off); opacity: 0; transition: opacity .3s; z-index: 2; box-shadow: 0 0 12px var(--led-off); }
.bolt-l { left: 8.6%; } .bolt-r { right: 8.6%; }
.pull.is-held .bolt { opacity: 1; }
.pull-msg { margin: 0; font-size: 1rem; min-height: 3.2em; max-width: 30em; }
.pull-msg b { font-family: var(--f-d); }
.cls { width: 100%; border-collapse: collapse; font-size: 1rem; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.cls caption { text-align: left; font-size: .875rem; padding-bottom: 10px; opacity: .85; }
.cls th, .cls td { text-align: left; padding: 12px 10px; vertical-align: top; }
.cls thead th { font-size: .8125rem; font-weight: 600; opacity: .85; }
.cls tbody tr { background: color-mix(in oklab, var(--lam-ink) 9%, transparent); }
.cls tbody tr:nth-child(2) { background: color-mix(in oklab, var(--lam-ink) 18%, transparent); }
.cls tbody tr + tr { border-top: 3px solid transparent; background-clip: padding-box; }
.cls tbody th { font: 650 1.2rem/1.2 var(--f-d); white-space: nowrap; }
.cls td:last-child { white-space: nowrap; }
.profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
.prof { background: color-mix(in oklab, var(--lam-ink) 10%, transparent); border-radius: 14px; padding: 18px; }
.prof svg { width: 100%; max-width: 160px; height: auto; margin-bottom: 12px; }
.pr-shell { fill: var(--metal); } .pr-foam { fill: #E9D9A8; } .pr-hollow { fill: var(--deep); }
.prof h3 { margin-bottom: .35em; }
.prof p { font-size: .9375rem; margin: 0; }
.fine h3 { margin-bottom: .4em; }
.fine p { font-size: .9375rem; line-height: 1.5; max-width: 44em; margin-bottom: 0; }

/* Цена */
.calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(28px, 5vw, 80px); align-items: start; }
.calc-base { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; position: sticky; top: 110px; }
.pw { --rh: 13px; position: relative; width: 220px; height: 330px; margin: 34px 44px 36px 8px; }
.pw-glass { position: absolute; inset: 0; background: var(--wall); border-radius: 2px; box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 8px rgb(0 0 0 / .08); }
.pw-box { position: absolute; left: -10px; right: -10px; bottom: 100%; height: 26px; border-radius: 5px 5px 2px 2px; background: var(--lam); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .2); }
.pw-motor { position: absolute; right: 8px; top: 7px; width: 42px; height: 12px; border-radius: 6px; background: var(--paper); opacity: 0; transition: opacity .35s; }
.pw-curtain { position: absolute; left: 0; right: 0; top: 0; height: 64%; background-color: var(--lam); background-image: repeating-linear-gradient(180deg, var(--rib-hi) 0 1px, transparent 1px calc(var(--rh) - 3px), var(--rib-lo) calc(var(--rh) - 3px) var(--rh)), repeating-linear-gradient(180deg, rgb(255 255 255 / .08) 0, rgb(0 0 0 / .07) var(--rh)); transition: background-color .4s; }
.pw-bar { position: absolute; left: -1px; right: -1px; bottom: 0; height: 12px; background: linear-gradient(180deg, var(--rib-hi), var(--deep)); border-radius: 0 0 3px 3px; display: grid; place-items: center; }
.pw-lock { width: 18px; height: 7px; border-radius: 2px; background: var(--paper); opacity: 0; transition: opacity .3s; }
.pw-guide { position: absolute; top: 0; bottom: -4px; width: 10px; background: linear-gradient(90deg, #8e9290, #c6c9c7, #9a9d9b); border-radius: 0 0 2px 2px; }
.pw-l { left: -7px; } .pw-r { right: -7px; }
.pw-bolt { position: absolute; left: 2px; right: 2px; top: calc(64% - 14px); height: 10px; border-radius: 2px; background: var(--led-off); opacity: 0; transition: opacity .3s; }
.pw-crank { position: absolute; left: -26px; top: 0; height: 58%; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #7a7e7c, #d0d3d1); opacity: 0; transition: opacity .35s; }
.pw-crank::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f2ee, #9a9d9b); }
.pw-remote { position: absolute; right: -40px; bottom: 26px; width: 28px; height: 64px; padding: 8px 0; border-radius: 14px 14px 10px 10px; background: linear-gradient(165deg, #fff, #dcdcd6); box-shadow: 0 10px 16px -8px rgb(0 0 0 / .45); display: grid; justify-items: center; align-content: space-between; opacity: 0; rotate: -6deg; transition: opacity .35s; }
.pw-remote span { width: 12px; height: 12px; border-radius: 50%; background: var(--lam); }
.pw-remote span:nth-child(2) { width: 8px; height: 8px; }
.pw[data-prof] { --rh: 15px; }
.pw[data-prof] .pw-curtain { background-image: repeating-linear-gradient(180deg, var(--rib-hi) 0 2px, transparent 2px calc(var(--rh) - 5px), var(--rib-lo) calc(var(--rh) - 5px) var(--rh)), linear-gradient(90deg, rgb(0 0 0 / .1), transparent 20% 80%, rgb(0 0 0 / .1)); }
.pw[data-lock] .pw-lock, .pw[data-lock] .pw-bolt, .pw[data-motor] .pw-motor, .pw[data-motor] .pw-remote, .pw[data-crank] .pw-crank { opacity: 1; }
.pw[data-color] .pw-curtain { background-color: #0E4C92; --rib-hi: #4a7cb6; --rib-lo: #0a3466; }
.pw-dim { position: absolute; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; }
.pw-w { left: 0; right: 0; bottom: -28px; text-align: center; }
.pw-h { right: -12px; top: 50%; translate: 100% -50%; writing-mode: vertical-rl; rotate: 180deg; }
.calc-base h3 { font-size: 1.45rem; margin-bottom: .4em; }
.calc-base > div:last-child { padding-top: 14px; }
.calc-sum { margin-top: 14px; }
.calc-sum-l { font-size: .875rem; color: var(--soft); }
.calc-sum output { font: 650 1.6rem var(--f-d); letter-spacing: -0.02em; }
.calc-opts { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.calc-opts legend { font: 600 .875rem var(--f-t); padding: 0 0 12px; color: var(--soft); }
.opt { --rh: 14px; display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "c t p" "c d p"; column-gap: 14px; align-items: center; padding: 16px 20px; border-radius: 6px; background: var(--paper-2); cursor: pointer; transition: background-color .25s, color .25s; }
.opt input { grid-area: c; width: 22px; height: 22px; margin: 0; accent-color: var(--lam-ink); }
.opt-t { grid-area: t; font: 600 1.075rem/1.25 var(--f-d); letter-spacing: -0.01em; }
.opt-p { grid-area: p; font: 600 1.075rem var(--f-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-d { grid-area: d; font-size: .875rem; opacity: .8; }
.opt:has(input:checked) { color: var(--lam-ink); }
.opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.opt:hover:not(:has(input:disabled)) { filter: brightness(.97); }
.calc-total { grid-column: 2; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding-top: 12px; }
.calc-total p { margin: 0; font: 600 1.25rem var(--f-d); }
.calc-total output { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-left: 6px; }
.calc > .small { grid-column: 2; }

/* Где закрываем */
.openings { --k: 1px; position: relative; display: flex; justify-content: space-between; gap: 28px clamp(16px, 2.4vw, 40px); margin-bottom: 64px; }
.openings::before { content: ""; position: absolute; left: 0; right: 0; top: calc(256 * var(--k)); height: 6px; border-radius: 3px; background: var(--deep); }
.op-stage { height: calc(256 * var(--k)); display: flex; align-items: flex-end; margin-bottom: 22px; }
.man { width: calc(60 * var(--k)); height: calc(175 * var(--k)); fill: var(--deep); }
.op-man { --wcol: 60; }
.op { width: calc(var(--k) * max(var(--wcol, 140), 140)); }
.op-win { --wcol: 100; } .op-door { --wcol: 90; } .op-gar { --wcol: 250; } .op-shop { --wcol: 300; } .op-flat { --wcol: 60; }
.op-hole { position: relative; width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); background: var(--wall); border-radius: 3px 3px 0 0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05); }
.op-hole::before { content: ""; position: absolute; left: -6%; right: -6%; top: -14px; height: 14px; border-radius: 4px; background: var(--lam); }
.op-hole span { --rh: 9px; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--p) * 100%); box-shadow: inset 0 -5px 0 var(--deep); }
.op h3 { margin-bottom: .3em; font-size: 1.1rem; }
.op p { font-size: .9375rem; margin: 0; }
.ral { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 48px; align-items: center; }
.ral-t { margin: 0; font-size: 1.125rem; }
.ral .small { grid-column: 2; margin: 0; }
.ral-fan { display: flex; padding-top: 18px; }
.sw { --c: #000; flex: 1 1 0; min-width: 0; margin-left: -4px; padding: 0; border: 0; background: var(--paper); border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); box-shadow: 0 10px 22px -12px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(0 0 0 / .06); transform: rotate(var(--r)) translateY(0); transform-origin: 50% 120%; transition: transform .35s var(--ease); overflow: hidden; }
.sw:first-child { margin-left: 0; }
.sw:nth-child(1) { --r: -4.5deg; } .sw:nth-child(2) { --r: -3deg; } .sw:nth-child(3) { --r: -1.5deg; } .sw:nth-child(4) { --r: 0deg; } .sw:nth-child(5) { --r: 1.5deg; } .sw:nth-child(6) { --r: 3deg; } .sw:nth-child(7) { --r: 4.5deg; }
.sw:hover { transform: rotate(var(--r)) translateY(-6px); }
.sw[aria-checked="true"] { transform: rotate(0deg) translateY(-18px); z-index: 2; box-shadow: 0 22px 34px -14px rgb(0 0 0 / .55), inset 0 0 0 2px var(--ink); }
.sw-c { --rh: 10px; display: block; height: 96px; }
.sw[data-ral="8017"] .sw-c { --lam: #45322E; } .sw[data-ral="7016"] .sw-c { --lam: #383E42; } .sw[data-ral="6005"] .sw-c { --lam: #17463A; } .sw[data-ral="3005"] .sw-c { --lam: #5E2129; } .sw[data-ral="9006"] .sw-c { --lam: #A5A8A6; } .sw[data-ral="1015"] .sw-c { --lam: #E3CFB1; } .sw[data-ral="9016"] .sw-c { --lam: #E6E7E2; }
.sw-c { --rib-hi: color-mix(in oklab, var(--lam) 78%, white); --rib-lo: color-mix(in oklab, var(--lam) 70%, black); }
.sw-n { display: block; padding: 10px 12px 12px; font-size: .78rem; line-height: 1.25; }

/* Как пройдёт */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-width: 1080px; }
.how-i { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 7fr) 168px; align-items: start; gap: 20px 32px; padding: 26px 28px; border-radius: 6px; background: color-mix(in oklab, var(--lam-ink) 9%, transparent); box-shadow: inset 0 2px 0 color-mix(in oklab, var(--lam-ink) 14%, transparent), inset 0 -3px 0 rgb(0 0 0 / .18); }
.how-n { font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1 var(--f-d); letter-spacing: -0.03em; text-transform: lowercase; opacity: .9; }
.how-i h3 { font-size: 1.3rem; margin-bottom: .4em; }
.how-i > .mini { grid-column: 3; grid-row: 1; justify-self: end; }
.mini { --rh: 9px; position: relative; display: block; width: 160px; height: 140px; border-radius: 12px; background: var(--wall); overflow: hidden; box-shadow: 0 14px 24px -16px rgb(0 0 0 / .6); }
.mini i { position: absolute; display: block; }
.m-box { left: 18%; right: 18%; top: 12%; height: 12%; border-radius: 4px; background: var(--lam); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .22); }
.m-g { top: 24%; bottom: 10%; width: 6%; background: linear-gradient(90deg, #8e9290, #c6c9c7); border-radius: 0 0 2px 2px; }
.m-gl { left: 21%; } .m-gr { right: 21%; }
.m-cur { left: 27%; right: 27%; top: 24%; height: 0; background-color: var(--lam); background-image: repeating-linear-gradient(180deg, var(--rib-hi) 0 1px, transparent 1px calc(var(--rh) - 2px), var(--rib-lo) calc(var(--rh) - 2px) var(--rh)); box-shadow: inset 0 -5px 0 var(--deep); }
.m-x { display: none; }
.mini[data-s="zamer"] .m-box, .mini[data-s="zamer"] .m-g, .mini[data-s="zamer"] .m-cur { display: none; }
.mini[data-s="zamer"] { background: var(--wall) linear-gradient(var(--paper), var(--paper)) 50% 55% / 52% 66% no-repeat; }
.mini[data-s="zamer"] .m-x { display: block; left: 16%; right: 16%; top: 46%; height: 11%; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--deep) 0 1.5px, transparent 1.5px 8px) 0 0 / 100% 45% no-repeat, #E9C46A; box-shadow: 0 4px 8px rgb(0 0 0 / .25); }
.mini[data-s="zamer"] .m-x::after { content: ""; position: absolute; right: -9%; top: -20%; width: 20%; height: 150%; border-radius: 5px; background: var(--deep); }
.mini[data-s="dogovor"] .m-cur { height: 46%; }
.mini[data-s="dogovor"] .m-x { display: block; right: 7%; bottom: 7%; width: 34%; height: 48%; border-radius: 3px; background: repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in oklab, var(--ink) 35%, transparent) 9px 11px) 18% 14% / 64% 70% no-repeat, var(--paper); box-shadow: 0 6px 12px -4px rgb(0 0 0 / .4); rotate: 6deg; }
.mini[data-s="montazh"] .m-cur { height: 28%; }
.mini[data-s="montazh"] .m-x { display: block; left: 30%; right: 30%; top: 3%; height: 7%; border-radius: 3px; background: radial-gradient(circle, var(--led-on) 0 30%, transparent 34%) 50% 50% / 22% 100% no-repeat, #E9C46A; box-shadow: 0 3px 6px rgb(0 0 0 / .3); }
.mini[data-s="pokaz"] .m-cur { height: 38%; }
.mini[data-s="pokaz"] .m-x { display: block; left: 9%; top: 24%; width: 4%; height: 42%; border-radius: 3px; background: linear-gradient(90deg, #7a7e7c, #d0d3d1); }
.mini[data-s="pokaz"] .m-x::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 16px; height: 16px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f2ee, #9a9d9b); }
.mini[data-s="priemka"] .m-cur { height: 66%; }
.mini[data-s="priemka"] .m-x { display: block; left: 21%; right: 21%; top: 78%; height: 6%; background: linear-gradient(90deg, var(--led-off) 0 6%, transparent 6% 94%, var(--led-off) 94%); }
.how-i p { margin: 0; max-width: 40em; }
.check { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; }
.check label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 10px 12px; border-radius: 8px; cursor: pointer; background: color-mix(in oklab, var(--lam-ink) 8%, transparent); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--paper); }
.check label:has(input:checked) span { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .75; }
.check-done { margin: 12px 0 0; font-family: var(--f-d); font-weight: 600; min-height: 1.5em; }

/* Вопросы */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); max-width: 1180px; }
.faq details { border-top: 2px solid color-mix(in oklab, var(--ink) 14%, transparent); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 22px 48px 22px 0; font: 600 1.2rem/1.3 var(--f-d); letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { right: 4px; }
.faq details p { padding: 0 0 22px; margin: 0; max-width: 38em; }

/* Низ */
.close { padding: clamp(80px, 10vw, 150px) var(--pad); }
.close-in { max-width: 54rem; }
.close h2 { font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); margin-bottom: .5em; }
.close p { font-size: 1.125rem; max-width: 36em; }
.close .btn { margin: 14px 0 22px; }
.close-tel { font-size: .9375rem; opacity: .85; text-decoration: underline dotted 1.5px; text-underline-offset: .25em; }
.foot { background: var(--paper-2); padding: 44px var(--pad) 52px; font-size: .9rem; }
.foot-in { display: grid; gap: 4px; max-width: 60rem; }
.foot-brand { font: 650 1.1rem var(--f-d); letter-spacing: -0.02em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.foot-dev { color: var(--soft); }

/* Окно заявки */
.dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -24px rgb(0 0 0 / .55); }
.dlg::backdrop { background: color-mix(in oklab, var(--deep) 70%, transparent); backdrop-filter: blur(3px); }
.dlg[open] { animation: dlg-in .4s var(--ease); }
@keyframes dlg-in { from { opacity: 0; translate: 0 18px; } }
.dlg-form { position: relative; padding: 0 30px 30px; }
.dlg-demo { --rh: 12px; margin: 0 -30px 24px; padding: 12px 64px 12px 30px; font-size: .875rem; font-weight: 600; color: var(--lam-ink); background-color: var(--lam); background-image: repeating-linear-gradient(180deg, var(--rib-hi) 0 1px, transparent 1px calc(var(--rh) - 3px), var(--rib-lo) calc(var(--rh) - 3px) var(--rh)); border-radius: 22px 22px 0 0; }
.dlg-x { position: absolute; right: 10px; top: 4px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--lam-ink); cursor: pointer; }
.dlg-x::before, .dlg-x::after { content: ""; position: absolute; left: 11px; right: 11px; top: 50%; height: 2.5px; margin-top: -1px; border-radius: 2px; background: currentColor; rotate: 45deg; }
.dlg-x::after { rotate: -45deg; }
.dlg-x:hover { background: rgb(255 255 255 / .12); }
.dlg h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: .35em; }
.dlg-sub { font-size: .9375rem; }
.fld { display: grid; gap: 6px; margin-bottom: 14px; font-size: .9rem; font-weight: 600; }
.fld input, .fld select { font: 400 1rem var(--f-t); color: var(--ink); padding: 13px 14px; border-radius: 10px; border: 2px solid color-mix(in oklab, var(--ink) 22%, var(--paper)); background: #fff; width: 100%; }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--led-off) 45%, transparent); }
.fld input::placeholder { color: color-mix(in oklab, var(--ink) 55%, #fff); }
.agree { display: grid; gap: 10px; margin: 18px 0 20px; font-size: .875rem; line-height: 1.45; }
.ag { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.ag input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--ink); }
.ag small { display: block; opacity: .75; margin-top: 2px; font-size: .8125rem; }
.ag-all { font-weight: 600; }
.dlg .btn-big { width: 100%; }
.dlg-hint { font-size: .8125rem; color: var(--soft); text-align: center; margin: 10px 0 0; }
.dlg-done { padding: 6px 0 4px; }
.dlg-done .btn { margin-top: 10px; }

/* Правовые страницы */
.doc-page { background: var(--paper); }
.doc-head { padding: 18px var(--pad); }
.doc-back { font-weight: 600; text-decoration: none; }
.doc { max-width: 46rem; margin: 0 auto; padding: 12px var(--gut) 64px; }
.doc h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.08; margin: .4em 0 .3em; }
.doc h2 { font-size: 1.3rem; line-height: 1.25; margin: 1.8em 0 .5em; }
.doc-note { background: var(--paper-2); padding: 14px 18px; border-radius: 12px; font-size: .9375rem; }
.doc-ver { color: var(--soft); font-size: .9375rem; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: .4em; }
mark.ask { background: color-mix(in oklab, var(--led-off) 30%, transparent); color: inherit; padding: 0 .2em; border-radius: 3px; text-decoration: none; }
.doc-foot { padding: 24px var(--pad) 40px; font-size: .875rem; color: var(--soft); background: var(--paper-2); }
.e404 { min-height: 70vh; display: grid; align-content: center; gap: 16px; padding: 64px var(--pad); }
.e404 h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); line-height: 1; }

/* Планшет и телефон */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu { display: block; }
  .top-cta { margin-left: auto; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-right: var(--gut); padding-left: var(--gut); min-height: 0; gap: 8px; }
  .hero-text { padding: 36px 0 12px; }
  .hero-act { margin: 22px 0 22px; }
  .stage { margin: 0 calc(var(--gut) * -1); }
  .wall { min-height: 0; aspect-ratio: 1 / 1.02; border-radius: 0; }
  .stage-bar { padding: 14px var(--gut) 16px; }
  .cases, .guard, .calc { grid-template-columns: 1fr; }
  .parts { position: relative; top: 0; max-width: 460px; }
  .calc-base { position: static; }
  .calc-total, .calc > .small { grid-column: 1; }
  .ral { grid-template-columns: 1fr; }
  .ral .small { grid-column: 1; }
  .faq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .top-in { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: .9rem; }
  .top-cta { padding: 10px 12px 11px; font-size: .875rem; }
  .hero-facts { display: none; }
  .demo-bar { font-size: .75rem; padding: 6px var(--gut); }
  .db-more { display: none; }
  .l-long { display: none; } .l-short { display: inline; }
  .hero-text { display: contents; }
  .hero h1 { order: 1; font-size: clamp(2.1rem, 1.2rem + 4.6vw, 2.6rem); margin: 26px 0 16px; }
  .stage { order: 2; }
  .hero .lead { order: 3; margin-top: 18px; }
  .hero-act { order: 4; margin: 6px 0 36px; }
  .hero-text .lead { font-size: 1.02rem; }
  .opening { left: 22%; top: 18%; width: 52%; height: 62%; }
  .switch { left: 3.5%; top: 40%; width: 60px; }
  .switch-key { width: 50px; height: 50px; }
  .switch-key::before { inset: 9px 12px; }
  .switch-cap { font-size: .72rem; }
  .remote { right: 4%; bottom: 4%; width: 78px; padding: 14px 0 18px; gap: 10px; }
  .led { width: 8px; height: 8px; margin-bottom: 0; }
  .crank { left: -19%; height: 60%; }
  .switch { top: 66%; }
  .stage-bar { flex-direction: column; align-items: stretch; }
  .btn-crank { width: 100%; }
  .sec-head > p { font-size: 1.02rem; }
  .parts { display: none; }
  .case > summary { padding: 16px 56px 16px 18px; }
  .case-t { font-size: 1.1rem; }
  .case-b { padding: 18px 18px 14px; margin: 0 3px 8px; }
  .profiles { grid-template-columns: 1fr; }
  .cls th, .cls td { padding: 10px 8px; font-size: .9375rem; }
  .calc-base { grid-template-columns: auto 1fr; gap: 12px; }
  .pw { --rh: 9px; width: 104px; height: 156px; margin: 30px 34px 30px 10px; }
  .pw-remote { right: -30px; width: 20px; height: 46px; padding: 5px 0; }
  .pw-remote span { width: 8px; height: 8px; } .pw-remote span:nth-child(2) { width: 6px; height: 6px; }
  .pw-crank { left: -18px; }
  .pw-h { display: none; }
  .opt { grid-template-columns: 24px 1fr; grid-template-areas: "c t" "c d" "c p"; padding: 14px 16px; }
  .opt-p { margin-top: 4px; }
  .openings { --k: .5px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 26px 18px; }
  .openings::before { display: none; }
  .op { width: auto; }
  .op-stage { box-shadow: inset 0 -5px 0 var(--deep); padding-bottom: 5px; height: calc(256 * var(--k) + 5px); margin-bottom: 14px; }
  .ral-fan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 4px; }
  .sw { margin-left: 0; transform: none; }
  .sw:hover { transform: none; }
  .sw[aria-checked="true"] { transform: translateY(-6px); }
  .sw-c { height: 54px; }
  .sw-n { padding: 7px 8px 9px; font-size: .75rem; }
  .how-i { grid-template-columns: 1fr auto; padding: 22px 18px; gap: 10px 14px; }
  .how-i > div { grid-column: 1 / -1; }
  .how-i > .mini { grid-column: 2; grid-row: 1; width: 116px; height: 102px; }
  .dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .dlg-form { padding: 0 20px 28px; }
  .dlg-demo { margin: 0 -20px 20px; padding-left: 20px; border-radius: 0; }
}