:root {
  --ink: #263130;
  --muted: #66736e;
  --paper: #fffaf2;
  --cream: #fff4d8;
  --sun: #ffd86b;
  --orange: #ff874a;
  --rose: #ff5f7b;
  --pink: #ffb9d2;
  --mint: #45d0aa;
  --aqua: #38cbe1;
  --sky: #bfefff;
  --violet: #bca8ff;
  --line: rgba(38, 63, 59, .12);
  --shadow: 0 22px 60px rgba(50, 89, 83, .16);
  --soft-shadow: 0 16px 34px rgba(55, 92, 86, .12);
  --hero-min: 540px;
  --hero-ideal: 64vh;
  --hero-max: 660px;
  --candy-border: rgba(255, 255, 255, .9);
  --hero-x: 0px;
  --hero-y: 0px;
  --watermark-text: "乐途跑跑西游记";
  --watermark-left: 72.0%;
  --watermark-top: 78.0%;
  --watermark-size: 12px;
  --watermark-opacity: 0.86;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 216, 107, .38), transparent 26%),
    radial-gradient(circle at 92% 14%, rgba(255, 185, 210, .34), transparent 26%),
    radial-gradient(circle at 12% 74%, rgba(69, 208, 170, .22), transparent 30%),
    radial-gradient(circle at 70% 78%, rgba(188, 168, 255, .2), transparent 24%),
    linear-gradient(180deg, #f6fffb 0%, #fff8e8 38%, #f9fffd 100%);
  background-size: 120% 120%, 120% 120%, 120% 120%, 120% 120%, 100% 100%;
  animation: dreamy-bg 16s ease-in-out infinite alternate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 4px, transparent 5px),
    radial-gradient(circle, rgba(255,135,74,.16) 0 3px, transparent 4px);
  background-size: 74px 74px, 118px 118px;
  background-position: 8px 12px, 38px 50px;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
img {
  -webkit-user-drag: none;
  user-select: none;
}
h1, h2, h3, p { letter-spacing: 0; }
.is-hidden { display: none !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(16px, 5vw, 72px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68));
  border-bottom: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 14px 34px rgba(45, 91, 86, .08);
  backdrop-filter: blur(22px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 10px 24px rgba(44, 110, 120, .09);
}
.brand-icon {
  width: 46px;
  height: 46px;
  border: 3px solid #fff;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(34, 126, 159, .22);
}
.brand strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
}
.brand small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #42524e;
  font-weight: 900;
}
.nav a {
  position: relative;
  overflow: hidden;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav a::after,
.btn::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -70%;
  width: 52%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-18deg);
  transition: transform .55s ease;
}
.nav a:hover::after,
.btn:hover::after {
  transform: translateX(330%) skewX(-18deg);
}
.nav a:not(.nav-download) {
  background: rgba(255,255,255,.58);
}
.nav-download {
  color: white;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  box-shadow: 0 12px 24px rgba(255, 105, 66, .26);
}
.mobile-download {
  display: none;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  align-items: center;
  justify-content: center;
  color: white;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  box-shadow: 0 14px 28px rgba(255, 105, 66, .24), 0 0 0 8px rgba(255,255,255,.42);
  font-weight: 900;
  white-space: nowrap;
}
.mobile-download::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -72%;
  width: 58%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.68), transparent);
  transform: skewX(-18deg);
  animation: mobile-download-shine 3.8s ease-in-out infinite;
}

