:root {
  --bs-border-opacity: 1;
  --bs-bg-opacity: 1;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

img,
svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}


.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar > .container,
.navbar > .container-fluid {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-link {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  display: block;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.navbar-toggler {
  padding: 0.375rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--bp-radius);
}

.badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--bp-white);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 999px;
}

.alert {
  position: relative;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: var(--bp-radius);
}

.form-control,
.form-select {
  display: block;
  width: 100%;
  min-width: 0;
}

.container,
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.row {
  --bp-grid-gap-x: 1.5rem;
  --bp-grid-gap-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bp-grid-gap-y));
  margin-left: calc(-0.5 * var(--bp-grid-gap-x));
  margin-right: calc(-0.5 * var(--bp-grid-gap-x));
}

.row > * {
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--bp-grid-gap-x) * 0.5);
  padding-right: calc(var(--bp-grid-gap-x) * 0.5);
  margin-top: var(--bp-grid-gap-y);
}

.col {
  flex: 1 0 0%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.333333%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.g-0 {
  --bp-grid-gap-x: 0;
  --bp-grid-gap-y: 0;
}

.g-3 {
  --bp-grid-gap-x: 1rem;
  --bp-grid-gap-y: 1rem;
}

.g-4 {
  --bp-grid-gap-x: 1.5rem;
  --bp-grid-gap-y: 1.5rem;
}

.g-5 {
  --bp-grid-gap-x: 3rem;
  --bp-grid-gap-y: 3rem;
}

@media (min-width: 768px) {
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
}

@media (min-width: 992px) {
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.333333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.666667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.333333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.666667%;
  }

  .g-lg-5 {
    --bp-grid-gap-x: 3rem;
    --bp-grid-gap-y: 3rem;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse;
  }
}


.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-block { display: inline-block; }
.d-inline-flex { display: inline-flex; }
.d-none { display: none; }


.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-fill { flex: 1 1 auto; }
.flex-shrink-0 { flex-shrink: 0; }


.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-self-start { align-self: flex-start; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }


.h-100 { height: 100%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.sticky-top { position: sticky; top: 0; z-index: 10; }


.h4 { font-size: var(--fs-h3); }
.h5 { font-size: 1.125rem; }
.small { font-size: 0.875em; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-decoration-none { text-decoration: none; }
.text-uppercase { text-transform: uppercase; }
.text-break { word-break: break-word; overflow-wrap: anywhere; }


.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-black { font-weight: var(--fw-black); }
.fs-5 { font-size: 1.25rem; }


.opacity-75 { opacity: 0.75; }
.opacity-10 { opacity: 0.1; }


.rounded { border-radius: var(--bp-radius); }
.rounded-circle { border-radius: 50%; }


.border {
  border: 1px solid var(--bs-border-color, var(--bp-border));
}

.border-top {
  border-top: 1px solid var(--bs-border-color, var(--bp-border));
}

.border-bottom {
  border-bottom: 1px solid var(--bs-border-color, var(--bp-border));
}

.border-white {
  --bs-border-color: rgba(var(--bp-white-rgb), var(--bs-border-opacity));
}

.border-secondary {
  --bs-border-color: rgba(var(--bp-white-rgb), var(--bs-border-opacity));
  --bs-border-opacity: 0.14;
}

.border-black {
  --bs-border-color: rgba(var(--bp-black-rgb), var(--bs-border-opacity));
}

.border-opacity-10 { --bs-border-opacity: 0.1; }
.border-opacity-25 { --bs-border-opacity: 0.25; }


.bg-dark { background-color: var(--bp-card); }
.bg-secondary { background-color: var(--bp-muted-bg); }
.bg-success { background-color: rgba(var(--bp-success-rgb), var(--bs-bg-opacity)); }
.bg-warning { background-color: rgba(var(--bp-accent-rgb), var(--bs-bg-opacity)); }
.bg-danger { background-color: rgba(var(--bp-danger-rgb), var(--bs-bg-opacity)); }
.bg-opacity-25 { --bs-bg-opacity: 0.25; }


.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.ms-auto { margin-left: auto; }
.ms-1 { margin-left: 0.25rem; }
.ms-2 { margin-left: 0.5rem; }
.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

.ps-1 { padding-left: 0.25rem; }
.ps-2 { padding-left: 0.5rem; }
.ps-3 { padding-left: 1rem; }

.pe-1 { padding-right: 0.25rem; }
.pe-2 { padding-right: 0.5rem; }
.pe-3 { padding-right: 1rem; }

.py-5 { padding-top: 3rem; padding-bottom: 3rem; }


.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }


.list-unstyled {
  padding-left: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .d-sm-block { display: block; }
  .d-sm-inline { display: inline; }
  .flex-sm-row { flex-direction: row; }
}

@media (min-width: 768px) {
  .flex-md-column { flex-direction: column; }
  .flex-md-row { flex-direction: row; }
  .pb-md-0 { padding-bottom: 0; }
  .p-md-5 { padding: 3rem; }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex;
    flex-basis: auto;
  }

  .mb-lg-0 { margin-bottom: 0; }
  .ms-lg-auto { margin-left: auto; }
  .mx-lg-0 { margin-left: 0; margin-right: 0; }
  .gap-lg-1 { gap: 0.25rem; }
  .gap-lg-3 { gap: 1rem; }
  .justify-content-lg-start { justify-content: flex-start; }
  .text-lg-start { text-align: left; }
}

/* ============================================================================
   Design tokens
   Three layers, in order. Only ever reach for the layer you need:

     1. PRIMITIVES  raw scales. No meaning attached. Never used in components.
     2. SEMANTIC    what a colour is *for*. This is what components should use.
     3. ALIASES     the historic --bp-* names, mapped onto the semantic layer.

   The palette is green-led: one green scale carries brand, action and surface,
   and contrast comes from value rather than from a second hue. The previous
   scheme ran gold, blue and green as three parallel accents, which left no
   single colour in charge. Changing a value here changes the whole site.
   ========================================================================= */

:root {
  /* == 1. PRIMITIVES =======================================================
     Green scale, dark to light. 600 is the established brand green and is
     kept at its original value so brand recognition is unchanged. */
  --g-950: #08140e;
  --g-900: #0c1a13;
  --g-850: #11241a;
  --g-800: #17301f;
  --g-700: #21402c;
  --g-600: #2f7d55;
  --g-500: #35a066;
  --g-400: #4cbd81;
  --g-300: #86d9ac;
  --g-200: #b9e9cf;
  --g-100: #d9f2e4;
  --g-050: #eef9f2;

  /* Neutrals, very slightly green-cast so they sit with the scale above. */
  --n-000: #ffffff;
  --n-050: #f8faf8;
  --n-100: #f1f5f2;
  --n-200: #dfe4e0;
  --n-400: #97a69c;
  --n-600: #55635a;
  --n-800: #2d3a33;
  --n-900: #101a13;

  /* Functional hues. These are not brand colours and are never decorative:
     WhatsApp is the platform's own green, the rest are states only. */
  --fn-whatsapp: #25d366;
  --fn-whatsapp-hover: #20bd5a;
  --fn-danger: #ef4444;
  --fn-danger-soft: #f87171;
  --fn-info: #93c5fd;

  /* == 2. SEMANTIC =========================================================
     Components should use these, not the primitives above. */

  /* Surfaces, dark (the default shell) */
  --surface-base: var(--g-900);
  --surface-raised: var(--g-850);
  --surface-overlay: var(--g-800);
  --surface-sunken: var(--g-950);

  /* Surfaces, light sections */
  --surface-light: var(--n-000);
  --surface-light-soft: var(--n-050);
  --surface-light-tint: var(--g-050);

  /* Text */
  --text-primary: #eaf0ec;
  --text-secondary: var(--n-400);
  --text-on-dark: #eaf0ec;
  --text-on-light: var(--n-900);
  --text-on-light-soft: var(--n-600);
  --text-on-accent: #06180f;

  /* Borders */
  --border-subtle: var(--g-700);
  --border-strong: #2c4f39;
  --border-light: var(--n-200);

  /* Brand and action.
     brand  = the trust layer: rules, marks, quiet fills.
     action = anything clickable. One action colour, so a page never shows
              two competing primaries.
     action-on-light is a darker step, because --action on white is fine for
     a button fill but too light for text. */
  --brand: var(--g-600);
  --action: var(--g-400);
  --action-hover: var(--g-300);
  --action-pressed: var(--g-500);
  --action-on-light: #1b7a4b;

  /* Focus ring: always visible, never removed. */
  --focus-ring: var(--g-300);

  /* == 3. ALIASES ==========================================================
     The historic --bp-* names, kept so the ~350 existing references across
     the stylesheets keep working. Prefer the semantic names above in new
     code; these exist so the palette could change without touching 16 files.

     --bp-accent used to be gold and --bp-exchange used to be blue. Both now
     resolve into the green scale, which is what retires the three-accent
     system without editing every component. */
  --bp-primary: var(--brand);
  --bp-primary-rgb: 47, 125, 85;
  --bp-accent: var(--action);
  --bp-accent-rgb: 76, 189, 129;
  --bp-accent-hover: var(--action-hover);
  --bp-accent-darker: var(--action-pressed);
  --bp-on-accent: var(--text-on-accent);
  --bp-exchange: var(--g-300);
  --bp-exchange-rgb: 134, 217, 172;

  --bp-white: var(--n-000);
  --bp-white-rgb: 255, 255, 255;
  --bp-white-soft: var(--n-050);
  --bp-white-soft-rgb: 248, 250, 252;
  --bp-black: #000000;
  --bp-black-rgb: 0, 0, 0;

  --bp-ink: var(--n-900);
  --bp-muted-ink: var(--n-600);
  --bp-muted-ink-strong: var(--action-on-light);
  --bp-surface-soft: var(--g-100);  /* was --n-100 (#f1f5f2): ~2% off white, invisible as an alternating tone */
  --bp-surface-pale: var(--n-050);
  --bp-surface-plain: var(--n-000);

  --bp-bg: var(--surface-base);
  --bp-card: var(--surface-raised);
  --bp-border: var(--border-subtle);
  --bp-border-light: var(--border-light);
  --bp-foreground: var(--text-primary);
  --bp-muted: var(--text-secondary);
  --bp-muted-bg: var(--surface-overlay);
  --bp-elevate-1: rgba(255, 255, 255, 0.04);
  --bp-elevate-2: rgba(255, 255, 255, 0.09);

  --bp-success: var(--fn-whatsapp);
  --bp-success-hover: var(--fn-whatsapp-hover);
  --bp-success-rgb: 37, 211, 102;
  --bp-success-bright: var(--g-400);
  --bp-success-bright-rgb: 76, 189, 129;
  --bp-whatsapp: var(--fn-whatsapp);
  --bp-whatsapp-hover: var(--fn-whatsapp-hover);

  --bp-info-bright: var(--fn-info);
  --bp-danger-bright: var(--fn-danger-soft);
  --bp-danger-rgb: 239, 68, 68;
  --bp-destructive: var(--fn-danger);
  --bp-destructive-rgb: 239, 68, 68;

  /* Removed: --bp-lay (0 uses) — the exchange lay-pink was never referenced. */

  --bp-radius: var(--r-sm);
  --bp-radius-xl: var(--r-md);
  --bp-radius-2xl: var(--r-md);
  /* One family, used across the whole scale. Archivo is a grotesque with a
     wide weight range and flat, even numerals, which suits a product built
     around odds, rates and payout figures. Expression comes from weight and
     tracking rather than from a second typeface. */
  --bp-font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --bp-font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Weight scale. 700 previously did almost every job (58 of 99 declarations),
     which left headings, labels and buttons all shouting at the same volume. */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Tracking. Grotesques need negative tracking as they get larger, and a
     little positive tracking at label sizes to stay readable. */
  --track-display: -0.028em;
  --track-heading: -0.018em;
  --track-body: 0;
  --track-label: 0.06em;

  /* == SPACING (4px base) ================================================= */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --sp-10: 6rem;

  /* == SECTION RHYTHM (3 steps only) ====================================== */
  --section-tight: 3rem;
  --section-base: 6rem;
  --section-loose: 8rem;

  /* == LAYOUT ============================================================= */
  --container: 1140px;
  --container-read: 68ch;
  --gutter: 2rem;

  /* == TYPE SCALE (8 steps) =============================================== */
  --fs-display: clamp(2.25rem, 5vw, 3.5rem);
  --fs-h1: clamp(1.875rem, 4vw, 2.5rem);
  --fs-h2: clamp(1.5625rem, 3vw, 1.875rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-label: 0.75rem;

  /* == RADIUS (3 steps) =================================================== */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* == ELEVATION (3 steps) ================================================ */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(8, 18, 12, 0.06);
  --elev-2: 0 8px 24px rgba(8, 18, 12, 0.10);

  /* == MOTION ============================================================= */
  --dur-fast: 150ms;
  --dur-slow: 250ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* == BOOTSTRAP BRIDGE =================================================== */
  --bs-primary: var(--brand);
  --bs-warning: var(--action);
  --bs-body-bg: var(--surface-base);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-subtle);
  --bs-secondary-bg: var(--surface-raised);
  --bs-secondary-color: var(--text-secondary);
  --bs-link-color: var(--action);
  --bs-link-hover-color: var(--action-hover);
  --bs-font-sans-serif: var(--bp-font-body);
}


