*, *::before, *::after{box-sizing: border-box} html{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility} body{margin: 0;padding: 0;line-height: 1.6;color: #1f2937;background: #ffffff;overflow-x: hidden} .container{max-width: 1280px;margin: 0 auto;padding: 0 1rem;contain: layout} .hero-section{min-height: 60vh;display: flex;align-items: center;background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);contain: layout style;transform: translateZ(0)} .hero-content{text-align: center;contain: layout style} .hero-title{font-size: clamp(2rem, 5vw, 3.5rem);font-weight: 800;line-height: 1.1;letter-spacing: -0.025em;color: #1f2937;margin-bottom: 1rem;contain: layout style} .hero-subtitle{font-size: clamp(1rem, 2.5vw, 1.25rem);line-height: 1.5;color: #4b5563;margin-bottom: 2rem;max-width: 42rem;margin-left: auto;margin-right: auto} .cta-button-primary{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 1rem 2rem;font-size: 1.125rem;font-weight: 600;text-decoration: none;color: white;background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);border: none;border-radius: 0.75rem;box-shadow: 0 4px 14px 0 rgb(37 99 235 / 0.25);transition: transform 0.2s ease, box-shadow 0.2s ease;cursor: pointer;min-height: 48px;touch-action: manipulation;will-change: transform;transform: translateZ(0)} .cta-button-primary:hover{transform: translateY(-2px) translateZ(0);box-shadow: 0 8px 25px 0 rgb(37 99 235 / 0.35)} .cta-button-primary:active{transform: translateY(0) translateZ(0)} .nav-container{position: sticky;top: 0;z-index: 50;background: rgb(255 255 255 / 0.95);backdrop-filter: blur(8px);border-bottom: 1px solid #e5e7eb;contain: layout style} .nav-content{display: flex;align-items: center;justify-content: space-between;height: 4rem;contain: layout} .nav-logo{font-size: 1.5rem;font-weight: 800;color: #2563eb;text-decoration: none} .casino-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 1.5rem;margin: 2rem 0;contain: layout} .casino-card{background: white;border: 2px solid #e5e7eb;border-radius: 1rem;padding: 1.5rem;box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);transition: transform 0.2s ease, box-shadow 0.2s ease;contain: layout style;will-change: transform;transform: translateZ(0);min-height: 400px} .casino-card:hover{transform: translateY(-4px) translateZ(0);box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)} .casino-logo-container{aspect-ratio: 3/2;display: flex;align-items: center;justify-content: center;margin-bottom: 1rem;contain: layout style size;background: #f9fafb;border-radius: 0.5rem} .casino-logo{max-width: 100%;max-height: 100%;object-fit: contain;image-rendering: -webkit-optimize-contrast} .skeleton{background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);background-size: 200% 100%;animation: skeleton-loading 1.5s infinite;border-radius: 0.5rem} @keyframes skeleton-loading{0%{background-position: 200% 0} 100%{background-position: -200% 0} } @media (max-width: 768px){.container{padding: 0 0.75rem} .hero-section{min-height: 50vh;padding: 2rem 0} .casino-grid{grid-template-columns: 1fr;gap: 1rem} .casino-card{min-height: 350px;padding: 1rem} .cta-button-primary{width: 100%;padding: 1rem} } @media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important} }