/* ============================================================
   ARA Cooling Solutions — index.css
   首页专属样式（深色主题：深色↔浅色交替 section） 
   ============================================================ */
.ara-hero {
  position: relative;
  background: #202022;
  color: #fff;
  padding: 5.0rem 0;
  overflow: hidden;
}
.ara-hero-inner {
  display: flex;
  align-items: center;
  gap: 56px;
  position: relative;
  z-index: 1;
}
.ara-hero-text { flex: 1 1 52%; }
.ara-hero-media { flex: 1 1 48%; display: flex; justify-content: center; align-items: center; }

.ara-hero-title {
  font-family: var(--ara-font-head);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 26px;
}
.ara-hl { color: var(--ara-sky); }
.ara-hero-desc {
  font-size: clamp(16px, 1.9vw, 20px);
  font-family: var(--ara-font-sub);
  color:#fff;
  margin-bottom: 2.5rem;
}
.ara-hero-accent {
  color: #b75136;
}
.ara-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.ara-hero-video-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
}
.ara-hero-video-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px dashed rgba(128, 194, 215, .55);
  color: var(--ara-sky);
}

.ara-hero-img {
  width: 100%;
  max-width: 620px;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, .55));
  animation: araFloat 6s ease-in-out infinite;
}
@keyframes araFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Hero 按钮（设计稿：浅蓝 #80c2d7 实底 + 深色文字） */
.ara-hero .ara-btn-sky {
  background: var(--ara-sky);
  color: #101014;
  border-color: var(--ara-sky);
}
.ara-hero .ara-btn-sky:hover {
  background: #9fd4e6;
  border-color: #9fd4e6;
  color: #101014;
  transform: translateY(-2px);
}

/* ============================================================
   2. KPI（深色底，标语左 + 8 项指标右）
   ============================================================ */
.ara-kpi {
  background: var(--ara-ink);
  color: #fff;
  padding: 54px 0 64px;
  position: relative;
}
.ara-kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 240px at 100% 50%, rgba(128, 194, 215, .12), transparent 60%);
  pointer-events: none;
}
.ara-kpi-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 1;
}
.ara-kpi-slogan {
  flex: 1 1 35%;
  font-size: clamp(22px, 3.0vw, 32px);
  line-height: 1.25;
  color: var(--ara-sky);
  font-family: var(--ara-font-head);
  font-weight: 700;
}
.ara-kpi-slogan-strong {
  color: var(--ara-sky);
  font-weight: 700;
  margin-top: 10px;
}
.ara-kpi-grid {
  flex: 1 1 65%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 30px;
}

.ara-kpi-num {
  font-family: var(--ara-font-head);
  font-weight: 600;
  font-size: clamp(16px, 2.5vw, 26px);
  color: #fff;
  line-height: 1.15;
}
.ara-kpi-label {
  line-height: 1.4;
}

/* ============================================================
   3. PAIN POINTS（浅色底，深蓝标题 + 5 张锯齿层叠卡片）
   按设计稿 1_02.jpg：蓝卡倒三角 + 灰卡正三角交替嵌合成山峰波浪
   ============================================================ */
