.theme-video-section {
  padding: clamp(68px, 8vw, 108px) 0;
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(135deg, #eef6fb, #f8fafc 58%, #edf1f6);
  border-block: 1px solid rgba(57, 121, 173, .13);
}

.theme-video-section::before,
.theme-video-section::after {
  content: "";
  aspect-ratio: 1;
  position: absolute;
  border: 1px solid rgba(57, 121, 173, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(91, 196, 241, .025), 0 0 0 116px rgba(57, 121, 173, .02);
  pointer-events: none;
  will-change: transform;
}

.theme-video-section::before {
  width: clamp(420px, 46vw, 760px);
  left: -18%;
  top: -72%;
  animation: theme-video-ring-one 32s ease-in-out infinite;
}

.theme-video-section::after {
  width: clamp(360px, 38vw, 620px);
  right: -14%;
  bottom: -66%;
  border-color: rgba(91, 196, 241, .1);
  animation: theme-video-ring-two 37s ease-in-out infinite;
}

@keyframes theme-video-ring-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7vw, 34px, 0) scale(1.03); }
}

@keyframes theme-video-ring-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-8vw, -28px, 0) scale(.98); }
}

.theme-video-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.theme-video-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 196, 241, .28);
  border-radius: 24px;
  background: #0c1730;
  box-shadow: 0 24px 58px rgba(19, 18, 45, .18);
}

.theme-video-frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: #0c1730;
}

.theme-video-placeholder {
  min-height: 0;
  aspect-ratio: 16 / 9;
  padding: clamp(28px, 5vw, 64px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  background: radial-gradient(circle at 79% 23%, rgba(91, 196, 241, .23), transparent 28%), linear-gradient(125deg, #0b1845, #103887 62%, #176fa8);
}

.theme-video-placeholder::before,
.theme-video-placeholder::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  pointer-events: none;
}

.theme-video-placeholder::before { width: 66%; right: -18%; top: -34%; box-shadow: 0 0 0 34px rgba(91,196,241,.035), 0 0 0 86px rgba(255,255,255,.018); }
.theme-video-placeholder::after { width: 38%; left: -11%; bottom: -31%; box-shadow: 0 0 0 24px rgba(91,196,241,.03); }
.theme-video-placeholder span,
.theme-video-placeholder strong,
.theme-video-placeholder small { position: relative; z-index: 1; }
.theme-video-placeholder span { color: #86d9f7; font-size: .75rem; font-weight: 900; letter-spacing: .2em; }
.theme-video-placeholder strong { margin: 12px 0 16px; font-size: clamp(2.3rem,5vw,5rem); line-height: .95; }
.theme-video-placeholder small { color: #c8deee; font-size: clamp(.72rem,1.2vw,.92rem); font-weight: 750; letter-spacing: .08em; }

.theme-video-copy .eyebrow { margin-bottom: 17px; }
.theme-video-copy h2 { margin-bottom: 20px; color: var(--navy); font-size: clamp(2.35rem, 4vw, 4rem); }
.theme-video-copy > p:not(.eyebrow):not(.theme-video-meta) { margin: 0; color: var(--muted); font-size: 1.04rem; }
.theme-video-meta { margin: 23px 0 0; color: #315878; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.scan-page .theme-video-section {
  margin-top: 88px;
  margin-bottom: -90px;
  color: var(--ink);
}

@media (max-width: 900px) {
  .theme-video-row { grid-template-columns: 1fr; }
  .theme-video-copy { max-width: 760px; }
}

@media (max-width: 620px) {
  .theme-video-section { padding: 55px 0 62px; }
  .theme-video-frame { border-radius: 15px; }
  .theme-video-copy h2 { font-size: clamp(2.1rem, 10vw, 3rem); }
  .scan-page .theme-video-section { margin-top: 58px; margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-video-section::before,
  .theme-video-section::after { animation: none; }
}
