/* Vireo — лендинг «Возможности» (12.11, вечер — слово заказчик: отдельная от сайта страница для всех, обобщённо,
   живые экраны продукта, не перегружать). Основа — стиль сайта (sayt.css: .opora, .pvid, .telefon, .lesenka, .pult3d,
   .demo2, .futer); здесь только своё. Движение: vozmozhnosti.js (сцена первого экрана, звонок, приложение, пульт
   администраторов, шаги, финал), dvizhenie.js (появление, пульт владельца, подвал), sceny.js (лесенка сообщений).
   Все бесконечные анимации — transform/opacity; за экраном их ставит на паузу osnova.js (.za-ekranom). */

/* ── кнопки и шапка — как у Rime (13.11, слово заказчик: «в стиле Rime кнопки и так далее»): капсулы без стрелок,
   «Сайт Vireo» в меню — обычная ссылка, кнопка шапки — тёмная капсула, у «Отправить» нет двойного кольца.
   Палитра лендинга — только цвета Rime (жёлтый, розовый, голубой): коралловый (--s1) стал розовым, зелёный (--s4) —
   жёлтым (соседние части не совпадают: розовый, жёлтый, голубой, жёлтый). Это красит метки, точки, волны, галочки, заливку капсул при наведении (dvizhenie.js) и круги (krugi.js).
   На сайте палитра прежняя: этот файл подключён только к лендингу. ── */
:root{--s1:#ffa0ff;--s2:#ffd46f;--s3:#2cc3e9;--s4:#ffd46f}
.vzl-shapka__kn{height:2.6rem;margin-left:auto;padding:0 1.25rem;font-size:.95rem}   /* меню в шапке нет (заказчик 13.11) — кнопка справа */

/* ══ 1 · первый экран: текст слева, объёмная сцена из сообщений справа ══ */
.vzl-geroy{overflow:hidden;padding:clamp(7rem,9.5vw,8.75rem) 0 0}
.vzl-geroy__v{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(1.5rem,3vw,3rem);width:min(100% - 2*var(--pole),78rem)}
.vzl-geroy__l{position:relative;z-index:2}
.vzl-geroy__zag{max-width:36rem}
.vzl-begush{margin-top:clamp(2rem,3.5vw,3rem);padding-bottom:clamp(2.5rem,4vw,3.5rem)}

.vzl-scena{position:relative;height:clamp(31rem,40vw,37rem);perspective:1600px;perspective-origin:45% 40%;font:500 clamp(12.5px,1.02vw,15px)/1.3 Inter,system-ui,sans-serif;
  color:#111;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
.vzl-scena__pov{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx,9deg) + var(--sx) + var(--mx))) rotateY(calc(var(--ry,-15deg) + var(--my))) rotateZ(2deg);will-change:transform}
/* поворот за курсором (--mx, --my) и наклон при прокрутке (--sx) — vozmozhnosti.js; не наследуются, чтобы не пересчитывать карточки */
@property --mx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --my{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sx{syntax:'<angle>';inherits:false;initial-value:0deg}
.vzl-scena__pov{--mx:0deg;--my:0deg;--sx:0deg}
.vzl-k{position:absolute;left:var(--l);top:var(--t);width:var(--w);transform:translateZ(var(--z));transform-style:preserve-3d}
/* влёт из глубины по очереди, потом каждая карточка плавает в своём ритме */
.vzl-k__vh{animation:vzlVlet 1.5s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i)*.11s) both}
@keyframes vzlVlet{from{opacity:0;transform:translate3d(0,80px,-420px) rotateX(30deg)}}
.vzl-k__in{display:flex;flex-direction:column;gap:.55em;padding:.85em .95em .95em;border-radius:1.15em;background:#fff;
  box-shadow:0 1.8em 3.2em -1.6em rgba(43,33,25,.5),0 .2em .5em -.2em rgba(43,33,25,.12),0 0 0 1px rgba(0,0,0,.04);
  animation:vzlPlyv var(--d,7s) ease-in-out calc(var(--i)*-1.1s) infinite}
