/* iPhone lock-screen demo — scoped to #livedemo */

#livedemo .livedemo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 650px;
  margin: 0 auto;
  overflow: visible;
}

#livedemo .iphone {
  flex-shrink: 0;
  width: 300px;
  padding: 10px;
  border: 3px solid var(--ink);
  border-radius: 54px;
  background: #05040a;
  box-shadow: 9px 9px 0 var(--ink);
  transform: rotate(-2.2deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#livedemo .livedemo-stage:hover .iphone {
  transform: rotate(0deg) translate(-3px, -3px);
  box-shadow: 13px 13px 0 var(--ink);
}

#livedemo .iphone-14 {
  --unlock: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 600px;
  border: 0;
  border-radius: 44px;
  background: #3a86c8;
  color: #fff;
  isolation: isolate;
  user-select: none;
  touch-action: none;
}

#livedemo .iphone-sky {
  position: absolute;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  z-index: 0;
  display: block;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  object-fit: cover;
  object-position: center center;
  /* A imagem tem uma moldura fina nas próprias bordas; o scale corta ela. */
  transform: scale(1.14);
  pointer-events: none;
}

#livedemo .iphone-14::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 62%;
  background: url("/images/zaylawalpaper.png") center bottom / 108% auto no-repeat;
  pointer-events: none;
}

#livedemo .iphone-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 12px 22px 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

#livedemo .iphone-carrier {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#livedemo .iphone-status-right {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#livedemo .iphone-status-right svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

#livedemo .iphone-battery {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 11px;
  border: 1.5px solid #fff;
  border-radius: 3px;
  background: #fff;
  color: #111;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

#livedemo .iphone-island {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 98px;
  height: 26px;
  padding: 0 8px 0 12px;
  border-radius: 20px;
  background: #000;
  color: #fff;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}

#livedemo .iphone-island-label {
  display: none;
}

#livedemo .iphone-island-cam {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a1a22;
  box-shadow: 0 0 0 1px #2a2a33, inset 1px 0 2px #3a6ea8;
}

#livedemo .iphone-date {
  margin-top: 56px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

#livedemo .iphone-clock {
  margin-top: 2px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

#livedemo .iphone-widgets {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

#livedemo .iphone-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 48%,
      rgba(255, 255, 255, 0.04) 100%
    );
  backdrop-filter: blur(8px) saturate(45%) brightness(1.06);
  -webkit-backdrop-filter: blur(8px) saturate(45%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(8, 12, 30, 0.24);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(8, 12, 30, 0.45);
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, color 0.25s ease;
}

#livedemo .iphone-widget svg {
  width: 15px;
  height: 15px;
}

#livedemo .iphone-widget.is-quiet {
  color: #b8b8c8;
}

#livedemo .iphone-widget.is-quiet svg {
  color: #ff6b6b;
}

#livedemo .iphone-widget-weather {
  gap: 4px;
  cursor: default;
}

#livedemo .iphone-notifications {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 4;
}

#livedemo .iphone-ntf {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 20px;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 48%,
      rgba(255, 255, 255, 0.04) 100%
    );
  /* saturate baixo tira o azul do céu que passa pelo vidro */
  backdrop-filter: blur(8px) saturate(45%) brightness(1.06);
  -webkit-backdrop-filter: blur(8px) saturate(45%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(8, 12, 30, 0.24);
  color: #fff;
  text-shadow: 0 1px 3px rgba(8, 12, 30, 0.45);
  animation: iphoneNtfIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#livedemo .iphone-ntf.is-out {
  animation: iphoneNtfOut 0.35s ease forwards;
}

#livedemo .iphone-ntf__icon {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
}

#livedemo .iphone-ntf__icon img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  object-position: center;
}

#livedemo .iphone-ntf__app {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#livedemo .iphone-ntf__time {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

#livedemo .iphone-ntf__body {
  grid-column: 2 / span 2;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
}

#livedemo .iphone-ntf__body b {
  color: var(--mint);
  font-weight: 800;
}

#livedemo .iphone-lock-actions {
  position: absolute;
  right: 18px;
  bottom: 28px;
  left: 18px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

#livedemo .iphone-lock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background:
    linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.12) 48%,
      rgba(255, 255, 255, 0.22) 100%
    );
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 18px rgba(8, 12, 30, 0.24);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#livedemo .iphone-lock-btn svg {
  width: 17px;
  height: 17px;
}

#livedemo .iphone-lock-btn--flash {
  pointer-events: none;
  cursor: default;
}

#livedemo .iphone-lock-btn--flash svg {
  width: 15px;
  height: 19px;
}

#livedemo .iphone-home {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 12;
  width: 170px;
  height: 34px;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  pointer-events: none;
}

