/* ===========================================================
   Roobet Casino Canada — stylesheet
   Palette: navy + gold (mirrors the reference look & feel)
   =========================================================== */

:root{
  --navy:#0a1c3d;
  --navy-2:#102a5c;
  --navy-3:#0e2350;
  --gold:#f4c430;
  --gold-dark:#d9a916;
  --text:#e6ecf5;
  --muted:#aab4c6;
  --line:rgba(255,255,255,.12);
  --radius:14px;
  --maxw:1080px;
  --font:"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--navy);
  color:var(--text);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--gold);text-decoration:none;}

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  padding:12px 22px;
  border-radius:40px;
  transition:transform .12s ease,box-shadow .15s ease,background .15s ease;
  line-height:1.1;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 6px 18px rgba(244,196,48,.35);}
.btn-gold:hover{background:var(--gold-dark);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
.btn-outline{background:transparent;color:var(--gold);border:2px solid var(--gold);}
.btn-outline:hover{background:var(--gold);color:var(--navy);}
.btn-lg{font-size:17px;padding:15px 34px;}
.cta-center{text-align:center;margin:30px 0;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--navy-3);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px;}
.brand-logo{height:48px;width:auto;}
.nav-toggle{
  display:none;background:none;border:none;color:var(--gold);
  font-size:28px;cursor:pointer;line-height:1;
}
.main-nav{display:flex;align-items:center;gap:28px;}
.main-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;}
.main-nav a{color:var(--text);font-weight:600;font-size:15px;}
.main-nav a:hover{color:var(--gold);}
.nav-cta{display:flex;gap:10px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:url("img/image1.webp") center/cover no-repeat,var(--navy-2);
  text-align:center;
  padding:70px 0 80px;
  overflow:hidden;
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,28,61,.55),rgba(10,28,61,.85));}
.hero-inner{position:relative;z-index:2;}
.hero-brand{font-size:clamp(26px,5vw,46px);font-weight:800;color:var(--gold);letter-spacing:.5px;}
.hero-offer{font-size:clamp(18px,3vw,26px);margin:18px auto 26px;max-width:760px;}
.hero-offer strong{font-weight:800;}

/* ---------- Games strip ---------- */
.games-strip{background:var(--navy-3);padding:26px 0;border-bottom:1px solid var(--line);}
.section-label{
  text-transform:uppercase;letter-spacing:2px;color:var(--gold);
  font-weight:800;font-size:14px;margin:0 0 16px;
}
.games-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;}
.game-thumb{
  flex:0 0 auto;background:none;border:none;padding:0;cursor:pointer;
  border-radius:12px;overflow:hidden;transition:transform .12s ease;
}
.game-thumb:hover{transform:translateY(-4px);}
.game-thumb img{width:140px;height:140px;border-radius:12px;}

/* ---------- Content ---------- */
.content{padding:46px 20px 20px;}
.content h1{
  font-size:clamp(26px,4.2vw,40px);line-height:1.2;color:#fff;
  margin:0 0 18px;font-weight:800;
}
.content h2{
  font-size:clamp(22px,3.2vw,30px);color:var(--gold);
  margin:46px 0 14px;font-weight:800;
  border-left:4px solid var(--gold);padding-left:14px;
}
.content h3{
  font-size:clamp(19px,2.6vw,23px);color:#fff;
  margin:30px 0 10px;font-weight:700;
}
.content p{margin:0 0 16px;color:var(--text);}

/* lists */
.steps{margin:0 0 18px;padding-left:22px;}
.steps li{margin-bottom:12px;}
.steps strong{color:var(--gold);}

/* ---------- Tables ---------- */
.table-scroll{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:18px 0 8px;border:1px solid var(--line);border-radius:var(--radius);
}
table{border-collapse:collapse;width:100%;min-width:560px;}
thead th{
  background:var(--navy-2);color:var(--gold);text-align:left;
  font-size:15px;padding:14px 16px;border-bottom:1px solid var(--line);
}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:15.5px;vertical-align:top;}
tbody tr:nth-child(even){background:rgba(255,255,255,.03);}
tbody tr:last-child td{border-bottom:none;}

/* ---------- Screenshots & bonuses ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;}
.shot{background:none;border:none;padding:0;cursor:pointer;border-radius:12px;overflow:hidden;transition:transform .12s ease;}
.shot:hover{transform:translateY(-4px);}
.shot img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);}
.bonus-row{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 8px;}

/* ---------- Payment logos ---------- */
.pay-logos{background:#fff;padding:26px 0;}
.pay-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px;}
.pay-row img{height:42px;width:auto;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-3);border-top:1px solid var(--line);padding:34px 0;}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0 0 16px;padding:0;justify-content:center;}
.footer-links a{color:var(--text);font-size:14px;}
.footer-links a:hover{color:var(--gold);}
.footer-note{color:var(--muted);font-size:13px;text-align:center;max-width:760px;margin:0 auto 14px;line-height:1.6;}
.copyright{color:var(--muted);font-size:13px;text-align:center;margin:0;}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:860px){
  .shots{grid-template-columns:1fr 1fr;}
}

@media (max-width:720px){
  body{font-size:16px;}

  /* mobile nav */
  .nav-toggle{display:block;}
  .main-nav{
    position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-3);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .main-nav.open{max-height:480px;}
  .main-nav ul{flex-direction:column;gap:0;}
  .main-nav li{border-top:1px solid var(--line);}
  .main-nav a{display:block;padding:15px 20px;}
  .nav-cta{padding:14px 20px;border-top:1px solid var(--line);}
  .nav-cta .btn{flex:1;text-align:center;}

  .hero{padding:54px 0 60px;}
  .games-row{gap:10px;}
  .game-thumb img{width:118px;height:118px;}

  .shots{grid-template-columns:1fr;}
  .bonus-row .btn{width:100%;text-align:center;}
  .cta-center .btn{width:100%;}

  .pay-row{gap:18px;}
  .pay-row img{height:34px;}
}

@media (max-width:420px){
  .container{padding:0 14px;}
  .content{padding:34px 14px 16px;}
}