:root {
  --stage-green: #043f22;
  --stage-deep: #00190d;
  --stage-gold: #ffd451;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000b06;
}

body {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.landing-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgb(15 87 51 / 45%), transparent 38%),
    #000b06;
}

.hero-stage {
  position: relative;
  width: 390px;
  max-width: 100vw;
  height: 844px;
  min-height: 640px;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgb(63 255 154 / 58%) 0, rgb(0 185 82 / 22%) 18%, transparent 42%),
    radial-gradient(circle at 9% 53%, rgb(26 221 112 / 35%) 0, transparent 30%),
    radial-gradient(circle at 93% 48%, rgb(15 189 84 / 38%) 0, transparent 31%),
    linear-gradient(180deg, #001c0f 0%, #006c37 35%, #018a43 54%, #00351d 78%, #001208 100%);
  box-shadow:
    0 0 80px rgb(1 255 120 / 16%),
    inset 0 0 80px rgb(0 10 6 / 55%);
}

.hero-stage::before {
  position: absolute;
  z-index: -4;
  inset: 0;
  background:
    repeating-linear-gradient(
      118deg,
      transparent 0 10%,
      rgb(84 255 156 / 5%) 10.5% 11.2%,
      transparent 11.7% 19%
    ),
    linear-gradient(90deg, rgb(0 0 0 / 26%), transparent 19% 81%, rgb(0 0 0 / 27%));
  content: "";
}

.hero-stage::after {
  position: absolute;
  z-index: -3;
  inset: 44% -18% -10%;
  background:
    radial-gradient(ellipse at 50% 100%, rgb(0 18 8 / 96%) 0 45%, transparent 72%),
    repeating-radial-gradient(ellipse at 50% 108%, rgb(30 114 54 / 33%) 0 3px, transparent 4px 18px);
  opacity: 0.84;
  content: "";
}

.aurora {
  position: absolute;
  z-index: -2;
  width: 94%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.42;
  filter: blur(28px);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.aurora-one {
  top: 16%;
  left: -44%;
  background: conic-gradient(from 20deg, transparent, #00ff84, transparent 33%, #e6ff7a 49%, transparent 66%);
  animation: aurora-drift 13s ease-in-out infinite alternate;
}

.aurora-two {
  top: 30%;
  right: -48%;
  background: conic-gradient(from 180deg, transparent, #9dff55, transparent 35%, #00da77 57%, transparent 76%);
  animation: aurora-drift 15s ease-in-out -7s infinite alternate-reverse;
}

.energy-burst {
  position: absolute;
  z-index: -1;
  top: 9%;
  left: 50%;
  width: 155%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(150 255 185 / 0%) 0deg 7deg,
    rgb(157 255 185 / 18%) 8deg 8.6deg,
    rgb(255 240 127 / 0%) 9deg 16deg
  );
  mask-image: radial-gradient(circle, #000 0 15%, transparent 66%);
  opacity: 0.7;
  animation: energy-spin 24s linear infinite;
  pointer-events: none;
}

.light-sweep {
  position: absolute;
  z-index: 1;
  top: 4%;
  left: -85%;
  width: 52%;
  height: 54%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgb(255 252 188 / 33%), transparent);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: scene-sweep 5.4s ease-in-out infinite;
  pointer-events: none;
}

.particle-field {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle-field span {
  position: absolute;
  border-radius: 50%;
  background: #fff2a6;
  box-shadow:
    0 0 5px #fff4a5,
    0 0 13px #f1dc48;
  opacity: 0;
  animation-name: particle-rise;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.brand-logo {
  position: absolute;
  z-index: 20;
  top: max(2.1%, env(safe-area-inset-top));
  left: 4.5%;
  width: 49%;
  filter:
    drop-shadow(0 3px 1px rgb(0 0 0 / 80%))
    drop-shadow(0 0 8px rgb(255 218 68 / 28%));
}

.brand-logo-shine {
  position: absolute;
  inset: -8%;
  background: linear-gradient(
    105deg,
    transparent 24%,
    rgb(255 255 255 / 0%) 38%,
    rgb(255 255 255 / 92%) 49%,
    rgb(255 239 143 / 65%) 53%,
    transparent 67%
  );
  background-size: 260% 100%;
  background-position: 175% 0;
  filter: blur(0.4px);
  -webkit-mask: url("assets/logo.webp") center / contain no-repeat;
  mask: url("assets/logo.webp") center / contain no-repeat;
  animation: logo-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

.promo-stage {
  position: absolute;
  z-index: 15;
  top: 9.4%;
  left: 3.5%;
  width: 93%;
  height: 25.2%;
  perspective: 720px;
}

.promo-group {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.4vh, 12px);
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: promo-cycle 9s cubic-bezier(0.22, 0.75, 0.18, 1) infinite both;
}

.promo-group-one {
  animation-delay: 0s;
}

.promo-group-two {
  animation-delay: -6s;
}

.promo-group-three {
  gap: clamp(5px, 0.9vh, 8px);
  animation-delay: -3s;
}

.promo-panel {
  position: relative;
  display: grid;
  width: 100%;
  min-height: clamp(43px, 6.1vh, 57px);
  place-items: center;
  padding: 8px 13px;
  overflow: hidden;
  border: 1px solid rgb(232 255 82 / 82%);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgb(1 97 47 / 94%), rgb(0 39 22 / 96%)),
    #00351d;
  box-shadow:
    0 4px 0 #002616,
    0 5px 0 rgb(255 214 51 / 72%),
    inset 0 1px 10px rgb(53 255 146 / 35%),
    0 0 18px rgb(115 255 70 / 28%);
}

.promo-panel::after {
  position: absolute;
  top: 0;
  left: -90%;
  width: 52%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 211 / 23%), transparent);
  content: "";
  animation: panel-glint 3s ease-in-out infinite;
}

.promo-panel img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 37px;
  object-fit: contain;
}

