* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
}

#splash-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    url('/SplashVector.png') center/cover no-repeat,
    radial-gradient(circle at center, #2a3247 0%, #1a2136 40%, #0f1424 75%, #000a12 100%);
  color: white;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.4s ease;
  overflow: hidden;
}

#splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* -----------------------------------------------------------
   🚀 NEW RESPONSIVE FIX USING clamp() + BREAKPOINTS
------------------------------------------------------------- */

#restom-logo {
  width: clamp(160px, 40vw, 420px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  animation:
    splashScreenLogoFadeIn 1s ease-in-out,
    splashScreenLogopulse 2s ease-in-out infinite;
}

/* 📱 MOBILE BOOST: increase logo on small screens */
@media (max-width: 480px) {
  #restom-logo {
    width: 60vw;
  }
}

/* 📱 TABLETS: balanced size */
@media (min-width: 481px) and (max-width: 1024px) {
  #restom-logo {
    width: 45vw;
  }
}

/* 🖥️ LARGE DISPLAYS (Nest Hub Max, TVs) — keep as is */
@media (min-width: 1300px) {
  #restom-logo {
    width: 28vw;
  }
}

/* -----------------------------------------------------------
   Animations (same as before)
------------------------------------------------------------- */

@keyframes splashScreenLogoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes splashScreenLogopulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}