.promo-box {
  position: relative;
  z-index: 9;
  /* width: 1312px; */
  max-width: 1312px;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(0px - var(--box-info-height, 64px) - var(--promo-box-pt-desktop, 42px) - var(--promo-box-vo-desktop, 25px));
}

@keyframes promoBoxParallaxFromLeft {
  from { opacity: 0; transform: translateX(-40%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes promoBoxParallaxFromRight {
  from { opacity: 0; transform: translateX(40%); }
  to   { opacity: 1; transform: translateX(0); }
}

.promo-box-parallax {
  position: absolute;
  top: var(--px-top, 0);
  width: var(--px-width, 30vw);
  height: var(--px-height, auto);
  max-width: var(--px-maxw, none);
  max-height: var(--px-maxh, none);
  pointer-events: none;
  user-select: none;
  overflow: visible;
  z-index: 0;
  will-change: transform, opacity;
}

.promo-box-parallax__img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
  transform: translate3d(0, var(--scroll-y, 0), 0);
}


.promo-box-parallax--left {
  left: var(--px-horiz, 0);
  right: auto;
  animation: promoBoxParallaxFromLeft .9s cubic-bezier(.16, .8, .26, 1) both;
}

/* Lightning: entry + periodic FLASH cycle (5s) that "lights up" + gentle float */
.promo-box-parallax--lightning,
.promo-box-parallax--lightning.promo-box-parallax--left,
.promo-box-parallax--lightning.promo-box-parallax--right {
  animation:
    promoLightningStrike 1.6s cubic-bezier(.33, 0, .25, 1) both,
    promoLightningPulse 5s ease-in-out 4.7s infinite;
  will-change: transform, opacity, filter;
}

/* Lightning dark at rest, FLASHES at 86%, then back to dark — no continuous glow */
@keyframes promoLightningPulse {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
  40% {
    transform: translate3d(0, -3px, 0) rotate(0) scale(1.005);
  }
  80% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
  /* FLASH */
  86% {
    transform: translate3d(0, -2px, 0) rotate(0) scale(1.02);
    filter: brightness(1.7) drop-shadow(0 0 36px rgba(34, 226, 67, .95)) drop-shadow(0 0 12px rgba(255, 255, 255, .6));
  }
  93% {
    filter: brightness(1.1) drop-shadow(0 0 16px rgba(34, 226, 67, .4));
  }
}

.promo-box-parallax--lightning::before,
.promo-box-parallax--lightning::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../img/lighting.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.promo-box-parallax--lightning::before {
  animation: promoLightningGhost 1.6s cubic-bezier(.33, 0, .25, 1) .1s both;
}

.promo-box-parallax--lightning::after {
  animation: promoLightningGhost 1.6s cubic-bezier(.33, 0, .25, 1) .3s both;
}

/* Lightning falls, FLASHES at impact (~80%), then settles with NO ongoing glow */
@keyframes promoLightningStrike {
  0% {
    opacity: 0;
    transform: translate3d(80%, -180%, 0) rotate(8deg) scale(.9);
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
  15% {
    opacity: 1;
  }
  /* Landed + FLASH — clear "light up" moment */
  80% {
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: brightness(1.85) drop-shadow(0 0 38px rgba(34, 226, 67, .95));
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
}

/* Ghost bolts: smooth diagonal fall, fade in then out without stopping mid-air */
@keyframes promoLightningGhost {
  0% {
    opacity: 0;
    transform: translate3d(var(--ghost-start-x, 28%), -160%, 0) rotate(8deg) scale(var(--ghost-scale, .85));
  }
  35% {
    opacity: .6;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--ghost-end-x, -12%), 5%, 0) rotate(0) scale(var(--ghost-scale, .85));
  }
}

.promo-box-parallax--lightning::before { --ghost-end-x: -12%; --ghost-start-x:  50%; --ghost-scale: .85; }
.promo-box-parallax--lightning::after  { --ghost-end-x:  10%; --ghost-start-x: 110%; --ghost-scale: .92; }

@media (prefers-reduced-motion: reduce) {
  .promo-box-parallax--lightning,
  .promo-box-parallax--lightning::before,
  .promo-box-parallax--lightning::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .promo-box-parallax--lightning::before,
  .promo-box-parallax--lightning::after {
    opacity: 0;
  }
}

.promo-box-parallax--right {
  right: var(--px-horiz, 0);
  left: auto;
  animation: promoBoxParallaxFromRight .9s cubic-bezier(.16, .8, .26, 1) both;
}

/* Card bloom — starts rotated 75° to the right (edge-on), then unfolds and rises like a flower.
   Lightning strikes first; the card blooms from the energy as the bolt settles. */
.promo-box-parallax--card-emerge.promo-box-parallax--left,
.promo-box-parallax--card-emerge.promo-box-parallax--right {
  animation:
    promoCardBloom 1.8s cubic-bezier(.33, 0, .25, 1) .55s both,
    promoCardThrow .55s cubic-bezier(.5, 0, .25, 1) 2.35s forwards,
    promoCardSettle .4s ease-out 3.95s forwards,
    promoCardElectrify 5s ease-in-out 5s infinite;
  transform-origin: 50% 80%;
  will-change: transform, opacity, filter;
}

/* Bloom — keeps green glow on through throw + gem arc (it goes dark when settle runs) */
@keyframes promoCardBloom {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateY(75deg) translateY(38%) scale(.55);
    filter: brightness(1.15) drop-shadow(0 0 14px rgba(34, 226, 67, .4));
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: perspective(900px) rotateY(0deg) translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 14px rgba(34, 226, 67, .4));
  }
}

