/* ============================================================
   恒展智诚 · 页面专属样式
   首页 index + 通用内页少量补充（spec-table / contact-card / honor-wall）
   通用组件一律放 components.css，此处不重复定义
   ============================================================ */

/* ============================================================
   一、首页 · Banner 轮播
   HTML 结构约定：
   .banner > .banner-slide（首张 .active）+ .banner-dots + .banner-arrow--prev/next
   ============================================================ */
.banner {
  position: relative;
  overflow: hidden;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
}

.banner-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.banner-slide .img-ph--banner {
  width: 100%;
}

/* 文案浮层 */
.banner-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.banner-caption .badge {
  width: fit-content;
  margin-bottom: 16px;
  font-size: 13px;
  padding: 4px 14px;
}

.banner-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.banner-sub {
  margin-top: 12px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.banner-btns {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* 当前幻灯片文案入场动画 */
.banner-slide.active .banner-caption > * {
  animation: bannerTextUp 0.7s ease both;
}

.banner-slide.active .banner-caption > *:nth-child(2) { animation-delay: 0.1s; }
.banner-slide.active .banner-caption > *:nth-child(3) { animation-delay: 0.2s; }
.banner-slide.active .banner-caption > *:nth-child(4) { animation-delay: 0.3s; }

@keyframes bannerTextUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 左右箭头 */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}

.banner-arrow:hover {
  background: var(--brand-orange);
}

.banner-arrow--prev { left: 24px; }
.banner-arrow--next { right: 24px; }

/* 底部圆点 */
.banner-dots {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}

.banner-dots button {
  width: 10px;
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  transition: var(--transition);
}

.banner-dots button.active {
  width: 28px;
  background: var(--brand-orange);
}

/* ---- Hero 背景视频层（华体式：文件就绪后由 home.js 加 .has-video 启用，缺失则保持图片轮播） ---- */
.banner-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.banner.has-video .banner-video {
  display: block;
}

/* 播放/暂停开关：直角方形，吸 Hero 右下（右移 64px 避让固定悬浮栏）；
   默认 hidden，视频可用时由 JS 显示 */
.banner-video-toggle {
  position: absolute;
  right: 64px;
  bottom: 22px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 44, 71, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0;
  color: #fff;
  backdrop-filter: blur(4px);
  transition: var(--transition);
}

.banner-video-toggle[hidden] {
  display: none;
}

.banner-video-toggle:hover {
  background: var(--brand-orange);
}

.banner-video-toggle svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.banner-video-toggle .icon-play {
  display: none;
}

.banner-video-toggle.is-paused .icon-play {
  display: block;
}

.banner-video-toggle.is-paused .icon-pause {
  display: none;
}

/* ============================================================
   二、首页 · 产品中心展示带（.product-strip）
   品类紧密排布、左右贴近网页边界；默认只显示产品图 + 主标题，
   光标悬浮时该块加宽并展开详情（手风琴效果，参考洲明解决方案板块）
   ============================================================ */
.product-strip {
  position: relative;
  display: flex;
  width: 100%;
}

/* 整带共享一张全景图（五等分视觉），悬浮时整体轻微推近 */
.product-strip-media {
  position: absolute;
  inset: 0;
  transition: transform 0.8s ease;
}

.product-strip:hover .product-strip-media {
  transform: scale(1.04);
}

.product-strip-item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  height: 480px;
  overflow: hidden;
  transition: flex 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 整图上的五段分界细线 */
.product-strip-item + .product-strip-item {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

/* 悬浮项加宽，其余项等比压缩 */
.product-strip-item:hover {
  flex: 2.2 1 0;
}

/* 遮罩：默认仅底部压暗保证主标题可读，悬浮时整体加深 */
.product-strip-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 44, 71, 0) 45%, rgba(8, 44, 71, 0.78) 100%);
  transition: background 0.5s ease;
}

.product-strip-item:hover .product-strip-mask {
  background: linear-gradient(180deg, rgba(8, 44, 71, 0.45) 0%, rgba(8, 44, 71, 0.88) 100%);
}

