body {
     background-color: #0f0a1f;
     color: #ffffff;
     font-family: 'Segoe UI', sans-serif;
 }

 .navbar {
     background: linear-gradient(90deg, #5f0fff, #8e2de2);
 }

 .navbar-brand {
     font-weight: bold;
     font-size: 1.5rem;
     color: #fff !important;
 }

 .nav-link {
     color: #ddd !important;
     transition: 0.3s;
 }

 .nav-link:hover {
     color: #fff !important;
     text-shadow: 0 0 8px #c084fc;
 }

 .footer {
     background: #140c2e;
     padding: 40px 0;

 }

 .footer a {
     color: #aaa;
     text-decoration: none;
     transition: 0.3s;
 }

 .footer a:hover {
     color: #c084fc;
 }

 .logo-glow {
     text-shadow: 0 0 10px #a855f7, 0 0 20px #7e22ce;
 }

 .hero-section {
     padding: 80px 0;
     background: radial-gradient(circle at top, #1a0f3d, #0b061a);
 }

 .hero-title {
     font-size: 3rem;
     font-weight: bold;
     color: #fff;
     text-shadow: 0 0 15px #9333ea;
 }

 .hero-text {
     color: #ccc;
     margin: 20px 0;
     font-size: 1.1rem;
 }

 .hero-btn {
     background: linear-gradient(90deg, #7c3aed, #a855f7);
     border: none;
     color: white;
     padding: 12px 25px;
     border-radius: 10px;
     transition: 0.3s;
 }

 .hero-btn:hover {
     box-shadow: 0 0 15px #a855f7;
     transform: scale(1.05);
 }

 .hero-img {
     max-width: 100%;
     border-radius: 20px;
     box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
 }

 .about-section {
     padding: 80px 0;
     background: #0b061a;
 }

 .about-title {
     font-size: 2.5rem;
     font-weight: bold;
     color: #fff;
     text-shadow: 0 0 10px #9333ea;
 }

 .about-text {
     color: #bbb;
     margin: 15px 0;
     font-size: 1.05rem;
 }

 .about-img {
     max-width: 100%;
     border-radius: 20px;
     box-shadow: 0 0 25px rgba(147, 51, 234, 0.4);
 }

 .features-section {
     padding: 80px 0;
     background: radial-gradient(circle at center, #140c2e, #0b061a);
 }

 .features-title {
     font-size: 2.5rem;
     color: #fff;
     font-weight: bold;
     text-shadow: 0 0 10px #9333ea;
 }

 .feature-box {
     padding: 25px;
     transition: 0.3s;
 }

 .feature-box:hover {
     transform: translateY(-8px);
 }

 .feature-icon {
     font-size: 40px;
     color: #a855f7;
     margin-bottom: 15px;
     text-shadow: 0 0 15px #9333ea;
 }

 .feature-box h5 {
     color: #fff;
     margin-bottom: 10px;
 }

 .feature-box p {
     color: #bbb;
     font-size: 0.95rem;
 }

 .faq-section {
     padding: 80px 0;
     background: #0b061a;
 }

 .faq-title {
     color: #fff;
     font-size: 2.3rem;
     text-shadow: 0 0 10px #9333ea;
 }

 .faq-img {
     border-radius: 20px;
     box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
 }

 /* Accordion style */
 .accordion-item {
     background: #140c2e;
     border: 1px solid #2a1a4a;
     margin-bottom: 10px;
     border-radius: 10px;
     overflow: hidden;
 }

 .accordion-button {
     background: #140c2e;
     color: #fff;
     font-weight: 500;
 }

 .accordion-button:not(.collapsed) {
     color: #c084fc;
     box-shadow: none;
 }

 .accordion-body {
     color: #bbb;
     background: #0f0a1f;
 }

 .contact-section {
     padding: 80px 0;
     background: radial-gradient(circle at center, #140c2e, #0b061a);
 }

 .contact-title {
     color: #fff;
     font-size: 2.5rem;
     text-shadow: 0 0 10px #9333ea;
 }

 .contact-sub {
     color: #bbb;
 }

 .contact-form {
     max-width: 500px;
 }

 .form-control,
 .form-select {
     background: #0f0a1f;
     border: 1px solid #2a1a4a;
     color: #fff;
 }

 .form-control::placeholder {
     color: #888;
 }

 .contact-btn {
     background: linear-gradient(90deg, #7c3aed, #a855f7);
     border: none;
     padding: 12px 25px;
     color: #fff;
     border-radius: 10px;
     transition: 0.3s;
 }

 .contact-btn:hover {
     box-shadow: 0 0 15px #a855f7;
 }

 /* POPUP */
 .popup {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     display: none;
     justify-content: center;
     align-items: center;
 }

 .popup-content {
     background: #140c2e;
     padding: 30px;
     border-radius: 15px;
     text-align: center;
     color: #fff;
     box-shadow: 0 0 20px #9333ea;
 }

 .popup-btn {
     margin-top: 15px;
     background: #a855f7;
     border: none;
     color: #fff;
 }

 .topgames-section {
     padding: 80px 0;
     background: #0b061a;
 }

 .topgames-title {
     font-size: 2.5rem;
     color: #fff;
     font-weight: bold;
     text-shadow: 0 0 10px #9333ea;
 }

 .topgames-text {
     color: #bbb;
     margin: 20px 0;
 }

 .topgames-list {
     list-style: none;
     padding: 0;
     margin-bottom: 20px;
 }

 .topgames-list li {
     color: #ccc;
     margin-bottom: 8px;
 }

 .topgames-btn {
     background: linear-gradient(90deg, #7c3aed, #a855f7);
     border: none;
     color: #fff;
     padding: 12px 25px;
     border-radius: 10px;
     transition: 0.3s;
 }

 .topgames-btn:hover {
     box-shadow: 0 0 15px #a855f7;
     transform: scale(1.05);
 }

 .topgames-img {
     border-radius: 20px;
     box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
     max-width: 100%;
 }

 .leaderboard-section {
     padding: 80px 0;
     background: radial-gradient(circle at center, #140c2e, #0b061a);
 }

 .leaderboard-title {
     font-size: 2.5rem;
     color: #fff;
     font-weight: bold;
     text-shadow: 0 0 10px #9333ea;
 }

 .leaderboard-table {
     background: #140c2e;
     border-radius: 15px;
     overflow: hidden;
 }

 .leaderboard-table thead {
     background: #1f1147;
     color: #c084fc;
 }

 .leaderboard-table tbody tr {
     color: #ddd;
     transition: 0.3s;
 }

 .leaderboard-table tbody tr:hover {
     background: #1a0f3d;
 }

 .leaderboard-table td,
 .leaderboard-table th {
     border-color: #2a1a4a;
     padding: 15px;
 }

 .community-section {
     padding: 80px 0;
     background: #0b061a;
 }

 .community-title {
     font-size: 2.5rem;
     color: #fff;
     font-weight: bold;
     text-shadow: 0 0 10px #9333ea;
 }

 .community-text {
     color: #bbb;
     margin: 15px 0;
 }

 .community-img {
     border-radius: 20px;
     box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
 }

 /* JOIN BLOCK */
 .join-box {
     background: #140c2e;
     padding: 25px;
     border-radius: 15px;
     margin-top: 15px;
     transition: 0.3s;
 }

 .join-box h5 {
     color: #fff;
 }

 .join-box p {
     color: #bbb;
     font-size: 0.9rem;
 }

 .join-box:hover {
     transform: translateY(-8px);
     box-shadow: 0 0 15px #9333ea;
 }

 .reviews-section {
     padding: 80px 0;
     background: radial-gradient(circle at center, #140c2e, #0b061a);
 }

 .reviews-title {
     font-size: 2.5rem;
     color: #fff;
     font-weight: bold;
     text-shadow: 0 0 10px #9333ea;
 }

 .review-card {
     background: #140c2e;
     padding: 25px;
     border-radius: 15px;
     transition: 0.3s;
     height: 100%;
 }

 .review-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 0 15px #9333ea;
 }

 .review-stars {
     color: #facc15;
     font-size: 1.2rem;
     margin-bottom: 10px;
 }

 .review-text {
     color: #bbb;
     font-size: 0.95rem;
     margin-bottom: 15px;
 }

 .review-name {
     color: #fff;
     font-weight: 500;
 }
 .cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #140c2e;
  color: #fff;
  padding: 15px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
  z-index: 9999;
}

.cookie-actions {
  display: flex;
  gap: 10px;
}

.cookie-btn {
  border: none;
  padding: 8px 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
  color: #fff;
}

.cookie-btn.yes {
  background: #a855f7;
}

.cookie-btn.yes:hover {
  box-shadow: 0 0 10px #a855f7;
}

.cookie-btn.no {
  background: #444;
}

.cookie-btn.no:hover {
  background: #666;
}

.cookie-banner a {
  color: #c084fc;
}