/* ============================================================
   Nordvia Circuits · design-tokens.css
   卡 01「铜的地层」定型 → 全站唯一的设计来源
   用户三个「要」：要贵 / 要一眼看懂 / 要像人写的
   这三条落成下面三个决定：
     · 要贵   → 间距向上加档（section 从 88 提到 128–160），字重只到 600，不再重
     · 一眼懂 → 每个板块一个结论句 + 一个数；不用图标堆叠，不铺卡片
     · 像人写 → 字体只承担信息，正文靠 IBM Plex Sans 的自然字宽，不靠字距
   ============================================================ */

:root{
  /* ── 色彩 ────────────────────────────────────────────────
     深蓝黑场 + 铜。色彩只有三个角色：底、铜、字。
     品牌绿（取自标识）只用在标识本身与极少数确认态，不上大面积。 */
  --v1:#080D16;   /* 页底 */
  --v2:#0E1725;   /* 面板 */
  --v3:#162235;   /* 抬升面 */
  --v4:#1D2C42;   /* 分隔线上的抬升 */

  --cu:#C4783C;        /* 铜 · 主强调，只用于"要看的那一下" */
  --cu-lt:#E0A46B;     /* 铜亮 · hover 与大数字 */
  --cu-dim:#8A5730;    /* 铜暗 · 装饰线 */

  --brand:#0B6E5F;     /* 标识绿 · 只用于标识与勾选态 */
  --brand-lt:#179078;

  --ink:#EDF3F1;       /* 主文字 · 17.3:1 on 页底 */
  --ink-2:#8FA3AE;     /* 次文字 · 7.4:1 on 页底 · 6.9:1 on 面板 */
  --ink-3:#7C8F9B;     /* 三级 · 5.7:1 on 页底 · 5.3:1 on 面板（13px 正文需 4.5:1，旧值 #5E7280 只有 3.89 → 已换） */

  --rule:#22323F;      /* 1px 分隔 */
  --rule-2:#2E4054;    /* 强调分隔（用在表头） */

  --danger:#C4553B;

  /* ── 字体 ──────────────────────────────────────────────── */
  --f-d:'IBM Plex Sans',-apple-system,'Segoe UI',system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
  --f-b:'IBM Plex Sans',-apple-system,'Segoe UI',system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
  --f-u:'IBM Plex Mono',Consolas,'Cascadia Mono',ui-monospace,monospace;

  /* 字号：只用这 8 档。要贵 → 跨度大，档位少 */
  --t-hero:clamp(38px,6.2vw,76px);
  --t-h2:clamp(26px,3.6vw,44px);
  --t-h3:clamp(20px,2.2vw,26px);
  --t-lead:clamp(17px,1.35vw,19.5px);
  --t-body:16px;
  --t-sm:14.5px;
  --t-xs:13px;
  --t-label:11.5px;    /* 等宽标签 */

  --lh-hero:1.03;
  --lh-h:1.12;
  --lh-body:1.68;

  /* ── 间距 ── 要贵：整体向上加档，section 是最贵的那一档 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px; --s10:128px;

  --section:clamp(88px,9vw,160px);   /* 板块上下留白 */
  --gutter:clamp(22px,4vw,44px);     /* 页边 */
  --measure:62ch;                    /* 正文行宽上限 */
  --wide:1240px;                     /* 内容最大宽 */

  --r:2px;            /* 圆角：几乎不用。工业感的直角 */
  --dur:.22s;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   基础
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--v1);color:var(--ink);
  font:400 var(--t-body)/var(--lh-body) var(--f-b);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-d);font-weight:600;letter-spacing:-.018em;line-height:var(--lh-h)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--cu);outline-offset:3px}

/* ── 布局 ── */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.wrap-n{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}   /* nav 用，同上 */
section{padding:var(--section) 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:none}
.panel{background:var(--v2);border:1px solid var(--rule)}

/* ── 文字角色 ── */
.eyebrow{font:500 var(--t-label)/1.4 var(--f-u);letter-spacing:.2em;text-transform:uppercase;color:var(--cu)}
.lead{font-size:var(--t-lead);color:var(--ink-2);max-width:var(--measure)}
.body{font-size:var(--t-body);color:var(--ink-2);max-width:var(--measure)}
.small{font-size:var(--t-sm);color:var(--ink-2)}
.mono{font-family:var(--f-u);font-variant-numeric:tabular-nums}
.h2{font-size:var(--t-h2)}
.h3{font-size:var(--t-h3)}
.prose p+p{margin-top:1.15em}
.prose b,.prose strong{color:var(--ink);font-weight:600}

