/* ==========================================================================
   DA Eventz by the Numbers - Cardless Floating Horizontal Editorial Showcase
   Apple, Antigravity, Framer, Stripe, Linear & Awwwards Award-Winning UI
   ========================================================================== */

:root {
  --bgn-bg-gradient: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 50%, #FAFAFC 100%);
  --bgn-text-heading: #0F172A;
  --bgn-text-accent: #2563EB;
  --bgn-text-body: #475569;
  --bgn-font-heading: 'Syne', 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --bgn-font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

.bgn-section {
  position: relative;
  background: var(--bgn-bg-gradient);
  color: var(--bgn-text-heading);
  padding: 150px 0 160px;
  overflow: hidden;
  font-family: var(--bgn-font-body);
}

/* Ambient Glow Orbs & Light Streaks */
.bgn-bg-glow-1 {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.045) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.bgn-bg-glow-2 {
  position: absolute;
  bottom: 15%;
  right: 10%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(212, 161, 57, 0.045) 0%, transparent 75%);
  filter: blur(90px);
  pointer-events: none;
}

.bgn-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 2;
}

/* Section Header */
.bgn-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 72px;
}

.bgn-heading {
  position: relative;
  font-family: var(--bgn-font-heading);
  font-size: clamp(2.4rem, 4.2vw, 3.8rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--bgn-text-heading);
  margin: 0;
  padding-bottom: 16px;
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bgn-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, #2563EB 0%, #D4A139 100%);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.bgn-heading.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Connecting Animated Glowing Scroll Progress Line */
.bgn-line-wrapper {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(226, 232, 240, 0.6);
  margin: 0 0 64px;
  overflow: hidden;
}

.bgn-progress-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563EB 0%, #D4A139 50%, #2563EB 100%);
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
  transition: width 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Horizontal Floating Typography Showcase (No Cards) */
.bgn-horizontal-showcase {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 36px;
  position: relative;
}

/* Floating Typography Block (No Rectangular Borders or Card Boxes) */
.bgn-stat-block {
  flex: 1;
  position: relative;
  padding: 20px 16px;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bgn-stat-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Independent Subtle Floating Animations */
.bgn-stat-block-1 { animation: bgnFloat1 7s ease-in-out infinite alternate; }
.bgn-stat-block-2 { animation: bgnFloat2 8s ease-in-out infinite alternate 0.6s; }
.bgn-stat-block-3 { animation: bgnFloat3 6.5s ease-in-out infinite alternate 1.2s; }
.bgn-stat-block-4 { animation: bgnFloat4 7.5s ease-in-out infinite alternate 1.8s; }

@keyframes bgnFloat1 { 0% { transform: translateY(0); } 100% { transform: translateY(-9px); } }
@keyframes bgnFloat2 { 0% { transform: translateY(0); } 100% { transform: translateY(-12px); } }
@keyframes bgnFloat3 { 0% { transform: translateY(0); } 100% { transform: translateY(-7px); } }
@keyframes bgnFloat4 { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }

/* Thin Vertical Separator Line */
.bgn-stat-block:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15%;
  right: -18px;
  height: 70%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(226, 232, 240, 0.8) 50%, transparent 100%);
}

/* Hero Typography Number (Massive Dominant Element) */
.bgn-number-hero {
  font-family: var(--bgn-font-heading);
  font-size: clamp(4.2rem, 6.5vw, 6.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #0F172A 0%, #2563EB 70%, #D4A139 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.5s ease;
}

.bgn-stat-block:hover .bgn-number-hero {
  transform: scale(1.05);
  filter: drop-shadow(0 15px 25px rgba(37, 99, 235, 0.15));
}

/* Title & Description Typography */
.bgn-title {
  font-family: var(--bgn-font-heading);
  font-size: clamp(1.2rem, 1.5vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--bgn-text-heading);
  margin: 0 0 12px;
  line-height: 1.3;
}

.bgn-description {
  font-family: var(--bgn-font-body);
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
  line-height: 1.75;
  color: var(--bgn-text-body);
  margin: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.bgn-stat-block:hover .bgn-description {
  transform: translateY(-4px);
  color: #1E293B;
}

/* Responsive Adaptations */
@media (max-width: 1199px) {
  .bgn-horizontal-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
  .bgn-stat-block:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .bgn-section {
    padding: 100px 0 110px;
  }
  .bgn-horizontal-showcase {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 575px) {
  .bgn-section {
    padding: 80px 0 90px;
  }
  .bgn-stat-block {
    padding: 10px 0;
  }
}