/* ==========================================================================
   WALKHORIZON — 官网设计系统 v2
   方向：国际化 / 高端 / 科技感
   参考：日系高端科技站（满屏 hero、大留白、双语微标签、克制的单色 + 单一强调色）
   配色沿用客户确认的深藏青 + 亮青体系，重新定义层级与用法
   ========================================================================== */

/* ---------- 字体（自托管，国内外均可正常加载） ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/inter-300.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url('../fonts/inter-latin-ext-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;src:url('../fonts/inter-latin-ext-600.woff2') format('woff2')}
@font-face{font-family:'Zen Dots';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/zendots-400.woff2') format('woff2')}
@font-face{font-family:'Zen Dots';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;src:url('../fonts/zendots-latin-ext.woff2') format('woff2')}
/* JetBrains Mono 已下线：全站单字体策略，技术标签改用 Inter + 字重/字距区分 */

/* ---------- 设计变量 ---------- */
:root{
  --ink:#060B14;
  --navy:#0A1B36;
  /* 跑马灯两层的字色（全站统一，2026-10-04 用户口径）：
     实体字取页头蓝色的更浅一档，镂空描边字再比实体字浅一点。
     页头是 navy → navy-2 → blue 的 115° 渐变，1440px 视口 y=38px（导航中线）实测阶梯：
       #0A1C39(x=0) → #0C254B(x=208, logo 中点) → #113979(x=688,「首页」右侧)
       → #123F86(x=840) → #164E9C(x=1020) → #1755A4(x=1080) → #1D6EC8(x=1439)
     实体字取 #164E9C；镂空描边取 #3D8BE3（比实体字更浅；描边仅 1px，不宜再浅）。 */
  --marquee-solid:#164E9C;
  --marquee-outline:#3D8BE3;
  --navy-2:#123D82;
  --blue:#1B5BC4;
  --cyan:#1FB8D4;
  --cyan-2:#66DCEE;
  --led:#08CCCD;   /* U 位杆亮灯取样色：色相 180°（实测 180.4°），提高饱和度以保证在浅底上可见 */
  --accent:#F97316;      /* 小节编号标签用橙红，取自 www.weigh2xtech.com 的 --accent */
  --accent-dark:#EA580C; /* 其深色版，用于浅底上的小字 */
  --paper:#F7FAFD;
  --paper-2:#EDF3F9;
  --tile:#F4F5F7;        /* 客户 logo 墙方块底色：非常明亮的浅灰（不是蓝） */
  --tile-hover:#E8EAEE;
  --white:#fff;

  --text:#0F1A2B;
  --text-2:#48586E;
  --text-3:#8494A8;
  --text-inv:#EAF2FB;
  --text-inv-2:#9FB4CE;

  --line:rgba(10,27,54,.12);
  --line-2:rgba(10,27,54,.07);
  --line-inv:rgba(255,255,255,.16);
  --line-inv-2:rgba(255,255,255,.08);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Roboto,Arial,sans-serif;   /* 与 weigh2xtech 完全一致 */
  --mono:var(--font);   /* 等宽字体已下线：全站单一无衬线家族（标题/正文/导航/技术标签均用 Inter） */
  --display:'Zen Dots','Inter','PingFang SC','Microsoft YaHei',system-ui,sans-serif;   /* 与 CKI 同款显示字体 */

  --fs-display:clamp(1.65rem,3.1vw,2.9rem);   /* hero 主标题：按要求整体调小 */
  --fs-h1:clamp(1.8rem,3.4vw,2.85rem);       /* 内页页头标题：同步调小 */
  --fs-h2:clamp(1.8rem,2.5vw,2.25rem);        /* 小节标题：在上一版基础上整体 +4px（1440px 下 32→36px） */
  --fs-hero:clamp(1.75rem,2.64vw,2.375rem);   /* 页级大标题：1440+ 为 38px（介于板块标题 32 与原 display 44.6 之间） */
  --fs-h3:clamp(1.15rem,1.5vw,1.5rem);
  --fs-lead:clamp(1rem,1.15vw,1.2rem);
  --fs-body:1rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-label:.75rem;

  --container:1320px;
  --gutter:clamp(20px,4vw,56px);
  --section-y:clamp(56px,6.2vw,112px);
  --radius:6px;
  --radius-lg:10px;
  --header-h:76px;
  --band-h:clamp(66px,8.25vw,126px);  /* 底部走字带高度（与 weigh2xtech 一致） */
  --edge:max(22px,(100vw - var(--container)) / 2 + var(--gutter));   /* 两侧页边界宽度（实体字区） */
  --hero-pad-b:calc(var(--band-h) + clamp(28px,3.2vw,48px));   /* 正文需让开底部走字带 */
  --statband-gap:22px;                /* 统计条与标签行之间的净间距 */

  --ease:cubic-bezier(.22,.61,.24,1);
  --shadow-s:0 1px 2px rgba(6,11,20,.04),0 8px 24px -12px rgba(6,11,20,.14);
  --shadow-m:0 24px 60px -28px rgba(6,11,20,.34);
}

/* ---------- 无障碍跳转 ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:300;padding:12px 20px;background:var(--ink);color:#fff;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.75;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.18;letter-spacing:-.022em;color:var(--text)}
p{margin:0}
ul,ol{margin:0;padding:0}
::selection{background:rgba(31,184,212,.22)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

/* ---------- 排版 ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
/* 小节编号标签：橙红全大写 + 数字放大加粗（数字用 <b> 承载）。
   2026-09-30 起不再用「03 — TEXT」的破折号写法，也不再画标签前的那道短横线。
   配色按 www.weigh2xtech.com 的做法分深浅底两档：
     浅底用 --accent-dark(#EA580C，对比 3.40:1)，深底用 --accent(#F97316，对比 6.1~7.0:1)。
     亮橙红直接放浅底只有 2.68:1，不达标——参考站自己也是这么分档的。 */
.label{
  display:inline-block;
  /* 17px → 19px：★橘红 #EA580C 在浅底上的理论上限只有 3.54:1（对纯白），永远到不了普通文字的 4.5
     （实测各页 3.1–3.56）。19px 粗体 ≥ WCAG「大号文字」(18.66px 粗体) 门槛 3.0，
     这样**保住品牌橘红本身**，同时达标。若更想要 4.5，需把 --accent-dark 改成更深的橙。 */
  font-family:var(--font);font-size:19px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark);
}
.label b{font-size:1.38em;font-weight:800;letter-spacing:0;line-height:1;vertical-align:-.055em}
/* 深色底改用亮橙红 */
.section--ink .label,.section--navy .label,.solband .label,
.slide--tone-dark .label{color:var(--accent)}
/* 标签前不再画短横线（2026-09-30 用户要求去掉） */
.label::before{display:none}
.lead{font-size:var(--fs-lead);color:var(--text-2);line-height:1.8;max-width:68ch}
.mono{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.08em}
.muted{color:var(--text-3)}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-12{grid-column:span 12}

/* ---------- 区块 ---------- */
.section{padding-block:var(--section-y);position:relative}
.section--paper-2{background:var(--paper-2)}

/* 浅灰小节：底色略加深（原来 #F7FAFD 太白看不出分栏）+ 抽象肌理
   肌理 = 细网点（数据中心/U位阵列意象）+ 右上角极淡青色光晕，远看是"有一点质感的灰" */
.section--paper{
  background-color:#E9EFF7;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(18,61,130,.085) 1.2px, transparent 1.25px),
    radial-gradient(115% 85% at 86% -6%, rgba(31,184,212,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%);
  background-size:26px 26px, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat;
  background-position:0 0, center top, center top;
}
/* 深色底上的小节里，肌理改为浅色网点，避免脏 */
.section--ink.section--paper,.section--navy.section--paper{
  background-color:var(--ink);
  background-image:radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 1.15px, transparent 1.2px);
  background-size:26px 26px;
}
.section--ink{background:var(--ink);color:var(--text-inv)}
.section--navy{background:var(--navy);color:var(--text-inv)}
.section--ink h1,.section--ink h2,.section--ink h3,.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--ink .lead,.section--navy .lead{color:var(--text-inv-2)}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 78%);
}
.section--ink.section--grid::before,.section--navy.section--grid::before{
  background-image:linear-gradient(var(--line-inv-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-inv-2) 1px,transparent 1px);
}
.section > .container{position:relative;z-index:2}
.section-head{max-width:900px;margin-bottom:clamp(36px,5vw,68px)}
.section-head .label{margin-bottom:18px}
.section-title{font-size:var(--fs-h2);font-weight:800;color:var(--navy)}   /* 与首页大标题统一为 logo 深蓝 */
.section-title + .lead{margin-top:16px}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .label{justify-content:center}
.section-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;max-width:none;flex-wrap:wrap}
.section-head--split > div{max-width:820px}
.hr{height:1px;background:var(--line);border:0;margin:0}
.section--ink .hr,.section--navy .hr{background:var(--line-inv-2)}

