/* ===== Hero Section ===== */
    .heroSection {
        position: relative;
        min-height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing20) var(--spacing6);
        background: radial-gradient(ellipse at top, rgba(31, 165, 206, 0.3) 0%, var(--bgBase) 70%);
        margin-top: -64px;
    }

    .heroContent {
        max-width: 48rem;
        text-align: center;
    }

    .heroTitle {
        font-size: 2.5rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.1;
        color: #fff;
    }

    .heroSubtitle {
        font-size: 1.125rem;
        color: var(--accentColor);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        font-weight: 500;
        margin-bottom: var(--spacing8);
    }

    .heroDescription {
        font-size: 0.875rem;
        color: var(--gray500);
        margin-bottom: var(--spacing12);
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .heroCta {
        
        background-color: var(--accentColor);
        color: #072a35;
        text-transform: uppercase;
        font-weight: 700;
        box-shadow: 0 20px 25px -5px rgba(31, 165, 206, 0.2);
        border-radius: 7px;
        letter-spacing: 0.51px;
        padding: 12px 25px;
        font-size: 17px;
    }

    .heroCta:hover {
       background-color:#27b5e1;
    }