/* =========================================================================
   base.css — 重置 + 全局排版 + 公共组件（全站母版）
   天津蓝拓塑料包装官网 ｜ 依赖 tokens.css
   组件逐条对齐 docs/design-spec.md 第 3 / 4 / 6 / 8 / 9 / 11 节。
   约定：色值 100% 引用 tokens 变量；margin/padding/gap 只取 --space-* 刻度
        （规范给出的 20 / 40 / 56 / 72px 用两个 token 的 calc 精确表达）；
        渐变与遮罩里的 rgba() 透明度层是「遮罩参数」不是品牌色值，单独说明。
   ========================================================================= */

/* ---------------------------------------------------------------- 1. 重置 */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,form,fieldset{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,picture,video,canvas,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; border-spacing:0; width:100%; }
hr{ border:0; border-top:1px solid var(--color-border); margin:0; }
::selection{ background:var(--color-brand-100); color:var(--color-navy-800); }

/* ------------------------------------------------------------ 2. 全局排版 */
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);          /* 移动端不缩小，恒 16px（防 iOS 聚焦缩放） */
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-break:strict; word-break:normal; overflow-wrap:break-word;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{ color:var(--color-text-strong); font-weight:700; text-wrap:balance; }
h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); letter-spacing:var(--ls-h2); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); font-weight:600; letter-spacing:var(--ls-h3); }
h4{ font-size:var(--fs-h4); line-height:var(--lh-h4); font-weight:600; }
p{ max-width:var(--container-text); text-wrap:pretty; }
p + p{ margin-top:var(--space-4); }
strong{ font-weight:600; color:var(--color-text-strong); }
.nowrap{ white-space:nowrap; }
/* 数字与编号：等宽数字，纵向对齐（"年报感"） */
.num,[data-count-to]{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1; }

/* 焦点态：3px 环 + 2px offset（全站硬项，第 9.2 条） */
:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; border-radius:var(--radius-xs); }
.on-dark :focus-visible,
.hero :focus-visible,
.stat-band :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.drawer :focus-visible,
.page-banner :focus-visible{ outline-color:var(--color-focus-on-dark); }
:focus:not(:focus-visible){ outline:none; }

/* --------------------------------------------- 3. 无障碍工具 / 布局工具类 */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* 跳过导航：默认不可见，聚焦时左上角出现（白底 + navy-700） */
.skip-link{
  position:absolute; left:var(--space-4); top:var(--space-4); z-index:var(--z-skip);
  display:inline-flex; align-items:center; min-height:44px;
  padding:var(--space-3) var(--space-5);
  background:var(--color-surface); color:var(--color-navy-700);
  font-size:var(--fs-sm); font-weight:600;
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  transform:translateY(calc(-100% - var(--space-6)));
  transition:transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible{ transform:none; }

.container{ width:100%; max-width:calc(var(--container) + var(--page-x)*2); margin-inline:auto; padding-inline:var(--page-x); }
.container-wide{ width:100%; max-width:calc(var(--container-wide) + var(--page-x)*2); margin-inline:auto; padding-inline:var(--page-x); }
.container-text{ max-width:var(--container-text); }
.mx-auto{ margin-inline:auto; }
.stack-4 > * + *{ margin-top:var(--space-4); }
.stack-5 > * + *{ margin-top:var(--space-5); }
.stack-6 > * + *{ margin-top:var(--space-6); }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--color-text-muted); }
.text-muted{ color:var(--color-text-muted); }
.note-figure{ display:block; margin-top:var(--space-2); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--color-text-muted); }
.on-dark .note-figure,.stat-band .note-figure,.site-footer .note-figure,.cta-band .note-figure,.page-banner .note-figure{ color:var(--color-silver-300); }
[hidden]{ display:none !important; }

/* ------------------------------------------------ 4. 区块节奏 / 标题组 */
.section{ padding-block:var(--section-y); }
.section--large{ padding-block:var(--section-y-lg); }
.section--subtle{ background:var(--color-bg-subtle); }
.section--flush-top{ padding-top:0; }
.section--flush-bottom{ padding-bottom:0; }
.section__head{ max-width:var(--container-text); margin-bottom:var(--space-7); }
.section__head > * + *{ margin-top:var(--space-4); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center p{ margin-inline:auto; }
.section__title{ font-size:var(--fs-h2); }
.section__foot{ margin-top:var(--space-7); }
@media (max-width:1199px){ .section__head{ margin-bottom:calc(var(--space-6) + var(--space-2)); } } /* 40px */
@media (max-width:767px){ .section__head{ margin-bottom:var(--space-6); } }                             /* 32px */

.kicker{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-sans); font-size:var(--fs-kicker); font-weight:600;
  line-height:1.4; letter-spacing:var(--ls-kicker); text-transform:uppercase;
  color:var(--color-brand-700);
}
.kicker::before{ content:""; width:var(--space-5); height:2px; background:currentColor; }
.kicker--bare::before{ display:none; }
.kicker--on-dark{ color:var(--color-brand-500); }

/* 文字链（浅底） */
.link{
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:44px; font-size:var(--fs-body); font-weight:600;
  color:var(--color-brand-700); transition:color var(--dur-fast) var(--ease-out);
}
.link__arrow{ display:inline-block; transition:transform var(--dur-fast) var(--ease-out); }
.link:hover{ color:var(--color-link-hover); text-decoration:underline; text-underline-offset:3px; }
.link:hover .link__arrow{ transform:translateX(2px); }
.link:focus-visible{ outline-offset:3px; }
/* 文字链（深底） */
.link--dark,.on-dark .link,.stat-band .link,.cta-band .link,.site-footer .link{ color:var(--color-brand-500); }
.link--dark:hover,.on-dark .link:hover,.cta-band .link:hover,.site-footer .link:hover{ color:var(--color-text-on-dark); }
.link-group{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6); }

.icon{ width:1.25em; height:1.25em; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------------------------------------------ 5. 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding-block:var(--space-3); padding-inline:var(--space-7);
  font-family:var(--font-sans); font-size:var(--fs-btn); font-weight:600; line-height:1;
  letter-spacing:var(--ls-btn); text-align:center; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--radius-md);
  transition:background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-sm); }
