/* ============================================================
   P5 v59.24: 字体改用 Bootstrap 5 system fonts (跟 karlstorz.com 一致)
   - 之前: Inter (英文) + Noto Sans SC (中文) + Geist Mono (等宽) 本地字体
   - 现在: system-ui + 中文 fallback (PingFang SC / Microsoft YaHei)
   - 优势: 0 字体下载, 跨平台一致, 加载更快
   ============================================================ */

html, body {
  overscroll-behavior-y: none;  /* 禁用 iOS Safari 顶部下拉回弹 (iOS 15+) */
  /* 注意: 不设任何 overflow-x — iOS Safari 17 上仍可能禁用 touch 滚动 */
}

/* ===== Geist Mono (等宽, 拉丁字符) ===== */
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+FEFF, U+FFFD;
}

/* ============== TOKENS ============== */
:root {
  /* ===== Color System (P2-10 收敛 + P3 整站白底) ===== */
  /* --bg-dark 现在表示"页面基础背景"——白底站用 #ffffff，深色块单独覆盖 */
  --bg-dark: #ffffff;
  --bg-light: #f4f0ea;
  --ink-dark: #010201;
  --ink-light: #010201;          /* 整站默认文字色 = 深色 */
  --ink-soft-dark: rgba(1,2,1,0.62);
  --ink-soft-light: rgba(1,2,1,0.55);
  --hairline-dark: rgba(1,2,1,0.12);   /* 默认细线：12% 黑 */
  --hairline-light: rgba(1,2,1,0.18);

  /* Primary — 品牌色 (科众青绿) */
  --brand-primary: #0F766E;          /* teal-700 深青绿 (v6 站 + logo 主色) */
  --brand-primary-hover: #0B5E58;
  --brand-primary-soft: rgba(15, 118, 110, 0.12);
  --brand-primary-bg: rgba(15, 118, 110, 0.06);
  --brand-primary-50: #E8F5F0;        /* hero 段淡青绿背景 */
  --brand-primary-100: #D2EBE0;       /* 略深淡青绿 */

  /* Accent — 同主色 */
  --accent: #0F766E;
  --accent-hover: #0B5E58;

  /* Semantic */
  --success: #34c759;
  --warning: #ff9500;
  --danger:  #ff3b30;

  /* Surface — 卡片/容器背景 (P3 翻转：白底站用极浅灰) */
  --surface-1: rgba(0, 0, 0, 0.02);
  --surface-2: rgba(0, 0, 0, 0.04);
  --surface-3: rgba(0, 0, 0, 0.06);
  --surface-elevated: #ffffff;

  /* Border / Hairline (P3 翻转：白底站用黑色透明) */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);

  /* ===== Layout ===== */
  --container-max: 1440px;
  --gutter: 80px;
  --gutter-mobile: 20px;

  /* ===== Typography Scale (P2-9/12 统一 6 级) ===== */
  --fs-xs:   12px;   /* meta / kicker / lang switch */
  --fs-sm:   14px;   /* body small / nav / lede */
  --fs-base: 16px;   /* body default */
  --fs-lg:   18px;   /* card body / button */
  --fs-xl:   22px;   /* h3 / page title sub */
  --fs-2xl:  28px;   /* display mobile */
  --fs-3xl:  36px;   /* display mid */
  --fs-4xl:  clamp(36px, 4.5vw, 56px);  /* display desktop */
  --fs-5xl:  clamp(48px, 6vw, 76px);    /* hero title */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.45;
  --lh-relaxed: 1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ===== Spacing Scale (P2-12 — 4px 网格) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ===== Radius ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;

  /* ===== Shadow ===== */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);

  /* ===== Font (P5 v59.56: 用户要求用 PingFang SC - PingFangSC-Medium 字重, 提到 font-family 首位) ===== */
  --font-sans: "PingFang SC", "PingFangSC-Medium", system-ui, -apple-system, "Helvetica Neue", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-display: var(--font-sans);   /* P5 v59.56: --font-display 之前未定义, 现在跟 --font-sans 一致 */
  --font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ============== RESET ============== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-light);     /* = #010201，整站白底配深色文字 */
  background: var(--bg-dark);   /* = #ffffff */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ============== NAV ============== */
.nav {
  position: relative;        /* P5 v59.54: 改用用户上传色 #397E79 */
  z-index: 100;
  padding: 32px 0 20px 0;        /* P5 v59.55c: 26→32 (top), 26→20 (bottom), 整体下移 6px, logo 距 nav 顶 32 */
  background: #397E79;
  border-bottom: 0;
  font-weight: 500;                  /* P5 v59.57: nav 用 PingFangSC-Medium (PostScript 名称对应 CSS font-weight 500) */
}
.nav.scrolled {
  background: rgba(57, 126, 121, 0.96);                    /* P5 v59.54: 滚动后仍是上传色半透明 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-logo { height: 44px; width: auto; display: block; flex-shrink: 0; }
.nav-brand-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1; margin-left: 0; }   /* P5 v59.55: 改 12→0, 因为外面 .nav-brand-stack 已加 12px */
.nav-brand-zh { font-size: 18px; font-weight: 500; color: #ffffff; letter-spacing: 0.04em; white-space: nowrap; }   /* P5 v59.58: 600→500 (nav 全 Medium) */
.nav-brand-en { font-size: 18px; font-weight: 500; color: #ffffff; letter-spacing: 0.04em; white-space: nowrap; }   /* P5 v59.58: 600→500 */
/* P5 v59.55: nav 也加 slogan "KEZHONG MEDICAL APPARATUS" (跟 footer 一致) */
.nav-brand-stack { display: inline-flex; flex-direction: column; align-items: flex-start; margin-left: 12px; }
.nav .nav-brand-slogan { font-size: 11px; color: #ffffff; line-height: 1.5; margin: 2px 0 0 0; letter-spacing: 0.01em; }   /* P5 v59.63: 0.65→1 白色 */
/* P5 v59.55: nav logo 中线对齐 "科众医疗" 中线 (而非 stack 中线), 跟 footer 同款
   - v59.55: translateY(-13px) 让 logo 跟 zh 中线对齐, 但 logo top=13 离 nav 顶太近
   - v59.55c: padding 26→32 (top), logo transform 0 (让 logo 顶部 = padding-top = 32)
     logo top=32, bottom=76, 中线=54
     "科众医疗" top=32, height=18, 中线=41
     差 13px (logo 偏下), 用户反馈"logo 对比文字偏下"
   - v59.56b: logo 上移 6px (transform translateY(-6px))
     logo top=26, 中线=48, 跟 zh 中线 41 差 7 (改善 6px)
     logo top=26 仍在 padding-top 32 内 (留 6px 安全边距, 不被切) */
.nav .nav-brand { align-items: flex-start; }
.nav .nav-brand .nav-logo { transform: translateY(-6px); }
/* P5 v38: 4 region 化 — 统一 HTML 结构 (zh + en 都有), CSS 按 <html lang> 切换
   - cn (lang=zh) → 显示 "科众医疗", 隐藏英文
   - af/sea/la (lang=en) → 显示 "Kezhong Medical", 隐藏中文
   - logo 位置 + 高度保持一致, 解决各页 nav-brand 高度不一致问题 */
html[lang="zh"] .nav-brand-en { display: none; }
html[lang="en"] .nav-brand-zh { display: none; }
.nav-menu { display: flex; gap: 32px; align-items: center; }
.nav-item { position: relative; display: inline-flex; align-items: center; }

/* P5 v40.6: 暂时隐藏 Providers (第2) / Patients (第3) 2 个 nav-item
   保留 DOM 不删除, 以后想恢复只删这 2 行 CSS 即可
   桌面 + 移动端都生效 (display: none 覆盖所有场景)
   P5 v52: 加了"首页"在 1 号位后, 整体 div 位置 +1, 改用 :nth-child(3) / (4) 精确锁
   (不依赖 has-dropdown 类型, 直接按 nav-menu 的 div 顺序数) */
.nav-menu > .nav-item:nth-child(3),
.nav-menu > .nav-item:nth-child(4) {
  display: none;
}

/* P5 v40.8: 同步隐藏 footer 里的"医护专区"列 (第 1 个 footer-col)
   footer-grid 内 div 顺序: footer-brand(1) / footer-col 医护专区(2) / 产品中心(3) / 关于我们(4) / 法律声明(5)
   footer 里没有"患者专区"列, 不用处理
   用 nth-child(2) 精确选 footer-grid 第 2 个直接子元素 (= 第 1 个 footer-col)
   保留 DOM, 以后想恢复只删下面这 3 行 */
.footer-grid > div:nth-child(2) {
  display: none;
}
.nav-caret {
  display: inline-block;
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.nav-item--has-dropdown:hover > .nav-link .nav-caret,
.nav-item--open > .nav-link .nav-caret { transform: rotate(180deg); opacity: 0.9; }

.nav-dropdown {
  position: fixed;
  top: var(--nav-height, 76px);                              /* P3: 紧贴 nav 底部 (JS 同步 nav 高度到 --nav-height) */
  left: 0;                                                   /* P5 v58.9: 用 left/right/margin 居中, 不要用 transform (会创建新 containing block) */
  right: 0;
  margin: 0 auto;
  width: 100vw;                                              /* P3: 视口宽度 */
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: clamp(20px, 3vw, 32px) var(--gutter);             /* P3: 左右 padding 与 .container 同步(80px),子菜单与 nav 链接视觉对齐 */
  display: flex;
  flex-wrap: wrap;                                          /* P3: 子菜单项从左到右排列,空间不足自动换行 */
  gap: 12px 40px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 200;                                             /* P3: 提高 z-index,确保在 hero 段 z-index:2 之上 */
}
.nav-dropdown::before {
  display: none;                                            /* P3: 隐藏原 popup 桥接 */
}
/* P5 v58.5: 新闻中心 nav dropdown 动态加载容器 (避免跟 .nav-dropdown 同名被全局规则覆盖) */
.nav-news-list {
  /* P5 v58.7: 新闻中心子菜单容器, 默认隐藏, hover 父级时显示 */
  position: fixed;
  top: var(--nav-height, 76px);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100vw;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: clamp(20px, 3vw, 32px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 200;
}
/* P5 v58.8: 用后代选择器 (不带 >), 支持嵌套结构 (.nav-dropdown > .nav-news-list) 和平铺结构 (.nav-item > .nav-news-list) */
.nav-item--has-dropdown:hover .nav-news-list,
.nav-item--has-dropdown.nav-item--open .nav-news-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-item--has-dropdown:hover > .nav-dropdown,
.nav-item--open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* P5 v58.9: 去掉 transform (会创建新 containing block, 让 position:fixed 子元素定位错误) */
}
.nav-dropdown-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 500;                                                  /* P5 v59.58: 600→500 (nav 全 Medium) */
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  position: relative;
}
/* P5 v59.29: icon 箭头 — 圆环 + 中心 > 箭头 (用 mask 模式, 圆环和箭头都跟父文字色)
   24x24 viewBox: 圆环 fill=none stroke=black (mask 不透明 = 显示 background-color, 圆环清晰)
                 箭头 fill=black (mask 不透明 = 显示 background-color, 箭头清晰)
   改用空心圆环而非实心圆, 因为白底上白色实心圆会"消失", 圆环+实心箭头在所有背景上都清晰 */
.icon-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><path d='M10 8l4 4-4 4' fill='black'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><path d='M10 8l4 4-4 4' fill='black'/></svg>") center/contain no-repeat;
  margin-left: 0.3em;
  flex-shrink: 0;
}
.icon-arrow-sm { width: 0.85em; height: 0.85em; vertical-align: -0.1em; }
/* P5 v59.20.1: 顶部 nav 子菜单链接保持纯文字 (用户反复要求, 之前的 → / SVG icon 都要去掉) */
.nav-dropdown-link::after { display: none; }
.nav-dropdown-link:hover { opacity: 0.72; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px;
  font-size: 14px; color: var(--ink-light);
}
.lang-btn {
  background: none; border: 0; padding: 4px 4px 6px;
  color: inherit; font: inherit; cursor: pointer;
  letter-spacing: 0.05em; opacity: 0.55;
  transition: opacity .15s ease;
  position: relative;
}
.lang-btn:hover { opacity: 0.85; }
.lang-btn.active { opacity: 1; font-weight: 500; }    /* P5 v59.58: 600→500 (nav 全 Medium) */
.lang-btn.active::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 1px;
  height: 1.5px; background: var(--accent, var(--accent-hover)); border-radius: 2px;
}
.lang-sep { opacity: 0.35; user-select: none; }
.nav-link {
  font-size: 16px;
  font-weight: 500;                                          /* P5 v59.58: 600→500 (nav 全 Medium) */
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 4px;
  color: #ffffff;              /* P5 v59.27: nav 深青绿底, 文字白 */
  white-space: nowrap;
}
.nav.scrolled .nav-link { color: #ffffff; }              /* P5 v59.27 */
.nav-link .nav-underline {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 360ms cubic-bezier(.7,0,.2,1);
}
.nav-link:hover .nav-underline { transform: scaleX(1); transform-origin: left; }
.nav-link.active .nav-underline { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: #ffffff; opacity: 0.7; }   /* P5 v59.27: teal 底, 激活态用半透明白 */
.nav-burger { display: none; }

/* ============== PAGE HERO (subpages) ============== */
.page-hero {
  padding: clamp(140px, 14vw, 200px) 0 clamp(24px, 3vw, 40px);
}
.page-hero + .section {
  padding-top: clamp(24px, 3vw, 40px);
}
.page-hero .kicker { margin-bottom: 20px; }
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  max-width: 1200px;  /* P5 v44: 900→1200 (≈container 宽) 长标题/lede 一行不换行 */
}
.page-hero-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: rgba(0,0,0,0.72);
  max-width: 1200px;  /* P5 v44: 640→1200 长 lede 一行不换行 */
  margin: 0;
}

/* ============== CASE / NEWS LIST ============== */
/* News: 3-column grid, with optional featured 1st card spanning all columns */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}
/* P5 v58.6: 新闻列表 - 卡片左图右文 (单列堆叠, 卡片之间有间距) */
.news-list {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 48px);
  max-width: 1280px;
  margin: 0 auto;
}
/* P5 v58.7: 新闻列表顶部居中分类标签 (只在最上面, 居中显示) */
.news-list-header {
  text-align: center;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;                             /* P5 v59.76: 400→600 (跟 .display 同步) */
  color: var(--ink);
  margin-bottom: clamp(20px, 2.5vw, 32px);
  letter-spacing: -0.01em;
}
}
/* 嵌套的 news-grid（"剩余"卡片容器）也要跨满父 grid 的所有列 */
.news-grid .news-grid { grid-column: 1 / -1; }
/* Cases: 1-column horizontal cards (academic report style) */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}
.case-card,
.news-card {
  background: var(--bg-dark);
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.25s ease;
}
/* P5 v55.4: NEWS 卡片 4 张完全一致, cover 强制 fill (深色背景兜底防白色留白) */
.news-card {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);             /* 固定 cover 宽 360px, body 1fr */
  gap: clamp(24px, 3vw, 40px);
  padding: 0;
  align-items: stretch;                                    /* cover 跟 body 同高 (默认) */
  overflow: hidden;
  background: var(--bg-dark);
  transition: background 0.25s ease;
}
.news-card > a {
  display: contents;
}
.news-card .news-cover {
  margin: 0;
  position: relative;                                      /* P5 v55.4: 给 img 绝对定位用 */
  width: 360px;
  height: 100%;
  min-height: 240px;
  flex-shrink: 0;
  overflow: hidden;
  background: #1a1a1a;                                     /* P5 v55.4: 深色背景, 防图片未填满时露白 */
}
.news-card .news-cover img {
  position: absolute;                                      /* P5 v55.4: 强制 top:0 left:0 铺满 cover 区域 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.news-card .news-body {
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 32px) 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.news-card .news-body .case-foot {
  margin-top: auto;                                       /* 底部始终贴底 */
}
/* P5 v55.1: 取消 .news-featured 特殊样式, 4 张卡完全一致 */
.news-card.news-featured {
  /* 留空, 不再 grid-column: 1 / -1, 跟普通卡一样 */
}

