/* K’ASA visual polish: architectural grid + menu underline */
:root {
  --kasa-grid-size: 32px;
  --kasa-grid-line: rgba(126, 94, 255, 0.09);
  --kasa-violet: #7e5eff;
  --kasa-magenta: #dc6a79;
  --kasa-coral: #ff6e6b;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* A quiet architectural grid remains visible across the full composition. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(to right, var(--kasa-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kasa-grid-line) 1px, transparent 1px);
  background-size: var(--kasa-grid-size) var(--kasa-grid-size);
  mix-blend-mode: multiply;
}

/* Matches the reference: a short gradient rule appears below every top-menu link. */
header nav a {
  position: relative;
  isolation: isolate;
  padding-bottom: 6px;
  transition: color 180ms ease;
}

header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kasa-violet), var(--kasa-magenta), var(--kasa-coral));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}

header nav a:hover,
header nav a:focus-visible,
header nav a[aria-current="page"] {
  color: var(--kasa-violet) !important;
}

header nav a:hover::after,
header nav a:focus-visible::after,
header nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

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

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