@font-face {
  font-family: 'ClashGrotesk';
  src: url('fonts/ClashGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: ClashGrotesk;
}

body {
  height: 100%;
  margin: 0;
  background-color: var(--gray);
  font-family: 'ClashGrotesk', sans-serif;
}

a {
  text-decoration: none;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.container {
  max-width: 550px;
  padding: 0 20px;
  margin: 0 auto;
}

section {
  padding: 30px 0;
}

main {
  padding-top: 50px;
  padding-top: 50px;
  max-width: 550px;
  margin: 0 auto;
  background-color: var(--background);
}

.padding__main {
  padding: 150px 0 50px 0;
  color: var(--dark);
}

.padding__main a {
  font-size: 24px;
  color: var(--primary);
}



/* burger */
.burger {
  display: none;
  height: 100%;
}

.nav__burger {
  top: 0;
  right: 0;
  padding: 50px;
  width: 100%;
  position: absolute;
  z-index: 99;

  display: none;
  flex-direction: column;

  background-color: #fff;
}

.nav__burger .nav__list {
  margin-left: auto;
  font-size: 22px;
  color: #333;
  text-transform: capitalize;
}

.active {
  display: flex;
}

.overflow {
  overflow: hidden;
}

.burger-checkbox {
  position: absolute;
  visibility: hidden;
  right: 0;
}

.burger {
  cursor: pointer;
  display: block;
  color: #333;
  position: relative;
  border: none;
  background: transparent;
  width: 30px;
  height: 23px;
  z-index: 100;
}

.burger::before,
.burger::after {
  content: "";
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 10px;
  background-color: #333;
}

.burger::before {
  top: 0px;
  box-shadow: 0 11px 0 #333;
  transition: box-shadow 0.3s 0.15s, top 0.3s 0.15s, transform 0.3s;
}

.burger::after {
  bottom: 0;
  transition: bottom 0.3s 0.15s, transform 0.3s;
}

.burger-checkbox:checked+.burger::before {
  top: 12px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 transparent;
  transition: box-shadow 0.15s, top 0.3s, transform 0.3s 0.15s;
}

.burger-checkbox:checked+.burger::after {
  bottom: 9px;
  transform: rotate(-45deg);
  transition: bottom 0.3s, transform 0.3s 0.15s;
}

/* end burger */

.heading {
  margin: 0;
  font-size: 30px;
}

.text {
  margin: 0;
  font-size: 25px;
}

.hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: 1s;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}


/* header */
header {
  max-width: 550px;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  position: fixed;
  padding: 10px 0;
  z-index: 99;
  background-color: var(--background);
  border-bottom: 1px solid var(--accent);
}

.header__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  display: flex;
  flex-direction: row;
  align-items: center;

  font-size: 25px;
  /* color: var(--gray); */

  transition: color 0.3s ease;
}

/* .header__logo:hover {
  color: var(--pink);
} */
.nav__item {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.nav__list {
  font-size: 20px;
}

:root {
  --primary: #e67e22;
  --secondary: #f39c12;
  --background: #ffffff;
  --text: #1a1a1a;
  --gray: #b3b3b3;
  --dark: #0d0d0d;
  --accent: #ffcc80;
  --line: #e6e6e8;
}

/* hero */
.hero__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--background);
}

.hero__heading {
  font-size: 32px;
  line-height: 40px;
  color: var(--dark);
  text-align: center;
}

.hero__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.hero__bullets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.hero__bullet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.08), transparent);
  transform: translateX(-100%);
}

.hero__bullet:hover::after {
  transform: translateX(100%);
  transition: 0.3s ease;
}

