/* ============================================================
   机加工外贸站 · 站点样式
   深蓝 + 钢灰 + 黑，少量橙色（对应原需求书第十章视觉方向）
   双主题；不依赖 JS；无装饰动画
   ============================================================ */

:root{
  --navy:#0B2A3D;
  --navy-2:#0F3850;
  --ink:#111A1E;
  --body:#37454A;
  --muted:#66757A;
  --line:#D3DADC;
  --hair:#E6EBEC;
  --sunk:#F2F5F5;
  --surface:#FFFFFF;
  --ground:#FBFCFC;
  --acc:#C4491A;
  --acc-2:#A93C13;
  --acc-soft:#FBEDE7;
  --ok:#2C6146;
  --wip:#8A6414;
  --no:#8C2A2A;
  --on-navy:#DCE6EA;
  --on-navy-dim:#93AAB4;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#08202E;
    --navy-2:#0C2C3E;
    --ink:#E9EEEF;
    --body:#BAC7CB;
    --muted:#7E8F95;
    --line:#2A3940;
    --hair:#1D2A30;
    --sunk:#141E23;
    --surface:#101A1F;
    --ground:#0B1317;
    --acc:#F0733E;
    --acc-2:#FF8A56;
    --acc-soft:#26170F;
    --ok:#7CC49B;
    --wip:#D6AC55;
    --no:#E4796F;
    --on-navy:#D3E1E6;
    --on-navy-dim:#7E97A1;
  }
}
:root[data-theme="dark"]{
  --navy:#08202E;--navy-2:#0C2C3E;--ink:#E9EEEF;--body:#BAC7CB;--muted:#7E8F95;
  --line:#2A3940;--hair:#1D2A30;--sunk:#141E23;--surface:#101A1F;--ground:#0B1317;
  --acc:#F0733E;--acc-2:#FF8A56;--acc-soft:#26170F;--ok:#7CC49B;--wip:#D6AC55;--no:#E4796F;
  --on-navy:#D3E1E6;--on-navy-dim:#7E97A1;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.7;
}
h1,h2,h3,.brand,.fbrand{
  font-family:"Archivo","IBM Plex Sans",system-ui,sans-serif;
  color:var(--ink);letter-spacing:-.012em;text-wrap:balance;
}
h1{font-size:clamp(29px,4.4vw,46px);line-height:1.14;margin:0 0 18px;font-weight:700}
h2{font-size:clamp(21px,2.6vw,28px);line-height:1.24;margin:0 0 14px;font-weight:600}
h3{font-size:19px;line-height:1.3;margin:0 0 8px;font-weight:600}
p{margin:0 0 15px;max-width:68ch}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--acc-2)}
strong{color:var(--ink);font-weight:600}
code{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:.88em;
  background:var(--sunk);border:1px solid var(--hair);padding:1px 5px;color:var(--ink)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--acc);color:#fff;padding:8px 14px;z-index:99}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- 布局 ---------- */
main{max-width:1180px;margin:0 auto;padding:0 22px 20px}
main > section,main > article,main > figure,main > form,main > aside{margin:0 0 54px}
.lede{max-width:74ch;padding-top:44px}
.lede p{font-size:19px;color:var(--muted);max-width:66ch}
.prose h2{margin-top:0}
.pull{font-size:19px;color:var(--ink);border-left:3px solid var(--acc);padding-left:18px;
  margin:22px 0;max-width:62ch}

/* ---------- 站头 ---------- */
header.site{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
header.site .bar{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;
  gap:22px;min-height:64px;flex-wrap:wrap}
.brand{color:#fff;font-weight:700;font-size:18px;text-decoration:none;letter-spacing:.01em;
  white-space:nowrap}
nav.main{display:flex;flex-wrap:wrap;gap:2px;margin-right:auto}
nav.main a{color:var(--on-navy);text-decoration:none;font-size:14.5px;padding:8px 11px;
  border-bottom:2px solid transparent}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.06)}
nav.main a.on{color:#fff;border-bottom-color:var(--acc)}
.crumbs{max-width:1180px;margin:0 auto;padding:12px 22px 0;font-family:"IBM Plex Mono",monospace;
  font-size:12px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--acc)}
