:root{/* Hero UI inspired color palette */ --primary-color: #6366f1;--primary-50: #eef2ff;--primary-100: #e0e7ff;--primary-500: #6366f1;--primary-600: #4f46e5;--primary-700: #4338ca;--accent-color: #8b5cf6;--accent-50: #f5f3ff;--accent-100: #ede9fe;--accent-500: #8b5cf6;--accent-600: #7c3aed;--accent-700: #6d28d9;--bg-dark: #0f172a;--bg-card: rgba(30,41,59,0.6);--bg-card-hover: rgba(30,41,59,0.9);--bg-overlay: rgba(15,23,42,0.8);--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-tertiary: #94a3b8;--border-color: rgba(139,92,246,0.2);--border-hover: rgba(139,92,246,0.5);/* Hero UI shadows */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--shadow-glow: 0 0 20px rgba(139,92,246,0.3);} *{margin: 0;padding: 0;box-sizing: border-box;} body{font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background: var(--bg-dark);color: var(--text-primary);line-height: 1.6;overflow-x: hidden;} .container{max-width: 1200px;margin: 0 auto;padding: 0 20px;} /* Hero UI Navbar */ .navbar{position: sticky;top: 0;z-index: 1000;background: rgba(15,23,42,0.8);backdrop-filter: blur(20px) saturate(180%);border-bottom: 1px solid var(--border-color);padding: 1rem 0;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);} .navbar::after{content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 1px;background: linear-gradient(90deg,transparent,var(--accent-color),transparent);opacity: 0.5;} .nav-wrapper{display: flex;align-items: center;justify-content: space-between;gap: 2rem;} .logo a{font-size: 1.5rem;font-weight: bold;color: var(--accent-color);text-decoration: none;letter-spacing: 2px;} .nav-menu{display: flex;align-items: center;gap: 2rem;flex-wrap: wrap;} .nav-menu a{color: var(--text-secondary);text-decoration: none;position: relative;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);padding: 0.5rem 0.75rem;border-radius: 8px;} .nav-menu a::after{content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 0;height: 2px;background: linear-gradient(90deg,var(--primary-500),var(--accent-500));transition: width 0.3s cubic-bezier(0.4,0,0.2,1);border-radius: 2px;} .nav-menu a:hover{color: var(--text-primary);background: rgba(139,92,246,0.1);} .nav-menu a:hover::after{width: 80%;} .lang-switcher{display: flex;gap: 0.5rem;} .lang-switcher a{padding: 0.25rem 0.5rem;border-radius: 4px;} .lang-switcher a.active{background: var(--accent-color);color: var(--text-primary);} /* Hero UI Button Styles */ .cta-button{position: relative;background: linear-gradient(135deg,var(--primary-500),var(--accent-500));color: white;padding: 0.75rem 1.5rem;border-radius: 12px;text-decoration: none;font-weight: 600;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);border: none;cursor: pointer;overflow: hidden;box-shadow: var(--shadow-md);display: inline-flex;align-items: center;justify-content: center;} .cta-button::before{content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(255,255,255,0.2);transform: translate(-50%,-50%);transition: width 0.6s,height 0.6s;} .cta-button:hover::before{width: 300px;height: 300px;} .cta-button:hover{transform: translateY(-2px) scale(1.02);box-shadow: var(--shadow-xl),var(--shadow-glow);} .cta-button:active{transform: translateY(0) scale(0.98);} /* Hero UI Hero Section */ .hero{background: linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.08));padding: 2.4rem 0;text-align: center;position: relative;overflow: hidden;} .hero::before{content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle at 50% 50%,rgba(139,92,246,0.15),transparent 70%);pointer-events: none;animation: pulse 8s ease-in-out infinite;} .hero::after{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 30%,rgba(99,102,241,0.1),transparent 50%),radial-gradient(circle at 80% 70%,rgba(139,92,246,0.1),transparent 50%);pointer-events: none;} @keyframes pulse{0%,100%{transform: scale(1);opacity: 1;} 50%{transform: scale(1.1);opacity: 0.8;} } .hero-content{position: relative;z-index: 2;} .hero h1{font-size: 3.5rem;margin-bottom: 0.6rem;background: linear-gradient(135deg,var(--text-primary),var(--accent-color));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;} .hero-subtitle{font-size: 1.25rem;color: var(--text-secondary);margin-bottom: 1.2rem;max-width: 800px;margin-left: auto;margin-right: auto;} .hero-stats{display: grid;grid-template-columns: repeat(auto-fit,minmax(150px,1fr));gap: 0.8rem;margin-bottom: 1.2rem;max-width: 800px;margin-left: auto;margin-right: auto;} .stat-item{position: relative;background: var(--bg-card);padding: 0.6rem;border-radius: 16px;border: 1px solid var(--border-color);backdrop-filter: blur(20px) saturate(180%);transition: all 0.3s cubic-bezier(0.4,0,0.2,1);overflow: hidden;} .stat-item::after{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1));opacity: 0;transition: opacity 0.3s;} .stat-item:hover::after{opacity: 1;} .stat-item:hover{transform: translateY(-4px);border-color: var(--border-hover);box-shadow: var(--shadow-lg);} .stat-number{font-size: 2.5rem;font-weight: bold;color: var(--accent-color);margin-bottom: 0.5rem;} .stat-label{color: var(--text-secondary);font-size: 0.9rem;} .hero-cta{position: relative;display: inline-block;background: linear-gradient(135deg,var(--primary-500),var(--accent-500));color: white;padding: 1rem 2.5rem;border-radius: 16px;text-decoration: none;font-weight: 600;font-size: 1.1rem;transition: all 0.4s cubic-bezier(0.4,0,0.2,1);overflow: hidden;box-shadow: var(--shadow-lg);} .hero-cta::before{content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(255,255,255,0.3);transform: translate(-50%,-50%);transition: width 0.6s,height 0.6s;} .hero-cta:hover::before{width: 400px;height: 400px;} .hero-cta:hover{transform: translateY(-4px) scale(1.05);box-shadow: var(--shadow-xl),var(--shadow-glow);} .hero-cta:active{transform: translateY(-2px) scale(1.02);} /* Features Section */ .features{padding: 2rem 0;} .features h2{text-align: center;font-size: 2.5rem;margin-bottom: 1.2rem;} .features-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(280px,1fr));gap: 0.8rem;} /* Hero UI Card Styles */ .feature-card{position: relative;background: var(--bg-card);padding: 0.8rem;border-radius: 16px;border: 1px solid var(--border-color);transition: all 0.4s cubic-bezier(0.4,0,0.2,1);backdrop-filter: blur(20px) saturate(180%);overflow: hidden;} .feature-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg,var(--primary-500),var(--accent-500));transform: scaleX(0);transform-origin: left;transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);} .feature-card:hover::before{transform: scaleX(1);} .feature-card:hover{transform: translateY(-8px) scale(1.02);border-color: var(--border-hover);background: var(--bg-card-hover);box-shadow: var(--shadow-xl),0 0 30px rgba(139,92,246,0.2);} .feature-icon{width: 80px;height: 80px;margin: 0 auto 0.6rem;display: flex;align-items: center;justify-content: center;background: rgba(139,92,246,0.1);border-radius: 16px;padding: 1rem;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);} .feature-icon img{width: 100%;height: 100%;object-fit: contain;filter: drop-shadow(0 4px 12px rgba(139,92,246,0.4));transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);} .feature-card:hover .feature-icon{background: rgba(139,92,246,0.2);transform: scale(1.1);} .feature-card:hover .feature-icon img{transform: scale(1.15) rotate(5deg);} .feature-card h3{font-size: 1.5rem;margin-bottom: 0.4rem;color: var(--accent-color);} .feature-card p{color: var(--text-secondary);line-height: 1.8;} /* Hero UI Bonus Section */ .bonus{padding: 2rem 0;background: linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.08));position: relative;overflow: hidden;} .bonus::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 30% 50%,rgba(99,102,241,0.1),transparent 60%),radial-gradient(circle at 70% 50%,rgba(139,92,246,0.1),transparent 60%);pointer-events: none;} .bonus-content{position: relative;z-index: 1;text-align: center;max-width: 800px;margin: 0 auto;} .bonus h2{font-size: 2.5rem;margin-bottom: 0.6rem;} .bonus-text{font-size: 1.2rem;color: var(--text-secondary);margin-bottom: 0.8rem;} .bonus-features{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 0.4rem;margin-bottom: 0.8rem;} .bonus-item{position: relative;background: var(--bg-card);padding: 0.4rem;border-radius: 12px;border: 1px solid var(--border-color);color: var(--text-primary);backdrop-filter: blur(10px);transition: all 0.3s cubic-bezier(0.4,0,0.2,1);overflow: hidden;} .bonus-item::before{content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 3px;background: linear-gradient(180deg,var(--primary-500),var(--accent-500));transform: scaleY(0);transform-origin: top;transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);} .bonus-item:hover::before{transform: scaleY(1);} .bonus-item:hover{transform: translateX(4px);border-color: var(--border-hover);background: var(--bg-card-hover);box-shadow: var(--shadow-md);} .bonus-cta{position: relative;display: inline-block;background: linear-gradient(135deg,var(--primary-500),var(--accent-500));color: white;padding: 1rem 2.5rem;border-radius: 16px;text-decoration: none;font-weight: 600;font-size: 1.1rem;transition: all 0.4s cubic-bezier(0.4,0,0.2,1);overflow: hidden;box-shadow: var(--shadow-lg);} .bonus-cta::before{content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(255,255,255,0.3);transform: translate(-50%,-50%);transition: width 0.6s,height 0.6s;} .bonus-cta:hover::before{width: 400px;height: 400px;} .bonus-cta:hover{transform: translateY(-4px) scale(1.05);box-shadow: var(--shadow-xl),var(--shadow-glow);} /* Reviews Section */ .reviews{padding: 2rem 0;} .reviews h2{text-align: center;font-size: 2.5rem;margin-bottom: 1.2rem;} .reviews-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 0.8rem;} .review-card{position: relative;background: var(--bg-card);padding: 0.8rem;border-radius: 16px;border: 1px solid var(--border-color);backdrop-filter: blur(20px) saturate(180%);transition: all 0.3s cubic-bezier(0.4,0,0.2,1);} .review-card:hover{transform: translateY(-4px);border-color: var(--border-hover);box-shadow: var(--shadow-lg);} .review-stars{color: #fbbf24;font-size: 1.5rem;margin-bottom: 0.4rem;} .review-card p{color: var(--text-secondary);margin-bottom: 0.4rem;font-style: italic;line-height: 1.8;} .review-author{color: var(--accent-color);font-weight: 600;} /* Hero UI CTA Section */ .cta-section{padding: 2rem 0;background: linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.15));text-align: center;position: relative;overflow: hidden;} .cta-section::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 50% 50%,rgba(139,92,246,0.2),transparent 70%);pointer-events: none;animation: pulse 6s ease-in-out infinite;} .cta-section h2{font-size: 2.5rem;margin-bottom: 0.4rem;} .cta-section p{font-size: 1.2rem;color: var(--text-secondary);margin-bottom: 0.8rem;} .cta-button-large{position: relative;display: inline-block;background: linear-gradient(135deg,var(--primary-500),var(--accent-500));color: white;padding: 1.25rem 3rem;border-radius: 16px;text-decoration: none;font-weight: 600;font-size: 1.2rem;transition: all 0.4s cubic-bezier(0.4,0,0.2,1);overflow: hidden;box-shadow: var(--shadow-lg);} .cta-button-large::before{content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background: rgba(255,255,255,0.3);transform: translate(-50%,-50%);transition: width 0.6s,height 0.6s;} .cta-button-large:hover::before{width: 500px;height: 500px;} .cta-button-large:hover{transform: translateY(-4px) scale(1.05);box-shadow: var(--shadow-xl),var(--shadow-glow);} /* Hero UI Footer */ .footer{background: linear-gradient(180deg,rgba(15,23,42,0.98),rgba(15,23,42,1));padding: 1.6rem 0 0.8rem;border-top: 2px solid var(--border-color);position: relative;overflow: hidden;} .footer::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg,transparent,var(--accent-color),transparent);opacity: 0.5;} .footer-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 1.2rem;margin-bottom: 1.2rem;} .footer-col{position: relative;} .footer-about{max-width: 350px;} .footer-logo h3{background: linear-gradient(135deg,var(--primary-500),var(--accent-500));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-size: 1.8rem;margin-bottom: 0.4rem;font-weight: 700;} .footer-col h3,.footer-col h4{color: var(--accent-color);margin-bottom: 0.6rem;font-size: 1.2rem;font-weight: 600;position: relative;padding-bottom: 0.5rem;} .footer-col h4::after{content: '';position: absolute;bottom: 0;left: 0;width: 40px;height: 2px;background: linear-gradient(90deg,var(--accent-color),transparent);} .footer-col p{color: var(--text-secondary);line-height: 1.8;margin-bottom: 0.6rem;font-size: 0.95rem;} .footer-col ul{list-style: none;padding: 0;} .footer-col ul li{margin-bottom: 0.3rem;} .footer-col ul li a{color: var(--text-secondary);text-decoration: none;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);display: inline-block;position: relative;padding-left: 0;} .footer-col ul li a::before{content: '→';position: absolute;left: -15px;opacity: 0;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);color: var(--accent-color);} .footer-col ul li a:hover{color: var(--accent-color);padding-left: 15px;transform: translateX(5px);} .footer-col ul li a:hover::before{opacity: 1;left: 0;} .footer-social{margin-top: 0.6rem;} .footer-label{color: var(--text-tertiary);font-size: 0.85rem;margin-bottom: 0.3rem;} .social-links{display: flex;gap: 1rem;flex-wrap: wrap;} .social-link{color: var(--text-secondary);text-decoration: none;padding: 0.5rem 1rem;border: 1px solid var(--border-color);border-radius: 8px;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);font-size: 0.9rem;} .social-link:hover{color: var(--accent-color);border-color: var(--accent-color);background: rgba(139,92,246,0.1);transform: translateY(-2px);} .responsible-link{color: #fbbf24 !important;} .responsible-link:hover{color: #f59e0b !important;} .footer-bottom{padding-top: 1rem;border-top: 1px solid var(--border-color);margin-top: 0.8rem;} .footer-bottom-content{text-align: center;color: var(--text-secondary);font-size: 0.9rem;} .footer-bottom-content p{margin-bottom: 0.4rem;color: var(--text-secondary);} .footer-warnings{display: flex;align-items: center;justify-content: center;gap: 0.4rem;margin: 0.4rem 0;flex-wrap: wrap;} .warning-badge{background: linear-gradient(135deg,#ef4444,#dc2626);color: white;padding: 0.4rem 0.8rem;border-radius: 6px;font-weight: 600;font-size: 0.85rem;box-shadow: 0 2px 8px rgba(239,68,68,0.3);} .warning-text{color: var(--text-tertiary);font-size: 0.85rem;} .footer-updated{margin-top: 0.4rem;color: var(--text-tertiary);font-size: 0.8rem;font-style: italic;} /* Breadcrumbs */ .breadcrumbs{padding: 0.6rem 0;background: rgba(15,23,42,0.5);} .breadcrumbs-nav{display: flex;align-items: center;gap: 0.5rem;font-size: 0.9rem;} .breadcrumbs-nav a{color: var(--text-secondary);text-decoration: none;transition: color 0.3s;} .breadcrumbs-nav a:hover{color: var(--accent-color);} .breadcrumbs-nav span{color: var(--text-secondary);} /* Page Content */ .page-content{padding: 1.2rem 0;min-height: 60vh;} .page-content h1{font-size: 2.5rem;margin-bottom: 0.4rem;text-align: center;} .page-intro{text-align: center;color: var(--text-secondary);font-size: 1.1rem;margin-bottom: 1.2rem;max-width: 800px;margin-left: auto;margin-right: auto;} /* FAQ Styles */ .faq-container{max-width: 900px;margin: 0 auto;} /* Hero UI Accordion Styles */ .faq-item{background: var(--bg-card);border: 1px solid var(--border-color);border-radius: 16px;margin-bottom: 0.4rem;overflow: hidden;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);backdrop-filter: blur(10px);} .faq-item:hover{border-color: var(--border-hover);box-shadow: var(--shadow-md);} .faq-item[open]{border-color: var(--accent-color);background: var(--bg-card-hover);box-shadow: var(--shadow-lg);} .faq-item summary{padding: 1.5rem;cursor: pointer;font-weight: 600;font-size: 1.1rem;color: var(--text-primary);list-style: none;position: relative;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);user-select: none;} .faq-item[open] summary{color: var(--accent-color);background: rgba(139,92,246,0.05);} .faq-item summary::-webkit-details-marker{display: none;} .faq-item summary::after{content: '+';position: absolute;right: 1.5rem;top: 50%;transform: translateY(-50%);font-size: 1.5rem;color: var(--accent-color);transition: transform 0.3s;} .faq-item[open] summary::after{content: '−';} .faq-item summary:hover{color: var(--accent-color);} .faq-answer{padding: 0 1.5rem 1.5rem;color: var(--text-secondary);line-height: 1.8;} .faq-answer p{margin-bottom: 0.4rem;} /* Highlight Boxes */ .highlight-box{position: relative;background: linear-gradient(135deg,rgba(139,92,246,0.1),rgba(99,102,241,0.1));border-left: 4px solid var(--accent-color);padding: 0.6rem;border-radius: 12px;margin: 0.8rem 0;backdrop-filter: blur(10px);transition: all 0.3s cubic-bezier(0.4,0,0.2,1);} .highlight-box:hover{background: linear-gradient(135deg,rgba(139,92,246,0.15),rgba(99,102,241,0.15));box-shadow: var(--shadow-md);transform: translateX(4px);} .highlight-box h3{color: var(--accent-color);margin-bottom: 0.5rem;} /* Casino Review Section */ .casino-review{padding: 2rem 0;background: linear-gradient(135deg,rgba(15,23,42,0.5),rgba(30,41,59,0.5));position: relative;overflow: hidden;} .casino-review::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: radial-gradient(circle at 20% 50%,rgba(139,92,246,0.1),transparent 50%),radial-gradient(circle at 80% 50%,rgba(99,102,241,0.1),transparent 50%);pointer-events: none;} .casino-review .container{position: relative;z-index: 1;} .casino-review .content-section{max-width: 900px;margin: 0 auto;background: var(--bg-card);padding: 1.6rem;border-radius: 20px;border: 1px solid var(--border-color);backdrop-filter: blur(20px) saturate(180%);box-shadow: var(--shadow-lg);} /* Content Sections */ .content-section{margin-bottom: 1.2rem;} .content-section h2{font-size: 2rem;margin-bottom: 0.6rem;color: var(--accent-color);} .content-section h3{font-size: 1.5rem;margin-bottom: 0.4rem;margin-top: 0.8rem;} .content-section p{color: var(--text-secondary);line-height: 1.8;margin-bottom: 0.4rem;} .content-section ul,.content-section ol{color: var(--text-secondary);line-height: 1.8;margin-left: 2rem;margin-bottom: 1.5rem;} .content-section li{margin-bottom: 0.5rem;} /* Payment Methods */ .payment-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 2rem;margin: 3rem 0;} .payment-card{position: relative;background: var(--bg-card);padding: 0.8rem;border-radius: 16px;border: 1px solid var(--border-color);transition: all 0.4s cubic-bezier(0.4,0,0.2,1);backdrop-filter: blur(20px) saturate(180%);overflow: hidden;} .payment-card::before{content: '';position: absolute;top: 0;left: 0;right: 0;height: 3px;background: linear-gradient(90deg,var(--primary-500),var(--accent-500));transform: scaleX(0);transform-origin: left;transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);} .payment-card:hover::before{transform: scaleX(1);} .payment-card:hover{transform: translateY(-8px) scale(1.02);border-color: var(--border-hover);background: var(--bg-card-hover);box-shadow: var(--shadow-xl),0 0 30px rgba(139,92,246,0.2);} .payment-icon{margin-bottom: 0.4rem;display: flex;align-items: center;justify-content: center;width: 80px;height: 80px;margin: 0 auto 0.4rem;background: rgba(139,92,246,0.1);border-radius: 16px;padding: 1rem;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);} .payment-icon img{width: 100%;height: 100%;object-fit: contain;filter: drop-shadow(0 4px 8px rgba(139,92,246,0.3));transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);} .payment-card:hover .payment-icon{background: rgba(139,92,246,0.2);transform: scale(1.1);} .payment-card:hover .payment-icon img{transform: scale(1.1) rotate(5deg);} .payment-card h3{color: var(--accent-color);margin-bottom: 0.4rem;} .payment-features{list-style: none;margin-left: 0;margin-top: 0.4rem;} .payment-features li{padding: 0.5rem 0;color: var(--text-secondary);} .payment-features li::before{content: '✓ ';color: var(--accent-color);font-weight: bold;margin-right: 0.5rem;} .how-it-works{display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 2rem;margin: 3rem 0;} .step-item{position: relative;text-align: center;background: var(--bg-card);padding: 0.8rem;border-radius: 16px;border: 1px solid var(--border-color);backdrop-filter: blur(20px) saturate(180%);transition: all 0.3s cubic-bezier(0.4,0,0.2,1);} .step-item:hover{transform: translateY(-4px);border-color: var(--border-hover);box-shadow: var(--shadow-lg);} .step-number{width: 60px;height: 60px;background: linear-gradient(135deg,var(--primary-500),var(--accent-500));border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;font-weight: bold;margin: 0 auto 0.4rem;box-shadow: var(--shadow-md);transition: all 0.3s cubic-bezier(0.4,0,0.2,1);} .step-item:hover .step-number{transform: scale(1.1) rotate(5deg);box-shadow: var(--shadow-lg),var(--shadow-glow);} .step-item h3{color: var(--accent-color);margin-bottom: 1rem;} .step-item p{color: var(--text-secondary);} /* Mobile Menu Toggle */ .mobile-menu-toggle{display: none;flex-direction: column;background: transparent;border: none;cursor: pointer;padding: 0.5rem;gap: 4px;} .mobile-menu-toggle span{width: 25px;height: 3px;background: var(--text-primary);border-radius: 2px;transition: all 0.3s;} .mobile-menu-toggle.active span:nth-child(1){transform: rotate(45deg) translate(8px,8px);} .mobile-menu-toggle.active span:nth-child(2){opacity: 0;} .mobile-menu-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(7px,-7px);} /* Hero UI Image Optimization */ img{max-width: 100%;height: auto;display: block;} img[loading="lazy"]{opacity: 0;transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);} img[loading="lazy"].loaded{opacity: 1;} /* SVG Icons Optimization */ .feature-icon img,.payment-icon img{width: 64px;height: 64px;object-fit: contain;} /* Prevent layout shift */ .feature-icon,.payment-icon{min-height: 80px;display: flex;align-items: center;justify-content: center;} /* Mobile Responsive */ @media (max-width: 768px){.nav-wrapper{flex-wrap: wrap;} .mobile-menu-toggle{display: flex;order: 2;} .cta-button{order: 3;padding: 0.6rem 1.2rem;font-size: 0.9rem;} .nav-menu{display: none;width: 100%;flex-direction: column;order: 4;margin-top: 1rem;padding-top: 1rem;border-top: 1px solid var(--border-color);gap: 1rem;} .nav-menu.active{display: flex;} .nav-menu a{padding: 0.75rem;border-bottom: 1px solid rgba(139,92,246,0.1);} .nav-menu a::after{display: none;} .lang-switcher{display: none;} .hero{padding: 1.6rem 0;} .hero h1{font-size: 2.2rem;line-height: 1.2;} .hero-subtitle{font-size: 1.1rem;padding: 0 1rem;} .hero-stats{grid-template-columns: repeat(2,1fr);gap: 0.4rem;padding: 0 1rem;} .stat-item{padding: 0.4rem;} .stat-number{font-size: 2rem;} .stat-label{font-size: 0.85rem;} .hero-cta{padding: 0.9rem 2rem;font-size: 1rem;} .features{padding: 1.2rem 0;} .features h2{font-size: 2rem;padding: 0 1rem;} .features-grid{grid-template-columns: 1fr;gap: 0.6rem;padding: 0 1rem;} .bonus{padding: 1.2rem 0;} .bonus h2{font-size: 2rem;} .bonus-text{font-size: 1.1rem;padding: 0 1rem;} .bonus-features{grid-template-columns: 1fr;gap: 0.75rem;} .reviews{padding: 1.2rem 0;} .reviews h2{font-size: 2rem;padding: 0 1rem;} .reviews-grid{grid-template-columns: 1fr;gap: 0.6rem;padding: 0 1rem;} .cta-section{padding: 1.2rem 0;} .cta-section h2{font-size: 2rem;padding: 0 1rem;} .cta-section p{font-size: 1.1rem;padding: 0 1rem;} .cta-button-large{padding: 1rem 2rem;font-size: 1.1rem;} .footer{padding: 3rem 0 1.5rem;} .footer-grid{grid-template-columns: 1fr;gap: 2rem;} .page-content{padding: 2rem 0;} .page-content h1{font-size: 2rem;padding: 0 1rem;} .page-intro{font-size: 1rem;padding: 0 1rem;} .casino-review{padding: 1.2rem 0;} .casino-review .content-section{padding: 1.2rem;margin: 0 1rem;} .casino-review .content-section h2{font-size: 1.75rem;} .content-section h2{font-size: 1.75rem;} .content-section h3{font-size: 1.4rem;} .payment-grid{grid-template-columns: 1fr;gap: 1.5rem;} .how-it-works{grid-template-columns: 1fr;gap: 1.5rem;} } @media (max-width: 600px){.container{padding: 0 15px;} .hero h1{font-size: 1.8rem;} .hero-subtitle{font-size: 1rem;} .hero-stats{grid-template-columns: 1fr;} .stat-number{font-size: 1.8rem;} .features h2,.bonus h2,.reviews h2,.cta-section h2,.casino-review h2{font-size: 1.75rem;} .casino-review{padding: 1rem 0;} .casino-review .content-section{padding: 1rem;margin: 0;} .casino-review .content-section h2{font-size: 1.5rem;} .feature-card,.review-card,.payment-card{padding: 1.5rem;} .page-content h1{font-size: 1.75rem;} .content-section{padding: 0 0.5rem;} .faq-item summary{padding: 1rem;font-size: 1rem;} .faq-answer{padding: 0 1rem 1rem;} .footer-grid{grid-template-columns: 1fr;gap: 2rem;} .footer-about{max-width: 100%;} .footer-warnings{flex-direction: column;align-items: center;text-align: center;gap: 0.5rem;} .social-links{justify-content: center;} .footer-bottom-content{padding: 0 1rem;} }