.hero__bullet .icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.hero__bullettext {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.hero__btn {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 22px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.hero__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease;
}

.hero__stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.hero__stat {
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__num {
  font-size: 26px;
  line-height: 30px;
  color: var(--primary);
}

.hero__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  margin-top: 8px;
}

.hero__progresswrap {
  width: 100%;
  margin-top: 22px;
}

.hero__progresstext {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero__progresstext .icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.hero__progresslabel {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.hero__progressvalue {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
}

.hero__progressbar {
  width: 100%;
  height: 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
}

.hero__progressfill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
}

.hero__imagewrap {
  display: block;
  margin-top: 22px;
  border: 1px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.hero__bg {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 130px;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}

.icon {
  stroke: var(--primary);
}

/* features */
.features__container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.features__heading {
  font-size: 28px;
  line-height: 36px;
  color: var(--dark);
  text-align: center;
}

.features__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.features__grid {
  display: flex;
  flex-direction: column;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.features__card {
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.features__card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 140px;
  height: 140px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.35;
}

.features__card .icon {
  width: 24px;
  height: 24px;
  stroke: var(--primary);
}

.features__title {
  font-size: 18px;
  margin: 0;
  line-height: 24px;
  color: var(--dark);
}

.features__desc {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
}

.features__link {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid transparent;
  transition: 0.3s ease;
}

.features__link:hover {
  border-bottom: 1px solid var(--primary);
  transition: 0.3s ease;
}

.features__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}

.features__stat {
  flex: 1 1 160px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.features__counter {
  font-size: 26px;
  line-height: 30px;
  color: var(--primary);
}

.features__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  text-align: center;
}

.features__imagewrap {
  display: block;
  border: 1px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
}

.features__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* games__preview */
.games__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.games__heading {
  font-size: 28px;
  line-height: 36px;
  color: var(--dark);
  text-align: center;
}

.games__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.games__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.games__card {
  border: 1px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
  background: var(--background);
}

.games__cardlink {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease;
}

.games__cardlink:hover {
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.games__media {
  position: relative;
  height: 200px;
}

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

.games__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 14px;
  line-height: 20px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 204, 128, 0.8);
  color: var(--dark);
  backdrop-filter: blur(2px);
}

.games__badge--alt {
  background: rgba(230, 126, 34, 0.18);
  border-color: var(--primary);
}

.games__content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.games__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.games__head .icon {
  width: 22px;
  height: 22px;
  stroke: var(--primary);
}

.games__title {
  font-size: 18px;
  line-height: 24px;
  color: var(--dark);
}

.games__desc {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
}

.games__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.games__chip {
  font-size: 16px;
  line-height: 22px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--dark);
  background: rgba(255, 204, 128, 0.16);
}

/* bonuses__intro */
.bonuses__container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bonuses__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.bonuses__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bonuses__perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.bonuses__perk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.bonuses__perk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.08), transparent);
}

.bonuses__perk:hover::after {
  transform: translateX(100%);
  transition: 0.3s ease;
}

.bonuses__glyph {
  width: 22px;
  height: 22px;
  border: 2px solid var(--primary);
  border-radius: 6px;
  position: relative;
}

.bonuses__glyph::before,
.bonuses__glyph::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--accent);
  border-radius: 4px;
}

.bonuses__perktext {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.bonuses__stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bonuses__stat {
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--background);
}

.bonuses__num {
  font-size: 26px;
  line-height: 30px;
  color: var(--primary);
}

.bonuses__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
}

.bonuses__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bonuses__pheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bonuses__plabel {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.bonuses__pvalue {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
}

.bonuses__pbar {
  width: 100%;
  height: 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.bonuses__pf {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
}

.bonuses__btn {
  align-self: center;
  padding: 14px 22px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.bonuses__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease;
}

/* bonuses__offers */
.bonusesoffers__container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bonusesoffers__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.bonusesoffers__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bonusesoffers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.bonusesoffers__card {
  border: 1px solid var(--gray);
  border-radius: 12px;
  background: var(--background);
  display: flex;
  gap: 12px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

.bonusesoffers__card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.08), transparent);
}

.bonusesoffers__card:hover::after {
  transform: translateX(100%);
  transition: 0.3s ease;
}

.bonusesoffers__iconwrap {
  flex: 0 0 40px;
  height: 40px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.bonusesoffers__iconwrap .icon {
  width: 22px;
  height: 22px;
  stroke: var(--primary);
}

.bonusesoffers__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}

.bonusesoffers__tier {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
}

.bonusesoffers__title {
  font-size: 18px;
  line-height: 24px;
  color: var(--dark);
}

.bonusesoffers__amount {
  font-size: 26px;
  line-height: 30px;
  color: var(--primary);
}

.bonusesoffers__desc {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
}

.bonusesoffers__btn {
  align-self: flex-start;
  padding: 12px 18px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s ease;
}

.bonusesoffers__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease;
}

.bonusesoffers__imagewrap {
  display: block;
  border: 1px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
}

.bonusesoffers__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* bonuses__details */
.bonusesdetails__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bonusesdetails__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.bonusesdetails__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

/* strip */
.bonusesdetails__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px;
}

.bonusesdetails__pill {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bonusesdetails__pill .icon {
  width: 20px;
  height: 20px;
  stroke: var(--primary);
}

.bonusesdetails__pilltext {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.bonusesdetails__sep {
  width: 1px;
  height: 20px;
  background: var(--accent);
}

/* accordion */
.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bonusesdetails__accord {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bonusesdetails__item {
  padding: 10px;
  border: 1px solid var(--gray);
  border-radius: 12px;
  background: var(--background);
}

.bonusesdetails__details[open] {
  border-radius: 12px;
}

.bonusesdetails__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.bonusesdetails__summary .icon {
  width: 22px;
  height: 22px;
  stroke: var(--primary);
}

.bonusesdetails__stitle {
  font-size: 18px;
  line-height: 24px;
  color: var(--dark);
}

.bonusesdetails__desc {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
}

.bonusesdetails__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px 12px;
}

.bonusesdetails__chip {
  font-size: 16px;
  line-height: 22px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--dark);
  background: rgba(255, 204, 128, 0.16);
}

/* key-values */
.bonusesdetails__kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 10px;
}

