/* ============================================================
   首页样式合集（index.css）
   首页各区块样式统一维护在本文件，按页面顺序分节：
     1. Banner 轮播（index-banner，Figma Frame 51）
     2. 产品轮播（model-carousel，Figma「2」区块 317:8270）
     3. 出口地图（export-map，Figma GlobalPresence 183:737）
     4. 技术区块（index-tech，Figma 180:3659）
     5. 新闻区（index-news，Figma Frame 76 / 195:1169）
     6. 关于区块（index-about，Figma AboutSection 180:3702）
     7. 联系区块（index-contact，Figma Group 7 180:3719）
   顶部导航（wuling-header.css）与底部导航（wuling-footer.css）
   为共用组件，样式不并入本文件。
   ============================================================ */


/* ============ 1. Banner 轮播（原 index-banner.css 并入） ============ */

/* ============================================================
   首页 Banner 轮播（index-banner，基于项目内 Swiper 5.4.5）
   设计稿：Figma Frame 51（1920×1081，含 80px 导航）
   - 全宽背景图 + 底部 30% 黑色渐变压暗（to top, rgba(0,0,0,.3) → 0 @35.329%）
   - 左下角超大标题：Arimo SemiBold 220px@1920，全大写，行高 1，字距 2px
   - 右下角条形分页指示器（Swiper pagination，自定义 bullet 类）
   响应式约定：以 1920 为基准，水平尺寸用 %/vw，高度随视口；
   不写固定像素尺寸（字号用 clamp + vw，超宽封顶 ≈1.15×220px）。
   加载顺序：本文件须在 swiper.min.css 之后引入。
   ============================================================ */

.index-banner {
  width: 100%;
  /* banner 从屏幕顶部开始占满一屏：负 margin 把区块拉到 sticky 导航（80px）底下，
     导航以半透明白底压在图上 */
  height: 100vh;
  min-height: 320px;
  margin: -80px 0 0;
  background: #101720;
}

.index-banner-slide {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

/* 底部压暗渐变（设计稿 Container：from rgba(0,0,0,0.3) to transparent 35.329%） */
.index-banner-slide::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 35.329%);
  pointer-events: none;
}

/* 左下角大标题：220px@1920 连续缩放，44px 保底，253px（≈1.15×）封顶 */
.index-banner-title {
  position: absolute;
  left: 4.1667%; /* 80 / 1920 */
  bottom: 0;
  z-index: 2;
  margin: 0;
  font-family: var(--wuling-font-family);
  font-weight: 600;
  font-size: clamp(44px, 11.458333vw, 253px);
  line-height: 1;
  letter-spacing: 0.01em; /* 2px @220px */
  text-transform: uppercase;
  color: #fff;
}

.index-banner-title-line {
  display: block;
}

/* 分页指示器：设计稿位置在右下角（right≈120px、bottom≈34px @1920）。
   注意要用双类选择器压过 swiper.min.css 的
   .swiper-container-horizontal > .swiper-pagination-bullets（0-2-0）。 */
.index-banner .index-banner-dots {
  left: auto;
  right: 6.25%; /* 120 / 1920 */
  bottom: clamp(20px, 1.7708vw, 34px);
  width: auto;
  text-align: right;
  font-size: 0; /* 去掉 inline 间隙 */
}

/* 分页指示器：未激活为小圆点，激活为等长胶囊条（真实盒模型渲染，圆角无变形） */
.index-banner-dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin-left: 10px;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  border: 0;
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
}

.index-banner-dot:first-child {
  margin-left: 0;
}

.index-banner-dot.is-active {
  width: clamp(24px, 1.6667vw, 32px);
  border-radius: 3px; /* 高度一半，标准胶囊 */
  background-color: #fff;
}

/* 动效敏感用户：缩短过渡 */
@media (prefers-reduced-motion: reduce) {
  .index-banner-dot {
    transition: none;
  }
}


/* ============ 2. 产品轮播（原 model-carousel.css 并入） ============ */

