/* ============================================================================
   SEA☆STAR 实益达 官网 — 样式系统 v2
   ----------------------------------------------------------------------------
   设计方向：白底 + 大图叙事 + 图片卡片网格（参照 oktlighting.com 布局语言）
   配色：品牌蓝，取色自官网原版 Logo 风车位图（实测主色 #0070C0）

   与 v1（暗中有光 · 暖琥珀金）的根本差异：
     · 页面底色 深色 → 白色；主色 暖琥珀金 → 品牌蓝
     · Hero 由「深色光锥 + 文字」→「满幅实景图 + 图上叠字」
     · 产品展示由「文字参数卡」→「图片卡片网格（直角、图上叠字）」
     · 光效体系（glow / beam-cone / halo）整体退役，改为克制阴影与细边框

   结构沿用 v1 的 class 命名，便于逐页平滑迁移。
   ============================================================================ */

/* ───────────────────────────  0. 自托管字体（v0.28.10）────────────────
   · Inter / JetBrains Mono 可变字体（latin 子集，WOFF2，共约 88KB）——
     解决"栈里声明了 Inter 却从未加载、实际全靠系统字体"的名存实亡问题
   · 中文仍走系统栈（PingFang SC / 微软雅黑），latin 子集不含 CJK 字形、互不干扰
   · font-display:swap：字体未到时先用系统字体渲染，不阻塞首屏
   · 自托管不走任何 CDN：国内访问无 Google Fonts 可达性问题             */
@font-face{
  font-family:"Inter";
  src:url("assets/fonts/inter-vf.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("assets/fonts/jbmono-vf.woff2") format("woff2-variations");
  font-weight:100 800; font-style:normal; font-display:swap;
}

/* ───────────────────────────  1. 设计令牌  ─────────────────────────── */
:root {
  /* ——— 品牌蓝（实测自 Logo 风车，主色 #0070C0）——— */
  --brand-900: #00305F;  --brand-800: #003D7A;  --brand-700: #0050A0;
  --brand-600: #0060B0;  --brand-500: #0070C0;  --brand-400: #0088CC;
  --brand-300: #0090D0;  --brand-200: #4FB3E8;  --brand-100: #B8DEFA;
  --brand-50:  #EAF4FC;  --brand-25:  #F5FAFE;

  /* ——— 中性灰阶 ——— */
  --neutral-0:   #FFFFFF;  --neutral-25:  #FCFCFD;  --neutral-50:  #F7F8FA;
  --neutral-100: #F1F3F5;  --neutral-200: #E4E7EB;  --neutral-300: #CFD4DB;
  --neutral-400: #9AA3AE;  --neutral-500: #6B7480;  --neutral-600: #4B535E;
  --neutral-700: #343A43;  --neutral-800: #22262D;  --neutral-900: #14171C;

  /* ——— 深色锚定区（CTA / 页脚）——— */
  --ink-950: #0B1015;  --ink-900: #0F1620;  --ink-800: #182231;  --ink-700: #22303F;

  /* ——— 语义色 ——— */
  --color-success: #0E9F6E;  --color-warning: #D97706;
  --color-danger:  #DC2626;  --color-info:    #2563EB;

  /* ——— 表面（白底体系）——— */
  --surface-bg: #FFFFFF;      --surface-alt: #F7F8FA;
  --surface-card: #FFFFFF;    --surface-sunken: #F1F3F5;
  --surface-dark: var(--ink-900);
  --border-subtle: #E4E7EB;   --border-strong: #CFD4DB;
  --border-brand: rgba(0,112,192,.35);

  /* ——— 文字 ——— */
  --text-primary: #14171C;    --text-secondary: #6B7480;
  /* tertiary 由 #9AA3AE 加深到 #69727D：白底对比度 2.8:1 → 4.6:1（过 WCAG AA） */
  --text-tertiary: #69727D;   --text-brand: var(--brand-500);
  --text-brand-deep: var(--brand-700);
  --text-on-dark: #F1F3F5;    --text-on-dark-muted: #9AA3AE;

  /* ——— 字体 ——— */
  --font-heading: "Inter","Geist",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:    "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:    "JetBrains Mono","IBM Plex Mono","SF Mono","Roboto Mono",ui-monospace,"Cascadia Code",monospace;

  /* ——— 间距 ——— */
  --space-2xs:4px;   --space-xs:8px;    --space-sm:12px;  --space-md:16px;
  --space-lg:24px;   --space-xl:32px;   --space-2xl:48px; --space-3xl:64px;
  --space-4xl:112px; --space-5xl:152px; --space-6xl:192px;

  /* ——— 圆角（图片直角，控件小圆角）——— */
  --radius-xs:2px; --radius-sm:4px;  --radius-md:6px;
  --radius-lg:10px; --radius-xl:16px; --radius-full:9999px;

  /* ——— 阴影（克制）——— */
  --shadow-raised:   0 1px 2px rgba(20,23,28,.05),0 1px 3px rgba(20,23,28,.04);
  --shadow-floating: 0 10px 30px rgba(20,23,28,.10),0 2px 8px rgba(20,23,28,.05);
  --shadow-overlay:  0 24px 60px rgba(11,16,21,.24);
  --shadow-hero:     0 30px 80px rgba(11,16,21,.35);

  /* ——— 动效 ——— */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out-soft: cubic-bezier(.16,1,.3,1);
  --duration-fast: 150ms;  --duration-base: 280ms;  --duration-slow: 600ms;

  /* ——— 布局 ——— */
  --container: 1340px;  --container-narrow: 860px;  --nav-h: 88px;
}

/* ───────────────────────────  2. 基础重置  ─────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
/* 2026-10-19 客户反馈「页面中字符占比有点小」→ **整体抬高根字号**：
   全站字号基本都是 rem（.body-l 1.1875rem、body-s .9375rem、各 clamp()…），
   而间距/容器/导航高都是 **px**（--space-* / --container / --nav-h）→
   抬 html 字号 = **只放大文字**、不撑开排版 ✓（16 → 17.5px，约 +9.4%）。
   ⚠️ 个别写死 px 的字号（overline 11px、语言切换 11.5px 等）刻意保持，
      因为它们是"极小字/固定圆点里的字"，跟着放大反而会破坏设计 ✓。 */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:17.5px; }
body{
  margin:0; background:var(--surface-bg); color:var(--text-primary);
  font-family:var(--font-body); font-size:1rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,svg *{ max-width:100%; }
img{ display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--brand-500); outline-offset:3px; }
::selection{ background:var(--brand-100); color:var(--brand-900); }

/* ───────────────────────────  3. 版式  ─────────────────────────── */
/* 字重层次（v0.28.10）：Display 700 重磅压场（大气），H1 650，向下 600 递减。
   配合自托管 Inter 可变字体，650 这类中间重量在英文下真实生效；
   中文落在系统字体上按可用字重就近渲染（雅黑/PingFang 的 Bold/Semibold）。 */
.display-xl{ font-family:var(--font-heading); font-size:clamp(2.8rem,6.2vw,5.4rem); font-weight:700; line-height:1.02; letter-spacing:-.036em; }
.display{ font-family:var(--font-heading); font-size:clamp(2.15rem,4.8vw,3.8rem); font-weight:700; line-height:1.08; letter-spacing:-.03em; }
.h1{ font-family:var(--font-heading); font-size:clamp(2rem,3.8vw,2.9rem); font-weight:650; line-height:1.14; letter-spacing:-.024em; }
.h2{ font-family:var(--font-heading); font-size:clamp(1.75rem,3.2vw,2.6rem); font-weight:600; line-height:1.16; letter-spacing:-.024em; }
.h3{ font-family:var(--font-heading); font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:600; line-height:1.28; letter-spacing:-.016em; }
.h4{ font-family:var(--font-heading); font-size:1.125rem; font-weight:600; line-height:1.4; letter-spacing:-.005em; }
.body-l{ font-size:1.1875rem; line-height:1.8; }
.body-s{ font-size:.9375rem; line-height:1.65; }
.small{ font-size:.8125rem; line-height:1.6; color:var(--text-secondary); }
.micro{ font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.overline{
  display:inline-block; font-family:var(--font-mono);
  font-size:.6875rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-500);
}

/* 中文排版修正（v0.28.10）：CJK 不适用西文的负字距与过紧行高 ——
   负字距会让汉字笔画相叠发闷，1.02~1.16 的行高会让多行中文标题几乎相碰。
   :lang(zh) 命中 <html lang="zh-CN"> 的整棵子树，英文页不受影响。 */
:lang(zh) .display-xl{ letter-spacing:0; line-height:1.14; }
:lang(zh) .display{ letter-spacing:0; line-height:1.18; }
:lang(zh) .h1{ letter-spacing:0; line-height:1.24; }
:lang(zh) .h2{ letter-spacing:0; line-height:1.28; }
:lang(zh) .h3{ letter-spacing:0; }

/* ─────────────  3b. 品牌图形层（取自 Logo 的视觉基因）─────────────
   Logo 实测特征 → 设计语言：
     · 8 片楔形叶片、顺时针旋转动感      → 放射装饰、旋转动效
     · 中心四角星负空间                  → 星形符号（章节标、列表项、分隔）
     · 叶片间细缝、锐利直线边缘          → 斜切角、硬边，不用大圆角
     · 单一青蓝色相(H197–209°) + 明度层次 → 只用明度表达层次，不引入第二色相
   ─────────────────────────────────────────────────────────── */

