@charset "utf-8";
/* =========================================================
   SINOLVE 官网公共组件库
   ---------------------------------------------------------
   依赖：theme.css（颜色、字号、间距、过渡等变量）
   命名：BEM（块__元素--修饰符）
   ========================================================= */


/* =========================================================
   一、按钮 .btn
   ---------------------------------------------------------
   设计稿要求（不对称圆角胶囊）：
     左上直角 + 右上 20px 圆角
     右下直角 + 左下 20px 圆角
   颜色规范：
     默认态：紫色渐变背景 + 白字 + 紫色描边
     悬浮态：白底       + 紫色渐变文字 + 紫色描边

   实现要点（朴素方案）：
     - 结构：<button class="btn btn--primary"><span>文字</span></button>
     - 描边用单色 #7e2589（渐变中间值），避免 SVG / mask 方案
       在 hover 切换背景时白色溢出描边 1px 的问题。
     - 默认态：button 本体绘制渐变背景；span 直接白字。
     - 悬浮态：button 背景切换为白色；span 通过 background-clip:text
       展示紫色渐变文字。
     - border 始终在最外层、颜色不变，因此 hover 切换不会触碰描边像素。
   ========================================================= */

/* ---------- 基础按钮容器 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  font-family: var(--ff-body);
  font-size: var(--fs-h3);          /* 16px ←蓝湖 48px：Find out more 主按钮（同导航字号） */
  font-weight: var(--fw-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: 1px solid transparent;
  /* 不对称圆角：左上 0、右上 20、右下 0、左下 20 */
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  transition:
    background-color var(--transition-base),
    color            var(--transition-base),
    transform        var(--transition-base),
    box-shadow       var(--transition-base);
}

/* ---------- 小尺寸按钮（READ MORE 等卡片 CTA）---------- */
.btn--sm {
  padding: 8px 20px;
  font-size: var(--fs-body-sm);     /* 12px ←蓝湖 36px：READ MORE，比主按钮小一档 */
}

.btn:focus { outline: none; }
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ---------- 主按钮 .btn--primary（紫色渐变） ---------- */
.btn--primary {
  /* 描边：使用渐变中间值的单色，hover 时不变化，避免 1px 溢出 */
  border: 1px solid #7e2589;
  /* 默认态背景：紫色渐变 */
  background-image: var(--gradient-purple);
  background-color: transparent;
  /* hover 时通过淡出渐变图、露出白底实现态切换 */
  gap: 10px;
}

/* ---------- 带 + 号修饰符（仅 READ MORE 等卡片 CTA 用，Find out more 不加） ---------- */
.btn--with-plus::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-size: 1.2em;
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-text-on-dark);
  transition: color var(--transition-base);
}
.btn--with-plus:hover::after,
.btn--with-plus:focus-visible::after {
  color: var(--color-accent-purple-end);
}

/* span 子元素：承载文字与文字颜色态切换 */
.btn--primary > span {
  position: relative;
  display: inline-block;
  color: var(--color-text-on-dark);   /* 默认白字 */
  /* 为 hover 态预备渐变（默认不显示） */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  /* 默认透明背景图，文字颜色用 color；hover 时切换 fill 模式 */
  -webkit-text-fill-color: currentColor;
  transition: color var(--transition-base);
}

/* hover：白底 + 紫色渐变文字（描边保持 #7e2589 不变） */
.btn--primary:hover,
.btn--primary:focus-visible {
  background-image: none;                       /* 撤掉渐变 */
  background-color: var(--color-bg-white);      /* 露出白底 */
  transform: translateY(-2px);
  box-shadow: var(--shadow-purple);
}

.btn--primary:hover > span,
.btn--primary:focus-visible > span {
  color: transparent;                           /* 让 background-clip:text 生效 */
  -webkit-text-fill-color: transparent;
}

/* 按下态：去掉上浮，避免连续点击抖动 */
.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}


/* ---------- 移动端按钮微调（≤ 800px） ---------- */
@media (max-width: 800px) {
  .btn {
    padding: 9px 22px;
    font-size: var(--fs-h3);    /* 16px：移动端保持与 PC 同档可读性 */
    border-radius: 0 var(--radius-md) 0 var(--radius-md);  /* 圆角略缩 */
  }
  .btn--sm {
    padding: 7px 18px;
    font-size: var(--fs-body-sm);   /* 12px */
  }
}


/* =========================================================
   二、容器宽度补强
   ---------------------------------------------------------
   global.css 中 .container 只设了 width:76%，这里加 max-width
   以避免大屏下文字过宽。
   ========================================================= */
.container { max-width: var(--container-max); }


/* =========================================================
   三、通用区块 .section
   ========================================================= */
.section {
  padding: var(--sp-7) 0;   /* 96px 上下 */
  position: relative;
}
.section--dark {
  background: var(--color-bg-primary);
  color: var(--color-text-on-dark);
}

/* ---- 板块级长进场（Step 3）----
   通过 .section--reveal 起始态 + .section--reveal.is-in 终态实现。
   触发：JS 用 IntersectionObserver 监听 .section，进入视口 15% 时加 is-in。
   规则详见 CLAUDE.md「C. 板块长进场」。 */
.section--reveal {
  opacity: 0;
  /* 加大位移并叠加轻微缩放，整段入场更有"推近"的存在感（对齐 cepi.net） */
  transform: translate3d(0, 72px, 0) scale(0.985);
  transition:
    opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.section--reveal.is-in {
  opacity: 1;
  transform: none;
}
/* 移动端时长缩短到 800ms，减少长时长在小屏上的拖沓感 */
@media (max-width: 800px) {
  .section--reveal {
    transition:
      opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
/* 用户系统开启「减少动效」：直接显示终态，不做位移和淡入 */
@media (prefers-reduced-motion: reduce) {
  .section--reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================
   四、区块标题 .section__title
   ========================================================= */
.section__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin: 0;
}
.section__title--on-dark { color: var(--color-text-on-dark); }
.section__title--gradient {
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}


/* =========================================================
   五、Header / 顶部公共导航补强
   ---------------------------------------------------------
   global.css 中已有 .headbox / .nav 基本样式。
   首页 Hero 区背景为深色，导航维持透明 + 白字即可。
   ========================================================= */
.headbox > header { height: 100%; }


/* =========================================================
   六、首页 Hero 区
   ---------------------------------------------------------
   注意：Hero 有左下大圆角，会"切掉"一个白色三角，
   所以父级（首页 body / main）需要先垫上深蓝主色，
   见下方 .hero-section-wrap 与 body 兜底。
   ========================================================= */
/* body 用白色兜底：
   - Hero 左下圆角缺口处会露出下方 Expertise 区块对应的白色（设计稿要求）
   - Contact CTA 右上圆角缺口处会露出上方 Why Choose Us 区块对应的白色
   - Footer / Hero / Contact CTA 自身都有显式深蓝背景，不依赖 body 兜底 */
body { background: var(--color-bg-white); }

.hero {
  position: relative;
  width: 100%;
  min-height: 760px;
  overflow: hidden;
  background: var(--gradient-hero-bg);
  color: var(--color-text-on-dark);
  padding-top: var(--header-height);    /* 给 fixed 导航让位（80px） */
  padding-bottom: var(--sp-7);
  /* 设计稿要求：左下大圆角 */
  border-radius: 0 0 0 var(--radius-xl);
  /* 让内层 .hero__inner 在 banner 内上下居中（标题 + 描述整体垂直居中） */
  display: flex;
  align-items: center;
}

/* ----------------------------------------------------------
   .hero--bottom-dark：Hero 下方接深蓝板块（仅首页 index.html 用）。
   ----------------------------------------------------------
   Hero 左下 border-radius 裁出的真空原本露 body 白底，
   通过 .hero--bottom-dark 的父元素（main 或 body）改深蓝即可让缺口透出深蓝。
   配合 index.html 里 <main class="page-index"> 实现页面级生效。 */
.page-index { background: var(--color-bg-primary); }
.hero__bg {
  position: absolute;
  /* 预留 8% 缓冲：视差向下偏移时顶部不会露白
     （JS 会通过 transform 控制 translateY + scale，详见 js/global.js initHeroParallax） */
  top: -8%;
  left: 0;
  right: 0;
  bottom: -8%;
  z-index: 0;
  pointer-events: none;
}
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 让暗色背景上的文字更清晰，加一层柔和暗化 */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 42, 138, 0.35) 0%,
    rgba(106, 26, 161, 0.12) 50%,
    rgba(199, 36, 177, 0) 100%
  );
}
.hero__inner {
  position: relative;
  z-index: 1;
  /* .hero 已经 flex 垂直居中，这里不再用 padding 撑高度，
     但 .container 本身只控制宽度 76% / max 1400px，
     在 flex 父容器内默认会被收缩，所以不需要 width:100% */
  padding-top: 0;
  padding-bottom: 0;
}
.hero__copy { max-width: 60%; }
.hero__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);    /* 38px ←蓝湖 116px ÷ 3 */
  font-weight: var(--fw-bold);
  /* 蓝湖 line-height 165 / font-size 116 ≈ 1.42 */
  line-height: 1.42;
  margin: 0 0 var(--sp-4) 0;
  color: var(--color-text-on-dark);
  letter-spacing: 0.2px;
}
.hero__cta {
  /* 沿用 .btn--primary，无需额外样式 */
}
.hero__desc {
  position: relative;
  margin-top: var(--sp-7);
  margin-left: auto;
  max-width: 38%;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted-on-dark);
  text-align: center;
}