.bonusesdetails__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 10px;
}

.bonusesdetails__k {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.bonusesdetails__v {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
}

/* CTA */
.bonusesdetails__cta {
  border: 1px solid var(--gray);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.bonusesdetails__ctatitle {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.bonusesdetails__ctasub {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
}

.bonusesdetails__btn {
  padding: 12px 18px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s ease;
}

.bonusesdetails__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease;
}

/* responsive tweaks for 550px width design */
@media (max-width: 560px) {
  .bonusesdetails__strip {
    gap: 6px;
  }

  .bonusesdetails__pilltext {
    font-size: 16px;
  }

  .bonusesdetails__sep {
    display: none;
  }

  .bonusesdetails__cta {
    flex-direction: column;
    align-items: stretch;
  }
}

/* games__highlight */
.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gameshighlight__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gameshighlight__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.gameshighlight__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.gameshighlight__banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.gameshighlight__panel {
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 14px;
  background: var(--background);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gameshighlight__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gameshighlight__tag {
  align-self: flex-start;
  font-size: 16px;
  line-height: 22px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 204, 128, 0.18);
  color: var(--dark);
}

.gameshighlight__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gameshighlight__chip {
  font-size: 16px;
  line-height: 22px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 204, 128, 0.16);
  color: var(--dark);
}

.gameshighlight__meter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.gameshighlight__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.gameshighlight__mult {
  font-size: 32px;
  line-height: 40px;
  color: var(--primary);
}

.gameshighlight__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gameshighlight__phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gameshighlight__ptime {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
}

.gameshighlight__pnote {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
}

.gameshighlight__pbar {
  width: 100%;
  height: 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.gameshighlight__pfill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
}

.gameshighlight__btn {
  align-self: stretch;
  text-align: center;
  padding: 14px 22px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s ease;
}

.gameshighlight__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease;
}

.gameshighlight__imagewrap {
  display: block;
  border: 1px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
}

.gameshighlight__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.gameshighlight__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gameshighlight__note {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
}

/* games__grid */
.gamesgrid__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gamesgrid__heading {
  font-size: 28px;
  line-height: 36px;
  color: var(--dark);
  text-align: center;
}

.gamesgrid__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gamesgrid__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.gamesgrid__item {
  border: 1px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
  background: var(--background);
}

.gamesgrid__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease;
}

.gamesgrid__link:hover {
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.gamesgrid__media {
  position: relative;
  height: 220px;
}

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

.gamesgrid__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 16px;
  line-height: 22px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 204, 128, 0.8);
  color: var(--dark);
}

.gamesgrid__badge--alt {
  background: rgba(230, 126, 34, 0.9);
  border-color: var(--primary);
}

.gamesinfo__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gamesinfo__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.gamesinfo__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.gamesinfo__facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gamesinfo__fact {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 14px;
  background: var(--background);
}

.gamesinfo__icon .icon {
  width: 24px;
  height: 24px;
  stroke: var(--primary);
}

.gamesinfo__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.gamesinfo__value {
  font-size: 28px;
  line-height: 34px;
  color: var(--primary);
}

.gamesinfo__desc {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  margin-top: 4px;
}

.gamesinfo__progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gamesinfo__ptext {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gamesinfo__ptitle {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.gamesinfo__ptime {
  font-size: 17px;
  line-height: 25px;
  color: var(--primary);
}

.gamesinfo__pbar {
  width: 100%;
  height: 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.gamesinfo__pfill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
}

.gamesinfo__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.gamesinfo__lead {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.gamesinfo__list {
  display: grid;
  gap: 8px;
}

.gamesinfo__item {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
}

.gamesinfo__kv {
  display: grid;
  gap: 10px;
}

.gamesinfo__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
}

.gamesinfo__k {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.gamesinfo__v {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
}

.gamesinfo__btn {
  align-self: center;
  padding: 14px 22px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s ease;
}

.gamesinfo__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease;
}

/* reviews__intro */
.reviewsintro__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reviewsintro__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.reviewsintro__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.reviewsintro__trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.reviewsintro__item {
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.reviewsintro__item::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.08), transparent);
}

.reviewsintro__item:hover::after {
  transform: translateX(100%);
  transition: 0.3s ease;
}

.reviewsintro__item .icon {
  width: 22px;
  height: 22px;
  stroke: var(--primary);
  align-self: center;
}

.reviewsintro__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.reviewsintro__value {
  font-size: 18px;
  line-height: 24px;
  color: var(--primary);
}

.reviewsintro__btn {
  align-self: center;
  padding: 14px 22px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s ease;
}

.reviewsintro__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease;
}

