/* One real front card + two decorative gradient "echo" cards peeking out
   behind it — matches the original BizApp247 hero mockup exactly (the echoes
   never show real content, just a hint of color, like in the source design).
   The front card's CONTENT is swapped by JS on advance; the DOM node itself
   never moves or gets replaced, which sidesteps all the z-index/focus issues
   a multi-card stack ran into earlier.

   Same two-tier approach as before: structural/defensive rules are
   !important (theme-proofing), anything the Style panel controls is left
   override-able. */

.bzp-stack-wrap {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 40px 0 !important;
  box-sizing: border-box !important;
}

.bzp-stack {
  position: relative !important;
  width: 420px;
  max-width: 100%;
  perspective: 1400px !important;
}

.bzp-stack__echo {
  position: absolute !important;
  left: 40px !important;
  top: 26px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #0B1528 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4) !important;
  transform: rotate(2.5deg) !important;
  opacity: .68 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 18px;
  overflow: hidden !important;
}
.bzp-stack__echo--2 {
  left: 72px !important;
  top: 50px !important;
  transform: rotate(5.5deg) !important;
  opacity: .42 !important;
  z-index: 0 !important;
}
.bzp-stack__echo-top {
  height: 84px !important;
  border-radius: 18px 18px 0 0;
}

.bzp-card {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 5 !important;
  overflow: hidden !important;
  text-align: left !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transition: transform .5s cubic-bezier(.45, 0, .25, 1) !important;
}
.bzp-card.bzp-card--flipping {
  transform: rotateY(90deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .bzp-card {
    transition: opacity .2s ease !important;
  }
  .bzp-card.bzp-card--flipping {
    transform: none !important;
    opacity: 0 !important;
  }
}
.bzp-card:focus-visible {
  outline: 2px solid #39ACE3 !important;
  outline-offset: 4px !important;
}
.bzp-card * {
  box-sizing: border-box !important;
}
/* card_bg_color / card_border_radius / card_shadow are exposed Style
   controls, so their shipped defaults stay !important-free — just scoped
   through .bzp-stack for priority over generic theme rules. */
.bzp-stack .bzp-card {
  background: #0B1528;
  border-radius: 18px;
  box-shadow: 0 14px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

.bzp-card__header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 22px !important;
  margin: 0 !important;
}

.bzp-card__icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  flex-shrink: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
.bzp-card__icon svg,
.bzp-card__icon i {
  width: 1em !important;
  height: 1em !important;
  font-size: 1em !important;
  fill: currentColor;
}

.bzp-card__heading {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.bzp-card__title,
.bzp-card__subtitle {
  display: block !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.bzp-stack .bzp-card__title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 3px;
}
.bzp-stack .bzp-card__subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255, 255, 255, .72);
  margin: 0;
}

.bzp-card__badge {
  display: inline-block !important;
  flex-shrink: 0 !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, .2) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.bzp-card__body {
  padding: 18px 22px !important;
}

.bzp-card__desc {
  display: block !important;
  margin: 0 0 14px !important;
  white-space: normal !important;
}
.bzp-stack .bzp-card__desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, .5);
}

.bzp-card__bullets {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}
.bzp-stack .bzp-card__bullets {
  gap: 7px;
}

.bzp-card__bullet {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.bzp-card__bullet-dot {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bzp-stack .bzp-card__bullet-dot {
  background: rgba(0, 51, 153, .25);
  color: #39ACE3;
}
.bzp-card__bullet-dot svg {
  width: 8px !important;
  height: 8px !important;
}

.bzp-card__bullet-text {
  display: block !important;
  margin: 0 !important;
  white-space: normal !important;
}
.bzp-stack .bzp-card__bullet-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, .5);
}

@media (max-width: 767px) {
  .bzp-stack {
    width: 300px;
  }
  .bzp-card__header {
    padding: 16px 18px !important;
    gap: 10px !important;
  }
  .bzp-card__body {
    padding: 14px 18px !important;
  }
  .bzp-stack .bzp-card__title {
    font-size: 15px;
  }
  .bzp-stack .bzp-card__subtitle {
    font-size: 11px;
  }
}