/* 星形符号（对应 Logo 中心的四角星负空间） */
.brand-star{
  display:inline-block; width:1em; height:1em; flex-shrink:0;
  background:currentColor; vertical-align:-.1em;
  /* 2026-10-13 客户要求「页脚那颗星用 logo 里的星样式」→ 顺带统一整个星形母题：
     原 clip-path 是**直边胖四角星**（偏离 logo），改用 logo 实测的**细腰凹边四角星**
     （填充率≈0.21 / 高宽比≈0.85），用 SVG 蒙版实现 → 颜色仍随 currentColor。 */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 1 Q50 59 99 59 Q50 59 50 117 Q50 59 1 59 Q50 59 50 1Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 1 Q50 59 99 59 Q50 59 50 117 Q50 59 1 59 Q50 59 50 1Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* 章节标（overline）自动带星形前缀 —— 全站无需改 HTML */
.overline::before{
  content:""; display:inline-block;
  width:.72em; height:.72em; margin-right:.7em;
  background:currentColor; vertical-align:.02em;
  /* 同步为 logo 的细腰四角星（与 .brand-star 同源） */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 1 Q50 59 99 59 Q50 59 50 117 Q50 59 1 59 Q50 59 50 1Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 1 Q50 59 99 59 Q50 59 50 117 Q50 59 1 59 Q50 59 50 1Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* 放射图形（对应 8 片叶片的旋转对称） */
.brand-burst{
  display:inline-block; width:1em; height:1em; flex-shrink:0;
  background:currentColor; opacity:.9;
  clip-path:polygon(
    50% 0%, 56% 40%, 100% 50%, 56% 60%, 50% 100%, 44% 60%, 0% 50%, 44% 40%,
    50% 8%, 52% 44%, 92% 50%, 52% 56%, 50% 92%, 48% 56%, 8% 50%, 48% 44%);
}
/* 楔形（对应单叶片）—— 用于列表项符号 / 装饰 */
.brand-wedge{
  display:inline-block; width:.62em; height:.62em; flex-shrink:0;
  background:currentColor;
  clip-path:polygon(0% 100%, 0% 8%, 100% 100%);   /* 直角楔形，呼应叶片锐边 */
}

/* 条款列表：用楔形替代圆点 */
.brand-list{ display:flex; flex-direction:column; gap:11px; }
.brand-list li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.9375rem; line-height:1.65;
}
.brand-list li::before{
  content:""; flex-shrink:0; margin-top:.52em;
  width:.54em; height:.54em; background:var(--brand-500);
  clip-path:polygon(0% 100%, 0% 10%, 100% 100%);
}
.dark .brand-list li::before{ background:var(--brand-200); }

/* 45° 装饰分隔线（呼应叶片的斜边） */
.brand-rule{
  height:1px; border:0; position:relative;
  background:linear-gradient(90deg,var(--brand-500) 0%,var(--brand-200) 22%,var(--border-subtle) 22%,var(--border-subtle) 100%);
}
.brand-rule::before{
  content:""; position:absolute; left:0; top:-3px;
  width:7px; height:7px; background:var(--brand-500);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 1 Q50 59 99 59 Q50 59 50 117 Q50 59 1 59 Q50 59 50 1Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 118'%3E%3Cpath d='M50 1 Q50 59 99 59 Q50 59 50 117 Q50 59 1 59 Q50 59 50 1Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 斜切角（呼应叶片的锐利斜边）—— 用于图片卡 / 徽标容器 */
.brand-bevel{
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.brand-bevel--sm{
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* 品牌旋转动效（对应风车的旋转本性） */
@keyframes brand-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
.brand-spin{ animation:brand-spin 26s linear infinite; }
.nav__logo:hover .brand-img{ transform:rotate(8deg); }
.brand-img{ transition:transform var(--duration-base) var(--ease-out-soft); }
@media (prefers-reduced-motion:reduce){
  .brand-spin{ animation:none; }
  .nav__logo:hover .brand-img{ transform:none; }
}

/* 深色区块统一品牌放射纹（呼应 Logo 的 8 叶旋转结构，45° 周期） */
/* 🔴 `.footer::before` 是那层很淡的放射纹装饰，用了 `inset:-28%` 让它比页脚大一圈。
   绝对定位元素**会撑大可滚动区域** —— 页脚在页面最后，于是文档底部凭空多出
   28% × 页脚高 ≈ 136px 的空白（实测：文档 6732 / 页脚底 6596，差 136），
   在浅色 body 上就是"网站底部留白太多"。
   `overflow:hidden` 把超出的部分裁掉：页脚内部看到的图案完全一样（它是重复图案），
   但不再往页面底部外溢。同一段装饰 `.tech-band` 也用，一并处理。 */
.footer, .tech-band{ position:relative; overflow:hidden; }
.footer::before, .tech-band::before{
  content:""; position:absolute; inset:-28%; pointer-events:none; z-index:0;
  opacity:.05;
  background:repeating-conic-gradient(from 0deg at 50% 42%,
    rgba(255,255,255,.95) 0deg 22.5deg, transparent 22.5deg 45deg);
}
.footer > .container, .tech-band > .container{ position:relative; z-index:1; }

/* 首页实力带的数字：底部加品牌楔形装饰 */
.stat{ position:relative; }
.stat::after{
  content:""; position:absolute; left:0; bottom:-10px;
  width:26px; height:2px; background:var(--brand-400);
}
.dark .stat::after{ background:var(--brand-200); }
.accent-word{ color:var(--brand-500); }
.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.unit{ font-family:var(--font-mono); font-size:.8em; color:var(--text-tertiary); margin-left:2px; }
.measure{ max-width:58ch; }
.measure-lg{ max-width:72ch; }
.text-secondary{ color:var(--text-secondary); }
.text-tertiary{ color:var(--text-tertiary); }

/* ───────────────────────────  4. 布局与工具类  ─────────────────────────── */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,4vw,40px); }
.container-narrow{ width:100%; max-width:var(--container-narrow); margin-inline:auto; padding-inline:clamp(20px,4vw,40px); }
.section{ padding-block:var(--space-4xl); }
.section-lg{ padding-block:var(--space-5xl); }
.section-tight{ padding-block:var(--space-3xl); }
.section-head{ max-width:760px; }
.divider{ height:1px; background:var(--border-subtle); border:0; }

.grid{ display:grid; gap:var(--space-lg); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.flex{ display:flex; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.center{ text-align:center; }
.relative{ position:relative; }
.hidden{ display:none !important; }
.mx-auto{ margin-inline:auto; }
.mt-0{margin-top:0;} .mt-sm{margin-top:var(--space-sm);} .mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);} .mt-xl{margin-top:var(--space-xl);} .mt-2xl{margin-top:var(--space-2xl);}
.mt-3xl{margin-top:var(--space-3xl);} .mt-4xl{margin-top:var(--space-4xl);}
.mb-md{margin-bottom:var(--space-md);}
.gap-xs{gap:var(--space-xs);} .gap-sm{gap:var(--space-sm);} .gap-md{gap:var(--space-md);}
.gap-lg{gap:var(--space-lg);} .gap-xl{gap:var(--space-xl);}
.stack-sm>*+*{ margin-top:var(--space-sm); }
.stack-md>*+*{ margin-top:var(--space-md); }
.stack-lg>*+*{ margin-top:var(--space-lg); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* 深色区块 */
.dark{ background:var(--ink-900); color:var(--text-on-dark); }
/* 2026-10-12 客户要求：「其他页面的技术带颜色与首页保持一致」。
   实测：`tech-band` 只用在首页(×2)与 about(×1)，其余纯深色段（oem / facilities / lighting / docs
   各 1~2 处）用的是裸 `.section.dark` → 仍是近黑 `--ink-900` ✗，与首页的品牌深蓝不统一。
   此处让**所有纯深色段**共用同一套品牌深蓝（与 `.tech-band` 完全同值，含左上天空蓝辉光）；
   `.tech-band` 与 `.cta-band` 用 :not() 排除（前者自带同值规则、后者有满幅照片）。
   ⚠️ 底色抬亮后弱化文字必须同步提亮（实测 #7E8A99 在深蓝上只有 4.3:1，低于 AA）→ 与 tech-band 同处理。 */
.section.dark:not(.tech-band):not(.cta-band){
  --text-on-dark-muted:#8B98A6;
  background:
    radial-gradient(120% 88% at 10% -10%, rgba(57,97,157,.28), transparent 60%),
    linear-gradient(180deg, #071829 0%, #0D2440 55%, #152640 100%);
}
.dark .text-secondary{ color:var(--text-on-dark-muted); }
/* 深底三级文字同步提亮：#5E6B7A 在 --ink-900 上仅约 3.2:1 → #7E8A99 约 5.2:1 */
.dark .text-tertiary{ color:#7E8A99; }
.dark .overline{ color:var(--brand-200); }
.dark .divider{ background:var(--ink-700); }
.darker{ background:var(--ink-950); }
.dark .link-arrow{ color:var(--brand-200); }

/* ───────────────────────────  5. 按钮  ─────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs);
  font-family:var(--font-body); font-size:.9375rem; font-weight:600;
  letter-spacing:.005em; white-space:nowrap;
  border-radius:var(--radius-md); border:1px solid transparent;
  padding:0 26px; height:48px;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
/* 按钮内的图标必须显式定尺寸：内联 <svg> 只给 viewBox 时默认尺寸极大，
   在 flex 容器里会被拉成巨型图形、盖住整块内容（联系页曾实测踩到）。 */
.btn svg{ width:17px; height:17px; flex-shrink:0; }
.btn--sm{ height:38px; padding:0 18px; font-size:.875rem; }
.btn--lg{ height:54px; padding:0 34px; font-size:1rem; }

.btn--primary{ background:var(--brand-500); color:#fff; box-shadow:var(--shadow-raised); }
.btn--primary:hover{ background:var(--brand-600); box-shadow:var(--shadow-floating); }
.btn--primary:active{ background:var(--brand-700); }

.btn--secondary{ background:#fff; color:var(--text-primary); border-color:var(--border-strong); }
.btn--secondary:hover{ background:var(--brand-500); color:#fff; border-color:var(--brand-500); box-shadow:var(--shadow-raised); }
.btn--secondary:active{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.btn--secondary:focus-visible{ background:var(--brand-500); color:#fff; border-color:var(--brand-500); }

.btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.30); }
.btn--ghost:hover{ background:var(--brand-500); border-color:var(--brand-500); color:#fff; box-shadow:var(--shadow-raised); }
.btn--ghost:active{ background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.btn--ghost:focus-visible{ background:var(--brand-500); border-color:var(--brand-500); color:#fff; }
.btn--dark{ background:var(--neutral-800); color:#fff; border-color:var(--neutral-800); }
.btn--dark:hover{ background:var(--neutral-700); border-color:var(--neutral-700); }
.btn--dark:active{ background:var(--neutral-900); border-color:var(--neutral-900); }

.link-arrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.9375rem; font-weight:600; color:var(--brand-700);
  transition:gap var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.link-arrow:hover{ gap:11px; color:var(--brand-500); }
.link-arrow svg{ width:16px; height:16px; flex-shrink:0; }

/* ───────────────────────────  6. 徽章 / 药丸  ─────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.6875rem; font-weight:600; letter-spacing:.03em;
  padding:5px 11px; border-radius:var(--radius-full);
  border:1px solid transparent; white-space:nowrap;
}
.badge--brand{ background:var(--brand-50); color:var(--brand-700); border-color:var(--brand-100); }
.badge--neutral{ background:var(--neutral-100); color:var(--neutral-600); border-color:var(--neutral-200); }
.badge--success{ background:rgba(14,159,110,.09); color:#0B7C57; border-color:rgba(14,159,110,.22); }
.badge--tech{ background:rgba(37,99,235,.08); color:#1D4ED8; border-color:rgba(37,99,235,.20); }
.dark .badge--neutral{ background:rgba(255,255,255,.07); color:var(--text-on-dark-muted); border-color:rgba(255,255,255,.16); }
.dark .badge--brand{ background:rgba(79,179,232,.14); color:var(--brand-200); border-color:rgba(79,179,232,.30); }
.dark .badge--success{ background:rgba(14,159,110,.14); color:#4ADE9E; border-color:rgba(14,159,110,.30); }
.dark .badge--tech{ background:rgba(79,179,232,.12); color:var(--brand-100); border-color:rgba(79,179,232,.26); }

.pills{ display:flex; flex-wrap:wrap; gap:var(--space-xs); }
.pill{
  display:inline-flex; align-items:center;
  height:40px; padding:0 20px;
  font-size:.875rem; font-weight:600; color:var(--text-secondary);
  background:#fff; border:1px solid var(--border-subtle);
  border-radius:var(--radius-full);
  transition:all var(--duration-fast) var(--ease-standard);
}
.pill:hover{ border-color:var(--brand-300); color:var(--brand-700); }
.pill.is-active{ background:var(--brand-500); color:#fff; border-color:var(--brand-500); }
.dark .pill{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:var(--text-on-dark-muted); }
.dark .pill:hover{ border-color:var(--brand-200); color:#fff; }
.dark .pill.is-active{ background:var(--brand-500); color:#fff; border-color:var(--brand-500); }

/* ───────────────────────────  7. 导航  ─────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200;
  height:var(--nav-h); background:#fff;
  border-bottom:1px solid transparent;
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             background var(--duration-base) var(--ease-standard);
}
.nav--sol{ border-bottom-color:var(--border-subtle); box-shadow:0 1px 12px rgba(20,23,28,.05); }
.nav__inner{
  height:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(20px,4vw,40px);
  display:flex; align-items:center; gap:var(--space-xl);
}
.nav__logo{ display:flex; align-items:center; flex-shrink:0; }
.nav__links{
  display:flex; align-items:center; gap:clamp(10px,1.6vw,26px); margin-inline:auto;
}
.nav__links a{
  position:relative; font-size:.9375rem; font-weight:500;
  /* 导航项是**标签**，任何宽度下都不允许折行（v0.28.11）——
     此前无此声明，容器一紧就把「General Lighting / About Us / Contact Us」
     按空格拆成两行，导航高度虽固定，视觉上却成了两行文字。 */
  white-space:nowrap;
  color:var(--text-primary); padding-block:6px;
  transition:color var(--duration-fast) var(--ease-standard);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--brand-500); transform:scaleX(0); transform-origin:left;
  transition:transform var(--duration-base) var(--ease-out-soft);
}
.nav__links a:hover{ color:var(--brand-600); }
.nav__links a:hover::after{ transform:scaleX(1); }
/* 当前所在栏目高亮 —— 两条来源取并集，视觉完全一致：
   ① HTML 里手工标注的 `.is-active`：**无 JS 也生效**。
      全站 74 个页面早已这样标注，但此前 styles.css 里**根本没有 .is-active 的规则**
      → 高亮从未显示过；本次补上，等于把已有标记"接上线"。
   ② js/app.js 第 9 节按 location.pathname 打的 `aria-current="page"`：
      语义化（读屏可播报「当前页」），作为手工标注的兜底（新增页面/标注遗漏时仍能高亮）。 */
.nav__links a.is-active,
.nav__links a[aria-current="page"]{ color:var(--brand-600); font-weight:600; }
.nav__links a.is-active::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav__right{ display:flex; align-items:center; gap:var(--space-sm); flex-shrink:0; }
.nav__burger{
  display:none; width:42px; height:42px;
  align-items:center; justify-content:center;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  color:var(--text-primary);
}
.nav__burger svg{ width:20px; height:20px; }

/* 导航下拉菜单（通用照明 → 家居/商业/户外）
   ⚠️ 显隐由 js/app.js 加/去 .is-open 控制，**不要**改回纯 :hover --
      之前用 opacity+visibility 过渡实现，依赖的是「离散属性」，
      鼠标快速进出或从 bfcache 返回时状态可能残留，表现为"只有第一次能展开"。
      display 切换没有中间态，配 JS 的延迟关闭最稳。
      :hover 规则保留，仅作为**无 JS 时的兜底**。 */
.nav__dropdown{ position:relative; }
.nav__dropdown-trigger{ display:inline-flex; align-items:center; gap:4px; }
.nav__dropdown-menu{
  position:absolute;
  /* top:100% 紧贴触发器，视觉悬浮感交给 margin-top；
     下方 ::before 桥接区把那几像素空隙接住，鼠标移入菜单时不会断线。 */
  top:100%; margin-top:6px; left:0;
  min-width:172px; background:#fff;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(9,14,20,.12);
  padding:8px 0;
  display:none;
  z-index:100;
}
/* 桥接区：向上覆盖 margin-top 造成的空隙。透明，不挡下方正文。 */
.nav__dropdown-menu::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.nav__dropdown.is-open .nav__dropdown-menu,
.nav__dropdown:hover .nav__dropdown-menu{
  display:block;
}
.nav__dropdown.is-open .nav__dropdown-menu{
  animation:dropdownIn .16s var(--ease-out-soft) both;
}
@keyframes dropdownIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.nav__dropdown-menu a{
  display:block; padding:9px 18px;
  font-size:.9375rem; font-weight:500;
  color:var(--text-primary); white-space:nowrap;
}
.nav__dropdown-menu a:hover{ color:var(--brand-600); background:var(--brand-25); }
.nav__dropdown-menu a::after{ display:none; } /* 下拉项不要底部下划线 */

/* 注：js/app.js 仍会切换 .nav--transparent / .nav--sol / .nav--dark / .is-open 等类。
   v2 导航是**恒定白底**，所以 `.nav--transparent` 与 `.nav--dark` 刻意**不定义样式** ——
   它们只作为 JS 的状态锚点存在，不是"样式缺失"。`.nav--sol` 则是滚动后的收边效果。 */

/* 品牌图：v2 导航恒为白底 → 默认显示深色原版；
   白字版仅用于深色页脚（.brand-img--footer 处直接指定文件） */
.brand-swap{ display:grid; }
.brand-swap img{ grid-area:1/1; }
.brand-img{ width:auto; object-fit:contain; }
.brand-img--nav{ height:40px; }
.brand-img--footer{ height:40px; }
.brand-img--on-dark{ display:none; }
.brand-img--on-light{ display:block; }

/* 移动端抽屉 */
.drawer{
  /* z-index 1250：**高于 Cookie 同意横幅（1200）、低于 Cookie 设置弹窗（1300）**。
     原来只有 300 —— 首次访问时那个占屏近半的同意横幅会**压在菜单下半截**上，
     菜单底部的条目既看不见也点不到（实测截图）。菜单盖住横幅是常见做法，
     横幅仍然会在关闭菜单后继续显示（不违反"同意前一直展示"）。 */
  position:fixed; inset:0; z-index:1250;
  background:var(--ink-950);
  padding:calc(var(--nav-h) + 24px) clamp(24px,6vw,48px) 48px;
  display:flex; flex-direction:column; gap:var(--space-md);
  opacity:0; visibility:hidden;
  transition:opacity var(--duration-base) var(--ease-standard), visibility var(--duration-base);
  /* 🔴 必须能滚：抽屉是 20 多个条目的整屏菜单，每条 ≈61px（1.5rem 标题 + 上下 10px 内边距）
     → 合计远超过任何手机的一屏高度。不设 overflow 就只能看到前 8 条，
     底下的「研发与设施 / 资质与荣誉 / 资料中心 / 新闻中心 / 关于我们 / 联系我们」
     **永远够不到**（2026-10-13 客户实测反馈"拖不到底"）。
     · overscroll-behavior:contain —— 滚到尽头不要带着底下的页面一起滚
     · 底部留 safe-area —— iPhone 的小黑条不要压在最后一条上 */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px));
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer a:not(.btn){
  font-family:var(--font-heading); font-size:1.5rem; font-weight:600;
  color:var(--text-on-dark); padding-block:10px;
  border-bottom:1px solid var(--ink-700);
  opacity:0; transform:translateY(12px);
  transition:opacity .45s var(--ease-out-soft), transform .45s var(--ease-out-soft), color .15s;
}
.drawer.is-open a:not(.btn){ opacity:1; transform:none; }
.drawer a:not(.btn):hover{ color:var(--brand-200); }
.drawer a.is-active,
.drawer a[aria-current="page"]{ color:var(--brand-200); }
.drawer__close{
  /* fixed（而不是 absolute）：抽屉可滚动后，absolute 会跟着内容滚走，
     滚到中段就没有关闭入口了；fixed 让它**始终停在右上角**，
     且脱离文档流（不会挤占菜单条的排版，视觉位置与原来一致）。 */
  position:fixed; top:20px; right:clamp(24px,6vw,48px);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--text-on-dark); border:1px solid var(--ink-700); border-radius:var(--radius-md);
}
.drawer__close svg{ width:20px; height:20px; }
.drawer__cta{ margin-top:var(--space-md); }
/* 二级（场景）链接：Residential / Commercial / Outdoor
   ⚠️ v0.28.12 修：原写法 `color:var(--text-muted)` 引用的变量**全站从未定义**
   （styles.css 里 84 个令牌中没有它），无兜底值 → 该声明在计算值阶段失效，
   color 退化为「继承」：
     · 抽屉里继承到 body 的 --text-primary #14171C，压在 #0B1015 抽屉底上
       对比度只有 1.06:1 —— 三条链接在手机菜单里**几乎不可见**；
     · 页脚复用了同一个类，继承到近纯白 #F1F3F5，再叠加 18px/500，
       于是比同级链接（14px/400/72%白）又粗又亮，像三行加粗小标题。
   改为已定义的 --text-on-dark-muted（深底 8.0:1），并去掉全部 !important ——
   用 `.drawer a.drawer__sub` 的同等具体度压过 `.drawer a:not(.btn)`
   （源序在后即可胜出），这样页脚就不再被这一组规则牵连。 */
.drawer a.drawer__sub{
  font-size:1.125rem; font-weight:500;
  padding-left:24px; color:var(--text-on-dark-muted);
  border-bottom:none;
}
.drawer a.drawer__sub:hover{ color:var(--brand-200); }
/* 页脚里的二级链接：字号/字重/颜色一律随同级链接，仅保留 14px 缩进表达从属关系 */
.footer__col a.drawer__sub{ padding-left:14px; }

/* ───────────────────────────  8. Hero  ─────────────────────────── */
/* 满幅实景图 + 图上叠字 */
.hero-home{
  position:relative; min-height:min(94vh,940px);
  display:flex; align-items:flex-end;
  padding-top:var(--nav-h);
  background:var(--ink-950); overflow:hidden;
}
.hero-home__grid,
.hero-home__beam,
.hero-home__ambient{ display:none; }   /* v1 光效装饰退役 */
.hero-home__inner{
  position:relative; z-index:2; width:100%;
  max-width:var(--container); margin-inline:auto;
  padding:clamp(40px,7vw,88px) clamp(20px,4vw,40px) clamp(48px,7vw,88px);
}
.hero-lamp{ display:none; }

/* Hero 背景图与遮罩 */
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,16,21,.55) 0%,rgba(11,16,21,.35) 40%,rgba(11,16,21,.82) 100%);
}
/* 白天外景照：左下角压暗承托文字，右上角留出画面 —— 单层渐变，
   ⚠️ 不要用两层叠加：alpha 会相乘，很容易把整块压成全黑（实测踩到过）。 */
.hero-media--soft::after{
  background:linear-gradient(100deg,
    rgba(9,14,20,.92) 0%,
    rgba(9,14,20,.84) 26%,
    rgba(9,14,20,.58) 48%,
    rgba(9,14,20,.24) 72%,
    rgba(9,14,20,.08) 100%);
}
/* 底部 CTA：与首屏同一套对角遮罩，但**整体更浅一档** ——
   2026-10-12 客户要求"色调浅淡些、突出文字，参照首页头部效果"。
   实测首屏成片亮度 104 / CTA 原为 76（偏暗 27 级），故各档 alpha 下调约 0.12。
   方向、气质与 .hero-media--soft 完全一致，只提亮，不改性格。 */
.cta-band .hero-media--soft::after{
  /* 2026-10-12 客户反馈「04→05 仍有明显颜色差异」——复测发现我此前只取了**最左 38px 空白列**，
     那里恰好被对角遮罩压得最暗（alpha .72），所以量出"台阶 3"；而**整行口径**的台阶其实是 **+31**，
     最右侧天空处 **+57** ✗。根因：遮罩是 100° 对角（左 .72 → 右 .03），照片本身也是左暗右亮，
     **只把带底对齐某一列没有意义**。
     改法：加一层**垂直顶部渐隐**（用 04 段底边实测色 #152640 起、220px 内淡出），
     叠在对角遮罩之上 —— 这样照片顶边**整行**都是带底色，接缝在任何水平位置都为零台阶。 */
  background:
    linear-gradient(180deg, #152640 0, rgba(21,38,64,0) 150px),
    linear-gradient(100deg,
      rgba(9,14,20,.72) 0%,
      rgba(9,14,20,.58) 26%,
      rgba(9,14,20,.34) 48%,
      rgba(9,14,20,.12) 72%,
      rgba(9,14,20,.03) 100%);
}
/* 这张实拍的蓝天更浓、楼体更深 —— 单靠遮罩追不上首屏的通透感，
   故对**本段**图片再降一档饱和 + 微提亮（不动素材本体，只在 CTA 生效）。 */
.cta-band .hero-media img{ filter:saturate(.72) brightness(1.07) contrast(1.02); }
/* 2026-10-12 客户反馈：窄屏/宽比带宽下 cover 会竖裁，把地面与厂牌下半截切掉 ✗
   → 本段图片**贴底对齐**（object-position:center bottom），无论如何都不切地面；代价是极端宽比时裁顶部天空。*/
.cta-band .hero-media img{ object-position:center bottom; }
/* 该段带宽比例（1080→1.63 / 1440→2.10）比图片更宽 → cover 会裁掉图片下方地面。
   加 80px 底衬把带宽比例压到 ≈1.88，使「楼顶 + 地面」在常见宽度下都进画面。 */
.cta-band{ padding-bottom:calc(var(--space-5xl) + 80px); }
/* 图片本身轻微降饱和，避免彩色照片与品牌蓝打架 */
.hero-media img{ filter:saturate(.82) contrast(1.04); }
.hero-home .h1,.hero-home .h2,.hero-home .display,.hero-home .display-xl{ color:#fff; }
.hero-home .body-l,.hero-home .small,.hero-home .text-secondary{ color:rgba(255,255,255,.86); }
/* 底图不可控（白天外景/车间/实验室都可能），文字加一层极轻投影兜底可读性 */
.hero-home__inner > *{ text-shadow:0 1px 12px rgba(9,14,20,.55); }
.hero-chip{ text-shadow:none; }
.hero-home .overline{ color:var(--brand-200); }

/* 首页 hero 主标题**一行显示**（v0.28.18，客户指定）：
   英文「Light,precisely placed.」实测宽 **10.34em**，而它外面那层文本块是 max-width:720px，
   在满号 86.4px 下要 893px —— 必然折成两行。
   改法（纯 CSS，不动 HTML）：不再折行，改为**按可用宽度自适应字号**：
     · 视口 ≥973px：仍取满号 5.4rem（893px ≤ 容器内容宽 1260px），与原来一样大；
     · 更窄则等比缩小，永不折行、永不横向溢出；最小到 641px 视口约 51px。
   公式取 `(100vw − 100px) / 10.6`：100px 吃掉左右内边距(40×2)与桌面滚动条(~15)还有余量，
   除数 10.6 比实测 10.34 留 2.5% 安全裕度；两者相加保证任何宽度下都不溢出。
   ⚠️ 只在 ≥641px 生效：手机上的标题本就该折行（35px 挤一行反而不可读）。 */
@media (min-width:641px){
  .hero-home .display-xl{
    white-space:nowrap;
    font-size:min(5.4rem, calc((100vw - 100px) / 10.6));
  }
}

/* Hero 信息胶囊（原玻璃拟态，v2 改为半透明白） */
.hero-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 18px; border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  color:rgba(255,255,255,.86) !important;
}
.hero-chip span{ color:var(--brand-200); font-weight:600; }

/* Hero 上方/下方内容叠加层（用于子页大图 Hero） */
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,16,21,.50) 0%,rgba(11,16,21,.30) 45%,rgba(11,16,21,.78) 100%);
}
/* 图片区块通用：满幅图容器 */
.figure-band{
  position:relative; overflow:hidden; background:var(--ink-900);
}
.figure-band img{ width:100%; height:100%; object-fit:cover; }
.figure-band__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--space-xl); color:#fff;
  background:linear-gradient(180deg,transparent,rgba(11,16,21,.78));
}

/* 子页 Hero：白底 + 面包屑 */
.hero-light{ background:var(--surface-bg); }
.hero-light--sub{ padding-top:calc(var(--nav-h) + 56px); padding-bottom:var(--space-4xl); }
.hero-light--sub-sm{ padding-top:calc(var(--nav-h) + 40px); padding-bottom:var(--space-3xl); }
.hero-light__ambient{ display:none; }
.hero-breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-size:.8125rem; color:var(--text-tertiary); margin-bottom:var(--space-lg);
}
.hero-breadcrumb a:hover{ color:var(--brand-600); }
.hero-split{ position:relative; overflow:hidden; }

