/* =========================================================================
   BashMaps — Home Page Styles — Editorial × Archival v3
   Uses bm-tokens.css variables throughout. No hardcoded colors.
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
  /* Prevent any element from causing horizontal scroll on mobile */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

/* ====================================================================
   CUSTOM CURSOR — BashMaps V2 (navy teardrop + orange splined hub)
   Three angle states using SVG variants:
     · default 45°  (idle — tip top-left)
     · hover   28°  (tilts further left when over interactive elements)
     · active  12°  (tilts deeper when clicking)
   SVG variants include linear gradient body, radial hub, drop shadow.
   Hotspot (5,5) at default-tip — body 'swings' around that point as it
   rotates, click point stays anchored. 32x32 native size.
   ==================================================================== */
html,
html * {
  cursor: url('https://diqzt91icz6ae.cloudfront.net/c4ff12da-7bca-4d38-97c8-3ba660bcee0f/assets/cursors/bashmaps-cursor-v2-32.svg') 5 5, default;
}

/* Interactive elements: same cursor, pointer fallback for old browsers */
a,
button,
[role="button"],
.bm-btn-primary,
.bm-btn-gold,
.bm-btn-outline,
.bm-btn-ghost,
.bm-hero-line,
.bm-index-row,
.bm-stat-item,
.bm-price-card,
.gallery-slider .item img,
.bm-device-img,
.dropdown-item,
.navbar-toggler {
  cursor: url('https://diqzt91icz6ae.cloudfront.net/c4ff12da-7bca-4d38-97c8-3ba660bcee0f/assets/cursors/bashmaps-cursor-v2-32.svg') 5 5, pointer;
}

/* Hover state — cursor tilts further left (~17° more counterclockwise) */
a:hover,
button:hover,
[role="button"]:hover,
.bm-btn-primary:hover,
.bm-btn-gold:hover,
.bm-btn-outline:hover,
.bm-btn-ghost:hover,
.bm-hero-line:hover,
.bm-index-row:hover,
.bm-stat-item:hover,
.bm-price-card:hover,
.gallery-slider .item img:hover,
.bm-device-img:hover,
.dropdown-item:hover,
.navbar-toggler:hover {
  cursor: url('https://diqzt91icz6ae.cloudfront.net/c4ff12da-7bca-4d38-97c8-3ba660bcee0f/assets/cursors/bashmaps-cursor-v2-32-hover.svg') 5 5, pointer;
}

/* Active (mousedown) — cursor tilts even further */
a:active,
button:active,
[role="button"]:active,
.bm-btn-primary:active,
.bm-btn-gold:active,
.bm-btn-outline:active,
.bm-btn-ghost:active,
.bm-index-row:active,
.bm-stat-item:active,
.bm-price-card:active,
.gallery-slider .item img:active,
.dropdown-item:active {
  cursor: url('https://diqzt91icz6ae.cloudfront.net/c4ff12da-7bca-4d38-97c8-3ba660bcee0f/assets/cursors/bashmaps-cursor-v2-32-active.svg') 5 5, pointer;
}

/* Click anywhere — JS toggles .is-clicking on body during mousedown.
   Active cursor fires globally, even on whitespace / non-interactive areas. */
body.is-clicking,
body.is-clicking * {
  cursor: url('https://diqzt91icz6ae.cloudfront.net/c4ff12da-7bca-4d38-97c8-3ba660bcee0f/assets/cursors/bashmaps-cursor-v2-32-active.svg') 5 5, default !important;
}

/* Text inputs keep the I-beam so users know they can type */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select,
[contenteditable] {
  cursor: text;
}

/* Disabled controls show not-allowed */
[disabled],
.disabled,
button:disabled {
  cursor: not-allowed !important;
}

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--bm-orange-hot); }

/* ---- NAVBAR ---- */
#main-navbar {
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
  padding: 18px 0;
}

#main-navbar.scrolled {
  background: linear-gradient(90deg, rgba(10,14,28,0.97), rgba(19,28,62,0.95) 60%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(224,145,60,0.2);
  box-shadow: 0 1px 30px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(224,145,60,0.08);
  padding: 12px 0;
}

#main-navbar .navbar-brand img {
  transition: opacity var(--dur-fast) var(--ease-out);
  /* Optical centering: the map pin adds height above the wordmark, so the
     visible text sits ~3px below the image's geometric center. */
  transform: translateY(-3px);
}

#main-navbar .nav-link {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--text-body-sm);
  color: rgba(245,240,225,0.6);
  padding: 6px 14px;
  transition: color var(--dur-fast) var(--ease-out);
  letter-spacing: 0.01em;
}

#main-navbar .nav-link:hover { color: var(--pearl); }

.bm-hamburger-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--pearl);
  margin: 5px 0;
  border-radius: 0;
  transition: all var(--dur-base) var(--ease-out);
}

.navbar-toggler {
  border: none;
  padding: 6px 4px;
  background: transparent !important;
}
.navbar-toggler:focus { box-shadow: none; }

.navbar-collapse {
  background: rgba(19, 28, 62, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 0;
  border: 1px solid var(--line);
  margin-top: 8px;
  padding: 12px 8px;
}

@media (min-width: 992px) {
  .navbar-collapse {
    background: transparent;
    backdrop-filter: none;
    margin-top: 0;
    padding: 0;
    border: none;
  }
}

/* Expanded navbar — items never wrap inside themselves */
@media (min-width: 992px) {
  #main-navbar .nav-link,
  #main-navbar .navbar-nav .btn {
    white-space: nowrap;
  }
}

/* Tight range just above the mobile collapse — pull paddings and gaps in
   so the full menu holds a single line until the hamburger takes over */
