:root {
       --bg-dark: #0a1128;
       --bg-darker: #050814;
       --bg-card: rgba(255, 255, 255, 0.05);
       --color-red: #E63946;
       --color-red-hover: #D62828;
       --color-gold: #D4AF37;
       --color-gold-hover: #F1C40F;
       --text-light: #F8F9FA;
       --text-muted: #A0AEC0;
       --font-main: 'Montserrat', sans-serif;
       --font-accent: 'Playfair Display', serif;
       --transition: all 0.3s ease;
       --glass-border: 1px solid rgba(255, 255, 255, 0.1);
   }

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

   body {
       font-family: var(--font-main);
       background-color: var(--bg-darker);
       color: var(--text-light);
       line-height: 1.6;
       overflow-x: hidden;
   }

   h1,
   h2,
   h3,
   h4 {
       font-family: var(--font-accent);
       font-weight: 700;
   }

   a {
       text-decoration: none;
       color: inherit;
       transition: var(--transition);
   }

   ul {
       list-style: none;
   }

   .container {
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .section-title {
       text-align: center;
       font-size: 2.5rem;
       color: var(--color-gold);
       margin-bottom: 3rem;
   }


   .btn {
       display: inline-block;
       padding: 12px 28px;
       border-radius: 4px;
       font-weight: 600;
       cursor: pointer;
       border: none;
       transition: var(--transition);
       text-transform: uppercase;
       letter-spacing: 1px;
       font-size: 0.9rem;
   }

   .btn-primary {
       background: linear-gradient(135deg, var(--color-red), var(--color-red-hover));
       color: white;
       box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
   }

   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5);
   }

   .btn-outline {
       background: transparent;
       border: 2px solid var(--color-gold);
       color: var(--color-gold);
   }

   .btn-outline:hover {
       background: var(--color-gold);
       color: var(--bg-darker);
   }


   header {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       background: rgba(10, 17, 40, 0.95);
       backdrop-filter: blur(10px);
       z-index: 1000;
       border-bottom: var(--glass-border);
       padding: 15px 0;
       transition: var(--transition);
   }

   header .container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .logo {
       font-family: var(--font-accent);
       font-size: 1.8rem;
       color: var(--text-light);
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .logo i {
       color: var(--color-red);
   }

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

   .nav-links {
       display: flex;
       gap: 25px;
   }

   .nav-links a:hover {
       color: var(--color-gold);
   }

   .nav-actions {
       display: flex;
       gap: 15px;
   }

   .hamburger {
       display: none;
       font-size: 1.5rem;
       cursor: pointer;
       color: var(--color-gold);
   }


   .hero {
       height: 100vh;
       display: flex;
       align-items: center;
       position: relative;
       background: url('../img/hero.jpeg') center/cover no-repeat;
       padding-top: 80px;
   }

   .hero::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(to right, rgba(5, 8, 20, 0.95) 0%, rgba(10, 17, 40, 0.8) 100%);
   }

   .hero-content {
       position: relative;
       z-index: 1;
       max-width: 800px;
   }

   .hero h1 {
       font-size: 4rem;
       line-height: 1.1;
       margin-bottom: 20px;
       color: var(--text-light);
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }

   .hero p {
       font-size: 1.2rem;
       color: var(--text-muted);
       margin-bottom: 30px;
   }

   .hero-btns {
       display: flex;
       gap: 20px;
       margin-bottom: 40px;
   }

   .trust-badges {
       display: flex;
       gap: 20px;
       flex-wrap: wrap;
   }

   .badge {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 0.9rem;
       background: rgba(255, 255, 255, 0.1);
       padding: 8px 15px;
       border-radius: 20px;
       backdrop-filter: blur(5px);
       border: var(--glass-border);
   }

   .badge i {
       color: var(--color-gold);
   }


   .services {
       padding: 100px 0;
       background: var(--bg-dark);
   }

   .services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
   }

   .service-card {
       background: var(--bg-card);
       border: var(--glass-border);
       padding: 40px 30px;
       border-radius: 10px;
       text-align: center;
       transition: var(--transition);
   }

   .service-card:hover {
       transform: translateY(-10px);
       background: rgba(255, 255, 255, 0.08);
       border-color: var(--color-gold);
   }

   .service-card i {
       font-size: 3rem;
       color: var(--color-red);
       margin-bottom: 20px;
   }

   .service-card h3 {
       font-size: 1.5rem;
       margin-bottom: 15px;
       color: var(--color-gold);
   }


   .about {
       padding: 100px 0;
       background: var(--bg-darker);
   }

   .about-disclaimer {
       text-align: center;
       color: var(--color-red);
       font-weight: 600;
       margin-bottom: 40px;
       font-size: 1.1rem;
   }

   .about-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 40px;
   }

   .about-card {
       border-radius: 10px;
       overflow: hidden;
       background: var(--bg-card);
       border: var(--glass-border);
   }

   .about-img {
       height: 250px;
       background-size: cover;
       background-position: center;
   }

   .about-content {
       padding: 30px;
   }

   .about-content h3 {
       font-size: 1.4rem;
       margin-bottom: 15px;
       color: var(--color-gold);
   }


   .reviews {
       padding: 100px 0;
       background: var(--bg-dark);
       overflow: hidden;
   }

   .slider-container {
       position: relative;
       max-width: 800px;
       margin: 0 auto;
   }

   .slider {
       display: flex;
       transition: transform 0.5s ease-in-out;
   }

   .slide {
       min-width: 100%;
       padding: 40px;
       background: var(--bg-card);
       border: var(--glass-border);
       border-radius: 10px;
       text-align: center;
       box-sizing: border-box;
   }

   .slide-stars {
       color: var(--color-gold);
       margin-bottom: 20px;
   }

   .slide-text {
       font-size: 1.2rem;
       font-style: italic;
       margin-bottom: 20px;
       color: var(--text-muted);
   }

   .slide-author {
       font-weight: bold;
       color: var(--text-light);
   }

   .slider-controls {
       display: flex;
       justify-content: center;
       gap: 20px;
       margin-top: 30px;
   }

   .slider-btn {
       background: transparent;
       border: 1px solid var(--color-gold);
       color: var(--color-gold);
       width: 40px;
       height: 40px;
       border-radius: 50%;
       cursor: pointer;
       transition: var(--transition);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .slider-btn:hover {
       background: var(--color-gold);
       color: var(--bg-darker);
   }

   .slider-dots {
       display: flex;
       justify-content: center;
       gap: 10px;
       margin-top: 20px;
   }

   .dot {
       width: 12px;
       height: 12px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       cursor: pointer;
       transition: var(--transition);
   }

   .dot.active {
       background: var(--color-gold);
   }


   .slots {
       padding: 100px 0;
       background: var(--bg-darker);
   }

   .slots-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
   }

   .slot-card {
       position: relative;
       border-radius: 10px;
       overflow: hidden;
       aspect-ratio: 4/3;
       background-size: cover;
       background-position: center;
       border: var(--glass-border);
   }

   .slot-label {
       position: absolute;
       top: 15px;
       left: 15px;
       background: var(--color-red);
       color: white;
       padding: 5px 12px;
       border-radius: 4px;
       font-size: 0.8rem;
       font-weight: bold;
       z-index: 2;
   }

   .slot-info {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       padding: 20px;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
       z-index: 2;
   }

   .slot-info h3 {
       color: white;
       font-size: 1.3rem;
   }

   .slot-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(10, 17, 40, 0.85);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: var(--transition);
       z-index: 3;
       backdrop-filter: blur(3px);
   }

   .slot-card:hover .slot-overlay {
       opacity: 1;
   }


   .faq {
       padding: 100px 0;
       background: var(--bg-dark);
   }

   .faq-container {
       max-width: 800px;
       margin: 0 auto;
   }

   .faq-item {
       background: var(--bg-card);
       border: var(--glass-border);
       border-radius: 8px;
       margin-bottom: 15px;
       overflow: hidden;
   }

   .faq-question {
       padding: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
       font-weight: 600;
       color: var(--text-light);
       transition: var(--transition);
   }

   .faq-question:hover {
       color: var(--color-gold);
   }

   .faq-answer {
       padding: 0 20px;
       max-height: 0;
       overflow: hidden;
       transition: all 0.4s ease;
       color: var(--text-muted);
   }

   .faq-item.active .faq-answer {
       padding: 0 20px 20px 20px;
       max-height: 200px;
   }

   .faq-item.active .faq-question i {
       transform: rotate(180deg);
       color: var(--color-gold);
   }


   .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.8);
       backdrop-filter: blur(5px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 2000;
       opacity: 0;
       visibility: hidden;
       transition: var(--transition);
   }

   .modal-overlay.active {
       opacity: 1;
       visibility: visible;
   }

   .modal-content {
       background: var(--bg-dark);
       border: 1px solid var(--color-gold);
       padding: 40px;
       border-radius: 12px;
       width: 90%;
       max-width: 500px;
       position: relative;
       transform: translateY(-20px);
       transition: var(--transition);
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
   }

   .modal-overlay.active .modal-content {
       transform: translateY(0);
   }

   .modal-close {
       position: absolute;
       top: 15px;
       right: 15px;
       font-size: 1.5rem;
       color: var(--text-muted);
       cursor: pointer;
       transition: var(--transition);
       background: none;
       border: none;
   }

   .modal-close:hover {
       color: var(--color-red);
   }

   .modal-content h2 {
       margin-bottom: 25px;
       color: var(--color-gold);
       text-align: center;
   }

   .form-group {
       margin-bottom: 20px;
   }

   .form-group label {
       display: block;
       margin-bottom: 8px;
       color: var(--text-muted);
       font-size: 0.9rem;
   }

   .form-control {
       width: 100%;
       padding: 12px 15px;
       background: rgba(0, 0, 0, 0.3);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 6px;
       color: white;
       font-family: inherit;
   }

   .form-control:focus {
       outline: none;
       border-color: var(--color-gold);
   }

   .checkbox-group {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       margin-bottom: 25px;
   }

   .checkbox-group input {
       margin-top: 4px;
       accent-color: var(--color-gold);
   }

   .checkbox-group label {
       font-size: 0.85rem;
       color: var(--text-muted);
   }

   .full-width-btn {
       width: 100%;
   }


   .age-gate {
       background: rgba(5, 8, 20, 0.98);
       text-align: center;
   }

   .age-gate .modal-content {
       max-width: 600px;
       border-color: var(--color-red);
   }

   .age-gate i {
       font-size: 4rem;
       color: var(--color-red);
       margin-bottom: 20px;
   }

   .age-error {
       color: var(--color-red);
       margin-top: 15px;
       display: none;
       font-weight: 600;
   }


   .cookie-banner {
       position: fixed;
       bottom: -100%;
       left: 0;
       width: 100%;
       background: rgba(10, 17, 40, 0.95);
       border-top: 1px solid var(--color-gold);
       padding: 20px 0;
       z-index: 1500;
       transition: bottom 0.5s ease;
       backdrop-filter: blur(10px);
   }

   .cookie-banner.active {
       bottom: 0;
   }

   .cookie-content {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 20px;
   }

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

   .cookie-btns .btn {
       padding: 8px 15px;
       font-size: 0.8rem;
   }


   @media (max-width: 992px) {
       .hero h1 {
           font-size: 3rem;
       }
   }

   @media (max-width: 768px) {
       .hamburger {
           display: block;
       }

       .nav-links,
       .nav-actions {
           position: absolute;
           top: 100%;
           left: 0;
           width: 100%;
           background: var(--bg-dark);
           flex-direction: column;
           align-items: center;
           padding: 20px 0;
           border-bottom: var(--glass-border);
           display: none;
       }

       .nav-actions {
           top: calc(100% + 220px);
           border-top: none;
           padding-top: 0;
       }

       .nav-links.active,
       .nav-actions.active {
           display: flex;
       }

       .hero-btns {
           flex-direction: column;
       }

       .cookie-content {
           flex-direction: column;
           text-align: center;
       }

       .cookie-btns {
           flex-wrap: wrap;
           justify-content: center;
       }
   }
