/* ===== FLEX VPN — главная: слоистая сборка 1:1 по макету (1440 px макета) ===== */
.home{background:#0b0b0b}
.hd-wrap{position:relative;width:100%;overflow:hidden;background:#0b0b0b}
.hd,.hm{position:relative;margin:0 auto;transform-origin:0 0;overflow:hidden;font-family:"Epilepsy Sans",system-ui,sans-serif;color:#fff}
.hd{width:1440px;height:5471px}
.hm{width:390px;height:4358px}
.hm-wrap{display:none;position:relative;width:100%;overflow:hidden;background:#0b0b0b}
@media (max-width:760px){.hd-wrap{display:none}.hm-wrap{display:block}}

.bgt{position:absolute;left:0;top:0;width:100%;z-index:0;background:url(assets/home/bg-tiny.webp?v=16) 0 0/100% 100% no-repeat}
.hm .bgt{background-image:url(assets/m/bg-tiny.webp?v=16)}
.bgt img{display:block;width:100%;height:auto}
.anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}

/* живой текст: line-height 1 → верх заглавных = top + 0.2308·size */
.hd .t,.hm .t,.mmenu .t{position:absolute;margin:0;padding:0;line-height:1;white-space:nowrap;color:#fff;font-weight:400;text-decoration:none;z-index:2}
.hd .t.b,.hm .t.b{font-weight:700}
.hd .t b,.hm .t b{font-weight:inherit}
.hd .t.c,.hm .t.c,.mmenu .t.c{text-align:center}
.hd .t.g,.hm .t.g{color:#676767}
.rub{display:inline-block;width:calc(7em/13);height:calc(8em/13);margin-left:calc(-1em/13);background:currentColor;
  -webkit-mask:url(assets/home/rub.svg) no-repeat 0 0/100% 100%;mask:url(assets/home/rub.svg) no-repeat 0 0/100% 100%}
.ic{position:absolute;display:block;z-index:2;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* навигация (состояния из «Кнопки/тарифы*.svg»: hover = подчёркивание) */
.nav .t,.nav .pb{z-index:20}
.nl{cursor:pointer}
.nl::after{content:"";position:absolute;left:0;right:calc(1em/13);top:.9615em;height:calc(1em/13);background:currentColor;opacity:0;transition:opacity .15s}
.nl:hover::after,.nl:focus-visible::after{opacity:1}
.nl:focus-visible{outline:none}

/* пиксельные кнопки дизайнера: контур из SVG + живая подпись */
.pb{position:absolute;display:block;height:47px;padding:0;margin:0;border:0;background:none;cursor:pointer;z-index:5;
  color:var(--fg);font-family:"Epilepsy Sans",system-ui,sans-serif;text-decoration:none;transition:color .15s;-webkit-tap-highlight-color:transparent}
.pb .fr{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pb .f{fill:var(--bg);transition:fill .15s}
.pb .o{fill:none;stroke:var(--bd);stroke-width:2;transition:stroke .15s}
.pb .bl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;white-space:nowrap}
.pb:active .bl{font-weight:700}
.pb:focus-visible{outline:2px solid #E6178A;outline-offset:3px}
.pb.dark{--bg:#1D1D1D;--bd:transparent;--fg:#fff}            .pb.dark:hover{--bg:#676767}
.pb.white{--bg:#fff;--bd:transparent;--fg:#1D1D1D}           .pb.white:hover{--bg:#676767;--fg:#fff}
.pb.pink{--bg:#E6178A;--bd:transparent;--fg:#fff}            .pb.pink:hover{--bg:#fff;--fg:#E6178A}
.pb.out{--bg:transparent;--bd:#fff;--fg:#fff}                .pb.out:hover{--bg:#fff;--fg:#1D1D1D}
.pb.per{--bg:transparent;--bd:#676767;--fg:#676767}          .pb.per:hover{--bd:#fff;--fg:#fff}
.pb.per.sel{--bg:#fff;--bd:#fff;--fg:#1D1D1D}
.plane{position:absolute;display:block;background:currentColor;
  -webkit-mask:url(assets/home/tg-plane.png) no-repeat 0 0/100% 100%;mask:url(assets/home/tg-plane.png) no-repeat 0 0/100% 100%}

/* плакат «3 дня бесплатно» */
.poster3{position:absolute;display:block;z-index:3;transform-origin:50% 0;transition:transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.lamps3{position:absolute;z-index:4;pointer-events:none;display:block}
.poster3 .p3img{position:absolute;left:0;top:0;display:block;width:100%;height:100%}
.poster3{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .2s}
.poster3:hover,.poster3:focus-within{transform:rotate(-1.2deg);filter:drop-shadow(0 0 14px rgba(230,23,138,.6)) brightness(1.07)}

/* горячая зона по контуру нарисованного объекта: клик только внутри контура, при наведении — чёткая обводка */
.hz{position:absolute;display:block;z-index:6;pointer-events:none;padding:0;margin:0;border:0;background:none;outline:none;-webkit-tap-highlight-color:transparent}
.hz .hit{position:absolute;display:block;pointer-events:auto;cursor:pointer}
.hz .hl{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .2s}
.hz:hover .hl,.hz:focus-visible .hl,.hz:active .hl{opacity:1}

/* прожекторы над периодами */
.lamp{position:absolute;z-index:4;pointer-events:none;transition:opacity .2s}
.lamp.on{opacity:0}
.lamp.on.lit{opacity:1;animation:flick .45s steps(1,end)}
.lamp.off.lit{opacity:0}
@keyframes flick{0%{opacity:0}20%{opacity:1}35%{opacity:.25}55%{opacity:1}70%{opacity:.6}100%{opacity:1}}

/* баннеры тарифов */
.ban{position:absolute}
.banimg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.volodya{position:absolute;z-index:10;pointer-events:none}

/* бегущие строки поверх белых лент */
.mq{position:absolute;left:0;width:100%;height:var(--th);overflow:hidden;z-index:3;pointer-events:none;--tw:1339px;--th:76.5px;--dur:48s}
.mq.m{--tw:390px;--th:53px;--dur:14s}
.mq i{position:absolute;top:0;left:calc(var(--x0) - var(--tw));width:calc(100% + 2 * var(--tw));height:100%;
  background-image:var(--img);background-repeat:repeat-x;background-size:var(--tw) var(--th);will-change:transform;animation:mq var(--dur) linear infinite}
.mq.r i{animation-direction:reverse}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--tw)))}}

/* BUSINESS FLEX */
.sl{position:absolute;width:340px;height:20px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:4;--p:50%}
.sl:focus{outline:none}
.sl::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--c) 0,var(--c) var(--p),#676767 var(--p),#676767 100%)}
.sl::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:6px;height:20px;margin-top:-9px;background:var(--c);border:0;border-radius:0}
.sl::-moz-range-track{height:2px;background:#676767}
.sl::-moz-range-progress{height:2px;background:var(--c)}
.sl::-moz-range-thumb{width:6px;height:20px;background:var(--c);border:0;border-radius:0}
.sl:hover::-webkit-slider-thumb{filter:brightness(1.2)}
.sl:focus-visible::-webkit-slider-thumb{outline:2px solid #fff;outline-offset:2px}

/* плакаты подъезда и ковёр — арт-ссылки */
.carpet,.carpet-m{position:absolute;display:block;z-index:3;pointer-events:none}
.carpet img{display:block;width:100%;height:100%}
.carpet{transition:filter .2s}
/* ковёр: при наведении — розовое свечение-облако по силуэту ковра (как было) */
.carpet.glow,.carpet:has(~ .hz.glowonly:hover){filter:drop-shadow(0 0 14px rgba(230,23,138,.6)) brightness(1.07)}
.hz.glowonly .hl{display:none}
.carpet .cc{left:156.3px;width:500px;text-align:center;color:#96715B;transform:scaleY(1.094);transform-origin:50% 0}

/* футер */
.fl{transition:color .15s;color:#676767 !important}
.fl:hover,.fl:focus-visible{color:#fff !important;outline:none}
.fl.two{line-height:18px}

@media (prefers-reduced-motion:reduce){.mq i,.lamp.on.lit{animation:none}.poster3:hover{transform:none}}
.still *,.still *::after{animation:none !important;transition:none !important}

/* мобильная шапка: бургер и меню-ковёр (макет «Бургер меню») */
.burger{position:absolute;z-index:20;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger i{position:absolute;left:4px;right:4px;height:1px;background:#fff;transition:background .15s}
.burger i:nth-child(1){top:7.5px}.burger i:nth-child(2){top:16.5px}.burger i:nth-child(3){top:25.5px}
.burger:active i{background:#E6178A}
.mmenu{position:fixed;inset:0;z-index:200;background:#3b0703;overflow:auto;-webkit-overflow-scrolling:touch}
.mmenu[hidden]{display:none}
.mm-in{position:relative;width:390px;height:844px;margin:0 auto;transform-origin:0 0}
.mm-bg{position:absolute;left:0;top:0;width:390px;height:844px}
.mm-x{position:absolute;background:none;border:0;padding:0;cursor:pointer}
.mm-x::before,.mm-x::after{content:"";position:absolute;left:-1px;right:-1px;top:9px;height:2px;background:#fff;transform:rotate(41deg)}
.mm-x::after{transform:rotate(-41deg)}
.mmenu .mm-a{position:absolute;color:#fff;text-decoration:none;line-height:1}
.mmenu .mm-a:active,.mmenu .mm-a:hover{color:#EEE0BB}
.hm .pb .bl{font-size:18px}

/* попап-объявление «что входит» (макет popup_tarif) */
.ov.paper{background:rgba(0,0,0,.74);overflow:auto}
.ov.paper .modal{background:none;border:0;padding:0;max-width:none;width:auto;border-radius:0}
.pp{position:relative;margin:auto;font-family:"Epilepsy Sans",system-ui,sans-serif;animation:ppin .22s cubic-bezier(.2,.8,.2,1)}
.pp-bg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.pp .t{position:absolute;margin:0;line-height:1;white-space:nowrap;color:#1D1D1D;font-weight:400}
.pp .t.b{font-weight:700}
.pp-x{position:absolute;border:0;padding:0;cursor:pointer;background:#1D1D1D;-webkit-mask-size:100% 100%;mask-size:100% 100%;transition:background .15s}
.pp-x:hover{background:#E6178A}
.pp .pb{position:absolute}
@keyframes ppin{from{transform:translateY(12px) rotate(-1deg);opacity:0}to{transform:none;opacity:1}}

/* липкая шапка: появляется при прокрутке вниз (копия шапки макета) */
.fbar{position:fixed;left:0;right:0;top:0;z-index:90;background:rgba(14,14,14,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-105%);transition:transform .25s ease;font-family:"Epilepsy Sans",system-ui,sans-serif}
.fbar.show{transform:none}
.fbar .fbin{position:relative;margin:0 auto;transform-origin:0 0}
.fbar .t{position:absolute;margin:0;padding:0;line-height:1;white-space:nowrap;color:#fff;font-weight:400;text-decoration:none;z-index:2}
.fbar .nl.on::after{opacity:1}
.fbar.fm{display:none}
@media (max-width:760px){.fbar.fd{display:none}.fbar.fm{display:block}}
.showhl .hz .hl{opacity:1}
.showhl .carpet{filter:drop-shadow(0 0 14px rgba(230,23,138,.6)) brightness(1.07)}
.showrot .poster3{transform:rotate(-1.2deg);filter:drop-shadow(0 0 14px rgba(230,23,138,.6)) brightness(1.07)}

/* кнопки и ссылки: при наведении — то же мягкое розовое свечение, что у ковра */
.pb,.opt{transition:color .15s,filter .2s}
.pb:hover,.pb:focus-visible,.opt:hover{filter:drop-shadow(0 0 10px rgba(230,23,138,.6)) brightness(1.05)}
.pb.per.sel:hover{filter:drop-shadow(0 0 10px rgba(230,23,138,.6))}
.nl,.fl{transition:text-shadow .2s,color .15s}
.nl:hover,.nl:focus-visible,.fl:hover,.fl:focus-visible{text-shadow:0 0 10px rgba(230,23,138,.85),0 0 2px rgba(230,23,138,.6)}

/* отрывной язычок-кнопка на бумажке «что входит» */
.pp-tab{position:absolute;display:block;z-index:3;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:tabpulse 2.4s ease-in-out infinite;transition:filter .2s}
.pp-tab img{display:block;width:100%;height:100%}
.pp-tl{position:absolute;transform:translate(-50%,-50%) rotate(90deg);font-family:"Epilepsy Sans",system-ui,sans-serif;font-weight:700;
  line-height:1;letter-spacing:1px;color:#1D1D1D;white-space:nowrap;transition:color .15s}
.pp-tab:hover,.pp-tab:focus-visible{animation:none;filter:drop-shadow(0 0 12px rgba(230,23,138,.85)) brightness(1.06);outline:none}
.pp-tab:hover .pp-tl,.pp-tab:focus-visible .pp-tl{color:#E6178A}
@keyframes tabpulse{0%,100%{filter:drop-shadow(0 0 3px rgba(230,23,138,.35))}50%{filter:drop-shadow(0 0 10px rgba(230,23,138,.7))}}
@media (prefers-reduced-motion:reduce){.pp-tab{animation:none}}