/* 手机端兼容性修复 */

/* 导航栏手机端优化 */
@media (max-width: 768px) {
    /* 导航栏品牌名缩短显示 */
    nav .flex.items-center.gap-2 span.text-2xl {
        font-size: 1rem !important;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 或者使用简短名称 */
    nav .flex.items-center.gap-2 span.text-2xl::before {
        content: "开始行动";
        font-size: 1.25rem;
        font-weight: bold;
        background: linear-gradient(to right, #165DFF, #10B981);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* 隐藏原品牌名，显示简短名 */
    nav .flex.items-center.gap-2 span.text-2xl {
        font-size: 0 !important;
    }
    
    nav .flex.items-center.gap-2 span.text-2xl::after {
        content: "";
        display: inline-block;
        font-size: 1.25rem;
        font-weight: bold;
        background: linear-gradient(to right, #165DFF, #10B981);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Hero 区域优化 */
    .pt-32 {
        padding-top: 80px !important;
    }
    
    .pb-20 {
        padding-bottom: 40px !important;
    }
    
    /* 按钮尺寸优化 */
    .flex.flex-wrap.gap-4 a {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* 四大角色卡片优化 */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 > div {
        padding: 1rem !important;
    }
    
    /* 底部 CTA 区域优化 */
    section.py-20 .rounded-3xl {
        padding: 1.5rem !important;
    }
    
    section.py-16 .rounded-3xl {
        padding: 1.5rem !important;
    }
    
    /* 页脚优化 */
    footer .grid.grid-cols-1.md\:grid-cols-4 {
        gap: 1.5rem !important;
    }
    
    footer .text-xl.font-bold {
        font-size: 1rem !important;
    }
    
    /* Hero 区域卡片网格 */
    .grid.grid-cols-2.gap-4 {
        gap: 0.5rem !important;
    }
    
    .grid.grid-cols-2.gap-4 > div {
        padding: 0.75rem !important;
    }
    
    /* 人群展示区 */
    .flex.-space-x-3 {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    /* 标题字体 */
    h1.text-\[clamp\(2\.5rem\,5vw\,4rem\)\] {
        font-size: 1.75rem !important;
    }
    
    h2.text-\[clamp\(2rem\,4vw\,3rem\)\] {
        font-size: 1.5rem !important;
    }
    
    /* Hero 区域 flex 布局 */
    .flex.flex-col.lg\:flex-row.items-center.gap-12 {
        gap: 2rem !important;
    }
    
    /* 段落文字 */
    .text-xl.text-gray-600 {
        font-size: 1rem !important;
    }
    
    /* 品牌优势卡片 */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-8 {
        gap: 1rem !important;
    }
    
    .text-center > div.w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 1.5rem !important;
    }
}

/* 小屏幕手机优化 (< 375px) */
@media (max-width: 375px) {
    nav .container.mx-auto.px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    nav .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    nav .w-10.h-10 i {
        font-size: 0.875rem !important;
    }
}

/* 移动端菜单样式优化 */
#mobileMenu {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

#mobileMenu a {
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
}

/* 触摸优化 */
@media (hover: none) {
    a, button {
        -webkit-tap-highlight-color: transparent;
    }
    
    .hover\:scale-105:hover,
    .hover\:shadow-xl:hover,
    .hover\:-translate-y-2:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

/* iOS Safari 特定修复 */
@supports (-webkit-touch-callout: none) {
    /* 修复 iOS 100vh 问题 */
    .min-h-screen {
        min-height: -webkit-fill-available;
    }
    
    /* 修复 iOS 输入框问题 */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* 页脚 logo 简化 */
@media (max-width: 640px) {
    footer .flex.items-center.gap-2.mb-4 span.text-xl {
        font-size: 0.875rem !important;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}