.logo-section {display: flex;align-items: center}
.content-text { min-width: 0; }








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


:root {--shadow-accent: 0 8px 32px rgba(6, 182, 212, 0.4);--hero-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --info-color: #06b6d4;
    --accent-light: #67e8f9;--shadow-glow: 0 0 30px rgba(6, 182, 212, 0.3);
    --text-gray: #cbd5e1;
    --tertiary-bg: #334155;
    --accent-hover: #0891b2;
    --text-muted: rgba(148,163,184,1);
    --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    
    --accent-color: #06b6d4;--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.15);
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.1);
    
    
    --primary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);--radius-xl: 1rem;
    --container-max-width: 1200px;--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.25);--font-heading: 'Roboto Slab', Georgia, serif;--transition-slow: 0.5s ease-in-out;
    --radius-sm: 0.375rem;--shadow-vip: 0 0 20px rgba(6, 182, 212, 0.3);
    --secondary-bg: #1e293b;--card-gradient: linear-gradient(145deg, #1e293b 0%, #334155 100%);
    
    
    --text-white: rgb(248,250,252);
    --primary-bg: #0f172a;--section-padding: 4rem 0;--radius-full: 9999px;
    --warning-color: #f97316;--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.2);
    --transition-fast: 0.15s ease-in-out;--transition-normal: 0.3s ease-in-out;--element-spacing: 1.5rem;
    
    
    --success-color: #10b981;
    --danger-color: rgba(239,68,68,1);--radius-lg: 0.75rem;--radius-md: 0.5rem}


html {scroll-behavior: smooth;font-size: 16px}

body {overflow-x: hidden;color: var(--text-white);line-height: 1.6;font-family: var(--font-primary);background-color: var(--primary-bg);outline-offset:0;isolation:auto}

.dark-theme {background: var(--hero-gradient);min-height: 100vh}


.container {max-width: var(--container-max-width);margin: 0 auto;padding: 0 1rem}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}


h1, h2, h3, h4, h5, h6 {font-weight: 700;line-height: 1.2;font-family: var(--font-heading);margin-bottom: 1rem}

h1 {background: var(--primary-gradient);font-size: clamp(2rem, 4vw, 3.5rem);-webkit-background-clip: text !important;background-clip: text !important;-webkit-text-fill-color: transparent !important}

h2 {font-size: clamp(1.75rem, 3vw, 2.5rem);color: var(--text-white)}

h3 {font-size: clamp(1.25rem, 2.5vw, 1.875rem);color: var(--accent-color)}

p {margin-bottom: 1rem;color: var(--text-gray)}

strong {color: var(--accent-color);font-weight: 600}


.main-header {transition: var(--transition-normal);top: 0;z-index: 1000;backdrop-filter: blur(10px);background: rgba(30, 27, 75, 0.95);border-bottom: 1px solid rgba(6, 182, 212, 0.2);left: 0;right: 0;position: fixed}

.header-content {justify-content: space-between;align-items: center;display: flex;padding: 0.75rem 0}


@media (max-width: 1023px) {
    .header-content {gap: 1rem;align-items: center;display: grid;grid-template-columns: 1fr auto auto}
    
    .brand-logo {
        grid-column: 1;
    }
    
    .mobile-register {
        grid-column: 2;
    }
    
    .mobile-menu-toggle {
        grid-column: 3;
    }
}

.brand-logo img {width: auto;transition: var(--transition-fast);height: 50px}

.brand-logo:hover img {
    transform: scale(1.05);
}


.desktop-nav {
    display: none;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: block;
    }
}


.nav-groups {display: flex;gap: 1.5rem;align-items: center}

.nav-group {
    position: relative;
}

.nav-group-label {text-transform: uppercase;margin-bottom: 0.15rem;font-weight: 600;color: var(--text-muted);letter-spacing: 0.03em;font-size: 0.7rem;display: block}

.nav-group .nav-menu {gap: 0.75rem;padding: 0;list-style: none;margin: 0;display: flex}

.nav-menu {list-style: none;display: flex;gap: 1.5rem}

.nav-link {transition: var(--transition-fast);color: var(--text-gray);text-decoration: none;font-size: 0.9rem;border-radius: var(--radius-sm);padding: 0.4rem 0.75rem;position: relative;font-weight: 500}

.nav-link:hover,
.nav-link.active {box-shadow: var(--shadow-glow);background: var(--tertiary-bg);color: var(--accent-light)}


.header-actions {display: none;gap: 0.75rem}

@media (min-width: 768px) {
    .header-actions {
        display: flex;
    }
}


.mobile-register {align-items: center;display: flex}

@media (min-width: 1024px) {
    .mobile-register {
        display: none;
    }
}



.btn-mobile-register {border-radius: var(--radius-full);letter-spacing: 0.3px;font-weight: 700;text-transform: uppercase;position: relative;color: var(--primary-bg);transition: var(--transition-normal);padding: 0.6rem 1rem;text-decoration: none;border: 2px solid var(--accent-color);white-space: nowrap;box-shadow: var(--shadow-glow);font-size: 0.875rem;background: var(--primary-gradient);overflow: hidden}

.btn-mobile-register::before {right: -2px;content: '';top: -2px;position: absolute;bottom: -2px;opacity: 0.6;z-index: -1;border-radius: inherit;filter: blur(6px);background: var(--primary-gradient);left: -2px;animation: mobilePulse 3s ease-in-out infinite}

@keyframes mobilePulse {
    0%, 100% {opacity: 0.6;transform: scale(1)}
    50% {transform: scale(1.03);opacity: 0.8}
}


.mobile-menu-toggle {display: flex;gap: 4px;background: none;cursor: pointer;position: relative;flex-direction: column;padding: 0.5rem;z-index: 1001;border: none}

@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
}

.mobile-menu-toggle span {border-radius: var(--radius-full);background: var(--accent-color);height: 3px;transition: var(--transition-fast);width: 25px}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-nav {position: absolute;display: none;overflow: hidden;box-shadow: var(--shadow-lg);border-top: 1px solid rgba(6, 182, 212, 0.2);max-height: 0;background: var(--secondary-bg);top: 100%;transition: max-height 0.3s ease-in-out;right: 0;z-index: 1000;left: 0}

.mobile-nav.active {display: block;max-height: 500px}


body.mobile-menu-open {
    overflow: hidden;
}

.mobile-menu {list-style: none;padding: 0.75rem 0}

.mobile-link {gap: 0.6rem;font-size: 0.9rem;transition: var(--transition-fast);font-weight: 500;display: flex;color: var(--text-gray);padding: 0.75rem 1.5rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);text-decoration: none;align-items: center}

.mobile-link:hover,
.mobile-link.active {padding-left: 1.375rem;background: var(--tertiary-bg);color: var(--accent-light);border-left: 3px solid var(--accent-color)}



.mobile-link.cta {text-align: center;border-radius: var(--radius-lg);position: relative;margin: 1rem;overflow: hidden;letter-spacing: 0.5px;font-size: 1rem;font-weight: 700;padding: 1rem 1.5rem;background: var(--primary-gradient);color: var(--primary-bg);border: 2px solid var(--accent-color);box-shadow: var(--shadow-glow);justify-content: center;text-transform: uppercase}

.mobile-link.cta::before {border-radius: inherit;animation: pulse 2s infinite;position: absolute;z-index: -1;filter: blur(8px);background: var(--primary-gradient);bottom: -2px;opacity: 0.7;left: -2px;right: -2px;top: -2px;content: ''}

@keyframes pulse {
    0%, 100% {transform: scale(1);opacity: 0.7}
    50% {transform: scale(1.02);opacity: 0.9}
}


.btn {text-decoration: none;font-weight: 600;font-size: 0.875rem;border-radius: var(--radius-full);border: none;display: inline-flex;text-align: center;transition: var(--transition-normal);justify-content: center;white-space: nowrap;cursor: pointer;padding: 0.75rem 1.5rem;gap: 0.5rem;align-items: center}

.btn-primary {box-shadow: var(--shadow-accent);color: var(--text-white);background: var(--primary-gradient)}

.btn-primary:hover {transform: translateY(-2px);box-shadow: 0 12px 40px rgba(6, 182, 212, 0.5)}

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

.btn-outline:hover {color: var(--primary-bg);background: var(--accent-color)}

.btn-hero {font-size: 1.125rem;flex-direction: column;color: var(--text-white);padding: 1.25rem 2rem;box-shadow: var(--shadow-accent);gap: 0.25rem;background: var(--primary-gradient)}

.btn-hero:hover {transform: translateY(-3px);box-shadow: 0 16px 48px rgba(6, 182, 212, 0.5)}

.btn-hero-large {gap: 0.5rem;color: var(--text-white);flex-direction: column;padding: 1.5rem 3rem;box-shadow: var(--shadow-accent);background: var(--primary-gradient);font-size: 1.25rem}

.btn-secondary {color: var(--accent-color);background: var(--secondary-bg);border: 1px solid var(--accent-color)}

.btn-secondary:hover {color: var(--primary-bg);background: var(--accent-color)}

.btn-accent {background: var(--accent-color);color: var(--primary-bg)}

.btn-accent:hover {background: var(--accent-hover);transform: translateY(-2px)}

.btn-vip {background: var(--info-color);color: var(--accent-light);box-shadow: var(--shadow-vip);font-weight: 700}

.btn-vip:hover {box-shadow: 0 12px 40px rgba(6, 182, 212, 0.4);transform: translateY(-2px);background: linear-gradient(135deg, var(--info-color), var(--accent-color))}

.btn-text {font-size: 1em;font-weight: 700}

.btn-bonus {font-size: 0.875em;opacity: 0.9;font-weight: 500}


.hero-section {overflow: hidden;padding: 8rem 0 4rem;background: var(--hero-gradient);position: relative}

.hero-section::before {top: 0;left: 0;bottom: 0;background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.15) 0%, transparent 70%);right: 0;pointer-events: none;position: absolute;content: ''}

.hero-content {display: grid;gap: 3rem;align-items: center;z-index: 1;position: relative}

@media (min-width: 1024px) {
    .hero-content {gap: 4rem;grid-template-columns: 1fr 1fr}
}

.hero-title {margin-bottom: 1.5rem;line-height: 1.1}

.hero-subtitle {color: var(--text-gray);margin-bottom: 2rem;font-size: 1.25rem;line-height: 1.5}

.hero-cta {
    margin-bottom: 2rem;
}

.trust-indicators {gap: 1rem;display: grid;grid-template-columns: repeat(2, 1fr)}

@media (min-width: 768px) {
    .trust-indicators {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust-item {gap: 0.5rem;display: flex;padding: 0.75rem;align-items: center;border-radius: var(--radius-md);backdrop-filter: blur(10px);background: rgba(255, 255, 255, 0.05)}

.trust-icon {
    font-size: 1.5rem;
}

.trust-text {font-size: 0.875rem;color: var(--text-white);font-weight: 600}

.hero-image {display: flex;align-items: center;justify-content: center}

.main-image {box-shadow: var(--shadow-accent);width: 100%;height: auto;max-width: 600px;transition: var(--transition-slow);border-radius: var(--radius-xl)}

.main-image:hover {box-shadow: 0 16px 48px rgba(6, 182, 212, 0.4);transform: scale(1.02)}


section {
    padding: var(--section-padding);
}

.section-header {text-align: center;margin-bottom: 3rem}

.section-title {
    margin-bottom: 1rem;
}

.section-subtitle {color: var(--text-gray);font-size: 1.125rem;max-width: 600px;margin: 0 auto}

.section-content {gap: 3rem;align-items: center;display: grid}

@media (min-width: 1024px) {
    .section-content {gap: 4rem;grid-template-columns: 1fr 1fr}
    
    .section-content.reverse {
        direction: rtl;
    }
    
    .section-content.reverse > * {
        direction: ltr;
    }
}

.content-title {color: var(--accent-color);margin-top: 2rem;margin-bottom: 1rem}

.content-title:first-child {
    margin-top: 0;
}

.content-description {margin-bottom: 1.5rem;line-height: 1.7}

.feature-image {box-shadow: var(--shadow-lg);transition: var(--transition-normal);border-radius: var(--radius-lg);height: auto;width: 100%}

.feature-image:hover {transform: translateY(-4px);box-shadow: var(--shadow-xl)}


.payment-methods {display: grid;margin: 2rem 0;gap: 1.5rem}

@media (min-width: 768px) {
    .payment-methods {
        grid-template-columns: repeat(3, 1fr);
    }
}

.payment-method {border-radius: var(--radius-lg);background: var(--card-gradient);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.1)}

.method-title {margin-bottom: 1rem;font-size: 1.125rem;color: var(--accent-color)}

.method-features {
    list-style: none;
}

.method-features li {padding: 0.5rem 0;color: var(--text-gray);border-bottom: 1px solid rgba(255, 255, 255, 0.1)}

.method-features li:last-child {
    border-bottom: none;
}


.games-features {display: grid;gap: 2rem;margin: 2rem 0}

.feature-item {display: flex;gap: 1rem;align-items: flex-start}

.feature-icon {flex-shrink: 0;font-size: 2rem}

.feature-title {color: var(--accent-color);margin-bottom: 0.5rem}

.feature-description {line-height: 1.6;color: var(--text-gray)}


.bonus-highlight {
    margin: 2rem 0;
}

.bonus-card {padding: 2rem;background: var(--primary-gradient);color: var(--primary-bg);border-radius: var(--radius-xl);text-align: center}

.bonus-title {margin-bottom: 0.5rem;font-size: 1.25rem;color: var(--primary-bg)}

.bonus-amount {font-size: 2.5rem;font-weight: 900;margin-bottom: 0.5rem}

.bonus-extras {font-weight: 600;font-size: 1.125rem}


.vip-tiers {gap: 1.5rem;margin: 2rem 0;display: grid}

@media (min-width: 768px) {
    .vip-tiers {
        grid-template-columns: repeat(3, 1fr);
    }
}

.vip-tier {border-radius: var(--radius-lg);transition: var(--transition-normal);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2);padding: 1.5rem}

.vip-tier:hover {border-color: var(--accent-color);box-shadow: var(--shadow-accent);transform: translateY(-4px)}

.tier-header {margin-bottom: 1rem;gap: 0.75rem;align-items: center;display: flex}

.tier-icon {
    font-size: 1.5rem;
}

.tier-name {margin: 0;color: var(--accent-color)}

.tier-benefits {
    list-style: none;
}

.tier-benefits li {padding: 0.5rem 0;color: var(--text-gray);padding-left: 1.5rem;position: relative}

.tier-benefits li::before {left: 0;font-weight: bold;color: var(--success-color);content: '✓';position: absolute}


.security-info {
    margin: 2rem 0;
}

.security-title {margin-bottom: 1rem;color: var(--accent-color)}

.security-features {gap: 1rem;grid-template-columns: repeat(2, 1fr);display: grid}

@media (min-width: 768px) {
    .security-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

.security-item {align-items: center;border-radius: var(--radius-md);padding: 0.75rem;display: flex;gap: 0.5rem;background: rgba(0, 208, 132, 0.1);border: 1px solid rgba(0, 208, 132, 0.2)}

.security-icon {
    font-size: 1.25rem;
}

.security-text {color: var(--success-color);font-weight: 600;font-size: 0.875rem}


.payment-stats,
.vip-stats {margin: 2rem 0;text-align: center}

.stats-text,
.stats-highlight {font-weight: 600;font-size: 1.125rem;color: var(--accent-color)}


.cta-section {text-align: center;margin: 2rem 0}

.final-cta-section {background: var(--secondary-bg);overflow: hidden;text-align: center;position: relative}

.final-cta-section::before {pointer-events: none;right: 0;content: '';top: 0;left: 0;bottom: 0;background: radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 70%);position: absolute}

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

.cta-title {
    margin-bottom: 1rem;
}

.cta-subtitle {color: var(--text-gray);margin-right: auto;margin-bottom: 2rem;max-width: 600px;margin-left: auto;font-size: 1.125rem}

.final-cta-buttons {
    margin-bottom: 3rem;
}

.final-trust-indicators {
    margin-top: 3rem;
}

.trust-grid {margin: 0 auto;grid-template-columns: repeat(2, 1fr);display: grid;gap: 2rem;max-width: 800px}

@media (min-width: 768px) {
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust-grid .trust-item {border: 1px solid rgba(6, 182, 212, 0.1);padding: 1.5rem;text-align: center;flex-direction: column;background: var(--card-gradient)}

.trust-number {font-weight: 900;margin-bottom: 0.5rem;color: var(--accent-color);font-size: 2rem}

.trust-label {color: var(--text-gray);font-size: 0.875rem;font-weight: 500}


.main-footer {background: var(--secondary-bg);border-top: 1px solid rgba(6, 182, 212, 0.1);margin-top: 4rem}

.footer-content {display: grid;padding: 3rem 0 2rem;gap: 2rem}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
}

.footer-section {
    margin-bottom: 1rem;
}

.footer-brand img {
    margin-bottom: 1rem;
}

.footer-description {color: var(--text-gray);line-height: 1.6}

.footer-title {color: var(--accent-color);font-size: 1.125rem;margin-bottom: 1rem}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {transition: var(--transition-fast);text-decoration: none;color: var(--text-gray)}

.footer-links a:hover {
    color: var(--accent-color);
}

.social-links {gap: 1rem;display: flex;margin-bottom: 1rem}

.social-link {background: rgba(6, 182, 212, 0.1);align-items: center;justify-content: center;display: flex;width: 40px;text-decoration: none;transition: var(--transition-fast);border-radius: var(--radius-md);font-size: 1.25rem;height: 40px}

.social-link:hover {background: var(--accent-color);transform: translateY(-2px)}

.contact-info {color: var(--text-gray);font-size: 0.875rem}

.contact-info p {
    margin-bottom: 0.25rem;
}

.footer-bottom {flex-direction: column;padding: 2rem 0;justify-content: space-between;border-top: 1px solid rgba(255, 255, 255, 0.1);gap: 1rem;align-items: center;display: flex}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
    }
}

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

@media (min-width: 768px) {
    .footer-legal {
        text-align: left;
    }
}

.footer-legal p {color: var(--text-muted);font-size: 0.875rem;margin-bottom: 0.25rem}

.legal-text {
    font-size: 0.75rem !important;
}

.footer-certifications {display: flex;gap: 0.5rem;flex-wrap: wrap;justify-content: center}

.cert-badge {border-radius: var(--radius-full);font-size: 0.75rem;background: rgba(6, 182, 212, 0.1);font-weight: 600;color: var(--accent-color);padding: 0.25rem 0.75rem;border: 1px solid rgba(6, 182, 212, 0.2)}


@keyframes fadeInUp {
    from {transform: translateY(30px);opacity: 0}
    to {opacity: 1;transform: translateY(0)}
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}


.app-download-buttons {gap: 1rem;display: flex;flex-direction: column;margin: 2rem 0}

@media (min-width: 768px) {
    .app-download-buttons {flex-direction: row;gap: 1.5rem}
}

.app-features-quick {margin: 2rem 0;gap: 1rem;display: grid;grid-template-columns: repeat(2, 1fr)}

@media (min-width: 768px) {
    .app-features-quick {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-quick {border-radius: var(--radius-md);align-items: center;display: flex;padding: 0.75rem;background: rgba(6, 182, 212, 0.1);gap: 0.5rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.feature-quick .feature-icon {
    font-size: 1.25rem;
}

.feature-quick .feature-text {font-weight: 600;font-size: 0.875rem;color: var(--accent-color)}

.download-steps {margin: 3rem 0;gap: 2rem;display: grid}

@media (min-width: 768px) {
    .download-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.download-step {align-items: center;display: flex;border-radius: var(--radius-lg);transition: var(--transition-normal);background: var(--card-gradient);flex-direction: column;padding: 2rem;border: 1px solid rgba(6, 182, 212, 0.1);text-align: center}

.download-step:hover {box-shadow: var(--shadow-glow);border-color: var(--accent-color);transform: translateY(-4px)}

.step-number {font-weight: 900;color: var(--primary-bg);box-shadow: var(--shadow-accent);justify-content: center;align-items: center;height: 60px;width: 60px;border-radius: 50%;background: var(--primary-gradient);display: flex;margin-bottom: 1.5rem;font-size: 1.5rem}

.step-title {margin-bottom: 1rem;font-size: 1.25rem;color: var(--accent-color)}

.step-description {color: var(--text-gray);line-height: 1.6}

.exclusive-features {display: grid;margin: 2rem 0;gap: 1.5rem}

.exclusive-feature {border-radius: var(--radius-md);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient)}

.exclusive-feature .feature-title {font-size: 1.125rem;margin-bottom: 0.75rem;color: var(--accent-color)}

.exclusive-feature .feature-description {line-height: 1.6;color: var(--text-gray)}

.app-stats {border-radius: var(--radius-md);margin: 2rem 0;text-align: center;background: rgba(6, 182, 212, 0.1);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.download-process-image {justify-content: center;margin: 3rem 0;display: flex}

.download-process-image img {box-shadow: var(--shadow-lg);transition: var(--transition-normal);border-radius: var(--radius-lg);height: auto;max-width: 100%}

.download-process-image img:hover {box-shadow: var(--shadow-glow);transform: translateY(-4px)}


.login-form-container {border-radius: var(--radius-lg);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2);box-shadow: var(--shadow-lg);margin: 2rem 0;padding: 2rem}

.login-form {flex-direction: column;gap: 1.5rem;display: flex}

.form-group {flex-direction: column;display: flex;gap: 0.5rem}

.form-group label {font-size: 0.875rem;color: var(--accent-color);font-weight: 600}

.form-group input {color: var(--text-white);padding: 1rem;background: var(--primary-bg);border: 2px solid rgba(6, 182, 212, 0.3);transition: var(--transition-normal);border-radius: var(--radius-md);font-size: 1rem}

.form-group input:focus {border-color: var(--accent-color);outline: none;box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1)}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-options {align-items: center;flex-wrap: wrap;gap: 1rem;justify-content: space-between;display: flex}

.checkbox-label {align-items: center;font-size: 0.875rem;gap: 0.5rem;display: flex;color: var(--text-gray);cursor: pointer}

.checkbox-label input[type="checkbox"] {width: 18px;accent-color: var(--accent-color);height: 18px}

.forgot-password {font-size: 0.875rem;text-decoration: none;transition: var(--transition-fast);color: var(--accent-color)}

.forgot-password:hover {color: var(--accent-light);text-decoration: underline}

.security-features {gap: 1rem;margin: 2rem 0;display: grid;grid-template-columns: repeat(2, 1fr)}

@media (min-width: 768px) {
    .security-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

.security-item {padding: 0.75rem;align-items: center;gap: 0.5rem;display: flex;border-radius: var(--radius-md);border: 1px solid rgba(16, 185, 129, 0.2);background: rgba(16, 185, 129, 0.1)}

.security-item .security-icon {
    font-size: 1.25rem;
}

.security-item .security-text {font-weight: 600;color: var(--success-color);font-size: 0.875rem}

.security-list {display: grid;margin: 2rem 0;gap: 1.5rem}

.security-feature {gap: 1rem;display: flex;border-radius: var(--radius-md);background: var(--card-gradient);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.1);align-items: flex-start}

.security-feature .feature-icon {font-size: 2rem;flex-shrink: 0}

.security-feature .feature-title {font-size: 1.125rem;margin-bottom: 0.5rem;color: var(--accent-color)}

.security-feature .feature-description {color: var(--text-gray);line-height: 1.6}

.benefits-list {margin: 2rem 0;gap: 1.5rem;display: grid}

.benefit-item {background: var(--card-gradient);padding: 1.5rem;border-radius: var(--radius-md);border: 1px solid rgba(6, 182, 212, 0.1)}

.benefit-item .benefit-title {margin-bottom: 0.75rem;color: var(--accent-color);font-size: 1.125rem}

.benefit-item .benefit-description {color: var(--text-gray);line-height: 1.6}

.login-stats {text-align: center;background: rgba(6, 182, 212, 0.1);border-radius: var(--radius-md);margin: 2rem 0;padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.help-options {gap: 2rem;margin: 3rem 0;display: grid}

@media (min-width: 768px) {
    .help-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

.help-option {padding: 2rem;flex-direction: column;border-radius: var(--radius-lg);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.1);transition: var(--transition-normal);display: flex;align-items: center;text-align: center}

.help-option:hover {transform: translateY(-4px);border-color: var(--accent-color);box-shadow: var(--shadow-glow)}

.help-icon {margin-bottom: 1.5rem;font-size: 3rem}

.help-content {
    flex: 1;
}

.help-title {margin-bottom: 1rem;font-size: 1.25rem;color: var(--accent-color)}

.help-description {color: var(--text-gray);line-height: 1.6;margin-bottom: 1.5rem}

.help-link {transition: var(--transition-normal);font-weight: 600;color: var(--accent-color);padding: 0.75rem 1.5rem;border: 2px solid var(--accent-color);border-radius: var(--radius-full);text-decoration: none}

.help-link:hover {background: var(--accent-color);color: var(--primary-bg)}


.game-categories {display: grid;margin: 2rem 0;grid-template-columns: repeat(2, 1fr);gap: 1rem}

@media (min-width: 768px) {
    .game-categories {
        grid-template-columns: repeat(4, 1fr);
    }
}

.category-item {transition: var(--transition-normal);gap: 1rem;align-items: center;padding: 1.5rem;border-radius: var(--radius-lg);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2);display: flex}

.category-item:hover {border-color: var(--accent-color);box-shadow: var(--shadow-glow);transform: translateY(-4px)}

.category-icon {flex-shrink: 0;font-size: 2rem}

.category-info {display: flex;gap: 0.25rem;flex-direction: column}

.category-name {font-size: 1rem;font-weight: 700;color: var(--accent-color)}

.category-count {font-size: 0.875rem;color: var(--text-gray);font-weight: 600}

.slots-features {display: grid;gap: 1.5rem;margin: 2rem 0}

.table-games-list {display: grid;gap: 1.5rem;margin: 2rem 0}

.game-item {border-radius: var(--radius-md);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient)}

.game-item .game-title {margin-bottom: 0.75rem;font-size: 1.125rem;color: var(--accent-color)}

.game-item .game-description {line-height: 1.6;color: var(--text-gray)}

.table-stats {text-align: center;margin: 2rem 0;border-radius: var(--radius-md);background: rgba(6, 182, 212, 0.1);border: 1px solid rgba(6, 182, 212, 0.2);padding: 1.5rem}

.live-features {margin: 2rem 0;gap: 1.5rem;display: grid}

.live-feature {display: flex;padding: 1.5rem;border-radius: var(--radius-md);border: 1px solid rgba(6, 182, 212, 0.1);gap: 1rem;background: var(--card-gradient);align-items: flex-start}

.live-feature .feature-icon {font-size: 2rem;flex-shrink: 0}

.live-feature .feature-title {color: var(--accent-color);font-size: 1.125rem;margin-bottom: 0.5rem}

.live-feature .feature-description {color: var(--text-gray);line-height: 1.6}

.live-games-grid {margin: 2rem 0;gap: 1rem;display: grid;grid-template-columns: repeat(2, 1fr)}

@media (min-width: 768px) {
    .live-games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.live-game {color: var(--info-color);text-align: center;background: rgba(6, 182, 212, 0.1);border-radius: var(--radius-md);padding: 1rem;font-weight: 600;border: 1px solid rgba(6, 182, 212, 0.2);transition: var(--transition-normal)}

.live-game:hover {background: rgba(6, 182, 212, 0.2);transform: translateY(-2px)}


.bonus-highlights {margin: 2rem 0;gap: 1rem;grid-template-columns: repeat(2, 1fr);display: grid}

@media (min-width: 768px) {
    .bonus-highlights {
        grid-template-columns: repeat(4, 1fr);
    }
}

.bonus-item {border-radius: var(--radius-lg);display: flex;padding: 1.5rem;align-items: center;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2);gap: 1rem;transition: var(--transition-normal)}

.bonus-item:hover {border-color: var(--accent-color);box-shadow: var(--shadow-glow);transform: translateY(-4px)}

.bonus-icon {flex-shrink: 0;font-size: 2rem}

.bonus-info {gap: 0.25rem;display: flex;flex-direction: column}

.bonus-title {font-size: 0.875rem;color: var(--accent-color);font-weight: 700}

.bonus-value {font-size: 1rem;font-weight: 600;color: var(--text-white)}

.bonus-tiers {margin: 2rem 0;gap: 1.5rem;display: grid}

.bonus-tier {background: var(--card-gradient);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.1);display: flex;padding: 2rem;align-items: flex-start;gap: 1.5rem;transition: var(--transition-normal)}