.promo-panel-slim {
  min-height: clamp(38px, 5.2vh, 48px);
  padding: 7px 12px;
}

.promo-panel-slim img {
  max-height: 32px;
}

.free-offer {
  width: 93%;
  padding: 0 5px 2px;
  filter:
    drop-shadow(0 5px 1px rgb(88 45 0 / 82%))
    drop-shadow(0 0 8px rgb(255 231 82 / 48%));
}

.phone,
.hero-character,
.coin-cloud,
.claim-button {
  position: absolute;
  will-change: transform;
}

.phone img,
.hero-character img,
.coin-cloud img,
.claim-button img {
  width: 100%;
  height: auto;
}

.phone {
  pointer-events: none;
  filter:
    drop-shadow(0 16px 13px rgb(0 0 0 / 58%))
    drop-shadow(0 0 8px rgb(143 255 60 / 15%));
}

.phone-left {
  z-index: 6;
  bottom: 11.4%;
  left: -12%;
  width: 47%;
  animation: phone-left-float 5.1s ease-in-out infinite;
}

.phone-right {
  z-index: 6;
  right: -12%;
  bottom: 10.8%;
  width: 45%;
  animation: phone-right-float 5.8s ease-in-out -2.3s infinite;
}

.phone-center {
  z-index: 11;
  right: 22.5%;
  bottom: 22.5%;
  width: 23%;
  animation: phone-center-float 4.4s ease-in-out -1.1s infinite;
}

.hero-character {
  z-index: 9;
  bottom: 9.8%;
  left: 50%;
  width: 57%;
  filter:
    drop-shadow(0 18px 16px rgb(0 17 7 / 66%))
    drop-shadow(0 0 14px rgb(81 255 132 / 16%));
  animation: character-float 5.4s ease-in-out -0.8s infinite;
  pointer-events: none;
}

.coin-cloud {
  pointer-events: none;
}

.coins-top {
  z-index: 5;
  top: -7%;
  right: -34%;
  width: 70%;
  opacity: 0.76;
  filter: blur(0.4px) drop-shadow(0 9px 8px rgb(37 21 0 / 45%));
  animation: coins-top-float 7.3s ease-in-out -2.2s infinite;
}

.coins-side {
  z-index: 7;
  top: 39%;
  left: -38%;
  width: 70%;
  opacity: 0.72;
  filter: blur(1.1px) drop-shadow(0 8px 10px rgb(29 13 0 / 48%));
  animation: coins-side-float 6.6s ease-in-out -4.1s infinite;
}

.coins-front {
  z-index: 18;
  bottom: -12%;
  left: -20%;
  width: 139%;
  opacity: 0.92;
  filter: blur(1.7px) drop-shadow(0 12px 10px rgb(38 17 0 / 62%));
  animation: coins-front-float 5.9s ease-in-out -1.3s infinite;
}

