/* =========================================================
   Madani Volunteer Network — Professional Final Hero
   ========================================================= */

.mvn-compact-hero{
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    padding:54px 0 58px!important;
    overflow:hidden!important;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(123,205,105,.13),
            transparent 32%
        ),
        linear-gradient(
            118deg,
            #052f2a 0%,
            #07483c 57%,
            #095843 100%
        )!important;
}

/* subtle institutional pattern */

.mvn-compact-hero:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        )!important;

    background-size:72px 72px!important;
}

/* inner page container */

.mvn-hero-final-shell{
    position:relative!important;
    z-index:1!important;

    width:min(1440px,calc(100% - 72px))!important;
    max-width:1440px!important;
    min-height:0!important;
    height:auto!important;

    margin:0 auto!important;

    display:grid!important;
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(370px,.92fr)!important;

    align-items:center!important;
    gap:clamp(40px,5vw,78px)!important;
}

/* text content */

.mvn-hero-final-copy{
    position:relative!important;
    z-index:2!important;
    min-width:0!important;
    max-width:790px!important;
}

/* top label */

.mvn-hero-final-copy
:is(
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="overline"]
){
    width:max-content!important;
    max-width:100%!important;

    margin:0 0 17px!important;
    padding:7px 12px!important;

    display:inline-flex!important;
    align-items:center!important;

    border:1px solid rgba(212,245,169,.21)!important;
    border-radius:999px!important;

    color:#daf4ad!important;
    background:rgba(255,255,255,.055)!important;

    font-size:10px!important;
    font-weight:900!important;
    line-height:1.2!important;
    letter-spacing:1.35px!important;
    text-transform:uppercase!important;
}

/* main headline */

.mvn-compact-hero h1{
    max-width:780px!important;
    margin:0 0 15px!important;

    color:#ffffff!important;

    font-size:clamp(45px,5vw,70px)!important;
    font-weight:900!important;
    line-height:1.015!important;
    letter-spacing:-2.4px!important;
    text-wrap:balance!important;
}

/* preserve intentional highlighted words */

.mvn-compact-hero h1
:is(
    em,
    mark,
    .accent,
    .highlight,
    [class*="accent"],
    [class*="highlight"]
){
    color:#d1f398!important;
    background:transparent!important;
    font-style:normal!important;
}

/* tagline */

.mvn-compact-hero h2{
    max-width:700px!important;
    margin:0 0 13px!important;

    color:#f5faf8!important;

    font-size:17px!important;
    font-weight:750!important;
    line-height:1.42!important;
}

/* supporting copy */

.mvn-hero-final-copy p{
    max-width:720px!important;
    margin:0 0 20px!important;

    color:#bdd3cd!important;

    font-size:15px!important;
    line-height:1.68!important;
}

/* action area */

.mvn-hero-final-copy
:is(
    [class*="hero-actions"],
    [class*="hero-buttons"],
    [class*="actions"],
    [class*="cta"]
){
    margin-top:25px!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:11px!important;
}

/* buttons identified by the lightweight script */

.mvn-hero-final-button{
    min-height:48px!important;
    padding:12px 20px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;

    border-radius:12px!important;

    font-size:13px!important;
    font-weight:850!important;
    line-height:1!important;
    text-decoration:none!important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease!important;
}

.mvn-hero-final-primary{
    color:#062e29!important;
    border:1px solid #bce77e!important;

    background:
        linear-gradient(
            135deg,
            #ddf5aa,
            #9edb59
        )!important;

    box-shadow:
        0 12px 27px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.62)!important;
}

.mvn-hero-final-secondary{
    color:#ffffff!important;
    border:1px solid rgba(255,255,255,.22)!important;
    background:rgba(255,255,255,.055)!important;
    box-shadow:none!important;
}

.mvn-hero-final-button:hover{
    transform:translateY(-2px)!important;
}