.btn[aria-disabled="true"],.btn:disabled{
  background:var(--color-gray-200); color:var(--color-gray-500);
  border-color:transparent; box-shadow:none; pointer-events:none; cursor:not-allowed;
}
.btn--primary{ background:var(--color-navy-600); color:var(--color-text-on-dark); }   /* 11.58:1 */
.btn--primary:hover{ background:var(--color-navy-500); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn--primary:active{ background:var(--color-navy-700); transform:translateY(0); }
/* 次按钮 = 线框按钮（浅底） */
.btn--secondary{ background:transparent; color:var(--color-navy-600); border-color:var(--color-border-strong); }
.btn--secondary:hover{ background:var(--color-brand-50); border-color:var(--color-brand-700); color:var(--color-navy-700); }
.btn--secondary:active{ background:var(--color-brand-100); }
/* 幽灵按钮 = 深底 / 图上的按钮 */
.btn--ghost{
  background:rgba(255,255,255,.14); color:var(--color-text-on-dark);
  border-color:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.44); transform:translateY(-1px); }
.btn--ghost:active{ background:rgba(255,255,255,.10); }
.btn--sm{ min-height:40px; padding-block:var(--space-2); padding-inline:var(--space-5); font-size:var(--fs-sm); }
.btn--lg{ min-height:56px; padding-inline:var(--space-8); font-size:var(--fs-lead); }
.btn--block{ width:100%; }
.btn__icon{ width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* 主按钮底色恒为 --color-navy-600(#133A63)：白字 11.58:1。
   全站禁止用 --color-brand-600(#1890D8) 作按钮底色（白字仅 3.49:1）。 */

/* --------------------------------------------------- 6. 玻璃容器与降级 */
.glass-light{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass-light{ background:var(--color-surface); }
}
@media (prefers-reduced-transparency: reduce){
  .glass-light{ background:var(--color-surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* ---------------------------------------- 7. 页头 Header（浅色玻璃吸顶） */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  /* 底边线（§6.0：1px solid rgba(12,32,57,.08)）用 inset 阴影绘制：
     这样页头总高严格等于 --header-h（84/72/60px），不会被 1px 边框撑成 85px。 */
  box-shadow:inset 0 -1px 0 rgba(12,32,57,.08);
  transition:box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
/* 内部布局（§6.0）：grid-template-columns:auto 1fr auto; gap:24px */
.header__inner{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-5); height:var(--header-h); }

.header__lead{ display:flex; align-items:center; gap:var(--space-5); min-width:0; }
/* 页头 tagline（§6.0 关键值 / §5.1 第 3 条）：桌面显示 13px text-muted，≤1199px 先砍文字 */
.header__tagline{
  font-size:var(--fs-caption); line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption); color:var(--color-text-muted); white-space:nowrap;
}
@media (max-width:1199px){ .header__tagline{ display:none; } }

.brand{ display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.brand__logo{ width:auto; object-fit:contain; }
/* 双 Logo 配平的定高依据：design-spec §6.1「**光学等重配平**」，不是「字标高度 1:1.10」——
   树益资产是**整枚徽章**（绿三角内含白椭圆圈 + 下方绿字），并无独立字标，
   「按字标高度对齐」属范畴错误。$logo-lantuo-h 40px / $logo-shuyi-h 44px 是逐档光学比对的结果。
   两个修饰类**都显式给高度**：基础类不得隐式等于蓝拓，否则将来加第三个标识会静默继承错值。 */
.brand__logo--lantuo{ height:var(--logo-lantuo-h); }
.brand__logo--shuyi{ height:var(--logo-shuyi-h); }
.brand__divider{
  flex:0 0 auto; width:1px; height:30px;
  margin-inline:var(--space-4);
  background:rgba(12,32,57,.14);
}
@media (max-width:1199px){ .brand__divider{ height:26px; margin-inline:var(--space-3); } }
/* §5.1 第 2 条明确点名：手机档 margin-inline 收窄到 10px（规范指定的分档值） */
@media (max-width:767px){ .brand__divider{ height:22px; margin-inline:10px; } }

.nav{ justify-self:end; position:relative; }
/* 下拉项的定位基准上移到 .nav，见下方 .dropdown 注释 */
.nav__list > .nav__item--has-dropdown{ position:static; }
/* 项间距 = gap + .nav__link 左右内边距各 8px：
   桌面 gap 16px → 视觉 32px；平板 gap 4px → 视觉 20px；同时把「首页」
   这类短链接的点击区撑到 ≥44px 宽（§9.4 触控目标硬项）。 */
.nav__list{ display:flex; align-items:center; gap:calc(var(--space-6) - var(--space-4)); }
.nav__item{ position:relative; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:var(--space-1);
  min-height:44px; padding-block:var(--space-1); padding-inline:var(--space-2);
  font-size:var(--fs-sm); font-weight:500; letter-spacing:0.02em;
  color:var(--color-text-muted);
  transition:color var(--dur-base) var(--ease-out);
}
.nav__link::after{
  content:""; position:absolute; left:var(--space-2); right:var(--space-2); bottom:0; height:2px;
  background:var(--color-brand-600); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav__link:hover{ color:var(--color-brand-700); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link:focus-visible{ outline-offset:4px; }
.nav__link[aria-current="page"]{ color:var(--color-navy-600); font-weight:600; }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__caret{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-fast) var(--ease-out); }

/* 下拉面板：520px / 两列 / 24px 内边距 / 顶部间距 12px
   定位基准取 .nav（而非触发项）：面板右缘对齐导航右缘，向左展开。
   若以触发项为基准再向左展开，窄平板档（768–900）「产品中心」右侧不足 520px，
   面板左缘会跑出视口左侧（实测 804px 档左溢 47px）。 */
.dropdown{
  position:absolute; top:calc(100% + var(--space-3)); right:0; left:auto;
  width:520px; max-width:calc(100vw - var(--space-7)); padding:var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
             visibility 0s linear var(--dur-fast);
}
.dropdown__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2) var(--space-5); }
.dropdown__link{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  min-height:44px; padding-block:var(--space-1); padding-inline:var(--space-3);
  font-size:var(--fs-sm); color:var(--color-text);
  border-radius:var(--radius-sm);
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dropdown__link::before{
  content:""; position:absolute; left:0; top:var(--space-1); bottom:var(--space-1);
  width:4px; border-radius:var(--radius-pill); background:transparent;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.dropdown__link:hover{ background:var(--color-brand-50); color:var(--color-navy-700); }
.dropdown__link:hover::before{ background:var(--color-brand-600); }
.nav__item--has-dropdown.is-open > .dropdown,
.nav__item--has-dropdown:focus-within > .dropdown{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav__item--has-dropdown.is-open > .nav__link .nav__caret,
.nav__item--has-dropdown:focus-within > .nav__link .nav__caret{ transform:rotate(180deg); }
@media (hover:hover) and (min-width:1200px){
  .nav__item--has-dropdown:hover > .dropdown{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .nav__item--has-dropdown:hover > .nav__link .nav__caret{ transform:rotate(180deg); }
}

.header__actions{ display:flex; align-items:center; gap:var(--space-3); flex:0 0 auto; }
.header__cta-short{ display:none; }
@media (max-width:1199px){
  .nav__list{ gap:var(--space-1); }                          /* +8px 内边距 = 视觉 20px（§6.2 平板） */
  .header__cta-full{ display:none; }
  .header__cta-short{ display:inline; }
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:inset 0 -1px 0 rgba(12,32,57,.08), var(--shadow-sm);
}
.site-header.is-scrolled .header__inner{ height:var(--header-h-scrolled); }

.hamburger{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:calc(var(--space-2) * -1);
  border-radius:var(--radius-md); color:var(--color-navy-700);
}
.hamburger:hover{ background:var(--color-gray-100); }
.hamburger__box{ position:relative; width:22px; height:14px; }
.hamburger__box span{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.hamburger__box span:nth-child(1){ top:0; }
.hamburger__box span:nth-child(2){ top:6px; }
.hamburger__box span:nth-child(3){ top:12px; }
.hamburger[aria-expanded="true"] .hamburger__box span:nth-child(1){ top:6px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__box span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] .hamburger__box span:nth-child(3){ top:6px; transform:rotate(-45deg); }

@media (max-width:767px){
  .nav{ display:none; }            /* 手机 <768：导航收进抽屉（§5 表） */
  .hamburger{ display:inline-flex; }
}
@media (max-width:767px){ .header__cta{ display:none; } }   /* 手机：CTA 移入抽屉 */

/* ------------------------------- 8. 移动抽屉（深色 navy-900）与蒙层 */
.drawer{
  position:fixed; inset:0 0 0 auto; z-index:var(--z-drawer);
  display:flex; flex-direction:column;
  width:min(86vw,344px); max-width:100%; height:100%;
  background:var(--color-navy-900); color:var(--color-text-on-dark);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%); visibility:hidden;
  transition:transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  overscroll-behavior:contain;
}
.drawer.is-open{ transform:none; visibility:visible; transition-delay:0s; }
.drawer__head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--color-border-dark);
}
.drawer__title{ font-size:var(--fs-sm); font-weight:600; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--color-silver-300); }
.drawer__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:calc(var(--space-3) * -1);
  border-radius:var(--radius-md); color:var(--color-text-on-dark);
}
.drawer__close:hover{ background:rgba(255,255,255,.10); }
.drawer__close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.drawer__nav{ flex:1 1 auto; overflow-y:auto; padding-block:var(--space-2) var(--space-6); }
.drawer__list > li + li{ border-top:1px solid var(--color-border-dark); }
.drawer__link,.drawer__acc-btn{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  width:100%; min-height:56px; padding-inline:var(--space-5);
  font-size:var(--fs-lead); font-weight:500; color:var(--color-text-on-dark); text-align:left;
}
.drawer__link:hover,.drawer__acc-btn:hover{ background:rgba(255,255,255,.06); }
.drawer__link[aria-current="page"]{ color:var(--color-brand-500); font-weight:600; }
/* 抽屉里的「当前页」也可能落在手风琴按钮上（如 products.html 的产品中心：
   抽屉内没有该页直链，标记只能落在触发器上）。规则与上一行同形、同底色同值，
   --color-brand-500 #3FA9E8 在 --color-navy-900 #081627 上 6.97:1 ✅。 */
.drawer__acc-btn[aria-current="page"]{ color:var(--color-brand-500); font-weight:600; }
.drawer__acc-btn .nav__caret{ width:16px; height:16px; }
.drawer__acc-btn[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }
.drawer__sub{ padding-bottom:var(--space-3); }
.drawer__sub li + li{ border:0; }
.drawer__sub a{
  display:flex; align-items:center; min-height:48px;
  padding-left:var(--space-7); padding-right:var(--space-5);
  font-size:var(--fs-sm); color:var(--color-silver-300);
  border-left:2px solid transparent;
}
.drawer__sub a:hover{ color:var(--color-text-on-dark); border-left-color:var(--color-brand-600); background:rgba(255,255,255,.06); }
.drawer__bottom{
  flex:0 0 auto; display:grid; gap:var(--space-3);
  padding:var(--space-5); border-top:1px solid var(--color-border-dark);
  background:var(--color-navy-950);
  padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}
.drawer__meta{ font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--color-silver-400); text-align:center; }

.scrim{
  position:fixed; inset:0; z-index:calc(var(--z-drawer) - 1);
  background:rgba(5,12,24,.50);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.scrim.is-open{ opacity:1; visibility:visible; transition-delay:0s; }

/* --------------------------------------------------------- 8b. 首屏 Hero */
.hero{ position:relative; overflow:hidden; background:var(--color-navy-900); color:var(--color-text-on-dark); }
.hero__media{ position:absolute; inset:0; }
.hero__picture{ display:block; width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
/* 遮罩：左重右轻 90° 渐变 + 上下暗角；文字区（视口左侧 ~50%）等效 α ≥ 0.66（§2.3-D） */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(5,12,24,.86) 0%,
      rgba(5,12,24,.80) 38%,
      rgba(5,12,24,.62) 56%,
      rgba(5,12,24,.30) 76%,
      rgba(5,12,24,.12) 100%),
    linear-gradient(180deg,
      rgba(5,12,24,.34) 0%,
      rgba(5,12,24,0) 26%,
      rgba(5,12,24,0) 62%,
      rgba(5,12,24,.42) 100%);
}
.hero__inner{
  position:relative; display:flex; align-items:center;
  min-height:640px; padding-block:var(--section-y-lg);
}
.hero__content{ max-width:640px; }
.hero__content > * + *{ margin-top:var(--space-5); }
.hero__title{ font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-hero); color:var(--color-text-on-dark); }
.hero__lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:rgba(255,255,255,.88); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);
  padding-top:var(--space-4); border-top:1px solid rgba(255,255,255,.22);
  font-size:var(--fs-caption); line-height:var(--lh-caption); color:rgba(255,255,255,.88);
}
.hero__trust li{ display:flex; align-items:center; gap:var(--space-2); }
.hero__trust li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--color-brand-500); flex:0 0 auto; }
/* Hero 双 Logo 品牌区（v1.3：原「品牌与定位」块职能并入本块，位于内容列末行） */
.hero__brand{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-5); }
.hero__brand-note{ font-size:var(--fs-caption); line-height:var(--lh-caption); color:rgba(255,255,255,.88); max-width:420px; }
@media (max-width:1199px){ .hero__inner{ min-height:520px; } }
@media (max-width:767px){
  .hero__inner{ min-height:460px; align-items:flex-end; padding-block:var(--space-7); }
  .hero__content{ max-width:none; }
  .hero__content > * + *{ margin-top:var(--space-4); }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(5,12,24,.68) 0%,
      rgba(5,12,24,.78) 50%,
      rgba(5,12,24,.88) 100%);
  }
  .hero__actions{ flex-direction:column; }
  .hero__actions .btn{ width:100%; }
  .hero__trust{ flex-direction:column; gap:var(--space-2); }
  .hero__brand{ flex-direction:column; align-items:flex-start; }
}

