: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;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .26;
  background-image:
    url("assets/effects/soap-bubble.svg"),
    url("assets/effects/soap-bubble.svg"),
    url("assets/effects/soap-bubble.svg");
  background-repeat: no-repeat;
  background-size: 118px 118px, 74px 74px, 146px 146px;
  mix-blend-mode: screen;
  animation: page-bubbles-drift 18s linear infinite;
}

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; }

.mobile-splash {
  display: none;
}

main,
.footer {
  position: relative;
  z-index: 1;
}

.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);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.brand {
  position: relative;
  overflow: hidden;
  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);
  animation: hero-badge-pulse 5.8s ease-in-out infinite;
}
.brand::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -70%;
  width: 48%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: skewX(-18deg);
  animation: mobile-download-shine 4.8s ease-in-out infinite;
}
.brand,
.app-token,
.brand-icon,
.app-token .app-badge {
  animation: none !important;
}
.brand::after {
  display: none;
}
.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 {
  position: relative;
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #42524e;
  font-weight: 900;
}
.mega-trigger {
  position: relative;
  z-index: 32;
  flex: 1 1 auto;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  padding: 7px 12px 9px;
  margin: 0 auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.mega-trigger::after,
.nav::before {
  content: "";
  position: absolute;
  left: -24px;
  right: -24px;
  top: 100%;
  height: 34px;
  pointer-events: auto;
}
.mega-trigger a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 clamp(7px, .82vw, 12px);
  color: #344743;
  border-radius: 999px;
  font-size: clamp(13px, .86vw, 15px);
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  transition: transform .18s ease, color .18s ease;
}
.mega-trigger a:hover,
.mega-trigger a:focus-visible {
  color: #df5b50;
  transform: translateY(-1px);
}
.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 0%, rgba(255,255,255,.14) 25%, rgba(255,255,255,.58) 50%, rgba(255,255,255,.14) 75%, transparent 100%);
  filter: blur(.4px);
  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);
}
.mega-menu {
  position: absolute;
  left: clamp(14px, 4vw, 64px);
  right: clamp(14px, 4vw, 64px);
  top: calc(100% + 6px);
  z-index: 30;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.mega-trigger:hover ~ .mega-menu,
.mega-trigger:focus-within ~ .mega-menu,
.nav:hover ~ .mega-menu,
.nav:focus-within ~ .mega-menu,
.mega-menu:hover {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mega-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 30px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.86), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(101,227,241,.22), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(243,255,252,.74));
  box-shadow: 0 30px 80px rgba(33, 82, 76, .18), inset 0 0 0 1px rgba(255,255,255,.5);
  backdrop-filter: blur(20px) saturate(1.2);
}
.mega-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(255,255,255,.5) 42%, transparent 56%),
    radial-gradient(circle at 78% 72%, rgba(255,185,210,.18), transparent 22%);
  opacity: .72;
}
.mega-inner section {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 190px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
.mega-inner strong {
  display: block;
  margin-bottom: 6px;
  color: #243431;
  font-size: 17px;
  font-weight: 950;
}
.mega-inner a {
  display: flex;
  align-items: center;
  min-height: 30px;
  color: #4a5e59;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.35;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.mega-inner a::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--aqua));
  box-shadow: 0 0 0 4px rgba(255,255,255,.54);
}
.mega-inner a:hover {
  color: #e55354;
  background: rgba(255,255,255,.62);
  transform: translateX(3px);
}
.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(540px, 690px) minmax(330px, 410px) minmax(315px, 360px);
  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::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 16% 28%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 18%, rgba(255,216,107,.72) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 68%, rgba(56,203,225,.62) 0 2px, transparent 3px);
  background-size: 180px 180px, 220px 220px, 160px 160px;
  mix-blend-mode: screen;
  animation: hero-premium-twinkle 5.2s ease-in-out infinite;
}
.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, .01), rgba(255,255,255,.22) 28%, transparent 54%),
    linear-gradient(90deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.58) 31%, rgba(255,255,255,.04) 72%),
    linear-gradient(0deg, rgba(255, 249, 229, .72) 0%, rgba(255,255,255,0) 36%);
}
.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: .46;
  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 5.6s ease-in-out infinite;
}
.hero-bubbles {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: normal;
}
.hero-bubbles span {
  position: absolute;
  left: var(--bubble-x);
  bottom: -220px;
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0 7%, rgba(255,255,255,.34) 8% 14%, transparent 23%),
    radial-gradient(circle at 76% 30%, rgba(255,255,255,.58), transparent 18%),
    radial-gradient(circle at 27% 72%, rgba(255,118,187,.34), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(64,218,255,.35), transparent 30%),
    conic-gradient(from 30deg, rgba(255,126,170,.64), rgba(255,230,126,.62), rgba(92,235,199,.58), rgba(93,201,255,.62), rgba(195,150,255,.58), rgba(255,126,170,.64));
  opacity: .28;
  box-shadow:
    inset 8px 10px 22px rgba(255,255,255,.48),
    inset -10px -14px 24px rgba(109,206,255,.18),
    0 16px 34px rgba(88, 190, 210, .2);
  filter: saturate(var(--bubble-sat, 1.35)) hue-rotate(var(--bubble-hue, 0deg));
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  animation: bubble-rise var(--bubble-speed) linear infinite;
  animation-delay: var(--bubble-delay);
}
.hero-bubbles span::before,
.hero-bubbles span::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
.hero-bubbles span::before {
  inset: 12% 15% 54% 18%;
  border-top: 4px solid rgba(255,255,255,.78);
  transform: rotate(-24deg);
  filter: blur(.2px);
}
.hero-bubbles span::after {
  right: 18%;
  bottom: 20%;
  width: 22%;
  height: 22%;
  background: radial-gradient(circle, rgba(255,255,255,.62), transparent 64%);
}
.hero-bubbles span:nth-child(1) { --bubble-x: 3%; --bubble-size: 132px; --bubble-speed: 16s; --bubble-delay: -1s; --bubble-drift: 42px; --bubble-hue: -18deg; }
.hero-bubbles span:nth-child(2) { --bubble-x: 14%; --bubble-size: 82px; --bubble-speed: 14.5s; --bubble-delay: -4s; --bubble-drift: -30px; --bubble-hue: 42deg; }
.hero-bubbles span:nth-child(3) { --bubble-x: 26%; --bubble-size: 162px; --bubble-speed: 18s; --bubble-delay: -7s; --bubble-drift: 48px; --bubble-hue: 88deg; }
.hero-bubbles span:nth-child(4) { --bubble-x: 40%; --bubble-size: 104px; --bubble-speed: 15s; --bubble-delay: -2s; --bubble-drift: -36px; --bubble-hue: 156deg; }
.hero-bubbles span:nth-child(5) { --bubble-x: 52%; --bubble-size: 148px; --bubble-speed: 17.2s; --bubble-delay: -8s; --bubble-drift: 34px; --bubble-hue: 205deg; }
.hero-bubbles span:nth-child(6) { --bubble-x: 66%; --bubble-size: 92px; --bubble-speed: 14.8s; --bubble-delay: -5s; --bubble-drift: -30px; --bubble-hue: -62deg; }
.hero-bubbles span:nth-child(7) { --bubble-x: 76%; --bubble-size: 178px; --bubble-speed: 19s; --bubble-delay: -9s; --bubble-drift: 46px; --bubble-hue: 24deg; }
.hero-bubbles span:nth-child(8) { --bubble-x: 87%; --bubble-size: 116px; --bubble-speed: 15.6s; --bubble-delay: -3s; --bubble-drift: -40px; --bubble-hue: 112deg; }
.hero-bubbles span:nth-child(9) { --bubble-x: 9%; --bubble-size: 70px; --bubble-speed: 13.8s; --bubble-delay: -6s; --bubble-drift: 22px; --bubble-hue: 190deg; }
.hero-bubbles span:nth-child(10) { --bubble-x: 34%; --bubble-size: 82px; --bubble-speed: 14.2s; --bubble-delay: -10s; --bubble-drift: -24px; --bubble-hue: -120deg; }
.hero-bubbles span:nth-child(11) { --bubble-x: 61%; --bubble-size: 74px; --bubble-speed: 14s; --bubble-delay: -11s; --bubble-drift: 26px; --bubble-hue: 72deg; }
.hero-bubbles span:nth-child(12) { --bubble-x: 93%; --bubble-size: 150px; --bubble-speed: 17s; --bubble-delay: -12s; --bubble-drift: -50px; --bubble-hue: -28deg; }
.hero-bubbles span:nth-child(2),
.hero-bubbles span:nth-child(4),
.hero-bubbles span:nth-child(6),
.hero-bubbles span:nth-child(8),
.hero-bubbles span:nth-child(9),
.hero-bubbles span:nth-child(10),
.hero-bubbles span:nth-child(11),
.hero-bubbles span:nth-child(12) {
  display: none;
}
.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: 2;
}
.hero-copy {
  max-width: 760px;
  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.hero-logo-title {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: .34em 10px 10px .68em;
  color: #243431;
  font-family: "Yuanti SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
  animation: hero-title-premium .82s cubic-bezier(.2,.8,.2,1) both;
  text-shadow: none;
}
.hero h1.hero-logo-title::before {
  content: "";
  position: absolute;
  left: .62em;
  right: .04em;
  bottom: .09em;
  z-index: -1;
  height: .3em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,95,123,.2), rgba(255,216,107,.34), rgba(56,203,225,.18));
  box-shadow: 0 16px 28px rgba(255, 117, 121, .1), 0 8px 20px rgba(56,203,225,.1);
}
.hero h1.hero-logo-title::after {
  content: "";
  position: absolute;
  right: .08em;
  top: .22em;
  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;
}
.logo-prefix {
  position: absolute;
  left: -.02em;
  top: .02em;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .08em .28em .11em;
  color: #fff;
  border: .08em solid rgba(255,255,255,.94);
  border-radius: .72em .78em .78em .2em;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.6), transparent 28%),
    linear-gradient(135deg, #ff5f62 0%, #ff9d55 52%, #ffd86b 100%);
  box-shadow:
    0 .16em 0 rgba(177, 74, 44, .16),
    0 .34em .62em rgba(255, 95, 98, .22),
    inset 0 .04em 0 rgba(255,255,255,.62);
  font-size: .34em;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 .07em 0 rgba(155, 62, 43, .2);
  transform: rotate(-8deg);
}
.logo-prefix::after {
  content: "";
  position: absolute;
  inset: .12em .18em auto auto;
  width: .28em;
  height: .16em;
  border-top: .05em solid rgba(255,255,255,.75);
  border-radius: 999px;
  transform: rotate(-18deg);
}
.logo-main {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #243431;
  -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);
}
.logo-main::before,
.logo-main::after {
  content: none;
}
.lead {
  max-width: 620px;
  margin: 22px 0 0;
  color: #42524e;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.75;
}
.hero-actions,
.download-actions {
  position: relative;
  z-index: 12;
  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 {
  position: relative;
  z-index: 7;
  order: 3;
  display: grid;
  gap: 12px;
  align-self: center;
  justify-self: end;
  width: min(100%, 332px);
  padding-top: 16px;
  margin-right: -34px;
  transform: none;
  opacity: 1;
  animation: none;
}
.hero-download-glass {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 0;
  min-height: 368px;
  padding: 23px 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.92), transparent 24%),
    radial-gradient(circle at 88% 0%, rgba(135,236,255,.34), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(255,207,226,.28), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(229,255,250,.66));
  box-shadow:
    0 26px 70px rgba(45, 91, 86, .16),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 0 0 1px rgba(255,255,255,.42);
  backdrop-filter: blur(18px) saturate(1.24);
  animation: official-card-float 5.6s ease-in-out infinite;
}
.hero-download-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,.1) 23%, rgba(255,255,255,.5) 36%, rgba(132,232,255,.14) 48%, rgba(255,255,255,.08) 58%, transparent 76%),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.5), transparent 18%);
  opacity: .86;
  filter: blur(10px);
  transform: translateX(-38%);
  animation: official-card-sheen 5.2s ease-in-out infinite;
}
.hero-download-glass::after {
  content: "";
  position: absolute;
  right: -38px;
  top: -42px;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.72), rgba(131,229,255,.2) 42%, rgba(255,182,210,.18));
  box-shadow: inset 12px 18px 28px rgba(255,255,255,.32);
  opacity: .72;
  animation: official-card-bubble 6.4s ease-in-out infinite;
}
.hero-download-glass p {
  margin: 0;
  color: #29aeca;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero-download-glass img {
  width: 70px;
  height: 70px;
  margin-top: 22px;
  object-fit: cover;
  border: 5px solid rgba(255,255,255,.96);
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(45, 91, 86, .14);
}
.hero-download-glass h2 {
  margin: 26px 0 0;
  color: #223633;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: clamp(30px, 2.55vw, 38px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 3px 0 rgba(255,255,255,.82), 0 14px 30px rgba(68,196,208,.16);
}
.hero-download-glass > span {
  margin-top: 17px;
  color: #4b625d;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.78;
}
.hero-download-glass > a {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 20px;
  color: #173633;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(165,245,255,.96), rgba(255,246,196,.94), rgba(255,191,210,.82));
  box-shadow: 0 18px 34px rgba(58, 193, 205, .18), inset 0 2px 0 rgba(255,255,255,.84);
  font-size: 16px;
  font-weight: 950;
}
.hero-download-glass > a::after {
  content: "";
  position: absolute;
  inset: -30px auto -30px -56%;
  width: 46%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.1) 24%, rgba(255,255,255,.58) 50%, rgba(255,255,255,.1) 76%, transparent 100%);
  filter: blur(9px);
  transform: rotate(14deg);
  animation: official-button-shine 3.8s ease-in-out infinite;
}
.hero-download-glass div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.hero-download-glass b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  color: #39524d;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  font-size: 15px;
  font-weight: 950;
}
.showcase-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  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: 164px;
}
.showcase-card.tilt-left { transform: rotate(-2deg) translateX(-12px); }
.showcase-card.tilt-right { transform: rotate(2deg) translateX(12px); }
.showcase-card img {
  position: absolute;
  inset: 6px 8px 34px;
  width: calc(100% - 16px);
  height: calc(100% - 40px);
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: drop-shadow(0 12px 18px rgba(45, 91, 86, .12));
  transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}