.dark,
.betpro-theme {
  color-scheme: dark;
}

.betpro-theme .text-muted {
  color: var(--bp-muted);
}

.betpro-theme .text-white {
  color: var(--bp-foreground);
}

.betpro-theme .text-warning {
  color: var(--bp-accent);
}

.betpro-theme .text-success {
  color: var(--bp-primary);
}

.betpro-theme .bg-dark,
.betpro-theme .badge.bg-secondary {
  background-color: var(--bp-card);
}

.betpro-theme .form-control,
.betpro-theme .form-select {
  background-color: var(--bp-bg);
  border-color: var(--bp-border);
  color: var(--bp-foreground);
}

.betpro-theme .form-control:focus,
.betpro-theme .form-select:focus {
  background-color: var(--bp-bg);
  border-color: var(--bp-primary);
  color: var(--bp-foreground);
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-primary-rgb), 0.2);
}

.betpro-theme .form-select option {
  background: var(--bp-card);
  color: var(--bp-foreground);
}

.bp-alert {
  max-width: 720px;
  border-radius: var(--bp-radius);
  border: 1px solid transparent;
}

.bp-alert--success {
  background: rgba(var(--bp-primary-rgb), 0.15);
  border-color: rgba(var(--bp-primary-rgb), 0.35);
  color: #bbf7d0;
}

.bp-alert--danger {
  background: rgba(var(--bp-destructive-rgb), 0.12);
  border-color: rgba(var(--bp-destructive-rgb), 0.35);
  color: #fecaca;
}

html {
  scroll-behavior: smooth;
}

.betpro-theme {
  padding-top: 0;
  font-family: var(--bp-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  color: var(--bp-foreground);
  background-color: var(--bp-bg);
  background-image:
    radial-gradient(
      ellipse 75% 55% at 12% 82%,
      rgba(var(--bp-primary-rgb), 0.22) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 45% at 90% 12%,
      rgba(var(--bp-accent-rgb), 0.1) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 90% 35% at 50% -5%,
      rgba(var(--bp-primary-rgb), 0.06) 0%,
      transparent 50%
    );
  background-attachment: scroll;
  min-height: 100vh;
}

.betpro-theme.bp-has-topbar {
  padding-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.bp-heading {
  font-family: var(--bp-font-heading);
  letter-spacing: -0.02em;
}

h1 {
  font-weight: var(--fw-bold);
}
h2 {
  font-weight: var(--fw-semibold);
}
h3 {
  font-weight: var(--fw-semibold);
}
h4 {
  font-weight: var(--fw-medium);
}

.bp-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bp-page__main {
  flex: 1;
  position: relative;
  z-index: 1;
}

.bp-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}

.bp-orb--1 {
  top: -5%;
  left: -8%;
  width: 560px;
  height: 560px;
  background: rgba(var(--bp-primary-rgb), 0.22);
  animation: bp-float 6s ease-in-out infinite;
}

.bp-home .bp-orb--1 {
  width: 460px;
  height: 460px;
  background: rgba(var(--bp-primary-rgb), 0.18);
  filter: blur(80px);
}

.bp-orb--2 {
  top: 40%;
  right: -8%;
  width: 420px;
  height: 420px;
  background: rgba(var(--bp-accent-rgb), 0.12);
  filter: blur(90px);
  animation: bp-float 6s ease-in-out infinite 3s;
}

.bp-orb--3 {
  bottom: -8%;
  left: 10%;
  width: 480px;
  height: 480px;
  background: rgba(var(--bp-primary-rgb), 0.16);
  filter: blur(95px);
  animation: bp-float 6s ease-in-out infinite 1.5s;
}

.bp-orb--page-tr {
  top: 0;
  right: 0;
  width: 640px;
  height: 640px;
  background: rgba(var(--bp-primary-rgb), 0.1);
  filter: blur(90px);
  transform: translate(33%, -33%);
  z-index: 0;
}

.bp-orb--page-tl {
  top: 0;
  left: 0;
  width: 640px;
  height: 640px;
  background: rgba(var(--bp-primary-rgb), 0.1);
  filter: blur(90px);
  transform: translate(-50%, -50%);
  z-index: 0;
}

.bp-orb--page-accent {
  background: rgba(var(--bp-accent-rgb), 0.1);
}

.bp-section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--track-heading);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}

.bp-section-subtitle {
  color: var(--bp-muted);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

.bp-body-text {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--bp-muted);
}

.bp-body-text p {
  margin-bottom: 1rem;
}

.bp-body-text p:last-child {
  margin-bottom: 0;
}

.bp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: rgba(var(--bp-primary-rgb), 0.08);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.18);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--bp-primary);
  letter-spacing: 0.06em;
  text-transform: none;
}

.bp-kicker__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-primary);
  animation: bp-blink 2s ease-in-out infinite;
}

.bp-fit-content {
  width: fit-content;
}

.bp-tracking-wide {
  letter-spacing: 0.1em;
}

.bp-icon-xl {
  font-size: 3rem;
}

.bp-icon-youtube {
  color: #ff0000;
}

.bp-badge--xs {
  font-size: 0.7rem;
}

.bp-link-primary {
  color: var(--bp-primary);
}

.bp-sticky-sidebar {
  position: sticky;
  top: 6rem;
}

.bp-is-hidden {
  display: none !important;
}

.bp-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 90% at 20% 0%, rgba(var(--bp-primary-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 90% 100%, rgba(var(--bp-accent-rgb), 0.1) 0%, transparent 55%),
    rgba(var(--bp-primary-rgb), 0.07);
  color: rgba(var(--bp-primary-rgb), 0.4);
  font-size: 2.5rem;
}

.betpro-lang-switch {
  margin: 1.25rem 0;
}

.betpro-lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
  background: rgba(var(--bp-primary-rgb), 0.1);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.25);
  color: var(--bp-primary);
  transition: background 0.2s, border-color 0.2s;
}

.betpro-lang-switch a:hover {
  background: rgba(var(--bp-primary-rgb), 0.16);
  border-color: rgba(var(--bp-primary-rgb), 0.4);
}

.bp-sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bp-sitemap-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(var(--bp-white-rgb), 0.08);
}

.bp-sitemap-list a {
  color: inherit;
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.bp-sitemap-list a:hover {
  color: var(--bp-accent);
}

.bp-sitemap-list__date {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--bp-muted);
}

.bp-card {
  background: rgba(15, 23, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  box-shadow: var(--elev-0);
  transition: border-color var(--dur-fast) var(--ease);
}

.bp-card:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.28);
}

/* Skipping offscreen sections is worth keeping, but one 700px guess for every
   section made the scrollbar jump as each resolved. Apply it only well below
   the fold, with a placeholder nearer the real median height. */
.bp-page__main > section ~ section ~ section ~ section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 520px;
}

.bp-card--solid {
  background: var(--bp-card);
}

.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 3rem;
  padding: 0 var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  border-radius: var(--r-md);
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.bp-btn--gold {
  background: var(--bp-accent);
  color: var(--bp-on-accent);
  border-color: var(--bp-accent);
  box-shadow: var(--elev-0);
}

.bp-btn--gold:hover {
  background: var(--bp-accent-hover);
  color: var(--bp-on-accent);
  border-color: var(--bp-accent-hover);
}

.bp-btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

.bp-btn--outline:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--bp-foreground);
}

.bp-btn--ghost {
  background: transparent;
  border-color: var(--bp-border);
  color: var(--bp-foreground);
}

.bp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}

.bp-btn--primary {
  background: var(--bp-accent);
  border-color: var(--bp-accent);
  color: var(--bp-black);
}

.bp-btn--primary:hover {
  background: var(--bp-accent-hover);
  border-color: var(--bp-accent-hover);
  color: var(--bp-black);
}

.bp-btn--whatsapp {
  background: var(--bp-accent-hover);
  color: var(--bp-black);
}

.bp-btn--whatsapp:hover {
  background: var(--bp-accent-darker);
  color: var(--bp-white);
}

/* --lg / --xl / --pill stay as aliases so the existing call sites keep
   working, but every button now resolves to one radius and two heights. */
.bp-btn--lg {
  min-height: 3rem;
  padding: 0 var(--sp-5);
  font-size: var(--fs-body);
}

.bp-btn--xl {
  min-height: 3.5rem;
  padding: 0 var(--sp-6);
  font-size: var(--fs-body-lg);
  border-radius: var(--r-md);
}

.bp-btn--pill {
  border-radius: var(--r-md);
}

.bp-btn--block {
  width: 100%;
}

/* One accent, two values.
   The scheme used to run three parallel accents (gold for actions, blue for
   the exchange, green for brand), which meant nothing was clearly in charge.
   It is now one green scale: a light step on dark surfaces, a darker step on
   light ones, so the headline mark reads at both ends without a second hue.

   The class names below are historic. They are kept because the markup and
   the stored content-editor values reference them; only the values changed. */
.bp-text-gradient-gold,
.bp-text-gradient-primary,
.bp-text-gradient-accent {
  color: var(--g-300);
}

.bp-section--light .bp-text-gradient-gold,
.bp-section--light .bp-text-gradient-primary,
.bp-section--light .bp-text-gradient-accent {
  color: var(--action-on-light);
}

.bp-text-muted {
  color: var(--bp-muted);
}

.betpro-theme .small,
.betpro-theme small {
  font-size: var(--fs-sm);
}

.bp-section {
  padding: var(--section-base) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.bp-section--sm {
  padding: var(--section-tight) 0;
}

.bp-section--band {
  background: transparent;
  border: none;
}




.bp-page-hero {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.bp-page-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.bp-page-hero__subtitle {
  font-size: 1.25rem;
  color: var(--bp-muted);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.bp-badge {
  display: inline-block;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}

.bp-badge--primary {
  background: rgba(var(--bp-primary-rgb), 0.2);
  color: var(--bp-primary);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.3);
}

.bp-badge--accent {
  background: rgba(var(--bp-accent-rgb), 0.2);
  color: var(--bp-accent);
  border: 1px solid rgba(var(--bp-accent-rgb), 0.3);
}

.bp-form-control {
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  color: var(--bp-foreground);
  border-radius: var(--bp-radius);
  padding: 0.75rem 1rem;
}

.bp-form-control:focus {
  border-color: var(--bp-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bp-primary-rgb), 0.25);
}

.bp-form-label {
  color: var(--bp-foreground);
  font-weight: var(--fw-medium);
  margin-bottom: 0.5rem;
}

.bp-animate-in {
  animation: bp-fade-up 0.55s ease-out both;
}

.bp-animate-in-delay-1 {
  animation-delay: 0.1s;
}
.bp-animate-in-delay-2 {
  animation-delay: 0.2s;
}
.bp-animate-in-delay-3 {
  animation-delay: 0.3s;
}

.bp-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.bp-delay-1 { transition-delay: 0.07s; }
.bp-delay-2 { transition-delay: 0.14s; }
.bp-delay-3 { transition-delay: 0.21s; }
.bp-delay-4 { transition-delay: 0.28s; }
.bp-delay-5 { transition-delay: 0.35s; }
.bp-delay-6 { transition-delay: 0.42s; }

.bp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes bp-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes bp-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes bp-border-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bp-cta-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes bp-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-bp-float {
  animation: bp-float 6s ease-in-out infinite;
}
.animate-bp-blink {
  animation: bp-blink 2s ease-in-out infinite;
}
.animate-bp-border-spin {
  animation: bp-border-spin 4s linear infinite;
}
.animate-bp-cta-pulse {
  animation: bp-cta-pulse 3s ease-in-out infinite;
}

.hover-elevate {
  position: relative;
  z-index: 0;
}

.hover-elevate::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 999;
  transition: background-color 0.2s;
}

