:root{--primary: #A855F7;--primary-light: #C084FC;--primary-dark: #9333EA;--secondary: #06B6D4;--secondary-light: #22D3EE;--accent: #F472B6;--neon-green: #4ADE80;--bg-dark: #030014;--bg-darker: #000000;--bg-card: rgba(15, 10, 40, .6);--bg-card-solid: #0F0A28;--bg-card-hover: rgba(25, 15, 60, .8);--text-primary: #FFFFFF;--text-secondary: #C4B5FD;--text-muted: #8B7FC7;--border: rgba(168, 85, 247, .2);--border-hover: rgba(168, 85, 247, .5);--glow-purple: rgba(168, 85, 247, .5);--glow-cyan: rgba(6, 182, 212, .5);--gradient-main: linear-gradient(135deg, #A855F7 0%, #6366F1 50%, #06B6D4 100%);--gradient-card: linear-gradient(135deg, rgba(168, 85, 247, .1) 0%, rgba(6, 182, 212, .1) 100%);--gradient-text: linear-gradient(90deg, #A855F7, #06B6D4, #A855F7)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-dark);color:var(--text-primary);line-height:1.6;overflow-x:hidden;min-height:100vh}.bg-grid{position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(168,85,247,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.03) 1px,transparent 1px);background-size:80px 80px;pointer-events:none;z-index:0;animation:gridMove 20s linear infinite}@keyframes gridMove{0%{transform:translate(0)}to{transform:translate(80px,80px)}}.bg-glow{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.bg-glow:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 30%,rgba(168,85,247,.15) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(6,182,212,.12) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(244,114,182,.08) 0%,transparent 50%);animation:glowFloat 15s ease-in-out infinite}@keyframes glowFloat{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(5deg)}66%{transform:translate(-20px,20px) rotate(-5deg)}}.orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}.orb-1{width:600px;height:600px;background:#a855f733;top:-200px;right:-200px;animation:orbFloat1 20s ease-in-out infinite}.orb-2{width:400px;height:400px;background:#06b6d426;bottom:-100px;left:-100px;animation:orbFloat2 25s ease-in-out infinite}.orb-3{width:300px;height:300px;background:#f472b61a;top:50%;left:50%;animation:orbFloat3 18s ease-in-out infinite}@keyframes orbFloat1{0%,to{transform:translate(0)}50%{transform:translate(-100px,100px)}}@keyframes orbFloat2{0%,to{transform:translate(0)}50%{transform:translate(80px,-80px)}}@keyframes orbFloat3{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-30%,-70%)}}header{position:fixed;top:0;left:0;right:0;z-index:100;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);background:#030014b3;border-bottom:1px solid var(--border)}nav{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:1rem;font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:700;color:var(--text-primary);text-decoration:none;transition:transform .2s}.logo:hover{transform:scale(1.02)}.logo-icon{width:44px;height:38px;filter:drop-shadow(0 0 20px var(--glow-purple))}.logo-ai{background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-links{display:flex;gap:2.5rem}.nav-links a{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:.95rem;transition:all .2s;position:relative}.nav-links a:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--gradient-main);transition:width .3s}.nav-links a:hover{color:var(--text-primary)}.nav-links a:hover:after{width:100%}main{position:relative;z-index:1;padding-top:80px}.hero{min-height:calc(100vh - 80px);display:flex;align-items:center;justify-content:center;max-width:1400px;margin:0 auto;padding:4rem 2rem;gap:6rem}.hero-content{flex:1;max-width:700px}.badge{display:inline-flex;align-items:center;gap:.75rem;padding:.625rem 1.25rem;background:var(--gradient-card);border:1px solid var(--border);border-radius:50px;font-size:.875rem;color:var(--text-secondary);margin-bottom:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.badge-dot{width:8px;height:8px;background:var(--neon-green);border-radius:50%;box-shadow:0 0 10px var(--neon-green);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 10px var(--neon-green)}50%{opacity:.6;box-shadow:0 0 20px var(--neon-green),0 0 40px var(--neon-green)}}.hero h1{font-family:Space Grotesk,sans-serif;font-size:clamp(3.5rem,10vw,6rem);font-weight:700;line-height:1.05;margin-bottom:1.5rem;letter-spacing:-.02em}.gradient-text{background:var(--gradient-text);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:0% center}to{background-position:200% center}}.hero-subtitle{font-size:1.35rem;color:var(--text-secondary);margin-bottom:2.5rem;max-width:540px;line-height:1.7}.cta-button{display:inline-flex;align-items:center;gap:.875rem;padding:1.125rem 2.25rem;background:var(--gradient-main);color:#fff;font-weight:600;font-size:1.05rem;text-decoration:none;border-radius:14px;transition:all .3s;box-shadow:0 4px 20px var(--glow-purple),0 0 0 1px #ffffff1a inset;position:relative;overflow:hidden}.cta-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.cta-button:hover{transform:translateY(-3px);box-shadow:0 8px 40px var(--glow-purple),0 0 60px var(--glow-cyan),0 0 0 1px #fff3 inset}.cta-button:hover:before{left:100%}.cta-button svg{transition:transform .3s}.cta-button:hover svg{transform:translate(5px)}.hero-visual{flex:1;position:relative;height:500px;display:flex;align-items:center;justify-content:center}.floating-card{position:absolute;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:2rem;box-shadow:0 25px 50px #00000080,0 0 0 1px #ffffff0d inset}.card-icon{font-size:3.5rem;filter:drop-shadow(0 0 20px rgba(255,255,255,.3))}.card-1{top:5%;left:5%;animation:float1 6s ease-in-out infinite}.card-2{top:35%;right:5%;animation:float2 7s ease-in-out infinite}.card-3{bottom:5%;left:25%;animation:float3 5s ease-in-out infinite}@keyframes float1{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-25px) rotate(3deg)}}@keyframes float2{0%,to{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-30px) rotate(-3deg)}}@keyframes float3{0%,to{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-20px) rotate(-2deg)}}.games-section{max-width:1400px;margin:0 auto;padding:8rem 2rem}.section-header{text-align:center;margin-bottom:5rem}.section-header h2{font-family:Space Grotesk,sans-serif;font-size:clamp(2.5rem,6vw,4rem);font-weight:700;margin-bottom:1rem;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-header p{color:var(--text-secondary);font-size:1.25rem}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:2.5rem}.game-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative}.game-card a{text-decoration:none;color:inherit;display:block}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--gradient-main);opacity:0;transition:opacity .4s;z-index:0}.game-card:hover{transform:translateY(-12px) scale(1.02);border-color:var(--border-hover);box-shadow:0 30px 60px #0006,0 0 80px var(--glow-purple),0 0 120px var(--glow-cyan)}.game-card:hover:before{opacity:.05}.game-thumbnail{width:100%;height:220px;background:linear-gradient(135deg,var(--bg-card-solid) 0%,rgba(30,20,60,.8) 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;z-index:1}.game-thumbnail:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--gradient-main);opacity:.15}.game-thumbnail:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(168,85,247,.1),transparent);animation:rotate 10s linear infinite}@keyframes rotate{to{transform:rotate(360deg)}}.game-icon{font-size:6rem;position:relative;z-index:2;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));transition:transform .4s}.game-card:hover .game-icon{transform:scale(1.15) rotate(5deg)}.game-card-content{padding:2rem;position:relative;z-index:1}.game-title{font-family:Space Grotesk,sans-serif;font-size:1.75rem;font-weight:700;margin-bottom:.75rem;transition:color .3s}.game-card:hover .game-title{background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-description{color:var(--text-secondary);font-size:1rem;margin-bottom:1.25rem;line-height:1.6}.game-tags{display:flex;gap:.625rem;flex-wrap:wrap}.tag{padding:.5rem 1rem;background:#a855f726;border:1px solid rgba(168,85,247,.2);border-radius:8px;font-size:.8rem;font-weight:500;color:var(--primary-light);transition:all .3s}.game-card:hover .tag{background:#a855f740;border-color:#a855f766}.play-indicator{display:flex;align-items:center;gap:.625rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border);color:var(--primary-light);font-weight:600;font-size:.95rem;transition:all .3s}.game-card:hover .play-indicator{color:var(--secondary-light)}.play-indicator svg{transition:transform .3s}.game-card:hover .play-indicator svg{transform:translate(6px)}.stats-section{max-width:1400px;margin:0 auto;padding:4rem 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}.stat-card{text-align:center;padding:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.stat-number{font-family:Space Grotesk,sans-serif;font-size:3rem;font-weight:700;background:var(--gradient-main);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{color:var(--text-secondary);margin-top:.5rem}footer{position:relative;z-index:1;background:var(--bg-card-solid);border-top:1px solid var(--border);margin-top:4rem}.footer-content{max-width:1400px;margin:0 auto;padding:4rem 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2rem}.footer-brand .logo{margin-bottom:.75rem}.footer-brand p{color:var(--text-muted)}.footer-links a{color:var(--text-secondary);text-decoration:none;padding:.75rem 1.5rem;border:1px solid var(--border);border-radius:10px;transition:all .3s;display:inline-block}.footer-links a:hover{border-color:var(--primary);background:#a855f71a;color:var(--primary-light)}.footer-bottom{max-width:1400px;margin:0 auto;padding:1.5rem 2rem;border-top:1px solid var(--border);text-align:center}.footer-bottom p{color:var(--text-muted);font-size:.875rem}@media(max-width:1024px){.hero{flex-direction:column;text-align:center;gap:3rem;padding:3rem 1.5rem}.hero-content{max-width:100%}.hero-subtitle{margin:0 auto 2rem}.hero-visual{height:300px;width:100%}}@media(max-width:768px){.hero-visual{display:none}.nav-links{gap:1.25rem}.games-grid{grid-template-columns:1fr}.footer-content{flex-direction:column;text-align:center}.games-section{padding:4rem 1.5rem}}.loading{display:flex;align-items:center;justify-content:center;min-height:300px}.loading-spinner{width:50px;height:50px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.no-games{text-align:center;padding:4rem 2rem;color:var(--text-secondary)}.no-games-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.glass{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border)}