@media (min-width: 992px) and (max-width: 1199px) {
  #main-navbar .nav-link {
    padding: 6px 8px;
    font-size: 13px;
  }
  #main-navbar .navbar-nav.ms-auto {
    gap: 6px !important;
  }
  #main-navbar .navbar-nav .btn-sm {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Mobile nav — flatten all button-styled items to plain nav links */
@media (max-width: 991px) {
  #main-navbar .navbar-nav.ms-auto {
    gap: 0 !important;
    align-items: flex-start !important;
    border-top: 1px solid rgba(245,240,225,0.08);
    margin-top: 8px;
    padding-top: 8px;
  }
  #main-navbar .navbar-nav .btn {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(245,240,225,0.6) !important;
    font-family: var(--font-body);
    font-weight: var(--w-medium);
    font-size: var(--text-body-sm);
    letter-spacing: 0.01em;
    padding: 6px 14px;
    transform: none !important;
  }
  #main-navbar .navbar-nav .btn:hover {
    color: var(--pearl) !important;
    background: transparent !important;
  }
}

/* ---- BUTTONS ---- */
.bm-btn-primary {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  color: var(--carbon);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 16px rgba(224,145,60,0.25), 0 0 0 0 rgba(212,103,26,0);
  transition: box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.bm-btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 28px rgba(224,145,60,0.4), 0 0 22px rgba(212,103,26,0.25);
  color: var(--carbon);
  transform: translateY(-1px);
}
.bm-btn-primary:active { transform: scale(0.97); }

.bm-btn-outline {
  background: transparent;
  color: var(--pearl);
  border: 1px solid rgba(245,240,225,0.3);
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--text-body-sm);
  padding: 7px 18px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
  text-decoration: none;
}
.bm-btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.bm-btn-ghost {
  background: transparent;
  color: rgba(245,240,225,0.55);
  border: none;
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--text-body-sm);
  padding: 7px 12px;
  transition: color var(--dur-fast);
  text-decoration: none;
}
.bm-btn-ghost:hover { color: var(--pearl); }

.bm-btn-gold {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  color: var(--carbon);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 16px rgba(224,145,60,0.2);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
  text-decoration: none;
}
.bm-btn-gold:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 28px rgba(224,145,60,0.4), 0 0 22px rgba(212,103,26,0.2);
  color: var(--carbon);
  transform: translateY(-1px);
}

/* App store badges */
.bm-store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.bm-store-badges a,
.bm-badge-link {
  display: block;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.bm-store-badges a:hover,
.bm-badge-link:hover { transform: translateY(-2px); opacity: 0.9; }
.bm-store-badges img { width: 150px; height: auto; display: block; }

/* ---- DROPDOWN ---- */
.bm-dropdown {
  background: var(--navy-deep);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: 8px 0;
}
.bm-dropdown .dropdown-header {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--text-body-sm);
  color: var(--fg-2);
  padding: 8px 16px;
}
.bm-dropdown .dropdown-item {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--fg-2);
  padding: 10px 16px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.bm-dropdown .dropdown-item:hover {
  background: rgba(245,240,225,0.06);
  color: var(--fg-1);
}
.bm-dropdown .dropdown-divider { border-color: var(--line); margin: 4px 0; }
.bm-dropdown button.dropdown-item { width: 100%; text-align: left; background: none; border: none; }

/* ====================================================================
   HERO — Editorial Asymmetric Layout
   ==================================================================== */

#hero-solid {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* No hard border-bottom — gradient bleeds into marquee */

  /* Blended: navy → deep black. CRT scanlines sit over the gradient. */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.007) 0 1px, transparent 1px 4px),
    /* Tip 3: more prominent gradient accents — orange spark + gold halo */
    radial-gradient(circle 380px at 88% 78%, rgba(212,103,26,0.18) 0%, transparent 70%),
    radial-gradient(circle 460px at 12% 22%, rgba(224,145,60,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 28% 48%, rgba(224,145,60,0.09) 0%, transparent 55%),
    linear-gradient(160deg,
      #253070 0%,      /* navy-2 lifted */
      #1d2858 25%,     /* brand navy */
      #1a2245 50%,     /* navy → deeper */
      #131828 75%,     /* deep dark */
      #0d0f1a 100%     /* near-black anchor */
    );
}

/* Grid lines + grain overlay — fades at edges via radial mask */
#hero-solid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(224,145,60,0.03) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(224,145,60,0.03) 1px, transparent 1px) 0 0 / 44px 44px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 45%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 85% 85% at 50% 45%, black 30%, transparent 80%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Thin horizontal rule across hero — editorial page structure (orange) */
#hero-solid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(212,103,26,0.4);
  z-index: 1;
}

/* ---- Hero inner wrapper — full height, flex column ---- */
.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: stretch;
  padding-top: 100px;   /* clears fixed navbar */
}

/* ---- Two-column layout — headline dominant, device showcase right ---- */
.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr auto;
  gap: 0;
  min-height: calc(100vh - 100px);
}

/* Left column — headline block. Vertical separator in brand orange. */
.hero-left {
  padding: var(--sp-7) var(--sp-6) var(--sp-7) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(212,103,26,0.4);
}