/* ── 按钮 ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;                                    /* 触控目标 ≥44px */
  font:500 var(--t-xs)/1 var(--f-u);letter-spacing:.1em;text-transform:uppercase;
  padding:16px 24px;border:1px solid var(--cu);color:var(--cu-lt);
  text-decoration:none;background:transparent;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--cu);color:var(--v1)}
.btn--solid{background:var(--cu);color:var(--v1);border-color:var(--cu)}
.btn--solid:hover{background:var(--cu-lt);border-color:var(--cu-lt)}
.btn--ghost{border-color:var(--rule-2);color:var(--ink)}
.btn--ghost:hover{background:var(--v3);border-color:var(--rule-2);color:var(--ink)}
.btn-row{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin-top:var(--s7)}

/* ── 表格（本卡的核心形态：地层表） ── */
.strata{margin-top:var(--s8);border-top:1px solid var(--rule-2)}
.strata__row{
  display:grid;grid-template-columns:132px 1fr 210px;gap:var(--s5);
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline;
}
.strata__k{font:500 var(--t-xs)/1.5 var(--f-u);color:var(--cu);letter-spacing:.04em}
.strata__v{font-size:var(--t-body)}
.strata__s{font:400 var(--t-label)/1.5 var(--f-u);color:var(--ink-3);text-align:right}
.strata--dense .strata__row{padding:16px 0}

/* ── 数字带 ── */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule)}
.figures--4{grid-template-columns:repeat(4,1fr)}
.figures>div{background:var(--v1);padding:var(--s8) 0}
.figures b{display:block;font:600 clamp(30px,3.8vw,50px)/1.05 var(--f-d);color:var(--cu-lt);letter-spacing:-.025em}
.figures span{display:block;margin-top:10px;font:400 var(--t-label)/1.5 var(--f-u);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ── 图 ── */
.fig{background:var(--v2);border:1px solid var(--rule);padding:var(--s5)}
.fig>img{width:100%}
.fig figcaption{margin-top:var(--s4);font:400 var(--t-label)/1.6 var(--f-u);color:var(--ink-3)}
.photo{border:1px solid var(--rule)}
.photo figcaption{margin-top:var(--s3);font:400 var(--t-label)/1.6 var(--f-u);color:var(--ink-3)}

/* ── 双栏 ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.duo--wide-l{grid-template-columns:1.15fr .85fr}
.duo--wide-r{grid-template-columns:.85fr 1.15fr}

/* ── 版块抬头：编号 + 结论句。要一眼看懂 → 结论句永远在标题位，不在正文里 ── */
.head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.head .eyebrow{display:block}
.head h2{font-size:var(--t-h2);max-width:24ch}
.head .lead{margin-top:var(--s2)}

/* ── 跳到正文（键盘可达） ── */
.skip{position:absolute;left:-9999px;top:0;z-index:40;background:var(--cu);color:var(--v1);
  font:500 var(--t-xs)/1 var(--f-u);letter-spacing:.1em;text-transform:uppercase;padding:14px 20px;text-decoration:none}
.skip:focus{left:0}

/* ── 首屏：地层剖面。卡 01 的规格就是这一块 ── */
.hero{position:relative;overflow:hidden;padding:clamp(84px,10vw,150px) 0 clamp(76px,8vw,124px)}
.hero__photo{position:absolute;inset:0;background:url('/generated/board-dark-1600.jpg') center/cover no-repeat;opacity:.34}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(100deg,var(--v1) 4%,rgba(8,13,22,.9) 44%,rgba(8,13,22,.42) 100%)}
.hero__strata{position:absolute;inset:0;display:grid;grid-template-rows:repeat(6,1fr);pointer-events:none}
.hero__strata span{position:relative;border-bottom:1px solid rgba(196,120,60,.16)}
.hero__strata span::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--cu),transparent);opacity:.42}
.hero__strata span::after{content:'';position:absolute;top:50%;left:var(--x);width:8px;height:8px;
  margin-top:-4px;border-radius:50%;background:var(--cu);box-shadow:0 0 0 4px rgba(196,120,60,.14)}