/* 文案层：底部对齐，默认只露主标题 */
.product-strip-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 26px;
  color: #fff;
}

.product-strip-en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.75;
}

.product-strip-name {
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
}

/* 详情区：默认收起，悬浮展开 */
.product-strip-more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(16px);
  transition: max-height 0.55s ease, opacity 0.45s ease 0.08s, transform 0.45s ease 0.08s;
}

.product-strip-item:hover .product-strip-more {
  max-height: 260px;
  opacity: 1;
  transform: none;
}

.product-strip-desc {
  font-size: 14px;
  margin-top: 12px;
  opacity: 0.92;
}

.product-strip-list {
  font-size: 13px;
  opacity: 0.75;
  margin-top: 8px;
  line-height: 1.8;
}

.product-strip-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: #4E9BFF; /* 深色遮罩上用浅蓝保证对比度 */
  letter-spacing: 1px;
}

/* 窄屏（触屏无悬浮）：纵向堆叠，详情常显 */
@media (max-width: 1024px) {
  .product-strip {
    flex-direction: column;
  }
  .product-strip-item,
  .product-strip-item:hover {
    flex: none;
    height: 300px;
  }
  .product-strip-more {
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   三、首页 · 标杆案例
   ============================================================ */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}

/* ============================================================
   三-A、首页 · 标杆案例抽拉（.case-showcase）
   左列目录点击切换，右侧详情抽拉展开；默认展开第 1 个
   ============================================================ */
.case-showcase {
  display: flex;
  gap: 36px;
}

/* ---- 左列目录 ---- */
.case-showcase-list {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.case-showcase-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 16px;
  color: var(--text-primary);
  transition: var(--transition);
}

.case-showcase-num {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--text-secondary);
  transition: var(--transition);
}

.case-showcase-name {
  flex: 1;
  font-weight: 600;
}

.case-showcase-arrow {
  color: var(--brand-orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: var(--transition);
}

.case-showcase-item:hover {
  color: var(--brand-orange);
}

/* 激活项：左侧橙色指示条 + 箭头滑入 */
.case-showcase-item.is-active {
  color: var(--brand-orange);
}

.case-showcase-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-orange);
}

.case-showcase-item.is-active .case-showcase-num {
  color: var(--brand-orange);
}

.case-showcase-item.is-active .case-showcase-arrow {
  opacity: 1;
  transform: none;
}

/* ---- 右侧详情面板（层叠，抽拉展开） ---- */
.case-showcase-panels {
  position: relative;
  flex: 1;
  min-height: 420px;
}

.case-showcase-panel {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--bg-gray);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.case-showcase-panel.is-active {
  opacity: 1;
  visibility: visible;
  /* 抽拉：自左向右擦出 */
  animation: casePull 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes casePull {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.case-showcase-media {
  width: 52%;
  flex-shrink: 0;
}

.case-showcase-media .img-ph {
  width: 100%;
  height: 100%;
}

.case-showcase-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 40px 36px;
}

.case-showcase-capacity {
  font-family: var(--font-en);
  font-size: 42px;
  font-weight: 700;
  color: var(--brand-orange);
  line-height: 1;
}

.case-showcase-capacity small {
  font-size: 16px;
  margin-left: 4px;
}

.case-showcase-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-blue);
}

.case-showcase-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.case-showcase-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.case-showcase-more {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-orange);
  letter-spacing: 1px;
}

