/* Base Start */
:root {
  --primary: #7567ed;
  --primary-dark: #5748cf;
  --accent: #efbd72;
  --dark: #171a3d;
  --text: #ffffff;
  --text-soft: #d9daed;
  --light: #f5f6fb;
  --container: 1240px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  background: var(--light);
  color: var(--dark);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  font: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #8173f4, #6555db);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(74, 56, 189, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(74, 56, 189, 0.4);
}
/* Base End */


/* Header Start */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 22px 30px;
}

.header-2 {
  width: 100%;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--container));
  min-height: 72px;
  margin: 0 auto;
  padding: 0 16px 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 36px rgba(18, 19, 50, 0.12);
  backdrop-filter: blur(14px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.logo-icon {
  position: relative;
  width: 35px;
  height: 35px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #988aff, #5d4dd6);
  box-shadow: 0 7px 18px rgba(84, 68, 204, 0.3);
}

.logo-icon::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 11px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
}

.logo-name {
  color: #252744;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 27px;
  margin: 0 30px;
}

.navbar a {
  position: relative;
  color: #555972;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.25s ease;
}

.navbar a::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: 10px;
  background: var(--primary);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.navbar a:hover {
  color: var(--primary-dark);
}

.navbar a:hover::after {
  width: 100%;
}

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

.icon-container .btn {
  min-height: 44px;
  padding: 0 23px;
  font-size: 14px;
}

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 13px;
  background: rgba(111, 93, 226, 0.1);
  cursor: pointer;
}

.menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 10px;
  background: #333653;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-btn.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.menu-btn.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  width: min(calc(100% - 60px), var(--container));
  margin: 10px auto 0;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 15px 40px rgba(20, 20, 55, 0.15);
}

.mobile-navbar a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: #4d516d;
  font-size: 15px;
  font-weight: 700;
}

.mobile-navbar a:hover {
  background: rgba(111, 93, 226, 0.08);
  color: var(--primary-dark);
}

.mobile-menu.active {
  display: block;
}
/* Header End */


/* Home Start */
.home {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding: 145px 30px 70px;

  background:
    linear-gradient(
      90deg,
      rgba(14, 20, 59, 0.95) 0%,
      rgba(18, 23, 68, 0.88) 28%,
      rgba(29, 29, 80, 0.62) 49%,
      rgba(29, 25, 74, 0.16) 74%,
      rgba(20, 17, 56, 0.05) 100%
    ),
    url("../images/hero-moonwin.webp") center center / cover no-repeat;
}

.home .content {
  position: relative;
  z-index: 2;
  width: min(100%, var(--container));
  margin: 0 auto;
}

.home .text {
  max-width: 650px;
}

.home h5 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #efca91;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.home h5::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 10px;
  background: var(--accent);
}

.home h1 {
  max-width: 650px;
  margin-bottom: 22px;
  color: #ffffff;
  font-size: clamp(58px, 7vw, 104px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -5px;
}

.home h1 span {
  color: #b7adff;
}

.hero-desc {
  max-width: 600px;
  margin-bottom: 31px;
  color: var(--text-soft);
  font-size: 17px;
  line-height: 1.75;
}

.home .text > .btn {
  min-width: 165px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 35px;
}

.hero-features span {
  position: relative;
  padding-left: 17px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 700;
}

.hero-features span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}
/* Home End */


/* Responsive Start */
@media (max-width: 1060px) {
  .navbar {
    gap: 17px;
    margin: 0 18px;
  }

  .navbar a {
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .navbar {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .home {
    min-height: 100svh;
    background-position: 62% center;
  }
}

@media (max-width: 640px) {
  .header {
    padding: 14px;
  }

  .header .container {
    min-height: 64px;
    padding: 0 10px 0 15px;
    border-radius: 18px;
  }

  .logo-icon {
    width: 31px;
    height: 31px;
  }

  .logo-name {
    font-size: 16px;
  }

  .icon-container .btn {
    display: none;
  }

  .mobile-menu {
    width: calc(100% - 28px);
  }

  .home {
    min-height: 100svh;
    align-items: flex-end;
    padding: 120px 20px 70px;

    background:
      linear-gradient(
        180deg,
        rgba(11, 15, 47, 0.18) 0%,
        rgba(15, 19, 55, 0.32) 30%,
        rgba(17, 20, 60, 0.92) 68%,
        rgba(17, 20, 60, 0.98) 100%
      ),
      url("../images/hero-moonwin.webp") 67% center / cover no-repeat;
  }

  .home h5 {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .home h1 {
    margin-bottom: 18px;
    font-size: clamp(52px, 17vw, 78px);
    letter-spacing: -3px;
  }

  .hero-desc {
    font-size: 15px;
    line-height: 1.65;
  }

  .home .text > .btn {
    width: 100%;
  }

  .hero-features {
    gap: 9px 17px;
    margin-top: 28px;
  }
}
/* Responsive End */

/* Loyalty Start */
.loyalty-section {
  position: relative;
  overflow: hidden;
  padding: 82px 30px 92px;
  background:
    radial-gradient(circle at 8% 7%, rgba(115, 93, 234, 0.12), transparent 24%),
    radial-gradient(circle at 92% 88%, rgba(237, 187, 108, 0.11), transparent 21%),
    #f6f5fb;
}

.loyalty-container {
  width: min(100%, 1400px);
  margin: 0 auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: var(--accent);
}


/* Loyalty Maximum Start */
.loyalty-max {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 28px;
  align-items: stretch;
}

.loyalty-max-copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 20px 10px 20px 0;
}

.loyalty-max-copy h2 {
  max-width: 760px;
  margin: 15px 0 20px;
  color: #202342;
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 0.96;
  letter-spacing: -4px;
}

.loyalty-max-copy h2 span {
  display: block;
  color: var(--primary);
}

.loyalty-lead {
  max-width: 790px;
  color: #525770;
  font-size: 18px;
  line-height: 1.72;
}

.loyalty-intro-text {
  max-width: 790px;
  margin-top: 14px;
  color: #777a90;
  font-size: 14px;
  line-height: 1.75;
}

.loyalty-max-card {
  position: relative;
  overflow: hidden;
  padding: 31px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 15%, rgba(143, 115, 255, 0.38), transparent 27%),
    linear-gradient(145deg, #222541, #302b61 58%, #5141a1);
  box-shadow: 0 28px 65px rgba(46, 38, 101, 0.2);
}

.loyalty-max-card::before {
  content: "";
  position: absolute;
  top: -230px;
  right: -190px;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}

.max-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.max-card-head small {
  display: block;
  margin-bottom: 3px;
  color: #aeb1c8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.max-card-head strong {
  color: #ffffff;
  font-size: 22px;
}

.max-status {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.07);
  color: #f0cb8e;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.max-reward {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 28px 0 25px;
}

.max-reward > strong {
  color: #ffffff;
  font-size: clamp(82px, 8vw, 126px);
  line-height: 0.78;
  letter-spacing: -7px;
}

.max-reward div span {
  display: block;
  color: #f2c988;
  font-size: 22px;
  font-weight: 800;
}

.max-reward div small {
  color: #aeb1c8;
  font-size: 10px;
}

.max-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.max-metric {
  min-height: 86px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: 0.25s ease;
}

.max-metric:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.max-metric.active {
  border-color: rgba(241, 196, 126, 0.38);
  background: rgba(241, 196, 126, 0.12);
}

.max-metric strong {
  display: block;
  margin-bottom: 3px;
  color: #f2ca8a;
  font-size: 21px;
}

.max-metric span {
  color: #b8bbce;
  font-size: 9px;
  font-weight: 700;
}

.max-explainer {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 15px;
  margin-top: 10px;
  padding: 18px;
  border-radius: 17px;
  background: rgba(12, 15, 40, 0.3);
}

.explainer-orb {
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  border: 8px solid rgba(184, 168, 255, 0.18);
  border-radius: 50%;
  background: #a994ff;
  box-shadow: 0 0 20px rgba(169, 148, 255, 0.23);
}

.max-explainer small {
  color: #9fa3bc;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.max-explainer h3 {
  margin: 2px 0 5px;
  color: #ffffff;
  font-size: 15px;
}

.max-explainer p {
  color: #c4c6d7;
  font-size: 11px;
  line-height: 1.6;
}
/* Loyalty Maximum End */


/* Loyalty Instructions Start */
.loyalty-instructions {
  margin-top: 30px;
  padding: 34px;
  border: 1px solid rgba(77, 68, 145, 0.09);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 17px 48px rgba(53, 48, 101, 0.065);
}

.instructions-head {
  display: grid;
  grid-template-columns: 1fr 0.68fr;
  align-items: end;
  gap: 45px;
  margin-bottom: 24px;
}

.instructions-head h3 {
  max-width: 820px;
  margin-top: 9px;
  color: #222542;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.03;
  letter-spacing: -2px;
}

.instructions-head h3 span {
  color: var(--primary);
}

.instructions-head > p {
  color: #74788e;
  font-size: 13px;
  line-height: 1.7;
}

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

.instruction-card {
  display: flex;
  gap: 15px;
  min-height: 176px;
  padding: 20px;
  border: 1px solid rgba(76, 67, 143, 0.08);
  border-radius: 19px;
  background: #f8f7fc;
}

.instruction-card-accent {
  background:
    linear-gradient(135deg, rgba(116, 99, 232, 0.1), rgba(239, 190, 113, 0.09)),
    #faf9ff;
}

.instruction-card small {
  display: block;
  margin-bottom: 4px;
  color: #8d90a3;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.instruction-card h4 {
  margin-bottom: 7px;
  color: #282b49;
  font-size: 15px;
}

.instruction-card p {
  color: #75798f;
  font-size: 11px;
  line-height: 1.65;
}

.instruction-icon {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #ece9fc;
}

.instruction-icon::before,
.instruction-icon::after {
  content: "";
  position: absolute;
}

.icon-wallet::before {
  top: 12px;
  left: 9px;
  width: 24px;
  height: 18px;
  border: 2px solid var(--primary);
  border-radius: 5px;
}

.icon-wallet::after {
  top: 18px;
  right: 7px;
  width: 8px;
  height: 6px;
  border-radius: 5px;
  background: var(--accent);
}

.icon-game::before {
  top: 11px;
  left: 9px;
  width: 24px;
  height: 20px;
  border: 2px solid var(--primary);
  border-radius: 7px;
}

.icon-game::after {
  top: 19px;
  left: 15px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 10px 0 0 var(--accent);
}

.icon-point::before {
  inset: 10px;
  border: 3px solid var(--primary);
  border-radius: 50%;
}

.icon-point::after {
  top: 18px;
  left: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.icon-rank::before {
  left: 9px;
  bottom: 10px;
  width: 6px;
  height: 9px;
  border-radius: 2px;
  background: #b2a6f5;
  box-shadow:
    9px -5px 0 #9687eb,
    18px -12px 0 var(--primary);
}

.icon-gift::before {
  top: 15px;
  left: 9px;
  width: 24px;
  height: 17px;
  border-radius: 4px;
  background: var(--primary);
}

.icon-gift::after {
  top: 10px;
  left: 19px;
  width: 5px;
  height: 25px;
  background: var(--accent);
}

.icon-finish::before {
  inset: 9px;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.icon-finish::after {
  top: 18px;
  left: 17px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Loyalty Instructions End */


/* Loyalty Levels Start */
.loyalty-levels {
  margin-top: 30px;
  padding: 34px;
  border-radius: 28px;
  background: #232642;
  box-shadow: 0 23px 56px rgba(39, 34, 88, 0.15);
}

.levels-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
}

.levels-head > div:first-child {
  max-width: 780px;
}

.levels-head .section-label {
  color: #c6bcff;
}

.levels-head h3 {
  margin: 9px 0;
  color: #ffffff;
  font-size: clamp(32px, 3.5vw, 47px);
  line-height: 1.03;
  letter-spacing: -2px;
}

.levels-head p {
  color: #b6b9ca;
  font-size: 13px;
  line-height: 1.65;
}

.level-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 5px;
  padding: 5px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.07);
}

.level-tab {
  padding: 10px 17px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: #aeb1c5;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
}

.level-tab:hover {
  color: #ffffff;
}

.level-tab.active {
  background: linear-gradient(135deg, #7868ec, #9888f5);
  color: #ffffff;
  box-shadow: 0 8px 21px rgba(105, 84, 222, 0.3);
}

.level-stage {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 12px;
  margin-top: 23px;
}

.level-stage-main {
  padding: 29px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 10%, rgba(145, 119, 248, 0.25), transparent 28%),
    rgba(255, 255, 255, 0.055);
}

.level-eyebrow {
  color: #c9c1f5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.level-stage-main > h4 {
  max-width: 560px;
  margin: 7px 0 11px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1.08;
}

.level-stage-main > p {
  max-width: 650px;
  color: #bfc1d1;
  font-size: 12px;
  line-height: 1.68;
}

.level-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
}

.level-numbers div {
  padding: 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.065);
}

.level-numbers strong {
  display: block;
  color: #f0c782;
  font-size: 22px;
}

.level-numbers span {
  color: #aeb1c5;
  font-size: 8px;
}

.wager-explanation {
  display: flex;
  gap: 12px;
  margin-top: 9px;
  padding: 14px;
  border: 1px solid rgba(239, 190, 112, 0.16);
  border-radius: 14px;
  background: rgba(239, 190, 112, 0.07);
}

.wager-icon {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border: 6px solid rgba(239, 190, 112, 0.18);
  border-radius: 50%;
  background: var(--accent);
}

.wager-explanation p {
  color: #d0c9bb;
  font-size: 10px;
  line-height: 1.6;
}

.level-stage-side {
  display: grid;
  gap: 8px;
}

.level-stage-side > div {
  padding: 18px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.06);
}

.level-stage-side small {
  display: block;
  margin-bottom: 4px;
  color: #999db4;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.level-stage-side strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff;
  font-size: 14px;
}

.level-stage-side p {
  color: #b8bbcd;
  font-size: 10px;
  line-height: 1.6;
}

.level-limit {
  border: 1px solid rgba(241, 196, 126, 0.13);
  background: rgba(241, 196, 126, 0.07) !important;
}
/* Loyalty Levels End */