/* =========================================================
   七、Business Model 板块
   ========================================================= */
.business-model__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  gap: var(--sp-3);
}
.section__more { flex-shrink: 0; }

.bm-grid {
  /* 横向手风琴：一行 4 张并排，整组定高；
     默认 Trading 展开、其余收窄，鼠标悬浮哪张哪张展开（见下方 flex-grow 规则）*/
  display: flex;
  gap: var(--sp-3);
  height: clamp(380px, 30vw, 480px);
}

/* 单卡片：整张为图片背景，文字浮在图片上层 */
.bm-card {
  position: relative;
  display: block;
  overflow: hidden;
  /* 手风琴成员：默认等分收窄（flex-grow:1），展开态由 flex-grow:3.3 拉大，
     比例沿用蓝湖 1547 : 468 ≈ 3.3 : 1 */
  flex: 1 1 0;
  min-width: 0;
  /* 卡片对角圆角：右上 + 左下圆角，左上 + 右下直角（仅首页 index.html 使用） */
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  color: var(--color-text-on-dark);
  text-decoration: none;
  transition: flex-grow var(--transition-slow),
              box-shadow var(--transition-base);
}
/* 默认态（鼠标未进入整组）：第一张 Trading 展开 */
.bm-grid:not(:hover) .bm-card:first-child { flex-grow: 3.3; }
/* 悬浮某张：该张展开、加阴影，其余自动回到收窄态 */
.bm-card:hover {
  flex-grow: 3.3;
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-card-hover);
}

/* 图片层：满铺整张卡 */
.bm-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bm-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 蓝色滤镜让全黑白图片融入深蓝主题 */
  filter: grayscale(0.4) saturate(1.05);
  transition: transform var(--transition-slow);
}
.bm-card:hover .bm-card__media img { transform: scale(1.04); }
/* 蓝色品牌覆盖层（让图片偏蓝并强化文字对比） */
.bm-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 62, 144, 0.25) 0%,
    rgba(16, 62, 144, 0.55) 60%,
    rgba(11, 42, 138, 0.85) 100%
  );
  pointer-events: none;
}

/* 文字层：绝对定位贴底，叠在图片上 */
.bm-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-3);
  z-index: 2;
}
.bm-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0;
  color: var(--color-text-on-dark);
}
/* 描述：收窄态隐藏（max-height:0），展开态淡入并撑开 */
.bm-card__desc {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted-on-dark);
  transition: max-height var(--transition-base),
              opacity var(--transition-base),
              margin-top var(--transition-base);
}
/* 展开态（默认 Trading 或当前悬浮卡）才显示描述 */
.bm-grid:not(:hover) .bm-card:first-child .bm-card__desc,
.bm-card:hover .bm-card__desc {
  max-height: 12em;
  opacity: 1;
  margin-top: var(--sp-1);
}


/* =========================================================
   八、What we do 板块
   ========================================================= */
.what-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-5);
}

.what-card {
  /* flex 纵向布局，让 CTA 始终贴底 */
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--color-text-on-dark);
  height: 100%;
}
.what-card__media {
  overflow: hidden;
  /* 图片对角圆角：右上 + 左下圆角，左上 + 右下直角（仅首页 index.html 使用） */
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  aspect-ratio: 16 / 7;
}
.what-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.what-card:hover .what-card__media img { transform: scale(1.04); }

.what-card__body {
  padding: var(--sp-3) 0 0 0;
  /* 让 body 自动撑满剩余空间，CTA 在底部 */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.what-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  margin: 0 0 var(--sp-2) 0;
  color: var(--color-text-on-dark);
}
.what-card__desc {
  margin: 0 0 var(--sp-3) 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted-on-dark);
  max-width: 78%;
  /* 撑满 body 剩余空间，使 CTA 始终对齐到底部 */
  flex: 1;
}
.what-card__cta {
  /* 沿用 .btn--primary；align-self 保证按钮宽度按内容、不被 flex 拉伸 */
  align-self: flex-start;
  margin-top: auto;
}


/* =========================================================
   九、Stats（数字统计胶囊）
   ---------------------------------------------------------
   外层为深蓝底，内部为紫色渐变大胶囊，4 列均分。
   ========================================================= */
.stats-wrap { padding: var(--sp-5) 0 var(--sp-7) 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: var(--sp-5) var(--sp-4);
  background: var(--gradient-stats-bg);
  /* 大圆角胶囊：左上 + 右下 大圆角，其余直角；
     与首页其他不对称圆角元素保持一致 */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  color: var(--color-text-on-dark);
}
.stats__item {
  position: relative;
  padding: 0 var(--sp-3);
  text-align: center;
}
.stats__item + .stats__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
}
.stats__icon {
  margin: 0 auto var(--sp-2);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats__icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: brightness(0) invert(1); /* 白色化图标 */
}
.stats__num {
  font-family: var(--ff-number);
  font-size: var(--fs-number);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-bottom: var(--sp-1);
  color: var(--color-text-on-dark);
}
.stats__label {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  margin-bottom: var(--sp-2);
  color: var(--color-text-on-dark);
}
.stats__desc {
  margin: var(--sp-2) auto 0;
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
  color: rgba(255, 255, 255, 0.85);
  max-width: 86%;
}


/* =========================================================
   十、Footer 公共页脚
   ---------------------------------------------------------
   深蓝底 + 白字；左侧 LOGO，右侧 4 列导航。
   .footbox 容器由 global.js 异步注入页脚 HTML。
   ========================================================= */
.footbox { display: block; background: var(--color-bg-primary); }

.footer {
  padding: var(--sp-6) 0 var(--sp-5);
  color: var(--color-text-on-dark);
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
}
.footer__brand { flex-shrink: 0; }
.footer__logo img {
  display: block;
  width: auto;
  height: 32px;
}
.footer__nav {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: var(--sp-6);
  flex: 1;
  justify-content: flex-end;
}
.footer__col-title {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-dark);
  margin-bottom: var(--sp-2);
  text-decoration: none;
  transition: color var(--transition-base);
}
.footer__col-title:hover { color: var(--color-text-muted-on-dark); }

.footer__list {
  list-style: none;
  margin: var(--sp-1) 0 0 0;
  padding: 0;
}
.footer__list li { margin-bottom: 6px; }
.footer__list a {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--color-text-muted-on-dark);
  text-decoration: none;
  transition: color var(--transition-base);
}
.footer__list a:hover { color: var(--color-text-on-dark); }


/* =========================================================
   十一、子页 Hero（沿用 .hero 基础，新增 .hero--subpage 修饰符）
   ---------------------------------------------------------
   适用于 what.html / equipment-engineering.html 等内页：
   - 标题更大（fs-hero 62px）
   - 描述位置改到标题下方左对齐（不像首页 hero 那样右下角）
   ========================================================= */
.hero--subpage .hero__title {
  font-size: var(--fs-hero);   /* 62px ←蓝湖 184px ÷ 3 */
  line-height: 1.15;
  margin-bottom: var(--sp-3);
  /* 不允许标题自动换行——HTML 中已用 <br> 控制为两行：
     第一行 "What we do for"，第二行 "Equipment & Engineering"。 */
  white-space: normal;
}
.hero--subpage .hero__copy {
  /* 撑满整个 container，确保 "Equipment & Engineering" 一行不再换行 */
  max-width: 100%;
}
.hero--subpage .hero__desc {
  margin-top: var(--sp-3);
  margin-left: 0;
  /* 描述文字蓝湖标定 2363 / 4096 ≈ 58%，约等于第二行标题宽度。
     这里在 container（76% 视口）内再占约 76%，整体相当于 58% 视口宽度。 */
  max-width: 76%;
  text-align: left;
  font-size: var(--fs-lead);   /* 14px */
  /* 深蓝底描述文字硬规则：使用半透明白 muted-on-dark，与纯白主标题形成主次对比 */
  color: var(--color-text-muted-on-dark);
  line-height: var(--lh-relaxed);
}

/* about 页 hero 专用：描述文字靠右下角（设计稿要求）
   - 标题保持左上不动（.hero__copy 仍是默认）
   - 描述用 margin-left:auto 推到右侧，宽度收窄约 38%，与首页 hero 描述布局一致
   - 行高与字号沿用其他子页 desc */
.hero--subpage-about .hero__desc {
  margin-left: auto;
  margin-right: 0;
  max-width: 38%;
  text-align: left;
}


/* =========================================================
   十二、Our Expertise（浅色背景区 + 两张浅灰卡片）
   ---------------------------------------------------------
   设计稿：白色页面底色上的居中区块，
     - 紫色渐变文字标题 "Our Expertise" + 蓝色副文案
     - 下方两张浅灰底卡片（border-radius 蓝湖 120 ÷ 3 ≈ 40px，用 --radius-xl 即 56px）
     - 卡片上方紫色圆形图标（紫色渐变 webp 图，已自带圆形背景）
   ========================================================= */