#livedemo .iphone-home::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 108px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  transform: translateX(-50%);
}

#livedemo .iphone-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#livedemo .iphone-14.is-dragging .iphone-open,
#livedemo .iphone-14.is-open .iphone-open,
#livedemo .iphone-14.is-animating .iphone-open {
  visibility: visible;
  opacity: 1;
}

#livedemo .iphone-open__img {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 108%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}

#livedemo .iphone-home-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 66px 20px 28px;
  opacity: calc(var(--unlock));
  transform: scale(calc(.92 + var(--unlock) * .08));
  transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}

#livedemo .iphone-home-date {
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

#livedemo .iphone-app-grid { display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px }
#livedemo .iphone-app-icon {
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;border:0;background:none;color:#fff;font:inherit;font-size:10px;font-weight:700;
  text-shadow:0 2px 7px rgba(0,0,0,.6);cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
#livedemo .iphone-app-icon__tile {
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.8);
  transition:transform .18s ease;
}
#livedemo .iphone-app-icon:hover .iphone-app-icon__tile{transform:scale(1.07)}
#livedemo .iphone-app-icon:active .iphone-app-icon__tile{transform:scale(.9)}
#livedemo .iphone-app-icon__tile img{width:39px;height:39px;object-fit:contain}

#livedemo .iphone-dock {
  position:absolute;right:14px;bottom:12px;left:14px;height:72px;padding:10px 17px;
  display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.24);
  border-radius:24px;background:rgba(255,255,255,.2);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.35);
}
#livedemo .iphone-dock-icon{width:46px;height:46px;border-radius:13px;box-shadow:0 5px 14px rgba(0,0,0,.22)}
#livedemo .iphone-dock-icon--phone{background:linear-gradient(145deg,#72ef8d,#22a84b)}
#livedemo .iphone-dock-icon--browser{background:radial-gradient(circle at 50% 50%,#fff 0 25%,#62b9ff 27% 54%,#1874da 56%)}
#livedemo .iphone-dock-icon--message{background:linear-gradient(145deg,#74dcff,#258eea)}

#livedemo .iphone-zpay-app {
  position:absolute;inset:0;z-index:5;background:linear-gradient(160deg,#111326,#080912);
  color:#fff;opacity:0;transform:scale(.72);transform-origin:46px 112px;
  visibility:hidden;pointer-events:none;border-radius:44px;
  transition:opacity .28s ease,transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s;
}
#livedemo .iphone-open.is-app-open .iphone-zpay-app{opacity:1;transform:scale(1);visibility:visible;pointer-events:auto;transition-delay:0s}
#livedemo .iphone-zpay-head{height:62px;padding:30px 15px 8px;display:grid;grid-template-columns:30px 1fr 30px;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}
#livedemo .iphone-zpay-head button{border:0;background:none;color:#fff;font-size:30px;line-height:1;cursor:pointer}
#livedemo .iphone-zpay-head img{width:94px;max-height:28px;object-fit:contain;justify-self:center;filter:brightness(0) invert(1)}
#livedemo .iphone-zpay-content{padding:28px 18px;text-align:left}
#livedemo .iphone-zpay-content>p{margin:0;color:rgba(255,255,255,.58);font-size:12px}
#livedemo .iphone-zpay-content>strong{display:block;margin-top:5px;font-size:29px;letter-spacing:-.04em}
#livedemo .iphone-zpay-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
#livedemo .iphone-zpay-stats span{padding:12px 10px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.055)}
#livedemo .iphone-zpay-stats small,#livedemo .iphone-zpay-stats b{display:block}
#livedemo .iphone-zpay-stats small{color:rgba(255,255,255,.5);font-size:9px}
#livedemo .iphone-zpay-stats b{margin-top:5px;font-size:12px}
#livedemo .iphone-zpay-activity{margin-top:25px}
#livedemo .iphone-zpay-activity h4{margin:0 0 10px;font-size:13px}
#livedemo .iphone-zpay-activity>span{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
#livedemo .iphone-zpay-activity img{width:28px;height:28px;object-fit:contain}
#livedemo .iphone-zpay-activity b{font-size:11px}
#livedemo .iphone-zpay-activity em{color:#82e7c4;font-size:11px;font-style:normal;font-weight:800}

