*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Helvetica Neue',Arial,sans-serif;background:#f4f4f4;color:#222;line-height:1.55;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* Header */
.top-bar{background:#000;color:#bbb;font-size:12px;padding:6px 0;}
.top-bar .wrap{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.top-bar a{color:#bbb;margin-left:14px;}
.top-bar a:hover{color:#fff;}

header.main-header{background:#fff;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:1000;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.header-inner{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.logo{font-size:28px;font-weight:900;color:#e30613;letter-spacing:-1px;background:#000;padding:6px 14px;border-radius:6px;color:#fff;display:inline-flex;align-items:center;}
.logo span{color:#e30613;}
nav.primary{flex:1;}
nav.primary ul{list-style:none;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
nav.primary a{padding:10px 14px;font-weight:600;font-size:14px;color:#222;border-radius:4px;transition:.2s;}
nav.primary a:hover,nav.primary a.active{background:#e30613;color:#fff;}
.auth-buttons{display:flex;gap:8px;}
.btn{padding:10px 18px;font-weight:700;font-size:13px;border-radius:4px;border:none;cursor:pointer;transition:.2s;display:inline-block;text-align:center;}
.btn-login{background:#fff;border:2px solid #000;color:#000;}
.btn-login:hover{background:#000;color:#fff;}
.btn-register{background:#e30613;color:#fff;border:2px solid #e30613;}
.btn-register:hover{background:#b80510;border-color:#b80510;}

.menu-toggle{display:none;background:none;border:none;font-size:26px;cursor:pointer;}

/* Hero */
.hero{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a2e 50%,#16213e 100%);color:#fff;padding:50px 16px;position:relative;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.15;margin-bottom:18px;font-weight:900;}
.hero h1 em{color:#ffcb05;font-style:normal;}
.hero p.lead{font-size:16px;color:#d0d0d0;margin-bottom:24px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.hero-img-wrap{display:flex;justify-content:center;}
.hero-img-wrap img{border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5);}

/* Stats Strip */
.stats-strip{background:#e30613;color:#fff;padding:24px 16px;}
.stats-strip .wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stats-strip .num{font-size:32px;font-weight:900;display:block;}
.stats-strip .lbl{font-size:13px;text-transform:uppercase;letter-spacing:1px;opacity:.9;}

/* Section common */
section.block{padding:50px 16px;}
section.block .wrap{max-width:1280px;margin:0 auto;}
.section-title{text-align:center;margin-bottom:36px;}
.section-title h2{font-size:30px;color:#111;margin-bottom:8px;font-weight:800;}
.section-title p{color:#666;font-size:14px;}

/* Game grid */
.game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.game-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:.25s;cursor:pointer;}
.game-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.18);}
.game-card .img-frame{background:#0d0d0d;display:flex;justify-content:center;align-items:center;padding:0;overflow:hidden;}
.game-card .img-frame img{max-width:100%;max-height:200px;width:auto;}
.game-card .meta{padding:12px;}
.game-card h3{font-size:14px;font-weight:700;color:#222;margin-bottom:4px;}
.game-card .tag{font-size:11px;color:#e30613;text-transform:uppercase;font-weight:700;letter-spacing:.5px;}

/* Categories two-col */
.cat-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cat-block{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.08);display:flex;flex-direction:column;}
.cat-block .visual{background:#111;display:flex;justify-content:center;align-items:center;min-height:280px;}
.cat-block .visual img{max-width:100%;max-height:280px;width:auto;height:auto;}
.cat-block .body{padding:22px;}
.cat-block h3{font-size:22px;color:#111;margin-bottom:10px;}
.cat-block p{color:#555;font-size:14px;margin-bottom:14px;}

/* Brand article */
.brand-article{background:#fff;}
.brand-article .wrap{max-width:1080px;}
.brand-article h2{font-size:28px;margin-bottom:18px;color:#111;}
.brand-article h3{font-size:20px;margin:24px 0 10px;color:#222;}
.brand-article p{margin-bottom:14px;color:#444;font-size:15px;}
.brand-article ul{margin:10px 0 18px 22px;color:#444;font-size:15px;}
.brand-article ul li{margin-bottom:6px;}
.quote-box{background:#fff8e1;border-left:4px solid #ffcb05;padding:16px 20px;margin:20px 0;font-style:italic;color:#5d4f1a;border-radius:0 6px 6px 0;}

/* Features grid */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.feature{background:#fff;padding:24px;border-radius:10px;text-align:center;border-top:3px solid #e30613;}
.feature .icon-img{display:flex;justify-content:center;margin-bottom:14px;}
.feature .icon-img img{max-height:90px;width:auto;}
.feature h3{font-size:17px;color:#111;margin-bottom:8px;}
.feature p{font-size:14px;color:#666;}

/* FAQ */
.faq-section{background:#f9f9f9;}
.faq-list{max-width:920px;margin:0 auto;}
.faq-item{background:#fff;border-radius:8px;padding:18px 22px;margin-bottom:12px;border-left:3px solid #e30613;box-shadow:0 1px 4px rgba(0,0,0,.05);}
.faq-item h4{font-size:16px;color:#111;margin-bottom:8px;}
.faq-item p{color:#555;font-size:14px;}
.faq-item ul{margin:8px 0 0 22px;color:#555;font-size:14px;}

/* Testimonial */
.testimonial-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.testimonial{background:#fff;padding:22px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);}
.testimonial .stars{color:#ffcb05;font-size:15px;margin-bottom:8px;}
.testimonial p{font-size:14px;color:#444;margin-bottom:12px;font-style:italic;}
.testimonial .author{font-size:13px;color:#888;font-weight:600;}

/* Footer */
footer{background:#0c0c0c;color:#aaa;padding:50px 16px 20px;}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;}
footer h4{color:#fff;font-size:15px;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px;}
footer ul{list-style:none;}
footer ul li{margin-bottom:8px;font-size:13px;}
footer ul a:hover{color:#e30613;}
footer .brand-text{color:#bbb;font-size:13px;line-height:1.7;margin-top:12px;}
.footer-bottom{max-width:1280px;margin:30px auto 0;padding-top:20px;border-top:1px solid #222;text-align:center;font-size:12px;color:#666;}

/* Mobile */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .hero h1{font-size:30px;}
  .game-grid{grid-template-columns:repeat(3,1fr);}
  .cat-row{grid-template-columns:1fr;}
  .feature-grid{grid-template-columns:1fr;}
  .testimonial-row{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .stats-strip .wrap{grid-template-columns:repeat(2,1fr);}
  nav.primary{order:5;width:100%;display:none;}
  nav.primary.open{display:block;}
  nav.primary ul{flex-direction:column;gap:0;}
  nav.primary a{display:block;padding:12px 8px;border-bottom:1px solid #eee;}
  .menu-toggle{display:block;}
  .auth-buttons .btn{padding:8px 12px;font-size:12px;}
}
@media(max-width:520px){
  .game-grid{grid-template-columns:repeat(2,1fr);}
  .footer-inner{grid-template-columns:1fr;}
  .hero h1{font-size:24px;}
  .section-title h2{font-size:22px;}
}