/* ==========================================================
   BETTING REVIEW TEMPLATE — dark neon theme
   Шрифты: Sora (заголовки), Manrope (текст)
   ========================================================== */

:root{
  --bg: #0b0e14;
  --bg-elevated: #12161f;
  --bg-card: #161b26;
  --border: #232a38;
  --text: #e9edf5;
  --text-dim: #9aa4b8;
  --accent: #3ddc84;
  --accent-soft: rgba(61,220,132,.14);
  --accent-2: #ffb020;
  --danger: #ff5470;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 20px 40px -20px rgba(0,0,0,.6);
  --maxw: 1180px;
  font-size: 62.5%; /* 1rem = 10px */
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 2rem; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

h1,h2,h3,h4,h5{ font-family:'Sora', sans-serif; font-weight:700; color:#fff; line-height:1.25; margin: 0 0 1.2rem; }

/* ---------------- HEADER ---------------- */
.header{
  position: sticky; top:0; z-index: 50;
  background: rgba(11,14,20,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 7.2rem;
}
.logo{ display:flex; align-items:center; gap:.8rem; }
.logo__img{ width:36px; height:36px; border-radius: 8px; }
.logo__text{ font-family:'Sora',sans-serif; font-weight:800; font-size:2rem; color:#fff; }
.logo__text span{ color: var(--accent); }

.mainnav{ display:flex; gap: 1.5rem; }
.mainnav a{ color: var(--text-dim); font-weight:600; font-size:1.2rem; white-space:nowrap; }
.mainnav a:hover{ color:#fff; text-decoration:none; }

.header__actions{ display:flex; align-items:center; gap:1rem; }
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); background: var(--bg-elevated);
  color: var(--text-dim); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{ color:#fff; border-color: var(--accent); }
.header__burger{ display:none; flex-direction:column; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; }
.header__burger span{ height:2px; background:#fff; border-radius:2px; }

/* ---------------- HERO ---------------- */
.hero{
  padding: 6rem 0 4rem;
  background: radial-gradient(circle at 15% 0%, rgba(61,220,132,.15), transparent 55%),
              radial-gradient(circle at 85% 20%, rgba(255,176,32,.08), transparent 45%);
}
.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--accent-soft); color: var(--accent);
  border:1px solid rgba(61,220,132,.35);
  border-radius: 999px; padding:.6rem 1.4rem; font-size:1.3rem; font-weight:600;
  margin-bottom: 2rem;
}
.hero__title{ font-size: clamp(2.8rem, 4.2vw, 4.4rem); max-width: 900px; }
.hero__lead{ max-width: 760px; color: var(--text-dim); font-size:1.7rem; }
.hero__stats{ display:flex; gap:3.2rem; margin-top:3rem; flex-wrap:wrap; }
.hero__stat{ display:flex; flex-direction:column; }
.hero__stat-num{ font-family:'Sora',sans-serif; font-size:3rem; font-weight:800; color:#fff; }
.hero__stat span:last-child{ color: var(--text-dim); font-size:1.3rem; }

/* ---------------- SECTION TITLES ---------------- */
.section-title{ font-size: clamp(2.2rem, 3vw, 3rem); }
.section-sub{ color: var(--text-dim); max-width: 760px; margin-bottom: 3.2rem; }

/* =====================================================
   СЕКЦИЯ 1 — TOP RATING (карточки с рангом)
   ===================================================== */
.top-rating{ padding: 5rem 0; }
.rating-list{ display:flex; flex-direction:column; gap: 1.6rem; }

.rating-card{
  display:grid;
  grid-template-columns: 48px 100px 1fr 180px 160px 160px;
  align-items:center; gap: 1.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
  transition: border-color .2s ease, transform .2s ease;
}
.rating-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.rating-card--first{
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(61,220,132,.08), var(--bg-card) 40%);
  box-shadow: var(--shadow);
}

.rating-card__rank{
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; color:#0b0e14;
  background: var(--text-dim);
}
.rating-card__rank--1{ background: var(--accent); }
.rating-card__rank--2{ background: #c9d2e3; }
.rating-card__rank--3{ background: #d99a56; }

.rating-card__logo img{ border-radius: 10px; background:#fff; padding:.4rem; }

.rating-card__main{ display:flex; flex-direction:column; gap:.5rem; }
.rating-card__name{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.8rem; color:#fff; }
.rating-card__score{ display:flex; align-items:center; gap:.8rem; }
.score-value{ font-weight:800; color: var(--accent); font-size:1.5rem; }
.score-bar{ width:100px; height:8px; border-radius:99px; background:#232a38; overflow:hidden; }
.score-bar__fill{ display:block; height:100%; background: linear-gradient(90deg, var(--accent), #7be9ab); }
.rating-card__review-link{ font-size:1.3rem; color: var(--text-dim); }

.rating-card__bonus, .rating-card__meta{ display:flex; flex-direction:column; gap:.3rem; }
.rating-card__label{ font-size:1.2rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }
.rating-card__value{ font-weight:700; color:#fff; font-size:1.5rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--radius-sm); font-weight:700; font-size:1.4rem;
  padding: 1.1rem 1.6rem; text-decoration:none; transition: all .2s ease; cursor:pointer; border:none;
}
.btn--primary{ background: var(--accent); color:#06110b; }
.btn--primary:hover{ background:#59e79c; text-decoration:none; }
.btn--ghost{ background: transparent; border: 1px solid var(--border); color:#fff; }
.btn--ghost:hover{ border-color: var(--accent); color: var(--accent); text-decoration:none; }
.btn--sm{ padding:.7rem 1.2rem; font-size:1.3rem; }
.rating-card__cta{ justify-self:end; }

@media (max-width: 980px){
  .rating-card{ grid-template-columns: 1fr; text-align:center; }
  .rating-card__rank{ margin: 0 auto; }
  .rating-card__cta{ justify-self:center; width:100%; }
}

/* =====================================================
   СЕКЦИЯ 2 — ОБЫЧНАЯ СТАНДАРТНАЯ ТАБЛИЦА (без рейтинга)
   ===================================================== */
.plain-table-section{ padding: 5rem 0; background: var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.plain-table-wrap{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--border); }
.plain-table{ width:100%; border-collapse:collapse; min-width: 700px; background: var(--bg-card); }
.plain-table th, .plain-table td{ padding: 1.4rem 1.8rem; text-align:left; font-size:1.4rem; border-bottom:1px solid var(--border); }
.plain-table thead th{ background: var(--bg); color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:1.3rem; }
.plain-table tbody td{ color: var(--text-dim); }
.plain-table tbody tr:nth-child(even){ background: rgba(255,255,255,.02); }
.plain-table tbody tr:last-child td{ border-bottom:none; }
.plain-table-note{ margin-top: 1.6rem; font-size:1.3rem; color: var(--text-dim); }

/* =====================================================
   СЕКЦИЯ 3 — ПЕРЕЧИСЛЕНИЕ / КРИТЕРИИ (фиче-грид)
   ===================================================== */
.trust{ padding: 5rem 0; }
.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 2.4rem;
}
.feature-card__icon{
  font-family:'Sora',sans-serif; font-weight:800; color: var(--accent);
  font-size:1.4rem; margin-bottom: 1rem;
}
.feature-card__title{ font-size:1.7rem; margin-bottom:.8rem; }
.feature-card__text{ color: var(--text-dim); font-size:1.4rem; margin:0; }

@media (max-width: 900px){ .feature-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .feature-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   СЕКЦИЯ 4 — ПРОСТОЙ СПИСОК-ПЕРЕЧИСЛЕНИЕ (виды спорта)
   ===================================================== */
.sports-list-section{ padding: 5rem 0; background: var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.simple-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.simple-list li{
  display:flex; align-items:baseline; gap: 2rem;
  padding: 1.8rem 0; border-bottom: 1px solid var(--border);
}
.simple-list li:first-child{ border-top: 1px solid var(--border); }
.simple-list li::before{
  content: '→'; color: var(--accent); font-weight:800; flex-shrink:0; font-size:1.6rem;
}
.simple-list__title{
  flex: 0 0 200px; font-family:'Sora',sans-serif; font-weight:700; color:#fff; font-size:1.6rem;
}
.simple-list__text{ color: var(--text-dim); font-size:1.4rem; }

@media (max-width: 700px){
  .simple-list li{ flex-direction:column; gap:.4rem; }
  .simple-list li::before{ display:none; }
  .simple-list__title{ flex-basis:auto; }
}

/* =====================================================
   СЕКЦИЯ 5 — ПЛЮСЫ И МИНУСЫ
   ===================================================== */
.proscons{ padding: 5rem 0; }
.proscons-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.proscons-card{ border-radius: var(--radius-md); padding: 2.6rem; border:1px solid var(--border); background: var(--bg-card); }
.proscons-card--pros{ border-color: rgba(61,220,132,.35); }
.proscons-card--cons{ border-color: rgba(255,84,112,.3); }
.proscons-card__title{ font-size:1.8rem; }
.proscons-card--pros .proscons-card__title{ color: var(--accent); }
.proscons-card--cons .proscons-card__title{ color: var(--danger); }
.proscons-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.1rem; }
.proscons-list li{ position:relative; padding-left: 2.4rem; color: var(--text-dim); font-size:1.4rem; }
.proscons-card--pros .proscons-list li::before{ content:'✓'; position:absolute; left:0; color: var(--accent); font-weight:800; }
.proscons-card--cons .proscons-list li::before{ content:'×'; position:absolute; left:0; color: var(--danger); font-weight:800; }

@media (max-width: 760px){ .proscons-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   СЕКЦИЯ 6 — СТЕППЕР (таймлайн пошаговой регистрации)
   ===================================================== */
.timeline{ padding: 5rem 0; background: var(--bg-elevated); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.timeline-list{ list-style:none; margin:0; padding:0; max-width: 760px; position:relative; }
.timeline-list::before{
  content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.timeline-step{ position:relative; display:flex; gap:2rem; padding-bottom: 3.2rem; }
.timeline-step:last-child{ padding-bottom:0; }
.timeline-step__num{
  position:relative; z-index:1; flex-shrink:0;
  width:40px; height:40px; border-radius:50%;
  background: var(--bg-card); border:2px solid var(--accent); color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.6rem;
}
.timeline-step__title{ font-size:1.7rem; margin-bottom:.6rem; }
.timeline-step__body p{ color: var(--text-dim); margin:0; font-size:1.4rem; }

/* =====================================================
   СЕКЦИЯ 7 — ARTICLE CONTENT (SEO-текст)
   ===================================================== */
.article{ padding: 5rem 0; }
.article__container{ max-width: 820px; }
.heading{ margin-top: 3.2rem; }
.article p{ color: var(--text-dim); }
.article ul.check-list{ color: var(--text-dim); padding-left: 2rem; }
.article ul.check-list li{ margin-bottom:.6rem; }

.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem;
  font-size:1.3rem; color: var(--text-dim); margin-bottom: 2rem;
  padding-bottom: 1.6rem; border-bottom:1px solid var(--border);
}
.meta-author{ display:inline-flex; align-items:center; gap:.6rem; color: var(--text); font-weight:600; }
.meta-author img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
.meta-factcheck{ color: var(--accent); font-weight:600; }

/* =====================================================
   СЕКЦИЯ 8 — FAQ (аккордеон)
   ===================================================== */
.faq{ padding: 5rem 0; background: var(--bg-elevated); border-top:1px solid var(--border); }
.faq-list{ display:flex; flex-direction:column; gap:1.2rem; max-width: 820px; margin: 0 auto; }
.faq-item{ background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; }
.faq-item__label{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem 2rem; cursor:pointer; font-weight:700; color:#fff; font-size:1.5rem;
}
.faq-item__label::after{ content:'+'; color: var(--accent); font-size:2rem; font-weight:400; }
.faq-item__body{ max-height:0; overflow:hidden; transition: max-height .25s ease; padding: 0 2rem; }
.faq-item__body p{ color: var(--text-dim); margin: 0 0 1.6rem; }
.faq-item__input:checked ~ .faq-item__label::after{ content:'–'; }
.faq-item__input:checked ~ .faq-item__body{ max-height: 400px; }

/* ---------------- FOOTER ---------------- */
.footer{ padding: 4rem 0 3rem; border-top:1px solid var(--border); }
.footer__warning{ font-weight:700; color:#fff; margin-bottom:1.6rem; }
.footer__badges{ display:flex; align-items:center; gap:1.6rem; margin-bottom:2rem; flex-wrap:wrap; }
.footer__badges img{ height:32px; width:auto; opacity:.8; }
.footer__desc{ color: var(--text-dim); font-size:1.3rem; max-width: 900px; }
.footer__links{ list-style:none; display:flex; gap:2rem; flex-wrap:wrap; padding:0; margin: 2rem 0 0; color: var(--text-dim); font-size:1.3rem; }
.footer__links a{ color: var(--text-dim); }
.footer__links a:hover{ color:#fff; }

/* ---------------- RESPONSIVE NAV ---------------- */
@media (max-width: 860px){
  .mainnav{
    position:absolute; top: 7.2rem; left:0; right:0;
    background: var(--bg-elevated); border-bottom:1px solid var(--border);
    flex-direction:column; padding: 1.6rem 2rem; gap: 1.6rem;
    display:none;
  }
  .mainnav.is-open{ display:flex; }
  .header__burger{ display:flex; }
}