/* The main container for your Landing/Hero section */
.hero-section {
    width: 100%;
    /* FIX: Force the hero to take up exactly the remaining vertical space */
    height: calc(100vh - 142px); /* Header(92) + Footer(50) = 142 */

    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* MODIFIED: Changed from 'center' to 'flex-start' so we can manually space it */
    justify-content: flex-start;
    /* Aggressive overflow control to stop the "1px leak" */
    overflow: hidden;
    box-sizing: border-box;
    background-color: #001219;
    background-image: radial-gradient(at 0% 0%, rgba(0, 95, 115, 0.15) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(10, 147, 150, 0.12) 0px, transparent 50%), radial-gradient(at 80% 20%, rgba(0, 180, 216, 0.08) 0px, transparent 40%);
}

    /* Invisible spacer before the content to "push" it down visually */
    .hero-section::before {
        content: "";
        /* This pushes the content block down by a fluid amount of available space */
        flex-grow: 1;
        max-height: 20vh; /* Limits how far it goes on huge screens */
        min-height: 5vh; /* Minimum safe distance from header on laptops */
    }

    /* Ensure other overlays remain z-indexed correctly */
    .hero-section::after {
        content: "";
        /* (keep your subtle grid overlays here) */
    }

.hero-content {
    position: relative;
    z-index: 10; /* Keep content forward */
    text-align: center;
    padding: 0 2rem;
    /* Standard constraints */
    width: 100%;
    max-width: 1200px;
    /* FIX: Make the content itself a flexible stack so it can shrink */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Proportional spacing between ALL core elements (h1 -> p -> buttons -> icons) */
    gap: clamp(1vh, 3vh, 30px);
}

    /* Typography Spacing Fixes */
    .hero-content h1 {
        /* Responsive text that shrinks on smaller laptop viewports */
        font-size: clamp(2rem, 5.5vh, 3.5rem);
        line-height: 1.1;
        color: #fff;
        margin: 0; /* Reset margins in favor of gap */
    }

    .hero-content p {
        font-size: clamp(1rem, 2vh, 1.25rem);
        color: var(--payoff-color);
        margin: 0; /* Reset margins in favor of gap */
    }

/* FIX: Refactored Call to Action Container */
.cta-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* Removed margin-bottom in favor of hero-content gap */
    /* Keep a minimum height for the buttons themselves, but no max-height */
    min-height: 40px;
}

/* Ensure the button borders/shadows don't cause the 1px leak */
.btn-calltoaction-blue, .btn-calltoaction-white {
    box-sizing: border-box;
}

/* Features Grid Spacing */
.features-grid {
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 20px;
    /* Optional: Ensure this section isn't stretching */
    align-items: flex-start;
}