.emoney-product-scene,
.nexbudget-product-scene {
  position: relative;
  min-height: 455px;
  align-self: stretch;
  isolation: isolate;
  background: none !important;
}

.emoney-app-phone,
.budget-app-phone {
  position: absolute;
  z-index: 2;
  right: 7%;
  top: 13px;
  width: 225px;
  height: 425px;
  overflow: hidden;
  padding: 27px 14px 16px;
  border: 9px solid #071729;
  border-radius: 40px;
  background: #f8fbfa;
  box-shadow: 0 34px 54px rgba(4, 64, 133, .26);
  transform: rotate(2deg);
}

.emoney-app-phone::before,
.budget-app-phone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 67px;
  height: 15px;
  border-radius: 0 0 11px 11px;
  background: #071729;
  transform: translateX(-50%);
}

.scene-phone-top,
.budget-phone-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.scene-phone-top img,
.budget-phone-top img {
  width: 27px;
  height: 27px;
  border-radius: 8px;
}

.scene-phone-top b {
  font-size: 10px;
}

.scene-phone-top > span,
.budget-phone-top > i {
  margin-left: auto;
  font-size: 10px;
  font-style: normal;
}

.scene-balance {
  display: flex;
  flex-direction: column;
  height: 158px;
  margin-top: 18px;
  padding: 17px;
  border-radius: 22px;
  color: #fff;
  background: radial-gradient(circle at 94% 3%, rgba(255, 214, 48, .55), transparent 34%), linear-gradient(145deg, #0784eb, #0646a6);
  box-shadow: 0 18px 28px rgba(7, 92, 190, .22);
}

.scene-balance small,
.scene-balance span,
.scene-balance em {
  font-size: 7px;
  font-style: normal;
}

.scene-balance span {
  margin-top: 27px;
  opacity: .8;
}

.scene-balance strong {
  font-size: 21px;
}

.scene-balance em {
  margin-top: auto;
  font-weight: 800;
}

.scene-transaction {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  padding: 11px 0;
  border-bottom: 1px solid #dfe9e6;
}

.scene-transaction > i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: #db4d4d;
  background: #ffe8e8;
  font-size: 11px;
  font-style: normal;
}

.scene-transaction > span {
  flex: 1;
}

.scene-transaction b,
.scene-transaction small {
  display: block;
  font-size: 7px;
}

.scene-transaction small {
  margin-top: 3px;
  color: #87948f;
}

.scene-transaction > strong {
  color: #d94a4a;
  font-size: 7px;
}

.scene-phone-nav,
.budget-phone-nav {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 15px;
  display: flex;
  justify-content: space-around;
  color: #0b765f;
}

.emoney-tap-card {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 126px;
  width: 255px;
  height: 150px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: 25px;
  color: #fff;
  background: radial-gradient(circle at 90% 8%, rgba(255, 216, 55, .82), transparent 30%), linear-gradient(145deg, #0788ec, #0646b0);
  box-shadow: 0 28px 42px rgba(3, 72, 160, .25);
  transform: rotate(-8deg);
}

.emoney-tap-card::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 17px;
}

.emoney-tap-card small {
  font-size: 8px;
  font-weight: 800;
}

.emoney-tap-card b {
  margin-top: 7px;
  font-size: 23px;
}

.emoney-tap-card span {
  margin-top: auto;
  font-size: 9px;
  font-weight: 800;
}

.emoney-tap-card i {
  position: absolute;
  right: 20px;
  bottom: 17px;
  font-size: 25px;
  font-style: normal;
  font-weight: 800;
  transform: rotate(90deg);
}

.emoney-scene-mascot {
  position: absolute;
  z-index: 6;
  left: 72px;
  bottom: 0;
  width: 182px;
  filter: drop-shadow(0 22px 23px rgba(20, 54, 111, .2));
}

.emoney-tap-status,
.budget-family-pill,
.budget-insight-pill {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 15px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 35px rgba(9, 80, 145, .13);
  backdrop-filter: blur(13px);
}

.emoney-tap-status {
  left: 5px;
  top: 30px;
}

.emoney-tap-status > i,
.budget-insight-pill > i {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #0bd0dc, #2269ee);
  font-style: normal;
}

.emoney-tap-status b,
.emoney-tap-status small,
.budget-family-pill b,
.budget-family-pill small,
.budget-insight-pill b,
.budget-insight-pill small {
  display: block;
  font-size: 8px;
}