.expertise {
  padding: var(--sp-7) 0;
  text-align: center;
  /* 整段白色背景 */
  background: var(--color-bg-white);
}
.expertise__head {
  margin-bottom: var(--sp-6);
}
.expertise__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  /* 紫色渐变文字 + background-clip:text 紧凑行高下会裁掉 descender，
     给一个略宽行高 + padding-bottom 留 descender 空间 */
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-2) 0;
  /* 紫色渐变文字：颜色严格以蓝湖设计稿标注为准（已写入 theme.css） */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.expertise__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-primary);
  margin: 0 auto;
  max-width: 60%;
  line-height: var(--lh-relaxed);
}
.expertise__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  max-width: 1100px;
  margin: 0 auto;
}
.expertise-card {
  /* 设计稿：图标 + 标题居中，描述左对齐 */
  text-align: center;
  background: var(--color-bg-card-soft);
  /* 设计稿要求：右上 + 左下 大圆角，左上 + 右下 直角 */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding: var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.expertise-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.expertise-card__icon {
  width: 80px;
  height: 80px;
  /* 图标居中 */
  margin: 0 auto var(--sp-3) auto;
}
.expertise-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.expertise-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-3) 0;
  color: var(--color-text-primary);
  /* 标题居中 */
  text-align: center;
}
.expertise-card__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  /* 设计稿：描述文字与标题同蓝色 */
  color: var(--color-text-primary);
  margin: 0;
  /* 描述左对齐（与标题居中形成对比） */
  text-align: left;
}


/* =========================================================
   十三、双栏区块基础（左文右图）
   ---------------------------------------------------------
   适用：Cleanroom（深蓝主题）/ Production（浅灰+紫渐变标题）/
        Process Equipment（浅灰+紫渐变小标题）
   - 主题背景使用项目主背景色 var(--color-bg-primary)（蓝湖确认的深蓝）
   - 右侧配图：右上 + 左下 大圆角，左上 + 右下 直角
   ========================================================= */
.deep-block {
  /* 设计稿要求：Cleanroom 用项目主题深蓝 */
  background: var(--color-bg-primary);
  color: var(--color-text-on-dark);
  padding: var(--sp-7) 0;
}
/* 浅色版本（Process Equipment）：白底容器（让上下区块顺接） */
.deep-block--soft {
  background: var(--color-bg-white);
  color: var(--color-text-primary);
}

/* 单列上下布局（与 PC 端设计稿一致：图 / 文字 / 列表 顺序在 HTML 中排好）
   - banner 图整宽贴边
   - 文字内容（__copy）相对 banner 左右额外缩进，营造对比 */
.deep-block__body {
  min-width: 0;
  padding: 0;
}
/* Banner 图：贴 container 左右边缘整宽，按图片原始比例完整显示（不裁切）
   右上 + 左下 大圆角，左上 + 右下 直角 */
.deep-block__media {
  overflow: hidden;
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  box-shadow: var(--shadow-card);
  margin: 0 0 var(--sp-6) 0;
  /* 高度由图片决定，不再设 aspect-ratio */
}
.deep-block__media img {
  display: block;
  width: 100%;
  height: auto;          /* 按原始比例完整显示，不裁切 */
  object-fit: contain;   /* 保险：即便容器有高度限制也保完整 */
}
/* 文字内容容器：相对 banner 左右缩进（蓝湖：内容比 banner 窄约 8% 视口宽度） */
.deep-block__copy {
  padding: 0 8%;
}

.deep-block__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3) 0;
  /* 深蓝背景上，标题用白色（Cleanroom / Process Equipment 共用） */
  color: var(--color-text-on-dark);
}
.deep-block__intro {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text-on-dark);
  margin: 0 0 var(--sp-4) 0;
}
.deep-block--soft .deep-block__intro {
  color: var(--color-text-primary);
}

/* 普通分小节（不折叠）：Cleanroom 与 Process Equipment 都用 */
.topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topic-list__item {
  margin-bottom: var(--sp-4);
}
.topic-list__item:last-child { margin-bottom: 0; }
.topic-list__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-2) 0;
  color: var(--color-text-on-dark);
}
.deep-block--soft .topic-list__title {
  color: var(--color-text-primary);
}
.topic-list__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-on-dark);
  margin: 0;
}
.deep-block--soft .topic-list__desc {
  color: var(--color-text-primary);
}

/* Process Equipment 区块的小标题改紫色渐变（A. HVAC / B. Water / C. Compressed） */
.topic-list--purple .topic-list__title {
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* 修饰符：描述文字改半透明白
   适用于 Process Equipment Solutions —— 标题和小标题保持纯白，
   只把段落描述（intro / 小节正文）调暗到 muted-on-dark */
.deep-block--muted-desc .deep-block__intro,
.deep-block--muted-desc .topic-list__desc {
  color: var(--color-text-muted-on-dark);
}


/* =========================================================
   十四、Production Line Solutions（双栏：左折叠 + 右图）
   ---------------------------------------------------------
   设计稿：白底区块，紫色渐变文字标题 + 一组可折叠条目，
   每条 summary 右侧用 xiangyou.webp（收起）/ xiangxia.webp（展开）箭头。
   ========================================================= */
.production-block {
  padding: var(--sp-7) 0;
  background: var(--color-bg-white);
}
/* 整段单列：顶部整宽 banner → 文字内容（标题/描述/折叠列表） */
.production-block__grid {
  display: block;
}
/* Banner 图：贴 container 左右边缘整宽，按图片原始比例完整显示（不裁切）
   设计稿要求 Production Line 这张 banner 是全直角（无圆角） */
.production-block__media {
  overflow: hidden;
  border-radius: 0;
  box-shadow: var(--shadow-card);
  margin: 0 0 var(--sp-6) 0;
}
.production-block__media img {
  display: block;
  width: 100%;
  height: auto;          /* 按原始比例完整显示，不裁切 */
  object-fit: contain;
}
/* 文字内容容器：相对 banner 左右缩进 */
.production-block__copy {
  padding: 0 8%;
}
.production-block__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  /* 加宽行高 + 底部留白，避免 background-clip:text 裁掉 descender */
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-3) 0;
  /* 紫色渐变文字（颜色以 theme.css 中蓝湖标注值为准） */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.production-block__intro {
  font-size: var(--fs-lead);
  color: var(--color-text-primary);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--sp-4) 0;
}

/* 可折叠列表（仅 Production Line 用） */
.solution-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(16, 62, 144, 0.15);
}
.solution-list__item {
  border-bottom: 1px solid rgba(16, 62, 144, 0.15);
}
.solution-list__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  transition: color var(--transition-base);
}
.solution-list__item summary::-webkit-details-marker { display: none; }
/* 默认（收起）态：右向箭头 xiangyou.webp */
.solution-list__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-image: url('../images/xiangyou.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--transition-base);
}
/* 展开态：换成 xiangxia.webp（向下箭头）—— 用 details[open] 的兄弟选择器精准定位 */
.solution-list__item details[open] > summary::after {
  background-image: url('../images/xiangxia.webp');
}
.solution-list__item summary:hover { color: var(--color-accent); }

.solution-list__body {
  padding: 0 0 var(--sp-3) 0;
  font-size: var(--fs-body);
  /* 设计稿：展开项描述与标题同蓝色 */
  color: var(--color-text-primary);
  line-height: var(--lh-relaxed);
}
.solution-list__body p { margin: 0 0 var(--sp-2) 0; }
.solution-list__body p:last-child { margin-bottom: 0; }


/* =========================================================
   十四、Why Choose Us（4 列特性卡片）
   ========================================================= */
.why-choose {
  padding: var(--sp-7) 0;
  /* 整段白色背景 */
  background: var(--color-bg-white);
}
.why-choose__title {
  text-align: center;
  margin-bottom: var(--sp-6);
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* 修复：background-clip:text 在紧凑行高下会裁掉 "y" 等字母下伸部分（descender）。
     给一个稍宽的行高 + 内边距让下伸完整显示。 */
  line-height: 1.3;
  padding-bottom: 0.15em;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.why-card {
  background: var(--color-bg-card-soft);
  /* 设计稿要求：右上 + 左下 大圆角，左上 + 右下 直角 */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding: var(--sp-5) var(--sp-3);
  /* 左对齐 */
  text-align: left;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.why-card__icon {
  width: 72px;
  height: 72px;
  /* 左对齐，不再居中 */
  margin: 0 0 var(--sp-3) 0;
}
.why-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.why-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-2) 0;
  line-height: 1.3;
  text-align: left;
}
.why-card__desc {
  font-size: var(--fs-body-sm);
  /* 设计稿：描述文字蓝色 */
  color: var(--color-text-primary);
  line-height: var(--lh-relaxed);
  margin: 0;
  text-align: left;
}

/* 修饰符：图标和标题居中（equipment-engineering 页面专用）
   描述文字保持左对齐，避免短句和长句的右边参差不齐 */
.why-card--center {
  text-align: center;
}
.why-card--center .why-card__icon {
  /* 覆盖基础左对齐：图标改为水平居中 */
  margin: 0 auto var(--sp-3) auto;
}
.why-card--center .why-card__title {
  text-align: center;
}


/* =========================================================
   十五、Contact today CTA（全屏宽 + 仅右上角圆角 + 与上下无缝拼接）
   ---------------------------------------------------------
   设计稿要求：
   - 跟浏览器窗口等宽（不在 .container 内）
   - 仅右上角圆角，其它三角均直角
   - 上方与白色区块无缝拼接，下方与 footer 无缝拼接（无 margin）
   ========================================================= */