/* ============================================================
   首页产品轮播（model-carousel，基于项目内 Swiper 5.4.5）
   设计稿：Figma「2」区块（317:8270，1920×1056）
   - 顶部分类 Tab（ALL/EV/Sedan/SUV/MPV/Commercial）+ 右侧 Explore All Models
   - 中央车型大图 1453×872，后方 280px 巨型车型名（Arimo Bold #203746）
   - 左右相邻车型露头（透明度 40%），Swiper 居中 peek 滑动
   - 底部居中：标语 Every journey, together + Explore 按钮（#c4cfda）
   响应式约定：以 1920 为基准，尺寸一律 vw/clamp/百分比，不写死固定像素。
   加载顺序：本文件须在 swiper.min.css 之后引入。
   ============================================================ */

.model-carousel {
  position: relative;
  overflow: hidden;
  padding-top: 2.8854vw; /* 55 / 1920 */
  padding-bottom: 2.9167vw; /* 56 / 1920 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 59.694%, rgba(180, 202, 232, 0.2) 100.03%), #fff;
}

/* ---------- 顶部 Tab 行（左右留白 240/1920 = 12.5%） ---------- */
.mc-tabs {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 12.5%;
}

.mc-tabs-cats {
  display: flex;
  align-items: flex-start;
}

.mc-tab {
  position: relative;
  margin-left: clamp(16px, 1.6667vw, 32px);
  padding: 0 0 0.5208vw; /* 文字到 underline 约 10px */
  border: 0;
  background: transparent;
  font-family: var(--wuling-font-family);
  font-size: clamp(12px, 0.8333vw, 18px); /* 16px @1920 */
  font-weight: 400;
  letter-spacing: 0.01em; /* 0.16px */
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  white-space: nowrap;
}

.mc-tab:first-child {
  margin-left: 0;
}

.mc-tab.is-active {
  font-weight: 500;
  color: #003876;
}

.mc-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #003876;
}

.mc-all-link {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.0417vw, 20px);
  font-family: var(--wuling-font-family);
  font-size: clamp(12px, 0.8333vw, 18px);
  font-weight: 500;
  color: #003876;
  text-decoration: none;
  white-space: nowrap;
}

.mc-all-link:hover {
  text-decoration: none;
  color: #003876;
}

/* ---------- Swiper 舞台：slide 步进 1302px（67.8125%），车内内容 1453px 宽 ---------- */
.mc-swiper {
  margin-top: 1.25vw; /* tab 行底到舞台约 24px */
}

.mc-slide {
  width: 67.8125%; /* 1302 / 1920 步进 */
  opacity: 0.4;
  transition: opacity 0.5s ease;
}

.mc-slide.swiper-slide-active {
  opacity: 1;
}

.mc-stage {
  position: relative;
  width: 111.5975%; /* 1453 / 1302 */
  margin-left: -5.7988%;
  padding-top: 60.0137%; /* 872 / 1453 宽高比 */
}

/* 巨型车型名：280px @1920，居中，压在车身后；
   切换动画对齐参考站：进场 opacity 0→1 + translateY(20px→0)，延迟 0.3s、持续 0.5s；
   退场 0.2s 淡出（Swiper 切换 slide-active 类即自动驱动，无需 JS） */
.mc-name {
  position: absolute;
  top: 10.5505%; /* 92 / 872 */
  left: 0;
  z-index: 1;
  width: 100%;
  margin: 0;
  font-family: var(--wuling-font-family);
  font-weight: 700;
  font-size: clamp(48px, 14.5833vw, 322px); /* 280px @1920，封顶 ≈1.15× */
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: #203746;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 首帧进场需等区块滚入视口（.is-inview 由 js/model-carousel.js 的 IntersectionObserver 添加） */
.model-carousel.is-inview .mc-slide.swiper-slide-active .mc-name {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .mc-name,
  .model-carousel.is-inview .mc-slide.swiper-slide-active .mc-name {
    transition: none;
  }
}

/* 车型图：统一高度、宽度随原车比例自适应（各车型车长不同，禁止拉成同宽） */
.mc-car {
  position: absolute;
  top: 3.4408%; /* 30 / 872 */
  left: 50%;
  z-index: 2;
  display: block;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
}

/* ---------- 底部居中行：标语 + Explore 按钮 ---------- */
.mc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 47.0112%; /* 902.6 / 1920 */
  margin: 0 auto;
}