/* ───────────────────────────  9. 图片卡片  ─────────────────────────── */
/* 图片媒体卡：直角、图上叠字、hover 轻微放大（OKT 式） */
.media-card{
  position:relative; display:block; overflow:hidden;
  background:var(--surface-sunken);
  border-radius:var(--radius-xs);
}
.media-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--duration-slow) var(--ease-out-soft);
}
.media-card:hover img{ transform:scale(1.04); }
.media-card__label{
  position:absolute; left:0; right:0; bottom:0;
  padding:var(--space-lg) var(--space-lg) var(--space-md);
  background:linear-gradient(180deg,transparent 0%,rgba(11,16,21,.72) 100%);
  color:#fff;
}
.media-card__label h3,.media-card__label h4{ color:#fff; }
.media-card__label p{ color:rgba(255,255,255,.78); }
.media-card--flat .media-card__label{ position:static; background:none; color:var(--text-primary); padding:var(--space-md) 0 0; }
.media-card--flat .media-card__label h3,
.media-card--flat .media-card__label h4{ color:var(--text-primary); }
.media-card--flat .media-card__label p{ color:var(--text-secondary); }

/* 通用卡 */
.card{
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-lg);
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard);
}
.card:hover{ border-color:var(--brand-200); box-shadow:var(--shadow-raised); transform:translateY(-2px); }
.card-lum{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.dark .card,.dark .card-lum{ background:var(--ink-800); border-color:var(--ink-700); }

/* 产品卡（图片在上、规格在下） */
.product-card{
  display:flex; flex-direction:column;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); overflow:hidden;
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard);
}
.product-card:hover{ border-color:var(--brand-200); box-shadow:var(--shadow-floating); transform:translateY(-3px); }
.product-card__media{
  position:relative; aspect-ratio:1/1; background:#fff;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--border-subtle); overflow:hidden;
}
.product-card__media img{ width:100%; height:100%; object-fit:contain; padding:var(--space-xl); }
/* 无图时的占位（原官网未提供该产品图） */
.product-card__media--empty{
  display:grid; place-items:center; width:100%; height:100%;
  color:var(--text-tertiary); font-size:.8125rem; letter-spacing:.04em;
  background:repeating-linear-gradient(45deg,var(--neutral-50) 0 10px,var(--neutral-100) 10px 20px);
}
.product-card__badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.product-card__body{ padding:var(--space-xl) var(--space-lg) var(--space-lg); display:flex; flex-direction:column; gap:var(--space-sm); flex:1; }
.product-card__cat{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand-600);
}
.product-card__title{ font-family:var(--font-heading); font-size:1rem; font-weight:600; line-height:1.35; }
.product-card__specs{ display:flex; flex-wrap:wrap; gap:var(--space-lg); margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px solid var(--border-subtle); }
/* 卡片底部可能并列两个入口（规格书下载 + 技术资料），需横向排布并留间距 */
.product-card__foot{
  margin-top:auto; padding-top:var(--space-md);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md);
}
.product-card--dark{ background:var(--ink-800); border-color:var(--ink-700); color:var(--text-on-dark); }
.product-card--dark .product-card__media{ background:var(--ink-900); border-bottom-color:var(--ink-700); }
.product-card--dark .product-card__cat{ color:var(--brand-200); }

