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

/* Header */
.top-bar{background:#003a1f;color:#cfe9d8;font-size:12px;padding:6px 0}
.top-bar .container{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.top-bar a:hover{color:#ffd84d}
header{background:#046a38;color:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.logo{font-size:26px;font-weight:800;color:#ffd84d;letter-spacing:1px;text-transform:uppercase}
nav ul{list-style:none;display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:10px 14px;border-radius:4px;font-weight:600;font-size:14px;display:block;transition:.2s}
nav a:hover,nav a.active{background:#02502a;color:#ffd84d}
.auth-buttons{display:flex;gap:8px}
.btn{padding:9px 18px;border-radius:4px;font-weight:700;font-size:14px;cursor:pointer;border:none;transition:.2s;display:inline-block}
.btn-login{background:transparent;color:#fff;border:1px solid #fff}
.btn-login:hover{background:#fff;color:#046a38}
.btn-register{background:#ffd84d;color:#222}
.btn-register:hover{background:#ffc107}
.menu-toggle{display:none;background:transparent;border:none;color:#fff;font-size:26px;cursor:pointer}

/* Hero */
.hero{position:relative;background:linear-gradient(135deg,#063f23 0%,#0a7a42 100%);color:#fff;overflow:hidden}
.hero-inner{display:flex;align-items:center;gap:30px;padding:50px 16px;max-width:1200px;margin:0 auto}
.hero-text{flex:1;min-width:280px}
.hero-text h1{font-size:42px;line-height:1.15;margin-bottom:16px;color:#ffd84d}
.hero-text p{font-size:17px;margin-bottom:22px;color:#e9f5ee}
.hero-img{flex:1;text-align:center}
.hero-img img{max-height:340px;margin:0 auto}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.cta-row .btn{padding:13px 26px;font-size:15px}

/* Section common */
section{padding:50px 0}
.section-title{text-align:center;font-size:28px;margin-bottom:10px;color:#046a38}
.section-sub{text-align:center;color:#666;margin-bottom:34px;font-size:15px}

/* Category icons */
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;text-align:center}
.cat-item{background:#f7faf8;border-radius:10px;padding:18px 10px;transition:.25s;border:1px solid #eaeee9}
.cat-item:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(4,106,56,0.15);border-color:#046a38}
.cat-item img{margin:0 auto 10px;border-radius:50%;width:80px;height:80px;object-fit:cover}
.cat-item span{font-weight:600;color:#046a38;font-size:14px}

/* Promotions / cards */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.promo-card{background:#fff;border:1px solid #e6ebe7;border-radius:10px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.promo-card:hover{box-shadow:0 10px 28px rgba(0,0,0,0.12);transform:translateY(-3px)}
.promo-card .card-img{background:#0a3a23;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center}
.promo-card .card-img img{width:100%;height:100%;object-fit:cover}
.promo-card-body{padding:18px;flex:1;display:flex;flex-direction:column}
.promo-tag{font-size:12px;color:#888;text-transform:uppercase;margin-bottom:6px}
.promo-card h3{color:#046a38;font-size:18px;margin-bottom:10px}
.promo-card p{font-size:14px;color:#555;margin-bottom:14px;flex:1}
.promo-card .btn{align-self:flex-start;background:#046a38;color:#fff;font-size:13px;padding:9px 18px}
.promo-card .btn:hover{background:#02502a}

/* Stats strip */
.stats{background:#f4f8f5;padding:40px 0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.stat-box{padding:18px}
.stat-box .num{font-size:32px;color:#046a38;font-weight:800;display:block}
.stat-box .lbl{font-size:13px;color:#555;margin-top:4px;display:block}

/* Story split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.split img{border-radius:10px;width:100%}
.split h2{font-size:26px;color:#046a38;margin-bottom:14px}
.split p{margin-bottom:12px;color:#444;font-size:15px}

/* Game showcase */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.game-tile{background:#0a3a23;border-radius:8px;overflow:hidden;position:relative;aspect-ratio:1;transition:.2s}
.game-tile:hover{transform:scale(1.04)}
.game-tile img{width:100%;height:100%;object-fit:cover}
.game-tile .label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.85));padding:18px 10px 8px;color:#fff;font-size:13px;font-weight:600}

/* Safer gambling */
.safer{background:#eaf3ec;text-align:center}
.safer-icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;max-width:800px;margin:0 auto}
.safer-icons div{padding:14px}
.safer-icons img{width:60px;height:60px;border-radius:50%;margin:0 auto 8px;object-fit:cover}
.safer-icons a{color:#046a38;font-weight:600;font-size:14px;text-decoration:underline}

/* FAQ */
.faq-wrap{max-width:850px;margin:0 auto}
.faq-item{background:#f7faf8;border-left:4px solid #046a38;padding:18px 22px;margin-bottom:14px;border-radius:6px}
.faq-item h4{color:#046a38;font-size:16px;margin-bottom:8px}
.faq-item p{font-size:14px;color:#444}
.faq-item ul{margin:8px 0 0 18px;font-size:14px;color:#444}

/* Testimonial */
.testimonial{background:#046a38;color:#fff;padding:40px 0;text-align:center}
.testimonial blockquote{max-width:780px;margin:0 auto;font-size:18px;font-style:italic;line-height:1.7}
.testimonial cite{display:block;margin-top:14px;font-size:14px;color:#ffd84d;font-style:normal}

/* Footer */
footer{background:#021a0e;color:#9ec3ad;padding:40px 0 20px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;margin-bottom:24px}
footer h5{color:#ffd84d;margin-bottom:12px;font-size:15px}
footer ul{list-style:none}
footer ul li{margin-bottom:6px}
footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #0a3a23;padding-top:16px;text-align:center;font-size:12px;color:#6e8c7c}

/* Mobile */
@media(max-width:900px){
  .nav-wrap{flex-wrap:wrap}
  .menu-toggle{display:block;order:2}
  nav{order:4;width:100%;display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;width:100%}
  nav a{padding:12px;border-bottom:1px solid #02502a;border-radius:0}
  .auth-buttons{order:3}
  .hero-text h1{font-size:30px}
  .split{grid-template-columns:1fr}
  .top-bar .container{justify-content:center;font-size:11px;gap:10px}
}
@media(max-width:480px){
  .hero-inner{padding:30px 16px}
  .hero-text h1{font-size:26px}
  .section-title{font-size:22px}
  .btn{padding:8px 14px;font-size:13px}
  .auth-buttons{gap:6px}
}