.mc-tagline {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: clamp(12px, 1.0417vw, 23px); /* 20px @1920 */
  font-weight: 500;
  text-transform: uppercase;
  color: #c4cfda;
  white-space: nowrap;
}

.mc-explore {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.4167vw, 8px);
  padding: clamp(8px, 0.625vw, 12px) clamp(16px, 1.25vw, 24px) clamp(8px, 0.625vw, 12px) clamp(18px, 1.4583vw, 28px);
  background: #c4cfda;
  box-shadow: 0 2px 13.15px rgba(138, 192, 234, 0.32);
  font-family: var(--wuling-font-family);
  font-size: clamp(12px, 1.0417vw, 23px);
  text-transform: uppercase;
  letter-spacing: 0.01em; /* 0.2px */
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.mc-explore:hover {
  text-decoration: none;
  color: #fff;
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 767.98px) {
  .mc-tabs {
    margin: 0 24px;
  }

  .mc-tabs-cats {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mc-bottom {
    width: calc(100% - 48px);
  }
}


/* ============ 3. 出口地图（原 export-map.css 并入） ============ */

/* ============================================================
   出口地图模块样式（页面级，首页使用）
   底图/连线为内联 SVG，结构由 js/export-map.js 渲染。
   配色与版式按 Figma 设计稿 GlobalPresence（节点 183:737，1920×860）：
   深底 #151515、陆地统一 #343434、品牌蓝 #8ac0ea、浅色文字 #d1ecff；
   左上眉题 + 大标题、右侧数据组、底部 backdrop-blur 图例栏。
   ============================================================ */

.export-map-section {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #151515;
  height: 100vh; /* 区块整屏高，不超出一屏 */
  min-height: 480px; /* 极矮视口兜底，避免地图被压扁 */
}

/* 眉题 GLOBAL REACH：11.667px @1920，白色大写 */
.export-map-eyebrow {
  position: absolute;
  top: 2.1016vw; /* 40.37 / 1920 */
  left: 6.25%; /* 120 / 1920 */
  z-index: 2;
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: clamp(10px, 0.6076vw, 13.4px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* 标题行：大标题左 + 数据组右，基线对齐 */
.export-map-head {
  position: absolute;
  top: 4.4977vw; /* 86.37 / 1920 */
  left: 6.25%;
  right: 6.25%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none; /* 不挡地图悬停 */
}

.export-map-title {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: clamp(28px, 3.8889vw, 86px); /* 74.667px @1920 */
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}

/* 数据组：数字 52px、标签 14px 大写，均 #8ac0ea */
.export-map-stats {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 3.6458vw, 70px);
}

.export-map-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #8ac0ea;
}

.export-map-stat-num {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: clamp(22px, 2.7083vw, 60px);
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.export-map-stat-label {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: clamp(9px, 0.7292vw, 16px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 地图在整屏区块内居中：上下留白避开标题/数据组与图例栏，
   SVG 按可用高度等比缩放（宽度过限时按宽度缩放），标点不被压住 */
.export-map {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: clamp(120px, 18vh, 200px) 0 clamp(90px, 13vh, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.export-map-svg {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}

/* 底部图例栏：backdrop-blur 5px + 白 5% 底，内边距 40px 120px @1920 */
.export-map-legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4.1667vw, 80px);
  padding: clamp(14px, 2.0833vw, 40px) 6.25%;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.export-map-legend-item {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8333vw, 16px);
  font-family: var(--wuling-font-family);
  font-size: clamp(13px, 1.0417vw, 23px); /* 20px @1920 */
  letter-spacing: 0.01em;
  color: #d1ecff;
  white-space: nowrap;
}

/* HQ 图标：白色发光圆点（对应地图上的中国锚点） */
.export-map-legend-icon--hq {
  width: clamp(10px, 0.7292vw, 14px);
  height: clamp(10px, 0.7292vw, 14px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(138, 192, 234, 0.55), 0 0 10px rgba(138, 192, 234, 0.9);
}

/* Market 图标：蓝色光钉（圆环 + 下方小三角，对应地图 Market 端点） */
.export-map-legend-icon--market {
  position: relative;
  width: clamp(7px, 0.4688vw, 9px);
  height: clamp(7px, 0.4688vw, 9px);
  border: 2px solid #5aa4ff;
  border-radius: 50%;
}

.export-map-legend-icon--market::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top: 6px solid #5aa4ff;
}

/* 底图：所有国家/地区统一深色，分界线按设计稿采样 #717171（白灰色） */
.export-map-land {
  fill: #343434;
  stroke: #717171;
  stroke-width: 0.6;
}

/* 目的地国家/地区：与底图同色，由端点光钉标记 */
.export-map-dest {
  fill: #343434;
  stroke: #717171;
  stroke-width: 0.6;
  transition: fill 0.2s ease;
}

.export-map-dest:hover {
  fill: #424242;
}

/* 中国（含台湾、南海诸岛同色）：C4CFDA 30% 着色（用户按设计稿指定），柳州锚点发光标记 */
/* 不透明打底：遮蔽 Natural Earth 邻国边界伸入中国主张区域（藏南等）的线段 */
.export-map-china-base {
  fill: #343434;
  stroke: none;
}

.export-map-china {
  fill: rgba(196, 207, 218, 0.3);
  stroke: #717171;
  stroke-width: 0.6;
}

/* 连线：品牌蓝虚线流光 */
.export-map-arc {
  fill: none;
  stroke: #8ac0ea;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.export-map.is-visible .export-map-arc {
  opacity: 0.55;
  animation: export-map-flow 1.4s linear infinite;
}

@keyframes export-map-flow {
  from { stroke-dasharray: 0.03 0.07; stroke-dashoffset: 0.1; }
  to { stroke-dasharray: 0.03 0.07; stroke-dashoffset: 0; }
}

/* 目的地端点：设计稿 Market icon（#5AA4FF 带圆孔光钉） */
.export-map-dot {
  fill: #5aa4ff;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.export-map.is-visible .export-map-dot {
  opacity: 1;
  animation: export-map-pulse 2.4s ease-out infinite;
}

@keyframes export-map-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

/* 目的地名称标签（设计稿：名称常显在光钉旁） */
.export-map-label {
  font-size: 14px;
  fill: #d1ecff;
  opacity: 0;
  transition: opacity 0.4s ease;
  /* 深色描边垫底，保证文字压在陆地/连线上仍可读 */
  paint-order: stroke;
  stroke: rgba(21, 21, 21, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.export-map.is-visible .export-map-label {
  opacity: 0.92;
}

/* 中国锚点文字标注（对应设计稿 CHINA） */
.export-map-origin-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.42px;
  fill: #d1ecff;
  paint-order: stroke;
  stroke: rgba(21, 21, 21, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* 中国锚点（柳州）：浅色发光点 */
.export-map-origin {
  fill: #d1ecff;
  stroke: #8ac0ea;
  stroke-width: 2;
  filter: drop-shadow(0 0 10px rgba(138, 192, 234, 0.9));
}

/* 减少动效偏好：全部静态呈现 */
.export-map.is-static .export-map-arc,
.export-map.is-static .export-map-dot {
  opacity: 1;
  animation: none;
  transition: none;
}

.export-map.is-static .export-map-arc {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .export-map .export-map-arc,
  .export-map .export-map-dot {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  /* 小屏：改为文档流纵向堆叠（眉题→标题/数据组→地图→图例栏），
     区块高度自适应内容，避免整屏高下地图四周出现大段空白 */
  .export-map-section {
    height: auto;
    min-height: 0;
    padding: 20px 0 0;
  }

  .export-map-eyebrow {
    position: static;
    margin: 0 6.25%;
  }

  .export-map-head {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 6px 6.25% 20px;
    pointer-events: auto;
  }

  .export-map-stats {
    gap: 24px;
  }

  .export-map {
    height: auto;
    padding: 0;
    display: block;
  }

  .export-map-svg {
    width: 100%;
    height: auto;
  }

  .export-map-legend {
    position: static;
    gap: 20px;
    margin-top: 4px;
  }
}

/* 静态降级：名称标签直接可见 */
.export-map.is-static .export-map-label {
  opacity: 0.92;
}

/* 小屏：标签缩放过小不可读，仅保留光钉（名称仍可悬停/聚焦查看） */
@media (max-width: 767.98px) {
  .export-map-label,
  .export-map-origin-label {
    display: none;
  }
}

/* ============ 4. 技术轮播（index-tech，Figma 180:3659 / 180:4013 / 180:4531，1920×1082 三帧） ============
   三大技术品牌 Swiper 淡入轮播（js/index-tech.js）：
   帧1 I²MS 深底工厂图、帧2 MAGIC Battery 白底蓝字（#004192）、帧3 LING Power System 深底+脚注；
   右侧 4px 竖条为轮播进度指示，滑块随帧移动（顶 0.18% → 中 34.82% → 底 69.82%） */

.index-tech {
  position: relative;
  overflow: hidden;
  height: 56.3333vw; /* 1081.6 / 1920 */
  max-height: 100vh;
  min-height: 480px;
  background: #1a1a1a;
}

.index-tech-slides {
  position: absolute;
  inset: 0;
}

/* 三帧绝对叠放，激活帧 0.5s 交叉淡入（对齐参考站效果） */
.index-tech-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.index-tech-slide.is-active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.index-tech-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.index-tech-bg::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 帧1/帧3：深底 #1a1a1a + 图 60% 不透明 + 向左压暗渐变 */
.index-tech-slide--1,
.index-tech-slide--3 {
  background: #1a1a1a;
}

.index-tech-slide--1 .index-tech-bg,
.index-tech-slide--3 .index-tech-bg {
  opacity: 0.6;
}

.index-tech-slide--1 .index-tech-bg {
  background-image: url("../img/index_tech_bg.jpg");
}

.index-tech-slide--3 .index-tech-bg {
  background-image: url("../img/index_tech_bg3.jpg");
  background-position: left center; /* 图已按设计稿裁左半幅，靠左避免二次居中裁切 */
}

.index-tech-slide--1 .index-tech-bg::after,
.index-tech-slide--3 .index-tech-bg::after {
  background: linear-gradient(to left, rgba(32, 55, 70, 0), #1a1a1a);
}

/* 帧2：白底 + 电池图底部对齐 + 向左白色渐变，文字品牌蓝 #004192 */
.index-tech-slide--2 {
  background: #fff;
}

.index-tech-slide--2 .index-tech-bg {
  background-image: url("../img/index_tech_bg2.jpg");
  background-position: center bottom;
}

.index-tech-slide--2 .index-tech-bg::after {
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
}

.index-tech-slide--2 .index-tech-eyebrow,
.index-tech-slide--2 .index-tech-title,
.index-tech-slide--2 .index-tech-desc {
  color: #004192;
}

.index-tech-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 75%; /* 1440 / 1920 */
  display: flex;
  align-items: center;
}

.index-tech-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 95.56%; /* 1376 / 1440，右侧留给进度指示条 */
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4.1667vw, 80px);
}

.index-tech-eyebrow {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: clamp(11px, 0.7292vw, 16px); /* 14px @1920 */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #c4cfda;
}

.index-tech-eyebrow span {
  display: block;
}

.index-tech-headline {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.875vw, 36px);
}

.index-tech-title {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: max(36px, 6.6667vw); /* 128px @1920，随宽度双向缩放 */
  font-weight: 600;
  line-height: 1.05;
  color: #fff;
}

.index-tech-desc {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: max(15px, 1.6667vw); /* 32px @1920 */
  font-weight: 500;
  color: #c4cfda;
  opacity: 0.9;
}

/* 帧3 底部脚注 */
.index-tech-note {
  margin: 0;
  max-width: 38.89%; /* 560 / 1440 */
  font-family: var(--wuling-font-family);
  font-size: max(9px, 0.5208vw); /* 10px @1920 */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #c4cfda;
}

/* 文字逐项揭显：opacity + translateY(28px)，0.7s easeOut，错峰 0/100/300/500ms（对齐参考站） */
.index-tech-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.index-tech-slide.is-active .index-tech-reveal {
  /* 首帧揭显需等区块滚入视口（.is-inview 由 js/index-tech.js 的 IntersectionObserver 添加） */
  opacity: 0;
  transform: translateY(28px);
}

.index-tech.is-inview .index-tech-slide.is-active .index-tech-reveal {
  opacity: 1;
  transform: none;
}

.index-tech-reveal--d1 { transition-delay: 0.1s; }
.index-tech-reveal--d2 { transition-delay: 0.3s; }
.index-tech-reveal--d3 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .index-tech-reveal {
    transition: none;
  }
}

/* 轮播进度指示条：轨道 #1e1e1e，滑块 #c4cfda 随帧移动 */
.index-tech-track {
  position: absolute;
  right: 12.45%; /* 距右 239 / 1920 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 4px;
  height: 29.1667vw; /* 560 / 1920 */
  max-height: 52vh;
  background: #1e1e1e;
}

.index-tech-thumb {
  position: absolute;
  left: 0;
  top: 0.18%; /* 帧1：1 / 560 */
  width: 4px;
  height: 30.36%; /* 170 / 560 */
  background: #c4cfda;
  transition: top 0.7s cubic-bezier(0.22, 1, 0.36, 1); /* 对齐参考站弹簧位移 */
}

.index-tech-track.is-2 .index-tech-thumb {
  top: 34.82%; /* 帧2：195 / 560 */
}

.index-tech-track.is-3 .index-tech-thumb {
  top: 69.82%; /* 帧3：391 / 560 */
}

/* 帧2 白底下轨道用浅色，保持可见 */
.index-tech-track.is-2 {
  background: rgba(30, 30, 30, 0.15);
}

/* 可点击切换：三个透明按钮覆盖轨道三段，热区加宽到 24px */
.index-tech-jump {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 33.34%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.index-tech-jump--1 { top: 0; }
.index-tech-jump--2 { top: 33.33%; }
.index-tech-jump--3 { top: 66.66%; }

.index-tech-jump:focus-visible {
  outline: 2px solid #8ac0ea;
  outline-offset: 2px;
}

/* ============ 5. 新闻区（index-news，Figma Frame 76 / 195:1169） ============
   上半 Frame 70：1920×708 大图 + 底部渐变 + 居中 200px 大标题 / 40px 眉题；
   下半 Frame 69：#f6f8fa 底，左焦点文章（图 1108×620 + 标题/摘要），
   右侧三条新闻列表（激活条白→蓝渐变，其余 10% 黑底 20% 字，hover 15% 黑底）+ Read Article；
   点击列表项切换焦点文章（js/index-news.js，焦点图 0.3s 淡出→替换→淡入，对齐参考站 mode:"wait"） */

.index-news-hero {
  position: relative;
  overflow: hidden;
  height: 36.875vw; /* 708 / 1920 */
  min-height: 320px;
  background: url("../img/index_news_hero.jpg") center / cover no-repeat;
}

.index-news-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 15.645%, rgba(0, 0, 0, 0) 56.959%);
}

.index-news-hero-title {
  position: absolute;
  left: 50%;
  top: 44.59%; /* 315.73 / 708 */
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: max(48px, 10.4167vw); /* 200px @1920 */
  font-weight: 600;
  letter-spacing: 0.0104em;
  color: #fff;
  white-space: nowrap;
}

.index-news-hero-sub {
  position: absolute;
  left: 50%;
  top: 85.13%; /* 602.73 / 708 */
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  padding-left: 0.4167vw; /* 补偿 letter-spacing 尾部空隙保持视觉居中 */
  font-family: var(--wuling-font-family);
  font-size: max(14px, 2.0833vw); /* 40px @1920 */
  font-weight: 500;
  letter-spacing: 0.4167vw; /* 8px @1920 */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.index-news-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: clamp(20px, 2.0833vw, 40px);
  background: #f6f8fa;
}

.index-news-featured {
  flex: none;
  width: 57.7083%; /* 1108 / 1920 */
  margin: 0;
}

.index-news-featured-img {
  height: 32.2917vw; /* 620 / 1920，与右侧 .index-news-list 同高对齐（统一用 vw 避免 % 与 vw 基准不一致） */
  overflow: hidden;
}

.index-news-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease; /* 切换焦点文章：0.3s 淡出→替换→淡入（对齐参考站 mode:"wait"） */
}

.index-news-featured.is-switching .index-news-featured-img img {
  opacity: 0;
}

.index-news-featured-text {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.0833vw, 40px);
  padding: clamp(20px, 2.0833vw, 40px) 4.1667vw 0;
}

.index-news-featured-title {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: max(18px, 1.875vw); /* 36px @1920 */
  font-weight: 500;
  color: #000;
}

.index-news-featured-excerpt {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: max(12px, 0.7292vw); /* 14px @1920 */
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: #6b7280;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.index-news-side {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.index-news-list {
  display: flex;
  flex-direction: column;
  height: 32.2917vw; /* 620 / 1920，与左图同高 */
}

.index-news-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.0833vw, 40px);
  width: 100%;
  margin: 0;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: clamp(10px, 1.0417vw, 20px) clamp(16px, 2.0833vw, 40px);
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: background-color 0.3s ease; /* 对齐参考站 transition-colors */
}