/* App Z.PAY — mini experiência mobile */
#livedemo .iphone-zpay-app{overflow:hidden;background:#080a10;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
#livedemo .iphone-zpay-head{height:58px;padding:27px 13px 7px;background:#0c0f17;grid-template-columns:28px 1fr 28px}
#livedemo .iphone-zpay-head>button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0}
#livedemo .iphone-zpay-head img{width:78px;max-height:24px}
#livedemo .iphone-zpay-bell svg{width:16px;height:16px}
#livedemo .iphone-zpay-page{position:absolute;top:58px;right:0;bottom:62px;left:0;overflow:auto;padding:16px 14px 18px;background:#080a10;scrollbar-width:none}
#livedemo .iphone-zpay-page::-webkit-scrollbar{display:none}
#livedemo .iphone-zpay-greeting{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;text-align:left}
#livedemo .iphone-zpay-greeting span{font-size:15px;font-weight:800}
#livedemo .iphone-zpay-greeting small{color:#7e8493;font-size:9px}
#livedemo .iphone-zpay-balance-card{position:relative;padding:16px;border:1px solid rgba(126,230,195,.18);border-radius:20px;background:linear-gradient(145deg,#172820,#0e1513);box-shadow:0 12px 30px rgba(0,0,0,.24);text-align:left}
#livedemo .iphone-zpay-balance-card>div p{margin:0;color:#9ba8a2;font-size:9px}
#livedemo .iphone-zpay-balance-card>div strong{display:block;margin-top:3px;font-size:24px;letter-spacing:-.04em}
#livedemo .iphone-zpay-balance-card>button{position:absolute;top:15px;right:14px;width:27px;height:27px;padding:5px;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#fff}
#livedemo .iphone-zpay-balance-card>button svg{width:100%;height:100%}
#livedemo .iphone-zpay-month{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
#livedemo .iphone-zpay-month small{color:#87918d;font-size:8px}
#livedemo .iphone-zpay-month b{color:#83e5c2;font-size:10px}
#livedemo .iphone-zpay-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
#livedemo .iphone-zpay-shortcuts button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;color:#e9ebef;font:inherit;font-size:9px;cursor:pointer}
#livedemo .iphone-zpay-shortcuts button>span{display:flex;align-items:center;justify-content:center;width:39px;height:39px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:#121720;color:#83e5c2}
#livedemo .iphone-zpay-shortcuts svg{width:18px;height:18px}
#livedemo .iphone-zpay-section-head{display:flex;align-items:center;justify-content:space-between;margin-top:17px}
#livedemo .iphone-zpay-section-head h4{margin:0;font-size:12px}
#livedemo .iphone-zpay-section-head button{padding:0;border:0;background:none;color:#83e5c2;font-size:8px;font-weight:700}
#livedemo .iphone-zpay-activity{margin-top:5px}
#livedemo .iphone-zpay-activity>span{grid-template-columns:31px 1fr auto;padding:8px 0}
#livedemo .iphone-zpay-activity i{display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:10px;background:#121720;color:#aeb4bf}
#livedemo .iphone-zpay-activity i img,#livedemo .iphone-zpay-activity i svg{width:19px;height:19px;object-fit:contain}
#livedemo .iphone-zpay-activity b{display:flex;flex-direction:column;gap:2px;font-size:9px;font-style:normal}
#livedemo .iphone-zpay-activity b small{color:#686e7b;font-size:7px;font-weight:500}
#livedemo .iphone-zpay-activity em{font-size:9px}
#livedemo .iphone-zpay-activity em.is-out{color:#e7e9ed}
#livedemo .iphone-zpay-nav{position:absolute;right:0;bottom:0;left:0;z-index:9;display:grid;grid-template-columns:repeat(5,1fr);height:62px;padding:7px 7px 5px;border-top:1px solid rgba(255,255,255,.08);background:rgba(10,12,18,.96);backdrop-filter:blur(16px)}
#livedemo .iphone-zpay-nav>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:0;background:none;color:#737987;font:inherit;font-size:7px;font-weight:700;cursor:pointer}
#livedemo .iphone-zpay-nav>button svg{width:17px;height:17px}
#livedemo .iphone-zpay-nav>button.is-active{color:#83e5c2}
#livedemo .iphone-zpay-nav .iphone-zpay-scan{transform:translateY(-14px);color:#fff}
#livedemo .iphone-zpay-scan>span{display:flex;align-items:center;justify-content:center;width:47px;height:47px;border:4px solid #080a10;border-radius:17px;background:linear-gradient(145deg,#8ceac8,#48b992);box-shadow:0 7px 18px rgba(70,188,147,.3)}
#livedemo .iphone-zpay-scan svg{width:22px!important;height:22px!important}
#livedemo .iphone-zpay-scan b{font-size:7px}

