/* ===== Главная v3 (Иван 14.10.2026, CURRENT_STATE §42) — поверх home.css. Токены Brand Book, новых HEX нет. ===== */

/* ----- Шапка: контакты вместо OFFER и CTRL ----- */
.v3-contact{display:flex;align-items:center;gap:6px;flex:none}
.v3-tel{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 5px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);color:var(--ink);font:800 14px/1 var(--font-body);white-space:nowrap;font-variant-numeric:tabular-nums}
.v3-tel svg{width:34px;height:34px;padding:9px;border-radius:50%;background:var(--ink);fill:var(--mint)}
.v3-tel:hover{border-color:var(--ink)}
.v3-write{height:44px;padding:0 18px;border-radius:var(--r-pill);border:0;background:var(--mint);color:#08110f;font:800 14px/1 var(--font-body);cursor:pointer;white-space:nowrap}
.v3-write:hover{background:var(--acid)}
.v3-tel:focus-visible,.v3-write:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
@media (max-width:1280px){.v3-tel b{display:none}.v3-tel{padding:0 4px}}
@media (max-width:620px){.v3-write{display:none}.v3 .site-header .lab{display:none}}

/* ----- Первый экран ----- */
.v3-hero .lead{max-width:34em}
.v3-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 10px}
.v3-req{min-height:56px;padding:0 24px;font-size:16px}
.v3-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:clamp(16px,2.4vh,26px) 0 0;font-size:14px;color:var(--muted-strong)}
.v3-facts span{display:inline-flex;align-items:center;gap:8px}
.v3-facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint-dark)}
.v3-facts b{color:var(--ink)}
.v3-facts a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.asm{gap:12px}
.asm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 0}
.asm-eye{color:var(--muted-strong);letter-spacing:.1em}
.asm-play{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer}
.asm-play:hover{border-color:var(--ink)}
.asm-play i{display:block;width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.asm-play[aria-pressed="true"] i{width:0;height:0;border:0;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.asm-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-l);background:var(--paper);overflow:hidden}