/* 窄屏：目录变顶部横向滚动条，面板纵向堆叠、向下抽拉 */
@media (max-width: 1024px) {
  .case-showcase {
    flex-direction: column;
    gap: 0;
  }

  .case-showcase-list {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-top: none;
  }

  .case-showcase-item {
    flex-shrink: 0;
    border-bottom: none;
    padding: 14px 16px;
    white-space: nowrap;
  }

  .case-showcase-item.is-active::before {
    top: auto;
    right: 0;
    width: auto;
    height: 3px;
  }

  .case-showcase-panels {
    min-height: 0;
  }

  .case-showcase-panel {
    position: static;
    display: none;
    flex-direction: column;
  }

  .case-showcase-panel.is-active {
    display: flex;
    animation: casePullDown 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .case-showcase-media {
    width: 100%;
    height: 220px;
  }

  .case-showcase-info {
    padding: 24px 20px 32px;
  }
}

@keyframes casePullDown {
  from { clip-path: inset(0 0 100% 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ============================================================
   三-B、首页 · 标杆案例数字卖点（.case-spot，三思式）
   左列案例目录 + 右侧超大装机数字 + 底部缩略图条，三者联动切换
   ============================================================ */
.case-spot {
  display: flex;
  gap: 36px;
}

/* ---- 左列案例目录 ---- */
.case-spot-list {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.case-spot-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  padding: 20px 18px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 16px;
  color: var(--text-primary);
  transition: var(--transition);
}

.case-spot-num {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--text-secondary);
  transition: var(--transition);
}

.case-spot-item-title {
  flex: 1;
  font-weight: 600;
}

.case-spot-arrow {
  color: var(--brand-orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: var(--transition);
}

.case-spot-item:hover {
  color: var(--brand-orange);
}

/* 激活项：左侧蓝色指示条 + 箭头滑入 */
.case-spot-item.is-active {
  color: var(--brand-orange);
}

.case-spot-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-orange);
}

.case-spot-item.is-active .case-spot-num {
  color: var(--brand-orange);
}

.case-spot-item.is-active .case-spot-arrow {
  opacity: 1;
  transform: none;
}

/* ---- 右侧主舞台：大图层叠 + 超大数字 ---- */
.case-spot-stage {
  flex: 1;
  min-width: 0;
}

.case-spot-panels {
  position: relative;
  min-height: 470px;
}

.case-spot-panel {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--bg-gray);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.case-spot-panel.is-active {
  opacity: 1;
  visibility: visible;
}

.case-spot-media {
  width: 52%;
  flex-shrink: 0;
}

.case-spot-media .img-ph {
  width: 100%;
  height: 100%;
}

.case-spot-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 36px;
}

/* 超大卖点数字：三思式巨型字号 + 单位缩小跟随 */
.case-spot-stat {
  font-family: var(--font-en);
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--brand-orange);
}

.case-spot-stat small {
  font-size: 28px;
  font-weight: 700;
  margin-left: 6px;
}

.case-spot-stat-label {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--text-secondary);
}

.case-spot-title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-blue);
}

.case-spot-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
}

.case-spot-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.case-spot-more {
  width: fit-content;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-orange);
  letter-spacing: 1px;
}

.case-spot-more:hover {
  text-decoration: underline;
}

/* ---- 底部缩略图条 ---- */
.case-spot-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.case-spot-thumb {
  flex: 1;
  min-width: 0;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: var(--transition);
}

.case-spot-thumb .img-ph {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* 缩略图尺寸下隐藏占位文字胶囊（保留 DOM 供 img-loader 取 alt） */
.case-spot-thumb .img-ph-label {
  display: none;
}

.case-spot-thumb:hover {
  opacity: 1;
}

.case-spot-thumb.is-active {
  border-color: var(--brand-orange);
  opacity: 1;
}

@media (max-width: 1150px) {
  .case-spot-info {
    padding: 28px;
  }

  .case-spot-stat {
    font-size: 64px;
  }

  .case-spot-stat small {
    font-size: 22px;
  }
}

/* 窄屏：目录变顶部横向滚动条，面板纵向堆叠 */
@media (max-width: 1024px) {
  .case-spot {
    flex-direction: column;
    gap: 0;
  }

  .case-spot-list {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    border-top: none;
    margin-bottom: 16px;
  }

  .case-spot-item {
    flex: none;
    border-bottom: none;
    padding: 14px 16px;
    white-space: nowrap;
  }

  .case-spot-item.is-active::before {
    top: auto;
    right: 0;
    width: auto;
    height: 3px;
  }

  .case-spot-panels {
    min-height: 0;
  }

  .case-spot-panel {
    position: static;
    display: none;
    flex-direction: column;
  }

  .case-spot-panel.is-active {
    display: flex;
  }

  .case-spot-media {
    width: 100%;
    height: 220px;
  }

  .case-spot-info {
    padding: 24px 20px 28px;
  }

  .case-spot-stat {
    font-size: 56px;
  }

  .case-spot-stat small {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .case-spot-thumbs {
    gap: 8px;
    margin-top: 12px;
  }

  .case-spot-stat {
    font-size: 48px;
  }
}

/* ============================================================
   四、首页 · 解决方案（左右图文交替）
   ============================================================ */
.solution-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 36px 0;
}

.solution-row + .solution-row {
  border-top: 1px solid var(--border);
}

/* 偶数行图文互换 */
.solution-row--reverse .solution-media {
  order: 2;
}

.solution-media .img-ph {
  border-radius: var(--radius-card);
}

.solution-info .solution-en {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-orange);
  font-weight: 600;
}