.hover-elevate:hover::after {
  background-color: var(--bp-elevate-1);
}

@media (max-width: 991.98px) {
  .bp-nav-open {
    overflow: hidden;
  }
}


.bp-section--light::before,
.bp-section--light::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  z-index: 1;
}

.bp-section--light::before {
  top: 0;
  height: 1px;
  background: var(--bp-border-light);
}

.bp-section--light::after {
  display: none;
}

.bp-section--light .bp-section-title {
  color: var(--bp-ink);
}

.bp-section--light .bp-section-subtitle,
.bp-section--light .bp-body-text,
.bp-section--light .bp-text-muted,
.bp-section--light .text-muted {
  color: var(--bp-muted-ink);
}

/* .h5 previously carried a colour rule and no font-size, so every card title
   fell back to the raw h3 size — 28px where 20px was intended. */
.betpro-theme .h5,
.betpro-theme h5 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.bp-section--light h3,
.bp-section--light h4,
.bp-section--light h5,
.bp-section--light .h5 {
  color: var(--bp-ink);
}

.bp-section--light .bp-kicker {
  background: rgba(var(--bp-primary-rgb), 0.08);
  border-color: rgba(var(--bp-primary-rgb), 0.22);
}

.bp-section--light .bp-card {
  background: var(--bp-surface-plain);
  border-color: var(--bp-border-light);
  box-shadow: var(--elev-0);
}

.bp-section--light .bp-card:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.35);
}

.bp-section--light .bp-btn--outline {
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--bp-ink);
}

.bp-section--light .bp-btn--outline:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--bp-ink);
}

.bp-section--light .bp-step-card__step-label {
  color: var(--bp-primary);
}

.bp-section--light .bp-payments__item {
  color: var(--bp-ink);
}

.bp-section--light small,
.bp-section--light .small {
  color: var(--bp-muted-ink);
}


.single-post,
.home,
.page-template-page-blog-php,
.page-template-page-faq-php,
.page-template-page-cricket-schedule-php,
.page-template-page-betting-id-php {
  background: var(--bp-surface-plain);
  background-image: none;
  color: var(--bp-ink);
  color-scheme: light;
}

.single-post .bp-orb,
.home .bp-orb,
.page-template-page-blog-php .bp-orb,
.page-template-page-faq-php .bp-orb,
.page-template-page-cricket-schedule-php .bp-orb,
.page-template-page-betting-id-php .bp-orb {
  opacity: 0.25;
}

.page-template-page-blog-php .bp-page-hero__subtitle {
  color: var(--bp-muted-ink);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.bp-pre-footer-cta {
  position: relative;
  padding: 5rem 0;
  border-top: 1px solid rgba(var(--bp-primary-rgb), 0.15);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.bp-pre-footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 12, 8, 0.15) 0%, rgba(6, 12, 8, 0.38) 100%),
    url("https://bpexchs.live/wp-content/themes/bpexchs_live/assets/images/pattren.png") center center / cover no-repeat;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

.bp-pre-footer-cta > * {
  position: relative;
  z-index: 1;
}

.bp-pre-footer-cta__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.bp-pre-footer-cta__glow--left {
  bottom: -20%;
  left: -10%;
  background: radial-gradient(circle, rgba(var(--bp-primary-rgb), 0.22) 0%, transparent 60%);
  filter: blur(80px);
}

.bp-pre-footer-cta__glow--right {
  top: -20%;
  right: -10%;
  background: radial-gradient(circle, rgba(var(--bp-accent-rgb), 0.12) 0%, transparent 60%);
  filter: blur(80px);
}

.bp-pre-footer-cta__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.bp-pre-footer-cta__sub {
  font-size: 1.125rem;
  color: var(--bp-muted);
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.25rem;
}

@media (max-width: 575.98px) {
  .bp-pre-footer-cta {
    padding: var(--section-tight) 0;
  }

  .bp-pre-footer-cta__sub {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }
}


.single-post .bp-pre-footer-cta,
.home .bp-pre-footer-cta {
  background: var(--bp-ink);
  color: var(--bp-foreground);
}

.single-post .bp-pre-footer-cta::before,
.home .bp-pre-footer-cta::before {
  opacity: 0.3;
}

.single-post .bp-pre-footer-cta__sub,
.home .bp-pre-footer-cta__sub {
  color: rgba(255, 255, 255, 0.7);
}

.single-post .bp-single-content .bp-btn--outline {
  border-color: rgba(0, 0, 0, 0.18);
  color: var(--bp-ink);
}

.single-post .bp-single-content .bp-btn--outline:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--bp-ink);
}


/* ============================================================
   Layout containers
   ============================================================ */
/* Must out-specify `.betpro-theme .container` (0,2,0), otherwise a
   `.container.bp-container--read` element silently keeps the full 1140px. */
.betpro-theme .bp-container--read,
.betpro-theme .container.bp-container--read {
  width: 100%;
  max-width: var(--container-read);
  margin-left: auto;
  margin-right: auto;
}

.betpro-theme .container {
  max-width: var(--container);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

@media (max-width: 991.98px) {
  .betpro-theme .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .betpro-theme .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .bp-section {
    padding: var(--section-tight) 0;
  }

  .bp-section--sm {
    padding: 2rem 0;
  }
}

/* ============================================================
   Motion — one focus ring, and honour reduced-motion
   ============================================================ */
.betpro-theme :focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .betpro-theme *,
  .betpro-theme *::before,
  .betpro-theme *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .bp-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Section rhythm — the page alternates surfaces so consecutive
   sections read as separate beats instead of one continuous wash.
   This was previously declared twice (here and further up the file);
   the two versions fought over the background property and the
   alternation this comment describes was never actually visible.
   ============================================================ */
.bp-section--light {
  position: relative;
  background: var(--bp-surface-plain);
  color: var(--bp-ink);
  border-top: none;
}

.bp-section--light.bp-section--alt {
  background: var(--bp-surface-soft);
}

/* Cards lift a step when they sit on the tinted ground, so the
   alternation carries depth as well as tone. */
.bp-section--alt .bp-card,
.bp-section--alt .bp-home .bp-card {
  box-shadow: var(--elev-1);
}

/* Theme icon set. Icons are inline SVGs sized in em so they track the
   font-size of whatever they sit in, the way the old icon font did.
   The artwork sits inside a 24-unit box with ~2 units of padding, so 1em
   would render visibly smaller than the webfont glyphs it replaced. The
   multiplier below compensates; override --bp-icon-size to tune one spot. */
.bp-icon {
  --bp-icon-size: 1.3em;
  width: var(--bp-icon-size);
  height: var(--bp-icon-size);
  display: inline-block;
  vertical-align: -0.25em;
  flex-shrink: 0;
  overflow: visible;
}


.bp-header-shell {
  position: relative;
  z-index: 1060;
  background: var(--bp-surface-plain);
  box-shadow: var(--elev-2);
}

.bp-topbar,
.bp-navbar {
  --bp-header-topbar-height: 2.25rem;
  --bp-header-navbar-height: 4.5rem;
}


.bp-navbar {
  position: relative;
  z-index: 1050;
}


@media (max-width: 767.98px) {

  .bp-topbar,
  .bp-navbar {
    --bp-header-navbar-height: 4.25rem;
  }
}


.bp-navbar {
  background: transparent;
  border-bottom: 1px solid rgba(var(--bp-white-rgb), 0.1);
  padding: 0;
  min-height: var(--bp-header-navbar-height);
  box-shadow: var(--elev-2);
}

.bp-navbar .container {
  min-height: var(--bp-header-navbar-height);
  gap: 1.25rem;
}

.bp-navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--bp-primary-rgb), 0.65), rgba(var(--bp-accent-rgb), 0.55), rgba(var(--bp-primary-rgb), 0.65), transparent);
  pointer-events: none;
  opacity: 0.72;
}

.bp-skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2000;
  background: var(--bp-accent);
  color: var(--bp-on-accent);
  padding: 0.5rem 1rem;
  border-radius: var(--bp-radius);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}

.bp-navbar .navbar-brand {
  padding: 0;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.bp-logo-img {
  height: clamp(1.75rem, 3.2vw, 2.25rem);
  width: auto;
  display: block;
}


.bp-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: rgba(var(--bp-white-rgb), 0.64);
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}

.bp-nav-link::after,
.current-menu-item > .bp-nav-link::after {
  display: none;
}

.bp-nav-link:hover,
.bp-nav-link:focus,
.bp-nav-link.is-active,
.current-menu-item > .bp-nav-link {
  background: rgba(var(--bp-white-rgb), 0.07);
  color: var(--bp-white);
}

.bp-nav-link:focus-visible,
.bp-navbar .navbar-toggler:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
  box-shadow: var(--elev-0);
}

.bp-navbar .navbar-toggler {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  .bp-navbar .navbar-toggler {
    display: none;
  }
}

.bp-navbar .navbar-toggler {
  border-color: rgba(var(--bp-white-rgb), 0.16);
  border-radius: var(--bp-radius-xl);
  background: rgba(var(--bp-white-rgb), 0.06);
  color: var(--bp-foreground);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.bp-navbar .navbar-toggler:hover {
  border-color: rgba(var(--bp-accent-rgb), 0.32);
  background: rgba(var(--bp-white-rgb), 0.1);
}

.bp-navbar .navbar-toggler:active {
  transform: scale(0.92);
}

.bp-navbar .navbar-toggler[aria-expanded="true"] {
  background: rgba(var(--bp-accent-rgb), 0.14);
  border-color: rgba(var(--bp-accent-rgb), 0.4);
}

.bp-hamburger {
  position: relative;
  width: 1.15rem;
  height: 0.8rem;
  display: inline-block;
}

.bp-hamburger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--bp-white-rgb), 0.92);
  transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease, background 0.2s ease;
}

.bp-hamburger__bar:nth-child(1) {
  top: 0;
}

.bp-hamburger__bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.bp-hamburger__bar:nth-child(3) {
  top: 100%;
  transform: translateY(-100%);
}

.navbar-toggler[aria-expanded="true"] .bp-hamburger__bar {
  background: var(--bp-accent);
}

.navbar-toggler[aria-expanded="true"] .bp-hamburger__bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .bp-hamburger__bar:nth-child(2) {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .bp-hamburger__bar:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.bp-navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  order: 2;
}

.bp-navbar-collapse {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .bp-navbar-collapse {
    border-top: none;
  }

  .bp-navbar .navbar-nav {
    align-items: center;
  }
}

