/* ============================================================
   home.css — 首页 (深色科技风) 还原自 Figma node 1101:2148
   ============================================================ */

/* ---------------- HERO 轮播 ---------------- */
.hero {
  position: relative;
  min-height: 960px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;   /* 设计稿: Section 底部圆角 20px */
  background: var(--c-navy);
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start;
  opacity: 0; visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-bg::after {                 /* 左侧加深，保证文字可读 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,1,36,.85) 0%, rgba(0,1,36,.35) 45%, rgba(0,1,36,0) 70%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-content { padding-top: 480px; max-width: 912px; }
/* 进入幻灯时文字轻微上浮 */
.hero-slide.is-active .hero-content > * {
  animation: heroRise .8s ease both;
}
.hero-slide.is-active .hero-tags { animation-delay: .08s; }
.hero-slide.is-active .hero-btn { animation-delay: .16s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-title {
  font-weight: 400;
  font-size: clamp(30px, calc(16px + 2.917vw), 72px);  /* 单例：首屏主标题，自有曲线不入阶梯 */
  line-height: 90px;
  letter-spacing: -1.8px;
  color: var(--c-white);
}
.hero-title--narrow { max-width: 648px; }      /* 幻灯2: 约束宽度换 2 行 */
.hero-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  margin-top: 16px;
  font-size: clamp(15px, calc(12px + 0.625vw), 24px);  /* 单例：首屏标签行，缩放比阶梯更陡 */
  line-height: 28px; letter-spacing: .75px;
  color: var(--c-white);
}
.hero-tags i { color: var(--c-grey-45); font-style: normal; font-size: var(--fs-s); font-family: var(--font-en); }
.hero-btn { margin-top: 32px; }
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  color: var(--c-white);
  letter-spacing: .4px;
  transition: all .24s ease;
}
.btn-outline:hover {
  border-color: var(--c-teal);
  background: rgba(61,200,193,.08);
  transform: translateY(-2px);
}
/* 指示器：左下角 (设计稿 x200 y850)，3 个 10px 圆点 / 间距 10px */
.hero-indicator {
  position: absolute; left: 0; right: 0; bottom: 100px; z-index: 3;
  display: flex; gap: 10px;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #414141; padding: 0;
  transition: background .3s ease, transform .3s ease;
}
.hero-dot:hover { transform: scale(1.2); }
.hero-dot.is-active { background: #d9d9d9; }

/* ---------------- 公司简介 (白色屏) ---------------- */
.intro { padding: 175px 0 120px; background: var(--c-paper); color: var(--c-ink); overflow: hidden; }
/* 顶部两列：标题(左 643px) + 标语/段落/按钮(右，左缘 = x843) */
.intro-top {
  display: grid;
  /* grid-template-columns: 643px minmax(0, 1fr); */
  grid-template-columns: 1fr; gap: 32px; 
  margin-left: var(--gutter);
  align-items: start;
}
.intro-heading { line-height: 1.2; }
.intro-heading .line-cn {
  display: block; font-size: var(--fs-l); font-weight: 400; color: var(--c-ink);
  letter-spacing: .5px;
}
.intro-heading .line-en {
  display: block;
  font-family: 'Open Sans', var(--font-en); font-size: var(--fs-l); font-weight: 400;
  color: var(--c-ink); text-transform: uppercase; letter-spacing: 1px;
}
.intro-tagline {
  font-family: var(--font-cn); font-weight: 300;
  font-size: var(--fs-l); line-height: 1.35; color: var(--c-ink); opacity: .8;
}
.intro-para {
  margin-top: 20px;
  font-family: var(--font-cn); font-weight: 300;
  font-size: var(--fs-s); line-height: 1.6; color: var(--c-ink); opacity: .8;
  max-width: 797px;
}
.intro-desc .btn { margin-top: 28px; }

/* 图片画廊：字幕(左下) + 轮播(右栏左对齐、向右溢出、可拖拽滚动) */
.intro-gallery { position: relative; margin-top: 64px; }
.intro-caption {
  /* position: absolute; left: var(--gutter); bottom: 0; z-index: 2; */
  /* max-width: 580px; */
  position: static; margin: 0 0 16px var(--gutter);
  font-size: var(--fs-s); color: var(--c-ink); opacity: .7; letter-spacing: .5px;
}

/* 视窗：左缘锁定右栏左缘(x843)，向右延伸到屏幕边；左右溢出一律裁切，
   所以任何时刻左侧不会露出，只完整显示当前位一张图 */
.intro-carousel-wrap {
  /* margin-left: calc(var(--gutter) + 643px); */
  margin-left: var(--gutter);
  overflow: hidden;
}

/* 轨道：点击切换时整体平移 */
.intro-carousel {
  position: relative;
  display: flex; gap: 24px; width: max-content;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.intro-card {
  position: relative; flex: none;
  width: 618px; aspect-ratio: 618 / 420;
  /* cursor: pointer; */
}
.intro-card--img {
  border-radius: var(--radius-lg);
  overflow: hidden; background: #04081e;
}
.intro-card--img:hover img { transform: scale(1.05); }
.intro-card--img img {
  width: 100%; height: 100%; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
  transition: transform .55s ease;
}
/* 画廊圆点指示器（仅手机滑动轮播时显示） */
.intro-dots { display: none; }
.intro-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: rgba(0, 1, 36, .2);
  transition: width .25s ease, background .25s ease;
}
.intro-dot.is-active { width: 20px; border-radius: 4px; background: var(--c-teal); }

/* ---------------- 深色面板 (合作品牌 + 网络) ---------------- */
.dark-panel {
  position: relative;
  border-radius: 20px 20px 0 0;
  background: var(--c-navy);   /* #000124 */
}

.grey-panel {
  position: relative;
  border-radius: 20px 20px 0 0;
  background: #f9f9f9;   /* #000124 */
}

/* ---------------- 合作品牌 ---------------- */
.partners { padding: 100px 0 0; }
.block-head { margin-bottom: 40px; }

/* 品牌列表：每行一张卡片，logo 与简介同行，无两栏/手风琴形态 */
.brand-list { display: flex; flex-direction: column; gap: 16px; }
.brand-item {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 32px;
  background-color: #fff;
  border-radius: 16px;
}
.brand-logo-box {
  flex: none;
  width: 200px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px;
}
.brand-logo-box a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.brand-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-desc { flex: 1 1 0; min-width: 0; }
.brand-desc p {
  font-family: var(--font-cn); font-weight: 300;
  font-size: var(--fs-s); line-height: 1.6; color: #000;
  margin-bottom: 12px;
}
.brand-desc p:last-child { margin-bottom: 0; }

/* ---------------- 全球化服务网络 (整版叠加构图) ---------------- */
/* 合作品牌 与 地图 间距(设计 ~178px)；地图底部不留白以便页脚叠压 */
.network { padding: 180px 0 0; }
.network-stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  aspect-ratio: 1920 / 940;
}
/* 地图+地标画布：桌面铺满 stage，作为地图/连接线/地标的定位与 cqw 缩放上下文 */
.network-canvas {
  position: absolute; inset: 0;
  container-type: inline-size;
}
/* 地图群组图：设计稿 x=205 w=1539 (≈10.68% / 80.16%) */
.network-mapimg {
  position: absolute;
  left: 10.68%; top: 0; width: 80.16%; height: auto;
  user-select: none; pointer-events: none;
}
/* 左上角文案块：设计稿 x=201.5 y=32 w=616 */
.network-text {
  position: absolute;
  left: 10.49%; top: 3.4%; width: 33%;
  display: flex; flex-direction: column;
}
.network-title {
  font-family: var(--font-cn); font-weight: 400;
  font-size: var(--fs-m);
  font-size: var(--fs-m); line-height: 1.2; 
  /* color: var(--c-white); */
  color: rgba(0, 1, 36, .8);
}
.network-para {
  margin-top: 24px;
  margin-top: 1.25cqw;
  font-family: var(--font-cn); font-weight: 300;
  font-size: var(--fs-xs);
  font-size: var(--fs-xs); line-height: 1.6; 
  color: rgba(0, 1, 36, .8);
}
.network-btn { margin-top: 32px; margin-top: 2.6cqw; align-self: flex-start; }

/* 连接竖线 + 底部光点 */
.net-line {
  position: absolute; width: 1px;
  background-color: #3DC8C1;
  transform: scaleY(0);
  transform-origin: bottom center;
}
/* 动画触发：区块进入视口后，依次播放 dot→线→文字→光环脉冲 */
.network-stage.in .net-line {
  animation: netLineGrow .6s .3s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes netLineGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ::after — 底部光点，最先出现 */
.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,.18), 0 0 12px 2px rgba(61,200,193,.65);
  opacity: 0;
}
.network-stage.in .net-line::after {
  animation: netDotIn .4s both;
}
@keyframes netDotIn {
  from { opacity: 0; transform: translate(-50%, 50%) scale(0); }
  to   { opacity: 1; transform: translate(-50%, 50%) scale(1); }
}