.reviewsintro__imagewrap {
  display: block;
  border: 1px solid var(--gray);
  border-radius: 12px;
  overflow: hidden;
}

.reviewsintro__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* reviews__slider */
.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reviewsslider__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reviewsslider__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.reviewsslider__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.reviewsslider__viewport {
  overflow: hidden;
  border: 1px solid var(--gray);
  border-radius: 12px;
}

.reviewsslider__track {
  display: flex;
  gap: 0;
  transform: translateX(0);
}

.reviewsslider__slide {
  min-width: 100%;
  padding: 14px;
  background: var(--background);
}

.reviewsslider__card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: start;
}

.reviewsslider__avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.reviewsslider__avatar .icon {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
}

.avatar--1 {
  background: #ff8a50;
}

.avatar--2 {
  background: #7dafff;
}

.avatar--3 {
  background: #7adbb5;
}

.avatar--4 {
  background: #ffd166;
}

.avatar--5 {
  background: #c792ea;
}

.reviewsslider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reviewsslider__name {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.reviewsslider__stars {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary);
}

.reviewsslider__body {
  grid-column: 1 / -1;
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
}

.reviewsslider__meta {
  grid-column: 1 / -1;
  font-size: 16px;
  line-height: 22px;
  color: var(--gray);
}

.reviewsslider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.reviewsintro__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.reviewsslider__dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  transition: 0.3s ease;
}

.reviewsslider__dot--active {
  background: var(--primary);
  border-color: var(--primary);
  transition: 0.3s ease;
}

/* reviews__summary */
.reviewssummary__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reviewssummary__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.reviewssummary__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reviewssummary__stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reviewssummary__stat {
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.reviewssummary__stat::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.08), transparent);
}

.reviewssummary__stat:hover::after {
  transform: translateX(100%);
  transition: 0.3s ease;
}

.reviewssummary__icon .icon {
  width: 22px;
  height: 22px;
  stroke: var(--primary);
}

.reviewssummary__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

.reviewssummary__value {
  font-size: 22px;
  line-height: 28px;
  color: var(--primary);
  display: block;
  margin-top: 2px;
}

.reviewssummary__note {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  margin-top: 6px;
}

/* mini-viz */
.reviewssummary__viz {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.reviewssummary__barwrap {
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 12px;
}

.reviewssummary__barhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviewssummary__bartitle {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.reviewssummary__barhint {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
}

.reviewssummary__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 8px;
  height: 120px;
  margin-top: 10px;
}

.reviewssummary__bar {
  display: block;
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--accent), rgba(230, 126, 34, 0.25));
  transition: 0.3s ease;
}

.reviewssummary__bar--1 {
  height: 12px;
}

.reviewssummary__bar--2 {
  height: 24px;
}

.reviewssummary__bar--3 {
  height: 50px;
}

.reviewssummary__bar--4 {
  height: 80px;
}

.reviewssummary__bar--5 {
  height: 110px;
}

.reviewssummary__bar:hover {
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.reviewssummary__scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.reviewssummary__tick {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  text-align: center;
}

/* trust line */
.reviewssummary__linewrap {
  border: 1px solid var(--gray);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.reviewssummary__linetop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reviewssummary__thumb {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reviewssummary__thumb .icon {
  width: 20px;
  height: 20px;
  stroke: var(--primary);
}

.reviewssummary__linelabel {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
}

.reviewssummary__lineval {
  font-size: 17px;
  line-height: 25px;
  color: var(--primary);
}

.reviewssummary__line {
  width: 100%;
  height: 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.reviewssummary__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
}

/* promo__hero */
.promohero__container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.promohero__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.promohero__imagewrap {
  position: relative;
  display: block;
  border: 1px solid var(--gray);
  border-radius: 14px;
  overflow: hidden;
}

.promohero__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* decor (без текста на самой картинке) */
.promohero__glow {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 204, 128, 0.35), rgba(230, 126, 34, 0.0) 70%);
  pointer-events: none;
}

.promohero__ring {
  position: absolute;
  border: 1px solid var(--accent);
  border-radius: 999px;
  pointer-events: none;
  transition: 0.3s ease;
}

.promohero__ring--1 {
  width: 120px;
  height: 120px;
  right: 12px;
  bottom: 12px;
  opacity: 0.45;
}

.promohero__ring--2 {
  width: 70px;
  height: 70px;
  left: 12px;
  top: 12px;
  opacity: 0.6;
}

/* hover эффект рамки */
.promohero__imagewrap:hover .promohero__ring--1 {
  transform: scale(1.06);
  opacity: 0.55;
}

.promohero__imagewrap:hover .promohero__ring--2 {
  transform: scale(1.08);
  opacity: 0.7;
}

/* promo__content */
.promocontent__container {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.promocontent__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center
}

.promocontent__lead {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0
}

.promocontent__wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--gray);
  border-radius: 14px;
  padding: 14px;
  background: var(--background)
}

