/* mb-pt-08 — Mostbet Portugal · champagne-gold on deep navy */

:root{
  --surface:#0d1b33;
  --primary:#173a5f;
  --primary-soft:#1e4a76;
  --accent:#f0c869;
  --accent-dark:#c99a3d;
  --text:#eef2fa;
  --muted:#a9b8d4;
  --line:rgba(240,200,105,.18);
  --line-soft:rgba(255,255,255,.08);

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;
  --space-8:32px;--space-12:48px;--space-16:64px;

  --radius-s:10px;--radius-m:16px;--radius-l:20px;

  --z-dropdown:100;--z-sticky:200;--z-overlay:900;--z-toast:1100;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--surface);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0 0 var(--space-3)}
p{margin:0 0 var(--space-4)}
ul,ol{margin:0;padding:0;list-style:none}

.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;
}

.skip-link{
  position:absolute;left:var(--space-3);top:-60px;
  background:var(--accent);color:#1a1200;padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-s);z-index:var(--z-toast);transition:top .2s;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{top:var(--space-3)}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:12px 24px;border-radius:999px;font-weight:700;font-size:16px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  min-height:44px;
}
.btn-accent{background:var(--accent);color:#1a1200}
.btn-accent:hover,.btn-accent:focus-visible{background:var(--accent-dark)}
.btn-block{width:100%}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ===== header ===== */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(13,27,51,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:var(--space-3) var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:160px;height:36px}

.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:transparent;border:1px solid var(--line);
  border-radius:var(--radius-s);cursor:pointer;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text);margin:0 auto}

.site-nav{
  display:flex;flex-direction:column;gap:var(--space-1);
  position:absolute;top:100%;left:0;right:0;
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:var(--space-3) var(--space-4) var(--space-4);
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.site-nav.open{max-height:420px;padding-top:var(--space-3)}
.site-nav a{
  padding:var(--space-3) var(--space-2);text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--line-soft);font-weight:600;
}
.site-nav a:last-child{border-bottom:0}
.nav-cta{margin-top:var(--space-2);text-align:center}

@media (min-width:64em){
  .nav-toggle{display:none}
  .site-nav{
    position:static;flex-direction:row;align-items:center;max-height:none;
    overflow:visible;padding:0;background:transparent;border:0;gap:var(--space-6);
  }
  .site-nav a{border-bottom:0;padding:var(--space-2) 0}
  .nav-cta{margin-top:0;padding:10px 22px}
}

/* ===== hero: right sticky offer rail ===== */
.hero-layout{
  max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-4) var(--space-12);
  display:grid;gap:var(--space-8);
}
.hero-main h1{font-size:clamp(1.75rem, 4vw + 1rem, 2.75rem)}
.eyebrow{
  display:inline-block;color:var(--accent);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-size:.8rem;margin-bottom:var(--space-2);
}
.lead{font-size:1.1rem;color:var(--muted)}

.trust-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.trust-chip{
  background:var(--primary);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:.85rem;font-weight:600;color:var(--text);
}

.hero-offer{min-width:0}
.offer-card{
  background:linear-gradient(160deg,var(--primary-soft),var(--primary));
  border:1px solid var(--line);border-radius:var(--radius-l);
  padding:var(--space-6);text-align:center;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.offer-badge{
  display:inline-block;background:var(--accent);color:#1a1200;
  font-weight:800;font-size:1.5rem;padding:10px 22px;border-radius:999px;
  margin-bottom:var(--space-3);
}
.offer-title{font-weight:700;font-size:1.1rem;margin-bottom:var(--space-4)}
.offer-facts{margin-bottom:var(--space-4);text-align:left}
.offer-facts li{
  display:flex;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-2) 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;
}
.offer-facts li span{color:var(--accent);font-weight:800}
.offer-fine{font-size:.8rem;color:var(--muted);margin:var(--space-3) 0 0}

@media (min-width:64em){
  .hero-layout{grid-template-columns:1.4fr 1fr;align-items:start}
  .hero-offer{position:sticky;top:96px}
}

/* ===== sections ===== */
.section{
  max-width:1200px;margin:0 auto;
  padding:var(--space-12) var(--space-4);
}
.section-alt{background:var(--primary);border-radius:var(--radius-l);}
.section-head{max-width:760px;margin-bottom:var(--space-8)}
.section-head h2{font-size:clamp(1.4rem, 3vw + .8rem, 2rem)}
.section-head p{color:var(--muted)}
.section p{color:var(--text)}
.section-alt p{color:var(--muted)}

