.ba-index1-hero-visual {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.ba-index1-hero-visual::before {
  content: "";
  position: absolute;
  inset: 10% 5% 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 208, 148, 0.18), transparent 68%);
  pointer-events: none;
  animation: baIndex1HeroGlow 6s ease-in-out infinite;
}

@keyframes baIndex1HeroGlow {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.ba-index1-hero-devices {
  position: relative;
  z-index: 1;
  max-width: 100%;
  background: transparent;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

.ba-index1-txn-preview-img {
  border-color: var(--ba-border) !important;
}

/* UI mockup cards — rounded panels (transactions, active bots, desk screenshots) */
.ba-index1-ui-panel {
  border-radius: 0.75rem;
  border: 1px solid var(--ba-border);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.ba-index1-showcase-preview:not(.ba-index1-showcase-preview--transparent) {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.ba-index1-bot-cutout {
  background: transparent;
  max-width: 160px;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 208, 148, 0.18)) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.ba-index1-bots-showcase {
  position: relative;
  padding-bottom: 0.5rem;
}

.ba-index1-bot-cutout--overlay {
  position: absolute;
  left: -0.35rem;
  bottom: -0.75rem;
  max-width: min(38%, 200px);
  z-index: 2;
  pointer-events: none;
}

.ba-index1-automation-visual .ba-index1-ui-panel {
  margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
  .ba-index1-hero-devices {
    max-width: 110%;
    margin-right: -5%;
  }
}

.ba-index1-showcase-preview {
  min-height: 280px;
  background: var(--ba-bg-elevated);
  border: 1px solid var(--ba-border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.ba-index1-showcase-preview img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.ba-index1-showcase-preview--transparent {
  background: transparent;
  border: 0;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-index1-showcase-preview--transparent img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.35));
}

.ba-index1-txn-preview .list-group-item {
  background: var(--ba-bg-elevated);
  border-color: var(--ba-border);
  color: var(--ba-text-secondary);
  font-size: 0.85rem;
}

.ba-index1-txn-preview .amount-up {
  color: var(--ba-primary);
}

.ba-index1-txn-preview .amount-down {
  color: var(--ba-danger);
}

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

.ba-index1 #baLandingTicker.ba-ticker {
  cursor: default;
  user-select: none;
}

.ba-index1 #baLandingTicker .ba-ticker-track,
.ba-index1 #baLandingTicker .ba-ticker-item,
.ba-index1 #baLandingTicker .ba-ticker-item * {
  pointer-events: none;
}

.ba-index1 #baLandingTicker .ba-ticker-live,
.ba-index1 #baLandingTicker iframe {
  display: none !important;
}

/* Final CTA — filled layout matching deposit/bots sections */
.ba-index1-final-cta {
  background:
    radial-gradient(ellipse at 92% 12%, rgba(0, 208, 148, 0.22), transparent 50%),
    radial-gradient(ellipse at 8% 88%, rgba(0, 208, 148, 0.1), transparent 45%),
    var(--ba-bg-card) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.32);
}

.ba-index1-cta-gift {
  max-width: 128px;
  filter: drop-shadow(0 12px 24px rgba(0, 208, 148, 0.22));
}

.ba-index1 .navbar.sticky-top {
  transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.ba-index1 .navbar.ba-index1-nav-scrolled {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--ba-border);
}

.ba-index1 .ba-market-card,
.ba-index1 .ba-quote-card,
.ba-index1 .ba-automation-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ba-index1 .ba-market-card:hover,
.ba-index1 .ba-quote-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 208, 148, 0.32);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.ba-index1 .ba-index1-security-icon {
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.ba-index1 .card:hover .ba-index1-security-icon {
  transform: scale(1.06);
  background: rgba(0, 208, 148, 0.18);
}

.ba-index1-tab-pop {
  animation: baIndex1TabPop 0.45s ease both;
  animation-delay: var(--ba-tab-delay, 0ms);
}

@keyframes baIndex1TabPop {
  from {
    opacity: 0.35;
    transform: translateY(0.45rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ba-index1 #baLandingTicker [data-ticker-price].is-updated,
.ba-index1 #baLandingTicker [data-ticker-change].is-updated {
  animation: baIndex1TickerFlash 0.55s ease;
}

@keyframes baIndex1TickerFlash {
  0% { opacity: 0.45; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ba-index1-hero-visual::before,
  .ba-index1-tab-pop,
  .ba-index1 #baLandingTicker [data-ticker-price].is-updated,
  .ba-index1 #baLandingTicker [data-ticker-change].is-updated {
    animation: none !important;
  }

  .ba-index1 .ba-market-card:hover,
  .ba-index1 .ba-quote-card:hover,
  .ba-index1 .card:hover .ba-index1-security-icon {
    transform: none;
  }
}

@media (max-width: 991.98px) {
  #showcase,
  #baShowcaseTabs,
  #payments,
  #testimonials,
  #cta {
    scroll-margin-bottom: 5.5rem;
  }
}