.promocontent__timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative
}

.promocontent__titem {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 12px;
  position: relative;
  overflow: hidden
}

.promocontent__titem::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(230, 126, 34, .08), transparent)
}

.promocontent__titem:hover::after {
  transform: translateX(100%);
  transition: 0.3s ease
}

.promocontent__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  color: var(--primary);
  font-size: 16px;
  line-height: 22px
}

.promocontent__tlabel {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark)
}

.promocontent__tdesc {
  font-size: 16px;
  line-height: 22px;
  color: var(--text)
}

.promocontent__strip {

  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 2px
}

.promocontent__pill {
  flex: 0 0 auto;
  scroll-snap-align: center;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 204, 128, .16)
}

.promocontent__pk {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark)
}

.promocontent__pv {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary)
}

.promocontent__matrix {
  display: grid;
  gap: 10px;
  border: 1px dashed var(--accent);
  border-radius: 12px;
  padding: 12px
}

.promocontent__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff
}

.promocontent__mk {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark)
}

.promocontent__mv {
  font-size: 16px;
  line-height: 22px;
  color: var(--primary)
}

.promocontent__notes {
  display: grid;
  gap: 8px
}

.promocontent__note {
  font-size: 16px;
  line-height: 22px;
  color: var(--text)
}

@media(min-width:640px) {
  .promocontent__strip {
    justify-content: center
  }
}

/* promo__cta */
.promocta__container {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.promocta__panel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--gray);
  border-radius: 14px;
  background: var(--background)
}

.promocta__icons {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.promocta__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: rgba(255, 204, 128, .16)
}

.promocta__ico .icon {
  width: 22px;
  height: 22px;
  stroke: var(--primary)
}

.promocta__copy {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.promocta__title {
  font-size: 17px;
  line-height: 25px;
  color: var(--dark);
  text-align: center
}

.promocta__sub {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  text-align: center
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0
}

.promocta__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center
}

.promocta__chip {
  font-size: 16px;
  line-height: 22px;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 204, 128, .16);
  color: var(--dark)
}

.promocta__btn {
  justify-self: center;
  padding: 14px 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
  transition: 0.3s ease
}

.promocta__btn:hover {
  background: var(--secondary);
  transition: 0.3s ease
}


/* payments__methods */
.paymentsmethods__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.paymentsmethods__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.paymentsmethods__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

.paymentsmethods__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.paymentsmethods__item {
  border: 1px solid var(--gray);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 12px;
  background: var(--background);
  transition: 0.3s ease;
}

.paymentsmethods__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.08), transparent);
  transform: translateX(-100%);
}

.paymentsmethods__item:hover::after {
  transform: translateX(100%);
  transition: 0.3s ease;
}

.paymentsmethods__item:hover {
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.paymentsmethods__item .icon {
  width: 24px;
  height: 24px;
  stroke: var(--primary);
}

.paymentsmethods__label {
  font-size: 18px;
  line-height: 24px;
  color: var(--dark);
}

.paymentsmethods__note {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  grid-column: 2 / 3;
  opacity: 0.9;
}

.paymentsmethods__imagewrap {
  display: block;
  border: 1px solid var(--gray);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.paymentsmethods__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.paymentsmethods__imagewrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 60%;
  height: 60px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 204, 128, 0.30), rgba(230, 126, 34, 0.0) 70%);
  pointer-events: none;
}

/* entry animations */
@keyframes pm-pop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pm-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.paymentsmethods__item[data-anim="pop"] {
  animation: pm-pop 0.6s ease both;
}

.paymentsmethods__item[data-anim="pop"]:nth-child(2) {
  animation-delay: .08s;
}

.paymentsmethods__item[data-anim="pop"]:nth-child(3) {
  animation-delay: .16s;
}

@media (prefers-reduced-motion: reduce) {
  .paymentsmethods__item[data-anim="pop"] {
    animation: none;
  }
}

/* payments__info */
.paymentsinfo__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.paymentsinfo__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.paymentsinfo__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
}

.paymentsinfo__icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.paymentsinfo__iconitem {
  border: 1px solid var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 204, 128, 0.16);
  position: relative;
  overflow: hidden;
  transition: 0.3s ease;
}

.paymentsinfo__iconitem:hover {
  transform: translateY(-2px);
  transition: 0.3s ease;
}

.paymentsinfo__iconitem .icon {
  width: 20px;
  height: 20px;
  stroke: var(--primary);
}

.paymentsinfo__itext {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
}

@keyframes pm-soft-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.paymentsinfo__iconitem[data-anim="pulse"] .icon {
  animation: pm-soft-pulse 1.8s ease infinite;
}

.paymentsinfo__iconitem[data-anim="pulse"]:nth-child(2) .icon {
  animation-delay: .15s;
}

.paymentsinfo__iconitem[data-anim="pulse"]:nth-child(3) .icon {
  animation-delay: .3s;
}

