@import "tailwindcss";
:root {
  --navy: #06192e;
  --ice: #b9ecff;
  --cyan: #5bc7ee;
  --gold: #f2c76e;
  --muted: #98b4c8;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: #f4fbff;
  background: #06192e;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
.shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}
.nav {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  z-index: 20;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.brand img {
  width: 188px;
  height: 52px;
  object-fit: cover;
  object-position: left center;
  filter: brightness(1.1);
  mix-blend-mode: screen;
}
.navLinks {
  display: flex;
  gap: 34px;
  color: #b9cad7;
  font-size: 14px;
}
.navLinks a:hover {
  color: white;
}
.navCta,
.primary {
  background: linear-gradient(135deg, #bceeff, #55c7f2);
  color: #062039;
  font-weight: 800;
  box-shadow: 0 10px 32px #45bce733;
}
.navCta {
  padding: 12px 21px;
  border-radius: 12px;
  font-size: 14px;
}
.hero {
  min-height: 810px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 35%, #154d7199 0, transparent 28%),
    linear-gradient(140deg, #06182d 0%, #092845 58%, #071a30 100%);
  border-bottom: 1px solid #69cfee22;
}
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#79d6f208 1px, transparent 1px),
    linear-gradient(90deg, #79d6f208 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.heroGlow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  right: 8%;
  top: 120px;
  background: #5bc7ee12;
  filter: blur(20px);
  border: 1px solid #89def244;
  box-shadow: 0 0 130px #2ca9e044 inset;
}
.heroGrid {
  min-height: 750px;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  padding-top: 90px;
  position: relative;
  z-index: 2;
}
.eyebrow {
  color: #82d9f5;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow span {
  width: 28px;
  height: 1px;
  background: #65d1f3;
  box-shadow: 0 0 10px #65d1f3;
}
h1 {
  font-size: 74px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 22px 0;
}
h1 em {
  color: var(--ice);
  font-style: normal;
  text-shadow: 0 0 38px #55c7f244;
}
.lead {
  max-width: 575px;
  color: #abc1d0;
  font-size: 17px;
  line-height: 1.9;
}
.heroActions {
  display: flex;
  gap: 14px;
  margin: 34px 0 44px;
}
.primary,
.secondary {
  padding: 16px 23px;
  border-radius: 13px;
  font-size: 15px;
}
.primary b {
  margin-left: 22px;
}
.secondary {
  border: 1px solid #80cce744;
  background: #c6edff0b;
}
.heroStats {
  display: flex;
}
.heroStats div {
  padding: 0 30px;
  border-left: 1px solid #8ddcf22b;
  display: flex;
  flex-direction: column;
}
.heroStats div:first-child {
  padding-left: 0;
  border: 0;
}
.heroStats strong {
  font-size: 24px;
  color: #f5d384;
}
.heroStats span {
  color: #829eb1;
  font-size: 12px;
  margin-top: 5px;
}
.heroVisual {
  height: 560px;
  position: relative;
}
.orbit {
  position: absolute;
  border: 1px solid #7ad8f338;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.orbitOne {
  width: 430px;
  height: 430px;
  box-shadow: 0 0 70px #42bde522 inset;
}
.orbitTwo {
  width: 350px;
  height: 350px;
  border-style: dashed;
}
.logoPlate {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #b8efff0a;
  border: 1px solid #b8efff44;
  box-shadow:
    0 30px 80px #0009,
    0 0 60px #54c8ef22 inset;
}
.logoPlate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.floatCard {
  position: absolute;
  padding: 14px 17px;
  border: 1px solid #a6e8ff55;
  border-radius: 15px;
  background: #0c2c48dd;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px #00101d99;
  min-width: 130px;
}
.floatCard span,
.floatCard small {
  display: block;
  color: #8eacbe;
  font-size: 11px;
}
.floatCard strong {
  display: block;
  color: #f4d283;
  font-size: 32px;
  margin: 5px 0 1px;
}
.cardA {
  left: 1%;
  top: 25%;
  transform: rotate(-5deg);
}
.cardB {
  right: -2%;
  bottom: 19%;
  transform: rotate(4deg);
}
.pokerCard {
  width: 82px;
  height: 116px;
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(150deg, #f9fdff, #cfeefa);
  color: #0c4265;
  padding: 10px;
  font-weight: 900;
  font-size: 21px;
  box-shadow: 0 18px 40px #0008;
  transform: rotate(14deg);
  right: 8%;
  top: 19%;
}
.pokerCard span {
  display: block;
  font-size: 30px;
}
.pokerCard.heart {
  right: 1%;
  top: 25%;
  color: #d84d55;
  transform: rotate(25deg);
}
.trustBar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  position: relative;
  z-index: 3;
  color: #8eaabd;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-top: 1px solid #86d9f522;
}
.trustBar i {
  width: 4px;
  height: 4px;
  background: #63c9f2;
  border-radius: 50%;
  box-shadow: 0 0 9px #63c9f2;
}
.promotions {
  padding: 100px 0 110px;
}
.sectionHead {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 40px;
}
h2 {
  font-size: 42px;
  margin: 12px 0 0;
  letter-spacing: -0.03em;
}
.sectionHead > p {
  color: #8da8ba;
  line-height: 1.8;
  font-size: 14px;
}
.promoGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.featuredPromo {
  grid-column: span 4;
  min-height: 260px;
  border-radius: 26px;
  padding: 38px 42px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 30px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 0, #54caf044, transparent 34%),
    linear-gradient(120deg, #0e385c, #0b2946);
  border: 1px solid #78d6f04d;
  box-shadow: 0 30px 80px #00101f77;
}
.featuredPromo:after {
  content: "QQ";
  position: absolute;
  right: 23%;
  font: 900 210px/1 Arial;
  color: #b8edff08;
  letter-spacing: -40px;
}
.featuredPromo h3 {
  font-size: 30px;
  margin: 18px 0 10px;
}
.featuredPromo p {
  color: #9fb6c5;
}
.pill {
  color: #09243b;
  background: #b9ecff;
  border-radius: 50px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 800;
}
.featuredAmount {
  position: relative;
  z-index: 2;
}
.featuredAmount small,
.featuredAmount span {
  display: block;
  color: #9cb7c9;
}
.featuredAmount strong {
  display: block;
  color: #f3cf7b;
  font: 800 68px/1.1 Arial;
}
.featuredPromo button {
  position: relative;
  z-index: 2;
  background: #d2f3ff;
  color: #09233a;
  border: 0;
  border-radius: 12px;
  padding: 15px 18px;
  font-weight: 800;
}
.promoCard {
  min-height: 235px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid #7bd7f126;
  background: linear-gradient(150deg, #0d2a46, #0a2139);
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
}
.promoCard:hover {
  transform: translateY(-5px);
  border-color: #7bd7f166;
  box-shadow: 0 20px 50px #00111f88;
}
.promoCard:after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  right: -50px;
  bottom: -50px;
  background: #5ccaf112;
}
.cardTop {
  display: flex;
  justify-content: space-between;
  color: #81b1ca;
  font-size: 11px;
}
.cardTop b {
  font-size: 16px;
}
.promoCard h3 {
  font-size: 20px;
  margin: 30px 0 8px;
}
.amount {
  display: flex;
  align-items: end;
  gap: 8px;
}
.amount strong {
  font: 800 39px/1 Arial;
  color: #bceeff;
}
.amount span {
  color: #7998ac;
  font-size: 11px;
  margin-bottom: 5px;
}
.promoCard p {
  color: #839fb2;
  font-size: 12px;
  margin-top: 18px;
}
.promoCard.gold .amount strong {
  color: #f3cf7b;
}
.promoCard.red .amount strong {
  color: #ff8e85;
}
.promoCard.violet .amount strong {
  color: #c6b5ff;
}
.placeholderSection {
  padding: 90px 0 120px;
  border-top: 1px solid #72cde822;
}
.placeholderSection p:last-child {
  color: #91aebe;
}
@media (max-width: 900px) {
  .navLinks {
    display: none;
  }
  .hero {
    min-height: auto;
  }
  .heroGrid {
    grid-template-columns: 1fr;
    padding-top: 150px;
  }
  .heroVisual {
    height: 430px;
  }
  .promoGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .featuredPromo {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }
  .featuredPromo button {
    grid-column: span 2;
  }
  .trustBar {
    overflow: auto;
    justify-content: flex-start;
  }
  .sectionHead > p {
    display: none;
  }
}
@media (max-width: 600px) {
  .shell {
    width: min(100% - 28px, 1180px);
  }
  .nav {
    height: 72px;
  }
  .brand img {
    width: 150px;
    height: 44px;
  }
  .navCta {
    padding: 10px 13px;
  }
  .heroGrid {
    padding-top: 120px;
  }
  .heroCopy {
    text-align: center;
  }
  .eyebrow,
  .heroActions {
    justify-content: center;
  }
  h1 {
    font-size: 48px;
  }
  .lead {
    font-size: 14px;
  }
  .heroStats {
    justify-content: center;
  }
  .heroStats div {
    padding: 0 13px;
  }
  .heroStats strong {
    font-size: 18px;
  }
  .heroVisual {
    height: 350px;
  }
  .logoPlate {
    width: 235px;
    height: 235px;
  }
  .orbitOne {
    width: 310px;
    height: 310px;
  }
  .orbitTwo {
    width: 270px;
    height: 270px;
  }
  .floatCard {
    transform: scale(0.8);
  }
  .cardA {
    left: -4%;
  }
  .cardB {
    right: -4%;
  }
  .pokerCard {
    display: none;
  }
  .promotions {
    padding-top: 70px;
  }
  h2 {
    font-size: 34px;
  }
  .promoGrid {
    grid-template-columns: 1fr;
  }
  .featuredPromo {
    grid-column: span 1;
    grid-template-columns: 1fr;
    padding: 28px;
  }
  .featuredPromo button {
    grid-column: span 1;
  }
  .featuredAmount strong {
    font-size: 56px;
  }
  .promoCard {
    min-height: 210px;
  }
  .heroActions {
    flex-direction: column;
  }
  .primary,
  .secondary {
    text-align: center;
  }
}

.heroArtwork {
  position: absolute;
  width: 820px;
  height: 560px;
  right: -210px;
  top: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 38px;
  filter: saturate(0.9) contrast(1.05);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
  box-shadow: 0 40px 100px #0008;
}
.heroBrand {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 24px;
  overflow: hidden;
  right: 18px;
  top: 66px;
  border: 1px solid #bceeff66;
  box-shadow: 0 15px 45px #00101dcc;
}
.heroBrand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.heroVisual .orbit,
.heroVisual .logoPlate,
.heroVisual .pokerCard {
  display: none;
}
@media (max-width: 600px) {
  .heroArtwork {
    width: 620px;
    height: 350px;
    right: -190px;
    border-radius: 24px;
  }
  .heroBrand {
    width: 68px;
    height: 68px;
    right: 4px;
    top: 30px;
    border-radius: 16px;
  }
}

.conceptSwitch {
  position: fixed;
  z-index: 99;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid #bdeeff2e;
  border-radius: 14px;
  background: #061526dd;
  backdrop-filter: blur(18px);
  box-shadow: 0 15px 45px #0009;
  white-space: nowrap;
}
.conceptSwitch a,
.conceptSwitch b {
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #8faabc;
}
.conceptSwitch b {
  background: #bdeeff;
  color: #08223a;
}
.cCards article > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cCards article:hover > img {
  transform: scale(1.045);
}
.cCardShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    #061522f2 0%,
    #071726b8 47%,
    transparent 100%
  );
}
.cCardCopy {
  position: relative;
  z-index: 2;
  height: 100%;
}
.cCardCopy button {
  z-index: 3;
}

.conceptB {
  background: #050d18;
  color: #f5f2e9;
  min-height: 100vh;
}
.bNav {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1320px, calc(100% - 64px));
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d7eaff24;
}
.bNav img {
  width: 180px;
  height: 52px;
  object-fit: cover;
  object-position: left;
  mix-blend-mode: screen;
}
.bNav nav {
  display: flex;
  gap: 36px;
  font-size: 12px;
  color: #bdc7d0;
}
.bJoin {
  border: 1px solid #d1edf477;
  padding: 12px 18px;
  border-radius: 100px;
  font-size: 12px;
}
.bHero {
  height: 920px;
  position: relative;
  overflow: hidden;
}
.bHeroImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #030a12 0%, #06101dda 36%, transparent 68%),
    linear-gradient(0deg, #050d18 0%, transparent 34%);
}
.bCopy {
  position: absolute;
  z-index: 2;
  left: max(6vw, 40px);
  top: 210px;
  width: 560px;
}
.bKicker {
  font-size: 10px;
  letter-spacing: 0.27em;
  color: #9fb8c9;
}
.bCopy h1 {
  font:
    500 90px/1.02 Georgia,
    serif;
  letter-spacing: -0.055em;
  margin: 30px 0;
}
.bCopy h1 em {
  font-style: italic;
  color: #d5bf86;
  text-shadow: none;
}
.bCopy p {
  color: #a2afba;
  line-height: 1.9;
  width: 490px;
}
.bActions {
  display: flex;
  gap: 12px;
  margin-top: 35px;
}
.bActions a {
  padding: 15px 20px;
  border: 1px solid #c8e8f04b;
  font-size: 12px;
  border-radius: 2px;
}
.bActions a:first-child {
  background: #d6c38d;
  color: #14202c;
  border-color: #d6c38d;
}
.bHeroNumbers {
  position: absolute;
  z-index: 3;
  right: 5vw;
  bottom: 70px;
  display: flex;
  background: #071321c9;
  backdrop-filter: blur(20px);
  border: 1px solid #c5e6f02b;
}
.bHeroNumbers div {
  min-width: 140px;
  padding: 20px 24px;
  border-left: 1px solid #c5e6f020;
}
.bHeroNumbers div:first-child {
  border: 0;
}
.bHeroNumbers small,
.bHeroNumbers span {
  display: block;
  color: #7790a1;
  font-size: 9px;
  letter-spacing: 0.15em;
}
.bHeroNumbers strong {
  display: block;
  font:
    500 30px Georgia,
    serif;
  color: #e0cd95;
  margin: 5px 0;
}
.bScroll {
  position: absolute;
  left: 6vw;
  bottom: 35px;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: #718696;
}
.bScroll i {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: #718696;
  margin-left: 12px;
  vertical-align: middle;
}
.bRewards {
  width: min(1220px, calc(100% - 64px));
  margin: auto;
  padding: 110px 0;
}
.bSectionTitle {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 55px;
}
.bSectionTitle span,
.bEnd > span {
  color: #c7af72;
  font-size: 10px;
  letter-spacing: 0.24em;
}
.bSectionTitle h2,
.bEnd h2 {
  font:
    500 48px/1.2 Georgia,
    serif;
  margin: 18px 0;
}
.bSectionTitle p {
  color: #778b99;
}
.bRewardGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #9db3c021;
  border-left: 1px solid #9db3c021;
}
.bRewardGrid article {
  min-height: 220px;
  padding: 26px;
  border-right: 1px solid #9db3c021;
  border-bottom: 1px solid #9db3c021;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: start;
  position: relative;
  transition: 0.3s;
}
.bRewardGrid article:hover {
  background: #0b1c2b;
}
.bRewardGrid article.isHero {
  background: linear-gradient(135deg, #16354b, #0b1927);
  box-shadow: inset 0 0 0 1px #d6c38944;
}
.bIndex {
  font: italic 13px Georgia;
  color: #5f788a;
}
.bRewardGrid article div span {
  color: #7891a3;
  font-size: 9px;
  letter-spacing: 0.16em;
}
.bRewardGrid h3 {
  font: 500 22px Georgia;
  margin-top: 45px;
}
.bRewardGrid article > strong {
  font: 500 34px Georgia;
  color: #d6c38d;
}
.bRewardGrid button {
  position: absolute;
  right: 24px;
  bottom: 22px;
  width: 34px;
  height: 34px;
  border: 1px solid #99afbd44;
  border-radius: 50%;
  background: transparent;
  color: white;
}
.bEnd {
  padding: 100px 30px 150px;
  text-align: center;
  background: #071421;
}
.bEnd div {
  margin-top: 45px;
  color: #a5b6c0;
}
.bEnd b {
  color: #d8c487;
  margin: 0 10px;
}
.bEnd i {
  display: inline-block;
  width: 70px;
  height: 1px;
  background: #596f7d;
  margin: 0 25px;
  vertical-align: middle;
}

.conceptC {
  background: #071828;
  color: #f5fbff;
  min-height: 100vh;
}
.cNav {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: min(1220px, calc(100% - 54px));
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cNav img {
  width: 174px;
  height: 50px;
  object-fit: cover;
  object-position: left;
  mix-blend-mode: screen;
}
.cNav nav {
  display: flex;
  gap: 34px;
  font-size: 12px;
  color: #a7bdca;
}
.cDownload {
  background: #bdeeff;
  color: #07223b;
  padding: 13px 19px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}
.cHero {
  height: 820px;
  position: relative;
  overflow: hidden;
}
.cHeroImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cHeroShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #061522 0%, #061522e8 31%, transparent 66%),
    linear-gradient(0deg, #071828 0%, transparent 30%);
}
.cCopy {
  position: absolute;
  z-index: 2;
  left: max(7vw, 40px);
  top: 155px;
  width: 570px;
}
.cBadge {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d7eaf3;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.cBadge img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}
.cBadge small {
  color: #7894a7;
}
.cCopy h1 {
  font-size: 72px;
  line-height: 1.08;
  margin: 28px 0 22px;
}
.cCopy h1 em {
  font-style: normal;
  color: #bdeeff;
}
.cCopy > p {
  color: #9db2c1;
  line-height: 1.9;
  width: 520px;
}
.cActions {
  display: flex;
  gap: 12px;
  margin: 32px 0 45px;
}
.cActions a {
  padding: 15px 20px;
  border-radius: 11px;
  border: 1px solid #afdff04b;
  font-size: 13px;
}
.cActions a:first-child {
  background: #bdeeff;
  color: #06223b;
  font-weight: 800;
}
.cActions span {
  margin-left: 24px;
}
.cProof {
  display: flex;
  gap: 28px;
}
.cProof span {
  display: flex;
  flex-direction: column;
  color: #708b9d;
  font-size: 10px;
  border-left: 1px solid #8bcce633;
  padding-left: 14px;
}
.cProof b {
  color: #e7f7ff;
  font-size: 14px;
  margin-bottom: 5px;
}
.cPromos {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  padding: 95px 0 120px;
}
.cTitle {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 40px;
}
.cTitle span,
.cClub > div > span {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #6ccded;
}
.cTitle h2,
.cClub h2 {
  font-size: 44px;
  margin: 14px 0 0;
}
.cTitle p {
  color: #859eae;
  line-height: 1.8;
  font-size: 13px;
}
.cCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cCards article {
  min-height: 260px;
  padding: 26px;
  border-radius: 18px;
  background: linear-gradient(145deg, #0c2c47, #091f34);
  border: 1px solid #78cce92a;
  position: relative;
  overflow: hidden;
}
.cCards article:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border: 1px solid #76d2f41f;
  border-radius: 50%;
  right: -75px;
  bottom: -75px;
}
.cCards article.cFeatured {
  background:
    radial-gradient(circle at 90% 20%, #d9bc6744, transparent 35%),
    linear-gradient(145deg, #173d58, #0a243b);
  border-color: #e2c67855;
}
.cCards > article > span {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #74cde9;
}
.cCards h3 {
  font-size: 19px;
  margin: 34px 0 6px;
}
.cCards strong {
  font-size: 44px;
  color: #c5efff;
}
.cFeatured strong {
  color: #e7cd84;
}
.cCards p {
  color: #7893a5;
  font-size: 11px;
}
.cCards button {
  position: absolute;
  left: 26px;
  bottom: 23px;
  border: 0;
  background: none;
  color: #b7d2df;
  font-size: 11px;
}
.cClub {
  padding: 110px max(7vw, 30px) 150px;
  background: linear-gradient(120deg, #0b2b45, #061624);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.cClubStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #83cde829;
}
.cClubStats div {
  padding: 26px 18px;
  border-right: 1px solid #83cde829;
}
.cClubStats b {
  display: block;
  color: #6fd1ee;
  font-size: 11px;
  margin-bottom: 45px;
}
.cClubStats span {
  color: #b5c7d1;
  line-height: 1.7;
  font-size: 12px;
}
@media (max-width: 800px) {
  .bNav nav,
  .cNav nav {
    display: none;
  }
  .bHero,
  .cHero {
    height: 900px;
  }
  .bHeroImage,
  .cHeroImage {
    object-position: 64% center;
  }
  .bShade,
  .cHeroShade {
    background: linear-gradient(
      0deg,
      #050d18 0%,
      #050d18dd 42%,
      transparent 78%
    );
  }
  .bCopy,
  .cCopy {
    left: 24px;
    right: 24px;
    top: 150px;
    width: auto;
  }
  .bCopy h1 {
    font-size: 62px;
  }
  .cCopy h1 {
    font-size: 54px;
  }
  .bCopy p,
  .cCopy > p {
    width: auto;
  }
  .bHeroNumbers {
    right: 20px;
    left: 20px;
    bottom: 70px;
  }
  .bHeroNumbers div {
    min-width: 0;
    flex: 1;
    padding: 15px;
  }
  .bRewardGrid,
  .cCards {
    grid-template-columns: 1fr;
  }
  .bRewardGrid {
    border-left: 0;
  }
  .bEnd div {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .bEnd i {
    width: 1px;
    height: 25px;
    margin: auto;
  }
  .cProof {
    gap: 12px;
  }
  .cTitle {
    align-items: start;
  }
  .cTitle p {
    display: none;
  }
  .cClub {
    grid-template-columns: 1fr;
  }
  .cClubStats {
    grid-template-columns: 1fr;
  }
  .conceptSwitch a,
  .conceptSwitch b {
    padding: 8px;
  }
}

.cJourneyNav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #76cfea22;
  border: 1px solid #76cfea22;
  margin: 48px 0 110px;
}
.cJourneyNav a {
  background: #081d30;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: 0.25s;
}
.cJourneyNav a:hover {
  background: #0d304b;
}
.cJourneyNav b {
  font-size: 11px;
  color: #71d1ef;
}
.cJourneyNav span {
  font-size: 12px;
  color: #abc0cc;
}
.cActivityGroup {
  scroll-margin-top: 40px;
  margin-bottom: 130px;
}
.cGroupIntro {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 45px;
  align-items: end;
  margin-bottom: 34px;
}
.cGroupIntro > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cGroupIntro > div b {
  font:
    500 42px Georgia,
    serif;
  color: #bdeeff;
}
.cGroupIntro > div span {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #5fc7e8;
}
.cGroupIntro > h3 {
  font-size: 28px;
  line-height: 1.4;
  margin: 0;
}
.cGroupIntro > p {
  margin: 0;
  color: #7f98a8;
  line-height: 1.8;
  font-size: 12px;
}
.cActivityGroup .cCards.count-2 {
  grid-template-columns: repeat(2, 1fr);
}
.cActivityGroup .cCards.count-4 {
  grid-template-columns: repeat(2, 1fr);
}
.cActivityGroup .cCards article {
  min-height: 440px;
  padding: 0;
}
.cActivityGroup .cCardShade {
  background: linear-gradient(
    0deg,
    #061522 1%,
    #061522ed 30%,
    #06152270 66%,
    transparent 100%
  );
}
.cActivityGroup .cCardCopy {
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.cActivityGroup .cCardCopy > span {
  margin-bottom: auto;
}
.cActivityGroup .cCardCopy h3 {
  margin: 0 0 6px;
  font-size: 20px;
}
.cAmount {
  display: flex;
  align-items: end;
  gap: 9px;
}
.cActivityGroup .cAmount strong {
  font-size: 42px;
  line-height: 1;
  color: #c7efff;
}
.cActivityGroup .cFeatured .cAmount strong {
  color: #ead188;
}
.cAmount small {
  color: #8ca7b7;
  font-size: 10px;
  margin-bottom: 5px;
}
.cActivityGroup .cCardCopy > p {
  margin: 12px 0 15px;
  line-height: 1.65;
  color: #9ab0bd;
  max-width: 90%;
}
.cMeta {
  display: flex;
  gap: 8px;
  margin-bottom: 34px;
}
.cMeta span {
  padding: 6px 9px;
  border-radius: 100px;
  border: 1px solid #9adcf134;
  color: #9fbbc9;
  font-size: 9px;
  letter-spacing: 0;
}
.cActivityGroup .cCardCopy button {
  left: 25px;
  bottom: 19px;
}
.cActivityGroup .cCards article:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: 18px;
  transition: 0.3s;
  pointer-events: none;
}
.cActivityGroup .cCards article:hover:before {
  border-color: #8ddcf15c;
  box-shadow: inset 0 0 40px #61c9ea12;
}
@media (max-width: 800px) {
  .cJourneyNav {
    grid-template-columns: 1fr;
    margin-bottom: 75px;
  }
  .cGroupIntro {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .cActivityGroup .cCards.count-2,
  .cActivityGroup .cCards.count-4 {
    grid-template-columns: 1fr;
  }
  .cActivityGroup {
    margin-bottom: 90px;
  }
  .cActivityGroup .cCards article {
    min-height: 420px;
  }
  .cGroupIntro > div {
    flex-direction: row;
    align-items: center;
  }
}

/* Activity editorial cards: dedicated artwork first, explanation second. */
.cActivityGroup .cCards article {
  min-height: 540px;
  padding: 0;
  background: #081f34;
}
.cActivityGroup .cCards article > img {
  height: 55%;
  bottom: auto;
  object-position: center;
}
.cActivityGroup .cCardShade {
  top: 0;
  height: 58%;
  background: linear-gradient(0deg, #081f34 0%, transparent 44%);
  pointer-events: none;
}
.cActivityGroup .cCardCopy {
  padding: 322px 25px 24px;
  display: block;
}
.cActivityGroup .cCardCopy > span {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 8px;
  border-radius: 100px;
  background: #65cbea16;
  border: 1px solid #65cbea32;
}
.cActivityGroup .cCardCopy h3 {
  margin: 0 0 8px;
  font-size: 20px;
}
.cActivityGroup .cAmount {
  position: absolute;
  right: 24px;
  top: 316px;
}
.cActivityGroup .cAmount strong {
  font-size: 36px;
}
.cActivityGroup .cCardCopy > p {
  margin: 12px 0 15px;
  line-height: 1.7;
  color: #a6bac5;
  max-width: 86%;
  font-size: 11px;
}
.cActivityGroup .cMeta {
  flex-wrap: wrap;
}
@media (max-width: 800px) {
  .cActivityGroup .cCards article {
    min-height: 530px;
  }
  .cActivityGroup .cCardCopy {
    padding-top: 310px;
  }
  .cActivityGroup .cAmount {
    top: 306px;
  }
}

/* Official events are the primary conversion content. */
.cPromos {
  position: relative;
  padding-top: 72px;
}
.promoOfficialMark {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin: 0 0 28px;
  padding: 8px 12px 8px 8px;
  border: 1px solid #79d7f044;
  border-radius: 100px;
  background: #0b2941;
  box-shadow: 0 10px 40px #0004;
  color: #bdd4df;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.promoOfficialMark i {
  font-style: normal;
  padding: 5px 9px;
  border-radius: 100px;
  background: #bdeeff;
  color: #06223a;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.promoOfficialMark b {
  padding-left: 12px;
  border-left: 1px solid #8bd9ef3b;
  color: #e8cf88;
  font-weight: 700;
}
.cPromos .cTitle {
  align-items: center;
  margin-bottom: 34px;
}
.cPromos .cTitle h2 {
  font-size: 52px;
  line-height: 1.18;
  color: #f5fbff;
}
.cPromos .cTitle p {
  max-width: 470px;
  color: #a8beca;
}
.promoHighlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.25fr;
  margin: 0 0 46px;
  border: 1px solid #7ad3ed38;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(110deg, #0d304b, #091e32);
  box-shadow: 0 24px 70px #0005;
}
.promoHighlights > div {
  padding: 22px 25px;
  border-right: 1px solid #78d2ed2d;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.promoHighlights strong {
  font-size: 25px;
  line-height: 1;
  color: #c9f1ff;
}
.promoHighlights span {
  font-size: 9px;
  color: #7897a8;
  letter-spacing: 0.08em;
}
.promoHighlights > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #bdeeff;
  color: #06223a;
  font-size: 12px;
  font-weight: 900;
}
.promoHighlights > a b {
  font-size: 18px;
}
.cActivityGroup .cCards article {
  box-shadow: 0 22px 55px #0004;
}
.cActivityGroup .cCardCopy h3 {
  font-size: 22px;
  color: #fff;
}
.cActivityGroup .cAmount strong {
  text-shadow: 0 0 28px #71d7f044;
}
@media (max-width: 800px) {
  .promoOfficialMark {
    width: auto;
  }
  .promoOfficialMark b {
    display: none;
  }
  .cPromos .cTitle h2 {
    font-size: 38px;
  }
  .promoHighlights {
    grid-template-columns: repeat(3, 1fr);
  }
  .promoHighlights > div {
    padding: 17px 10px;
  }
  .promoHighlights strong {
    font-size: 18px;
  }
  .promoHighlights > a {
    grid-column: span 3;
    padding: 16px;
  }
  .cPromos {
    padding-top: 58px;
  }
}

/* Precision pass: legibility, alignment and trustworthy interaction states. */
.cNav .cBrand {
  display: flex;
  align-items: center;
  width: 190px;
  height: 58px;
  overflow: hidden;
}
.cNav .cBrand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.cNav nav a {
  position: relative;
  padding: 12px 0;
  transition: color 0.2s;
}
.cNav nav a:hover,
.cNav nav .navPromo {
  color: #e8f8ff;
}
.cNav nav .navPromo:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1px;
  background: #79d5ef;
}
.officialRibbon {
  font-size: 11px;
}
.cActivityGroup .cCardCopy > span {
  font-size: 10px;
  letter-spacing: 0.09em;
  color: #8eddf3;
}
.cActivityGroup .cCardCopy > p {
  font-size: 13px;
  line-height: 1.65;
  color: #afc3cd;
  max-width: 82%;
}
.cMeta span {
  font-size: 10px;
  line-height: 1.35;
  color: #b5cbd5;
  background: #0e2a40;
}
.cRuleLink {
  position: absolute;
  left: 25px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8edf5;
  font-size: 12px;
  font-weight: 700;
}
.cRuleLink b {
  color: #75d4ef;
  transition: transform 0.2s;
}
.cRuleLink:hover b {
  transform: translate(3px, -3px);
}
.cActivityGroup .cCardCopy button {
  display: none;
}
.cGroupIntro > p {
  font-size: 13px;
  color: #93aab7;
}
.experienceCopy > p,
.flowTitle p,
.downloadCopy > p,
.faqIntro > p {
  font-size: 14px;
}
.experiencePoints p,
.flowSteps p,
.faqList details p {
  font-size: 12px;
}
.siteFooter a,
.footerNote p {
  font-size: 11px;
}
@media (max-width: 800px) {
  .cNav {
    height: 76px;
    width: calc(100% - 32px);
  }
  .cNav .cBrand {
    width: 148px;
    height: 46px;
  }
  .cNav .cDownload {
    padding: 11px 13px;
    font-size: 11px;
  }
  .officialRibbon {
    height: 54px;
    font-size: 10px;
  }
  .cActivityGroup .cCardCopy > p {
    max-width: 100%;
  }
  .cMeta {
    margin-bottom: 42px;
  }
  .cRuleLink {
    bottom: 19px;
  }
}

.officialRibbon {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-top: 1px solid #84d4ee22;
  border-bottom: 1px solid #84d4ee22;
  background: #071b2d;
  color: #829cab;
  font-size: 10px;
  letter-spacing: 0.13em;
}
.officialRibbon > span {
  color: #bdeeff;
  font-weight: 800;
}
.officialRibbon i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #6fd2ef;
  box-shadow: 0 0 8px #6fd2ef;
}
.experienceSection {
  width: min(1220px, calc(100% - 54px));
  margin: 0 auto;
  padding: 120px 0;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 75px;
  align-items: center;
}
.experienceCopy > span,
.flowTitle > span,
.downloadCopy > span,
.faqIntro > span {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #69cce9;
}
.experienceCopy > h2,
.flowTitle h2,
.downloadCopy h2,
.faqIntro h2 {
  font-size: 44px;
  line-height: 1.2;
  margin: 17px 0;
}
.experienceCopy > p,
.flowTitle p,
.downloadCopy > p,
.faqIntro > p {
  color: #829dab;
  line-height: 1.85;
  font-size: 13px;
}
.experiencePoints {
  margin-top: 42px;
}
.experiencePoints > div {
  display: grid;
  grid-template-columns: 38px 120px 1fr;
  gap: 12px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid #83cde822;
}
.experiencePoints b {
  font-size: 10px;
  color: #66cce9;
}
.experiencePoints h3 {
  font-size: 14px;
  margin: 0;
}
.experiencePoints p {
  font-size: 11px;
  color: #7c96a6;
  margin: 0;
  line-height: 1.65;
}
.experienceVisual {
  height: 560px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid #79cce629;
  box-shadow: 0 35px 90px #0007;
}
.experienceVisual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.experienceVisual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #071828aa, transparent 50%);
}
.experienceBadge {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #061725d9;
  backdrop-filter: blur(14px);
  padding: 13px 17px;
  border: 1px solid #9de1f344;
  border-radius: 14px;
}
.experienceBadge strong {
  font-size: 31px;
  color: #bdeeff;
}
.experienceBadge span {
  font-size: 9px;
  color: #96aebb;
  line-height: 1.5;
}
.joinFlow {
  padding: 115px max(6vw, 30px);
  background: #061522;
  border-top: 1px solid #74cde820;
}
.flowTitle {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 60px;
}
.flowSteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1180px, 100%);
  margin: auto;
  border-top: 1px solid #82cfe72e;
}
.flowSteps article {
  padding: 28px 28px 36px;
  border-right: 1px solid #82cfe72e;
  position: relative;
}
.flowSteps article:last-child {
  border: 0;
}
.flowSteps article:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 28px;
  width: 45px;
  height: 3px;
  background: #70d0ee;
}
.flowSteps b {
  color: #67cdea;
  font-size: 11px;
}
.flowSteps h3 {
  font-size: 17px;
  margin: 38px 0 11px;
}
.flowSteps p {
  color: #7e98a8;
  font-size: 11px;
  line-height: 1.7;
}
.downloadStage {
  height: 720px;
  position: relative;
  overflow: hidden;
}
.downloadStage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.downloadShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #061522 0%, #061522e8 38%, transparent 72%),
    linear-gradient(0deg, #061522 0%, transparent 25%);
}
.downloadCopy {
  position: absolute;
  z-index: 2;
  left: max(7vw, 35px);
  top: 130px;
  width: 510px;
}
.downloadCopy h2 {
  font-size: 49px;
}
.downloadButtons {
  display: flex;
  gap: 11px;
  margin: 30px 0 20px;
}
.downloadButtons a {
  padding: 15px 20px;
  border-radius: 11px;
  background: #bdeeff;
  color: #06223a;
  font-size: 12px;
  font-weight: 800;
}
.downloadButtons a + a {
  background: #ffffff0e;
  color: #d5e7f0;
  border: 1px solid #bdeeff48;
}
.downloadCopy small {
  color: #667f90;
}
.faqSection {
  width: min(1120px, calc(100% - 54px));
  margin: auto;
  padding: 115px 0 140px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}
