/* Сорок микрон — демо детейлинг-студии. Мир: поперечный шлиф покрытия (лак → цвет → грунт → металл). Шрифты OFL лежат в fonts/, вне git. */
@font-face{font-family:'Advent Pro';src:url(../fonts/advent-pro-cyrillic.woff2) format('woff2');font-weight:100 900;font-stretch:100% 200%;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Advent Pro';src:url(../fonts/advent-pro-latin-ext.woff2) format('woff2');font-weight:100 900;font-stretch:100% 200%;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Advent Pro';src:url(../fonts/advent-pro-latin.woff2) format('woff2');font-weight:100 900;font-stretch:100% 200%;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:'Source Sans 3';src:url(../fonts/source-sans-3-cyrillic.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:'Source Sans 3';src:url(../fonts/source-sans-3-latin-ext.woff2) format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';src:url(../fonts/source-sans-3-latin.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:'Martian Mono';src:url(../fonts/martian-mono-cyrillic.woff2) format('woff2');font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Martian Mono';src:url(../fonts/martian-mono-latin-ext.woff2) format('woff2');font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Martian Mono';src:url(../fonts/martian-mono-latin.woff2) format('woff2');font-weight:100 800;font-stretch:75% 112.5%;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{
  --air:#f5f8f7; --glass:#eaf2ef; --lak:#dce9e4; --lak-edge:#ffffff;
  --em:#0d6a4e; --em-hi:#23a47c; --em-lo:#04372a; --em-ink:#032219;
  --primer:#d7d9d2; --primer-2:#c9ccc4; --primer-ink:#2f3632; --ecoat:#1f2526; --ecoat-2:#2b3234; --steel:#8b9497;
  --ink:#0e1a16; --ink-2:#3c4a45; --ink-3:#4a5853;
  --cut:#e6a21b; --stop:#cf3f27;
  --display:'Advent Pro','Arial Narrow',sans-serif; --text:'Source Sans 3',system-ui,sans-serif; --mono:'Martian Mono',ui-monospace,monospace;
  --wrap:1240px; --gut:clamp(16px,4vw,48px); --bar:64px;
  --ease:cubic-bezier(.16,1,.3,1);
  --flake:none;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--em) var(--glass)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--air);color:var(--ink);font:400 1.0625rem/1.55 var(--text);font-kerning:normal;text-rendering:optimizeLegibility}
