/* ============================================================
   RagnaBet (ragna-bet.com) - site overrides
   Vollkorn headings, Ubuntu Sans text, Vollkorn Bold in the logo image.
   Green black ground, moss tiles, white type, the lime of Register,
   Log in, Join Now and the word Bet in the logo, and the gold of the
   JACKPOT throne art, all taken from the supplied RagnaBet screens.
   Centred column, 1120 px. Centred hero with three pool cards below.
   ============================================================ */
:root {
  --font-display: "Vollkorn", Georgia, "Times New Roman", serif;
  --font-body: "Ubuntu Sans", "Segoe UI", Arial, sans-serif;
  --rb-lime: #8fe25c;
  --rb-lime-2: #a9ee7f;
  --rb-lime-deep: #6cbf3c;
  --rb-gold: #e2b04a;
  --rb-ink: #0a0f0b;
  --rb-on-lime: #0b1a06;
  --rb-tile: #151d17;
  --rb-tile-2: #1d281f;
  --rb-line: #263329;
  --rb-text: #d5e0d3;
  --rb-faint: #98a997;
}

body {
  font-family: var(--font-body);
  font-size: 1.03rem;
  line-height: 1.74;
  color: var(--rb-text);
  background: var(--color-bg);
}
.container { max-width: 1120px; }