.hero__in{position:relative}
.hero__h1{font-size:var(--t-hero);line-height:var(--lh-hero);letter-spacing:-.028em;max-width:20ch}
.hero__h1 em{font-style:normal;color:var(--cu-lt)}
.hero__sub{margin-top:var(--s6);font-size:var(--t-lead);color:var(--ink-2);max-width:58ch}
.hero__depth{margin-top:var(--s8);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* 步数进度条：只表相对，不承载数据 */
.steps-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);margin-top:var(--s8)}
.steps-bar i{display:block;height:5px;background:var(--cu);opacity:.72;width:var(--w)}
@media(max-width:760px){ .steps-bar{grid-template-columns:repeat(5,1fr);gap:6px;background:none} }

/* ── 工序行：编号 / 工序 / 说明 / 控制值。工艺页的主形态 ── */
.steps{margin-top:var(--s8);border-top:1px solid var(--rule-2)}
.step{display:grid;grid-template-columns:64px 240px 1fr 200px;gap:var(--s5);
  align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule)}
.step__n{font:500 var(--t-xs)/1.6 var(--f-u);color:var(--cu);letter-spacing:.06em}
.step__t{font-size:var(--t-h3);font-weight:600}
.step__d{font-size:var(--t-sm);color:var(--ink-2);max-width:56ch}
.step__v{font:400 var(--t-label)/1.7 var(--f-u);color:var(--brand-lt);text-align:right}
@media(max-width:900px){
  .step{grid-template-columns:44px 1fr;gap:6px var(--s4);padding:24px 0}
  .step__t{grid-column:2}
  .step__d{grid-column:1 / -1;margin-top:4px}
  .step__v{grid-column:1 / -1;text-align:left;margin-top:10px;padding-top:10px;border-top:1px solid var(--rule)}
}

/* ── 清单（询价页用） ── */
.checklist li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--rule);
  font-size:var(--t-sm);color:var(--ink)}
.checklist li:last-child{border-bottom:none}
.checklist li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:9px;
  border:1px solid var(--cu);background:linear-gradient(135deg,rgba(196,120,60,.35),transparent)}

/* ── 图卡组：图 + 标题 + 一句。用来把"我们做过什么"从文字变成可看的 ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);margin-top:var(--s8)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;background:var(--v2);border:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.card:hover{border-color:var(--cu-dim);background:var(--v3)}
/* 卡片图框用 3:2 —— 本地这批产品照是 801×565（≈1.42），4:3 会把板子裁掉一块 */
.card__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--v1);border-bottom:1px solid var(--rule)}
.card__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.04);transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.09)}
.card__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.card__k{font:500 var(--t-label)/1.4 var(--f-u);letter-spacing:.14em;text-transform:uppercase;color:var(--cu)}
.card__t{font:600 var(--t-h3)/1.25 var(--f-d);letter-spacing:-.012em}
.card__d{font-size:var(--t-sm);color:var(--ink-2)}
.card__m{margin-top:auto;padding-top:var(--s4);font:400 var(--t-label)/1.6 var(--f-u);color:var(--brand-lt)}

/* ── 信任条：认证体系的一行小徽章（用 SVG，不用 emoji） ── */
.badges{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s7)}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;
  border:1px solid var(--rule);background:var(--v2);font:500 var(--t-label)/1.4 var(--f-u);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.badge svg{width:16px;height:16px;flex:none;stroke:var(--cu);fill:none;stroke-width:1.6}

/* ── 对照卡：两栏取舍（叠孔 / 错孔这类） ── */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px);margin-top:var(--s8)}
.compare .panel{padding:clamp(24px,3vw,40px)}
.compare h3{font-size:var(--t-h3)}
.compare .body{margin-top:var(--s4);color:var(--ink)}

/* ── 指标行：数字 + 一句，用在地层表替代不了的地方 ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);margin-top:var(--s8);border:1px solid var(--rule)}
.metrics>div{background:var(--v2);padding:clamp(20px,2.4vw,32px)}
.metrics b{display:block;font:600 clamp(22px,2.4vw,30px)/1.1 var(--f-d);color:var(--cu-lt);letter-spacing:-.02em}
.metrics span{display:block;margin-top:8px;font:400 var(--t-label)/1.6 var(--f-u);color:var(--ink-3);letter-spacing:.06em}

/* 900 只收双栏正文与指标条；图卡在 768 这种平板上排两列比排一列强得多
   （单列会把页面拉到 13,700px，滚动体验反而更差）。 */
