/* FP1 NAVIGATION SUPPORT CLEAN V3
   Navigation and Support presentation only. Product-page hero styling is intentionally excluded. */

@import url("/assets/navigation-support-v2-base-20260720.css?v=20260720-clean-v3");

:root {
  --fp1-clean-gradient: linear-gradient(
    102deg,
    #8294ff 0%,
    #6d9fff 22%,
    #59b7ff 44%,
    #4ee8ea 66%,
    #59b7ff 84%,
    #8294ff 100%
  );
}

.site-header {
  border-bottom-color: rgba(110, 156, 255, 0.28);
  background:
    radial-gradient(circle at 18% -80%, rgba(128, 104, 255, 0.34), transparent 24rem),
    radial-gradient(circle at 84% -100%, rgba(78, 232, 234, 0.20), transparent 24rem),
    linear-gradient(180deg, rgba(8, 12, 35, 0.96), rgba(6, 10, 29, 0.91));
  box-shadow: 0 12px 34px rgba(1, 4, 18, 0.24);
}

.nav-links a,
.nav-apps-toggle {
  border: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"],
.nav-apps-toggle:hover,
.nav-apps-toggle:focus-visible,
.nav-apps-toggle.is-active,
.nav-apps.is-open .nav-apps-toggle {
  border-color: rgba(89, 183, 255, 0.30);
  background: linear-gradient(135deg, rgba(128, 104, 255, 0.20), rgba(89, 183, 255, 0.15) 55%, rgba(78, 232, 234, 0.12));
  color: #fff;
  box-shadow: inset 0 0 22px rgba(89, 183, 255, 0.07), 0 8px 24px rgba(1, 4, 18, 0.18);
}

.nav-apps-menu {
  border-color: rgba(110, 156, 255, 0.42);
  background:
    radial-gradient(circle at 8% 0%, rgba(128, 104, 255, 0.31), transparent 18rem),
    radial-gradient(circle at 96% 8%, rgba(78, 232, 234, 0.19), transparent 18rem),
    linear-gradient(150deg, rgba(18, 25, 63, 0.995), rgba(5, 10, 30, 0.995));
  box-shadow:
    0 32px 90px rgba(0, 3, 20, 0.66),
    0 0 42px rgba(89, 183, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-apps-heading {
  border-bottom-color: rgba(89, 183, 255, 0.24);
  background: linear-gradient(90deg, rgba(128, 104, 255, 0.12), rgba(78, 232, 234, 0.05));
}

.nav-apps-menu > a:not(.nav-apps-all) {
  background: rgba(7, 13, 37, 0.32);
}

.nav-apps-menu > a:not(.nav-apps-all):hover,
.nav-apps-menu > a:not(.nav-apps-all):focus-visible,
.nav-apps-menu > a[aria-current="page"] {
  border-color: rgba(78, 232, 234, 0.34);
  background: linear-gradient(135deg, rgba(128, 104, 255, 0.24), rgba(89, 183, 255, 0.19) 54%, rgba(78, 232, 234, 0.12));
  box-shadow: inset 0 0 28px rgba(78, 232, 234, 0.05);
}

.nav-apps-menu .nav-apps-all {
  border-top-color: rgba(89, 183, 255, 0.22);
  color: #8fe9ff;
}

.home-page .home-showcase .showcase-app-heading h2,
.nav-apps-menu > a:not(.nav-apps-all) strong,
.support-page .support-app-identity strong,
.support-page .support-hero-v2 h1,
.support-page .support-directory > .section-head h2 {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: var(--fp1-clean-gradient) !important;
  background-size: 170% 100% !important;
  background-position: 0% 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 8px rgba(78, 232, 234, 0.15)) !important;
  animation: fp1-clean-title-shift 9s ease-in-out infinite alternate !important;
}

.nav-apps-menu > a:not(.nav-apps-all) small,
.support-page .support-app-identity small,
.support-page .support-app-identity em {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
}

.home-page .home-main > section:not(.home-hero) h2,
body:not(.home-page):not(.product-page) main h1,
body:not(.home-page):not(.product-page) main h2 {
  width: fit-content;
  max-width: 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: var(--fp1-clean-gradient);
  background-size: 150% 100%;
  background-position: 38% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 13px rgba(78, 232, 234, 0.16));
}

.home-page .home-main > section:not(.home-hero) h3,
body:not(.home-page):not(.product-page) main h3 {
  width: fit-content;
  max-width: 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, #dce8ff 0%, #78c9ff 48%, #9e8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes fp1-clean-title-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 50% 50%; }
  100% { background-position: 100% 50%; }
}

@media (max-width: 760px) {
  .nav-links {
    border-color: rgba(110, 156, 255, 0.34);
    background:
      radial-gradient(circle at 8% 0%, rgba(128, 104, 255, 0.28), transparent 17rem),
      radial-gradient(circle at 96% 8%, rgba(78, 232, 234, 0.16), transparent 17rem),
      linear-gradient(150deg, rgba(18, 25, 63, 0.995), rgba(5, 10, 30, 0.995));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-showcase .showcase-app-heading h2,
  .nav-apps-menu > a:not(.nav-apps-all) strong,
  .support-page .support-app-identity strong,
  .support-page .support-hero-v2 h1,
  .support-page .support-directory > .section-head h2 {
    animation: none !important;
    background-position: 45% 50% !important;
  }
}