@font-face{font-family:Unbounded;font-weight:500 700;font-display:swap;src:url(/fonts/unbounded-cyr.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Unbounded;font-weight:500 700;font-display:swap;src:url(/fonts/unbounded-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2122}
/* Revision VPN — сюжетные сцены лендинга (управляются прокруткой) и объёмные 3D-логотипы */

/* ===== объёмный логотип: лицо с рамкой, торцы-грани, обратная сторона ===== */
.rv-logo .b{background:none!important;box-shadow:none!important;border-radius:0!important;color:transparent!important;position:relative}
.rv-logo .f{position:absolute;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font-family:Unbounded,sans-serif;font-weight:700;color:#04201e;line-height:1}
.rv-logo .fr,.rv-logo .bk{inset:0;border-radius:13%;
  background:linear-gradient(150deg,#8af7f0,#19c9c3 45%,#078680);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 5px rgba(3,70,66,.45),inset 0 0 0 7px rgba(255,255,255,.18),
    inset 0 -8px 14px rgba(0,40,38,.45);
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,40,38,.4)}
.rv-logo .bk{background:linear-gradient(150deg,#0b9a95,#04504c)}
.rv-logo .sd{background:linear-gradient(90deg,#03504c,#11b7b1 50%,#03504c)}
.rv-logo .sd.h{background:linear-gradient(180deg,#03504c,#11b7b1 50%,#03504c)}

/* ===== каркас: высокая обёртка + прилипающий экран ===== */
#rvStory{padding:0}
.sc{position:relative;color:#fff;height:calc(100vh + var(--travel,100) * 1vh);height:calc(100svh + var(--travel,100) * 1svh)}
.sc-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;padding:80px 0 16px}
.sc-wrap{position:relative;z-index:2;width:100%;max-width:1140px;margin:0 auto;padding:0 22px;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(28px,6vw,80px);flex-wrap:wrap}
.sc-text{flex:1 1 360px;max-width:520px}
.vis{flex:none;display:flex;justify-content:center;perspective:1400px}
.sc:not(.live) *{animation-play-state:paused!important}

.sc-step{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;opacity:.8;
  margin-bottom:16px;display:flex;align-items:center;gap:10px}
.sc-step::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.sc-title{font-weight:300;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.03em;line-height:1.08;text-shadow:0 2px 26px rgba(2,9,10,.6)}
.sc-sub{margin-top:14px;font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:#cfe3e0;max-width:44ch}
/* варианты текста лежат друг на друге: высота не прыгает, шаги плавно сменяются */
.sc-title,.sc-sub{display:grid}
.sc-text [data-t]{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .25s}
.sc[data-s="0"] .sc-text [data-t="0"],.sc[data-s="1"] .sc-text [data-t="1"],.sc[data-s="2"] .sc-text [data-t="2"]{
  opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .1s,transform .6s cubic-bezier(.22,1,.36,1) .1s,visibility 0s}

/* кнопки шагов + полоска прогресса сцены */
.sc-dots{display:flex;gap:8px;list-style:none;margin:22px 0 0;padding:0;flex-wrap:wrap}
.sc-dots button{font:500 12.5px/1 Manrope,sans-serif;color:#fff;min-height:36px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.02);opacity:.55;transition:opacity .3s,background .3s,border-color .3s,color .3s}
.sc-dots button:hover{opacity:.9}
.sc-dots button:focus-visible{outline:2px solid #0ABAB5;outline-offset:2px}
.sc[data-s="0"] .sc-dots li:nth-child(1) button,.sc[data-s="1"] .sc-dots li:nth-child(2) button,.sc[data-s="2"] .sc-dots li:nth-child(3) button{
  opacity:1;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.sc[data-s="2"] .sc-dots li:nth-child(3) button{background:rgba(10,186,181,.2);border-color:#0ABAB5;color:#8af7f0}
.sc-prog{margin-top:18px;height:2px;max-width:300px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.sc-prog i{display:block;height:100%;background:linear-gradient(90deg,#0ABAB5,#8af7f0);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (pointer:coarse){.sc-dots button{min-height:44px}}

/* ===== атмосфера: цвет сцены — мягкое свечение вокруг картинки, края всегда уходят в общий тёмный фон ===== */
.atm{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--vis,0);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.atm>i{position:absolute;inset:0;opacity:0;transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.a-red{background:radial-gradient(72% 78% at var(--cx,70%) var(--cy,50%),rgba(232,36,46,.82),rgba(168,14,22,.52) 36%,rgba(96,6,12,.22) 62%,transparent 84%),
  radial-gradient(55% 60% at 16% 42%,rgba(196,18,28,.4),transparent 72%)}
.a-scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);
  -webkit-mask-image:radial-gradient(70% 75% at var(--cx,70%) var(--cy,50%),#000,transparent 80%);
  mask-image:radial-gradient(70% 75% at var(--cx,70%) var(--cy,50%),#000,transparent 80%)}
.a-tg{background:radial-gradient(60% 65% at var(--cx,70%) var(--cy,50%),rgba(43,92,140,.6),rgba(23,40,60,.25) 50%,transparent 80%)}
.a-glow{background:radial-gradient(55% 62% at var(--cx,70%) var(--cy,50%),rgba(10,186,181,.45),rgba(10,186,181,.13) 48%,transparent 76%)}
.atm>.a-ok{opacity:1;clip-path:circle(0% at var(--cx,70%) var(--cy,50%));transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);
  background:radial-gradient(circle at var(--cx,70%) var(--cy,50%),rgba(255,255,255,.92) 0,rgba(214,250,246,.7) 7%,rgba(79,230,223,.45) 18%,rgba(10,186,181,.2) 34%,transparent 56%)}
.atm>.wave{inset:auto;left:var(--cx,70%);top:var(--cy,50%);width:200px;height:200px;margin:-100px;border-radius:50%;
  border:2px solid rgba(79,230,223,.6);transition:none}

/* ===== сцена 1: чужой VPN (красное свечение) → бот (синее) → наш VPN (вспышка тиффани) ===== */
.sc1[data-s="0"] .a-red,.sc1[data-s="0"] .a-scan,.sc1[data-s="1"] .a-tg{opacity:1}
.sc1[data-s="2"] .a-ok{clip-path:circle(85% at var(--cx,70%) var(--cy,50%))}
.sc1[data-s="2"] .wave{animation:wave 2.6s ease-out .3s infinite}
.sc1[data-s="2"] .wave.w2{animation-delay:1.6s}
@keyframes wave{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(5)}}
.sc1 .accent2{color:#4fe6df;font-weight:400}
.shield{display:inline-block;width:46px;height:46px;vertical-align:-8px;margin-right:12px}
.shield path{fill:none;stroke:#4fe6df;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.shield .ck{stroke-dasharray:30;stroke-dashoffset:30}
.sc[data-s="2"] .shield .ck{animation:draw .6s ease .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.sc .rv-phone{color:#fff}
/* телефон сцены — тот же корпус .rv-phone, экраны переключаются по шагу */
.sc .rv-phone .scr[data-t]{display:none}
.sc[data-s="0"] .rv-phone .scr[data-t="0"],.sc[data-s="1"] .rv-phone .scr[data-t="1"],.sc[data-s="2"] .rv-phone .scr[data-t="2"]{display:flex;animation:scIn .4s ease both}
@keyframes scIn{from{opacity:0;transform:translateY(10px)}}

/* экран «чужого» VPN — всё случается сразу, без долгих пауз */
.ov{align-items:center;justify-content:center;gap:16px;background:#17191b!important}
.ov-head{position:absolute;top:36px;left:18px;right:18px;display:flex;align-items:center;gap:9px;color:#9aa3a3;font-size:13px}
.ov-logo{width:26px;height:26px;border-radius:7px;background:#4b4f52;display:grid;place-items:center;color:#d7d7d7;font-weight:700;font-size:12px}
.ov-ring{width:116px;height:116px;border-radius:50%;border:4px solid #2c2f31;border-top-color:#9a9a9a;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ov-st{position:relative;width:100%;height:22px;text-align:center;font-weight:600;font-size:16px;color:#ddd}
.ov-st span{position:absolute;inset:0}
.ov-st .a{animation:fo .25s .5s forwards}.ov-st .b{opacity:0;color:#ff6b6b;animation:fi .25s .5s forwards}
@keyframes fo{to{opacity:0}}@keyframes fi{to{opacity:1}}
.ov-speed{width:82%;font-size:12px;color:#9a9a9a}
.ov-speed .bar{height:6px;border-radius:3px;background:#2a2c2e;margin-top:6px;overflow:hidden}
.ov-speed i{display:block;height:100%;width:7%;background:#d23b3b;animation:jit 1s steps(3) infinite}
@keyframes jit{50%{width:2%}}
.ov-err{font-size:12px;color:#ff7b7b;background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.3);padding:8px 11px;border-radius:10px;
  opacity:0;animation:fi .3s .7s forwards}
.sc1[data-s="0"] .ov{animation:glitch .35s steps(2) .8s 2}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}}

/* экран Telegram с ботом */
.tg{background:#0e1621!important;padding:30px 0 0!important}
.tg-head{display:flex;align-items:center;gap:9px;padding:10px 14px;background:#17212b;border-bottom:1px solid #0b1118}
.tg-head .av{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(145deg,#4fe6df,#0ABAB5);color:#04100f;
  display:grid;place-items:center;font:700 13px Unbounded,sans-serif}
.tg-head b{display:block;font-size:13px;color:#e8eef3}.tg-head small{font-size:11px;color:#6c8aa5}
.tg-body{flex:1;display:flex;flex-direction:column;gap:9px;padding:14px 12px}
.msg{max-width:84%;padding:8px 11px;border-radius:14px;font-size:12.5px;line-height:1.4;opacity:0;animation:pop .35s cubic-bezier(.22,1,.36,1) forwards}
.msg.me{align-self:flex-end;background:#2b5278;color:#fff;border-bottom-right-radius:4px;animation-delay:.1s}
.msg.bot{align-self:flex-start;background:#182533;color:#e6edf3;border-bottom-left-radius:4px;animation-delay:.35s}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.tg-btn{position:relative;display:block;margin-top:9px;padding:9px;border-radius:9px;text-align:center;
  background:linear-gradient(145deg,#4fe6df,#0ABAB5);color:#04100f;font-weight:700;font-size:12.5px;animation:press .25s 1s}
@keyframes press{50%{transform:scale(.94)}}
.tap{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border-radius:50%;border:2px solid #fff;
  background:rgba(255,255,255,.25);opacity:0;animation:tap .8s .75s forwards}
@keyframes tap{0%{opacity:0;transform:scale(1.6)}40%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.4)}}

/* ===== сцена 2: скорость — всё двигает прокрутка (--sp от 0 до 1) ===== */
.sc2 .a-glow{opacity:var(--sp,0);transition:none}
.race{margin-top:24px;display:grid;gap:14px}
.race .ln{display:grid;grid-template-columns:118px 1fr 92px;align-items:center;gap:12px;font-size:13.5px}
.race .trk{height:10px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.race .trk i{display:block;height:100%;border-radius:6px}
.race .them .trk i{background:#9b4a4a;width:calc(var(--sp,0) * 4%)}
.race .us .trk i{background:linear-gradient(90deg,#0ABAB5,#6ff2ea);box-shadow:0 0 14px rgba(79,230,223,.7);width:calc(var(--sp,0) * 100%)}
.race .v{text-align:right;font-variant-numeric:tabular-nums;color:#8fa8a4}.race .us .v{color:#6ff2ea;font-weight:600}
.dl{margin-top:18px;font-size:14px;color:#bcd6d2;opacity:.35;transition:opacity .4s}.dl b{color:#6ff2ea;font-weight:600}
.sc2.done .dl{opacity:1}
.gauge{position:relative;width:min(340px,82vw);flex:none}
.gauge svg{display:block;width:100%;height:auto;overflow:visible}
.g-trk{fill:none;stroke:rgba(255,255,255,.08);stroke-width:14;stroke-linecap:round;stroke-dasharray:452.4 603.2}
.g-prog{fill:none;stroke:url(#gG);stroke-width:14;stroke-linecap:round;stroke-dasharray:452.4 603.2;stroke-dashoffset:452.4;
  filter:drop-shadow(0 0 8px rgba(79,230,223,.7))}
.g-tick{stroke:rgba(255,255,255,.25);stroke-width:2}
.needle{transform-origin:120px 120px;transform:rotate(-135deg)}
.g-num{position:absolute;left:0;right:0;top:71%;text-align:center}
.g-num b{display:block;font:600 clamp(38px,5vw,54px)/1 Unbounded,sans-serif;color:#6ff2ea;text-shadow:0 0 24px rgba(79,230,223,.5);font-variant-numeric:tabular-nums}
.g-num span{display:block;margin-top:6px;font-size:12px;color:#8fa8a4;letter-spacing:.06em}

/* ===== сцена 3: устройства — каждое следующее появляется от прокрутки ===== */
.sc3 .a-glow{opacity:calc(.25 + var(--dp,.1) * .75);transition:opacity .4s}
.sc3 .sc-wrap{flex-direction:column;text-align:center;gap:clamp(10px,2vw,22px)}
.sc3 .sc-text{flex:none;max-width:660px;margin:0 auto}
.sc3 .sc-sub{margin-left:auto;margin-right:auto}
.sc3 .sc-prog{margin:14px auto 0}
.dev-count{margin-top:16px;font-size:16px;color:#bcd6d2;min-height:64px}
.dev-count b{font:600 clamp(40px,6vw,64px)/1 Unbounded,sans-serif;color:#6ff2ea;vertical-align:middle;margin-right:8px;text-shadow:0 0 24px rgba(79,230,223,.45);font-variant-numeric:tabular-nums}
.mile{display:inline-block;margin-left:10px;font-size:12px;padding:5px 11px;border-radius:999px;background:rgba(10,186,181,.15);
  border:1px solid rgba(79,230,223,.4);color:#6ff2ea;opacity:0;transition:opacity .3s;vertical-align:middle}
.mile.on{opacity:1}
.hub{position:relative;width:min(640px,92vw);aspect-ratio:1/.8}
.hub>svg.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ln-d{stroke:rgba(79,230,223,.6);stroke-width:1.5;stroke-dasharray:4 5;opacity:0;transition:opacity .3s}
.ln-d.on{opacity:1;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.hub-core{position:absolute;left:50%;top:50%;width:94px;height:94px;margin:-47px;border-radius:24px;display:grid;place-items:center;
  font:700 40px Unbounded,sans-serif;color:#04201e;background:linear-gradient(150deg,#8af7f0,#19c9c3 45%,#078680);
  box-shadow:0 0 50px rgba(10,186,181,.55),inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 6px rgba(3,70,66,.4),inset 0 -8px 16px rgba(0,36,34,.5);
  animation:hubP 2.4s ease-in-out infinite}
@keyframes hubP{50%{box-shadow:0 0 80px rgba(10,186,181,.85),inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 6px rgba(3,70,66,.4),inset 0 -8px 16px rgba(0,36,34,.5)}}
/* устройство: без рамки — объёмная иконка с подсветкой снизу и подпись */
.dv{position:absolute;width:100px;margin:-48px 0 0 -50px;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;transform:translateY(10px) scale(.6);filter:blur(4px);
  transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1),filter .3s}
.dv.on{opacity:1;transform:none;filter:none}
.dv .t{position:relative;width:74px;height:74px;display:grid;place-items:center}
.dv .t::before{content:"";position:absolute;left:8px;right:8px;bottom:2px;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(79,230,223,.55),transparent);filter:blur(3px)}
.dv svg{position:relative;width:62px;height:62px;overflow:visible;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(79,230,223,.35))}
.dv .bd{fill:#0b2a28;stroke:url(#dvB);stroke-width:1.8;stroke-linejoin:round}
.dv .dsp{fill:url(#dvS)}
.dv .gl{fill:#fff;opacity:.16}
.dv .dt{fill:#8af7f0}
.dv .ft{fill:none;stroke:url(#dvB);stroke-width:2.2;stroke-linecap:round}
.dv small{font-size:12px;font-weight:500;color:#cfe3e0;letter-spacing:.01em;text-shadow:0 1px 8px rgba(2,9,10,.9)}

/* ===== сцена 4: улица, отключения → Revision ===== */
.sc4[data-s="1"] .a-red{opacity:.55}
.sc4[data-s="2"] .a-glow{opacity:1}
.sc4 .stg{flex:1 1 520px;max-width:620px;display:block}
.st{display:block;width:100%;height:auto;border-radius:22px;border:1px solid rgba(79,230,223,.2);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.st .sky,.st .bld,.st .win,.st .wifi path,.st .wifi circle,.st .person,.st .pbox{transition:fill .5s,stroke .5s}
.sky{fill:#0b2433}.sc4[data-s="1"] .sky{fill:#111315}.sc4[data-s="2"] .sky{fill:#03231f}
.ground{fill:#0a1a20}.sc4[data-s="2"] .ground{fill:#06302b}
.bld{fill:#163741}.sc4[data-s="1"] .bld{fill:#1b1d1f}.sc4[data-s="2"] .bld{fill:#0c3d38}
.win{fill:#dcefe9}.sc4[data-s="1"] .win{fill:#222527}.sc4[data-s="2"] .win{fill:#5ff0e8}
.wifi path{fill:none;stroke:#dcefe9;stroke-width:3.5;stroke-linecap:round}.wifi circle{fill:#dcefe9}
.sc4[data-s="1"] .wifi path{stroke:#45494c}.sc4[data-s="1"] .wifi circle{fill:#45494c}
.sc4[data-s="2"] .wifi path{stroke:#5ff0e8}.sc4[data-s="2"] .wifi circle{fill:#5ff0e8}
.wx{opacity:0;transition:opacity .3s}.sc4[data-s="1"] .wx{opacity:1}.wx line{stroke:#ff4d4d;stroke-width:4;stroke-linecap:round}
.nonet{opacity:0;transition:opacity .3s}.sc4[data-s="1"] .nonet{opacity:1}
.nonet rect{fill:#ff4d4d}.nonet text{fill:#fff;font:700 11px Manrope,sans-serif}
.okk{opacity:0;transition:opacity .4s}.sc4[data-s="2"] .okk{opacity:1}.okk path{fill:none;stroke:#5ff0e8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.flash{fill:#ff1e1e;opacity:0}.sc4[data-s="1"] .flash{animation:fl 1.2s ease-in-out 2}
@keyframes fl{50%{opacity:.18}}
.person{fill:#cfdcd9}.sc4[data-s="1"] .person{fill:#7d8684}.sc4[data-s="2"] .person{fill:#e8fbf9}
.pbox{fill:#2b3034}.sc4[data-s="2"] .pbox{fill:#0ABAB5}
.pR{opacity:0;fill:#04201e;font:700 12px Unbounded,sans-serif}.sc4[data-s="2"] .pR{opacity:1}
.rip{fill:none;stroke:#5ff0e8;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.sc4[data-s="2"] .rip{animation:rip 2.4s ease-out infinite}.sc4[data-s="2"] .rip.r2{animation-delay:.8s}.sc4[data-s="2"] .rip.r3{animation-delay:1.6s}
@keyframes rip{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(16)}}

/* низкий экран (телефон боком): сцены идут обычным потоком, без прилипания */
.flat .sc{height:auto}
.flat .sc-pin{position:relative;height:auto;padding:72px 0}

@media (max-width:760px){
  .sc-pin{padding:72px 0 12px}
  .sc-wrap{gap:18px;justify-content:center}
  .sc-title{font-size:clamp(24px,7vw,30px)}
  .sc-sub{margin-top:10px;font-size:14.5px}
  .sc-step{margin-bottom:10px}
  .sc-dots{margin-top:14px}.sc-dots button{font-size:12px;padding:0 11px}
  .race{margin-top:14px;gap:10px}.dl{margin-top:10px;font-size:13px}
  .vis{margin:0 auto}
  .race .ln{grid-template-columns:92px 1fr 78px;font-size:12.5px}
  .dv{width:60px;margin:-26px 0 0 -30px}.dv .t{width:48px;height:48px}.dv svg{width:40px;height:40px}.dv small{display:none}
  .hub-core{width:72px;height:72px;margin:-36px;font-size:30px;border-radius:19px}
}
@media (prefers-reduced-motion:reduce){
  .sc *{animation:none!important;transition:none!important}
  .msg,.ov-err,.ov-st .b{opacity:1}.ov-st .a,.tap{opacity:0}.shield .ck{stroke-dashoffset:0}
}