/* Distillo: светлая «паровая» страница, тёмная сцена с аппаратом, медь и патина */

@font-face{font-family:"Unbounded";src:url(fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";src:url(fonts/unbounded-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(fonts/onest-cyrillic-wght-normal.woff2) format("woff2");font-weight:100 900;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-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --steam:#EBF0EC;
  --steam-2:#DFE7E1;
  --ink:#112B27;
  --bottle:#0B211E;
  --bottle-2:#12312C;
  --patina:#3A9A85;
  --patina-d:#1D6A59;
  --copper:#BF5F29;
  --copper-d:#97441A;
  --amber:#E7AE4C;
  --alarm:#D2392A;
  --mute:#4F6862;
  --line:rgba(17,43,39,.18);
  --f-display:"Unbounded",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--steam);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img,svg,canvas{max-width:100%}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(1.65rem,3.3vw,2.7rem);line-height:1.1}
h3{font-size:1.15rem;line-height:1.25}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px;border-radius:4px}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}

/* шапка */
.top{display:flex;align-items:center;gap:20px 36px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:22px var(--gut)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.02em}
.nav{display:flex;gap:6px 28px;flex-wrap:wrap;margin-left:auto;font-weight:500;font-size:.97rem}
.nav a{text-decoration:none;padding:6px 0;color:var(--mute)}
.nav a:hover{color:var(--ink)}
.tg-top{font-weight:600;font-size:.97rem;color:var(--copper-d);text-underline-offset:5px;padding:6px 0}
@media (max-width:760px){.nav{display:none}.tg-top{margin-left:auto}}