.ara-pain {
  background: var(--ara-bg);
  padding: 5.0rem 0;
}
.ara-pain-title {
  color: var(--ara-navy);
}
.ara-pain-sub {
  font-family: var(--ara-font-sub);
  font-size: clamp(13px, 1.9vw, 20px);
  font-weight: 700;
  line-height: 1.18;
  margin-bottom: 60px;
  text-align: left;
}
.ara-pain-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}
.ara-pain-card {
  position: relative;
  flex: 0 0 24.26%;
  aspect-ratio: 209.7 / 184.3;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201%201%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%23334f8d%27%20d%3D%27M%200.47201%200.98016%20L%200.00686%200.05635%20C%200.00099%200.04470%200.00101%200.03033%200.00695%200.01869%20C%200.01287%200.00705%200.02381%20-0.00011%200.03562%20-0.00011%20L%200.96526%20-0.00011%20C%200.97708%20-0.00011%200.98802%200.00705%200.99394%200.01869%20C%200.99987%200.03033%200.99990%200.04470%200.99404%200.05635%20L%200.52888%200.98016%20C%200.52303%200.99176%200.51219%200.99890%200.50044%200.99890%20C%200.48870%200.99890%200.47786%200.99176%200.47201%200.98016%20Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
  color: #fff;
  margin-left: -7.14%;
  transition: transform .3s ease, filter .3s ease;
}
.ara-pain-card:first-child { margin-left: 0; }
.ara-pain-card:nth-child(even) {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201%201%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill%3D%27%2357595b%27%20d%3D%27M%200.52719%200.01944%20L%200.99234%200.94322%20C%200.99823%200.95490%200.99819%200.96925%200.99227%200.98089%20C%200.98632%200.99252%200.97541%200.99969%200.96358%200.99969%20L%200.03394%200.99969%20C%200.02211%200.99969%200.01120%200.99252%200.00525%200.98089%20C%20-0.00067%200.96925%20-0.00071%200.95490%200.00518%200.94322%20L%200.47033%200.01944%20C%200.47616%200.00782%200.48701%200.00068%200.49876%200.00068%20C%200.51051%200.00068%200.52135%200.00782%200.52719%200.01944%20Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%;
}
.ara-pain-card:hover {
  transform: translateY(-6px);
  filter: brightness(1.1);
}
.ara-pain-card-inner {
  position: absolute;
  top: 34.5%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20%;
  text-align: center;
}
.ara-pain-card:nth-child(even) .ara-pain-card-inner { top: 66.4%; }
.ara-pain-card h3,
.ara-pain-card p {
  font-weight: 400;
  line-height: 1.18;
  color: #fff;
}
.ara-pain-card p:empty { display: none; }

/* ============================================================
   4. ECOSYSTEM（深色底，4 张产品卡）
   ============================================================ */
.ara-eco {
  background:
    linear-gradient(180deg, #18181b 0%, var(--ara-ink) 100%);
  color: #fff;
  padding: 5.0rem 0;
}
.ara-eco-head { margin: 0 auto 60px; }
.ara-eco-head .ara-section-title { color: var(--ara-sky); }
.ara-eco-sub {
  font-size: clamp(13px, 1.85vw, 20px);
  color: #fff;
  margin-top: 1.0rem;
}
.ara-eco-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.0rem 5.0rem;;
}
.ara-eco-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  color: #fff;
  align-items: center;
  transition: all .3s ease;
}
.ara-eco-card:hover {
  transform: translateY(-6px);
}
.ara-eco-img {
  display: flex;
  align-items: center;
  justify-content: center; 
  margin-bottom: 22px;
  border-radius: 50%;
  overflow: hidden;
}
.ara-eco-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.ara-eco-title {
 font-size: clamp(15px, 2.0vw, 22px);
  color: var(--ara-sky);
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.25;
}
/* ============================================================
   5. LOCATIONS（浅色底，7 个位置带圆点）
   ============================================================ */
.ara-locations {
  background: var(--ara-bg);
  padding: 3.0rem 0;
}
.ara-locations-title {
  color: var(--ara-navy);
  margin-bottom: 2.5rem;
}
/* ============================================================
   6. GLOBAL（Designed to take the heat，浅色底，左图右文）
   ============================================================ */
.ara-global {
  background: var(--ara-bg);
  padding: 3.0rem 0;
}
.ara-global-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
.ara-global-media { flex: 1 1 50%; }
.ara-global-text  { flex: 1 1 50%; }
/* 双图错落堆叠：竖图在左、横图在右下，模拟设计稿的两图拼贴 */
.ara-global-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ara-global-img {
  width: 100%;
  border-radius: var(--ara-radius);
  box-shadow: var(--ara-shadow);
}
.ara-global .ara-section-title { color: var(--ara-navy); margin-bottom: 22px; }

.ara-global strong { color: var(--ara-navy); font-weight: 700; }

/* ============================================================
   7. TWO-PHASE（浅色底，左文右图）
   ============================================================ */
.ara-twophase {
  background: var(--ara-bg);
  padding: 3.0rem 0;
}
.ara-twophase-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
.ara-twophase-text  { width: 40%; }
.ara-twophase-media,.ara-mfg-media { flex: 1 1 52%; }
.ara-twophase-text .ara-section-title,.ara-global .ara-section-title {
  color: var(--ara-navy);
  margin-bottom: 22px;
  font-size: clamp(26px, 3.2vw, 36px);
}
.ara-twophase-text p {  
  margin-bottom: 28px;
}
/* ============================================================
   8. PREFAB（深色底，左图右文）
   ============================================================ */