.claim-button {
  z-index: 24;
  bottom: max(2.2%, env(safe-area-inset-bottom));
  left: 50%;
  width: 91%;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 9px 7px rgb(0 13 6 / 80%))
    drop-shadow(0 0 13px rgb(255 221 55 / 40%));
  outline: none;
  touch-action: manipulation;
  animation: claim-pulse 1.55s cubic-bezier(0.33, 0.06, 0.23, 1) infinite;
}

.claim-button:focus-visible {
  border-radius: 999px;
  outline: 3px solid #fff6a6;
  outline-offset: 4px;
}

.claim-button:active {
  animation: none;
  transform: translateX(-50%) scale(0.96);
}

.claim-shine {
  position: absolute;
  inset: -6%;
  background: linear-gradient(
    104deg,
    transparent 32%,
    rgb(255 255 255 / 88%) 48%,
    rgb(255 244 164 / 68%) 52%,
    transparent 68%
  );
  background-size: 270% 100%;
  background-position: 175% 0;
  -webkit-mask: url("assets/button-claim.webp") center / contain no-repeat;
  mask: url("assets/button-claim.webp") center / contain no-repeat;
  animation: claim-shine 2.45s ease-in-out infinite;
  pointer-events: none;
}

.edge-vignette {
  position: absolute;
  z-index: 30;
  inset: 0;
  box-shadow:
    inset 0 0 48px rgb(0 12 6 / 52%),
    inset 0 -24px 36px rgb(0 7 4 / 42%);
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes promo-cycle {
  0% {
    opacity: 0;
    transform: translateY(9px) rotateX(-4deg) scale(0.975);
  }
  3.5% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
  31% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
  }
  35% {
    opacity: 0;
    transform: translateY(-12px) rotateX(7deg) scale(1.035);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) rotateX(7deg) scale(1.035);
  }
}

@keyframes panel-glint {
  0%,
  22% {
    left: -90%;
  }
  62%,
  100% {
    left: 145%;
  }
}

@keyframes character-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-0.35deg);
  }
  50% {
    transform: translateX(-50%) translateY(-11px) rotate(0.55deg);
  }
}

@keyframes phone-left-float {
  0%,
  100% {
    transform: translateY(0) rotate(-8.5deg);
  }
  48% {
    transform: translateY(-13px) rotate(-6.7deg);
  }
}

@keyframes phone-right-float {
  0%,
  100% {
    transform: translateY(0) rotate(8deg);
  }
  52% {
    transform: translateY(-15px) rotate(6.2deg);
  }
}

@keyframes phone-center-float {
  0%,
  100% {
    transform: translateY(0) rotate(3.8deg);
  }
  50% {
    transform: translateY(-9px) rotate(1.8deg);
  }
}

@keyframes coins-top-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
  }
  50% {
    transform: translate3d(-13px, 17px, 0) rotate(4deg) scale(1.04);
  }
}

@keyframes coins-side-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(11deg) scale(1);
  }
  50% {
    transform: translate3d(17px, -14px, 0) rotate(2deg) scale(1.06);
  }
}

@keyframes coins-front-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
  }
  50% {
    transform: translate3d(10px, -10px, 0) rotate(1.5deg) scale(1.035);
  }
}

@keyframes claim-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter:
      drop-shadow(0 9px 7px rgb(0 13 6 / 80%))
      drop-shadow(0 0 13px rgb(255 221 55 / 38%));
  }
  50% {
    transform: translateX(-50%) scale(1.055);
    filter:
      drop-shadow(0 11px 8px rgb(0 13 6 / 76%))
      drop-shadow(0 0 22px rgb(255 229 76 / 72%));
  }
}

@keyframes logo-shine {
  0%,
  25% {
    background-position: 175% 0;
  }
  65%,
  100% {
    background-position: -75% 0;
  }
}

@keyframes claim-shine {
  0%,
  28% {
    background-position: 175% 0;
  }
  68%,
  100% {
    background-position: -75% 0;
  }
}

@keyframes particle-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.4);
  }
  22% {
    opacity: 0.9;
  }
  65% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translate3d(9px, -62px, 0) scale(1.45);
  }
}

@keyframes aurora-drift {
  0% {
    transform: translate3d(-3%, -3%, 0) rotate(-8deg) scale(0.92);
  }
  100% {
    transform: translate3d(14%, 10%, 0) rotate(15deg) scale(1.12);
  }
}

