body {
  margin: 0;
  font-family: Arial;
  color: white;
  background: black;
  overflow-x: hidden;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -4;
  filter: brightness(0.35);
}

.fog {
  position: fixed;
  width: 200%;
  height: 100%;
  z-index: -3;
  background:
    radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,0.05), transparent 60%);
  animation: fog 40s linear infinite;
}

@keyframes fog {
  0% { transform: translateX(-10%); }
  50% { transform: translateX(10%); }
  100% { transform: translateX(-10%); }
}

.grain {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-image: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.15;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: -1;
}

#flash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  pointer-events: none;
}

.container {
  max-width: 900px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

.logo img {
  height: 140px;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.2));
  margin-top: 80px;
}

.card {
  background: rgba(0,0,0,0.5);
  padding: 20px;
  border-radius: 10px;
  margin: 20px 0;
}

button {
  padding: 10px 20px;
  border: none;
  background: white;
  color: black;
  cursor: pointer;
}

.sub {
  color: #aaa;
}

footer {
  color: #666;
  margin-top: 40px;
}