/* ==========================================================================
   GreatLight · 首页静态重构版 设计系统  base.css
   主色 #5804FA · 版心 1680px · 明亮主题
   标题字体 Space Grotesk（全大写 H1/H2、导航）· 正文 Poppins
   容器边框：主题色渐变描边（2px，#5804FA → #8B5CFF）
   （容器描边使用 CSS 主题渐变，不依赖外部素材文件）
   ========================================================================== */
:root{
  --p:#5804FA; --p6:#4A03D6; --p3:#8B5CFF; --pl:#F1ECFF; --pl2:#F8F6FF;
  --ink:#170B33; --ink2:#2A2440; --mu:#6B6580; --ln:#E8E4F5; --bd:#DCD5F2;
  --bg:#FFFFFF; --bg2:#F8F6FF;
  --gd:linear-gradient(135deg,#5804FA,#8B5CFF);
  --sh:0 16px 44px rgba(88,4,250,.13);
  --shs:0 6px 20px rgba(23,11,51,.07);
  --e:cubic-bezier(.22,.61,.36,1);
  --wrap:1680px;
  --gap:16px;
  --brand-gap:20px;   /* 品牌故事首行三卡间距（可改 24px） */
  --mat-col:114px;    /* 材料卡片最小宽度：Arial 12px 下最长材料名 “Low Carbon Steel” 宽 95px + 内距12 + 描边4 + 余量 */
  --fh:Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
/* 重置浏览器默认的 figure{margin:1em 40px}：否则会给每张图卡叠加 40px 外边距，
   导致卡片间距被撑大、首屏图与文字列宽不一致 */
figure{margin:0}
figcaption{margin:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--fh);font-weight:600;line-height:1.14;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.w{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 36px}
.s{padding:84px 0;position:relative}
.so{background:var(--bg2)}
.sd{background:var(--ink);color:#fff}
.h1{font-size:clamp(26px,2.35vw,44px);line-height:1.1;font-weight:700;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.h2{font-size:clamp(21px,1.6vw,32px);font-weight:600;letter-spacing:.002em;text-transform:uppercase;text-wrap:balance}
.h3{font-size:clamp(18px,1.2vw,23px);font-weight:600;letter-spacing:-.008em}
.ld{font-size:clamp(15.5px,1vw,18px);line-height:1.78;color:var(--mu)}
.gt{background:var(--gd);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd{max-width:1100px;margin-bottom:34px}
.ct{margin-left:auto;margin-right:auto;text-align:center}
/* .ct 行内多个按钮时的间距（内联 style 已移除，改为样式统一控制） */
.ct .bt+.bt{margin-left:12px}
.eb{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--p);margin-bottom:14px}
.eb::before{content:"";width:26px;height:2px;background:var(--gd);border-radius:2px}

/* ---------- 容器边框 ----------
   容器描边：主题色渐变（2px，见文件末尾声明）；早期 SVG 九宫格方案已移除；
   实际声明放在文件末尾（需晚于各组件规则，避免被 background 简写覆盖）。 */

/* ---------- 按钮 ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:0 30px;border-radius:999px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.24s var(--e)}
.bt.p{background:var(--gd);color:#fff;box-shadow:0 10px 26px rgba(88,4,250,.3)}
.bt.p:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(88,4,250,.4)}
.bt.o{border-color:var(--bd);background:#fff;color:var(--ink)}
.bt.o:hover{border-color:var(--p);color:var(--p);transform:translateY(-3px);box-shadow:var(--shs)}
.bt.w{background:#fff;color:var(--p)}
.bt.w:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(23,11,51,.18)}
.bt.s2{min-height:46px;padding:0 22px;font-size:14px;white-space:nowrap}
/* 页头主按钮文案：宽屏 .t-l（Get Instant Quote），窄屏 .t-s（Get Quote）；两者都不换行 */
.bt.s2 .t-s{display:none}

/* ---------- 栅格 ---------- */
.g2,.g3,.g4,.g5,.g6{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* ---------- 卡片 ---------- */
.c{background:#fff;border-radius:18px;padding:52px 30px 30px;transition:.3s var(--e);box-shadow:var(--shs)}
.c:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.c h3{font-size:18px;margin-bottom:10px}
.c p{color:var(--mu);font-size:15px}
.nm{width:46px;height:46px;border-radius:13px;background:var(--pl);color:var(--p);font-weight:800;display:grid;place-items:center;margin-bottom:16px;font-size:15px}
/* ---------- 图片块（无边框，靠层级与留白区分） ---------- */
.ic{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;padding:12px;transition:.34s var(--e);box-shadow:0 2px 10px rgba(23,11,51,.05)}
.ic:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(23,11,51,.13)}
.ic>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--ln);box-shadow:0 8px 22px rgba(23,11,51,.10);transition:transform .6s var(--e),box-shadow .4s var(--e)}
.ic:hover>img{transform:scale(1.04);box-shadow:0 14px 34px rgba(23,11,51,.16)}
.ic .b{flex:1;display:flex;flex-direction:column;padding:16px 10px 8px}
.ic .b h3{font-size:16.5px;line-height:1.35;margin-bottom:8px;transition:color .24s var(--e)}
.ic:hover .b h3{color:var(--p)}
.ic .b p{font-size:14px;line-height:1.7;color:var(--mu)}
.ic .b ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:14px}
.ic .b li{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--pl2);color:var(--p6)}
/* 各区块图片比例（统一按内容形态） */
#materials .ic>img{aspect-ratio:1/1}
#gallery .ic{border-radius:16px;padding:10px}
#gallery .ic>img{aspect-ratio:3/2;border-radius:8px}
#industries .ic>img{aspect-ratio:1/1}
#industries .ic .b{padding:14px 8px 6px}
/* 产品名称：默认单行显示，超出长度时左右滚动查看 */
#industries .ic .b h3{font-size:15px;line-height:1.4;margin:0;white-space:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
#industries .ic .b h3::-webkit-scrollbar{display:none}
/* 品牌故事首行三卡：与主题外边距对齐（同一 .w 容器），卡片间距见 --brand-gap */
.brand-row{gap:var(--brand-gap)}
#quote .ic>img{aspect-ratio:4/3}
.st{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shs)}
.st>div{padding:28px 22px;text-align:center;border-right:1px solid var(--ln)}
.st>div:last-child{border-right:0}
.st b{display:block;font-size:clamp(24px,1.8vw,34px);line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;background:var(--gd);-webkit-background-clip:text;background-clip:text;color:transparent}
.st span{display:block;margin-top:7px;color:var(--mu);font-size:13.5px}
.ch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ch a,.ch span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ln);background:#fff;font-size:14px;font-weight:600;color:var(--ink2);transition:.24s var(--e)}
.ch a:hover{border-color:var(--p);color:var(--p);transform:translateY(-2px)}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
/* 同一模块里连续多组「图文左右交替」的间距（组装脚本会把它们收进同一个版心容器，
   这里用留白分隔，替代原先写在内联 style 上的 margin-top） */
