/* ========================================
   波罗密官网 - 移动端响应式适配样式
   移动端适配范围：<= 768px
   ======================================== */

/* 全局样式 - 控制页面整体宽度，防止溢出 */
@media screen and (max-width: 768px) {
    html, body {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    body {
        position: relative;
    }
    
    /* 所有容器都要控制宽度 */
    .div, .div2, .div4, .div10, .div17, .div20, .section {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* 确保内容不溢出 */
    * {
        max-width: 100vw;
        box-sizing: border-box;
    }
}

/* 移动端基础适配 */
@media screen and (max-width: 768px) {
    /* ========================================
       导航栏 - 显示在顶部
       ======================================== */
    
    #navbar-container {
        width: 100%;
        max-width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #000 !important;
        overflow: visible !important;
    }

    /* PC端菜单隐藏 */
    .header-middle-default {
        display: none !important;
    }

    /* 移动端菜单按钮显示 */
    .mobile-menu-btn {
        display: flex !important;
        background: #000 !important;
        width: 100%;
        overflow: visible !important;
    }

    /* 顶部导航栏高度 */
    .mobile-menu-btn > div {
        height: 50px;
        width: 100%;
        max-width: 100vw;
        overflow: visible !important;
    }

    /* ========================================
       Hero区域 - 移动端使用GIF背景
       ======================================== */
    
    .div2 {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        height: 100vh !important;
        position: relative !important;
        left: 0 !important;
        translate: none !important;
        top: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    /* 背景GIF图片 - 铺满第一屏 */
    .div2::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 0 !important;
        display: block !important;
    }
    
    .bg-1 {
        display: none !important;
    }
    
    /* ========================================
       Hero区域 - 移动端使用GIF背景
       ======================================== */
    
    .div2 {
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        height: 100vh !important;
        position: relative !important;
        left: 0 !important;
        translate: none !important;
        top: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    /* 背景GIF图片 - 铺满第一屏 */
    .div2::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;

        z-index: 0 !important;
        display: block !important;
    }
    
    .bg-1 {
        display: none !important;
    }
    
    /* 内容层 - 叠加在GIF图片上 */
    .frame-3 {
        width: 100% !important;
        max-width: 100vw !important;
        position: absolute !important;
        left: 0 !important;
        top: 50px !important;
        right: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 40px !important;
        padding: 100px 20px !important;
        z-index: 1 !important;
    }
    
    .frame-1 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        align-self: auto !important;
        gap: 50px !important;
        width: 100% !important;
        position: static !important;
    }
    
    /* 主标题 */
    .ai {
        font-size: 26px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        color: #fff !important;
        font-weight: bold !important;
        align-self: center !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        white-space: normal !important;
        letter-spacing: -0.5px !important;
        position: static !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* 描述文字 */
    .div3 {
        font-size: 15px !important;
        line-height: 2 !important;
        text-align: center !important;
        color: #fff !important;
        align-self: center !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        position: static !important;
        letter-spacing: 1px !important;
    }
    
    /* 特性文字 */
    .button-text3 {
        font-size: 13px !important;
        line-height: 2.2 !important;
        text-align: center !important;
        color: rgba(255,255,255,0.9) !important;
        align-self: center !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        position: static !important;
        left: auto !important;
        translate: none !important;
        top: auto !important;
        letter-spacing: 0.5px !important;
    }
    
    /* 按钮容器 */
    .frame-2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 30px auto !important;
        position: static !important;
        left: auto !important;
        translate: none !important;
        top: auto !important;
    }
    
    /* 按钮样式 */
    .button {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
        padding: 12px 24px !important;
        background: linear-gradient(90deg, rgba(13,127,227,1) 0%, rgba(39,47,230,1) 100%) !important;
        border-radius: 4px !important;
        justify-content: center !important;
    }
    
    .button-text {
        font-size: 14px !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
    
    .button2 {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
        padding: 12px 24px !important;
        background: rgba(255,255,255,0.1) !important;
        border: 1px solid #fff !important;
        border-radius: 4px !important;
        justify-content: center !important;
    }
    
    .button-text2 {
        font-size: 14px !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
    
    /* 隐藏新增的元素 */
    .hero-content, .hero-buttons, .subtitle {
        display: none !important;
    }

    /* 对比区域适配 */
    .div4 {
        min-height: auto !important;
        padding: 60px 15px !important;
    }

    .div5 {
        font-size: 24px !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
    }

    .div6, .div7 {
        width: 100% !important;
        height: auto !important;
    }

    .frame-23, .frame-22 {
        width: 100% !important;
        padding: 20px !important;
        margin: 20px auto !important;
    }

    .button3 {
        font-size: 18px !important;
        padding: 15px !important;
        text-align: center !important;
    }

    .frame-20, .frame-212 {
        padding: 15px !important;
    }

    .frame-19, .frame-192, .frame-202, .frame-203, .frame-21, .frame-213 {
        padding: 10px 0 !important;
        font-size: 14px !important;
    }

    .div8, .div9 {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .check-one, .close-one, .check-one2, .close-one2, .check-one3, .close-one3 {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
    }

    .line-3, .line-4, .line-32, .line-42 {
        height: 1px !important;
    }

    .image-14 {
        width: 80% !important;
        height: auto !important;
        margin: 20px auto !important;
        display: block !important;
    }

    .button-text6 {
        font-size: 28px !important;
        text-align: center !important;
        margin: 20px 0 !important;
    }

    .button-text7 {
        font-size: 14px !important;
        line-height: 1.8 !important;
        padding: 0 15px !important;
        text-align: left !important;
    }

    /* 四大场景区域适配 */
    .div10 {
        padding: 60px 15px !important;
    }

    .div11 {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .bg-22 {
        width: 100% !important;
        height: auto !important;
    }

    .frame-7, .frame-8 {
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .frame-5, .frame-6, .frame-52, .frame-62 {
        width: 100% !important;
        margin: 0 !important;
    }

    .frame-4 {
        padding: 20px !important;
    }

    .card-header {
        flex-direction: column !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .div12, .div13, .div14, .div15, .div16 {
        width: 100% !important;
    }

    .div13 {
        font-size: 20px !important;
        margin-top: 10px !important;
    }

    ._30, .io-t, .ai2, .nlp {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }

    .rectangle-1, .rectangle-2, .rectangle-3 {
        display: none !important;
    }

    /* 三大核心能力区域适配 */
    .div17 {
        padding: 60px 15px !important;
    }

    .div17 > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 20px !important;
    }

    .capability-card {
        padding: 40px 20px !important;
        min-height: auto !important;
    }

    .card-title {
        font-size: 24px !important;
        margin-bottom: 60px !important;
    }

    .card-text {
        font-size: 16px !important;
        line-height: 1.8 !important;
    }

    .card-icon {
        width: 40px !important;
        height: 40px !important;
        bottom: 20px !important;
        right: 20px !important;
    }

    /* 技术实力区域适配 */
    .div20 {
        min-height: auto !important;
        padding: 60px 15px !important;
        background-size: contain !important;
        background-position: center !important;
    }

    .frame-18 {
        width: 100% !important;
        padding: 0 !important;
    }

    .div21 {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .frame-13 {
        flex-direction: column !important;
        width: 100% !important;
    }

    .frame-11 {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px !important;
    }

    .frame-9, .frame-10, .frame-112, .frame-12 {
        width: 45% !important;
        min-width: 140px !important;
    }

    ._3000, ._2000, ._20, ._14 {
        font-size: 32px !important;
        white-space: nowrap !important;
    }

    .div22 {
        font-size: 14px !important;
        text-align: center !important;
    }

    .line-1, .line-2 {
        display: none !important;
    }

    .frame-17 {
        margin-top: 40px !important;
    }

    .div23 {
        font-size: 20px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .frame-16 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .div24 {
        font-size: 14px !important;
        text-align: center !important;
    }

    /* CTA区域适配 */
    .section {
        min-height: auto !important;
        padding: 60px 15px !important;
    }

    .container, .container2 {
        display: none !important;
    }

    .frame-26 {
        width: 100% !important;
        padding: 0 !important;
    }

    .container3 {
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .container4, .container5, .container6 {
        width: 80% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .ai3 {
        font-size: 24px !important;
        text-align: center !important;
        margin: 30px 0 !important;
    }

    .button4 {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        padding: 18px 30px !important;
        font-size: 16px !important;
    }

    .text {
        flex-direction: column !important;
        align-items: center !important;
    }

    .div25 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .icon {
        width: 24px !important;
        height: 24px !important;
    }

    /* 联系我们弹窗适配 */
    #contactModal {
        padding: 15px !important;
    }

    #contactModal > div {
        padding: 30px 20px !important;
        max-width: 95% !important;
    }

    #contactModal h3 {
        font-size: 24px !important;
        margin-bottom: 25px !important;
    }

    #contactModal p {
        font-size: 14px !important;
        line-height: 1.8 !important;
        margin-bottom: 15px !important;
    }

    #contactModal button {
        font-size: 28px !important;
        top: 15px !important;
        right: 15px !important;
    }

    /* 底部适配 */
    footer {
        padding: 30px 15px !important;
    }

    footer > div {
        font-size: 12px !important;
        line-height: 1.8 !important;
    }

    footer a {
        display: block !important;
        margin: 5px 0 !important;
    }

    footer span[style*="margin: 0 10px"] {
        display: none !important;
    }
    
    /* ========================================
       移动端侧边栏菜单样式
       ======================================== */
    
    .mobile-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80% !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10000 !important;
    /* 移动端侧边菜单基础样式 */
    .mobile-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 10000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* 遮罩层基础样式 */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .sidebar-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 15px 20px !important;
        background: #fff !important;
        border-bottom: 1px solid #eee !important;
        flex-shrink: 0 !important;
    }
    
    .sidebar-header span {
        font-size: 16px !important;
        font-weight: bold !important;
        color: #333 !important;
    }
    
    .close-btn {
        width: 30px !important;
        height: 30px !important;
        border: none !important;
        background: none !important;
        font-size: 28px !important;
        color: #666 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 0 !important;
    }
    
    .sidebar-nav {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .sidebar-nav ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .sidebar-nav > ul > li {
        border-bottom: 1px solid #eee !important;
    }
    
    .sidebar-nav .menu-item {
        display: block !important;
        padding: 14px 20px !important;
        color: #333 !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        background: #fff !important;
        position: relative !important;
        cursor: pointer !important;
    }
    
    .sidebar-nav .menu-item:hover,
    .sidebar-nav .has-submenu.active > .menu-item {
        background: #f5f5f5 !important;
        color: #1E90FF !important;
    }
    
    .sidebar-nav .has-submenu > .menu-item::after {
        content: '▼' !important;
        position: absolute !important;
        right: 20px !important;
        font-size: 10px !important;
        color: #999 !important;
        transition: transform 0.3s ease !important;
    }
    
    .sidebar-nav .has-submenu.active > .menu-item::after {
        transform: rotate(180deg) !important;
    }
    
    .sidebar-nav .submenu {
        display: none !important;
        background: #fafafa !important;
    }
    
    .sidebar-nav .submenu li a {
        display: block !important;
        padding: 12px 20px 12px 35px !important;
        color: #666 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .sidebar-nav .submenu li a:hover {
        color: #1E90FF !important;
        background: #f0f0f0 !important;
    }
    
    .sidebar-nav .submenu li:last-child a {
        border-bottom: none !important;
    }
    
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    /* 遮罩层显示控制 */
    .sidebar-overlay.show {
        opacity: 1 !important;
    }
}

/* 超小屏幕适配 (< 480px) */
@media screen and (max-width: 480px) {
    .ai {
        font-size: 20px !important;
    }

    .div3 {
        font-size: 13px !important;
    }

    .div11, .div21 {
        font-size: 24px !important;
    }

    .button-text3 {
        font-size: 12px !important;
    }

    ._3000, ._2000, ._20, ._14 {
        font-size: 28px !important;
    }

    .ai3 {
        font-size: 20px !important;
    }

    .capability-card {
        padding: 30px 15px !important;
    }

    .card-title {
        font-size: 20px !important;
    }

    .card-text {
        font-size: 14px !important;
    }
}

/* 平板横屏适配 (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .div2 {
        padding: 100px 40px 60px !important;
    }

    .ai {
        font-size: 36px !important;
    }

    .div3 {
        font-size: 18px !important;
    }

    .frame-7, .frame-8 {
        gap: 20px !important;
    }

    .frame-5, .frame-6, .frame-52, .frame-62 {
        width: 48% !important;
    }

    .div17 > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 90% !important;
    }

    .frame-11 {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .frame-9, .frame-10, .frame-112, .frame-12 {
        width: 40% !important;
    }
}

/* 大屏幕优化 (>= 1920px) */
@media screen and (min-width: 1920px) {
    .ai {
        font-size: 72px !important;
    }

    .div3 {
        font-size: 28px !important;
    }

    .div11, .div21, .ai3 {
        font-size: 48px !important;
    }

    .capability-card {
        padding: 80px 60px !important;
    }

    .card-title {
        font-size: 42px !important;
    }

    .card-text {
        font-size: 24px !important;
    }
}

/* 隐藏移动端元素在大屏幕上 */
@media screen and (min-width: 992px) {
    .isPhone {
        display: none !important;
    }
    
    .towbag {
        display: none !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
    }
    
    .mobile-sidebar {
        display: none !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
}

/* 992px断点优化 */
@media screen and (max-width: 991px) {
    .mobile-menu-btn {
        display: flex !important;
    }
    
    .header-middle-default {
        display: none !important;
    }
}