/*
================================================
 装机必备软件库
 高级简约现代版 CSS
 JustNews Child
================================================
*/


/* =================================================
   页面整体背景
================================================= */


body{


    background:


    radial-gradient(

        circle at 10% 0%,

        rgba(59,130,246,.12),

        transparent 38%

    ),



    radial-gradient(

        circle at 90% 10%,

        rgba(139,92,246,.10),

        transparent 35%

    ),


    #f8fafc;


}





/* 背景网格 */


body::before{


    content:"";


    position:fixed;


    inset:0;



    background:


    linear-gradient(

        rgba(15,23,42,.025) 1px,

        transparent 1px

    ),



    linear-gradient(

        90deg,

        rgba(15,23,42,.025) 1px,

        transparent 1px

    );



    background-size:


    42px 42px;



    pointer-events:none;


    z-index:-1;


}








/* =================================================
   页面容器
================================================= */


.soft-page{


    position:relative;


    max-width:1200px;


    margin:0 auto;


    padding:


    50px 20px 80px;


}







/* 柔光装饰 */


.soft-page::before{


    content:"";


    position:absolute;


    width:800px;


    height:800px;



    left:-350px;


    top:-300px;




    background:


    radial-gradient(

        circle,

        rgba(59,130,246,.10),

        transparent 70%

    );



    filter:blur(80px);


    z-index:-1;


}







.soft-page::after{


    content:"";


    position:absolute;


    width:700px;


    height:700px;



    right:-350px;


    top:-250px;



    background:


    radial-gradient(

        circle,

        rgba(139,92,246,.08),

        transparent 70%

    );



    filter:blur(90px);


    z-index:-1;


}








/* =================================================
   Hero区域
================================================= */


.soft-hero{


    position:relative;


    display:flex;


    align-items:center;



    min-height:380px;



    margin-bottom:25px;


}






.hero-content{


    position:relative;


    z-index:2;


    max-width:760px;


}







.soft-hero h1{


    margin:0 0 20px;



    font-size:52px;



    line-height:1.15;



    font-weight:900;



    letter-spacing:-2px;



    background:


    linear-gradient(

        135deg,

        #0f172a,

        #2563eb,

        #7c3aed

    );



    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}








.soft-hero p{


    max-width:680px;



    font-size:17px;



    line-height:1.8;



    color:#64748b;


}









/* =================================================
   Hero特点
================================================= */


.hero-feature-grid{


    display:grid;



    grid-template-columns:

    repeat(3,1fr);



    gap:15px;



    max-width:700px;



    margin-top:35px;


}







.hero-item{


    display:flex;



    align-items:center;



    gap:12px;



    padding:15px;



    border-radius:18px;



    background:


    rgba(255,255,255,.65);



    backdrop-filter:

    blur(15px);



    border:


    1px solid

    rgba(255,255,255,.8);


}







.hero-icon{


    width:44px;


    height:44px;


    flex-shrink:0;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:14px;



    background:white;



    overflow:hidden;


}






.hero-icon img{


    width:36px;


    height:36px;



    object-fit:contain;



    display:block;


}







.hero-item strong{


    display:block;


    font-size:14px;


    color:#0f172a;


}





.hero-item span{


    display:block;


    margin-top:3px;



    font-size:12px;


    color:#94a3b8;


}









/* =================================================
   Hero右侧动画装饰
================================================= */


.hero-animation{


    position:absolute;



    right:30px;


    top:30px;



    width:360px;



    height:360px;


}








.main-device{


    position:absolute;


    left:90px;


    top:90px;



    width:170px;


    height:170px;



    display:flex;



    flex-direction:column;



    align-items:center;



    justify-content:center;



    border-radius:35px;



    background:


    linear-gradient(

        145deg,

        rgba(255,255,255,.95),

        rgba(241,245,249,.8)

    );



    backdrop-filter:blur(20px);



    box-shadow:


    0 30px 80px

    rgba(37,99,235,.15);



    animation:

    deviceFloat 5s infinite;


}







.device-top{


    font-size:10px;


    letter-spacing:3px;


    color:#94a3b8;


}







.device-icon{


    width:70px;


    height:70px;



    display:flex;


    align-items:center;


    justify-content:center;



    overflow:hidden;



    border-radius:22px;



    background:white;


}







.device-icon img{


    width:100%;


    height:100%;



    object-fit:contain;



}







.device-text{


    margin-top:5px;


    font-size:14px;


    font-weight:700;


    color:#0f172a;


}