/* ---------------------------------------------- 9. 卡片 / 系列卡 / 资质卡 */
.card{
  display:flex; flex-direction:column; padding:var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--color-brand-100); }
.card:focus-within{ border-color:var(--color-brand-600); box-shadow:0 0 0 3px rgba(24,144,216,.20); }

/* 系列卡：图区 4:3（底 navy-900）→ 内容区 → 文字链底对齐 */
.series-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap-y) var(--gutter); }
.series-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.series-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--color-brand-100); }
.series-card:focus-within{ border-color:var(--color-brand-600); }
.series-card__media{ position:relative; aspect-ratio:4/3; background:var(--color-navy-900); overflow:hidden; }
.series-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.series-card:hover .series-card__media img{ transform:scale(1.04); }
.series-card__body{ display:flex; flex-direction:column; flex:1 1 auto; gap:var(--space-2); padding:var(--space-5); }
.series-card__title{ font-size:var(--fs-h4); line-height:var(--lh-h4); }
.series-card__desc{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-muted); }
.series-card__more{ margin-top:auto; padding-top:var(--space-3); }
.series-card__link{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; font-size:var(--fs-sm); font-weight:600; color:var(--color-brand-700); }
.series-card:hover .series-card__link{ text-decoration:underline; text-underline-offset:3px; }
.series-card:hover .series-card__link .link__arrow{ transform:translateX(2px); }
/* 特色卡：跨 2 列、图左文右（design-spec §6.5 / §7.1：6 张 1:1 + 特色卡跨 2 列 = 桌面 3 列 3+3 齐整）
   缺 grid-column 时整行右 1/3 会留空洞，且图左文右被压进 1 列（实测 1440 下正文仅 174px）。 */
