/* ============================================
   九章策全站响应式 CSS
   适配: 电脑 / 平板 / 手机
   原则: 保持与电脑端一致的布局结构，只做「等比例缩放」
         不强制改列、不强制改flex方向、不强制隐藏元素
   ============================================ */

/* ---------- 通用基础适配 ---------- */
* { -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; overflow-x: auto; display: block; }

/* ---------- 全站容器宽度修复（居中显示） ---------- */
.container,
.main-content,
.content-area,
.main,
.content,
.page-content,
.card,
.card-body,
.card-content,
.table-wrap,
.list-container,
.grid-2,
.grid-3,
.grid-4,
.content-grid,
.services-grid,
.team-grid,
.stats-grid,
.projects-grid,
.membership-grid,
.news-grid,
.enterprise-grid,
.advantage-grid,
.feature-grid,
.consult-grid,
.packages-grid,
.stat-grid,
.selector-row,
.chart-box,
.chart-box-sm,
.podium-stage,
.podium-row,
.goal-card,
.goal-card-body,
.enterprise-card,
.content-card,
.service-card,
.team-member,
.member-card,
.project-card,
.news-card,
.consult-card {
    box-sizing: border-box !important;
}

/* 容器居中显示，左右留白 */
.container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* 表格强制填满容器 */
.card table,
.list-container table,
.table-wrap table,
.card .table-wrap table,
.data-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

