:root{
  --hdr-h: 64px;
  --bg-1: #2f3a78;
  --bg-2: #253064;
  --deep: #0b1026;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.66);

  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(255,255,255,.08);

  --violet: #b45bff;
  --violet2: #7b4dff;

  --glow: 0 0 0 2px rgba(180,91,255,.34), 0 0 18px rgba(180,91,255,.26);
  --glow2: 0 0 0 1px rgba(180,91,255,.28), 0 0 14px rgba(180,91,255,.18);

  --r12: 12px;
  --r14: 14px;
  --r16: 16px;
  --r18: 18px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.92);
  background-image: url("/assets/img/bg.png");
  background-repeat: repeat;
  background-position: top center;
  background-size: auto;
}

a{ color: inherit; }
img{ display:block; max-width:100%; }
body.is-locked{ overflow: hidden; }

/* HEADER */
.hdr{ position: sticky; top: 0; z-index: 50; }

.hdr__bar{
  height: var(--hdr-h);
  background: linear-gradient(180deg, rgba(55,70,140,.96), rgba(40,52,112,.92));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.hdr__container{
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 14px;
}

.hdr__grid{
  height: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 10px;
}

.burger{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 5px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.burger:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  box-shadow: var(--glow2);
}
.burger:active{ transform: translateY(0px) scale(.99); }

.burger__line{
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.86);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(90,130,255,.18);
}

.hdr__nav{ display: flex; justify-content: center; }

.nav{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-item{ margin: 0; padding: 0; }

.nav-link{
  position: relative;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.70);
  border: 1px solid transparent;
  transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.nav-link::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 999px;
  background: radial-gradient(120px 60px at 50% 20%, rgba(255,255,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(180,91,255,.35), rgba(123,77,255,.18));
  opacity: 0;
  transition: opacity .16s ease;
  z-index: -1;
}

.nav-link:hover{
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
  border-color: rgba(180,91,255,.35);
  box-shadow: 0 0 0 1px rgba(180,91,255,.22), 0 0 14px rgba(180,91,255,.18);
  background: rgba(255,255,255,.03);
}
.nav-link:hover::before{ opacity: 1; }
.nav-link:active{ transform: translateY(0px) scale(.99); }

.hdr__logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.hdr__logo img{
  margin-right: 30px;
  height: 49px;
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

.hdr__actions{
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn{
  position: relative;
  overflow: hidden;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
  transform: rotate(18deg);
  opacity: 0;
  transition: opacity .18s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--glow2);
}

.btn:hover::after{
  opacity: 1;
  animation: btn-shine .85s ease;
}

.btn:active{ transform: translateY(0px) scale(.99); }

@keyframes btn-shine{
  from{ left:-60%; }
  to{ left:130%; }
}

.btn--primary{
  border-color: rgba(180,91,255,.55);
  background: radial-gradient(120px 60px at 50% 20%, rgba(255,255,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(180,91,255,.62), rgba(123,77,255,.44));
  box-shadow: var(--glow);
}

.btn--ghost{
  border-color: rgba(255,255,255,.18);
  background: rgba(10,14,38,.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}

/* OVERLAY + SIDE */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 70;
}

.side{
  position: fixed;
  top: 0;
  left: 0;
  height: 100svh;
  width: 360px;
  max-width: calc(100vw - 56px);
  z-index: 80;
  background: linear-gradient(180deg, rgba(55,70,140,.96), rgba(26,32,78,.92));
  border-right: 1px solid rgba(255,255,255,.10);
  transform: translateX(-105%);
  transition: transform .22s ease;
  overflow: hidden;
}
.side.is-open{ transform: translateX(0); }

.side__top{
  height: 72px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.side__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.side__close:hover{
  transform: translateY(-1px);
  box-shadow: var(--glow2);
  background: rgba(255,255,255,.07);
}
.side__close:active{ transform: translateY(0px) scale(.99); }

.xline{
  position: absolute;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.86);
  border-radius: 999px;
}
.xline:nth-child(1){ transform: rotate(45deg); }
.xline:nth-child(2){ transform: rotate(-45deg); }

.side__content{
  padding: 0 14px 14px 14px;
  overflow: auto;
  height: calc(100svh - 72px);
}

.sideSection{
  margin-bottom: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

.sideSection__toggle{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 12px 12px;
  cursor: pointer;
  color: rgba(255,255,255,.92);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background .16s ease;
}
.sideSection__toggle:hover{ background: rgba(255,255,255,.06); }

.sideSection__title{
  font-weight: 950;
  letter-spacing: .2px;
}

.sideSection__arrow{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.82);
  border-bottom: 2px solid rgba(255,255,255,.82);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .9;
}

.sideSection.is-open .sideSection__arrow{ transform: rotate(225deg); }

.sideSection__panel{ padding: 8px 10px 12px 10px; }

.nav--mobile{
  display: grid;
  gap: 8px;
}

.nav--mobile .nav-link{
  width: 100%;
  justify-content: flex-start;
  padding: 10px 12px;
  font-size: 13px;
  background: rgba(10,14,38,.10);
  border-color: rgba(255,255,255,.10);
}

.nav--mobile .nav-link:hover{
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(180,91,255,.22), 0 0 16px rgba(180,91,255,.18);
}

.sideBanner{
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sideBanner:hover{
  transform: translateY(-2px);
  border-color: rgba(180,91,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(180,91,255,.16);
}
.sideBanner:active{ transform: translateY(0px) scale(.995); }

.sideBanner__bg{
  width: 100%;
  height: 86px;
  object-fit: cover;
  opacity: .95;
}

.sideBanner__top{
  position: absolute;
  inset: 10px 10px auto 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sideBanner__brand{
  height: 20px;
  width: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

.sideBanner__shop{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,38,.18);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.sideBanner:hover .sideBanner__shop{
  transform: translateY(-1px);
  box-shadow: var(--glow2);
}

.sideBanner__cart{
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.sideBanner__balance{
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(10,14,38,.22);
  border: 1px solid rgba(255,255,255,.10);
}

.sideBanner__muted{ color: var(--muted); font-weight: 800; font-size: 12px; }
.sideBanner__count{ font-size: 16px; font-weight: 950; }

.sideWideBtn{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.sideWideBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(180,91,255,.22);
  box-shadow: var(--glow2);
}
.sideWideBtn:active{ transform: translateY(0px) scale(.99); }

.sideWideBtn__ico{ width: 20px; height: 20px; object-fit: contain; }

/* оставил как есть, чтобы не менять текущее поведение селектора */
.sideWideBtn__ico
.sideBtn__ico
.tile__ico
.botCard__send{
  filter: brightness(0) saturate(100%) invert(62%) sepia(65%) saturate(6916%) hue-rotate(164deg) brightness(101%) contrast(101%);
}

.sideWideBtn__text{
  font-weight: 950;
  font-size: 14px;
  color: rgba(255,255,255,.92);
}

.sideRow2{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sideBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.sideBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(180,91,255,.22);
  box-shadow: var(--glow2);
}
.sideBtn:active{ transform: translateY(0px) scale(.99); }

.sideBtn__ico{ width: 18px; height: 18px; object-fit: contain; }
.sideBtn__text{ font-weight: 950; font-size: 14px; }

.sideGrid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tile{
  padding: 12px 10px;
  border-radius: 16px;
  text-decoration: none;
  text-align: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.tile:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(180,91,255,.22);
  box-shadow: 0 16px 34px rgba(0,0,0,.25), 0 0 0 1px rgba(180,91,255,.14);
}
.tile:active{ transform: translateY(0px) scale(.99); }

.tile__ico{
  width: 26px;
  height: 26px;
  margin: 0 auto 8px auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(90,130,255,.14));
  transition: transform .16s ease;
}
.tile:hover .tile__ico{ transform: translateY(-1px) scale(1.03); }

.tile__text{
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  color: rgba(255,255,255,.88);
}

.botCard{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  text-decoration: none;
  background: linear-gradient(90deg, #211f54 0.59%, #2b225b 100%);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.botCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(180,91,255,.22);
  box-shadow: var(--glow2);
}
.botCard:active{ transform: translateY(0px) scale(.99); }

.botCard__img{ width: 96px; height: 52px; object-fit: contain; flex: 0 0 auto; border-radius: 16px; }
.botCard__info{ flex: 1 1 auto; }

.botCard__line{
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.90);
  line-height: 1.05;
}
.botCard__line--bold{ font-weight: 950; }

.botCard__send{
  width: 37px;
  height: 37px;
  object-fit: contain;
  opacity: .95;
  transition: transform .16s ease;
}
.botCard:hover .botCard__send{ transform: translateX(2px); }

/* RESPONSIVE (header + side menu toggle) */
@media (max-width: 980px){
  .hdr__grid{ grid-template-columns: 44px auto 1fr auto; }
  .hdr__nav{ display: none; }
  .hdr__logo{ justify-self: center; }
  .hdr__actions{ justify-content: flex-end; }

  .sideSection__toggle{ display: flex; }
}

@media (max-width: 520px){
  .btn{ padding: 9px 12px; font-size: 13px; }
  .hdr__actions{ gap: 8px; }
  .hdr__logo img{ height: 34px; }
}

/* LANG SWITCH */
.langSwitch{
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}

.langSwitch__link{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .25px;
  color: rgba(255,255,255,.78);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.langSwitch__link:hover{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(180,91,255,.18), 0 0 14px rgba(180,91,255,.16);
}

.langSwitch__link:active{ transform: translateY(0) scale(.99); }

.langSwitch__link.is-active{
  color: rgba(255,255,255,.96);
  background: radial-gradient(120px 60px at 50% 20%, rgba(255,255,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(180,91,255,.62), rgba(123,77,255,.44));
  box-shadow: 0 0 0 2px rgba(180,91,255,.28), 0 0 18px rgba(180,91,255,.20);
}

/* PROMO SLIDER */
.promoSlider{ padding: 14px 0 10px; }

.promoSlider__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
}

.promoSlider__frame{
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  overflow: hidden;
  --perView: 2;
  --gap: 18px;
}

.promoSlider__viewport{
  overflow: hidden;
  padding: 14px;
}

.promoSlider__track{
  display: flex;
  gap: var(--gap);
  will-change: transform;
  transition: transform .28s ease;
}

.promoSlide{
  flex: 0 0 calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.08);
  transform: translateZ(0);
  box-shadow: 0 14px 28px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.promoSlide:hover{
  transform: translateY(-2px);
  border-color: rgba(180,91,255,.22);
  box-shadow: 0 18px 38px rgba(0,0,0,.32), 0 0 0 1px rgba(180,91,255,.14);
}

.promoSlide:active{ transform: translateY(0) scale(.995); }

.promoSlide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.promoSlider__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(10,14,38,.25);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}

.promoSlider__btn:hover{
  transform: translateY(-50%) translateY(-1px);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(180,91,255,.22), 0 0 18px rgba(180,91,255,.18);
}

.promoSlider__btn:active{ transform: translateY(-50%) scale(.98); }

.promoSlider__btn--prev{ left: 10px; }
.promoSlider__btn--next{ right: 10px; }

.promoSlider__arrow{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.85);
  border-bottom: 2px solid rgba(255,255,255,.85);
}
.promoSlider__arrow--left{ transform: rotate(135deg); }
.promoSlider__arrow--right{ transform: rotate(-45deg); }

.promoSlider__dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}

.promoSlider__dot{
  width: 26px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.promoSlider__dot:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(180,91,255,.18);
}

.promoSlider__dot.is-active{
  background: linear-gradient(90deg, rgba(180,91,255,.75), rgba(123,77,255,.55));
  box-shadow: 0 0 0 1px rgba(180,91,255,.22), 0 0 18px rgba(180,91,255,.18);
}

@media (max-width: 980px){
  .promoSlider__frame{ --perView: 1; --gap: 12px; }
  .promoSlider__btn{ opacity: 0; pointer-events: none; }
}

/* QUICK NAV */
.qnav{ padding: 10px 0 14px; }

.qnav__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
}

.qnav__box{
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 10px;
}

.qnav__row{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.qnav__item{ margin: 0; padding: 0; }

.qnav__link{
  height: 56px;
  width: 118px;
  border-radius: 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(10,14,38,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.qnav__link:hover{
  transform: translateY(-2px);
  border-color: rgba(180,91,255,.25);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(180,91,255,.18), 0 16px 34px rgba(0,0,0,.20);
}
.qnav__link:active{ transform: translateY(0) scale(.99); }

.qnav__icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(90,130,255,.18));
}

.qnav__text{
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  color: rgba(255,255,255,.88);
}

.qnav__btn{
  width: 100%;
  height: 56px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(10,14,38,.18);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: .2px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.qnav__btn:hover{
  transform: translateY(-2px);
  border-color: rgba(180,91,255,.25);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(180,91,255,.18), 0 16px 34px rgba(0,0,0,.20);
}
.qnav__btn:active{ transform: translateY(0) scale(.99); }

.qnav__chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.82);
  border-bottom: 2px solid rgba(255,255,255,.82);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .9;
}
.qnav__box.is-open .qnav__chev{ transform: rotate(225deg); }

.qnav__drop{
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(100% + 10px);
  z-index: 25;
  border-radius: 18px;
  background: #2c184aeb;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.qnav__dropInner{ padding: 12px; }

.qnav__dropHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.qnav__title{ font-weight: 950; color: rgba(255,255,255,.92); }

.qnav__x{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.qnav__x:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(180,91,255,.18);
  background: rgba(255,255,255,.08);
}
.qnav__x:active{ transform: translateY(0) scale(.99); }

.qnav__grid{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.qnav__grid .qnav__link{ width: 100%; }

.qnav__box.is-collapsed .qnav__row{ display: none; }
.qnav__box.is-collapsed .qnav__btn{ display: flex; }
.qnav__btn{ display: none; }

@media (max-width: 560px){
  .qnav__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* SLOTS */
.slotsBlock{ padding: 14px 0 8px; }

.slotsBlock__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 14px;
}

.slotsBlock__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.slotsBlock__left{
  display: flex;
  align-items: center;
  gap: 12px;
}

.slotsBlock__badge{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(90,130,255,.18));
  opacity: .95;
}

.slotsBlock__title{
  margin: 0;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.slotsGrid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.slotCard{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  pointer-events: auto;
}

.slotCard:hover{
  transform: translateY(-2px);
  border-color: rgba(180,91,255,.18);
  box-shadow: 0 18px 36px rgba(0,0,0,.30), 0 0 0 1px rgba(180,91,255,.12);
}

.slotCard__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: filter .22s ease, transform .22s ease;
}

.slotCard__hover{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 10, 26, 0);
  opacity: 0;
  transition: opacity .18s ease, background .18s ease;
}

.slotCard__actions{
  display: flex;
  gap: 10px;
  transform: translateY(10px);
  transition: transform .18s ease;
}

.slotBtn{
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.slotBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(180,91,255,.18);
  background: rgba(255,255,255,.10);
  border-color: rgba(180,91,255,.22);
}
.slotBtn:active{ transform: translateY(0) scale(.99); }

.slotBtn--play{
  background: radial-gradient(120px 60px at 50% 20%, rgba(255,255,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(180,91,255,.62), rgba(123,77,255,.44));
  border-color: rgba(180,91,255,.55);
  box-shadow: 0 0 0 2px rgba(180,91,255,.20), 0 0 20px rgba(180,91,255,.18);
}

.slotBtn--demo{
  background: rgba(10,14,38,.22);
  border-color: rgba(255,255,255,.18);
}

.slotCard:hover .slotCard__img{
  filter: blur(2.6px) brightness(.70);
  transform: scale(1.03);
}

.slotCard:hover .slotCard__hover{
  opacity: 1;
  background: rgba(7, 10, 26, .42);
}

.slotCard:hover .slotCard__actions{ transform: translateY(0); }

@media (max-width: 1100px){
  .slotsGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .slotsBlock__title{ font-size: 28px; }
}

@media (max-width: 900px){
  .slotsGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .slotsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slotsBlock__title{ font-size: 22px; }
  .slotsBlock__badge{ width: 28px; height: 28px; }
}

/* FOOTER */
.ft{
  margin-top: 26px;
  background: rgba(46, 49, 105, .95);
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.ft__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 42px 14px 18px;
}

.ft__top{
  display: grid;
  grid-template-columns: 260px 1fr 1fr 360px;
  gap: 28px;
  align-items: start;
}

.ft__logo{
  display: inline-flex;
  text-decoration: none;
  margin-bottom: 18px;
}

.ft__logo img{
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}

.ft__join{
  margin: 0 0 16px;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  color: rgba(255,255,255,.86);
}

.ft__tg{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(10,14,38,.14);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.ft__tg img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(90,130,255,.18));
}

.ft__tg:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.06);
  border-color: rgba(180,91,255,.20);
  box-shadow: 0 0 0 1px rgba(180,91,255,.16), 0 18px 40px rgba(0,0,0,.20);
}

.ft__tg:active{ transform: translateY(0) scale(.99); }

.ft__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.ft__link{
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  color: rgba(255,255,255,.82);
  transition: transform .16s ease, color .16s ease, text-shadow .16s ease;
}

.ft__link:hover{
  color: rgba(255,255,255,.96);
  transform: translateX(2px);
  text-shadow: 0 0 18px rgba(180,91,255,.22);
}

.ft__right{
  display: grid;
  gap: 14px;
  justify-items: start;
}

.ftBot{
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.ftBot:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(180,91,255,.20);
  box-shadow: 0 0 0 1px rgba(180,91,255,.16), 0 18px 40px rgba(0,0,0,.20);
}

.ftBot:active{ transform: translateY(0) scale(.99); }

.ftBot__img{
  width: 54px;
  height: 40px;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 0 auto;
}

.ftBot__txt{ flex: 1 1 auto; }

.ftBot__t1{
  font-weight: 800;
  font-size: 14px;
  color: rgba(255,255,255,.86);
  line-height: 1.05;
}

.ftBot__t2{
  font-weight: 950;
  font-size: 14px;
  color: rgba(255,255,255,.96);
  line-height: 1.05;
  letter-spacing: .2px;
}

.ftBot__send{
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .95;
  transition: transform .16s ease;
}
.ftBot:hover .ftBot__send{ transform: translateX(2px); }

.ft__copy{
  font-weight: 800;
  font-size: 15px;
  color: rgba(255,255,255,.82);
  display: grid;
  gap: 6px;
}

.ft__legal{
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.76);
}

.toTop{
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(10, 62, 130, .65);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.toTop:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
}

.toTop:active{ transform: translateY(0) scale(.99); }

.toTop::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-right: 3px solid rgba(255,255,255,.92);
  border-bottom: 3px solid rgba(255,255,255,.92);
  transform: translate(-50%, -40%) rotate(225deg);
}

@media (max-width: 1100px){
  .ft__top{ grid-template-columns: 240px 1fr 1fr; }
  .ft__right{ grid-column: 1 / -1; justify-items: start; }
}

@media (max-width: 820px){
  .ft__top{ grid-template-columns: 1fr; gap: 18px; }
  .ft__right{ justify-items: start; }

  .ft__links .ft__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
  }

  .toTop{ right: 14px; bottom: 14px; width: 54px; height: 54px; }
  .ft__container{ padding-top: 30px; }
  .ft__legal{ margin-top: 22px; }
}

@media (max-width: 460px){
  .ft__links .ft__list{ grid-template-columns: 1fr; }
  .ftBot{ max-width: 100%; }
  .ft__logo img{ height: 38px; }
  .ft__join{ font-size: 15px; }
}

/* CONTENT (article) */
.page{ min-height: 100vh; }

.page .demo{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px 44px;
  color: rgba(255,255,255,.88);
}

.page .demo > *{ margin: 0 0 14px; }

.page .demo h1,
.page .demo h2,
.page .demo h3{
  color: rgba(255,255,255,.94);
  letter-spacing: .2px;
}

.page .demo h1{
  font-size: 34px;
  font-weight: 950;
  line-height: 1.12;
  margin-top: 6px;
  margin-bottom: 12px;
}

.page .demo h2{
  font-size: 24px;
  font-weight: 900;
  margin-top: 18px;
  margin-bottom: 10px;
}

.page .demo h3{
  font-size: 18px;
  font-weight: 900;
  margin-top: 16px;
  margin-bottom: 8px;
}

.page .demo p{
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

.page .demo strong{
  color: rgba(255,255,255,.94);
  font-weight: 900;
}

.page .demo em{ color: rgba(210,230,255,.90); }

.page .demo a{
  color: rgba(210,230,255,.90);
  text-decoration: none;
  border-bottom: 1px solid rgba(180,91,255,.30);
  transition: color .16s ease, border-color .16s ease, text-shadow .16s ease;
}

.page .demo a:hover{
  color: rgba(255,255,255,.96);
  border-color: rgba(180,91,255,.55);
  text-shadow: 0 0 18px rgba(180,91,255,.22);
}

.page .demo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.page .demo ul,
.page .demo ol{
  padding-left: 20px;
  color: rgba(255,255,255,.84);
}

.page .demo li{
  margin: 8px 0;
  line-height: 1.55;
}

.page .demo blockquote{
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

.page .demo table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,38,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page .demo thead th{
  width: 1%;
  text-align: left;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .2px;
  padding: 12px 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.page .demo tbody td{
  padding: 12px 12px;
  font-size: 14px;
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.page .demo tbody tr:hover td{ background: rgba(255,255,255,.04); }
.page .demo tbody tr:last-child td{ border-bottom: 0; }

@media (max-width: 640px){
  .page .demo h1{ font-size: 24px; }
  .page .demo h2{ font-size: 20px; }
  .page .demo p{ font-size: 15px; }
  .page .demo thead th{ font-size: 12px; }
}