/* Hero-only composition. All rules are scoped to the existing bonus banner. */
.banner.bonusBanner {
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.72fr;
  align-items: center;
  min-height: 420px;
  height: auto;
  padding: 38px 44px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #737aaf45;
  border-radius: 26px;
  background: radial-gradient(ellipse at 56% 100%, #13626b75, transparent 48%), radial-gradient(ellipse at 58% 12%, #7054bb70, transparent 50%), linear-gradient(115deg, #101423 5%, #1c1b38 58%, #101725);
  box-shadow: inset 0 1px 0 #ffffff12, 0 18px 45px #00000028;
  font-family: Arial, sans-serif;
  color: #fff;
}
.banner.bonusBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(125deg, transparent 0 68px, #b5b9ff06 69px 70px);
  mask-image: linear-gradient(90deg, transparent, #000);
}
.banner.bonusBanner::after {
  content: "";
  position: absolute;
  padding: 0;
  width: auto;
  height: 2px;
  bottom: 0;
  left: 9%;
  right: 9%;
  background: linear-gradient(90deg, transparent, #b5fff1, #b492ed, transparent);
  box-shadow: 0 0 24px #64ffe6;
}
.bonusBanner .bonusHalo {
  position: absolute;
  width: 360px;
  height: 360px;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  border: 1px solid #bfa3ff75;
  border-radius: 50%;
  box-shadow: 0 0 45px #9c6eff35, inset 0 0 42px #8267ff25;
  pointer-events: none;
}
.bonusBanner .bonusHalo::before {
  content: "";
  position: absolute;
  inset: 15px;
  border: 7px solid #ba9aff28;
  border-left-color: #91f4df;
  border-right-color: #cbb0ff;
  border-radius: inherit;
  filter: drop-shadow(0 0 9px #87dfdc65);
}
.bonusBanner .bonusLead { position: relative; z-index: 2; min-width: 0; }
.bonusBanner .bonusEyebrow { display: inline-flex; align-items: center; gap: 9px; color: #dcdef2; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.bonusBanner .bonusEyebrow i { width: 6px; height: 6px; background: #9af3d6; border-radius: 50%; box-shadow: 0 0 12px #9af3d6; }
.bonusBanner .bonusAmount { margin: 22px 0 4px; padding: 0; font-size: clamp(100px, 10.5vw, 154px); line-height: .88; letter-spacing: -9px; font-weight: 900; color: #ffdda1; background: linear-gradient(165deg, #fff9e9 15%, #ffe1a4 49%, #dba765 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 5px 20px #e8ac4820); }
.bonusBanner .bonusAmount span { font-size: .57em; letter-spacing: -4px; vertical-align: 12%; }
.bonusBanner .bonusSubtitle { margin: 16px 0 0; font-size: 27px; line-height: 1.2; font-weight: 400; letter-spacing: -.5px; text-transform: none; }
.bonusBanner .bonusSubtitle b { display: block; font-weight: 700; }
.bonusBanner .bonusAccent { display: flex; align-items: center; gap: 12px; margin-top: 30px; font-size: 9px; letter-spacing: 3px; color: #aaaec9; }
.bonusBanner .bonusAccent span { width: 34px; height: 1px; background: #c7a96e; }
.bonusBanner .bonusPortrait { position: absolute; z-index: 1; bottom: -42px; left: 53%; transform: translateX(-50%) rotate(-4deg); width: auto; height: 450px; max-width: none; object-fit: contain; pointer-events: none; filter: drop-shadow(0 14px 28px #05081480); }
.bonusBanner .bonusOffers { grid-column: 3; display: grid; gap: 14px; position: relative; z-index: 2; }
.bonusBanner .bonusOffer { position: relative; padding: 22px 24px; border: 1px solid #9cfbe530; border-radius: 18px; background: linear-gradient(115deg, #34544f65, #1b2945b8); box-shadow: inset 0 1px 0 #ffffff0a, 0 12px 30px #00000018; backdrop-filter: blur(16px); }
.bonusBanner .bonusOfferGold { background: linear-gradient(115deg, #63503855, #292338b8); border-color: #ffdd9d30; }
.bonusBanner .bonusOffer h3 { margin: 0 0 9px; font-size: 48px; line-height: 1; letter-spacing: -2px; font-weight: 800; color: #a4ffe3; }
.bonusBanner .bonusOffer h3 span { font-size: .58em; letter-spacing: -1px; margin-left: 3px; }
.bonusBanner .bonusOffer h3 small { font-size: .4em; letter-spacing: 0; font-weight: 400; }
.bonusBanner .bonusOfferGold h3 { color: #ffdda1; }
.bonusBanner .bonusOffer p { margin: 0; max-width: 160px; font-size: 14px; line-height: 1.35; color: #e1e3ee; }
.bonusBanner .bonusIcon { position: absolute; top: 18px; right: 16px; width: 23px; height: 23px; color: #a4ffe3; opacity: .6; }
.bonusBanner .bonusOfferGold .bonusIcon { color: #ffdda1; }
@media (max-width: 1000px) {
  .banner.bonusBanner { padding: 30px; grid-template-columns: 1fr .65fr .8fr; min-height: 380px; }
  .bonusBanner .bonusPortrait { height: 380px; left: 51%; bottom: -22px; }
  .bonusBanner .bonusHalo { width: 290px; height: 290px; left: 51%; }
  .bonusBanner .bonusAmount { font-size: 108px; }
  .bonusBanner .bonusSubtitle { font-size: 23px; }
  .bonusBanner .bonusEyebrow { font-size: 9px; letter-spacing: 1px; }
  .bonusBanner .bonusOffer { padding: 22px 18px; }
  .bonusBanner .bonusOffer h3 { font-size: 40px; }
  .bonusBanner .bonusIcon { width: 18px; right: 10px; top: 12px; }
}
@media (max-width: 700px) {
  .banner.bonusBanner { grid-template-columns: 1fr; padding: 26px 22px 20px; min-height: 0; gap: 30px; }
  .bonusBanner .bonusLead { padding-top: 4px; }
  .bonusBanner .bonusAmount { font-size: 112px; margin-top: 28px; letter-spacing: -7px; }
  .bonusBanner .bonusSubtitle { font-size: 24px; }
  .bonusBanner .bonusAccent { margin-top: 24px; }
  .bonusBanner .bonusPortrait { height: 345px; left: auto; right: -22px; top: 20px; bottom: auto; transform: rotate(-4deg); opacity: .95; }
  .bonusBanner .bonusHalo { width: 280px; height: 280px; left: auto; right: -80px; top: 35px; transform: none; }
  .bonusBanner .bonusOffers { grid-column: 1; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bonusBanner .bonusOffer { padding: 21px 16px 16px; background-color: #172137eb; }
  .bonusBanner .bonusOffer h3 { font-size: 38px; }
  .bonusBanner .bonusOffer p { font-size: 12px; }
}
@media (max-width: 420px) {
  .banner.bonusBanner { padding: 22px 16px 16px; gap: 28px; }
  .bonusBanner .bonusEyebrow { font-size: 8px; letter-spacing: .8px; }
  .bonusBanner .bonusAmount { font-size: 88px; margin-top: 34px; letter-spacing: -6px; }
  .bonusBanner .bonusAmount span { letter-spacing: -2px; }
  .bonusBanner .bonusSubtitle { font-size: 20px; }
  .bonusBanner .bonusPortrait { height: 277px; right: -66px; top: 52px; }
  .bonusBanner .bonusHalo { width: 230px; height: 230px; right: -106px; top: 65px; }
  .bonusBanner .bonusAccent { font-size: 8px; letter-spacing: 2px; margin-top: 25px; }
  .bonusBanner .bonusOffer { padding: 23px 12px 14px; border-radius: 13px; }
  .bonusBanner .bonusOffer h3 { font-size: 33px; white-space: nowrap; }
  .bonusBanner .bonusOffer p { font-size: 11px; line-height: 1.4; }
  .bonusBanner .bonusIcon { width: 15px; height: 15px; top: 9px; right: 9px; }
}