.mini-spec{ display:flex; flex-direction:column; gap:2px; }
.mini-spec__k{
  font-family:var(--font-mono); font-size:.625rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);
}
.mini-spec__v{ font-family:var(--font-mono); font-size:.8125rem; font-weight:500; color:var(--text-primary); }
.dark .mini-spec__k,.product-card--dark .mini-spec__k{ color:var(--text-on-dark-muted); }
.dark .mini-spec__v,.product-card--dark .mini-spec__v{ color:var(--text-on-dark); }

/* 规格方框 */
.spec-box{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--space-md); background:var(--surface-alt);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
}
.spec-box__k{
  font-family:var(--font-mono); font-size:.625rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);
}
.spec-box__v{ font-family:var(--font-mono); font-size:.9375rem; font-weight:500; }
.spec-box__u{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-tertiary); }
.dark .spec-box{ background:var(--ink-800); border-color:var(--ink-700); }
.dark .spec-box__k{ color:var(--text-on-dark-muted); }
.dark .spec-box__v{ color:var(--text-on-dark); }

/* 案例卡 */
.case-card{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-card);
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard);
}
.case-card:hover{ border-color:var(--brand-200); box-shadow:var(--shadow-floating); transform:translateY(-3px); }
.case-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-sunken); }
.case-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out-soft); }
.case-card:hover .case-card__media img{ transform:scale(1.05); }
.case-card__body{ padding:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-xs); }

/* 业务线卡（大图 + 圆形图标 + 说明） */
.biz-card{
  position:relative; display:flex; flex-direction:column;
  overflow:hidden; border-radius:var(--radius-md);
  border:1px solid var(--border-subtle); background:var(--surface-card);
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard);
}
.biz-card:hover{ border-color:var(--brand-200); box-shadow:var(--shadow-floating); transform:translateY(-3px); }
.biz-card__glow{ display:none; }   /* v1 光效退役 */
.biz-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-sunken); }
.biz-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out-soft); }
.biz-card:hover .biz-card__media img{ transform:scale(1.05); }
/* 业务线卡片代表图轮播（多图叠放 · 交叉淡入）
   · 无 JS 时由 HTML 里首图的 .is-active 兜底显示第一张（渐进增强）
   · prefers-reduced-motion 下由 js/app.js 停止切换，只显示首图
   · 容器 aspect-ratio:16/10 提供高度，图片一律绝对定位 */
.biz-card__media--cycle img{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .9s var(--ease-out-soft), transform var(--duration-slow) var(--ease-out-soft);
}
.biz-card__media--cycle img.is-active{ opacity:1; }
/* 通用照明页 hero 视觉轮播：两张图交替淡入（不把全部型号图一次性压进首屏）
   · 容器 aspect-ratio 与产品封面图**同比例（600/488，见页面内联样式）** →
     `object-fit:cover` 下图片**像素级填满、零裁剪**（产品图统一 600×488，实测确认）
   · 图注放在容器**外**的下方：图片填满后若把图注叠在底部，会压住图内的认证徽标行 */
