.video-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1.75rem;
  border: 1px solid rgba(0, 79, 255, 0.2);
  background: #0c1a2e;
  box-shadow: 0 30px 60px -40px rgba(12, 26, 46, 0.7);
}

.video-shell iframe,
.video-shell button {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .video-shell {
    height: 0;
    max-width: 100%;
    padding-bottom: 56.25%;
    aspect-ratio: auto;
    background: transparent;
    box-shadow: none;
  }
}

.icon-box svg {
  display: block;
  flex-shrink: 0;
}

@keyframes timeline-dash-flow {
  to {
    stroke-dashoffset: -32;
  }
}

.timeline-path-dash {
  stroke-dasharray: 8 8;
  animation: timeline-dash-flow 1s linear infinite;
}

@keyframes v16-brands-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.v16-brands-marquee-track {
  display: flex;
  width: max-content;
  animation: v16-brands-marquee 36s linear infinite;
  will-change: transform;
}

.v16-brands-marquee:hover .v16-brands-marquee-track {
  animation-play-state: paused;
}

@keyframes security-connector-flash {
  0%,
  100% {
    opacity: 0;
    transform: rotate(var(--line-angle, 0deg)) scaleX(0.15);
  }
  38%,
  52% {
    opacity: 0.75;
    transform: rotate(var(--line-angle, 0deg)) scaleX(1);
  }
}

.security-connector-line {
  animation: security-connector-flash 3.2s ease-in-out infinite;
}

@keyframes security-spark-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x, 0px)), calc(-50% + var(--spark-y, 0px)))
      scale(0.25);
  }
}

.security-spark {
  animation: security-spark-burst 2.6s ease-out infinite;
}

@keyframes security-halo-tilt {
  0%,
  100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) rotate(var(--halo-tilt, 0deg)) scale(0.9);
  }
  42% {
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(calc(var(--halo-tilt, 0deg) + 14deg)) scale(1.07);
  }
}

.security-halo-tilt {
  animation: security-halo-tilt 4.2s ease-in-out infinite;
}

.security-halo-tilt-delayed {
  animation: security-halo-tilt 4.2s ease-in-out infinite;
  animation-delay: 1.6s;
}

.contact-map-pattern {
  background-image:
    radial-gradient(circle at 25% 35%, rgba(0, 81, 255, 0.14), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(0, 81, 255, 0.1), transparent 40%),
    linear-gradient(rgba(0, 81, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 81, 255, 0.11) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    40px 40px,
    40px 40px;
  background-position:
    center,
    center,
    center,
    center;
}

@keyframes reveal-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.reveal-fade-in-up {
  animation: reveal-fade-in-up 0.7s ease-out both;
}

@supports (animation-timeline: view()) {
  .reveal-fade-in-up {
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
}

.faq-panel.is-open {
  grid-template-rows: 1fr;
}

.faq-panel-body {
  overflow: hidden;
}

.faq-panel-inner {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.faq-panel.is-open .faq-panel-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.how-it-works-carousel-track {
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.security-effects-layer {
  contain: layout paint;
}

.hero-halo {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle, var(--halo-color, rgba(0, 79, 255, 0.22)) 0%, transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-fade-in-up,
  .how-it-works-carousel-track,
  .faq-panel,
  .faq-panel-inner,
  .timeline-path-dash,
  .v16-brands-marquee-track,
  .security-connector-line,
  .security-spark,
  .security-halo-tilt,
  .security-halo-tilt-delayed {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.brand-shimmer {
  animation: brand-shimmer 3.8s linear infinite;
  will-change: background-position;
}

@keyframes brand-shimmer {
  0% {
    background-position: 150% 50%;
  }
  100% {
    background-position: -50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-shimmer {
    animation: none;
  }
}