/* ============================================================
   about.css — 关于我们 (浅色屏) 还原自 Figma node 1101:2523
   仅含本页专属区块；共享头/尾/浮动电话见 home.css，令牌见 tokens.css
   ============================================================ */
:root {
  --c-mist: #f0f4f4;      /* 发展历程 区块底色 */
  --c-card-line: #ededed; /* 卡片/分隔线 浅灰描边 */
  --c-teal-deep: #16afa8; /* 时间轴高亮英文名 */
}

/* 关于页正文整体落在浅底深字体系 */
.ab-page { background: var(--c-paper); color: var(--c-ink); }

/* ============ HERO (1920×800, 深底大图) ============ */
.ab-hero {
  position: relative;
  min-height: 800px;
  background: var(--c-navy);
  overflow: hidden;
}
.ab-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ab-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ab-hero-bg::after {                /* 左侧加深，保证标题可读 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,1,36,.78) 0%, rgba(0,1,36,.42) 42%, rgba(0,1,36,.05) 72%);
}
.ab-hero-inner { position: relative; z-index: 1; padding-top: 310px; }
.ab-hero-title {
  font-weight: 400;
  font-size: var(--fs-hero);        /* 72 */
  line-height: 90px;
  letter-spacing: -1.8px;
  color: var(--c-white);
}

/* ============ 关于睿尚电子 (白屏 · 左文右图) ============ */
.ab-about { padding: clamp(80px, 8.33vw, 160px) 0 clamp(80px, 8.33vw, 160px); }
.ab-about-grid {
  display: grid;
  grid-template-columns: 618fr 748fr;
  column-gap: clamp(40px, 8vw, 154px);
  align-items: start;
}
.ab-about-title {
  font-weight: 400;
  font-size: 56px;
  line-height: 1.2;
  color: var(--c-ink);
}
.ab-about-title span { display: block; color: var(--c-teal); }
.ab-about-body {
  margin-top: 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.ab-about-body p {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 20px; line-height: 1.6;
  color: var(--c-ink); opacity: .8;
}
.ab-about-body strong { font-weight: 500; }
.ab-about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 748 / 578;
  background: #eaeaea;
  /* cursor: zoom-in; */
}
.ab-about-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
.ab-about-img:hover img,
.ab-about-img:focus-within img { transform: scale(1.045); }

/* ============ 睿尚企业文化 (白屏 · 4 卡) ============ */
.ab-culture { padding: 0 0 clamp(80px, 8.33vw, 160px); }
.ab-divider {
  height: 1px; border: 0; background: var(--c-card-line);
  margin: 0 0 clamp(80px, 8.33vw, 160px);
}
.ab-culture-title {
  font-weight: 400; font-size: 48px; line-height: 1.2; color: var(--c-ink);
}
.ab-culture-sub {
  margin-top: 16px; max-width: 618px;
  font-family: var(--font-cn); font-weight: 300;
  font-size: 20px; line-height: 1.6; color: var(--c-ink); opacity: .8;
}
.ab-culture-grid {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.ab-culture-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px;
  min-height: 310px;
  padding: 33px;
  border: 1px solid var(--c-card-line);
  border-radius: 12px;
  background: var(--c-white);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ab-culture-card:hover {
  transform: translateY(-4px);
  border-color: rgba(61,200,193,.4);
  box-shadow: 0 18px 40px rgba(0,1,36,.06);
}
/* 图标盒：48px 青底圆角，内含深色字形 */
.ab-cul-icon {
  flex: none;
  width: 48px; height: 48px; border-radius: 8px;
  background: var(--c-teal);
  display: flex; align-items: center; justify-content: center;
}
.ab-cul-icon img { width: 26px; height: 26px; }
/* 第一张(公司愿景)图标 SVG 自带青底外框，直接铺满 48px */
.ab-cul-icon--img { background: transparent; }
.ab-cul-icon--img img { width: 48px; height: 48px; }
.ab-cul-meta { display: flex; flex-direction: column; gap: 20px; }
.ab-cul-meta h3 { font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--c-ink); }
.ab-cul-meta p {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 20px; line-height: 1.6; color: var(--c-ink); opacity: .8;
}

/* ============ 发展历程 (浅灰底 · 左图右时间轴) ============ */
.ab-history {
  position: relative;
  background: var(--c-mist);
  padding: 120px 0 clamp(60px, 5vw, 120px);
  overflow: hidden;
}
.ab-history-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  align-items: start;
}
.ab-history-head { max-width: 508px; }
.ab-history-title { font-weight: 400; font-size: 48px; line-height: 1.2; color: var(--c-ink); }
.ab-history-sub {
  margin-top: 16px;
  font-family: var(--font-cn); font-weight: 300;
  font-size: 20px; line-height: 1.6; color: var(--c-ink); opacity: .8;
}
/* 芯片图：贴 section 左下角，向左出血到屏幕边缘 (定位上下文=section, 不受 reveal transform 影响) */
.ab-history-img {
  position: absolute; left: 0; bottom: 24px;
  width: clamp(280px, 29.4vw, 564px);
  margin: 0;
}
.ab-history-img img { width: 100%; height: auto; }

