* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(20, 184, 166, .13), transparent 30rem),
    radial-gradient(circle at 88% 20%, rgba(245, 158, 11, .10), transparent 32rem),
    #f8fafc;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
}

.dark body {
  background:
    radial-gradient(circle at 12% 8%, rgba(45, 212, 191, .12), transparent 30rem),
    radial-gradient(circle at 88% 20%, rgba(245, 158, 11, .09), transparent 32rem),
    #050b12;
  color: #f8fafc;
}

.surface {
  background: rgba(255, 255, 255, .88);
  border: 1px solid #e2e8f0;
  backdrop-filter: blur(18px);
}

.dark .surface {
  background: rgba(15, 23, 42, .76);
  border-color: rgba(255, 255, 255, .10);
}

.soft-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}

.dark .soft-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
}

.video-cover {
  background:
    radial-gradient(circle at 30% 25%, rgba(45, 212, 191, .34), transparent 32%),
    radial-gradient(circle at 76% 75%, rgba(245, 158, 11, .20), transparent 30%),
    linear-gradient(135deg, #0f172a, #042f2e);
}

.video-modal-dialog {
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.video-modal-close {
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.video-modal-close:hover {
  background: #e2e8f0;
}

.dark .video-modal-dialog {
  color: #f8fafc;
  background: #020617;
  border-color: rgba(255, 255, 255, .10);
}

.dark .video-modal-close {
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .10);
}

.dark .video-modal-close:hover {
  background: rgba(255, 255, 255, .15);
}

.faq-item summary {
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-chevron {
  transition: transform .2s ease;
}

.faq-item[open] .faq-chevron {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}