/* ---------- Header: pill nav ---------- */
.site-header.rb-header {
  background: rgba(10, 15, 11, 0.96);
  border-bottom: 1px solid var(--rb-line);
  backdrop-filter: blur(10px);
}
.site-header.rb-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 226, 92, 0.55), transparent);
}
.site-header .site-logo img { height: 36px; width: auto; }
.nav-main--desktop { gap: 4px; }
.nav-main--desktop a {
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em;
  padding: 0.42rem 0.9rem; border-radius: 999px; color: #e6efe4; background: transparent; border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.nav-main--desktop a:hover { color: var(--rb-lime-2); background: rgba(143, 226, 92, 0.1); border-color: rgba(143, 226, 92, 0.35); }
.btn { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.01em; border-radius: 999px; }
.btn--primary, main a.btn--primary, .rb-register {
  background: var(--rb-lime); color: var(--rb-on-lime) !important; border: 1px solid var(--rb-lime);
  box-shadow: 0 6px 20px rgba(143, 226, 92, 0.22);
}
.btn--primary:hover, main a.btn--primary:hover { background: var(--rb-lime-2); border-color: var(--rb-lime-2); color: var(--rb-on-lime) !important; }
.btn--outline { background: transparent; color: #eef5ec; border: 1px solid #3a4d3d; }
.btn--outline:hover { background: rgba(143, 226, 92, 0.1); color: #ffffff; border-color: var(--rb-lime); }

/* ---------- Language switcher ---------- */
.lang-switcher__toggle { border-radius: 999px; border-color: var(--rb-line); }
.rb-code {
  display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: transparent; border: 1px solid var(--rb-lime-deep);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--rb-lime);
}
.lang-switcher__toggle .lang-switcher__code { display: none; }
.lang-switcher__menu {
  width: 236px; max-width: 92vw; display: grid !important; grid-template-columns: 1fr; gap: 2px;
  padding: 8px; max-height: 70vh; overflow-y: auto;
  background: var(--rb-tile); border: 1px solid var(--rb-line); border-radius: 14px;
}
.lang-switcher:not(.is-open) .lang-switcher__menu { display: none !important; }
.lang-switcher__menu a { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 7px 10px; }
.lang-switcher__menu li[aria-selected="true"] a { background: rgba(143, 226, 92, 0.1); }
.lang-switcher__menu li[aria-selected="true"] .rb-code { background: var(--rb-lime); color: var(--rb-on-lime); border-color: var(--rb-lime); }
.nav-mobile__langs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.nav-mobile__lang { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; padding: 6px 8px; border-radius: 10px; }
.nav-mobile__lang.is-active { background: rgba(143, 226, 92, 0.1); }

/* ---------- Hero: centred copy, pool cards in a row ---------- */
.rb-hero {
  padding: 70px 0 34px; text-align: center; border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(10, 15, 11, 0.25) 0%, rgba(10, 15, 11, 0.7) 60%, #0a0f0b 100%),
    url("/assets/img/hero-bg.jpg") center top / cover no-repeat, var(--color-bg);
}
.rb-hero__stack { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.rb-hero .hero__content { max-width: 880px; margin: 0 auto; text-align: center; display: block; }
.rb-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rb-gold);
}
.rb-kicker::before, .rb-kicker::after { content: ""; width: 28px; height: 1px; background: var(--rb-gold); opacity: 0.7; }
.rb-hero h1 {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3.05rem); line-height: 1.12; color: #ffffff; letter-spacing: -0.005em;
}
.rb-lime { color: var(--rb-lime); }
.rb-hero__lead p { margin: 0 auto; max-width: 70ch; color: #cdd9cb; font-size: 1.07rem; }
.rb-hero__ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rb-pool { width: 100%; max-width: 960px; }
.rb-pool__title {
  margin: 0 0 12px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rb-faint); text-align: center;
}
.rb-pool__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rb-pool__card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px 16px;
  border-radius: 16px; background: rgba(21, 29, 23, 0.92); border: 1px solid var(--rb-line); text-align: center;
  border-top: 3px solid var(--rb-lime-deep);
}
.rb-pool__tag { font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #e6efe4; }
.rb-pool__value { font-family: var(--font-body); font-weight: 800; font-size: 1.85rem; line-height: 1.1; color: var(--rb-lime); white-space: nowrap; font-variant-numeric: lining-nums; }
.rb-pool__note { font-size: 0.88rem; line-height: 1.35; color: var(--rb-faint); }
.rb-pool__card--0 {
  border-top-color: var(--rb-gold);
  background: radial-gradient(120% 90% at 50% 0%, rgba(226, 176, 74, 0.16), rgba(21, 29, 23, 0.94) 70%);
}
.rb-pool__card--0 .rb-pool__value { color: #ffffff; }
.rb-pool__card--0 .rb-pool__tag { color: var(--rb-gold); }
@media (max-width: 820px) {
  .rb-hero { padding: 44px 0 26px; }
  .rb-pool__row { grid-template-columns: 1fr; gap: 10px; }
  .rb-pool__card { flex-direction: row; flex-wrap: wrap; justify-content: space-between; text-align: left; padding: 14px 16px; }
  .rb-pool__value { font-size: 1.45rem; order: 2; }
  .rb-pool__tag { order: 1; }
  .rb-pool__note { order: 3; width: 100%; }
}

/* ---------- Key figures: separate chips ---------- */
.rb-strip { padding: 16px 0 8px; }
.rb-strip__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.rb-fig { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 10px; border-radius: 12px; background: var(--rb-tile); border: 1px solid var(--rb-line); }
.rb-fig__v { font-family: var(--font-body); font-weight: 800; font-size: 1.24rem; line-height: 1.15; color: var(--rb-lime); white-space: nowrap; }
.rb-fig:nth-child(3n+2) .rb-fig__v { color: var(--rb-gold); }
.rb-fig__l { font-size: 0.82rem; line-height: 1.3; color: var(--rb-faint); }
@media (max-width: 1000px) { .rb-strip__row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .rb-strip__row { grid-template-columns: repeat(2, 1fr); gap: 8px; } .rb-fig__v { font-size: 1.1rem; } }

/* ---------- Sections ---------- */
.content-section { padding: 54px 0 34px; background: transparent; border: 0; }
.content-section--alt { background: #0e1510; border-top: 1px solid #1b251d; border-bottom: 1px solid #1b251d; }
.content-section > .container { max-width: 1120px; }
.content-section h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.18;
  color: #ffffff; margin: 0 0 22px; padding: 18px 0 0; border: 0; max-width: none; position: relative;
}
.content-section h2::after { display: none !important; }
.content-section h2::before {
  content: "" !important; display: block !important; position: absolute; left: 0; top: 0; width: 64px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--rb-lime) 0 70%, var(--rb-gold) 70% 100%);
}
.content-section h3 {
  position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.3;
  color: #f2f8f0; margin: 30px 0 10px; padding: 0 0 0 20px; border: 0; text-transform: none;
}
.content-section h3::before {
  content: ""; display: block; position: absolute; left: 0; top: 0.28em; width: 4px; height: 1.05em; border-radius: 2px;
  background: var(--rb-gold);
}
.content-section p { margin-bottom: 1rem; color: var(--rb-text); }
.content-section ul, .content-section ol { margin: 0 0 1.2rem 1.2rem; }
.content-section li { margin-bottom: 0.4rem; color: var(--rb-text); }
.content-section ul li::marker { color: var(--rb-lime); }
.content-section a:not(.btn) { color: var(--rb-lime-2); }
.content-section strong { color: #ffffff; }
@media (max-width: 900px) { .content-section { padding: 38px 0 22px; } }

/* ---------- Supplied artwork beside the text ---------- */
.content-section .section-illus--transparent {
  width: 330px; max-width: 330px; height: auto; background: transparent; box-shadow: none; border-radius: 0;
}
.content-section .section-illus--right { float: right; margin: -6px -8px 8px 26px; }
.content-section .section-illus--left { float: left; margin: -6px 26px 8px -8px; }
.rb-clear { clear: both; }
@media (max-width: 900px) {
  .content-section .section-illus--transparent,
  .content-section .section-illus--right,
  .content-section .section-illus--left { float: none; display: block; width: 280px; max-width: 80%; margin: 0 auto 12px; }
}

/* ---------- Tables: dark head row with lime rule ---------- */
.rb-table-wrap { clear: none; display: flow-root; margin: 22px 0 26px; border: 1px solid var(--rb-line); border-radius: 16px; overflow: hidden; background: var(--rb-tile); }
.rb-table-wrap .rb-table-title {
  margin: 0; padding: 13px 18px; max-width: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #ffffff;
  background: transparent; border-bottom: 1px solid var(--rb-line);
}
.rb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-section .rb-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0; border: 0; display: table; font-size: 0.96rem; }
.content-section .rb-table-wrap th, .content-section .rb-table-wrap td { padding: 10px 18px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--rb-line); white-space: normal; }
.content-section .rb-table-wrap thead th {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rb-lime); background: var(--rb-tile-2); border-bottom: 2px solid var(--rb-lime-deep);
}
.content-section .rb-table-wrap tbody tr:hover td { background: rgba(143, 226, 92, 0.04); }
.content-section .rb-table-wrap tbody tr:last-child td { border-bottom: 0; }
.content-section .rb-table-wrap td:first-child { color: #ffffff; font-weight: 600; }
.rb-table-note { font-size: 0.9rem; color: var(--rb-faint); padding: 11px 18px; margin: 0 !important; border-top: 1px solid var(--rb-line); background: rgba(226, 176, 74, 0.05); max-width: none !important; }
@media (max-width: 600px) {
  .content-section .rb-table-wrap table { min-width: 0; table-layout: fixed; font-size: 0.89rem; }
  .content-section .rb-table-wrap th, .content-section .rb-table-wrap td { padding: 9px 10px; overflow-wrap: break-word; hyphens: auto; }
  .content-section .rb-table-wrap th:first-child, .content-section .rb-table-wrap td:first-child { width: 38%; }
}

/* ---------- Numbered steps: lime circles on a rail ---------- */
.rb-steps { display: flow-root; counter-reset: rbstep; list-style: none; margin: 14px 0 22px !important; padding: 0; }
.rb-steps li { counter-increment: rbstep; position: relative; padding: 4px 0 6px 50px; margin-bottom: 8px; }
.rb-steps li::before {
  content: counter(rbstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-body); font-weight: 800; font-size: 0.98rem; color: var(--rb-on-lime); background: var(--rb-lime);
}
.rb-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: -8px; width: 2px; background: var(--rb-line); }