.ara-prefab {
  background:
    radial-gradient(800px 400px at 0% 50%, rgba(51, 79, 141, .35), transparent 60%),
    var(--ara-ink);
  color: #fff;
  padding: 3.0rem 0;
}
.ara-prefab-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}
.ara-prefab-media { flex: 1 1 55%; }
.ara-prefab-text  { flex: 1 1 45%; }
/* 四图错落拼贴（2×2 网格） */
.ara-prefab-grid {
  display: grid;
  gap: 16px;
}
.ara-prefab-img {
  width: 90%;
  object-fit: cover;
  border-radius: var(--ara-radius);
}
.ara-prefab .ara-section-title {
  color: var(--ara-sky);
  margin-bottom: 22px;
}
.ara-prefab-text p,.ara-mfg-text p ,.ara-finalcta-text p,.ara-ind-d2c-text p,.ara-twophase-text p,.ara-global .ara-section-title + p{
  font-size: clamp(13px, 1.5vw, 20px); 
  margin-bottom: 1.5rem;
}
/* ============================================================
   9. MANUFACTURING（浅色底，左图右文）
   ============================================================ */
.ara-mfg {
  background: var(--ara-bg);
  padding: 3.0rem 0;
}
.ara-mfg-inner {
  display: flex;
  align-items: center;
  gap: 60px;
}

.ara-mfg-text  { width: 45%; }

.ara-mfg .ara-section-title {
  color: var(--ara-navy);
  margin-bottom: 22px;
  font-size: clamp(26px, 3.2vw, 36px);
}
.ara-mfg-text p,.ara-ind-d2c-text p {
  color: var(--ara-ink-soft);
}

/* ============================================================
   10. INDUSTRIES（ARA in Action + 4 行业，浅色底）
   ============================================================ */
.ara-industries {
  background: var(--ara-bg);
  padding-bottom: 5.0rem;
}

/* Direct to Chip 居中竖版（标题 → 浏览器风格视频轮播 → 说明） */
.ara-ind-d2c {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 860px;          /* 加大以容纳外部大箭头 */
  margin: 0 auto 3.0rem;
}
.ara-ind-d2c .ara-section-title {
  color: var(--ara-navy);
  margin-bottom: 2.5rem;
}

/* 媒体区：左大箭头 + 浏览器窗口 + 右大箭头，flex 居中 */
.ara-ind-d2c-media {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* 浏览器风格窗口：白底 + 深色描边 + 圆角 + 阴影 */
.ara-video-frame {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 2px solid #1a1a1c;
  border-radius: 18px;
  overflow: hidden;
}
/* 顶栏：右侧 3 个空心圆点（macOS 窗口控制点） */
.ara-video-frame-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 36px;
  padding: 0 18px;
  background: #f4f4f8;
  border-bottom: 2px solid #1a1a1c;
}
.ara-video-frame-dots {
  display: flex;
  gap: 8px;
}
.ara-video-frame-dots span {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #1a1a1c;
  background: transparent;
}

/* swiper 视频区：按 PDF 视频框 562:442 比例 */
.ara-d2c-swiper {
  width: 100%;
  aspect-ratio: auto;
  overflow: hidden;
}

/* D2C 视频轮播：slide 竖排（上栏 → 视频 → 底栏 → 说明文字），文字在深色视频区下方以浅色显示 */

.ara-d2c-swiper .ara-video-frame-content {
  flex: 0 0 auto;
}
.ara-d2c-swiper .ara-video-frame-content video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 562 / 442;
  object-fit: cover;
  background: #0e0e10;
}
.ara-d2c-swiper .ara-ind-d2c-text {
  flex: 0 0 auto;
  width: 100%;
  padding: 14px 18px 18px;
}

/* 移动端：D2C 视频区视频占满全宽，左右箭头移到视频下方居中 */
@media (max-width: 767px) {
  .ara-ind-d2c-media {
    flex-wrap: wrap;
    gap: 12px;
  }
  .ara-video-frame {
    flex: 0 0 100%;
    order: 1;
  }
  .ara-d2c-nav-prev {
    order: 2;
  }
  .ara-d2c-nav-next {
    order: 3;
  }
}

