/* ==========================================================================
   华帝猫 · 官网设计系统 v4（对齐甲方需求说明书）
   HUADIMAO — ENF 家居板一站式供货品牌 · 口号「板正价不飘」
   品牌主色 天蓝 #1E9FE0 · 辅助 暖金 #E8B73A · 点缀 橘红 #E8652B
   白底 #FFFFFF + 浅灰 #F5F8FA · 文字深灰 #2C3E50 · 力量感黑体大标题
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌 Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* 品牌主色 Brand —— 天蓝 #1E9FE0（logo、导航选中、主按钮、标题强调、图标、链接） */
  --brand-50:  #EAF6FC;
  --brand-100: #D5EDF9;
  --brand-200: #AADBF3;
  --brand-300: #74C5EB;
  --brand-400: #41B1E6;
  --brand-500: #1E9FE0;
  --brand-600: #1684BE;
  --brand-700: #126A9A;
  --brand-800: #0F5075;
  --brand-900: #0C3A55;

  /* 中性色 Neutral —— 文字深灰 #2C3E50（正文/标题，不用纯黑） */
  --ink-900: #2C3E50;
  --ink-800: #34495E;
  --ink-700: #47627A;
  --ink-600: #5D7488;
  --ink-500: #7B8FA0;
  --ink-400: #9AAAB8;
  --ink-300: #BCC7D1;

  /* 辅助色 Accent —— 暖金 #E8B73A（slogan点缀、小标签、次按钮描边、hover） */
  --accent-500: #E8B73A;
  --accent-600: #D19E24;
  --accent-700: #A87C18;
  --accent-50:  #FBF3DC;
  --accent-ink: #4A3608;

  /* 点缀色 —— 橘红 #E8652B（"板材"印章色、重要数字，极少大面积使用） */
  --vermilion-500: #E8652B;
  --vermilion-600: #C24E1C;

  /* 语义色 Semantic */
  --success-600: #1E9E6A;
  --success-50:  #E7F6EF;
  --danger-600:  #D64541;
  --danger-50:   #FBECEB;

  /* 表面与边框 Surface —— 白底 + 浅灰底 */
  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F5F8FA;
  --border:      #E5EBF1;
  --border-strong:#D4DEE7;

  /* 排版 Typography —— 标题：阿里巴巴普惠体（力量感）；正文：思源黑体（2 个家族）
     字体硬约束：禁止使用任何专利/付费商业字体（如微软雅黑、DIN Alternate）。
     仅可用 OFL 开源(思源黑体/Noto/Montserrat/Barlow)、系统字体(PingFang/HarmonyOS/冬青)、
     官方免费商用(阿里巴巴普惠体)。新增字体须先确认授权；甲方指定商业字体须其自行提供授权。
     详见 docs/开发文档/需求与设计/需求说明书-里程碑版-v3.0.md §5.2 */
  --font-sans: "Source Han Sans SC", "HarmonyOS Sans SC", "PingFang SC",
               "Hiragino Sans GB", "Noto Sans SC",
               system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Alibaba PuHuiTi", "AlibabaPuHuiTi", "Source Han Sans SC",
               "HarmonyOS Sans SC", "PingFang SC", sans-serif;
  --font-num: "Montserrat", "Barlow", var(--font-sans);

  /* 字阶 Type Scale（clamp 驱动，超大标题） */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.125rem;  /* 18px */
  --fs-xl:   1.25rem;   /* 20px */
  --fs-2xl:  1.5rem;    /* 24px */
  --fs-3xl:  1.875rem;  /* 30px */
  --fs-4xl:  2.25rem;   /* 36px */
  --fs-5xl:  3rem;      /* 48px */
  --fs-6xl:  3.75rem;   /* 60px */

  /* 间距 Spacing（8pt 节奏 + 宏留白） */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;   --sp-24: 6rem;
  --sp-28: 7rem;    --sp-32: 8rem;

  /* 圆角 Radius —— 8-12px 轻圆角（甲方规范） */
  --radius-sm:   0.375rem;  /* 6px */
  --radius:      0.625rem;  /* 10px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   0.875rem;  /* 14px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-3xl:  1.25rem;   /* 20px */
  --radius-full: 999px;

  /* 阴影 Shadow —— 极轻、着色、无 harsh 黑（甲方：0 2px 8px rgba(0,0,0,0.06)） */
  --shadow-xs:    0 1px 2px rgba(44, 62, 80, 0.05);
  --shadow-sm:    0 2px 8px rgba(44, 62, 80, 0.06);
  --shadow:       0 4px 16px -4px rgba(44, 62, 80, 0.10);
  --shadow-lg:    0 12px 32px -12px rgba(44, 62, 80, 0.16);
  --shadow-brand: 0 10px 24px -10px rgba(30, 159, 224, 0.45);
  --shadow-accent:0 10px 24px -10px rgba(232, 183, 58, 0.45);

  /* 层级 Z-index（系统性层级，避免任意值） */
  --z-header: 100;
  --z-overlay: 800;
  --z-grain: 900;
  --z-modal: 1000;

  /* 布局 Layout */
  --container: 78rem;      /* 1248px */
  --header-h: 5rem;        /* 80px（甲方导航高度） */

  /* 动效 Motion —— 自定义贝塞尔（无 linear / ease-in-out） */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);   /* 旗舰级滑入曲线 */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 360ms;
  --dur-slow: 640ms;
  --dur-700: 700ms;
}

/* --------------------------------------------------------------------------
   2. Reset & 基础
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 全站噪点纹理：固定层、pointer-events-none，仅叠加在内容之上、弹窗之下 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.16;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--brand-600);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

::selection { background: var(--brand-200); color: var(--ink-900); }

/* --------------------------------------------------------------------------
   3. 布局 Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-8); } }

/* 宏留白：节拍翻倍，让版面自由呼吸 */
.section { padding-block: var(--sp-20) var(--sp-24); }
@media (min-width: 768px) { .section { padding-block: var(--sp-28) var(--sp-32); } }
.section--tight { padding-block: var(--sp-12); }
@media (min-width: 768px) { .section--tight { padding-block: var(--sp-16); } }

/* 章节背景节奏（替代全站白底，避免单调） */
.section--alt { background: linear-gradient(180deg, #F7FBFD 0%, #FFFFFF 100%); }
.section--tint {
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(30, 159, 224, 0.08), transparent 60%),
    linear-gradient(180deg, #F2F9FD 0%, #FFFFFF 100%);
}
.section--ink {
  background:
    radial-gradient(840px 460px at 88% -10%, rgba(30, 159, 224, 0.14), transparent 60%),
    radial-gradient(560px 380px at 6% 112%, rgba(232, 183, 58, 0.08), transparent 60%),
    var(--brand-900);
  color: rgba(255, 255, 255, 0.88);
}
.section--ink .section-title { color: #fff; }
.section--ink .section-eyebrow { color: var(--brand-200); }
.section--ink .section-desc { color: rgba(255, 255, 255, 0.78); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-12); }
.section-head--center { margin-inline: auto; text-align: center; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--sp-4);
}
.section-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--accent-500);
  border-radius: 1px;
}
.section-head--center .section-eyebrow { justify-content: center; }
.section-head--center .section-eyebrow::after {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--accent-500);
  border-radius: 1px;
}

