*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,sans-serif}
body{background:#0f1424;color:#e6e9f2;line-height:1.6}
a{color:inherit;text-decoration:none}
header{background:#161b2d;border-bottom:1px solid #232943;position:sticky;top:0;z-index:100}
.nav-wrap{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;flex-wrap:wrap;gap:12px}
.logo{font-size:26px;font-weight:800;color:#2ad9c4;letter-spacing:1px}
.logo span{color:#fff}
nav ul{list-style:none;display:flex;gap:8px;flex-wrap:wrap}
nav a{padding:10px 18px;border-radius:20px;font-size:14px;font-weight:600;transition:.2s;color:#cfd4e8}
nav a.active,nav a:hover{background:#1f2540;color:#2ad9c4}
.btn-group{display:flex;gap:10px}
.btn{padding:10px 22px;border-radius:24px;font-weight:700;font-size:14px;cursor:pointer;border:none;transition:.2s}
.btn-join{background:#2ad9c4;color:#0f1424}
.btn-join:hover{background:#22b8a6}
.btn-login{background:transparent;color:#fff;border:1px solid #3a4060}
.btn-login:hover{background:#1f2540}
.hero{position:relative;background:linear-gradient(135deg,#1a2040 0%,#0f1424 100%);padding:60px 24px;overflow:hidden}
.hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.2;margin-bottom:18px;color:#fff;font-weight:800}
.hero h1 em{color:#2ad9c4;font-style:normal}
.hero p{font-size:16px;color:#b8bdd4;margin-bottom:24px}
.hero-img img{width:100%;max-width:480px;height:auto;border-radius:14px;display:block;margin:0 auto}
.section{max-width:1280px;margin:0 auto;padding:60px 24px}
.section h2{font-size:30px;color:#fff;margin-bottom:14px;font-weight:700}
.section .lead{color:#9ea3bf;margin-bottom:32px;max-width:760px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:#161b2d;border-radius:14px;padding:28px;margin-top:30px}
.stat{text-align:center}
.stat b{display:block;font-size:26px;color:#2ad9c4;margin-bottom:4px}
.stat span{font-size:13px;color:#b8bdd4}
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.game-card{background:#161b2d;border-radius:12px;overflow:hidden;border:1px solid #232943;transition:.2s}
.game-card:hover{transform:translateY(-4px);border-color:#2ad9c4}
.game-card img{width:100%;height:auto;display:block}
.game-card .info{padding:14px}
.game-card h4{font-size:15px;color:#fff;margin-bottom:6px}
.game-card p{font-size:12px;color:#9ea3bf}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature{background:#161b2d;padding:26px;border-radius:14px;border:1px solid #232943}
.feature h3{color:#2ad9c4;font-size:18px;margin-bottom:10px}
.feature p{color:#b8bdd4;font-size:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.split img{width:100%;max-width:480px;height:auto;border-radius:12px;display:block}
.split h3{color:#fff;font-size:22px;margin-bottom:12px}
.split p{color:#b8bdd4;margin-bottom:12px}
.process{background:#161b2d;border-radius:14px;padding:30px;margin-top:24px}
.process ol{padding-left:22px;color:#cfd4e8}
.process ol li{margin-bottom:10px;line-height:1.7}
.process h3{color:#2ad9c4;margin-bottom:14px;font-size:18px}
.testimonial{background:#1a2040;border-left:4px solid #2ad9c4;padding:22px;border-radius:8px;margin-top:30px;color:#cfd4e8;font-style:italic}
.faq-item{background:#161b2d;border:1px solid #232943;border-radius:10px;padding:18px 22px;margin-bottom:14px}
.faq-item h4{color:#2ad9c4;font-size:16px;margin-bottom:8px}
.faq-item p{color:#b8bdd4;font-size:14px}
.faq-item ul{color:#b8bdd4;font-size:14px;padding-left:20px;margin-top:6px}
footer{background:#0a0e1c;padding:50px 24px 20px;border-top:1px solid #232943;margin-top:40px}
.foot-wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.foot-col h5{color:#2ad9c4;font-size:15px;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:8px;font-size:13px;color:#9ea3bf}
.foot-col a:hover{color:#2ad9c4}
.foot-bottom{max-width:1280px;margin:30px auto 0;padding-top:20px;border-top:1px solid #232943;text-align:center;color:#737a98;font-size:12px}
.foot-bottom .badge{display:inline-block;background:#2ad9c4;color:#0f1424;padding:4px 10px;border-radius:12px;font-weight:700;margin-left:8px}
@media (max-width:900px){
  .hero-inner,.split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .game-grid{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
  .foot-wrap{grid-template-columns:1fr 1fr}
  .hero h1{font-size:30px}
  nav ul{order:3;width:100%;justify-content:center}
}
@media (max-width:520px){
  .foot-wrap{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}