html {
  scroll-behavior: smooth;
}

body {
  font-family: "Space Grotesk", sans-serif;
}

.preloader {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-mark {
  animation: pulseLogo 1.35s ease-in-out infinite;
}

.progress-bar {
  transform-origin: left;
  animation: loadingBar 1.4s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms ease;
}

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

.nav-link.active {
  color: #2b4bee;
}

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}

.mobile-menu.is-open {
  max-height: 28rem;
}

.btn-motion,
.card-motion {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.btn-motion:hover {
  transform: translateY(-1px) scale(1.015);
}

.card-motion:hover {
  transform: translateY(-4px);
}

.mesh-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(43, 75, 238, 0.18), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(225, 29, 72, 0.14), transparent 30%),
    radial-gradient(circle at 50% 84%, rgba(124, 58, 237, 0.14), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
}

.dark .mesh-bg {
  background:
    radial-gradient(circle at 20% 20%, rgba(43, 75, 238, 0.26), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(225, 29, 72, 0.16), transparent 30%),
    radial-gradient(circle at 50% 84%, rgba(124, 58, 237, 0.18), transparent 34%),
    linear-gradient(180deg, #080b18 0%, #101322 100%);
}

.fiber-visual {
  background:
    linear-gradient(135deg, rgba(43, 75, 238, 0.95), rgba(124, 58, 237, 0.82) 55%, rgba(239, 68, 68, 0.72)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 56px);
}

.fiber-line {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent);
  animation: sweep 5s linear infinite;
}

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 280ms ease;
}

.accordion-item.is-open .accordion-panel {
  max-height: 12rem;
}

.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
}

@keyframes pulseLogo {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes loadingBar {
  0% {
    transform: scaleX(0.12);
  }
  55% {
    transform: scaleX(0.82);
  }
  100% {
    transform: scaleX(0.12);
  }
}

@keyframes sweep {
  from {
    transform: translateX(-35%);
  }
  to {
    transform: translateX(135%);
  }
}