/* 时间轴 */
.ab-tl-wrap { display: flex; flex-direction: column;position: relative; }
.ab-tl {
  position: relative;
  display: flex; flex-direction: column; gap: 80px;
  padding-top: 5px;
}
.ab-tl-wrap::before {                    /* 贯穿竖线，穿过圆点中心(left 15) */
  content: ""; position: absolute;
  left: 15px; top: 16px; bottom: 16px;
  width: 2px; 
  background: linear-gradient(180deg, #3DC8C1 87.63%, #FAFAFA 100%);
  /* background: rgba(61,200,193,.3); */
}
.ab-tl-item {
  display: flex; align-items: center; gap: 20px;
  border-radius: 12px;
  outline: none;
  cursor: default;
}
.ab-tl-node {
  position: relative; flex: none;
  width: 31px; height: 31px;
  display: grid; place-items: center;
}
/* ::before — 内芯实心圆点，始终存在 */
.ab-tl-node::before {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-teal);
  border: 4px solid #fafafa;
  transition: transform .5s ease;
}
/* ::after — 外环，常态隐藏，hover 用 scale 弹入 */
.ab-tl-node::after {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 31px; height: 31px; border-radius: 50%;
  background: transparent;
  border: 2px solid var(--c-teal);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.ab-tl-item:hover .ab-tl-node::after,
.ab-tl-item:focus .ab-tl-node::after {
  transform: translate(-50%, -50%) scale(1);
}
.ab-tl-item:hover .ab-tl-node::before,
.ab-tl-item:focus .ab-tl-node::before{
  transform: translate(-50%, -50%) scale(1.4);
}
.ab-tl-year {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 7px 17px;
  border: 1px solid rgba(61,200,193,.3);
  border-radius: 8px;
  font-family: 'Open Sans', var(--font-en); font-weight: 400;
  font-size: 18px; line-height: 28px; color: var(--c-ink);
  white-space: nowrap;
  transition: border-color .3s, color .3s;
}
.ab-tl-item:hover .ab-tl-year,
.ab-tl-item:focus .ab-tl-year { 
  border-color: rgba(61,200,193,.6); color: var(--c-teal-deep); }
.ab-tl-name {
  font-family: 'Open Sans', var(--font-en); font-weight: 600;
  font-size: 24px; line-height: 1.2; color: var(--c-ink);
  white-space: nowrap;
  transition: font-size .3s, color .3s;
}
.ab-tl-item:hover .ab-tl-name,
.ab-tl-item:focus .ab-tl-name { font-size: 30px; color: var(--c-teal-deep); }
.ab-tl-better {
  padding-top: 110px;
  padding-left: 51px;
  padding-bottom: 20px;
  font-family: 'Open Sans', var(--font-en); font-weight: 400;
  font-size: 18px; line-height: 28px; color: var(--c-grey-9c);
  position: relative;
}
/* .ab-tl-better::before{
  content: "";
  position: absolute;
  left: 16px;top:0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #3DC8C1 87.63%, #FAFAFA 100%);
} */
/* ============ 全球化服务网络 (浅底 · 点阵地图叠加) ============ */
.ab-network { padding: clamp(80px, 8.33vw, 160px) 0 0; background: var(--c-paper); }
.ab-net-stage {
  container-type: inline-size;
  position: relative;
  width: 100%; max-width: 1920px; margin-inline: auto;
  /* 画布更高(1920/1106)：地图(较高)露出更多，页脚只压住底部空白点阵，不切到据点 */
  aspect-ratio: 1920 / 1106;
}
/* 地图+地标画布：桌面铺满 stage，作为地图/连接线/地标的定位与 cqw 缩放上下文 */
.ab-net-canvas {
  position: absolute; inset: 0;
  container-type: inline-size;
}
.ab-net-map {
  position: absolute; left: 8.59%; top: 0; width: 88.54%; height: auto;
  user-select: none; pointer-events: none;
}
.ab-net-text { position: absolute; left: 10.42%; top: 22.52%; width: 32.08%; }
.ab-net-title {
  font-family: var(--font-cn); font-weight: 400;
  font-size: 26px;
  font-size: max(26px, 2.5cqw); line-height: 1.2; color: var(--c-ink);
}
.ab-net-para {
  margin-top: 24px;
  margin-top: 1.25cqw;
  font-family: var(--font-cn); font-weight: 300;
  font-size: 13px;
  font-size: max(13px, 1.04cqw); line-height: 1.6; color: var(--c-ink); opacity: .8;
}
.ab-net-btn { margin-top: 32px; margin-top: 2.6cqw; }
/* 据点标注：城市名(深) + 英文(青)，设计 48px → 2.5cqw */
.ab-net-loc {
  position: absolute;
  display: flex; align-items: baseline; gap: 8px; gap: .42cqw;
  white-space: nowrap; line-height: 1.2;
  opacity: 0;
  transform: translateY(4px);
}
.ab-net-loc b {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 18px;
  font-size: max(18px, 2.5cqw); color: var(--c-ink);
}
.ab-net-loc span {
  font-family: 'Open Sans', var(--font-en); font-weight: 300;
  font-size: 18px;
  font-size: max(18px, 2.5cqw); color: var(--c-teal);
}

/* 连接竖线 + 底部光点 */
.ab-net-line {
  position: absolute; width: 1px;
  background-color: #3DC8C1;
  transform: scaleY(0);
  transform-origin: bottom center;
}

/* ============ 动画：区块进入视口后依次 dot→线→文字→光环脉冲 ============ */
.ab-net-stage.in .ab-net-line {
  animation: abNetLineGrow .6s .3s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes abNetLineGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ::after — 底部光点，最先出现 */
.ab-net-line::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%) scale(0);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(61,200,193,.15), 0 0 12px 2px rgba(61,200,193,.55);
  opacity: 0;
}
.ab-net-stage.in .ab-net-line::after {
  animation: abNetDotIn .4s both;
}
@keyframes abNetDotIn {
  from { opacity: 0; transform: translate(-50%, 50%) scale(0); }
  to   { opacity: 1; transform: translate(-50%, 50%) scale(1); }
}

