:root {
               --primary: #1a2a3a;
               --secondary: #f39c12;
               --accent: #e74c3c;
               --light: #f8f9fa;
               --dark: #121f2b;
               --success: #27ae60;
               --warning: #f1c40f;
               --danger: #e74c3c;
               --text: #333;
               --text-light: #7f8c8d;
          }

          body {
               font-family: 'Poppins', sans-serif;
               background-color: #f5f7fa;
               color: var(--text);
               line-height: 1.6;
               overflow-x: hidden;
          }

          /* Navbar Modern */
          .navbar {
               background: rgba(26, 42, 58, 0.95);
               backdrop-filter: blur(10px);
               box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
               padding: 15px 0;
               transition: all 0.3s ease;
          }

          .navbar.scrolled {
               padding: 10px 0;
               box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
          }

          .navbar-brand {
               font-weight: 700;
               font-size: 1.8rem;
               color: white !important;
               letter-spacing: 1px;
          }

          .navbar-brand span {
               color: var(--secondary);
          }

          .nav-link {
               font-weight: 500;
               color: rgba(255, 255, 255, 0.8) !important;
               margin: 0 10px;
               position: relative;
               transition: all 0.3s;
          }

          .nav-link:hover {
               color: white !important;
          }

          .nav-link:after {
               content: '';
               position: absolute;
               width: 0;
               height: 2px;
               background: var(--secondary);
               bottom: 0;
               left: 0;
               transition: width 0.3s;
          }

          .nav-link:hover:after {
               width: 100%;
          }

          /* Hero Section Modern */
          .hero-section {
               background: linear-gradient(135deg, rgba(26, 42, 58, 0.9), rgba(18, 31, 43, 0.95)),
                    url('https://images.unsplash.com/photo-1620417093066-8e8d08a2a5c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
               background-size: cover;
               background-position: center;
               background-attachment: fixed;
               color: white;
               padding: 150px 0 100px;
               text-align: center;
               position: relative;
               overflow: hidden;
          }

          .hero-section:before {
               content: '';
               position: absolute;
               bottom: -50px;
               left: 0;
               width: 100%;
               height: 100px;
               background: #f5f7fa;
               transform: skewY(-3deg);
               z-index: 1;
          }

          .hero-title {
               font-size: 3.5rem;
               font-weight: 700;
               margin-bottom: 20px;
               text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
               line-height: 1.2;
               animation: fadeInUp 1s ease;
          }

          .hero-subtitle {
               font-size: 1.3rem;
               margin-bottom: 30px;
               opacity: 0.9;
               max-width: 700px;
               margin-left: auto;
               margin-right: auto;
               animation: fadeInUp 1s ease 0.2s both;
          }

          .cta-button {
               background: linear-gradient(135deg, var(--secondary), #e67e22);
               border: none;
               padding: 15px 40px;
               font-size: 1.1rem;
               font-weight: 600;
               border-radius: 50px;
               transition: all 0.4s;
               box-shadow: 0 10px 25px rgba(243, 156, 18, 0.3);
               position: relative;
               overflow: hidden;
               z-index: 1;
               animation: fadeInUp 1s ease 0.4s both;
          }

          .cta-button:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: linear-gradient(135deg, #e67e22, var(--secondary));
               z-index: -1;
               opacity: 0;
               transition: opacity 0.4s;
          }

          .cta-button:hover {
               transform: translateY(-5px);
               box-shadow: 0 15px 30px rgba(243, 156, 18, 0.4);
          }

          .cta-button:hover:before {
               opacity: 1;
          }

          .scramble-text {
               font-size: 2rem;
               font-weight: 700;
               color: var(--secondary);
               height: 60px;
               margin-bottom: 30px;
               text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
               animation: fadeInUp 1s ease 0.6s both;
          }

          /* Game Section Modern */
          .game-section {
               padding: 100px 0;
               background-color: #f5f7fa;
               position: relative;
               z-index: 2;
          }

          .section-title {
               text-align: center;
               margin-bottom: 60px;
               font-weight: 700;
               color: var(--primary);
               position: relative;
               font-size: 2.2rem;
          }

          .section-title:after {
               content: '';
               display: block;
               width: 80px;
               height: 4px;
               background: linear-gradient(90deg, var(--secondary), var(--accent));
               margin: 15px auto;
               border-radius: 2px;
          }

          .game-card {
               border-radius: 12px;
               overflow: hidden;
               box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
               transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
               margin-bottom: 30px;
               border: none;
               background: white;
               position: relative;
               transform: translateY(0);
          }

          .game-card:hover {
               transform: translateY(-10px);
               box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
          }

          .game-card:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 5px;
               background: linear-gradient(90deg, var(--secondary), var(--accent));
          }

          .game-image {
               width: 100%;
               height: 200px;
               object-fit: cover;
               transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          }

          .game-card:hover .game-image {
               transform: scale(1.08);
          }

          .card-body {
               padding: 25px;
          }

          .game-title {
               font-weight: 600;
               margin: 10px 0 15px;
               color: var(--primary);
               font-size: 1.2rem;
          }

          .progress-container {
               margin: 20px 0;
          }

          .progress {
               height: 10px;
               border-radius: 5px;
               background-color: #e9ecef;
               overflow: visible;
          }

          .progress-bar {
               border-radius: 5px;
               transition: width 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
               position: relative;
               overflow: visible;
          }

          .progress-bar:after {
               content: attr(aria-valuenow) '%';
               position: absolute;
               right: -25px;
               top: -30px;
               background: var(--primary);
               color: white;
               padding: 3px 8px;
               border-radius: 4px;
               font-size: 12px;
               font-weight: 600;
          }

          .progress-bar.red:after {
               background: var(--danger);
          }

          .progress-bar.yellow:after {
               background: var(--warning);
               color: var(--dark);
          }

          .progress-bar.green:after {
               background: var(--success);
          }

          .progress-text {
               text-align: right;
               font-weight: 600;
               margin-top: 5px;
               font-size: 14px;
               color: var(--text-light);
          }

          .game-info {
               background-color: rgba(241, 196, 15, 0.08);
               padding: 20px;
               border-radius: 8px;
               margin-top: 15px;
               border-left: 3px solid var(--secondary);
               transition: all 0.3s;
          }

          .game-card:hover .game-info {
               background-color: rgba(241, 196, 15, 0.12);
          }

          .info-title {
               font-weight: 600;
               color: var(--primary);
               margin-bottom: 8px;
               font-size: 14px;
               display: flex;
               align-items: center;
          }

          .info-title i {
               margin-right: 8px;
               color: var(--secondary);
               font-size: 16px;
          }

          .info-value {
               font-weight: 700;
               color: var(--secondary);
               font-size: 15px;
          }

          .play-button {
               background: linear-gradient(to right, var(--primary), var(--dark));
               color: white;
               border: none;
               width: 100%;
               padding: 12px;
               border-radius: 8px;
               font-weight: 600;
               transition: all 0.4s;
               margin-top: 20px;
               display: flex;
               align-items: center;
               justify-content: center;
               position: relative;
               overflow: hidden;
          }

          .play-button:before {
               content: '';
               position: absolute;
               top: 0;
               left: -100%;
               width: 100%;
               height: 100%;
               background: linear-gradient(to right, var(--dark), var(--primary));
               transition: all 0.4s;
               z-index: 0;
          }

          .play-button:hover {
               transform: translateY(-3px);
               box-shadow: 0 10px 20px rgba(26, 42, 58, 0.2);
          }

          .play-button:hover:before {
               left: 0;
          }

          .play-button span {
               position: relative;
               z-index: 1;
          }

          .play-button i {
               margin-left: 8px;
               position: relative;
               z-index: 1;
               transition: all 0.3s;
          }

          .play-button:hover i {
               transform: translateX(5px);
          }

          /* Feature Section Modern */
          .feature-section {
               padding: 100px 0;
               background: white;
               position: relative;
          }

          .feature-section:before {
               content: '';
               position: absolute;
               top: -50px;
               left: 0;
               width: 100%;
               height: 100px;
               background: #f5f7fa;
               transform: skewY(-3deg);
               z-index: 1;
          }

          .feature-box {
               text-align: center;
               padding: 40px 25px;
               background: white;
               border-radius: 12px;
               box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
               transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
               height: 100%;
               border: 1px solid rgba(0, 0, 0, 0.03);
               position: relative;
               overflow: hidden;
               z-index: 1;
          }

          .feature-box:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 5px;
               background: linear-gradient(90deg, var(--secondary), var(--accent));
          }

          .feature-box:hover {
               transform: translateY(-10px);
               box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
          }

          .feature-icon {
               font-size: 2.5rem;
               color: var(--secondary);
               margin-bottom: 25px;
               background: rgba(243, 156, 18, 0.1);
               width: 80px;
               height: 80px;
               display: inline-flex;
               align-items: center;
               justify-content: center;
               border-radius: 50%;
               transition: all 0.3s;
          }

          .feature-box:hover .feature-icon {
               background: rgba(243, 156, 18, 0.2);
               transform: rotateY(180deg);
          }

          .feature-title {
               font-weight: 600;
               margin-bottom: 15px;
               color: var(--primary);
               font-size: 1.3rem;
          }

          .feature-box p {
               color: var(--text-light);
          }

          /* Testimonial Section Modern */
          .testimonial-section {
               padding: 100px 0;
               background: linear-gradient(135deg, #f5f7fa, #e8ebf0);
               position: relative;
          }

          .testimonial-card {
               padding: 30px;
               border-radius: 12px;
               box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
               margin: 15px;
               background: white;
               transition: all 0.3s;
               position: relative;
               border: 1px solid rgba(0, 0, 0, 0.03);
          }

          .testimonial-card:before {
               content: '"';
               position: absolute;
               top: 20px;
               left: 20px;
               font-size: 5rem;
               color: rgba(243, 156, 18, 0.1);
               font-family: serif;
               line-height: 1;
               z-index: 0;
          }

          .testimonial-card:hover {
               transform: translateY(-5px);
               box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
          }

          .testimonial-text {
               font-style: italic;
               margin-bottom: 20px;
               position: relative;
               z-index: 1;
               color: var(--text);
          }

          .testimonial-author {
               font-weight: 600;
               color: var(--secondary);
               margin-bottom: 5px;
          }

          .testimonial-location {
               color: var(--text-light);
               font-size: 0.9rem;
          }

          .rating {
               color: var(--warning);
               margin-top: 10px;
          }

          /* CTA Section Modern */
          .cta-section {
               padding: 80px 0;
               background: linear-gradient(135deg, var(--primary), var(--dark));
               color: white;
               position: relative;
               overflow: hidden;
          }

          .cta-section:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') center/cover;
               opacity: 0.1;
               z-index: 0;
          }

          .cta-content {
               position: relative;
               z-index: 1;
          }

          .cta-title {
               font-size: 2.5rem;
               font-weight: 700;
               margin-bottom: 20px;
          }

          .cta-subtitle {
               font-size: 1.2rem;
               margin-bottom: 30px;
               opacity: 0.9;
               max-width: 700px;
               margin-left: auto;
               margin-right: auto;
          }

          .cta-button-2 {
               background: linear-gradient(135deg, var(--secondary), #e67e22);
               border: none;
               padding: 15px 40px;
               font-size: 1.1rem;
               font-weight: 600;
               border-radius: 50px;
               transition: all 0.4s;
               box-shadow: 0 10px 25px rgba(243, 156, 18, 0.3);
               position: relative;
               overflow: hidden;
               z-index: 1;
               color: white;
          }

          .cta-button-2:hover {
               transform: translateY(-5px);
               box-shadow: 0 15px 30px rgba(243, 156, 18, 0.4);
               color: white;
          }

          /* Footer Modern */
          footer {
               background: linear-gradient(135deg, var(--dark), #0d1620);
               color: white;
               padding: 80px 0 20px;
               position: relative;
          }

          footer:before {
               content: '';
               position: absolute;
               top: -50px;
               left: 0;
               width: 100%;
               height: 100px;
               background: linear-gradient(135deg, #f5f7fa, #e8ebf0);
               transform: skewY(-3deg);
               z-index: 1;
          }

          .footer-logo {
               font-size: 1.8rem;
               font-weight: 700;
               color: white;
               margin-bottom: 20px;
               display: inline-block;
          }

          .footer-logo span {
               color: var(--secondary);
          }

          .footer-about {
               margin-bottom: 20px;
               opacity: 0.8;
               line-height: 1.7;
          }

          .footer-links h5 {
               font-size: 1.2rem;
               font-weight: 600;
               margin-bottom: 25px;
               position: relative;
               color: white;
          }

          .footer-links h5:after {
               content: '';
               position: absolute;
               bottom: -10px;
               left: 0;
               width: 40px;
               height: 3px;
               background: var(--secondary);
          }

          .footer-links a {
               color: rgba(255, 255, 255, 0.7);
               text-decoration: none;
               transition: all 0.3s;
               display: block;
               margin-bottom: 12px;
               position: relative;
               padding-left: 15px;
          }

          .footer-links a:before {
               content: '→';
               position: absolute;
               left: 0;
               top: 0;
               color: var(--secondary);
               opacity: 0;
               transition: all 0.3s;
          }

          .footer-links a:hover {
               color: white;
               padding-left: 20px;
          }

          .footer-links a:hover:before {
               opacity: 1;
               left: 0;
          }

          .social-icons a {
               color: white;
               font-size: 1.2rem;
               margin-right: 15px;
               transition: all 0.3s;
               display: inline-flex;
               align-items: center;
               justify-content: center;
               width: 40px;
               height: 40px;
               background: rgba(255, 255, 255, 0.1);
               border-radius: 50%;
          }

          .social-icons a:hover {
               transform: translateY(-3px);
               background: var(--secondary);
               color: var(--dark);
          }

          .contact-info p {
               margin-bottom: 15px;
               display: flex;
               align-items: flex-start;
               opacity: 0.8;
          }

          .contact-info i {
               margin-right: 10px;
               color: var(--secondary);
               margin-top: 3px;
          }

          .copyright {
               border-top: 1px solid rgba(255, 255, 255, 0.1);
               padding-top: 20px;
               margin-top: 50px;
               text-align: center;
               color: rgba(255, 255, 255, 0.6);
               font-size: 0.9rem;
          }

          /* Animations */
          @keyframes fadeInUp {
               from {
                    opacity: 0;
                    transform: translateY(20px);
               }

               to {
                    opacity: 1;
                    transform: translateY(0);
               }
          }

          @keyframes pulse {
               0% {
                    transform: scale(1);
               }

               50% {
                    transform: scale(1.05);
               }

               100% {
                    transform: scale(1);
               }
          }

          .pulse {
               animation: pulse 2s infinite;
          }

          /* Responsive Adjustments */
          @media (max-width: 992px) {
               .hero-title {
                    font-size: 2.8rem;
               }

               .section-title {
                    font-size: 2rem;
               }
          }

          @media (max-width: 768px) {
               .hero-title {
                    font-size: 2.2rem;
               }

               .hero-subtitle {
                    font-size: 1.1rem;
               }

               .scramble-text {
                    font-size: 1.5rem;
                    height: 50px;
               }

               .section-title {
                    font-size: 1.8rem;
               }

               .game-card {
                    margin-bottom: 25px;
               }

               .feature-box {
                    padding: 30px 20px;
               }
          }

          @media (max-width: 576px) {
               .hero-section {
                    padding: 120px 0 80px;
               }

               .hero-title {
                    font-size: 1.8rem;
               }

               .cta-button {
                    padding: 12px 30px;
                    font-size: 1rem;
               }
          }