/* BinaryArbitrage landing — tokens from mockup/colors.md + index.png / index1.png */
:root {
  --primary: #00D094;
  --primary-hover: #00E6A8;
  --bg-deep: #020911;
  --bg-main: #050F16;
  --bg-card: #09141C;
  --bg-elevated: #0C1A24;
  --border: #152433;
  --text-primary: #FFFFFF;
  --text-secondary: #A7B4BC;
  --text-muted: #6B7882;
  --success: #00D094;
  --danger: #FF4D67;
  --warning: #F5B942;

  --ba-primary: var(--primary);
  --ba-primary-hover: var(--primary-hover);
  --ba-bg-deep: var(--bg-deep);
  --ba-bg-main: var(--bg-main);
  --ba-bg-card: var(--bg-card);
  --ba-bg-elevated: var(--bg-elevated);
  --ba-border: var(--border);
  --ba-text: var(--text-primary);
  --ba-text-secondary: var(--text-secondary);
  --ba-text-muted: var(--text-muted);
  --ba-danger: var(--danger);
  --ba-warning: var(--warning);
}

html[data-bs-theme="dark"] body.ba-landing,
body.ba-landing {
  --bs-primary: #00D094;
  --bs-primary-rgb: 0, 208, 148;
  --bs-success: #00D094;
  --bs-success-rgb: 0, 208, 148;
  --bs-danger: #FF4D67;
  --bs-danger-rgb: 255, 77, 103;
  --bs-warning: #F5B942;
  --bs-warning-rgb: 245, 185, 66;
  --bs-body-bg: #020911;
  --bs-body-bg-rgb: 2, 9, 17;
  --bs-body-color: #FFFFFF;
  --bs-body-color-rgb: 255, 255, 255;
  --bs-secondary-color: #A7B4BC;
  --bs-secondary-color-rgb: 167, 180, 188;
  --bs-tertiary-color: #6B7882;
  --bs-border-color: #152433;
  --bs-secondary-bg: #09141C;
  --bs-tertiary-bg: #0C1A24;
  --bs-link-color: #00D094;
  --bs-link-hover-color: #00E6A8;
  --bs-emphasis-color: #FFFFFF;
  --bs-primary-text-emphasis: #00D094;
  --bs-success-text-emphasis: #00D094;
  --bs-danger-text-emphasis: #FF4D67;
  --bs-card-bg: #09141C;
  --bs-card-cap-bg: #0C1A24;
  --bs-card-border-color: #152433;
  background: var(--ba-bg-deep);
  color: var(--ba-text);
  font-family: "DM Sans", system-ui, sans-serif;
}

.ba-landing .navbar {
  background: rgba(2, 9, 17, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ba-border);
}

.ba-landing .navbar-brand img {
  height: 40px;
  width: auto;
}

.ba-landing .nav-link {
  color: var(--ba-text-secondary) !important;
}

.ba-landing .nav-link:hover,
.ba-landing .nav-link:focus,
.ba-landing .nav-link.active {
  color: var(--ba-primary) !important;
}

.ba-dropdown {
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
}

.ba-lang {
  color: var(--ba-text-secondary);
  padding: 0.25rem 0.5rem;
}

.ba-btn-primary {
  background: var(--ba-primary);
  border-color: var(--ba-primary);
  color: var(--ba-bg-deep);
  font-weight: 700;
}

.ba-btn-primary:hover {
  background: var(--ba-primary-hover);
  border-color: var(--ba-primary-hover);
  color: var(--ba-bg-deep);
}

.ba-landing .btn-primary {
  --bs-btn-color: #020911;
  --bs-btn-bg: #00D094;
  --bs-btn-border-color: #00D094;
  --bs-btn-hover-color: #020911;
  --bs-btn-hover-bg: #00E6A8;
  --bs-btn-hover-border-color: #00E6A8;
  --bs-btn-active-color: #020911;
  --bs-btn-active-bg: #00C084;
  --bs-btn-active-border-color: #00C084;
  --bs-btn-disabled-color: #020911;
  --bs-btn-disabled-bg: #00D094;
  --bs-btn-disabled-border-color: #00D094;
  --bs-btn-focus-shadow-rgb: 0, 208, 148;
  font-weight: 700;
}