.solution-info h3 {
  font-size: 24px;
  color: var(--brand-blue);
  margin: 6px 0 12px;
}

.solution-info p {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 16px;
}

/* ============================================================
   四-A、首页 · 解决方案竖排场景 Tab（.sol-tabs，洲明式）
   左侧半透明竖排 tab 覆盖在共享场景视觉之上，激活项带蓝色指示条；
   桌面端悬浮/点击/键盘切换，<1024px 降级为纵向堆叠卡片
   ============================================================ */
.sol-tabs {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: var(--brand-blue-dark);
}

/* ---- 共享视觉区：场景大图层叠切换 ---- */
.sol-tabs-visuals {
  position: absolute;
  inset: 0;
}

.sol-tabs-visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.sol-tabs-visual.is-active {
  opacity: 1;
  visibility: visible;
}

.sol-tabs-visual .img-ph {
  width: 100%;
  height: 100%;
}

/* 场景说明：压在视觉底部渐变带上，左缘避让竖排 tab 列 */
.sol-tabs-caption {
  position: absolute;
  left: 320px;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px 48px;
  color: #fff;
  background: linear-gradient(180deg, rgba(8, 44, 71, 0), rgba(8, 44, 71, 0.88));
}

.sol-tabs-title {
  font-size: 26px;
  font-weight: 700;
}

.sol-tabs-caption p {
  max-width: 620px;
  margin: 10px 0 18px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

/* ---- 左侧竖排 tab：半透明深色浮层 ---- */
.sol-tabs-nav {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(8, 44, 71, 0.68);
  backdrop-filter: blur(6px);
}

.sol-tab {
  position: relative;
  display: block;
  width: 100%;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  color: rgba(255, 255, 255, 0.72);
  transition: var(--transition);
}

.sol-tab-en {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.55;
}

.sol-tab-name {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
}

.sol-tab:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.sol-tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* 激活 tab：蓝色指示条 + 半透明品牌蓝底 */
.sol-tab.is-active {
  background: rgba(22, 104, 220, 0.32);
  color: #fff;
}

.sol-tab.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand-orange);
}

@media (max-width: 1280px) {
  .sol-tabs {
    height: 540px;
  }

  .sol-tabs-nav {
    width: 280px;
  }

  .sol-tabs-caption {
    left: 280px;
    padding: 32px 36px;
  }
}

@media (max-width: 1150px) {
  .sol-tabs {
    height: 500px;
  }

  .sol-tabs-nav {
    width: 250px;
  }

  .sol-tab {
    padding: 14px 20px;
  }

  .sol-tab-name {
    font-size: 16px;
  }

  .sol-tabs-caption {
    left: 250px;
    padding: 28px;
  }

  .sol-tabs-title {
    font-size: 22px;
  }
}

