:root {
            --primary: #3964BE;
            --secondary: #48cd4f;
            --dark: #10243c;
            --text: #ffffff;
            --bg: #0b1b2e;
        }
        body { font-family: Roboto, sans-serif; background-color: var(--bg); color: var(--text); margin: 0; line-height: 1.6; }
        header { background: var(--dark); padding: 20px 0; border-bottom: 3px solid var(--secondary); }
        .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
        .logo-text { font-family: 'Concert One', sans-serif; font-size: 24px; color: var(--secondary); text-transform: uppercase; }
        nav ul { display: flex; list-style: none; gap: 20px; }
        nav a { color: var(--text); text-decoration: none; font-weight: bold; }
        .hero { padding: 60px 0; text-align: center; background: linear-gradient(to right, #1d324a, #0b1b2e); }
        h1 { font-family: 'Concert One', sans-serif; font-size: 3rem; margin-bottom: 20px; }
        .bonus-table { width: 100%; border-collapse: collapse; margin-top: 40px; background: #172c44; border-radius: 15px; overflow: hidden; }
        .bonus-table th, .bonus-table td { padding: 20px; text-align: left; border-bottom: 1px solid #244b75; }
        .bonus-btn { background: var(--secondary); color: #000; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; }
        footer { background: #212121; padding: 40px 0; text-align: center; margin-top: 60px; }
        @media (max-width: 768px) {
            .bonus-table { display: block; overflow-x: auto; }
            nav ul { flex-direction: column; }
        }