.bonus-tier:hover {border-color: var(--accent-color);transform: translateY(-4px);box-shadow: var(--shadow-glow)}

.tier-number {width: 60px;color: var(--primary-bg);display: flex;background: var(--primary-gradient);flex-shrink: 0;align-items: center;font-weight: 900;justify-content: center;font-size: 1.5rem;height: 60px;border-radius: 50%;box-shadow: var(--shadow-accent)}

.tier-content {
    flex: 1;
}

.tier-title {color: var(--accent-color);margin-bottom: 0.5rem;font-size: 1.25rem}

.tier-bonus {margin-bottom: 0.75rem;font-weight: 700;color: var(--text-white);font-size: 1.125rem}

.tier-description {color: var(--text-gray);line-height: 1.6}

.vip-benefits {margin: 2rem 0;gap: 1.5rem;display: grid}

.vip-benefit {padding: 1.5rem;border-radius: var(--radius-md);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2)}

.vip-benefit .benefit-title {margin-bottom: 0.75rem;font-size: 1.125rem;color: var(--info-color)}

.vip-benefit .benefit-description {color: var(--text-gray);line-height: 1.6}

.vip-stats {padding: 1.5rem;border-radius: var(--radius-md);margin: 2rem 0;text-align: center;border: 1px solid rgba(6, 182, 212, 0.2);background: rgba(6, 182, 212, 0.1)}

.casino-features {grid-template-columns: repeat(2, 1fr);gap: 1rem;margin: 2rem 0;display: grid}

@media (min-width: 768px) {
    .casino-features {
        grid-template-columns: repeat(4, 1fr);
    }
}


.sports-highlights {margin: 2rem 0;display: grid;gap: 1rem;grid-template-columns: repeat(2, 1fr)}

@media (min-width: 768px) {
    .sports-highlights {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sport-item {background: var(--card-gradient);display: flex;border-radius: var(--radius-lg);padding: 1.5rem;transition: var(--transition-normal);border: 1px solid rgba(6, 182, 212, 0.2);gap: 1rem;align-items: center}

.sport-item:hover {border-color: var(--accent-color);box-shadow: var(--shadow-glow);transform: translateY(-4px)}

.sport-icon {flex-shrink: 0;font-size: 2rem}

.sport-info {gap: 0.25rem;display: flex;flex-direction: column}

.sport-name {font-weight: 700;color: var(--accent-color);font-size: 1rem}

.sport-count {font-weight: 600;font-size: 0.875rem;color: var(--text-gray)}

.football-leagues {margin: 2rem 0;display: grid;gap: 1.5rem}

.league-item {background: var(--card-gradient);border-radius: var(--radius-md);padding: 1.5rem;align-items: flex-start;border: 1px solid rgba(6, 182, 212, 0.1);gap: 1rem;display: flex}

.league-icon {font-size: 2rem;flex-shrink: 0}

.league-title {color: var(--accent-color);margin-bottom: 0.5rem;font-size: 1.125rem}

.league-description {color: var(--text-gray);line-height: 1.6}

.live-features {gap: 1.5rem;margin: 2rem 0;display: grid}

.live-feature {background: var(--card-gradient);border-radius: var(--radius-md);padding: 1.5rem;border: 1px solid rgba(16, 185, 129, 0.2)}

.live-feature .feature-title {color: var(--success-color);font-size: 1.125rem;margin-bottom: 0.75rem}

.live-feature .feature-description {color: var(--text-gray);line-height: 1.6}

.live-stats {background: rgba(16, 185, 129, 0.1);margin: 2rem 0;border-radius: var(--radius-md);text-align: center;border: 1px solid rgba(16, 185, 129, 0.2);padding: 1.5rem}

.sports-grid {display: grid;gap: 2rem;margin: 3rem 0}

@media (min-width: 768px) {
    .sports-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sports-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sport-card {border-radius: var(--radius-lg);transition: var(--transition-normal);border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient);overflow: hidden}

.sport-card:hover {border-color: var(--accent-color);transform: translateY(-4px);box-shadow: var(--shadow-glow)}

.sport-header {padding: 2rem 1.5rem 1rem;border-bottom: 1px solid rgba(6, 182, 212, 0.1);text-align: center}

.sport-icon-large {margin-bottom: 1rem;font-size: 3rem;display: block}

.sport-title {font-size: 1.25rem;color: var(--accent-color);margin: 0}

.sport-content {
    padding: 1.5rem;
}

.sport-description {line-height: 1.6;margin-bottom: 1.5rem;color: var(--text-gray)}

.sport-features {padding: 0;list-style: none;margin: 0}

.sport-features li {color: var(--text-gray);border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: 0.5rem 0;padding-left: 1.5rem;position: relative}

.sport-features li:last-child {
    border-bottom: none;
}

.sport-features li::before {font-size: 0.875rem;content: '⚡';left: 0;color: var(--accent-color);position: absolute}


.game-highlights {grid-template-columns: repeat(2, 1fr);gap: 1rem;margin: 2rem 0;display: grid}

@media (min-width: 768px) {
    .game-highlights {
        grid-template-columns: repeat(4, 1fr);
    }
}

.game-highlight {transition: var(--transition-normal);padding: 1.5rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);background: var(--card-gradient);display: flex;gap: 1rem;align-items: center}

.game-highlight:hover {border-color: var(--accent-color);box-shadow: var(--shadow-glow);transform: translateY(-4px)}

.highlight-icon {flex-shrink: 0;font-size: 2rem}

.highlight-info {gap: 0.25rem;display: flex;flex-direction: column}

.highlight-title {font-size: 1rem;font-weight: 700;color: var(--accent-color)}

.highlight-desc {font-weight: 600;color: var(--text-gray);font-size: 0.875rem}

.featured-list {margin: 2rem 0;display: grid;gap: 1.5rem}

.featured-item {border-radius: var(--radius-md);gap: 1rem;border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient);display: flex;align-items: flex-start;padding: 1.5rem}

.featured-icon {font-size: 2rem;flex-shrink: 0}

.featured-title {color: var(--accent-color);margin-bottom: 0.5rem;font-size: 1.125rem}

.featured-description {color: var(--text-gray);line-height: 1.6}

.featured-rtp {font-weight: 600;font-size: 0.875rem;color: var(--success-color)}

.category-stats {border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.1);gap: 1rem;padding: 2rem;grid-template-columns: repeat(4, 1fr);background: rgba(6, 182, 212, 0.05);display: grid;margin: 2rem 0}

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

.stat-number {margin-bottom: 0.5rem;color: var(--accent-color);font-size: 2rem;font-weight: 900}

.stat-label {font-size: 0.875rem;color: var(--text-gray);font-weight: 600}

.category-features {display: grid;margin: 2rem 0;gap: 1.5rem}

.category-feature {background: var(--card-gradient);padding: 1.5rem;border-radius: var(--radius-md);border: 1px solid rgba(6, 182, 212, 0.2)}

.category-feature .feature-title {margin-bottom: 0.75rem;font-size: 1.125rem;color: var(--info-color)}

.category-feature .feature-description {line-height: 1.6;color: var(--text-gray)}

.features-grid {margin: 3rem 0;gap: 2rem;display: grid}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-card {background: var(--card-gradient);overflow: hidden;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.1);transition: var(--transition-normal)}

.feature-card:hover {box-shadow: var(--shadow-glow);border-color: var(--accent-color);transform: translateY(-4px)}

.feature-header {padding: 2rem 1.5rem 1rem;text-align: center;border-bottom: 1px solid rgba(6, 182, 212, 0.1)}

.feature-icon-large {font-size: 3rem;display: block;margin-bottom: 1rem}

.feature-title {font-size: 1.25rem;margin: 0;color: var(--accent-color)}

.feature-content {
    padding: 1.5rem;
}

.feature-description {line-height: 1.6;margin-bottom: 1.5rem;color: var(--text-gray)}

.feature-list {margin: 0;padding: 0;list-style: none}

.feature-list li {padding: 0.5rem 0;color: var(--text-gray);padding-left: 1.5rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);position: relative}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li::before {left: 0;font-size: 0.875rem;content: '✨';position: absolute;color: var(--accent-color)}


.crash-features {gap: 1rem;margin: 2rem 0;display: grid;grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))}

.crash-feature {border-radius: var(--radius-lg);align-items: center;transition: var(--transition-normal);display: flex;gap: 1rem;padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2);background: var(--card-gradient)}

.crash-feature:hover {border-color: var(--accent-color);transform: translateY(-4px);box-shadow: var(--shadow-glow)}

.crash-steps {gap: 1.5rem;margin: 2rem 0;display: grid}

.crash-step {gap: 1.5rem;padding: 1.5rem;display: flex;border-radius: var(--radius-md);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.1);align-items: flex-start}

.step-number {width: 3rem;font-weight: 700;flex-shrink: 0;align-items: center;font-size: 1.25rem;display: flex;color: var(--primary-bg);height: 3rem;border-radius: 50%;background: var(--primary-gradient);justify-content: center}

.step-title {font-size: 1.125rem;margin-bottom: 0.5rem;color: var(--accent-color)}

.step-description {color: var(--text-gray);line-height: 1.6}

.strategy-list {margin: 2rem 0;display: grid;gap: 1.5rem}

.strategy-item {border-radius: var(--radius-md);border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient);padding: 1.5rem}

.strategy-title {margin-bottom: 0.75rem;color: var(--accent-color);font-size: 1.125rem}

.strategy-description {line-height: 1.6;margin-bottom: 1rem;color: var(--text-gray)}

.strategy-stats {gap: 1rem;display: flex}

.strategy-stats .stat {font-size: 0.875rem;background: rgba(6, 182, 212, 0.1);border-radius: var(--radius-full);color: var(--accent-color);padding: 0.25rem 0.75rem;font-weight: 600}

.strategy-tips {padding: 2rem;border-radius: var(--radius-lg);border: 1px solid rgba(16, 185, 129, 0.2);margin: 2rem 0;background: rgba(16, 185, 129, 0.05)}

.tips-title {font-size: 1.125rem;margin-bottom: 1rem;color: var(--success-color)}

.tips-list {list-style: none;padding: 0;margin: 0}

.tips-list li {position: relative;padding: 0.5rem 0;padding-left: 1.5rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);color: var(--text-gray)}

.tips-list li:last-child {
    border-bottom: none;
}

.tips-list li::before {font-size: 0.875rem;left: 0;position: absolute;content: '💡'}

.crash-games-grid {gap: 2rem;display: grid;margin: 3rem 0}

@media (min-width: 768px) {
    .crash-games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .crash-games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.crash-game-card {transition: var(--transition-normal);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient);overflow: hidden}

.crash-game-card:hover {box-shadow: var(--shadow-glow);transform: translateY(-4px);border-color: var(--accent-color)}

.game-header {border-bottom: 1px solid rgba(6, 182, 212, 0.1);padding: 2rem 1.5rem 1rem;text-align: center}

.game-icon-large {display: block;margin-bottom: 1rem;font-size: 3rem}

.game-title {font-size: 1.25rem;margin: 0 0 0.5rem 0;color: var(--accent-color)}

.game-rating {
    font-size: 1rem;
}

.game-content {
    padding: 1.5rem;
}

.game-description {font-size: 0.9rem;line-height: 1.6;margin-bottom: 1.5rem;color: var(--text-gray)}

.game-stats {justify-content: space-between;display: flex;margin-bottom: 1.5rem}

.game-stats .stat-item {
    text-align: center;
}

.game-stats .stat-label {color: var(--text-muted);font-size: 0.75rem;margin-bottom: 0.25rem;display: block}

.game-stats .stat-value {color: var(--accent-color);font-weight: 700;font-size: 1rem}

.btn-game-play {border-radius: var(--radius-md);font-weight: 600;width: 100%;background: var(--primary-gradient);text-align: center;text-decoration: none;padding: 0.75rem 1rem;border: 1px solid var(--accent-color);color: var(--primary-bg);transition: var(--transition-normal);display: block}

.btn-game-play:hover {box-shadow: var(--shadow-glow);transform: translateY(-2px)}


.promo-highlights {grid-template-columns: repeat(2, 1fr);display: grid;margin: 2rem 0;gap: 1rem}

@media (min-width: 768px) {
    .promo-highlights {
        grid-template-columns: repeat(4, 1fr);
    }
}

.promo-highlight {border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);gap: 1rem;padding: 1.5rem;align-items: center;display: flex;background: var(--card-gradient);transition: var(--transition-normal)}

.promo-highlight:hover {box-shadow: var(--shadow-glow);border-color: var(--accent-color);transform: translateY(-4px)}

.featured-promos-list {margin: 2rem 0;display: grid;gap: 1.5rem}

.featured-promo-item {gap: 1rem;border-radius: var(--radius-md);align-items: flex-start;padding: 1.5rem;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.1);display: flex}

.promo-icon {font-size: 2rem;flex-shrink: 0}

.promo-title {margin-bottom: 0.5rem;font-size: 1.125rem;color: var(--accent-color)}

.promo-description {line-height: 1.6;color: var(--text-gray)}

.promo-validity {color: var(--success-color);font-size: 0.875rem;font-weight: 600}

.loyalty-levels {display: grid;gap: 1.5rem;margin: 2rem 0}

.level-item {border-radius: var(--radius-md);border: 1px solid rgba(6, 182, 212, 0.1);display: flex;padding: 1.5rem;align-items: center;background: var(--card-gradient);gap: 1.5rem}

.level-badge {letter-spacing: 0.5px;width: 4rem;font-size: 0.875rem;height: 4rem;text-transform: uppercase;justify-content: center;align-items: center;display: flex;font-weight: 700;flex-shrink: 0;border-radius: 50%}