/* Right column — device showcase */
.hero-right {
  padding: var(--sp-7) 0 var(--sp-7) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ====================================================================
   HERO DEVICE — phone mockup with 2026 movement
   Three layered motions: gradient orb drift, phone Y-float, mouse tilt
   ==================================================================== */
.bm-hero-device {
  position: relative;
  width: 100%;
  /* Tighter container — back phone needs to stay tucked behind, not
     spread out beside the front. */
  max-width: 340px;
  perspective: 1400px;
  transform-style: preserve-3d;
  margin: 0 auto;
}

/* Stage holds both iPhones — single tilt + float on the group.
   Mouse-driven 3D tilt is applied here so both phones rotate as a rigid
   unit. That way the front phone gets its parallax tilt without exposing
   more of the back phone (they move together, relative gap stays fixed). */
.bm-iphone17-stage {
  position: relative;
  width: 100%;
  /* Front phone is 78% of stage width × 2.1 aspect → height ≈ stage * 1.64.
     Stage padding-bottom acts as height anchor since children are absolute. */
  padding-bottom: 165%;
  transform-style: preserve-3d;
  transform:
    rotateY(var(--tilt-y, 0deg))
    rotateX(var(--tilt-x, 0deg));
  transition: transform 0.6s var(--ease-out);
  transform-origin: center center;
  will-change: transform;
}

/* Slow-drifting gradient orb behind phone — animated breathe */
.bm-hero-orb {
  position: absolute;
  inset: -12% -18%;
  background:
    radial-gradient(circle 55% at 32% 32%, rgba(212,103,26,0.28) 0%, transparent 60%),
    radial-gradient(circle 60% at 68% 68%, rgba(224,145,60,0.22) 0%, transparent 65%);
  filter: blur(48px);
  z-index: 0;
  opacity: 0.85;
  animation: bm-orb-drift 14s ease-in-out infinite;
  will-change: transform;
}

@keyframes bm-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%      { transform: translate(-3%, 4%)  scale(1.06) rotate(2deg); }
  66%      { transform: translate(4%, -3%)  scale(0.94) rotate(-2deg); }
}

/* iPhone 17 Pro — Cosmic Orange titanium frame with Dynamic Island.
   Built in pure CSS so it scales crisply, takes our motion, and avoids
   shipping another binary asset. Floats gently and tilts with mouse. */
.bm-iphone17 {
  position: absolute;
  aspect-ratio: 200 / 420;
  transform-style: preserve-3d;
  transition:
    transform 0.6s var(--ease-out),
    filter 0.6s var(--ease-out),
    opacity 0.6s var(--ease-out);
  will-change: transform, translate;
}

/* FRONT phone — primary, sits left side of stage. Floats only.
   Wider (78%) so it dominates and naturally covers more of the back phone. */
.bm-iphone17-front {
  width: 78%;
  left: 0;
  top: 0;
  z-index: 2;
  filter:
    drop-shadow(0 32px 64px rgba(0,0,0,0.72))
    drop-shadow(0 0 56px rgba(255,122,26,0.22));
  animation: bm-phone-float 7s ease-in-out infinite;
}

/* BACK phone — 75% of front phone size (front 78% × 0.75 ≈ 59% stage).
   Sits at the right edge of the stage, ~63% covered by the front phone
   in idle state. Static Z-axis rotation that does NOT change on hover. */
.bm-iphone17-back {
  width: 59%;
  right: 0;
  top: 6%;
  z-index: 1;
  transform: rotate(3deg);
  filter:
    drop-shadow(0 24px 48px rgba(0,0,0,0.7))
    drop-shadow(0 0 32px rgba(212,103,26,0.12))
    brightness(0.7)
    saturate(0.78);
  animation: bm-phone-float-rev 8s ease-in-out infinite;
}

/* Hover — back phone slides right far enough that ~80% of it shows.
   translateX 43% of element width ≈ 25% of stage right shift, leaving
   only the back phone's left ~20% covered by the front. Rotation static. */
.bm-hero-device:hover .bm-iphone17-back {
  transform: translateX(43%) rotate(3deg);
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.75))
    drop-shadow(0 0 50px rgba(212,103,26,0.28))
    brightness(1)
    saturate(1);
}

.bm-hero-device:hover .bm-iphone17-front {
  filter:
    drop-shadow(0 42px 80px rgba(0,0,0,0.78))
    drop-shadow(0 0 70px rgba(255,122,26,0.32));
}

@keyframes bm-phone-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Reverse-phase float for back phone so they don't bob in lockstep */
@keyframes bm-phone-float-rev {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 6px; }
}

/* Outer titanium shell — cosmic orange brushed gradient */
.bm-iphone17-shell {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 9.5% / 4.5%;
  padding: 4px;
  background:
    /* Specular sheen along the top edge */
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 6%),
    /* Bottom edge specular */
    linear-gradient(0deg, rgba(255,255,255,0.10) 0%, transparent 5%),
    /* Side titanium gradient — light hits top-left */
    linear-gradient(135deg,
      #ffa86a 0%,
      #ff7a30 18%,
      #c9580f 42%,
      #6f2e08 70%,
      #ad4a14 100%);
  box-shadow:
    /* Hairline highlight */
    inset 0 0 0 1px rgba(255,210,160,0.45),
    /* Inner shadow — gives the band thickness */
    inset 0 0 0 4px rgba(0,0,0,0.55),
    /* Outer warm rim */
    0 0 0 1px rgba(255,170,100,0.4);
}

/* Inner display */
.bm-iphone17-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8.5% / 4%;
  overflow: hidden;
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.9),
    inset 0 1px 2px rgba(0,0,0,0.5);
}

.bm-iphone17-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Dynamic Island — small black pill sitting on the screen at top */
.bm-iphone17-island {
  position: absolute;
  top: 1.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 3.2%;
  background: #000;
  border-radius: 999px;
  z-index: 3;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 -1px 2px rgba(255,255,255,0.06);
}

/* Side button bumps — thin titanium accents on the frame edges */
.bm-iphone17-side {
  position: absolute;
  background: linear-gradient(90deg, #c9580f, #6f2e08, #c9580f);
  border-radius: 1px;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(255,210,160,0.3),
    0 1px 2px rgba(0,0,0,0.4);
}
.bm-iphone17-side-action  { left: -2px;   top: 17%; width: 3px; height: 4%;  }
.bm-iphone17-side-vol-up  { left: -2px;   top: 26%; width: 3px; height: 7%;  }
.bm-iphone17-side-vol-dn  { left: -2px;   top: 35%; width: 3px; height: 7%;  }
.bm-iphone17-side-power   { right: -2px;  top: 24%; width: 3px; height: 11%; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bm-hero-orb,
  .bm-iphone17 { animation: none; }
  .bm-iphone17 { transition: none; }
}

/* Eyebrow tag row */
.hero-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.hero-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,225,0.5);
  border: 1px solid rgba(245,240,225,0.15);
  padding: 5px 12px;
}