.hero {
  position: relative;
  min-height: clamp(var(--hero-min), var(--hero-ideal), var(--hero-max));
  display: grid;
  grid-template-columns: minmax(520px, 680px) minmax(260px, 360px) minmax(360px, 440px);
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(30px, 4vw, 50px) clamp(28px, 4.5vw, 78px);
  overflow: hidden;
  border-bottom-left-radius: 58px;
  border-bottom-right-radius: 58px;
  isolation: isolate;
  background: #e8fbff;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.9), 0 24px 70px rgba(68, 137, 139, .12);
}
.hero-bg,
.hero-shade,
.hero-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-bg {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.02);
}
.hero-shade {
  background:
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .02), rgba(255,255,255,.42) 30%, transparent 54%),
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.74) 33%, rgba(255,255,255,.08) 74%),
    linear-gradient(0deg, rgba(255, 249, 229, .94) 0%, rgba(255,255,255,0) 38%);
}
.hero-dots {
  opacity: .55;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255, 95, 123, .28) 0 9px, transparent 10px),
    radial-gradient(circle at 24% 82%, rgba(56, 203, 225, .26) 0 12px, transparent 13px),
    radial-gradient(circle at 92% 28%, rgba(255, 216, 107, .35) 0 13px, transparent 14px),
    radial-gradient(circle at 76% 88%, rgba(69, 208, 170, .24) 0 10px, transparent 11px);
  animation: float-dots 9s ease-in-out infinite alternate;
}
.hero-aurora {
  position: absolute;
  inset: -18% -8% auto auto;
  width: 62%;
  height: 92%;
  z-index: 0;
  opacity: .82;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 42%, rgba(255,255,255,.96) 0 7%, rgba(255,255,255,0) 18%),
    conic-gradient(from 210deg, rgba(255,216,107,.58), rgba(255,95,123,.38), rgba(56,203,225,.52), rgba(69,208,170,.44), rgba(255,216,107,.58));
  border-radius: 46% 54% 64% 36%;
  filter: blur(18px) saturate(1.2);
  transform: translate3d(var(--hero-x), var(--hero-y), 0) rotate(8deg);
  animation: aurora-breathe 8s ease-in-out infinite alternate;
}
.hero-lux {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .58;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.64) 42%, transparent 52% 100%),
    radial-gradient(circle at 72% 28%, rgba(255,216,107,.28), transparent 18%),
    radial-gradient(circle at 84% 72%, rgba(56,203,225,.18), transparent 22%);
  mix-blend-mode: screen;
  transform: translateX(-24%);
  animation: hero-lux-sweep 7.5s ease-in-out infinite;
}
.hero::before {
  content: "";
  position: absolute;
  right: clamp(18px, 7vw, 110px);
  bottom: -120px;
  z-index: 0;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 24%, rgba(255,255,255,.22) 25% 36%, rgba(56,203,225,.16) 37% 48%, transparent 49%),
    conic-gradient(from 20deg, rgba(255,95,123,.28), rgba(255,216,107,.22), rgba(69,208,170,.24), rgba(188,168,255,.22), rgba(255,95,123,.28));
  animation: stage-ring 14s linear infinite;
}
.hero-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-confetti span {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 4px solid rgba(255,255,255,.88);
  border-radius: 8px;
  background: linear-gradient(135deg, var(--sun), var(--rose));
  box-shadow: 0 10px 22px rgba(255, 117, 121, .18);
  animation: confetti-float 6.5s ease-in-out infinite;
}
.hero-confetti span:nth-child(1) { left: 8%; top: 20%; }
.hero-confetti span:nth-child(2) { left: 42%; top: 12%; width: 24px; height: 24px; background: linear-gradient(135deg, var(--aqua), #fff); animation-delay: -1.4s; }
.hero-confetti span:nth-child(3) { right: 10%; top: 16%; border-radius: 999px; background: linear-gradient(135deg, var(--pink), var(--violet)); animation-delay: -2.2s; }
.hero-confetti span:nth-child(4) { left: 18%; bottom: 18%; width: 14px; height: 14px; background: linear-gradient(135deg, var(--mint), #fff); animation-delay: -3s; }
.hero-confetti span:nth-child(5) { right: 42%; bottom: 12%; width: 22px; height: 12px; background: linear-gradient(135deg, var(--orange), var(--sun)); animation-delay: -4.1s; }
.hero-confetti span:nth-child(6) { right: 6%; bottom: 34%; width: 15px; height: 26px; background: linear-gradient(135deg, #fff, var(--aqua)); animation-delay: -5s; }
.hero-copy,
.hero-showcase,
.hero-side,
.hero-panel {
  position: relative;
  z-index: 1;
}
.hero-copy {
  max-width: 700px;
  transform: none;
  opacity: 1;
  animation: none;
}
.app-token {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  box-shadow: var(--soft-shadow);
  font-weight: 900;
}
.app-badge {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 5px solid rgba(255,255,255,.9);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(33, 111, 152, .22);
}
.eyebrow {
  margin: 0 0 12px;
  color: #e84f4f;
  font-weight: 900;
}
h1 {
  margin: 0;
  font-size: clamp(48px, 7.6vw, 92px);
  line-height: 1.02;
  text-shadow: 0 8px 0 rgba(255,255,255,.62), 0 24px 46px rgba(48, 105, 98, .16);
}
.hero h1 {
  position: relative;
  display: inline-block;
  padding: 0 10px 10px 0;
  color: #243431;
  font-family: "Yuanti SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  text-shadow:
    0 3px 0 rgba(255,255,255,.96),
    3px 0 0 rgba(255,255,255,.9),
    -3px 0 0 rgba(255,255,255,.9),
    0 -3px 0 rgba(255,255,255,.9),
    0 9px 0 rgba(255,216,107,.34),
    0 18px 28px rgba(255,95,123,.18),
    0 24px 42px rgba(56,203,225,.18);
}
.hero h1::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -10px;
  bottom: 5px;
  z-index: -1;
  height: .28em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,95,123,.14), rgba(255,216,107,.24), rgba(56,203,225,.16));
  box-shadow: 0 14px 28px rgba(255, 117, 121, .1);
}
.hero h1::after {
  content: "";
  position: absolute;
  right: .12em;
  top: -.06em;
  width: .22em;
  height: .22em;
  border: 4px solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff, var(--aqua));
  box-shadow: 0 10px 22px rgba(56,203,225,.22);
  transform: rotate(10deg);
  animation: title-gem 3.8s ease-in-out infinite;
}
.lead {
  max-width: 620px;
  margin: 22px 0 0;
  color: #42524e;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.75;
}
.hero-actions,
.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 136px;
  min-height: 52px;
  padding: 0 25px;
  border: 0;
  border-radius: 999px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(65, 82, 78, .14);
}
.btn.primary {
  color: white;
  background: linear-gradient(135deg, var(--rose), var(--orange));
}
.btn.secondary {
  color: #17606b;
  background: linear-gradient(135deg, #d9fbff, #f2fff1);
}
.mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 560px;
  margin-top: 22px;
}
.mini-badges span,
.mascot-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: #39524d;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(48, 105, 98, .08);
}
.hero-microline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin-top: 18px;
  padding: 9px 13px 9px 9px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 16px 34px rgba(56, 203, 225, .11);
  backdrop-filter: blur(10px);
}
.hero-microline span {
  flex: 0 0 auto;
  padding: 7px 11px;
  color: white;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  font-weight: 900;
}
.hero-microline strong {
  color: #39524d;
  font-size: 14px;
  line-height: 1.4;
}
.hero-showcase {
  display: grid;
  gap: 12px;
  align-self: center;
  justify-self: center;
  width: min(100%, 350px);
  padding-top: 16px;
  transform: none;
  opacity: 1;
  animation: none;
}
.showcase-card {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  border: 7px solid rgba(255,255,255,.88);
  border-radius: 30px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(218,250,255,.76));
  box-shadow: 0 24px 54px rgba(45, 91, 86, .16), inset 0 0 0 1px rgba(255,255,255,.72);
  isolation: isolate;
}
.showcase-card.big {
  min-height: 154px;
}
.showcase-card.tilt-left { transform: rotate(-2deg) translateX(-12px); }
.showcase-card.tilt-right { transform: rotate(2deg) translateX(12px); }
.showcase-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 1;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}
.showcase-card.big img {
  object-fit: contain;
  padding: 4px 0;
}
.showcase-card div {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px rgba(45, 91, 86, .11);
  backdrop-filter: blur(10px);
}
.showcase-card span {
  color: #e84f4f;
  font-size: 12px;
  font-weight: 900;
}
.showcase-card strong {
  color: #253634;
  font-size: 13px;
  white-space: nowrap;
}
.showcase-card:hover {
  animation: card-bounce .58s cubic-bezier(.2,.9,.25,1.2);
  box-shadow: 0 30px 76px rgba(255, 95, 123, .2), 0 20px 50px rgba(56, 203, 225, .16);
  filter: saturate(1.08);
}
.showcase-card:hover img {
  transform: scale(1.018);
  filter: saturate(1.1) brightness(1.04);
}
.hero-side {
  display: grid;
  align-items: end;
  min-height: 390px;
  opacity: 1;
  transform: none;
  animation: none;
}
.hero-crown {
  justify-self: center;
  position: relative;
  z-index: 6;
  margin: 0 0 -10px;
  padding: 9px 18px;
  color: #ab3c50;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,244,216,.9));
  box-shadow: 0 14px 30px rgba(255, 117, 121, .16);
  font-weight: 900;
  transform: rotate(-3deg);
}
.hero-orbit {
  position: absolute;
  inset: 44px 18px auto auto;
  z-index: 2;
  width: 260px;
  height: 260px;
  pointer-events: none;
  border: 1px dashed rgba(255,255,255,.7);
  border-radius: 50%;
  animation: orbit-spin 16s linear infinite;
}
.hero-orbit span {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 5px solid #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sun), var(--rose));
  box-shadow: 0 14px 28px rgba(255,95,123,.18);
}
.hero-orbit span:nth-child(1) { left: 50%; top: -17px; }
.hero-orbit span:nth-child(2) { right: -10px; bottom: 42px; background: linear-gradient(135deg, var(--aqua), #fff); }
.hero-orbit span:nth-child(3) { left: 12px; bottom: 24px; background: linear-gradient(135deg, var(--mint), var(--sun)); }
.poker-stack {
  position: relative;
  z-index: 4;
  height: 360px;
  margin-bottom: 8px;
}
.poker-stack img {
  position: absolute;
  bottom: 0;
  width: 170px;
  height: 252px;
  object-fit: cover;
  object-position: top center;
  border: 10px solid rgba(255,255,255,.94);
  border-radius: 36px;
  background: white;
  box-shadow: 0 24px 48px rgba(31, 76, 76, .22), inset 0 0 0 1px rgba(255,255,255,.8);
  animation: card-idle 5.2s ease-in-out infinite;
}
.poker-stack img:nth-child(2) {
  animation-delay: -.9s;
}
.poker-stack img:nth-child(3) {
  animation-delay: -1.8s;
}
.poker-stack img:nth-child(4) {
  animation-delay: -2.6s;
}
.poker-stack img:nth-child(1) {
  left: 8px;
  transform: rotate(-10deg) translateY(18px);
}
.poker-stack img:nth-child(2) {
  left: 92px;
  z-index: 2;
  transform: rotate(5deg);
}
.poker-stack img:nth-child(3) {
  left: 184px;
  z-index: 3;
  transform: rotate(12deg) translateY(24px);
}
.poker-stack img:nth-child(4) {
  left: 138px;
  z-index: 4;
  transform: rotate(-3deg) translateY(-42px);
}
.hero-panel {
  z-index: 5;
  justify-self: end;
  width: min(100%, 304px);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}
.hero-chips {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -18px 0 10px;
}
.hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 5px 11px 5px 6px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 26px rgba(45, 91, 86, .12);
  font-size: 13px;
  font-weight: 900;
}
.hero-chips img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  object-position: top center;
  border-radius: 999px;
}
.hero-panel span {
  color: var(--rose);
  font-weight: 900;
}
.hero-panel strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}
.hero-panel p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.poker-stack::after,
.showcase-card::after,
.candy-main::after,
.candy-side article::after,
.mascot-card::after,
.role-grid figure::after,
.promo-grid figure::after,
.media-panel::after,
.screenshots figure::after,
.download-cover::after,
.journey-grid article::after {
  content: var(--watermark-text);
  position: absolute;
  left: var(--watermark-left);
  top: var(--watermark-top);
  z-index: 8;
  padding: 5px 9px;
  color: rgba(255,255,255,var(--watermark-opacity));
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(32, 68, 64, .24);
  font-size: var(--watermark-size);
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  white-space: nowrap;
}