/* ---------- 按钮 ---------- */
.btn{
  --btn-bg:var(--cyan);--btn-fg:#04222B;--btn-bd:transparent;
  display:inline-flex;align-items:center;gap:.7em;
  padding:15px 30px;border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  border-radius:100px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn::after{content:"";width:16px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.btn:hover::after{width:26px}
/* 通用强调按钮（主 CTA，如「客户案例 / Cases」）：品牌深蓝→亮青渐变实心 + 辉光，浅底深底都醒目 */
.btn--accent{
  --btn-bg:linear-gradient(112deg,var(--navy-2) 0%,var(--blue) 52%,var(--cyan) 100%);
  --btn-fg:#fff;--btn-bd:transparent;
  padding:16px 34px;
  box-shadow:0 12px 26px -12px rgba(18,61,130,.6),0 2px 6px -2px rgba(6,11,20,.18);
}
.btn--accent::after{content:"→";width:auto;height:auto;background:none;font-size:1.05em;line-height:1;transition:transform .3s var(--ease)}
.btn--accent:hover{box-shadow:0 18px 34px -14px rgba(27,91,196,.62),0 2px 6px -2px rgba(6,11,20,.2);transform:translateY(-2px)}
.btn--accent:hover::after{width:auto;transform:translateX(4px)}
.btn--accent:active{transform:translateY(0)}
.btn--accent:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:var(--line-inv)}
.btn--ghost:hover{--btn-bg:rgba(255,255,255,.08);--btn-bd:rgba(255,255,255,.4)}
.btn--line{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line)}
.btn--line:hover{--btn-bg:var(--text);--btn-fg:#fff;--btn-bd:var(--text)}
.btn--dark{--btn-bg:var(--ink);--btn-fg:#fff}
.btn--sm{padding:11px 22px;font-size:var(--fs-xs)}
.link-arrow{
  display:inline-flex;align-items:center;gap:.55em;font-size:var(--fs-sm);font-weight:600;
  color:var(--text);border-bottom:1px solid var(--line);padding-bottom:4px;transition:.3s var(--ease);
}
.link-arrow::after{content:"→";transition:transform .3s var(--ease)}
.link-arrow:hover{border-color:var(--text)}
.link-arrow:hover::after{transform:translateX(4px)}
.section--ink .link-arrow,.section--navy .link-arrow{color:#fff;border-color:var(--line-inv)}
.section--ink .link-arrow:hover,.section--navy .link-arrow:hover{border-color:#fff}
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--header-h);display:flex;align-items:center;
  /* 配色与「联系我们」CTA 横条一致：深藏青 → 亮蓝渐变 + 右侧青色光斑 */
  background-color:var(--navy);
  background-image:
    radial-gradient(54% 220% at 97% 50%,rgba(31,184,212,.30),transparent 62%),
    linear-gradient(115deg,var(--navy) 0%,var(--navy-2) 55%,var(--blue) 100%);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.header-in{display:flex;align-items:center;gap:clamp(16px,3vw,44px);width:100%}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* 页头 logo 图片（白底补丁）已于 2026-09-30 按用户要求整体移除：
   .brand img 原为 height:34px;background:#fff;padding:5px 9px;border-radius:4px
   —— logo 自带的「WALK HORIZON」是黑字，放深色页头必须垫白底，看起来像一块补丁；
   且它与旁边的文字 WALKHORIZON 重复。现只保留文字品牌。 */
.brand-txt{display:flex;flex-direction:column;line-height:1.15;color:#fff}
/* 品牌字号：页头高 76px（>1040px）/ 64px（≤1040px），原 15px+9.5px 只占 28px 显得空。
   现按页头高度定：桌面主名 22px / 副名 12px，两行合计约 39px，四周留白约 18px；
   随视口收窄用 clamp 平滑降到 16px / 10px，不写死单一像素值。 */
.brand-txt b{font-size:clamp(16px,1.03vw + 7.2px,22px);font-weight:600;letter-spacing:.06em;line-height:1.15}
.brand-txt span{font-family:var(--font);font-size:clamp(10px,.35vw + 7px,12px);letter-spacing:.18em;text-transform:uppercase;color:var(--text-inv-2);line-height:1.25}
.main-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-item{position:relative}
.nav-item--drawer{display:none}   /* 仅窄屏抽屉显示（页头按钮在窄屏收起） */
.nav-item > a{
  display:block;padding:10px 16px;color:rgba(255,255,255,.82);font-size:17px;font-weight:600;
  border-radius:100px;transition:.25s var(--ease);white-space:nowrap;
}
.nav-item > a:hover,.nav-item > a.is-active{color:#fff;background:rgba(31,184,212,.22)}
.nav-sub{
  position:absolute;top:calc(100% + 14px);left:0;min-width:300px;max-width:min(400px,calc(100vw - 32px));padding:10px;
  max-height:calc(100vh - var(--header-h) - 46px);overflow-y:auto;overscroll-behavior:contain;
  background:rgba(10,27,54,.97);backdrop-filter:blur(20px);
  border:1px solid var(--line-inv);border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s var(--ease);display:grid;gap:2px;
}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
/* 靠右的导航项下拉改为右对齐，避免伸出视口 */
.main-nav .nav-item:nth-last-child(-n+2) .nav-sub{left:auto;right:0}
.nav-sub a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:var(--radius);color:var(--text-inv-2);font-size:var(--fs-sm);transition:.2s var(--ease);
}
/* 二级菜单＝该页的小节（01/02/03…）：编号窄栏 + 标题（可换行）+ 右侧箭头。
   小节标题有长有短（首页是整句），故限宽并允许换行，避免下拉被撑得过宽。 */
.nav-sub a b{
  flex:0 0 auto;font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--cyan);opacity:.9;min-width:20px;
}
.nav-sub a span{flex:1;min-width:0;line-height:1.45}
/* 附加的「其它页面」项（无编号）：上方插一条分隔线，与小节项区分 */
.nav-sub-sep{display:block;height:1px;margin:7px 8px;background:var(--line-inv)}
.nav-sub a:hover{background:rgba(31,184,212,.18);color:#fff}
.nav-sub a::after{content:"↗";font-size:12px;opacity:.45}
.header-actions{display:flex;align-items:center;gap:14px;margin-left:8px}
.lang-sw{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--text-inv-2)}
.lang-sw a{color:inherit;transition:.2s}
.lang-sw a:hover{color:#fff}
.lang-sw .sep{opacity:.4}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:12px;margin-left:auto}
.burger span{display:block;height:1.5px;background:#fff;margin:5px 0;transition:.3s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;align-items:flex-end;background:var(--ink);color:#fff;overflow:hidden}
.hero.is-on-light{background:var(--white)}
.hero-watermark{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;
  opacity:.14;filter:grayscale(1) contrast(.92) brightness(1.14)}   /* 浅灰机房照片水印 */
.hero--carousel{height:max(96svh,700px)}
.hero--carousel .slides{position:absolute;inset:0}   /* 叠放式：每张绝对定位，用透明度淡入淡出 */
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;overflow:hidden;display:block;background-repeat:no-repeat;
  opacity:0;visibility:hidden;transition:opacity 1.4s var(--ease),visibility 1.4s var(--ease)}
.hero .slide.is-active{opacity:1;visibility:visible}
/* 白底产品图：整图靠右展示（不放大、不裁切），左侧留白给文字 —— 苹果式产品首屏 */
.hero .slide--tone-light{background-color:transparent;background-size:contain;background-position:104% 52%}   /* 透明以露出底部水印 */
/* 竖版实拍（如机房特写）：按高度铺满、靠右，左侧用深色底承托文字 */
.hero .slide--portrait{background-color:#fff;background-image:none !important}   /* 照片改用容器内元素 */
.hero-photo{
  position:absolute;top:0;bottom:0;right:var(--gutter);width:min(58%,780px);z-index:2;
  margin:0;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;
}
.hero-photo img{width:auto;height:auto;max-width:100%;max-height:76%;object-fit:contain}
@media (max-width:900px){
  .hero-photo{width:66%;opacity:.92}
  .hero-photo img{max-height:64%}
}
/* 蒙板：桌面用「左浅右透」横向版；≤900px 文字占满整宽，改用「自下而上」竖屏版。
   两套渐变由生成器以 --veil / --veil-narrow 内联（见 generator.mjs 的 VEIL / VEIL_NARROW）。 */
.slide-veil{position:absolute;inset:0;display:block;pointer-events:none;background-image:var(--veil)}
/* 平板/窄笔记本（≤1180）：文字仍在左 64%，但桌面横向蒙板到文字右端只剩约 5% 白，
   实测 1024px 下标题最右 11px 压在深色机柜上（对比度 1.20:1）。加一层竖向柔化「补强」。
   注意用 ::after 叠加而不是替换，横向蒙板继续保留。 */
@media (max-width:1180px){
  .slide-veil::after{content:"";position:absolute;inset:0;background-image:var(--veil-narrow)}
}
/* 竖屏（≤900）：文字占满整宽，直接用竖向蒙板替代横向，并撤掉补强层避免叠加过重 */
@media (max-width:900px){
  .slide-veil{background-image:var(--veil-narrow,var(--veil))}
  .slide-veil::after{display:none}
}
/* 竖屏（≤900）· 浅色幻灯片（首页 hero 的杆体渲染图）：
   原设计把整张图当背景、再用「自下而上」的白色蒙板压住以保证文字对比度，
   但该图是 2.46 的横构图，390px 宽下只有约 390x158 一条，正好落在蒙板最白处，
   被压成几乎看不见的"水印"；而英文标题比中文多两行、文字块高 115px，
   一旦放宽蒙板就必然与图片重叠（实测重叠 77px）。固定百分比的蒙板两种语言无法兼顾。
   改为结构性做法：图片作为**独立的清晰图片带**铺在顶部（contain，高度 = 100vw / 2.4623），
   文字用 padding-top 让到图片下方，落在白色底上，两者不再重叠。
   比例 2.4623 = images/u-strip-product-03.jpg 的 1598/649，换图需同步改这个数字。 */
@media (max-width:900px){
  /* 权重必须到 .hero.hero--carousel：文件后面 ≤1040 断点里还有一条同名的
     .hero--carousel{height:max(88svh,620px)}，同权重且更靠后会把它盖掉。
     ⚠️ 幻灯片是绝对定位的（.slides/.slide 都是 absolute），所以 .hero 用 height:auto
     永远量到 0，只能靠 min-height 兜住「图片带 + 文字 + 上下留白」。
     500px 是移动端文字块的预算（英文标题 5 行时实测 496px），换标题需同步调整。
     窄屏下 hero 可能比视口高一点（360x780 约高 46px），滚动一下即可看全。 */
  .hero.hero--carousel{
    height:auto;
    min-height:calc(var(--header-h) + 100vw / 2.4623 + 26px + 500px + var(--hero-pad-b));
  }
  .hero .slide--tone-light{
    background-color:#fff;                       /* 图片以下的区域铺白，供深蓝标题使用 */
    background-position:50% var(--header-h);     /* 图片紧贴页头下沿，不被固定页头遮住 */
    background-repeat:no-repeat;
  }
  .hero .slide--tone-light .slide-veil{display:none}
  /* height:auto —— 否则 .hero-in 的 100% 会把高度锁在 min-height 上，
     文字用 justify-content:flex-end 从底部往上溢出，padding-top 形同虚设。 */
  .hero--carousel .hero-in{height:auto;padding-top:calc(var(--header-h) + 100vw / 2.4623 + 26px)}
}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .veil{position:absolute;inset:0}
.hero-in{
  position:relative;z-index:3;height:100%;width:100%;max-width:var(--container);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:flex-end;   /* 文案统一贴底，中段留给走字带 */
  padding:calc(var(--header-h) + 30px) var(--gutter) var(--hero-pad-b);   /* 上下收紧，中段留给走字带 */
}
/* 文字列宽度：桌面给右侧产品图让位，取容器 64%；窄屏必须占满 ——
   实测 390px 屏下 64% 只有 224px、360px 屏只有 205px，标题被挤成 5 行、标签堆成 179px 高。
   用百分比而非固定 px，跟随容器自适应。 */
.hero-top,.hero-bottom{max-width:min(880px,64%)}
@media (max-width:900px){.hero-top,.hero-bottom{max-width:100%}}
.hero-bottom > * + *{margin-top:14px}
.hero-eyebrow{margin-bottom:24px}
.hero-title{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.022em;line-height:1.18;color:var(--navy);text-wrap:balance}   /* 式样对齐板块标题；颜色取 logo 区深蓝 #0A1B36 */
/* 导语：**不用 white-space:nowrap、不用 width:max-content**，一律自动换行；
   宽度用 min(100%,62ch) 相对度量（ch 随字号走，不写死像素）；字号 clamp 自适应，
   1440px 下约 16.4px。 */
.hero-lead{margin-top:20px;max-width:min(100%,62ch);font-size:clamp(15px,.55vw + 8.5px,17.5px);color:rgba(255,255,255,.78);line-height:1.8}
/* 标签行：默认**不强制一行**，允许自动换行，宽度跟随父级
   （窄屏若用 max-content 会撑出视口宽度，故默认不用）。
   但 .hero-bottom 另有 min(880px,64%) 上限，1440px 下只有 773px；
   英文三枚 chip 合计约 1000px，会被折到第二行。
   故在容器确实放得下的宽度（实测临界 ≈990px，取 1024px 留约 44px 余量）解除上限、强制单行；
   再窄则维持换行，不会溢出视口。 */
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;max-width:100%}
@media (min-width:1024px){
  .hero-chips{flex-wrap:nowrap;width:max-content;max-width:none}
}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  border:1px solid var(--line-inv);background:rgba(6,11,20,.36);backdrop-filter:blur(10px);
  font-family:var(--font);font-size:clamp(12.5px,.35vw + 10px,15px);letter-spacing:.06em;color:rgba(255,255,255,.92);
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.slide-text{margin-top:18px}
.slide-word{font-size:clamp(1.35rem,2.1vw,1.9rem);font-weight:600;letter-spacing:.02em;color:#fff;margin-bottom:8px}
.slide-desc{color:var(--accent);font-size:clamp(15px,.6vw + 10.4px,19px);font-weight:700;max-width:min(100%,52ch)}   /* 按要求加粗 + 放大 4px + 橘红 */
.slide-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:14px}
.slide-points li{position:relative;padding-left:18px;font-size:var(--fs-sm);color:rgba(255,255,255,.82)}
.slide-points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--cyan)}

/* 亮底幻灯片（白底产品图）：文字转深色，蒙板几乎清零 —— 全部由 CSS 决定，不依赖 JS */
.slide--tone-light .hero-title,.slide--tone-light .slide-word{color:var(--navy)}   /* 与页头同色 */
.slide--tone-light .hero-lead,.slide--tone-light .slide-desc,.slide--tone-light .slide-points li{color:var(--text-2)}
.slide--tone-light .slide-desc{font-weight:700;color:var(--accent-dark)}   /* 浅色幻灯片：橘红用深色版保证对比度 */
.slide--tone-light .label{color:var(--accent-dark)}
.slide--tone-light .chip{background:rgba(255,255,255,.72);border-color:var(--line);color:var(--text)}
.slide--tone-light .chip::before{background:var(--navy-2)}
.slide--tone-light .btn--ghost{--btn-fg:var(--text);--btn-bd:var(--line)}

/* ---------- hero 横向走字带（镂空描边字；压到照片上那一段为实心白字） ---------- */
.hero-marquee{
  position:absolute;left:0;right:0;bottom:0;height:var(--band-h);z-index:2;pointer-events:none;
  display:flex;align-items:center;   /* 带内垂直居中，与 weigh2xtech 一致 */
  overflow:clip;white-space:nowrap;
  /* 独立横条：两侧页边界处接近实底，中间透出底图（与 weigh2xtech 同构） */
  background:linear-gradient(90deg,
    rgba(255,255,255,.97) 0, rgba(255,255,255,.97) var(--edge),
    rgba(255,255,255,.42) var(--edge), rgba(255,255,255,.42) calc(100% - var(--edge)),
    rgba(255,255,255,.97) calc(100% - var(--edge)), rgba(255,255,255,.97) 100%);
  /* 注：这里不做异或混合，描边色直接生效（否则浅蓝会被反相成偏橙色） */
  transform:translateZ(0);
}
.hero-marquee--solid{
}
.hero-marquee--solid .hero-marquee-txt{
  color:var(--marquee-solid);-webkit-text-stroke:0;text-stroke:0;   /* 两侧实体字（非镂空） */
  text-shadow:none;
}
.hero-marquee-track{display:flex;width:max-content;animation:hero-marquee-a 100s linear infinite}   /* 时长由 JS 按 100px/s 恒定线速度设定 */
.hero-marquee-txt{
  display:block;flex:0 0 auto;padding-right:clamp(40px,6vw,96px);
  font-family:'Zen Dots','Inter',var(--font);font-weight:400;   /* 与 weigh2xtech 完全一致 */
  font-size:clamp(33.6px,6.6vw,96px);
  letter-spacing:.16em;line-height:1;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px var(--marquee-outline);text-stroke:1px var(--marquee-outline);   /* 描边透明字（镂空），比实体字更浅 */
}
/* 内页（.page-hero）的底部走字带：改成**纯白实底**。
   原因：走字带底色本来是「两侧 .97 白、中间 42% 白」——中间那 42% 是故意透出底图的；
   首页的底图是浅色产品图，透出来仍近乎白，所以看着是纯白；
   但内页底图换成照片后，中间透出来的就是照片的灰度，成了「渐变灰」。
   用户 2026-10-04 要求内页与首页/产品页统一为纯白。 */
.page-hero .hero-marquee{background:#fff}

/* 中间段：镂空描边字 */
.hero-marquee--outline{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent var(--edge),#000 var(--edge),#000 calc(100% - var(--edge)),transparent calc(100% - var(--edge)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,transparent var(--edge),#000 var(--edge),#000 calc(100% - var(--edge)),transparent calc(100% - var(--edge)),transparent 100%);
}
/* 两侧页边界：镂空 → 实体字（与 weigh2xtech 同构） */
.hero-marquee--solid{
  z-index:3;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--edge),transparent var(--edge),transparent calc(100% - var(--edge)),#000 calc(100% - var(--edge)),#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 var(--edge),transparent var(--edge),transparent calc(100% - var(--edge)),#000 calc(100% - var(--edge)),#000 100%);
}
/* 轨道整体从 0 移到 -50%：内容为两份完全相同的一组，因此无缝 */
@keyframes hero-marquee-a{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .hero-marquee-track{animation:none} }
/* 矮屏（13 寸笔记本等）字号略降，保证不与标题重叠 */
@media (max-height:760px) and (min-width:901px){
  :root{--band-h:clamp(58px,7vw,96px)}   /* 矮屏略微收窄走字带 */
}

/* 圆点（固定层，不随图片滑动） */
.hero-dots{position:absolute;inset:auto 0 calc(var(--band-h) + 18px);z-index:4;pointer-events:none}
.slide-dots{display:flex;align-items:center;justify-content:flex-end;gap:10px;pointer-events:auto}
.slide-dots .dot{width:36px;height:2px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.32);transition:.35s var(--ease)}
.slide-dots .dot:hover{background:rgba(255,255,255,.62)}
.slide-dots .dot.is-active{background:var(--cyan);width:60px}
.hero.is-on-light .slide-dots .dot{background:rgba(10,27,54,.28)}
.hero.is-on-light .slide-dots .dot.is-active{background:var(--navy-2)}
.scroll-cue{
  position:absolute;right:var(--gutter);bottom:clamp(90px,10vw,140px);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:12px;writing-mode:vertical-rl;
  font-family:var(--font);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
.hero.is-on-light .scroll-cue{color:rgba(10,27,54,.55)}
.hero.is-on-light .scroll-cue::after{background:linear-gradient(to bottom,rgba(10,27,54,.5),transparent)}

/* ---------- 数字带 ---------- */
.statband{position:relative;z-index:5;margin-top:var(--statband-gap)}   /* 走字带占满 hero 底部，统计条改为贴在其下 */
.statband-in{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-m);overflow:hidden;
}
.statband .stat{padding:clamp(24px,2.6vw,36px) clamp(20px,2.4vw,34px);border-right:1px solid var(--line)}
.statband .stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font);font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--navy-2);line-height:1.1}
.stat span{display:block;margin-top:8px;font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.statband--inline{margin-top:clamp(28px,3vw,44px)}
.statband--inline .statband-in{grid-template-columns:repeat(auto-fit,minmax(0,1fr));justify-content:stretch}   /* 一排放完，不换行 */
@media (max-width:760px){.statband--inline .statband-in{grid-template-columns:repeat(2,1fr)}}
.statband--inline .statband-in{box-shadow:none;background:var(--paper)}
.section--ink .statband--inline .statband-in,.section--navy .statband--inline .statband-in{background:rgba(255,255,255,.04)}
.statband--dark .statband-in{background:rgba(10,27,54,.74);border-color:var(--line-inv)}
.statband--dark .stat{border-color:var(--line-inv-2)}
.statband--dark b{color:#fff}
.statband--dark span{color:var(--text-inv-2)}

/* ---------- 特性行 ---------- */
.features{display:grid;gap:clamp(44px,5vw,88px)}
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:stretch}
.feature--rev .feature-media{order:2}
/* 媒体列：高度由文字列决定（图片绝对定位不撑高），框内完整显示图片 → 左右高度自然齐平 */
.feature-media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-2);
  box-shadow:var(--shadow-s);
  min-height:clamp(260px,30vh,380px);
  max-height:640px;
}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-media.is-fit img,.feature-media--tall img{object-fit:contain;padding:18px}
/* 线稿（static/img/line-*.svg）：按图片自身比例给媒体框定高。
   默认媒体框是 min-height:clamp(260px,30vh,380px) 的宽扁框（1440px 下约 589×300 = 1.96），
   线稿是 9:7 竖构图，cover 会纵向裁掉 23%、contain 又会左右各空 100px。
   用生成器已经写在 style 上的 --ar（如 900/700）把框定成同一比例，线稿正好铺满。 */
