/* ---------- Hero media buttons (same size and style as the other .btn variants) ---------- */
.btn-demo, .btn-res { font: inherit; font-family: var(--f-body); font-weight: 600; font-size: 1rem; }

/* play icon on "Watch Demo Video" */
.play-ic { position: relative; display: inline-flex; color: var(--orange-600); }
.play-ic .i { width: 1.3rem; height: 1.3rem; transition: scale 0.35s cubic-bezier(0.3, 1.5, 0.4, 1); }
.play-ic .fill { fill: currentColor; stroke: none; }
/* soft ring that radiates from the icon on hover */
.play-ic::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid currentColor;
  opacity: 0; scale: 0.8; pointer-events: none;
}
.btn-demo:hover .play-ic .i { scale: 1.12; }

/* PDF icon on "Explore Resources" */
.btn-res .pdf-ic { transition: rotate 0.35s cubic-bezier(0.3, 1.5, 0.4, 1); }
.btn-res:hover .pdf-ic { rotate: -8deg; }

@media (prefers-reduced-motion: no-preference) {
  .btn-demo:hover .play-ic::after { animation: play-ring 1.2s ease-out infinite; }
}
@keyframes play-ring { from { opacity: 0.6; scale: 0.9; } to { opacity: 0; scale: 1.7; } }

/* ---------- Video lightbox ---------- */
.demo-frame { position: relative; aspect-ratio: 16 / 9; max-height: calc(100dvh - 32px - 60px); background: #000; }
.demo-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* spinner while the video is loading or buffering */
.demo-frame::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: var(--orange-600);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  animation: demo-spin 0.9s linear infinite;
}
.demo-frame.is-loading::after { opacity: 1; }
@keyframes demo-spin { to { rotate: 360deg; } }

/* ---------- PDF lightbox ---------- */
.modal-pdf { width: min(1100px, calc(100vw - 32px)); }
.pdf-frame { height: min(78dvh, 820px); background: #525659; }
.pdf-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdf-card { display: none; }

@media (max-width: 760px) {
  .pdf-frame { display: none; }
  .pdf-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem;
    padding: 1.8rem 1.2rem 1.6rem; background: linear-gradient(135deg, #15163d, #202158); color: #cfd0e6;
  }
  .pdf-badge {
    width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.4rem;
    background: var(--orange); color: #fff; box-shadow: 0 0 0 8px rgba(255, 152, 0, 0.16);
  }
  .pdf-badge .i { width: 2.2rem; height: 2.2rem; }
  .pdf-card b { font-family: var(--f-head); color: #fff; font-size: 1.02rem; line-height: 1.35; }
  .pdf-card small { font-size: 0.85rem; }
  .pdf-card-btns { display: grid; gap: 0.6rem; width: 100%; margin-top: 1rem; }
  .pdf-card-btns .modal-btn { justify-content: center; height: 48px; }
}