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

/* Header */
.top-bar{background:#0a1a3a;color:#fff;padding:6px 0;font-size:12px}
.top-bar-inner{max-width:1200px;margin:0 auto;padding:0 15px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.top-bar a{color:#ffcc00;margin-left:10px}

header{background:#fff;border-bottom:3px solid #ff6600;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.header-inner{max-width:1200px;margin:0 auto;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.logo{font-size:26px;font-weight:900;color:#ff6600;letter-spacing:-1px}
.logo span{color:#0a1a3a}

nav ul{list-style:none;display:flex;gap:6px;flex-wrap:wrap}
nav ul li a{padding:10px 14px;display:block;font-weight:600;color:#0a1a3a;border-radius:4px;font-size:14px;transition:all .2s}
nav ul li a:hover,nav ul li a.active{background:#ff6600;color:#fff}

.auth-buttons{display:flex;gap:8px}
.btn-login,.btn-register{padding:10px 18px;border-radius:4px;font-weight:700;font-size:14px;transition:all .2s;display:inline-block}
.btn-login{border:2px solid #ff6600;color:#ff6600;background:#fff}
.btn-login:hover{background:#fff5ec}
.btn-register{background:#ff6600;color:#fff;border:2px solid #ff6600}
.btn-register:hover{background:#e55a00}

/* Hero */
.hero{background:linear-gradient(135deg,#0a1a3a 0%,#1a2f5c 50%,#2a4080 100%);color:#fff;padding:40px 15px;position:relative;overflow:hidden}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.hero-text h1{font-size:36px;line-height:1.2;margin-bottom:14px;color:#ffcc00}
.hero-text p{font-size:16px;margin-bottom:18px;color:#e8eaf0}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-cta a{padding:12px 22px;border-radius:4px;font-weight:700}
.cta-primary{background:#ff6600;color:#fff}
.cta-secondary{background:transparent;color:#ffcc00;border:2px solid #ffcc00}
.hero-img img{border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.3)}

/* Stats Strip */
.stats-strip{background:#fff;padding:24px 15px;border-bottom:1px solid #e3e6ec}
.stats-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.stat-box{text-align:center;padding:12px;border-right:1px solid #e3e6ec}
.stat-box:last-child{border-right:none}
.stat-box .num{font-size:24px;font-weight:900;color:#ff6600}
.stat-box .lbl{font-size:13px;color:#555;margin-top:4px}

/* Sections */
.section{padding:40px 15px}
.section-inner{max-width:1200px;margin:0 auto}
.section h2{font-size:26px;color:#0a1a3a;margin-bottom:8px;border-left:5px solid #ff6600;padding-left:12px}
.section-subtitle{color:#666;margin-bottom:24px;font-size:14px}

/* Game grid */
.game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.game-card{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:transform .2s}
.game-card:hover{transform:translateY(-4px)}
.game-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.game-card .info{padding:8px;text-align:center}
.game-card .info h4{font-size:13px;color:#0a1a3a}
.game-card .info span{font-size:11px;color:#888}

/* Banner promo */
.promo-banner{background:linear-gradient(90deg,#ff6600,#ff9933);color:#fff;padding:24px 15px;margin:30px 0;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.promo-banner h3{font-size:22px;margin-bottom:6px}
.promo-banner p{font-size:14px;opacity:.95}
.promo-banner a{background:#fff;color:#ff6600;padding:10px 22px;border-radius:4px;font-weight:700}

/* Features two-col */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.feat-grid img{border-radius:8px}
.feat-text h3{color:#0a1a3a;font-size:20px;margin-bottom:10px}
.feat-text p{margin-bottom:12px;color:#444;font-size:15px}
.feat-list{list-style:none;padding:0}
.feat-list li{padding:8px 0 8px 26px;position:relative;border-bottom:1px dashed #ddd;font-size:14px}
.feat-list li:before{content:"✓";position:absolute;left:0;color:#ff6600;font-weight:900;font-size:18px}

/* Provider grid */
.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.provider-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.provider-card img{width:100%;height:auto;object-fit:cover}
.provider-card .pinfo{padding:14px}
.provider-card h3{color:#0a1a3a;font-size:16px;margin-bottom:6px}
.provider-card p{font-size:13px;color:#555}

/* Process / flow */
.flow-block{background:#fff;padding:24px;border-radius:8px;margin-top:18px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.flow-block h3{color:#0a1a3a;margin-bottom:10px;font-size:18px}
.flow-step{padding:10px 12px;border-left:3px solid #ff6600;background:#fafbff;margin-bottom:8px;font-size:14px}
.flow-step strong{color:#ff6600;display:block;margin-bottom:3px}

/* User testimonial */
.testimonial{background:#fff8f0;border:1px solid #ffd6a8;padding:18px;border-radius:8px;margin:20px 0;font-style:italic;color:#444;font-size:14px}
.testimonial strong{color:#ff6600;font-style:normal}

/* FAQ */
.faq-item{background:#fff;margin-bottom:10px;padding:14px 16px;border-radius:6px;border-left:4px solid #ff6600;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.faq-item h4{color:#0a1a3a;font-size:15px;margin-bottom:6px}
.faq-item p{color:#444;font-size:14px}
.faq-item ul{margin-top:6px;padding-left:20px;font-size:14px;color:#444}

/* Article preview */
.article-row{background:#fff;padding:18px;border-radius:8px;margin-top:14px;font-size:14px;color:#444;border-top:3px solid #0a1a3a}
.article-row h3{color:#0a1a3a;margin-bottom:6px;font-size:17px}
.article-meta{font-size:12px;color:#888;margin-bottom:8px}

/* Footer */
footer{background:#0a1a3a;color:#cdd3e0;padding:40px 15px 15px;margin-top:30px}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-col h4{color:#ffcc00;font-size:15px;margin-bottom:12px;border-bottom:1px solid #2a3d6a;padding-bottom:6px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:7px;font-size:13px}
.footer-col ul li a:hover{color:#ff6600}
.footer-col p{font-size:13px;margin-bottom:6px;line-height:1.7}
.footer-bottom{max-width:1200px;margin:24px auto 0;padding-top:14px;border-top:1px solid #2a3d6a;text-align:center;font-size:12px;color:#8e96a8}
.footer-bottom .age-tag{display:inline-block;background:#ff3344;color:#fff;padding:3px 8px;border-radius:3px;margin-right:8px;font-weight:700}

@media (max-width:900px){
  .hero-inner,.feat-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .stat-box{border-right:none;border-bottom:1px solid #e3e6ec;padding-bottom:14px}
  .game-grid{grid-template-columns:repeat(3,1fr)}
  .provider-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:repeat(2,1fr)}
  .hero-text h1{font-size:26px}
  nav ul{justify-content:center}
  .header-inner{justify-content:center}
}
@media (max-width:480px){
  .game-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr}
}