/* =====================
Hero Banner
===================== */


.home-hero{

height:790px;

position:relative;

background-image:url('/wp-content/uploads/2026/08/home_banner.png');

background-size:cover;

background-position:center;


display:flex;

align-items:center;


overflow:hidden;

}



/* 左侧渐变遮罩 */

.home-hero::before{

content:"";

position:absolute;

inset:0;


background:

linear-gradient(
90deg,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.55) 35%,
rgba(0,0,0,0.15) 65%,
rgba(0,0,0,0) 100%
);


z-index:1;

}



/* 内容容器 */

.hero-container{


position:relative;

z-index:2;


width:100%;


max-width:1200px;


margin:auto;


padding:0;


}


/* 左侧文字 */

.hero-content{


width:600px;


color:white;


}



.hero-content h1{


font-size:56px;

line-height:1.15;

font-weight:700;

margin-bottom:25px;

color:white;
}



.hero-content p{


font-size:20px;

line-height:1.7;

max-width:520px;

margin-bottom:40px;


}



/* 按钮 */

.hero-actions{


display:flex;

gap:20px;


}


.hero-btn{


padding:15px 35px;


background:#0066cc;


color:white;


text-decoration:none;


border-radius:4px;


transition:.3s;


}


.hero-btn:hover{

background:#0050a5;

}



.hero-btn.secondary{


background:transparent;


border:1px solid rgba(255,255,255,.8);


}


/* =====================
Product Categories
===================== */


.home-categories{


padding:60px 0 0 0;


background:#fff;


}



.categories-container{


max-width:1600px;

margin:auto;

padding:0 60px;


}



/* 标题 */


.section-header{


text-align:center;

margin-bottom:60px;


}


.section-header h2{


font-size:42px;

color:#111;

margin-bottom:15px;


}



.section-header p{


font-size:18px;

color:#666;

}



/* Grid */


.category-grid{


    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;

}



/* Card */


.category-card{


    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:transform .35s ease, box-shadow .35s ease;

    display:flex;
    flex-direction:column;
}



.category-card:hover{


    transform:translateY(-6px);
    box-shadow:0 15px 45px rgba(0,0,0,.14);

}




.category-card a{


text-decoration:none;


color:inherit;


}



/* 图片 */


.category-image{


    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;


}



.category-image img{

    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;

}



.category-card:hover img{


transform:scale(1.05);


}



/* 内容 */


.category-content{


    padding:25px;

    display:flex;
    flex-direction:column;

    flex:1;
}



.category-content h3{


    font-size:22px;
    margin:0 0 12px;


color:#111;


}



.category-content p{


color:#666;


line-height:1.6;


height:50px;


}



.category-content span{

    display:block;

    margin-top:auto;
    padding-top:20px;

    color:#0066cc;
    font-weight:600;


}

/* =====================
   Engineer Assistance CTA
===================== */

.category-engineer-cta{

    margin-top:70px;

    padding:38px 45px;

    background:#f3f6fa;

    border-top:1px solid #dfe6ee;

    border-bottom:1px solid #dfe6ee;

}


.engineer-cta-content{

    max-width:1350px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

}


.engineer-cta-text{

    flex:0 1 850px;

}


.engineer-cta-text h3{

    margin:0 0 10px;

    font-size:26px;

    line-height:1.3;

    color:#101820;

}


.engineer-cta-text p{

    max-width:900px;

    margin:0;

    color:#43566d;

    font-size:16px;

    line-height:1.8;

}


.engineer-cta-action{

    flex-shrink:0;

}


.engineer-cta-button{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 27px;

    background:#0066cc;

    color:#fff;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    border-radius:5px;

    box-shadow:0 8px 20px rgba(0,102,204,.18);

    transition:

        background .3s ease,

        transform .3s ease,

        box-shadow .3s ease;

}


.engineer-cta-button span{

    font-size:19px;

    line-height:1;

    transition:transform .3s ease;

}


.engineer-cta-button:hover{

    background:#0052a3;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(0,102,204,.25);

}


.engineer-cta-button:hover span{

    transform:translateX(4px);

}