:root {
  --navy: #07162f;
  --muted: #526173;
  --cyan: #00c2ff;
  --violet: #7c3aed;
  --pink: #ff3d9a;
  --lime: #a3e635;
  --orange: #ff8a00;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--navy);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: geometricPrecision;
}

.gradient-text {
  background: linear-gradient(120deg, #00a7ff 0%, #7c3aed 38%, #ff3d9a 68%, #ff8a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mesh-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 194, 255, 0.28), transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(255, 61, 154, 0.22), transparent 32%),
    radial-gradient(circle at 72% 76%, rgba(163, 230, 53, 0.26), transparent 30%),
    linear-gradient(135deg, #f8fdff 0%, #ffffff 42%, #f9f5ff 100%);
}

.mesh-hero::before,
.mesh-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.mesh-hero::before {
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(0, 194, 255, 0.18) 38%, transparent 42%),
    linear-gradient(58deg, transparent 0 55%, rgba(255, 138, 0, 0.16) 57%, transparent 60%);
  animation: lightSweep 12s ease-in-out infinite alternate;
}

.mesh-hero::after {
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(7, 22, 47, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 22, 47, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 60% 35%, black 0%, transparent 70%);
}

.signal-card {
  box-shadow: 0 24px 70px rgba(32, 42, 68, 0.12);
  animation: floatSoft 7s ease-in-out infinite;
}

.signal-card:nth-child(2) {
  animation-delay: -2s;
}

.signal-card:nth-child(3) {
  animation-delay: -4s;
}

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

.lift-card:hover {
  border-color: rgba(124, 58, 237, 0.28);
  box-shadow: 0 26px 70px rgba(31, 41, 55, 0.12);
  transform: translateY(-6px);
}

.nav-link {
  color: rgba(7, 22, 47, 0.72);
  font-weight: 700;
  transition: color 160ms ease;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--violet);
}

.icon-tile {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.legal-copy h2 {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 900;
  margin-top: 2.25rem;
}

.legal-copy p,
.legal-copy li {
  color: var(--muted);
  line-height: 1.85;
}

.legal-copy ul {
  list-style: disc;
  margin-left: 1.25rem;
}

.cookie-banner {
  transform: translateY(120%);
  transition: transform 260ms ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

@keyframes lightSweep {
  0% {
    transform: translate3d(-3%, -2%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(4%, 2%, 0) rotate(3deg);
  }
}

@keyframes floatSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}