:root {
  --btn-hover-lift: -1px;
  --btn-active-lift: 0px;
  --btn-focus-ring: 0 0 0 3px rgba(109, 240, 255, 0.25);
}

button,
a.btn,
a.primary,
a.ghost,
a.nav-cta,
a.mockup-btn,
a.cta,
.dash-btn,
.btn.primary,
.btn.secondary,
.btn.ghost,
.primary,
.ghost,
.nav-cta,
.mockup-btn,
.cta {
  position: relative;
  transition: box-shadow 160ms ease, filter 160ms ease;
}

a.nav-cta,
a.cta {
  color: #ecf1ff !important;
  text-decoration: none;
}

a.nav-cta:visited,
a.cta:visited {
  color: #ecf1ff !important;
}

.nav-cta {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.dashboard-link {
  color: #ecf1ff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  position: relative;
}

.dashboard-link:visited {
  color: #ecf1ff !important;
}

.nav-link,
.nav-link:visited {
  color: #ecf1ff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  position: relative;
}

.nav-link.is-active,
.dashboard-link.is-active {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(109, 240, 255, 0.12);
  border: 1px solid rgba(109, 240, 255, 0.28);
  box-shadow: 0 0 10px rgba(109, 240, 255, 0.35);
}

.nav-link::after,
.dashboard-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.nav-link:hover::after,
.dashboard-link:hover::after {
  transform: scaleX(1);
}


@media (hover: hover) {
  button:hover,
  a.btn:hover,
  a.primary:hover,
  a.ghost:hover,
  a.nav-cta:hover,
  a.mockup-btn:hover,
  a.cta:hover,
  .dash-btn:hover,
  .btn.primary:hover,
  .btn.secondary:hover,
  .btn.ghost:hover,
  .primary:hover,
  .ghost:hover,
  .nav-cta:hover,
  .mockup-btn:hover,
  .cta:hover {
    filter: brightness(1.05);
    box-shadow: 0 12px 24px rgba(4, 8, 18, 0.18);
  }
}

button:active,
a.btn:active,
a.primary:active,
a.ghost:active,
a.nav-cta:active,
a.mockup-btn:active,
a.cta:active,
.dash-btn:active,
.btn.primary:active,
.btn.secondary:active,
.btn.ghost:active,
.primary:active,
.ghost:active,
.nav-cta:active,
.mockup-btn:active,
.cta:active {
  transform: none;
  filter: brightness(0.98) saturate(1.1);
  box-shadow:
    0 0 0 6px rgba(109, 240, 255, 0.08),
    0 10px 24px rgba(6, 10, 20, 0.25);
}

button:focus-visible,
a.btn:focus-visible,
a.primary:focus-visible,
a.ghost:focus-visible,
a.nav-cta:focus-visible,
a.mockup-btn:focus-visible,
a.cta:focus-visible,
.dash-btn:focus-visible,
.btn.primary:focus-visible,
.btn.secondary:focus-visible,
.btn.ghost:focus-visible,
.primary:focus-visible,
.ghost:focus-visible,
.nav-cta:focus-visible,
.mockup-btn:focus-visible,
.cta:focus-visible {
  outline: none;
  box-shadow: var(--btn-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  button,
  a.btn,
  a.primary,
  a.ghost,
  a.nav-cta,
  a.mockup-btn,
  a.cta,
  .dash-btn,
  .btn.primary,
  .btn.secondary,
  .btn.ghost,
  .primary,
  .ghost,
  .nav-cta,
  .mockup-btn,
  .cta {
    transition: none;
  }
}