/* =========================================================
   mpaper.cn 首页独有 home.css（仅 index.html 使用）
   内容：Hero / 公司简介 / 数据条 / 金牌服务 / 解决方案 / 产品 slider
        / 成功案例 / FAQ / 新闻资讯 及对应响应式
   说明：通用板块骨架（hp-band / hp-container / hp-section-title）
        已抽到 style.css，两页共用，此处不再重复
   ========================================================= */

/* ---------- Hero（满屏） ---------- */
.hp-hero {
position: relative;
  min-height: calc(100vh - var(--header-total));
  min-height: calc(100svh - var(--header-total));
  overflow: hidden;
  background: var(--color-ink-green);
}

.hp-hero .banner {
position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hp-hero .banner .swiper-slide.image {
width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* 覆盖原 style.css 中 #index_main .swiper-slide{height:800px}（ID 优先级更高） */
#index_main .hp-hero .banner .swiper-slide.image {
height: 100%;
}

.hp-hero .hero-mask {
position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.25) 100%);
}

.hp-hero .hero-content {
position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
  min-height: calc(100vh - var(--header-total));
  min-height: calc(100svh - var(--header-total));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 132px 48px 64px;
}

/* 文案改成「每屏一份」，跟着幻灯切换（后台一条幻灯管一套文案）。
   于是定位基准从 .hp-hero 降到 .swiper-slide：mask 与文字都挂在各自那一屏里，
   高度按 slide 撑满、padding 用 border-box 收进高度，否则 132+64 的内边距
   会把按钮顶出可视区，被 .hp-hero 的 overflow:hidden 裁掉。 */
.hp-hero .banner .swiper-slide {
position: relative;
}

.hp-hero .banner .swiper-slide .hero-content {
box-sizing: border-box;
  height: 100%;
  min-height: 0;
}