.contact-cta {
  position: relative;
  width: 100%;
  background: var(--color-bg-primary);
  /* 仅右上角圆角，其它三角直角；与 foot 无缝拼接 */
  border-radius: 0 var(--radius-xl) 0 0;
  padding: var(--sp-7) 0;
  color: var(--color-text-on-dark);
  overflow: hidden;
  /* 与上下区块无缝衔接 */
  margin: 0;
}
.contact-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contact-cta__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* 不再降低不透明度——蓝湖设计稿要求满色显示，
     左侧通过渐变蒙层（::after）压暗，保证白色文案对比度 */
  opacity: 1;
}
/* 左侧蒙层：让左半边压暗，文案清晰可读 */
.contact-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 42, 138, 0.92) 0%,
    rgba(11, 42, 138, 0.65) 45%,
    rgba(11, 42, 138, 0.2)  85%,
    rgba(11, 42, 138, 0)    100%
  );
  pointer-events: none;
}
/* 文字内容仍受 container 约束（保持页面纵向阅读节奏） */
.contact-cta__inner {
  position: relative;
  z-index: 1;
  width: var(--container-width);
  max-width: var(--container-max);
  margin: 0 auto;
}
.contact-cta__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-3) 0;
  color: var(--color-text-on-dark);
}
.contact-cta__desc {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text-on-dark);
  margin: 0 0 var(--sp-4) 0;
  max-width: 60%;
}


/* =========================================================
   十五·B、Medicines 子页：疾病分类「图文交替」卡片
   ---------------------------------------------------------
   设计稿要求（medicines.html 专用）：
   - 整段白底，多个疾病分类纵向罗列
   - 每个分类一张大卡：图片 + 浅灰底文字区
   - 奇数项图在左、文字在右；偶数项图在右、文字在左
   - 卡片左下 + 右上 大圆角，左上 + 右下 直角
   - 标题紫色渐变，正文蓝色
   ========================================================= */
.med-categories {
  padding: var(--sp-7) 0;
  background: var(--color-bg-white);
}
.med-category {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--color-bg-card-soft);
  /* 右上 + 左下 大圆角 */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-4);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.med-category:last-child { margin-bottom: 0; }
.med-category:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
/* 图片侧 */
.med-category__media {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.med-category__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.med-category:hover .med-category__media img { transform: scale(1.04); }
/* 文字侧 */
.med-category__body {
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.med-category__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-3) 0;
  /* 紫色渐变文字标题 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.med-category__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-2) 0;
}
.med-category__examples {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
  margin: var(--sp-2) 0 0 0;
}
/* 偶数项反向：图在右、文在左 */
.med-category--reverse .med-category__media { order: 2; }
.med-category--reverse .med-category__body  { order: 1; }


/* =========================================================
   十五·C、Medicines 子页：数字统计（深蓝整块 + 白色描边卡片）
   ---------------------------------------------------------
   设计稿（medicines 页面专用）：
   - 整段深蓝色大块，右上 + 左下 大圆角
   - 内部 4 张【白色细描边】独立卡片，卡片自身右上 + 左下 小圆角
   - 卡内：紫色圆形图标 + 大数字 + 小标签 + 白色描述文字
   ---------------------------------------------------------
   实现要点：
   - 外层 .stats-band 自带深蓝背景与大圆角；
   - 内层 .stats 撤销首页用的紫色渐变胶囊背景与圆角，
     让其变为纯网格容器；
   - 每个 .stats__item 改成"白色描边卡片"，覆盖默认无背景样式。
   ========================================================= */
.stats-band {
  background: var(--color-bg-primary);
  padding: var(--sp-7) 0;
  /* 右上 + 左下 大圆角（与设计稿截图一致） */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
}
/* 撤销 .stats 在 stats-band 内的紫色胶囊背景：让外层深蓝直接透出 */
.stats-band .stats {
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: var(--sp-3);
}
/* 每个统计项改造为独立白色描边卡片 */
.stats-band .stats__item {
  background: transparent;
  /* 半透明白色细描边，叠在深蓝背景上显得柔和 */
  border: 1px solid rgba(255, 255, 255, 0.35);
  /* 卡片自身右上 + 左下 小圆角，与外层方向一致 */
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  padding: var(--sp-4) var(--sp-3);
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}
.stats-band .stats__item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-4px);
}


/* =========================================================
   十五·D、Medicines 子页：Why choose us（3 列紫色圆图标卡）
   ---------------------------------------------------------
   设计稿差异点（与 what.html 的 4 列 Why 不同）：
   - 3 列等宽
   - 卡片左对齐
   - 图标为紫色圆形渐变背景 + 白色 icon
   ========================================================= */
.why-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
/* 修饰符：两行两列（equipment-engineering / automobile / new-energy 专用）
   不动 .why-grid 基础（4 列），不影响 what.html 等其他页面 */
.why-grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
}
/* 紫色圆形图标容器
   ----------------------------------------------------------
   设计稿的图标 webp 本身就是「紫色渐变圆形 + 白色线条 icon」，
   所以这里只做尺寸槽位，不再叠加紫色背景或 brightness 滤镜，
   避免视觉上变成"紫圆叠紫圆 + 白图"。
   ---------------------------------------------------------- */
.icon-circle {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  margin-bottom: var(--sp-3);
}
.icon-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* =========================================================
   十五·E、Medicines 子页：底部权威 Logo 横条
   ---------------------------------------------------------
   一行 4 个权威机构 Logo（HHS / FDA / PIC/S / EMA）
   设计稿要求：
   - 浏览器 100% 满宽的淡灰色底块
   - 仅右上角大圆角（与上方白色 expertise 无缝衔接）
   - 下边与 footbox（深蓝）无缝衔接（无 margin、padding-bottom 留克制）
   ---------------------------------------------------------
   实现：.med-logos 自身即灰底满宽容器（不再嵌套 panel），
        内部 Logo 行仍在 .container 中保持阅读节奏。
   ========================================================= */
.med-logos {
  /* 100% 满宽淡灰底 */
  width: 100%;
  background: var(--color-bg-card-soft);
  /* 仅右上大圆角，其它三角直角；与上方白色无缝拼接 */
  border-radius: 0 var(--radius-xl) 0 0;
  padding: var(--sp-5) 0;
  /* 与上下区块无缝拼接 */
  margin: 0;
}
.med-logos__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  align-items: center;
}
.med-logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.med-logos__item img {
  display: block;
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 让 logo 偏灰，避免色彩过于跳脱 */
  filter: grayscale(0.1);
  transition: filter var(--transition-base), transform var(--transition-base);
}
.med-logos__item:hover img {
  filter: grayscale(0);
  transform: scale(1.04);
}


/* =========================================================
   十五·F、Stats 区图标（直接使用自带紫圆的 webp）
   ---------------------------------------------------------
   设计稿在 Stats 数字上方放了一个紫色渐变圆形图标。
   素材 webp 本身已经是紫圆 + 白线 icon，因此这里只做尺寸槽位，
   覆盖默认 .stats__icon 的"白色化"滤镜（默认规则会把图标整体
   brightness(0) invert(1) 涂白，与紫圆素材冲突）。
   同时把整列改为左对齐，对齐设计稿。
   ========================================================= */
.stats__icon--tile {
  width: 44px;
  height: 44px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 var(--sp-2) 0;
}
.stats__icon--tile img {
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  /* 覆盖 .stats__icon img 默认的 brightness(0) invert(1)：素材本身已是白线紫底 */
  filter: none;
}
/* Stats 数字行整体左对齐（与设计稿一致：图标 + 数字 + 描述 全部左起） */
.stats-band .stats__item { text-align: left; }
.stats-band .stats__desc { margin-left: 0; max-width: 100%; }
/* 取消 stats-band 内项之间的竖线分隔（与设计稿一致：纯卡片节奏） */
.stats-band .stats__item + .stats__item::before { display: none; }


/* =========================================================
   十五·P、Automobile 子页：Our Expertise 紫色渐变 4 列大块
   ---------------------------------------------------------
   设计稿要求：
   - 浅灰段背景
   - 标题 + 副文案居中
   - 紫色渐变大面板（右上+左下大圆角）内 4 列（白色透明 icon + 白色加粗标题 +
     半透明白描述）
   ========================================================= */
.our-expertise-band {
  background: var(--color-bg-card-soft);
  padding: var(--sp-7) 0;
  text-align: center;
}
.our-expertise-band__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-2) 0;
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.our-expertise-band__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-primary);
  margin: 0 auto var(--sp-5) auto;
  max-width: 70%;
  line-height: var(--lh-relaxed);
}
.our-expertise-band__panel {
  background: var(--gradient-purple);
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding: var(--sp-6) var(--sp-4);
  box-shadow: var(--shadow-purple);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  color: var(--color-text-on-dark);
}
.our-expertise-band__col {
  text-align: center;
  padding: 0 var(--sp-2);
}
.our-expertise-band__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.our-expertise-band__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 素材是白色透明 icon，安全保险再白化一次 */
  filter: brightness(0) invert(1);
}
/* 修饰符：图标本身自带紫色圆形渐变背景（如 Ulicon_gongyinglian.png）
   不再叠加白化滤镜，避免整张图被涂白 */
.our-expertise-band__icon--has-bg img {
  filter: none;
}
.our-expertise-band__h {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text-on-dark);
  margin: 0 0 var(--sp-2) 0;
  line-height: 1.3;
}
.our-expertise-band__desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  /* 深底描述硬规则：muted-on-dark */
  color: var(--color-text-muted-on-dark);
  margin: 0;
}


