:root{
--ink:#1c2126;        /* 石墨黑，来自钢材与设备外壳 */
--paper:#f4f2ee;      /* 暖灰纸底 */
--steel:#5c6b78;      /* 冷钢灰 */
--accent:#b45f1d;     /* 低饱和安全橙，来自警示标识 */
--line:#c9c4ba;
--space:24px;
--fs-s:13px;--fs-m:16px;--fs-l:20px;--fs-xl:32px;--fs-2xl:48px;--fs-hero:clamp(40px,7vw,72px);
--w:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink);font-size:var(--fs-m);line-height:1.8}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--space)}
h1,h2,h3{font-weight:800;line-height:1.3;letter-spacing:.01em}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-xl);border-left:6px solid var(--accent);padding-left:12px;margin-bottom:var(--space)}
h3{font-size:var(--fs-l)}
p{max-width:68ch}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* header */
.site-head{border-bottom:3px solid var(--ink);background:var(--paper)}
.head-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
nav[aria-label] a{color:var(--ink);font-weight:600;margin-left:16px;font-size:var(--fs-s);letter-spacing:.06em}
nav[aria-label] a:hover{color:var(--accent);text-decoration:none;border-bottom:2px solid var(--accent)}
/* breadcrumb */
.breadcrumb{font-size:12px;letter-spacing:.08em;color:var(--steel);padding-top:16px}
.breadcrumb a{color:var(--steel)}
.breadcrumb span{margin:0 6px}
/* hero 变体 */
.hero-color{background:var(--ink);color:var(--paper)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding-top:64px;padding-bottom:64px;align-items:center}
.hero-color .kicker{color:var(--accent);font-weight:700;letter-spacing:.2em;font-size:var(--fs-s);margin-bottom:16px}
.lead{font-size:var(--fs-l);margin-top:24px}
.cta-row{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:12px 24px;letter-spacing:.05em}
.btn:hover{background:#8f4c16;text-decoration:none}
.btn.ghost{background:transparent;color:var(--paper);border:2px solid var(--paper)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.hero-fig img{width:100%;height:auto;border:3px solid var(--accent);display:block}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:48px;align-items:center}
.hero-split img{width:100%;height:auto;border:3px solid var(--ink)}
.hero-offset{padding-top:48px}
.hero-offset .kicker{color:var(--accent);font-weight:700;letter-spacing:.2em;font-size:var(--fs-s)}
.narrow{margin-top:24px}
.hero-plain{padding-top:48px}
.contact-mail{margin-top:24px;font-size:var(--fs-l);font-weight:700}
/* sections */
.section{padding-top:64px;padding-bottom:64px}
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feat{border:2px solid var(--ink);padding:24px;background:#fff}
.feat h3{margin-bottom:12px;color:var(--ink)}
/* 九宫格（契约） */
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:var(--w);margin:0 auto;padding:0 var(--space)}
.item{border:2px solid var(--ink);background:#fff;padding-bottom:24px}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-bottom:2px solid var(--ink)}
.item h2{font-size:var(--fs-l);border-left:none;padding:16px 24px 0;margin-bottom:8px}
.item p{padding:0 24px;color:var(--steel);font-size:var(--fs-s);line-height:1.7}
.item ul{padding:12px 24px 0;list-style:none}
.item li{font-size:var(--fs-s);color:var(--ink);padding-left:16px;position:relative}
.item li::before{content:"—";position:absolute;left:0;color:var(--accent)}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
.sec-note{color:var(--steel);margin-bottom:24px}
/* 流程带 */
.band{background:var(--ink);color:var(--paper)}
.band h2{color:var(--paper);border-left-color:var(--accent)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:s}
.steps li{border-top:3px solid var(--accent);padding-top:16px}
.steps span{font-size:var(--fs-xl);font-weight:800;color:var(--accent)}
.steps h3{margin:8px 0;color:var(--paper)}
.steps p{color:#c9c4ba;font-size:var(--fs-s);line-height:1.7}
.steps-vert{grid-template-columns:1fr;max-width:900px}
.steps-vert p{color:var(--steel);font-size:var(--fs-m);line-height:1.8}
.steps-vert h3{color:var(--ink)}
.steps-vert li{border-top-color:var(--ink)}
/* faq */
.faq-list h3{margin-top:24px;padding-left:12px;border-left:4px solid var(--steel)}
.faq-list p{margin-top:8px;color:#333a40}
.faq-page h2{font-size:var(--fs-l);border-left:4px solid var(--steel);margin-top:48px}
.faq-page p{margin-top:8px}
.more-link{margin-top:32px;color:var(--steel)}
/* cta */
.cta-final{background:var(--accent);color:#fff;text-align:left}
.cta-final h2{color:#fff;border-left-color:#fff}
.cta-final p{margin-bottom:24px}
.cta-final .btn{background:var(--ink);color:#fff}
.cta-final .btn:hover{background:#000}
/* prose */
.prose p{margin-bottom:var(--space)}
.prose,.prose-guide{max-width:900px;margin:0 auto}
.prose-guide{padding-top:32px;padding-bottom:64px}
.prose-guide h2{margin-top:48px}
.prose-guide p{margin-bottom:var(--space)}
.guide-meta{color:var(--steel);font-size:var(--fs-s);letter-spacing:.08em}
table{width:100%;border-collapse:collapse;margin:32px 0;font-size:var(--fs-s)}
caption{text-align:left;font-weight:700;padding-bottom:8px}
th,td{border:1px solid var(--ink);padding:8px 12px;text-align:left;vertical-align:top}
th{background:var(--ink);color:var(--paper)}
/* footer */
.site-foot{background:var(--ink);color:var(--paper);border-top:6px solid var(--accent)}
.foot-grid{padding-top:48px;padding-bottom:48px}
.foot-grid nav a{color:var(--paper);margin-right:16px;font-size:var(--fs-s)}
.foot-grid nav a:hover{color:var(--accent)}
.fine{color:#8a94a0;font-size:var(--fs-s);margin-top:16px}
/* responsive */
@media(max-width:900px){
.hero-grid,.hero-split{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px}
.feat-grid{grid-template-columns:1fr}
.steps{grid-template-columns:1fr 1fr}
h1{font-size:clamp(32px,9vw,48px)}
nav[aria-label="主导航"] a{margin-left:8px}
}
@media(max-width:600px){.steps{grid-template-columns:1fr}.head-grid{justify-content:center}}