@keyframes energy-spin {
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes scene-sweep {
  0%,
  16% {
    left: -85%;
    opacity: 0;
  }
  32% {
    opacity: 0.75;
  }
  58% {
    left: 145%;
    opacity: 0;
  }
  100% {
    left: 145%;
    opacity: 0;
  }
}

@media (max-width: 430px) {
  .hero-stage {
    width: 100vw;
    height: 100svh;
    max-height: none;
  }
}

@media (max-height: 700px) {
  .promo-stage {
    top: 8.2%;
    height: 26%;
  }

  .hero-character {
    bottom: 8.5%;
    width: 54%;
  }

  .phone-left {
    width: 43%;
  }

  .phone-right {
    width: 42%;
  }

  .claim-button {
    width: 85%;
  }
}

/* ===== Premium emerald-and-gold composition ===== */

:root {
  --emerald-black: #000b07;
  --emerald-deep: #002516;
  --emerald-rich: #006b3c;
  --emerald-bright: #00ae61;
  --champagne: #fff2ad;
  --gold: #ffd451;
  --deep-gold: #b56d00;
}

.landing-shell {
  background:
    radial-gradient(circle at 50% 42%, rgb(30 177 98 / 24%), transparent 38%),
    radial-gradient(circle at 50% 100%, rgb(226 173 34 / 9%), transparent 34%),
    var(--emerald-black);
}

.hero-stage {
  background:
    radial-gradient(
      ellipse at 50% 37%,
      rgb(64 255 159 / 52%) 0,
      rgb(0 153 80 / 25%) 19%,
      transparent 44%
    ),
    radial-gradient(
      ellipse at 13% 56%,
      rgb(0 191 103 / 30%) 0,
      transparent 31%
    ),
    radial-gradient(
      ellipse at 88% 51%,
      rgb(225 177 50 / 14%) 0,
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #00160d 0%,
      #004428 26%,
      #007b44 49%,
      #003b24 73%,
      #000d08 100%
    );
  box-shadow:
    0 0 86px rgb(0 255 128 / 14%),
    inset 0 0 76px rgb(0 6 4 / 60%),
    inset 0 -44px 72px rgb(0 5 3 / 55%);
}

.hero-stage::before {
  z-index: -4;
  background:
    linear-gradient(
      112deg,
      transparent 13%,
      rgb(255 232 130 / 7%) 28%,
      transparent 43%
    ),
    repeating-linear-gradient(
      122deg,
      transparent 0 12%,
      rgb(109 255 176 / 5%) 12.4% 13%,
      transparent 13.5% 22%
    ),
    linear-gradient(
      90deg,
      rgb(0 0 0 / 34%),
      transparent 18% 82%,
      rgb(0 0 0 / 35%)
    );
}

.hero-stage::after {
  z-index: -3;
  inset: 42% -18% -10%;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgb(0 12 7 / 98%) 0 39%,
      transparent 72%
    ),
    repeating-radial-gradient(
      ellipse at 50% 108%,
      rgb(83 171 91 / 20%) 0 2px,
      transparent 3px 18px
    );
  opacity: 0.94;
}

.stage-spotlight,
.gold-orbit,
.floor-halo {
  position: absolute;
  pointer-events: none;
}

.stage-spotlight {
  z-index: 0;
  top: 25%;
  left: 50%;
  width: 88%;
  height: 57%;
  transform: translateX(-50%);
  border-radius: 48%;
  background:
    radial-gradient(
      ellipse at 50% 47%,
      rgb(126 255 178 / 28%) 0,
      rgb(25 213 112 / 10%) 38%,
      transparent 72%
    ),
    conic-gradient(
      from 198deg at 50% 0,
      transparent 0 38%,
      rgb(255 231 130 / 12%) 43%,
      transparent 49% 100%
    );
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: spotlight-breathe 5.2s ease-in-out infinite;
}