.ara-video-frame-content {
  width: 100%; 
}
.ara-video-frame-content img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ara-video-frame-content--placeholder {
  flex-direction: column; gap: 12px;
  color: #fff;
  font-family: var(--ara-font-sub);
  font-weight: 600;
}
.ara-video-frame-content-icon { color: #fff; opacity: .9; }

/* 底栏：进度条 + 播放控制 */
.ara-video-frame-bottombar {
  background: #fff;
  border-top: 2px solid #1a1a1c;
  padding: 14px 22px 18px;
}
.ara-video-frame-progress {
  position: relative;
  width: 100%;
  height: 10px;
  background: #fff;
  border: 2px solid #1a1a1c;
  border-radius: 100px;
  margin-bottom: 18px;
}
.ara-video-frame-progress-fill {
  position: absolute; top: 0; left: 0;
  width: 78%; height: 100%;
  background: #fff;
  border-right: 2px solid #1a1a1c;
  border-radius: 0 100px 100px 0;
}
.ara-video-frame-progress-fill::after {
  content: '';
  position: absolute;
  right: -12px; top: 50%;
  width: 22px; height: 22px;
  transform: translateY(-50%);
  background: #fff;
  border: 2px solid #1a1a1c;
  border-radius: 50%;
}
.ara-video-frame-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  color: #1a1a1c;
}
.ara-video-frame-controls button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ara-font-sub);
}
.ara-video-frame-arrow-prev,
.ara-video-frame-arrow-next { font-size: 32px; font-weight: 300; }
.ara-video-frame-play {
  width: 40px !important; height: 40px !important;
  border: 2px solid #1a1a1c !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  padding-left: 3px !important;   /* 视觉居中播放三角 */
}

/* 外部大箭头：垂直居中于视频框高度，SVG 三 chevron */
.ara-d2c-nav {
  flex: 0 0 56px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #1a1a1c;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  padding: 0;
  transition: color .2s, transform .2s;
}
.ara-d2c-nav:hover { color: #555; transform: scale(1.08); }
.ara-d2c-nav:active { transform: scale(.95); }
.ara-d2c-nav svg { width: 100%; height: 100%; display: block; }
.ara-d2c-nav.swiper-button-disabled { opacity: .25; cursor: default; transform: none; }

.ara-ind-d2c-text h3 {
  color: var(--ara-navy);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  margin-bottom: 12px;
}

/* 4 行业卡片 */
.ara-ind-head { text-align: center; margin-bottom: 48px; }
.ara-ind-head .ara-section-title { color: var(--ara-navy); }
.ara-ind-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem 2rem;
}
.ara-ind-card {
  display: flex;
  flex-direction: column; 
  align-items: center;  
}
.ara-ind-img{
  max-width: 120px;
}
.ara-ind-card h3 {
  font-size: clamp(14px, 1.85vw, 20px);
  font-weight: 700;
  text-align: center;
  color: #b75136;
  margin: 2.0rem 0px 1.0rem;
}
.ara-ind-card p {
  width: 70%;
  margin: 0px auto;
  text-align: center;
  font-size: clamp(13px, 1.65vw, 18px);
}

/* 4 行业卡片 - 鼠标经过效果：卡片上浮 + 阴影、图片放大、标题加深 */
.ara-ind-card {
  transition: transform .35s ease;
}
.ara-ind-card:hover {
  transform: translateY(-8px);
}
.ara-ind-img {
  overflow: hidden;
  transition: transform .35s ease;
}
.ara-ind-card:hover .ara-ind-img {
  transform: scale(1.08);
}
.ara-ind-card h3 {
  transition: color .3s ease;
}
.ara-ind-card:hover h3 {
  color: #9a3f26;
}

/* ============================================================
   11. FINAL CTA（深色底 #202022，左侧文字右对齐 + 右侧大图铺满）
   数据均取自 PDF p.1 精确坐标，勿凭肉眼目测再改。
   ============================================================ */