@keyframes candy-pop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-8px) scale(1.025); }
  100% { transform: translateY(-6px) scale(1.018); }
}

@keyframes shine-sweep {
  0% { transform: translateX(-140%) rotate(18deg); opacity: 0; }
  18% { opacity: .72; }
  100% { transform: translateX(170%) rotate(18deg); opacity: 0; }
}

@keyframes soft-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes dreamy-bg {
  0% { background-position: 0% 0%, 100% 0%, 0% 100%, 0 0; }
  100% { background-position: 12% 8%, 86% 10%, 10% 84%, 0 0; }
}

@keyframes float-dots {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(12px,-10px,0) scale(1.02); }
}

@keyframes aurora-breathe {
  0% { transform: translate3d(var(--hero-x), var(--hero-y), 0) rotate(8deg) scale(.96); filter: blur(18px) saturate(1.1); }
  100% { transform: translate3d(calc(var(--hero-x) * -1), calc(var(--hero-y) * .6), 0) rotate(-4deg) scale(1.05); filter: blur(15px) saturate(1.32); }
}

@keyframes hero-lux-sweep {
  0%, 42%, 100% { transform: translateX(-28%); opacity: .36; }
  64% { transform: translateX(22%); opacity: .68; }
}

@keyframes stage-ring {
  to { transform: rotate(360deg); }
}