.ba-landing .btn-success {
  --bs-btn-color: #020911;
  --bs-btn-bg: #00D094;
  --bs-btn-border-color: #00D094;
  --bs-btn-hover-color: #020911;
  --bs-btn-hover-bg: #00E6A8;
  --bs-btn-hover-border-color: #00E6A8;
  --bs-btn-active-color: #020911;
  --bs-btn-active-bg: #00C084;
  --bs-btn-active-border-color: #00C084;
  --bs-btn-disabled-color: #020911;
  --bs-btn-disabled-bg: #00D094;
  --bs-btn-disabled-border-color: #00D094;
  --bs-btn-focus-shadow-rgb: 0, 208, 148;
  font-weight: 700;
}

.ba-landing .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #FF4D67;
  --bs-btn-border-color: #FF4D67;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #FF6B80;
  --bs-btn-hover-border-color: #FF6B80;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #E63E57;
  --bs-btn-active-border-color: #E63E57;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #FF4D67;
  --bs-btn-disabled-border-color: #FF4D67;
  --bs-btn-focus-shadow-rgb: 255, 77, 103;
  font-weight: 700;
}

.ba-landing .btn-outline-secondary,
.ba-landing .btn-outline-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-border-color: #152433;
  --bs-btn-hover-color: #00D094;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #00D094;
  --bs-btn-active-color: #00D094;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #00D094;
  --bs-btn-disabled-color: #6B7882;
  --bs-btn-disabled-border-color: #152433;
  --bs-btn-focus-shadow-rgb: 0, 208, 148;
}

.ba-landing .card {
  --bs-card-bg: #09141C;
  --bs-card-cap-bg: #0C1A24;
  --bs-card-border-color: #152433;
  --bs-card-color: #FFFFFF;
  color: var(--ba-text);
}

.ba-landing .text-muted {
  color: var(--ba-text-muted) !important;
}

.ba-landing .badge-soft-primary {
  background: rgba(0, 208, 148, 0.12);
  color: #00D094;
  border: 1px solid rgba(0, 208, 148, 0.28);
}

.ba-landing .badge-soft-secondary {
  background: rgba(167, 180, 188, 0.08);
  color: #A7B4BC;
  border: 1px solid #152433;
}

.ba-btn-ghost {
  border: 1px solid var(--ba-border);
  color: var(--ba-text);
  background: transparent;
}

.ba-btn-ghost:hover {
  border-color: var(--ba-primary);
  color: var(--ba-primary);
  background: transparent;
}

.ba-hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(0, 208, 148, 0.09), transparent 50%),
    linear-gradient(180deg, var(--ba-bg-deep), var(--ba-bg-main));
}

@media (max-width: 991.98px) {
  body.ba-landing.ba-has-mobile-signup-bar {
    padding-bottom: 5.25rem;
  }
}

@media (min-width: 1400px) {
  .ba-landing .container {
    max-width: 1440px;
  }
}

/* The index mockup uses a compact fixed composition rather than a full-height
   hero; Bootstrap does not provide the required asymmetric column offset. */
@media (min-width: 992px) {
  .ba-hero .row > .col-lg-5 {
    flex: 0 0 38%;
    max-width: 38%;
    padding-top: 3rem;
  }

  .ba-hero .row > .col-lg-7 {
    flex: 0 0 62%;
    max-width: 62%;
  }
}

.ba-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.32;
  animation: baOrb 14s ease-in-out infinite alternate;
}

.ba-hero-orb-a {
  width: 28rem;
  height: 28rem;
  top: -8rem;
  right: -6rem;
  background: rgba(0, 208, 148, 0.14);
}

.ba-hero-orb-b {
  width: 18rem;
  height: 18rem;
  bottom: 10%;
  left: -4rem;
  background: rgba(0, 208, 148, 0.08);
  animation-delay: -4s;
}

@keyframes baOrb {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2%, 4%, 0) scale(1.08); }
}

.ba-float {
  animation: baFloat 5.5s ease-in-out infinite;
}

