/* Burstlikes v4: animated hero scene, scrollable tab rows, delivery fan, reviews. Loaded last. */

/* ===== animated hero scene (own concept: phone with live reactions) ===== */
.sx-scene { position: relative; height: 560px; overflow: hidden; }
.sx-scene > * { position: absolute; }
.sx-scene__burst { left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; animation: sxSpin 70s linear infinite; }
.sx-phone { left: 50%; bottom: 36px; width: 252px; height: 468px; margin-left: -126px; background: #fff; border: 8px solid var(--bx-ink); border-radius: 46px; padding: 10px; animation: sxFloat 5.5s ease-in-out infinite; z-index: 2; }
.sx-phone__notch { position: absolute; left: 50%; top: 10px; width: 70px; height: 14px; margin-left: -35px; background: var(--bx-ink); border-radius: 8px; z-index: 3; }
.sx-phone__screen { position: relative; height: 100%; background: var(--bx-blue); border-radius: 32px; padding: 34px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: hidden; }
.sx-phone__av { width: 64px; height: 64px; border-radius: 50%; background: var(--bx-yellow); display: grid; place-items: center; font-size: 2rem; color: var(--bx-ink); }
.sx-sk { display: block; height: 11px; border-radius: 6px; background: rgba(20, 8, 31, .85); width: 100px; }
.sx-sk--s { height: 8px; width: 70px; background: rgba(20, 8, 31, .22); }
.sx-phone__screen .sx-sk { background: #fff; }
.sx-phone__screen .sx-sk--s { background: rgba(255, 255, 255, .55); }
.sx-phone__stats { display: flex; gap: 8px; margin: 6px 0 4px; }
.sx-phone__stats b { width: 62px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; color: var(--bx-ink); animation: sxPulse 3s ease-in-out infinite; }
.sx-phone__stats .c1 { background: var(--bx-pink); }
.sx-phone__stats .c2 { background: var(--bx-lime); animation-delay: .5s; }
.sx-phone__stats .c3 { background: var(--bx-yellow); animation-delay: 1s; }
.sx-phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; flex: 1; }
.sx-phone__grid span { position: relative; background: #fff; border-radius: 12px; }
.sx-phone__grid i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; color: var(--bx-pink); transform: scale(0); animation: sxPop 5.4s ease-out infinite; animation-delay: var(--d); }
.sx-scene__mascot { left: calc(50% + 118px); bottom: 14px; width: 310px; height: 310px; z-index: 3; transform-origin: 50% 90%; animation: sxBob 2.6s ease-in-out infinite; }
.sx-notif { z-index: 3; display: flex; align-items: center; gap: 12px; width: 236px; padding: 14px 16px; background: #fff; border-radius: 22px; opacity: 0; animation: sxNotif 7.2s ease-in-out infinite; }
.sx-notif i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--bx-ink); font-size: 1.1rem; flex: 0 0 auto; }
.sx-notif span { display: grid; gap: 8px; }
.sx-notif em { font-style: normal; }
.sx-notif--1 { left: calc(50% - 450px); top: 70px; }
.sx-notif--1 i { background: var(--bx-lime); }
.sx-notif--2 { left: calc(50% - 400px); top: 168px; animation-delay: 2.4s; }
.sx-notif--2 i { background: var(--bx-pink); }
.sx-notif--3 { left: calc(50% - 460px); top: 266px; animation-delay: 4.8s; }
.sx-notif--3 i { background: var(--bx-yellow); }
.sx-float { z-index: 1; bottom: 46%; left: var(--x); font-size: var(--s); color: #fff; opacity: 0; animation: sxRise 5.2s ease-in infinite; animation-delay: var(--d); }
.sx-spark { color: var(--bx-ink); font-size: 1.7rem; animation: sxTwinkle 2.6s ease-in-out infinite; }
@keyframes sxSpin { to { transform: rotate(360deg); } }
@keyframes sxFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(-1deg); } }
@keyframes sxBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes sxPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes sxPop { 0%, 8% { transform: scale(0); } 14% { transform: scale(1.35); } 20%, 62% { transform: scale(1); } 72%, 100% { transform: scale(0); } }
@keyframes sxNotif { 0% { opacity: 0; transform: translateY(36px) scale(.96); } 8%, 30% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes sxRise { 0% { opacity: 0; transform: translateY(0) scale(.5) rotate(-10deg); } 14% { opacity: 1; } 100% { opacity: 0; transform: translateY(-300px) scale(1.15) rotate(12deg); } }
@keyframes sxTwinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .5; } 50% { transform: scale(1.25) rotate(25deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sx-scene *, .sx-scene { animation: none !important; }
  .sx-notif { opacity: 1; }
  .sx-phone__grid i { transform: scale(1); }
}
@media (max-width: 991.98px) {
  .sx-scene { height: 430px; }
  .sx-scene__burst { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .sx-phone { width: 200px; height: 372px; margin-left: -100px; bottom: 24px; border-width: 6px; border-radius: 36px; }
  .sx-phone__screen { border-radius: 26px; padding-top: 28px; }
  .sx-phone__av { width: 50px; height: 50px; font-size: 1.5rem; }
  .sx-phone__stats b { width: 50px; height: 34px; }
  .sx-scene__mascot { width: 220px; height: 220px; left: calc(50% + 70px); }
  .sx-notif { width: 190px; padding: 10px 12px; }
  .sx-notif i { width: 34px; height: 34px; }
  .sx-notif--1 { left: 10px; top: 40px; }
  .sx-notif--2 { left: 6px; top: 130px; }
  .sx-notif--3 { display: none; }
}
@media (max-width: 560px) {
  .sx-notif--2 { display: none; }
  .sx-notif--1 { left: 6px; width: 170px; }
  .sx-scene__mascot { left: calc(50% + 40px); }
}

/* ===== scrollable tab rows with arrows, drag and wheel ===== */
.sx-sc { position: relative; max-width: 100%; }
.sx-sc--seg { width: fit-content; margin: 0 auto 18px; }
.sx-sc--seg .sx-seg { margin: 0; }
.sx-sc .sx-seg, .sx-sc .sx-panel__tabs { overflow-x: auto; scroll-behavior: smooth; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; }
.sx-sc .sx-seg { padding-right: 56px; }
.sx-sc .sx-panel__tabs { padding-right: 60px; }
.sx-sc .sx-seg:active, .sx-sc .sx-panel__tabs:active { cursor: grabbing; }
.sx-sc__b { position: absolute; top: 50%; z-index: 4; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 12px; background: var(--bx-ink); color: #fff; display: none; place-items: center; cursor: pointer; font-size: .95rem; }
.sx-sc__b--l { left: 8px; }
.sx-sc__b--r { right: 8px; }
.sx-sc.can-l .sx-sc__b--l, .sx-sc.can-r .sx-sc__b--r { display: grid; }
.sx-sc__b:hover { background: #2b1a3f; }
.sx-sc.can-l .sx-seg, .sx-sc.can-l .sx-panel__tabs { padding-left: 56px; }
@media (max-width: 640px) { .sx-sc__b { width: 34px; height: 34px; margin-top: -17px; } }

/* ===== delivery: logo fans out to the three steps ===== */
.sx-deliver { padding-top: 0; }
.sx-deliver__fx { position: relative; height: 240px; }
.sx-deliver__fx svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sx-deliver__fx img { position: absolute; left: 50%; top: 0; width: 84px; height: 84px; margin-left: -42px; background: #fff; border-radius: 26px; padding: 12px; box-shadow: 0 10px 30px rgba(255, 90, 0, .25); z-index: 2; }
.sx-deliver__top { display: none; }
.sx-deliver__grid { padding-top: 0; }
@media (max-width: 991.98px) {
  .sx-deliver__fx { height: 110px; }
  .sx-deliver__fx svg { display: none; }
  .sx-deliver__fx img { top: 6px; }
  .sx-deliver__grid { padding-top: 40px; }
}

/* ===== reviews (real ones only) ===== */
.sx-rv { background: #fff; border-radius: 44px; padding: 34px 26px 0; text-align: center; overflow: hidden; }
.sx-rv__hint { color: var(--bx-ink-2); font-size: 1.4rem; margin: 0 0 14px; }
.sx-rv__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1080px; margin: 0 auto 26px; }
.sx-rv__av { width: 60px; height: 60px; border: 0; border-radius: 18px; padding: 0; overflow: hidden; display: grid; place-items: center; font: 400 1.6rem/1 var(--bx-display); cursor: pointer; color: var(--bx-ink); opacity: .75; transition: transform .15s, opacity .15s; }
.sx-rv__av img { width: 100%; height: 100%; object-fit: cover; }
.sx-rv__av:hover, .sx-rv__av.is-on { opacity: 1; transform: scale(1.12); }
.sx-rv__av.is-on { outline: 3px solid var(--bx-ink); outline-offset: 2px; }
.sx-rv__av--0 { background: var(--bx-lime); }
.sx-rv__av--1 { background: var(--bx-yellow); }
.sx-rv__av--2 { background: var(--bx-pink); }
.sx-rv__av--3 { background: var(--bx-blue); color: #fff; }
.sx-rv__av--4 { background: var(--bx-orange); }
.sx-rv__card { margin: 0 -26px; background: var(--bx-ink); color: #fff; padding: 28px 30px; }
.sx-rv__card blockquote { margin: 0 auto 10px; max-width: 70ch; font: 500 1.15rem/1.55 var(--bx-body); }
.sx-rv__card figcaption { font: 800 .9rem/1 var(--bx-body); letter-spacing: .08em; text-transform: uppercase; color: var(--bx-yellow); }
.sx-rv--empty { background: var(--bx-lav); padding: 40px 26px; }
.sx-rv--empty p { margin: 0; font: 600 1.1rem/1.5 var(--bx-body); color: var(--bx-ink-2); }
.sx-rv__more { display: flex; justify-content: center; margin-top: 26px; }
.bx-btn--out { background: #fff !important; color: var(--bx-ink) !important; box-shadow: inset 0 0 0 2px var(--bx-lav-d) !important; }
.bx-btn--out:hover { background: var(--bx-lav) !important; }