/* BLACKMARKET · дизайн 2026-10. Один файл на главную, каталог, игру и чит.
   Скрытые до анимации состояния (.rv, бледные подложки стаи) включаются
   только при html.js — без скрипта страница видна целиком. */

@layer reset, tokens, components;
@layer reset{
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  img,video{max-width:100%}
  button,input,select,textarea{font:inherit;color:inherit}
}

:root{
  --bg:#060607;--ink:#f3f1ec;--ink-2:#8e8c87;--ink-3:#3a3936;--line:rgba(243,241,236,.1);--panel:#0e0e10;
  --disp:"Fira Sans Extra Condensed","Noto Sans SC",Impact,sans-serif;
  --sans:"Inter Tight","Noto Sans SC",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --max:1640px;--gut:clamp(16px,3vw,48px);
  color-scheme:dark;
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
.in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.lbl{font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.h-disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:-.005em;text-wrap:balance}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 26px;border-radius:999px;cursor:pointer;
  font:600 14px var(--sans);color:var(--ink);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  transition:background .3s,color .3s,transform .3s}
.pill:hover{background:var(--ink);color:#000;transform:translateY(-2px)}
.pill--solid{background:var(--ink);color:#000;border-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sec{position:relative;z-index:4}

/* картинка в строке заголовка */
.inl{display:inline-block;vertical-align:middle;height:.78em;aspect-ratio:1.7;margin:0 .06em .12em;position:relative;
  background:#111;border-radius:.16em;clip-path:inset(0 round .16em);isolation:isolate}
.inl::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none}
.inl video,.inl img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;clip-path:inset(0 round .16em)}

/* ═════ шапка ═════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;padding:20px 0;transition:background .4s,backdrop-filter .4s}
.nav.is-solid{background:rgba(6,6,7,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav__in{display:flex;align-items:center;gap:40px}
.nav__mark img{height:44px;width:auto;display:block}
.nav__links{display:flex;gap:30px;list-style:none;font:500 15px var(--sans);color:var(--ink-2)}
.nav__links a:hover,.nav__links .on{color:var(--ink)}
.nav__sp{flex:1}
.menu{position:relative}
.menu > summary{list-style:none;cursor:pointer}
.menu > summary::-webkit-details-marker{display:none}
.menu__drop{position:absolute;left:-14px;top:calc(100% + 14px);min-width:220px;padding:8px;border-radius:18px;list-style:none;
  background:rgba(14,14,16,.97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.6)}
.menu__drop a{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;border-radius:10px;font:500 14px var(--sans);color:var(--ink-2)}
.menu__drop a:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.menu__drop i{font:500 11px var(--mono);font-style:normal;color:var(--ink-3)}
.lang{position:relative}
.lang > summary{list-style:none}
.lang > summary::-webkit-details-marker{display:none}
.lang__btn{font-family:var(--mono);letter-spacing:.14em}
.lang__btn i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.lang[open] .lang__btn i{transform:translateY(2px) rotate(-135deg)}
.lang__menu{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;padding:8px;border-radius:18px;
  background:rgba(14,14,16,.97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.6)}
.lang__menu button{display:block;width:100%;text-align:left;padding:10px 14px;border:0;border-radius:10px;background:none;cursor:pointer;font:500 14px var(--sans);color:var(--ink-2)}
.lang__menu button:hover{background:rgba(255,255,255,.07);color:var(--ink)}
.lang__menu button.is-on{color:var(--ink)}

/* ═════ футер ═════ */
.ft{padding:100px 0 0;border-top:1px solid var(--line);overflow:hidden;position:relative;z-index:4}
.ft__g{display:grid;grid-template-columns:1fr auto auto auto;gap:80px;margin-bottom:60px}
.ft__logo{height:220px;width:auto;display:block}
.ft h4{font:500 13px var(--sans);color:var(--ink-2);margin-bottom:18px}
.ft li{list-style:none;font:500 15px/2.1 var(--sans)}
.ft li a:hover{color:#fff}
.pays{display:flex;align-items:center;gap:30px;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:60px;flex-wrap:wrap}
.pays ul{display:flex;flex-wrap:wrap;gap:12px;list-style:none}
.pays li{display:flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:12px;background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#cfcdc7;transition:color .3s,box-shadow .3s}
.pays li:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.pays svg{height:22px;width:auto;display:block}
.pays b{font:600 15px var(--sans);letter-spacing:-.01em}
.giant{display:flex;justify-content:center;font-family:var(--disp);font-size:17.2vw;line-height:1;white-space:nowrap;padding-bottom:3vw}
.giant .o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.35)}

/* ═════ вопросы ═════ */
.faq{padding:140px 0 160px;border-top:1px solid var(--line)}
.faq__g{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.faq__hd{position:sticky;top:120px}
.faq__hd h2{font-size:clamp(52px,6.4vw,120px)}
.faq__hd p{margin:24px 0 30px;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:380px}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q > summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;cursor:pointer;
  font:600 clamp(18px,1.4vw,22px)/1.3 var(--sans);color:var(--ink)}
.q > summary::-webkit-details-marker{display:none}
.q__i{position:relative;flex:0 0 22px;height:22px}
.q__i::before,.q__i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.q__i::after{transform:rotate(90deg)}
.q[open] .q__i::after{transform:rotate(0)}
.q__a{padding:0 60px 30px 0;color:var(--ink-2);font-size:16px;line-height:1.7;max-width:720px}
.q__a p + p{margin-top:10px}
.q__a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ═════ появление ═════ */
.js .rv{opacity:0;transform:translateY(46px)}

/* ═════════════ ГЛАВНАЯ ═════════════ */
.hero{position:relative;height:100vh;min-height:760px;overflow:hidden}
.hero__grid{position:absolute;inset:0;opacity:.07;
  background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);
  background-size:84px 84px;-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent)}