.section-title {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.section-desc {
  margin-top: var(--sp-5);
  color: var(--ink-600);
  font-size: var(--fs-lg);
  line-height: 1.75;
  max-width: 42rem;
}

/* --------------------------------------------------------------------------
   4. 按钮 Button —— 全圆药丸 + 内嵌箭头 + 磁吸物理
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-7);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease-smooth),
    background-color var(--dur) var(--ease-smooth),
    color var(--dur) var(--ease-smooth),
    border-color var(--dur) var(--ease-smooth),
    box-shadow var(--dur) var(--ease-smooth);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

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

.btn--accent {
  background: var(--accent-500);
  color: var(--accent-ink);
}
.btn--accent:hover {
  background: var(--accent-600);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}

.btn--ghost {
  background: transparent;
  color: var(--brand-700);
  border-color: var(--brand-200);
}
.btn--ghost:hover {
  background: var(--brand-50);
  border-color: var(--brand-400);
  color: var(--brand-700);
  box-shadow: var(--shadow-sm);
}

.btn--outline-light {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  color: #fff;
}

.btn--wechat {
  background: #07C160;
  color: #fff;
}
.btn--wechat:hover {
  background: #06AD56;
  color: #fff;
}

.btn--lg { min-height: 3.75rem; padding: var(--sp-4) var(--sp-8); font-size: var(--fs-lg); }
.btn--sm { min-height: 2.5rem; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* [BUG-12] 图标统一描边渲染：与 Astro Icon.astro 内联属性（fill="none" stroke="currentColor"）等效。
   VM 端模板用 <svg class="icon"><use href="#i-*">，无内联属性时路径按浏览器默认实心 fill 渲染
   （症状：时钟→实心圆、上箭头→实心▲、话筒/微信→实心色块）。fill/stroke 为可继承属性，对 .icon 容器或 svg 均生效。 */
.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 按钮内嵌箭头（Button-in-Button）：图标嵌套进独立圆形托盘中 */
.btn .icon,
.btn .btn__arrow {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.08);
  transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-smooth);
}
.btn--accent .icon,
.btn--accent .btn__arrow { background: rgba(62, 46, 0, 0.14); }
.btn--outline-light .icon,
.btn--outline-light .btn__arrow { background: rgba(255, 255, 255, 0.16); }
.btn .icon svg,
.btn .btn__arrow svg { width: 1.05rem; height: 1.05rem; }
.btn:hover .icon,
.btn:hover .btn__arrow { transform: translateX(2px) translateY(-1px) scale(1.06); }

/* --------------------------------------------------------------------------
   5. 顶栏 Header —— 悬浮流体胶囊导航
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--sp-4) var(--sp-4) 0;
  /* 无背景、无边框 —— 胶囊由 inner 承载 */
}
.site-header__inner {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--sp-4);
  padding-inline: var(--sp-5);
  border-radius: var(--radius-full);
  /* 玻璃层通过 ::before 承载，避免形成 containing block 干扰 fixed 子元素 */
}
.site-header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 32px -16px rgba(8, 46, 72, 0.22);
}
/* 滚动后胶囊加厚重（由 JS 添加 .is-scrolled） */
.site-header.is-scrolled .site-header__inner::before {
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 20px 44px -20px rgba(8, 46, 72, 0.32);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-900);
  font-weight: 700;
  flex: none;
}
.brand:hover { color: var(--ink-900); }
.brand__logo { display: block; height: 42px; width: auto; }
.brand__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: grid;
  place-items: center;
  color: #fff;
}
.brand__mark svg { width: 1.5rem; height: 1.5rem; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-size: var(--fs-xl); letter-spacing: 0.02em; }
.brand__sub { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 500; letter-spacing: 0.06em; }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink-700);
  white-space: nowrap;
  border-radius: var(--radius-full);
  transition: color var(--dur) var(--ease-smooth), background-color var(--dur) var(--ease-smooth);
}
.nav__link:hover { color: var(--brand-600); background: var(--brand-50); }
.nav__link[aria-current="page"] { color: var(--brand-600); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 2px;
  background: var(--accent-500);
  border-radius: 1px;
}
/* C 端业主入口：仅进移动端汉堡菜单（桌面端顶栏已有独立 CTA，此处隐藏避免重复） */
.nav__link--c-entry { display: none; }

.header-cta { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* 移动端汉堡（三线 → X morph） */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--ink-800);
  box-shadow: var(--shadow-xs);
}
.nav-toggle__box {
  position: relative;
  width: 1.25rem;
  height: 0.9rem;
  display: block;
}
.nav-toggle__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-smooth), opacity var(--dur) var(--ease-smooth), top var(--dur) var(--ease-smooth);
}
.nav-toggle__line:nth-child(1) { top: 0; }
.nav-toggle__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__line:nth-child(3) { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5A. 移动端全屏导航 overlay（JS 从 .nav 克隆生成，body 级）
   -------------------------------------------------------------------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--sp-8);
  background: rgba(8, 46, 72, 0.72);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-smooth), visibility var(--dur-slow);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay__link {
  display: block;
  padding: var(--sp-3) 0;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0;
  transform: translateY(28px);
  transition: transform var(--dur-slow) var(--ease-smooth), opacity var(--dur-slow) var(--ease-smooth), color var(--dur) var(--ease-smooth);
}
.nav-overlay.is-open .nav-overlay__link {
  opacity: 1;
  transform: translateY(0);
}
.nav-overlay.is-open .nav-overlay__link:nth-child(1) { transition-delay: 80ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(2) { transition-delay: 140ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(3) { transition-delay: 200ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(4) { transition-delay: 260ms; }
.nav-overlay.is-open .nav-overlay__link:nth-child(5) { transition-delay: 320ms; }
.nav-overlay__link:hover { color: var(--accent-500); }
.nav-overlay__link[aria-current="page"] { color: var(--accent-500); }

/* 桌面端隐藏汉堡与 overlay；移动端隐藏内联 nav */
@media (min-width: 1024px) {
  .nav-overlay { display: none; }
}
/* 窄桌面（1024–1279px）：压缩导航字号与间距、隐藏防伪查询，保证 7 项导航不折叠 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav { gap: 2px; }
  .nav__link { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); }
  .nav .header-verify { display: none; }
}
@media (max-width: 1023px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .site-header__inner { height: 4rem; }
}

/* --------------------------------------------------------------------------
   6. Hero 首屏（满屏沉浸式 + 编辑级排版）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 92dvh;
  background: var(--brand-900) url("/assets/img/hero-case.jpg") center / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(8, 46, 72, 0.96) 0%,
    rgba(8, 46, 72, 0.88) 34%,
    rgba(8, 46, 72, 0.66) 66%,
    rgba(8, 46, 72, 0.34) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-24);
}
.hero__content { max-width: 46rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-6);
}
.hero__badge svg { width: 0.9rem; height: 0.9rem; color: var(--accent-500); }

.hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: #fff;
}
.hero__title .hl {
  color: #fff;
  background-image: linear-gradient(transparent 60%, rgba(233, 163, 0, 0.55) 60%);
  background-repeat: no-repeat;
}

.hero__desc {
  margin-top: var(--sp-6);
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--fs-xl);
  line-height: 1.7;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

.hero__content > *:nth-child(2) { animation-delay: 90ms; }
.hero__content > *:nth-child(3) { animation-delay: 180ms; }
.hero__content > *:nth-child(4) { animation-delay: 270ms; }

.hero__ribbon {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-4) var(--sp-5);
  background: rgba(8, 46, 72, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.swatch-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.swatch-ribbon__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius-full);
  color: #fff;
  transition: background-color var(--dur) var(--ease-smooth), transform var(--dur) var(--ease-smooth);
}
.swatch-ribbon__item:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); color: #fff; }
.swatch-ribbon__item img {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.swatch-ribbon__name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) {
  .swatch-ribbon { grid-template-columns: repeat(2, 1fr); }
  .swatch-ribbon__name { font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   7. 信任条 Trust Bar
   -------------------------------------------------------------------------- */
.trust-bar {
  position: relative;
  background:
    radial-gradient(700px 300px at 12% -40%, rgba(0, 144, 216, 0.28), transparent 60%),
    var(--brand-900);
  color: #fff;
  padding-block: var(--sp-8);
}
.trust-bar__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}
@media (min-width: 768px) { .trust-bar__list { grid-template-columns: repeat(4, 1fr); } }
.trust-bar__item { display: flex; align-items: center; gap: var(--sp-3); }
.trust-bar__icon {
  width: 3rem;
  height: 3rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--brand-200);
}
.trust-bar__icon svg { width: 1.5rem; height: 1.5rem; }
.trust-bar__text strong { display: block; font-size: var(--fs-base); }
.trust-bar__text span { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,0.64); }