.showcase-card.big img {
  object-fit: contain;
  padding: 2px 0;
}
.showcase-card:not(.big) img {
  inset: -8px 0 30px;
  width: 100%;
  height: calc(100% - 22px);
  object-fit: cover;
  object-position: center 34%;
  filter: saturate(1.04) drop-shadow(0 12px 18px rgba(45, 91, 86, .12));
}
.showcase-card.tilt-left img {
  object-position: center 20%;
}
.showcase-card div {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 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);
  transform: var(--card-base, none);
  animation: poker-card-dance 4.8s 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;
  --card-base: rotate(-10deg) translateY(18px);
  --card-float-x: -7px;
  --card-float-y: -18px;
  --card-float-rotate: -3deg;
}
.poker-stack img:nth-child(2) {
  left: 92px;
  z-index: 2;
  --card-base: rotate(5deg);
  --card-float-x: 5px;
  --card-float-y: -24px;
  --card-float-rotate: 4deg;
}
.poker-stack img:nth-child(3) {
  left: 184px;
  z-index: 3;
  --card-base: rotate(12deg) translateY(24px);
  --card-float-x: 8px;
  --card-float-y: -17px;
  --card-float-rotate: 3deg;
}
.poker-stack img:nth-child(4) {
  left: 138px;
  z-index: 4;
  --card-base: rotate(-3deg) translateY(-42px);
  --card-float-x: -5px;
  --card-float-y: -28px;
  --card-float-rotate: -4deg;
}
.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 page-bubbles-drift {
  0% { background-position: 2vw 126vh, 32vw 118vh, 78vw 132vh; }
  100% { background-position: 8vw -70vh, 38vw -78vh, 84vw -64vh; }
}

@keyframes bubble-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.82);
  }
  10% { opacity: .42; }
  48% {
    transform: translate3d(var(--bubble-drift, 22px), -46vh, 0) scale(1.04);
  }
  72% {
    opacity: .34;
    transform: translate3d(calc(var(--bubble-drift, 22px) * -.45), -74vh, 0) scale(.98);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--bubble-drift, 22px) * -1), -112vh, 0) scale(1.2);
  }
}

@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 poker-card-dance {
  0%, 100% {
    transform: var(--card-base, none) translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: saturate(1.04) brightness(1);
  }
  38% {
    transform: var(--card-base, none) translate3d(var(--card-float-x, 6px), var(--card-float-y, -18px), 0) rotate(var(--card-float-rotate, 3deg)) scale(1.045);
    filter: saturate(1.16) brightness(1.04);
  }
  68% {
    transform: var(--card-base, none) translate3d(calc(var(--card-float-x, 6px) * -.45), 5px, 0) rotate(calc(var(--card-float-rotate, 3deg) * -.45)) scale(.995);
  }
}

@keyframes official-card-float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    box-shadow:
      0 26px 70px rgba(45, 91, 86, .16),
      inset 0 1px 0 rgba(255,255,255,.86),
      inset 0 0 0 1px rgba(255,255,255,.42);
  }
  50% {
    transform: translate3d(0, -7px, 0);
    box-shadow:
      0 34px 82px rgba(45, 91, 86, .19),
      0 0 34px rgba(137, 239, 255, .18),
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 0 0 0 1px rgba(255,255,255,.48);
  }
}

@keyframes official-card-sheen {
  0%, 34%, 100% {
    transform: translateX(-48%);
    opacity: .42;
  }
  58% {
    transform: translateX(42%);
    opacity: .86;
  }
}

@keyframes official-card-bubble {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .66;
  }
  50% {
    transform: translate3d(-12px, 18px, 0) scale(1.08);
    opacity: .82;
  }
}

