body { background: #fff; color: #0b1739; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.hero-grid {
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(circle at 12% 15%, rgba(79,70,229,.2), transparent 28%),
    radial-gradient(circle at 88% 35%, rgba(20,184,166,.16), transparent 29%),
    linear-gradient(rgba(79,70,229,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,70,229,.05) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
  animation: hero-breathe 14s ease-in-out infinite alternate;
}
.hero-grid::after { content: ""; position: absolute; z-index: -1; inset: 10% -15% auto auto; width: 38vw; height: 38vw; max-width: 560px; max-height: 560px; border-radius: 50%; background: rgba(46,211,200,.16); filter: blur(70px); animation: hero-orb 18s ease-in-out infinite alternate; }
.glass { background: rgba(255,255,255,.86); backdrop-filter: blur(16px); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.dot-online::after { content: ''; position: absolute; width: .65rem; height: .65rem; border-radius: 999px; background: #22c55e; border: 2px solid white; right: -1px; bottom: -1px; animation: online-ring 1.8s ease-out infinite; }
@keyframes hero-breathe { to { background-position: 3% 2%, -3% -2%, 8px 6px, 8px 6px; } }
@keyframes hero-orb { to { transform: translate3d(-9%, 8%, 0) scale(1.12); } }
@keyframes online-ring { 70%,100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }