.bonus-header,
.bonus-rang {
  border-radius:var(--b-radius);
  display:flex
}
.bonus-header,
.bonus-rang__card {
  overflow:hidden;
  position:relative
}
.bonus-rang__tabs button.active.previous img,
.bonus-rang__tabs button:not(.active):not(.current) img {
  opacity:.7;
  mix-blend-mode:luminosity
}
.bonus-header {
  background:var(--bg_primary__100);
  background-size:cover;
  padding:20px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:1
}
.bonus-header:after {
  content:"";
  background:url(/img/bg.svg) no-repeat center center,var(--bg_primary__100);
  width:100%;
  height:100%;
  z-index:-1;
  position:absolute;
  top:0;
  left:0
}
.bonus-header__logo {
  background:radial-gradient(73.33% 73.33% at 50% 50%,#9db1ff 0,#6d3eff 100%);
  filter:drop-shadow(0px 8.4583339691px 26.5833339691px rgba(118, 83, 255, .3));
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:48px;
  color:#fff;
  width:87px;
  height:87px;
  border-radius:11px
}
.bonus-header__subtitle,
.bonus-header__title {
  color:var(--color_primary__100);
  text-align:center
}
.bonus-header__title {
  font-size:42px;
  font-weight:800;
  margin-bottom:8px
}
.bonus-header__subtitle {
  font-size:14px;
  font-weight:600;
  line-height:130%;
  margin-bottom:30px
}
.bonus-header__items {
  padding:20px;
  background:var(--bg_main__100);
  border-radius:11px;
  display:flex;
  align-items:center;
  flex-direction:column;
  width:100%
}
.bonus-header__items-item {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
  width:100%
}
.bonus-header__items-item img {
  width:32px;
  height:32px;
  margin-right:12px
}
.bonus-header__items-item .text {
  font-size:14px;
  font-weight:600;
  margin-right:auto
}
@media (min-width:768px) {
  .bonus-header__items-item {
    width:auto;
    flex-wrap:nowrap
  }
  .bonus-header__items-item .text {
    max-width:100px
  }
  .bonus-header__items-item .text.long {
    max-width:110px
  }
}
.bonus-header__items-item+.bonus-header__items-item:before {
  content:"";
  display:block;
  background:var(--bg_light_hover__100);
  border-radius:999px;
  margin:12px 0;
  height:2px;
  width:100%
}
html.dark .bonus-header:after,
html[data-theme=dark] .bonus-header:after {
  opacity:.04
}
.bonus-rang {
  background:var(--bg_primary__100);
  flex-direction:column;
  padding:12px;
  gap:12px
}
.bonus-rang__card,
.bonus-rang__progress {
  padding:0 12px;
  border-radius:var(--b-radius)
}
.bonus-rang__checks {
  display:grid;
  gap:16px;
  margin-top:8px
}
.bonus-rang__check {
  display:flex;
  align-items:flex-start
}
.bonus-rang__check .title {
  font-size:14px;
  font-weight:600;
  margin-right:4px
}
.bonus-rang__check .title.inactive {
  color:var(--color_secondary__100)
}
.bonus-rang__check .value {
  color:#4db34b;
  font-size:14px;
  font-weight:700;
  margin-left:auto
}
.bonus-rang__card {
  background:#ebe6fc;
  display:flex;
  align-items:center;
  height:118px
}
.bonus-rang__card.bg1 {
  background:url(/img/yellow.svg) 40% center no-repeat,linear-gradient(81deg,#d94828 11.54%,#ffb066 93.41%)
}
.bonus-rang__card.bg2 {
  background:url(/img/white.svg) 40% center no-repeat,linear-gradient(108deg,#4185e4 6.64%,#97b1d5 93.67%)
}
.bonus-rang__card.bg3 {
  background:url(/img/yellow.svg) 40% center no-repeat,linear-gradient(100deg,#e06413 0,#e29757 84.52%)
}
.bonus-rang__card.bg4 {
  background:url(/img/yellow.svg) 40% center no-repeat,linear-gradient(109deg,#9344e9 6.93%,#b877ff 91.95%)
}
.bonus-rang__card-img {
  width:80px;
  height:auto;
  margin-right:4px
}
.bonus-rang__card-lock {
  color:#e8e5ff;
  width:16px;
  height:auto
}
.bonus-rang__card-current {
  color:#fff;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center
}
.bonus-rang__card-title {
  font-size:22px;
  font-weight:700;
  margin-top:4px;
  color:#fff
}
.bonus-rang__progress {
  background:var(--bg_main__100);
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:48px;
  font-weight:600;
  font-size:14px
}
.bonus-rang__progress.active {
  justify-content:center
}
.bonus-rang__progress .label {
  color:var(--color_secondary__100);
  font-size:13px;
  font-weight:600;
  width:100%
}
.bonus-rang__progress .text {
  font-size:14px;
  font-weight:600
}
.bonus-rang__progress.cashback {
  justify-content:space-between
}
.bonus-rang__tabs {
  gap:6px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--bg_secondary__100);
  border-radius:var(--b-radius);
  padding:4px;
  height:42px
}
.bonus-rang__tabs button.active.previous {
  background:rgba(182,176,215,.6)!important
}
.bonus-rang__tab {
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--b-radius-sm);
  height:34px
}
.bonus-benefits,
.bonus-benefits__item,
.bonus-rangs {
  border-radius:var(--b-radius)
}
.bonus-benefits__title,
.bonus-rangs__title {
  letter-spacing:1.8px;
  text-transform:uppercase;
  top:0;
  left:50%;
  transform:translate(-50%);
  height:60px;
  color:#fff
}
.bonus-rang__tab.active {
  background:linear-gradient(90deg,#7449e6 0,#69a4ff 98.44%)!important
}
.bonus-rang.secondary {
  background-color:var(--bg_secondary__100)
}
:is(.dark .bonus-rang.secondary) {
  background-color:var(--bg_main__100)
}
.bonus-rang.secondary .bonus-rang__progress,
.bonus-rang.secondary .bonus-rang__tabs {
  background-color:var(--bg_light_hover__100)
}
:is(.dark .bonus-rang.secondary .bonus-rang__tabs) {
  background-color:var(--bg_secondary__100)
}
html.dark .bonus-rang__tab.active.previous,
html[data-theme=dark] .bonus-rang__tab.active.previous {
  background:rgba(120,129,157,.6)!important
}
.bonus-rangs {
  display:flex;
  flex-direction:column;
  position:relative;
  padding:90px 20px 20px;
  background:var(--bg_primary__100);
  align-items:center
}
.bonus-rangs__title {
  font-size:18px;
  font-weight:900;
  position:absolute;
  background:url(/img/title-bg-mobile.svg) center top/contain no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  width:260px
}
.bonus-content__tab {
  display:none;
  flex-direction:column;
  gap:12px
}
.bonus-content__tab.active {
  display:flex
}
.bonus-rangs__text {
  font-size:14px;
  font-weight:600;
  margin-bottom:30px;
  text-align:center;
  width:686px;
  max-width:100%;
  line-height:134%
}
.bonus-benefits__grid,
.bonus-rangs__grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(1,minmax(0,1fr));
  width:100%
}
@media screen and (min-width:768px) {
  .bonus-header {
    padding:40px
  }
  .bonus-header__title {
    font-size:48px
  }
  .bonus-header__subtitle {
    font-size:18px;
    margin-bottom:38px
  }
  .bonus-header__items {
    flex-direction:row;
    width:auto
  }
  .bonus-header__items-item+.bonus-header__items-item:before {
    height:34px;
    width:2px;
    margin:0 20px
  }
  .bonus-rangs__title {
    width:360px;
    background:url(/img/title-bg.svg) center top no-repeat
  }
  .bonus-rangs__grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
.benefit-shadow {
  filter:drop-shadow(0px 3.344px 5.749px rgba(95, 35, 2, .25))
}
.bonus-benefits {
  padding:90px 20px 20px;
  background:var(--bg_primary__100);
  position:relative
}
.bonus-benefits__title {
  font-size:14px;
  font-weight:900;
  position:absolute;
  background:url(/img/title-bg-mobile.svg) center top/contain no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  width:260px
}
.bonus-faq,
.bonus-faq__col {
  display:grid;
  gap:12px
}
@media screen and (min-width:768px) {
  .bonus-benefits__title {
    width:360px;
    background:url(/img/title-bg.svg) center top no-repeat
  }
  .bonus-benefits__grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media screen and (min-width:1440px) {
  .bonus-benefits__grid,
  .bonus-rangs__grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}
.bonus-benefits__item {
  background:var(--bg_secondary__100);
  padding:20px;
  text-align:center
}
.bonus-benefits__item .title {
  font-size:20px;
  font-weight:700;
  line-height:120.4%;
  margin-bottom:8px
}
.bonus-benefits__item .text {
  font-size:16px;
  font-weight:500;
  line-height:24px
}
html.dark .bonus-benefits__item,
html[data-theme=dark] .bonus-benefits__item {
  background:var(--bg_primary__200)
}
.bonus-faq {
  grid-template-columns:repeat(1,minmax(0,1fr))
}
@media screen and (min-width:768px) {
  .bonus-faq {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
.bonus-page {
  display:flex;
  flex-direction:column;
  gap:20px
}
.bonus-page__faq {
  display:flex;
  align-items:center;
  font-size:18px;
  font-weight:600
}
.bonus-page__faq img {
  margin-right:8px
}
.bonus-page__faq img.dark,
html.dark .bonus-page__faq img,
html[data-theme=dark] .bonus-page__faq img {
  display:none
}
html.dark .bonus-page__faq img.dark,
html[data-theme=dark] .bonus-page__faq img.dark {
  display:block
}