/* P5 v59.71: NEWS 卡片排版优化 - 分类/日期/阅读全文 都加大, 阅读全文按钮圆角边框 + teal hover */
.news-card .news-body .kicker {
  font-size: 16px;                                                /* P5 v59.72: 14→16 (市场新闻分类字号再加大, 用户反馈) */
  font-weight: 500;
}
.news-card .news-body .case-foot .muted.small {
  font-size: 14px;                                                /* P5 v59.71: 12→14 (日期字号) */
}
.news-card .news-body .case-foot .btn-ghost.btn-sm {
  display: inline-flex;                                            /* P5 v59.71: 圆角边框按钮 (跟"了解详情"一致) */
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary);
  padding: 10px 20px;
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  background: transparent;
  align-self: flex-start;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.news-card .news-body .case-foot .btn-ghost.btn-sm:hover {
  background: #397E79;                                             /* P5 v59.71: 跟"查看全部产品"一致 hover (teal 底) */
  border-color: #397E79;
  color: #ffffff;
}
.news-card .news-body .case-foot .btn-ghost.btn-sm:hover .icon-arrow {
  transform: translateX(3px);
}
/* Cases: horizontal layout — cover left, text right */
.case-card.case-horizontal {
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding: 0;
  align-items: stretch;
}
.case-card.case-horizontal .case-cover {
  margin: 0;
  aspect-ratio: auto;
  height: 100%;
  min-height: 280px;
}
.case-card.case-horizontal .case-cover img { height: 100%; }
.case-card.case-horizontal .case-content {
  padding: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 56px) clamp(32px, 4vw, 56px) 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.case-card.case-horizontal .case-meta {
  font-size: 13px;
  gap: 24px;
  margin-top: 8px;
}
.case-card .case-cover {
  margin: clamp(-32px, -4vw, -56px) clamp(-32px, -4vw, -56px) 8px;  /* 撑出卡片 padding */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f0ece4;
  position: relative;
}
.case-card .case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.case-card:hover .case-cover img { transform: scale(1.05); }
/* P5 v55.4: 删除旧的 .news-card .news-cover 规则 (line 548-561), 让 v55.4 规则生效 */
.news-card:hover .news-cover img { transform: scale(1.05); }
.case-card:hover,
.news-card:hover { background: #f7f4ee; }
.case-card .card-title,
.news-card .card-title { font-size: clamp(18px, 1.4vw, 22px); max-width: none; }
.case-summary {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0,0,0,0.72);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.6);
  margin-top: 4px;
}
.case-meta span::before { content: "· "; opacity: 0.5; }
.case-meta span:first-child::before { content: ""; }
.case-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.muted { color: rgba(0,0,0,0.6); }
.small { font-size: 12px; }
.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.loading,
.empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.6);
  background: var(--bg-dark);
}
.detail {
  grid-column: 1 / -1;
  background: var(--bg-dark);
  padding: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.detail h1 { font-size: clamp(24px, 2.5vw, 36px); font-weight: 400; margin: 0; line-height: 1.15; }
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.6);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.detail-body {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(0,0,0,0.85);
  white-space: pre-wrap;
}
.detail-back { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }  /* 中等屏幕回 2 列避免太挤 */
}

@media (max-width: 768px) {
  .case-grid,
  .news-grid { grid-template-columns: 1fr; }
  /* P5 v55: 移动端 news-card 改成上下堆叠 (图上文字下) */
  .news-card { grid-template-columns: 1fr; }
  .news-card .news-cover { min-height: 200px; aspect-ratio: 16 / 9; }
  .news-card .news-body { padding: 20px; }
  .news-card.news-featured { grid-column: auto; }
  .news-card.news-featured .news-cover { aspect-ratio: 16 / 9; }
  .news-card.news-featured .news-body { padding: 24px; }
  .case-card.case-horizontal {
    grid-template-columns: 1fr;
  }
  .case-card.case-horizontal .case-content { padding: clamp(28px, 4vw, 40px); }
  .case-card.case-horizontal .case-cover { min-height: 200px; }
}

/* ============== PRODUCT PORTFOLIO (N cards, auto-fit) ============== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 1px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}
/* P5 v58.2: 按产品分类分组的容器 */
.products-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
}
.category-block { display: block; }
.category-head {
  text-align: center;
  margin-bottom: clamp(28px, 3vw, 48px);
}
.category-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
.category-icon {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1;
}
.category-icon-img {                                          /* P5 v59.15.3: 分类图标 (URL) */
  width: clamp(32px, 3.6vw, 44px);
  height: clamp(32px, 3.6vw, 44px);
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.category-head .kicker {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  opacity: 1;
  margin-bottom: 0;
}
.category-desc {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--fg-2);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.55;
}
/* P5 v58.2: 每个分类下卡片大小一致 - 固定 2 列等宽 */
.product-grid-uniform {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 固定 2 列等宽, 不 auto-fit */
  gap: 1px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}
@media (max-width: 900px) {
  .product-grid-uniform { grid-template-columns: 1fr; }
}
/* P5 v59.16.1: 单产品分类 → 整行占满, 卡片宽度 1280px (跟 .product-grid-uniform max-width 一致)
   否则 2 列 grid 里单产品只占 638px, 右侧空白 */
.product-grid-uniform.single-product {
  grid-template-columns: 1fr;
}
.product-card {
  background: #ffffff;
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background 0.25s ease;
}
/* P5 v59.16: 单产品分类 → 左图右文布局 (跟 .news-card 一致, 仅 PC 端)
   必须在 .product-card 之后, 否则 display: flex 覆盖 display: grid
   mobile 端 .product-card-horizontal 继承 1 列上图下文, 不做特殊处理 */
.product-card-horizontal {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding: 0;
  align-items: stretch;
  overflow: hidden;
}
.product-card-horizontal .product-card-image {
  width: 360px;
  aspect-ratio: auto;
  height: 100%;
  min-height: 240px;
  border-radius: 0;
  flex-shrink: 0;
  background-size: cover;                            /* P5 v59.18: 拉伸填满容器, 消除上下 #fafafa 留白 */
  background-position: center;
}
.product-card-horizontal .product-card-body {
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 40px);
  justify-content: center;                                       /* 文字垂直居中 */
}
.product-card:hover { background: #f7f4ee; }
.product-card-featured {
  background: #ffffff;
}
.product-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fafafa center/contain no-repeat;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card-image::before {
  content: attr(data-label);
  color: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 3px;
  font-family: var(--font-mono);
}
.product-badge-secondary {
  background: rgba(0,0,0,0.12);
  color: #ffffff;
}
.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
/* P5 v59.17: 产品卡内部 .lede 文字靠左 (覆盖全局 .lede 的 text-align: center, 那是为了 hero 副标题居中) */
.product-card .lede {
  text-align: left;
  margin: 0;
}
.product-card .card-title { text-align: left; }   /* 标题也靠左, 跟 lede 一致 */
.product-card-en {
  font-size: 13px;
  color: rgba(0,0,0,0.5);
  font-style: italic;
  margin: 0;
}
.product-card-meta {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: rgba(0,0,0,0.7);
}
.product-card-meta li { padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.product-card-meta li:last-child { border-bottom: none; }
.product-card-meta strong { color: rgba(0,0,0,0.5); font-weight: 500; margin-right: 8px; font-size: 12px; }

@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr; }
}
/* P5 v59.16: mobile 端 .product-card-horizontal 恢复 1 列上图下文 */
@media (max-width: 900px) {
  .product-card-horizontal {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(28px, 3vw, 44px);
  }
  .product-card-horizontal .product-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
    border-radius: 4px;
  }
  .product-card-horizontal .product-card-body {
    padding: 0;
    justify-content: flex-start;
  }
}

/* Product compare table */
.product-compare-wrap { overflow-x: auto; }
.product-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.product-compare th, .product-compare td {
  padding: 18px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
}
.product-compare thead th {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-light);
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.product-compare thead th .kicker-sm {
  display: inline-block;
  font-size: 12px;
  background: var(--accent);
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  margin-top: 6px;
}
.product-compare tbody th {
  font-weight: 500;
  color: rgba(0,0,0,0.5);
  width: 140px;
  background: rgba(0,0,0,0.02);
  font-size: 13px;
}
.product-compare tbody td { color: rgba(0,0,0,0.85); }
.product-compare tbody tr:hover td { background: rgba(0,0,0,0.02); }

/* Compliance note (产品 / 详情页) */
/* ============================================================
 * Our Impact (P0-3) - 真实案例信任区
 * ============================================================ */