@keyframes official-button-shine {
  0%, 42%, 100% {
    left: -46%;
    opacity: 0;
  }
  58% {
    opacity: .8;
  }
  76% {
    left: 120%;
    opacity: 0;
  }
}

@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 splash-card-in {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(.88);
    filter: blur(8px);
  }
  58% {
    opacity: 1;
    transform: translateY(-4px) scale(1.035);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes splash-bg-zoom {
  0% {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(7px) saturate(1.05);
  }
  24% {
    opacity: .72;
    filter: blur(2px) saturate(1.12);
  }
  100% {
    opacity: .68;
    transform: scale(1.015);
    filter: blur(0) saturate(1.18);
  }
}

@keyframes splash-stage-pop {
  from {
    opacity: 0;
    transform: translateY(34px) scale(.92);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes splash-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(.9); opacity: 0; }
  24% { opacity: .85; }
  to { transform: translate(-50%, -50%) rotate(50deg) scale(1.04); opacity: .62; }
}

@keyframes splash-card-deal-left {
  from { opacity: 0; transform: translate(-68px, 66px) rotate(-28deg) scale(.62); filter: blur(8px); }
  to { opacity: 1; transform: translate(-98px, 12px) rotate(-13deg) scale(1); filter: blur(0); }
}

@keyframes splash-card-deal-mid {
  from { opacity: 0; transform: translateY(84px) rotate(8deg) scale(.66); filter: blur(8px); }
  to { opacity: 1; transform: translateY(-10px) rotate(2deg) scale(1.08); filter: blur(0); }
}

@keyframes splash-card-deal-right {
  from { opacity: 0; transform: translate(76px, 62px) rotate(28deg) scale(.62); filter: blur(8px); }
  to { opacity: 1; transform: translate(98px, 16px) rotate(13deg) scale(1); filter: blur(0); }
}

@keyframes splash-fan-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes splash-soft-glow {
  0% {
    opacity: 0;
    transform: translate(-56%, -52%) rotate(-14deg) scale(.84);
  }
  48% {
    opacity: .58;
    transform: translate(-50%, -50%) rotate(-10deg) scale(1.02);
  }
  100% {
    opacity: .42;
    transform: translate(-47%, -50%) rotate(-8deg) scale(1.08);
  }
}

@keyframes splash-soft-sheen {
  0% {
    opacity: 0;
    transform: translateX(-46%);
  }
  26% {
    opacity: .66;
  }
  100% {
    opacity: .18;
    transform: translateX(26%);
  }
}

@keyframes splash-icon-pop {
  0% { transform: scale(.62) rotate(-8deg); opacity: 0; }
  68% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes splash-text-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes splash-progress {
  0% {
    transform: translateX(-108%);
    opacity: .78;
  }
  74% {
    opacity: .95;
  }
  100% {
    transform: translateX(108%);
    opacity: 0;
  }
}

@keyframes splash-image-sheen {
  0% {
    opacity: 0;
    transform: translateX(-112%) skewX(-14deg);
  }
  20% {
    opacity: .62;
  }
  72% {
    opacity: .54;
  }
  100% {
    opacity: 0;
    transform: translateX(112%) skewX(-14deg);
  }
}

@keyframes splash-bubble-rise {
  0% {
    opacity: 0;
    transform: translate3d(var(--x), 38px, 0) scale(.68);
  }
  18% {
    opacity: var(--o);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--x) + var(--drift)), -110vh, 0) scale(1.18);
  }
}

@keyframes splash-fade-out {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@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); }
}

@keyframes premium-card-breathe {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.055) brightness(1.018); }
}

@keyframes premium-glow-ring {
  0%, 100% { box-shadow: 0 18px 42px rgba(45, 91, 86, .1), 0 0 0 rgba(255, 216, 107, 0); }
  50% { box-shadow: 0 26px 64px rgba(255, 117, 121, .12), 0 14px 40px rgba(56, 203, 225, .12); }
}

@keyframes premium-pill-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes premium-image-gloss {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.06) brightness(1.025); }
}

@keyframes mobile-hero-rise {
  from { opacity: .88; transform: translateY(14px) scale(.985); filter: saturate(1); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1.05); }
}

@keyframes mobile-focus-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  48% { transform: translateY(-5px) scale(1.014); }
}

@keyframes mobile-stack-glam {
  0%, 100% { transform: translateY(0); filter: saturate(1.04) brightness(1); }
  50% { transform: translateY(-6px); filter: saturate(1.12) brightness(1.025); }
}

@keyframes mobile-chip-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.035); }
}

@keyframes mobile-tap-pop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.025); }
  66% { transform: translateY(1px) scale(.998); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes hero-premium-twinkle {
  0%, 100% {
    opacity: .45;
    background-position: 0% 0%, 100% 20%, 20% 100%;
  }
  50% {
    opacity: .78;
    background-position: 14% 10%, 88% 32%, 30% 82%;
  }
}

@keyframes hero-title-premium {
  0% { opacity: .92; transform: translateY(10px) scale(.97); filter: saturate(1); }
  58% { opacity: 1; transform: translateY(-2px) scale(1.012); filter: saturate(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1.04); }
}

@keyframes hero-badge-pulse {
  0%, 100% { transform: translateY(0) scale(1); filter: saturate(1); }
  50% { transform: translateY(-4px) scale(1.025); filter: saturate(1.08) brightness(1.02); }
}

@keyframes garden-sparkle-field {
  0% { background-position: 8px 12px, 38px 50px, 0 0; opacity: .42; }
  50% { background-position: 28px -18px, 8px 82px, 22px 28px; opacity: .66; }
  100% { background-position: 48px -44px, -22px 116px, 44px 56px; opacity: .48; }
}

@keyframes garden-aurora-wave {
  0%, 100% { transform: translate3d(-4%, 0, 0) rotate(7deg) scale(.98); filter: blur(16px) saturate(1.18); }
  50% { transform: translate3d(5%, -3%, 0) rotate(-5deg) scale(1.08); filter: blur(14px) saturate(1.42); }
}

@keyframes cta-premium-pulse {
  0%, 100% {
    box-shadow: 0 14px 30px rgba(65, 82, 78, .14), 0 0 0 rgba(255, 95, 123, 0);
    filter: saturate(1) brightness(1);
  }
  50% {
    box-shadow: 0 20px 42px rgba(255, 105, 66, .26), 0 0 28px rgba(255, 216, 107, .22);
    filter: saturate(1.12) brightness(1.04);
  }
}

@keyframes icon-lux-pop {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  42% { transform: translateY(-3px) rotate(-2deg) scale(1.035); }
  70% { transform: translateY(1px) rotate(1deg) scale(.998); }
}

.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 !important;
}

.fx-tap-pop {
  animation: mobile-tap-pop .58s cubic-bezier(.2,.9,.25,1.15) !important;
}

.hero-microline,
.hero-crown,
.mini-badges span,
.hero-chips span,
.mascot-tags span,
.topic-links a,
.text-link,
.nav-download,
.mobile-download,
.btn.primary {
  background-size: 220% 220%;
  animation: premium-pill-flow 7s ease-in-out infinite;
}

.btn.primary,
.nav-download,
.mobile-download {
  animation: premium-pill-flow 6.4s ease-in-out infinite, cta-premium-pulse 4.2s ease-in-out infinite;
}

.app-badge,
.brand-icon {
  animation: icon-lux-pop 6s ease-in-out infinite;
}

.showcase-card,
.candy-main,
.candy-side article,
.fx-premium-on {
  animation: premium-card-breathe 6.5s ease-in-out infinite;
}

.showcase-card:nth-child(2),
.candy-side article:nth-child(2n),
.fx-premium-on:nth-child(2n) {
  animation-delay: .9s;
}

.showcase-card:nth-child(3),
.candy-side article:nth-child(3n),
.fx-premium-on:nth-child(3n) {
  animation-delay: 1.7s;
}

.app-token,
.download-card,
.seo-card {
  animation: premium-glow-ring 7.4s ease-in-out infinite;
}

.candy-main img,
.candy-side img,
.showcase-card img,
.poker-stack img,
.fx-premium-on img {
  animation: premium-image-gloss 8.5s ease-in-out infinite;
}

.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,
.pet-premium-main img,
.pet-orbit-grid 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,
.pet-premium-main:hover img,
.pet-orbit-grid figure:hover img {
  transform: scale(1.035);
  filter: saturate(1.08) brightness(1.03);
  animation: image-pop .58s cubic-bezier(.2,.9,.25,1.1);
}

.pet-premium-main:hover img,
.pet-orbit-grid figure:hover img {
  animation: image-pop .58s cubic-bezier(.2,.9,.25,1.1);
}

.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,
.pet-premium-main img,
.pet-orbit-grid img {
  opacity: 1 !important;
  visibility: visible !important;
}

