:root {
  --brand: #005588;
  --brand-dark: #004a70;
  --brand-light: #5eb3d9;
}

#intro canvas {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}

.hero-vanta-overlay {
  background:
    linear-gradient(
      to right,
      rgba(9, 9, 11, 0.82) 0%,
      rgba(9, 9, 11, 0.5) 42%,
      rgba(9, 9, 11, 0.12) 100%
    ),
    linear-gradient(
      to top,
      rgba(9, 9, 11, 0.7) 0%,
      transparent 45%
    );
}

.hero-title {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.25);
}

.hero-subline {
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-subline.is-fading {
  opacity: 0;
  transform: translateY(8px);
}

html {
  scroll-behavior: smooth;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

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

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.tech-logo {
  height: 48px;
  width: auto;
  opacity: 0.7;
  filter: grayscale(100%);
  transition: opacity 0.2s, filter 0.2s;
}

.tech-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.nav-link-active {
  color: var(--brand) !important;
}

#site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#site-header.is-scrolled .nav-link {
  color: #18181b;
}

#site-header.is-scrolled .nav-link:hover,
#site-header.is-scrolled .nav-link-active {
  color: var(--brand) !important;
}

#site-header.is-scrolled .site-logo {
  filter: brightness(0) saturate(100%);
}

#site-header.is-scrolled #mobile-nav-toggle {
  color: #18181b;
}

#back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.testimonial-slide {
  display: none;
}

.testimonial-slide.is-active {
  display: block;
}