@media (max-width: 991.98px) {
  .bp-navbar {
    background: rgba(5, 11, 8, 0.98);
  }

  .bp-navbar .container {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .bp-navbar-actions {
    flex-direction: row;
    width: auto;
    margin-top: 0;
    margin-left: auto;
    margin-right: var(--sp-3);
  }

  .bp-navbar-collapse {
    margin-top: 0.6rem;
    padding: 0.75rem;
    border: 1px solid rgba(var(--bp-white-rgb), 0.09);
    border-radius: var(--bp-radius-xl);
    background: rgba(var(--bp-white-rgb), 0.045);
  }

  .bp-nav-link {
    width: 100%;
    justify-content: space-between;
    border-bottom: 0;
    border-radius: var(--r-md);
    padding: 0.8rem 0.9rem;
  }

  .bp-nav-mega-link-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}


/* Header CTA — present at every breakpoint, sits left of the hamburger on
   mobile so the primary action is never behind a menu. */
.bp-navbar-cta {
  min-height: 2.5rem;
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

@media (min-width: 992px) {
  .bp-navbar-actions {
    order: 3;
    margin-left: var(--sp-5);
  }

  .bp-navbar-collapse {
    order: 2;
    flex-grow: 0;
  }
}

@media (max-width: 575.98px) {
  .bp-navbar-cta {
    padding: 0 var(--sp-3);
  }

  .bp-navbar-cta__label {
    display: none;
  }

  .bp-navbar-cta i {
    font-size: 1.15rem;
  }
}

/* Nav links read as navigation, not as three equally-weighted pill buttons. */
.bp-navbar .navbar-nav .nav-link {
  border-radius: var(--r-sm);
  background: transparent;
}

/* Bar order on mobile: logo, then CTA, then the menu toggle at the far right. */
@media (max-width: 991.98px) {
  .bp-navbar .navbar-brand {
    order: 1;
  }

  .bp-navbar-actions {
    order: 2;
    margin-left: auto;
    margin-right: var(--sp-2);
  }

  .bp-navbar .navbar-toggler {
    order: 3;
    margin-left: 0;
  }

  .bp-navbar-collapse {
    order: 4;
  }
}

/* ============================================================
   Header — light bar over the dark hero. The hard edge between the
   two is the strongest structural line on the page.
   ============================================================ */
.bp-navbar,
.home .bp-navbar {
  background: var(--bp-surface-plain);
  border-bottom: 1px solid var(--bp-border-light);
  backdrop-filter: none;
}

/* The wordmark is a solid-colour PNG. On the white header it is rendered as
   ink for contrast; on dark grounds it keeps its own green. */
.bp-navbar .bp-logo-img {
  filter: brightness(0);
  opacity: 0.92;
}

.bp-navbar .navbar-nav .nav-link {
  position: relative;
  padding: 0.5rem 0.15rem;
  margin: 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--bp-muted-ink);
  background: transparent;
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease);
}

.bp-navbar .navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bp-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.bp-navbar .navbar-nav .nav-link:hover,
.bp-navbar .navbar-nav .nav-link:focus-visible,
.bp-navbar .navbar-nav .current-menu-item > .nav-link {
  color: var(--bp-ink);
}

.bp-navbar .navbar-nav .nav-link:hover::after,
.bp-navbar .navbar-nav .nav-link:focus-visible::after,
.bp-navbar .navbar-nav .current-menu-item > .nav-link::after {
  transform: scaleX(1);
}

/* hamburger bars on a light bar */
.bp-navbar .bp-hamburger__bar {
  background: var(--bp-ink);
}

.bp-navbar .navbar-toggler {
  border-color: var(--bp-border-light);
}

@media (max-width: 991.98px) {
  .bp-navbar .navbar-nav .nav-link {
    margin: 0;
    padding: 0.7rem 0.25rem;
  }

  /* the collapsed panel sits on the light bar too */
  .bp-navbar-collapse {
    background: var(--bp-surface-pale);
    border-color: var(--bp-border-light);
  }
}


.bp-has-dropdown {
  position: relative;
}


.bp-has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
}


.bp-nav-mega-link-wrap .bp-nav-link::after,
.bp-nav-mega-link-wrap .bp-nav-link:hover::after,
.bp-nav-mega-link-wrap .bp-nav-link:focus::after {
  display: none;
}


.bp-has-dropdown:hover .bp-nav-mega-link-wrap .bp-nav-link,
.bp-has-dropdown:focus-within .bp-nav-mega-link-wrap .bp-nav-link,
.bp-has-dropdown.is-open .bp-nav-mega-link-wrap .bp-nav-link {
  background: rgba(var(--bp-white-rgb), 0.07);
  color: var(--bp-white);
}

.bp-nav-link--mega {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.bp-nav-mega-link-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.bp-nav-mega-toggle {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--bp-white-rgb), 0.12);
  border-radius: 999px;
  background: rgba(var(--bp-white-rgb), 0.055);
  color: rgba(var(--bp-white-rgb), 0.58);
  transition: all 0.2s;
}

.bp-nav-mega-toggle:hover,
.bp-nav-mega-toggle:focus-visible,
.bp-has-dropdown.is-open .bp-nav-mega-toggle {
  border-color: rgba(var(--bp-accent-rgb), 0.35);
  background: rgba(var(--bp-accent-rgb), 0.11);
  color: var(--bp-accent);
  outline: none;
}

.bp-nav-chevron {
  font-size: 0.65rem;
  transition: transform 0.2s;
}

.bp-has-dropdown.is-open .bp-nav-chevron {
  transform: rotate(180deg);
}

.bp-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 18rem;
  background: rgba(7, 15, 10, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--bp-white-rgb), 0.1);
  border-radius: var(--bp-radius-xl);
  padding: 0.65rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  pointer-events: none;
  z-index: 1100;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(var(--bp-white-rgb), 0.06);
}

.bp-dropdown-menu--blog {
  left: auto;
  right: 0;
  transform: translateY(-6px);
  min-width: 19rem;
  padding: 0.65rem;
}

.bp-has-dropdown.is-open .bp-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.bp-has-dropdown.is-open .bp-dropdown-menu--blog {
  transform: translateY(0);
}

@media (min-width: 992px) {
  .bp-has-dropdown:hover .bp-dropdown-menu,
  .bp-has-dropdown:focus-within .bp-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  .bp-has-dropdown:hover .bp-dropdown-menu--blog,
  .bp-has-dropdown:focus-within .bp-dropdown-menu--blog {
    transform: translateY(0);
  }

  .bp-has-dropdown:hover .bp-nav-chevron,
  .bp-has-dropdown:focus-within .bp-nav-chevron {
    transform: rotate(180deg);
  }

  .bp-dropdown-menu {
    max-height: min(72vh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

}

.bp-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: rgba(var(--bp-white-rgb), 0.68);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.bp-dropdown-menu--blog > li {
  list-style: none;
}

.bp-dropdown-menu__label {
  padding: 0.15rem 0.25rem 0.6rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-accent);
}

.bp-dropdown-menu__divider {
  height: 1px;
  margin: 0.35rem 0.15rem;
  background: rgba(255, 255, 255, 0.08);
}

.bp-dropdown-menu__title {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--bp-foreground);
  line-height: 1.35;
}

.bp-dropdown-menu__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--bp-muted);
}

.bp-dropdown-menu__empty {
  display: block;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  color: var(--bp-muted);
}

.bp-dropdown-menu a:hover,
.bp-dropdown-menu a:focus-visible {
  background: rgba(var(--bp-white-rgb), 0.075);
  color: var(--bp-white);
  outline: none;
}

.bp-dropdown-menu a:focus-visible {
  box-shadow: var(--elev-1);
}

.bp-dropdown-menu a i {
  color: var(--bp-success-bright);
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .bp-nav-mega-link-wrap {
    gap: 0.5rem;
  }

  .bp-nav-mega-link-wrap .bp-nav-link {
    flex: 1;
  }

  .bp-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    margin-top: 0.35rem;
    padding: 0.5rem;
    background: rgba(var(--bp-black-rgb), 0.16);
    border-color: rgba(var(--bp-white-rgb), 0.08);
    border-radius: var(--r-md);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--elev-0);
    display: none;
  }

  .bp-has-dropdown.is-open .bp-dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .bp-dropdown-menu--blog {
    right: auto;
    left: 0;
    min-width: 0;
  }
}

.bp-footer {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0 1.5rem;
  background:
    linear-gradient(180deg, rgba(6, 15, 10, 0.96) 0%, rgba(4, 10, 7, 1) 100%),
    var(--bp-card);
  color: var(--bp-foreground);
  isolation: isolate;
}

.bp-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(var(--bp-primary-rgb), 0.45), rgba(var(--bp-accent-rgb), 0.28), transparent) top / 100% 1px no-repeat,
    radial-gradient(ellipse 60% 85% at 8% 0%, rgba(var(--bp-primary-rgb), 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 50% 80% at 98% 14%, rgba(var(--bp-accent-rgb), 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.bp-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
  padding: var(--sp-6);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.45);
  border-radius: var(--r-lg);
  background: rgba(var(--bp-primary-rgb), 0.14);
}

.bp-footer__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--bp-accent);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bp-footer__cta-title {
  max-width: 42rem;
  margin: 0;
  color: var(--bp-foreground);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1.12;
  letter-spacing: 0;
}

.bp-footer__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1.35fr) minmax(10rem, 0.75fr) minmax(12rem, 1fr) minmax(15rem, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.bp-footer__brand,
.bp-footer__nav {
  min-width: 0;
}

.bp-footer__logo {
  display: inline-flex;
  margin-bottom: 1.25rem;
}

.bp-footer__desc {
  max-width: 24rem;
  margin: 0 0 1.35rem;
  color: rgba(var(--bp-white-rgb), 0.68);
  font-size: 0.94rem;
  line-height: 1.65;
}

.bp-footer__heading {
  margin: 0 0 var(--sp-4);
  color: rgba(var(--bp-white-rgb), 0.45);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bp-footer__links {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-footer__links li {
  min-width: 0;
}

.bp-footer__links a,
.bp-footer__bottom a {
  color: rgba(var(--bp-white-rgb), 0.68);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

.bp-footer__links a {
  display: inline-flex;
  max-width: 100%;
  padding: 0.25rem 0;
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.bp-footer__links a:hover,
.bp-footer__bottom a:hover {
  color: var(--bp-accent);
}

.bp-footer__links a:hover {
  transform: translateX(3px);
}

.bp-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.bp-footer__social a {
  display: inline-flex;
  width: 2.65rem;
  height: 2.65rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--bp-white-rgb), 0.1);
  border-radius: 999px;
  background: rgba(var(--bp-white-rgb), 0.045);
  color: rgba(var(--bp-white-rgb), 0.72);
  text-decoration: none;
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.bp-footer__social a:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bp-accent-rgb), 0.4);
  background: rgba(var(--bp-accent-rgb), 0.11);
  color: var(--bp-accent);
}

.bp-footer__social-wa:hover {
  border-color: rgba(var(--bp-success-rgb), 0.45);
  background: rgba(var(--bp-success-rgb), 0.12);
  color: var(--bp-success-bright);
}

.bp-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--bp-white-rgb), 0.08);
  color: rgba(var(--bp-white-rgb), 0.55);
  font-size: 0.84rem;
}

.bp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem 1.25rem;
}

.bp-footer a:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .bp-footer__top,
  .bp-footer__grid {
    grid-template-columns: 1fr;
  }

  .bp-footer__top {
    align-items: start;
  }

  .bp-footer__grid {
    gap: 2rem;
  }
}