/* ::before — 光环脉冲，最后循环 */
.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;
}
.network-stage.in .net-line::before {
  animation: netPulse 2s 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes netPulse {
  0%, 100% { opacity: .15; transform: translate(-50%, 50%) scale(.8); }
  50%      { opacity: .55; transform: translate(-50%, 50%) scale(1.4); }
}

/* 据点标注：城市名(白) + 英文(青)，48px → 2.5cqw */
.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);
}
.network-stage.in .net-loc {
  animation: netLocIn .4s .8s both;
}
@keyframes netLocIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 4 个标记点错峰延迟（每个相差 0.35s） ---- */
/* 第 1 个：默认延迟，无需覆盖 */

/* 第 2 个 */
.network-stage.in .net-line:nth-of-type(2)            { animation-delay: .65s; }
.network-stage.in .net-line:nth-of-type(2)::after     { animation-delay: .35s; }
.network-stage.in .net-line:nth-of-type(2)::before    { animation-delay: 1.55s; }
.network-stage.in .net-loc:nth-of-type(2)             { animation-delay: 1.15s; }

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

/* 第 4 个 */
.network-stage.in .net-line:nth-of-type(4)            { animation-delay: 1.35s; }
.network-stage.in .net-line:nth-of-type(4)::after     { animation-delay: 1.05s; }
.network-stage.in .net-line:nth-of-type(4)::before    { animation-delay: 2.25s; }
.network-stage.in .net-loc:nth-of-type(4)             { animation-delay: 1.85s; }
.net-loc b {
  font-family: var(--font-cn); font-weight: 300;
  font-size: var(--fs-m);                 /* 兜底：不支持容器单位的浏览器 */
  font-size: clamp(11px, 2.5cqw, 26px);   /* 单例：随地图等比缩放，上限对齐 --fs-m */
  color: var(--c-ink);
}
.net-loc span {
  font-family: 'Open Sans', var(--font-en); font-weight: 300;
  font-size: var(--fs-m);
  font-size: clamp(11px, 2.5cqw, 26px);
  color: var(--c-teal);
}