.feature-media--fit-box{aspect-ratio:var(--ar);min-height:0;max-height:none;align-self:start}
.feature-media--fit-box img{background:none;padding:0}
/* 可点击图片（如高德地图截图）：整块是链接，底部常驻一条图注/署名 */
.feature-media.is-linkable .media-link{display:block;position:relative;width:100%;height:100%;cursor:pointer}
.feature-media.is-linkable .media-link img{transition:transform .9s var(--ease)}
.feature-media.is-linkable .media-link:hover img{transform:scale(1.015)}
.media-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;font-size:var(--fs-xs);line-height:1.4;color:#fff;
  background:linear-gradient(to top,rgba(6,11,20,.82) 0%,rgba(6,11,20,.52) 62%,rgba(6,11,20,0) 100%)}
.media-bar .mb-cap{opacity:.92}
.media-bar .mb-go{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;font-style:normal}
.feature-media.is-linkable .media-link:hover .mb-go{color:var(--cyan)}
/* 窄屏：图注条会挤成两行，放开换行 */
@media (max-width:640px){.media-bar{flex-direction:column;align-items:flex-start;gap:4px}}
.feature-media--tall{min-height:clamp(360px,44vh,500px)}   /* 竖版技术图：保证标注可读 */
@media (max-width:1080px){.feature-media{min-height:0;max-height:none;aspect-ratio:4/3}}
.feature-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.feature:hover .feature-media img{transform:scale(1.03)}
.feature-no{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--cyan);display:block;margin-bottom:18px}
.feature-body h3{font-size:var(--fs-h3);margin-bottom:14px}
.feature-body p{color:var(--text-2);max-width:58ch}
.section--ink .feature-body p,.section--navy .feature-body p{color:var(--text-inv-2)}
.spec-list{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.section--ink .spec-list,.section--navy .spec-list{border-color:var(--line-inv-2)}
.spec-list li{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.section--ink .spec-list li,.section--navy .spec-list li{border-color:var(--line-inv-2)}
.spec-list li b{font-family:var(--font);font-weight:500;font-variant-numeric:tabular-nums;color:var(--cyan);min-width:76px;letter-spacing:.04em}
.spec-list li span{color:var(--text-2)}
.section--ink .spec-list li span,.section--navy .spec-list li span{color:var(--text-inv-2)}

/* ---------- 通栏方案带 ---------- */
.solband{position:relative;min-height:min(86svh,760px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.solband-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.6}
.solband::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,11,20,.94) 0%,rgba(6,11,20,.6) 45%,rgba(6,11,20,.22) 100%);z-index:1}
.solband-in{position:relative;z-index:2;width:100%;max-width:var(--container);margin-inline:auto;padding:0 var(--gutter) clamp(48px,7vw,92px)}
.solband h2{font-size:var(--fs-h2);color:#fff;max-width:26ch}
.solband p{margin-top:18px;color:rgba(255,255,255,.72);max-width:62ch}
.solband .label{margin-bottom:20px}

/* ---------- 卡片 ---------- */
.cards{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{position:relative;padding:clamp(22px,2.2vw,30px);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);transition:.4s var(--ease);overflow:hidden}
/* 底衬线稿（static/img/card-art-*.svg，自绘）：**方框底部**出血（用户 2026-09-30 由右上角改为底部）、低对比科技线图，
   由内容字段 art 开启（generator 加 card--art-<name>）。stroke-opacity 已写进 SVG，
   最深处约 #C2E9F1，深色正文压在上面仍有 15:1 以上对比度。 */
.card--art{background-repeat:no-repeat;background-position:right -18px bottom -14px;background-size:80% auto}
.card--art-asset{background-image:url("../img/card-art-asset.svg")}
.card--art-uspace{background-image:url("../img/card-art-uspace.svg")}
.card--art-power{background-image:url("../img/card-art-power.svg")}
.card--art-cooling{background-image:url("../img/card-art-cooling.svg")}
/* 单列时（卡片变成又宽又矮）底衬若仍按宽度 80% 缩放，会高过整张卡、把正文全盖住
   （实测 560px：卡 515×203，底衬 412×301）→ 窄屏改为按**高度**定尺寸 */
@media (max-width:640px){
  .card--art{background-size:auto 52%;background-position:right -10px bottom -8px}
}
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card-no{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.16em;color:var(--text-3);display:inline-block;margin:0 .55em 0 0}
.card h3{font-size:1.0625rem;font-weight:800;margin-bottom:10px}
.card p{font-size:var(--fs-sm);color:var(--text-2)}
.card img{margin:-4px 0 20px;border-radius:var(--radius);aspect-ratio:16/10;object-fit:cover;width:100%}
.card-link{display:inline-flex;align-items:center;gap:.5em;margin-top:18px;font-size:var(--fs-sm);font-weight:600;color:var(--navy-2)}
.card-link::after{content:"→";transition:transform .3s var(--ease)}
.card-link:hover::after{transform:translateX(4px)}
.section--ink .card,.section--navy .card{background:rgba(255,255,255,.04);border-color:var(--line-inv-2)}
.section--ink .card h3,.section--navy .card h3{color:#fff}
.section--ink .card p,.section--navy .card p{color:var(--text-inv-2)}
.section--ink .card-no,.section--navy .card-no{color:rgba(255,255,255,.35)}
.cards--one{grid-template-columns:1fr}
.cards--one .card{display:grid;grid-template-columns:auto 1fr;gap:10px 34px;align-items:baseline}

/* ---------- 规格表 ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:560px}
th{background:var(--navy);color:#fff;text-align:left;font-weight:500;padding:15px 20px;font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
td{padding:14px 20px;border-top:1px solid var(--line);color:var(--text-2);vertical-align:top;font-variant-numeric:tabular-nums}
td:first-child{color:var(--text);font-weight:500}
tbody tr:hover td{background:var(--paper)}

/* 认证和标准页（2026-10-04 用户口径）：所有配图**按原图比例完整展示**，且不做任何动效。
   该页四张图比例差异很大（1.33 / 2.0 / 2.84），沿用固定 4:3 框会裁切或留白；
   故媒体框直接取图片自身比例（生成器的 ratioAttr 把它写成内联 --ar）。
   选择器落到 <main class="page page-certificates">，不影响其它页面。 */
.page-certificates .feature{align-items:start}
.page-certificates .feature-media{
  aspect-ratio:var(--ar,4/3);max-height:none;min-height:0;
}
.page-certificates .gallery figure{aspect-ratio:var(--ar,4/3)}
.page-certificates .feature-media img,
.page-certificates .gallery figure img{object-fit:contain;transition:none}
.page-certificates .feature:hover .feature-media img{transform:none}
/* 关掉进场/悬停动效 */
.page-certificates .rv,
.page-certificates .gallery,
.page-certificates .feature,
.page-certificates .feature-media{
  opacity:1!important;transform:none!important;transition:none!important;animation:none!important;
}

/* ---------- 画廊 ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(12px,1.4vw,20px)}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper-2);cursor:zoom-in}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;inset:auto 0 0;padding:14px 16px;font-size:var(--fs-xs);color:#fff;background:linear-gradient(to top,rgba(6,11,20,.86),transparent);opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.gallery figure:hover figcaption{opacity:1;transform:none}
/* 图片一律"完整显示"：比例与展示框差得多时用 contain，绝不裁切内容 */
.gallery figure.is-fit img,.gallery figure.is-tall img{object-fit:contain;background:#fff;padding:10px}
.gallery figure.is-tall img{aspect-ratio:3/4}
.card img.is-fit{object-fit:contain;background:var(--paper);padding:14px}
.feature-media.is-fit img,.feature-media--tall img{object-fit:contain;background:var(--paper);padding:18px}
/* 透明底技术图（PNG）：去掉白底框与内边距，直接坐在栏目底色上，并整体放大 20% */
.feature-media.is-bare{background:transparent;box-shadow:none;overflow:visible;border-radius:0}
 .feature .feature-media.is-bare img{background:transparent;padding:0}
/* 用户 2026-09-30：这张图「不需要动效」+「裁切上下白边，让图片整体高度变小」。
   白边的成因不是图片本身（内容纵向顶满、裁不出透明边），而是 .feature-media 的
   min-height（clamp(260px,30vh,380px)）把容器撑高，图片按 contain 只画到自身比例的高度，
   差值就成了上下空边（1440×1000 实测容器 300px vs 图片绘制 237px，空 63px；窗口更高时空 140px+）。
   所以改成：bare 图容器不再有 min/max-height，图片回到文档流按自身比例占位 —— 空边归零。 */
.feature .feature-media.is-bare{min-height:0;max-height:none}
.feature .feature-media.is-bare img{position:static;height:auto;aspect-ratio:auto;object-fit:contain;transform:none}
/* 关掉默认的悬停放大；is-zoom（选择器多一个类）仍然可用 */
.feature:hover .feature-media.is-bare img{transform:none}
.feature .feature-media.is-bare.is-zoom img{transform:scale(1.2)}   /* 只有 is-zoom 才放大 20% */
.feature:hover .feature-media.is-bare.is-zoom img{transform:scale(1.24)}
.feature-media--tall img{aspect-ratio:3/4}

/* ---------- 栏目视频（滚动到可视区自动播放；点击整块 → 新窗口放高清原片） ----------
   媒体列高度由文字列决定（.feature 是 align-items:stretch），视频用 contain 放进深色框，
   与原来那张图（is-fit → contain）的显示方式一致，且**不会裁掉视频顶部的 UI 栏**。
   不加 controls：原生控件会截走点击，而这里整块都要可点。 */
.feature-media--video{background:#0A1B36;box-shadow:var(--shadow-m)}
.feature-media--video .fv-link{display:block;position:absolute;inset:0;cursor:pointer}
.feature-media--video video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fv-badge{
  position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:100px;background:rgba(6,11,20,.62);backdrop-filter:blur(8px);
  color:#fff;font-size:var(--fs-xs);letter-spacing:.04em;pointer-events:none;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.fv-badge svg{flex:0 0 auto}
.feature-media--video .fv-link:hover .fv-badge{background:var(--accent);transform:translateY(-2px)}
.feature-media--video .fv-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.feature-media--video .fv-link:hover .fv-badge{transform:none}}
/* 上文下图版式：图片等宽整齐排列 */
.gallery--grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.gallery--grid figure{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.gallery--grid img{aspect-ratio:4/3;object-fit:contain;padding:12px}
.gallery--grid figure.is-tall img{aspect-ratio:3/4}
.gallery--doc img{aspect-ratio:3/4;background:#fff;object-fit:cover;border:1px solid var(--line)}
/* 横长图（客户 logo 墙 / PPT 图）：整幅铺满、绝不裁切 */
.gallery--wide{grid-template-columns:1fr;gap:clamp(22px,2.6vw,40px);justify-items:center}
.gallery--wide figure{width:80%;max-width:80%;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.gallery--wide img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain;transform:none}
.gallery--wide figure:hover img{transform:none}
/* 单图通栏：正方形衬底整幅展示，不裁切、不缩放变形（客户 logo 墙） */
.gallery.gallery--single{grid-template-columns:1fr;justify-items:center}
.gallery.gallery--single figure{width:100%;max-width:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);cursor:zoom-in}
.gallery.gallery--single img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain;transform:none;padding:0}
/* 单图宽度占比：内容里写 imgWidth:0.75 → 生成器在 gallery 上输出 --img-w:0.75。
   未写时 var 取默认 1 → max-width:100%，与原来的 max-width:none 等价，不影响其它节。
   窄屏不限制（保持满宽），避免手机上把图缩得过小。 */
@media (min-width:901px){.gallery.gallery--single figure{max-width:calc(100% * var(--img-w,1))}}
.gallery.gallery--single figure:hover img{transform:none}
.gallery--tall img{aspect-ratio:3/4}

/* ---------- logo 墙（等宽等高方块 · 明亮浅灰底，用户 2026-09-30 指定，参照 Digitalor 版式） ---------- */
/* 用 flex 而非 grid：31 个 logo 除不尽列数时，最后一行不满会自动居中，不会孤零零靠左 */
.logowall{
  --lw-gap:clamp(10px,1.1vw,16px);
  --lw-cols:5;
  --lw-cell:calc((100% - (var(--lw-cols) - 1) * var(--lw-gap)) / var(--lw-cols));
  --lw-span:1;
  --lw-ar:1/1;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--lw-gap);justify-content:center;
}
.logowall figure{
  flex:0 0 calc(var(--lw-span) * var(--lw-cell) + (var(--lw-span) - 1) * var(--lw-gap));
  max-width:calc(var(--lw-span) * var(--lw-cell) + (var(--lw-span) - 1) * var(--lw-gap));
  margin:0;display:grid;place-items:center;aspect-ratio:var(--lw-ar);overflow:hidden;
  padding:clamp(10px,1.2vw,18px);
  background:var(--tile);border:1px solid var(--line-2);border-radius:var(--radius);
  transition:.35s var(--ease);
}
.logowall figure:hover{background:var(--tile-hover);border-color:var(--line)}
/* 方框高度由 aspect-ratio 决定，图片取方框内容区的百分比尺寸 ——
   不能用 max-height:100%（会形成百分比高度循环，把方框撑高、方框就不等高了） */
.logowall img{
  width:calc(100% * var(--fit,1));height:calc(100% * var(--fit,1));
  object-fit:contain;
}
@media (max-width:1180px){.logowall{--lw-cols:4}}
@media (max-width:900px){.logowall{--lw-cols:3}}
@media (max-width:620px){.logowall{--lw-cols:2}}
/* 末行只剩一个 logo 时让它占两格、比例改 2.1:1 —— 宽度翻倍，字才读得出来。
   `:last-child:nth-child(Nn+1)` =「最后一个是本行第一个」= 该行落单；N 必须与上面的 --lw-cols 对齐。
   注：N=4 时 31%4=3，末行不落单，故 4 列断点没有这条规则。 */
@media (min-width:1181px){.logowall figure:last-child:nth-child(5n+1){--lw-span:2;--lw-ar:2.1/1}}
@media (min-width:621px) and (max-width:900px){.logowall figure:last-child:nth-child(3n+1){--lw-span:2;--lw-ar:2.1/1}}
@media (max-width:620px){.logowall figure:last-child:nth-child(2n+1){--lw-span:2;--lw-ar:2.1/1}}
.section--ink .logowall figure,.section--navy .logowall figure{
  background:var(--line-inv-2);border-color:var(--line-inv-2);
}
.section--ink .logowall figure:hover,.section--navy .logowall figure:hover{background:var(--line-inv)}

/* ---------- logo 跑马灯（用户 2026-10-04：由静态网格改为滚动跑马灯，单元缩到网格版的 1/4） ----------
   容器用独立的 .logomarquee（不套 .logowall），以免和上面网格那套 :last-child:nth-child() 规则打架。
   --lm-size 是单元边长，改这一个变量就能整体调大小（取值说明见下方 .logomarquee 内注释）。 */
.logomarquee{
  --lm-size:clamp(52px,5.6vw,80px);          /* 单元边长：网格版 1440px 下 229px。沿革：114px（一屏 9.8 个）→ 68px（用户要「延绵不绝」，一屏 15.6 个）
     → **80px（用户 2026-10-04 又说「稍微大一点」）**。
     若按边长 1/4（58px）logo 会读不出来（用户此前明确要求过可读性）。改这一个变量即可切换。 */
  --lm-gap:clamp(6px,.7vw,10px);
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.lm-track{display:flex;gap:var(--lm-gap,14px);width:max-content;animation:pm-scroll 60s linear infinite}
.logomarquee:hover .lm-track{animation-play-state:paused}
.lm-track figure{
  margin:0;flex:0 0 auto;width:var(--lm-size);height:var(--lm-size);
  display:grid;place-items:center;padding:calc(var(--lm-size) * .10);
  background:var(--tile);border:1px solid var(--line-2);border-radius:var(--radius);
}
.lm-track img{width:calc(100% * var(--fit,1));height:calc(100% * var(--fit,1));object-fit:contain}
@media (prefers-reduced-motion:reduce){.logomarquee .lm-track{animation:none}}

/* ---------- 时间线 ---------- */
.timeline{display:grid;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);list-style:none;color:var(--text-2)}
.timeline li b{font-family:var(--font);font-weight:500;font-variant-numeric:tabular-nums;color:var(--cyan);letter-spacing:.06em}
.section--ink .timeline,.section--navy .timeline{border-color:var(--line-inv-2)}
.section--ink .timeline li,.section--navy .timeline li{border-color:var(--line-inv-2);color:var(--text-inv-2)}

/* ---------- 宣言 ---------- */
.quote{max-width:26ch}
.quote p{font-size:clamp(1.4rem,2.6vw,2.3rem);line-height:1.4;font-weight:500;letter-spacing:-.02em;color:#fff}
.quote cite{display:block;margin-top:24px;font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-style:normal}

/* ---------- 内页页头 ---------- */
.page-hero{
  position:relative;display:flex;align-items:center;
  /* 高度 = 首页横幅（max(96svh,700px)）的 80%，内容垂直居中 */
  min-height:calc(max(96svh, 700px) * .8);
  padding:calc(var(--header-h) + clamp(26px,3.6vw,58px)) 0 clamp(30px,4vw,64px);
  padding-bottom:calc(var(--band-h) + clamp(30px,4vw,64px));
  background:var(--white);color:var(--text);overflow:hidden;
}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.14;filter:grayscale(1) contrast(.92) brightness(1.14)}   /* 浅灰机房照片水印 */
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.84) 46%,rgba(255,255,255,.52) 100%);z-index:1}
/* 底图「清晰档」：内容里 hero.bg="clear" 的页（产品页 · 杆体渲染图）。
   默认内页底图是「灰度 + 14% 不透明度 + 白色横向蒙板」，那是给机房实拍当水印用的；
   而这张是**白底产品渲染**，照默认处理等于全白不可见，故去掉灰度、提高不透明度，
   并把白色蒙板改成左浓右淡，让杆体在右侧真正作为横幅底图出现、左侧标题仍压得住。 */
