/* 简洁响应式样式，便于快速加载与 SEO */
:root{--primary:#00a78e;--accent:#0b6efd;--bg:#f6fffb;--text:#0d2430;--muted:#58616b;--warm:#ff7a45;--warm-2:#fff4ee;--warm-rgb:255,122,69}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,'Noto Sans CJK SC',"Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg)}body{padding-top:60px}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{background:#fff;border-bottom:1px solid rgba(11,110,253,0.06);box-shadow:0 1px 0 rgba(13,36,48,0.03);position:fixed;top:0;left:0;right:0;z-index:1001}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.logo{font-weight:800;color:var(--primary);text-decoration:none;font-size:1.25rem;letter-spacing:0.5px}
.nav{display:flex;gap:18px}
.nav a{color:var(--muted);text-decoration:none;padding:8px;border-radius:6px}
.nav a:hover{color:var(--text);background:rgba(11,110,253,0.04)}

/* warm accents */
.warm-text{color:var(--warm);font-weight:700}
.badge{display:inline-block;background:var(--warm);color:#fff;padding:3px 8px;border-radius:999px;font-size:0.75rem;margin-left:8px;vertical-align:middle}
.feature-list li::before{content:"";display:inline-block;width:10px;height:10px;background:var(--warm);border-radius:3px;margin-right:8px;vertical-align:middle}
.hero-stats .stat.stat--highlight{border-color: rgba(var(--warm-rgb),0.12);box-shadow:0 8px 24px rgba(255,122,69,0.06)}
.nav-toggle{display:none;background:none;border:0;font-size:1.3rem}
.hero{padding:56px 0;background:linear-gradient(180deg,rgba(0,167,142,0.08),#fff)}
.hero-inner{display:flex;gap:36px;align-items:center}
.hero-text h1{margin:0 0 12px;font-size:2.2rem}
.hero-text p{margin:0 0 16px;color:var(--muted);font-size:1.05rem}
.hero-stats{display:flex;gap:18px;justify-content:center;margin:14px 0 18px}
.hero-stats .stat{background:linear-gradient(180deg,rgba(255,255,255,0.9),#fff);padding:10px 14px;border-radius:10px;border:1px solid rgba(0,0,0,0.04);text-align:center}
.hero-stats .stat strong{display:block;font-size:1.1rem;color:var(--primary)}
/* Hero手机图片样式 */
.hero-phone img{border-radius:18px;box-shadow:0 8px 24px rgba(13,36,48,0.12);object-fit:cover}

/* 英雄区二维码样式 */
.hero-qr{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px}
.hero-qr .qr-svg,.hero-qr .qr-img{width:120px;height:120px;border-radius:10px;box-shadow:0 6px 18px rgba(13,36,48,0.06);border:1px solid rgba(0,0,0,0.04);object-fit:cover}
.downloads .qr-img{width:140px;height:140px;border-radius:10px;box-shadow:0 6px 18px rgba(13,36,48,0.06);border:1px solid rgba(0,0,0,0.04);object-fit:cover}
.qr-caption{font-size:0.95rem;color:var(--muted);margin-left:12px}
@media(max-width:800px){.hero-qr{flex-direction:column;gap:8px;justify-content:center}.qr-caption{margin-left:0;margin-top:4px}}

.btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;box-shadow:0 8px 24px rgba(0,167,142,0.12)}
.btn-outline{background:transparent;border:1px solid rgba(0,167,142,0.12);color:var(--primary)}
.features{padding:36px 0}
.feature-list{display:flex;gap:24px;list-style:none;padding:0;margin:12px 0}
.feature-list li{flex:1;background:#fff;padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(11,110,253,0.04);border:none}
.faq{padding:24px 0}
.site-footer{padding:36px 0 18px;background:#fff;border-top:1px solid rgba(11,110,253,0.06);color:#6b7280;font-size:0.9rem}
.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:24px}
.footer-section h3{margin:0 0 12px;font-size:1rem;color:var(--text)}
.footer-section p{margin:0 0 8px}
.footer-nav{list-style:none;padding:0;margin:0}
.footer-nav li{margin:0 0 8px}
.footer-nav a{color:#6b7280;text-decoration:none}
.footer-nav a:hover{color:var(--primary)}
.social-links{display:flex;gap:12px}
.social-links a{display:inline-block;padding:6px 12px;background:rgba(0,167,142,0.08);color:var(--primary);text-decoration:none;border-radius:6px}
.social-links a:hover{background:var(--primary);color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(11,110,253,0.06);padding-top:18px}
.footer-links{display:flex;gap:18px}
.footer-links a{color:#6b7280;text-decoration:none}
.footer-links a:hover{color:var(--primary)}
@media(max-width:768px){
  .footer-content{grid-template-columns:1fr 1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .footer-links{justify-content:center}
}
/* 推荐任务样式 */
.btn-primary:hover{transform:translateY(-2px)}
.btn-outline:hover{background:rgba(0,167,142,0.04)}
.recommend{padding:24px 0;background:#fff;border-radius:8px}
.recommend .task-grid{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.recommend .task{flex:1;min-width:220px;background:#fff;border-radius:12px;padding:18px;border:1px solid rgba(13,36,48,0.04);box-shadow:0 8px 20px rgba(13,36,48,0.04)}
.recommend .task h3{margin:0 0 8px;font-size:1rem;color:var(--text)}
.recommend .task .meta{font-size:0.85rem;color:var(--muted);margin-bottom:8px}
.recommend .task p{margin:0 0 12px;color:var(--muted)}
/* 下载截图样式 */
.download-screenshot{border-radius:12px;box-shadow:0 4px 12px rgba(13,36,48,0.08);object-fit:cover}

/* 任务类型网格 */
.task-types-grid{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}
.task-types-grid>div{flex:1;min-width:200px;background:#fff;padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(13,36,48,0.04);color:var(--muted)}

/* 用户收益样式 */
.user-stories .stories{display:flex;gap:16px;flex-wrap:wrap}
.user-stories .stories>div{flex:1;min-width:200px;background:#fff;border-radius:10px;padding:12px;box-shadow:0 6px 18px rgba(13,36,48,0.04);color:var(--muted)}

/* 适合谁用：卡片样式 */
.who-grid{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}
.who-card{flex:1;min-width:160px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 8px 24px rgba(13,36,48,0.04);color:var(--muted);text-align:center}
.who-card strong{display:block;font-size:1.05rem;color:var(--text);margin-bottom:8px}

/* 三步开始：卡片样式 */
.steps-grid{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0}
.step-card{flex:1;min-width:200px;background:#fff;border-radius:12px;padding:20px;box-shadow:0 8px 24px rgba(13,36,48,0.04);color:var(--muted);text-align:center;position:relative}
.step-card strong{display:block;font-size:1.1rem;color:var(--text);margin:12px 0 8px}
.step-card p{margin:0}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(90deg,var(--primary),var(--accent));color:white;font-weight:700;font-size:1.2rem;margin-bottom:8px}

/* 在步骤卡片之间添加连接线（大屏幕） */
@media(min-width:769px){
  .steps-grid{position:relative}
  .steps-grid::before{
    content:'';position:absolute;top:60px;left:50%;right:50%;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);transform:translateX(-50%);z-index:1
  }
}

/* FAQ 卡片化 */
#faq details{background:#fff;padding:14px;border-radius:10px;box-shadow:0 6px 18px rgba(13,36,48,0.04);margin-bottom:12px;transition:all 0.3s ease-in-out}
#faq summary{font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;position:relative;padding-right:24px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:'▼';font-size:0.8rem;color:var(--muted);transition:transform 0.3s ease}
#faq details[open] summary::after{transform:rotate(180deg)}
#faq details[open]{border-left:4px solid var(--accent);padding-left:12px;box-shadow:0 8px 24px rgba(13,36,48,0.06)}
#faq p{margin:12px 0 0;color:var(--muted);transition:all 0.3s ease}

/* 响应式设计 */
/* 所有h2居中 */
h2{text-align:center}

@media(max-width:768px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-phone{order:2}
  .hero-text{order:1}
  .nav{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid rgba(11,110,253,0.06);padding:12px}
  .nav-toggle{display:block}
  .hero-text h1{font-size:1.8rem}
  .hero-text p{font-size:1rem}
  .feature-list{flex-direction:column}
  .task-types-grid{flex-direction:column}
  .user-stories .stories{flex-direction:column}
  .who-grid{flex-direction:column}
  .recommend .task-grid{flex-direction:column}
}

/* CTA按钮居中 */
.cta{
  text-align:center;
  margin:24px 0;
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 167, 142, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  z-index: 1000;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 167, 142, 0.3);
}

/* 提升可访问性 */
button:focus, a:focus{outline:3px solid rgba(11,110,253,0.18);outline-offset:2px}