/* ============================================================================
   IndusWave Lab — Design System  v1.0
   基座: IBM Carbon(结构纪律: 单一强调色 / 0px 圆角 / 背景色分层代替阴影 / 8px 栅格)
   血统: 工业测量仪器面板(数据密度优先, 拒绝装饰)
   ---------------------------------------------------------------------------
   铁律: ① 0px 圆角   ② 唯一强调色 Blue 60  ③ 深度靠背景色分层, 不用 box-shadow
        ④ 8px 栅格   ⑤ 技术文字一律 IBM Plex Mono
   ============================================================================ */

:root{
  /* ── 中性阶 (Gray Family) ───────────────────────────── */
  --g100:#161616;  /* 主文字 / 深色面板 / 页眉页脚 */
  --g90 :#262626;  /* 深色次级面 */
  --g80 :#393939;  /* 深色三级 / hover */
  --g70 :#525252;  /* 次级文字(正文说明) */
  --g60 :#6f6f6f;  /* 占位符 / 弱化文字 */
  --g50 :#8d8d8d;  /* 禁用图标 */
  --g30 :#c6c6c6;  /* 描边 / 分隔线 */
  --g20 :#e0e0e0;  /* 极浅描边 */
  --g10 :#f4f4f4;  /* 卡片底色 / 交替分区 */
  --g10h:#e8e8e8;  /* --g10 的 hover */

  /* ── 强调色 (唯一) ──────────────────────────────────── */
  --blue:#0f62fe;   /* Blue 60 — 按钮 / 链接 / 焦点 / 数据高亮 */
  --blueD:#0043ce;  /* Blue 70 — 链接 hover */
  --blueA:#002d9c;  /* Blue 80 — 按下 */
  --blueL:#edf5ff;  /* Blue 10 — 选中行 / 浅底 */

  /* ── 语义色 ─────────────────────────────────────────── */
  --ok:#24a148;     /* Green 50 — 实测通过 */
  --warn:#f1c21b;   /* Yellow 30 */
  --err:#da1e28;    /* Red 60 */

  /* ── 别名 (保持旧类名可用) ──────────────────────────── */
  --ink:var(--g100); --mid:var(--g70); --soft:var(--g60);
  --line:var(--g30); --line2:var(--g20); --panel:var(--g10);
  --accent:var(--blue); --accent-d:var(--blueD); --accent-l:var(--blueL);

  /* ── 字体 ───────────────────────────────────────────── */
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* ── 8px 栅格 ───────────────────────────────────────── */
  --s2:2px;  --s4:4px;  --s8:8px;   --s12:12px; --s16:16px;
  --s24:24px; --s32:32px; --s40:40px; --s48:48px; --s64:64px; --s80:80px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--g100);
  font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;
  font-feature-settings:'tnum' 1;
}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:600;letter-spacing:-.01em}
h1{font-size:42px;font-weight:300}          /* Carbon: 展示级用 Light 300 */
h2{font-size:32px;font-weight:400}
h3{font-size:20px;font-weight:600;line-height:1.4}
h4{font-size:16px;font-weight:600}
p{margin:0}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blueD);text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:.93em;letter-spacing:.16px}

/* 小字号微字距 — Carbon 的招牌 */
.cap{font-size:12px;line-height:1.33;letter-spacing:.32px;color:var(--g70)}
.sml{font-size:14px;line-height:1.29;letter-spacing:.16px;color:var(--g70)}

.wrap{max-width:1312px;margin:0 auto;padding:0 32px}
@media(max-width:672px){.wrap{padding:0 16px}}

/* ── 页眉 (深色 masthead, 48px) ─────────────────────────── */
header{background:var(--g100);position:sticky;top:0;z-index:60}
.nav{display:flex;align-items:center;justify-content:space-between;height:48px}
.nav .brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:600;
  font-size:15px;letter-spacing:.16px}
.nav .brand img{height:26px;display:block}
.nav .brand .sub{color:var(--g30);font-weight:400;font-size:12px;letter-spacing:.32px}
.nav nav{display:flex;gap:24px}
.nav nav a{color:var(--g30);font-size:14px;font-weight:400;letter-spacing:.16px}
.nav nav a:hover{color:#fff;text-decoration:none}
.nav nav a.cta{color:#fff;border:1px solid var(--blue);padding:6px 14px;background:var(--blue)}
.nav nav a.cta:hover{background:var(--blueD);border-color:var(--blueD)}
@media(max-width:900px){.nav nav a:not(.cta){display:none}}

/* ── 首屏 ───────────────────────────────────────────────── */
.hero{padding:64px 0 48px;border-bottom:1px solid var(--g20)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.32px;color:var(--blue);
  text-transform:uppercase;margin-bottom:16px}
.hero h1{max-width:20ch;margin-bottom:16px}
.hero .lede{font-size:17px;line-height:1.6;color:var(--g70);max-width:62ch;margin-top:8px}
.hero .lede strong{color:var(--g100);font-weight:600}

/* ── 三张牌 (Carbon tile: 背景分层, 无阴影) ─────────────── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--g20);
  border:1px solid var(--g20);margin-top:32px}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{background:#fff;padding:20px}
.tile .k{font-family:var(--mono);font-size:11px;letter-spacing:.32px;color:var(--blue);
  text-transform:uppercase}
.tile .v{font-size:26px;font-weight:600;margin:6px 0 4px;letter-spacing:-.02em}
.tile .d{font-size:13px;line-height:1.45;color:var(--g70)}

/* ── 业务分流 (Fast Sector Tabs) ────────────────────────── */
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g20);
  border:1px solid var(--g20)}