.our-impact-section {
  background: var(--bg-dark);
  border-top: 1px solid var(--hairline-dark);
}
.our-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.our-impact-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.our-impact-card:hover {
  border-color: rgba(0, 153, 229, 0.4);
  transform: translateY(-2px);
}
.our-impact-image {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
}
.our-impact-body {
  padding: 24px;
}
.our-impact-metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.our-impact-metric-value {
  font-size: 28px;  /* P5 v45: 36→28 (跟 13px label 比例更协调) */
  font-weight: 700;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.our-impact-metric-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.our-impact-quote {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.85);
  margin: 0 0 16px;
  font-style: italic;
}
.our-impact-attr {
  display: block;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  font-style: normal;
}
@media (max-width: 900px) {
  .our-impact-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
 * Risk Information (P0-1) - 产品页合规风险信息
 * ============================================================ */
.risk-info-section {
  background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.risk-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.risk-info-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 24px;
  transition: border-color 0.2s ease;
}
.risk-info-card:hover { border-color: rgba(0, 153, 229, 0.4); }
.risk-info-card .risk-info-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-light);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.risk-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.risk-info-card .risk-info-body p {
  color: rgba(0, 0, 0, 0.78);
  line-height: 1.7;
  font-size: 15px;
  margin: 0 0 12px;
}
.risk-info-card .risk-info-body p:last-child { margin-bottom: 0; }
.risk-info-card .risk-info-empty {
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
  font-size: 14px;
}
.risk-info-meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px 16px;
}
.risk-info-meta-list dt {
  color: rgba(0, 153, 229, 0.9);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.risk-info-meta-list dd {
  color: rgba(0, 0, 0, 0.85);
  font-size: 15px;
  margin: 0;
  line-height: 1.6;
}
.risk-info-source {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  line-height: 1.6;
  font-style: italic;
}
.risk-info-loading {
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  font-style: italic;
  margin: 0;
}
@media (max-width: 768px) {
  .risk-info-grid { grid-template-columns: 1fr; gap: 16px; }
  .risk-info-card { padding: 20px; }
  .risk-info-meta-list { grid-template-columns: 80px 1fr; gap: 8px 12px; }
}

/* ============================================================
 * Kezhong Hero (P5 v52: 全幅图片轮播)
 * 整段 hero 就是大图轮播, 没有文字/按钮/features 叠加
 * 4 region × N slide, slide_type=image 渲染到 <img>
 * ============================================================ */
.hero-carousel {
  background: #EAECEB;                                            /* 占位底色, 图片加载前不闪 */
  position: relative;
  overflow: hidden;
  border-radius: 0;                                               /* P5 v52.1: 去掉 P3 的对角线圆角 */
  margin: 0 0 clamp(40px, 5vw, 64px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* 高度: P5 v59.13 完全不用 vh, 让 aspect-ratio 单独工作
     - 桌面: 16:9 = 视口宽 56.25% (1440 = 810, 1920 = 1080)
     - 4K 兜底: max-height 1080px 防止超高屏 hero 撑爆
     - mobile 兜底: min-height 280px 避免太矮
     - dev-tools 缩视口高度: 不影响 (hero 高度只跟 vw 算, 跟 vh 无关)
       v59.12 的 height: min(56.25vw, 100vh) + max-height: 100vh 在 dev-tools
       缩高度时 100vh 变成 500, hero 高度跟着缩到 500, 16:9 比例被破坏,
       3 个产品图底部反射被切. v59.13 改用 max-height 固定值 1080px, 不用 vh. */
  aspect-ratio: 16 / 9;
  min-height: 280px;
  max-height: 1080px;
}
@media (max-width: 600px) {
  .hero-carousel {
    aspect-ratio: 4 / 3;                                          /* 移动端比例更紧凑 */
    /* 不设 max-height, 让 aspect-ratio 单独工作 (避免 dev-tools 缩高度时被 vh 限制) */
    min-height: 280px;
  }
}
/* track + slide: 绝对定位 fade 切换 */
.hero-carousel-track {
  position: absolute;
  inset: 0;
}
.hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.hero-carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 轮播 dots */
.hero-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2.5vw, 28px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 10px;
  align-items: center;
}
.hero-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 240ms ease, transform 240ms ease;
}
.hero-carousel-dot:hover { background: rgba(15, 118, 110, 0.6); }
.hero-carousel-dot.is-active {
  background: var(--brand-primary);
  transform: scale(1.25);
}

/* ============================================================
 * Footer P2-11 — Penumbra 5 列 + tagline + 社交行
 * ============================================================ */
.footer-grid.footer-grid--p2 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 32px;
}
.footer-grid.footer-grid--p2 .footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-tagline {
  font-size: 15px;                                               /* P5 v59.59: 13→15 (整体放大) */
  color: #ffffff;                                                /* P5 v59.65: 0.78→1 白色 */
  line-height: 1.55;
  font-weight: 500;                                              /* P5 v59.59: 默认 400→500 (加粗) */
  margin: 0;
  max-width: 320px;
}
/* P5 v59.11: footer 品牌英文 slogan (科众医疗 下面, tagline 上面, 字号更小) */
.footer-brand-slogan {
  font-size: 13px;                                               /* P5 v59.59: 11→13 (整体放大) */
  color: #ffffff;                                                /* P5 v59.63: 0.65→1 白色 */
  line-height: 1.5;
  margin: 2px 0 8px 0;
  max-width: 320px;
  letter-spacing: 0.01em;
  font-weight: 500;                                              /* P5 v59.59: 加粗 */
  margin-left: 14px;
}
/* P5 v59.11.4: footer-brand-stack (科众医疗 + China-Engineered) 跟 logo 加 12px 空隙
   (跟原来 .nav-brand-text margin-left 保持一致) */
.footer-brand-stack {
  margin-left: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
/* P5 v59.33: footer brand logo 中线对齐 "科众医疗" 中线 (而非 brandStack 中线)
   - 默认 align-items: center 让 logo 跟整个 brandStack 中线对齐
     但 brandStack 含 slogan, 中线 ≈ zh 和 slogan 之间
     导致 logo 中线比 "科众医疗" 中线偏下 13px, 看起来 logo "偏下"
   - 改用 flex-start (顶部对齐) + logo 向下 transform 16px
     让 logo 中线 = nav-brand 顶 + 26 = "科众医疗" 中线 (zh top=16, zh 中线=26)
     视觉上 logo 和 "科众医疗" 中心完美对齐 */
.footer .nav-brand { align-items: flex-start; }
.footer .nav-brand .footer-logo { transform: translateY(-16px); }
.footer-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.footer-social-link {
  font-size: 14px;                                               /* P5 v59.59: 12→14 (整体放大) */
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-weight: 500;                                              /* P5 v59.59: 加粗 */
  transition: border-color 0.15s ease, color 0.15s ease;
}
.footer-social-link:hover {
  border-color: #ffffff;                                   /* P5 v59.27: hover 边框白 */
  color: #ffffff;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .footer-heading {
  font-size: 14px;                                               /* P5 v59.59: 12→14 (整体放大) */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  font-weight: 600;                                              /* P5 v59.59: 600 加粗 (保持 heading 粗) */
  margin-bottom: 4px;
}
.footer-col .footer-link {
  font-size: 14.5px;                                             /* P5 v59.59: 12.5→14.5 (整体放大) */
  color: #ffffff;                                                /* P5 v59.65: 0.78→1 白色 */
  transition: color 0.15s ease;
  padding: 2px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  font-weight: 500;                                              /* P5 v59.59: 加粗 */
  display: block;
}
.footer-col .footer-link:hover { color: #ffffff; }          /* P5 v59.65: 已经是白色, hover 不变 */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);          /* P5 v59.27: teal 底, hairline 白 */
  margin-top: 24px;
}
.footer-bottom .footer-copy {
  font-size: 13px;                                               /* P5 v59.59: 12→13 (整体放大) */
  color: #ffffff;                                                /* P5 v59.65: 0.6→1 白色 */
  font-weight: 500;                                              /* P5 v59.59: 加粗 */
}
.footer-bottom .footer-meta {
  font-size: 12px;                                               /* P5 v59.59: 11→12 (整体放大) */
  color: #ffffff;                                                /* P5 v59.65: 0.5→1 白色 */
  font-weight: 500;                                              /* P5 v59.59: 加粗 (mono 也改) */
  /* P5 v59.112: 删 font-family: var(--font-mono) + letter-spacing: 0.04em, 统一为 footer-copy 同款 sans-serif */
}
@media (max-width: 1100px) {
  .footer-grid.footer-grid--p2 {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .footer-grid.footer-grid--p2 .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer-grid.footer-grid--p2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .footer-grid.footer-grid--p2 .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
 * Our Regions (P1-8) — 区域入口卡片
 * ============================================================ */
.our-regions-section {
  background: var(--bg-dark);
  border-top: 1px solid var(--hairline-dark);
}
.region-group-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(0, 153, 229, 0.9);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 153, 229, 0.2);
}
.region-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.region-grid--intl { grid-template-columns: repeat(4, 1fr); }
.region-grid--cn { grid-template-columns: repeat(4, 1fr); }
.region-card {
  display: block;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 24px 20px;
  color: var(--ink-light);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.region-card:hover {
  border-color: rgba(0, 153, 229, 0.4);
  background: rgba(0, 153, 229, 0.06);
  transform: translateY(-2px);
}
.region-card-body { flex: 1; display: flex; flex-direction: column; }
.region-card-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink-light);
  line-height: 1.3;
}
.region-card-desc {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.region-card-cta {
  display: inline-block;
  font-size: 13px;
  color: var(--brand-primary);
  font-weight: 500;
  margin-bottom: 8px;
}
.region-card-email {
  display: block;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
  .region-grid--intl, .region-grid--cn { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .region-grid--intl, .region-grid--cn { grid-template-columns: 1fr; }
  .region-card { min-height: 0; padding: 20px 16px; }
}

/* ============================================================
 * Product page 升级段 (P1-6) — specs / demo video / companion
 * ============================================================ */
/* P5 v49: 产品详情页图文并茂 (PDF 重写穿刺导管) */
.product-figure {
  margin: 32px 0;
  text-align: center;
}
.product-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.product-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
}
.product-hero-figure {
  margin: 0 0 40px;
  text-align: center;
}
.product-hero-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.10);
}
/* P5 v50: 7 列规格表 (穿刺导管 6 型号 Type I-VI) */
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
}
.spec-table th,
.spec-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table thead th {
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.08), rgba(15, 118, 110, 0.04));
  color: #0F766E;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(15, 118, 110, 0.18);
}
.spec-table tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.018);
}
.spec-table tbody td:first-child {
  font-weight: 600;
  color: #0F766E;
}
.spec-table td[colspan] {
  font-style: italic;
  color: rgba(0, 0, 0, 0.65);
  font-size: 13px;
  text-align: center;
  padding: 14px 16px;
}
@media (max-width: 720px) {
  .spec-table { font-size: 12px; }
  .spec-table th, .spec-table td { padding: 8px 8px; }
  .spec-table thead th { font-size: 11px; letter-spacing: 0; }
}
.product-specs-table {
  width: 100%;
  max-width: 880px;
  margin: 32px auto 0;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  overflow: hidden;
}
.product-specs-table th,
.product-specs-table td {
  padding: 14px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}
.product-specs-table tr:last-child th,
.product-specs-table tr:last-child td { border-bottom: 0; }
.product-specs-table th {
  width: 200px;
  color: rgba(0, 153, 229, 0.95);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.02);
}
.product-specs-table td {
  color: rgba(0, 0, 0, 0.85);
  font-size: 15px;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .product-specs-table th, .product-specs-table td { padding: 12px 16px; }
  .product-specs-table th { width: 120px; font-size: 11px; }
  .product-specs-table td { font-size: 14px; }
}

