*{
box-sizing:border-box;
margin:0;
padding:0
}

html{
scroll-behavior:smooth
}

body{
font-family:Arial,Helvetica,sans-serif;
background:#EAECEF;
color:#111820;
line-height:1.55
}

img{
max-width:100%;
height:auto
}

.skip-link{
position:absolute;
left:-9999px;
top:0;
background:#111820;
color:#fff;
padding:10px 16px;
z-index:999
}

.skip-link:focus{
left:10px;
top:10px
}

header{
background:#940F19;
position:sticky;
top:0;
z-index:100
}

.nav-strip{
width:100%;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 16px
}

.brand-logo{
width:150px;
height:30px
}

.burger{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:transparent;
border:0;
padding:12px;
cursor:pointer
}

.burger span{
display:block;
width:26px;
height:3px;
background:#fff;
margin:3px 0
}

.burger:hover span{
background:#EAECEF
}

.burger:focus-visible{
outline:3px solid #fff;
outline-offset:2px
}

.desk-nav{
display:none
}

.desk-list{
display:flex;
align-items:center;
list-style:none;
margin:0;
padding:0
}

.desk-list>li{
position:relative;
margin-left:24px;
display:flex;
align-items:center
}

.desk-list a,
.active-item{
color:#fff;
text-decoration:none;
font-weight:700;
padding:8px 4px;
display:inline-block
}

.desk-list a:hover{
color:#EAECEF;
text-decoration:underline
}

.desk-list a:focus-visible{
outline:3px solid #fff;
outline-offset:2px
}

.has-sub{
display:flex;
align-items:center
}

.desk-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
font-size:11px;
color:#fff;
margin-left:4px;
transition:transform .2s
}

.has-sub:hover .desk-arrow{
transform:rotate(180deg)
}

.desk-sub{
display:none;
position:absolute;
top:calc(100% + 1px);
left:0;
background:#fff;
list-style:none;
margin:0;
padding:6px 0;
z-index:200
}

.has-sub:hover .desk-sub{
display:block
}

.desk-sub li{
list-style:none
}

.desk-sub a{
color:#111820;
white-space:nowrap;
padding:10px 18px;
display:block;
font-weight:400
}

.desk-sub a:hover{
background:#EAECEF;
color:#111820
}

.desk-auth{
display:none
}

.auth-login,
.auth-signup{
padding:10px 18px;
border-radius:6px;
font-weight:700;
text-decoration:none;
text-align:center
}

.auth-login{
background:transparent;
border:2px solid #fff;
color:#fff
}

.auth-signup{
background:#086223;
color:#fff
}

.auth-login:focus-visible,
.auth-signup:focus-visible{
outline:3px solid #fff;
outline-offset:2px
}

.mob-menu{
display:none;
position:fixed;
top:0;
right:0;
height:100%;
width:100%;
max-width:340px;
background:#1B1E25;
z-index:300;
flex-direction:column;
transform:translateX(100%);
transition:transform .25s
}

.mob-menu.active{
display:flex;
transform:translateX(0)
}

.mob-top{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px;
background:#940F19
}

.mob-close{
background:transparent;
border:0;
color:#fff;
font-size:28px;
line-height:1;
padding:8px;
cursor:pointer
}

.mob-close:focus-visible{
outline:3px solid #fff;
outline-offset:2px
}

.mob-list{
list-style:none;
margin:0;
padding:14px
}

.mob-list>li{
margin-bottom:6px
}

.mob-list a,
.mob-list .active-item{
display:block;
color:#EAECEF;
text-decoration:none;
padding:12px 6px;
font-weight:700
}

.mob-list a:focus-visible{
outline:3px solid #111820;
outline-offset:2px
}

.mob-parent-row{
display:flex;
align-items:center
}

.mob-parent-row .active-item{
flex:1
}

.mob-arrow{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:#EAECEF;
cursor:pointer;
transition:transform .2s
}

.mob-arrow:focus-visible{
outline:3px solid #111820;
outline-offset:2px
}

.mob-arr-open{
transform:rotate(180deg)
}

.mob-sub{
display:none;
list-style:none;
margin:0;
padding:0 0 0 22px
}

.mob-sub.open{
display:block
}

.mob-sub a{
padding:10px 6px;
font-weight:400
}

.mob-auth{
display:flex;
padding:14px;
gap:10px
}

.mob-auth a{
flex:1
}

.mob-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
z-index:250
}

.mob-overlay.active{
display:block
}

.hero{
position:relative;
overflow:hidden;
background:#111820;
color:#fff;
padding:52px 20px
}

.hero::before{
content:"";
position:absolute;
inset:0;
background-image:repeating-linear-gradient(135deg,rgba(8,98,35,.16) 0,rgba(8,98,35,.16) 2px,transparent 2px,transparent 28px);
pointer-events:none
}

.hero-inner{
position:relative;
z-index:1;
width:100%;
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px
}

.hero-text{
max-width:660px
}

.hero h1{
font-size:clamp(28px,4vw,46px);
line-height:1.15;
margin-bottom:18px
}

.hero-text>p:not(.sportybet-tanzania-label){
font-size:17px;
line-height:1.65;
color:#F1F2F3;
margin-bottom:24px
}

.hero-visual{
width:300px;
min-width:200px
}

.sportybet-tanzania-label{
color:#353D44;
font-size:13px;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:10px
}

.sportybet-tanzania-label-light{
color:#DFE3E6
}

.hero-cta{
display:flex;
gap:14px;
flex-wrap:wrap
}