/* кнопки */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn-main{background:var(--ink);color:var(--steam)}
.btn-main:hover{background:var(--copper-d)}
.btn-text{padding-inline:6px;color:var(--copper-d);text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:2px}
.btn-text:hover{color:var(--ink)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--steam)}
.btn-tg{background:var(--amber);color:var(--bottle);font-size:1.15rem;padding:16px 32px}
.btn-tg:hover{background:#F3C16E;transform:translateY(-2px)}

/* первый экран */
.hero{max-width:1240px;margin:0 auto;padding:clamp(12px,3vw,40px) var(--gut) clamp(56px,8vw,110px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2rem,4.3vw,3.7rem);line-height:1.06;hyphens:manual}
.lead{margin-top:28px;font-size:1.2rem;line-height:1.55;max-width:34em;color:var(--txt2)}
.cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.hero-art{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.hero-art svg{width:100%;max-height:78vh}
.hero-art figcaption{font-size:.85rem;color:var(--mute);text-align:center}
@media (max-width:860px){.hero{grid-template-columns:1fr}.hero-art svg{max-height:none;max-width:460px}}

/* аппарат: общие стили */
.still{--stroke:var(--copper-d);--tag-bg:#fff;--tag-line:rgba(17,43,39,.28);--tag-mute:#5B726C;--tag-fg:#112B27;--leader:rgba(17,43,39,.45);--plate:#3C4E4A;--ring:rgba(80,30,5,.45);display:block;overflow:visible}
.still .ln{stroke:var(--stroke);stroke-width:3;stroke-linejoin:round;fill-opacity:0;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.55,0,.2,1) var(--dl,0s) forwards,fillin .7s ease-out calc(var(--dl,0s) + 1.2s) forwards}
.still .pot-edge{fill:none}
.still .ring{stroke:var(--ring);stroke-width:1.6;fill:none}
.still .ground{stroke:var(--line);stroke-width:2;fill:none}
.still .plate{fill:var(--plate)}
.still .pipe{stroke:var(--patina-d);stroke-width:6;stroke-linecap:round;fill:none}
.still .tube-o{stroke:var(--stroke);stroke-width:10;stroke-linejoin:round;stroke-linecap:round;fill:none}
.still .tube-i{stroke:#F2B488;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;fill:none}
.still .neck{stroke:var(--stroke);stroke-width:3;fill:none}
.still .glass{fill:#fff}
.still .liquid{fill:var(--amber);fill-opacity:.92}
.still .j-heads{fill:#CFE6DE}
.still .j-body{fill:#E7AE4C}
.still .j-tails{fill:#9A7650}
.still .flame{fill:#F0A53A}
.still .flame-in{fill:#FFD98A}
.still .flame-g{transform-box:fill-box;transform-origin:50% 100%;opacity:var(--flame,1)}
.still .vapor{stroke:#fff;stroke-opacity:.9;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 11;fill:none;opacity:var(--vapor,1);animation:flow 1.3s linear infinite}
.still .flow{stroke:#fff;stroke-opacity:.85;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 12;fill:none;animation:flow 1.6s linear infinite}
.still .bubbles circle{fill:#fff;fill-opacity:.8;transform-box:fill-box;animation:rise var(--t,2.5s) ease-in infinite var(--d,0s)}
.still .drops{opacity:var(--out,1)}
.still .drop{fill:var(--patina);animation:drip 1.2s ease-in infinite}
.still .drop.d2{animation-delay:.6s}
.still .leader{stroke:var(--leader);stroke-width:1.5;fill:none}
.still .tag rect{fill:var(--tag-bg);stroke:var(--tag-line);stroke-width:1.5}
.still .tl{font:500 11.5px var(--f-body);fill:var(--tag-mute)}
.still .tv{font:600 16px var(--f-body);fill:var(--tag-fg);font-variant-numeric:tabular-nums}
.still .flame-g .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick .75s ease-in-out infinite alternate}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:var(--fo,1)}}
@keyframes flow{to{stroke-dashoffset:-12}}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:1}100%{transform:translateY(-185px);opacity:0}}
@keyframes drip{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(125px);opacity:0}}
@keyframes flick{from{transform:scale(1,.88)}to{transform:scale(.93,1.08)}}

/* сцена с прокруткой */
.stage{background:var(--bottle);color:#E4EEE9;height:420vh;position:relative}
.stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage-grid{height:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.stage-art{height:88%;display:flex;justify-content:center;align-items:center;min-height:0}
.stage .still{--stroke:#E58F55;--tag-bg:#12312C;--tag-line:rgba(255,255,255,.22);--tag-mute:#8FB0A7;--tag-fg:#F3F7F4;--leader:rgba(255,255,255,.35);--plate:#2B4A44;--ring:rgba(255,255,255,.28);height:100%;width:auto;max-width:100%}
.stage .still .ln{animation:none;stroke-dasharray:none;stroke-dashoffset:0;fill-opacity:var(--fo,1)}
.stage .still .glass{fill:#CFE6DE}
.stage .still .ground{stroke:rgba(255,255,255,.14)}
.stage-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.stage-copy h2{color:#fff}
.stage-hint{color:#8FB0A7;font-size:.95rem;margin-top:-8px}
.rail{position:relative;display:flex;flex-wrap:wrap;gap:6px 22px;padding-bottom:12px}
.rail button{background:none;border:0;color:#8FB0A7;font:600 1rem var(--f-body);padding:8px 0;min-height:44px;cursor:pointer;transition:color .25s}
.rail button:hover{color:#fff}
.rail button.on{color:var(--amber)}
.rail button:focus-visible{outline-color:var(--amber)}
.rail-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.rail-bar i{display:block;height:100%;width:0;background:var(--amber)}
.steps{display:grid;min-height:9.5em}
.step{grid-area:1/1;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s,transform .35s}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step h3{font-size:1.5rem;color:#fff;margin-bottom:10px}
.step p{max-width:30em;color:#C8D9D2}
.stage-msg{display:flex;gap:12px;align-items:flex-start;background:var(--bottle-2);border:1px solid rgba(255,255,255,.14);border-radius:18px 18px 18px 4px;padding:14px 18px;max-width:30em}
.tg-ico{flex:none;width:28px;height:28px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 3.2 2.9 10.4c-.9.35-.88 1.6.03 1.9l4.6 1.5 1.8 5.6c.24.75 1.2.95 1.7.34l2.5-3 4.7 3.5c.65.48 1.58.12 1.76-.67l3-14.6c.2-.95-.73-1.7-1.6-1.4Z' fill='%230B211E' transform='translate(3.5 3.5) scale(.7)'/%3E%3C/svg%3E") center/100% no-repeat}
.stage-msg p{font-size:.98rem;line-height:1.45}
.stage-msg p.swap{animation:swap .4s ease-out}
@keyframes swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .stage-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,42%) minmax(0,1fr);align-items:start;gap:8px;padding-top:10px}
  .stage-art{height:100%}
  .stage-copy{gap:8px;justify-content:flex-start}
  .stage-copy h2{font-size:1.35rem}
  .stage-hint{display:none}
  .rail{gap:0 16px;padding-bottom:6px}
  .rail button{min-height:40px;padding:4px 0}
  .steps{min-height:8em}
  .step h3{font-size:1.15rem;margin-bottom:4px}
  .step p{font-size:.95rem;line-height:1.45}
  .stage-msg{padding:10px 14px}
}

/* связь: график и чат */
.connect{padding:clamp(64px,9vw,120px) 0}
.connect-head{max-width:52em;display:grid;gap:16px;margin-bottom:clamp(32px,5vw,56px)}
.connect-head p{max-width:40em;color:var(--txt2)}
.connect-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(24px,4vw,56px);align-items:center}
.browser{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -36px rgba(11,33,30,.45);overflow:hidden;min-width:0}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--steam-2);border-bottom:1px solid var(--line)}
.browser-bar span{width:10px;height:10px;border-radius:50%;background:#B9C7C0}
.browser-bar em{margin-left:10px;font-style:normal;font-size:.85rem;color:var(--mute);background:#fff;border-radius:999px;padding:3px 14px}
.browser-body{padding:18px clamp(12px,2vw,22px) 14px}
.readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px;margin-bottom:12px}
.readouts div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:7px}
.readouts i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.readouts span{font-size:.82rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.readouts b{grid-column:1/-1;font:600 1.5rem var(--f-body);font-variant-numeric:tabular-nums;line-height:1.2}
.readouts b::after{content:"\00a0°C";font-size:.8rem;font-weight:500;color:var(--mute)}
#chart{display:block;width:100%;height:clamp(220px,28vw,320px);touch-action:pan-y;cursor:crosshair}
.chart-note{font-size:.85rem;color:var(--mute);margin-top:8px}
@media (max-width:980px){.connect-grid{grid-template-columns:1fr;justify-items:stretch}.phone{margin:0 auto}}
@media (max-width:560px){.readouts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.phone{width:min(100%,330px);background:#0E1715;border-radius:40px;padding:10px;box-shadow:0 30px 60px -32px rgba(11,33,30,.7)}
.phone-screen{background:#DCE6E8;border-radius:31px;overflow:hidden;display:flex;flex-direction:column;height:540px}
.phone-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#fff;border-bottom:1px solid #D2DCDD}
.phone-head .av{width:34px;height:34px;border-radius:50%;background:var(--copper);display:grid;place-items:center}
.phone-head b{display:block;font-size:.95rem;line-height:1.1}
.phone-head small{color:var(--mute);font-size:.78rem}
.chat{flex:1;overflow-y:auto;scrollbar-width:none;padding:12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;min-height:0}
.chat::-webkit-scrollbar{display:none}
.msg{max-width:88%;background:#fff;border-radius:16px 16px 16px 4px;padding:9px 12px;font-size:.9rem;line-height:1.4;animation:pop .28s ease-out;align-self:flex-start}
.msg.alert{background:#FBE4E0;color:#7C1B12}
.msg.me{align-self:flex-end;background:#D7F0C8;border-radius:16px 16px 4px 16px}
.msg.typing{display:flex;gap:4px;padding:12px 14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:#8AA39B;animation:blink 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
.kbd{display:flex;gap:6px;animation:pop .28s ease-out}
.kbd button{flex:1;min-height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.75);color:#1B4F5C;font:600 .85rem var(--f-body);cursor:pointer;transition:background .15s}
.kbd button:hover{background:#fff}
.kbd button.danger{color:#A62A1D}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* защита */
.safety{background:var(--steam-2);padding:clamp(64px,9vw,120px) 0}
.safety-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,88px);align-items:start}
.safety-text{display:grid;gap:20px;min-width:0}
@media (max-width:860px){.safety-grid{grid-template-columns:1fr}}
.nb{white-space:nowrap}
.safety-text>p{max-width:36em;color:var(--txt2)}
.signals{border-collapse:collapse;width:100%;margin-top:8px}
.signals th,.signals td{text-align:left;padding:14px 0;border-top:1px solid var(--line);vertical-align:top;font-size:.98rem}
.signals tr:last-child th,.signals tr:last-child td{border-bottom:1px solid var(--line)}
.signals th{font-weight:600;width:44%;padding-right:16px}
.signals th i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--c);margin-right:10px;vertical-align:-1px}
.signals td{color:var(--txt2)}

.alarm{--tone:var(--patina);background:#fff;border-radius:22px;padding:clamp(20px,3vw,32px);display:grid;gap:18px;box-shadow:0 30px 60px -40px rgba(11,33,30,.5);border:2px solid transparent;transition:border-color .3s,background .3s}
.alarm[data-state="warn"]{--tone:var(--amber);border-color:var(--amber)}
.alarm[data-state="alarm"]{--tone:var(--alarm);border-color:var(--alarm);background:#FFF4F2}
.alarm[data-state="acked"]{--tone:var(--alarm);border-color:#E6B3AC}
.alarm-lead{margin-top:-10px;color:var(--mute);font-size:.97rem}
.gauge-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.gauge-top label{font-weight:600;font-size:.97rem}
.gauge-top output{font:600 1.7rem var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.slider{position:relative;padding:4px 0 26px}
.slider input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:none;cursor:grab}
.slider input:active{cursor:grabbing}
.slider input::-webkit-slider-runnable-track{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--patina) 0 33.33%,var(--amber) 33.33% 66.66%,var(--alarm) 66.66% 100%)}
.slider input::-moz-range-track{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--patina) 0 33.33%,var(--amber) 33.33% 66.66%,var(--alarm) 66.66% 100%)}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-10px;border-radius:50%;background:var(--ink);border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.slider input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ink);border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.tick{position:absolute;bottom:0;transform:translateX(-50%);font-size:.82rem;color:var(--mute)}
.tick::before{content:"";position:absolute;left:50%;top:-14px;width:2px;height:8px;background:var(--mute);transform:translateX(-50%)}
.tick b{font-weight:600}
.alarm-state{display:flex;gap:14px;align-items:flex-start;min-height:5.2em}
.alarm-state b{display:block;font-size:1.15rem;margin-bottom:2px;color:var(--ink)}
.alarm-state p{font-size:.97rem;color:var(--txt2);line-height:1.45}
.siren{flex:none;width:22px;height:22px;border-radius:50%;background:var(--tone);margin-top:3px;box-shadow:0 0 0 0 var(--tone)}
.alarm[data-state="warn"] .siren{animation:pulse 1.4s ease-out infinite}
.alarm[data-state="alarm"] .siren{animation:pulse .6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tone) 60%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
.alarm-msg{background:var(--ink);color:#E4EEE9;border-radius:16px 16px 16px 4px;padding:12px 16px;font-size:.95rem;line-height:1.45}
.alarm-msg.fresh{animation:pop .3s ease-out}
.alarm .btn{justify-self:start}
.alarm-foot{font-size:.85rem;color:var(--mute)}

/* умеет и не умеет */
.can{padding:clamp(64px,9vw,120px) 0}
.can h2{margin-bottom:clamp(28px,4vw,48px);max-width:16em}
.can-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.can-grid>div{padding-right:clamp(16px,4vw,56px)}
.can-grid>div+div{padding:0 0 0 clamp(16px,4vw,56px);border-left:1px solid var(--line)}
.can h3{margin-bottom:18px}
.can ul{list-style:none;margin:0;padding:0}
.can li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);max-width:30em}
.can li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:3px solid var(--patina-d);border-bottom:3px solid var(--patina-d);transform:rotate(-45deg)}
.can .no li::before{width:14px;height:14px;top:18px;border:0;background:linear-gradient(45deg,transparent 43%,var(--alarm) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--alarm) 43% 57%,transparent 57%);transform:none}
@media (max-width:760px){.can-grid{grid-template-columns:1fr;gap:36px}.can-grid>div,.can-grid>div+div{padding:0;border:0}}

/* характеристики */
.specs{background:var(--steam-2);padding:clamp(64px,9vw,120px) 0}
.specs-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,6vw,88px);align-items:start}
.specs-grid>div{display:grid;gap:16px}
.specs-grid p{color:var(--mute);max-width:22em}
.spec-table{border-collapse:collapse;width:100%}
.spec-table th,.spec-table td{text-align:left;padding:14px 0;border-top:1px solid var(--line);vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:1px solid var(--line)}
.spec-table th{font-weight:500;color:var(--mute);width:38%;padding-right:16px}
.spec-table td{font-weight:500}
@media (max-width:760px){.specs-grid{grid-template-columns:1fr}.spec-table th{width:42%}}

/* канал */
.channel{padding:clamp(56px,8vw,100px) 0}
.channel-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.channel img{width:100%;height:auto;max-width:300px}
.channel-grid>div{display:grid;gap:18px;justify-items:start}
.channel p{max-width:32em;color:var(--txt2)}
@media (max-width:640px){.channel-grid{grid-template-columns:1fr}.channel img{max-width:220px}}

/* контакты */
.contact{background:var(--bottle);color:#E4EEE9;padding:clamp(72px,10vw,140px) 0}
.contact-in{display:grid;gap:24px;justify-items:start}
.contact h2{color:#fff;font-size:clamp(2rem,5vw,4rem);max-width:12em}
.contact p{max-width:32em;color:#B8CCC4;font-size:1.15rem}
.foot{background:var(--bottle);color:#7E9C93;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px}

/* без анимации по просьбе системы */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .still .ln{animation:none;stroke-dasharray:none;stroke-dashoffset:0;fill-opacity:var(--fo,1)}
  .still .vapor,.still .flow,.still .bubbles circle,.still .drop,.still .flame-g .flame{animation:none}
  .still .bubbles circle{fill-opacity:.7}
  .still .drop{opacity:0}
  .alarm .siren,.msg,.kbd,.stage-msg p.swap{animation:none!important}
  .step{transition:none}
}

/* ---------- Distilla 1: дополнения ---------- */
.kicker{font:600 .82rem var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.readouts{grid-template-columns:repeat(3,minmax(0,1fr))}
.rd-flow b::after{content:"\00a0л/мин"}
@media (max-width:560px){.readouts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.snd{justify-self:start;align-self:start;display:inline-flex;align-items:center;gap:8px;margin:2px 0 14px;padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:500 .9rem var(--f-body);cursor:pointer}
.snd:hover{background:var(--ink);color:var(--steam)}
.snd[aria-pressed="false"]{border-color:var(--mute);color:var(--mute)}
.snd-ico{width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3Zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3Zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.snd[aria-pressed="false"] .snd-ico{opacity:.45}

.fw{padding:clamp(64px,9vw,120px) 0}
.fw-head{display:grid;gap:14px;margin-bottom:32px}
.fw-head p{color:var(--txt2);max-width:38em}
.fw-list{display:grid;gap:28px}
.fw-product h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:16px}
.fw-product h3 small{font:500 .9rem var(--f-body);color:var(--mute)}
.fw-rel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px clamp(18px,3vw,30px);display:grid;gap:14px}
.fw-rel.latest{border-color:var(--patina);box-shadow:0 18px 40px -30px rgba(11,33,30,.5)}
.fw-rel-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.fw-rel-head h4{font:600 1.15rem var(--f-body)}
.fw-badge{font:600 .75rem var(--f-body);padding:3px 10px;border-radius:999px;background:var(--patina-d);color:#fff}
.fw-date{color:var(--mute);font-size:.9rem}
.fw-notes{list-style:none;display:grid;gap:6px;color:var(--txt2)}
.fw-notes li{padding-left:18px;position:relative}
.fw-notes li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--copper)}
.fw-files{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:stretch}
.fw-file{display:grid;gap:2px;text-decoration:none;color:var(--ink);padding:12px 18px;border:1.5px solid var(--ink);border-radius:14px;min-width:0}
.fw-file small{color:var(--mute);overflow-wrap:anywhere}
.fw-file:hover{background:var(--ink);color:var(--steam)}
.fw-file:hover small{color:#B8CCC6}
.fw-sha{flex-basis:100%;font:.78rem ui-monospace,Menlo,monospace;color:var(--mute);overflow-wrap:anywhere}
.fw-soon,.fw-empty{color:var(--mute)}
.fw-old{margin-top:14px;display:grid;gap:12px}
.fw-old summary{cursor:pointer;font-weight:500;color:var(--mute);margin-bottom:12px}
.fw-old .fw-rel{margin-bottom:12px}

/* ---------- Distilla 1: информационные разделы ---------- */
.sec-head{display:grid;gap:14px;margin-bottom:32px;max-width:46em}
.sec-head p{color:var(--txt2)}
.ui,.modes,.tails,.start{padding:clamp(64px,9vw,120px) 0}
.modes{background:var(--steam-2)}
.start{background:var(--steam-2)}

.gal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.gal-tabs button{font:500 .95rem var(--f-body);padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.gal-tabs button:hover{border-color:var(--ink)}
.gal-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--steam)}
.gal-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
.gal-fig{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 24px 50px -36px rgba(11,33,30,.55);display:grid;place-items:center;min-height:200px}
.gal-fig img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;border-radius:10px;transition:opacity .25s}
.gal-fig img.swap{opacity:0}
.gal-text{display:grid;gap:12px}
.gal-text p{color:var(--txt2)}
.gal-text ul{list-style:none;display:grid;gap:8px;color:var(--txt2)}
.gal-text li{padding-left:18px;position:relative}
.gal-text li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--copper)}
@media (max-width:860px){.gal-body{grid-template-columns:1fr}}

.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mode{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;gap:10px;align-content:start}
.mode img{width:100%;height:auto;object-fit:contain;border-radius:10px;background:var(--steam)}
.mode h3{margin-top:4px}
.mode p{color:var(--txt2);font-size:.97rem}
.mode-text{background:transparent;border-style:dashed;padding:22px}
@media (max-width:980px){.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.mode-grid{grid-template-columns:1fr}}

.tails-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tchart{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 16px 8px}
.tchart figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:6px}
.tchart figcaption span{color:var(--mute);font-size:.88rem}
.tc-svg svg{display:block;width:100%;height:auto}
.tc-svg text{font:500 12.5px var(--f-body);fill:var(--mute)}
.tc-svg .ax{stroke:var(--line);stroke-width:1}
.tc-svg .th{stroke-width:1.5;stroke-dasharray:5 4}
.tc-svg .th-w{stroke:#E7AE4C}
.tc-svg .th-a{stroke:#D2392A}
.tc-svg .ln-d{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.3,.6,.2,1)}
.tc-svg.on .ln-d{stroke-dashoffset:0}
.tc-svg .dot{opacity:0;transition:opacity .4s 2.2s}
.tc-svg.on .dot{opacity:1}
.tails-note{margin-top:20px;color:var(--mute);max-width:52em;font-size:.95rem}
@media (max-width:760px){.tails-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tc-svg .ln-d{stroke-dashoffset:0;transition:none}.tc-svg .dot{opacity:1;transition:none}.gal-fig img{transition:none}}

.start-list{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:14px;max-width:46em}
.start-list li{counter-increment:s;position:relative;padding:16px 18px 16px 64px;background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--txt2)}
.start-list li::before{content:counter(s);position:absolute;left:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--steam);display:grid;place-items:center;font:600 .95rem var(--f-body)}
.start-list b{color:var(--ink)}

.gal-fig,.tchart{margin:0}


/* ================= Тема v3: палитры через переменные ================= */
/* A «Графит и медь» (по умолчанию) */
:root{
  --bg:#0A0A0B; --bg-2:#111113; --card:#151517; --card-2:#1C1C1F;
  --ink:#F4F2EE; --txt2:#B8B5AF; --mute:#86837D; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --on-acc:#160A03; --acc:#E8894A; --acc-2:#F4B860; --ok:#4CC38A; --info:#5DB4E6; --alarm:#EF4E3A;
  --deep:rgba(5,5,6,.82); --glow-a:rgba(232,137,74,.12); --glow-b:rgba(93,180,230,.06); --grid:rgba(255,255,255,.035);
  --logo-op:.07;
}
:root{--steam:var(--bg);--steam-2:var(--bg-2);--copper:var(--acc);--copper-d:var(--acc);--amber:var(--acc-2);--patina:var(--ok);--patina-d:var(--ok);--bottle:var(--bg);--bottle-2:var(--card)}

body{background:var(--bg);color:var(--ink)}
::selection{background:var(--acc);color:var(--on-acc)}

/* фон */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(1100px 700px at 85% -10%,var(--glow-a),transparent 60%),radial-gradient(900px 700px at -10% 60%,var(--glow-b),transparent 60%),var(--bg)}
.bg-grid{position:absolute;inset:-2px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 75%)}
.bg-logo{position:absolute;right:-6vw;top:50%;width:min(62vw,860px);aspect-ratio:820/703;margin-top:calc(min(62vw,860px)*-.43);background:url(assets/bg-logo.webp) center/contain no-repeat;opacity:var(--logo-op);transform:translate3d(0,var(--py,0px),0) rotate(-4deg);will-change:transform}
.bg-glow{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.6;will-change:transform}
.bg-glow.g1{left:-20vmax;top:-10vmax;background:radial-gradient(circle,var(--glow-a),transparent 65%);animation:drift1 38s ease-in-out infinite alternate}
.bg-glow.g2{right:-25vmax;bottom:-25vmax;background:radial-gradient(circle,var(--glow-b),transparent 65%);animation:drift2 46s ease-in-out infinite alternate}
.bg-steam{position:absolute;left:0;right:0;bottom:-10%;height:70%;opacity:.45}
.bg-steam i{position:absolute;bottom:0;width:2px;height:120px;border-radius:2px;background:linear-gradient(to top,transparent,var(--line-2),transparent);animation:steamUp var(--t,14s) linear infinite var(--d,0s);left:var(--x)}
@keyframes drift1{to{transform:translate3d(18vmax,12vmax,0)}}
@keyframes drift2{to{transform:translate3d(-16vmax,-10vmax,0)}}
@keyframes steamUp{0%{transform:translateY(0) scaleY(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-70vh) scaleY(1.4);opacity:0}}
@media (max-width:760px){.bg-logo{width:120vw;right:-35vw}.bg-grid{background-size:40px 40px}}
@media (prefers-reduced-motion:reduce){.bg-glow,.bg-steam i{animation:none}.bg-logo{transform:rotate(-4deg)}}

/* разделы */
.safety,.specs,.modes,.start{background:linear-gradient(180deg,transparent,rgba(255,255,255,.018) 20%,rgba(255,255,255,.018) 80%,transparent)}
.stage,.contact{background:var(--deep)}
.foot{background:var(--deep);border-top:1px solid var(--line)}
.top{position:relative;z-index:2}
.hero h1,h2{color:var(--ink)}
.hero h1 em,h2 em{font-style:normal;background:linear-gradient(90deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{color:var(--acc)}
.lead,.connect-head p,.sec-head p,.safety-text>p,.channel p,.fw-head p{color:var(--txt2)}

/* кнопки и ссылки */
.tg-top,.btn-text{color:var(--acc-2)}
.btn-text:hover{color:var(--ink)}
.btn-main{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:var(--on-acc);box-shadow:0 10px 30px -12px var(--acc)}
.btn-main:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-tg{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:var(--on-acc)}
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bg)}
.nav a{color:var(--mute)}.nav a:hover{color:var(--ink)}

/* карточки: тонкая рамка и светлый верхний край, как у Linear/Vercel */
.alarm,.fw-rel,.gal-fig,.mode,.tchart,.start-list li,.stat,.cmp-col,.path-card{background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.9)}
.mode-text{background:transparent;border-style:dashed}
.mode img{background:#EDF1EC}
.alarm[data-state="warn"]{border-color:var(--acc-2)}
.alarm[data-state="alarm"]{border-color:var(--alarm);background:linear-gradient(180deg,color-mix(in srgb,var(--alarm) 16%,var(--card)),var(--card))}
.alarm[data-state="acked"]{border-color:color-mix(in srgb,var(--alarm) 45%,var(--card))}
.alarm-msg{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.slider input::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--ok) 0 33.33%,var(--acc-2) 33.33% 66.66%,var(--alarm) 66.66% 100%)}
.slider input::-moz-range-track{background:linear-gradient(90deg,var(--ok) 0 33.33%,var(--acc-2) 33.33% 66.66%,var(--alarm) 66.66% 100%)}
.slider input::-webkit-slider-thumb{background:var(--ink);border-color:var(--acc)}
.slider input::-moz-range-thumb{background:var(--ink);border-color:var(--acc)}
.gal-tabs button{border-color:var(--line-2);color:var(--txt2)}
.gal-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.gal-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.start-list li::before{background:linear-gradient(135deg,var(--acc),var(--acc-2));color:var(--on-acc)}
.fw-file{border-color:var(--line-2);color:var(--ink)}
.fw-file:hover{background:var(--ink);color:var(--bg)}
.fw-file:hover small{color:var(--mute)}
.fw-badge{background:var(--ok);color:#06140D}
.fw-rel.latest{border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.snd{border-color:var(--line-2);color:var(--ink)}
.snd:hover{background:var(--ink);color:var(--bg)}
.can li::before{border-color:var(--ok)}
.signals th,.spec-table td{color:var(--ink)}
.stage-msg{background:var(--card);border-color:var(--line)}
.rail button.on{color:var(--acc-2)}.rail-bar i{background:linear-gradient(90deg,var(--acc),var(--acc-2))}
.tc-svg text{fill:var(--mute)}

/* светлые «окна устройства» */
.browser{--ink:#112B27;--mute:#4F6862;--line:rgba(17,43,39,.18);--txt2:#27413c;color:#112B27;background:#fff;border-color:transparent;box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px var(--line-2)}
.browser-bar{background:#E7EBE8}
.phone{--ink:#112B27;--mute:#5B726C;color:#112B27;background:#050505;box-shadow:0 40px 80px -36px rgba(0,0,0,.95),0 0 0 1px var(--line-2)}

/* схема в первом экране и сцене */
.hero .still,.stage .still{--stroke:var(--acc);--tag-bg:var(--card);--tag-line:var(--line-2);--tag-mute:var(--mute);--tag-fg:var(--ink);--leader:var(--line-2);--plate:#2A2A2E;--ring:rgba(255,255,255,.22)}
.hero .still .glass,.stage .still .glass{fill:#D9E4EA}
.hero .still .ground,.stage .still .ground{stroke:var(--line-2)}

/* ---------- инфографика: цифры ---------- */
.stats{padding:0 0 clamp(56px,8vw,100px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{border-radius:20px;padding:22px 22px 20px;display:grid;gap:6px;align-content:start;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.7}
.stat b{font:600 clamp(2rem,3.6vw,3rem)/1 var(--f-display);letter-spacing:-.03em;background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 60%,var(--acc)));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat b small{font-size:.45em;letter-spacing:0}
.stat span{font-weight:600;color:var(--ink)}
.stat p{color:var(--mute);font-size:.92rem;line-height:1.45}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- инфографика: путь сигнала ---------- */
.path{padding:clamp(64px,9vw,120px) 0}
.path-card{border-radius:24px;padding:clamp(14px,3vw,32px)}
.path-svg{display:block;width:100%;height:auto}
.path-svg .box{fill:var(--bg);stroke:var(--line-2);stroke-width:1.2}
.path-svg .box.hub{stroke:var(--acc);stroke-width:1.6}
.path-svg .t1{font:600 15px var(--f-body);fill:var(--ink)}
.path-svg .t2{font:500 12.5px var(--f-body);fill:var(--mute)}
.path-svg .tk{font:600 11px var(--f-body);letter-spacing:.08em;fill:var(--acc)}
.path-svg .wire{fill:none;stroke:var(--line-2);stroke-width:1.6}
.path-svg .pulse{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:6 140;animation:pulse-run 2.6s linear infinite var(--d,0s)}
.path-svg .p-in{stroke:var(--acc-2)}
.path-svg .p-out{stroke:var(--info)}
.path-svg .p-loc{stroke:var(--alarm)}
.path-svg .dotc{fill:var(--c)}
@keyframes pulse-run{from{stroke-dashoffset:146}to{stroke-dashoffset:0}}
.path-svg.m{display:none}
@media (max-width:760px){.path-svg.d{display:none}.path-svg.m{display:block}}
@media (prefers-reduced-motion:reduce){.path-svg .pulse{animation:none;stroke-dasharray:none;opacity:.5}}
.path-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;color:var(--mute);font-size:.9rem}
.path-legend i{display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--c);vertical-align:middle;margin-right:8px}

/* ---------- инфографика: сравнение ---------- */
.cmp{padding:clamp(64px,9vw,120px) 0}
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cmp-col{border-radius:22px;padding:clamp(20px,3vw,30px)}
.cmp-col h3{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cmp-col.us{border-color:color-mix(in srgb,var(--acc) 55%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px color-mix(in srgb,var(--acc) 20%,transparent),0 40px 80px -50px var(--acc)}
.cmp-col ul{list-style:none;margin:0;padding:0}
.cmp-col li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--txt2)}
.cmp-col li::before{content:"";width:18px;height:18px;margin-top:3px;background:var(--c);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.cmp-col.them li{--c:var(--mute);--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M5.5 9h7' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.cmp-col.us li{--c:var(--acc);--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9'/%3E%3Cpath d='M5 9.3l2.6 2.5L13 6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");color:var(--ink)}
.cmp-col.us li::before{-webkit-mask:none;mask:none;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.5L13 6.3' fill='none' stroke='%23160A03' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.cmp-grid{grid-template-columns:1fr}}
.stage{background:linear-gradient(to bottom,transparent,var(--deep) 240px,var(--deep) calc(100% - 240px),transparent)}
.contact{background:linear-gradient(to bottom,transparent,var(--deep) 160px)}

/* ---------- барометр ---------- */
.baro{padding:clamp(64px,9vw,120px) 0}
.baro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.baro-demo{background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,30px);display:grid;gap:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.9)}
.bd-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bd-top label{font-weight:600}
.bd-top output{font:600 1.7rem var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#baroP{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:none;margin:0;cursor:grab}
#baroP::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--info),var(--line-2) 50%,var(--acc))}
#baroP::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--info),var(--line-2) 50%,var(--acc))}
#baroP::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:50%;background:var(--ink);border:4px solid var(--acc)}
#baroP::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:4px solid var(--acc)}
.bd-scale{display:flex;justify-content:space-between;font-size:.82rem;color:var(--mute);margin-top:-6px}
.bd-rows{display:grid;gap:8px;margin-top:6px}
.bd-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"s b" "s i";column-gap:12px;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.bd-row span{grid-area:s;align-self:center;color:var(--txt2)}
.bd-row b{grid-area:b;font:600 1.25rem var(--f-body);font-variant-numeric:tabular-nums;text-align:right}
.bd-row i{grid-area:i;font-style:normal;font-size:.8rem;text-align:right;color:var(--mute)}
.bd-row.bad{border-color:color-mix(in srgb,var(--alarm) 60%,transparent)}
.bd-row.bad i{color:var(--alarm)}
.bd-row.warn{border-color:color-mix(in srgb,var(--acc-2) 60%,transparent)}
.bd-row.warn i{color:var(--acc-2)}
.bd-row.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.bd-row.ok i{color:var(--ok)}
.bd-note{font-size:.88rem;color:var(--mute);line-height:1.5}
.baro-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.baro-list li{padding:14px 0 14px 22px;border-top:1px solid var(--line);color:var(--txt2);position:relative}
.baro-list li::before{content:"";position:absolute;left:0;top:1.35em;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.baro-list li b{color:var(--ink)}
.baro-list li.muted{color:var(--mute);font-size:.92rem}
.baro-list li.muted::before{background:var(--mute)}
@media (max-width:860px){.baro-grid{grid-template-columns:1fr}}

/* ================= Форум ================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fm{padding-bottom:clamp(48px,7vw,90px);max-width:980px}
.fm-head{padding:clamp(16px,3vw,40px) 0 clamp(28px,4vw,44px)}
.fm-head h1,.fm-topic-head h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06}
.fm-head .lead{max-width:42em}
.fm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.fm-tabs button{font:500 .95rem var(--f-body);padding:9px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;color:var(--txt2);cursor:pointer}
.fm-tabs button small{color:var(--mute);font-size:.85em}
.fm-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.fm-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fm-tabs button[aria-selected="true"] small{color:var(--bg);opacity:.6}
.fm-list{display:grid;gap:10px}
.fm-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;text-decoration:none;padding:16px 20px;border-radius:18px;background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);transition:border-color .2s,transform .2s}
.fm-item:hover{border-color:var(--line-2);transform:translateY(-1px)}
.fm-item-main{display:grid;gap:6px;min-width:0}
.fm-item-main b{font-size:1.08rem;line-height:1.3;overflow-wrap:anywhere}
.fm-item-main small,.fm-item-side small{color:var(--mute);font-size:.85rem}
.fm-item-side{display:grid;justify-items:end;text-align:right;line-height:1.25}
.fm-item-side b{font:600 1.3rem var(--f-display)}
.fm-badges{display:flex;flex-wrap:wrap;gap:6px}
.fb{font:600 .72rem var(--f-body);letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--txt2)}
.fb.cat-bug{color:var(--alarm);border-color:color-mix(in srgb,var(--alarm) 45%,transparent)}
.fb.cat-idea{color:var(--acc-2);border-color:color-mix(in srgb,var(--acc-2) 45%,transparent)}
.fb.cat-question{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,transparent)}
.fb.cat-review{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.fb.st-accepted{background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc-2);border-color:transparent}
.fb.st-fixed{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);border-color:transparent}
.fb.st-wontfix{color:var(--mute)}
.fb.pin{color:var(--ink)}
.fm-empty{color:var(--mute);padding:24px 4px}
.fm-more{margin-top:16px}
.fm-back{display:inline-block;margin:8px 0 18px}
.fm-topic-head{display:grid;gap:12px;margin-bottom:22px}
.fm-topic-head small{color:var(--mute)}
.fm-post{padding:18px 20px;border-radius:18px;background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);margin-bottom:10px;display:grid;gap:10px}
.fm-post.is-admin{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.fm-post header{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.fm-post time{color:var(--mute);font-size:.85rem;margin-left:auto}
.fm-body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--txt2)}
.fm-imgs{display:flex;flex-wrap:wrap;gap:10px}
.fm-imgs a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--bg)}
.fm-imgs img{display:block;height:180px;width:auto;max-width:100%;object-fit:cover}
.fm-del{justify-self:start;background:none;border:0;color:var(--alarm);font:500 .85rem var(--f-body);cursor:pointer;padding:4px 0}
.fm-sub{margin:28px 0 12px}
.fm-form{display:grid;gap:14px;padding:clamp(18px,3vw,26px);border-radius:20px;background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line)}
.ff-row{display:grid;gap:6px;min-width:0}
.ff-l{font-weight:600;font-size:.92rem;color:var(--txt2)}
.ff-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ff-two.one{grid-template-columns:1fr}
.fm-form input,.fm-form textarea,.fm-mod input,.fm-mod select,.fm-mod textarea,.fm-admin input{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line-2);border-radius:12px;padding:11px 14px;width:100%;min-width:0}
.fm-form textarea,.fm-mod textarea{resize:vertical;min-height:120px;line-height:1.5}
.fm-form input:focus,.fm-form textarea:focus,.fm-mod :is(input,select,textarea):focus{outline:none;border-color:var(--acc)}
.fm-chips{display:flex;flex-wrap:wrap;gap:8px}
.fm-chips button{font:500 .95rem var(--f-body);padding:8px 16px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;color:var(--txt2);cursor:pointer}
.fm-chips button[aria-checked="true"]{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.ff-files{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ff-add{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1.5px dashed var(--line-2);border-radius:12px;color:var(--txt2);cursor:pointer}
.ff-add:hover{border-color:var(--acc);color:var(--ink)}
.ff-add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ff-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.ff-thumb{position:relative;display:block;width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--line-2)}
.ff-thumb img{width:100%;height:100%;object-fit:cover}
.ff-thumb button{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.ff-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ff-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.ff-msg{color:var(--acc-2);font-size:.95rem}
.fm-mod{margin:18px 0;padding:18px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--acc) 60%,transparent);display:grid;gap:12px}
.fm-mod-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fm-mod-row select{width:auto}.fm-mod-row input{width:200px}
.fm-mod-row textarea{flex:1 1 320px;min-height:80px}
.btn.danger{border-color:color-mix(in srgb,var(--alarm) 60%,transparent);color:var(--alarm)}
.fm-rules{margin-top:36px;color:var(--mute);font-size:.9rem;max-width:46em}
.fm-admin{margin-top:18px;color:var(--mute);font-size:.9rem}
.fm-admin summary{cursor:pointer;width:max-content}
.fm-admin-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.fm-admin-in input{width:240px}
.forum-page .bg-logo{opacity:calc(var(--logo-op) * .7)}
@media (max-width:640px){.ff-two{grid-template-columns:1fr}.fm-item{grid-template-columns:1fr}.fm-item-side{grid-auto-flow:column;justify-content:start;justify-items:start;gap:8px;align-items:baseline}.fm-item-side b{font-size:1rem}.fm-imgs img{height:140px}}

/* блок «обратная связь» на главной */
.fb-cta{padding:clamp(56px,8vw,100px) 0}
.fb-cta-in{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:center;padding:clamp(24px,4vw,44px);border-radius:26px;background:radial-gradient(600px 300px at 100% 0,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%),linear-gradient(180deg,var(--card-2),var(--card));border:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.fb-cta-in p{color:var(--txt2);margin-top:12px;max-width:38em}
.fb-steps{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;color:var(--mute);font-size:.92rem;list-style:none;padding:0}
.fb-steps li::before{content:"→ ";color:var(--acc)}
.fb-steps li:first-child::before{content:""}
@media (max-width:760px){.fb-cta-in{grid-template-columns:1fr}}
#newView h2{margin-bottom:18px}
[hidden]{display:none!important}
.btn-line{background:transparent}
button.btn-text{background:none;border:0;font:inherit;cursor:pointer}
.fm h1 em{font-style:normal;background:linear-gradient(90deg,var(--acc),var(--acc-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- схема аппарата v2 ---------- */
.still .handle{fill:#5B6168;stroke:#2A2D31}
.still .clamp{fill:url(#cuH);stroke:rgba(0,0,0,.35)}
.still .win{stroke:none}
.still .win-edge{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.5}
.still .win-shine{stroke:rgba(255,255,255,.18);stroke-width:4;stroke-linecap:round}
.still .liquid{fill:#E2A64C;fill-opacity:.95}
.still .pack{opacity:.9}
.still .tube{fill:none;stroke:#C9CED4;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.still .tube.thin{stroke-width:4}
.still .valve circle{fill:#D33A2C;stroke:#6E1A12;stroke-width:1.5}
.still .valve path{stroke:#D33A2C;stroke-width:3;stroke-linecap:round;fill:none}
.still .prod{fill:none;stroke:#FFD48A;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 10;opacity:var(--out,1);animation:flow 1.4s linear infinite}
.still .vapor{stroke:#fff;stroke-opacity:.75;stroke-width:3;stroke-dasharray:1 11}
.still .wpipe{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.still .wpipe.cold{stroke:#3E8FC4}.still .wpipe.warm{stroke:#5E9FB8}.still .wpipe.hot{stroke:#C98A5A}
.still .wflow{fill:none;stroke:#E6F6FF;stroke-width:2;stroke-linecap:round;stroke-dasharray:2 12;opacity:calc(var(--water,1) * .85);animation:flow 1.1s linear infinite}
.still .meter circle{fill:#1B2025;stroke:#3E8FC4;stroke-width:3}
.still .meter path{stroke:#9BD3F0;stroke-width:1.6;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:spin 1.2s linear infinite;animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.still .warrow{fill:none;stroke:#9BD3F0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.still .hob-glow{opacity:var(--flame,1);transition:opacity .4s}
.still .hob-led{fill:#FF6A2A;opacity:var(--flame,1)}
.still .part text{font:500 12px var(--f-body);fill:var(--mute);letter-spacing:.01em}
.still .sdots circle{fill:var(--acc,#E8894A);stroke:#0A0A0B;stroke-width:2}
.still .glass{stroke:rgba(255,255,255,.55)}
.still .jacket{stroke:#9BD3F0}
@media (prefers-reduced-motion:reduce){.still .prod,.still .wflow,.still .meter path{animation:none}}
.hero .still,.stage .still{--stroke:#A9B0B8}
.still .hob-ring{stroke:#FF7A33;stroke-width:3;stroke-linecap:round;opacity:var(--flame,1);filter:drop-shadow(0 0 6px #FF6A2A)}
.specs-cta{margin-top:22px}