.product-video-wrap {
  max-width: 960px;
  margin: 32px auto 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-video-wrap video,
.product-video-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.product-video-loading {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
  font-size: 14px;
}
.product-video-fallback {
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  margin-top: 16px;
  font-style: italic;
}

/* ============================================================
 * Providers page (P1-5) — clinical evidence / IFU 卡片
 * ============================================================ */
.evidence-grid, .ifu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.evidence-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  overflow: hidden;
  color: var(--ink-light);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.evidence-card:hover {
  border-color: rgba(0, 153, 229, 0.4);
  transform: translateY(-2px);
}
.evidence-card-cover {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: #1a1a1a;
}
.evidence-card-cover--placeholder {
  background: linear-gradient(135deg, #0a1f2a 0%, #1a3a4a 100%);
}
.evidence-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.evidence-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.evidence-card-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  font-weight: 600;
}
.evidence-card-type {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono);
}
.evidence-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-light);
  margin: 0 0 8px;
  line-height: 1.4;
}
.evidence-card-desc {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
}
.evidence-card-size {
  display: inline-block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--font-mono);
  align-self: flex-start;
}
.soma-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
.soma-card-link:hover { border-color: rgba(0, 153, 229, 0.4); }
@media (max-width: 900px) {
  .evidence-grid, .ifu-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Compliance Modal (P0-2) - 站点头部合规弹窗
 * ============================================================ */
.compliance-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.cm-open { overflow: hidden; }
.compliance-modal {
  background: #0e0e10;
  border: 1px solid rgba(0, 153, 229, 0.3);
  border-radius: 8px;
  padding: 32px;
  max-width: 520px;
  width: 100%;
  color: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  font-size: 15px;
  line-height: 1.6;
  max-height: 90vh;
  overflow-y: auto;
}
.compliance-modal-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.01em;
}
.compliance-modal-body {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 16px;
}
.compliance-modal-body p { margin: 0 0 8px; }
.cm-ext-link {
  margin: 0 0 24px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}
.cm-ext-link a {
  color: var(--brand-primary);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 153, 229, 0.5);
}
.cm-ext-link a:hover { border-bottom-style: solid; }
.compliance-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}
.cm-btn {
  font-size: 14px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  font-family: inherit;
}
.cm-btn-accept {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.cm-btn-accept:hover { background: #0080c2; border-color: #0080c2; }
.cm-btn-decline {
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.22);
}
.cm-btn-decline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
@media (max-width: 600px) {
  .compliance-modal { padding: 24px 20px; }
  .compliance-modal-actions { flex-direction: column-reverse; }
  .cm-btn { width: 100%; }
}

.compliance-note {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(0,0,0,0.45);
  padding: 24px 28px;
  background: rgba(0,0,0,0.03);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Link arrow inline */
.link-arrow {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.link-arrow:hover { opacity: 0.7; }

/* ============== ENTRY GRID (home — 4 cards) ============== */
.entry { padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 9vw, 140px); }
.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.08);
}
/* P5 v55.1: #homeNews 改成单列, 让 4 张 NEWS 卡片垂直堆叠 */
.entry-grid#homeNews {
  grid-template-columns: 1fr;
  gap: 24px;
  background: none;
  border: none;
}
.entry-card {
  background: #ffffff;
  padding: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: background 320ms ease;
  min-height: 280px;
}
.entry-card:hover { background: #f7f4ee; }
.entry-card:hover .entry-arrow { transform: translateX(8px); }
.entry-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(1, 2, 1, 0.5);
  letter-spacing: 0.15em;
}
.entry-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink-light);
}
.entry-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft-light);
  margin: 0;
  max-width: 460px;
}
.entry-arrow {
  font-size: 22px;
  color: var(--brand-primary);
  margin-top: auto;
  transition: transform 320ms cubic-bezier(.7,0,.2,1);
  align-self: flex-start;
}

@media (max-width: 720px) {
  .entry-grid { grid-template-columns: 1fr; }
}

/* ============== HERO ============== */
.hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 100vh;
  min-height: 100svh;
  color: #fff9f9;   /* P3: hero 是图覆盖段，文字始终白 */
  background: #010201;  /* P3: hero 默认黑底（加载前/图加载失败时） */
  display: flex;
  align-items: flex-end;
  padding: 0 0 clamp(40px, 8vh, 96px);
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
  background: #000;
  overflow: hidden;
  /* 装 3 张轮播图 — 用 background-image 而非 <img> 元素，避免触发 iOS Safari 图层合成抖动 */
  /* 不加任何 transform/scale 动画 */
  /* 也不加 background-size keyframes — 会把 cover 覆盖成 contain 模式 */
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }

/* 移动端 / 平板竖屏:hero 高度跟随视口宽度按 16:9 等比缩放,
   这样 16:9 横版图能完整 cover 不需要横向 pan / 不需要左右滚动。
   顶部 60px 留空给 fixed nav(56px),让 image 自带的顶部标题不被 nav 压住 */
@media (max-width: 1024px) {
  .hero {
    min-height: calc(56.25vw + 60px);
    max-height: calc(100svh + 60px);
    margin-top: 60px;        /* 把整个 hero 顶下来,image 顶端落在 nav 下方 */
    background: #010201;     /* margin 露出的 4px 缝隙用深色填充,避免与白底页面色差 */
  }
  .hero-slide {
    background-position: center center;
  }
  .hero .hero-title {
    font-size: clamp(22px, 5.5vw, 32px);
  }
}

/* hero 底部圆点 — 切换指示器 */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 56px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.hero-dot {
  width: 28px;
  height: 3px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 240ms ease, width 240ms ease;
  border-radius: 2px;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
  width: 44px;
}

/* "Foreground" slide — image has its own built-in copy on a light bg.
   When this slide is active, suppress the hero dark gradient + carousel text overlay. */
body.hero-light-slide .hero::after { opacity: 0; transition: opacity 600ms ease; }
body.hero-light-slide .hero-content { opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
.hero::after, .hero-content { transition: opacity 600ms ease; }
@media (max-width: 720px) {
  .hero-dot { width: 22px; }
  .hero-dot.is-active { width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 0.4s ease; }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 75% at 8% 100%, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.65) 30%, rgba(0,0,0,0.25) 55%, transparent 75%),
    linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.10) 28%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.90) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 50%);
  z-index: 1;
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px);
}
.hero-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 640px;
  margin: 0;
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 16px 32px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 220ms ease;
  cursor: pointer;
  align-self: flex-start;
  text-transform: uppercase;
}
.btn-ghost {
  background: transparent;
  border-color: rgba(1, 2, 1, 0.35);
  color: var(--ink-light);
}
.btn-ghost:hover { background: rgba(1, 2, 1, 0.06); border-color: var(--ink-light); }

/* Penumbra 风格: 主按钮 = 白底 + 红字 + 圆角 */
.btn-primary {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
/* Penumbra 风格: 反色主按钮 (深底场景) = 红底 + 白字 */
.btn-primary-on-light {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
}
.btn-primary-on-light:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.btn-dark {
  background: var(--ink-dark);
  color: var(--ink-light);
  border-color: var(--ink-dark);
}
.btn-dark:hover { background: #000; border-color: #000; }

/* ============== SECTION COMMONS ============== */
.section {
  padding: clamp(80px, 12vw, 200px) 0;
  position: relative;
}
.section-dark { background: var(--bg-dark); color: var(--ink-light); }  /* P3: 现在等于白底 + 深字，等价于 .section-light */
.section-light { background: var(--bg-light); color: var(--ink-dark); }

.kicker {
  font-family: var(--font-sans);                /* P5 v59.108: 改 sans-serif (之前 var(--font-mono) 在 Windows 中文降级到 NSimSun 宋体) */
  font-size: 13px;                              /* P5 v52.5: 12→13, 稍微加大 */
  font-weight: 600;                             /* 600 视觉更突出 */
  letter-spacing: 0.12em;                       /* 0.08→0.12, 字间距更舒展 */
  text-transform: uppercase;
  text-align: center;                           /* P5 v52.5: 居中 */
  opacity: 0.85;                                /* 0.7→0.85, 配合居中后权重微调 */
  margin-bottom: 16px;
  color: var(--brand-primary);                  /* 统一用品牌青绿色 */
}
.kicker.peach { color: var(--accent); opacity: 1; }

.display {
  font-size: clamp(24px, 3vw, 36px);            /* P5 v52.5: clamp(30, 4.5vw, 56) → clamp(24, 3vw, 36), 主标题缩小 */
  font-weight: 600;                             /* P5 v59.75: 400→600 板块标题加粗 (用户反馈) - contact "期待您的合作" + index 各 section + about 各段 */
  line-height: 1.15;                            /* 1.05→1.15, 字号小后行高稍微松一点 */
  letter-spacing: -0.02em;
  text-align: center;                            /* P5 v52.6: 主标题居中 */
  margin: 0 auto;                                /* 0 → 0 auto, 配合 text-align center */
  max-width: 1280px;
}

.lede {
  font-size: clamp(15px, 1.2vw, 17px);          /* P5 v52.6: clamp(18, 1.6vw, 22) → clamp(15, 1.2vw, 17), 副标题缩小 */
  line-height: 1.6;                              /* 1.45 → 1.6, 字号小后行高松一点更好读 */
  opacity: 0.72;                                 /* 0.8 → 0.72, 视觉权重跟缩小字号匹配 */
  text-align: center;                            /* P5 v52.6: 副标题居中 */
  max-width: 720px;                              /* 620 → 720, 居中后可以稍宽 */
  margin: 16px auto 0;                           /* 24px 0 0 → 16px auto 0, 加 auto 居中 */
}

.card-title {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 380px;
}

/* ============== MISSION ============== */
.mission {
  padding-top: clamp(120px, 18vw, 200px);
  padding-bottom: clamp(80px, 12vw, 160px);
}
.mission .display { margin-bottom: 64px; }
.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.12);
}
.mission-item {
  background: var(--bg-light);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mission-item .kicker { color: var(--accent); font-weight: 500; }
.mission-en {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-dark);
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .mission-grid { grid-template-columns: 1fr; }
  .mission .display { margin-bottom: 40px; }
}

/* ============== INTRODUCING + DEVICE BANNER ============== */
.introducing {
  position: relative;
  padding: clamp(100px, 12vw, 160px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
}
.introducing-content {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(40px, 5vw, 72px);
}
.introducing .display { max-width: 720px; }
.introducing-content .kicker { margin: 0; }
.intro-image {
  width: 100%;
  max-width: 1400px;
  height: auto;
  display: block;
  border-radius: 12px;
  /* 让 banner 突破 container padding 一点，更接近 hero 视觉 */
  margin: 0 auto;
}
.intro-lede-wrap {
  width: 100%;
  max-width: 880px;
}
.intro-lede-wrap .lede {
  max-width: none;
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.65;
  color: rgba(255, 249, 249, 0.78);
}
@media (max-width: 720px) {
  .intro-lede-wrap .lede { font-size: 16px; }
}

/* ============== SOMA ============== */
.soma-head { max-width: 1100px; margin: 0 auto clamp(80px, 12vw, 160px); /* P5 v52.8: 加 margin: 0 auto, 让 h2/lede 在视口内真正居中 */ }
/* P5 v55.7: 首页 NEWS 段 - 跟产品中心段一致, "NEWS" 大主标题, "最新动态" 小副标题 */
#news .soma-head .kicker {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  opacity: 1;
  margin-bottom: 12px;
}
#news .soma-head .display {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  color: var(--fg-2);
  margin-top: 0;
  margin-bottom: 12px;
}
.soma-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 40px);
}
.soma-card {
  display: flex; flex-direction: column;
  justify-content: space-between;
  min-height: 560px;
}
.soma-card-text { padding-bottom: 32px; }
.soma-img {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
  min-height: 360px;
}
.soma-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============== CANCER (6 features) ============== */
.cancer { overflow: hidden; }  /* 裁掉 .cancer-halo 横向溢出 (width: 130%) */
.cancer .display { margin-bottom: clamp(120px, 16vw, 220px); }
.cancer-stage {
  position: relative;
  margin: clamp(40px, 8vw, 120px) 0;
}
.cancer-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 130%;
  aspect-ratio: 1.45 / 1;
  transform: translate(-50%, -50%) rotate(-15deg);
  border: 2px solid rgba(201,98,60,0.75);
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 70% at center,
    rgba(201,98,60,0.35) 0%,
    rgba(201,98,60,0.15) 45%,
    rgba(201,98,60,0.0) 80%);
  box-shadow:
    inset 0 0 120px rgba(201,98,60,0.4),
    inset 0 0 280px rgba(201,98,60,0.18),
    0 0 80px rgba(201,98,60,0.35),
    0 0 160px rgba(201,98,60,0.15);
  z-index: 0;
  pointer-events: none;
}
.cancer-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(40px, 4vw, 80px) clamp(40px, 4vw, 80px);
}
.cancer-feature {
  font-size: 15px;
  line-height: 1.5;
}
.cancer-feature .kicker { margin-bottom: 14px; }
.cancer-feature p { margin: 0; max-width: 360px; opacity: 0.85; }
.f-tl { align-self: start; padding-top: 0; }
.f-tm { align-self: start; text-align: center; margin-top: clamp(60px, 8vw, 120px); }
.f-tr { align-self: start; text-align: right; margin-top: clamp(20px, 4vw, 60px); }
.f-bl { align-self: end; padding-bottom: 0; }
.f-bm { align-self: end; text-align: center; margin-bottom: clamp(60px, 8vw, 120px); }
.f-br { align-self: end; text-align: right; }
.f-tl p, .f-tr p, .f-bl p, .f-br p { margin-left: auto; }
.f-tr p, .f-br p { margin-left: auto; margin-right: 0; }
.f-tl p, .f-bl p { margin-right: auto; }
.cancer .btn { margin-top: clamp(60px, 8vw, 120px); }