.level-badge.bronze {background: linear-gradient(135deg, #cd7f32, #a0522d);color: white}

.level-badge.silver {background: linear-gradient(135deg, #c0c0c0, #808080);color: white}

.level-badge.gold {background: linear-gradient(135deg, #ffd700, #ffb347);color: #0f172a}

.level-badge.platinum {background: linear-gradient(135deg, #e5e4e2, #b8b8b8);color: #0f172a}

.level-badge.diamond {color: #0f172a;background: linear-gradient(135deg, #b9f2ff, #00bfff)}

.level-title {font-size: 1.125rem;color: var(--accent-color);margin-bottom: 0.5rem}

.level-description {color: var(--text-gray);line-height: 1.6}

.loyalty-benefits {margin: 2rem 0;background: rgba(6, 182, 212, 0.05);padding: 2rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2)}

.benefits-title {font-size: 1.125rem;margin-bottom: 1rem;color: var(--info-color)}

.benefits-list {margin: 0;list-style: none;padding: 0}

.benefits-list li {position: relative;padding: 0.5rem 0;color: var(--text-gray);padding-left: 1.5rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1)}

.benefits-list li:last-child {
    border-bottom: none;
}

.benefits-list li::before {font-size: 0.875rem;content: '⭐';color: var(--info-color);left: 0;position: absolute}

.weekly-calendar {display: grid;margin: 3rem 0;gap: 1.5rem}

@media (min-width: 768px) {
    .weekly-calendar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .weekly-calendar {
        grid-template-columns: repeat(3, 1fr);
    }
}

.day-event {transition: var(--transition-normal);border-radius: var(--radius-lg);overflow: hidden;border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient)}

.day-event:hover {transform: translateY(-4px);border-color: var(--accent-color);box-shadow: var(--shadow-glow)}

.day-event.weekend {border-color: rgba(6, 182, 212, 0.3);grid-column: 1 / -1}

@media (min-width: 1024px) {
    .day-event.weekend {
        grid-column: span 3;
    }
}

.day-header {text-align: center;padding: 1.5rem;background: rgba(6, 182, 212, 0.05);border-bottom: 1px solid rgba(6, 182, 212, 0.1)}

.day-event.weekend .day-header {
    background: rgba(6, 182, 212, 0.1);
}

.day-icon {font-size: 2.5rem;margin-bottom: 0.5rem;display: block}

.day-name {margin: 0;color: var(--accent-color);font-size: 1.125rem}

.day-event.weekend .day-name {
    color: var(--info-color);
}

.event-content {text-align: center;padding: 1.5rem}

.event-title {font-size: 1.25rem;color: var(--accent-color);margin-bottom: 0.75rem}

.day-event.weekend .event-title {
    color: var(--info-color);
}

.event-description {line-height: 1.6;font-size: 0.9rem;color: var(--text-gray);margin-bottom: 1rem}

.event-prize {font-size: 1rem;color: var(--primary-bg);border-radius: var(--radius-full);font-weight: 700;display: inline-block;background: var(--primary-gradient);padding: 0.5rem 1rem}


.platform-features {gap: 1rem;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));margin: 2rem 0;display: grid}

@media (min-width: 768px) {
    .platform-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

.platform-feature {background: var(--card-gradient);border-radius: var(--radius-lg);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2);align-items: center;gap: 1rem;display: flex;transition: var(--transition-normal)}

.platform-feature:hover {border-color: var(--accent-color);box-shadow: var(--shadow-glow);transform: translateY(-4px)}

.security-features-list {display: grid;gap: 1.5rem;margin: 2rem 0}

.security-feature {align-items: flex-start;border-radius: var(--radius-md);background: var(--card-gradient);display: flex;gap: 1rem;border: 1px solid rgba(16, 185, 129, 0.2);padding: 1.5rem}

.security-icon {font-size: 2rem;flex-shrink: 0}

.security-content {
    flex: 1;
}

.security-title {font-size: 1.125rem;margin-bottom: 0.5rem;color: var(--success-color)}

.security-description {line-height: 1.6;color: var(--text-gray)}

.security-certifications {border-radius: var(--radius-lg);padding: 1.5rem;background: rgba(16, 185, 129, 0.05);border: 1px solid rgba(16, 185, 129, 0.2);margin: 2rem 0}

.cert-title {margin-bottom: 1rem;font-size: 1.125rem;color: var(--success-color)}

.cert-badges {gap: 0.5rem;display: flex;flex-wrap: wrap}

.cert-badge {color: var(--success-color);background: rgba(16, 185, 129, 0.1);font-weight: 600;padding: 0.5rem 1rem;border-radius: var(--radius-full);border: 1px solid rgba(16, 185, 129, 0.3);font-size: 0.875rem}

.tech-stats {margin: 2rem 0;background: rgba(6, 182, 212, 0.05);border-radius: var(--radius-lg);padding: 2rem;display: grid;border: 1px solid rgba(6, 182, 212, 0.2);gap: 1rem;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))}

.tech-stats .stat-item {
    text-align: center;
}

.tech-stats .stat-number {margin-bottom: 0.5rem;font-weight: 900;color: var(--info-color);font-size: 2rem}

.tech-stats .stat-label {font-weight: 600;font-size: 0.875rem;color: var(--text-gray)}

.tech-features {gap: 1.5rem;display: grid;margin: 2rem 0}

.tech-feature {border-radius: var(--radius-md);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2);background: var(--card-gradient)}

.tech-title {color: var(--info-color);margin-bottom: 0.75rem;font-size: 1.125rem}

.tech-description {line-height: 1.6;color: var(--text-gray)}

.tech-partners {border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 1.5rem;background: rgba(6, 182, 212, 0.05);margin: 2rem 0}

.partners-title {font-size: 1.125rem;margin-bottom: 0.75rem;color: var(--accent-color)}

.partners-description {color: var(--text-gray);line-height: 1.6}

.support-channels {margin: 3rem 0;gap: 2rem;display: grid}

@media (min-width: 768px) {
    .support-channels {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .support-channels {
        grid-template-columns: repeat(3, 1fr);
    }
}

.support-channel {background: var(--card-gradient);overflow: hidden;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.1);transition: var(--transition-normal)}

.support-channel:hover {box-shadow: var(--shadow-glow);border-color: var(--accent-color);transform: translateY(-4px)}

.channel-header {padding: 2rem 1.5rem 1rem;background: rgba(6, 182, 212, 0.05);border-bottom: 1px solid rgba(6, 182, 212, 0.1);text-align: center}

.channel-icon {margin-bottom: 1rem;font-size: 3rem;display: block}

.channel-title {margin: 0 0 0.5rem 0;color: var(--accent-color);font-size: 1.25rem}

.channel-status {border-radius: var(--radius-full);text-transform: uppercase;font-weight: 700;padding: 0.25rem 0.75rem;font-size: 0.75rem;letter-spacing: 0.5px}

.channel-status.online {background: rgba(16, 185, 129, 0.2);color: var(--success-color)}

.channel-status.fast {color: var(--accent-color);background: rgba(6, 182, 212, 0.2)}

.channel-status.vip {background: rgba(6, 182, 212, 0.2);color: var(--info-color)}

.channel-content {padding: 1.5rem;text-align: center}

.channel-description {line-height: 1.6;margin-bottom: 1.5rem;color: var(--text-gray)}

.channel-features {flex-direction: column;margin-bottom: 1.5rem;display: flex;gap: 0.5rem}

.channel-features .feature {color: var(--text-gray);text-align: left;font-size: 0.875rem}

.btn-channel {text-decoration: none;background: var(--primary-gradient);display: block;transition: var(--transition-normal);text-align: center;color: var(--primary-bg);font-weight: 600;width: 100%;border-radius: var(--radius-md);border: 1px solid var(--accent-color);padding: 0.75rem 1rem}

.btn-channel:hover {box-shadow: var(--shadow-glow);transform: translateY(-2px)}

.support-stats {padding: 2rem;border-radius: var(--radius-lg);display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 1rem;background: rgba(16, 185, 129, 0.05);margin: 3rem 0;border: 1px solid rgba(16, 185, 129, 0.2)}

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

.support-stat .stat-number {font-size: 2rem;margin-bottom: 0.5rem;color: var(--success-color);font-weight: 900}

.support-stat .stat-label {font-weight: 600;color: var(--text-gray);font-size: 0.875rem}


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

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.hidden { display: none; }
.visible { display: block; }


@media (max-width: 767px) {
    .hero-section {
        padding: 6rem 0 3rem;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .section-content {
        text-align: center;
    }
    
    .trust-indicators {
        justify-content: center;
    }
}


@media print {
    .main-header,
    .mobile-nav,
    .final-cta-section,
    .main-footer {
        display: none;
    }
    
    body {color: black;background: white}
    
    .hero-section {
        background: none;
    }
}


.providers-section {padding: var(--section-padding);background: var(--secondary-bg)}

.providers-grid {display: grid;grid-template-columns: 1fr;gap: 2rem;margin: 2rem 0}

@media (min-width: 768px) {
    .providers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .providers-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.provider-card {border-radius: var(--radius-lg);padding: 2rem;transition: var(--transition-normal);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2)}

.provider-card:hover {box-shadow: var(--shadow-accent);transform: translateY(-4px);border-color: var(--accent-color)}

.provider-name {margin-bottom: 1rem;color: var(--accent-color);font-size: 1.5rem}

.provider-description {margin-bottom: 1rem;color: var(--text-gray);line-height: 1.6}

.provider-features {padding: 0;list-style: none}

.provider-features li {color: var(--text-gray);padding: 0.5rem 0;position: relative;padding-left: 1.5rem}

.provider-features li::before {content: '✓';font-weight: bold;left: 0;position: absolute;color: var(--success-color)}

.providers-note {text-align: center;border-radius: var(--radius-md);padding: 1.5rem;background: rgba(6, 182, 212, 0.1);border: 1px solid rgba(6, 182, 212, 0.2);margin-top: 2rem}

.providers-note p {color: var(--text-gray);margin: 0}


.reviews-section {
    padding: var(--section-padding);
}

.reviews-grid {margin: 2rem 0;gap: 2rem;display: grid;grid-template-columns: 1fr}

@media (min-width: 768px) {
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.review-card {padding: 2rem;border-radius: var(--radius-lg);background: var(--card-gradient);transition: var(--transition-normal);border: 1px solid rgba(6, 182, 212, 0.2)}

.review-card:hover {transform: translateY(-4px);box-shadow: var(--shadow-md)}

.review-header {justify-content: space-between;align-items: flex-start;display: flex;margin-bottom: 1rem}

.reviewer-info {display: flex;flex-direction: column}

.reviewer-name {color: var(--text-white);font-weight: 600;margin-bottom: 0.25rem}

.reviewer-location {color: var(--text-muted);font-size: 0.875rem}

.review-rating {
    color: var(--accent-color);
}

.stars {
    font-size: 1.25rem;
}

.review-content {
    margin-bottom: 1rem;
}

.review-content p {margin: 0;line-height: 1.6;color: var(--text-gray)}

.review-date {color: var(--text-muted);font-size: 0.875rem}

.reviews-stats {display: grid;padding: 2rem;margin-top: 3rem;border-radius: var(--radius-lg);grid-template-columns: repeat(3, 1fr);background: var(--card-gradient);gap: 2rem}

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

.stat-number {margin-bottom: 0.5rem;display: block;font-size: 2.5rem;color: var(--accent-color);font-weight: 700}

.stat-label {font-size: 1rem;color: var(--text-gray)}


.mobile-app-section {background: var(--secondary-bg);padding: var(--section-padding)}

.mobile-features {
    margin: 2rem 0;
}

.mobile-feature {gap: 1rem;margin-bottom: 2rem;align-items: flex-start;display: flex}

.mobile-feature .feature-icon {flex-shrink: 0;font-size: 2rem}

.app-downloads {margin-top: 2rem;flex-wrap: wrap;gap: 1rem;display: flex}

.download-btn {border: 1px solid rgba(6, 182, 212, 0.2);flex: 1;transition: var(--transition-normal);min-width: 200px;align-items: center;gap: 1rem;padding: 1rem 1.5rem;border-radius: var(--radius-lg);display: flex;text-decoration: none;background: var(--card-gradient)}

.download-btn:hover {transform: translateY(-2px);border-color: var(--accent-color);box-shadow: var(--shadow-accent)}

.download-icon {
    font-size: 2rem;
}

.download-text {flex-direction: column;display: flex}

.download-label {margin-bottom: 0.25rem;color: var(--text-white);font-weight: 600}

.download-subtitle {font-size: 0.875rem;color: var(--text-muted)}


.stats-section {
    padding: var(--section-padding);
}

.stats-grid {grid-template-columns: 1fr;display: grid;margin: 2rem 0;gap: 2rem}

@media (min-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-card {background: var(--card-gradient);border-radius: var(--radius-lg);padding: 2rem;border: 1px solid rgba(6, 182, 212, 0.2);transition: var(--transition-normal);text-align: center}

.stat-card:hover {border-color: var(--accent-color);box-shadow: var(--shadow-accent);transform: translateY(-4px)}

.stat-card .stat-number {font-weight: 700;margin-bottom: 0.5rem;display: block;color: var(--accent-color);font-size: 3rem}

.stat-card .stat-label {font-size: 1.25rem;display: block;margin-bottom: 0.75rem;color: var(--text-white);font-weight: 600}

.stat-card .stat-description {color: var(--text-gray);margin: 0;font-size: 0.9375rem}

.comparison-table {
    margin-top: 4rem;
}

.comparison-title {margin-bottom: 2rem;text-align: center;font-size: 1.75rem;color: var(--accent-color)}

.table-responsive {
    overflow-x: auto;
}

.comparison-table-content {width: 100%;border-collapse: collapse;overflow: hidden;border-radius: var(--radius-lg);background: var(--card-gradient)}

.comparison-table-content thead {
    background: var(--accent-color);
}

.comparison-table-content th {text-align: left;font-weight: 600;padding: 1rem;color: var(--primary-bg)}

.comparison-table-content td {padding: 1rem;color: var(--text-gray);border-top: 1px solid rgba(6, 182, 212, 0.2)}

.comparison-table-content tbody tr:hover {
    background: rgba(6, 182, 212, 0.1);
}

.comparison-table-content tbody tr td:first-child {color: var(--text-white);font-weight: 600}


.faq-section {background: var(--secondary-bg);padding: var(--section-padding)}

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

.faq-item {background: var(--card-gradient);overflow: hidden;border: 1px solid rgba(6, 182, 212, 0.2);margin-bottom: 1rem;border-radius: var(--radius-lg);transition: var(--transition-normal)}

.faq-item:hover {
    border-color: var(--accent-color);
}

.faq-question {justify-content: space-between;align-items: center;user-select: none;padding: 1.5rem;cursor: pointer;display: flex}

.faq-question h3 {margin: 0;font-size: 1.125rem;color: var(--text-white);font-weight: 600}

.faq-icon {font-weight: 300;transition: transform var(--transition-normal);font-size: 1.5rem;color: var(--accent-color)}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {max-height: 0;overflow: hidden;transition: max-height var(--transition-normal)}

.faq-item.active .faq-answer {
    max-height: 1000px;
}

.faq-answer p {color: var(--text-gray);margin: 0;padding: 0 1.5rem 1.5rem;line-height: 1.8}


.download-instructions-section {
    padding: var(--section-padding);
}

.download-process-image {text-align: center;margin: 2rem 0}


.system-requirements-section {background: var(--secondary-bg);padding: var(--section-padding)}

.requirements-comparison {grid-template-columns: 1fr;display: grid;margin: 2rem 0;gap: 2rem}

@media (min-width: 768px) {
    .requirements-comparison {
        grid-template-columns: repeat(2, 1fr);
    }
}

.requirements-platform {background: var(--card-gradient);border-radius: var(--radius-lg);padding: 2rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.platform-header {align-items: center;margin-bottom: 1.5rem;gap: 1rem;display: flex}

.platform-icon {
    font-size: 2rem;
}

.platform-title {margin: 0;color: var(--text-white)}

.requirements-list {padding: 0;list-style: none}

.requirements-list li {padding: 0.75rem 0;color: var(--text-gray);border-bottom: 1px solid rgba(255, 255, 255, 0.1)}

.requirements-list li:last-child {
    border-bottom: none;
}

.compatibility-note {margin-top: 1.5rem;border-radius: var(--radius-md);padding: 1rem;border: 1px solid rgba(16, 185, 129, 0.2);background: rgba(16, 185, 129, 0.1)}

.compatibility-note p {color: var(--success-color);margin: 0}

.performance-tips {
    margin-top: 3rem;
}

.tips-title {color: var(--accent-color);font-size: 1.5rem;margin-bottom: 1.5rem}

.tips-grid {display: grid;gap: 1rem;grid-template-columns: 1fr}

@media (min-width: 640px) {
    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tip-item {padding: 1rem;border-radius: var(--radius-md);align-items: flex-start;display: flex;border: 1px solid rgba(6, 182, 212, 0.1);gap: 1rem;background: var(--card-gradient)}

.tip-icon {flex-shrink: 0;font-size: 1.5rem}

.tip-item p {color: var(--text-gray);margin: 0}


.user-stories-section {
    padding: var(--section-padding);
}

.stories-grid {gap: 2rem;margin: 2rem 0;display: grid;grid-template-columns: 1fr}

@media (min-width: 768px) {
    .stories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.story-card {background: var(--card-gradient);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem;transition: var(--transition-normal)}

.story-card:hover {transform: translateY(-4px);box-shadow: var(--shadow-md)}

.story-header {align-items: center;display: flex;margin-bottom: 1rem;gap: 1rem}

.story-avatar {display: flex;justify-content: center;width: 50px;border-radius: 50%;height: 50px;background: var(--accent-color);font-size: 1.5rem;align-items: center}

.story-info {
    flex: 1;
}

.story-name {color: var(--text-white);font-weight: 600;margin: 0 0 0.25rem 0}

.story-location {color: var(--text-muted);margin: 0;font-size: 0.875rem}

.story-content {line-height: 1.6;color: var(--text-gray)}

.rating-item {display: flex;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: 0.5rem 0;justify-content: space-between}

.rating-item:last-child {
    border-bottom: none;
}


.comparison-section {background: var(--secondary-bg);padding: var(--section-padding)}


.bonus-calculator-section {
    padding: var(--section-padding);
}

.result-card {border-radius: var(--radius-lg);margin: 2rem 0;background: var(--card-gradient);border: 2px solid var(--accent-color);padding: 2rem;text-align: center}

.examples-grid {margin: 2rem 0;grid-template-columns: 1fr;display: grid;gap: 1.5rem}

@media (min-width: 768px) {
    .examples-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.example-item {background: var(--card-gradient);border-radius: var(--radius-lg);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.example-deposit, .example-bonus, .example-total {padding: 0.5rem 0;color: var(--text-gray)}

.example-total {color: var(--accent-color);font-weight: 600;border-top: 1px solid rgba(6, 182, 212, 0.2);margin-top: 0.5rem;font-size: 1.125rem;padding-top: 0.75rem}


.terms-section {padding: var(--section-padding);background: var(--secondary-bg)}

.terms-content {
    margin: 2rem 0;
}

.terms-category {margin-bottom: 2rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem;background: var(--card-gradient)}

.category-title {font-size: 1.25rem;color: var(--accent-color);margin-bottom: 1rem}

.terms-list {list-style: none;padding: 0}

.terms-list li {position: relative;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding: 0.75rem 0;padding-left: 1.5rem;color: var(--text-gray)}

.terms-list li::before {left: 0;color: var(--accent-color);content: '•';position: absolute}

.terms-list li:last-child {
    border-bottom: none;
}

.terms-cta {margin-top: 2rem;text-align: center}

.terms-note {color: var(--text-gray);margin-bottom: 1rem}


.winners-section {
    padding: var(--section-padding);
}

.winners-timeline {
    margin: 2rem 0;
}

.winner-item {padding: 1.5rem;transition: var(--transition-normal);justify-content: space-between;border-radius: var(--radius-lg);align-items: center;gap: 1.5rem;margin-bottom: 1rem;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2);display: flex}

@media (max-width: 768px) {
    .winner-item {align-items: flex-start;flex-direction: column}
}

.winner-item:hover {border-color: var(--accent-color);box-shadow: var(--shadow-md);transform: translateX(4px)}

.winner-time {font-size: 0.875rem;white-space: nowrap;color: var(--text-muted)}

.winner-info {flex: 1;gap: 1rem;align-items: center;display: flex}

.winner-avatar {border-radius: 50%;height: 50px;display: flex;justify-content: center;align-items: center;font-size: 1.5rem;width: 50px;flex-shrink: 0;background: var(--accent-color)}

.winner-details {
    flex: 1;
}

.winner-name {margin: 0 0 0.25rem 0;color: var(--text-white);font-weight: 600}

.winner-bonus {margin: 0;font-size: 0.9375rem;color: var(--text-gray)}

.winner-amount {font-weight: 700;font-size: 1.25rem;white-space: nowrap;color: var(--success-color)}

.winners-stats {margin: 3rem 0;gap: 2rem;grid-template-columns: repeat(3, 1fr);display: grid}

@media (max-width: 768px) {
    .winners-stats {gap: 1.5rem;grid-template-columns: 1fr}
}

.stat-box {border-radius: var(--radius-lg);transition: var(--transition-normal);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem;background: var(--card-gradient);text-align: center}

.stat-box:hover {border-color: var(--accent-color);box-shadow: var(--shadow-accent);transform: translateY(-4px)}

.stat-box .stat-number {margin-bottom: 0.5rem;font-size: 2.5rem;color: var(--accent-color);font-weight: 700;display: block}

.stat-box .stat-label {color: var(--text-gray);font-size: 1rem}

.winners-cta {padding: 2rem;text-align: center;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);margin-top: 3rem;background: rgba(6, 182, 212, 0.1)}

.winners-message {font-size: 1.125rem;color: var(--text-gray);margin-bottom: 1.5rem}

.winners-message strong {
    color: var(--accent-color);
}


.calculator-container {grid-template-columns: 1fr;display: grid;margin: 2rem 0;gap: 2rem}

@media (min-width: 1024px) {
    .calculator-container {
        grid-template-columns: 1fr 1fr;
    }
}

.calculator-form {padding: 2rem;border-radius: var(--radius-lg);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2)}

.calc-input-group {
    margin-bottom: 1.5rem;
}

.calc-input-group label {display: block;color: var(--text-white);font-weight: 600;margin-bottom: 0.5rem}

.calc-input-group input,
.calc-input-group select {width: 100%;padding: 0.75rem 1rem;background: var(--secondary-bg);font-size: 1rem;border: 1px solid rgba(255, 255, 255, 0.2);color: var(--text-white);border-radius: var(--radius-md)}

.calc-input-group input:focus,
.calc-input-group select:focus {box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);outline: none;border-color: var(--accent-color)}

.calc-button {margin-top: 1rem;width: 100%}

.calculator-result {align-items: center;display: flex}

.result-title {color: var(--text-white);text-align: center;margin-bottom: 1rem}

.result-amount {font-weight: 700;margin: 1.5rem 0;text-align: center;color: var(--accent-color);font-size: 3rem}

.result-total {border-radius: var(--radius-md);padding: 1rem;margin: 1.5rem 0;align-items: center;display: flex;justify-content: space-between;background: rgba(6, 182, 212, 0.1)}

.total-label {
    color: var(--text-gray);
}

.total-amount {font-size: 1.25rem;font-weight: 700;color: var(--success-color)}

.result-note {margin-top: 1.5rem;padding: 1rem;border-left: 4px solid var(--warning-color);background: rgba(245, 158, 11, 0.1);border-radius: var(--radius-md)}

.result-note p {font-size: 0.875rem;margin: 0;color: var(--text-gray)}

.calculator-examples {
    margin-top: 3rem;
}

.examples-title {text-align: center;margin-bottom: 1.5rem;color: var(--accent-color)}


.live-stats-section {padding: var(--section-padding);background: var(--secondary-bg)}

.stat-card-live {text-align: center;border-radius: var(--radius-lg);background: var(--card-gradient);padding: 2rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.summary-item {display: flex;padding: 0.75rem 0;justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.1)}

.summary-item:last-child {
    border-bottom: none;
}


.game-rules-section {
    padding: var(--section-padding);
}

.rules-tabs {
    margin: 2rem 0;
}

.tab-buttons {margin-bottom: 2rem;flex-wrap: wrap;gap: 1rem;display: flex}

.tab-button {color: var(--text-gray);padding: 1rem 1.5rem;background: var(--secondary-bg);transition: var(--transition-normal);border: 1px solid rgba(6, 182, 212, 0.2);font-weight: 600;border-radius: var(--radius-md);cursor: pointer}

.tab-button:hover, .tab-button.active {color: var(--primary-bg);background: var(--accent-color);border-color: var(--accent-color)}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.rule-content {padding: 2rem;background: var(--card-gradient);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2)}

.rule-title {margin-bottom: 1.5rem;color: var(--accent-color)}

.rule-details h4 {margin: 1.5rem 0 1rem 0;color: var(--text-white)}

.rule-details ul {padding: 0;list-style: none}

.rule-details ul li {color: var(--text-gray);padding: 0.5rem 0;padding-left: 1.5rem;position: relative}

.rule-details ul li::before {color: var(--accent-color);left: 0;content: '→';position: absolute}

.rule-note {border-radius: var(--radius-md);margin-top: 1.5rem;padding: 1rem;border-left: 4px solid var(--accent-color);background: rgba(6, 182, 212, 0.1);color: var(--text-gray)}


.historical-data-section {padding: var(--section-padding);background: var(--secondary-bg)}

.historical-chart {padding: 2rem;background: var(--card-gradient);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2)}

.chart-header {flex-wrap: wrap;justify-content: space-between;margin-bottom: 2rem;align-items: center;display: flex;gap: 1rem}

.chart-title {margin: 0;color: var(--accent-color)}

.chart-stats {display: flex;gap: 1.5rem}

.chart-stat {font-size: 0.875rem;color: var(--text-gray)}

.multiplier-history {gap: 0.5rem;margin: 2rem 0;flex-wrap: wrap;display: flex}

.history-item {font-size: 0.875rem;padding: 0.5rem 1rem;border-radius: var(--radius-md);font-weight: 600}

.history-item.high {border: 1px solid rgba(16, 185, 129, 0.3);background: rgba(16, 185, 129, 0.2);color: var(--success-color)}

.history-item.medium {border: 1px solid rgba(6, 182, 212, 0.3);background: rgba(6, 182, 212, 0.2);color: var(--accent-color)}

.history-item.low {border: 1px solid rgba(239, 68, 68, 0.3);color: var(--danger-color);background: rgba(239, 68, 68, 0.2)}

.history-analysis {
    margin-top: 2rem;
}

.analysis-title {margin-bottom: 1.5rem;color: var(--accent-color)}

.analysis-grid {margin: 1.5rem 0;grid-template-columns: repeat(2, 1fr);display: grid;gap: 1rem}

@media (min-width: 640px) {
    .analysis-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.analysis-item {padding: 1rem;text-align: center;border-radius: var(--radius-md);background: rgba(6, 182, 212, 0.1)}

.analysis-label {color: var(--text-gray);font-size: 0.875rem;margin-bottom: 0.5rem}

.analysis-value {font-weight: 700;color: var(--accent-color);font-size: 1.5rem}

.analysis-note {padding: 1rem;margin-top: 1.5rem;color: var(--text-gray);border-radius: var(--radius-md);background: rgba(6, 182, 212, 0.1)}


.responsible-gaming-section {
    padding: var(--section-padding);
}

.responsible-content {
    margin: 2rem 0;
}

.warning-box {padding: 2rem;border-radius: var(--radius-lg);margin-bottom: 2rem;background: rgba(245, 158, 11, 0.1);border: 2px solid var(--warning-color)}

.warning-title {margin-bottom: 1rem;color: var(--warning-color)}

.warning-list {list-style: none;padding: 0}

.warning-list li {padding: 0.75rem 0;padding-left: 1.5rem;border-bottom: 1px solid rgba(245, 158, 11, 0.2);color: var(--text-gray);position: relative}

.warning-list li::before {left: 0;position: absolute;content: '⚠';color: var(--warning-color)}

.warning-list li:last-child {
    border-bottom: none;
}

.control-tools {
    margin: 2rem 0;
}

.tools-title {margin-bottom: 1.5rem;color: var(--accent-color)}

.tools-grid {grid-template-columns: 1fr;display: grid;gap: 1rem}

@media (min-width: 640px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tool-item {border-radius: var(--radius-lg);background: var(--card-gradient);padding: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.tool-name {margin-bottom: 0.5rem;color: var(--accent-color)}

.tool-desc {margin: 0;font-size: 0.9375rem;color: var(--text-gray)}

.help-resources {
    margin-top: 2rem;
}

.help-title {color: var(--success-color);margin-bottom: 1.5rem}

.help-list {padding: 0;list-style: none}

.help-item {margin-bottom: 0.75rem;padding: 1rem;color: var(--text-gray);border-radius: var(--radius-md);background: var(--card-gradient)}

.help-item a {text-decoration: none;color: var(--accent-color)}

.help-item a:hover {
    text-decoration: underline;
}

.help-note {background: rgba(16, 185, 129, 0.1);border-left: 4px solid var(--success-color);border-radius: var(--radius-md);padding: 1rem;margin-top: 1.5rem;color: var(--text-gray)}


.league-coverage-section {padding: var(--section-padding);background: var(--secondary-bg)}

.leagues-categories {
    margin: 2rem 0;
}

.league-category {
    margin-bottom: 3rem;
}

.league-category .category-title {color: var(--accent-color);font-size: 1.5rem;margin-bottom: 1.5rem}

.leagues-list {gap: 0.75rem;display: flex;flex-wrap: wrap}

.league-badge {font-size: 0.875rem;border: 1px solid rgba(6, 182, 212, 0.2);transition: var(--transition-normal);padding: 0.75rem 1.25rem;background: var(--card-gradient);border-radius: var(--radius-full);color: var(--text-gray)}

.league-badge:hover {border-color: var(--accent-color);color: var(--primary-bg);background: var(--accent-color)}

.coverage-stats {display: grid;grid-template-columns: repeat(2, 1fr);margin-top: 3rem;gap: 2rem}

@media (min-width: 768px) {
    .coverage-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.coverage-stat {border-radius: var(--radius-lg);text-align: center;border: 1px solid rgba(6, 182, 212, 0.2);padding: 1.5rem;background: var(--card-gradient)}


.odds-comparison-section {
    padding: var(--section-padding);
}

.odds-example {
    margin: 2rem 0;
}

.example-title {margin-bottom: 1.5rem;color: var(--accent-color)}

.odds-table {margin: 2rem 0;overflow-x: auto}

.highlight-row {
    background: rgba(6, 182, 212, 0.1) !important;
}

.advantage-badge {color: var(--text-white);background: var(--success-color);display: inline-block;font-weight: 600;font-size: 0.75rem;padding: 0.25rem 0.75rem;border-radius: var(--radius-full)}

.odds-note {background: rgba(6, 182, 212, 0.1);margin-top: 1.5rem;padding: 1rem;border-radius: var(--radius-md);color: var(--text-gray)}

.odds-features {grid-template-columns: 1fr;gap: 1.5rem;display: grid;margin-top: 2rem}

@media (min-width: 768px) {
    .odds-features {
        grid-template-columns: repeat(3, 1fr);
    }
}

.odds-feature {background: var(--card-gradient);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);text-align: center;padding: 1.5rem}

.odds-feature .feature-icon {font-size: 2rem;margin-bottom: 1rem;display: block}

.odds-feature .feature-title {color: var(--accent-color);margin-bottom: 0.5rem}

.odds-feature-desc {margin: 0;color: var(--text-gray);font-size: 0.9375rem}


.expert-analysis-section {background: var(--secondary-bg);padding: var(--section-padding)}

.analysis-articles {grid-template-columns: 1fr;gap: 2rem;margin: 2rem 0;display: grid}

@media (min-width: 768px) {
    .analysis-articles {
        grid-template-columns: repeat(3, 1fr);
    }
}

.article-card {display: flex;background: var(--card-gradient);border-radius: var(--radius-lg);padding: 2rem;flex-direction: column;transition: var(--transition-normal);border: 1px solid rgba(6, 182, 212, 0.2)}

.article-card:hover {border-color: var(--accent-color);box-shadow: var(--shadow-md);transform: translateY(-4px)}

.article-header {margin-bottom: 1rem;justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.1);display: flex;align-items: center;padding-bottom: 1rem}

.article-category {padding: 0.5rem 1rem;background: rgba(6, 182, 212, 0.2);font-weight: 600;border-radius: var(--radius-full);color: var(--accent-color);font-size: 0.875rem}

.article-date {font-size: 0.875rem;color: var(--text-muted)}

.article-title {color: var(--text-white);margin-bottom: 1rem;font-size: 1.25rem;line-height: 1.4}

.article-excerpt {color: var(--text-gray);margin-bottom: 1.5rem;flex: 1;line-height: 1.6}

.article-author {border-top: 1px solid rgba(255, 255, 255, 0.1);margin-bottom: 1rem;flex-direction: column;padding-top: 1rem;gap: 0.25rem;display: flex}

.author-name {font-weight: 600;color: var(--text-white)}

.author-title {color: var(--text-muted);font-size: 0.875rem}

.article-stats {padding-top: 1rem;gap: 1.5rem;display: flex;border-top: 1px solid rgba(255, 255, 255, 0.1)}

.article-stats .stat {font-size: 0.875rem;color: var(--text-gray)}

.expert-stats {grid-template-columns: repeat(2, 1fr);display: grid;margin: 3rem 0;gap: 2rem}

@media (min-width: 768px) {
    .expert-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.expert-stat {text-align: center;background: var(--card-gradient);transition: var(--transition-normal);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem}

.expert-stat:hover {box-shadow: var(--shadow-accent);border-color: var(--accent-color);transform: translateY(-4px)}

.expert-stat .stat-number {display: block;font-weight: 700;font-size: 2.5rem;margin-bottom: 0.5rem;color: var(--accent-color)}

.expert-stat .stat-label {color: var(--text-gray);font-size: 1rem}

.analysis-cta {margin-top: 3rem;border-radius: var(--radius-lg);text-align: center;border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem;background: rgba(6, 182, 212, 0.1)}

.cta-text {font-size: 1.125rem;line-height: 1.6;margin-bottom: 1.5rem;color: var(--text-gray)}

.cta-text strong {
    color: var(--accent-color);
}


.football-leagues {
    margin: 2rem 0;
}

.league-item {align-items: flex-start;border-radius: var(--radius-md);display: flex;border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient);gap: 1rem;margin-bottom: 1rem;padding: 1rem;transition: var(--transition-normal)}

.league-item:hover {transform: translateX(4px);border-color: var(--accent-color)}

.league-icon {font-size: 1.5rem;flex-shrink: 0}

.league-content {
    flex: 1;
}

.league-title {color: var(--accent-color);margin-bottom: 0.5rem;font-size: 1.125rem}

.league-description {font-size: 0.9375rem;margin: 0;color: var(--text-gray)}


.live-features {
    margin: 2rem 0;
}

.live-feature {background: var(--card-gradient);padding: 1.5rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);margin-bottom: 1rem}

.live-feature .feature-title {margin-bottom: 0.75rem;color: var(--accent-color)}

.live-feature .feature-description {margin: 0;color: var(--text-gray)}

.live-stats {background: rgba(6, 182, 212, 0.1);border-left: 4px solid var(--accent-color);border-radius: var(--radius-lg);padding: 1.5rem;margin: 2rem 0}

.live-stats .stats-text {line-height: 1.8;margin: 0;color: var(--text-gray)}


.odds-feature-desc {font-size: 0.9375rem;color: var(--text-gray);margin: 0}


.tier-number {flex-shrink: 0;font-weight: 700;align-items: center;width: 40px;background: var(--accent-color);color: var(--primary-bg);height: 40px;justify-content: center;display: flex;border-radius: 50%}

.tier-content {
    flex: 1;
}

.tier-bonus {font-size: 1.125rem;font-weight: 600;color: var(--accent-color);margin: 0.5rem 0}

.tier-description {font-size: 0.9375rem;color: var(--text-gray);margin: 0}


.step-number {height: 50px;width: 50px;flex-shrink: 0;font-weight: 700;background: var(--accent-color);justify-content: center;border-radius: 50%;align-items: center;display: flex;color: var(--primary-bg);font-size: 1.5rem}

.step-content {
    flex: 1;
}

.step-title {color: var(--text-white);margin-bottom: 0.5rem}

.step-description {color: var(--text-gray);margin: 0}


.strategy-title {margin-bottom: 0.75rem;color: var(--text-white)}

.strategy-description {margin-bottom: 1rem;color: var(--text-gray)}

.strategy-stats {gap: 1rem;display: flex;margin-top: 1rem}

.strategy-stats .stat {font-size: 0.875rem;color: var(--text-gray);background: rgba(6, 182, 212, 0.1);padding: 0.5rem 1rem;border-radius: var(--radius-md)}

.strategy-tips {
    margin-top: 2rem;
}

.strategy-tips .tips-title {margin-bottom: 1rem;color: var(--accent-color)}


.game-categories-section {background: var(--secondary-bg);padding: var(--section-padding)}

.category-stats {grid-template-columns: repeat(2, 1fr);gap: 1.5rem;display: grid;margin: 2rem 0}

@media (min-width: 640px) {
    .category-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.category-stats .stat-item {text-align: center;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 1.5rem;background: var(--card-gradient)}

.category-features {
    margin: 2rem 0;
}

.category-feature {background: var(--card-gradient);border-radius: var(--radius-lg);margin-bottom: 1rem;border: 1px solid rgba(6, 182, 212, 0.2);padding: 1.5rem}


.game-features-section {
    padding: var(--section-padding);
}

.feature-content {
    margin-top: 1rem;
}

.feature-list {list-style: none;margin-top: 1rem;padding: 0}

.feature-list li {padding: 0.5rem 0;padding-left: 1.5rem;position: relative;color: var(--text-gray)}

.feature-list li::before {left: 0;content: '✓';position: absolute;color: var(--success-color);font-weight: bold}


.rtp-info-section {background: var(--secondary-bg);padding: var(--section-padding)}

.rtp-explanation {
    margin: 2rem 0;
}

.rtp-content {border-radius: var(--radius-lg);margin-bottom: 3rem;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem}

.rtp-title {font-size: 1.5rem;color: var(--accent-color);margin-bottom: 1rem}

.rtp-description {margin: 0;line-height: 1.8;color: var(--text-gray)}

.rtp-categories {
    margin: 2rem 0;
}

.rtp-category {margin-bottom: 2rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem;background: var(--card-gradient)}

.rtp-category .category-title {color: var(--accent-color);font-size: 1.25rem;margin-bottom: 1.5rem}

.rtp-games {gap: 1rem;display: grid;grid-template-columns: 1fr}

@media (min-width: 640px) {
    .rtp-games {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rtp-game {background: var(--secondary-bg);border-radius: var(--radius-md);display: flex;align-items: center;justify-content: space-between;padding: 1rem;border: 1px solid rgba(255, 255, 255, 0.1)}

.game-name {font-weight: 600;color: var(--text-white)}

.rtp-value {color: var(--accent-color);font-weight: 700;font-size: 1.125rem}

.rtp-note {border-radius: var(--radius-lg);padding: 1.5rem;border-left: 4px solid var(--warning-color);margin-top: 2rem;background: rgba(245, 158, 11, 0.1)}

.rtp-note p {margin: 0;line-height: 1.8;color: var(--text-gray)}


.tips-section {
    padding: var(--section-padding);
}

.tip-card {padding: 2rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);height: 100%;background: var(--card-gradient);flex-direction: column;display: flex;transition: var(--transition-normal)}

.tip-card:hover {border-color: var(--accent-color);transform: translateY(-4px);box-shadow: var(--shadow-md)}

.tip-header {border-bottom: 1px solid rgba(255, 255, 255, 0.1);align-items: center;padding-bottom: 1rem;display: flex;gap: 1rem;margin-bottom: 1.5rem}

.tip-header .tip-icon {font-size: 2rem;flex-shrink: 0}

.tip-header .tip-title {color: var(--text-white);font-size: 1.25rem;margin: 0}

.tip-content {
    flex: 1;
}

.tip-description {line-height: 1.6;color: var(--text-gray);margin-bottom: 1rem}

.tip-list {list-style: none;padding: 0;margin: 0}

.tip-list li {line-height: 1.6;color: var(--text-gray);padding: 0.5rem 0;padding-left: 1.5rem;position: relative}

.tip-list li::before {left: 0;position: absolute;content: '→';color: var(--accent-color);font-weight: bold}

.tips-warning {border-radius: var(--radius-lg);background: rgba(245, 158, 11, 0.1);padding: 1.5rem;border-left: 4px solid var(--warning-color);margin-top: 3rem}

.tips-warning p {line-height: 1.8;margin: 0;color: var(--text-gray)}

.tips-warning strong {
    color: var(--warning-color);
}


.slots-section {
    padding: var(--section-padding);
}

.slots-features {
    margin: 2rem 0;
}


.table-games-section {background: var(--secondary-bg);padding: var(--section-padding)}

.table-games-list {
    margin: 2rem 0;
}

.game-item {transition: var(--transition-normal);border-radius: var(--radius-lg);margin-bottom: 1rem;border: 1px solid rgba(6, 182, 212, 0.2);background: var(--card-gradient);padding: 1.5rem}

.game-item:hover {transform: translateX(4px);border-color: var(--accent-color)}

.game-item .game-title {font-size: 1.125rem;margin-bottom: 0.75rem;color: var(--accent-color)}

.game-item .game-description {line-height: 1.6;margin: 0;color: var(--text-gray)}

.table-stats {margin: 2rem 0;border-radius: var(--radius-lg);border-left: 4px solid var(--accent-color);padding: 1.5rem;background: rgba(6, 182, 212, 0.1)}

.table-stats .stats-text {color: var(--text-gray);margin: 0;font-size: 1.125rem;text-align: center}


.filters-section {padding: var(--section-padding);background: var(--secondary-bg)}

.filters-showcase {
    margin: 2rem 0;
}

.filter-category {margin-bottom: 3rem;border-radius: var(--radius-lg);background: var(--card-gradient);padding: 2rem;border: 1px solid rgba(6, 182, 212, 0.2)}

.filter-title {font-size: 1.25rem;color: var(--accent-color);margin-bottom: 1.5rem}

.filter-options {flex-wrap: wrap;display: flex;gap: 1rem}

.filter-btn {cursor: pointer;background: var(--secondary-bg);border: 1px solid rgba(255, 255, 255, 0.2);padding: 0.75rem 1.5rem;transition: var(--transition-normal);color: var(--text-white);font-weight: 500;font-size: 0.9375rem;border-radius: var(--radius-full)}

.filter-btn:hover {border-color: var(--accent-color);transform: translateY(-2px);background: var(--accent-color)}

.filter-btn.active {box-shadow: var(--shadow-glow);background: var(--accent-color);border-color: var(--accent-color)}

.filter-results {border-radius: var(--radius-lg);background: rgba(6, 182, 212, 0.1);border-left: 4px solid var(--accent-color);margin-top: 2rem;padding: 1.5rem}

.results-note {line-height: 1.8;margin: 0;color: var(--text-gray)}

.results-note strong {
    color: var(--accent-color);
}


.hot-games-section {
    padding: var(--section-padding);
}

.hot-games-list {
    margin: 2rem 0;
}

.hot-game-item {align-items: center;background: var(--card-gradient);padding: 2rem;display: flex;border-radius: var(--radius-lg);gap: 1.5rem;margin-bottom: 1.5rem;border: 1px solid rgba(6, 182, 212, 0.2);transition: var(--transition-normal)}

.hot-game-item:hover {box-shadow: var(--shadow-md);transform: translateY(-4px);border-color: var(--accent-color)}

@media (max-width: 768px) {
    .hot-game-item {align-items: flex-start;flex-direction: column}
}

.hot-rank {text-align: center;color: var(--accent-color);min-width: 60px;font-weight: 700;font-size: 2rem}

.hot-game-info {
    flex: 1;
}

.hot-game-header {align-items: center;flex-wrap: wrap;margin-bottom: 0.75rem;justify-content: space-between;gap: 1rem;display: flex}

.hot-game-name {color: var(--text-white);margin: 0;font-size: 1.25rem}

.hot-badge {padding: 0.375rem 0.875rem;background: var(--accent-color);border-radius: var(--radius-full);font-size: 0.75rem;color: var(--primary-bg);text-transform: uppercase;font-weight: 600}

.hot-game-desc {margin-bottom: 1rem;color: var(--text-gray);line-height: 1.6}

.hot-stats {gap: 1.5rem;flex-wrap: wrap;display: flex}

.hot-stat {font-size: 0.875rem;color: var(--text-muted)}

.btn-hot-play {color: var(--primary-bg);transition: var(--transition-normal);font-weight: 600;white-space: nowrap;border-radius: var(--radius-md);padding: 0.875rem 2rem;background: var(--primary-gradient);text-decoration: none}

.btn-hot-play:hover {transform: translateY(-2px);box-shadow: var(--shadow-glow)}

.hot-games-update {border-radius: var(--radius-lg);margin-top: 3rem;border-left: 4px solid var(--accent-color);padding: 1.5rem;background: rgba(6, 182, 212, 0.1)}

.update-note {color: var(--text-gray);margin: 0;line-height: 1.8}

.update-note strong {
    color: var(--accent-color);
}


.new-games-section {padding: var(--section-padding);background: var(--secondary-bg)}

.new-games-grid {gap: 2rem;margin: 2rem 0;grid-template-columns: 1fr;display: grid}

@media (min-width: 640px) {
    .new-games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .new-games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.new-game-card {position: relative;transition: var(--transition-normal);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);flex-direction: column;padding: 1.5rem;background: var(--card-gradient);display: flex}

.new-game-card:hover {border-color: var(--accent-color);box-shadow: var(--shadow-md);transform: translateY(-4px)}

.new-badge {right: 1rem;position: absolute;font-size: 0.75rem;border-radius: var(--radius-full);top: 1rem;font-weight: 700;text-transform: uppercase;padding: 0.375rem 0.875rem;color: var(--primary-bg);background: var(--warning-color)}

.new-game-header {display: flex;gap: 1rem;align-items: center;margin-bottom: 1rem;padding-top: 1rem}

.new-game-icon {
    font-size: 2rem;
}

.new-game-name {color: var(--text-white);margin: 0;font-size: 1.125rem}

.new-game-content {
    flex: 1;
}

.new-game-desc {color: var(--text-gray);font-size: 0.9375rem;line-height: 1.6;margin-bottom: 1rem}

.new-game-specs {flex-direction: column;display: flex;gap: 0.5rem;margin-bottom: 1rem}

.spec {font-size: 0.875rem;color: var(--text-muted)}

.new-game-features {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1.5rem}

.feature-tag {padding: 0.375rem 0.75rem;color: var(--accent-color);border-radius: var(--radius-md);font-size: 0.75rem;background: rgba(6, 182, 212, 0.2);font-weight: 500}

.btn-new-play {transition: var(--transition-normal);text-decoration: none;color: var(--primary-bg);background: var(--primary-gradient);text-align: center;padding: 0.875rem 1.5rem;display: block;font-weight: 600;border-radius: var(--radius-md)}

.btn-new-play:hover {transform: translateY(-2px);box-shadow: var(--shadow-glow)}

.new-games-schedule {border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem;background: var(--card-gradient);margin-top: 3rem}

.schedule-title {margin-bottom: 1.5rem;color: var(--accent-color);font-size: 1.25rem}

.schedule-list {display: grid;grid-template-columns: 1fr;gap: 1rem;margin-bottom: 1.5rem}

@media (min-width: 640px) {
    .schedule-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.schedule-item {background: var(--secondary-bg);border-radius: var(--radius-md);justify-content: space-between;border: 1px solid rgba(255, 255, 255, 0.1);display: flex;align-items: center;padding: 1rem}

.schedule-date {color: var(--text-white);font-weight: 600}

.schedule-games {font-weight: 600;color: var(--accent-color)}

.schedule-note {color: var(--text-gray);line-height: 1.8;text-align: center;margin: 0}

.schedule-note strong {
    color: var(--accent-color);
}


.security-section {
    padding: var(--section-padding);
}


.benefits-section {background: var(--secondary-bg);padding: var(--section-padding)}


.help-section {
    padding: var(--section-padding);
}


.password-recovery-section {padding: var(--section-padding);background: var(--secondary-bg)}

.recovery-steps {gap: 2rem;margin: 3rem 0;display: grid}

.recovery-step {align-items: flex-start;transition: var(--transition-normal);padding: 2rem;background: var(--card-gradient);border-radius: var(--radius-lg);display: flex;border: 1px solid rgba(6, 182, 212, 0.2);gap: 2rem}

@media (max-width: 768px) {
    .recovery-step {flex-direction: column;gap: 1rem}
}

.recovery-step:hover {transform: translateX(4px);border-color: var(--accent-color)}

.recovery-step .step-number {color: var(--primary-bg);font-weight: 700;font-size: 1.5rem;border-radius: 50%;width: 60px;display: flex;justify-content: center;background: var(--primary-gradient);flex-shrink: 0;height: 60px;align-items: center}

.recovery-step .step-content {
    flex: 1;
}

.recovery-step .step-title {font-size: 1.25rem;color: var(--accent-color);margin-bottom: 0.75rem}

.recovery-step .step-description {line-height: 1.6;margin: 0;color: var(--text-gray)}

.recovery-security {padding: 2rem;border-radius: var(--radius-lg);margin: 3rem 0;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2)}

.recovery-security .security-title {margin-bottom: 1.5rem;font-size: 1.25rem;color: var(--accent-color)}

.recovery-security .security-list {padding: 0;margin: 0;list-style: none}

.recovery-security .security-list li {line-height: 1.6;color: var(--text-gray);padding: 0.75rem 0;position: relative;padding-left: 1.5rem}

.recovery-security .security-list li::before {color: var(--success-color);left: 0;font-weight: bold;content: '✓';position: absolute}

.recovery-cta {text-align: center;margin-top: 2rem}


.quick-registration-section {
    padding: var(--section-padding);
}

.registration-benefits {margin: 2rem 0;grid-template-columns: 1fr;display: grid;gap: 1.5rem}

@media (min-width: 640px) {
    .registration-benefits {
        grid-template-columns: repeat(3, 1fr);
    }
}

.reg-benefit {transition: var(--transition-normal);border-radius: var(--radius-lg);padding: 1.5rem;background: var(--card-gradient);align-items: flex-start;gap: 1rem;border: 1px solid rgba(6, 182, 212, 0.2);display: flex}

.reg-benefit:hover {transform: translateY(-4px);border-color: var(--accent-color)}

.reg-benefit .benefit-icon {font-size: 2rem;flex-shrink: 0}

.reg-benefit .benefit-content {
    flex: 1;
}

.reg-benefit .benefit-title {margin-bottom: 0.5rem;color: var(--accent-color);font-size: 1.125rem}

.reg-benefit .benefit-desc {font-size: 0.9375rem;margin: 0;color: var(--text-gray)}

.registration-steps {padding: 2rem;background: var(--card-gradient);border-radius: var(--radius-lg);margin: 2rem 0;border: 1px solid rgba(6, 182, 212, 0.2)}

.registration-steps .steps-title {margin-bottom: 1.5rem;font-size: 1.25rem;color: var(--accent-color)}

.registration-steps .steps-list {list-style: none;padding: 0;counter-reset: step-counter;margin: 0}

.registration-steps .steps-list li {line-height: 1.8;counter-increment: step-counter;border-bottom: 1px solid rgba(255, 255, 255, 0.1);color: var(--text-gray);padding: 1rem 0 1rem 3rem;position: relative}

.registration-steps .steps-list li:last-child {
    border-bottom: none;
}

.registration-steps .steps-list li::before {display: flex;font-weight: 700;align-items: center;top: 1rem;left: 0;height: 30px;content: counter(step-counter);color: var(--primary-bg);width: 30px;font-size: 0.875rem;border-radius: 50%;position: absolute;justify-content: center;background: var(--primary-gradient)}

.registration-steps .steps-list li strong {
    color: var(--text-white);
}

.registration-note {background: rgba(6, 182, 212, 0.1);border-radius: var(--radius-lg);border-left: 4px solid var(--accent-color);margin: 2rem 0;padding: 1.5rem}

.registration-note p {color: var(--text-gray);line-height: 1.8;margin: 0}

.registration-note strong {
    color: var(--accent-color);
}


.security-tips-section {background: var(--secondary-bg);padding: var(--section-padding)}

.tips-grid-security {gap: 2rem;display: grid;grid-template-columns: 1fr;margin: 2rem 0}

@media (min-width: 640px) {
    .tips-grid-security {
        grid-template-columns: repeat(2, 1fr);
    }
}

.tip-card-security {transition: var(--transition-normal);border-radius: var(--radius-lg);padding: 2rem;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2)}

.tip-card-security:hover {border-color: var(--accent-color);transform: translateY(-4px);box-shadow: var(--shadow-md)}

.tip-header-security {gap: 1rem;margin-bottom: 1.5rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);display: flex;padding-bottom: 1rem;align-items: center}

.tip-icon-security {
    font-size: 2rem;
}

.tip-title-security {font-size: 1.25rem;margin: 0;color: var(--text-white)}

.tip-content-security {
    flex: 1;
}

.tip-list-security {list-style: none;padding: 0;margin: 0}

.tip-list-security li {padding: 0.5rem 0;padding-left: 1.5rem;position: relative;color: var(--text-gray);line-height: 1.6}

.tip-list-security li::before {left: 0;content: '→';color: var(--accent-color);font-weight: bold;position: absolute}

.security-warning {
    margin-top: 3rem;
}

.warning-box {background: rgba(245, 158, 11, 0.1);border-left: 4px solid var(--warning-color);padding: 2rem;border-radius: var(--radius-lg)}

.warning-title {margin-bottom: 1.5rem;color: var(--warning-color);font-size: 1.25rem}

.warning-list {margin: 0;padding: 0;list-style: none}

.warning-list li {position: relative;color: var(--text-gray);padding: 0.75rem 0;line-height: 1.8;padding-left: 1.5rem}

.warning-list li::before {font-weight: bold;color: var(--warning-color);content: '⚠';left: 0;position: absolute}

.warning-list li strong {
    color: var(--warning-color);
}


.tech-stack-section {padding: var(--section-padding);background: var(--secondary-bg)}

.stack-categories {
    margin: 2rem 0;
}

.stack-category {margin-bottom: 2rem;padding: 2rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);background: var(--card-gradient)}

.stack-category .category-title {color: var(--accent-color);margin-bottom: 1.5rem;font-size: 1.25rem}

.stack-items {grid-template-columns: 1fr;gap: 1rem;display: grid}

@media (min-width: 640px) {
    .stack-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stack-item {flex-direction: column;display: flex;padding: 1rem;border-radius: var(--radius-md);background: var(--secondary-bg);transition: var(--transition-normal);border: 1px solid rgba(255, 255, 255, 0.1)}

.stack-item:hover {transform: translateX(4px);border-color: var(--accent-color)}

.stack-name {margin-bottom: 0.5rem;color: var(--text-white);font-weight: 600}

.stack-desc {color: var(--text-muted);font-size: 0.875rem}


.performance-section {
    padding: var(--section-padding);
}

.metrics-dashboard {
    margin: 2rem 0;
}

.metrics-grid {gap: 2rem;margin-bottom: 2rem;grid-template-columns: 1fr;display: grid}

@media (min-width: 640px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.metric-card {border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);transition: var(--transition-normal);padding: 2rem;background: var(--card-gradient)}

.metric-card:hover {box-shadow: var(--shadow-md);border-color: var(--accent-color);transform: translateY(-4px)}

.metric-header {display: flex;margin-bottom: 1rem;justify-content: space-between;align-items: center}

.metric-title {font-size: 1rem;margin: 0;color: var(--text-white)}

.metric-status {font-weight: 600;padding: 0.375rem 0.875rem;border-radius: var(--radius-full);font-size: 0.75rem;text-transform: uppercase}

.metric-status.excellent {color: var(--success-color);background: rgba(16, 185, 129, 0.2)}

.metric-value {color: var(--accent-color);font-size: 2.5rem;margin: 1rem 0;font-weight: 700}

.metric-label {font-size: 0.9375rem;margin-bottom: 1rem;color: var(--text-gray)}

.metric-comparison {padding-top: 1rem;border-top: 1px solid rgba(255, 255, 255, 0.1)}

.comparison-text {font-size: 0.875rem;color: var(--text-muted)}

.performance-note {padding: 1.5rem;border-radius: var(--radius-lg);background: rgba(6, 182, 212, 0.1);margin-top: 3rem;border-left: 4px solid var(--accent-color)}

.performance-note p {line-height: 1.8;color: var(--text-gray);margin: 0}

.performance-note strong {
    color: var(--accent-color);
}


.update-log-section {background: var(--secondary-bg);padding: var(--section-padding)}

.updates-timeline {
    margin: 2rem 0;
}

.update-item {margin-bottom: 2rem;position: relative;display: flex;border-radius: var(--radius-lg);background: var(--card-gradient);transition: var(--transition-normal);gap: 2rem;padding: 2rem;border: 1px solid rgba(6, 182, 212, 0.2)}

@media (max-width: 768px) {
    .update-item {flex-direction: column;gap: 1rem}
}

.update-item:hover {transform: translateX(4px);border-color: var(--accent-color)}

.update-item::before {width: 4px;left: 0;bottom: 0;content: '';position: absolute;top: 0;background: var(--primary-gradient);border-radius: var(--radius-lg) 0 0 var(--radius-lg)}

.update-date {font-size: 1rem;flex-shrink: 0;font-weight: 600;min-width: 120px;color: var(--accent-color)}

.update-content {
    flex: 1;
}

.update-title {margin-bottom: 1rem;color: var(--text-white);font-size: 1.25rem}

.update-changes {margin: 0;padding: 0;list-style: none}

.update-changes li {padding: 0.5rem 0;line-height: 1.6;color: var(--text-gray)}

.upcoming-updates {margin-top: 3rem;border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);background: var(--card-gradient);padding: 2rem}

.upcoming-title {margin-bottom: 1.5rem;color: var(--accent-color);font-size: 1.25rem}

.upcoming-list {grid-template-columns: 1fr;display: grid;gap: 1rem}

@media (min-width: 640px) {
    .upcoming-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.upcoming-item {display: flex;border-radius: var(--radius-md);gap: 1rem;background: var(--secondary-bg);padding: 1rem;border: 1px solid rgba(255, 255, 255, 0.1);align-items: flex-start}

.upcoming-icon {font-size: 1.5rem;flex-shrink: 0}

.upcoming-content {
    flex: 1;
}

.upcoming-name {display: block;font-weight: 600;color: var(--accent-color);margin-bottom: 0.5rem}

.upcoming-desc {margin: 0;color: var(--text-gray);font-size: 0.9375rem}

.update-cta {margin-top: 2rem;text-align: center}

.update-message {margin: 0;color: var(--text-gray);line-height: 1.8}

.update-message strong {
    color: var(--accent-color);
}


.promo-highlights {gap: 1rem;display: grid;grid-template-columns: repeat(2, 1fr);margin: 2rem 0}

@media (min-width: 768px) {
    .promo-highlights {
        grid-template-columns: repeat(4, 1fr);
    }
}

.promo-highlight {padding: 1rem;display: flex;gap: 1rem;align-items: center;background: var(--card-gradient);transition: var(--transition-normal);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2)}

.promo-highlight:hover {transform: translateY(-4px);border-color: var(--accent-color);box-shadow: var(--shadow-md)}

.promo-highlight .highlight-icon {font-size: 2rem;flex-shrink: 0}

.promo-highlight .highlight-info {flex-direction: column;display: flex;flex: 1;gap: 0.25rem}

.promo-highlight .highlight-title {font-size: 0.9375rem;font-weight: 600;color: var(--text-white)}

.promo-highlight .highlight-desc {font-weight: 600;font-size: 0.875rem;color: var(--accent-color)}


.featured-promos-section {
    padding: var(--section-padding);
}

.featured-promo-item .promo-content {
    flex: 1;
}


.promo-calendar-section {background: var(--secondary-bg);padding: var(--section-padding)}

.calendar-months {margin: 2rem 0;grid-template-columns: 1fr;gap: 2rem;display: grid}

@media (min-width: 768px) {
    .calendar-months {
        grid-template-columns: repeat(3, 1fr);
    }
}

.month-card {border-radius: var(--radius-lg);padding: 2rem;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2)}

.month-name {color: var(--accent-color);margin-bottom: 1.5rem;text-align: center;font-size: 1.25rem}

.month-promos {display: flex;flex-direction: column;gap: 1rem}

.promo-calendar-item {gap: 0.5rem;flex-direction: column;padding: 1rem;display: flex;background: var(--secondary-bg);border-radius: var(--radius-md);border: 1px solid rgba(255, 255, 255, 0.1)}

.promo-date {color: var(--accent-color);font-weight: 600;font-size: 0.875rem}

.promo-name {color: var(--text-white);font-size: 0.9375rem}

.calendar-note {background: rgba(6, 182, 212, 0.1);border-radius: var(--radius-lg);padding: 1.5rem;margin-top: 2rem;border-left: 4px solid var(--accent-color)}

.calendar-note p {line-height: 1.8;margin: 0;color: var(--text-gray)}

.calendar-note strong {
    color: var(--accent-color);
}


.requirements-section {
    padding: var(--section-padding);
}

.requirements-grid {gap: 2rem;margin: 2rem 0;grid-template-columns: 1fr;display: grid}

@media (min-width: 640px) {
    .requirements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.requirement-card {border-radius: var(--radius-lg);padding: 2rem;background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2)}

.req-title {color: var(--accent-color);font-size: 1.25rem;margin-bottom: 1.5rem}

.req-list {padding: 0;list-style: none;margin: 0}

.req-list li {padding: 0.75rem 0;line-height: 1.6;color: var(--text-gray)}

.requirements-warning {
    margin-top: 3rem;
}

.requirements-warning .warning-box {background: rgba(245, 158, 11, 0.1);border-radius: var(--radius-lg);padding: 2rem;border-left: 4px solid var(--warning-color)}

.requirements-warning .warning-title {font-size: 1.25rem;margin-bottom: 1.5rem;color: var(--warning-color)}

.requirements-warning .warning-list {padding: 0;list-style: none;margin: 0 0 1.5rem 0}

.requirements-warning .warning-list li {padding: 0.75rem 0;position: relative;color: var(--text-gray);line-height: 1.8;padding-left: 1.5rem}

.requirements-warning .warning-list li::before {color: var(--warning-color);position: absolute;left: 0;content: '⚠';font-weight: bold}

.requirements-warning .warning-list li strong {
    color: var(--warning-color);
}

.warning-note {line-height: 1.8;margin: 0;color: var(--text-gray)}

.warning-note strong {
    color: var(--accent-color);
}


.winners-hall-section {padding: var(--section-padding);background: var(--secondary-bg)}

.winners-categories {display: grid;grid-template-columns: 1fr;margin: 2rem 0;gap: 2rem}

@media (min-width: 768px) {
    .winners-categories {
        grid-template-columns: repeat(3, 1fr);
    }
}

.winner-category {background: var(--card-gradient);border-radius: var(--radius-lg);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem}

.winner-category .category-title {color: var(--accent-color);text-align: center;font-size: 1.25rem;margin-bottom: 1.5rem}

.winners-list-hall {display: flex;flex-direction: column;gap: 1rem}

.winner-hall-item {gap: 1rem;border-radius: var(--radius-md);transition: var(--transition-normal);background: var(--secondary-bg);border: 1px solid rgba(255, 255, 255, 0.1);align-items: flex-start;padding: 1rem;display: flex}

.winner-hall-item:hover {border-color: var(--accent-color);transform: translateX(4px)}

.winner-rank {flex-shrink: 0;font-size: 2rem}

.winner-details-hall {
    flex: 1;
}

.winner-name-hall {margin-bottom: 0.25rem;font-weight: 600;color: var(--text-white);font-size: 1.125rem}

.winner-location-hall {margin-bottom: 0.5rem;font-size: 0.875rem;color: var(--text-muted)}

.winner-prize {font-weight: 700;color: var(--success-color);font-size: 1.25rem;margin-bottom: 0.25rem}

.winner-source {color: var(--text-gray);font-size: 0.875rem}

.winners-stats-hall {gap: 2rem;margin: 3rem 0;display: grid;grid-template-columns: repeat(2, 1fr)}

@media (min-width: 640px) {
    .winners-stats-hall {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-hall {border-radius: var(--radius-lg);background: var(--card-gradient);border: 1px solid rgba(6, 182, 212, 0.2);padding: 2rem;transition: var(--transition-normal);text-align: center}

.stat-hall:hover {box-shadow: var(--shadow-accent);border-color: var(--accent-color);transform: translateY(-4px)}

.stat-number-hall {font-size: 2.5rem;display: block;font-weight: 700;color: var(--accent-color);margin-bottom: 0.5rem}

.stat-label-hall {color: var(--text-gray);font-size: 1rem}

.winners-message {border-radius: var(--radius-lg);margin-top: 3rem;padding: 2rem;background: rgba(6, 182, 212, 0.1);text-align: center;border: 1px solid rgba(6, 182, 212, 0.2)}

.message-text {line-height: 1.6;color: var(--text-gray);margin-bottom: 1.5rem;font-size: 1.125rem}

.message-text strong {
    color: var(--accent-color);
}

html, body {max-width:100%;overflow-x:hidden;width:100%}
.container {padding:0 16px;width:100%;box-sizing:border-box;max-width:1200px}
* { box-sizing:border-box; }

img, video, svg {display:block;max-width:100%;height:auto}
.main-image, .feature-image {height:auto;max-width:100%}

.btn, .btn-hero, .btn-hero-large { white-space:normal; }

.hero-content,
.section-content,
.platform-features,
.promo-highlights,
.live-features,
.support-channels {
  flex-wrap:wrap;
}

[class*="grid"],
.winners-stats-hall,
.metrics-grid,
.trust-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(0,1fr))}

.hero-section img,
.section-content img,
.hero-image img {max-width: min(100%, 800px);width:100%;}

.hero-title, .hero-subtitle,
.section-title, .section-subtitle {overflow-wrap:anywhere;word-break:break-word}

.table-responsive {width:100%;overflow-x:auto}
.table-responsive table {width:100%;min-width:600px}


.providers-grid {display: grid;gap: 1rem;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}

@media (max-width: 768px) {
  .providers-grid {
    grid-template-columns: 1fr;
  }
}


.provider-card {min-width: 0;width: 100%;box-sizing: border-box}


.stats-grid,
.statistics-grid,
.stat-cards,
.numbers-grid,
.winners-stats,
.winners-stats-hall,
.metrics-grid,
.trust-grid,
.support-stats,
.hot-games-list,
.providers-grid {display: grid;gap: 1rem;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))}