.series-card--featured{ grid-column:span 2; flex-direction:row; }
.series-card--featured .series-card__media{ flex:0 0 46%; aspect-ratio:auto; min-height:100%; }
.series-card--featured .series-card__body{ justify-content:center; padding:var(--space-6); gap:var(--space-3); }
.series-card--featured .series-card__title{ font-size:var(--fs-h3); }
.series-card--featured .series-card__desc{ font-size:var(--fs-body); line-height:var(--lh-body); }
/* 网格末格承接「查看完整产品中心」入口，避免跨列表格留空洞 */
.series-grid__cta{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-4);
  padding:var(--space-6); border:1px dashed var(--color-border-strong);
  border-radius:var(--radius-lg); background:var(--color-bg-subtle);
}
.series-grid__cta p{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-muted); }
@media (max-width:1199px){
  .series-grid{ grid-template-columns:repeat(2,1fr); }
  .series-grid__cta{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; }
}
@media (max-width:767px){
  .series-grid{ grid-template-columns:1fr; }
  .series-card--featured{ grid-column:auto; flex-direction:column; }
  .series-card--featured .series-card__media{ flex:none; aspect-ratio:4/3; }
  .series-card--featured .series-card__body{ padding:var(--space-5); }
  .series-grid__cta{ flex-direction:column; align-items:flex-start; }
}

/* 资质卡：白底 + 8px 圆角 + 左侧 3px 认证竖条 */
.cert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--grid-gap-y) var(--gutter); }
.cert-card{
  position:relative; display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
}
.cert-card::before{
  content:""; position:absolute; left:0; top:var(--space-5); bottom:var(--space-5); width:3px;
  background:var(--color-brand-600); border-radius:var(--radius-pill);
}
.cert-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-md);
  background:var(--color-brand-50); color:var(--color-navy-600);
}
.cert-card__icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cert-card__title{ font-size:var(--fs-h4); line-height:var(--lh-h4); }
.cert-card__desc{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-muted); }
.cert-card__meta{ font-family:var(--font-num); font-size:var(--fs-caption); letter-spacing:var(--ls-caption); color:var(--color-navy-700); font-variant-numeric:tabular-nums; }
@media (max-width:767px){ .cert-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------- 10. 深色数据带（KPI） */
.stat-band{
  position:relative; padding-block:var(--space-8);
  background:linear-gradient(180deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%);
  color:var(--color-text-on-dark);
}
.stat-band::before,.stat-band::after{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--color-border-strong),transparent); opacity:.28;
}
.stat-band::before{ top:0; } .stat-band::after{ bottom:0; }
.stat-band__kicker{ margin-bottom:var(--space-6); }
.stat-band__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap-y) var(--gutter); }
.stat-card{ position:relative; display:flex; flex-direction:column; gap:var(--space-3); align-items:center; text-align:center; }
.stat-card + .stat-card::before{
  content:""; position:absolute; left:calc(var(--gutter) / -2); top:0; bottom:0; width:1px;
  background:var(--color-border-dark);
}
.stat-card__value{
  display:flex; align-items:baseline; justify-content:center; gap:var(--space-1);
  font-family:var(--font-num); font-size:var(--fs-data); font-weight:700; line-height:1;
  letter-spacing:-.02em; color:var(--color-text-on-dark);
  font-variant-numeric:tabular-nums; white-space:nowrap; min-width:1em;
}
.stat-card__unit{ font-size:var(--fs-h4); font-weight:600; letter-spacing:var(--ls-body); color:var(--color-silver-300); }
.stat-card__label{ font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-silver-400); }
.stat-band__note{ margin-top:var(--space-6); text-align:center; font-size:var(--fs-sm); color:var(--color-silver-400); }
@media (max-width:1199px){ .stat-band{ padding-block:calc(var(--space-7) + var(--space-2)); } }  /* 56px */
@media (max-width:767px){
  .stat-band{ padding-block:var(--space-7); }                                                   /* 48px */
  .stat-band__grid{ grid-template-columns:repeat(2,1fr); column-gap:var(--space-4); row-gap:var(--space-6); }
  .stat-card{ align-items:flex-start; text-align:left; }
  .stat-card + .stat-card::before{ display:none; }
  .stat-card:nth-child(n+3){ padding-top:var(--space-6); border-top:1px solid var(--color-border-dark); }
}

