:root{--navy:#0E2C50;--navy2:#163F6D;--ink:#102B46;--text:#3B4A5C;--muted:#6B7A8C;--bg:#F4F7FC;--line:#E2E8F0;--orange:#FF6A13;--wa:#25D366;--wa-d:#1DA851}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:#fff;font-size:16px;line-height:1.6}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
h1,h2,h3{color:var(--ink);line-height:1.2}
/* header */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9}
.hd .wrap{display:flex;align-items:center;height:72px;gap:32px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--navy);letter-spacing:-.3px;text-decoration:none}
.logo i{width:34px;height:34px;border-radius:8px;background:var(--navy);position:relative}
.logo i:after{content:"";position:absolute;left:8px;top:8px;width:18px;height:18px;border-radius:50%;background:var(--orange)}
.logo span{color:var(--orange)}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px;color:var(--ink);font-weight:500}
.nav a{color:inherit;text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:6px;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn-wa{background:var(--wa);color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.wa-ic{width:18px;height:18px;border-radius:50%;border:2px solid #fff;position:relative;flex:none}
.wa-ic:after{content:"";position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;background:#fff;transform:rotate(45deg)}
/* hero */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;padding:72px 0 80px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:46px;font-weight:800;letter-spacing:-.5px}
.hero p{color:#C9D6E6;font-size:17px;margin:20px 0 30px;max-width:520px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:#DDE6F1}
.checks b{color:var(--wa);margin-right:6px}
.hero-img{border-radius:12px;overflow:hidden;height:380px;box-shadow:0 20px 50px rgba(0,0,0,.35);position:relative}
.tag{position:absolute;left:16px;bottom:16px;background:rgba(14,44,80,.88);color:#fff;font-size:13px;padding:6px 12px;border-radius:4px}
/* stats */
.stats{background:var(--orange);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:26px 20px}
.stats b{display:block;font-size:30px;font-weight:800;line-height:1.1}
.stats span{font-size:14px;opacity:.95}
/* sections */
section{padding:80px 0}
.sec-h{text-align:center;max-width:720px;margin:0 auto 44px}
.sec-h h2{font-size:34px;font-weight:800}
.sec-h p{color:var(--muted);margin-top:12px;font-size:16px}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.2px;color:var(--orange);text-transform:uppercase;margin-bottom:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.card .ph{height:190px;background:#eef2f7}
.card .bd{padding:18px 18px 20px}
.card h3{font-size:18px;font-weight:700}
.card p{font-size:14px;color:var(--muted);margin:6px 0 14px}
.link{color:var(--orange);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
.alt{background:var(--bg)}
.mach .ph{height:220px;background:#fff}
.mach .ph img{object-fit:contain}
.badge{display:inline-block;background:#E8F0FA;color:var(--navy2);font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin-bottom:8px}
.apps{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.app{border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.app .ph{height:150px}
.app div.t{padding:12px 14px;font-weight:600;color:var(--ink);font-size:15px}
.app.ask{background:var(--navy);border-color:var(--navy);display:flex;flex-direction:column;justify-content:center;padding:18px;color:#fff}
.app.ask b{font-size:17px;line-height:1.3}
.app.ask span{font-size:13px;color:#C9D6E6;margin:8px 0 14px}
/* one-stop */
.stop{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.step .ph{height:130px}
.step .bd{padding:14px}
.step em{font-style:normal;color:var(--orange);font-weight:800;font-size:13px}
.step h3{font-size:16px;margin:2px 0 4px}
.step p{font-size:13px;color:var(--muted)}
/* cases */
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.case .big{height:360px;border-radius:12px;overflow:hidden}
.case .sm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.case .sm div{height:120px;border-radius:8px;overflow:hidden}
.case h3{font-size:26px;font-weight:800}
.case ul{list-style:none;margin:16px 0 0}
.case li{padding:6px 0;font-size:15px}
.case li b{color:var(--wa);margin-right:8px}
/* cta band */
.band{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);color:#fff;text-align:center;padding:64px 0}
.band h2{color:#fff;font-size:32px;font-weight:800}
.band p{color:#C9D6E6;margin:10px 0 26px}
.ft{background:#0A2140;color:#9FB0C6;font-size:14px;padding:36px 0}
.ft .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ft .logo{color:#fff}
.chat{position:fixed;right:24px;bottom:96px;width:58px;height:58px;border-radius:50%;background:var(--navy2);box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.chat:before{content:"";width:26px;height:20px;border-radius:6px;background:#fff}
.mbar{display:none}
.burger{display:none}
/* ===== 以下为交互必需的新增样式（效果图源码未含） ===== */
.mnav{display:none;background:#fff;border-bottom:1px solid var(--line)}
.mnav a{display:block;padding:14px 20px;color:var(--ink);font-weight:500;text-decoration:none;border-top:1px solid var(--line);font-size:15px}
.mnav a.on{color:var(--orange)}
.fq p{display:none}
.fq.open p{display:block}
.fq h3{cursor:pointer}
.gal .th>div{cursor:pointer}
@media (max-width:760px){
 .nav,.hd .btn{display:none}
 .burger{display:block;margin-left:auto;width:26px;height:18px;border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);position:relative;cursor:pointer}
 .burger:after{content:"";position:absolute;left:0;right:0;top:4.5px;border-top:3px solid var(--navy)}
 .mnav.open{display:block}
 .hd .wrap{height:60px}
 .hero{padding:36px 0 40px}
 .hero .wrap{grid-template-columns:1fr;gap:26px}
 .hero h1{font-size:31px}
 .hero p{font-size:15px;margin:14px 0 20px}
 .hero .btn{flex:1;justify-content:center}
 .hero-img{height:230px}
 .checks{gap:10px 16px;font-size:13px}
 .stats .wrap{grid-template-columns:1fr 1fr;gap:16px;padding:22px 16px}
 .stats b{font-size:24px}
 section{padding:48px 0}
 .sec-h{margin-bottom:26px}.sec-h h2{font-size:25px}
 .grid4,.grid3{grid-template-columns:1fr}
 .apps{grid-template-columns:1fr 1fr}
 .stop{grid-template-columns:1fr 1fr}
 .case{grid-template-columns:1fr}.case .big{height:220px}
 .band h2{font-size:24px}
 .chat{display:none}
 .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:10}
 .mbar a{height:54px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;font-size:15px}
 .mbar .q{background:var(--orange)}.mbar .w{background:var(--wa)}
 body{padding-bottom:54px}
}
/* ===== 第 2 批追加样式：左右交替区块、应用页页尾双列块（复用既有配色与组件） ===== */
@media (min-width:761px){
 .rev{grid-template-columns:1fr 1.1fr}
 .rev .gal{order:2}
 .case.rev .big{order:2}
}
.prow{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.prow .pic{height:300px;border-radius:12px;overflow:hidden}
@media (max-width:760px){
 .prow{grid-template-columns:1fr}
 .rev .gal{order:0}
 .case.rev .big{order:0}
 .prow .pic{height:220px}
}

/* ===== 第 2 批追加：详情页组件样式（图库/卖点/流程/包含/询价/FAQ，取自第 1 批生产线页，规则一致） ===== */

.crumb{font-size:13px;color:var(--muted);padding:18px 0 0}
.crumb b{color:var(--ink);font-weight:600}
.crumb a{color:inherit;text-decoration:none}
.top{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;padding:22px 0 64px;align-items:start}
.gal .main{height:420px;border-radius:12px;overflow:hidden}
.gal .th{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.gal .th div{height:84px;border-radius:8px;overflow:hidden;border:2px solid transparent}
.gal .th div.on{border-color:var(--orange)}
.info h1{font-size:36px;font-weight:800;letter-spacing:-.3px}
.info .lead{font-size:17px;color:var(--text);margin:14px 0 20px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{background:#E8F0FA;color:var(--navy2);font-size:13px;font-weight:600;padding:6px 12px;border-radius:20px}
.pts{list-style:none;border-top:1px solid var(--line);margin-bottom:26px}
.pts li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;gap:10px}
.pts li b{color:var(--wa)}
.info .cta{display:flex;gap:12px;flex-wrap:wrap}
.btn-line{border:1px solid var(--navy2);color:var(--navy2);background:#fff}
.note{font-size:13px;color:var(--muted);margin-top:12px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.fl{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 20px;position:relative}
.fl em{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-weight:800;align-items:center;justify-content:center;font-size:14px;margin-bottom:12px}
.fl h3{font-size:17px;margin-bottom:6px}
.fl p{font-size:14px;color:var(--muted)}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.inc .it{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:14px;background:#fff}
.inc .it div.p{width:78px;height:64px;border-radius:6px;overflow:hidden;flex:none}
.inc h3{font-size:16px}
.inc p{font-size:13px;color:var(--muted)}
.ask{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ask h2{font-size:30px;font-weight:800}
.ask p{color:var(--muted);margin:10px 0 20px}
.form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.form .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px}
.form .row span{color:var(--muted)}
.form .row b{color:var(--ink);font-weight:600}
.faq{max-width:820px;margin:0 auto}
.fq{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:12px;padding:18px 20px}
.fq h3{font-size:16px;display:flex;justify-content:space-between}
.fq h3:after{content:"+";color:var(--orange);font-size:20px;line-height:1}
.fq.open h3:after{content:"−"}
.fq p{font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:760px){
 .top{grid-template-columns:1fr;gap:24px;padding:14px 0 40px}
 .gal .main{height:240px}.gal .th div{height:58px}
 .info h1{font-size:27px}
 .info .btn{flex:1;justify-content:center}
 .flow,.inc{grid-template-columns:1fr}
 .ask{grid-template-columns:1fr;gap:20px}.ask h2{font-size:24px}
}