/* 表格单元格样式统一 */
table th,
table td {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* 清除可能的空白问题 */
.card > .table-wrap,
.card > .list-container,
.card > .chart-box,
.card > .chart-box-sm {
    width: 100% !important;
    max-width: 100% !important;
}

/* iframe 自适应 */
iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* 表单容器修复 */
.form-group,
.form-actions,
.contact-form {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Grid 布局修复 - 确保子元素填满 */
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.stat-grid > *,
.content-grid > *,
.services-grid > *,
.team-grid > *,
.projects-grid > *,
.news-grid > *,
.enterprise-grid > *,
.consult-grid > *,
.packages-grid > * {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Hero 和页面头部容器修复 */
.hero,
.hero-content,
.hero-login,
.page-banner,
.page-banner .banner-content {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Footer 修复 */
footer,
.footer-content,
.footer-grid {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- 智能客服对话窗口 - 基础显示控制 ---------- */
.chat-window { display: none; }
.chat-window.open { display: block; }

/* ---------- 汉堡菜单按钮（移动端可见） ---------- */
.mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    z-index: 1100;
}
.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #000;
    transition: all 0.3s ease;
    border-radius: 2px;
}
.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}
.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ---------- 通用移动菜单按钮 ---------- */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #000;
    padding: 8px;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

/* ---------- 移动端导航遮罩 ---------- */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    backdrop-filter: blur(2px);
}
.nav-overlay.show { display: block; }

/* ============================================
   平板 (≤1024px)
   策略：容器缩小 + 字体等比缩小
   ============================================ */
@media (max-width: 1024px) {
    .container { padding: 0 24px; max-width: 100%; }
    header, .header-scrolled { height: 80px; }
    header .logo { font-size: 24px; }
    section, .section { padding: 70px 0; }
    .section-title { font-size: 32px; }
}

/* ============================================
   平板手机 (≤992px)
   策略：出现汉堡菜单、顶部条隐藏、导航改为抽屉式
   ============================================ */
@media (max-width: 992px) {
    /* 顶部服务热线条隐藏（手机端节省空间） */
    .top-bar { display: none !important; }

    /* Header 固定到屏幕顶部 top:0，添加滚动过渡 */
    header, .header-scrolled {
        height: 60px !important;
        top: 0 !important;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    background-color 0.3s ease,
                    box-shadow 0.3s ease,
                    transform 0.3s ease !important;
        will-change: height, background-color;
    }
    /* 滚动时 Header 添加阴影和背景 */
    header.scrolled {
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
    /* Header 隐藏（向上滚动时） */
    header.hidden {
        transform: translateY(-100%) !important;
    }
    header .logo {
        font-size: 22px;
        padding-bottom: 16px;
        line-height: 1.2;
        min-width: 80px;
    }
    header .logo::after {
        bottom: 12px;
        height: 2px;
    }
    header .logo::before {
        font-size: 10px !important;
        white-space: nowrap !important;
        bottom: 0 !important;
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
    }

    /* 汉堡菜单按钮可见 */
    .mobile-toggle { display: flex !important; }
    .mobile-menu-btn { display: flex !important; }
    .search-box { display: none !important; }

    /* ---------- 粒子特效降级（移动端性能优化） ---------- */
    #particles-canvas {
        opacity: 0.3 !important;
    }

    /* ---------- 横幅（page-banner）完整金色效果 ---------- */
    /* 覆盖页面内联 @media 992px 去掉金色渐变的样式 */
    [class*="page-banner"] {
        height: 400px !important;
        overflow: hidden !important;
    }
    [class*="page-banner"] .banner-overlay {
        background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.12) 0%, transparent 65%) !important;
    }
    [class*="page-banner"] h1 {
        font-size: 28px !important;
        background: linear-gradient(90deg, #FFD700, #FFF, #FFD700) !important;
        background-size: 200% auto !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        color: transparent !important;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease-out 0.3s forwards, gradientShine 3s ease-in-out 1.3s infinite !important;
    }
    [class*="page-banner"] .banner-subtitle {
        font-size: 15px !important;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease-out 0.6s forwards !important;
    }
    .page-banner .banner-divider,
    .consult-banner .banner-divider,
    [class*="banner"] .banner-divider {
        width: 120px !important;
        height: 3px !important;
        max-height: 3px !important;
        min-height: 3px !important;
        line-height: 3px !important;
        font-size: 0 !important;
        display: block !important;
        border-radius: 2px !important;
        margin: 16px auto !important;
        transform-origin: center center !important;
        transform: scaleX(0);
        animation: dividerExpand 1.2s ease-out 0.9s forwards !important;
    }

    /* consult-banner 保持原有紫蓝色效果 */
    .consult-banner h1 {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        background-clip: initial !important;
        color: #FFFFFF !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .consult-banner {
        height: 350px !important;
    }

    /* ---------- 导航抽屉化（必须覆盖页面内联 display:none） ---------- */
    .nav-menu {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        flex-direction: column !important;
        padding: 16px 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        z-index: 1050 !important;
        transform: translateY(-120%);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s ease, visibility 0.3s, opacity 0.3s;
    }
    .nav-menu.show,
    .nav-menu.active {
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .nav-item { margin: 0 !important; width: 100% !important; }
}

/* ============================================
   手机 (≤768px) - 手机端独立设计方案
   策略：为手机端单独设计布局，不照搬PC端
   - Hero 高度 auto + 内容上下堆叠（文字上、登录表单下）
   - 多列网格全部改单列（手机屏宽不够）
   - 卡片纵向排列 + 适当间距
   - 字号/间距/按钮尺寸均为手机阅读优化
   ============================================ */
@media (max-width: 768px) {
    .container { padding: 0 16px; }

    /* ============ Header 滚动过渡优化 ============ */
    header, .header-scrolled {
        height: 68px !important;
        top: 0 !important;
        transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    background-color 0.25s ease,
                    box-shadow 0.25s ease,
                    transform 0.25s ease !important;
        will-change: height, transform;
    }
    header.scrolled {
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1) !important;
    }
    /* 滚动时 Header 微微下移 */
    header.scrolled .logo {
        transform: scale(0.95);
        transition: transform 0.25s ease;
    }
    header .logo {
        font-size: 20px;
        padding-bottom: 16px;
        line-height: 1.2;
        min-width: 72px;
    }
    header .logo::after {
        bottom: 12px;
        height: 2px;
    }
    header .logo::before {
        font-size: 9px !important;
        white-space: nowrap !important;
        bottom: 0 !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
    }

    /* ============ 粒子特效进一步降级 ============ */
    #particles-canvas {
        opacity: 0.15 !important;
        pointer-events: none !important;
    }

    /* ============ 光标特效隐藏 ============ */
    .cursor-glow,
    .cursor-dot {
        display: none !important;
    }

    /* ============ Hero 区域 - 手机端独立设计 ============ */
    .hero {
        height: auto !important;              /* 取消 100vh，让内容自适应 */
        min-height: 0 !important;
        padding: 92px 0 40px !important;       /* 顶部留 68px header + 24px 留白 */
        display: block !important;              /* 取消 flex 居中，改为标准流 */
    }
    .hero::before { display: block !important; }
    .hero .container { width: 100% !important; padding: 0 16px !important; }

    /* hero-content 由 PC 的「左右两栏」改为「上下堆叠」 */
    .hero-content {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: stretch !important;
    }
    .hero-text {
        text-align: center !important;
        padding: 0 8px;
    }
    .hero-title, [class*="hero"] h1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }
    .hero-subtitle, [class*="hero"] p {
        font-size: 14px !important;
        margin-bottom: 24px !important;
        max-width: 100% !important;
    }
    /* Hero 按钮水平排列（两个按钮一行，符合手机习惯） */
    .hero-buttons {
        justify-content: center !important;
        gap: 12px !important;
        flex-wrap: wrap;
    }
    .hero-buttons .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* 登录表单 - 铺满宽度，移到 Hero 内容下方 */
    .hero-login {
        justify-content: center !important;
        width: 100% !important;
    }
    .login-container {
        max-width: 100% !important;
        padding: 24px 20px !important;
        margin: 0 auto;
    }
    .login-tabs .tab {
        font-size: 15px !important;
        padding: 12px 8px !important;
    }
    .login-container input {
        padding: 14px 16px !important;
        font-size: 16px !important;
        margin-bottom: 14px !important;
    }

    /* ============ 详情页 Banner - 保持完整金色效果 ============ */
    [class*="page-banner"] {
        margin-top: 68px !important;
        height: 300px !important;
        min-height: 300px !important;
        overflow: hidden !important;
    }
    [class*="page-banner"] .banner-overlay {
        background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.12) 0%, transparent 65%) !important;
    }
    [class*="page-banner"] h1 {
        font-size: 24px !important;
        background: linear-gradient(90deg, #FFD700, #FFF, #FFD700) !important;
        background-size: 200% auto !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        color: transparent !important;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease-out 0.3s forwards, gradientShine 3s ease-in-out 1.3s infinite !important;
        line-height: 1.3 !important;
    }
    [class*="page-banner"] .banner-subtitle {
        font-size: 14px !important;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease-out 0.6s forwards !important;
    }
    .page-banner .banner-divider,
    .consult-banner .banner-divider,
    [class*="banner"] .banner-divider {
        width: 120px !important;
        height: 3px !important;
        max-height: 3px !important;
        min-height: 3px !important;
        line-height: 3px !important;
        font-size: 0 !important;
        display: block !important;
        border-radius: 2px !important;
        margin: 14px auto !important;
        transform-origin: center center !important;
        transform: scaleX(0);
        animation: dividerExpand 1.2s ease-out 0.9s forwards !important;
    }

    /* consult-banner 保持原有紫蓝色效果 */
    .consult-banner {
        height: 320px !important;
    }
    .consult-banner h1 {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        background-clip: initial !important;
        color: #FFFFFF !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* ============ 内容区 ============ */
    .news-page, .news-detail-page,
    [class*="page-wrap"], [class*="page-content"] {
        padding-top: 24px !important;
    }

    /* ============ Section 间距 ============ */
    section, .section { padding: 40px 0 !important; }
    .section-header { margin-bottom: 24px !important; padding: 0 4px; }
    .section-title { font-size: 22px !important; }
    .section-subtitle { font-size: 12px !important; }
    .section-description { font-size: 13px !important; }

    /* ============ 网格布局 - 全部改单列（手机屏宽不够）============ */
    [class*="grid-2"], [class*="grid-3"], [class*="grid-4"],
    [class*="projects-grid"], [class*="services-grid"], [class*="team-grid"],
    [class*="member-grid"], [class*="cards"], [class*="card-list"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    [class*="grid-2"] > *, [class*="grid-3"] > *, [class*="grid-4"] > *,
    .project-card, .service-card, .team-member, [class*="card"] {
        width: 100% !important;
        margin-bottom: 16px;
    }

    /* ============ 卡片 ============ */
    .card, [class*="card"], .project-content {
        padding: 16px !important;
    }

    /* ============ 数据统计区 - 改 2 列 ============ */
    .stats, [class*="stats"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
    .stat-item, [class*="stat-item"] {
        text-align: center;
    }
    .stat-item::after { display: none !important; }
    .stat-number, [class*="stat-number"] {
        font-size: 28px !important;
    }
    .stat-plus, [class*="stat-plus"] {
        font-size: 28px !important;
    }
    .stat-label, [class*="stat-label"] {
        font-size: 11px !important;
    }

    /* ============ 正文文字 ============ */
    p, li, td, th, [class*="text"] {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    h2 { font-size: 22px !important; }
    h3, [class*="title-sm"] { font-size: 17px !important; }
    h4 { font-size: 15px !important; }

    /* ============ 按钮 ============ */
    .btn, button, [class*="btn"] {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }

    /* ============ iOS 防止 input 自动缩放 ============ */
    input, textarea, select,
    [class*="form"] input, [class*="form"] textarea {
        font-size: 16px !important;
    }

    /* ============ 导航下拉菜单 ============ */
    .nav-item.dropdown .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 0 0 20px !important;
        min-width: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease !important;
    }
    .nav-item.dropdown.open .dropdown-menu { max-height: 500px !important; }

    /* ============ 浮动客服按钮 - 移到右下角，不挡中间内容 ============ */
    [class*="chat-widget"], [class*="customer-service"], [class*="floating-btn"] {
        right: 12px !important;
        bottom: 80px !important;
        top: auto !important;
        transform: none !important;
        gap: 10px !important;
    }
    /* ============ 扫码联系 + 智能客服 两个按钮统一尺寸 ============ */
    .qrcode-toggle, .chat-toggle {
        width: 52px !important;
        height: 52px !important;
        padding: 10px !important;
        border-radius: 50% !important;
        flex-direction: column !important;
        gap: 2px !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .qrcode-toggle span, .chat-toggle span {
        display: none !important;
    }
    .qrcode-toggle .qrcode-arrow, .chat-toggle .qrcode-arrow {
        display: none !important;
    }
    .qrcode-toggle i:first-child, .chat-toggle i:first-child {
        font-size: 18px !important;
        margin: 0 !important;
    }
    /* 二维码面板位置适配 - 避免被按钮遮挡 */
    .qrcode-panel {
        width: 200px !important;
        position: fixed !important;
        right: 76px !important;
        top: auto !important;
        bottom: 80px !important;
        transform: none !important;
    }

    /* ============ 智能客服对话窗口 - 手机端全屏弹窗 ============ */
    .chat-window {
        position: fixed !important;
        right: 12px !important;
        bottom: 140px !important;
        top: auto !important;
        left: 12px !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        max-height: calc(100vh - 200px) !important;
        height: calc(100vh - 200px) !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        z-index: 10000 !important;
        display: none !important;
    }
    .chat-window.open {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Chat Header */
    .chat-header {
        padding: 12px 16px !important;
        flex-shrink: 0;
    }
    .chat-title {
        font-size: 14px !important;
        gap: 8px !important;
    }
    .chat-title i {
        font-size: 16px !important;
    }
    .chat-close {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Chat Messages - 占据剩余空间 */
    .chat-messages {
        flex: 1 !important;
        height: auto !important;
        min-height: 200px !important;
        max-height: none !important;
        padding: 12px !important;
        overflow-y: auto !important;
    }
    .chat-message {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }
    .chat-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .chat-content {
        max-width: 80% !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    /* Contact Form (留电咨询面板) */
    .contact-form {
        padding: 14px !important;
    }
    .contact-form input,
    .contact-form textarea {
        font-size: 16px !important;
    }
    /* Chat Input Area */
    .chat-input-area {
        padding: 8px 10px !important;
        flex-shrink: 0;
    }
    .contact-btn {
        width: auto !important;
        min-width: 60px !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        gap: 3px !important;
    }
    .chat-input-area input {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    #chat-send {
        width: 36px !important;
        height: 36px !important;
    }

    /* ============ 新闻列表/团队卡片 - 改纵向 ============ */
    .news-card, .news-item, [class*="news"] > * {
        flex-direction: column !important;
    }
    .news-card img, .news-item img {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ============ Footer ============ */
    footer, [class*="footer"] {
        padding: 30px 0 16px !important;
        text-align: center;
    }
    footer .container > div,
    [class*="footer"] .container > div {
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* ============ Modal 弹窗 ============ */
    .modal, [class*="modal"], [class*="dialog"], [class*="popup"] {
        width: 92% !important;
        max-width: 92vw !important;
    }
}

/* ============================================
   小屏手机 (≤480px) - 进一步优化小屏体验
   ============================================ */
@media (max-width: 480px) {
    .container { padding: 0 12px; }

    /* Header 进一步缩小 */
    header, .header-scrolled {
        height: 62px !important;
    }
    header .logo {
        font-size: 17px;
        padding-bottom: 12px;
        line-height: 1.2;
        min-width: 62px;
    }
    header .logo::after {
        bottom: 9px;
        height: 2px;
    }
    header .logo::before {
        font-size: 8px !important;
        white-space: nowrap !important;
        bottom: 0 !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
    }

    /* Hero 区 */
    .hero {
        padding: 86px 0 32px !important;
    }
    .hero-title, [class*="hero"] h1 {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }
    .hero-subtitle, [class*="hero"] p {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
    .hero-buttons {
        gap: 8px !important;
    }
    .hero-buttons .btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    /* 登录表单 */
    .login-container {
        padding: 20px 16px !important;
    }
    .login-tabs .tab {
        font-size: 14px !important;
        padding: 10px 6px !important;
    }
    .login-container input {
        padding: 12px 14px !important;
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Banner 进一步缩 - 但保持完整金色效果 */
    [class*="page-banner"] {
        height: 260px !important;
        min-height: 260px !important;
        overflow: hidden !important;
    }
    [class*="page-banner"] .banner-overlay {
        background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.10) 0%, transparent 65%) !important;
    }
    [class*="page-banner"] h1 {
        font-size: 22px !important;
        background: linear-gradient(90deg, #FFD700, #FFF, #FFD700) !important;
        background-size: 200% auto !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        color: transparent !important;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease-out 0.3s forwards, gradientShine 3s ease-in-out 1.3s infinite !important;
        line-height: 1.3 !important;
    }
    [class*="page-banner"] .banner-subtitle {
        font-size: 13px !important;
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease-out 0.6s forwards !important;
    }
    .page-banner .banner-divider,
    .consult-banner .banner-divider,
    [class*="banner"] .banner-divider {
        width: 80px !important;
        height: 3px !important;
        max-height: 3px !important;
        min-height: 3px !important;
        line-height: 3px !important;
        font-size: 0 !important;
        display: block !important;
        border-radius: 2px !important;
        margin: 12px auto !important;
        transform-origin: center center !important;
        transform: scaleX(0);
        animation: dividerExpandSmall 1.2s ease-out 0.9s forwards !important;
    }

    /* consult-banner 保持原有紫蓝色效果 */
    .consult-banner {
        height: 280px !important;
    }
    .consult-banner h1 {
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
        background-clip: initial !important;
        color: #FFFFFF !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Section 间距最小化 */
    section, .section { padding: 30px 0 !important; }
    .section-header { margin-bottom: 20px !important; }
    .section-title { font-size: 20px !important; }
    .section-subtitle { font-size: 11px !important; }
    .section-description { font-size: 12px !important; }

    /* 数据统计 - 极小屏仍保持 2 列 */
    .stat-number, [class*="stat-number"] {
        font-size: 22px !important;
    }
    .stat-plus, [class*="stat-plus"] {
        font-size: 22px !important;
    }
    .stat-label, [class*="stat-label"] {
        font-size: 10px !important;
    }

    /* 卡片 */
    .card, [class*="card"], .project-content {
        padding: 14px !important;
    }

    /* 文字 */
    p, li, td, th, [class*="text"] {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
    h2 { font-size: 20px !important; }
    h3, [class*="title-sm"] { font-size: 16px !important; }
    h4 { font-size: 14px !important; }

    /* 按钮最小化 */
    .btn, button, [class*="btn"] {
        font-size: 13px !important;
        padding: 8px 16px !important;
    }

    /* 浮动客服按钮进一步缩小 - 保持两按钮一致 */
    [class*="chat-widget"], [class*="customer-service"], [class*="floating-btn"] {
        right: 8px !important;
        bottom: 70px !important;
        gap: 8px !important;
    }
    .qrcode-toggle, .chat-toggle {
        width: 46px !important;
        height: 46px !important;
        padding: 8px !important;
        border-radius: 50% !important;
        flex-direction: column !important;
        gap: 2px !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .qrcode-toggle i:first-child, .chat-toggle i:first-child {
        font-size: 16px !important;
    }
    .qrcode-panel {
        width: 180px !important;
        right: 64px !important;
        bottom: 70px !important;
    }

    /* ============ 智能客服对话窗口 - 小屏进一步优化 ============ */
    .chat-window {
        right: 8px !important;
        left: 8px !important;
        bottom: 120px !important;
        max-height: calc(100vh - 180px) !important;
        height: calc(100vh - 180px) !important;
    }
    .chat-header {
        padding: 10px 14px !important;
    }
    .chat-title {
        font-size: 13px !important;
    }
    .chat-messages {
        padding: 10px !important;
        min-height: 180px !important;
    }
    .chat-message {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    .chat-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    .chat-content {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .chat-input-area {
        padding: 6px 8px !important;
    }
    .contact-btn {
        min-width: 54px !important;
        font-size: 10px !important;
    }
    .chat-input-area input {
        font-size: 13px !important;
    }
}

/* ============================================
   横屏手机 (高度较短)
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { padding-top: 90px; }
    section, .section { padding: 30px 0; }
}

/* ============================================
   新闻板块手机端 - 让标题完整显示
   适用: news.html / news-detail.html
   ============================================ */
@media (max-width: 768px) {
    /* ============ 新闻列表页 (news.html) ============ */

    /* 轮播图 - 让标题完整显示 */
    .news-carousel {
        height: 220px !important;
    }
    .carousel-overlay {
        padding: 16px 14px !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%) !important;
    }
    .carousel-category {
        font-size: 10px !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
    }
    /* 轮播标题 - 字号缩小 + 行高增加 + 完整换行不截断 */
    .carousel-title {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        white-space: normal !important;
    }
    /* 轮播摘录 - 在手机端隐藏，给标题让位 */
    .carousel-excerpt {
        display: none !important;
    }
    .carousel-date {
        font-size: 11px !important;
    }
    /* 轮播按钮缩小 */
    .carousel-prev, .carousel-next {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .carousel-prev { left: 8px !important; }
    .carousel-next { right: 8px !important; }

    /* ============ 新闻卡片 - 标题完整显示 ============ */
    .news-list {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .news-card {
        display: flex !important;
        flex-direction: column !important;
    }
    .news-card-image {
        height: 160px !important;
    }
    .news-card-content {
        padding: 14px !important;
    }
    .news-card-category {
        font-size: 10px !important;
        padding: 3px 10px !important;
        margin-bottom: 8px !important;
    }
    /* 卡片标题 - 字号缩小但完整显示，不截断 */
    .news-card-title {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        white-space: normal !important;
    }
    /* 卡片摘录 - 减少行数到 2 行，给标题让位 */
    .news-card-excerpt {
        font-size: 13px !important;
        line-height: 1.55 !important;
        -webkit-line-clamp: 2 !important;
        margin-bottom: 10px !important;
    }
    .news-card-date {
        font-size: 11px !important;
    }

    /* 筛选按钮 - 横向滚动避免换行挤压 */
    .news-filters {
        justify-content: flex-start !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .filter-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        flex-shrink: 0;
    }

    /* ============ 新闻详情页 (news-detail.html) ============ */

    /* 详情页容器 */
    .news-detail-page {
        padding: 24px 0 !important;
    }
    .news-detail {
        padding: 16px !important;
    }
    /* 详情页主标题 - 字号缩小但完整显示 */
    .news-detail-title {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 14px !important;
        word-break: break-word !important;
        overflow: visible !important;
        display: block !important;
        white-space: normal !important;
    }
    .news-detail-category {
        font-size: 10px !important;
        padding: 3px 10px !important;
        margin-bottom: 12px !important;
    }
    .news-detail-meta {
        font-size: 12px !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
        padding-bottom: 14px !important;
        flex-wrap: wrap !important;
    }
    .news-detail-image {
        max-height: 240px !important;
        margin-bottom: 20px !important;
    }
    .news-detail-content {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .news-detail-content p {
        margin-bottom: 14px !important;
    }
    .news-detail-content h2 {
        font-size: 18px !important;
        margin: 20px 0 10px 0 !important;
    }
    .news-detail-content h3 {
        font-size: 16px !important;
        margin: 16px 0 8px 0 !important;
    }
    .news-detail-content ul, .news-detail-content ol {
        margin-left: 20px !important;
        margin-bottom: 14px !important;
    }
}

/* ============================================
   小屏手机 (≤480px) - 新闻板块进一步优化
   ============================================ */
@media (max-width: 480px) {
    /* 轮播图 */
    .news-carousel {
        height: 180px !important;
    }
    .carousel-overlay {
        padding: 12px 10px !important;
    }
    .carousel-title {
        font-size: 14px !important;
    }

    /* 新闻卡片 */
    .news-card-image {
        height: 140px !important;
    }
    .news-card-content {
        padding: 12px !important;
    }
    .news-card-title {
        font-size: 15px !important;
    }
    .news-card-excerpt {
        font-size: 12px !important;
        -webkit-line-clamp: 2 !important;
    }

    /* 详情页 */
    .news-detail {
        padding: 14px !important;
    }
    .news-detail-title {
        font-size: 18px !important;
    }
    .news-detail-content {
        font-size: 13px !important;
    }
}

/* ============================================
   iPad 横屏特殊处理
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .container { max-width: 960px; }
}

/* ============================================
   打印样式
   ============================================ */
@media print {
    .mobile-toggle, .nav-overlay, .top-bar { display: none !important; }
    header { position: static !important; }
    body { overflow: visible !important; }
}

/* ============================================
   管理后台 (admin.html) 专用
   ============================================ */
@media (max-width: 768px) {
    .admin-container { flex-direction: column; height: auto; min-height: 100vh; }
    .admin-container .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 220px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 0 0 30px rgba(0,0,0,0.3);
    }
    .admin-container .sidebar.mobile-open { transform: translateX(0); }
    .admin-container .main-content { flex: 1; min-height: 100vh; }
    .admin-container .top-bar { padding: 0 12px; flex-wrap: wrap; height: auto; min-height: 50px; display: flex !important; }
    .admin-container .content-area { padding: 12px; }
    .admin-container .card { padding: 16px; margin-bottom: 12px; }
    .admin-container .card-title { font-size: 14px; }
    .admin-container .form-group input,
    .admin-container .form-group select { font-size: 16px; }
    .admin-container .list-container table { font-size: 12px; }
    .admin-container .list-container table th,
    .admin-container .list-container table td { padding: 8px 10px; }
}

/* ============================================
   团队业绩页 (performance) 补充
   ============================================ */
@media (max-width: 768px) {
    body { overflow-y: auto !important; }
    .app { height: auto; min-height: 100vh; }
}

/* ============================================
   通用表格适配
   ============================================ */
@media (max-width: 768px) {
    .table-wrap, table { font-size: 12px; }
    table th, table td { padding: 8px 10px; }
    
    /* 确保表格容器填满 */
    .table-wrap { width: 100% !important; display: block !important; }
    .list-container { width: 100% !important; display: block !important; }
    .list-table { width: 100% !important; table-layout: fixed !important; }
    
    /* 表格单元格文字换行 */
    td, th { word-break: break-word; white-space: normal; }
    
    /* 后台管理表格适配 */
    .admin-container .list-table { font-size: 11px; }
    .admin-container .list-table th,
    .admin-container .list-table td { 
        padding: 6px 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================
   新闻详情页 nav-links 下拉式导航
   ============================================ */
@media (max-width: 992px) {
    .nav-links {
        display: flex !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        flex-direction: column !important;
        padding: 16px 20px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        transform: translateY(-120%);
        transition: transform 0.3s ease, visibility 0.3s, opacity 0.3s;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        z-index: 1050 !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        gap: 0 !important;
    }
    .nav-links.show,
    .nav-links.active {
        transform: translateY(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .nav-links a {
        padding: 12px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        width: 100% !important;
        display: block !important;
    }
    .nav-links a:last-child { border-bottom: none !important; }

    .header-container { flex-wrap: wrap; }
    .header-container .logo { font-size: 20px; }
    .search-box { display: none !important; }
}

/* ============================================
   新闻相关页面补充
   ============================================ */
@media (max-width: 768px) {
    .page-title {
        padding: 30px 12px 20px;
        text-align: center;
    }
    .page-title h1 { font-size: 24px; }
    .page-title p { font-size: 13px; }

    .news-detail { padding: 12px; }
    .news-detail h1 { font-size: 22px; }
    .news-detail .content { font-size: 14px; line-height: 1.7; }
    .news-detail img { width: 100%; height: auto; }

    .contact-form, .consult-form {
        padding: 16px;
    }
    .contact-form .form-group, .consult-form .form-group {
        margin-bottom: 12px;
    }
}

/* ============================================
   滚动条美化（移动端隐藏）
   ============================================ */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 0; height: 0; }
    * { scrollbar-width: none; }
}

/* ============================================
   滚动淡入动画 (Scroll Reveal)
   为 .reveal 类元素添加进入视口动画
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* 移动端滚动淡入优化 - 更小的位移和更快的动画 */
@media (max-width: 768px) {
    .reveal, .reveal-left, .reveal-right {
        transform: translateY(20px);
        transition-duration: 0.45s;
    }
    .reveal-left { transform: translateX(-20px); }
    .reveal-right { transform: translateX(20px); }
    .reveal-scale {
        transform: scale(0.95);
        transition-duration: 0.4s;
    }
}

/* ============================================
   移动端触摸优化
   ============================================ */
@media (hover: none) {
    /* 移除 hover 效果，使用 active 状态 */
    .btn:active,
    .project-card:active,
    .service-card:active {
        transform: scale(0.97) !important;
    }
    
    /* 增加触摸区域（最小 44px） */
    .nav-link, .btn, button, a, input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 防止点击时文字被选中 */
    .mobile-toggle, .mobile-menu-btn, .chat-toggle, .qrcode-toggle,
    [class*="toggle"], [class*="btn"] {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    
    /* 触摸时的高亮反馈 */
    .nav-link:active,
    .btn:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }
}

/* ============================================
   移动端滚动性能优化
   ============================================ */
@media (max-width: 768px) {
    /* 使用 translate 而非 top/left 触发 GPU 加速 */
    header, .nav-menu, .chat-window {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    /* 滚动时冻结背景，提升性能 */
    #particles-canvas {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        will-change: auto !important;
    }
    
    /* 减少动画 */
    .reveal, .reveal-left, .reveal-right, .reveal-scale {
        transition-duration: 0.3s !important;
    }
}

/* ============================================
   触摸优化（最小 44px 触控区域）
   ============================================ */
@media (max-width: 768px) {
    .btn, button, a, [class*="btn"] {
        min-height: 44px;
        min-width: 44px;
    }
    .nav-item, .menu-item {
        min-height: 44px;
    }
}

/* ============================================
   高分屏优化
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2) {
    .logo::after, .section-title::after {
        height: 1.5px;
    }
}

/* ============================================
   Banner 动画关键帧（确保所有页面可用）
   ============================================ */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShine {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 120px;
    }
}

@keyframes dividerExpand {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes dividerExpandSmall {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* consult-banner 字符动画关键帧 */
@keyframes consultCharFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}