/**
 * 移动端适配样式
 * 完美适配手机、平板等移动设备
 * ============================================
 */

/* ============================================
   响应式断点体系
   xs: 0-479px (小手机)
   sm: 480-767px (大手机)
   md: 768-1023px (平板竖屏)
   lg: 1024px+ (桌面)
   ============================================ */

/* ============================================
   1. 字体缩放系统 - 所有手机
   ============================================ */
@media (max-width: 767px) {
    html {
        font-size: 14px;
    }
    
    /* 标题层级缩放 */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    h4 {
        font-size: 1.1rem !important;
    }
    
    p, li {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }
    
    /* Tailwind 大号文字缩放 */
    .text-7xl, .text-6xl {
        font-size: 2.5rem !important;
    }
    
    .text-5xl {
        font-size: 2rem !important;
    }
    
    .text-4xl {
        font-size: 1.75rem !important;
    }
    
    .text-3xl {
        font-size: 1.5rem !important;
    }
    
    .text-2xl {
        font-size: 1.25rem !important;
    }
    
    .text-xl {
        font-size: 1.1rem !important;
    }
}

/* 小手机额外缩放 */
@media (max-width: 479px) {
    html {
        font-size: 13px;
    }
    
    h1 {
        font-size: 1.75rem !important;
    }
    
    .text-7xl, .text-6xl, .text-5xl {
        font-size: 2rem !important;
    }
}

/* ============================================
   2. 间距优化系统
   ============================================ */
@media (max-width: 767px) {
    /* Section 垂直间距 */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* 取消带有 .max-w-7xl 的 section 水平内边距，避免与子容器叠加（保持首屏 #hero 原样） */
    #workflow-loop,
    #scenarios,
    #capabilities,
    #deployment-security {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 容器水平间距 */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        max-width: 100% !important;
    }
    
    /* 卡片内边距 */
    .copilot-card,
    .illu-card,
    .ice-card,
    .glass-card,
    .feishu-glass {
        padding: 1.25rem !important;
        margin: 0.75rem !important;
    }
    
    /* 网格间距 */
    .grid {
        gap: 1rem !important;
    }
    
    .flex {
        gap: 0.75rem !important;
    }
    
    /* 按钮尺寸 */
    .btn,
    button,
    a.btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
        min-height: 44px; /* iOS 推荐触摸尺寸 */
    }

    /* 顶部公告条关闭钮：不套用上面的大块 padding，否则在固定 26px 内盒下内容区为负，图标被压没 */
    .top-banner-close {
        padding: 0 !important;
        min-height: 0 !important;
    }

    .top-banner-close svg {
        flex-shrink: 0;
    }
}

@media (max-width: 479px) {
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .max-w-7xl,
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ≤479px：父级 max-w-7xl 左右 padding 已为 1rem，与 download 导航一致，CTA 无需再负边距 */
    #hero .hero-cta-row.flex {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   3. 导航栏移动端适配（与 download.html 一致：全宽 + px-4、内条与字号）
   ============================================ */
@media (max-width: 767px) {
    #main-nav {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box;
    }

    #main-nav > div {
        margin-top: 0.625rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        border-radius: 1rem !important;
    }

    #main-nav .logo-avatar {
        width: 26px !important;
        height: 26px !important;
    }

    #main-nav .text-xl {
        font-size: 0.9rem !important;
    }

    /* 隐藏桌面导航项 */
    #main-nav .hidden.md\\:flex,
    #main-nav .desktop-only {
        display: none !important;
    }
}

/* ============================================
   4. 首屏 Hero 优化（参考 download.html #dl-hero 的精炼移动样式）
   ============================================ */
