/* =========================================================
   SH Energy · Homepage H1-H7 深化 (2026-07-31)
   全球适配 + 即梦整图素材。独立文件，在 sh-energy.css 之后加载，
   仅新增/覆盖首页组件样式，复用既有设计变量。
   ========================================================= */

/* ---------- H1 · Hero 整张美工图（替代代码架构图） ---------- */
.hero-media {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
  aspect-ratio: 16 / 11;
  background: #0F172A;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 980px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero--split .hero-copy { text-align: center; }
  .hero--split .hero-copy .lede { max-width: 100%; margin: 0 auto; }
  .hero-media { margin: 0 auto; max-width: 640px; }
}

/* ---------- H2 · Buyer Gate 身份场景图卡 ---------- */
.buyer-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.buyer-card .buyer-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
}
.buyer-card .buyer-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.buyer-card:hover .buyer-img img { transform: scale(1.05); }
.buyer-card .buyer-info {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.buyer-card .buyer-info h3 { font-size: 17px; font-weight: 600; margin: 0; }
.buyer-card .buyer-info p { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin: 0; }
.buyer-btn {
  margin-top: auto;
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .18s, transform .18s;
}
.buyer-card:hover .buyer-btn { background: var(--red); transform: translateX(3px); }
html[dir="rtl"] .buyer-card:hover .buyer-btn { transform: translateX(-3px); }

/* ---------- H3 · About 供应链概念图横幅 ---------- */
.about-banner {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 8px;
}
.about-banner .ab-img {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  background: var(--bg-soft);
}
.about-banner .ab-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-banner .ab-txt { max-width: 440px; }
.about-banner .ab-txt .sec-sub { margin-bottom: 22px; }
@media (max-width: 980px) {
  .about-banner { grid-template-columns: 1fr; gap: 22px; }
  .about-banner .ab-txt { max-width: none; }
}

/* ---------- H4 · 四大支柱 图标底色容器 ---------- */
.pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.pillar-icon .ic-svg { margin: 0 !important; width: 28px !important; height: 28px !important; }
.pi-red   { background: rgba(196,30,58,.15); }
.pi-blue  { background: rgba(30,90,196,.15); }
.pi-green { background: rgba(0,140,100,.15); }
.pi-amber { background: rgba(244,169,59,.15); }

/* ---------- H5 · Product Lines 配图卡 ---------- */
.line-card .line-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 10px;
  position: relative;
  background: var(--bg-soft);
}
.line-card .line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.line-card:hover .line-img img { transform: scale(1.03); }
.line-card .line-img .ic-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.line-card .line-img .ic-badge .ic-svg { margin: 0 !important; width: 26px !important; height: 26px !important; }
html[dir="rtl"] .line-card .line-img .ic-badge { left: auto; right: 10px; }

/* ---------- H6 · Global Footprint 横幅 ---------- */
.footprint-banner {
  width: 100%;
  aspect-ratio: 16 / 5;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 28px;
  position: relative;
  background: #0F172A;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}
.footprint-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- H7 · Trust 无缝轮播窗 ---------- */
.trust-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: trust-scroll 24s linear infinite;
}
.trust-carousel:hover .trust-track { animation-play-state: paused; }
.trust-slide {
  flex: 0 0 auto;
  width: clamp(280px, 82vw, 560px);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  text-decoration: none;
}
.trust-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust-slide .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 18px 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(0deg, rgba(15,23,42,.80), transparent);
}
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
html[dir="rtl"] .trust-track { animation-direction: reverse; }