/* =========================================================
   十五·Q、Automobile 子页：Key Business Model 标签切换器
   ---------------------------------------------------------
   设计稿要求：
   - 浅灰段背景 + 居中紫色渐变标题 + 蓝色副文案
   - 中部：左侧大图（圆角）+ 右侧 紫色渐变标题 + 蓝色描述
   - 下方：4 个圆形紫色 icon 在蓝色横线上，active 的图标下方有
     蓝色小三角；未 active 的图标半透明白蒙层 + 50%
   - 交互：点击 icon 切换上方 banner + 标题 + 描述 + 三角横向滑动
   ========================================================= */
.key-bm {
  background: var(--color-bg-card-soft);
  padding: var(--sp-7) 0;
}
.key-bm__head { text-align: center; margin-bottom: var(--sp-5); }
.key-bm__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-2) 0;
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.key-bm__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-primary);
  margin: 0 auto;
  max-width: 70%;
  line-height: var(--lh-relaxed);
}

/* 中部内容：banner + 文字 2 列 */
.key-bm__content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-5);
  align-items: stretch;
  margin-bottom: var(--sp-5);
}
.key-bm__media {
  overflow: hidden;
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  box-shadow: var(--shadow-card);
  position: relative;
  min-height: 320px;
}
.key-bm__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 切换时的淡入动效（由 JS 配合 .is-fading 触发） */
  transition: opacity var(--transition-base);
}
/* 切换瞬间淡出 */
.key-bm__media.is-fading img { opacity: 0; }

.key-bm__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.key-bm__h {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-3) 0;
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  /* 文字切换：上移 + 淡入（由 JS 配合 .is-swapping 触发） */
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}
.key-bm__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}
/* 切换瞬间：往下偏移 + 淡出 */
.key-bm__body.is-swapping .key-bm__h,
.key-bm__body.is-swapping .key-bm__desc {
  opacity: 0;
  transform: translateY(12px);
}

/* 标签栏 */
.key-bm__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  /* 底部留出空间承载横线 + 三角指示器：横线落在底部，三角底边贴线 */
  padding: var(--sp-3) 0 var(--sp-3);
}
/* 蓝色横线：贴在 tabs 容器底部，与三角形底边重叠
   设计要求：横线整体比 4 个图标合计宽度更宽，向两侧延伸，左右贴 container 边 */
.key-bm__tabs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-text-primary);
  z-index: 0;
}
.key-bm__tab {
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: inherit;
}
.key-bm__tab-icon {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-2) auto;
  border-radius: 50%;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.key-bm__tab-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-base);
}
/* 半透明白蒙层（默认非 active 状态） */
.key-bm__tab-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  transition: opacity var(--transition-base);
}
/* active 时撤掉蒙层、添加阴影 */
.key-bm__tab.is-active .key-bm__tab-icon {
  transform: translateY(-2px);
  box-shadow: var(--shadow-purple);
}
.key-bm__tab.is-active .key-bm__tab-icon::after {
  opacity: 0;
}
/* hover 时蒙层稍微减弱（提示可点） */
.key-bm__tab:not(.is-active):hover .key-bm__tab-icon::after {
  opacity: 0.6;
}
.key-bm__tab-label {
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  line-height: 1.3;
  transition: color var(--transition-base);
  max-width: 90%;
}
.key-bm__tab.is-active .key-bm__tab-label {
  color: var(--color-accent);
}

/* 三角形指示器：横向滑动，位置由 JS 控制 left 与宽度等分 */
.key-bm__indicator {
  position: absolute;
  /* 三角底边与横线（在 ::before bottom:0; height:2px）对齐：
     让三角形的底端正好等于横线高度 → bottom: 0; */
  bottom: 0;
  left: 0;
  width: 25%;       /* 4 列等分，与一个 tab 同宽 */
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  transition: left var(--transition-base) cubic-bezier(.4,.0,.2,1);
}
.key-bm__indicator img {
  display: block;
  width: 18px;
  height: auto;
}


/* =========================================================
   十五·R、Automobile 子页：Successful Case 左右交替
   ---------------------------------------------------------
   - 浅灰段（或白底）+ 居中紫色渐变标题
   - 2 张 case 卡片，奇数图左 / 偶数图右
   - 卡片：白底，右上 + 左下大圆角，左图右文（or 翻转）
   - 末尾居中蓝色总结段落
   ========================================================= */
.case-block {
  background: var(--color-bg-card-soft);
  padding: var(--sp-7) 0;
}
.case-block__head { text-align: center; margin-bottom: var(--sp-5); }
.case-block__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-2) 0;
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.case-block__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-primary);
  margin: 0 auto;
  max-width: 70%;
  line-height: var(--lh-relaxed);
}
.case-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--color-bg-white);
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-4);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.case-item:last-child { margin-bottom: 0; }
.case-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.case-item__media {
  overflow: hidden;
  min-height: 260px;
}
.case-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.case-item:hover .case-item__media img { transform: scale(1.04); }
.case-item__body {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-item__h {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-3) 0;
}
.case-item__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}
.case-item--reverse .case-item__media { order: 2; }
.case-item--reverse .case-item__body  { order: 1; }
/* 末尾总结段 */
.case-block__summary {
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: var(--sp-5) auto 0 auto;
  max-width: 80%;
}


/* =========================================================
   十五·M、About 子页：About us 介绍区
   ---------------------------------------------------------
   设计稿要求：
   - 白底，左右两列
   - 左：紫色渐变小标题 "About us" + 蓝色公司全称 + 蓝色大数字（年份）+ 蓝色 in 城市
   - 右：长段正文（蓝色）
   ========================================================= */
.about-intro {
  background: var(--color-bg-white);
  padding: var(--sp-7) 0;
}
.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-6);
  align-items: start;
}
.about-intro__left {
  /* 左侧标题 + 大数字 */
}
.about-intro__kicker {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-2) 0;
  /* 紫色渐变文字 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.about-intro__divider {
  width: 56px;
  height: 2px;
  background: var(--color-text-primary);
  margin: 0 0 var(--sp-3) 0;
}
.about-intro__org {
  font-family: var(--ff-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-2) 0;
}
.about-intro__year {
  font-family: var(--ff-number);
  font-size: 5.2rem;        /* 52px：突出大数字 */
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1;
  margin: 0 0 var(--sp-1) 0;
}
.about-intro__location {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  margin: 0;
}
.about-intro__body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}
.about-intro__body p { margin: 0 0 var(--sp-3) 0; }
.about-intro__body p:last-child { margin-bottom: 0; }


/* =========================================================
   十五·N、About 子页：四大主张（Our Mission / Vision / Management / Strength）
   ---------------------------------------------------------
   设计稿要求：
   - 深蓝紫色大块（背景叠加 about1.webp 走路人宇宙图，靠右）
   - 左侧 4 段（每段：白色加粗子标题 + 半透明白描述）
   - 整段右上 + 左下 大圆角
   ========================================================= */
.about-pillars {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-primary);
  /* 右上 + 左下 大圆角 */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding: var(--sp-7) 0;
  color: var(--color-text-on-dark);
}
.about-pillars__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.about-pillars__bg img {
  display: block;
  width: 100%;
  height: 100%;
  /* 图片靠右贴边，左侧让位给文案 */
  object-fit: cover;
  object-position: right center;
  opacity: 0.85;
}
/* 左侧深蓝过渡蒙层，保证文字对比度 */
.about-pillars__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 42, 138, 0.95) 0%,
    rgba(11, 42, 138, 0.70) 45%,
    rgba(11, 42, 138, 0.20) 80%,
    rgba(11, 42, 138, 0)    100%
  );
  pointer-events: none;
}
.about-pillars__inner {
  position: relative;
  z-index: 1;
  /* 文案区只占左侧 ~55%，与设计稿一致 */
  max-width: 55%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.about-pillar__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  /* 主标题保持纯白 */
  color: var(--color-text-on-dark);
  margin: 0 0 var(--sp-1) 0;
}
.about-pillar__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  /* 深蓝底描述硬规则：muted-on-dark */
  color: var(--color-text-muted-on-dark);
  margin: 0;
}
.about-pillar__desc p { margin: 0 0 var(--sp-1) 0; }
.about-pillar__desc p:last-child { margin-bottom: 0; }


/* =========================================================
   十五·O、About 子页：Join the organization
   ---------------------------------------------------------
   设计稿要求：
   - 白底，居中
   - 顶部紫色渐变小标题 "Join the organization"
   - 中间：大蓝色 SINOLVE 字（图片）+ 公司全称小字
   - 底部：3 张子公司卡片（浅灰底，右上 + 左下 大圆角，左对齐）
     每卡：彩色 LOGO + 蓝色公司名 + 蓝色描述
   ========================================================= */
.join-org {
  background: var(--color-bg-white);
  padding: var(--sp-7) 0;
  text-align: center;
}
.join-org__kicker {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-3) 0;
  /* 紫色渐变文字 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.join-org__brand {
  display: block;
  max-width: 360px;
  height: auto;
  margin: 0 auto var(--sp-2);
}
.join-org__legal {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-6) 0;
}
.join-org__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  text-align: left;
}
.join-org__card {
  background: var(--color-bg-card-soft);
  /* 右上 + 左下 大圆角 */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding: var(--sp-4) var(--sp-3);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.join-org__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.join-org__logo {
  display: block;
  max-width: 180px;
  height: 36px;
  width: auto;
  object-fit: contain;
  margin: 0 0 var(--sp-3) 0;
}
.join-org__name {
  font-family: var(--ff-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-2) 0;
}
.join-org__desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}