/* 文案贴底（内页默认是垂直居中）——这张图杆体是「左上段 + 右下段」，
   左下角是空白，文案贴底左正好落进去，与首页横幅同一构图逻辑。 */
.page-hero--bg-clear{align-items:flex-end}
.page-hero--bg-clear .page-hero-bg{
  background-size:contain;background-position:50% 0;background-repeat:no-repeat;
  opacity:1;filter:none;
}
.page-hero--bg-clear::before{
  /* 产品页横幅（内容里 hero.bg="clear"）的蒙板：**只在左上角留一点点**。
     用户 2026-10-10：「只需要一点点左上角蒙板，要能很清晰看到灯的颜色。」
     新产品图已在左侧补了 340px 白边（见 build 说明），杆体与 LED 灯珠整体右移到
     hero x≈63% 之外，文案（实测 hero x 8–54%、y 30–75%）落在纯白上 ——
     所以蒙板只为柔和左上角与页头的交界，LED 区域完全不加蒙板，颜色保持原样。
     旧版是横向 90deg 渐变（52% 之前近实白），那是给「深灰杆体压在文案下」的旧图用的。 */
  background:radial-gradient(92% 82% at 0% 0%,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.5) 44%,
    rgba(255,255,255,.16) 66%, rgba(255,255,255,0) 82%);
}
/* 窄屏：标题占满整宽，图不能再压在文字下面。改为「顶部独立图片带 + 下方白底文字」，
   与首页 hero 同一套思路。图片是 2.093 横构图（含左侧补白），带宽 = 100vw / 2.093 = 47.78vw。
   蒙板的切换点用 calc 精确对齐图片下缘，不依赖百分比（hero 高度随文案变化）。 */