@keyframes baFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.ba-hero-title {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.ba-hero-title .accent {
  color: var(--ba-primary);
}

.ba-hero-img {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ba-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--ba-border);
  background: var(--ba-bg-card);
  color: var(--ba-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ba-pill .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ba-primary);
  box-shadow: 0 0 8px var(--ba-primary);
}

.ba-trust-row {
  color: var(--ba-text-secondary);
  font-size: 0.85rem;
}

@media (min-width: 992px) {
  .ba-hero .ba-trust-row {
    gap: 0.7rem !important;
    font-size: 0.75rem;
  }

  .ba-hero > .container {
    padding-bottom: 3.5rem !important;
  }
}

.ba-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ba-trust i {
  color: var(--ba-primary);
}

.ba-trade-card {
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ba-trade-card .ba-chart {
  height: 350px;
  background:
    linear-gradient(180deg, transparent 55%, rgba(0, 208, 148, 0.1)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 260' preserveAspectRatio='none'%3E%3Cg stroke='%23152433' stroke-width='1' opacity='.75'%3E%3Cpath d='M0 52h600M0 104h600M0 156h600M0 208h600M100 0v260M200 0v260M300 0v260M400 0v260M500 0v260'/%3E%3C/g%3E%3Cpolyline fill='none' stroke='%2300D094' stroke-width='3' points='0,190 18,207 35,178 52,196 70,149 88,165 105,130 122,155 140,116 157,128 175,82 192,102 210,70 228,88 245,51 262,91 280,66 298,112 315,94 332,137 350,105 368,128 385,93 402,115 420,74 438,99 455,61 472,87 490,48 508,72 525,42 542,68 560,35 578,54 600,31'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat,
    var(--ba-bg-elevated);
}

.ba-trade-card .nav-link.active {
  background: var(--ba-primary) !important;
  color: var(--ba-bg-deep) !important;
  font-weight: 700;
}

.ba-chart-live {
  position: relative;
  overflow: hidden;
}

.ba-tv-chart-layer,
.ba-tv-chart-layer .tradingview-widget-container,
.ba-tv-chart-layer .tradingview-widget-container__widget,
.ba-tv-chart-layer iframe {
  width: 100% !important;
  height: 100% !important;
}

.ba-tv-chart-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ba-tv-widget-shield {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: default;
}

.ba-tv-chart-layer iframe,
.ba-ticker-live iframe {
  background-color: var(--ba-bg-elevated) !important;
  color-scheme: dark;
  pointer-events: none !important;
}

.ba-stake {
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  color: var(--ba-text-secondary);
  font-weight: 600;
}

.ba-stake.active {
  border-color: var(--ba-primary);
  color: var(--ba-primary);
  background: rgba(0, 208, 148, 0.1);
}

.ba-amount-fake {
  background: var(--ba-bg-card);
  border-color: var(--ba-border);
  color: var(--ba-text);
}

.ba-higher {
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  font-weight: 700;
}

.ba-lower {
  background: var(--ba-danger);
  color: #fff;
  font-weight: 700;
}

.ba-ticker {
  position: relative;
  min-height: 56px;
  background: var(--ba-bg-elevated);
  border-block: 1px solid var(--ba-border);
  overflow: hidden;
  color-scheme: dark;
}

.ba-ticker-live,
.ba-ticker-live .tradingview-widget-container,
.ba-ticker-live .tradingview-widget-container__widget,
.ba-ticker-live iframe {
  width: 100% !important;
  height: 56px !important;
}

.ba-ticker-live,
.ba-ticker-live .tradingview-widget-container,
.ba-ticker-live .tradingview-widget-container__widget,
.ba-ticker-live iframe {
  background-color: var(--ba-bg-elevated) !important;
  color-scheme: dark;
}

.ba-ticker-live {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}

.ba-ticker.is-ready .ba-ticker-live {
  opacity: 1;
}

.ba-ticker.is-ready .ba-ticker-fallback {
  visibility: hidden;
}

.ba-ticker-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: baTicker 32s linear infinite;
}

.ba-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  color: var(--ba-text-secondary);
  font-size: 0.9rem;
}