.rays{position:absolute;left:50%;bottom:-30%;width:180vw;height:120vh;transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 100%,transparent 0deg,transparent 150deg,rgba(255,255,255,.07) 162deg,transparent 166deg,
    rgba(255,255,255,.1) 172deg,transparent 176deg,rgba(255,255,255,.14) 180deg,transparent 184deg,rgba(255,255,255,.09) 189deg,
    transparent 194deg,rgba(255,255,255,.06) 199deg,transparent 210deg);
  filter:blur(6px);animation:sway 9s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes sway{to{transform:translateX(-50%) rotate(3deg)}}
.glow{position:absolute;left:50%;bottom:-38vh;width:110vh;height:70vh;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,.1) 45%,transparent 75%);filter:blur(20px);
  animation:breathe 4.5s ease-in-out infinite alternate}
@keyframes breathe{to{opacity:.7;transform:translateX(-50%) scale(1.06)}}
.hero__stage{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__logo{position:absolute;left:50%;top:15vh;height:56vh;max-width:84vw;width:auto;transform:translateX(-50%);transition:opacity 1.1s ease}
.hero__word{position:absolute;left:0;right:0;top:calc(46vh - clamp(44px,6.2vw,120px));display:flex;justify-content:center}
.hero__word span{font-family:var(--disp);font-weight:900;font-size:clamp(84px,15.4vw,300px);line-height:.8;color:#fff;white-space:nowrap;display:block;transition:opacity 1.1s ease}
.hero__word{display:none}
.js .hero__word{display:flex}
.js .hero__logo,.js .hero__word span{opacity:0}
.js .hero__logo.is-solid,.js .hero__word.is-solid span{opacity:.13}
.hero__lead{position:absolute;left:var(--gut);bottom:96px;z-index:4;max-width:460px;font-size:16px;line-height:1.6;color:#b9b7b1}
.hero__lead h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(34px,3vw,52px);line-height:.98;color:var(--ink);margin-bottom:14px}
.hero__lead b{color:var(--ink);font-weight:600}
.hero__cta{position:absolute;right:var(--gut);bottom:100px;z-index:4;display:flex;gap:12px}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:3;background:linear-gradient(transparent,var(--bg))}
#flock,.flock{position:fixed;inset:0;width:100vw;height:100vh;z-index:2;pointer-events:none}

/* что продаём */
.kinds{padding:150px 0}
.kinds__hd{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:50px}
.kinds__hd h2{font-size:clamp(56px,8vw,150px)}
.k{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:30px;padding:26px 0;border-top:1px solid var(--line);position:relative}
.k:last-child{border-bottom:1px solid var(--line)}
.k__n{font:500 12px var(--mono);letter-spacing:.2em;color:var(--ink-3)}
.k__name{font-family:var(--disp);font-size:clamp(40px,5.6vw,100px);line-height:.92;text-transform:uppercase;transition:transform .5s cubic-bezier(.2,.8,.2,1),color .3s}
.k__name small{display:block;font:400 12px/1.6 var(--mono);letter-spacing:.2em;color:var(--ink-2);margin-top:12px}
.k__go{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);opacity:0;transform:translateX(-12px);transition:.4s}
.kinds__list:hover .k:not(:hover) .k__name{color:var(--ink-3)}
.k:hover .k__name{transform:translateX(24px)}
.k:hover .k__go{opacity:1;transform:none;color:var(--ink)}