@media (max-width:900px){
  .page-hero--bg-clear{padding-top:calc(var(--header-h) + 47.78vw + 22px)}
  .page-hero--bg-clear .page-hero-bg{
    background-size:contain;background-position:50% 0;background-repeat:no-repeat;opacity:1;
  }
  .page-hero--bg-clear::before{
    background:linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) calc(var(--header-h) + 47.78vw),
      rgba(255,255,255,.94) calc(var(--header-h) + 47.78vw + 26px),
      rgba(255,255,255,.98) 100%);
  }
}

/* 窄屏专用加强蒙板：内容里 hero.veil="strong" 的页（认证页·证书墙底图）。
   窄屏 cover 后图片比容器宽，文字会横跨到证书墙上，水平渐变蒙板压不住，故改为较均匀的深蓝纱。 */
@media (max-width:900px){
  .page-hero--veil-strong::before{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 42%,rgba(255,255,255,.96) 100%)}
}
/* 照片档（内容里 hero.bg="photo"）：研发与认证 / 客户及案例 / 关于公司 / 社会责任 四页。
   默认内页底图是「opacity:.14 + 灰度 + 白色蒙板」——那是把机房实拍当**水印**用的，
   等于看不见（用户 2026-10-04 反馈「横幅底图要么没有、要么被蒙板压得看不清」）。
   这一档让照片真正作为横幅出现：去掉灰度与低透明度，蒙板改「左浓右淡」——
   左侧文字区仍近纯白（深色标题压得住），右侧露出照片。 */
