/**
 * 紧急修复：移动端显示问题
 * 解决导航栏消失、布局不协调、动效闪动等问题
 */

/* ============================================
   修复1：导航栏显示问题
   ============================================ */
@media (max-width: 768px) {
    /* 确保导航栏始终可见 */
    .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 9999 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .navbar .container {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;
    }
    
    /* 简化logo区域 */
    .nav-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
    }
    
    .nav-brand .logo {
        height: 35px;
        width: auto;
    }
    
    .brand-info {
        display: none; /* 移动端隐藏标语节省空间 */
    }
    
    /* 确保移动端菜单按钮显示 */
    .mobile-menu-toggle {
        display: flex !important;
        position: relative;
        z-index: 10000;
    }
    
    /* 隐藏桌面端菜单 */
    .nav-menu {
        display: none !important;
    }
    
    /* 页面内容下移，避免被导航栏遮挡 */
    body {
        padding-top: 60px !important;
    }
    
    .hero {
        margin-top: 0 !important;
        padding-top: 40px !important;
    }
}

/* ============================================
   修复2：内容布局协调性
   ============================================ */
@media (max-width: 768px) {
    /* 统一容器内边距 */
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }
    
    /* 重置所有section的内边距 */
    section {
        padding: 40px 0;
        overflow: visible;
    }
    
    /* 标题大小统一 */
    h1 {
        font-size: 28px !important;
        line-height: 1.3;
        word-break: break-word;
    }
    
    h2 {
        font-size: 24px !important;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 20px !important;
        line-height: 1.3;
    }
    
    p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* 卡片布局优化 */
    .value-grid,
    .solutions-grid,
    .cases-grid,
    .pricing-cards,
    .products-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100%;
    }
    
    .value-card,
    .solution-card,
    .case-card,
    .pricing-card,
    .product-item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* 按钮优化 */
    .btn {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 15px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .hero-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .hero-buttons .btn {
        width: 100%;
    }
}

/* ============================================
   修复3：禁用问题动效
   ============================================ */
@media (max-width: 768px) {
    /* 完全禁用所有动画避免闪动 */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
    
    /* 移除呼吸效果 */
    @keyframes breathe {
        0%, 100% { transform: none; }
    }
    
    @keyframes pulse {
        0%, 100% { transform: none; opacity: 1; }
    }
    
    @keyframes float {
        0%, 100% { transform: none; }
    }
    
    /* 禁用悬停效果 */
    .card:hover,
    .btn:hover,
    .value-card:hover,
    .solution-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 移除背景动画元素 */
    .hero-bg,
    .floating-shapes,
    .gradient-orb,
    .grid-pattern,
    .shape {
        display: none !important;
    }
    
    /* 静态化所有装饰元素 */
    .orbit,
    .parallax-element,
    .animated-element {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================
   修复4：提升美观度
   ============================================ */
@media (max-width: 768px) {
    /* 优化配色和圆角 */
    .value-card,
    .solution-card,
    .case-card,
    .product-item {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    /* 优化图标 */
    .value-icon,
    .solution-icon,
    .product-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        margin-bottom: 16px;
    }
    
    /* 优化按钮样式 */
    .btn-primary {
        background: linear-gradient(135deg, #00a6fb 0%, #0086d9 100%);
        border: none;
        border-radius: 24px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }
    
    .btn-outline {
        border: 2px solid #00a6fb;
        border-radius: 24px;
        background: white;
        color: #00a6fb;
        font-weight: 600;
    }
    
    /* Hero区域美化 */
    .hero {
        background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    }
    
    .hero-title {
        font-weight: 700;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
    
    /* 间距优化 */
    .section-title {
        text-align: center;
        margin-bottom: 32px;
        font-weight: 700;
        color: #1f2937;
    }
    
    /* 列表样式优化 */
    .product-features {
        list-style: none;
        padding: 0;
        margin: 16px 0;
    }
    
    .product-features li {
        padding: 8px 0;
        padding-left: 24px;
        position: relative;
        font-size: 14px;
        color: #4b5563;
    }
    
    .product-features li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #10b981;
        font-weight: bold;
    }
}

/* ============================================
   修复5：iPhone特殊适配
   ============================================ */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* iOS安全区域 */
        .navbar {
            padding-top: constant(safe-area-inset-top);
            padding-top: env(safe-area-inset-top);
        }
        
        body {
            padding-top: calc(60px + constant(safe-area-inset-top)) !important;
            padding-top: calc(60px + env(safe-area-inset-top)) !important;
        }
        
        .container {
            padding-left: calc(16px + constant(safe-area-inset-left));
            padding-right: calc(16px + constant(safe-area-inset-right));
            padding-left: calc(16px + env(safe-area-inset-left));
            padding-right: calc(16px + env(safe-area-inset-right));
        }
        
        /* 底部安全区域 */
        .footer {
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* ============================================
   修复6：性能优化
   ============================================ */
@media (max-width: 768px) {
    /* 使用GPU加速 */
    .navbar,
    .mobile-nav-menu {
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* 优化图片 */
    img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* 减少重绘 */
    .card,
    .value-card,
    .solution-card {
        contain: layout style paint;
    }
}

/* ============================================
   修复7：微信浏览器特殊处理
   ============================================ */
.wechat-browser {
    /* 修复微信浏览器导航栏 */
    .navbar {
        position: absolute !important;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    /* 输入框处理 */
    input,
    textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
    }
}

/* ============================================
   紧急补丁：确保关键元素显示
   ============================================ */
@media screen and (max-width: 768px) {
    /* 强制显示导航栏 */
    nav.navbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 确保内容可见 */
    .hero,
    section,
    .container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 移除可能造成问题的transform */
    * {
        -webkit-transform-style: flat !important;
        transform-style: flat !important;
    }
}