.hero-tag-live {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid rgba(212,103,26,0.4);
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse-live 1.8s infinite;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0%   { box-shadow: 0 0 0 0 rgba(212,103,26,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(212,103,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,103,26,0); }
}

/* Anchor headline — pearl/silver shine with backlit depth.
   Vertical gradient mimics light hitting metal: bright top, mid silver
   dip for shadow, bright bottom rim. drop-shadow gives backlit glow. */
.hero-headline {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: clamp(56px, 9vw, 130px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);

  background: linear-gradient(180deg,
    #ffffff 0%,        /* top spec — light source */
    #F5F0E1 22%,       /* pearl */
    #C7C2B5 52%,       /* silver dip — depth shadow */
    #DAD4C5 68%,
    #F5F0E1 86%,
    #ffffff 100%);     /* bottom rim spec */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* Backlit glow + dropped shadow for depth */
  filter:
    drop-shadow(0 14px 28px rgba(0,0,0,0.55))
    drop-shadow(0 0 72px rgba(245,240,225,0.1));
}

/* ====================================================================
   TAGLINE STACK — three lines, longest on top, hover breathes
   ==================================================================== */
.bm-hero-lines {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bm-hero-line {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.5;
  color: rgba(245,240,225,0.72);
  letter-spacing: 0.01em;
  display: inline-block;
  align-self: flex-start;
  transform-origin: left center;
  /* No cursor override — defer to the universal BashMaps SVG cursor.
     Was 'cursor: default' which leaked the OS default at edges. */
  transition:
    transform 0.45s var(--ease-out),
    color 0.3s var(--ease-out),
    text-shadow 0.45s var(--ease-out);
}

.bm-hero-line:hover {
  transform: scale(1.05);
  color: var(--pearl);
  text-shadow: 0 0 24px rgba(245,240,225,0.18);
}

@media (prefers-reduced-motion: reduce) {
  .bm-hero-line { transition: color 0.2s linear; }
  .bm-hero-line:hover { transform: none; }
}

/* Alert variant — single punchy tagline on a solid orange plate */
.bm-hero-line-alert {
  background: var(--orange);
  color: var(--pearl);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  padding: 10px 18px;
  box-shadow: 0 4px 20px rgba(212, 103, 26, 0.35);
}

.bm-hero-line-alert:hover {
  color: var(--pearl);
  text-shadow: none;
  box-shadow: 0 6px 28px rgba(212, 103, 26, 0.5);
}

/* Right-side stat panel — glass HUD cell */
.hero-stat-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(224,145,60,0.22);
  margin-bottom: var(--sp-6);
  background: rgba(8,10,22,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(224,145,60,0.06);
  overflow: hidden;
}

/* Top highlight stripe — Jarvis panel ::before pattern */
.hero-stat-panel::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(224,145,60,0.45) 50%, transparent 95%);
  flex-shrink: 0;
}

.hero-stat-entry {
  padding: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid rgba(224,145,60,0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: background var(--dur-fast);
}
.hero-stat-entry:last-child { border-bottom: none; }
.hero-stat-entry:hover { background: rgba(224,145,60,0.04); }

.hero-stat-num {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--pearl);
}

.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,225,0.4);
}

/* Right side editorial caption block */
.hero-caption-block {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}

.hero-caption-block p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(245,240,225,0.4);
  line-height: 1.6;
  margin: 0;
}