/* --------------------------------------------------------------------------
   8. 卡片 & 网格 Card & Grid —— Double-Bezel 质感
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Double-Bezel（Doppelrand）：外铝框 + 内胆卡片 */
.bezel {
  padding: 6px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, #FFFFFF, #EAF0F3);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(14, 40, 52, 0.06),
    0 12px 32px -20px rgba(8, 46, 72, 0.18);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth);
}
.bezel:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(14, 40, 52, 0.06),
    0 28px 56px -24px rgba(8, 46, 72, 0.28);
}
/* 内胆：剥离自身边框/阴影，成为同心内胆 */
.bezel > .card,
.bezel > .feature,
.bezel > .step {
  border: none;
  border-radius: calc(var(--radius-2xl) - 6px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7);
  height: 100%;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth), border-color var(--dur-slow) var(--ease-smooth);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-color: var(--border-strong);
}
.card__body { padding: var(--sp-6); }
.card__title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card__desc { color: var(--ink-600); font-size: var(--fs-base); }

/* 资料下载卡（M10 下载中心 · 品质页资质区 / 合作页下载中心 / 产品详情规格书三处共用） */
.download-card { display: flex; height: 100%; }
.download-card .card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.download-card__top { display: flex; align-items: center; justify-content: space-between; }
.download-card__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-500);
}
.download-card__icon svg { width: 1.4rem; height: 1.4rem; }
.download-card__type {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
}
.download-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-400);
}
.download-card .btn { margin-top: auto; }
.download-card__note { font-size: var(--fs-xs); color: var(--ink-400); }