@media (max-width: 767px) {
    #hero {
        min-height: 100svh !important;
        /* banner(~38px) + nav偏移(12px) + nav高度(~52px) + 余量 ≈ 110px；
           收紧到 6.75rem(108px)，与下载页 6.5rem 节奏对齐，又给 banner 留一点空间 */
        padding-top: 6.75rem !important;
        padding-bottom: 2.5rem !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* 背景光晕：关闭动画节省性能，但保留足够透明度让色彩晕渲可见 */
    #hero .mesh-gradient-container .animate-blob {
        animation: none !important;
        opacity: 0.2 !important;
    }
    #hero .noise-overlay {
        opacity: 0.4 !important;
    }

    /* 标签行收紧：与标题之间间距 mb-6 -> 1rem */
    #hero .hero-tags-row {
        margin-bottom: 1rem !important;
    }

    /* 主标题：更紧凑 */
    #hero h1 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }

    /* 取消 h1 内部包裹层的额外下间距（桌面端 mb-6） */
    #hero h1 > div.relative {
        margin-bottom: 0 !important;
    }

    /* 副标题块外间距收紧（桌面 mb-8 -> 1.25rem） */
    #hero h1 + .max-w-4xl,
    #hero .max-w-4xl.mx-auto.mb-8 {
        margin-bottom: 1.25rem !important;
    }

    /* 副标题文字 */
    #hero p.text-xl,
    #hero p.text-lg {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    /* CTA 按钮组（非首屏 CTA 行仍用 100% 铺满内容区） */
    #hero .flex.gap-4,
    #hero .flex.gap-6 {
        flex-direction: column !important;
        gap: 0.625rem !important;
        align-items: stretch !important;
    }

    #hero .flex.gap-4:not(.hero-cta-row),
    #hero .flex.gap-6:not(.hero-cta-row) {
        width: 100% !important;
    }

    /*
     * 父级 flex-col + items-center + px-6(1.5rem)；顶栏为 px-4(1rem) 内玻璃条。
     * align-self:stretch + 每侧 -0.5rem，使按钮区左缘与顶栏内条左缘同为视口 1rem。
     */
    #hero .hero-cta-row.flex {
        align-self: stretch !important;
        width: auto !important;
        max-width: none !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        gap: 0.625rem !important;
        box-sizing: border-box;
    }

    /* CTA 按钮：与 download 页 #dl-hero 一致 — 主 text-base/粗体、次 text-sm/semibold；覆盖全局 button 0.9rem */
    #hero .hero-cta-row button,
    #hero .hero-cta-row a {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.875rem 1.5rem !important;
        border-radius: 1rem !important;
    }

    #hero .hero-cta-row button:first-of-type {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }

    #hero .hero-cta-row button:last-of-type {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }

    #hero button,
    #hero a.btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* 弱化背景网格，保留 canvas 一定可见度 */
    #hero .bg-grid {
        opacity: 0.15 !important;
    }
    #singularity-canvas {
        opacity: 0.5 !important;
    }

    #hero .aura-blob,
    #hero .ambient-orb {
        display: none !important;
    }
}

@media (max-width: 479px) {
    #hero {
        padding-top: 6.25rem !important;
    }
    #hero h1 {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 767px) {
    #hero .hero-title-text {
        font-size: clamp(1.75rem, 7.6vw, 2.25rem) !important;
        letter-spacing: -0.04em !important;
        line-height: 1.1 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #hero .hero-title-badge {
        display: none !important;
    }
}

/* ============================================
   5. 性能优化 - 减少动画和模糊
   ============================================ */