.ara-finalcta {
  /* PDF 背景色块实测 RGB(32,32,34) = #202022，纯色无渐变 */
  background: var(--ara-ink);
  color: #fff;
  padding: 3.0rem 0 0;
  overflow: hidden;   /* 右侧大图溢出后由此裁剪 */
}
.ara-finalcta-inner {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
/* 左侧文字列：占约 46%，整体右对齐（PDF 所有文字行右边界均为 501） */
.ara-finalcta-text {
  flex: 0 0 46%;
  max-width: 46%;
  text-align: right;
  padding-right: 52px;
}
/* 右侧大图：PDF IMG[14] 696×696，从 x=440 起延伸至页面右缘 */
.ara-finalcta-deco {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.ara-finalcta-deco img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;                 /* 参考图：硬边无圆角 */
  filter: none;                     /* 参考图：无投影 */
}
/* 副标题：PDF 35pt Rubik-Bold 浅蓝
   —— 与 eco 区标题同为 35pt/#80c2d7，沿用其 47px 上限作为换算锚点 */
.ara-finalcta-slogan,.ara-finalcta-title {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  color: var(--ara-sky);
  margin-bottom: 22px;
  font-size: clamp(26px, 4vw, 35px);
  line-height: 1.2;
}
.ara-finalcta-slogan {
  color: #fff;
}

/* 按钮：PDF 矩形 x=162~385，中心 273.5 = 文字容器中心 → 居中，不跟随右对齐 */
.ara-finalcta-btn {
  text-align: center;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1080px) {
  .ara-hero { padding: 3.0rem 0; }
  .ara-hero-inner { gap: 15px;flex-direction: column; text-align: center;  }
  .ara-kpi-inner { flex-direction: column; align-items: stretch; gap: 30px; }
  .ara-pain-grid { flex-wrap: wrap; gap: 30px; }
  .ara-pain-card { flex: 0 0 30%; margin-left: 0; }
  .ara-eco-grid { grid-template-columns: repeat(2, 1fr); }
  .ara-locations-grid { grid-template-columns: 1fr; }
  .ara-loc-item:nth-child(n) { grid-column: auto; }
  .ara-twophase-inner,
  .ara-prefab-inner,
  .ara-mfg-inner { gap: 36px; }
  .ara-ind-card p{width: 100%;}
  .ara-finalcta-text { flex: 0 0 52%; max-width: 52%; padding-right: 32px; }
  .ara-finalcta-deco { flex: 1 1 auto; }
  .ara-hero-text { flex: 1 1 100%; }
  .ara-hero-media { order: 1; flex: 1 1 100%; }  
  .ara-hero-ctas { justify-content: center; }
  .ara-hero-video-placeholder { justify-content: center; }
  .ara-hero-img { max-width: 360px; }
  .ara-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ara-pain-card { flex: 0 0 calc(50% - 17px); }
  .ara-eco-grid { grid-template-columns: repeat(2, 1fr); }
  .ara-locations-grid { grid-template-columns: repeat(2, 1fr); }
  .ara-global-inner,
  .ara-twophase-inner,
  .ara-prefab-inner,
  .ara-mfg-inner { flex-direction: column; }
 
  .ara-global-text, .ara-global-media,
  .ara-twophase-text, .ara-twophase-media,
  .ara-prefab-text, .ara-prefab-media,
  .ara-mfg-text, .ara-mfg-media { flex: 1 1 100%; width: 100%; max-width: 100%; }
  .ara-finalcta-inner { flex-direction: column; gap: 36px; }
  /* 双类选择器提权，确保覆盖 HTML 上的 .text-right 工具类 */
  .ara-finalcta-text,
  .ara-finalcta-text.text-right {
    flex: 1 1 100%; max-width: 100%;
    text-align: center; padding-right: 0;
  }
  .ara-finalcta-deco { flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto; }
}

@media (max-width: 767px) {
  .ara-pain-card { flex: 0 0 88%; aspect-ratio: 320 / 200;}
  .ara-locations-grid { grid-template-columns: 1fr; }
  .ara-eco-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .ara-eco-card { min-width: 0; padding: 0px 5px;}
}
/* ============================================================
   CDU 产品页（设计稿 12. Products - CDU，第十二页：CDU主页）
   按 12_01~12_04 渲染图 1:1 复刻
   ============================================================ */
.ara-cdu-hero {
  background: var(--ara-ink);
  color: #fff;
  padding: 3.5rem 0 0;
  overflow: hidden;
}
.ara-cdu-eyebrow {
  font-family: var(--ara-font-head);
  font-weight: 700;
  font-size: clamp(18px, 2.25vw, 32px);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.ara-cdu-title {
  font-family: var(--ara-font-head);
  font-weight: 900;
  font-size: clamp(34px, 5.7vw, 82px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 44px;
}
.ara-cdu-tagline,.ara-cdu-h2,.ara-cdu-uptime,.ara-cdu-cta-title,.ara-cdu-p-feat-title {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 35px);
  color: var(--ara-sky);
  text-align: center;
  margin-bottom: 1.5rem;
}
.ara-cdu-p-feat-title{
  text-align: left;
}
.ara-cdu-hero-media img { display: block; width: 100%; }
.ara-cdu-hero-desc {
  max-width: 920px;
  margin: 0 auto;
  padding: 0px 0px 5.0rem;
  text-align: center;
}
.ara-cdu-hero-desc p {
  font-size: clamp(14px, 1.4vw, 20px);
  color: #fff;
  margin-bottom: 18px;
}
.ara-cdu-hero-desc p:last-child { margin-bottom: 0; }

/* 产品三卡（In Rack / In Row / In Room） */
.ara-cdu-cards { background: var(--ara-bg); padding: 30px 0 110px; }

.ara-cdu-card-img { 
  width: 100%;
  margin-bottom:1.0rem;
}

.ara-cdu-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.ara-cdu-card h3 {
  font-family: var(--ara-font-head);
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 20px);
  color: var(--ara-accent);
  margin: 0 0 26px;
}
.ara-cdu-card .ara-btn {
  font-family: var(--ara-font-sub);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 700;
  padding: 14px 2.5rem;
  border-radius: 100px;
}

/* Features（深蓝标题 + 三列功能图与文案） */
.ara-cdu-features { background: var(--ara-bg); padding: 0 0 96px; }
.ara-cdu-h2 {
  color: var(--ara-navy);
}
.ara-cdu-features { padding: 0 0 96px; }
/* 三张功能图错落堆叠（设计稿：左 41% / 中 37% / 右 30%，底部对齐） */
.ara-cdu-features-media {
  position: relative;
  height: clamp(280px, 32vw, 560px);
  margin-bottom: 46px;
}
.ara-cdu-feature-img { 
  width: 100%;
  border-radius: 15px;
  margin-bottom: 1.0rem;
}

.ara-cdu-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  align-items: start;
}
.ara-cdu-feature p {
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ara-ink);
  text-align: center;
}

