@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/montserrat-cyrillic.woff2?v=6fd02dd7') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/montserrat-latin.woff2?v=311d352d') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/onest-cyrillic.woff2?v=fe2bd26a') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/onest-latin.woff2?v=3db826ed') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --ground:#0a0e14; --panel:#111823;
  --white:#fff; --grey:#979797;
  --blue:#0da9ef; --violet:#7d4fb6; --amber:#f2b950; --red:#ff5d5d;
  --onest:'Onest',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --nextart:'Montserrat','Onest',Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scrollbar-width:none;background:var(--ground);overscroll-behavior-x:contain}
html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--ground);color:var(--white);font-family:var(--onest);font-size:16px;line-height:normal;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* svh = «маленький» вьюпорт: высота, которая остаётся при ВЫДВИНУТОЙ адресной строке телефона.
   С обычным vh браузер считает по спрятанной панели, и низ экрана (кнопка, ноги фигур) уезжает под неё. */
.sec{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;scroll-snap-align:start}

/* ---------- header (appheader / navbutton / logo) ---------- */
.hdr{position:fixed;left:0;right:0;top:0;z-index:7}
.hdr-ul{display:flex;justify-content:space-between;align-items:center;gap:40px;list-style:none;margin:34px 145px 0;padding:0}
.hdr-left{display:flex;align-items:center;gap:40px}
.logo{display:block;opacity:.6;transition:opacity .3s ease-out}
.logo:hover{opacity:1}
.logo img{height:34px;width:auto}
.navbtn{display:flex;align-items:center;gap:15px;opacity:.5;transition:opacity .3s ease-out;font-family:var(--onest);font-size:14px;font-weight:400;color:#fff}
.navbtn:hover{opacity:1}
.navbtn svg{width:22px;height:22px;flex:none}
.hdr-right{display:flex;align-items:center}
.burger{display:none;width:46px;height:46px;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:12px;background:rgba(10,14,20,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;opacity:.85;transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .2s ease-out}
.burger.on span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger.on span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;gap:0;padding:0 9vw;
  background:rgba(7,10,15,.965);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .28s ease-out,visibility .28s}
.mnav.on{opacity:1;visibility:visible}
.mnav a:not(.btn){display:flex;align-items:center;gap:18px;padding:22px 2px;border-bottom:1px solid rgba(255,255,255,.09);
  font-family:var(--onest);font-weight:600;font-size:19px;letter-spacing:.07em;text-transform:uppercase;color:#e6edf5;
  opacity:0;translate:0 14px;transition:opacity .35s ease-out,translate .5s cubic-bezier(.2,.7,.2,1)}
.mnav.on a:not(.btn){opacity:1;translate:0 0}
.mnav.on a:nth-of-type(2){transition-delay:.06s}.mnav.on a:nth-of-type(3){transition-delay:.12s}
.mnav a svg{width:23px;height:23px;flex:none;opacity:.55}
.mnav .mnav-play{width:100%;height:64px;margin-top:34px;font-size:21px;opacity:0;translate:0 14px;
  transition:opacity .35s ease-out .18s,translate .5s cubic-bezier(.2,.7,.2,1) .18s}
.mnav.on .mnav-play{opacity:1;translate:0 0}
html.menu-open{overflow:hidden}

/* ---------- buttons (button module) ---------- */
.btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;font-family:var(--nextart);font-weight:700;text-transform:uppercase;color:#fff;text-align:center;line-height:normal;user-select:none;transition:transform .2s ease-out}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;z-index:-1;transition:opacity .3s ease-out}
.btn:hover::before{opacity:1}
.btn-medium{height:80px;width:400px;font-size:24px}
.btn-blue{background:linear-gradient(223deg,#0a6db0 20.89%,#0c8fd8 54.78%,#085a92);box-shadow:0 10px 30px -10px rgba(13,169,239,.55)}
.btn-blue::before{background:linear-gradient(0deg,#ffffff26,#ffffff26),linear-gradient(223deg,#0a6db0 20.89%,#0c8fd8 54.78%,#085a92);box-shadow:0 0 28px 0 #0da9ef99}
.btn-medium{letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.btn-violet{background:linear-gradient(223deg,#5334aa 20.89%,#8564df 58.86%,#5334aa)}
.btn-violet::before{background:linear-gradient(0deg,#fff3,#fff3),linear-gradient(223deg,#5334aa 20.89%,#8564df 58.86%,#5334aa);box-shadow:0 0 25px 0 #5334aab3}
.btn-red{background:linear-gradient(223deg,#9c2a2a 20.89%,#d64a4a 54.78%,#8c2222);box-shadow:0 10px 30px -10px rgba(214,74,74,.5)}
.btn-red::before{background:linear-gradient(0deg,#ffffff26,#ffffff26),linear-gradient(223deg,#9c2a2a 20.89%,#d64a4a 54.78%,#8c2222);box-shadow:0 0 28px 0 #d64a4a99}
.btn-violet{background:linear-gradient(223deg,#4a2fa0 20.89%,#7d5ce0 54.78%,#3f2790);box-shadow:0 10px 30px -10px rgba(125,92,224,.5)}
.btn-violet::before{background:linear-gradient(0deg,#ffffff26,#ffffff26),linear-gradient(223deg,#4a2fa0 20.89%,#7d5ce0 54.78%,#3f2790);box-shadow:0 0 28px 0 #7d5ce099}

/* ---------- section furniture (pagebg / shadowtop / shadowbottom) ---------- */
/* три тихие длинные линии, текут за персонажем: минимум внимания, но фон не мёртвый */
.curves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#cfe0ff;stroke-width:1.2;opacity:.16;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
/* 🔴 CSS-анимация тикает и у секции за экраном: линии и дрейф карты грелись всё время, пока страница открыта.
   Класс is-in ставит наблюдатель на видимости — вне кадра анимации замирают. */
.curves-flow{transform-origin:960px 540px;animation:curves 90s linear infinite;animation-play-state:paused}
.sec.is-in .curves-flow{animation-play-state:running}
@keyframes curves{from{transform:rotate(-7deg) translateX(0)}to{transform:rotate(-7deg) translateX(-1920px)}}
.shadow-t{position:absolute;left:0;right:0;top:0;height:300px;background:linear-gradient(180deg,var(--ground),rgba(10,14,20,0));z-index:1;pointer-events:none}
.shadow-b{position:absolute;left:0;right:0;bottom:0;height:300px;background:linear-gradient(180deg,rgba(10,14,20,0),var(--ground));z-index:1;pointer-events:none}

/* ---------- hero (main) ---------- */
.hero{background:var(--ground)}
.bgwrap{position:absolute;inset:-4%;z-index:0;animation:drift 70s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 45%;will-change:transform}
.hero.is-in .bgwrap{animation-play-state:running}
.bgwrap .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:brightness(1.2) contrast(1.06)}
@keyframes drift{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.07) translate(-1.2%,1%)}100%{transform:scale(1) translate(0,0)}}
.hero .dim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,14,20,.45) 0%,rgba(10,14,20,.06) 45%,rgba(10,14,20,.55) 100%)}
.blurbg{position:absolute;left:50%;bottom:-22%;transform:translateX(-50%);width:62%;height:70%;z-index:1;filter:blur(120px);opacity:.5;border-radius:50%;
  background:radial-gradient(closest-side,#0da9ef,#0b2e4c 60%,transparent)}
.fog{position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;z-index:1;pointer-events:none;opacity:.55;filter:blur(28px);animation-play-state:paused;
  background:radial-gradient(40% 60% at 30% 70%,rgba(160,210,255,.14),transparent 70%),radial-gradient(35% 55% at 70% 80%,rgba(160,210,255,.12),transparent 70%);
  animation:fog 48s ease-in-out infinite alternate}
.hero.is-in .fog{animation-play-state:running}
.fog.two{animation-duration:63s;animation-direction:alternate-reverse;opacity:.4;
  background:radial-gradient(38% 60% at 55% 75%,rgba(190,225,255,.12),transparent 70%),radial-gradient(30% 50% at 15% 85%,rgba(190,225,255,.1),transparent 70%)}
@keyframes fog{0%{transform:translateX(-4%)}100%{transform:translateX(4%)}}
.motes{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.95}
/* Огоньки для телефона. Холст там отключён (кадровый цикл поверх размытых слоёв стоил 40–70% главного
   потока), а эти точки живут на transform/opacity — их считает композитор, главный поток свободен.
   Их меньше и они спокойнее, чем на десктопе: экран маленький, россыпь читалась бы шумом. */
.sparks{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.sparks i{position:absolute;bottom:-4%;width:14px;height:14px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(226,247,255,1) 0%,rgba(150,220,255,.85) 22%,rgba(13,169,239,.45) 46%,rgba(13,169,239,0) 72%);
  box-shadow:0 0 12px rgba(13,169,239,.55);
  will-change:transform,opacity;animation:spark linear infinite}
@keyframes spark{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  10%{opacity:.85}70%{opacity:.5}100%{transform:translate3d(22px,-104svh,0) scale(1.15);opacity:0}}
.sparks i:nth-child(1){left:8%;animation-duration:13s;animation-delay:-2s}
.sparks i:nth-child(2){left:20%;width:9px;height:9px;animation-duration:16s;animation-delay:-9s}
.sparks i:nth-child(3){left:31%;width:12px;height:12px;animation-duration:11s;animation-delay:-5s}
.sparks i:nth-child(4){left:43%;width:18px;height:18px;animation-duration:18s;animation-delay:-13s}
.sparks i:nth-child(5){left:52%;width:8px;height:8px;animation-duration:12s;animation-delay:-1s}
.sparks i:nth-child(6){left:63%;animation-duration:15s;animation-delay:-7s}
.sparks i:nth-child(7){left:72%;width:9px;height:9px;animation-duration:14s;animation-delay:-11s}
.sparks i:nth-child(8){left:83%;width:16px;height:16px;animation-duration:17s;animation-delay:-4s}
.sparks i:nth-child(9){left:91%;width:10px;height:10px;animation-duration:12.5s;animation-delay:-15s}
.sparks i:nth-child(10){left:37%;width:7px;height:7px;animation-duration:19s;animation-delay:-6s}
@media (max-width:899px){ .sparks{display:block} }
.person{position:absolute;left:0;right:0;bottom:0;margin:0 auto;height:91%;width:64.36%;object-fit:contain;object-position:bottom;z-index:2;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 46%,rgba(6,9,14,0) 0%,rgba(6,9,14,0) 55%,rgba(6,9,14,.45) 82%,rgba(6,9,14,.8) 100%)}
.logoblock{position:absolute;left:50%;bottom:9vh;bottom:9svh;transform:translateX(-50%);width:min(900px,52%);z-index:4;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;gap:20px;padding:26px 24px 22px}
.logoblock h1{margin:0;line-height:0}
.logoblock .textbg{position:absolute;inset:-6px -14px;background:rgba(0,0,0,.76);filter:blur(40px);z-index:-1;border-radius:48px}
.wm{position:relative;display:inline-block}
.wordmark{display:block;position:relative;width:min(38vw,560px);height:auto;
  filter:brightness(1.18) contrast(1.04) drop-shadow(0 0 20px rgba(13,169,239,.42));opacity:1}
.js .wm.armed .wordmark{opacity:0}
.wm.play .wordmark{animation:wm-sharp 2.2s cubic-bezier(.16,.84,.3,1) forwards}
.wm-b1,.wm-b2{position:absolute;left:50%;top:50%;width:118.84%;height:200.84%;max-width:none;transform:translate(-50%,-50%);pointer-events:none;opacity:0}
.wm.play .wm-b1{animation:wm-b1 2.2s cubic-bezier(.16,.84,.3,1) forwards}
.wm.play .wm-b2{animation:wm-b2 2.2s cubic-bezier(.16,.84,.3,1) forwards}
@keyframes wm-b1{0%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}18%{opacity:1}70%{opacity:0;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes wm-b2{0%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes wm-sharp{0%{opacity:0;transform:scale(1.03)}28%{opacity:0}100%{opacity:1;transform:scale(1)}}
.txtbox{display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:80px;text-align:center;max-width:860px;transition:opacity .45s ease-out,transform .45s ease-out}
.txtbox.is-swapping{opacity:0;transform:translateY(6px)}
.h-title{font-family:var(--onest);font-weight:800;font-size:min(23px,calc(16px + .36vw));text-transform:uppercase;color:#fff;margin:0;line-height:1.25;letter-spacing:.05em;text-wrap:balance}
.h-title .hl{color:#62c9ff;text-shadow:0 0 18px rgba(13,169,239,.6)}
.h-desc{font-family:var(--onest);font-weight:400;font-size:min(15px,calc(12px + .15625vw));color:#b9c3cf;margin:0;min-height:20px;line-height:1.45;letter-spacing:.01em}
.timer{width:min(360px,52%);height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.timer i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#0da9ef,#8ad8ff);box-shadow:0 0 12px rgba(13,169,239,.85);animation:fill 10s linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.logoblock .btn{margin-top:6px}

/* ---------- factions (slidercontainer / slider) ---------- */
.factions{background:var(--ground)}
.sl-backgrounds{position:absolute;inset:0;display:flex;z-index:0;transition:transform 1s ease-out}
.sl-bg{position:relative;flex:0 0 100%;height:100%;background:var(--wash);overflow:hidden}
.sl-shadow{position:absolute;right:5.57%;bottom:-37.59%;width:953px;height:1307px;border-radius:1307px;filter:blur(100px);background:var(--c);opacity:.28}
/* 🔴 Проблесковый свет патруля. Было: одно пятно, которому в @keyframes меняли и цвет, и blur —
   размытие в 100–200 px пересчитывалось каждый кадр (дорого), а на экране читалось как ровная синева:
   ни на десктопе, ни на телефоне мигание не было видно. Стало: два готовых пятна, красное и синее,
   которым анимируется только opacity — это композиторное свойство, и вспышки наконец заметны. */
.beacon{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.beacon i{position:absolute;top:-6%;width:70%;height:86%;border-radius:50%;opacity:0;filter:blur(58px);
  mix-blend-mode:screen;will-change:opacity}
.beacon .r{right:-4%;background:radial-gradient(closest-side,rgba(255,90,90,1),rgba(255,48,48,.5) 48%,rgba(255,40,40,0) 76%)}
.beacon .b{right:24%;background:radial-gradient(closest-side,rgba(96,164,255,1),rgba(48,110,255,.5) 48%,rgba(40,100,255,0) 76%)}
.sl-bg.pd.is-active .beacon .r{animation:beacon 2.6s ease-in-out infinite}
.sl-bg.pd.is-active .beacon .b{animation:beacon 2.6s ease-in-out infinite;animation-delay:-1.3s}
@keyframes beacon{0%{opacity:.05}9%{opacity:.95}17%{opacity:.12}26%{opacity:.8}35%{opacity:.06}100%{opacity:.05}}
.sl-img{position:absolute;right:11.77%;bottom:-3%;height:86%;width:auto;object-fit:contain;object-position:bottom;filter:grayscale(100%) brightness(.8);
  transition:height .5s ease-out,filter .6s ease-out,right .5s ease-out}
.sl-bg.is-active .sl-img{filter:none;height:93%;right:10.5%}
.sl-articles{position:absolute;inset:0;display:flex;z-index:2;transition:transform 1s ease-out}
.sl-art{position:relative;flex:0 0 100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 12.19vw}
.sl-title{font-family:var(--onest);font-weight:900;font-size:min(50px,calc(30px + 1.04167vw));letter-spacing:3.983px;text-transform:uppercase;color:#fff;margin:0;width:fit-content;text-shadow:0 0 25px #ffffff40}
.sl-line{width:350px;height:4px;border-radius:15px;margin:11px 0 0;background:var(--c);box-shadow:0 0 25px 0 var(--c);opacity:.85}
.sl-desc{font-family:var(--onest);font-weight:500;font-size:min(26px,calc(16px + .52083vw));letter-spacing:1.6px;color:#ffffffe6;width:670px;max-width:46vw;margin:50px 0 0;text-shadow:0 0 30px #ffffff1a}
.sl-btn{position:absolute;left:12.19vw;bottom:12.78vh;bottom:12.78svh}
.sl-arrow{position:absolute;top:0;bottom:0;margin:auto 0;width:1.15%;min-width:16px;height:3.29%;min-height:30px;opacity:.4;z-index:4;transition:opacity .3s ease-out;filter:drop-shadow(0 0 12.7px rgba(255,255,255,.2))}
.sl-arrow:hover{opacity:1}
.sl-arrow.left{left:4%}.sl-arrow.right{right:4%}
.sl-arrow svg{width:100%;height:100%;display:block}
.sl-dots{display:none;position:absolute;left:0;right:0;bottom:3.4svh;z-index:4;justify-content:center;gap:10px}
.sl-dots button{width:38px;height:22px;padding:10px 0;background:none;display:block}
.sl-dots button::before{content:"";display:block;width:100%;height:2px;border-radius:2px;background:rgba(255,255,255,.28);transition:background .3s ease-out,box-shadow .3s ease-out}
.sl-dots button.on::before{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.55)}

/* ---------- how to start (howtoinstall / card / cardbutton) ---------- */
.howto{background:var(--ground)}
.ht-head{position:relative;z-index:2;opacity:0;transform:translateY(18px);transition:opacity .7s ease-out,transform .9s cubic-bezier(.2,.7,.2,1)}
.howto.is-in .ht-head{opacity:1;transform:none}
.ht-title{font-family:var(--onest);font-weight:900;font-size:min(50px,calc(20px + 1.5625vw));letter-spacing:4px;text-transform:uppercase;text-align:center;color:#fff;margin:6.35% auto 0;padding:0;text-shadow:0 0 39.432px #fff6}
.ht-line{width:26.04%;height:3px;margin:15px auto 0;border-radius:23.186px;background:#ffffff80;box-shadow:0 0 19.321px 0 #fff6}
.ht-cards{position:absolute;inset:0;z-index:2}
.ht-slot{position:absolute;width:27.81%;overflow:visible;opacity:0;translate:0 56px;transition:opacity .7s ease-out,translate 1.05s cubic-bezier(.2,.7,.2,1)}
.ht-slot.left{transition-delay:.1s}.ht-slot.center{transition-delay:.25s}.ht-slot.right{transition-delay:.4s}
.howto.is-in .ht-slot{opacity:1;translate:0 0}
.ht-slot.left{left:8.33%;top:45.37%;height:32%;rotate:-4.5deg;z-index:1}
.ht-slot.center{left:36.095%;top:35.3%;height:41%;z-index:2}
.ht-slot.right{right:8.33%;top:45.37%;height:32%;rotate:4.5deg;z-index:1}
.ht-wash{position:absolute;inset:0;filter:blur(58px)}
.ht-slot.left .ht-wash{background:#1a236f33}
.ht-slot.center .ht-wash{background:#451a6f33}
.ht-slot.right .ht-wash{background:#0d5f8a33}
.card{position:relative;height:100%;width:100%;border-radius:15px;padding:30px 40px;background-position:50%;background-size:cover;background-repeat:no-repeat;transition:box-shadow .3s ease-out}
.card-blue{background-image:url("img/card-blue.jpg?v=bfd10a31")}.card-blue:hover{box-shadow:0 0 50px 0 #0500ff33}
.card-violet{background-image:url("img/card-violet.jpg?v=a19c2887")}.card-violet:hover{box-shadow:0 0 50px 0 #8f00ff33}
.card-teal{background-image:url("img/card-teal.jpg?v=7e6ae02e")}.card-teal:hover{box-shadow:0 0 50px 0 #00c8ff33}
.step{font-family:var(--onest);font-weight:300;letter-spacing:.08em;font-size:min(20px,calc(8px + .625vw));text-transform:uppercase;color:#fff;margin:0}
.ctitle{font-family:var(--onest);font-weight:700;font-size:min(30px,calc(16px + .72917vw));text-transform:uppercase;color:#fff;margin:5px 0 0;line-height:normal}
.cdesc{font-family:var(--onest);font-weight:300;font-size:min(22px,calc(14px + .41667vw));color:#fffc;margin:10px 0 0;width:100%}
.cbtns{position:absolute;left:40px;bottom:30px;display:flex;gap:10px}
.cbtn{position:relative;z-index:1;display:flex;align-items:center;gap:8px;border-radius:min(10px,calc(6px + .20833vw));font-family:var(--nextart);font-weight:600;font-size:min(20px,calc(12px + .41667vw));color:#fff;padding:min(18px,calc(8px + .52083vw)) min(24px,calc(12px + .52083vw));background:var(--cb);transition:all .3s ease-out;white-space:nowrap}
.cbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;z-index:-1;background:linear-gradient(0deg,#ffffff1a,#ffffff1a),var(--cb);transition:all .3s ease-out}
.cbtn:hover::before{opacity:1}
.cb-blue{--cb:#345caa}.cb-violet{--cb:#7d4fb6}.cb-teal{--cb:#1f7fa8}.cb-dark{--cb:#1f2b3b}
.ht-person{position:absolute;right:3.5%;top:19%;height:57.5%;width:auto;object-fit:contain;object-position:center bottom;z-index:1;opacity:0;translate:0 70px;
  transition:opacity .8s ease-out .25s,translate 1.4s cubic-bezier(.2,.7,.2,1) .25s;filter:drop-shadow(0 16px 22px rgba(0,0,0,.55))}
.howto.is-in .ht-person{opacity:1;translate:0 0}
/* дорожный указатель Everon вместо фанерной таблички */
.signpost{position:absolute;right:20%;top:15.5%;width:min(17vw,330px);height:56%;z-index:1;perspective:1100px;opacity:0;translate:0 40px;transition:opacity .6s ease-out,translate 1.1s cubic-bezier(.2,.7,.2,1)}
.howto.is-in .signpost{opacity:1;translate:0 0}
.sign{width:100%;height:100%;display:block;overflow:visible;transform:rotateY(-11deg) rotateZ(-2deg);transform-origin:50% 100%}
.howto.is-in .sign{animation:sway 4.5s ease-in-out 2.2s infinite alternate}
@keyframes sway{0%{transform:rotateY(-12deg) rotateZ(-2.5deg)}100%{transform:rotateY(-8deg) rotateZ(.8deg)}}
/* таблички откидываются от столба, как на шарнире, с перелётом */
.plate-g{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:rotate(-58deg) scale(.88);transition:transform 1.15s cubic-bezier(.34,1.56,.64,1),opacity .45s ease-out}
.plate-g.p1{transition-delay:.45s}.plate-g.p2{transition-delay:.7s}.plate-g.p3{transition-delay:.95s}
.howto.is-in .plate-g{opacity:1;transform:none}
.plate-a{cursor:pointer}
.plate-a:hover .face{filter:brightness(1.35)}
.plate-a:hover text{fill:#dff3ff}

/* ---------- footer ---------- */
.ftr{position:relative;background:var(--panel);width:100%;scroll-snap-align:end}
.ftr::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:linear-gradient(180deg,rgba(17,24,35,0),var(--panel));pointer-events:none}
.ftr-main{display:flex;flex-direction:column;gap:16px;padding:20px 7.55% 24px}
.ftr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.socials{display:flex;gap:12px;flex-shrink:0}
.soc{width:40px;height:40px;border-radius:6px;background:#ffffff0f;padding:8px;transition:background-color .25s ease-out;display:grid;place-items:center}
.soc:hover{background:#ffffff24}
.soc svg{width:22px;height:22px;opacity:.85}
.ftr-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.ftr-link{color:#ffffff73;font-family:var(--onest);font-size:11px;font-weight:300;letter-spacing:.8px;line-height:1.4;text-transform:uppercase;white-space:nowrap;transition:color .25s ease-out}
.ftr-link:hover{color:#ffffffe6}
.ftr-text{color:#ffffff4d;font-family:var(--onest);font-size:11px;font-weight:300;letter-spacing:.8px;line-height:1.4;margin:0}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #ffffff0f;padding-top:14px}
.company{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.disclaimer{flex:1 1 auto;color:#ffffff40;font-family:var(--onest);font-size:11px;font-weight:300;letter-spacing:.8px;line-height:1.5;margin:0;text-align:center;min-width:0}
.status{display:flex;align-items:center;gap:8px;flex-shrink:0}
.status i{width:8px;height:8px;border-radius:50%;background:#ffd23f80;display:block}

/* ---------- section dots (scrollbar) ---------- */
.dots{position:fixed;right:30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px;list-style:none;margin:0;padding:0;z-index:5}
.dots li{width:20px;height:20px;border-radius:50%;background:#ffffff80;cursor:pointer;transition:background .3s}
.dots li.on{background:#fff;filter:drop-shadow(0 0 20px rgba(255,255,255,.5))}

/* ---------- переходы между экранами: появление при каждом входе + параллакс глубины ---------- */
.hero .person{opacity:0;translate:0 40px;transition:opacity .9s ease-out .1s,translate 1.2s cubic-bezier(.2,.7,.2,1) .1s}
.hero.is-in .person{opacity:1;translate:0 0}
.hero .logoblock{opacity:0;transition:opacity .8s ease-out .35s}
.hero.is-in .logoblock{opacity:1}
.factions .sl-title,.factions .sl-line,.factions .sl-desc,.factions .sl-btn{opacity:0;translate:0 26px;transition:opacity .7s ease-out,translate .9s cubic-bezier(.2,.7,.2,1)}
.factions .sl-line{transition-delay:.12s}.factions .sl-desc{transition-delay:.22s}.factions .sl-btn{transition-delay:.34s}
.factions.is-in .sl-title,.factions.is-in .sl-line,.factions.is-in .sl-desc,.factions.is-in .sl-btn{opacity:1;translate:0 0}
.factions .sl-bg.is-active .sl-img{opacity:0;translate:60px 0;transition:opacity .8s ease-out .15s,translate 1.1s cubic-bezier(.2,.7,.2,1) .15s,height .5s ease-out,filter .6s ease-out,right .5s ease-out}
.factions.is-in .sl-bg.is-active .sl-img{opacity:1;translate:0 0}
.factions .sl-arrow{opacity:0;transition:opacity .6s ease-out .5s}
.factions.is-in .sl-arrow{opacity:.4}
.factions.is-in .sl-arrow:hover{opacity:1}
[data-px]{will-change:translate}
@media (prefers-reduced-motion:reduce){ .hero .person,.hero .logoblock,.factions .sl-title,.factions .sl-line,.factions .sl-desc,.factions .sl-btn,.factions .sl-bg.is-active .sl-img,.factions .sl-arrow{opacity:1;translate:0 0} .ht-head,.ht-slot,.ht-person,.signpost,.plate-g{opacity:1!important;translate:0 0!important;transform:none!important} }

/* ---------- под разные экраны ---------- */
/* 2K/4K: макет сверстан под 1920×1080, и кэпы min() держат кегли, кнопки и линии на месте —
   на 4K заголовок фракции остаётся 50 px в углу пустого кадра. Поднимаем потолки: ×1.3 на 1440p, ×1.85 на 2160p.
   Порог берём и по ширине, и по высоте — иначе под правило попал бы планшет вроде 1024×1366.
   (zoom тут не годится: Chrome не делит на него vh/svh, и секция становится выше экрана.) */
@media (min-width:2000px) and (min-height:1150px){
  .hdr-ul{margin:44px 145px 0}
  .hdr-left{gap:52px}
  .logo img{height:44px}
  .navbtn{font-size:18px;gap:20px}
  .navbtn svg{width:29px;height:29px}
  .btn{border-radius:19px}
  .btn-medium{height:104px;width:520px;font-size:31px}
  .shadow-t,.shadow-b{height:390px}
  .wordmark{width:min(38vw,728px)}
  .logoblock{width:min(1170px,52%);gap:26px;padding:34px 31px 29px}
  .logoblock .textbg{inset:-8px -18px;border-radius:62px}
  .h-title{font-size:min(30px,calc(21px + .36vw))}
  .h-desc{font-size:min(20px,calc(16px + .15625vw))}
  .timer{width:min(468px,52%);height:3px}
  .sl-title{font-size:min(65px,calc(39px + 1.04167vw));letter-spacing:5.2px}
  .sl-line{width:455px;height:5px}
  .sl-desc{font-size:min(34px,calc(21px + .52083vw));width:871px;margin-top:65px;letter-spacing:2.1px}
  .sl-shadow{width:1239px;height:1699px}
  .sl-arrow{min-width:21px;min-height:39px}
  .ht-title{font-size:min(65px,calc(26px + 1.5625vw));letter-spacing:5.2px}
  .ht-line{height:4px;margin-top:20px}
  .card{border-radius:19px;padding:39px 52px}
  .step{font-size:min(26px,calc(10px + .625vw))}
  .ctitle{font-size:min(39px,calc(21px + .72917vw));margin-top:7px}
  .cdesc{font-size:min(29px,calc(18px + .41667vw));margin-top:13px}
  .cbtns{left:52px;bottom:39px;gap:13px}
  .cbtn{font-size:min(26px,calc(16px + .41667vw));padding:min(23px,calc(10px + .52083vw)) min(31px,calc(16px + .52083vw));border-radius:min(13px,calc(8px + .20833vw))}
  .ftr::before{height:156px}
  .ftr-main{padding:26px 7.55% 31px;gap:21px}
  .ftr-link,.ftr-text,.disclaimer{font-size:14px;letter-spacing:1px}
  .soc{width:52px;height:52px;padding:10px;border-radius:8px}
  .soc svg{width:29px;height:29px}
  .dots{right:39px;gap:26px}
  .dots li{width:26px;height:26px}
}
@media (min-width:3000px) and (min-height:1700px){
  .hdr-ul{margin:63px 145px 0}
  .hdr-left{gap:74px}
  .logo img{height:63px}
  .navbtn{font-size:26px;gap:28px}
  .navbtn svg{width:41px;height:41px}
  .btn{border-radius:28px}
  .btn-medium{height:148px;width:740px;font-size:44px}
  .shadow-t,.shadow-b{height:555px}
  .wordmark{width:min(38vw,1036px)}
  .logoblock{width:min(1665px,52%);gap:37px;padding:48px 44px 41px}
  .logoblock .textbg{inset:-11px -26px;border-radius:89px}
  .h-title{font-size:min(43px,calc(30px + .36vw))}
  .h-desc{font-size:min(28px,calc(22px + .15625vw))}
  .timer{width:min(666px,52%);height:4px}
  .sl-title{font-size:min(92px,calc(55px + 1.04167vw));letter-spacing:7.4px}
  .sl-line{width:648px;height:7px}
  .sl-desc{font-size:min(48px,calc(30px + .52083vw));width:1240px;margin-top:93px;letter-spacing:3px}
  .sl-shadow{width:1763px;height:2418px}
  .sl-arrow{min-width:30px;min-height:56px}
  .ht-title{font-size:min(92px,calc(37px + 1.5625vw));letter-spacing:7.4px}
  .ht-line{height:6px;margin-top:28px}
  .card{border-radius:28px;padding:56px 74px}
  .step{font-size:min(37px,calc(15px + .625vw))}
  .ctitle{font-size:min(55px,calc(30px + .72917vw));margin-top:9px}
  .cdesc{font-size:min(41px,calc(26px + .41667vw));margin-top:19px}
  .cbtns{left:74px;bottom:56px;gap:19px}
  .cbtn{font-size:min(37px,calc(22px + .41667vw));padding:min(33px,calc(15px + .52083vw)) min(44px,calc(22px + .52083vw));border-radius:min(19px,calc(11px + .20833vw))}
  .ftr::before{height:222px}
  .ftr-main{padding:37px 7.55% 44px;gap:30px}
  .ftr-link,.ftr-text,.disclaimer{font-size:20px;letter-spacing:1.5px}
  .soc{width:74px;height:74px;padding:15px;border-radius:11px}
  .soc svg{width:41px;height:41px}
  .dots{right:55px;gap:37px}
  .dots li{width:37px;height:37px}
}

/* ноутбучные высоты: наклонённые карточки шага перестают помещаться в исходные проценты */
@media (max-width:1920px){ .ht-slot.left,.ht-slot.right{height:32%} .ht-slot.center{height:41%} }
@media (max-width:1440px){ .ht-slot.left,.ht-slot.right{height:280px} .ht-slot.center{height:360px} }

/* --- узкие экраны: шапка компактнее, указатель и второй персонаж уходят, шаги — ровный ряд --- */
@media (max-width:1279px){
  .hdr-ul{margin:26px 5.5% 0}
  .hdr-left{gap:26px}
  .logoblock{width:min(820px,74%)}
  .sl-art{padding-left:8vw}
  .sl-btn{left:8vw}
  .sl-desc{width:auto;max-width:52vw;font-size:calc(14px + .55vw);margin-top:34px}
  .sl-title{font-size:calc(26px + 1.25vw)}
  .sl-img{right:5%;height:82%}
  .sl-bg.is-active .sl-img{height:88%;right:4.5%}
  .ht-title{font-size:calc(16px + 1.75vw);margin:5.4% auto 0}
  .ht-cards{position:absolute;left:5%;right:5%;top:26%;bottom:9%;display:flex;align-items:stretch;gap:2.2%}
  .ht-slot{position:relative;left:auto!important;right:auto!important;top:auto!important;flex:1 1 0;width:auto;height:auto!important;min-height:0;rotate:0deg!important}
  .card{padding:22px 24px 78px}
  .ctitle{font-size:22px}
  .cdesc{font-size:15px}
  .step{font-size:13px}
  .cbtns{left:24px;bottom:22px;gap:8px}
  .cbtn{font-size:15px;padding:11px 15px}
  .ht-person,.signpost{display:none}
  .ftr-main{padding:20px 5%}
  .ftr-top{flex-wrap:wrap;gap:20px}
  .ftr-col{min-width:120px}
}

/* --- ПОРТРЕТ (планшет стоймя и любой телефон) --- ширины на «текст слева, рендер справа» не хватает,
   поэтому кадр становится вертикальным: текст сверху, персонаж снизу, кнопка поверх него.
   Считаем по ориентации, а не по ширине: iPad стоймя — это 1024 px, и по ширине он попал бы в раскладку ноутбука. */
@media (max-width:1279px) and (max-aspect-ratio:1/1){
  .sl-art{justify-content:flex-start;padding:13svh 7vw 0}
  .sl-desc{max-width:none;width:auto;margin-top:26px}
  .sl-btn{left:7vw;right:7vw;bottom:10.5svh;display:flex;justify-content:center}
  .sl-btn .btn{width:100%;max-width:460px;height:64px;font-size:20px}
  .sl-img{left:50%;right:auto;margin-left:-34vw;width:68vw;height:50%;bottom:0;
    object-fit:contain;object-position:center bottom;filter:none}
  .sl-bg.is-active .sl-img{height:54%;right:auto}
  .factions .sl-bg.is-active .sl-img{translate:0 46px}
  .factions.is-in .sl-bg.is-active .sl-img{translate:0 0}
  .sl-shadow{right:auto;left:50%;margin-left:-40vw;width:80vw;height:70svh;bottom:-24%}
  .beacon i{top:16%;width:96%;height:56%;filter:blur(40px)}
  .beacon .r{right:auto;left:-34%}
  .beacon .b{right:-34%}
  .ht-title{margin:10svh auto 0}
  .ht-cards{left:50%;right:auto;transform:translateX(-50%);width:90%;max-width:640px;top:19.5svh;bottom:5svh;
    flex-direction:column;justify-content:center;gap:3.2svh}
  .ht-slot{flex:0 0 auto}
  .card{display:flex;flex-direction:column;padding:18px 22px;border-radius:13px}
  .cbtns{position:static;margin-top:auto;padding-top:12px;left:auto;bottom:auto}
  .ctitle{font-size:20px;margin-top:3px}
  .cdesc{font-size:15px;margin-top:8px;line-height:1.4}
  .step{font-size:12px}
  .cbtn{font-size:14px;padding:10px 15px;border-radius:9px}
}

/* --- места на строку ссылок больше нет: шапка сворачивается в меню --- */
@media (max-width:1100px){
  .hdr-left .navbtn{display:none}
  .burger{display:flex}
  .dots{display:none}
  .sl-dots{display:flex}
}
/* пальцем в стрелку 16 px не попасть — на тач-экранах листаем свайпом */
@media (hover:none){ .sl-arrow{display:none} .sl-dots{display:flex} }

/* --- планшет и телефон: кегли мельче, футер в две колонки --- */
@media (max-width:899px){
  .hdr-ul{margin:20px 5% 0}
  .logo img{height:30px}
  .sl-title{font-size:calc(25px + 2.2vw);letter-spacing:2px}
  .sl-line{width:min(350px,46vw);height:3px;margin-top:14px}
  .sl-desc{font-size:calc(13.5px + .7vw);letter-spacing:.6px}
  .ht-title{font-size:calc(18px + 2.2vw)}
  .ht-line{width:44%;margin-top:13px}
  /* футер ниже экрана телефона: полноэкранным он давал бы полкадра пустоты — пусть прилипает нижним краем */
  .ftr{scroll-snap-align:end}
  .ftr-main{padding:24px 6% 26px;gap:20px}
  .ftr-top{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
  .socials{grid-column:1/-1}
  .ftr-col{min-width:0}
  .ftr-link,.ftr-text{white-space:normal;font-size:12px;line-height:1.5}
}

/* --- планшет и телефон: появление вдвое короче --- */
@media (max-width:899px){
  .hero .person{transition:opacity .42s ease-out,translate .5s cubic-bezier(.2,.7,.2,1)}
  .hero .logoblock{transition:opacity .38s ease-out .1s}
  .factions .sl-title,.factions .sl-line,.factions .sl-desc,.factions .sl-btn{transition:opacity .32s ease-out,translate .4s cubic-bezier(.2,.7,.2,1)}
  .factions .sl-line{transition-delay:.05s}
  .factions .sl-desc{transition-delay:.1s}
  .factions .sl-btn{transition-delay:.16s}
  .factions .sl-bg.is-active .sl-img{transition:opacity .38s ease-out .05s,translate .46s cubic-bezier(.2,.7,.2,1) .05s,height .4s ease-out,filter .4s ease-out,right .4s ease-out}
  .ht-head{transition:opacity .32s ease-out,transform .4s cubic-bezier(.2,.7,.2,1)}
  .ht-slot{transition:opacity .32s ease-out,translate .42s cubic-bezier(.2,.7,.2,1)}
  .ht-slot.left{transition-delay:.04s}
  .ht-slot.center{transition-delay:.1s}
  .ht-slot.right{transition-delay:.16s}
}

/* --- телефон --- */
@media (max-width:599px){
  .hdr-ul{margin:16px 5% 0}
  .logo{opacity:.85}
  .logo img{height:28px}
  .logoblock{width:92%;top:auto;bottom:8svh;transform:translateX(-50%);gap:14px;padding:20px 16px 16px}
  .wordmark{width:72vw}
  .h-title{font-size:calc(16px + 1.1vw);line-height:1.3}
  .h-desc{font-size:calc(11.6px + .5vw)}
  .timer{width:62%}
  .person{width:112%;height:78%}
  .btn-medium{width:min(300px,80vw);height:62px;font-size:19px;border-radius:13px}
  .sl-art{padding:12svh 7vw 0}
  .sl-title{font-size:calc(23px + 3.4vw)}
  .sl-desc{font-size:calc(13px + 1.1vw);line-height:1.42;margin-top:20px}
  .sl-img{width:82vw;margin-left:-41vw;height:46%}
  .sl-bg.is-active .sl-img{height:50%}
  .sl-btn{bottom:11svh}
  .sl-btn .btn{height:60px;font-size:18px}
  .ht-title{font-size:calc(17px + 3vw);letter-spacing:2px;margin:10svh auto 0;padding:0 5%}
  .ht-line{width:50%;height:2px;margin-top:11px}
  .ht-cards{width:92%;max-width:none;top:19svh;bottom:4svh;gap:1.8svh;justify-content:space-between}
  .card{padding:14px 16px;border-radius:12px}
  .ctitle{font-size:17px}
  .cdesc{font-size:13px;margin-top:6px}
  .step{font-size:11px;letter-spacing:.1em}
  .cbtn{font-size:13px;padding:9px 13px}
  .ftr-main{padding:22px 6% 24px}
  .ftr-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .disclaimer{text-align:left}
  .soc{width:44px;height:44px}
}

/* --- телефон боком: высоты нет совсем, всё сжимается и лишнее убирается --- */
@media (max-height:520px) and (orientation:landscape){
  .hdr-ul{margin:12px 4% 0}
  .logoblock{top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(720px,62%);gap:8px;padding:10px 14px}
  .wordmark{width:min(34vw,340px)}
  .h-desc,.timer{display:none}
  .h-title{font-size:15px;letter-spacing:.04em}
  .person{height:99%;width:64%}
  .btn-medium{height:46px;width:210px;font-size:16px;border-radius:11px}
  .mnav{justify-content:flex-start;padding:86px 12vw 20px;overflow-y:auto}
  .mnav a:not(.btn){padding:13px 2px;font-size:16px}
  .mnav .mnav-play{height:48px;margin-top:16px;font-size:17px}
  .sl-art{padding:12svh 6vw 0}
  .sl-title{font-size:24px;letter-spacing:2px}
  .sl-line{width:180px;height:3px;margin-top:9px}
  .sl-desc{font-size:13px;margin-top:14px;max-width:56vw;letter-spacing:.4px}
  .sl-img{left:auto;right:3vw;margin-left:0;width:34vw;height:88%;object-position:right bottom}
  .sl-bg.is-active .sl-img{height:92%;right:2.5vw}
  .sl-shadow{left:auto;right:6%;margin-left:0;width:60vw;height:120svh}
  .sl-btn{left:6vw;right:auto;bottom:9svh}
  .sl-btn .btn{width:210px;height:46px;font-size:16px}
  .sl-dots{bottom:2.6svh}
  .ht-title{font-size:22px;margin:12svh auto 0;letter-spacing:2px}
  .ht-line{width:26%;margin-top:8px}
  .ht-cards{flex-direction:row;top:32svh;bottom:6svh;gap:2%;left:4%;right:4%;width:auto;max-width:none;transform:none}
  .ht-slot{flex:1 1 0}
  .card{padding:12px 14px}
  .ctitle{font-size:15px}
  .cdesc{font-size:12px;margin-top:5px;line-height:1.3}
  .step{font-size:10px}
  .cbtn{font-size:12px;padding:8px 11px}
  .ftr{min-height:0;display:block}
  .ftr-top{grid-template-columns:repeat(3,1fr)}
  .socials{grid-column:auto}
}

@media (max-height:1079px) and (min-width:900px){ .ftr{scroll-snap-align:start} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} .js .wm.armed .wordmark{opacity:1} }