/* ============== PLATFORM ============== */
.platform-head { max-width: 900px; margin-bottom: clamp(80px, 12vw, 160px); }
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 48px);
}
.platform-card {
  display: flex; flex-direction: column;
  gap: 40px;
  min-height: 540px;
}
.platform-text .kicker { margin-bottom: 14px; }
.platform-text .card-title { max-width: 380px; }
.platform-img {
  margin-top: auto;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a1a;
  min-height: 340px;
}
.platform-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* ============== TEAM / LOGOS ============== */
.team-head {
  max-width: 1100px;
  margin: 0 auto clamp(60px, 8vw, 120px);
  text-align: center;
}
.team-head .display { margin-left: auto; margin-right: auto; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2vw, 40px);
  align-items: center;
}
.logo-cell {
  aspect-ratio: 2 / 1;
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1) contrast(1.05) opacity(0.55);
  transition: filter 220ms ease;
  position: relative;
}
.logo-cell::before,
.logo-cell::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink-dark);
}
.logo-cell::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.logo-cell::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.logo-cell img {
  max-width: 60%;
  max-height: 70px;
  width: auto; height: auto;
  object-fit: contain;
}
.logo-cell:hover { filter: grayscale(0) contrast(1) opacity(1); }

/* ============== PRODUCT SHOWCASE (P3 新增, 参考 Penumbra Inc 首页) ============== */
.product-showcase {
  padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 6vw, 80px);
  background: #ffffff;
}
.product-showcase-head {
  display: block;                              /* P5 v52.6: 改单列 (主标题+lede 居中) */
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.product-showcase-head-text {
  max-width: 720px;
  margin: 0 auto;                              /* 居中 */
}
/* P5 v55.6: 产品中心段 - "产品中心" 做大主标题, "一次性可视化微创导管系列" 做小副标题 */
.product-showcase-head .kicker {
  font-size: clamp(28px, 3.4vw, 40px);        /* 主标题字号 (大) */
  font-weight: 600;
  text-transform: none;                        /* 中文 "产品中心" 不要大写 */
  letter-spacing: 0;
  color: var(--ink);
  opacity: 1;
  margin-bottom: 12px;
}
.product-showcase-head .display {
  font-size: clamp(15px, 1.4vw, 18px);         /* 副标题字号 (小) */
  font-weight: 600;                             /* P5 v59.76: 400→600 (跟 .display 同步) */
  color: var(--fg-2);
  margin-top: 0;
  margin-bottom: 12px;
}
.product-showcase-cta {
  display: flex;
  justify-content: center;                     /* 按钮居中 */
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);          /* P5 v52.11: 24→32-56, 按钮移到 grid 下面, 加大间距 */
}
/* P5 v59.60: "查看全部产品" 按钮字体大一点 (覆盖 .btn 默认 13px) */
.product-showcase-cta a.btn,
.news-cta a.btn {                                                  /* P5 v59.64: "查看所有新闻" 按钮同款 */
  font-size: 16px;
  padding: 18px 40px;
}
/* P5 v59.60: "查看全部产品" hover 跟产品分类一样 (底色变 teal, 文字白) */
.product-showcase-cta a.btn-ghost:hover,
.news-cta a.btn-ghost:hover {                                      /* P5 v59.64: 新闻按钮 hover 同款 */
  background: #397E79;
  border-color: #397E79;
  color: #ffffff;
}
.product-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
.product-showcase-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--hairline-dark);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.product-showcase-card:hover {
  transform: translateY(-4px);
  border-color: #397E79;                                          /* P5 v59.61: 只保留边框+上移+阴影, 不再底色变+文字变白 */
  box-shadow: 0 12px 32px rgba(57, 126, 121, 0.20);
}
/* P5 v59.61: 去掉 hover 底色变化 + 文字变白 (用户要求卡片 hover 不再变色) */
.product-showcase-img {
  width: 100%;
  height: 240px;                                     /* P5 v55.8: 改用固定高度 240px, 不用 aspect-ratio 避免 flex 压缩 */
  background: #f0ece4 center/cover no-repeat;         /* P5 v55.8: contain → cover, 让图片填满容器无留白 */
  border-bottom: 1px solid var(--hairline-dark);
  flex-shrink: 0;                                    /* P5 v55.8: 防止 flex column 把高度压成 1px */
}
.product-showcase-body {
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.product-showcase-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.product-showcase-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink-light);
  margin: 0;
  letter-spacing: -0.01em;
}
.product-showcase-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft-light);
  margin: 0;
  flex: 1;
}
.product-showcase-link {
  display: inline-flex;                                            /* P5 v59.61: 改成按钮样式 (圆角边框) */
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-primary);
  margin-top: 8px;
  padding: 10px 20px;
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  background: transparent;
  align-self: flex-start;                                          /* 按钮不拉伸, 跟内容宽度一致 */
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.product-showcase-link:hover {
  background: #397E79;                                             /* P5 v59.61: hover 底色变 teal */
  border-color: #397E79;
  color: #ffffff;                                                  /* P5 v59.61: hover 文字白 */
}
/* P5 v59.61: 去掉 ::after 箭头 (改成按钮, 不需要圆环箭头) */

@media (max-width: 900px) {
  .product-showcase-grid { grid-template-columns: 1fr; }
  .product-showcase-head { grid-template-columns: 1fr; }
  .product-showcase-cta { justify-content: flex-start; }
}

/* ============== PRODUCT PORTFOLIO BLOCK (P5 v52.10) ==============
 * 跟产品中心 3 张卡片呼应: 2 列卡片布局, 白底 + 浅边框
 * 位置: 产品中心 head 之后, 3 张产品卡片 grid 之前
 * P5 v52.10: 删了 kicker/标题/lede, 只留 2 张卡片, 上下 margin 减小
 * ============================================================== */
.product-portfolio-block {
  margin: clamp(24px, 3vw, 40px) 0 clamp(36px, 4.5vw, 56px);
}
.product-portfolio-block .portfolio-head {
  text-align: center;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.product-portfolio-block .portfolio-title {
  /* 复用 .display 样式 (font-size 缩小版), 加 portfolio 自定义 */
  margin: 8px auto 14px;
  color: var(--ink-light);
}
.product-portfolio-block .portfolio-lede {
  color: var(--ink-soft-light, rgba(1, 2, 1, 0.72));
  margin: 0;
}
/* 2 列 grid: 跟下面 3 张产品卡片间距一致 */
.product-portfolio-block .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 32px);
  max-width: 1280px;
  margin: 0 auto;
}
.product-portfolio-block .portfolio-card {
  background: #ffffff;
  border: 1px solid var(--hairline-dark, #e5e7eb);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;                            /* P5 v54: 给 .portfolio-filter-check 定位 */
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
/* P5 v54: button 样式重置 (portfolio.js 改用 button 让 click 可达) */
button.product-portfolio-block .portfolio-card,
.product-portfolio-block button.portfolio-card {
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}
.product-portfolio-block .portfolio-card:hover {
  transform: translateY(-4px);
  border-color: #397E79;
  background: #397E79;                                            /* P5 v59.14: 用户设计稿色 */
  box-shadow: 0 12px 32px rgba(57, 126, 121, 0.20);
}
.product-portfolio-block .portfolio-card.is-active:hover {
  /* P5 v59.14.1: specificity (0,2,1) 覆盖 .is-active 的 (0,2,0),
     确保选中态 hover 时仍显示深色背景 + 白字 */
  background: #397E79;
  color: #ffffff;
}
.product-portfolio-block .portfolio-card:hover .portfolio-series,
.product-portfolio-block .portfolio-card:hover .portfolio-series-desc {
  color: #ffffff;                                                 /* P5 v59.14: hover 文字白 */
}
/* P5 v54: 选中态 (被 portfolio.js 加 is-active 类)
   P5 v59.14.1: 不再设 background, 避免覆盖 :hover 的 #397E79 导致白字白底看不清
   改用 border 加粗 + check icon 提示选中 (用户报告: is-active + hover 时白字白底) */
.product-portfolio-block .portfolio-card.is-active {
  border-color: #397E79;
  border-width: 2px;
  padding: calc(clamp(24px, 3vw, 36px) - 1px);    /* border 加 1px 时 padding 减 1px 保持总尺寸 */
  background: #ffffff;                              /* 显式白底, 跟 hover 深色区分 */
  box-shadow: 0 8px 24px rgba(57, 126, 121, 0.16);
}
.product-portfolio-block .portfolio-filter-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 200ms ease, transform 200ms ease;
}
.product-portfolio-block .portfolio-card.is-active .portfolio-filter-check {
  opacity: 1;
  transform: scale(1);
}
/* P5 v54: 分类无产品时 grid 显示空状态 */
.product-showcase-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 15px;
}
.product-portfolio-block .portfolio-series {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-primary);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.product-portfolio-block .portfolio-series-icon {   /* P5 v59.15: 分类图标 (URL) */
  width: clamp(24px, 2.2vw, 32px);
  height: clamp(24px, 2.2vw, 32px);
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}
.product-portfolio-block .portfolio-series-name { flex: 1; min-width: 0; font-weight: 600; }   /* P5 v59.75: 业务布局产品分类名加粗 */
.product-portfolio-block .portfolio-series-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft-light, rgba(1, 2, 1, 0.68));
  margin: 0;
  flex: 1;
}
@media (max-width: 700px) {
  .product-portfolio-block .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .product-portfolio-block .portfolio-card { padding: 20px; }
  .product-portfolio-block .portfolio-series { font-size: 18px; }
}