/* =========================================================
   十五·K、Contact Us 子页：联系方式 2 列区
   ---------------------------------------------------------
   设计稿要求：
   - 白底大段，左对齐紫色渐变标题 "Contact Sinolve"
   - 下方 2 列：Working Hours / Official Email
   - 每列：蓝色线稿 icon + 蓝色标题 + 蓝色描述
   ========================================================= */
.contact-info {
  background: var(--color-bg-white);
  padding: var(--sp-7) 0;
}
.contact-info__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-5) 0;
  /* 紫色渐变文字标题 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.contact-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.contact-info__item {
  /* 左对齐，每列内：icon → 标题 → 描述 */
  text-align: left;
}
.contact-info__icon {
  width: 56px;
  height: 56px;
  margin: 0 0 var(--sp-3) 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.contact-info__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 素材本身已是蓝色线稿，不做滤镜处理 */
}
.contact-info__h {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-3) 0;
}
.contact-info__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}
/* 邮箱链接：继承蓝色、去下划线、hover 紫色 */
.contact-info__link {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}
.contact-info__link:hover {
  color: var(--color-accent);
}


/* =========================================================
   十五·L、Contact Us 子页：Sinolve US 社交平台区
   ---------------------------------------------------------
   设计稿要求：
   - 整段带 sinolveUs.webp 浅色科技感背景图（满宽）
   - 左侧：紫色渐变标题 "Sinolve US" + 蓝色描述
   - 右侧：2 个二维码卡片（白底 + 右上 + 左下 小圆角）
     每卡片：QR 码 + 蓝色圆形社交 icon + 蓝色名称
   ========================================================= */
.sinolve-us {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--sp-7) 0;
  /* 背景图作为底图 */
  background-color: var(--color-bg-card-soft);
}
.sinolve-us__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sinolve-us__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sinolve-us__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: center;
}
/* 左侧文案 */
.sinolve-us__copy {
  max-width: 480px;
}
.sinolve-us__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-3) 0;
  /* 紫色渐变标题 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.sinolve-us__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}
/* 右侧 2 张二维码卡片 */
.sinolve-us__cards {
  display: flex;
  gap: var(--sp-3);
}
.sinolve-us__card {
  background: var(--color-bg-white);
  /* 右上 + 左下 小圆角 */
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  box-shadow: var(--shadow-card);
  text-align: center;
  width: 160px;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.sinolve-us__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.sinolve-us__qr {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: var(--sp-2);
}
.sinolve-us__social {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto var(--sp-1) auto;
}
.sinolve-us__name {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0;
}


/* =========================================================
   十五·I、Equipment & Engineering 子页：Our Expertise 紫色大面板
   ---------------------------------------------------------
   设计稿要求（equipment-engineering 页面专用）：
   - 整段浅灰背景
   - 顶部：紫色渐变文字标题 "Our Expertise" + 蓝色副文案
   - 下方：一个大型紫色渐变面板（右上 + 左下 大圆角），
     面板内 2 列（Turnkey Projects / Modular Services），
     每列：白色 icon + 白色标题 + 白色描述
   ========================================================= */
.expertise-block {
  background: var(--color-bg-card-soft);
  padding: var(--sp-7) 0;
  text-align: center;
}
.expertise-block__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-2) 0;
  /* 紫色渐变文字标题 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.expertise-block__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-primary);
  margin: 0 auto var(--sp-5) auto;
  max-width: 60%;
  line-height: var(--lh-relaxed);
}
/* 紫色渐变大面板 */
.expertise-block__panel {
  background: var(--gradient-purple);
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-purple);
  /* 内部 2 列 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  color: var(--color-text-on-dark);
}
.expertise-block__col {
  text-align: center;
  padding: 0 var(--sp-3);
}
.expertise-block__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.expertise-block__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 紫色面板上图标涂白；如果素材本身就是白色透明，仍然安全 */
  filter: brightness(0) invert(1);
}
.expertise-block__h {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-on-dark);
  margin: 0 0 var(--sp-2) 0;
}
.expertise-block__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  /* 深底描述硬规则：muted-on-dark */
  color: var(--color-text-muted-on-dark);
  margin: 0;
}


/* =========================================================
   十五·J、Equipment & Engineering 子页：信息块（左文右图 / 左图右文）
   ---------------------------------------------------------
   设计稿要求：
   - 浅灰背景大段，里面 3 个白色（或浅灰）信息块
   - 每个块：左侧文字（紫色渐变标题 + 蓝色描述 + 紫色"View All +"按钮）
     + 右侧配图（右上 + 左下 大圆角）
   - 块本身右上 + 左下 大圆角
   - 偶数块图文左右翻转
   ========================================================= */
.info-blocks {
  /* 段背景为白色（设计稿要求：只有 Our Expertise 一段是浅灰，其他段白底） */
  background: var(--color-bg-white);
  padding: var(--sp-7) 0;
}
.info-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* 卡片本身使用浅灰底（保留卡片应有的浅灰背景） */
  background: var(--color-bg-card-soft);
  /* 右上 + 左下 大圆角 */
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-4);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.info-block:last-child { margin-bottom: 0; }
.info-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
/* 文字侧 */
.info-block__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-block__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-3) 0;
  /* 紫色渐变文字 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.info-block__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-4) 0;
  /* 设计稿中部分描述较长，截断超出区域 */
  flex: 1;
}
.info-block__cta {
  align-self: flex-start;
}
/* 配图侧 */
.info-block__media {
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.info-block__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.info-block:hover .info-block__media img { transform: scale(1.04); }
/* 偶数块反向：图在左、文在右 */
.info-block--reverse .info-block__media { order: 1; }
.info-block--reverse .info-block__body  { order: 2; }

/* ---------- 原地展开（效果一）：Cleanroom / Production Line / Process Equipment ---------- */
/* 收起时按钮上移：去掉 .info-block__desc 的 flex:1 撑高，
   让标题 + 截断文字 + 按钮成为紧凑一组（由 body 的 justify-content:center 居中），
   按钮紧跟在截断文字下一行，而不是被压到卡片底部。 */
.info-block--expandable .info-block__desc { flex: 0 0 auto; }
/* 折叠区：默认收起，点击 View All 后向下展开全文。
   说明：作为 block 才能用 max-height 过渡；初始 max-height:0 + opacity:0 收起。
   展开高度由 js/global.js 按实际 scrollHeight 动态设置（适配 Production Line 这类超长内容），
   收起时再设回 0px，保证不同长度的块都能平滑展开 / 收起。 */
.info-block__more {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height var(--transition-slow),
    opacity    var(--transition-base);
}
.info-block--expandable.is-expanded .info-block__more {
  opacity: 1;
}
/* 展开态：按钮 + 号变 − 号（文字由 JS 在 View All / Show less 间切换） */
.info-block--expandable.is-expanded .info-block__toggle.btn--with-plus::after {
  content: "\2212"; /* 减号 − */
}


/* =========================================================
   十五·H、Supplement 子页：Our Business Model 板块
   ---------------------------------------------------------
   设计稿要求：
   - 整段白底 + 居中紫色渐变标题
   - 一个大型浅灰圆角面板，包含 4 条横向卡片（Trading / License /
     Investment / Consulting）
   - 每条卡片：左侧紫色圆形图标 + 右侧文字（紫色标题 + 蓝色描述）
   - 卡片之间留间距，使其在面板内呈"独立条"视觉
   ========================================================= */
/* 注意：.business-model 类同时被两种语义复用：
   1) 首页 index.html 大区块 <section class="section section--dark business-model">，需要深蓝底（由 .section--dark 提供）
   2) supplement.html 子页里的 <section class="business-model"> 独立组件，需要白底
   这里用 :not(.section--dark) 把白底限定到第二种场景，避免覆盖首页深蓝。 */
.business-model:not(.section--dark) {
  padding: var(--sp-7) 0;
  background: var(--color-bg-white);
}
.business-model__title {
  text-align: center;
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  /* 紫色渐变文字 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  line-height: 1.3;
  padding-bottom: 0.15em;
  /* 标题在 panel 内顶部居中，给下方卡片留间距 */
  margin: 0 0 var(--sp-5) 0;
}
/* 浅灰大圆角面板：仅右上大圆角，包含标题 + 4 条卡片 */
.business-model__panel {
  background: var(--color-bg-card-soft);
  /* 设计稿要求：仅右上角圆角，其它三角直角 */
  border-radius: 0 var(--radius-xl) 0 0;
  padding: var(--sp-6) var(--sp-5);
}
.business-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* 单条卡片：白底，左侧紫圆 + 右侧文案 */
.business-list__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-3);
  align-items: start;
  background: var(--color-bg-white);
  /* 卡片右上 + 左下 小圆角，与面板呼应 */
  border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}