.crumbs a::after,.crumbs span::before{content:" / ";color:var(--line)}
.crumbs a:last-of-type::after{content:""}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;
  padding:12px 22px;font-weight:600;font-size:15.5px;border:1px solid var(--acc);
  cursor:pointer;font-family:inherit}
.btn:hover{background:var(--acc-2);border-color:var(--acc-2);color:#fff}
.btn.ghost{background:transparent;color:var(--acc)}
.btn.ghost:hover{background:var(--acc-soft);color:var(--acc-2)}
.btn.sm{padding:8px 15px;font-size:14px}
header.site .btn.sm{background:var(--acc);border-color:var(--acc)}
.btns{display:flex;flex-wrap:wrap;gap:11px;margin:20px 0 0}
.micro{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);margin-top:14px}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1fr;gap:26px;padding-top:44px;align-items:center}
@media (min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:44px}}
.hero .sub{font-size:19.5px;color:var(--muted);max-width:52ch}

/* ---------- 数字条 ---------- */
.statbar{background:var(--navy);display:grid;grid-template-columns:repeat(2,1fr);
  border:1px solid var(--navy-2)}
@media (min-width:820px){.statbar{grid-template-columns:repeat(4,1fr)}}
.stat{padding:20px 22px;border-right:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09)}
.stat .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-dim);margin-bottom:7px}
.stat .v{display:block;font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;
  color:#fff;line-height:1.35}

/* ---------- 三条承诺 ---------- */
.promises{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);
  background:var(--surface)}
