/* =====================================================================
   BEAR MERCHANT — Design System
   Core PHP + Bootstrap 5.3 override layer
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --bm-primary:   #071B3C;
  --bm-blue:      #1E5EFF;
  --bm-blue-600:  #1749cc;
  --bm-gold:      #D9A441;
  --bm-bg:        #FFFFFF;
  --bm-light:     #F8FAFC;
  --bm-dark:      #101828;

  /* Derived */
  --bm-ink:       #101828;
  --bm-muted:     #5a6b85;
  --bm-border:    #e6ebf2;
  --bm-card:      #ffffff;
  --bm-surface:   #f8fafc;
  --bm-navy-soft: #12315f;

  /* Gradients */
  --bm-grad-hero:  radial-gradient(1200px 600px at 80% -10%, rgba(30,94,255,.18), transparent 60%),
                   radial-gradient(900px 500px at 0% 10%, rgba(217,164,65,.10), transparent 55%);
  --bm-grad-blue:  linear-gradient(135deg, #1E5EFF 0%, #3f7bff 55%, #6aa0ff 100%);
  --bm-grad-navy:  linear-gradient(160deg, #071B3C 0%, #0d2b57 60%, #12315f 100%);
  --bm-grad-gold:  linear-gradient(135deg, #D9A441 0%, #e7bd6b 100%);
  --bm-grad-cta:   linear-gradient(120deg, #071B3C 0%, #123a7a 45%, #1E5EFF 100%);

  /* Shadows */
  --bm-shadow-sm:  0 2px 8px rgba(7,27,60,.06);
  --bm-shadow:     0 12px 32px rgba(7,27,60,.10);
  --bm-shadow-lg:  0 28px 70px rgba(7,27,60,.18);
  --bm-shadow-blue:0 20px 50px rgba(30,94,255,.28);

  /* Shape */
  --bm-radius:     18px;
  --bm-radius-sm:  12px;
  --bm-radius-lg:  26px;
  --bm-radius-pill: 999px;

  /* Type */
  --bm-font-head: 'Space Grotesk', system-ui, sans-serif;
  --bm-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --bm-nav-h: 90px;
}

/* Dark theme */
[data-bs-theme="dark"] {
  --bm-bg:      #060d1c;
  --bm-light:   #0b1830;
  --bm-ink:     #eaf0fb;
  --bm-muted:   #9fb0cc;
  --bm-border:  #1b2c4d;
  --bm-card:    #0c1a34;
  --bm-surface: #0a152b;
  --bm-grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(30,94,255,.22), transparent 60%),
                  radial-gradient(900px 500px at 0% 10%, rgba(217,164,65,.10), transparent 55%);
}

/* ---------- 2. Base ---------- */
* { scroll-margin-top: calc(var(--bm-nav-h) + 12px); }

html { scroll-behavior: smooth; }

body {
  font-family: var(--bm-font-body);
  color: var(--bm-ink);
  background: var(--bm-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,.bm-wordmark {
  font-family: var(--bm-font-head);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--bm-ink);
}

p { color: var(--bm-muted); line-height: 1.7; }

a { color: var(--bm-blue); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--bm-blue-600); }

.bm-eyebrow {
  font-family: var(--bm-font-head);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--bm-blue);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.bm-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--bm-gold); display: inline-block;
}

.bm-section { padding: clamp(64px, 9vw, 120px) 0; }
.bm-section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.bm-surface { background: var(--bm-surface); }
.bm-navy-bg { background: var(--bm-grad-navy); color: #dbe6fb; }
.bm-navy-bg h1,.bm-navy-bg h2,.bm-navy-bg h3,.bm-navy-bg h4 { color: #fff; }
.bm-navy-bg p { color: #9fb4d8; }

.bm-lead { font-size: 1.12rem; color: var(--bm-muted); max-width: 640px; }
.bm-display {
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height: 1.05;
  font-weight: 700;
}
.bm-h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.12; font-weight: 700; }
.bm-text-gradient {
  background: linear-gradient(100deg, var(--bm-blue), var(--bm-gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 2000;
  background: var(--bm-blue); color:#fff; padding:.5rem 1rem; border-radius: 8px;
}

/* ---------- 3. Buttons ---------- */
.btn-bm-primary, .btn-bm-outline, .btn-bm-gold, .btn-bm-ghost {
  font-family: var(--bm-font-head);
  font-weight: 600;
  font-size: .96rem;
  border-radius: var(--bm-radius-pill);
  padding: .8rem 1.7rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease, color .2s ease;
  line-height: 1;
  white-space: nowrap;
}
.btn-bm-primary {
  background: var(--bm-grad-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(30,94,255,.30);
}
.btn-bm-primary:hover { color:#fff; transform: translateY(-3px); box-shadow: var(--bm-shadow-blue); }

.btn-bm-gold { background: var(--bm-grad-gold); color: var(--bm-primary); box-shadow: 0 10px 24px rgba(217,164,65,.35); }
.btn-bm-gold:hover { color: var(--bm-primary); transform: translateY(-3px); box-shadow: 0 18px 42px rgba(217,164,65,.45); }

.btn-bm-outline { background: transparent; color: var(--bm-ink); border-color: var(--bm-border); }
.btn-bm-outline:hover { color: var(--bm-blue); border-color: var(--bm-blue); transform: translateY(-3px); box-shadow: var(--bm-shadow); }

.btn-bm-ghost { background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.25); }
.btn-bm-ghost:hover { color:#fff; background: rgba(255,255,255,.16); transform: translateY(-3px); }

.btn-bm-lg { padding: 1rem 2.2rem; font-size: 1.02rem; }

/* ---------- 4. Navbar ---------- */
.bm-navbar {
  height: var(--bm-nav-h);
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--bm-border);
  transition: box-shadow .3s ease, background .3s ease;
}
[data-bs-theme="dark"] .bm-navbar { background: rgba(6,13,28,.72); }
.bm-navbar.scrolled { box-shadow: 0 10px 30px rgba(7,27,60,.10); }

.bm-logo { flex: 0 0 auto; }
.bm-wordmark { font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; color: var(--bm-ink); }
.bm-wordmark-accent { color: var(--bm-blue); }
.bm-logo-img { height: 80px; width: auto; display: block; }
[data-bs-theme="dark"] .bm-navbar .bm-logo-img { filter: brightness(0) invert(1); }
.bm-logo-img-footer { height: 104px; filter: brightness(0) invert(1); }
@media (max-width: 575px) { .bm-logo-img { height: 54px; } .bm-logo-img-footer { height: 88px; } }

.bm-navbar .nav-link {
  font-weight: 500;
  color: var(--bm-ink);
  padding: .5rem .9rem;
  border-radius: 10px;
  font-size: .96rem;
  transition: color .2s, background .2s;
}
.bm-navbar .nav-link:hover,
.bm-navbar .nav-link.active { color: var(--bm-blue); }
.bm-navbar .nav-link.active { background: rgba(30,94,255,.08); }

.bm-theme-toggle {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--bm-border);
  background: transparent; color: var(--bm-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; transition: all .25s ease;
}
.bm-theme-toggle:hover { border-color: var(--bm-blue); color: var(--bm-blue); transform: rotate(-12deg); }

/* Dropdowns */
.bm-navbar .dropdown-menu {
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow-lg);
  padding: .6rem;
  margin-top: .6rem;
  background: var(--bm-card);
  animation: bmFadeDown .22s ease;
}
@keyframes bmFadeDown { from { opacity:0; transform: translateY(-6px);} to {opacity:1; transform:none;} }
.bm-mega-menu { min-width: 560px; }
.bm-navbar .dropdown-item {
  border-radius: 10px; padding: .6rem .8rem; color: var(--bm-ink);
  display: flex; align-items: center; gap: .75rem; white-space: normal;
}
.bm-navbar .dropdown-item:hover { background: rgba(30,94,255,.07); color: var(--bm-blue); }
.bm-mega-menu .dropdown-item i { font-size: 1.25rem; color: var(--bm-blue); flex:0 0 auto; }
.bm-mega-menu .dropdown-item span { display:flex; flex-direction:column; line-height:1.25; }
.bm-mega-menu .dropdown-item small { color: var(--bm-muted); font-size:.78rem; }
.bm-mega-menu .dropdown-item strong { font-weight:600; font-size:.92rem; }

/* ---- Industries mega menu -------------------------------------------
   The old Industries menu was a single narrow column, so every two-word
   name wrapped ("Travel & / Hospitality"). This is a three-across card
   grid instead. Thumbnails come from /images/industries/<slug>.jpg. ---- */
.bm-mega-ind { min-width: 720px; }
.bm-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.bm-ind-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .55rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--bm-ink);
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.bm-ind-card:hover {
  background: rgba(30, 94, 255, .07);
  border-color: rgba(30, 94, 255, .18);
  transform: translateY(-2px);
}
.bm-ind-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bm-surface);
}
.bm-ind-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.bm-ind-card:hover .bm-ind-thumb img { transform: scale(1.06); }
.bm-ind-body { display: flex; flex-direction: column; line-height: 1.3; }
.bm-ind-body strong { font-weight: 600; font-size: .9rem; }
.bm-ind-body small { color: var(--bm-muted); font-size: .76rem; margin-top: .1rem; }
.bm-ind-card:hover .bm-ind-body strong { color: var(--bm-blue); }

/* Between the lg breakpoint and ~1200px the desktop navbar is active but a
   720px menu runs off the right edge (measured ~90px over at 992-1024px).
   These menus open on CSS :hover, not Popper, so nothing auto-flips them -
   they go two-across and narrower instead. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .bm-mega-ind { min-width: 500px; }
  .bm-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Under lg the navbar collapses to a stacked panel, where a 3-up grid of
   photos is far too tall - drop the thumbnails and go back to a list. */
@media (max-width: 991.98px) {
  .bm-mega-ind { min-width: auto; }
  .bm-ind-grid { grid-template-columns: 1fr; gap: .15rem; }
  .bm-ind-card { flex-direction: row; align-items: center; gap: .7rem; padding: .5rem .6rem; }
  .bm-ind-card:hover { transform: none; }
  .bm-ind-thumb { display: none; }
}

@media (min-width: 992px) {
  .bm-navbar .dropdown:hover > .dropdown-menu { display: block; }
  /* Invisible bridge: fills the margin-top gap so the mouse can cross
     from the toggle to the menu without losing :hover (menu no longer hides) */
  .bm-navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
  }
}

/* ---------- 5. Hero ---------- */
.bm-hero {
  position: relative;
  padding: calc(var(--bm-nav-h) + 60px) 0 90px;
  background: var(--bm-grad-hero), var(--bm-bg);
  overflow: hidden;
}
.bm-hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(30,94,255,.08); color: var(--bm-blue);
  border: 1px solid rgba(30,94,255,.2);
  padding:.4rem .9rem; border-radius: var(--bm-radius-pill);
  font-size:.82rem; font-weight:600; margin-bottom:1.4rem;
}
.bm-hero-badge .dot { width:8px;height:8px;border-radius:50%;background:var(--bm-gold);box-shadow:0 0 0 4px rgba(217,164,65,.25); }

.bm-trust-strip { border-top:1px solid var(--bm-border); border-bottom:1px solid var(--bm-border); }
.bm-trust-logos { display:flex; flex-wrap:wrap; gap: 2.2rem 3rem; align-items:center; justify-content:center; }
.bm-trust-logos span {
  font-family: var(--bm-font-head); font-weight:600; font-size:1.05rem;
  color: var(--bm-muted); opacity:.6; filter: grayscale(1);
  transition: opacity .3s, filter .3s, color .3s; letter-spacing:-.01em;
}
.bm-trust-logos span:hover { opacity:1; filter:none; color: var(--bm-ink); }

