/* ===== HOME · 清新柔和 ===== */

/* HERO — 薄荷奶白渐变 + 柔和色块 + 右侧示意图 */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--color-bg-alt) 0%, #eafaf5 45%, var(--color-bg-warm) 100%);
  padding: calc(var(--nav-height) + var(--space-3xl)) 0 var(--space-4xl);
  overflow: hidden;
}
.hero::before { content: ''; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: var(--color-primary); opacity: 0.08; }
.hero::after { content: ''; position: absolute; bottom: -160px; left: -90px; width: 400px; height: 400px; border-radius: 50%; background: var(--color-accent); opacity: 0.08; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-3xl); align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark); background: #fff;
  border: 1px solid var(--color-border);
  padding: 8px 18px; border-radius: var(--radius-full); margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.hero__badge .icon { color: var(--color-accent-dark); }
.hero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.14; margin-bottom: var(--space-lg); }
.hero h1 .hl { color: var(--color-primary); }
.hero p { color: var(--color-text); font-size: var(--font-size-md); margin-bottom: var(--space-2xl); max-width: 500px; }
.hero__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.hero__trust { display: flex; align-items: center; gap: var(--space-lg); margin-top: var(--space-2xl); color: var(--color-text); font-size: var(--font-size-sm); }
.hero__trust .avatars { display: flex; }
.hero__trust .avatars img { width: 40px; height: 40px; border-radius: var(--radius-full); border: 3px solid #fff; margin-left: -12px; box-shadow: var(--shadow-sm); }
.hero__trust .avatars img:first-child { margin-left: 0; }
.hero__trust b { color: var(--color-heading); }
.hero__visual { position: relative; }
.hero__visual img { width: 100%; height: auto; }
@media (max-width: 992px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .hero__visual { max-width: 480px; margin: 0 auto; }
}

/* 数据小卡（hero 下方功能 tile 行）已在 service-card 中复用 */

/* ABOUT 简介 + 数字统计（左文右数字卡）*/
.home-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4xl); align-items: center; }
.home-about__text .pill { margin-bottom: var(--space-lg); }
.home-about__text h2 { margin-bottom: var(--space-lg); }
.home-about__text p { color: var(--color-text); margin-bottom: var(--space-lg); }
.home-about__list { display: grid; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-xl); }
.home-about__list li { display: flex; align-items: flex-start; gap: var(--space-md); }
.home-about__list .ic { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; margin-top: 2px; }
.home-about__list b { color: var(--color-heading); }
.home-about__visual { position: relative; }
.home-about__visual > img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/3.4; object-fit: cover; }
.home-about__float { position: absolute; bottom: -26px; left: -26px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-lg) var(--space-xl); display: flex; align-items: center; gap: var(--space-md); }
.home-about__float .tile { width: 50px; height: 50px; font-size: 22px; border-radius: var(--radius-md); }
.home-about__float .big { font-size: var(--font-size-xl); font-weight: var(--font-weight-extrabold); color: var(--color-primary); line-height: 1; }
.home-about__float .sm { font-size: var(--font-size-xs); color: var(--color-text-light); }
@media (max-width: 992px) { .home-about__grid { grid-template-columns: 1fr; gap: var(--space-3xl); } }

/* STATS 在浅青底带上 */
.home-stats { background: var(--color-primary-light); }

/* 精选案例：首页用 grid-3 复用 case-card */

/* 服务方案/流程：复用 process（首页4步）*/
.home-process { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) { .home-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .home-process { grid-template-columns: 1fr; } }