@supports not (aspect-ratio: 1 / 1) {
  .network-stage { height: 49vw; max-height: 940px; }
  .network-canvas { height: 100%; }
}

@supports not (font-size: 1cqw) {
  .network-para { margin-top: clamp(16px, 1.25vw, 24px); }
  .network-btn { margin-top: clamp(24px, 2.6vw, 50px); }
  .net-loc { gap: clamp(4px, .42vw, 8px); }
}

/* ============================================================
   响应式  ·  PC(>1280) / 平板(≤1280, ≤1024) / 手机(≤768, ≤480)
   ============================================================ */

/* ---------- 小笔记本 / 大平板横屏: ≤1280 (字号收缩 + 合作品牌双列→手风琴) ---------- */
@media (max-width: 1280px) {
  .hero-title { line-height: 1.2; }
  .hero-content { padding-top: 360px; }

}

/* ---------- 平板: ≤1024 ---------- */
@media (max-width: 1024px) {
  .hero { min-height: 760px; }
  .hero-content { padding-top: 300px; }
  .hero-indicator { bottom: 72px; }
  /* 服务网络 → 竖向堆叠(文案 → 地图 → 据点卡片)，取消页脚叠压 */
  .partners { padding-bottom: 0; }
  .network { padding-top: 96px; }
  /* 文案(可读)在上 → 地图+地标画布(保持 PC 叠加造型, 整体等比缩小)在下 */
  .network-stage {
    aspect-ratio: auto; display: flex; flex-direction: column; gap: 24px;
  }
  .network-text { position: static; left: auto; top: auto; width: auto; order: 1; margin: 0 var(--gutter); }
  .network-btn { margin-top: 24px; }
  /* 画布转为常规块: 满宽 + 锁定 1920/940 比例, 内部地图/连接线/地标按 cqw 等比缩放 */
  .network-canvas { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 1920 / 940; }
  .net-line::after { width: 8px; height: 8px; width: 1.6cqw; height: 1.6cqw; box-shadow: 0 0 0 .8cqw rgba(61,200,193,.18), 0 0 2cqw .4cqw rgba(61,200,193,.6); }
  .net-line::before { width: 8cqw; height: 8cqw; }
}

