/* Burstlikes v5: compact hero. Title max two lines on desktop, wide and flat scene. */
html body .sx-hero h1 { font-size: clamp(2rem, 3.9vw, 3.7rem) !important; line-height: 1.04; max-width: 1080px; text-wrap: balance; }
.sx-hero__txt { padding: 40px 0 6px; }
.sx-lead { margin-bottom: 22px; font-size: 1.15rem; }
html body .sx-hero h1 { margin-bottom: 14px; }

/* wide, flat scene: the phone rises from the bottom edge and is cut off */
.sx-scene { height: 350px; }
.sx-scene__burst { width: 620px; height: 620px; margin: -270px 0 0 -310px; }
.sx-phone { bottom: -150px; height: 440px; width: 240px; margin-left: -120px; }
.sx-scene__mascot { left: calc(50% + 140px); bottom: 0; width: 250px; height: 250px; }
.sx-notif { width: 230px; padding: 12px 14px; }
.sx-notif--1 { left: calc(50% - 560px); top: 36px; }
.sx-notif--2 { left: calc(50% - 440px); top: 130px; }
.sx-notif--3 { left: calc(50% - 330px); top: 224px; }
.sx-notif--4 { left: calc(50% + 400px); top: 56px; animation-delay: 1.2s; }
.sx-notif--4 i { background: var(--bx-blue); color: #fff; }
.sx-notif--5 { left: calc(50% + 330px); top: 170px; animation-delay: 3.6s; }
.sx-notif--5 i { background: var(--bx-orange); }
.sx-float { bottom: 40%; }
@keyframes sxRise { 0% { opacity: 0; transform: translateY(0) scale(.5) rotate(-10deg); } 14% { opacity: 1; } 100% { opacity: 0; transform: translateY(-200px) scale(1.15) rotate(12deg); } }
.sx-sk { width: 90px; }
.sx-box { bottom: 16px; padding: 12px 16px; }

@media (max-width: 1280px) {
  .sx-notif--1 { left: 2%; } .sx-notif--2 { left: 9%; } .sx-notif--3 { left: 16%; }
  .sx-notif--4 { left: auto; right: 2%; } .sx-notif--5 { left: auto; right: 9%; }
}
@media (max-width: 991.98px) {
  html body .sx-hero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem) !important; }
  .sx-scene { height: 300px; }
  .sx-scene__burst { width: 440px; height: 440px; margin: -190px 0 0 -220px; }
  .sx-phone { width: 190px; height: 330px; margin-left: -95px; bottom: -110px; }
  .sx-scene__mascot { width: 190px; height: 190px; left: calc(50% + 80px); }
  .sx-notif { width: 190px; }
  .sx-notif--1 { left: 12px; top: 30px; } .sx-notif--2 { left: 6px; top: 116px; display: flex; }
  .sx-notif--3, .sx-notif--4, .sx-notif--5 { display: none; }
}
@media (max-width: 560px) {
  html body .sx-hero h1 { font-size: clamp(1.6rem, 7.4vw, 2rem) !important; line-height: 1.06; }
  .sx-scene { height: 250px; }
  .sx-phone { width: 160px; height: 290px; margin-left: -80px; bottom: -100px; }
  .sx-scene__mascot { width: 150px; height: 150px; left: calc(50% + 46px); }
  .sx-notif--2 { display: none; } .sx-notif--1 { top: 24px; left: 6px; width: 156px; }
}
.sx-scene__burst { width: 430px; height: 430px; top: 64%; margin: -215px 0 0 -215px; }
@media (max-width: 991.98px) { .sx-scene__burst { width: 340px; height: 340px; top: 62%; margin: -170px 0 0 -170px; } }
.sx-trust { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.sx-trust li { display: inline-flex; align-items: center; gap: 8px; font: 800 .86rem/1 var(--bx-body); color: var(--bx-ink); letter-spacing: .01em; }
.sx-trust i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: .8rem; }
.sx-scene { height: 330px; }

/* ===== dropdowns: icon tiles, two columns, start price ===== */
.bx-dd__menu { min-width: 440px; padding: 14px; margin-top: 12px; border-radius: 28px; box-shadow: 0 30px 80px rgba(20, 8, 31, .25); }
.bx-dd:hover > .bx-dd__menu, .bx-dd.is-open > .bx-dd__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bx-dd__menu a { justify-content: flex-start; gap: 12px; padding: 10px 12px; border-radius: 18px; }
.bx-dd__menu a span { display: grid; gap: 3px; min-width: 0; }
.bx-dd__menu a b { font: 800 .9rem/1.15 var(--bx-body); color: var(--bx-ink); white-space: normal; }
.bx-dd__menu a small { background: transparent; padding: 0; font: 700 .76rem/1 var(--bx-body); color: var(--bx-ink-2); }
.bx-dd__ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; font-size: 1.05rem; color: var(--bx-ink); background: var(--bx-lime); transition: transform .15s; }
.bx-dd__menu a:nth-child(4n+2) .bx-dd__ic { background: var(--bx-yellow); }
.bx-dd__menu a:nth-child(4n+3) .bx-dd__ic { background: var(--bx-pink); }
.bx-dd__menu a:nth-child(4n) .bx-dd__ic { background: var(--bx-blue); color: #fff; }
.bx-dd__menu a:hover { background: var(--bx-lav); }
.bx-dd__menu a:hover .bx-dd__ic { transform: scale(1.08) rotate(-4deg); }
.bx-dd__menu--grid { min-width: 460px; }
.bx-dd__menu--grid a b, .bx-dd__menu--grid a span { font: 800 .9rem/1.1 var(--bx-body); }
.bx-dd__menu--grid img { width: 30px; height: 30px; padding: 5px; background: var(--bx-lav); border-radius: 10px; box-sizing: border-box; }
.bx-head__nav .bx-dd:nth-child(2) .bx-dd__menu { left: 0; }
.bx-dd__menu a span { justify-items: start; text-align: left; }

/* ===== dropdown like the reference: narrow single column, soft rows, outline icons ===== */
.bx-dd__menu { min-width: 250px; padding: 10px; border-radius: 26px; margin-top: 12px; }
.bx-dd:hover > .bx-dd__menu, .bx-dd.is-open > .bx-dd__menu { display: grid; grid-template-columns: 1fr; gap: 6px; }
.bx-dd__menu a { background: var(--bx-lav); border-radius: 16px; padding: 13px 14px; gap: 12px; align-items: center; }
.bx-dd__menu a span { font: 800 .8rem/1.1 var(--bx-body); letter-spacing: .02em; text-transform: uppercase; color: var(--bx-ink); white-space: nowrap; }
.bx-dd__ic { width: auto !important; height: auto !important; background: transparent !important; color: var(--bx-ink) !important; font-size: 1.15rem; border-radius: 0; }
.bx-dd__menu a:hover { background: var(--bx-lav-d); }
.bx-dd__menu a:hover .bx-dd__ic { transform: none; }
.bx-dd__menu--grid { min-width: 400px; }
.bx-dd:hover > .bx-dd__menu--grid, .bx-dd.is-open > .bx-dd__menu--grid { grid-template-columns: 1fr 1fr; }
.bx-dd__menu--grid a span { text-transform: none; font-size: .88rem; letter-spacing: 0; }
.bx-dd__menu--grid img { background: transparent; padding: 0; width: 22px; height: 22px; }