/* Bottom strip: store badges */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Scroll hint chevron — orange to match the hero/marquee line */
.hero-scroll-hint {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: var(--sp-5) 0 var(--sp-5);
  color: rgba(212,103,26,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation: bm-bounce 2.4s ease-in-out infinite;
  transition: color var(--dur-base);
}
.hero-scroll-hint:hover { color: var(--orange); }

@keyframes bm-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* Mobile hero: stack vertically — drop 100vh constraint */
@media (max-width: 767px) {
  #hero-solid {
    min-height: auto;
  }
  .hero-content {
    padding-top: 90px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero-left {
    padding: var(--sp-5) 0 var(--sp-5);
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .hero-right {
    padding: var(--sp-5) 0 var(--sp-5);
  }
  .bm-hero-device { max-width: 280px; }
  .hero-headline { font-size: clamp(48px, 13vw, 88px); }
  /* Legacy stat panel rules — kept for safety, no longer used */
  .hero-stat-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .hero-stat-entry:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* ====================================================================
   MARQUEE TICKER
   ==================================================================== */
.bm-marquee-strip {
  background: linear-gradient(to bottom, #1e2030 0%, #1c1e2c 100%);
  border-top: 1px solid rgba(212,103,26,0.4);
  /* No bottom border — fades into transition gradient */
  overflow: hidden;
  padding: 12px 0;
}

.bm-marquee-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: bm-marquee 40s linear infinite;
  width: max-content;
}
.bm-marquee-strip:hover .bm-marquee-track { animation-play-state: paused; }

.bm-marquee-track span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Orange toned — matches the warm radial accents in the hero */
  color: rgba(212,103,26,0.78);
  padding: 0 20px;
}

.bm-marquee-sep {
  color: rgba(212,103,26,0.28) !important;
  letter-spacing: 0 !important;
  padding: 0 4px !important;
}

@keyframes bm-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ====================================================================
   SECTION FOUNDATIONS
   ==================================================================== */
.bm-section {
  padding: var(--sp-9) 0;
}

/* Dark sections — blended + subtle gold grid + accent gradient blob */
.bm-section-dark {
  position: relative;
  background:
    linear-gradient(rgba(224,145,60,0.018) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(224,145,60,0.018) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(circle 540px at 92% 12%, rgba(212,103,26,0.13) 0%, transparent 65%),
    radial-gradient(circle 480px at 8% 88%, rgba(224,145,60,0.12) 0%, transparent 65%),
    linear-gradient(160deg, #1a2245 0%, #1e2030 50%, #0e111e 100%);
}
.bm-section-navy {
  position: relative;
  background:
    linear-gradient(rgba(224,145,60,0.018) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(224,145,60,0.018) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(circle 540px at 8% 12%, rgba(212,103,26,0.13) 0%, transparent 65%),
    radial-gradient(circle 480px at 92% 88%, rgba(224,145,60,0.12) 0%, transparent 65%),
    linear-gradient(145deg, #1d2858 0%, #1a2245 50%, #101526 100%);
}

/* Smooth gradient bridge from dark → pearl */
.bm-transition-fade {
  height: 140px;
  background: linear-gradient(to bottom, #1e2030 0%, var(--pearl) 100%);
  margin: 0;
  padding: 0;
}

/* Light section — editorial pearl */
.bm-section-light {
  background: var(--bg-light);
  color: var(--fg-light-1);
}
.bm-section-light body,
.bm-section-light p,
.bm-section-light span {
  color: var(--fg-light-2);
}

/* Subtle dot grid for light surface sections */
.bm-section-light-dot {
  background: var(--bg-light);
  background-image: radial-gradient(rgba(109,112,124,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bm-section-header {
  margin-bottom: var(--sp-7);
}

.bm-section-header .bm-eyebrow {
  margin-bottom: var(--sp-3);
  display: flex;
}

/* Section heading — anchor font */
.bm-section-header h2 {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
  margin-bottom: var(--sp-3);
}
.bm-section-light .bm-section-header h2 {
  color: var(--fg-light-1);
}

/* ====================================================================
   FEATURE LIST — modular, mobile-first, scroll-stagger reveal
   Light/airy archival list. Always-visible primary content (mobile-safe).
   Desktop hover adds a subtle wash + marker extension + extra detail line.
   ==================================================================== */

.bm-section-lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--fg-light-2);
  max-width: 640px;
  margin: var(--sp-3) 0 0;
}
.bm-section-light .bm-section-lead { color: var(--fg-light-2); }

.bm-feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-light);
}

.bm-feat {
  --row-pad: clamp(18px, 2vw, 28px);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.8fr) auto;
  gap: clamp(10px, 1.8vw, 24px);
  align-items: center;
  padding: var(--row-pad) 0;
  border-bottom: 1px solid var(--line-light);
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s var(--ease-out) calc(var(--idx, 1) * 70ms),
    transform 0.55s var(--ease-out) calc(var(--idx, 1) * 70ms),
    background-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.bm-feat-list.is-visible .bm-feat {
  opacity: 1;
  transform: translateY(0);
}

.bm-feat-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-lo);
}

.bm-feat-title {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-light-1);
  margin: 0;
  transition: color var(--dur-base) var(--ease-out);
}

.bm-feat-desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 400;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
}

.bm-feat-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-lo);
  border: 1px solid rgba(224,145,60,0.35);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

/* Left accent + tint on hover — box-shadow avoids any layout shift */
@media (hover: hover) {
  .bm-feat:hover {
    background-color: rgba(212,103,26,0.04);
    box-shadow: inset 3px 0 0 var(--orange);
  }
  .bm-feat:hover .bm-feat-title { color: var(--orange); }
  .bm-feat:hover .bm-feat-num   { color: var(--orange); }
  .bm-feat:hover .bm-feat-tag {
    color: var(--orange);
    border-color: rgba(212,103,26,0.6);
    background: rgba(212,103,26,0.08);
  }
}

.bm-feat:focus-within {
  background-color: rgba(212,103,26,0.04);
  box-shadow: inset 3px 0 0 var(--orange);
}

/* Mobile — stack desc below title/tag row */
@media (max-width: 767px) {
  .bm-feat {
    grid-template-columns: 36px 1fr auto;
    grid-template-areas:
      "num title tag"
      ".   desc  desc";
    gap: 6px 12px;
    padding: 18px 0;
    align-items: start;
  }
  .bm-feat-num  { grid-area: num; padding-top: 0.2em; font-size: 10px; }
  .bm-feat-title { grid-area: title; font-size: 20px; line-height: 1.1; }
  .bm-feat-desc  { grid-area: desc; font-size: 13px; padding-top: 2px; }
  .bm-feat-tag   { grid-area: tag; align-self: start; font-size: 9px; padding: 4px 9px; margin-top: 0.15em; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-feat,
  .bm-feat-title,
  .bm-feat-num,
  .bm-feat-tag {
    transition: none !important;
  }
}

/* ====================================================================
   ARCHIVAL INDEX TABLE — legacy bm-index-* (kept for any other uses)
   ==================================================================== */
.bm-index-table {
  width: 100%;
  border-top: 1px solid var(--line-light);
}

.bm-index-row {
  display: grid;
  grid-template-columns: 48px 1fr 2fr 28px;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-light);
  transition: background var(--dur-base) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
  cursor: default;
}

.bm-index-row:hover {
  background: rgba(224,145,60,0.04);
  padding-left: 8px;
  border-bottom-color: rgba(224,145,60,0.35);
}

.bm-index-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  flex-shrink: 0;
}

.bm-section-light .bm-index-num {
  color: var(--gold-lo);
}