.page-bubble-layer {
  position: fixed;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  contain: paint;
}
.page-bubble-layer span {
  position: absolute;
  left: var(--page-bubble-left);
  bottom: calc(-1 * var(--page-bubble-size) - 40px);
  width: var(--page-bubble-size);
  height: var(--page-bubble-size);
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 999px;
  background:
    radial-gradient(circle at 27% 22%, rgba(255,255,255,.98) 0 8%, rgba(255,255,255,.28) 9% 17%, transparent 24%),
    radial-gradient(circle at 72% 28%, rgba(255,255,255,.52), transparent 18%),
    radial-gradient(circle at 24% 74%, rgba(255,112,180,.38), transparent 28%),
    radial-gradient(circle at 76% 76%, rgba(66,225,255,.4), transparent 30%),
    conic-gradient(from 30deg, rgba(255,116,169,.72), rgba(255,232,118,.66), rgba(92,238,198,.6), rgba(89,207,255,.66), rgba(195,154,255,.58), rgba(255,116,169,.72));
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  filter: saturate(1.28) hue-rotate(var(--page-bubble-hue));
  box-shadow:
    inset 6px 8px 18px rgba(255,255,255,.44),
    inset -10px -12px 22px rgba(89,207,255,.18),
    0 14px 28px rgba(88, 190, 210, .14);
  animation: page-soap-rise var(--page-bubble-speed) linear infinite;
  animation-delay: var(--page-bubble-delay);
}
.page-bubble-layer span::before {
  content: "";
  position: absolute;
  inset: 13% 18% 57% 18%;
  border-top: 3px solid rgba(255,255,255,.78);
  border-radius: 999px;
  transform: rotate(-25deg);
}

body.fx-booting .hero-copy .eyebrow,
body.fx-booting .hero h1,
body.fx-booting .hero .lead,
body.fx-booting .hero-actions,
body.fx-booting .mini-badges,
body.fx-booting .hero-microline,
body.fx-booting .hero-showcase,
body.fx-booting .hero-crown,
body.fx-booting .poker-stack img,
body.fx-booting .hero-chips,
body.fx-booting .hero-panel {
  opacity: 0;
}

body.fx-ready .hero-copy .eyebrow {
  animation: premium-hero-line-in .62s cubic-bezier(.2,.82,.18,1) .08s both;
}
body.fx-ready .hero h1 {
  animation: premium-title-in .88s cubic-bezier(.16,.95,.18,1) .16s both;
}
body.fx-ready .hero .lead {
  animation: premium-hero-line-in .72s cubic-bezier(.2,.82,.18,1) .34s both;
}
body.fx-ready .hero-actions {
  animation: premium-hero-line-in .66s cubic-bezier(.2,.82,.18,1) .5s both;
}
body.fx-ready .mini-badges {
  animation: premium-hero-line-in .64s cubic-bezier(.2,.82,.18,1) .62s both;
}
body.fx-ready .hero-microline {
  animation: premium-hero-line-in .64s cubic-bezier(.2,.82,.18,1) .74s both;
}
body.fx-ready .hero-showcase {
  animation: premium-showcase-in .86s cubic-bezier(.18,.92,.2,1) .58s both;
}
body.fx-ready .hero-crown {
  animation: premium-crown-in .66s cubic-bezier(.2,.9,.2,1.12) .74s both;
}
body.fx-ready .poker-stack img {
  animation: premium-card-deal .72s cubic-bezier(.18,.92,.22,1.16) var(--deal-delay, .82s) both, poker-card-dance 4.8s ease-in-out var(--idle-delay, 1.52s) infinite;
}
body.fx-ready .poker-stack img:nth-child(1) { --deal-delay: .78s; --idle-delay: 1.48s; }
body.fx-ready .poker-stack img:nth-child(2) { --deal-delay: .9s; --idle-delay: 1.6s; }
body.fx-ready .poker-stack img:nth-child(3) { --deal-delay: 1.02s; --idle-delay: 1.72s; }
body.fx-ready .poker-stack img:nth-child(4) { --deal-delay: 1.14s; --idle-delay: 1.84s; }
body.fx-ready .hero-chips {
  animation: premium-hero-line-in .62s cubic-bezier(.2,.82,.18,1) 1.22s both;
}
body.fx-ready .hero-panel {
  animation: premium-panel-in .72s cubic-bezier(.2,.82,.18,1) 1.08s both;
}

.hero-bg {
  transform-origin: center;
  animation: hero-bg-cinema 13.5s ease-in-out infinite alternate;
}
.hero-aurora,
.hero-lux,
.hero-confetti,
.hero-bubbles,
.hero-showcase,
.hero-side {
  will-change: transform, opacity;
}
.hero-bubbles {
  filter: saturate(1.08);
}
.hero-confetti span {
  box-shadow: 0 14px 30px rgba(255, 117, 121, .22), 0 0 18px rgba(255,255,255,.44);
}
.hero-showcase,
.hero-side {
  transform: translate3d(calc(var(--hero-x) * .18), calc(var(--hero-y) * .18), 0);
}
.hero-copy {
  transform: translate3d(calc(var(--hero-x) * -.08), calc(var(--hero-y) * -.08), 0);
}
.showcase-card::before,
.journey-grid article::before,
.role-grid figure::before,
.promo-grid figure::before,
.media-panel::before,
.screenshots figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.5) 42%, transparent 62%);
  transform: translateX(-130%);
}
.fx-premium-on::before {
  animation: premium-sheen-pass 2.8s ease-in-out .15s both;
}
.showcase-card,
.candy-main,
.candy-side article,
.journey-grid article,
.role-grid figure,
.promo-grid figure,
.media-panel,
.screenshots figure,
.album-grid img {
  backface-visibility: hidden;
}
.fx-premium-on {
  transform-style: preserve-3d;
}

@keyframes page-soap-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.82);
  }
  12% { opacity: .16; }
  48% {
    opacity: .14;
    transform: translate3d(var(--page-bubble-drift), -48vh, 0) scale(1.04);
  }
  78% {
    opacity: .1;
    transform: translate3d(calc(var(--page-bubble-drift) * -.46), -78vh, 0) scale(.96);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--page-bubble-drift) * -1), -116vh, 0) scale(1.16);
  }
}

@keyframes hero-bg-cinema {
  0% {
    transform: translate3d(0, calc(var(--hero-scroll, 0) * -10px), 0) scale(1.025);
    filter: saturate(1.1) contrast(1.02) brightness(1);
  }
  50% {
    transform: translate3d(8px, calc((var(--hero-scroll, 0) * -16px) - 4px), 0) scale(1.048);
    filter: saturate(1.18) contrast(1.035) brightness(1.02);
  }
  100% {
    transform: translate3d(-6px, calc((var(--hero-scroll, 0) * -14px) + 2px), 0) scale(1.036);
    filter: saturate(1.14) contrast(1.025) brightness(1.01);
  }
}

@keyframes premium-hero-line-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.985);
    filter: blur(5px) saturate(.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes premium-title-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.94);
    filter: blur(7px) saturate(.92);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.018);
    filter: blur(0) saturate(1.1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1.04);
  }
}