@media(max-width:900px){
  .compare,.metrics{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cards,.cards--2,.cards--4{grid-template-columns:1fr}
}

/* ── 页眉 ── */
.site-head{position:sticky;top:0;z-index:20;background:rgba(8,13,22,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--s5)}
.site-head__logo img{height:26px;width:auto}
.site-head__nav{display:flex;gap:clamp(14px,2vw,30px);font-size:var(--t-sm);color:var(--ink-2)}
.site-head__nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.site-head__nav a:hover{color:var(--ink)}
.site-head__nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--cu)}
.site-head__cta{font:500 var(--t-xs)/1 var(--f-u);letter-spacing:.1em;text-transform:uppercase;color:var(--v1);background:var(--cu);padding:13px 18px;text-decoration:none;white-space:nowrap}
.site-head__cta:hover{background:var(--cu-lt)}
.site-head__cta .cta-short{display:none}
/* 375px：页眉收成两行，并且不粘 —— 粘住 100+ px 等于长期占掉 13% 屏幕。
   不用 JS、不遮挡：导航折成可换行的一行。 */
@media(max-width:760px){
  .site-head{position:static}
  .site-head__in{height:auto;flex-wrap:wrap;padding:9px 0 10px;gap:0 var(--s4)}
  .site-head__logo img{height:21px}
  .site-head__cta{padding:9px 12px;font-size:10px}
  .site-head__cta .cta-long{display:none}
  .site-head__cta .cta-short{display:inline}
  /* 五个导航项收成一行：11px 字 + 14px 间距，331px 宽内放得下 */
  .site-head__nav{order:3;width:100%;flex-wrap:wrap;gap:0 14px;
    font-size:10.5px;line-height:1.4;padding-top:7px;margin-top:8px;border-top:1px solid var(--rule)}
}

/* ── 页脚 ── */
.site-foot{background:#05080E;border-top:1px solid var(--rule);padding:var(--s9) 0 var(--s7);font-size:var(--t-sm);color:var(--ink-2)}
.site-foot__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s7)}
.site-foot h4{margin:0 0 var(--s4);font:500 var(--t-label)/1.4 var(--f-u);letter-spacing:.16em;text-transform:uppercase;color:var(--cu)}
.site-foot a{display:block;color:var(--ink-2);text-decoration:none;padding:4px 0}
.site-foot a:hover{color:var(--ink)}
.site-foot__logo img{height:24px;margin-bottom:var(--s4)}
.site-foot__fine{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule);
  font:400 var(--t-label)/1.8 var(--f-u);color:var(--ink-3)}
.site-foot__fine p+p{margin-top:6px}
@media(max-width:760px){ .site-foot__cols{grid-template-columns:1fr 1fr} }

/* ── 页尾转化条 ── */
.cta-band{display:grid;grid-template-columns:1fr auto;gap:var(--s7);align-items:center;
  border:1px solid var(--rule-2);padding:clamp(28px,4vw,52px);background:var(--v2)}
.cta-band h2{font-size:var(--t-h3);max-width:30ch}
@media(max-width:760px){ .cta-band{grid-template-columns:1fr} }

/* ── 窄屏收拢 ── */
@media(max-width:900px){
  .duo,.duo--wide-l,.duo--wide-r{grid-template-columns:1fr}
  .figures,.figures--4{grid-template-columns:1fr}
  .figures>div{padding:var(--s6) 0}
  .strata__row{grid-template-columns:1fr;gap:6px}
  .strata__s{text-align:left}
}
@media(max-width:760px){
  :root{--section:clamp(64px,14vw,96px);--t-hero:clamp(31px,9.2vw,34px)}
  .hero{padding:clamp(48px,11vw,72px) 0 clamp(56px,12vw,84px)}
  .hero__sub{margin-top:var(--s5)}
  .hero__depth{margin-top:var(--s6)}
  .btn{padding:15px 20px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* 打印：条款化页面必须能直接打印 */
@media print{
  :root{--v1:#fff;--v2:#fff;--v3:#fff;--ink:#111;--ink-2:#333;--ink-3:#555;--rule:#ccc;--rule-2:#999;--cu:#8A4A18;--cu-lt:#8A4A18}
  body{background:#fff;color:#111}
  .site-head,.cta-band,.btn{display:none !important}
  section{padding:18px 0;break-inside:avoid}
}