/* ==========================================================
   BETTING REVIEW TEMPLATE #2 — light "sportsbook" theme
   Fonts: Poppins (headings), Nunito Sans (body)
   Deliberately distinct from template.css (dark/neon):
   light background, lime CTA + red accent, soft shadows,
   fully rounded cards, circular logos — classic betting-site look.
   ========================================================== */

:root{
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-dark: #14161a;
  --ink: #1c1e22;
  --ink-soft: #6b7078;
  --line: #e7e8ea;
  --lime: #d7fb3f;
  --lime-dark: #c2e82c;
  --red: #e5123a;
  --gold: #f5b400;
  --shadow: 0 12px 32px rgba(20,22,26,.08);
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --maxw: 1180px;
  font-size: 62.5%;
}

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

h1,h2,h3,h4{ font-family:'Poppins', sans-serif; font-weight:700; color: var(--ink); line-height:1.2; margin:0 0 1.2rem; }

.btn2{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px; font-weight:700; font-size:1.4rem;
  padding: 1.1rem 2.2rem; cursor:pointer; border: none; transition: all .2s ease;
}
.btn2--cta{ background: var(--lime); color: var(--ink); }
.btn2--cta:hover{ background: var(--lime-dark); }
.btn2--outline{ background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn2--outline:hover{ background: var(--ink); color:#fff; }
.btn2--lg{ padding: 1.4rem 2.8rem; font-size:1.5rem; }
.btn2--full{ width:100%; }

/* ---------------- HEADER ---------------- */
.header2{ background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top:0; z-index:50; }
.header2__inner{ display:flex; align-items:center; gap: 2.4rem; height: 8rem; }
.logo2{ display:flex; align-items:center; gap:1rem; text-decoration:none; }
.logo2__img{ width:40px; height:40px; border-radius:50%; }
.logo2__text{ font-family:'Poppins',sans-serif; font-weight:800; font-size:2.1rem; color: var(--ink); }
.logo2__text span{ color: var(--red); }

.mainnav2{ display:flex; gap:2.4rem; margin-right:auto; margin-left: 2rem; }
.mainnav2 a{ color: var(--ink); font-weight:700; font-size:1.4rem; text-decoration:none; }
.mainnav2 a:hover{ color: var(--red); }

.header2__cta{ flex-shrink:0; }
.header2__burger{ display:none; flex-direction:column; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; margin-left: 1rem; }
.header2__burger span{ height:3px; border-radius:2px; background: var(--ink); }

/* ---------------- HERO ---------------- */
.hero2{ padding: 6rem 0 5rem; background: radial-gradient(circle at 90% 10%, rgba(215,251,63,.35), transparent 45%); }
.hero2__pill{ display:inline-flex; align-items:center; gap:.6rem; background: var(--surface-dark); color: var(--lime); border-radius: 999px; padding: .8rem 1.6rem; font-weight:700; font-size:1.3rem; margin-bottom: 2.2rem; }
.hero2__title{ font-size: clamp(3rem, 4.6vw, 5rem); max-width: 880px; }
.hero2__lead{ color: var(--ink-soft); font-size:1.8rem; max-width: 720px; margin: 1.6rem 0 2.8rem; }
.hero2__cta-row{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-bottom: 3.6rem; }
.hero2__stats{ display:flex; gap: 3.6rem; flex-wrap:wrap; }
.hero2__stat{ display:flex; flex-direction:column-reverse; color: var(--ink-soft); font-size:1.3rem; font-weight:600; }
.hero2__stat span{ font-family:'Poppins',sans-serif; font-weight:800; font-size:3rem; color: var(--ink); }

/* ---------------- SECTION HEADS ---------------- */
.head2{ font-size: clamp(2.4rem, 3.2vw, 3.2rem); }
.sub2{ color: var(--ink-soft); max-width: 720px; margin-bottom: 3.4rem; font-size:1.6rem; }

/* =====================================================
   SECTION 1 — TOP RANKING (podium-style rounded cards)
   ===================================================== */
.ranking2{ padding: 5.5rem 0; }
.ranking2-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; align-items:start; }

.pick-card{
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 2.8rem 2.4rem; text-align:center; box-shadow: var(--shadow);
  border: 1px solid var(--line); position:relative;
}
.pick-card--gold{ border: 2px solid var(--lime); transform: translateY(-12px); box-shadow: 0 20px 40px rgba(215,251,63,.25); }

.pick-card__badge{
  display:inline-block; margin-bottom:1.6rem; padding:.5rem 1.4rem; border-radius:999px;
  background: var(--surface-dark); color: var(--lime); font-weight:800; font-size:1.2rem; text-transform:uppercase; letter-spacing:.03em;
}
.pick-card__badge--silver{ background:#c9ccd1; color: var(--ink); }
.pick-card__badge--bronze{ background:#dba368; color:#fff; }

.pick-card__logo{ width:88px; height:88px; border-radius:50%; background: var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin: 0 auto 1.6rem; overflow:hidden; }
.pick-card__logo img{ max-width:70%; max-height:70%; }
.pick-card__name{ font-size:2rem; margin-bottom:.6rem; }
.pick-card__stars{ color: var(--gold); letter-spacing:.2rem; margin-bottom:1.6rem; font-size:1.6rem; }

.pick-card__bonus{ background: var(--bg); border-radius: var(--radius-sm); padding: 1.4rem; margin-bottom:1.6rem; }
.pick-card__bonus-label{ display:block; font-size:1.1rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.pick-card__bonus-value{ display:block; font-weight:800; font-size:1.7rem; color: var(--red); }

.pick-card__facts{ list-style:none; padding:0; margin: 0 0 2rem; text-align:left; font-size:1.35rem; color: var(--ink-soft); display:flex; flex-direction:column; gap:.6rem; }
.pick-card__facts strong{ color: var(--ink); }

.pick-card__review{ display:block; margin-top:1.2rem; font-size:1.3rem; font-weight:700; color: var(--ink-soft); text-decoration:underline; }

@media (max-width: 980px){
  .ranking2-grid{ grid-template-columns: 1fr; }
  .pick-card--gold{ transform:none; }
}

/* =====================================================
   SECTION 2 — PLAIN STANDARD TABLE (dark inverse block)
   ===================================================== */
.datasheet2{ background: var(--surface-dark); padding: 5.5rem 0; }
.datasheet2 .head2, .datasheet2 .sub2{ color:#fff; }
.datasheet2 .sub2{ color:#a7ab9e; }
.datasheet2-wrap{ overflow-x:auto; border-radius: var(--radius-md); background:#1d2025; }
.datasheet2-table{ width:100%; border-collapse:collapse; min-width: 680px; }
.datasheet2-table th, .datasheet2-table td{ padding: 1.6rem 2rem; text-align:left; font-size:1.4rem; border-bottom: 1px solid #2b2f36; }
.datasheet2-table thead th{ color: var(--lime); font-weight:800; text-transform:uppercase; font-size:1.2rem; }
.datasheet2-table tbody td{ color:#cfd2c9; }
.datasheet2-table tbody tr:last-child td{ border-bottom:none; }
.datasheet2-note{ margin-top:1.6rem; font-size:1.3rem; color:#8b8f83; }

/* =====================================================
   SECTION 3 — TRUST CHECKLIST (icon-badge tile grid)
   ===================================================== */
.checklist2{ padding: 5.5rem 0; }
.checklist2-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.check-tile{ background: var(--surface); border-radius: var(--radius-md); padding: 2.6rem; box-shadow: var(--shadow); border: 1px solid var(--line); }
.check-tile__icon{ font-size:2.8rem; margin-bottom: 1.2rem; }
.check-tile__title{ font-size:1.8rem; margin-bottom:.8rem; }
.check-tile__text{ color: var(--ink-soft); font-size:1.4rem; margin:0; }

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

/* =====================================================
   SECTION 4 — SPORTS MARKETS (pill row)
   ===================================================== */
.markets2{ padding: 1rem 0 5.5rem; }
.markets2-row{ display:flex; flex-wrap:wrap; gap: 1.2rem; }
.market-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 1.1rem 2rem; font-weight:700; font-size:1.4rem;
  box-shadow: var(--shadow);
}

/* =====================================================
   SECTION 5 — PROS & CONS
   ===================================================== */
.verdict2{ padding: 5.5rem 0; background: var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.verdict2-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.verdict2-card{ border-radius: var(--radius-md); padding: 2.8rem; }
.verdict2-card--pros{ background: rgba(42,176,60,.08); }
.verdict2-card--cons{ background: rgba(229,18,58,.06); }
.verdict2-card__title{ font-size:1.9rem; }
.verdict2-card__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1.2rem; }
.verdict2-card__list li{ color: var(--ink-soft); font-size:1.45rem; padding-left: 0; }

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

/* =====================================================
   SECTION 6 — ONBOARDING STEPPER (circular numbered)
   ===================================================== */
.onboarding2{ padding: 5.5rem 0; }
.stepper2{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; position:relative; }
.stepper2::before{
  content:''; position:absolute; top:24px; left: 10%; right:10%; height:2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px);
  z-index:0;
}
.stepper2-step{ position:relative; z-index:1; text-align:center; }
.stepper2-step__circle{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; margin: 0 auto 1.4rem;
  background: var(--lime); color: var(--ink); font-family:'Poppins',sans-serif; font-weight:800; font-size:1.7rem;
}
.stepper2-step__title{ font-size:1.6rem; margin-bottom:.6rem; }
.stepper2-step__text{ color: var(--ink-soft); font-size:1.3rem; margin:0; }

@media (max-width: 980px){
  .stepper2{ grid-template-columns: 1fr; gap: 2.8rem; }
  .stepper2::before{ display:none; }
}

/* =====================================================
   SECTION 7 — ARTICLE CONTENT
   ===================================================== */
.article2{ padding: 5.5rem 0; }
.article2__container{ max-width: 800px; }
.h2-2{ margin-top: 3.2rem; }
.article2 p{ color: var(--ink-soft); font-size:1.6rem; }
.check-list2{ color: var(--ink-soft); padding-left: 2.2rem; font-size:1.6rem; }
.check-list2 li{ margin-bottom:.7rem; }

.article2-meta{
  display:flex; align-items:center; gap: 1.2rem;
  font-size:1.35rem; color: var(--ink-soft); margin-bottom: 2.4rem;
  padding-bottom: 1.8rem; border-bottom:1px solid var(--line);
}
.article2-meta__avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.article2-meta strong{ color: var(--ink); }

/* =====================================================
   SECTION 8 — FAQ (lime-accent accordion)
   ===================================================== */
.faq2{ padding: 5.5rem 0; background: var(--surface); border-top: 1px solid var(--line); }
.faq2-list{ display:flex; flex-direction:column; gap:1.2rem; max-width: 800px; margin: 0 auto; }
.faq2-item{ background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; }
.faq2-item__label{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.8rem 2.2rem; cursor:pointer; font-weight:700; color: var(--ink); font-size:1.5rem;
}
.faq2-item__label::after{ content:'+'; color: var(--red); font-size:2.2rem; font-weight:400; flex-shrink:0; margin-left:1rem; }
.faq2-item__body{ max-height:0; overflow:hidden; transition: max-height .25s ease; padding: 0 2.2rem; }
.faq2-item__body p{ color: var(--ink-soft); margin: 0 0 1.8rem; }
.faq2-item__input:checked ~ .faq2-item__label{ color: var(--red); }
.faq2-item__input:checked ~ .faq2-item__label::after{ content:'–'; }
.faq2-item__input:checked ~ .faq2-item__body{ max-height: 400px; }

/* ---------------- FOOTER ---------------- */
.footer2{ background: var(--surface-dark); color:#a7ab9e; padding: 4.5rem 0 3rem; }
.footer2__warning{ font-weight:700; color: var(--lime); margin-bottom:1.6rem; }
.footer2__badges{ display:flex; align-items:center; gap:1.6rem; margin-bottom:2rem; flex-wrap:wrap; }
.footer2__badges img{ height:32px; width:auto; opacity:.85; }
.footer2__desc{ color:#8b8f83; font-size:1.3rem; max-width: 900px; }
.footer2__links{ list-style:none; display:flex; gap:2rem; flex-wrap:wrap; padding:0; margin: 2.4rem 0 0; color:#8b8f83; font-size:1.3rem; border-top: 1px solid #2b2f36; padding-top: 2rem; }
.footer2__links a{ color:#cfd2c9; }
.footer2__links a:hover{ color:#fff; text-decoration:underline; }

/* ---------------- RESPONSIVE NAV ---------------- */
@media (max-width: 900px){
  .mainnav2{
    position:absolute; top: 8rem; left:0; right:0; z-index:40;
    background: var(--surface); border-bottom:1px solid var(--line);
    flex-direction:column; padding: 2rem; gap: 1.8rem;
    display:none; margin:0;
  }
  .mainnav2.is-open{ display:flex; }
  .header2__burger{ display:flex; }
  .header2__cta{ display:none; }
}