/* ============================================================
   宣传视频区块
   ============================================================ */
.promo-video { max-width: 940px; margin-left: auto; margin-right: auto; }

.promo-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #2c3a20;
  background: #0b1206;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(140, 226, 42, .07) inset;
  aspect-ratio: 16 / 9;
}
.promo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: inset 0 0 60px rgba(140, 226, 42, .10);
  z-index: 2;
}
.promo-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b1206;
}

.promo-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 2px solid rgba(140, 226, 42, .55);
  background: rgba(10, 14, 7, .72);
  color: #8ce22a;
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, background .25s;
  z-index: 3;
}
.promo-play svg { width: 30px; height: 30px; margin-left: 3px; }
.promo-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(140, 226, 42, .16);
  box-shadow: 0 0 34px rgba(140, 226, 42, .45);
}
.promo-play::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(140, 226, 42, .35);
  animation: promoPulse 2.4s ease-out infinite;
}
@keyframes promoPulse {
  0% { transform: scale(.9); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.promo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(140, 226, 42, .10), transparent 70%),
    #0b1206;
}
.promo-fallback .pf-icon { font-size: 40px; }
.promo-fallback .pf-title { font-size: 15px; font-weight: 800; color: #eaf1e2; }
.promo-fallback .pf-desc { font-size: 12.5px; color: #8b9a7c; line-height: 1.7; }
.promo-fallback code {
  background: rgba(140, 226, 42, .12);
  color: #c9f08c;
  padding: 1px 6px;
  border-radius: 5px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11.5px;
}

@media (max-width: 640px) {
  .promo-play { width: 58px; height: 58px; }
  .promo-play svg { width: 24px; height: 24px; }
  .promo-frame { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-play::after { animation: none; }
}