/* ============================================================
HEGA · Bilingual Website
Design: Light Industrial Tech + HEGA Red
冷调白灰浅色主题:产品素材(渲染图/规格图)均为近白底,
浅色页面让深色机身设备自然凸显;页尾 CTA 带与页脚保留
深色收尾(变量作用域内重定义)。
============================================================ */
:root{
--bg:#ffffff;
--bg2:#f4f6f9;
--panel:#f8fafc;
--card:#ffffff;
--card2:#f7f9fc;
--line:#e4e9f0;
--line2:#cfd7e2;
--ink:#0d1219;
--muted:#57616f;
--muted2:#67717f;
--red:#e6212b;
--red2:#c8102e;
--radius:14px;
--shadow:0 10px 34px rgba(16,24,40,.10);
--img-bg:#f5f7f9; /* 与产品图底色(245,247,249)一致 */
--haze:rgba(16,24,40,.05); /* 浅色 hover 底 */
--hair:rgba(16,24,40,.07); /* 浅色发丝线 */
--maxw:1180px;
--headerH:72px;
}
/* 深色收尾:CTA 带 + 页脚 + 代理商招募区块。同名令牌就地重定义,
区块内所有 var() 自动切换为深色,无需逐条覆盖。 */
.agent-section,.cta-section,.footer{
--bg:#0a0e15;
--bg2:#0e141d;
--panel:#111823;
--card:#151e2a;
--card2:#0f1722;
--line:#232d3b;
--line2:#2c3949;
--ink:#e9eef5;
--muted:#93a0b1;
--muted2:#6b7889;
--haze:rgba(255,255,255,.06);
--hair:rgba(255,255,255,.07);
--shadow:0 10px 40px rgba(0,0,0,.45);
--img-bg:#151e2a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Segoe UI",Roboto,sans-serif;
line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* 无障碍隐藏:保留在可访问性树与 SEO 抓取里,但视觉不可见(页脚旧简介改用它承载) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.18em;
color:var(--muted);text-transform:uppercase;font-weight:600;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red)}
h1,h2,h3,h4{font-weight:800;line-height:1.25;margin:0;color:var(--ink)}
h2.section-title{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.01em}
/* 区块副标题(第十轮放大):16px/640px 时英文两三行挤在标题下方, 视觉上"小气"。
提到 17.5px + 行高 1.75 + 760px + balance, 与 40px 标题的比例更舒展,
并让两行长度接近(不再出现"半行孤尾")。 */
.section-sub{color:var(--muted);font-size:clamp(16px,1.22vw,17.5px);line-height:1.75;max-width:760px;margin:18px auto 0;text-wrap:balance}
.section-head{text-align:center;margin-bottom:44px}
.section-head .eyebrow{margin-bottom:14px}
.section-head h2{position:relative}
section{padding:88px 0}
.section-alt{background:var(--bg2)}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;margin-right:12px;
padding:14px 28px;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer;border:1px solid transparent;
transition:.25s;white-space:nowrap}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 26px rgba(230,33,43,.28)}
.btn-primary:hover{background:var(--red2);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--red);background:rgba(230,33,43,.06);color:var(--ink)}
.btn .ico{width:16px;height:16px}
.btn svg{width:17px;height:17px;flex:none}
.link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.link svg{width:15px;height:15px;color:var(--red);flex:none;transition:.3s}
.link:hover svg{transform:translateX(4px)}
/* ---------- Header ---------- */
.header{
position:fixed;top:0;left:0;right:0;z-index:100;height:var(--headerH);
background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair);
transition:.3s;
}
.header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 24px rgba(16,24,40,.08)}
.header .inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:12px;flex:none}
.logo img{height:40px;width:auto;display:block}
/* 导航占据 logo 与右侧操作区之间的剩余空间并居中(两侧留白相等, 消除左侧空洞);
≤820px 导航隐藏时, 靠 header-actions 的 margin-left:auto 顶到最右 */
.nav{display:flex;align-items:center;justify-content:center;gap:6px;flex:1 1 auto}
.nav a{font-size:16px;color:var(--muted);font-weight:600;line-height:1;padding:11px 17px;border-radius:11px;transition:.22s;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--haze)}
.nav a.active{color:#fff;background:var(--red);box-shadow:0 8px 22px rgba(230,32,39,.28)}
.header-actions{display:flex;align-items:center;gap:16px;flex:none;margin-left:auto}
/* 中间区间(821–1059px)页头会溢出: 导航在 ≤820 才隐藏, 而 logo 158 + 导航 561
+ 操作区 224 + 间距/内边距 96 = 1039px 是最小需求 —— 视口 821~1038 时右侧
"Get a Quote" 被推进视口外(实测 901px 下按钮右边缘 1014, 超出 113px, 只剩一条
红色边), 1024 也只剩 10px 贴边。此处压缩导航字号/内边距、缩小字标与按钮,
共省约 160px, 让 821px 起即可完整显示, 无需把导航提前换成汉堡菜单。 */
@media(min-width:821px) and (max-width:1059px){
.header .inner{padding:0 18px;gap:14px}
.logo img{height:34px}
.nav{gap:2px}
.nav a{font-size:15px;padding:11px 12px}
.header-actions{gap:10px}
.header-actions .btn{padding:10px 14px}
}
/* 压缩后整行仍需 901px; 821–899(iPad Air 834 / Galaxy Tab 860 等)再省不出空间,
与 ≤820 的移动端做法保持一致: 隐藏页头 CTA(首屏 Hero 内仍有 "Book a Plant
Tour" 按钮), 保留导航与语言切换。 */
@media(min-width:821px) and (max-width:899px){
.header-actions .btn{display:none}
}
.btn-sm{padding:10px 20px;font-size:14px;margin:0}
.burger{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s;display:block}
/* ---------- Language Switcher (header) ---------- */
.lang-switch{
display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
font-size:13px;letter-spacing:.05em;color:var(--muted);
border:1px solid var(--line2);border-radius:6px;
background:transparent;transition:.2s;text-transform:uppercase;
white-space:nowrap;flex:none;
}
.lang-switch:hover{color:var(--ink);border-color:var(--red);background:rgba(230,33,43,.06)}
.lang-switch .cur{color:var(--ink);font-weight:600}
.lang-switch .sep{color:var(--line2);font-weight:400;margin:0 -2px}
.lang-switch .other{color:var(--muted)}
/* ---------- Hero(分段式:居中文案区块 + 全幅产线带) ----------
弃用整屏背景图:cover 裁切随视口比例漂移,浅色下深字与深机身必打架。
产线带图(hero-a350.jpg 3840×992,源自画册 4659×1204 原图)顶边羽化接 --bg、
底边渐变 #f4f6f9 接
.stats 的 --bg2,横向羽化后可全幅铺放无缝衔接。 */
.hero{
position:relative;padding:calc(var(--headerH) + 64px) 0 0;
background:var(--bg);text-align:center;overflow:hidden;
}
/* 1010px: 英文 l1 行「Drilling · Milling · Laser · Cutting · ERP」(第十轮按中文版
分词习惯拆开 Laser/Cutting)实测 956.8px @58px, 原来的 960px 容器只剩 3px 余量,
字体度量轻微差异(不同系统回退字体)就会内部再折行变 4 行破版。放宽到 1010px 留 53px。
lead 自带 max-width:720px、ctas/badges 均自带居中, 不受影响。 */
.hero .content{position:relative;z-index:2;max-width:1010px;margin:0 auto}
.hero h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.015em;margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--red)}
/* 英文标题断行(仅宽屏): .l1 = 功能矩阵行, .l2 = 价值主张行, 各占一行。
旧版整句自动换行会出现"· ERP,"落行首 + "Platform"孤行的破版。
阈值定 901px: 768 平板容器仅 720px 放不下 44 字符的 l1(需 956.8px@58px),
该区间放开为自动换行 + text-wrap:balance, 反而更整齐。 */
@media(min-width:901px){
.hero h1 .l1,.hero h1 .l2{display:block}
}
/* ≤900px: 容器不足以放下 l1, 交给浏览器均衡换行(中文标题仍用
硬断, 两行已等宽) */
@media(max-width:900px){
.hero h1{text-wrap:balance}
}
/* lead: 640px 下自动换行成 4 行, 末行只剩 "production."(实测 92px) 孤行;
放宽到 720px 后为 3 行(实测 696/627/595), 再用 balance 均衡各行、消除孤字。
720px 仍窄于 h1 的 960px 容器, 保持"上宽下窄"的视觉收束。 */
.hero p.lead{font-size:18px;color:var(--muted);max-width:720px;margin:0 auto 34px;text-wrap:balance}
/* 中文口号 "0 分拣、0 周转…" 整串不拆行(仅宽屏; 窄屏若 nowrap 会撑破视口) */
@media(min-width:901px){
.hero p.lead .nw{white-space:nowrap}
}
.hero .ctas{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.hero .badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px;justify-content:center}
/* 桌面端 4 枚徽标排 2×2 等宽网格: flex 换行在 960px 容器下会排成 3+1,
末枚 "ERP-Connected Workflow" 孤行居中, 与上面三枚不成组很难看。
写法要点: width:max-content + repeat(2,1fr) —— 固有尺寸下 fr 轨道按最长
文案取等宽, 于是四枚同宽且随语言自适应(EN 368px/枚、ZH 174px/枚),
既不用改文案也不必写死宽度; max-width:100% 兜底防极端文案溢出。 */
@media(min-width:901px){
.hero .badges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px;
width:max-content;max-width:100%;margin:42px auto 0}
/* 用 flex-start 而非 center: 四枚等宽(368px)但文案长短不一,居中会让红点
在每枚里左右浮动(实测 rel 17~95px),同列两枚的红点对不齐、看着发散。
左对齐后四枚红点统一落在 16px 内边距处,形成整齐的一列。 */
.hero .badge{justify-content:flex-start}
/* 中文标签短, 4 枚并作一行共约 738px, 与 lead 的 720px 宽度更协调 */
html[lang^="zh"] .hero .badges{grid-template-columns:repeat(4,1fr)}
}
.hero .badge{display:flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--line);
border-radius:999px;background:var(--card2);font-size:13.5px;color:var(--muted)}
.hero .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(230,33,43,.5)}
.hero-fig{position:relative;margin-top:30px;line-height:0}
.hero-fig img{width:100%;display:block}
/* ---------- stats strip ---------- */
/* 去掉 border-top:hero 产线带底边即 #f4f6f9,与 --bg2 无缝相接 */
.stats{border-bottom:1px solid var(--line);background:var(--bg2)}
.stats .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stat{padding:34px 20px;text-align:center;position:relative;min-width:0}
.stat + .stat{border-left:1px solid var(--line)}
.stat .num{font-size:clamp(30px,3.6vw,46px);font-weight:800;color:var(--ink);line-height:1;overflow-wrap:break-word}
.stat .num span{color:var(--red)}
.stat .lbl{color:var(--muted);font-size:14px;margin-top:10px}
/* 词组型指标(无数字)整行:46px 下最长词 "Sophisticated" 约 335px,而 1180px 容器
4 列每格仅 243px 可用,会溢出压住相邻格。整行降字号 + 垂直居中后各视口均不重叠。 */
/* 用 flex-start 而非 center 锚定内容顶部: 各格小字行数不同(1~4 行)时,
center 会让内容整体下移,大字起始线随之错位; flex-start 保证四格同起点。 */
.stats-text .stat{display:flex;flex-direction:column;justify-content:flex-start}
.stats-text .stat .num{font-size:clamp(20px,2.3vw,30px);line-height:1.3;letter-spacing:-.01em;min-height:2.6em}
/* 四格高度必须一致:第三格 "Specialized & Sophisticated" 折两行(78px),其余三格
1 行(39px),居中后 "10+" 的大字起始线比 "9+" 高 12px —— 这正是业主反馈的
"第一跟第四项高度不一样"。给 .num 预留两行(2.6em)、.lbl 预留两行(3.5em),
四格内容高度统一为 137px,大字首行基线与小字首行均对齐。 */
.stats-text .stat .lbl{line-height:1.75;min-height:3.5em}
/* ---------- section title + cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.3s;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card:hover{border-color:var(--line2);transform:translateY(-6px);box-shadow:var(--shadow)}
/* product cards */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* 卡片纵向 flex + 链接 margin-top:auto 顶到卡底: 卡片内容行数天然不等
(标题 1~2 行、简介 1~2 行、产品页还有 1~3 条要点列表),"Learn More / 查看详情"
原先跟着文字流走,同一行内错位最多 70px(中文首页 100px)。grid 行内卡片等高,
把链接顶到卡底后,同一行的链接自然落在同一条水平线上。
.img 设 flex:none 防止行高不足时 aspect-ratio 被压缩。 */
.prod-card{display:flex;flex-direction:column}
.prod-card .body{flex:1 1 auto;display:flex;flex-direction:column}
.prod-card .link{margin-top:auto;align-self:flex-start}
.prod-card .img{flex:none;aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--img-bg)}
.prod-card .img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.prod-card:hover .img img{transform:scale(1.06)}
.prod-card .img .tag{position:absolute;top:14px;left:14px;background:rgba(230,33,43,.92);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.03em}
.prod-card .body{padding:22px 24px 26px}
.prod-card h3{font-size:20px;margin-bottom:8px}
.prod-card .model{color:var(--red);font-weight:700;font-size:13px;letter-spacing:.1em}
.prod-card p{color:var(--muted);font-size:14.5px;margin:10px 0 16px}
.prod-card .link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.prod-card .link svg{color:var(--red);transition:.3s}
.prod-card .link:hover svg{transform:translateX(4px)}
/* feature / value cards */
/* 第十轮: 能力卡原先只有 .card 的背景/描边、内容 padding 为 0 —— 图标与文字直接贴
在卡片左边框和上边框上(实测 padding:0px), 业主反馈"很小气、都是左边定格对齐、
很拘束"。加 34/32px 内边距 + 图标 52→64px(svg 26→32)+ 标题 18→20px +
正文 14.5→15.5px, 卡片由 155px 长到 ~215px, 内容不再贴边。
用 minmax(0,1fr) 防子项 min-content 撑破(全站网格约定)。 */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
/* 只有 2 张能力卡时(2026-09-16 第二十五轮,EM620)——
3 列栅格会空出第 3 格、整排左倾,故改走"双列居中"(信封 1000px,
与 .spec-charts.two 同一口径,卡片仍然比 A350 的 3 列卡略宽、图片更清楚)。
⚠️ 必须带媒体查询覆盖:`.feat-grid.two`(2 个类)优先级高于 820px 档里的 `.feat-grid`(1 个类),
只写上层规则的话窄屏会一直是双列 —— 直接横向溢出。 */
.feat-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px;margin-left:auto;margin-right:auto}
/* 5 张配图能力卡时(2026-09-17 第二十九轮,DS250)——
3 列栅格会排成「首行 3 张 + 次行 2 张左对齐」,右下角空一格、整排左倾。
与页脚 5 枚徽标同一手法:容器开 6 条轨道、每张跨 2 轨 ⇒
首行 3 张自动落 (1-2)(3-4)(5-6),单卡宽度与 3 列栅格**逐像素相同**
(2c+g = W/3−2g/3,与 (W−2g)/3 恒等);次行第 4/5 张显式落 (2-3)(4-5)
⇒ 两卡组合的中线 == 容器中线,自动居中且不写死尺寸。
⚠️ 必须带媒体查询覆盖:`.feat-grid.five`(2 个类)优先级高于 1024/820 档里的
`.feat-grid`(1 个类),只写上层规则的话窄屏会一直是 6 轨 —— 单卡只剩 1/3 宽。 */
.feat-grid.five{grid-template-columns:repeat(6,minmax(0,1fr))}
.feat-grid.five>*{grid-column:span 2}
.feat-grid.five>*:nth-child(4){grid-column:2/span 2}
.feat-grid.five>*:nth-child(5){grid-column:4/span 2}
.feat{display:flex;flex-direction:column;padding:34px 32px 32px}
.feat .ico{width:64px;height:64px;flex:none;border-radius:18px;background:rgba(230,33,43,.08);border:1px solid rgba(230,33,43,.22);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--red);transition:.3s}
.feat:hover .ico{background:rgba(230,33,43,.13);border-color:rgba(230,33,43,.34)}
.feat .ico svg{width:32px;height:32px}
.feat h3{font-size:20px;letter-spacing:-.01em;margin-bottom:12px}
.feat p{color:var(--muted);font-size:15.5px;line-height:1.72;margin:0}
/* 配图能力卡(2026-09-16 第十九轮,当前仅 A350 使用)——
业务方要求取消原来的红色图标方块,改用各功能的线描示意图。
.fimg 用同 .feat 内边距等值的负 margin 铺满卡片顶部(卡片本身 overflow:hidden,
四角由卡片的圆角裁掉,无需自己设圆角);底部留 22px 与标题分开。
⚠️ 图窗高度必须由 aspect-ratio **定死**,所以 img 用绝对定位 + inset 内缩:
6 张原图比例 1.54~2.14 不一,若让 img 参与普通流,它会按自身比例把图窗撑成
214~243px 不等,同一行卡片里的标题就会错落不齐(实测过)。绝对定位后图窗恒为
16/10,图片在 inset 出的安全区内等比居中(object-fit:contain,不裁不变形)。
底色 --card2(#f7f9fc):素材已把白底转成透明,浅灰底让线描图"浮"起来而不是糊在标题上。
⚠️ 改 .feat 的 padding 时必须同步改这里的负 margin(含 @media(max-width:520px) 那一档),
改 inset 时记得同步 max-width/max-height 的 calc 值。 */
.feat-media .fimg{position:relative;flex:none;aspect-ratio:16/10;overflow:hidden;
margin:-34px -32px 22px;background:var(--card2)}
.feat-media .fimg img{position:absolute;inset:14px;margin:auto;width:auto;height:auto;
max-width:calc(100% - 28px);max-height:calc(100% - 28px);object-fit:contain;display:block}
/* value props (0分拣 etc) 第十轮同步放大: 34→46px 数字 / 17→19px 标题 / 13.5→15px 正文 */
.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.value{display:flex;flex-direction:column;text-align:center;padding:38px 26px 34px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.value .no{font-size:clamp(34px,3.1vw,46px);font-weight:800;color:var(--red);line-height:1}
.value h3{font-size:19px;letter-spacing:-.01em;margin:14px 0 10px}
.value p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}
/* ---------- product detail ---------- */
.crumbs{font-size:13.5px;color:var(--muted);padding:96px 24px 0;max-width:var(--maxw);margin:0 auto}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--muted2);margin:0 8px}
.crumbs b{color:var(--ink);font-weight:600}
.pd-hero{position:relative;padding-top:20px}
.pd-hero .wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:40px 24px 0;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.pd-hero .txt h1{font-size:clamp(30px,4vw,52px);margin-bottom:10px}
.pd-hero .txt .model{color:var(--red);font-weight:700;letter-spacing:.08em}
.pd-hero .txt p{color:var(--muted);font-size:16.5px;margin:18px 0 26px}
/* 主图(2026-09-15 第十六轮修订):**图片盒贴合图片本身,不留白、不留灰**。
业务方反馈:第十四轮的 min-height:300px 会在超宽图(A350 3.69:1)上下各留 ~70px
浅灰带 —— 盒底 --img-bg(245,247,249)与图片自带的厂房底色(222~250)不一致,肉眼可见。
现行做法:盒子不设高度,img width:100% + height:auto ⇒ 盒高 = 盒宽 ÷ 原图长宽比,
图片 100% 铺满盒子,零留白、零裁切。
代价:九款盒高按各自原图比例(1.47:1 ~ 3.69:1)自然变化 —— 业务方明确取舍
(「图片框不能留白或者留灰」优先于第十四轮的等高归一)。改回 min-height 会重新露灰。
⚠️ 也不要改成固定 aspect-ratio + object-fit:contain/cover:contain 会重新露出色差带,
cover 会裁掉 A350 的产线两端。 */
.pd-hero .fig .img{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--img-bg);box-shadow:var(--shadow)}
.pd-hero .fig .img img{width:100%;height:auto;display:block}
/* 概览正文(2026-09-16 第十九轮重做)——
旧版把 intro 一次性渲染成"一整段 + 居中"的长文(且标题下的副标题还是 intro 前 60 字
的截断,与正文首句重复),业务方反馈"排版很乱"。现改为:标题下一句引语(产品数据
intro_lead)+ 最多 3 段左对齐正文(intro_paras),段间距 16px、行高 1.85。
居中只用于标题与引语(见 section-sub),正文左对齐才好读。 */
.pd-ov{max-width:760px;margin:0 auto 44px}
.pd-ov p{color:var(--muted);font-size:16.5px;line-height:1.85;margin:0 0 16px}
.pd-ov p:last-child{margin-bottom:0}
/* 第二十一轮(2026-09-16):中文正文单独调版 ——
① `text-align:justify` 让中文段落左右两端齐平(英文自由参差读着正常,中文等宽字
参差感被放大,业务方反馈"中文的排版还是不够好,英文的没问题")。
② 行宽由 760px 收到 700px:中文舒适行宽约 30~40 字,760px@16.5px ≈ 46 字偏长。
⚠️ 只作用于 zh 页面(html lang="zh-CN"),英文站零影响。 */
html[lang|="zh"] .pd-ov{max-width:700px}
html[lang|="zh"] .pd-ov p{text-align:justify;text-justify:inter-ideograph}
/* spec table */
.spec-table{width:100%;border-collapse:collapse;font-size:15px;overflow:hidden;border-radius:12px;border:1px solid var(--line)}
.spec-table th,.spec-table td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
.spec-table thead th{background:var(--bg2);color:var(--muted);font-size:13px;letter-spacing:.06em;font-weight:600}
.spec-table tbody tr:nth-child(even){background:var(--card2)}
.spec-table td:first-child{color:var(--muted);width:42%}
.spec-table td:last-child{color:var(--ink);font-weight:600}
/* 技术参数 · 加工范围图表(2026-09-16 第二十三轮 A350 截面图 / A600 切割范围图)
业务方在参数表下方追加的图表。图内中文字面标注已在素材阶段裁掉,文案由图注承载。
形态按数量分流:1 张 -> 居中窄卡(整幅铺满会在两侧留出大片空白);2 张 -> 双列并排。
.spec-chart 必须用白卡 --card:素材底色已归成纯白(255),直接落在 .section-alt 的
--bg2 上会显出一整块矩形色差,看起来像"贴了张纸"。 */
.spec-charts{display:grid;gap:24px;margin-top:28px}
.spec-charts.one{max-width:640px;margin-left:auto;margin-right:auto}
.spec-charts.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1000px;margin-left:auto;margin-right:auto}
.spec-charts .spec-chart{margin:0;padding:26px 30px;border:1px solid var(--line);border-radius:16px;
background:var(--card);box-shadow:0 1px 2px rgba(16,24,40,.04);
display:flex;flex-direction:column;align-items:center}
/* 展示宽上限 520px:素材为 2x(1044 / 962),Retina 下接近 1:1;再放大只是把栅格点阵拉糊。
max-height + object-fit(2026-09-17 第二十九轮,DS250 的**竖构图**图表)——
横构图的既有图表(A350 / A600,比例 1.5~1.8)盒高只有 284~350px,压根碰不到 520px 上限 ⇒ 零影响;
竖构图那张(496×748)不封顶会撑到 787px 高、比整屏还高,故封 520px 并把宽度按原比例跟着收
(345×520,居中)。⚠️ 必须 `width:auto` + `height:auto` 让浏览器按内在比例求解 ——
若保留 `width:100%` 就只能靠 object-fit 撑一个 520×520 的盒子(显示盒 ar≠原图 nar,
会破坏审计脚本「ar == nar 防拉伸」这条判据)。 */
.spec-charts .spec-chart img{display:block;width:auto;height:auto;max-width:min(520px,100%);max-height:520px}
/* figcaption 用 margin-top:auto 兜到卡片底部 —— 并列两卡高度由栅格拉伸取齐,
若两张图长宽比不同,图注仍能对齐同一基线(否则会一高一低)。 */
.spec-charts .spec-chart figcaption{margin-top:auto;padding-top:16px;text-align:center;
font-size:13.5px;color:var(--muted);letter-spacing:.01em}
/* ≤820px(平板竖屏起):双列改单列并收窄,否则图会缩到看不清刻度。 */
@media(max-width:820px){ .spec-charts.two{grid-template-columns:minmax(0,1fr);max-width:420px} }
/* 窄屏(手机)把卡片内边距收一档,给图表多让出 ~30px 宽 —— 刻度是小字,宽度直接等于可读性。 */
@media(max-width:560px){ .spec-charts .spec-chart{padding:18px 16px} }
/* spec dimension drawing */
.spec-fig{margin:0;padding:30px 34px;border:1px solid var(--line);border-radius:16px;
background:linear-gradient(180deg,#ffffff 0%,#eef2f7 100%);
box-shadow:0 18px 44px rgba(16,24,40,.10);display:flex;justify-content:center;align-items:center;
min-height:150px}
@media(min-width:821px){ .spec-fig{min-height:280px} }
/* 图纸:原图长宽比 2.1:1 ~ 5.0:1,height:auto 会让 EM620 的图纸冲到 745px 高(整屏),
而 A600 只有 185px。这里"压上限 + 托下限":
max-height:420px —— 只压上限,不强制等高(强制等高会把窄长图纸放大到超出原始像素而变糊);
.spec-fig 的 min-height:280px —— 托下限,矮图纸由 flex 垂直居中,露出的是本卡片的
白→浅灰渐变底(图纸底色 228~248,与卡片底色接近,不会出现色差带)。
实测容器高度由 185~480 收敛到 280~480。 */
.spec-fig img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain}
/* 外形与布局 · 多图纸(2026-09-16 第十九轮,A350 = 侧视图 + 俯视图)——
业务方给了两张带尺寸标注的图纸,需要都展示,故支持 spec_imgs 列表。
两张图都是超宽(5.7:1 / 3.6:1),上下堆叠各占满宽;此时取消 .spec-fig 的
min-height 托底(否则超宽图下方会挂一大块渐变底),让卡片贴合图纸。
flex-direction:column 让 figcaption 落到图片下方而不是被挤到右侧(原 .spec-fig 是
横向 flex 居中,直接加 caption 会与图片并排)。 */
.dim-figs{display:grid;gap:24px;max-width:980px;margin:0 auto}
/* width:fit-content + justify-self:center(2026-09-17 第二十六轮):卡片宽度**贴合图纸本身**。
超宽图纸(A350/A600 的 3.6~6.8:1)天然撑满 980 轨道 ⇒ 零影响;
只有 EM620 的 0.95:1 近方形工作台图受益 —— 否则它要在 980px 宽的卡里左右各空 245px
(图纸被 520px 高度上限约束、宽度只能到 ~492px,无法靠放大填满,再放大就是拉糊点阵)。
实测:A350 两卡仍 980 宽;EM620 第一张 980 / 第二张 552,都在 980 轨道内居中。 */
.dim-figs .spec-fig{flex-direction:column;min-height:0;padding:26px 30px;width:fit-content;max-width:100%;justify-self:center}
/* 2026-09-16 第二十五轮:压一个高度上限。
原来 max-height:none 是为了让超宽图纸(A350/A600 的 3.6~6.8:1)撑满 980px 容器、
不留大片渐变底;但 EM620 的工作台正视图是 **0.95:1 近方形**,放开后会算到
≈980×1030px —— 一个比整屏还高的图。
改 520px 上限:实测对 A350/A600 的 4 张图纸**零影响**(920px 宽下它们只到 135~254px,
够不到 520),只对近方形图纸生效;近方形图按高度封顶后宽度自动收缩居中。 */
.dim-figs .spec-fig img{max-height:520px}
/* 2026-09-17 第二十六轮:**消掉"贴了张纸"的白框接缝**。
.spec-fig 的底是 white→#eef2f7 渐变,而图纸素材自带**纯白底**(扫描/截图留下),
于是图片边界处会露出一块比卡底更白的矩形(近方形图尤其明显,因为图占满了卡片中段)。
mix-blend-mode:multiply 让白底等价于"透明"(白 × 卡底 = 卡底),黑线保持黑,
浅灰填充略微加深、反而更清晰。三款产品的图纸卡同受益。
⚠️ 只在浅色卡上用;若将来把 .spec-fig 改成深色底必须去掉这行。 */
.dim-figs .spec-fig img{mix-blend-mode:multiply}
.dim-figs .spec-fig figcaption{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted);letter-spacing:.01em}
/* ---------- product video (第十五轮 / 2026-09-15 第十六·十七轮修订) ----------
容器定死 16:9(播放器本身即 16:9;EM620 实测 1906×1080 ≈ 1.765:1,统一取 16:9 无可见误差)。
封面 object-fit:**cover**(2026-09-15 第十七轮由 contain 改来)——
业务方上传的 9 张专用封面比例 1.5:1 ~ 1.97:1,与 16:9 很接近且主体居中,
cover 后上下(或左右)只裁 ≤10%,裁掉的是天花板/地板/货架边缘,设备本体完整,
换来的是**画面铺满、四周不留任何边**,最符合业务方"不能留白或者留灰"的要求。
⚠️ 第十六轮用 contain 是因为当时封面直接沿用超宽主图(A350 3.69:1)会被 cover 裁成一条;
专用封面到位后该前提已不成立。换新封面时请确认主体不在边缘。
`.vbg` 同图模糊底保留作**极端比例兜底**:cover 生效时被完全遮住(等于不存在),
万一将来某张封面比例很偏,露出的边也是画面自身颜色,不会出现白/灰色带。
iframe 叠在封面之上(z-index:2)而不是替换它:点播放后 iframe 加载有 0.3~1s 空窗,
保留封面在底层可避免闪黑;iframe 自带黑底,加载完成自然盖住封面。 */
.pd-video{max-width:980px;margin:0 auto}
.pd-video .vframe{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
border:1px solid var(--line);border-radius:16px;background:#0a0e15;
box-shadow:0 18px 44px rgba(16,24,40,.10)}
/* 模糊兜底层:与封面同图的 .vbg,background-image 由 build.py 内联写在元素上。
⚠️ 不要改成 CSS 变量(--poster)那种写法 —— var() 里的相对路径会按**样式表自身所在目录**
(assets/css/)解析,实测会 404;内联在元素上才按页面解析。 */
.pd-video .vbg{position:absolute;inset:-12%;z-index:0;
background-size:cover;background-position:center;filter:blur(30px) saturate(1.04)}
.pd-video .vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* 播放按钮(2026-09-15 第十七轮加**扩散脉冲光环**)——
业务方要求"让阅读者知道这个卡片是能够播放的",故加两枚同色圆环错峰放大淡出(间隔 1.3s),
比静态按钮显眼得多;按钮本体不参与动画 —— 若用 transform 动画会和 hover 的 scale 打架
(animation 优先级高于普通声明,会把 hover 反馈吃掉)。
光环绘制在按钮背景之上,因此把 SVG 包进 .vico 并抬到 z-index:1,避免三角被光环盖住。
⚠️ 位置:2026-09-15 第十八轮由**正中央**改到**左下角** —— 原居中位置压住了封面正中的设备本体,
业务方明确反馈"挡住了设备"。左下角通常是封面里地面/货架的位置,遮挡最小。
⚠️ .vframe 有 overflow:hidden,光环放大到 1.95 倍时向外扩的尺寸 = 直径×(1.95-1)/2
(78px → +37px;58px → +27.6px)。因此 left/bottom 必须 ≥ 该值波才不会被裁:
桌面 left/bottom = 44px(> 37px ✅);窄屏 = 28px(> 27.6px ✅)。
改动 .vplay 尺寸或 vping 的最大 scale 后必须重算这两个间距。
⚠️ 不要给 .vplay 加 translate 偏移 —— hover 用 scale(1.07),两者会互相覆盖。 */
.pd-video .vplay{position:absolute;left:44px;bottom:44px;transform:scale(1);
width:78px;height:78px;padding:0;border:0;border-radius:50%;cursor:pointer;z-index:3;
display:flex;align-items:center;justify-content:center;
background:var(--red);color:#fff;box-shadow:0 10px 26px rgba(230,33,43,.34);
transition:transform .22s ease,box-shadow .22s ease}
.pd-video .vplay::before,
.pd-video .vplay::after{content:"";position:absolute;inset:0;border-radius:50%;
background:var(--red);opacity:.5;pointer-events:none;
animation:vping 2.6s cubic-bezier(.25,.46,.45,.94) infinite}
.pd-video .vplay::after{animation-delay:1.3s}
@keyframes vping{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.95);opacity:0}}
.pd-video .vplay .vico{position:relative;z-index:1;display:flex;align-items:center;justify-content:center}
.pd-video .vplay svg{width:30px;height:30px;margin-left:4px} /* 4px 补偿三角重心的视觉偏移 */
.pd-video .vplay:hover{transform:scale(1.07);box-shadow:0 14px 32px rgba(230,33,43,.44)}
.pd-video .vplay:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.pd-video .vframe.is-live .vplay{display:none}
/* 「视频即将上线」轻提示(第十七轮):封面已就位、但该语言还没填视频 ID 时,
点击播放按钮给出反馈,避免"点了完全没反应"被当成故障。文案见 i18n 的 pd_vid_soon。 */
.pd-video .vsoon{position:absolute;left:50%;bottom:22px;transform:translate(-50%,8px);z-index:4;
padding:8px 16px;border-radius:999px;background:rgba(8,12,20,.82);color:#fff;
font-size:13.5px;letter-spacing:.02em;white-space:nowrap;pointer-events:none;
opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease}
.pd-video .vframe.is-soon .vsoon{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){
.pd-video .vplay::before,.pd-video .vplay::after{animation:none;opacity:0}
}
.pd-video .vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
background:#000;z-index:2}
.pd-video .v-out{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.pd-video .v-out a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.pd-video .v-out a:hover{color:var(--red);border-bottom-color:var(--red)}
/* ⚠️ 必须显式给尺寸:本项目所有 svg 都靠 CSS 定尺寸(见 skill「svg 必须显式尺寸」)。
漏写会让箭头被撑成容器等宽(实测 980×980),把 .pd-video 从 ~585px 顶到 1577px。 */
.pd-video .v-out a svg{width:13px;height:13px;vertical-align:-2px;margin-left:3px}
/* 窄屏:按钮 58→50px(375 视口下框仅 184px 高,58px 占 31% 反而更容易压到设备;
50px 仍 ≥ iOS/Android 44~48px 的最小点击区)。间距按 50px 重算:50×0.95/2 = 23.75 ⇒ 取 26px。
同时把 .vsoon 挪到**右上角** —— 此时左下角被按钮占了,若仍居中会和按钮叠在一起。 */
@media(max-width:560px){
.pd-video .vplay{width:50px;height:50px;left:26px;bottom:26px}
.pd-video .vplay svg{width:20px;height:20px}
.pd-video .vsoon{left:auto;right:14px;bottom:auto;top:14px;transform:translate(0,-8px)}
.pd-video .vframe.is-soon .vsoon{transform:translate(0,0)}
}
/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card .img{aspect-ratio:16/10;overflow:hidden;background:var(--img-bg)}
.news-card .img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.news-card:hover .img img{transform:scale(1.06)}
.news-card .body{padding:20px 22px}
.news-card .date{font-size:12.5px;color:var(--muted2);letter-spacing:.05em}
.news-card h3{font-size:17.5px;margin:8px 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card .ex{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-detail{max-width:820px;margin:0 auto}
.news-detail h1{font-size:clamp(26px,3.6vw,40px);margin:10px 0 16px}
.news-meta{color:var(--muted2);font-size:13.5px;margin-bottom:26px;display:flex;gap:18px;flex-wrap:wrap}
.news-body{font-size:16.5px;color:#3d4754;line-height:1.9}
.news-body p{margin:0 0 20px}
.news-body img{border-radius:12px;margin:14px 0;border:1px solid var(--line)}
.news-footer{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
/* ---------- CTA band(深色收尾) ---------- */
/* cta-section 全幅深色,与页脚连成一片;内部 .cta-band 为抬升的深色卡 */
.cta-section{background:var(--bg)}
.cta-band{position:relative;overflow:hidden;border-radius:20px;padding:56px 48px;background:linear-gradient(120deg,#141b26 0%,#1c2532 60%,#2a1620 100%);border:1px solid var(--line)}
.cta-band::before{content:"";position:absolute;right:-60px;top:-60px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(230,33,43,.28),transparent 70%)}
.cta-band .grid{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;z-index:1}
.cta-band h2{font-size:clamp(24px,3vw,36px);max-width:640px}
.cta-band p{color:var(--muted);margin:12px 0 0;max-width:520px}
/* ---------- 代理商招募(第十轮新增) ----------
位置策略: 合作伙伴页首位(#distributor)放深色招募区块 —— 语义最准;
首页「信任客户 logo 墙」之后接一条品牌红入口条 —— 承接首页最大流量。
深色区块复用上方 .agent-section 的深色令牌作用域, 内部组件自动适配。 */
.agent-section{padding:24px 0 88px}
.agent-band{position:relative;overflow:hidden;border-radius:22px;padding:52px 48px;
background:linear-gradient(118deg,#111a26 0%,#1a2432 58%,#2b1620 100%);border:1px solid var(--line)}
.agent-band::before{content:"";position:absolute;left:-70px;top:-90px;width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle,rgba(230,33,43,.3),transparent 70%);pointer-events:none}
.agent-band .grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1fr;gap:46px;align-items:center}
.agent-band .eyebrow{color:#ff8a90}
.agent-band h2{font-size:clamp(24px,3vw,36px);letter-spacing:-.015em;margin-top:14px}
.agent-band .lead{color:var(--muted);font-size:16px;line-height:1.75;margin:16px 0 28px;max-width:520px}
.agent-points{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.agent-points li{display:flex;gap:15px;align-items:flex-start;padding:18px 20px;border-radius:15px;
background:rgba(255,255,255,.045);border:1px solid var(--line);transition:.25s}
.agent-points li:hover{background:rgba(255,255,255,.075);border-color:rgba(230,33,43,.42)}
.agent-points .ico{width:44px;height:44px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;
color:#ff6b73;background:rgba(230,33,43,.16);border:1px solid rgba(230,33,43,.32)}
.agent-points .ico svg{width:22px;height:22px}
.agent-points h4{font-size:16.5px;margin-bottom:5px}
.agent-points p{color:var(--muted);font-size:14.5px;line-height:1.68;margin:0}
/* 首页入口条(品牌红): 页面其余部分都是白/浅灰, 红色横条是最强视觉锚点 */
.agent-entry{padding:0}
.agent-entry-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;
gap:30px;flex-wrap:wrap;padding:32px 40px;border-radius:18px;color:#fff;
background:linear-gradient(100deg,#e6212b 0%,#c8102e 58%,#8d0b1f 100%);
box-shadow:0 18px 44px rgba(200,16,46,.26)}
.agent-entry-band::after{content:"";position:absolute;right:-50px;bottom:-90px;width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);pointer-events:none}
.agent-entry-band .txt{position:relative;z-index:1;min-width:0}
.agent-entry-band .eyebrow{color:rgba(255,255,255,.92)}
.agent-entry-band .eyebrow::before{background:#fff}
.agent-entry-band h3{color:#fff;font-size:clamp(21px,2.3vw,27px);letter-spacing:-.01em;margin-top:10px}
.agent-entry-band p{color:rgba(255,255,255,.92);font-size:15.5px;line-height:1.7;margin:10px 0 0;max-width:660px}
.agent-entry-band .btn{position:relative;z-index:1;margin:0;background:#fff;color:#c8102e;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.agent-entry-band .btn:hover{background:#fff;color:#8d0b1f;transform:translateY(-2px)}
/* 锚点跳转偏移: 页头 fixed 高 --headerH(72px), 不加偏移时 #distributor 顶部整块
被页头压住(实测跳转后区块 top=0)。留出页头高度 + 16px 呼吸位。 */
#distributor,#why-partner{scroll-margin-top:calc(var(--headerH) + 16px)}
/* ---------- footer(深色收尾) ---------- */
.footer{background:#070a10;border-top:1px solid var(--line);padding:64px 0 34px}
/* 列宽按内容量分配:产品列最长(13px 字号下 "M4-3000 Four-Axis Profile Machining Center" 需 272px),
联系列次之(长地址 + 两条带标签的电话)。实测 ≥1000px 视口两列均不折行, ≤980px 走双列布局。 */
.footer .grid{display:grid;grid-template-columns:1.3fr .6fr 1.72fr 1.62fr;gap:28px}
.footer h4{font-size:15px;margin-bottom:16px;color:var(--ink)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:10px 0}
.footer li a{color:var(--muted);font-size:13px;line-height:1.45}
.footer li a:hover{color:var(--ink)}
/* 品牌列:简介已改为 .sr-only 承载(SEO/无障碍保留),故这里排除它,
否则 (0,2,1) 的优先级会盖掉 .sr-only 的 margin/字号。 */
.footer .brand p:not(.sr-only){color:var(--muted);font-size:14px;margin-top:14px;max-width:300px}
/* ---------- 页脚资质徽标(高企火炬 / CE / ISO / MA / MADE IN CHINA) ----------
五枚官方图案位图:240×240 白底 PNG,源图 #f6f6f6 灰底已归一为纯白(详见 make_certs.py)。
品牌列实宽 ≈260px(容器 1180 − 48 padding → 1132;grid 1.3fr .6fr 1.72fr 1.62fr,
gap 28 → 可分配 1048,品牌列 = 1048 × 1.3/5.24 = 260.0)。
5 枚排 3 列 2 行:3×80 + 2×8 = 256px,留 4px 余量;第 2 行居中(见下方 nth-child 注)。
⚠️ 轨道宽必须写 minmax(0,40px) 而不是固定 40px:1025~1180px 视口区间品牌列只有
215~260px,固定宽会横向溢出(≤1024px 才切双列布局,这一段是既有审计盲区),minmax 会等比收缩。
白底方片 + 圆角 + 细描边,与 .footer .qr .it img(二维码方片)同一套视觉语言;
深色页脚上必须给白底 —— 深蓝 ISO、深灰 MADE IN CHINA 直接放深色底几乎不可见。 */
.footer .certs{display:grid;grid-template-columns:repeat(6,minmax(0,40px));gap:8px;
margin-top:20px;justify-content:start}
.footer .certs .cb{grid-column:span 2;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
border:1px solid var(--line2);border-radius:14px;background:#fff;padding:9px;
transition:border-color .25s}
/* 6 轨道 × 每枚跨 2:前 3 枚自动落在 (1-2)(3-4)(5-6),后 2 枚显式落在 (2-3)(4-5),
两枚组合的中线正好等于容器中线 → 第 2 行自动居中,不写死尺寸(窄列等比收缩后仍居中)。 */
.footer .certs .cb:nth-child(4){grid-column:2/span 2}
.footer .certs .cb:nth-child(5){grid-column:4/span 2}
.footer .certs .cb:hover{border-color:rgba(255,255,255,.34)}
.footer .qr{display:flex;gap:14px;flex-wrap:wrap}
.footer .qr .it{text-align:center;width:96px}
.footer .qr .it img{width:96px;height:96px;border-radius:10px;border:1px solid var(--line2);background:#fff;padding:5px;object-fit:contain}
.footer .qr .it span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.footer .contact li{color:var(--muted);font-size:13px;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.footer .contact svg{color:var(--red);flex:none;width:15px;height:15px;margin-top:3px}
.footer-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted2);font-size:13px}
/* ---------- 联系页主体两栏容器(第三十四轮) ---------- */
/* ⚠️ 历史坑:该容器从 v1 起就写成 `class="grid" style="grid-template-columns:1.3fr 1fr;gap:28px"`,
但全站并没有裸 `.grid` 规则 —— 只有 .stats/.cta-band/.agent-band/.footer 这些**作用域版本**
(见文件上方各处)。于是这个 div 的 display 一直是默认的 block,内联的 grid-template-columns
与 gap **从未生效**,「关注我们」一列自始至终堆叠在「联系方式」下面。
实测(playwright 探针 · 1440/1180/1025/820/375 五档):按钮行底边与 Follow Us 标题顶边
垂直间距恒为 **0px**(全局 h1~h4{margin:0}),标题像贴在「立即致电」按钮上。
这里改为显式命名的单栏栅格 + 40px 列间距:40px ≈ 2.5× 卡片→按钮的 16px(组内节奏),
又明显小于 section 的 88px(区块间距),让两列成为"同一区块里的两个组"。
⚠️ 若日后要恢复设计稿的两栏,把 grid-template-columns 改成 minmax(0,1.3fr) minmax(0,1fr),
并在 ≤1024px 档覆盖回 minmax(0,1fr)(已实测:两栏时左列底部留白约 400px、
soc 账号名会被 ellipsis 截断、QR 卡呈 2+1 参差,单栏观感更好,故当前取单栏)。 */
.contact-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
/* ---------- Social (footer + contact) ---------- */
.social-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
/* 联系页:平台图标 + 平台名 + 账号名 卡片 */
.social-row .soc{display:flex;align-items:center;gap:12px;padding:12px 16px;
border:1px solid var(--line2);border-radius:10px;color:var(--muted);
background:var(--card);transition:.2s;flex:1 1 210px;min-width:0;position:relative}
a.social-row .soc:hover,.social-row a.soc:hover{color:var(--ink);border-color:var(--red);background:rgba(230,33,43,.05)}
.social-row .soc svg{width:22px;height:22px;flex:none;color:var(--red)}
.social-row .soc .soc-lb{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.social-row .soc .soc-lb b{font-size:14px;font-weight:600;color:var(--ink)}
.social-row .soc .soc-lb i{font-style:normal;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 占位(未填链接)的平台:不渲染死链,加 SOON 标记 */
.soc.soon{opacity:.6;cursor:default;border-style:dashed}
.soc.soon::after{content:"SOON";font-size:9px;letter-spacing:.08em;color:var(--muted2);
border:1px solid var(--line2);border-radius:4px;padding:1px 5px;margin-left:auto;align-self:flex-start}
/* 页脚紧凑版:纯图标 + 平台名 */
.social-row.compact{display:flex;flex-wrap:wrap;gap:8px}
.social-row.compact .soc{flex:0 0 auto;padding:8px 12px;border-radius:8px;gap:8px;background:transparent}
.social-row.compact .soc svg{width:17px;height:17px}
.social-row.compact .soc .soc-lb b{font-size:13px;font-weight:500}
.social-row.compact .soc .soc-lb i{display:none}
.social-row.compact .soc.soon::after{display:none}
/* 页脚紧凑版无 SOON 角标,占位平台改用统一的实线边框,避免虚线框被误读为高亮 */
.social-row.compact .soc.soon{border-style:solid;opacity:.55}
/* 中文版:微信二维码(页脚/联系页) */
.social-row.qr-row{display:flex;flex-wrap:wrap;gap:14px}
.social-row.qr-row .soc-qr{position:relative;text-align:center;width:100px;cursor:pointer}
.social-row.qr-row .soc-qr img{width:100px;height:100px;border-radius:10px;border:1px solid var(--line2);background:#fff;padding:5px;object-fit:contain}
.social-row.qr-row .soc-qr span{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.social-row.qr-row .soc-qr::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;box-shadow:var(--shadow);font-weight:500}
.social-row.qr-row .soc-qr:hover::after{opacity:1}
/* 联系页「扫码关注」二维码卡片 */
/* auto-fit:英文站 3 张(IG/TikTok/YouTube)单行铺满,中文站 2 张自动等分,窄屏自动降列 */
.qr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px}
.qrcard{display:block;text-align:center;background:var(--card);
border:1px solid var(--line);border-radius:12px;padding:18px 12px;transition:.2s}
a.qrcard:hover{border-color:var(--red);background:rgba(230,33,43,.04);transform:translateY(-2px)}
.qrcard img{display:block;margin:0 auto;height:168px;width:auto;max-width:100%;object-fit:contain;border-radius:10px}
.qrcard .qc-t{margin-top:14px}
.qrcard .qc-t b{display:block;color:var(--ink);font-size:14.5px;font-weight:600}
.qrcard .qc-t span{display:block;color:var(--muted);font-size:12px;margin-top:4px;line-height:1.45;word-break:break-word}
@media (max-width:560px){.qr-cards{grid-template-columns:1fr}.qrcard img{height:190px}.social-row{grid-template-columns:1fr}}
/* 弹窗版本(用于联系页) */
.qr-popup-overlay{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.qr-popup-overlay.show{display:flex}
.qr-popup{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;max-width:90vw;text-align:center;position:relative;box-shadow:0 24px 60px rgba(16,24,40,.25)}
.qr-popup img{width:220px;height:220px;border-radius:10px;border:1px solid var(--line);background:#fff;padding:8px;margin:0 auto;display:block}
.qr-popup h3{color:var(--ink);margin:18px 0 6px;font-size:18px}
.qr-popup p{color:var(--muted);font-size:14px;margin:0}
.qr-popup .close{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}
.qr-popup .close:hover{color:var(--ink)}
/* ---------- floats / mobile bar ---------- */
.float-bar{position:fixed;right:26px;bottom:26px;z-index:90;display:flex;flex-direction:column;gap:12px}
.float-btn{width:56px;height:56px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(230,33,43,.35);transition:.25s;position:relative}
.float-btn.grey{background:#fff;color:var(--ink);border:1px solid var(--line2);box-shadow:0 10px 24px rgba(16,24,40,.14)}
/* 第三枚:招商入口。与「电话」同为品牌红(转化动作),中间由微信白钮隔开,
避免两个红色圆钮相邻粘连;用 160° 渐变与电话的纯色做轻微区分。 */
.float-btn.agent{background:linear-gradient(160deg,var(--red),var(--red2));box-shadow:0 10px 30px rgba(200,16,46,.42)}
.float-btn:hover{transform:translateY(-3px)}
.float-btn svg{width:26px;height:26px}
.float-btn .tip{position:absolute;right:66px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;white-space:nowrap;transition:.2s;box-shadow:var(--shadow)}
.float-btn:hover .tip{opacity:1}
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);grid-template-columns:1fr 1fr 1fr}
.mobile-bar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;font-size:12px;color:var(--muted)}
.mobile-bar a.act{background:var(--red);color:#fff}
.mobile-bar a svg{width:22px;height:22px}
/* ---------- page hero (subpages) ----------
浅色处理:浅色渐变带 + 原图作低透明度纹理(原图仅 194×113,
被放大使用,深色遮罩时代靠压暗藏糊;浅色下改为去色 + 低透明,
糊感被进一步弱化,同时保持品牌氛围。 */
.page-hero{position:relative;padding:calc(var(--headerH) + 60px) 0 70px;overflow:hidden;
background:linear-gradient(180deg,#ffffff 0%,#f4f6f9 100%)}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12;filter:grayscale(1) contrast(1.02)}
.page-hero .content{position:relative;z-index:2;max-width:780px}
.page-hero h1{font-size:clamp(30px,4.4vw,50px);margin:14px 0 12px}
.page-hero p{color:var(--muted);font-size:17px;max-width:620px}
/* banners intro */
.plist-row{display:flex;align-items:center;gap:16px;margin-bottom:30px;padding:22px 0}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.contact-card .k{font-size:13px;color:var(--muted2);letter-spacing:.05em;margin-bottom:4px}
.contact-card .v{font-size:16.5px;color:var(--ink);font-weight:600}
.contact-card .row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-card .row:last-child{border-bottom:none}
.contact-card .ico{width:44px;height:44px;border-radius:11px;background:rgba(230,33,43,.08);border:1px solid rgba(230,33,43,.22);display:flex;align-items:center;justify-content:center;color:var(--red);flex:none}
.contact-card .ico svg{width:20px;height:20px}
/* ---------- 联系电话(2026-09-18 第三十五轮:一行一号) ----------
三行 = 角色胶囊 / 号码(可点 tel:)/「微信同号」/ 对接人职务。
⚠️ .tel-list 的第一列用 max-content ⇒ 三个胶囊自动等宽、号码左边界对齐;
.tel-item 必须 display:contents,把「胶囊 + 正文」提升成该栅格的两列直接子项 ——
若改回普通 flex/grid 子项,列宽各算各的,号码就会参差。 */
.contact-card .tel-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:9px 12px;align-items:center}
.contact-card .tel-item{display:contents}
.contact-card .tel-role{font-size:12.5px;font-weight:600;color:var(--red);background:rgba(230,33,43,.08);border:1px solid rgba(230,33,43,.2);border-radius:999px;padding:2px 10px;line-height:1.5;text-align:center;letter-spacing:.02em}
.contact-card .tel-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px;font-weight:400}
.contact-card .tel-num{font-size:16.5px;font-weight:600;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.contact-card .tel-num:hover{color:var(--red)}
.contact-card .tel-tag{font-size:12.5px;color:var(--muted2)}
.contact-card .tel-person{font-size:13px;color:var(--muted)}
/* ⚠️ nowrap 是必需的:窄屏(375)下文字列挤压时,「复制 / 拨打」会按 CJK 逐字折成
「复」/「制」两行,胶囊变成竖排方块。标签最长只有 4 字,给 nowrap 后由文字列收缩让位。 */
.copy-btn{background:none;border:1px solid var(--line2);color:var(--muted);font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer;margin-left:auto;white-space:nowrap}
.copy-btn:hover{color:var(--ink);border-color:var(--ink)}
/* about / partner blocks */
.about-grid{display:grid;grid-template-columns:1.1fr 1.4fr;gap:50px;align-items:center}
.about-grid .txt h2{margin-bottom:18px}
/* 公司介绍块必须左对齐:.section-head 默认居中,与下方左对齐的正文形成错位
(英文公司名较长会折两行,错位更明显)。同时收一档字号让两行断得更均衡。
层次:眉标 → 公司名(h2)→ 红杆宣言(.company-lead)→ 正文;
motto 原先也是 h2,两个同级标题抢视觉层级,现降为带红杆的 lead 段落。 */
.about-grid .txt .section-head{text-align:left;margin-bottom:26px}
.about-grid .txt .section-head .eyebrow{margin-bottom:14px}
.about-grid .txt .section-head h2.section-title{font-size:clamp(23px,2.5vw,33px);line-height:1.2;letter-spacing:-.02em;text-wrap:balance;margin:0 0 18px}
.about-grid .txt .company-lead{position:relative;margin:0 0 22px;padding:2px 0 2px 16px;border-left:3px solid var(--red);color:var(--ink);font-size:clamp(16px,1.4vw,18px);line-height:1.55;font-weight:700;letter-spacing:-.01em;max-width:34ch}
.about-grid .txt p{color:var(--muted);font-size:16px;line-height:1.8;margin:0 0 16px}
.about-grid .txt p:last-child{margin-bottom:0}
.about-figs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-figs .fig{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.about-figs .fig img{width:100%;height:100%;object-fit:cover}
.about-figs .fig.big{grid-column:1/-1;aspect-ratio:16/8}
/* 资质卡片:4 列等宽等高;标题行数不一时用 min-height 统一占位,让四张卡的描述文字起始线对齐 */
.certs-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cert-card{display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;padding:30px 20px 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:.3s;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.cert-card:hover{border-color:var(--line2);transform:translateY(-4px)}
/* 图标必须给 svg 显式尺寸:本项目所有