/* Loyalty Games Start */
.loyalty-games {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.loyalty-game-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 27px;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 23px;
  background: #ffffff;
  box-shadow: 0 14px 38px rgba(54, 49, 104, 0.055);
}

.loyalty-game-card small {
  color: var(--primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.loyalty-game-card h3 {
  margin: 2px 0 7px;
  color: #242744;
  font-size: 25px;
}

.loyalty-game-card p {
  color: #71758b;
  font-size: 12px;
  line-height: 1.65;
}

.game-note {
  display: block;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(77, 67, 145, 0.09);
  color: #555a72;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
}

.loyalty-game-symbol {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 19px;
  background: #eeeafd;
}

.slots-symbol::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 13px;
  width: 36px;
  height: 31px;
  border: 2px solid var(--primary);
  border-radius: 7px;
}

.slots-symbol span::before,
.slots-symbol span::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.slots-symbol span::before {
  left: 22px;
}

.slots-symbol span::after {
  left: 35px;
}

.live-symbol::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 18px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.live-symbol::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 12px;
  width: 34px;
  height: 14px;
  border: 2px solid var(--primary);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
}
/* Loyalty Games End */


/* Loyalty Path Start */
.loyalty-path {
  margin-top: 30px;
  padding: 34px;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 17px 48px rgba(53, 48, 101, 0.06);
}

.path-head {
  display: grid;
  grid-template-columns: 1fr 0.66fr;
  align-items: end;
  gap: 40px;
}

.path-head h3 {
  max-width: 760px;
  margin-top: 9px;
  color: #222542;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.03;
  letter-spacing: -2px;
}

.path-head > p {
  color: #74788e;
  font-size: 12px;
  line-height: 1.7;
}

.path-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  margin-top: 31px;
  padding-top: 23px;
}

.path-line {
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 4px;
  overflow: hidden;
  border-radius: 20px;
  background: #ebe8f7;
}

.path-line-fill {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.45s ease;
}

.path-rank {
  position: relative;
  min-height: 150px;
  padding: 16px 13px;
  border: 1px solid rgba(77, 68, 145, 0.1);
  border-radius: 18px;
  background: #f8f7fc;
  color: #292c49;
  text-align: left;
  cursor: pointer;
  transition: 0.25s ease;
}

.path-rank::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 4px solid #f6f5fb;
  border-radius: 50%;
  background: #c0b8eb;
  transform: translateX(-50%);
  transition: 0.25s ease;
}

.path-rank:hover {
  transform: translateY(-4px);
  border-color: rgba(116, 99, 232, 0.35);
}

.path-rank.active {
  border-color: transparent;
  background: linear-gradient(145deg, #6657d8, #8c7cf0);
  color: #ffffff;
  box-shadow: 0 15px 31px rgba(90, 72, 197, 0.22);
}

.path-rank.active::before {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(239, 190, 112, 0.17);
}

.path-orb {
  display: block;
  width: 37px;
  height: 37px;
  margin-bottom: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 29%, #fff0bf, #c6baff 38%, #7969d9 74%);
  box-shadow: inset -6px -5px 10px rgba(54, 41, 127, 0.15);
}

.path-rank small {
  display: block;
  min-height: 30px;
  color: #7f8297;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}

.path-rank strong {
  display: block;
  margin-top: 6px;
  color: var(--primary);
  font-size: 16px;
}

.path-rank em {
  display: block;
  margin-top: 2px;
  color: #999cad;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.path-rank.active small,
.path-rank.active em {
  color: rgba(255, 255, 255, 0.7);
}

.path-rank.active strong {
  color: #f1ca89;
}

.path-detail {
  display: grid;
  grid-template-columns: 1.2fr 0.72fr 1fr 1.25fr;
  gap: 8px;
  margin-top: 15px;
  padding: 20px;
  border-radius: 20px;
  background: #242743;
}

.path-detail > div {
  padding: 13px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.path-detail small {
  display: block;
  margin-bottom: 4px;
  color: #a0a4bb;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.path-detail h4,
.path-detail strong {
  color: #ffffff;
}

.path-detail h4 {
  margin-bottom: 4px;
  font-size: 21px;
}

.path-detail p {
  color: #bfc2d2;
  font-size: 10px;
  line-height: 1.55;
}

.path-detail-reward strong {
  color: #f1ca89;
  font-size: 18px;
}

.path-detail-wager strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}
/* Loyalty Path End */


/* Loyalty Note Start */
.loyalty-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 20px;
  padding: 19px 22px;
  border-radius: 18px;
  background: linear-gradient(110deg, #ebe7ff, #fff8ec);
}

.note-icon {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ffffff;
}

.note-icon::before {
  content: "!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 18px;
  font-weight: 900;
}

.loyalty-note strong {
  display: block;
  margin-bottom: 3px;
  color: #282b49;
  font-size: 13px;
}

.loyalty-note p {
  color: #70758b;
  font-size: 10px;
  line-height: 1.6;
}
/* Loyalty Note End */


/* Loyalty Responsive Start */
@media (max-width: 1100px) {
  .loyalty-max {
    grid-template-columns: 1fr;
  }

  .instruction-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .path-track {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }

  .path-line,
  .path-rank::before {
    display: none;
  }

  .path-detail {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .loyalty-section {
    padding: 70px 20px 80px;
  }

  .instructions-head,
  .path-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .levels-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .level-stage {
    grid-template-columns: 1fr;
  }

  .loyalty-games {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .loyalty-section {
    padding: 60px 15px 70px;
  }

  .loyalty-max-copy h2 {
    font-size: 45px;
    letter-spacing: -2.5px;
  }

  .loyalty-lead {
    font-size: 15px;
  }

  .loyalty-max-card,
  .loyalty-instructions,
  .loyalty-levels,
  .loyalty-path {
    padding: 23px 18px;
    border-radius: 23px;
  }

  .max-metrics,
  .instruction-grid,
  .level-numbers,
  .path-detail {
    grid-template-columns: 1fr;
  }

  .max-reward > strong {
    font-size: 88px;
  }

  .level-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .level-tab {
    flex: 1;
    min-width: max-content;
  }

  .loyalty-game-card {
    grid-template-columns: 1fr;
  }

  .path-track {
    display: flex;
    overflow-x: auto;
    padding-bottom: 7px;
    scroll-snap-type: x mandatory;
  }

  .path-rank {
    flex: 0 0 155px;
    scroll-snap-align: start;
  }
}
/* Loyalty Responsive End */
/* Loyalty End */
/* Missions Start */
.missions-section {
  position: relative;
  overflow: hidden;
  padding: 88px 30px 94px;
  background:
    radial-gradient(circle at 12% 8%, rgba(151, 129, 255, 0.22), transparent 25%),
    radial-gradient(circle at 90% 82%, rgba(237, 190, 113, 0.15), transparent 22%),
    linear-gradient(145deg, #292b52 0%, #36336b 48%, #51479a 100%);
  color: #ffffff;
}

.missions-section::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -180px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.missions-section::after {
  content: "";
  position: absolute;
  left: -240px;
  bottom: 80px;
  width: 510px;
  height: 510px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.missions-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1400px);
  margin: 0 auto;
}

.missions-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #d5ccff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.missions-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: #f0bf77;
}


/* Missions Intro Start */
.missions-intro {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 30px;
  align-items: stretch;
}

.missions-copy {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-right: 30px;
}

.missions-copy h2 {
  max-width: 790px;
  margin: 15px 0 21px;
  color: #ffffff;
  font-size: clamp(48px, 5.3vw, 77px);
  line-height: 0.96;
  letter-spacing: -4px;
}

.missions-copy h2 span {
  display: block;
  color: #b7a9ff;
}

.missions-lead {
  max-width: 820px;
  color: #d5d6e4;
  font-size: 18px;
  line-height: 1.72;
}

.missions-text {
  max-width: 810px;
  margin-top: 14px;
  color: #aeb2ca;
  font-size: 14px;
  line-height: 1.75;
}

.missions-focus-card {
  position: relative;
  overflow: hidden;
  padding: 31px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 14%, rgba(242, 193, 118, 0.2), transparent 27%),
    rgba(18, 20, 50, 0.48);
  box-shadow: 0 28px 70px rgba(10, 10, 30, 0.18);
  backdrop-filter: blur(14px);
}

.missions-focus-card::before {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -150px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(180, 164, 255, 0.16);
  border-radius: 50%;
}

.focus-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.focus-head small {
  color: #aeb2c8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.focus-head span {
  padding: 7px 11px;
  border-radius: 20px;
  background: rgba(180, 163, 255, 0.12);
  color: #d8d0ff;
  font-size: 9px;
  font-weight: 800;
}

.focus-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 15px;
  margin: 35px 0 29px;
}

.focus-main > strong {
  color: #ffffff;
  font-size: clamp(88px, 8vw, 124px);
  line-height: 0.76;
  letter-spacing: -7px;
}

.focus-main div span {
  display: block;
  color: #f2ca89;
  font-size: 23px;
  font-weight: 800;
}

.focus-main div small {
  color: #abb0c7;
  font-size: 10px;
}

.focus-equation {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 13px;
}

.focus-equation > div {
  padding: 17px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.065);
}

.focus-equation small {
  display: block;
  margin-bottom: 3px;
  color: #9ea3bb;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.focus-equation strong {
  color: #ffffff;
  font-size: 21px;
}

.equation-arrow {
  width: 24px;
  height: 2px;
  background: #efbd72;
}

.equation-arrow::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 16px;
  border-top: 2px solid #efbd72;
  border-right: 2px solid #efbd72;
  transform: rotate(45deg);
}

.focus-note {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 13px;
  margin-top: 12px;
  padding: 15px;
  border-radius: 15px;
  background: rgba(239, 189, 114, 0.08);
}

.focus-note-icon {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  border: 6px solid rgba(239, 189, 114, 0.18);
  border-radius: 50%;
  background: #efbd72;
}

.focus-note p {
  color: #d4d0c6;
  font-size: 10px;
  line-height: 1.6;
}
/* Missions Intro End */


/* Missions Flow Start */
.missions-flow {
  margin-top: 30px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: rgba(17, 19, 47, 0.38);
  backdrop-filter: blur(12px);
}

.missions-flow-head {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  align-items: end;
  gap: 40px;
}

.missions-flow-head h3 {
  max-width: 800px;
  margin-top: 9px;
  color: #ffffff;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.03;
  letter-spacing: -2px;
}

.missions-flow-head > p {
  color: #aeb2c8;
  font-size: 12px;
  line-height: 1.7;
}

.mission-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 29px;
}

.mission-step {
  min-height: 130px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: 0.25s ease;
}

.mission-step:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.09);
}

.mission-step.active {
  border-color: rgba(240, 190, 115, 0.35);
  background:
    linear-gradient(135deg, rgba(122, 101, 237, 0.4), rgba(239, 189, 114, 0.12));
  box-shadow: 0 14px 30px rgba(9, 10, 34, 0.16);
}

.mission-step small {
  display: block;
  margin: 12px 0 3px;
  color: #999eb8;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mission-step strong {
  display: block;
  font-size: 13px;
  line-height: 1.4;
}

.mission-step-icon {
  position: relative;
  display: block;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  background: rgba(181, 165, 255, 0.13);
}

.mission-step-icon::before,
.mission-step-icon::after {
  content: "";
  position: absolute;
}

.choose-icon::before {
  inset: 9px;
  border: 2px solid #b7a9ff;
  border-radius: 5px;
}

.choose-icon::after {
  top: 15px;
  left: 15px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #efbd72;
  border-bottom: 2px solid #efbd72;
  transform: rotate(-45deg);
}

.play-icon::before {
  top: 9px;
  left: 13px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #b7a9ff;
}

.collect-icon::before {
  inset: 9px;
  border: 2px solid #b7a9ff;
  border-radius: 50%;
}

.collect-icon::after {
  inset: 15px;
  border-radius: 50%;
  background: #efbd72;
}

.redeem-icon::before {
  left: 9px;
  bottom: 8px;
  width: 19px;
  height: 16px;
  border-radius: 4px;
  background: #b7a9ff;
}

.redeem-icon::after {
  top: 7px;
  left: 16px;
  width: 5px;
  height: 25px;
  background: #efbd72;
}

.mission-step-line {
  width: 24px;
  height: 2px;
  background: rgba(239, 189, 114, 0.55);
}

.mission-step-detail {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  margin-top: 13px;
}

.step-detail-main,
.step-detail-side {
  padding: 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.step-detail-main > span,
.step-detail-side > small {
  display: block;
  margin-bottom: 4px;
  color: #c2b8ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.step-detail-main h3 {
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 23px;
}

.step-detail-main p,
.step-detail-side p {
  color: #b9bdd0;
  font-size: 11px;
  line-height: 1.65;
}

.step-detail-side strong {
  display: block;
  margin-bottom: 7px;
  color: #f1ca8a;
  font-size: 14px;
}
/* Missions Flow End */


/* Mission Types Start */
.mission-types {
  margin-top: 30px;
  padding: 34px;
  border-radius: 28px;
  background: #f7f6fc;
  color: #262946;
}

.mission-types-head {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  align-items: end;
  gap: 40px;
}

.mission-types-head .missions-label {
  color: var(--primary-dark);
}

.mission-types-head h3 {
  max-width: 780px;
  margin-top: 9px;
  font-size: clamp(32px, 3.4vw, 47px);
  line-height: 1.03;
  letter-spacing: -2px;
}

.mission-types-head > p {
  color: #74788f;
  font-size: 12px;
  line-height: 1.7;
}

.mission-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-top: 25px;
}

.mission-type-card {
  padding: 22px;
  border: 1px solid rgba(78, 68, 145, 0.09);
  border-radius: 20px;
  background: #ffffff;
}