@media (min-width:860px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise{padding:26px 24px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.promise h2{font-size:18px;margin-bottom:9px}
.promise p{font-size:15.5px;margin:0}

/* ---------- 卡片 ---------- */
.cards h2{margin-bottom:18px}
.cgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cgrid{grid-template-columns:repeat(2,1fr)}
  .cgrid.three{grid-template-columns:repeat(3,1fr)}}
.card{display:block;background:var(--surface);border:1px solid var(--line);
  padding:22px 22px 20px;text-decoration:none;color:var(--body)}
.card:hover{border-color:var(--acc);color:var(--body)}
.card h3{margin-bottom:7px}
.card p{font-size:15px;margin:0;max-width:none}
.card .more{display:inline-block;margin-top:12px;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;color:var(--acc);letter-spacing:.04em}
.card.empty{border-style:dashed;opacity:.75}
.card.dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:var(--on-navy)}
.card.dark h3{color:#fff}
.card.dark:hover{border-color:var(--acc)}

/* ---------- 深色带 ---------- */
.band{background:var(--navy);color:var(--on-navy);padding:38px 30px;border:1px solid var(--navy-2)}
.band h2{color:#fff}
.band p{color:var(--on-navy);max-width:70ch}
.band .cgrid{margin-top:24px}

/* ---------- 表格 ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);background:var(--surface);margin:16px 0 20px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--hair);vertical-align:top;
  line-height:1.6}
thead th{background:var(--sunk);color:var(--ink);font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
table.spec td:nth-child(2){font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:500;white-space:nowrap}
table.spec td:nth-child(3){color:var(--muted);font-size:14px}
table.kv td:first-child{color:var(--muted);width:38%}
table.kv td:last-child{font-family:"IBM Plex Mono",monospace;color:var(--ink);font-weight:500}
table.cmp td:first-child{width:46%}
table.cmp td:nth-child(2){color:var(--muted);font-family:"IBM Plex Mono",monospace}
table.cmp td:nth-child(3){color:var(--ink);font-weight:600;font-family:"IBM Plex Mono",monospace}
table.steps td:first-child{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink);
  white-space:nowrap;width:1%}
table.steps td:nth-child(2){font-family:"IBM Plex Mono",monospace;color:var(--acc);
  white-space:nowrap;font-size:13.5px}
.ok{color:var(--ok);font-weight:600}
.wip{color:var(--wip);font-weight:600}
.no{color:var(--no);font-weight:600}

/* ---------- 占位标记 ---------- */
.ph{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.9em;font-weight:600;
  color:var(--acc);background:var(--acc-soft);border:1px dashed var(--acc);
  padding:0 6px;border-radius:1px;white-space:nowrap}
.ph::before{content:"[ "}
.ph::after{content:" ]"}

/* ---------- 图片槽位 ---------- */
figure.shot{margin:0}
figure.shot img{display:block;width:100%;height:auto}
figure.shot figcaption,figure.dgm figcaption{font-size:13.5px;color:var(--muted);
  padding-top:9px;font-family:"IBM Plex Mono",monospace}
figure.shot.empty .slotbox{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;
  background:var(--sunk);border:1px dashed var(--line);text-align:center;padding:26px 18px;
  min-height:180px}
.ar-16-9 .slotbox{aspect-ratio:16/9}
.ar-3-2 .slotbox{aspect-ratio:3/2}
.slotbox .code{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:600;
  color:var(--acc)}
.slotbox .desc{font-size:14px;color:var(--muted);max-width:34ch}
.slotbox .pri{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--acc)}

/* ---------- 图示 ---------- */
figure.dgm{margin:0;border:1px solid var(--line);background:var(--surface);padding:20px;
  overflow-x:auto}
figure.dgm svg{display:block;min-width:520px}

/* ---------- 提示块 ---------- */
.note{border-left:3px solid var(--line);background:var(--sunk);padding:17px 20px}
.note p{margin:0;max-width:none;font-size:15.5px}
.note p+p{margin-top:9px}
.note ul{margin:0;padding-left:20px;font-size:15.5px}
.note li{margin-bottom:6px}
.note .tag{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.note.std{border-left-color:var(--acc)}
.note.warn{border-left-color:var(--wip);background:var(--acc-soft)}

/* ---------- 列表 ---------- */
ul.tick{list-style:none;padding:0;margin:14px 0 20px;display:flex;flex-direction:column;gap:9px}
ul.tick li{padding-left:22px;position:relative;max-width:70ch;font-size:16px}
ul.tick li::before{content:"";position:absolute;left:2px;top:.78em;width:9px;height:1px;
  background:var(--acc)}
.dont ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.dont li{padding-left:24px;position:relative;max-width:72ch;font-size:16px}
.dont li::before{content:"\2715";position:absolute;left:0;top:.05em;color:var(--acc);
  font-size:13px}
.dont{border:1px solid var(--line);background:var(--surface);padding:26px 24px}

/* ---------- FAQ ---------- */
.faq dl{margin:0;border-top:1px solid var(--line)}
.faq dt{font-weight:600;color:var(--ink);padding:18px 0 6px;font-size:17px}
.faq dd{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--hair);
  max-width:72ch;color:var(--body)}

/* ---------- 工程师 ---------- */
.engineer{border:1px solid var(--line);background:var(--surface);padding:28px 26px}
.egrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px}
@media (min-width:760px){.egrid{grid-template-columns:1.1fr .9fr;align-items:start}}
.eng .role{font-family:"IBM Plex Mono",monospace;font-size:13.5px;color:var(--acc);margin:0 0 10px}
.eng .con{font-family:"IBM Plex Mono",monospace;font-size:14px}
.eng.pending{border:1px dashed var(--line);padding:20px;background:var(--sunk)}

