/* ==========================================================
   BETTING REVIEW TEMPLATE #3 — "casino floor" theme
   Font: Plus Jakarta Sans
   Distinct from template.css (dark neon) and template2.css
   (light lime): warm cream body, dark noise-textured hero with
   gold glow orb, medal-ranked cards with left accent stripe,
   star ratings, rose-red CTA — classic casino-review visual code.
   ========================================================== */

:root{
  --gold: #c9a84c;
  --gold-d: #a8852e;
  --gold-l: #fdf6e3;
  --rose: #e8385c;
  --rose-d: #c42040;
  --ink: #1a1208;
  --ink2: #4a3f2f;
  --muted: #9e8e76;
  --bg: #fffdf7;
  --bg2: #f7f3ea;
  --white: #ffffff;
  --brd: #e8e0d0;
  --brd2: #d4c9b0;
  --green: #16a34a;
  --red: #dc2626;
  --r: 10px;
  --r2: 16px;
  --sh: 0 1px 8px rgba(26,18,8,.06), 0 4px 20px rgba(26,18,8,.04);
  --sh2: 0 4px 16px rgba(26,18,8,.10), 0 12px 40px rgba(26,18,8,.08);
  --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: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.65;
}
img{ max-width:100%; display:block; }
a{ color: var(--rose); text-decoration:none; }
.container{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 2rem; position:relative; z-index:1; }
.visually-hidden3{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

h1,h2,h3,h4{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; color: var(--ink); line-height:1.2; margin:0 0 1.2rem; letter-spacing:-.02em; }

/* ---------------- HEADER ---------------- */
.header3{ background: var(--white); border-bottom: 3px solid var(--gold); position: sticky; top:0; z-index:50; }
.header3__inner{ display:flex; align-items:center; gap: 2.4rem; height: 7.6rem; }
.logo3{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.logo3__icon{ font-size:2.2rem; color: var(--gold); filter: drop-shadow(0 0 6px rgba(201,168,76,.4)); }
.logo3__text{ font-size:2.1rem; font-weight:700; color: var(--ink); }
.logo3__text strong{ color: var(--gold-d); font-weight:800; }
.logo3__text--light{ color: rgba(255,255,255,.85); }
.logo3__text--light strong{ color: var(--gold); }

.mainnav3{ display:flex; gap: 1rem; margin-left: 1rem; margin-right:auto; }
.mainnav3 a{ padding: .8rem 1rem; border-radius: var(--r); color: var(--ink2); font-weight:400; font-size:1.3rem; text-decoration:none; }
.mainnav3 a:hover{ background: var(--gold-l); color: var(--gold-d); }

.header3__burger{ display:none; flex-direction:column; gap:5px; width:38px; height:38px; align-items:center; justify-content:center; background: var(--bg2); border:1.5px solid var(--brd); border-radius: var(--r); cursor:pointer; }
.header3__burger span{ width:18px; height:2px; background: var(--ink); border-radius:2px; }

/* ---------------- HERO (dark, noise + glow) ---------------- */
.hero3{ background: var(--ink); position:relative; overflow:hidden; padding: 7rem 0 5.5rem; }
.hero3__noise{
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(201,168,76,.04) 0px, rgba(201,168,76,.04) 1px, transparent 1px, transparent 12px);
  pointer-events:none;
}
.hero3__glow{
  position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,168,76,.18) 0, transparent 70%);
  top:-150px; right:-100px; pointer-events:none;
}
.hero3__inner{ position:relative; z-index:1; text-align:center; }
.hero3__label{
  display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1.6rem;
  background: rgba(201,168,76,.12); border:1px solid rgba(201,168,76,.3); border-radius: 999px;
  font-size:1.3rem; font-weight:700; color: var(--gold); letter-spacing:.06em; text-transform:uppercase;
  margin-bottom: 2.8rem;
}
.hero3__title{ font-size: clamp(3rem, 4.6vw, 5.2rem); color:#fff; max-width: 900px; margin: 0 auto 1.8rem; }
.hero3__title span{ background: linear-gradient(90deg, var(--gold), #f0d080); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero3__desc{ font-size:1.8rem; color: rgba(255,255,255,.55); max-width: 720px; margin: 0 auto 3.4rem; }

.hero3__kpis{ display:inline-flex; align-items:center; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius: var(--r2); margin-bottom: 3.4rem; overflow:hidden; }
.hero3__kpi{ padding: 1.4rem 3rem; text-align:center; }
.hero3__kpi b{ display:block; font-size:2.8rem; font-weight:800; color: var(--gold); line-height:1; }
.hero3__kpi span{ font-size:1.2rem; color: rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.hero3__kpi-sep{ width:1px; height:4rem; background: rgba(255,255,255,.1); }

.hero3__cats{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; list-style:none; padding:0; margin:0; }
.hc3{ display:inline-flex; align-items:center; gap:.6rem; padding:1rem 2rem; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius: var(--r); color: rgba(255,255,255,.75); text-decoration:none; font-size:1.5rem; font-weight:600; transition: all .2s; }
.hc3:hover{ background: rgba(201,168,76,.18); border-color: rgba(201,168,76,.5); color: var(--gold); }

/* ---------------- SECTION HEADS ---------------- */
.sec-head3{ display:flex; align-items:baseline; gap:1.2rem; margin-bottom: 1.2rem; flex-wrap:wrap; }
.sec-head3 h2{ font-size: clamp(2.2rem, 3vw, 3rem); margin:0; }
.sec-badge3{ padding:.3rem 1rem; background: #fde8ec; color: var(--rose-d); font-size:1.1rem; font-weight:700; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; border:1px solid rgba(232,56,92,.2); }
.sub3{ color: var(--ink2); max-width: 720px; margin-bottom: 3.2rem; font-size:1.6rem; opacity:.75; }

/* =====================================================
   SECTION 1 — RANKINGS (medal cards, left accent stripe)
   ===================================================== */
.rankings3{ padding: 5.5rem 0; }
.clist3{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 1.4rem; }

.card3{
  display:flex; align-items:center; gap: 1.8rem; flex-wrap:wrap;
  padding: 1.8rem 2rem 1.8rem 2.6rem; background: var(--white);
  border:1px solid var(--brd); border-radius: var(--r2); box-shadow: var(--sh);
  position:relative; overflow:hidden; transition: box-shadow .2s, transform .15s;
}
.card3:hover{ box-shadow: var(--sh2); transform: translateY(-2px); }
.card3::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:.5rem; background: var(--brd2); }
.card3--top::before{ background: linear-gradient(180deg, var(--gold), #f0d080); }
.card3:nth-of-type(2)::before{ background:#b0b8c8; }
.card3:nth-of-type(3)::before{ background:#c99060; }

.card3__medal{ font-size:2.4rem; line-height:1; flex-shrink:0; min-width:3.4rem; text-align:center; }
.card3__medal--num{ font-size:2rem; font-weight:800; color: var(--brd2); }
.card3__logo{ width:72px; height:52px; flex-shrink:0; background: var(--bg2); border:1px solid var(--brd); border-radius: var(--r); display:flex; align-items:center; justify-content:center; padding:.5rem; }
.card3__logo img{ max-width:100%; max-height:100%; object-fit:contain; }

.card3__body{ flex:1 1 260px; min-width:0; }
.card3__title-row{ display:flex; align-items:center; gap:1.2rem; margin-bottom:.6rem; flex-wrap:wrap; }
.card3__name{ font-size:1.9rem; font-weight:800; color: var(--ink); }
.card3__stars{ display:flex; align-items:center; gap:.2rem; color: var(--gold); font-size:1.4rem; }
.card3__stars span{ font-size:1.3rem; font-weight:700; color: var(--muted); margin-left:.4rem; }
.card3__tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag3{ padding:.25rem .9rem; font-size:1.2rem; font-weight:700; border-radius:.4rem; white-space:nowrap; }
.tag3--green{ background:#f0fdf4; color:#15803d; }
.tag3--blue{ background:#eff6ff; color:#1d4ed8; }
.tag3--purple{ background:#faf5ff; color:#7e22ce; }

.card3__offer{ flex-shrink:0; min-width: 12rem; text-align:center; padding: 1.2rem; background: var(--gold-l); border:1px solid rgba(201,168,76,.25); border-radius: var(--r); }
.card3__amount{ display:block; font-size:2rem; font-weight:800; color: var(--gold-d); line-height:1; }
.card3__type{ display:block; font-size:1.1rem; color: var(--muted); margin-top:.3rem; text-transform:uppercase; letter-spacing:.05em; }

.card3__cta{ display:flex; flex-direction:column; align-items:center; gap:.8rem; flex-shrink:0; }
.btn3-cta{ display:inline-flex; align-items:center; justify-content:center; min-width:13rem; padding:1.2rem 2rem; background: var(--rose); color:#fff; font-size:1.5rem; font-weight:800; border-radius: var(--r); box-shadow: 0 3px 12px rgba(232,56,92,.3); transition: background .15s, transform .15s; }
.btn3-cta:hover{ background: var(--rose-d); transform: translateY(-1px); }
.card3__link{ font-size:1.3rem; font-weight:600; color: var(--muted); text-decoration:none; }
.card3__link:hover{ color: var(--rose); }

@media (max-width: 760px){
  .card3{ flex-direction:column; align-items:flex-start; text-align:left; }
  .card3__cta{ flex-direction:row; width:100%; justify-content:space-between; }
}

/* =====================================================
   SECTION 2 — PLAIN STANDARD TABLE (dark header row)
   ===================================================== */
.datasheet3{ padding: 5.5rem 0; background: var(--bg2); border-top:1px solid var(--brd); border-bottom:1px solid var(--brd); }
.datasheet3-wrap{ overflow-x:auto; border-radius: var(--r2); border:1px solid var(--brd); box-shadow: var(--sh); }
.datasheet3-table{ width:100%; border-collapse:collapse; min-width: 680px; background: var(--white); }
.datasheet3-table th, .datasheet3-table td{ padding: 1.5rem 1.6rem; text-align:center; font-size:1.4rem; }
.datasheet3-table thead{ background: var(--ink); }
.datasheet3-table thead th{ color: rgba(255,255,255,.65); font-weight:700; text-transform:uppercase; font-size:1.2rem; letter-spacing:.05em; }
.datasheet3-table thead th:first-child{ border-left: .4rem solid var(--gold); }
.datasheet3-table tbody tr:nth-child(odd){ background: var(--bg); }
.datasheet3-table tbody tr:not(:last-child){ border-bottom:1px solid var(--brd); }
.datasheet3-table td{ color: var(--ink); }
.datasheet3-note{ margin-top:1.6rem; font-size:1.3rem; color: var(--muted); }

/* =====================================================
   SECTION 3 — CHECKLIST (numbered gold-badge grid)
   ===================================================== */
.checklist3{ padding: 5.5rem 0; }
.checkgrid3{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.checkgrid3 li{ padding: 2.2rem 2.2rem 2.2rem 6rem; background: var(--white); border:1px solid var(--brd); border-radius: var(--r2); box-shadow: var(--sh); position:relative; }
.checkgrid3__num{
  position:absolute; top:2.2rem; left:1.8rem; width:2.8rem; height:2.8rem; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), #f0d080); color:#fff; font-weight:800; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(201,168,76,.3);
}
.checkgrid3 h3{ font-size:1.7rem; margin-bottom:.5rem; }
.checkgrid3 p{ color: var(--ink2); font-size:1.4rem; margin:0; }

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

/* =====================================================
   SECTION 4 — SPORTS MARKETS (pill row)
   ===================================================== */
.markets3{ padding: 1rem 0 5.5rem; }
.markets3-row{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap: 1.2rem; }
.market3-pill{ background: var(--white); border:1px solid var(--brd); border-radius:999px; padding: 1.1rem 2rem; font-weight:700; font-size:1.4rem; box-shadow: var(--sh); }

/* =====================================================
   SECTION 5 — PROS & CONS
   ===================================================== */
.verdict3{ padding: 5.5rem 0; background: var(--bg2); border-top:1px solid var(--brd); border-bottom:1px solid var(--brd); }
.proscons3{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.proscons3__item{ padding: 2.6rem; border-radius: var(--r2); border:1px solid; position:relative; overflow:hidden; background: var(--white); }
.proscons3__item::before{ content:''; position:absolute; top:0; left:0; right:0; height:.4rem; }
.proscons3__item--pros{ border-color:#86efac; }
.proscons3__item--pros::before{ background: linear-gradient(90deg, var(--green), transparent); }
.proscons3__item--cons{ border-color:#fca5a5; }
.proscons3__item--cons::before{ background: linear-gradient(90deg, var(--red), transparent); }
.proscons3__item h3{ font-size:1.9rem; margin-bottom:1.4rem; }
.proscons3__item--pros h3{ color:#15803d; }
.proscons3__item--cons h3{ color:#b91c1c; }
.proscons3__item ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.proscons3__item li{ position:relative; padding-left: 2.2rem; color: var(--ink2); font-size:1.45rem; }
.proscons3__item--pros li::before{ content:'✓'; position:absolute; left:0; color: var(--green); font-weight:800; }
.proscons3__item--cons li::before{ content:'✕'; position:absolute; left:0; color: var(--red); font-weight:800; }

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

/* =====================================================
   SECTION 6 — ONBOARDING (numbered vertical stepper, gold connector)
   ===================================================== */
.onboarding3{ padding: 5.5rem 0; }
.stepper3{ list-style:none; counter-reset: sc; margin:0; padding:0; max-width: 760px; position:relative; }
.stepper3::before{ content:''; position:absolute; left: 2.8rem; top:2rem; bottom:2rem; width:2px; background: linear-gradient(180deg, var(--gold), transparent); }
.stepper3 li{ counter-increment: sc; position:relative; padding: 2rem 2.4rem 2rem 7rem; background: var(--white); border:1px solid var(--brd); border-radius: var(--r2); margin-bottom: .8rem; box-shadow: var(--sh); }
.stepper3 li::before{
  content: counter(sc); position:absolute; top:50%; left:1.6rem; transform: translateY(-50%);
  width:3.2rem; height:3.2rem; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--gold), #f0d080); color:#fff; font-size:1.5rem; font-weight:800;
  border-radius:50%; box-shadow: 0 2px 8px rgba(201,168,76,.35); z-index:1;
}
.stepper3 li:last-child::before{ background: var(--rose); box-shadow: 0 2px 8px rgba(232,56,92,.3); }
.stepper3 h3{ font-size:1.8rem; margin-bottom:.5rem; }
.stepper3 p{ font-size:1.45rem; color: var(--ink2); margin:0; }

/* =====================================================
   SECTION 7 — ARTICLE CONTENT
   ===================================================== */
.article3{ padding: 5.5rem 0; }
.article3__container{ max-width: 780px; }
.heading3{ margin-top: 3.2rem; }
.heading3::after{ content:''; display:block; width:4rem; height:.35rem; background: linear-gradient(90deg, var(--gold), transparent); border-radius:999px; margin-top:.6rem; }
.article3 p{ color: var(--ink2); font-size:1.6rem; }
.check-list3{ color: var(--ink2); padding-left: 2.2rem; font-size:1.6rem; }
.check-list3 li{ margin-bottom:.7rem; }

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

/* =====================================================
   SECTION 8 — FAQ (gold-accent accordion)
   ===================================================== */
.faq3{ padding: 5.5rem 0; background: var(--bg2); border-top:1px solid var(--brd); }
.faq3-list{ display:flex; flex-direction:column; gap:.8rem; max-width: 800px; margin: 0 auto; }
.faq3-item{ background: var(--white); border:1px solid var(--brd); border-radius: var(--r2); overflow:hidden; box-shadow: var(--sh); }
.faq3-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; }
.faq3-item__label::after{ content:'+'; flex-shrink:0; margin-left:1rem; width:2.8rem; height:2.8rem; background: var(--gold-l); color: var(--gold-d); border:1px solid rgba(201,168,76,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; }
.faq3-item__body{ max-height:0; overflow:hidden; transition: max-height .25s ease; padding: 0 2.2rem; }
.faq3-item__body p{ color: var(--ink2); margin: 0 0 1.8rem; }
.faq3-item__input:checked ~ .faq3-item__label{ color: var(--gold-d); }
.faq3-item__input:checked ~ .faq3-item__label::after{ content:'–'; background: var(--gold); color:#fff; border-color: var(--gold); }
.faq3-item__input:checked ~ .faq3-item__body{ max-height: 400px; }

/* ---------------- FOOTER ---------------- */
.footer3{ background: #120d04; color: rgba(255,255,255,.55); padding: 4.5rem 0 3rem; border-top: 3px solid var(--gold); }
.footer3-top{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.6rem; margin-bottom: 2rem; }
.footer3-brand{ display:flex; align-items:center; gap:.8rem; }
.footer3__warning{ font-weight:700; color: var(--gold); margin:0; }
.footer3__badges{ display:flex; align-items:center; gap:1.6rem; margin-bottom:2rem; flex-wrap:wrap; }
.footer3__badges img{ height:32px; width:auto; border-radius:4px; }
.footer3__desc{ color: rgba(255,255,255,.3); font-size:1.3rem; max-width: 900px; }
.footer3__links{ list-style:none; display:flex; gap:2rem; flex-wrap:wrap; padding:0; margin: 2.4rem 0 0; color: rgba(255,255,255,.3); font-size:1.3rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 2rem; }
.footer3__links a{ color: rgba(255,255,255,.55); }
.footer3__links a:hover{ color: var(--gold); }

/* ---------------- RESPONSIVE NAV ---------------- */
@media (max-width: 900px){
  .mainnav3{
    position:absolute; top: 7.6rem; left:0; right:0; z-index:40;
    background: var(--white); border-bottom:2px solid var(--brd); border-top:2px solid var(--gold);
    flex-direction:column; padding: 1.6rem 2rem; gap: .6rem;
    display:none; box-shadow: var(--sh2);
  }
  .mainnav3.is-open{ display:flex; }
  .header3__burger{ display:flex; }
}



/* Compact information box */
.info3-small{
  position:relative;
  overflow:hidden;
  margin:2.4rem 0;
  padding:1.6rem 1.8rem 1.6rem 2.2rem;
  background:var(--gold-l);
  border:1px solid rgba(201,168,76,.35);
  border-radius:var(--r);
  box-shadow:var(--sh);
}

.info3-small::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:.4rem;
  background:linear-gradient(180deg, var(--gold), var(--gold-d));
}

.info3-small h3{
  margin:0 0 .5rem;
  color:var(--gold-d);
  font-size:1.65rem;
  line-height:1.25;
}

.info3-small p{
  margin:0;
  color:var(--ink2);
  font-size:1.45rem;
  line-height:1.65;
}

/* Mobile */
@media (max-width:600px){
  .info3-small{
    margin:2rem 0;
    padding:1.4rem 1.5rem 1.4rem 1.9rem;
  }

  .info3-small h3{
    font-size:1.55rem;
  }

  .info3-small p{
    font-size:1.4rem;
    line-height:1.6;
  }
}