body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:#fff;
  color:#222;
}
#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);
}
.phone-island,
.phone-home-indicator,
.phone-side-button {
  display:none;
}
.phone-screen {
  position:relative;
  min-height:100vh;
  background:#fff;
}
.page-scroll {
  min-height:100vh;
}

@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,.38) 0%, transparent 68%); }
  .phone-shell::after { width:380px; height:380px; right:10%; bottom:6%; background:radial-gradient(circle, rgba(125,162,255,.3) 0%, transparent 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, #fff 0%, #f4f6f9 22%, #dfe4eb 52%, #fff 100%);
    box-shadow:0 30px 90px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.88), inset 0 0 0 1px rgba(255,255,255,.9);
    overflow:visible;
  }
  .phone-frame::before {
    content:""; position:absolute; inset:1px; border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.55) 20%, rgba(199,207,218,.34) 52%, rgba(255,255,255,.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,.72), inset 0 0 0 4px rgba(214,220,229,.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,.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,.08), 0 6px 16px rgba(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,.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,.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,.35), 0 2px 6px rgba(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)}