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; }
#wechat-mask { display:none; }
.wechat-mask-bg {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.5); z-index:10001;
}
.wechat-mask-pop {
  position:fixed; top:50%; left:50%; width:85%; max-width:320px;
  transform:translate(-50%,-50%); background:#fff; border-radius:20px;
  z-index:10002; overflow:hidden; padding:24px;
}
.wechat-mask-header { display:flex; align-items:center; margin-bottom:20px; }
.wechat-mask-logo { width:50px; height:50px; border-radius:12px; }
.wechat-mask-info { margin-left:12px; }
.wechat-mask-title { font-size:16px; font-weight:600; color:#333; }
.wechat-mask-subtitle { font-size:13px; color:#999; margin-top:4px; }
.wechat-mask-steps { background:#f7f8fa; border-radius:12px; padding:16px; }
.wechat-mask-steps p { font-size:14px; color:#333; line-height:2; display:flex; align-items:center; }
.wechat-mask-steps b { color:#ff4081; }
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; background:#ff4081; color:#fff; border-radius:50%;
  font-size:12px; font-weight:600; margin-right:8px; flex-shrink:0;
}
.wechat-mask-divider {
  text-align:center; margin:18px 0; position:relative; font-size:12px; color:#ccc;
}
.wechat-mask-divider::before, .wechat-mask-divider::after {
  content:''; position:absolute; top:50%; width:25%; height:1px; background:#e5e5e5;
}
.wechat-mask-divider::before { left:0; }
.wechat-mask-divider::after { right:0; }
.wechat-mask-copy {
  position:relative; height:40px; background:#f1f6f9; border-radius:20px; overflow:hidden;
}
.wechat-mask-copy input {
  width:100%; height:100%; border:none; outline:none; background:transparent;
  padding:0 80px 0 16px; font-size:13px; color:#999;
}
.wechat-mask-copy button {
  position:absolute; right:0; top:0; height:100%; padding:0 18px;
  background:linear-gradient(90deg,#ff6cab,#ff4081); color:#fff; border:none;
  border-radius:0 20px 20px 0; font-size:14px; font-weight:500; cursor:pointer;
}
@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)}