* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  /* Use Poppins font, fallback to sans-serif */
  font-family: 'Poppins', sans-serif;
  font-weight: 300; /* Use lighter weight for body text */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* Refined gradient with slightly different colors */
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: white;
  text-align: center;
  overflow: hidden; /* Prevent scrollbars from animation artifacts */
}

/* Style for the canvas */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Position behind other content */
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.logo-container {
  padding: 25px;
  border-radius: 25px;
  /* Slightly more subtle background */
  background: rgba(0, 0, 0, 0.4);
  /* Refined, softer glow effect */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2),
              0 0 20px rgba(255, 255, 255, 0.1),
              0 0 40px rgba(231, 60, 126, 0.3),
              0 0 60px rgba(35, 166, 213, 0.3);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease-out;
  margin-bottom: 40px; /* Add some space below the logo */
}

.logo-container:hover {
  transform: scale(1.08) rotate(-2deg); /* Add slight rotation on hover */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
              0 0 30px rgba(255, 255, 255, 0.2),
              0 0 50px rgba(231, 60, 126, 0.5),
              0 0 80px rgba(35, 166, 213, 0.5);
}

.logo-container img {
  max-width: 280px; /* Slightly smaller */
  border-radius: 15px;
  display: block;
}

h1 {
  font-size: 3.5rem;
  font-weight: 600; /* Use bolder weight for heading */
  margin-bottom: 15px;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
  /* Add subtle text animation */
  animation: fadeInDown 1s ease-out both;
}

p {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 650px;
  line-height: 1.6;
  /* Add subtle text animation */
  animation: fadeInUp 1s ease-out 0.3s both; /* Delay slightly */
}

footer {
  position: absolute;
  bottom: 25px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  animation: fadeInUp 1s ease-out 0.6s both; /* Delay more */
}

/* Simple fade-in animations */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Basic responsiveness */
@media (max-width: 768px) {
  h1 {
    font-size: 2.8rem;
  }
  p {
    font-size: 1.2rem;
    max-width: 90%;
  }
  .logo-container img {
    max-width: 220px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2.2rem;
  }
  p {
    font-size: 1rem;
  }
  .logo-container img {
    max-width: 180px;
  }
  .logo-container {
    padding: 20px;
    border-radius: 20px;
  }
  footer {
     bottom: 15px;
     font-size: 0.8rem;
  }
}