@media (max-width: 767px) {
    /* 降低 backdrop-filter（耗性能） */
    .ice-glass,
    .feishu-glass,
    .glass-premium,
    .glass-card,
    .copilot-card,
    .illu-card,
    .illu-glass-card {
        backdrop-filter: blur(8px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    }
    
    /* 简化背景光晕 */
    .aura-blob,
    .ambient-orb {
        filter: blur(40px) !important;
        opacity: 0.05 !important;
    }
    
    /* 禁用复杂无限循环动画 */
    .animate-blob,
    .animate-float,
    .animate-pulse-slow {
        animation: none !important;
    }
    
    /* 禁用视差效果 */
    .parallax-bg {
        transform: none !important;
    }
    
    /* 简化滚动揭示动画：统一收敛为向上滑入，减小位移距离 */
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right {
        transform: translateY(20px) !important;
        transition-duration: 0.4s !important;
    }

    /* 补齐 revealed 最终态：确保 !important 不阻止动画归位 */
    .scroll-reveal.revealed,
    .scroll-reveal-left.revealed,
    .scroll-reveal-right.revealed {
        transform: translateY(0) !important;
    }
    
    .scroll-reveal-blur {
        filter: blur(10px) !important;
        transform: translateY(20px) !important;
    }

    .scroll-reveal-blur.revealed {
        filter: blur(0) !important;
        transform: translateY(0) !important;
    }
    
    /* 禁用 3D 变换 */
    .card-float-in {
        transform: translateY(30px) !important;
    }

    .card-float-in.revealed {
        transform: translateY(0) !important;
    }
    
    /* 降低阴影复杂度 */
    .shadow-2xl {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 隐藏纯装饰性元素 */
    .glow-orb-engine,
    .noise-overlay,
    .grain-overlay,
    .inst-floater,
    .floating-ui {
        display: none !important;
    }
}

/* ============================================
   6. 网格布局适配
   ============================================ */
@media (max-width: 767px) {
    /* 多列网格转单列 */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\\:grid-cols-2,
    .md\\:grid-cols-3,
    .lg\\:grid-cols-2,
    .lg\\:grid-cols-3,
    .lg\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Flex 布局转竖向 */
    .flex-row {
        flex-direction: column !important;
    }
    
    /* 特性卡片堆叠 */
    #features .grid,
    .feature-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* 统计卡片堆叠 */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   7. 对比滑块触摸优化
   ============================================ */
@media (max-width: 767px) {
    .comparison-container {
        height: 450px !important;
        border-radius: 1.5rem !important;
    }
    
    /* 增大触摸区域 */
    .slider-handle {
        width: 44px !important; /* iOS 推荐最小 44x44 */
    }
    
    .slider-button {
        width: 48px !important;
        height: 48px !important;
    }
    
    /* 标签调整 */
    .slider-label {
        font-size: 0.55rem !important;
        padding: 6px 10px !important;
        bottom: 1rem !important;
    }
    
    .slider-label-left {
        left: 1rem !important;
    }
    
    .slider-label-right {
        right: 1rem !important;
    }
}

@media (max-width: 479px) {
    .comparison-container {
        height: 350px !important;
        border-radius: 1rem !important;
    }
    
    .slider-label {
        font-size: 0.5rem !important;
        padding: 4px 8px !important;
    }
}

/* ============================================
   8. 复杂插画区域适配
   ============================================ */
@media (max-width: 767px) {
    /* 建模插画舞台缩放 */
    #stage {
        width: 100% !important;
        height: 380px !important;
        transform: scale(0.85) !important;
        transform-origin: top center !important;
    }
    
    .inst-stage {
        height: 360px !important;
        border-radius: 16px !important;
        padding: 15px !important;
    }
    
    /* 玻璃包裹器动画优化 */
    .inst-glass-wrapper {
        animation-duration: 8s !important;
    }
    
    /* 侧边栏缩小 */
    .inst-glass-sidebar,
    .inst-sketch-sidebar {
        width: 120px !important;
    }
    
    /* 导航栏高度 */
    .inst-glass-nav,
    .inst-sketch-nav {
        height: 40px !important;
    }
    
    /* Logo 尺寸 */
    .inst-logo-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }
    
    /* 隐藏浮动装饰 */
    .inst-floater {
        display: none !important;
    }
}

@media (max-width: 479px) {
    #stage {
        height: 300px !important;
        transform: scale(0.75) !important;
    }
    
    .inst-stage {
        height: 280px !important;
    }
}

