:root {
  --bg: #09090b;
  --brand: #82d1e7;
  --brand-deep: #1b243d;
  --accent: #8b5cf6;
  --amber: #f0c761;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(139, 92, 246, 0.18), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(130, 209, 231, 0.22), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(240, 199, 97, 0.10), transparent 26%),
    linear-gradient(160deg, var(--bg) 0%, #0d1220 50%, var(--brand-deep) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bg-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 78%);
  opacity: .22;
  animation: drift 18s linear infinite;
}

.glow {
  position: fixed;
  width: 34rem;
  height: 34rem;
  border-radius: 999px;
  filter: blur(100px);
  opacity: .30;
  pointer-events: none;
}
.glow-1 { left: -8rem; top: -6rem; background: var(--accent); animation: floatA 13s ease-in-out infinite; }
.glow-2 { right: -8rem; bottom: -8rem; background: var(--brand); animation: floatB 15s ease-in-out infinite; }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  isolation: isolate;
}

.logo-wrap {
  position: relative;
  width: min(52vw, 420px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: heroFloat 5.5s ease-in-out infinite;
}

.logo-holder {
  position: relative;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 5;
}

.logo {
  width: 68%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 24px rgba(130, 209, 231, 0.42));
  animation: pulse 3.8s ease-in-out infinite;
}

.core {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 999px;
  z-index: 1;
  background: radial-gradient(circle, rgba(130,209,231,.35) 0%, rgba(130,209,231,.10) 46%, transparent 74%);
  filter: blur(12px);
  animation: corePulse 3.2s ease-in-out infinite;
}

.logo-ring {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(130, 209, 231, 0.30);
  border-radius: 50%;
  animation: spin 14s linear infinite;
  box-shadow: 0 0 40px rgba(130, 209, 231, 0.10), inset 0 0 30px rgba(130, 209, 231, 0.06);
}
.logo-ring::before, .logo-ring::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #fff);
  box-shadow: 0 0 20px rgba(130,209,231,.85);
}
.logo-ring::before { top: 7%; left: 50%; transform: translateX(-50%); }
.logo-ring::after { bottom: 11%; right: 13%; }

.ring-2 {
  inset: 0%;
  animation-direction: reverse;
  animation-duration: 20s;
  border-color: rgba(139, 92, 246, 0.22);
}
.ring-2::before, .ring-2::after {
  background: linear-gradient(135deg, var(--accent), var(--brand));
  box-shadow: 0 0 18px rgba(139,92,246,.8);
}

.ring-3 {
  inset: -10%;
  animation-duration: 26s;
  border-color: rgba(240, 199, 97, 0.18);
  border-style: dashed;
}
.ring-3::before, .ring-3::after {
  background: linear-gradient(135deg, var(--amber), var(--brand));
  box-shadow: 0 0 18px rgba(240,199,97,.8);
}

.burst {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  border: 1px solid rgba(130,209,231,.28);
}
.burst-1 { animation: burst 3s ease-out infinite; }
.burst-2 { animation: burst 3s ease-out 1.2s infinite; }

@keyframes heroFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-12px) scale(1.02)} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes corePulse { 0%,100%{transform:scale(.9); opacity:.7} 50%{transform:scale(1.2); opacity:1} }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes drift { from{transform:translateY(0)} to{transform:translateY(44px)} }
@keyframes floatA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(86px,38px)} }
@keyframes floatB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-76px,-52px)} }
@keyframes burst { 0%{transform:scale(.72); opacity:.0} 20%{opacity:.45} 100%{transform:scale(1.45); opacity:0} }

@media (max-width: 640px) {
  .logo-wrap { width: min(82vw, 340px); }
  .logo-holder { width: 44%; }
  .logo { width: 64%; }
}