/* ============================================
   官网全端响应式 · 电脑 / 平板 / 手机
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

/* ---------- 大屏电脑 ---------- */
@media (min-width: 1400px) {
    .container {
        max-width: 1280px;
    }
}

/* ---------- 平板（横竖） ---------- */
@media (max-width: 1024px) {
    .nav {
        display: none !important;
    }

    .header-actions {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 10px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav {
        display: block !important;
    }

    .mobile-nav:not(.active) {
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-nav.active {
        visibility: visible;
        pointer-events: auto;
    }

    .header-content {
        height: 64px;
    }

    .mobile-nav {
        top: 64px;
    }

    .logo-name {
        font-size: 14px;
    }

    .hero {
        min-height: auto;
        padding: 100px 0 56px;
    }

    .product-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        margin-left: -4px;
        margin-right: -4px;
        scrollbar-width: none;
    }

    .product-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .modal-overlay {
        padding: 16px;
        align-items: flex-end;
    }

    .modal-overlay .modal,
    .modal-overlay .modal-lg {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .footer-content {
        gap: var(--spacing-lg);
    }
}

/* ---------- 手机 ---------- */
@media (max-width: 768px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .logo-en {
        display: none;
    }

    .logo-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .section {
        padding: 56px 0;
    }

    .section-header {
        margin-bottom: var(--spacing-xl);
    }

    .hero-title {
        font-size: clamp(26px, 7vw, 36px);
        line-height: 1.25;
    }

    .hero-subtitle {
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hero-trust {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .stats {
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .stat-number {
        font-size: clamp(32px, 8vw, 42px);
    }

    .product-card,
    .solution-card,
    .service-card,
    .news-card {
        margin-left: 0;
        margin-right: 0;
    }

    .category-header h3 {
        font-size: 22px;
    }

    .contact-form {
        padding: var(--spacing-lg);
    }

    .back-to-top {
        width: 44px;
        height: 44px;
        right: 16px;
        bottom: 88px;
    }

    .float-consult {
        right: 16px;
        bottom: 24px;
        z-index: 98;
    }

    .toast-container {
        left: 16px;
        right: 16px;
        top: 76px;
    }

    .toast-container .toast {
        max-width: 100%;
    }

    .partners-marquee {
        mask-image: none;
    }

    .partners-track {
        animation-duration: 40s;
    }
}

/* ---------- 小屏手机 ---------- */
@media (max-width: 480px) {
    .header-content {
        height: 56px;
    }

    .mobile-nav {
        top: 56px;
    }

    .hero {
        padding-top: 88px;
    }

    .section-title {
        font-size: 24px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .product-tab {
        padding: 8px 16px;
        font-size: 13px;
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: 15px;
    }

    .modal-product-title {
        font-size: 20px;
    }

    .modal-overlay .modal-close {
        width: 40px;
        height: 40px;
    }
}

/* ---------- 横屏手机 ---------- */
@media (max-width: 896px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 88px 0 40px;
    }

    .mobile-nav {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ---------- 触控优化 ---------- */
@media (hover: none) and (pointer: coarse) {
    .nav-item:hover .dropdown-menu {
        opacity: 0;
        visibility: hidden;
    }

    .btn,
    .product-tab,
    .mobile-menu-btn,
    .float-consult,
    a {
        touch-action: manipulation;
    }
}

/* ---------- 刘海屏安全区 ---------- */
@supports (padding: max(0px)) {
    .header .container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .mobile-nav > ul {
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }

    .float-consult {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(20px, env(safe-area-inset-bottom));
    }

    .back-to-top {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(88px, calc(env(safe-area-inset-bottom) + 72px));
    }
}

/* 防止 flex 回退与 grid 叠加导致横向溢出 */
@media (max-width: 1024px) {
    .hero-layout,
    .stats-grid,
    .product-grid,
    .solutions-grid,
    .services-grid,
    .news-grid,
    .why-grid,
    .partners-grid {
        width: 100%;
        max-width: 100%;
    }
}