body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:#fff;
  color:#222;
  overflow-x:hidden;
}
.phone-island,
.phone-home-indicator,
.phone-side-button {
  display:none;
}
.phone-screen {
  position:relative;
  min-height:100vh;
  background:#fff;
}
.page-scroll {
  min-height:100vh;
}
#qa-layer{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
#qa-layer::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:200%;
  background:url("uploads/bg.js?v=1") center top / cover no-repeat;
  animation:bgMove 20s linear infinite;
  z-index:0;
  pointer-events:none;
}
@keyframes bgMove{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(-50%); }
}
#qa-mask{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1;
  pointer-events:none;
}
#qa-card{
  position:relative;
  background:#fff;
  width:90%;
  max-width:360px;
  border-radius:22px;
  padding:22px 20px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  z-index:2;
}
.progress-text{font-size:13px;color:#888;margin-bottom:6px}
.progress-bar{height:6px;background:#eee;border-radius:6px;overflow:hidden}
.progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff6cab,#7366ff);transition:.3s}
#qa-card h1{font-size:25px;margin:10px 0}
#qa-card p{font-size:19px;color:#666}
.options{display:flex;flex-direction:column;gap:12px;margin-top:15px}
.option{background:#f5f5f5;padding:14px;border-radius:14px;text-align:center;cursor:pointer}
.option:hover{background:#ff4081;color:#fff}
.img-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.img-option{border-radius:14px;overflow:hidden;cursor:pointer;border:2px solid transparent}
.img-option:hover{border-color:#ff4081}
.img-option{
  height:200px;
}
.img-option img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#popup{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.popup-box{
  background:#fff;width:80%;max-width:280px;
  border-radius:18px;padding:20px;text-align:center;
}
.popup-box h2{margin:0;color:#ff3b3b;font-size:18px}
.popup-box p{margin:10px 0 15px;font-size:14px}
.popup-box button{
  border:none;background:#ff4081;color:#fff;
  padding:10px 25px;border-radius:20px;font-size:14px;
}
.countdown-bar{
  height:8px;
  background:#ffd6d6;
  border-radius:4px;
  overflow:hidden;
  margin-top:14px;
}
.countdown-bar span{
  display:block;
  height:100%;
  width:0%;
  background:#ff3b3b;
  transition:width 2s linear;
}
.hero {
  text-align:center;
  padding:60px 20px 40px;
  background:linear-gradient(135deg,#ff6cab,#7366ff);
  color:#fff;
  border-bottom-left-radius:50px;
  border-bottom-right-radius:50px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.hero img {
  width:100px;
  height:100px;
  border-radius:25px;
  margin-bottom:15px;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
.hero h1 { font-size:28px; margin:10px 0 5px; font-weight:700; }
.hero p { font-size:16px; opacity:0.9; margin:0; }
.download-btn {
  margin-top:25px; display:inline-block; padding:16px 60px;
  background:#fff; color:#ff4081; font-size:18px; font-weight:600;
  border-radius:35px; text-decoration:none;
  box-shadow:0 6px 15px rgba(0,0,0,0.25);
  animation:bounce 1.5s infinite;
}
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-8px); }
}
.section { padding:30px 15px; text-align:center; }
.section h2 { font-size:20px; font-weight:700; margin-bottom:20px; }
.features { display:flex; justify-content:space-between; flex-wrap:nowrap; }
.feature {
  flex:1; margin:0 5px; background:#fff; padding:15px;
  border-radius:15px; box-shadow:0 3px 10px rgba(0,0,0,0.06);
}
.feature svg { width:28px; height:28px; margin-bottom:8px; fill:#ff4081; }
.feature h3 { font-size:15px; margin:8px 0; }
.feature p { font-size:13px; color:#ff4081; }
.screenshots {
  display:flex; overflow-x:auto; gap:15px; padding:20px;
  -webkit-overflow-scrolling:touch;
}
.screenshots img {
  width:260px; height:480px; border-radius:20px; flex-shrink:0;
  object-fit:cover; box-shadow:0 6px 20px rgba(0,0,0,0.15);
}
@media (min-width:768px) {
  body {
    background:
      radial-gradient(circle at 16% 18%, rgba(255, 190, 221, 0.95), transparent 24%),
      radial-gradient(circle at 84% 16%, rgba(191, 214, 255, 0.88), transparent 26%),
      radial-gradient(circle at 52% 84%, rgba(214, 194, 255, 0.72), transparent 28%),
      linear-gradient(145deg, #fffafc 0%, #f7f7ff 42%, #eef4ff 100%);
    overflow:hidden;
  }
  .phone-shell {
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    isolation:isolate;
    overflow:hidden;
  }
  .phone-shell::before,
  .phone-shell::after {
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(10px);
    pointer-events:none;
    z-index:-1;
  }
  .phone-shell::before {
    width:320px; height:320px; top:8%; left:12%;
    background:radial-gradient(circle, rgba(255, 163, 204, 0.38) 0%, rgba(255, 163, 204, 0) 68%);
  }
  .phone-shell::after {
    width:380px; height:380px; right:10%; bottom:6%;
    background:radial-gradient(circle, rgba(125, 162, 255, 0.3) 0%, rgba(125, 162, 255, 0) 70%);
  }
  .phone-frame {
    position:relative;
    width:min(462px, calc(100vw - 40px));
    height:min(940px, calc(100vh - 40px));
    padding:14px;
    border-radius:56px;
    background:linear-gradient(155deg, #ffffff 0%, #f4f6f9 22%, #dfe4eb 52%, #ffffff 100%);
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.88),
      inset 0 0 0 1px rgba(255, 255, 255, 0.9);
    overflow:visible;
  }
  .phone-frame::before {
    content:""; position:absolute; inset:1px; border-radius:inherit;
    background:linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.55) 20%, rgba(199, 207, 218, 0.34) 52%, rgba(255, 255, 255, 0.72) 100%);
    pointer-events:none;
  }
  .phone-frame::after {
    content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), inset 0 0 0 4px rgba(214, 220, 229, 0.34);
    pointer-events:none;
  }
  .phone-screen {
    position:absolute; inset:14px; min-height:auto; height:auto;
    border-radius:42px; overflow:hidden; background:#fff; z-index:1;
    box-shadow:0 0 0 1px rgba(10, 12, 16, 0.08);
  }
  .page-scroll {
    height:100%; overflow-y:auto; overflow-x:hidden;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .page-scroll::-webkit-scrollbar { width:0; height:0; }
  .phone-screen #qa-layer,
  .phone-screen #popup { position:absolute; }
  .phone-island {
    display:block; position:absolute; top:24px; left:50%; width:132px; height:36px;
    transform:translateX(-50%); border-radius:999px;
    background:linear-gradient(180deg, #0b0b0d 0%, #000 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 6px 16px rgba(0, 0, 0, 0.35);
    z-index:3; pointer-events:none;
  }
  .phone-island::before {
    content:""; position:absolute; top:50%; left:24px; width:10px; height:10px;
    transform:translateY(-50%); border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #3c4859, #12151b 58%, #020304 100%); opacity:.95;
  }
  .phone-island::after {
    content:""; position:absolute; top:50%; right:24px; width:46px; height:8px;
    transform:translateY(-50%); border-radius:999px; background:rgba(255, 255, 255, 0.08);
  }
  .phone-home-indicator {
    display:block; position:absolute; bottom:18px; left:50%; width:132px; height:5px;
    transform:translateX(-50%); border-radius:999px; background:rgba(18, 20, 24, 0.58);
    z-index:3; pointer-events:none;
  }
  .phone-side-button {
    display:block; position:absolute; width:4px; border-radius:999px;
    background:linear-gradient(180deg, #f9fafb 0%, #cfd5de 28%, #8d95a1 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index:0; pointer-events:none;
  }
  .phone-side-button--mute { left:-2px; top:136px; height:28px; }
  .phone-side-button--volume-up { left:-2px; top:188px; height:66px; }
  .phone-side-button--volume-down { left:-2px; top:268px; height:66px; }
  .phone-side-button--power { right:-2px; top:208px; height:96px; }
  .screenshots { justify-content:flex-start; overflow-x:auto; padding:20px; }
  .screenshots img { width:260px; height:480px; }
}
.reviews { max-width:600px; margin:0 auto; text-align:left; }
.review-item {
  background:#fff; border-radius:15px; padding:15px; margin-bottom:15px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.review-item b { display:block; margin-bottom:8px; color:#ff4081; font-size:16px; font-weight:600; }
.review-item p { margin:0; font-size:14px; color:#444; line-height:1.5; }
.info-list { list-style:none; padding:0; margin:20px auto; font-size:14px; max-width:500px; }
.info-list li { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #eee; }
.footer { text-align:center; font-size:12px; color:#888; padding:10px 15px; margin-top:5px; }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
#net-modal-btn:active{transform:scale(.96)}