body {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(59, 130, 246, 0.18),
      transparent 24%
    ),
    radial-gradient(
      circle at 80% 30%,
      rgba(34, 197, 94, 0.12),
      transparent 26%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(168, 85, 247, 0.12),
      transparent 28%
    ),
    linear-gradient(135deg, #020617 0%, #081120 45%, #020617 100%);
  overflow-x: hidden;
}

.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 2;
}

.logo-glow {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 30px rgba(59, 130, 246, 0.25),
    0 0 80px rgba(168, 85, 247, 0.18);
  animation: floatLogo 5s ease-in-out infinite;
}

.hero-glow {
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.18);
}

.count-card {
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 30px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.count-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 35px rgba(0, 0, 0, 0.36);
}

.particle-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  bottom: -40px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
  animation: rise linear infinite;
  opacity: 0.6;
}

.particle:nth-child(1) {
  left: 6%;
  animation-duration: 8s;
  animation-delay: 0s;
  transform: scale(0.8);
}
.particle:nth-child(2) {
  left: 14%;
  animation-duration: 10s;
  animation-delay: 1s;
  transform: scale(1.2);
}
.particle:nth-child(3) {
  left: 22%;
  animation-duration: 9s;
  animation-delay: 2s;
  transform: scale(0.7);
}
.particle:nth-child(4) {
  left: 31%;
  animation-duration: 11s;
  animation-delay: 1s;
  transform: scale(1);
}
.particle:nth-child(5) {
  left: 40%;
  animation-duration: 8.5s;
  animation-delay: 3s;
  transform: scale(1.3);
}
.particle:nth-child(6) {
  left: 49%;
  animation-duration: 10.5s;
  animation-delay: 2s;
  transform: scale(0.9);
}
.particle:nth-child(7) {
  left: 58%;
  animation-duration: 9.5s;
  animation-delay: 3s;
  transform: scale(1.1);
}
.particle:nth-child(8) {
  left: 67%;
  animation-duration: 11.5s;
  animation-delay: 1s;
  transform: scale(0.75);
}
.particle:nth-child(9) {
  left: 76%;
  animation-duration: 8.5s;
  animation-delay: 4s;
  transform: scale(1.15);
}
.particle:nth-child(10) {
  left: 85%;
  animation-duration: 10s;
  animation-delay: 2s;
  transform: scale(0.95);
}
.particle:nth-child(11) {
  left: 92%;
  animation-duration: 12s;
  animation-delay: 1s;
  transform: scale(0.7);
}
.particle:nth-child(12) {
  left: 97%;
  animation-duration: 9s;
  animation-delay: 3s;
  transform: scale(1.2);
}

.beam {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  animation: pulseBeam 8s ease-in-out infinite;
}

.beam-one {
  top: 5%;
  left: -80px;
  background: #0ea5e9;
}

.beam-two {
  bottom: 0;
  right: -100px;
  background: #22c55e;
  animation-delay: 2s;
}

@keyframes rise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.55;
  }
  50% {
    transform: translateY(-50vh) translateX(12px) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-110vh) translateX(-8px) scale(0.9);
    opacity: 0;
  }
}

@keyframes floatLogo {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulseBeam {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.16;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.24;
  }
}

@media (max-width: 768px) {
  body {
    overflow-y: auto;
  }
}