/* V29: only the existing header CTA, added lower hero bolt and bonus 100%. */
/* Keep the CTA footprint while centring its text after removing the arrow. */
.site-header .header-cta { min-width:154px; justify-content:center; }
/* A second decorative lightning on the left/bottom of the hero illustration. */
.hero .hero-art > .hero-bolt--lower {
  top:auto; right:auto; bottom:-22px; left:0;
  width:clamp(150px,15vw,230px); height:auto; max-width:none;
  z-index:4; pointer-events:none;
  transform:rotate(-55deg); transform-origin:center;
  animation:z29-lower-lightning 6.5s ease-in-out infinite;
}
@keyframes z29-lower-lightning {
  0%,100% {transform:translate3d(0,0,0) rotate(-55deg);}
  50% {transform:translate3d(0,-7px,0) rotate(-58deg);}
}
/* V30: 100% sits behind the gift, as in the supplied reference.
   Move the number up and keep the gift lower so the offer remains legible. */
.promo-card--bonus .promo-number--bonus {
  z-index:1; left:5%; right:5%; top:8%; width:90%;
  margin:0; color:#ffde39; opacity:1;
  font-size:clamp(108px,14vw,220px); line-height:1; white-space:nowrap;
}
.promo-card--bonus .promo-img--gift {
  z-index:2; left:0; right:auto; top:32%; bottom:auto;
  width:100%; height:88%; object-fit:contain; object-position:center top;
}
@media (max-width:1200px) and (min-width:761px) {
  .hero .hero-art > .hero-bolt--lower {left:22%;bottom:-12px;width:132px;}
  .promo-card--bonus .promo-number--bonus {font-size:14vw;}
}
@media (max-width:760px) {
  .hero .hero-art > .hero-bolt--lower {width:clamp(100px,28vw,165px);left:-7%;bottom:-10px;}
  .promo-card--bonus .promo-number--bonus {font-size:39vw;}
}
@media (max-width:390px) {
  .hero .hero-art > .hero-bolt--lower {left:-5%;width:102px;bottom:-12px;}
}
@media (prefers-reduced-motion:reduce) {
  .hero .hero-art > .hero-bolt--lower {animation:none;transform:rotate(-55deg);}
}