/* Variant: Sphere — a huge iridescent sphere rises like a planet beneath the headline. Light. */
:root {
  --bg: #f7f6ff; --surface: #ffffff; --muted: #eeecfb; --ink: #1a1636; --ink-2: #5d5978; --line: #e5e2f3;
  --accent: #5b45e0; --accent-ink: #ffffff; --accent-soft: #ebe6ff; --green-soft: #e4ecff; --amber-soft: #ffe9dc;
  --night: #1a1636; --night-2: #28234d;
  --ui-accent: #5b45e0; --ui-img: #efeaff;
  color-scheme: light;
}
.sh-hero { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(9rem, 22vw, 16rem); }
.sh-inner { display: flex; flex-direction: column; align-items: center; padding-top: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.sh-title { max-width: 14ch; font-size: clamp(3rem, 7vw, 6.75rem); line-height: 0.95; letter-spacing: -0.055em; }
.sh-hero .hero__lead { margin-top: 1.5rem; }
.sh-hero .hero__actions { justify-content: center; align-self: center; margin-top: 2rem; }
.sh-sphere { position: absolute; z-index: -1; left: 50%; bottom: calc(-1 * min(62vw, 46rem)); width: min(110vw, 64rem); aspect-ratio: 1; translate: -50% 0; }
.sh-ball {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95), transparent 22%),
    conic-gradient(from 200deg at 50% 50%, #8fb4ff, #c39bff, #ff9ac7, #ffc38a, #9fe0ff, #8fb4ff);
  box-shadow: inset -40px -60px 120px rgba(60, 30, 140, 0.45), inset 30px 40px 100px rgba(255, 255, 255, 0.6);
}
.sh-glow { position: absolute; inset: -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 140, 255, 0.45), transparent 70%); filter: blur(30px); }
@media (prefers-reduced-motion: no-preference) {
  .sh-ball { animation: sh-turn 40s linear infinite; }
  @keyframes sh-turn { to { rotate: 360deg; } }
}
.tile--dark { background: linear-gradient(160deg, #2c2470, #1a1636 70%); }
.tile--dark .focus strong { color: #c9b9ff; }
.product__visual--water { background: #e4ecff; } .product__visual--jobs { background: #efe6ff; } .product__visual--food { background: #ffe9dc; }