/* ----------------------------------------------------------- 11. 时间轴 */
.timeline{ position:relative; padding-left:var(--space-6); max-width:var(--container-text); }
.timeline::before{ content:""; position:absolute; left:0; top:var(--space-2); bottom:var(--space-2); width:1px; background:var(--color-gray-200); }
.timeline__item{ position:relative; }
.timeline__item + .timeline__item{ margin-top:var(--space-7); }
.timeline__item::before{
  content:""; position:absolute; left:calc(var(--space-6) * -1); top:var(--space-3);
  width:12px; height:12px; border-radius:50%;
  background:var(--color-navy-600); box-shadow:0 0 0 3px var(--color-surface);
}
/* 当前 / 高亮节点 */
.timeline__item--current::before{
  background:var(--color-brand-600);
  box-shadow:0 0 0 3px var(--color-surface), 0 0 0 6px rgba(24,144,216,.14);
}
.timeline__year{
  display:block; font-family:var(--font-num); font-size:var(--fs-h4); font-weight:700;
  letter-spacing:-.01em; color:var(--color-navy-700); line-height:var(--lh-h2); font-variant-numeric:tabular-nums;
}
.timeline__title{ margin-top:var(--space-2); font-size:var(--fs-h4); line-height:var(--lh-h4); }
.timeline__desc{ margin-top:var(--space-2); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-text-muted); }
.timeline--on-dark::before{ background:var(--color-border-dark); }
.timeline--on-dark .timeline__item::before{ background:var(--color-brand-500); box-shadow:0 0 0 3px var(--color-navy-900); }
.timeline--on-dark .timeline__year{ color:var(--color-text-on-dark); }
.timeline--on-dark .timeline__desc{ color:var(--color-silver-300); }
@media (max-width:767px){ .timeline{ padding-left:var(--space-5); } .timeline__item::before{ left:calc(var(--space-5) * -1); } }

/* -------------------------------------------------- 12. 竖版视频卡 9:16 */
.video-row{ display:flex; justify-content:center; }
.video-card{ width:320px; max-width:100%; }
.video-card__frame{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  background:var(--color-navy-900); border:1px solid var(--color-border-dark);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.video-card__play{
  position:absolute; inset:0; width:100%; height:100%; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.video-card__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-card__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,12,24,.78) 0%, rgba(5,12,24,0) 42%);
}
.video-card__btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--color-navy-800);
  box-shadow:var(--shadow-lg);
  transition:transform var(--dur-base) var(--ease-spring), background-color var(--dur-fast) var(--ease-out);
}
.video-card__btn svg{ width:24px; height:24px; margin-left:var(--space-1); fill:currentColor; }
.video-card__play:hover .video-card__btn{ transform:scale(1.06); background:var(--color-surface); }
/* 声音预期提示（§6.9 必需）：播放键正下方 12px */
.video-card__hint{ display:none; }
.video-card__play .video-card__hint{
  display:block; position:absolute; left:0; right:0;
  top:calc(50% + 32px + var(--space-3));
  font-size:var(--fs-caption); line-height:var(--lh-caption);
  color:rgba(255,255,255,.88); text-align:center;
  text-shadow:0 1px 2px rgba(5,12,24,.5); pointer-events:none;
}
.video-card__badge{
  position:absolute; right:var(--space-4); bottom:var(--space-4);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
  background:rgba(5,12,24,.72); color:var(--color-text-on-dark);
  font-family:var(--font-num); font-size:var(--fs-caption); letter-spacing:var(--ls-caption);
}
.video-card__frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--color-navy-950); }
.video-card__caption{ margin-top:var(--space-3); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--color-text-muted); }
.video-card__caption .video-card__note{ display:block; }
@media (max-width:1199px){ .video-card{ width:280px; } }
@media (max-width:767px){ .video-card{ width:min(70vw,280px); } }

/* -------------------------------------------------- 13. 图文分栏 / 组合块 */
.split{ display:grid; gap:var(--gutter); align-items:center; }
.split--6-6{ grid-template-columns:repeat(2,1fr); }
.split--7-5{ grid-template-columns:7fr 5fr; }
.split--5-7{ grid-template-columns:5fr 7fr; }
.split__media img{ width:100%; border-radius:var(--radius-lg); border:1px solid var(--color-border); box-shadow:var(--shadow-md); }
.split__media--flush img{ border:0; box-shadow:none; }
.split__text > * + *{ margin-top:var(--space-4); }
.split__text .section__title{ margin-bottom:var(--space-5); }
@media (max-width:1199px){
  .split--6-6,.split--7-5{ grid-template-columns:5fr 7fr; }
  .split--5-7{ grid-template-columns:5fr 7fr; }
}
@media (max-width:767px){
  /* §5 表：手机档 图文分栏 纵向堆叠，且「图在上」 */
  .split--6-6,.split--7-5,.split--5-7{ grid-template-columns:1fr; gap:var(--space-6); }
  .split__media{ order:-1; }
}

/* 制造实力：左图文 / 右竖版视频卡 */
.mfg{ display:grid; grid-template-columns:7fr 5fr; gap:var(--space-7) var(--gutter); align-items:start; }
.mfg__main > * + *{ margin-top:var(--space-5); }
.mfg__main h3{ font-size:var(--fs-h3); }
.mfg__wide img{ width:100%; border-radius:var(--radius-lg); border:1px solid var(--color-border); box-shadow:var(--shadow-md); }
.mfg__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.mfg__thumbs img{ width:100%; border-radius:var(--radius-lg); border:1px solid var(--color-border); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.steps__item{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:var(--space-4); background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
}
.steps__num{ font-family:var(--font-num); font-size:var(--fs-caption); font-weight:700; letter-spacing:var(--ls-kicker); color:var(--color-brand-700); }
.steps__label{ font-size:var(--fs-sm); font-weight:600; color:var(--color-text-strong); }
.location-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);
  padding:var(--space-5); border-radius:var(--radius-lg);
  background:var(--color-surface); border:1px solid var(--color-border);
}
.location-row__item{ display:flex; flex-direction:column; gap:var(--space-1); }
.location-row__key{ font-size:var(--fs-caption); color:var(--color-text-muted); }
.location-row__val{ font-size:var(--fs-body); font-weight:600; color:var(--color-text-strong); }
/* 修饰类：2 列。4 项信息用 3 列会剩下半行只有 1 项、左右严重失衡，改 2×2。
   修饰类不算新组件：只覆写列数，色值 / 字号 / 间距仍全部来自 tokens。 */