.hero-rotate{ position:absolute; inset:0; }
.hero-rotate img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s var(--ease-out-soft);
}
.hero-rotate img.is-active{ opacity:1; }
.hero-rotate__cap{
  margin-top:10px; text-align:center;
  font-size:13px; line-height:1.4; color:var(--text-secondary);
}
.biz-card__body{ padding:var(--space-lg); display:flex; flex-direction:column; gap:var(--space-sm); flex:1; }
.biz-card__icon{
  width:52px; height:52px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-600);
  border:1px solid var(--brand-100); margin-top:calc(var(--space-lg) * -1.9);
  position:relative; z-index:2;
}
.biz-card__icon svg{ width:24px; height:24px; }
.biz-card__tag{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand-600);
}
.biz-card--plant .biz-card__icon{ background:#EAF7EF; color:#0E9F6E; border-color:#C8EBD8; }
.biz-card--plant .biz-card__tag{ color:#0B7C57; }

/* 特性块 */
.feature{ display:flex; gap:var(--space-md); align-items:flex-start; }
.feature__icon{
  width:44px; height:44px; flex-shrink:0; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100);
}
.feature__icon svg{ width:22px; height:22px; }
.dark .feature__icon{ background:rgba(79,179,232,.12); color:var(--brand-200); border-color:rgba(79,179,232,.26); }
.dark .feature p{ color:var(--text-on-dark-muted); }

/* 数据统计 */
.stat{ display:flex; flex-direction:column; gap:var(--space-2xs); }
.stat__num{ font-family:var(--font-mono); font-size:clamp(2.2rem,4.2vw,3.5rem); font-weight:600; line-height:1; color:var(--brand-600); letter-spacing:-.03em; }
.stat__unit{ font-family:var(--font-mono); font-size:1.15rem; color:var(--text-secondary); margin-left:4px; }
.stat__label{ font-size:.8125rem; color:var(--text-secondary); }
.dark .stat__num{ color:var(--brand-200); }
.dark .stat__label,.dark .stat__unit{ color:var(--text-on-dark-muted); }

/* ───────────────────────────  10. 内容区块  ─────────────────────────── */
/* 流程时间轴 */
.timeline{ position:relative; display:grid; gap:var(--space-2xl); }
.timeline__step{ position:relative; padding-left:var(--space-3xl); }
/* 年份牌匾：仿公司历程墙的"实心色牌 + 右侧尖角"造型（2026-10-12 客户指定）
   —— 实心填充 + 白字；右侧用 ::after 画尖角（三角），整体像一块小牌匾 */
.timeline__dot{
  position:absolute; left:0; top:-2px;               /* 与内容首行垂直居中 */
  min-width:62px; height:30px; padding:0 10px;
  border-radius:6px 0 0 6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--dotc,var(--brand-500)); color:#fff;
  font-family:var(--font-mono); font-size:.8125rem; font-weight:600;
  letter-spacing:.02em;
}
.timeline__dot::after{                                /* 右侧尖角 */
  content:""; position:absolute; left:100%; top:0;
  width:0; height:0; border-style:solid;
  border-width:15px 0 15px 11px;                     /* 高度=30px 的一半 */
  border-color:transparent transparent transparent var(--dotc,var(--brand-500));
}
.timeline__step{ position:relative; padding-left:calc(var(--space-3xl) + 26px); }
.timeline__body > p{ line-height:1.7; }
.timeline__body{ display:flex; flex-direction:column; gap:var(--space-xs); }
.timeline__meta{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-tertiary);
}
.dark .timeline__meta{ color:var(--text-on-dark-muted); }
.dark .timeline__dot{ background:var(--dotc,var(--brand-400)); color:#fff; }
.dark .timeline__dot::after{ border-left-color:var(--dotc,var(--brand-400)); }

/* 技术参数表 */
.table-wrap{ overflow-x:auto; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:#fff; }
.tech-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.8125rem; }
.tech-table th{
  font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-secondary); text-align:left;
  padding:var(--space-md) var(--space-md); background:var(--surface-alt);
  border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
.tech-table td{ padding:var(--space-md); border-bottom:1px solid var(--border-subtle); color:var(--text-primary); }
.tech-table tbody tr:nth-child(odd){ background:var(--neutral-25); }
.tech-table tbody tr:hover{ background:var(--brand-25); }
.tech-table .unit{ color:var(--text-tertiary); }
.dark .table-wrap{ background:var(--ink-800); border-color:var(--ink-700); }
.dark .tech-table th{ background:var(--ink-800); color:var(--text-on-dark-muted); border-bottom-color:var(--ink-600,#2C3B4D); }
.dark .tech-table td{ color:var(--text-on-dark); border-bottom-color:var(--ink-700); }
.dark .tech-table tbody tr:nth-child(odd){ background:var(--ink-900); }
.dark .tech-table tbody tr:hover{ background:var(--ink-700); }

/* 认证墙 */
.logo-wall{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--border-subtle);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden;
}
.logo-wall__item{
  display:flex; align-items:center; justify-content:center; gap:var(--space-xs);
  min-height:92px; padding:var(--space-md);
  background:#fff; color:var(--text-secondary);
  font-family:var(--font-mono); font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.logo-wall__item:hover{ background:var(--brand-25); color:var(--brand-700); }
.dark .logo-wall{ background:var(--ink-700); border-color:var(--ink-700); }
.dark .logo-wall__item{ background:var(--ink-800); color:var(--text-on-dark-muted); }
.dark .logo-wall__item:hover{ background:var(--ink-700); color:var(--brand-200); }

/* 光谱面板（植物灯页） */
.spectrum-panel{
  background:var(--ink-900); border:1px solid var(--ink-700);
  border-radius:var(--radius-md); padding:var(--space-lg);
}
.spectrum-panel__head{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); flex-wrap:wrap; margin-bottom:var(--space-md); }
.spectrum-panel svg{ width:100%; height:auto; }
.trace-path{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.6s var(--ease-out-soft);
}
.trace-path.is-drawn{ stroke-dashoffset:0; }
.spectrum-area{ opacity:.5; }

/* 技术带（图文并排）
   ── 2026-10-12 客户反馈①：首页 02「企业实力」与 04「检测能力」的风格色调与整体不协调。
      归因：这两段（以及 about / grow-light 的同名段落）叠了 `.tech-band::before` 的
      **硬边放射扇**（repeating-conic-gradient，opacity .05）—— 落点 50% 42%、inset -28%，
      在 505px 与 754px 两种高度的段上扇形比例、中心位置都不一样；而全站其余深色段
      要么是照片（hero / CTA），要么是干净的纯色（页脚虽有同一纹理，但被密集链接压住看不出来）。
      于是这两段成了全站唯一"硬边几何纹理"的地方，显得突兀。
   ── 2026-10-12 客户反馈②：首页"间隔颜色太多"（实测共存 10 档底色）。要求这两段**改蓝调**，
      且**色调取自马来工厂的蓝天**，让 04「检测能力」→ 05「开启合作」过渡一致。
      🔬 取色实测（不是估的）：
        · 马来工厂原图顶部天空：中位 #2A589A → 色相 215°、饱和 73%、明度 60%
          （平均 #39619D → 216°）；
        · 05 段**实际渲染**的顶边（照片 + 遮罩后）：#17273A → 色相 213°、饱和 60%、明度 23%；
        · 改前 04 的底边：#041423 → 色相 210°、明度 14%。
        → 结论：**色相本来就同族（相差 3°），真正"跳"的是明度（14% vs 23%）与饱和（87% vs 60%）**。
      改法：整条带按天空色相 214° 重定，并让**带的底端渐变到 05 段的实测顶边色**，接缝自然接上：
        0% #071829（深，上缘与白底段落分界清晰）→ 55% #0D2440 → 100% #152640（≈05 顶边 #17273A）
        + 左上极淡**天空蓝**辉光（色值取自照片 #39619D，不是品牌蓝，以保持"同一片天空"）。
      ⚠️ 底色抬高后弱化文字必须同步提亮（作用域仅本段）：实测 #7E8A99 在带内最亮处只有 4.3:1（低于 AA），
         改用 #8B98A6 → 全带最坏处 5.1:1 ✓；白字 13~15:1 ✓；品牌蓝数字 6.8:1 ✓。 */
.tech-band{
  position:relative; color:var(--text-on-dark); overflow:hidden;
  --text-on-dark-muted:#8B98A6;
  background:
    radial-gradient(120% 88% at 10% -10%, rgba(57,97,157,.28), transparent 60%),
    linear-gradient(180deg, #071829 0%, #0D2440 55%, #152640 100%);
  /* ⚠️ 2026-10-12 客户反馈「04-05 这里不要看到交界缝隙」——
     这两条是我 v0.28.48 自己加的发丝线（客户没要求过）。实测它在 04→05 接缝处是一条
     **+12 亮度的横线**（逐行剖面 41 → 53 → 38），在"照片顶部已渐变到带底色"的情况下反而
     成了唯一的可见缝隙 ✗。故整条去掉：深底段与相邻白底/照片之间用**干净的明暗边界**即可，
     这也是站内其它段落的做法（其它 section 都没有描边）。 */
  border:0;
}
.tech-band::before{ display:none; }      /* 取消放射扇（必须在本文件 224 行那组规则之后） */
.tech-band__inner{ position:relative; z-index:2; }
.tech-band__grid,.tech-band__ambient{ display:none; }

/* CTA 带 */
/* 2026-10-12 客户要求：CTA 的标题与导语各控在 2 行。
   🔬 实测（1440 视口）：`.container` 宽 1340px，但两侧 padding 各 48px → **实际可用内容宽 1244px**。
      标题第 2 行「Entrust it to a team Light literacy that understands light」在 display 字号 60.8px 下
      固有宽度 **1519px** → 放不进 1244px，折成多行（原文案更因 `max-width:18ch`=738px 折成 **5 行**）。
      → 反算所需字号 = 60.8 × 1244×0.97/1519 ≈ **48px**（48px 时该行 1199px ✓ 留 45px 余量），故上限取 3rem。
      ⚠️ 这里最容易算错的是"可用宽度"：容器 1340 是**边框盒**，别忘减 padding（本轮先按 1340 算、折了 3 行才发现）。
      作用域限定 `.cta-band`（hero 的大标题不受影响）；中英同步用同一字号，避免两种语言的标题大小不一。
      导语的宽度约束在页面内联样式里（52ch → 76ch），见 index.html 注释。 */
.cta-band .display{ font-size:clamp(1.9rem, 3.35vw, 3rem); }
.cta-band{ position:relative; overflow:hidden; background:var(--ink-900); color:var(--text-on-dark); }
.cta-band__beam,.cta-band__ambient{ display:none; }
.cta-band .container{ position:relative; z-index:2; }

/* ── 公司介绍视频（首页 hero 之下、业务线之上）────────────────────────────
   客户 2026-10-12 两次定位置/尺寸：先在 hero 与「01 / Portfolio」之间，
   再把窗口**放大到铺满内容容器**（客户在截图上按容器宽度画了框）。
   所以这里**不设 max-width** —— 宽度等于 `.container` 的内容区
   （1440 屏上约 1260px，16:9 → 709px 高），与上下各段落在同一条栅格上对齐。
   ⚠️ 视频用 `poster` + `preload="none"`：**不点播放就不下载**（成片几十 MB，
      不该让每个访客都为它付流量与等待）。 */
.intro-video{
  margin:0; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--ink-800); border:1px solid var(--border-subtle); box-shadow:var(--shadow-floating);
}
.intro-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }

/* 场景可视块（内联 SVG 图区） */
.scene-visual{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  background:var(--surface-sunken); border:1px solid var(--border-subtle);
}
.scene-visual svg,
.scene-visual img{ display:block; width:100%; height:auto; }   /* 2026-10-12 起场景视觉可用实拍图替代插画 */
.dark .scene-visual{ background:var(--ink-800); border-color:var(--ink-700); }

/* ───────────────────────────  11. 表单  ─────────────────────────── */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.8125rem; font-weight:600; color:var(--text-secondary); }
.input,.textarea,.select{
  width:100%; min-height:48px; padding:12px 16px;
  font-family:var(--font-body); font-size:.9375rem; color:var(--text-primary);
  background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius-md);
  transition:border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
}
.textarea{ min-height:132px; resize:vertical; line-height:1.65; }
.input::placeholder,.textarea::placeholder{ color:var(--text-tertiary); }
.input:focus,.textarea:focus,.select:focus{
  outline:none; border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(0,112,192,.14);
}
.helper{ font-family:var(--font-mono); font-size:.75rem; color:var(--text-tertiary); }

/* ───────────  型号 / 描述检索（通用照明 · 资料中心）  ───────────
   · **默认隐藏**：无 JS 时露出一个点了没反应的输入框，比不显示更糟；靠 .is-ready 由 JS 露出
   · 底样式复用既有 .input，这里只加图标定位与自绘清除按钮
   · 清除按钮用 class 控制显隐（不用 hidden 属性，避免被 .input 的块级样式覆盖） */
.products-toolbar{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-md); }
.search-box{ display:none; }
.search-box.is-ready{ display:block; }
.search-field{ position:relative; display:flex; align-items:center; width:440px; max-width:100%; }
/* ⚠️ 原用 min-width:min(320px,100%) —— 在 align-items:flex-end 的列里 `100%` 参照的是
   被内容撑开的父列宽，会退化成 252px，扣掉 38/40px 内边距只剩 174px，提示文字被裁。
   （实测 EN 提示文字 337px / CN 250px → 分别溢出 163px / 76px）故改为明确宽度。 */
.search-field__icon{ position:absolute; left:12px; width:17px; height:17px; color:var(--text-tertiary); pointer-events:none; }
.search-field__input{ padding-left:38px; padding-right:40px; }
.search-field__input::-webkit-search-cancel-button,
.search-field__input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.search-field__clear{
  position:absolute; right:6px; display:none; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius-full); color:var(--text-secondary);
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.search-field__clear.is-shown{ display:flex; }
.search-field__clear:hover{ background:var(--surface-sunken); color:var(--text-primary); }
.search-field__clear svg{ width:14px; height:14px; }
.search-field__count{ margin:8px 0 0; color:var(--text-tertiary); min-height:1.15em; }
@media (min-width:900px){ .products-toolbar{ align-items:flex-end; } }
@media (max-width:520px){ .search-field{ width:100%; } }
.dark .field label{ color:var(--text-on-dark-muted); }
.dark .input,.dark .textarea,.dark .select{ background:var(--ink-800); border-color:var(--ink-700); color:var(--text-on-dark); }

/* ───────────────────────────  12. 页脚  ─────────────────────────── */
.footer{ background:var(--ink-950); color:var(--text-on-dark); }
.footer__grid{
  display:grid; grid-template-columns:1.6fr repeat(3,1fr);
  gap:var(--space-2xl); padding-bottom:var(--space-2xl);
}
.footer__logo{ margin-bottom:var(--space-md); }
.footer__col{ display:flex; flex-direction:column; gap:10px; }
.footer__col h4{
  /* 2026-10-19：11px→13px（客户反馈标题偏小；链接正文 14px，眉题风格保留） */
  font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-on-dark-muted); margin-bottom:var(--space-xs);
}
.footer__col a{ font-size:.875rem; color:rgba(255,255,255,.72); transition:color var(--duration-fast) var(--ease-standard); }
.footer__col a:hover{ color:var(--brand-200); }
.footer__bottom{
  /* 窄屏（<1000px）兜底：flex + space-evenly —— 三块宽度之和放不下时**自动换行**，
     绝不重叠；≥1000px 改为按「10 等分坐标」精确落位，见下方 v0.28.17 规则。 */
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-evenly; text-align:center;
  gap:var(--space-md); padding-top:var(--space-lg);
  border-top:1px solid var(--ink-700);
  font-size:.8125rem; color:var(--text-on-dark-muted);
}

/* ── 底部三块按「10 等分坐标」落位（v0.28.17，客户指定）────────────────────
   把底部整幅宽视作 10 个坐标点：
     · 版权行**首字母**        落在 0.5 点（5%）
     · SEA☆STAR 的**五角星心** 落在 5 点（50%）
     · Cookie settings 的**尾字母** 落在 9.5 点（95%）
   实现要点：
     ① 版权行留在**文档流内**（底部条的高度仍由它自然撑开），用 text-indent:5% 平移 ——
        百分比按本容器内容宽解析，本容器无左右内边距，与绝对定位兄弟的百分比同基准；
     ② 品牌块绝对定位在 left:50%，再向左平移「星心距块左沿」的距离，让**星心**而非
        整块中心落在 5 点。该偏移实测恒为 30.3px = "SEA" 前缀 23.4px + 星宽 14px/2，
        中英完全一致（☆ 之前的字符相同），写成 2.33em 随笔字号缩放；
     ③ Cookie 用 right:5% —— 按钮无内边距/边框，其**右沿即尾字母右沿**，故尾字母正好落在 9.5 点；
        右侧锚定天然不会溢出（此前 90% 左沿锚定在窄屏会顶出，需 min() 兜底，现已不需要）。
   🔴 断点为什么是 1000px 而不是 641px（v0.28.16 的实测教训）：
      英文版权行宽 **359px**（固定），左锚点 5% 时其右沿在 0.05W+359；
      中间品牌块左沿在 0.5W−30.3。要求两者不重叠且留 ≥16px：
        0.05W + 359 + 16 ≤ 0.5W − 30.3  →  W ≥ 901px（栏宽）
      而栏宽 = 视口 − 80（≥1000px 时）→ **视口 ≥ 981px 才装得下**。
      641~999px 用绝对定位时，实测版权行与品牌块**文字重叠最高 69px**（1/5/9 点那版）。
   注：星心偏移依赖字体度量，字体换版后需重测（验证脚本见 output/tmp/fontlab/）。 */
