.dark-bg, .light-bg {    
  display: flex;
  align-items: center;
}

/* === Versione CHIARA === */
.sign-light {
  font-size: 2em;
  text-transform: uppercase;
  color: #14adec;
  text-shadow:
    0 0 0.5rem #5bd7ff,
    0 0 1rem #8fe9ff,
    0 0 2rem #b3f1ff,
    0 0 3rem #d0f7ff;
  animation: shine-light 2s forwards, flicker-light 3s infinite;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.sign-light .num {
  display: flex;
  align-items: center;
}

.sign-light .five {
  display: inline-block;
  transform: scaleX(-1); /* riflessione orizzontale */
}

/* ✅ LOGO statico */
.sign-light img,
.sign-dark img {
  animation: none !important;
  filter: none !important;
  margin-right: 0.25em;
  vertical-align: middle;
}

@keyframes shine-light {
  0% { color: #6bd8ff; text-shadow: none; }
  100% {
    color: #14adec;
    text-shadow:
      0 0 0.5rem #5bd7ff,
      0 0 1rem #8fe9ff,
      0 0 2rem #b3f1ff,
      0 0 3rem #d0f7ff;
  }
}

@keyframes flicker-light {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}

/* === Versione SCURA === */
.sign-dark {
  font-size: 2em;
  text-transform: uppercase;
  color: #b6e1f4;
  text-shadow:
    0 0 0.6rem #b6e1f4,
    0 0 1.5rem #90d4fc,
    -0.2rem 0.1rem 1rem #90d4fc,
    0.2rem 0.1rem 1rem #90d4fc,
    0 -0.5rem 2rem #14abeb,
    0 0.5rem 3rem #14abeb;
  animation: shine-dark 2s forwards, flicker-dark 3s infinite;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.sign-dark .num {
  display: flex;
  align-items: center;
}

.sign-dark .five {
  display: inline-block;
  transform: scaleX(-1);
}

@keyframes shine-dark {
  0% { color: #84c8ee; text-shadow: none; }
  100% {
    color: #b6e1f4;
    text-shadow:
      0 0 0.6rem #b6e1f4,
      0 0 1.5rem #90d4fc,
      -0.2rem 0.1rem 1rem #90d4fc,
      0.2rem 0.1rem 1rem #90d4fc,
      0 -0.5rem 2rem #14abeb,
      0 0.5rem 3rem #14abeb;
  }
}

@keyframes flicker-dark {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}

/* === MOBILE: nasconde la scritta sotto i 768px, ma NON il logo === */
@media (max-width: 768px) {
  .sign-light,
  .sign-dark {
    display: none !important;
  }
}
