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

         body {
              position: relative;
              font-size: 12px;
         }

         header img {
              height: 32px;
         }

         section {
              height: 100vh;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              opacity: 0;
              transform: translateY(40px);
              transition: all 1s ease-out;
         }

         section.visible {
              opacity: 1;
              transform: translateY(0);
         }

         .hero-content {
              z-index: 1;
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              padding-left: 10%;
              width: 100%;
         }

         .hero-content h1 {
              font-size: 1.5rem;
              color: #fff;
              animation: fadeInLeft 1s ease-out forwards;
         }

         .tagline {
              margin-top: 0.5rem;
              font-size: 0.75rem;
              color: #fff;
              animation: fadeInLeft 1.5s ease-out forwards;
         }

         .user-count {
              margin-top: 0.3rem;
              font-size: 0.7rem;
              color: #fff;
              animation: fadeInLeft 2s ease-out forwards;
         }

         .qq-section {
              text-align: center;
              z-index: 1;
              padding: 0 20px;
         }

         .qq-section h2 {
              font-size: 1.5rem;
              color: #fff;
              margin-bottom: 1.5rem;
         }

         .info-box {
              background: rgba(255, 255, 255, 0.05);
              border: 1px solid rgba(255, 255, 255, 0.1);
              border-radius: 12px;
              padding: 1.5rem;
              margin-bottom: 1.5rem;
              max-width: 500px;
              width: 100%;
              backdrop-filter: blur(8px);
         }

         .info-item {
              margin-bottom: 1rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0.8rem;
              background: rgba(0, 0, 0, 0.3);
              border-radius: 8px;
              transition: all 0.3s ease;
         }

         .info-item:hover {
              background: rgba(0, 0, 0, 0.4);
              transform: translateY(-2px);
         }

         .info-label {
              font-weight: bold;
              color: #aaa;
              font-size: 0.9rem;
         }

         .info-value {
              font-size: 1.1rem;
              color: #fff;
              font-weight: 500;
         }

         .buttons {
              display: flex;
              gap: 1rem;
              justify-content: center;
              width: 100%;
              max-width: 500px;
         }

         .qq-section button {
              flex: 1;
              padding: 0.8rem;
              font-size: 1rem;
              color: #fff;
              background: rgba(255, 255, 255, 0.05);
              border: 1px solid rgba(255, 255, 255, 0.2);
              border-radius: 999px;
              backdrop-filter: blur(8px);
              cursor: pointer;
              transition: all 0.3s ease;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 0.5rem;
         }

         .qq-section button.primary {
              background: rgba(0, 119, 255, 0.25);
              border-color: rgba(0, 119, 255, 0.5);
         }

         .qq-section button:hover {
              background: rgba(255, 255, 255, 0.1);
              transform: scale(1.05);
         }

         .qq-section button.primary:hover {
              background: rgba(0, 119, 255, 0.35);
         }

         .toast {
              position: fixed;
              bottom: 20px;
              left: 50%;
              transform: translateX(-50%);
              background: rgba(0, 0, 0, 0.7);
              color: white;
              padding: 0.8rem 1.5rem;
              border-radius: 30px;
              backdrop-filter: blur(10px);
              border: 1px solid rgba(255, 255, 255, 0.2);
              opacity: 0;
              transition: opacity 0.3s;
              z-index: 2000;
              font-size: 0.9rem;
         }

         .toast.show {
              opacity: 1;
         }

         @keyframes fadeInLeft {
              from { opacity: 0; transform: translateX(-40px); }
              to { opacity: 1; transform: translateX(0); }
         }

         @media (max-width: 600px) {
              .buttons {
                   flex-direction: column;
              }
              
              .info-box {
                   padding: 1rem;
              }
              
              .qq-section h2 {
                   font-size: 1.3rem;
              }
         }