@media (min-width:1000px){
  /* 2026-10-19 第二次调整（用户给的 OKT Lighting 参考）：底栏改为**单行**——
     版权左起 5%，法务链接用 | 分隔紧随其后，品牌靠右 5%。
     原 v0.28.17 的「10 等分绝对定位」不再使用（品牌不再居中），
     因为法务链接串长度已达 ~330px，居中的品牌必然与其相撞。 */
  .footer__bottom{
    display:flex; align-items:center; flex-wrap:wrap; row-gap:.35em;
    justify-content:flex-start;
    padding-left:5%; padding-right:5%; text-align:left;
    gap:.45em;
  }
  /* 版权句子**不许断行**：否则 flex 会把它压成两行、把品牌挤到 Cookie 旁边（1100px 实测）。
     nowrap 后它会顶住不缩，空间够就一行、不够就整体换行，不会出现半截断句。 */
  .footer__bottom > span:first-child{ white-space:nowrap; }
  .footer__bottom > .footer__legal{
    position:static; display:flex; align-items:center; flex-wrap:nowrap;
    gap:.45em; margin:0; text-indent:0; white-space:nowrap;
  }
  .footer__bottom > .mono{
    position:static; left:auto; transform:none;
    margin:0 0 0 auto; text-indent:0; white-space:nowrap;
  }
}
.footer__bottom .brand-star{ width:.62em; height:.62em; vertical-align:-.02em; }
.footer__bottom a{ color:var(--text-on-dark-muted); }
.footer__bottom a:hover{ color:var(--brand-200); }
/* 法务链接之间的竖线分隔（参照 OKT Lighting 的 "Sitemap | Terms | Privacy" 样式） */
.footer__sep{ opacity:.4; margin:0 .12em; user-select:none; }
/* 法务簇（窄屏 <1000px）：跟随底栏 flex 换行，居中排布不溢出。
   ≥1000px 时由上方媒体查询改为绝对定位右锚定。 */
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5em; }

/* 窄屏底栏：三块各占一行、整体居中 —— 版权句子较长，挤在一行会溢出（实测 390px 被切）。
   ≥1000px 的三区绝对定位不受影响（该媒体查询在后面，且选择器更具体）。 */
@media (max-width:999px){
  .footer__bottom > span{ flex:1 1 100%; min-width:0; }
  .footer__bottom > .footer__legal{ flex:1 1 100%; }
}

/* ───────────────────────────  13. 动效  ─────────────────────────── */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--duration-slow) var(--ease-out-soft),
             transform var(--duration-slow) var(--ease-out-soft);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:80ms; }
.reveal-d2{ transition-delay:160ms; }
.reveal-d3{ transition-delay:240ms; }
.reveal-d4{ transition-delay:320ms; }
.ignite{ animation:ignite .9s var(--ease-out-soft) both; }
@keyframes ignite{ from{ opacity:0; } to{ opacity:1; } }
.sheen{ position:relative; }

/* ───────────────────────────  14. 响应式  ─────────────────────────── */
/* 导航单行保障（v0.28.11）：
   九个栏目 + Logo(151) + 中文按钮 + CTA 的固定开销约 391px，
   15px 字号下栏目文字总宽约 605px（实测，非估算）。
   → 1180px 以下容器放不下（1081~1199 实测整体溢出 15~65px），
     故横向导航的断点由 1080px 上移到 1200px，以下交给汉堡抽屉；
   → 1200~1439px 用 14px 字号 + 14px 间距（内容 1051px ≤ 可用 1120px，余量 69px）；
   → ≥1440px 回到 15px 字号 + 自适应间距（最大 26px，内容 1180~1204px ≤ 1260px）。
   原 `clamp(14px,2.2vw,34px)` 在这两档都会把「General Lighting / About Us /
   Contact Us」挤成两行 —— 且 1440 附近恰卡在临界值上，随字体度量微抖就折行。 */
@media (max-width:1439px){
  .nav__inner{ gap:var(--space-lg); }
  .nav__links{ gap:14px; }
  .nav__links a{ font-size:.875rem; }
}
@media (max-width:1199px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
}
@media (max-width:1080px){
  .footer__grid{ grid-template-columns:1fr 1fr; gap:var(--space-xl); }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  :root{ --nav-h:72px; }
  .section{ padding-block:var(--space-3xl); }
  .section-lg{ padding-block:var(--space-4xl); }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-home{ min-height:min(78vh,640px); }
}
@media (max-width:640px){
  :root{ --nav-h:64px; }
  body{ font-size:16px; }   /* 2026-10-19：15px 偏小，随桌面侧一起上调（手机端正文 16px）*/
  .section{ padding-block:var(--space-2xl); }
  .section-lg{ padding-block:var(--space-3xl); }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:minmax(0,1fr); }
  .footer__grid{ grid-template-columns:minmax(0,1fr); }
  .footer__bottom{ flex-direction:column; align-items:center; }
  .timeline__step{ padding-left:calc(var(--space-2xl) + 26px); }
  .hero-home{ min-height:auto; padding-top:calc(var(--nav-h) + 40px); }
  .btn{ height:46px; padding:0 20px; }
  .btn--lg{ height:50px; padding:0 24px; }
  .display-xl{ font-size:clamp(2rem,9vw,2.6rem); }
  .display{ font-size:clamp(1.7rem,7.5vw,2.1rem); }
}
/* 导航 Logo 尺寸对齐源站 www.wx-seastar.com：源站规则 #logo img{max-height:40px}
   （源图 335×89 → 40px 高 = 151px 宽）。
   ⚠️ 实测（2026-10-10，iframe 精确视口）：40px 时导航内容需 405px 宽，
   ≤420px 若不回落会横向溢出（375px 屏溢出 30px）。
   源站导航没有 CTA 按钮，故它能全断点保持 40px；本站有，故窄屏回落。 */
@media (max-width:420px){
  .brand-img--nav{ height:28px; }
}

/* ───────────────────────────  15. 无障碍  ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .trace-path{ stroke-dashoffset:0; }
  .media-card:hover img,.case-card:hover .case-card__media img,.biz-card:hover .biz-card__media img{ transform:none; }
}
@media print{
  .nav,.drawer,.cta-band{ display:none !important; }
  body{ background:#fff; }
}


/* ── 语言切换器（v0.12.0）───────────────────────────────────────────────
   放在导航右侧、与「获取报价」按钮并排。
   中文页显示 EN、英文页显示 中文 —— 互为入口。 */
.lang-switch{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:34px;padding:0 10px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--text-secondary);text-decoration:none;
  border:1px solid var(--border-strong);border-radius:var(--radius-pill,999px);
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.lang-switch:hover{color:var(--brand-500);border-color:var(--brand-500);background:var(--brand-25);}
/* 语言切换的**隐形触控区**：视觉可以做得小巧（正圆），但命中区始终 ≥44×44 ✓
   （a11y 块用 min-height:44px 达标，那会把正圆顶成椭圆 ✗ → 改用伪元素撑命中区）。 */
.lang-switch{ position:relative; }
.lang-switch::after{ content:""; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%); }
/* 2026-10-13：语言切换**必须是正圆**（客户报障：被做成 36×30 的椭圆 ✗）
   → 统一用 `width == height` + padding:0，标签用 11.5px 保证「中文」两字也放得下。 */
@media (max-width:900px){.lang-switch{width:32px;height:32px;min-width:0;padding:0;font-size:11.5px;}}

/* ═══════════════════════════════════════════════════════════════════════
   Cookie 同意横幅 & 偏好中心（v0.15.0）
   ---------------------------------------------------------------------
   原则：不遮挡内容、不锁滚动（面板打开时才锁）、不引入第三方资源。
   浅色表面的悬浮层用 --shadow-overlay 与页面拉开层级。
   ═══════════════════════════════════════════════════════════════════════ */

/* 仅供屏幕阅读器 */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* 面板打开时锁住背景滚动 */
body.cc-locked{ overflow:hidden; }

/* ── 横幅 ────────────────────────────────────────────────────────────── */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:var(--surface-bg);
  border-top:1px solid var(--border-subtle);
  box-shadow:0 -12px 40px rgba(20,23,28,.14);
  padding-block:var(--space-md);
  opacity:0; transform:translateY(14px);
  transition:opacity .24s var(--ease-out-soft), transform .24s var(--ease-out-soft);
}
.cc-banner.is-in{ opacity:1; transform:none; }
.cc-banner[hidden]{ display:none; }   /* 覆盖 flex/块级设置，保证 hidden 生效 */

.cc-banner__inner{
  display:flex; align-items:flex-start; gap:var(--space-lg);
  flex-wrap:wrap; justify-content:space-between;
}
.cc-banner__copy{ flex:1 1 540px; min-width:0; }
.cc-banner__title{
  margin:0 0 var(--space-xs);
  font-size:1.125rem; font-weight:600; color:var(--text-primary);
  letter-spacing:-.01em;
}
.cc-banner__body{
  margin:0; font-size:.9375rem; line-height:1.7;
  color:var(--text-secondary); max-width:78ch;
}
.cc-banner__body strong{ color:var(--text-primary); font-weight:600; }
.cc-banner__links{
  margin-top:var(--space-sm);
  display:flex; gap:var(--space-md); flex-wrap:wrap;
}
.cc-banner__actions{
  display:flex; align-items:center; gap:var(--space-sm);
  flex-wrap:wrap; flex-shrink:0;
}

/* 统一按钮尺寸：站点的 .btn 默认偏高，这里压缩到横幅能容纳的高度 */
.cc-btn{
  height:42px; padding:0 18px; font-size:.875rem; white-space:nowrap;
}
.cc-linkbtn,
.cc-btn--text{
  height:42px; padding:0 6px;
  background:none; border:none; cursor:pointer;
  font-size:.875rem; font-weight:500;
  color:var(--text-brand); font-family:inherit;
  text-decoration:underline; text-underline-offset:3px;
  transition:color .18s ease;
}
.cc-linkbtn:hover,
.cc-btn--text:hover{ color:var(--text-brand-deep); }
.cc-linkbtn:focus-visible,
.cc-btn--text:focus-visible{
  outline:2px solid var(--brand-500); outline-offset:2px; border-radius:var(--radius-sm);
}

/* ── 遮罩与面板 ──────────────────────────────────────────────────────── */
.cc-overlay{
  position:fixed; inset:0; z-index:1300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-lg);
  background:rgba(11,16,21,.46);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease;
}
.cc-overlay.is-in{ opacity:1; }
.cc-overlay[hidden]{ display:none; }

.cc-panel{
  width:min(620px,100%); max-height:min(86vh,760px); overflow-y:auto;
  background:var(--surface-bg); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay);
  padding:var(--space-xl);
  transform:translateY(10px) scale(.99);
  transition:transform .2s var(--ease-out-soft);
}
.cc-overlay.is-in .cc-panel{ transform:none; }

.cc-panel__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-md); margin-bottom:var(--space-sm);
}
.cc-panel__title{
  margin:0; font-size:1.25rem; font-weight:600; color:var(--text-primary);
  letter-spacing:-.01em;
}
.cc-close{
  flex-shrink:0; width:34px; height:34px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--text-tertiary); cursor:pointer;
  background:none; border:none; border-radius:var(--radius-md); font-family:inherit;
  transition:color .18s ease, background-color .18s ease;
}
.cc-close:hover{ color:var(--text-primary); background:var(--surface-sunken); }

.cc-panel__intro{
  margin:0 0 var(--space-lg); font-size:.875rem; line-height:1.7;
  color:var(--text-secondary);
}
.cc-panel__intro strong{ color:var(--text-primary); font-weight:600; }

/* ── 分类行 ──────────────────────────────────────────────────────────── */
.cc-row{
  padding:var(--space-md) 0;
  border-top:1px solid var(--border-subtle);
}
.cc-row:first-of-type{ border-top:none; }
.cc-row--locked{ opacity:.82; }

.cc-row__head{ display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap; }
.cc-row__title{
  margin:0; flex:1 1 auto; min-width:0;
  font-size:.9375rem; font-weight:600; color:var(--text-primary);
}
.cc-row__desc{
  margin:var(--space-xs) 0 0; font-size:.8125rem; line-height:1.68;
  color:var(--text-secondary); max-width:70ch;
}
.cc-row__desc strong{ color:var(--text-primary); font-weight:600; }

.cc-badge{
  flex-shrink:0; padding:3px 9px; border-radius:var(--radius-full);
  font-size:11px; font-weight:600; letter-spacing:.03em;
  background:var(--brand-50); color:var(--brand-700);
  border:1px solid var(--border-brand);
}
.cc-badge--locked{ background:var(--surface-sunken); color:var(--text-tertiary); border-color:var(--border-subtle); }

/* ── 开关 ────────────────────────────────────────────────────────────── */
.cc-switch{
  position:relative; flex-shrink:0;
  display:inline-flex; align-items:center; cursor:pointer;
}
.cc-switch__input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer;
}
.cc-switch__input:disabled{ cursor:not-allowed; }
.cc-switch__track{
  width:42px; height:24px; border-radius:var(--radius-full);
  background:var(--neutral-300);
  display:block; position:relative;
  transition:background-color .2s var(--ease-standard);
}
.cc-switch__dot{
  position:absolute; top:3px; left:3px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(20,23,28,.28);
  transition:transform .2s var(--ease-out-soft);
}
.cc-switch__input:checked + .cc-switch__track{ background:var(--brand-500); }
.cc-switch__input:checked + .cc-switch__track .cc-switch__dot{ transform:translateX(18px); }
.cc-switch__input:disabled + .cc-switch__track{ background:var(--neutral-200); opacity:.7; }
.cc-switch__input:checked:disabled + .cc-switch__track{ background:var(--brand-200); }
.cc-switch__input:focus-visible + .cc-switch__track{
  outline:2px solid var(--brand-500); outline-offset:3px;
}