#livedemo .iphone-zpay-page--pay{padding:10px 14px 16px;background:#080a10}
#livedemo .iphone-zpay-pay-head{display:grid;grid-template-columns:28px 1fr 28px;align-items:center;margin-bottom:13px}
#livedemo .iphone-zpay-pay-head>button{width:28px;height:28px;padding:0;border:0;background:none;color:#fff;font-size:27px;line-height:1}
#livedemo .iphone-zpay-pay-head>strong{text-align:center;font-size:13px}
#livedemo .iphone-zpay-pay-tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:11px;background:#11151d}
#livedemo .iphone-zpay-pay-tabs button{padding:8px 5px;border:0;border-radius:9px;background:none;color:#777e8c;font:inherit;font-size:8px;font-weight:800}
#livedemo .iphone-zpay-pay-tabs button.is-active{background:#242a34;color:#fff}
#livedemo .iphone-zpay-camera{padding-top:17px;text-align:center}
#livedemo .iphone-zpay-viewfinder{position:relative;display:flex;align-items:center;justify-content:center;width:190px;height:190px;margin:0 auto;border-radius:23px;background:linear-gradient(145deg,#151a23,#0d1017);overflow:hidden}
#livedemo .iphone-zpay-viewfinder>span{position:absolute;width:35px;height:35px;border-color:#83e5c2;border-style:solid}
#livedemo .iphone-zpay-viewfinder>span:nth-child(1){top:11px;left:11px;border-width:3px 0 0 3px;border-radius:9px 0 0}
#livedemo .iphone-zpay-viewfinder>span:nth-child(2){top:11px;right:11px;border-width:3px 3px 0 0;border-radius:0 9px 0 0}
#livedemo .iphone-zpay-viewfinder>span:nth-child(3){bottom:11px;left:11px;border-width:0 0 3px 3px;border-radius:0 0 0 9px}
#livedemo .iphone-zpay-viewfinder>span:nth-child(4){right:11px;bottom:11px;border-width:0 3px 3px 0;border-radius:0 0 9px}
#livedemo .iphone-zpay-viewfinder>svg{width:83px;height:83px;color:rgba(255,255,255,.16)}
#livedemo .iphone-zpay-scan-line{position:absolute;left:19px;right:19px;top:25px;height:2px;background:#83e5c2;box-shadow:0 0 12px #83e5c2;animation:zpayScanLine 2.2s ease-in-out infinite alternate}
#livedemo .iphone-zpay-camera>p{margin:13px 0 9px;color:#9298a5;font-size:9px}
#livedemo .iphone-zpay-gallery{padding:8px 13px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#141922;color:#fff;font:inherit;font-size:8px;font-weight:700}
#livedemo .iphone-zpay-paste{padding-top:20px;text-align:left}
#livedemo .iphone-zpay-paste label{display:block;margin-bottom:7px;font-size:10px;font-weight:800}
#livedemo .iphone-zpay-paste textarea{box-sizing:border-box;width:100%;padding:11px;border:1px solid rgba(255,255,255,.12);border-radius:14px;outline:0;background:#11151d;color:#fff;font:inherit;font-size:9px;resize:none}
#livedemo .iphone-zpay-paste textarea:focus{border-color:#83e5c2;box-shadow:0 0 0 2px rgba(131,229,194,.12)}
#livedemo .iphone-zpay-paste small{display:block;margin-top:6px;color:#747a86;font-size:7px}
#livedemo .iphone-zpay-paste>button{width:100%;margin-top:15px;padding:11px;border:0;border-radius:13px;background:#83e5c2;color:#07110d;font:inherit;font-size:9px;font-weight:900}
#livedemo .iphone-zpay-toast{position:absolute;right:14px;bottom:72px;left:14px;z-index:15;padding:10px;border-radius:12px;background:#e9fff7;color:#0d251d;font-size:9px;font-weight:900;text-align:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s ease}
#livedemo .iphone-zpay-toast.is-visible{opacity:1;transform:translateY(0)}
@keyframes zpayScanLine{from{transform:translateY(0)}to{transform:translateY(137px)}}

