:root{
--ink:#1f2428;
--steel:#4a545c;
--ice:#1f6f8b;
--ice-deep:#14546c;
--paper:#eef1f2;
--card:#e3e8ea;
--line:#1f2428;
--fs-xs:0.75rem;
--fs-s:0.875rem;
--fs-m:1rem;
--fs-l:1.375rem;
--fs-xl:2rem;
--fs-xxl:clamp(2.4rem,6vw,4rem);
--sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-48:48px;--sp-64:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink);font-size:var(--fs-m);line-height:1.8}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--sp-24)}
a{color:var(--ice-deep);text-decoration:none;border-bottom:2px solid transparent}
a:hover{border-bottom-color:var(--ice)}
a:focus-visible{outline:3px solid var(--ice);outline-offset:2px}
h1,h2,h3{font-weight:800;letter-spacing:.02em;line-height:1.25}
img{max-width:100%}
/* header */
.site-head{border-bottom:2px solid var(--line);background:#fff}
.head-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-16);padding-top:var(--sp-16);padding-bottom:var(--sp-16)}
.brand img{display:block}
.brand{border-bottom:none}
.main-nav{display:flex;flex-wrap:wrap;gap:var(--sp-24)}
.main-nav a{border-bottom:2px solid transparent;font-weight:700;font-size:var(--fs-s);letter-spacing:.08em;padding:var(--sp-4) 0}
.main-nav a:hover,.main-nav a[aria-current="page"]{border-bottom-color:var(--ink)}
/* breadcrumb */
.breadcrumb{font-size:12px;letter-spacing:.12em;color:var(--steel);padding:var(--sp-16) 0}
.breadcrumb a{color:var(--steel)}
.breadcrumb span{margin:0 var(--sp-8)}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-48);align-items:center;padding-top:var(--sp-64);padding-bottom:var(--sp-64)}
.kicker{font-size:var(--fs-s);font-weight:700;letter-spacing:.24em;color:var(--ice-deep);border-left:4px solid var(--ice);padding-left:var(--sp-12);margin-bottom:var(--sp-16)}
.hero h1{font-size:var(--fs-xxl);border:none}
.lead{margin:var(--sp-24) 0;max-width:38em}
.btn{display:inline-block;background:var(--ice);color:#fff;font-weight:700;padding:var(--sp-12) var(--sp-24);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);margin-right:var(--sp-12)}
.btn:hover{background:var(--ice-deep)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--card)}
.hero-fig{border:2px solid var(--line);background:#fff;padding:var(--sp-16)}
.hero-fig img{display:block;width:100%;height:auto}
/* sections */
.sec-t{font-size:var(--fs-xl);margin-bottom:var(--sp-32);border-bottom:4px solid var(--ink);display:inline-block;padding-bottom:var(--sp-8)}
.caps{padding:var(--sp-32) var(--sp-24) var(--sp-64)}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-24)}
.cap{border:2px solid var(--line);background:#fff;padding:var(--sp-24)}
.cap+.cap{border-left:none}
.cap h3{font-size:var(--fs-l);margin-bottom:var(--sp-12)}
/* band */
.band{background:var(--ink);color:#fff}
.band-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:var(--sp-32);padding-bottom:var(--sp-32)}
.band-in>div{padding:0 var(--sp-24);border-left:2px solid var(--steel)}
.band-in>div:first-child{border-left:none}
.band-in strong{display:block;font-size:var(--fs-l);font-weight:800;letter-spacing:.04em}
.band-in span{font-size:var(--fs-s);color:var(--card)}
/* items */
.items-sec{padding-top:var(--sp-64);padding-bottom:var(--sp-64)}
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item{border:2px solid var(--line);background:#fff;display:flex;flex-direction:column}
.item h2{font-size:var(--fs-l);padding:var(--sp-16) var(--sp-16) var(--sp-8)}
.item p{padding:0 var(--sp-16) var(--sp-12);font-size:var(--fs-s);color:var(--steel)}
.item ul{list-style:none;padding:0 var(--sp-16) var(--sp-16);margin-top:auto;font-size:var(--fs-s)}
.item li{border-top:1px solid var(--card);padding:var(--sp-8) 0;padding-left:var(--sp-12);position:relative}
.item li::before{content:"";position:absolute;left:0;top:1em;width:6px;height:6px;background:var(--ice)}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
/* steps */
.steps-sec{padding-bottom:var(--sp-64)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-24);counter-reset:st}
.steps li{border-top:4px solid var(--ice);background:var(--card);padding:var(--sp-16)}
.steps strong{display:block;font-size:var(--fs-l);font-weight:800;margin-bottom:var(--sp-8)}
.steps p{font-size:var(--fs-s);color:var(--steel)}
/* faq */
.faq details{border:2px solid var(--line);border-top:none;background:#fff}
.faq details:first-child{border-top:2px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;padding:var(--sp-16);list-style-position:inside}
.faq summary:hover{background:var(--card)}
.faq details p{padding:0 var(--sp-16) var(--sp-16);font-size:var(--fs-s);color:var(--steel)}
.faq-sec,.contact-faq{padding-bottom:var(--sp-64)}
/* cta */
.cta{background:var(--ink);color:#fff;border-top:4px solid var(--ice)}
.cta .wrap{padding-top:var(--sp-48);padding-bottom:var(--sp-48)}
.cta h2{font-size:var(--fs-xl);margin-bottom:var(--sp-12)}
.cta p{max-width:40em;margin-bottom:var(--sp-24)}
.cta a{color:#fff}
.cta .btn{border-color:var(--ice);box-shadow:4px 4px 0 var(--ice)}
/* page hero variants */
.page-hero.full{background:var(--card);border-bottom:2px solid var(--line)}
.page-hero .wrap{padding-top:var(--sp-48);padding-bottom:var(--sp-48)}
.page-hero h1{font-size:var(--fs-xxl);margin-bottom:var(--sp-16)}
.page-hero p{max-width:44em;margin-bottom:var(--sp-24)}
.page-hero figure{border:2px solid var(--line);background:#fff;display:inline-block;padding:var(--sp-16)}
/* about */
.about-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp-48);padding-top:var(--sp-32);padding-bottom:var(--sp-64)}
.about-txt h1{font-size:var(--fs-xxl);margin-bottom:var(--sp-32)}
.about-txt section{border-left:4px solid var(--ice);padding-left:var(--sp-16);margin-bottom:var(--sp-32)}
.about-txt h2{font-size:var(--fs-l);margin-bottom:var(--sp-8)}
.about-fig{align-self:start;position:sticky;top:var(--sp-24);border:2px solid var(--line);background:#fff;padding:var(--sp-16)}
.about-fig img{display:block;width:100%;height:auto}
/* contact */
.contact-hero h1{font-size:var(--fs-xxl);margin-bottom:var(--sp-16)}
.contact-hero .lead{margin-bottom:var(--sp-24)}
.contact-hero figure{border:2px solid var(--line);background:#fff;display:inline-block;padding:var(--sp-16);margin-bottom:var(--sp-48)}
.contact-steps,.contact-faq{margin-bottom:var(--sp-48)}
/* article */
.article{max-width:820px;padding-top:var(--sp-16);padding-bottom:var(--sp-64)}
.article h1{font-size:var(--fs-xxl);margin-bottom:var(--sp-8)}
.art-meta{font-size:var(--fs-s);color:var(--steel);letter-spacing:.08em;margin-bottom:var(--sp-24)}
.art-fig{border:2px solid var(--line);background:#fff;padding:var(--sp-16);margin-bottom:var(--sp-32)}
.art-fig img{display:block;width:100%;height:auto}
.article h2{font-size:var(--fs-xl);margin:var(--sp-48) 0 var(--sp-16);border-left:6px solid var(--ice);padding-left:var(--sp-12)}
.article p{margin-bottom:var(--sp-16);max-width:42em}
.cmp{width:100%;border-collapse:collapse;border:2px solid var(--line);background:#fff;margin:var(--sp-16) 0 var(--sp-32)}
.cmp caption{text-align:left;font-weight:800;padding:var(--sp-8) 0}
.cmp th,.cmp td{border:1px solid var(--steel);padding:var(--sp-8) var(--sp-12);font-size:var(--fs-s);text-align:left}
.cmp thead th{background:var(--ink);color:#fff}
.faq-hero h1{font-size:var(--fs-xxl);margin-bottom:var(--sp-16)}
.faq-hero figure{border:2px solid var(--line);background:#fff;display:inline-block;padding:var(--sp-16);margin:var(--sp-24) 0 var(--sp-48)}
.faq-hero .lead{max-width:44em}
.faq.big{margin-bottom:var(--sp-32)}
.more{padding-bottom:var(--sp-64)}
/* footer */
.site-foot{border-top:4px solid var(--ink);background:var(--card)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-24);padding-top:var(--sp-32);padding-bottom:var(--sp-32)}
.foot-in nav{display:flex;flex-wrap:wrap;gap:var(--sp-16)}
.foot-in p{width:100%;font-size:var(--fs-s);color:var(--steel)}
/* responsive */
@media(max-width:900px){
.hero,.about-hero{grid-template-columns:minmax(0,1fr)}
.about-fig{position:static}
.cap-grid,.steps,.band-in{grid-template-columns:repeat(2,minmax(0,1fr))}
.cap+.cap{border-left:2px solid var(--line)}
.band-in>div:nth-child(odd){border-left:none}
.band-in>div{border-left:2px solid var(--steel);margin-bottom:var(--sp-12)}
}
@media(max-width:760px){
.items{grid-template-columns:minmax(0,1fr)}
.cap-grid,.steps,.band-in{grid-template-columns:minmax(0,1fr)}
.cap+.cap{border-left:2px solid var(--line);border-top:none}
.band-in>div{border-left:none;border-top:2px solid var(--steel)}
}