*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,sans-serif}
body{background:#f4f5f7;color:#333;line-height:1.6}
.top-bar{background:#1a1f3a;color:#fff;padding:8px 20px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.top-bar a{color:#fff;text-decoration:none}
.btn-login{background:transparent;border:1px solid #fff;color:#fff;padding:6px 18px;border-radius:4px;margin-right:8px;text-decoration:none;font-size:13px}
.btn-register{background:#ff6b1a;color:#fff;padding:6px 18px;border-radius:4px;text-decoration:none;font-size:13px;border:none}
.btn-register:hover,.btn-login:hover{opacity:0.85}
header{background:#1a1f3a;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.logo{font-family:'Impact',sans-serif;font-size:32px;color:#ffb800;text-decoration:none;letter-spacing:2px;font-weight:900;text-shadow:2px 2px 0 #ff6b1a}
.auth-area{display:flex;align-items:center}
nav{background:linear-gradient(90deg,#ff8c1a,#ff6b1a);padding:0}
.nav-list{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;max-width:1200px;margin:0 auto}
.nav-list li a{display:block;padding:14px 28px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;transition:0.3s}
.nav-list li a:hover,.nav-list li a.active{background:rgba(0,0,0,0.25)}
.hero{position:relative;background:linear-gradient(135deg,#3a1f5a,#1a1f3a);padding:0;overflow:hidden}
.hero-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;padding:40px 20px;gap:30px}
.hero-text{flex:1;min-width:300px;color:#fff}
.hero-text h1{font-size:42px;color:#ffb800;line-height:1.2;margin-bottom:20px;text-shadow:2px 2px 0 #ff6b1a}
.hero-text p{font-size:17px;margin-bottom:25px;color:#e0e0e0}
.cta{display:inline-block;background:#ff6b1a;color:#fff;padding:14px 36px;border-radius:30px;text-decoration:none;font-weight:700;font-size:16px;box-shadow:0 4px 15px rgba(255,107,26,0.5)}
.cta:hover{background:#ff8c1a}
.hero-img{flex:1;min-width:280px;text-align:center}
.hero-img img{max-width:100%;height:auto}
.welcome-band{background:#6a1b9a;color:#fff;padding:10px 20px;text-align:center;font-size:14px;letter-spacing:1px}
main{max-width:1200px;margin:30px auto;padding:0 20px}
.section-title{font-size:24px;color:#1a1f3a;margin:25px 0 18px;padding-left:12px;border-left:5px solid #ff6b1a}
.promo-banner{background:linear-gradient(90deg,#0f1a4a,#3a1f5a);border-radius:10px;padding:25px;display:flex;align-items:center;flex-wrap:wrap;gap:25px;color:#fff;margin-bottom:30px;box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.promo-banner img{width:200px;height:200px;border-radius:8px;object-fit:cover}
.promo-text{flex:1;min-width:240px}
.promo-text h2{font-size:28px;color:#ffb800;margin-bottom:12px}
.promo-text .price{font-size:36px;font-weight:900;color:#fff;margin:8px 0}
.promo-text .price span{color:#ffb800}
.promo-text a{display:inline-block;margin-top:12px;background:#ff6b1a;color:#fff;padding:10px 26px;border-radius:25px;text-decoration:none;font-weight:600}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-bottom:35px}
.game-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:transform 0.3s;text-align:center;padding:15px}
.game-card:hover{transform:translateY(-5px)}
.game-card img{max-width:100%;height:auto;display:block;margin:0 auto 10px}
.game-card h3{font-size:15px;color:#1a1f3a;margin-bottom:6px}
.game-card .tag{display:inline-block;background:#22c55e;color:#fff;font-size:11px;padding:3px 10px;border-radius:10px;margin-bottom:8px}
.game-card p{font-size:13px;color:#666}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:35px}
.live-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,0.1)}
.live-card-header{background:#1a1f3a;color:#fff;padding:8px 14px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.live-card-header .now{background:#22c55e;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700}
.live-card img{width:100%;height:auto;display:block}
.live-card-body{padding:14px}
.live-card-body h3{font-size:15px;color:#1a1f3a;margin-bottom:6px}
.live-card-body .time{font-size:12px;color:#888;margin-bottom:10px}
.live-card-body .teams{display:flex;justify-content:space-between;font-size:13px}
.live-card-body .teams b{display:block;color:#ff6b1a;font-size:15px;margin-top:4px}
.about-section{background:#fff;padding:30px;border-radius:10px;margin-bottom:30px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.about-section h2{font-size:22px;color:#1a1f3a;margin-bottom:15px;border-left:4px solid #ff6b1a;padding-left:10px}
.about-section p{margin-bottom:14px;color:#444;font-size:15px}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:20px}
.feature{background:#f8f9fc;padding:20px;border-radius:8px;border-top:3px solid #ff6b1a}
.feature h3{font-size:16px;color:#1a1f3a;margin-bottom:8px}
.feature p{font-size:14px;color:#555;margin-bottom:0}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin:25px 0}
.stat-box{background:linear-gradient(135deg,#ff6b1a,#ff8c1a);color:#fff;padding:25px;border-radius:10px;text-align:center}
.stat-box .num{font-size:32px;font-weight:900;display:block}
.stat-box .label{font-size:13px;margin-top:6px;display:block}
.testimonial{background:#fff3e0;border-left:4px solid #ff6b1a;padding:20px;border-radius:8px;margin:20px 0;font-style:italic;color:#444}
.testimonial b{display:block;margin-top:8px;color:#1a1f3a;font-style:normal}
.faq-section{background:#fff;padding:30px;border-radius:10px;margin-bottom:30px;box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.faq-section h2{font-size:22px;color:#1a1f3a;margin-bottom:18px;border-left:4px solid #ff6b1a;padding-left:10px}
.faq-item{border-bottom:1px solid #eee;padding:16px 0}
.faq-item h4{color:#ff6b1a;font-size:16px;margin-bottom:8px}
.faq-item p{color:#444;font-size:14px}
.faq-item ul{margin:8px 0 0 22px;color:#444;font-size:14px}
footer{background:#0f1a3a;color:#bbb;padding:40px 20px 20px;margin-top:40px}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.footer-col h4{color:#ffb800;font-size:15px;margin-bottom:14px;letter-spacing:1px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{color:#bbb;text-decoration:none;font-size:13px}
.footer-col ul li a:hover{color:#ffb800}
.footer-col p{font-size:13px;line-height:1.7}
.copyright{text-align:center;border-top:1px solid #2a3460;margin-top:30px;padding-top:20px;font-size:12px;color:#888}
@media(max-width:768px){
.hero-text h1{font-size:30px}
.nav-list li a{padding:10px 16px;font-size:13px}
.logo{font-size:26px}
.top-bar{flex-direction:column;gap:8px}
header{flex-direction:column;gap:12px}
}