/* 移动端增强样式 - 专门针对9:16屏幕比例优化 */

/* 移动设备基础优化 */
.mobile-device {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 使用CSS变量的视口高度 */
.hero {
    min-height: calc(var(--vh, 1vh) * 100);
}

/* 9:16 屏幕比例专门优化 */
@media (max-width: 480px) and (min-aspect-ratio: 9/16) {
    /* 导航栏优化 */
    .header {
        height: 56px; /* 稍微减小高度以节省空间 */
    }
    
    .nav-container {
        padding: 0 var(--spacing-md);
    }
    
    .logo {
        width: 36px;
        height: 36px;
    }
    
    .logo-text {
        font-size: var(--font-size-lg);
    }
    
    /* 主横幅区域针对9:16优化 */
    .hero {
        margin-top: 56px;
        padding: var(--spacing-2xl) 0;
        min-height: calc(var(--vh, 1vh) * 85);
        display: flex;
        align-items: center;
    }
    
    .hero-container {
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-lg);
    }
    
    .hero-title {
        font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-3xl));
        line-height: 1.1;
        margin-bottom: var(--spacing-md);
    }
    
    .hero-subtitle {
        font-size: clamp(var(--font-size-base), 4vw, var(--font-size-lg));
        margin-bottom: var(--spacing-sm);
    }
    
    .hero-description {
        font-size: clamp(var(--font-size-sm), 3.5vw, var(--font-size-base));
        margin-bottom: var(--spacing-lg);
        max-width: 85%;
    }
    
    .hero-buttons {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }
    
    .hero-graphic {
        width: clamp(200px, 40vw, 260px);
        height: clamp(200px, 40vw, 260px);
    }
    
    /* 内容区域优化 */
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    .section-title {
        font-size: clamp(var(--font-size-xl), 5vw, var(--font-size-2xl));
        margin-bottom: var(--spacing-xl);
        text-align: center;
    }
    
    /* 特色卡片优化 */
    .features-grid {
        gap: var(--spacing-lg);
    }
    
    .feature-card {
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        background: var(--white);
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        border: 1px solid var(--border-color);
    }
    
    .feature-icon {
        font-size: clamp(36px, 8vw, 48px);
        margin-bottom: var(--spacing-sm);
    }
    
    .feature-title {
        font-size: clamp(var(--font-size-base), 4vw, var(--font-size-lg));
        margin-bottom: var(--spacing-xs);
    }
    
    .feature-description {
        font-size: clamp(var(--font-size-xs), 3vw, var(--font-size-sm));
        line-height: 1.5;
    }
    
    /* 模块卡片优化 */
    .modules-grid {
        gap: var(--spacing-lg);
    }
    
    .module-card {
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        background: var(--white);
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    
    .module-header {
        margin-bottom: var(--spacing-md);
    }
    
    .module-icon {
        font-size: clamp(32px, 7vw, 40px);
    }
    
    .module-title {
        font-size: clamp(var(--font-size-base), 4vw, var(--font-size-lg));
    }
    
    .module-features li {
        font-size: clamp(var(--font-size-xs), 3vw, var(--font-size-sm));
        padding: var(--spacing-xs) 0;
    }
    
    /* 统计数据优化 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .stat-item {
        padding: var(--spacing-lg);
        text-align: center;
        background: var(--white);
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    
    .stat-number {
        font-size: clamp(var(--font-size-2xl), 6vw, var(--font-size-3xl));
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: var(--spacing-xs);
    }
    
    .stat-label {
        font-size: clamp(var(--font-size-xs), 3vw, var(--font-size-sm));
        color: var(--text-secondary);
    }
    
    /* 按钮优化 */
    .btn {
        min-height: 48px;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: clamp(var(--font-size-sm), 3.5vw, var(--font-size-base));
        border-radius: var(--radius-md);
        font-weight: 600;
        letter-spacing: 0.3px;
    }
    
    /* 页脚优化 */
    .footer {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }
    
    .footer-content {
        gap: var(--spacing-lg);
    }
    
    .footer-section {
        text-align: center;
    }
    
    .footer-title {
        font-size: clamp(var(--font-size-sm), 3.5vw, var(--font-size-base));
        margin-bottom: var(--spacing-sm);
    }
    
    .footer-links li {
        font-size: clamp(var(--font-size-xs), 3vw, var(--font-size-sm));
        margin-bottom: var(--spacing-xs);
    }
}

/* 超窄屏幕优化 (iPhone SE等) */
@media (max-width: 375px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .hero-container {
        padding: 0 var(--spacing-md);
    }
    
    .hero-title {
        font-size: var(--font-size-xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
    
    .hero-description {
        font-size: var(--font-size-sm);
    }
    
    .feature-card,
    .module-card {
        padding: var(--spacing-md);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
    /* 增大所有可点击元素的触摸区域 */
    .nav-link,
    .btn,
    .footer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 移除悬停效果 */
    .feature-card:hover,
    .module-card:hover,
    .btn:hover {
        transform: none;
    }
    
    /* 添加触摸反馈 */
    .btn:active,
    .nav-link:active,
    .feature-card:active,
    .module-card:active {
        transform: scale(0.98);
        opacity: 0.9;
        transition: all 0.1s ease;
    }
}

/* 横屏模式优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: calc(var(--vh, 1vh) * 95);
        padding: var(--spacing-lg) 0;
    }
    
    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
        text-align: left;
    }
    
    .hero-graphic {
        order: 1;
        width: 180px;
        height: 180px;
    }
    
    .hero-buttons {
        flex-direction: row;
        gap: var(--spacing-sm);
    }
    
    .features,
    .modules,
    .technology,
    .stats {
        padding: var(--spacing-lg) 0;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo,
    .footer-logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}