/* ============== DIVE DEEPER ============== */
.deeper-head {
  max-width: 1100px;
  margin: 0 auto clamp(60px, 8vw, 100px);
  text-align: center;
}
/* P5 v58.1: 产品中心页 - kicker 做大主标题, display 做小副标题 (跟首页 #news / .product-showcase-head 一致) */
#products .deeper-head .kicker {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  opacity: 1;
  margin-bottom: 12px;
}
#products .deeper-head .display {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--fg-2);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}
#productCompareSection .soma-head .kicker {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  opacity: 1;
  margin-bottom: 12px;
}
#productCompareSection .soma-head .display {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--fg-2);
  margin-top: 0;
  margin-bottom: 12px;
}
.deeper-head .display { margin-left: auto; margin-right: auto; }
.deeper-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  min-height: 720px;
}
.deeper-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
  isolation: isolate;
  transition: transform 320ms ease;
}
.deeper-card:hover { transform: translateY(-4px); }
.deeper-img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  z-index: 0;
}
.deeper-big { min-height: 720px; grid-row: 1 / span 2; }
.deeper-col {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  min-height: 720px;
}
.deeper-small { min-height: 340px; }
.deeper-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(20px, 2vw, 32px);
  color: #fff;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.10) 30%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.82) 85%,
    rgba(0,0,0,0.92) 100%);
}
.deeper-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.deeper-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5);
}
.deeper-big .deeper-title { font-size: clamp(20px, 2.4vw, 32px); margin-bottom: 16px; }
.deeper-overlay p {
  font-size: 14px; line-height: 1.55;
  margin: 0; max-width: 480px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms ease;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.deeper-card:hover .deeper-overlay p { opacity: 1; transform: translateY(0); }

/* File / video download badge in corner */
.file-badge {
  position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  right: clamp(14px, 1.4vw, 22px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 28, 36, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.file-badge svg { display: block; }
.file-badge-pdf { color: #ffe9d6; border-color: rgba(255, 200, 140, 0.35); background: rgba(46, 22, 12, 0.72); }
.file-badge-video { color: #d6f5ff; border-color: rgba(140, 220, 255, 0.35); background: rgba(10, 26, 38, 0.78); }

/* Video card — replace .deeper-img with a real <video> element */
.deeper-video { cursor: pointer; }
.deeper-video-el {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  z-index: 0;
  background: #0a1a23;
  display: block;
}
.deeper-video-el::-webkit-media-controls-panel {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}
.deeper-card.is-playing .deeper-overlay,
.deeper-card.is-playing .file-badge { opacity: 0; transition: opacity 200ms ease; pointer-events: none; }

/* ============== CAREERS ============== */
.careers-inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.careers-inner .display { margin-left: auto; margin-right: auto; margin-bottom: 32px; }
.careers-inner .btn { margin: 8px auto 0; }

/* ============== ABOUT PAGE (P5 v12) ============== */
/* 公司介绍图集: 2 张公司实拍, 大图 + 小图 grid 排版 */
.about-company {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.about-company .soma-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 1280px; }  /* P5 v44.1: 1100→1200→1280 (container 可用宽) 长 h2 一行不换行 */
/* P5 v58.16: 关于我们 - kicker 做大主标题, h2.display 做小副标题 (跟首页 #news / #product 一致) */
/* P5 v58.17: 覆盖所有 about-* 段 (principles/values/tech/coverage/culture/credentials + company/mission) */
.about-company .kicker,
.about-mission .kicker,
.about-principles .kicker,
.about-values .kicker,
.about-tech .kicker,
.about-coverage .kicker,
.about-culture .kicker,
.about-credentials .kicker,
.about-company .soma-head .kicker,
.about-mission .soma-head .kicker,
.about-principles .soma-head .kicker,
.about-values .soma-head .kicker,
.about-tech .soma-head .kicker,
.about-coverage .soma-head .kicker,
.about-culture .soma-head .kicker,
.about-credentials .soma-head .kicker {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;                                                /* P5 v59.74: 400→600 板块标题加粗 (用户反馈) */
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 1;
  margin-bottom: 12px;
}
.about-company .display,
.about-mission .display,
.about-principles .display,
.about-values .display,
.about-tech .display,
.about-coverage .display,
.about-culture .display,
.about-credentials .display,
.about-company .soma-head .display,
.about-mission .soma-head .display,
.about-principles .soma-head .display,
.about-values .soma-head .display,
.about-tech .soma-head .display,
.about-coverage .soma-head .display,
.about-culture .soma-head .display,
.about-credentials .soma-head .display {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  color: var(--fg-2);
  margin-bottom: 0;
}
.about-gallery {
  display: grid;
  grid-template-columns: 1fr;             /* P5 v58.13: 删团队图后改为单图 */
  gap: clamp(16px, 1.5vw, 24px);
  max-width: 960px;                       /* 居中显示, 不撑满 container */
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.about-gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #ebe5dd;
}
.about-gallery-item img {
  display: block;
  width: 100%;
  height: clamp(360px, 42vw, 480px);     /* P5 v58.13: 单图更高, 更突出 */
  object-fit: cover;
  border-radius: 12px;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.about-gallery-item:hover img { transform: scale(1.02); }
.about-gallery-item figcaption {
  padding: 14px 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
}
.about-prose {
  max-width: 960px;                                                /* P5 v59.73: 820→960 跟 .about-gallery 宽度对齐 */
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.78);
}
.about-prose p { margin: 0 0 20px; }
.about-prose p:last-child { margin-bottom: 0; }

/* 使命段: 大字 + 短句, 用 section-light 浅米色背景区分 hero/company */
.about-mission {
  text-align: center;
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
  background: #ffffff;                                    /* P5 v59.119: 改白色背景 (之前 var(--bg-light) 米色 #f4f0ea) */
}
.about-mission .display {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  font-size: clamp(15px, 1.4vw, 18px);  /* P5 v58.16: 改小 (跟首页 pattern 一致) */
  line-height: 1.5;
  color: var(--fg-2);
}
.about-mission .kicker {
  margin-bottom: 24px;
  color: var(--brand-primary);
}
.about-mission .lede { margin: 32px auto 0; color: var(--ink-dark); opacity: 0.78; }

/* P5 v51.14: about 页扩充 sections (三大理念 / 价值观 / 核心技术 / 业务布局 / 团队文化 / 资质荣誉) */
/* 注意: P3 改造后 .section-dark 实际 = 白底深字 (--bg-dark=#fff, --ink-light=#010201), 所以这些 card 颜色按浅色背景设计 */

/* 三大理念: 3 列卡片 */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
}
/* P5 v58.56: 理念卡片艺术边框 - 渐变描边 + 4 角 L 形装饰 + 内层光晕 */
.principle-card {
  position: relative;
  background: #ffffff;                                      /* P5 v59.40: 去掉渐变 border (用纯白背景 + 阴影代替) */
  border: none;                                             /* P5 v59.40: 去掉边框 */
  border-radius: 8px;
  padding: clamp(28px, 2.5vw, 40px);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
  box-shadow: 0 4px 16px rgba(15, 118, 110, 0.06);
}
.principle-card::before,
.principle-card::after { display: none; }                  /* P5 v59.40: 去掉 2 角 L 装饰 */
.principle-card > .principle-corner { display: none; }       /* P5 v59.40: 去掉另外 2 角 L 装饰 */
.principle-card > .principle-dot { display: none; }          /* P5 v59.40: 去掉顶部小圆点装饰 */
/* P5 v59.21: "我们的理念" 卡片 hover → 背景色 #397E79 (用户上传设计图), 文字白色 */
.principle-card:hover {
  background: #397E79;
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(57, 126, 121, 0.28);
}
.principle-card:hover .principle-num,
.principle-card:hover .principle-title,
.principle-card:hover .principle-tagline,
.principle-card:hover .principle-desc {
  color: #ffffff;
}
.principle-card:hover > .principle-dot { background: #ffffff; }
.principle-card:hover::before,
.principle-card:hover::after,
.principle-card:hover > .principle-corner {
  border-color: #ffffff;
}
.principle-card:hover > .principle-corner-tr { transform: translate(2px, -2px); }
.principle-card:hover > .principle-corner-bl { transform: translate(-2px, 2px); }
.principle-num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--brand-primary);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  opacity: 0.7;
  text-align: center;                                       /* P5 v59.38: 卡片前 3 行 (num/title/tagline) 居中 */
}
.principle-title {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;                                              /* P5 v59.80: 500→700 理念标题加粗 (用户反馈'我们重塑/深耕/承诺'再加粗) */
  color: var(--ink-dark);
  margin: 0 0 8px;
  line-height: 1.3;
  text-align: center;                                       /* P5 v59.38 */
}
.principle-tagline {
  font-size: 13px;
  color: var(--brand-primary);
  margin: 0 0 20px;
  letter-spacing: 0.02em;
  text-align: center;                                       /* P5 v59.38 */
}
.principle-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0,0,0,0.72);
  margin: 0;
}

/* 核心价值观: 4 列卡片 */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.5vw, 24px);
}
/* P5 v58.57: 价值观卡片艺术边框 - 跟 v58.56 理念卡片不同风格
   差异: 左侧 4px 渐变色带 + 顶部斜角标签 + 内层虚线 + 右下角圆点
   (v58.56 理念: 4 角 L 形 + 渐变描边 + 顶部圆点) */
.value-card {
  position: relative;
  background: transparent;                                   /* P5 v59.42: 去掉白底 (跟段米色底融合) */
  border: none;
  border-radius: 4px;
  padding: clamp(24px, 2.2vw, 32px) clamp(20px, 2vw, 28px) clamp(24px, 2.2vw, 32px) clamp(28px, 2.5vw, 36px);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease;
  box-shadow: 0 4px 16px rgba(15, 118, 110, 0.06);
}
/* 顶部斜角标签 (右上角 24px 宽) */
.value-card::before { display: none; }                       /* P5 v59.41: 去掉右上角三角 */
.value-card::after { display: none; }                        /* P5 v59.41: 去掉内层虚线 */
/* 右下角圆点 */
.value-card > .value-dot { display: none; }                   /* P5 v59.41: 去掉右下角圆点 */
/* P5 v59.41: hover 跟 .principle-card 一致 - teal 背景 + 文字白 + 上移 */
.value-card:hover {
  background: #397E79;
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(57, 126, 121, 0.28);
}
.value-card:hover .value-icon,
.value-card:hover .value-icon-text,
.value-card:hover .value-title,
.value-card:hover .value-desc {
  color: #ffffff;
}
/* P5 v59.22: 价值观卡片 - 图标居中, 大一点, 标题居中 */
.value-card { text-align: center; }
.value-icon {
  width: clamp(56px, 5vw, 72px);
  height: clamp(56px, 5vw, 72px);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--brand-primary);                                /* P5 v59.42: SVG 用 currentColor, 默认深绿; hover 时由 .value-card:hover 覆盖为白 */
}
.value-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.value-icon-text {
  font-size: 48px;
  color: var(--brand-primary);
}
.value-title {
  font-size: 18px;
  font-weight: 600;                                              /* P5 v59.79: 500→600 价值观卡片标题加粗 (用户反馈) */
  color: var(--ink-dark);
  margin: 0 0 12px;
  text-align: center;
}
.value-desc {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(0,0,0,0.72);
  margin: 0;
}

/* 核心技术: P1/P2 对比 2 列 */
.tech-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 40px);
}
.tech-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: clamp(24px, 2.5vw, 40px);
  position: relative;
}
.tech-card--p2 {
  border-color: rgba(15, 118, 110, 0.5);
  background: linear-gradient(180deg, rgba(15, 118, 110, 0.04) 0%, #fff 100%);
}
.tech-badge {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.4);
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
}
.tech-badge--hl {
  color: #fff;
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}
.tech-image {
  aspect-ratio: 1 / 1;                                 /* P5 v59.23: 原图是正方形, 16/9 容器会裁切 */
  border-radius: 8px;
  margin: 0 auto 24px;                                   /* P5 v59.43: 居中 (跟 max-width 配合) */
  max-width: 360px;                                      /* P5 v59.43: 缩小到 360 (之前占满 ~481px 父容器) */
  width: 100%;                                           /* P5 v59.43: 小屏自动收缩 */
  overflow: hidden;
  background: #1a1a1a;
  position: relative;
}
.tech-image--blur { background: #1a1a1a; }
.tech-image--clear { background: #0d2a2a; }
/* P5 v58.19: 技术对比图 - 真实图片 (传统内窥镜模糊 + 科众方案清晰) */
.tech-image img.tech-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 传统内窥镜图应用 blur 滤镜模拟"看不见"效果 */
.tech-image--blur img.tech-img { filter: blur(4px); }
.tech-card-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-dark);
  text-align: center;                                     /* P5 v59.83: 跟 .tech-image 居中一致 */
  max-width: 360px;                                        /* P5 v59.83: 跟 .tech-image max-width 对齐 */
  margin: 0 auto 12px;                                     /* P5 v59.83: 水平居中 */
}
.tech-card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0,0,0,0.72);
  max-width: 360px;                                        /* P5 v59.83: 跟 .tech-image 宽度对齐 */
  margin: 0 auto;                                          /* P5 v59.83: 水平居中 */
}

/* P5 v58.52: 业务布局 2 卡片上下叠放, 卡片内左地图 + 右文字 */
.coverage-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
}
.coverage-region {
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: #fff;
}
.coverage-region--map { padding: clamp(20px, 2vw, 28px); }

/* 卡片内: 标题在上, 下面左地图 + 右文字 (coverage-row flex 布局) */
.coverage-row {
  display: flex;
  gap: clamp(20px, 2vw, 32px);
  align-items: flex-start;
  flex-wrap: wrap;
}
.coverage-row > .coverage-map {
  flex: 1 1 60%;
  min-width: 0;
  width: auto;
  margin: 0;
}
.coverage-row > .coverage-side {
  flex: 1 1 32%;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coverage-row > .coverage-side .china-map-legend {
  margin: 0;
}
.coverage-map {
  width: 100%;
  margin: 8px 0 16px;
  border-radius: 8px;
  overflow: hidden;
}
.coverage-map svg { display: block; width: 100%; height: auto; max-height: 600px; }
.coverage-list--cities { margin-top: 8px; }

/* P5 v59.84: 中国地图 4 区域图例删除 (全省份统一 #397E79, 图例无意义) */
.coverage-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-primary);
  margin: 0 0 24px;
  letter-spacing: 0.02em;
}
.coverage-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.coverage-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 15px;
}
.coverage-list li:last-child { border-bottom: none; }
.coverage-list b {
  font-weight: 500;
  color: var(--ink-dark);
  min-width: 100px;
}
.coverage-list span {
  color: rgba(0,0,0,0.6);
  text-align: right;
  flex: 1;
}

/* P5 v58.20: 重点城市/区域 (★) - 视觉强调 */
.coverage-list-key b { color: var(--brand-primary); font-weight: 600; }

