/* A restrained motion layer. Layout and content remain usable without JS. */
.top {
  background: rgba(252, 251, 254, .88);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
.intro-video video {
  box-shadow: 0 16px 44px rgba(76, 29, 149, .09);
}
.ceo-portrait {
  box-shadow: 0 16px 36px rgba(23, 21, 31, .08);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn-primary {
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, .18);
  }
  .btn-primary:active { transform: translateY(0) scale(.98); }
  .benefit-options button {
    transition: background .22s ease, border-color .22s ease, transform .22s ease;
  }
  .benefit-options button:hover { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .benefit-options button:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not (backdrop-filter: blur(16px)) {
  .top { background: var(--bg); }
}