/* 花色卡（产品） */
.swatch {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  display: block;
  overflow: hidden;
}
.swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 38%, rgba(0,0,0,0.08));
  pointer-events: none;
}
.swatch--oak { background: linear-gradient(135deg, #DFC39A 0%, #C99A5E 48%, #A8773E 100%); }
.swatch--walnut { background: linear-gradient(135deg, #8A5E38 0%, #5E3A1F 52%, #3E2412 100%); }
.swatch--ash { background: linear-gradient(135deg, #D4C8B2 0%, #B3A486 52%, #92835F 100%); }
.swatch--grey { background: linear-gradient(135deg, #C3CBCF 0%, #98A3A9 52%, #76838B 100%); }
.swatch--white { background: linear-gradient(135deg, #F6F4EE 0%, #E3DFD5 55%, #CCC7BA 100%); }
.swatch--teak { background: linear-gradient(135deg, #CB9458 0%, #9A6632 52%, #744722 100%); }
.swatch--black { background: linear-gradient(135deg, #575757 0%, #333333 52%, #1F1F1F 100%); }
.swatch--pet { background: linear-gradient(135deg, #EDE9E0 0%, #D4CEC0 55%, #B8B0A0 100%); }
.swatch--cherry { background: linear-gradient(135deg, #BE7A55 0%, #91482E 52%, #6B2E1A 100%); }
.swatch--maple { background: linear-gradient(135deg, #EBD8AE 0%, #CFB076 52%, #A98A50 100%); }
.swatch--ebony { background: linear-gradient(135deg, #6B5238 0%, #42301C 52%, #2A1D10 100%); }
.swatch--cream { background: linear-gradient(135deg, #F6EFE3 0%, #E8DAC0 55%, #D3C09E 100%); }

.product-card__media { position: relative; overflow: hidden; }
.product-card__media img,
.product-card__media .swatch {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-700) var(--ease-smooth);
}
.product-card:hover .product-card__media img,
.product-card:hover .product-card__media .swatch { transform: scale(1.06); }
.product-card__tag {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--brand-600);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.product-card__tag--hot { background: var(--accent-500); color: var(--accent-ink); }
.product-card__name { font-size: var(--fs-lg); font-weight: 700; }
.product-card__spec { margin-top: var(--sp-2); color: var(--ink-500); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   9. 特性列表 Feature
   -------------------------------------------------------------------------- */
.feature {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth), border-color var(--dur-slow) var(--ease-smooth);
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border-color: var(--border-strong);
}
.feature__icon {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
  color: var(--brand-600);
}
.feature__icon--accent { background: var(--accent-50); color: var(--accent-600); }
.feature__icon svg { width: 1.5rem; height: 1.5rem; }
.feature__title { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.feature__desc { color: var(--ink-600); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   9A. 品牌故事 Brand Story（满屏摄影 + scrim + 玻璃拟态）
   -------------------------------------------------------------------------- */
.brand-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--sp-28) var(--sp-32);
  background: var(--brand-900) url("/static/assets/img/ip-brand-story.webp") center / cover no-repeat;
  color: #fff;
}
.brand-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(8, 46, 72, 0.96) 0%,
    rgba(8, 46, 72, 0.88) 42%,
    rgba(8, 46, 72, 0.6) 100%);
}
.brand-story__inner {
  display: grid;
  gap: var(--sp-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .brand-story__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
}
.brand-story__title { color: #fff; }
.brand-story__text {
  margin-top: var(--sp-6);
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-lg);
  line-height: 1.9;
}
.brand-story__features { display: grid; gap: var(--sp-5); }

.section-eyebrow--light { color: var(--brand-200); }

.glass-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-2xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform var(--dur-slow) var(--ease-smooth), background var(--dur-slow) var(--ease-smooth), border-color var(--dur-slow) var(--ease-smooth);
}
.glass-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}
.glass-card__icon {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: rgba(233, 163, 0, 0.18);
  border: 1px solid rgba(233, 163, 0, 0.3);
  color: var(--accent-500);
}
.glass-card__icon svg { width: 1.5rem; height: 1.5rem; }
.glass-card__title { font-size: var(--fs-lg); color: #fff; margin-bottom: var(--sp-1); }
.glass-card__desc { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   10. 案例卡 Case
   -------------------------------------------------------------------------- */
.case-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.case-card__media img, .case-card__media .ph, .case-card__media .swatch {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-700) var(--ease-smooth);
}
.case-card:hover .case-card__media img,
.case-card:hover .case-card__media .swatch { transform: scale(1.05); }
.case-card__cat {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 3;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-700);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-full);
}
/* 案例封面材质色块（演示用，上线由 item.cover 真实图替换） */
.case-card__noise,
.case-card__watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.case-card__noise {
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.22;
  mix-blend-mode: overlay;
}
.case-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 30%, rgba(0,0,0,0.32) 100%);
  pointer-events: none;
}
.case-card__space {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: var(--radius-full);
}
.case-card__watermark {
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 4px 24px rgba(0,0,0,0.28);
}
.case-card:hover .case-card__watermark { color: rgba(255,255,255,1); }

/* 文章卡 ArticleCard —— 按分类主题色块 + 居中图标 */
.article-card { overflow: hidden; }
.article-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.article-card__icon {
  position: relative;
  z-index: 3;
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
}
.article-card__icon svg { width: 2rem; height: 2rem; }
.article-card__watermark {
  position: absolute;
  z-index: 2;
  left: var(--sp-4);
  bottom: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  padding: 2px var(--sp-3);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
}
.article-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.article-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-3);
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.article-card__date {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}
.article-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
/* 文章卡改为可点击：去下划线、整卡 hover 抬升 */
a.article-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
a.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
a.article-card .card__title { transition: color .2s ease; }
a.article-card:hover .card__title { color: var(--brand-600); }
.article-card__more {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--sp-3); color: var(--brand-600); font-weight: 600; font-size: var(--fs-sm);
}
.article-card__more svg { width: 1em; height: 1em; transition: transform .2s ease; }
a.article-card:hover .article-card__more svg { transform: translateX(3px); }

/* 文章详情页 Article Detail */
.article-detail__tag {
  display: inline-block; margin-bottom: var(--sp-4);
  padding: 3px var(--sp-3); border-radius: 999px;
  background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-sm); font-weight: 600;
}
.article-detail__cover { border-radius: var(--radius-2xl); overflow: hidden; margin-bottom: var(--sp-8); }
.article-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.article-detail__body { max-width: 760px; margin: 0 auto; }
.article-text { font-size: var(--fs-lg); line-height: 1.9; color: var(--ink-700); margin-bottom: var(--sp-6); }
.article-figure { margin: var(--sp-8) 0; }
.article-figure img { width: 100%; border-radius: var(--radius-lg); display: block; }
.article-figure figcaption { margin-top: var(--sp-3); text-align: center; color: var(--ink-500); font-size: var(--fs-sm); }
/* 富文本正文（学院资讯 WYSIWYG 输出，BP-36 / T-155）：沿用文章排版体系 */
.article-rich { font-size: var(--fs-lg); line-height: 1.9; color: var(--ink-700); }
.article-rich > *:last-child { margin-bottom: 0; }
.article-rich p { margin: 0 0 var(--sp-6); }
.article-rich h1, .article-rich h2, .article-rich h3, .article-rich h4 { margin: var(--sp-8) 0 var(--sp-4); line-height: 1.4; color: var(--ink-900); font-weight: 700; }
.article-rich h1 { font-size: 1.6em; }
.article-rich h2 { font-size: 1.4em; }
.article-rich h3 { font-size: 1.2em; }
.article-rich h4 { font-size: 1.05em; }
.article-rich ul, .article-rich ol { margin: 0 0 var(--sp-6); padding-left: 1.6em; }
.article-rich li { margin-bottom: var(--sp-2); }
.article-rich blockquote { margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-6); border-left: 4px solid #1E9FE0; background: #f6f9fc; color: var(--ink-600); border-radius: 8px; }
.article-rich img { max-width: 100%; height: auto; border-radius: var(--radius-lg); display: block; margin: var(--sp-6) 0; }
.article-rich a { color: #1273a8; text-decoration: underline; }
.article-rich figure { margin: var(--sp-8) 0; }
.article-rich figure img { margin: 0; }
.article-rich figcaption { margin-top: var(--sp-3); text-align: center; color: var(--ink-500); font-size: var(--fs-sm); }
.article-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-900); }
.article-video iframe { width: 100%; height: 100%; border: 0; }
.article-video__ph { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.article-video__ph img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.article-video__note {
  position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%);
  background: rgba(0, 0, 0, .6); color: #fff; padding: 6px var(--sp-4); border-radius: 999px;
  font-size: var(--fs-sm); white-space: nowrap;
}
.article-detail__related { max-width: 920px; margin: var(--sp-20) auto 0; }
.article-detail__related .section-eyebrow { margin-bottom: var(--sp-6); }

.case-card__meta { display: flex; gap: var(--sp-3); color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-2); }
/* [BUG-13] meta 图标显式定尺寸：VM 端 <svg class="icon"><use> 的 svg 元素无 viewBox，
   无尺寸规则时按默认对象尺寸 300x150 渲染（Astro 侧 svg 自带 viewBox 收敛到 ~28px）。
   1.75rem 与 Astro 实测观感及 .fab__btn svg 一致；flex:none 防 flex 收缩变形。 */
.case-card__meta .icon { width: 1.75rem; height: 1.75rem; flex: none; }
.case-card__desc { margin-top: var(--sp-2); color: var(--ink-600); font-size: var(--fs-base); }

.case-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) {
  .case-grid { grid-template-columns: repeat(2, 1fr); }
  .case-card--feature { grid-column: 1 / -1; }
  .case-card--feature .case-card__media { aspect-ratio: 21 / 9; }
}

/* 占位图 Placeholder */
.ph {
  background:
    radial-gradient(600px 300px at 30% 0%, rgba(0, 120, 192, 0.08), transparent 60%),
    linear-gradient(135deg, var(--brand-50), var(--surface-2));
  display: grid;
  place-items: center;
  color: var(--ink-400);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   11. 数据统计 Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding: var(--sp-6); }
.stat__num {
  font-size: var(--fs-4xl);
  font-weight: 700;
  color: var(--brand-600);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.stat__num small { font-size: var(--fs-lg); font-weight: 600; }
.stat__label { margin-top: var(--sp-2); color: var(--ink-600); font-size: var(--fs-sm); }

/* 直营仓覆盖：深色章节 + 径向光 + 细微噪点 + 金色编辑体大数字 */
.warehouse {
  position: relative;
  background:
    radial-gradient(720px 420px at 85% -10%, rgba(0, 144, 216, 0.32), transparent 60%),
    radial-gradient(520px 360px at 8% 110%, rgba(233, 163, 0, 0.16), transparent 60%),
    var(--brand-900);
  color: #fff;
}
.warehouse::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
}
.warehouse .container { position: relative; z-index: 1; }
.warehouse .section-head { color: #fff; }
.warehouse .section-eyebrow { color: var(--brand-200); }
.warehouse .section-title { color: #fff; }
.warehouse .section-desc { color: rgba(255, 255, 255, 0.8); }
.warehouse .stat__num { color: var(--accent-500); font-size: var(--fs-5xl); }
@media (min-width: 768px) { .warehouse .stat__num { font-size: var(--fs-6xl); } }
.warehouse .stat__num small { color: var(--accent-500); }
.warehouse .stat__label { color: rgba(255, 255, 255, 0.72); }
.warehouse .card { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }
.warehouse .card:hover { background: rgba(255, 255, 255, 0.1); }
.warehouse .card h3 { color: #fff; }
.warehouse .card p { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-sm); }
.warehouse .card a { color: var(--brand-200); font-weight: 600; }
.warehouse .card a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   12. 步骤 Steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-6); counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--brand-500);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-brand);
}
.step__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.step__desc { color: var(--ink-600); }

/* --------------------------------------------------------------------------
   13. CTA 区块
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(720px 420px at 88% -10%, rgba(0, 144, 216, 0.5), transparent 58%),
    radial-gradient(420px 320px at -6% 112%, rgba(233, 163, 0, 0.22), transparent 60%),
    linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
  color: #fff;
  border-radius: var(--radius-3xl);
  padding: var(--sp-12);
  box-shadow: var(--shadow-brand);
}
@media (min-width: 768px) { .cta { padding: var(--sp-20); } }
.cta::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: -6rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.05;
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; max-width: 42rem; }
.cta__title { color: #fff; font-size: clamp(1.875rem, 3.4vw, 2.75rem); letter-spacing: -0.03em; }
.cta__desc { margin-top: var(--sp-4); color: rgba(255,255,255,0.88); font-size: var(--fs-lg); line-height: 1.75; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   14. 表单 Form
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
  margin-bottom: var(--sp-2);
}
.field label .req { color: var(--danger-600); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(14, 40, 52, 0.04);
  transition: border-color var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px var(--brand-100);
}
.field .hint { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-500); }
.field .error { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--danger-600); }
.field.is-error input,
.field.is-error textarea { border-color: var(--danger-600); }
.form__notice {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  background: var(--surface-2);
  border-radius: var(--radius);
}
.form__success {
  display: none;
  padding: var(--sp-5);
  background: var(--success-50);
  border: 1px solid var(--success-600);
  border-radius: var(--radius);
  color: var(--success-600);
}
.form__success.is-visible { display: block; animation: fadeUp var(--dur-slow) var(--ease-smooth) both; }

/* --------------------------------------------------------------------------
   15. 页头 Page Header（内页）
   -------------------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(900px 420px at 82% -22%, rgba(0, 120, 192, 0.14), transparent 60%),
    radial-gradient(600px 320px at 6% 116%, rgba(233, 163, 0, 0.08), transparent 58%),
    linear-gradient(180deg, #F1F7FA, var(--bg));
  padding-block: var(--sp-16) var(--sp-12);
}
@media (min-width: 768px) { .page-hero { padding-block: var(--sp-24) var(--sp-16); } }
.page-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.page-hero__desc { margin-top: var(--sp-4); max-width: 42rem; color: var(--ink-600); font-size: var(--fs-lg); line-height: 1.75; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-500); }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-300); }

/* 详情页返回列表入口：清晰显眼 + 观感友好（左箭头药丸，hover 左移） */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-700);
  background: #fff;
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-smooth), background-color var(--dur) var(--ease-smooth), border-color var(--dur) var(--ease-smooth), color var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth);
}
.back-link:hover {
  background: var(--brand-50);
  border-color: var(--brand-400);
  color: var(--brand-700);
  transform: translateX(-3px);
  box-shadow: var(--shadow-sm);
}
.back-link svg { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------------------------------
   15.5 分人群导航 Persona Nav（品质保障 / 合作咨询 页顶分区入口）
   -------------------------------------------------------------------------- */
.persona-nav {
  margin-bottom: var(--sp-2);
}
.persona-nav__bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .persona-nav__bar { grid-template-columns: 1fr 1fr; }
}
.persona-nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--dur) var(--ease-smooth),
    box-shadow var(--dur) var(--ease-smooth),
    border-color var(--dur) var(--ease-smooth);
}
.persona-nav__item:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
}
.persona-nav__item--c:hover { border-color: var(--accent-500); }
.persona-nav__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-full);
  background: var(--brand-500);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.persona-nav__tag--c { background: var(--accent-500); color: var(--accent-ink); }
.persona-nav__body { min-width: 0; }
.persona-nav__text {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
}
.persona-nav__hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  line-height: 1.5;
}
.persona-nav__arrow {
  margin-left: auto;
  flex: none;
  color: var(--brand-500);
}
.persona-nav__item--c .persona-nav__arrow { color: var(--accent-700); }