.index-news-item:not(.is-active):hover {
  background: rgba(0, 0, 0, 0.15); /* 对齐参考站 hover 态 */
}

.index-news-item.is-active {
  background: linear-gradient(to right, #fff, rgba(138, 192, 234, 0.5));
  padding: clamp(16px, 2.0833vw, 40px);
}

.index-news-item-date {
  flex: none;
  width: 7.7083vw; /* 148 / 1920 */
  min-width: 96px;
  font-family: var(--wuling-font-family);
  font-size: max(14px, 1.875vw); /* 36px @1920 */
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.2);
}

.index-news-item-title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--wuling-font-family);
  font-size: max(14px, 1.6667vw); /* 32px @1920 */
  font-weight: 500;
  color: rgba(0, 0, 0, 0.2);
}

.index-news-item.is-active .index-news-item-date {
  color: #203746;
}

.index-news-item.is-active .index-news-item-title {
  color: #0a0f1a;
}

.index-news-more {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 4.1667vw;
  font-family: var(--wuling-font-family);
  font-size: max(13px, 1.25vw); /* 24px @1920 */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.index-news-more-arrow {
  font-size: max(18px, 1.875vw); /* 36px @1920 */
}

/* ============ 6. 关于区块（index-about，Figma AboutSection 180:3702，1920×781） ============
   白底，左文案列（left 240 / w 549，上下 82 留白，space-between），
   右侧形象图块（w 1052，#b4cae8 12% 打底） */

.index-about {
  position: relative;
  overflow: hidden;
  min-height: 40.7068vw; /* 781 / 1920 */
  background: #fff;
}

.index-about-text {
  position: relative;
  z-index: 1;
  margin-left: 12.5%; /* 240 / 1920 */
  width: 28.6%; /* 549 / 1920 */
  min-height: 40.7068vw;
  padding: clamp(32px, 4.2708vw, 82px) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.index-about-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8333vw, 16px);
  margin: 0 0 clamp(10px, 1.6667vw, 32px);
  font-family: var(--wuling-font-family);
  font-size: max(9px, 0.5208vw); /* 10px @1920 */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #b4cae8;
}