@keyframes vzlPlyv{50%{transform:translate3d(0,-11px,0)}}
.vzl-k__kto{display:flex;align-items:center;gap:.5em;font-size:.78em;font-weight:600;color:#6b6b6b}
.vzl-k__kto time{margin-left:auto;font-weight:500;color:#a7a29b;font-variant-numeric:tabular-nums}
.vzl-ik{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:50%;color:#fff;font:700 .95em/1 Inter,sans-serif}
.vzl-ik svg{width:64%;height:64%}
.vzl-ik--wa{background:#25d366}
.vzl-ik--tg{background:#2aabee}
.vzl-ik--max{background:linear-gradient(135deg,#3f8cff,#9b5cff)}
.vzl-ik--sms{background:#34c759}
.vzl-ik--app{border-radius:.6em;background:var(--s1);color:#2b2119;font-family:"Unbounded",sans-serif}
.vzl-ik--mal{width:1.5rem;height:1.5rem;font-size:.75rem}
/* пузыри: сообщение бизнеса слева, ответ клиента справа */
.vzl-pz{margin:0;max-width:92%;padding:.55em .8em .6em;font-size:.9em;line-height:1.35;letter-spacing:-.01em}
.vzl-pz--ish{align-self:flex-start;border-radius:1em 1em 1em .3em;background:#f2efe9}
.vzl-pz--vh{align-self:flex-end;border-radius:1em 1em .3em 1em;background:#d9fdd3}
.vzl-pz--sms{background:#e9e9eb}
.vzl-pz--max{background:#ecedff}
.vzl-pozzhe{animation:vzlPozzhe .6s cubic-bezier(.34,1.4,.64,1) calc(.3s + var(--i)*.11s + var(--p,1.5s)) both}
@keyframes vzlPozzhe{from{opacity:0;transform:scale(.85) translateY(6px)}}
.vzl-pz--vh.vzl-pozzhe{transform-origin:100% 100%}
.vzl-kn{display:flex;gap:.35em;transform-origin:0 0}
.vzl-kn span{flex:1;padding:.5em .4em;border-radius:.7em;background:rgba(42,171,238,.12);color:#168acd;font-size:.8em;font-weight:600;text-align:center;white-space:nowrap}
.vzl-zvezdy{align-self:flex-start;color:#ffb21e;font-size:1.05em;letter-spacing:.12em;transform-origin:0 50%}
/* push от приложения */
.vzl-push{flex-direction:row;align-items:center;gap:.75em;padding:.8em .95em}
.vzl-push .vzl-ik{width:2.4em;height:2.4em;font-size:1em}
.vzl-push .vzl-k__kto{display:block;margin-bottom:.15em;font-size:.72em}
.vzl-push b{display:block;font-size:.95em;font-weight:700;letter-spacing:-.01em}
.vzl-push small{display:block;font-size:.8em;color:#6b6b6b}
/* голосовой звонок — тёмная карточка с волной */
.vzl-zvk{background:#1d1a17;color:#f0e9dd;box-shadow:0 2em 3.4em -1.6em rgba(43,33,25,.75),0 0 0 1px rgba(255,255,255,.04)}
.vzl-zvk__verh{display:flex;align-items:center;gap:.65em}
.vzl-zvk__verh b{display:block;font-size:.95em;font-weight:700}
.vzl-zvk__verh small{display:block;font-size:.76em;color:rgba(240,233,221,.6);font-variant-numeric:tabular-nums}
.vzl-zvk__ava{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:2.3em;height:2.3em;border-radius:50%;background:var(--s4);color:#1d1a17}
.vzl-zvk__ava svg{width:48%;height:48%}
.vzl-zvk__ava::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px currentColor;color:var(--s4);opacity:0;animation:vzlKolco 2.2s ease-out infinite}
@keyframes vzlKolco{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.8)}}
.vzl-zvk__titr{margin:0;font-size:.88em;line-height:1.35}
.vzl-volna{display:flex;align-items:center;gap:3px;height:2.2em}
.vzl-volna i{flex:1;height:calc(var(--h)*100%);border-radius:3px;background:var(--vc,var(--s4));transform-origin:50% 50%;animation:vzlVolna 1.1s ease-in-out var(--o) infinite alternate}
@keyframes vzlVolna{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
/* мини-пульт */
.vzl-pult__ch{font-size:.95em;font-weight:700;letter-spacing:-.01em}
.vzl-stolb{display:flex;align-items:flex-end;gap:3px;height:3em}
.vzl-stolb i{flex:1;height:var(--h);border-radius:3px;background:#1d1a17;transform-origin:50% 100%;animation:vzlStolb 1.2s cubic-bezier(.16,1,.3,1) 1.4s both}
.vzl-stolb i.seych~i{background:#ddd6c9}
@keyframes vzlStolb{from{transform:scaleY(0)}}

/* ══ 2 · вся система одним взглядом ══ */
/* ── плитки (3.2): на компьютере голос слева на две строки, четыре справа; телефон — ниже, как на доске ── */
.vzl-obzor{padding-bottom:clamp(1rem,2vw,1.5rem)}
.vzl-bento{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:.75rem}
.vzl-bento__pl{position:relative;display:flex;flex-direction:column;min-width:0;padding:.7rem .7rem 1.4rem;border-radius:1.75rem;background:var(--r-karta);color:var(--r-tekst);
  transition:transform .45s var(--krivaya),box-shadow .3s}
.vzl-bento__pl:hover{transform:translateY(-4px);box-shadow:0 1.5rem 2.5rem -1.5rem rgba(43,33,25,.35)}
.vzl-bento__pl--shir{grid-row:1/3}
.vzl-bento__pl--temn{background:var(--r-temn);color:var(--r-temn-t)}
.vzl-bento__n{display:block;margin:1.15rem .55rem 0;font:500 .8rem/1 var(--r-mono);color:rgba(43,33,25,.42)}
.vzl-bento__zg{display:block;margin:.4rem .55rem 0;font-family:var(--r-zag);font-stretch:38%;font-weight:640;font-size:2.15rem;line-height:.92;letter-spacing:-.01em;text-wrap:balance}
.vzl-bento__pl--shir .vzl-bento__zg{font-size:clamp(2.6rem,3.4vw,3.4rem)}
.vzl-bento__t{display:block;margin:.5rem .55rem 0;font-size:1rem;line-height:1.3;color:var(--r-tekst2)}
.vzl-bento__pl--temn .vzl-bento__n{color:rgba(240,233,221,.4)}
.vzl-bento__pl--temn .vzl-bento__t{color:rgba(240,233,221,.6)}
.vzl-perenos{display:none}   /* мягкий перенос «админи-страторов» — только на телефоне, на компьютере слово целиком */

/* миниатюры частей */
.vzl-mini{position:relative;display:block;flex:none;overflow:hidden;height:9.5rem;border-radius:1.1rem;font-family:"Roboto Flex",Geist,sans-serif;font-stretch:88%}
.vzl-bento__pl--shir .vzl-mini{flex:1 1 auto;min-height:15rem;height:auto}
.vzl-mini--golos{background:#f0e9dd}
.vzl-mini--golos canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.vzl-mini--soob{display:flex;flex-direction:column;justify-content:center;gap:.45rem;padding:.9rem;background:#efe8dc;font-size:.85rem;line-height:1}
.vzl-mini--soob>span{display:flex;align-items:center;gap:.4rem;align-self:flex-start;max-width:100%;padding:.35rem .65rem .35rem .35rem;border-radius:1.1rem 1.1rem 1.1rem .3rem;
  background:#fff;color:#2b2119;white-space:nowrap;transform-origin:0 100%}
.vzl-mini--soob>span:nth-child(2){align-self:center;transform-origin:50% 100%}
.vzl-mini--soob>span:nth-child(3){align-self:flex-end;padding:.42rem .65rem;border-radius:1.1rem 1.1rem .3rem 1.1rem;background:var(--r-temn);color:var(--r-temn-t);transform-origin:100% 100%}
.vzl-mini--soob i{flex:none;width:1.2rem;height:1.2rem;border-radius:50%}
.vzl-mini--pril{display:flex;justify-content:center;align-items:flex-end;background:#ffd46f}
.vzl-mini__tel{display:block;width:52%;max-width:9.5rem;height:86%;overflow:hidden;padding:.55rem .45rem 0;border:3px solid var(--r-temn);border-bottom:0;border-radius:1rem 1rem 0 0;background:#fff8ee}
.vzl-mini__lenta{--g:4.1rem;display:block}
.vzl-mini__lenta>span{display:flex;flex-direction:column;gap:.3rem;height:var(--g)}
.vzl-mini__lenta b{display:block;flex:none;height:1.6rem;border-radius:.4rem;background:var(--r-temn)}
.vzl-mini__lenta .v2 b{background:#ffa0ff}
.vzl-mini__lenta i{display:block;flex:none;height:.38rem;border-radius:.2rem;background:#e2d9ca}
.vzl-mini__lenta i:nth-child(4){width:70%}
.vzl-mini--pult{display:flex;align-items:center;justify-content:center;background:var(--r-temn)}
.vzl-mini--pult svg{width:52%;max-height:78%}
.vzl-mini--adm{display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:.9rem;background:#efe8dc}
.vzl-mini--adm>span{position:relative;display:flex;align-items:center;gap:.4rem;padding:.45rem .55rem;border-left:3px solid var(--c);border-radius:.6rem;background:#fff;color:#2b2119;
  font-size:.82rem;line-height:1;white-space:nowrap}
.vzl-mini--adm u{overflow:hidden;text-decoration:none;text-overflow:ellipsis}
.vzl-mini--adm em{margin-left:auto;font-style:normal;color:rgba(43,33,25,.42)}
.vzl-mini--adm>span::after{content:"";position:absolute;right:.5rem;top:50%;width:1.05rem;height:1.05rem;margin-top:-.525rem;border-radius:50%;
  background:var(--r-temn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.7 11 12 5.4' fill='none' stroke='%23f0e9dd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;transform:scale(0)}

/* миниатюры живут после того, как плитки собрались (.zhivo ставит vozmozhnosti.js); за экраном — пауза (osnova.js) */
.vzl-bento.zhivo .vzl-mini--soob>span{animation:vzlPrih 6.5s var(--krivaya) infinite backwards}
.vzl-bento.zhivo .vzl-mini--soob>span:nth-child(2){animation-delay:.8s}
.vzl-bento.zhivo .vzl-mini--soob>span:nth-child(3){animation-delay:1.6s}
@keyframes vzlPrih{0%{opacity:0;transform:translateY(.6rem) scale(.9)}7%,82%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-.3rem)}}
.vzl-bento.zhivo .vzl-mini__lenta{animation:vzlLenta 7.5s var(--krivaya) infinite}
@keyframes vzlLenta{0%,30%{transform:translateY(0)}42%,72%{transform:translateY(calc(-1 * var(--g)))}84%,100%{transform:translateY(calc(-2 * var(--g)))}}
.vzl-bento.zhivo .vzl-mini--pult circle[class]{animation:vzlDuga 6s var(--krivaya) infinite backwards}
.vzl-bento.zhivo .vzl-mini--pult .d2{animation-delay:.35s}
.vzl-bento.zhivo .vzl-mini--pult .d3{animation-delay:.7s}
@keyframes vzlDuga{0%{stroke-dasharray:0 400;opacity:0}3%{opacity:1}26%,84%{stroke-dasharray:var(--d) 400;opacity:1}93%,100%{stroke-dasharray:var(--d) 400;opacity:0}}
.vzl-bento.zhivo .vzl-mini--adm>span u{animation:vzlOtmT 7s ease infinite backwards}
.vzl-bento.zhivo .vzl-mini--adm>span em{animation:vzlOtmV 7s ease infinite backwards}
.vzl-bento.zhivo .vzl-mini--adm>span::after{animation:vzlOtmG 7s var(--krivaya) infinite backwards}
.vzl-bento.zhivo .vzl-mini--adm>span:nth-child(2) :is(u,em),.vzl-bento.zhivo .vzl-mini--adm>span:nth-child(2)::after{animation-delay:1s}
.vzl-bento.zhivo .vzl-mini--adm>span:nth-child(3) :is(u,em),.vzl-bento.zhivo .vzl-mini--adm>span:nth-child(3)::after{animation-delay:2s}
@keyframes vzlOtmT{0%,20%{opacity:1}28%,86%{opacity:.42}94%,100%{opacity:1}}
@keyframes vzlOtmV{0%,20%{opacity:1}25%,88%{opacity:0}95%,100%{opacity:1}}
@keyframes vzlOtmG{0%,20%{transform:scale(0)}28%,86%{transform:scale(1)}92%,100%{transform:scale(0)}}

/* ══ 3–7 · части системы ══ */
#golos,#administratory{--c:var(--s1)}
#soobshcheniya{--c:var(--s2)}
#prilozhenie{--c:var(--s3)}
#pult{--c:var(--s4)}
.vzl-tochki{display:flex;flex-direction:column;gap:.6rem;margin:.25rem 0 0;padding:0;list-style:none}
.vzl-tochki li{position:relative;padding-left:1.85rem;font-size:1.04rem;line-height:1.3;color:var(--r-tekst)}
.vzl-tochki li::before{content:"";position:absolute;left:0;top:.08em;width:1.2rem;height:1.2rem;border-radius:50%;
  background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.4 2.4L11.8 5.6' fill='none' stroke='%232b2119' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat}
.opora__prim{font-size:.88rem!important;color:var(--r-tekst2)}

/* голосовой агент: кольцо звонка (2.3 — выбор заказчик 13.11). Круги трёх цветов Rime медленно вращаются, со стороны того,
   кто говорит, растут; плашки появляются по ходу разговора, расшифровка дописывается снизу (vozmozhnosti.js).
   Без скрипта и без движения — итог разговора: все плашки, последние реплики, «Запись перенесена». */
.vzl-kz{width:min(100%,30rem);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.vzl-kz__kolco{position:relative;width:min(100%,23rem);aspect-ratio:335/300;margin:0 auto}
.vzl-kz__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vzl-kz__svg circle:nth-child(3n+1){fill:var(--s2)}
.vzl-kz__svg circle:nth-child(3n+2){fill:var(--s1)}
.vzl-kz__svg circle:nth-child(3n){fill:var(--s3)}
.vzl-kz__c{position:absolute;left:50%;top:50%;width:29.6%;aspect-ratio:1;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;border-radius:50%;background:#1d1a17;color:#f0e9dd;box-shadow:0 1.2rem 2rem -1.2rem rgba(43,33,25,.6)}
.vzl-kz__c b{font:500 1rem/1 var(--r-mono);font-variant-numeric:tabular-nums}
.vzl-kz__c small{font-size:.7rem;color:rgba(240,233,221,.55)}
.vzl-kz__pil{position:absolute;z-index:1;padding:.55rem .95rem;border-radius:100vw;background:var(--c);color:#24211d;font-size:.9rem;font-weight:500;line-height:1.1;
  white-space:nowrap;box-shadow:0 .6rem 1.4rem -.8rem rgba(36,33,29,.45);
  transition:opacity .4s ease,translate .7s cubic-bezier(.16,1,.3,1),scale .7s cubic-bezier(.34,1.56,.64,1)}
.vzl-kz__pil--1{--c:var(--s2);left:1.8%;top:6.7%}
.vzl-kz__pil--2{--c:var(--s3);right:0;top:42.7%}
.vzl-kz__pil--3{--c:var(--s1);left:4.2%;top:79.3%}
.vzl-kz.igra .vzl-kz__pil:not(.vid){opacity:0;translate:0 .5rem;scale:.82}
.vzl-kz__kart{margin-top:1rem;padding:1.1rem 1.1rem 1rem;border-radius:1.4rem;background:#f8f3ea;color:#24211d}
.vzl-kz__okno{position:relative;height:7.6rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 1.6rem);mask-image:linear-gradient(to bottom,transparent,#000 1.6rem)}
.vzl-kz__lenta{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.7rem;margin:0;padding:0;list-style:none;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.vzl-kz__lenta li{display:flex;gap:.6rem;font-size:.98rem;line-height:1.38;letter-spacing:-.01em}
.vzl-kz__lenta small{flex:none;width:3.6rem;padding-top:.12rem;font-size:.76rem;color:rgba(36,33,29,.42)}
.vzl-kz__lenta li.kl{color:rgba(36,33,29,.62)}
.vzl-kz.igra .vzl-kz__lenta li:not(.vid){display:none}
.vzl-kz.igra .vzl-kz__lenta li.vid{animation:vzlKzStr .6s ease both}
@keyframes vzlKzStr{from{opacity:0}}
.vzl-kz__itog{display:flex;align-items:center;gap:.6rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(36,33,29,.12);font-size:.9rem;font-weight:500;
  transition:opacity .45s ease,translate .7s cubic-bezier(.16,1,.3,1)}
.vzl-kz__itog i{flex:none;display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#1d1a17;color:var(--s2)}
.vzl-kz__itog svg{width:.95rem;height:.95rem}
.vzl-kz.igra:not(.itog) .vzl-kz__itog{opacity:0;translate:0 .5rem}
.vzl-kz.gasnet :is(.vzl-kz__lenta,.vzl-kz__pil,.vzl-kz__itog){opacity:0!important;transition:opacity .4s ease}
.vzl-kz.bez :is(.vzl-kz__lenta,.vzl-kz__pil,.vzl-kz__itog){transition:none}

/* приложение для клиентов: веер из трёх телефонов с экранами настоящего приложения (демо-клиент).
   --r: 0 — стопка, 1 — веер (крутит vozmozhnosti.js при прокрутке; без скрипта и без движения стоит веер).
   Размер телефона — от ширины колонки (.opora__ris — контейнер), чтобы боковые не вылезали за край. */
#prilozhenie .opora__ris{container-type:inline-size}
.vzl-veer{--r:1;--fw:min(13.25rem,34cqw);--dx:calc(var(--fw)*.86);--dy:2.75rem;--ug:3deg;--sk:.9;
  position:relative;width:100%;height:calc(var(--fw)*2.06 + var(--dy) + 1.5rem);margin:.5rem 0 1rem}
.vzl-veer__m{position:absolute;left:50%;top:0;width:var(--fw);margin-left:calc(var(--fw)/-2);transform-origin:50% 100%;will-change:transform}
.vzl-veer__m--l{transform:translate(calc(var(--dx)*var(--r)*-1),calc(.6rem + (var(--dy) - .6rem)*var(--r))) rotate(calc(var(--ug)*var(--r)*-1)) scale(calc(.94 + (var(--sk) - .94)*var(--r)))}
.vzl-veer__m--p{transform:translate(calc(var(--dx)*var(--r)),calc(.6rem + (var(--dy) - .6rem)*var(--r))) rotate(calc(var(--ug)*var(--r))) scale(calc(.94 + (var(--sk) - .94)*var(--r)))}
.vzl-veer__m--c{z-index:2;transform:translateY(calc((1 - var(--r))*1.25rem))}
.vzl-fon{position:relative;padding:calc(var(--fw)*.04);border-radius:calc(var(--fw)*.205);background:#121010;transform-origin:50% 100%;
  box-shadow:0 2.5rem 4rem -2.25rem rgba(43,33,25,.55),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 3px #2a2522}
.vzl-fon__e{position:relative;overflow:hidden;padding:14% 0 8.5%;border-radius:calc(var(--fw)*.17);background:#fff}
.vzl-fon__e img{display:block;width:100%;height:auto}
.vzl-fon__o{position:absolute;z-index:2;left:50%;top:calc(var(--fw)*.032);width:31%;height:calc(var(--fw)*.1);translate:-50% 0;border-radius:100vw;background:#000}
.vzl-fon__e::after{content:"";position:absolute;left:50%;bottom:calc(var(--fw)*.028);width:34%;height:max(2px,calc(var(--fw)*.012));translate:-50% 0;border-radius:100vw;background:#121010}
/* боковые слегка покачиваются, центральный ровный */
.vzl-veer.kach .vzl-veer__m--l .vzl-fon{animation:vzlKach 5.6s ease-in-out infinite}
.vzl-veer.kach .vzl-veer__m--p .vzl-fon{animation:vzlKach 6.4s ease-in-out -2.4s infinite}
@keyframes vzlKach{0%,100%{rotate:-1.1deg}50%{rotate:1.1deg}}

/* пульт администраторов: окно со звонками и разбор разговора */
.vzl-adm{position:relative;width:min(100%,34rem);padding:0 0 7rem}
.vzl-okno{overflow:hidden;border-radius:1.25rem;background:#fff;color:#1d1a17;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  box-shadow:0 0 0 1px rgba(43,33,25,.08),0 2.5rem 4.5rem -2.5rem rgba(43,33,25,.55)}
.vzl-okno__sh{display:flex;align-items:center;gap:.9rem;height:2.6rem;padding:0 1rem;background:#f6f3ee;border-bottom:1px solid #ece7df;font-size:.8rem;font-weight:600;color:#6b6b6b}
.vzl-okno__vk{display:flex;gap:.35rem;padding:.8rem .9rem .35rem}
.vzl-okno__vk span{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .8rem;border-radius:100vw;font-size:.8rem;font-weight:600;color:#6b6b6b}
.vzl-okno__vk span.akt{background:#1d1a17;color:#fff}
.vzl-okno__vk i{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:100vw;background:var(--s1);color:#2b2119;font:700 .68rem/1 Inter,sans-serif}
.vzl-zvonki{--ryad:3.45rem;height:calc(var(--ryad)*5 + .7rem);margin:0;padding:.3rem .55rem .4rem;overflow:hidden;list-style:none}
.vzl-zvonki li{display:grid;grid-template-columns:2.9rem minmax(0,1fr) auto;align-items:center;gap:.75rem;height:var(--ryad);padding:0 .45rem;border-bottom:1px solid #f1ede6;border-radius:.6rem}
.vzl-zvonki li.nov{animation:vzlRyad .8s cubic-bezier(.16,1,.3,1) both,vzlRyadFon 2.4s ease-out both}
@keyframes vzlRyad{from{height:0;opacity:0;transform:translateY(-10px)}}
@keyframes vzlRyadFon{0%,30%{background:color-mix(in srgb,var(--s2) 22%,#fff)}100%{background:transparent}}
.vzl-zvonki time{font:400 .78rem/1 var(--r-mono);color:#8a8a8f}
.vzl-zvonki span{min-width:0}
.vzl-zvonki b{display:block;font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.vzl-zvonki small{display:block;overflow:hidden;font-size:.78rem;color:#6b6b6b;white-space:nowrap;text-overflow:ellipsis}
.vzl-zvonki em{padding:.34rem .65rem;border-radius:100vw;font-style:normal;font-size:.74rem;font-weight:700;white-space:nowrap}
.vzl-zvonki .kr{background:rgba(255,154,134,.3);color:#a83c25}
.vzl-zvonki .zl{background:rgba(134,227,163,.36);color:#1d6e38}
.vzl-zvonki .zh{background:rgba(255,212,111,.42);color:#7d5700}
.vzl-zvonki .gl{background:rgba(54,194,236,.24);color:#0d6886}
.vzl-razbor{position:absolute;right:-3rem;bottom:0;width:16.5rem;z-index:2}
.vzl-razbor ul{display:flex;flex-direction:column;gap:.45rem;margin:.35rem 0 0;padding:0;list-style:none}
.vzl-razbor li{position:relative;padding-left:1.6rem;font-size:.86rem;line-height:1.3;transition:opacity .4s ease,translate .5s cubic-bezier(.16,1,.3,1)}
.vzl-razbor li::before{content:"";position:absolute;left:0;top:.05em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--s4) center/70% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.3l2.4 2.4L11.8 5.6' fill='none' stroke='%232b2119' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.vzl-razbor li.net::before{background-color:var(--s1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%232b2119' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.vzl-razbor__sovet{margin:.45rem 0 0;padding:.6rem .75rem;border-radius:.8rem;background:#f6f3ee;font-size:.83rem;line-height:1.35;transition:opacity .5s ease}
.vzl-adm.igra:not(.vid) .vzl-razbor li{opacity:0;translate:-6px 0}
.vzl-adm.igra:not(.vid) .vzl-razbor__sovet{opacity:0}
.vzl-adm.vid .vzl-razbor li:nth-child(2){transition-delay:.25s}
.vzl-adm.vid .vzl-razbor li:nth-child(3){transition-delay:.5s}
.vzl-adm.vid .vzl-razbor li:nth-child(4){transition-delay:.75s}
.vzl-adm.vid .vzl-razbor__sovet{transition-delay:1.1s}

/* ══ 8 · и ещё ══ */
.vzl-esche{padding-bottom:clamp(1rem,2vw,1.5rem)}
/* «И ещё» — стопка как у шагов на сайте (sayt.css .stopka, уменьшение — dvizhenie.js); своя раскладка карточки:
   значок и номер сверху, заголовок и текст снизу; последняя карточка тёмная */
.stopka__k.vzl-esche__k{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"ik n" "zag tekst";
  align-items:end;gap:1.25rem 2rem;height:clamp(14rem,17vw,15.5rem);padding:clamp(1.5rem,2.2vw,2rem)}
.vzl-esche__ik{grid-area:ik;align-self:start;display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--c);color:#2b2119}
.vzl-esche__ik svg{width:1.5rem;height:1.5rem}
.vzl-esche__n{grid-area:n;align-self:start;justify-self:end;font:400 .9rem/1 "Roboto Flex",Geist,sans-serif;font-stretch:88%;color:var(--r-tekst2)}
.vzl-esche__k h3{grid-area:zag;font-size:clamp(2.5rem,4.2vw,3.75rem);line-height:.86;text-wrap:balance}
.vzl-esche__k p{grid-area:tekst;line-height:1.35}
.stopka__k--fin .vzl-esche__n{color:color-mix(in srgb,var(--r-temn-t) 60%,transparent)}

/* ══ «Заказать показ» — окно с формой заявки поверх страницы ══ */
.demo2__kn.vzl-forma__kn{box-shadow:none;transition:color .35s,transform .25s var(--krivaya)}
.vzl-zayavka{width:min(100% - 2rem,31rem);max-width:none;max-height:none;margin:auto;padding:0;border:0;background:none;color:var(--r-tekst);overflow:visible}
.vzl-zayavka::backdrop{background:rgba(43,33,25,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vzl-zayavka[open]{animation:vzlOkno .5s var(--krivaya) both}
.vzl-zayavka[open]::backdrop{animation:vzlFon .4s ease both}
@keyframes vzlOkno{from{opacity:0;translate:0 1.5rem;scale:.97}}
@keyframes vzlFon{from{opacity:0}}
.vzl-zayavka__karta{max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;padding:2.75rem 1.75rem 2rem;
  box-shadow:0 2rem 5rem -2rem rgba(43,33,25,.5)}
.vzl-zayavka__x{position:absolute;z-index:2;top:1rem;right:1rem;display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;padding:0;border:0;
  border-radius:50%;background:rgba(43,33,25,.07);color:var(--r-tekst);cursor:pointer;transition:background-color .25s}
.vzl-zayavka__x:hover{background:rgba(43,33,25,.14)}
.vzl-zayavka__x svg{width:1.1rem;height:1.1rem}
.vzl-zayavka:target:not([open]){display:block;position:fixed;z-index:60;inset:1rem 0 auto}   /* без скрипта — по ссылке #zayavka */
html.okno-otkr{overflow:hidden}
html.bez-dvizh .vzl-zayavka[open],html.bez-dvizh .vzl-zayavka[open]::backdrop{animation:none}

/* ══ 9 · как подключаем: номера на линии, линия прорисовывается по ходу прокрутки ══ */
.vzl-shagi__sp{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin:0;padding:0;list-style:none;counter-reset:shag}
.vzl-shagi__sp::before,.vzl-shagi__sp::after{content:"";position:absolute;left:1.4rem;right:1.4rem;top:1.4rem;height:2px;border-radius:2px;background:var(--r-liniya)}
.vzl-shagi__sp::after{background:var(--r-tekst);transform-origin:0 50%;transform:scaleX(var(--pr,1))}
.vzl-shagi__sp li{position:relative;z-index:1;display:flex;flex-direction:column;gap:.6rem;counter-increment:shag}
.vzl-shagi__sp li::before{content:"0" counter(shag);display:flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;margin-bottom:.9rem;border-radius:50%;
  background:var(--c);box-shadow:0 0 0 6px var(--r-fon);font:400 .9rem/1 var(--r-mono);color:#2b2119}
.vzl-shagi__sp b{font-family:var(--r-zag);font-stretch:38%;font-weight:640;font-size:2rem;line-height:.95}
.vzl-shagi__sp p{margin:0;max-width:16rem;font-size:1.02rem;line-height:1.38;color:var(--r-tekst2)}


/* ══ без движения: всё на местах сразу ══ */
html.lite .vzl-k__in,html.lite .vzl-volna i{animation:none}
@media (prefers-reduced-motion:reduce){
  .vzl-k__vh,.vzl-k__in,.vzl-pozzhe,.vzl-volna i,.vzl-stolb i,.vzl-zvk__ava::after,.vzl-zvonki li.nov,.vzl-veer .vzl-fon{animation:none!important}
}
html.bez-dvizh .vzl-k__vh,html.bez-dvizh .vzl-k__in,html.bez-dvizh .vzl-pozzhe,html.bez-dvizh .vzl-volna i,html.bez-dvizh .vzl-stolb i{animation:none!important}
html.bez-dvizh .vzl :is(.les,.les *,.vzl-kz *,.vzl-adm *){transition:none!important}
html.bez-dvizh .vzl-veer .vzl-fon{animation:none!important}

/* ══ планшет и телефон ══ */
@media (max-width:1100px){
  .vzl-razbor{right:0}
  .opora__ris .vzl-kz,.opora__ris .vzl-adm{margin:0 auto}
}
@media (max-width:900px){
  .vzl-shapka__kn{display:none}
  .stopka__k.vzl-esche__k{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"ik n" "zag zag" "tekst tekst";
    gap:1rem;height:auto;min-height:17rem;padding:1.4rem 1.35rem 1.6rem}
  .vzl-esche__k h3{font-size:2.5rem;line-height:.9}
  .vzl-esche__k p{font-size:1.05rem}
  .vzl-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vzl-bento__pl--shir{grid-row:auto;grid-column:1/-1}
  .vzl-bento__pl--shir .vzl-mini{flex:none;height:11rem;min-height:0}
  .vzl-geroy{padding-top:7rem}
  .vzl-geroy__v{grid-template-columns:minmax(0,1fr);gap:1rem}
  /* планшет и телефон (слово заказчик 12.11: «3D-плашки ровными и не обрезаться за границы»): две ровные колонки одной ширины,
     правая сдвинута вниз — лесенка без наложений; все карточки в одной плоскости (--z:0), наклон общий и мягкий,
     без поворота вбок — края карточек не уходят за поля экрана ни сразу, ни при прокрутке */
  .vzl-scena{width:min(100%,34rem);height:auto;margin:2.25rem 0 3.25rem;font-size:11.5px;perspective:1100px;perspective-origin:50% 30%}
  .vzl-scena__pov{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem .65rem;align-items:start;
    transform:rotateX(calc(var(--rx,7deg) + var(--sx)*.45)) rotateY(0deg) rotateZ(0deg)}
  .vzl-k{position:relative;left:auto;top:auto;width:auto;--z:0px!important}
  .vzl-k--sms,.vzl-k--max{display:none}
  .vzl-k--push{grid-column:1;grid-row:1}
  .vzl-k--wa{grid-column:2;grid-row:1/span 2}
  .vzl-k--zv{grid-column:1;grid-row:2/span 2}
  .vzl-k--tg{grid-column:2;grid-row:3/span 2}
  .vzl-k--pult{grid-column:1;grid-row:4}
  .vzl-k__in{animation-name:vzlPlyvTel}
  @keyframes vzlPlyvTel{50%{transform:translate3d(0,-5px,0)}}
  .vzl-push{gap:.6em;padding:.75em .8em}
  .vzl-push .vzl-ik{width:2.2em;height:2.2em}
  .vzl-pz{max-width:100%}
  .vzl-shagi__sp{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .vzl-shagi__sp::before,.vzl-shagi__sp::after{left:1.4rem;right:auto;top:1.4rem;bottom:1.4rem;width:2px;height:auto}
  .vzl-shagi__sp::after{transform-origin:50% 0;transform:scaleY(var(--pr,1))}
  .vzl-shagi__sp li{display:grid;grid-template-columns:2.8rem minmax(0,1fr);column-gap:1.1rem;row-gap:.35rem}
  .vzl-shagi__sp li::before{grid-row:span 2;margin:0}
  .vzl-shagi__sp b{font-size:1.75rem;align-self:end}
}
@media (max-width:640px){
  /* плитки — размеры доски 3.2 (375) */
  .vzl-perenos{display:inline}
  .vzl-bento{gap:.55rem}
  .vzl-bento__pl{padding:.55rem .55rem .9rem;border-radius:1.4rem}
  .vzl-mini{height:6.4rem;border-radius:1rem}
  .vzl-bento__pl--shir .vzl-mini{height:8.2rem}
  .vzl-bento__n{margin:.8rem .35rem 0;font-size:.72rem}
  .vzl-bento__zg{margin:.3rem .35rem 0;font-size:1.45rem}
  .vzl-bento__pl--shir .vzl-bento__zg{font-size:1.85rem}
  .vzl-bento__t{margin:.35rem .35rem 0;font-size:.82rem}
  .vzl-mini--soob{gap:.3rem;padding:.55rem;font-size:.6rem}
  .vzl-mini--soob>span{gap:.3rem;padding:.25rem .45rem .25rem .25rem;border-radius:.8rem .8rem .8rem .25rem}
  .vzl-mini--soob>span:nth-child(3){padding:.3rem .45rem;border-radius:.8rem .8rem .25rem .8rem}
  .vzl-mini--soob i{width:.85rem;height:.85rem}
  .vzl-mini__tel{padding:.45rem .35rem 0;border-radius:.75rem .75rem 0 0}
  .vzl-mini__lenta{--g:3.4rem}
  .vzl-mini__lenta>span{gap:.25rem}
  .vzl-mini__lenta b{height:1.35rem;border-radius:.35rem}
  .vzl-mini__lenta i{height:.32rem}
  .vzl-mini--adm{gap:.28rem;padding:.55rem .45rem}
  .vzl-mini--adm>span{gap:.25rem;padding:.28rem .35rem;border-radius:.45rem;font-size:.56rem;font-stretch:80%}
  .vzl-mini--adm>span::after{right:.35rem;width:.78rem;height:.78rem;margin-top:-.39rem}
  .vzl-scena{font-size:10.5px}
  .vzl-kn{flex-direction:column}
  .vzl-veer{--fw:min(8.75rem,40cqw);--dx:calc(var(--fw)*.6);--dy:1rem;--ug:6deg;margin:0}
  .vzl-razbor{position:relative;right:auto;width:min(16.5rem,88%);margin:-2.5rem 0 0 auto}
  .vzl-adm{padding-bottom:0}
  .vzl-zvonki li{grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.55rem}
  /* 13.11 заказчик («бедновато, добавь больше плашек, просто меньше, как на ПК»): на телефоне все четыре плашки пульта,
     уменьшенные (zoom — текст остаётся чётким), по краям телефона в той же расстановке, что на ПК.
     sayt.css (главная) прячет на телефоне три из них — здесь, только на лендинге, возвращаем; главную не трогаем. */
  #pult .pult3d__vid{display:block;zoom:.64}
  #pult .pult3d__vid--1{left:-1%;top:4%;right:auto;bottom:auto}
  #pult .pult3d__vid--2{right:-1%;top:13%;left:auto;bottom:auto}
  #pult .pult3d__vid--3{right:-1%;bottom:5%;left:auto;top:auto}
  #pult .pult3d__vid--4{left:-1%;bottom:27%;right:auto;top:auto}
}

/* печать в PDF: только текст страницы */
@media print{
  @page{margin:14mm 12mm}
  html,body,.list{background:#fff!important}
  .shapka,.futer,.futer-mesto,.vzl-scena,.vzl-begush,.opora__ris,.final__kn,.vzl-zayavka,.str-kn,.punktir,.lepestki,.menu-kn{display:none!important}
  .list{border-radius:0;overflow:visible}
  .vzl-geroy{padding-top:0}
  .vzl-geroy__v{grid-template-columns:minmax(0,1fr)}
  .opora{padding:1.5rem 0;break-inside:avoid}
  .vzl-shagi__sp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vzl-esche .stopka__k{position:static;height:auto;transform:none!important}
  .vzl-bento__pl,.vzl-esche .stopka__k,.vzl-shagi__sp li{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}