.mission-type-card small {
  display: block;
  margin: 15px 0 3px;
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.mission-type-card h4 {
  margin-bottom: 8px;
  font-size: 16px;
}

.mission-type-card p {
  min-height: 74px;
  color: #72768c;
  font-size: 11px;
  line-height: 1.65;
}

.type-icon {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #eeeafd;
}

.type-icon::before,
.type-icon::after {
  content: "";
  position: absolute;
}

.wager-type::before {
  inset: 11px;
  border: 3px solid var(--primary);
  border-radius: 50%;
}

.wager-type::after {
  inset: 19px;
  border-radius: 50%;
  background: var(--accent);
}

.slot-type::before {
  top: 12px;
  left: 10px;
  width: 28px;
  height: 24px;
  border: 2px solid var(--primary);
  border-radius: 6px;
}

.slot-type::after {
  top: 22px;
  left: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 10px 0 0 var(--accent);
}

.progress-type::before {
  left: 10px;
  bottom: 12px;
  width: 7px;
  height: 10px;
  border-radius: 2px;
  background: #b1a5f5;
  box-shadow:
    10px -6px 0 #9382eb,
    20px -13px 0 var(--primary);
}

.type-example {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(77, 68, 145, 0.09);
}

.type-example span {
  display: block;
  color: #999bad;
  font-size: 8px;
  text-transform: uppercase;
}

.type-example strong {
  display: block;
  margin-top: 3px;
  color: #555970;
  font-size: 10px;
  line-height: 1.45;
}
/* Mission Types End */


/* Missions Ecosystem Start */
.missions-ecosystem {
  margin-top: 30px;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background: rgba(18, 20, 48, 0.36);
}

.ecosystem-head {
  display: grid;
  grid-template-columns: 1fr 0.65fr;
  align-items: end;
  gap: 40px;
}

.ecosystem-head h3 {
  max-width: 800px;
  margin-top: 9px;
  color: #ffffff;
  font-size: clamp(32px, 3.4vw, 47px);
  line-height: 1.03;
  letter-spacing: -2px;
}

.ecosystem-head > p {
  color: #afb3ca;
  font-size: 12px;
  line-height: 1.7;
}

.ecosystem-layout {
  display: grid;
  grid-template-columns: 0.43fr 1.57fr;
  gap: 11px;
  margin-top: 25px;
}

.ecosystem-tabs {
  display: grid;
  gap: 7px;
}

.ecosystem-tab {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: 0.25s ease;
}

.ecosystem-tab:hover,
.ecosystem-tab.active {
  background: rgba(126, 105, 238, 0.22);
  border-color: rgba(181, 165, 255, 0.25);
}

.ecosystem-tab small {
  display: block;
  color: #979cb5;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.ecosystem-tab strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.ecosystem-icon {
  position: relative;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: rgba(182, 166, 255, 0.12);
}

.ecosystem-icon::before,
.ecosystem-icon::after {
  content: "";
  position: absolute;
}

.mission-system-icon::before {
  inset: 9px;
  border: 2px solid #b7a9ff;
  border-radius: 5px;
}

.mission-system-icon::after {
  top: 15px;
  left: 15px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #efbd72;
  border-bottom: 2px solid #efbd72;
  transform: rotate(-45deg);
}

.store-system-icon::before {
  left: 9px;
  bottom: 9px;
  width: 21px;
  height: 16px;
  border-radius: 4px;
  background: #b7a9ff;
}

.store-system-icon::after {
  top: 8px;
  left: 17px;
  width: 5px;
  height: 24px;
  background: #efbd72;
}

.scratch-system-icon::before {
  top: 10px;
  left: 8px;
  width: 23px;
  height: 18px;
  border: 2px solid #b7a9ff;
  border-radius: 4px;
  transform: rotate(-6deg);
}

.scratch-system-icon::after {
  top: 17px;
  left: 14px;
  width: 12px;
  height: 2px;
  background: #efbd72;
  transform: rotate(-6deg);
}

.wheel-system-icon::before {
  inset: 8px;
  border: 2px solid #b7a9ff;
  border-radius: 50%;
}

.wheel-system-icon::after {
  top: 18px;
  left: 18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #efbd72;
}

.ecosystem-content {
  min-height: 336px;
  padding: 29px;
  border-radius: 21px;
  background:
    radial-gradient(circle at 90% 12%, rgba(139, 115, 246, 0.22), transparent 26%),
    rgba(255, 255, 255, 0.055);
}

.ecosystem-content-top > span {
  color: #c5bbff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.ecosystem-content-top h3 {
  max-width: 680px;
  margin: 6px 0 9px;
  color: #ffffff;
  font-size: 29px;
  line-height: 1.08;
}

.ecosystem-content-top p {
  max-width: 790px;
  color: #babdd0;
  font-size: 12px;
  line-height: 1.7;
}

.ecosystem-content-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 24px;
}

.ecosystem-content-bottom > div {
  padding: 16px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
}

.ecosystem-content-bottom small {
  display: block;
  margin-bottom: 4px;
  color: #969bb5;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.ecosystem-content-bottom strong {
  color: #ffffff;
  font-size: 11px;
  line-height: 1.5;
}
/* Missions Ecosystem End */