.index-about-eyebrow-line {
  flex: none;
  width: clamp(20px, 1.6667vw, 32px);
  height: 1px;
  background: #b4cae8;
}

.index-about-title {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: max(28px, 3.3333vw); /* 64px @1920 */
  font-weight: 500;
  color: #0a0f1a;
}

.index-about-body {
  font-family: var(--wuling-font-family);
  font-size: max(13px, 0.8333vw); /* 16px @1920 */
  color: #6b7280;
}

.index-about-body p {
  margin: 0;
}

.index-about-body p + p {
  margin-top: 1.25em;
}

.index-about-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-top: clamp(10px, 1.25vw, 24px);
  padding-bottom: 2px;
  border-bottom: 1.34px solid #0a0f1a;
  font-family: var(--wuling-font-family);
  font-size: max(10px, 0.5729vw); /* 11px @1920 */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #0a0f1a;
  text-decoration: none;
}

.index-about-img {
  position: absolute;
  right: 0;
  top: 0;
  width: 54.7917%; /* 1052 / 1920 */
  height: 100%;
  overflow: hidden;
  background: rgba(180, 202, 232, 0.12);
}

.index-about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============ 7. 联系区块（index-contact，Figma Group 7 180:3719，1920×865） ============
   生活方式背景图 + rgba(0,0,0,.3) 蒙层；居中标题 72px / 副文案 20px / 白色按钮 */

