/* ==========================================================================
   上海熔恒特种合金有限公司 · 官网（模仿版）
   版式手法学自同行站存档代码（斜切装饰块 / vw 流式缩放 / 直角卡片 + 全圆按钮 /
   纯 CSS 号码轮换 / 交错入场 / 圆形场景卡），代码实现、配色与文案全部为自有。
   配色：藏青 #1B3A6B 主 · 橙红 #E2542A 点缀 · 银灰 #A9AFB8 线条
   动效 = 纯 CSS + 少量原生 JS，零框架、零外部请求
   ========================================================================== */

:root{
  --navy-0:#061021; --navy-1:#0B1B33; --navy-2:#122A50; --navy-3:#1B3A6B; --navy-4:#22406E;
  --accent:#E2542A; --accent-2:#FF7A4D; --silver:#A9AFB8; --silver-2:#C6CEDA;
  --bg:#F5F8FC; --ink:#1E2836; --ink-2:#3A4657; --muted:#6B7686; --line:rgba(27,58,107,.12);
  --deco:rgba(27,58,107,.07); --deco-strong:rgba(27,58,107,.14);
  --shadow-s:0 1px 2px rgba(11,27,51,.06),0 2px 10px rgba(11,27,51,.05);
  --shadow-m:0 12px 30px rgba(11,27,51,.10),0 2px 8px rgba(11,27,51,.06);
  --shadow-l:0 28px 60px rgba(11,27,51,.20),0 6px 18px rgba(11,27,51,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
  --skew:-15deg;                 /* 全站统一的斜切角度（学自参考站手法） */
  --fs-1:clamp(30px,4.2vw,58px); /* 首屏主标题 */
  --fs-2:clamp(24px,2.9vw,40px); /* 节标题 */
  --fs-3:clamp(18px,1.5vw,22px); /* 卡片标题 */
  --fs-body:clamp(15px,1.02vw,16.5px);
  --sect:clamp(46px,4.6vw,74px);/* 节上下留白（2026-09-17 由 64~104 收紧到 46~74，减少空档） */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);overflow-x:hidden;font-size:var(--fs-body);line-height:1.78;
  font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em}
img{display:block;max-width:100%}
.wrap{max-width:1260px;margin:0 auto;padding:0 clamp(18px,2.4vw,34px)}
.js-off [data-reveal]{opacity:1;transform:none}

/* ---------- 全局质感层 ---------- */
.grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.05'/></svg>")}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px rgba(226,84,42,.6)}
#veil{position:fixed;inset:0;z-index:300;background:var(--navy-0);pointer-events:none;
  animation:veilOut .85s var(--ease) .05s both}
@keyframes veilOut{from{opacity:1}to{opacity:0;visibility:hidden}}