.faqIntro {
  position: sticky;
  top: 30px;
  align-self: start;
}
.faqList details {
  border-top: 1px solid #78cce82c;
  padding: 23px 0;
}
.faqList details:last-child {
  border-bottom: 1px solid #78cce82c;
}
.faqList summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14px;
}
.faqList summary::-webkit-details-marker {
  display: none;
}
.faqList summary b {
  color: #69cce9;
}
.faqList details[open] summary b {
  transform: rotate(45deg);
}
.faqList details p {
  color: #829cab;
  font-size: 12px;
  line-height: 1.8;
  max-width: 90%;
  margin: 17px 0 2px;
}
.siteFooter {
  padding: 65px max(6vw, 30px) 95px;
  background: #04101c;
  border-top: 1px solid #7bd2ee20;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 0.6fr 1.2fr;
  gap: 55px;
}
.footerBrand img {
  width: 190px;
  height: 56px;
  object-fit: cover;
  object-position: left;
  mix-blend-mode: screen;
}
.footerBrand p {
  font-size: 11px;
  color: #758e9e;
  letter-spacing: 0.12em;
}
.siteFooter h4 {
  font-size: 11px;
  margin: 0 0 18px;
  color: #d7e8ef;
}
.siteFooter > div:not(:first-child):not(:last-child) {
  display: flex;
  flex-direction: column;
}
.siteFooter a {
  font-size: 10px;
  color: #718999;
  margin: 7px 0;
}
.footerNote p {
  color: #728a9a;
  font-size: 10px;
  line-height: 1.8;
}
.footerNote small {
  color: #445d6e;
}
.mobileDock {
  display: none;
}
@media (max-width: 800px) {
  .officialRibbon {
    justify-content: flex-start;
    overflow: hidden;
    padding-left: 20px;
    white-space: nowrap;
  }
  .experienceSection {
    grid-template-columns: 1fr;
    padding: 80px 0;
    gap: 40px;
  }
  .experienceCopy > h2,
  .flowTitle h2,
  .faqIntro h2 {
    font-size: 34px;
  }
  .experiencePoints > div {
    grid-template-columns: 30px 92px 1fr;
  }
  .experienceVisual {
    height: 390px;
  }
  .flowSteps {
    grid-template-columns: 1fr 1fr;
  }
  .flowSteps article:nth-child(2) {
    border-right: 0;
  }
  .downloadStage {
    height: 790px;
  }
  .downloadStage > img {
    object-position: 66% center;
  }
  .downloadShade {
    background: linear-gradient(
      0deg,
      #061522 0%,
      #061522ee 47%,
      transparent 82%
    );
  }
  .downloadCopy {
    left: 24px;
    right: 24px;
    top: 90px;
    width: auto;
  }
  .downloadCopy h2 {
    font-size: 39px;
  }
  .faqSection {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 85px 0;
  }
  .faqIntro {
    position: static;
  }
  .siteFooter {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 110px;
  }
  .footerBrand,
  .footerNote {
    grid-column: span 2;
  }
  .mobileDock {
    position: fixed;
    z-index: 98;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 5px;
    background: #061522e8;
    backdrop-filter: blur(18px);
    border: 1px solid #8cd8ef3b;
    border-radius: 14px;
  }
  .mobileDock a {
    text-align: center;
    padding: 13px;
    border-radius: 10px;
    font-size: 12px;
  }
  .mobileDock a:last-child {
    background: #bdeeff;
    color: #06223a;
    font-weight: 800;
  }
}