/* ---------- 响应式补充 ---------- */
@media (max-width: 640px) {
  .about-banner .ab-img { aspect-ratio: 16 / 9; }
  .footprint-banner { aspect-ratio: 16 / 7; }
  .buyer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   v2 修正 (2026-07-31 晚)
   H1 整图铺底+浮层 / H2 身份色带 / H3+H4 合并 Story /
   H5 图片填满+畅销标签上移 / H6 背景融合+毛玻璃统计
   ========================================================= */

/* ---------- H1 · 整张图铺底 + 文字浮层 ---------- */
.hero--bg {
  position: relative;
  overflow: hidden;
  min-height: 76vh;
  display: flex;
  align-items: center;
}
.hero-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-mask {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(13,15,20,.85) 0%,
    rgba(13,15,20,.62) 36%,
    rgba(13,15,20,.18) 68%,
    rgba(13,15,20,.30) 100%);
}
.hero-copy-wrap { position: relative; z-index: 2; width: 100%; }
.hero--bg .hero-copy { max-width: 660px; margin-right: auto; color: #fff; }
.hero--bg .hero-copy .eyebrow { color: #F4A93B; }
.hero--bg .hero-copy h1 { color: #fff; font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; margin: 10px 0 14px; }
.hero--bg .hero-copy h1 .grad {
  background: linear-gradient(120deg, #F4A93B, #2FD2E6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--bg .hero-copy .lede { color: rgba(255,255,255,.88); max-width: 580px; font-size: 16px; line-height: 1.6; }
.hero--bg .hero-cta { margin-top: 22px; }
html[dir="rtl"] .hero--bg .hero-mask {
  background: linear-gradient(270deg,
    rgba(13,15,20,.85) 0%,
    rgba(13,15,20,.62) 36%,
    rgba(13,15,20,.18) 68%,
    rgba(13,15,20,.30) 100%);
}
html[dir="rtl"] .hero--bg .hero-copy { margin-right: 0; margin-left: auto; text-align: right; }
@media (max-width: 768px) {
  .hero--bg { min-height: 62vh; }
  .hero-mask,
  html[dir="rtl"] .hero-mask { background: linear-gradient(180deg, rgba(13,15,20,.20), rgba(13,15,20,.90)); }
}

/* ---------- H2 · 身份色带（图下渐变 + 角色名） ---------- */
.buyer-card .buyer-img { position: relative; }
.buyer-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  background: linear-gradient(0deg, rgba(13,15,20,.86) 0%, rgba(13,15,20,.35) 60%, rgba(13,15,20,0) 100%);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 6px; letter-spacing: .2px;
}

/* ---------- H3+H4 · The SH Energy Story ---------- */
.story-timeline {
  margin: 24px 0 10px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.12); background: #0F172A;
}
.story-timeline img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.journey-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 28px 0 32px; position: relative;
}
.journey-grid::before {
  content: ""; position: absolute;
  top: 44px; left: 16%; right: 16%;
  border-top: 2px dashed rgba(196,30,58,.35); z-index: 0;
}
.journey-card {
  position: relative; z-index: 1; background: #fff;
  border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
  padding: 22px 20px; box-shadow: 0 8px 22px rgba(0,0,0,.05);
}
.journey-card .jnum { font-size: 32px; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 10px; }
.journey-card h3 { font-size: 17px; margin: 0 0 8px; }
.journey-card p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; }
@media (max-width: 768px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid::before { display: none; }
}

/* ---------- H5 · 图片填满容器 + 畅销标签上移 ---------- */
.line-card { overflow: hidden; border-radius: 16px; }
.line-card .line-img { aspect-ratio: 3/2; border-radius: 0; margin-bottom: 0; }
.line-card.featured .line-img { aspect-ratio: 16/9; }
.bestseller-badge {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  background: linear-gradient(135deg, #C41E3A, #E8590C);
  color: #fff; font-weight: 700; font-size: 12px;
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
}
html[dir="rtl"] .bestseller-badge { left: auto; right: 10px; }

/* ---------- H6 · 背景铺满整块 + 毛玻璃统计框 ---------- */
.trust-section { position: relative; overflow: hidden; color: #fff; }
.trust-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.trust-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,15,20,.86), rgba(13,15,20,.93)); }
.trust-inner { position: relative; z-index: 2; }
.trust-section .sec-eyebrow,
.trust-section .sec-title { color: #fff; }
.trust-section .sec-title { margin-bottom: 24px; }
.trust-section .trust-stat {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
}
.trust-section .trust-stat .num,
.trust-section .trust-stat .lbl { color: #fff; }

/* ---------- H7 · 轮播容器圆角 + 细边框 (v3) ---------- */
.trust-slide { border: 1px solid rgba(255,255,255,.10); }

/* ---------- H3+H4 · The Energy Shift Story (v3 重构) ---------- */
.story { position: relative; overflow: hidden; }
.story-bg { position: absolute; inset: 0; z-index: 0; }
.story-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,14,21,.82), rgba(11,14,21,.94));
}
.story-inner { position: relative; z-index: 2; }
.story .sec-title { margin-bottom: 10px; }
.story .sec-sub { margin-bottom: 40px; }

/* ② 叙事三幕 PAST / NOW / NEXT */
.shift-grid {
  display: flex; align-items: stretch; justify-content: center;
  gap: 14px; margin-bottom: 48px;
}
.shift-card {
  flex: 1 1 0; min-width: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 26px 22px; text-align: center;
}
.shift-ico { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.shift-era {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--gold-1); text-transform: uppercase; margin-bottom: 10px;
}
.shift-line { font-size: 19px; line-height: 1.4; color: #fff; font-weight: 600; }
.shift-arrow {
  align-self: center; font-size: 26px; color: var(--gold-1);
  font-weight: 700; flex: 0 0 auto;
}

/* ③ 身份区：New brand. Seasoned team. */
.identity { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.id-badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; margin-bottom: 16px;
  box-shadow: 0 6px 20px rgba(196,30,58,.35);
}
.id-badge svg { display: block; }
.id-title { font-size: clamp(24px,3.2vw,34px); font-weight: 800; color: #fff; margin-bottom: 14px; }
.id-sub { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.72); margin-bottom: 22px; }
.id-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.id-pill {
  font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(244,169,59,.35);
  border-radius: 999px; padding: 9px 16px;
}

/* ④ 四大优势（保留，仅随主题换肤；pillar 已由全局玻璃规则处理） */
.story .pillars-grid { margin-top: 8px; }

/* 响应式 */
@media (max-width: 767px) {
  .shift-grid { flex-direction: column; gap: 12px; }
  .shift-arrow { transform: rotate(90deg); }
  .shift-line { font-size: 17px; }
}
html[dir="rtl"] .shift-grid { direction: rtl; }
html[dir="rtl"] .shift-arrow { transform: scaleX(-1); }