@font-face{font-family:Montserrat;src:url(assets/fonts/Montserrat.woff2) format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Montserrat;src:url(assets/fonts/Montserrat-Italic.woff2) format("woff2");font-style:italic;font-weight:100 900;font-display:swap}

/* Цвета сняты с логотипа. Скругляем только круг знака и шары, всё остальное прямое и скошенное, как заголовки. */
:root{
  --violet-100:#f6eef8;--violet-300:#cd87dd;--violet-400:#b373c5;--violet-600:#7d3e97;
  --violet-700:#5a247b;--violet-800:#49196d;--plum-950:#1c0a2b;--accent:#8a45a6;--muted:#6b5a78;
  --bg:#fdfbfe;--bg-alt:#efe8f4;--night:#0e0616;--gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  interpolate-size:allow-keywords;
}
*{box-sizing:border-box}
html{background:var(--plum-950);overflow-x:hidden;overscroll-behavior:none;touch-action:pan-y;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overscroll-behavior:none;touch-action:pan-y;background:var(--bg);color:var(--plum-950);font:500 16px/1.5 Montserrat,system-ui,sans-serif;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p,dl,dd,ol,h1,h2{margin:0}
ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--violet-400);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
section{position:relative;overflow:hidden;padding:clamp(56px,6.5vw,92px) var(--gutter)}