.location-row--2{ grid-template-columns:repeat(2,1fr); }
.mfg__aside{ position:sticky; top:calc(var(--header-h) + var(--space-5)); }
/* 平板档 mfg 仍为「左图文 / 右竖版视频卡」两列（§5 表：平板 图文分栏 不堆叠），
   但流程步骤在收窄后的左列里 4 列会挤，降为 2×2。 */
@media (max-width:1199px){
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .mfg{ grid-template-columns:1fr; }
  .mfg__aside{ position:static; }
  .steps{ grid-template-columns:1fr; }
  .mfg__thumbs{ grid-template-columns:1fr; }
  .location-row{ grid-template-columns:1fr; gap:var(--space-4); }
}

/* ----------------------------------------------------- 14. 底部 CTA 带 */
.cta-band{
  position:relative; overflow:hidden;
  padding-block:calc(var(--space-7) + var(--space-5));   /* 72px */
  background:linear-gradient(120deg, var(--color-navy-900) 0%, var(--color-navy-700) 100%);
  color:var(--color-text-on-dark);
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:var(--space-6) var(--space-6);
  opacity:.9;
}
.cta-band__inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }
.cta-band__intro{ flex:1 1 380px; max-width:var(--container-text); }
.cta-band__intro > * + *{ margin-top:var(--space-4); }
.cta-band__title{ font-size:var(--fs-h2); color:var(--color-text-on-dark); }
.cta-band__desc{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--color-silver-300); }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:var(--space-4); }
.cta-band__foot{ position:relative; margin-top:var(--space-6); font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--color-silver-300); }
.cta-band__foot a{ color:var(--color-brand-500); text-decoration:underline; text-underline-offset:3px; }
.cta-band__foot a:hover{ color:var(--color-text-on-dark); }
@media (max-width:1199px){ .cta-band{ padding-block:var(--space-8); } }        /* 64px */
@media (max-width:767px){
  .cta-band{ padding-block:var(--space-7); }                                    /* 48px */
  .cta-band__inner{ flex-direction:column; align-items:flex-start; gap:var(--space-5); }
  .cta-band__actions{ flex-direction:column; width:100%; }
  .cta-band__actions .btn{ width:100%; }
}

/* ------------------------------------------------- 15. 页头 Banner / 面包屑 */
.page-banner{ position:relative; overflow:hidden; padding-block:var(--space-8); background:var(--color-navy-900); color:var(--color-text-on-dark); }
.page-banner__media{ position:absolute; inset:0; }
.page-banner__media img{ width:100%; height:100%; object-fit:cover; opacity:.34; }
.page-banner__scrim{ position:absolute; inset:0; background:rgba(5,12,24,.74); }
.page-banner__inner{ position:relative; }
.page-banner__title{ margin-top:var(--space-4); color:var(--color-text-on-dark); }
.page-banner__desc{ margin-top:var(--space-4); font-size:var(--fs-lead); color:var(--color-silver-300); }
@media (max-width:767px){ .page-banner{ padding-block:var(--space-7); } }

.breadcrumb{ font-size:var(--fs-caption); line-height:var(--lh-caption); }
.breadcrumb__list{ display:flex; flex-wrap:wrap; align-items:center; }
.breadcrumb__list li{ display:flex; align-items:center; }
.breadcrumb__list li + li::before{ content:"/"; margin-inline:var(--space-2); color:var(--color-gray-400); }
.breadcrumb a{ display:inline-flex; align-items:center; min-height:44px; color:var(--color-text-muted); }
.breadcrumb a:hover{ color:var(--color-navy-700); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb [aria-current="page"]{ color:var(--color-navy-700); font-weight:600; }
.page-banner .breadcrumb a{ color:var(--color-silver-300); }
.page-banner .breadcrumb a:hover{ color:var(--color-text-on-dark); }
.page-banner .breadcrumb [aria-current="page"]{ color:var(--color-text-on-dark); }
.page-banner .breadcrumb__list li + li::before{ color:var(--color-silver-400); }

/* --------------------------------------------------------------- 16. 页脚 */
.site-footer{ background:var(--color-navy-900); color:var(--color-silver-400); border-top:1px solid var(--color-border-dark); }
.site-footer__main{ padding-block:var(--space-8) var(--space-6); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-7) var(--space-6); }
.footer__col > * + *{ margin-top:var(--space-4); }
.footer__nav > * + *{ margin-top:var(--space-4); }
.footer__title{
  font-size:var(--fs-sm); font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--color-silver-200);
}
.footer__title--sub{ margin-top:var(--space-6); }
/* 页脚手风琴（§5 表：手机档 1 列 + 手风琴式收起）。
   用原生 <details>：HTML 里带 open，无 JS 时自然展开（不牺牲内容可达性）；
   JS 只在 <768px 时收起，并把用户手动展开过的栏位标记为 data-user 不再干预。 */
.footer__acc-sum{ display:block; list-style:none; cursor:default; }
.footer__acc-sum::-webkit-details-marker{ display:none; }
.footer__acc-sum > h2,.footer__acc-sum > h3{ margin:0; }
.footer__acc-sum:focus-visible{ outline:3px solid var(--color-focus-on-dark); outline-offset:2px; border-radius:var(--radius-xs); }
.footer__list li + li{ margin-top:var(--space-1); }
.footer__list a,.footer__text{ display:inline-flex; align-items:flex-start; min-height:44px; padding-block:var(--space-2); font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--color-silver-400); }
.footer__list a{ align-items:center; }
.footer__list a:hover{ color:var(--color-text-on-dark); text-decoration:underline; text-underline-offset:3px; }
.footer__desc{ font-size:var(--fs-sm); line-height:var(--lh-sm); }
.footer__ext{ display:inline-flex; align-items:center; gap:var(--space-2); }
/* 页脚深色底：双 Logo 固定放在白色圆角品牌铭牌内（§6.1 反白 Logo 使用禁令） */
.brand-plate{
  display:inline-flex; align-items:center;
  padding:var(--space-4) var(--space-5);
  background:var(--color-surface); border-radius:var(--radius-lg);
}
.brand-plate .brand__logo{ height:var(--logo-lantuo-h); }
.brand-plate .brand__logo--shuyi{ height:var(--logo-shuyi-h); }
.site-footer__bar{ border-top:1px solid var(--color-border-dark); padding-block:var(--space-5); }
.footer__bar-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2) var(--space-6); }
.footer__legal{ font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--color-silver-500); }
.footer__legal a{ color:var(--color-silver-500); text-decoration:underline; text-underline-offset:3px; }
.footer__legal a:hover{ color:var(--color-text-on-dark); }
.footer__legal .nowrap{ white-space:nowrap; }
@media (max-width:1199px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){
  .site-footer__main{ padding-block:var(--space-7) var(--space-5); }
  /* 手机：1 列 + 手风琴式收起，品牌区在最上（§5 表） */
  .footer__grid{ grid-template-columns:1fr; gap:0; }
  .footer__col--brand{ padding-bottom:var(--space-6); }
  .footer__acc{ border-top:1px solid var(--color-border-dark); padding-block:var(--space-2); }
  .footer__acc .footer__acc-sum{
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
    min-height:44px; cursor:pointer;
  }
  .footer__acc .footer__acc-sum::after{
    content:""; flex:0 0 auto; width:10px; height:10px; margin-right:var(--space-2);
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform var(--dur-base) var(--ease-out);
  }
  .footer__acc[open] .footer__acc-sum::after{ transform:rotate(225deg) translateY(-2px); }
  .footer__acc .footer__col > * + *,.footer__acc .footer__nav > * + *{ margin-top:var(--space-3); }
  .footer__bar-inner{ flex-direction:column; align-items:flex-start; }
}