/* 窄屏：竖排 tab 收起，全部场景降级为纵向堆叠卡片 */
@media (max-width: 1024px) {
  .sol-tabs {
    height: auto;
    overflow: visible;
    background: transparent;
  }

  .sol-tabs-visuals {
    position: static;
    display: grid;
    gap: 24px;
  }

  .sol-tabs-visual {
    position: static;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .sol-tabs-visual .img-ph {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .sol-tabs-nav {
    display: none;
  }

  .sol-tabs-caption {
    position: static;
    padding: 24px;
    background: var(--brand-blue);
  }

  .sol-tabs-caption p {
    margin: 8px 0 16px;
  }
}

@media (max-width: 768px) {
  .sol-tabs-caption {
    padding: 20px;
  }

  .sol-tabs-title {
    font-size: 20px;
  }

  .sol-tabs-caption p {
    font-size: 14px;
  }
}

/* 尊重系统减弱动效设置：场景/案例切换改为瞬切 */
@media (prefers-reduced-motion: reduce) {
  .sol-tabs-visual,
  .case-spot-panel {
    transition: none;
  }
}

/* ============================================================
   五、首页 · 为什么选择恒展（深蓝底）
   ============================================================ */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
  margin-bottom: 48px;
}

.adv-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  transition: var(--transition);
}

.adv-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.adv-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--brand-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.adv-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #fff;
}

.adv-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
}

/* ============================================================
   六、首页 · 新闻中心
   ============================================================ */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 860px;
  margin: 0 auto;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff;
  padding: 18px 24px;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.news-item:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-hover);
}

.news-date {
  flex-shrink: 0;
  text-align: center;
  font-family: var(--font-en);
  color: var(--text-secondary);
  border-right: 1px solid var(--border);
  padding-right: 20px;
  line-height: 1.3;
}

.news-date .day {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-orange);
  display: block;
}

.news-date .ym {
  font-size: 12px;
}

.news-title {
  font-size: 15px;
  color: var(--text-primary);
  flex: 1;
}

.news-item:hover .news-title {
  color: var(--brand-orange);
}

.news-more {
  text-align: center;
  margin-top: 32px;
}

/* ============================================================
   七、首页 · CTA 区（橙色渐变底 + 简表单）
   ============================================================ */
.cta-section {
  background: var(--grad-banner);
  color: #fff;
}

.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.cta-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
}

.cta-desc {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

.cta-hotline {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.cta-hotline strong {
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 800;
}

/* 表单卡片 */
.cta-form {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
}

.cta-form .form-control {
  background: var(--bg-gray);
}

/* ============================================================
   八、通用内页补充样式
   ============================================================ */

/* 产品参数表 .spec-table（斑马纹，表头深蓝底白字） */
.spec-table {
  font-size: 14px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.spec-table th {
  background: var(--brand-blue);
  color: #fff;
  font-weight: 600;
  padding: 13px 16px;
  text-align: left;
}

.spec-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.spec-table tbody tr:nth-child(even) td {
  background: var(--bg-gray);
}

.spec-table td:first-child {
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 联系卡 .contact-card（三列） */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--card-gap);
}

.contact-card {
  text-align: center;
  padding: 36px 24px;
}

.contact-card .adv-icon {
  margin: 0 auto 16px;
}

.contact-card h3 {
  font-size: 18px;
  color: var(--brand-blue);
  margin-bottom: 10px;
}

.contact-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.9;
}

.contact-card strong {
  font-family: var(--font-en);
  color: var(--brand-orange);
  font-size: 17px;
}

/* 关于页荣誉徽章墙 .honor-wall */
.honor-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-gap);
}

.honor-item {
  text-align: center;
  padding: 24px 16px;
}

.honor-item .img-ph--square {
  border-radius: var(--radius-card);
  margin-bottom: 12px;
}

.honor-item h4 {
  font-size: 15px;
  color: var(--brand-blue);
}

