/* ============================================================
   VSL
   ============================================================ */
.vsl{background:var(--paper);padding:120px 0}
.vsl-inner{max-width:1140px;margin:0 auto;padding:0 32px}
.vsl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px;flex-wrap:wrap}
.vsl-head .label{font-family:var(--f-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.vsl-head .label .yellow-dot{width:10px;height:10px;background:var(--yellow);display:inline-block;margin-right:10px;vertical-align:0}
.vsl-head h2{font-family:var(--f-display);font-weight:900;font-size:clamp(28px,3.5vw,44px);letter-spacing:-0.03em;line-height:1;margin:8px 0 0;max-width:680px}
.vsl-frame{
  position:relative;background:var(--black);aspect-ratio:16/9;width:100%;
  border:1px solid var(--ink-2);
  overflow:hidden;
}
.vsl-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.5) 100%),
    repeating-linear-gradient(135deg, rgba(255,210,0,0.04) 0 14px, transparent 14px 28px);
}
.vsl-frame.playing::before{display:none}
.vsl-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:transparent;border:0;color:#fff;
}
.vsl-play .play-circle{
  width:120px;height:120px;background:var(--yellow);color:var(--black);
  display:flex;align-items:center;justify-content:center;
  font-size:48px;line-height:1;border-radius:50%;
  transition:transform .2s ease, background .15s ease;
  position:relative;
}
.vsl-play .play-circle::after{
  content:"";position:absolute;inset:-12px;border:2px solid var(--yellow);border-radius:50%;opacity:0.5;
}
.vsl-play:hover .play-circle{transform:scale(1.06);background:var(--yellow-hot)}
.vsl-play .play-circle .tri{
  width:0;height:0;
  border-left:28px solid var(--black);
  border-top:16px solid transparent;border-bottom:16px solid transparent;
  margin-left:6px;
}
.vsl-tag{
  position:absolute;top:24px;left:24px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-d);
}
.vsl-yt-link{
  position:absolute;top:24px;right:24px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#fff;
  text-decoration:none;background:rgba(0,0,0,0.55);padding:8px 12px;border:1px solid rgba(255,255,255,0.2);
  transition:background .15s ease, color .15s ease, border-color .15s ease;z-index:3;
}
.vsl-yt-link:hover{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.vsl-frame.playing .vsl-yt-link{display:none}
.vsl-bottom{
  position:absolute;bottom:0;left:0;right:0;
  padding:24px;background:linear-gradient(transparent, rgba(0,0,0,0.65));
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  color:#fff;
}
.vsl-bottom .title{font-family:var(--f-display);font-weight:800;font-size:22px;letter-spacing:-0.01em}
.vsl-bottom .dur{font-family:var(--f-mono);font-size:12px;color:var(--muted-dd);letter-spacing:0.06em}
.vsl-anchor{
  margin-top:32px;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
  border-top:1px solid var(--rule-soft);padding-top:32px;
}
.vsl-anchor p{font-family:var(--f-body);font-size:17px;line-height:1.55;color:#2A2A28;margin:0;max-width:720px}
.vsl-anchor p b{font-weight:600;color:var(--black)}
.vsl-anchor .arrow-down{font-family:var(--f-display);font-weight:900;font-size:48px;color:var(--blue);line-height:1}

@media (max-width:900px){
  .vsl{padding:80px 0}
  .vsl-play .play-circle{width:80px;height:80px;font-size:32px}
  .vsl-play .play-circle .tri{border-left:18px solid var(--black);border-top:11px solid transparent;border-bottom:11px solid transparent}
  .vsl-anchor{grid-template-columns:1fr;gap:16px}
}