body {
  font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif !important;
  scroll-behavior: smooth !important;
  background-color: #fff;
}

.text-cyan-link {
  color: rgb(52, 191, 255);
}

/* Spacing tokens */
.x-gap {
  padding-left: 10%;
  padding-right: 10%;
}

.top-gap {
  padding-top: 6rem;
}

@media (max-width: 1200px) {
  .x-gap {
    padding-left: 6%;
    padding-right: 6%;
  }
}

@media (max-width: 768px) {
  .x-gap {
    padding-left: 4%;
    padding-right: 4%;
  }
}

/* Color utilities */
.text-blue {
  color: #002f5d !important;
}

.text-cyan {
  color: rgb(52, 191, 255) !important;
}

.bg-blue {
  background-color: #002f5d !important;
}

.bg-smoke {
  background-color: rgb(245, 245, 245) !important;
}

.uppercase {
  text-transform: uppercase !important;
}

/* XXXL breakpoint helpers (>=1800px) */
.d-xxxl-inline,
.d-xxxl-block {
  display: none;
}

@media screen and (min-width: 1800px) {
  .d-xxxl-inline {
    display: inline-block !important;
  }
  .d-xxxl-block {
    display: block !important;
  }
}

/* Entrance animation */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect user motion preferences — kill animations + transitions for users
   who set prefers-reduced-motion. Caveats: this lives in the light DOM, so it
   applies to global styles only. Shadow DOM components must declare their
   own prefers-reduced-motion blocks. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Cross-document View Transitions — soften the white flash between page loads.
   Browsers that don't support @view-transition simply fall back to the default
   instant swap, so no JS feature detection needed. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}