/* P5 v58.21: 地图 hover - 板块凸起 (alvainst.com 风格)
   - 中国: 4 城市所在省份默认 teal 高亮, hover 城市 → 城市凸起 + 省份变浅蓝凸起
   - 海外: 3 区域对应国家默认 teal 高亮, hover 国家 → 国家凸起 + 同 region 联动
   - 大部分视觉过渡在 SVG 内嵌 <style> 处理
*/
.coverage-map svg g.city { cursor: pointer; }
.coverage-map svg g.province { cursor: pointer; }
.coverage-map svg g.country { cursor: pointer; }

/* P5 v58.21: 城市 group 凸起 - hover 整组 (含 pin + label) 从地图浮起 */
.coverage-map svg g.city {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), filter 0.3s ease;
}
.coverage-map svg g.city:hover {
  transform: translateY(-10px) scale(1.12);
  filter: drop-shadow(0 10px 14px rgba(15,118,110,0.5));
}

/* 城市光晕 - 平时低透明, JS 加 is-active 后变亮 (城市 hover 同步) */
.coverage-map .city-halo { transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0.4; }
.coverage-map .city-halo.is-active { opacity: 1; transform: scale(1.3); }
.coverage-map .city.is-active .city-pin { r: 18; }

/* HQ 城市 (济南) 平时有脉动光晕 */
.coverage-map .city-halo[data-for="济南"] {
  animation: haloBreath 3s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.08); }
}

/* P5 v58.21.1: 海外世界地图卡片 - 浅色 (跟中国一致) */
.coverage-region--map:has(svg g[id="world-countries"]) {
  /* 浅色背景, 跟中国一致 */
}
.coverage-region--map:has(svg g[id="world-countries"]) .coverage-title { color: var(--brand-primary); }

/* 团队文化: 5 词大字居中, P3 浅底风格 + teal 高亮关键词 */
.culture-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(20px, 3vw, 40px) 0;
}
.culture-word {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 400;
  color: var(--ink-dark);
  letter-spacing: 0.04em;
  position: relative;
  padding: 0 8px;
  transition: color .2s, transform .2s;
}
.culture-word:nth-child(odd) { color: var(--brand-primary); }
.culture-word:hover { transform: scale(1.05); }
.culture-word:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: calc(clamp(20px, 3vw, 48px) * -0.5 - 4px);
  color: rgba(0,0,0,0.25);
  font-size: clamp(28px, 3.5vw, 48px);
}

/* 资质荣誉: 时间轴 */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 110px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-primary) 0%, rgba(15,118,110,0.1) 100%);
}
.timeline-item {
  display: flex;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(20px, 2vw, 32px) 0;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 105px;
  top: clamp(28px, 2.5vw, 40px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(15,118,110,0.15);
}
.timeline-date {
  flex: 0 0 90px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-primary);
  letter-spacing: 0.02em;
}
.timeline-body {
  flex: 1;
  padding-left: 32px;
  max-width: 720px;
}
.timeline-body h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-dark);
  margin: 0 0 8px;
  line-height: 1.4;
}
.timeline-body p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(0,0,0,0.7);
  margin: 0;
}

/* 移动端: 网格折叠 */
@media (max-width: 900px) {
  .principles-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .tech-compare { grid-template-columns: 1fr; }
  .coverage-block { grid-template-columns: 1fr; }
  .timeline::before { left: 60px; }
  .timeline-item::before { left: 55px; }
  .timeline-date { flex: 0 0 50px; font-size: 14px; }
  .timeline-body { padding-left: 24px; }
}
@media (max-width: 560px) {
  .values-grid { grid-template-columns: 1fr; }
  .culture-words { gap: 16px; }
  .culture-word { font-size: 24px; }
  .culture-word:not(:last-child)::after { display: none; }
}

/* about 页 form 段: 紧凑布局, 不重复 hero 视觉 */
#contact.about-reach {
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: 0;
}
#contact.about-reach .display { margin-bottom: 16px; }

@media (max-width: 720px) {
  .about-gallery { grid-template-columns: 1fr; }
  .about-gallery-item img { height: 280px; }
  .about-prose { font-size: 16px; }
}

/* ============== REACH OUT ============== */
.reach { padding-top: clamp(100px, 14vw, 200px) !important; padding-bottom: 80px !important; }   /* P5 v59.69d: 加 !important 排除 specificity 问题 */

/* 公司联系信息块（地址 / 联系人 / 电话） */
.contact-info {
  list-style: none;
  margin: 0 0 clamp(40px, 5vw, 56px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.5vw, 22px);
}
.contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: rgba(1, 2, 1, 0.88);
}
.contact-info .ci-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(110, 200, 210, 0.14);
  color: #0f8a96;
  border: 1px solid rgba(110, 200, 210, 0.35);
}
.contact-info .ci-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-info .ci-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(1, 2, 1, 0.55);
}
.contact-info .ci-value {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(1, 2, 1, 0.88);
  word-break: break-word;
}
.contact-info .ci-link {
  color: rgba(1, 2, 1, 0.88);
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 200, 210, 0.6);
  transition: color 200ms ease, border-color 200ms ease;
}
.contact-info .ci-link:hover {
  color: #0f8a96;
  border-bottom-color: #0f8a96;
}
.reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);  /* P5 v59.116: 1.2fr → 0.95fr, 缩窄图片让左列变宽到 ~620px, cn 中文 lede nowrap 不换行 */
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
}
.reach-content { max-width: 1100px; padding-bottom: clamp(80px, 10vw, 140px); }  /* P5 v59.53: 560→1100 (跟 grid 2fr 同步) */
.reach .lede { margin-bottom: clamp(32px, 4vw, 56px); }  /* 联系页 lede 和下方内容留空隙 */
.reach-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  background: var(--bg-dark); /* 与 section 同色，mask 透出后无色差 */
}
.reach-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 12px;
  /* 左→右淡入：透明→不透明，避免与左侧文字硬切 */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.85) 28%, #000 45%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.85) 28%, #000 45%);
}

/* ============== FORM ============== */
.form {
  margin-top: clamp(36px, 4vw, 56px);
  display: flex; flex-direction: column;
  gap: 28px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 40px);
}
.field {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--hairline-dark);
  padding: 12px 0;
}
.field input,
.field select {
  width: 100%;
  padding: 4px 0;
  font-size: 15px;
  background: transparent;
  border: 0;
  color: inherit;
}
.field span,
.field-label {
  position: absolute;
  left: 0; top: 12px;
  font-size: 15px;
  color: rgba(1, 2, 1, 0.55);
  pointer-events: none;
  transition: top 180ms ease, font-size 180ms ease, color 180ms ease;
}
.field input:focus + span,
.field input:not(:placeholder-shown) + span,
.field.has-value span {
  top: -8px;
  font-size: 11px;
  color: rgba(1, 2, 1, 0.55);
}
.field-select {
  position: relative;
}
.field-select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  height: 32px;
}
.field-select select:invalid { color: transparent; }
.field-select select option { background: #ffffff; color: var(--ink-light); }
.field-select .field-label { top: -8px; font-size: 11px; color: rgba(1, 2, 1, 0.55); }
.field-select .field-caret {
  position: absolute;
  right: 4px; top: 18px;
  width: 8px; height: 8px;
  border-right: 1.5px solid rgba(1, 2, 1, 0.7);
  border-bottom: 1.5px solid rgba(1, 2, 1, 0.7);
  transform: rotate(45deg);
  pointer-events: none;
}
.check {
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
  font-size: 14px;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check-box {
  width: 18px; height: 18px;
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.check input:checked + .check-box::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid var(--ink-light);
  border-bottom: 2px solid var(--ink-light);
  transform: rotate(-45deg) translate(0, -2px);
}
.check-text { opacity: 0.85; }
.submit-btn { margin-top: 16px; }

.form-success {
  margin-top: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.form-success[hidden] { display: none; }  /* 强制让 HTML hidden 生效（覆盖上面的 flex）*/
.form-success img { width: 28px; height: 28px; }
.form-success p { margin: 0; }

/* ============== FOOTER ============== */
.footer {
  background: #397E79;                                     /* P5 v59.54: 改用用户上传色 */
  color: #ffffff;
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
.footer-logo { height: 52px; width: auto; display: block; flex-shrink: 0; }
.footer-brand-text { margin-left: 14px; }
.footer-brand-text .nav-brand-zh { font-size: 20px; color: #ffffff; }  /* P5 v59.28: footer 改 teal 底, 品牌文字改白 */
.footer-brand-text .nav-brand-en { font-size: 11px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; max-width: 100%; }  /* P5 v59.28 */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 100px);
}
.footer-heading {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
}
.footer-link {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  opacity: 0.85;
  transition: opacity 200ms ease;
}
.footer-link:hover { opacity: 1; }

/* ============== SOCIAL FLOAT (P5 v56) - 右侧浮动 5 个社媒图标 ============== */
.social-float {
  position: fixed;
  right: 16px;
  bottom: 80px;                                       /* P5 v56.1: 改成靠下, 距离底部 80px (避免被 footer 遮挡) */
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}
.social-float-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.social-float-item:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.26);
  color: #ffffff;
}
.social-float-icon {
  width: 32px;                                          /* P5 v56.2: 24→32, 让图标更明显 (Facebook f 等小元素看得清) */
  height: 32px;
  fill: #ffffff;
  pointer-events: none;
}
@media (max-width: 768px) {
  .social-float { display: none; }   /* 移动端隐藏, 避免遮挡内容 */
}

/* ============== REVEAL ============== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1024px) {
  .soma-grid { grid-template-columns: 1fr; gap: 60px; }
  .soma-card { min-height: 0; }
  .soma-img { min-height: 320px; }
  .platform-grid { grid-template-columns: 1fr; gap: 60px; }
  .platform-card { min-height: 0; }
  .platform-img { min-height: 240px; }
  .cancer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .cancer-feature { text-align: left !important; }
  .cancer-feature p { margin-left: 0 !important; margin-right: auto !important; }
  .deeper-grid { grid-template-columns: 1fr; }
  .deeper-big { grid-row: auto; min-height: 420px; }
  .deeper-col { min-height: auto; }
  .deeper-small { min-height: 280px; }
  .reach-grid { grid-template-columns: 1fr; }
  .reach-media { max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .logo-cell:nth-child(n+4) { grid-column: span 1; }
  .nav-menu {
    display: none;
    position: fixed;
    inset: 70px 0 0 0;
    flex-direction: column;
    padding: 28px 24px;
    gap: 8px;
    font-size: 18px;
    background: #010201;
    color: #fff9f9;
    border-top: 1px solid rgba(255,249,249,0.08);
    z-index: 99;
    overflow-y: auto;
  }
  .nav-menu.open { display: flex; }
  .nav-menu .nav-link {
    padding: 14px 4px;
    color: #fff9f9;
    border-bottom: 1px solid rgba(255,249,249,0.06);
  }
  .nav-item--has-dropdown > .nav-link { display: flex; align-items: center; justify-content: space-between; }
  .nav-caret { margin-left: auto; }
  /* 移动端: dropdown 转成 inline 展开, 用 .nav-item--open 切换 */
  .nav-dropdown {
    position: static;
    transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 0 8px 12px;
    width: 100%;          /* P5 v40.5: 不继承 desktop 的 width: 100vw, 否则英文长 link 撑开 dropdown 把 nav-item 拉宽溢出 */
    max-width: 100%;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
  }
  /* P5 v40.5: nav-item 在 mobile 端固定占满整行, 不被 dropdown 内容撑开 */
  .nav-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .nav-item--has-dropdown > .nav-dropdown::before { display: none; }
  .nav-item--has-dropdown.nav-item--open > .nav-dropdown {
    max-height: 400px;
    padding: 4px 0 12px 12px;
  }
  .nav-dropdown-link {
    padding: 10px 12px;
    font-size: 14px;
    color: rgba(255, 249, 249, 0.65);
    white-space: normal;
  }
  /* Menu open → 禁止 body 滚动 (iOS Safari 通过 JS 锁 scrollY + position: fixed) */
  body.menu-open { overflow: hidden; }
  .nav-burger {
    display: inline-flex; flex-direction: column; gap: 5px;
    padding: 8px;
  }
  .nav-burger span {
    display: block; width: 22px; height: 1.5px; background: var(--ink-light);  /* P3: 整站白底,默认深色 */
  }
  .nav.scrolled .nav-burger span { background: var(--ink-light); }  /* scrolled 也是深色 */
}