.index-contact {
  position: relative;
  overflow: hidden;
  height: 45.0651vw; /* 865.3 / 1920 */
  min-height: 380px;
  background: url("../img/index_contact_bg.jpg") center / cover no-repeat;
}

.index-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.index-contact-inner {
  position: absolute;
  left: 50%;
  top: 35.68%; /* 308.65 / 865.3 */
  transform: translateX(-50%);
  z-index: 1;
  width: 66.6667%; /* 1280 / 1920 */
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.index-contact-title {
  margin: 0;
  font-family: var(--wuling-font-family);
  font-size: max(32px, 3.75vw); /* 72px @1920 */
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}

.index-contact-desc {
  margin: clamp(12px, 1.25vw, 24px) 0 0;
  max-width: 52%; /* 640px @1920：Arimo 比设计稿 Avenir Light 略宽，单行需 555px，45%(550px) 差 5px 会折行 */
  font-family: var(--wuling-font-family);
  font-size: max(14px, 1.0417vw); /* 20px @1920 */
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}

.index-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 2.0833vw, 40px);
  padding: clamp(10px, 0.8333vw, 16px) clamp(20px, 1.6667vw, 32px);
  min-height: clamp(40px, 2.9167vw, 56px);
  background: #fff;
  font-family: var(--wuling-font-family);
  font-size: max(13px, 0.8333vw); /* 16px @1920 */
  letter-spacing: 0.01em;
  color: #000;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.index-contact-btn:hover {
  opacity: 0.88;
}

