/* ==========================================================================
   Taimei About (关于我们) — About page
   Native CSS, 1440px design, pixel-based positioning.
   重构说明：公共 header/footer 由 common/*.css 负责（本文件不再定义页脚），
   排版按设计稿画布坐标对齐；时间轴行宽放宽到设计值并统一拉伸对齐。
   ========================================================================== */

:root {
  --page-width: 1440px;
  --blue: #0A47ED;
  --dark-blue: #041884;
  --deep-blue: #000F60;
  --text-dark: #3E3E3E;
  --cyan: #00D8E3;
  --light-blue: #5EA4FF;
  --gray: #97999B;
  --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 {
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background: #ffffff;
  color: var(--text-dark);
  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;
}

.page {
  position: relative;
  width: var(--page-width);
  margin: 0 auto;
}

/* ==========================================================================
   Banner（深色主视觉区，含标题、口号与视频卡）
   ========================================================================== */

.banner {
  position: relative;
  height: 1072px;
}

/* 渐变背景拉通到全视口宽度。
   注意：设计稿此渐变是极扁的椭圆（中心在底部中央，rx≈5750 / ry≈1075，
   由设计稿导出图右侧边缘多点采样反推验证），并非 MCP 转换出的 circle。
   底部全宽白色过渡正是该椭圆白色停靠区的自然结果。 */
.banner__bg {
  position: absolute;
  top: 0;
  left: calc(720px - 50vw);
  width: 100vw;
  height: 1072px;
  background: radial-gradient(
    ellipse 5750px 1075px at 50% 100%,
    rgba(255, 255, 255, 1) 12%,
    rgba(0, 147, 213, 1) 44%,
    rgba(0, 15, 96, 1) 100%
  );
}

.banner__decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1072px;
  pointer-events: none;
}

.banner__block {
  position: absolute;
  top: 0;
  left: 0.39px;
  width: 880.61px;
  height: 500px;
}

.banner__strip {
  position: absolute;
  top: 520px;
  left: 0;
  width: 1440px;
  height: 112px;
  background: linear-gradient(
    90deg,
    rgba(254, 253, 249, 0) 6%,
    rgba(254, 253, 249, 1) 40%,
    rgba(254, 253, 250, 1) 60%,
    rgba(255, 255, 255, 0) 94%
  );
  filter: blur(30px);
}

.banner__glow {
  position: absolute;
  display: block;
}

/* 注：设计稿中的两个紫色 blur 层实际为隐藏状态（设计稿导出图无任何紫色像素），不实现 */

.banner__glow--cyan {
  top: 556px;
  left: -432px;
  width: 825px;
  height: 178px;
  background: linear-gradient(180deg, rgba(0, 216, 227, 0) 4%, rgba(0, 216, 227, 1) 98%);
  filter: blur(150px);
}

.banner__glow--blue {
  top: -366px;
  left: -418px;
  width: 683px;
  height: 642px;
  background: var(--blue);
  filter: blur(112px);
}

/* S 形白色飘带（设计稿节点 285,601 / 1155x471；
   SVG 导出含 20px 高斯模糊滤镜边距，故整体左移上移 20px；
   设计稿效果 blur(1px) + 20px 白色投影，SVG 内置滤镜在 <img> 中不生效，改用 CSS filter） */
.banner__wave {
  position: absolute;
  top: 581px;
  left: 265px;
  width: 1195px;
  height: 511px;
  filter: blur(1px) drop-shadow(0 0 20px rgba(255, 255, 255, 0.9));
}

.banner__title {
  position: absolute;
  top: 206px;
  left: 368px;
  width: 705px;
  font-size: 64px;
  font-weight: 500;
  line-height: 70px;
  letter-spacing: -0.05em;
  text-align: left;
  color: var(--white);
}

.banner__subs {
  position: absolute;
  top: 349px;
  left: 222px;
  width: 997px;
  height: 160px;
  display: flex;
  justify-content: space-between;
}

.banner__sub {
  width: 480px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  color: var(--white);
  /* 设计稿玻璃卡：圆角 20px，极淡填充 + 1px 亮描边 */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  white-space: pre-line;
}

.banner__sub--left {
  padding-left: 13px;
  text-align: left;
}

.banner__sub--right {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ---- 视频卡 ---- */

.video {
  position: absolute;
  top: 704px;
  left: 240px;
  width: 960px;
  height: 540px;
  border-radius: 20px;
  overflow: hidden;
}

.video__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(10, 71, 237, 1) 0%, rgba(49, 0, 141, 1) 100%);
}

.video__poster {
  position: absolute;
  top: -1px;
  left: -76px;
  width: 1037px;
  height: 583px;
  object-fit: cover;
}

.video__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 24, 132, 0.2);
}

.video__play {
  position: absolute;
  top: 212px;
  left: 422px;
  width: 115px;
  height: 115px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(90deg);
  display: block;
  z-index: 1;
}