.cc-panel__stamp{
  margin:var(--space-md) 0 0; font-size:.75rem; color:var(--text-tertiary);
  font-family:var(--font-mono);
}
.cc-panel__foot{
  display:flex; gap:var(--space-sm); flex-wrap:wrap;
  margin-top:var(--space-lg); padding-top:var(--space-lg);
  border-top:1px solid var(--border-subtle);
}
.cc-panel__hint{ margin:var(--space-md) 0 0; font-size:.75rem; color:var(--text-tertiary); }

/* ── 小屏：横幅改为堆叠，按钮铺满 ────────────────────────────────────── */
@media (max-width:720px){
  .cc-banner{ padding-block:var(--space-sm); }
  .cc-banner__inner{ gap:var(--space-md); }
  .cc-banner__actions{ width:100%; }
  .cc-banner__actions .cc-btn{ flex:1 1 auto; }
  .cc-panel{ padding:var(--space-lg); max-height:90vh; }
  .cc-panel__foot{ flex-direction:column; }
  .cc-panel__foot .cc-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .cc-banner, .cc-overlay, .cc-panel, .cc-switch__track, .cc-switch__dot{
    transition:none;
  }
  .cc-overlay.is-in .cc-panel{ transform:none; }
}

/* ── 页脚入口「Cookie 设置」（页脚是深色区，配色按 on-dark 走）──────── */
.footer__cc{
  /* <button> 要抹平浏览器默认样式，才能跟旁边的 span / a 排成一行 */
  background:none; border:none; padding:0; margin:0;
  font:inherit; font-size:inherit; line-height:inherit;
  color:var(--text-on-dark-muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
  transition:color .18s ease;
}
.footer__cc:hover{ color:var(--brand-200); }
.footer__cc:focus-visible{
  outline:2px solid var(--brand-200); outline-offset:3px; border-radius:var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════════════
   新闻板块（News）· v0.16.0
   ──────────────────────────────────────────────────────────────────────
   列表页用 .news-card，详情页用 .article。两者沿用站点 v2 的既有令牌，
   不引入任何新颜色。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 列表页：新闻卡 ─────────────────────────────────────────────────── */
.news-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard);
}
.news-card:hover{ border-color:var(--brand-200); box-shadow:var(--shadow-raised); transform:translateY(-2px); }
.news-card__media{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-sunken); }
.news-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--duration-slow) var(--ease-out-soft);
}
.news-card:hover .news-card__media img{ transform:scale(1.04); }
.news-card__body{ display:flex; flex-direction:column; gap:var(--space-sm); padding:var(--space-lg); flex:1; }
.news-card__date{ font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.02em; color:var(--text-secondary); }
.news-card__title{ color:var(--text-primary); margin:0; }
.news-card__title a{ color:inherit; text-decoration:none; }
.news-card:hover .news-card__title{ color:var(--brand-700); }

/* ── 详情页：文章 ───────────────────────────────────────────────────── */
.article{ max-width:74ch; }
.article__meta{
  display:flex; gap:var(--space-md); align-items:center; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.8125rem; color:var(--text-secondary);
  margin-bottom:var(--space-lg);
}
.article__body{ margin-top:var(--space-2xl); }
.article__body p{ margin:0 0 var(--space-lg); }
.article__body p:last-child{ margin-bottom:0; }
.article__figure{ margin:var(--space-2xl) 0; }
.article__figure img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius-sm); background:var(--surface-sunken);
}
.article-nav{
  display:flex; justify-content:space-between; gap:var(--space-lg); flex-wrap:wrap;
  margin-top:var(--space-3xl); padding-top:var(--space-lg);
  border-top:1px solid var(--border-subtle);
}
.article-nav a{ max-width:46%; }
@media (max-width:600px){ .article-nav a{ max-width:100%; } }

/* ── 新闻摘要（老站新闻列表的摘要文案）─────────────────────────────── */
.news-card__summary{ margin:0; }
.lead-quote{
  margin-top:var(--space-lg); padding-left:var(--space-lg);
  border-left:2px solid var(--brand-300);
  color:var(--text-secondary); font-style:normal;
}

/* ───────────  资料在线预览（v0.28.8）  ───────────
   需求：规格书 / 图纸 / IES / 视频等**要能直接在网页上打开**（不是只能下载）。
   · 操作列：可预览的格式给「查看/播放」，浏览器渲染不了的（Office/CAD/压缩包）只给「下载」
   · 弹层：PDF 用 iframe、图片用 img、视频用 <video controls>、IES/LDT/TXT/CSV 用 <pre> 纯文本 */