/* узлы появляются по одному: снизу, с пружинкой */
.asm .sys-svg .snode{transform-box:fill-box;transition:opacity .45s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.asm.sys .sys-svg .snode:not(.on){opacity:0;transform:translateY(26px);pointer-events:none}
.asm.sys[data-step="0"] .sys-svg .snode.on{opacity:1;transform:none}
.asm.sys:not([data-step="0"]) .sys-svg .snode.on{opacity:.38}
.asm.sys[data-step="1"] .sys-svg .snode.on[data-s="1"],.asm.sys[data-step="2"] .sys-svg .snode.on[data-s="2"],.asm.sys[data-step="3"] .sys-svg .snode.on[data-s="3"],.asm.sys[data-step="4"] .sys-svg .snode.on[data-s="4"]{opacity:1}
.asm.sys .sys-svg .snode.ghost.on{opacity:.45}
/* трубы: пока собираем — бледные, когда готово — течёт вода */
.asm .sys-svg .pipes{opacity:.35;transition:opacity .5s}
.asm .sys-svg .flows,.asm .sys-svg .bypass,.asm .sys-svg .drop{opacity:0;transition:opacity .6s}
.asm.done .sys-svg .pipes{opacity:1}
.asm.done .sys-svg .flows,.asm.done .sys-svg .bypass,.asm.done .sys-svg .drop{opacity:1}
.asm.reset .sys-svg .snode{opacity:0!important;transform:translateY(10px)}
.asm .sys-svg .halo{transition:fill-opacity .35s,stroke-opacity .35s}

.asm-dots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.asm-dots button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 10px 0 5px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--muted-strong);font:700 13px/1.1 var(--font-body);text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.asm-dots button i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--white);font:600 12px/1 var(--font-mono);font-style:normal;border:1px solid var(--line)}
.asm-dots button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asm-dots button.on{color:var(--ink)}
.asm-dots button.on i{background:var(--mint);border-color:var(--mint);color:#08110f}
.asm-dots button[aria-current="step"]{border-color:var(--ink);background:var(--white)}
.asm-dots button:hover{border-color:var(--ink)}
.asm-cap{min-height:76px;background:var(--paper);border-radius:var(--r-l);padding:12px 16px;transition:opacity .16s}
.asm-cap.fade{opacity:0}
.asm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;padding:0 4px}
.asm-sys{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 10px;color:var(--ink)}
.asm-sys .mono{grid-column:1/-1;color:var(--muted-strong);letter-spacing:.08em}
.asm-sys b{font:850 clamp(22px,1.8vw,28px)/1 var(--font-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.asm-sys small{font-size:13px;color:var(--muted-strong)}
.asm-sys:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .asm.done.live .flow{animation:sys-flow .9s linear infinite}
  .asm.done.live .flow.drain{animation-duration:1.6s}
  .asm.live .wave{animation:sys-wave 4.5s ease-in-out infinite alternate}
  .asm.done.live .drop{animation:sys-drop 1.8s ease-in infinite}
  .asm.done.live .pump-eye{animation:sys-spin 1.4s linear infinite;transform-box:fill-box;transform-origin:center}
}
@container sys (max-width:600px){
  .asm-dots{display:flex;gap:6px}
  .asm-dots li{flex:1 1 0;min-width:0}
  .asm-dots button{justify-content:center;padding:0 4px}
  .asm-dots button span{display:none}
}

@media (max-width:760px){ .home-hero .v3-facts{order:6;margin:0} }

/* ----- Системы: сразу после первого экрана, карточки компактнее ----- */
.v3-systems{padding-top:clamp(40px,6vw,80px)}
.v3-pick{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;background:var(--ink-surface);color:var(--on-dark);border-radius:var(--r-xl);padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,32px);margin:0 0 18px}
.v3-pick-txt{display:grid;gap:4px;min-width:0;max-width:44em}
.v3-pick-txt .mono{color:var(--mint);letter-spacing:.1em}
.v3-pick-txt b{font:850 clamp(22px,2vw,30px)/1.05 var(--font-display);letter-spacing:-.05em}
.v3-pick-txt small{font-size:15px;color:rgba(255,255,255,.72)}
.v3-pick .puffy{margin-right:28px}
.v3-grid .pcard{gap:8px;padding:12px}
.v3-grid .pc-svg{aspect-ratio:16/7}
.v3-grid .pc-name{min-height:0;font-size:clamp(17px,1.2vw,20px)}
.v3-grid .pc-desc{min-height:0;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v3-grid .pc-specs{padding:7px 0;font-size:13px}
.v3-grid .pc-specs small{font-size:11px}
.v3-grid .pc-price b{font-size:clamp(19px,1.35vw,23px)}
.v3-grid .pc-price small{font-size:12px}
.v3-grid .pc-go{width:38px;height:38px}
.v3-grid .pcard[data-code="01"] .pc-price b{color:inherit}
.v3-grid .pcard[data-code="03"] .pc-price b{color:var(--mint-dark)}
.v3-own{background:var(--paper-2);border-style:dashed;justify-content:flex-start}
.v3-own>.mono{color:var(--muted-strong);letter-spacing:.1em}
.v3-own .pc-desc{-webkit-line-clamp:4}
.v3-own-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.v3-own-act .btn{min-height:44px;padding:0 16px;font-size:14px}

/* ----- Шаг 06: шкала ppm ----- */
.ppm{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,48px);align-items:center;margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(18px,2.4vw,32px)}
.ppm-copy .mono{color:var(--muted-strong);letter-spacing:.1em}
.ppm-copy h3{margin:6px 0 10px;font:850 clamp(24px,2.2vw,34px)/1.05 var(--font-display);letter-spacing:-.05em}
.ppm-copy h3 em{font-style:normal;background:linear-gradient(var(--mint),var(--mint)) 0 88%/100% .22em no-repeat}
.ppm-copy p{margin:0;font-size:16px;line-height:1.45;color:var(--muted-strong)}
.ppm-copy p b{color:var(--ink)}
.ppm-bar{position:relative;height:22px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--mint) 0%,color-mix(in srgb,var(--mint) 30%,var(--paper-2)) 12%,var(--paper-2) 40%,color-mix(in srgb,var(--orange) 35%,var(--paper-2)) 83.3%,color-mix(in srgb,var(--orange) 70%,var(--paper-2)) 100%);overflow:hidden}
.ppm-ours{position:absolute;left:0;top:0;bottom:0;width:8.33%;border-right:2px solid var(--ink)}
.ppm-bar::after{content:"";position:absolute;left:83.3%;top:0;bottom:0;border-left:2px dashed var(--ink)}
.ppm-ticks{position:relative;height:22px;margin-top:6px;font:500 12px/1 var(--font-mono);color:var(--muted-strong)}
.ppm-ticks span{position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%)}
.ppm-ticks span:first-child{transform:none}
.ppm-legend{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.ppm-legend li{position:relative;padding-left:24px;line-height:1.35}
.ppm-legend li::before{content:"";position:absolute;left:0;top:.2em;width:14px;height:14px;border-radius:4px}
.l-ours::before{background:var(--mint)}
.l-norm::before{background:color-mix(in srgb,var(--orange) 55%,var(--paper-2))}
.l-you::before{background:var(--blue)}
.ppm-lab{border:0;background:none;padding:0;min-height:32px;font:800 15px var(--font-body);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:900px){.ppm{grid-template-columns:1fr}}

/* ----- Партнёрам: значки инструментов ----- */
.v3-tool{display:inline-block;padding:3px 8px;border-radius:var(--r-pill);background:var(--acid);color:#08110f;font:600 11px/1 var(--font-mono);letter-spacing:.07em;vertical-align:1px}
.v3-tool+.v3-tool{background:#e9ebe6;color:#13201c}

/* ----- Нижняя панель связи на телефоне ----- */
.v3-bar{display:none}
@media (max-width:760px){
  .v3-bar{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px;border-radius:var(--r-pill);background:var(--ink-surface);box-shadow:0 14px 34px rgba(8,17,15,.3);transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .v3-bar.show{transform:none}
  .v3-bar a,.v3-bar button{display:grid;place-items:center;min-height:48px;border-radius:var(--r-pill);border:0;background:rgba(255,255,255,.08);color:var(--on-dark);font:800 15px/1 var(--font-body);cursor:pointer}
  .v3-bar .js-wizard{background:var(--mint);color:#08110f}
  .v3-bar-on .puf:not(.visit){bottom:84px}
}

/* ===== Итерация 2 (Иван 14.10): подбор в шапке, объекты на первом экране, путь воды ===== */
.v3-pickbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 6px;border-radius:var(--r-pill);background:var(--mint);color:#08110f;font:800 14px/1 var(--font-body);white-space:nowrap;border:2px solid #08110f;box-shadow:3px 3px 0 #08110f;transition:transform .2s,box-shadow .2s}
.v3-pickbtn i{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid #08110f;position:relative}
.v3-pickbtn i::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#08110f;left:7px;top:7px}
.v3-pickbtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #08110f;background:var(--acid)}
.v3-contact .v3-write{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.v3-contact .v3-write:hover{background:var(--white);border-color:var(--ink)}
@media (max-width:1440px){.v3-tel b{display:none}.v3-tel{padding:0 4px}}
@media (max-width:1120px){.v3-contact .v3-write{display:none}}
@media (max-width:760px){.v3-pickbtn{display:none}}

.v3-route{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:6px 20px 6px 6px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,transform .2s}
.v3-route i{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink)}
.v3-route i::after{content:"";border-left:13px solid var(--mint);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.v3-route b{display:block;font:800 16px/1.1 var(--font-body)}
.v3-route small{display:block;margin-top:2px;font-size:13px;color:var(--muted-strong)}
.v3-route:hover{border-color:var(--ink);transform:translateY(-1px)}

.v3-show{display:flex;flex-direction:column;gap:10px;min-width:0}
.v3-tabs{display:flex;gap:6px;padding:4px;border-radius:var(--r-pill);background:var(--paper-2);align-self:flex-start;max-width:100%}
.v3-tabs button{min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--muted-strong);font:700 14px var(--font-body);cursor:pointer;white-space:nowrap}
.v3-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.v3-pan[hidden]{display:none!important}
.v3-objs{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr auto;gap:8px;height:min(calc(100svh - 230px),600px);min-height:380px}
.v3-ph{position:relative;display:block;padding:0;border:0;border-radius:var(--r-l);overflow:hidden;background:var(--paper-2);cursor:pointer;min-height:0}
.v3-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.v3-ph:hover img{transform:scale(1.04)}
.ph-big{grid-row:1/3}
.v3-ph-cap{position:absolute;left:8px;right:8px;bottom:8px;display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-m);background:color-mix(in srgb,#08110f 72%,transparent);color:#fff;text-align:left;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.v3-ph-cap small{color:var(--mint);letter-spacing:.08em}
.v3-ph-cap b{font:800 15px/1.15 var(--font-body)}
.v3-ph:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.v3-objs-all{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 18px;border-radius:var(--r-pill);background:var(--ink-surface);color:var(--on-dark);font:800 15px var(--font-body)}
.v3-objs-all span{color:var(--mint);font-size:18px}
.v3-objs-all:hover span{transform:translateX(3px)}
.v3-pick-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:44px;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.v3-pick-link b{font-weight:800}
.v3-pick-link:hover{text-decoration-thickness:2px}
@media (max-width:760px){
  .home-hero .v3-show{order:5}
  .v3-objs{height:auto;min-height:0;grid-template-rows:auto;grid-auto-rows:150px}
  .ph-big{grid-row:auto;grid-column:1/-1;height:300px}
  .v3-route{width:100%}
}

/* ===== Итерация 3 (Иван 14.10): ролик в большой плитке, малые плитки объектов, полоса технологий ===== */
.v3-show{display:grid;grid-template-rows:auto auto;gap:10px;min-width:0}
.v3-film{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--paper-2);aspect-ratio:16/9;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(8,17,15,.35)}
.v3-film video{display:block;width:100%;height:100%;object-fit:cover}
.v3-film-cap{position:absolute;left:14px;bottom:14px;display:grid;gap:3px;padding:10px 16px;border-radius:var(--r-m);background:var(--ink-surface);color:#fff;box-shadow:0 10px 24px rgba(8,17,15,.25);transition:transform .2s}
.v3-film-cap .mono{color:var(--mint);letter-spacing:.1em}
.v3-film-cap b{font:850 clamp(18px,1.4vw,22px)/1 var(--font-display);letter-spacing:-.04em}
.v3-film-cap:hover{transform:translateY(-2px)}
.v3-film-play{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer;opacity:.85}
.v3-film-play:hover{opacity:1;border-color:var(--ink)}
.v3-film-play i{display:block;width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.v3-film.paused .v3-film-play i{width:0;height:0;border:0;border-left:11px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.v3-objs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none!important;grid-auto-rows:auto!important;gap:10px;height:auto!important;min-height:0!important}
.v3-objs .v3-ph{aspect-ratio:4/3;height:auto!important;grid-row:auto!important;grid-column:auto!important}
.v3-objs .v3-ph-cap{left:6px;right:6px;bottom:6px;padding:6px 8px;border-radius:10px}
.v3-objs .v3-ph-cap small{font-size:10.5px}
.v3-ph-all{display:flex!important;flex-direction:column;justify-content:flex-end;gap:2px;padding:12px 14px;background:var(--acid)!important;color:#08110f;text-align:left}
.v3-ph-all b{font:850 clamp(16px,1.2vw,20px)/1.05 var(--font-display);letter-spacing:-.04em}
.v3-ph-all small{font-size:13px}
.v3-ph-all span{position:absolute;top:10px;right:12px;font:800 22px/1 var(--font-body);transition:transform .2s}
.v3-ph-all:hover span{transform:translateX(3px)}
/* полоса технологий под кнопками */
.v3-tech{list-style:none;margin:clamp(18px,2.6vh,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:640px}
.v3-tech a,.v3-tech-s{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px 6px 6px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.2;transition:border-color .2s,transform .2s}
.v3-tech a:hover{border-color:var(--ink);transform:translateY(-1px)}
.v3-tech i{flex:none;display:grid;place-items:center;min-width:56px;height:38px;padding:0 10px;border-radius:var(--r-pill);font:600 11px/1 var(--font-mono);font-style:normal;letter-spacing:.07em}
.v3-tech b{font-weight:800}
.t-atlas{background:linear-gradient(100deg,var(--mint),var(--acid));color:#08110f}
.t-lab{background:var(--blue);color:#fff}
.t-max{background:var(--ink-surface);color:var(--mint)}
.t-ok{background:var(--acid);color:#08110f}
@media (max-width:760px){
  .v3-tech{grid-template-columns:1fr}
  .v3-objs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-hero .v3-tech{order:6}
}

/* акценты блоков и шапка с OFFER/CTRL (итерация 3) */
@media (max-width:1860px){.v3 .tools .tl b{display:none}.v3 .tools .tl{padding:0 5px}}
@media (max-width:1440px){.v3 .site-header .wrap{gap:14px}}
.v3-pickrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.v3-pickrow span{font-size:15px;color:var(--muted-strong)}
.v3-pick-btn{min-height:52px;padding:0 24px;font-size:16px}
.v3-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.v3-cta .btn{min-height:56px;padding:0 26px;font-size:16px}
.v3-cta span{font-size:15px;color:var(--muted-strong)}
.v3-ask{margin:14px 0 6px;min-height:52px}
.ppm-lab{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--blue);color:#fff;text-decoration:none;font:800 14px var(--font-body)}
.ppm-lab:hover{background:color-mix(in srgb,var(--blue) 86%,#000)}
.v3-tech a{text-decoration:none}
@media (max-width:760px){
  .v3-film{border-radius:var(--r-l)}
  .v3-film-cap{left:8px;bottom:8px;padding:6px 10px;border-radius:12px}
  .v3-film-cap .mono{font-size:9.5px}
  .v3-film-cap b{font-size:14px}
  .v3-film-play{right:8px;bottom:8px;width:34px;height:34px}
}

/* ===== Итерация 4 (Иван 14.10): спокойная шапка, «Что у вас?», ссылка на Карту воды ===== */
/* шапка: один сменяемый сервис + «Все сервисы» */
.v3-svc{position:relative;display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.v3-svc-rot{position:relative;width:190px;height:44px}
.v3-svc-rot .tl{position:absolute;inset:0 auto 0 0;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.v3-svc-rot .tl.on{opacity:1;transform:none;pointer-events:auto}
.v3-svc-rot .tl b{display:inline!important}
.v3-svc-all{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);color:var(--ink);font:700 14px var(--font-body);cursor:pointer;white-space:nowrap}
.v3-svc-all:hover,.v3-svc.open .v3-svc-all{border-color:var(--ink)}
.v3-svc-all i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper-2)}
.v3-svc-all i::before{content:"";width:6px;height:6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.v3-svc.open .v3-svc-all i::before{transform:translateY(1px) rotate(225deg)}
.v3-svc-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:70;width:380px;display:grid;gap:6px;padding:14px;border-radius:var(--r-l);background:var(--white);border:1px solid var(--line);box-shadow:0 24px 60px rgba(8,17,15,.18);animation:pop .25s cubic-bezier(.2,.7,.2,1)}
.v3-svc-panel .mono{margin:0 4px 4px;color:var(--muted-strong);letter-spacing:.1em}
.v3-svc-panel .sv{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--r-m);color:var(--ink);transition:background .2s}
.v3-svc-panel .sv:hover{background:var(--paper)}
.v3-svc-panel .sv i{flex:none;display:grid;place-items:center;min-width:62px;height:38px;border-radius:var(--r-pill);font:600 11px/1 var(--font-mono);font-style:normal;letter-spacing:.07em}
.v3-svc-panel .sv b{display:block;font:800 15px/1.15 var(--font-body)}
.v3-svc-panel .sv small{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--muted-strong)}
.sv-lab i{background:var(--blue);color:#fff}
.sv-atlas i{background:linear-gradient(100deg,var(--mint),var(--acid));color:#08110f}
.sv-offer i{background:var(--acid);color:#08110f}
.sv-ctrl i{background:var(--ink-surface);color:var(--mint)}
@media (max-width:1440px){.v3-svc-rot{width:52px}.v3-svc-rot .tl b{display:none!important}.v3-svc-rot .tl{padding:0 5px}}
@media (max-width:1120px){.v3-svc-all span{display:none}.v3-svc-all{padding:0 10px}}
@media (max-width:900px){.v3-svc{display:none}}
/* спокойнее: «Подбор онлайн» в шапке без тени-обводки, «Написать» — текстовая */
.v3-pickbtn{box-shadow:none;border-width:1.5px}
.v3-pickbtn:hover{box-shadow:none;transform:translateY(-1px)}

/* ссылка на Карту воды в абзаце первого экрана */
.v3-atlas-link{display:inline-flex;align-items:center;gap:6px;padding:1px 10px 1px 3px;border-radius:var(--r-pill);background:var(--ink-surface);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;vertical-align:1px;transition:transform .2s}
.v3-atlas-link i{display:grid;place-items:center;height:22px;padding:0 7px;border-radius:var(--r-pill);background:linear-gradient(100deg,var(--mint),var(--acid));color:#08110f;font:600 10px/1 var(--font-mono);font-style:normal;letter-spacing:.07em}
.v3-atlas-link:hover{transform:translateY(-1px)}

/* «Что у вас?» */
.v3-seg{margin-top:clamp(18px,2.8vh,30px);padding-top:clamp(14px,2vh,20px);border-top:1px solid var(--line)}
.v3-seg-q{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px}
.v3-seg-q b{font:850 clamp(20px,1.6vw,26px)/1.05 var(--font-display);letter-spacing:-.05em}
.v3-seg-q span{font-size:14px;color:var(--muted-strong)}
.v3-seg-chips{display:flex;flex-wrap:wrap;gap:6px}
.v3-seg-chips button{min-height:42px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);color:var(--ink);font:700 14px/1.1 var(--font-body);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.v3-seg-chips button:hover{border-color:var(--ink);transform:translateY(-1px)}
.v3-seg-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.v3-seg-ans{margin-top:12px;padding:12px 14px;border-radius:var(--r-l);background:var(--white);border:1px solid var(--line);animation:pop .3s cubic-bezier(.2,.7,.2,1)}
.v3-seg-ans .mono{display:block;margin-bottom:8px;color:var(--mint-dark);letter-spacing:.1em}
.v3-seg-steps{display:flex;flex-wrap:wrap;gap:6px}
.v3-seg-steps button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);color:var(--ink);font:700 14px var(--font-body);cursor:pointer}
.v3-seg-steps button:hover{border-color:var(--ink)}
.v3-seg-steps button.main{background:var(--mint);border-color:var(--mint);color:#08110f}
@media (max-width:760px){.home-hero .v3-seg{order:6}}
/* баланс акцентов: плитка «Все объекты» спокойнее */
.v3-ph-all{background:var(--ink-surface)!important;color:#fff}
.v3-ph-all span{color:var(--mint)}
.v3-seg-chips button{min-height:38px;padding:0 13px;font-size:13.5px}
@media (min-width:761px) and (max-height:960px){.v3-hero .lead{margin-top:12px}.v3-seg{margin-top:16px;padding-top:12px}.v3-seg-q{margin-bottom:8px}}
@media (max-width:760px){.home-hero .v3-seg{order:5}.home-hero .v3-show{order:6}}

/* ===== Итерация 5: подсветка блока, на который указывает иглобрюх; без пустых карточек; ролик для телефона ===== */
.v3-glow{position:relative;border-radius:var(--r-l);animation:v3glow 1.4s ease-in-out 3}
@keyframes v3glow{0%,100%{box-shadow:0 0 0 0 rgba(36,216,188,0)}50%{box-shadow:0 0 0 6px rgba(36,216,188,.45),0 0 34px 6px rgba(36,216,188,.25)}}
@media (prefers-reduced-motion:reduce){.v3-glow{animation:none;box-shadow:0 0 0 3px var(--mint)}}
.v3 .obj-card.slot{display:none}
@media (max-width:760px){.v3-film{aspect-ratio:1080/1240}}

/* ===== Итерация 6 (Иван 14.10): мозаика объектов, ролик стоит на цене, кнопки без чёрного ===== */
/* мозаика объектов */
#live .live-tabs,#live .live-strip{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
.v3-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,13vw,220px);gap:10px;margin-top:6px}
.bt{position:relative;display:block;padding:0;border:0;border-radius:var(--r-l);overflow:hidden;background:var(--paper-2);color:#fff;text-align:left;cursor:pointer;font:inherit}
.bt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.bt:hover img{transform:scale(1.05)}
.bt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,17,15,.72));pointer-events:none}
.bt-big{grid-column:span 2;grid-row:span 2}
.bt-tall{grid-row:span 2}
.bt-slides img{opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 6s linear}
.bt-slides img.on{opacity:1;transform:scale(1)}
.bt-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:grid;gap:3px}
.bt-cap small{color:var(--mint);letter-spacing:.08em}
.bt-cap b{font:800 clamp(15px,1.15vw,19px)/1.15 var(--font-body)}
.bt-big .bt-cap b{font:850 clamp(20px,1.8vw,30px)/1.05 var(--font-display);letter-spacing:-.04em;max-width:22ch}
.bt-n{position:absolute;top:12px;right:12px;z-index:1;padding:5px 9px;border-radius:var(--r-pill);background:rgba(8,17,15,.6);color:#fff;font-size:11px}
.bt-dev .bt-cap small{color:var(--acid)}
.bt:focus-visible{outline:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.bt-cta{grid-column:span 1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:16px;background:linear-gradient(140deg,var(--mint-soft),var(--white));color:var(--ink);border:1px solid var(--line);cursor:default}
.bt-cta::after{display:none}
.bt-cta small{color:var(--mint-dark);letter-spacing:.08em}
.bt-cta b{font:850 clamp(18px,1.5vw,24px)/1.05 var(--font-display);letter-spacing:-.04em}
.bt-cta span{font-size:13px;color:var(--muted-strong)}
.bt-cta .btn{height:44px;padding:0 16px;margin-top:4px;font-size:14px;align-self:flex-start}
@media (max-width:900px){.v3-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:170px}.bt-big{grid-column:span 2}.bt-cta{grid-column:span 2}}

/* ролик стоит на последнем кадре с ценой; «Смотреть ещё раз» */
.v3-film.ended .v3-film-cap,.v3-film.ended .v3-film-play{opacity:0;pointer-events:none}
.v3-film-again{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 8px;border-radius:var(--r-pill);border:0;background:var(--mint);color:#08110f;font:800 14px var(--font-body);cursor:pointer;box-shadow:0 10px 24px rgba(8,17,15,.3);animation:pop .3s cubic-bezier(.2,.7,.2,1)}
.v3-film-again i{width:30px;height:30px;border-radius:50%;background:#08110f;display:grid;place-items:center}
.v3-film-again i::after{content:"";border-left:10px solid var(--mint);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.v3-film-again[hidden]{display:none}

/* --- вид кнопок: data-btn="steel" | "grad" (переключатель внизу слева на /v3/) --- */
:root{--steel:linear-gradient(180deg,#fdfefe 0%,#e6ebed 44%,#cdd5d8 56%,#eff3f4 100%);--steel-hi:linear-gradient(180deg,#ffffff 0%,#eef2f3 44%,#d9e0e3 56%,#f6f8f9 100%);
  --steel-sh:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(8,17,15,.10),0 10px 22px -12px rgba(8,17,15,.45);--grad:linear-gradient(100deg,var(--mint),var(--acid))}
:root[data-theme="dark"]{--steel:linear-gradient(180deg,#4b5856 0%,#2c3735 46%,#202a28 54%,#36423f 100%);--steel-hi:linear-gradient(180deg,#56635f 0%,#34403d 46%,#27312f 54%,#3e4a47 100%);
  --steel-sh:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px -12px rgba(0,0,0,.6)}
[data-btn="steel"] .btn-main{background:var(--steel);color:var(--ink);border-color:rgba(8,17,15,.16);box-shadow:var(--steel-sh)}
[data-btn="steel"] .btn-main:hover{background:var(--steel-hi);border-color:rgba(8,17,15,.3)}
[data-btn="steel"] .btn-main .arr{color:var(--mint-dark)}
[data-btn="grad"] .btn-main{background:var(--grad);background-size:160% 100%;color:#08110f;border-color:transparent;box-shadow:0 10px 22px -12px rgba(11,136,118,.6)}
[data-btn="grad"] .btn-main:hover{background-position:100% 0}
[data-btn="grad"] .btn-main .arr{color:#08110f}
/* выбранные фильтры и «Что у вас?» */
[data-btn="steel"] :is(.sys-filter button,.v3-seg-chips button)[aria-pressed="true"]{background:var(--steel);color:var(--ink);border-color:var(--mint-dark);box-shadow:var(--steel-sh),inset 0 0 0 1px var(--mint-dark)}
[data-btn="grad"] :is(.sys-filter button,.v3-seg-chips button)[aria-pressed="true"]{background:var(--grad);color:#08110f;border-color:transparent}
/* тёмные плашки на первом экране */
[data-btn="steel"] .v3-film-cap{background:var(--steel);color:var(--ink);box-shadow:var(--steel-sh)}
[data-btn="steel"] .v3-film-cap .mono{color:var(--mint-dark)}
[data-btn="grad"] .v3-film-cap{background:var(--grad);color:#08110f}
[data-btn="grad"] .v3-film-cap .mono{color:#0b4f45}
[data-btn="steel"] .v3-ph-all{background:var(--steel)!important;color:var(--ink);box-shadow:var(--steel-sh)}
[data-btn="steel"] .v3-ph-all span{color:var(--mint-dark)}
[data-btn="grad"] .v3-ph-all{background:var(--grad)!important;color:#08110f}
[data-btn="grad"] .v3-ph-all span{color:#08110f}
[data-btn="steel"] .v3-route i,[data-btn="steel"] .v3-tel svg{background:var(--steel);box-shadow:var(--steel-sh)}
[data-btn="steel"] .v3-route i::after{border-left-color:var(--mint-dark)}
[data-btn="steel"] .v3-tel svg{fill:var(--mint-dark)}
[data-btn="grad"] .v3-route i,[data-btn="grad"] .v3-tel svg{background:var(--grad)}
[data-btn="grad"] .v3-route i::after{border-left-color:#08110f}
[data-btn="grad"] .v3-tel svg{fill:#08110f}
[data-btn="steel"] .v3-atlas-link{background:var(--steel);color:var(--ink);box-shadow:var(--steel-sh)}
[data-btn="grad"] .v3-atlas-link{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--mint)}
[data-btn="steel"] .v3-film-again i,[data-btn="grad"] .v3-film-again i{background:#fff}
[data-btn="steel"] .v3-film-again i::after,[data-btn="grad"] .v3-film-again i::after{border-left-color:var(--mint-dark)}

/* переключатель вида кнопок — только на /v3/, для выбора */
.v3-btnsw{position:fixed;left:12px;bottom:12px;z-index:80;display:flex;align-items:center;gap:4px;padding:5px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);box-shadow:0 10px 26px rgba(8,17,15,.16)}
.v3-btnsw .mono{padding:0 6px 0 8px;color:var(--muted-strong);font-size:10.5px}
.v3-btnsw button{min-height:32px;padding:0 12px;border-radius:var(--r-pill);border:0;background:transparent;color:var(--ink);font:700 12.5px var(--font-body);cursor:pointer}
.v3-btnsw button[aria-pressed="true"]{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:760px){.v3-btnsw{bottom:auto;top:74px;left:8px}}

/* ===== Итерация 7 (Иван 14.10): объёмные кнопки в родных цветах — «сайт из 2D в 3D».
   Два варианта: data-btn="metal" — металл/графит с бликом и фаской; data-btn="keys" — матовые клавиши с «ступенькой», нажимаются вниз.
   Цвета родные: тёмные — графит, мятные — мята, белые — сталь, LAB — синий, OFFER — кислотный. Нажатые фильтры — «утоплены» и с мятным светодиодом. ===== */
:root[data-btn="metal"]{
  --g-ink:linear-gradient(180deg,#46534f 0%,#1f2a27 46%,#0f1816 54%,#1f2a28 100%);
  --g-mint:linear-gradient(180deg,#8ef4e4 0%,#3adec4 46%,#1fc7ac 54%,#41e0c7 100%);
  --g-white:linear-gradient(180deg,#ffffff 0%,#eef2f3 46%,#d9e0e3 54%,#f6f8f9 100%);
  --g-blue:linear-gradient(180deg,#95a2ff 0%,#5a6dff 46%,#3c51f3 54%,#5c6fff 100%);
  --g-acid:linear-gradient(180deg,#f6ffc2 0%,#dfff5c 46%,#c6ec2c 54%,#e4ff78 100%);
  --hl-dark:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.45);
  --hl-light:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(8,17,15,.16);
  --lh:0px;--lh-act:0px;--press:1px;
  --drop:0 1px 1px rgba(8,17,15,.22),0 8px 16px -8px rgba(8,17,15,.5);--drop-act:0 1px 1px rgba(8,17,15,.2)}
:root[data-btn="keys"]{
  --g-ink:linear-gradient(180deg,#2e3a37,#151f1c);
  --g-mint:linear-gradient(180deg,#55e8d0,#25d0b5);
  --g-white:linear-gradient(180deg,#ffffff,#eef1f2);
  --g-blue:linear-gradient(180deg,#6a7bff,#4459f6);
  --g-acid:linear-gradient(180deg,#e9ff84,#d3f83e);
  --l-ink:#020605;--l-mint:#0f927c;--l-white:#bfc9cd;--l-blue:#2a3abd;--l-acid:#9ab91a;
  --hl-dark:inset 0 1px 0 rgba(255,255,255,.14);
  --hl-light:inset 0 1px 0 rgba(255,255,255,.95);
  --lh:4px;--lh-act:1px;--press:3px;
  --drop:0 12px 18px -10px rgba(8,17,15,.45);--drop-act:0 4px 8px -6px rgba(8,17,15,.35)}
:root[data-theme="dark"]:is([data-btn="metal"],[data-btn="keys"]){--g-white:linear-gradient(180deg,#4a5754 0%,#2c3735 50%,#232d2b 100%);--l-white:#0b1110;--hl-light:inset 0 1px 0 rgba(255,255,255,.16)}

/* роли */
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.btn-main,.v3-film-cap,.v3-ph-all,.v3-atlas-link,.asm-all){
  background:var(--g-ink)!important;color:#fff;border-color:transparent;--ledge:var(--l-ink,transparent);box-shadow:var(--hl-dark),0 var(--lh) 0 var(--ledge),var(--drop)}
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.btn-main,.asm-all) .arr{color:var(--mint)}
:root:is([data-btn="metal"],[data-btn="keys"]) .v3-film-cap .mono,:root:is([data-btn="metal"],[data-btn="keys"]) .v3-ph-all span{color:var(--mint)}
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.v3-pickbtn,.v3-seg-steps button.main,.v3-film-again){
  background:var(--g-mint);color:#08110f;border-color:transparent;--ledge:var(--l-mint,transparent);box-shadow:var(--hl-light),0 var(--lh) 0 var(--ledge),var(--drop)}
/* 14.10, итерация 8: металл — только у тёмных и цветных кнопок и у тумблеров; белые кнопки — плоские */
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.sys-filter button,.v3-seg-chips button){
  background:var(--g-white);color:var(--ink);border-color:rgba(8,17,15,.14);--ledge:var(--l-white,transparent);box-shadow:var(--hl-light),0 var(--lh) 0 var(--ledge),var(--drop)}
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.tl-lab,.ppm-lab){background:var(--g-blue);color:#fff;border-color:transparent;--ledge:var(--l-blue,transparent);box-shadow:var(--hl-light),0 var(--lh) 0 var(--ledge),var(--drop)}
:root:is([data-btn="metal"],[data-btn="keys"]) .tl-offer{background:var(--g-acid);--ledge:var(--l-acid,transparent);box-shadow:var(--hl-light),0 var(--lh) 0 var(--ledge),var(--drop)}
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.tl-atlas,.tl-ctrl){--ledge:var(--l-ink,transparent);box-shadow:var(--hl-dark),0 var(--lh) 0 var(--ledge),var(--drop)}
/* значки-кружки внутри кнопок — тоже объёмные */
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.v3-route i,.v3-tel svg,.v3-film-again i,.v3-svc-all i){background:var(--g-ink);box-shadow:var(--hl-dark),0 2px 4px -1px rgba(8,17,15,.45)}
:root:is([data-btn="metal"],[data-btn="keys"]) .v3-route i::after{border-left-color:var(--mint)}
:root:is([data-btn="metal"],[data-btn="keys"]) .v3-tel svg{fill:var(--mint)}
:root:is([data-btn="metal"],[data-btn="keys"]) .v3-film-again i::after{border-left-color:var(--mint)}
:root:is([data-btn="metal"],[data-btn="keys"]) .v3-svc-all i::before{border-color:var(--mint)}
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.tl i,.sv i){box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(8,17,15,.3)}
/* нажатие: кнопка уходит вниз */
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.btn,.v3-pickbtn,.v3-tel,.v3-write,.v3-svc-all,.theme-btn,.nav a,.sys-filter button,.v3-seg-chips button,.v3-seg-steps button,.v3-route,.v3-film-again,.tl,.ppm-lab,.faq-link):active{
  transform:translateY(var(--press))!important;box-shadow:inset 0 2px 4px rgba(8,17,15,.22),0 var(--lh-act) 0 var(--ledge),var(--drop-act)!important}
/* выбранные фильтры и «Что у вас?» — утоплены, графит, мятный светодиод */
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.sys-filter button,.v3-seg-chips button)[aria-pressed="true"]{
  background:var(--g-ink);color:#fff;border-color:transparent;transform:translateY(calc(var(--press) - 1px));
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.08),0 calc(var(--lh) - 2px) 0 var(--l-ink,transparent)}
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.sys-filter button,.v3-seg-chips button)::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:rgba(8,17,15,.18);box-shadow:inset 0 1px 1px rgba(0,0,0,.25);vertical-align:1px;transition:background .25s,box-shadow .25s}
:root:is([data-btn="metal"],[data-btn="keys"]) :is(.sys-filter button,.v3-seg-chips button)[aria-pressed="true"]::before{background:var(--mint);box-shadow:0 0 6px 1px rgba(36,216,188,.8),0 0 0 2px rgba(36,216,188,.2)}
/* «клавиши»: место под ступеньку, чтобы ряды не слипались */
:root[data-btn="keys"] :is(.sys-filter,.v3-seg-chips,.v3-seg-steps){row-gap:10px}
:root[data-btn="keys"] :is(.btn,.v3-route){margin-bottom:4px}


/* ===== Итерация 8 (Иван 14.10): спокойнее — меньше жирного и крупного, 1–2 акцента на экран; металл только у тёмных/цветных и тумблеров ===== */
/* шапка: маленький иглобрюх-кнопка с хвостиком, текст сменяется как на табло */
.pf-mini{min-height:44px;gap:8px;padding:4px 18px 4px 5px;margin-right:16px;border-width:2px;box-shadow:3px 3px 0 #08110f;animation:none!important}
.pf-mini .pf-eye{width:26px;height:26px;border-width:2px}
.pf-mini .pf-eye::after{width:9px;height:9px;right:4px;top:5px}
.pf-mini .pf-tail{right:-17px;width:18px;height:24px}
.pf-mini:hover,.pf-mini:focus-visible{transform:translateY(-1px) rotate(-1deg)}
.pf-mini:focus-visible{box-shadow:3px 3px 0 #08110f,0 0 0 3px var(--paper),0 0 0 5px #08110f}
.pf-rot{position:relative;display:grid;min-width:142px;height:20px;overflow:hidden}
.pf-rot b{grid-area:1/1;font:800 14px/20px var(--font-body);white-space:nowrap;opacity:0;transform:translateY(100%);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.pf-rot b.on{opacity:1;transform:none}
.pf-rot b.out{opacity:0;transform:translateY(-100%)}
@media (max-width:760px){.pf-mini{display:none}}
/* телефон — только трубка; «Написать» — с конвертом */
.v3-tel{padding:0 4px!important;width:44px;justify-content:center}
.v3-tel b{display:none}
.v3-write{display:inline-flex;align-items:center;gap:8px;padding:0 16px 0 12px}
.v3-write svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

/* заголовки разделов — меньше; жирным остаётся заголовок раздела, остальное — обычным */
.v3 :is(.sec-head h2,.proc-head h2){font-size:clamp(30px,3.1vw,52px)}
.v3 .sec-head{margin-bottom:22px}
.v3-seg-q b{font-size:clamp(18px,1.3vw,22px)}
/* карточки систем: название и цена — без «плакатного» шрифта */
.v3-grid .pc-name{font:700 clamp(16px,1.05vw,18px)/1.2 var(--font-body);letter-spacing:0}
.v3-grid .pc-price b{font:800 clamp(18px,1.25vw,21px)/1 var(--font-body);letter-spacing:-.01em}
.v3-own .pc-name{font:700 18px/1.2 var(--font-body);letter-spacing:0}
/* шаги: без номеров-кружков, цифры спокойнее */
.v3 .pr-num{display:none}
.v3 .pr-big{font:700 clamp(17px,1.2vw,20px)/1.15 var(--font-body);letter-spacing:-.01em}
.v3 .pr-t{margin-top:0}
.ppm-copy h3{font:700 clamp(19px,1.4vw,24px)/1.2 var(--font-body);letter-spacing:-.01em}
.ppm-copy h3 em{background:none;color:var(--mint-dark)}
/* хаб: стрелки-кружки меньше и металлические, без пульса */
.v3 .hub-orb{width:42px!important;height:42px!important;animation:none!important;background:linear-gradient(180deg,#46534f 0%,#1f2a27 46%,#0f1816 54%,#1f2a28 100%);color:var(--mint);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 12px -6px rgba(8,17,15,.5)}
.v3 .hub-orb .ring{display:none}
.v3 .hub-orb svg{width:18px;height:18px}
/* «Полезное и смешное»: без меток и значков переворота, названия обычным шрифтом */
.v3 .fun-f .mono,.v3 .fun-f i{display:none}
.v3 .fun-f b{font:700 16px/1.25 var(--font-body);letter-spacing:0}
/* вопросы: обычным шрифтом, не плакатом */
.v3 .home-faq .faq-q{font:600 clamp(16px,1.1vw,18px)/1.35 var(--font-body);letter-spacing:0;padding:16px 0}
/* объекты: подписи спокойнее */
.bt-cap b{font:600 15px/1.25 var(--font-body)}
.bt-big .bt-cap b{font:700 clamp(17px,1.3vw,21px)/1.2 var(--font-body);letter-spacing:0;max-width:30ch}
.v3-ph-all b{font:700 15px/1.2 var(--font-body);letter-spacing:0}
/* «Путь воды» — круглая кнопка рядом с подбором в блоке систем */
.v3-pickrow .v3-route{min-height:52px;padding:4px 18px 4px 4px;gap:10px;font:700 15px var(--font-body)}
.v3-pickrow .v3-route i{width:44px;height:44px}
.pf-mini{margin-right:24px}
.v3-atlas-link{font-weight:600}
.v3 .hub-tile h2{font:700 clamp(18px,1.25vw,21px)/1.2 var(--font-body)!important;letter-spacing:-.01em}
.v3 .hub-tile h2 em{background:none}

/* ===== Итерация 9 (Иван 14.10) ===== */
/* подписи на фото первого экрана — спокойные, обычным шрифтом */
.v3-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(8,17,15,.62));pointer-events:none}
.v3-ph-t{position:absolute;left:10px;right:10px;bottom:9px;z-index:1;color:#fff;font:600 13px/1.2 var(--font-body);text-align:left}
/* «Написать» — без значка */
.v3-write{padding:0 18px}
/* «переверните карточки» — заметно, чтобы было понятно, что карточки переворачиваются */
.v3-hl{background:linear-gradient(transparent 58%,var(--acid) 58%);color:var(--ink);font-weight:700;padding:0 2px;border-radius:2px}
/* хаб: стрелки оживают — мягко подпрыгивают, при наведении светятся */
@media (prefers-reduced-motion:no-preference){
  .v3 .hub-orb svg{animation:v3nudge 2.6s ease-in-out infinite}
  .v3 .hub-tile:nth-child(2) .hub-orb svg{animation-delay:.3s}.v3 .hub-tile:nth-child(3) .hub-orb svg{animation-delay:.6s}
  .v3 .hub-tile:nth-child(4) .hub-orb svg{animation-delay:.9s}.v3 .hub-tile:nth-child(5) .hub-orb svg{animation-delay:1.2s}
}
@keyframes v3nudge{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(4px)}80%{transform:translateY(-1px)}88%{transform:translateY(2px)}}
.v3 .hub-orb{transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.v3 .hub-tile:hover .hub-orb,.v3 .hub-tile[aria-selected="true"] .hub-orb{transform:scale(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 4px rgba(36,216,188,.25),0 8px 18px -6px rgba(11,136,118,.6)}
/* подвал: сервисы — объёмные, металл в родных цветах */
.v3 :is(.footer-columns,.footer-services) a.f-lab{background:linear-gradient(180deg,#95a2ff 0%,#5a6dff 46%,#3c51f3 54%,#5c6fff 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(8,17,15,.2),0 1px 1px rgba(0,0,0,.3),0 10px 18px -8px rgba(70,92,255,.7)}
.v3 :is(.footer-columns,.footer-services) a.f-atlas{background:linear-gradient(180deg,#2e3a37,#0c1412 54%,#1a2421) padding-box,linear-gradient(100deg,var(--mint),var(--acid)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 1px rgba(0,0,0,.35),0 10px 18px -8px rgba(36,216,188,.45)}
.v3 :is(.footer-columns,.footer-services) a.f-offer{background:linear-gradient(180deg,#f6ffc2 0%,#dfff5c 46%,#c6ec2c 54%,#e4ff78 100%)!important;color:#08110f;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(8,17,15,.15),0 1px 1px rgba(0,0,0,.3),0 10px 18px -8px rgba(217,255,67,.55)}
.v3 :is(.footer-columns,.footer-services) a.f-ctrl{background:linear-gradient(180deg,#ffffff 0%,#eef2f3 46%,#d9e0e3 54%,#f6f8f9 100%)!important;color:#13201c;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(8,17,15,.14),0 1px 1px rgba(0,0,0,.3),0 10px 18px -8px rgba(0,0,0,.5)}
.v3 :is(.footer-columns,.footer-services) :is(a.f-lab,a.f-atlas,a.f-offer,a.f-ctrl) i{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(8,17,15,.3)}
.v3 :is(.footer-columns,.footer-services) :is(a.f-lab,a.f-atlas,a.f-offer,a.f-ctrl):active{transform:translateY(1px)}

/* ===== Итерация 10 (Иван 14.10): одна система кнопок вместо «зоопарка» =====
   1 Главная      — графит, металл, 48 px (одна на блок): «Подобрать систему онлайн», «Обсудить объект», «Задать свой вопрос», «Описать задачу».
   2 Акцент       — мята, металл: только первый шаг «Что у вас?» и «Смотреть ещё раз»; в шапке — иглобрюх (маскот).
   3 Анализ       — синий LAB, металл: всё про анализ воды.
   4 Обычная      — плоская белая с тонкой рамкой, 48 px (в шапке 44): всё остальное.
   5 Тумблер      — металл со светодиодом: фильтры систем и «Что у вас?».
   6 Значок       — круглая 44 px: действие (телефон, письмо, стрелки хаба) — графит-металл с мятным значком; служебная (тема, пауза, ±) — плоская.
   Плюс значки сервисов LAB · ATLAS · OFFER · CTRL — у каждого свой цвет. */
.v3 .btn{height:48px;padding:0 22px;font:700 15px/1 var(--font-body);gap:8px}
.v3 .btn .arr{font-weight:700}
.v3 .btn:not(.btn-main){background:var(--white);border:1px solid var(--line);color:var(--ink);box-shadow:none}
.v3 .btn:not(.btn-main):hover{border-color:var(--ink);transform:translateY(-1px)}
.v3-pick-btn,.v3-cta .btn,.v3-ask,.bt-cta .btn,.v3-own-act .btn{height:48px!important;padding:0 22px!important;font-size:15px!important}
/* «Путь воды» — обычная кнопка со значком */
.v3-pickrow .v3-route{min-height:48px;padding:0 20px 0 5px;gap:10px;font:700 15px var(--font-body);border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line)}
.v3-pickrow .v3-route i{width:38px;height:38px}
/* шаги «Что у вас?» — обычные кнопки, первый — акцент */
.v3-seg-steps button{min-height:44px;font:700 14px var(--font-body)}
/* значки-действия: телефон и письмо — одинаковые круглые графитовые */
.v3-ico{display:inline-grid!important;place-items:center;width:44px!important;height:44px;padding:0!important;border-radius:50%!important;border:0!important;
  background:linear-gradient(180deg,#46534f 0%,#1f2a27 46%,#0f1816 54%,#1f2a28 100%)!important;color:var(--mint);cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.45),0 1px 1px rgba(8,17,15,.22),0 8px 16px -8px rgba(8,17,15,.5)!important}
.v3-ico:hover{transform:translateY(-1px)}
.v3-ico:active{transform:translateY(1px)}
.v3-ico svg{width:20px!important;height:20px!important;padding:0!important;background:none!important;box-shadow:none!important}
.v3-tel.v3-ico svg{fill:var(--mint)!important}
.v3-write.v3-ico svg{fill:none;stroke:var(--mint);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:1120px){.v3-contact .v3-write.v3-ico{display:inline-grid!important}}
@media (max-width:620px){.v3-contact .v3-write.v3-ico{display:none!important}}
/* служебные круглые — плоские */
.v3 :is(.theme-btn,.v3-film-play,.asm-play){background:var(--white)!important;box-shadow:none!important;border:1px solid var(--line)!important}

/* правки читаемости: «Все объекты» без затемнения поверх текста; маркер «переверните карточки» читается и в тёмной теме */
.v3-ph-all::after{display:none!important}
.v3-ph-all,.v3-ph-all b{color:#fff}
.v3-ph-all small{color:rgba(255,255,255,.82)}
.v3-hl{color:#08110f!important}
:root[data-theme="dark"] .v3-hl{background:linear-gradient(transparent 58%,rgba(217,255,67,.85) 58%);color:#fff!important;background:none;box-shadow:inset 0 -.42em 0 rgba(217,255,67,.35)}

/* ===== Анонс новинки (Иван 14.10): третья фраза иглобрюха в шапке — синяя; кнопка NEW после «Допов» ===== */
.pf-rot{min-width:176px}
.pf-new{color:#fff}
.pf-mini.is-new{background:linear-gradient(180deg,#95a2ff 0%,#5a6dff 46%,#3c51f3 54%,#5c6fff 100%);color:#fff}
.pf-mini.is-new .pf-tail{background:#2a3abd}
.v3-new{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 5px;border-radius:var(--r-pill);color:#fff;font:700 14px var(--font-body);text-decoration:none;
  background:linear-gradient(180deg,#95a2ff 0%,#5a6dff 46%,#3c51f3 54%,#5c6fff 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(8,17,15,.2),0 1px 1px rgba(8,17,15,.2),0 8px 16px -8px rgba(70,92,255,.7)}
.v3-new i{display:grid;place-items:center;height:30px;padding:0 9px;border-radius:var(--r-pill);background:#fff;color:var(--blue);font:700 11px/1 var(--font-mono);font-style:normal;letter-spacing:.08em}
.v3-new:hover{transform:translateY(-1px)}
.v3-new:active{transform:translateY(1px)}
/* доверие рядом с ценами (Иван 14.10: гарантии — со страниц систем) */
.v3-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;font-size:14px;color:var(--muted-strong)}
.v3-trust span{display:inline-flex;align-items:center;gap:8px}
.v3-trust span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.4' fill='none' stroke='%2308110f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ===== Итерация 11 (Иван 14.10, вечер): «Полезное, странное и смешное» — карточки оживают.
   Пена у шампуня, блеск у посуды, кран наполняется, ноты из «Лунной сонаты», бирюзовый унитаз, Wi‑Fi, подарок подмигивает.
   Играет при наведении и сама по очереди, пока раздел на экране. Только CSS‑анимации transform/opacity; reduce‑motion — выкл. ===== */
.v3 .fun-f{overflow:hidden;isolation:isolate}
.v3 .fun-f b{position:relative;z-index:2}
.fx{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}
.fx u{position:absolute;display:block;text-decoration:none}
/* пена: пузырьки поднимаются, внизу шапка пены */
.fx-foam u{bottom:-30px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,0) 26%),radial-gradient(circle,rgba(36,216,188,.05) 55%,rgba(36,216,188,.28) 72%,rgba(90,109,255,.22) 86%,transparent 90%);
  box-shadow:inset 0 0 0 1.5px rgba(36,216,188,.6)}
.fx-foam::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-60px;height:70px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 10% 40%,#f1fdfa 0 18px,transparent 19px),radial-gradient(circle at 28% 30%,#f1fdfa 0 22px,transparent 23px),radial-gradient(circle at 48% 45%,#f1fdfa 0 20px,transparent 21px),radial-gradient(circle at 68% 30%,#f1fdfa 0 24px,transparent 25px),radial-gradient(circle at 88% 45%,#f1fdfa 0 19px,transparent 20px),linear-gradient(#f1fdfa,#f1fdfa) 0 40px/100% 100% no-repeat;
  filter:drop-shadow(0 -1.5px 0 rgba(36,216,188,.7)) drop-shadow(0 -6px 10px rgba(36,216,188,.25))}
.fun-card.fx-on .fx-foam u{animation:fxBub 3.4s cubic-bezier(.3,.6,.4,1) var(--d) both}
.fun-card.fx-on .fx-foam::after{animation:fxFoam 3.8s ease both}
@keyframes fxBub{0%{opacity:0;transform:translate(0,0) scale(.4)}12%{opacity:1}50%{transform:translate(8px,-120px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-6px,-230px) scale(1.15)}}
@keyframes fxFoam{0%,100%{opacity:0;transform:translateY(0)}25%,70%{opacity:1;transform:translateY(-34px)}}
/* посуда до скрипа: блик проходит, вспыхивают искры */
.fx-shine::before{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 40%,rgba(36,216,188,.22) 46%,rgba(255,255,255,1) 49%,rgba(36,216,188,.3) 53%,transparent 60%);transform:translateX(-70%);opacity:0}
.fx-shine u{width:26px;height:26px;left:var(--x);top:var(--y);opacity:0;transform:scale(0)}
.fx-shine u::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 0 18%,#7fe9d9 40%,#24d8bc 70%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px rgba(36,216,188,.9))}
.fun-card.fx-on .fx-shine::before{animation:fxGlint 1.5s cubic-bezier(.4,0,.2,1) both}
.fun-card.fx-on .fx-shine u{animation:fxStar 1.1s ease var(--d) both}
@keyframes fxGlint{0%{opacity:1;transform:translateX(-70%)}100%{opacity:1;transform:translateX(70%)}}
@keyframes fxStar{0%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.2) rotate(90deg)}}
/* минеральный кран: карточка наполняется водой с волной и снова уходит */
.fx-fill .w{left:0;right:0;bottom:0;height:100%;transform:translateY(100%);background:linear-gradient(180deg,rgba(120,226,240,.55),rgba(36,216,188,.42) 40%,rgba(90,109,255,.30))}
.fx-fill .w::before{content:"";position:absolute;left:0;top:-13px;width:200%;height:14px;
  background:radial-gradient(14px 10px at 14px 14px,rgba(120,226,240,.55) 98%,transparent) 0 0/28px 14px repeat-x}
.fx-fill .drop{left:50%;top:-14px;width:8px;height:12px;margin-left:-4px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#5fd3e6;opacity:0}
.fun-card.fx-on .fx-fill .w{animation:fxFill 5s cubic-bezier(.45,.05,.3,1) both}
.fun-card.fx-on .fx-fill .w::before{animation:fxWave 1.2s linear infinite}
.fun-card.fx-on .fx-fill .drop{animation:fxDrop .55s ease-in 4 both}
@keyframes fxFill{0%{transform:translateY(100%)}45%,72%{transform:translateY(42%)}100%{transform:translateY(100%)}}
@keyframes fxWave{to{transform:translateX(-28px)}}
@keyframes fxDrop{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(150px)}}
/* герцы: нотный стан, ноты «Лунной сонаты» появляются по одной и тают */
.fx-notes .st{left:12px;right:12px;top:18px;height:40px;opacity:0;background:repeating-linear-gradient(180deg,rgba(8,17,15,.22) 0 1px,transparent 1px 10px)}
.fx-notes .n{left:calc(14px + var(--x));top:calc(18px + var(--y));font:700 22px/1 serif;color:var(--mint-dark);opacity:0}
.fun-card.fx-on .fx-notes .st{animation:fxStaff 4.6s ease both}
.fun-card.fx-on .fx-notes .n{animation:fxNote 2.6s ease var(--d) both}
@keyframes fxStaff{0%,100%{opacity:0}12%,80%{opacity:1}}
@keyframes fxNote{0%{opacity:0;transform:translateY(6px) scale(.6)}18%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
/* бирюзовая вода: карточка постепенно становится бирюзовой и обратно */
.fx-teal::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(120% 90% at 50% 100%,#3fe0cf 0%,#7cebe0 45%,#c4f5ef 100%)}
.fx-teal::after{content:"";position:absolute;left:50%;top:62%;width:30px;height:30px;margin:-15px;border-radius:50%;border:2px solid rgba(255,255,255,.8);opacity:0}
.fun-card.fx-on .fx-teal::before{animation:fxTeal 5s ease-in-out both}
.fun-card.fx-on .fx-teal::after{animation:fxRipple 1.8s ease-out 1.2s 2 both}
@keyframes fxTeal{0%,100%{opacity:0}40%,70%{opacity:.92}}
@keyframes fxRipple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(4)}}
/* Wi‑Fi: дуги загораются по очереди */
.fx-wifi u{right:16px;top:16px;width:calc(var(--r)*2);height:calc(var(--r)*2);margin:calc(var(--r)*-1 + 16px) calc(var(--r)*-1 + 16px) 0 0;border-radius:50%;border:3px solid transparent;border-top-color:var(--mint);transform:rotate(0);opacity:.0}
.fx-wifi u.dot{width:8px;height:8px;margin:12px 12px 0 0;border:0;background:var(--mint)}
.fun-card.fx-on .fx-wifi u{animation:fxWifi 2.4s ease var(--d) both}
@keyframes fxWifi{0%{opacity:0}20%,70%{opacity:1}100%{opacity:0}}
/* анод: искорки защиты */
.fx-anode u{left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px 2px rgba(217,255,67,.8);opacity:0}
.fun-card.fx-on .fx-anode u{animation:fxStar .9s ease var(--d) both}
/* подарок: подмигивает */
.fun-card.gift.fx-on .fun-f{animation:fxGift .9s ease both}
@keyframes fxGift{0%,100%{transform:none}20%{transform:rotate(-3deg) scale(1.03)}40%{transform:rotate(3deg) scale(1.03)}60%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}}
:root[data-theme="dark"] .fx-notes .st{background:repeating-linear-gradient(180deg,rgba(255,255,255,.25) 0 1px,transparent 1px 10px)}
:root[data-theme="dark"] .fx-notes .n{color:var(--mint)}
:root[data-theme="dark"] .fx-foam::after{opacity:.55}
:root[data-theme="dark"] .fun-card.fx-on .fx-foam::after{animation-name:fxFoamD}
@keyframes fxFoamD{0%,100%{opacity:0;transform:translateY(0)}25%,70%{opacity:.5;transform:translateY(-30px)}}
:root[data-theme="dark"] .fun-card.fx-on:has(.fx-teal) .fun-f b{color:#08110f}
.fun-card.fx-on:has(.fx-teal) .fun-f b{transition:color .6s}
@media (prefers-reduced-motion:reduce){.fx{display:none}.fun-card.gift.fx-on .fun-f{animation:none}}