:root {
  --bg:#0f1220;
  --card:#1e2240;
  --radius:12px;
  --radius-md:20px;
  --accent:#1976d2;
  --text:#f0f4ff;
  --muted:#9aa0b0;
  --shadow:0 20px 40px rgba(0,0,0,0.25);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{background: #0f1220;color: var(--text);line-height:1.5;min-height:100vh;}

.container{max-width:1200px;margin:0 auto;padding:0 16px;}

.site-header{background: linear-gradient(135deg,#1b203f,#0f1220);padding:12px 0;position:sticky;top:0;z-index:10;box-shadow:0 8px 30px rgba(0,0,0,0.4);}
.logo{font-weight:700;font-size:1.25rem;display:inline-block;color:var(--accent);}
.nav{display:flex;align-items:center;position:relative;}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;color:var(--text);cursor:pointer;margin-right:12px;}
.nav-links{list-style:none;display:flex;gap:10px;align-items:center;}
.nav-links li a{color:var(--text);text-decoration:none;padding:8px 12px;border-radius:8px;font-size:0.9rem;}
.btn{display:inline-block;font-weight:600;border-radius:8px;cursor:pointer;text-decoration:none;transition:all .2s;}
.primary{background: var(--accent);color:#0f1220;padding:10px 16px;}
.outline{border:2px solid var(--accent);color:var(--accent);padding:8px 14px;background:transparent;}
.large{padding:14px 22px;}
.hero{padding:60px 0;position:relative;overflow:hidden;}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.hero-text h1{font-size:2.5rem;margin-bottom:12px;}
.hero-text p{font-size:1.05rem;margin-bottom:20px;color:var(--muted);}
.hero-cta a{margin-right:12px;}
.image-box{background:rgba(255,255,255,0.05);height:250px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;}

.features{padding:60px 0;}
.features h2{font-size:2rem;margin-bottom:20px;text-align:center;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:16px;}
.card{background: var(--card);padding:20px;border-radius:16px;box-shadow:var(--shadow);}
.card h3{margin-bottom:8px;}
.card p{font-size:0.9rem;color:var(--muted);}

.bets{padding:60px 0;background:#0f1220;}
.bets h2{font-size:2rem;margin-bottom:16px;text-align:center;}
.sport-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px;}
.sport-item{background: var(--card);padding:12px 18px;border-radius:999px;font-size:0.85rem;white-space:nowrap;}

.site-footer{background:#1b203f;padding:40px 0;color:var(--muted);}
.footer-col{flex:1;min-width:200px;margin-bottom:20px;}
.footer-col h4{color:var(--text);margin-bottom:8px;}
.footer-col ul{list-style:none;padding-left:0;}
.footer-col ul li{margin-bottom:6px;}
.footer-col ul li a{color:var(--muted);text-decoration:none;font-size:0.9rem;}
.footer-bottom{text-align:center;padding:14px;font-size:0.75rem;border-top:1px solid rgba(255,255,255,0.08);margin-top:20px;}

footer .container{display:flex;gap:40px;flex-wrap:wrap;}

/* Responsive */
@media (max-width: 992px){
  .hero-inner{grid-template-columns:1fr;}
  .nav-links{gap:6px;}
}
@media (max-width: 768px){
  .nav-links{position:absolute;top:100%;right:0;background:#1e2240;flex-direction:column;padding:12px;border-radius:10px;width:220px;display:none;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:inline-block;}
}

.bonus-btn-box {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none; /* убираем серый фон */
  height: auto;
}

.big-bonus-btn {
  font-size: 1.5rem; /* крупнее текст */
  padding: 20px 36px; /* больше кнопка */
  color: white; /* белый текст */
  background: linear-gradient(135deg, #1976d2, #0f1220); /* яркий фон */
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(255,255,255,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.big-bonus-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(255,255,255,0.6);
}

.main-content {
  padding: 60px 0;
  background: #0f1220;
}
.main-content h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
}
.main-content p {
  font-size: 1rem;
  margin-bottom: 24px;
  color: var(--text);
}

.features-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 32px;
  font-size: 0.9rem;
}
.features-table thead th {
  text-align: left;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.features-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.features-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.02);
}
.features-table td {
  padding: 10px 14px;
}

.text-lists {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.list-block {
  flex: 1;
  min-width: 250px;
}
.list-block h3 {
  margin-bottom: 8px;
  font-size: 1.25rem;
}
.list-block ul,
.list-block ol {
  padding-left: 1.2rem;
  margin-top: 0;
  color: var(--text);
}
.list-block li {
  margin-bottom: 8px;
}

/* кнопки меньшего размера для шапки */
.btn.small {
  padding: 8px 14px;
  font-size: 0.85rem;
}

/* выравнивание шапки: логотип, действия, бургер/меню */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

/* отдельно блок с Sign Up / Login */
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* на мобильных: скрываем остальные ссылки за бургером как раньше, но сохраняем видимыми action-кнопки */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    background: #1e2240;
    flex-direction: column;
    padding: 12px;
    border-radius: 10px;
    width: 220px;
    display: none;
    gap: 6px;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-toggle {
    display: inline-block;
  }
}

/* Скрыть на десктопе */
.header-actions {
  display: none;
}

/* Показать только на мобильных */
@media (max-width: 992px) {
  .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.expandable .more {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* Когда раскрыто — даём достаточно большой max-height, чтобы вместить содержимое */
.expandable.expanded .more {
  max-height: 1000px; /* должно быть больше, чем ожидаемый объём; можно делать динамически при необходимости */
}

/* Стиль кнопки */
.read-more-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  padding: 0;
  margin-top: 8px;
  font-size: 0.95rem;
  text-decoration: underline;
}

/* FAQ SECTION */
.faq-section {
  padding: 80px 0;
  background: #0f1220;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 24px;
  color: var(--text);
}

.faq-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-item {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.faq-item-title {
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--text);
}

.faq-item-content-inner {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}