.gold-orbit {
  z-index: 1;
  left: 50%;
  border: 1px solid rgb(255 220 99 / 20%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 18px rgb(255 219 94 / 5%),
    0 0 18px rgb(12 255 134 / 8%);
  opacity: 0.58;
}

.gold-orbit-one {
  top: 33%;
  width: 92%;
  aspect-ratio: 1.8;
  animation: orbit-one 10s ease-in-out infinite;
}

.gold-orbit-two {
  top: 42%;
  width: 72%;
  aspect-ratio: 1.65;
  animation: orbit-two 12s ease-in-out -4s infinite;
}

.floor-halo {
  z-index: 3;
  bottom: 8.7%;
  left: 50%;
  width: 82%;
  height: 17%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgb(255 219 87 / 30%) 0,
      rgb(24 204 105 / 18%) 30%,
      transparent 70%
    );
  filter: blur(10px);
  animation: floor-halo-pulse 5.6s ease-in-out infinite;
}

.aurora {
  opacity: 0.34;
  filter: blur(32px);
}

.energy-burst {
  top: 7%;
  width: 164%;
  opacity: 0.54;
}

.light-sweep {
  z-index: 32;
  width: 44%;
  height: 73%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 245 182 / 24%),
    transparent
  );
}

.particle-field {
  z-index: 4;
}

.particle-field span {
  background: var(--champagne);
  box-shadow:
    0 0 5px #ffffff,
    0 0 12px #ffe26b,
    0 0 20px rgb(25 255 139 / 55%);
}

.brand-logo {
  z-index: 42;
  top: max(2.2%, env(safe-area-inset-top));
  left: 4.5%;
  width: 48%;
  isolation: isolate;
  filter:
    drop-shadow(0 3px 1px rgb(0 0 0 / 86%))
    drop-shadow(0 0 11px rgb(255 214 63 / 38%));
}

.brand-logo img {
  position: relative;
  z-index: 1;
  transform-origin: center;
  filter: brightness(1.06) saturate(1.05);
  animation: logo-glow-pulse 2.8s ease-in-out infinite;
  will-change: transform, opacity;
}

.brand-logo-shine {
  z-index: 2;
  inset: 0;
  background-size: 280% 100%;
  -webkit-mask: none;
  mask: none;
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: logo-shine 2.8s ease-in-out infinite;
  will-change: background-position;
}

.logo-flare {
  position: absolute;
  z-index: 3;
  top: 25%;
  right: -2%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      transparent 45%,
      rgb(255 255 255 / 94%) 49% 51%,
      transparent 55%
    ),
    linear-gradient(
      0deg,
      transparent 45%,
      rgb(255 224 126 / 90%) 49% 51%,
      transparent 55%
    ),
    radial-gradient(circle, #fff 0 4%, #ffe88c 9%, transparent 35%);
  filter: drop-shadow(0 0 9px #ffbf28);
  opacity: 0;
  animation: logo-flare 2.8s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

.promo-stage {
  z-index: 28;
  top: 9.4%;
  left: 4%;
  width: 92%;
  height: 24.2%;
  perspective: 820px;
}

.promo-group {
  gap: clamp(8px, 1.25vh, 11px);
  will-change: transform, opacity;
  animation-timing-function: cubic-bezier(0.2, 0.72, 0.2, 1);
}

.promo-group-three {
  gap: clamp(5px, 0.8vh, 7px);
}

.promo-panel {
  width: 96%;
  min-height: clamp(44px, 5.8vh, 54px);
  padding: 8px 14px;
  border: 1px solid rgb(255 224 113 / 76%);
  border-radius: 15px;
  background:
    linear-gradient(
      105deg,
      rgb(0 29 18 / 88%),
      rgb(0 105 57 / 90%) 46%,
      rgb(0 34 21 / 90%)
    ),
    #00351d;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow:
    0 4px 0 rgb(0 23 13 / 88%),
    0 5px 0 rgb(185 116 0 / 72%),
    inset 0 1px 0 rgb(255 245 180 / 36%),
    inset 0 0 18px rgb(22 255 133 / 18%),
    0 0 22px rgb(0 255 127 / 14%);
}

.promo-panel::before {
  position: absolute;
  z-index: 0;
  inset: 3px;
  border: 1px solid rgb(79 255 167 / 20%);
  border-radius: 11px;
  content: "";
  pointer-events: none;
}

.promo-panel::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 245 183 / 30%),
    transparent
  );
}

.promo-panel img {
  max-height: 38px;
  filter:
    drop-shadow(0 2px 0 rgb(0 12 7 / 95%))
    drop-shadow(0 0 5px rgb(255 224 100 / 15%));
}

.promo-panel-slim {
  min-height: clamp(38px, 5vh, 46px);
}

.promo-panel-slim img {
  max-height: 31px;
}