.page-hero--bg-photo .page-hero-bg{opacity:1;filter:none}
.page-hero--bg-photo::before{
  /* 左 46% 近乎实白 —— 实测最长的小标（关于公司那串英文名）右缘到 649px/1440 = 45%，
     蒙板若不护到这里，小标右段会压到深色照片上（实测对比度掉到 2.43）。 */
  /* 50% 之后迅速减弱：实测四页文字（含最长的小标 649px/45%）都结束在 48% 以内，
     故右侧可以干净地露出照片 —— 研发页的 PCB 白色丝印尤其需要这一点：
     白蒙板一盖，白字与绿板的对比会双双被拉向白色，反而看不清。 */
  background:linear-gradient(100deg,
    rgba(255,255,255,.985) 0%, rgba(255,255,255,.97) 44%,
    rgba(255,255,255,.55) 56%, rgba(255,255,255,.18) 72%,
    rgba(255,255,255,.02) 100%);
}
/* 窄屏：正文占满整宽并换行，横向蒙板护不住换行后的右半 ——
   实测 390px 下英文页小标 1.97、导语 1.59（橙 #EA580C 需 3.0 / 正文需 4.5）。
   退回站点既有的「底纹档」做法：近纯白底 + 照片作淡淡底纹（≈10% 可见，与内页默认
   水印档 opacity:.14 相当）。取值按同页既有 veil-strong 窄屏档（.96/.90/.96）同量级：
   .93 那一档实测标签区背景亮度只有 0.798 → 橙色小标 2.88 仍差一点，故用到 .97/.93/.97。 */
/* 横带档（内容里 hero.veil="band"）：只压住**文案那一条横带**，其余全露。
   user 2026-10-10「蒙板尽量少」——照片档默认是「左侧整高近实白」，实测把画面左侧上下都糊掉了。
   实测该图文案带（hero x 8-54%、y 30-75%）的背景亮度从 39（深色机柜）到 188（亮走廊）都有，
   混合背景 → 文字区必须压住，否则深色机柜上的深蓝标题与橙色小标都读不了。
   ⚠️ 这条横带能收到 70% 就够，前提是**英文页小标不能是那整句 90 字**：
   生成器会把「英文 subtitle」提升成小标（中文 subtitle 则变成导语），
   于是英文页的小标横跨到 hero x 87%，任何盖得住它的蒙板都会把右侧机柜一起糊掉。
   故把英文页改成与中文页同构：短小标 CASES + 整句作导语。
   所以改成：白色渐变只在 y 24%-96%（羽化）之间生效（mask-image），
   横向在 x 70% 处收干净 —— 顶部天空/灯具带、底部地面带、右侧机柜区**全部不加蒙板**。
   实测遮挡面积从原来的约 58% 降到约 25%。 */
.page-hero--veil-band::before{
  background:linear-gradient(90deg,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.93) 40%, rgba(255,255,255,.82) 50%,
    rgba(255,255,255,.45) 60%, rgba(255,255,255,0) 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 15%,#000 26%,#000 84%,transparent 98%);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 15%,#000 26%,#000 84%,transparent 98%);
}
/* 窄屏文字占满整宽：横带护不住，退回整幅近实白 + 取消横带遮罩 */
@media (max-width:900px){
  .page-hero--veil-band::before{-webkit-mask-image:none;mask-image:none;
    background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 52%,rgba(255,255,255,.97) 100%)}
}

@media (max-width:900px){
  .page-hero--bg-photo::before{
    background:linear-gradient(180deg,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 52%, rgba(255,255,255,.97) 100%);
  }
}

.page-hero-in{position:relative;z-index:2;width:100%}
.page-hero h1,.page-hero .lead,.page-hero .label,.page-hero .breadcrumb{text-shadow:none}
/* 横幅小标收紧字距。全站小标是 .16em，但「关于公司」那串英文法定名有 42 个字符，
   .16em 把它撑到 596px（右缘 712px = 49.4%），正好压进白蒙板开始衰减的位置 ——
   实测对比度 2.64（橙色 #EA580C 需 3.0）。收紧到 .06em 后约 516px（36%），
   留出 14% 余量；不必把白蒙板往右推（往右推会盖掉研发页电路板上的白色丝印）。 */