/* ===== slots bento grid (featured card + smaller tiles) ===== */
.game-bento{
  display:grid;gap:var(--space-4);margin-bottom:var(--space-8);
  grid-template-columns:repeat(auto-fit, minmax(min(200px,100%), 1fr));
}
.game-card{
  background:var(--primary);border:1px solid var(--line);border-radius:var(--radius-m);
  overflow:hidden;min-width:0;
}
.game-card--featured{grid-column:span 1}
@media (min-width:36em){
  .game-bento{grid-template-columns:repeat(4, 1fr)}
  .game-card--featured{grid-column:span 2;grid-row:span 2}
  .game-card--featured .game-thumb{aspect-ratio:4/3}
}
.game-thumb{position:relative;aspect-ratio:4/3;background:#0a1526}
.game-thumb img{width:100%;height:100%;object-fit:cover}
.game-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(13,27,51,.72);color:var(--accent);font-weight:700;
  opacity:0;transition:opacity .2s;
}
.game-card:hover .game-play,.game-card:focus-within .game-play{opacity:1}
.game-name{padding:var(--space-3) var(--space-3) 0;font-weight:700;margin:0}
.game-meta{padding:var(--space-1) var(--space-3) var(--space-3);color:var(--muted);font-size:.85rem;margin:0}

/* ===== tables ===== */
.table-wrap{overflow-x:auto;margin-bottom:var(--space-6);border-radius:var(--radius-m)}
table{
  width:100%;border-collapse:collapse;min-width:520px;
  background:var(--primary);border-radius:var(--radius-m);overflow:hidden;
}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--line-soft)}
th{background:rgba(240,200,105,.12);color:var(--accent);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em}
tbody tr:last-child td{border-bottom:0}

@media (max-width:40em){
  table,thead,tbody,tr,td{display:block}
  table{min-width:0}
  thead{display:none}
  tr{margin-bottom:var(--space-3);border:1px solid var(--line-soft);border-radius:var(--radius-s)}
  td{display:flex;justify-content:space-between;gap:var(--space-3);border-bottom:1px solid var(--line-soft)}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label);font-weight:700;color:var(--muted);padding-right:var(--space-3)}
}

/* ===== bonus cards ===== */
.bonus-grid{
  display:grid;gap:var(--space-4);margin-bottom:var(--space-6);
  grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
}
.bonus-card{
  background:var(--primary);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:var(--space-6);
}
.bonus-tag{
  display:inline-block;background:rgba(240,200,105,.15);color:var(--accent);
  border-radius:999px;padding:4px 12px;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:var(--space-3);
}
.bonus-value{font-size:1.8rem;font-weight:800;color:var(--accent);margin-bottom:var(--space-2)}
.bonus-card p:last-child{margin-bottom:0;color:var(--muted)}

/* ===== payments ===== */
.payment-chips{
  display:grid;gap:var(--space-4);margin-bottom:var(--space-6);
  grid-template-columns:repeat(auto-fit, minmax(min(140px,100%), 1fr));
}
.payment-chip{
  background:#fff;border-radius:var(--radius-m);padding:var(--space-4);
  display:flex;align-items:center;justify-content:center;
}
.payment-chip img{width:100%;height:auto;object-fit:contain}

/* ===== steps ===== */
.steps{
  display:grid;gap:var(--space-4);margin-bottom:var(--space-6);
  grid-template-columns:repeat(auto-fit, minmax(min(220px,100%), 1fr));
  counter-reset:step;
}
.step{
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:var(--space-6);position:relative;
}
.step-num{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:var(--accent);color:#1a1200;
  font-weight:800;margin-bottom:var(--space-3);
}
.step p{margin:0;color:var(--muted)}

/* ===== FAQ ===== */
.faq-list{display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item{
  background:var(--primary);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:var(--space-4) var(--space-5, var(--space-6));
}
.faq-item summary{
  cursor:pointer;font-weight:700;list-style:none;padding:var(--space-1) 0;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);
  min-height:44px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-size:1.4rem;font-weight:700;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:var(--space-2) 0 0;color:var(--muted)}

/* ===== footer ===== */
.site-footer{
  border-top:1px solid var(--line);margin-top:var(--space-12);
  padding:var(--space-8) var(--space-4);
}
.footer-inner{max-width:1200px;margin:0 auto;text-align:center}
.footer-inner .brand{justify-content:center;margin-bottom:var(--space-4)}
.footer-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-6);list-style:none;margin:0 0 var(--space-3);padding:0;font-size:.85rem}
.footer-legal-links a{color:var(--muted);text-decoration:none}
.footer-legal-links a:hover{color:var(--accent)}
.footer-legal{max-width:640px;margin:0 auto var(--space-3);color:var(--muted);font-size:.85rem}
.footer-copy{color:var(--muted);font-size:.8rem;margin:0}

/* ===== to-top ===== */
.to-top{
  position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:var(--z-overlay);
  width:48px;height:48px;border-radius:50%;background:var(--accent);color:#1a1200;
  border:0;font-size:1.2rem;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);
}
.to-top[hidden]{display:none}

@media (prefers-reduced-motion:no-preference){
  .site-nav,.game-play{transition-duration:.25s}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.001ms !important}
}