.free-offer {
  position: relative;
  width: 91%;
  padding: 0 7px 2px;
  filter:
    drop-shadow(0 5px 1px rgb(69 37 0 / 86%))
    drop-shadow(0 0 12px rgb(255 226 75 / 50%));
}

.free-offer::before {
  position: absolute;
  z-index: -1;
  inset: 20% -1% 7%;
  border: 1px solid rgb(255 220 100 / 30%);
  border-radius: 14px;
  background: linear-gradient(
    100deg,
    rgb(0 24 15 / 65%),
    rgb(0 99 55 / 55%),
    rgb(0 24 15 / 68%)
  );
  content: "";
}

.phone {
  filter:
    drop-shadow(0 18px 15px rgb(0 0 0 / 66%))
    drop-shadow(0 0 12px rgb(60 255 146 / 18%));
}

.phone::before {
  position: absolute;
  z-index: -1;
  inset: 13% 4% 8%;
  border-radius: 44%;
  background: radial-gradient(
    ellipse,
    rgb(255 220 94 / 16%),
    rgb(0 255 132 / 8%) 42%,
    transparent 70%
  );
  filter: blur(10px);
  content: "";
}

.phone-left {
  z-index: 8;
  bottom: 11.7%;
  left: -7%;
  width: 40%;
  opacity: 0.94;
  animation: phone-left-float 5.4s ease-in-out infinite;
}

.phone-right {
  z-index: 8;
  right: -7%;
  bottom: 11.3%;
  width: 39.5%;
  opacity: 0.94;
  animation: phone-right-float 6s ease-in-out -2.3s infinite;
}

.phone-center {
  z-index: 17;
  right: 17%;
  bottom: 23.2%;
  width: 24.5%;
  filter:
    drop-shadow(0 16px 14px rgb(0 0 0 / 68%))
    drop-shadow(0 0 16px rgb(255 222 83 / 24%));
  animation: phone-center-float 4.7s ease-in-out -1.1s infinite;
}

.hero-character {
  z-index: 14;
  bottom: 9.3%;
  width: 58%;
  filter:
    drop-shadow(0 20px 17px rgb(0 9 5 / 72%))
    drop-shadow(0 0 16px rgb(65 255 144 / 20%))
    drop-shadow(0 0 5px rgb(255 226 111 / 17%));
  animation: character-float 5.2s ease-in-out -0.8s infinite;
}

.coin-cloud {
  transform: translateZ(0);
}

.coins-top {
  z-index: 6;
  top: -5%;
  right: -20%;
  width: 57%;
  opacity: 0.7;
  filter: blur(0.35px) drop-shadow(0 9px 8px rgb(38 21 0 / 46%));
  animation: coins-top-float 5.8s ease-in-out -2.2s infinite;
}

.coins-side {
  z-index: 11;
  top: 43%;
  left: -29%;
  width: 62%;
  opacity: 0.69;
  filter: blur(0.8px) drop-shadow(0 9px 10px rgb(30 14 0 / 50%));
  animation: coins-side-float 5.2s ease-in-out -4.1s infinite;
}

.coins-front {
  z-index: 21;
  bottom: -12%;
  left: -3%;
  width: 104%;
  opacity: 0.74;
  filter: blur(1px) drop-shadow(0 13px 11px rgb(39 18 0 / 62%));
  animation: coins-front-float 4.8s ease-in-out -1.3s infinite;
}

.claim-button {
  z-index: 50;
  bottom: max(2.3%, env(safe-area-inset-bottom));
  width: 87%;
  isolation: isolate;
  filter:
    drop-shadow(0 10px 8px rgb(0 9 5 / 86%))
    drop-shadow(0 0 16px rgb(255 218 52 / 48%));
  animation: claim-pulse 1.65s cubic-bezier(0.33, 0.06, 0.23, 1) infinite;
}

.claim-button::before {
  position: absolute;
  z-index: -1;
  inset: 11% 5% 3%;
  border-radius: 999px;
  background: radial-gradient(
    ellipse,
    rgb(255 225 89 / 44%),
    rgb(30 255 128 / 13%) 42%,
    transparent 72%
  );
  filter: blur(12px);
  content: "";
  animation: button-aura 1.65s ease-in-out infinite;
}

.claim-button img {
  position: relative;
  z-index: 1;
  filter: brightness(1.02) saturate(1.08);
}

