:root {
      --bg-light: linear-gradient(to right, #667eea, #764ba2);
      --bg-dark: linear-gradient(to right, #0f2027, #203a43, #2c5364);
      --text-light: #ffffff;
      --text-dark: #f1f1f1;
      --accent-color: #00ffd5;
    }

    body {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      overflow-x: hidden;
      transition: background 1s, color 0.5s;
    }

    .navbar {
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(5px);
    }

    .hero {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      animation: fadeIn 1s ease-out;
    }

    .hero h1 {
      font-size: 3rem;
      font-weight: 600;
    }

    .hero p {
      font-size: 1.2rem;
      margin: 20px 0;
      opacity: 0.85;
    }

    .hero a.btn {
      padding: 12px 30px;
      border-radius: 30px;
      font-size: 1.1rem;
      transition: 0.3s;
    }

    .bubbles {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .bubble {
      position: absolute;
      bottom: -100px;
      background: rgba(255,255,255,0.08);
      border-radius: 50%;
      animation: rise 25s infinite ease-in;
    }

    .bubble:nth-child(1) { left: 10%; width: 60px; height: 60px; animation-duration: 18s; }
    .bubble:nth-child(2) { left: 25%; width: 40px; height: 40px; animation-duration: 22s; }
    .bubble:nth-child(3) { left: 40%; width: 70px; height: 70px; animation-duration: 20s; }
    .bubble:nth-child(4) { left: 55%; width: 30px; height: 30px; animation-duration: 26s; }
    .bubble:nth-child(5) { left: 75%; width: 50px; height: 50px; animation-duration: 19s; }

    @keyframes rise {
      0% { bottom: -100px; transform: translateX(0); }
      100% { bottom: 110%; transform: translateX(30px); }
    }

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

@keyframes pulse-glow {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px var(--accent-color));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px var(--accent-color));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px var(--accent-color));
  }
}

.logo-quiz {
  width: 100%;
  max-width: 250px;
  height: auto;
  animation: fadeIn 1.5s ease-out, pulse-glow 3s infinite ease-in-out;
  transition: transform 0.3s ease;
}

#titulo {
  display: inline-block;
  animation: multi-spin 9s linear;
  animation-play-state: paused; /* começa pausado */
  transition: filter 0.5s ease;
}

#titulo.girando {
  filter: drop-shadow(0 0 10px var(--accent-color));
}

@keyframes multi-spin {
  0%   { transform: rotate(0deg); }
  33%  { transform: rotate(-360deg); }
  66%  { transform: rotate(-720deg); }
  100% { transform: rotate(-1080deg); }
}

#frase {
  animation: levitate 5s ease-in-out infinite alternate;
}

@keyframes levitate {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}