/* ===========================================================
   SECTIONS.CSS
   Enterprise Edition
   PART 1
   Shared Sections + Statistics + Services
=========================================================== */


/* ===========================================================
   SECTION
=========================================================== */

.section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

}

.section-light{

    background:#ffffff;

}

.section-alt{

    background:#F8FBFD;

}

.section-gradient{

    background:
        radial-gradient(circle at top right,
        rgba(58,172,193,.08),
        transparent 40%),

        radial-gradient(circle at bottom left,
        rgba(243,127,43,.08),
        transparent 35%),

        #ffffff;

}


/* ===========================================================
   SECTION HEADER
=========================================================== */

.section-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:#ffffff;

    border:1px solid rgba(58,172,193,.20);

    font-weight:700;

    color:var(--primary-blue);

    margin-bottom:22px;

}

.section-tag::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary-orange);

}

.section-title{

    font-size:clamp(2.4rem,5vw,4rem);

    line-height:1.15;

    margin-bottom:24px;

    color:#18384A;

}

.section-description{

    font-size:1.15rem;

    line-height:1.85;

    color:#647988;

}


/* ===========================================================
   STATISTICS
=========================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.stat-card{

    background:#ffffff;

    border-radius:22px;

    padding:40px 30px;

    text-align:center;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 18px 45px rgba(0,0,0,.06);

    transition:.35s ease;

}

.stat-card:hover{

    transform:translateY(-10px);

}

.stat-number{

    font-size:3rem;

    font-weight:800;

    color:var(--primary-orange);

    line-height:1;

}

.stat-title{

    margin-top:14px;

    font-size:1.05rem;

    font-weight:700;

    color:#244252;

}

.stat-description{

    margin-top:10px;

    color:#748592;

    line-height:1.7;

}


/* ===========================================================
   SERVICES
=========================================================== */

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:34px;

}

.service-card{

    position:relative;

    background:#ffffff;

    border-radius:26px;

    padding:42px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 20px 45px rgba(0,0,0,.06);

    transition:.35s ease;

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(58,172,193,.04),

            rgba(243,127,43,.04)

        );

    opacity:0;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:0 35px 60px rgba(0,0,0,.12);

}

.service-card:hover::before{

    opacity:1;

}

.service-icon{

    width:74px;

    height:74px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    background:

        linear-gradient(

            135deg,

            var(--primary-orange),

            #FFB45F

        );

    color:#ffffff;

    font-size:1.7rem;

    box-shadow:0 15px 30px rgba(243,127,43,.30);

}

.service-title{

    font-size:1.45rem;

    margin-bottom:18px;

    color:#173A4A;

}

.service-description{

    color:#6B7F8C;

    line-height:1.85;

    margin-bottom:24px;

}

.service-list{

    list-style:none;

    padding:0;

    margin:0;

}

.service-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

    color:#516776;

}

.service-list li::before{

    content:"✓";

    color:var(--primary-orange);

    font-weight:700;

}

.service-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:26px;

    font-weight:700;

    color:var(--primary-blue);

    text-decoration:none;

}

.service-link:hover{

    gap:16px;

}
/* ===========================================================
   HOW IT WORKS
=========================================================== */

.process{

    position:relative;

}

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:32px;

    position:relative;

}

.process-grid::before{

    content:"";

    position:absolute;

    top:42px;

    left:12%;

    width:76%;

    height:3px;

    background:linear-gradient(
        90deg,
        var(--primary-blue),
        var(--primary-orange)
    );

    z-index:0;

}

.process-card{

    position:relative;

    z-index:2;

    text-align:center;

}

.process-number{

    width:86px;

    height:86px;

    margin:0 auto 28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    font-weight:800;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--primary-orange),
        #FFB95F
    );

    box-shadow:0 20px 45px rgba(243,127,43,.28);

}

.process-title{

    margin-bottom:16px;

    font-size:1.35rem;

    color:#173B4A;

}

.process-description{

    color:#667B89;

    line-height:1.85;

}


/* ===========================================================
   WHO WE HELP
=========================================================== */

.audience-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:34px;

}

.audience-card{

    position:relative;

    background:#ffffff;

    border-radius:24px;

    padding:42px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 18px 40px rgba(0,0,0,.06);

    transition:.35s;

}

.audience-card:hover{

    transform:translateY(-8px);

}

.audience-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(58,172,193,.12);

    color:var(--primary-blue);

    font-size:1.6rem;

    margin-bottom:24px;

}

.audience-title{

    font-size:1.4rem;

    margin-bottom:18px;

    color:#18384A;

}

.audience-description{

    line-height:1.85;

    color:#677A88;

}


/* ===========================================================
   CASE STUDY
=========================================================== */