h1,h2,.off-title,.huge,.wordmark,.read,.sentence,.foot-cta p,.receipt-title{font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
h1,h2,.off-title{transform:skewX(-6deg);transform-origin:left bottom}
h2{font-size:clamp(30px,4.2vw,64px)}
h2 em{font-style:inherit;color:var(--accent)}
.js h2:not(.sr){clip-path:inset(-10% 100% -10% 0);transition:clip-path .9s var(--ease)}
.js h2.in:not(.sr){clip-path:inset(-10% -5% -10% -5%)}

.cta{position:relative;display:inline-flex;align-items:center;min-height:50px;padding:12px 26px;background:var(--plum-950);color:#fff;font-weight:900;font-style:italic;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;text-decoration:none;transform:skewX(-6deg);box-shadow:0 0 0 var(--violet-400);transition:background .15s,translate .15s var(--ease),box-shadow .15s var(--ease)}
.cta:hover{translate:-3px -3px;background:var(--violet-700);box-shadow:7px 7px 0 var(--violet-400)}
.cta:active{translate:0 0;box-shadow:0 0 0 var(--violet-400)}
.cta-light{background:#fff;color:var(--plum-950)}
.cta-light:hover{background:var(--violet-100);box-shadow:7px 7px 0 var(--plum-950)}

/* Шапка: скошенная плашка в том же наклоне, что заголовки. Читается на любом фоне страницы */
.top{position:fixed;inset:12px var(--gutter) auto;z-index:30}
.bar{display:flex;align-items:center;gap:clamp(12px,1.8vw,28px);min-height:50px;padding:5px 6px 5px 14px;background:var(--plum-950);color:#fff;transform:skewX(-6deg);transition:background .5s}
.bar a{text-decoration:none}
.brand{display:flex;align-items:center;gap:9px;font-size:17px;font-style:italic;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.brand b{font-weight:900}
.brand img{width:30px;height:30px;border-radius:26%;transform:skewX(6deg);transition:filter .5s}
.brand span{color:var(--violet-300);transition:color .5s}
.nav{position:relative;display:flex;margin-left:auto;font-weight:700;font-size:14px}
.nav a{position:relative;z-index:1;padding:7px 11px;color:#e4d8ea;transition:color .2s}
.nav a:hover{color:#fff}
.nav a[aria-current=true]{color:var(--plum-950)}
.nav-mark{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--violet-300);opacity:0;transition:translate .35s var(--ease),width .35s var(--ease),opacity .2s}
.cabinet{font-weight:700;font-size:14px;color:#e4d8ea;white-space:nowrap}
.cabinet:hover{color:#fff}
.bar-cta{display:flex;align-items:center;min-height:40px;padding:6px 15px;background:var(--violet-600);color:#fff;font-weight:900;font-style:italic;font-size:13px;text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;transition:background .15s,color .15s}
.bar-cta:hover{background:#fff;color:var(--plum-950)}
.burger{display:none;position:relative;flex:none;width:44px;height:40px;padding:0;border:0;background:var(--violet-300);cursor:pointer}
.burger i{position:absolute;left:12px;right:12px;height:3px;background:var(--plum-950);transition:top .2s var(--ease),rotate .2s var(--ease)}
.burger i:first-child{top:14px}
.burger i:last-child{top:23px}
[aria-expanded=true] .burger i,.burger[aria-expanded=true] i{top:18px}
.burger[aria-expanded=true] i:first-child{rotate:45deg}
.burger[aria-expanded=true] i:last-child{rotate:-45deg}
[data-net=off] .bar{background:#17101f}
[data-net=off] .brand img{filter:grayscale(1)}
[data-net=off] .brand span{color:inherit}
[data-net=off] .bar-cta{background:#3a3144}

/* Меню на телефоне */
.menu{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:96px var(--gutter) 28px;overflow-y:auto;background:var(--violet-600);color:#fff;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .4s var(--ease),visibility 0s .4s}
.menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .4s var(--ease)}
.menu nav{display:grid;gap:clamp(4px,1.2vh,12px)}
.menu nav a{font-weight:900;font-style:italic;font-size:clamp(30px,8.6vw,52px);line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;transform:skewX(-6deg)}
.menu-foot{display:grid;gap:16px;justify-items:start}
.menu-foot .cta{width:100%;justify-content:center}
.menu-cabinet{font-weight:700}

/* Первый экран */
.hero{min-height:min(100svh,780px);padding:0;background:var(--night)}
.scene-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(20px,3.4vh,36px);padding:88px var(--gutter) 32px;color:#9d95a6}
.off-title{font-size:clamp(36px,7.6vw,112px);color:#d9d4de}
.dead-player{display:flex;align-items:center;gap:16px;width:min(100%,560px);padding:11px 14px;background:#17101f;font-family:var(--mono);font-size:13px;white-space:nowrap}
.spinner{flex:none;width:24px;height:24px;border:3px solid #3a3144;border-top-color:#9d95a6;border-radius:50%;animation:spin 1s linear infinite}
.dead-bar{flex:1;height:4px;background:#3a3144}
.dead-bar i{display:block;width:12%;height:100%;background:#9d95a6}
.switch{display:flex;align-items:center;gap:18px;padding:0;border:0;background:none;color:#fff;font-weight:900;font-style:italic;font-size:clamp(17px,1.8vw,24px);text-transform:uppercase;letter-spacing:-.02em;text-align:left;cursor:pointer}
.switch-knob{position:relative;flex:none;width:72px;height:40px;border-radius:20px;background:#3a3144;transition:background .2s}
.switch-knob::after{content:"";position:absolute;left:4px;top:4px;width:32px;height:32px;border-radius:50%;background:#fff;animation:nudge 1.6s var(--ease) infinite}
.switch:hover .switch-knob{background:var(--violet-600)}

.scene-on{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:min(100svh,780px);padding:96px var(--gutter) 48px;overflow:hidden;background:var(--bg);clip-path:circle(150vmax at var(--cx,50%) var(--cy,50%));transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
[data-net=off] .scene-on{clip-path:circle(0 at var(--cx,50%) var(--cy,50%));transition-duration:.55s}
h1{position:relative;font-size:clamp(42px,6vw,92px)}
h1 .line{display:block;overflow:hidden;padding:.06em .1em .04em 0}
h1 .line:last-child{color:var(--accent)}
h1 .line>span{display:block;transition:translate .9s var(--ease) .35s}
[data-net=off] h1 .line>span{translate:0 110%;transition:none}
.on-text{position:relative;z-index:2}
.on-lead{max-width:24em;margin:clamp(14px,1.6vw,22px) 0 clamp(20px,2.2vw,30px);font-size:clamp(16px,1.3vw,19px);font-weight:600}
.ball-big{position:absolute;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;background:radial-gradient(circle at 62% 30%,#c97ef2 0%,#7a2fb0 36%,#3f0f6e 72%,#220746 100%);filter:blur(7px);pointer-events:none}
.b1{right:-190px;top:-160px;width:420px;height:480px;rotate:-20deg}
.b2{left:-170px;bottom:-250px;width:340px;height:380px;rotate:24deg}
.b3{right:-140px;bottom:-160px;width:340px;height:400px;rotate:-16deg}

.live-player{position:relative;z-index:2;width:min(100%,500px);justify-self:end;background:var(--plum-950);color:#fff;rotate:2deg;box-shadow:10px 10px 0 var(--violet-400);transition:rotate .9s var(--ease) .2s,scale .9s var(--ease) .2s}
[data-net=off] .live-player{rotate:-8deg;scale:.8;transition:none}
.live-screen{position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:var(--violet-800)}
.live-screen img{position:relative;width:38%;animation:bob 2.4s ease-in-out infinite}
.wave{position:absolute;left:-50%;width:200%;aspect-ratio:1;border-radius:43%;animation:spin 11s linear infinite}
.w1{top:42%;background:var(--violet-600)}
.w2{top:60%;background:var(--violet-300);animation-duration:7s;animation-direction:reverse}
.live-controls{display:flex;align-items:center;gap:12px;padding:10px 14px;font-family:var(--mono);font-size:13px}
.play{flex:none;width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.live-bar{flex:1;height:4px;background:#46325a}
.live-bar i{display:block;height:100%;background:var(--violet-300);animation:fill 40s linear infinite}
.switch-back{position:absolute;right:0;top:100%;margin-top:14px;padding:6px 0;border:0;background:none;color:var(--plum-950);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* Цена */
.price{padding-left:0;padding-right:0;background:var(--violet-600);color:#fff}
.huge{font-size:clamp(110px,17vw,260px);white-space:nowrap;line-height:.92;will-change:transform;padding-left:6vw}
.price-copy{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px clamp(24px,5vw,80px);margin-top:clamp(20px,2.6vw,36px);padding:0 var(--gutter);font-size:clamp(16px,1.3vw,19px);font-weight:600}
.price-copy h2{grid-row:span 2;font-size:clamp(26px,3vw,44px);color:#fff}
.os b{font-weight:800}

/* Защита */
.safety{background:var(--night);color:#efe8f4}
.safety h2{color:#fff}
.safety h2 em{color:var(--violet-300)}
.safety-head{margin-bottom:clamp(28px,4vw,48px)}
.safety-head p{max-width:38em;margin-top:clamp(12px,1.4vw,18px);font-size:clamp(16px,1.3vw,19px)}
.compare{--pos:50%;position:relative;overflow:hidden;font-family:var(--mono);font-size:clamp(15px,1.5vw,20px);line-height:1.3}
.log{padding:clamp(16px,2vw,28px)}
.log-title{margin-bottom:clamp(10px,1.2vw,16px);font:800 14px/1.25 Montserrat,sans-serif}
.log li{display:flex;gap:clamp(12px,2vw,32px);padding:clamp(5px,.7vw,10px) 0;white-space:nowrap}
.log time{color:currentColor;opacity:.55}
.log-open{background:#efe8f4;color:var(--plum-950)}
.log-hidden{position:absolute;inset:0;background:var(--violet-700);color:#fff;clip-path:inset(0 0 0 var(--pos))}
.log-hidden .log-title,.log-hidden ol{padding-left:0;text-align:right}
.log-hidden li{justify-content:flex-end}
.compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#fff;pointer-events:none}
.compare-line::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:4px solid var(--plum-950);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c0a2b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat}
.compare-hint{margin-top:10px;color:var(--violet-300);font-size:14px;font-weight:600}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare:has(input:focus-visible){outline:3px solid var(--violet-300);outline-offset:3px}
.safety-note{max-width:44em;margin-top:clamp(18px,2vw,28px);font-size:clamp(16px,1.25vw,18px)}
.facts{margin-top:clamp(28px,3.4vw,48px);border-top:2px solid #46325a}
.facts>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px 40px;padding:clamp(13px,1.4vw,20px) 0;border-bottom:2px solid #46325a;transition:padding-left .25s var(--ease),background .25s}
.facts>div:hover{padding-left:16px;background:#1c0a2b}
.facts dt{font-weight:900;font-style:italic;font-size:clamp(17px,1.5vw,22px);line-height:1.15;letter-spacing:-.01em;color:#fff}
.facts dd{color:#d8c9e2}
.facts a{color:#fff;overflow-wrap:anywhere}
.tech{margin-top:20px;color:#a897b5;font-size:14px}

/* Табло */
.countries{background:var(--bg-alt)}
.board{max-width:760px;margin-top:clamp(22px,2.6vw,36px);background:var(--plum-950);color:#fff;font-family:var(--mono);font-weight:700;font-size:clamp(20px,2.6vw,36px);line-height:1.05}
.board-row{display:flex;gap:clamp(14px,3vw,48px);align-items:center;padding:clamp(7px,.7vw,10px) clamp(12px,1.4vw,20px);border-bottom:2px solid #46325a;transition:background .15s,color .15s}
.board-row:hover{background:var(--violet-300);color:var(--plum-950)}
.board-row:hover .code{color:inherit}
.code{flex:none;color:var(--violet-300);font-size:.5em}
.flap{min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.next{border-bottom:0;color:var(--violet-300)}
.countries-note{margin-top:20px;font-weight:700}

/* Чек */
.receipt-wrap{display:grid;place-items:center;background:var(--bg)}
.receipt{--teeth:radial-gradient(circle at 10px 12px,transparent 9px,#fff 10px);position:relative;z-index:1;width:min(100%,430px);padding:clamp(24px,3vw,34px) clamp(20px,2.6vw,32px) clamp(36px,4vw,46px);background:#fff;font-family:var(--mono);font-size:14px;rotate:-1.5deg;filter:drop-shadow(0 22px 22px rgba(28,10,43,.28));-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle at 10px 12px,transparent 8px,#000 9px) bottom/20px 12px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle at 10px 12px,transparent 8px,#000 9px) bottom/20px 12px repeat-x}
.js .receipt{clip-path:inset(0 -40px 100% -40px);translate:0 -40px;transition:clip-path 1.2s steps(14),translate 1.2s steps(14)}
.js .receipt.in{clip-path:inset(0 -40px -60px -40px);translate:0 0}
.receipt-title{margin-bottom:18px;font-family:Montserrat,sans-serif;font-size:clamp(28px,2.8vw,38px);color:var(--plum-950)}
.receipt dl>div{display:flex;align-items:baseline;gap:8px;padding:7px 0}
.receipt dt{flex:none}
.receipt dl>div::after{content:"";order:1;flex:1;border-bottom:2px dotted #9b8ba8}
.receipt dd{order:2;font-weight:700;text-align:right}
.receipt-total{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 24px;padding:14px 0 18px;border-top:3px double var(--plum-950);border-bottom:2px dashed #9b8ba8;font-weight:700}
.receipt-total b{font:900 italic clamp(34px,3.4vw,46px)/1 Montserrat,sans-serif;color:var(--violet-600)}
.receipt-sub{margin:-12px 0 16px;color:var(--muted)}
.receipt-label{margin-bottom:6px;font-weight:700}
.receipt-stamp{margin:20px 0 24px;padding:12px 14px;border:3px solid var(--violet-600);color:var(--violet-700);font-weight:700;line-height:1.35}
.receipt .cta{display:flex;justify-content:center;font-family:Montserrat,sans-serif}

/* Друзья */
.friends{background:var(--plum-950);color:#fff}
.sentence{display:flex;flex-wrap:wrap;align-items:center;gap:.14em .3em;font-size:clamp(28px,4.4vw,66px);line-height:1.1;transform:skewX(-6deg);transform-origin:left bottom}
.sentence b{color:var(--violet-300);font-weight:900;font-variant-numeric:tabular-nums}
.sentence b.bump{animation:bump .3s var(--ease)}
.stepper{display:inline-flex;align-items:stretch;background:#fff;color:var(--plum-950)}
.stepper button{width:.9em;min-width:44px;border:0;background:var(--violet-300);color:var(--plum-950);font:900 .7em/1 Montserrat,sans-serif;cursor:pointer;transition:background .12s}
.stepper button:hover{background:#fff}
.stepper button:active{background:var(--violet-100)}
.stepper output{min-width:1.3em;padding:0 .1em;text-align:center;font-variant-numeric:tabular-nums}
.friends-note{max-width:40em;margin:clamp(18px,2vw,28px) 0 clamp(20px,2vw,28px);color:#d8c9e2}

/* Начало работы */
.start{background:var(--bg)}
.read{font-size:clamp(28px,4vw,60px);line-height:1.04;transform:skewX(-6deg);transform-origin:left bottom}
.read span{color:#d8cde0;transition:color .25s}
.read span.lit{color:var(--plum-950)}

/* Вопросы как переписка в Telegram */
.faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:32px clamp(24px,5vw,72px);align-items:start;background:var(--bg-alt)}
.faq h2{font-size:clamp(30px,3.4vw,50px)}
.chat{display:grid;gap:14px}
.chat details{display:grid}
.chat summary{justify-self:end;width:fit-content;max-width:85%;margin-left:auto;padding:10px 15px;background:#fff;font-weight:700;cursor:pointer;list-style:none;transition:background .15s,color .15s;border-radius:18px 18px 4px 18px}
.chat summary::-webkit-details-marker{display:none}
.chat summary:hover{background:var(--violet-100)}
.chat details[open] summary{background:var(--violet-600);color:#fff}
.chat p{width:fit-content;max-width:85%;margin-top:8px;padding:10px 15px;background:var(--plum-950);color:#fff;border-radius:18px 18px 18px 4px;animation:pop .35s var(--ease)}
.chat p a{color:#fff}

/* Подвал: призыв на фиолетовом, навигация на тёмном, граница в наклоне заголовков */
.foot{position:relative;overflow:hidden;background:var(--plum-950);color:#fff}
.foot-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(44px,5vw,68px) var(--gutter) clamp(66px,7vw,96px);background:var(--violet-600);clip-path:polygon(0 0,100% 0,100% calc(100% - 4vw),0 100%)}
.foot-cta p{font-size:clamp(28px,3.8vw,56px);transform:skewX(-6deg)}
.foot-main{padding:clamp(36px,5vw,64px) var(--gutter) 24px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px clamp(24px,4vw,64px)}
.foot-about img{width:44px;height:44px;margin-bottom:16px;border-radius:26%}
.foot-about p{max-width:18em;color:#d8c9e2}
.foot h3{margin:0 0 12px;color:var(--violet-300);font-size:14px;font-weight:800}
.foot nav{display:grid;gap:8px;justify-items:start;align-content:start}
.foot nav h3{margin-bottom:6px}
.foot nav a{font-weight:600;text-decoration:none}
.foot nav a:hover{color:var(--violet-300);text-decoration:underline;text-underline-offset:4px}
.foot-grid>div>p+p{margin-top:8px}
.wordmark{margin:clamp(32px,4vw,52px) 0 clamp(12px,1.4vw,18px);font-size:min(calc((100vw - 2 * var(--gutter)) / 5.75),96px);line-height:.86;letter-spacing:-.04em;white-space:nowrap;color:#fff;transform:skewX(-6deg)}
.wordmark span{color:var(--violet-300)}
.copy{color:#a897b5;font-size:14px}

/* Выбор, где подключиться */
.choice{width:min(calc(100vw - 32px),520px);max-height:calc(100dvh - 32px);margin:auto;padding:clamp(24px,4vw,36px);overflow:auto;border:0;background:var(--plum-950);color:#fff;box-shadow:12px 12px 0 var(--violet-400)}
.choice::backdrop{background:rgba(14,6,22,.72)}
.choice[open]{animation:choiceIn .3s var(--ease)}
.js .choice h2,.choice h2{clip-path:none;padding-right:44px;font-size:clamp(28px,4vw,40px);color:#fff}
.choice h2 em{color:var(--violet-300)}
.choice-list{display:grid;gap:12px;margin-top:24px}
.choice-item{display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 18px;background:#fff;color:var(--plum-950);text-decoration:none;transition:background .15s,color .15s,translate .15s var(--ease)}
.choice-item:hover{background:var(--violet-300);translate:4px 0}
.choice-item svg{flex:none;width:32px;height:32px;fill:none;stroke:var(--violet-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.choice-item:hover svg{stroke:var(--plum-950)}
.choice-item span{min-width:0;color:var(--muted);font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.choice-item:hover span{color:var(--plum-950)}
.choice-item b{display:block;color:var(--plum-950);font-size:18px;font-weight:800}
.choice-close{position:absolute;z-index:2;right:14px;top:14px;width:44px;height:44px;padding:0;border:0;background:var(--violet-300);cursor:pointer}
.choice-close:hover{background:#fff}
.choice-close i{position:absolute;left:11px;right:11px;top:20px;height:3px;background:var(--plum-950);rotate:45deg}
.choice-close i:last-child{rotate:-45deg}
.choice :focus-visible{outline:3px solid var(--violet-300);outline-offset:3px}
@keyframes choiceIn{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes nudge{0%,100%{translate:0 0}45%{translate:10px 0}}
@keyframes bob{50%{translate:0 -8px}}
@keyframes fill{from{width:0}to{width:100%}}
@keyframes bump{40%{scale:1.14}}
@keyframes pop{from{opacity:0;translate:-10px 6px}to{opacity:1;translate:0 0}}

@media (max-width:1100px){
  .nav,.top .cabinet{display:none}
  .burger{display:block}
  .bar-cta{margin-left:auto}
}
@media (max-width:980px){
  .scene-on{grid-template-columns:minmax(0,1fr);align-content:start;padding-top:88px;padding-bottom:64px}
  .live-player{width:min(100%,460px);justify-self:center}
  .b1{width:300px;height:360px;right:-210px;top:-190px}
  .b2{display:none}
  .price-copy{grid-template-columns:minmax(0,1fr)}
  .price-copy h2{grid-row:auto}
  .faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  h2{font-size:8.2vw}
  .facts>div{grid-template-columns:minmax(0,1fr)}
  .log-title{font-size:13px}
  .log time{display:none}
  .b3{display:none}
  .chat summary,.chat p{max-width:94%}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-about{grid-column:1/-1}
  .cta{justify-content:center}
  .top{inset:8px 8px auto}
  .on-text .cta,.friends .cta,.foot-cta .cta{width:100%}
  .live-player{box-shadow:8px 8px 0 var(--violet-400)}
}
@media (max-width:440px){
  .bar-cta{display:none}
  .burger{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js h2:not(.sr){clip-path:none}
  .js .receipt{clip-path:none;translate:none}
  .huge{transform:skewX(-6deg)}
}