body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #181824 0%, #23233a 100%);
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerpiece {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 600px;
}

.chandelier {
  width: 220px;
  max-width: 60vw;
  margin-top: 48px;
  filter: drop-shadow(0 8px 32px #fff2) brightness(1.1);
  z-index: 3;
  position: relative;
}

.lightbeam-container {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 320px;
  pointer-events: none;
  z-index: 2;
  animation: beam-fade 2.5s ease-in-out infinite alternate;
}

.lightbeam {
  width: 100%;
  height: 100%;
  opacity: 0.85;
  filter: blur(1.5px);
  transition: opacity 0.5s;
}

@keyframes beam-fade {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

.logo {
  width: 200px;
  max-width: 50vw;
  margin-top: 32px;
  z-index: 4;
  position: relative;
  filter: drop-shadow(0 0 32px #fff5) brightness(1.2);
  transition: filter 0.3s, transform 0.3s;
  animation: logo-glow 2.5s ease-in-out infinite alternate;
}

.logo:hover {
  filter: drop-shadow(0 0 48px #fff8) brightness(1.3);
  transform: scale(1.04);
}

@keyframes logo-glow {
  0% { filter: drop-shadow(0 0 24px #fff2) brightness(1.1); }
  100% { filter: drop-shadow(0 0 48px #fff6) brightness(1.25); }
}

@media (max-width: 600px) {
  .chandelier { width: 120px; }
  .logo { width: 90px; }
  .lightbeam-container { width: 80px; height: 140px; top: 60px; }
  .centerpiece { min-height: 400px; }
}