.ba-ticker-item img {
  flex: 0 0 auto;
  border-radius: 50%;
}

.ba-ticker-symbol-icon {
  width: 1.375rem;
  height: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  font-size: 0.68rem;
  font-weight: 800;
}

.ba-ticker-item .up { color: var(--ba-primary); }
.ba-ticker-item .down { color: var(--ba-danger); }

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

.ba-feature-card,
.ba-step-card,
.ba-bot-card,
.ba-automation-card,
.ba-market-card,
.ba-quote-card,
.ba-perf-card {
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 0.9rem;
}

.ba-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ba-primary);
  background: rgba(0, 208, 148, 0.12);
  border: 1px solid var(--ba-border);
  font-size: 1.1rem;
}

.ba-step-circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid var(--ba-border);
  background: rgba(0, 208, 148, 0.1);
  color: var(--ba-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  position: relative;
}

@media (min-width: 992px) {
  .ba-step-card {
    min-height: 140px;
  }
}

.ba-step-index {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ba-eyebrow {
  color: var(--ba-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.ba-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.ba-check-list i {
  color: var(--ba-primary);
  margin-top: 0.15rem;
}

.ba-market-card {
  min-height: 205px;
}

.ba-market-icon {
  width: 2.15rem;
  height: 2.15rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.ba-market-icon-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 185, 66, 0.38);
  border-radius: 50%;
  color: var(--ba-warning);
  background: rgba(245, 185, 66, 0.1);
}

.ba-automation-card {
  min-height: 295px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 45%, rgba(0, 208, 148, 0.13), transparent 38%),
    var(--ba-bg-card);
}

.ba-automation-visual {
  min-height: 196px;
  display: grid;
  grid-template-columns: minmax(105px, 48%) 1fr;
  align-items: center;
  gap: 0.65rem;
}

.ba-automation-visual img {
  width: 100%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 208, 148, 0.24));
  animation: baAutomationFloat 5.5s ease-in-out infinite;
}

@keyframes baAutomationFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.ba-sparkline {
  height: 2.25rem;
  border-radius: 0.35rem;
  opacity: 0.9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%2300D094' stroke-width='2' points='0,30 20,28 40,22 60,18 80,12 100,8 120,10'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

.ba-sparkline.down {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%23FF4D67' stroke-width='2' points='0,10 20,12 40,16 60,22 80,28 100,30 120,34'/%3E%3C/svg%3E");
}

.ba-perf-card {
  min-height: 295px;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(0, 208, 148, 0.18), transparent 50%),
    var(--ba-bg-card);
}

.ba-perf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 208, 148, 0.15);
  border: 1px solid rgba(0, 208, 148, 0.35);
  color: var(--ba-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.ba-perf-chart {
  height: 120px;
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, rgba(0, 208, 148, 0.25), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 120' preserveAspectRatio='none'%3E%3Cpolyline fill='none' stroke='%2300D094' stroke-width='3' points='0,100 80,95 160,88 240,70 320,55 400,40 480,22 560,12 600,8'/%3E%3C/svg%3E")
      center bottom / 100% 100% no-repeat,
    var(--ba-bg-elevated);
}

.ba-stats-band {
  background: var(--ba-bg-deep);
  border: 0 !important;
}

.ba-perf-value {
  color: var(--ba-primary);
  font-size: 1.65rem;
  font-weight: 800;
}

.ba-stats-band .container {
  padding: 1.25rem 1.5rem;
  background: var(--ba-bg-elevated);
  border: 1px solid var(--ba-border);
  border-radius: 0.9rem;
}

.ba-stat-inline i {
  color: var(--ba-primary);
  display: block;
  margin-bottom: 0.35rem;
}

.ba-quote-mark {
  font-size: 1.75rem;
  color: var(--ba-primary);
  display: block;
  margin-bottom: 0.75rem;
}

.ba-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(0, 208, 148, 0.2);
  border: 1px solid var(--ba-border);
  color: var(--ba-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.ba-avatar-img {
  object-fit: cover;
  padding: 0;
  background: var(--ba-bg-elevated);
}

.ba-stars {
  color: var(--ba-primary);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.ba-testimonial-stage {
  padding-inline: 2rem;
}

.ba-testimonial-track {
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.ba-testimonial-track::-webkit-scrollbar {
  display: none;
}

.ba-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ba-border);
  border-radius: 50%;
  color: var(--ba-text-secondary);
  background: var(--ba-bg-card);
  transform: translateY(-50%);
}

.ba-carousel-arrow:hover,
.ba-carousel-arrow:focus-visible {
  border-color: var(--ba-primary);
  color: var(--ba-primary);
}

.ba-carousel-prev { left: -0.15rem; }
.ba-carousel-next { right: -0.15rem; }

.ba-cta-banner {
  background:
    radial-gradient(ellipse at 10% 50%, rgba(0, 208, 148, 0.2), transparent 45%),
    var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
}

.ba-cta-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 208, 148, 0.15);
  border: 1px solid rgba(0, 208, 148, 0.35);
  color: var(--ba-primary);
  font-size: 1.75rem;
}