/* ============================================
   9. Preview 桌面预览区适配
   ============================================ */
@media (max-width: 1023px) {
    /* 平板和手机：缩放桌面预览 */
    #preview-5 .stage,
    #preview-6 .stage {
        transform: scale(0.6) !important;
        transform-origin: top center !important;
    }
}

@media (max-width: 767px) {
    /* 手机：进一步缩放 */
    #preview-5 .stage,
    #preview-6 .stage {
        transform: scale(0.4) !important;
    }
    
    /* 或者隐藏移动端版本预览（避免重复） */
    #preview-5 .mobile-layer,
    #preview-6 .mobile-layer {
        display: none !important;
    }
}

@media (max-width: 479px) {
    /* 小屏幕：可选择完全隐藏复杂预览 */
    #preview-5,
    #preview-6 {
        display: none !important;
    }
}

/* ============================================
   10. 表单和输入优化
   ============================================ */
@media (max-width: 767px) {
    /* 输入框字体 >= 16px 防止 iOS 自动缩放页面 */
    input,
    textarea,
    select,
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"] {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    
    /* 模态框适配 */
    .modal-layer {
        position: fixed !important;
        left: 1rem !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        max-width: 90vw !important;
    }
    
    /* 表单组间距 */
    .form-group {
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   11. 特性和功能卡片优化
   ============================================ */
@media (max-width: 767px) {
    /* 卡片 hover 效果简化（触摸设备） */
    .copilot-card:hover,
    .illu-card:hover,
    .ice-card:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
    
    /* 图标尺寸 */
    .feature-icon,
    .step-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Tab 列表 */
    .step-tab {
        padding: 1rem !important;
    }
    
    .step-tab.active {
        transform: translateX(2px) !important;
    }
}

/* ============================================
   12. 部署方案卡片
   ============================================ */
@media (max-width: 767px) {
    #deployment-security .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .deployment-card {
        padding: 1.5rem !important;
    }
}

/* ============================================
   13. 生命周期循环图
   ============================================ */
@media (max-width: 767px) {
    .lifecycle-section .relative {
        padding: 2rem 1rem !important;
    }
    
    /* 循环图缩放或重新布局 */
    .lifecycle-diagram {
        transform: scale(0.8) !important;
    }
}

/* ============================================
   14. 页脚优化
   ============================================ */
@media (max-width: 767px) {
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    footer .flex {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ============================================
   15. 表格响应式处理
   ============================================ */
@media (max-width: 767px) {
    /* 表格容器横向滚动 */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table {
        min-width: 600px !important;
    }
    
    /* 或者转为卡片布局 */
    .table-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 1rem !important;
        gap: 0.5rem !important;
    }
}

/* ============================================
   16. 浏览器模拟框
   ============================================ */
@media (max-width: 767px) {
    .browser-mockup {
        border-radius: 0.75rem !important;
    }
    
    .browser-header {
        height: 32px !important;
        padding: 0 12px !important;
    }
    
    .dot {
        width: 6px !important;
        height: 6px !important;
    }
}

/* ============================================
   17. 滚动进度条
   ============================================ */
@media (max-width: 767px) {
    #scroll-progress {
        height: 2px !important;
    }
}

/* ============================================
   18. 触摸设备特定优化
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* 触摸设备：移除 hover 效果 */
    *:hover {
        transform: none !important;
    }
    
    /* 增加可点击区域 */
    a, button, .clickable {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 禁用磁吸效果 */
    .magnetic-grid-active {
        background-image: 
            linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px) !important;
    }
}

