html,
body {
  margin: 0;
  background: #071a3d;
}

.ambient-light {
  background:
    radial-gradient(circle at 74% 24%, rgba(24, 62, 126, 0.62), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 42%);
}

.grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 94%);
}

.red-glow {
  background: rgba(220, 20, 60, 0.22);
  filter: blur(90px);
}

.brand-mark {
  background: linear-gradient(to top, #dc143c 0 48%, rgba(255, 255, 255, 0.04) 48% 100%);
}

.status-dot {
  box-shadow: 0 0 0 5px rgba(220, 20, 60, 0.12), 0 0 24px rgba(220, 20, 60, 0.8);
}

@media (prefers-reduced-motion: no-preference) {
  .rings {
    animation: float 9s ease-in-out infinite;
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(-50%) scale(1);
    }
    50% {
      transform: translateY(-52%) scale(1.015);
    }
  }
}