:root{--ink:#15212e;--sub:#5b6b7c;--line:#e2e8ee;--bg:#f5f7fa;--card:#fff;
--navy:#123a5c;--accent:#f30c0c;--accent-dk:#d40a0a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.8 -apple-system,"Segoe UI","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}

/* 顶条 */
.topbar{background:var(--navy);color:#cfe0ef;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;padding-top:7px;padding-bottom:7px;gap:14px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}

/* 页头 */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.logo img{height:52px;width:auto}
nav.main{display:flex;gap:26px;font-weight:600;font-size:15px}
nav.main>div{position:relative}
nav.main>a,nav.main>div>a{padding:26px 0;display:inline-block;color:var(--ink)}
nav.main a:hover{color:var(--accent)}
nav.main .drop{position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--line);
border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(16,24,40,.12);min-width:230px;
display:none;flex-direction:column;padding:8px 0}
nav.main>div:hover .drop{display:flex}
nav.main .drop a{padding:9px 18px;font-weight:500;font-size:14.5px}
nav.main .drop a:hover{background:#f2f6fa;color:var(--accent)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:18px;cursor:pointer}

/* Banner 轮播（按老站原版设计 1:1 还原） */
.slider{position:relative;overflow:hidden;background:#f2f2f2}
.slide{display:none;position:relative;min-height:560px;background:#fefefe center/cover no-repeat}
.slide.on{display:block;animation:slideIn .9s ease}
@keyframes slideIn{from{opacity:.2}to{opacity:1}}
.slide .inner{max-width:1200px;margin:0 auto;padding:60px 22px 64px;min-height:560px;
display:flex;align-items:flex-end}
.slide .box{max-width:600px;padding-bottom:26px}
.slide.s-right .inner{justify-content:flex-end}
.slide h2{font-size:clamp(27px,3.4vw,42px);line-height:1.24;font-weight:600;letter-spacing:.2px;
background:linear-gradient(to right,#f30c0c 0%,#f39f3d 100%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.zig{width:200px;min-height:14px;margin-top:16px;
background:0 repeat-x url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='15'%3E%3Cpolygon fill='%23f30c0c' points='8.98 0 0 9.13 0 14.52 9 5.4 18 14.52 18 9.13'/%3E%3C/svg%3E")}
.slide p{margin-top:16px;font-size:clamp(15px,1.8vw,19px);color:#333}
.slide .more{display:inline-block;margin-top:24px;background:#f30c0c;color:#fff;
padding:12px 36px;border-radius:5px;font-weight:700;font-size:15px}
.slide .more:hover{background:#d40a0a}
.s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;
border-radius:50%;background:#fff;border:1px solid #e2e2e2;color:#333;font-size:20px;cursor:pointer;
display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(16,24,40,.12)}
.s-arrow:hover{color:#f30c0c}
.s-arrow.prev{left:16px}.s-arrow.next{right:16px}
.dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:6}
.dots i{width:10px;height:10px;border-radius:50%;background:rgba(19,33,46,.22);cursor:pointer;transition:.2s}
.dots i.on{background:#f30c0c}
@media(max-width:767px){.slide{min-height:400px}.slide .inner{min-height:400px;padding:40px 20px 56px}
.s-arrow{display:none}}
.btn{display:inline-block;padding:13px 30px;border-radius:8px;font-weight:700;font-size:15.5px}
.btn-o{background:var(--accent);color:#fff}
.btn-o:hover{background:var(--accent-dk)}

/* 数据条 */
.stats{background:var(--navy);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:26px;padding-bottom:26px;text-align:center}
.stats b{display:block;font-size:clamp(24px,3vw,34px);color:#ff9d9d}
.stats span{font-size:13.5px;color:#c9d8e6;letter-spacing:.4px}

/* 区块 */
section{padding:72px 0}
.s-head{text-align:center;max-width:720px;margin:0 auto 44px}
.s-head h2{font-size:clamp(24px,3.2vw,34px);font-weight:800}
.s-head h2 span{color:var(--accent)}
.s-head p{margin-top:10px;color:var(--sub)}

/* 产品分类网格 */
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
transition:transform .18s,box-shadow .18s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,24,40,.14)}
.pcard img{aspect-ratio:1/.86;object-fit:cover;width:100%}
.pcard .t{padding:13px 15px 15px;font-weight:700;font-size:14.5px;text-align:center}
.pcard .t small{display:block;font-weight:500;color:var(--sub);font-size:12px;margin-top:2px}

/* 关于 */
.about{background:#fff}
.about .cols{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.about img{border-radius:12px}
.about h2{font-size:clamp(23px,3vw,32px);font-weight:800}
.about h2 span{color:var(--accent)}
.about p{margin-top:14px;color:#3c4c5c}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.badges span{background:#fdeaea;color:#a31212;border:1px solid #f5b8b8;border-radius:999px;
padding:5px 14px;font-size:13px;font-weight:600}
.about .more-btn{display:inline-block;margin-top:22px}

/* 工艺流程 */
.process{background:#fff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{display:flex;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px}
.step b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:15px}
.step h4{font-size:15.5px}
.step p{font-size:13.5px;color:var(--sub);margin-top:3px}

/* 新闻 */
.news .list{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ncard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px}
.ncard time{font-size:12.5px;color:var(--accent);font-weight:700;letter-spacing:.5px}
.ncard h4{margin-top:8px;font-size:15.5px;line-height:1.5}
.ncard p{margin-top:8px;font-size:13.5px;color:var(--sub)}
.ncard a.more{display:inline-block;margin-top:12px;font-size:13.5px;font-weight:700;color:var(--navy)}

/* CTA 条 */
.cta-band{background:linear-gradient(100deg,var(--navy),#1d5a8d);color:#fff;text-align:center}
.cta-band h2{font-size:clamp(22px,3vw,32px);font-weight:800}
.cta-band p{margin-top:10px;color:#cfe0ef}
.cta-band .btn{margin-top:24px}

/* 页脚 */
footer.site{background:linear-gradient(rgba(20,20,20,.74),rgba(20,20,20,.74)),url("../img/footerbg.jpg") center/cover no-repeat;color:#c5ccd3;font-size:14px}
footer.site .cols{display:grid;grid-template-columns:1fr 1fr 1.2fr 1.4fr;gap:36px;padding:54px 22px 40px;max-width:1160px;margin:0 auto}
footer.site h4{color:#fff;font-size:15.5px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.5px}
footer.site a{color:#c5ccd3}
footer.site a:hover{color:#f30c0c}
footer.site ul{list-style:none}
footer.site li{margin:9px 0;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.14)}
footer.site li:last-child{border-bottom:0}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.18);padding:16px 0;text-align:center;font-size:13px;color:#aab2ba;background:rgba(20,20,20,.72)}

/* 响应式 */
@media(max-width:960px){
nav.main{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;
border-bottom:1px solid var(--line);padding:10px 22px 18px;gap:0}
nav.main.open{display:flex}
nav.main>a,nav.main>div>a{padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
nav.main .drop{position:static;display:none;box-shadow:none;border:0;padding-left:14px}
nav.main>div:hover .drop{display:none}
nav.main>div.open .drop{display:flex}
.burger{display:block}
.grid-5{grid-template-columns:repeat(2,1fr)}
.grid-4,.news .list{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:1fr 1fr}
.about .cols{grid-template-columns:1fr}
footer.site .cols{grid-template-columns:1fr;gap:22px}
}
@media(max-width:560px){
.grid-5,.grid-4,.news .list,.steps{grid-template-columns:1fr}
.stats .wrap{grid-template-columns:1fr 1fr}
.hero .wrap{padding:72px 22px 84px}
}
