*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;}
body{background:#f1f3f5;color:#222;line-height:1.6;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1180px;margin:0 auto;padding:0 16px;}

/* Top Header */
.top-header{background:#000;color:#fff;padding:10px 0;}
.top-header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.logo{font-size:24px;font-weight:900;color:#ffd200;letter-spacing:-1px;}
.logo span{color:#fff;}
.top-actions{display:flex;align-items:center;gap:10px;}
.btn{padding:8px 16px;border-radius:4px;font-weight:bold;font-size:14px;display:inline-block;cursor:pointer;border:none;}
.btn-login{background:transparent;color:#fff;border:1px solid #fff;}
.btn-register{background:#ffd200;color:#000;}
.btn-register:hover{background:#ffdd33;}

/* Nav */
.main-nav{background:#000;border-top:1px solid #222;padding:8px 0;}
.main-nav ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap;}
.main-nav a{color:#fff;padding:8px 14px;font-weight:bold;font-size:14px;border-radius:3px;display:block;text-transform:uppercase;}
.main-nav a:hover{background:#222;}
.main-nav a.active{color:#ffd200;}

.sub-nav{background:#fff;border-bottom:1px solid #e2e2e2;padding:10px 0;}
.sub-nav ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:bold;}
.sub-nav a:hover{color:#ffd200;}

/* Hero */
.hero-section{background:#fff;padding:30px 0;}
.section-title{color:#ff6600;font-size:22px;font-weight:900;text-transform:uppercase;margin-bottom:20px;border-bottom:2px solid #f1f3f5;padding-bottom:8px;}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;}
.hero-main{background:#0a1f3d;color:#fff;border-radius:6px;overflow:hidden;position:relative;}
.hero-main img{width:100%;height:auto;}
.hero-main-content{padding:20px;}
.hero-tag{background:#ffd200;color:#000;display:inline-block;padding:4px 8px;font-size:11px;font-weight:bold;margin-bottom:8px;text-transform:uppercase;}
.hero-main h1{font-size:34px;line-height:1.1;margin:10px 0 12px;}
.hero-main .btn-green{background:#0bd07d;color:#000;padding:10px 24px;font-weight:bold;border-radius:4px;display:inline-block;}
.hero-main .small-text{font-size:11px;color:#bbb;margin-top:12px;}

.hero-side{display:flex;flex-direction:column;gap:12px;}
.side-card{background:#fff;border:1px solid #e6e6e6;border-radius:4px;display:flex;gap:10px;padding:8px;border-bottom:3px solid #ffd200;}
.side-card img{width:90px;height:60px;object-fit:cover;border-radius:3px;}
.side-card-text{flex:1;}
.side-card-text p{font-size:13px;font-weight:bold;line-height:1.3;color:#111;}
.side-card-text .cat{color:#ff6600;font-size:11px;text-transform:uppercase;font-weight:bold;margin-top:6px;display:block;}

/* Feature article */
.feature-article{background:#fff;padding:20px 0 30px;}
.feature-article h2{font-size:24px;margin-bottom:8px;color:#111;}
.feature-article .lead{color:#444;font-size:15px;margin-bottom:14px;}
.feature-article .cat-label{color:#ff6600;font-size:11px;text-transform:uppercase;font-weight:bold;}

/* Game cards grid */
.game-grid{background:#fff;padding:20px 0 40px;}
.cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.card{background:#fff;border:1px solid #e6e6e6;border-bottom:3px solid #ffd200;border-radius:4px;overflow:hidden;}
.card .card-img{position:relative;overflow:hidden;background:#0a1f3d;display:flex;align-items:center;justify-content:center;}
.card .card-img img{width:100%;height:160px;object-fit:cover;}
.card-body{padding:14px;}
.card-body h3{font-size:15px;margin-bottom:8px;line-height:1.3;color:#111;}
.card-body .cat{color:#ff6600;font-size:11px;text-transform:uppercase;font-weight:bold;}

/* About brand */
.brand-section{background:#f7f8fa;padding:40px 0;}
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.brand-grid h2{font-size:22px;color:#ff6600;text-transform:uppercase;margin-bottom:14px;}
.brand-grid p{margin-bottom:12px;font-size:15px;color:#333;}
.brand-grid img{border-radius:6px;}

/* Stats */
.stats{background:#000;color:#fff;padding:36px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stat-item h3{font-size:30px;color:#ffd200;margin-bottom:6px;}
.stat-item p{font-size:13px;color:#ccc;text-transform:uppercase;}

/* Features grid */
.features{background:#fff;padding:40px 0;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px;}
.feat{background:#f7f8fa;padding:20px;border-left:4px solid #ffd200;border-radius:4px;}
.feat h3{font-size:16px;margin-bottom:8px;color:#111;}
.feat p{font-size:14px;color:#444;}

/* Process */
.process-section{background:#0a1f3d;color:#fff;padding:40px 0;}
.process-section h2{color:#ffd200;text-transform:uppercase;font-size:22px;margin-bottom:20px;}
.process-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.process-box{background:#11294d;padding:20px;border-radius:6px;}
.process-box h3{color:#ffd200;font-size:17px;margin-bottom:10px;}
.process-box ol{padding-left:20px;}
.process-box li{margin-bottom:8px;font-size:14px;color:#dde;}

/* Testimonial */
.testimonial{background:#fff;padding:36px 0;}
.testimonial-box{background:#fff7d6;border-left:5px solid #ffd200;padding:20px;border-radius:4px;font-style:italic;color:#333;font-size:15px;max-width:780px;margin:0 auto;}

/* FAQ */
.faq-section{background:#f7f8fa;padding:40px 0;}
.faq-item{background:#fff;border:1px solid #e6e6e6;border-radius:4px;padding:16px 20px;margin-bottom:12px;}
.faq-item h4{font-size:16px;color:#0a1f3d;margin-bottom:8px;}
.faq-item p{font-size:14px;color:#444;}
.faq-item ul{margin-top:8px;padding-left:22px;font-size:14px;color:#444;}

/* Footer */
footer{background:#000;color:#bbb;padding:36px 0 20px;font-size:13px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:20px;}
.footer-col h4{color:#fff;font-size:13px;text-transform:uppercase;margin-bottom:12px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:7px;}
.footer-col a:hover{color:#ffd200;}
.footer-bottom{border-top:1px solid #222;padding-top:14px;color:#888;font-size:12px;line-height:1.7;}

@media(max-width:900px){
  .hero-grid,.brand-grid,.process-grid{grid-template-columns:1fr;}
  .cards-row,.feat-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-main h1{font-size:24px;}
}
@media(max-width:600px){
  .cards-row,.feat-grid,.stats-grid,.footer-grid{grid-template-columns:1fr;}
  .main-nav ul{justify-content:flex-start;overflow-x:auto;}
}