@keyframes premium-showcase-in {
  from {
    opacity: 0;
    transform: translate3d(34px, 26px, 0) rotate(2deg) scale(.94);
    filter: blur(8px) saturate(.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes premium-crown-in {
  from { opacity: 0; transform: translateY(-12px) rotate(-8deg) scale(.88); }
  to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
}

@keyframes premium-card-deal {
  from {
    opacity: 0;
    transform: translate3d(90px, 46px, 0) rotate(20deg) scale(.74);
    filter: blur(8px) saturate(.9);
  }
  to {
    opacity: 1;
    transform: var(--card-base, none);
    filter: blur(0) saturate(1.05);
  }
}

@keyframes premium-panel-in {
  from {
    opacity: 0;
    transform: translate3d(24px, 22px, 0) scale(.94);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes premium-sheen-pass {
  0% { opacity: 0; transform: translateX(-130%); }
  18% { opacity: .55; }
  58%, 100% { opacity: 0; transform: translateX(130%); }
}

@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: 52px clamp(18px, 6vw, 86px);
}
main > .section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 760px;
}
main > .section + .section {
  margin-top: -14px;
}
.section-heading {
  max-width: 880px;
  margin-bottom: 28px;
}
.section-heading.compact {
  max-width: none;
  text-align: center;
}
.intro > .section-heading,
.journey-section > .section-heading,
.partner > .section-heading,
.guide > .section-heading {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
.section-heading p {
  margin: 0 0 8px;
  color: var(--aqua);
  font-weight: 900;
}
.section-heading h2 {
  display: inline-block;
  margin: 0;
  padding: 0 8px 8px;
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 1.12;
  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: .8px rgba(255,255,255,.92);
  paint-order: stroke fill;
  text-shadow: none;
}

.candy-stage {
  padding-top: 44px;
  padding-bottom: 42px;
  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 {
  padding-top: 38px;
  padding-bottom: 48px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(180deg, rgba(246,255,251,.9), 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: 18px;
  padding-bottom: 28px;
  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;
}

.pet-showcase {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,185,210,.36), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(56,203,225,.24), transparent 24%),
    linear-gradient(180deg, #f4fffb, #fffaf0);
}
.pet-showcase .section-heading.fx-reveal {
  opacity: 1;
  transform: none;
}
.pet-premium-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: stretch;
  width: min(100%, 1260px);
  margin: 0 auto;
}
.pet-premium-stage::before {
  content: "";
  position: absolute;
  inset: -28px 10% auto 10%;
  height: 120px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.75), rgba(255,255,255,.08));
  filter: blur(16px);
  pointer-events: none;
}
.pet-premium-main {
  position: relative;
  min-height: 492px;
  margin: 0;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 42px;
  background:
    radial-gradient(circle at 52% 28%, rgba(255,255,255,.94), transparent 43%),
    linear-gradient(145deg, #dcfbff 0%, #fff3c9 58%, #ffe6ec 100%);
  box-shadow: 0 26px 72px rgba(45, 91, 86, .15), inset 0 0 0 1px rgba(255,255,255,.66);
}
.pet-premium-main::before,
.pet-premium-main::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.pet-premium-main::before {
  inset: 22px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 34px;
}
.pet-premium-main::after {
  right: 26px;
  top: 26px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, #fff, rgba(255,255,255,.16) 34%, transparent 36%),
    linear-gradient(135deg, rgba(255,118,143,.82), rgba(72,211,220,.78));
  box-shadow: 0 12px 28px rgba(255, 118, 143, .2);
  opacity: .7;
}
.pet-premium-main img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 492px;
  padding: 32px 28px 72px;
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(42, 92, 86, .15));
}
.pet-premium-main figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 4;
  display: grid;
  gap: 4px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 16px 34px rgba(47, 89, 84, .12);
  backdrop-filter: blur(12px);
}
.pet-premium-main figcaption span {
  color: var(--coral);
  font-size: 13px;
  font-weight: 1000;
}
.pet-premium-main figcaption strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.22;
}
.pet-orbit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 1260px);
  margin: 0 auto;
}
.pet-orbit-grid figure {
  position: relative;
  margin: 0;
  min-height: 230px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.96), transparent 42%),
    linear-gradient(180deg, #e9fbff, #fff4d8);
  box-shadow: 0 22px 54px rgba(45, 91, 86, .12), inset 0 0 0 1px rgba(255,255,255,.62);
}
.pet-orbit-grid figure::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 58%, rgba(255,255,255,.72), transparent 48%);
  pointer-events: none;
}
.pet-orbit-grid figure::after {
  content: var(--watermark-text);
  position: absolute;
  right: 12px;
  bottom: 54px;
  z-index: 3;
  padding: 5px 9px;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(32, 68, 64, .22);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  transform: rotate(-8deg);
}
.pet-orbit-grid img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 186px;
  padding: 12px;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(45, 91, 86, .12));
}
.pet-orbit-grid figcaption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 24px rgba(45, 91, 86, .1);
  text-align: center;
  font-weight: 900;
}
.pet-orbit-wide {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: min(100%, 1360px);
}
.pet-orbit-wide figure {
  min-height: 212px;
}
.pet-orbit-wide img {
  height: 168px;
}
.pet-orbit-curated {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 18px;
}
.pet-orbit-curated figure {
  min-height: 237px;
}
.pet-orbit-curated img {
  height: 190px;
}
.pet-duo-showcase {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,185,210,.28), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(56,203,225,.22), transparent 28%),
    linear-gradient(180deg, #f8fffc, #fff8e8);
}
.pet-duo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(100%, 1120px);
  margin: 0 auto;
}
.pet-duo-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.92);
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.9), transparent 44%),
    linear-gradient(145deg, #e6fbff, #fff0cf);
  box-shadow: 0 24px 68px rgba(45, 91, 86, .13), inset 0 0 0 1px rgba(255,255,255,.62);
}
.pet-duo-grid figure::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 30px;
  pointer-events: none;
}
.pet-duo-grid figure::after {
  content: var(--watermark-text);
  position: absolute;
  right: 24px;
  bottom: 96px;
  z-index: 3;
  padding: 6px 12px;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  background: rgba(32, 68, 64, .22);
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,.22);
  transform: rotate(-8deg);
}
.pet-duo-grid img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(310px, 28vw, 430px);
  padding: 24px 24px 86px;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(45, 91, 86, .14));
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform .38s cubic-bezier(.2,.8,.2,1), filter .32s ease;
}
.pet-duo-grid figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 4;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 34px rgba(47, 89, 84, .12);
  backdrop-filter: blur(12px);
}
.pet-duo-grid b {
  color: var(--ink);
  font-size: 20px;
}
.pet-duo-grid span {
  color: var(--muted);
  line-height: 1.7;
}
.pet-duo-grid figure:hover {
  transform: translateY(-7px) scale(1.018);
  box-shadow: 0 28px 70px rgba(255, 117, 121, .18), 0 18px 48px rgba(49, 111, 103, .16);
}
.pet-duo-grid figure:hover img {
  animation: image-pop .58s cubic-bezier(.2,.9,.25,1.1);
  filter: saturate(1.08) brightness(1.03);
}

.journey-section {
  padding-top: 44px;
  padding-bottom: 48px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 26%),
    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 article:nth-child(2) img {
  object-position: center 34%;
}
.journey-grid article:nth-child(3) img {
  object-position: center 46%;
}
.journey-grid article:nth-child(4) img {
  object-position: center 38%;
}
.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 {
  padding-top: 50px;
  padding-bottom: 50px;
  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 figure:nth-child(10) img {
  object-position: center 34%;
}
.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 {
  padding-top: 46px;
  padding-bottom: 48px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.7), transparent 24%),
    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 {
  padding-top: 44px;
  padding-bottom: 48px;
  background:
    radial-gradient(circle at 50% 4%, rgba(255,216,107,.24), transparent 20%),
    linear-gradient(180deg, #fffaf0, #fff);
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 1180px);
  margin: 0 auto;
}
.album-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 14px;
  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-top: 44px;
  padding-bottom: 46px;
  padding-inline: max(clamp(18px, 6vw, 86px), calc((100vw - 1380px) / 2));
  background:
    radial-gradient(circle at 48% 0%, rgba(255,255,255,.72), transparent 24%),
    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-panel-contain .media-poster {
  height: clamp(390px, 34vw, 520px);
  aspect-ratio: auto;
  padding: 16px 16px 70px;
  object-fit: contain;
}
.media-panel-contain {
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.96), transparent 44%),
    linear-gradient(145deg, #e7fcff, #fff4d4 64%, #ffeaf0);
}
.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: 34px;
  padding-bottom: 46px;
  width: auto;
  margin: 0;
  padding-inline: max(clamp(18px, 6vw, 86px), calc((100vw - 1320px) / 2));
  background: linear-gradient(180deg, #f4fffb, #fffaf0);
}
.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 {
  padding-top: 44px;
  padding-bottom: 50px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.78), transparent 24%),
    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: 54px;
  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;
}

.topic-page main {
  overflow: hidden;
}
.topic-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .72fr);
  gap: clamp(22px, 5vw, 70px);
  align-items: center;
  min-height: 560px;
  padding: clamp(42px, 6vw, 92px) clamp(18px, 6vw, 86px);
  border-bottom-left-radius: 54px;
  border-bottom-right-radius: 54px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,185,210,.38), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(56,203,225,.32), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,244,216,.88));
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.9), 0 24px 70px rgba(68, 137, 139, .1);
  isolation: isolate;
}
.topic-hero::before {
  content: "";
  position: absolute;
  inset: 34px clamp(18px, 6vw, 86px);
  z-index: -1;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 44px;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,255,255,.72), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}