@media (max-width: 767.98px) {
  .bp-footer {
    padding-top: 2.75rem;
  }

  .bp-footer__top {
    padding: 1.15rem;
  }

  .bp-footer__top .bp-btn {
    width: 100%;
  }

  .bp-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .bp-footer__legal {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {

  .bp-footer__social a {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ============================================================
   Footer — quieter, better structured. Previously every heading
   was gold weight-800 with a leading dash, the CTA card was a
   near-black box on near-black, and the whole thing carried two
   radial washes plus a gradient hairline.
   ============================================================ */
.bp-footer {
  padding: var(--section-base) 0 var(--sp-6);
  background: #070c09;
  border-top: 1px solid rgba(var(--bp-white-rgb), 0.08);
}

/* one wash, not three */
.bp-footer::before {
  background: radial-gradient(
    ellipse 60% 90% at 12% 0%,
    rgba(var(--bp-primary-rgb), 0.14) 0%,
    transparent 62%
  );
}

/* CTA card: reads as the last call to action, not as background */
.bp-footer__top {
  margin-bottom: var(--sp-8);
  padding: var(--sp-6) var(--sp-7);
  gap: var(--sp-6);
}

.bp-footer__cta-title {
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

/* Columns: give the brand column room and let the rest breathe evenly. */
.bp-footer__grid {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--sp-7) var(--sp-8);
}

.bp-footer__desc {
  font-size: var(--fs-sm);
  color: rgba(var(--bp-white-rgb), 0.6);
}

/* Links: no sliding on hover — it made the column feel unstable. */
.bp-footer__links a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: rgba(var(--bp-white-rgb), 0.78);
  transition: color var(--dur-fast) var(--ease);
}

.bp-footer__links a:hover {
  transform: none;
  color: var(--bp-foreground);
}

/* Contact block: flat, not a nested card inside a dark panel. */
.bp-footer__contact {
  padding: 0;
  border: 0;
  background: none;
}

/* Bottom bar */
.bp-footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(var(--bp-white-rgb), 0.08);
  font-size: var(--fs-sm);
  color: rgba(var(--bp-white-rgb), 0.5);
}

.bp-footer__legal a {
  color: rgba(var(--bp-white-rgb), 0.6);
}

.bp-footer__legal a:hover {
  color: var(--bp-foreground);
}


@media (max-width: 767.98px) {
  .bp-orb--1 {
    width: 280px;
    height: 280px;
    filter: blur(70px);
  }

  .bp-orb--2 {
    width: 240px;
    height: 240px;
    filter: blur(80px);
  }

  .bp-orb--3 {
    width: 260px;
    height: 260px;
    filter: blur(80px);
  }

  
  .bp-sports-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .bp-sports-tab {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {

  
  .bp-sports-section .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  
  .bp-pre-footer-cta__title {
    font-size: 1.75rem;
  }
}

@media (max-width: 767.98px) {
  .bp-comparison__head,
  .bp-comparison__row {
    font-size: 0.9375rem;
  }

  .bp-comparison__head > div,
  .bp-comparison__row > div {
    padding: 0.875rem;
  }

  .bp-hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .bp-newsletter {
    padding: 2rem 1.5rem;
  }

  .bp-mission-img {
    height: 320px;
  }
}

@media (max-width: 575.98px) {
  .bp-hero {
    min-height: auto;
    padding-top: 6rem;
  }

  .bp-section {
    padding: 4rem 0;
  }

  .bp-final-cta {
    padding: 5rem 0;
  }
}

@media (min-width: 992px) {
  .bp-navbar .navbar-nav {
    gap: 2rem;
  }
}



/* .bp-about-section, .bp-features-section, .bp-comparison-section, .bp-blog-section,
   .bp-city-section and .bp-cricket-section used to set a dark radial-gradient
   background on this rule. It never rendered: every one of these classes is
   always paired with .bp-section--light in the markup (there is no dark variant
   anywhere in the templates, and no light-text rule to support one), and
   .bp-about-section/.bp-features-section/.bp-blog-section each also declared
   "background-color" followed by a "background:" shorthand with no colour term,
   which resets background-color back to transparent per the CSS spec. The
   result was a transparent section with a barely-visible gradient wash sitting
   on whatever was behind it — the flat, contrastless look this replaces.
   .bp-city-section and .bp-cricket-section were unused by any template.
   The section rhythm (alternating plain/tinted bands) now lives entirely in
   .bp-section--light / .bp-section--alt in global.css. */

.bp-comparison-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


.bp-hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--section-tight) 0 var(--section-base);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 80% at 0% 45%, rgba(var(--bp-primary-rgb), 0.32) 0%, transparent 58%),
    radial-gradient(ellipse 65% 60% at 100% 15%, rgba(var(--bp-accent-rgb), 0.14) 0%, transparent 55%);
}


.bp-hero::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: url("https://bpexchs.live/wp-content/themes/bpexchs_live/assets/images/pattren.png") center top / 720px auto repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  filter: brightness(1.35) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 95% 78% at 50% 42%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0.72) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 78% at 50% 42%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 68%, rgba(0, 0, 0, 0.72) 84%, transparent 100%);
}

.bp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 7, 0.1) 0%, rgba(5, 10, 7, 0.3) 100%);
  pointer-events: none;
  z-index: 0;
}

.bp-hero > * {
  position: relative;
  z-index: 1;
}

.bp-hero__bg-accent {
  display: none;
}

@media (max-width: 991.98px) {
  .bp-home .bp-hero {
    min-height: auto;
    padding: 2.5rem 0 3.5rem;
  }
}

.bp-hero__headline {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  /* Heaviest weight on the page, and the only place it is used. Archivo at
     800 with tight tracking is what carries the hero now that the mock login
     card is gone. */
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.bp-hero__sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: rgba(var(--bp-white-rgb), 0.78);
  max-width: 34rem;
}

.bp-hero__body {
  color: rgba(var(--bp-white-rgb), 0.68);
  max-width: 32rem;
  font-size: 1rem;
  line-height: 1.65;
}

.bp-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--bp-white-rgb), 0.08);
}

.bp-hero__stats > div {
  min-height: 100%;
  padding: 0.95rem 0.8rem;
  border-radius: var(--bp-radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(var(--bp-white-rgb), 0.06);
  box-shadow: inset 0 1px 0 rgba(var(--bp-white-rgb), 0.04);
}

.bp-hero__stats > div:nth-child(odd) {
  background: linear-gradient(180deg, rgba(var(--bp-primary-rgb), 0.11) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.bp-hero__stats > div:nth-child(even) {
  background: linear-gradient(180deg, rgba(var(--bp-accent-rgb), 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.bp-hero__stat-value {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
}

.bp-hero__stats > div:nth-child(odd) .bp-hero__stat-value {
  color: var(--bp-success-bright);
}

.bp-hero__stats > div:nth-child(even) .bp-hero__stat-value {
  color: var(--bp-accent);
}

.bp-hero__stat-label {
  font-size: 0.8125rem;
  color: rgba(var(--bp-white-rgb), 0.6);
}

.bp-hero-card-wrap {
  position: relative;
  border-radius: var(--bp-radius-2xl);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.3);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(var(--bp-primary-rgb), 0.12),
    0 0 44px rgba(var(--bp-primary-rgb), 0.1);
}

.bp-hero-card-wrap::before {
  content: "";
  position: absolute;
  inset: -1.5rem;
  background: radial-gradient(ellipse at 50% 55%, rgba(var(--bp-primary-rgb), 0.14) 0%, transparent 65%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.bp-hero-card {
  position: relative;
  background: rgba(20, 32, 24, 0.92);
  border-radius: var(--bp-radius-2xl);
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--bp-white-rgb), 0.09);
}

.bp-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(var(--bp-accent-rgb), 0.06) 0%, transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(var(--bp-primary-rgb), 0.06) 0%, transparent 26%);
  pointer-events: none;
}

@media (min-width: 992px) {
  .bp-home .bp-hero .bp-hero-card-wrap {
    margin-inline: auto;
    width: min(100%, 29rem);
  }
}

.bp-hero-card__live {
  background: rgba(var(--bp-danger-rgb), 0.15);
  color: var(--bp-danger-bright);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  animation: bp-blink 2s ease-in-out infinite;
}

.bp-hero-card__meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(var(--bp-primary-rgb), 0.08);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.18);
  color: #bbf7d0;
}

.bp-hero-card__meta-pill--soft {
  background: rgba(var(--bp-accent-rgb), 0.08);
  border-color: rgba(var(--bp-accent-rgb), 0.16);
  color: rgba(255, 244, 180, 0.95);
}

.bp-hero-card__team-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: 0.875rem;
}

.bp-hero-card__team-badge--pak {
  background: rgba(20, 83, 45, 0.5);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.bp-hero-card__team-badge--ind {
  background: rgba(30, 58, 138, 0.4);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--bp-info-bright);
}

.bp-hero-card__team-badge--img {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(var(--bp-white-rgb), 0.06);
  border: 1px solid rgba(var(--bp-white-rgb), 0.14);
  border-radius: 50%;
  overflow: hidden;
  padding: 0.35rem;
  flex-shrink: 0;
}

.bp-hero-card__team-badge--img img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;   
  border-radius: 50%;
  display: block;
}

.bp-hero-card__score {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.bp-hero-card__target {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--bp-accent);
}

.bp-hero-card__odd {
  border-radius: var(--bp-radius-xl);
  padding: 1rem;
  cursor: pointer;
  min-height: 5.5rem;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.bp-hero-card__odd--primary {
  background: rgba(var(--bp-primary-rgb), 0.1);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.2);
}

.bp-hero-card__odd--accent {
  background: rgba(var(--bp-accent-rgb), 0.08);
  border: 1px solid rgba(var(--bp-accent-rgb), 0.15);
}

.bp-hero-card__odd-value {
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
}

.bp-hero-card__odd-value--primary { color: var(--bp-primary); }
.bp-hero-card__odd-value--accent { color: var(--bp-accent); }