/* ------------------------------------------------------ 17. 表单与反馈 */
.form{ display:grid; gap:calc(var(--space-4) + var(--space-1)); }   /* 字段间距 20px（§6.13） */
.form__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:calc(var(--space-4) + var(--space-1)) var(--gutter); }
/* 网格轨道的自动最小尺寸是 min-content：遇到 nowrap 的长文案按钮 / select
   会把整条轨道撑破，进而让整页横向滚动。显式放开，让轨道按容器宽度收缩。 */
.form > *,.form__row > *,.form__actions > *{ min-width:0; }
.form-card{
  padding:var(--space-6); background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field__label{ font-size:var(--fs-sm); font-weight:600; color:var(--color-text-strong); }
.field__req{ color:var(--color-danger); margin-left:var(--space-1); }
.field__hint{ font-size:var(--fs-caption); color:var(--color-text-muted); }
.input,.select,.textarea{
  width:100%; min-height:48px; padding-inline:var(--space-4);
  font-size:var(--fs-body);                       /* 恒 16px：防 iOS 聚焦缩放 */
  color:var(--color-text); background:var(--color-surface);
  border:1px solid var(--color-border-strong); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
}
.textarea{ min-height:120px; padding:var(--space-3) var(--space-4); line-height:var(--lh-sm); resize:vertical; }
.select{
  appearance:none; padding-right:var(--space-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-4) center;
}
.input::placeholder,.textarea::placeholder{ color:var(--color-text-placeholder); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--color-brand-600); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--color-navy-600); box-shadow:0 0 0 3px rgba(24,144,216,.25); }
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{ outline:none; border-color:var(--color-navy-600); box-shadow:0 0 0 3px rgba(24,144,216,.25); }
.input:disabled,.select:disabled,.textarea:disabled{ background:var(--color-gray-100); color:var(--color-gray-500); cursor:not-allowed; }
.field__error{
  display:flex; align-items:flex-start; gap:var(--space-2); margin-top:var(--space-2);
  font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--color-danger);
}
/* 不靠颜色单独表意：错误提示带图标 */
.field__error::before{ content:"⚠"; flex:0 0 auto; font-size:var(--fs-caption); line-height:var(--lh-caption); }
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{ border-color:var(--color-danger); background:var(--color-danger-bg); }
.form__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.form__actions .btn{ min-width:200px; }
.form__note{ font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--color-text-muted); }
.form__alt{ font-size:var(--fs-sm); color:var(--color-text-muted); }
.form__alt a{ color:var(--color-brand-700); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:767px){
  .form__row{ grid-template-columns:1fr; }
  .form-card{ padding:var(--space-5); }
  .form__actions{ flex-direction:column; align-items:stretch; }
  .form__actions .btn{ width:100%; min-height:44px; }
}

/* Alert：1px 外框 + 4px 左边框 + 图标 + 文案（§6.15） */
.alert{
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-info-border); border-left:4px solid var(--color-info);
  border-radius:var(--radius-md); background:var(--color-info-bg);
  font-size:var(--fs-sm); line-height:var(--lh-sm);
}
.alert__icon{ width:20px; height:20px; flex:0 0 auto; margin-top:var(--space-1); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.alert__title{ display:block; font-weight:600; color:inherit; }
.alert__body{ color:var(--color-text); }
.alert--info{ border-color:var(--color-info-border); border-left-color:var(--color-info); background:var(--color-info-bg); color:var(--color-info); }
.alert--success{ border-color:var(--color-success-border); border-left-color:var(--color-success); background:var(--color-success-bg); color:var(--color-success); }
.alert--warning{ border-color:var(--color-warning-border); border-left-color:var(--color-warning); background:var(--color-warning-bg); color:var(--color-warning); }
.alert--danger{ border-color:var(--color-danger-border); border-left-color:var(--color-danger); background:var(--color-danger-bg); color:var(--color-danger); }
.alert[hidden]{ display:none; }

/* 询盘信息卡（无后端策略 C，§6.13 表单级提示） */
.inquiry-card{
  display:grid; gap:var(--space-4); padding:var(--space-4);
  background:var(--color-info-bg); border:1px solid var(--color-info-border);
  border-left:4px solid var(--color-info); border-radius:var(--radius-md);
}
.inquiry-card__head{ font-size:var(--fs-sm); font-weight:600; letter-spacing:.04em; color:var(--color-info); }
.inquiry-card__list{ display:grid; gap:var(--space-2); }
.inquiry-card__row{ display:grid; grid-template-columns:6em 1fr; gap:var(--space-3); font-size:var(--fs-sm); }
.inquiry-card__key{ color:var(--color-text-muted); }
.inquiry-card__val{ color:var(--color-text-strong); word-break:break-word; white-space:pre-wrap; }
.inquiry-card__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.inquiry-card__raw{
  width:100%; min-height:132px; padding:var(--space-3) var(--space-4);
  font-family:var(--font-num); font-size:var(--fs-caption); line-height:var(--lh-caption);
  color:var(--color-text-muted); background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-md); resize:vertical;
}
@media (max-width:767px){
  .inquiry-card__row{ grid-template-columns:1fr; gap:var(--space-1); }
}