.android-topic {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,216,107,.34), transparent 24%),
    radial-gradient(circle at 88% 20%, rgba(69,208,170,.28), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(228,251,255,.88));
}
.guide-topic,
.role-topic {
  background:
    radial-gradient(circle at 20% 18%, rgba(188,168,255,.26), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(255,185,210,.34), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,255,251,.9));
}
.pet-topic {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,216,107,.35), transparent 25%),
    radial-gradient(circle at 86% 18%, rgba(56,203,225,.3), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,240,.9));
}
.topic-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.topic-copy h1 {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.06;
  text-shadow:
    0 3px 0 rgba(255,255,255,.96),
    0 10px 0 rgba(255,216,107,.28),
    0 24px 44px rgba(56,203,225,.14);
}
.topic-copy h1 span {
  display: inline-block;
  white-space: nowrap;
}
.topic-copy p:not(.eyebrow) {
  max-width: 680px;
  margin: 22px 0 0;
  color: #42524e;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.82;
}
.topic-visual {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 42px;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.94), transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(218,250,255,.78));
  box-shadow: 0 28px 78px rgba(45, 91, 86, .16), inset 0 0 0 1px rgba(255,255,255,.68);
}
.topic-visual::after,
.pet-card-grid figure::after {
  content: var(--watermark-text);
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  padding: 6px 11px;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(32, 68, 64, .24);
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  transform: rotate(-8deg);
}
.topic-visual > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 32px;
}
.topic-collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 360px;
}
.topic-collage > img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top center;
}
.topic-collage > img:nth-child(1) { transform: translateY(22px) rotate(-4deg); }
.topic-collage > img:nth-child(2) { transform: translateY(-12px) rotate(3deg); }
.topic-collage > img:nth-child(3) { transform: translateY(18px) rotate(5deg); }
.topic-panel {
  background:
    radial-gradient(circle at 14% 14%, rgba(255,185,210,.26), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(56,203,225,.2), transparent 22%),
    linear-gradient(180deg, #fff, #f5fffc);
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 1240px);
  margin: 0 auto;
}
.topic-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.topic-grid article {
  position: relative;
  min-height: 210px;
  padding: 24px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 12%, rgba(255,216,107,.3), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,255,251,.86));
  box-shadow: var(--soft-shadow), inset 0 0 0 1px rgba(255,255,255,.62);
}
.topic-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: white;
  border: 4px solid #fff;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  font-weight: 900;
  box-shadow: 0 12px 22px rgba(255, 95, 123, .18);
}
.topic-grid h3 {
  margin: 28px 0 10px;
  font-size: 22px;
}
.topic-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}
.seo-guide-block {
  padding-top: 50px;
}
.seo-guide-block .topic-grid span {
  width: auto;
  min-width: 46px;
  padding: 0 10px;
  white-space: nowrap;
}
.guide-copy {
  display: grid;
  gap: 14px;
  width: min(100%, 1120px);
  margin: 24px auto 0;
  padding: clamp(18px, 3vw, 28px);
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,216,107,.24), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(244,255,251,.82));
  box-shadow: 0 18px 46px rgba(45, 91, 86, .08), inset 0 0 0 1px rgba(255,255,255,.6);
}
.guide-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.9;
}
.topic-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding-top: 36px;
  padding-bottom: 54px;
  background: linear-gradient(180deg, #f5fffc, #fff);
}
.home-topic-links {
  padding-top: 10px;
}
.topic-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.84);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 14px 30px rgba(45, 91, 86, .1);
  color: #384b47;
  font-weight: 900;
}
.pet-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  width: min(100%, 1380px);
  margin: 0 auto;
}
.pet-card-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 30px;
  background: white;
  box-shadow: var(--soft-shadow), inset 0 0 0 1px rgba(255,255,255,.62);
}
.pet-card-grid img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.pet-card-grid figcaption {
  padding: 14px 12px 16px;
  background: white;
  text-align: center;
  font-weight: 900;
}
.topic-role-wall {
  padding-top: 64px;
}

.topic-visual,
.topic-grid article,
.topic-links a,
.pet-card-grid figure,
.pet-duo-grid figure,
.pet-premium-main,
.pet-orbit-grid figure {
  transition: transform .28s cubic-bezier(.2,.9,.25,1.2), box-shadow .28s ease, filter .28s ease;
}
.topic-visual:hover,
.topic-grid article:hover,
.topic-links a:hover,
.pet-card-grid figure:hover,
.pet-duo-grid figure:hover,
.pet-premium-main:hover,
.pet-orbit-grid figure:hover {
  transform: translateY(-7px) scale(1.018);
  box-shadow: 0 28px 70px rgba(255, 117, 121, .18), 0 18px 48px rgba(49, 111, 103, .16);
  filter: saturate(1.08);
}

@media (max-width: 1320px) {
  .mega-trigger {
    display: none;
  }
  .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));
  }
  .pet-premium-stage {
    grid-template-columns: 1fr;
  }
  .pet-premium-main {
    min-height: 420px;
  }
  .pet-premium-main img {
    min-height: 420px;
  }
  .pet-orbit-grid,
  .pet-orbit-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pet-duo-grid {
    width: min(100%, 900px);
  }
  .topic-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .topic-grid,
  .topic-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pet-card-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) {
  .mega-trigger,
  .nav { display: none; }
  .mega-menu { 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;
  }
  .topic-hero {
    padding-top: 42px;
    padding-bottom: 42px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }
  .topic-hero::before {
    inset: 18px 14px;
    border-radius: 30px;
  }
  .topic-visual {
    border-radius: 30px;
  }
  .topic-visual > img {
    border-radius: 22px;
  }
  .footer span,
  .footer small {
    display: block;
    margin-top: 8px;
  }
  .footer nav {
    justify-content: flex-start;
    margin-top: 16px;
  }
}

@media (max-width: 700px) {
  .mobile-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 20px;
    pointer-events: auto;
    background:
      radial-gradient(circle at 50% 16%, rgba(255,255,255,.92), transparent 20%),
      radial-gradient(circle at 22% 22%, rgba(255,185,210,.54), transparent 27%),
      radial-gradient(circle at 82% 18%, rgba(56,203,225,.44), transparent 28%),
      radial-gradient(circle at 46% 82%, rgba(255,216,107,.42), transparent 30%),
      linear-gradient(180deg, #ecffff 0%, #fff8e3 100%);
    animation: splash-fade-out .34s ease 2.08s forwards;
  }
  .mobile-splash::before {
    content: "";
    position: absolute;
    inset: -12%;
    opacity: .42;
    background:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.95) 0 6px, transparent 7px),
      radial-gradient(circle at 70% 24%, rgba(255,255,255,.82) 0 4px, transparent 5px),
      radial-gradient(circle at 58% 72%, rgba(255,255,255,.72) 0 5px, transparent 6px);
    background-size: 76px 76px, 118px 118px, 164px 164px;
    animation: garden-sparkle-field 5.6s linear infinite;
  }
  .mobile-splash::after {
    content: "";
    position: absolute;
    inset: -18% -42%;
    opacity: .66;
    background:
      linear-gradient(112deg, transparent 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,.38) 45%, rgba(255,255,255,.22) 54%, rgba(255,255,255,.06) 68%, transparent 100%),
      radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.36) 0 14%, transparent 48%);
    filter: blur(34px);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
    transform: translateX(-38%);
    animation: splash-soft-sheen 2.35s ease-in-out both;
  }
  .splash-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% center;
    opacity: .68;
    transform: scale(1.015);
    animation: splash-bg-zoom 1.05s cubic-bezier(.2,.8,.2,1) both;
  }
  .splash-stage {
    position: relative;
    z-index: 2;
    width: min(88vw, 360px);
    min-height: 560px;
    display: grid;
    place-items: center;
    animation: splash-stage-pop .78s cubic-bezier(.2,.8,.2,1) .06s both;
  }
  .splash-ring {
    position: absolute;
    left: 50%;
    top: 37%;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(255,255,255,.82);
    background:
      radial-gradient(circle, transparent 50%, rgba(255,255,255,.36) 51%, transparent 62%),
      conic-gradient(from 90deg, rgba(255,185,210,.42), rgba(56,203,225,.42), rgba(255,216,107,.42), rgba(255,185,210,.42));
    mask-image: radial-gradient(circle, transparent 54%, #000 55% 70%, transparent 71%);
    animation: splash-ring-spin 2.9s ease-out both;
  }
  .splash-fan {
    position: absolute;
    left: 50%;
    top: 26px;
    z-index: 4;
    width: 1px;
    height: 210px;
    transform: translateX(-50%);
    animation: splash-fan-float 2.2s ease-in-out .95s infinite;
  }
  .splash-fan span {
    position: absolute;
    left: -66px;
    top: 0;
    width: 132px;
    height: 190px;
    max-width: none;
    border: 5px solid rgba(255,255,255,.96);
    border-radius: 26px;
    overflow: hidden;
    background: rgba(255,255,255,.72);
    box-shadow: 0 22px 46px rgba(41, 90, 86, .18);
  }
  .splash-fan span::after {
    content: "";
    position: absolute;
    inset: -18% -70%;
    opacity: 0;
    pointer-events: none;
    background:
      linear-gradient(104deg, transparent 0 36%, rgba(255,255,255,.82) 47%, rgba(255,255,255,.34) 54%, transparent 66%);
    filter: blur(5px);
    mix-blend-mode: screen;
    animation: splash-image-sheen 1.9s cubic-bezier(.24,.72,.22,1) 1.18s both;
  }
  .splash-fan img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }
  .splash-fan span:nth-child(1) {
    object-position: center 30%;
    animation: splash-card-deal-left .72s cubic-bezier(.18,.84,.24,1.16) .32s both;
  }
  .splash-fan span:nth-child(1) img {
    object-position: center 30%;
  }
  .splash-fan span:nth-child(2) {
    animation: splash-card-deal-mid .78s cubic-bezier(.18,.84,.24,1.16) .42s both;
  }
  .splash-fan span:nth-child(2) img {
    object-position: center 34%;
  }
  .splash-fan span:nth-child(3) {
    animation: splash-card-deal-right .72s cubic-bezier(.18,.84,.24,1.16) .52s both;
  }
  .splash-fan span:nth-child(3) img {
    object-position: center 34%;
  }
  .splash-card {
    position: relative;
    z-index: 5;
    align-self: end;
    width: min(86vw, 330px);
    min-height: 246px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 28px 22px 30px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 36px;
    background:
      radial-gradient(circle at 30% 8%, rgba(255,255,255,.92), transparent 28%),
      linear-gradient(145deg, rgba(255,255,255,.72), rgba(235,255,250,.58));
    box-shadow: 0 30px 86px rgba(42, 114, 119, .18), inset 0 0 0 1px rgba(255,255,255,.48);
    backdrop-filter: blur(22px) saturate(1.2);
    animation: splash-card-in .76s cubic-bezier(.2,.8,.2,1) .8s both;
  }
  .splash-card::before {
    content: "";
    position: absolute;
    width: 164px;
    height: 164px;
    right: -42px;
    top: -42px;
    border-radius: 999px;
    opacity: .72;
    background: url("assets/effects/soap-bubble.svg") center / contain no-repeat;
  }
  .splash-card img {
    width: 86px;
    height: 86px;
    object-fit: cover;
    border: 5px solid rgba(255,255,255,.92);
    border-radius: 28px;
    box-shadow: 0 18px 38px rgba(44, 115, 132, .22);
    animation: splash-icon-pop .72s cubic-bezier(.2,.8,.2,1) .96s both;
  }
  .splash-card p {
    margin: 8px 0 0;
    color: #46b6d2;
    font-size: 14px;
    font-weight: 950;
    text-transform: uppercase;
    animation: splash-text-rise .5s ease 1.05s both;
  }
  .splash-card strong {
    color: #22312f;
    font-size: clamp(30px, 8.4vw, 38px);
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 3px 0 rgba(255,255,255,.9), 0 12px 28px rgba(40, 88, 84, .14);
    animation: splash-text-rise .52s ease 1.12s both;
  }
  .splash-card small {
    color: #60736e;
    font-size: 15px;
    font-weight: 850;
    animation: splash-text-rise .52s ease 1.2s both;
  }
  .splash-card i {
    position: relative;
    display: block;
    width: 78%;
    height: 14px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
  }
  .splash-card i::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #9ff6f1, #fff2a8, #ffcad8);
    animation: splash-progress 1.55s cubic-bezier(.2,.8,.2,1) 1.18s both;
  }
  .splash-bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .splash-bubbles span {
    position: absolute;
    left: 0;
    bottom: -90px;
    width: var(--s);
    height: var(--s);
    opacity: 0;
    background: url("assets/effects/soap-bubble.svg") center / contain no-repeat;
    animation: splash-bubble-rise var(--d) ease-in infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
  }
  .splash-bubbles span:nth-child(1) { --s: 112px; --x: 7vw; --drift: 16vw; --d: 2.7s; --delay: .05s; --o: .28; }
  .splash-bubbles span:nth-child(2) { --s: 72px; --x: 72vw; --drift: -10vw; --d: 2.35s; --delay: .24s; --o: .22; }
  .splash-bubbles span:nth-child(3) { --s: 148px; --x: 48vw; --drift: 9vw; --d: 2.9s; --delay: .14s; --o: .2; }
  .splash-bubbles span:nth-child(4) { --s: 58px; --x: 24vw; --drift: -8vw; --d: 2.25s; --delay: .48s; --o: .22; }
  .splash-bubbles span:nth-child(5) { --s: 96px; --x: 84vw; --drift: -20vw; --d: 2.72s; --delay: .68s; --o: .18; }
}