/* ============ 8. 滚动揭显动画（WOW.js + animate.css，效果对齐参考站） ============
   元素进入视口时 opacity 0→1 + 上移 28px，时长与错峰用 data-wow-duration/delay 控制；
   位移用 CSS 独立属性 translate（不覆盖元素已有的 transform 居中，如 .index-news-hero-title）；
   不支持 translate 属性的旧浏览器降级为仅透明度淡入。 */

@keyframes wuling-fade-up {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.wuling-anim-fade-up {
  animation-name: wuling-fade-up;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wow.wuling-anim-fade-up {
    animation-name: none; /* 仅保留 WOW 的显隐，不做位移淡入 */
  }
}

/* ============ 新区块小屏适配（≤767.98px） ============ */
@media (max-width: 767.98px) {
  .index-tech {
    height: 150vw; /* 竖向轮播需要固定容器高度，内容约 126vw 加余量 */
    min-height: 560px;
    max-height: 100vh;
  }

  .index-tech-slide {
    display: flex;
    align-items: center;
  }

  .index-tech-inner {
    position: relative; /* 不能 static：static 会涂在 absolute 的 .index-tech-bg 之下，文字被背景图盖住 */
    left: auto;
    top: auto;
    transform: none;
    flex: none;
    width: 100%;
    padding: 64px 6.25%;
    box-sizing: border-box;
  }

  .index-tech-note {
    max-width: 100%;
  }

  .index-tech-track {
    display: none;
  }

  .index-news-hero {
    height: 56vw;
    min-height: 220px;
  }

  .index-news-body {
    flex-direction: column;
  }

  .index-news-featured {
    width: 100%;
  }

  .index-news-featured-img {
    height: auto;
    aspect-ratio: 1108 / 620;
  }

  .index-news-featured-text {
    padding: 20px 6.25% 0;
  }

  .index-news-list {
    height: auto;
    margin-top: 24px;
  }

  .index-news-item {
    padding: 16px 6.25%;
  }

  .index-news-item-date {
    width: 30%;
  }

  .index-news-more {
    padding: 16px 6.25%;
  }

  .index-about {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .index-about-text {
    margin: 0 6.25%;
    width: auto;
    min-height: 0;
    padding: 40px 0;
  }

  .index-about-img {
    position: static;
    width: 100%;
    height: 56vw;
  }

  .index-contact {
    height: auto;
    min-height: 0;
    padding: 96px 0;
  }

  .index-contact-inner {
    position: static;
    transform: none;
    width: auto;
    margin: 0 6.25%;
    padding: 0;
  }

  .index-contact-title {
    white-space: normal;
  }

  .index-contact-desc {
    max-width: 100%;
  }
}