.emoney-tap-status small,
.budget-family-pill small,
.budget-insight-pill small {
  margin-top: 2px;
  color: #6d7f8b;
}

.budget-app-phone {
  right: 10%;
  width: 240px;
  height: 430px;
  color: #102b27;
  border-color: #062b24;
  background: linear-gradient(#0aa77b 0 37%, #f8fbf9 37%);
  box-shadow: 0 34px 54px rgba(5, 83, 64, .24);
  transform: rotate(1.5deg);
}

.budget-app-phone::before {
  background: #062b24;
}

.budget-phone-top {
  color: #fff;
}

.budget-phone-top span {
  flex: 1;
}

.budget-phone-top b,
.budget-phone-top small {
  display: block;
  font-size: 8px;
}

.budget-phone-top small {
  opacity: .72;
}

.budget-balance {
  margin-top: 19px;
  padding: 18px;
  border-radius: 21px;
  color: #fff;
  background: radial-gradient(circle at 85% 5%, rgba(155, 244, 90, .24), transparent 28%), linear-gradient(145deg, #08775f, #06453a);
  box-shadow: 0 17px 28px rgba(3, 57, 47, .25);
}

.budget-balance > small {
  font-size: 7px;
  opacity: .8;
}

.budget-balance > strong {
  display: block;
  margin: 5px 0 16px;
  font-size: 19px;
}

.budget-balance > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.budget-balance div span {
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
}

.budget-balance span small,
.budget-balance span b {
  display: block;
  font-size: 6px;
}

.budget-balance span b {
  margin-top: 3px;
  font-size: 8px;
}

.budget-month {
  display: flex;
  justify-content: space-between;
  margin: 23px 4px 10px;
  font-size: 9px;
}

.budget-bars {
  height: 76px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(7,62,53,.07);
}

.budget-bars i {
  flex: 1;
  height: 45%;
  border-radius: 8px 8px 3px 3px;
  background: #a9ead7;
}

.budget-bars i:nth-child(2) { height: 72%; }
.budget-bars i:nth-child(3) { height: 48%; background: #6d72f5; }
.budget-bars i:nth-child(4) { height: 88%; background: #13b985; }
.budget-bars i:nth-child(5) { height: 62%; }

.budget-phone-nav b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -8px;
  border-radius: 50%;
  color: #fff;
  background: #0bad7d;
  box-shadow: 0 7px 16px rgba(11,174,125,.3);
}

.budget-family-pill {
  left: 0;
  top: 78px;
  box-shadow: 0 18px 35px rgba(5, 83, 64, .14);
}

.budget-family-pill > span {
  display: flex;
}

.budget-family-pill > span i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #0aaa7c;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.budget-family-pill > span i:first-child {
  margin-left: 0;
  background: #515eea;
}

.budget-family-pill > span i:last-child {
  background: #ff8a5d;
}

.budget-insight-pill {
  left: 13px;
  bottom: 56px;
  box-shadow: 0 18px 35px rgba(5, 83, 64, .14);
}

.budget-insight-pill > i {
  background: linear-gradient(135deg, #0cb783, #7a64f6);
}

@media (max-width: 820px) {
  .emoney-product-scene,
  .nexbudget-product-scene {
    width: min(570px, 100%);
    min-height: 455px;
    margin: 28px auto 0;
  }
}

@media (max-width: 560px) {
  .emoney-product-scene,
  .nexbudget-product-scene {
    min-height: 405px;
  }

  .emoney-app-phone {
    right: 0;
    width: 190px;
    height: 365px;
    border-width: 7px;
    border-radius: 34px;
  }

  .emoney-tap-card {
    left: -5px;
    top: 122px;
    width: 205px;
    height: 125px;
    padding: 17px;
  }

  .emoney-tap-card b { font-size: 19px; }
  .emoney-scene-mascot { left: 41px; width: 146px; }
  .emoney-tap-status { left: 0; top: 21px; padding: 9px; }
  .budget-app-phone {
    right: 4%;
    width: 205px;
    height: 385px;
    border-width: 7px;
    border-radius: 34px;
  }

  .budget-family-pill { left: 0; top: 66px; padding: 10px; }
  .budget-insight-pill { left: 0; bottom: 35px; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .emoney-app-phone,
  .budget-app-phone,
  .emoney-tap-card {
    transform: none;
  }
}