/* Coin Economy Start */
.coin-economy {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 22px;
  margin-top: 30px;
  padding: 30px;
  border-radius: 27px;
  background: linear-gradient(120deg, #eeeaff, #fff7e9);
  color: #272a47;
}

.coin-economy-main h3 {
  margin: 8px 0 10px;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -1.8px;
}

.coin-economy-main h3 span {
  color: var(--primary);
}

.coin-economy-main p {
  max-width: 610px;
  color: #6f7388;
  font-size: 12px;
  line-height: 1.7;
}

.coin-economy-main .missions-label {
  color: var(--primary-dark);
}

.coin-economy-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.coin-card {
  padding: 17px;
  border: 1px solid rgba(75, 67, 143, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.coin-card-highlight {
  background: linear-gradient(135deg, #6b5cda, #8d7ff1);
}

.coin-card small {
  display: block;
  color: #9497aa;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.coin-card strong {
  display: block;
  margin: 3px 0;
  color: var(--primary);
  font-size: 20px;
}

.coin-card span {
  color: #767a8e;
  font-size: 9px;
  line-height: 1.45;
}

.coin-card-highlight small,
.coin-card-highlight span {
  color: rgba(255, 255, 255, 0.72);
}

.coin-card-highlight strong {
  color: #ffffff;
}
/* Coin Economy End */


/* Missions Note Start */
.missions-note {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  padding: 19px 21px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(16, 18, 44, 0.35);
}

.missions-note-icon {
  position: relative;
  flex: 0 0 37px;
  width: 37px;
  height: 37px;
  border-radius: 12px;
  background: rgba(239, 189, 114, 0.12);
}

.missions-note-icon::before {
  content: "!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #efbd72;
  font-size: 18px;
  font-weight: 900;
}

.missions-note strong {
  display: block;
  margin-bottom: 3px;
  color: #ffffff;
  font-size: 13px;
}

.missions-note p {
  color: #adb1c7;
  font-size: 10px;
  line-height: 1.6;
}
/* Missions Note End */


/* Missions Responsive Start */
@media (max-width: 1100px) {
  .missions-intro,
  .coin-economy {
    grid-template-columns: 1fr;
  }

  .instruction-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mission-step-line {
    display: none;
  }

  .mission-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecosystem-layout {
    grid-template-columns: 1fr;
  }

  .ecosystem-tabs {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .missions-section {
    padding: 72px 20px 82px;
  }

  .missions-flow-head,
  .mission-types-head,
  .ecosystem-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mission-step-detail {
    grid-template-columns: 1fr;
  }

  .mission-type-grid {
    grid-template-columns: 1fr;
  }

  .ecosystem-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .ecosystem-content-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .missions-section {
    padding: 62px 15px 72px;
  }

  .missions-copy {
    padding-right: 0;
  }

  .missions-copy h2 {
    font-size: 45px;
    letter-spacing: -2.5px;
  }

  .missions-lead {
    font-size: 15px;
  }

  .missions-focus-card,
  .missions-flow,
  .mission-types,
  .missions-ecosystem,
  .coin-economy {
    padding: 22px 18px;
    border-radius: 23px;
  }

  .focus-equation,
  .mission-steps,
  .instruction-grid,
  .ecosystem-tabs,
  .coin-economy-cards {
    grid-template-columns: 1fr;
  }

  .equation-arrow {
    width: 2px;
    height: 19px;
    margin-left: 22px;
  }

  .equation-arrow::after {
    margin: 11px 0 0 -3px;
    transform: rotate(135deg);
  }

  .mission-step {
    min-height: auto;
  }
}
/* Missions Responsive End */
/* Missions End */
/* Slots Start */
.slots-section {
  position: relative;
  overflow: hidden;
  padding: 88px 30px 94px;
  background:
    radial-gradient(circle at 8% 12%, rgba(117, 103, 237, 0.1), transparent 23%),
    radial-gradient(circle at 94% 70%, rgba(239, 189, 114, 0.11), transparent 20%),
    linear-gradient(180deg, #fbfaf7 0%, #f4f2f8 100%);
  color: #272a47;
}

.slots-container {
  width: min(100%, 1400px);
  margin: 0 auto;
}

.slots-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.slots-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: var(--accent);
}


/* Slots Intro Start */
.slots-intro {
  max-width: 1120px;
  margin-bottom: 34px;
}

.slots-intro h2 {
  max-width: 920px;
  margin: 15px 0 20px;
  color: #222542;
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 0.96;
  letter-spacing: -4px;
}

.slots-intro h2 span {
  color: var(--primary);
}

.slots-lead {
  max-width: 1050px;
  color: #555a72;
  font-size: 18px;
  line-height: 1.72;
}

.slots-text {
  max-width: 1050px;
  margin-top: 13px;
  color: #74788e;
  font-size: 14px;
  line-height: 1.75;
}
/* Slots Intro End */


/* Slots Navigation Start */
.slots-navigation {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 18px;
  padding: 7px;
  border: 1px solid rgba(76, 67, 145, 0.08);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 30px rgba(54, 48, 104, 0.055);
}

.slots-navigation::-webkit-scrollbar {
  display: none;
}

.slots-tab {
  flex-shrink: 0;
  padding: 12px 21px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: #75798e;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.slots-tab:hover {
  color: var(--primary);
}

.slots-tab.active {
  background: linear-gradient(135deg, #7464e6, #9484f4);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(93, 74, 203, 0.23);
}
/* Slots Navigation End */


/* Slots Categories Start */
.slots-categories {
  position: relative;
}

.slots-category {
  display: none;
  padding: 30px;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 48px rgba(54, 49, 103, 0.065);
}

.slots-category.active {
  display: block;
  animation: slotsCategoryIn 0.25s ease;
}

@keyframes slotsCategoryIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slots-category-head {
  display: grid;
  grid-template-columns: 1fr 0.34fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 24px;
}

.slots-category-label {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.slots-category-head h3 {
  max-width: 880px;
  margin-bottom: 9px;
  color: #252844;
  font-size: clamp(29px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -1.8px;
}

.slots-category-head p {
  max-width: 960px;
  color: #70748a;
  font-size: 13px;
  line-height: 1.7;
}

.slots-category-guide {
  padding: 17px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 15px 15px 0;
  background: #f5f3fa;
}

.slots-category-guide small {
  display: block;
  margin-bottom: 5px;
  color: #9699aa;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.slots-category-guide strong {
  display: block;
  color: #454861;
  font-size: 11px;
  line-height: 1.55;
}
/* Slots Categories End */


/* Slots Grid Start */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.slot-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(76, 67, 145, 0.1);
  border-radius: 18px;
  background: #ffffff;
  color: #2d304c;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 9px 24px rgba(53, 48, 101, 0.05);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.slot-card:hover {
  border-color: rgba(117, 103, 237, 0.36);
  transform: translateY(-4px);
  box-shadow: 0 14px 29px rgba(65, 54, 148, 0.11);
}

.slot-card.active {
  border-color: var(--primary);
  box-shadow:
    0 0 0 2px rgba(117, 103, 237, 0.09),
    0 14px 30px rgba(65, 54, 148, 0.13);
}

.slot-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.slot-card > span {
  display: flex;
  align-items: center;
  min-height: 57px;
  padding: 10px 12px;
  color: #30334e;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}
/* Slots Grid End */


/* Slot Detail Start */
.slot-detail[hidden] {
  display: none;
}

.slot-detail {
  display: grid;
  grid-template-columns: 0.7fr 1.25fr 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
  padding: 20px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 0%, rgba(137, 111, 239, 0.26), transparent 29%),
    #252846;
  color: #ffffff;
  animation: slotDetailIn 0.25s ease;
}

@keyframes slotDetailIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slot-detail > div {
  padding: 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.slot-detail small {
  display: block;
  margin-bottom: 5px;
  color: #9fa3ba;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.slot-detail-heading h3 {
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.15;
}

.slot-detail-heading > span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 20px;
  background: rgba(184, 169, 255, 0.12);
  color: #cbc1ff;
  font-size: 9px;
  font-weight: 800;
}

.slot-detail p {
  color: #c1c4d5;
  font-size: 10px;
  line-height: 1.62;
}

.slot-detail-watch {
  border: 1px solid rgba(239, 189, 114, 0.14);
  background: rgba(239, 189, 114, 0.07) !important;
}

.slot-detail-watch p {
  color: #d5d0c4;
}
/* Slot Detail End */


/* Slots Closing Start */
.slots-closing {
  margin-top: 24px;
  padding: 27px 30px;
  border-radius: 23px;
  background: linear-gradient(110deg, #ece8ff, #fff8ea);
}

.slots-closing h3 {
  max-width: 760px;
  margin: 7px 0 9px;
  color: #292c49;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -1.2px;
}

.slots-closing p {
  max-width: 1100px;
  color: #6d7187;
  font-size: 12px;
  line-height: 1.7;
}
/* Slots Closing End */


/* Slots Responsive Start */
@media (max-width: 1150px) {
  .slots-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .slot-detail {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .slots-section {
    padding: 72px 20px 82px;
  }

  .slots-category-head {
    grid-template-columns: 1fr;
    gap: 13px;
  }
}

@media (max-width: 680px) {
  .slots-section {
    padding: 62px 15px 72px;
  }

  .slots-intro h2 {
    font-size: 45px;
    letter-spacing: -2.5px;
  }

  .slots-lead {
    font-size: 15px;
  }

  .slots-category {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .slots-navigation {
    width: 100%;
  }

  .slots-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 9px;
    scroll-snap-type: x mandatory;
  }

  .slots-grid::-webkit-scrollbar {
    display: none;
  }

  .slot-card {
    flex: 0 0 155px;
    scroll-snap-align: start;
  }

  .slot-detail {
    grid-template-columns: 1fr;
  }

  .slots-closing {
    padding: 22px 19px;
  }
}
/* Slots Responsive End */
/* Slots End */
/* Slots Intro Width Fix Start */
.slots-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-areas:
    "label lead"
    "title lead"
    "title text";
  column-gap: 60px;
  row-gap: 12px;
  align-items: start;
  width: 100%;
  max-width: none;
}

.slots-intro .slots-label {
  grid-area: label;
}

.slots-intro h2 {
  grid-area: title;
  max-width: 680px;
}

.slots-lead {
  grid-area: lead;
  max-width: none;
  width: 100%;
}

.slots-text {
  grid-area: text;
  max-width: none;
  width: 100%;
  margin-top: 0;
}

@media (max-width: 900px) {
  .slots-intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "lead"
      "text";
    column-gap: 0;
  }

  .slots-intro h2 {
    max-width: 760px;
  }
}
/* Slots Intro Width Fix End */
/* Casino Start */
.casino-section {
  position: relative;
  overflow: hidden;
  padding: 88px 30px 94px;
  background:
    radial-gradient(circle at 12% 8%, rgba(115, 98, 235, 0.2), transparent 24%),
    radial-gradient(circle at 92% 72%, rgba(238, 186, 104, 0.12), transparent 21%),
    linear-gradient(145deg, #20233f 0%, #292b50 48%, #34305f 100%);
  color: #ffffff;
}

.casino-section::before {
  content: "";
  position: absolute;
  top: -250px;
  right: -200px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

.casino-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1400px);
  margin: 0 auto;
}

.casino-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #c9bfff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.casino-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: #efbd72;
}


/* Casino Intro Start */
.casino-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 31px;
}

.casino-intro-title h2 {
  max-width: 700px;
  margin-top: 15px;
  color: #ffffff;
  font-size: clamp(48px, 5vw, 74px);
  line-height: 0.97;
  letter-spacing: -4px;
}

.casino-intro-title h2 span {
  display: block;
  color: #a999ff;
}

.casino-intro-copy {
  padding-bottom: 4px;
}

.casino-lead {
  color: #d0d2e1;
  font-size: 17px;
  line-height: 1.72;
}

.casino-text {
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #aeb2c8;
  font-size: 13px;
  line-height: 1.72;
}
/* Casino Intro End */


/* Casino Navigation Start */
.casino-navigation {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 18px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(12px);
}

.casino-navigation::-webkit-scrollbar {
  display: none;
}

.casino-tab {
  flex-shrink: 0;
  padding: 12px 23px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: #aaadc1;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.casino-tab:hover {
  color: #ffffff;
}

.casino-tab.active {
  background: linear-gradient(135deg, #7564e6, #9787f5);
  color: #ffffff;
  box-shadow: 0 8px 23px rgba(83, 66, 190, 0.32);
}
/* Casino Navigation End */


/* Casino Category Start */
.casino-category {
  display: none;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 20px 50px rgba(10, 10, 30, 0.13);
  backdrop-filter: blur(12px);
}

.casino-category.active {
  display: block;
  animation: casinoCategoryIn 0.25s ease;
}

@keyframes casinoCategoryIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.casino-category-head {
  display: grid;
  grid-template-columns: 1fr 0.34fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 24px;
}

.casino-category-label {
  display: block;
  margin-bottom: 6px;
  color: #b6a8ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.casino-category-head h3 {
  max-width: 900px;
  margin-bottom: 9px;
  color: #ffffff;
  font-size: clamp(29px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -1.8px;
}

.casino-category-head p {
  max-width: 970px;
  color: #b8bbcf;
  font-size: 13px;
  line-height: 1.7;
}

.casino-category-guide {
  padding: 17px 18px;
  border-left: 3px solid #efbd72;
  border-radius: 0 15px 15px 0;
  background: rgba(255, 255, 255, 0.055);
}

.casino-category-guide small {
  display: block;
  margin-bottom: 5px;
  color: #9196ae;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.casino-category-guide strong {
  display: block;
  color: #e0e1ea;
  font-size: 11px;
  line-height: 1.55;
}
/* Casino Category End */


/* Casino Grid Start */
.casino-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.casino-card {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.065);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.casino-card:hover {
  border-color: rgba(180, 164, 255, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(10, 9, 35, 0.18);
}

.casino-card.active {
  border-color: #9e8fff;
  box-shadow:
    0 0 0 2px rgba(158, 143, 255, 0.1),
    0 16px 32px rgba(9, 9, 35, 0.2);
}

.casino-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.casino-card > span {
  display: flex;
  align-items: center;
  min-height: 57px;
  padding: 10px 12px;
  color: #eeeeF5;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}
/* Casino Grid End */


/* Casino Detail Start */
.casino-detail[hidden] {
  display: none;
}

.casino-detail {
  display: grid;
  grid-template-columns: 0.7fr 1.25fr 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
  padding: 20px;
  border: 1px solid rgba(239, 189, 114, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 0%, rgba(239, 189, 114, 0.11), transparent 29%),
    #16192f;
  animation: casinoDetailIn 0.25s ease;
}

@keyframes casinoDetailIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.casino-detail > div {
  padding: 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.casino-detail small {
  display: block;
  margin-bottom: 5px;
  color: #979cb5;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.casino-detail-heading h3 {
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.15;
}

.casino-detail-heading > span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 20px;
  background: rgba(181, 165, 255, 0.12);
  color: #c8beff;
  font-size: 9px;
  font-weight: 800;
}

.casino-detail p {
  color: #c0c3d4;
  font-size: 10px;
  line-height: 1.62;
}

.casino-detail-watch {
  border: 1px solid rgba(239, 189, 114, 0.14);
  background: rgba(239, 189, 114, 0.07) !important;
}

.casino-detail-watch p {
  color: #d6d0c3;
}
/* Casino Detail End */


/* Casino Closing Start */
.casino-closing {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 45px;
  align-items: center;
  margin-top: 24px;
  padding: 27px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 23px;
  background:
    linear-gradient(
      110deg,
      rgba(121, 101, 232, 0.15),
      rgba(239, 189, 114, 0.07)
    );
}

.casino-closing h3 {
  max-width: 610px;
  margin-top: 7px;
  color: #ffffff;
  font-size: 29px;
  line-height: 1.07;
  letter-spacing: -1.2px;
}

.casino-closing > p {
  color: #b7bbce;
  font-size: 12px;
  line-height: 1.7;
}
/* Casino Closing End */


/* Casino Responsive Start */
@media (max-width: 1150px) {
  .casino-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .casino-detail {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .casino-section {
    padding: 72px 20px 82px;
  }

  .casino-intro {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .casino-category-head {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .casino-closing {
    grid-template-columns: 1fr;
    gap: 13px;
  }
}

@media (max-width: 680px) {
  .casino-section {
    padding: 62px 15px 72px;
  }

  .casino-intro-title h2 {
    font-size: 45px;
    letter-spacing: -2.5px;
  }

  .casino-lead {
    font-size: 15px;
  }

  .casino-category {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .casino-navigation {
    width: 100%;
  }

  .casino-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 9px;
    scroll-snap-type: x mandatory;
  }

  .casino-grid::-webkit-scrollbar {
    display: none;
  }

  .casino-card {
    flex: 0 0 155px;
    scroll-snap-align: start;
  }

  .casino-detail {
    grid-template-columns: 1fr;
  }

  .casino-closing {
    padding: 22px 19px;
  }
}
/* Casino Responsive End */
/* Casino End */
/* Lottery Start */
.lottery-section {
  position: relative;
  overflow: hidden;
  padding: 88px 30px 94px;
  background:
    radial-gradient(circle at 9% 12%, rgba(117, 103, 237, 0.13), transparent 24%),
    radial-gradient(circle at 92% 70%, rgba(239, 189, 114, 0.15), transparent 21%),
    linear-gradient(180deg, #faf9f5 0%, #f4f1f7 100%);
  color: #292c49;
}

.lottery-container {
  width: min(100%, 1400px);
  margin: 0 auto;
}

.lottery-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.lottery-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: var(--accent);
}


/* Lottery Intro Start */
.lottery-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 30px;
}

.lottery-intro-title h2 {
  max-width: 700px;
  margin-top: 15px;
  color: #222542;
  font-size: clamp(48px, 5vw, 74px);
  line-height: 0.97;
  letter-spacing: -4px;
}

.lottery-intro-title h2 span {
  display: block;
  color: var(--primary);
}

.lottery-lead {
  color: #555a72;
  font-size: 17px;
  line-height: 1.72;
}

.lottery-text {
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(76, 67, 145, 0.1);
  color: #73778d;
  font-size: 13px;
  line-height: 1.72;
}
/* Lottery Intro End */


/* Lottery Highlights Start */
.lottery-highlights {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 12px;
}

.lottery-main-prize {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 285px;
  padding: 30px;
  border-radius: 27px;
  background:
    radial-gradient(circle at 87% 10%, rgba(167, 147, 255, 0.35), transparent 27%),
    linear-gradient(145deg, #252846, #3d3476);
  box-shadow: 0 22px 52px rgba(49, 42, 104, 0.15);
}

.lottery-main-prize small {
  color: #b0b3c9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.lottery-main-value {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  margin: 20px 0 17px;
}

.lottery-main-value strong {
  color: #ffffff;
  font-size: clamp(70px, 7vw, 100px);
  line-height: 0.8;
  letter-spacing: -6px;
}

.lottery-main-value span {
  padding-bottom: 6px;
  color: #f0c785;
  font-size: 18px;
  font-weight: 800;
}

.lottery-main-prize p {
  max-width: 500px;
  color: #c0c3d4;
  font-size: 11px;
  line-height: 1.6;
}

.lottery-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lottery-highlight-card {
  padding: 22px;
  border: 1px solid rgba(76, 67, 145, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
}

.lottery-highlight-card small {
  display: block;
  color: #9497aa;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lottery-highlight-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--primary);
  font-size: 29px;
  line-height: 1;
}

.lottery-highlight-card span {
  color: #73778d;
  font-size: 10px;
  line-height: 1.5;
}

.lottery-highlight-accent {
  background: linear-gradient(135deg, #ece8ff, #fff6e6);
}
/* Lottery Highlights End */


/* Lottery Tickets Start */
.lottery-tickets,
.lottery-prizes,
.lottery-flow,
.lottery-rules {
  margin-top: 26px;
  padding: 31px;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 17px 45px rgba(53, 48, 101, 0.055);
}

.lottery-tickets-head,
.lottery-prizes-head,
.lottery-flow-head {
  display: grid;
  grid-template-columns: 1fr 0.36fr;
  gap: 40px;
  align-items: end;
}

.lottery-tickets-head h3,
.lottery-prizes-head h3,
.lottery-flow-head h3 {
  max-width: 850px;
  margin: 8px 0 8px;
  color: #252844;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -1.8px;
}

.lottery-tickets-head h3 span,
.lottery-prizes-head h3 span,
.lottery-flow-head h3 span {
  color: var(--primary);
}

.lottery-tickets-head p,
.lottery-prizes-head > p,
.lottery-flow-head > p {
  color: #70748a;
  font-size: 12px;
  line-height: 1.68;
}

.lottery-ticket-note {
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 15px 15px 0;
  background: #f5f3fa;
}

.lottery-ticket-note small {
  display: block;
  margin-bottom: 4px;
  color: #9598aa;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.lottery-ticket-note strong {
  color: #464960;
  font-size: 11px;
  line-height: 1.5;
}

.lottery-ticket-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 23px;
}

.lottery-ticket-tab {
  padding: 18px;
  border: 1px solid rgba(76, 67, 145, 0.1);
  border-radius: 18px;
  background: #f7f6fb;
  color: #2b2e4b;
  text-align: left;
  cursor: pointer;
  transition: 0.24s ease;
}

.lottery-ticket-tab:hover {
  transform: translateY(-3px);
  border-color: rgba(117, 103, 237, 0.3);
}

.lottery-ticket-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #695ada, #8e7df0);
  color: #ffffff;
  box-shadow: 0 13px 29px rgba(82, 64, 190, 0.21);
}

.lottery-ticket-tab small {
  display: block;
  color: #9093a6;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.lottery-ticket-tab strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--primary);
  font-size: 29px;
}

.lottery-ticket-tab span {
  color: #6f7389;
  font-size: 11px;
  font-weight: 800;
}

.lottery-ticket-tab.active small,
.lottery-ticket-tab.active span {
  color: rgba(255, 255, 255, 0.72);
}

.lottery-ticket-tab.active strong {
  color: #f2ca89;
}

.lottery-ticket-detail {
  display: grid;
  grid-template-columns: 1.2fr 0.65fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding: 19px;
  border-radius: 19px;
  background: #252846;
}

.lottery-ticket-detail > div {
  padding: 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
}

.lottery-ticket-detail small {
  display: block;
  margin-bottom: 5px;
  color: #9da1b8;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.lottery-ticket-detail h4,
.lottery-ticket-detail strong {
  color: #ffffff;
}

.lottery-ticket-detail h4 {
  margin-bottom: 5px;
  font-size: 19px;
}

.lottery-ticket-detail strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.lottery-ticket-detail p {
  color: #c0c3d4;
  font-size: 10px;
  line-height: 1.6;
}
/* Lottery Tickets End */


/* Lottery Prizes Start */
.lottery-prize-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 23px;
}

.lottery-prize-card {
  padding: 18px;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 18px;
  background: #f7f6fb;
  text-align: left;
  cursor: pointer;
  transition: 0.24s ease;
}

.lottery-prize-card:hover {
  transform: translateY(-3px);
}

.lottery-prize-card.active {
  background: #282b4b;
  box-shadow: 0 13px 27px rgba(45, 40, 91, 0.16);
}

.lottery-prize-card small {
  color: #9295a7;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.lottery-prize-card strong {
  display: block;
  margin: 6px 0;
  color: var(--primary);
  font-size: 27px;
}

.lottery-prize-card span {
  color: #73778d;
  font-size: 10px;
  font-weight: 800;
}

.lottery-prize-card.active small,
.lottery-prize-card.active span {
  color: #aeb2c7;
}

.lottery-prize-card.active strong {
  color: #f0c785;
}

.lottery-prize-detail {
  display: grid;
  grid-template-columns: 0.7fr 0.8fr 1.5fr;
  gap: 8px;
  margin-top: 10px;
  padding: 18px;
  border-radius: 18px;
  background: #eeeafb;
}

.lottery-prize-detail > div,
.lottery-prize-detail > p {
  padding: 12px;
}

.lottery-prize-detail small {
  display: block;
  margin-bottom: 4px;
  color: #9295a8;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.lottery-prize-detail strong {
  color: #31344f;
  font-size: 14px;
}

.lottery-prize-detail p {
  color: #676b82;
  font-size: 10px;
  line-height: 1.6;
}
/* Lottery Prizes End */


/* Lottery Flow Start */
.lottery-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 23px;
}

.lottery-flow-card {
  padding: 20px;
  border: 1px solid rgba(76, 67, 145, 0.08);
  border-radius: 18px;
  background: #f8f7fb;
}

.lottery-flow-icon {
  position: relative;
  display: block;
  width: 43px;
  height: 43px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: #ebe7fc;
}

.lottery-flow-icon::before,
.lottery-flow-icon::after {
  content: "";
  position: absolute;
}

.deposit-icon::before {
  top: 11px;
  left: 9px;
  width: 25px;
  height: 19px;
  border: 2px solid var(--primary);
  border-radius: 5px;
}

.deposit-icon::after {
  top: 18px;
  right: 7px;
  width: 8px;
  height: 6px;
  border-radius: 4px;
  background: var(--accent);
}

.ticket-icon::before {
  inset: 10px 8px;
  border: 2px dashed var(--primary);
  border-radius: 5px;
}

.draw-icon::before {
  inset: 9px;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.draw-icon::after {
  top: 19px;
  left: 19px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.reward-icon::before {
  left: 9px;
  bottom: 10px;
  width: 25px;
  height: 17px;
  border-radius: 4px;
  background: var(--primary);
}

.reward-icon::after {
  top: 9px;
  left: 19px;
  width: 5px;
  height: 26px;
  background: var(--accent);
}

.lottery-flow-card small {
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.lottery-flow-card h4 {
  margin: 5px 0 7px;
  color: #30334f;
  font-size: 14px;
}

.lottery-flow-card p {
  color: #74788d;
  font-size: 10px;
  line-height: 1.6;
}
/* Lottery Flow End */


/* Lottery Rules Start */
.lottery-rules-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: center;
}

.lottery-rules-preview h3 {
  max-width: 780px;
  margin: 8px 0 8px;
  color: #262945;
  font-size: 30px;
  line-height: 1.06;
}

.lottery-rules-preview p {
  max-width: 850px;
  color: #72768b;
  font-size: 11px;
  line-height: 1.65;
}

.lottery-rules-toggle {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 0;
  border-radius: 24px;
  background: #282b4b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.lottery-rules-toggle i {
  position: relative;
  width: 17px;
  height: 17px;
}

.lottery-rules-toggle i::before,
.lottery-rules-toggle i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 2px;
  width: 13px;
  height: 2px;
  border-radius: 10px;
  background: #f0c785;
  transition: 0.24s ease;
}

.lottery-rules-toggle i::after {
  transform: rotate(90deg);
}

.lottery-rules-toggle.active i::after {
  transform: rotate(0);
}

.lottery-rules-content[hidden] {
  display: none;
}

.lottery-rules-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 20px;
}

.lottery-rule-block {
  padding: 19px;
  border-radius: 17px;
  background: #f6f4fa;
}

.lottery-rule-block small {
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.lottery-rule-block h4 {
  margin: 5px 0 7px;
  color: #333650;
  font-size: 14px;
}

.lottery-rule-block p {
  color: #72768b;
  font-size: 10px;
  line-height: 1.65;
}
/* Lottery Rules End */


/* Lottery Closing Start */
.lottery-closing {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 45px;
  align-items: center;
  margin-top: 25px;
  padding: 27px 30px;
  border-radius: 23px;
  background: linear-gradient(110deg, #ebe7ff, #fff6e8);
}

.lottery-closing h3 {
  max-width: 620px;
  margin-top: 7px;
  color: #292c48;
  font-size: 29px;
  line-height: 1.07;
  letter-spacing: -1.2px;
}

.lottery-closing > p {
  color: #6e7287;
  font-size: 12px;
  line-height: 1.7;
}
/* Lottery Closing End */


/* Lottery Responsive Start */
@media (max-width: 1000px) {
  .lottery-highlights {
    grid-template-columns: 1fr;
  }

  .lottery-flow-grid,
  .lottery-prize-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .lottery-section {
    padding: 72px 20px 82px;
  }

  .lottery-intro,
  .lottery-tickets-head,
  .lottery-prizes-head,
  .lottery-flow-head,
  .lottery-closing {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lottery-ticket-detail,
  .lottery-prize-detail {
    grid-template-columns: 1fr;
  }

  .lottery-rules-preview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .lottery-section {
    padding: 62px 15px 72px;
  }

  .lottery-intro-title h2 {
    font-size: 45px;
    letter-spacing: -2.5px;
  }

  .lottery-lead {
    font-size: 15px;
  }

  .lottery-tickets,
  .lottery-prizes,
  .lottery-flow,
  .lottery-rules {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .lottery-highlight-grid,
  .lottery-ticket-tabs,
  .lottery-prize-grid,
  .lottery-flow-grid,
  .lottery-rules-content {
    grid-template-columns: 1fr;
  }

  .lottery-main-value strong {
    font-size: 70px;
  }

  .lottery-rules-toggle {
    justify-content: space-between;
    width: 100%;
  }

  .lottery-closing {
    padding: 22px 19px;
  }
}
/* Lottery Responsive End */
/* Lottery End */
/* Tournaments Start */
.tournaments-section {
  position: relative;
  overflow: hidden;
  padding: 88px 30px 94px;
  background:
    radial-gradient(circle at 10% 8%, rgba(98, 123, 255, 0.2), transparent 25%),
    radial-gradient(circle at 92% 74%, rgba(238, 190, 112, 0.12), transparent 21%),
    linear-gradient(145deg, #1e2544 0%, #26325a 48%, #303c6f 100%);
  color: #ffffff;
}

.tournaments-section::before {
  content: "";
  position: absolute;
  top: -250px;
  right: -220px;
  width: 610px;
  height: 610px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 50%;
}

.tournaments-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1400px);
  margin: 0 auto;
}

.tournaments-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #c4ccff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tournaments-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: #efbd72;
}


/* Tournaments Intro Start */
.tournaments-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 30px;
}

.tournaments-intro-title h2 {
  max-width: 720px;
  margin-top: 15px;
  color: #ffffff;
  font-size: clamp(48px, 5vw, 74px);
  line-height: 0.97;
  letter-spacing: -4px;
}

.tournaments-intro-title h2 span {
  display: block;
  color: #aeb9ff;
}

.tournaments-lead {
  color: #d2d5e4;
  font-size: 17px;
  line-height: 1.72;
}

.tournaments-text {
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  color: #afb5cc;
  font-size: 13px;
  line-height: 1.72;
}
/* Tournaments Intro End */


/* Tournament Highlights Start */
.tournament-highlights {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 12px;
}

.tournament-highlight-main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 280px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 27px;
  background:
    radial-gradient(circle at 85% 12%, rgba(129, 151, 255, 0.32), transparent 28%),
    rgba(12, 17, 42, 0.38);
}

.tournament-highlight-main small {
  color: #aeb4cb;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-highlight-main strong {
  display: block;
  margin: 18px 0 2px;
  color: #ffffff;
  font-size: clamp(75px, 7vw, 102px);
  line-height: 0.85;
  letter-spacing: -6px;
}

.tournament-highlight-main > span {
  color: #f0c785;
  font-size: 18px;
  font-weight: 800;
}

.tournament-highlight-main p {
  max-width: 520px;
  margin-top: 16px;
  color: #bec3d5;
  font-size: 11px;
  line-height: 1.6;
}

.tournament-highlight-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tournament-highlight-card {
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}

.tournament-highlight-card small {
  display: block;
  color: #9ea4bc;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-highlight-card strong {
  display: block;
  margin: 8px 0 4px;
  color: #bdc7ff;
  font-size: 29px;
}

.tournament-highlight-card span {
  color: #b5bacf;
  font-size: 10px;
  line-height: 1.5;
}

.tournament-highlight-accent {
  background:
    linear-gradient(
      135deg,
      rgba(116, 99, 232, 0.28),
      rgba(239, 189, 114, 0.08)
    );
}
/* Tournament Highlights End */


/* Tournament Shared Panels Start */
.tournament-mechanics,
.tournament-route,
.tournament-examples,
.tournament-rules {
  margin-top: 26px;
  padding: 31px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 27px;
  background: rgba(14, 19, 46, 0.34);
  backdrop-filter: blur(10px);
}
/* Tournament Shared Panels End */


/* Tournament Mechanics Start */
.tournament-mechanics-head,
.tournament-route-head,
.tournament-examples-head {
  display: grid;
  grid-template-columns: 1fr 0.42fr;
  gap: 40px;
  align-items: end;
}

.tournament-mechanics-head h3,
.tournament-route-head h3,
.tournament-examples-head h3 {
  max-width: 850px;
  margin: 8px 0;
  color: #ffffff;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -1.8px;
}

.tournament-mechanics-head h3 span,
.tournament-route-head h3 span,
.tournament-examples-head h3 span {
  color: #aeb9ff;
}

.tournament-mechanics-head p,
.tournament-route-head > p,
.tournament-examples-head > p {
  color: #b1b6cc;
  font-size: 12px;
  line-height: 1.68;
}

.tournament-mechanic-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}

.tournament-mechanic-tab {
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  color: #aeb4c9;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.tournament-mechanic-tab.active {
  background: linear-gradient(135deg, #6d63dc, #8793f4);
  color: #ffffff;
  box-shadow: 0 9px 23px rgba(48, 58, 146, 0.3);
}

.tournament-mechanic-display {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 10px;
  margin-top: 15px;
}

.tournament-mechanic-main,
.tournament-mechanic-side > div {
  padding: 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.tournament-mechanic-main > span {
  color: #bec7ff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-mechanic-main h4 {
  max-width: 700px;
  margin: 6px 0 9px;
  font-size: 27px;
  line-height: 1.08;
}

.tournament-mechanic-main > p {
  color: #bdc1d4;
  font-size: 11px;
  line-height: 1.65;
}

.tournament-example {
  margin-top: 20px;
  padding: 16px;
  border-radius: 15px;
  background: rgba(239, 189, 114, 0.08);
}

.tournament-example small {
  display: block;
  margin-bottom: 7px;
  color: #dcbf91;
  font-size: 8px;
  text-transform: uppercase;
}

.tournament-example div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tournament-example strong {
  color: #ffffff;
  font-size: 16px;
}

.tournament-example span {
  color: #efbd72;
}

.tournament-mechanic-side {
  display: grid;
  gap: 8px;
}

.tournament-mechanic-side small {
  display: block;
  margin-bottom: 4px;
  color: #999fb8;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-mechanic-side strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.tournament-mechanic-side p {
  color: #b6bbcf;
  font-size: 10px;
  line-height: 1.6;
}
/* Tournament Mechanics End */


/* Tournament Route Start */
.tournament-route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.tournament-route-card {
  padding: 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.tournament-route-card small {
  color: #aeb9ff;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-route-card h4 {
  margin: 5px 0 7px;
  font-size: 14px;
}

.tournament-route-card p {
  color: #b7bccf;
  font-size: 10px;
  line-height: 1.6;
}

.tournament-route-icon {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: rgba(173, 185, 255, 0.11);
}

.tournament-route-icon::before,
.tournament-route-icon::after {
  content: "";
  position: absolute;
}

.route-check::before {
  inset: 10px;
  border: 2px solid #aeb9ff;
  border-radius: 5px;
}

.route-games::before {
  top: 11px;
  left: 9px;
  width: 24px;
  height: 20px;
  border: 2px solid #aeb9ff;
  border-radius: 6px;
}

.route-bet::before {
  inset: 10px;
  border: 2px solid #aeb9ff;
  border-radius: 50%;
}

.route-score::before {
  left: 9px;
  bottom: 10px;
  width: 6px;
  height: 9px;
  background: #aeb9ff;
  box-shadow:
    9px -5px 0 #8d99ef,
    18px -11px 0 #efbd72;
}

.route-board::before {
  inset: 9px;
  border: 2px solid #aeb9ff;
  border-radius: 4px;
}

.route-prize::before {
  left: 9px;
  bottom: 9px;
  width: 24px;
  height: 17px;
  border-radius: 4px;
  background: #aeb9ff;
}

.route-prize::after {
  top: 8px;
  left: 18px;
  width: 5px;
  height: 26px;
  background: #efbd72;
}
/* Tournament Route End */


/* Tournament Examples Start */
.tournament-example-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.tournament-example-tab {
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.tournament-example-tab.active {
  background: linear-gradient(135deg, #675ed4, #7f8be9);
}

.tournament-example-tab small {
  display: block;
  color: #9ea4bc;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-example-tab strong {
  display: block;
  margin: 5px 0 3px;
  font-size: 13px;
}

.tournament-example-tab span {
  color: #efc487;
  font-size: 10px;
  font-weight: 800;
}

.tournament-example-tab.active small {
  color: rgba(255, 255, 255, 0.68);
}

.tournament-example-detail {
  display: grid;
  grid-template-columns: 1.2fr 0.85fr 0.85fr 0.85fr;
  gap: 8px;
  margin-top: 10px;
  padding: 19px;
  border-radius: 19px;
  background: rgba(8, 12, 32, 0.35);
}

.tournament-example-detail > div {
  padding: 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
}

.tournament-example-detail small {
  display: block;
  margin-bottom: 5px;
  color: #9ca2bb;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-example-detail h4 {
  margin-bottom: 5px;
  font-size: 19px;
}

.tournament-example-detail strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.tournament-example-detail p {
  color: #b9bed1;
  font-size: 10px;
  line-height: 1.6;
}

.tournament-example-prize {
  border: 1px solid rgba(239, 189, 114, 0.12);
  background: rgba(239, 189, 114, 0.06) !important;
}
/* Tournament Examples End */


/* Tournament Rules Start */
.tournament-rules-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: center;
}

.tournament-rules-preview h3 {
  max-width: 800px;
  margin: 8px 0;
  font-size: 30px;
  line-height: 1.06;
}

.tournament-rules-preview p {
  max-width: 850px;
  color: #b4b9cd;
  font-size: 11px;
  line-height: 1.65;
}

.tournament-rules-toggle {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.tournament-rules-toggle i {
  position: relative;
  width: 17px;
  height: 17px;
}

.tournament-rules-toggle i::before,
.tournament-rules-toggle i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 2px;
  width: 13px;
  height: 2px;
  border-radius: 10px;
  background: #efbd72;
  transition: 0.24s ease;
}

.tournament-rules-toggle i::after {
  transform: rotate(90deg);
}

.tournament-rules-toggle.active i::after {
  transform: rotate(0);
}

.tournament-rules-content[hidden] {
  display: none;
}

.tournament-rules-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-top: 20px;
}

.tournament-rule-block {
  padding: 19px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.055);
}

.tournament-rule-block small {
  color: #aeb9ff;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.tournament-rule-block h4 {
  margin: 5px 0 7px;
  font-size: 14px;
}

.tournament-rule-block p {
  color: #b7bccf;
  font-size: 10px;
  line-height: 1.65;
}
/* Tournament Rules End */


/* Tournament Closing Start */
.tournament-closing {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 45px;
  align-items: center;
  margin-top: 25px;
  padding: 27px 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 23px;
  background:
    linear-gradient(
      110deg,
      rgba(109, 99, 220, 0.18),
      rgba(239, 189, 114, 0.07)
    );
}

.tournament-closing h3 {
  max-width: 640px;
  margin-top: 7px;
  font-size: 29px;
  line-height: 1.07;
  letter-spacing: -1.2px;
}

.tournament-closing > p {
  color: #b8bdcf;
  font-size: 12px;
  line-height: 1.7;
}
/* Tournament Closing End */


/* Tournament Responsive Start */
@media (max-width: 1000px) {
  .tournament-highlights {
    grid-template-columns: 1fr;
  }

  .tournament-route-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tournament-example-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .tournament-example-detail {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .tournaments-section {
    padding: 72px 20px 82px;
  }

  .tournaments-intro,
  .tournament-mechanics-head,
  .tournament-route-head,
  .tournament-examples-head,
  .tournament-mechanic-display,
  .tournament-rules-preview,
  .tournament-closing {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 680px) {
  .tournaments-section {
    padding: 62px 15px 72px;
  }

  .tournaments-intro-title h2 {
    font-size: 45px;
    letter-spacing: -2.5px;
  }

  .tournaments-lead {
    font-size: 15px;
  }

  .tournament-mechanics,
  .tournament-route,
  .tournament-examples,
  .tournament-rules {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .tournament-highlight-grid,
  .tournament-route-grid,
  .tournament-example-tabs,
  .tournament-example-detail,
  .tournament-rules-content {
    grid-template-columns: 1fr;
  }

  .tournament-mechanic-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .tournament-rules-toggle {
    justify-content: space-between;
    width: 100%;
  }

  .tournament-closing {
    padding: 22px 19px;
  }
}
/* Tournament Responsive End */
/* Tournaments End */
/* VIP Start */
.vip-section {
  position: relative;
  overflow: hidden;
  padding: 88px 30px 94px;
  background:
    radial-gradient(circle at 10% 10%, rgba(117, 103, 237, 0.12), transparent 24%),
    radial-gradient(circle at 92% 76%, rgba(239, 189, 114, 0.15), transparent 21%),
    linear-gradient(180deg, #fbfaf6 0%, #f3f0f7 100%);
  color: #292c49;
}

.vip-container {
  position: relative;
  z-index: 2;
  width: min(100%, 1400px);
  margin: 0 auto;
}

.vip-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.vip-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: var(--accent);
}


/* VIP Intro Start */
.vip-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 30px;
}

.vip-intro-title h2 {
  max-width: 720px;
  margin-top: 15px;
  color: #222542;
  font-size: clamp(48px, 5vw, 74px);
  line-height: 0.97;
  letter-spacing: -4px;
}

.vip-intro-title h2 span {
  display: block;
  color: var(--primary);
}

.vip-lead {
  color: #555a72;
  font-size: 17px;
  line-height: 1.72;
}

.vip-text {
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(76, 67, 145, 0.1);
  color: #72768c;
  font-size: 13px;
  line-height: 1.72;
}
/* VIP Intro End */


/* VIP Maximum Start */
.vip-maximum {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 11px;
  padding: 30px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 7%, rgba(160, 141, 255, 0.28), transparent 27%),
    #252846;
  box-shadow: 0 23px 56px rgba(45, 39, 94, 0.15);
}

.vip-maximum-main {
  padding: 5px 8px 5px 2px;
}

.vip-maximum-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.vip-maximum-head small {
  display: block;
  color: #aeb2c8;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-maximum-head strong {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 20px;
}

.vip-maximum-head > span {
  height: fit-content;
  padding: 7px 10px;
  border-radius: 20px;
  background: rgba(239, 189, 114, 0.1);
  color: #efc486;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-maximum-value {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin: 37px 0 23px;
}

.vip-maximum-value > strong {
  color: #ffffff;
  font-size: clamp(80px, 7vw, 110px);
  line-height: 0.78;
  letter-spacing: -7px;
}

.vip-maximum-value span {
  display: block;
  color: #efc486;
  font-size: 18px;
  font-weight: 800;
}

.vip-maximum-value small {
  color: #aeb2c7;
  font-size: 9px;
}

.vip-maximum-main > p {
  max-width: 570px;
  color: #c0c3d4;
  font-size: 11px;
  line-height: 1.65;
}

.vip-maximum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.vip-fact {
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: 0.23s ease;
}

.vip-fact:hover {
  transform: translateY(-3px);
}

.vip-fact.active {
  border-color: rgba(239, 189, 114, 0.32);
  background: rgba(239, 189, 114, 0.09);
}

.vip-fact small {
  display: block;
  color: #999eb6;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-fact strong {
  display: block;
  margin: 5px 0 3px;
  color: #efc486;
  font-size: 21px;
}

.vip-fact span {
  color: #b9bdd0;
  font-size: 9px;
}

.vip-fact-detail {
  grid-column: 1 / -1;
  padding: 17px 19px;
  border-radius: 16px;
  background: rgba(10, 13, 34, 0.28);
}

.vip-fact-detail small {
  color: #9ca1b9;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-fact-detail h3 {
  margin: 3px 0 5px;
  color: #ffffff;
  font-size: 17px;
}

.vip-fact-detail p {
  color: #bec2d3;
  font-size: 10px;
  line-height: 1.6;
}
/* VIP Maximum End */


/* VIP Panels Start */
.vip-entry,
.vip-levels,
.vip-experience,
.vip-cashback {
  margin-top: 26px;
  padding: 31px;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 17px 45px rgba(53, 48, 101, 0.055);
}

.vip-entry-head h3,
.vip-levels-head h3,
.vip-experience-head h3,
.vip-cashback-preview h3 {
  max-width: 860px;
  margin: 8px 0;
  color: #252844;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -1.8px;
}

.vip-entry-head h3 span,
.vip-levels-head h3 span,
.vip-experience-head h3 span,
.vip-cashback-preview h3 span {
  color: var(--primary);
}

.vip-entry-head p,
.vip-levels-head p,
.vip-experience-head > p,
.vip-cashback-preview p {
  max-width: 930px;
  color: #70748a;
  font-size: 12px;
  line-height: 1.68;
}
/* VIP Panels End */


/* VIP Entry Start */
.vip-entry-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.vip-entry-tab {
  padding: 18px;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 18px;
  background: #f6f5fa;
  text-align: left;
  cursor: pointer;
  transition: 0.23s ease;
}

.vip-entry-tab:hover {
  transform: translateY(-3px);
}

.vip-entry-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #695ada, #9080f1);
  box-shadow: 0 13px 29px rgba(82, 64, 190, 0.2);
}

.vip-entry-tab small {
  display: block;
  color: #9396aa;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-entry-tab strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--primary);
  font-size: 22px;
}

.vip-entry-tab span {
  color: #74788d;
  font-size: 9px;
}

.vip-entry-tab.active small,
.vip-entry-tab.active span {
  color: rgba(255, 255, 255, 0.7);
}

.vip-entry-tab.active strong {
  color: #ffffff;
}

.vip-entry-detail {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding: 19px;
  border-radius: 19px;
  background: #252846;
}

.vip-entry-detail > div {
  padding: 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
}

.vip-entry-detail small {
  display: block;
  margin-bottom: 5px;
  color: #9ea2ba;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-entry-detail h4,
.vip-entry-detail strong {
  color: #ffffff;
}

.vip-entry-detail h4 {
  margin-bottom: 5px;
  font-size: 18px;
}

.vip-entry-detail strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.vip-entry-detail p {
  color: #bec2d3;
  font-size: 10px;
  line-height: 1.6;
}
/* VIP Entry End */


/* VIP Levels Start */
.vip-level-tabs {
  display: flex;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 22px;
  padding: 6px;
  border-radius: 28px;
  background: #f0eef8;
}

.vip-level-tab {
  flex-shrink: 0;
  padding: 11px 19px;
  border: 0;
  border-radius: 23px;
  background: transparent;
  color: #777b90;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.vip-level-tab.active {
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(92, 73, 207, 0.2);
}

.vip-level-display {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 9px;
  margin-top: 13px;
}

.vip-level-main {
  padding: 25px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 94% 5%, rgba(141, 116, 242, 0.28), transparent 27%),
    #252846;
}

.vip-level-main > span {
  color: #c3b9ff;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-level-main h4 {
  margin: 5px 0 8px;
  color: #ffffff;
  font-size: 29px;
}

.vip-level-main > p {
  color: #bdc1d3;
  font-size: 11px;
  line-height: 1.65;
}

.vip-level-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 21px;
}

.vip-level-numbers div {
  padding: 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.vip-level-numbers small {
  display: block;
  color: #9ea2b9;
  font-size: 8px;
  text-transform: uppercase;
}

.vip-level-numbers strong {
  display: block;
  margin: 5px 0 2px;
  color: #efc486;
  font-size: 22px;
}

.vip-level-numbers span {
  color: #adb1c5;
  font-size: 8px;
}

.vip-level-side {
  display: grid;
  gap: 8px;
}

.vip-level-side > div {
  padding: 18px;
  border-radius: 17px;
  background: #f6f5fa;
}

.vip-level-side small {
  display: block;
  color: #9699ac;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-level-side strong {
  display: block;
  margin: 5px 0;
  color: #30334f;
  font-size: 13px;
}

.vip-level-side p {
  color: #73778d;
  font-size: 10px;
  line-height: 1.6;
}
/* VIP Levels End */


/* VIP Experience Start */
.vip-experience-head {
  display: grid;
  grid-template-columns: 1fr 0.42fr;
  gap: 40px;
  align-items: end;
}

.vip-experience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.vip-experience-card {
  padding: 20px;
  border-radius: 18px;
  background: #f6f5fa;
}

.vip-experience-card small {
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-experience-card h4 {
  margin: 5px 0 7px;
  color: #30334f;
  font-size: 14px;
}

.vip-experience-card p {
  color: #73778d;
  font-size: 10px;
  line-height: 1.6;
}

.vip-experience-icon {
  position: relative;
  display: block;
  width: 43px;
  height: 43px;
  margin-bottom: 15px;
  border-radius: 13px;
  background: #eae6fb;
}

.vip-experience-icon::before,
.vip-experience-icon::after {
  content: "";
  position: absolute;
}

.manager-icon::before {
  top: 9px;
  left: 13px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--primary);
  border-radius: 50%;
}

.manager-icon::after {
  left: 10px;
  bottom: 7px;
  width: 23px;
  height: 11px;
  border: 2px solid var(--primary);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}

.withdrawal-icon::before {
  top: 10px;
  left: 9px;
  width: 25px;
  height: 19px;
  border: 2px solid var(--primary);
  border-radius: 5px;
}

.withdrawal-icon::after {
  top: 18px;
  right: 6px;
  width: 10px;
  height: 3px;
  background: var(--accent);
}

.offer-icon::before {
  inset: 10px;
  border: 2px solid var(--primary);
  border-radius: 4px;
}

.offer-icon::after {
  top: 19px;
  left: 13px;
  width: 17px;
  height: 4px;
  background: var(--accent);
}

.event-icon::before {
  left: 9px;
  bottom: 9px;
  width: 24px;
  height: 17px;
  border-radius: 4px;
  background: var(--primary);
}

.event-icon::after {
  top: 8px;
  left: 19px;
  width: 5px;
  height: 26px;
  background: var(--accent);
}
/* VIP Experience End */


/* VIP Cashback Start */
.vip-cashback-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: center;
}

.vip-cashback-toggle {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 0;
  border-radius: 24px;
  background: #282b4b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.vip-cashback-toggle i {
  position: relative;
  width: 17px;
  height: 17px;
}

.vip-cashback-toggle i::before,
.vip-cashback-toggle i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 2px;
  width: 13px;
  height: 2px;
  border-radius: 10px;
  background: #efbd72;
  transition: 0.24s ease;
}

.vip-cashback-toggle i::after {
  transform: rotate(90deg);
}

.vip-cashback-toggle.active i::after {
  transform: rotate(0);
}

.vip-cashback-content[hidden] {
  display: none;
}

.vip-cashback-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 20px;
}

.vip-cashback-rule {
  padding: 19px;
  border-radius: 17px;
  background: #f6f4fa;
}

.vip-cashback-rule small {
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.vip-cashback-rule h4 {
  margin: 5px 0 7px;
  color: #333650;
  font-size: 14px;
}

.vip-cashback-rule p {
  color: #72768b;
  font-size: 10px;
  line-height: 1.65;
}
/* VIP Cashback End */


/* VIP Closing Start */
.vip-closing {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 45px;
  align-items: center;
  margin-top: 25px;
  padding: 27px 30px;
  border-radius: 23px;
  background: linear-gradient(110deg, #ebe7ff, #fff6e8);
}

.vip-closing h3 {
  max-width: 650px;
  margin-top: 7px;
  color: #292c48;
  font-size: 29px;
  line-height: 1.07;
  letter-spacing: -1.2px;
}

.vip-closing > p {
  color: #6e7287;
  font-size: 12px;
  line-height: 1.7;
}
/* VIP Closing End */


/* VIP Responsive Start */
@media (max-width: 1000px) {
  .vip-maximum,
  .vip-level-display {
    grid-template-columns: 1fr;
  }

  .vip-experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vip-cashback-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .vip-section {
    padding: 72px 20px 82px;
  }

  .vip-intro,
  .vip-experience-head,
  .vip-cashback-preview,
  .vip-closing {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vip-entry-detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .vip-section {
    padding: 62px 15px 72px;
  }

  .vip-intro-title h2 {
    font-size: 45px;
    letter-spacing: -2.5px;
  }

  .vip-lead {
    font-size: 15px;
  }

  .vip-maximum,
  .vip-entry,
  .vip-levels,
  .vip-experience,
  .vip-cashback {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .vip-maximum-grid,
  .vip-entry-tabs,
  .vip-level-numbers,
  .vip-experience-grid,
  .vip-cashback-content {
    grid-template-columns: 1fr;
  }

  .vip-level-tabs {
    width: 100%;
  }

  .vip-cashback-toggle {
    justify-content: space-between;
    width: 100%;
  }

  .vip-closing {
    padding: 22px 19px;
  }
}
/* VIP Responsive End */
/* VIP End */
/* Account Security Start */
.security-section {
  position: relative;
  overflow: hidden;
  padding: 86px 30px 92px;
  background:
    radial-gradient(circle at 10% 8%, rgba(111, 137, 196, 0.16), transparent 24%),
    radial-gradient(circle at 92% 78%, rgba(143, 126, 225, 0.12), transparent 20%),
    linear-gradient(180deg, #eef2f7 0%, #e8edf4 100%);
  color: #273046;
}

.security-container {
  width: min(100%, 1400px);
  margin: 0 auto;
}

.security-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #52648d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.security-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: var(--accent);
}


/* Security Intro Start */
.security-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 29px;
}

.security-intro-title h2 {
  max-width: 720px;
  margin-top: 15px;
  color: #242c40;
  font-size: clamp(46px, 4.9vw, 72px);
  line-height: 0.97;
  letter-spacing: -4px;
}

.security-intro-title h2 span {
  display: block;
  color: #5f6fc2;
}

.security-lead {
  color: #525c70;
  font-size: 17px;
  line-height: 1.72;
}

.security-text {
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(71, 84, 117, 0.12);
  color: #70798c;
  font-size: 13px;
  line-height: 1.72;
}
/* Security Intro End */


/* Security Panels Start */
.security-essentials,
.security-verification,
.security-data,
.security-details {
  margin-top: 25px;
  padding: 30px;
  border: 1px solid rgba(64, 82, 120, 0.1);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 42px rgba(45, 58, 87, 0.055);
}

.security-essentials-head,
.security-data-head {
  display: grid;
  grid-template-columns: 1fr 0.42fr;
  gap: 40px;
  align-items: end;
}

.security-essentials-head h3,
.security-verification-head h3,
.security-data-head h3,
.security-details-preview h3 {
  max-width: 860px;
  margin: 8px 0;
  color: #283147;
  font-size: clamp(29px, 3.1vw, 43px);
  line-height: 1.04;
  letter-spacing: -1.7px;
}

.security-essentials-head h3 span,
.security-verification-head h3 span,
.security-data-head h3 span,
.security-details-preview h3 span {
  color: #6474c6;
}

.security-essentials-head > p,
.security-data-head > p {
  color: #6d7689;
  font-size: 12px;
  line-height: 1.67;
}
/* Security Panels End */


/* Security Essentials Start */
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 22px;
}

.security-card {
  padding: 20px;
  border: 1px solid rgba(68, 84, 119, 0.08);
  border-radius: 18px;
  background: rgba(247, 249, 252, 0.9);
}

.security-card small {
  color: #6272bd;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.security-card h4 {
  margin: 5px 0 7px;
  color: #313a50;
  font-size: 14px;
}

.security-card p {
  color: #6f788b;
  font-size: 10px;
  line-height: 1.62;
}

.security-icon {
  position: relative;
  display: block;
  width: 43px;
  height: 43px;
  margin-bottom: 15px;
  border-radius: 13px;
  background: #e4e9f5;
}

.security-icon::before,
.security-icon::after {
  content: "";
  position: absolute;
}

.identity-icon::before {
  top: 9px;
  left: 13px;
  width: 17px;
  height: 17px;
  border: 2px solid #6070bd;
  border-radius: 50%;
}

.identity-icon::after {
  left: 10px;
  bottom: 7px;
  width: 23px;
  height: 11px;
  border: 2px solid #6070bd;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
}

.account-icon::before {
  inset: 10px;
  border: 2px solid #6070bd;
  border-radius: 6px;
}

.account-icon::after {
  top: 18px;
  left: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.password-icon::before {
  left: 12px;
  bottom: 9px;
  width: 19px;
  height: 18px;
  border: 2px solid #6070bd;
  border-radius: 5px;
}

.password-icon::after {
  top: 8px;
  left: 16px;
  width: 11px;
  height: 12px;
  border: 2px solid #6070bd;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.payment-icon::before {
  top: 11px;
  left: 8px;
  width: 27px;
  height: 20px;
  border: 2px solid #6070bd;
  border-radius: 5px;
}

.payment-icon::after {
  top: 18px;
  left: 10px;
  width: 23px;
  height: 3px;
  background: var(--accent);
}

.verify-icon::before {
  inset: 9px;
  border: 2px solid #6070bd;
  border-radius: 50%;
}

.verify-icon::after {
  top: 18px;
  left: 15px;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.monitor-icon::before {
  inset: 10px;
  border: 2px solid #6070bd;
  border-radius: 50%;
}

.monitor-icon::after {
  top: 16px;
  left: 20px;
  width: 2px;
  height: 10px;
  background: var(--accent);
  transform-origin: bottom;
  transform: rotate(-35deg);
}
/* Security Essentials End */


/* Security Verification Start */
.security-verification-head {
  display: grid;
  grid-template-columns: 1fr 0.34fr;
  gap: 40px;
  align-items: end;
}

.security-verification-head p {
  max-width: 900px;
  color: #6e778a;
  font-size: 12px;
  line-height: 1.68;
}

.security-verification-note {
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 15px 15px 0;
  background: #edf0f6;
}

.security-verification-note small {
  display: block;
  margin-bottom: 4px;
  color: #8c95a7;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.security-verification-note strong {
  color: #454e62;
  font-size: 11px;
  line-height: 1.5;
}

.security-document-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
}

.security-document-tab {
  padding: 11px 18px;
  border: 1px solid rgba(75, 88, 122, 0.09);
  border-radius: 22px;
  background: #eef1f6;
  color: #70798d;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.security-document-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #5969b8, #7888d6);
  color: #ffffff;
  box-shadow: 0 8px 21px rgba(74, 91, 164, 0.2);
}

.security-document-detail {
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 1fr;
  gap: 8px;
  margin-top: 11px;
  padding: 19px;
  border-radius: 19px;
  background: #293247;
}

.security-document-detail > div {
  padding: 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
}

.security-document-detail small {
  display: block;
  margin-bottom: 5px;
  color: #a6aec0;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.security-document-detail h4,
.security-document-detail strong {
  color: #ffffff;
}

.security-document-detail h4 {
  margin-bottom: 5px;
  font-size: 18px;
}

.security-document-detail strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}

.security-document-detail p {
  color: #c1c6d3;
  font-size: 10px;
  line-height: 1.6;
}
/* Security Verification End */


/* Security Withdrawal Start */
.security-withdrawal {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 20px;
  margin-top: 25px;
  padding: 28px;
  border-radius: 25px;
  background:
    radial-gradient(circle at 90% 5%, rgba(130, 147, 213, 0.18), transparent 28%),
    #293247;
}

.security-withdrawal-copy h3 {
  max-width: 600px;
  margin: 8px 0 9px;
  color: #ffffff;
  font-size: 31px;
  line-height: 1.06;
}

.security-withdrawal-copy h3 span {
  color: #acb9ef;
}

.security-withdrawal-copy p {
  color: #c0c5d2;
  font-size: 11px;
  line-height: 1.66;
}

.security-withdrawal .security-label {
  color: #b7c2ef;
}

.security-withdrawal-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.security-withdrawal-steps div {
  padding: 17px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.055);
}

.security-withdrawal-steps small {
  display: block;
  color: #9fa7bb;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.security-withdrawal-steps strong {
  display: block;
  margin: 5px 0;
  color: #ffffff;
  font-size: 12px;
}

.security-withdrawal-steps span {
  color: #bbc1cf;
  font-size: 9px;
  line-height: 1.55;
}
/* Security Withdrawal End */


/* Security Data Start */
.security-data-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 22px;
}

.security-data-grid > div {
  padding: 18px;
  border-radius: 17px;
  background: #f0f3f7;
}

.security-data-grid small {
  color: #6574bd;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.security-data-grid strong {
  display: block;
  min-height: 48px;
  margin: 5px 0;
  color: #343d52;
  font-size: 11px;
  line-height: 1.45;
}

.security-data-grid p {
  color: #727b8d;
  font-size: 9px;
  line-height: 1.55;
}
/* Security Data End */


/* Security Details Start */
.security-details-preview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: center;
}

.security-details-preview p {
  max-width: 850px;
  color: #70798c;
  font-size: 11px;
  line-height: 1.65;
}

.security-details-toggle {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 0;
  border-radius: 24px;
  background: #293247;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.security-details-toggle i {
  position: relative;
  width: 17px;
  height: 17px;
}

.security-details-toggle i::before,
.security-details-toggle i::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 2px;
  width: 13px;
  height: 2px;
  border-radius: 10px;
  background: var(--accent);
  transition: 0.24s ease;
}

.security-details-toggle i::after {
  transform: rotate(90deg);
}

.security-details-toggle.active i::after {
  transform: rotate(0);
}

.security-details-content[hidden] {
  display: none;
}

.security-details-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 19px;
}

.security-detail-rule {
  padding: 18px;
  border-radius: 17px;
  background: #eff2f7;
}

.security-detail-rule small {
  color: #6171ba;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.security-detail-rule h4 {
  margin: 5px 0 7px;
  color: #343d52;
  font-size: 13px;
}

.security-detail-rule p {
  color: #717a8c;
  font-size: 10px;
  line-height: 1.63;
}
/* Security Details End */


/* Security Closing Start */
.security-closing {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 45px;
  align-items: center;
  margin-top: 24px;
  padding: 26px 29px;
  border-radius: 23px;
  background:
    linear-gradient(110deg, #dde4f2, #eee9f7);
}

.security-closing h3 {
  max-width: 620px;
  margin-top: 7px;
  color: #2d364b;
  font-size: 28px;
  line-height: 1.07;
  letter-spacing: -1px;
}

.security-closing > p {
  color: #697386;
  font-size: 12px;
  line-height: 1.7;
}
/* Security Closing End */


/* Security Responsive Start */
@media (max-width: 1050px) {
  .security-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .security-data-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .security-withdrawal {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .security-section {
    padding: 70px 20px 80px;
  }

  .security-intro,
  .security-essentials-head,
  .security-verification-head,
  .security-data-head,
  .security-details-preview,
  .security-closing {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .security-document-detail {
    grid-template-columns: 1fr;
  }

  .security-withdrawal-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .security-section {
    padding: 60px 15px 70px;
  }

  .security-intro-title h2 {
    font-size: 44px;
    letter-spacing: -2.5px;
  }

  .security-lead {
    font-size: 15px;
  }

  .security-essentials,
  .security-verification,
  .security-data,
  .security-details,
  .security-withdrawal {
    padding: 22px 18px;
    border-radius: 22px;
  }

  .security-grid,
  .security-data-grid,
  .security-details-content {
    grid-template-columns: 1fr;
  }

  .security-document-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .security-details-toggle {
    justify-content: space-between;
    width: 100%;
  }

  .security-closing {
    padding: 22px 19px;
  }
}
/* Security Responsive End */
/* Account Security End */
/* VIP Image Fix Start */
.vip-maximum {
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.52fr);
  align-items: stretch;
}

.vip-maximum-visual {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
}

.vip-maximum-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(37, 40, 70, 0.28) 0%,
      rgba(37, 40, 70, 0) 34%
    ),
    linear-gradient(
      0deg,
      rgba(18, 20, 46, 0.2) 0%,
      rgba(18, 20, 46, 0) 35%
    );
}

.vip-maximum-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: center;
}

.vip-maximum-grid,
.vip-fact-detail {
  grid-column: 1 / -1;
}

@media (max-width: 1000px) {
  .vip-maximum {
    grid-template-columns: 1fr;
  }

  .vip-maximum-visual {
    min-height: 300px;
  }

  .vip-maximum-visual img {
    min-height: 300px;
  }
}

@media (max-width: 680px) {
  .vip-maximum-visual {
    min-height: 240px;
    border-radius: 18px;
  }

  .vip-maximum-visual img {
    min-height: 240px;
  }
}
/* VIP Image Fix End */
/* VIP Maximum Compact Layout Fix Start */
.vip-maximum {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  grid-template-areas:
    "vip-main vip-visual"
    "vip-facts vip-visual"
    "vip-detail vip-visual";
  gap: 12px;
  align-items: stretch;
}

.vip-maximum-main {
  grid-area: vip-main;
  padding: 8px 14px 8px 2px;
}

.vip-maximum-visual {
  grid-area: vip-visual;
  position: relative;
  overflow: hidden;
  min-height: 0;
  height: 100%;
  border-radius: 22px;
}

.vip-maximum-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}


/* Compact VIP Facts */
.vip-maximum-grid {
  grid-area: vip-facts;
  grid-column: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vip-fact {
  min-height: 92px;
  padding: 14px 16px;
}

.vip-fact small {
  margin-bottom: 3px;
}

.vip-fact strong {
  margin: 3px 0 2px;
  font-size: 18px;
}

.vip-fact span {
  display: block;
  font-size: 8px;
  line-height: 1.35;
}


/* Compact Description */
.vip-fact-detail {
  grid-area: vip-detail;
  grid-column: auto;
  padding: 15px 17px;
  min-height: 0;
}

.vip-fact-detail small {
  margin-bottom: 2px;
}

.vip-fact-detail h3 {
  margin: 3px 0 4px;
  font-size: 15px;
}

.vip-fact-detail p {
  max-width: none;
  font-size: 9px;
  line-height: 1.55;
}


/* Reduce Empty Space in Main VIP Copy */
.vip-maximum-value {
  margin: 25px 0 17px;
}

.vip-maximum-main > p {
  max-width: 650px;
}


/* Tablet */
@media (max-width: 1050px) {
  .vip-maximum {
    grid-template-columns: 1fr 0.85fr;
  }
}


/* Mobile */
@media (max-width: 900px) {
  .vip-maximum {
    grid-template-columns: 1fr;
    grid-template-areas:
      "vip-main"
      "vip-visual"
      "vip-facts"
      "vip-detail";
  }

  .vip-maximum-visual {
    height: auto;
    min-height: 280px;
  }

  .vip-maximum-visual img {
    height: 280px;
  }
}

@media (max-width: 600px) {
  .vip-maximum-grid {
    grid-template-columns: 1fr;
  }

  .vip-maximum-visual,
  .vip-maximum-visual img {
    min-height: 230px;
    height: 230px;
  }
}
/* VIP Maximum Compact Layout Fix End */
/* FAQ Start */
.faq-section {
  position: relative;
  overflow: hidden;
  padding: 86px 30px 92px;
  background:
    radial-gradient(circle at 8% 12%, rgba(117, 103, 237, 0.09), transparent 23%),
    radial-gradient(circle at 92% 82%, rgba(239, 189, 114, 0.1), transparent 20%),
    linear-gradient(180deg, #fbfaf8 0%, #f5f3f8 100%);
  color: #292c49;
}

.faq-container {
  width: min(100%, 1400px);
  margin: 0 auto;
}

.faq-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.faq-label::before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 20px;
  background: var(--accent);
}


/* FAQ Intro Start */
.faq-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 30px;
}

.faq-intro h2 {
  max-width: 730px;
  margin-top: 15px;
  color: #222542;
  font-size: clamp(46px, 4.9vw, 72px);
  line-height: 0.97;
  letter-spacing: -4px;
}

.faq-intro h2 span {
  display: block;
  color: var(--primary);
}

.faq-lead {
  color: #555a72;
  font-size: 17px;
  line-height: 1.72;
}

.faq-text {
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid rgba(76, 67, 145, 0.1);
  color: #74788e;
  font-size: 13px;
  line-height: 1.72;
}
/* FAQ Intro End */


/* FAQ Grid Start */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.faq-column {
  display: grid;
  gap: 10px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid rgba(76, 67, 145, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 27px rgba(53, 48, 101, 0.045);
}

.faq-question {
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 78px;
  padding: 19px 20px;
  border: 0;
  background: transparent;
  color: #30334f;
  text-align: left;
  cursor: pointer;
}

.faq-question > span {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.faq-question i {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #efecfa;
}

.faq-question i::before,
.faq-question i::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 9px;
  width: 14px;
  height: 2px;
  border-radius: 20px;
  background: var(--primary);
  transition: transform 0.24s ease;
}

.faq-question i::after {
  transform: rotate(90deg);
}

.faq-item.active .faq-question i::after {
  transform: rotate(0);
}

.faq-item.active .faq-question {
  color: var(--primary-dark);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.28s ease,
    opacity 0.22s ease;
  opacity: 0;
}

.faq-answer > p {
  overflow: hidden;
  margin: 0;
  padding: 0 20px;
  color: #70748a;
  font-size: 11px;
  line-height: 1.7;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-item.active .faq-answer > p {
  padding-bottom: 20px;
}
/* FAQ Grid End */


/* FAQ Closing Start */
.faq-closing {
  margin-top: 25px;
  padding: 27px 30px;
  border-radius: 23px;
  background:
    linear-gradient(110deg, #ece8ff, #fff7e9);
}

.faq-closing h3 {
  max-width: 820px;
  margin: 7px 0 9px;
  color: #292c49;
  font-size: 29px;
  line-height: 1.07;
  letter-spacing: -1.2px;
}

.faq-closing h3 span {
  color: var(--primary);
}

.faq-closing p {
  max-width: 1100px;
  color: #6e7287;
  font-size: 12px;
  line-height: 1.7;
}
/* FAQ Closing End */


/* FAQ Responsive Start */
@media (max-width: 900px) {
  .faq-section {
    padding: 70px 20px 80px;
  }

  .faq-intro {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .faq-section {
    padding: 60px 15px 70px;
  }

  .faq-intro h2 {
    font-size: 44px;
    letter-spacing: -2.5px;
  }

  .faq-lead {
    font-size: 15px;
  }

  .faq-question {
    min-height: 72px;
    padding: 17px;
  }

  .faq-question > span {
    font-size: 12px;
  }

  .faq-answer > p {
    padding-left: 17px;
    padding-right: 17px;
  }

  .faq-closing {
    padding: 22px 19px;
  }
}
/* FAQ Responsive End */
/* FAQ End */
/* Footer Start */
.footer {
  padding: 42px 30px 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(118, 100, 229, 0.14), transparent 28%),
    #1f223d;
  color: #ffffff;
}

.footer-container {
  width: min(100%, 1400px);
  margin: 0 auto;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.15fr 1.1fr 0.75fr;
  gap: 48px;
  align-items: start;
}

.footer-brand {
  max-width: 420px;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  text-decoration: none;
}

.footer-logo .logo-name {
  font-size: 17px;
  font-weight: 800;
}

.footer-brand p {
  margin-top: 14px;
  color: #b6b9cb;
  font-size: 11px;
  line-height: 1.7;
}

.footer-title {
  display: block;
  margin-bottom: 13px;
  color: #efc47e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.footer-nav nav {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 9px 22px;
}

.footer-legal nav {
  display: grid;
  gap: 9px;
}

.footer-nav a,
.footer-legal a {
  color: #c7cada;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-nav a:hover,
.footer-legal a:hover {
  color: #ffffff;
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p,
.footer-bottom a {
  color: #898ea6;
  font-size: 9px;
  line-height: 1.5;
}

.footer-bottom a {
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #ffffff;
}


/* Footer Responsive Start */
@media (max-width: 900px) {
  .footer {
    padding: 38px 20px 20px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .footer {
    padding: 34px 15px 18px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 27px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-nav nav {
    grid-template-columns: repeat(2, max-content);
  }

  .footer-bottom {
    flex-direction: column;
    gap: 7px;
  }
}
/* Footer Responsive End */
/* Footer End */
/* ==================== Global Readability Fix (Start) ==================== */

/* Base text */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* Never use microscopic helper text */
small {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Regular paragraph text inside content blocks */
[class*="-card"] p,
[class*="-detail"] p,
[class*="-rule"] p,
[class*="-content"] p,
[class*="-copy"] p,
[class*="-closing"] p,
[class*="-description"] p,
[class*="-text"],
.faq-answer p {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Text inside cards and interface elements */
[class*="-card"] span,
[class*="-detail"] span,
[class*="-tab"] span,
[class*="-steps"] span,
[class*="-grid"] span {
  font-size: max(12px, 0.78rem);
  line-height: 1.45;
}

/* Buttons and navigation */
button,
.navbar a,
.mobile-navbar a,
.footer a {
  font-size: 13px;
}

/* Section labels */
[class*="-label"],
[class*="-kicker"],
[class*="-title"]:not(h1):not(h2):not(h3):not(h4) {
  font-size: 12px !important;
}


/* Footer Readability */
.footer {
  font-size: 14px;
}

.footer-logo .logo-name {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
}

.footer-brand p {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.footer-title {
  margin-bottom: 14px;
  font-size: 12px !important;
  letter-spacing: 1.2px;
}

.footer-nav a,
.footer-legal a {
  font-size: 13px !important;
  line-height: 1.5;
}

.footer-bottom p,
.footer-bottom a {
  font-size: 12px !important;
  line-height: 1.5;
}


/* Keep compact informational text readable */
.vip-fact span,
.vip-level-numbers span,
.lottery-highlight-card span,
.tournament-highlight-card span,
.security-data-grid p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}


/* Mobile readability */
@media (max-width: 680px) {
  body {
    font-size: 15px;
  }

  [class*="-card"] p,
  [class*="-detail"] p,
  [class*="-rule"] p,
  [class*="-content"] p,
  [class*="-closing"] p,
  .faq-answer p {
    font-size: 14px !important;
  }

  .footer-brand p,
  .footer-nav a,
  .footer-legal a {
    font-size: 13px !important;
  }
}

/* ==================== Global Readability Fix (End) ==================== */
/* ==================== Legal Pages Area (Start) ==================== */

.legal-page {
  position: relative;
  min-height: 100vh;
  padding-top: 150px;
  padding-bottom: 80px;
  background:
    radial-gradient(circle at 10% 8%, rgba(116, 100, 230, 0.1), transparent 25%),
    radial-gradient(circle at 92% 70%, rgba(239, 189, 114, 0.1), transparent 22%),
    linear-gradient(180deg, #f8f7fb 0%, #f2f0f7 100%);
  color: #292c49;
}

.legal-container {
  width: min(100% - 60px, 1180px);
  margin: 0 auto;
}


/* Legal Hero Start */
.legal-hero {
  position: relative;
  padding: 55px 0 48px;
}

.legal-hero .legal-container {
  position: relative;
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.legal-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 20px;
  background: var(--accent);
}

.legal-hero h1 {
  max-width: 900px;
  margin: 0;
  color: #222542;
  font-size: clamp(52px, 6vw, 82px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -4px;
}

.legal-intro {
  max-width: 920px;
  margin-top: 25px;
  color: #5d6279;
  font-size: 18px;
  line-height: 1.75;
}
/* Legal Hero End */


/* Legal Content Start */
.legal-content {
  display: grid;
  gap: 16px;
}

.legal-section {
  position: relative;
  padding: 28px 30px;
  border: 1px solid rgba(77, 67, 145, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 12px 32px rgba(54, 48, 101, 0.045);
}

.legal-section::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 0;
  width: 3px;
  height: 34px;
  border-radius: 0 3px 3px 0;
  background:
    linear-gradient(
      180deg,
      var(--primary),
      var(--accent)
    );
}

.legal-section h2 {
  margin: 0 0 12px;
  color: #2c2f4b;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.4px;
}

.legal-section p {
  margin: 0;
  color: #656a80;
  font-size: 15px !important;
  line-height: 1.78 !important;
}

.legal-section strong {
  color: #343751;
  font-weight: 800;
}

.legal-section a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.legal-section a:hover {
  text-decoration: underline;
}
/* Legal Content End */


/* Visual Rhythm Start */
.legal-section:nth-child(4n + 1) {
  background:
    linear-gradient(
      135deg,
      rgba(248, 247, 253, 0.96),
      rgba(255, 255, 255, 0.96)
    );
}

.legal-section:nth-child(4n + 2) {
  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 242, 0.95),
      rgba(255, 255, 255, 0.96)
    );
}

.legal-section:nth-child(4n + 3) {
  background:
    linear-gradient(
      135deg,
      rgba(245, 246, 253, 0.96),
      rgba(255, 255, 255, 0.96)
    );
}
/* Visual Rhythm End */


/* Legal Footer Separation Start */
.legal-page + .footer {
  margin-top: 0;
}

.legal-page + .footer .footer-container {
  position: relative;
}
/* Legal Footer Separation End */


/* Legal Responsive Start */
@media (max-width: 1100px) {
  .legal-page {
    padding-top: 135px;
  }

  .legal-container {
    width: min(100% - 40px, 1040px);
  }

  .legal-hero {
    padding: 45px 0 40px;
  }

  .legal-hero h1 {
    font-size: clamp(48px, 7vw, 70px);
  }
}


@media (max-width: 768px) {
  .legal-page {
    padding-top: 115px;
    padding-bottom: 60px;
  }

  .legal-container {
    width: min(100% - 30px, 720px);
  }

  .legal-hero {
    padding: 35px 0 32px;
  }

  .legal-eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
  }

  .legal-hero h1 {
    font-size: 46px;
    line-height: 1;
    letter-spacing: -2.5px;
  }

  .legal-intro {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.7;
  }

  .legal-content {
    gap: 12px;
  }

  .legal-section {
    padding: 23px 22px;
    border-radius: 18px;
  }

  .legal-section::before {
    top: 24px;
    height: 30px;
  }

  .legal-section h2 {
    font-size: 19px;
  }

  .legal-section p {
    font-size: 15px !important;
    line-height: 1.72 !important;
  }
}


@media (max-width: 480px) {
  .legal-page {
    padding-top: 105px;
    padding-bottom: 50px;
  }

  .legal-container {
    width: calc(100% - 24px);
  }

  .legal-hero {
    padding: 28px 0;
  }

  .legal-hero h1 {
    font-size: 39px;
    letter-spacing: -2px;
  }

  .legal-intro {
    font-size: 15px;
  }

  .legal-section {
    padding: 21px 18px;
  }

  .legal-section h2 {
    font-size: 18px;
  }

  .legal-section p {
    font-size: 14px !important;
  }
}
/* Legal Responsive End */

/* ==================== Legal Pages Area (End) ==================== */