/* ---------- CTA ---------- */
.cta{background:var(--navy);color:var(--on-navy);padding:36px 30px;border:1px solid var(--navy-2)}
.cta h2{color:#fff;margin-bottom:10px}
.cta p{color:var(--on-navy);max-width:66ch}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.cta .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---------- 工具 ---------- */
.tool{border:1px solid var(--line);background:var(--surface);padding:26px 24px}
#cwmi{display:grid;grid-template-columns:1fr;gap:14px;max-width:560px}
@media (min-width:660px){#cwmi{grid-template-columns:repeat(2,1fr)}#cwmi #cw-go,#cwmi .result{grid-column:1/-1}}
#cwmi .row{display:flex;flex-direction:column;gap:6px}
#cwmi label{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
#cwmi select,#cwmi input{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);border-radius:0}
#cwmi select:focus,#cwmi input:focus{border-color:var(--acc);outline:none}
.result{display:none;gap:14px;padding:20px;border:1px solid var(--line);background:var(--sunk);
  margin-top:6px}
.result.ok,.result.wip,.result.no{display:flex}
.result .mark{font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:700;line-height:1}
.result.ok{border-left:4px solid var(--ok)}   .result.ok .mark{color:var(--ok)}
.result.wip{border-left:4px solid var(--wip)} .result.wip .mark{color:var(--wip)}
.result.no{border-left:4px solid var(--no)}   .result.no .mark{color:var(--no)}
.result p{margin:6px 0 0;font-size:15.5px;max-width:none}
.result .why{color:var(--muted)}

/* ---------- RFQ ---------- */
form.rfq{border:1px solid var(--line);background:var(--surface);padding:26px 24px}
form.rfq fieldset{border:none;border-top:1px solid var(--hair);margin:0 0 26px;padding:20px 0 0}
form.rfq fieldset:first-of-type{border-top:none;padding-top:0}
form.rfq legend{display:flex;align-items:center;gap:10px;font-family:"Archivo",sans-serif;
  font-size:18px;font-weight:600;color:var(--ink);padding:0;margin-bottom:14px}
form.rfq legend .n{font-family:"IBM Plex Mono",monospace;font-size:12px;background:var(--navy);
  color:#fff;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}
form.rfq .f{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
@media (min-width:760px){form.rfq fieldset{display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 20px}form.rfq legend,form.rfq .hint,form.rfq .drop{grid-column:1/-1}}
form.rfq label{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
form.rfq input,form.rfq select{font:inherit;font-size:16px;padding:10px 12px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:0}
form.rfq input:focus,form.rfq select:focus{border-color:var(--acc);outline:none}
form.rfq .req{color:var(--acc)}
form.rfq .hint{font-size:14px;color:var(--muted);margin:2px 0 14px}
form.rfq .drop{border:1px dashed var(--line);background:var(--sunk);padding:22px}
aside.nda{border:1px solid var(--acc);background:var(--acc-soft);padding:24px}
aside.nda h2{font-size:19px}
aside.nda p{font-size:15.5px}

/* ---------- 文章 ---------- */
article.post{max-width:none}
article.post header{padding-top:44px;max-width:74ch}
article.post h2{margin-top:38px}
article.post h3{margin-top:26px}
article.post p,article.post ul,article.post ol{max-width:70ch}
article.post blockquote{margin:22px 0;padding:2px 0 2px 20px;border-left:3px solid var(--acc)}
article.post blockquote p{font-size:18px;color:var(--ink)}
article.post ol{padding-left:22px}
article.post ol li{margin-bottom:9px;max-width:68ch}

/* ---------- 站脚 ---------- */
footer.site{background:var(--navy);color:var(--on-navy-dim);margin-top:60px;
  padding:44px 22px 22px}
.fgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1.1fr}}
.fbrand{color:#fff;font-weight:700;font-size:17px;margin-bottom:8px}
.ftag{color:var(--on-navy-dim);font-size:14.5px;max-width:32ch}
footer.site h3{color:#fff;font-size:12px;font-family:"IBM Plex Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px}
footer.site a,footer.site span{display:block;color:var(--on-navy-dim);text-decoration:none;
  font-size:14.5px;padding:3px 0}
footer.site a:hover{color:#fff}
footer.site .hrs{font-size:13px;padding-top:8px}
.fbot{max-width:1180px;margin:30px auto 0;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:13px}
.fbot a,.fbot span{display:inline;padding:0}

/* ---------- 打印 ---------- */
@media print{
  header.site,footer.site,.cta,.btns,.crumbs{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .tw,figure,.note{break-inside:avoid}
}

/* ---------- 演示模式（DEMO_MODE = True 时才出现） ---------- */
.demo-banner{
  position:sticky;top:0;z-index:60;background:#8C2A2A;color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.5;
  padding:9px 22px;text-align:center;letter-spacing:.02em}
.demo{
  color:var(--acc);font-weight:600;
  border-bottom:1px dashed var(--acc);cursor:help}
@media print{.demo-banner{position:static;background:#000}}