/* 首页 · 数据条、合作层级、G2 主推 */

/* 首屏第 2 屏：G2 渲染图压到下半屏，左右与顶部渐隐进黑底，避免与文案重叠 */
.slide__media--render { background: #000; }
.slide__media--render > img {
  position: absolute; left: 50%; bottom: 0; width: auto; height: min(68%, 100% - 300px); max-width: none;
  translate: -50% 0; object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 28%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 28%);
  mask-composite: intersect;
}
@media (max-width: 720px) {
  .slide__media--render > img {
    width: 108%; height: auto; bottom: 16%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 24%, #000 76%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 24%, #000 76%, transparent);
  }
}

/* 数据条 */
.stats { background: var(--bg-0); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { padding: clamp(36px, 4vw, 56px) var(--s-5); display: grid; gap: 6px; }
.stat + .stat { box-shadow: inset 1px 0 0 var(--line); }
.stat .num { font-size: clamp(36px, 3.8vw, 56px); line-height: 1; color: var(--ink-hi); }
.stat p:last-child { font-size: 14px; color: var(--ink-lo); }
.stats__note { padding: 0 var(--s-5) var(--s-5); text-align: right; }
@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 28px var(--s-4); box-shadow: inset 0 -1px 0 var(--line); }
  .stat + .stat { box-shadow: inset 0 -1px 0 var(--line); }
  .stat:nth-child(even) { box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .stat:last-child { grid-column: 1 / -1; }
  .stats__note { text-align: left; padding: var(--s-4); }
}

/* 合作层级 */
.tiers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.tier {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: var(--r-card); background: #fff; box-shadow: 0 0 0 1px var(--paper-line);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-slow) var(--ease);
}
.tier:hover { box-shadow: 0 0 0 1px color-mix(in oklch, var(--brand) 55%, transparent), 0 24px 48px -28px rgb(14 20 28 / 0.35); transform: translateY(-4px); }
.tier__media { aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(#fff, var(--paper-2)); display: grid; place-items: center; }
.tier__media img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--t-slow) var(--ease); }
.tier__media--photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.tier:hover .tier__media img { transform: scale(1.045); }
.tier__body { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-6); }
.tier__idx { font-size: 13px; color: var(--brand); letter-spacing: 0.1em; }
.tier h3 { font-size: var(--fs-h3); color: var(--ink); }
.tier h3 a::after { content: ""; position: absolute; inset: 0; }
.tier__fit { font-size: 14px; color: var(--ink-2); }
.tier dl { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--paper-line); display: grid; gap: 4px; font-size: 14px; }
.tier dt { color: var(--ink-2); font-size: 12px; letter-spacing: 0.06em; }
.tier dd { color: var(--ink); margin-bottom: var(--s-3); line-height: 1.6; }
.tier__cta { position: relative; z-index: 1; justify-self: start; margin-top: var(--s-2); }

.ladder { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
.ladder__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ladder__bar span { height: 4px; border-radius: 2px; background: var(--brand); }
.ladder__bar span:nth-child(1) { opacity: 0.25; }
.ladder__bar span:nth-child(2) { opacity: 0.5; }
.ladder__bar span:nth-child(3) { opacity: 0.75; }
.ladder__labels { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 14px; color: var(--ink-2); }
.ladder p { font-size: 15px; color: var(--ink); }
@media (max-width: 1100px) { .tiers__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .tiers__grid { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 38% 1fr; grid-template-rows: none; }
  .tier__media { aspect-ratio: auto; }
  .tier__body { padding: var(--s-4); }
  .tier dl { margin-top: var(--s-2); padding-top: var(--s-2); }
}

/* G2 主推 */
.g2 { overflow: hidden; padding-bottom: clamp(64px, 8vw, 120px); }
.g2__stage { margin: clamp(-24px, -2vw, 0px) auto 0; max-width: 1680px; }
.g2__stage img {
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(#000 74%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(#000 74%, transparent);
  mask-composite: intersect;
}
.specs { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: clamp(-40px, -3vw, 0px); position: relative; }
.specs li { padding: var(--s-5) var(--s-4) 0; box-shadow: inset 0 1px 0 var(--line-strong); display: grid; gap: 6px; }
.specs .num { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; white-space: nowrap; }
.specs p:last-child { font-size: 14px; color: var(--ink-lo); }
.g2 .links { justify-content: center; margin-top: var(--s-8); }
@media (max-width: 900px) {
  .specs { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); margin-top: var(--s-5); }
}
@media (max-width: 560px) { .specs { grid-template-columns: repeat(2, 1fr); } }