@media(max-width:900px){.sectors{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sectors{grid-template-columns:1fr}}
.sector{background:#fff;padding:20px;display:block;color:inherit;transition:background .12s}
.sector:hover{background:var(--blueL);text-decoration:none}
.sector .n{font-family:var(--mono);font-size:11px;color:var(--g50);letter-spacing:.32px}
.sector .t{font-size:15px;font-weight:600;margin:8px 0 4px;color:var(--g100)}
.sector .d{font-size:12.5px;color:var(--g70);line-height:1.45}

/* ── 分区 ───────────────────────────────────────────────── */
section{padding:64px 0;border-bottom:1px solid var(--g20)}
section.alt{background:var(--g10)}
section.dark{background:var(--g100);color:#fff;border-bottom:none}
section.dark h2,section.dark h3{color:#fff}
section.dark .sec-lede,section.dark .sml{color:var(--g30)}
.sec-h{margin-bottom:32px;max-width:78ch}
.sec-lede{color:var(--g70);font-size:15.5px;line-height:1.6;margin-top:8px}

/* ── 产品卡 (图 + 规格表) ───────────────────────────────── */
.goods{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:900px){.goods{grid-template-columns:1fr}}
.good{border:1px solid var(--g20);background:#fff;display:flex;flex-direction:column}
.good .shot{position:relative;background:var(--g10);border-bottom:1px solid var(--g20)}
.good .shot picture{display:block}
.good .shot img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.good .flag{position:absolute;top:0;left:0;background:var(--blue);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.32px;padding:5px 10px;
  text-transform:uppercase}
.good .flag.g{background:var(--ok)}
.good .body{padding:24px;display:flex;flex-direction:column;flex:1}

/* 型号行 — 技术人员第一眼找的东西 */
.mdl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:12px;border-bottom:1px solid var(--g20);margin-bottom:16px}
.mdl .id{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.16px;color:var(--g100)}
.mdl .price{font-family:var(--mono);font-size:17px;font-weight:600;color:var(--g100)}
.mdl .price small{font-size:11px;color:var(--g60);font-weight:400}

/* 规格表 — 工业买家真正读的东西 */
.spec{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:16px}
.spec th,.spec td{text-align:left;padding:7px 0;border-bottom:1px solid var(--g20);vertical-align:top}
.spec th{color:var(--g70);font-weight:400;width:44%;padding-right:12px}
.spec td{font-family:var(--mono);font-size:12.5px;color:var(--g100);letter-spacing:.16px}

.pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.16px;background:var(--blueL);
  color:var(--blueD);padding:3px 8px;border-radius:24px}
.pill.n{background:var(--g10);color:var(--g70)}

.acts{margin-top:auto;padding-top:16px;display:flex;gap:8px;flex-wrap:wrap}

/* ── 按钮 (Carbon: 0px 圆角, 48px 高) ───────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;
  padding:0 20px;border:1px solid transparent;border-radius:0;background:var(--blue);color:#fff;
  font:600 14px/1 var(--sans);letter-spacing:.16px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blueD);color:#fff;text-decoration:none}
.btn:active{background:var(--blueA)}
.btn.ghost{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn.ghost:hover{background:var(--blueL);color:var(--blueD)}
.btn.dark{background:var(--g80);color:#fff}
.btn.dark:hover{background:var(--g70)}
.btn.sm{height:40px;padding:0 16px;font-size:13px}
.btn.block{width:100%}
.btn+ .btn{margin-left:0}

/* ── 技术插图框 ─────────────────────────────────────────── */
.fig{border:1px solid var(--g20);background:#fff}
.fig .fc{border-bottom:1px solid var(--g20);padding:12px 16px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.fig .fc .t{font-family:var(--mono);font-size:12px;letter-spacing:.32px;color:var(--g100);
  text-transform:uppercase}
.fig .fc .m{font-family:var(--mono);font-size:11px;color:var(--g60)}
.fig svg{display:block;width:100%;height:auto}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.figs{grid-template-columns:1fr}}

/* ── 承诺表 ─────────────────────────────────────────────── */
.deal{width:100%;border-collapse:collapse;font-size:14px}
.deal th,.deal td{text-align:left;padding:16px 20px 16px 0;border-bottom:1px solid var(--g20);
  vertical-align:top}
.deal th{font-family:var(--mono);font-size:11px;letter-spacing:.32px;color:var(--g70);
  text-transform:uppercase;font-weight:400}
.deal td:first-child{width:34%;font-weight:600;color:var(--g100);font-size:13.5px}
.deal td:last-child{color:var(--g70);font-size:13.5px;line-height:1.55}
.deal td:last-child b{color:var(--g100);font-weight:600}

/* ── 表单 (Carbon: 底边线, 非全框) ──────────────────────── */
.form{display:grid;gap:20px}
.f{display:grid;gap:6px}
.f label{font-size:12px;letter-spacing:.32px;color:var(--g70)}
.f input,.f select,.f textarea{width:100%;height:40px;padding:0 16px;border:0;
  border-bottom:2px solid transparent;background:var(--g10);font:400 14px/1.4 var(--sans);
  color:var(--g100);border-radius:0}
.f textarea{height:auto;min-height:88px;padding:10px 16px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;border-bottom-color:var(--blue)}
.f input::placeholder,.f textarea::placeholder{color:var(--g60)}

/* ── 页脚 ───────────────────────────────────────────────── */
footer{background:var(--g100);color:var(--g30);padding:48px 0;font-size:13px}
footer a{color:var(--g30)}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-size:13px;letter-spacing:.32px;margin-bottom:12px;
  font-family:var(--mono);font-weight:600;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