.orbit{


    position:absolute;



    border-radius:50%;



    border:

    1px dashed

    rgba(37,99,235,.18);


}






.orbit-one{


    width:300px;


    height:300px;



    left:25px;


    top:25px;



    animation:

    rotate 18s linear infinite;


}






.orbit-two{


    width:240px;


    height:240px;



    left:55px;


    top:55px;



    animation:

    rotate 12s linear infinite reverse;


}








.float-card{


    position:absolute;



    padding:

    10px 16px;



    border-radius:16px;



    background:


    rgba(255,255,255,.85);



    backdrop-filter:

    blur(15px);



    box-shadow:


    0 15px 40px

    rgba(15,23,42,.08);



    font-size:13px;


    color:#334155;


}







.float-card span{


    color:#2563eb;


    margin-right:5px;


}







.card-a{


    left:0;


    top:90px;


}



.card-b{


    right:0;


    top:160px;


}



.card-c{


    left:70px;


    bottom:10px;


}







@keyframes rotate{


    from{


        transform:rotate(0);


    }


    to{


        transform:rotate(360deg);


    }


}





@keyframes deviceFloat{


    0%,100%{


        transform:translateY(0);


    }


    50%{


        transform:translateY(-12px);


    }


}

/* =================================================
   软件分类标题
================================================= */


.soft-section{


    margin-bottom:35px;


}





.soft-section h2{


    position:relative;


    padding-left:18px;



    margin:

    0 0 18px;



    font-size:22px;



    font-weight:700;



    color:#0f172a;


}






.soft-section h2::before{


    content:"";


    position:absolute;



    left:0;


    top:50%;



    transform:translateY(-50%);



    width:6px;



    height:24px;



    border-radius:20px;



    background:


    linear-gradient(

        #2563eb,

        #8b5cf6

    );


}








/* =================================================
   软件列表
================================================= */


.soft-grid{


    display:grid;



    grid-template-columns:


    repeat(4,minmax(0,1fr));



    gap:18px;


}








/* =================================================
   软件卡片
================================================= */


.soft-card{


    height:160px;



    display:flex;



    flex-direction:column;



    padding:14px;



    overflow:hidden;



    border-radius:18px;



    background:


    rgba(255,255,255,.92);



    border:


    1px solid

    rgba(226,232,240,.85);



    box-shadow:


    0 8px 30px

    rgba(15,23,42,.04);



    transition:.3s;


}





.soft-card:hover{


    transform:


    translateY(-5px);



    box-shadow:


    0 20px 45px

    rgba(15,23,42,.10);


}







/* =================================================
   软件顶部
================================================= */


.soft-top{


    display:flex;


    align-items:center;


    gap:12px;


    height:44px;


    flex-shrink:0;


    overflow:hidden;


}







/* 软件LOGO */


.soft-logo{


    width:44px;


    height:44px;



    flex-shrink:0;



    overflow:hidden;



    border-radius:12px;



    background:#fff;



    display:flex;



    align-items:center;



    justify-content:center;


}





.soft-logo img{


    width:100%;


    height:100%;



    object-fit:contain;



    display:block;


}







.logo-error{


    display:none;



    font-size:22px;


}









/* =================================================
   软件文字区域
================================================= */


.soft-info{


    min-width:0;

    width:calc(100% - 56px);

    padding-top:1px;

    overflow:hidden;

    position:relative;


}


.soft-info h3.need-scroll:hover{


    overflow:visible;

    text-overflow:clip;


    animation:

    soft-title-scroll var(--scroll-time) linear forwards;


}




.soft-info h3{


    margin:0;


    font-size:15px;


    font-weight:700;


    line-height:22px;


    color:#0f172a;


    white-space:nowrap;


}







.soft-info span{


    display:block;


    margin-top:6px;


    font-size:12px;


    line-height:18px;


    color:#94a3b8;


    white-space:nowrap;


}





/* =================================================
   鼠标悬浮滚动显示完整文字
================================================= */
/* =================================================
   鼠标悬浮文字滚动
================================================= */


/* JS自动生成的滚动窗口 */


.scroll-window{


    width:100%;


    overflow:hidden;


    white-space:nowrap;


}





.scroll-window.need-scroll{


    cursor:pointer;


}







/*
标题和简介移动
*/
.scroll-window.need-scroll:hover h3,
.scroll-window.need-scroll:hover span{


    animation:

    text-scroll

    var(--scroll-time)

    linear

    forwards;


}







