/* ===== EFFECT-PIGMENT 共享测试样式（提炼自 index.html 设计语言） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --navy:#0c2233; --blue:#1a6fc4; --ink:#1f2933; --mut:#5b6770;
  --line:#e4e8ec; --bg:#f6f8fa; --gold:#caa24a;
}
body { font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }

/* 顶部导航 */
header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.nav { display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand { font-weight:700; font-size:17px; letter-spacing:.3px; color:var(--navy); }
.brand span { color:var(--blue); }
.links { display:flex; gap:30px; }
.links a { font-size:14px; color:var(--mut); }
.links a:hover { color:var(--blue); }
.cta { background:var(--blue); color:#fff; padding:9px 20px; border-radius:5px; font-size:14px; font-weight:500; }
.cta:hover { background:#155a9e; }

/* Hero */
.hero { position:relative; color:#fff; }
.hero img { width:100%; height:420px; object-fit:cover; display:block; }
.hero .mask { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,24,38,.82),rgba(8,24,38,.35)); }
.hero .copy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; }
.hero h1 { font-size:40px; line-height:1.15; font-weight:700; max-width:680px; }
.hero p { font-size:18px; margin:18px 0 28px; max-width:560px; color:#d7e3ef; }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.btn2 { background:var(--blue); color:#fff; padding:12px 24px; border-radius:5px; font-size:14px; font-weight:500; }
.btn2:hover { background:#155a9e; }
.btn3 { background:transparent; border:1.5px solid #fff; color:#fff; padding:12px 24px; border-radius:5px; font-size:14px; font-weight:500; }
.btn3:hover { background:rgba(255,255,255,.12); }

/* 认证条 */
.certs { background:var(--navy); color:#fff; }
.certs .wrap { display:flex; gap:34px; align-items:center; height:60px; flex-wrap:wrap; }
.certs .lab { font-size:13px; color:#9fb4c6; letter-spacing:.5px; }
.certs .item { font-size:14px; font-weight:600; }

/* 区块 */
section.block { padding:72px 0; }
.sec-h { font-size:30px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.sec-s { color:var(--mut); font-size:15px; margin-bottom:38px; max-width:640px; }

/* 分类大图卡 */
.cats { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.cat { border-radius:10px; overflow:hidden; position:relative; min-height:300px; display:flex; align-items:flex-end; }
.cat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cat .ov { position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,24,38,.82),rgba(8,24,38,.1)); }
.cat .tx { position:relative; padding:28px; color:#fff; }
.cat h3 { font-size:22px; margin-bottom:8px; }
.cat p { font-size:14px; color:#d7e3ef; max-width:420px; }
.cat .more { display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:#9fd0ff; }

/* 产品卡 */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; transition:box-shadow .2s,transform .2s; }
.card:hover { box-shadow:0 10px 30px rgba(12,34,51,.10); transform:translateY(-3px); }
.card img { width:100%; height:180px; object-fit:cover; display:block; }
.card .bd { padding:18px 18px 22px; }
.card h4 { font-size:15px; margin-bottom:7px; color:var(--navy); }
.card p { font-size:13px; color:var(--mut); }
.card .more { display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--blue); }
.card .more:hover { text-decoration:underline; }

/* 应用卡 */
.apps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.apps .a { border:1px solid var(--line); border-radius:12px; padding:26px 22px; text-align:center; background:#fff; transition:box-shadow .2s,transform .2s; }
.apps .a:hover { box-shadow:0 10px 30px rgba(12,34,51,.10); transform:translateY(-3px); }
.apps .ai { width:52px; height:52px; border-radius:13px; background:linear-gradient(135deg,#1a6fc4,#0c2233); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:22px; }
.apps h4 { font-size:15.5px; color:var(--navy); margin-bottom:6px; }
.apps p { font-size:12.5px; color:var(--mut); }

/* 列表双栏 */
.two { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.two img { width:100%; border-radius:10px; }
.two h2 { font-size:26px; color:var(--navy); margin-bottom:16px; }
.two p { color:var(--mut); margin-bottom:14px; font-size:15px; }
.two ul { list-style:none; margin:8px 0 18px; }
.two li { padding-left:22px; position:relative; color:var(--ink); font-size:14px; margin-bottom:9px; }
.two li:before { content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--blue); }

/* 信任数据条 */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px; }
.why-i { text-align:center; }
.why-i .n { font-size:34px; font-weight:700; color:#9fd0ff; }
.why-i .t { font-size:13px; color:#c4d3df; margin-top:6px; }

/* 页脚 */
footer { background:#081820; color:#7e93a3; padding:44px 0 26px; font-size:13px; }
.fg { display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
footer h4 { color:#fff; font-size:14px; margin-bottom:14px; }
footer a { display:block; color:#7e93a3; margin-bottom:8px; }
footer a:hover { color:#fff; }
.copy { text-align:center; margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }

/* ===== 新增测试组件 ===== */
/* 面包屑 */
.crumb { font-size:13px; color:var(--mut); padding:18px 0 0; }
.crumb a:hover { color:var(--blue); }

/* 规格表 */
.spec { width:100%; border-collapse:collapse; margin:18px 0; font-size:14px; }
.spec th, .spec td { border:1px solid var(--line); padding:10px 14px; text-align:left; }
.spec th { background:var(--bg); color:var(--navy); width:38%; }
.spec td { color:var(--ink); }

/* 下载列表（SDS/TDS/COA） */
.dls { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:20px 0 8px; }
.dl { border:1px solid var(--line); border-radius:10px; padding:18px; background:#fff; display:flex; align-items:center; gap:14px; transition:box-shadow .2s; }
.dl:hover { box-shadow:0 8px 22px rgba(12,34,51,.08); }
.dl .ic { width:44px; height:44px; border-radius:10px; background:rgba(26,111,196,.12); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.dl .t { font-size:14px; font-weight:600; color:var(--navy); }
.dl .s { font-size:12px; color:var(--mut); }
.dl a { font-size:13px; font-weight:600; color:var(--blue); margin-top:4px; display:inline-block; }

/* 询盘车面板 */
.cart-fab { position:fixed; right:24px; bottom:24px; z-index:90; background:var(--blue); color:#fff; border:none; padding:14px 18px; border-radius:50px; font-size:14px; font-weight:600; cursor:pointer; box-shadow:0 8px 24px rgba(26,111,196,.4); }
.cart-fab .badge { background:#fff; color:var(--blue); border-radius:50%; padding:1px 7px; font-size:12px; margin-left:6px; }
.cart-panel { position:fixed; right:24px; bottom:84px; width:340px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 44px rgba(12,34,51,.18); z-index:91; padding:18px; display:none; }
.cart-panel h4 { font-size:15px; color:var(--navy); margin-bottom:12px; }
.cart-panel .ci { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:8px 0; border-bottom:1px dashed var(--line); }
.cart-panel .ci button { background:none; border:none; color:#c0392b; cursor:pointer; font-size:13px; }
.cart-panel .empty { color:var(--mut); font-size:13px; padding:10px 0; }
.cart-panel textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:8px; font-size:13px; margin-top:10px; min-height:60px; resize:vertical; font-family:inherit; }
.cart-panel .send { width:100%; background:var(--blue); color:#fff; border:none; padding:10px; border-radius:6px; font-size:14px; font-weight:600; margin-top:10px; cursor:pointer; }
.add-cart { background:var(--navy); color:#fff; border:none; padding:10px 18px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; }
.add-cart:hover { background:#13344b; }

/* 工艺背书步骤 */
.proc { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:30px; }
.proc .p { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:24px 20px; text-align:center; }
.proc .num { width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 14px; }
.proc h4 { font-size:15px; color:var(--navy); margin-bottom:8px; }
.proc p { font-size:13px; color:var(--mut); }

/* 标签徽章 */
.tag { display:inline-block; background:rgba(26,111,196,.1); color:var(--blue); font-size:12px; padding:4px 10px; border-radius:20px; margin:0 6px 6px 0; }

/* 响应式 */
@media (max-width:820px) {
  .cats,.grid,.apps,.two,.fg { grid-template-columns:1fr; }
  .why-grid,.proc,.dls { grid-template-columns:1fr 1fr; }
  .links { display:none; }
  .hero h1 { font-size:30px; }
  .hero img { height:360px; }
}

/* ===== 产品详情（SDS 页） ===== */
.gallery { position:sticky; top:90px; }
.gallery .main { width:100%; height:420px; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:var(--bg); cursor:pointer; }
.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px; }
.thumbs img { width:100%; height:90px; object-fit:cover; border-radius:6px; border:2px solid transparent; background:var(--bg); cursor:pointer; }
.thumbs img.on { border-color:var(--blue); }

/* 联系区（navy） */
.contact .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.contact h2 { font-size:28px; margin-bottom:8px; }
.contact .cs { color:#9fb4c6; font-size:14px; margin-bottom:24px; }
.info-box { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:28px; }
.info { list-style:none; margin:0; padding:0; }
.info li { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:14px; color:#d7e3ef; }
.info b { color:#9fd0ff; font-weight:600; min-width:78px; flex:none; }
@media (max-width:820px){ .contact .grid2 { grid-template-columns:1fr; } }

/* ===== 技术文件清单（SDS/TDS/COA 等） ===== */
.doc-hint {
  display:none; background:#eaf4ff; border:1px solid #b9d8f5; color:#155a9e;
  padding:12px 16px; border-radius:8px; font-size:14px; margin:0 0 18px;
}
.doclist { display:flex; flex-direction:column; gap:12px; max-width:880px; }
.doc {
  display:flex; align-items:center; gap:16px; border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; background:#fff; transition:box-shadow .2s;
}
.doc:hover { box-shadow:0 8px 22px rgba(12,34,51,.08); }
.doc.pending { background:#fffdf6; border-color:#f0e2b8; }
.doc-ic {
  width:44px; height:44px; border-radius:10px; background:rgba(26,111,196,.12); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex:none;
}
.doc.pending .doc-ic { background:rgba(214,158,46,.14); color:#c08a17; }
.doc-main { flex:1; min-width:0; }
.doc-t { font-size:15px; font-weight:600; color:var(--navy); }
.doc-lang { font-size:11px; color:#fff; background:var(--blue); padding:1px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; }
.doc-badge { font-size:11px; color:#c08a17; background:#f7eccb; padding:1px 7px; border-radius:10px; margin-left:6px; vertical-align:middle; }
.doc-s { font-size:13px; color:var(--mut); margin-top:3px; }
.doc-act { flex:none; }
.doc-dl { display:inline-block; background:var(--blue); color:#fff; padding:9px 16px; border-radius:6px; font-size:13px; font-weight:600; }
.doc-dl:hover { background:#155a9e; }
.doc-req { background:var(--navy); color:#fff; border:none; padding:9px 16px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.doc-req:hover { background:#13344b; }
.doc-kind { font-size:11px; color:#5a6b7b; background:#eef1f4; padding:1px 7px; border-radius:4px; margin-left:6px; vertical-align:middle; font-weight:500; }
.doc-badge.blue { color:#155a9e; background:#e3eefb; }
.sub-h { font-size:19px; font-weight:700; color:var(--navy); margin:34px 0 4px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.scope-note { font-size:12px; font-weight:500; color:#fff; background:#2a7de1; padding:2px 9px; border-radius:10px; letter-spacing:.3px; }
.scope-desc { color:var(--mut); font-size:13.5px; margin-bottom:16px; max-width:680px; }
.doc.company { border-left:3px solid #2a7de1; }
.doc.product { border-left:3px solid var(--blue); }
@media (max-width:560px){
  .doc { flex-wrap:wrap; }
  .doc-act { width:100%; }
  .doc-req, .doc-dl { width:100%; text-align:center; }
}