/* --------------------------------------------------------------------------
   16. 筛选 Filter
   -------------------------------------------------------------------------- */
.filterbar {
  margin-bottom: var(--sp-10);
  padding: var(--sp-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.filterbar__top {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.filterbar__search {
  position: relative;
  flex: 1;
  max-width: 24rem;
}
.filterbar__search svg {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--ink-400);
  pointer-events: none;
}
.filterbar__search input {
  width: 100%;
  height: 2.75rem;
  padding: 0 var(--sp-4) 0 var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-color var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth);
}
.filterbar__search input::placeholder { color: var(--ink-400); }
.filterbar__search input:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-50); }
.filterbar__reset {
  height: 2.75rem;
  padding: 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--dur) var(--ease-smooth);
}
.filterbar__reset:hover { color: var(--brand-600); border-color: var(--brand-300); }
.filterbar__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--surface-2);
}
.filterbar__row + .filterbar__row { margin-top: var(--sp-2); }
.filterbar__label {
  flex: none;
  min-width: 2.75rem;
  padding-top: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
}
.filterbar__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filterbar__chip {
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--dur) var(--ease-smooth);
}
.filterbar__chip:hover { border-color: var(--brand-300); color: var(--brand-600); }
.filterbar__chip.is-active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; box-shadow: var(--shadow-brand); }

/* 产品卡片 · 色号 */
.product-card__code {
  font-family: var(--font-num);
  font-weight: 600;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   17. 详情页布局
   -------------------------------------------------------------------------- */
.detail-grid { display: grid; gap: var(--sp-10); }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--sp-16); } }
.detail-media {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 6px;
  background: linear-gradient(180deg, #fff, #EAF0F3);
}
.detail-media .swatch { aspect-ratio: 1 / 1; border-radius: calc(var(--radius-2xl) - 6px); }
.brand-character {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-10);
  border-radius: var(--radius-2xl);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.brand-character img {
  width: 100%;
  max-width: 15rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.brand-character__caption { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-600); }
.detail-title { font-size: clamp(1.75rem, 3.4vw, 2.75rem); letter-spacing: -0.03em; }
.detail-sub { margin-top: var(--sp-2); color: var(--ink-500); font-size: var(--fs-lg); }
.detail-price {
  margin-top: var(--sp-4);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}
.spec-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-6); }
.spec-table th, .spec-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--border);
}
.spec-table th { width: 8rem; color: var(--ink-500); font-weight: 500; background: var(--surface-2); }
.spec-table td { color: var(--ink-800); }

/* --------------------------------------------------------------------------
   18. 页脚 Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background:
    radial-gradient(720px 320px at 90% 0%, rgba(0, 144, 216, 0.16), transparent 60%),
    var(--brand-900);
  color: rgba(255,255,255,0.72);
  padding-top: var(--sp-20);
}
.site-footer a { color: rgba(255,255,255,0.72); transition: color var(--dur) var(--ease-smooth); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: var(--sp-10); padding-bottom: var(--sp-12); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.1fr 1fr; } }
.footer-brand__desc { margin-top: var(--sp-5); max-width: 20rem; font-size: var(--fs-sm); line-height: 1.8; }
.footer-col__title { color: #fff; font-size: var(--fs-base); font-weight: 700; margin-bottom: var(--sp-4); }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { font-size: var(--fs-sm); }
.footer-contact li { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.footer-contact svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--brand-300); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   19. 悬浮转化栏 & 返回顶部
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-6);
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.fab__btn {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-full);
  border: none;
  box-shadow: var(--shadow-lg);
  color: #fff;
  transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-smooth);
}
.fab__btn:hover { transform: translateY(-2px) scale(1.04); }
.fab__btn:active { transform: scale(0.95); }
.fab__btn svg { width: 1.75rem; height: 1.75rem; }
.fab__btn--tel { background: var(--brand-500); }
.fab__btn--tel:hover { background: var(--brand-600); }
.fab__btn--wechat { background: #07C160; }
.fab__btn--wechat:hover { background: #06AD56; }
.fab__btn--kefu { background: var(--brand-500); }
.fab__btn--kefu:hover { background: var(--brand-600); }
.fab__btn--top { background: var(--ink-700); opacity: 0; visibility: hidden; }
.fab__btn--top.is-visible { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   20. 微信弹窗 & 提示
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(8, 46, 72, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-smooth), visibility var(--dur-slow);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 21rem;
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: var(--sp-10);
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: none;
  background: var(--surface-2);
  border-radius: var(--radius-full);
  color: var(--ink-600);
  transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-smooth);
}
.modal__close:hover { transform: rotate(90deg); background: var(--brand-50); }
.modal__close svg { width: 1.25rem; height: 1.25rem; }
.modal__mascot {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--sp-4);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.modal__mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal__title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.modal__qr {
  width: 12rem;
  height: 12rem;
  margin: var(--sp-5) auto;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--ink-400);
  font-size: var(--fs-sm);
}
.modal__desc { color: var(--ink-600); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   21. 工具类
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-accent { color: var(--accent-600); }
.text-brand { color: var(--brand-600); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.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;
}

/* --------------------------------------------------------------------------
   22. 动画 & reduced-motion
   -------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-48px); filter: blur(6px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(48px); filter: blur(6px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}
.reveal { animation: fadeUp var(--dur-700) var(--ease-smooth) both; }
.reveal-up { animation: fadeUp var(--dur-700) var(--ease-smooth) both; }
.reveal-left { animation: fadeLeft var(--dur-700) var(--ease-smooth) both; }
.reveal-right { animation: fadeRight var(--dur-700) var(--ease-smooth) both; }

/* ==========================================================================
   v4 · 甲方规范对齐（天蓝 #1E9FE0 · 暖金 #E8B73A · 白底浅灰 · 中蓝页脚 #1A7AB8）
   白底 80px 导航 · 白到浅蓝首屏 · 双入口按钮 · 白卡片 + 天蓝线性图标 · 力量感黑体
   ========================================================================== */

/* —— 导航：白底 80px，滚动轻阴影（甲方 5.3，去掉悬浮胶囊） —— */
.site-header {
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  height: var(--header-h);
  border-radius: 0;
  padding-inline: var(--sp-8);
}
.site-header__inner::before { display: none; }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* —— 标题：力量感黑体（阿里巴巴普惠体 / 思源黑体 Bold），不用衬线 —— */
.hero__title,
.section-title,
.brand-story__title,
.cta__title,
.detail-title,
.slogan__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 数据数字：等宽粗体数字（Montserrat / DIN） */
.stat__num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* —— 暖金描边次按钮（C 端入口 / 次操作） —— */
.btn--gold {
  background: #fff;
  color: var(--accent-700);
  border: 1.5px solid var(--accent-500);
}
.btn--gold:hover {
  background: var(--accent-50);
  border-color: var(--accent-600);
  color: var(--accent-700);
  box-shadow: var(--shadow-accent);
}

