/* Shared design tokens and responsive styles for all ten static pages. */
:root{
  color-scheme:dark;
  --bg:#000e09;
  --panel:#001b16;
  --line:#173a30;
  --green:#00ed71;
  --gold:#ffe64d;
  --muted:#b0c4ba;
--radius:12px}
*{
box-sizing:border-box}
body{
  margin:0;
  background:#06140e;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
line-height:1.45}
a{
  color:inherit;
text-decoration:none}
button,input,select{
font:inherit}
button,a,input,summary,select{
-webkit-tap-highlight-color:transparent}
button,select,summary{
cursor:pointer}
button{
color:inherit}
button:disabled{
cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold);
outline-offset:4px}
button{
border:0}
img{
  max-width:100%;
display:block}
h1,h2,p{
margin:0}
h1,h2{
  line-height:1.04;
font-weight:800}
h1{
  font-size:clamp(30px,4.2vw,56px);
letter-spacing:-1.5px}
h2{
  font-size:22px;
letter-spacing:-.5px}
em{
  font-style:normal;
color:var(--gold)}
p{
margin:12px 0}
small{
font-size:12px}
.site-shell{
  max-width:1200px;
  margin:auto;
  background:var(--bg);
  min-height:100vh;
box-shadow:0 0 90px #0007}
.header{
  height:76px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
  border-bottom:1px solid #17452b;
  background:#00110c;
  position:relative;
z-index:10}
.brand{
flex-shrink:0}
.brand img,.footer-brand img{
  object-fit:contain;
  width:86px;
height:36px}
.main-nav{
  display:flex;
  gap:24px;
  align-items:center;
  font-size:13px;
  font-weight:600;
flex:1}
.main-nav a{
  padding:25px 0;
white-space:nowrap}
.main-nav a:hover,.main-nav a[aria-current]{
color:var(--green)}
.header-actions{
  display:flex;
  align-items:center;
gap:12px}
.header select{
  background:#051e15;
  color:#fff;
  border:1px solid #264c35;
  border-radius:7px;
  padding:7px;
font-size:12px}
.login{
  border:1px solid #00b85b;
  border-radius:7px;
  padding:9px 17px;
  color:var(--green);
  font-size:13px;
font-weight:700}
.page-index .login{
  background:var(--green);
color:#00170c}
.menu-toggle{
  display:none;
  border-radius:6px;
  background:#123226;
  padding:8px;
font-size:12px}
.mobile-menu{
  padding:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  border-bottom:1px solid var(--line);
background:#06291a}
.mobile-menu a{
  padding:10px;
  border-radius:6px;
background:#001a11}
main{
padding:28px}
main>h1{
margin-top:12px}
main>p{
color:#d2ded6}
.hero{
  position:relative;
  min-height:390px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
padding:36px}
.hero-hero{
background-image:url('../assets/hero-kenya.webp')}
.hero-sports{
background-image:url('../assets/sports.webp')}
.hero-bonus{
background-image:url('../assets/bonus.webp')}
.hero-phone{
background-image:url('../assets/phone-v2.webp')}
.hero-copy{
  position:relative;
  width:57%;
z-index:1}
.hero-copy>p{
  max-width:320px;
  font-size:16px;
color:#e3e9e5}
.hero .button{
margin-top:16px}
.country{
  display:block;
  color:var(--green);
font-size:1.2em}
.page-index .hero:first-child{
min-height:530px}
.page-index .hero:first-child h1{
font-size:64px}
.page-index .hero:first-child h1>em{
  font-size:28px;
  color:#fff;
  letter-spacing:-.6px;
  display:block;
margin-top:12px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:48px;
  padding:13px 27px;
  border-radius:9px;
  background:var(--green);
  color:#001208;
  font-weight:800;
  font-size:14px;
  transition:background .18s,transform .18s;
  line-height:1.2;
text-align:center}
.button:hover{
  background:#50ff9b;
transform:translateY(-1px)}
.button span{
  font-size:22px;
line-height:1}
.button.yellow{
background:var(--gold)}
.button.outline{
  background:#001b11;
  border:1px solid var(--green);
color:#fff}
.welcome-caption{
  display:block;
  width:235px;
  text-align:center;
padding-top:7px}
.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  list-style:none;
  padding:0;
margin:20px 0}
.features>li{
  background:#001c13e8;
  padding:18px 8px;
  border:1px solid #16422c;
  border-radius:10px;
  text-align:center;
  display:flex;
  align-items:center;
  flex-direction:column;
gap:5px}
.features img{
  width:28px;
  height:28px;
  object-fit:contain;
margin-bottom:6px}
.features strong{
  font-size:13px;
line-height:1.2}
.features small{
  color:#d0ded5;
line-height:1.2}
.hero-copy .features{
max-width:390px}
.hero-copy .features>li{
padding:10px 4px}
.hero-copy .features strong{
font-size:11px}
.section{
margin-top:28px}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
gap:12px}
.section-heading a{
  font-size:12px;
  color:#d4e6da;
white-space:nowrap}
.section-heading a:hover{
color:var(--green)}
.bonus-banner{
  margin-top:22px;
  min-height:185px;
  border:1px solid var(--green);
  border-radius:var(--radius);
  padding:26px 32px;
  display:flex;
  align-items:center;
background:url('../assets/bonus.webp') center/cover no-repeat}
.bonus-banner h2{
font-size:28px}
.eyebrow{
  font-size:15px;
  font-weight:800;
  line-height:1.2;
margin:0 0 8px}
.bonus-banner .button{
  margin-top:14px;
  min-height:38px;
  padding:9px 16px;
  font-size:12px;
background:var(--gold)}
.games-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
gap:12px}
.game-card{
  padding:0;
  border:1px solid #1b4434;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  background:#05271a;
  aspect-ratio:1.16;
transition:transform .15s,box-shadow .15s}
.game-card:hover{
  transform:translateY(-4px);
box-shadow:0 4px 22px #00ee7133}
.game-card img{
  width:100%;
  height:100%;
  object-fit:cover;
image-rendering:auto}
.game-card>span{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  padding:5px;
  background:#00170eea;
  font-weight:700;
  font-size:12px;
opacity:0}
.game-card b{
  position:absolute;
  inset:auto 16px 16px;
  opacity:0;
  background:var(--green);
  color:#001b10;
  padding:8px;
  border-radius:6px;
font-size:12px}
.game-card:hover b,.game-card:focus-visible b{
opacity:1}
.games-grid .game-card:nth-child(5),.games-grid .game-card:nth-child(6){
  grid-column:span 2;
aspect-ratio:2.35}
.page-index .games-grid .game-card:nth-child(n+5){
display:none}
.page-index .section+.hero{
  margin-top:28px;
min-height:310px}
.app-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#001c12;
  padding:24px;
  border-radius:12px;
  overflow:hidden;
max-height:310px}
.app-strip>div{
  position:relative;
z-index:1}
.app-strip>figure{
  width:48%;
  flex-shrink:0;
  margin:0;
}
.app-strip img{
  width:100%;
  object-fit:cover;
border-radius:12px}
.registration{
  min-height:600px;
  background-size:cover;
  background-position:center;
  padding:36px;
  border-radius:12px;
  display:flex;
align-items:center}
.registration-content{
width:48%}
.registration-content>p{
max-width:340px}
.form-panel{
  background:#001a15ed;
  border:1px solid #1a5140;
  padding:20px;
  border-radius:12px;
  margin-top:22px;
max-width:390px}
.tabs{
  display:flex;
  background:#031f26;
  border:1px solid #194338;
  border-radius:8px;
  padding:3px;
  gap:3px;
margin-bottom:18px}
.tabs button{
  flex:1;
  background:transparent;
  padding:10px 8px;
  border-radius:6px;
font-size:13px}
.tabs button[aria-selected=true],.tabs button.active{
  background:white;
  color:#07170f;
font-weight:700}
.form-panel label{
  display:block;
  font-size:12px;
  margin:12px 0 6px;
color:#d6e7dd}
.phone-input{
  display:flex;
  border:1px solid #285448;
  border-radius:8px;
  overflow:hidden;
background:#002326}
.phone-input>span{
  padding:12px 9px;
  background:#072b20;
font-size:13px}
.phone-input input{
  min-width:0;
border:0}
.form-panel input:not([type=checkbox]),.search-bar input{
  width:100%;
  border:1px solid #285448;
  border-radius:7px;
  background:#002326;
  color:#fff;
padding:12px}
.form-panel .phone-input input{
border:0}
.form-panel input::placeholder,.search-bar input::placeholder{
color:#b4c6bc}
.form-panel .button{
  width:100%;
margin-top:14px}
.form-note{
  font-size:11px;
  text-align:center;
color:#a8beb1}
.form-error{
  color:#ffb5a8;
font-size:12px}
.checkbox{
  display:flex!important;
  align-items:flex-start;
gap:8px}
.checkbox input{
accent-color:var(--green)}
.search-label{
  display:block;
  font-size:12px;
  margin-bottom:7px;
color:var(--muted)}
.search-bar{
  display:flex;
gap:10px}
.search-bar input{
  flex:1;
min-width:0}
.search-bar select{
  width:180px;
  max-width:40%;
  border:1px solid #285448;
  border-radius:8px;
  background:#002326;
  color:#fff;
  font-size:12px;
padding:10px}
.filter-tabs{
  display:flex;
  gap:8px;
  margin-top:16px;
  overflow:auto;
padding:2px}
.filter-tabs button{
  flex:1;
  min-width:max-content;
  border-radius:8px;
  padding:14px;
  background:#041c22;
  border:1px solid #1d3a3b;
font-size:12px}
.filter-tabs button.active{
  border-color:var(--green);
  color:var(--green);
box-shadow:inset 0 -2px var(--green)}
.providers{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-around;
  flex-wrap:wrap;
  padding:24px 12px;
  background:#001c20;
  border:1px solid var(--line);
  border-radius:10px;
  font-weight:800;
font-size:15px}
.match-list{
  display:grid;
gap:10px}
.match{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#041c23;
  border:1px solid #153834;
  border-radius:9px;
padding:15px}
.match>div:first-child{
flex:1}
.match strong{
  display:block;
font-size:14px}
.match small{
  font-size:11px;
color:#9cb7af}
.odds{
  display:flex;
gap:6px}
.odds button{
  min-width:66px;
  padding:8px;
  background:#172d39;
  border:1px solid #253b45;
  border-radius:6px;
font-size:13px}
.odds small{
  display:block;
font-size:9px}
.odds button.selected{
  background:var(--green);
color:#00170e}
.odds button.selected small{
color:#003c20}
.match-tabs{
max-width:500px}
.match-tabs button.active{
  background:#008d3d;
color:white}
.bet-slip,.info-panel{
  padding:18px;
  border:1px solid #2f7148;
  border-radius:10px;
  background:#002c1b;
margin-top:16px}
.bet-slip button{
  background:var(--green);
  color:#002316;
  padding:8px 12px;
  border-radius:6px;
margin-left:12px}
.promotion-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
margin-top:24px}
.promotion{
  min-height:245px;
  padding:25px;
  border-radius:12px;
  border:1px solid #1b6840;
  background-size:cover;
background-position:center}
.promotion>div{
max-width:65%}
.promotion h2{
  font-size:25px;
color:var(--gold)}
.promotion p:not(.eyebrow){
  font-size:13px;
max-width:210px}
.promotion .button{
  font-size:12px;
  padding:10px 16px;
min-height:40px}
.promotion:first-child{
  grid-column:1/-1;
min-height:270px}
.promotion:first-child h2{
font-size:36px}
.muted{
  color:var(--muted);
font-size:12px}
.download-buttons{
  display:flex;
gap:12px}
.payment-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
margin-top:16px}
.payment-card{
  background:#031f25;
  border:1px solid #214b38;
  padding:22px 10px;
  border-radius:10px;
  display:flex;
  align-items:center;
  gap:12px;
flex-direction:column}
.payment-card strong{
  font-size:23px;
color:var(--gold)}
.payment-card span{
font-size:12px}
.payment-card.active{
  border-color:var(--green);
background:#004426}
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
margin:28px 0}
.steps article{
  text-align:center;
  background:#002017;
  border:1px solid #1c5036;
  padding:24px 14px;
border-radius:10px}
.steps article>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--gold);
  color:#002416;
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:22px;
  font-weight:800;
margin-bottom:18px}
.steps h2{
font-size:17px}
.steps p{
  font-size:13px;
color:#d5e6dc}
.page-how-to-play main>.button{
  display:flex;
  max-width:340px;
margin:24px auto}
.page-how-to-play main>.hero{
margin-top:28px}
.faq-layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:20px;
  margin-top:28px;
min-height:440px}
.faq-list{
  align-self:start;
  border:1px solid #21583b;
  border-radius:10px;
  padding:8px 16px;
background:#001d1c}
.faq-list details+details{
border-top:1px solid #244432}
.faq-list summary{
  padding:16px 22px 16px 0;
  font-size:14px;
  font-weight:600;
  position:relative;
list-style:none}
.faq-list summary::-webkit-details-marker{
display:none}
.faq-list summary::after{
  content:'+';
  position:absolute;
  right:0;
  font-size:18px;
color:var(--green)}
.faq-list details[open] summary::after{
content:'−'}
.faq-list details p{
  font-size:13px;
  color:#b9cfc0;
  line-height:1.65;
margin-top:0}
.faq-art{
  background-position:72% center;
  background-size:cover;
border-radius:12px}
.support-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:480px;
  gap:16px;
margin-top:24px}
.support-options{
  display:grid;
  gap:12px;
align-self:start}
.support-options>a,.support-options>button{
  display:flex;
  text-align:left;
  align-items:center;
  gap:14px;
  border:1px solid #194933;
  background:#001e1b;
  border-radius:10px;
padding:20px}
.support-options img{
  width:30px;
  height:30px;
object-fit:contain}
.support-options span{
flex:1}
.support-options strong,.support-options small{
display:block}
.support-options small{
  color:#b8cdbf;
margin-top:4px}
.support-options b{
color:var(--green)}
.support-art{
  background-position:83% center;
  background-size:cover;
border-radius:12px}
footer{
  border-top:1px solid #1c3e2c;
  padding:28px;
  margin-top:32px;
  color:var(--muted);
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
gap:16px}
footer nav{
  display:flex;
  gap:20px;
  flex:1;
justify-content:flex-end}
footer p{
  margin:0;
width:100%}
footer small{
font-size:11px}
dialog{
  color:#fff;
  background:#002319;
  border:1px solid var(--green);
  border-radius:16px;
  width:min(440px,calc(100% - 32px));
  padding:32px;
box-shadow:0 24px 90px #0009}
dialog::backdrop{
background:#000b}
dialog h2{
  font-size:28px;
padding-right:15px}
dialog p:not(.eyebrow){
color:#cce1d2}
dialog .button{
margin-top:12px}
.dialog-close{
  position:absolute;
  right:12px;
  top:8px;
  background:transparent;
font-size:28px}
.skip-link{
  position:fixed;
  left:10px;
  top:-70px;
  z-index:100;
  background:var(--green);
  color:#00190e;
padding:12px}
.skip-link:focus{
top:10px}
[hidden]{
display:none!important}
@media(min-width:900px){
  .page-casino main>.hero,.page-sports main>.hero:first-child,.page-payments main>.hero,.page-app main>.hero{
  min-height:390px}
  .page-index main{
    display:grid;
    grid-template-columns:1fr 1fr;
  gap:0 24px}
  .page-index main>.hero:first-child{
  grid-column:1/-1}
  .page-index main>.bonus-banner{
  grid-column:1/-1}
  .page-index main>.section:nth-child(3){
  grid-column:1/-1}
  .page-index main>.hero:nth-child(4){
  margin-top:28px}
  .page-index main>.section:last-child{
    background:#00180e;
    padding:20px;
    border:1px solid #16442c;
  border-radius:12px}
  .page-index .app-strip{
    padding:0;
  min-height:230px}
  .page-index .app-strip img{
    height:230px;
  object-fit:cover}
}
@media(max-width:900px){
  .header{
    padding:0 16px;
    gap:18px;
  height:62px}
  .main-nav{
    gap:14px;
  font-size:11px}
  .main-nav a{
  padding:22px 0}
  .header-actions{
  gap:7px}
  .brand img{
    width:65px;
  height:29px}
  main{
  padding:18px}
  .hero{
    min-height:340px;
  padding:26px}
  .hero-copy{
  width:59%}
  .page-index .hero:first-child h1{
  font-size:54px}
  .registration-content{
  width:55%}
  .promotion h2{
  font-size:22px}
  .promotion{
  padding:20px}
}
@media(max-width:600px){
  body{
  font-size:13px}
  .site-shell{
  max-width:480px}
  .header{
    height:55px;
    gap:10px;
  padding:0 12px}
  .brand img{
    width:58px;
  height:26px}
  .main-nav{
  display:none}
  .header-actions{
  margin-left:auto}
  .menu-toggle{
  display:block}
  .header select{
    font-size:10px;
  padding:6px}
  .login{
    font-size:11px;
  padding:7px 12px}
  main{
  padding:12px}
  .hero{
    padding:20px;
    min-height:290px;
    border-radius:9px;
  background-position:57% center}
  .hero-copy{
  width:65%}
  h1{
    font-size:29px;
  letter-spacing:-.9px}
  h2{
  font-size:18px}
  .hero-copy>p{
    font-size:12px;
  max-width:200px}
  .page-index .hero:first-child{
    min-height:380px;
    align-items:flex-start;
    padding:22px 14px;
  background-position:53% center}
  .page-index .hero:first-child .hero-copy{
  width:67%}
  .page-index .hero:first-child h1{
  font-size:48px}
  .page-index .hero:first-child h1>em{
    font-size:20px;
  margin-top:9px}
  .hero-copy .features{
    gap:4px;
  margin:14px 0 2px}
  .hero-copy .features>li{
    border:0;
    padding:6px 2px;
  background:#002013cc}
  .hero-copy .features strong{
  font-size:9px}
  .hero-copy .features img{
    width:22px;
    height:22px;
  margin-bottom:2px}
  .hero .button{
  margin-top:10px}
  .button{
    font-size:12px;
    min-height:43px;
    padding:12px 20px;
  gap:10px}
  .welcome-caption{
    width:186px;
  font-size:10px}
  .bonus-banner{
    padding:20px 14px;
    min-height:138px;
    margin-top:14px;
  background-position:57% center}
  .bonus-banner h2{
  font-size:21px}
  .bonus-banner .eyebrow{
  font-size:12px}
  .bonus-banner .button{
    min-height:31px;
    font-size:10px;
    padding:8px 12px;
  margin-top:10px}
  .section{
  margin-top:20px}
  .section-heading{
  margin-bottom:10px}
  .section-heading a{
  font-size:10px}
  .games-grid{
  gap:7px}
  .game-card{
    border-radius:7px;
  aspect-ratio:1.04}
  .game-card b{
    inset:auto 4px 4px;
    font-size:9px;
  padding:4px}
  .page-index .section+.hero{
    margin-top:20px;
  min-height:250px}
  .app-strip{
    padding:16px;
  gap:6px}
  .app-strip>div{
  width:60%}
  .app-strip>figure{
    width:40%;
  }
  .app-strip img{
    width:100%;
    height:190px;
    object-fit:cover;
  object-position:76%}
  .app-strip p{
  font-size:12px}
  .app-strip .button{
    font-size:10px;
  padding:10px}
  .features{
    gap:5px;
  margin:14px 0}
  .features>li{
  padding:13px 4px}
  .features strong,.features small{
  font-size:10px}
  .features img{
    width:24px;
  height:24px}
  .registration{
    padding:22px 14px;
    min-height:500px;
  background-position:56%}
  .registration-content{
  width:75%}
  .registration h1{
  font-size:28px}
  .registration-content>p{
    font-size:12px;
  max-width:220px}
  .form-panel{
    padding:12px;
  margin-top:18px}
  .form-panel .tabs button{
  font-size:11px}
  .form-panel label{
  font-size:11px}
  .form-panel input:not([type=checkbox]){
  font-size:12px}
  .form-note{
  font-size:10px}
  .filter-tabs{
    gap:5px;
  margin-top:12px}
  .filter-tabs button{
    font-size:10px;
  padding:11px 9px}
  .search-bar{
  gap:6px}
  .search-bar input{
    font-size:12px;
  padding:11px}
  .search-bar select{
    font-size:10px;
    padding:5px;
  width:120px}
  .providers{
    padding:18px 10px;
    gap:12px;
  font-size:10px}
  .page-casino .hero{
  min-height:240px}
  .page-casino .hero-copy{
  width:72%}
  .page-sports .hero:first-child{
  min-height:270px}
  .page-sports .hero-copy{
  width:67%}
  .match{
    padding:12px 8px;
  gap:6px}
  .match strong{
  font-size:11px}
  .match small{
  font-size:9px}
  .odds{
  gap:4px}
  .odds button{
    min-width:42px;
    font-size:10px;
  padding:8px 5px}
  .odds small{
  font-size:8px}
  .match-tabs button{
    font-size:11px;
  padding:8px}
  .promotion-grid{
    grid-template-columns:1fr;
    gap:12px;
  margin-top:20px}
  .promotion,.promotion:first-child{
    grid-column:auto;
    min-height:175px;
    padding:22px 16px;
  background-position:58%}
  .promotion>div{
  max-width:66%}
  .promotion .eyebrow{
  font-size:12px}
  .promotion h2,.promotion:first-child h2{
  font-size:22px}
  .promotion p:not(.eyebrow){
    font-size:11px;
  max-width:175px}
  .promotion .button{
    font-size:10px;
    min-height:34px;
  padding:9px 12px}
  .page-promotions main>h1{
  font-size:30px}
  .page-app .hero,.page-payments .hero{
    min-height:310px;
  background-position:56%}
  .page-app .hero-copy,.page-payments .hero-copy{
  width:65%}
  .download-buttons{
  gap:8px}
  .download-buttons .button{
    flex:1;
    font-size:11px;
  padding:12px}
  .payment-grid{
  gap:6px}
  .payment-card{
    padding:18px 4px;
  gap:10px}
  .payment-card strong{
  font-size:17px}
  .payment-card span{
  font-size:10px}
  .info-panel{
    font-size:12px;
  padding:14px}
  .steps{
    grid-template-columns:1fr 1fr;
    gap:8px;
  margin:20px 0}
  .steps article{
  padding:20px 12px}
  .steps h2{
  font-size:15px}
  .steps p{
  font-size:12px}
  .steps article>span{
    width:34px;
    height:34px;
    font-size:18px;
  margin-bottom:12px}
  .faq-layout{
    grid-template-columns:1fr;
    min-height:0;
  margin-top:20px}
  .faq-art{
  display:none}
  .faq-list{
  padding:5px 12px}
  .faq-list summary{
    font-size:12px;
  padding:15px 20px 15px 0}
  .faq-list details p{
  font-size:12px}
  .support-layout{
    grid-template-columns:1fr;
    position:relative;
    min-height:490px;
    overflow:hidden;
  border-radius:10px}
  .support-options{
    width:72%;
    z-index:1;
    padding:10px 0;
  gap:10px}
  .support-options>a,.support-options>button{
    padding:15px 10px;
    gap:9px;
  background:#001e1bea}
  .support-options img{
    width:24px;
  height:24px}
  .support-options strong{
  font-size:12px}
  .support-options small{
  font-size:10px}
  .support-art{
    position:absolute;
    inset:0;
  background-position:75% center}
  footer{
    padding:20px 14px;
    margin-top:24px;
  gap:12px}
  footer nav{
    gap:12px;
    font-size:10px;
  flex-wrap:wrap}
  footer p{
  font-size:11px}
  footer small{
  font-size:10px}
  .footer-brand img{
    width:58px;
  height:26px}
}
@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
  transition:none!important}
}
@media(max-width:600px){
  .page-index .hero:first-child{
    background-position:69% center;
  min-height:390px}
  .page-index .hero:first-child .hero-copy{
  width:65%}
  .page-index .hero:first-child h1{
  font-size:46px}
  .page-index .hero:first-child .hero-copy>p{
  display:none}
  .page-index .hero:first-child h1>em{
  margin-top:10px}
  .page-index .hero:nth-child(4){
    min-height:210px;
    align-items:flex-start;
    padding-top:24px;
  background-position:65% center}
  .page-index .hero:nth-child(4) .hero-copy{
  width:60%}
  .page-index .hero:nth-child(4) h2{
  font-size:21px}
  .page-index .hero:nth-child(4) p{
    font-size:11px;
  max-width:160px}
  .hero-hero:not(.registration){
  background-position:69% center}
  .registration{
  background-position:70% center}
}
.banner-heading {
  font-size: clamp(29px, 4.2vw, 56px);
  letter-spacing: -1.5px;
}
@media (max-width: 600px) {
  .banner-heading { font-size: 29px; letter-spacing: -.9px; }
}
/* Compact landing-page rhythm from the reference image. */
@media (max-width: 600px) {
  .page-index main { padding: 7px; }
  .page-index .hero:first-child { min-height: 276px; padding: 12px 10px; }
  .page-index .hero:first-child h1 { font-size: 40px; line-height: .96; }
  .page-index .hero:first-child h1 > em { font-size: 17px; margin-top: 8px; line-height: 1.05; }
  .page-index .hero-copy .features { margin: 8px 0 0; }
  .page-index .hero-copy .features > li { padding: 4px 1px; gap: 2px; }
  .page-index .hero-copy .features img { width: 17px; height: 17px; margin-bottom: 1px; }
  .page-index .hero-copy .features strong { font-size: 8px; }
  .page-index .hero:first-child .button { min-height: 35px; padding: 9px 14px; font-size: 11px; margin-top: 8px; }
  .page-index .welcome-caption { width: 170px; font-size: 9px; padding-top: 5px; }
  .page-index .bonus-banner { margin-top: 9px; min-height: 80px; padding: 12px; }
  .page-index .bonus-banner h2 { font-size: 19px; }
  .page-index .bonus-banner .eyebrow { margin-bottom: 4px; }
  .page-index .bonus-banner .button { display: none; }
  .page-index .section { margin-top: 13px; }
  .page-index .section-heading { margin-bottom: 8px; }
  .page-index .section-heading h2 { font-size: 16px; }
  .page-index .game-card { aspect-ratio: 1.16; }
  .page-index .hero:nth-child(4) { margin-top: 13px; min-height: 135px; padding: 14px 10px; }
  .page-index .hero:nth-child(4) h2 { font-size: 18px; }
  .page-index .hero:nth-child(4) p { margin-top: 6px; font-size: 10px; }
  .page-index .app-strip { padding: 10px; max-height: 136px; }
  .page-index .app-strip img { height: 116px; }
  .page-index .app-strip p { font-size: 10px; margin: 5px 0; }
  .page-index .app-strip .button { min-height: 30px; padding: 8px; font-size: 9px; }
}

/* Artwork revision: original brand logo, vector icons and individual promotion art. */
.hero-cashback { background-image: url('../assets/cashback-v2.webp'); }
.hero-tournament { background-image: url('../assets/tournament-v2.webp'); }
.hero-offers { background-image: url('../assets/offers-v2.webp'); }
.brand img, .footer-brand img { width: 86px; height: 44px; }
.hero-copy .features img { filter: grayscale(1) brightness(1.8); }
.game-card.enhanced-art > span {
  opacity: 1;
  padding: 8px 5px;
  font-size: clamp(13px, 1.7vw, 23px);
  font-weight: 800;
  background: #00120bd9;
  letter-spacing: -.4px;
}
.game-card.enhanced-art:hover > span,
.game-card.enhanced-art:focus-visible > span { opacity: 0; }
.download-badge { gap: 12px; }
.download-badge img { flex: 0 0 26px; width: 26px; height: 26px; }
.download-badge > span { font-size: 14px; text-align: left; }
.download-badge small, .download-badge strong { display: block; line-height: 1.2; }
.download-badge small { font-size: 10px; font-weight: 400; margin-bottom: 3px; }
.download-badge strong { font-size: 17px; }
@media (max-width: 600px) {
  .brand img, .footer-brand img { width: 74px; height: 38px; }
  .game-card.enhanced-art > span { font-size: 13px; padding: 5px 3px; }
  .download-buttons .download-badge { gap: 8px; padding: 10px; }
  .page-app .hero-phone .hero-copy,
  .page-payments .hero-phone .hero-copy { width: 54%; }
  .page-app .hero-phone h1,
  .page-payments .hero-phone h1 { font-size: 26px; }
}
/* Keep promotional objects inside their slots rather than cropping trophies. */
.promotion.hero-cashback,
.promotion.hero-tournament,
.promotion.hero-offers {
  background-size: auto 115%;
  background-position: right center;
  background-repeat: no-repeat;
  background-color: #000f09;
}
@media (max-width: 600px) {
  .page-index .hero:nth-child(4) {
    background-size: auto 160%;
    background-position: right 20%;
    background-color: #00110b;
  }
  .page-index .app-strip>figure { width:46%; }
  .page-index .app-strip img {
    height: 160px;
    object-fit: cover;
    object-position: right center;
  }
}

/* Local club crests and national flags in the sports match list. */
.match > div:first-child { min-width: 0; }
.match-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.match-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.match-team .team-badge {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.match-team strong { line-height: 1.2; }
@media (max-width: 600px) {
  .match-teams { grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
  .match-team { gap: 7px; }
  .match-team .team-badge { flex-basis: 24px; width: 24px; height: 24px; }
  .match-team strong { font-size: 11px; }
}

/* Shared footer inspired by the supplied reference. */
.site-footer {
  display: block;
  margin-top: 44px;
  padding: 38px 28px 24px;
  background: #1a1f2b;
  border-top: 1px solid #334239;
  color: #f4f7f5;
  font-size: 13px;
}
.site-footer p { margin: 0; width: auto; line-height: 1.55; }
.footer-brand-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.footer-region { font-size: 10px; color: #93a399; letter-spacing: 1.5px; }
.footer-region span { margin: 0 8px; color: #4e6357; }
.footer-top-grid { display: grid; grid-template-columns: 1.15fr 1.15fr 2.1fr 1fr; gap: 28px; }
.site-footer h2 { margin: 0 0 20px; font-size: 11px; letter-spacing: .55px; color: #9faab9; line-height: 1.4; }
.site-footer a, .site-footer button { transition: color .15s, border-color .15s, background .15s; }
.site-footer a:hover, .site-footer button:hover { color: var(--green); }
.site-footer button { font: inherit; }
.footer-support-label { color: #a5b0bd; font-size: 12px; }
.footer-support-link { display: inline-block; margin-top: 8px; font-weight: 600; }
.footer-support-link span { color: var(--green); margin-left: 4px; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.footer-socials button { display: grid; place-items: center; width: 32px; height: 36px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px; }
.footer-socials button:hover { border-color: #45604e; background: #25332d; }
.footer-socials img { width: 22px; height: 22px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.footer-contact-list { display: grid; gap: 14px; }
.footer-contact-list li { display: grid; gap: 3px; }
.footer-contact-list span { color: #9faab9; font-size: 11px; }
.footer-contact-list a { font-size: 12px; font-weight: 600; line-height: 1.4; }
.site-footer .footer-nav { display: block; flex: initial; gap: 0; }
.footer-nav-columns { display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px; }
.footer-nav-columns ul { display: grid; gap: 13px; align-content: start; }
.footer-nav-columns a, .footer-nav-columns button { font-size: 12px; line-height: 1.5; text-align: left; }
.footer-nav-columns button { display: inline; padding: 0; border: 0; background: transparent; }
.footer-downloads { min-width: 0; }
.footer-app-badge { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 57px; padding: 10px; margin-bottom: 10px; border: 1px solid #3c4856; border-radius: 9px; background: #151a24; }
.footer-app-badge:hover { border-color: var(--green); }
.footer-app-badge img { flex: 0 0 27px; width: 27px; height: 27px; }
.footer-app-badge small, .footer-app-badge strong { display: block; line-height: 1.2; }
.site-footer .footer-app-badge small { font-size: 9px; color: #c6cdd5; margin-bottom: 3px; }
.footer-app-badge strong { font-size: 17px; color: #fff; }
.footer-sports-rail { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); align-items: center; justify-items: center; gap: 18px; padding: 44px 0 34px; margin-top: 20px; }
.footer-sports-rail img { width: 86px; height: 68px; object-fit: contain; }
.footer-payments { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; padding: 22px 0; border-top: 1px solid #343e49; border-bottom: 1px solid #343e49; color: #a5b2bc; }
.footer-payments > a { display: flex; align-items: center; justify-content: center; min-height: 32px; }
.footer-payments img { width: 46px; height: 28px; object-fit: contain; opacity: .8; }
.footer-payment-name { font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.footer-currency { font-size: 13px; font-weight: 700; border: 1px solid #4b5a57; border-radius: 5px; padding: 4px 8px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 24px; }
.footer-responsible { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.footer-age { display: grid; place-items: center; min-width: 39px; height: 39px; border: 1px solid #8d9e93; border-radius: 50%; font-weight: 700; font-size: 13px; color: #dce5de; }
.footer-responsible p { font-size: 11px; }
.footer-responsible p span { color: #a5b0bd; }
.footer-disclaimer { font-size: 10px; color: #a5b0bd; text-align: right; }
.footer-disclaimer span { color: #7f8f9f; }
#footer-dialog { max-width: 480px; }
#footer-dialog-content p { font-size: 14px; line-height: 1.65; margin: 16px 0; color: #cfdfd4; }
.footer-dialog-close { position: absolute; top: 9px; right: 13px; background: transparent; font-size: 28px; }
.footer-dialog-done { margin-top: 8px; }
@media (max-width: 960px) {
  .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
  .footer-downloads h2 { grid-column: 1/-1; margin-bottom: 6px; }
  .footer-downloads .footer-app-badge { margin-bottom: 0; }
  .footer-sports-rail { gap: 10px; }
}
@media (max-width: 600px) {
  .site-footer { padding: 26px 18px 22px; margin-top: 30px; }
  .footer-brand-row { margin-bottom: 26px; }
  .footer-region { font-size: 8px; letter-spacing: 1px; }
  .footer-top-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .site-footer h2 { font-size: 10px; margin-bottom: 15px; }
  .footer-support-label { font-size: 11px; }
  .footer-support-link { font-size: 11px; }
  .footer-socials { gap: 6px; margin-top: 15px; }
  .footer-socials button { width: 30px; height: 32px; }
  .footer-nav { grid-column: 1/-1; }
  .footer-nav-columns { gap: 20px; }
  .footer-nav-columns a, .footer-nav-columns button { font-size: 12px; }
  .footer-downloads { grid-column: 1/-1; }
  .footer-contact-list { gap: 12px; }
  .footer-contact-list a { font-size: 11px; }
  .footer-contact-list span { font-size: 10px; }
  .footer-sports-rail { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 8px; margin-top: 26px; padding: 24px 0; border-top: 1px solid #343e49; }
  .footer-sports-rail img { width: 68px; height: 52px; }
  .footer-payments { gap: 14px 22px; padding: 18px 0; }
  .footer-payment-name { font-size: 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 20px; }
  .footer-disclaimer { text-align: left; font-size: 10px; }
}
@media (max-width: 600px) {
  .footer-socials { gap: 1px; }
  .footer-socials button { width: 24px; height: 32px; padding: 2px; }
  .footer-socials img { width: 20px; height: 20px; }
}

/* Shared sticky header and partner-configurable app download action. */
.header { position: sticky; top: 0; z-index: 100; }
.header-app-download { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:10px 14px; border:1px solid var(--gold); border-radius:7px; background:var(--gold); color:#132015; font-size:12px; font-weight:800; white-space:nowrap; box-shadow:0 0 18px #ffe64d18; }
.header-app-download:hover { background:#fff08a; border-color:#fff08a; }
.header-app-download > span:first-child { font-size:20px; line-height:1; }
.header-app-label-short { display:none; }
html { scroll-padding-top:96px; }
@media(max-width:1100px) {
 .header { gap:16px; }
 .main-nav { display:none; }
 .header-actions { margin-left:auto; }
 .menu-toggle { display:inline-block; }
 .mobile-menu { position:sticky; top:76px; z-index:99; max-height:calc(100dvh - 76px); overflow:auto; }
}
@media(max-width:900px) { .mobile-menu { top:62px; max-height:calc(100dvh - 62px); } }
@media(max-width:600px) {
 .header { gap:8px; padding-left:12px; padding-right:12px; }
 .header select { display:none; }
 .header-actions { gap:6px; }
 .header-app-label { display:none; }
 .header-app-label-short { display:inline; }
 .header-app-download { min-height:36px; padding:8px 10px; font-size:11px; gap:4px; }
 .header .login { padding:8px 10px; font-size:11px; }
 .header .menu-toggle { padding:8px 6px; font-size:11px; }
}

@media(min-width:1101px) { .header { gap:20px; } .main-nav { gap:18px; } }

/* Shared breadcrumb trail matches the BreadcrumbList JSON-LD. */
.site-breadcrumbs { padding:20px 28px 0; color:var(--muted); font-size:12px; }
.site-breadcrumbs ol { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.site-breadcrumbs li + li::before { content:"/"; margin-right:8px; color:#809b8d; }
.site-breadcrumbs a:hover { color:var(--green); }
.site-footer .footer-publisher { margin-top:20px; color:var(--muted); font-size:12px; }
@media(max-width:600px) { .site-breadcrumbs { padding:18px 12px 0; } }
/* Visually hidden semantic text remains available to screen readers and crawlers. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
figure { margin:0; }
/* Keep anchor-target headings visible below the sticky header. */
main [id] { scroll-margin-top: 112px; }