/* 微信客服二维码卡（表单之外的并行转化通道，site-spec §5.6 / §9.6）
   红线：二维码图**禁止** filter / mix-blend-mode / 半透明遮罩——任何处理都会破坏
   黑白对比与静默区。因此本组件只用「白底圆角卡」衬托，不加任何遮罩层。
   尺寸（以下为**同源 iframe 探针实测值**，7 档视口 / 12 页全量，非推算）。
   三层概念必须分清：**外层卡 `.wx-card`**（浅蓝底，随栅格伸缩）／
   **白卡 `.wx-card__qr`**（二维码的衬底，受 width:260px 上限约束）／**图片**。

   | 视口 | 外层卡 .wx-card | 白卡 .wx-card__qr | 图片 |
   |---|---|---|---|
   | 1440 | 1200px | 260px | **226px** |
   | 1200 | 1121px | 260px | **226px** |
   | 1024 |  961px | 260px | **226px** |
   |  768 |  705px | 260px | **226px** |
   |  390 |  335px | 260px | **234px** |
   |  359 |  304px | 260px | **234px** |
   |  320 |  265px | **231px** | **205px** |

   ⇒ **白卡在 ≥359px 一直稳定在 260px，图片恒 234px**；只有到 320px 附近
   `max-width:100%` 才把白卡压到 231px、图片随之降到 205px。
   图宽是**随视口连续收缩**，不存在「<360 就落到某个定值」的断点台阶。
   唯一硬性下限：**图宽 ≥150px**（site-spec §9.6），上述各档均满足。
   排版：文案列 `flex:0 1 auto` + `max-width:52ch`（否则 `flex:1 1 auto` 会把
         卡片撑成「半张空卡」：文案止于 x≈413、二维码起于 x≈810，中间空约 400px）；
         整行 `justify-content:center` 居中，间距取 --space-9（96px）。 */
.wx-card{
  display:flex; align-items:center; justify-content:center; gap:var(--space-9);
  padding:var(--space-7);
  background:var(--color-brand-50);
  border:1px solid var(--color-brand-100);
  border-radius:var(--radius-xl);
}
.wx-card__text{ flex:0 1 auto; max-width:52ch; min-width:0; }
.wx-card__text > * + *{ margin-top:var(--space-4); }
.wx-card__qr{
  flex:0 0 260px; width:260px; max-width:100%; margin:0;
  padding:var(--space-4);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
}
.wx-card__qr img{ width:100%; }
.wx-card__qr figcaption{
  font-size:var(--fs-caption); line-height:var(--lh-caption); letter-spacing:var(--ls-caption);
  color:var(--color-text-muted); text-align:center;
}
@media (max-width:1199px){
  .wx-card{ gap:var(--space-6); padding:var(--space-6); }
}
@media (max-width:767px){
  .wx-card{ flex-direction:column; align-items:center; gap:var(--space-5); padding:var(--space-4); }
  .wx-card__text{ max-width:100%; }
  /* 二维码图自带宽白静默区，卡内边距不必再给 16px，收紧到 12px。
     实测：本档白卡仍为 260px、图片 234px；到 320px 视口白卡为 231px、图片 205px，
     仍远高于 site-spec §9.6 的硬下限 150px。 */
  .wx-card__qr{ flex:0 0 auto; padding:var(--space-3); }
}

/* --------------------------------------------------------- 18. 标签 / 徽标 */
.tag-list{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.tag,.chip{
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill);
  font-size:var(--fs-caption); font-weight:500; letter-spacing:.02em; line-height:var(--lh-caption);
  background:var(--color-brand-50); color:var(--color-link); border:1px solid transparent;
}
.tag--navy,.chip--navy{ background:var(--color-silver-100); color:var(--color-navy-700); }
.tag--shuyi,.chip--shuyi{ background:var(--color-shuyi-50); color:var(--color-shuyi-700); }
.tag--dark,.chip--dark{ background:rgba(255,255,255,.12); color:var(--color-text-on-dark); }

/* ------------------------------------- 19. 返回顶部 / 移动吸底 CTA */
.back-to-top{
  position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:var(--z-backtop);
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:var(--radius-pill);
  background:var(--color-navy-700); color:var(--color-text-on-dark);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(var(--space-2));
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.back-to-top:hover{ background:var(--color-navy-500); transform:translateY(-2px); }
.back-to-top svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.mobile-cta{ display:none; }
@media (max-width:767px){
  body{ padding-bottom:calc(var(--space-7) + var(--space-3) + var(--space-4) + env(safe-area-inset-bottom, 0px)); } /* 76px 防遮挡 */
  .mobile-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-backtop);
    display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:var(--space-2);
    height:calc(var(--space-7) + var(--space-3));                /* 60px */
    padding-inline:var(--space-4);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:var(--color-surface); border-top:1px solid var(--color-border);
    box-shadow:0 -2px 12px rgba(8,22,39,.08);
  }
  .mobile-cta .btn{ min-height:44px; width:100%; }
  .back-to-top{ right:var(--space-4); bottom:calc(var(--space-7) + var(--space-3) + var(--space-4)); width:44px; height:44px; }
}
/* 超窄屏兜底（≈320px，如 iPhone SE 一代；仍属「手机 <768」档）：
   吸底 CTA 为 1fr 1fr 两列，而按钮是 nowrap + 48px 内边距，320px 下按钮的
   min-content（约 162px）大于 1fr 分到的 140px，轨道被撑破 → 整页横向滚动。
   这里只收紧栏间距与按钮内边距（不改色值 / 字号 / 层级），使 min-content 回落到轨道内。 */
@media (max-width:359px){
  .mobile-cta{ gap:var(--space-1); padding-inline:var(--space-3); }
  .mobile-cta .btn{ padding-inline:var(--space-4); min-width:0; }
}

/* ----------------------------------------------------- 20. 滚动进场动效 */
.reveal{ transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal{ opacity:0; transform:translateY(var(--space-5)); }
.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .video-card__btn{ transform:none !important; }
}

/* ------------------------------------------------- 21. 表格（规格表预留） */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ font-size:var(--fs-sm); }
.table th,.table td{ padding:var(--space-3) var(--space-4); text-align:left; border-bottom:1px solid var(--color-gray-200); vertical-align:top; height:52px; }
.table thead th{ font-weight:600; color:var(--color-navy-700); background:var(--color-surface-2); border-bottom-color:var(--color-border-strong); }
.table tbody tr:nth-child(even){ background:var(--color-gray-50); }
.table--dark thead th{ background:var(--color-navy-800); color:var(--color-text-on-dark); }
.table--dark th,.table--dark td{ border-bottom-color:var(--color-border-dark); color:var(--color-silver-300); }

/* 空态 */
.empty{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-8) var(--space-5); text-align:center; color:var(--color-text-muted); }

/* ------------------------------------------------------- 22. 打印微调 */
@media print{
  .site-header,.site-footer,.back-to-top,.mobile-cta,.scrim,.drawer{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}