.doc-actions{ white-space:nowrap; }
.doc-actions__sep{ margin:0 6px; color:var(--border-strong); }
.doc-open{ background:none; border:0; padding:0; cursor:pointer; font:inherit; }
.docview{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; }
.docview__mask{ position:absolute; inset:0; background:rgba(12,16,22,.66); }
.docview__panel{
  position:relative; width:min(1200px,94vw); height:min(880px,92vh);
  display:flex; flex-direction:column; background:#fff; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-floating);
}
.docview__hd{
  display:flex; align-items:center; gap:var(--space-md);
  padding:10px 14px; border-bottom:1px solid var(--border-subtle); background:#fff;
}
.docview__title{ flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.docview__dl{ font-size:.875rem; font-weight:600; color:var(--brand-600); white-space:nowrap; }
.docview__close{
  width:34px; height:34px; flex:none; border:0; border-radius:var(--radius-full);
  background:none; color:var(--text-secondary); font-size:1rem; cursor:pointer;
}
.docview__close:hover{ background:var(--surface-sunken); color:var(--text-primary); }
.docview__bd{ flex:1; min-height:0; display:flex; background:var(--surface-sunken); }
.docview__frame{ width:100%; height:100%; border:0; }
.docview__img{ max-width:100%; max-height:100%; margin:auto; object-fit:contain; }
.docview__video{ max-width:100%; max-height:100%; margin:auto; background:#000; }
.docview__text{
  margin:0; padding:16px; width:100%; height:100%; overflow:auto;
  font-family:var(--font-mono); font-size:.8125rem; line-height:1.6; white-space:pre; color:var(--text-primary);
}
.docview__fallback{ margin:auto; padding:24px; text-align:center; color:var(--text-secondary); }
@media (max-width:700px){ .docview__panel{ width:100vw; height:100vh; border-radius:0; } }

/* ══ 手机端触控目标 / 浮层（2026-10-13）═══════════════════════════════════════
   实测 390×844（iPhone 14 尺寸）在**线上真实页面**上量出来的问题：
     可点元素里 **27 个高度 < 40px** ——
       · 页脚链接 24px、抽屉菜单项 24px（`.drawer a:not(.btn)`）
       · 资料下载链接 `.link-arrow` 26px（首页一屏就有 9 个）
       · 语言切换 30px（`.lang-switch` 在 ≤900px 被缩到 height:30px）
       · 顶部 logo 28px
     Apple/Google 的建议是**可点区域 ≥44×44px**；手机上这些位置手指点不准、
     容易点错相邻项。这里只在 ≤640px 补**垂直点击区**（字号与视觉位置保持不变）。
     另外 Cookie 面板实测占掉手机屏 **58%**，首屏内容整块被挡 → 限高 + 内部滚动。
   ⚠️ 选择器与既有规则**同特异性**、且写在文件末尾 → 稳定生效，不靠 !important；
   ⚠️ 只在 ≤640px / ≤720px 内，桌面端一行都不受影响。 */
@media (max-width:640px){
  .footer__col a,
  .footer__bottom a,
  .drawer a:not(.btn),
  .link-arrow,
  .lang-switch,
  .nav__logo,
  .footer__cc{ min-height:44px; }          /* .footer__cc = 页脚那枚「Cookie 设置」按钮（实测 22px，漏网的一个） */

  .footer__col a{ display:flex; align-items:center; }
  .drawer a:not(.btn){ display:flex; align-items:center; }
  .link-arrow{ padding-block:6px; }
  .nav__logo{ display:inline-flex; align-items:center; }

  /* Cookie 同意面板：手机上它自然高度就有屏高的 58%（把首屏挡住大半）。
     这里**压缩排版**而不是简单限高 —— 限高会让「必要/全部同意」两个按钮被滚出视野，
     反而更难用；压紧字号与间距后内容仍然一眼看全。 */
  .cc-banner{ max-height:70dvh; overflow-y:auto; }
  .cc-banner__title{ font-size:16px; }
  .cc-banner__body{ font-size:13.5px; line-height:1.55; }
  .cc-banner__links{ gap:2px 14px; }
  .cc-banner .btn{ padding-block:9px; }
}

/* 移动端浏览器地址栏滚动时会伸缩，`vh` 会跟着抖一下；`dvh` 更准。
   不认 dvh 的旧浏览器会忽略这一行、回落到 `.hero-home` 原本的 94vh。 */
@media (max-width:720px){
  .hero-home{ min-height:min(88dvh,820px); }
}

/* ── 公司介绍视频的「封面门面」（2026-10-13）───────────────────────────────
   <video preload="none"> 仍有个别手机浏览器会预取并显示**视频首帧**，
   于是"手机看首帧、电脑看封面"两边不一样。改成：默认只渲染一张 <img> 封面 +
   播放按钮，点击后由 js/site.js 注入真正的 <video>。
   好处：① 两边显示的一定是同一张图 ② 不点播就一个字节视频都不下载。 */
.intro-video{ position:relative; cursor:pointer; }
.intro-video > img.intro-video__cover{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:inherit;
}
.intro-video__play{
  position:absolute; inset:0; margin:auto; width:76px; height:76px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,16,21,.62); color:#fff; border:0; border-radius:999px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  cursor:pointer; transition:transform .18s var(--ease-out-soft), background-color .18s ease;
}
.intro-video__play svg{ width:30px; height:30px; fill:currentColor; margin-left:3px; }
.intro-video:hover .intro-video__play{ background:rgba(11,16,21,.78); transform:scale(1.06); }
.intro-video .intro-video__play{ z-index:2; }
/* 手机上把播放键缩小一点，别盖住太多画面 */
@media (max-width:640px){ .intro-video__play{ width:64px; height:64px; } }

/* ── 表单提交结果提示（2026-10-13）──────────────────────────────────────────
   原来 [data-form-note] 只是按钮下方一行 .small 小字，客户实测反馈"提交后没有任何提示"
   （其实有提示，只是太小/太靠边上，看不见）。做成有底色与左边框的醒目提示条，
   成功绿色、失败红色；配合 js 的 scrollIntoView 保证一定落在视口里。 */
.form-note{
  margin:var(--space-lg) 0 0; padding:var(--space-md) var(--space-lg);
  border-radius:var(--radius-md); border-left:4px solid currentColor;
  font-size:.95rem; line-height:1.65;
}
.form-note--ok{ color:#0F5132; background:#D1E7DD; }
.form-note--err{ color:#842029; background:#F8D7DA; }
html[data-theme="dark"] .form-note--ok, body.cc-dark .form-note--ok{ color:#D1E7DD; background:rgba(25,135,84,.22); }
html[data-theme="dark"] .form-note--err, body.cc-dark .form-note--err{ color:#F8D7DA; background:rgba(220,53,69,.22); }

/* ─────────  2026-10-13 手机页头（溢出修复 + 舒展版）  ─────────
   背景：① 客户真机报障——CTA 与汉堡被右边缘裁掉（`.nav__right{flex-shrink:0}` 不收缩，
   360px 下页头需 402px、溢出 42px ✗）。② 首版修复收得过狠 → 客户反馈"太挤到中间"，
   且 `.nav__inner` 未两端对齐，`.nav__right` 后面留出空洞 ✗。
   本版：**两端对齐（logo 靠左、按钮组靠右）** + 恢复舒展的内边距/间距/按钮尺寸，
   同时保证 320px 仍不溢出。 */
@media (max-width:560px){
  .nav__inner{ padding-inline:16px; gap:12px; justify-content:space-between; }
  .nav__right{ gap:10px; margin-left:auto; }
  .nav__right .btn{ padding-inline:16px; font-size:13.5px; }
  .nav__burger{ width:38px; height:38px; }
  /* 语言切换：**正圆 34×34 视觉** + **44×44 触控区**（用 ::after 撑开命中区）。
     ⚠️ a11y 块（≤640px）给 .lang-switch 设了 min-height:44px 以达标触控目标 ✓，
        直接把高度写 34 会被它顶成 34×44 的椭圆 ✗ → 这里必须同时写 min-height:0，
        再由 ::after 把**命中区**补回 44×44，视觉与可用性两不误。 */
  .lang-switch{ width:34px; height:34px; min-width:0; min-height:0; padding:0; position:relative; }
  .lang-switch::after{ content:""; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%); }
}
@media (max-width:380px){
  /* 320px 档：上一版实测仍溢出 16px ✗ → 内边距/间距再收一档，
     logo 同步缩到 112px 留出余量（小屏常见做法，不影响桌面）。 */
  .nav__inner{ padding-inline:10px; gap:8px; }
  .nav__right{ gap:7px; }
  .nav__right .btn{ padding-inline:11px; font-size:12.5px; }
  .nav__burger{ width:34px; height:34px; }
  .lang-switch{ width:32px; height:32px; min-width:0; min-height:0; padding:0; font-size:11.5px; }
  .nav__logo .brand-img{ width:112px; height:auto; }
}
@media (max-width:340px){
  /* 极窄屏（320 及以下）：只在这里压到最紧，正常手机（360+）仍保持舒展 ✓ */
  .nav__inner{ padding-inline:8px; gap:6px; }
  .nav__right{ gap:6px; }
  .nav__right .btn{ padding-inline:9px; font-size:12px; }
  .nav__burger{ width:32px; height:32px; }
  .lang-switch{ width:30px; height:30px; min-width:0; min-height:0; padding:0; }
  .nav__logo .brand-img{ width:100px; height:auto; }
}

@media (max-width:900px){
  /* 560~900px：同样必须是**正圆**（a11y 块的 min-height:44px 在此区间也生效，
     故必须在本文件更靠后的位置写 min-height:0 才能压过它 ✓） */
  .lang-switch{ width:32px; height:32px; min-width:0; min-height:0; padding:0; font-size:11.5px; }
}

/* 2026-10-19 导航标签变长（Products / OEM-ODM Solution / Quality & Certifications / Explore Our Capabilities）
   窄屏下压缩字号与间距，防止右侧按钮被挤出视口 */
@media (max-width:1480px){
  .nav__links{ gap:.7rem; }
  .nav__links > a, .nav__links .nav__dropdown-trigger{ font-size:.8rem; letter-spacing:0; }
  .nav__brand{ margin-right:.6rem; }
}
@media (max-width:1200px){
  .nav__links{ gap:.5rem; }
  .nav__links > a, .nav__links .nav__dropdown-trigger{ font-size:.75rem; }
}
/* 2026-10-19 hero H1 跨窗口自适应（Chrome 窄窗口下 YOUR VISION. OUR ENGINEERING. 溢出被切 ✗）
   根因：标题 29 个大写字母 + display-xl 带 vw 字号，窄窗口溢出；且未允许换行
   处置：缩小并设上限 + 允许换行；3 条卖点字号上调 */
.hero-home .hero-home__inner h1{
  font-size:clamp(1.45rem, 3.2vw, 2.9rem) !important;
  line-height:1.1 !important;
  white-space:normal !important;
  overflow-wrap:break-word;
  max-width:100%;
  letter-spacing:-.01em;
}
.hero-home__inner ul.mt-lg{ font-size:.95rem; line-height:1.7; }
.hero-home__inner ul.mt-lg li{ margin:0; }
/* 2026-10-19 hero 下方三项能力（参照客户设计稿；图标为极简线性 SVG，不用 3D/渐变 ✗）*/
.hero-pillars{ background:#fff; border-bottom:1px solid var(--border-subtle); }
.hero-pillars__inner{ display:grid; grid-template-columns:repeat(3,1fr); }
.hero-pillars .pillar{ padding:var(--space-2xl) var(--space-xl) var(--space-xl); border-left:1px solid var(--border-subtle); }
.hero-pillars .pillar:first-child{ border-left:0; padding-left:0; }
.pillar__ico{ width:42px; height:42px; display:block; color:var(--brand-500); margin:0 0 var(--space-md); }
.hero-pillars h3{ font-size:1.12rem; line-height:1.32; font-weight:700; color:var(--ink-900); margin:0 0 .55rem; }
.hero-pillars p{ font-size:1rem; line-height:1.62; color:var(--text-secondary); margin:0 0 .85rem; }
.hero-pillars a{ font-size:.92rem; font-weight:600; color:var(--brand-600); text-decoration:none; }
.hero-pillars a:hover{ text-decoration:underline; }
@media (max-width:900px){
  .hero-pillars__inner{ grid-template-columns:1fr; }
  .hero-pillars .pillar{ border-left:0; border-top:1px solid var(--border-subtle); padding:var(--space-xl) 0; }
  .hero-pillars .pillar:first-child{ border-top:0; }
}
/* 2026-10-19 展会公告条 + 首页展会区块（临时活动模块，11/1 自动下线）*/
.fair-bar{ background:var(--brand-600); color:#fff; font-size:.8125rem; }
.fair-bar__in{ display:flex; align-items:center; gap:.75rem; padding:.5rem 0; }
.fair-bar__dot{ width:7px; height:7px; border-radius:50%; background:#7CFFB2; flex:0 0 auto; box-shadow:0 0 0 3px rgba(124,255,178,.25); }
.fair-bar p{ margin:0; line-height:1.4; flex:1 1 auto; }
.fair-bar__sep{ opacity:.6; margin:0 .4rem; }
.fair-bar__cta{ color:#fff; font-weight:600; text-decoration:none; white-space:nowrap; }
.fair-bar__cta:hover{ text-decoration:underline; }
.fair-bar__close{ background:none; border:0; color:#fff; opacity:.7; font-size:1.1rem; line-height:1; cursor:pointer; padding:0 .25rem; }
.fair-bar__close:hover{ opacity:1; }
@media (max-width:720px){ .fair-bar__in{ gap:.5rem; font-size:.75rem; } .fair-bar__cta{ display:none; } }

.fair-section{ background:var(--surface-sunken,#F7F8FA); border-bottom:1px solid var(--border-subtle); padding:var(--space-3xl) 0; }
.fair-section__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--space-2xl); align-items:center; }
.fair-section__media{ margin:0; border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border-subtle); background:#fff; }
.fair-section__media img{ display:block; width:100%; height:auto; }
.fair-section__meta{ list-style:none; padding:0; margin:var(--space-lg) 0 0; display:grid; gap:.5rem; font-size:.9rem; color:var(--text-secondary); }
.fair-section__meta span{ display:inline-block; min-width:4.5rem; font-weight:600; color:var(--text-tertiary); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:900px){ .fair-section__grid{ grid-template-columns:1fr; } }
/* 2026-10-19 hero 左上展会滚动条（文字垂直轮播，可点击直达展会区块）*/
.hero-ticker{
  display:inline-flex; align-items:center; gap:.6rem; max-width:100%;
  padding:.42rem .85rem .42rem .7rem; margin:0 0 var(--space-lg);
  border-radius:999px; text-decoration:none;
  background:rgba(10,22,40,.55); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); color:#fff; font-size:.8125rem; line-height:1.2;
  transition:background .2s,border-color .2s;
}
.hero-ticker:hover{ background:rgba(10,22,40,.75); border-color:rgba(255,255,255,.3); }
.hero-ticker__dot{ width:7px; height:7px; border-radius:50%; background:#7CFFB2; flex:0 0 auto; box-shadow:0 0 0 3px rgba(124,255,178,.22); }
.hero-ticker__viewport{ display:block; height:1.2em; overflow:hidden; }
.hero-ticker__track{ display:block; animation:heroTicker 12s cubic-bezier(.4,0,.2,1) infinite; }
.hero-ticker__track > span{ display:block; height:1.2em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.hero-ticker__track em{ font-style:normal; opacity:.8; }
@keyframes heroTicker{
  0%,26%{ transform:translateY(0); }
  33%,59%{ transform:translateY(-1.2em); }
  66%,92%{ transform:translateY(-2.4em); }
  100%{ transform:translateY(-3.6em); }
}
.hero-ticker:hover .hero-ticker__track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .hero-ticker__track{ animation:none; } }
@media (max-width:720px){ .hero-ticker{ font-size:.75rem; padding:.35rem .7rem .35rem .6rem; } .hero-ticker__track > span{ max-width:62vw; } }
/* 2026-10-19 Resources 页「最新型录」NEW 卡片（客户要求：大大的 NEW）*/
.cat-feature{
  position:relative; display:flex; align-items:center; gap:var(--space-lg);
  padding:var(--space-lg) var(--space-xl); margin:0 0 var(--space-xl);
  border:1px solid var(--border-subtle); border-left:4px solid var(--brand-600);
  border-radius:var(--radius-lg); background:linear-gradient(90deg,var(--brand-25,#F2F7FD) 0%,#fff 60%);
  text-decoration:none; color:inherit; transition:box-shadow .2s,border-color .2s,transform .2s;
}
.cat-feature:hover{ box-shadow:0 8px 28px rgba(0,112,192,.12); border-color:var(--brand-300,#8AB6E0); transform:translateY(-1px); }
.cat-feature__badge{
  position:absolute; top:-11px; left:18px;
  background:#E64545; color:#fff; font-size:.8125rem; font-weight:800; letter-spacing:.1em;
  padding:.3rem .8rem; border-radius:999px; line-height:1;
  box-shadow:0 4px 14px rgba(230,69,69,.35);
}
.cat-feature__ico{ flex:0 0 auto; width:44px; height:44px; color:var(--brand-600); }
.cat-feature__ico svg{ width:100%; height:100%; }
.cat-feature__txt{ flex:1 1 auto; display:grid; gap:.15rem; min-width:0; }
.cat-feature__txt strong{ font-size:1.05rem; font-weight:700; color:var(--ink-900); }
.cat-feature__txt em{ font-style:normal; font-size:.875rem; color:var(--text-secondary); }
.cat-feature__cta{ flex:0 0 auto; font-size:.85rem; font-weight:700; color:var(--brand-600); white-space:nowrap; }
@media (max-width:720px){
  .cat-feature{ flex-wrap:wrap; gap:var(--space-md); padding:var(--space-lg); }
  .cat-feature__cta{ width:100%; }
}
/* 2026-10-19 hero 顶部：整条满宽滚动横幅（左→右，蓝底白字，大字号突出）*/
.hero-marquee{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:190;
  display:block; overflow:hidden; text-decoration:none;
  background:var(--brand-600); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.hero-marquee__track{
  display:inline-flex; align-items:center; gap:1.4rem;
  padding:.7rem 0; white-space:nowrap; will-change:transform;
  animation:heroMarquee 42s linear infinite;
}
.hero-marquee__item{
  font-size:1.0625rem; font-weight:700; letter-spacing:.01em;
}
.hero-marquee__sep{ opacity:.55; font-size:.7rem; }
.hero-marquee:hover .hero-marquee__track{ animation-play-state:paused; }
/* 2026-10-19 客户要求：展会横幅改为**从右往左**滚动（原为从左往右 ✗）
   → 首尾对调即可（位移量不变，仍然无缝衔接 ✓） */
@keyframes heroMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-33.3333%); }
}
@media (prefers-reduced-motion:reduce){
  .hero-marquee__track{ animation:none; }
}
@media (max-width:720px){
  .hero-marquee__track{ padding:.55rem 0; gap:1rem; animation-duration:30s; }
  .hero-marquee__item{ font-size:.875rem; }
}
/* 2026-10-19 滚动横幅固定在导航下方，hero 需让出两者高度 */
.hero-home{ padding-top:calc(var(--nav-h) + 2.75rem) !important; }
@media (max-width:720px){ .hero-home{ padding-top:calc(var(--nav-h) + 2.35rem) !important; } }

/* ── 资料表加载骨架（2026-10-20）────────────────────────────────
   客户反馈"Resources 打开很久才出现文件，容易以为没有文件划过去"。
   数据是前端取的（/api/public/documents），在返回之前先铺骨架，
   让它在视觉上"明确是在加载"，而不是一个看起来空的区块。
   ⚠️ 这里不用 .reveal：那个初始 opacity:0，快滑时等同于没内容。 */
.doc-skel td{ padding-top:14px; padding-bottom:14px; }
.doc-skel .skel{
  display:block; height:12px; border-radius:4px;
  background:rgba(9,14,20,.07); position:relative; overflow:hidden;
}
.doc-skel .skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:translateX(-100%); animation:docSkel 1.25s ease-in-out infinite;
}
@keyframes docSkel{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .doc-skel .skel::after{ animation:none; } }