/*
  Agenz Foundation V106
  Home-only navigation refinement and an integrated blue-motion hero canvas.
*/

/* Remove the long capsule around the desktop navigation on Home. */
@media (min-width: 1141px) {
  html body.home-page .desktop-nav {
    width: auto !important;
    height: 48px !important;
    padding: 0 !important;
    gap: clamp(3px, .38vw, 7px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.home-page .desktop-nav a {
    height: 42px !important;
    padding-inline: clamp(9px, .78vw, 13px) !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.home-page .desktop-nav a:hover {
    color: #124f9f !important;
    background: rgba(221, 235, 255, .46) !important;
  }

  html body.home-page .desktop-nav a[aria-current="page"] {
    color: #0d4fa8 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.home-page .desktop-nav a[aria-current="page"]::before {
    left: 50% !important;
    bottom: 2px !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #1764d8 !important;
    box-shadow: 0 3px 10px rgba(23, 100, 216, .28) !important;
  }
}

/* The right-side workflow now reads as part of the hero background, not a card. */
html body.home-page .hero.ecosystem-hero {
  background:
    radial-gradient(circle at 84% 27%, rgba(83, 151, 239, .13), transparent 25%),
    radial-gradient(circle at 70% 64%, rgba(175, 210, 255, .17), transparent 28%),
    linear-gradient(rgba(21, 95, 209, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 95, 209, .024) 1px, transparent 1px),
    linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important;
  background-size: auto, auto, 68px 68px, 68px 68px, auto !important;
}

html body.home-page .hero.ecosystem-hero .hero-visual {
  isolation: isolate !important;
  overflow: visible !important;
}

html body.home-page .hero.ecosystem-hero .hero-visual::before,
html body.home-page .hero.ecosystem-hero .hero-visual::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

html body.home-page .hero.ecosystem-hero .hero-visual::before {
  inset: 4% -7% 2% -5% !important;
  border-radius: 46% 54% 42% 58% / 58% 43% 57% 42% !important;
  background:
    radial-gradient(circle at 42% 42%, rgba(82, 150, 239, .22), transparent 30%),
    radial-gradient(circle at 68% 60%, rgba(178, 213, 255, .24), transparent 35%) !important;
  filter: blur(34px) !important;
  opacity: .82 !important;
  animation: afHomeBlueDrift 11s ease-in-out infinite alternate !important;
}

html body.home-page .hero.ecosystem-hero .hero-visual::after {
  width: 190px !important;
  height: 190px !important;
  right: 2% !important;
  top: 14% !important;
  border: 1px solid rgba(23, 100, 216, .11) !important;
  border-radius: 50% !important;
  background: rgba(220, 236, 255, .22) !important;
  box-shadow:
    -260px 270px 0 45px rgba(223, 238, 255, .14),
    0 0 65px rgba(60, 130, 224, .08) !important;
  animation: afHomeOrbitDrift 14s ease-in-out infinite alternate !important;
}

html body.home-page .creative-flow-stage {
  z-index: 1 !important;
  width: min(100%, 640px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body.home-page .creative-flow-grid {
  inset: -8% -9% !important;
  opacity: .48 !important;
  background-image:
    linear-gradient(rgba(23, 100, 216, .052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 100, 216, .052) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0, 0, 0, .72) 52%, transparent 78%) !important;
  mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0, 0, 0, .72) 52%, transparent 78%) !important;
  animation: afHomeGridDrift 18s linear infinite !important;
}

html body.home-page .creative-flow-stage::before,
html body.home-page .creative-flow-stage::after {
  border-color: rgba(23, 100, 216, .13) !important;
}

html body.home-page .creative-flow-card {
  border-color: rgba(23, 100, 216, .13) !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow:
    0 20px 52px rgba(39, 82, 148, .11),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.08) !important;
  backdrop-filter: blur(17px) saturate(1.08) !important;
}

html body.home-page .creative-flow-top,
html body.home-page .creative-flow-caption {
  text-shadow: 0 1px 14px rgba(255, 255, 255, .9) !important;
}

@keyframes afHomeBlueDrift {
  0% {
    transform: translate3d(-2%, 1%, 0) scale(.96) rotate(-1deg);
    opacity: .68;
  }
  55% {
    transform: translate3d(2%, -2%, 0) scale(1.025) rotate(1deg);
    opacity: .88;
  }
  100% {
    transform: translate3d(-1%, -1%, 0) scale(1.055) rotate(0deg);
    opacity: .78;
  }
}

@keyframes afHomeOrbitDrift {
  from {
    transform: translate3d(-8px, 8px, 0) scale(.94);
    opacity: .42;
  }
  to {
    transform: translate3d(18px, -14px, 0) scale(1.06);
    opacity: .72;
  }
}

@keyframes afHomeGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 46px 46px, 46px 46px; }
}

@media (max-width: 900px) {
  html body.home-page .hero.ecosystem-hero .hero-visual {
    overflow: hidden !important;
    border-radius: 28px !important;
  }

  html body.home-page .creative-flow-stage {
    overflow: hidden !important;
  }
}

@media (max-width: 680px) {
  html body.home-page .hero.ecosystem-hero {
    background-size: auto, auto, 44px 44px, 44px 44px, auto !important;
  }

  html body.home-page .hero.ecosystem-hero .hero-visual::before {
    inset: 2% -12% 4% !important;
    filter: blur(26px) !important;
  }

  html body.home-page .hero.ecosystem-hero .hero-visual::after {
    width: 128px !important;
    height: 128px !important;
    right: -2% !important;
    top: 12% !important;
    box-shadow: -170px 390px 0 24px rgba(223, 238, 255, .14) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.home-page .hero.ecosystem-hero .hero-visual::before,
  html body.home-page .hero.ecosystem-hero .hero-visual::after,
  html body.home-page .creative-flow-grid {
    animation: none !important;
  }
}