/* рынок, который не спит */
.about{padding:150px 0 120px}
.about__g{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.about h2{font-size:clamp(56px,7.4vw,136px)}
.about p{margin-top:28px;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:560px}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:36px 40px;margin-top:56px}
.nums div{border-bottom:1px solid var(--line);padding-bottom:20px}
.nums b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(56px,5.2vw,96px);line-height:.9;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,#77756f);-webkit-background-clip:text;background-clip:text;color:transparent}
.nums span{display:block;margin-top:12px;font-size:15px;color:var(--ink-2)}
.about__raven{position:relative;height:min(88vh,840px)}
.about__raven video,.about__raven img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 0 60px rgba(0,0,0,.9))}
.about__raven .bmc{position:absolute;left:50%;top:10%;transform:translateX(-50%);z-index:1;font-family:var(--disp);font-size:clamp(140px,17vw,330px);line-height:.8;
  color:rgba(255,255,255,.05);-webkit-text-stroke:1px rgba(255,255,255,.16);white-space:nowrap;pointer-events:none;letter-spacing:0em}
.about__raven .halo{position:absolute;left:50%;bottom:-12%;width:120%;height:60%;transform:translateX(-50%);z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.32),rgba(255,255,255,.06) 50%,transparent 75%);filter:blur(18px);animation:breathe 4.5s ease-in-out infinite alternate}

