/* ============================================
   ULTIMATE SECTION SEPARATION FIX
   ============================================ */

/* Force each section to be independent block */
body {
    display: flex !important;
    flex-direction: column !important;
}

main {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
}

/* Each section as flex item */
#about, #pricing,
.hero-section, .about-section, .pricing-section {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    z-index: auto !important;
    flex-shrink: 0 !important;
}

/* Hero needs relative for absolute children */
#hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    flex-shrink: 0 !important;
    overflow: clip !important;
}

@media (min-width: 992px) {
    #hero { min-height: 92vh !important; }
}

/* Force spacing */
#hero {
    margin-bottom: 0 !important;
    order: 1 !important;
}

#about {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 60px 0 !important;
    order: 2 !important;
}

#pricing {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 60px 0 !important;
    order: 3 !important;
}

/* Prevent any overlapping */
* {
    box-sizing: border-box !important;
}

/* Override any potential absolute positioning */
#hero .container-fluid,
#about .container-fluid,
#pricing .container-fluid {
    position: static !important;
}