@media (max-width: 768px) {
  .stats-grid,
  .statistics-grid,
  .stat-cards,
  .numbers-grid,
  .winners-stats,
  .winners-stats-hall,
  .metrics-grid,
  .trust-grid,
  .support-stats,
  .hot-games-list,
  .providers-grid {
    grid-template-columns: 1fr;
  }
}


.stat-card,
.stat-box,
.stat-hall,
.trust-item,
.metric-card,
.support-stat,
.hot-game-item,
.provider-card {width: 100%;min-width: 0;box-sizing: border-box}


.stats-row,
.stat-list,
.card-row {flex-wrap: wrap;gap: 1rem;display: flex}
.stats-row > *,
.stat-list > *,
.card-row > * {flex: 1 1 200px;min-width: 0}






.sr-only {white-space: nowrap;padding: 0;width: 1px;margin: -1px;height: 1px;overflow: hidden;border: 0;clip: rect(0, 0, 0, 0);position: absolute}


*:focus {outline: 2px solid var(--accent-color);outline-offset: 2px}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {outline: 2px solid var(--accent-color);outline-offset: 2px}


.skip-link {padding: 8px;border-radius: 4px;z-index: 10000;top: -40px;left: 6px;background: var(--accent-color);text-decoration: none;position: absolute;color: var(--primary-bg)}