.hp-hero .hero-content .hero-kicker {
color: var(--color-primary-tint);
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.hp-hero .hero-content .hero-title {
font-size: 50px;
  line-height: 1.28;
  color: var(--color-text-invert);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

.hp-hero .hero-content .hero-sub {
font-size: 18px;
  color: var(--color-text-invert);
  margin-top: 22px;
  line-height: 1.8;
}

.hp-hero .hero-content .hero-btns {
margin-top: 38px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hp-hero .hero-btns a {
display: inline-block;
  padding: 14px 34px;
  border-radius: 4px;
  font-size: 16px;
  transition: .25s;
}

.hp-hero .hero-btns .btn-primary {
background: var(--color-primary); color: var(--color-text-invert);
}

.hp-hero .hero-btns .btn-primary:hover {
background: var(--color-brand-bronze);
}

.hp-hero .hero-btns .btn-ghost {
border: 1px solid var(--color-text-invert); color: var(--color-text-invert);
}

.hp-hero .hero-btns .btn-ghost:hover {
background: var(--color-brand-bronze); color: var(--color-text-invert);
}

/* ---------- 公司简介 + 数据 ---------- */
.hp-intro {
display: flex; gap: 60px; align-items: center; margin-top: 0;
}

.hp-intro .intro-text {
flex: 1;
}

.hp-intro .intro-text p {
font-size: 16px; line-height: 1.9; color: var(--color-text-secondary); margin: 0 0 16px;
}

.hp-intro .intro-text .intro-h {
font-size: 24px; color: var(--color-text); font-weight: 700; margin: 0 0 14px;
}

.hp-intro .intro-text .intro-h:not(:first-child) {
margin-top: 28px;
}

.hp-intro .intro-text .intro-certs {
list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
}

.hp-intro .intro-text .intro-certs li {
font-size: 15px; color: var(--color-text-secondary); line-height: 1.6; padding-left: 24px; position: relative;
}

.hp-intro .intro-text .intro-certs li:before {
content: "\2713"; position: absolute; left: 0; top: 1px; color: var(--color-primary); font-weight: 700;
}

.hp-intro .intro-text .intro-certs li.wide {
grid-column: 1 / -1;
}

.hp-intro .intro-media {
flex: 1;
}

.hp-intro .intro-media .cover {
padding-top: 64%;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  background-color: var(--color-border);
}

.hp-stats {
margin-top: 64px;
  display: flex;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(76,155,76,.08);
  overflow: hidden;
}

.hp-stats .hp-stat {
flex: 1;
  padding: 44px 20px;
  text-align: center;
  border-left: 1px solid var(--color-border);
  position: relative;
}

.hp-stats .hp-stat:first-child {
border-left: none;
}

.hp-stats .hp-stat:before {
content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 50%;
  background: var(--color-primary);
}

.hp-stats .hp-stat .num {
font-size: 42px; font-weight: 700; color: var(--color-primary);
}

.hp-stats .hp-stat .unit {
font-size: 18px; color: var(--color-text); margin-left: 4px;
}

.hp-stats .hp-stat .label {
color: var(--color-text-muted); font-size: 15px; margin-top: 10px;
}

/* ---------- 产品分类 ---------- */
.hp-products {
display: flex; gap: 28px;
}

.hp-products .card {
flex: 1;
  background: var(--color-bg-card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: .25s;
}

.hp-products .card:hover {
transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.hp-products .card .cover {
padding-top: 66%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-border);
}

.hp-products .card .body {
padding: 26px;
}

.hp-products .card .body .name {
font-size: 20px; color: var(--color-text); font-weight: 600;
}

.hp-products .card .body .more {
margin-top: 14px; color: var(--color-primary); font-size: 15px;
}

/* ---------- 金牌服务 ---------- */
.hp-services--grid {
display: flex; gap: 22px;
}

.hp-services .item {
flex: 1;
  min-height: 320px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.hp-services .item:hover {
transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.hp-services .item:hover:before {
background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,.04) 66%);
}

.hp-services .item .info {
transition: transform .25s ease;
}

.hp-services .item:hover .info {
transform: translateY(-4px);
}

.hp-services .item:before {
content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0) 60%);
  transition: background .25s ease;
}

.hp-services .item .info {
position: relative; z-index: 2; padding: 30px; color: var(--color-text-invert);
}

.hp-services .item .info .ico {
font-size: 40px;
}

.hp-services .item .info .t {
font-size: 22px; margin: 12px 0 8px; font-weight: 600;
}

.hp-services .item .info .s {
font-size: 14px; color: var(--color-bg-soft); line-height: 1.6;
}

/* ---------- 解决方案：swiper 幻灯（6 卡，每屏 4 张，左右切换，不自动轮换） ---------- */
.solution-swiper {
  position: relative;
  padding: 4px 0;
}
.solution-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.solution-swiper .swiper-slide .item {
  width: 100%;
  aspect-ratio: 9 / 16; /* 宽:高 = 9:16，竖版卡片 */
}
/* 左右切换按钮 */
.sol-outer .sol-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  z-index: 5;
  transition: .2s;
  user-select: none;
}
.sol-outer .sol-nav:hover { background: var(--color-brand-bronze); color: #fff; }
.sol-outer .sol-prev { left: 6px; }
.sol-outer .sol-next { right: 6px; }
.sol-outer .sol-nav .material-icons { font-size: 26px; }
.sol-outer .sol-nav.swiper-button-disabled {
  opacity: .35; cursor: default; pointer-events: none;
}

/* ---------- 新闻（一行四卡：上图 + 标题/时间/摘要） ---------- */
.hp-news {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}

.hp-news .item {
display: block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: .25s;
}

.hp-news .item:hover {
transform: translateY(-6px);
  border-color: var(--color-primary);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}

.hp-news .item .cover {
padding-top: 58%;
  background-size: cover;
  background-position: center;
}

.hp-news .item .body {
padding: 18px 20px 22px;
}

.hp-news .item .t {
font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 51px;
}

.hp-news .item:hover .t {
color: var(--color-primary);
}

.hp-news .item .date {
font-size: 13px; color: var(--color-primary); margin-bottom: 10px;
}

.hp-news .item .s {
font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 通用按钮 ---------- */
.hp-btn {
display: inline-block;
  padding: 13px 40px;
  border-radius: 4px;
  background: var(--color-primary);
  color: var(--color-text-invert);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: .25s;
}

.hp-btn:hover {
background: var(--color-brand-bronze);
  color: var(--color-text-invert);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(199,157,110,.35);
}

/* 同一套按钮样式也会挂在 <button> 上（「更多」改成直接开咨询弹层时，
   用 a 配 javascript: 是错的）。button 自带的边框、字体、行高必须清掉，
   否则和 a 版本差 2px 边框，宽高对不上。 */
button.hp-btn {
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}


/* ---------- 产品分类（横排轻量） ---------- */
.hp-products--row {
flex-wrap: wrap;
}

.hp-products--row .card {
flex: 1 1 18%; min-width: 170px;
}

.hp-products--row .card .body {
padding: 22px;
}

.hp-products--row .card .body .name {
font-size: 18px;
}

.hp-products--row .card .body .desc {
font-size: 13px; color: var(--color-text-muted); margin-top: 8px; line-height: 1.5;
}

.hp-products--row .card .body .more {
font-size: 14px;
}

/* ---------- 标杆案例 ---------- */
.hp-cases {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

.hp-case {
background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 28px 26px;
  box-shadow: 0 2px 12px rgba(76,155,76,.07);
  overflow: hidden;
  transition: .25s;
  /* 案例卡片来自案例库时整卡是链接，a 默认 inline 会塌成一行文字，这里统一成块 */
  display: block;
  text-decoration: none;
  color: inherit;
}

.hp-case:hover {
box-shadow: 0 10px 24px rgba(0,0,0,.12); transform: translateY(-4px);
}

.hp-case .case-tag {
font-size: 15px; font-weight: 700; color: var(--color-primary); margin-bottom: 14px;
}

.hp-case .case-pain {
font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; min-height: 72px;
}

.hp-case .case-gain {
list-style: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--color-border);
}

.hp-case .case-gain li {
font-size: 14px; color: var(--color-text); padding: 5px 0 5px 20px; position: relative;
}

.hp-case .case-gain li:before {
content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700;
}

.hp-case .case-gain b {
color: var(--color-warning); font-size: 16px;
}

/* ---------- 客户反馈 ---------- */
.hp-reviews {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

.hp-review {
background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 30px 28px;
  margin: 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(76,155,76,.08);
}

.hp-review:before {
content: "\201C"; position: absolute; top: 6px; left: 18px; font-size: 56px; color: var(--color-primary-tint); font-family: Georgia, serif;
}

.hp-review p {
font-size: 15px; color: var(--color-text); line-height: 1.8; position: relative; z-index: 1; padding-top: 18px;
}

.hp-review footer {
margin-top: 16px; font-size: 13px; color: var(--color-text-muted);
}

/* ---------- FAQ ---------- */
.hp-faq {
max-width: 860px; margin: 0 auto;
}

.hp-faq-item {
background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 0 24px;
  box-shadow: 0 2px 12px rgba(76,155,76,.07);
  transition: .2s;
}

.hp-faq-item[open] {
border-color: var(--color-primary);
}

.hp-faq-item summary {
cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
}

.hp-faq-item summary::-webkit-details-marker {
display: none;
}

.hp-faq-item summary:after {
content: "+";
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--color-primary); font-weight: 400;
}

.hp-faq-item[open] summary:after {
content: "\2212";
}

.hp-faq-item .ans {
padding: 0 0 22px; font-size: 15px; color: var(--color-text-secondary); line-height: 1.8;
}

/* ---------- 通用更多入口 ---------- */
.hp-more-row {
text-align: center; margin-top: 40px;
}

.hp-link {
color: var(--color-primary); font-size: 16px; font-weight: 600; text-decoration: none;
}

.hp-link:hover {
color: var(--color-primary-dark);
}

/* ---------- 配图占位（图片待补；替换时把占位 div 换成带 background-image 的实图即可） ---------- */
.case-pic,
.cover--todo {
  aspect-ratio: 5 / 4; /* 宽:高 = 5:4 */
position: relative;
  background-color: var(--color-primary-tint);
  background-image: repeating-linear-gradient(45deg, rgba(76,155,76,.07) 0 12px, rgba(76,155,76,0) 12px 24px);
  border: 1px dashed var(--color-primary-tint);
  border-radius: 6px;
}

.case-pic:after,
.cover--todo:after {
content: "配图待补";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 13px;
  letter-spacing: 2px;
}

.hp-case .case-pic {
padding-top: 52%;
  margin: -28px -26px 18px;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.hp-products .card .cover--todo {
padding-top: 62%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

/* ---------- 产品展示：一行 slide（横向滚动 + 左右箭头） ---------- */
.hp-slider {
position: relative;
  padding: 0 72px; /* 与解决方案 .sol-outer 同套路：72 - 按钮44 = 间距 28px */
}

.hp-products.hp-slider-track {
flex-wrap: nowrap;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px 2px 16px;
  -webkit-overflow-scrolling: touch;
}

.hp-products.hp-slider-track::-webkit-scrollbar {
height: 6px;
}

.hp-products.hp-slider-track::-webkit-scrollbar-track {
background: var(--color-primary-tint); border-radius: 3px;
}

.hp-products.hp-slider-track::-webkit-scrollbar-thumb {
background: var(--color-primary-tint); border-radius: 3px;
}

.hp-products.hp-slider-track .card {
flex: 0 0 calc((100% - 56px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.hp-slider-btn {
position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  z-index: 5;
  padding: 0;
  transition: .2s;
  user-select: none;
}

.hp-slider-btn:hover { background: var(--color-brand-bronze); color: #fff; }
.hp-slider-btn .material-icons { font-size: 26px; }
.hp-slider-btn.prev { left: 0; }
.hp-slider-btn.next { right: 0; }

/* ---------- slide 圆点指示 ---------- */
.hp-slider-dots {
display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.hp-slider-dots span {
width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  border: 1px solid var(--color-text-secondary);
  cursor: pointer;
  transition: .2s;
}

/* hover 仅对可悬停设备生效：移动端点按不残留古铜色，active 保持清晰可见 */
@media (hover: hover) {
.hp-slider-dots span:hover {
background: var(--color-brand-bronze);
  border-color: var(--color-brand-bronze);
  transform: scale(1.2);
}
}

.hp-slider-dots span.active {
background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.35);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}

@media (max-width: 980px) {
.hp-hero .hero-content .hero-title {
font-size: 36px;
}
.hp-hero .hero-content {
padding: 80px 20px 48px;
}

.hp-intro, .hp-products, .hp-services--grid, .hp-news, .hp-stats {
flex-wrap: wrap;
}
.hp-intro .intro-text .intro-certs {
grid-template-columns: 1fr;
}
.hp-products .card, .hp-services .item, .hp-news .item {
flex: 1 1 100%;
}
.hp-stats .hp-stat {
flex: 1 1 50%; border-left: none;
}
.hp-cases {
grid-template-columns: 1fr;
}
.hp-products--row .card {
flex: 1 1 100%;
}
.hp-news {
grid-template-columns: repeat(2, 1fr);
}
.hp-products.hp-slider-track .card {
flex: 0 0 84%;
}
.hp-products.hp-slider-track {
overflow-x: auto;
    scrollbar-width: none;
}
.hp-products.hp-slider-track::-webkit-scrollbar {
display: none;
}
.hp-slider-btn {
display: none;
}
.hp-slider {
padding: 0;
}
}

@media (max-width: 640px) {
.hp-news {
grid-template-columns: 1fr;
}
}

/* ---------- 旧版首页轮播残留（原 home-legacy.css，中文首页仍在用） ----------
   仅保留 index.html 实际命中的规则：滑片高度 + 左右箭头；其余旧结构样式已废弃 */
#index_main .swiper-slide {
  display: block;
  width: 100%;
  height: 800px;
  position: relative;
}
#index_main .banner_prev,
#index_main .banner_next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,.32);
  bottom: 50%;
  margin-bottom: -24px;
  left: 0;
  z-index: 5;
  color: var(--color-text-invert);
  text-shadow: 0 1px 2.5px rgba(0,0,0,.6);
  cursor: pointer;
  transition: background .2s;
}
#index_main .banner_next {
  left: auto;
  right: 0;
}
#index_main .banner_prev i,
#index_main .banner_next i {
  line-height: 50px;
  height: 50px;
  font-size: 50px;
}
#index_main .banner_prev:hover,
#index_main .banner_next:hover {
  background-color: var(--color-overlay-dark);
}


/* ---------- Hero 轮播圆点分页（移出 swiper 容器，避开堆叠上下文；定位 .hp-hero 直接子级） ---------- */
.hp-hero .banner_pagination {
  position: absolute;
  left: 0; right: 0;
  bottom: 32px;
  z-index: 5;
  text-align: center;
  pointer-events: none; /* 容器不挡内容，圆点自身恢复可点 */
}
.hp-hero .banner_pagination .swiper-pagination-bullet {
  pointer-events: auto;
  margin: 0 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0e0e0;
  opacity: .85; /* 鲜明：暗色 hero 上清晰可见 */
  /*box-shadow: 0 1px 3px rgba(0,0,0,.45); /* 亮图区域也有对比 */
  /* 形变动画：激活时由圆点平滑伸展为胶囊（参考华为云轮播指示器） */
  transition: width .35s cubic-bezier(.4,0,.2,1), background-color .35s, border-radius .35s, opacity .2s, transform .2s;
}
.hp-hero .banner_pagination .swiper-pagination-bullet:hover {
  opacity: 1;
  transform: scale(1.25);
}
.hp-hero .banner_pagination .swiper-pagination-bullet-active {
  opacity: 1;
  /*background: var(--color-primary, var(--color-primary)); /* 主题绿高亮，无阴影 */
  background: #fff;
  width: 26px; /* 当前项拉长成胶囊 */
  border-radius: 13px; /* 半高圆角：与 50% 之间平滑形变 */
  box-shadow: none;
}


/* ---------- 解决方案卡片：标题限 1 行、描述限 2 行（仅作用本板块，不影响金牌服务） ---------- */
.solution-swiper .item .info .t,
.solution-swiper .item .info .s {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.solution-swiper .item .info .t {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.solution-swiper .item .info .s {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}


/* ---------- 解决方案轮播：slide 高度摆脱 #index_main 的 800px 遗留规则，容器贴合 9:16 卡片 ---------- */
#index_main .solution-swiper .swiper-slide {
  height: auto;
}



/* ---------- 方案轮播外框：按钮置于留白区，不与卡片图片重叠，间距 >= 20px ---------- */
.sol-outer {
  position: relative;
  padding: 0 72px; /* 72 - 按钮44 = 按钮与图片间距 28px */
}
.sol-outer .sol-prev { left: 0; }
.sol-outer .sol-next { right: 0; }
@media (max-width: 640px) {
  .sol-outer { padding: 0 56px; } /* 56 - 按钮36 = 间距 20px */
  .sol-outer .sol-nav { width: 36px; height: 36px; }
  .sol-outer .sol-nav .material-icons { font-size: 20px; }
}


/* ---------- 案例实图：覆盖占位斜纹与虚线框，图片按 5:4 裁切 ---------- */
.case-pic--filled {
  background-size: cover;
  background-position: center;
  border: none;
}
.case-pic--filled:after {
  content: none; /* 去掉「配图待补」占位文字 */
}


/* ---------- 方案轮播 dots 容器：默认隐藏，移动端替代箭头 ---------- */
/* 圆点样式与产品展示 hp-slider-dots 完全对齐（2026-09-23 用户要求） */
.sol-pagination {
  display: none;
  text-align: center;
  margin-top: 16px;
}
.sol-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  border: 1px solid var(--color-text-secondary);
  opacity: 1;
  transition: .2s;
  cursor: pointer;
}
@media (hover: hover) {
.sol-pagination .swiper-pagination-bullet:hover {
  background: var(--color-brand-bronze);
  border-color: var(--color-brand-bronze);
  transform: scale(1.2);
}
}
.sol-pagination .swiper-pagination-bullet-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.35);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}

/* ---------- 为什么选择鸣朋（hp-intro）：移动端媒体区与文字区各占一行，媒体在上 ---------- */
@media (max-width: 980px) {
  .hp-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .hp-intro .intro-media,
  .hp-intro .intro-text {
    flex: none;
    width: 100%;
  }
}

/* ---------- 方案轮播移动端：隐藏左右箭头，留白归零，dots 接管切换 ---------- */
@media (max-width: 640px) {
  .sol-outer { padding: 0; }
  .sol-outer .sol-nav { display: none; }
  .sol-pagination { display: block; }
}

/* ---------- 首屏 hero 入场动画（页面加载即播放，无需滚动触发） ---------- */
@keyframes hp-hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hp-hero .hero-kicker,
.hp-hero .hero-title,
.hp-hero .hero-sub,
.hp-hero .hero-btns > a,
.hp-hero .banner_pagination,
.hp-hero .banner_prev,
.hp-hero .banner_next {
  opacity: 0;
  animation: hp-hero-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hp-hero .hero-title { animation-delay: .12s; }
.hp-hero .hero-sub { animation-delay: .24s; }
.hp-hero .hero-btns > a:first-child { animation-delay: .36s; }
.hp-hero .hero-btns > a:last-child { animation-delay: .44s; }
.hp-hero .banner_pagination { animation-delay: .6s; }
.hp-hero .banner_prev,
.hp-hero .banner_next { animation-delay: .7s; }

/* reveal 完成后恢复卡片自身 hover 浮起与快速过渡
   （html.js .reveal.in 的 transform:none 特异性高于各卡片 :hover 规则） */
html.js .hp-products .card.reveal.in,
html.js .hp-services .item.reveal.in,
html.js .hp-news .item.reveal.in,
html.js .hp-case.reveal.in {
  transition: transform .25s ease, box-shadow .25s ease, opacity .7s ease;
}
html.js .hp-products .card.reveal.in:hover,
html.js .hp-news .item.reveal.in:hover { transform: translateY(-6px); }
html.js .hp-services .item.reveal.in:hover { transform: translateY(-8px); }
html.js .hp-case.reveal.in:hover { transform: translateY(-4px); }

/* 移动端：产品展示每次刚好完整显示一张卡片（无下一张露出） */
@media (max-width: 640px) {
  .hp-products.hp-slider-track { gap: 0; padding: 12px 0 16px; }
  .hp-products.hp-slider-track .card { flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-hero .hero-kicker, .hp-hero .hero-title, .hp-hero .hero-sub,
  .hp-hero .hero-btns > a, .hp-hero .banner_pagination,
  .hp-hero .banner_prev, .hp-hero .banner_next { animation: none; opacity: 1; }
}

/* 顶部工具条样式已迁至 responsive.css（首页与子页共享，2026-09-23 子页头部对齐） */

/* 窄屏 / 移动端：hero 的 min-height 已由基础规则用 var(--header-total) 统一给出，
   这里只补不同断点下的内边距。原先这里写死过 64px / 58px（比实际页头少 1px 分隔线）。 */
@media (max-width: 1200px) {
  .hp-hero .hero-content { padding: 100px 48px 64px; }
}

/* ---------- Hero 与固定头部严格贴合：占满首屏、无缝隙 ---------- */
#index_main { margin-top: var(--header-total); } /* 页头高度见 style.css 的 :root，窄屏自动跟随 */
/* 原先这里还有 1200 / 600 两档写死的 64px / 58px，已由 :root 变量接管 */

/* 页头底部分隔线与顶部工具条样式见 responsive.css（共享） */

/* 移动端：hero 左右切换箭头隐藏（圆点可切换） */
@media (max-width: 640px) {
  #index_main .banner_prev, #index_main .banner_next { display: none; }
}

/* 窄屏 hero：保持居中版式（与 mpweb 原站一致） --------------------------------
   原站 responsive 只改了两处（标题 36px、hero-content 内边距），对齐方式始终是居中。
   2026-11-01 曾把这里改成整块左对齐来消掉「…方案。」的孤字行，结果两个按钮跟着
   偏到左边，Hero 明显走形——**对齐方式不要为了断行去动**，孤字交给 text-wrap: pretty，
   它只在不产生额外代价时避免末行单字，不支持的浏览器按原样换行，无副作用。
   注意：这里必须是顶层 @media（不能嵌在 980 的块里，那要靠 CSS Nesting，
   老浏览器会整块丢弃）。 */
@media (max-width: 600px) {
.hp-hero .hero-content {
  align-items: center;
  text-align: center;
  /* 左右 48px 不是随手写的：390px 屏可用 294px，正好让 36px 标题每行 8 字，
     第二段断成「拥有更轻、更强、」「更自由的包装保障」——不会把「自由」拆开。
     改成 22px 内边距后每行 10 字，断点会落到「更自 / 由」，比原站难看得多。 */
  padding: 88px 48px 56px;
}
.hp-hero .hero-content .hero-kicker {
  font-size: 12px;
  /* 1px 字距会把 30 多个字符撑宽约 30px，直接把「纸板替代木箱/铁箱」挤到第二行、
     末行只剩一个「箱」。这里收到 .3px，整行 290px 刚好放进 294px 可用宽 */
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.hp-hero .hero-content .hero-title {
  font-size: 36px;
  line-height: 1.3;
}
.hp-hero .hero-content .hero-sub {
  font-size: 17px;
  line-height: 1.8;
  margin-top: 18px;
  /* 中文长段落末行常只剩一两个字（原站是「案。」独占一行）；
     pretty 会在不增加行数的前提下回退断点，把孤字并回去 */
  text-wrap: pretty;
}
.hp-hero .hero-btns {
  margin-top: 28px;
  gap: 12px;
  justify-content: center;
}
.hp-hero .hero-btns a {
  padding: 12px 26px;
  font-size: 15px;
}
}

/* 窄屏再收一档（360 / 375 的安卓与小屏 iPhone） --------------------------------
   36px 字号在 390px 上每行 8 字刚好，但 360px 只剩 264px 可用宽，
   连「让每一件中国制造」9 个字都放不下，「造」会被单独挤到第二行——
   屏幕上就是一行大字配一个孤零零的「造」。这里把字号降到 32px、
   内边距收到 30px（可用 300px），9 字 = 288px 放得下，标题回到 3 行。 */
@media (max-width: 380px) {
.hp-hero .hero-content {
  padding: 80px 30px 48px;
}
.hp-hero .hero-content .hero-title {
  font-size: 32px;
}
.hp-hero .hero-content .hero-sub {
  font-size: 16px;
  margin-top: 16px;
}
.hp-hero .hero-btns {
  margin-top: 24px;
}
.hp-hero .hero-btns a {
  padding: 11px 22px;
  font-size: 14px;
}
}

/* ---------- 背景图改成真实 <img>：让浏览器能懒加载首屏以下的图 ----------
   以前方案、案例、简介、服务、产品、新闻六个区块都用行内 background-image。
   浏览器解析到 URL 就立刻请求，与「这块在不在屏幕里」完全无关——
   首页 29 张图（5.5 MB）因此会在首屏之前全部下载，这才是打开慢的主因。
   换成 <img loading="lazy"> 后，只有滚动到附近才发起请求。

   容器仍由原来的 padding-top / 固定高度控制宽高比，img 绝对定位铺满，
   所以不会出现布局跳动（CLS）。Hero 轮播不参与懒加载（loop 轮播切过去会白屏），
   只按 fetchpriority 排优先级。
   注意：这里只能用 object-fit，不能再用 background-size —— 两者不要同时留。 */
.img-cover {
  position: relative;
  overflow: hidden;
}
.img-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}