.video__logo {
  position: absolute;
  top: 471px;
  left: 824px;
  width: 108px;
  height: 39px;
  z-index: 1;
}

/* ==========================================================================
   Company intro（宽 960，左对齐列起点 x=240，与视频同列）
   ========================================================================== */

.intro {
  position: relative;
  width: 960px;
  margin: 210px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.intro p {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-dark);
  text-align: justify;
}

/* ==========================================================================
   Milestone（设计稿行总宽 1161 > 外层 1043，行内元素禁止压缩，
   图片卡与文字卡统一拉伸对齐，避免出现参差高度与压缩换行）
   ========================================================================== */

.milestone {
  position: relative;
  width: 1043px;
  margin: 100px auto 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.milestone__title {
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  color: var(--dark-blue);
}

.milestone__row {
  width: 1161px;
  min-width: 1161px;
  display: flex;
  align-items: stretch;
  gap: 30px;
}

.milestone__media {
  width: 440px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
}

.milestone__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.milestone__year {
  width: 103px;
  flex-shrink: 0;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  gap: 89px;
  font-size: 36px;
  font-weight: 600;
  line-height: 32px;
  text-align: center;
  color: var(--cyan);
  white-space: pre-line;
}

.milestone__body {
  width: 558px;
  flex-shrink: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  border-left: 4px solid var(--cyan);
}

.milestone__body h3 {
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  color: var(--blue);
}

.milestone__body p {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-dark);
  white-space: pre-line;
}

.milestone__body--right {
  border-left: none;
  border-right: 4px solid var(--cyan);
  align-items: flex-end;
  text-align: right;
}

/* ==========================================================================
   Compliance and Certifications（资质认证，容器 x=121 w=1198 居中）
   ========================================================================== */

.certs {
  position: relative;
  width: 1198px;
  margin: 100px auto 24px;
}

.certs__title {
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  text-align: center;
  color: var(--dark-blue);
  margin-bottom: 52px;
}

.certs__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.cert {
  position: relative;
  width: 540px;
  height: 320px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(10, 71, 237, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cert--wide {
  width: 1120px;
}

.cert__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  color: var(--blue);
  padding: 0 20px;
}

.cert__sub {
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  color: #000000;
  margin-top: 10px;
}

.cert__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 46px;
  margin-top: 26px;
}

/* 各证书 logo 按设计稿显式设定尺寸，避免按原始大图渲染溢出卡片 */
.cert__logos img[src$="cert-cdisc.svg"] {
  width: 131px;
  height: 38px;
}

.cert__logos img[src$="cert-vector.png"] {
  width: 190px;
  height: 32px;
}

.cert__logos img[src$="cert-who-1.svg"] {
  width: 138px;
  height: 52px;
}

.cert__logos img[src$="cert-who-2.svg"] {
  width: 162px;
  height: 50px;
}

.cert__logos img[src$="cert-dm.png"] {
  width: 182px;
  height: 62px;
}

.cert__logos img[src$="cert-cybervadis.svg"] {
  width: 302px;
  height: 56px;
}

.cert__logos--who {
  gap: 20px;
}

.cert__logo--truste {
  width: 80px;
  height: 85px;
  object-fit: contain;
}

/* ISO 大卡（1120×700）：标题/装饰图与 6 证书按设计稿绝对坐标摆放 */
.cert--iso {
  height: 700px;
  overflow: hidden;
  justify-content: flex-start;
}

.cert__iso-banner {
  position: absolute;
  top: 0;
  left: 520px;
  width: 611px;
  height: 296px;
  object-fit: cover;
}

.cert__iso-vector {
  position: absolute;
  top: 160px;
  left: 503px;
  width: 113px;
  height: 100px;
}

.cert--iso .cert__title {
  position: absolute;
  top: 79px;
  left: 416px;
  width: 288px;
  padding: 0;
  z-index: 1;
}

.cert__isos {
  position: absolute;
  top: 306px;
  left: 52px;
  width: 1016px;
  display: flex;
  gap: 34px;
}

.iso {
  width: 141px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iso img {
  width: 141px;
  height: 200px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.iso strong {
  font-size: 18px;
  line-height: 30px;
  color: #000000;
  text-align: center;
  margin-top: 10px;
}

.iso span {
  font-size: 12px;
  line-height: 20px;
  color: var(--gray);
  text-align: center;
}

/* ==========================================================================
   窄屏 PC（980px–1439px）：修正 Banner 背景的全屏对齐
   此时 .page（1440px）宽于视口，CSS 会把 margin:auto 解析为 0（不产生负边距），
   .page 左边缘落在 0 而非居中；上方 .banner__bg 的 left: calc(720px - 50vw)
   是按「.page 居中」推导的偏移，此时无法被抵消，会把背景整体右移、左侧露出白边。
   这里把背景直接钉在左边缘即可铺满视口；≥1440px 不命中本规则，效果不变。
   ========================================================================== */

@media (min-width: 980px) and (max-width: 1439px) {
  .banner__bg {
    left: 0;
  }
}