.case-study{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.case-content h2{

    margin-bottom:24px;

}

.case-content p{

    line-height:1.9;

    color:#657A88;

    margin-bottom:22px;

}

.case-results{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    margin-top:34px;

}

.case-result{

    background:#ffffff;

    padding:30px;

    border-radius:20px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 16px 35px rgba(0,0,0,.05);

}

.case-result h3{

    color:var(--primary-orange);

    font-size:2rem;

    margin-bottom:10px;

}

.case-image{

    display:flex;

    align-items:center;

    justify-content:center;

}

.case-image img{

    width:100%;

    border-radius:28px;

}


/* ===========================================================
   LEADERSHIP RESOURCES
=========================================================== */

.resources-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.resource-card{

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(0,0,0,.06);

    transition:.35s;

}

.resource-card:hover{

    transform:translateY(-8px);

}

.resource-image{

    height:220px;

    overflow:hidden;

}

.resource-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.resource-card:hover img{

    transform:scale(1.08);

}

.resource-content{

    padding:30px;

}

.resource-category{

    display:inline-block;

    margin-bottom:16px;

    color:var(--primary-orange);

    font-weight:700;

    font-size:.85rem;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.resource-title{

    font-size:1.35rem;

    margin-bottom:16px;

    color:#18384A;

}

.resource-description{

    color:#667A88;

    line-height:1.85;

}

.resource-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:22px;

    color:var(--primary-blue);

    font-weight:700;

    text-decoration:none;

}

.resource-link:hover{

    gap:16px;

}
/* ===========================================================
   TESTIMONIALS
=========================================================== */

.testimonials{

    position:relative;

}

.testimonials-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

.testimonial-card{

    position:relative;

    padding:38px;

    background:#ffffff;

    border-radius:24px;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 20px 45px rgba(0,0,0,.06);

    transition:all .35s ease;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.testimonial-quote{

    font-size:3.5rem;

    line-height:1;

    color:rgba(243,127,43,.18);

    margin-bottom:18px;

}

.testimonial-text{

    color:#637987;

    line-height:1.9;

    margin-bottom:30px;

}

.testimonial-author{

    display:flex;

    align-items:center;

    gap:16px;

}

.testimonial-avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary-blue),
        var(--primary-orange)
    );

}

.testimonial-name{

    font-weight:700;

    color:#173B4A;

}

.testimonial-role{

    color:#728391;

    font-size:.92rem;

}

/* ===========================================================
   FAQ
=========================================================== */

.faq{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:#ffffff;

    border-radius:20px;

    margin-bottom:18px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    cursor:pointer;

    border:none;

    background:none;

    font-size:1.1rem;

    font-weight:700;

    color:#173B4A;

}

.faq-question:hover{

    color:var(--primary-orange);

}

.faq-answer{

    display:none;

    padding:0 30px 28px;

    color:#677A88;

    line-height:1.9;

}

.faq-item.active .faq-answer{

    display:block;

}

/* ===========================================================
   CALL TO ACTION
=========================================================== */

.cta-section{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    padding:90px 70px;

    background:linear-gradient(
        135deg,
        var(--primary-blue),
        #58C0D8
    );

    color:#ffffff;

}

.cta-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-220px;

    top:-180px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.cta-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

}

.cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

}

.cta-title{

    color:#ffffff;

    font-size:clamp(2.3rem,5vw,3.8rem);

    margin-bottom:24px;

}

.cta-description{

    color:rgba(255,255,255,.92);

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:36px;

}

.cta-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.cta-buttons .btn-secondary{

    background:#ffffff;

    color:var(--primary-blue);

}

.cta-buttons .btn-secondary:hover{

    background:#F5F9FB;

}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media (max-width:1100px){

    .stats-grid,
    .services-grid,
    .resources-grid,
    .testimonials-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .process-grid{

        grid-template-columns:repeat(2,1fr);

        gap:50px;

    }

    .process-grid::before{

        display:none;

    }

    .case-study{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .section{

        padding:80px 0;

    }

    .stats-grid,
    .services-grid,
    .resources-grid,
    .testimonials-grid,
    .audience-grid{

        grid-template-columns:1fr;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .case-results{

        grid-template-columns:1fr;

    }

    .cta-section{

        padding:60px 35px;

        border-radius:24px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

}

@media (max-width:480px){

    .section-header{

        margin-bottom:50px;

    }

    .section-title{

        font-size:2rem;

    }

    .service-card,
    .audience-card,
    .testimonial-card{

        padding:28px;

    }

    .faq-question{

        padding:20px;

        font-size:1rem;

    }

    .faq-answer{

        padding:0 20px 20px;

    }

}