.legal-section {
            padding: 120px 0 80px;
            background: var(--bg-dark);
            min-height: 100vh;
        }

        .legal-header {
            text-align: center;
            margin-bottom: 50px;
            padding-bottom: 30px;
            border-bottom: var(--glass-border);
        }

        .legal-header h1 {
            font-size: 3rem;
            color: var(--color-gold);
            margin-bottom: 15px;
        }

        .legal-header p {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        .legal-content {
            max-width: 900px;
            margin: 0 auto;
            background: var(--bg-card);
            padding: 50px;
            border-radius: 12px;
            border: var(--glass-border);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .legal-content h2 {
            font-size: 1.8rem;
            color: var(--text-light);
            margin: 40px 0 20px;
            border-left: 4px solid var(--color-red);
            padding-left: 15px;
        }

        .legal-content h3 {
            font-size: 1.3rem;
            color: var(--color-gold);
            margin: 25px 0 15px;
        }

        .legal-content p {
            color: var(--text-muted);
            margin-bottom: 20px;
            font-size: 1.05rem;
            line-height: 1.8;
        }

        .legal-content ul {
            margin-bottom: 25px;
            padding-left: 20px;
        }

        .legal-content ul li {
            color: var(--text-muted);
            margin-bottom: 10px;
            position: relative;
            padding-left: 15px;
            line-height: 1.7;
        }

        .legal-content ul li::before {
            content: '\f111';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: 6px;
            color: var(--color-gold);
            position: absolute;
            left: 0;
            top: 10px;
        }

        .legal-content strong {
            color: var(--text-light);
        }@media (max-width: 768px) {
            .legal-content {
                padding: 30px 20px;
            }
            .legal-header h1 {
                font-size: 2.2rem;
            }
        }.highlight-box {
            background: rgba(230, 57, 70, 0.1);
            border: 1px solid var(--color-red);
            border-radius: 8px;
            padding: 20px;
            margin: 30px 0;
        }

        .highlight-box h3 {
            color: var(--color-red);
            margin-top: 0;
        }.thanks-section {
            padding: 120px 20px;
            text-align: center;
            width: 100%;
        }

        .thanks-content {
            max-width: 600px;
            margin: 0 auto;
            background: var(--bg-card);
            padding: 60px 40px;
            border-radius: 12px;
            border: var(--glass-border);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            position: relative;
            overflow: hidden;
        }

        .thanks-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--color-red), var(--color-gold));
        }

        .success-icon {
            font-size: 5rem;
            color: var(--color-gold);
            margin-bottom: 25px;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
        }

        .thanks-content h1 {
            font-size: 2.5rem;
            color: var(--text-light);
            margin-bottom: 15px;
        }

        .thanks-content p {
            color: var(--text-muted);
            font-size: 1.1rem;
            margin-bottom: 35px;
        }

        .action-btns {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }







   footer {
       width: 100%;
   }

   .footer-sport {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 35px;
   }

   .footer-legal {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 15px;
   }

   .bg-dark {
       background: #111827;
   }

   .text-white {
       color: #fff;
   }

   .text-muted {
       color: rgba(255, 255, 255, 0.65);
   }

   .text-center {
       text-align: center;
   }

   .py-5 {
       padding-top: 3rem;
       padding-bottom: 3rem;
   }

   .container {
       width: 100%;
       max-width: 1140px;
       margin: 0 auto;
       padding-left: 15px;
       padding-right: 15px;
       box-sizing: border-box;
   }


   h3,
   p,
   a,
   span,
   address {
       margin-top: 0;
   }

   h3 {
       font-size: 1.75rem;
       line-height: 1.3;
       font-weight: 700;
   }

   p {
       font-size: 1rem;
       line-height: 1.7;
   }

   .small {
       font-size: 0.875rem;
       line-height: 1.6;
   }


   .mb-2 {
       margin-bottom: 0.5rem;
   }

   .mb-3 {
       margin-bottom: 1rem;
   }

   .mb-4 {
       margin-bottom: 1.5rem;
   }

   .mb-5 {
       margin-bottom: 2rem;
   }

   .me-3 {
       margin-right: 1rem;
   }

   .m-1 {
       margin: 0.25rem;
   }


   .badge {
       display: inline-block;
       padding: 0.55rem 0.9rem;
       border-radius: 999px;
       font-size: 0.75rem;
       font-weight: 600;
       line-height: 1;
       letter-spacing: 0.03em;
       text-transform: uppercase;
   }

   .bg-secondary {
       background: #4b5563;
       color: #fff;
   }


   .d-flex {
       display: flex;
   }

   .flex-wrap {
       flex-wrap: wrap;
   }

   .justify-content-center {
       justify-content: center;
   }

   .align-items-center {
       align-items: center;
   }

   .gap-4 {
       gap: 1.5rem;
   }


   a {
       color: inherit;
       text-decoration: none;
       transition: opacity 0.25s ease, color 0.25s ease;
       cursor: pointer;
   }

   a:hover {
       opacity: 0.85;
   }

   .text-decoration-underline {
       text-decoration: underline;
   }


   .img-blog a {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0.4rem 0.7rem;
       background: rgba(255, 255, 255, 0.04);
       border-radius: 10px;
   }

   .img-blog img {
       display: block;
       max-height: 40px;
       width: auto;
       object-fit: contain;
   }


   nav a {
       display: inline-block;
       margin-bottom: 0.5rem;
       font-weight: 500;
   }


   address {
       font-style: normal;
       line-height: 1.7;
   }

   address a {
       text-decoration: underline;
   }


   @media (max-width: 768px) {
       .container {
           padding-left: 20px;
           padding-right: 20px;
       }

       h3 {
           font-size: 1.4rem;
       }

       p {
           font-size: 0.95rem;
       }

       .gap-4 {
           gap: 1rem;
       }

       nav a,
       .mb-3.small a {
           display: inline-block;
           margin-right: 0.75rem;
           margin-bottom: 0.5rem;
       }
   }