/* Final top-to-bottom QA pass. */
body {
  overflow-x: hidden;
}
.conceptC a,
.conceptC summary {
  outline: none;
}
.conceptC a:focus-visible,
.conceptC summary:focus-visible {
  outline: 2px solid #83dcf5;
  outline-offset: 4px;
  border-radius: 6px;
}
.cNav {
  border-bottom: 1px solid #8ddcf218;
}
.cDownload,
.cActions a,
.promoHighlights > a,
.downloadButtons a,
.mobileDock a {
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.cDownload:hover,
.cActions a:first-child:hover,
.promoHighlights > a:hover,
.downloadButtons a:first-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px #54c9eb33;
}
.officialRibbon {
  font-size: 11px;
}
.cJourneyNav {
  margin-bottom: 84px;
}
.cActivityGroup {
  margin-bottom: 108px;
}
.cActivityGroup:last-child {
  margin-bottom: 48px;
}
.experienceCopy > p,
.flowTitle p,
.downloadCopy > p,
.faqIntro > p {
  font-size: 14px;
  color: #91a9b6;
}
.experiencePoints p,
.flowSteps p,
.faqList details p {
  font-size: 12px;
}
.experienceCopy > span,
.flowTitle > span,
.downloadCopy > span,
.faqIntro > span {
  font-size: 10px;
}
.experienceBadge span {
  font-size: 10px;
}
.siteFooter a,
.footerNote p {
  font-size: 11px;
}
.footerBrand img {
  object-fit: contain;
}
.downloadStage {
  scroll-margin-top: 0;
}
.downloadStage > img {
  object-position: center;
}
.downloadButtons a {
  min-width: 128px;
  text-align: center;
}
.faqList summary b {
  transition: transform 0.2s;
}
@media (max-width: 1000px) and (min-width: 801px) {
  .cCopy {
    left: 5vw;
  }
  .cCopy h1 {
    font-size: 62px;
  }
  .cGroupIntro {
    grid-template-columns: 120px 1fr 1fr;
    gap: 28px;
  }
  .cActivityGroup .cCards.count-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .experienceSection {
    gap: 45px;
  }
  .siteFooter {
    gap: 30px;
  }
}
@media (max-width: 800px) {
  .cHero {
    height: 820px;
  }
  .cHeroImage {
    object-position: 67% center;
  }
  .cCopy {
    top: 125px;
  }
  .cCopy h1 {
    font-size: 46px;
  }
  .cActions {
    margin-bottom: 34px;
  }
  .cProof {
    flex-wrap: wrap;
  }
  .cProof span {
    min-width: 92px;
  }
  .cJourneyNav {
    margin: 34px 0 62px;
  }
  .cActivityGroup {
    margin-bottom: 76px;
  }
  .cGroupIntro {
    margin-bottom: 24px;
  }
  .cGroupIntro > h3 {
    font-size: 24px;
  }
  .cActivityGroup .cCards article {
    min-height: 545px;
  }
  .downloadStage {
    height: 720px;
  }
  .downloadStage > img {
    object-position: 68% center;
  }
  .downloadCopy {
    top: 62px;
  }
  .downloadCopy h2 {
    font-size: 36px;
  }
  .downloadButtons {
    flex-direction: column;
    width: 190px;
  }
  .flowSteps article {
    padding: 25px 18px 30px;
  }
  .siteFooter {
    gap: 34px 25px;
  }
}