.honor-item p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  .product-cats {
    grid-template-columns: repeat(3, 1fr);
  }

  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .adv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .banner-title {
    font-size: 34px;
  }

  .contact-cards,
  .honor-wall {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .img-ph--banner {
    height: 420px;
  }

  .banner-title {
    font-size: 26px;
  }

  .banner-sub {
    font-size: 14px;
  }

  .banner-arrow {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .banner-arrow--prev { left: 10px; }
  .banner-arrow--next { right: 10px; }

  .product-cats,
  .case-grid,
  .adv-grid,
  .contact-cards {
    grid-template-columns: 1fr;
  }

  .honor-wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .solution-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 移动端图文不交错，统一图上文下 */
  .solution-row--reverse .solution-media {
    order: 0;
  }

  .cta-form {
    padding: 24px 20px;
  }

  .news-item {
    gap: 14px;
    padding: 14px 16px;
  }

  .news-date {
    padding-right: 14px;
  }
}

/* ============================================================
   新闻中心 · 左图右文悬浮预览（js/news-preview.js 动态构建）
   列表项带小插图；悬浮时左侧预览区显示该新闻缩略图放大版
   ============================================================ */
.news-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

.news-layout .news-list {
  max-width: none;
  margin: 0;
}

/* 左侧预览区（吸顶跟随） */
.news-preview {
  position: sticky;
  top: 100px;
  background: var(--bg-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.news-preview-img {
  overflow: hidden;
}

.news-preview-img .img-ph {
  aspect-ratio: 4 / 3;
  width: 100%;
  transition: transform 0.5s ease, opacity 0.25s ease;
}

/* 悬浮预览区时图片缓慢放大（端庄克制的呼吸感） */
.news-preview:hover .news-preview-img .img-ph {
  transform: scale(1.05);
}

/* 切换新闻瞬间：旧图淡出放大，新图淡入 */
.news-preview-img.is-switching .img-ph {
  opacity: 0;
  transform: scale(1.08);
}

.news-preview-body {
  padding: 16px 20px 20px;
}

.news-preview-cat {
  display: inline-block;
  font-size: 12px;
  color: var(--brand-orange);
  background: var(--brand-orange-light);
  border-radius: 10px;
  padding: 2px 10px;
  margin-bottom: 8px;
}

.news-preview-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-blue);
  line-height: 1.5;
  margin: 0;
}

/* 列表项小插图 */
.news-item-thumb {
  flex-shrink: 0;
  width: 96px;
  border-radius: 8px;
  overflow: hidden;
}

.news-item-thumb .img-ph {
  aspect-ratio: 4 / 3;
  width: 100%;
}

.news-item-thumb .img-ph-label {
  font-size: 11px;
  padding: 2px 8px;
}

/* 当前被预览的列表项：左侧橙色指示条 */
.news-item.is-previewing {
  box-shadow: var(--shadow-hover);
  border-left: 3px solid var(--brand-orange);
  padding-left: 21px;
}

/* 响应式：≤1024 隐藏左侧预览区，列表项保留小插图 */
@media (max-width: 1024px) {
  .news-layout {
    grid-template-columns: 1fr;
  }
  .news-preview {
    display: none;
  }
}

@media (max-width: 768px) {
  .news-item-thumb {
    width: 72px;
  }
}

/* 首页新闻静态预览：右侧新闻项平均分布、等高填满（js/news-preview.js） */
.news-layout--even {
  align-items: stretch;
}

.news-layout--even .news-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-layout--even .news-item {
  flex: 1;
}

/* ============================================================
   全局直角化（去除内容元素圆角）
   卡片/按钮/表单/菜单等经 --radius-card / --radius-btn 变量归零；
   此处统一清除硬编码圆角。仅保留 50% 功能性圆形与装饰图形：
   logo 太阳、时间轴节点、地图定位点、步骤序号、Banner 箭头、装饰光斑
   （本文件最后加载，同优先级下覆盖 layout/components）
   ============================================================ */
.header-lang a,
.header-search,
.search-result-cat,
.dropdown,
.dropdown a,
.mega-menu-aside .img-ph,
.footer-addr .addr-tag,
.floatbar-item:first-child,
.floatbar-item:last-child,
.floatbar-pop,
.nav-link::after,
.nav-toggle span,
.img-ph-label,
.section-tag,
.badge,
.tabs button,
.logo-wall-item,
.toast,
.map-dot .map-bubble,
.cert-item,
.pagination span,
.section-title::after,
.stats-section .stat-label::before,
.banner-dots button,
.adv-icon,
.news-item,
.news-preview-cat,
.news-item-thumb {
  border-radius: 0;
}