/* ============================================
   19. 平板竖屏特定优化
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 平板：2 列布局 */
    .grid-cols-3,
    .grid-cols-4,
    .lg\\:grid-cols-3,
    .lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    section {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    /*
     * 已移除对 .max-w-7xl 的全局 padding 注入，
     * 避免与 <section> 自带的 px-6 md:px-8 产生双重 padding。
     * 仅保留对 .container 的兜底，且去掉 !important。
     */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ============================================
   20. 横屏手机优化
   ============================================ */
@media (max-width: 926px) and (orientation: landscape) {
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    #hero {
        min-height: 100vh !important;
        padding-top: 3rem !important;
    }
    
    #hero h1 {
        font-size: 1.75rem !important;
    }
}

/* ============================================
   21. 禁用某些桌面特效
   ============================================ */
@media (max-width: 767px) {
    /* 禁用鼠标跟随效果 */
    [data-cursor-magnetic],
    .magnetic-element {
        pointer-events: auto !important;
    }
    
    /* 禁用复杂的鼠标悬停动画 */
    .group:hover .group-hover\\:scale-110 {
        transform: none !important;
    }
}

/* ============================================
   22. 性能优化 - will-change 清理
   ============================================ */
@media (max-width: 767px) {
    * {
        will-change: auto !important;
    }
    
    /* 仅保留关键动画元素 */
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right {
        will-change: opacity, transform;
    }
}

/* ============================================
   23. 安全区域适配（iPhone 刘海屏）
   ============================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    #main-nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    footer {
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
}

/* ============================================
   24. 深色模式移动端优化（如果支持）
   ============================================ */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
    /* 移动端深色模式特定调整 */
    .ice-glass,
    .glass-card {
        background: rgba(30, 41, 59, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* ============================================
   25. 打印样式（移动端也可能打印）
   ============================================ */
@media print {
    #main-nav,
    #scroll-progress,
    .bg-grid,
    .aura-blob,
    .ambient-orb,
    footer {
        display: none !important;
    }
    
    section {
        page-break-inside: avoid;
    }
}

/* ============================================
   26. 移动端导航抽屉
   ============================================ */

/* --- 业务闭环区块修正 --- */
@media (max-width: 767px) {
    #workflow-loop .mb-12 {
        margin-bottom: 1.5rem !important;
    }
}

/* --- 汉堡菜单按钮 --- */
.mobile-hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-hamburger-btn:hover,
.mobile-hamburger-btn:active {
    background: rgba(15, 23, 42, 0.06);
}

/* Lucide：菜单 / 关闭 切换 */
.mobile-hamburger-btn .mobile-menu-icon-open,
.mobile-hamburger-btn .mobile-menu-icon-close {
    display: block;
    flex-shrink: 0;
}
.mobile-hamburger-btn .mobile-menu-icon-close {
    display: none;
}
.mobile-hamburger-btn[aria-expanded="true"] .mobile-menu-icon-open {
    display: none;
}
.mobile-hamburger-btn[aria-expanded="true"] .mobile-menu-icon-close {
    display: block;
}

@media (max-width: 767px) {
    .mobile-hamburger-btn {
        display: flex;
    }
}

/* --- 抽屉关闭按钮 --- */
.mobile-drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.mobile-drawer-close-btn:hover,
.mobile-drawer-close-btn:active {
    background: #f1f5f9;
}

/* --- Hero 能力标签行：末两项成组，换行时不拆行；不裁剪第二行 --- */
@media (max-width: 767px) {
    .hero-tags-row {
        gap: 6px !important;
        row-gap: 6px;
        justify-content: center !important;
    }
    .hero-tags-pair {
        gap: 6px !important;
    }
}

@media (max-width: 479px) {
    .hero-tags-row > span,
    .hero-tags-pair > span {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }
}

/* 默认隐藏 */
.mobile-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
}

/* 打开状态 */
.mobile-nav-drawer.is-open {
    display: block;
}

/* 遮罩层 */
.mobile-nav-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: mobileNavFadeIn 0.25s ease both;
}

/* 抽屉面板 */
.mobile-nav-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 300px);
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mobileNavSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.15);
}

@keyframes mobileNavFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mobileNavSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* 抽屉头部 */
.mobile-nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