::selection{background:var(--em);color:#fff}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--em);outline-offset:3px;border-radius:3px}
.s-em :focus-visible,.s-dark :focus-visible{outline-color:#fff}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.005em}
h2{font-size:clamp(2rem,3.7vw,3.4rem);font-stretch:140%;line-height:1;max-width:22ch}
h3{font-size:1.3rem;font-stretch:118%;line-height:1.15}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--ink);color:#fff;padding:8px 14px}
.skip:focus{left:8px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-stretch:100%}
.ask{text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:.22em;text-decoration-color:currentColor}
.src{font-size:.8125rem;color:var(--ink-3)}
.s-em .src,.s-dark .src{color:rgba(255,255,255,.72)}

/* плашка демо (вид Б) */
.demo{margin:0;padding:8px var(--gut);background:var(--ecoat);color:#e8efec;font-size:.8125rem;line-height:1.4;text-align:center}
.demo .ask{text-decoration-color:#e8efec}
@media (max-width:720px){.demo-more{display:none}}

/* шапка — стеклянная полоса лака, блик у текущего пункта */
.bar{position:sticky;top:0;z-index:40;height:var(--bar);display:flex;align-items:center;gap:20px;padding:0 var(--gut);
  background:rgba(240,246,244,.78);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 0 rgba(14,26,22,.10),0 8px 24px -16px rgba(14,26,22,.35)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.sign{width:30px;height:30px;flex:none}
.brand-t{display:flex;flex-direction:column;line-height:1}
.brand-t b{font:800 1.18rem/1 var(--display);font-stretch:150%;letter-spacing:.005em}
.brand-t small{font-size:.75rem;color:var(--ink-2);margin-top:3px;letter-spacing:.02em}
.nav{position:relative;display:flex;gap:2px;margin-left:auto}
.nav a{position:relative;z-index:1;padding:8px 13px;border-radius:7px;text-decoration:none;font:600 .97rem/1 var(--display);font-stretch:125%;letter-spacing:.01em;color:var(--ink-2);transition:color .25s}
.nav a:hover,.nav a[aria-current="true"]{color:var(--ink)}
.glint{position:absolute;z-index:0;left:0;top:50%;height:34px;width:100px;margin-top:-17px;border-radius:8px;pointer-events:none;opacity:0;transform-origin:left;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.55) 55%,rgba(220,233,228,.7));
  box-shadow:inset 0 0 0 1px rgba(14,26,22,.08),0 6px 14px -8px rgba(14,26,22,.45);
  transition:transform .55s var(--ease),opacity .3s}
.glint::after{content:"";position:absolute;left:12%;right:12%;top:4px;height:5px;border-radius:5px;background:linear-gradient(90deg,transparent,#fff,transparent)}
.menu-btn{display:none}
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:9px;cursor:pointer;text-decoration:none;
  font:700 1.02rem/1 var(--display);font-stretch:130%;letter-spacing:.01em;color:#fff;background:var(--em);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 10px 22px -14px rgba(4,55,42,.9);
  transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.go:hover{background:#0b5c44}
.go:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 10px -8px rgba(4,55,42,.9)}
.go[disabled]{background:#c9d2cf;color:#3c4a45;cursor:not-allowed;box-shadow:none}
.go-s{min-height:40px;padding:0 16px;font-size:.95rem}
.s-em .go,.s-dark .go{background:var(--glass);color:var(--ink);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.12),0 10px 22px -14px rgba(0,0,0,.6)}
.s-em .go:hover,.s-dark .go:hover{background:#fff}
.link{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(14,26,22,.35)}
.s-em .link,.s-dark .link{color:#fff;text-decoration-color:rgba(255,255,255,.5)}

/* разделы — поля материалов; стык — блестящая кромка лака */
.sec{position:relative;padding:clamp(72px,9vw,128px) 0;scroll-margin-top:var(--bar)}
.sec::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));box-shadow:inset 0 1px 0 #fff}
.s-glass{background:var(--glass)}
.s-air{background:var(--air)}
.s-primer{background:var(--primer);background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1.2px);background-size:5px 5px}
.s-primer::before{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.s-dark{background:var(--ecoat);color:#eef4f2}
.s-dark::before{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.s-em{color:#fff;background-color:var(--em);
  background-image:var(--flake),linear-gradient(115deg,var(--em-lo) 0%,var(--em) 38%,#178060 52%,var(--em) 64%,var(--em-lo) 100%);
  background-size:180px 180px,220% 100%;background-position:0 0,30% 0}
@supports (animation-timeline:view()){
  .s-em{animation:flop linear both;animation-timeline:view()}
  @keyframes flop{from{background-position:0 0,0% 0}to{background-position:0 0,100% 0}}
}
.s-em::before{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.lead{font-size:clamp(1.08rem,1.3vw,1.22rem);line-height:1.5;max-width:56ch;color:var(--ink-2)}
.s-em .lead,.s-dark .lead{color:#fff}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 48px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lead{justify-self:start}

/* ===== первый экран: шлиф ===== */
.hero{position:relative;background:var(--air);padding:clamp(22px,2.6vw,36px) 0 0}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px 56px;align-items:start}
.hero h1{font-size:clamp(2.3rem,4.6vw,4.4rem);font-stretch:150%;line-height:.96;max-width:15ch}
.hero h1 span{display:block;font-weight:500;font-stretch:135%;color:var(--em);margin-top:.18em;font-size:.62em;line-height:1.02}
.hero .lead{margin-top:18px;max-width:60ch}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}

.gauge{position:relative;border-radius:14px;padding:16px 16px 12px;color:#eaf2ef;
  background:linear-gradient(160deg,#2b3335,#151a1b 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 40px -26px rgba(14,26,22,.9)}
.g-read{display:flex;align-items:baseline;gap:10px}
.g-read b{font:600 2.9rem/1 var(--mono);font-stretch:100%;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.g-read span{font-size:.95rem;color:#b8c7c1}
.g-sub{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font:500 .78rem/1.3 var(--mono);color:#a9bab4}
.g-sub b{color:var(--cut);font-weight:600}
.g-meter{position:relative;height:8px;border-radius:4px;margin:10px 0 12px;background:#0b0f10;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.g-meter i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:4px;background:linear-gradient(90deg,#cfe3dc,#fff);transform-origin:left;transition:transform .9s var(--ease)}
.g-meter s{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--stop);left:50%}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border:0;margin:0;padding:0}
.tools legend{font-size:.8rem;color:#b8c7c1;margin-bottom:8px}
.tool{position:relative}
.tool input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tool span{display:flex;flex-direction:column;gap:2px;padding:9px 8px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:700 .92rem/1.1 var(--display);font-stretch:118%;transition:background .2s,box-shadow .2s}
.tool span small{font:500 .7rem/1.2 var(--mono);color:#a9bab4}
.tool input:checked+span{background:#eaf2ef;color:var(--ink);box-shadow:inset 0 1px 0 #fff}
.tool input:checked+span small{color:var(--ink-2)}
.tool input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.g-row{display:flex;gap:10px;margin-top:10px}
.pass{flex:1;min-height:50px;font-size:1.12rem;background:var(--em-hi);color:#032219;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.2),0 8px 16px -10px #000}
.pass:hover{background:#2bb98c}
.pass:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 6px -4px #000}
.reset{min-height:50px;padding:0 14px;border-radius:9px;border:0;cursor:pointer;background:rgba(255,255,255,.08);color:#dfe8e5;font:600 .9rem/1 var(--display);font-stretch:118%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.reset:hover{background:rgba(255,255,255,.14)}
.g-say{min-height:4.2em;margin-top:10px;font-size:.88rem;line-height:1.38;color:#dce7e3}
.g-say.stop{color:#ffb4a4}

.cut{position:relative;margin-top:clamp(14px,2vw,24px);height:clamp(260px,calc(100svh - 520px),470px)}
.cut canvas{width:100%;height:100%}
.tag{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;font-size:.82rem;line-height:1.2;text-align:center;transition:opacity .4s}
.tag b{display:block;font:700 .95rem/1.1 var(--display);font-stretch:120%}
.tag i{font-style:normal;font:500 .72rem/1.3 var(--mono);color:var(--ink-3)}
.tag.gone b{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink-3)}
.tag.gone i{color:var(--em)}
.tag.stay b{color:var(--stop)}
.hero-note{padding:12px 0 16px;background:var(--ecoat);color:#a9bab4;font-size:.8rem}

/* ===== приёмка ===== */
.pr-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 64px;align-items:start}
.car{position:relative}
.car svg{width:100%;height:auto}
.car .panel{cursor:pointer;transition:filter .2s}
.car .panel:hover,.car .panel.on{filter:brightness(1.18) saturate(1.1)}
.car .panel:focus-visible{outline:none;filter:brightness(1.25)}
.car .on-outline{stroke:#fff;stroke-width:3}
.reading{margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--ecoat);color:#eaf2ef;box-shadow:0 20px 30px -24px rgba(0,0,0,.8)}
.reading h3{font-size:1.15rem}
.pts{display:flex;flex-wrap:wrap;gap:6px 10px;margin:10px 0 8px}
.pts span{font:600 1.05rem/1 var(--mono);padding:7px 9px;border-radius:6px;background:rgba(255,255,255,.08)}
.pts span.hi{background:var(--stop);color:#fff}
.reading p{font-size:.95rem;color:#cbd8d3}
.act{list-style:none;margin:0;padding:0;counter-reset:a}
.act li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:18px 0;border-top:1px solid rgba(14,26,22,.16)}
.act li:last-child{border-bottom:1px solid rgba(14,26,22,.16)}
.act li::before{counter-increment:a;content:counter(a);grid-row:span 2;font:800 1.9rem/1 var(--display);font-stretch:150%;color:var(--em);min-width:1.4em}
.act h3{font-size:1.18rem}
.act p{color:var(--primer-ink);font-size:1rem}

/* ===== защита ===== */
.pro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 56px;align-items:start}
.pro-stage{position:relative;border-radius:16px;overflow:hidden;background:var(--air);box-shadow:inset 0 0 0 1px rgba(14,26,22,.08),0 30px 50px -36px rgba(14,26,22,.6)}
.pro-stage canvas{width:100%;height:clamp(260px,30vw,380px)}
.pro-ctl{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(255,255,255,.65);border-top:1px solid rgba(14,26,22,.08)}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--primer);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.seg button{border:0;background:transparent;padding:8px 12px;border-radius:8px;cursor:pointer;font:700 .95rem/1 var(--display);font-stretch:118%;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 2px 6px -2px rgba(0,0,0,.3)}
.hits{display:flex;gap:8px}
.hit{border:0;cursor:pointer;min-height:40px;padding:0 14px;border-radius:9px;background:var(--ink);color:#fff;font:700 .95rem/1 var(--display);font-stretch:118%;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.hit:hover{background:#22312c}
.pro-say{padding:14px 16px 18px;font-size:1rem;min-height:4.6em;color:var(--ink)}
.pro-say b{font-family:var(--display);font-stretch:118%}
.cover{display:grid;gap:28px}
.cover article{padding-top:18px;border-top:2px solid var(--ink)}
.cover .big{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px}
.cover .big b{font:600 2.4rem/1 var(--mono);letter-spacing:-.03em}
.cover .big span{color:var(--ink-2);font-size:.95rem}
.cover ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.cover li{position:relative;padding-left:22px;font-size:.98rem}
.cover li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--em)}
.cover li.no::before{background:var(--stop)}

/* ===== цена ===== */
.calc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 64px;align-items:start}
.c-group{border:0;margin:0 0 22px;padding:0}
.c-group legend{font:700 1.15rem/1.2 var(--display);font-stretch:125%;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt span{display:block;padding:10px 14px;border-radius:9px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);font-size:.98rem;line-height:1.2;transition:background .2s}
.opt span small{display:block;font-size:.8rem;color:rgba(255,255,255,.9)}
.opt input:checked+span{background:#f2f7f5;color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(0,0,0,.6)}
.opt input:checked+span small{color:var(--ink-2)}
.opt input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.bill{position:sticky;top:calc(var(--bar) + 20px);border-radius:16px;padding:22px 22px 18px;background:rgba(3,34,25,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 50px -30px rgba(0,0,0,.8)}
.bill-rows{list-style:none;margin:0;padding:0}
.bill-rows li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:.98rem}
.bill-rows li small{grid-column:1/-1;font:500 .74rem/1.3 var(--mono);color:#bfe3d6}
.bill-rows li .num{font-size:.92rem}
.bill-rows .empty{color:rgba(255,255,255,.7);font-style:italic}
.total{margin-top:16px}
.total b{display:block;font:800 clamp(2rem,3.4vw,2.9rem)/1 var(--display);font-stretch:140%}
.total span{display:block;margin-top:6px;font-size:.92rem;color:rgba(255,255,255,.82)}
.mic{margin-top:16px;display:grid;gap:6px;font:500 .78rem/1.3 var(--mono)}
.mic div{display:flex;align-items:center;gap:10px}
.mic i{display:block;height:8px;border-radius:2px;background:#dce9e4}
.mic .m-cut i{background:var(--cut)}
.mic .m-add i{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.bill .go{width:100%;margin-top:18px}
.hint{margin-top:10px;font-size:.88rem;color:#ffe0a8;min-height:1.2em}

/* ===== выдача: три света ===== */
.lights{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 56px;align-items:start}
.panel-stage{border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 60px -30px #000}
.panel-stage canvas{width:100%;height:clamp(260px,30vw,390px)}
.l-ctl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 14px;background:#141a1b}
.s-dark .seg{background:#0b0f10;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.s-dark .seg button{color:#b8c7c1}
.s-dark .seg button[aria-pressed="true"]{background:#eaf2ef;color:var(--ink)}
.l-say{padding:12px 14px 16px;background:#141a1b;color:#dce7e3;font-size:.95rem;min-height:3.6em}
.check{list-style:none;margin:0;padding:0;display:grid;gap:0}
.check li{padding:14px 0 14px 34px;position:relative;border-top:1px solid rgba(255,255,255,.14);font-size:.98rem;color:#d6e2de}
.check li b{display:block;color:#fff;font-family:var(--display);font-stretch:118%;font-size:1.08rem;margin-bottom:2px}
.check li::before{content:"";position:absolute;left:2px;top:19px;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 2px #9fb3ac}

/* ===== салон, если не так ===== */
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.steps{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.steps li{position:relative;padding:10px 14px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(14,26,22,.1);font-weight:600}
.steps li+li::before{content:"";position:absolute;left:22px;top:-12px;width:2px;height:12px;border-radius:1px;background:var(--em)}
.dont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.dont div{padding-top:14px;border-top:2px solid var(--ink)}
.dont h3{margin-bottom:6px}
.dont p{color:var(--ink-2)}
.claim{list-style:none;margin:0;padding:0}
.claim li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:6px 32px;padding:20px 0;border-top:1px solid rgba(14,26,22,.18)}
.claim li:last-child{border-bottom:1px solid rgba(14,26,22,.18)}
.claim h3{font-size:1.2rem}
.claim p{color:#2f3632}

/* ===== вопросы: вкладки по темам ===== */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px}
.tabs button{border:0;cursor:pointer;padding:10px 16px;border-radius:9px;background:#fff;color:var(--ink-2);font:700 1rem/1 var(--display);font-stretch:125%;box-shadow:inset 0 0 0 1px rgba(14,26,22,.12)}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 56px}
.qa[hidden]{display:none}
.qa div{max-width:60ch}
.qa h3{font-size:1.22rem;margin-bottom:8px}
.qa p{color:var(--ink-2)}

/* ===== запись ===== */
.end{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:end}
.end h2{max-width:18ch}
.end .acts{margin-top:0;justify-content:flex-start}
.end-num{font:600 clamp(3rem,6.2vw,5.6rem)/.9 var(--mono);letter-spacing:-.05em;margin:0}
.end-num em{font-style:normal;font-size:.4em;letter-spacing:0;margin-left:.2em}
.end-num small{display:block;font:500 1rem/1.4 var(--text);letter-spacing:0;margin-top:18px;color:#fff}

/* ===== подвал ===== */
.foot{background:var(--ecoat);color:#c7d4cf;padding:44px 0 36px;font-size:.92rem}
.foot .wrap{display:grid;gap:14px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.foot a{color:#eef4f2}
.foot-dev{color:#93a49e}

/* ===== окно записи ===== */
.dlg{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:16px;background:var(--air);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.dlg::backdrop{background:rgba(14,26,22,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg-form,.dlg-done{padding:26px 26px 22px;position:relative}
.dlg h2{font-size:1.9rem;font-stretch:135%;margin:4px 0 16px}
.dlg-x{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:10px;background:transparent;cursor:pointer;color:var(--ink)}
.dlg-x:hover{background:var(--glass)}
.dlg-x svg{margin:auto}
.dlg-demo{display:inline-block;padding:4px 10px;border-radius:6px;background:var(--ecoat);color:#eaf2ef;font-size:.8rem}
.dlg-calc{margin:-6px 0 14px;padding:10px 12px;border-radius:9px;background:var(--glass);font-size:.9rem}
.f-row{margin:0 0 14px;border:0;padding:0}
.f-row label,.f-row legend{display:block;font-weight:600;margin-bottom:6px;padding:0}
.f-row label span{font-weight:400;color:var(--ink-3);font-size:.88rem}
.f-row input,.f-row select,.f-row textarea{width:100%;min-height:46px;padding:10px 12px;border:0;border-radius:9px;background:#fff;color:var(--ink);font:inherit;box-shadow:inset 0 0 0 1px rgba(14,26,22,.22),inset 0 2px 3px rgba(0,0,0,.05)}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{outline:2px solid var(--em);outline-offset:1px}
.f-row input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--stop)}
.f-help{font-size:.82rem;color:var(--ink-3);margin-top:4px}
.f-err{font-size:.85rem;color:var(--stop);margin-top:4px}
.f-chips{display:flex;flex-wrap:wrap;gap:6px}
.f-chips label{position:relative;margin:0;font-weight:500}
.f-chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;min-height:0;box-shadow:none}
.f-chips span{display:block;padding:8px 12px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(14,26,22,.2);font-size:.92rem}
.f-chips input:checked+span{background:var(--em);color:#fff;box-shadow:none}
.f-chips input:focus-visible+span{outline:2px solid var(--em);outline-offset:2px}
.f-agree{border:0;margin:6px 0 12px;padding:12px 0 0;border-top:1px solid rgba(14,26,22,.12);display:grid;gap:10px}
.chk{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:.9rem;line-height:1.4;cursor:pointer}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--em)}
.chk small{grid-column:2;color:var(--ink-3);font-size:.8rem}
.f-send{width:100%}
.f-why{font-size:.85rem;color:var(--ink-3);margin-top:8px}
.f-note{font-size:.85rem;color:var(--ink-2);margin-top:6px}

/* ===== правовые страницы и 404 ===== */
.docpage .bar .nav{display:flex}
.doc{background:var(--air)}
.doc-in{max-width:780px}
.doc h1{font-size:clamp(2rem,4vw,3rem);font-stretch:140%;line-height:1.02;margin-bottom:18px}
.doc h2{font-size:1.45rem;font-stretch:125%;margin:34px 0 10px;max-width:none}
.doc p,.doc li{color:var(--ink-2);margin:0 0 10px}
.doc ul,.doc ol{padding-left:1.3em}
.doc .ver{font:500 .8rem/1.4 var(--mono);color:var(--ink-3);margin-bottom:24px}
.doc-nav a{padding:8px 10px}

/* ===== адаптив ===== */
@media (max-width:1180px){
  .nav a{padding:8px 9px;font-size:.92rem}
}
@media (max-width:1060px){
  .menu-btn{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:40px;padding:0 12px;border:0;border-radius:9px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(14,26,22,.14);font:700 .95rem/1 var(--display);font-stretch:118%;color:var(--ink);cursor:pointer}
  .nav{position:fixed;left:0;right:0;top:var(--bar);flex-direction:column;gap:0;margin:0;padding:8px var(--gut) 18px;background:rgba(240,246,244,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 30px -20px rgba(0,0,0,.4);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
  .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s var(--ease)}
  .nav a{padding:14px 4px;font-size:1.15rem;border-bottom:1px solid rgba(14,26,22,.1);border-radius:0}
  .glint{display:none}
  .hero-top{grid-template-columns:1fr}
  .gauge{max-width:560px}
  .pr-grid,.pro,.calc,.lights,.two,.end,.sec-head{grid-template-columns:1fr}
  .bill{position:relative;top:0}
}
@media (max-width:720px){
  :root{--bar:58px}
  .brand-t small{display:none}
  .brand-t b{font-size:1.02rem;font-stretch:130%}
  .bar{gap:10px}
  .bar .go-s{padding:0 12px;font-size:.9rem}
  .hero h1{font-size:clamp(1.95rem,8.6vw,2.6rem);font-stretch:122%}
  .hero h1 span{font-size:.66em;font-stretch:118%}
  h2{font-stretch:125%}
  .hero{display:flex;flex-direction:column;padding-top:18px}
  .hero-top,.hero-top>div:first-child{display:contents}
  .hero h1{order:1;margin:0 var(--gut)}
  .cut{order:2;height:260px;margin-top:6px}
  .gauge{order:3;margin:14px var(--gut) 0}
  .hero .lead{order:4;margin:20px var(--gut) 0}
  .hero .acts{order:5;margin:18px var(--gut) 26px}
  .hero-note{order:6}
  .tag i{display:none}
  .tag b{font-size:.82rem}
  .dont,.qa{grid-template-columns:1fr}
  .claim li{grid-template-columns:1fr}
  .act li{grid-template-columns:1fr}
  .act li::before{grid-row:auto}
  .dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .dlg-form,.dlg-done{padding:22px var(--gut) 28px}
}