/* Mobile-first experience layer: content clarity and touch before decoration. */
@media (max-width: 800px) {
  .cNav {
    padding: 0 2px;
  }
  .cNav .cBrand {
    width: 142px;
  }
  .cNav .cDownload {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-inline: 12px;
  }
  .cHero {
    height: 780px;
  }
  .cHeroShade {
    background: linear-gradient(
      0deg,
      #061522 0%,
      #061522f2 48%,
      #0615224d 78%,
      transparent 100%
    );
  }
  .cCopy {
    top: 112px;
  }
  .cBadge {
    font-size: 10px;
  }
  .cBadge img {
    width: 42px;
    height: 42px;
  }
  .cCopy h1 {
    font-size: 42px;
    line-height: 1.12;
    margin: 22px 0 16px;
  }
  .cCopy > p {
    font-size: 14px;
    line-height: 1.75;
  }
  .cActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 25px 0 28px;
  }
  .cActions a {
    min-height: 48px;
    padding: 14px 10px;
    text-align: center;
  }
  .cActions span {
    margin-left: 8px;
  }
  .cProof {
    gap: 9px;
  }
  .cProof span {
    flex: 1;
    min-width: 88px;
    padding-left: 10px;
    font-size: 9px;
  }
  .officialRibbon {
    gap: 14px;
    padding-right: 20px;
  }
  .cPromos {
    width: calc(100% - 30px);
    padding-bottom: 76px;
  }
  .promoOfficialMark {
    margin-bottom: 20px;
  }
  .cPromos .cTitle {
    margin-bottom: 25px;
  }
  .cPromos .cTitle h2 {
    font-size: 34px;
  }
  .promoHighlights {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
  }
  .promoHighlights > div {
    min-height: 70px;
    padding: 15px;
  }
  .promoHighlights > div:nth-child(3) {
    grid-column: span 2;
    border-top: 1px solid #78d2ed2d;
  }
  .promoHighlights > a {
    grid-column: span 2;
    min-height: 48px;
  }
  .cJourneyNav {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    border: 0;
    background: transparent;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .cJourneyNav::-webkit-scrollbar {
    display: none;
  }
  .cJourneyNav a {
    min-width: 78%;
    scroll-snap-align: start;
    border: 1px solid #76cfea2e;
    border-radius: 12px;
    padding: 17px;
  }
  .cGroupIntro {
    gap: 11px;
  }
  .cGroupIntro > div b {
    font-size: 34px;
  }
  .cGroupIntro > h3 {
    font-size: 23px;
  }
  .cGroupIntro > p {
    font-size: 12px;
  }
  .cActivityGroup .cCards {
    gap: 16px;
  }
  .cActivityGroup .cCards article {
    min-height: 570px;
    border-radius: 16px;
  }
  .cActivityGroup .cCards article > img {
    height: 292px;
  }
  .cActivityGroup .cCardShade {
    height: 294px;
  }
  .cActivityGroup .cCardCopy {
    padding: 310px 20px 22px;
  }
  .cActivityGroup .cAmount {
    position: static;
    margin: 8px 0 0;
  }
  .cActivityGroup .cAmount strong {
    font-size: 34px;
  }
  .cActivityGroup .cCardCopy > p {
    margin: 12px 0;
    font-size: 12px;
  }
  .cMeta {
    margin-bottom: 45px;
    gap: 6px;
  }
  .cMeta span {
    font-size: 9px;
  }
  .cRuleLink {
    left: 20px;
    min-height: 44px;
    bottom: 8px;
  }
  .cClub {
    padding: 72px 20px 80px;
    gap: 36px;
  }
  .cClub h2 {
    font-size: 32px;
  }
  .cClubStats div {
    padding: 20px 10px;
  }
  .cClubStats b {
    margin-bottom: 14px;
  }
  .experienceSection {
    width: calc(100% - 30px);
    padding: 76px 0;
  }
  .experienceVisual {
    height: 340px;
  }
  .experienceCopy > h2 {
    font-size: 32px;
  }
  .experiencePoints {
    margin-top: 28px;
  }
  .experiencePoints > div {
    grid-template-columns: 28px 82px 1fr;
    padding: 16px 0;
  }
  .joinFlow {
    padding: 72px 20px;
  }
  .flowTitle {
    margin-bottom: 40px;
  }
  .flowSteps {
    grid-template-columns: 1fr;
  }
  .flowSteps article,
  .flowSteps article:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid #82cfe72e;
    padding: 22px 18px;
  }
  .flowSteps article:last-child {
    border-bottom: 0;
  }
  .flowSteps h3 {
    margin: 24px 0 8px;
  }
  .downloadStage {
    height: 700px;
  }
  .downloadStage > img {
    object-position: 70% 70%;
  }
  .downloadShade {
    background: linear-gradient(0deg, #061522 0%, #061522f5 53%, #06152242 88%);
  }
  .downloadCopy {
    top: 52px;
  }
  .downloadCopy h2 {
    font-size: 34px;
  }
  .downloadCopy > p {
    font-size: 13px;
  }
  .downloadButtons {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .downloadButtons a {
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
  }
  .faqSection {
    width: calc(100% - 30px);
    padding: 72px 0 100px;
  }
  .faqIntro h2 {
    font-size: 32px;
  }
  .faqList details {
    padding: 20px 0;
  }
  .faqList summary {
    min-height: 44px;
    align-items: center;
    font-size: 13px;
  }
  .siteFooter {
    padding: 54px 20px 112px;
  }
  .footerBrand img {
    width: 170px;
  }
  .mobileDock a {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 390px) {
  .cNav .cBrand {
    width: 124px;
  }
  .cNav .cDownload {
    font-size: 10px;
  }
  .cCopy h1 {
    font-size: 38px;
  }
  .cProof span:last-child {
    display: none;
  }
  .cPromos .cTitle h2 {
    font-size: 31px;
  }
  .promoOfficialMark span {
    font-size: 9px;
  }
  .cActivityGroup .cCards article {
    min-height: 585px;
  }
  .cActivityGroup .cCardCopy {
    padding-inline: 17px;
  }
  .cClub h2,
  .experienceCopy > h2,
  .flowTitle h2,
  .faqIntro h2 {
    font-size: 29px;
  }
  .downloadCopy h2 {
    font-size: 31px;
  }
  .downloadButtons a {
    font-size: 11px;
  }
  .siteFooter {
    grid-template-columns: 1fr;
  }
  .footerBrand,
  .footerNote {
    grid-column: span 1;
  }
}

/* Mobile hero must hand off to activities within the first viewport. */
@media (max-width: 800px) {
  .cHero {
    height: 535px;
  }
  .cHeroImage {
    object-position: 66% center;
  }
  .cHeroShade {
    background: linear-gradient(
      0deg,
      #061522 0%,
      #061522d9 28%,
      #06152270 70%,
      transparent 100%
    );
  }
  .cCopy {
    top: 104px;
  }
  .cActions {
    margin-bottom: 22px;
  }
  .cProof {
    margin-top: 0;
  }
}
@media (max-width: 390px) {
  .cHero {
    height: 520px;
  }
  .cCopy {
    top: 98px;
  }
  .cCopy h1 {
    margin-top: 18px;
  }
  .cActions {
    margin-top: 20px;
  }
}

/* Mobile hero: artwork and information live in separate layers. */
@media (max-width: 800px) {
  .cHero {
    height: 610px;
    background: #061522;
  }
  .cHeroImage {
    inset: 0 0 auto;
    height: 285px;
    object-position: 72% center;
    filter: brightness(1.13) contrast(1.07) saturate(1.05);
  }
  .cHeroShade {
    inset: 0 0 auto;
    height: 305px;
    background: linear-gradient(
      0deg,
      #061522 0%,
      #06152224 42%,
      transparent 78%
    );
  }
  .cCopy {
    top: 278px;
    left: 20px;
    right: 20px;
    width: auto;
  }
  .cBadge {
    display: none;
  }
  .cCopy h1 {
    font-size: 38px;
    line-height: 1.1;
    margin: 0 0 13px;
    letter-spacing: -0.035em;
  }
  .cCopy > p {
    font-size: 13px;
    line-height: 1.65;
    color: #a9bec9;
    margin: 0;
  }
  .cActions {
    margin: 18px 0 18px;
  }
  .cProof {
    padding-top: 2px;
  }
  .cProof span {
    font-size: 9px;
  }
  .cProof b {
    font-size: 14px;
  }
}
@media (max-width: 390px) {
  .cHero {
    height: 595px;
  }
  .cHeroImage {
    height: 265px;
    object-position: 73% center;
  }
  .cHeroShade {
    height: 286px;
  }
  .cCopy {
    top: 262px;
    left: 16px;
    right: 16px;
  }
  .cCopy h1 {
    font-size: 35px;
  }
  .cCopy > p {
    font-size: 12px;
  }
  .cActions a {
    font-size: 12px;
  }
}

/* Mobile QA corrections based on real device captures. */
@media (max-width: 800px) {
  .cNav {
    height: 70px;
    align-items: center;
  }
  .cNav .cBrand {
    width: 136px;
    height: 42px;
  }
  .cNav .cDownload {
    min-height: 40px;
    border-radius: 9px;
  }
  .officialRibbon {
    height: 50px;
    font-size: 9px;
  }
  .cPromos {
    padding-top: 46px;
  }
  .promoOfficialMark {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .promoOfficialMark span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobileDock {
    bottom: 8px;
    left: 8px;
    right: 8px;
  }
  .conceptC {
    padding-bottom: 72px;
  }
  .promoHighlights,
  .cCards article,
  .experienceVisual,
  .downloadStage {
    scroll-margin-top: 12px;
  }
  .cActivityGroup .cCardCopy h3 {
    line-height: 1.3;
  }
  .cActivityGroup .cAmount {
    align-items: baseline;
  }
  .cActivityGroup .cCardCopy > p {
    min-height: auto;
  }
}

/* Mobile download CTA: copy first, gift artwork second, no dark empty tail. */
@media (max-width: 800px) {
  .downloadStage {
    height: 625px;
    background: #061522;
    padding: 0;
    display: block;
  }
  .downloadStage > img {
    top: auto;
    bottom: 0;
    height: 300px;
    object-fit: cover;
    object-position: 72% center;
    filter: brightness(1.08) saturate(1.04);
  }
  .downloadShade {
    top: 300px;
    bottom: 0;
    height: auto;
    background: linear-gradient(0deg, transparent 58%, #061522 100%);
    pointer-events: none;
  }
  .downloadCopy {
    top: 38px;
    left: 20px;
    right: 20px;
    width: auto;
  }
  .downloadCopy h2 {
    margin: 13px 0 14px;
    font-size: 34px;
    line-height: 1.2;
  }
  .downloadCopy > p {
    margin: 0;
    line-height: 1.7;
  }
  .downloadButtons {
    margin: 24px 0 16px;
  }
  .downloadCopy small {
    display: block;
    line-height: 1.65;
  }
  .faqSection {
    padding-top: 66px;
  }
}
@media (max-width: 390px) {
  .downloadStage {
    height: 610px;
  }
  .downloadStage > img {
    height: 285px;
  }
  .downloadShade {
    top: 290px;
  }
  .downloadCopy {
    top: 32px;
    left: 16px;
    right: 16px;
  }
  .downloadCopy h2 {
    font-size: 31px;
  }
  .downloadButtons {
    margin-top: 20px;
  }
}

/* Bright hero artwork: keep desktop copy contrast without darkening the reward subject. */
.cHeroShade {
  background:
    linear-gradient(
      90deg,
      #061522 0%,
      #061522f0 34%,
      #06152270 55%,
      transparent 72%
    ),
    linear-gradient(0deg, #071828 0%, transparent 30%);
}
@media (max-width: 800px) {
  .cHeroImage {
    object-position: 73% center;
    filter: none;
  }
  .cHeroShade {
    background: linear-gradient(
      0deg,
      #061522 0%,
      #06152208 34%,
      transparent 68%
    );
  }
}

.experienceVisual > img {
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
}
.experienceVisual:after {
  background: linear-gradient(0deg, #07182848, transparent 34%);
}

/* ====================================================================== */
/* Fused official events center: V2 information architecture + bright art */
.eventsV2 {
  --e0: #06101d;
  --e1: #0a1728;
  --e2: #10243a;
  --eg: #d0ae63;
  --egl: #f0dea9;
  --et: #eef5fa;
  --em: #91a6b7;
  --el: #d0ae6330;
  background: var(--e0);
  color: var(--et);
  min-height: 100vh;
}
.evWrap {
  width: min(1180px, calc(100% - 44px));
  margin: auto;
}
.evNav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  background: #06101de8;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--el);
}
.evNav > .evWrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 34px;
}
.evBrand {
  width: 190px;
  height: 48px;
  display: flex;
}
.evBrand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}
.evLinks {
  display: flex;
  gap: 28px;
  color: #9eafbd;
  font-size: 13px;
}
.evLinks a:hover {
  color: var(--egl);
}
.evNavCta {
  margin-left: auto;
}
.evPrimary,
.evGhost {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.evPrimary {
  background: linear-gradient(120deg, var(--egl), var(--eg));
  color: #271d09;
  box-shadow: 0 8px 28px #cba75425;
}
.evGhost {
  border: 1px solid var(--el);
  background: #d0ae6309;
  color: var(--egl);
}
.evHero {
  padding: 65px 0 46px;
  background: radial-gradient(70% 75% at 75% 30%, #193b5a66, transparent 62%);
}
.evHeroGrid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 55px;
  align-items: center;
}
.evLive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--el);
  background: #d0ae6309;
  color: var(--egl);
  border-radius: 100px;
  padding: 6px 13px;
  font-size: 11px;
}
.evLive i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63d696;
  box-shadow: 0 0 9px #63d696;
}
.evHeroCopy > small,
.evGroupHead span,
.evDownloadGrid > div > span,
.evFaq small {
  display: block;
  margin-top: 19px;
  color: var(--eg);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.evHero h1 {
  font-size: 52px;
  line-height: 1.16;
  margin: 14px 0;
}
.evHero h1 em {
  font-style: normal;
  color: var(--egl);
}
.evHeroCopy > p {
  color: var(--em);
  font-size: 15px;
}
.evMax {
  margin-top: 28px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.evMax > span {
  width: 100%;
  color: var(--em);
  font-size: 12px;
}
.evMax strong {
  font: 800 68px/1 Arial;
  color: var(--egl);
  text-shadow: 0 0 30px #d0ae6340;
}
.evMax b {
  color: var(--eg);
  font-size: 14px;
}
.evMax small {
  width: 100%;
  color: #657b8d;
  font-size: 11px;
}
.evActions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
.evHeroArt {
  aspect-ratio: 3/2;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--el);
  box-shadow: 0 30px 80px #0006;
}
.evHeroArt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evLevel {
  position: sticky;
  top: 68px;
  z-index: 40;
  height: 58px;
  background: #0b192bef;
  backdrop-filter: blur(16px);
  border-block: 1px solid var(--el);
}
.evLevel > .evWrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.evLevel b {
  font-size: 12px;
  color: #a7b7c3;
  white-space: nowrap;
}
.evLevel div div {
  display: flex;
  gap: 7px;
}
.evLevel button,
.evFilter button {
  border: 1px solid var(--el);
  background: #d0ae6308;
  color: #9fb0bd;
  border-radius: 8px;
  padding: 7px 13px;
  cursor: pointer;
}
.evLevel button.on,
.evFilter button.on {
  background: linear-gradient(120deg, var(--egl), var(--eg));
  color: #251b08;
  font-weight: 800;
}
.evActivities {
  padding: 24px 0 100px;
}
.evFilter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.evFilter button {
  border-radius: 100px;
  padding: 8px 16px;
}
.evGroup {
  padding-top: 62px;
  scroll-margin-top: 132px;
}
.evGroupHead {
  border-bottom: 1px solid var(--el);
  padding-bottom: 22px;
  margin-bottom: 24px;
}
.evGroupHead h2 {
  font-size: 29px;
  margin: 8px 0 4px;
}
.evGroupHead p {
  color: var(--em);
  font-size: 13px;
}
.evCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.evCount2 {
  grid-template-columns: repeat(2, 1fr);
}
.evCount4 {
  grid-template-columns: repeat(2, 1fr);
}
.evCard {
  border: 1px solid #ffffff10;
  border-radius: 17px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--e2), var(--e1));
  display: flex;
  flex-direction: column;
  transition: 0.25s;
}
.evCard:hover {
  transform: translateY(-4px);
  border-color: var(--el);
  box-shadow: 0 20px 55px #0007;
}
.evCardImg {
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}
.evCardImg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.evCardImg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0b192bea, transparent 55%);
}
.evCardImg > span {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
  padding: 4px 9px;
  border-radius: 100px;
  background: #06101dcc;
  border: 1px solid var(--el);
  font-size: 9px;
  color: var(--egl);
}
.evCardImg > span.auto {
  color: #6dde9e;
  border-color: #6dde9e55;
}
.evCardImg > div {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 12px;
}
.evCardImg small {
  color: var(--eg);
  letter-spacing: 0.18em;
}
.evCardImg h3 {
  font-size: 21px;
  margin: 2px 0;
}
.evCardImg p {
  font-size: 11px;
  color: #a1b2bf;
}
.evCardBody {
  padding: 17px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.evReward {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}
.evReward strong {
  font: 800 34px/1 Arial;
  color: var(--egl);
}
.evReward b {
  display: block;
  color: var(--eg);
  font-size: 10px;
  margin-top: 6px;
}
.evReward > span {
  color: #74899a;
  font-size: 10px;
  text-align: right;
}
.evMiniLevels {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 13px;
}
.evMiniLevels i {
  font-style: normal;
  padding: 3px 7px;
  border: 1px solid #ffffff12;
  border-radius: 6px;
  color: #718899;
  font-size: 9px;
}
.evMiniLevels i.on {
  color: #271d09;
  background: var(--eg);
}
.evCard dl {
  margin: 15px 0;
  flex: 1;
}
.evCard dl > div {
  display: grid;
  grid-template-columns: 65px 1fr;
  padding: 9px 0;
  border-top: 1px solid #ffffff0c;
  font-size: 11px;
}
.evCard dt {
  color: #6e8495;
}
.evCard dd {
  margin: 0;
  color: #a9bac5;
}
.evCardBody > a {
  width: 100%;
}
.evDownload {
  padding: 85px 0;
  background: linear-gradient(135deg, #102844, #091522);
  border-block: 1px solid var(--el);
}
.evDownloadGrid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 55px;
  align-items: center;
}
.evDownload h2 {
  font-size: 43px;
  line-height: 1.2;
  margin: 15px 0;
}
.evDownload p {
  color: var(--em);
  line-height: 1.8;
}
.evDownload img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--el);
}
.evFaq {
  padding: 85px 0;
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 70px;
}
.evFaq h2 {
  font-size: 37px;
}
.evFaq details {
  padding: 20px 0;
  border-top: 1px solid var(--el);
}
.evFaq summary {
  cursor: pointer;
  font-size: 14px;
}
.evFaq details p {
  color: var(--em);
  font-size: 12px;
  line-height: 1.8;
}
.evFooter {
  padding: 55px 0;
  background: #030a12;
  border-top: 1px solid var(--el);
  color: #607586;
  font-size: 11px;
}
.evFooter img {
  width: 180px;
  height: 48px;
  object-fit: contain;
  object-position: left;
  mix-blend-mode: screen;
}
.evFooter p {
  margin: 16px 0;
}
@media (max-width: 820px) {
  .evWrap {
    width: calc(100% - 28px);
  }
  .evNav {
    height: 64px;
  }
  .evBrand {
    width: 135px;
    height: 42px;
  }
  .evLinks {
    display: none;
  }
  .evNavCta {
    min-height: 40px;
    padding-inline: 13px;
    font-size: 11px;
  }
  .evHero {
    padding: 16px 0 34px;
  }
  .evHeroGrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .evHeroArt {
    order: -1;
    border-radius: 14px;
    aspect-ratio: 16/9;
    background: #cceeff;
  }
  .evHeroArt img {
    object-fit: contain;
  }
  .evHeroCopy {
    padding: 0 4px;
  }
  .evLive {
    margin-top: 0;
  }
  .evHero h1 {
    font-size: 38px;
  }
  .evHeroCopy > p {
    font-size: 13px;
  }
  .evMax {
    margin-top: 20px;
  }
  .evMax strong {
    font-size: 56px;
  }
  .evActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .evLevel {
    top: 64px;
    height: 54px;
  }
  .evLevel > .evWrap {
    gap: 12px;
  }
  .evLevel button {
    min-width: 45px;
  }
  .evActivities {
    padding-bottom: 70px;
  }
  .evFilter {
    padding-top: 2px;
  }
  .evGroup {
    padding-top: 48px;
  }
  .evGroupHead h2 {
    font-size: 25px;
  }
  .evCards,
  .evCount2,
  .evCount4 {
    grid-template-columns: 1fr;
  }
  .evCardImg {
    aspect-ratio: 16/9;
  }
  .evDownload {
    padding: 65px 0;
  }
  .evDownloadGrid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .evDownloadGrid > img {
    order: -1;
  }
  .evDownload h2 {
    font-size: 34px;
  }
  .evFaq {
    padding: 65px 0;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .evFooter {
    padding-bottom: 65px;
  }
}
@media (max-width: 390px) {
  .evHero h1 {
    font-size: 34px;
  }
  .evNavCta {
    padding-inline: 10px;
  }
  .evActions a {
    padding-inline: 9px;
  }
  .evReward strong {
    font-size: 31px;
  }
  .evDownload h2 {
    font-size: 31px;
  }
}

/* Complete official-site ending. */
.evFaq > div:first-child > p {
  color: var(--em);
  font-size: 13px;
  line-height: 1.8;
  max-width: 330px;
}
.evFaq details {
  margin-bottom: 10px;
  padding: 0 18px;
  border: 1px solid #ffffff10;
  border-radius: 12px;
  background: #0b1928;
}
.evFaq details[open] {
  border-color: var(--el);
  background: #0e2134;
}
.evFaq summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  font-weight: 700;
}
.evFaq summary::-webkit-details-marker {
  display: none;
}
.evFaq summary:after {
  content: "＋";
  color: var(--eg);
  font-size: 18px;
}
.evFaq details[open] summary:after {
  content: "－";
}
.evFaq details p {
  margin: 0;
  padding: 0 0 18px;
  max-width: 620px;
}
.evSupport {
  padding: 42px 0;
  background: linear-gradient(115deg, #173550, #0c1d2e);
  border-block: 1px solid var(--el);
}
.evSupport > .evWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
}
.evSupport small {
  color: var(--eg);
  letter-spacing: 0.2em;
}
.evSupport h2 {
  font-size: 28px;
  margin: 5px 0;
}
.evSupport p {
  color: var(--em);
  font-size: 12px;
}
.evSupport > .evWrap > div:last-child {
  display: flex;
  align-items: center;
  gap: 16px;
}
.evSupport span {
  color: #718697;
  font-size: 11px;
}
.evFooter {
  padding: 62px 0 24px;
}
.evFooterGrid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr 0.65fr 1.2fr;
  gap: 55px;
}
.evFooterBrand img {
  width: 190px;
}
.evFooterBrand p {
  color: #a9bbc6;
  margin: 14px 0 2px;
}
.evFooterBrand small {
  color: #526878;
}
.evFooter h3 {
  font-size: 12px;
  color: #d8e5eb;
  margin: 0 0 15px;
}
.evFooterGrid > div:not(:first-child) {
  display: flex;
  flex-direction: column;
}
.evFooter a {
  color: #718697;
  margin: 5px 0;
  font-size: 11px;
}
.evFooter a:hover {
  color: var(--egl);
}
.evFooterNotice p {
  margin: 0;
  color: #718697;
  line-height: 1.8;
}
.evFooterNotice span {
  margin-top: 12px;
  color: #4d6373;
}
.evCopyright {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid #ffffff0c;
  display: flex;
  justify-content: space-between;
  color: #405666;
}
@media (max-width: 820px) {
  .evFaq > div:first-child > p {
    max-width: none;
  }
  .evFaq details {
    padding-inline: 15px;
  }
  .evSupport {
    padding: 34px 0;
  }
  .evSupport > .evWrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }
  .evSupport > .evWrap > div:last-child {
    width: 100%;
    justify-content: space-between;
  }
  .evSupport h2 {
    font-size: 25px;
  }
  .evFooterGrid {
    grid-template-columns: 1fr 1fr;
    gap: 38px 25px;
  }
  .evFooterBrand,
  .evFooterNotice {
    grid-column: span 2;
  }
  .evFooterNotice {
    padding-top: 25px;
    border-top: 1px solid #ffffff0c;
  }
  .evCopyright {
    margin-top: 32px;
    flex-direction: column;
    gap: 5px;
  }
}

