/* 基础重置 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #e0e7ff 0%, #fff 100%); color: #222; min-height: 100vh; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* 导航栏 */
.zd985fnavbar { background: #4f8cff; box-shadow: 0 2px 8px rgba(79,140,255,0.08); }
.zd985fnav-container { display: flex; align-items: center; height: 64px; }
.zd985fsite-title { font-size: 2rem; font-weight: bold; color: #fff; letter-spacing: 2px; }

/* 主横幅 */
.zd985fhero { background: linear-gradient(120deg, #4f8cff 60%, #a0e9ff 100%); padding: 3rem 0 2rem 0; }
.zd985fhero-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.zd985fhero-text { max-width: 500px; color: #fff; }
.zd985fhero-text h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.zd985fhero-text p { font-size: 1.25rem; margin-bottom: 2rem; }
.zd985fdownload-btn { display: inline-block; background: #fff; color: #4f8cff; font-weight: bold; padding: 0.75rem 2rem; border-radius: 32px; box-shadow: 0 2px 8px rgba(79,140,255,0.12); text-decoration: none; transition: background 0.2s, color 0.2s; }
.zd985fdownload-btn:hover { background: #4f8cff; color: #fff; }
.zd985fhero-img {
  width: 420px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 32px;
  box-shadow: 0 4px 24px rgba(79,140,255,0.10);
}
.zd985fhero-img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 24px;
  display: block;
}

/* 功能卡片区 */
.zd985ffeatures { padding: 3rem 0 2rem 0; }
.zd985ffeatures h2 { text-align: center; font-size: 2rem; margin-bottom: 2rem; color: #4f8cff; }
.zd985fcard-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zd985fcard { background: #fff; border-radius: 24px; box-shadow: 0 2px 12px rgba(79,140,255,0.08); padding: 2rem 1.5rem; flex: 1 1 260px; max-width: 340px; min-width: 220px; transition: transform 0.2s, box-shadow 0.2s; }
.zd985fcard:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 8px 32px rgba(79,140,255,0.16); }
.zd985fcard h3 { color: #4f8cff; margin-bottom: 1rem; font-size: 1.25rem; }
.zd985fcard p { color: #444; font-size: 1rem; }

/* 为什么选择WhatsApp 框架区块 */
.zd985ffeatures-frame { background: #f8fbff; border: 2px solid #4f8cff33; border-radius: 28px; box-shadow: 0 4px 24px rgba(79,140,255,0.10); padding: 2.5rem 1.5rem; margin-bottom: 2rem; }
.zd985ffeatures-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zd985ffeatures-frame .card-grid { gap: 2rem; }

/* 下载区 */
.zd985fdownload { background: linear-gradient(120deg, #e0e7ff 60%, #a0e9ff 100%); padding: 3rem 0 2rem 0; }
.zd985fdownload h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zd985fdownload-card { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; background: #fff; border-radius: 24px; box-shadow: 0 2px 12px rgba(79,140,255,0.08); padding: 2rem; }
.zd985fdownload-info { flex: 1 1 260px; }
.zd985fdownload-info h3 { color: #4f8cff; margin-bottom: 1rem; }
.zd985fdownload-info ul { margin-bottom: 1.5rem; margin-left: 1.2rem; }
.zd985fdownload-info li { font-size: 1rem; color: #444; line-height: 1.8; }
.zd985fdownload-img { width: 180px; height: 140px; background: url('data:image/svg+xml;utf8,<svg width="180" height="140" xmlns="http://www.w3.org/2000/svg"><rect rx="24" width="180" height="140" fill="%234f8cff" fill-opacity="0.12"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="18" fill="%234f8cff" font-family="Arial">安卓下载</text></svg>') center/contain no-repeat; border-radius: 24px; }

/* 关于WhatsApp 框架区块 */
.zd985fabout-frame { background: #f8fbff; border: 2px solid #4f8cff33; border-radius: 28px; box-shadow: 0 4px 24px rgba(79,140,255,0.10); padding: 2.5rem 1.5rem; margin-bottom: 2rem; }
.zd985fabout-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zd985fabout-frame .about-content { gap: 2rem; }

/* 关于区 */
.zd985fabout { padding: 3rem 0 2rem 0; }
.zd985fabout h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zd985fabout-content { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.zd985fabout-text { flex: 2 1 320px; font-size: 1.1rem; color: #333; }
.zd985fabout-img { width: 180px; height: 140px; background: url('data:image/svg+xml;utf8,<svg width="180" height="140" xmlns="http://www.w3.org/2000/svg"><rect rx="24" width="180" height="140" fill="%234f8cff" fill-opacity="0.10"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="18" fill="%234f8cff" font-family="Arial">关于</text></svg>') center/contain no-repeat; border-radius: 24px; }

/* 页脚 */
.zd985ffooter { background: #4f8cff; color: #fff; text-align: center; padding: 1.2rem 0; font-size: 1rem; margin-top: 2rem; border-radius: 0 0 24px 24px; }

/* 主要功能区块 */
.zd985fmain-features { padding: 3rem 0 2rem 0; }
.zd985fmain-features h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zd985fmain-feature-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zd985fmain-feature-card { background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(79,140,255,0.08); padding: 2rem 1.2rem; flex: 1 1 220px; max-width: 260px; min-width: 180px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.zd985fmain-feature-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 8px 32px rgba(79,140,255,0.13); }
.zd985fmain-feature-icon { width: 48px; height: 48px; margin: 0 auto 1rem auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.zd985fmain-feature-icon.chat { background: linear-gradient(135deg, #4f8cff 60%, #a0e9ff 100%); }
.zd985fmain-feature-icon.call { background: linear-gradient(135deg, #34d399 60%, #a0e9ff 100%); }
.zd985fmain-feature-icon.group { background: linear-gradient(135deg, #fbbf24 60%, #a0e9ff 100%); }
.zd985fmain-feature-icon.file { background: linear-gradient(135deg, #f472b6 60%, #a0e9ff 100%); }

/* 下载流程步骤区块 */
.zd985fdownload-steps { background: #f4f8ff; padding: 3rem 0 2rem 0; }
.zd985fdownload-steps h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zd985fsteps-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zd985fstep-card { background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(79,140,255,0.08); padding: 2rem 1.2rem; flex: 1 1 200px; max-width: 220px; min-width: 150px; text-align: center; }
.zd985fstep-icon { width: 40px; height: 40px; margin: 0 auto 1rem auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; font-weight: bold; }
.zd985fstep-icon.one { background: linear-gradient(135deg, #4f8cff 60%, #a0e9ff 100%); }
.zd985fstep-icon.two { background: linear-gradient(135deg, #34d399 60%, #a0e9ff 100%); }
.zd985fstep-icon.three { background: linear-gradient(135deg, #fbbf24 60%, #a0e9ff 100%); }
.zd985fstep-icon.one::after { content: '1'; }
.zd985fstep-icon.two::after { content: '2'; }
.zd985fstep-icon.three::after { content: '3'; }

/* 安全与隐私说明区块 */
.zd985fprivacy { padding: 3rem 0 2rem 0; }
.zd985fprivacy h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zd985fprivacy-content { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zd985fprivacy-icon { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #4f8cff 60%, #a0e9ff 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.zd985fprivacy-icon::before { content: '\1F512'; font-size: 2rem; color: #fff; display: block; text-align: center; }
.zd985fprivacy-text { flex: 2 1 320px; font-size: 1.1rem; color: #333; }

/* 用户评价区块 */
.zd985ftestimonials { background: #e0e7ff; padding: 3rem 0 2rem 0; }
.zd985ftestimonials h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zd985ftestimonial-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zd985ftestimonial-card { background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(79,140,255,0.08); padding: 2rem 1.2rem; flex: 1 1 260px; max-width: 320px; min-width: 180px; display: flex; align-items: flex-start; gap: 1rem; }
.zd985ftestimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #a0e9ff 60%, #4f8cff 100%); flex-shrink: 0; }
.zd985favatar1 { background: linear-gradient(135deg, #4f8cff 60%, #a0e9ff 100%); }
.zd985favatar2 { background: linear-gradient(135deg, #34d399 60%, #a0e9ff 100%); }
.zd985favatar3 { background: linear-gradient(135deg, #fbbf24 60%, #a0e9ff 100%); }
.zd985ftestimonial-content p { color: #444; font-size: 1rem; margin-bottom: 0.5rem; }
.zd985ftestimonial-content span { color: #888; font-size: 0.95rem; }

/* FAQ区块 */
.zd985ffaq { padding: 3rem 0 2rem 0; }
.zd985ffaq h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zd985ffaq-list { max-width: 900px; margin: 0 auto; }
.zd985ffaq-item { background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(79,140,255,0.07); margin-bottom: 1.2rem; padding: 1.2rem 1rem; }
.zd985ffaq-item h3 { color: #4f8cff; font-size: 1.1rem; margin-bottom: 0.5rem; }
.zd985ffaq-item p { color: #444; font-size: 1rem; }

/* 响应式设计 */
@media (max-width: 900px) {
  .zd985fmain-feature-grid, .zd985fcard-grid, .zd985ftestimonial-grid, .zd985fsteps-grid {
    flex-direction: column;
    align-items: center;
  }
  .zd985fmain-feature-card, .zd985fcard, .zd985ftestimonial-card, .zd985fstep-card {
    max-width: 95vw;
    min-width: 0;
    width: 100%;
    margin: 0 auto 1.2rem auto;
    box-sizing: border-box;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .zd985fhero-content, .zd985fabout-content, .zd985fdownload-card { flex-direction: column; align-items: stretch; }
  .zd985fhero-img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    justify-content: center;
  }
  .zd985fabout-img, .zd985fdownload-img, .zd985fprivacy-content { margin: 0 auto 1.5rem auto; }
  .zd985ftestimonial-card {
    padding: 1rem 0.5rem;
    min-height: unset;
    gap: 0.7rem;
  }
  .zd985ftestimonial-avatar {
    width: 36px;
    height: 36px;
  }
  .zd985ftestimonial-content p {
    margin-bottom: 0.3rem;
    font-size: 0.98rem;
  }
  .zd985ftestimonial-content span {
    font-size: 0.92rem;
  }
}
@media (max-width: 600px) {
  .container { padding: 0 0.5rem; }
  .zd985fsite-title { font-size: 1.3rem; }
  .zd985fhero-text h1 { font-size: 1.5rem; }
  .zd985ffeatures h2, .zd985fdownload h2, .zd985fabout h2 { font-size: 1.3rem; }
  .zd985fcard, .zd985fdownload-card, .zd985fabout-content { padding: 1rem; }
  .zd985fmain-feature-card, .zd985fcard, .zd985ftestimonial-card, .zd985fstep-card {
    padding: 0.8rem 0.5rem;
    font-size: 0.98rem;
  }
  .zd985ftestimonial-card {
    padding: 0.7rem 0.2rem;
    gap: 0.5rem;
  }
  .zd985ftestimonial-avatar {
    width: 30px;
    height: 30px;
  }
}

/* WhatsApp主要功能 框架区块 */
.zd985fmain-features-frame { background: #f8fbff; border: 2px solid #4f8cff33; border-radius: 28px; box-shadow: 0 4px 24px rgba(79,140,255,0.10); padding: 2.5rem 1.5rem; margin-bottom: 2rem; }
.zd985fmain-features-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zd985fmain-features-frame .main-feature-grid { gap: 2rem; }

/* WhatsApp安卓下载卡片组 */
.zd985fdownload-card-group { display: flex; flex-direction: row; gap: 2rem; flex-wrap: nowrap; justify-content: center; }
.zd985fdownload-card { flex: 1 1 0; max-width: 48%; min-width: 320px; }
@media (max-width: 900px) {
  .zd985fdownload-card-group { flex-direction: column; align-items: stretch; flex-wrap: wrap; }
  .zd985fdownload-card { max-width: 100%; min-width: 0; }
}

/* WhatsApp下载 框架区块 */
.zd985fdownload-frame { background: #f8fbff; border: 2px solid #4f8cff33; border-radius: 28px; box-shadow: 0 4px 24px rgba(79,140,255,0.10); padding: 2.5rem 1.5rem; margin-bottom: 2rem; }
.zd985fdownload-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zd985fdownload-frame .download-card-group { gap: 2rem; }

/* WhatsApp下载流程 框架区块 */
.zd985fdownload-steps-frame { background: #f8fbff; border: 2px solid #4f8cff33; border-radius: 28px; box-shadow: 0 4px 24px rgba(79,140,255,0.10); padding: 2.5rem 1.5rem; margin-bottom: 2rem; }
.zd985fdownload-steps-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zd985fdownload-steps-frame .steps-grid { gap: 2rem; }

/* 用户评价 框架区块 */
.zd985ftestimonials-frame { background: #f8fbff; border: 2px solid #4f8cff33; border-radius: 28px; box-shadow: 0 4px 24px rgba(79,140,255,0.10); padding: 2.5rem 1.5rem; margin-bottom: 2rem; }
.zd985ftestimonials-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zd985ftestimonials-frame .testimonial-grid { gap: 2rem; }

/* 常见问题解答 框架区块 */
.zd985ffaq-frame { background: #f8fbff; border: 2px solid #4f8cff33; border-radius: 28px; box-shadow: 0 4px 24px rgba(79,140,255,0.10); padding: 2.5rem 1.5rem; margin-bottom: 2rem; }
.zd985ffaq-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zd985ffaq-frame .faq-list { gap: 1.2rem; }

.zd985fsite-nav {
  margin-left: auto;
  display: flex;
  gap: 2rem;
}
.zd985fsite-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  transition: color 0.2s;
}
.zd985fsite-nav a:hover {
  color: #a0e9ff;
}

/* 汉堡按钮样式 */
.zd985fnav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}
.zd985fnav-toggle span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}
@media (max-width: 700px) {
  .zd985fnav-toggle { display: flex; }
  .zd985fsite-nav {
    display: none;
    flex-direction: column;
    align-items: center;
    background: #4f8cff;
    width: 100%;
    position: absolute;
    top: 64px;
    left: 0;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(79,140,255,0.10);
    border-radius: 0 0 16px 16px;
  }
  .zd985fsite-nav.open {
    display: flex;
  }
  .zd985fnav-container {
    position: relative;
  }
  .zd985fsite-title {
    margin-bottom: 0.8rem;
    text-align: center;
    width: 100%;
  }
  .zd985fsite-nav a {
    font-size: 1rem;
    padding: 0.5rem 0;
    width: 100%;
    text-align: center;
  }
}