/* ============================================================
   小汤圆网络 - 全站移动端优化 (mobile.css)
   断点: max-width 768px
   覆盖所有页面的移动端体验
   ============================================================ */

@media (max-width: 768px) {

  /* ===== 全局根元素 ===== */
  html {
    -webkit-text-size-adjust: 100%;
    font-size: 15px;
  }
  body {
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  * {
    max-width: 100vw;
  }

  /* ===== 字体阶梯 ===== */
  h1 { font-size: 22px !important; line-height: 1.4 !important; }
  h2 { font-size: 20px !important; line-height: 1.4 !important; }
  h3 { font-size: 17px !important; line-height: 1.45 !important; }
  h4, h5, h6 { font-size: 15px !important; line-height: 1.5 !important; }
  p { font-size: 14px; line-height: 1.7; }
  .section-title h2,
  .section-title p { font-size: 20px !important; }
  .section-title p,
  .section-sub { font-size: 13px !important; }

  /* ===== 导航栏 + 汉堡菜单 ===== */
  .nav {
    padding: 0 16px !important;
    height: 56px !important;
  }
  .nav-items {
    display: none !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    background: #fff !important;
    z-index: 9998 !important;
    flex-direction: column !important;
    padding: 0 0 80px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 汉堡菜单展开时显示导航 */
  .nav-items.mobile-open {
    display: flex !important;
  }
  .nav-item {
    width: 100% !important;
    border-bottom: 1px solid #f0f2f5 !important;
  }
  .nav-link {
    display: block !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    min-height: 52px !important;
    line-height: 52px !important;
  }
  .nav-arrow { float: right; }

  /* 移动端下拉菜单 */
  .nav-item:hover .dropdown,
  .nav-item.active .dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    border-top: 1px solid #f0f2f5 !important;
  }
  .dropdown {
    display: none;
    position: static !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }
  .nav-item.expanded .dropdown {
    display: block !important;
  }
  .dropdown-left,
  .dropdown-right {
    width: 100% !important;
    padding: 0 20px !important;
  }
  .dropdown-right { display: none !important; }
  .product-item {
    padding: 14px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
  }
  .product-icon {
    width: 36px !important;
    height: 36px !important;
  }
  .product-title { font-size: 15px !important; }
  .product-subtitle { font-size: 12px !important; }

  /* 汉堡按钮样式 */
  .mobile-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    position: relative;
  }
  .mobile-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: #1a2035;
    border-radius: 2px;
    margin: 3px auto;
    transition: all 0.3s;
  }
  /* 汉堡变 X */
  .mobile-toggle.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .mobile-toggle.open span:nth-child(2) {
    opacity: 0;
  }
  .mobile-toggle.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-right {
    display: none !important;
  }
  .nav-right.mobile-show {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    z-index: 9998;
    padding: 12px 16px;
    justify-content: center;
    gap: 12px;
  }

  /* ===== 通用 section 间距 ===== */
  .section {
    padding: 48px 16px !important;
  }
  .section-title {
    margin-bottom: 28px !important;
  }
  .section-title h2 {
    margin-bottom: 8px !important;
  }

  /* ===== 容器 ===== */
  .container,
  .nav-wrap > .container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ===== Hero 区域 ===== */
  .hero {
    padding: 80px 16px 48px !important;
    min-height: auto !important;
  }
  .hero-inner {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .hero-left,
  .hero-right,
  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero h1 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }
  .hero p,
  .hero .hero-sub,
  .hero-left p {
    font-size: 14px !important;
  }
  .hero-btns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .hero-btns a,
  .hero-btns .btn {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }
  .hero-stats {
    flex-wrap: wrap !important;
    gap: 16px !important;
    justify-content: space-around !important;
  }
  .hero-stat .num {
    font-size: 24px !important;
  }
  .hero-stat .label {
    font-size: 12px !important;
  }
  .hero-source {
    font-size: 12px !important;
  }
  .hero-visual {
    min-height: 240px !important;
  }

  /* ===== 网格全部单列 ===== */
  .feature-grid,
  .why-grid,
  .adv-grid,
  .service-grid,
  .stat-grid,
  .team-grid,
  .value-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ===== 案例卡片 ===== */
  .case-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .case-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .case-card-cover {
    height: 200px !important;
  }

  /* ===== CTA 横幅 ===== */
  .cta-section,
  .cta-banner {
    padding: 40px 16px !important;
  }
  .cta-inner {
    padding: 32px 20px !important;
    border-radius: 14px !important;
  }
  .cta-inner h2 {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }
  .cta-inner p {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  .cta-inner .btn,
  .cta-inner a {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
  }

  /* ===== 浮动组件 ===== */
  .float-widget {
    right: 8px !important;
    top: auto !important;
    bottom: 16px !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 8px !important;
  }
  .float-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  /* 修复 SVG 图标被 flex 压缩 */
  .float-btn svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
  /* 桌面端 hover 提示在移动端隐藏 */
  .float-btn .float-tip {
    display: none !important;
  }
  /* 微信/电话弹窗移动端默认隐藏，通过 .active 类切换 */
  .float-btn .wechat-pop,
  .float-btn .phone-pop {
    display: none !important;
    position: fixed !important;
    bottom: 70px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 10001 !important;
    width: 220px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .float-btn .wechat-pop.active,
  .float-btn .phone-pop.active {
    display: block !important;
  }
  /* 电话弹窗移动端样式 */
  .phone-pop {
    text-align: center !important;
    padding: 20px 16px !important;
  }
  .phone-pop .phone-pop-icon {
    display: none !important;
  }
  .phone-pop .phone-pop-num {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
  }
  /* 点击遮罩关闭弹窗 */
  .float-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
  }
  .float-mask.active {
    display: block;
  }

  /* ===== 按钮/触摸目标 ===== */
  .btn,
  button,
  input[type="submit"] {
    min-height: 44px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* ===== 页脚 ===== */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 16px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 16px !important;
    font-size: 12px !important;
  }

  /* ===== 首页仪表盘 ===== */
  .dash {
    padding: 20px 12px !important;
  }
  .dash-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .dash-metric {
    padding: 10px !important;
  }
  .m-label { font-size: 11px !important; }
  .m-value { font-size: 18px !important; }
  .dash-chart-head {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .dash-bars {
    gap: 4px !important;
  }

  /* ===== 关于我们页 ===== */
  .about-page { padding-top: 56px !important; }
  .ab-hero {
    padding: 60px 16px 40px !important;
    min-height: auto !important;
  }
  .ab-hero-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .ab-hero h1 {
    font-size: 22px !important;
  }
  .ab-hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .ab-hero-btns a,
  .ab-hero-btns .btn {
    width: 100% !important;
    text-align: center !important;
  }
  .ab-hero-stats {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .ab-hero-stat .num {
    font-size: 22px !important;
  }
  .ab-hero-stat .label {
    font-size: 12px !important;
  }
  .ab-hero-source {
    font-size: 12px !important;
  }
  .ab-hero-visual {
    min-height: 200px !important;
  }

  /* VMV 三列改单列 */
  .ab-vmv-section {
    padding: 40px 16px !important;
  }
  .ab-vmv-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ab-vmv-card {
    max-width: 100% !important;
  }
  .ab-vmv-card-img {
    height: 180px !important;
  }

  /* 关于我们各 section */
  .ab-section {
    padding: 40px 16px !important;
  }
  .ab-container {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .ab-sec-title {
    font-size: 20px !important;
    margin-bottom: 20px !important;
  }
  .ab-intro-row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .ab-intro-left,
  .ab-intro-right {
    width: 100% !important;
  }
  .ab-intro-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  .ab-intro-stat .num {
    font-size: 24px !important;
  }
  .ab-milestone-tags {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .ab-customer-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .ab-customer-left,
  .ab-customer-right {
    width: 100% !important;
  }

  /* ===== 案例列表页 ===== */
  .page-hero {
    padding: 80px 16px 40px !important;
  }
  .page-hero-inner {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .page-hero-title {
    font-size: 22px !important;
  }
  .page-hero-stats {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .blog-filter-section {
    padding: 24px 16px !important;
  }
  .blog-filter-tags {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .blog-filter-tags a,
  .blog-filter-tags .filter-tag {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .blog-list-section {
    padding: 32px 16px !important;
  }

  /* ===== 案例详情页 ===== */
  .case-hero {
    padding: 80px 16px 32px !important;
  }
  .case-hero-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .case-hero-left,
  .case-hero-right {
    width: 100% !important;
  }
  .case-hero-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .case-hero-cover {
    min-height: 200px !important;
    height: 220px !important;
  }
  .case-content-section {
    padding: 32px 16px !important;
  }
  .case-content-layout {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .case-sidebar-card,
  .case-toc-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .case-related-section {
    padding: 32px 16px !important;
  }
  .case-related-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .case-related-cover {
    height: 180px !important;
  }

  /* ===== 落地页 (baidu-sem) ===== */
  .video-section {
    padding: 40px 16px !important;
  }
  .video-title {
    font-size: 20px !important;
  }
  .video-thumb {
    height: 200px !important;
  }

  /* ===== 文章详情页 ===== */
  .article-breadcrumb-section {
    padding: 70px 16px 0 !important;
  }
  .article-hero {
    padding: 16px !important;
  }
  .article-hero .article-title {
    font-size: 22px !important;
    max-width: 100% !important;
  }
  .article-meta-row {
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .article-body-section {
    padding: 24px 16px 48px !important;
  }
  .article-layout {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .article-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
  .article-text {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  .article-text img {
    max-width: 100% !important;
    height: auto !important;
  }
  .article-text table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .article-tags {
    margin-top: 24px !important;
    padding: 20px 0 !important;
  }

  /* ===== 通用图片处理 ===== */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ===== 分页 ===== */
  .blog-pagination {
    gap: 4px !important;
    margin-top: 32px !important;
  }
  .blog-pagination .page-numbers {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* ===== 表格滚动 ===== */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ===== 隐藏桌面端装饰元素 ===== */
  .hero-glow1,
  .hero-glow2,
  .hero-glow3,
  .ab-hero-bg1,
  .ab-hero-bg2,
  .ab-hero-bg3 {
    display: none !important;
  }

  /* ===== 滚动条隐藏(移动端美观) ===== */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

}