/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
body, html { height: 100%; background-color: black; color: white; overflow-x: hidden; }
.container { position: relative; min-height: 100vh; }

/* Background */
.background .gradient { position: absolute; inset:0; background: linear-gradient(to bottom, black, #0d0d1a, black); opacity:0.9; z-index:-10;}
.background .grid-lines { position:absolute; inset:0; background-image: linear-gradient(90deg, rgba(0,212,255,0.3) 1px, transparent 1px), linear-gradient(rgba(192,132,252,0.3) 1px, transparent 1px); background-size: 80px 80px; opacity:0.2; animation: gridMove 20s linear infinite; z-index:-9;}
@keyframes gridMove {0%{background-position:0 0;} 100%{background-position:100px 100px;}}

.glow { position:absolute; width:24rem; height:24rem; border-radius:50%; filter: blur(6rem); opacity:0.3; animation:pulse 12s ease-in-out infinite;}
.circle1{ top:25%; left:33%; background-color:#00d4ff; }
.circle2{ bottom:25%; right:25%; background-color:#c084fc; animation-delay:5s;}
@keyframes pulse {0%,100%{opacity:0.2; transform:scale(0.8);} 50%{opacity:0.6; transform:scale(1.2);}}

/* Hero Section */
.hero{ position:relative; text-align:center; padding:6rem 1.5rem; z-index:1; }
.hero .logo{ width:250px; filter:drop-shadow(0 0 25px #00d4ff); margin:0 auto 1.5rem; }
.hero h1{ font-size:4rem; color:#00d4ff; text-shadow:0 0 20px #00d4ff; }
.hero p{ margin-top:1.5rem; font-size:1.25rem; color:#c084fc; }

/* Buttons */
.btn { margin-top:2rem; padding:0.75rem 1.5rem; border:none; border-radius:1rem; font-weight:bold; cursor:pointer; transition: transform 0.2s, box-shadow 0.2s; }
.btn:hover{ transform:scale(1.05); }
.btn-primary{ background-color:#00d4ff; color:black; box-shadow:0 0 25px #00d4ff; }
.btn-primary:hover{ box-shadow:0 0 35px #c084fc; }
.btn-secondary{ background-color:#c084fc; color:white; box-shadow:0 0 25px #c084fc; }
.btn-secondary:hover{ box-shadow:0 0 35px #00d4ff; }

/* Games Section */
.games{text-align:center; padding:5rem 1.5rem;}
.games h2{ font-size:3rem; color:#c084fc; text-shadow:0 0 15px #c084fc;}
.cards{ display:grid; grid-template-columns:1fr; gap:2rem; margin-top:3rem;}
@media(min-width:768px){.cards{ grid-template-columns:repeat(3,1fr);}}
.card{ background-color:#0d0d1a; border:1px solid #1f1f3d; padding:1.5rem; border-radius:1rem; text-align:center; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;}
.card:hover{ transform:scale(1.05); box-shadow:0 0 20px #c084fc; border-color:#00d4ff; }
.card .game-logo{ width:80px; margin-bottom:1rem; }

/* CTA Section */
.cta{text-align:center; padding:5rem 1.5rem;}
.cta h2{ font-size:2.5rem; color:#00d4ff; text-shadow:0 0 20px #00d4ff; }

/* Fade-in + Scale Animation */
.fade-in-scale{ opacity:0; transform:scale(0.8); transition: opacity 1s ease, transform 1s ease;}
.fade-in-scale.visible{ opacity:1; transform:scale(1);}
[data-delay="0"]{ transition-delay:0s;} [data-delay="1"]{ transition-delay:0.3s;} [data-delay="2"]{ transition-delay:0.6s;} [data-delay="3"]{ transition-delay:0.9s;}
[data-delay="4"]{ transition-delay:1.2s;} [data-delay="5"]{ transition-delay:1.5s;} [data-delay="6"]{ transition-delay:1.8s;} [data-delay="7"]{ transition-delay:2.1s;}
[data-delay="8"]{ transition-delay:2.4s;} [data-delay="9"]{ transition-delay:2.7s;} [data-delay="10"]{ transition-delay:3s;} [data-delay="11"]{ transition-delay:3.3s;} [data-delay="12"]{ transition-delay:3.6s;}
[data-delay="13"]{ transition-delay:3.9s;} [data-delay="14"]{ transition-delay:4.2s;} [data-delay="15"]{ transition-delay:4.5s;}