@media (max-width: 720px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .display { font-size: clamp(26px, 6.5vw, 38px); }
  .lede { font-size: 16px; }
  .form-row { grid-template-columns: 1fr; gap: 28px; }
  .cancer-grid { grid-template-columns: 1fr; gap: 36px; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .deeper-grid { grid-template-columns: 1fr; min-height: 0; }
  .deeper-big { min-height: 340px; }
  .deeper-small { min-height: 240px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand-text .nav-brand-en { white-space: normal; }
  .radar-sticky { width: 60vw; height: 60vw; top: 40vh; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .hero-video { animation: none !important; }
  .hero-slide {
    background-position: center center !important;
  }
}

/* ============================================================
 * P4 Region switcher — globe icon trigger + dropdown
 * 取代旧的 4 按钮横排. 点击 trigger 展开 dropdown, 选中跳转子域.
 * ============================================================ */
.region-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 触发按钮: globe icon + 当前区域 + chevron */
/* P5 v59.28: nav 改 teal 底后, 区域切换按钮文字/icon/边框都改白色, hover 用半透明白底 */
.region-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.region-trigger:hover,
.region-switch--open .region-trigger {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.region-globe-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.region-trigger-label {
  font-weight: 600;
  letter-spacing: 0.005em;
}
.region-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
  opacity: 0.6;
}
.region-switch--open .region-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* 下拉面板 */
.region-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid rgba(1, 2, 1, 0.08);
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(15, 118, 110, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 300;
}
.region-switch--open .region-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 下拉项 */
.region-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--ink-light);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.region-option:hover {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}
.region-option--active {
  color: var(--brand-primary);
  font-weight: 600;
  background: var(--brand-primary-bg);
}
.region-option--active:hover {
  background: var(--brand-primary-soft);
}
.region-option-label {
  flex: 1;
}
.region-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-primary);
}
.region-check-placeholder {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 移动端适配: 触发按钮内边距缩小一点 */
@media (max-width: 720px) {
  .region-trigger {
    padding: 7px 12px;
    font-size: 13px;
    gap: 6px;
  }
  .region-globe-icon { width: 16px; height: 16px; }
  .region-chevron { width: 12px; height: 12px; }
  .region-dropdown {
    min-width: 160px;
  }
}

/* ============================================================
 * Patients & Cases (P5 患者专区) - 术者证言 + 临床结局
 * ============================================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.testimonial-card {
  background: var(--bg-dark);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
.testimonial-quote-mark {
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: var(--brand-primary);
  opacity: 0.4;
  margin: -12px 0 -16px;
}
.testimonial-quote {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-light);
  margin: 0;
  flex: 1;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.testimonial-metric {
  flex-shrink: 0;
}
.testimonial-metric-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--brand-primary);
  line-height: 1;
}
.testimonial-metric-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 4px;
}
.testimonial-attribution {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.5;
  flex: 1;
  text-align: right;
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.outcome-card {
  background: var(--bg-dark);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 200px;
}
.outcome-metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.outcome-metric-value {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 600;
  color: var(--brand-primary);
  line-height: 1;
}
.outcome-metric-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  flex: 1;
}
.outcome-quote {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-light);
  margin: 0;
  flex: 1;
}
.outcome-attribution {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  font-style: italic;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
  .testimonial-grid,
  .outcome-grid { grid-template-columns: 1fr; }
  .testimonial-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .testimonial-attribution { text-align: left; }
  .outcome-metric-value { font-size: 28px; }
}

/* ============================================================
 * P5 v20: Contact Popover (患者专区"联系医院对接"按钮)
 * 跟 footer 共享同一份 site-settings 数据, 3 个链接内容一致
 * ============================================================ */
.contact-popover {
  position: absolute;          /* 配合 positionPopover() 算出的 top/left */
  z-index: 9000;
  min-width: 240px;
  max-width: 320px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 16px 18px 14px;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  color: #0a0c0b;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.contact-popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.contact-popover::before {
  /* 小三角朝上指按钮 */
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.contact-popover-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 10px;
  font-family: var(--font-mono, "SF Mono", "Roboto Mono", monospace);
}
.contact-popover-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #0a0c0b;
  text-decoration: none;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
}
.contact-popover-item:hover {
  background: rgba(15, 118, 110, 0.08);   /* 品牌色 teal 浅背景 */
  color: #0F766E;
}
.contact-popover-item::before {
  /* 简易 icon 占位, 跟 footer 三项视觉对齐 */
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}
.contact-popover-item[data-footer-key="email"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 5L2 7'/></svg>");
}
.contact-popover-item[data-footer-key="linkedin"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/></svg>");
}
.contact-popover-item[data-footer-key="wechat"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M9.5 4C5.36 4 2 6.69 2 10c0 1.92 1.14 3.62 2.9 4.71L4 17l2.5-1.5c.62.16 1.27.27 1.95.31a4.7 4.7 0 0 1-.1-.95c0-2.62 2.6-4.86 5.95-4.86.2 0 .4.01.6.03C14.4 7.36 12.2 4 9.5 4zM7 7.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm2.5 4.5c-2.93 0-5.4 1.84-5.4 4.5 0 2.66 2.47 4.5 5.4 4.5.6 0 1.18-.07 1.72-.2L18 22l-.5-1.6c1.4-.92 2.4-2.32 2.4-3.9 0-2.66-2.47-4.5-5.4-4.5zm-2 3a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5zm4 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M9.5 4C5.36 4 2 6.69 2 10c0 1.92 1.14 3.62 2.9 4.71L4 17l2.5-1.5c.62.16 1.27.27 1.95.31a4.7 4.7 0 0 1-.1-.95c0-2.62 2.6-4.86 5.95-4.86.2 0 .4.01.6.03C14.4 7.36 12.2 4 9.5 4zM7 7.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm5 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm2.5 4.5c-2.93 0-5.4 1.84-5.4 4.5 0 2.66 2.47 4.5 5.4 4.5.6 0 1.18-.07 1.72-.2L18 22l-.5-1.6c1.4-.92 2.4-2.32 2.4-3.9 0-2.66-2.47-4.5-5.4-4.5zm-2 3a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5zm4 0a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5z'/></svg>");
}

/* ============================================================
 * P5 v51: 产品详情 6 tab 样式 (产品图片/产品用途/技术优势/产品型号/产品手册/视频展示)
 * ============================================================ */
.product-tabs-section {
  padding: 60px 0;
}

/* P5 v51.4: 通用详情页底部段 (合规说明 + 相关产品) 减小 padding, 避免大空白
 * 默认 .section 是 clamp(80px, 12vw, 200px) 0, 1440px 视口下 = 172.8px, 太大
 * .soma-head 也有 margin-bottom clamp(80px, 12vw, 160px) = 172.8px
 * .soma-card min-height: 560px 撑高
 */
#productHero {
  padding: 60px 0 0 0;  /* hero 顶 60 (合理) + 底 0 (soma-head margin 0 后紧贴 tabs) */
}
#productHero .soma-head {
  margin-bottom: 0;  /* 全局 .soma-head margin-bottom 172.8 太大, 详情页 hero 不需要 */
}
#relatedSection {
  padding: 40px 0 20px 0;
}
#relatedSection .soma-head {
  margin-bottom: 24px;
}
#relatedSection .soma-card {
  min-height: 0;
}
#complianceSection {
  padding: 40px 0 80px 0;
}
.product-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 0;
}
.product-tab {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.65);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  top: 1px;
}
.product-tab:hover {
  color: var(--fg, #0F766E);
  background: rgba(15, 118, 110, 0.04);
}
.product-tab.active {
  color: #fff;
  background: var(--fg, #0F766E);
  border-color: var(--fg, #0F766E);
}
.product-tab:focus-visible {
  outline: 2px solid var(--fg, #0F766E);
  outline-offset: 2px;
}
.product-tab-content {
  background: #fff;
  border-radius: 0 12px 12px 12px;
  padding: 40px 32px;
  min-height: 360px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tab-pane {
  display: none;
  animation: tabFadeIn 0.22s ease;
}
.tab-pane--active {
  display: block;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tab 1: 产品图片 - 大图 + 缩略图列表 (参考凯氏定氮仪参考页) */
.product-gallery {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 20px;
  align-items: flex-start;
}
.product-gallery-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fafafa;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 0;
}
.product-gallery-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  transition: opacity 0.18s ease;
}
/* P5 v55.11: 大图上方显示 alt 描述 (限宽左对齐, 明确只在大图上方, 不延伸到缩略图区) */
.product-gallery-caption {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft-light);
  text-align: left;                                    /* P5 v55.11: 左对齐 */
  padding: 8px 14px;
  background: #f7f4ee;
  border-radius: 6px;
  grid-column: 1;                                      /* P5 v55.11: 跟大图同列 */
  justify-self: start;                                 /* P5 v55.11: 限宽, 不撑满 1fr 列 */
  width: auto;                                         /* P5 v55.11: 限宽关键 */
  max-width: 100%;
}
.product-gallery-main {
  grid-column: 1;                                      /* P5 v55.10: 大图在左侧列 */
}
.product-gallery-thumbs {
  grid-column: 2;                                      /* P5 v55.10: 缩略图在右侧列 */
  grid-row: 1 / 3;                                     /* P5 v55.10: 跨 caption + main 两行高度 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 600px;
  overflow-y: auto;
}
.product-gallery-thumb {
  width: 110px;
  height: 110px;
  padding: 0;
  border: 2px solid transparent;
  background: #fafafa;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease;
  flex-shrink: 0;
}
.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.product-gallery-thumb:hover {
  border-color: rgba(15, 118, 110, 0.4);
}
.product-gallery-thumb.active {
  border-color: var(--fg, #0F766E);
}

/* Tab 2: 产品用途 (description 文字) */
.product-usage {
  max-width: 880px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.78);
}
.product-usage p {
  margin: 0 0 16px;
}
.product-usage p:last-child {
  margin-bottom: 0;
}

/* Tab 3: 技术优势 (key-value 行) */
.product-advantages {
  max-width: 880px;
}
.advantage-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.advantage-row:last-child {
  border-bottom: none;
}
.advantage-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg, #0F766E);
}
.advantage-value {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.78);
}

/* Tab 4: 产品型号 (key-value 表格) */
.product-specs-new {
  max-width: 880px;
}
.product-specs-3col { max-width: 1100px; }              /* P5 v59.110: 3 列布局更宽 */
.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.spec-row-3col {                                          /* P5 v59.110: 产品型号 3 列布局 (型号/描述/规格) */
  grid-template-columns: 180px 1fr 1fr;
  align-items: start;
}
.spec-row:last-child {
  border-bottom: none;
}
.spec-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--fg, #0F766E);
}
.spec-value {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.78);
}
.spec-spec {                                              /* P5 v59.110: 第 3 列规格 (e.g. 50cm) */
  font-size: 14px;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.72);
}

/* Tab 5: 产品手册 (文件列表) */
.product-documents {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.document-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: all 0.18s ease;
}
.document-item:hover {
  background: rgba(15, 118, 110, 0.04);
  border-color: var(--fg, #0F766E);
  transform: translateY(-1px);
}
.document-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--fg, #0F766E);
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.document-info {
  flex: 1;
  min-width: 0;
}
.document-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-meta {
  display: block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 2px;
}
.document-action {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--fg, #0F766E);
  font-weight: 500;
}

/* Tab 6: 视频展示 - 加大显示 + 支持多视频 */
.product-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}
/* 2 个以上视频时, 改 2 列 */
@media (min-width: 1100px) {
  .product-videos:has(.product-video-item:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}
.product-video-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-video-item video {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  max-height: 540px;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: block;
}
.product-video-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg, #0F766E);
  padding: 0 4px;
}
.product-video-meta {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  padding: 0 4px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  font-size: 15px;
  padding: 60px 0;
  font-style: italic;
}

/* 6 tab 响应式 */
@media (max-width: 900px) {
  .product-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .product-tab {
    flex-shrink: 0;
    padding: 12px 18px;
    font-size: 14px;
  }
  .product-tab-content {
    padding: 24px 18px;
  }
  .product-gallery {
    grid-template-columns: 1fr;
  }
  .product-gallery-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
  }
  .product-gallery-thumb {
    width: 80px;
    height: 80px;
  }
  .advantage-row,
  .spec-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .advantage-label,
  .spec-label {
    font-size: 14px;
  }
  .product-videos {
    grid-template-columns: 1fr;
  }
  /* P5 v51.16: 业务布局 移动端地图区块折叠 1 列 */
  .coverage-block { grid-template-columns: 1fr; }
  .coverage-map svg { max-height: 360px; }
}