/* —— Hero：白 → 极浅蓝渐变首屏 · 左文右猫 · 双入口 —— */
.hero {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: auto;
  padding-block: var(--sp-16) var(--sp-20);
  background:
    radial-gradient(1080px 620px at 88% -18%, rgba(30, 159, 224, 0.16), transparent 62%),
    radial-gradient(760px 520px at -10% 116%, rgba(232, 183, 58, 0.10), transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #F2F9FD 100%);
}
.hero::before { display: none; }
.hero__inner { display: block; padding-block: 0; }
.hero__grid { display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 1024px) {
  .hero {
    min-height: min(88dvh, 820px);
    display: flex;
    align-items: center;
    padding-block: var(--sp-20) var(--sp-24);
  }
  .hero__slides { width: 100%; }
  .hero__inner { width: 100%; }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-16); }
}
.hero__content { max-width: 42rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--brand-700);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--sp-6);
}
.hero__badge-dot {
  width: 0.5rem; height: 0.5rem; flex: none;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 4px var(--accent-50);
}
.hero__title {
  color: var(--ink-900);
  font-size: clamp(2.75rem, 6.4vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: balance;
}
.hero__title .hl {
  position: relative;
  display: inline;
  color: var(--brand-700);
  background-image: linear-gradient(transparent 62%, rgba(232, 183, 58, 0.42) 62%, rgba(232, 183, 58, 0.42) 92%, transparent 92%);
  background-repeat: no-repeat;
  padding: 0 0.05em;
}
.hero__desc { margin-top: var(--sp-7); color: var(--ink-600); font-size: var(--fs-xl); line-height: 1.8; max-width: 36rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-10); }

/* 右侧 IP 国潮正气猫（透明底抠图）+ 悬浮印章 */
.hero__ip { position: relative; display: flex; justify-content: center; align-items: center; }
.hero__ip picture { display: block; width: 100%; }
.hero__ip img {
  width: 100%;
  max-width: 30rem;
  border-radius: var(--radius-2xl);
  box-shadow:
    0 30px 80px -20px rgba(30, 159, 224, 0.4),
    0 8px 24px -8px rgba(8, 46, 72, 0.18);
  animation: heroFloat 6s ease-in-out infinite;
}
@media (max-width: 1023px) {
  .hero__ip img { max-width: 22rem; }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.hero__ip-seal {
  position: absolute;
  top: var(--sp-2);
  right: 0;
  display: grid;
  place-items: center;
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  background: var(--vermilion-500);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-lg);
  transform: rotate(-8deg);
}

/* —— 首屏四大承诺：图标 + 数字强调标题（PC 横排 / 手机 2×2） —— */
.hero__promises {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
@media (min-width: 768px) {
  .hero__promises {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-10);
  }
}
.hero-promise {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .hero-promise { padding: var(--sp-4) var(--sp-5); }
}
.hero-promise__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--brand-500);
}
.hero-promise__icon svg { width: 1.25rem; height: 1.25rem; }
.hero-promise__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
}
.hero-promise__title b {
  font-family: var(--font-num);
  font-weight: 800;
  color: var(--brand-600);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .hero-promise__title { font-size: var(--fs-base); }
}

/* —— Hero 轮播图：交叉淡入淡出 + 内容上浮入场 —— */
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-700) var(--ease-smooth), visibility 0s linear var(--dur-700);
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-700) var(--ease-smooth), visibility 0s;
}

/* 激活轮播内容：文字先上浮，视觉随后 */
.hero__slide .hero__content > *,
.hero__slide .hero__ip,
.hero__slide .hero__swatches,
.hero__slide .hero__cases,
.hero__slide .hero__promises {
  animation: heroIn var(--dur-700) var(--ease-smooth) both;
  animation-play-state: paused;
}
.hero__slide.is-active .hero__content > * { animation-play-state: running; }
.hero__slide.is-active .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero__slide.is-active .hero__content > *:nth-child(2) { animation-delay: 0.12s; }
.hero__slide.is-active .hero__content > *:nth-child(3) { animation-delay: 0.19s; }
.hero__slide.is-active .hero__content > *:nth-child(4) { animation-delay: 0.26s; }
.hero__slide.is-active .hero__ip,
.hero__slide.is-active .hero__swatches,
.hero__slide.is-active .hero__cases,
.hero__slide.is-active .hero__promises {
  animation-play-state: running;
  animation-delay: 0.16s;
}
@keyframes heroIn {
  from { transform: translateY(28px); }
  to { transform: translateY(0); }
}

/* 轮播 2：花色 2×2 卡片 */
.hero__swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.hero__swatch {
  margin: 0;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.hero__swatch img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 6px);
}
.hero__swatch figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  text-align: center;
}

/* 轮播 3：实景案例拼贴（1 大 + 2 小） */
.hero__cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.hero__case {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.hero__case--feature { grid-column: 1 / -1; }
.hero__case img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__case--feature img { aspect-ratio: 16 / 9; }
.hero__case:not(.hero__case--feature) img { aspect-ratio: 4 / 3; }
.hero__case figcaption {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
  background: rgba(44, 62, 80, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
        border-radius: var(--radius-full);
      }

      /* 轮播 4：传统大图（一张大图 + 点击跳转链接 · T-161） */
      .hero__banner {
        display: block;
        width: 100%;
        border-radius: var(--radius-2xl);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
      }
      .hero__banner img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 21 / 9;
        object-fit: cover;
      }
      @media (max-width: 767px) {
        .hero__banner img { aspect-ratio: 16 / 9; }
      }

      /* 圆点指示器 */
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: var(--sp-8);
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  z-index: 2;
}
.hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(30, 159, 224, 0.22);
  cursor: pointer;
  transition: width var(--dur) var(--ease-smooth), background-color var(--dur) var(--ease-smooth);
}
.hero__dot.is-active {
  width: 1.75rem;
  background: var(--brand-500);
}

/* 左右箭头 */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--brand-600);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-smooth), transform var(--dur) var(--ease-smooth), background-color var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth);
}
.hero__arrow svg { width: 1.25rem; height: 1.25rem; }
.hero__arrow--prev { left: var(--sp-6); }
.hero__arrow--next { right: var(--sp-6); }
.hero__arrow:hover { background: #fff; box-shadow: var(--shadow-brand); }
@media (min-width: 1024px) {
  .hero:hover .hero__arrow { opacity: 1; }
}
@media (max-width: 1023px) {
  .hero__arrow { display: none; }
  .hero__dots { bottom: var(--sp-5); }
}

/* —— Slogan 区：板正价不飘 —— */
.slogan {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: var(--sp-20) var(--sp-24);
  background:
    radial-gradient(720px 360px at 50% -20%, rgba(30, 159, 224, 0.10), transparent 60%),
    var(--bg);
}
.slogan__mascot { width: 3.5rem; height: 3.5rem; margin: 0 auto var(--sp-4); }
.slogan__mascot img { width: 100%; height: 100%; object-fit: contain; }
.slogan__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--ink-900);
}
.slogan__title .hl { color: var(--brand-500); }
.slogan__title .stamp { color: var(--vermilion-500); }
.slogan__desc {
  margin-top: var(--sp-6);
  color: var(--ink-600);
  font-size: var(--fs-xl);
  font-weight: 500;
}

/* —— 二级按钮：浅蓝幽灵 —— */
.btn--ghost { color: var(--brand-700); border-color: var(--brand-200); }
.btn--ghost:hover { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); box-shadow: var(--shadow-sm); }

/* —— 深色章节 → 甲方规范：白底 / 浅灰底 + 天蓝点缀 —— */
.trust-bar {
  background:
    radial-gradient(700px 300px at 12% -40%, rgba(30, 159, 224, 0.08), transparent 60%),
    var(--surface-2);
  color: var(--ink-800);
}
.trust-bar__icon { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-500); }
.trust-bar__text span { color: var(--ink-500); }

.brand-story {
  background:
    radial-gradient(900px 420px at 82% -22%, rgba(30, 159, 224, 0.10), transparent 60%),
    linear-gradient(180deg, #F1F7FA, var(--bg));
  color: var(--ink-800);
}
.brand-story::after { display: none; }
.brand-story__title { color: var(--ink-900); }
.brand-story__text { color: var(--ink-600); }
.section-eyebrow--light { color: var(--brand-600); }
.glass-card__icon { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-500); }