.bm-index-title {
  font-family: var(--font-anchor);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 900;
  color: var(--fg-light-1);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* On dark sections */
.bm-section-dark .bm-index-title,
.bm-section-navy .bm-index-title {
  color: var(--pearl);
}

.bm-index-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg-light-2);
  line-height: 1.6;
}
.bm-section-dark .bm-index-desc,
.bm-section-navy .bm-index-desc {
  color: rgba(245,240,225,0.5);
}

.bm-index-arrow {
  font-size: 16px;
  color: var(--gold);
  text-align: right;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-base), transform var(--dur-base);
}
.bm-index-row:hover .bm-index-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile: stack index rows */
@media (max-width: 767px) {
  .bm-index-row {
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 16px;
    padding: 20px 0;
  }
  .bm-index-num { grid-row: 1; }
  .bm-index-title { grid-row: 1; font-size: 24px; }
  .bm-index-desc { grid-row: 2; grid-column: 1 / -1; padding-left: 48px; }
  .bm-index-arrow { display: none; }
}

/* ====================================================================
   SPLIT SECTIONS — Events / Community
   ==================================================================== */
.bm-split-section {
  padding: var(--sp-9) 0;
}

.bm-split-section .bm-split-text {
  padding: var(--sp-6) 0;
}

.bm-split-section .bm-split-text h2 {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: var(--text-h1);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--pearl);
  margin-bottom: var(--sp-5);
}

.bm-split-section .bm-split-text p {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--w-light);
  color: rgba(245,240,225,0.6);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-5);
}

.bm-split-subpoint {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  align-items: flex-start;
}

.bm-split-subpoint .bm-subpoint-icon {
  width: 18px;
  height: 18px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 3px;
}

.bm-split-subpoint p {
  font-size: var(--text-body-sm) !important;
  color: rgba(245,240,225,0.45) !important;
  margin: 0 !important;
}

.bm-split-section .col-md-5 { position: relative; }
.bm-split-section .col-md-5::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212,103,26,0.14) 0%, rgba(224,145,60,0.07) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bm-device-img {
  max-width: 320px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  border-radius: 32px;
  /* Bleed edges into background — image fades to transparent at perimeter */
  -webkit-mask-image: radial-gradient(ellipse 96% 98% at 50% 50%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0.85) 78%,
    rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 96% 98% at 50% 50%,
    rgba(0,0,0,1) 60%,
    rgba(0,0,0,0.85) 78%,
    rgba(0,0,0,0) 100%);
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.5));
  transition: transform 0.45s cubic-bezier(0.22,0.61,0.36,1), filter 0.45s ease;
}
.bm-device-img:hover {
  transform: translateY(-6px) scale(1.015);
  filter: drop-shadow(0 32px 56px rgba(0,0,0,0.65)) drop-shadow(0 0 28px rgba(212,103,26,0.25));
}

/* ====================================================================
   FLOATING PROOF CARDS — Tip 4 from design study
   Glass cells with stat data, positioned over device image
   ==================================================================== */
.bm-device-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.bm-proof-card {
  position: absolute;
  z-index: 3;
  background: linear-gradient(180deg, rgba(22,27,54,0.92), rgba(10,12,22,0.95));
  border: 1px solid rgba(224,145,60,0.32);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 140px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(224,145,60,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  animation: bm-float-in 0.7s var(--ease-out) backwards;
}

/* Top highlight stripe — Jarvis panel pattern */
.bm-proof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,145,60,0.5), transparent);
  pointer-events: none;
}

@keyframes bm-float-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gentle floating animation */
.bm-proof-card-tr,
.bm-proof-card-tl {
  animation: bm-float-in 0.7s var(--ease-out) backwards,
             bm-float-y 5s ease-in-out 0.7s infinite;
}
.bm-proof-card-bl,
.bm-proof-card-br {
  animation: bm-float-in 0.7s var(--ease-out) 0.15s backwards,
             bm-float-y-rev 6s ease-in-out 0.85s infinite;
}
@keyframes bm-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes bm-float-y-rev {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* Position variants */
.bm-proof-card-tr { top: 12%;  right: -28px; }
.bm-proof-card-bl { bottom: 14%; left: -32px; }
.bm-proof-card-tl { top: 14%;  left: -32px; }
.bm-proof-card-br { bottom: 12%; right: -28px; }

.bm-proof-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.bm-proof-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(224,145,60,0.6);
}
.bm-proof-dot-live {
  background: var(--orange);
  box-shadow: 0 0 10px rgba(212,103,26,0.7);
  animation: bm-proof-pulse 1.6s ease-in-out infinite;
}
@keyframes bm-proof-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}

.bm-proof-num {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--pearl);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bm-proof-num-sm { font-size: 22px; }

.bm-proof-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,225,0.55);
}

.bm-proof-trend {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4ade80;
  display: inline-block;
}
.bm-proof-trend-gold { color: var(--gold-hi); }

/* Route mini-graphic — directions preview inside a proof card */
.bm-proof-route {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}
.bm-proof-route-pin {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.bm-proof-route-pin svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.bm-proof-route-pin-from {
  background: rgba(212,103,26,0.18);
  border: 1px solid rgba(212,103,26,0.5);
  color: var(--orange);
  box-shadow: 0 0 12px rgba(212,103,26,0.35);
}
.bm-proof-route-pin-to {
  background: rgba(245,240,225,0.1);
  border: 1px solid rgba(245,240,225,0.25);
  color: var(--pearl);
}
.bm-proof-route-line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(212,103,26,0.55) 0,
    rgba(212,103,26,0.55) 4px,
    transparent 4px,
    transparent 8px
  );
  position: relative;
  border-radius: 1px;
}
.bm-proof-card-route .bm-proof-route-pin-from {
  animation: bm-route-pulse 1.8s ease-in-out infinite;
}
@keyframes bm-route-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(212,103,26,0.35); }
  50%      { box-shadow: 0 0 20px rgba(212,103,26,0.7); }
}

