/* 绵阳稳和交通设施有限公司 — 蓝图 × 工业硬朗体系 */
:root{
  --blue-deep:#0E2A47;
  --blue:#1D4E7E;
  --blue-line:#3E6A96;
  --amber:#C97F1F;
  --amber-dk:#A96813;
  --ink:#22313F;
  --sub:#5B6878;
  --line:#C6CCD4;
  --sand:#F2EFE7;
  --paper:#FBFAF6;
  --fs-display:clamp(36px,6vw,62px);
  --fs-h1:clamp(30px,4vw,44px);
  --fs-h2:26px;
  --fs-h3:18px;
  --fs-body:16px;
  --fs-small:12px;
  --sp4:4px;--sp8:8px;--sp12:12px;--sp16:16px;--sp24:24px;--sp32:32px;--sp48:48px;--sp64:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;font-size:var(--fs-body);line-height:1.75;color:var(--ink);background:var(--sand)}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-line)}
a:hover{color:var(--amber-dk);border-bottom-color:var(--amber)}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
h1,h2,h3{font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
h1{font-size:var(--fs-display);letter-spacing:-.02em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700}
p{max-width:68ch}
strong{font-weight:700}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--sp24)}
.anno{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}

/* 页头 */
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp24);min-height:72px;flex-wrap:wrap;padding-top:var(--sp8);padding-bottom:var(--sp8)}
.brand{border:none;display:inline-flex;align-items:center}
.brand img{display:block}
.site-nav{display:flex;gap:var(--sp24);flex-wrap:wrap}
.site-nav a{border:none;font-size:15px;color:var(--ink);padding:var(--sp4) 0}
.site-nav a:hover{color:var(--amber-dk)}
.site-nav a[aria-current="page"]{color:var(--blue);border-bottom:2px solid var(--amber)}
.nav-cta{background:var(--blue-deep);color:#fff;padding:var(--sp8) var(--sp16) !important}
.nav-cta:hover{background:var(--amber-dk);color:#fff}
@media(max-width:900px){.head-in{flex-direction:column;align-items:flex-start;gap:var(--sp12)}}

/* 按钮 */
.btn{display:inline-block;border:1px solid transparent;padding:12px var(--sp24);font-size:var(--fs-body);font-weight:700;transition:transform .12s ease,background .12s ease}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-dk);color:#fff;transform:translate(-2px,-2px)}
.btn-ghost{border-color:var(--blue-line);color:#F2EFE7}
.btn-ghost:hover{border-color:#fff;color:#fff}
.btn-lg{padding:16px var(--sp32)}

/* 首页 hero：左右分栏蓝图底 */
.hero{background:var(--blue-deep);color:#E8EDF3;position:relative;
  background-image:linear-gradient(var(--blue-deep),var(--blue-deep)),repeating-linear-gradient(0deg,transparent 0 59px,rgba(120,160,200,.14) 59px 60px),repeating-linear-gradient(90deg,transparent 0 59px,rgba(120,160,200,.14) 59px 60px)}
.hero .anno{color:#9FB6CC}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp48);align-items:center;padding-top:var(--sp64);padding-bottom:var(--sp64)}
.hero h1{color:#fff;margin:var(--sp16) 0 var(--sp24)}
.hero .lead{color:#C9D6E2;font-size:var(--fs-body);max-width:58ch}
.hero-btns{display:flex;gap:var(--sp16);flex-wrap:wrap;margin-top:var(--sp32)}
.hero-fig figcaption{margin-top:var(--sp12);color:#9FB6CC}
.hero .mail,.hero .btn{border-bottom-width:1px}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* 区块头 */
.sec-head{margin-bottom:var(--sp32);border-left:3px solid var(--amber);padding-left:var(--sp16)}
.sec-head .anno{display:block;margin-bottom:var(--sp8)}
.sec-intro{margin-top:var(--sp12);color:var(--sub)}

/* 能力区：一主两辅 */
.caps{background:var(--paper);border-bottom:1px solid var(--line);padding-top:var(--sp64);padding-bottom:var(--sp64)}
.cap-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp32);align-items:stretch}
.cap{border:1px solid var(--line);border-top:3px solid var(--blue);background:var(--paper);padding:var(--sp24)}
.cap-main{padding:var(--sp32)}
.cap-side{display:grid;gap:var(--sp32)}
.cap-side .cap{border-top-color:var(--amber)}
.cap-ico{width:48px;height:48px;color:var(--blue);margin-bottom:var(--sp16)}
.cap p{color:var(--sub);margin-top:var(--sp12)}
.factband{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--sp48)}
.factband li{background:var(--sand);padding:var(--sp16);display:flex;flex-direction:column;gap:var(--sp4)}
.factband strong{font-size:15px}
@media(max-width:900px){.cap-grid{grid-template-columns:1fr}.factband{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 九宫格契约 */
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
.prods{padding-top:var(--sp64);padding-bottom:var(--sp64)}
.item{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.item h2,.item h3{font-size:var(--fs-h3);padding:var(--sp16) var(--sp16) 0}
.item p{padding:var(--sp8) var(--sp16) var(--sp16);color:var(--sub);font-size:15px}
.item ul{list-style:none;border-top:1px dashed var(--line);padding:var(--sp12) var(--sp16) var(--sp16)}
.item ul li{font-size:14px;color:var(--sub);padding:var(--sp4) 0 var(--sp4) 16px;position:relative}
.item ul li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background:var(--amber)}
.after-items{margin-top:var(--sp32);color:var(--sub)}

/* 流程 */
.flow{background:var(--blue-deep);color:#E8EDF3;padding-top:var(--sp64);padding-bottom:var(--sp64)}
.flow .sec-head{border-left-color:var(--amber)}
.flow h2{color:#fff}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp32)}
.steps li{border-top:1px solid var(--blue-line);padding-top:var(--sp16)}
.steps .step-no{color:#9FB6CC;display:block;margin-bottom:var(--sp8)}
.steps h3{color:#fff}
.steps p{color:#C9D6E2;font-size:15px;margin-top:var(--sp8)}
.steps-v{grid-template-columns:1fr;gap:var(--sp24)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}

/* FAQ 区 */
.faqsec{background:var(--paper);border-top:1px solid var(--line);padding-top:var(--sp64);padding-bottom:var(--sp64)}
.faqs{border-top:1px solid var(--line);max-width:860px}
.faqs details{border-bottom:1px solid var(--line)}
.faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp16);padding:var(--sp16) 0;font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";font-family:ui-monospace,monospace;color:var(--amber);font-size:20px}
.faqs details[open] summary::after{content:"−"}
.faqs p{color:var(--sub);padding:0 0 var(--sp16)}
.more-link{margin-top:var(--sp24);color:var(--sub)}

/* CTA */
.cta{background:var(--amber);color:#fff}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp32);padding-top:var(--sp48);padding-bottom:var(--sp48);flex-wrap:wrap}
.cta .anno{color:#FBE9CF}
.cta h2{color:#fff}
.cta p{color:#FFF6E8;margin-top:var(--sp12)}
.cta .mail{color:#fff;border-bottom-color:#fff}
.cta .btn-amber{background:var(--blue-deep);color:#fff}
.cta .btn-amber:hover{background:#081C31}

/* 页脚 */
.site-foot{background:var(--blue-deep);color:#C9D6E2;padding-top:var(--sp48);padding-bottom:var(--sp48)}
.foot-in{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:var(--sp32)}
.foot-name{font-weight:800;color:#fff;font-size:var(--fs-h3)}
.foot-note{margin-top:var(--sp8);font-size:14px;max-width:36ch}
.foot-nav{display:flex;flex-direction:column;gap:var(--sp8)}
.foot-nav a,.foot-meta a{color:#C9D6E2;border-bottom:1px solid var(--blue-line)}
.foot-nav a:hover,.foot-meta a:hover{color:#fff;border-bottom-color:var(--amber)}
.foot-meta{font-size:14px}
@media(max-width:900px){.foot-in{grid-template-columns:1fr}}

/* 面包屑 */
.breadcrumb{display:flex;gap:var(--sp8);font-size:var(--fs-small);letter-spacing:.06em;color:var(--sub);padding-top:var(--sp24);padding-bottom:var(--sp12)}
.breadcrumb a{color:var(--sub);border-bottom:none}
.breadcrumb a:hover{color:var(--amber-dk)}
.breadcrumb span{color:var(--line)}

/* 关于页：图文错位 */
.about-hero{background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:var(--sp64)}
.offset-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp48);align-items:start}
.offset-text h1{margin:var(--sp16) 0 var(--sp24)}
.offset-text .lead{color:var(--sub)}
.offset-fig{position:relative;margin-top:var(--sp64);border:1px solid var(--line);padding:var(--sp12);background:var(--sand)}
.offset-fig figcaption{margin-top:var(--sp8)}
.page-body{padding-top:var(--sp64);padding-bottom:var(--sp64)}
.prose-sec{max-width:72ch;margin-bottom:var(--sp48)}
.prose-sec h2{border-bottom:1px solid var(--line);padding-bottom:var(--sp12);margin-bottom:var(--sp16)}
.prose-sec p{color:var(--sub);margin-bottom:var(--sp12)}
@media(max-width:900px){.offset-grid{grid-template-columns:1fr}.offset-fig{margin-top:var(--sp12)}}

/* 产品服务页：满幅色带首屏 */
.band-head{background:var(--blue);color:#E8EDF3;padding-bottom:var(--sp64);
  background-image:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.07) 79px 80px)}
.band-head .anno{color:#B9CCE0;display:block;margin-bottom:var(--sp8)}
.band-head h1{color:#fff;margin:var(--sp12) 0 var(--sp24)}
.band-lead{color:#CFDCE9;max-width:76ch}
.band-lead a{color:#fff;border-bottom-color:#fff}
.prods.cat{padding-top:var(--sp48)}

/* 联系页：超大字首屏 */
.big-head{background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:var(--sp64)}
.big-head h1{margin:var(--sp16) 0 var(--sp24)}
.big-sub{color:var(--sub);max-width:64ch}
.mail-block{margin-top:var(--sp48);border:1px solid var(--line);border-left:4px solid var(--amber);background:var(--sand);padding:var(--sp32);max-width:640px}
.mail{font-size:var(--fs-h2);font-weight:800;color:var(--blue)}
.mail-note{color:var(--sub);font-size:14px;margin-top:var(--sp12)}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp48)}
.contact-main h2{margin-bottom:var(--sp24)}
.contact-fig{border:1px solid var(--line);padding:var(--sp12);background:var(--sand);margin-bottom:var(--sp48)}
.contact-fig figcaption{margin-top:var(--sp8)}
.contact-aside h2{margin-bottom:var(--sp24)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* 指南页：技术文档 */
.doc-head{background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:var(--sp48)}
.doc-head h1{margin:var(--sp12) 0 var(--sp24)}
.doc-lead{color:var(--sub);max-width:76ch}
.doc-grid .prose{max-width:840px;margin:0 auto}
.prose h2{margin:var(--sp48) 0 var(--sp16);border-bottom:1px solid var(--line);padding-bottom:var(--sp12)}
.prose p{color:var(--sub);margin-bottom:var(--sp16)}
.cmp{width:100%;border-collapse:collapse;margin:var(--sp24) 0;font-size:15px}
.cmp caption{text-align:left;padding-bottom:var(--sp8);color:var(--sub);font-size:14px}
.cmp th,.cmp td{border:1px solid var(--line);padding:var(--sp12);text-align:left;vertical-align:top}
.cmp thead th{background:var(--blue-deep);color:#fff;font-weight:700}
.cmp tbody th{background:var(--sand);width:110px}
.doc-fig{border:1px solid var(--line);padding:var(--sp12);background:var(--sand);margin:var(--sp32) 0}
.doc-fig figcaption{margin-top:var(--sp8)}
.check{list-style:none;max-width:76ch;margin-bottom:var(--sp16)}
.check li{padding:var(--sp8) 0 var(--sp8) 24px;position:relative;color:var(--sub);border-bottom:1px dashed var(--line)}
.check li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:6px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}

/* 问答页首屏 */
.faq-head{background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:var(--sp48)}
.faq-head-in{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp48);align-items:center}
.faq-head h1{margin:var(--sp16) 0 var(--sp24)}
.faq-head .lead{color:var(--sub);max-width:60ch}
.faq-fig{border:1px solid var(--line);background:var(--sand);padding:var(--sp12)}
.faq-page{max-width:960px}
@media(max-width:900px){.faq-head-in{grid-template-columns:1fr}}