@keyframes confetti-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(18deg); }
}

@keyframes hero-copy-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-side-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes card-idle {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.08) brightness(1.035); }
}

@keyframes image-pop {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  32% { transform: translateY(-10px) scale(1.045) rotate(-.6deg); }
  58% { transform: translateY(2px) scale(.992) rotate(.35deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes card-bounce {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-8px) scale(1.025); }
  62% { transform: translateY(2px) scale(.997); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes mobile-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes mobile-glow {
  0%, 100% { box-shadow: 0 18px 42px rgba(45, 91, 86, .12), 0 0 0 rgba(255, 95, 123, 0); }
  50% { box-shadow: 0 26px 62px rgba(255, 117, 121, .18), 0 16px 42px rgba(56, 203, 225, .14); }
}

@keyframes mobile-spark {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes mobile-download-shine {
  0%, 58%, 100% { transform: translateX(0) skewX(-18deg); }
  78% { transform: translateX(330%) skewX(-18deg); }
}

@keyframes soft-glow-pulse {
  0%, 100% { box-shadow: 0 24px 60px rgba(255, 117, 121, .12), 0 12px 34px rgba(56, 203, 225, .12); }
  50% { box-shadow: 0 34px 86px rgba(255, 117, 121, .22), 0 18px 46px rgba(56, 203, 225, .18); }
}

@keyframes border-glow {
  0%, 100% { box-shadow: 0 22px 54px rgba(45, 91, 86, .12), 0 0 0 rgba(255, 216, 107, 0); }
  50% { box-shadow: 0 28px 72px rgba(45, 91, 86, .15), 0 0 34px rgba(255, 216, 107, .18); }
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sparkle-drift {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.3) rotate(0deg);
  }
  18% { opacity: .95; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sparkle-shift)), -56px) scale(1.35) rotate(150deg);
  }
}

@keyframes button-burst {
  0% { box-shadow: 0 0 0 0 rgba(255, 95, 123, .34), 0 14px 30px rgba(65, 82, 78, .14); }
  100% { box-shadow: 0 0 0 18px rgba(255, 95, 123, 0), 0 18px 36px rgba(255, 105, 66, .24); }
}

@keyframes title-sheen {
  0%, 60%, 100% { background-position: 0% 50%; }
  72% { background-position: 100% 50%; }
}

@keyframes title-gem {
  0%, 100% { transform: rotate(10deg) translateY(0) scale(1); }
  50% { transform: rotate(18deg) translateY(-4px) scale(1.08); }
}

.fx-reveal {
  opacity: 0;
  transform: translateY(30px) scale(.98);
  transition: opacity .62s cubic-bezier(.2,.8,.2,1), transform .62s cubic-bezier(.2,.8,.2,1), filter .32s ease;
  transition-delay: var(--fx-delay, 0ms);
}

.fx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: none;
}

.cursor-sparkle {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 10px;
  height: 10px;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 18%, transparent 20%),
    conic-gradient(from 45deg, transparent 0 18%, rgba(255,95,123,.9) 18% 28%, transparent 28% 46%, rgba(56,203,225,.9) 46% 56%, transparent 56% 74%, rgba(255,216,107,.95) 74% 84%, transparent 84%);
  filter: drop-shadow(0 0 10px rgba(255, 185, 210, .72));
  animation: sparkle-drift .72s ease-out forwards;
}

.fx-burst {
  animation: button-burst .5s ease-out;
}

.app-token,
.mini-badges span,
.mascot-tags span,
.candy-main,
.candy-side article,
.feature-grid article,
.journey-grid article,
.mascot-card,
.candy-main,
.candy-side article,
.role-grid figure,
.promo-grid figure,
.media-panel,
.screenshots figure,
.download-cover,
.download-card,
.album-grid img {
  transition: transform .28s cubic-bezier(.2,.9,.25,1.2), box-shadow .28s ease, filter .28s ease, border-color .28s ease;
}

.journey-grid article,
.mascot-card,
.role-grid figure,
.promo-grid figure,
.media-panel,
.screenshots figure,
.download-cover {
  isolation: isolate;
}

.journey-grid img,
.candy-main img,
.candy-side img,
.role-grid img,
.promo-grid img,
.screenshots img,
.download-cover > img,
.media-panel img {
  transition: transform .38s cubic-bezier(.2,.8,.2,1), filter .32s ease;
  opacity: 1 !important;
  visibility: visible !important;
}