/* Paleta oficial da landing Z.PAY */
#livedemo .iphone-zpay-app{--zp-ink:#2a2941;--zp-soft:#5c5a7a;--zp-mint:#32edbb;--zp-mint-dark:#0f9f7a;--zp-paper:#f0edff;--zp-lav:#a694fe;--zp-amber:#fec34e;background:var(--zp-paper);color:var(--zp-ink)}
#livedemo .iphone-zpay-head{z-index:12;height:20px;padding:2px 13px;background:rgba(117,119,127,.28);border-bottom:1px solid rgba(42,41,65,.25);color:var(--zp-ink);box-shadow:0 3px 10px rgba(42,41,65,.12);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%)}
#livedemo .iphone-zpay-head>button{width:16px;height:16px}
#livedemo .iphone-zpay-head img{width:54px;max-height:16px}
#livedemo .iphone-zpay-head>button{color:var(--zp-ink)}
#livedemo .iphone-zpay-head>button:first-child{visibility:hidden;pointer-events:none}
#livedemo .iphone-14:has(.iphone-open.is-app-open) .iphone-status{top:0;z-index:14;height:20px;padding:1px 37px 0;color:#fff;text-shadow:0 1px 3px rgba(42,41,65,.5)}
#livedemo .iphone-14:has(.iphone-open.is-app-open) .iphone-carrier{font-size:7px;line-height:1}
#livedemo .iphone-14:has(.iphone-open.is-app-open) .iphone-status-right{gap:3px;font-size:7px;line-height:1}
#livedemo .iphone-14:has(.iphone-open.is-app-open) .iphone-status-right svg{width:9px;height:8px}
#livedemo .iphone-14:has(.iphone-open.is-app-open) .iphone-battery{width:16px;height:8px;border-color:#fff;background:#fff;color:#2a2941;font-size:5px;text-shadow:none}
#livedemo .iphone-zpay-page,#livedemo .iphone-zpay-page--pay{top:20px;bottom:76px;background:var(--zp-paper);color:var(--zp-ink)}
#livedemo .iphone-zpay-greeting small,#livedemo .iphone-zpay-month small,#livedemo .iphone-zpay-camera>p,#livedemo .iphone-zpay-paste small{color:var(--zp-soft)}
#livedemo .iphone-zpay-balance-card{border:2px solid var(--zp-ink);background:linear-gradient(135deg,var(--zp-lav),#c8bdff);box-shadow:4px 4px 0 var(--zp-ink);color:var(--zp-ink)}
#livedemo .iphone-zpay-balance-card>div p,#livedemo .iphone-zpay-month small{color:var(--zp-ink)}
#livedemo .iphone-zpay-balance-card>button{background:#fff;color:var(--zp-ink)}
#livedemo .iphone-zpay-month{border-color:rgba(42,41,65,.25)}
#livedemo .iphone-zpay-month b,#livedemo .iphone-zpay-section-head button,#livedemo .iphone-zpay-activity em{color:var(--zp-mint-dark)}
#livedemo .iphone-zpay-shortcuts button{color:var(--zp-ink)}
#livedemo .iphone-zpay-shortcuts button>span{border:2px solid var(--zp-ink);background:#fff;color:var(--zp-ink);box-shadow:2px 2px 0 var(--zp-ink)}
#livedemo .iphone-zpay-shortcuts button:nth-child(1)>span{background:var(--zp-mint)}
#livedemo .iphone-zpay-shortcuts button:nth-child(2)>span{background:var(--zp-amber)}
#livedemo .iphone-zpay-shortcuts button:nth-child(3)>span{background:var(--zp-lav)}
#livedemo .iphone-zpay-activity>span{border-color:rgba(42,41,65,.14)}
#livedemo .iphone-zpay-activity i{background:#fff;border:1px solid rgba(42,41,65,.15);color:var(--zp-ink)}
#livedemo .iphone-zpay-activity b small{color:var(--zp-soft)}
#livedemo .iphone-zpay-activity em.is-out{color:var(--zp-ink)}
#livedemo .iphone-zpay-nav{bottom:20px;height:56px;padding:5px 7px 4px;border-color:rgba(42,41,65,.2);background:rgba(240,237,255,.9);box-shadow:0 -3px 10px rgba(42,41,65,.1);-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);touch-action:none}
#livedemo .iphone-zpay-nav>button{gap:2px;font-size:7px;transform:translateY(-2px)}
#livedemo .iphone-zpay-nav>button svg{width:17px;height:17px}
#livedemo .iphone-zpay-nav>button{color:var(--zp-soft)}
#livedemo .iphone-zpay-nav>button.is-active{color:var(--zp-mint-dark)}
#livedemo .iphone-zpay-nav .iphone-zpay-scan{color:var(--zp-ink);transform:translateY(-13px)}
#livedemo .iphone-zpay-scan>span{border-color:#fff;background:var(--zp-mint);box-shadow:0 0 0 2px var(--zp-ink),3px 5px 0 var(--zp-ink)}
#livedemo .iphone-zpay-pay-head>button{color:var(--zp-ink)}
#livedemo .iphone-zpay-pay-tabs{background:#ded8f7;border:1px solid rgba(42,41,65,.2)}
#livedemo .iphone-zpay-pay-tabs button{color:var(--zp-soft)}
#livedemo .iphone-zpay-pay-tabs button.is-active{background:#fff;color:var(--zp-ink);box-shadow:1px 2px 0 var(--zp-ink)}
#livedemo .iphone-zpay-viewfinder{border:2px solid var(--zp-ink);background:#fff;box-shadow:4px 4px 0 var(--zp-lav)}
#livedemo .iphone-zpay-viewfinder>span{border-color:var(--zp-mint-dark)}
#livedemo .iphone-zpay-viewfinder>svg{color:rgba(42,41,65,.2)}
#livedemo .iphone-zpay-scan-line{background:var(--zp-mint);box-shadow:0 0 12px var(--zp-mint)}
#livedemo .iphone-zpay-gallery{border:2px solid var(--zp-ink);background:#fff;color:var(--zp-ink);box-shadow:2px 2px 0 var(--zp-ink)}
#livedemo .iphone-zpay-paste textarea{border:2px solid var(--zp-ink);background:#fff;color:var(--zp-ink)}
#livedemo .iphone-zpay-paste textarea:focus{border-color:var(--zp-mint-dark);box-shadow:3px 3px 0 var(--zp-mint)}
#livedemo .iphone-zpay-paste>button{border:2px solid var(--zp-ink);background:var(--zp-mint);color:var(--zp-ink);box-shadow:3px 3px 0 var(--zp-ink)}
#livedemo .iphone-zpay-toast{border:2px solid var(--zp-ink);background:var(--zp-mint);color:var(--zp-ink);box-shadow:3px 3px 0 var(--zp-ink)}