.bp-hero-card__pulse {
  padding: 1rem 1rem 0.75rem;
  border-radius: var(--bp-radius-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.bp-hero-card__pulse-bar {
  display: flex;
  height: 0.6rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.bp-hero-card__pulse-fill {
  display: block;
  height: 100%;
}

.bp-hero-card__pulse-fill--primary {
  width: 34%;
  background: linear-gradient(90deg, rgba(var(--bp-primary-rgb), 0.5), rgba(var(--bp-primary-rgb), 0.95));
}

.bp-hero-card__pulse-fill--accent {
  width: 40%;
  background: linear-gradient(90deg, rgba(var(--bp-accent-rgb), 0.45), rgba(var(--bp-accent-rgb), 0.9));
}

.bp-hero-card__pulse-fill--neutral {
  width: 26%;
  background: rgba(var(--bp-white-rgb), 0.12);
}

.bp-hero-card__pulse-labels {
  color: rgba(var(--bp-white-rgb), 0.68);
  letter-spacing: 0.02em;
}


/* Reference preview of the main exchange login. It is deliberately a
   likeness of the real site, so it stays — but on this brand's palette,
   radius and elevation rather than the source template's blue. */


/* Blink paints no caret inside a readonly field, so these are ordinary
   inputs. The icon column used to shift on focus because the field scrolled
   its own text; overflow:hidden on the wrapper above holds it still. */


@media (min-width: 1200px) {
}

@media (max-width: 575.98px) {


}


.bp-trust-bar {
  position: relative;
  border: none;
  padding: var(--section-tight) 0;
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(var(--bp-primary-rgb), 0.06) 0%, transparent 70%);
  border-top: 1px solid rgba(var(--bp-primary-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--bp-primary-rgb), 0.1);
}

.bp-trust-bar.bp-section--light {
  padding: var(--section-tight) 0;
  background: linear-gradient(180deg, var(--bp-surface-plain) 0%, var(--bp-surface-soft) 100%);
  border-top: none;
  border-bottom: 1px solid rgba(var(--bp-primary-rgb), 0.09);
}

.bp-trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: stretch;
}

@media (max-width: 991.98px) {
  .bp-trust-bar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

@media (max-width: 479.98px) {
  .bp-trust-bar__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

.bp-trust-bar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  padding: 0.875rem 1.25rem;
  border-radius: var(--bp-radius);
  transition:
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/* Hairline separator drawn as a pseudo-element so wrapped rows never
   end with a dangling rule. */
.bp-trust-bar__item + .bp-trust-bar__item::before {
  content: '';
  position: absolute;
  left: -0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 2.25rem;
  background: rgba(var(--bp-primary-rgb), 0.16);
}

@media (max-width: 991.98px) {
  .bp-trust-bar__item + .bp-trust-bar__item::before {
    display: none;
  }
}

.bp-trust-bar__item:hover {
  background: rgba(var(--bp-primary-rgb), 0.05);
}

.bp-trust-bar__item:hover .bp-trust-bar__icon-wrap {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(var(--tb-rgb), 0.34),
    inset 0 1px 0 rgba(var(--bp-white-rgb), 0.5),
    0 8px 18px -7px rgba(var(--tb-rgb), 0.6);
}

.bp-trust-bar__item:hover .bp-trust-bar__icon-wrap::after {
  opacity: 1;
}

/* Each item carries its own hue via --tb-rgb (tints, ring, glow) and
   --tb-ink (the glyph itself, darkened for contrast on the light band). */
.bp-trust-bar__icon-wrap {
  --tb-rgb: var(--bp-primary-rgb);
  --tb-ink: #2f7d55;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1875rem;
  flex-shrink: 0;
  color: var(--tb-ink);
  background:
    linear-gradient(145deg,
      rgba(var(--tb-rgb), 0.2) 0%,
      rgba(var(--tb-rgb), 0.07) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--tb-rgb), 0.22),
    inset 0 1px 0 rgba(var(--bp-white-rgb), 0.45),
    0 5px 12px -8px rgba(var(--tb-rgb), 0.55);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

/* Soft top-left sheen so the tile reads as a lit surface, not a flat swatch. */
.bp-trust-bar__icon-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(70% 70% at 28% 18%, rgba(var(--bp-white-rgb), 0.5) 0%, transparent 70%);
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}

.bp-trust-bar__icon-wrap > i {
  position: relative;
  z-index: 1;
}

/* These four tiles used to be four different hues (green, gold, blue, green).
   The four stats are not a category set or a sequence, so the colour carried
   no information and only fragmented the band. They now share one tile
   colour; the icons alone tell them apart.

   The modifier classes are kept because the markup and the stored
   content-editor values reference them. */
.bp-trust-bar__icon-wrap--primary,
.bp-trust-bar__icon-wrap--accent,
.bp-trust-bar__icon-wrap--exchange,
.bp-trust-bar__icon-wrap--success {
  --tb-rgb: var(--bp-primary-rgb);
  --tb-ink: var(--action-on-light);
}

.bp-trust-bar__stat {
  font-size: clamp(0.9375rem, 0.78rem + 0.5vw, 1.1875rem);
  font-weight: var(--fw-bold);
  font-family: var(--bp-font-heading);
  line-height: 1.2;
  margin-bottom: 0.125rem;
  overflow-wrap: anywhere;
}

/* Same reasoning: one colour for the numbers, on dark surfaces. */
.bp-trust-bar__stat--primary,
.bp-trust-bar__stat--accent,
.bp-trust-bar__stat--exchange,
.bp-trust-bar__stat--success {
  color: var(--action);
}

/* On the light band the bright dark-theme greens wash out, so the number
   goes to ink and colour is carried by the icon tile alone. */
.bp-section--light .bp-trust-bar__stat {
  color: var(--bp-ink);
  letter-spacing: -0.01em;
}

.bp-trust-bar__label {
  font-size: 0.75rem;
  color: var(--bp-muted);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

.bp-section--light .bp-trust-bar__label {
  color: var(--bp-muted-ink);
}


.bp-home .bp-hero {
  align-items: center;
}

.bp-home .bp-hero .row {
  min-height: 100%;
}

.bp-home .bp-hero .bp-kicker {
  background: rgba(var(--bp-white-rgb), 0.07);
  border-color: rgba(var(--bp-white-rgb), 0.12);
  color: rgba(var(--bp-white-rgb), 0.9);
  box-shadow: inset 0 1px 0 rgba(var(--bp-white-rgb), 0.06);
}

.bp-home .bp-hero__headline {
  max-width: 46rem;
}

.bp-home .bp-hero__sub,
.bp-home .bp-hero__body {
  max-width: 38rem;
}

.bp-home .bp-hero__stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 41rem;
}

.bp-home .bp-hero__stats > div {
  display: flex;
  min-height: 6rem;
  flex-direction: column;
  justify-content: center;
}

.bp-home .bp-hero-card-wrap {
  transform: translateZ(0);
}

.bp-home .bp-hero-card {
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(var(--bp-white-rgb), 0.05);
}

.bp-hero-card > * {
  position: relative;
  z-index: 1;
}

.bp-hero-card__odd:hover {
  transform: translateY(-2px);
}

.bp-hero-card__odd--primary:hover {
  background: rgba(var(--bp-primary-rgb), 0.14);
  border-color: rgba(var(--bp-primary-rgb), 0.32);
}

.bp-hero-card__odd--accent:hover {
  background: rgba(var(--bp-accent-rgb), 0.12);
  border-color: rgba(var(--bp-accent-rgb), 0.28);
}

.bp-home .bp-hero .bp-btn {
  box-shadow: var(--elev-0);
}

.bp-home .bp-hero .bp-btn:focus-visible,
.bp-trust-bar a:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
}

.bp-section--light .bp-trust-bar__item {
  min-height: 4.5rem;
}

.bp-section--light .bp-trust-bar__icon-wrap {
  box-shadow: inset 0 1px 0 rgba(var(--bp-white-rgb), 0.72);
}

@media (max-width: 991.98px) {
  .bp-home .bp-hero {
    padding-top: 2rem;
  }

  .bp-home .bp-hero__headline,
  .bp-home .bp-hero__sub,
  .bp-home .bp-hero__body {
    max-width: none;
  }

  .bp-home .bp-hero__stats {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .bp-home .bp-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .bp-home .bp-hero__stats > div {
    min-height: 5.25rem;
  }

  .bp-trust-bar__item {
    padding: 0.75rem 0.875rem;
  }
}

@media (max-width: 575.98px) {
  .bp-home .bp-hero .bp-btn {
    width: 100%;
  }

  .bp-home .bp-hero-card {
    padding: 1rem;
  }

  .bp-trust-bar.bp-section--light {
    padding: 2rem 0;
  }

  .bp-trust-bar__grid {
    gap: 0.6rem;
  }

  .bp-section--light .bp-trust-bar__item {
    min-height: 4.25rem;
  }

  .bp-trust-bar__label {
    white-space: normal;
    line-height: 1.25;
  }
}


.home .bp-navbar {
  background: transparent;
  border-bottom-color: rgba(var(--bp-white-rgb), 0.1);
}

/* One wash, not four. This is the single hero background declaration. */
.bp-home .bp-hero {
  background:
    radial-gradient(ellipse 70% 90% at 10% 45%, rgba(var(--bp-primary-rgb), 0.38) 0%, transparent 62%),
    #081409;
  color: var(--bp-foreground);
}

.bp-home .bp-hero::before {
  opacity: 0.16;
  filter: brightness(1.55) contrast(1.08);
}

.bp-home .bp-hero::after {
  background: linear-gradient(180deg, transparent 55%, rgba(5, 10, 7, 0.22) 100%);
}

.bp-home .bp-hero__headline {
  color: var(--bp-foreground);
  text-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.bp-home .bp-hero__sub {
  color: rgba(var(--bp-white-rgb), 0.88);
}

.bp-home .bp-hero__body {
  color: rgba(var(--bp-white-rgb), 0.72);
}

.bp-home .bp-hero__stats {
  border-top-color: rgba(var(--bp-white-rgb), 0.12);
}

.bp-home .bp-hero__stats > div {
  background: rgba(var(--bp-white-rgb), 0.065);
  border-color: rgba(var(--bp-white-rgb), 0.1);
  backdrop-filter: blur(10px);
}

.bp-home .bp-hero__stats > div:nth-child(odd) {
  background: linear-gradient(180deg, rgba(var(--bp-primary-rgb), 0.18) 0%, rgba(var(--bp-white-rgb), 0.045) 100%);
}

.bp-home .bp-hero__stats > div:nth-child(even) {
  background: linear-gradient(180deg, rgba(var(--bp-accent-rgb), 0.15) 0%, rgba(var(--bp-white-rgb), 0.045) 100%);
}

.bp-home .bp-hero__stat-label,
.bp-home .bp-hero .text-muted,
.bp-home .bp-hero .small {
  color: rgba(var(--bp-white-rgb), 0.68);
}

.bp-home .bp-hero .bp-btn--outline {
  background: rgba(var(--bp-white-rgb), 0.06);
  border-color: rgba(var(--bp-white-rgb), 0.18);
  color: rgba(var(--bp-white-rgb), 0.9);
}

.bp-home .bp-hero .bp-btn--outline:hover {
  background: rgba(var(--bp-white-rgb), 0.11);
  border-color: rgba(var(--bp-white-rgb), 0.26);
  color: var(--bp-white);
}

.bp-home .bp-hero-card-wrap {
  border-color: rgba(var(--bp-primary-rgb), 0.38);
  box-shadow: var(--elev-2);
}

.bp-home .bp-hero-card {
  background: rgba(15, 29, 20, 0.96);
  color: var(--bp-foreground);
}

.bp-home .bp-hero-card h3,
.bp-home .bp-hero-card .h4 {
  color: var(--bp-foreground);
}

.bp-home .bp-hero-card__meta-pill--soft {
  background: rgba(var(--bp-accent-rgb), 0.15);
  border-color: rgba(var(--bp-accent-rgb), 0.26);
  color: #fde68a;
}

@media (max-width: 991.98px) {
  .bp-home .bp-hero {
    min-height: auto;
  }
}

/* Supporting proof under the CTA — the facts that used to sit in a second
   lead paragraph above the button, where they delayed the action. */
.bp-hero__proof {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(var(--bp-white-rgb), 0.6);
  max-width: 34rem;
}

/* ============================================================
   Hero — tighter composition under the light header.
   ============================================================ */
.bp-home .bp-hero {
  padding: var(--section-base) 0 var(--section-base);
}

.bp-hero__headline {
  font-size: var(--fs-display);
  letter-spacing: -0.025em;
  line-height: 1.02;
}

/* The kicker becomes a quiet eyebrow rule instead of another pill — the page
   already has enough pills, and the hero should open with type, not chrome. */
.bp-home .bp-hero .bp-kicker {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--bp-white-rgb), 0.72);
  box-shadow: none;
}

.bp-home .bp-hero .bp-kicker__dot {
  display: none;
}

/* Proof line gets a hairline above it so it reads as evidence attached to the
   button rather than a stray third paragraph. */
.bp-hero__proof {
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(var(--bp-white-rgb), 0.1);
  max-width: 34rem;
}

/* ============================================================
   Hero background — an order-book motif rather than a generic
   hex-tech pattern. A betting exchange is a market, so the ground
   is built from faint price-ladder rules and a depth glow: specific
   to this product, and invisible enough to stay a background.
   ============================================================ */
.bp-home .bp-hero {
  background:
    /* ladder rules — the price grid, fading out to the left */
    repeating-linear-gradient(
      180deg,
      rgba(var(--bp-exchange-rgb), 0.05) 0px,
      rgba(var(--bp-exchange-rgb), 0.05) 1px,
      transparent 1px,
      transparent 34px
    ),
    /* depth glow behind the exchange preview */
    radial-gradient(
      ellipse 46% 70% at 82% 42%,
      rgba(var(--bp-exchange-rgb), 0.13) 0%,
      transparent 66%
    ),
    /* brand light from the copy side */
    radial-gradient(
      ellipse 72% 92% at 6% 44%,
      rgba(var(--bp-primary-rgb), 0.34) 0%,
      transparent 62%
    ),
    #070c09;
}

/* Fade the ladder so it never reads as a table — strongest under the
   preview card, gone by the time it reaches the headline. */
.bp-home .bp-hero::before {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(var(--bp-white-rgb), 0.035) 0px,
      rgba(var(--bp-white-rgb), 0.035) 1px,
      transparent 1px,
      transparent 96px
    );
  opacity: 1;
  filter: none;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.9) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.9) 100%);
}

/* Bottom fade into the light section that follows. */
.bp-home .bp-hero::after {
  background: linear-gradient(180deg, transparent 62%, rgba(4, 8, 6, 0.55) 100%);
}


.bp-hero__inner {
  max-width: 44rem;
}

.bp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* The proof line sat under a divider borrowed from the two-column layout. */
.bp-hero__proof {
  max-width: 34rem;
}




.bp-stat-card {
  background: rgba(15, 23, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--bp-radius-2xl);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 8.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bp-stat-card:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.25);
  box-shadow: var(--elev-1);
}