.skip-link:focus {
    top: 6px;
}


.loading {color: transparent;position: relative}

.loading::after {border: 2px solid var(--accent-color);width: 20px;position: absolute;border-radius: 50%;top: 50%;border-top-color: transparent;height: 20px;animation: spin 1s linear infinite;margin: -10px 0 0 -10px;left: 50%;content: ''}

@keyframes spin {
    to { transform: rotate(360deg); }
}


.error {border-color: var(--danger-color);color: var(--danger-color)}

.error-message {font-size: 0.875rem;margin-top: 0.5rem;color: var(--danger-color)}


.success {border-color: var(--success-color);color: var(--success-color)}

.success-message {margin-top: 0.5rem;color: var(--success-color);font-size: 0.875rem}


.warning {color: var(--warning-color);border-color: var(--warning-color)}

.warning-message {color: var(--warning-color);font-size: 0.875rem;margin-top: 0.5rem}


.form-group {
    margin-bottom: 1.5rem;
}

.form-label {font-weight: 600;display: block;margin-bottom: 0.5rem;color: var(--text-white)}

.form-input,
.form-textarea,
.form-select {padding: 0.75rem 1rem;border: 1px solid rgba(255, 255, 255, 0.2);background: var(--secondary-bg);font-size: 1rem;transition: var(--transition-fast);width: 100%;color: var(--text-white);border-radius: var(--radius-md)}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);border-color: var(--accent-color)}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

.form-checkbox,
.form-radio {margin-right: 0.5rem;width: auto}


.card {box-shadow: var(--shadow-md);border: 1px solid rgba(6, 182, 212, 0.1);background: var(--card-gradient);border-radius: var(--radius-lg);padding: 1.5rem;transition: var(--transition-normal)}

.card:hover {box-shadow: var(--shadow-lg);transform: translateY(-2px);border-color: rgba(6, 182, 212, 0.3)}

.card-header {padding-bottom: 1rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);margin-bottom: 1rem}

.card-title {margin-bottom: 0.5rem;color: var(--accent-color)}

.card-subtitle {font-size: 0.875rem;color: var(--text-gray)}

.card-body {
    margin-bottom: 1rem;
}

.card-footer {border-top: 1px solid rgba(255, 255, 255, 0.1);padding-top: 1rem;margin-top: 1rem}


.badge {display: inline-flex;align-items: center;font-weight: 600;font-size: 0.75rem;border-radius: var(--radius-full);text-transform: uppercase;letter-spacing: 0.05em;padding: 0.25rem 0.75rem}

.badge-primary {color: var(--primary-bg);background: var(--accent-color)}

.badge-success {background: var(--success-color);color: var(--text-white)}

.badge-warning {color: var(--primary-bg);background: var(--warning-color)}

.badge-danger {color: var(--text-white);background: var(--danger-color)}

.badge-outline {border: 1px solid currentColor;background: transparent}


.alert {margin-bottom: 1rem;padding: 1rem 1.5rem;border-left: 4px solid;border-radius: var(--radius-md)}

.alert-success {border-left-color: var(--success-color);background: rgba(0, 208, 132, 0.1);color: var(--success-color)}

.alert-warning {border-left-color: var(--warning-color);color: var(--warning-color);background: rgba(245, 158, 11, 0.1)}

.alert-danger {color: var(--danger-color);border-left-color: var(--danger-color);background: rgba(207, 46, 46, 0.1)}

.alert-info {color: var(--accent-color);border-left-color: var(--accent-color);background: rgba(6, 182, 212, 0.1)}


.modal-overlay {visibility: hidden;left: 0;backdrop-filter: blur(4px);z-index: 9999;position: fixed;background: rgba(0, 0, 0, 0.8);bottom: 0;align-items: center;justify-content: center;transition: var(--transition-normal);top: 0;opacity: 0;display: flex;right: 0}

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

.modal {overflow-y: auto;background: var(--secondary-bg);padding: 2rem;border-radius: var(--radius-xl);width: 90%;transition: var(--transition-normal);transform: scale(0.9);max-height: 90vh;box-shadow: var(--shadow-xl);max-width: 500px}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-header {margin-bottom: 1.5rem;align-items: center;justify-content: space-between;display: flex}

.modal-title {margin: 0;color: var(--accent-color)}

.modal-close {background: none;color: var(--text-gray);border: none;transition: var(--transition-fast);cursor: pointer;font-size: 1.5rem;border-radius: var(--radius-md);padding: 0.25rem}

.modal-close:hover {background: rgba(255, 255, 255, 0.1);color: var(--text-white)}


.tooltip {display: inline-block;position: relative}

.tooltip::before,
.tooltip::after {position: absolute;pointer-events: none;opacity: 0;transition: var(--transition-fast)}

.tooltip::before {left: 50%;bottom: 100%;margin-bottom: 5px;white-space: nowrap;transform: translateX(-50%);box-shadow: var(--shadow-lg);color: var(--text-white);font-size: 0.875rem;content: attr(data-tooltip);background: var(--secondary-bg);padding: 0.5rem 0.75rem;border-radius: var(--radius-md)}

.tooltip::after {border: 5px solid transparent;bottom: 100%;left: 50%;content: '';border-top-color: var(--secondary-bg);transform: translateX(-50%)}

.tooltip:hover::before,
.tooltip:hover::after {
    opacity: 1;
}


.dropdown {display: inline-block;position: relative}

.dropdown-toggle {color: var(--text-white);background: var(--secondary-bg);border: 1px solid rgba(255, 255, 255, 0.2);gap: 0.5rem;display: flex;padding: 0.75rem 1rem;transition: var(--transition-fast);align-items: center;cursor: pointer;border-radius: var(--radius-md)}

.dropdown-toggle:hover {
    border-color: var(--accent-color);
}

.dropdown-menu {visibility: hidden;right: 0;left: 0;transition: var(--transition-fast);margin-top: 5px;border: 1px solid rgba(255, 255, 255, 0.2);background: var(--secondary-bg);opacity: 0;z-index: 1000;border-radius: var(--radius-md);top: 100%;position: absolute;box-shadow: var(--shadow-lg);transform: translateY(-10px)}

.dropdown.active .dropdown-menu {transform: translateY(0);visibility: visible;opacity: 1}

.dropdown-item {display: block;padding: 0.75rem 1rem;color: var(--text-gray);transition: var(--transition-fast);border-bottom: 1px solid rgba(255, 255, 255, 0.1);text-decoration: none}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {color: var(--accent-color);background: rgba(6, 182, 212, 0.1)}


.tabs {
    margin-bottom: 2rem;
}

.tab-list {border-bottom: 2px solid rgba(255, 255, 255, 0.1);display: flex;margin-bottom: 1.5rem}

.tab-button {background: none;border: none;color: var(--text-gray);border-bottom: 2px solid transparent;transition: var(--transition-fast);font-weight: 600;padding: 1rem 1.5rem;cursor: pointer}

.tab-button:hover,
.tab-button.active {color: var(--accent-color);border-bottom-color: var(--accent-color)}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


.progress {background: rgba(255, 255, 255, 0.1);overflow: hidden;border-radius: var(--radius-full);height: 8px}

.progress-bar {border-radius: var(--radius-full);background: var(--primary-gradient);transition: width 0.3s ease;height: 100%}


.spinner {height: 40px;margin: 20px auto;border: 4px solid rgba(6, 182, 212, 0.3);animation: spin 1s linear infinite;width: 40px;border-radius: 50%;border-top: 4px solid var(--accent-color)}

.spinner-sm {border-width: 2px;width: 20px;height: 20px}

.spinner-lg {height: 60px;width: 60px;border-width: 6px}


.breadcrumb {margin-bottom: 1.5rem;gap: 0.5rem;display: flex;align-items: center;font-size: 0.875rem}

.breadcrumb-item {
    color: var(--text-gray);
}

.breadcrumb-item:not(:last-child)::after {margin-left: 0.5rem;color: var(--text-muted);content: '/'}

.breadcrumb-item.active {
    color: var(--accent-color);
}

.breadcrumb-link {transition: var(--transition-fast);color: var(--text-gray);text-decoration: none}

.breadcrumb-link:hover {
    color: var(--accent-color);
}


.pagination {align-items: center;margin: 2rem 0;justify-content: center;display: flex;gap: 0.5rem}

.pagination-item {height: 40px;text-decoration: none;justify-content: center;color: var(--text-gray);display: flex;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: var(--radius-md);transition: var(--transition-fast);align-items: center;width: 40px}

.pagination-item:hover,
.pagination-item.active {color: var(--primary-bg);background: var(--accent-color);border-color: var(--accent-color)}

.pagination-item.disabled {cursor: not-allowed;opacity: 0.5;pointer-events: none}


@media (max-width: 639px) {
    .hidden-mobile { display: none !important; }
    .visible-mobile { display: block !important; }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hidden-tablet { display: none !important; }
    .visible-tablet { display: block !important; }
}

@media (min-width: 1024px) {
    .hidden-desktop { display: none !important; }
    .visible-desktop { display: block !important; }
}


@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
}