/* Card throws the gem — quick wind-up + swing motion. Gem launches at the throw peak. */
@keyframes promoCardThrow {
  0% {
    transform: perspective(900px) rotateY(0deg) rotate(0deg) translateY(0) scale(1);
  }
  /* Wind up — tilt back and to the right */
  35% {
    transform: perspective(900px) rotateY(-10deg) rotate(-2.5deg) translateY(2px) scale(1.015);
  }
  /* Throw release — swing forward */
  65% {
    transform: perspective(900px) rotateY(7deg) rotate(1.5deg) translateY(-3px) scale(.99);
  }
  /* Settle back */
  100% {
    transform: perspective(900px) rotateY(0deg) rotate(0deg) translateY(0) scale(1);
  }
}

/* Card settle: fades the birth-glow to zero after the gem has landed */
@keyframes promoCardSettle {
  0% {
    filter: brightness(1) drop-shadow(0 0 14px rgba(34, 226, 67, .4));
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
}

/* Card electrify: dark at rest, brief subtle ELECTRIFICATION at 88% — much smaller glow */
@keyframes promoCardElectrify {
  0%, 100% {
    transform: perspective(900px) rotateY(0deg) translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
  40% {
    transform: perspective(900px) rotateY(0deg) translateY(-5px) scale(1);
  }
  82% {
    transform: perspective(900px) rotateY(0deg) translateY(0) scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
  /* ELECTRIFY — subtle glow halo, brief */
  88% {
    transform: perspective(900px) rotateY(0deg) translateY(-3px) scale(1.008);
    filter: brightness(1.12) drop-shadow(0 0 14px rgba(34, 226, 67, .55));
  }
  95% {
    filter: brightness(1.03) drop-shadow(0 0 6px rgba(34, 226, 67, .25));
  }
}

@media (max-width: 1199px) {
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--t-left,
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--t-right {
    animation: promoCardBloom 1.8s cubic-bezier(.33, 0, .25, 1) .55s both;
    transform-origin: 50% 80%;
  }
}

@media (max-width: 991px) {
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--m-left,
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--m-right {
    animation: promoCardBloom 1.8s cubic-bezier(.33, 0, .25, 1) .55s both;
    transform-origin: 50% 80%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-box-parallax--card-emerge,
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--m-right,
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--t-left,
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--t-right,
  .promo-box .promo-box-parallax.promo-box-parallax--card-emerge.promo-box-parallax--m-left {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Coin drop — launched by the card's throw gesture, semicircular arc over the hero text.
   Throw distance scales with viewport so the gem always starts at the card on every screen. */
.promo-box-parallax--coin-arc.promo-box-parallax--right {
  /* Horizontal: distance from gem-at-rest back to card center.
     Tuned: ≈ -1120px @ 1920vw, ≈ -935px @ 1100vw, scales down to -270px floor on tiny viewports. */
  --tx: clamp(-1120px, -85vw, -270px);
  /* Vertical start: card's top relative to gem's top.
     Tuned: ≈ -300px @ 1920, ≈ -210px @ 1100, floors at -120px. */
  --ty: clamp(-300px, calc(-10.97vw - 89.4px), -120px);
  /* Apex: ~1.7× higher than start. */
  --ay: clamp(-510px, calc(-18.66vw - 151.7px), -200px);
  animation:
    promoCoinArc 1.3s linear 2.55s both,
    promoCoinSettle .4s ease-out 3.9s forwards,
    promoCoinElectrify 5s ease-in-out 5s infinite;
  will-change: transform, opacity, filter;
  transform-origin: 50% 50%;
}

@keyframes promoCoinArc {
  /* True ballistic motion: y(t) = ty * (1 + 4t - 5t²) — apex at 40% time = 1.8×ty above.
     Each step in descent strictly increases speed (true gravity). X is linear (constant velocity). */
  0%   { opacity: 0; transform: translate3d(var(--tx),               var(--ty),                  0) scale(.20) rotate(0deg);    filter: drop-shadow(0 0 0 rgba(34, 226, 67, 0));    }
  4%   { opacity: 1;                                                                                                                                                                 }
  /* Rising — decelerating */
  10%  {              transform: translate3d(calc(var(--tx) * .9),   calc(var(--ty) * 1.35),     0) scale(.30) rotate(200deg);  filter: drop-shadow(0 0 4px rgba(34, 226, 67, .35)); }
  20%  {              transform: translate3d(calc(var(--tx) * .8),   calc(var(--ty) * 1.60),     0) scale(.40) rotate(360deg);  }
  30%  {              transform: translate3d(calc(var(--tx) * .7),   calc(var(--ty) * 1.75),     0) scale(.48) rotate(480deg);  }
  /* Apex (40% time → 1.8 × ty) */
  40%  {              transform: translate3d(calc(var(--tx) * .6),   calc(var(--ty) * 1.80),     0) scale(.55) rotate(560deg);  filter: drop-shadow(0 0 10px rgba(34, 226, 67, .5)); }
  50%  {              transform: translate3d(calc(var(--tx) * .5),   calc(var(--ty) * 1.75),     0) scale(.62) rotate(620deg);  }
  /* Descent — strictly accelerating (Δ in Y grows 5%, 15%, 25%, 35%, 45%, 55% of ty per step) */
  60%  {              transform: translate3d(calc(var(--tx) * .4),   calc(var(--ty) * 1.60),     0) scale(.70) rotate(660deg);  }
  70%  {              transform: translate3d(calc(var(--tx) * .3),   calc(var(--ty) * 1.35),     0) scale(.78) rotate(690deg);  }
  80%  {              transform: translate3d(calc(var(--tx) * .2),   calc(var(--ty) * 1.00),     0) scale(.86) rotate(710deg);  }
  90%  {              transform: translate3d(calc(var(--tx) * .1),   calc(var(--ty) * .55),      0) scale(.93) rotate(720deg);  }
  100% { opacity: 1; transform: translate3d(0,                       0,                          0) scale(1)   rotate(720deg);  filter: drop-shadow(0 0 8px rgba(34, 226, 67, .35)); }
}

/* Gem settle: fades arc-end glow to zero */
@keyframes promoCoinSettle {
  0% {
    filter: drop-shadow(0 0 8px rgba(34, 226, 67, .35));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
}

/* Gem electrify: DARK baseline, subtle pulse at 90% (slight delay after card) */
@keyframes promoCoinElectrify {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(1080deg);
    filter: drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
  40% {
    transform: translate3d(0, -3px, 0) scale(1) rotate(1080deg);
  }
  84% {
    transform: translate3d(0, 0, 0) scale(1) rotate(1080deg);
    filter: drop-shadow(0 0 0 rgba(34, 226, 67, 0));
  }
  /* ELECTRIFY — subtle glow halo, no white blowout */
  90% {
    transform: translate3d(0, -3px, 0) scale(1.015) rotate(1080deg);
    filter: drop-shadow(0 0 12px rgba(34, 226, 67, .55));
  }
  96% {
    filter: drop-shadow(0 0 5px rgba(34, 226, 67, .2));
  }
}

@media (max-width: 991px) {
  /* On mobile the card lives on the right too — no big arc makes sense; fall back to slide */
  .promo-box .promo-box-parallax.promo-box-parallax--coin-arc.promo-box-parallax--right {
    animation: promoBoxParallaxFromRight .9s cubic-bezier(.16, .8, .26, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-box-parallax--coin-arc {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.promo-box-parallax.is-hide-desktop {
  display: none;
}

@media (max-width: 1199px) {
  .promo-box .promo-box-parallax {
    top: var(--px-top-t, var(--px-top, 0)) !important;
    width: var(--px-width-t, var(--px-width, 30vw)) !important;
    height: var(--px-height-t, var(--px-height, auto)) !important;
    max-width: var(--px-maxw-t, var(--px-maxw, none)) !important;
    max-height: var(--px-maxh-t, var(--px-maxh, none)) !important;
  }

  .promo-box .promo-box-parallax--left {
    left: var(--px-horiz-t, var(--px-horiz, 0)) !important;
    right: auto !important;
  }

  .promo-box .promo-box-parallax--right {
    right: var(--px-horiz-t, var(--px-horiz, 0)) !important;
    left: auto !important;
  }

  .promo-box .promo-box-parallax.promo-box-parallax--t-left {
    left: var(--px-horiz-t, 0) !important;
    right: auto !important;
    animation: promoBoxParallaxFromLeft .9s cubic-bezier(.16, .8, .26, 1) both;
  }

  .promo-box .promo-box-parallax.promo-box-parallax--t-right {
    right: var(--px-horiz-t, 0) !important;
    left: auto !important;
    animation: promoBoxParallaxFromRight .9s cubic-bezier(.16, .8, .26, 1) both;
  }

  .promo-box-parallax.is-hide-tablet {
    display: none;
  }

  .promo-box-parallax.is-hide-desktop {
    display: block;
  }
}

@media (max-width: 991px) {
  .promo-box .promo-box-parallax {
    top: var(--px-top-m, var(--px-top, 0)) !important;
    width: var(--px-width-m, var(--px-width, 30vw)) !important;
    height: var(--px-height-m, var(--px-height, auto)) !important;
    max-width: var(--px-maxw-m, var(--px-maxw, none)) !important;
    max-height: var(--px-maxh-m, var(--px-maxh, none)) !important;
  }

  .promo-box .promo-box-parallax--left {
    left: var(--px-horiz-m, var(--px-horiz, 0)) !important;
    right: auto !important;
  }

  .promo-box .promo-box-parallax--right {
    right: var(--px-horiz-m, var(--px-horiz, 0)) !important;
    left: auto !important;
  }

  .promo-box .promo-box-parallax.promo-box-parallax--m-left {
    left: var(--px-horiz-m, 0) !important;
    right: auto !important;
    animation: promoBoxParallaxFromLeft .9s cubic-bezier(.16, .8, .26, 1) both;
  }

  .promo-box .promo-box-parallax.promo-box-parallax--m-right {
    right: var(--px-horiz-m, 0) !important;
    left: auto !important;
    animation: promoBoxParallaxFromRight .9s cubic-bezier(.16, .8, .26, 1) both;
  }

  .promo-box-parallax.is-hide-desktop {
    display: block;
  }

  .promo-box-parallax.is-hide-mobile {
    display: none;
  }
}

.promo-box[data-auto-offset="0"] {
  margin-top: calc(0px - var(--promo-box-offset-desktop, 131px));
}

.promo-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 48px;
  border: 1px solid #E8E1D4;
  background: linear-gradient(0deg, rgba(239, 228, 210, 0.75) 0%, rgba(224, 213, 195, 0.84) 100%);
  backdrop-filter: blur(10.399999618530273px);
  -webkit-backdrop-filter: blur(10.399999618530273px);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 1) 50px, rgba(0, 0, 0, 1) 100%);
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 1) 50px, rgba(0, 0, 0, 1) 100%);
  z-index: -1;
  pointer-events: none;
}

.promo-box__inner {
  position: relative;
  z-index: 1;
  padding: 56px 48px 48px;
}

.promo-box__info {
  color: #000;
  text-align: center;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 26px;
  margin: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.promo-box__info-text {
  leading-trim: both;
  text-edge: cap;
  text-box: trim-both cap alphabetic;
  font-feature-settings: 'liga' off, 'clig' off;
}

.promo-box__info-arrows {
  flex-shrink: 0;
  display: inline-block;
}

.promo-box__ratings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.promo-box__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.promo-box__rating-bicon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.promo-box__rating-icon {
  width: 100%;
  height: auto;
  display: block;
}

.promo-box__rating-label {
  color: #000;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.promo-box__cta-wrap {
  order: 0;
}

.promo-box__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00FF80;
  color: #000;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  font-family: Nunito, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 991px) {
  .promo-box::before {
    border-radius: 32px;
  }

  .promo-box__inner {
    padding: 24px 22px 32px;
  }
}

@media (max-width: 380px) {
  .promo-box::before {
    border-radius: 24px;
  }
}

@media (max-width: 991px) {

  .promo-box__info {
    margin-bottom: 24px;
  }

  .promo-box__info-arrows {
    display: none;
  }
}

@media (max-width: 400px), (max-height: 600px) {
  .promo-box__inner {
    padding: 16px 22px 32px;
  }
  .promo-box__info {
    margin-bottom: 16px;
  }
}

@media (max-width: 991px) {

  .promo-box__ratings {
    flex-direction: column;
    gap: 16px;
  }

  .promo-box__cta-wrap {
    order: -1;
    width: 100%;
  }

  .promo-box__cta {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .promo-box,
  .promo-box[data-auto-offset="0"] {
    margin-top: clamp(-130px, calc(24.5vh - 235px), 0px);
  }
}

@media (max-width: 991px) and (max-height: 480px) {
  .promo-box,
  .promo-box[data-auto-offset="0"] {
    margin-top: clamp(-130px, calc(38vh - 235px), 0px);
  }
}

@media (max-width: 360px) and (max-height: 500px) {
  .promo-box,
  .promo-box[data-auto-offset="0"] {
    margin-top: clamp(-130px, calc(38vh - 235px), 0px);
  }
}

@media (min-width: 601px) and (max-width: 991px) and (min-height: 701px) {
  .promo-box,
  .promo-box[data-auto-offset="0"] {
    margin-top: clamp(-160px, calc(18.5vh - 300px), -3px);
  }
}

@media (max-width: 600px) and (min-height: 701px) {
  .promo-box,
  .promo-box[data-auto-offset="0"] {
    margin-top: clamp(-100px, calc(20vh - 220px), 0px);
  }
}

@media (max-width: 480px) and (min-height: 701px) {
  .promo-box,
  .promo-box[data-auto-offset="0"] {
    margin-top: clamp(-80px, calc(15vh - 180px), 0px);
  }
}

@media (max-width: 400px) and (max-height: 740px) {
  .promo-box,
  .promo-box[data-auto-offset="0"] {
    margin-top: clamp(-45px, calc(7vh - 181px), 0px);
  }
}
@media (max-width: 991px) and (max-height: 430px) {
  .promo-box .promo-box-parallax--card-emerge {
    display: none !important;
  }

  .promo-box .promo-box-parallax--coin-arc {
    top: calc(-20vh) !important;
  }
}
@media (max-width: 300px) {
  .promo-box .promo-box-parallax--card-emerge,
  .promo-box .promo-box-parallax--coin-arc {
    display: none !important;
  }
}