.bp-stat-card__value {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--fw-bold);
  margin-bottom: 0.375rem;
}

.bp-stat-card__label {
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: var(--bp-muted-ink);
  text-transform: none;
  letter-spacing: 0;
}


.bp-step-card {
  position: relative;
  padding: 2rem;
}

.bp-step-card__bg-num {
  position: absolute;
  bottom: -0.5rem;
  right: 0.5rem;
  font-size: 4.25rem;
  font-weight: var(--fw-black);
  font-family: var(--bp-font-heading);
  line-height: 1;
  color: rgba(var(--bp-primary-rgb), 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.bp-step-card > *:not(.bp-step-card__bg-num) {
  position: relative;
  z-index: 1;
}

.bp-section--light .bp-step-card__bg-num {
  color: rgba(var(--bp-primary-rgb), 0.08);
}

.bp-step-card__step-label {
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--bp-primary);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(var(--bp-primary-rgb), 0.08);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.12);
}

/* Icons sit inline at brand green. The tinted rounded-square containers were
   decorative, and their alternating amber/grey tint encoded nothing. */
.bp-step-card__icon {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-4);
  font-size: 1.5rem;
  color: var(--bp-primary);
}

.bp-step-card__icon--primary,
.bp-step-card__icon--accent {
  color: var(--bp-primary);
}

.bp-steps-connector {
  display: none;
}

@media (min-width: 768px) {
  .bp-steps-connector {
    display: block;
    position: absolute;
    top: 50%;
    left: 16.5%;
    right: 16.5%;
    height: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    transform: translateY(-1.5rem);
    pointer-events: none;
  }

  .bp-section--light .bp-steps-connector {
    border-top-color: rgba(var(--bp-primary-rgb), 0.2);
  }
}


.bp-feature-card {
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
}

.bp-feature-card__icon {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-3);
  font-size: 1.25rem;
  color: var(--bp-primary);
}


.bp-comparison-section__inner {
  max-width: var(--container);
}

.bp-comparison {
  position: relative;
}

.bp-comparison__table {
  overflow: hidden;
}

.bp-comparison__head,
.bp-comparison__row {
  border-bottom-color: rgba(var(--bp-primary-rgb), 0.12);
}

.bp-comparison__head {
  font-size: 1rem;
  background: linear-gradient(110deg, #0e2a19 0%, #14532d 55%, #0e2a19 100%);
  border-bottom: none;
}

.bp-comparison-section .bp-comparison__head .bp-text-muted {
  color: rgba(255, 255, 255, 0.72);
}

.bp-comparison__header-betpro {
  background: rgba(var(--bp-accent-rgb), 0.1);
  border-left: 1px solid rgba(var(--bp-accent-rgb), 0.25);
  border-right: 1px solid rgba(var(--bp-accent-rgb), 0.25);
  border-top: 3px solid var(--bp-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.bp-comparison__winner-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--bp-accent);
  color: var(--bp-on-accent);
}

.bp-comparison__cell-betpro {
  background: rgba(var(--bp-primary-rgb), 0.06);
  border-left: 1px solid rgba(var(--bp-primary-rgb), 0.14);
  border-right: 1px solid rgba(var(--bp-primary-rgb), 0.14);
  color: var(--bp-primary-dark, var(--bp-primary));
  font-weight: var(--fw-semibold);
  font-size: 1rem;
}

.bp-comparison__row > div:first-child {
  font-size: 1rem;
}

.bp-comparison__row:nth-child(odd) {
  background: rgba(var(--bp-primary-rgb), 0.025);
}

.bp-comparison__brand {
  color: #fff;
  font-size: 1.05rem;
}

.bp-comparison__table > .row:last-child {
  border-bottom: none;
}

.bp-check-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-check-icon--yes {
  background: rgba(var(--bp-primary-rgb), 0.2);
  color: var(--bp-primary);
}

.bp-check-icon--no {
  background: rgba(239, 68, 68, 0.15);
  color: var(--bp-destructive);
}

.bp-check-icon--muted {
  background: rgba(var(--bp-black-rgb), 0.05);
  color: var(--bp-muted-ink);
}


.bp-testimonials-section {
  position: relative;
}

.bp-testimonial {
  min-height: 100%;
  background: var(--bp-surface-plain);
  border: 1px solid var(--bp-border-light);
  box-shadow: var(--elev-0);
  padding: var(--sp-5);
  position: relative;
}

.bp-testimonial__name {
  color: var(--bp-ink);
}

.bp-testimonial__role {
  color: var(--bp-muted-ink);
}

.bp-testimonial__text {
  color: var(--bp-muted-ink-strong);
}

.bp-testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.75rem;
  right: 1.5rem;
  font-size: 5rem;
  line-height: 1;
  color: rgba(var(--bp-primary-rgb), 0.12);
  font-family: Georgia, 'Times New Roman', serif;
  pointer-events: none;
  user-select: none;
}

.bp-testimonial__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: 0.875rem;
}

.bp-testimonial__avatar--primary {
  border: 1px solid rgba(var(--bp-primary-rgb), 0.4);
  background: rgba(var(--bp-primary-rgb), 0.15);
  color: var(--bp-primary);
}

.bp-testimonial__avatar--accent {
  border: 1px solid rgba(var(--bp-accent-rgb), 0.4);
  background: rgba(var(--bp-accent-rgb), 0.15);
  color: var(--bp-accent);
}

.bp-star {
  color: var(--bp-accent);
}



.bp-home .bp-stat-card,
.bp-home .bp-step-card,
.bp-home .bp-feature-card,
.bp-home .bp-testimonial {
  border-radius: var(--r-md);
  background: var(--bp-surface-plain);
  border-color: var(--bp-border-light);
  box-shadow: var(--elev-0);
  transition: border-color var(--dur-fast) var(--ease);
}

.bp-home .bp-stat-card:hover,
.bp-home .bp-step-card:hover,
.bp-home .bp-feature-card:hover,
.bp-home .bp-testimonial:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.35);
}

.bp-step-card,
.bp-feature-card {
  min-height: 100%;
}



.bp-feature-card h3,
.bp-step-card h3 {
  color: var(--bp-ink);
  line-height: 1.25;
}

@media (max-width: 767.98px) {
  .bp-step-card,
  .bp-feature-card,
  .bp-testimonial {
    padding: 1.35rem;
  }

  .bp-step-card__bg-num {
    font-size: 4.5rem;
  }

  .bp-testimonials-section::before,
  .bp-testimonials-section::after {
    width: 3rem;
  }
}


/* ============================================================
   Comparison — lighter. The heavy dark-gradient header and the
   boxed table read as a data dump; this is a four-line argument,
   so it is set as rows with one emphasised column.
   ============================================================ */
.bp-comparison__table {
  background: transparent;
  border: 0;
  box-shadow: var(--elev-0);
}

.bp-comparison__head {
  background: transparent;
  border-bottom: 2px solid var(--bp-ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-muted-ink);
}

.bp-comparison-section .bp-comparison__head .bp-text-muted {
  color: var(--bp-muted-ink);
}

.bp-comparison__row {
  border-bottom: 1px solid var(--bp-border-light);
}

/* the one column that carries the argument */
.bp-comparison__header-betpro {
  background: transparent;
  border: 0;
  border-top: 0;
  color: var(--bp-ink);
}

.bp-comparison__cell-betpro {
  background: rgba(var(--bp-primary-rgb), 0.05);
  font-weight: var(--fw-bold);
  color: var(--bp-ink);
}

.bp-comparison__brand {
  color: var(--bp-primary);
}

.bp-comparison__winner-badge {
  display: none;
}

/* yes/no marks: the exchange blue for "we have it", quiet grey for "they don't" */
.bp-check-icon--yes {
  background: transparent;
  color: var(--bp-primary);
}

.bp-check-icon--no {
  background: transparent;
  color: rgba(var(--bp-muted-ink-strong), 0.4);
  opacity: 0.5;
}


/* Icon sits beside the heading rather than stacked above it, so the card
   opens with one line instead of three stacked blocks. */
.bp-feature-card__head,
.bp-step-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.bp-feature-card__head .bp-feature-card__icon,
.bp-step-card__head .bp-step-card__icon {
  margin-bottom: 0;
}

/* ============================================================
   Comparison — the recommended column as a real column.
   The emphasis was previously a 5% tint on each BetPro cell with
   no edges, which is invisible in practice, and the "Recommended"
   chip was display:none, so nothing told the reader which side the
   table was arguing for. The column now reads as one continuous
   banded block with a capped top, and the chip is back.
   ============================================================ */

.bp-comparison__table {
  /* the banded column runs to the card edge, so clip it to the radius */
  overflow: hidden;
  border-radius: var(--r-md);
}

/* One continuous band down the recommended column.
   align-self:stretch matters: the rows use align-items:center, so without it
   the cell only takes its content height and the band breaks into detached
   segments wherever a feature label wraps to two lines — which is every row
   on a phone. */
.bp-comparison__header-betpro,
.bp-comparison__cell-betpro {
  background: var(--g-050);
  border-left: 1px solid rgba(var(--bp-primary-rgb), 0.16);
  border-right: 1px solid rgba(var(--bp-primary-rgb), 0.16);
  align-self: stretch;
  align-items: center;
}

/* Cap the top of the band so it reads as deliberate, not as a stray tint. */
.bp-comparison__header-betpro {
  border-top: 3px solid var(--bp-primary);
}

.bp-comparison__cell-betpro {
  font-weight: var(--fw-bold);
  color: var(--bp-ink);
}

/* Close the band at the bottom. */
.bp-comparison__table > .row:last-child .bp-comparison__cell-betpro {
  border-bottom: 1px solid rgba(var(--bp-primary-rgb), 0.16);
}

/* The winner signal. Sentence case: the column header above it is already
   set in uppercase, and two levels of caps in one cell reads as shouting. */
.bp-comparison__winner-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--bp-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}

/* Yes/no should be scannable at a glance rather than two soft grey discs. */
.bp-check-icon--yes {
  background: var(--bp-primary);
  color: #fff;
}

.bp-check-icon--no,
.bp-check-icon--muted {
  background: transparent;
  color: var(--bp-muted-ink);
  opacity: 0.55;
}




.bp-cricket-section .bp-section-title {
  color: var(--bp-ink);
}

.bp-cricket-section .bp-section-subtitle,
.bp-cricket-section .bp-text-muted,
.bp-cricket-section .text-muted {
  color: var(--bp-muted-ink);
}

.bp-cricket-tabs {
  display: inline-flex;
  background: var(--bp-card);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  padding: 0.25rem;
  box-shadow: var(--elev-1);
}

.bp-cricket-tab {
  padding: 0.625rem 1.5rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--bp-muted);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.2s;
}

.bp-cricket-tab.is-active {
  background: var(--bp-primary);
  color: var(--bp-white);
  box-shadow: var(--elev-1);
}

.bp-cricket-tab:hover:not(.is-active) {
  color: var(--bp-foreground);
}

.bp-cricket-section.bp-section--light .bp-cricket-tabs {
  background: var(--bp-surface-plain);
  border-color: rgba(var(--bp-primary-rgb), 0.12);
  box-shadow: var(--elev-1);
}

.bp-cricket-section.bp-section--light .bp-cricket-tab {
  color: var(--bp-muted-ink);
}

.bp-cricket-section.bp-section--light .bp-cricket-tab.is-active {
  background: var(--bp-white);
  color: var(--bp-ink);
  box-shadow: var(--elev-1);
}

.bp-cricket-section.bp-section--light .bp-cricket-tab:hover:not(.is-active) {
  background: rgba(var(--bp-white-rgb), 0.95);
  color: var(--bp-ink);
  box-shadow: var(--elev-1);
}