:root {--card-gradient: linear-gradient(145deg, #ffffff 0%, #f6f9ff 100%);--shadow-vip: 0 0 16px rgba(59, 130, 246, 0.16);--text-gray: rgb(75,85,99);--shadow-glow: 0 0 24px rgba(59, 130, 246, 0.2);--primary-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);--shadow-accent: 0 8px 28px rgba(59, 130, 246, 0.25);--hero-gradient: linear-gradient(135deg, #f4f9ff 0%, #eaf3ff 100%);--shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08);--tertiary-bg: #eaf3ff;--text-white: rgb(31,41,55);--accent-color: #3b82f6;--shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);--secondary-bg: #ffffff;--accent-hover: #2563eb;--primary-bg: #f4f9ff;--accent-light: #93c5fd;--text-muted: #6b7280;--shadow-xl: 0 20px 35px -10px rgba(15, 23, 42, 0.12);--shadow-lg: 0 12px 20px -6px rgba(15, 23, 42, 0.1)}


.card,
.payment-method,
.vip-tier,
.modal,
.dropdown-menu {
    border-color: rgba(15, 23, 42, 0.12) !important;
}

.form-input,
.form-textarea,
.form-select,
.dropdown-toggle,
.pagination-item {
    border-color: rgba(15, 23, 42, 0.15) !important;
}

.card-header,
.card-footer,
.tab-list,
.dropdown-item {
    border-color: rgba(15, 23, 42, 0.1) !important;
}


.main-header {box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);border-bottom: 1px solid rgba(59, 130, 246, 0.18) !important;background: rgba(255, 255, 255, 0.94) !important}

.main-header.scrolled {background: rgba(255, 255, 255, 0.98) !important;box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1)}

.nav-groups {
    gap: 0.9rem !important;
}

.nav-group {border: 1px solid rgba(59, 130, 246, 0.14);border-radius: 12px;padding: 0.45rem 0.6rem 0.5rem;background: rgba(234, 243, 255, 0.78)}

.nav-group-label {
    color: #64748b !important;
}

.nav-group .nav-menu {
    gap: 0.35rem !important;
}

.nav-link {border: 1px solid transparent;color: rgba(51,65,85,1) !important;border-radius: 9px !important;font-weight: 600 !important;padding: 0.36rem 0.64rem !important}

.nav-link:hover,
.nav-link.active {background: rgb(255,255,255) !important;box-shadow: 0 4px 12px rgba(59, 130, 246, 0.16) !important;border-color: rgba(59, 130, 246, 0.25);color: rgba(29,78,216,1) !important}