.warehouse {
  background:
    radial-gradient(840px 460px at 88% -10%, rgba(30, 159, 224, 0.10), transparent 60%),
    radial-gradient(560px 380px at 6% 112%, rgba(232, 183, 58, 0.08), transparent 60%),
    var(--surface-2);
  color: var(--ink-800);
  position: relative;
}
.warehouse::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.04;
}
.warehouse .container { position: relative; z-index: 1; }
.warehouse .section-eyebrow { color: var(--brand-600); }
.warehouse .section-title { color: var(--ink-900); }
.warehouse .section-desc { color: var(--ink-600); }
.warehouse .stat__num { color: var(--brand-600); }
.warehouse .stat__num small { color: var(--brand-600); }
.warehouse .stat__label { color: var(--ink-500); }
.warehouse .card { background: var(--surface); border-color: var(--border); }
.warehouse .card:hover { background: var(--surface); }
.warehouse .card h3 { color: var(--ink-900); }
.warehouse .card p { color: var(--ink-600); }
.warehouse .card a { color: var(--brand-600); }
.warehouse .card a:hover { color: var(--brand-700); }

.cta {
  background:
    radial-gradient(720px 420px at 88% -10%, rgba(30, 159, 224, 0.18), transparent 58%),
    radial-gradient(420px 320px at -6% 112%, rgba(232, 183, 58, 0.14), transparent 60%),
    linear-gradient(135deg, #EAF6FC 0%, #D5EDF9 100%);
  color: var(--ink-800);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.cta::after {
  background: linear-gradient(135deg, rgba(30, 159, 224, 0.10), rgba(232, 183, 58, 0.06));
  filter: blur(8px);
}
.cta__title { color: var(--ink-900); }
.cta__desc { color: var(--ink-600); }

/* 深色 CTA 主题：用于深色章节之后 */
.cta--dark {
  background:
    radial-gradient(720px 420px at 88% -10%, rgba(0, 144, 216, 0.5), transparent 58%),
    radial-gradient(420px 320px at -6% 112%, rgba(233, 163, 0, 0.22), transparent 60%),
    linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
.cta--dark::after { background: rgba(255, 255, 255, 0.08); filter: none; }
.cta--dark .cta__title { color: #fff; }
.cta--dark .cta__desc { color: rgba(255, 255, 255, 0.88); }

.site-footer {
  background:
    radial-gradient(720px 320px at 90% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #1A7AB8 0%, #126A9A 100%);
}

/* 双边框托盘 → 甲方轻卡片（白 + 浅灰边框 + 轻阴影） */
.bezel { background: linear-gradient(180deg, #FFFFFF, #EAF0F3); }
.bezel:hover { box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(14, 40, 52, 0.06), 0 28px 56px -24px rgba(8, 46, 72, 0.26); }

/* 移动端全屏菜单 → 白玻璃 + 深灰链接 */
.nav-overlay { background: rgba(255, 255, 255, 0.94); }
.nav-overlay__link { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); }
.nav-overlay__link:hover { color: var(--brand-600); }
.nav-overlay__link[aria-current="page"] { color: var(--brand-600); }

/* --------------------------------------------------------------------------
   23. 首页专属：服务承诺卡 / C端利益点 / 分仓地图
   -------------------------------------------------------------------------- */
.promise {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth), border-color var(--dur-slow) var(--ease-smooth);
}
.promise:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-200); }
.promise__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.promise__icon {
  width: 3rem; height: 3rem; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--brand-500);
}
.promise__icon svg { width: 1.5rem; height: 1.5rem; }
.promise__time {
  flex: none;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.promise__title { font-size: var(--fs-lg); margin-top: var(--sp-3); }
.promise__desc { color: var(--ink-600); font-size: var(--fs-base); }

/* C 端利益点：编号 + 大标题（白卡片，浅灰底章节） */
.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth);
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit__num {
  font-family: var(--font-num);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-500);
}
.benefit__title { font-size: var(--fs-xl); }
.benefit__desc { color: var(--ink-600); font-size: var(--fs-base); }

/* 分仓地图（占位，后续替换为真实华南地图） */
.map-card {
  position: relative;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background:
    radial-gradient(720px 400px at 72% 18%, rgba(30, 159, 224, 0.14), transparent 60%),
    radial-gradient(520px 360px at 16% 92%, rgba(232, 183, 58, 0.10), transparent 60%),
    linear-gradient(180deg, #F7FBFD, #EFF6FA);
}
.map-card__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); padding: var(--sp-6); }
@media (min-width: 768px) { .map-card__grid { grid-template-columns: repeat(4, 1fr); } }
.map-card__pin {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
}
.map-card__pin b { color: var(--brand-600); }
.map-card__pin small { font-weight: 500; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   24. 新增组件（对齐甲方需求说明书 v3）
   防伪查询入口 / ENF 对比柱状图 / 下载中心 / 正品查询结果 /
   页脚 slogan 与二维码 / 手机端底部 Tab 栏 / 发展历程时间轴 / FAQ
   -------------------------------------------------------------------------- */

/* 导航栏右侧「防伪查询」盾牌图标入口 */
.header-verify {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-smooth), border-color var(--dur) var(--ease-smooth), color var(--dur) var(--ease-smooth);
}
.header-verify svg { width: 1.1rem; height: 1.1rem; flex: none; }
.header-verify:hover { background: var(--brand-100); border-color: var(--brand-400); color: var(--brand-700); }

/* ENF/E0/E1 甲醛释放量对比柱状图（数据来源 GB/T 39600-2021） */
.enf-chart {
  display: grid;
  gap: var(--sp-5);
}
.enf-chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-6) 0;
  border-bottom: 2px solid var(--border-strong);
}
.enf-chart__bar {
  flex: 1;
  max-width: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.enf-chart__value {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink-900);
  white-space: nowrap;
}
.enf-chart__col {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: transform var(--dur-slow) var(--ease-smooth);
}
.enf-chart__bar:hover .enf-chart__col { transform: scaleY(1.03); transform-origin: bottom; }
.enf-chart__col--enf { height: 2rem; background: linear-gradient(180deg, var(--brand-400), var(--brand-500)); }
.enf-chart__col--e0 { height: 4rem; background: linear-gradient(180deg, var(--brand-300), var(--brand-400)); }
.enf-chart__col--e1 { height: 9.9rem; background: linear-gradient(180deg, var(--brand-200), var(--brand-300)); }
.enf-chart__label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-base); font-weight: 600; color: var(--ink-700);
}
.enf-chart__label small { font-weight: 500; color: var(--ink-500); font-size: var(--fs-xs); }
.enf-chart__note { font-size: var(--fs-sm); color: var(--ink-500); text-align: center; }

/* 下载中心卡片 */
.download-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth), border-color var(--dur-slow) var(--ease-smooth);
}
.download-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-200); }
.download-card__icon {
  flex: none;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--brand-600);
}
.download-card__icon svg { width: 1.5rem; height: 1.5rem; }
.download-card__body { flex: 1; min-width: 0; }
.download-card__title { font-size: var(--fs-base); }
.download-card__desc { color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-1); }
.download-card__btn {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--brand-200);
  color: var(--brand-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: #fff;
  transition: background-color var(--dur) var(--ease-smooth), border-color var(--dur) var(--ease-smooth);
}
.download-card__btn svg { width: 1rem; height: 1rem; }
.download-card__btn:hover { background: var(--brand-50); border-color: var(--brand-400); }

/* 正品查询结果 */
.verify-result {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.verify-result__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.verify-result__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--success-50);
  color: var(--success-600);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.verify-result__badge svg { width: 1rem; height: 1rem; }
.verify-result__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.verify-result__item { font-size: var(--fs-sm); color: var(--ink-500); }
.verify-result__item b { display: block; color: var(--ink-900); font-weight: 600; margin-bottom: var(--sp-1); }
.verify-result__warn {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--danger-600);
  background: var(--danger-50);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}