@media (max-width: 560px) {
  body::before {
    opacity: .58;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.95) 0 4px, transparent 5px),
      radial-gradient(circle, rgba(255,135,74,.2) 0 3px, transparent 4px),
      radial-gradient(circle, rgba(56,203,225,.18) 0 5px, transparent 6px);
    background-size: 62px 62px, 104px 104px, 148px 148px;
    animation: garden-sparkle-field 8s linear infinite;
  }
  .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::before {
    width: 500px;
    opacity: .95;
    animation-duration: 10s;
  }
  .hero::after {
    animation-duration: 3.8s;
  }
  .hero-bubbles {
    z-index: 9;
  }
  .hero-bubbles span {
    bottom: -150px;
    opacity: .34;
  }
  .hero-bubbles span:nth-child(1) { --bubble-size: 118px; --bubble-x: -8%; }
  .hero-bubbles span:nth-child(2) { --bubble-size: 76px; --bubble-x: 16%; }
  .hero-bubbles span:nth-child(3) { --bubble-size: 152px; --bubble-x: 30%; }
  .hero-bubbles span:nth-child(4) { --bubble-size: 90px; --bubble-x: 52%; }
  .hero-bubbles span:nth-child(5) { --bubble-size: 132px; --bubble-x: 70%; }
  .hero-bubbles span:nth-child(7) { --bubble-size: 168px; --bubble-x: 82%; }
  .hero-bubbles span:nth-child(9) { --bubble-size: 68px; --bubble-x: 6%; }
  .hero-bubbles span:nth-child(12) { --bubble-size: 138px; --bubble-x: 90%; }
  .hero-dots {
    opacity: .76;
    background-image:
      radial-gradient(circle at 12% 22%, rgba(255, 95, 123, .34) 0 10px, transparent 11px),
      radial-gradient(circle at 24% 82%, rgba(56, 203, 225, .34) 0 13px, transparent 14px),
      radial-gradient(circle at 92% 28%, rgba(255, 216, 107, .42) 0 14px, transparent 15px),
      radial-gradient(circle at 76% 88%, rgba(69, 208, 170, .3) 0 11px, transparent 12px),
      radial-gradient(circle at 46% 20%, rgba(188, 168, 255, .28) 0 8px, transparent 9px);
  }
  .hero-lux {
    opacity: .48;
    animation-duration: 4.6s;
  }
  .hero-confetti span {
    animation-duration: 4.8s;
    box-shadow: 0 12px 26px rgba(255, 117, 121, .24), 0 0 18px rgba(255,255,255,.58);
  }
  .hero-copy {
    animation: mobile-hero-rise .72s cubic-bezier(.2,.8,.2,1) both;
  }
  .hero-dots,
  .hero-aurora {
    animation-duration: 6.5s;
  }
  .hero-aurora {
    width: 116%;
    height: 74%;
    inset: auto -34% 9% auto;
    animation: garden-aurora-wave 6.2s ease-in-out infinite;
  }
  .app-token {
    animation: mobile-float 3.6s ease-in-out infinite;
  }
  .poker-stack {
    animation: mobile-stack-glam 4.2s ease-in-out infinite, mobile-glow 4.4s ease-in-out infinite;
    border-radius: 22px;
  }
  .poker-stack img {
    animation: poker-card-dance 3.8s ease-in-out infinite;
  }
  .mini-badges span:nth-child(odd),
  .hero-chips span:nth-child(odd) {
    animation: mobile-chip-bounce 4.2s ease-in-out infinite, premium-pill-flow 6.8s ease-in-out infinite;
  }
  .mini-badges span:nth-child(even),
  .hero-chips span:nth-child(even) {
    animation: mobile-chip-bounce 4.2s ease-in-out infinite reverse, premium-pill-flow 6.8s ease-in-out infinite;
  }
  .fx-premium-on {
    animation: mobile-focus-pop 5.2s ease-in-out infinite, premium-card-breathe 6.5s ease-in-out infinite;
  }
  .journey-grid img {
    height: 210px;
  }
  .journey-grid article:nth-child(2) img {
    object-position: center 24%;
  }
  .journey-grid article:nth-child(3) img {
    object-position: center 35%;
  }
  .journey-grid article:nth-child(4) img {
    object-position: center 33%;
  }
  .role-grid figure:nth-child(10) img {
    object-position: center 30%;
  }
  .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: 40px 16px;
  }
  .mascot-section {
    padding-top: 14px;
    padding-bottom: 22px;
  }
  .mascot-card {
    grid-template-columns: 1fr;
  }
  .mascot-card img {
    max-height: 240px;
  }
  .feature-grid,
  .journey-grid,
  .screenshots {
    grid-template-columns: 1fr;
  }
  .topic-copy h1 {
    font-size: clamp(36px, 11vw, 48px);
  }
  .topic-copy p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.66;
  }
  .topic-grid,
  .topic-grid-four,
  .pet-card-grid,
  .pet-orbit-grid,
  .pet-orbit-wide {
    grid-template-columns: 1fr;
  }
  .topic-grid article {
    min-height: 0;
  }
  .topic-collage {
    min-height: 220px;
    gap: 8px;
  }
  .topic-collage > img {
    border-radius: 20px;
  }
  .topic-collage > img:nth-child(1) { transform: translateY(12px) rotate(-4deg); }
  .topic-collage > img:nth-child(2) { transform: translateY(-8px) rotate(3deg); }
  .topic-collage > img:nth-child(3) { transform: translateY(10px) rotate(5deg); }
  .pet-showcase {
    padding-top: 44px;
  }
  .pet-showcase .section-heading {
    margin-bottom: 18px;
  }
  .pet-showcase .section-heading h2 {
    font-size: clamp(25px, 6.7vw, 30px);
  }
  .pet-duo-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pet-duo-grid figure {
    border-radius: 28px;
  }
  .pet-duo-grid figure::before {
    inset: 14px;
    border-radius: 22px;
  }
  .pet-duo-grid figure::after {
    display: none;
  }
  .pet-duo-grid img {
    height: 300px;
    padding: 18px 18px 82px;
  }
  .pet-duo-grid figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
    border-radius: 18px;
  }
  .pet-duo-grid b {
    font-size: 18px;
  }
  .pet-duo-grid span {
    font-size: 14px;
  }
  .pet-premium-stage {
    gap: 12px;
  }
  .pet-premium-main {
    min-height: 315px;
    border-radius: 28px;
  }
  .pet-premium-main img {
    min-height: 315px;
    padding: 20px 18px 70px;
  }
  .pet-premium-main::before {
    inset: 14px;
    border-radius: 22px;
  }
  .pet-premium-main::after {
    width: 54px;
    height: 54px;
    right: 18px;
    top: 18px;
  }
  .pet-premium-main figcaption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 12px 14px;
    border-radius: 18px;
  }
  .pet-premium-main figcaption strong {
    font-size: 18px;
  }
  .pet-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pet-orbit-grid,
  .pet-orbit-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .pet-orbit-grid figure {
    min-height: 176px;
    border-radius: 24px;
  }
  .pet-orbit-grid img {
    height: 136px;
    padding: 8px;
  }
  .pet-orbit-curated figure {
    min-height: 168px;
  }
  .pet-orbit-curated img {
    height: 128px;
  }
  .pet-orbit-grid figcaption {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .pet-orbit-grid figure::after {
    display: none;
  }
  .pet-card-grid figure {
    border-radius: 22px;
  }
  .pet-card-grid figcaption {
    min-height: 54px;
    padding: 10px 8px 12px;
    font-size: 13px;
  }
  .topic-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 16px;
  }
  .topic-links a {
    min-height: 44px;
    padding: 0 12px;
    text-align: center;
  }
  .candy-stage {
    padding-top: 36px;
  }
  .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;
  }
  .candy-side article:nth-child(1) img {
    object-position: center 10%;
  }
  .candy-side article:nth-child(2) img {
    object-position: center 22%;
  }
  .candy-side article:nth-child(3) img {
    object-position: center 26%;
  }
  .candy-side article:nth-child(4) img {
    object-position: center 42%;
  }
  .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: 44px;
    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) img {
    object-position: center 12%;
  }
  .role-grid figure:nth-child(2) img {
    object-position: center 18%;
  }
  .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 figure:nth-child(11) img {
    object-position: center 14%;
  }
  .role-grid img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: top center;
  }
  .role-grid figure:nth-child(1) img {
    object-position: center 12%;
  }
  .role-grid figure:nth-child(2) img {
    object-position: center 18%;
  }
  .role-grid figure:nth-child(10) img {
    object-position: center 30%;
  }
  .role-grid figure:nth-child(11) img {
    object-position: center 14%;
  }
  .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;
  }
}