/* ---------- 关键帧（手法清单） ---------- */
@keyframes titleIn{from{opacity:0;transform:translateY(9vw)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideFromL{from{opacity:0;transform:skew(var(--skew)) translateX(-14vw)}to{opacity:.5;transform:skew(var(--skew)) translateX(0)}}
@keyframes slideFromR{from{opacity:0;transform:skew(var(--skew)) translateX(14vw)}to{opacity:.5;transform:skew(var(--skew)) translateX(0)}}
@keyframes riseUp{from{opacity:0;transform:translateY(3vw)}to{opacity:1;transform:translateY(0)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes aurora{0%{transform:translate3d(-5%,-2%,0) scale(1.05)}50%{transform:translate3d(5%,3%,0) scale(1.16)}100%{transform:translate3d(-5%,-2%,0) scale(1.05)}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}
@keyframes floatyR{0%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(-10px,-10px)}100%{transform:rotate(45deg) translate(0,0)}}
@keyframes sheen{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(230%) skewX(-18deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.25);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}.cbar .seg{width:var(--w)!important}}

/* ---------- 家族切换条（学参考站：把合金家族直接做成顶部横排） ---------- */
.fambar{background:var(--navy-0);color:#93A9C4;font-size:12.5px;position:relative;z-index:60}
.fambar .wrap{display:flex;align-items:center;height:42px;gap:0}
.fambar .fam{display:flex;height:100%;flex:1;overflow-x:auto;scrollbar-width:none}
.fambar .fam::-webkit-scrollbar{display:none}
.fambar .fam a{display:flex;align-items:center;padding:0 clamp(14px,2vw,30px);white-space:nowrap;height:100%;
  letter-spacing:.6px;position:relative;opacity:.75;transition:opacity .24s,background .24s}
.fambar .fam a:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.fambar .fam a:hover{opacity:1;background:rgba(255,255,255,.05)}
.fambar .fam a:hover:after,.fambar .fam a.on:after{transform:scaleX(1)}
.fambar .fam a.on{opacity:1;color:#fff}
.fambar .side{display:flex;align-items:center;gap:16px}
.fambar .side a{opacity:.8;transition:.24s}
.fambar .side a:hover{opacity:1;color:#fff}
.fambar .burger{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;
  width:38px;height:30px;font-size:15px;cursor:pointer;margin-left:10px}

/* ---------- 主导航 + 巨型下拉面板 ---------- */
.gnav{position:sticky;top:0;z-index:55;color:#fff;background:rgba(11,27,51,.74);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.08);transition:background .35s var(--ease),box-shadow .35s}
.gnav.solid{background:rgba(8,20,38,.95);box-shadow:0 10px 30px rgba(6,16,33,.34)}
.gnav .bar{display:flex;align-items:center;max-width:1260px;margin:0 auto;padding:0 clamp(18px,2.4vw,34px);
  height:76px;transition:height .35s var(--ease);gap:2px}
.gnav.solid .bar{height:64px}
.gnav .logo{display:flex;align-items:center;gap:12px;margin-right:auto}
.gnav .logo img{height:42px;transition:height .35s var(--ease);filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.gnav.solid .logo img{height:36px}
.gnav .logo b{display:block;font-size:17px;letter-spacing:.4px}
.gnav .logo i{display:block;font-style:normal;font-size:9.5px;letter-spacing:1.5px;color:#8FA6C2}
.gnav .menu{display:flex;align-items:stretch;height:100%}
.gnav .menu>li{list-style:none;position:static;display:flex;align-items:center;height:100%}
.gnav .menu>li>a{padding:0 15px;font-size:15px;display:flex;align-items:center;height:100%;position:relative;
  opacity:.84;transition:opacity .24s,color .24s}
.gnav .menu>li>a:before{content:"";position:absolute;left:15px;right:15px;bottom:24px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.gnav .menu>li>a:hover{opacity:1}
.gnav .menu>li>a:hover:before,.gnav .menu>li>a.on:before{transform:scaleX(1)}
.gnav .menu>li>a.on{opacity:1;font-weight:600}
.gnav .menu>li.has-panel>a:after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:8px;opacity:.6}
/* 面板：悬停/聚焦整幅展开，5 列 */
.gnav .panel-wrap{position:absolute;left:0;right:0;top:100%;pointer-events:none}
.gnav .panel{background:rgba(6,16,33,.97);border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 60px rgba(0,0,0,.45);opacity:0;transform:translateY(-14px);visibility:hidden;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s;pointer-events:auto;
  backdrop-filter:blur(10px)}
.gnav .menu>li:hover .panel,.gnav .menu>li:focus-within .panel{opacity:1;transform:none;visibility:visible}
.gnav .panel .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);
  max-width:1260px;margin:0 auto;padding:clamp(24px,2.6vw,38px) clamp(18px,2.4vw,34px) clamp(28px,3vw,42px)}
/* 每列做成 flex 纵向：末尾「查看全部」用 margin-top:auto 压到底 —— 各列条目数不同也能对齐
   （2026-09-19 修：原来 5 列「查看全部」按条目数自然排，用户截图里铜·钛合金那列比别列高 221px） */
.gnav .panel .grid>div{display:flex;flex-direction:column;align-items:stretch}
.gnav .panel h4{font-size:12px;letter-spacing:1.6px;color:#8FA6C2;font-weight:600;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px}
.gnav .panel h4:before{content:"";width:16px;height:2px;background:var(--accent);border-radius:2px}
.gnav .panel a.pl{display:block;font-size:14px;color:#C6CEDA;padding:6px 0;opacity:.86;
  transition:opacity .2s,color .2s,transform .24s var(--ease)}
.gnav .panel a.pl:hover{opacity:1;color:#fff;transform:translateX(4px)}
.gnav .panel a.pl span{color:#7E93B0;font-size:11.5px;margin-left:8px;letter-spacing:.3px}
/* 「查看全部 →」行：贴列底 + 与上方条目留分隔线；flex 排布保证「英文代号」和中文之间有间距，
   并 nowrap 防止 FLANGE & MACHINED 这种长代号换行成两行（原来第五列就换行了） */
.gnav .panel a.pl.plmore{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:13.5px;color:#9FB3D0}
.gnav .panel a.pl.plmore span{margin-left:0;flex:none}
.gnav .panel a.pl.plmore:hover{transform:none;color:#fff}
.gnav a.cta{background:linear-gradient(120deg,var(--accent),#F0713F);border-radius:24px;padding:10px 22px;
  font-size:14.5px;font-weight:600;margin-left:14px;position:relative;overflow:hidden;align-self:center;
  box-shadow:0 6px 20px rgba(226,84,42,.34);transition:transform .28s var(--ease),box-shadow .28s}
.gnav a.cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(226,84,42,.46)}
.gnav a.cta:after{content:"";position:absolute;top:-40%;left:0;width:36%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.gnav a.cta:hover:after{animation:sheen .85s var(--ease)}

/* ---------- 顶部跑马灯 ---------- */
.ticker{background:linear-gradient(90deg,#8A2D12,#C2441F 50%,#8A2D12);color:#FFF1E8;font-size:13px;
  position:relative;z-index:54;overflow:hidden;height:36px;display:flex;align-items:center}
.ticker .track{display:flex;white-space:nowrap;width:max-content;animation:ticker 26s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{padding:0 46px;display:inline-flex;align-items:center;gap:12px;letter-spacing:.4px}
.ticker span:before{content:"";width:5px;height:5px;border-radius:50%;background:#FFD9C6;flex:none}

/* ---------- 首屏 ---------- */
.hero{position:relative;overflow:hidden;color:#fff;padding:clamp(58px,7vw,116px) 0 clamp(66px,7.6vw,124px);
  background:radial-gradient(1200px 620px at 82% 8%,#1A3A6E 0%,transparent 62%),
             linear-gradient(165deg,#0A1830 0%,#12305C 46%,#0B1B33 100%)}
.hero .aurora{position:absolute;inset:-26%;pointer-events:none;opacity:.7;filter:blur(46px);
  animation:aurora 24s ease-in-out infinite}
.hero .aurora.b{inset:-32%;opacity:.46;animation-duration:33s;animation-direction:reverse}
.hero .aurora i{position:absolute;display:block;border-radius:50%}
.hero .aurora i:nth-child(1){width:46%;height:46%;left:28%;top:-6%;background:rgba(226,84,42,.24)}
.hero .aurora i:nth-child(2){width:44%;height:44%;right:6%;top:4%;background:rgba(74,123,181,.42)}
.hero .aurora i:nth-child(3){width:40%;height:40%;left:8%;bottom:-4%;background:rgba(169,175,184,.18)}
.hero .gridlines{position:absolute;inset:0;opacity:.3;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(820px 480px at 66% 36%,#000 20%,transparent 78%);
  mask-image:radial-gradient(820px 480px at 66% 36%,#000 20%,transparent 78%)}
/* 斜切装饰块（参考站招牌手法：伪元素 + skew，纯装饰零图片） */
.hero .slash{position:absolute;pointer-events:none;background:var(--silver);opacity:.10;
  transform:skew(var(--skew))}
.hero .slash.s1{width:4.4vw;height:100%;top:0;left:55vw;opacity:.07;animation:slideFromL 1.1s var(--ease) .1s both}
.hero .slash.s2{width:1.5vw;height:100%;top:0;left:62vw;opacity:.05;animation:slideFromL 1.1s var(--ease) .24s both}
.hero .slash.s3{width:12vw;height:100%;top:0;right:-3vw;opacity:.045;animation:slideFromR 1.1s var(--ease) .16s both}
.hero .float{position:absolute;pointer-events:none}
.hero .float.dia{width:74px;height:74px;right:5%;top:12%;border:1px solid rgba(255,255,255,.2);
  border-radius:10px;animation:floatyR 12s ease-in-out infinite}
.hero .float.ring{width:56px;height:56px;left:5%;top:16%;border-radius:50%;border:1px solid rgba(226,84,42,.5);
  box-shadow:0 0 26px rgba(226,84,42,.26) inset;animation:floaty 8.5s ease-in-out infinite}
.hero .float.glow{width:230px;height:230px;right:2%;bottom:4%;border-radius:50%;opacity:.85;
  background:radial-gradient(circle,rgba(226,84,42,.2),rgba(74,123,181,.1) 46%,transparent 72%);
  animation:floaty 15s ease-in-out infinite}
.hero .wrap{position:relative;z-index:2}
.hero .hgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4.4vw,64px);align-items:center}
.hero .kick{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:3px;color:#DCE3EC;
  border:1px solid rgba(198,206,218,.28);background:rgba(255,255,255,.05);padding:7px 15px;border-radius:22px;
  animation:riseUp .9s var(--ease) both}
.hero .kick:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);animation:pulse 2.4s ease-in-out infinite}
.hero h1{font-size:var(--fs-1);font-weight:800;margin:22px 0 0;line-height:1.14;
  animation:titleIn 1s var(--ease) both}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#FFD9C6,#FF9B6E 45%,#E2542A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:#B9C7DA;font-size:16.5px;font-weight:300;max-width:40em;margin:20px 0 32px;
  animation:riseUp 1s var(--ease) .24s both}
.hero .lead b{color:#fff;font-weight:600}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px;animation:riseUp 1s var(--ease) .36s both}
/* width 由 site.js 按当前词实时设定（留 ghost 作为无 JS 时的兜底）：
   原来是白拿「最长词」的宽度，轮播到短词时后面就空出一大截 —— 用户截图里圈的就是这块空隙。
   ⚠️ height 必须等于「整行行高」（本页 line-height:1.78）：
   原来写 1.4em = 23.1px，而行盒是 29.37px —— 词的底部被裁掉 6px、
   整体还比周围字高 3px（用户 09-19 二次反馈「这个镍基合金 没对齐」就是这个），
   切换瞬间还会在下沿露出下一个词的顶边（一条细线）。 */
.rot{position:relative;display:inline-block;height:1.78em;overflow:hidden;vertical-align:bottom;
  transition:width .45s var(--ease)}
.rot b{position:absolute;left:0;top:0;font-weight:600;color:#fff;white-space:nowrap;opacity:0;
  transform:translateY(100%);transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* 首个 b 为占位（static 且隐藏）：给轮播区撑出最长一项的宽度，避免行内出现大片空白 */
.rot b.ghost{position:static;visibility:hidden;opacity:0!important;transform:none!important}
.rot b.on{opacity:1;transform:none}
.rot b.out{opacity:0;transform:translateY(-100%)}
/* 家族按钮组（学参考站首屏的家族直达按钮） */
.fambtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;animation:riseUp 1s var(--ease) .48s both}
.fambtns a{font-size:13px;letter-spacing:.6px;padding:9px 18px;border-radius:22px;color:#C6CEDA;
  border:1px solid rgba(198,206,218,.26);background:rgba(255,255,255,.04);
  transition:background .26s,color .26s,transform .26s var(--ease),border-color .26s}
.fambtns a:hover{background:rgba(226,84,42,.16);color:#fff;border-color:rgba(226,84,42,.5);transform:translateY(-3px)}
/* 首屏成分面板 */
.hero-panel{position:relative;border-radius:18px;padding:clamp(20px,2.2vw,30px);color:#fff;
  background:linear-gradient(165deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-l);backdrop-filter:blur(10px);
  transform-style:preserve-3d;transition:transform .35s var(--ease);animation:riseUp 1.1s var(--ease) .3s both}
.hero-panel:before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.3),transparent 42%)}
.hero-panel .hp-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:13px;color:#9FB3D0;margin-bottom:18px}
.hero-panel .hp-hd b{font-size:22px;color:#fff}
.hero-panel .hp-hd span{font-size:11.5px;color:#8FA6C2;border:1px solid rgba(143,166,194,.34);padding:2px 9px;border-radius:12px}
.hero-panel .hp-hd span.alt{color:var(--accent-2);border-color:rgba(255,123,77,.4)}
.hero-panel .hp-ft{margin-top:16px;font-size:12px;color:#8FA6C2;line-height:1.7}
.hp-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:11.5px;color:#9FB3D0}
.hp-legend i{font-style:normal;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hp-legend i:before{content:"";width:9px;height:9px;border-radius:2px;background:var(--c);flex:none}
.hero .stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);margin-top:clamp(34px,4vw,60px);
  padding-top:clamp(22px,2.6vw,34px);border-top:1px solid rgba(255,255,255,.12);
  animation:riseUp 1.1s var(--ease) .6s both}
.hero .stats div b{display:block;font-size:clamp(26px,2.6vw,38px);font-weight:800;color:#fff;line-height:1.1}
.hero .stats div b em{font-style:normal;font-size:.6em;color:var(--accent-2);margin-left:2px}
.hero .stats div span{font-size:12.5px;color:#8FA6C2;letter-spacing:.6px}
.hero .tomore{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;color:#93A9C4;
  font-size:11.5px;letter-spacing:2px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.hero .tomore i{width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);
  animation:floaty 2.6s ease-in-out infinite}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:34px;font-size:15.5px;
  font-weight:600;color:#fff;border:0;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--accent),#F0713F);box-shadow:0 10px 30px rgba(226,84,42,.34);
  transition:transform .28s var(--ease),box-shadow .28s}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(226,84,42,.46)}
.btn:after{content:"";position:absolute;top:-40%;left:0;width:36%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.btn:hover:after{animation:sheen .9s var(--ease)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);box-shadow:none;font-weight:500;
  backdrop-filter:blur(4px)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.solid{background:linear-gradient(120deg,var(--navy-3),var(--navy-4));box-shadow:0 10px 26px rgba(11,27,51,.28)}
.btn.solid:hover{box-shadow:0 18px 40px rgba(11,27,51,.34)}

/* ---------- 通用节 ---------- */
section.blk{padding:var(--sect) 0;position:relative}
section.blk.alt{background:var(--bg)}
section.blk.dark{background:linear-gradient(170deg,#0A1830,#122A50 58%,#0B1B33);color:#fff}
.shead{max-width:62em;margin-bottom:clamp(30px,3.4vw,52px);position:relative}
.shead .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:11.5px;
  letter-spacing:3px;font-weight:700}
.shead .eyebrow:before{content:"";width:26px;height:1.5px;background:var(--accent)}
section.blk.dark .shead .eyebrow{color:var(--accent-2)}
.shead h2{font-size:var(--fs-2);font-weight:800;margin:14px 0 0;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--ease) .1s}
.shead.in h2{clip-path:inset(0 0 0 0)}
.shead p{color:var(--muted);margin:14px 0 0;font-weight:300;max-width:54em}
section.blk.dark .shead p{color:#9FB3D0}
.shead .rule{width:62px;height:3px;border-radius:2px;margin-top:20px;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .35s;background:linear-gradient(90deg,var(--accent),rgba(226,84,42,.15))}
.shead.in .rule{transform:scaleX(1)}
/* 节标题的斜切装饰（学参考站 products-h2 的 ta/tb 左右滑入） */
.shead.deco:before,.shead.deco:after{content:"";position:absolute;top:-.6em;width:clamp(90px,13vw,220px);
  height:clamp(46px,6.6vw,120px);background:var(--deco);z-index:-1;transform:skew(var(--skew))}
.shead.deco:before{left:-3vw;animation:slideFromL 1s var(--ease) .15s both}
.shead.deco:after{right:-3vw;animation:slideFromR 1s var(--ease) .15s both}
section.blk.dark .shead.deco:before,section.blk.dark .shead.deco:after{background:rgba(255,255,255,.05)}
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0ms)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- 面包屑（斜切分隔符，学参考站 #breadol） ---------- */
.crumb{background:#F1F5FA;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.crumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;
  max-width:1260px;margin:0 auto;padding:0 clamp(18px,2.4vw,34px);height:48px}
.crumb li{display:flex;align-items:center}
.crumb li+li:before{content:"";width:1px;height:14px;background:var(--ink);opacity:.35;
  transform:skew(var(--skew));margin:0 14px}
.crumb a:hover{color:var(--accent)}

/* ---------- 内页头 ---------- */
.pagehead{position:relative;overflow:hidden;color:#fff;
  padding:clamp(46px,5.4vw,84px) 0 clamp(44px,5vw,74px);
  background:radial-gradient(900px 420px at 78% 4%,#1A3A6E 0%,transparent 58%),
             linear-gradient(165deg,#0A1830 0%,#12305C 52%,#0B1B33 100%)}
.pagehead .gridlines{position:absolute;inset:0;opacity:.26;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:66px 66px;
  -webkit-mask-image:radial-gradient(700px 340px at 74% 30%,#000 20%,transparent 78%);
  mask-image:radial-gradient(700px 340px at 74% 30%,#000 20%,transparent 78%)}
.pagehead .slash{position:absolute;top:0;height:100%;width:11vw;background:var(--silver);opacity:.08;
  transform:skew(var(--skew));right:6vw;animation:slideFromR 1.1s var(--ease) .2s both}
.pagehead .wrap{position:relative;z-index:2}
.pagehead .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-2);font-size:11.5px;
  letter-spacing:3px;font-weight:700}
.pagehead .eyebrow:before{content:"";width:24px;height:1.5px;background:var(--accent)}
.pagehead h1{font-size:clamp(26px,3.4vw,46px);font-weight:800;margin:14px 0 0;animation:titleIn .95s var(--ease) both}
.pagehead .sub{color:#B9C7DA;font-weight:300;max-width:54em;margin:14px 0 0;animation:riseUp 1s var(--ease) .2s both}
.pagehead .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;animation:riseUp 1s var(--ease) .3s both}
.pagehead .badges span{font-size:12.5px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);
  padding:5px 13px;border-radius:20px;color:#DCE3EC}
.pagehead .badges span.hot{border-color:rgba(255,123,77,.5);color:#FFB99E}

/* ---------- 场景说明窄栏 ---------- */
.narrow{max-width:60em;margin:0 auto;padding:0 clamp(18px,2.4vw,34px);text-align:justify;
  text-justify:inter-ideograph}   /* 中文按字间断行，避免两端对齐把标点后的空隙拉得忽大忽小 */
.narrow p{font-weight:300;color:var(--ink-2)}
.narrow p+p{margin-top:14px}

/* ---------- 牌号成分区（左右交错 + sticky 家族标题 + 斜切条） ---------- */
.famrow{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3.4vw,56px);align-items:start;
  margin:clamp(40px,4.6vw,74px) 0}
.famrow:nth-child(even) .famhead{order:2}
.famrow:nth-child(even) .famhead .num{margin-left:auto}
/* ⚠️ 2026-09-19 去掉这里的 text-align:right：右对齐会连 .famhead p 一起右对齐，
   结果「标题右对齐 + 正文最后一行也甩到右边」，用户截图（thermal 页）圈的就是这个。
   保留 order:2 的左右交错，文字统一左对齐；大号码仍用 margin-left:auto 靠右当水印。 */
.famhead{position:sticky;top:calc(64px + 3vw)}
.famhead .num{font-size:clamp(30px,3.4vw,48px);font-weight:800;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(150deg,var(--accent),rgba(226,84,42,.22));
  -webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.famhead h2{font-size:clamp(22px,2.4vw,34px);font-weight:800;margin:14px 0 0;position:relative;display:inline-block}
.famhead h2:after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.famhead .en{display:block;font-size:12px;letter-spacing:2.4px;color:var(--muted);margin-top:18px;font-weight:600}
.famhead p{color:var(--muted);font-weight:300;margin:16px 0 0;font-size:14.5px}
.famhead .deco{position:absolute;top:-1.4em;left:-2.4em;width:clamp(80px,10vw,170px);height:clamp(60px,8vw,150px);
  background:var(--deco-strong);transform:skew(var(--skew));z-index:-1;animation:slideFromL 1s var(--ease) .2s both}
.famcards{display:flex;flex-direction:column;gap:16px}
.gcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px 16px;
  box-shadow:var(--shadow-s);position:relative;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:rgba(226,84,42,.3)}
.gcard:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),transparent);transition:transform .45s var(--ease)}
.gcard:hover:before{transform:scaleX(1)}
.gcard header{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.gcard h3{font-size:17.5px;font-weight:700}
.gcard h3 a:hover{color:var(--accent)}
.gcard .codes{font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.gcard .codes .cn{color:var(--muted);font-size:11px}
/* 号码轮换：纯 CSS 切换伪元素内容（学参考站的 @keyframes content 手法） */
.code-rot{font-size:11.5px;color:var(--accent);font-weight:600;letter-spacing:.4px}
.code-rot.empty{color:var(--muted);font-weight:400}
.gcard .gsum{font-size:12.8px;color:var(--muted);font-weight:300;margin:10px 0 0;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .gtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.gcard .gtags span{font-size:11px;color:var(--navy-3);background:#EEF2F8;border-radius:11px;padding:3px 10px}
/* 成分堆叠条：每个元素一个 div，宽度即含量百分比，容器斜切、文字反向斜切校正 */
.cbar{display:flex;flex-wrap:wrap;border-radius:4px;overflow:hidden;background:#E9EEF5;position:relative;
  transform:skew(var(--skew));margin:6px 0 4px}
.cbar>div{height:30px;display:flex;align-items:center;justify-content:center;width:0;
  transition:width 1.15s var(--ease);transition-delay:var(--sd,0ms);position:relative}
.cbar.in>div{width:var(--w)}
.cbar>div:hover{filter:brightness(1.18)}
.cbar .el{font-style:normal;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.32);
  transform:skew(15deg);white-space:nowrap}
.cbar .rest{background:#DCE3EC;flex:1;width:auto!important}
.cbar-empty{height:30px;border-radius:4px;background:#EDF1F6;transform:skew(var(--skew));
  display:flex;align-items:center;justify-content:center;font-size:11.5px;color:var(--muted)}
.chemd{margin-top:10px}
.chemd summary{font-size:12.5px;color:var(--navy-3);cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:6px}
.chemd summary::-webkit-details-marker{display:none}
.chemd summary:before{content:"＋";color:var(--accent);font-size:11px}
.chemd[open] summary:before{content:"－"}
.chemd summary:hover{color:var(--accent)}
.chemd table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px;animation:fadeIn .3s ease both}
.chemd th,.chemd td{border:1px solid var(--line);padding:4px 9px;text-align:left}
.chemd th{background:#EEF2F7;color:var(--navy-3);font-weight:600}

/* ---------- 产品形态卡（悬停展开详情：学参考站 .products-card/.products-detail 手法） ---------- */
.pcards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.pcard{border-radius:14px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-s);position:relative;overflow:hidden;cursor:pointer;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;display:flex;flex-direction:column}
.pcard:nth-of-type(1),.pcard:nth-of-type(5){animation:riseUp 1s var(--ease) .4s both}
.pcard:nth-of-type(2),.pcard:nth-of-type(4){animation:riseUp 1s var(--ease) .6s both}
.pcard:nth-of-type(3){animation:riseUp 1s var(--ease) .8s both}
.pcard:hover{transform:translateY(-10px);box-shadow:var(--shadow-l);border-color:rgba(226,84,42,.34)}
.pcard .ph{height:150px;position:relative;overflow:hidden}
/* 左内边距与 .bd 的 22px 对齐（原来 18px，卡片里英文代号比中文标题左偏 4px —— 用户截图里就是这种细错位） */
.pcard .ph .ph-i{position:absolute;left:22px;bottom:14px;z-index:2;color:#fff;font-size:11px;letter-spacing:2.2px}
.pcard .bd{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.pcard h3{font-size:var(--fs-3);font-weight:700}
.pcard h3 small{display:block;font-size:11px;letter-spacing:1.8px;color:var(--muted);font-weight:600;margin-top:6px}
.pcard .txt{font-size:13.6px;color:var(--muted);font-weight:300;margin:10px 0 0;flex:1}
.pcard .more{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--navy-3);display:inline-flex;
  align-items:center;gap:7px;position:relative;width:max-content}
.pcard .more:after{content:"";position:absolute;left:0;right:20px;bottom:-3px;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.pcard:hover .more:after{transform:scaleX(1)}
.pcard:hover .more{color:var(--accent)}
.pdetail{max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .45s var(--ease)}
.pcard:hover .pdetail,.pcard.open .pdetail{max-height:260px;opacity:1}
.pdetail .inner{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:flex;flex-direction:column;gap:6px}
.pdetail b{font-size:13px;color:var(--navy-3)}
.pdetail span{font-size:12.5px;color:var(--muted);font-weight:300}

/* ---------- 场景圆卡（学参考站：圆形缩略图 + 图标旋转） ---------- */
.scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.scene{text-align:center;display:block}
.scene .cir{width:clamp(126px,11.6vw,162px);height:clamp(126px,11.6vw,162px);border-radius:50%;margin:0 auto 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;
  color:#fff;overflow:hidden;
  /* 行业底图：由生成器在元素上写 --img:url(assets/scenes/<key>.jpg)；
     没有图时退回原来的纯色渐变（删掉某个 jpg 也不会开天窗） */
  background-color:var(--navy-2);background-position:center;background-size:cover;background-repeat:no-repeat;
  background-image:var(--img,linear-gradient(150deg,var(--navy-3),var(--navy-1)));
  box-shadow:0 14px 34px rgba(11,27,51,.22);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.scene .cir:before{content:"";position:absolute;inset:-3px;border-radius:50%;opacity:0;transition:opacity .4s;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(226,84,42,.9) 76%,transparent 92%);
  animation:spin 6s linear infinite}
/* 底图上的深色蒙版：整圆铺满（inset:0，一直盖到圆边），保证白字在任何底图上都够亮。
   2026-09-20 修：原来是 inset:2.5px + 160deg 三段渐变，中间那档只有 .46，
   底图上半部偏白时（车间顶棚、天空）看着像「蒙版没盖住」——
   现在改成「中心 .60 → 边缘 .86」的径向收敛，不再有亮带，也不再有没盖到的圆边。 */
.scene .cir:after{content:"";position:absolute;inset:0;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 44%,rgba(6,16,33,.60) 0%,rgba(8,20,40,.66) 58%,rgba(6,16,33,.86) 100%)}
.scene .cir>*{position:relative;z-index:1}
.scene .cir .ico{font-size:clamp(15px,1.32vw,19px);font-weight:800;letter-spacing:.4px}
.scene .cir .cn{font-size:12.5px;letter-spacing:.6px;opacity:.9}
.scene:hover .cir{transform:translateY(-8px) scale(1.05);box-shadow:0 24px 48px rgba(226,84,42,.3)}
.scene:hover .cir:before{opacity:1}
.scene p{font-size:13px;color:var(--muted);margin:0;font-weight:300;line-height:1.6}

/* ---------- 数据/信任区 ---------- */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.nums div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:26px 24px;box-shadow:var(--shadow-s);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.nums div:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.nums b{display:block;font-size:clamp(28px,2.6vw,38px);font-weight:800;letter-spacing:-.02em;
  color:var(--navy-3)}
/* 数字增长用 <span data-count> 包住 → 渐变必须落在 span 上，落在父级会把文字裁成透明不可见 */
.nums b span{background:linear-gradient(150deg,var(--navy-3),var(--navy-4));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nums b em{font-style:normal;font-size:.55em;color:var(--accent);margin-left:2px}
/* 说明小字只作用于直接子级 span，避免把数字 span 的字号压成 13px */
.nums div>span{display:block;font-size:13px;color:var(--muted);margin-top:6px;font-weight:300}
.nums b span{font-size:inherit;display:inline;font-weight:inherit}
/* 标准体系跑马灯 */
.stdstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;overflow:hidden;padding:24px 0}
.stdstrip .track{display:flex;white-space:nowrap;width:max-content;animation:ticker 38s linear infinite}
.stdstrip:hover .track{animation-play-state:paused}
.stdstrip span{padding:0 32px;font-size:14.5px;color:var(--navy-3);font-weight:600;letter-spacing:.6px;opacity:.72;
  display:inline-flex;align-items:center;gap:30px;transition:opacity .3s}
.stdstrip span:hover{opacity:1}
.stdstrip span:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6}

/* ---------- 表格 ---------- */
.tblwrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-s)}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
table.data th,table.data td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
table.data thead th{background:linear-gradient(180deg,var(--navy-3),var(--navy-2));color:#fff;font-size:13.5px;
  font-weight:600;white-space:nowrap;position:sticky;top:0;z-index:1;border-bottom:0;letter-spacing:.4px}
table.data tbody tr{transition:background .22s}
table.data tbody tr:hover{background:#F3F7FC}
table.spec{width:100%;border-collapse:collapse;font-size:14px}
table.spec th,table.spec td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.spec th{width:9.5em;color:var(--muted);font-weight:500;background:#FAFCFE}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* 关于页介绍正文：中文两端对齐，除末行外右缘与栏宽齐平（原为左对齐，右缘参差 3~13px，
   用户 2026-09-20 截图指出）。.narrow 用的是同一套 justify 口径。 */
.two .prose{font-weight:300;color:var(--ink-2);text-align:justify;text-justify:inter-ideograph;
  word-break:normal;overflow-wrap:break-word}
.card-lite{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;box-shadow:var(--shadow-s)}
.card-lite h3{font-size:17px;font-weight:700;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.card-lite h3 em{font-style:normal;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:1px;margin-left:8px}
.faq{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;box-shadow:var(--shadow-s)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 22px;font-size:15.5px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;gap:12px;align-items:center;transition:background .22s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"＋";color:var(--accent);font-weight:700}
.faq details[open] summary:before{content:"－"}
.faq summary:hover{background:#F5F9FD}
.faq .ans{padding:0 22px 20px 46px;color:var(--ink-2);font-size:14.5px;font-weight:300}

/* ---------- 询价区 ---------- */
.quote{position:relative;overflow:hidden;color:#fff;padding:var(--sect) 0;
  background:linear-gradient(165deg,#0A1830 0%,#16325F 55%,#0B1B33 100%)}
.quote:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 400px at 88% 12%,rgba(226,84,42,.22),transparent 62%)}
.quote .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.quote h2{font-size:clamp(24px,2.8vw,36px);font-weight:800;letter-spacing:-.02em}
.quote .info{font-size:15.5px;color:#B9C7DA;font-weight:300;margin-top:18px}
.quote .info b{color:#fff;font-weight:600}
.quote .info .big{font-size:clamp(22px,2.2vw,28px);font-weight:800;color:#fff;letter-spacing:.6px;
  font-variant-numeric:tabular-nums;display:inline-block}
.copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.copybtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);color:#fff;border-radius:9px;
  padding:9px 18px;font-size:13.5px;cursor:pointer;font-family:inherit;transition:.26s;backdrop-filter:blur(4px)}
.copybtn:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.copyok{font-size:12.5px;color:#FFB99E;opacity:0;transition:opacity .3s}
.copyok.on{opacity:1}
form.qf{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  padding:clamp(22px,2.4vw,30px);backdrop-filter:blur(8px);box-shadow:var(--shadow-l)}
form.qf label{display:block;font-size:12.5px;color:#9FB3D0;margin:16px 0 7px;letter-spacing:.4px}
form.qf label:first-child{margin-top:0}
form.qf input,form.qf textarea,form.qf select{width:100%;padding:13px 15px;border-radius:9px;font-size:14.5px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;
  transition:border-color .26s,background .26s,box-shadow .26s}
form.qf select option{color:#1E2836}
form.qf input:focus,form.qf textarea:focus,form.qf select:focus{outline:none;border-color:var(--accent);
  background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(226,84,42,.16)}
form.qf input::placeholder,form.qf textarea::placeholder{color:#7E93B0}
form.qf button{margin-top:22px;width:100%;justify-content:center}
.err{min-height:20px;font-size:12.5px;color:#FFB99E;margin-top:10px}
.formnote{font-size:12px;color:#7E93B0;margin-top:12px;line-height:1.7}

/* ---------- 页脚 ---------- */
footer{background:#081426;color:#8FA6C2;font-size:13.5px;padding:clamp(48px,5.4vw,78px) 0 28px;
  position:relative;border-top:1px solid rgba(255,255,255,.07)}
footer:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;opacity:.5;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(20px,3vw,40px)}
footer h4{color:#fff;font-size:14.5px;font-weight:600;letter-spacing:.6px;margin:0 0 18px}
footer h4:after{content:"";display:block;width:24px;height:2px;background:var(--accent);border-radius:2px;margin-top:9px}
footer a{display:block;padding:5px 0;color:#8FA6C2;transition:.24s}
footer a:hover{color:#fff;transform:translateX(3px)}
footer .fbrand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
footer .fbrand img{height:46px}
footer .fbrand b{color:#fff;font-size:16px;font-weight:700;display:block}
footer .fbrand i{display:block;font-style:normal;font-size:10.5px;letter-spacing:1.4px;color:#7E93B0}
footer .slogan{color:#C6CEDA;font-weight:300;font-size:13.5px;max-width:34em}
footer .bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:clamp(28px,3.2vw,46px);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:#6E86A3}
footer .bottom a{display:inline}

/* ---------- 浮动询价面板（学参考站 floatcontact1/2 两态互换） ---------- */
#floatbox{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(84px,10vw,112px);z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
#floatbox>*{pointer-events:auto}
#floatbtn{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-3),var(--navy-1));color:#fff;font-size:22px;
  box-shadow:0 14px 32px rgba(11,27,51,.36);transition:transform .3s var(--ease),background .3s}
#floatbtn:hover{transform:translateY(-3px) scale(1.04);background:linear-gradient(150deg,var(--accent),#F0713F)}
#floatbtn img{width:32px;margin:0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.floatcontact{width:min(320px,84vw);background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-l);padding:20px 22px;opacity:0;transform:translateY(14px) scale(.97);
  transform-origin:bottom right;pointer-events:none;visibility:hidden;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s}
.floatcontact.on{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.floatcontact .fc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.floatcontact .fc-hd b{font-size:15.5px}
.floatcontact .fc-hd button{background:none;border:0;font-size:17px;color:var(--muted);cursor:pointer;line-height:1}
.floatcontact .fc-hd button:hover{color:var(--accent)}
.floatcontact p{font-size:12.5px;color:var(--muted);margin:6px 0 12px;font-weight:300}
.floatcontact a.fc-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;
  border-bottom:1px dashed var(--line);transition:.24s}
.floatcontact a.fc-row:last-of-type{border-bottom:0}
.floatcontact a.fc-row:hover{color:var(--accent);transform:translateX(3px)}
.floatcontact a.fc-row b{font-size:15px;font-variant-numeric:tabular-nums}
.floatcontact .fc-lab{font-size:11px;letter-spacing:1.2px;color:var(--silver);margin-right:auto}
/* 返回顶部 */
#totop{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(18px,2.6vw,28px);width:52px;height:52px;
  border-radius:50%;border:0;cursor:pointer;color:#fff;font-size:19px;z-index:79;opacity:0;
  transform:translateY(14px) scale(.9);pointer-events:none;
  background:linear-gradient(150deg,var(--navy-3),var(--navy-1));box-shadow:0 12px 30px rgba(11,27,51,.34);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s}
#totop.on{opacity:1;transform:none;pointer-events:auto}
#totop:hover{background:linear-gradient(150deg,var(--accent),#F0713F)}
/* 光标跟随光晕 */
#cursor{position:fixed;width:420px;height:420px;border-radius:50%;left:0;top:0;z-index:1;pointer-events:none;
  opacity:.5;transform:translate(-50%,-50%);mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(226,84,42,.16),transparent 62%);transition:opacity .4s}
@media (hover:none){#cursor{display:none}}

/* ---------- 图片位（有产品形态底图就铺图，没有就退回纯 CSS 品牌底纹） ---------- */
/* --img 由生成器按 .pcard[data-form] 产出（见 site.css 末尾自动生成段）。
   ⚠️ 不要写成 background 简写：简写会把下面 .ph.t2~t6 的颜色层一起吃掉。 */
.ph{background-color:#122A50;background-position:center;background-size:cover;background-repeat:no-repeat;
  background-image:var(--img,linear-gradient(150deg,#122A50,#0B1B33 60%,#1B3A6B))}
.ph:after{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 200px at 26% 16%,rgba(226,84,42,.42),transparent 62%),
             repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 10px,transparent 10px 22px),
             linear-gradient(180deg,rgba(6,16,33,.05),rgba(6,16,33,.6))}
.ph.t2{background:linear-gradient(150deg,#22406E,#0B1B33 62%,#122A50)}
.ph.t2:after{background:radial-gradient(400px 190px at 74% 22%,rgba(74,123,181,.5),transparent 64%),
             repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 8px,transparent 8px 20px),
             linear-gradient(180deg,rgba(6,16,33,.05),rgba(6,16,33,.6))}
.ph.t3{background:linear-gradient(150deg,#3A2B22,#0B1B33 64%,#1B3A6B)}
.ph.t3:after{background:radial-gradient(380px 180px at 40% 26%,rgba(226,84,42,.34),transparent 62%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 6px,transparent 6px 18px),
             linear-gradient(180deg,rgba(6,16,33,.05),rgba(6,16,33,.6))}
.ph.t4{background:linear-gradient(150deg,#1B3A6B,#22406E 46%,#0B1B33)}
.ph.t4:after{background:radial-gradient(360px 200px at 62% 30%,rgba(169,175,184,.4),transparent 64%),
             repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 26px),
             linear-gradient(180deg,rgba(6,16,33,.05),rgba(6,16,33,.6))}
.ph.t5{background:linear-gradient(150deg,#0F2138,#22406E 58%,#122A50)}
.ph.t5:after{background:radial-gradient(400px 180px at 30% 34%,rgba(255,123,77,.34),transparent 62%),
             repeating-linear-gradient(55deg,rgba(255,255,255,.06) 0 9px,transparent 9px 21px),
             linear-gradient(180deg,rgba(6,16,33,.05),rgba(6,16,33,.6))}
.ph.t6{background:linear-gradient(150deg,#141F3A,#0B1B33 54%,#1B3A6B)}
.ph.t6:after{background:radial-gradient(380px 200px at 70% 18%,rgba(226,84,42,.3),transparent 64%),
             repeating-linear-gradient(120deg,rgba(255,255,255,.06) 0 11px,transparent 11px 24px),
             linear-gradient(180deg,rgba(6,16,33,.05),rgba(6,16,33,.6))}

/* ---------- 首页：家族列 + 迷你成分条 ---------- */
.famcols{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,2.2vw,28px)}
.famcol{flex:1 1 clamp(240px,22vw,320px);max-width:420px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 24px;box-shadow:var(--shadow-s);
  position:relative;overflow:hidden;transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s}
.famcol:hover{transform:translateY(-8px);box-shadow:var(--shadow-l);border-color:rgba(226,84,42,.3)}
.famcol:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),rgba(226,84,42,.1));transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease)}
.famcol:hover:before{transform:scaleY(1)}
.famcol h3{font-size:19px;font-weight:700}
.famcol h3 small{display:block;font-size:10.5px;letter-spacing:1.8px;color:var(--muted);font-weight:600;margin-top:6px}
.famcol p{font-size:13.6px;color:var(--muted);font-weight:300;margin:12px 0 16px;line-height:1.75}
.mgrid{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.mcard{display:block;padding:9px 0;border-bottom:1px dashed var(--line);transition:.26s}
.mcard:last-child{border-bottom:0}
.mcard:hover{transform:translateX(3px)}
.mcard b{font-size:14.5px;display:block}
.mcard small{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.mini{display:flex;height:9px;border-radius:4px;overflow:hidden;background:#E9EEF5;margin-top:8px}
.mini i{display:block;height:100%}
.lmore{color:var(--navy-3);font-size:13.5px;font-weight:600;display:inline-block;position:relative}
.lmore:hover{color:var(--accent)}
.lmore:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.lmore:hover:after{transform:scaleX(1)}

/* ---------- 能力标签 / 流程卡 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{font-size:13px;color:var(--navy-3);background:#EEF2F8;border:1px solid rgba(27,58,107,.08);
  border-radius:20px;padding:6px 14px;transition:transform .26s var(--ease),background .26s,color .26s}
.chips span:hover{transform:translateY(-2px);background:var(--navy-3);color:#fff}
.chips a{font-size:13px;color:var(--navy-3);background:#EEF2F8;border-radius:20px;padding:6px 14px;
  transition:transform .26s var(--ease),background .26s,color .26s}
.chips a:hover{transform:translateY(-2px);background:var(--navy-3);color:#fff}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.step{background:#fff;border:1px solid var(--line);border-radius:13px;padding:28px 24px 26px;box-shadow:var(--shadow-s);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
.step .n{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(150deg,var(--accent),rgba(226,84,42,.22));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.step h4{font-size:16.5px;font-weight:700;margin:14px 0 8px}
.step p{margin:0;font-size:14px;color:var(--muted);font-weight:300}

/* ---------- 首屏面板内的成分条（比卡片里的更高更醒目） ---------- */
.hero-panel .cbar{height:auto;min-height:62px;border-radius:8px;background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.hero-panel .cbar>div{height:62px}
.hero-panel .cbar .el{font-size:12.5px}
.hero-panel .cbar .rest{background:rgba(255,255,255,.12)}
.hero-panel .cbar-empty{height:62px;background:rgba(255,255,255,.1);color:#B9C7DA}

/* ---------- 面包屑：由 .wrap 统一留白 ---------- */
.crumb ol{max-width:none;margin:0;padding:0}

/* ---------- 响应式（学参考站：按屏宽分档重排） ---------- */
@media (max-width:1180px){
  .gnav .panel .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero .hgrid,.quote .wrap,.two{grid-template-columns:1fr}
  .famrow{grid-template-columns:1fr}
  .famrow:nth-child(even) .famhead{order:0;text-align:left}
  .famhead{position:static}
  .hero .slash.s3{display:none}
  .pcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .scenes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .fambar .side{display:none}
  .fambar .burger{display:block}
  .gnav .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;height:auto;
    background:rgba(6,16,33,.98);max-height:0;overflow:hidden;transition:max-height .45s var(--ease);display:block}
  .gnav.menuopen .menu{max-height:70vh;overflow-y:auto}
  .gnav .menu>li{height:auto;display:block}
  .gnav .menu>li>a{padding:15px clamp(18px,4vw,26px);height:auto}
  .gnav .menu>li>a:before{display:none}
  .gnav .panel-wrap{position:static;pointer-events:auto}
  .gnav .panel{position:static;opacity:1;transform:none;visibility:visible;background:rgba(255,255,255,.03);
    border-top:0;box-shadow:none;display:none}
  .gnav .menu>li:hover .panel{display:block}
  .gnav .panel .grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px clamp(18px,4vw,26px) 22px}
  footer .cols{grid-template-columns:1fr 1fr}
  .cbar>div{height:26px}
  .cbar .el{font-size:10px}
  .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .gnav .panel .grid{grid-template-columns:1fr}
  .pcards{grid-template-columns:1fr}
  .scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crumb ol{height:auto;padding:12px clamp(18px,4vw,26px);gap:4px}
  .crumb li+li:before{margin:0 9px}
  .hero .tomore{display:none}
  footer .cols{grid-template-columns:1fr}
  .stats{gap:20px}
}

/* ============================================================
   牌号查询页（339 个牌号）+ 牌号详情页（2026-09-17 新增）
   ============================================================ */
.qbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px 18px;
  border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-s)}
.qbar input{flex:1;min-width:240px;padding:12px 14px;font-size:14px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.qbar input:focus{outline:none;border-color:var(--accent);background:#fff}
.qbar select{padding:12px 14px;font-size:14px;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);border-radius:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0}
.chips>span{font-size:13px;color:var(--muted)}
.chip{font-size:12.5px;color:var(--navy-3);background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:6px 14px;cursor:pointer;font-family:inherit;
  transition:all .25s var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:linear-gradient(120deg,var(--navy-3),var(--navy-4));border-color:transparent;color:#fff}
.qcount{margin:18px 0 0;font-size:13.5px;color:var(--muted)}
.qcount b{color:var(--accent);font-size:19px;font-weight:700;padding:0 2px}
.gbar{display:inline-flex;height:15px;width:210px;border-radius:6px;overflow:hidden;
  background:#E9EEF5;vertical-align:-2px}
.gbar i{display:block;height:100%}
.gbarcap{margin-top:6px;font-size:11.5px;color:var(--muted);font-weight:300;
  font-variant-numeric:tabular-nums}
.gfam{font-size:12.5px;color:var(--muted)}
.gser{font-size:11.5px;color:var(--accent)}
.gali{display:inline-block;margin:3px 0 0 6px;padding:1px 7px;font-size:11px;border-radius:3px;
  color:#8A5A0B;background:rgba(201,130,43,.16)}
.gmini{font-size:12px;color:var(--muted);font-weight:300}
/* 详情页 */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(16px,2vw,26px)}
.dcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;
  box-shadow:var(--shadow-s)}
.dcard>h3{font-size:16px;margin:0 0 14px;display:flex;align-items:baseline;gap:8px}
.dcard>h3 em{font-style:normal;font-size:12px;color:var(--muted);font-weight:400}
.dcard h4{font-size:14.5px;margin:22px 0 12px}
.dcard p{font-size:13.8px;color:var(--ink-2);font-weight:300;line-height:1.95}
.dcard p+p{margin-top:12px}
.dnote{font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.9;
  border-left:2px solid var(--line);padding-left:12px}
.qbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.qbadges span{font-size:12px;color:#DCE3EC;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:4px 12px}
.qbadges span.hot{border-color:rgba(226,84,42,.5);color:#FFB99E}
.prevnext2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prevnext2 a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;box-shadow:var(--shadow-s)}
.prevnext2 a.nx{text-align:right}
.prevnext2 span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.prevnext2 b{font-size:15px;color:var(--navy-3)}
.relmini{display:flex;flex-wrap:wrap;gap:10px}
.relmini a{font-size:13px;color:var(--navy-3);background:#EEF2F8;border-radius:14px;padding:7px 14px}
.relmini a:hover{background:var(--navy-3);color:#fff}
@media (max-width:760px){
  .qbar input{min-width:100%}
  .prevnext2{grid-template-columns:1fr}
  .gbar{width:110px}
}

/* ===== 号码轮换（本段由生成器按牌号数据自动产出，新增牌号后重跑即可） ===== */
.code-rot[data-k]::after{content:"";color:var(--accent);font-weight:600}
.code-rot[data-k="gh132"]::after{animation:rot-gh132 5s linear infinite}
@keyframes rot-gh132{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4980"}}
.code-rot[data-k="gh1333"]::after{animation:rot-gh1333 5s linear infinite}
@keyframes rot-gh1333{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4608"}}
.code-rot[data-k="gh2132"]::after{animation:rot-gh2132 5s linear infinite}
@keyframes rot-gh2132{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4980"}}
.code-rot[data-k="gh2901"]::after{animation:rot-gh2901 5s linear infinite}
@keyframes rot-gh2901{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4662"}}
.code-rot[data-k="gh3536"]::after{animation:rot-gh3536 5s linear infinite}
@keyframes rot-gh3536{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4665"}}
.code-rot[data-k="gh3625"]::after{animation:rot-gh3625 5s linear infinite}
@keyframes rot-gh3625{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4856"}}
.code-rot[data-k="gh4090"]::after{animation:rot-gh4090 5s linear infinite}
@keyframes rot-gh4090{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4632"}}
.code-rot[data-k="gh4169"]::after{animation:rot-gh4169 5s linear infinite}
@keyframes rot-gh4169{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4668"}}
.code-rot[data-k="gh536"]::after{animation:rot-gh536 5s linear infinite}
@keyframes rot-gh536{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4665"}}
.code-rot[data-k="gh625"]::after{animation:rot-gh625 5s linear infinite}
@keyframes rot-gh625{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4856"}}
.code-rot[data-k="gh80a"]::after{animation:rot-gh80a 5s linear infinite}
@keyframes rot-gh80a{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4631"}}
.code-rot[data-k="inconel-600"]::after{animation:rot-inconel-600 5s linear infinite}
@keyframes rot-inconel-600{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4816"}}
.code-rot[data-k="inconel-601"]::after{animation:rot-inconel-601 5s linear infinite}
@keyframes rot-inconel-601{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4851"}}
.code-rot[data-k="inconel-617"]::after{animation:rot-inconel-617 5s linear infinite}
@keyframes rot-inconel-617{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4663"}}
.code-rot[data-k="inconel-625"]::after{animation:rot-inconel-625 5s linear infinite}
@keyframes rot-inconel-625{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4856"}}
.code-rot[data-k="inconel-686"]::after{animation:rot-inconel-686 5s linear infinite}
@keyframes rot-inconel-686{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4606"}}
.code-rot[data-k="inconel-718"]::after{animation:rot-inconel-718 5s linear infinite}
@keyframes rot-inconel-718{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4668"}}
.code-rot[data-k="inconel-740h"]::after{animation:rot-inconel-740h 5s linear infinite}
@keyframes rot-inconel-740h{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4668"}}
.code-rot[data-k="inconel-x-750"]::after{animation:rot-inconel-x-750 5s linear infinite}
@keyframes rot-inconel-x-750{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4669"}}
.code-rot[data-k="incoloy-800"]::after{animation:rot-incoloy-800 5s linear infinite}
@keyframes rot-incoloy-800{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4876"}}
.code-rot[data-k="incoloy-800h"]::after{animation:rot-incoloy-800h 5s linear infinite}
@keyframes rot-incoloy-800h{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4876"}}
.code-rot[data-k="incoloy-800ht"]::after{animation:rot-incoloy-800ht 5s linear infinite}
@keyframes rot-incoloy-800ht{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4959"}}
.code-rot[data-k="incoloy-825"]::after{animation:rot-incoloy-825 5s linear infinite}
@keyframes rot-incoloy-825{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4858"}}
.code-rot[data-k="incoloy-901"]::after{animation:rot-incoloy-901 5s linear infinite}
@keyframes rot-incoloy-901{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4662"}}
.code-rot[data-k="incoloy-926"]::after{animation:rot-incoloy-926 5s linear infinite}
@keyframes rot-incoloy-926{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4529"}}
.code-rot[data-k="incoloy-a-286"]::after{animation:rot-incoloy-a-286 5s linear infinite}
@keyframes rot-incoloy-a-286{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4980"}}
.code-rot[data-k="nimonic-80a"]::after{animation:rot-nimonic-80a 5s linear infinite}
@keyframes rot-nimonic-80a{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4592"}}
.code-rot[data-k="nimonic-90"]::after{animation:rot-nimonic-90 5s linear infinite}
@keyframes rot-nimonic-90{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4632"}}
.code-rot[data-k="alloy-602ca"]::after{animation:rot-alloy-602ca 5s linear infinite}
@keyframes rot-alloy-602ca{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4633"}}
.code-rot[data-k="r30003"]::after{animation:rot-r30003 5s linear infinite}
@keyframes rot-r30003{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4711"}}
.code-rot[data-k="ra330"]::after{animation:rot-ra330 5s linear infinite}
@keyframes rot-ra330{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4886"}}
.code-rot[data-k="ra333"]::after{animation:rot-ra333 5s linear infinite}
@keyframes rot-ra333{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4608"}}
.code-rot[data-k="uns-n07750"]::after{animation:rot-uns-n07750 5s linear infinite}
@keyframes rot-uns-n07750{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4669"}}
.code-rot[data-k="alloy-59"]::after{animation:rot-alloy-59 5s linear infinite}
@keyframes rot-alloy-59{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4605"}}
.code-rot[data-k="hastelloy-b-2"]::after{animation:rot-hastelloy-b-2 5s linear infinite}
@keyframes rot-hastelloy-b-2{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4617"}}
.code-rot[data-k="hastelloy-b-3"]::after{animation:rot-hastelloy-b-3 5s linear infinite}
@keyframes rot-hastelloy-b-3{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4600"}}
.code-rot[data-k="hastelloy-c-2000"]::after{animation:rot-hastelloy-c-2000 5s linear infinite}
@keyframes rot-hastelloy-c-2000{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4675"}}
.code-rot[data-k="hastelloy-c-22"]::after{animation:rot-hastelloy-c-22 5s linear infinite}
@keyframes rot-hastelloy-c-22{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4602"}}
.code-rot[data-k="hastelloy-c-276"]::after{animation:rot-hastelloy-c-276 5s linear infinite}
@keyframes rot-hastelloy-c-276{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4819"}}
.code-rot[data-k="hastelloy-c-4"]::after{animation:rot-hastelloy-c-4 5s linear infinite}
@keyframes rot-hastelloy-c-4{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4610"}}
.code-rot[data-k="hastelloy-g-30"]::after{animation:rot-hastelloy-g-30 5s linear infinite}
@keyframes rot-hastelloy-g-30{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4603"}}
.code-rot[data-k="hastelloy-x"]::after{animation:rot-hastelloy-x 5s linear infinite}
@keyframes rot-hastelloy-x{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4665"}}
.code-rot[data-k="ns3202"]::after{animation:rot-ns3202 5s linear infinite}
@keyframes rot-ns3202{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4617"}}
.code-rot[data-k="ns322"]::after{animation:rot-ns322 5s linear infinite}
@keyframes rot-ns322{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4617"}}
.code-rot[data-k="ns3304"]::after{animation:rot-ns3304 5s linear infinite}
@keyframes rot-ns3304{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4819"}}
.code-rot[data-k="ns3305"]::after{animation:rot-ns3305 5s linear infinite}
@keyframes rot-ns3305{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4610"}}
.code-rot[data-k="ns3308"]::after{animation:rot-ns3308 5s linear infinite}
@keyframes rot-ns3308{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4602"}}
.code-rot[data-k="ns334"]::after{animation:rot-ns334 5s linear infinite}
@keyframes rot-ns334{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4819"}}
.code-rot[data-k="ns335"]::after{animation:rot-ns335 5s linear infinite}
@keyframes rot-ns335{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4610"}}
.code-rot[data-k="ns3403"]::after{animation:rot-ns3403 5s linear infinite}
@keyframes rot-ns3403{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4619"}}
.code-rot[data-k="monel-400"]::after{animation:rot-monel-400 5s linear infinite}
@keyframes rot-monel-400{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4360"}}
.code-rot[data-k="monel-k500"]::after{animation:rot-monel-k500 5s linear infinite}
@keyframes rot-monel-k500{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4375"}}
.code-rot[data-k="alloy-28"]::after{animation:rot-alloy-28 5s linear infinite}
@keyframes rot-alloy-28{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4563"}}
.code-rot[data-k="alloy-31"]::after{animation:rot-alloy-31 5s linear infinite}
@keyframes rot-alloy-31{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4562"}}
.code-rot[data-k="alloy-33"]::after{animation:rot-alloy-33 5s linear infinite}
@keyframes rot-alloy-33{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4591"}}
.code-rot[data-k="ns1402"]::after{animation:rot-ns1402 5s linear infinite}
@keyframes rot-ns1402{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4858"}}
.code-rot[data-k="ns142"]::after{animation:rot-ns142 5s linear infinite}
@keyframes rot-ns142{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4858"}}
.code-rot[data-k="ns144"]::after{animation:rot-ns144 5s linear infinite}
@keyframes rot-ns144{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4562"}}
.code-rot[data-k="ns3102"]::after{animation:rot-ns3102 5s linear infinite}
@keyframes rot-ns3102{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4816"}}
.code-rot[data-k="ns3105"]::after{animation:rot-ns3105 5s linear infinite}
@keyframes rot-ns3105{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4641"}}
.code-rot[data-k="ns312"]::after{animation:rot-ns312 5s linear infinite}
@keyframes rot-ns312{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4816"}}
.code-rot[data-k="ns3309"]::after{animation:rot-ns3309 5s linear infinite}
@keyframes rot-ns3309{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4606"}}
.code-rot[data-k="ns336"]::after{animation:rot-ns336 5s linear infinite}
@keyframes rot-ns336{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4856"}}
.code-rot[data-k="nickel-200"]::after{animation:rot-nickel-200 5s linear infinite}
@keyframes rot-nickel-200{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4060"}}
.code-rot[data-k="nickel-201"]::after{animation:rot-nickel-201 5s linear infinite}
@keyframes rot-nickel-201{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4061"}}
.code-rot[data-k="uns-n04400"]::after{animation:rot-uns-n04400 5s linear infinite}
@keyframes rot-uns-n04400{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4360"}}
.code-rot[data-k="uns-n05500"]::after{animation:rot-uns-n05500 5s linear infinite}
@keyframes rot-uns-n05500{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4375"}}
.code-rot[data-k="g2205"]::after{animation:rot-g2205 5s linear infinite}
@keyframes rot-g2205{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4462"}}
.code-rot[data-k="g2507"]::after{animation:rot-g2507 5s linear infinite}
@keyframes rot-g2507{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4410"}}
.code-rot[data-k="s32760"]::after{animation:rot-s32760 5s linear infinite}
@keyframes rot-s32760{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4501"}}
.code-rot[data-k="g253ma"]::after{animation:rot-g253ma 5s linear infinite}
@keyframes rot-g253ma{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4835"}}
.code-rot[data-k="g254smo"]::after{animation:rot-g254smo 5s linear infinite}
@keyframes rot-g254smo{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4547"}}
.code-rot[data-k="g904l"]::after{animation:rot-g904l 5s linear infinite}
@keyframes rot-g904l{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4539"}}
.code-rot[data-k="g15-5ph"]::after{animation:rot-g15-5ph 5s linear infinite}
@keyframes rot-g15-5ph{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4532"}}
.code-rot[data-k="g17-4ph"]::after{animation:rot-g17-4ph 5s linear infinite}
@keyframes rot-g17-4ph{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4542"}}
.code-rot[data-k="g2304"]::after{animation:rot-g2304 5s linear infinite}
@keyframes rot-g2304{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4362"}}
.code-rot[data-k="g654-smo"]::after{animation:rot-g654-smo 5s linear infinite}
@keyframes rot-g654-smo{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4652"}}
.code-rot[data-k="alloy-20"]::after{animation:rot-alloy-20 5s linear infinite}
@keyframes rot-alloy-20{0%,49%{content:""}50%,100%{content:" / W.Nr. 2.4660"}}
.code-rot[data-k="nitronic-50"]::after{animation:rot-nitronic-50 5s linear infinite}
@keyframes rot-nitronic-50{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.3964"}}
.code-rot[data-k="sus431"]::after{animation:rot-sus431 5s linear infinite}
@keyframes rot-sus431{0%,49%{content:""}50%,100%{content:" / W.Nr. 1.4057"}}

/* ===== 行业场景底图（生成器按 SCENES 自动产出，换图后重跑即可） ===== */
.scene .cir[data-scene="thermal"]{--img:url(photos/web_scene-thermal.jpg)}
.scene .cir[data-scene="chem"]{--img:url(photos/web_scene-chem.jpg)}
.scene .cir[data-scene="oil"]{--img:url(photos/web_scene-oil.jpg)}
.scene .cir[data-scene="marine"]{--img:url(photos/web_scene-marine.jpg)}
.scene .cir[data-scene="power"]{--img:url(photos/web_scene-power.jpg)}
.scene .cir[data-scene="aero"]{--img:url(photos/web_scene-aero.jpg)}
.scene .cir[data-scene="auto"]{--img:url(photos/web_scene-auto.jpg)}
.scene .cir[data-scene="pharma"]{--img:url(photos/web_scene-pharma.jpg)}
.scene .cir[data-scene="env"]{--img:url(photos/web_scene-env.jpg)}
.scene .cir[data-scene="electronic"]{--img:url(photos/web_scene-electronic.jpg)}
.scene .cir[data-scene="weld"]{--img:url(photos/web_scene-weld.jpg)}
.scene .cir[data-scene="precise"]{--img:url(photos/web_scene-precise.jpg)}

/* ===== 产品形态卡底图（gen_form_art.py 产出，换图后重跑即可） ===== */
.pcard .ph{background-image:var(--img,linear-gradient(150deg,#122A50,#0B1B33 60%,#1B3A6B));background-position:center;background-size:cover;background-repeat:no-repeat}
.pcard .ph[data-form]:after{background:radial-gradient(420px 200px at 26% 16%,rgba(226,84,42,.2),transparent 62%),linear-gradient(180deg,rgba(6,16,33,.16),rgba(6,16,33,.7) 78%,rgba(6,16,33,.9))}
.pcard .ph[data-form="bar"]{--img:url(photos/web_form-bar.jpg)}
.pcard .ph[data-form="plate"]{--img:url(photos/web_form-plate.jpg)}
.pcard .ph[data-form="pipe"]{--img:url(photos/web_form-pipe.jpg)}
.pcard .ph[data-form="wire"]{--img:url(photos/web_form-wire.jpg)}
.pcard .ph[data-form="fitting"]{--img:url(photos/web_form-fitting.jpg)}

/* 牌号详情页的真实材料照片 */
.gphoto{display:block;width:100%;height:200px;object-fit:cover;border-radius:10px;margin:0 0 16px;box-shadow:var(--shadow-s);background:#0B1B33}

/* 锚点落点别被吸顶导航盖住（家族锚点在表格行上、牌号锚点在行内链接上） */
table.data tbody tr,table.data tbody tr>td>a{scroll-margin-top:118px}