/* Soft device variant — heavier edge blur for the community split.
   The image edges fully dissolve into the section gradient. */
.bm-device-stage-soft {
  position: relative;
}
.bm-device-stage-soft::before {
  content: '';
  position: absolute;
  inset: -8% -10% -2% -10%;
  background:
    radial-gradient(ellipse 60% 60% at 50% 60%,
      rgba(212,103,26,0.18) 0%,
      rgba(224,145,60,0.08) 40%,
      transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.bm-device-img-soft {
  /* Stronger feathering than the default bleed — image dissolves into bg */
  -webkit-mask-image: radial-gradient(ellipse 88% 92% at 50% 52%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,0.6) 70%,
    rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 88% 92% at 50% 52%,
    rgba(0,0,0,1) 35%,
    rgba(0,0,0,0.6) 70%,
    rgba(0,0,0,0) 100%);
  filter:
    drop-shadow(0 30px 60px rgba(0,0,0,0.55))
    drop-shadow(0 0 60px rgba(212,103,26,0.18));
}

/* Mobile: hide proof cards (they overlap on small screens) */
@media (max-width: 767px) {
  .bm-proof-card { display: none; }
}
@media (max-width: 991px) and (min-width: 768px) {
  .bm-proof-card-tr, .bm-proof-card-tl { right: 8px; left: auto; }
  .bm-proof-card-tl { left: 8px; right: auto; }
  .bm-proof-card-bl, .bm-proof-card-br { right: 8px; left: auto; }
  .bm-proof-card-bl { left: 8px; right: auto; }
}

/* ====================================================================
   STATS STRIP
   ==================================================================== */
.bm-stats-strip {
  background: linear-gradient(180deg, #0a0c18 0%, #080a12 100%);
  border-top: 1px solid rgba(224,145,60,0.22);
  border-bottom: 1px solid rgba(224,145,60,0.22);
  padding: 0;
}

.bm-stat-item {
  padding: 48px 32px;
  text-align: center;
  border-right: 1px solid rgba(224,145,60,0.1);
  position: relative;
  transition: background var(--dur-base);
}
/* Top highlight per cell */
.bm-stat-item::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,145,60,0.3), transparent);
}
.bm-stat-item:hover { background: rgba(224,145,60,0.03); }
.bm-stat-last { border-right: none; }

@media (max-width: 767px) {
  .bm-stat-item:nth-child(2n) { border-right: none; }
  .bm-stat-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.bm-stat-number {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--gold-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.bm-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,225,0.35);
}

/* ====================================================================
   PRICING
   ==================================================================== */
.bm-price-card {
  background: linear-gradient(180deg, rgba(22,27,54,0.8) 0%, rgba(10,12,22,0.9) 100%);
  border: 1px solid rgba(224,145,60,0.18);
  border-radius: 0;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(224,145,60,0.04);
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}

/* Jarvis-style top highlight stripe on every card */
.bm-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,145,60,0.35), transparent);
  pointer-events: none;
}

.bm-price-card:hover {
  border-color: rgba(224,145,60,0.45);
  transform: translateY(-4px);
  box-shadow: 0 0 50px rgba(0,0,0,0.55), 0 4px 24px rgba(224,145,60,0.2), inset 0 0 0 1px rgba(224,145,60,0.08);
}

.bm-price-card-featured {
  border-color: rgba(224,145,60,0.5);
  background: linear-gradient(160deg, rgba(29,40,88,0.85) 0%, rgba(10,12,22,0.95) 100%);
  box-shadow: 0 0 60px rgba(0,0,0,0.55), 0 4px 32px rgba(224,145,60,0.22), inset 0 0 0 1px rgba(224,145,60,0.1);
  transform: scale(1.03);
  overflow: visible; /* badge at top: -13px needs to escape the card bounds */
}
.bm-price-card-featured::before {
  background: linear-gradient(90deg, transparent, rgba(224,145,60,0.6), transparent);
}
.bm-price-card-featured:hover { transform: scale(1.03) translateY(-4px); }

.bm-price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
  color: var(--carbon);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 16px;
  white-space: nowrap;
}

.bm-price-card h4 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}

.bm-price-amount {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}

.bm-price-amount sup {
  font-family: var(--font-anchor);
  font-size: 24px;
  font-weight: 900;
  vertical-align: super;
  line-height: 1;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
}

.bm-price-amount sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  vertical-align: baseline;
  -webkit-text-fill-color: rgba(245,240,225,0.45);
  color: rgba(245,240,225,0.45);
}

.bm-price-features {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 var(--sp-6);
  flex: 1;
  text-align: left;
}

.bm-price-features li {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: rgba(245,240,225,0.55);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.bm-price-features li:last-child { border-bottom: none; }

.bm-price-features .bm-check {
  width: 14px;
  height: 14px;
  color: var(--gold);
  flex-shrink: 0;
}
.bm-pro-card-check { color: var(--gold-hi) !important; }

/* ====================================================================
   APP PREVIEW GALLERY
   ==================================================================== */
/* Section override — blend seamlessly with pricing (above) + download (below).
   Starts at pricing's end color, breathes through navy mid, fades back to
   download's start color. No hard seam. */
#preview {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(224,145,60,0.06) 0%, transparent 65%),
    linear-gradient(180deg,
      #0e111e 0%,    /* matches pricing end */
      #131828 22%,
      #1a2245 50%,   /* navy breath */
      #131828 78%,
      #0c1128 100%   /* matches download start */
    );
  position: relative;
  overflow: hidden;
}
/* Soft inner vignette so edges fade further into surrounding dark */
#preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,20,0.5) 0%, transparent 18%, transparent 82%, rgba(8,10,20,0.5) 100%);
  pointer-events: none;
}
#preview .container { position: relative; z-index: 1; }

