/* ============================================================
   About-Colloidal-Silica — KV
   Figma: 惠尔特-BOMIN-PIX v3 #470:12693 (1920×850)
   KV 背景图 + 居中标题（蓝/绿双行）+ 副标题
   ============================================================ */

.acs-kv {
  position: relative;
  height: 850px;
  overflow: hidden;
  background: #ECF6FB;
}

.acs-kv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #ECF6FB;   /* 视频加载期/失败时兜底色 */
}

/* 不支持 <video> 的旧浏览器 fallback 图 */
.acs-kv__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.acs-kv__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
  padding: 0 24px;
}

.acs-kv__title {
  font-weight: 700;
  font-size: min(5vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-align: center;
}

.acs-kv__title-line {
  display: block;
}

.acs-kv__title-line--blue {
  color: #3EA8D9;
}

.acs-kv__title-line--green {
  color: #A8CE50;
}

.acs-kv__desc {
  max-width: 1267px;
  font-size: min(1.667vw, 32px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #999999;
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  .acs-kv {
    height: 620px;
  }
  .acs-kv__desc {
    max-width: 90%;
  }
}

@media (max-width: 992px) {
  .acs-kv {
    height: 560px;
  }
  .acs-kv__title {
    font-size: 44px;
  }
  .acs-kv__desc {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .acs-kv {
    height: 480px;
    /* 移动端强制用静态图片背景（隐藏视频），按用户要求使用 about-2-kv.jpg */
    background-image: url("../images/about-2-kv.jpg");
    background-size: cover;
    background-position: center;
  }
  .acs-kv__bg {
    display: none;              /* 移动端不用视频 */
  }
  .acs-kv__inner {
    gap: 24px;
  }
  .acs-kv__title {
    font-size: 38px;
  }
  .acs-kv__desc {
    font-size: 16px;
    line-height: 1.6;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .acs-kv {
    height: 420px;
  }
  .acs-kv__title {
    font-size: 32px;
  }
  .acs-kv__desc {
    font-size: 16px;
  }
}
