@media (min-width: 993px) {

    /* 选择器含义：
       .btn-lang 和 .btn-console 只要相邻，
       就将左侧间距减少 15px，从而达到聚拢效果 
    */
    .nav-links>.btn-lang+.btn-lang,
    .nav-links>.btn-lang+.btn-console {
        margin-left: -15px !important;
    }
}

/* =========================================
   8. 移动端全适配 (Mobile Responsiveness)
   ========================================= */
/* 默认在电脑端隐藏汉堡菜单 */
.mobile-toggle {
    display: none;
    color: var(--text-primary);
    font-size: 26px;
    cursor: pointer;
    z-index: 1001;
    margin-left: auto;
}

@media (max-width: 992px) {

    /* 1. 显示汉堡菜单 */
    .mobile-toggle {
        display: block;
    }

    /* 2. 菜单改为绝对定位，挂在导航栏下方 */
    .nav-links {
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        height: calc(100vh - 100px);
        background: rgba(5, 5, 5, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        /* 从上往下排 */
        align-items: center;
        padding: 20px 20px 80px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        border-top: 1px solid var(--border-color);
        text-decoration: none;
    }

    .nav-links.active {
        transform: translateX(0);
        text-align: left;
    }

    /* 🔥 3. 核心修复：取消电脑端 100% 高度的限制，让菜单正常显示 🔥 */
    .nav-links>a:not(.btn-console),
    .dropdown>a,
    .dropdown {
        height: auto !important;
        max-width: none !important;
        width: 100%;
        justify-content: left;
        margin-left: 50px;

    }

    /* 4. 解决 Dropdown 在手机端展开时的排版问题 */
    .dropdown {
        flex-direction: column;
        margin-left: 0;
        text-decoration: none;
    }

    /* 手机端点击展开时，箭头反转 */
    .dropdown.mobile-active>a i {
        transform: rotate(180deg);
        opacity: 1;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        box-shadow: none;
        border: none;
        min-width: 100%;
        display: none;
        /* 默认折叠 */
        padding: 0;
        margin-top: 10px;
        text-align: center;
    }

    .dropdown.mobile-active .dropdown-menu {
        display: block;
    }

    /* 子菜单的高度也要解除限制 */
    .dropdown-menu a {
        justify-content: left;
        padding: 12px;
        height: auto !important;
        text-align: left;
        margin-left: 50px;
    }

    .menu-text-block {
        align-items: left;
    }

    /* 5. 优化手机端字体和按钮宽度 */
    .nav-links>a:not(.btn-console),
    .dropdown>a {
        font-size: 18px;
        text-decoration: none;
    }

    /* 限定只修改导航栏里的按钮，不影响网页正文的按钮 */
    .nav-links .btn-lang {
        margin-top: 5px;
        justify-content: center;
        width: 100%;
        max-width: 100px;
        text-decoration: none;
    }

    .nav-links .btn-console {
        margin-top: 5px;
        width: 100%;
        max-width: 100px;
        justify-content: center;
        text-decoration: none;
    }

    /* 6. 缩小主体内容的手机端间距 */
    .hero h1 {
        font-size: 36px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .hero-btn,
    .btn-outline {
        width: 100%;
        text-align: center;
    }

    .features {
        padding: 50px 4%;
    }

    .glass-card {
        padding: 25px;
    }

    .card-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
}

/* ==========================================
           手机端响应式修复：强制卡片垂直单列排布 (覆盖主 CSS 与内联样式)
           ========================================== */
@media (max-width: 992px) {

    /* 1. 将便当盒网格强行转为单列，并留出左右安全边距 */
    .bento-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        gap: 15px !important;
        /* 统一卡片上下的间距 */
    }

    /* 2. 强行打破 HTML 里的 span 6 / span 4 限制，让每个卡片占满整行 */
    .bento-grid>* {
        grid-column: 1 / -1 !important;
        /* 终极指令：从第一列跨到最后一列 */
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 3. 修复底部“联系方式”右侧的区块被挤压的问题 */
    div[style*="display: flex; flex-direction: column; gap: 20px"] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 下滑列表特效作为Cloud Network FAMILY YEE 专属 */
        .dropdown-menu a:hover .menu-title {
            color: var(--accent-blue);
        }

        .dropdown-menu a:hover .menu-desc {
            color: var(--text-primary);
        }

        .dropdown-menu a:hover::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10%;
            width: 3px;
            height: 80%;
            background: var(--accent-blue);
            ;
            border-radius: 0 4px 4px 0;
        }