/* 烟台通扬电子器件有限公司 — 说明书/技术文档风格：全左对齐、编号分节、图纸式边框 */
:root{
  --ink:#1b2b26;        /* 深墨绿，来自电路板基材 */
  --paper:#f4f2ec;      /* 米白图纸底 */
  --accent:#0f7a5c;     /* 主色：PCB 铜绿，来自行业材料 */
  --accent-soft:#d9e8e1;
  --line:#1b2b26;
  --muted:#5b6b64;
  --fs-1:.8125rem;
  --fs-2:1rem;
  --fs-3:1.375rem;
  --fs-4:1.875rem;
  --fs-5:2.75rem;
  --fs-6:4rem;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Songti SC","Noto Serif SC","SimSun",serif;
  background:var(--paper);color:var(--ink);
  line-height:1.75;font-size:var(--fs-2);
}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s5)}
.wrap.narrow{max-width:760px}
h1,h2,h3{font-weight:700;line-height:1.25;letter-spacing:.02em}
h1{font-size:var(--fs-6)}
h2{font-size:var(--fs-4);margin-bottom:var(--s5)}
h3{font-size:var(--fs-3)}
p{max-width:64ch}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.kicker{
  font-size:var(--fs-1);letter-spacing:.18em;color:var(--accent);
  text-transform:uppercase;border-left:3px solid var(--accent);
  padding-left:var(--s2);margin-bottom:var(--s4)
}
/* 头部 */
.site-header{border-bottom:2px solid var(--line);background:var(--paper)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-top:var(--s4);padding-bottom:var(--s4);flex-wrap:wrap}
.site-header nav{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--fs-1);letter-spacing:.12em}
.site-header nav a{color:var(--ink);text-decoration:none;padding:var(--s1) 0;border-bottom:2px solid transparent}
.site-header nav a:hover{border-bottom-color:var(--accent)}
.site-header nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}
/* 首屏：左右分栏（首页） */
.hero{padding:var(--s8) 0;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.hero-fig img{width:100%;height:auto;border:2px solid var(--line);display:block}
.lead{font-size:var(--fs-3);line-height:1.7;margin-bottom:var(--s5)}
.btn{
  display:inline-block;background:var(--accent);color:var(--paper);
  padding:var(--s2) var(--s5);text-decoration:none;font-size:var(--fs-1);
  letter-spacing:.14em;border:2px solid var(--accent);margin-bottom:var(--s2)
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink)}
/* 区块 */
section{padding:var(--s8) 0}
.caps{border-bottom:1px solid var(--line)}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s5)}
.cap-grid article{border-top:3px solid var(--accent);padding-top:var(--s4)}
.cap-grid p{margin-top:var(--s3)}
/* 九宫格（契约结构） */
.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;border:1px solid var(--line)}
.item{border:1px solid var(--line);padding:var(--s4)}
.item h2,.item h3{font-size:var(--fs-3);margin:var(--s3) 0 var(--s2)}
.item p{font-size:var(--fs-2)}
.item ul{margin:var(--s2) 0 0;padding-left:var(--s4);font-size:var(--fs-1);color:var(--muted)}
.item ul li{margin-bottom:var(--s1)}
@media(max-width:760px){.items{grid-template-columns:minmax(0,1fr)}}
.products{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.products h2{margin-bottom:var(--s5)}
.products > .wrap > p:last-of-type{margin-top:var(--s5)}
/* 流程 */
.steps{list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.steps li{border:1px solid var(--line);padding:var(--s4)}
.steps li span{display:block;font-size:var(--fs-5);font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:var(--s2)}
.steps li h3{font-size:var(--fs-2);margin-bottom:var(--s2)}
.steps li p{font-size:var(--fs-1);color:var(--muted)}
.process.dark{background:var(--ink);color:var(--paper)}
.process.dark h2{color:var(--paper)}
.process.dark .steps li{border-color:var(--paper)}
.process.dark .steps li span{color:#6cc4a4}
.process.dark .steps li p{color:#c4d4cc}
/* FAQ */
.faqsec{border-bottom:1px solid var(--line)}
.faqsec dt{font-weight:700;font-size:var(--fs-3);margin-top:var(--s5);padding-left:var(--s4);border-left:3px solid var(--accent)}
.faqsec dd{margin-top:var(--s2);padding-left:var(--s4);color:var(--ink)}
.faqsec p{margin-top:var(--s5)}
/* CTA */
.cta{background:var(--accent-soft);border-top:2px solid var(--line)}
.cta.slim{padding:var(--s7) 0}
.cta h2{margin-bottom:var(--s3)}
/* 内页头部 */
.pagehead{padding:var(--s8) 0;border-bottom:1px solid var(--line)}
.pagehead h1{font-size:var(--fs-5);margin-bottom:var(--s4)}
.breadcrumb{font-size:12px;letter-spacing:.12em;color:var(--muted);margin-bottom:var(--s4)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{margin:0 var(--s1)}
.ph-b{background:var(--accent-soft)}
.ph-c .about-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.ph-c figure img{width:100%;height:auto;border:2px solid var(--line);display:block}
.contact-main{font-size:var(--fs-4);margin-bottom:var(--s4)}
/* About 与 Guide */
.story h2,.guide-body h2{margin-top:var(--s7);font-size:var(--fs-4)}
.story p,.guide-body p{margin-top:var(--s3)}
table{border-collapse:collapse;width:100%;margin:var(--s5) 0;font-size:var(--fs-1)}
caption{text-align:left;color:var(--muted);padding-bottom:var(--s2)}
th,td{border:1px solid var(--line);padding:var(--s2) var(--s3);text-align:left;vertical-align:top}
th{background:var(--accent-soft)}
/* 页脚 */
.site-footer{border-top:2px solid var(--line);padding:var(--s7) 0;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);font-size:var(--fs-1)}
.foot-grid nav{display:flex;flex-direction:column;gap:var(--s1)}
/* 响应式 */
@media(max-width:900px){
  h1{font-size:var(--fs-5)}
  .hero-grid,.ph-c .about-top{grid-template-columns:minmax(0,1fr)}
  .cap-grid,.steps,.foot-grid{grid-template-columns:1fr}
  .steps{gap:var(--s4)}
}
</style>