/* ==========================
   IMPACT
========================== */

.impact{

    max-width:1400px;
    margin:auto;
    padding:120px 20px 180px;

}

/* ==========================
   IMPACT HEADER
========================== */

.impact-header{

    max-width:900px;
    margin:0 auto 80px;
    text-align:center;

}

.impact-title{

    font-size:clamp(3rem,7vw,5.5rem);
    line-height:1.05;
    font-weight:800;
    margin:18px 0 25px;

}

.impact-title span{

    display:block;

    background:linear-gradient(
        90deg,
        var(--orange),
        #ffbf69,
        #ff8c42
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.impact-description{

    max-width:720px;
    margin:auto;
    font-size:1.1rem;
    line-height:1.9;
    color:#d7d7d7;

}

/* ==========================
   IMPACT GRID
========================== */

.impact-grid{

    max-width:1300px;
    margin:80px auto 0;
    padding:0 40px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.impact-card{

    min-height:200px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:35px 25px;

    text-align:center;

    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:24px;
    backdrop-filter:blur(18px);

    transition:.35s ease;

}

.impact-card:hover{

    transform:translateY(-8px);
    border-color:rgba(247,148,29,.4);

}

.impact-card h3{

    font-size:clamp(3rem,5vw,4rem);
    font-weight:800;
    color:var(--orange);

    line-height:1;

    margin:0;

}

.plus{

    display:block;

    font-size:1.5rem;
    font-weight:700;

    color:var(--orange);

    margin:8px 0 18px;

}

.impact-card p{

    margin:0;

    color:#d9d9d9;

    font-size:1.05rem;
    line-height:1.6;

}

/* ==========================
   REVEAL ANIMATION
========================== */

.reveal{

    opacity:0;
    transform:translateY(50px);
    transition:1s ease;

}

.reveal.show{

    opacity:1;
    transform:translateY(0);

}

/* ==========================
   TABLET
========================== */

@media (max-width:992px){

    .impact-grid{

        grid-template-columns:repeat(2,1fr);
        padding:0 20px;

    }

}

/* ==========================
   MOBILE
========================== */

@media (max-width:600px){

    .impact{

        padding:90px 20px 120px;

    }

    .impact-grid{

        grid-template-columns:1fr;
        gap:20px;
        padding:0;

    }

    .impact-title{

        font-size:2.6rem;

    }

    .impact-description{

        font-size:1rem;

    }

}