.claim-shine {
  z-index: 2;
  inset: -9%;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  mix-blend-mode: screen;
  opacity: 0.76;
  animation: claim-shine 2.3s ease-in-out infinite;
}

.edge-vignette {
  z-index: 60;
  box-shadow:
    inset 0 0 52px rgb(0 8 5 / 54%),
    inset 0 -31px 42px rgb(0 5 3 / 48%),
    inset 0 1px 0 rgb(255 226 113 / 10%);
}

@keyframes character-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-0.3deg);
  }
  50% {
    transform: translateX(-50%) translateY(-10px) rotate(0.45deg);
  }
}

@keyframes phone-left-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-7.8deg);
  }
  50% {
    transform: translate3d(5px, -17px, 0) rotate(-5.4deg);
  }
}

@keyframes phone-right-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(7.5deg);
  }
  50% {
    transform: translate3d(-5px, -18px, 0) rotate(5.2deg);
  }
}

@keyframes phone-center-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(3.5deg) scale(1);
  }
  50% {
    transform: translate3d(-4px, -12px, 0) rotate(1deg) scale(1.045);
  }
}

@keyframes coins-top-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }
  50% {
    transform: translate3d(-22px, 20px, 0) rotate(4deg) scale(1.07);
  }
}

@keyframes coins-side-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(10deg) scale(1);
  }
  50% {
    transform: translate3d(23px, -20px, 0) rotate(-2deg) scale(1.08);
  }
}

@keyframes coins-front-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }
  50% {
    transform: translate3d(19px, -17px, 0) rotate(3deg) scale(1.055);
  }
}

@keyframes logo-glow-pulse {
  0%,
  100% {
    opacity: 0.94;
    transform: scale(1);
  }
  42% {
    opacity: 1;
    transform: scale(1.025);
  }
  58% {
    opacity: 0.97;
    transform: scale(1.006);
  }
}

@keyframes logo-shine {
  0%,
  18% {
    background-position: 175% 0;
  }
  70%,
  100% {
    background-position: -75% 0;
  }
}

@keyframes logo-flare {
  0%,
  16%,
  80%,
  100% {
    opacity: 0;
    transform: translate(50%, -50%) scale(0.3) rotate(0deg);
  }
  49% {
    opacity: 1;
    transform: translate(50%, -50%) scale(1.2) rotate(45deg);
  }
}

@keyframes claim-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter:
      brightness(1)
      drop-shadow(0 10px 8px rgb(0 9 5 / 86%))
      drop-shadow(0 0 15px rgb(255 218 52 / 44%));
  }
  50% {
    transform: translateX(-50%) scale(1.06);
    filter:
      brightness(1.14)
      drop-shadow(0 12px 9px rgb(0 9 5 / 80%))
      drop-shadow(0 0 27px rgb(255 229 84 / 78%));
  }
}

@keyframes claim-shine {
  0%,
  24% {
    background-position: 175% 0;
  }
  70%,
  100% {
    background-position: -75% 0;
  }
}

@keyframes button-aura {
  0%,
  100% {
    opacity: 0.54;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes spotlight-breathe {
  0%,
  100% {
    opacity: 0.68;
    transform: translateX(-50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.04);
  }
}

@keyframes floor-halo-pulse {
  0%,
  100% {
    opacity: 0.58;
    transform: translateX(-50%) scale(0.94);
  }
  50% {
    opacity: 0.94;
    transform: translateX(-50%) scale(1.06);
  }
}

@keyframes orbit-one {
  0%,
  100% {
    transform: translateX(-50%) rotate(-4deg) scale(0.98);
    opacity: 0.34;
  }
  50% {
    transform: translateX(-50%) rotate(5deg) scale(1.04);
    opacity: 0.62;
  }
}

@keyframes orbit-two {
  0%,
  100% {
    transform: translateX(-50%) rotate(7deg) scale(1.02);
    opacity: 0.25;
  }
  50% {
    transform: translateX(-50%) rotate(-5deg) scale(0.95);
    opacity: 0.5;
  }
}

@media (max-height: 700px) {
  .promo-stage {
    top: 8.4%;
    height: 25.5%;
  }

  .hero-character {
    bottom: 8.7%;
    width: 54%;
  }

  .phone-left,
  .phone-right {
    width: 37%;
  }

  .phone-center {
    bottom: 22%;
    width: 22%;
  }

  .claim-button {
    width: 83%;
  }
}