.mobile-nav {border-top: 1px solid rgba(59, 130, 246, 0.2) !important;background: #ffffff !important}

.mobile-link {color: #334155 !important;border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important}

.mobile-link:hover,
.mobile-link.active {background: #eaf3ff !important;border-left: 3px solid #3b82f6 !important;color: #1d4ed8 !important}

.mobile-link.cta {
    color: #ffffff !important;
}









@media (min-width: 320px) {
    .container {
        padding: 0 0.75rem;
    }
    
    .hero-section {
        padding: 5rem 0 2rem;
    }
    
    .hero-title {line-height: 1.2;font-size: 1.75rem}
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn-hero {font-size: 1rem;padding: 1rem 1.5rem}
    
    .trust-indicators {grid-template-columns: 1fr;gap: 0.75rem}
    
    .trust-item {font-size: 0.75rem;padding: 0.5rem}
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .payment-methods,
    .vip-tiers {
        grid-template-columns: 1fr;
    }
    
    .games-features .feature-item {text-align: center;gap: 0.75rem;flex-direction: column}
    
    .security-features {
        grid-template-columns: 1fr;
    }
    
    .footer-content {text-align: center;grid-template-columns: 1fr}
}


@media (min-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    .trust-indicators {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trust-item {padding: 0.75rem;font-size: 0.875rem}
    
    .btn-hero {padding: 1.125rem 1.75rem;font-size: 1.125rem}
    
    .security-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .payment-method,
    .vip-tier {
        padding: 1.25rem;
    }
    
    .games-features .feature-item {flex-direction: row;gap: 1rem;text-align: left}
}


@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .hero-section {
        padding: 6rem 0 3rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
    }
    
    .trust-indicators {gap: 1rem;grid-template-columns: repeat(4, 1fr)}
    
    .trust-item {
        padding: 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .section-subtitle {
        font-size: 1.125rem;
    }
    
    .payment-methods {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .vip-tiers {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .security-features {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .footer-content {grid-template-columns: repeat(2, 1fr);text-align: left}
    
    .footer-bottom {flex-direction: row;text-align: left}
    
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .mobile-nav {
        display: none !important;
    }
    
    
    .header-actions {
        display: flex;
    }
}


@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
    
    .hero-section {
        padding: 7rem 0 4rem;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-content {grid-template-columns: 1fr;gap: 2rem;text-align: center}
    
    .section-content {
        gap: 3rem;
    }
    
    .payment-methods {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .vip-tiers {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .games-features {
        gap: 1.5rem;
    }
    
    .feature-image {margin: 0 auto;max-width: 500px}
}


@media (min-width: 1024px) {
    .container {padding: 0 2rem;max-width: 1000px}
    
    .hero-section {
        padding: 8rem 0 4rem;
    }
    
    .hero-title {font-size: 3.5rem;line-height: 1.1}
    
    .hero-content {gap: 4rem;text-align: left;align-items: center;grid-template-columns: 1fr 1fr}
    
    .hero-image {
        order: 2;
    }
    
    .hero-text {
        order: 1;
    }
    
    .section-content {align-items: center;grid-template-columns: 1fr 1fr;gap: 4rem}
    
    .section-content.reverse {
        direction: rtl;
    }
    
    .section-content.reverse > * {
        direction: ltr;
    }
    
    .feature-image {
        max-width: none;
    }
    
    
    .desktop-nav {
        display: block;
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .nav-menu {
        gap: 2rem;
    }
    
    .nav-link {
        padding: 0.75rem 1rem;
    }
    
    
    .card:hover {
        transform: translateY(-4px);
    }
    
    .btn:hover {
        transform: translateY(-2px);
    }
    
    .feature-image:hover {
        transform: scale(1.02);
    }
    
    .vip-tier:hover {
        transform: translateY(-4px);
    }
}


@media (min-width: 1200px) {
    .container {
        max-width: var(--container-max-width);
    }
    
    .hero-section {
        padding: 10rem 0 5rem;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .hero-subtitle {
        font-size: 1.375rem;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .section-subtitle {
        font-size: 1.25rem;
    }
    
    .hero-content,
    .section-content {
        gap: 5rem;
    }
    
    .nav-menu {
        gap: 2.5rem;
    }
    
    .payment-method,
    .vip-tier,
    .card {
        padding: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
}


@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-section {
        padding: 12rem 0 6rem;
    }
    
    .hero-content,
    .section-content {
        gap: 6rem;
    }
}


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .brand-logo img,
    .main-image,
    .feature-image {image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges}
}


@media (orientation: portrait) {
    .hero-content {text-align: center;grid-template-columns: 1fr}
    
    .section-content {text-align: center;grid-template-columns: 1fr}
    
    .section-content.reverse {
        direction: ltr;
    }
}


@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .hero-section {
        padding: 6rem 0 3rem;
    }
    
    .hero-content {text-align: left;grid-template-columns: 1fr 1fr;gap: 3rem}
    
    .section-content {gap: 3rem;grid-template-columns: 1fr 1fr}
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {animation-iteration-count: 1 !important;scroll-behavior: auto !important;transition-duration: 0.01ms !important;animation-duration: 0.01ms !important}
    
    .hero-section::before {
        animation: none;
    }
    
    .animate-fade-in-up,
    .animate-pulse {
        animation: none;
    }
}


@media (prefers-contrast: high) {
    :root {--secondary-bg: #1a1a1a;--accent-color: #06b6d4;--text-gray: #cccccc;--primary-bg: rgb(0,0,0);--text-white: rgba(255,255,255,1)}
    
    .btn-primary,
    .btn-hero,
    .btn-hero-large {color: var(--primary-bg);background: var(--accent-color)}
    
    .card,
    .payment-method,
    .vip-tier {
        border: 2px solid var(--accent-color);
    }
}


@media (prefers-color-scheme: dark) {
    
    
    .modal {background: var(--primary-bg);border: 1px solid rgba(6, 182, 212, 0.2)}
    
    .form-input,
    .form-textarea,
    .form-select {border-color: rgba(6, 182, 212, 0.3);background: var(--primary-bg)}
}


@media print {
    .hero-section {padding: 2rem 0;background: none !important}
    
    .hero-section::before {
        display: none;
    }
    
    .container {max-width: none;padding: 0}
    
    .hero-content,
    .section-content {grid-template-columns: 1fr;gap: 1rem}
    
    .btn,
    .header-actions,
    .mobile-menu-toggle,
    .trust-indicators,
    .final-cta-section,
    .social-links {
        display: none !important;
    }
    
    .hero-title,
    .section-title {color: #000 !important;-webkit-text-fill-color: initial !important;background: none !important}
    
    .main-image,
    .feature-image {max-width: 300px;display: block;margin: 1rem auto}
    
    .payment-methods,
    .vip-tiers,
    .games-features {gap: 1rem;grid-template-columns: 1fr}
    
    .trust-grid {
        display: none;
    }
}




@media (max-width: 375px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    .btn-hero {padding: 0.875rem 1.25rem;font-size: 0.875rem}
    
    .trust-item {padding: 0.5rem;font-size: 0.75rem}
    
    .trust-indicators {
        grid-template-columns: 1fr;
    }
}


@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 95%;
    }
    
    .hero-content {
        gap: 2.5rem;
    }
    
    .section-content {
        gap: 2.5rem;
    }
}


@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .hero-title {
        font-size: 5rem;
    }
    
    .section-title {
        font-size: 3rem;
    }
}


.nav-group-more { position: relative; }
.nav-group-more .nav-group-label { display: none; }
.nav-more-toggle {align-items: center;padding: .36rem .5rem;font-size: .88rem;cursor: pointer;background: transparent;gap: .35rem;font-weight: 600;border: none;color: #334155;display: inline-flex;transition: var(--transition-fast);border-radius: 999px}
.nav-more-toggle:hover {color: #1d4ed8;background: rgba(59,130,246,.1)}
.nav-direct-link { text-decoration: none; }
.nav-more-menu {width: 190px;list-style: none;position: absolute;background: #fff;border-radius: var(--radius-md);top: calc(100% + 10px);box-shadow: 0 12px 24px rgba(15,23,42,.12);margin: 0;border: 1px solid rgba(15,23,42,.12);display: none;padding: .4rem;z-index: 1200;right: 0}
.nav-group-more.open .nav-more-menu { display: block; }
.nav-more-menu .nav-link {border-radius: 8px;padding: .42rem .52rem;font-size: .84rem;display: block}
.mobile-submenu, .mobile-subgroup-links {list-style: none;padding: 0;display: none;margin: 0}
.mobile-submenu.open, .mobile-subgroup-links.open { display: block; }
.mobile-group-toggle, .mobile-subgroup-toggle {font-weight: 600;cursor: pointer;justify-content: space-between;align-items: center;background: transparent;padding: .75rem 1.5rem;border: none;color: var(--text-gray);display: flex;width: 100%;font-size: .9rem}
.mobile-submenu {background: rgba(59,130,246,.05);padding: .3rem 0 .6rem}
.mobile-subgroup-toggle {font-weight: 700;padding: .58rem 1.85rem;font-size: .82rem;color: rgba(30,58,138,1)}
.mobile-subgroup-links .mobile-link {padding-left: 2.6rem;font-size: .84rem}
@media (max-width: 1023px) {
    .mobile-nav.active {overscroll-behavior: contain;-webkit-overflow-scrolling: touch;max-height: calc(100vh - 74px) !important;overflow-y: auto !important}
    .mobile-menu { padding-bottom: 1rem; }
}





        body[data-page="home"] 
        .nav-group-more{
            position: relative;
        }

        body[data-page="home"] .nav-group-more .nav-group-label{
            display: none;
        }

        body[data-page="home"] .nav-more-toggle{background: transparent;cursor: pointer;color: rgb(51,65,85);border: none;align-items: center;display: inline-flex;font-size: 0.88rem;padding: 0.36rem 0.5rem;font-weight: 600;border-radius: 999px;gap: 0.35rem;transition: var(--transition-fast)}

        body[data-page="home"] .nav-more-toggle:hover{background: rgba(59, 130, 246, 0.1);color: #1d4ed8}

        body[data-page="home"] .nav-direct-link{
            text-decoration: none;
        }

        body[data-page="home"] .nav-more-menu{padding: 0.4rem;width: 190px;top: calc(100% + 10px);border-radius: var(--radius-md);position: absolute;z-index: 1200;box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);display: none;background: #ffffff;right: 0;margin: 0;border: 1px solid rgba(15, 23, 42, 0.12)}

        body[data-page="home"] .nav-group-more.open .nav-more-menu{
            display: block;
        }

        body[data-page="home"] .mobile-submenu,
body[data-page="home"] .mobile-subgroup-links{display: none;margin: 0;padding: 0;list-style: none}

        body[data-page="home"] .mobile-submenu.open,
body[data-page="home"] .mobile-subgroup-links.open{
            display: block;
        }

        body[data-page="home"] .nav-more-menu .nav-link{font-size: 0.84rem;display: block;padding: 0.42rem 0.52rem;border-radius: 8px}

        body[data-page="home"] .mobile-group-toggle,
body[data-page="home"] .mobile-subgroup-toggle{padding: 0.75rem 1.5rem;font-weight: 600;align-items: center;width: 100%;cursor: pointer;background: transparent;display: flex;font-size: 0.9rem;color: var(--text-gray);justify-content: space-between;border: none}

        body[data-page="home"] .mobile-submenu{padding: 0.3rem 0 0.6rem;background: rgba(59, 130, 246, 0.05)}

        body[data-page="home"] .mobile-subgroup-toggle{font-weight: 700;color: #1e3a8a;font-size: 0.82rem;padding: 0.58rem 1.85rem}

        body[data-page="home"] .mobile-subgroup-links .mobile-link{font-size: 0.84rem;padding-left: 2.6rem}

        body[data-page="home"] 
        @media (max-width: 1023px){
            .mobile-nav.active {max-height: calc(100vh - 74px) !important;overscroll-behavior: contain;overflow-y: auto !important;-webkit-overflow-scrolling: touch}

            .mobile-menu {
                padding-bottom: 1rem;
            }
        }

        body[data-page="home"] 
        .game-types-section{
            padding: 4rem 0;
        }

        body[data-page="home"] .game-types-grid{grid-template-columns: repeat(5, minmax(0, 1fr));display: grid;margin-top: 2rem;gap: 1rem}

        body[data-page="home"] .game-type-card{text-align: center;box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);background: #ffffff;transition: var(--transition-fast);border: 1px solid rgba(59, 130, 246, 0.15);padding: 1.25rem 1rem;border-radius: 16px}

        body[data-page="home"] .game-type-card:hover{box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);border-color: rgba(59, 130, 246, 0.32);transform: translateY(-2px)}

        body[data-page="home"] .game-type-icon{line-height: 1;margin-bottom: 0.55rem;font-size: 2rem}

        body[data-page="home"] .game-type-title{font-size: 1.15rem;color: rgba(15,23,42,1);margin-bottom: 0.45rem}

        body[data-page="home"] .game-type-text{min-height: 72px;color: #475569;margin-bottom: 0.7rem;font-size: 0.95rem}

        body[data-page="home"] .game-type-link{text-decoration: none;color: #2563eb;font-weight: 700}

        body[data-page="home"] .game-type-link:hover{
            color: #1d4ed8;
        }

        @media (max-width: 1199px) {
            body[data-page="home"] .game-types-grid{
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 767px) {
            body[data-page="home"] .game-types-grid{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 480px) {
            body[data-page="home"] .game-types-grid{
                grid-template-columns: 1fr;
            }
        }

        body[data-page="home"] 
        .popular-games-section{
            padding: 2rem 0 4rem;
        }

        body[data-page="home"] .popular-games-grid{grid-template-columns: repeat(4, minmax(0, 1fr));gap: 1rem;margin-top: 1.5rem;display: grid}

        body[data-page="home"] .popular-game-card{border: 1px solid rgba(59, 130, 246, 0.2);box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);background: rgb(255,255,255);padding: 1.2rem 1rem;border-radius: 14px}

        body[data-page="home"] .popular-game-title{color: rgba(15,23,42,1);font-size: 1.28rem;margin-bottom: 0.6rem}

        body[data-page="home"] .popular-game-text{color: #475569;margin-bottom: 0.8rem;min-height: 146px;font-size: 0.97rem}

        body[data-page="home"] .popular-game-link{color: #2563eb;font-weight: 700;text-decoration: none}

        body[data-page="home"] .popular-game-link:hover{
            color: #1d4ed8;
        }

        @media (max-width: 1199px) {
            body[data-page="home"] .popular-games-grid{
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 767px) {
            body[data-page="home"] .popular-games-grid{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
            body[data-page="home"] .popular-game-text{
                min-height: 0;
            }
        }

        @media (max-width: 480px) {
            body[data-page="home"] .popular-games-grid{
                grid-template-columns: 1fr;
            }
        }



        body[data-page="apk"] .apk-hero-layout{display: grid;grid-template-columns: 1.2fr 0.8fr;align-items: center;gap: 1rem}
        body[data-page="apk"] .apk-main-image{box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);object-fit: cover;width: 100%;max-width: 520px;aspect-ratio: 1 / 1;justify-self: center;border-radius: 16px;border: 1px solid rgba(59, 130, 246, 0.24)}
        body[data-page="apk"] .apk-badges{margin-top: 1rem;display: flex;flex-wrap: wrap;gap: 0.55rem}
        body[data-page="apk"] .apk-badge{border: 1px solid rgba(59, 130, 246, 0.24);background: rgba(255, 255, 255, 0.9);font-size: 0.84rem;color: #1e3a8a;border-radius: 999px;padding: 0.34rem 0.72rem;font-weight: 700}

        body[data-page="apk"] .apk-download-panel{grid-template-columns: 1fr 1fr;background: #fff;display: grid;padding: 1rem;border: 1px solid rgba(59, 130, 246, 0.2);margin-top: 1.2rem;border-radius: 14px;gap: 1rem}
        body[data-page="apk"] .apk-panel-box h4{color: rgb(15,23,42);margin-bottom: 0.4rem}
        body[data-page="apk"] .apk-panel-box ul{color: #475569;margin: 0;line-height: 1.6;padding-left: 1rem;font-size: 0.92rem}

        body[data-page="apk"] .apk-steps-grid{grid-template-columns: repeat(4, minmax(0, 1fr));display: grid;gap: 0.8rem;margin-top: 1.2rem}
        body[data-page="apk"] .apk-step-card{padding: 0.95rem;background: #fff;border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 12px}
        body[data-page="apk"] .apk-step-no{display: grid;border-radius: 50%;font-size: 0.8rem;height: 28px;color: #fff;width: 28px;font-weight: 700;place-items: center;background: #3b82f6;margin-bottom: 0.45rem}
        body[data-page="apk"] .apk-step-card h4{margin-bottom: 0.35rem;color: #0f172a}
        body[data-page="apk"] .apk-step-card p{color: #475569;font-size: 0.9rem;margin: 0}

        body[data-page="apk"] .apk-secondary-media{display: grid;align-items: center;margin-top: 1.3rem;gap: 1rem;grid-template-columns: 0.9fr 1.1fr}
        body[data-page="apk"] .apk-secondary-image{border-radius: 14px;border: 1px solid rgba(59, 130, 246, 0.2);aspect-ratio: 1 / 1;width: 100%;object-fit: cover}
        body[data-page="apk"] .apk-secondary-copy h4{font-size: 1.3rem;color: #0f172a;line-height: 1.45;margin-bottom: 0.7rem}
        body[data-page="apk"] .apk-secondary-copy p{line-height: 1.86;color: rgba(71,85,105,1);margin: 0 0 0.85rem;font-size: 1.04rem}
        body[data-page="apk"] .apk-keyword-list{color: rgba(51,65,85,1);line-height: 1.9;padding-left: 1.2rem;font-size: 1rem;margin: 0.8rem 0 0}
        body[data-page="apk"] .apk-keyword-list strong{
            color: #1d4ed8;
        }

        body[data-page="apk"] .apk-permissions-grid{gap: 0.8rem;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));margin-top: 1.2rem}
        body[data-page="apk"] .apk-permission-card{border: 1px solid rgba(59, 130, 246, 0.16);background: #fff;padding: 0.9rem 1rem;border-radius: 12px}
        body[data-page="apk"] .apk-permission-card h4{margin-bottom: 0.35rem;font-size: 1rem;color: rgba(15,23,42,1)}
        body[data-page="apk"] .apk-permission-card p{font-size: 0.9rem;margin: 0;color: rgb(71,85,105)}
        body[data-page="apk"] .apk-compat-grid{display: grid;gap: 0.8rem;grid-template-columns: repeat(3, minmax(0, 1fr));margin-top: 1.2rem}
        body[data-page="apk"] .apk-compat-card{background: #fff;border: 1px solid rgba(59, 130, 246, 0.16);padding: 0.9rem 1rem;border-radius: 12px}
        body[data-page="apk"] .apk-compat-card h4{font-size: 1rem;margin-bottom: 0.35rem;color: #0f172a}
        body[data-page="apk"] .apk-compat-card p{line-height: 1.65;color: rgba(71,85,105,1);font-size: 0.9rem;margin: 0}
        body[data-page="apk"] .apk-performance-tips{margin-top: 1rem;border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 12px;background: rgba(255, 255, 255, 0.9);padding: 0.9rem 1rem}
        body[data-page="apk"] .apk-performance-tips h4{color: rgb(15,23,42);margin-bottom: 0.45rem}
        body[data-page="apk"] .apk-performance-tips ul{color: #475569;margin: 0;padding-left: 1rem;line-height: 1.7;font-size: 0.92rem}

        body[data-page="apk"] .apk-troubleshoot-table{border: 1px solid rgba(59, 130, 246, 0.18);background: #fff;overflow: hidden;margin-top: 1.2rem;border-radius: 12px}
        body[data-page="apk"] .apk-row{display: grid;border-bottom: 1px solid rgba(15, 23, 42, 0.08);padding: 0.75rem 1rem;grid-template-columns: 1fr 1fr 1.7fr;gap: 0.8rem}
        body[data-page="apk"] .apk-row:last-child{ border-bottom: none; }
        body[data-page="apk"] .apk-row strong{ color: #0f172a; }
        body[data-page="apk"] .apk-row span{font-size: 0.92rem;color: #475569}

        body[data-page="apk"] .apk-changelog-grid{grid-template-columns: 1fr 1fr;display: grid;margin-top: 1.2rem;gap: 0.8rem}
        body[data-page="apk"] .apk-changelog-card{background: #fff;border: 1px solid rgba(59, 130, 246, 0.16);padding: 0.9rem 1rem;border-radius: 12px}
        body[data-page="apk"] .apk-changelog-card h4{color: #0f172a;margin-bottom: 0.35rem}
        body[data-page="apk"] .apk-changelog-card ul{color: #475569;padding-left: 1rem;font-size: 0.9rem;margin: 0;line-height: 1.55}

        body[data-page="apk"] .apk-faq-grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.8rem;margin-top: 1.2rem}
        body[data-page="apk"] .apk-faq-card{background: rgba(255,255,255,1);border: 1px solid rgba(59, 130, 246, 0.16);padding: 0.9rem 1rem;border-radius: 12px}
        body[data-page="apk"] .apk-faq-card h4{color: #0f172a;margin-bottom: 0.35rem}
        body[data-page="apk"] .apk-faq-card p{font-size: 0.92rem;margin: 0;color: #475569}

        @media (max-width: 1023px) {
            body[data-page="apk"] .apk-hero-layout{ grid-template-columns: 1fr; }
            body[data-page="apk"] .apk-download-panel{ grid-template-columns: 1fr; }
            body[data-page="apk"] .apk-steps-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
            body[data-page="apk"] .apk-secondary-media{ grid-template-columns: 1fr; }
            body[data-page="apk"] .apk-permissions-grid{ grid-template-columns: 1fr; }
            body[data-page="apk"] .apk-compat-grid{ grid-template-columns: 1fr; }
            body[data-page="apk"] .apk-row{gap: 0.25rem;grid-template-columns: 1fr}
            body[data-page="apk"] .apk-changelog-grid{ grid-template-columns: 1fr; }
            body[data-page="apk"] .apk-faq-grid{ grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            body[data-page="apk"] .apk-steps-grid{ grid-template-columns: 1fr; }
        }



        body[data-page="baixar"] .baixar-hero-layout{grid-template-columns: 1.15fr 0.85fr;align-items: center;display: grid;gap: 1rem}
        body[data-page="baixar"] .baixar-main-image{justify-self: center;max-width: 520px;border-radius: 16px;aspect-ratio: 1 / 1;width: 100%;box-shadow: 0 14px 30px rgba(15,23,42,.12);object-fit: cover;border: 1px solid rgba(59,130,246,.24)}
        body[data-page="baixar"] .baixar-alert{background: rgba(255,255,255,.9);font-weight: 600;color: #1e3a8a;padding: .85rem 1rem;border: 1px solid rgba(59,130,246,.22);border-radius: 12px;margin-top: 1rem}

        body[data-page="baixar"] .baixar-route-grid{grid-template-columns: repeat(3, minmax(0,1fr));margin-top: 1.2rem;gap: .85rem;display: grid}
        body[data-page="baixar"] .baixar-route-card{border: 1px solid rgba(59,130,246,.18);border-radius: 12px;background: rgb(255,255,255);padding: 1rem}
        body[data-page="baixar"] .baixar-route-card h4{color: #0f172a;margin-bottom: .35rem}
        body[data-page="baixar"] .baixar-route-card p{color: #475569;margin: 0 0 .7rem;font-size: .92rem}

        body[data-page="baixar"] .baixar-steps-timeline{gap: .65rem;margin-top: 1.25rem;display: grid}
        body[data-page="baixar"] .baixar-step-row{border: 1px solid rgba(59,130,246,.16);padding: .8rem;gap: .75rem;grid-template-columns: 48px 1fr;display: grid;background: #fff;border-radius: 12px}
        body[data-page="baixar"] .baixar-step-no{border-radius: 50%;display: grid;width: 36px;background: #3b82f6;margin-top: 2px;font-weight: 700;color: #fff;height: 36px;place-items: center}
        body[data-page="baixar"] .baixar-step-row h4{margin-bottom: .3rem;color: rgb(15,23,42)}
        body[data-page="baixar"] .baixar-step-row p{margin: 0;font-size: .92rem;color: #475569}

        body[data-page="baixar"] .baixar-secondary-media{gap: 1rem;align-items: center;grid-template-columns: .9fr 1.1fr;display: grid;margin-top: 1.2rem}
        body[data-page="baixar"] .baixar-secondary-image{border-radius: 14px;width: 100%;aspect-ratio: 1 / 1;object-fit: cover;border: 1px solid rgba(59,130,246,.2)}
        body[data-page="baixar"] .baixar-secondary-copy h4{color: #0f172a;margin-bottom: .35rem}
        body[data-page="baixar"] .baixar-secondary-copy p{color: #475569;line-height: 1.62;font-size: .93rem;margin: 0}
        body[data-page="baixar"] .baixar-mini-cards{gap: .55rem;display: grid;grid-template-columns: repeat(3, minmax(0,1fr));margin-top: .8rem}
        body[data-page="baixar"] .baixar-mini-card{border: 1px solid rgba(59,130,246,.16);padding: .62rem .68rem;border-radius: 10px;background: #fff}
        body[data-page="baixar"] .baixar-mini-card h5{margin-bottom: .28rem;line-height: 1.35;color: rgb(15,23,42);font-size: .88rem}
        body[data-page="baixar"] .baixar-mini-card p{font-size: .82rem;color: #64748b;line-height: 1.5;margin: 0}
        body[data-page="baixar"] .baixar-inline-note{line-height: 1.68;margin-top: .75rem;color: #475569;font-size: .92rem}
        body[data-page="baixar"] .baixar-tag-row{margin-top: .75rem;gap: .45rem;flex-wrap: wrap;display: flex}
        body[data-page="baixar"] .baixar-tag{color: #1e3a8a;border: 1px solid rgba(59,130,246,.2);font-weight: 600;align-items: center;display: inline-flex;padding: .3rem .62rem;background: rgba(255,255,255,.92);gap: .28rem;border-radius: 999px;font-size: .82rem}

        body[data-page="baixar"] .baixar-mistakes-grid{grid-template-columns: repeat(3, minmax(0,1fr));display: grid;gap: .8rem;margin-top: 1.2rem}
        body[data-page="baixar"] .baixar-mistake-card{border: 1px solid rgba(59,130,246,.16);border-radius: 12px;background: #fff;padding: .9rem 1rem}
        body[data-page="baixar"] .baixar-mistake-card h4{color: #0f172a;margin-bottom: .3rem}
        body[data-page="baixar"] .baixar-mistake-card p{color: #475569;font-size: .9rem;margin: 0}

        body[data-page="baixar"] .baixar-qc-list{background: #fff;border: 1px solid rgba(59,130,246,.18);margin-top: 1.2rem;border-radius: 12px;padding: 1rem}
        body[data-page="baixar"] .baixar-qc-list ul{padding-left: 1rem;color: rgba(71,85,105,1);margin: 0;line-height: 1.65}
        body[data-page="baixar"] .baixar-keywords-grid{grid-template-columns: repeat(3, minmax(0,1fr));display: grid;gap: .8rem;margin-top: 1.2rem}
        body[data-page="baixar"] .baixar-keyword-card{border: 1px solid rgba(59,130,246,.16);border-radius: 12px;background: rgb(255,255,255);padding: .9rem 1rem}
        body[data-page="baixar"] .baixar-keyword-card h4{margin-bottom: .35rem;font-size: 1rem;color: #0f172a}
        body[data-page="baixar"] .baixar-keyword-card p{line-height: 1.68;margin: 0;color: #475569;font-size: .92rem}
        body[data-page="baixar"] .baixar-action-strip{margin-top: 1rem;background: rgba(255,255,255,.92);padding: .9rem 1rem;border: 1px solid rgba(59,130,246,.18);border-radius: 12px}
        body[data-page="baixar"] .baixar-action-strip h4{margin-bottom: .45rem;color: #0f172a}
        body[data-page="baixar"] .baixar-action-strip ul{line-height: 1.72;font-size: .93rem;padding-left: 1rem;color: #475569;margin: 0}

        body[data-page="baixar"] .baixar-faq-grid{gap: .8rem;display: grid;margin-top: 1.2rem;grid-template-columns: repeat(2, minmax(0,1fr))}
        body[data-page="baixar"] .baixar-faq-card{padding: .9rem 1rem;border: 1px solid rgba(59,130,246,.16);background: #fff;border-radius: 12px}
        body[data-page="baixar"] .baixar-faq-card h4{color: #0f172a;margin-bottom: .35rem}
        body[data-page="baixar"] .baixar-faq-card p{font-size: .92rem;color: rgba(71,85,105,1);margin: 0}

        @media (max-width: 1023px) {
            body[data-page="baixar"] .baixar-hero-layout{ grid-template-columns: 1fr; }
            body[data-page="baixar"] .baixar-route-grid{ grid-template-columns: 1fr; }
            body[data-page="baixar"] .baixar-secondary-media{ grid-template-columns: 1fr; }
            body[data-page="baixar"] .baixar-mini-cards{ grid-template-columns: 1fr; }
            body[data-page="baixar"] .baixar-mistakes-grid{ grid-template-columns: 1fr; }
            body[data-page="baixar"] .baixar-keywords-grid{ grid-template-columns: 1fr; }
            body[data-page="baixar"] .baixar-faq-grid{ grid-template-columns: 1fr; }
        }



        body[data-page="download"] .download-hero-layout{gap: 1rem;grid-template-columns: 1.15fr 0.85fr;display: grid;align-items: center}
        body[data-page="download"] .download-main-image{width: 100%;border-radius: 16px;justify-self: center;aspect-ratio: 1 / 1;object-fit: cover;max-width: 520px;border: 1px solid rgba(59, 130, 246, 0.24);box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12)}
        body[data-page="download"] .download-tags{flex-wrap: wrap;gap: 0.55rem;display: flex;margin-top: 1rem}
        body[data-page="download"] .download-tag{border: 1px solid rgba(59, 130, 246, 0.24);padding: 0.34rem 0.72rem;color: rgba(30,58,138,1);background: rgba(255, 255, 255, 0.9);font-weight: 700;font-size: 0.84rem;border-radius: 999px}

        body[data-page="download"] .download-options-grid{gap: 0.9rem;grid-template-columns: repeat(3, minmax(0, 1fr));display: grid;margin-top: 1.2rem}
        body[data-page="download"] .download-option-card{border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 14px;padding: 1rem;background: #fff}
        body[data-page="download"] .download-option-card h4{margin-bottom: 0.35rem;color: rgba(15,23,42,1)}
        body[data-page="download"] .download-option-meta{color: rgb(37,99,235);font-size: 0.85rem;font-weight: 700;margin-bottom: 0.45rem}
        body[data-page="download"] .download-option-card p{margin: 0 0 0.7rem;color: rgba(71,85,105,1);font-size: 0.92rem}

        body[data-page="download"] .download-compare-table{background: #fff;border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 12px;overflow: hidden;margin-top: 1.3rem}
        body[data-page="download"] .download-row{border-bottom: 1px solid rgba(15, 23, 42, 0.08);padding: 0.75rem 1rem;grid-template-columns: 1fr 1fr 1fr 1.5fr;display: grid;gap: 0.8rem}
        body[data-page="download"] .download-row:last-child{ border-bottom: none; }
        body[data-page="download"] .download-row strong{ color: #0f172a; }
        body[data-page="download"] .download-row span{color: rgb(71,85,105);font-size: 0.92rem}

        body[data-page="download"] .download-secondary-media{align-items: center;display: grid;gap: 1rem;grid-template-columns: 0.9fr 1.1fr;margin-top: 1.3rem}
        body[data-page="download"] .download-secondary-image{border-radius: 14px;aspect-ratio: 1 / 1;width: 100%;object-fit: cover;border: 1px solid rgba(59, 130, 246, 0.2)}
        body[data-page="download"] .download-secondary-copy h4{color: rgba(15,23,42,1);margin-bottom: 0.4rem}
        body[data-page="download"] .download-secondary-copy p{margin: 0;color: #475569;font-size: 0.93rem;line-height: 1.62}
        body[data-page="download"] .download-visual-points{font-size: 0.92rem;padding-left: 1rem;line-height: 1.72;color: #334155;margin: 0.75rem 0 0}
        body[data-page="download"] .download-visual-points strong{
            color: rgba(29,78,216,1);
        }

        body[data-page="download"] .download-scenes-grid{margin-top: 1.2rem;display: grid;gap: 0.8rem;grid-template-columns: repeat(3, minmax(0, 1fr))}
        body[data-page="download"] .download-scene-card{border: 1px solid rgba(59, 130, 246, 0.16);background: #fff;padding: 0.9rem 1rem;border-radius: 12px}
        body[data-page="download"] .download-scene-card h4{margin-bottom: 0.35rem;color: #0f172a}
        body[data-page="download"] .download-scene-card p{font-size: 0.91rem;margin: 0;color: #475569}

        body[data-page="download"] .download-checklist{border: 1px solid rgba(59, 130, 246, 0.18);padding: 1rem;background: #fff;border-radius: 12px;margin-top: 1.2rem}
        body[data-page="download"] .download-checklist ul{color: #475569;line-height: 1.65;margin: 0;padding-left: 1rem}

        body[data-page="download"] .download-faq-grid{margin-top: 1.2rem;grid-template-columns: repeat(2, minmax(0, 1fr));display: grid;gap: 0.8rem}
        body[data-page="download"] .download-faq-card{border: 1px solid rgba(59, 130, 246, 0.16);background: #fff;padding: 0.9rem 1rem;border-radius: 12px}
        body[data-page="download"] .download-faq-card h4{margin-bottom: 0.35rem;color: rgb(15,23,42)}
        body[data-page="download"] .download-faq-card p{color: #475569;margin: 0;font-size: 0.92rem}

        @media (max-width: 1023px) {
            body[data-page="download"] .download-hero-layout{ grid-template-columns: 1fr; }
            body[data-page="download"] .download-options-grid{ grid-template-columns: 1fr; }
            body[data-page="download"] .download-row{gap: 0.25rem;grid-template-columns: 1fr}
            body[data-page="download"] .download-secondary-media{ grid-template-columns: 1fr; }
            body[data-page="download"] .download-scenes-grid{ grid-template-columns: 1fr; }
            body[data-page="download"] .download-faq-grid{ grid-template-columns: 1fr; }
        }



        body[data-page="facebook"] .fb-hero-layout{gap: 1.1rem;align-items: center;display: grid;grid-template-columns: 1.15fr 0.85fr}
        body[data-page="facebook"] .fb-main-image{aspect-ratio: 1 / 1;border-radius: 16px;max-width: 520px;width: 100%;box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);justify-self: center;border: 1px solid rgba(59, 130, 246, 0.24);object-fit: cover}
        body[data-page="facebook"] .fb-pill-row{gap: 0.55rem;flex-wrap: wrap;display: flex;margin-top: 1rem}
        body[data-page="facebook"] .fb-pill{font-size: 0.84rem;border: 1px solid rgba(59, 130, 246, 0.24);padding: 0.34rem 0.72rem;border-radius: 999px;background: rgba(255, 255, 255, 0.9);font-weight: 700;color: rgba(30,58,138,1)}

        body[data-page="facebook"] .fb-content-columns{gap: 1rem;grid-template-columns: 1fr 1fr;margin-top: 1.2rem;display: grid}
        body[data-page="facebook"] .fb-content-card{background: #fff;border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 14px;padding: 1rem}
        body[data-page="facebook"] .fb-content-card h4{margin-bottom: 0.4rem;color: #0f172a}
        body[data-page="facebook"] .fb-content-card p{color: #475569;margin: 0;line-height: 1.6;font-size: 0.93rem}

        body[data-page="facebook"] .fb-secondary-media{gap: 1rem;grid-template-columns: 0.9fr 1.1fr;align-items: center;margin-top: 1.3rem;display: grid}
        body[data-page="facebook"] .fb-secondary-image{object-fit: cover;aspect-ratio: 1 / 1;border-radius: 14px;border: 1px solid rgba(59, 130, 246, 0.2);width: 100%}
        body[data-page="facebook"] .fb-secondary-copy h4{margin-bottom: 0.4rem;color: rgb(15,23,42)}
        body[data-page="facebook"] .fb-secondary-copy p{line-height: 1.74;color: #475569;margin: 0 0 0.7rem;font-size: 0.97rem}
        body[data-page="facebook"] .fb-secondary-points{padding-left: 1rem;line-height: 1.72;font-size: 0.93rem;margin: 0.75rem 0 0;color: #334155}
        body[data-page="facebook"] .fb-secondary-points strong{
            color: #1d4ed8;
        }
        body[data-page="facebook"] .fb-secondary-tags{display: flex;flex-wrap: wrap;gap: 0.45rem;margin-top: 0.8rem}
        body[data-page="facebook"] .fb-secondary-tag{border: 1px solid rgba(59, 130, 246, 0.2);gap: 0.25rem;font-size: 0.82rem;padding: 0.3rem 0.65rem;align-items: center;font-weight: 600;display: inline-flex;background: rgba(255, 255, 255, 0.92);color: #1e3a8a;border-radius: 999px}

        body[data-page="facebook"] .fb-reviews-grid{margin-top: 1.2rem;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 0.85rem}
        body[data-page="facebook"] .fb-review-card{border: 1px solid rgba(59, 130, 246, 0.16);background: #fff;border-radius: 12px;padding: 0.9rem 1rem}
        body[data-page="facebook"] .fb-review-head{display: flex;margin-bottom: 0.35rem;align-items: center;justify-content: space-between}
        body[data-page="facebook"] .fb-review-name{font-size: 0.9rem;font-weight: 700;color: #0f172a}
        body[data-page="facebook"] .fb-review-stars{color: #2563eb;font-weight: 700;font-size: 0.84rem}
        body[data-page="facebook"] .fb-review-card p{margin: 0;color: #475569;font-size: 0.9rem}

        body[data-page="facebook"] .fb-moderation-box{margin-top: 1.2rem;background: #fff;border: 1px solid rgba(59, 130, 246, 0.2);border-radius: 14px;padding: 1rem}
        body[data-page="facebook"] .fb-moderation-box ul{margin: 0;color: rgba(71,85,105,1);padding-left: 1rem;line-height: 1.65}

        body[data-page="facebook"] .fb-calendar-table{border: 1px solid rgba(59, 130, 246, 0.18);overflow: hidden;margin-top: 1.2rem;background: rgb(255,255,255);border-radius: 12px}
        body[data-page="facebook"] .fb-calendar-row{gap: 0.8rem;padding: 0.8rem 1rem;grid-template-columns: 1fr 1.2fr 2fr;border-bottom: 1px solid rgba(15, 23, 42, 0.08);display: grid}
        body[data-page="facebook"] .fb-calendar-row:last-child{ border-bottom: none; }
        body[data-page="facebook"] .fb-calendar-row strong{ color: #0f172a; }
        body[data-page="facebook"] .fb-calendar-row span{font-size: 0.92rem;color: #475569}

        body[data-page="facebook"] .fb-stats-grid{display: grid;gap: 0.8rem;margin-top: 1.2rem;grid-template-columns: repeat(4, minmax(0, 1fr))}
        body[data-page="facebook"] .fb-stat-card{background: rgb(255,255,255);border: 1px solid rgba(59, 130, 246, 0.16);border-radius: 12px;padding: 0.95rem;text-align: center}
        body[data-page="facebook"] .fb-stat-value{font-size: 1.35rem;font-weight: 800;color: #2563eb;display: block;margin-bottom: 0.3rem}
        body[data-page="facebook"] .fb-stat-label{color: #475569;font-size: 0.88rem}

        body[data-page="facebook"] .fb-partnership-grid{gap: 0.8rem;display: grid;margin-top: 1.2rem;grid-template-columns: repeat(3, minmax(0, 1fr))}
        body[data-page="facebook"] .fb-partnership-card{border: 1px solid rgba(59, 130, 246, 0.16);background: #fff;padding: 0.9rem 1rem;border-radius: 12px}
        body[data-page="facebook"] .fb-partnership-card h4{margin-bottom: 0.35rem;color: rgb(15,23,42)}
        body[data-page="facebook"] .fb-partnership-card p{color: #475569;font-size: 0.92rem;margin: 0}

        body[data-page="facebook"] .fb-faq-grid{grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.8rem;display: grid;margin-top: 1.2rem}
        body[data-page="facebook"] .fb-faq-card{border: 1px solid rgba(59, 130, 246, 0.16);padding: 0.9rem 1rem;background: #fff;border-radius: 12px}
        body[data-page="facebook"] .fb-faq-card h4{margin-bottom: 0.35rem;color: #0f172a}
        body[data-page="facebook"] .fb-faq-card p{margin: 0;font-size: 0.92rem;color: #475569}

        @media (max-width: 1023px) {
            body[data-page="facebook"] .fb-hero-layout{ grid-template-columns: 1fr; }
            body[data-page="facebook"] .fb-content-columns{ grid-template-columns: 1fr; }
            body[data-page="facebook"] .fb-secondary-media{ grid-template-columns: 1fr; }
            body[data-page="facebook"] .fb-reviews-grid{ grid-template-columns: 1fr; }
            body[data-page="facebook"] .fb-faq-grid{ grid-template-columns: 1fr; }
            body[data-page="facebook"] .fb-calendar-row{gap: 0.25rem;grid-template-columns: 1fr}
            body[data-page="facebook"] .fb-stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
            body[data-page="facebook"] .fb-partnership-grid{ grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            body[data-page="facebook"] .fb-stats-grid{ grid-template-columns: 1fr; }
        }



        body[data-page="instalar"] .instalar-hero-layout{grid-template-columns: 1.15fr 0.85fr;gap: 1rem;display: grid;align-items: center}
        body[data-page="instalar"] .instalar-main-image{border-radius: 16px;justify-self: center;box-shadow: 0 14px 30px rgba(15,23,42,.12);border: 1px solid rgba(59,130,246,.24);object-fit: cover;max-width: 520px;width: 100%;aspect-ratio: 1 / 1}
        body[data-page="instalar"] .instalar-summary-box{color: #1e3a8a;border: 1px solid rgba(59,130,246,.2);border-radius: 12px;font-weight: 600;margin-top: 1rem;padding: .85rem 1rem;background: rgba(255,255,255,.9)}

        body[data-page="instalar"] .instalar-precheck-grid{display: grid;grid-template-columns: repeat(3, minmax(0,1fr));margin-top: 1.2rem;gap: .85rem}
        body[data-page="instalar"] .instalar-precheck-card{border: 1px solid rgba(59,130,246,.18);border-radius: 12px;background: #fff;padding: .95rem 1rem}
        body[data-page="instalar"] .instalar-precheck-card h4{margin-bottom: .35rem;color: #0f172a}
        body[data-page="instalar"] .instalar-precheck-card p{margin: 0;font-size: .9rem;color: rgb(71,85,105)}

        body[data-page="instalar"] .instalar-process-list{display: grid;margin-top: 1.2rem;gap: .65rem}
        body[data-page="instalar"] .instalar-process-item{border: 1px solid rgba(59,130,246,.16);background: rgb(255,255,255);grid-template-columns: 42px 1fr;gap: .75rem;border-radius: 12px;padding: .8rem;display: grid}
        body[data-page="instalar"] .instalar-step-badge{font-size: .8rem;font-weight: 700;place-items: center;color: rgba(255,255,255,1);border-radius: 50%;background: #3b82f6;height: 34px;width: 34px;display: grid}
        body[data-page="instalar"] .instalar-process-item h4{margin-bottom: .3rem;color: #0f172a}
        body[data-page="instalar"] .instalar-process-item p{color: #475569;font-size: .92rem;margin: 0}

        body[data-page="instalar"] .instalar-secondary-media{align-items: center;margin-top: 1.2rem;grid-template-columns: .9fr 1.1fr;display: grid;gap: 1rem}
        body[data-page="instalar"] .instalar-secondary-image{object-fit: cover;border-radius: 14px;width: 100%;border: 1px solid rgba(59,130,246,.2);aspect-ratio: 1 / 1}
        body[data-page="instalar"] .instalar-secondary-copy h4{color: #0f172a;margin-bottom: .35rem}
        body[data-page="instalar"] .instalar-secondary-copy p{font-size: .97rem;line-height: 1.74;margin: 0 0 .7rem;color: #475569}
        body[data-page="instalar"] .instalar-secondary-points{padding-left: 1rem;line-height: 1.72;color: #334155;margin: .75rem 0 0;font-size: .93rem}
        body[data-page="instalar"] .instalar-secondary-points strong{
            color: #1d4ed8;
        }
        body[data-page="instalar"] .instalar-secondary-tags{margin-top: .8rem;flex-wrap: wrap;gap: .45rem;display: flex}
        body[data-page="instalar"] .instalar-secondary-tag{background: rgba(255,255,255,.92);border: 1px solid rgba(59,130,246,.2);font-size: .82rem;display: inline-flex;padding: .3rem .62rem;align-items: center;border-radius: 999px;gap: .25rem;color: #1e3a8a;font-weight: 600}

        body[data-page="instalar"] .instalar-init-grid{gap: .8rem;display: grid;margin-top: 1.2rem;grid-template-columns: repeat(3, minmax(0,1fr))}
        body[data-page="instalar"] .instalar-init-card{padding: .9rem 1rem;border: 1px solid rgba(59,130,246,.16);background: #fff;border-radius: 12px}
        body[data-page="instalar"] .instalar-init-card h4{margin-bottom: .35rem;color: #0f172a}
        body[data-page="instalar"] .instalar-init-card p{margin: 0;color: #475569;font-size: .9rem}

        body[data-page="instalar"] .instalar-errors-table{border: 1px solid rgba(59,130,246,.18);background: #fff;border-radius: 12px;overflow: hidden;margin-top: 1.2rem}
        body[data-page="instalar"] .instalar-row{padding: .75rem 1rem;gap: .8rem;display: grid;grid-template-columns: 1fr 1fr 1.8fr;border-bottom: 1px solid rgba(15,23,42,.08)}
        body[data-page="instalar"] .instalar-row:last-child{ border-bottom: none; }
        body[data-page="instalar"] .instalar-row strong{ color: #0f172a; }
        body[data-page="instalar"] .instalar-row span{font-size: .92rem;color: rgb(71,85,105)}

        body[data-page="instalar"] .instalar-faq-grid{grid-template-columns: repeat(2, minmax(0,1fr));gap: .8rem;margin-top: 1.2rem;display: grid}
        body[data-page="instalar"] .instalar-faq-card{background: rgba(255,255,255,1);border: 1px solid rgba(59,130,246,.16);border-radius: 12px;padding: .9rem 1rem}
        body[data-page="instalar"] .instalar-faq-card h4{color: #0f172a;margin-bottom: .35rem}
        body[data-page="instalar"] .instalar-faq-card p{margin: 0;color: #475569;font-size: .92rem}

        @media (max-width: 1023px) {
            body[data-page="instalar"] .instalar-hero-layout{ grid-template-columns: 1fr; }
            body[data-page="instalar"] .instalar-precheck-grid{ grid-template-columns: 1fr; }
            body[data-page="instalar"] .instalar-secondary-media{ grid-template-columns: 1fr; }
            body[data-page="instalar"] .instalar-init-grid{ grid-template-columns: 1fr; }
            body[data-page="instalar"] .instalar-row{grid-template-columns: 1fr;gap: .25rem}
            body[data-page="instalar"] .instalar-faq-grid{ grid-template-columns: 1fr; }
        }



        body[data-page="pix"] .pix-hero-layout{grid-template-columns: 1.2fr 0.8fr;gap: 1rem;align-items: center;display: grid}
        body[data-page="pix"] .pix-hero-main-image{max-width: 520px;border-radius: 16px;justify-self: center;border: 1px solid rgba(59, 130, 246, 0.24);object-fit: cover;width: 100%;aspect-ratio: 1 / 1;box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12)}
        body[data-page="pix"] .pix-square-image{width: 100%;justify-self: center;box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);max-width: 420px;border-radius: 16px;border: 1px solid rgba(59, 130, 246, 0.24);aspect-ratio: 1 / 1;object-fit: cover}
        body[data-page="pix"] .pix-info-tags{gap: 0.55rem;margin-top: 1rem;display: flex;flex-wrap: wrap}
        body[data-page="pix"] .pix-tag{font-weight: 700;background: rgba(255, 255, 255, 0.9);color: #1e3a8a;font-size: 0.84rem;border: 1px solid rgba(59, 130, 246, 0.24);border-radius: 999px;padding: 0.35rem 0.7rem}

        body[data-page="pix"] .pix-steps-section{
            padding: 3.2rem 0 2rem;
        }
        body[data-page="pix"] .pix-steps{margin-top: 1.2rem;display: grid;gap: 0.8rem;grid-template-columns: repeat(5, minmax(0, 1fr))}
        body[data-page="pix"] .pix-step{border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 12px;background: #fff;padding: 0.9rem}
        body[data-page="pix"] .pix-step-index{width: 28px;border-radius: 50%;place-items: center;font-weight: 700;font-size: 0.8rem;height: 28px;background: #3b82f6;display: grid;color: #fff;margin-bottom: 0.45rem}
        body[data-page="pix"] .pix-step h4{margin-bottom: 0.35rem;color: #0f172a}
        body[data-page="pix"] .pix-step p{color: #475569;font-size: 0.9rem;line-height: 1.5;margin: 0}

        body[data-page="pix"] .pix-metrics-grid{gap: 1rem;display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));margin-top: 1.1rem}
        body[data-page="pix"] .pix-metric-card{border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 12px;background: rgba(255, 255, 255, 0.93);padding: 1rem}
        body[data-page="pix"] .pix-metric-title{color: rgba(15,23,42,1);margin-bottom: 0.4rem}
        body[data-page="pix"] .pix-metric-list{padding-left: 1rem;line-height: 1.6;font-size: 0.92rem;margin: 0;color: #475569}

        body[data-page="pix"] .pix-checklist{border: 1px solid rgba(59, 130, 246, 0.2);background: rgb(255,255,255);padding: 1rem;border-radius: 14px;margin-top: 1.2rem}
        body[data-page="pix"] .pix-checklist ul{line-height: 1.65;margin: 0.5rem 0 0;padding-left: 1rem;color: rgba(71,85,105,1)}

        body[data-page="pix"] .pix-square-showcase{gap: 1rem;grid-template-columns: 0.8fr 1.2fr;align-items: center;display: grid;margin-top: 1.2rem}
        body[data-page="pix"] .pix-square-copy h4{color: #0f172a;margin-bottom: 0.45rem}
        body[data-page="pix"] .pix-square-copy p{margin: 0;line-height: 1.6;color: #475569;font-size: 0.93rem}

        body[data-page="pix"] .pix-troubleshoot-grid{display: grid;margin-top: 1.2rem;gap: 0.85rem;grid-template-columns: repeat(3, minmax(0, 1fr))}
        body[data-page="pix"] .pix-troubleshoot-card{border: 1px solid rgba(59, 130, 246, 0.16);border-radius: 12px;background: #fff;padding: 0.9rem 1rem}
        body[data-page="pix"] .pix-troubleshoot-card h4{color: #0f172a;font-size: 1rem;margin-bottom: 0.35rem}
        body[data-page="pix"] .pix-troubleshoot-card p{margin: 0;color: rgba(71,85,105,1);font-size: 0.92rem}

        body[data-page="pix"] .pix-timeline{background: #fff;border: 1px solid rgba(59, 130, 246, 0.18);padding: 0.8rem 1rem;margin-top: 1.2rem;border-radius: 12px}
        body[data-page="pix"] .pix-timeline-row{display: grid;grid-template-columns: 1fr 1fr 2fr;font-size: 0.92rem;color: #475569;gap: 0.8rem;padding: 0.6rem 0;border-bottom: 1px solid rgba(15, 23, 42, 0.08)}
        body[data-page="pix"] .pix-timeline-row:last-child{ border-bottom: none; }
        body[data-page="pix"] .pix-timeline-row strong{ color: #0f172a; }

        body[data-page="pix"] .pix-faq-grid{margin-top: 1.2rem;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.8rem;display: grid}
        body[data-page="pix"] .pix-faq-card{border: 1px solid rgba(59, 130, 246, 0.16);border-radius: 12px;padding: 0.9rem 1rem;background: #fff}
        body[data-page="pix"] .pix-faq-card h4{color: #0f172a;margin-bottom: 0.35rem}
        body[data-page="pix"] .pix-faq-card p{color: rgb(71,85,105);font-size: 0.92rem;margin: 0}

        @media (max-width: 1023px) {
            body[data-page="pix"] .pix-hero-layout{ grid-template-columns: 1fr; }
            body[data-page="pix"] .pix-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
            body[data-page="pix"] .pix-metrics-grid{ grid-template-columns: 1fr; }
            body[data-page="pix"] .pix-faq-grid{ grid-template-columns: 1fr; }
            body[data-page="pix"] .pix-square-showcase{ grid-template-columns: 1fr; }
            body[data-page="pix"] .pix-troubleshoot-grid{ grid-template-columns: 1fr; }
            body[data-page="pix"] .pix-timeline-row{grid-template-columns: 1fr;gap: 0.25rem}
        }
        @media (max-width: 640px) {
            body[data-page="pix"] .pix-steps{ grid-template-columns: 1fr; }
        }



        body[data-page="slots"] .hero-image .main-image{aspect-ratio: 1 / 1;object-fit: cover;max-width: 520px}
        body[data-page="slots"] .slots-highlight-grid{grid-template-columns: repeat(3, minmax(0, 1fr));display: grid;margin-top: 1rem;gap: 1rem}
        body[data-page="slots"] .slots-highlight-card{background: rgba(255, 255, 255, 0.9);border: 1px solid rgba(59, 130, 246, 0.2);padding: 1rem;border-radius: var(--radius-lg)}
        body[data-page="slots"] .slots-list-grid{gap: 1rem;margin-top: 1.5rem;display: grid;grid-template-columns: repeat(4, minmax(0, 1fr))}
        body[data-page="slots"] .slot-card{border: 1px solid rgba(59, 130, 246, 0.2);border-radius: var(--radius-lg);background: #fff;padding: 1rem}
        body[data-page="slots"] .slot-card h4{color: #0f172a;margin-bottom: 0.45rem}
        body[data-page="slots"] .slot-meta{font-size: 0.86rem;color: #475569;margin-bottom: 0.5rem}
        body[data-page="slots"] .tips-list{grid-template-columns: repeat(2, minmax(0, 1fr));gap: 1rem;margin-top: 1rem;display: grid}
        body[data-page="slots"] .tip-item{background: rgba(255, 255, 255, 0.88);border: 1px solid rgba(59, 130, 246, 0.16);border-radius: var(--radius-md);padding: 1rem}
        @media (max-width: 1023px) {
            body[data-page="slots"] .slots-highlight-grid{ grid-template-columns: 1fr; }
            body[data-page="slots"] .slots-list-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
            body[data-page="slots"] .tips-list{ grid-template-columns: 1fr; }
        }
        @media (max-width: 639px) {
            body[data-page="slots"] .slots-list-grid{ grid-template-columns: 1fr; }
        }



        body[data-page="telegram"] .telegram-hero-layout{align-items: center;gap: 1.1rem;grid-template-columns: 1.2fr 0.8fr;display: grid}
        body[data-page="telegram"] .telegram-main-image{max-width: 520px;box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);border-radius: 16px;width: 100%;aspect-ratio: 1 / 1;border: 1px solid rgba(59, 130, 246, 0.24);justify-self: center;object-fit: cover}
        body[data-page="telegram"] .telegram-tags{display: flex;flex-wrap: wrap;gap: 0.55rem;margin-top: 1rem}
        body[data-page="telegram"] .telegram-tag{font-weight: 700;background: rgba(255, 255, 255, 0.9);border: 1px solid rgba(59, 130, 246, 0.24);font-size: 0.84rem;border-radius: 999px;padding: 0.34rem 0.72rem;color: #1e3a8a}

        body[data-page="telegram"] .telegram-feed-grid{margin-top: 1.3rem;gap: 1rem;grid-template-columns: repeat(3, minmax(0, 1fr));display: grid}
        body[data-page="telegram"] .telegram-feed-card{padding: 1rem;background: rgba(255,255,255,1);border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 14px}
        body[data-page="telegram"] .telegram-feed-label{margin-bottom: 0.4rem;font-size: 0.78rem;display: inline-block;letter-spacing: 0.03em;text-transform: uppercase;color: rgb(37,99,235);font-weight: 700}
        body[data-page="telegram"] .telegram-feed-card h4{margin-bottom: 0.35rem;color: rgb(15,23,42)}
        body[data-page="telegram"] .telegram-feed-card p{margin: 0;color: #475569;font-size: 0.92rem}

        body[data-page="telegram"] .telegram-secondary-media{margin-top: 1.3rem;gap: 1rem;align-items: center;display: grid;grid-template-columns: 0.9fr 1.1fr}
        body[data-page="telegram"] .telegram-secondary-image{width: 100%;border-radius: 14px;border: 1px solid rgba(59, 130, 246, 0.2);aspect-ratio: 1 / 1;object-fit: cover}
        body[data-page="telegram"] .telegram-secondary-copy h4{font-size: 1.28rem;margin-bottom: 0.6rem;color: #0f172a;line-height: 1.4}
        body[data-page="telegram"] .telegram-secondary-copy p{line-height: 1.78;margin: 0 0 0.65rem;font-size: 1rem;color: rgba(71,85,105,1)}
        body[data-page="telegram"] .telegram-keyword-list{font-size: 0.98rem;margin: 0.9rem 0 0;line-height: 1.8;padding-left: 1.15rem;color: rgb(51,65,85)}
        body[data-page="telegram"] .telegram-keyword-list strong{
            color: #1d4ed8;
        }

        body[data-page="telegram"] .telegram-safety-list{border: 1px solid rgba(59, 130, 246, 0.2);margin-top: 1.2rem;border-radius: 14px;background: rgb(255,255,255);padding: 1rem}
        body[data-page="telegram"] .telegram-safety-list ul{padding-left: 1rem;color: #475569;margin: 0;line-height: 1.65}

        body[data-page="telegram"] .telegram-calendar{border: 1px solid rgba(59, 130, 246, 0.18);background: rgb(255,255,255);overflow: hidden;border-radius: 14px;margin-top: 1.2rem}
        body[data-page="telegram"] .telegram-calendar-row{gap: 0.8rem;grid-template-columns: 1fr 1.1fr 2fr;display: grid;border-bottom: 1px solid rgba(15, 23, 42, 0.08);padding: 0.8rem 1rem}
        body[data-page="telegram"] .telegram-calendar-row:last-child{ border-bottom: none; }
        body[data-page="telegram"] .telegram-calendar-row strong{ color: rgba(15,23,42,1); }
        body[data-page="telegram"] .telegram-calendar-row span{color: #475569;font-size: 0.92rem}

        body[data-page="telegram"] .telegram-stats-grid{margin-top: 1.2rem;display: grid;gap: 0.8rem;grid-template-columns: repeat(4, minmax(0, 1fr))}
        body[data-page="telegram"] .telegram-stat-card{background: #fff;text-align: center;padding: 1rem;border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 12px}
        body[data-page="telegram"] .telegram-stat-value{font-weight: 800;font-size: 1.35rem;margin-bottom: 0.35rem;display: block;color: #2563eb}
        body[data-page="telegram"] .telegram-stat-label{font-size: 0.88rem;color: #475569}

        body[data-page="telegram"] .telegram-faq-grid{margin-top: 1.2rem;gap: 0.8rem;grid-template-columns: repeat(2, minmax(0, 1fr));display: grid}
        body[data-page="telegram"] .telegram-faq-card{border: 1px solid rgba(59, 130, 246, 0.16);border-radius: 12px;padding: 0.9rem 1rem;background: #fff}
        body[data-page="telegram"] .telegram-faq-card h4{color: #0f172a;margin-bottom: 0.35rem}
        body[data-page="telegram"] .telegram-faq-card p{margin: 0;font-size: 0.92rem;color: #475569}

        @media (max-width: 1023px) {
            body[data-page="telegram"] .telegram-hero-layout{ grid-template-columns: 1fr; }
            body[data-page="telegram"] .telegram-feed-grid{ grid-template-columns: 1fr; }
            body[data-page="telegram"] .telegram-secondary-media{ grid-template-columns: 1fr; }
            body[data-page="telegram"] .telegram-faq-grid{ grid-template-columns: 1fr; }
            body[data-page="telegram"] .telegram-calendar-row{grid-template-columns: 1fr;gap: 0.25rem}
            body[data-page="telegram"] .telegram-stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 640px) {
            body[data-page="telegram"] .telegram-stats-grid{ grid-template-columns: 1fr; }
        }



        body[data-page="vip"] .hero-image .main-image{aspect-ratio: 1 / 1;object-fit: cover;max-width: 520px}
        body[data-page="vip"] .vip-hero-badges{margin-top: 1rem;display: flex;flex-wrap: wrap;gap: 0.65rem}
        body[data-page="vip"] .vip-badge{border: 1px solid rgba(59, 130, 246, 0.24);border-radius: 999px;color: #1e3a8a;padding: 0.38rem 0.75rem;font-weight: 700;background: rgba(255, 255, 255, 0.9);font-size: 0.85rem}

        body[data-page="vip"] .vip-levels-section{
            padding: 3.5rem 0 2rem;
        }
        body[data-page="vip"] .vip-levels-grid{margin-top: 1.5rem;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 1rem;display: grid}
        body[data-page="vip"] .vip-level-card{background: #fff;box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);border: 1px solid rgba(59, 130, 246, 0.2);padding: 1.2rem;border-radius: 16px}
        body[data-page="vip"] .vip-level-card.featured{box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);transform: translateY(-3px);border-color: rgba(37, 99, 235, 0.45)}
        body[data-page="vip"] .vip-level-title{margin-bottom: 0.35rem;color: #0f172a}
        body[data-page="vip"] .vip-level-target{font-size: 0.9rem;margin-bottom: 0.7rem;color: #2563eb;font-weight: 700}
        body[data-page="vip"] .vip-perks{padding-left: 1.05rem;margin: 0;line-height: 1.55;color: #475569;font-size: 0.93rem}

        body[data-page="vip"] .vip-flow-section{
            padding: 1rem 0 2.5rem;
        }
        body[data-page="vip"] .vip-flow{grid-template-columns: repeat(4, minmax(0, 1fr));margin-top: 1.4rem;display: grid;gap: 0.85rem}
        body[data-page="vip"] .vip-step{padding: 1rem;text-align: center;background: rgba(255, 255, 255, 0.92);border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 14px}
        body[data-page="vip"] .vip-step-number{background: #3b82f6;font-size: 0.82rem;place-items: center;border-radius: 50%;margin: 0 auto 0.5rem;font-weight: 700;color: #fff;width: 30px;display: grid;height: 30px}
        body[data-page="vip"] .vip-step h4{margin-bottom: 0.4rem;color: rgb(15,23,42)}
        body[data-page="vip"] .vip-step p{font-size: 0.9rem;color: #475569;margin: 0}

        body[data-page="vip"] .vip-table-wrap{border: 1px solid rgba(59, 130, 246, 0.2);border-radius: 14px;background: #fff;overflow-x: auto;margin-top: 1.3rem}
        body[data-page="vip"] .vip-table{border-collapse: collapse;width: 100%;min-width: 680px}
        body[data-page="vip"] .vip-table th,
body[data-page="vip"] .vip-table td{border-bottom: 1px solid rgba(15, 23, 42, 0.08);text-align: left;padding: 0.8rem 0.9rem}
        body[data-page="vip"] .vip-table th{font-size: 0.9rem;background: rgba(59, 130, 246, 0.08);color: rgba(15,23,42,1)}
        body[data-page="vip"] .vip-table td{color: rgb(71,85,105);font-size: 0.92rem}

        body[data-page="vip"] .vip-support-box{background: rgba(255, 255, 255, 0.92);border: 1px solid rgba(59, 130, 246, 0.2);border-radius: 14px;padding: 1rem;margin-top: 1.25rem}
        body[data-page="vip"] .vip-support-box h4{margin-bottom: 0.45rem;color: #0f172a}
        body[data-page="vip"] .vip-support-list{padding-left: 1.1rem;margin: 0;color: rgba(71,85,105,1)}

        body[data-page="vip"] .vip-campaigns-section{
            padding: 0.5rem 0 2.5rem;
        }
        body[data-page="vip"] .vip-campaigns-grid{margin-top: 1.2rem;grid-template-columns: repeat(3, minmax(0, 1fr));display: grid;gap: 1rem}
        body[data-page="vip"] .vip-campaign-card{border: 1px solid rgba(59, 130, 246, 0.2);border-radius: 14px;padding: 1rem;background: #ffffff}
        body[data-page="vip"] .vip-campaign-card h4{color: #0f172a;margin-bottom: 0.45rem}
        body[data-page="vip"] .vip-campaign-image{margin-bottom: 0.75rem;height: 140px;object-fit: cover;width: 100%;border-radius: 10px;border: 1px solid rgba(59, 130, 246, 0.16)}
        body[data-page="vip"] .vip-campaign-card p{margin: 0;font-size: 0.92rem;color: #475569}

        body[data-page="vip"] .vip-rules-section{
            padding: 0.5rem 0 2.8rem;
        }
        body[data-page="vip"] .vip-rules-grid{gap: 1rem;grid-template-columns: repeat(2, minmax(0, 1fr));display: grid;margin-top: 1.2rem}
        body[data-page="vip"] .vip-rule-box{padding: 1rem;background: rgba(255, 255, 255, 0.92);border: 1px solid rgba(59, 130, 246, 0.18);border-radius: 14px}
        body[data-page="vip"] .vip-rule-box h4{color: rgb(15,23,42);margin-bottom: 0.5rem}
        body[data-page="vip"] .vip-rule-box ul{line-height: 1.6;margin: 0;padding-left: 1rem;font-size: 0.92rem;color: rgba(71,85,105,1)}
        body[data-page="vip"] .vip-rules-image{height: 220px;margin-top: 1rem;width: 100%;object-fit: cover;border-radius: 12px;border: 1px solid rgba(59, 130, 246, 0.18)}

        body[data-page="vip"] .vip-faq-section{
            padding: 0.5rem 0 3rem;
        }
        body[data-page="vip"] .vip-faq-list{display: grid;gap: 0.75rem;margin-top: 1.2rem}
        body[data-page="vip"] .vip-faq-item{background: #ffffff;padding: 0.9rem 1rem;border: 1px solid rgba(59, 130, 246, 0.16);border-radius: 12px}
        body[data-page="vip"] .vip-faq-item h4{font-size: 1rem;color: #0f172a;margin-bottom: 0.35rem}
        body[data-page="vip"] .vip-faq-item p{color: rgba(71,85,105,1);margin: 0;font-size: 0.93rem}

        @media (max-width: 1023px) {
            body[data-page="vip"] .vip-levels-grid{ grid-template-columns: 1fr; }
            body[data-page="vip"] .vip-flow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
            body[data-page="vip"] .vip-campaigns-grid{ grid-template-columns: 1fr; }
            body[data-page="vip"] .vip-rules-grid{ grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
            body[data-page="vip"] .vip-flow{ grid-template-columns: 1fr; }
        }



.wu-generic, .wu-legal { display: block; }


.sf-related-articles{border:1px solid rgba(148,163,184,.24);max-width:1120px;padding:clamp(18px,3vw,28px);margin:clamp(28px,5vw,56px) auto;box-shadow:0 16px 45px rgba(15,23,42,.08);border-radius:24px;background:rgba(255,255,255,.06)}
.sf-related-articles h2{margin:0 0 8px;line-height:1.2;font-size:clamp(1.35rem,2.5vw,2rem)}
.sf-related-articles>p{line-height:1.65;opacity:.78;margin:0 0 18px}
.sf-related-articles__list{display:grid;padding:0;list-style:none;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0}
.sf-related-articles__item{padding:0;list-style:none;margin:0}
.sf-related-articles__link{transition:transform .18s ease,border-color .18s ease,background .18s ease;border-radius:18px;background:rgba(255,255,255,.08);flex-direction:column;min-height:100%;text-decoration:none;border:1px solid rgba(148,163,184,.18);gap:7px;display:flex;padding:16px;color:inherit}
.sf-related-articles__link:hover{transform:translateY(-2px);background:rgba(255,255,255,.13);border-color:rgba(59,130,246,.45)}
.sf-related-articles__type{padding:3px 9px;letter-spacing:.04em;color:inherit;text-transform:uppercase;opacity:.88;border-radius:999px;font-weight:700;font-size:.72rem;background:rgba(59,130,246,.14);width:max-content}
.sf-related-articles strong{line-height:1.35;font-size:1rem}
.sf-related-articles small{line-height:1.45;font-size:.88rem;opacity:.72}
@media(max-width:640px){.sf-related-articles{border-radius:18px;padding:16px;margin:28px 12px}.sf-related-articles__list{grid-template-columns:1fr}.sf-related-articles__link{padding:14px}}