.business-list__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.business-list__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 图标已自带紫圆渐变，这里只做槽位 */
  background: transparent;
}
.business-list__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.business-list__body {
  min-width: 0;
}
.business-list__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding-bottom: 0.15em;
  margin: 0 0 var(--sp-1) 0;
  /* 紫色渐变文字标题 */
  background-image: var(--gradient-purple-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.business-list__subtitle {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  margin: 0 0 var(--sp-2) 0;
}
.business-list__desc {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}


/* =========================================================
   十五·G、Medical Device 子页：Why choose us 横幅
   ---------------------------------------------------------
   设计稿要求（medical-device 页专属）：
   - 整段为深蓝色大块，背景叠加地球网络图（whyBack.webp 居右）
   - 左下大圆角（其它三角直角）
   - 内容：白色大标题 + 白色描述，左上对齐
   ---------------------------------------------------------
   通过修饰符 .why-banner 复用 .hero 思路（背景图绝对定位 + 蒙层）
   ========================================================= */
.why-banner {
  position: relative;
  width: 100%;
  background: var(--color-bg-primary);
  /* 基础默认：四角全直角；需要圆角的页面（medical-device / supplement /
     automobile / new-energy / equipment-engineering）通过 .why-banner--rounded
     修饰符开启「右上 + 左下」大圆角 */
  border-radius: 0;
  overflow: hidden;
  /* 不再用 padding 撑高度，让 banner 高度由背景图原比例决定 */
  padding: 0;
  color: var(--color-text-on-dark);
}
/* 修饰符：右上 + 左下 大圆角（supplement 页面专用） */
.why-banner--rounded {
  border-radius: 0 var(--radius-xl) 0 var(--radius-xl);
}
/* 背景图：宽度 100% 满 banner，高度按原比例自动 */
.why-banner__bg {
  position: relative;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  line-height: 0;          /* 去除行内图片底部空隙 */
}
.why-banner__bg img {
  display: block;
  width: 100%;
  height: auto;            /* 按原比例完整显示，不裁切 */
  object-fit: contain;     /* 保险：保持原比例 */
}
/* 左侧深蓝渐变蒙层：让左半边压暗，文案清晰可读 */
.why-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 42, 138, 0.92) 0%,
    rgba(11, 42, 138, 0.75) 40%,
    rgba(11, 42, 138, 0.30) 70%,
    rgba(11, 42, 138, 0)    100%
  );
  pointer-events: none;
}
/* 文案层：绝对定位浮在背景图上，垂直居中、左侧 container 内 */
.why-banner__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  /* 与外层 .container 已经在 HTML 上提供，这里仅做垂直居中 */
}
.why-banner__copy {
  /* 文案区只占左侧 ~46%，与设计稿一致 */
  max-width: 46%;
}
.why-banner__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3) 0;
  /* 主标题保持纯白，与 muted 描述形成主次对比 */
  color: var(--color-text-on-dark);
}
.why-banner__desc {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  /* 例外：本组件描述按蓝湖设计稿要求用纯白 #fff（设计稿标注 #FFFFFF 100%），
     不走「深蓝底描述统一半透明白」的全站硬规则。例外仅限 .why-banner，详见 CLAUDE.md。 */
  color: var(--color-text-on-dark);
  margin: 0;
}


/* =========================================================
   十六、移动端微调（≤ 800px）：what.html 专用
   ========================================================= */