.paymentsinfo__imagewrap {
  display: block;
  border: 1px solid var(--gray);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.paymentsinfo__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.paymentsinfo__imagewrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(230, 126, 34, 0.08), transparent 40%);
  pointer-events: none;
}

/* payments__stats */
.paymentsstats__container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.paymentsstats__heading {
  font-size: 30px;
  line-height: 38px;
  color: var(--dark);
  text-align: center;
}

.paymentsstats__text {
  font-size: 17px;
  line-height: 25px;
  color: var(--text);
  text-align: center;
  transition: .3s ease;
}

.paymentsstats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  transition: .3s ease;
}

.paymentsstats__card {
  border: 1px solid var(--gray);
  border-radius: 14px;
  padding: 12px;
  background: var(--background);
  display: grid;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: .3s ease;
}

.paymentsstats__card::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  opacity: .35;
  transition: .3s ease;
}

.paymentsstats__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
  transition: .3s ease;
}

.paymentsstats__value {
  font-size: 26px;
  line-height: 30px;
  color: var(--primary);
  transition: .3s ease;
}

.paymentsstats__btn {
  align-self: center;
  padding: 14px 22px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s ease;
}

.paymentsstats__btn:hover {
  background: var(--secondary);
}

.paymentsstats__imagewrap {
  display: block;
  border: 1px solid var(--gray);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.paymentsstats__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

@keyframes pm-count-glow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.paymentsstats__card[data-anim="count"] .paymentsstats__value {
  background-image: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: pm-count-glow 2.4s ease infinite;
}

@media (prefers-reduced-motion: reduce) {

  .paymentsinfo__iconitem[data-anim="pulse"] .icon,
  .paymentsstats__card[data-anim="count"] .paymentsstats__value {
    animation: none;
    background-size: auto;
    color: var(--primary);
  }
}

/* bottomnav */
.bottomnav {
  position: fixed;
  padding: 0;
  left: 0;
  right: 0;
  bottom: 0;

  border-top: 1px solid var(--gray);
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom);
}


.bottomnav__container {
  background: var(--background);
}

.bottomnav__bar {
  display: flex;
  align-items: flex-end
}

.bottomnav__list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
}

.bottomnav__item {
  display: flex;
  height: 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* обычные пункты */
.bottomnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  border-radius: 12px;
  transition: 0.3s ease;
}

.bottomnav__icon {
  width: 22px;
  height: 22px;
  stroke: var(--dark)
}

.bottomnav__label {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark)
}

.bottomnav__link:hover {
  transform: translateY(-2px);
  transition: 0.3s ease
}

.bottomnav__item.is-active .bottomnav__icon {
  stroke: var(--primary)
}

.bottomnav__item.is-active .bottomnav__label {
  color: var(--primary)
}

.bottomnav__item.is-active::after {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
  margin-top: 4px;
}

/* центральная кнопка */
.bottomnav__center {
  transform: translateY(-10px)
}

.bottomnav__fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 70% 30%, var(--accent), var(--primary));
  border: 2px solid var(--accent);
  text-decoration: none;
  transition: 0.3s ease;
}

.bottomnav__fab:hover {
  transform: translateY(-2px) scale(1.04);
  transition: 0.3s ease
}

.bottomnav__fabicon {
  width: 26px;
  height: 26px;
  stroke: #fff
}

.bottomnav__fablabel {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 22px;
  color: var(--primary)
}

/* кнопка смены языка */
.bottomnav__lang {
  background: transparent;
  border: 0;
  cursor: pointer
}

/* уменьшение анимаций */
@media (prefers-reduced-motion: reduce) {

  .bottomnav__link:hover,
  .bottomnav__fab:hover {
    transform: none
  }
}

/* sitefooter */

.sitefooter__container {
  position: relative;
  border-top: 1px solid var(--gray);
  background: var(--background);
  padding-bottom: 75px;
}

.sitefooter__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}

/* logo */
.sitefooter__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none
}

.sitefooter__logopart {
  font-size: 26px;
  line-height: 30px;
  color: var(--dark);
  transition: 0.3s ease;
}

.sitefooter__logopart--num {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 2px 6px;
  margin: 0 6px;
}

.sitefooter__brand:hover .sitefooter__logopart {
  transform: translateY(-1px);
  transition: 0.3s ease
}

/* top row */
.sitefooter__toprow {
  display: grid;
  gap: 12px
}

.sitefooter__compliance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px
}

.sitefooter__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-size: 16px;
}

.sitefooter__responsible {
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
  text-decoration: none;
  border: 1px solid var(--gray);
  padding: 6px 10px;
  border-radius: 10px;
  transition: 0.3s ease;
}

.sitefooter__responsible:hover {
  border-color: var(--primary);
  color: var(--primary);
  transition: 0.3s ease
}

