/* 电路图方向：纸白底、铜色主色、黑描边线框，图表式排版 */
:root{
  --copper:#a05a2c;
  --copper-dark:#7c4218;
  --ink:#1d2430;
  --ink-soft:#4a5568;
  --paper:#f7f4ee;
  --line:#1d2430;
  --trace:#d8d2c4;
  --fs-hero:clamp(2.2rem,5vw,3.6rem);
  --fs-h2:1.5rem;
  --fs-h3:1.125rem;
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-tag:.75rem;
  --sp:16px;
  --mono:"Courier New",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--mono),system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
}
img{max-width:100%}
a{color:var(--copper-dark);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--copper)}
a:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
h1,h2,h3{font-family:system-ui,sans-serif;line-height:1.3;letter-spacing:.02em}
.container{max-width:1320px;margin:0 auto;padding:0 24px}
main{max-width:1320px;margin:0 auto;padding:32px 24px}
/* header */
.site-head{
  max-width:1320px;margin:0 auto;padding:16px 24px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  border-bottom:3px solid var(--line);
}
.site-head nav{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--fs-small)}
.site-head nav a{text-decoration:none;padding:4px 8px;border:1px solid transparent}
.site-head nav a:hover{border-color:var(--copper)}
/* breadcrumb */
.breadcrumb{font-size:12px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:32px;display:flex;gap:8px}
.breadcrumb a{color:inherit}
/* hero variants: each page different structure */
.hero{padding:48px 0;border-bottom:1px dashed var(--trace)}
.hero-circuit{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-circuit .tag{font-size:var(--fs-tag);letter-spacing:.25em;text-transform:uppercase;color:var(--copper);border:1px solid var(--copper);display:inline-block;padding:4px 12px;margin-bottom:16px}
h1{font-size:var(--fs-hero);font-weight:800}
.lead{max-width:62ch;margin:16px 0;font-size:1.0625rem;color:var(--ink-soft)}
.btn{
  display:inline-block;background:var(--copper);color:#fff;text-decoration:none;
  padding:10px 24px;font-weight:700;border:2px solid var(--copper-dark);
}
.btn:hover{background:var(--copper-dark)}
.btn.ghost{background:transparent;color:var(--copper-dark)}
.btn.ghost:hover{background:var(--copper);color:#fff}
.hero-fig{border:2px solid var(--line);padding:0;line-height:0}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.hero-banner img{border:2px solid var(--line);margin-top:24px}
.hero-block img{border:2px solid var(--line);margin-top:24px}
/* capabilities */
.caps{padding:48px 0;border-bottom:1px dashed var(--trace)}
.caps h2,.process h2,.items h2,.faq-block h2,.cta-block h2{text-align:left;font-size:var(--fs-h2);border-left:8px solid var(--copper);padding-left:16px;margin-bottom:24px}
.cap-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cap{border-top:3px solid var(--line);padding-top:16px}
.cap h3{font-size:var(--fs-h3);margin-bottom:8px}
.cap p{color:var(--ink-soft);font-size:var(--fs-small)}
/* items grid */
.items{padding:48px 0}
.items>h2{grid-column:1/-1}
.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.item{border:1px solid var(--line);padding:16px;background:#fff}
.item img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-bottom:1px solid var(--line);margin-bottom:12px}
.item h2,.item h3{font-size:var(--fs-h3);margin-bottom:8px}
.item p{font-size:var(--fs-small);color:var(--ink-soft);margin-bottom:8px}
.item ul{list-style:none;font-size:var(--fs-small)}
.item li{padding-left:20px;position:relative;color:var(--ink-soft)}
.item li::before{content:"▸";position:absolute;left:0;color:var(--copper)}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
/* process */
.process{padding:48px 0;border-bottom:1px dashed var(--trace)}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps li{counter-increment:s;border:1px solid var(--line);padding:16px;background:#fff}
.steps li::before{content:"0" counter(s);font-size:var(--fs-h2);font-weight:800;color:var(--copper);display:block}
.steps strong{display:block;font-family:system-ui,sans-serif;margin-bottom:8px}
.steps span{font-size:var(--fs-small);color:var(--ink-soft)}
/* faq / dl */
.faq-block,.text-cols{padding:48px 0;border-bottom:1px dashed var(--trace)}
dl dt{font-weight:700;font-family:system-ui,sans-serif;margin-top:16px}
dl dd{color:var(--ink-soft);font-size:var(--fs-small);border-left:3px solid var(--trace);padding-left:16px;margin-top:4px}
.text-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.text-cols h2{font-size:var(--fs-h2);border-left:8px solid var(--copper);padding-left:16px;margin-bottom:12px}
.text-cols p{color:var(--ink-soft);max-width:62ch}
/* longform article */
.longform{max-width:72ch;margin:0 auto}
.longform h1{margin-bottom:16px}
.longform h2{font-size:var(--fs-h2);margin:48px 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.longform p{margin-bottom:16px;color:var(--ink);max-width:65ch}
.longform .lead{color:var(--ink-soft)}
table{width:100%;border-collapse:collapse;margin:24px 0;font-size:var(--fs-small);background:#fff}
caption{text-align:left;font-size:var(--fs-tag);letter-spacing:.1em;color:var(--copper-dark);padding-bottom:8px}
th,td{border:1px solid var(--line);padding:8px 12px;text-align:left}
th{background:var(--paper);font-family:system-ui,sans-serif}
/* cta */
.cta-block{padding:64px 0;text-align:left}
.cta-block h2{font-size:var(--fs-h2);border-left:8px solid var(--copper);padding-left:16px;margin-bottom:12px}
/* footer */
.site-foot{
  max-width:1320px;margin:48px auto 0;padding:24px;border-top:3px solid var(--line);
  font-size:var(--fs-small);color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}
.site-foot nav a{color:inherit;text-decoration:none}
.site-foot nav a:hover{color:var(--copper)}
/* responsive */
@media(max-width:900px){
  .hero-circuit,.hero-split,.cap-row,.text-cols,.steps{grid-template-columns:minmax(0,1fr)}
  main{padding:24px 16px}
}