#livedemo .iphone-zpay-page--section{padding-top:13px}
#livedemo .iphone-zpay-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;text-align:left}
#livedemo .iphone-zpay-title small{color:var(--zp-soft);font-size:8px}
#livedemo .iphone-zpay-title h3{margin:0;font-size:20px;line-height:1.05}
#livedemo .iphone-zpay-title>button{display:grid;place-items:center;width:32px;height:32px;padding:7px;border:2px solid var(--zp-ink);border-radius:11px;background:var(--zp-amber);color:var(--zp-ink);font-size:18px;font-weight:900;box-shadow:2px 2px 0 var(--zp-ink)}
#livedemo .iphone-zpay-title svg{width:100%;height:100%}
#livedemo .iphone-zpay-period{display:flex;gap:5px;margin-bottom:11px}
#livedemo .iphone-zpay-period button{flex:1;padding:7px;border:1px solid rgba(42,41,65,.2);border-radius:9px;background:#fff;color:var(--zp-soft);font-size:8px;font-weight:800}
#livedemo .iphone-zpay-period button.is-active{border:2px solid var(--zp-ink);background:var(--zp-mint);color:var(--zp-ink)}
#livedemo .iphone-zpay-summary{padding:13px;border:2px solid var(--zp-ink);border-radius:17px;background:#fff;box-shadow:3px 3px 0 var(--zp-lav);text-align:left}
#livedemo .iphone-zpay-summary>small{color:var(--zp-soft);font-size:8px}
#livedemo .iphone-zpay-summary>strong{display:block;margin:2px 0 11px;font-size:20px}
#livedemo .iphone-zpay-summary>span{display:grid;grid-template-columns:1fr 1fr;padding-top:9px;border-top:1px solid rgba(42,41,65,.15)}
#livedemo .iphone-zpay-summary b{font-size:8px}.iphone-zpay-summary em{color:var(--zp-mint-dark);font-size:10px;font-style:normal}
#livedemo .iphone-zpay-activity--card{padding:0 9px;border:2px solid var(--zp-ink);border-radius:15px;background:#fff;box-shadow:3px 3px 0 var(--zp-ink)}
#livedemo .iphone-zpay-wallet-card{display:flex;flex-direction:column;height:135px;padding:15px;border:2px solid var(--zp-ink);border-radius:19px;background:linear-gradient(135deg,var(--zp-lav),var(--zp-amber));box-shadow:5px 5px 0 var(--zp-ink);text-align:left}
#livedemo .iphone-zpay-wallet-card>span{font-size:14px;font-weight:900}
#livedemo .iphone-zpay-wallet-card>small{margin-top:4px;font-size:8px}
#livedemo .iphone-zpay-wallet-card>strong{margin:auto 0 10px;font-size:13px;letter-spacing:.08em}
#livedemo .iphone-zpay-wallet-card-meta{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:0;background:none;color:var(--zp-ink);font-size:8px;line-height:1}
#livedemo .iphone-zpay-wallet-card-meta b{display:block;margin:0;padding:0;white-space:nowrap;font-size:8px;line-height:1}
#livedemo .iphone-zpay-gateway-balance{padding:15px;border:2px solid var(--zp-ink);border-radius:19px;background:linear-gradient(135deg,var(--zp-lav),#c8bdff);box-shadow:4px 4px 0 var(--zp-ink);text-align:left}
#livedemo .iphone-zpay-gateway-balance>small{font-size:8px}
#livedemo .iphone-zpay-gateway-balance>strong{display:block;margin:2px 0 11px;font-size:23px}
#livedemo .iphone-zpay-gateway-balance>span{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:9px;border-top:1px solid rgba(42,41,65,.2)}
#livedemo .iphone-zpay-gateway-balance>span b{display:flex;flex-direction:column;gap:2px;font-size:7px}
#livedemo .iphone-zpay-gateway-balance em{font-size:9px;font-style:normal}
#livedemo .iphone-zpay-gateway-balance>button{width:100%;margin-top:11px;padding:8px;border:2px solid var(--zp-ink);border-radius:10px;background:var(--zp-mint);color:var(--zp-ink);font-size:8px;font-weight:900;box-shadow:2px 2px 0 var(--zp-ink)}
#livedemo .iphone-zpay-currencies{padding:0 9px;border:2px solid var(--zp-ink);border-radius:15px;background:#fff;box-shadow:3px 3px 0 var(--zp-ink)}
#livedemo .iphone-zpay-currencies>span{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid rgba(42,41,65,.13)}
#livedemo .iphone-zpay-currencies>span:last-child{border-bottom:0}
#livedemo .iphone-zpay-currencies i{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--zp-paper);color:var(--zp-ink);font-size:9px;font-style:normal;font-weight:900}
#livedemo .iphone-zpay-currencies b{display:flex;flex-direction:column;font-size:8px}
#livedemo .iphone-zpay-currencies small{color:var(--zp-soft);font-size:7px}
#livedemo .iphone-zpay-currencies strong{font-size:8px}
#livedemo .iphone-zpay-wallet-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:13px;padding:3px;border:1px solid rgba(42,41,65,.2);border-radius:11px;background:#ded8f7}
#livedemo .iphone-zpay-wallet-tabs button{padding:7px;border:0;border-radius:8px;background:none;color:var(--zp-soft);font-size:8px;font-weight:900}
#livedemo .iphone-zpay-wallet-tabs button.is-active{background:#fff;color:var(--zp-ink);box-shadow:1px 2px 0 var(--zp-ink)}
#livedemo .iphone-zpay-crypto-total{margin-top:11px;padding:12px;border:2px solid var(--zp-ink);border-radius:15px;background:linear-gradient(135deg,#2a2941,#514d78);color:#fff;box-shadow:3px 3px 0 var(--zp-lav);text-align:left}
#livedemo .iphone-zpay-crypto-total>small{display:block;color:#d9d5ee;font-size:7px}
#livedemo .iphone-zpay-crypto-total>strong{display:inline-block;margin-top:2px;font-size:18px}
#livedemo .iphone-zpay-crypto-total>span{margin-left:6px;color:var(--zp-mint);font-size:7px}
#livedemo .iphone-zpay-crypto-total>div{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
#livedemo .iphone-zpay-crypto-total button{padding:7px;border:1px solid #fff;border-radius:9px;background:var(--zp-mint);color:var(--zp-ink);font-size:7px;font-weight:900}
#livedemo .iphone-zpay-crypto-total button+button{background:#fff}
#livedemo .iphone-zpay-currencies i.is-usdt{background:#26a17b;color:#fff}
#livedemo .iphone-zpay-currencies i.is-btc{background:#f7931a;color:#fff}
#livedemo .iphone-zpay-currencies i.is-eth{background:#627eea;color:#fff}
#livedemo .iphone-14:has(.iphone-open.is-app-open)>.iphone-home{width:100%;height:20px;background:rgba(74,75,82,.62);box-shadow:0 -2px 7px rgba(42,41,65,.12);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
#livedemo .iphone-14:has(.iphone-open.is-app-open)>.iphone-home::after{bottom:5px;width:62px;height:3px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
#livedemo .iphone-zpay-app.is-swipe-exit{transition:transform .18s ease,opacity .18s ease;transform:translateY(-18px) scale(.985);opacity:.7}
#livedemo .iphone-zpay-wallet-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:14px}
#livedemo .iphone-zpay-wallet-actions button{padding:8px 2px;border:1px solid rgba(42,41,65,.18);border-radius:12px;background:#fff;color:var(--zp-ink);font-size:7px;font-weight:800}.iphone-zpay-wallet-actions span{display:block;margin-bottom:3px;font-size:15px}
#livedemo .iphone-zpay-limit{padding:12px;border:2px solid var(--zp-ink);border-radius:15px;background:#fff;text-align:left}.iphone-zpay-limit>span{display:flex;justify-content:space-between;margin:7px 0 5px;font-size:8px}.iphone-zpay-limit small{color:var(--zp-soft);font-size:7px}.iphone-zpay-limit>i{display:block;height:6px;border-radius:8px;background:#ded8f7;overflow:hidden}.iphone-zpay-limit>i>b{display:block;width:65%;height:100%;background:var(--zp-mint-dark)}
#livedemo .iphone-zpay-profile-head{display:grid;grid-template-columns:47px 1fr 30px;align-items:center;gap:9px;text-align:left}.iphone-zpay-profile-head>span{display:grid;place-items:center;width:45px;height:45px;border:2px solid var(--zp-ink);border-radius:15px;background:var(--zp-mint);font-size:16px;font-weight:900;box-shadow:2px 2px 0 var(--zp-ink)}.iphone-zpay-profile-head>strong{display:flex;flex-direction:column;font-size:12px}.iphone-zpay-profile-head small{color:var(--zp-soft);font-size:7px}.iphone-zpay-profile-head button{border:0;background:none;color:var(--zp-ink);font-size:17px}
#livedemo .iphone-zpay-account{margin-top:15px;padding:13px;border:2px solid var(--zp-ink);border-radius:15px;background:var(--zp-lav);text-align:left;box-shadow:3px 3px 0 var(--zp-ink)}.iphone-zpay-account small,.iphone-zpay-account strong{display:block;font-size:8px}.iphone-zpay-account strong{margin:4px 0 9px;font-size:10px}.iphone-zpay-account button{padding:5px 8px;border:1px solid var(--zp-ink);border-radius:8px;background:#fff;color:var(--zp-ink);font-size:7px;font-weight:800}
#livedemo .iphone-zpay-menu{margin-top:14px;border:2px solid var(--zp-ink);border-radius:15px;background:#fff;overflow:hidden}.iphone-zpay-menu>button{display:grid;grid-template-columns:29px 1fr 12px;align-items:center;width:100%;padding:9px;border:0;border-bottom:1px solid rgba(42,41,65,.13);background:#fff;color:var(--zp-ink);text-align:left}.iphone-zpay-menu>button:last-child{border-bottom:0}.iphone-zpay-menu>button>span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--zp-paper);font-size:11px;font-weight:900}.iphone-zpay-menu b{display:flex;flex-direction:column;font-size:9px}.iphone-zpay-menu small{color:var(--zp-soft);font-size:7px}.iphone-zpay-menu i{font-size:17px;font-style:normal}