.ba-section-muted {
  background: var(--ba-bg-main);
}

.ba-logo-mark {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

.ba-footer-links a {
  color: var(--ba-text-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.45rem;
}

.ba-footer-links a:hover {
  color: var(--ba-primary);
}

.ba-social {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--ba-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ba-text-muted);
}

.ba-news {
  display: flex;
  gap: 0.5rem;
}

.ba-news .form-control {
  background: var(--ba-bg-elevated);
  border-color: var(--ba-border);
  color: var(--ba-text);
}

.ba-news .form-control:focus {
  background: var(--ba-bg-elevated);
  border-color: var(--ba-primary);
  color: var(--ba-text);
  box-shadow: 0 0 0 0.2rem rgba(0, 208, 148, 0.15);
}

.ba-reveal {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: var(--ba-delay, 0ms);
}

.ba-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (min-width: 992px) {
  .ba-steps .col-lg-3:not(:last-child) .ba-step-card::after {
    content: "";
    position: absolute;
    top: 2.75rem;
    right: -12%;
    width: 24%;
    border-top: 2px dashed var(--ba-border);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ba-ticker-track,
  .ba-reveal,
  .ba-float,
  .ba-hero-orb,
  .ba-automation-visual img,
  .ba-join-phone-wrap,
  .ba-join-phone-wrap::after,
  .ba-join-phone,
  .ba-join-candles {
    animation: none !important;
    transition: none !important;
  }
  .ba-reveal { opacity: 1; transform: none; }
  .ba-float { transform: none; }
  .ba-join-phone {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .ba-automation-visual {
    grid-template-columns: 42% 1fr;
  }

  .ba-testimonial-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .ba-testimonial-track > [class*="col-"] {
    flex: 0 0 calc(100% - 1.5rem);
    scroll-snap-align: center;
  }
}

@media (max-width: 575.98px) {
  .ba-automation-visual {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ba-automation-visual img {
    width: 150px;
    margin-inline: auto;
  }
}

/* ——— Join (ads landing) ——— */
.ba-join-hero {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(ellipse at 78% 35%, rgba(0, 208, 148, 0.14), transparent 42%),
    radial-gradient(ellipse at 15% 0%, rgba(0, 208, 148, 0.06), transparent 40%),
    linear-gradient(180deg, var(--ba-bg-deep), var(--ba-bg-main));
}

.ba-join-eyebrow {
  letter-spacing: 0.08em;
}

.ba-join-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: rgba(0, 208, 148, 0.12);
  font-size: 1.1rem;
}

.ba-join-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.7rem;
}

/* Stage: static candles + animated phone */
.ba-join-phone-stage {
  position: relative;
  display: inline-block;
  max-width: 480px;
  width: 100%;
  padding: 1rem 0.5rem 1.5rem;
}

.ba-join-candles {
  position: absolute;
  inset: -4% -18% 0 -22%;
  z-index: 0;
  pointer-events: none;
  animation: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-join-candles-art {
  width: 100%;
  max-width: 560px;
  height: auto;
  opacity: 0.92;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(0, 208, 148, 0.18));
}

.ba-join-phone-wrap {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 400px;
  padding: 1.25rem 1.5rem 2.5rem;
  animation: baJoinPhoneIn 0.9s ease-out both;
}

.ba-join-phone-wrap::before {
  content: "";
  position: absolute;
  inset: 8% 12% 12%;
  border-radius: 2rem;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 208, 148, 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ba-join-phone-wrap::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 12%;
  bottom: 4%;
  height: 22%;
  background: radial-gradient(ellipse at center, rgba(0, 208, 148, 0.55), transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: rotate(-8deg);
  animation: baJoinGlow 3.6s ease-in-out infinite;
}

.ba-join-phone {
  position: relative;
  z-index: 1;
  max-height: 560px;
  width: auto;
  /* Asset is already slanted — avoid extra rotate (softens pixels) */
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.35))
    drop-shadow(0 28px 40px rgba(0, 0, 0, 0.55));
  animation: baJoinPhoneFloat 5.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes baJoinPhoneIn {
  from {
    opacity: 0;
    transform: translate3d(1.5rem, 1.25rem, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes baJoinPhoneFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes baJoinGlow {
  0%, 100% {
    opacity: 0.55;
    transform: rotate(-8deg) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: rotate(-8deg) scale(1.08);
  }
}

@media (min-width: 992px) {
  .ba-join-hero .col-lg-6.text-center {
    overflow: visible;
    padding-inline: 1rem;
  }

  .ba-join-phone {
    max-height: 580px;
  }
}

/* Solid accent strip like mockup feature bar */
.ba-join-strip {
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  border: 0;
}

.ba-join-mid-cta {
  background: linear-gradient(145deg, var(--ba-bg-elevated), var(--ba-bg-card));
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
}

.ba-join-title-rule {
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: var(--ba-primary);
}

.ba-join-step-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ba-bg-deep);
  background: var(--ba-primary);
}

.ba-join-step-icon {
  font-size: 1.35rem;
}

@media (min-width: 992px) {
  .ba-join-steps > [class*="col-"]:not(:last-child) .ba-join-step {
    position: relative;
  }

  .ba-join-steps > [class*="col-"]:not(:last-child) .ba-join-step::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: calc(50% + 1.4rem);
    width: calc(100% - 1.5rem);
    border-top: 2px dashed var(--ba-border);
    pointer-events: none;
  }
}

.ba-join-refer {
  background: var(--ba-bg-card);
  border: 1px solid var(--ba-border);
  border-radius: 1rem;
}

.ba-join-refer-item-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(0, 208, 148, 0.12);
  margin-bottom: 0.5rem;
}

.ba-join-refer-visual {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px dashed var(--ba-border);
  background:
    radial-gradient(circle at center, rgba(0, 208, 148, 0.12), transparent 65%);
}

.ba-join-refer-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-weight: 700;
  font-size: 1.1rem;
}

