/* 基础重置 */
* { 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; }

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

/* 主横幅 */
.zbf137hero { background: linear-gradient(120deg, #4f8cff 60%, #a0e9ff 100%); padding: 3rem 0 2rem 0; }
.zbf137hero-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.zbf137hero-text { max-width: 500px; color: #fff; }
.zbf137hero-text h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.zbf137hero-text p { font-size: 1.25rem; margin-bottom: 2rem; }
.zbf137download-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; }
.zbf137download-btn:hover { background: #4f8cff; color: #fff; }
.zbf137hero-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);
}
.zbf137hero-img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 24px;
  display: block;
}

/* 功能卡片区 */
.zbf137features { padding: 3rem 0 2rem 0; }
.zbf137features h2 { text-align: center; font-size: 2rem; margin-bottom: 2rem; color: #4f8cff; }
.zbf137card-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zbf137card { 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; }
.zbf137card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 8px 32px rgba(79,140,255,0.16); }
.zbf137card h3 { color: #4f8cff; margin-bottom: 1rem; font-size: 1.25rem; }
.zbf137card p { color: #444; font-size: 1rem; }

/* 为什么选择WhatsApp 框架区块 */
.zbf137features-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; }
.zbf137features-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zbf137features-frame .card-grid { gap: 2rem; }

/* 下载区 */
.zbf137download { background: linear-gradient(120deg, #e0e7ff 60%, #a0e9ff 100%); padding: 3rem 0 2rem 0; }
.zbf137download h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zbf137download-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; }
.zbf137download-info { flex: 1 1 260px; }
.zbf137download-info h3 { color: #4f8cff; margin-bottom: 1rem; }
.zbf137download-info ul { margin-bottom: 1.5rem; margin-left: 1.2rem; }
.zbf137download-info li { font-size: 1rem; color: #444; line-height: 1.8; }
.zbf137download-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 框架区块 */
.zbf137about-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; }
.zbf137about-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zbf137about-frame .about-content { gap: 2rem; }

/* 关于区 */
.zbf137about { padding: 3rem 0 2rem 0; }
.zbf137about h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zbf137about-content { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.zbf137about-text { flex: 2 1 320px; font-size: 1.1rem; color: #333; }
.zbf137about-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; }

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

/* 主要功能区块 */
.zbf137main-features { padding: 3rem 0 2rem 0; }
.zbf137main-features h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zbf137main-feature-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zbf137main-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; }
.zbf137main-feature-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 8px 32px rgba(79,140,255,0.13); }
.zbf137main-feature-icon { width: 48px; height: 48px; margin: 0 auto 1rem auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.zbf137main-feature-icon.chat { background: linear-gradient(135deg, #4f8cff 60%, #a0e9ff 100%); }
.zbf137main-feature-icon.call { background: linear-gradient(135deg, #34d399 60%, #a0e9ff 100%); }
.zbf137main-feature-icon.group { background: linear-gradient(135deg, #fbbf24 60%, #a0e9ff 100%); }
.zbf137main-feature-icon.file { background: linear-gradient(135deg, #f472b6 60%, #a0e9ff 100%); }

/* 下载流程步骤区块 */
.zbf137download-steps { background: #f4f8ff; padding: 3rem 0 2rem 0; }
.zbf137download-steps h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zbf137steps-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zbf137step-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; }
.zbf137step-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; }
.zbf137step-icon.one { background: linear-gradient(135deg, #4f8cff 60%, #a0e9ff 100%); }
.zbf137step-icon.two { background: linear-gradient(135deg, #34d399 60%, #a0e9ff 100%); }
.zbf137step-icon.three { background: linear-gradient(135deg, #fbbf24 60%, #a0e9ff 100%); }
.zbf137step-icon.one::after { content: '1'; }
.zbf137step-icon.two::after { content: '2'; }
.zbf137step-icon.three::after { content: '3'; }

/* 安全与隐私说明区块 */
.zbf137privacy { padding: 3rem 0 2rem 0; }
.zbf137privacy h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zbf137privacy-content { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zbf137privacy-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; }
.zbf137privacy-icon::before { content: '\1F512'; font-size: 2rem; color: #fff; display: block; text-align: center; }
.zbf137privacy-text { flex: 2 1 320px; font-size: 1.1rem; color: #333; }

/* 用户评价区块 */
.zbf137testimonials { background: #e0e7ff; padding: 3rem 0 2rem 0; }
.zbf137testimonials h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zbf137testimonial-grid { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.zbf137testimonial-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; }
.zbf137testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #a0e9ff 60%, #4f8cff 100%); flex-shrink: 0; }
.zbf137avatar1 { background: linear-gradient(135deg, #4f8cff 60%, #a0e9ff 100%); }
.zbf137avatar2 { background: linear-gradient(135deg, #34d399 60%, #a0e9ff 100%); }
.zbf137avatar3 { background: linear-gradient(135deg, #fbbf24 60%, #a0e9ff 100%); }
.zbf137testimonial-content p { color: #444; font-size: 1rem; margin-bottom: 0.5rem; }
.zbf137testimonial-content span { color: #888; font-size: 0.95rem; }

/* FAQ区块 */
.zbf137faq { padding: 3rem 0 2rem 0; }
.zbf137faq h2 { color: #4f8cff; text-align: center; font-size: 2rem; margin-bottom: 2rem; }
.zbf137faq-list { max-width: 900px; margin: 0 auto; }
.zbf137faq-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; }
.zbf137faq-item h3 { color: #4f8cff; font-size: 1.1rem; margin-bottom: 0.5rem; }
.zbf137faq-item p { color: #444; font-size: 1rem; }

/* 响应式设计 */
@media (max-width: 900px) {
  .zbf137main-feature-grid, .zbf137card-grid, .zbf137testimonial-grid, .zbf137steps-grid {
    flex-direction: column;
    align-items: center;
  }
  .zbf137main-feature-card, .zbf137card, .zbf137testimonial-card, .zbf137step-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;
  }
  .zbf137hero-content, .zbf137about-content, .zbf137download-card { flex-direction: column; align-items: stretch; }
  .zbf137hero-img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    justify-content: center;
  }
  .zbf137about-img, .zbf137download-img, .zbf137privacy-content { margin: 0 auto 1.5rem auto; }
  .zbf137testimonial-card {
    padding: 1rem 0.5rem;
    min-height: unset;
    gap: 0.7rem;
  }
  .zbf137testimonial-avatar {
    width: 36px;
    height: 36px;
  }
  .zbf137testimonial-content p {
    margin-bottom: 0.3rem;
    font-size: 0.98rem;
  }
  .zbf137testimonial-content span {
    font-size: 0.92rem;
  }
}
@media (max-width: 600px) {
  .container { padding: 0 0.5rem; }
  .zbf137site-title { font-size: 1.3rem; }
  .zbf137hero-text h1 { font-size: 1.5rem; }
  .zbf137features h2, .zbf137download h2, .zbf137about h2 { font-size: 1.3rem; }
  .zbf137card, .zbf137download-card, .zbf137about-content { padding: 1rem; }
  .zbf137main-feature-card, .zbf137card, .zbf137testimonial-card, .zbf137step-card {
    padding: 0.8rem 0.5rem;
    font-size: 0.98rem;
  }
  .zbf137testimonial-card {
    padding: 0.7rem 0.2rem;
    gap: 0.5rem;
  }
  .zbf137testimonial-avatar {
    width: 30px;
    height: 30px;
  }
}

/* WhatsApp主要功能 框架区块 */
.zbf137main-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; }
.zbf137main-features-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zbf137main-features-frame .main-feature-grid { gap: 2rem; }

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

/* WhatsApp下载 框架区块 */
.zbf137download-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; }
.zbf137download-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zbf137download-frame .download-card-group { gap: 2rem; }

/* WhatsApp下载流程 框架区块 */
.zbf137download-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; }
.zbf137download-steps-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zbf137download-steps-frame .steps-grid { gap: 2rem; }

/* 用户评价 框架区块 */
.zbf137testimonials-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; }
.zbf137testimonials-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zbf137testimonials-frame .testimonial-grid { gap: 2rem; }

/* 常见问题解答 框架区块 */
.zbf137faq-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; }
.zbf137faq-frame h2 { text-align: center; color: #4f8cff; font-size: 2rem; margin-bottom: 2rem; }
.zbf137faq-frame .faq-list { gap: 1.2rem; }

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

/* 汉堡按钮样式 */
.zbf137nav-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;
}
.zbf137nav-toggle span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}
@media (max-width: 700px) {
  .zbf137nav-toggle { display: flex; }
  .zbf137site-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;
  }
  .zbf137site-nav.open {
    display: flex;
  }
  .zbf137nav-container {
    position: relative;
  }
  .zbf137site-title {
    margin-bottom: 0.8rem;
    text-align: center;
    width: 100%;
  }
  .zbf137site-nav a {
    font-size: 1rem;
    padding: 0.5rem 0;
    width: 100%;
    text-align: center;
  }
}