.brand,
.app-token,
.brand-icon,
.app-token .app-badge {
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body {
    animation: none;
  }

  body::after {
    opacity: .22;
    animation: none;
  }

  .page-bubble-layer {
    display: none;
  }

  .hero-bg {
    animation: none;
  }

  .poker-stack img {
    animation: none !important;
  }

  body.fx-ready .poker-stack img {
    animation: premium-card-deal .62s cubic-bezier(.18,.92,.22,1.16) var(--deal-delay, .82s) both !important;
  }

  .fx-premium-on,
  .fx-premium-on img {
    animation-duration: 12s;
  }
}

@media (max-width: 560px) {
  .page-bubble-layer {
    z-index: 8;
    mix-blend-mode: screen;
  }
  .page-bubble-layer span {
    opacity: 0;
    border-width: 1px;
    filter: saturate(1.5) hue-rotate(var(--page-bubble-hue));
  }
  body.fx-ready .hero-copy .eyebrow {
    animation-delay: .12s;
  }
  body.fx-ready .hero h1 {
    animation-delay: .22s;
  }
  body.fx-ready .hero .lead {
    animation-delay: .42s;
  }
  body.fx-ready .hero-actions {
    animation-delay: .58s;
  }
  body.fx-ready .mini-badges {
    animation-delay: .72s;
  }
  body.fx-ready .poker-stack img:nth-child(1) { --deal-delay: .72s; }
  body.fx-ready .poker-stack img:nth-child(2) { --deal-delay: .84s; }
  body.fx-ready .poker-stack img:nth-child(3) { --deal-delay: .96s; }
  body.fx-ready .poker-stack img:nth-child(4) { --deal-delay: 1.08s; }
}

.article-page main {
  background:
    radial-gradient(circle at 12% 7%, rgba(255, 185, 210, .18), transparent 20%),
    radial-gradient(circle at 88% 6%, rgba(56, 203, 225, .16), transparent 22%),
    linear-gradient(180deg, #fffaf0 0%, #f5fffc 44%, #fff 100%);
}

.article-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(18px, 4vw, 52px);
  align-items: center;
  padding: clamp(40px, 6vw, 82px) clamp(18px, 6vw, 86px) clamp(34px, 5vw, 72px);
  overflow: hidden;
  border-bottom-left-radius: 46px;
  border-bottom-right-radius: 46px;
}

.article-hero::after {
  content: "";
  position: absolute;
  inset: auto 8% 22px 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 204, 215, .32), rgba(255, 156, 116, .28), transparent);
}

.article-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.article-hero h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(255,255,255,.98), 0 12px 28px rgba(56,203,225,.13);
}

.article-hero-copy > p:not(.eyebrow) {
  max-width: 820px;
  margin: 18px 0 0;
  color: #40534f;
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 750;
  line-height: 1.86;
}

.article-page .article-hero .hero-actions {
  opacity: 1 !important;
  animation: none !important;
}

.article-download-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 24px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.92), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(244,255,251,.76));
  box-shadow: 0 28px 70px rgba(45, 91, 86, .14), inset 0 0 0 1px rgba(255,255,255,.62);
}

.article-download-card img {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(45, 91, 86, .14);
}

.article-download-card strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
}

.article-download-card span {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.7;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding-top: clamp(32px, 5vw, 62px);
  padding-bottom: clamp(42px, 6vw, 78px);
  background: transparent;
}

.article-body,
.article-side-card {
  border: 2px solid rgba(255,255,255,.88);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,216,107,.16), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,255,253,.9));
  box-shadow: 0 20px 54px rgba(45, 91, 86, .1), inset 0 0 0 1px rgba(255,255,255,.66);
}

.article-body {
  padding: clamp(22px, 4vw, 42px);
  border-radius: 34px;
}

.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  color: #6e817d;
  font-size: 14px;
  font-weight: 850;
}

.article-breadcrumb a {
  color: #db6253;
}

.article-body p {
  margin: 0 0 18px;
  color: #40534f;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.95;
}

.article-body h2 {
  margin: 30px 0 18px;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.18;
}

.article-faq {
  display: grid;
  gap: 12px;
}

.article-faq details {
  overflow: hidden;
  border: 1px solid rgba(64, 198, 204, .22);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
}

.article-faq summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--ink);
  font-weight: 950;
}

.article-faq details p {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 15px;
}

.article-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}

.article-side-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 28px;
}

.article-side-card strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
}

.article-side-card a:not(.btn) {
  display: block;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  color: #40534f;
  font-weight: 900;
  line-height: 1.45;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.78);
}

.article-side-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.7;
}

.article-side-card.accent {
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.92), transparent 24%),
    linear-gradient(135deg, rgba(255,244,216,.96), rgba(229,251,255,.9));
}

.article-hub-wrap {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  width: min(100%, 1280px);
  margin: 0 auto;
  background: transparent;
}

.article-hub-group h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
}

.article-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.hub-card {
  position: relative;
  min-height: 152px;
  padding: 18px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 14%, rgba(255,216,107,.26), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,255,252,.86));
  box-shadow: 0 16px 38px rgba(45, 91, 86, .09), inset 0 0 0 1px rgba(255,255,255,.62);
  transition: transform .24s ease, box-shadow .24s ease;
}

.hub-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(45, 91, 86, .14);
}

.hub-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  color: white;
  border: 3px solid #fff;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--rose), var(--orange));
  font-weight: 950;
}

.hub-card strong,
.hub-card small {
  display: block;
}

.hub-card strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.hub-card small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .article-hero,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-side {
    position: static;
  }

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

@media (max-width: 560px) {
  .article-hero {
    padding: 30px 16px 28px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  .article-hero h1 {
    font-size: clamp(30px, 9.4vw, 42px);
  }

  .article-download-card {
    display: none;
  }

  .article-layout {
    padding: 28px 14px 48px;
  }

  .article-body {
    padding: 20px;
    border-radius: 26px;
  }

  .article-body p {
    font-size: 15px;
    line-height: 1.88;
  }

  .article-hub-wrap {
    padding: 28px 14px 48px;
  }

  .article-hub-grid {
    grid-template-columns: 1fr;
  }

  .hub-card {
    min-height: 0;
  }
}