@keyframes text-scroll{


    from{


        transform:translateX(0);


    }



    to{


        transform:

        translateX(var(--scroll-distance));


    }


}

/* 默认窗口 */

.soft-info h3,
.soft-info span,
.soft-tags{

    white-space:nowrap;

}


/* 保持原来的颜色 */

.soft-info h3{

    color:#0f172a;

}


.soft-info span{

    color:#94a3b8;

}



.soft-info span.need-scroll:hover{


    overflow:visible;

    text-overflow:clip;

    white-space:nowrap;


    animation:

    soft-desc-scroll var(--scroll-time) linear forwards;


}


/* 标签滚动 */


.soft-tags.need-scroll:hover{


    overflow:visible;


    animation:

tag-scroll var(--scroll-time)  infinite;


}





@keyframes tag-scroll{


    0%{

        transform:translateX(0);

    }


    100%{

        transform:translateX(var(--scroll-distance));

    }


}






/* =================================================
   软件标签区域
================================================= */



.soft-tags{


    display:flex;

    align-items:center;

    gap:6px;

    height:26px;

    margin-top:14px;

    margin-bottom:8px;

    overflow:hidden;

    white-space:nowrap;

    width:100%;

}






/*
   标签整体滚动
   鼠标移入整个区域一起移动
*/










.tag{


    flex-shrink:0;



    padding:


    4px 10px;



    border-radius:999px;



    background:#eff6ff;



    color:#2563eb;



    font-size:11px;


}











.tag{


    flex-shrink:0;



    padding:


    4px 10px;



    border-radius:


    999px;



    background:


    #eff6ff;



    color:


    #2563eb;



    font-size:11px;



    line-height:18px;


}








/* =================================================
   下载链接
================================================= */


.soft-link{


    position:relative;



    height:34px;



    margin-top:0;



    flex-shrink:0;



}







.link-url{


    display:block;



    height:34px;



    line-height:34px;



    padding:


    0 42px 0 12px;



    border-radius:10px;



    background:


    #f8fafc;



    color:#64748b;



    font-size:12px;



    text-decoration:none;



    overflow:hidden;



    white-space:nowrap;



    text-overflow:ellipsis;



    transition:.25s;


}





.link-url:hover{


    background:#eff6ff;



    color:#2563eb;


}








/* =================================================
   高级复制按钮
================================================= */


.copy-btn{


    position:absolute;



    right:5px;



    top:50%;



    transform:translateY(-50%);



    width:28px;



    height:28px;



    border:none;



    border-radius:9px;



    display:flex;



    align-items:center;



    justify-content:center;



    cursor:pointer;



    background:


    rgba(255,255,255,.9);



    backdrop-filter:blur(10px);



    box-shadow:


    0 5px 15px

    rgba(15,23,42,.08);



    transition:.25s;


}






.copy-btn svg{


    width:16px;



    height:16px;



    fill:none;



    stroke:#64748b;



    stroke-width:2;



    transition:.25s;


}






.copy-btn:hover{


    transform:


    translateY(-50%)

    scale(1.12);



    background:


    #2563eb;


}






.copy-btn:hover svg{


    stroke:white;


}









/* 点击成功状态 */

.copy-btn.active{


    background:#22c55e;


}





.copy-btn.active svg{


    stroke:white;


}










/* =================================================
   卡片底部紧凑控制
================================================= */


.soft-card > *{


    flex-shrink:0;


}





.soft-link{


    margin-bottom:0!important;


}








/* =================================================
   响应式
================================================= */


@media(max-width:1100px){



.soft-grid{


    grid-template-columns:


    repeat(3,1fr);


}




.hero-animation{


    opacity:.45;


}




}





@media(max-width:768px){



.soft-page{


    padding:


    30px 15px 60px;


}





.soft-hero{


    min-height:auto;


}





.soft-hero h1{


    font-size:34px;


}




.hero-animation{


    display:none;


}




.hero-feature-grid{


    grid-template-columns:


    1fr;


}





.soft-grid{


    grid-template-columns:


    1fr;


}




.soft-card{


    height:160px;


}




}







/* =================================================
   复制成功提示动画
================================================= */


@keyframes copySuccess{


    0%{


        transform:


        translateY(-50%)

        scale(1);


    }



    50%{


        transform:


        translateY(-50%)

        scale(1.15);


    }



    100%{


        transform:


        translateY(-50%)

        scale(1);


    }


}





.copy-btn.active{


    animation:


    copySuccess .35s ease;


}