/* ---------- 手机: ≤768 ---------- */
@media (max-width: 768px) {
  /* Hero */
  .hero { min-height: 600px; border-radius: 0 0 16px 16px; }
  .hero-content { padding-top: 240px; }
  .hero-title { line-height: 1.25; }
  .hero-title--narrow { max-width: 100%; }
  .hero-indicator { bottom: 48px; }
  /* 简介 */
  .intro { padding: 72px 0; }
  /* 图片画廊：手机端「原生 scroll-snap 滑动轮播 + 圆点」，左右均留 gutter(与正文一致) */
  .intro-gallery { margin-top: 28px; }
  .intro-caption { margin: 0 var(--gutter) 14px; }
  .intro-carousel-wrap {
    /* margin: 0 var(--gutter);             */
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .intro-carousel-wrap::-webkit-scrollbar { display: none; }
  /* 轨道宽度=可视区(非 max-content)，使卡片用 % 相对可视区计算，露出小段下一张作滑动提示 */
  .intro-carousel { flex-direction: row; width: 100%; gap: 14px; padding: 0; transform: none !important; }
  .intro-carousel figure[aria-hidden="true"] { display: none; }   /* 隐藏桌面无限轮播的 JS 克隆 */
  /* 轨道宽度确定(=可视区)，卡片用确定的 width 计算(避免 % flex-basis 退化为 auto)；露出 28px 下一张作滑动提示 */
  .intro-card { flex: 0 0 auto; width: calc(100% - 28px); max-width: none; scroll-snap-align: start; cursor: default; }
  .intro-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
  /* 合作品牌单列 */
  .partners { padding-top: 72px; }
  .brand-item { padding: 16px 20px; }
  /* 网络 */
  .network { padding-top: 72px; }
  /* .network-mapimg{
    left: 0;
    width: 90%;
  } */
}

/* ---------- 小手机: ≤480 ---------- */
@media (max-width: 480px) {
  .hero { min-height: 540px; }
  /* .hero-content { padding-top: 220px; } */
  .hero-tags { gap: 0 8px; }
  .intro { padding: 56px 0; }
  .brand-item{
    padding: 10px;
  }
  .brand-logo-box{
    width: 108px;height: 56px;
  }
}