.feature-grid article:hover,
.journey-grid article:hover,
.mascot-card:hover,
.role-grid figure:hover,
.promo-grid figure:hover,
.media-panel:hover,
.screenshots figure:hover,
.download-cover:hover,
.download-card:hover,
.album-grid img:hover {
  transform: translateY(-7px) scale(1.018);
  border-color: rgba(255,255,255,.98);
  box-shadow: 0 28px 70px rgba(255, 117, 121, .18), 0 18px 48px rgba(49, 111, 103, .16);
  filter: saturate(1.08);
}

.journey-grid article:hover img,
.role-grid figure:hover img,
.promo-grid figure:hover img,
.screenshots figure:hover img,
.download-cover:hover > img,
.media-panel:hover img {
  transform: scale(1.035);
  filter: saturate(1.08) brightness(1.03);
}

.app-token:hover,
.mini-badges span:hover,
.mascot-tags span:hover {
  transform: translateY(-4px) scale(1.035);
  box-shadow: 0 18px 34px rgba(56, 203, 225, .16);
}

.poker-stack img {
  transition: transform .34s cubic-bezier(.2,.9,.25,1.2), box-shadow .28s ease, filter .28s ease;
}

.poker-stack img:hover {
  z-index: 10;
  filter: saturate(1.12) brightness(1.04);
  box-shadow: 0 30px 72px rgba(255, 95, 123, .22), 0 18px 44px rgba(31, 76, 76, .2);
}

.poker-stack img:nth-child(1):hover { transform: rotate(-7deg) translateY(-14px) scale(1.06); }
.poker-stack img:nth-child(2):hover { transform: rotate(3deg) translateY(-18px) scale(1.06); }
.poker-stack img:nth-child(3):hover { transform: rotate(8deg) translateY(-10px) scale(1.06); }
.poker-stack img:nth-child(4):hover { transform: rotate(-1deg) translateY(-62px) scale(1.06); }

.hero img,
.showcase-card img,
.candy-main img,
.candy-side img,
.journey-grid img,
.role-grid img,
.promo-grid img,
.screenshots img,
.media-panel img,
.album-grid img {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

.section {
  position: relative;
  padding: 78px clamp(18px, 6vw, 86px);
}
.section-heading {
  max-width: 880px;
  margin-bottom: 32px;
}
.section-heading.compact {
  max-width: none;
  text-align: center;
}
.section-heading p {
  margin: 0 0 8px;
  color: var(--aqua);
  font-weight: 900;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 1.12;
  background: linear-gradient(90deg, #263130 0%, #263130 36%, #ff5f7b 48%, #38cbe1 58%, #263130 70%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-sheen 7s ease-in-out infinite;
}

.candy-stage {
  padding-top: 60px;
  padding-bottom: 64px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,185,210,.35), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(56,203,225,.24), transparent 24%),
    linear-gradient(180deg, #fff9ed, #f6fffb);
}
.candy-stage .section-heading {
  width: min(100%, 1540px);
  margin: 0 auto 28px;
}
.candy-stage::before {
  content: "";
  position: absolute;
  inset: 28px clamp(18px, 6vw, 86px) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,135,74,.32), rgba(56,203,225,.32), transparent);
}
.candy-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .78fr);
  gap: 22px;
  align-items: start;
  width: min(100%, 1540px);
  margin: 0 auto;
}
.candy-main,
.candy-side article {
  position: relative;
  overflow: hidden;
  border: 7px solid var(--candy-border);
  border-radius: 34px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 24px 64px rgba(45, 91, 86, .14), inset 0 0 0 1px rgba(255,255,255,.58);
  isolation: isolate;
}
.candy-main {
  height: clamp(380px, 30vw, 560px);
  min-height: 0;
}
.candy-main::before,
.candy-side article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.38), transparent 34%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.72), transparent 18%);
  opacity: .22;
}
.candy-main img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}
.candy-main div {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 3;
  max-width: min(78%, 440px);
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 26px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 34px rgba(45, 91, 86, .12);
  backdrop-filter: blur(12px);
}
.candy-main span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  color: white;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  font-size: 13px;
  font-weight: 900;
}
.candy-main strong {
  display: block;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.18;
}
.candy-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.candy-side article {
  height: clamp(184px, 14.6vw, 268px);
  min-height: 0;
}
.candy-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}
.candy-side b {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 24px rgba(45, 91, 86, .1);
  text-align: center;
}
.candy-main:hover,
.candy-side article:hover {
  animation: card-bounce .58s cubic-bezier(.2,.9,.25,1.2), soft-glow-pulse 1s ease-in-out both;
}
.candy-main:hover img,
.candy-side article:hover img {
  transform: scale(1.018);
  filter: saturate(1.1) brightness(1.04);
}

.intro {
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,244,216,.72));
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 1480px);
  margin: 0 auto;
}
.feature-grid article {
  position: relative;
  min-height: 218px;
  padding: 26px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff, #f8fffb);
  box-shadow: var(--soft-shadow), inset 0 0 0 1px rgba(255,255,255,.62);
}
.feature-grid article::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 216, 107, .38);
}
.feature-grid article:nth-child(2)::after { background: rgba(56, 203, 225, .25); }
.feature-grid article:nth-child(3)::after { background: rgba(255, 185, 210, .34); }
.feature-grid article:nth-child(4)::after { background: rgba(69, 208, 170, .24); }
.feature-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: white;
  border: 4px solid #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--mint), var(--aqua));
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(56, 203, 225, .18);
}
.feature-grid h3 {
  margin: 34px 0 12px;
  font-size: 23px;
}
.feature-grid p,
.copy-panel p,
.faq p,
.download-card p,
.download-notes {
  color: var(--muted);
  line-height: 1.8;
}