.page-hero .label{letter-spacing:.06em}
.page-hero h1{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.022em;line-height:1.18;max-width:24ch;color:var(--navy)}   /* 与板块标题同式样 */
.page-hero .lead{margin-top:20px;color:var(--text-2)}
/* 面包屑原来是 --text-3(#8494A8)，纯白底只有 3.10:1，13px 正文需 4.5 —— 全站 16 页
   都不达标（横幅上更明显：实测 2.94~3.06）。换成 --text-2(#48586E) 为 7.25:1。 */
.breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--text-2)}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb span{opacity:.4}

/* ---------- 粘性子导航 ---------- */
.subnav{position:sticky;top:64px;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.subnav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{padding:9px 16px;border-radius:100px;font-size:var(--fs-xs);font-weight:500;color:var(--text-2);white-space:nowrap;transition:.25s var(--ease)}
.subnav a:hover{background:var(--paper-2);color:var(--text)}
.subnav a.is-active{background:var(--navy);color:#fff}
/* tab 里的编号：与下拉菜单同款窄栏（子导航取小节短标签，编号在前） */
.subnav a b{font-family:var(--font);font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--cyan);margin-right:7px}
.subnav a.is-active b{color:var(--cyan-2)}
.subnav a:hover b{color:var(--cyan)}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--navy) 0%,var(--navy-2) 55%,var(--blue) 100%);color:#fff}
.cta::after{content:"";position:absolute;right:-10%;top:-40%;width:60%;height:180%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(31,184,212,.34),transparent 62%)}
.cta-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-block:clamp(48px,6vw,84px)}
.cta h2{font-size:var(--fs-h2);color:#fff;max-width:20ch}
.cta p{margin-top:14px;color:rgba(255,255,255,.75);max-width:52ch}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--ink);color:var(--text-inv-2);padding-top:clamp(56px,7vw,104px);overflow-x:clip}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:clamp(40px,5vw,72px)}
.footer-brand .footer-name{color:#fff;font-size:var(--fs-sm);font-weight:500}
.footer-brand .footer-name-alt{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--text-inv-2);margin-top:6px}
.footer-col h3{font-family:var(--font);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:500;margin-bottom:18px}
.footer-col a,.footer-col p{display:block;font-size:var(--fs-sm);padding:5px 0;color:var(--text-inv-2);transition:.25s}
.footer-col a:hover{color:#fff;transform:translateX(3px)}
.footer-word{
  /* 巨型描边字：按容器内容宽精确适配（Inter 700 + letter-spacing -.04em 时字宽≈字号的 7.175 倍），
     取 7.28 留 1.5% 余量，避免字形溢出容器导致页面横向溢出 */
  font-size:min(calc((100vw - 2 * var(--gutter)) / 7.28), calc((var(--container) - 2 * var(--gutter)) / 7.28));
  font-weight:700;letter-spacing:-.04em;line-height:.86;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);padding-bottom:20px;user-select:none;
}
.footer-bottom{border-top:1px solid var(--line-inv-2);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.04em;color:rgba(255,255,255,.42)}
.footer-bottom a:hover{color:#fff}

/* ---------- 富文本 ---------- */
.rich{max-width:74ch;color:var(--text-2);font-size:1.0625rem;line-height:1.85}
.rich > * + *{margin-top:20px}
/* 文字统一单栏（曾用过双栏，行宽过窄不好看，已取消） */
.rich{max-width:78ch}
/* 例外：小节显式写 cols:2 时才分两栏（如案例页「部分客户」名单）
   注意：不要在直接子元素上加 break-inside:avoid —— 那会把整个 <ul> 锁在第一栏，
   导致 column-count 形同虚设。只对条目本身禁止断开即可。 */
.rich--cols2{max-width:none;column-count:2;column-gap:clamp(32px,5vw,88px)}
.rich--cols2 li,.rich--cols2 p,.rich--cols2 h3{break-inside:avoid}
@media (max-width:760px){.rich--cols2{column-count:1}}
.rich h3{font-size:1.125rem;color:var(--text);margin-top:34px}
.rich ul,.rich ol{padding-left:1.2em}
.rich li{margin-top:8px}
.rich li::marker{color:var(--cyan)}
.rich strong{color:var(--text);font-weight:600}
.rich blockquote{margin:26px 0;padding:22px 26px;border-left:2px solid var(--cyan);background:var(--paper);border-radius:0 var(--radius) var(--radius) 0;color:var(--text-2)}
.section--ink .rich,.section--navy .rich{color:var(--text-inv-2)}
.section--ink .rich h3,.section--navy .rich h3,.section--ink .rich strong,.section--navy .rich strong{color:#fff}
.section--ink .rich blockquote,.section--navy .rich blockquote{background:rgba(255,255,255,.05);color:var(--text-inv-2)}

/* ---------- 动效 ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv--fade{transform:none}
.js .rv--left{transform:translateX(-26px)}
.js .rv--right{transform:translateX(26px)}
.js [data-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-stagger].is-in > *{opacity:1;transform:none}
[data-stagger].is-in > *:nth-child(1){transition-delay:.04s}
[data-stagger].is-in > *:nth-child(2){transition-delay:.12s}
[data-stagger].is-in > *:nth-child(3){transition-delay:.2s}
[data-stagger].is-in > *:nth-child(4){transition-delay:.28s}
[data-stagger].is-in > *:nth-child(5){transition-delay:.36s}
[data-stagger].is-in > *:nth-child(6){transition-delay:.44s}
[data-stagger].is-in > *:nth-child(7){transition-delay:.52s}
[data-stagger].is-in > *:nth-child(8){transition-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .rv,[data-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .scroll-cue::after{animation:none}
}

/* ---------- 灯箱 ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,8,14,.94);display:grid;place-items:center;padding:5vh 5vw;opacity:0;visibility:hidden;transition:.3s var(--ease)}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;width:auto;border-radius:var(--radius);box-shadow:0 40px 120px -40px rgba(0,0,0,.9)}
.lightbox-cap{margin-top:18px;text-align:center;font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.1em;color:rgba(255,255,255,.62)}
.lightbox-close{position:absolute;top:24px;right:28px;width:44px;height:44px;border:1px solid var(--line-inv);background:none;border-radius:50%;color:#fff;cursor:pointer;font-size:18px;line-height:1}
.lightbox-close:hover{background:rgba(255,255,255,.1)}

/* ---------- 回到顶部 ---------- */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:90;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px);color:var(--text);
  cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.35s var(--ease);box-shadow:var(--shadow-s);
}
.to-top.is-show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- 亮底 hero 时页头自动转深色（避免白字压在白底产品图上） ---------- */

/* ---------- 矮屏适配（笔记本 13/14 寸） ---------- */
@media (max-height:830px) and (min-width:901px){
  :root{--fs-display:clamp(1.6rem,3.2vw,2.7rem)}
  :root{--hero-pad-b:calc(var(--band-h) + 24px)}
  .hero-in{padding-top:calc(var(--header-h) + 30px)}
  .slide-texts{min-height:104px;margin-top:24px}
  .hero-lead{margin-top:18px}
  .hero-actions{margin-top:26px}
  .hero-chips{margin-top:8px}
  .slide-dots{margin-top:24px}
}

/* ---------- 响应式 ---------- */
@media (max-width:1500px){          /* 中等笔记本：只收紧内距，字号保持 17px（与 weigh2xtech 一致） */
  .nav-item > a{padding:10px 12px}
  .header-in{gap:16px}
}
@media (max-width:1240px){          /* 再窄才降一档，避免页头被挤出 */
  .nav-item > a{padding:9px 10px;font-size:15px}
}
@media (max-width:1280px){
  .header-actions .btn{display:none}   /* 空间不足时收起页头按钮，抽屉里仍有完整导航 */
}
@media (max-width:1080px){
  .feature{grid-template-columns:1fr}
  .feature--rev .feature-media{order:0}
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-top{grid-template-columns:1fr 1fr}
  .span-5,.span-6,.span-7,.span-8{grid-column:span 12}
}
@media (max-width:1040px){
  :root{--header-h:64px}
  .burger{display:block}
  .main-nav{
    position:fixed;left:0;top:0;bottom:0;right:auto;z-index:-1;width:100vw;max-width:100%;
    /* 二级菜单＝该页全部小节后内容变长，改为顶对齐 + 纵向可滚动（原为居中，会溢出且滚不动） */
    flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-x:hidden;overflow-y:auto;
    gap:6px;padding:calc(var(--header-h) + 32px) var(--gutter) 40px;margin:0;
    background-color:rgba(10,27,54,.985);
    background-image:linear-gradient(160deg,rgba(10,27,54,.99) 0%,rgba(18,61,130,.96) 100%);
    backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:.35s var(--ease);
  }
  .main-nav.is-open{opacity:1;visibility:visible}
  .nav-item > a{font-size:1.3rem;padding:13px 0;color:#fff}
  .nav-item--drawer{display:block}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0 0 8px 14px}
  .nav-sub a{font-size:var(--fs-sm);padding:8px 0}
  .header-actions .btn{display:none}
  .hero--carousel{height:max(88svh,620px)}
  .page-hero{min-height:calc(max(88svh, 620px) * .8)}
  .hero-inner{max-width:100%}
  .statband .stat{border-right:0;border-bottom:1px solid var(--line)}
  .scroll-cue{display:none}
}
@media (max-width:820px){
  .g-2,.g-3{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* 窄屏取消左右位移入场（会把内容顶出容器 6px），只保留纵向淡入 */
  .js .rv--left,.js .rv--right{transform:translateY(18px)}
  /* 小屏页头精简：隐藏品牌文字的第二行（tagline），保留 WALKHORIZON 主名。
     ⚠️ 原为 .brand-txt{display:none}（配合当时页头还有 logo 图片）；2026-09-30 页头 logo 图片
     已按用户要求整体删除，若仍整块隐藏会导致手机端品牌区完全空白。 */
  .brand-txt span{display:none}
  .header-in{gap:12px}
}
@media (max-width:640px){
  .hero-in{padding-top:calc(var(--header-h) + 40px)}
  .hero-title{font-size:clamp(1.45rem,7.2vw,2rem)}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .footer-top{grid-template-columns:1fr}
  .timeline li{grid-template-columns:76px 1fr;gap:16px}
}

/* ---------- 图文右置版式（文字左 + 多图整幅右） ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(22px,3.6vw,60px);align-items:start}
.duo-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.duo-photo{margin:0;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);padding:10px}
.duo-photo img{width:100%;aspect-ratio:1/2;object-fit:contain}   /* 两张照片统一显示框（大小一致） */
.duo-photo figcaption{margin-top:8px;font-size:12px;color:var(--text-3);text-align:center}
@media (max-width:1024px){
  .duo{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,36px)}
}
@media (max-width:640px){
  .duo-media{grid-template-columns:minmax(0,1fr)}
}