/* досмотр */
.xray{padding:60px 0 0}
.xray__hd{text-align:center;margin-bottom:10px}
.xray__hd h2{font-size:clamp(52px,7vw,130px)}
.xray__hd p{margin:16px auto 0;color:var(--ink-2);font-size:17px;line-height:1.6;max-width:640px}
.stage{position:relative;height:640px;overflow:hidden}
.stage__bg{position:absolute;inset:0;background:center 45%/cover no-repeat;filter:brightness(.3) contrast(1.1)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--bg),transparent 22%,transparent 78%,var(--bg)),radial-gradient(70% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.7))}
.belt{position:absolute;left:0;right:0;top:420px;height:26px;z-index:2;
  background:repeating-linear-gradient(90deg,#141414 0 18px,#0b0b0b 18px 22px);box-shadow:0 -1px 0 #333,0 14px 30px rgba(0,0,0,.8);animation:belt .6s linear infinite}
@keyframes belt{to{background-position:22px 0}}
.track{position:absolute;left:0;right:0;top:192px;height:260px;z-index:3;perspective:1300px}
.track .slot{position:absolute;left:0;top:0;width:200px;display:flex;justify-content:center;will-change:transform}
.track .gbox{--box-w:150px;--box-h:214px;--box-d:52px}
.track--x{z-index:6}
.track--x .gbox .gb-hero,.track--x .gbox .gb-art,.track--x .gbox .gb-bg{filter:grayscale(1) invert(1) contrast(1.6) brightness(1.15)}
.track--x .gbox .f{background:#bcd0d6}
.track--x .gbox .shade,.track--x .gbox .gb-name,.track--x .gbox .gb-meta,.track--x .gbox .gb-live{opacity:0}
.xr{display:none;position:absolute;inset:0;z-index:5;flex-direction:column;justify-content:center;align-items:center;gap:7px;background:rgba(4,12,16,.55)}
.track--x .xr{display:flex}
.xr i{font:700 11px var(--mono);letter-spacing:.16em;color:#e9fbff;padding:3px 8px;border:1px solid rgba(233,251,255,.6);box-shadow:0 0 12px rgba(180,240,255,.5);font-style:normal}
.xr b{font:700 34px var(--mono);color:#fff;text-shadow:0 0 18px rgba(200,245,255,.9)}
.gate{position:absolute;left:50%;top:150px;width:300px;height:330px;transform:translateX(-50%);z-index:7;pointer-events:none}
.gate__frame{position:absolute;inset:0;border:10px solid #1b1b1b;box-shadow:inset 0 0 0 1px #3a3a3a,0 0 0 1px #2a2a2a,0 30px 60px rgba(0,0,0,.7)}
.gate__frame::before{content:"";position:absolute;left:-10px;right:-10px;top:-34px;height:24px;background:repeating-linear-gradient(45deg,#e8e6e0 0 12px,#111 12px 24px)}
.gate__tag{position:absolute;left:50%;top:-31px;transform:translateX(-50%);z-index:2;font:700 10px var(--mono);letter-spacing:.24em;color:#000;background:#e8e6e0;padding:2px 8px;white-space:nowrap}
.gate__beam{position:absolute;left:0;right:0;height:3px;background:#e7fbff;box-shadow:0 0 18px 4px rgba(190,240,255,.7);animation:beam 2.2s ease-in-out infinite alternate}
@keyframes beam{from{top:6%}to{top:92%}}
.gate__glow{position:absolute;inset:0;background:radial-gradient(closest-side,rgba(170,230,245,.12),transparent)}
.readout{position:absolute;right:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));top:500px;z-index:8;width:540px;
  display:grid;grid-template-columns:repeat(5,auto);gap:4px 26px;padding:14px 20px;background:rgba(10,10,10,.85);border:1px solid #2c2c2c;
  font:400 12px/1.6 var(--mono);color:#c9c7c1}
.readout dt{color:var(--ink-2);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.readout dd{color:#fff}
.readout div{display:flex;flex-direction:column}
.stamp{position:absolute;right:calc(max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) + 568px);top:486px;z-index:8;width:112px;height:112px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:4px double #e8e6e0;color:#e8e6e0;font:400 17px/1.05 var(--disp);text-align:center;text-transform:uppercase;
  transform:rotate(-14deg) scale(0);opacity:0;mix-blend-mode:screen}
.stamp.warn{border-color:#9a9890;color:#9a9890}

/* как проходит покупка */
.steps{padding:140px 0 60px}
.steps__hd{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:60px}
.steps__hd h2{font-size:clamp(52px,7vw,130px)}
.steps__hd p{max-width:340px;text-align:right;color:var(--ink-2);font-size:17px}
.steps__g{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.steps__g li{position:relative;padding:40px 36px 10px 0;border-right:1px solid var(--line)}
.steps__g li + li{padding-left:36px}
.steps__g li:last-child{border-right:0}
.steps__n{display:block;font-family:var(--disp);font-size:clamp(90px,8vw,150px);line-height:.85;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.3);margin-bottom:26px}
.steps__g h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(28px,2.3vw,40px);line-height:1;margin-bottom:14px}
.steps__g p{color:var(--ink-2);font-size:16px;line-height:1.65;max-width:380px}

/* почему у нас */
.trust{padding:140px 0}
.trust__hd{text-align:center;margin-bottom:56px}
.trust__hd h2{font-size:clamp(56px,7.6vw,140px)}
.trust__hd p{margin:18px auto 0;max-width:560px;color:var(--ink-2);font-size:17px}
.tb{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{position:relative;border-radius:26px;overflow:hidden;padding:30px;min-height:460px;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 120%,#24242a 0%,#0e0e10 55%,#0a0a0b 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .4s}
.tile:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.tile__t{position:relative;z-index:3;font-family:var(--disp);font-size:clamp(28px,2.3vw,40px);line-height:.95;text-transform:uppercase}
.tile__s{position:relative;z-index:3;margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:300px}
.tile__obj{position:absolute;width:74%;right:13%;bottom:-8%;z-index:0;mix-blend-mode:screen;pointer-events:none;animation:bob 6s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
@keyframes bob{50%{translate:0 -12px}}
.tile__sheen{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 60%)}
.tile:hover .tile__sheen{opacity:1}

/* разработчики */
.devs{padding:100px 0;overflow:hidden;border-top:1px solid var(--line)}
.devs__hd{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px;gap:20px}
.devs__hd h2{font-size:clamp(46px,5.6vw,100px)}
.devs__row{display:flex;gap:18px;width:max-content;animation:drift 80s linear infinite}
.devs__row--r{animation-direction:reverse;margin-top:18px}
.devs:hover .devs__row{animation-play-state:paused}
.devchip{width:180px;height:96px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#0d0d0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.devchip img{width:auto;height:auto;max-width:120px;max-height:46px;object-fit:contain;opacity:.9;transition:opacity .3s;filter:invert(var(--logo-invert,0)) hue-rotate(calc(var(--logo-invert,0) * 180deg))}
.devchip:hover img{opacity:1}
@keyframes drift{to{transform:translateX(-50%)}}

/* ═════════════ КАТАЛОГ ═════════════ */
.cat-hero{position:relative;padding:150px 0 50px;overflow:hidden}
.wall{position:absolute;inset:-10% -5% auto;height:120%;z-index:0;display:flex;flex-direction:column;gap:26px;opacity:.28;transform:rotate(-6deg);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%);pointer-events:none}
.wall__row{display:flex;gap:26px;width:max-content;animation:drift 90s linear infinite}
.wall__row:nth-child(2){animation-direction:reverse;animation-duration:110s}
.wall__row:nth-child(3){animation-duration:130s}
.wall__row img{width:120px;height:170px;object-fit:cover;border-radius:6px;filter:grayscale(1) contrast(1.1)}
.cat-hero .in,.page-hero .in{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.cat-hero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(64px,11vw,200px);line-height:.86;text-wrap:balance}
.lead{margin-top:24px;max-width:600px;font-size:17px;line-height:1.65;color:#c3c1bb}
.stats{display:flex;flex-wrap:wrap;gap:30px 46px;margin-top:40px}
.stats b{display:block;font:400 clamp(42px,4vw,72px)/.9 var(--disp);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:8px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:50px}
.tabs a{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:600 15px var(--sans);color:#cfcdc7;transition:.25s}
.tabs a i{font:500 12px var(--mono);font-style:normal;color:var(--ink-2)}
.tabs a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.tabs a.on{background:var(--ink);color:#000}.tabs a.on i{color:#666}
.tools{position:sticky;top:84px;z-index:10;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0;margin-top:30px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(6,6,7,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.search{position:relative;flex:0 1 380px;min-width:260px}
.search input{width:100%;height:48px;padding:0 20px 0 48px;border-radius:999px;border:0;background:var(--panel);color:var(--ink);font:500 15px var(--sans);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.search input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
.search svg{position:absolute;left:18px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:var(--ink-2);stroke-width:2}
.letters{display:flex;gap:2px;flex-wrap:wrap}
.letters button{width:28px;height:30px;border:0;border-radius:8px;background:none;color:var(--ink-2);font:500 12px var(--mono);cursor:pointer}
.letters button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.letters button.on{background:var(--ink);color:#000}
.letters button:disabled{opacity:.25;cursor:default}
.tools__sp{flex:1}
.tools select{height:44px;padding:0 16px;border-radius:999px;background:var(--panel);color:var(--ink);border:1px solid rgba(255,255,255,.16);font:500 14px var(--sans)}
.found{white-space:nowrap}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px 10px;padding:40px 0 100px;perspective:1600px}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;padding:16px 0 26px}
.cell::after{content:"";position:absolute;bottom:56px;left:50%;width:70%;height:34px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,255,255,.14),transparent 70%);filter:blur(8px)}
.cell .gbox{--box-w:200px;--box-h:286px;--box-d:68px}
.cell:hover .gbox,.cell:focus-visible .gbox{transform:rotateX(2deg) rotateY(14deg) translateY(-12px)}
.cell__cap{margin-top:22px;display:flex;gap:12px;align-items:center;opacity:0;transform:translateY(-6px);transition:.35s}
.cell:hover .cell__cap,.cell:focus-visible .cell__cap{opacity:1;transform:none}
.cell__cap span{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.cell__cap b{font:600 13px var(--sans)}
.cell[hidden]{display:none}
.empty{padding:80px 0;text-align:center}
.empty b{display:block;font:400 40px/1 var(--disp);text-transform:uppercase;margin-bottom:12px}
.empty .pill{margin-top:18px}
.txt{padding:100px 0;border-top:1px solid var(--line)}
.txt__g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card-t{padding:36px 34px;border-radius:24px;color:var(--ink-2);font-size:16px;line-height:1.7;
  background:radial-gradient(120% 90% at 50% 120%,#1e1e22 0%,#0e0e10 55%,#0a0a0b 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .4s}
.card-t:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.card-t h2,.card-t h3{font:400 clamp(26px,2.2vw,36px)/1.02 var(--disp);text-transform:uppercase;margin-bottom:16px;color:var(--ink)}
.card-t p + p{margin-top:12px}
.card-t a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.card-t .lbl{display:block;margin-bottom:20px}

/* ═════════════ ИГРА ═════════════ */
.game-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.game-hero__media{position:absolute;inset:0;z-index:0}
.game-hero__media video,.game-hero__media img{width:100%;height:100%;object-fit:cover;object-position:70% 45%;filter:saturate(.9) contrast(1.05)}
.game-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.6) 38%,rgba(6,6,7,.05) 70%),linear-gradient(transparent 55%,var(--bg) 100%),linear-gradient(rgba(6,6,7,.6),transparent 20%)}
.game-hero .in{position:relative;z-index:2;width:100%;padding-bottom:70px;padding-top:140px}
.game-hero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(60px,9vw,170px);line-height:.88;max-width:1000px;text-wrap:balance}
.kicker{display:block;margin-bottom:14px;color:var(--ink)}
.updated{display:inline-flex;align-items:center;gap:8px;margin-top:18px}
.updated::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
.picks{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.picks a{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:999px;background:rgba(10,10,12,.6);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:600 14px var(--sans);transition:.25s}
.picks a:hover{background:var(--ink);color:#000}
.picks b{font:700 10px var(--mono);letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase}
.picks a:hover b{color:#555}
.picks span{font:500 13px var(--mono);color:var(--ink-2)}
.game-hero__row{margin-top:44px;display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.game-hero__row .stats{margin-top:0}
.game-hero__cta{display:flex;gap:12px;flex-wrap:wrap}

.shop{padding:110px 0 60px}
.shop__hd{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
.shop__hd h2{font-size:clamp(52px,6.4vw,120px)}
.shop .tools{margin-top:0;margin-bottom:40px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--ink-2);
  font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.25s;display:inline-flex;align-items:center;gap:8px}
.chip i{font-style:normal;color:var(--ink-3)}
.chip:hover{color:var(--ink);border-color:rgba(255,255,255,.4)}
.chip.on{background:var(--ink);color:#000;border-color:var(--ink)}
.chip.on i{color:#666}
.chips--feat{width:100%;padding-top:12px;margin-top:4px;border-top:1px dashed rgba(255,255,255,.08)}
.chips--feat .chip{height:32px;font-size:11px;padding:0 12px}
.empty-f{padding:60px 0;text-align:center;color:var(--ink-2)}
.empty-f button{margin-left:8px;background:none;border:0;color:var(--ink);text-decoration:underline;cursor:pointer}
.shelf--bm{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--gap)}
.shelf--bm .card.is-off{opacity:.5}

.know{padding:80px 0 40px}
.know__hd{margin-bottom:40px}.know__hd h2{font-size:clamp(42px,5vw,90px)}
.know__g{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.know__g > div{padding:32px 30px 32px 0;border-bottom:1px solid var(--line)}
.know__g > div:not(:nth-child(3n+1)){padding-left:30px;border-left:1px solid var(--line)}
.know__g h3{font:400 24px/1.05 var(--disp);text-transform:uppercase;margin-bottom:12px}
.know__g p{color:var(--ink-2);font-size:15px;line-height:1.65}

.cmp{padding:100px 0 60px}
.cmp__hd{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;gap:20px}
.cmp__hd h2{font-size:clamp(42px,5vw,90px)}
.cmp__wrap{overflow-x:auto;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
.cmp-t{width:100%;border-collapse:collapse;min-width:980px;font-size:14px}
.cmp-t th,.cmp-t td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp-t thead th{font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);background:#0b0b0d;white-space:nowrap}
.cmp-t thead button{all:unset;cursor:pointer}
.cmp-t thead button:hover{color:var(--ink)}
.cmp-t thead th[aria-sort=ascending] button::after{content:" ↑"}
.cmp-t thead th[aria-sort=descending] button::after{content:" ↓"}
.cmp-t tbody tr:hover{background:rgba(255,255,255,.03)}
.cmp-t tbody tr.is-off{opacity:.45}
.cmp-t tbody tr[hidden]{display:none}
.cmp-t .nm{display:flex;align-items:center;gap:12px;font:600 15px var(--sans);color:var(--ink)}
.cmp-t .nm img{width:30px;height:30px;object-fit:contain;filter:invert(var(--logo-invert,0)) hue-rotate(calc(var(--logo-invert,0) * 180deg))}
.cmp-t .nm i{font:700 9px var(--mono);letter-spacing:.12em;font-style:normal;padding:3px 6px;background:var(--ink);color:#000;white-space:nowrap}
.cmp-t .nm em{font:500 9px var(--mono);font-style:normal;padding:2px 5px;border:1px solid rgba(255,255,255,.4)}
.cmp-t .pr{font:600 15px var(--sans);white-space:nowrap}
.cst{display:inline-flex;align-items:center;gap:7px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cst::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}
.is-off .cst::before,.cst.off::before{background:transparent;border:1px solid #888;box-shadow:none}
.rl{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.bars i{width:3px;background:rgba(255,255,255,.22)}
.bars i:nth-child(1){height:5px}.bars i:nth-child(2){height:8px}.bars i:nth-child(3){height:12px}
.bars--1 i:nth-child(1),.bars--2 i:nth-child(-n+2),.bars--3 i{background:#fff}
.tg{display:flex;flex-wrap:wrap;gap:4px;list-style:none}
.tg li{font:500 9px var(--mono);letter-spacing:.08em;padding:3px 6px;border:1px solid rgba(255,255,255,.2);color:#cfcdc7}
.buy-s{display:inline-flex;height:36px;align-items:center;padding:0 16px;border-radius:999px;background:var(--ink);color:#000;font:600 13px var(--sans);white-space:nowrap}

.about-g{padding:120px 0}
.about-g__g{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.about-g h2{font-size:clamp(48px,5.6vw,100px)}
.prose{color:var(--ink-2);font-size:17px;line-height:1.75}
.prose p{margin-top:16px}
.prose h3{margin-top:40px;font:400 clamp(24px,2vw,34px)/1.05 var(--disp);text-transform:uppercase;color:var(--ink)}
.prose h3 + p{margin-top:14px}
.prose strong,.prose b{color:var(--ink)}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose ul{margin:14px 0 0 20px}
.about-g__img{position:sticky;top:120px;height:min(76vh,640px);border-radius:26px;overflow:hidden}
.about-g__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-g__img img.char{object-fit:contain;object-position:bottom;inset:auto 0 0 0;height:96%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.8))}
.about-g__img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(6,6,7,.7))}
.feat-g{padding:40px 0 120px}
.feat-g__hd{margin-bottom:50px}.feat-g__hd h2{font-size:clamp(48px,5.6vw,100px)}
.feat-g__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.more{padding:100px 0 60px;border-top:1px solid var(--line)}
.more__hd{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;gap:20px}
.more__hd h2{font-size:clamp(42px,4.6vw,84px)}
.more__row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;perspective:1400px}
.more__row .cell .gbox{--box-w:150px;--box-h:214px;--box-d:52px}
.more__row .cell::after{bottom:40px}
.all{padding:20px 0 120px}
.all__hd{margin-bottom:24px}.all__hd h2{font-size:clamp(36px,4vw,70px)}
.all__g{display:flex;flex-wrap:wrap;gap:8px}
.all__g a{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:500 14px var(--sans);color:#cfcdc7;transition:.2s}
.all__g a:hover{background:var(--ink);color:#000}
.all__g a i{font:500 11px var(--mono);font-style:normal;color:var(--ink-2)}

/* ═════════════ ЧИТ ═════════════ */
.page-hero{position:relative;padding:150px 0 60px;overflow:hidden}
.page-hero__bg{position:absolute;inset:0;z-index:0}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;filter:grayscale(.3) brightness(.45)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,rgba(6,6,7,.75) 45%,rgba(6,6,7,.3) 100%),linear-gradient(transparent 50%,var(--bg))}
.page-hero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(52px,7.4vw,140px);line-height:.9;max-width:1100px;text-wrap:balance}
.devcap{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.devcap img{width:54px;height:54px;object-fit:contain;padding:8px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  filter:invert(var(--logo-invert,0)) hue-rotate(calc(var(--logo-invert,0) * 180deg))}
.devcap b{display:block;font:600 15px var(--sans)}
.state{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none}
.state li{display:flex;align-items:center;gap:9px;height:40px;padding:0 16px;border-radius:999px;background:rgba(10,10,12,.6);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.state a{display:flex;align-items:center;gap:8px}
.ravens{--s:16px;display:inline-block;position:relative;width:calc(var(--s) * 5 + 8px);height:var(--s);flex:none}
.ravens::before,.ravens::after{content:"";position:absolute;inset:0;
  -webkit-mask:var(--raven-mark) left center/var(--s) var(--s) space;mask:var(--raven-mark) left center/var(--s) var(--s) space}
.ravens::before{background:rgba(255,255,255,.2)}
.ravens::after{background:#fff;clip-path:inset(0 calc(100% - var(--r) / 5 * 100%) 0 0)}
.ravens--lg{--s:30px}

.pd{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:60px;align-items:start;padding-top:20px;padding-bottom:100px}
.pd__body{display:flex;flex-direction:column;gap:90px;min-width:0}
.pd__buy{position:sticky;top:100px}
.h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(32px,3vw,52px);line-height:1;margin-bottom:26px}
.shot{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.shot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.shot__n{position:absolute;right:16px;bottom:14px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.6)}
.shot__nav{position:absolute;top:50%;z-index:2;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:22px;cursor:pointer;opacity:0;transition:.25s}
.shot:hover .shot__nav,.shot__nav:focus-visible{opacity:1}
.shot__nav--l{left:14px}.shot__nav--r{right:14px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px}
.thumbs button{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:0;padding:0;background:#000;cursor:pointer;opacity:.45;box-shadow:inset 0 0 0 1px var(--line);transition:.25s}
.thumbs button:hover{opacity:.8}
.thumbs button.on{opacity:1;box-shadow:0 0 0 2px var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.req div{padding:22px 24px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.req div.wide{grid-column:1/-1}
.req dt{margin-bottom:8px}
.req dd{font:500 16px/1.5 var(--sans)}
.needs{display:grid;gap:10px}
.needs a{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.needs a:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.needs img{width:56px;height:56px;object-fit:contain;border-radius:10px;background:#000}
.needs b{flex:1;font:600 15px var(--sans)}
.feat details{border-top:1px solid var(--line)}
.feat details:last-child{border-bottom:1px solid var(--line)}
.feat summary{list-style:none;display:flex;align-items:center;gap:16px;padding:24px 0;cursor:pointer}
.feat summary::-webkit-details-marker{display:none}
.feat summary b{font:400 30px/1 var(--disp);text-transform:uppercase}
.feat summary i{font:500 12px var(--mono);font-style:normal;color:var(--ink-2);padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.feat summary .q__i{margin-left:auto}
.feat details[open] .q__i::after{transform:rotate(0)}
.feat__body{padding:0 0 30px}
.feat__body h3{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin:20px 0 12px}
.feat__body ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px}
.feat__body li{padding:12px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.feat__body li b{display:block;font:600 15px var(--sans)}
.feat__body li span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.rv-sum{display:flex;align-items:center;gap:20px;padding:26px 28px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:16px}
.rv-sum b{font:400 64px/1 var(--disp)}
.rv-list{display:grid;gap:12px}
.rv-list article{padding:24px 28px;border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.rv-list header{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.rv-list header b{font:600 15px var(--sans)}
.rv-list header time{margin-left:auto}
.rv-list p{color:#c3c1bb;line-height:1.65}
.rv-empty{color:var(--ink-2);margin-bottom:16px}
.rv-form{margin-top:16px;padding:28px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:16px}
.rv-form h3{font:400 26px/1 var(--disp);text-transform:uppercase}
.rv-form label.f{display:grid;gap:8px}
.rv-form input[type=text],.rv-form input[type=number],.rv-form textarea{width:100%;padding:14px 16px;border-radius:14px;border:0;background:#0b0b0d;color:var(--ink);font:500 15px var(--sans);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.rv-form input:focus,.rv-form textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
.rv-form .short{max-width:220px}
.rv-err{color:#ff9b9b;font-size:13px;font-style:normal}
.pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;border:0}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label{display:block;width:34px;height:34px;cursor:pointer;background:rgba(255,255,255,.18);transition:background .2s;
  -webkit-mask:var(--raven-mark) center/contain no-repeat;mask:var(--raven-mark) center/contain no-repeat}
.pick label:hover,.pick label:hover ~ label,.pick input:checked ~ label{background:#fff}
.pick input:focus-visible + label{outline:2px solid var(--ink)}
.rv-hp{position:absolute;left:-9999px}
.rv-form button[type=submit]{justify-self:start;height:48px;padding:0 26px;border-radius:999px;border:0;background:var(--ink);color:#000;font:600 14px var(--sans);cursor:pointer}
.ok-box{padding:22px 24px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.buy{padding:28px;border-radius:26px;background:radial-gradient(120% 70% at 50% 0%,#1a1a1e 0%,#0d0d0f 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 80px rgba(0,0,0,.5)}
.buy h2{font:400 30px/1 var(--disp);text-transform:uppercase;margin-bottom:20px}
.per{display:grid;gap:10px}
.per label{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px;padding:18px 20px;border-radius:16px;cursor:pointer;
  background:#0b0b0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .25s,background .25s}
.per label:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.per input{position:absolute;opacity:0}
.per label:has(input:checked){background:#151518;box-shadow:inset 0 0 0 1.5px var(--ink)}
.per label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.per b{font:600 17px var(--sans)}
.per u{text-decoration:none;margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--ink);color:#000;font:700 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;vertical-align:middle}
.per i{font:600 18px var(--sans);font-style:normal;text-align:right}
.per em{grid-column:1/-1;font:500 11px var(--mono);font-style:normal;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
.total{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 18px;padding-top:20px;border-top:1px solid var(--line);gap:12px}
.total b{font:400 48px/1 var(--disp);white-space:nowrap}
.total em{display:block;margin-top:6px;font-style:normal}
.paybtn{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;border-radius:999px;background:var(--ink);color:#000;font:700 16px var(--sans);transition:transform .25s,box-shadow .25s}
.paybtn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,255,255,.15)}
.paybtn[hidden]{display:none}
.methods{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;list-style:none}
.methods li{height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;background:#0b0b0d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:700 11px var(--sans);color:#cfcdc7}
.perks{list-style:none;margin-top:20px;display:grid;gap:10px}
.perks li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:#c3c1bb}
.perks li::before{content:"✓";color:var(--ink)}
.warn{margin-top:20px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);font-size:12px;line-height:1.55;color:var(--ink-2)}
.warn b{color:var(--ink)}
.na{color:var(--ink-2);line-height:1.6}
.others{padding:100px 0;border-top:1px solid var(--line)}
.others__hd{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;gap:20px}
.others__hd h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(42px,5vw,90px);line-height:1.02}
.lb{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:40px;border:0;width:100%;height:100%;max-width:none;max-height:none}
.lb[open]{display:flex}
.lb::backdrop{background:rgba(0,0,0,.92)}
.lb img{max-width:100%;max-height:100%;border-radius:12px}

/* ═════ адаптив ═════ */
@media (max-width:1180px){.more__row{grid-template-columns:repeat(3,1fr)}.feat-g__g{grid-template-columns:1fr 1fr}.tb{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){
  .nav__links{display:none}
  .about__g,.ft__g,.about-g__g,.faq__g,.txt__g,.pd{grid-template-columns:1fr}
  .about__raven{height:560px}
  .hero__cta{left:var(--gut);right:auto;bottom:50px}.hero__lead{bottom:120px}
  .readout{left:var(--gut);right:var(--gut);width:auto;grid-template-columns:repeat(3,auto)}.stamp{display:none}
  .kinds__hd,.steps__hd{flex-direction:column;align-items:start}.steps__hd p{text-align:left}
  .steps__g{grid-template-columns:1fr}.steps__g li,.steps__g li + li{padding:32px 0;border-right:0;border-bottom:1px solid var(--line)}
  .faq__hd,.about-g__img{position:static}.q__a{padding-right:0}
  .know__g{grid-template-columns:1fr}.know__g > div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .pd__buy{position:static;order:-1}
  .tools{position:static}.letters{display:none}
  .ft__g{gap:40px}
}
@media (max-width:700px){
  .k{grid-template-columns:40px 1fr}.k__go{display:none}
  .tb,.feat-g__g{grid-template-columns:1fr}
  .req,.feat__body ul{grid-template-columns:1fr}
  .hero__stage .hero__logo{height:40vh;top:18vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}