.mascot-section {
  padding-top: 34px;
  padding-bottom: 46px;
  background: linear-gradient(180deg, rgba(255,244,216,.72), rgba(244,255,251,.88));
}
.mascot-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 330px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(135deg, rgba(217,251,255,.92), rgba(255,244,216,.96)),
    #fff;
  box-shadow: 0 22px 54px rgba(45, 91, 86, .12), inset 0 0 0 1px rgba(255,255,255,.62);
  animation: border-glow 5.8s ease-in-out infinite;
}
.mascot-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(55, 92, 86, .14));
}
.mascot-card h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.18;
}
.mascot-card p:last-child {
  max-width: 620px;
}
.mascot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.journey-section {
  background: linear-gradient(180deg, #f4fffb, #fff);
}
.journey-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 1480px);
  margin: 0 auto;
}
.journey-grid article {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 32px;
  background: white;
  box-shadow: var(--soft-shadow), inset 0 0 0 1px rgba(255,255,255,.56);
}
.journey-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: top center;
}
.journey-grid div {
  padding: 18px;
}
.journey-grid strong {
  display: block;
  font-size: 21px;
}
.journey-grid span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.65;
}

.role-section {
  background:
    radial-gradient(circle at 8% 12%, rgba(255,185,210,.32), transparent 22%),
    radial-gradient(circle at 92% 18%, rgba(191,239,255,.46), transparent 22%),
    linear-gradient(180deg, #fff, #f4fffb);
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 1500px);
  margin: 0 auto;
}
.role-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 32px;
  background: white;
  box-shadow: 0 20px 45px rgba(45, 91, 86, .13), inset 0 0 0 1px rgba(255,255,255,.6);
}
.role-grid figure:nth-child(3n + 1),
.role-grid figure:nth-child(4n) { transform: none; }
.role-grid figure:nth-child(1),
.role-grid figure:nth-child(4),
.role-grid figure:nth-child(9) {
  grid-column: auto;
  grid-row: auto;
}
.role-grid figure:nth-child(6),
.role-grid figure:nth-child(10) {
  grid-column: auto;
}
.role-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}
.role-grid figcaption {
  padding: 14px 12px 16px;
  text-align: center;
  background: #fff;
}
.role-grid figcaption b {
  font-size: 17px;
}
.role-grid figcaption span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.partner {
  background: linear-gradient(180deg, #f4fffb, #fffaf0);
}
.promo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 1380px);
  margin: 0 auto;
}
.promo-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 30px;
  background: white;
  box-shadow: 0 20px 45px rgba(84, 83, 54, .13), inset 0 0 0 1px rgba(255,255,255,.62);
}
.promo-grid img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: top center;
}
.promo-grid figcaption {
  padding: 14px 12px 16px;
  text-align: center;
  font-weight: 900;
  background: #fff;
}

.companion-wall {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,216,107,.28), transparent 22%),
    linear-gradient(180deg, #fffaf0, #fff);
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 1320px);
  margin: 0 auto;
}
.album-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 12px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.92), transparent 48%),
    linear-gradient(180deg, #e4fbff, #fff5dc);
  box-shadow: var(--soft-shadow);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: 36px;
  align-items: center;
  width: auto;
  margin: 0;
  padding-inline: max(clamp(18px, 6vw, 86px), calc((100vw - 1380px) / 2));
  background: linear-gradient(180deg, #fff, #f4fffb);
}
.media-panel {
  position: relative;
  overflow: hidden;
  border: 10px solid rgba(255,255,255,.9);
  border-radius: 40px;
  background:
    radial-gradient(circle at 16% 16%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(135deg, #e4fbff, #fff5dc);
  box-shadow: 0 30px 80px rgba(45, 91, 86, .16), inset 0 0 0 1px rgba(255,255,255,.72);
}
.media-panel .media-poster {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
.media-ribbon {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 34px rgba(45, 91, 86, .12);
  backdrop-filter: blur(12px);
}
.media-ribbon span {
  color: #e84f4f;
  font-weight: 900;
}
.media-ribbon strong {
  color: #263130;
  font-size: 14px;
}
.copy-panel {
  padding: 8px 0;
}
.copy-panel h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.18;
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 16px;
  padding: 0 16px;
  color: #e84f4f;
  border-radius: 999px;
  background: #fff0f2;
  font-weight: 900;
}
.screenshots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 28px;
  width: auto;
  margin: 0;
  padding-inline: max(clamp(18px, 6vw, 86px), calc((100vw - 1320px) / 2));
  background: #f4fffb;
}
.screenshots figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 34px;
  box-shadow: var(--soft-shadow);
}
.screenshots img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.guide {
  background: linear-gradient(180deg, #fffaf0, #fff);
}
.faq {
  display: grid;
  gap: 14px;
  max-width: 960px;
  margin: 0 auto;
}
details {
  padding: 22px 24px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--soft-shadow);
}
summary {
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
}
.seo-info {
  padding-top: 46px;
  padding-bottom: 54px;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,185,210,.28), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(56,203,225,.22), transparent 22%),
    linear-gradient(180deg, #fff, #f5fffc);
}
.seo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 42px);
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(244,255,251,.86)),
    radial-gradient(circle at 92% 16%, rgba(255,216,107,.3), transparent 28%);
  box-shadow: 0 26px 70px rgba(45, 91, 86, .12), inset 0 0 0 1px rgba(255,255,255,.68);
}
.seo-card h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.18;
}
.seo-card p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  line-height: 1.9;
}
.seo-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.seo-card li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 14px 30px rgba(45, 91, 86, .08);
}
.seo-card li strong {
  color: #253634;
}
.seo-card li span {
  color: var(--muted);
  font-weight: 900;
  text-align: right;
}
.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 30px clamp(18px, 6vw, 86px);
  color: #61706b;
  border-top: 1px solid rgba(83, 150, 141, .16);
  background:
    radial-gradient(circle at 8% 0%, rgba(255,216,107,.22), transparent 24%),
    linear-gradient(180deg, #fff, #f8fffd);
}
.footer strong,
.footer span,
.footer small {
  display: block;
}
.footer strong {
  color: #263130;
}
.footer span {
  margin-top: 6px;
}
.footer small {
  margin-top: 8px;
  color: #7b8884;
}
.footer small a {
  color: #61706b;
  font-weight: 900;
}
.footer small a:hover {
  color: #e84f4f;
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.footer nav a {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 10px 22px rgba(45, 91, 86, .08);
  color: #42524e;
  font-weight: 900;
}

.download-page {
  min-height: 100vh;
}
.download-main {
  min-height: calc(100vh - 71px);
  display: grid;
  place-items: center;
  padding: 42px clamp(18px, 6vw, 86px);
  background:
    linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.46)),
    url("assets/q/海报.webp") center / cover;
}
.download-card {
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(0, 500px);
  gap: 36px;
  align-items: center;
  width: min(100%, 1010px);
  padding: clamp(18px, 4vw, 42px);
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 34px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.download-cover {
  position: relative;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 30px;
  box-shadow: var(--soft-shadow);
}
.download-cover > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.download-icon-card {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px 10px 10px;
  color: var(--ink);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 28px rgba(40, 82, 76, .16);
  font-weight: 900;
}
.download-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
}
.download-copy h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.08;
}
.download-notes {
  margin: 22px 0 0;
  padding-left: 20px;
  font-size: 14px;
}