/* 紧凑文字小节（内容里 dense: true）：字号更小、行距更紧 */
.section--dense .rich{font-size:.95rem;line-height:1.7;letter-spacing:0;max-width:64ch}
.section--dense .rich > * + *{margin-top:9px}
.section--dense .rich h3{font-size:1.02rem;margin-top:16px}
.section--dense .rich li{margin-top:4px}
.section--dense .rich ul,.section--dense .rich ol{display:block}
.section--dense .section-head{margin-bottom:clamp(20px,2.6vw,34px)}

/* ---------- 子栏目（属于上方主产品的下级模块，如 RU2000 的系统构成/产品功能） ---------- */
.section-head--sub{
  border-left:3px solid var(--cyan);padding-left:clamp(16px,2vw,28px);
  margin-bottom:clamp(22px,2.8vw,40px);max-width:960px;
}
.section-head--sub .section-title{font-size:clamp(1.3rem,1.9vw,1.8rem);letter-spacing:-.02em}
.section-head--sub .label{margin-bottom:12px}
.section-head--sub .lead{margin-top:12px;font-size:.98rem;color:var(--text-2)}

/* 卡片：英文小标签 + 编号；组件卡（整幅产品图）与功能卡（要点列表）两种样式 */
.card-kicker{
  font-family:var(--font);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:8px;display:inline-block;
}
/* 上面这条 11px 会被 `.card p{font-size:var(--fs-sm)}`（选择器权重更高）顶掉，
   实际渲染成 15px；长标签如 MICRO-ENVIRONMENT 因此放不进卡片而与编号「03」分行。
   提高到 .card .card-kicker 让字号真正生效，并取 12px：既回到"英文小标签"的设计意图，
   又能与编号同行（卡内容宽 208~223px，需要 ≤196px）。 */
.card .card-kicker{font-size:12px}
/* list-style:none —— 否则浏览器原生圆点会与下面自定义的青色圆点叠加，出现「双 bullet」 */
.card-points{margin-top:10px;display:grid;gap:7px;list-style:none;padding-left:0}
.card-points li{position:relative;padding-left:1.5em;color:var(--text-2);font-size:.95rem;line-height:1.7}
.card-points li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--cyan)}

/* VR 引导巡检（产品页）：正文很长，媒体列若随文本节高会被拉到 max-height:640px，
   而该图是横构图，object-fit:contain 后上下会留出大片空白。
   改为顶部对齐，媒体框回到 min-height（约 270px），图片随之与文字首屏齐平、尺寸收敛。 */
#vr-patrol .feature{align-items:start}

/* 组件卡：产品图整幅居中、浅底衬托，不裁切 */
.cards--comp{grid-template-columns:repeat(3,minmax(0,1fr))}
.card--comp .card-media{
  margin:0 0 clamp(16px,2vw,24px);background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:clamp(10px,1.4vw,20px);
  display:flex;align-items:center;justify-content:center;min-height:clamp(150px,15vw,210px);
}
.card--comp .card-media img{width:auto;max-width:100%;max-height:clamp(140px,14vw,200px);object-fit:contain}
.card--comp .card h3{font-size:clamp(1rem,1.15vw,1.15rem)}
.card--comp p{font-size:.94rem;line-height:1.75;color:var(--text-2)}

/* 功能卡：2×2 网格，编号徽标 + 要点 */
.cards--feat{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.cards--feat .card{padding:clamp(20px,2.4vw,32px)}
.cards--feat .card-no{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:22px;padding:0 8px;
  border-radius:4px;background:var(--paper-2);color:var(--navy-2);font-size:12px;margin-bottom:12px;
}
.cards--feat .card h3{font-size:clamp(1.02rem,1.2vw,1.2rem)}
@media (max-width:1080px){
  .cards--comp{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cards--comp,.cards--feat{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 图片跑马灯（客户案例）：等高、等速、无缝循环，悬停暂停 ---------- */
.photomarquee{
  position:relative;overflow:hidden;margin-top:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);   /* 两端渐隐，进出更自然 */
}
.pm-track{display:flex;gap:clamp(12px,1.5vw,24px);width:max-content;animation:pm-scroll 60s linear infinite}
.photomarquee:hover .pm-track{animation-play-state:paused}
/* 客户案例跑马灯：单元为 1:3.5 竖长条（图片由 build/make-case-marquee-crops.py 从原片裁出），
   条带整体高度贴合本栏目、上下留白压小（2026-10-04 用户口径）。 */
#case-photos{padding-block:clamp(26px,3.2vw,46px)}

/* 跑马灯规格（用户 2026-09-30 最终口径）：**完整显示手机拍摄的原图，绝不裁切**。
   ⚠️ 中途我曾按「统一 9:16」用 aspect-ratio + object-fit:cover 定死比例，结果把 3:4 的手机照片
   左右各裁掉 12.5%，机柜两侧被切掉 —— 用户明确否决（「不是裁切后看不到整体机柜全貌的图片」）。
   现在的做法回到最初：单元只定**高度**，图片 `height:100%;width:auto` 按自身比例缩放，
   因此每张的显示比例恒等于原图比例，一张不裁。宽度随各图比例自然不同。
   高度取 clamp(240px,26vw,430px)：容器上限 1208px，3:4 的图 1440px 下约 379 宽 → 一屏约 4 张。
   原图全部完好保存在 images/_orig/cases/（23 张手机原片，最高 4032×3024），线上图是长边 1600 的处理版。
   注意：.pm-track 是 width:max-content，不能用百分比定尺寸，只能用固定高度。 */
.pm-item{margin:0;flex:0 0 auto;position:relative;height:clamp(330px,37vw,620px);
  border-radius:var(--radius);overflow:hidden;background:var(--paper-2);cursor:zoom-in}
.pm-item a{display:block;height:100%}
.pm-item img{height:100%;width:auto;display:block;object-fit:contain;transition:transform .9s var(--ease)}
.pm-item:hover img{transform:scale(1.04)}
.pm-item figcaption{position:absolute;inset:auto 0 0;padding:12px 14px;font-size:var(--fs-xs);color:#fff;
  background:linear-gradient(to top,rgba(6,11,20,.86),transparent);opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.pm-item:hover figcaption{opacity:1;transform:none}
@keyframes pm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .pm-track{animation:none} }

/* ---------- 排版统一：正文两端对齐 + 图片与文字顶边对齐 ---------- */
/* 中文正文两端对齐（末行不拉伸；标题、按钮、标签等不参与） */
.rich p,.rich li,.rich blockquote,.feature-body p,.section--dense .rich p{
  text-align:justify;text-justify:inter-ideograph;-webkit-text-align-last:left;text-align-last:left;
  word-break:break-word;
}
/* 图文分栏：图片与文字块顶边对齐（contain 缩放的图片靠上，不再悬浮在中段） */
.feature-media.is-fit img,.feature-media--tall img{object-position:center top}
.feature-media.is-bare img,.split-photo.is-bare img{object-position:center top}
/* 图注与说明文字也统一基线与行距 */
.feature-body .rich > * + *{margin-top:clamp(10px,1.2vw,18px)}

/* 下载清单（ESG 报告等）：文件名 + 格式/大小/日期 */
.dl-list{list-style:none;margin:18px 0 0;padding:0}
.dl-list li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.dl-list li:first-child{border-top:1px solid var(--line)}
.dl-list a{color:var(--cyan);font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.dl-list a:hover{border-bottom-color:var(--cyan)}
.dl-list .dl-meta{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.04em;color:var(--text-2)}
.section--ink .dl-list li,.section--navy .dl-list li{border-color:var(--line-inv-2)}
.section--ink .dl-list .dl-meta,.section--navy .dl-list .dl-meta{color:var(--text-inv-2)}