/* 导航链接列表 */
.mobile-nav-drawer__links {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.mobile-nav-link {
    display: block;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    border-radius: 0.75rem;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    min-height: 44px; /* iOS 推荐触摸区域 */
    line-height: 1.25;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    background: #eff6ff;
    color: #165dff;
}

/* 底部 CTA */
.mobile-nav-drawer__footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

/* Body 锁定滚动 */
body.mobile-nav-open {
    overflow: hidden;
}

/* ============================================
   27. co-creation 区块移动端修正
   ============================================ */
@media (max-width: 767px) {
    #co-creation .relative.min-h-\[500px\] {
        border-radius: 1.5rem !important;
        padding: 2rem 1.25rem !important;
    }

    /* 场景卡片2列 → 1列 */
    #co-creation .grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* CTA 按钮组全宽 */
    #co-creation .flex-col.sm\:flex-row {
        flex-direction: column !important;
        width: 100% !important;
    }

    #co-creation .flex-col.sm\:flex-row button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================
   28. 部署安全区块移动端修正
   ============================================ */
@media (max-width: 767px) {
    #deployment-security .text-center.mb-16 {
        margin-bottom: 1.5rem !important;
    }

    #deployment-security article {
        padding: 1.25rem !important;
    }

    /* 标题字号 */
    #deployment-security h3 {
        font-size: 1.5rem !important;
    }
}

/* ============================================
   29. 核心能力区块移动端修正
   ============================================ */
@media (max-width: 767px) {
    /* 标题外边距收紧（原 mb-16=4rem） */
    #capabilities .mb-16 {
        margin-bottom: 1.5rem !important;
    }

    /* 卡片间距收紧（原 space-y-8=2rem） */
    #capabilities .space-y-8 > * + * {
        margin-top: 1.25rem !important;
    }

    /* 能力卡片左右栏转单列，收紧间距和圆角 */
    #capabilities article.grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;        /* 减小 gap-10(2.5rem) */
        padding: 1.25rem !important;   /* 减小 p-6(1.5rem) */
        border-radius: 1.5rem !important; /* 减小 36px */
    }

    #capabilities h3 {
        font-size: 1.5rem !important;
    }
}

/* ============================================
   30. 场景方案区块移动端修正
   ============================================ */
@media (max-width: 767px) {
    /* 标题与卡片间距收紧 */
    #scenarios .text-center.mb-12 {
        margin-bottom: 1.25rem !important;
    }

    /* 卡片网格间距收紧 */
    #scenarios .grid.gap-4 {
        gap: 0.75rem !important;
    }

    /* 第一个大卡片 (客户增长系统) 内部横排 → 竖排 */
    #scenarios article.flex-col.sm\:flex-row {
        flex-direction: column !important;
    }

    /* 隐藏右侧装饰 */
    #scenarios .hidden.sm\:block {
        display: none !important;
    }

    /* 统一卡片圆角；padding 由内部子 div 控制，article 不叠加 */
    #scenarios article {
        border-radius: 1.25rem !important;
        padding: 0 !important;
    }

    /* 卡片内容区收紧内边距（覆盖 p-8 的 2rem） */
    #scenarios article > div {
        padding: 1.25rem !important;
    }

    /* 经营驾驶舱装饰区：移动端限制高度，避免大面积空白 */
    #scenarios .min-h-\[240px\] {
        min-height: 120px !important;
        padding: 0.75rem !important;
    }

    /* 末尾 mb-6 网格容器 */
    #scenarios .mb-6 {
        margin-bottom: 0 !important;
    }
}

/* ============================================
   31. 小屏（≤479px）额外修正
   ============================================ */
@media (max-width: 479px) {
    /* 注：#hero padding-top 已在第 4 节针对 ≤479px 做了 6.25rem 收紧，此处不再覆盖 */

    /* 公告条内容在极小屏适当截断 */
    .top-banner-text {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}