#livedemo .iphone-lock {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--unlock) * -100%);
  height: 100%;
  z-index: 4;
  cursor: grab;
}
#livedemo .iphone-14.is-dragging .iphone-lock{cursor:grabbing}

#livedemo .iphone-14.is-open .iphone-lock {
  pointer-events: none;
}

#livedemo .iphone-14.is-open .iphone-open {
  pointer-events: auto;
}

#livedemo .iphone-14.is-animating .iphone-lock {
  transition: top 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

#livedemo .iphone-swipe-hint {
  position:absolute;left:50%;bottom:13px;z-index:7;display:flex;flex-direction:column;align-items:center;
  border:0;background:none;color:rgba(255,255,255,.9);font:inherit;font-size:10px;font-weight:700;
  letter-spacing:.02em;text-shadow:0 2px 7px rgba(0,0,0,.55);transform:translateX(-50%);
  cursor:pointer;animation:iphoneSwipeHint 1.8s ease-in-out infinite;
}
#livedemo .iphone-swipe-hint span{font-size:18px;line-height:12px}
#livedemo .iphone-14.is-open .iphone-swipe-hint{display:none}

@keyframes iphoneSwipeHint{0%,100%{transform:translate(-50%,0);opacity:.65}50%{transform:translate(-50%,-7px);opacity:1}}

@keyframes iphoneNtfIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes iphoneNtfOut {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}

@media (max-width: 900px) {
  #livedemo .livedemo-visual {
    min-width: 0;
    max-width: 100%;
  }

  #livedemo .livedemo-stage {
    width: min(272px, 100%);
    height: 552px;
    max-width: 100%;
  }

  #livedemo .iphone {
    transform: scale(0.82) rotate(-1.6deg);
    transform-origin: center center;
  }

  #livedemo .livedemo-stage:hover .iphone {
    transform: scale(0.82) rotate(0deg);
  }
}

@media (max-width: 480px) {
  #livedemo .livedemo-stage {
    width: min(252px, calc(100vw - 2.4rem));
    height: 512px;
  }

  #livedemo .iphone {
    transform: scale(0.76) rotate(-1.4deg);
    transform-origin: center center;
  }

  #livedemo .livedemo-stage:hover .iphone {
    transform: scale(0.76) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #livedemo .iphone,
  #livedemo .iphone-island,
  #livedemo .iphone-ntf {
    animation: none !important;
    transition: none !important;
  }
}