.ba-join-refer-core small {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

.ba-join-refer-node {
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ba-bg-elevated);
  border: 1px solid var(--ba-border);
  color: var(--ba-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ba-join-refer-node--1 { top: 8%; left: 50%; transform: translateX(-50%); }
.ba-join-refer-node--2 { top: 50%; right: 6%; transform: translateY(-50%); }
.ba-join-refer-node--3 { bottom: 8%; left: 50%; transform: translateX(-50%); }
.ba-join-refer-node--4 { top: 50%; left: 6%; transform: translateY(-50%); }

.ba-join-bottom-cta {
  background: var(--ba-primary);
  color: var(--ba-bg-deep);
}

.ba-join-bottom-cta .h5 {
  color: var(--ba-bg-deep);
}

.ba-join-bottom-cta .btn-light {
  color: var(--ba-bg-deep);
  border-color: transparent;
}

.ba-join-footer {
  border-top: 1px solid var(--ba-border);
  background: var(--ba-bg-deep);
}

.ba-landing-trust {
  background: var(--ba-bg-card);
  border-block: 1px solid var(--ba-border);
}

.ba-landing-band-247 {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 208, 148, 0.1), transparent 65%),
    var(--ba-bg-elevated);
  border-block: 1px solid var(--ba-border);
}

.ba-landing-support {
  background: var(--ba-bg-main);
}