/* ==========================================================================
   Taimei Endpoint Assessment (终点评估) — Product page
   Native CSS, 1440px design, dark theme, pixel-based positioning.
   重构说明：页面容器内所有绝对定位均以画布坐标（1440 设计稿）为准，
   区块间用明确的 margin/height 衔接，不再使用大范围负 margin 叠压，
   公共 header/footer 由 common/*.css 负责，本文件不再重复定义。
   ========================================================================== */

:root {
  --blue: #0A47ED;
  --dark-blue: #041884;
  --deep-blue: #000F60;
  --page-bg: #000F60;
  --cyan: #00D8E3;
  --light-blue: #5EA4FF;
  --soft-blue: #7CB1F3;
  --white: #FFFFFF;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-cn: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 装饰光晕会向视口外延伸，html+body 双层兜底禁止横向滚动 */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 不能在 body 上设置 overflow-x: hidden：html 已设置时 body 会自身
     成为滚动容器（overflow-y 计算为 auto），出现第二条垂直滚动条。 */
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* 固定 1440 画布；不裁剪：背景/光晕需延伸到视口边缘，
   横向溢出由 body 的 overflow-x: hidden 兜底 */
.page {
  position: relative;
  z-index: 0;
  width: 1440px;
  margin: 0 auto;
}

/* ==========================================================================
   背景装饰层（canvas 坐标）
   ========================================================================== */

.decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 3520px;
  z-index: 0;
  pointer-events: none;
}

.decor__blur {
  position: absolute;
  filter: blur(127px);
}

.decor__blur--a {
  top: 556px;
  left: -573px;
  width: 1728px;
  height: 530px;
  background: rgba(10, 71, 237, 0.4);
}

.decor__blur--b {
  top: 1143px;
  left: 153px;
  width: 1728px;
  height: 658px;
  background: #041884;
}

.decor__blur--c {
  top: 1237px;
  left: 1090px;
  width: 569px;
  height: 387px;
  background: var(--cyan);
}

.decor__blur--d {
  top: 2061px;
  left: 396px;
  width: 1728px;
  height: 1050px;
  background: #041884;
}

.decor__blur--e {
  top: 2138px;
  left: 410px;
  width: 909px;
  height: 433px;
  background: var(--cyan);
}

.decor__blur--f {
  top: 2629px;
  left: 1022px;
  width: 841px;
  height: 724px;
  background: rgba(10, 71, 237, 0.6);
}

.decor__blur--g {
  top: 2717px;
  left: -226px;
  width: 998px;
  height: 1100px;
  background: linear-gradient(134deg, rgba(234, 177, 254, 1) 0%, rgba(211, 86, 255, 1) 12%, rgba(22, 139, 239, 1) 79%);
}

.decor__cube {
  position: absolute;
  top: 1509px;
  left: 424px;
  width: 1034px;
  height: 600px;
}

/* ==========================================================================
   Hero（canvas y: 0 → 782）
   ========================================================================== */

.hero {
  position: relative;
  height: 782px;
  z-index: 1;
}

.hero__grad {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: linear-gradient(180deg, rgba(10, 71, 237, 1) 10%, rgba(0, 15, 96, 0) 90%);
  pointer-events: none;
}

.hero__wave {
  position: absolute;
  top: -153px;
  left: -90px;
  width: 1245px;
  height: 788px;
  opacity: 0.25;
  pointer-events: none;
}