/* 特性列表（Each CDU has these features. Each!） */
.ara-cdu-specs { background: var(--ara-bg); padding: 0 0 3.0rem; }
.ara-cdu-specs-list {
  list-style: none;
  max-width: 615px;
  margin: 0 auto;
  padding: 0;
}
.ara-cdu-specs-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 1.5vw, 20px);
  margin-bottom: 1.25rem;
}
.ara-cdu-specs-list li::before {
  content: '';
  flex: 0 0 auto;
  width: clamp(20px, 1.9vw, 40px);
  height: clamp(20px, 1.9vw, 40px);
  background: url(../images/xing.png) no-repeat left 0 / 100% 100%;
}

.ara-cdu-uptime {
  color: var(--ara-accent);
}

/* CTA（深色底，浅蓝标题 + 按钮） */
.ara-cdu-cta {
  background: var(--ara-ink);
  color: #fff;
  text-align: center;
  padding: 5.0rem 0 2.0rem;
}
.ara-cdu-cta p,.ara-cdu-p-cta .ara-container p {
  font-size: clamp(13px, 1.9vw, 20px);
  max-width: 810px;
  margin: 0 auto 3.0rem;
}
.ara-cdu-cta .ara-btn {
  font-family: var(--ara-font-sub);
  background: var(--ara-sky);
  color: #fff;
  border-color: var(--ara-sky);
}
.ara-cdu-cta .ara-btn:hover {
  background: #9fd4e6;
  border-color: #9fd4e6;
  color: #fff;
  transform: translateY(-2px);
}

/* CDU 页响应式 */
@media (max-width: 1080px) {
  .ara-cdu-cards-media,
  .ara-cdu-features-media { position: static; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 30px; }
  .ara-cdu-card-mid, .ara-cdu-card-left, .ara-cdu-card-right,
  .ara-cdu-feature-img-l, .ara-cdu-feature-img-m, .ara-cdu-feature-img-r { position: static; transform: none; width: 100%; }
  .ara-cdu-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ara-cdu-card:last-child {
    grid-column: span 2;
    justify-self: center;
    width: 50%; 
  }
  .ara-cdu-features-grid { grid-template-columns: repeat(3, 30%); gap: 3%; }
  .ara-cdu-card .ara-btn { padding: 14px 1.5rem;}
}