/* Carousel items — vertical padding so hover lift doesn't clip against
   Owl's overflow-hidden stage */
.gallery-slider .item {
  padding: 28px 8px;
}
.gallery-slider .item img {
  border-radius: 28px;
  width: 100%;
  display: block;
  /* Bleed edges so cards feel soaked into the section, not hard rectangles */
  -webkit-mask-image: radial-gradient(ellipse 95% 96% at 50% 50%,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0.85) 78%,
    rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 95% 96% at 50% 50%,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0.85) 78%,
    rgba(0,0,0,0) 100%);
  filter:
    drop-shadow(0 18px 40px rgba(0,0,0,0.5))
    drop-shadow(0 0 24px rgba(212,103,26,0.08));
  transition: transform var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.gallery-slider .item img:hover {
  transform: translateY(-8px);
  filter:
    drop-shadow(0 28px 60px rgba(0,0,0,0.65))
    drop-shadow(0 0 40px rgba(212,103,26,0.22));
}

/* ====================================================================
   DOWNLOAD CTA
   ==================================================================== */
#download {
  text-align: center;
  padding: var(--sp-9) 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% -5%, rgba(212,103,26,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(224,145,60,0.07), transparent 55%),
    linear-gradient(180deg, #0c1128 0%, #080a14 100%);
  border-top: 1px solid rgba(224,145,60,0.25);
  border-bottom: 1px solid rgba(224,145,60,0.25);
}
/* Scanlines overlay on download CTA */
#download::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.007) 0 1px, transparent 1px 4px);
  pointer-events: none;
  z-index: 0;
}
#download .container { position: relative; z-index: 1; }

#download h2 {
  font-family: var(--font-anchor);
  font-weight: 900;
  font-size: var(--text-h1);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--pearl);
  margin-bottom: var(--sp-3);
}

#download .bm-download-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--w-regular);
  color: rgba(245,240,225,0.5);
  margin-bottom: var(--sp-6);
}

/* ====================================================================
   FOOTER
   ==================================================================== */
#bm-footer {
  background: var(--obsidian);
  border-top: 1px solid var(--line);
  padding: var(--sp-7) 0;
}

.bm-footer-links {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: rgba(245,240,225,0.3);
}

.bm-footer-links a {
  color: rgba(245,240,225,0.3);
  transition: color var(--dur-fast);
}
.bm-footer-links a:hover { color: var(--pearl); }

.bm-footer-sep { color: var(--line); margin: 0 8px; }

.bm-social-icon {
  color: rgba(245,240,225,0.65);
  display: flex;
  align-items: center;
  transition: color var(--dur-fast);
}
.bm-social-icon:hover { color: var(--orange); }

/* ====================================================================
   SCROLL REVEAL
   ==================================================================== */
.reveal-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.reveal-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-fade,
  .bm-marquee-track,
  .hero-live-dot,
  .hero-scroll-hint,
  .bm-device-img,
  .bm-btn-primary,
  .bm-btn-gold,
  .bm-iphone17 {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ====================================================================
   MOBILE POLISH — fixes for narrow viewports (≤ 767px)
   ==================================================================== */
@media (max-width: 767px) {
  /* Sections: tighter vertical rhythm */
  .bm-section { padding: 56px 0; }
  .bm-split-section { padding: 56px 0; }

  /* Transition fade — much shorter on mobile so pearl section starts sooner */
  .bm-transition-fade { height: 70px; }

  /* Section headers — H2 cap for "WHAT'S IN THE APP" / "EVERYTHING THE APP DOES" */
  .bm-section-header h2 {
    font-size: clamp(34px, 10vw, 52px);
  }

  /* Split section — tighter, breathable on iPhone */
  .bm-split-section .bm-split-text {
    padding: var(--sp-4) 4px 0;
  }
  .bm-split-section .bm-split-text h2 {
    font-size: clamp(26px, 8.5vw, 44px);
    margin-bottom: var(--sp-3);
  }
  .bm-split-section .bm-split-text p {
    font-size: 15px;
  }
  /* Center the CTA inside split sections on mobile */
  .bm-split-section .bm-split-text .bm-btn-primary {
    display: block;
    text-align: center;
  }

  /* Device images in split sections — slightly smaller for proportion */
  .bm-split-section .bm-device-img {
    max-width: 260px;
  }
  .bm-split-section .col-md-5::before {
    width: 280px;
    height: 280px;
  }

  /* Index rows — reduce vertical padding */
  .bm-index-row { padding: 18px 0; }
  .bm-index-title { font-size: 22px !important; }
  .bm-index-desc { font-size: 13px; padding-left: 44px !important; }

  /* Stats strip — make cells single column for clarity, reduce padding */
  .bm-stat-item { padding: 28px 16px; }
  .bm-stat-number {
    font-size: clamp(32px, 9vw, 44px) !important;
  }
  .bm-stat-label {
    font-size: 9px;
    line-height: 1.4;
  }

  /* Pricing cards — compact on mobile */
  .bm-price-card { padding: var(--sp-5) var(--sp-4); }
  .bm-price-amount { font-size: 52px; }
  .bm-price-card h4 { margin-bottom: var(--sp-2); }
  .bm-price-features { margin: var(--sp-3) 0 var(--sp-4); }
  .bm-price-features li { padding: 7px 0; font-size: 13px; }
  /* Featured card: allow badge to overflow top, give it room */
  .bm-price-card-featured {
    overflow: visible;
    transform: none;
    margin-top: 20px;
  }
  .bm-price-card-featured:hover { transform: translateY(-4px); }

  /* Download CTA */
  #download h2 { font-size: clamp(40px, 13vw, 72px); }

  /* Container padding — enough breathing room from viewport edge on narrow phones */
  .container { padding-left: 28px; padding-right: 28px; }
}