/* Mobile art direction: editorial hierarchy instead of stacked widgets. */
@media (max-width: 820px) {
  .evNav {
    background: #071421;
    border-color: #ffffff0c;
  }
  .evNavCta {
    background: #edf5f7;
    color: #122130;
    box-shadow: none;
    border-radius: 9px;
  }
  .evHero {
    padding: 12px 0 28px;
    background: radial-gradient(80% 45% at 50% 0, #17334b55, transparent 75%);
  }
  .evHeroGrid {
    gap: 18px;
  }
  .evHeroArt {
    border-radius: 11px;
    border-color: #ffffff18;
    box-shadow: 0 18px 45px #0005;
  }
  .evHeroCopy {
    padding: 0 3px;
  }
  .evLive {
    margin-top: 4px;
    padding: 5px 11px;
    background: transparent;
    border-color: #d0ae6340;
    font-size: 10px;
    color: #d9c48f;
  }
  .evLive i {
    width: 5px;
    height: 5px;
  }
  .evHeroCopy > small {
    display: none;
  }
  .evHero h1 {
    font-size: 36px;
    line-height: 1.12;
    margin: 22px 0 10px;
    letter-spacing: -0.045em;
  }
  .evHero h1 em {
    color: #e9d28f;
  }
  .evHeroCopy > p {
    font-size: 12px;
    color: #8498a8;
    letter-spacing: 0.02em;
  }
  .evMax {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2px 12px;
    margin-top: 22px;
    padding: 15px 16px;
    border: 1px solid #d0ae6328;
    border-radius: 13px;
    background: linear-gradient(115deg, #0d2032, #091726);
  }
  .evMax > span {
    grid-column: 1;
    color: #8195a4;
    font-size: 10px;
  }
  .evMax strong {
    grid-column: 2;
    grid-row: 1/3;
    font-size: 44px;
    line-height: 0.95;
    text-shadow: none;
  }
  .evMax b {
    grid-column: 1;
    font-size: 11px;
    color: #d6bd78;
  }
  .evMax small {
    grid-column: 1/3;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ffffff0b;
    font-size: 9px;
    color: #5e7383;
  }
  .evActions {
    margin-top: 12px;
    gap: 8px;
  }
  .evActions .evPrimary,
  .evActions .evGhost {
    min-height: 46px;
    border-radius: 10px;
  }
  .evActions .evPrimary {
    background: #e8cf84;
    box-shadow: none;
  }
  .evActions .evGhost {
    border-color: #ffffff1f;
    color: #d9e4e9;
    background: #ffffff03;
  }
}
@media (max-width: 390px) {
  .evHero h1 {
    font-size: 33px;
  }
  .evMax strong {
    font-size: 40px;
  }
  .evMax {
    padding: 14px;
  }
  .evLive {
    font-size: 9px;
  }
}

/* Real mobile capture corrections: stable header contrast and less obstruction. */
@media (max-width: 800px) {
  .cNav {
    top: 8px;
    width: calc(100% - 16px);
    height: 58px;
    padding: 6px 8px 6px 10px;
    border: 1px solid #b7ebfa38;
    border-radius: 14px;
    background: #061b2bd9;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px #00101d3d;
  }
  .cNav .cBrand {
    height: 38px;
  }
  .cNav .cBrand img {
    mix-blend-mode: screen;
    filter: brightness(1.35) contrast(1.08);
  }
  .cNav .cDownload {
    min-height: 38px;
    padding: 9px 12px;
  }
  .cPromos {
    padding-top: 34px;
  }
  .mobileDock {
    padding: 4px;
    border-radius: 13px;
  }
  .mobileDock a {
    min-height: 42px;
    padding: 10px;
    font-size: 11px;
  }
  .conceptC {
    padding-bottom: 64px;
  }
}

/* Mobile header is part of the page flow, never a floating overlay. */
@media (max-width: 800px) {
  .cNav {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: 70px;
    padding: 8px 18px;
    border: 0;
    border-radius: 0;
    background: #071d2f;
    box-shadow: none;
    backdrop-filter: none;
  }
  .cNav .cBrand {
    width: 145px;
    height: 44px;
  }
  .cNav .cDownload {
    min-height: 40px;
    padding: 9px 14px;
  }
  .cHero {
    height: 540px;
  }
  .cHeroImage {
    top: 0;
    height: 250px;
    object-position: 73% center;
  }
  .cHeroShade {
    top: 0;
    height: 270px;
  }
  .cCopy {
    top: 245px;
  }
  .mobileDock {
    display: none !important;
  }
  .conceptC {
    padding-bottom: 0;
  }
}
@media (max-width: 390px) {
  .cNav {
    padding-inline: 14px;
  }
  .cNav .cBrand {
    width: 126px;
  }
  .cHero {
    height: 530px;
  }
  .cHeroImage {
    height: 238px;
  }
  .cHeroShade {
    height: 256px;
  }
  .cCopy {
    top: 234px;
  }
}

/* ===== concept-d only —— 在 concept-c 之外新增的机制所需样式 ===== */
.conceptD .dTotal {
  margin: 14px 0 0;
  font-size: 13px;
  color: #8da8ba;
}
.conceptD .dTotal b {
  color: #f3cf7b;
  font-weight: 800;
  border-bottom: 1px dashed #6d8496;
  cursor: help;
}
.dTick {
  border-top: 1px solid #86d9f522;
  border-bottom: 1px solid #86d9f522;
  background: #bdeeff08;
  overflow: hidden;
  position: relative;
}
.dTick:before,
.dTick:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.dTick:before {
  left: 0;
  background: linear-gradient(90deg, #06192e, transparent);
}
.dTick:after {
  right: 0;
  background: linear-gradient(-90deg, #06192e, transparent);
}
.dTickTrack {
  display: flex;
  gap: 34px;
  padding: 11px 0;
  width: max-content;
  animation: dRoll 48s linear infinite;
}
.dTick:hover .dTickTrack {
  animation-play-state: paused;
}
@keyframes dRoll {
  to {
    transform: translateX(-50%);
  }
}
.dTk {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #98b4c8;
  white-space: nowrap;
}
.dTk i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5bc98b;
  box-shadow: 0 0 6px #5bc98b;
}
.dTk em {
  font-style: normal;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #6d8496;
}
.dTk b {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #f2c76e;
}
.conceptD .dRule {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #8da8ba;
}
.conceptD .dWarn {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: #c9a15e;
}
.dSign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 12px;
}
.dSign > div {
  padding: 13px 15px;
  border: 1px solid #78cce92a;
  border-radius: 12px;
  background: #0b2941aa;
}
.dSign b {
  display: block;
  color: #bdeeff;
  font-size: 13px;
  margin-bottom: 4px;
}
.dSign span {
  display: block;
  color: #9fb6c5;
  font-size: 11.5px;
  line-height: 1.7;
}
.dSign em {
  display: block;
  font-style: normal;
  color: #c9a15e;
  font-size: 11px;
  margin-top: 4px;
}
.dLines {
  color: #7f98a8;
  font-size: 11.5px;
  margin: 0 0 6px;
}
.dDomains {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.dDomains span {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid #86d9f522;
  color: #98b4c8;
}
.dDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 9px 15px calc(9px + env(safe-area-inset-bottom));
  background: #061526f2;
  backdrop-filter: blur(16px);
  border-top: 1px solid #bdeeff2e;
}
.dDock > div {
  flex: 1;
  min-width: 0;
}
.dDock small {
  display: block;
  color: #7f98a8;
  font-size: 11px;
}
.dDock strong {
  display: block;
  color: #f2c76e;
  font:
    800 18px/1.3 ui-monospace,
    Menlo,
    Consolas,
    monospace;
}
.dDock .evPrimary {
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
}
@media (max-width: 800px) {
  .dDock {
    display: flex;
  }
  .conceptD {
    padding-bottom: 74px;
  }
  .dSign {
    grid-template-columns: 1fr;
  }
  .conceptD .conceptSwitch {
    bottom: 78px;
  }
}