/* ::before — 光环脉冲，最后循环 */
.ab-net-line::before {
  content: ""; position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 50%) scale(0);
  width: 50px; height: 50px;
  background-color: rgba(61, 200, 193, .3);
  border-radius: 50%;
  opacity: 0;
}
.ab-net-stage.in .ab-net-line::before {
  animation: abNetPulse 2s 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes abNetPulse {
  0%, 100% { opacity: .15; transform: translate(-50%, 50%) scale(.8); }
  50%      { opacity: .55; transform: translate(-50%, 50%) scale(1.4); }
}

/* 据点标注动画 */
.ab-net-stage.in .ab-net-loc {
  animation: abNetLocIn .4s .8s both;
}
@keyframes abNetLocIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 4 个标记点错峰延迟（每个相差 0.35s） ---- */
/* 第 2 个 */
.ab-net-stage.in .ab-net-line:nth-of-type(2)            { animation-delay: .65s; }
.ab-net-stage.in .ab-net-line:nth-of-type(2)::after     { animation-delay: .35s; }
.ab-net-stage.in .ab-net-line:nth-of-type(2)::before    { animation-delay: 1.55s; }
.ab-net-stage.in .ab-net-loc:nth-of-type(2)             { animation-delay: 1.15s; }

/* 第 3 个 */
.ab-net-stage.in .ab-net-line:nth-of-type(3)            { animation-delay: 1s; }
.ab-net-stage.in .ab-net-line:nth-of-type(3)::after     { animation-delay: .7s; }
.ab-net-stage.in .ab-net-line:nth-of-type(3)::before    { animation-delay: 1.9s; }
.ab-net-stage.in .ab-net-loc:nth-of-type(3)             { animation-delay: 1.5s; }

/* 第 4 个 */
.ab-net-stage.in .ab-net-line:nth-of-type(4)            { animation-delay: 1.35s; }
.ab-net-stage.in .ab-net-line:nth-of-type(4)::after     { animation-delay: 1.05s; }
.ab-net-stage.in .ab-net-line:nth-of-type(4)::before    { animation-delay: 2.25s; }
.ab-net-stage.in .ab-net-loc:nth-of-type(4)             { animation-delay: 1.85s; }

@supports not (aspect-ratio: 1 / 1) {
  .ab-net-stage { height: 58vw; max-height: 1106px; }
  .ab-net-canvas { height: 100%; }
}

@supports not (font-size: 1cqw) {
  .ab-net-title { font-size: clamp(26px, 2.5vw, 48px); }
  .ab-net-para { font-size: clamp(13px, 1.04vw, 20px); margin-top: clamp(16px, 1.25vw, 24px); }
  .ab-net-btn { margin-top: clamp(24px, 2.6vw, 50px); }
  .ab-net-loc { gap: clamp(4px, .42vw, 8px); }
  .ab-net-loc b, .ab-net-loc span { font-size: clamp(18px, 2.5vw, 48px); }
}

/* ============ 页脚覆写：本页无地图叠压，恢复实底(保留底部青色辉光) ============ */
.ab-page .site-footer {
  margin-top: 0;
  background: var(--c-navy);
}

/* ============================================================
   响应式  ·  与首页同 5 档断点
   ============================================================ */
@media (max-width: 1280px) {
  .ab-hero { min-height: 680px; }
  .ab-hero-inner { padding-top: 240px; }
  .ab-hero-title { font-size: 60px; line-height: 1.2; }
  .ab-about-title { font-size: 44px; }
  .ab-culture-title, .ab-history-title, .ab-net-title { font-size: 38px; }
}

@media (max-width: 1024px) {
  .ab-hero { min-height: 600px; }
  /* .ab-hero-inner { padding-top: 220px; } */
  .ab-hero-title { font-size: 52px; }
  /* 关于：双列 → 堆叠(文 → 图) */
  .ab-about-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .ab-about-img { max-width: 560px; }
  /* 文化卡 4 → 2 */
  .ab-culture-grid { grid-template-columns: 1fr 1fr; }
  .ab-culture-title { font-size: 34px; }
  /* 发展历程：单列堆叠(标题/时间轴 → 芯片图)，图转静态 */
  .ab-history { display: flex; flex-direction: column; }
  .ab-history-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .ab-history-img { position: static; order: 1; width: clamp(240px, 40vw, 360px); margin-top: 24px; bottom: auto; }
  /* 网络：文案(可读)在上 → 地图+地标画布(保持 PC 叠加造型, 整体等比缩小)在下 */
  .ab-network { padding-top: 96px; }
  .ab-net-stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 24px; }
  .ab-net-text { position: static; left: auto; top: auto; width: auto; order: 1; margin: 0 var(--gutter); }
  .ab-net-title { font-size: 32px; }
  .ab-net-para { font-size: 16px; }
  .ab-net-btn { margin-top: 24px; }
  /* 画布转为常规块: 满宽 + 锁定 1920/1106 比例(与桌面一致，保证地标/连接线相对位置精确), 内部按 cqw 等比缩放 */
  .ab-net-canvas { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 1920 / 1106; }
  .ab-net-loc b, .ab-net-loc span { font-size: 18px; font-size: 2.5cqw; }   /* 纯 cqw, 与 PC 同比例 */
  .ab-net-line::after { width: 8px; height: 8px; width: 1.6cqw; height: 1.6cqw; box-shadow: 0 0 0 .8cqw rgba(61,200,193,.15), 0 0 2cqw .4cqw rgba(61,200,193,.55); }
  .ab-net-line::before { width: 50px; height: 50px; width: 8cqw; height: 8cqw; }
}

