/* Maxbet.co.cz — No-borders dark template */

:root{
  --bg:#0b0b12;
  --text:#ffffff;
  --muted:rgba(255,255,255,.75);
  --shadow: 0 18px 60px rgba(0,0,0,.40);
  --shadowSoft: 0 10px 30px rgba(0,0,0,.28);
  --radius:18px;
  --radius2:22px;
  --max: 1120px;

  --btnGreen:#0b5f17;
  --btnGreen2:#0a4b13;
  --btnOrange:#ff5a1f;
  --btnOrange2:#ff3d00;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 30% 0%, rgba(0,255,120,.08), transparent 60%),
              radial-gradient(1000px 500px at 80% 20%, rgba(255,120,0,.08), transparent 55%),
              linear-gradient(180deg, #06060b, #0b0b12 50%, #07070d 100%);
  color: var(--text);
  line-height:1.55;
}

.container{ max-width:var(--max); margin:0 auto; padding:0 18px; }

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}

.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand .logo{
  width: 130px;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.nav{ display:flex; gap:14px; align-items:center; }
.nav a{
  padding:10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  font-weight: 750;
  font-size: 14px;
}
.nav a:hover{ background: rgba(255,255,255,.06); }
.nav a[aria-current="page"]{ background: rgba(255,255,255,.10); color:#fff; }

.header-right{ display:flex; align-items:center; gap:12px; }

.lang-pill{
  display:inline-flex; align-items:center; gap:8px;
  height:44px;
  padding:0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  color:#fff;
  font-weight: 900;
  letter-spacing:.2px;
}

.lang-pill select{
  background: transparent;
  color:#fff;
  border:0;
  font-weight:900;
  appearance:none;
  outline:none;
  cursor:pointer;
}
.lang-pill option{ color:#000; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius: 10px;
  border: 0;
  background: rgba(255,255,255,.10);
  color: #fff;
  font-weight: 900;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }

.btn-green{ background: linear-gradient(180deg, var(--btnGreen), var(--btnGreen2)); }
.btn-orange{ background: linear-gradient(180deg, var(--btnOrange), var(--btnOrange2)); }

.burger{
  display:none;
  width:44px; height:44px;
  border:0;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}

.mobile-nav{
  display:none;
  padding: 10px 0 14px;
}
.mobile-nav a{
  display:block;
  padding:12px 12px;
  border-radius: 12px;
  margin: 8px 0;
  background: rgba(255,255,255,.08);
  font-weight: 800;
}
.mobile-nav a[aria-current="page"]{ background: rgba(255,255,255,.14); }
.mobile-nav.is-open{ display:block; }

.hero-wrap{ padding:18px 0 10px; }
.hero{
  border:0;
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  padding:18px;
  align-items:stretch;
}

.hero-card{
  background: rgba(0,0,0,.35);
  border-radius: var(--radius2);
  padding:20px;
}

.hero h1{
  margin:0 0 10px;
  font-size: clamp(24px, 3.3vw, 44px);
  line-height:1.12;
}

.hero p{ margin:0 0 18px; color:var(--muted); }

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

.hero-media{
  border-radius: var(--radius2);
  min-height: 300px;
  background:
    radial-gradient(700px 260px at 60% 30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.10));
  position:relative;
  overflow:hidden;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 35% 40%, rgba(255,255,255,.10), transparent 55%);
}

.section{ padding:18px 0; }
.panel{
  border:0;
  border-radius: var(--radius2);
  box-shadow: var(--shadowSoft);
  background: rgba(255,255,255,.03);
}
.panel-inner{ padding:16px; }
.h2{ margin:0 0 12px; font-size:18px; }

.slots{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:18px;
}
.slot{
  display:block;
  background: transparent;
  padding:0;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  transition: transform .18s ease, filter .18s ease;
}
.slot:hover{ transform: translateY(-3px); filter: brightness(1.03); }
.slot img{
  width:100%;
  height: 150px;
  object-fit: cover;
  display:block;
}

.content h2{ margin: 18px 0 10px; font-size: 18px; }
.content h3{ margin: 16px 0 8px; font-size: 16px; color: rgba(255,255,255,.90); }
.content p{ margin:10px 0; color: var(--muted); }
.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-scroll table{
  width:100%;
  min-width:700px; /* підбери під свою таблицю */
  border-collapse:collapse;
}
.table-wrap{
  overflow-x:hidden;
  border-radius: 16px;
  border:0;
  background: rgba(0,0,0,.28);
  box-shadow: var(--shadowSoft);
}
table{ width:100%; border-collapse: collapse; min-width: 680px; }
th,td{ padding:10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); text-align:left; }
th{ background: rgba(255,255,255,.06); color:#fff; }
td{ color: var(--muted); }
tr:hover td{ background: rgba(255,255,255,.03); }

.faq{ display:grid; gap:12px; }
.faq-item{
  border:0;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}
.faq-q{
  width:100%;
  border:0;
  background: transparent;
  color:#fff;
  padding:14px 14px;
  font-weight: 900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
}
.faq-a{ display:none; padding:0 14px 14px; color: var(--muted); }
.faq-item[open] .faq-a{ display:block; }

.footer{
  margin-top:26px;
  padding:18px 0 26px;
  color: rgba(255,255,255,.70);
}
.footer a{ text-decoration: underline; text-underline-offset: 3px; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}

.note{
  display:inline-flex; gap:8px; align-items:center;
  padding:10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  margin-top:10px;
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-media{ min-height: 220px; }
}

@media (max-width: 860px){
  .nav{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .slots{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .slot img{ height: 140px; }
  .footer-grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .header{ flex-wrap:wrap; }
  .brand .logo{ width: 110px; }
  .header-right{ width:100%; justify-content: space-between; }
  .btn{ flex:1; }
  .slots{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .slot img{ height: 130px; }
  table{ min-width: 560px; }
}


/* FAQ (enhanced) */
.faq-item { position: relative; }
.faq-q { gap: 12px; }
.faq-q span { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background: rgba(255,255,255,.06); color:#fff; font-weight:800; line-height:1; transition: transform .2s ease; }
.faq-item[open] .faq-q span { transform: rotate(45deg); }


/* Hero image + subtitle */
.hero-subtitle{
  margin: 10px 0 0;
  color: rgba(255,255,255,.84);
  font-size: 16px;
  line-height: 1.55;
  max-width: 58ch;
}
.hero-media{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}