/*
 * Juliboo Hero — Aurora / Glassmorphism-Naeherung (CSS-only)
 * Sanfter Gradient + weiche Farb-Blobs hinter dem Hero-Inhalt.
 */
.hero {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(183, 216, 227, 0.55), transparent 60%),
    linear-gradient(180deg, var(--juliboo-logo-bg) 0%, var(--juliboo-surface) 70%);
}

.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}
.hero__blob--a {
  width: 420px; height: 420px;
  background: var(--juliboo-primary);
  top: -120px; left: -80px;
}
.hero__blob--b {
  width: 360px; height: 360px;
  background: #d7ece6;
  top: 40px; right: -90px;
}
.hero__blob--c {
  width: 300px; height: 300px;
  background: #f4e6cf;
  bottom: -140px; left: 40%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__blob--a { animation: juliboo-float 14s ease-in-out infinite; }
  .hero__blob--b { animation: juliboo-float 18s ease-in-out infinite reverse; }
}

@keyframes juliboo-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(18px, 24px); }
}