/* ============================================================
   移动端适配 - 全局样式
   断点：sm=640px | md=768px | lg=1024px
   ============================================================ */

/* ============================================================
   通用工具类
   ============================================================ */
@media (max-width: 767px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 隐藏桌面端元素 */
  .desktop-only { display: none !important; }

  /* 显示移动端元素 */
  .mobile-only { display: block !important; }
}

.mobile-only { display: none; }

/* ============================================================
   Header / 导航
   ============================================================ */
@media (max-width: 1024px) {
  .header-inner {
    padding: 0 16px !important;
  }

  .nav { display: none !important; }
  .header-actions { display: none !important; }
  .hamburger { display: flex !important; }

  .header {
    height: 56px;
  }
}

/* ============================================================
   Hero 区域
   ============================================================ */
@media (max-width: 767px) {
  .hero {
    padding-top: 72px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  .hero-inner {
    flex-direction: column !important;
    gap: 32px !important;
    padding: 0 16px !important;
  }

  .hero-left {
    width: 100% !important;
    text-align: center !important;
    order: 2;
  }

  .hero-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    order: 1;
  }

  .hero-badge {
    font-size: 12px !important;
    padding: 4px 12px !important;
  }

  .hero h1 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px !important;
  }

  .hero-sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .hero-sub2 {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .hero-cta-row {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  .hero-cta-primary,
  .hero-cta-secondary {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  .hero-trust {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  .hero-tags {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .hero-tags span {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  .hero-channels {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* 右侧插图缩小 */
  .hero-right .hero-image,
  .hero-right img,
  .hero-image-container {
    max-width: 240px !important;
    width: 100% !important;
  }
}

/* ============================================================
   通用 Section / 卡片网格
   ============================================================ */
@media (max-width: 767px) {
  section[class*="section"] {
    padding: 48px 16px !important;
  }

  .section-header h2 {
    font-size: 22px !important;
  }

  .section-header p {
    font-size: 14px !important;
  }

  /* 卡片网格 */
  .cards-grid,
  .agents-grid,
  .products-grid,
  .skills-grid,
  .services-grid,
  .cases-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 强制单列 */
  .card {
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* 横向滚动卡片容器（允许滚动） */
  .cards-scroll,
  .agents-scroll,
  .products-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 12px !important;
    display: flex !important;
    gap: 16px !important;
  }

  .cards-scroll .card,
  .agents-scroll .card,
  .products-scroll .card {
    flex: 0 0 280px !important;
    scroll-snap-align: start !important;
  }

  /* 特色/优势网格 */
  .features-grid,
  .advantage-grid,
  .why-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

@media (max-width: 1024px) {
  .cards-grid,
  .agents-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ============================================================
   Footer
   ============================================================ */
@media (max-width: 767px) {
  .footer {
    padding: 32px 16px !important;
  }

  .footer-inner {
    flex-direction: column !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px 20px !important;
    font-size: 13px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  .footer-brand {
    font-size: 18px !important;
  }

  .footer-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

/* ============================================================
   表单 / 定价页
   ============================================================ */
@media (max-width: 767px) {
  .pricing-grid,
  .price-tables {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .price-card {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .contact-form {
    padding: 24px 16px !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important; /* 防止iOS自动放大 */
    padding: 12px !important;
  }
}

/* ============================================================
   产品页
   ============================================================ */
@media (max-width: 767px) {
  .product-hero {
    flex-direction: column !important;
    padding: 80px 16px 32px !important;
    gap: 24px !important;
    text-align: center !important;
  }

  .product-hero h1 {
    font-size: 24px !important;
  }

  .product-features {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .feature-card {
    padding: 16px !important;
  }

  .steps-grid,
  .how-steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ============================================================
   客服悬浮按钮（移动端）
   ============================================================ */
@media (max-width: 767px) {
  .chat-fab,
  #chatFloatBtn,
  .float-chat-btn {
    bottom: 80px !important; /* 上移，避开底部CTA栏 */
    right: 20px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
    box-shadow: 0 4px 16px rgba(255, 106, 0, 0.4) !important;
  }
}

/* ============================================================
   图片自适应
   ============================================================ */
@media (max-width: 767px) {
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .hero-image,
  .section-image,
  .product-image {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* ============================================================
   平滑滚动
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   防止水平溢出
   ============================================================ */
body {
  overflow-x: hidden;
}

/* ============================================================
   触控优化
   ============================================================ */
@media (max-width: 767px) {
  a, button {
    min-height: 44px; /* 触控友好最小点击区域 */
    min-width: 44px;
  }

  .btn {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
}