/* ---------- FAQ ---------- */
.rb-faq { clear: both; margin: 18px 0 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.rb-faq details { border: 1px solid var(--rb-line); border-radius: 14px; background: var(--rb-tile); }
.rb-faq details[open] { border-color: rgba(143, 226, 92, 0.45); }
.rb-faq summary { cursor: pointer; list-style: none; padding: 15px 50px 15px 18px; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: #ffffff; }
.rb-faq summary::-webkit-details-marker { display: none; }
.rb-faq summary::after {
  content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rb-lime-deep); font-family: var(--font-body); font-size: 1.05rem; line-height: 1; color: var(--rb-lime);
}
.rb-faq details[open] summary::after { content: "\2212"; background: var(--rb-lime); color: var(--rb-on-lime); }
.rb-faq details p { padding: 0 18px 16px; margin: 0; }
@media (max-width: 760px) { .rb-faq { grid-template-columns: 1fr; } }

/* ---------- Sign-up panel, footer, sticky bar ---------- */
.rb-join { padding: 48px 0 54px; }
.rb-join__panel {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 34px 36px; border-radius: 20px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(143, 226, 92, 0.16), rgba(21, 29, 23, 0.96) 70%), var(--rb-tile);
  border: 1px solid rgba(143, 226, 92, 0.35);
}
.rb-join__text h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 1.95rem); color: #ffffff; border: 0; padding: 0; }
.rb-join__text p { margin: 0 auto; max-width: 64ch; color: var(--rb-text); }
.rb-join .btn { flex-shrink: 0; }
@media (max-width: 760px) { .rb-join__panel { padding: 24px 20px; } }
.site-footer.rb-footer { background: #060906; border-top: 1px solid var(--rb-line); box-shadow: inset 0 3px 0 0 rgba(143, 226, 92, 0.6); }
.site-footer h5 { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rb-gold); }
.site-footer .site-logo img { height: 34px; width: auto; }
.footer-badge { border-color: var(--rb-line); border-radius: 999px; color: #e6efe4; }
.sticky-cta { border-top: 1px solid rgba(143, 226, 92, 0.35); background: rgba(10, 15, 11, 0.97); }
.sticky-cta__text span:first-child { font-family: var(--font-display); font-weight: 800; color: #ffffff; }
.sticky-cta__bonus { color: var(--rb-lime); font-weight: 600; }

/* ---------- Anchors, mobile header ---------- */
.content-section[id] { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .site-header .container { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .site-header .site-logo img { height: 27px; }
  .site-header .site-logo { flex-shrink: 0; margin-right: 6px; }
  .nav-toggle { flex-shrink: 0; margin-left: 6px; }
  .btn--mobile-cta { margin-left: auto; font-size: 0.8rem !important; padding: 0.5rem 0.85rem !important; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .sticky-cta__text span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.95rem; line-height: 1.3; }
  .sticky-cta .btn { white-space: nowrap; }
}
@media (max-width: 380px) { .btn--mobile-cta { font-size: 0.7rem !important; padding: 0.45rem 0.55rem !important; } }

.content-section p, .content-section li, .content-section ul, .content-section ol { max-width: none; }
.content-section h2 { clear: none; overflow: visible; }
.content-section h3 { clear: none; }
.content-section ul, .content-section ol.rb-steps { display: flow-root; padding-left: 1.2rem; margin-left: 0; }
.content-section ol.rb-steps { padding-left: 0; }
.content-section .rb-clear + h2 { margin-top: 54px; }
.hero h1, .content-section h2, .content-section h3, .rb-join h2, .rb-table-wrap .rb-table-title { text-transform: none; }