@media (max-width: 1320px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  }
  .hero-showcase {
    display: none;
  }
}

@media (max-width: 1180px) {
  .candy-stage-grid {
    grid-template-columns: 1fr;
    width: min(100%, 760px);
  }
  .candy-main {
    height: auto;
    min-height: 340px;
  }
  .candy-main img {
    min-height: 340px;
  }
  .candy-side article {
    height: 230px;
  }
  .feature-grid,
  .journey-grid,
  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .promo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .album-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .poker-stack {
    height: 330px;
  }
  .poker-stack img {
    width: 138px;
    height: 214px;
  }
  .poker-stack img:nth-child(2) { left: 70px; }
  .poker-stack img:nth-child(3) { left: 144px; }
  .poker-stack img:nth-child(4) { left: 108px; }
  .hero-orbit {
    width: 220px;
    height: 220px;
  }
}

@media (max-width: 880px) {
  .nav { display: none; }
  .mobile-download {
    display: inline-flex;
  }
  .hero,
  .split,
  .download-card,
  .seo-card {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: auto;
    padding-top: 34px;
    padding-bottom: 34px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.74) 48%, rgba(255,255,255,.42) 100%),
      linear-gradient(0deg, rgba(255, 249, 229, .92), rgba(255,255,255,0) 42%);
  }
  .hero-side {
    min-height: 0;
  }
  .hero-aurora {
    width: 90%;
    height: 58%;
    inset: auto -18% 16% auto;
  }
  .hero::before {
    right: -80px;
    bottom: -100px;
    width: 420px;
  }
  .hero-orbit {
    display: none;
  }
  .hero-microline {
    align-items: flex-start;
    border-radius: 24px;
  }
  .poker-stack {
    height: 210px;
    margin-top: -6px;
    margin-bottom: 12px;
  }
  .poker-stack img {
    width: 116px;
    height: 164px;
    border-radius: 22px;
  }
  .poker-stack img:nth-child(1) { left: 8px; }
  .poker-stack img:nth-child(2) { left: 84px; }
  .poker-stack img:nth-child(3) { left: 160px; }
  .poker-stack img:nth-child(4) { left: 238px; transform: rotate(-3deg) translateY(8px); }
  .hero-panel {
    justify-self: start;
    display: none;
  }
  .promo-grid,
  .screenshots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .candy-main {
    min-height: 340px;
    height: auto;
  }
  .candy-main img {
    min-height: 340px;
  }
  .footer {
    display: block;
  }
  .footer span,
  .footer small {
    display: block;
    margin-top: 8px;
  }
  .footer nav {
    justify-content: flex-start;
    margin-top: 16px;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-inline: 12px;
    gap: 10px;
  }
  .brand {
    max-width: min(72vw, 270px);
    padding-right: 10px;
  }
  .brand-icon {
    width: 42px;
    height: 42px;
  }
  .brand strong {
    font-size: clamp(14px, 4vw, 16px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand small {
    font-size: 11px;
  }
  .mobile-download {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
    box-shadow: 0 12px 24px rgba(255, 105, 66, .22), 0 0 0 6px rgba(255,255,255,.4);
  }
  .hero {
    padding-inline: 16px;
    padding-top: 24px;
    padding-bottom: 26px;
    background:
      radial-gradient(circle at 50% 12%, rgba(255,255,255,.78), transparent 22%),
      linear-gradient(180deg, #dcfbff, #fff6dc);
  }
  .hero-bg {
    object-position: 58% center;
    filter: saturate(1.16) contrast(1.04);
  }
  .hero-dots,
  .hero-aurora {
    animation-duration: 6.5s;
  }
  .app-token {
    animation: mobile-float 3.6s ease-in-out infinite;
  }
  .poker-stack {
    animation: mobile-glow 3.8s ease-in-out infinite;
    border-radius: 22px;
  }
  .mini-badges span:nth-child(odd),
  .hero-chips span:nth-child(odd) {
    animation: mobile-float 4.2s ease-in-out infinite;
  }
  .mini-badges span:nth-child(even),
  .hero-chips span:nth-child(even) {
    animation: mobile-float 4.2s ease-in-out infinite reverse;
  }
  .app-badge {
    width: 62px;
    height: 62px;
    border-radius: 20px;
  }
  .app-token {
    gap: 9px;
    font-size: 14px;
  }
  h1 {
    font-size: clamp(40px, 13vw, 56px);
  }
  .hero h1 {
    font-size: clamp(36px, 11.5vw, 48px);
    white-space: nowrap;
  }
  .lead {
    font-size: 17px;
    line-height: 1.62;
  }
  .mini-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 340px;
  }
  .mini-badges span {
    justify-content: center;
    min-height: 40px;
    padding: 0 10px;
    text-align: center;
  }
  .hero-actions,
  .download-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .btn {
    width: 100%;
  }
  .section {
    padding: 54px 16px;
  }
  .mascot-section {
    padding-top: 24px;
    padding-bottom: 32px;
  }
  .mascot-card {
    grid-template-columns: 1fr;
  }
  .mascot-card img {
    max-height: 240px;
  }
  .feature-grid,
  .journey-grid,
  .screenshots {
    grid-template-columns: 1fr;
  }
  .candy-stage {
    padding-top: 48px;
  }
  .candy-stage .section-heading {
    margin-bottom: 22px;
  }
  .candy-side {
    grid-template-columns: 1fr;
  }
  .candy-main,
  .candy-side article {
    border-width: 5px;
    border-radius: 28px;
  }
  .candy-main div {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    border-radius: 22px;
  }
  .candy-side article {
    height: 210px;
  }
  .hero-confetti span:nth-child(2),
  .hero-confetti span:nth-child(5) {
    display: none;
  }
  .hero-chips {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .hero-microline {
    display: none;
  }
  .role-section {
    padding-top: 62px;
    background:
      radial-gradient(circle at 12% 12%, rgba(255,185,210,.42), transparent 24%),
      radial-gradient(circle at 88% 18%, rgba(56,203,225,.32), transparent 22%),
      linear-gradient(180deg, #fff, #efffff);
  }
  .role-section .fx-reveal,
  .partner .fx-reveal,
  .companion-wall .fx-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 9px;
  }
  .role-grid figure {
    height: 138px;
    min-height: 138px;
    border-width: 4px;
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(45, 91, 86, .14);
    transform: none !important;
  }
  .role-grid figure:nth-child(1),
  .role-grid figure:nth-child(6),
  .role-grid figure:nth-child(10) {
    grid-column: span 2;
    height: 188px;
    min-height: 186px;
  }
  .role-grid figure:nth-child(4),
  .role-grid figure:nth-child(9) {
    grid-row: span 2;
    height: 286px;
    min-height: 286px;
  }
  .role-grid img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: top center;
  }
  .role-grid figcaption {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 4;
    display: block;
    padding: 7px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 20px rgba(45, 91, 86, .12);
    backdrop-filter: blur(8px);
  }
  .role-grid figcaption b {
    font-size: 12px;
  }
  .role-grid figcaption span {
    display: none;
  }
  .promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .promo-grid figure {
    border-width: 4px;
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(84, 83, 54, .12);
  }
  .promo-grid figure:nth-child(1) {
    grid-column: span 2;
  }
  .promo-grid img {
    aspect-ratio: 4 / 5;
  }
  .promo-grid figure:nth-child(1) img {
    aspect-ratio: 16 / 10;
  }
  .promo-grid figcaption {
    padding: 10px 8px 12px;
    font-size: 13px;
  }
  .mascot-card,
  .candy-main,
  .candy-side article,
  .media-panel {
    animation: mobile-glow 4.4s ease-in-out infinite;
  }
  .media-ribbon {
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    border-radius: 22px;
  }
  .media-ribbon strong {
    font-size: 12px;
  }
  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-grid article {
    min-height: auto;
  }
  .feature-grid h3 {
    margin-top: 24px;
  }
  .poker-stack {
    height: 128px;
    margin-top: 0;
    margin-bottom: 8px;
  }
  .poker-stack img {
    width: 80px;
    height: 116px;
    border-width: 4px;
    border-radius: 18px;
  }
  .poker-stack img:nth-child(1) { left: 0; }
  .poker-stack img:nth-child(2) { left: 58px; }
  .poker-stack img:nth-child(3) { left: 116px; }
  .poker-stack img:nth-child(4) { left: 174px; }
  .hero-crown {
    justify-self: start;
    margin: 4px 0 -2px;
    padding: 7px 14px;
  }
  .hero-panel {
    display: none;
  }
  .download-main {
    padding: 24px 14px;
  }
  .download-card {
    gap: 24px;
  }
  .download-icon-card {
    left: 12px;
    bottom: 12px;
  }
  .footer {
    padding: 28px 24px;
    text-align: center;
  }
  .footer strong {
    font-size: 18px;
  }
  .footer span,
  .footer small {
    white-space: nowrap;
    font-size: clamp(12px, 3.4vw, 14px);
  }
  .footer nav {
    justify-content: center;
    gap: 8px;
  }
  .footer nav a {
    padding: 8px 10px;
    font-size: clamp(13px, 3.5vw, 15px);
  }
  .seo-card {
    padding: 20px;
    border-radius: 28px;
  }
  .seo-card li {
    display: grid;
    gap: 5px;
  }
  .seo-card li span {
    text-align: left;
  }
}