*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:Arial,sans-serif;
  background:#251f32;
  color:#fff;
  line-height:1.6;
  padding:0 10px;
  overflow-x:hidden;
}

/* Top navigation */
.topbar{
  background:#241e34;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
  position:relative;
  z-index:1000;
  flex-wrap:wrap;
}
.brand-mark{flex-shrink:0;}
.brand-mark img{
  display:block;
  width:166px;
  height:55px;
  max-width:100%;
}
.menu-toggle{
  display:none;
  background:transparent;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  padding:5px;
  z-index:1001;
}
.burger-line{
  width:28px;
  height:3px;
  background:#fff;
  transition:all 0.3s ease;
}
.nav-links{
  display:flex;
  list-style:none;
  gap:25px;
  margin:0;
  flex-wrap:wrap;
}
.nav-links li a,
.nav-links li span{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  transition:color 0.3s;
  white-space:nowrap;
}
.nav-links li a:hover{color:#ffa500;}
.active-page{
  color:#ffa500;
  font-weight:bold;
}
.auth-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn-signin,.btn-signup{
  padding:10px 24px;
  border-radius:5px;
  text-decoration:none;
  font-weight:bold;
  transition:all 0.3s;
  white-space:nowrap;
}
.btn-signin{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}
.btn-signin:hover{
  background:#fff;
  color:#241e34;
}
.btn-signup{
  background:#ffa500;
  color:#000;
  border:2px solid #ffa500;
}
.btn-signup:hover{
  background:#ff8c00;
  border-color:#ff8c00;
}

/* Mobile nav */
.mobile-nav{
  display:none;
  background:#1a1525;
  position:fixed;
  top:0;
  left:-100%;
  width:280px;
  max-width:85vw;
  height:100vh;
  padding-top:80px;
  transition:left 0.3s ease;
  z-index:999;
  overflow-y:auto;
  box-shadow:2px 0 10px rgba(0,0,0,0.5);
}
.mobile-nav.active{left:0;}
.mobile-links{
  list-style:none;
  padding:20px;
}
.mobile-links li{margin-bottom:5px;}
.mobile-links li a,
.mobile-links li span{
  color:#fff;
  text-decoration:none;
  font-size:18px;
  display:block;
  padding:10px;
  word-wrap:break-word;
}
.mobile-links li a:hover{color:#ffa500;}
.mobile-signin,.mobile-signup{
  display:block;
  text-align:center;
  padding:12px;
  border-radius:5px;
  margin-top:10px;
  font-weight:bold;
  text-decoration:none;
}
.mobile-signin{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
}
.mobile-signup{
  background:#ffa500;
  color:#000;
  border:2px solid #ffa500;
}

/* Hero */
.support-hero{
  background:linear-gradient(135deg,#1a1525 0%,#241e34 50%,#251f32 100%);
  padding:60px 20px;
  text-align:center;
  max-width:900px;
  margin:0 auto 40px;
  border-radius:12px;
}
.support-hero h1{
  font-size:36px;
  color:#ffa500;
  margin-bottom:15px;
  text-shadow:2px 2px 6px rgba(0,0,0,0.8);
}
.support-hero .hero-text{
  font-size:18px;
  color:#eee;
  max-width:650px;
  margin:0 auto;
  line-height:1.6;
}

/* CTA buttons */
.cta-center{
  text-align:center;
  margin-top:20px;
}

/* Main CTA to /play */
.btn-cta-main{
  display:inline-block;
  background:linear-gradient(135deg,#ffa500,#ffcc33);
  color:#000;
  font-weight:bold;
  font-size:18px;
  padding:14px 40px;
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(255,165,0,0.55);
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space:nowrap;
}
.btn-cta-main:hover{
  background:linear-gradient(135deg,#ff8c00,#ffb300);
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(255,165,0,0.75);
}

/* Secondary CTA (outline) */
.btn-cta-outline{
  display:inline-block;
  background:transparent;
  color:#ffa500;
  font-weight:bold;
  font-size:16px;
  padding:12px 24px;
  border-radius:999px;
  border:2px solid #ffa500;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,0.45);
  transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;
  white-space:normal;       
  max-width:260px;             
  line-height:1.3;         
  text-align:center;          
}

.btn-cta-outline:hover{
  background:#ffa500;
  color:#000;
  transform:translateY(-2px);
  box-shadow:0 7px 20px rgba(255,165,0,0.7);
}

/* Sections */
.contact-options,
.support-faq,
.responsible-support,
.complaints-procedure{
  max-width:900px;
  margin:40px auto 60px;
  padding:0 20px;
  color:#ddd;
}
.contact-options h2,
.support-faq h2,
.responsible-support h2,
.complaints-procedure h2{
  font-size:28px;
  color:#ffa500;
  margin-bottom:25px;
  text-align:center;
}

/* Contact grid */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}
.contact-card{
  background:rgba(255,255,255,0.06);
  border-radius:12px;
  padding:24px 20px;
  box-shadow:0 3px 15px rgba(0,0,0,0.35);
  transition:all 0.3s ease;
}
.contact-card:hover{
  background:rgba(255,165,0,0.15);
  box-shadow:0 5px 25px rgba(255,165,0,0.5);
  transform:translateY(-4px);
}
.contact-card h3{
  font-size:20px;
  color:#ffa500;
  margin-bottom:12px;
}
.contact-card p{
  font-size:15px;
  color:#eee;
  line-height:1.7;
  margin-bottom:8px;
}

/* FAQ */
.support-faq .faq-item{
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  padding:18px 16px;
  margin-bottom:15px;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.support-faq .faq-item h3{
  font-size:18px;
  color:#ffa500;
  margin-bottom:8px;
}
.support-faq .faq-item p{
  font-size:15px;
  color:#ddd;
  line-height:1.7;
}

/* Responsible gaming support */
.responsible-support p{
  font-size:15px;
  color:#ddd;
  line-height:1.7;
  margin-bottom:15px;
}
.rg-list{
  list-style:disc;
  padding-left:22px;
  margin-bottom:15px;
}
.rg-list li{
  font-size:15px;
  color:#ddd;
  margin-bottom:8px;
}

/* Complaints */
.complaints-procedure p{
  font-size:15px;
  color:#ddd;
  line-height:1.7;
  margin-bottom:15px;
}

/* Footer */
.basement{
  background:#000500;
  margin:80px -10px 0;
  padding:50px 20px;
  overflow-x:auto;
}
.basement-content{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
.brand-info-zone{
  margin-bottom:40px;
}
.brand-info-zone img{
  margin:0 auto 20px;
  display:block;
  max-width:100%;
  height:auto;
}
.brand-info-zone p{
  font-size:14px;
  line-height:1.7;
  color:#ccc;
  margin-bottom:12px;
  word-wrap:break-word;
}
.gamble-notice{
  color:#ffa500;
  font-weight:bold;
  font-size:15px;
}
.basement-links{
  margin-bottom:40px;
}
.basement-links h4{
  font-size:18px;
  margin-bottom:15px;
  color:#ffa500;
}
.basement-links ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
}
.basement-links ul li a,
.basement-links ul li span{
  color:#ccc;
  text-decoration:none;
  font-size:14px;
  transition:color 0.3s;
  white-space:nowrap;
}
.basement-links ul li a:hover{
  color:#ffa500;
}
.payment-strip,
.provider-strip{
  margin-bottom:35px;
  overflow-x:auto;
}
.payment-strip h4,
.provider-strip h4{
  font-size:18px;
  margin-bottom:15px;
  color:#ffa500;
}
.payment-icons,
.provider-logos{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:20px;
  min-height:50px;
}
.payment-icons img,
.provider-logos img{
  filter:grayscale(100%) brightness(0.8);
  transition:all 0.3s;
  max-width:100%;
  height:auto;
}
.payment-icons img:hover,
.provider-logos img:hover{
  filter:grayscale(0%) brightness(1);
}
copyright-line{
  font-size:13px;
  color:#999;
  margin-top:30px;
  word-wrap:break-word;
}

/* Responsive */
@media (max-width:1080px){
  .menu-toggle{display:flex;}
  .nav-links,.auth-buttons{display:none;}
  .mobile-nav{display:block;}
  .support-hero h1{font-size:32px;}
  .support-hero .hero-text{font-size:16px;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .support-hero h1{font-size:28px;}
  .support-hero .hero-text{font-size:15px;}
  .contact-options h2,
  .support-faq h2,
  .responsible-support h2,
  .complaints-procedure h2{
    font-size:24px;
  }
  .contact-card p,
  .support-faq .faq-item p,
  .responsible-support p,
  .complaints-procedure p{
    font-size:14px;
  }
}
@media (max-width:480px){
  .brand-mark img{width:140px;height:46px;}
  .support-hero h1{font-size:24px;}
  .support-hero .hero-text{font-size:14px;}
  .btn-cta-main{
    font-size:16px;
    padding:12px 26px;
    max-width:240px;
  }
  .btn-cta-outline{
    font-size:14px;
    padding:10px 20px;
    max-width:240px;
  }
  .cta-center{
    padding:0 10px; 
  }
  .contact-card{padding:18px 14px;}
  .contact-card h3{font-size:18px;}
  .contact-card p{font-size:13px;}
  .support-faq .faq-item{padding:14px 12px;}
  .support-faq .faq-item h3{font-size:16px;}
  .support-faq .faq-item p{font-size:13px;}
  .rg-list li,
  .responsible-support p,
  .complaints-procedure p{font-size:13px;}
}
@media (max-width:320px){
  .support-hero h1{font-size:20px;}
  .support-hero .hero-text{font-size:13px;}
  .btn-cta-main{
    font-size:14px;
    padding:10px 20px;
    max-width:210px;
  }
  .btn-cta-outline{
    font-size:13px;
    padding:9px 18px;
    max-width:210px;
  }
  .mobile-nav{width:240px;}
}