/* ---------- 6. Dashboard mockup (hero) ---------- */
.bm-hero-visual { position: relative; perspective: 1600px; }
.bm-dash {
  background: var(--bm-grad-navy);
  border-radius: var(--bm-radius-lg);
  padding: 18px;
  box-shadow: var(--bm-shadow-lg);
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg);
  transform-style: preserve-3d;
  transition: transform .4s ease;
  border: 1px solid rgba(255,255,255,.08);
}
.bm-hero-visual:hover .bm-dash { transform: rotateY(-7deg) rotateX(3deg); }
.bm-dash-topbar { display:flex; align-items:center; gap:.4rem; padding:.2rem .3rem .8rem; }
.bm-dash-dot { width:10px;height:10px;border-radius:50%; }
.bm-dash-dot.r{background:#ff5f57;} .bm-dash-dot.y{background:#febc2e;} .bm-dash-dot.g{background:#28c840;}
.bm-dash-screen { background: rgba(255,255,255,.04); border-radius: 16px; padding:16px; border:1px solid rgba(255,255,255,.06); }
.bm-dash-row { display:flex; gap:12px; }
.bm-dash-kpi { flex:1; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px; }
.bm-dash-kpi .lbl { color:#8fa6cf; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
.bm-dash-kpi .val { color:#fff; font-family:var(--bm-font-head); font-weight:700; font-size:1.15rem; margin-top:4px; }
.bm-dash-kpi .val small { color:#37d67a; font-size:.62rem; font-weight:600; margin-left:4px; }
.bm-dash-chart { margin-top:14px; background: rgba(255,255,255,.04); border-radius:12px; padding:14px; }
.bm-chart-bars { display:flex; align-items:flex-end; gap:8px; height:120px; }
.bm-chart-bars .bar { flex:1; background: var(--bm-grad-blue); border-radius:6px 6px 0 0; opacity:.85; animation: barGrow 1s ease backwards; }
.bm-chart-bars .bar:nth-child(even){ background: linear-gradient(var(--bm-gold), #f0cf8e); }
@keyframes barGrow { from { height:0 !important; } }

/* Floating cards */
.bm-float-card {
  position:absolute; background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius: 14px; padding:.8rem 1rem; box-shadow: var(--bm-shadow-lg);
  display:flex; align-items:center; gap:.7rem; z-index:3;
}
.bm-float-card .ic { width:38px;height:38px;border-radius:10px; display:grid;place-items:center; color:#fff; font-size:1.1rem; flex:0 0 auto;}
.bm-float-card .t { font-family:var(--bm-font-head); font-weight:700; font-size:.9rem; line-height:1; color:var(--bm-ink);}
.bm-float-card .s { font-size:.72rem; color:var(--bm-muted); }
.bm-float-1 { top: 8%; left:-6%; animation: floaty 6s ease-in-out infinite; }
.bm-float-2 { bottom: 14%; right:-5%; animation: floaty 7s ease-in-out infinite .8s; }
.bm-float-3 { bottom: -4%; left: 12%; animation: floaty 5.5s ease-in-out infinite .4s; }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }

/* ---------- 7. Cards & grids ---------- */
.bm-card {
  background: var(--bm-card);
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius);
  padding: 1.7rem;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bm-card:hover { transform: translateY(-6px); box-shadow: var(--bm-shadow-lg); border-color: rgba(30,94,255,.35); }
.bm-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(30,94,255,.10); color: var(--bm-blue);
  margin-bottom: 1.1rem; transition: all .3s ease;
}
.bm-card:hover .bm-card-icon { background: var(--bm-grad-blue); color:#fff; transform: scale(1.06) rotate(-4deg); }
.bm-card h3 { font-size: 1.14rem; margin-bottom:.5rem; }
.bm-card p { font-size: .93rem; margin-bottom: 0; }
.bm-card-gold .bm-card-icon { background: rgba(217,164,65,.14); color: var(--bm-gold); }
.bm-card-gold:hover .bm-card-icon { background: var(--bm-grad-gold); color: var(--bm-primary); }

.bm-card-link { margin-top: 1rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; font-family:var(--bm-font-head); }
.bm-card-link i { transition: transform .25s ease; }
.bm-card:hover .bm-card-link i { transform: translateX(4px); }

/* Checklist */
.bm-check-list { list-style:none; padding:0; margin:0; }
.bm-check-list li { display:flex; gap:.75rem; align-items:flex-start; padding:.55rem 0; color: var(--bm-ink); font-weight:500; }
.bm-check-list li i { color: var(--bm-blue); font-size:1.2rem; flex:0 0 auto; margin-top:1px; }

/* Stat panel */
.bm-stat-panel { background: var(--bm-grad-navy); border-radius: var(--bm-radius-lg); padding: 2.4rem; color:#fff; box-shadow: var(--bm-shadow-lg); }
.bm-stat { text-align:center; padding:.6rem; }
.bm-stat .num { font-family:var(--bm-font-head); font-weight:700; font-size: clamp(1.9rem,4vw,2.7rem); color:#fff; line-height:1; }
.bm-stat .num .suf { color: var(--bm-gold); }
.bm-stat .lbl { color:#9fb4d8; font-size:.86rem; margin-top:.4rem; }

/* ---------- 8. Steps / How it works ---------- */
.bm-steps { position:relative; }

.bm-step {
  position:relative; z-index:1; height:100%; overflow:hidden;
  display:flex; flex-direction:column;
  padding:1.6rem 1.5rem 1.55rem;
  background: var(--bm-card);
  border:1px solid var(--bm-border);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Accent bar wipes in on hover */
.bm-step::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--bm-grad-blue);
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s ease;
}
.bm-step:hover { transform: translateY(-6px); border-color: rgba(30,94,255,.34); box-shadow: 0 26px 50px -24px rgba(15,35,85,.42); }
.bm-step:hover::before { transform:none; }

/* Oversized watermark numeral */
.bm-step-ghost {
  position:absolute; top:.35rem; right:.9rem; z-index:0; pointer-events:none;
  font-family: var(--bm-font-head); font-weight:700; font-size:4.2rem; line-height:1;
  color: var(--bm-blue); opacity:.07;
}

.bm-step-num {
  position:relative; z-index:1;
  width:52px; height:52px; border-radius:16px; margin:0 0 1.05rem;
  display:grid; place-items:center;
  font-family:var(--bm-font-head); font-weight:700; font-size:1.25rem;
  background: var(--bm-grad-blue); color:#fff;
  box-shadow: 0 10px 22px -10px rgba(30,94,255,.75);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bm-step:hover .bm-step-num { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 30px -10px rgba(30,94,255,.85); }

.bm-step h3 { position:relative; z-index:1; font-size:1.1rem; margin-bottom:.45rem; }
.bm-step p  { position:relative; z-index:1; font-size:.93rem; line-height:1.65; color: var(--bm-muted); margin:0; }

[data-bs-theme="dark"] .bm-step-ghost { opacity:.13; }
[data-bs-theme="dark"] .bm-step:hover { border-color: rgba(30,94,255,.5); box-shadow: 0 26px 50px -24px rgba(0,0,0,.7); }

@media (prefers-reduced-motion: reduce) {
  .bm-step, .bm-step::before, .bm-step-num { transition:none; }
  .bm-step:hover { transform:none; }
  .bm-step:hover .bm-step-num { transform:none; }
}

/* ---------- 9. Industry chips ---------- */
.bm-chip {
  display:flex; align-items:center; gap:.7rem;
  background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius: var(--bm-radius-pill); padding:.7rem 1.15rem;
  font-weight:600; font-size:.9rem; color:var(--bm-ink);
  transition: all .25s ease; font-family:var(--bm-font-head);
}
.bm-chip i { color: var(--bm-blue); font-size:1.15rem; }
.bm-chip:hover { border-color: var(--bm-blue); transform: translateY(-4px); box-shadow: var(--bm-shadow); color: var(--bm-blue); }

/* ---------- 10. Developer / code window ---------- */
.bm-code-window {
  background: #0a1730; border-radius: var(--bm-radius); overflow:hidden;
  box-shadow: var(--bm-shadow-lg); border:1px solid #16305c;
}
.bm-code-head { display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem; background:#0c1c3a; border-bottom:1px solid #16305c; }
.bm-code-head .fn { color:#7f97c4; font-size:.8rem; margin-left:.5rem; font-family: ui-monospace, monospace; }
.bm-code-body { padding: 1.2rem 1.4rem; margin:0; overflow-x:auto; }
.bm-code-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size:.84rem; line-height:1.75; color:#cdd9f0; white-space:pre; }
.tok-key{color:#7aa2ff;} .tok-str{color:#7fe0a8;} .tok-num{color:#f0b36b;} .tok-fn{color:#c792ea;} .tok-com{color:#5c6f92;} .tok-punc{color:#8fa6cf;}

.bm-dev-feature { display:flex; gap:.8rem; align-items:flex-start; }
.bm-dev-feature i { color: var(--bm-gold); font-size:1.3rem; margin-top:2px; }
.bm-dev-feature h4 { color:#fff; font-size:1rem; margin-bottom:.2rem; }
.bm-dev-feature p { color:#9fb4d8; font-size:.87rem; margin:0; }

/* ---------- 11. Dashboard preview (dark panel + tabs) ---------- */
.bm-preview-panel { background: var(--bm-grad-navy); border-radius: var(--bm-radius-lg); padding: clamp(1.4rem,3vw,2.6rem); box-shadow: var(--bm-shadow-lg); border:1px solid rgba(255,255,255,.06); }
.bm-preview-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.bm-preview-tab { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#bcd0f2;
  border-radius: var(--bm-radius-pill); padding:.5rem 1.1rem; font-size:.85rem; font-weight:600; cursor:pointer; transition:all .25s; font-family:var(--bm-font-head); }
.bm-preview-tab.active, .bm-preview-tab:hover { background: var(--bm-grad-blue); color:#fff; border-color:transparent; }
.bm-preview-body { background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius: var(--bm-radius); padding: 1.4rem; }
.bm-preview-pane { display:none; }
.bm-preview-pane.active { display:block; animation: bmFadeDown .3s ease; }

.bm-mini-table { width:100%; font-size:.84rem; border-collapse:collapse; }
.bm-mini-table th { color:#7f97c4; text-align:left; font-weight:600; padding:.5rem .6rem; border-bottom:1px solid rgba(255,255,255,.08); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.bm-mini-table td { color:#dbe6fb; padding:.6rem; border-bottom:1px solid rgba(255,255,255,.05); }
.bm-pill-ok{ background:rgba(55,214,122,.15); color:#37d67a; padding:.15rem .6rem; border-radius:99px; font-size:.72rem; font-weight:600;}
.bm-pill-warn{ background:rgba(240,179,107,.15); color:#f0b36b; padding:.15rem .6rem; border-radius:99px; font-size:.72rem; font-weight:600;}
.bm-pill-info{ background:rgba(30,94,255,.18); color:#7aa2ff; padding:.15rem .6rem; border-radius:99px; font-size:.72rem; font-weight:600;}

.bm-donut { width:120px;height:120px;border-radius:50%;
  background: conic-gradient(var(--bm-blue) 0 72%, var(--bm-gold) 72% 88%, rgba(255,255,255,.12) 88% 100%);
  display:grid; place-items:center; position:relative; }
.bm-donut::after{ content:""; width:78px;height:78px;border-radius:50%; background:#0c2148; }
.bm-donut .cc{ position:absolute; text-align:center; z-index:2;}
.bm-donut .cc b{ color:#fff; font-family:var(--bm-font-head); font-size:1.2rem;}
.bm-donut .cc span{ color:#9fb4d8; font-size:.68rem; }

/* ---------- 12. World map ---------- */
.bm-map-wrap { position:relative; }
.bm-map svg { width:100%; height:auto; }
/* Dotted US-states map (canvas, rendered by hero-worldmap.js) */
.bm-map-wrap { max-width:1000px; margin-inline:auto; }
.bm-worldmap-canvas { display:block; width:100%;
  --map-dot: rgba(30,94,255,.6); --map-line: rgba(30,94,255,.3);
  /* Raised state on hover: side walls, top-face gradient, bright edge */
  --map-3d-side: rgba(13,45,125,.92);
  --map-3d-top-a: #2a6bff;
  --map-3d-top-b: #7aa5ff;
  --map-3d-edge: rgba(255,255,255,.9);
  /* Randomly placed live acceptance pings */
  --map-ping: #1e5eff; --map-ping-gold: #D9A441; --map-ping-halo: #ffffff; }
[data-bs-theme="dark"] .bm-worldmap-canvas { --map-dot: rgba(150,180,255,.55); --map-line: rgba(160,190,255,.32);
  --map-3d-side: rgba(6,22,64,.95);
  --map-3d-top-a: #3f7bff;
  --map-3d-top-b: #8fb2ff;
  --map-3d-edge: rgba(255,255,255,.8);
  --map-ping: #6aa0ff; --map-ping-gold: #e7bd6b; --map-ping-halo: #060d1c; }
.bm-map-wrap.bm-worldmap-off .bm-worldmap-canvas { display:none; }

/* State name that follows the cursor while a state is raised */
.bm-map-tip {
  position:absolute; left:0; top:0; z-index:3; pointer-events:none;
  transform: translate(-50%, calc(-100% - 30px));
  padding:.4rem .8rem; border-radius: var(--bm-radius-pill);
  background: var(--bm-card); border:1px solid var(--bm-border);
  box-shadow: 0 14px 30px -14px rgba(7,27,60,.5);
  font-family: var(--bm-font-head); font-weight:600; font-size:.82rem;
  color: var(--bm-ink); white-space:nowrap;
  opacity:0; transition: opacity .18s ease;
}
.bm-map-tip.is-on { opacity:1; }

.bm-map .dot { fill: var(--bm-blue); }
.bm-map .dot.pulse { fill: var(--bm-gold); transform-box: fill-box; transform-origin:center; animation: mapPulse 2.4s ease-in-out infinite; }
.bm-map .dot.pulse:nth-child(3n){ animation-delay:.6s; } .bm-map .dot.pulse:nth-child(3n+1){ animation-delay:1.2s; }
@keyframes mapPulse { 0%,100%{ opacity:.4; } 50%{ opacity:1; r:4; } }

/* ---------- 13. Testimonials ---------- */
.bm-quote { background: var(--bm-card); border:1px solid var(--bm-border); border-radius: var(--bm-radius); padding: 2rem; height:100%; position:relative; transition: transform .3s, box-shadow .3s; }
.bm-quote:hover { transform: translateY(-6px); box-shadow: var(--bm-shadow-lg); }
.bm-quote .mark { font-family: var(--bm-font-head); font-size:3rem; line-height:.5; color: var(--bm-gold); opacity:.55; }
.bm-quote p { color: var(--bm-ink); font-size:1rem; line-height:1.65; }
.bm-quote .who { display:flex; align-items:center; gap:.8rem; margin-top:1.2rem; }
.bm-avatar { width:44px;height:44px;border-radius:50%; display:grid;place-items:center; font-family:var(--bm-font-head); font-weight:700; color:#fff; background: var(--bm-grad-blue); flex:0 0 auto;}
.bm-quote .who b { font-size:.92rem; color:var(--bm-ink); display:block; }
.bm-quote .who small { color: var(--bm-muted); }
.bm-stars { color: var(--bm-gold); font-size:.85rem; margin-bottom:.8rem; }

/* ---------- 14. CTA ---------- */
.bm-cta {
  background: var(--bm-grad-cta);
  border-radius: var(--bm-radius-lg);
  padding: clamp(2.4rem, 5vw, 4rem);
  color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--bm-shadow-lg);
}
.bm-cta::before { content:""; position:absolute; inset:0; background: radial-gradient(600px 300px at 90% 0%, rgba(217,164,65,.25), transparent 60%); }
.bm-cta > * { position:relative; z-index:2; }
.bm-cta h2 { color:#fff; }
.bm-cta p { color:#cdd9f0; }

/* ---------- 15. Page hero + breadcrumb ---------- */
.bm-page-hero {
  background: var(--bm-grad-hero), var(--bm-light);
  padding: calc(var(--bm-nav-h) + 56px) 0 64px;
  border-bottom:1px solid var(--bm-border);
}
.bm-breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color:var(--bm-muted); margin-bottom:1rem; flex-wrap:wrap; }
.bm-breadcrumb a { color: var(--bm-muted); font-weight:500; }
.bm-breadcrumb a:hover { color: var(--bm-blue); }
.bm-breadcrumb .sep { opacity:.5; }
.bm-breadcrumb .cur { color: var(--bm-blue); font-weight:600; }

/* ---------- 16. FAQ accordion ---------- */
.bm-accordion .accordion-item { border:1px solid var(--bm-border); border-radius: var(--bm-radius) !important; margin-bottom:.85rem; overflow:hidden; background: var(--bm-card); }
.bm-accordion .accordion-button { font-family: var(--bm-font-head); font-weight:600; font-size:1.02rem; color:var(--bm-ink); background: var(--bm-card); padding:1.2rem 1.4rem; }
.bm-accordion .accordion-button:not(.collapsed) { color: var(--bm-blue); background: rgba(30,94,255,.05); box-shadow:none; }
.bm-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(30,94,255,.25); }
.bm-accordion .accordion-button::after { background-image: none; content:"\F64D"; font-family:"bootstrap-icons"; transition: transform .3s; width:auto;height:auto; }
.bm-accordion .accordion-body { color: var(--bm-muted); padding:0 1.4rem 1.3rem; line-height:1.7; }

/* ---------- 17. Feature list rows (icon+text) ---------- */
.bm-feature-row { display:flex; gap:1rem; align-items:flex-start; padding:1.1rem; border-radius: var(--bm-radius); transition: background .25s; }
.bm-feature-row:hover { background: var(--bm-surface); }
.bm-feature-row .fic { width:48px;height:48px;border-radius:12px; background: rgba(30,94,255,.1); color:var(--bm-blue); display:grid;place-items:center; font-size:1.3rem; flex:0 0 auto;}
.bm-feature-row h4 { font-size:1.05rem; margin-bottom:.3rem; }
.bm-feature-row p { font-size:.92rem; margin:0; }

/* Who it's for */
.bm-persona { background: var(--bm-card); border:1px solid var(--bm-border); border-radius: var(--bm-radius); padding:1.6rem; height:100%; transition: transform .3s, box-shadow .3s; }
.bm-persona:hover { transform: translateY(-5px); box-shadow: var(--bm-shadow); }
.bm-persona .ic { font-size:1.7rem; color: var(--bm-gold); margin-bottom:.7rem; }
.bm-persona h4 { font-size:1.05rem; }
.bm-persona p { font-size:.9rem; margin:0; }

/* ---------- 18. Forms ---------- */
.bm-form-card { background: var(--bm-card); border:1px solid var(--bm-border); border-radius: var(--bm-radius-lg); padding: clamp(1.6rem,3vw,2.6rem); box-shadow: var(--bm-shadow); }
.bm-form label { font-weight:600; font-size:.88rem; margin-bottom:.4rem; color:var(--bm-ink); font-family:var(--bm-font-head); }
.bm-form .form-control, .bm-form .form-select {
  border:1.5px solid var(--bm-border); border-radius: var(--bm-radius-sm); padding:.75rem .95rem;
  background: var(--bm-surface); color:var(--bm-ink); font-size:.95rem;
}
.bm-form .form-control:focus, .bm-form .form-select:focus { border-color: var(--bm-blue); box-shadow: 0 0 0 4px rgba(30,94,255,.14); background: var(--bm-card); }
.bm-form .form-control::placeholder { color: var(--bm-muted); opacity:.7; }

.bm-alert { border-radius: var(--bm-radius-sm); padding:1rem 1.2rem; font-size:.92rem; font-weight:500; border:1px solid transparent; }
.bm-alert-ok { background: rgba(55,214,122,.1); color:#1a9d54; border-color: rgba(55,214,122,.3); }
.bm-alert-err { background: rgba(255,95,87,.1); color:#d4392f; border-color: rgba(255,95,87,.3); }

.bm-contact-side { background: var(--bm-grad-navy); border-radius: var(--bm-radius-lg); padding: clamp(1.6rem,3vw,2.6rem); color:#fff; height:100%; }
.bm-contact-side h3 { color:#fff; }
.bm-contact-item { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.3rem; }
.bm-contact-item i { font-size:1.3rem; color: var(--bm-gold); flex:0 0 auto; margin-top:2px; }
.bm-contact-item b { color:#fff; display:block; font-family:var(--bm-font-head); }
.bm-contact-item span { color:#9fb4d8; font-size:.9rem; }

/* ---------- 19. Footer ---------- */
.bm-footer { background: var(--bm-grad-navy); color:#9fb4d8; padding: 5rem 0 2rem; }
.bm-footer-about { color:#9fb4d8; font-size:.92rem; line-height:1.7; }
.bm-footer-heading { color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; font-weight:600; }
.bm-footer-links { list-style:none; padding:0; margin:0; }
.bm-footer-links li { margin-bottom:.6rem; }
.bm-footer-links a { color:#9fb4d8; font-size:.92rem; }
.bm-footer-links a:hover { color:#fff; padding-left:3px; }
.bm-social { width:40px;height:40px;border-radius:11px; display:grid;place-items:center; background:rgba(255,255,255,.06); color:#cdd9f0; transition:all .25s; }
.bm-social:hover { background: var(--bm-blue); color:#fff; transform: translateY(-3px); }
.bm-footer-badges { border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.bm-badge { display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; color:#cdd9f0; font-weight:500; }
.bm-badge i { color: var(--bm-gold); }
.bm-footer-bottom { padding-top:1.6rem; font-size:.86rem; }
.bm-footer-bottom p { color:#7f97c4; }
.bm-legal-row a { color:#9fb4d8; font-size:.86rem; }
.bm-legal-row a:hover { color:#fff; }

/* ---------- 20. Scroll top ---------- */
.bm-scroll-top {
  position: fixed; bottom: 26px; right: 26px; z-index: 900;
  width:48px;height:48px;border-radius:50%; border:none;
  background: var(--bm-grad-blue); color:#fff; font-size:1.2rem;
  box-shadow: var(--bm-shadow-blue); cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(16px); transition:all .3s;
}
.bm-scroll-top.show { opacity:1; visibility:visible; transform:none; }
.bm-scroll-top:hover { transform: translateY(-3px); }

/* ---------- 20b. Legal / long-form ---------- */
.bm-legal { max-width: 820px; }
.bm-legal h2 { font-size: 1.4rem; margin: 2.4rem 0 .8rem; }
.bm-legal h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.bm-legal p, .bm-legal li { color: var(--bm-muted); line-height: 1.75; }
.bm-legal ul { padding-left: 1.2rem; }
.bm-legal li { margin-bottom: .4rem; }
.bm-legal .updated { color: var(--bm-muted); font-size: .9rem; }
.bm-toc { background: var(--bm-surface); border:1px solid var(--bm-border); border-radius: var(--bm-radius); padding: 1.4rem 1.6rem; position: sticky; top: calc(var(--bm-nav-h) + 20px); }
.bm-toc h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--bm-muted); margin-bottom:.8rem; }
.bm-toc a { display:block; padding:.3rem 0; font-size:.9rem; color:var(--bm-muted); font-weight:500; }
.bm-toc a:hover { color: var(--bm-blue); }

/* ---------- 21. Misc ---------- */
.bm-divider { height:1px; background: var(--bm-border); border:0; }
.bm-tag { display:inline-block; background: rgba(217,164,65,.14); color: #b07d1e; padding:.3rem .8rem; border-radius:99px; font-size:.78rem; font-weight:600; }
[data-bs-theme="dark"] .bm-tag { color: var(--bm-gold); }
.bm-anchor-offset { scroll-margin-top: calc(var(--bm-nav-h) + 20px); }

/* ---------- 22. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .bm-float-card, .bm-dash { animation: none !important; transform: none !important; }
}

/* ---------- 23. Responsive ---------- */
@media (max-width: 991px) {
  .bm-navbar { background: var(--bm-card); backdrop-filter:none; }
  .navbar-collapse { background: var(--bm-card); border-radius: var(--bm-radius); padding:1rem; margin-top:.6rem; box-shadow: var(--bm-shadow-lg); border:1px solid var(--bm-border); }
  .bm-mega-menu { min-width: auto; }
  .bm-navbar .dropdown-menu { box-shadow:none; border:none; padding-left:.5rem; }
  .bm-hero-visual { margin-top: 3rem; }
  .bm-dash { transform: none; }
  .bm-float-card { position: static; margin:.5rem; }
}
@media (max-width: 575px) {
  .bm-float-card { display:none; }
  .btn-bm-primary, .btn-bm-outline, .btn-bm-gold { width:100%; justify-content:center; }
  .bm-hero .d-flex.flex-wrap { flex-direction: column; }
}

/* ---------- 24. Payment Journey (scroll-driven demo) ---------- */
/* Mega-menu footer link */
.bm-mega-foot {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.4rem; padding:.75rem; border-radius:10px;
  background: var(--bm-surface); color: var(--bm-blue);
  font-weight:600; font-size:.88rem; font-family: var(--bm-font-head);
}
.bm-mega-foot:hover { background: rgba(30,94,255,.1); color: var(--bm-blue); }
.bm-mega-foot .bi-arrow-right { transition: transform .2s ease; }
.bm-mega-foot:hover .bi-arrow-right { transform: translateX(4px); }

/* Intro */
.bm-journey-intro {
  min-height: 92vh; display:grid; place-items:center; text-align:center;
  padding: calc(var(--bm-nav-h) + 3rem) 0 2rem;
}
.bm-journey-intro h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin:.6rem 0 1rem; }
.bm-journey-intro .lead { max-width: 660px; margin: 0 auto 2.4rem; color: var(--bm-muted); font-size: 1.08rem; }

.bm-method-picker { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.bm-method {
  display:flex; flex-direction:column; align-items:center; gap:.35rem; width:158px;
  padding:1.4rem 1rem; border-radius: var(--bm-radius); border:1px solid var(--bm-border);
  background: var(--bm-card); color: var(--bm-ink); cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  font-family: var(--bm-font-head); font-weight:600;
}
.bm-method i { font-size:1.9rem; color: var(--bm-blue); transition: transform .25s ease; margin-bottom:.2rem; }
.bm-method small { color: var(--bm-muted); font-weight:500; font-size:.76rem; }
.bm-method:hover { transform: translateY(-5px); box-shadow: var(--bm-shadow); border-color: var(--bm-blue); }
.bm-method.is-active { border-color: var(--bm-blue); box-shadow: var(--bm-shadow-blue); background: rgba(30,94,255,.06); }
.bm-method.is-active i { transform: scale(1.15); }

.bm-scroll-hint {
  margin-top:2.6rem; color: var(--bm-muted); font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.bm-scroll-hint i { display:block; font-size:1.3rem; margin-bottom:.2rem; animation: bmBob 1.8s ease-in-out infinite; }
@keyframes bmBob { 0%,100% { transform:none; } 50% { transform: translateY(8px); } }

/* Decorative floating elements in the intro side gutters */
.bm-demo-intro { position:relative; }
.bm-demo-intro > .container { position:relative; z-index:1; }
.bm-demo-deco { position:absolute; inset:0; z-index:0; pointer-events:none; }
.bm-demo-deco > * { position:absolute; left:var(--x); top:var(--y); animation: floaty var(--t,7s) ease-in-out infinite; }

.bm-deco-card { width:172px; height:106px; border-radius:16px; padding:14px; color:#fff;
  transform: rotate(var(--r,0deg)); box-shadow: 0 22px 44px -16px rgba(15,35,85,.42);
  display:flex; flex-direction:column; justify-content:space-between; }
.bm-deco-card.dc-blue { background: linear-gradient(135deg,#1e5eff,#0b2a7a); }
.bm-deco-card.dc-gold { background: linear-gradient(135deg,#e6b854,#b07d1e); color:#2a2410; }
.bm-deco-card .dc-chip { width:34px; height:25px; border-radius:6px; background: rgba(255,255,255,.75); }
.bm-deco-card .dc-num { font-family: var(--bm-font-head); letter-spacing:1.5px; font-size:.82rem; }
.bm-deco-card .dc-brand { align-self:flex-end; font-family: var(--bm-font-head); font-weight:700; font-size:.95rem; letter-spacing:.05em; }

.bm-deco-coin { width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  font-family: var(--bm-font-head); font-weight:700; font-size:1.7rem; color:#5a3d0a;
  background: radial-gradient(circle at 35% 30%, #f6dd93, #D9A441 60%, #b07d1e);
  box-shadow: 0 16px 32px -10px rgba(217,164,65,.6), inset 0 0 0 4px rgba(255,255,255,.35); }

.bm-deco-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .95rem; border-radius:99px;
  background: var(--bm-card); border:1px solid var(--bm-border); box-shadow: var(--bm-shadow);
  font-family: var(--bm-font-head); font-weight:600; font-size:.82rem; color: var(--bm-ink); white-space:nowrap; }
.bm-deco-pill i { color: var(--bm-blue); }

@media (max-width: 1199px) { .bm-demo-deco { display:none; } }

/* =========================================================
   Home page hero: interactive demo — copy + live journey
   ========================================================= */
.bm-demo-hero {
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, var(--bm-bg) 0%, var(--bm-surface) 42%, var(--bm-surface) 100%);
  border-bottom: 1px solid var(--bm-border);
}
.bm-demo-hero .bm-journey-stage { position:relative; align-items:center; }
.bm-demo-hero .bm-journey-stage > .container { position:relative; z-index:2; }
.bm-demo-hero .bm-journey-grid {
  grid-template-columns: minmax(0, 452px) 1fr;
  gap: 0 3.6rem; align-items:center;
}
.bm-journey-copy { min-width:0; }

/* --- Background: soft mesh + dot grid + drifting blobs --- */
.bm-demo-hero-glow {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 55% at 18% 8%,  rgba(30,94,255,.16), transparent 68%),
    radial-gradient(42% 48% at 92% 78%, rgba(217,164,65,.14), transparent 70%),
    radial-gradient(38% 42% at 62% 0%,  rgba(109,92,245,.12), transparent 72%);
}
.bm-demo-hero-glow::after {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(30,94,255,.13) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(62% 58% at 26% 46%, #000 12%, transparent 72%);
  mask-image: radial-gradient(62% 58% at 26% 46%, #000 12%, transparent 72%);
  opacity:.7;
}
.bm-demo-blob { position:absolute; z-index:0; border-radius:50%; filter: blur(76px); pointer-events:none; }
.bm-demo-blob.b1 { width:420px; height:420px; top:-140px; left:-100px;
  background: radial-gradient(circle, rgba(30,94,255,.30), transparent 70%); animation: bmBlob 19s ease-in-out infinite; }
.bm-demo-blob.b2 { width:380px; height:380px; bottom:-160px; right:-80px;
  background: radial-gradient(circle, rgba(217,164,65,.26), transparent 70%); animation: bmBlob 23s ease-in-out infinite reverse; }

/* --- Headline block --- */
.bm-demo-hero-badge {
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.25rem;
  padding:.45rem 1rem; border-radius: var(--bm-radius-pill);
  background: var(--bm-card); border:1px solid var(--bm-border);
  box-shadow: 0 6px 18px -10px rgba(7,27,60,.35);
  font-family: var(--bm-font-head); font-size:.78rem; font-weight:600;
  letter-spacing:.01em; color: var(--bm-ink);
}
.bm-demo-hero-badge .dot {
  width:8px; height:8px; border-radius:50%; background:#37d67a;
  box-shadow:0 0 0 4px rgba(55,214,122,.18); animation: bmPulseDot 2.4s ease-in-out infinite;
}
@keyframes bmPulseDot {
  0%,100% { box-shadow:0 0 0 3px rgba(55,214,122,.20); }
  50%     { box-shadow:0 0 0 7px rgba(55,214,122,0); }
}
.bm-demo-hero-title {
  font-family: var(--bm-font-head); font-weight:700; letter-spacing:-.025em;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height:1.08; margin:0 0 .9rem;
  text-wrap: balance;
}
/* Warmer three-stop gradient — the two-stop blue→gold left "life" looking washed out */
.bm-demo-hero-title .bm-text-gradient {
  background: linear-gradient(100deg, var(--bm-blue) 0%, #5a63f5 55%, #7c4df0 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
[data-bs-theme="dark"] .bm-demo-hero-title .bm-text-gradient {
  background: linear-gradient(100deg, #6aa0ff 0%, #8f9bff 55%, #a97dff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.bm-demo-hero-sub {
  color: var(--bm-muted); font-size: 1rem; line-height:1.62;
  max-width: 420px; margin: 0 0 1.5rem;
}

/* --- Method picker: two equal cards --- */
.bm-demo-hero .bm-method-picker {
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.75rem; max-width:420px; margin-bottom:1.5rem;
}
.bm-demo-hero .bm-method {
  display:grid; grid-template-columns:auto 1fr; column-gap:.7rem;
  width:auto; padding:.7rem .9rem; text-align:left; border-radius: var(--bm-radius-sm);
}
.bm-demo-hero .bm-method i { grid-row:1 / 3; align-self:center; font-size:1.45rem; margin:0; }
.bm-demo-hero .bm-method > span { align-self:end; font-size:.95rem; }
.bm-demo-hero .bm-method small { align-self:start; font-size:.72rem; }
.bm-demo-hero .bm-method:hover { transform: translateY(-3px); }
.bm-demo-hero .bm-method.is-active { box-shadow: 0 14px 30px -18px rgba(30,94,255,.9); }

/* --- Primary actions: the reason a first-time visitor is here --- */
.bm-demo-hero-cta { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.4rem; }
.bm-demo-hero-cta .btn-bm-lg { padding:.8rem 1.5rem; font-size:.95rem; }

/* --- Trust line --- */
.bm-demo-hero-trust {
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem;
  list-style:none; margin:0; padding:0;
  font-size:.78rem; font-weight:500; color: var(--bm-muted);
}
.bm-demo-hero-trust li { display:inline-flex; align-items:center; gap:.4rem; }
.bm-demo-hero-trust i { color: var(--bm-blue); font-size:.9rem; }

/* --- Live screen: sized to its content instead of stretching the column --- */
.bm-demo-hero .bm-screen-wrap { width:100%; max-width: 660px; justify-self:end; }
.bm-demo-hero .bm-screen { height:auto; min-height:0; }
.bm-demo-hero .bm-screen-view { min-height: 392px; }
.bm-demo-hero .bm-screen-wrap::before { inset:-6% -4% -10% -4%; }

/* Floating labels pinned to the mock window */
.bm-screen-tag {
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .85rem; border-radius: var(--bm-radius-pill);
  background: var(--bm-card); border:1px solid var(--bm-border);
  box-shadow: 0 14px 30px -14px rgba(7,27,60,.45);
  font-family: var(--bm-font-head); font-size:.75rem; font-weight:600; color: var(--bm-ink);
  white-space:nowrap; pointer-events:none;
}
.bm-screen-tag i { color: var(--bm-blue); }
.bm-screen-tag .dot { width:7px; height:7px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 3px rgba(55,214,122,.2); }
.bm-screen-tag.t-live   { top:-14px; left:-16px;    animation: floaty 7s ease-in-out infinite; }
.bm-screen-tag.t-secure { bottom:-16px; right:-14px; animation: floaty 8s ease-in-out infinite .6s; }

/* --- Full-width pipeline rail under both columns (desktop only) --- */
.bm-journey-rail { grid-column: 1 / -1; }

@media (min-width: 992px) {
  .bm-journey-rail {
    margin-top: 2.4rem; padding-top: 1.6rem;
    border-top: 1px solid var(--bm-border);
  }
  .bm-demo-hero .bm-journey-top {
    display:flex; align-items:center; gap:1rem; margin: 0 0 1.3rem;
  }
  .bm-demo-hero .bm-journey-badge { font-size:.78rem; padding:.38rem .8rem; }
  .bm-journey-step {
    font-family: var(--bm-font-head); font-size:.76rem; font-weight:600;
    color: var(--bm-muted); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  }
  .bm-demo-hero .bm-journey-progress {
    height:6px; background: color-mix(in srgb, var(--bm-border) 80%, transparent);
    box-shadow: inset 0 1px 2px rgba(7,27,60,.10);
  }
  .bm-demo-hero .bm-journey-progress-fill { transition: width .15s linear; box-shadow: 0 0 12px rgba(30,94,255,.55); }
  .bm-demo-hero .bm-journey-pct { font-size:.9rem; font-variant-numeric: tabular-nums; }

  /* Vertical stepper turned on its side: five nodes across the full width */
  .bm-demo-hero .bm-stepper {
    display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:.5rem;
  }
  .bm-demo-hero .bm-stepper-line {
    left:10%; right:10%; top:21px; bottom:auto; width:auto; height:2px;
  }
  .bm-demo-hero .bm-stepper-fill {
    inset:0 auto 0 0; height:100%; width: var(--journey-p, 0); transition: width .15s linear;
  }
  .bm-demo-hero .bm-vnode {
    flex-direction:column; align-items:center; text-align:center; gap:.55rem; padding:0;
  }
  .bm-demo-hero .bm-vnode .ic { width:42px; height:42px; font-size:1.02rem; border-width:1.5px; }
  .bm-demo-hero .bm-vnode .txt { align-items:center; }
  .bm-demo-hero .bm-vnode .lbl { font-size:.9rem; }
  .bm-demo-hero .bm-vnode .txt small { font-size:.74rem; }
}

/* Short laptop screens: shed the non-essential lines rather than clip the stage */
@media (min-width: 992px) and (max-height: 880px) {
  .bm-demo-hero .bm-demo-hero-title { font-size: clamp(1.7rem, 2.6vw, 2.15rem); }
  .bm-demo-hero .bm-demo-hero-sub { font-size:.95rem; margin-bottom:1.15rem; }
  .bm-demo-hero .bm-demo-hero-badge { margin-bottom:.9rem; }
  .bm-demo-hero .bm-method-picker { margin-bottom:1.1rem; }
  .bm-demo-hero-cta { margin-bottom:1.1rem; }
  .bm-journey-rail { margin-top:1.6rem; padding-top:1.2rem; }
  .bm-demo-hero .bm-journey-top { margin-bottom:1rem; }
  .bm-demo-hero .bm-vnode .txt small { display:none; }
  .bm-demo-hero .bm-vnode .ic { width:38px; height:38px; }
  .bm-demo-hero .bm-stepper-line { top:19px; }
  .bm-demo-hero .bm-screen-view { min-height: 360px; }
}

@media (max-width: 991.98px) {
  /* The stage is a flex row on desktop; as a flex item the container refuses to
     shrink below its own min-content, which pushed the whole hero past the
     phone's edge. Block layout lets the grid children collapse normally. */
  .bm-demo-hero .bm-journey-stage { display:block; }
  .bm-demo-hero .bm-journey-stage > .container { min-width:0; }
  .bm-demo-hero .bm-journey-grid { grid-template-columns:1fr; gap:2rem; }
  .bm-demo-hero .bm-journey-grid > * { min-width:0; }
  /* Beats `.bm-journey.is-static .bm-journey-stage`, whose 3rem top padding put
     the badge underneath the fixed navbar now that this is the first section. */
  .bm-demo-hero.bm-journey.is-static .bm-journey-stage,
  .bm-demo-hero .bm-journey-stage { padding: calc(var(--bm-nav-h) + 2rem) 0 3rem; }
  .bm-demo-hero-sub { max-width:none; }
  .bm-demo-hero .bm-method-picker { max-width:none; }
  .bm-demo-hero .bm-screen-wrap { max-width:none; justify-self:stretch; }
  .bm-demo-hero .bm-screen-view { min-height:0; }
  .bm-screen-tag { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-demo-blob, .bm-screen-tag, .bm-demo-hero-badge .dot { animation:none; }
}

/* Pinned stage */
.bm-journey-stage {
  min-height: 100vh; display:flex; align-items:flex-start; overflow:hidden;
  padding: calc(var(--bm-nav-h) + 1.5rem) 0 2rem;
}
.bm-journey-stage > .container { width:100%; }

.bm-journey-top { display:flex; align-items:center; gap:1rem; margin-bottom:2.5rem; }
.bm-journey-badge {
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem;
  border-radius: var(--bm-radius-pill); background: var(--bm-grad-blue); color:#fff;
  font-weight:600; font-family: var(--bm-font-head); font-size:.9rem; white-space:nowrap;
}
.bm-journey-progress { flex:1; height:8px; border-radius:99px; background: var(--bm-border); overflow:hidden; }
.bm-journey-progress-fill { display:block; height:100%; width:0; border-radius:99px; background: var(--bm-grad-blue); }
.bm-journey-pct { font-family: var(--bm-font-head); font-weight:700; color: var(--bm-blue); min-width:3.6ch; text-align:right; }

/* Vertical layout: stepper (left) + live screen (right) */
.bm-journey-grid { display:grid; grid-template-columns: 290px 1fr; gap: 3rem; align-items:stretch; }

/* Vertical stepper */
.bm-stepper { position:relative; }
.bm-stepper-line { position:absolute; left:26px; top:34px; bottom:34px; width:3px; background: var(--bm-border); border-radius:99px; overflow:hidden; }
.bm-stepper-fill { position:absolute; inset:0 0 auto 0; width:100%; height: var(--journey-p, 0); background: var(--bm-grad-blue); }
.bm-vnode { position:relative; z-index:1; display:flex; align-items:center; gap:1rem; padding:.7rem 0; opacity:.45; transition: opacity .3s ease; }
.bm-vnode .ic {
  width:54px; height:54px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:1.3rem;
  background: var(--bm-card); border:2px solid var(--bm-border); color: var(--bm-muted); transition: all .35s ease;
}
.bm-vnode .txt { display:flex; flex-direction:column; line-height:1.25; }
.bm-vnode .lbl { font-family: var(--bm-font-head); font-weight:600; font-size:.98rem; }
.bm-vnode .txt small { color: var(--bm-muted); font-size:.8rem; }
.bm-vnode.is-active { opacity:1; }
.bm-vnode.is-active .ic { border-color: var(--bm-blue); color:#fff; background: var(--bm-grad-blue); box-shadow: 0 0 0 4px rgba(30,94,255,.16), 0 6px 14px -6px rgba(30,94,255,.45); transform: scale(1.08); }
.bm-journey[data-method="ach"] .bm-vnode.is-active .ic { box-shadow: 0 0 0 4px rgba(217,164,65,.18), 0 6px 14px -6px rgba(217,164,65,.45); }
.bm-vnode.is-done { opacity:1; }
.bm-vnode.is-done .ic { border-color: var(--bm-blue); color:#fff; background: var(--bm-blue); }

/* The "screen" that swaps per step */
.bm-screen-wrap { position:relative; }
/* soft coloured glow behind the screen */
.bm-screen-wrap::before {
  content:""; position:absolute; inset:-8% -5% -12% -5%; z-index:0; border-radius:40px;
  background: radial-gradient(55% 55% at 62% 28%, rgba(30,94,255,.22), transparent 72%);
  filter: blur(34px); opacity:.85; pointer-events:none; transition: background .4s ease;
}
.bm-journey[data-method="ach"] .bm-screen-wrap::before {
  background: radial-gradient(55% 55% at 62% 28%, rgba(217,164,65,.24), transparent 72%);
}
.bm-screen {
  position:relative; z-index:1;
  background: var(--bm-card); border:1px solid var(--bm-border); border-radius: 18px;
  box-shadow: 0 30px 60px -24px rgba(15,35,85,.35), 0 8px 20px -12px rgba(15,35,85,.2);
  overflow:hidden; height:100%; min-height:420px;
  display:flex; flex-direction:column;
}
.bm-screen-bar { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-bottom:1px solid var(--bm-border);
  background: linear-gradient(var(--bm-surface), color-mix(in srgb, var(--bm-surface) 70%, transparent)); }
.bm-screen-bar .d { width:11px; height:11px; border-radius:50%; background: var(--bm-border); }
.bm-screen-bar .d:nth-child(1){ background:#ff6058; } .bm-screen-bar .d:nth-child(2){ background:#ffbd2e; } .bm-screen-bar .d:nth-child(3){ background:#28c840; }
.bm-screen-url { margin-left:.6rem; font-size:.8rem; color: var(--bm-muted); display:inline-flex; align-items:center; gap:.35rem; }
.bm-screen-view { position:relative; flex:1; padding:1.8rem; }

.bm-step-panel { position:absolute; inset:1.8rem; opacity:0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; pointer-events:none; display:flex; flex-direction:column; justify-content:center; }
.bm-step-panel.is-active { opacity:1; transform:none; }
.bm-screen-note { color: var(--bm-muted); font-size:.85rem; margin:.9rem 0 0; }

/* --- Panel: checkout form --- */
.bm-lab { display:block; font-size:.78rem; font-weight:600; color: var(--bm-muted); margin:0 0 .35rem; }
.bm-lab.mt { margin-top:.9rem; }
.bm-inp { display:flex; align-items:center; gap:.6rem; padding:.75rem .9rem; border:1px solid var(--bm-border); border-radius:12px; background: var(--bm-surface); font-weight:600; letter-spacing:.02em; }
.bm-inp i:first-child { color: var(--bm-blue); }
.bm-inp .ok { margin-left:auto; color:#37d67a; }
.bm-inp-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:.9rem; }
.bm-pay-btn { margin-top:1.3rem; width:100%; border:0; border-radius:12px; padding:.95rem; font-weight:700; font-family: var(--bm-font-head); color:#fff; background: var(--bm-grad-blue); box-shadow: var(--bm-shadow-blue); cursor:default; }
.bm-secure-note { text-align:center; margin-top:.8rem; font-size:.78rem; color: var(--bm-muted); }

/* --- Panel: tokenize --- */
.bm-token-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.05rem 1.2rem; border:1px solid var(--bm-border); border-radius:14px; background: var(--bm-surface); box-shadow: 0 4px 14px -10px rgba(15,35,85,.3); }
.bm-token-row small { color: var(--bm-muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; display:inline-flex; align-items:center; gap:.4rem; }
.bm-token-row code { font-family:"Courier New",monospace; font-weight:700; font-size:1.02rem; color: var(--bm-ink); letter-spacing:.03em; }
.bm-token-row.is-secure { border-color: rgba(30,94,255,.38); background: linear-gradient(135deg, rgba(30,94,255,.1), rgba(30,94,255,.02)); box-shadow: 0 14px 28px -16px rgba(30,94,255,.55); }
.bm-token-row.is-secure code { color: var(--bm-blue); }
.bm-token-row.is-secure small i { color: var(--bm-blue); }
.bm-token-arrow { display:grid; place-items:center; width:38px; height:38px; margin:.7rem auto; border-radius:50%; background: rgba(30,94,255,.1); color: var(--bm-blue); font-size:1.1rem; }

/* --- Panel: risk score --- */
.bm-risk { text-align:center; }
.bm-risk-score { font-family: var(--bm-font-head); font-weight:800; font-size:3.5rem; line-height:1;
  background: linear-gradient(180deg,#4ade80,#16a34a); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 16px rgba(55,214,122,.35)); }
.bm-risk-score small { font-size:1rem; color: var(--bm-muted); font-weight:600; -webkit-text-fill-color: var(--bm-muted); }
.bm-risk-meter { position:relative; height:10px; border-radius:99px; background: var(--bm-surface); box-shadow: inset 0 1px 3px rgba(0,0,0,.08); margin:1.2rem auto; max-width:300px; }
.bm-risk-meter span { position:relative; display:block; height:100%; width:12%; border-radius:99px; background: linear-gradient(90deg,#4ade80,#16a34a); }
.bm-risk-meter span::after { content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:15px; height:15px; border-radius:50%; background:#16a34a; border:3px solid var(--bm-card); box-shadow:0 2px 8px rgba(22,163,74,.5); }
.bm-risk-tag { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--bm-font-head); font-weight:700; color:#16a34a; margin-bottom:1.1rem; padding:.42rem .9rem; border-radius:99px; background:rgba(55,214,122,.12); }
.bm-risk-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.bm-risk-list li { color: var(--bm-ink); font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem; border-radius:99px; background: var(--bm-surface); border:1px solid var(--bm-border); }
.bm-risk-list i { color:#16a34a; }

/* --- Panel: network auth --- */
.bm-auth { text-align:center; }
.bm-auth-card { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.9rem; padding:1.25rem 1.8rem; border-radius:16px;
  background: linear-gradient(135deg,#0b2148,#1b3a6b); color:#fff; box-shadow: 0 22px 44px -18px rgba(11,33,72,.65); margin-bottom:1.3rem; }
.bm-auth-card::after { content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); }
.bm-auth-card .net { position:relative; font-family: var(--bm-font-head); font-weight:800; letter-spacing:.1em; font-size:1.05rem; }
.bm-auth-card .num { position:relative; color:#bcd0f2; letter-spacing:.18em; font-family:"Courier New",monospace; }
.bm-auth-stamp { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--bm-font-head); font-weight:700; font-size:1.02rem; color:#16a34a; padding:.5rem 1.05rem; border-radius:99px; background:rgba(55,214,122,.12); }
.bm-auth-stamp i { font-size:1.25rem; }
.bm-auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; max-width:440px; margin:0 auto 1rem; }
.bm-auth-grid > div { text-align:left; padding:.7rem .95rem; border:1px solid var(--bm-border); border-radius:12px; background: var(--bm-surface); }
.bm-auth-grid span { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color: var(--bm-muted); margin-bottom:.22rem; }
.bm-auth-grid b { font-family: var(--bm-font-head); font-weight:700; font-size:.92rem; color: var(--bm-ink); }
.bm-auth-grid b.ok { color:#16a34a; display:inline-flex; align-items:center; gap:.3rem; }

/* --- Panel: settled --- */
.bm-settled { text-align:center; }
.bm-settled-check { position:relative; width:86px; height:86px; border-radius:50%; background: radial-gradient(circle at 40% 35%,#4ade80,#16a34a); color:#fff; display:grid; place-items:center; font-size:2.4rem; margin:0 auto 1.2rem; box-shadow:0 16px 34px -12px rgba(22,163,74,.6); animation: bmSettledPulse 2.2s ease-in-out infinite; }
@keyframes bmSettledPulse { 0%,100% { box-shadow:0 16px 34px -12px rgba(22,163,74,.6), 0 0 0 0 rgba(55,214,122,.45); } 50% { box-shadow:0 16px 34px -12px rgba(22,163,74,.6), 0 0 0 16px rgba(55,214,122,0); } }
.bm-settled-amt { font-family: var(--bm-font-head); font-weight:800; font-size: clamp(2.2rem,5vw,3rem);
  background: linear-gradient(180deg,#4ade80,#16a34a); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ACH = gold accent */
.bm-journey[data-method="ach"] .bm-journey-badge,
.bm-journey[data-method="ach"] .bm-journey-progress-fill,
.bm-journey[data-method="ach"] .bm-stepper-fill,
.bm-journey[data-method="ach"] .bm-vnode.is-active .ic,
.bm-journey[data-method="ach"] .bm-pay-btn { background: var(--bm-grad-gold); color: var(--bm-primary); }
.bm-journey[data-method="ach"] .bm-journey-pct { color: var(--bm-gold); }
.bm-journey[data-method="ach"] .bm-vnode.is-done .ic { background: var(--bm-gold); border-color: var(--bm-gold); }
.bm-journey[data-method="ach"] .bm-inp i:first-child,
.bm-journey[data-method="ach"] .bm-token-arrow { color: var(--bm-gold); }

/* Done section */
.bm-journey-done { text-align:center; padding: 6rem 0; }
.bm-journey-check {
  width:96px; height:96px; border-radius:50%; background: rgba(55,214,122,.14);
  color:#37d67a; display:grid; place-items:center; font-size:3rem; margin:0 auto 1.5rem;
}

/* Static fallback: reduced motion, no JS, or mobile — stack every panel */
.bm-journey.is-static .bm-journey-stage { min-height:auto; padding: 3rem 0; }
.bm-journey.is-static .bm-vnode { opacity:1; }
.bm-journey.is-static .bm-screen { min-height:auto; }
.bm-journey.is-static .bm-screen-view { min-height:0; }
.bm-journey.is-static .bm-step-panel {
  position:static; inset:auto; opacity:1; transform:none; pointer-events:auto;
  padding:1.4rem 0; border-top:1px solid var(--bm-border);
}
.bm-journey.is-static .bm-step-panel:first-child { padding-top:0; border-top:0; }
.bm-journey.is-static .bm-journey-top { display:none; }

@media (max-width: 991px) {
  .bm-journey-grid { grid-template-columns: 1fr; gap:2rem; }
  .bm-stepper-line { display:none; }
  .bm-vnode { opacity:1; }
  .bm-screen { min-height:380px; }
}

/* ---------- 25. Immersive 3D hero scene ---------- */
.bm-scene3d { position:relative; width:100%; height:480px; min-height:320px; cursor:grab; }
.bm-scene3d:active { cursor:grabbing; }
.bm-scene3d canvas { display:block; width:100% !important; height:100% !important; }

/* Static fallback when WebGL is unavailable — a single tilted card */
.bm-scene3d.bm-scene3d-off {
  display:grid; place-items:center; cursor:default; border:0;
}
.bm-scene3d.bm-scene3d-off::before {
  content:"BEAR MERCHANT"; letter-spacing:.06em;
  display:flex; align-items:flex-start; padding:1.4rem; font-weight:700; color:#fff;
  font-family: var(--bm-font-head); font-size:.9rem;
  width:min(78%,340px); aspect-ratio:1.6/1; border-radius:18px;
  background: linear-gradient(135deg, #1e5eff, #0b2a7a);
  box-shadow: var(--bm-shadow-lg);
  transform: rotate(-7deg);
}

@media (max-width: 991px) { .bm-scene3d { height:400px; } }
@media (max-width: 575px)  { .bm-scene3d { height:330px; } }

/* ---------- 26. How it works (vertical scroll-driven story) ---------- */
.bm-howit { position:relative; }
.bm-howit-stage { min-height:100vh; display:flex; align-items:center; overflow:hidden; padding: calc(var(--bm-nav-h) + 2rem) 0 3rem; }
.bm-howit-grid { display:grid; grid-template-columns: 320px 1fr; gap: 3.5rem; align-items:stretch; }

/* LEFT: vertical stepper */
.bm-howit-steps { position:relative; display:flex; flex-direction:column; justify-content:center; gap:1.4rem; }
.bm-howit-line { position:absolute; left:27px; top:38px; bottom:38px; width:3px; background: var(--bm-border); border-radius:99px; overflow:hidden; }
/* Per-step colours — Apply=blue, Verification=violet, Approval=green, Start=amber */
.bm-howit-node:nth-child(2) { --nc:#1e5eff; --nc2:#0b47d6; }
.bm-howit-node:nth-child(3) { --nc:#8b5cf6; --nc2:#6d28d9; }
.bm-howit-node:nth-child(4) { --nc:#10b981; --nc2:#059669; }
.bm-howit-node:nth-child(5) { --nc:#f59e0b; --nc2:#d97706; }
.bm-howit-panel:nth-child(1) { --pc:#1e5eff; --pc2:#0b47d6; }
.bm-howit-panel:nth-child(2) { --pc:#8b5cf6; --pc2:#6d28d9; }
.bm-howit-panel:nth-child(3) { --pc:#10b981; --pc2:#059669; }
.bm-howit-panel:nth-child(4) { --pc:#f59e0b; --pc2:#d97706; }

.bm-howit-fill { position:absolute; inset:0 0 auto 0; width:100%; height:0;
  background: linear-gradient(180deg, #1e5eff, #8b5cf6 42%, #10b981 74%, #f59e0b); }
.bm-howit-node { position:relative; z-index:1; display:flex; align-items:center; gap:1rem; opacity:.5; transition: opacity .3s ease; }
.bm-howit-node .dotnum {
  width:56px; height:56px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  font-family: var(--bm-font-head); font-weight:700; font-size:1.2rem;
  background: var(--bm-card); border:2px solid var(--bm-border); color: var(--bm-muted); transition: all .35s ease;
}
.bm-howit-node .txt { display:flex; flex-direction:column; line-height:1.3; }
.bm-howit-node .txt strong { font-family: var(--bm-font-head); font-weight:600; font-size:1rem; transition: color .3s ease; }
.bm-howit-node .txt small { color: var(--bm-muted); font-size:.82rem; }
.bm-howit-node.is-active { opacity:1; }
.bm-howit-node.is-active .dotnum { border-color: var(--nc); color:#fff; background: linear-gradient(135deg, var(--nc), var(--nc2)); box-shadow: 0 10px 26px -8px var(--nc); transform: scale(1.1); }
.bm-howit-node.is-active .txt strong { color: var(--nc); }
.bm-howit-node.is-done { opacity:1; }
.bm-howit-node.is-done .dotnum { border-color: var(--nc); color:#fff; background: var(--nc); }

/* RIGHT: swapping detail card */
.bm-howit-stagecard { position:relative; min-height:380px; border-radius: 24px; overflow:hidden;
  background: var(--bm-card); border:1px solid var(--bm-border); box-shadow: var(--bm-shadow-lg); }
.bm-howit-panel {
  position:absolute; inset:0; padding: 3rem 3.2rem; opacity:0; transform: translateY(22px) scale(.985);
  transition: opacity .5s ease, transform .5s ease; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center;
}
.bm-howit-panel.is-active { opacity:1; transform:none; }
/* coloured top accent bar per step */
.bm-howit-panel::after { content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background: linear-gradient(90deg, var(--pc), var(--pc2) 60%, transparent); }
.bm-howit-watermark {
  position:absolute; top:-1.2rem; right:1.4rem; z-index:0;
  font-family: var(--bm-font-head); font-weight:800; font-size:12rem; line-height:1;
  color: var(--pc); opacity:.08; pointer-events:none;
}
.bm-howit-panel .ic {
  position:relative; z-index:1; width:78px; height:78px; border-radius:22px; display:grid; place-items:center; font-size:2.1rem;
  background: linear-gradient(135deg, var(--pc), var(--pc2)); color:#fff; box-shadow: 0 14px 32px -10px var(--pc); margin-bottom:1.5rem;
}
.bm-howit-panel .ic::before { content:""; position:absolute; inset:-35%; z-index:-1; border-radius:50%;
  background: radial-gradient(circle, var(--pc), transparent 70%); opacity:.28; filter: blur(16px); }
.bm-howit-idx { position:relative; z-index:1; font-family: var(--bm-font-head); font-weight:700; font-size:.92rem; color: var(--pc); letter-spacing:.12em; text-transform:uppercase; margin-bottom:.5rem; }
.bm-howit-idx small { color: var(--bm-muted); font-weight:600; }
.bm-howit-panel h3 { position:relative; z-index:1; font-size:2rem; margin-bottom:.7rem; }
.bm-howit-panel p { position:relative; z-index:1; color: var(--bm-muted); font-size:1.08rem; max-width:520px; margin:0; }

/* Static fallback: reduced motion / no JS / mobile — stack everything */
.bm-howit.is-static .bm-howit-stage { min-height:auto; padding: 3.5rem 0; }
.bm-howit.is-static .bm-howit-grid { grid-template-columns: 1fr; gap: 2rem; }
.bm-howit.is-static .bm-howit-node { opacity:1; }
.bm-howit.is-static .bm-howit-stagecard { min-height:0; background:none; border:0; box-shadow:none; }
.bm-howit.is-static .bm-howit-panel {
  position:static; inset:auto; opacity:1; transform:none; padding:1.8rem 0;
  border-top:1px solid var(--bm-border);
}
.bm-howit.is-static .bm-howit-panel:first-child { padding-top:0; border-top:0; }
.bm-howit.is-static .bm-howit-watermark { display:none; }

@media (max-width: 991px) {
  .bm-howit-grid { grid-template-columns: 1fr; gap: 2rem; }
  .bm-howit-line { display:none; }
  .bm-howit-node { opacity:1; }
  .bm-howit-stagecard { min-height:320px; }
  .bm-howit-panel { padding: 2rem; }
  .bm-howit-watermark { font-size: 8rem; }
}
@media (max-width: 575px) {
  .bm-howit-panel h3 { font-size:1.5rem; }
}

/* ---------- 26b. How it works — timeline cards ---------- */
.bm-how2 { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; padding-top:1.4rem; }
.bm-how2-card { position:relative; z-index:1; background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius:18px; padding:2.4rem 1.5rem 1.7rem;
  box-shadow: var(--bm-shadow); transition: transform .3s ease, box-shadow .3s ease; }
/* clean rounded colour strip on top */
.bm-how2-card::before { content:""; position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:18px 18px 0 0; background: linear-gradient(90deg,var(--c),var(--c2)); }
.bm-how2-card:hover { transform: translateY(-8px); box-shadow: var(--bm-shadow-lg); }
.bm-how2-num { position:absolute; top:-20px; left:1.5rem; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-family:var(--bm-font-head); font-weight:700; font-size:1.05rem; color:#fff;
  background: linear-gradient(135deg,var(--c),var(--c2)); box-shadow: 0 10px 22px -8px var(--c); }
.bm-how2-ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.5rem;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); margin:.6rem 0 1.1rem; }
.bm-how2-step { font-family:var(--bm-font-head); font-weight:700; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--c); }
.bm-how2-card h3 { font-size:1.22rem; margin:.5rem 0 .55rem; }
.bm-how2-card p { color: var(--bm-muted); font-size:.92rem; line-height:1.6; margin:0; }
.bm-how2-card.c1 { --c:#1e5eff; --c2:#0b47d6; }
.bm-how2-card.c2 { --c:#8b5cf6; --c2:#6d28d9; }
.bm-how2-card.c3 { --c:#10b981; --c2:#059669; }
.bm-how2-card.c4 { --c:#f59e0b; --c2:#d97706; }

@media (max-width: 991px) {
  .bm-how2 { grid-template-columns:1fr 1fr; gap:2.4rem 1.6rem; }
  .bm-how2-line { display:none; }
}
@media (max-width: 575px) {
  .bm-how2 { grid-template-columns:1fr; }
}

/* ---------- 27. Hero (form + text, two-column) ---------- */
/* Sits below the interactive demo on the home page, so it no longer needs to
   clear the fixed navbar — just normal section breathing room. */
.bm-hero2 { position:relative; overflow:hidden;
  /* The navbar is fixed-top; reserve its height plus breathing room, the same
     way the other page heroes do, so the form card never sits under it. */
  padding: calc(var(--bm-nav-h) + 46px) 0 76px; background: var(--bm-bg); }
.bm-hero2-glow { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(50% 55% at 22% 0%, rgba(30,94,255,.18), transparent 70%),
    radial-gradient(40% 45% at 85% 10%, rgba(217,164,65,.14), transparent 70%);
}
.bm-hero2 .container { position:relative; z-index:1; }

/* Animated world-map + live transactions background */
.bm-hero2-map { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* Animated colour blobs */
.bm-hero2-blob { position:absolute; z-index:0; border-radius:50%; filter: blur(70px); pointer-events:none; }
.bm-hero2-blob.b1 { width:460px; height:460px; top:-140px; left:-90px;
  background: radial-gradient(circle, rgba(30,94,255,.38), transparent 70%); animation: bmBlob 17s ease-in-out infinite; }
.bm-hero2-blob.b2 { width:400px; height:400px; bottom:-160px; right:8%;
  background: radial-gradient(circle, rgba(217,164,65,.32), transparent 70%); animation: bmBlob 21s ease-in-out infinite reverse; }
.bm-hero2-blob.b3 { width:340px; height:340px; top:20%; left:44%;
  background: radial-gradient(circle, rgba(109,92,245,.26), transparent 70%); animation: bmBlob 24s ease-in-out infinite; }
@keyframes bmBlob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(34px,26px) scale(1.14); }
}

/* Floating payments-themed background icons */
.bm-hero2-anim { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bm-hero2-anim i {
  position:absolute; left:var(--x); top:var(--y);
  font-size:2.6rem; color: var(--bm-blue); opacity:.16;
  animation: bmDrift var(--t,18s) ease-in-out var(--d,0s) infinite;
}
.bm-hero2-anim i:nth-child(even) { color: var(--bm-gold); opacity:.18; font-size:2.2rem; }
.bm-hero2-anim i:nth-child(3n) { font-size:3.1rem; opacity:.12; }
@keyframes bmDrift {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-26px) rotate(9deg); }
}

/* Right-side text */
.bm-hero2-badge {
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem;
  padding:.45rem 1rem; border-radius: var(--bm-radius-pill);
  background: var(--bm-card); border:1px solid var(--bm-border); box-shadow: var(--bm-shadow);
  font-size:.8rem; font-weight:600; color: var(--bm-ink);
}
.bm-hero2-badge .dot { width:8px; height:8px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 4px rgba(55,214,122,.18); }
.bm-hero2-title { font-family: var(--bm-font-head); font-weight:700; letter-spacing:-.02em;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height:1.07; margin-bottom:1.2rem; }
.bm-hero2-sub { color: var(--bm-muted); font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height:1.6; max-width: 520px; margin: 0 0 2rem; }
.bm-hero2-stats { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.bm-hero2-stats > div { text-align:left; }
.bm-hero2-stats b { display:block; font-family: var(--bm-font-head); font-weight:700; font-size:1.55rem; color: var(--bm-ink); }
.bm-hero2-stats span { font-size:.82rem; color: var(--bm-muted); }
.bm-hero2-stats .sep { width:1px; height:34px; background: var(--bm-border); }

/* Trust chips */
.bm-hero2-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.bm-hero2-chips span {
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius: var(--bm-radius-pill);
  background: var(--bm-card); border:1px solid var(--bm-border); font-size:.82rem; font-weight:600; color: var(--bm-ink);
}
.bm-hero2-chips i { color:#37d67a; }

/* Social proof */
.bm-hero2-proof { display:flex; align-items:center; gap:.9rem; margin-top:2rem; }
.bm-avatars { display:flex; }
.bm-avatars span {
  width:38px; height:38px; border-radius:50%; margin-left:-10px; display:grid; place-items:center;
  color:#fff; font-family: var(--bm-font-head); font-weight:700; font-size:.82rem;
  border:2px solid var(--bm-card); box-shadow: var(--bm-shadow);
}
.bm-avatars span:first-child { margin-left:0; }
.bm-avatars .more { background: var(--bm-surface) !important; color: var(--bm-blue); }
.bm-proof-txt .stars { color: var(--bm-gold); font-size:.82rem; letter-spacing:1px; margin-bottom:.1rem; }
.bm-proof-txt > span { font-size:.86rem; color: var(--bm-muted); }

/* Left-side lead form */
.bm-leadform { max-width: 416px; margin: 0 auto; border-radius: 18px; overflow:hidden;
  background: var(--bm-card); border:1px solid var(--bm-border); box-shadow: var(--bm-shadow-lg); }
.bm-leadform-bar {
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  padding:.55rem 1rem; color:#fff; font-size:.8rem;
  background: linear-gradient(90deg, #1e5eff, #6d5cf5);
}
.bm-leadform-bar b { font-weight:700; }
.bm-leadform-bar i { margin-right:.15rem; }
.bm-leadform-bar .vr { width:1px; height:16px; background: rgba(255,255,255,.4); }
.bm-leadform-body { padding: 1.25rem 1.3rem 1.4rem; }
.bm-leadform-title { font-family: var(--bm-font-head); font-weight:700; font-size:1.4rem; text-align:center; margin-bottom:.2rem; }
.bm-leadform-sub { text-align:center; color: var(--bm-muted); font-size:.86rem; margin-bottom:1rem; }

.bm-leadform-alert { display:block; margin-bottom:1rem; padding:.7rem .9rem; border-radius:10px; font-size:.86rem; line-height:1.4; }
.bm-leadform-alert-ok { background: rgba(55,214,122,.12); color:#1a8a4c; border:1px solid rgba(55,214,122,.35); }
.bm-leadform-alert-err { background: rgba(234,9,9,.08); color:#c22; border:1px solid rgba(234,9,9,.3); }
.bm-leadform-field-msg { display:block; margin:-.5rem 0 .6rem; font-size:.76rem; color:#c22; }
.bm-leadform-field-msg a { color:inherit; text-decoration:underline; }

.bm-leadform-fields input[type=text],
.bm-leadform-fields input[type=email],
.bm-leadform-fields input[type=tel],
.bm-leadform-select {
  width:100%; padding:.68rem .9rem; margin-bottom:.68rem;
  border:1px solid var(--bm-border); border-radius:11px; background: var(--bm-surface);
  font-size:.9rem; color: var(--bm-ink); font-family: var(--bm-font-body, inherit);
  transition: border-color .2s, box-shadow .2s;
}
.bm-leadform-fields input::placeholder { color: var(--bm-muted); }
.bm-leadform-fields input:focus,
.bm-leadform-select:focus { outline:none; border-color: var(--bm-blue); box-shadow:0 0 0 3px rgba(30,94,255,.15); }
.bm-leadform-select { appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7a99' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .9rem center; padding-right:2.2rem; }

.bm-phone { display:block; }
.bm-phone input { width:100%; }

/* intl-tel-input inside the lead-form card. The plugin wraps the tel input in
   .intl-tel-input, which defaults to inline-block and would otherwise collapse
   to its intrinsic width inside the full-width form column. */
.bm-leadform-fields .intl-tel-input { display:block; width:100%; margin-bottom:.68rem; }
.bm-leadform-fields .intl-tel-input .selected-flag { border-radius:11px 0 0 11px; }
.bm-leadform-fields .intl-tel-input .country-list { z-index:20; text-align:left;
  border-radius:12px; box-shadow: var(--bm-shadow-lg); }
/* The gap below the phone row belongs to the wrapper, not the input: the
   input's own bottom margin collapses through the wrapper and lands the
   country select roughly half a gap too close. */
.bm-leadform-fields .intl-tel-input input[type=tel] { margin-bottom:0; }
/* Invalid number, flagged on blur by js/lead-form.js */
.bm-leadform-fields input.noColor { border-color:#c22; box-shadow:0 0 0 3px rgba(234,9,9,.12); }

/* jQuery Validate messages. The plugin appends a <label class="error"> after
   the field (after the .intl-tel-input wrapper for the phone), so the message
   sits where the field's own bottom margin left room for it. */
.bm-leadform-fields label.error {
  display:block; margin:-.85rem 0 .9rem; font-size:.78rem; line-height:1.4; color:#c22;
}
.bm-leadform-fields .bm-consent label.error { margin:.2rem 0 0; }
.bm-leadform-fields input.error,
.bm-leadform-select.error { border-color:#c22; }

.bm-consent { display:flex; align-items:flex-start; gap:.55rem; margin:.45rem 0 1rem; }
.bm-consent input { margin-top:.2rem; flex:0 0 auto; width:16px; height:16px; accent-color: var(--bm-blue); }
.bm-consent span { font-size:.72rem; line-height:1.45; color: var(--bm-muted); }

/* Submit button — clean full-width rounded rectangle that fits the card */
.bm-leadform-fields .btn-bm-primary {
  width:100%; justify-content:center; border-radius:12px; padding:.78rem 1.1rem;
  margin-top:.2rem;
  box-shadow: 0 8px 20px rgba(30,94,255,.28);
}
.bm-leadform-fields .btn-bm-primary:hover { transform: translateY(-2px); }

@media (max-width: 991px) {
  .bm-hero2-text { text-align:center; }
  .bm-hero2-sub { margin-left:auto; margin-right:auto; }
  .bm-hero2-stats { justify-content:center; }
  .bm-leadform { margin-top:.5rem; }
}
@media (max-width: 575px) {
  .bm-hero2-stats { gap:1rem; }
  .bm-hero2-stats .sep { display:none; }
}

/* ---------- 27b. Homepage industry cards ---------- */
.bm-vertical-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bm-card); border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius); overflow: hidden; text-decoration: none;
  box-shadow: var(--bm-shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bm-vertical-card:hover {
  transform: translateY(-4px); border-color: rgba(30,94,255,.35);
  box-shadow: var(--bm-shadow-lg);
}
.bm-vertical-thumb {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bm-surface);
}
.bm-vertical-thumb img {
  width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.bm-vertical-card:hover .bm-vertical-thumb img { transform: scale(1.05); }
.bm-vertical-body { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.2rem; }
.bm-vertical-body strong {
  font-family: var(--bm-font-head); font-size: 1.08rem; font-weight: 700; color: var(--bm-ink);
  transition: color .2s ease;
}
.bm-vertical-card:hover .bm-vertical-body strong { color: var(--bm-blue); }
.bm-vertical-body small { font-size: .88rem; line-height: 1.5; color: var(--bm-muted); }
.bm-vertical-link {
  margin-top: .45rem; font-size: .82rem; font-weight: 600; color: var(--bm-blue);
  display: inline-flex; align-items: center; gap: .3rem;
}
.bm-vertical-card:hover .bm-vertical-link i { transform: translateX(3px); }
.bm-vertical-link i { transition: transform .2s ease; }

.bm-vertical-more {
  margin: 2rem auto 0; max-width: 680px; text-align: center;
  font-size: .95rem; color: var(--bm-muted);
}
.bm-vertical-more a { color: var(--bm-blue); font-weight: 600; }

@media (max-width: 575px) {
  .bm-vertical-body { padding: .95rem 1rem 1.05rem; }
}

/* ---------- 28. Payment logos marquee ---------- */
.bm-marquee { position:relative; overflow:hidden; margin-top:1.2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bm-marquee-track { display:flex; align-items:center; gap:1.4rem; width:max-content;
  animation: bmMarquee 34s linear infinite; }
.bm-marquee:hover .bm-marquee-track { animation-play-state: paused; }
@keyframes bmMarquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.bm-marquee-item { flex:0 0 auto; height:58px; min-width:130px; padding:0 1.5rem;
  display:grid; place-items:center; background:#fff; border:1px solid var(--bm-border);
  border-radius:14px; box-shadow: var(--bm-shadow); }
.bm-marquee-logo { height:28px; width:auto; display:block; }

@media (max-width: 575px) {
  .bm-marquee-item { height:50px; min-width:104px; padding:0 1.1rem; }
  .bm-marquee-logo { height:23px; }
}

/* ---------- 29. Homepage polish pass ---------- */
/* Feature cards — softer radius, richer depth, glowing icons */
.bm-card { border-radius:18px; }
.bm-card:hover { box-shadow: 0 26px 50px -22px rgba(15,35,85,.42); }
.bm-card-icon { box-shadow: 0 8px 18px -8px rgba(30,94,255,.4); }
.bm-card:hover .bm-card-icon { box-shadow: 0 12px 26px -8px rgba(30,94,255,.55); }
.bm-card-gold .bm-card-icon { box-shadow: 0 8px 18px -8px rgba(217,164,65,.45); }
.bm-card-link { color: var(--bm-blue); }

/* Testimonials — accent bar, decorative quote mark, deeper avatar */
.bm-quote { border-radius:18px; padding-top:2.6rem; }
.bm-quote::after { content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:18px 18px 0 0; background: var(--bm-grad-blue); }
.bm-quote::before { content:"\201C"; position:absolute; top:.2rem; right:1.3rem; z-index:0;
  font-family: var(--bm-font-head); font-weight:700; font-size:5.5rem; line-height:1; color: var(--bm-blue); opacity:.09; pointer-events:none; }
.bm-quote > * { position:relative; z-index:1; }
.bm-quote:hover { box-shadow: 0 26px 50px -22px rgba(15,35,85,.42); }
.bm-avatar { box-shadow: 0 8px 16px -6px rgba(30,94,255,.5); }

/* Industries chips — a touch more presence + colour on hover */
.bm-chip { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease; }
.bm-chip:hover { background: rgba(30,94,255,.06); }

/* Developer feature rows — subtle hover lift */
.bm-dev-feature { padding:.7rem; border-radius:12px; transition: background .25s ease; }
.bm-dev-feature:hover { background: rgba(255,255,255,.05); }

/* =====================================================================
   30. Interior page layout variants + optional sections
   Used by includes/page-sections.php so Solutions and Industries pages
   can each pick a different shape instead of all rendering identically.
   ===================================================================== */

/* Interior H1 sizing (was an inline style on the hero heading) */
.bm-page-hero .bm-display,
.bm-ind-hero .bm-display { font-size: clamp(2rem, 4.4vw, 3.2rem); }

/* Hero: centered variant (legacy — kept for pages not using the form layout) */
.bm-hero-centered-inner .bm-breadcrumb { justify-content:center; }
.bm-hero-centered-inner .bm-lead { max-width:680px; }
.bm-hero-visual-wide { max-width:840px; margin-inline:auto; }

/* ---------- Hero with the lead form in the right column ----------
   Copy sits left, the form card is pinned right and never stretches. */
.bm-hero-form .bm-leadform { max-width:460px; margin-inline: auto 0; }
.bm-hero-form .bm-lead { max-width:none; }
.bm-hero-visual-inline { max-width:560px; }

/* The form card is always light, even on the dark Industries band, so it
   must not inherit the hero's pale text colour. */
.bm-ind-hero .bm-leadform { color: var(--bm-ink); }
.bm-ind-hero .bm-leadform-title { color: var(--bm-ink); }
.bm-ind-hero .bm-leadform-sub,
.bm-ind-hero .bm-consent span { color: var(--bm-muted); }
.bm-ind-hero .bm-leadform-bar { color:#fff; }

/* Stat strip now lives in the narrower left column */
.bm-hero-form .bm-ind-stats {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top:2.25rem; padding-top:1.75rem;
}
.bm-hero-form .bm-ind-stat { text-align:left; }

@media (max-width: 991px) {
  .bm-hero-form .bm-leadform { margin-inline:auto; margin-top:.5rem; }
  .bm-hero-visual-inline { max-width:none; }
}

/* ---------- Overview: stacked variant ---------- */
.bm-point-row { display:flex; flex-wrap:wrap; gap:.6rem; }
.bm-point {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; border-radius: var(--bm-radius-pill);
  background: var(--bm-card); border:1px solid var(--bm-border);
  font-size:.88rem; font-weight:600; color: var(--bm-ink);
}
.bm-point i { color: var(--bm-blue); font-size:.95rem; }

/* ---------- Features: compact + bento variants ---------- */
.bm-card-compact { padding:1.3rem 1.25rem; }
.bm-card-compact h3 { font-size:1rem; }
.bm-card-compact p { font-size:.88rem; }

.bm-bento { display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; }
.bm-bento-cell { height:100%; }
.bm-bento-cell.is-lead { grid-column: span 2; }
.bm-bento-cell.is-full { grid-column: span 3; }
.bm-bento-cell.is-lead h3 { font-size:1.35rem; }
.bm-bento-cell.is-lead p { font-size:1rem; }
.bm-bento-cell.is-lead .bm-card-icon { width:64px; height:64px; font-size:1.7rem; }
@media (max-width: 991px) {
  .bm-bento { grid-template-columns: repeat(2, 1fr); }
  .bm-bento-cell.is-lead,
  .bm-bento-cell.is-full { grid-column: span 2; }
}
@media (max-width: 575px) {
  .bm-bento { grid-template-columns: 1fr; }
  .bm-bento-cell.is-lead,
  .bm-bento-cell.is-full { grid-column: span 1; }
}

/* Gold-accented feature row (Who it's for -> rows variant) */
.bm-feature-row-gold .fic { background: rgba(217,164,65,.14); color: var(--bm-gold); }

/* Persona tile (Who it's for -> tiles variant) */
.bm-persona-tile { padding:1.25rem; }
.bm-persona-tile .ic { font-size:1.4rem; margin-bottom:.5rem; }
.bm-persona-tile h4 { font-size:.98rem; }
.bm-persona-tile p { font-size:.85rem; }

/* ---------- How it works: rail variant ---------- */
.bm-rail { display:grid; grid-template-columns: repeat(4, 1fr); gap:2rem; }
.bm-rail-item { position:relative; padding-top:1.6rem; border-top:2px solid var(--bm-border); }
.bm-rail-item::before {
  content:""; position:absolute; top:-2px; left:0; width:38%; height:2px;
  background: var(--bm-grad-blue);
}
.bm-rail-num {
  display:block; font-family: var(--bm-font-head); font-weight:700;
  font-size:2.4rem; line-height:1; color: var(--bm-blue); opacity:.28; margin-bottom:.5rem;
}
.bm-rail-item h3 { font-size:1.1rem; margin-bottom:.45rem; }
.bm-rail-item p { font-size:.93rem; line-height:1.65; color: var(--bm-muted); margin:0; }
@media (max-width: 991px) { .bm-rail { grid-template-columns: repeat(2, 1fr); gap:1.75rem; } }
@media (max-width: 575px) { .bm-rail { grid-template-columns: 1fr; } }

/* ---------- How it works: timeline variant ---------- */
.bm-timeline { list-style:none; margin:0; padding:0; position:relative; }
.bm-timeline::before {
  content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px;
  background: linear-gradient(180deg, var(--bm-blue), rgba(30,94,255,.15));
}
.bm-tl-item { position:relative; display:flex; gap:1.4rem; padding-bottom:2rem; }
.bm-tl-item:last-child { padding-bottom:0; }
.bm-tl-dot {
  position:relative; z-index:1; flex:0 0 auto;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--bm-font-head); font-weight:700; font-size:1.05rem;
  background: var(--bm-grad-blue); color:#fff;
  box-shadow: 0 8px 20px -8px rgba(30,94,255,.8);
  border:4px solid var(--bm-bg);
}
.bm-section.bm-surface .bm-tl-dot { border-color: var(--bm-surface); }
.bm-tl-body { padding-top:.35rem; }
.bm-tl-body h3 { font-size:1.12rem; margin-bottom:.35rem; }
.bm-tl-body p { font-size:.95rem; line-height:1.7; color: var(--bm-muted); margin:0; }

/* ---------- Comparison table ---------- */
.bm-compare-wrap {
  background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg); box-shadow: var(--bm-shadow);
  overflow-x:auto;
}
.bm-compare { width:100%; min-width:560px; border-collapse:collapse; }
.bm-compare th, .bm-compare td { padding:1rem 1.2rem; text-align:left; vertical-align:top; }
.bm-compare thead th {
  font-family: var(--bm-font-head); font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color: var(--bm-muted);
  border-bottom:1px solid var(--bm-border); white-space:nowrap;
}
.bm-compare thead th.is-ours { color: var(--bm-blue); background: rgba(30,94,255,.045); }
.bm-compare tbody tr + tr th, .bm-compare tbody tr + tr td { border-top:1px solid var(--bm-border); }
.bm-compare tbody th {
  font-family: var(--bm-font-head); font-weight:600; font-size:.95rem;
  color: var(--bm-ink); width:34%;
}
.bm-compare tbody td { font-size:.92rem; color: var(--bm-muted); }
.bm-compare tbody td i { margin-right:.5rem; color: var(--bm-border); font-size:1rem; }
.bm-compare tbody td.is-ours { color: var(--bm-ink); font-weight:500; background: rgba(30,94,255,.045); }
.bm-compare tbody td.is-ours i { color: var(--bm-blue); }

/* ---------- Integration chip grid ---------- */
.bm-chip-grid { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }

/* ---------- Metrics band ---------- */
.bm-metric-band {
  background: var(--bm-grad-navy); border-radius: var(--bm-radius-lg);
  padding: clamp(2rem, 4vw, 3.2rem); color:#fff; box-shadow: var(--bm-shadow-lg);
  position:relative; overflow:hidden;
}
.bm-metric-band::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(700px 320px at 85% 0%, rgba(30,94,255,.35), transparent 62%);
}
.bm-metric-band > * { position:relative; z-index:1; }
.bm-metric-head { text-align:center; margin-bottom:2.2rem; }
.bm-metric-head .bm-eyebrow { color:#9fb4d8; }
.bm-metric-head h2 { color:#fff; }
.bm-metric-head p { color:#9fb4d8; max-width:620px; margin:.9rem auto 0; }

/* ---------- Large single quote ---------- */
.bm-quote-lg {
  position:relative; margin:0; text-align:center;
  background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg); padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--bm-shadow);
}
.bm-quote-lg::before {
  content:"\201C"; position:absolute; top:.4rem; left:50%; transform:translateX(-50%);
  font-family: var(--bm-font-head); font-weight:700; font-size:6rem; line-height:1;
  color: var(--bm-blue); opacity:.09; pointer-events:none;
}
.bm-quote-lg blockquote {
  position:relative; margin:0 0 1.6rem;
  font-family: var(--bm-font-head); font-weight:500;
  font-size: clamp(1.1rem, 2.1vw, 1.4rem); line-height:1.55; color: var(--bm-ink);
}
.bm-quote-lg figcaption { display:inline-flex; align-items:center; gap:.85rem; text-align:left; }
.bm-quote-lg figcaption b { display:block; font-family: var(--bm-font-head); font-size:.95rem; color: var(--bm-ink); }
.bm-quote-lg figcaption small { color: var(--bm-muted); font-size:.85rem; }

/* ---------- Requirement / checklist cards ---------- */
.bm-req-card {
  height:100%; background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius: var(--bm-radius); padding:1.6rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.bm-req-card:hover { transform: translateY(-5px); box-shadow: var(--bm-shadow); }
.bm-req-head { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.bm-req-head i {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: rgba(30,94,255,.1); color: var(--bm-blue); font-size:1.15rem; flex:0 0 auto;
}
.bm-req-head h3 { font-size:1.05rem; margin:0; }
.bm-req-card .bm-check-list li { font-size:.92rem; font-weight:500; padding:.42rem 0; }

/* ---------- FAQ: split variant ---------- */
.bm-faq-aside { position:sticky; top: calc(var(--bm-nav-h) + 24px); }
.bm-faq-aside p { color: var(--bm-muted); font-size:.95rem; }
@media (max-width: 991px) { .bm-faq-aside { position:static; } }

/* ---------- CTA: split variant ---------- */
.bm-cta-split {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; text-align:left; flex-wrap:wrap;
}
.bm-cta-split > div:first-child { flex:1 1 420px; }
.bm-cta-split p { color:#cdd9f0; max-width:520px; }

/* =====================================================================
   31. Industry page components
   ===================================================================== */

.bm-ind-hero {
  position:relative; overflow:hidden;
  background: var(--bm-grad-navy);
  padding: calc(var(--bm-nav-h) + 60px) 0 68px;
  color:#dbe6fb;
}
.bm-ind-hero::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(900px 420px at 78% -10%, rgba(30,94,255,.4), transparent 62%),
              radial-gradient(700px 380px at 8% 110%, rgba(217,164,65,.16), transparent 60%);
}
.bm-ind-hero > * { position:relative; z-index:1; }
.bm-ind-hero h1 { color:#fff; }
.bm-ind-hero .bm-lead { color:#a9bcdd; max-width:700px; }
.bm-ind-hero .bm-eyebrow { color:#9fb4d8; }
.bm-ind-hero .bm-breadcrumb { color:#8fa5c9; }
.bm-ind-hero .bm-breadcrumb a { color:#8fa5c9; }
.bm-ind-hero .bm-breadcrumb a:hover { color:#fff; }
.bm-ind-hero .bm-breadcrumb .cur { color: var(--bm-gold); }

.bm-ind-stats {
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem;
  margin-top:3rem; padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.14);
}
.bm-ind-stat { text-align:center; }
.bm-ind-stat b {
  display:block; font-family: var(--bm-font-head); font-weight:700;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height:1; color:#fff;
}
.bm-ind-stat b .suf { color: var(--bm-gold); }
.bm-ind-stat > span { display:block; margin-top:.45rem; font-size:.84rem; color:#9fb4d8; }
@media (max-width: 575px) { .bm-ind-stats { grid-template-columns: repeat(2, 1fr); gap:1.5rem 1rem; } }

/* Challenge cards - gold-tinted, deliberately unlike the blue feature cards */
.bm-challenge {
  height:100%; background: var(--bm-card); border:1px solid var(--bm-border);
  border-left:3px solid var(--bm-gold);
  border-radius: var(--bm-radius); padding:1.6rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.bm-challenge:hover { transform: translateY(-5px); box-shadow: var(--bm-shadow); }
.bm-challenge .ic {
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background: rgba(217,164,65,.14); color:#b07d1e; font-size:1.25rem; margin-bottom:.9rem;
}
.bm-challenge h3 { font-size:1.06rem; margin-bottom:.45rem; }
.bm-challenge p { font-size:.92rem; line-height:1.65; color: var(--bm-muted); margin:0; }

/* Problem -> answer rows */
.bm-solve { display:flex; flex-direction:column; gap:1rem; }
.bm-solve-row {
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:1.4rem;
  background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius: var(--bm-radius); padding:1.4rem 1.6rem;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.bm-solve-row:hover { border-color: rgba(30,94,255,.3); box-shadow: var(--bm-shadow-sm); }
.bm-solve-tag {
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.5rem;
  font-family: var(--bm-font-head); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  padding:.3rem .7rem; border-radius: var(--bm-radius-pill);
}
.bm-solve-tag.is-problem { background: rgba(217,164,65,.14); color:#b07d1e; }
.bm-solve-tag.is-answer  { background: rgba(30,94,255,.11); color: var(--bm-blue); }
.bm-solve-row p { margin:0; font-size:.94rem; line-height:1.6; }
.bm-solve-problem p { color: var(--bm-muted); }
.bm-solve-answer p { color: var(--bm-ink); font-weight:500; }
.bm-solve-arrow { font-size:1.3rem; color: var(--bm-blue); opacity:.5; }
@media (max-width: 767px) {
  .bm-solve-row { grid-template-columns: 1fr; gap:.9rem; }
  .bm-solve-arrow { transform: rotate(90deg); justify-self:center; }
}

/* Recommended-stack cards (link into Solutions pages) */
.bm-stack-card {
  display:flex; flex-direction:column; height:100%;
  background: var(--bm-card); border:1px solid var(--bm-border);
  border-radius: var(--bm-radius); padding:1.7rem;
  color: var(--bm-ink); text-decoration:none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.bm-stack-card:hover { transform: translateY(-6px); border-color: rgba(30,94,255,.34); box-shadow: 0 26px 50px -24px rgba(15,35,85,.42); color: var(--bm-ink); }
.bm-stack-icon {
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background: var(--bm-grad-blue); color:#fff; font-size:1.3rem; margin-bottom:1rem;
  box-shadow: 0 10px 22px -10px rgba(30,94,255,.75);
}
.bm-stack-card h3 { font-size:1.1rem; margin-bottom:.45rem; }
.bm-stack-card p { font-size:.93rem; line-height:1.65; color: var(--bm-muted); }
.bm-stack-card .bm-card-link { margin-top:auto; padding-top:1rem; color: var(--bm-blue); }
.bm-stack-card:hover .bm-card-link i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .bm-req-card, .bm-challenge, .bm-stack-card, .bm-solve-row { transition:none; }
  .bm-req-card:hover, .bm-challenge:hover, .bm-stack-card:hover { transform:none; }
}

/* ---------- Dark-theme corrections ----------
   #b07d1e is a dark gold that reads fine on a white card and disappears on a
   dark one, so the gold-accented pieces switch to the brighter brand gold. */
[data-bs-theme="dark"] .bm-challenge .ic,
[data-bs-theme="dark"] .bm-solve-tag.is-problem { color: var(--bm-gold); }
[data-bs-theme="dark"] .bm-challenge .ic { background: rgba(217,164,65,.18); }
[data-bs-theme="dark"] .bm-solve-tag.is-problem { background: rgba(217,164,65,.18); }

/* Card hovers need a deeper shadow on dark — the light one is invisible */
[data-bs-theme="dark"] .bm-challenge:hover,
[data-bs-theme="dark"] .bm-req-card:hover,
[data-bs-theme="dark"] .bm-stack-card:hover,
[data-bs-theme="dark"] .bm-quote-lg { box-shadow: 0 26px 50px -24px rgba(0,0,0,.7); }

/* Comparison table: the blue wash is too faint over a dark surface */
[data-bs-theme="dark"] .bm-compare thead th.is-ours,
[data-bs-theme="dark"] .bm-compare tbody td.is-ours { background: rgba(30,94,255,.12); }
[data-bs-theme="dark"] .bm-compare tbody td i { color: var(--bm-border); }

/* Watermark numerals and the rail number need more presence on dark */
[data-bs-theme="dark"] .bm-quote-lg::before { opacity:.16; }
[data-bs-theme="dark"] .bm-rail-num { opacity:.42; }







/* =====================================================================
   32. AOS entrance travel — keep it inside the viewport
   AOS parks fade-left / fade-right elements 100px to the side before they
   settle. Once columns stack (or the container margin is thinner than
   100px) that offset reaches past the viewport edge, and mobile browsers
   respond by widening the layout viewport to fit it — so the page loads
   zoomed out and scrolls sideways until the animation finishes.
   Only the resting position is overridden here; AOS's own .aos-animate
   rule is more specific and still settles every element at zero.
   ===================================================================== */

/* Stacked layouts: a sideways entrance has no meaning, so travel upward. */
@media (max-width: 991.98px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] { transform: translate3d(0, 40px, 0); }
}

/* Side-by-side, but the container gutter is narrower than 100px here —
   shorten the travel so it can never cross the viewport edge. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  [data-aos="fade-right"] { transform: translate3d(-28px, 0, 0); }
  [data-aos="fade-left"]  { transform: translate3d(28px, 0, 0); }
}

/* Same reasoning for zoom-in, which scales up from the centre and can
   push a full-width panel past the edge on the narrowest phones. */
@media (max-width: 575.98px) {
  [data-aos="zoom-in"] { transform: scale(.97); }
}

/* Belt and braces: AOS aside, nothing should ever widen the page. */
html { overflow-x: clip; }

/* =====================================================================
   33. Touch targets & mobile input behaviour
   ===================================================================== */

/* The menu button is the primary control on a phone. At 49x33 it sat under
   the 44px minimum hit size, so it gets a proper square target. */
.navbar-toggler {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
}

@media (max-width: 991.98px) {

  /* iOS Safari zooms the whole page in whenever a focused field's text is
     under 16px. Everything else about these controls is already fine —
     only the type size changes, and only where a keyboard can open. */
  .bm-form .form-control,
  .bm-form .form-select,
  .bm-leadform-fields input[type=text],
  .bm-leadform-fields input[type=email],
  .bm-leadform-fields input[type=tel],
  .bm-leadform-select,
  .bm-leadform-fields .intl-tel-input .selected-flag { font-size: 16px; }

  /* Footer links were 18px rows sitting 10px apart — too tight to hit
     reliably with a thumb. Each becomes its own padded row. */
  .bm-footer-links li { margin-bottom: 0; }
  .bm-footer-links a { display: inline-block; padding-top: .7rem; padding-bottom: .7rem; }

  /* Legal strip along the bottom of the footer */
  .bm-legal-row .list-inline-item a { display: inline-block; padding: .5rem 0; }

  /* Breadcrumb trail */
  .bm-breadcrumb a,
  .bm-breadcrumb .cur { display: inline-block; padding: .3rem 0; }

  /* The consent label is already tappable end to end; this just makes the
     box itself easier to hit and the disclosure easier to read. */
  .bm-consent input { width: 20px; height: 20px; }
  .bm-consent span { font-size: .8rem; }

  /* Interactive tabs on the payment-journey demo */
  .bm-preview-tab { min-height: 44px; }
}

/* ---------- Comparison table: stack into cards on phones ----------
   At 560px minimum the table can only be read by swiping sideways, and the
   cut-off third column gives no hint that swiping is even possible. Below
   the md breakpoint each row becomes its own card, with the column headers
   re-attached to the cells via data-label. */
@media (max-width: 767.98px) {
  .bm-compare-wrap { overflow-x: visible; }
  .bm-compare { min-width: 0; }

  /* Header row is redundant once each cell carries its own caption */
  .bm-compare thead {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  .bm-compare tbody tr {
    display: block;
    padding: 1.15rem 1.2rem;
    border-top: 1px solid var(--bm-border);
  }
  .bm-compare tbody tr:first-child { border-top: 0; }

  .bm-compare tbody th,
  .bm-compare tbody td { display: block; width: auto; border: 0; }

  .bm-compare tbody th {
    padding: 0 0 .7rem;
    font-size: 1rem;
  }

  .bm-compare tbody td {
    padding: .7rem .85rem;
    margin-top: .5rem;
    border-radius: var(--bm-radius-sm);
    background: var(--bm-surface);
  }
  .bm-compare tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--bm-font-head);
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--bm-muted);
    margin-bottom: .3rem;
  }
  .bm-compare tbody td.is-ours { background: rgba(30,94,255,.07); }
  .bm-compare tbody td.is-ours::before { color: var(--bm-blue); }
  .bm-compare tbody td i { vertical-align: -1px; }
}

/* =====================================================================
   34. Mobile menu scrolling + pinned-demo sections on small screens
   ===================================================================== */

/* ---------- Mobile menu ----------
   With a dropdown open the panel is taller than a phone screen, and the page
   behind it is pinned, so there was no way to reach the lower entries. The
   panel now scrolls on its own and stays inside the viewport.
   Only .show is targeted — Bootstrap's .collapsing needs overflow:hidden to
   animate its height, and overriding that would break the open/close motion. */
@media (max-width: 991.98px) {
  .bm-navbar .navbar-collapse.show {
    max-height: calc(100vh - var(--bm-nav-h) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* dvh accounts for the phone's collapsing address bar where supported */
  @supports (height: 100dvh) {
    .bm-navbar .navbar-collapse.show { max-height: calc(100dvh - var(--bm-nav-h) - 1rem); }
  }
  /* a little breathing room so the last link isn't flush against the edge */
  .bm-navbar .navbar-collapse.show .navbar-nav { padding-bottom: .25rem; }

  /* slim scrollbar so it reads as scrollable without dominating the panel */
  .bm-navbar .navbar-collapse.show { scrollbar-width: thin; }
  .bm-navbar .navbar-collapse.show::-webkit-scrollbar { width: 5px; }
  .bm-navbar .navbar-collapse.show::-webkit-scrollbar-thumb {
    background: var(--bm-border); border-radius: 99px;
  }
}

/* ---------- Pinned demo sections ----------
   Grid and flex children default to min-width:auto, which refuses to shrink
   below their own content. The mock browser window therefore stayed ~386px
   wide no matter how narrow the phone was, and everything past the viewport
   edge was cut off by the stage's overflow:hidden. */
@media (max-width: 991.98px) {
  .bm-journey-grid > *,
  .bm-howit-grid > *,
  .bm-screen,
  .bm-screen-wrap,
  .bm-screen-view,
  .bm-step-panel { min-width: 0; }

  /* The decorative glow is inset -5% horizontally, which alone widened the
     scrollable area by ~19px. Keep the glow, keep it inside the box. */
  .bm-screen-wrap::before { inset: -8% 0 -12% 0; }
}

@media (max-width: 575.98px) {
  .bm-screen-view { padding: 1.15rem; }
  .bm-journey.is-static .bm-step-panel { padding: 1.15rem 0; }

  /* Two-up rows inside the mock screen have no room to stay side by side */
  .bm-inp-row,
  .bm-auth-grid { grid-template-columns: 1fr; }

  /* Tokens and card numbers are unbreakable strings — let them wrap rather
     than force the whole panel wider than the phone. */
  .bm-token-row { flex-wrap: wrap; gap: .4rem; }
  .bm-token-row code { overflow-wrap: anywhere; word-break: break-word; }
  .bm-auth-card .num { overflow-wrap: anywhere; letter-spacing: .12em; }

  /* Status pills were single-line and ran off the edge */
  .bm-risk-tag,
  .bm-auth-stamp,
  .bm-journey-badge { white-space: normal; }
  .bm-risk-list li { white-space: normal; }

  .bm-screen-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* ---------- Dashboard preview tables on narrow screens ----------
   These are four-column tables inside an already-padded panel. Their
   min-content width (~348px) is wider than the panel gets on a phone, so the
   table could not shrink any further and the right-hand columns were simply
   cut off. Below the md breakpoint every row becomes a stacked block with the
   column name on the left and the value on the right — no sideways swiping,
   and it still reads like a dashboard list. */
@media (max-width: 767.98px) {
  .bm-mini-table,
  .bm-mini-table tbody { display: block; width: 100%; }

  .bm-mini-table thead {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  .bm-mini-table tr {
    display: block;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .bm-mini-table tr:last-child { border-bottom: 0; }

  .bm-mini-table td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem;
    padding: .3rem .2rem;
    border: 0;
    font-size: .86rem;
  }
  .bm-mini-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: #7f97c4;
    font-size: .7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
  }
  /* value side sits right and may wrap on its own */
  .bm-mini-table td > *,
  .bm-mini-table td { text-align: right; }
  .bm-mini-table td { min-width: 0; overflow-wrap: anywhere; }

  /* The first cell of each row reads as that row's title */
  .bm-mini-table td:first-child { font-weight: 600; }
}

/* The preview panel and its body must be allowed to shrink too, otherwise
   the pane keeps the table's old min-content width. */
.bm-preview-body,
.bm-preview-pane { min-width: 0; }
.bm-preview-pane > .row > [class^="col-"],
.bm-preview-pane > .row > [class*=" col-"] { min-width: 0; }

/* =====================================================================
   35. Developer documentation layout
   ===================================================================== */

.bm-doc-hero {
  background: var(--bm-grad-hero), var(--bm-light);
  padding: calc(var(--bm-nav-h) + 44px) 0 44px;
  border-bottom: 1px solid var(--bm-border);
}
.bm-doc-hero .bm-display { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.bm-doc-hero .bm-lead { max-width: 720px; }

.bm-doc-shell { padding: 2.6rem 0 clamp(48px, 7vw, 90px); }
.bm-doc-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 200px;
  gap: 2.6rem;
  align-items: start;
}

/* ---------- Left rail ----------
   The rail carries Bootstrap's .collapse so it can fold away on phones.
   Above the lg breakpoint it is permanent, so the collapse must be undone —
   .collapse:not(.show) is display:none and needs !important to beat. */
.bm-doc-rail-toggle { display: none; }
.bm-doc-rail-body { position: sticky; top: calc(var(--bm-nav-h) + 20px); }
@media (min-width: 992px) {
  .bm-doc-rail-body.collapse { display: block !important; }
}
.bm-doc-rail ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.bm-doc-rail li + li { margin-top: .25rem; }
.bm-doc-rail a {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .65rem .8rem; border-radius: var(--bm-radius-sm);
  color: var(--bm-ink); border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.bm-doc-rail a:hover { background: var(--bm-surface); color: var(--bm-ink); }
.bm-doc-rail a.is-current {
  background: rgba(30,94,255,.07);
  border-color: rgba(30,94,255,.25);
}
.bm-doc-rail a i { color: var(--bm-blue); font-size: 1.05rem; margin-top: .12rem; flex: 0 0 auto; }
.bm-doc-rail a span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.bm-doc-rail a strong { font-family: var(--bm-font-head); font-weight: 600; font-size: .92rem; }
.bm-doc-rail a.is-current strong { color: var(--bm-blue); }
.bm-doc-rail a small { color: var(--bm-muted); font-size: .78rem; }

.bm-doc-rail-cta {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1rem; border-radius: var(--bm-radius-sm);
  background: var(--bm-grad-blue); color: #fff;
  font-family: var(--bm-font-head); font-weight: 600; font-size: .9rem;
  box-shadow: 0 10px 22px -12px rgba(30,94,255,.8);
}
.bm-doc-rail-cta:hover { color: #fff; transform: translateY(-2px); }

/* ---------- Main column ---------- */
.bm-doc-section { scroll-margin-top: calc(var(--bm-nav-h) + 20px); }
.bm-doc-section + .bm-doc-section { margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--bm-border); }
.bm-doc-section > h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: 1rem;
}
.bm-doc-h3 { font-size: 1.1rem; margin: 1.9rem 0 .7rem; }
.bm-doc-main p { color: var(--bm-muted); line-height: 1.75; margin-bottom: 1rem; }
.bm-doc-main code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .86em; padding: .13em .42em; border-radius: 6px;
  background: rgba(30,94,255,.09); color: var(--bm-blue);
  overflow-wrap: anywhere;
}

.bm-doc-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.bm-doc-list li {
  position: relative; padding: .3rem 0 .3rem 1.4rem;
  color: var(--bm-muted); line-height: 1.7;
}
.bm-doc-list li::before {
  content: ""; position: absolute; left: .3rem; top: 1.02em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bm-blue); opacity: .6;
}

/* Code blocks */
.bm-doc-code {
  background: #071331; border: 1px solid #16305c;
  border-radius: var(--bm-radius); overflow: hidden; margin: 0 0 1.4rem;
}
.bm-doc-code .bm-code-head { position: relative; }
.bm-doc-lang {
  margin-left: auto; font-family: var(--bm-font-head);
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #7f97c4; padding: .18rem .55rem; border-radius: 99px;
  background: rgba(255,255,255,.06);
}
.bm-doc-code .bm-code-body { max-height: 460px; overflow: auto; }

/* Callouts */
.bm-doc-note {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .95rem 1.1rem; margin: 0 0 1.4rem;
  border-radius: var(--bm-radius-sm);
  border: 1px solid var(--bm-border); background: var(--bm-surface);
  font-size: .93rem; line-height: 1.65;
}
.bm-doc-note i { font-size: 1.05rem; margin-top: .12rem; flex: 0 0 auto; }
.bm-doc-note div { color: var(--bm-ink); }
.bm-doc-note.is-info { border-color: rgba(30,94,255,.3); background: rgba(30,94,255,.06); }
.bm-doc-note.is-info i { color: var(--bm-blue); }
.bm-doc-note.is-warn { border-color: rgba(217,164,65,.4); background: rgba(217,164,65,.1); }
.bm-doc-note.is-warn i { color: #b07d1e; }
.bm-doc-note.is-ok   { border-color: rgba(55,214,122,.4); background: rgba(55,214,122,.1); }
.bm-doc-note.is-ok i { color: #1a9d54; }
[data-bs-theme="dark"] .bm-doc-note.is-warn i { color: var(--bm-gold); }

/* Tables */
.bm-doc-tablewrap {
  border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
  overflow-x: auto; margin: 0 0 1.4rem; background: var(--bm-card);
}
.bm-doc-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bm-doc-table thead th {
  text-align: left; white-space: nowrap;
  font-family: var(--bm-font-head); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--bm-muted);
  padding: .8rem 1rem; border-bottom: 1px solid var(--bm-border);
}
.bm-doc-table tbody th,
.bm-doc-table tbody td { padding: .8rem 1rem; text-align: left; vertical-align: top; color: var(--bm-muted); }
.bm-doc-table tbody th { color: var(--bm-ink); font-weight: 600; }
.bm-doc-table tbody tr + tr th,
.bm-doc-table tbody tr + tr td { border-top: 1px solid var(--bm-border); }

.bm-doc-type {
  font-family: ui-monospace, monospace; font-size: .8rem;
  color: var(--bm-muted); background: var(--bm-surface);
  padding: .12rem .45rem; border-radius: 6px; border: 1px solid var(--bm-border);
}
.bm-doc-req, .bm-doc-opt {
  font-family: var(--bm-font-head); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .18rem .5rem; border-radius: 99px; white-space: nowrap;
}
.bm-doc-req { background: rgba(30,94,255,.12); color: var(--bm-blue); }
.bm-doc-opt { background: var(--bm-surface); color: var(--bm-muted); border: 1px solid var(--bm-border); }

.bm-verb {
  display: inline-block; min-width: 58px; text-align: center;
  font-family: var(--bm-font-head); font-size: .7rem; font-weight: 700;
  letter-spacing: .05em; padding: .25rem .55rem; border-radius: 6px; color: #fff;
}
.bm-verb.is-get    { background: #1a9d54; }
.bm-verb.is-post   { background: var(--bm-blue); }
.bm-verb.is-delete { background: #d1495b; }
.bm-verb.is-patch, .bm-verb.is-put { background: #b07d1e; }

/* Prev / next */
.bm-doc-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--bm-border);
}
.bm-doc-pager-link {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem 1.2rem; border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius); color: var(--bm-ink);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bm-doc-pager-link:hover { border-color: rgba(30,94,255,.35); transform: translateY(-3px); box-shadow: var(--bm-shadow-sm); color: var(--bm-ink); }
.bm-doc-pager-link small { color: var(--bm-muted); font-size: .78rem; }
.bm-doc-pager-link strong { font-family: var(--bm-font-head); font-size: .98rem; }
.bm-doc-pager-link.is-next { text-align: right; align-items: flex-end; }

/* ---------- Right rail ---------- */
.bm-doc-toc { position: sticky; top: calc(var(--bm-nav-h) + 20px); }
.bm-doc-toc h2 {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--bm-muted); margin-bottom: .8rem;
}
.bm-doc-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bm-border); }
.bm-doc-toc a {
  display: block; padding: .38rem 0 .38rem .9rem; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .87rem; color: var(--bm-muted); line-height: 1.45;
}
.bm-doc-toc a:hover { color: var(--bm-blue); }
.bm-doc-toc a.is-active { color: var(--bm-blue); border-left-color: var(--bm-blue); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .bm-doc-grid { grid-template-columns: 230px minmax(0, 1fr); gap: 2.2rem; }
  .bm-doc-toc { display: none; }
}
@media (max-width: 991.98px) {
  .bm-doc-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .bm-doc-rail-body { position: static; }

  /* The rail becomes a collapsible panel above the content */
  .bm-doc-rail-toggle {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .85rem 1.1rem; border-radius: var(--bm-radius-sm);
    background: var(--bm-card); border: 1px solid var(--bm-border);
    font-family: var(--bm-font-head); font-weight: 600; font-size: .95rem;
    color: var(--bm-ink);
  }
  .bm-doc-rail-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
  .bm-doc-rail-toggle .bi-chevron-down { transition: transform .25s ease; font-size: .85rem; }
  .bm-doc-rail-body { padding-top: .8rem; }
  .bm-doc-section + .bm-doc-section { margin-top: 2.2rem; padding-top: 1.8rem; }
}
@media (max-width: 575.98px) {
  .bm-doc-pager { grid-template-columns: 1fr; }
  .bm-doc-pager-link.is-next { text-align: left; align-items: flex-start; }

  /* Doc tables stack, same pattern as the rest of the site */
  .bm-doc-table, .bm-doc-table tbody { display: block; width: 100%; }
  .bm-doc-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .bm-doc-table tbody tr { display: block; padding: .85rem 1rem; }
  .bm-doc-table tbody tr + tr { border-top: 1px solid var(--bm-border); }
  .bm-doc-table tbody th,
  .bm-doc-table tbody td {
    display: flex; gap: 1rem; justify-content: space-between; align-items: baseline;
    padding: .28rem 0; border: 0 !important; text-align: right;
  }
  .bm-doc-table tbody th::before,
  .bm-doc-table tbody td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-family: var(--bm-font-head); font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--bm-muted);
  }
  .bm-doc-tablewrap { overflow-x: visible; }
  .bm-doc-code .bm-code-body { padding: 1rem; }
}

/* ---------- Thank-you page (pages/thankyou.php) ---------- */
.bm-thanks-mark {
  width:84px; height:84px; margin:0 auto 1.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:#fff;
  background: linear-gradient(135deg, #1e5eff, #6d5cf5);
  box-shadow: 0 12px 30px rgba(30,94,255,.32);
}

/* Countdown on the boarding hand-off pages (thankyou.php / calendly.php) */
.bm-thanks-counter {
  width:64px; height:64px; margin:0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--bm-font-head); font-weight:700; font-size:1.6rem;
  color: var(--bm-blue); background: rgba(30,94,255,.10);
  border:2px solid rgba(30,94,255,.28);
}
.bm-thanks-counter.zoom { animation: bmCountZoom .3s ease; }
@keyframes bmCountZoom {
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
  .bm-thanks-counter.zoom { animation: none; }
}