/* ==========================================================================
   home-v4.css — 首页新增区块：品牌主张 / 产品中心 / 技术能力 / 解决方案
   规则：选择器统一带 .home-v4 前缀；只使用 home-v3 已定义的 --v3-* token；
        只在 index.html 中、home-v3.css 之后引入。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 品牌主张：Slogan + 业务简介
   -------------------------------------------------------------------------- */
.home-v4 .v4-statement {
  padding-block: calc(var(--v3-section-y) * 0.72);
  border-top: 1px solid var(--v3-line);
  background: var(--v3-paper);
}

.home-v4 .v4-statement__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--v3-space-7);
  align-items: end;
}

.home-v4 .v4-statement__copy .home-kicker {
  display: block;
  margin-bottom: var(--v3-space-4);
  color: var(--v3-red-500);
}

.home-v4 .v4-statement h2 {
  color: var(--v3-ink);
  font-family: var(--v3-display);
  font-size: var(--fs-section-title);
  font-weight: 500;
  line-height: var(--lh-section-title);
  letter-spacing: -0.04em;
}

.home-v4 .v4-statement h2 em {
  color: var(--v3-red-500);
  font-style: normal;
}

.home-v4 .v4-statement__body > p {
  max-width: 530px;
  color: var(--v3-ink-600);
  font: var(--v3-text-base);
}

.home-v4 .v4-statement__modules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v3-space-2);
  margin-top: var(--v3-space-5);
  padding: 0;
  list-style: none;
}

.home-v4 .v4-statement__modules li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-full);
  background: var(--v3-surface);
  color: var(--v3-ink);
  font: var(--v3-text-xs);
}

.home-v4 .v4-statement__modules li span {
  color: var(--v3-red-500);
  font: var(--v3-text-micro);
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   2. 产品中心
   -------------------------------------------------------------------------- */
.home-v4 .v4-products {
  padding-block: calc(var(--v3-section-y) * 0.7);
  border-top: 1px solid var(--v3-line);
  background: var(--v3-surface);
}

.home-v4 .home-section-head h2 {
  font-family: var(--v3-display);
  font-size: var(--fs-section-title);
  font-weight: 500;
  line-height: var(--lh-section-title);
  letter-spacing: -0.04em;
}

.home-v4 .v4-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}

.home-v4 .v4-product {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--v3-space-6) var(--v3-space-5) var(--v3-space-5);
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-md);
  background: var(--v3-surface);
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}

.home-v4 .v4-product::before {
  content: '';
  position: absolute;
  top: -1px;
  left: var(--v3-space-5);
  width: 40px;
  height: 2px;
  background: var(--v3-red-500);
  opacity: 0.5;
  transition: opacity 180ms ease-out;
}

.home-v4 .v4-product:hover {
  border-color: var(--v3-red-edge);
  box-shadow: var(--v3-shadow-1);
  transform: translateY(-2px);
}

.home-v4 .v4-product:hover::before {
  opacity: 1;
}

.home-v4 .v4-product__no {
  color: var(--v3-ink-400);
  font: var(--v3-text-micro);
  letter-spacing: 0.12em;
}

.home-v4 .v4-product h3 {
  margin-top: var(--v3-space-3);
  color: var(--v3-ink);
  font: var(--v3-text-h3);
  letter-spacing: -0.02em;
}

.home-v4 .v4-product > p {
  margin-top: var(--v3-space-2);
  color: var(--v3-ink-600);
  font: var(--v3-text-sm);
}

.home-v4 .v4-check-list {
  display: grid;
  gap: 10px;
  margin-top: var(--v3-space-5);
  padding: var(--v3-space-4) 0 0;
  border-top: 1px dashed var(--v3-line-strong);
  list-style: none;
}

.home-v4 .v4-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--v3-ink);
  font: var(--v3-text-sm);
}

.home-v4 .v4-check-list svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  color: var(--v3-red-500);
}

.home-v4 .v4-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--v3-space-5);
  color: var(--v3-red-500);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: color 150ms ease-out;
}

.home-v4 .v4-card-link span {
  font-size: var(--fs-body);
  transition: transform 150ms ease-out;
}

.home-v4 .v4-card-link:hover {
  color: var(--v3-red-700);
}