@media (max-width: 768px) {
  .ab-hero { min-height: 460px; }
  /* .ab-hero-inner { padding-top: 170px; } */
  .ab-hero-title { font-size: 38px; line-height: 1.25; }
  .ab-about { padding-top: 72px; padding-bottom: 72px; }
  .ab-about-title { font-size: 32px; }
  .ab-about-body p { font-size: 16px; }
  .ab-culture { padding-bottom: 72px; }
  .ab-culture-grid { grid-template-columns: 1fr; gap: 16px; }
  .ab-culture-card { min-height: 0; gap: 24px; padding: 28px; }
  .ab-culture-title { font-size: 30px; }
  .ab-culture-sub, .ab-cul-meta p, .ab-history-sub { font-size: 16px; }
  .ab-history { padding-top: 72px; }
  .ab-history-title { font-size: 30px; }
  /* 时间轴：名称允许换行避免被裁切 */
  .ab-tl { gap: 48px; }
  .ab-tl-better { padding-top: 48px; }
  .ab-tl-item { align-items: flex-start; }
  .ab-tl-node { margin-top: 2px; }
  .ab-tl-name { font-size: 20px; white-space: normal; }
  .ab-tl-item:hover .ab-tl-name,
  .ab-tl-item:focus .ab-tl-name { font-size: 24px; }
  .ab-net-title { font-size: 28px; }
  /* .ab-net-map{
    left: 0;
    width: 100%;
  } */
}

@media (max-width: 480px) {
  .ab-hero { min-height: 400px; }
  /* .ab-hero-inner { padding-top: 140px; } */
  .ab-hero-title { font-size: 30px; }
  .ab-about-title { font-size: 28px; }
  .ab-culture-title, .ab-history-title, .ab-net-title { font-size: 26px; }
  .ab-tl-year { font-size: 16px; padding: 2px 12px; }
  .ab-tl-name { font-size: 18px;margin-top: 6px; }
  .ab-tl-item { gap: 14px; }
  .ab-cul-icon{
    width: 38px;height: 38px;
  }
  .ab-cul-icon--img img{
    width: 100%;height: 100%;
  }
}