/* ==========================================================================
   Premium Welcome / Landing — pro craft + party soul
   ========================================================================== */

.bd-hero {
  min-height: auto !important;
  overflow: visible !important;
}

.bd-hero-container {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

.bd-hero-container > .mx-auto.max-w-3xl {
  text-align: left !important;
  max-width: none !important;
  margin: 0 !important;
}

.bd-hero-container > .grid {
  grid-column: 1 / -1;
}

.bd-hero-text h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.08 !important;
}

/* Simple decorative card — no overlapping floats */
.bd-hero-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bd-showcase-card {
  width: min(100%, 320px);
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(15, 10, 28, 0.85);
  border: 1px solid rgba(167, 139, 250, 0.25);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.bd-showcase-art {
  width: 120px;
  height: 120px;
  margin: 0 auto 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bd-violet), var(--bd-teal));
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35);
}

.bd-showcase-label {
  margin: 0 0 1rem;
  font-family: var(--ui-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--bd-cream);
}

.bd-showcase-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 2rem;
}

.bd-showcase-wave span {
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--bd-violet), var(--bd-teal));
  animation: bd-bar-dance 1.2s ease-in-out infinite;
}

@keyframes bd-bar-dance {
  0%, 100% { height: 25%; opacity: 0.5; }
  50% { height: 100%; opacity: 1; }
}

.bd-hero .ui-waveform {
  display: none;
}

/* Experiences grid */
.bd-experiences {
  padding-block: 3rem !important;
}

.bd-experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.bd-experience-card {
  position: relative;
  display: block;
  min-height: 148px;
  padding: 1.35rem 1.25rem;
  border-radius: var(--bd-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--sp-highlight);
  transition: transform .1s ease, border-color .1s ease;
}

.bd-experience-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,58,237,0.35);
}

.bd-experience-inner h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.bd-experience-inner p {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--bd-text-sub);
}

@media (max-width: 900px) {
  .bd-hero-container {
    grid-template-columns: 1fr;
  }

  .bd-hero-showcase {
    order: -1;
  }

  .bd-experience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .bd-experience-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Spectacular unauthenticated hero (pro + fun) ── */
.relative.flex.min-h-\[88vh\] {
  min-height: 92dvh !important;
  align-items: center !important;
  background:
    radial-gradient(115% 65% at 50% 15%, rgba(124,58,237,0.22) 0%, transparent 62%),
    linear-gradient(180deg, #09071f 0%, #08050f 75%) !important;
  position: relative;
}

.relative.flex.min-h-\[88vh\] .relative.mx-auto {
  max-width: 1280px !important;
  padding-block: 1rem !important;
}

.relative.flex.min-h-\[88vh\] .mx-auto.max-w-3xl {
  max-width: 630px !important;
  margin-inline: 0 !important;
}

.relative.flex.min-h-\[88vh\] h1 {
  font-size: clamp(2.9rem, 6.9vw, 4.9rem) !important;
  line-height: 0.97 !important;
  font-weight: 900 !important;
  letter-spacing: -0.052em !important;
  margin-bottom: 0.9rem !important;
}

.relative.flex.min-h-\[88vh\] p {
  font-size: clamp(1.08rem, 2.05vw, 1.34rem) !important;
  line-height: 1.42 !important;
  color: var(--bd-text-sub) !important;
}

.relative.flex.min-h-\[88vh\] .mt-8,
.relative.flex.min-h-\[88vh\] .flex.gap-3 {
  gap: 0.85rem !important;
  margin-top: 1.65rem !important;
}

.relative.flex.min-h-\[88vh\] .btn-primary {
  min-height: 3.45rem !important;
  padding-inline: 2.15rem !important;
  font-size: 1.03rem !important;
}

/* Side visual — clean, modern, instantly communicates music bingo */
.relative.flex.min-h-\[88vh\] .bd-landing-visual {
  position: absolute;
  right: clamp(2rem, 5%, 7%);
  top: 50%;
  transform: translateY(-52%);
  width: min(400px, 34%);
  height: min(360px, 44vh);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(124,58,237,0.25), rgba(20,184,166,0.13));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 35px 100px -22px rgba(0,0,0,0.6);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bd-landing-visual .bd-vis-grid {
  position: absolute;
  inset: 13% 12% 28% 12%;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(5,1fr);
  gap: 5px;
  padding: 8px;
  background: rgba(8,5,15,0.35);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 10px;
}

.bd-landing-visual .bd-vis-grid span {
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
}

.bd-landing-visual .bd-vis-wave {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 11%;
  height: 17%;
  display: flex;
  align-items: flex-end;
  gap: 3.5px;
}

.bd-landing-visual .bd-vis-wave span {
  flex: 1;
  background: linear-gradient(to top, var(--bd-teal-bright), var(--bd-violet-soft));
  border-radius: 999px;
  animation: bd-pro-wave 1.55s ease-in-out infinite;
}
.bd-landing-visual .bd-vis-wave span:nth-child(2){animation-delay:.12s}
.bd-landing-visual .bd-vis-wave span:nth-child(3){animation-delay:.26s}
.bd-landing-visual .bd-vis-wave span:nth-child(4){animation-delay:.07s}

@keyframes bd-pro-wave {
  0%,100%{height:24%}
  48%{height:100%}
}

@media (max-width: 980px) {
  .relative.flex.min-h-\[88vh\] .bd-landing-visual {
    display: none;
  }
}

/* Hide old decorative elements */
.bd-hero-showcase,
.bd-showcase-card,
.ui-waveform,
.bd-hero-eq {
  display: none !important;
}

/* How it works — clean, scannable, pro */
.bd-how {
  padding-block: clamp(2.25rem, 5vh, 3.5rem) !important;
  border-top: 1px solid var(--bd-divider);
}

.bd-how h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.15rem) !important;
  font-weight: 800 !important;
  margin-bottom: 1.65rem !important;
}

.bd-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.15rem;
}

.bd-how-step {
  background: var(--sp-highlight);
  border: 1px solid var(--bd-divider);
  border-radius: var(--bd-radius-lg);
  padding: 1.15rem 1.25rem;
  transition: transform .1s ease, border-color .1s ease;
}

.bd-how-step:hover {
  transform: translateY(-2px);
  border-color: rgba(124,58,237,0.35);
}

.bd-how-step .num {
  font-family: var(--bd-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--bd-violet-soft);
  margin-bottom: 0.45rem;
}

.bd-how-step h4 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.bd-how-step p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--bd-text-sub);
  line-height: 1.45;
}

/* Final CTA — strong conversion */
.bd-final-cta {
  padding-block: 2.25rem 3rem;
  margin-top: 0.5rem;
}

.bd-final-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(90deg, var(--sp-highlight), rgba(124,58,237,0.08));
  border: 1px solid var(--bd-divider);
  border-radius: var(--bd-radius-lg);
  padding: 1.5rem 1.85rem;
}

.bd-final-inner h3 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 800;
}

.bd-final-inner p {
  margin: 0;
  color: var(--bd-text-sub);
  font-size: 0.95rem;
}

.bd-cta-big {
  white-space: nowrap;
  min-height: 3.25rem !important;
  padding-inline: 1.85rem !important;
}

/* Pro header polish */
.bd-pro-header {
  border-bottom-color: var(--bd-divider) !important;
}

.site-header .btn-primary {
  box-shadow: 0 6px 20px -6px rgba(124,58,237,0.45) !important;
}