.home-v4 .v4-card-link:hover span {
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   3. 技术能力
   -------------------------------------------------------------------------- */
.home-v4 .v4-tech {
  padding-block: calc(var(--v3-section-y) * 0.7);
  border-top: 1px solid var(--v3-line);
  background: var(--v3-paper);
}

.home-v4 .v4-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--v3-space-7);
  border-top: 1px solid var(--v3-line-strong);
}

.home-v4 .v4-tech-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--v3-space-2) var(--v3-space-3);
  padding: var(--v3-space-6) 0;
  border-bottom: 1px solid var(--v3-line-strong);
}

.home-v4 .v4-tech-card__no {
  padding-top: 5px;
  color: var(--v3-ink-400);
  font: var(--v3-text-micro);
  letter-spacing: 0.12em;
}

.home-v4 .v4-tech-card h3 {
  color: var(--v3-ink);
  font: var(--v3-text-h3);
  letter-spacing: -0.02em;
}

.home-v4 .v4-tech-card p {
  max-width: 460px;
  margin-top: var(--v3-space-2);
  color: var(--v3-ink-600);
  font: var(--v3-text-sm);
}

.home-v4 .v4-tech-card__tag {
  display: inline-block;
  margin-top: var(--v3-space-3);
  padding: 4px 8px;
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-full);
  background: var(--v3-surface);
  color: var(--v3-gold-600);
  font: var(--v3-text-micro);
  letter-spacing: 0.1em;
}

.home-v4 .v4-tech .home-all-link {
  margin-top: var(--v3-space-6);
}

/* --------------------------------------------------------------------------
   4. 解决方案
   -------------------------------------------------------------------------- */
.home-v4 .v4-solutions {
  padding-block: calc(var(--v3-section-y) * 0.7);
  border-top: 1px solid var(--v3-line);
  background: var(--v3-surface);
}

.home-v4 .v4-solution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}

.home-v4 .v4-solution {
  position: relative;
  padding: var(--v3-space-6);
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius-md);
  background: var(--v3-surface);
  transition: border-color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}

.home-v4 .v4-solution:hover {
  border-color: var(--v3-red-edge);
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow-1);
}

.home-v4 .v4-solution__no {
  color: var(--v3-red-500);
  font: var(--v3-text-micro);
  letter-spacing: 0.12em;
}

.home-v4 .v4-solution h3 {
  margin-top: var(--v3-space-3);
  color: var(--v3-ink);
  font: var(--v3-text-h3);
  letter-spacing: -0.02em;
}

.home-v4 .v4-solution p {
  margin-top: var(--v3-space-2);
  color: var(--v3-ink-600);
  font: var(--v3-text-sm);
}

.home-v4 .v4-solutions .home-all-link {
  margin-top: var(--v3-space-6);
}

/* --------------------------------------------------------------------------
   5. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-v4 .v4-statement__inner {
    grid-template-columns: 1fr;
    gap: var(--v3-space-5);
    align-items: start;
  }
}

@media (max-width: 900px) {
  .home-v4 .v4-product-grid {
    grid-template-columns: 1fr;
  }

  .home-v4 .v4-check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--v3-space-5);
  }
}

@media (max-width: 768px) {
  .home-v4 .v4-statement h2,
  .home-v4 .home-section-head h2 {
    font-size: var(--fs-section-title);
    line-height: var(--lh-section-title);
  }

  .home-v4 .v4-tech-grid,
  .home-v4 .v4-solution-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .home-v4 .v4-tech-card {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: var(--v3-space-5) 0;
  }

  .home-v4 .v4-tech-card__no {
    padding-top: 4px;
  }

  .home-v4 .v4-solution {
    padding: var(--v3-space-5);
  }
}

@media (max-width: 520px) {
  .home-v4 .v4-check-list {
    grid-template-columns: 1fr;
  }

  .home-v4 .v4-statement__modules li {
    font-size: var(--fs-xs);
  }
}

/* --------------------------------------------------------------------------
   6. prefers-reduced-motion 降级
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-v4 .v4-product,
  .home-v4 .v4-product::before,
  .home-v4 .v4-card-link,
  .home-v4 .v4-card-link span,
  .home-v4 .v4-solution {
    transition: none;
  }

  .home-v4 .v4-product:hover,
  .home-v4 .v4-card-link:hover span {
    transform: none;
  }
}