.sp+.sp{margin-top:56px}
.pic{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(23,11,51,.10)}
.tk{display:grid;gap:15px;margin-top:22px}
.tk li{display:flex;gap:13px;align-items:flex-start;color:var(--mu);font-size:15.5px}
.tk b{display:block;color:var(--ink);font-size:16px}
.tk i{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--pl);color:var(--p);display:grid;place-items:center;font-size:13px;font-weight:800;font-style:normal}

/* ---------- 5 轴服务页（parts/5axis-main.html）专用组件 ---------- */
.sp.rev .pic{order:2}                                  /* 图文左右交替（窄屏仍按 DOM 顺序：图在上） */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.spec>div{background:#fff;border-radius:14px;padding:16px 20px;border:1px solid var(--ln);box-shadow:var(--shs)}
.spec b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.spec span{display:block;margin-top:5px;color:var(--mu);font-size:13.5px;line-height:1.6}
.mi-card{background:var(--pl2);border-radius:14px;padding:14px 16px}
.mi-card b{display:block;font-size:14.5px;color:var(--p6);margin-bottom:5px}
.mi-card p{color:var(--mu);font-size:13.5px;line-height:1.65}
#applications .ic>img{aspect-ratio:1/1}
/* 页尾行动引导带：渐变主题底 + 承诺标签 + 两个按钮 */
.band{background:var(--gd);border-radius:26px;padding:46px;display:grid;grid-template-columns:1.5fr auto;gap:34px;align-items:center;box-shadow:0 24px 60px rgba(88,4,250,.28)}
.band .chips{display:flex;flex-wrap:wrap;gap:8px}
.band .chips span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;font-size:12.5px;font-weight:600}
.band .ld a{color:#fff}
.band-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:248px}
.band-cta .bt.gw{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.band-cta .bt.gw:hover{border-color:#fff;background:rgba(255,255,255,.14);transform:translateY(-3px)}
.band-tel{text-align:center;color:#fff;font-weight:700;font-size:14.5px;text-decoration:underline;text-underline-offset:4px}
/* 内容流水线（tools/gen）页面尾部的“相关阅读”互链列表 */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel li a{display:block;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:16px 18px;font-size:15px;font-weight:600;color:var(--ink2);box-shadow:var(--shs);transition:.22s var(--e)}
.rel li a:hover{border-color:var(--p);color:var(--p);transform:translateY(-3px)}
/* 规格/对比表（内容流水线页面用；窄屏自动变卡片式，不出现横向滚动） */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--ln);border-radius:16px;overflow:hidden;box-shadow:var(--shs);font-size:14.5px}
.tbl caption{caption-side:top;text-align:left;padding:0 0 12px;color:var(--mu);font-size:13.5px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ln)}
.tbl thead th{background:var(--pl2);font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p6);white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#FBFAFF}
.tbl td:first-child{font-weight:700;color:var(--ink)}
.tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 顶部工具条 + 语言下拉 ---------- */
.top{background:#fff;border-bottom:1px solid var(--ln);color:var(--ink2);font-size:13.5px;position:relative;z-index:960}
.top .w{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:50px}
.top .r{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* 右上信任标：粗体 ISO 9001（原 Contact US 位置） */
.top .r .iso{font-weight:800;color:var(--p);display:inline-flex;align-items:center;gap:6px}
.top .r .iso svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.top .r a:hover{color:var(--p)}
.lg{display:flex;align-items:center;gap:18px}
.lg .sep{width:1px;height:16px;background:var(--ln)}
.langdd{position:relative}
.langdd .langbtn{cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--ln);border-radius:999px;font:inherit;font-size:13.5px;font-weight:700;color:inherit;background:#fff;transition:.22s var(--e)}
.langdd .langbtn i{width:7px;height:7px;border-right:2px solid var(--p);border-bottom:2px solid var(--p);transform:rotate(45deg) translateY(-2px);transition:.25s var(--e)}
.langdd.open .langbtn{border-color:var(--p);color:var(--p);box-shadow:0 0 0 4px rgba(88,4,250,.1)}
.langdd.open .langbtn i{transform:rotate(225deg) translateY(-2px)}
.langdd .lst{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:300px;max-height:min(420px,60vh);overflow:auto;background:#fff;border:1px solid var(--ln);border-radius:14px;box-shadow:0 24px 60px rgba(23,11,51,.16);padding:8px;z-index:1000;grid-template-columns:1fr 1fr;gap:2px}
.langdd.open .lst{display:grid}
.langdd a{display:block;padding:8px 11px;border-radius:9px;font-size:13.5px;white-space:nowrap}
.langdd a:hover,.langdd a[aria-current]{background:var(--pl2);color:var(--p)}

/* ---------- 页头 + 超级菜单 ---------- */
.hr{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--ln);transition:.3s var(--e)}
.hr.on{box-shadow:0 10px 34px rgba(23,11,51,.09)}
.hr .w{display:flex;align-items:center;gap:24px;min-height:92px;transition:.3s var(--e)}
.hr.on .w{min-height:74px}
.lo img{height:46px;width:auto}
.mn{display:flex;align-items:center;margin-left:8px}
.mn>li{position:relative}
.mn>li>a{display:flex;align-items:center;gap:6px;padding:13px 15px;border-radius:10px;font-family:var(--fh);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transition:.2s var(--e)}
.mn>li>a i{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:.25s var(--e)}
.mn>li:hover>a,.mn>li:focus-within>a{color:var(--p);background:var(--pl2)}
.mn>li:hover>a i{transform:rotate(225deg) translateY(-2px)}
.mg{position:absolute;top:calc(100% + 12px);left:0;transform:translateY(10px);background:#fff;border-radius:18px;box-shadow:0 34px 80px rgba(23,11,51,.16);padding:26px;opacity:0;visibility:hidden;transition:.26s var(--e);z-index:30;max-width:calc(100vw - 48px);max-height:calc(100vh - 150px);overflow:auto}
.mn>li:hover .mg,.mn>li:focus-within .mg{opacity:1;visibility:visible;transform:translateY(0)}
.mg::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
/* 靠右的菜单项改为右对齐，避免面板超出视口 */
.mn>li:nth-last-child(-n+3) .mg{left:auto;right:0}
.mg .mgt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p);margin-bottom:14px}
.mgc{display:grid;gap:26px}
.mgc.c2{grid-template-columns:1fr 1fr;width:600px}
.mgc.c3{grid-template-columns:repeat(3,1fr);width:800px}
.mgc.c4{grid-template-columns:repeat(4,1fr);width:1180px;gap:18px}
.mi{display:block;padding:9px 12px;border-radius:9px;font-size:15px;color:var(--ink2);transition:.18s var(--e)}
.mi:hover{background:var(--pl2);color:var(--p);transform:translateX(3px)}
.mgc.c4 .ic{border-radius:14px;box-shadow:none;background:var(--pl2)}
.mgc.c4 .ic .b{padding:13px 15px 16px}
.mgc.c4 .ic .b .ict{font-size:14.5px;font-weight:700;line-height:1.35;margin-bottom:6px}
.mgc.c4 .ic .b .ict a{color:var(--ink)}
.hr .act{display:flex;gap:10px;margin-left:auto;align-items:center}
.bg{display:none;width:48px;height:48px;border:1px solid var(--ln);border-radius:13px;background:#fff;cursor:pointer}
.bg span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;transition:.25s var(--e)}
.bg.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.bg.on span:nth-child(2){opacity:0}
.bg.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.dw{position:fixed;inset:92px 0 0;background:#fff;z-index:880;overflow:auto;padding:18px 32px 140px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.28s var(--e)}
.dw.on{opacity:1;visibility:visible;transform:none}
.dw details{border-bottom:1px solid var(--ln)}
.dw summary{list-style:none;cursor:pointer;padding:16px 2px;font-family:var(--fh);font-weight:600;font-size:16px;letter-spacing:.05em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.dw summary::-webkit-details-marker{display:none}
.dw summary::after{content:"+";color:var(--p);font-size:20px}
.dw details[open] summary::after{content:"−"}
.dw .sb{padding:0 0 15px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.dw .sb a{padding:10px 11px;border-radius:10px;font-size:14px;background:var(--pl2);color:var(--ink2)}

/* ---------- 首屏（明亮） ---------- */
.hero{position:relative;overflow:hidden;padding:80px 0 0;color:var(--ink);
  background:
    radial-gradient(1100px 520px at 84% -14%,rgba(88,4,250,.16),transparent 62%),
    radial-gradient(900px 480px at 2% 118%,rgba(139,92,255,.14),transparent 64%),
    linear-gradient(180deg,#FBF9FF 0%,#FFFFFF 62%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(88,4,250,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(88,4,250,.07) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(90% 70% at 74% 6%,#000,transparent 72%);
          mask-image:radial-gradient(90% 70% at 74% 6%,#000,transparent 72%)}
.hero .w{position:relative;z-index:2}
.hg{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.hero .h2s{font-size:clamp(16px,1.15vw,21px);font-weight:500;color:var(--mu);margin-top:20px;letter-spacing:0;line-height:1.6}
.hero .ac{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero .tg{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero .tg span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--ln);font-size:13.5px;font-weight:600;color:var(--ink2);box-shadow:var(--shs)}
.hero .tg span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p);box-shadow:0 0 0 4px rgba(88,4,250,.14)}
.hv{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 28px 70px rgba(23,11,51,.16);background:#fff}
.hv img{width:100%;aspect-ratio:16/11;object-fit:cover}
.hv .cp{position:absolute;left:0;right:0;bottom:0;padding:16px 22px;font-size:13px;color:#fff;background:linear-gradient(0deg,rgba(23,11,51,.78),transparent)}
.hf{position:absolute;right:-10px;top:34px;background:#fff;border-radius:14px;padding:13px 18px;box-shadow:0 16px 40px rgba(23,11,51,.16);font-size:12.5px;font-weight:700;animation:fl 5s var(--e) infinite}
.hf b{display:block;font-size:20px;background:var(--gd);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hc{position:relative;left:50%;transform:translateX(-50%);width:100vw;margin-top:52px;padding:26px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);background:#fff}
.mw{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mq{display:flex;gap:76px;padding-right:76px;animation:mq 44s linear infinite;flex:0 0 auto}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mw:hover .mq{animation-play-state:paused}
.mq img{height:76px;width:auto;opacity:.95}

/* ---------- 询价 Tab ---------- */
.tb{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.tb button{min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--ln);background:#fff;font:inherit;font-weight:700;font-size:15px;color:var(--ink2);cursor:pointer;transition:.22s var(--e)}
.tb button[aria-selected=true]{background:var(--gd);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(88,4,250,.28)}
/* 步骤卡片：可点选（第一/二/三步） */
.pickable{cursor:pointer}
.ic.picked{border-color:var(--p);box-shadow:0 0 0 3px rgba(88,4,250,.16),0 16px 34px rgba(88,4,250,.16)}
.ic.picked .b h3{color:var(--p)}
.ic.picked::before{content:"✓";position:absolute;top:10px;right:10px;z-index:5;width:26px;height:26px;border-radius:50%;
  background:var(--gd);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;box-shadow:0 6px 16px rgba(88,4,250,.35)}
.pn[hidden]{display:none}
.qc{background:#fff;border-radius:22px;box-shadow:var(--shs)}
.qc .h{padding:26px 32px;border-bottom:1px solid var(--ln);display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.qc .b{padding:32px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fd{display:grid;gap:9px;margin-bottom:16px}
.fd label{font-size:13.5px;font-weight:700;color:var(--ink2)}
.fd input,.fd select,.fd textarea{min-height:54px;padding:14px 16px;border:1px solid var(--bd);border-radius:12px;font:inherit;font-size:15px;background:#fff;color:var(--ink);transition:.22s var(--e)}
.fd input:focus,.fd select:focus,.fd textarea:focus{outline:0;border-color:var(--p);box-shadow:0 0 0 4px rgba(88,4,250,.12)}
.dp{display:block;border-radius:16px;padding:30px;text-align:center;background:var(--pl2);color:var(--mu);font-size:14.5px;cursor:pointer;
  transition:background .22s var(--e),border-color .22s var(--e)}
.dp:hover{background:var(--pl)}
.dp:focus-within{box-shadow:0 0 0 4px rgba(88,4,250,.14)}
.dp.is-over{background:var(--pl);border-color:var(--p)}
.dp-file{display:block;margin-top:10px;font-weight:700;color:var(--p);font-size:13.5px;word-break:break-all}
/* 3D 上传区必填校验失败时的可见提示（控件本体 .sr 隐藏，原生气泡不可见） */
.dp.is-err{background:#FFF3F3;border-color:#E5484D}
.dp.is-err .dp-file{color:#C2262C}
.dp b{display:block;color:var(--p);font-size:17px;margin-bottom:7px}
/* 询价第 1~3 步：紧凑选项网格（材料 23 / 设备 12 / 后期处理 10） */
.opt-group{display:flex;align-items:baseline;gap:10px;margin:22px 0 12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p)}
.opt-group:first-child{margin-top:0}
.opt-group span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--mu);font-size:12.5px}
.opt-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.ic.compact{padding:6px;border-radius:12px}
.ic.compact>img{aspect-ratio:1/1;border-radius:7px}
.ic.compact .b{padding:8px 4px 4px}
.ic.compact .b h3{font-size:12px;line-height:1.3;margin:0;text-align:center;white-space:normal}
/* 第 1~3 步选项卡已是原生 <button>：重置按钮默认样式；标题用 <span class="t"> */
button.ic{font:inherit;color:inherit;text-align:left}
.ic.pickable{cursor:pointer}
.ic.compact .b .t{display:block;font-size:12px;line-height:1.3;text-align:center;white-space:normal;transition:color .24s var(--e)}
.ic.compact:hover .b .t,.ic.compact.picked .b .t{color:var(--p)}
/* 询价步骤选项卡居中（与材料分组一致） */
#quote .tb{justify-content:center}
/* 第 1 步材料选择：卡片宽度压到「材料名不换行」的最小值，图片随之缩到最小 */
#p1 .opt-grid{grid-template-columns:repeat(auto-fill,minmax(var(--mat-col),1fr))}
#p1 .ic.compact .b h3{white-space:nowrap}
/* 材料分组选项卡居中 */
#materials .tb{justify-content:center}
/* 已选摘要（第 4 步） */
.picked-summary{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.picked-summary span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:10px;background:var(--pl2);border:1px solid var(--ln);font-size:14px;font-weight:600;color:var(--ink2)}
.picked-summary span b{color:var(--p);font-weight:700}
.picked-summary span.empty{color:var(--mu);font-weight:400}
/* 第 4 步：两栏紧凑布局，尽量一屏内完成 */
.qgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:22px;align-items:start}
.qside{display:grid;gap:14px}
.qc .h .hint{font-size:13px;color:var(--mu);max-width:560px}
.qc .h .hint a{color:var(--p);text-decoration:underline}
.qcq .b{padding:20px 24px 22px}
.qcq .dp{padding:22px 18px;font-size:13.5px}
.qcq .picked-summary{margin:0;flex-direction:column;align-items:stretch}
.qcq .picked-summary span{justify-content:flex-start;min-height:36px;font-size:13px}
.qcq .fr{gap:12px}
.qcq .fd{margin-bottom:10px;gap:6px}
.qcq .fd input,.qcq .fd select{min-height:46px;padding:10px 13px}
.qcq .fd textarea{min-height:64px;padding:10px 13px}

/* ---------- 流程三步 ---------- */
.pse{display:grid;gap:var(--gap);counter-reset:s}
.stp{background:#fff;border-radius:18px;padding:34px;transition:.3s var(--e);box-shadow:var(--shs)}
.stp:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.stp::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:24px;right:26px;font-size:40px;font-weight:800;color:var(--pl);line-height:1;z-index:4}
.stp img{width:56px;height:56px;margin-bottom:18px;position:relative;z-index:4}
.stp h3{font-size:19px;margin-bottom:11px;color:var(--ink)}
.stp p{color:var(--mu);font-size:15px}

/* ---------- FAQ 手风琴 ---------- */
.ac{display:grid;gap:14px}
.ac details{background:#fff;border-radius:16px;padding:6px 26px;transition:.24s var(--e);box-shadow:var(--shs)}
.ac details[open]{box-shadow:var(--sh)}
.ac summary{cursor:pointer;list-style:none;padding:19px 0;font-weight:600;font-size:16.5px;line-height:1.5;display:flex;gap:20px;justify-content:space-between;align-items:center;color:var(--ink)}
.ac summary::-webkit-details-marker{display:none}
.ac summary::after{content:"+";flex:0 0 auto;width:32px;height:32px;border-radius:10px;background:var(--pl2);color:var(--p);display:grid;place-items:center;font-size:20px;transition:.24s var(--e)}
.ac details[open] summary::after{transform:rotate(45deg);background:var(--p);color:#fff}
.ac .a{padding:0 0 24px;color:var(--mu);font-size:15.5px}
.ac .a h5{color:var(--ink);font-size:16px;margin:18px 0 7px}
/* FAQ 正文（原站搬运内容）排版 */
.ac .a h4{color:var(--ink);font-size:17px;margin:22px 0 8px}
.ac .a p{margin:0 0 12px}
.ac .a ul,.ac .a ol{margin:0 0 14px;padding-left:22px;list-style:disc}
.ac .a ol{list-style:decimal}
.ac .a li{margin:6px 0}
.ac .a strong{color:var(--ink);font-weight:700}
.ac .a table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px;background:#fff}
.ac .a th,.ac .a td{border:1px solid var(--ln);padding:10px 12px;text-align:left;vertical-align:top}
.ac .a th{background:var(--pl2);color:var(--ink);font-weight:700}
.ac .a em{font-style:italic}
.ac .a img{border-radius:12px;margin:12px 0}

/* ---------- 品牌墙 ---------- */
.br{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:20px;align-items:center;justify-items:center}
/* 客户 Logo：品牌官方 SVG 原色，一行 10 枚 */
/* 客户 Logo：品牌官方 SVG 原色（不做任何滤镜/降透明度） */
.br img{width:auto;height:auto;max-width:100%;max-height:40px;object-fit:contain;transition:transform .3s var(--e)}
.br img:hover{transform:translateY(-2px)}

/* 页脚 CTA 双语：按页面语言显示（html[lang] 决定） */
.zh{display:none}
html[lang^="zh"] .en{display:none}
html[lang^="zh"] .zh{display:inline}

/* ---------- 页脚（明亮） ---------- */
.ft{background:var(--bg2);border-top:1px solid var(--ln);color:var(--ink2);font-size:14.5px;padding-top:72px}
.ft h4{color:var(--ink);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.ft a{color:var(--ink2)}
.ft a:hover{color:var(--p)}
.fg{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.05fr;gap:38px}
.fg ul{display:grid;gap:10px}
.fc{position:relative;background:var(--gd);border-radius:22px;padding:30px 34px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin-bottom:56px;box-shadow:0 24px 60px rgba(88,4,250,.28)}
.fc .fc-l{max-width:760px}
.fc .fc-r{padding-left:30px;border-left:1px solid rgba(255,255,255,.35);display:flex;align-items:center}
.fc h3{color:#fff;font-size:22px;text-transform:none;letter-spacing:-.01em}
.fc p{color:rgba(255,255,255,.92);font-size:14.5px;margin-top:8px}
.ftc li{display:flex;gap:10px}
.ftc li::before{content:"›";color:var(--p);font-weight:800}
.soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.soc a{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--ln);display:grid;place-items:center;transition:.24s var(--e)}
.soc a:hover{background:var(--pl2);border-color:var(--p);transform:translateY(-3px)}
.soc img{width:20px;height:20px;opacity:.95;transition:.24s var(--e)}
.soc a:hover img{opacity:1;transform:scale(1.08)}
.cr{display:flex;gap:11px;flex-wrap:wrap;margin-top:16px}
.cr a{padding:8px 14px;border-radius:9px;background:#fff;border:1px solid var(--ln);font-size:12.5px;font-weight:600}
.cr a:hover{border-color:var(--p);color:var(--p)}
.fb{margin-top:52px;border-top:1px solid var(--ln);padding:22px 0 26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--mu)}
.fb a:hover{color:var(--p)}

/* ---------- 右侧悬浮导航（玻璃拟态 + 渐变导轨 + 在线指示灯） ---------- */
.rl{position:fixed;right:8px;top:50%;transform:translateY(-50%);z-index:950;display:flex;flex-direction:column;gap:5px;padding:11px 7px;
  border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,236,255,.9));
  border:1px solid rgba(88,4,250,.18);box-shadow:0 20px 50px rgba(88,4,250,.16),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:.34s var(--e)}
.rl.on{opacity:1;pointer-events:auto}
.rl::before{content:"";position:absolute;left:50%;top:16px;bottom:16px;width:2px;margin-left:-1px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(88,4,250,.3),transparent)}
.rl::after{content:"";position:absolute;left:50%;top:3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18);animation:rldot 2.4s var(--e) infinite}
@keyframes rldot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7}}
.rl a{position:relative;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--ln);color:var(--p);
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(23,11,51,.06);transition:.26s var(--e)}
.rl a:hover{border-color:transparent;background:var(--gd);color:#fff;transform:translateX(-5px) scale(1.04);box-shadow:0 12px 26px rgba(88,4,250,.36)}
.rl svg{width:20px;height:20px;fill:currentColor}
.rl .l{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(8px,-50%);white-space:nowrap;
  background:var(--ink);color:#fff;padding:8px 13px;border-radius:10px;font-size:13px;font-weight:700;
  opacity:0;pointer-events:none;transition:.24s var(--e);box-shadow:0 10px 26px rgba(11,1,33,.28)}
.rl .l::after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--ink)}
.rl a:hover .l,.rl a:focus-visible .l{opacity:1;transform:translate(0,-50%)}
.rl .up{background:var(--pl2)}
/* 移动端底部快捷导航（HOME / CNC / QUOTE）：主题色底栏 + 图标与文字横排；
   当前页那一项由 app.js 标记 aria-current，呈现为白底圆角按钮 + 主题色字 */
.mb{display:none;position:fixed;left:0;right:0;bottom:0;z-index:960;gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--p);box-shadow:0 -10px 30px rgba(88,4,250,.3)}
.mb a{flex:1;min-height:48px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;transition:.2s var(--e)}
.mb a svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mb a:active{background:rgba(255,255,255,.34)}
.mb a[aria-current="page"]{background:#fff;color:var(--p);box-shadow:0 6px 16px rgba(23,11,51,.2)}
.mb a[aria-current="page"]:active{background:#F4F0FF}

/* 容器定位上下文：步骤卡 01/02/03 计数器、图卡选中角标、统计条描边都依赖它 */
.c,.ic,.stp,.qc,.ac details,.st,.dp{position:relative}

/* ---------- 容器边框：主题色渐变描边（#5804FA → #8B5CFF） ---------- */
.c,.ic,.stp,.qc,.ac details,.st,.dp,.mg{
  border:2px solid transparent;
  background-image:linear-gradient(#fff,#fff),var(--gd);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
/* 一键关闭全部容器描边：给 <body> 加 class="noframe" */
body.noframe .c,body.noframe .ic,body.noframe .stp,body.noframe .qc,body.noframe .ac details,
body.noframe .st,body.noframe .dp,body.noframe .mg{border-color:transparent;background-image:none}

/* ---------- 按钮动效：悬停光泽扫过 + 抬升 ---------- */
.bt{position:relative;overflow:hidden}
.bt::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .65s var(--e)}
.bt:hover::after{left:130%}
.bt.o::after{background:linear-gradient(100deg,transparent,rgba(88,4,250,.14),transparent)}

/* ---------- 首屏视频播放按钮（点击后才加载播放器） ---------- */
.vplay{position:absolute;left:50%;top:50%;width:86px;height:86px;transform:translate(-50%,-50%);z-index:6;
  border:0;border-radius:50%;background:#E62117;color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 16px 40px rgba(230,33,23,.45);transition:transform .3s var(--e),background .3s var(--e)}
.vplay:hover{transform:translate(-50%,-50%) scale(1.09);background:#FF2A1C}
.vplay svg{width:30px;height:30px;fill:#fff;margin-left:5px}
.vplay::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(230,33,23,.5);animation:vpulse 2.4s var(--e) infinite}
@keyframes vpulse{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}

/* ---------- 证书环播按钮 ---------- */
.certbtn{flex:0 0 auto;padding:6px 10px;border:0;background:transparent;cursor:pointer;border-radius:12px;transition:transform .28s var(--e),background .28s var(--e)}
.certbtn:hover{transform:translateY(-4px);background:var(--pl2)}
.certbtn img{height:76px;width:auto;opacity:.95;pointer-events:none}

/* ---------- 数字滚动：由 app.js 用 rAF 逐帧写文本实现（无布局技巧，避免裁切） ---------- */

/* ---------- 8 格网格：材料 / 行业板块一次展示 8 个 ---------- */
.grid8{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 横向轮播：其余项目（左右按钮 + 可选自动播放） ---------- */
.carousel{position:relative;margin-top:var(--gap)}
/* 横向轮播：固定 2 排（列优先流动），每屏 4 列 × 2 排 = 8 个 */
.carousel .track{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * var(--gap)) / 4);gap:var(--gap);align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .track>*{scroll-snap-align:start}
.cbtn{position:absolute;top:50%;z-index:6;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid var(--ln);background:#fff;color:var(--p);
  font:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px rgba(23,11,51,.16);transition:.24s var(--e)}
.cbtn:hover{background:var(--gd);color:#fff;border-color:transparent;transform:scale(1.06)}
.cbtn.prev{left:-20px}
.cbtn.next{right:-20px}
.cbtn[disabled]{opacity:.3;pointer-events:none;box-shadow:none}

/* 行业关键词栏（原 chip 行已改为分类选项卡，规则保留供其它页面复用） */
.ch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---------- 产品分类选项卡（行业板块，取自产品页的 20 个分类） ---------- */
.catbar{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:2px 2px 10px;margin-bottom:20px;justify-content:center;justify-content:safe center}
.catbar::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--ln);background:#fff;color:var(--ink2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:.22s var(--e)}
.cat:hover{border-color:var(--p);color:var(--p);transform:translateY(-2px)}
.cat[aria-pressed="true"]{background:var(--gd);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(88,4,250,.28)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---------- 正文内链接：用下划线区分（按钮/菜单类链接除外，不加下划线） ---------- */
p a:not(.bt):not(.mi):not(.chip),.ld a:not(.bt),.fd a,.dp a,.ac .a a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(88,4,250,.45)}
p a:not(.bt):hover,.ld a:not(.bt):hover,.fd a:hover,.dp a:hover{text-decoration-color:currentColor}
.bt,.mi,.chip,.ch a,.cr a,.soc a,.rl a,.mn a,.dw a,.ft a,.mg a,.lg a{text-decoration:none}

/* ---------- 弹窗（视频 / 证书 / 询价共用；内容点击时才创建） ---------- */
.modal.quote .box{max-width:min(1280px,94vw);max-height:90vh;overflow:auto}
.modal.quote .s{padding:30px 0}
.modal.quote .w{padding:0 22px}
.modal.quote .tb{margin-bottom:18px}
.modal{position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:24px;background:rgba(11,1,33,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal.on{display:grid;animation:mfade .26s var(--e)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal .box{position:relative;width:100%;max-width:min(560px,92vw);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.45);animation:mpop .3s var(--e)}
@keyframes mpop{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal.video .box{max-width:min(1120px,94vw)}
.modal .frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.modal .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal .shot{display:block;width:100%;max-height:78vh;object-fit:contain;background:#fff;padding:10px}
.modal .cap{padding:12px 18px;font-size:14px;color:var(--mu);border-top:1px solid var(--ln)}
.modal .close{position:absolute;top:10px;right:10px;z-index:3;width:42px;height:42px;border:0;border-radius:50%;background:rgba(11,1,33,.72);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .26s var(--e),background .26s var(--e)}
.modal .close:hover{background:var(--p);transform:rotate(90deg)}
body.mopen{overflow:hidden}

/* 小屏（尤其矮屏手机）压缩排版，保证提交按钮在视口内 */
@media (max-height:780px){
  .wa-head{padding:16px 20px 0}
  .wa-head h3{font-size:18px}
  .wa-head p{font-size:12.5px}
  .wa-form{padding:12px 20px 0;gap:8px}
  .wa-form input,.wa-form textarea{padding:9px 11px;font-size:14.5px}
  .wa-form textarea{min-height:62px}
  .wa-note{padding:10px 20px 14px;font-size:12px}
}


/* ---------- WhatsApp 询盘弹窗：点 wa.me 链接先填表，再带内容打开聊天 ---------- */
.modal .wabox{max-width:min(520px,92vw);max-height:calc(100vh - 32px);overflow:auto;-webkit-overflow-scrolling:touch}
.wa-head{padding:22px 26px 0}
.wa-head h3{margin:0 0 6px;font-size:20px;line-height:1.35;color:var(--ink)}
.wa-head p{margin:0;font-size:13.5px;line-height:1.55;color:var(--mu)}
.wa-form{display:grid;gap:10px;padding:16px 26px 0}
.wa-form input,.wa-form textarea{width:100%;padding:11px 13px;border:1px solid var(--bd);border-radius:10px;font:inherit;font-size:15px;color:var(--ink);background:#fff}
.wa-form textarea{min-height:86px;resize:vertical}
.wa-form input:focus,.wa-form textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(88,4,250,.12)}
.wa-form .bt{width:100%;margin-top:4px}
.wa-err{display:none;margin:0;padding:9px 12px;border-radius:9px;background:#FFF1F1;border:1px solid #FFD5D5;color:#A32B2B;font-size:13px}
.wa-err.on{display:block}
.wa-note{margin:0;padding:12px 26px 20px;font-size:12.5px;line-height:1.5;color:var(--mu)}


/* ---------- 入场动效 ---------- */
[data-r]{opacity:0;transform:translateY(18px);transition:opacity .5s var(--e),transform .5s var(--e);transition-delay:calc(var(--i,0) * 50ms)}
[data-r].in{opacity:1;transform:none}
[data-r=z]{transform:scale(.97)}
[data-r=z].in{transform:scale(1)}
[data-r=f]{transform:none}
@media (prefers-reduced-motion:reduce){[data-r]{opacity:1!important;transform:none!important;transition:none!important}*{animation:none!important}}
/* ---------- 首屏 hero 入场：改为纯 CSS 动画，不再等 JS 加 .in ----------
   原因：原来的 [data-r]{opacity:0} 必须等 app.js（defer）执行后才 .in 显示，
   实测移动端 LCP 渲染延迟 1.95s，其中绝大部分就是这段"等 JS"。
   这里给 hero 区域一条 CSS 动画（保留同样的位移/缩放与错峰效果），
   文字在 CSS 生效后立刻开始淡入 —— 不再依赖 JS。 */
.hero [data-r]{animation:heroIn .55s var(--e) both;animation-delay:calc(var(--i,0) * 55ms)}
.hero [data-r="z"]{animation-name:heroInZ}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroInZ{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}


/* ---------- 响应式 ---------- */
@media (max-width:1600px){:root{--wrap:1400px}}
@media (max-width:1180px){
  .mn{display:none}.bg{display:block}
  .hg{grid-template-columns:1fr;gap:36px}.hv{order:-1}
  .mgc.c4{display:none}
  .g5,.g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .br{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .carousel .track{grid-auto-columns:calc((100% - 2 * var(--gap)) / 3)}
  .cbtn.prev{left:-10px}
  .cbtn.next{right:-10px}
  .opt-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .langdd .lst{grid-template-columns:1fr}
}
@media (max-width:900px){
  .s{padding:64px 0}
  .rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:1fr;gap:24px;padding:30px}
  .band-cta{min-width:0}
  .g3,.g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .carousel .track{grid-auto-columns:calc((100% - var(--gap)) / 2)}
  .opt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sp{grid-template-columns:1fr;gap:30px}
  .st{grid-template-columns:1fr 1fr}
  .st>div{border-right:0;border-bottom:1px solid var(--ln)}
  .fr{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
  .dw .sb{grid-template-columns:repeat(2,1fr)}
  .c{padding:44px 26px 26px}
  .fc{grid-template-columns:1fr;gap:20px}
  .fc .fc-r{padding-left:0;border-left:0;padding-top:20px;border-top:1px solid rgba(255,255,255,.35);justify-content:flex-start}
  .hero .hg{gap:24px}
}
@media (max-width:620px){
  :root{--wrap:100%}
  body{font-size:15.5px}
  .w{padding:0 16px}
  /* 页头：缩小 logo 与间距，CTA 换短文案且强制单行，避免把汉堡按钮挤出视口 */
  .hr .w{gap:14px;min-height:74px}
  .lo img{height:38px}
  .hr .act{gap:8px}
  .bt.s2{padding:0 14px;font-size:13px}
  .bt.s2 .t-l{display:none}
  .bt.s2 .t-s{display:inline}
  .bg{width:44px;height:44px;border-radius:12px}
  /* 能力标签：移动端改为等宽单列，避免长短不一的胶囊“一行一个”且错落不齐 */
  .ch{display:grid;grid-template-columns:1fr;gap:8px}
  .ch span{min-height:38px;padding:0 14px;font-size:13px;justify-content:center}
  /* 品牌板块 CTA 换行后保持居中（原内联 margin-left:12px 会造成左右错位） */
  #brand .ct .bt{margin:5px 6px}
  #brand .ct .bt+.bt{margin-left:6px}
  .s{padding:44px 0}
  .g2,.g3,.g4,.g5,.g6,.fg{grid-template-columns:1fr}
  #gallery .g4{grid-template-columns:repeat(2,1fr);gap:12px}
  .br{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .br img{max-height:32px}
  .carousel .track{grid-auto-columns:100%}
  .opt-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .qgrid{grid-template-columns:1fr;gap:16px}
  /* 5 轴页：规格清单单列、交替图文回到“图在上”、行动引导带收窄留白 */
  .spec{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
  /* 规格表在窄屏改为容器内横向滚动，不撑破版心 */
  .tbl{min-width:560px;font-size:13.5px}
  .tbl th,.tbl td{padding:11px 12px}
  .sp.rev .pic{order:0}
  .band{padding:24px 20px}
  .band-cta .bt{min-height:50px}
  .qcq .picked-summary{flex-direction:row;flex-wrap:wrap}
  .fb{padding-bottom:116px}
  .ic.compact{padding:5px}
  .ic.compact .b h3{font-size:11px}
  /* 选项卡在移动端横向滚动，保持单行可操作 */
  .tb{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:4px}
  .tb::-webkit-scrollbar{display:none}
  .tb button{flex:0 0 auto;min-height:44px;padding:0 18px;font-size:14px}
  #materials .tb,#quote .tb{justify-content:flex-start}
  /* 移动端：11px 字号下最长材料名 87px → 卡片最小 106px（约 3 列） */
  :root{--mat-col:106px}
  #p1 .ic.compact .b h3{font-size:11px}
  /* 弹窗在移动端全屏，减少滚动与遮挡 */
  .modal{padding:0}
  .modal .box,.modal.video .box,.modal.quote .box{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0}
  .modal.quote .s{padding:18px 0 40px}
  .modal.quote .w{padding:0 14px}
  .modal.quote .tb{margin-bottom:14px}
  .picked-summary span{font-size:12.5px;min-height:34px;padding:0 11px}
  .modal .close{top:8px;right:8px;width:38px;height:38px}
  .cbtn{width:38px;height:38px;margin-top:-19px}
  .cbtn.prev{left:-6px}
  .cbtn.next{right:-6px}
  .st{grid-template-columns:1fr 1fr}
  .st>div{padding:16px 12px}
  .st b{font-size:22px}
  .st span{font-size:12.5px}
  .h1{font-size:24px}
  .h2{font-size:20px}
  .hero{padding:32px 0 0}
  .hero .ac .bt{flex:1 1 100%}
  .vplay{width:64px;height:64px}
  .vplay svg{width:22px;height:22px}
  .rl{display:none}
  .mb{display:flex}
  .mb a{font-size:11.5px;gap:7px}
  .mb a svg{width:18px;height:18px}
  .dw{inset:74px 0 0;padding:16px 16px 140px}
  .dw .sb{grid-template-columns:1fr}
  .fc{padding:24px}
  .hf{right:8px;top:14px}
  .mq{gap:38px;padding-right:38px}
  .certbtn img{height:56px}
  .modal{padding:12px}
  .modal .shot{max-height:64vh}
  .modal .box{border-radius:14px}
  .ic .b{padding:14px 8px 6px}
  .top .w{min-height:44px}
  .top .r{gap:10px}
  /* 移动端：去掉页头电话，只留 ISO 信任标并靠右对齐 */
  .top .r .tel{display:none}
  .top .r .iso{font-size:13px}
}

/* 极窄屏（≤360px）：进一步压缩页头，避免按钮把汉堡按钮挤出视口 */
@media (max-width:360px){
  .hr .w{gap:10px;min-height:66px}
  .lo img{height:30px}
  .bt.s2{padding:0 12px;font-size:12.5px}
  .bg{width:40px;height:40px}
}

/* ---------- 文章页：目录/步骤清单里的跳转链接（复用 .tk 列表，只补链接配色） ---------- */
.tk a{color:inherit;text-decoration:none;border-bottom:1px dashed var(--ln)}
.tk a:hover{color:var(--p);border-bottom-color:var(--p)}

/* ---------- 资源中心索引（/resources/ 博客总页）：卡片网格 + 分页器 ---------- */
/* .rc 复用 .c 的渐变描边与阴影，只改 padding 与交互，避免出现第二套卡片外观。 */
.ri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ri .rc{display:block;padding:30px 26px}
.ri .rc h3{font-size:16.5px;line-height:1.42;margin-bottom:9px;transition:color .24s var(--e)}
.ri .rc:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.ri .rc:hover h3{color:var(--p)}
.ri .rc p{font-size:14.5px;line-height:1.62}
.pg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:48px}
.pg a,.pg .on,.pg .gap{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:14.5px;font-weight:600;padding:0 13px}
.pg a{background:#fff;color:var(--ink);border:1px solid var(--ln);box-shadow:var(--shs);transition:.24s var(--e)}
.pg a:hover{color:var(--p);border-color:var(--p);transform:translateY(-2px)}
.pg .on{background-image:var(--gd);color:#fff;border:1px solid transparent}
.pg .gap{border:0;color:var(--mu)}
.pgmeta{text-align:center;color:var(--mu);font-size:13.5px;margin-top:18px}
@media (max-width:1080px){.ri{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){
  .ri{grid-template-columns:1fr}
  .pg a,.pg .on,.pg .gap{min-width:40px;height:40px;padding:0 10px}
}