.hero__content {
  position: absolute;
  top: 190px;
  left: 180px;
  width: 640px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero__title {
  width: 624px;
  font-size: 64px;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 54%, rgba(178, 205, 255, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__subtitle {
  width: 624px;
  font-size: 22px;
  font-weight: 700;
  line-height: 33px;
  color: var(--cyan);
}

.hero__desc {
  width: 624px;
  font-size: 18px;
  line-height: 30px;
  color: var(--soft-blue);
  white-space: pre-line;
}

.hero__features {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.hero__icons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.hero__icons img {
  width: 24px;
  height: 24px;
}

.hero__list {
  width: 540px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero__list li {
  font-size: 18px;
  line-height: 30px;
  color: var(--soft-blue);
}

.hero__media {
  position: absolute;
  top: 194px;
  left: 804px;
  width: 636px;
  height: 480px;
  object-fit: cover;
  border-radius: 20px 0 0 20px;
}

/* ==========================================================================
   区块标题 Endpoint Solutions（canvas y: 782 → 842）
   ========================================================================== */

.sec-title {
  position: relative;
  z-index: 1;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  color: var(--white);
  white-space: nowrap;
}

/* ==========================================================================
   IRC 方案（canvas y: 892 → 1492）
   三卡悬停切换：悬停卡展开为 640×600 显示详情，其余收起为 200×360；
   鼠标移出整个区块恢复默认（第一张展开）。
   卡片横向位置（canvas x）：
     is-main:     180(640) · 840(200)  · 1060(200)
     is-protocol: 180(200) · 400(640)  · 1060(200)
     is-endpoint: 180(200) · 400(200)  · 620(640)
   ========================================================================== */

.irc {
  position: relative;
  z-index: 1;
  width: 1440px;
  height: 600px;
  margin-top: 50px;
}

.irc__item {
  position: absolute;
  top: 0;
  border-radius: 20px;
  overflow: hidden;
  transition: left 0.4s ease, width 0.4s ease, height 0.4s ease, box-shadow 0.4s ease;
}

/* 卡片底色（与状态无关） */
.irc__item--main {
  background: linear-gradient(180deg, rgba(10, 71, 237, 1) 0%, rgba(6, 40, 135, 1) 100%);
}

.irc__item--purple {
  background: linear-gradient(180deg, rgba(163, 110, 255, 1) 0%, rgba(125, 57, 255, 1) 100%);
}

.irc__item--teal {
  background: linear-gradient(180deg, rgba(0, 195, 213, 1) 21%, rgba(0, 147, 163, 1) 100%);
}

/* ---- 状态一（默认）：IRC 主卡展开 ---- */
.irc.is-main .irc__item--main {
  left: 180px;
  width: 640px;
  height: 600px;
  box-shadow: 0 0 40px rgba(36, 94, 255, 0.4);
}

.irc.is-main .irc__item--purple {
  left: 840px;
  width: 200px;
  height: 360px;
  box-shadow: inset 4px 0 20px rgba(10, 71, 237, 1);
}

.irc.is-main .irc__item--teal {
  left: 1060px;
  width: 200px;
  height: 360px;
  box-shadow: none;
}

/* ---- 状态二：Protocol Optimization 展开 ---- */
.irc.is-protocol .irc__item--main {
  left: 180px;
  width: 200px;
  height: 360px;
  box-shadow: inset -4px 0 20px rgba(151, 71, 255, 0.6);
}

.irc.is-protocol .irc__item--purple {
  left: 400px;
  width: 640px;
  height: 600px;
  box-shadow: 0 0 40px rgba(234, 177, 254, 0.4);
}

.irc.is-protocol .irc__item--teal {
  left: 1060px;
  width: 200px;
  height: 360px;
  box-shadow: inset 4px 0 20px rgba(186, 156, 255, 1);
}

/* ---- 状态三：Endpoint Data 展开 ---- */
.irc.is-endpoint .irc__item--main {
  left: 180px;
  width: 200px;
  height: 360px;
  box-shadow: none;
}

.irc.is-endpoint .irc__item--purple {
  left: 400px;
  width: 200px;
  height: 360px;
  box-shadow: inset -4px 0 20px rgba(22, 244, 255, 0.4);
}

.irc.is-endpoint .irc__item--teal {
  left: 620px;
  width: 640px;
  height: 600px;
  box-shadow: 0 0 40px rgba(0, 216, 227, 0.4);
}

/* ---- 收起态 / 展开态内容层：切换时先隐藏旧内容，等尺寸过渡接近完成再淡入新内容 ---- */
.irc__fold {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.2s ease 0.25s;
}

.irc__open {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.irc__item.is-open .irc__fold {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.irc__item.is-open .irc__open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease 0.25s;
}

/* ---- 收起态内容（200×360 卡内坐标） ---- */
.irc__fold-title {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 175px;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: var(--white);
}

.irc__item--main .irc__fold-title {
  width: 162px;
}

.irc__fold-text {
  position: absolute;
  top: 115px;
  left: 20px;
  width: 175px;
  font-size: 14px;
  line-height: 22px;
  color: var(--white);
  opacity: 0.6;
  white-space: pre-line;
}

/* IRC 收起态文字为浅蓝原色（设计稿） */
.irc__item--main .irc__fold-text {
  width: 139px;
  color: var(--light-blue);
  opacity: 1;
}

.irc__item--teal .irc__fold-text {
  top: 151px;
}

.irc__fold-icon {
  position: absolute;
  top: 300px;
  left: 145px;
  width: 36px;
  height: 36px;
}

/* ---- 展开态内容（640×600 卡内坐标） ---- */
.irc__cube {
  position: absolute;
  top: 265px;
  left: 0;
  width: 577px;
  height: 335px;
}

.irc__item--main .irc__cube {
  opacity: 0.6;
}

.irc__item--purple .irc__cube {
  opacity: 1;
}

.irc__item--teal .irc__cube {
  opacity: 0.4;
}

.irc__open-title {
  position: absolute;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  color: var(--white);
}

.irc__item--main .irc__open-title {
  top: 45px;
  left: 62px;
  width: 516px;
  white-space: nowrap;
}

.irc__item--purple .irc__open-title {
  top: 45px;
  left: 72px;
  width: 497px;
}

.irc__item--teal .irc__open-title {
  top: 27px;
  left: 35px;
  width: 571px;
}

.irc__open-desc {
  position: absolute;
  top: 130px;
  left: 35px;
  width: 280px;
  font-size: 18px;
  line-height: 30px;
  color: var(--white);
}

.irc__item--teal .irc__open-desc {
  top: 158px;
}

.irc__open-text {
  position: absolute;
  top: 230px;
  left: 35px;
  width: 280px;
  font-size: 14px;
  line-height: 22px;
  color: var(--white);
}

.irc__item--main .irc__open-text {
  color: var(--light-blue);
}

.irc__item--purple .irc__open-text {
  top: 290px;
  opacity: 0.4;
}

.irc__item--teal .irc__open-text {
  top: 258px;
  opacity: 0.6;
}

.irc__open-points {
  position: absolute;
  top: 130px;
  left: 338px;
  width: 287px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.irc__item--teal .irc__open-points {
  top: 158px;
  width: 293px;
  gap: 12px;
}

.irc__open-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.irc__open-points img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.irc__open-points span {
  width: 240px;
  font-size: 14px;
  line-height: 22px;
  color: var(--white);
}

.irc__item--teal .irc__open-points span {
  width: 230px;
}

.irc__open-arrow {
  position: absolute;
  top: 530px;
  left: 577px;
  width: 36px;
  height: 36px;
}

.irc__item--purple .irc__open-arrow {
  left: 35px;
}

/* ==========================================================================
   大标题（canvas y: 1652 → 1772）
   ========================================================================== */

.value-title {
  position: relative;
  z-index: 1;
  width: 1080px;
  height: 120px;
  margin: 160px 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  color: var(--white);
}

/* ==========================================================================
   双栏图文行 duo（图与文在同一画布坐标内绝对摆放）
   ========================================================================== */

.duo {
  position: relative;
  z-index: 1;
  width: 1440px;
}

.duo__media {
  position: absolute;
  top: 0;
  width: 843px;
  height: 338px;
  opacity: 0.8;
}

.duo__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo__shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.duo__shade--navy {
  background: linear-gradient(270deg, rgba(4, 24, 132, 0) 66%, rgba(0, 15, 96, 1) 100%);
}

/* ---- 第一行：Multi-Disciplinary Scientific Excellence（左文右图） ---- */

.duo--expert {
  height: 338px;
  margin-top: 29px;
}

.duo--expert .duo__media {
  left: 597px;
  /* 向视口右边缘延伸（原 843px 正好止于画布边缘，宽屏下形成硬切线） */
  width: max(843px, calc(50vw + 123px));
  /* 设计稿双重渐隐：白色蒙版（右侧 55% 可见，向左渐隐）+ 深蓝渐变叠加 */
  -webkit-mask-image: linear-gradient(270deg, #ffffff 55%, transparent 100%);
  mask-image: linear-gradient(270deg, #ffffff 55%, transparent 100%);
}

.duo--expert .duo__title {
  position: absolute;
  top: 68px;
  left: 180px;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  color: var(--white);
}

.duo--expert .duo__desc {
  position: absolute;
  top: 128px;
  left: 180px;
  width: 640px;
  font-size: 18px;
  line-height: 30px;
  text-align: justify;
  color: var(--white);
}

/* ---- 第二行：Technological Innovation, AI Empowerment（左图右文） ---- */

.duo--ai {
  height: 486px;
  margin-top: 29px;
}

.duo--ai .duo__media {
  top: 0;
  left: 0;
  width: 1090px;
  height: 486px;
  /* 设计稿：纯白色蒙版向右渐隐（左侧 16% 内完全可见，77% 处渐隐殆尽），无深蓝遮罩 */
  -webkit-mask-image: linear-gradient(90deg, #ffffff 16%, transparent 77%);
  mask-image: linear-gradient(90deg, #ffffff 16%, transparent 77%);
}

.duo--ai .duo__title {
  position: absolute;
  top: 179px;
  left: 625px;
  width: 635px;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  text-align: right;
  white-space: nowrap;
  color: var(--white);
}

.duo--ai .duo__desc {
  position: absolute;
  top: 241px;
  left: 625px;
  width: 635px;
  font-size: 18px;
  line-height: 30px;
  color: var(--white);
}

/* ==========================================================================
   20+ 治疗领域 + 数据统计（canvas y: 2842 → 3462）
   ========================================================================== */

.expertise {
  position: relative;
  z-index: 1;
  width: 1440px;
  height: 620px;
  margin-top: 188px;
}

/* 玻璃卡通用样式 */
.expertise__areas,
.stat {
  background: rgba(4, 24, 132, 0.5);
  border-radius: 20px;
  box-shadow: inset 0 0 10px rgba(0, 216, 227, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* 治疗领域大卡（400×620） */
.expertise__areas {
  position: absolute;
  top: 0;
  left: 180px;
  width: 400px;
  height: 620px;
  overflow: hidden;
}

.expertise__wave {
  position: absolute;
  top: -249px;
  left: -99px;
  width: 992px;
  height: 628px;
}

.expertise__title {
  position: absolute;
  top: 40px;
  left: 30px;
  width: 340px;
  font-size: 32px;
  font-weight: 700;
  line-height: 48px;
  color: var(--white);
}

.expertise__list {
  position: absolute;
  top: 360px;
  width: 175px;
}

.expertise__list:first-of-type {
  left: 19px;
}

.expertise__list:last-of-type {
  left: 205px;
}

.expertise__list li {
  font-size: 18px;
  line-height: 30px;
  color: var(--white);
}

/* 统计卡（画布坐标精确摆放，互不重叠） */
.stat {
  position: absolute;
  overflow: hidden;
}

.stat--years {
  top: 0;
  left: 590px;
  width: 330px;
  height: 200px;
}

.stat--trials {
  top: 0;
  left: 930px;
  width: 330px;
  height: 200px;
}

.stat--readers {
  top: 210px;
  left: 590px;
  width: 400px;
  height: 200px;
}

.stat--support {
  top: 420px;
  left: 590px;
  width: 400px;
  height: 200px;
}

.stat--approvals {
  top: 210px;
  left: 1000px;
  width: 260px;
  height: 410px;
}

/* 统计卡内容（内部坐标已换算为卡内位置） */
.stat__bar {
  position: absolute;
  top: 33px;
  left: 20px;
  width: 2px;
  height: 63px;
  background: var(--cyan);
}

.stat__num {
  position: absolute;
  top: 20px;
  left: 37px;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.stat__unit {
  position: absolute;
  top: 44px;
  left: 70px;
  font-size: 18px;
  line-height: 30px;
  color: var(--cyan);
  white-space: nowrap;
}

.stat__label {
  position: absolute;
  top: 71px;
  left: 39px;
  font-size: 18px;
  line-height: 30px;
  color: var(--white);
  white-space: nowrap;
}

/* ==========================================================================
   底部通栏大图 band
   通过小幅度负 margin 与统计区底部 / 页脚形成设计稿中的叠压关系；
   页脚通过更高 z-index 覆盖图片下缘，图片仅在上方露出。
   ========================================================================== */

.band {
  position: relative;
  z-index: 0;
  width: 1440px;
  height: 600px;
  margin-top: -78px;
  margin-bottom: -177px;
}

.band__img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  object-fit: cover;
  /* 设计稿：白色渐变作为蒙版——顶部渐入、24% 处最清晰、向下渐隐为幽灵效果 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #ffffff 24%, rgba(255, 255, 255, 0.29) 55%, transparent 87%);
  mask-image: linear-gradient(180deg, transparent 0%, #ffffff 24%, rgba(255, 255, 255, 0.29) 55%, transparent 87%);
}

/* 页脚需覆盖 band 底部：本页自定义层级高于公共 footer 默认值 */
.page .footer {
  z-index: 2;
}

/* ==========================================================================
   窄屏 PC（980px–1439px）：修正全屏出血层的对齐
   .hero__grad / .band__img 用「left: 50% + translateX(-50%)」把 100vw 铺满
   视口，这个写法以「.page(1440px) 居中」为前提。视口窄于 1440px 时 CSS 会把
   .page 的 margin:auto 解析为 0（不产生负边距），.page 左边缘落在 0 而非居中，
   两层因此整体右移 G = 720 - 视口宽/2，左侧露出断缝。
   这里直接钉在左边缘，并清掉 translateX(-50%)——否则会被推左半个视口出屏；
   ≥1440px 不命中本规则，PC 效果不变。
   ========================================================================== */

@media (min-width: 980px) and (max-width: 1439px) {
  .hero__grad,
  .band__img {
    left: 0;
    transform: none;
  }
}