@media (max-width: 800px) {
  /* 子页 Hero 移动端：
     桌面端 .hero--subpage .hero__title 是 62px（var(--fs-hero)），
     在窄屏直接复用会变成「Bridging / Chinese / Innovation / with / Global / Markets」
     这种被单词撑爆的多行展示。这里把子页主标题字号压到 2.6rem（≈26px），
     行高收紧到 1.2，让 "What we do for" 单独成第一行、剩余标题成第二行；
     同时主标题选择器（.hero--subpage .hero__title）的优先级高于通用
     .hero__title 的 2.2rem 移动端覆盖，必须显式重写。 */
  .hero { min-height: auto; }
  /* 移动端子页 Hero：留出 fixed 导航高度（var(--header-height-mobile) 80px）+ 视觉透气，
     原本 60px 会被新的 fixed 头部覆盖，故抬高到 100px。 */
  .hero--subpage { padding-top: 100px; padding-bottom: 36px; }
  .hero--subpage .hero__copy { max-width: 100%; }
  .hero--subpage .hero__title {
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: var(--sp-3);
    /* 让浏览器在词与词之间正常断行，避免单词被强行挤到下一行 */
    word-break: normal;
    overflow-wrap: break-word;
  }
  .hero--subpage .hero__desc {
    max-width: 100%;
    margin-top: var(--sp-4);
    font-size: 1.3rem;
    line-height: 1.6;
  }
  /* about 页 hero 描述文字：桌面端靠右下角占 38%，移动端还原成左对齐 100% 宽
     避免窄屏挤成一条 */
  .hero--subpage-about .hero__desc {
    max-width: 100%;
    margin-left: 0;
  }

  /* Our Expertise：单列 */
  .expertise { padding: var(--sp-5) 0; }
  .expertise__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .expertise__lead { max-width: 100%; }
  .expertise-card { border-radius: var(--radius-lg) 0 var(--radius-lg) 0; }

  /* 深蓝大块与浅灰大块：左右内边距收紧，双栏 → 单列 */
  .deep-block,
  .production-block {
    padding: var(--sp-5) 0;
  }
  .deep-block__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .deep-block__media {
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
    position: static;
    /* 移动端同样保持图片原始比例完整显示，不强制 aspect-ratio */
  }
  .production-block__media {
    border-radius: 0;   /* Production banner 全直角，移动端保持一致 */
    position: static;
  }
  .deep-block__body { padding-right: 0; }
  .deep-block__intro,
  .production-block__intro,
  .topic-list__desc { max-width: 100%; }

  /* 移动端取消文字缩进，避免内容过窄 */
  .deep-block__copy,
  .production-block__copy { padding: 0; }

  /* Expertise 卡圆角缩小（保持右上 + 左下 方向） */
  .expertise-card { border-radius: 0 var(--radius-lg) 0 var(--radius-lg); }
  /* Why 卡同样保持右上 + 左下 */
  .why-card { border-radius: 0 var(--radius-lg) 0 var(--radius-lg); }

  /* Why Choose Us：4 列 → 1 列（移动端单列，每张卡片独占一行；圆角方向由上方 .why-card 规则统一） */
  .why-grid { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Contact CTA：仅右上角圆角不变，缩小圆角半径；内边距收紧 */
  .contact-cta {
    border-radius: 0 var(--radius-lg) 0 0;
    padding: var(--sp-5) 0;
  }
  .contact-cta__desc { max-width: 100%; }

  /* ====== Medicines 子页移动端 ====== */
  .med-categories { padding: var(--sp-5) 0; }
  .med-category {
    grid-template-columns: 1fr;
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }
  .med-category__media { min-height: 200px; }
  .med-category__body { padding: var(--sp-4) var(--sp-3); }
  /* 移动端无论奇偶，都强制图在上、文在下，避免阅读颠倒 */
  .med-category--reverse .med-category__media { order: 1; }
  .med-category--reverse .med-category__body  { order: 2; }

  /* Stats 深蓝带：移动端缩小圆角与内边距；圆角方向保持右上 + 左下 */
  .stats-band {
    padding: var(--sp-5) 0;
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }
  /* 移动端 stats 内卡片：4 列 → 1 列 */
  .stats-band .stats { grid-template-columns: 1fr; gap: var(--sp-3); }
  .stats-band .stats__item {
    border-radius: 0 var(--radius-md) 0 var(--radius-md);
    padding: var(--sp-3);
  }

  /* 底部 Logo 灰底带：移动端缩小右上圆角 */
  .med-logos { border-radius: 0 var(--radius-lg) 0 0; padding: var(--sp-4) 0; }

  /* Why 3 列 → 单列 */
  .why-grid--3 { grid-template-columns: 1fr; gap: var(--sp-3); }
  /* 2x2 修饰符：移动端从 2 列变 1 列 */
  .why-grid--2x2 { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* 权威 Logo 横条：4 列 → 2 列 */
  .med-logos__row { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  /* Automobile Our Expertise：4 列 → 2 列；圆角缩小 */
  .our-expertise-band { padding: var(--sp-5) 0; }
  .our-expertise-band__lead { max-width: 100%; }
  .our-expertise-band__panel {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-3);
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }

  /* Automobile Key Business Model：左右 → 上下，4 个 tab 保持横排 */
  .key-bm { padding: var(--sp-5) 0; }
  .key-bm__lead { max-width: 100%; }
  .key-bm__content {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .key-bm__media {
    min-height: 200px;
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }
  /* 4 个 tab 保持一行平铺：grid 4 列等分；
     桌面端写的 align-items: center 会让不同 label 行数（1/2/3 行）的 tab
     垂直居中后图标位置错位 → 改为 align-items: flex-start，所有 tab 从顶部对齐，
     图标位置就一致了 */
  .key-bm__tabs { align-items: flex-start; padding: var(--sp-3) 0 var(--sp-4); }
  .key-bm__tab-icon {
    width: 44px;
    height: 44px;
    /* 给图标周围留固定 margin-bottom，防止 label 行数差异挤压图标位置 */
    margin: 0 auto var(--sp-2) auto;
    flex-shrink: 0;
  }
  .key-bm__tab-label {
    font-size: 1.1rem;     /* 11px 左右，紧凑显示 4 个长短语 */
    line-height: 1.25;
    max-width: 100%;
    /* 文字两端紧凑，允许在单词之间自然换行 */
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* 横线和三角指示器：移动端 tab 区域变高，三角偏移量按比例不变（25% 仍是 1/4 列宽） */

  /* Automobile Successful Case：左右 → 单列 + 图片在上 */
  .case-block { padding: var(--sp-5) 0; }
  .case-block__lead, .case-block__summary { max-width: 100%; }
  .case-item {
    grid-template-columns: 1fr;
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }
  .case-item__media { min-height: 180px; }
  .case-item__body { padding: var(--sp-3); }
  .case-item--reverse .case-item__media { order: 1; }
  .case-item--reverse .case-item__body  { order: 2; }

  /* About Intro：移动端左右 → 上下单列 */
  .about-intro { padding: var(--sp-5) 0; }
  .about-intro__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .about-intro__year { font-size: 4.2rem; }

  /* About Pillars：移动端文案占 100% + 蒙层加强 + 圆角缩小 */
  .about-pillars {
    padding: var(--sp-5) 0;
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }
  .about-pillars__inner { max-width: 100%; }
  .about-pillars__bg::after {
    background: linear-gradient(
      180deg,
      rgba(11, 42, 138, 0.88) 0%,
      rgba(11, 42, 138, 0.88) 100%
    );
  }

  /* Join the organization：3 列 → 单列；SINOLVE 大字缩小 */
  .join-org { padding: var(--sp-5) 0; }
  .join-org__brand { max-width: 240px; }
  .join-org__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .join-org__card { border-radius: 0 var(--radius-lg) 0 var(--radius-lg); }

  /* Contact Sinolve：移动端单列 */
  .contact-info { padding: var(--sp-5) 0; }
  .contact-info__grid { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* Sinolve US：移动端单列 + 二维码下移 */
  .sinolve-us { padding: var(--sp-5) 0; }
  .sinolve-us__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    text-align: center;
  }
  .sinolve-us__copy { max-width: 100%; }
  /* 两张二维码卡：桌面端固定 160px 在窄屏下放不下会被外层 overflow:hidden 切掉
     → 移动端改成自适应宽度（每张占容器 ~45%），并加 flex-wrap 兜底极窄屏 */
  .sinolve-us__cards {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .sinolve-us__card {
    width: calc(50% - var(--sp-2));
    max-width: 160px;
    min-width: 120px;
  }

  /* Our Expertise 紫色面板：移动端单列 + 圆角缩小 */
  .expertise-block { padding: var(--sp-5) 0; }
  .expertise-block__lead { max-width: 100%; }
  .expertise-block__panel {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-3);
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }

  /* Info Blocks：移动端单列，图在上 + 文在下 */
  .info-blocks { padding: var(--sp-5) 0; }
  .info-block {
    grid-template-columns: 1fr;
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }
  .info-block__media { min-height: 200px; }
  .info-block__body { padding: var(--sp-4) var(--sp-3); }
  .info-block--reverse .info-block__media { order: 1; }
  .info-block--reverse .info-block__body  { order: 2; }

  /* Our Business Model：移动端面板内边距收紧，卡片图标缩小 */
  .business-model { padding: var(--sp-5) 0; }
  .business-model__panel {
    padding: var(--sp-4) var(--sp-3);
    /* 移动端保持仅右上圆角，缩小半径 */
    border-radius: 0 var(--radius-lg) 0 0;
  }
  .business-model__title { margin-bottom: var(--sp-3); }
  .business-list__item {
    grid-template-columns: 48px 1fr;
    padding: var(--sp-2) var(--sp-3);
    border-radius: 0 var(--radius-md) 0 var(--radius-md);
  }
  .business-list__icon { width: 44px; height: 44px; }

  /* Why choose us 横幅：移动端基础保持四角直角；
     带 .why-banner--rounded 的页面缩小到 lg 半径 */
  .why-banner {
    /* 桌面端默认 padding:0 是让图自己撑高度；
       移动端图会被缩到很扁（如 1920×400 缩到 380px 宽只剩 ~80px 高），
       文字几乎贴边没有上下余量。改为「文字撑高 + 图作为 cover 背景」：
       给容器上下 padding 留出呼吸空间，文字静态布局自然撑高。 */
    padding: var(--sp-5) 0;
    border-radius: 0;
    /* 容器需要相对定位以承载绝对定位的背景图 */
    position: relative;
  }
  .why-banner--rounded {
    border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
  }
  /* 背景图改为绝对定位铺满整个 banner，按 cover 模式填充 */
  .why-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .why-banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 移动端覆盖桌面端的 contain */
    object-position: right center;
  }
  /* 文案层从绝对定位改为静态：让文字自然撑高容器，得到上下 padding 余量 */
  .why-banner__inner {
    position: relative;       /* 覆盖桌面端的 absolute */
    inset: auto;
    z-index: 1;
    display: block;
    align-items: initial;
  }
  .why-banner__copy { max-width: 90%; }
  /* 移动端：背景图 cover 后整体偏暗即可，蒙层覆盖整面 */
  .why-banner__bg::after {
    background: linear-gradient(
      90deg,
      rgba(11, 42, 138, 0.92) 0%,
      rgba(11, 42, 138, 0.82) 60%,
      rgba(11, 42, 138, 0.55) 100%
    );
  }
}


/* =========================================================
   十七、无障碍 & 触屏兜底
   ---------------------------------------------------------
   规则详见 CLAUDE.md「E. 移动端 hover 兜底 + reduced-motion」小节
   ========================================================= */

/* ---- 触屏 hover 兜底 ----
   触屏设备（无真 hover）上，逐条复位所有卡片 / 链接 hover 终态，
   避免 iOS/Android 上点击后 hover 状态卡住。
   只复位有"位移 / 阴影 / 缩放"的视觉动效，文字颜色等基础反馈交由系统决定。 */
@media (hover: none) {
  .bm-card:hover,
  .what-card:hover,
  .expertise-card:hover,
  .why-card:hover,
  .med-category:hover,
  .case-item:hover,
  .join-org__card:hover,
  .sinolve-us__card:hover,
  .info-block:hover,
  .business-list__item:hover,
  .stats-band .stats__item:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .bm-card:hover .bm-card__media img,
  .what-card:hover .what-card__media img,
  .med-category:hover .med-category__media img,
  .case-item:hover .case-item__media img,
  .info-block:hover .info-block__media img {
    transform: none !important;
  }
}

/* ---- 用户偏好「减少动效」全局兜底 ----
   - 几乎关闭所有 animation / transition（压到 0.01ms）
   - 配合 JS：initHeroParallax 自查 prefersReducedMotion 跳过视差；
     AOS / counter 入口在 js/global.js 检查同样的 matchMedia，必要时禁用。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   十八、逐元素强化入场（cepi.net 风格，复用 data-aos 标记）
   ---------------------------------------------------------
   背景：站内 js/aos.js 读取的是 [aos] 属性、css/aos.css 也是 [aos=...]，
        而页面元素写的是 data-aos / data-aos-delay，二者不匹配，
        导致逐元素入场实际未触发（此前只有板块级 .section--reveal 生效），
        整体入场偏弱。这里改由 js/global.js 的 initAosReveal() 用
        IntersectionObserver 自驱动，效果更强、更可控，且无需改动 HTML。
   机制：
     1) <html>.aos-ready 由 global.js 顶部 IIFE 在 body 解析前加上
        （仅在支持 IntersectionObserver 且未开启「减少动效」时），
        使 [data-aos] 元素初始即隐藏、无"先显示后隐藏"的闪烁；
        降级时不加该类，[data-aos] 保持默认可见，作为兜底。
     2) 初始态：上浮 + 轻微缩小 + 模糊；进入视口加 .aos-in 切到终态。
     3) 入场结束后 JS 移除 data-aos 属性，元素回到原生样式
        （清除过渡覆盖，避免影响按钮 / 卡片自身的 hover 过渡）。
   动效规范：时长 ≈ 0.9s、仅 transform / opacity / filter，符合 CLAUDE.md。
   ========================================================= */
.aos-ready [data-aos] {
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.9s ease;
  will-change: opacity, transform, filter;
}
/* 方向修饰（页面当前仅用 fade-up，其余为将来扩展预留） */
.aos-ready [data-aos="fade-up"]    { transform: translate3d(0, 56px, 0) scale(0.96); }
.aos-ready [data-aos="fade-down"]  { transform: translate3d(0, -56px, 0) scale(0.96); }
.aos-ready [data-aos="fade-right"] { transform: translate3d(-56px, 0, 0) scale(0.96); }
.aos-ready [data-aos="fade-left"]  { transform: translate3d(56px, 0, 0) scale(0.96); }
.aos-ready [data-aos="zoom-in"]    { transform: scale(0.84); }
/* 终态：归位、清晰（高优先级覆盖上面的初始位移与模糊） */
.aos-ready [data-aos].aos-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* 「减少动效」兜底（理论上 .aos-ready 不会被加，这里再兜一层） */
@media (prefers-reduced-motion: reduce) {
  .aos-ready [data-aos],
  .aos-ready [data-aos].aos-in {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
/* 移动端略缩时长，减少小屏拖沓感（与板块进场保持一致节奏） */
@media (max-width: 800px) {
  .aos-ready [data-aos] {
    transition:
      opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      filter 0.7s ease;
  }
  .aos-ready [data-aos="fade-up"] { transform: translate3d(0, 40px, 0) scale(0.97); }
}