:root{
  --ink:#0C2622; --ink-2:#123A33; --paper:#EBEDE6; --card:#FFFFFF;
  --text:#17201E; --muted:#5A6A66; --coral:#F2334F; --amber:#E8A33D;
  --line:#CDD3C9;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--text); font-family:var(--sans);
  font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; line-height:1.24; font-weight:700; letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}
.lead{font-size:19px; color:var(--muted); max-width:66ch}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px}

/* bar */
.bar{position:sticky; top:0; z-index:50; background:rgba(12,38,34,.95);
  backdrop-filter:blur(8px); color:#EDF2EE; border-bottom:1px solid rgba(255,255,255,.09)}
.bar__in{display:flex; align-items:center; gap:22px; min-height:60px; flex-wrap:wrap}
.mark{display:flex; align-items:baseline; gap:9px; text-decoration:none; font-weight:700; padding:8px 0}
.mark b{font-size:18px}
.mark span{font-size:11px; color:#8FA9A1; letter-spacing:.12em}
.bar nav{margin-left:auto; display:flex; gap:20px; font-size:15px; flex-wrap:wrap}
.bar nav a{color:#C3D3CD; text-decoration:none; padding:6px 0}
.bar nav a:hover{color:#fff}
.bar nav a.on{color:#fff; box-shadow:inset 0 -2px 0 var(--coral)}
.bar .btn{margin-left:18px}
@media (max-width:820px){ .bar nav{margin-left:0; width:100%; gap:16px; padding-bottom:8px; font-size:14.5px} .bar .btn{margin-left:auto} }

.btn{display:inline-block; padding:13px 26px; border-radius:2px; font-size:16px;
  font-weight:700; text-decoration:none; border:1.5px solid transparent; cursor:pointer; font-family:inherit}
.btn--go{background:var(--coral); color:#fff}
.btn--go:hover{background:#D9203B}
.btn--ghost{border-color:currentColor; background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.bar .btn--go{padding:9px 18px; font-size:14.5px}

/* page head */
.phead{background:var(--ink); color:#EDF2EE; padding:64px 0 58px}
.phead .rule{width:56px; height:4px; background:var(--coral); margin-bottom:26px}
.phead h1{font-size:clamp(30px,4.6vw,50px); color:#fff; font-weight:800; letter-spacing:-.025em}
.phead p{margin-top:22px; font-size:18.5px; color:#B9CCC6; max-width:56ch}
.phead .btn{margin-top:30px}
.hero__note{margin-top:18px; font-size:14.5px; color:#7E9A93}

section{padding:70px 0}
.head{max-width:64ch; margin-bottom:40px}
.head h2{font-size:clamp(25px,3.3vw,36px); letter-spacing:-.02em}
.head p{margin-top:15px; font-size:18px; color:var(--muted)}
h3.sub{font-size:20px; margin:44px 0 12px}
h3.sub:first-child{margin-top:0}
.prose p{max-width:70ch; margin-bottom:16px; color:#2C3A37}
.prose ul{max-width:70ch; color:#2C3A37; padding-left:22px}
.prose li{margin-bottom:9px}

/* stats */
.stats{background:var(--ink-2); color:#DCE7E3}
.stats__in{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:24px 22px; border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:0}
.stat b{display:block; font-size:26px; font-weight:800; color:#fff; letter-spacing:-.02em}
.stat span{font-size:14.5px; color:#94AEA7}
@media (max-width:820px){ .stats__in{grid-template-columns:1fr 1fr}
  .stat{border-top:1px solid rgba(255,255,255,.12)} .stat:nth-child(-n+2){border-top:0} .stat:nth-child(odd){border-left:0} }

/* card grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid article{background:var(--card); padding:30px 26px 32px}
.grid h3{font-size:18.5px}
.grid h3::after{content:""; display:block; width:26px; height:3px; background:var(--coral); margin:13px 0 14px}
.grid p{font-size:15.5px; color:var(--muted); line-height:1.72}
.grid ul{margin:12px 0 0; padding-left:20px; font-size:15px; color:var(--muted)}
.grid li{margin-bottom:7px}
@media (max-width:900px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width:620px){ .grid,.grid--2{grid-template-columns:1fr} }

/* checklist card */
.panel{background:#fff; padding:28px 28px 24px; border-top:5px solid var(--amber)}
.panel h2,.panel h3{font-size:19px}
.panel ol{margin:18px 0 0; padding:0; list-style:none; counter-reset:c}
.panel ol li{counter-increment:c; position:relative; padding:0 0 15px 34px; font-size:15.5px; line-height:1.62}
.panel ol li::before{content:counter(c); position:absolute; left:0; top:3px; width:22px; height:22px;
  border-radius:50%; background:var(--ink); color:#fff; font-size:12.5px; font-weight:700; display:grid; place-items:center}
.panel .fine{border-top:1px solid var(--line); padding-top:14px; font-size:14px; color:var(--muted)}

/* split */
.split{display:grid; grid-template-columns:1.3fr .9fr; gap:56px; align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:34px} }

/* table */
.tbl{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); font-size:15.5px}
.tbl th,.tbl td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{width:32%; background:#F4F5F1; font-weight:700; color:#3B4845}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
@media (max-width:620px){ .tbl th,.tbl td{display:block; width:auto} .tbl th{border-bottom:0} }

/* steps */
.flow{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
.step{border-top:2px solid var(--ink); padding-top:18px}
.step b{display:block; font-size:13px; font-weight:700; color:var(--coral); letter-spacing:.06em; margin-bottom:8px}
.step h3{font-size:17.5px; margin-bottom:8px}
.step p{font-size:15px; color:var(--muted); line-height:1.68}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr; gap:26px} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* faq */
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-size:17.5px; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--coral); border-bottom:2px solid var(--coral);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 8px 22px 0; font-size:16px; color:var(--muted); max-width:70ch}

/* contact */
.contact{background:var(--ink); color:#EDF2EE; padding:76px 0}
.contact h2{font-size:clamp(26px,3.6vw,40px); color:#fff; letter-spacing:-.02em}
.contact .lead{color:#B9CCC6}
.contact__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start; margin-top:32px}
a.mail{display:inline-block; font-size:clamp(21px,3vw,31px); font-weight:800; color:#fff; text-decoration:none;
  word-break:break-all; box-shadow:inset 0 -.14em 0 var(--coral)}
a.mail:hover{box-shadow:inset 0 -1.1em 0 rgba(242,51,79,.9)}
.mailbox{margin-top:26px}
.mailbox__row{margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; align-items:center}
#copied{font-size:14.5px; color:var(--amber); opacity:0; transition:opacity .2s}
#copied.on{opacity:1}
.tpl{background:rgba(255,255,255,.055); border-left:3px solid var(--amber); padding:24px 26px}
.tpl h3{font-size:16px; color:#fff; margin-bottom:14px}
.tpl pre{margin:0; white-space:pre-wrap; font-family:var(--sans); font-size:15px; line-height:1.85; color:#C6D8D2}
@media (max-width:900px){ .contact__grid{grid-template-columns:1fr; gap:32px} .contact{padding:56px 0} }

footer{background:#081916; color:#7E9A93; font-size:14px; padding:34px 0 30px; line-height:1.85}
footer a{color:#A9C0BA}
footer .fgrid{display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:space-between; align-items:flex-start}
footer .flinks{display:flex; flex-wrap:wrap; gap:16px}
footer .beian{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.09); font-size:13.5px}
footer a.gaba{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
footer a.gaba img{display:inline-block; vertical-align:middle}

.reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{animation:none;opacity:1;transform:none} *{transition:none!important} }