/* nav links */
.sitefooter__nav {
  display: grid;
  gap: 10px
}

.sitefooter__links,
.sitefooter__legals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sitefooter__link {
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
  color: var(--dark);
  text-decoration: none;
  border: 1px solid var(--gray);
  border-radius: 10px;
  padding: 6px 10px;
  transition: 0.3s ease;
}

.sitefooter__link:hover {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
  transition: 0.3s ease
}

/* bottom notes */
.sitefooter__bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--gray)
}

.sitefooter__note {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  padding-top: 10px
}

.sitefooter__copy {
  font-size: 16px;
  line-height: 22px;
  color: var(--text);
  opacity: .9
}

/* responsive */
@media(min-width:700px) {
  .sitefooter__toprow {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .sitefooter__nav {
    grid-template-columns: auto;
    justify-items: end;
  }
}

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* faq */
.faq__container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__heading {
  font-size: 28px;
}

.faq__text {
  font-size: 17px;
  line-height: 24px;
  color: #222;
}

.faq__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq__hitem {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 8px 12px;
  transition: 0.3s ease;
}

.faq__hitem:hover {
  border-color: #e86b1f;
  background: #fff5ef;
  transition: 0.3s ease;
}

.faq__tools {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* btn & links */
/* faq__btn */
.faq__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #e86b1f;
  color: #fff;
  font-size: 17px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s ease;
  padding: 10px 16px;
}

.faq__btn:hover {
  background: #cf5f1b;
  transition: 0.3s ease;
}

.faq__btn--alt {
  background: transparent;
  color: #e86b1f;
  border: 1px solid #e86b1f;
}

.faq__btn--alt:hover {
  background: #e86b1f;
  color: #fff;
  transition: 0.3s ease;
}

/* faqhelp__btn */
.faqhelp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--dark);
  font-size: 17px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.3s ease;
  padding: 10px 16px;
}

.faqhelp__btn:hover {
  background: #cf5f1b;
  transition: 0.3s ease;
}

.faqhelp__btn--alt {
  background: transparent;
  color: #e86b1f;
  border: 1px solid #e86b1f;
}

.faqhelp__btn--alt:hover {
  background: #e86b1f;
  color: #fff;
  transition: 0.3s ease;
}

/* faq links (внутри FAQ текста) */
.faqlist__answer a {
  color: #e86b1f;
  text-decoration: underline;
  transition: 0.3s ease;
}

.faqlist__answer a:hover {
  color: #cf5f1b;
  transition: 0.3s ease;
}


.faq__btn--alt,
.faqhelp__btn--alt {
  background: #fff;
  border: 1px solid #e86b1f;
  color: #e86b1f;
}

.faq__btn--alt:hover,
.faqhelp__btn--alt:hover {
  background: #e86b1f;
  color: #fff;
}

/* faqlist */
.faqlist__heading {
  font-size: 24px;
  margin-bottom: 6px;
}

.faqlist__text {
  font-size: 17px;
  color: #333;
}

.faqlist__accord {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.faqlist__item {
  border: 1px solid #ccc;
  border-radius: 12px;
}

.faqlist__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.faqlist__summary::-webkit-details-marker {
  display: none;
}

.faqlist__q {
  font-size: 17px;
  font-weight: 500;
}

.faqlist__answer {
  padding: 0 14px 12px;
}

.faqlist__a {
  font-size: 17px;
  color: #222;
}

.faqlist__bullets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.faqlist__bullet {
  font-size: 17px;
  color: #444;
}

.faqlist__chev {
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: 0.3s ease;
}

.faqlist__details[open] .faqlist__chev {
  transform: rotate(-135deg);
}

/* faqhelp */
.faqhelp__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.faqhelp__heading {
  font-size: 24px;
}

.faqhelp__text {
  font-size: 17px;
  color: #333;
  max-width: 500px;
  text-align: center;
}

.faqhelp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.faq__htext {
  font-size: 17px;
  color: var(--dark);
}

/* error */
.error__wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center
}

.error__code {
  font-size: 56px;
  line-height: 56px;
  color: var(--primary);
  font-weight: 700
}

.error__heading {
  font-size: 28px;
  line-height: 34px;
  color: var(--dark)
}

.error__text {
  font-size: 17px;
  line-height: 24px;
  color: var(--text);
  max-width: 520px
}

.error__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center
}

.error__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 17px;
  text-decoration: none;
  transition: 0.3s ease;
  border: 0
}

.error__btn:hover {
  background: var(--accent);
  transition: 0.3s ease
}

.error__btn--alt {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary)
}

.error__btn--alt:hover {
  background: var(--primary);
  color: #fff
}

.error__imagewrap {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: 0.3s ease
}

.error__imagewrap:hover {
  transform: translateY(-2px);
  transition: 0.3s ease
}

.error__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block
}

/* errorlinks */

