/* ===============================
整个模块强制铺满浏览器
=============================== */

.nax-home-hero{
    position:relative;

    width:100vw;
    max-width:none;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    background:#fff;

    font-family:Arial, Helvetica, sans-serif;

    overflow:hidden;
}


/* ===============================
电脑 HERO
=============================== */

.nax-hero-bg{

    width:100%;

    height:720px;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;

    overflow:hidden;
}


/* V6.2：Hero 首屏图（HTML 直出，等同 background-size:cover + center，视觉不变） */

.nax-hero-img{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    z-index:1;

    /* 图片没下载完时不再是一片空白 */
    background:#f2f4f7;
}


/* HERO文字 */

.nax-hero-copy{

    position:absolute;

    top:70px;

    left:50%;

    transform:translateX(-50%);

    width:90%;
    max-width:1200px;

    text-align:center;

    z-index:2;
}


.nax-hero-copy h1{

    margin:0 0 14px;

    font-size:46px;
    line-height:1.18;

    font-weight:700;

    color:#102f63;
}


.nax-hero-copy p{

    margin:0 auto;

    max-width:900px;

    font-size:20px;
    line-height:1.7;

    color:#34475f;
}



/* ===============================
电脑端轮播区域
卡片向上重叠主图
=============================== */

.nax-carousel-wrap{

    position:relative;

    width:100%;

    min-height:auto;

    /* 透明背景，让下面的 Hero 图露出来 */
    background:transparent;

    /* 底部留白：少量即可，配合负边距指示点紧贴卡片 */
    padding:0 0 15px;

    box-sizing:border-box;
}


/* 卡片 */

.nax-carousel-card{

    position:relative;

    width:760px;
    max-width:90%;

    min-height:165px;

    /* 卡片居中放在 Hero 与白色区域的分界线上 */
    margin:0 auto;

    /* 向上移动自身高度的一半，实现上下各占一半 */
    transform:translateY(-50%);

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 18px 50px rgba(20,45,80,.16);

    z-index:10;

    overflow:hidden;
}



/* ===============================
单张轮播
=============================== */

.nax-slide{

    display:none;

    min-height:165px;

    padding:16px;

    box-sizing:border-box;

    align-items:center;
}


.nax-slide.active{

    display:flex;

    animation:naxFade .6s ease;
}


@keyframes naxFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/* 图片 */

.nax-product-image{

    width:240px;
    height:135px;

    flex-shrink:0;

    border-radius:13px;

    overflow:hidden;

    background:#f3f5f7;
}


.nax-product-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}



/* 文字 */

.nax-product-copy{

    flex:1;

    padding:0 45px 0 32px;
}


.nax-tag{

    display:inline-block;

    padding:5px 11px;

    margin-bottom:10px;

    border:1px solid #2684ff;

    border-radius:6px;

    color:#1769cc;

    font-size:13px;
}


.nax-product-copy h3{

    margin:0 0 7px;

    font-size:21px;
    line-height:1.35;

    color:#141b25;
}


.nax-product-copy p{

    margin:0 0 10px;

    color:#667085;

    font-size:14px;

    line-height:1.55;
}


.nax-product-copy a{

    color:#1769cc;

    font-size:14px;

    font-weight:600;

    text-decoration:none;
}



/* ===============================
箭头
=============================== */

.nax-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:30;

    width:38px;
    height:38px;

    border:0;

    border-radius:50%;

    background:#fff;

    box-shadow:0 3px 12px rgba(0,0,0,.12);

    color:#145fa8;

    font-size:28px;

    line-height:30px;

    cursor:pointer;
}


.nax-prev{
    left:10px;
}


.nax-next{
    right:10px;
}



/* ===============================
轮播指示线
=============================== */

.nax-dots{

    display:flex;

    justify-content:center;

    gap:8px;

    /* 负边距把指示点向上提，紧贴卡片底部，减少白底区域 */
    margin-top:-50px;
}


.nax-dot{

    width:62px;
    height:3px;

    padding:0;

    border:0;

    background:#d5d8dd;

    cursor:pointer;

    transition:.25s;
}


.nax-dot.active{

    background:#2684ff;
}



/* =================================================
手机端：卡片放在 Hero 图下方，不重叠
================================================= */

@media(max-width:768px){


    .nax-home-hero{

        overflow:hidden;

    }


    /* 手机 Hero */

    .nax-hero-bg{

        width:100%;

        height:auto;

        aspect-ratio:1 / 0.62;

        background-size:cover;

        background-position:center;

    }


    /* V6.2：手机端 Hero 图同样铺满容器 */

    .nax-hero-img{

        width:100%;
        height:100%;

        object-fit:cover;
        object-position:center;
    }


    /*
    手机端显示标题，缩小字号放在 Hero 图正上方
    */
    .nax-hero-copy{

        /* 取消 display:none，改为显示 */
        display:block;

        /* 位置：贴近 Hero 图顶部（正上方）*/
        position:absolute;

        top:28px;

        left:50%;

        transform:translateX(-50%);

        width:88%;

        max-width:1200px;

    }


    .nax-hero-copy h1{

        /* 手机端标题再缩小一档 */
        font-size:13px;

        margin:0 0 4px;

        line-height:1.2;

        color:#102f63;

    }


    .nax-hero-copy p{

        /* 手机端副标题再缩小一档 */
        font-size:9px;

        line-height:1.4;

        color:#34475f;

    }


    /* 轮播区域：上下留白，不再透明叠在 Hero 上 */
    .nax-carousel-wrap{

        min-height:auto;

        padding:
            16px
            18px
            40px;

        box-sizing:border-box;

        /* 白色背景，让卡片下方有承接 */
        background:#fff;

    }


    /* 手机端卡片：正常放在 Hero 图下方，不压住 */
    .nax-carousel-card{

        width:100%;

        max-width:100%;

        /* 与 Hero 图底部保持距离 */
        margin:0 auto;

        /* 关键：取消 PC 端的向上重叠 */
        transform:none;

        min-height:auto;

        border-radius:18px;

        overflow:hidden;

    }


    .nax-slide{

        padding:18px;

        min-height:auto;

        flex-direction:column;

        align-items:stretch;

    }


    .nax-slide.active{

        display:flex;

    }


    /* 手机图片 */

    .nax-product-image{

        width:100%;
        height:auto;

        aspect-ratio:16 / 9;

        border-radius:14px;

    }


    .nax-product-image img{

        object-fit:cover;

    }


    /* 手机文字 */

    .nax-product-copy{

        padding:
            18px
            4px
            15px;

    }


    .nax-tag{

        font-size:13px;

        padding:5px 10px;

        margin-bottom:12px;

    }


    .nax-product-copy h3{

        font-size:21px;
        line-height:1.35;

        margin-bottom:10px;

    }


    .nax-product-copy p{

        font-size:14px;
        line-height:1.65;

    }


    /* 手机箭头放在产品图片两侧 */

    .nax-arrow{

        top:115px;

        width:36px;
        height:36px;

        font-size:25px;

    }


    .nax-prev{
        left:6px;
    }


    .nax-next{
        right:6px;
    }


    .nax-dots{

        /* 卡片下方正常间距 */
        margin-top:20px;

        gap:7px;

    }


    .nax-dot{

        width:45px;

    }

}