.mvn-hero-final-primary:hover{
    box-shadow:
        0 16px 32px rgba(0,0,0,.21),
        inset 0 1px 0 rgba(255,255,255,.62)!important;
}

.mvn-hero-final-secondary:hover{
    border-color:rgba(210,243,168,.48)!important;
    background:rgba(255,255,255,.09)!important;
}

/* right network presentation */

.mvn-hero-final-visual{
    position:relative!important;
    min-width:0!important;
    min-height:340px!important;
    max-height:390px!important;

    padding:24px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    overflow:hidden!important;

    border:1px solid rgba(255,255,255,.105)!important;
    border-radius:30px!important;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(193,235,137,.13),
            transparent 49%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.018)
        )!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 20px 45px rgba(0,0,0,.10)!important;
}

.mvn-hero-final-visual:before{
    content:"Connect · Serve · Grow"!important;
    position:absolute!important;
    top:18px!important;
    left:20px!important;

    color:#a9c8c0!important;

    font-size:8px!important;
    font-weight:850!important;
    line-height:1!important;
    letter-spacing:1.3px!important;
    text-transform:uppercase!important;
}

/* keep original network graphic contained */

.mvn-hero-final-visual > *{
    max-width:100%!important;
    max-height:330px!important;
    margin:auto!important;
    transform:scale(.88)!important;
    transform-origin:center!important;
}

.mvn-hero-final-visual img,
.mvn-hero-final-visual svg{
    width:auto!important;
    max-width:100%!important;
    max-height:315px!important;
    object-fit:contain!important;
}

/* remove unnecessary large spacing inherited from older styles */

.mvn-compact-hero [class*="stats"]{
    margin-top:15px!important;
}

.mvn-compact-hero [class*="stat"]{
    min-height:0!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
}

/* tablet */

@media(max-width:1050px){
    .mvn-compact-hero{
        padding:46px 0 50px!important;
    }

    .mvn-hero-final-shell{
        width:calc(100% - 44px)!important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(315px,.82fr)!important;

        gap:32px!important;
    }

    .mvn-compact-hero h1{
        font-size:clamp(40px,5.8vw,57px)!important;
    }

    .mvn-hero-final-visual{
        min-height:310px!important;
        max-height:350px!important;
        padding:19px!important;
    }
}

/* mobile */

@media(max-width:760px){
    .mvn-compact-hero{
        padding:31px 0 35px!important;
    }

    .mvn-hero-final-shell{
        width:calc(100% - 30px)!important;
        grid-template-columns:1fr!important;
        gap:30px!important;
    }

    .mvn-compact-hero h1{
        max-width:100%!important;
        margin-bottom:12px!important;

        font-size:clamp(35px,10vw,48px)!important;
        line-height:1.025!important;
        letter-spacing:-1.7px!important;
    }

    .mvn-compact-hero h2{
        font-size:15px!important;
    }

    .mvn-hero-final-copy p{
        margin-bottom:16px!important;
        font-size:13px!important;
        line-height:1.62!important;
    }

    .mvn-hero-final-copy
    :is(
        [class*="hero-actions"],
        [class*="hero-buttons"],
        [class*="actions"],
        [class*="cta"]
    ){
        align-items:stretch!important;
        flex-direction:column!important;
    }

    .mvn-hero-final-button{
        width:100%!important;
    }

    .mvn-hero-final-visual{
        min-height:270px!important;
        max-height:300px!important;
        padding:16px!important;
        border-radius:23px!important;
    }

    .mvn-hero-final-visual > *{
        max-height:255px!important;
        transform:scale(.78)!important;
    }
}

@media(max-width:430px){
    .mvn-hero-final-shell{
        width:calc(100% - 20px)!important;
    }

    .mvn-hero-final-visual{
        min-height:240px!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .mvn-compact-hero *,
    .mvn-compact-hero *:before,
    .mvn-compact-hero *:after{
        animation:none!important;
        transition:none!important;
    }
}