.errorlinks__heading {
  font-size: 24px;
  line-height: 30px;
  color: var(--dark)
}

.errorlinks__text {
  font-size: 17px;
  line-height: 24px;
  color: var(--text)
}

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

.errorlinks__link {
  display: block;
  border: 1px solid var(--primary);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--dark);
  text-decoration: none;
  transition: 0.3s ease
}

.errorlinks__link:hover {
  border-color: var(--primary);
  color: var(--primary);
  transition: 0.3s ease
}

@media(min-width:700px) {
  .error__img {
    height: 260px
  }

  .errorlinks__list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* search */
.search__wrap {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.search__heading {
  font-size: 28px;
  line-height: 34px;
  color: var(--dark)
}

.search__text {
  font-size: 17px;
  line-height: 24px;
  color: var(--text)
}

.search__form {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.search__label {
  font-size: 17px;
  color: var(--muted)
}

.search__fieldwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center
}

.search__field {
  flex: 1 1 auto;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 17px;
  color: var(--dark);
  outline: none;
  transition: 0.3s ease
}

.search__field:focus {
  border-color: var(--primary);
  transition: 0.3s ease
}

.search__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 17px;
  text-decoration: none;
  border: 0;
  transition: 0.3s ease
}

.search__btn:hover {
  background: var(--primary-600);
  transition: 0.3s ease
}

.search__hint {
  font-size: 16px;
  color: var(--muted)
}

.search__link {
  color: var(--primary);
  text-decoration: underline;
  transition: 0.3s ease
}

.search__link:hover {
  color: var(--primary-600)
}

/* searchresults */
.searchresults__wrap {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.searchresults__heading {
  font-size: 24px;
  line-height: 30px;
  color: var(--dark)
}

.searchresults__text {
  font-size: 17px;
  line-height: 24px;
  color: var(--text)
}

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

.searchresults__card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

.searchresults__link {
  display: flex;
  gap: 10px;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  transition: 0.3s ease
}

.searchresults__link:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  transition: 0.3s ease
}

.searchresults__media {
  width: 120px;
  flex: 0 0 120px;
  background: #fafafa
}

.searchresults__img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block
}

.searchresults__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px
}

.searchresults__title {
  font-size: 17px;
  line-height: 22px;
  color: var(--dark)
}

.searchresults__desc {
  font-size: 16px;
  line-height: 22px;
  color: var(--text)
}

.searchresults__meta {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.searchresults__count {
  font-size: 16px;
  color: var(--muted)
}

.searchresults__more {
  font-size: 16px;
  color: var(--primary);
  text-decoration: underline;
  transition: 0.3s ease
}

.searchresults__more:hover {
  color: var(--primary-600)
}

@media(min-width:760px) {
  .searchresults__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .searchresults__media {
    width: 140px;
    flex-basis: 140px
  }
}

/* cookiebar */
.cookiebar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 0px;
  z-index: 9999;
  padding: 0;

  border-radius: 14px;
  transition: 0.3s ease;
  opacity: 0;
  transform: translateY(10px)
}

.cookiebar--show {
  opacity: 1;
  transform: translateY(0);
  transition: 0.3s ease
}

.cookiebar__inner {
  background: #ffffff;
  border: 1px solid var(--line, #e6e6e8);
  max-width: 550px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.cookiebar__row {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.cookiebar__icon {
  flex: 0 0 18px;
  height: 18px;
  border: 2px solid var(--primary, #e86b1f);
  border-radius: 50%;
  margin-top: 3px
}

.cookiebar__copy {
  flex: 1 1 auto
}

.cookiebar__title {
  font-size: 18px;
  line-height: 22px;
  margin: 0;
  color: var(--dark, #0e0e0f)
}

.cookiebar__text {
  font-size: 16px;
  line-height: 22px;
  color: var(--text, #2b2b2c)
}

.cookiebar__links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px
}

.cookiebar__link {
  font-size: 16px;
  color: var(--primary, #e86b1f);
  text-decoration: underline;
  transition: 0.3s ease
}

.cookiebar__link:hover {
  color: var(--primary-600, #cf5f1b);
  transition: 0.3s ease
}

.cookiebar__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.cookiebar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary, #e86b1f);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease
}

.cookiebar__btn:hover {
  background: var(--primary-600, #cf5f1b);
  transition: 0.3s ease
}

.cookiebar__btn--alt {
  background: #fff;
  color: var(--primary, #e86b1f);
  border: 1px solid var(--primary, #e86b1f)
}

.cookiebar__btn--alt:hover {
  background: var(--primary, #e86b1f);
  color: #fff
}

@media (min-width:700px) {
  .cookiebar {
    left: 24px;
    right: 24px;
    bottom: 0px
  }

  .cookiebar__inner {
    flex-direction: row;
    align-items: center;
    gap: 16px
  }

  .cookiebar__row {
    flex: 1 1 auto
  }
}