.bp-match-card {
  padding: 1.25rem 1.5rem;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.bp-cricket-section.bp-section--light .bp-match-card {
  background: var(--bp-surface-plain);
  border-color: rgba(var(--bp-primary-rgb), 0.12);
  border-left-color: rgba(var(--bp-primary-rgb), 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--elev-1);
}

.bp-match-card__vs {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(var(--bp-white-rgb), 0.06);
  border: 1px solid rgba(var(--bp-white-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bp-muted);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.bp-match-card__team {
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  font-weight: var(--fw-bold);
}


.bp-match-card__team-side {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}


.bp-match-card__team-side--a {
  justify-content: flex-end;
  text-align: right;
}


.bp-match-card__team-side:not(.bp-match-card__team-side--a) {
  justify-content: flex-start;
  text-align: left;
}

.bp-match-card__team-side .bp-match-card__team {
  min-width: 0;
}

.bp-match-card__logo {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--bp-white-rgb), 0.06);
  border: 1px solid rgba(var(--bp-white-rgb), 0.12);
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bp-match-card__logo img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.bp-cricket-section.bp-section--light .bp-match-card__logo {
  background: rgba(var(--bp-primary-rgb), 0.06);
  border-color: rgba(var(--bp-primary-rgb), 0.14);
}

.bp-cricket-section.bp-section--light .bp-match-card__vs {
  background: rgba(var(--bp-primary-rgb), 0.08);
  border-color: rgba(var(--bp-primary-rgb), 0.12);
  color: var(--bp-muted-ink);
}

.bp-cricket-section.bp-section--light .bp-match-card__format-badge {
  background: rgba(var(--bp-primary-rgb), 0.08);
  border-color: rgba(var(--bp-primary-rgb), 0.14);
}

.bp-cricket-section.bp-section--light .bp-match-card__team {
  color: var(--bp-ink);
}

.bp-odd-btn {
  flex: 1;
  min-height: 3.5rem;
  border-radius: var(--bp-radius-xl);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.bp-odd-btn--primary {
  background: rgba(var(--bp-primary-rgb), 0.12);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--bp-primary);
}

.bp-odd-btn--accent {
  background: rgba(var(--bp-accent-rgb), 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--bp-accent);
}

.bp-cricket-section.bp-section--light .bp-odd-btn--primary {
  background: rgba(var(--bp-primary-rgb), 0.12);
  border-color: rgba(var(--bp-primary-rgb), 0.14);
}

.bp-cricket-section.bp-section--light .bp-odd-btn--accent {
  background: rgba(var(--bp-accent-rgb), 0.08);
  border-color: rgba(var(--bp-accent-rgb), 0.14);
}


.bp-faq-section__inner {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.bp-faq-item {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
}

.bp-faq-item.is-open {
  background: var(--bp-card);
  border-color: rgba(var(--bp-primary-rgb), 0.28);
  box-shadow: var(--elev-1);
}

.bp-faq-item__toggle {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  outline: none;
  box-shadow: var(--elev-0);
}

.bp-faq-item__toggle:focus,
.bp-faq-item__toggle:focus-visible {
  outline: none;
  box-shadow: var(--elev-0);
}

.bp-faq-item.is-open .bp-faq-item__chevron {
  background: rgba(var(--bp-primary-rgb), 0.15);
  color: var(--bp-primary);
  transform: rotate(180deg);
}

.bp-faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.bp-faq-item.is-open .bp-faq-item__panel {
  grid-template-rows: 1fr;
}

.bp-faq-item__chevron {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
  flex-shrink: 0;
}

.bp-faq-item__answer {
  overflow: hidden;
  padding: 0 1.5rem;
  color: var(--bp-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.bp-faq-item.is-open .bp-faq-item__answer {
  padding-bottom: 1.5rem;
}

/* ============================================================
   FAQ toggle — a drawn plus that rotates into a minus. No glyph,
   no circular container, and it animates the state change instead
   of just flipping a chevron.
   ============================================================ */
.bp-faq-item__chevron {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background: none;
  border: 0;
  border-radius: 0;
  transform: none;
  transition: transform var(--dur-slow) var(--ease);
}

.bp-faq-item__chevron::before,
.bp-faq-item__chevron::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--bp-primary);
  border-radius: 1px;
  transition:
    transform var(--dur-slow) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.bp-faq-item__chevron::before {
  width: 1rem;
  height: 2px;
  transform: translate(-50%, -50%);
}

.bp-faq-item__chevron::after {
  width: 2px;
  height: 1rem;
  transform: translate(-50%, -50%);
}

.bp-faq-item.is-open .bp-faq-item__chevron {
  background: none;
  transform: rotate(90deg);
}

/* the vertical stroke folds away, leaving a minus */
.bp-faq-item.is-open .bp-faq-item__chevron::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

.bp-faq-item__toggle:hover .bp-faq-item__chevron::before,
.bp-faq-item__toggle:hover .bp-faq-item__chevron::after {
  background: var(--bp-accent);
}




.bp-blog-card {
  border-radius: var(--bp-radius-2xl);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.bp-blog-card:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.32);
  box-shadow: var(--elev-2);
}

.bp-section--light .bp-blog-card:hover {
  box-shadow: var(--elev-2);
}

.bp-blog-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.bp-blog-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.bp-blog-card:hover .bp-blog-card__img-wrap img {
  transform: scale(1.05);
}

.bp-blog-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: background 0.3s;
}

.bp-blog-card:hover .bp-blog-card__overlay {
  background: transparent;
}


.bp-payments {
  padding: var(--section-tight) 0;
  border: none;
  background: transparent;
}

.bp-payments.bp-section--light {
  background: var(--bp-surface-soft);
  padding: var(--section-tight) 0;
  border-top: 1px solid rgba(var(--bp-primary-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--bp-primary-rgb), 0.08);
}

.bp-payments__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  background: var(--bp-surface-plain);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.14);
  box-shadow: var(--elev-1);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bp-payments__item i {
  font-size: 1.2rem;
  color: var(--bp-primary);
}

.bp-payments__item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bp-accent-rgb), 0.35);
  box-shadow: var(--elev-1);
}


.bp-match-card__format-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(var(--bp-primary-rgb), 0.12);
  border: 1px solid rgba(var(--bp-primary-rgb), 0.25);
  color: var(--bp-primary);
}

.bp-match-card__format-badge--accent {
  background: rgba(var(--bp-accent-rgb), 0.10);
  border-color: rgba(var(--bp-accent-rgb), 0.25);
  color: var(--bp-accent);
}

.bp-match-card__teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bp-sport-panel {
  display: none;
}

.bp-sport-panel.is-active {
  display: block;
}

.bp-home .bp-blog-card {
  border-radius: var(--r-md);
  border-color: var(--bp-border-light);
  box-shadow: var(--elev-0);
}

.bp-home .bp-blog-card:hover {
  border-color: rgba(var(--bp-primary-rgb), 0.35);
}

.bp-home .bp-blog-card a:focus-visible,
.bp-sports-tab:focus-visible,
.bp-faq-item__toggle:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
}

.bp-sports-section.bp-section--light {
  background:
    radial-gradient(ellipse 70% 80% at 95% 18%, rgba(var(--bp-primary-rgb), 0.045) 0%, transparent 58%),
    radial-gradient(ellipse 55% 60% at 5% 84%, rgba(var(--bp-accent-rgb), 0.035) 0%, transparent 55%),
    var(--bp-surface-soft);
}


.bp-section--light .bp-faq-item {
  border-color: rgba(var(--bp-primary-rgb), 0.12);
  background: var(--bp-surface-plain);
}

.bp-section--light .bp-faq-item.is-open {
  background: var(--bp-surface-plain);
  border-color: rgba(var(--bp-primary-rgb), 0.28);
}

.bp-section--light .bp-faq-item__toggle {
  color: var(--bp-ink);
  outline: none;
  box-shadow: var(--elev-0);
}

.bp-section--light .bp-faq-item__toggle:focus,
.bp-section--light .bp-faq-item__toggle:focus-visible {
  outline: none;
  box-shadow: var(--elev-0);
}

.bp-section--light .bp-faq-item__chevron {
  background: none;
  color: var(--bp-ink);
}

.bp-section--light .bp-faq-item.is-open .bp-faq-item__chevron {
  background: none;
  color: var(--bp-primary);
}

.bp-section--light .bp-faq-item__answer {
  color: var(--bp-muted-ink);
}

.bp-home .bp-faq-item__toggle:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 3px;
  box-shadow: var(--elev-0);
}

.home .bp-pre-footer-cta {
  padding: var(--section-base) 0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 100%, rgba(var(--bp-primary-rgb), 0.18) 0%, transparent 62%),
    var(--bp-ink);
}

.home .bp-pre-footer-cta .bp-kicker {
  background: rgba(var(--bp-white-rgb), 0.07);
  border-color: rgba(var(--bp-white-rgb), 0.12);
  color: rgba(var(--bp-white-rgb), 0.88);
}


.bp-schedule-filter {
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  border: 1px solid var(--bp-border);
  background: var(--bp-card);
  color: var(--bp-muted);
  transition: all 0.2s;
}

.bp-schedule-filter.is-active,
.bp-schedule-filter:hover {
  background: var(--bp-primary);
  color: var(--bp-white);
  border-color: var(--bp-primary);
}

.bp-section--light .bp-schedule-filter {
  background: var(--bp-surface-plain);
  border-color: rgba(var(--bp-primary-rgb), 0.15);
  color: var(--bp-muted-ink);
}

.bp-section--light .bp-schedule-filter.is-active,
.bp-section--light .bp-schedule-filter:hover {
  background: var(--bp-primary);
  color: var(--bp-white);
  border-color: var(--bp-primary);
}

.bp-schedule-match {
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--bp-white-rgb), 0.08);
  border-left: 1px solid rgba(var(--bp-white-rgb), 0.08);
}

.bp-schedule-match[hidden],
.bp-schedule-empty[hidden],
.bp-schedule-match[data-bp-schedule-match][hidden],
[data-bp-schedule-group][hidden] {
  display: none;
}

.bp-schedule-match.is-live {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: var(--elev-1);
}

.bp-schedule-match__live-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ef4444;
  color: var(--bp-white);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  padding: 0.25rem 0.75rem;
  border-bottom-left-radius: var(--bp-radius);
  letter-spacing: 0.1em;
  animation: bp-blink 2s ease-in-out infinite;
}

.bp-odd-cell {
  text-align: center;
  padding: 0.5rem;
  border-radius: var(--bp-radius);
  cursor: pointer;
  transition: background 0.2s;
}

.bp-odd-cell--1 {
  background: rgba(var(--bp-primary-rgb), 0.1);
  border: 1px solid rgba(var(--bp-white-rgb), 0.1);
  color: var(--bp-primary);
}

.bp-odd-cell--x {
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  color: var(--bp-muted);
}

.bp-odd-cell--2 {
  background: rgba(var(--bp-accent-rgb), 0.1);
  border: 1px solid rgba(var(--bp-white-rgb), 0.1);
  color: var(--bp-accent);
}

.bp-series-card {
  padding: 1.25rem;
  border: 1px solid rgba(var(--bp-white-rgb), 0.08);
  border-left: 1px solid rgba(var(--bp-white-rgb), 0.08);
}

.bp-section--light .bp-series-card {
  border-color: rgba(var(--bp-primary-rgb), 0.12);
  border-left-color: rgba(var(--bp-primary-rgb), 0.12);
}

.bp-sidebar-cta {
  background: rgba(15, 23, 18, 0.5);
  border: 1px solid rgba(var(--bp-white-rgb), 0.08);
  border-radius: var(--bp-radius-xl);
  padding: 1.5rem;
  text-align: center;
}

.bp-section--light .bp-sidebar-cta {
  background: var(--bp-surface-plain);
  border-color: rgba(var(--bp-primary-rgb), 0.12);
  box-shadow: var(--elev-1);
}

.bp-schedule-empty {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px dashed rgba(var(--bp-primary-rgb), 0.18);
  background: rgba(var(--bp-primary-rgb), 0.04);
}

.bp-hidden-city {
  display: none;
}


.bp-date-bar {
  background: var(--bp-primary);
  border-radius: var(--bp-radius-xl);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-date-bar__label {
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--bp-white);
}

.bp-date-bar__count {
  background: rgba(255, 255, 255, 0.18);
  color: var(--bp-white);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.06em;
}