.btn-fill,
.btn-outline{
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-weight:700;
border-radius:6px;
min-height:46px;
padding:12px 22px
}

.btn-fill{
background:#086223;
color:#fff;
border:2px solid #086223
}

.btn-fill:hover{
background:#054D19;
border-color:#054D19
}

.btn-outline{
background:transparent;
color:#fff;
border:2px solid #fff
}

.btn-outline:hover{
background:#fff;
color:#111820
}

.btn-fill:focus-visible,
.btn-outline:focus-visible{
outline:3px solid #fff;
outline-offset:3px
}

.trust-bar{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 26px;
padding:16px 20px;
background:#fff;
color:#111820;
font-size:14px;
font-weight:700;
border-bottom:1px solid #D6DADE
}
.content-section{width:100%;max-width:1200px;margin:0 auto;padding:20px 20px}
.content-section h2{
font-size:clamp(24px,3vw,34px);
line-height:1.2;
margin:8px 0 18px
}

.content-section>p{
margin-bottom:18px
}

.game-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
margin-top:28px
}

.game-card{
display:flex;
flex-direction:column;
overflow:hidden;
background:#fff;
border:1px solid #DDE1E5;
border-radius:10px;
box-shadow:0 3px 12px rgba(17,24,32,.1);
transition:transform .2s,box-shadow .2s
}

.game-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 22px rgba(17,24,32,.16)
}

.game-card img{
display:block;
width:250px;
height:150px;
max-width:100%;
object-fit:cover
}

.card-body{
display:flex;
flex:1;
flex-direction:column;
padding:16px
}

.card-body h3{
font-size:18px;
line-height:1.25;
margin-bottom:8px
}

.card-body p{
margin-bottom:8px
}

.provider{
color:#353D44;
font-size:14px
}

.stats{
color:#111820;
font-size:14px;
font-weight:700
}

.card-cta{
margin-top:auto;
width:100%;
padding:10px 12px;
min-height:42px
}

.data-table{
width:100%;
margin:18px 0;
border-collapse:collapse;
background:#fff;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 10px rgba(17,24,32,.08)
}

.data-table th,
.data-table td{
padding:14px 16px;
text-align:left;
vertical-align:top;
border-bottom:1px solid #E2E5E8;
font-size:14px
}

.data-table thead th{
background:#111820;
color:#fff
}

.data-table tbody tr:last-child td{
border-bottom:0
}

.logo-row{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:22px 28px;
margin:22px 0;
padding:22px;
background:#fff;
border:1px solid #DDE1E5;
border-radius:8px
}

.logo-row img{
width:auto;
height:25px;
object-fit:contain
}

.sr-only{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap
}

footer{
background:#1B1E25;
color:#C7CBD1;
margin-top:20px
}

.foot-grid{
width:100%;
margin:0 auto;
padding:40px 20px 20px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px
}

.foot-col h4{
color:#fff;
margin-bottom:12px;
font-size:15px
}

.foot-col p{
font-size:14px;
color:#C7CBD1
}

.foot-list{
list-style:none;
margin:0;
padding:0
}

.foot-list li{
margin-bottom:8px
}

.foot-list a{
color:#C7CBD1;
text-decoration:none;
font-size:14px
}

.foot-list a:hover{
color:#fff;
text-decoration:underline
}

.foot-list a:focus-visible{
outline:2px solid #fff;
outline-offset:2px
}

.carousel-row{
width:100%;
margin:0 auto;
padding:16px 20px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:28px;
border-top:1px solid rgba(255,255,255,.08)
}

.carousel-row img{
width:auto;
height:25px;
object-fit:contain
}

.trust-badge-row{
width:100%;
margin:0 auto;
padding:20px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:24px;
border-top:1px solid rgba(255,255,255,.08)
}

.trust-badge-row img{
width:auto;
height:40px;
object-fit:contain
}

.licence-note{
border-top:1px solid rgba(255,255,255,.14);
padding:20px
}

.licence-note p{
font-size:12.5px;
color:#C7CBD1;
line-height:1.6
}

@media(min-width:1081px){
.nav-strip{
max-width:1200px
}

.desk-nav{
display:flex
}

.desk-auth{
display:flex;
gap:10px
}

.burger{
display:none
}

.mob-menu{
display:none!important
}

.mob-overlay{
display:none!important
}

.hero{
padding:70px 40px
}

.content-section{padding:20px 20px}

.foot-grid,
.carousel-row,
.trust-badge-row{
max-width:1200px
}
}

@media(max-width:980px){
.game-grid{
grid-template-columns:repeat(3,minmax(0,1fr))
}
}

@media(max-width:768px){
.hero-inner{
flex-direction:column;
align-items:flex-start
}

.hero-visual{
align-self:center;
width:240px
}

.game-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.foot-grid{
grid-template-columns:1fr;
text-align:center
}

.logo-row{
justify-content:center
}
}

@media(max-width:480px){
.hero{
padding:42px 16px
}

.hero-cta{
flex-direction:column
}

.hero-cta a{
width:100%
}

.content-section{
padding:38px 16px
}

.game-grid{
grid-template-columns:1fr
}

.data-table{
display:block;
overflow-x:auto;
white-space:nowrap
}

.trust-bar{
justify-content:flex-start;
flex-direction:column;
gap:8px
}

.carousel-row{
gap:18px
}
}

@media(max-width:320px){
.data-table th,
.data-table td{
padding:10px;
font-size:12.5px
}
}

@media(prefers-reduced-motion:reduce){
*{
transition:none!important;
animation:none!important;
scroll-behavior:auto!important
}
}