/* ==========================================================
   深圳市显科科技有限公司
   官网 V2.0
   Base.css

   全局基础样式
   Typography
   Section
   Common Element

========================================================== */



/* ===========================================
   Body
=========================================== */
html, body {
    scroll-behavior: smooth;
}

body {
    opacity: 0;
    animation: pageFade 0.6s ease forwards;
}

@keyframes pageFade {
    to {
        opacity: 1;
    }
}

body{

    min-width:320px;

    overflow-x:hidden;

}



/* ===========================================
   Main
=========================================== */

main{

    position:relative;

}



/* ===========================================
   Section
=========================================== */

.section{

    position:relative;

    padding:100px 0;

}



.section--light{

    background:#fff;

}



.section--gray{

    background:var(--section-bg);

}



.section--dark{

    background:#061A32;

    color:#fff;

}



/* ===========================================
   Title
=========================================== */

.section__header{

    text-align:center;

    margin-bottom:60px;

}



.section__tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:30px;

    padding:0 18px;

    border-radius:var(--radius-xs);

    background:var(--primary);

    color:#fff;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:20px;

}



.section__title{

    font-size:clamp(30px,3vw,42px);

    font-weight:600;

    color:var(--text-primary);

    line-height:1.2;

    margin-bottom:20px;

    letter-spacing:-.5px;

}


.section__title::after{

    content:\"\";

    display:block;

    width:40px;

    height:3px;

    background:var(--primary);

    margin:16px auto 0;

    border-radius:1px;

}



.section__desc{

    width:min(760px,100%);

    margin:auto;

    font-size:17px;

    color:var(--text-secondary);

    line-height:1.9;

}



/* ===========================================
   Text
=========================================== */

.text-primary{

    color:var(--primary);

}



.text-center{

    text-align:center;

}



.text-white{

    color:#fff;

}



/* ===========================================
   Image
=========================================== */

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}



.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}



/* ===========================================
   Divider
=========================================== */

.divider{

    width:80px;

    height:4px;

    margin:24px auto;

    border-radius:var(--radius-xs);

    background:var(--primary);

}



/* ===========================================
   Badge
=========================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:80px;

    height:32px;

    padding:0 14px;

    border-radius:var(--radius-xs);

    background:var(--primary);

    color:#fff;

    font-size:13px;

    font-weight:600;

}



/* ===========================================
   Background Helper
=========================================== */

.bg-primary{

    background:var(--primary);

}



.bg-white{

    background:#fff;

}



.bg-gray{

    background:var(--section-bg);

}



/* ===========================================
   Visibility
=========================================== */

.pc{

    display:block;

}



.mobile{

    display:none;

}



/* ===========================================
   Animation Helper
=========================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

}



.fade-left{

    opacity:0;

    transform:translateX(-40px);

}



.fade-right{

    opacity:0;

    transform:translateX(40px);

}



/* ===========================================
   Radius Helper
=========================================== */

.radius-sm{

    border-radius:var(--radius-sm);

}



.radius-md{

    border-radius:var(--radius-md);

}



.radius-lg{

    border-radius:var(--radius-lg);

}



/* ===========================================
   Shadow Helper
=========================================== */

.shadow-sm{

    box-shadow:var(--shadow-sm);

}



.shadow-md{

    box-shadow:var(--shadow-md);

}



.shadow-lg{

    box-shadow:var(--shadow-lg);

}

@media (max-width:768px){

/* =========================
   全局间距优化
========================= */

.section{
    padding:60px 0;
}

.container{
    padding:0 16px;
}

/* =========================
   HERO优化
========================= */

.hero{
    min-height:80vh;
    text-align:left;
}

.hero__title{
    font-size:28px;
    line-height:1.4;
}

.hero__description{
    font-size:14px;
    line-height:1.8;
}

.hero__actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
}

/* =========================
   ABOUT（1列）
========================= */

.about__grid{
    grid-template-columns:1fr;
    gap:16px;
}

.about__card{
    padding:24px 20px;
}

/* =========================
   PRODUCT（单列）
========================= */

.products__grid{
    grid-template-columns:1fr;
    gap:16px;
}

/* =========================
   SOLUTION（上下结构）
========================= */

.solution__item{
    flex-direction:column !important;
    gap:24px;
    text-align:left;
}

.solution__image{
    min-height:200px;
}

/* =========================
   CASE（单列）
========================= */

.case__grid{
    grid-template-columns:1fr;
    gap:16px;
}

/* =========================
   NEWS（单列）
========================= */

.news__grid{
    grid-template-columns:1fr;
    gap:16px;
}

/* =========================
   FOOTER优化
========================= */

.footer__grid{
    grid-template-columns:1fr;
    gap:30px;
}

.footer__bottom{
    flex-direction:column;
    gap:8px;
    text-align:center;
}

/* =========================
   通用按钮优化
========================= */

.btn{
    width:100%;
}

}