:root {
  --shell-page-background:
    radial-gradient(
      circle at top left,
      rgba(29, 190, 103, 0.16),
      transparent 24rem
    ),
    radial-gradient(
      circle at top right,
      rgba(37, 99, 235, 0.14),
      transparent 28rem
    ),
    linear-gradient(180deg, #edf8f1 0%, #f4f9ff 24%, #f8fcfb 56%, #ffffff 100%);
  --shell-hero-background: linear-gradient(
    135deg,
    #07231b 0%,
    #0a3428 46%,
    #103e68 100%
  );
  --shell-header-background: linear-gradient(
    135deg,
    rgba(7, 27, 23, 0.88) 0%,
    rgba(10, 52, 40, 0.84) 52%,
    rgba(16, 62, 104, 0.82) 100%
  );
  --shell-header-border: rgba(169, 235, 204, 0.2);
  --shell-header-shadow: 0 18px 44px rgba(2, 12, 27, 0.18);
  --shell-hero-fade: linear-gradient(
    180deg,
    rgba(7, 35, 27, 0) 0%,
    rgba(237, 248, 241, 0.7) 74%,
    rgba(255, 255, 255, 0.96) 100%
  );
}

.luxeo-brand-lockup {
  display: block;
  height: auto;
  width: auto;
}

.luxeo-brand-lockup--header {
  width: clamp(120px, 12vw, 154px);
  filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.14));
}

.luxeo-brand-lockup--footer {
  width: 154px;
}

@media (max-width: 639px) {
  .luxeo-brand-lockup--header {
    width: 132px;
  }
}

nav.fixed.top-0 {
  background: var(--shell-header-background) !important;
  border-bottom: 1px solid var(--shell-header-border) !important;
  box-shadow: var(--shell-header-shadow) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  isolation: isolate;
}

nav.fixed.top-0::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 15% -20%,
      rgba(29, 190, 103, 0.22),
      transparent 34%
    ),
    radial-gradient(circle at 85% 0%, rgba(37, 99, 235, 0.18), transparent 28%);
  pointer-events: none;
  z-index: -1;
}

.site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}

.site-nav-link--strong {
  font-weight: 600;
}

.site-nav-link--active {
  background: linear-gradient(135deg, #19b564 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(12, 88, 86, 0.28);
}

.site-nav-link--active::after {
  content: "";
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-50%);
}

.site-shell-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.site-shell-cta:hover,
.site-shell-cta:focus-visible {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.3);
}

.site-mobile-nav {
  position: relative;
}

.site-mobile-nav__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
  color: #fff;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}

.site-mobile-nav__summary::-webkit-details-marker {
  display: none;
}

.site-mobile-nav__summary:hover,
.site-mobile-nav__summary:focus-visible,
.site-mobile-nav[open] > .site-mobile-nav__summary {
  background: rgba(255, 255, 255, 0.1);
}

.site-mobile-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(20rem, calc(100vw - 2rem));
  background: rgba(8, 33, 27, 0.95);
  border: 1px solid rgba(169, 235, 204, 0.18);
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-mobile-link,
.site-mobile-cta {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  background: linear-gradient(
    160deg,
    rgba(7, 27, 23, 0.96) 0%,
    rgba(10, 52, 40, 0.98) 52%,
    rgba(16, 62, 104, 0.92) 100%
  );
  border: 1px solid rgba(148, 226, 190, 0.16);
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

body {
  background: var(--shell-page-background);
}

body > div.min-h-screen.flex.flex-col {
  background: var(--shell-page-background) !important;
}

body main > div.min-h-screen:not(.relative) {
  background: var(--shell-page-background) !important;
}

.site-mobile-link {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

.site-mobile-link--strong {
  font-weight: 600;
}

.site-mobile-link:hover,
.site-mobile-link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.site-mobile-link--active {
  background: rgba(255, 255, 255, 0.1);
  color: #1dbe67;
  font-weight: 600;
}

.site-mobile-cta {
  margin-top: 0.25rem;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
}

.site-mobile-cta:hover,
.site-mobile-cta:focus-visible {
  filter: brightness(1.05);
}

body main > div.relative.min-h-screen,
body main > div.min-h-screen > div.relative:first-child {
  position: relative;
  overflow: hidden;
  background: var(--shell-hero-background) !important;
}

body main > div.relative.min-h-screen::after,
body main > div.min-h-screen > div.relative:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(4rem, 10vw, 7rem);
  background: var(--shell-hero-fade);
  pointer-events: none;
}

body main > div.relative.min-h-screen > div.absolute.inset-0 > div:nth-child(2),
body
  main
  > div.min-h-screen
  > div.relative:first-child
  > div.absolute.inset-0
  > div:nth-child(2) {
  background: rgba(29, 190, 103, 0.16) !important;
}

@media (max-width: 767px) {
  .site-mobile-menu {
    position: fixed;
    top: 5.25rem;
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}