/* 页脚 slogan + 二维码 + 合规链接 */
.footer-slogan {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.footer-qr {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center;
}
.footer-qr__box {
  width: 5.5rem; height: 5.5rem;
  display: grid; place-items: center;
  background: #fff;
  border-radius: var(--radius);
  color: var(--ink-500);
  font-size: var(--fs-xs);
}
.footer-qr__label { color: rgba(255, 255, 255, 0.7); font-size: var(--fs-xs); }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.footer-legal a { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }
.footer-legal a:hover { color: #fff; }

/* 手机端底部 Tab 栏（5 个核心入口） */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  display: none;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px -16px rgba(8, 46, 72, 0.3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) 0 var(--sp-3);
  color: var(--ink-500);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
}
.tabbar__item svg { width: 1.4rem; height: 1.4rem; }
.tabbar__item.is-active { color: var(--brand-600); }
@media (max-width: 767px) {
  .tabbar { display: grid; z-index: calc(var(--z-header) + 1); }
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  .fab { bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* 发展历程时间轴 */
.timeline {
  position: relative;
  display: grid; gap: var(--sp-6);
  padding-left: var(--sp-6);
}
.timeline::before {
  content: "";
  position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--brand-200);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute; left: calc(-1 * var(--sp-6) + 3px); top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.timeline__year { font-family: var(--font-num); font-weight: 700; color: var(--brand-600); font-size: var(--fs-lg); }
.timeline__text { color: var(--ink-600); margin-top: var(--sp-1); }
.timeline__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-1); font-weight: 600; font-size: var(--fs-base);
  color: var(--ink-900); text-decoration: none; transition: color .2s ease;
}
.timeline__link svg { width: 1em; height: 1em; transition: transform .2s ease; color: var(--brand-600); }
.timeline__link:hover { color: var(--brand-600); }
.timeline__link:hover svg { transform: translateX(3px); }

/* FAQ 常见问题（静态展开，利于 SEO 结构化数据） */
.faq { display: grid; gap: var(--sp-5); }
.faq__item {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.faq__q { display: flex; gap: var(--sp-3); font-size: var(--fs-lg); }
.faq__q-mark { flex: none; color: var(--brand-500); font-weight: 700; }
.faq__a { margin-top: var(--sp-3); color: var(--ink-600); line-height: 1.85; font-size: var(--fs-base); }
.faq__a p + p { margin-top: var(--sp-3); }
.faq__a ul { margin-top: var(--sp-2); padding-left: var(--sp-5); list-style: disc; }
.faq__a li { margin-bottom: var(--sp-2); }

/* 品类全览 / 供给范围表 */
.cat-table { width: 100%; border-collapse: collapse; }
.cat-table th, .cat-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.cat-table th { background: var(--surface-2); color: var(--ink-500); font-weight: 500; white-space: nowrap; }
.cat-table td { color: var(--ink-800); }

/* 媒体受访：press-card（媒体 Logo + 引言 + 受访人） */
.press-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  transition: transform var(--dur-slow) var(--ease-smooth), box-shadow var(--dur-slow) var(--ease-smooth), border-color var(--dur-slow) var(--ease-smooth);
}
.press-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-200);
}
.press-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.press-card__logo {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  box-shadow: var(--shadow-brand);
}
.press-card__media {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.press-card__meta {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.press-card__body { position: relative; padding-left: var(--sp-4); }
.press-card__quote-mark {
  position: absolute;
  left: -0.5rem;
  top: -1rem;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-200);
}
.press-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink-900);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.press-card__summary {
  margin-top: var(--sp-3);
  color: var(--ink-600);
  font-size: var(--fs-base);
  line-height: 1.8;
}
.press-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}
.press-card__boss { font-weight: 600; color: var(--ink-700); }
.press-card__tag {
  padding: 2px var(--sp-3);
  background: var(--accent-50);
  color: var(--accent-700);
  border-radius: var(--radius-full);
  font-weight: 600;
}

/* 分仓卡：顶部色彩色条 + 极简行内排版 */
.wh-card { position: relative; padding-top: 0; overflow: hidden; }
.wh-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}
.wh-card__photo--empty {
  display: grid;
  place-items: center;
  color: var(--ink-400);
  font-size: var(--fs-xs);
}
.wh-card__accent {
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
}
.wh-card--transit .wh-card__accent { background: linear-gradient(90deg, var(--accent-500), var(--accent-50)); }
.wh-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
}
.wh-card__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.wh-card__tag {
  padding: 2px var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.wh-card__tag--direct { background: var(--brand-50); color: var(--brand-700); }
.wh-card__tag--transit { background: var(--accent-50); color: var(--accent-700); }
.wh-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6);
  color: var(--ink-700);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.wh-card__row svg { width: 1rem; height: 1rem; flex: none; color: var(--brand-500); margin-top: 0.3rem; }
.wh-card__link {
  display: block;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-700);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  transition: background-color var(--dur) var(--ease-smooth), color var(--dur) var(--ease-smooth);
}
.wh-card__link:hover { background: var(--brand-50); color: var(--brand-700); }

/* map-card 顶部 chip 行 + 底部说明 */
.map-card__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6) 0;
}
.map-card__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
}
.map-card__chip b { color: var(--brand-700); font-family: var(--font-num); font-weight: 800; }
.map-card__chip--live { color: var(--success-600); border-color: var(--success-600); background: var(--success-50); }
.map-card__bottom {
  padding: var(--sp-4) var(--sp-6) var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
  border-top: 1px dashed var(--border);
  margin-top: var(--sp-3);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-up, .reveal-left, .reveal-right { animation: none; }
}

/* ==========================================================================
   24. 媒体卡 / 灯箱 / 法务页（T03·T04·T02 缺口闭环）
   ========================================================================== */

/* 图片填充兜底：品牌渐变 + object-fit:cover（替代 .ph 灰块，G2 硬约束） */
.media-fill {
  position: relative;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(600px 320px at 30% 0%, rgba(0, 144, 216, 0.12), transparent 60%),
    linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.media-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-fill__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* 媒体卡视觉区（视频大卡 / 封面 / 占位） */
.press-card__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.press-card__cover,
.press-card__cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.press-card__cover--video {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(600px 320px at 30% 0%, rgba(0, 144, 216, 0.12), transparent 60%),
    linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.press-card__cover-ph { border-radius: 0; }
.press-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-600);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-smooth);
}
.press-card__play svg { width: 1.75rem; height: 1.75rem; margin-left: 2px; }
.press-card__cover--video:hover .press-card__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }

/* 媒体卡图集缩略图 */
.press-card__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--sp-3);
  padding: 0 var(--sp-6) var(--sp-2);
}
.press-card__thumb {
  border: 0;
  padding: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-2);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-smooth), box-shadow var(--dur) var(--ease-smooth);
}
.press-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.press-card__thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* 法务页（隐私 / 协议） */
.legal-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-700);
  background: var(--accent-50);
  border: 1px solid var(--accent-500);
  border-radius: var(--radius-lg);
}
.legal-banner__dot {
  width: 0.6rem;
  height: 0.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 4px rgba(232, 183, 58, 0.2);
}
.legal-block { max-width: 52rem; }
.legal-section { padding-block: var(--sp-6); border-bottom: 1px solid var(--border); }
.legal-section:first-child { padding-top: 0; }
.legal-section__title { font-size: var(--fs-xl); letter-spacing: -0.01em; }
.legal-section__text { margin-top: var(--sp-3); color: var(--ink-600); line-height: 1.85; }
.legal-note {
  margin-top: var(--sp-8);
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  background: var(--surface-2);
  border-left: 3px solid var(--brand-400);
  border-radius: var(--radius);
}

/* 原生 dialog 灯箱（零第三方依赖） */
.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 64rem);
  max-width: 92vw;
  height: min(86vh, 40rem);
  max-height: 86vh;
  padding: var(--sp-8);
  border: none;
  border-radius: var(--radius-2xl);
  background: rgba(8, 46, 72, 0.96);
  color: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgba(8, 46, 72, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-smooth), transform var(--dur) var(--ease-spring);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.26); transform: rotate(90deg); }
.lightbox__close svg { width: 1.25rem; height: 1.25rem; }
.lightbox__content {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__video { width: 100%; height: 100%; }
.lightbox__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
  background: #000;
}