/* 益谦官网：hero 与学员作品之间的「实力 + 课程体系」区块（v2） */
#yq-proof {
  --yq-text: #f5f5f7;
  --yq-dim: #86868b;
  --yq-card: #161617;
  --yq-line: rgba(255, 255, 255, 0.1);
  --yq-grad: linear-gradient(90deg, #64d2ff 0%, #0a84ff 45%, #bf5af2 100%);
  position: relative;
  z-index: 3;
  margin-top: clamp(-160px, -14vh, -64px); /* 与 hero 视频末尾的淡出重叠，消除断层 */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 160px);
  color: var(--yq-text);
  font-family: inherit;
}
#yq-proof * { box-sizing: border-box; }
.yq-wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }
.yq-eyebrow {
  margin: 0 0 14px; font-size: 13px; letter-spacing: 0.08em; font-weight: 600;
  background: var(--yq-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.yq-h2 { margin: 0; font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.yq-sub { margin: 16px auto 0; max-width: 620px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--yq-dim); }
.yq-head { text-align: center; }
.yq-nw { display: inline-block; }
.yq-h2, .yq-sub, .yq-desc { text-wrap: balance; }

/* ── 实力数字 ───────────────────────── */
.yq-stats-block { padding: 160px 0 0; }
.yq-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 64px 0 0; padding: 0;
  border-top: 1px solid var(--yq-line); border-bottom: 1px solid var(--yq-line);
}
.yq-stat { padding: 36px 8px 32px; text-align: center; margin: 0; }
.yq-stat + .yq-stat { border-left: 1px solid var(--yq-line); }
.yq-num {
  display: block; font-size: clamp(36px, 5.2vw, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--yq-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.yq-num small { font-size: 0.5em; font-weight: 600; margin-left: 2px; }
.yq-label { display: block; margin: 14px 0 0; font-size: 15px; color: var(--yq-dim); }

/* ── 课程体系 ───────────────────────── */
.yq-course { padding: 140px 24px 0; scroll-margin-top: 40px; }
.yq-track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 56px 0 0; padding: 0; }
.yq-step {
  all: unset; display: block; width: 100%; cursor: pointer; padding: 0 0 14px; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.yq-step:focus-visible { outline: 2px solid #0a84ff; outline-offset: 6px; border-radius: 4px; }
.yq-idx { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--yq-dim); transition: color .3s; }
.yq-name { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; color: var(--yq-dim); transition: color .3s; }
.yq-bar { display: block; height: 2px; margin-top: 14px; background: var(--yq-line); border-radius: 2px; overflow: hidden; }
.yq-bar i { display: block; height: 100%; width: 0; background: var(--yq-grad); }
.yq-step.is-done .yq-bar i { width: 100%; }
.yq-step.is-active .yq-idx { color: var(--yq-text); }
.yq-step.is-active .yq-name { color: var(--yq-text); }
.yq-step:hover .yq-name { color: var(--yq-text); }

.yq-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; align-items: start; }
.yq-media {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #0b0b0c;
  box-shadow: 0 0 0 1px var(--yq-line);
}
.yq-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.yq-media video.is-on { opacity: 1; }
.yq-pill {
  display: inline-block; margin-top: 28px; padding: 5px 12px; font-size: 12px; color: var(--yq-dim);
  border: 1px solid var(--yq-line); border-radius: 999px;
}
.yq-copy { transition: opacity .35s ease, transform .35s ease; }
.yq-copy.is-swapping, .yq-items.is-swapping { opacity: 0; transform: translateY(8px); }
.yq-h3 { margin: 16px 0 0; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.yq-tagline { margin: 8px 0 0; font-size: 17px; color: var(--yq-text); opacity: .8; }
.yq-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--yq-dim); }
.yq-cta { display: inline-block; margin-top: 18px; font-size: 17px; color: #2997ff; text-decoration: none; }
.yq-cta:hover { text-decoration: underline; }

.yq-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; transition: opacity .35s ease, transform .35s ease; }
.yq-item {
  display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 22px 22px 22px 20px;
  background: var(--yq-card); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.yq-item-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: #000; background: var(--yq-text);
}
.yq-item h4 { margin: 3px 0 0; font-size: 17px; font-weight: 600; }
.yq-item p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--yq-dim); }

.yq-perks { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.yq-perk {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 16px;
  background: var(--yq-card); font-size: 15px; font-weight: 500; color: var(--yq-text);
}
.yq-perk svg { flex: none; width: 22px; height: 22px; stroke: url(#yq-g); }

/* ── 引出学员作品 ───────────────────── */
.yq-bridge { padding: 140px 24px 56px; text-align: center; }
.yq-bridge .yq-chev { display: block; margin: 28px auto 0; width: 22px; height: 22px; opacity: .5; animation: yq-bob 2.4s ease-in-out infinite; }
@keyframes yq-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* 法拉利视频顶部从纯黑渐入，与上方区块无缝衔接 */
#video-showcase .vcase-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);
}

/* ── 入场动画 ───────────────────────── */
.yq-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.yq-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .yq-stats-block { padding-top: 120px; }
  .yq-stats { grid-template-columns: repeat(2, 1fr); }
  .yq-stat:nth-child(3) { border-left: 0; }
  .yq-stat:nth-child(n+3) { border-top: 1px solid var(--yq-line); }
  .yq-course { padding-top: 110px; }
  .yq-track { gap: 8px; margin-top: 40px; }
  .yq-name { font-size: 14px; }
  .yq-panel { grid-template-columns: 1fr; gap: 28px; }
  .yq-h3 { font-size: 26px; }
  .yq-perks { grid-template-columns: repeat(2, 1fr); margin-top: 48px; }
  .yq-perk { padding: 14px 14px; font-size: 14px; }
  .yq-bridge { padding-top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .yq-reveal { opacity: 1; transform: none; transition: none; }
  .yq-bridge .yq-chev { animation: none; }
}