/* ==================================================
   SERVICES PAGE
   NETPROG.CH
================================================== */


/* ==================================================
   CONTAINER FIX
================================================== */



*,
*::before,
*::after{

    box-sizing:border-box;

}

.solution-card{

    width:100%;

    max-width:100%;

}


/* ==================================================
   GENERAL SECTION SPACING
================================================== */

.services-hero,
.solutions,
.addons,
.included,
.care-plans,
.hosting,
.why-netprog,
.services-faq,
.services-cta{

    padding:110px 0;

}

.solutions,
.included,
.hosting,
.services-faq{

    background:#ffffff;

}

.addons,
.care-plans,
.why-netprog,
.services-cta{

    background:#f8fafc;

}


/* ==================================================
   SECTION HEADING
================================================== */

.section-heading{

    max-width:860px;

    margin:0 auto 70px;

    text-align:center;

}

.section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--accent-color);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.section-heading h2{

    margin-bottom:26px;

    font-size:clamp(2.4rem,5vw,4rem);

    line-height:1.15;

}

.section-heading p{

    max-width:760px;

    margin:0 auto;

    font-size:1.2rem;

    line-height:1.9;

    color:var(--text-light);

}


/* ==================================================
   HERO
================================================== */

.services-hero{

    padding:140px 0 120px;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fafc 100%
    );

}

.services-hero .container{

    max-width:900px;

    text-align:center;

}

.services-hero h1{

    margin:28px 0;

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.08;

}

.hero-text{

    max-width:760px;

    margin:0 auto 48px;

    font-size:1.25rem;

    line-height:1.9;

    color:var(--text-light);

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


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

.solutions-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:36px;

}


/* ==================================================
   CARD
================================================== */

.solution-card{

    position:relative;

    padding:42px;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.08);

    border-radius:26px;

    box-shadow:0 20px 45px rgba(15,23,42,.05);

    transition:.35s ease;

}

.solution-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(15,23,42,.10);

}

.solution-card h3{

    margin-bottom:12px;

    font-size:2rem;

}

.solution-price{

    margin-bottom:24px;

    color:var(--accent-color);

    font-size:1.8rem;

    font-weight:800;

}

.solution-card p{

    margin-bottom:28px;

    line-height:1.9;

    color:var(--text-light);

}

.solution-card ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.solution-card li{

    position:relative;

    padding-left:28px;

    line-height:1.8;

}

.solution-card li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--accent-color);

    font-weight:700;

}


/* ==================================================
   FEATURED CARD
================================================== */

.featured-card{

    border:2px solid var(--accent-color);

    transform:translateY(-8px);

}

.featured-card:hover{

    transform:translateY(-16px);

}

.featured-badge{

    position:absolute;

    top:-18px;

    left:42px;

    padding:10px 22px;

    background:var(--accent-color);

    color:#fff;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    border-radius:999px;

    box-shadow:0 10px 25px rgba(220,38,38,.25);

}


/* ==================================================
   INCLUDED
================================================== */

.included-box{

    max-width:900px;

    margin:0 auto;

    padding:55px;

    background:#fff;

    border:1px solid rgba(15,23,42,.08);

    border-radius:28px;

    box-shadow:0 25px 60px rgba(15,23,42,.06);

}

.included-box ul{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:18px 40px;

}

.included-box li{

    position:relative;

    padding-left:30px;

    line-height:1.8;

    font-weight:500;

}

.included-box li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--accent-color);

    font-weight:700;

}


/* ==================================================
   CARE PLANS
================================================== */

.care-plans .solution-card{

    min-height:100%;

}

.care-plans .solution-card ul{

    margin-top:22px;

}


/* ==================================================
   HOSTING
================================================== */

.hosting{

    background:#f8fafc;

}

.hosting-box{

    max-width:920px;

    margin:0 auto;

    padding:70px 60px;

    text-align:center;

    background:#fff;

    border-radius:30px;

    border:1px solid rgba(15,23,42,.08);

    box-shadow:0 30px 70px rgba(15,23,42,.08);

}

.hosting-box h2{

    margin:26px 0;

    font-size:clamp(2.5rem,5vw,4rem);

    line-height:1.15;

}

.hosting-price{

    margin:34px 0;

    color:var(--accent-color);

    font-size:clamp(2.8rem,6vw,4.2rem);

    font-weight:800;

}

.hosting-box p{

    max-width:720px;

    margin:0 auto;

    line-height:1.9;

    color:var(--text-light);

}

.hosting-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin:46px 0;

}

.hosting-features span{

    padding:14px 26px;

    background:#eef2f7;

    border-radius:999px;

    font-weight:600;

    transition:.3s;

}

.hosting-features span:hover{

    background:var(--accent-color);

    color:#fff;

}

.hosting-note{

    margin-top:20px;

    font-weight:700;

    color:var(--accent-color);

}

/* ==================================================
   WHY NETPROG
================================================== */

.why-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:36px;

}

.why-card{

    padding:42px;

    background:#fff;

    border:1px solid rgba(15,23,42,.08);

    border-radius:26px;

    box-shadow:0 20px 45px rgba(15,23,42,.05);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(15,23,42,.10);

}

.why-card h3{

    margin-bottom:18px;

    font-size:1.9rem;

    line-height:1.3;

}

.why-card p{

    line-height:1.9;

    color:var(--text-light);

}


/* ==================================================
   FAQ
================================================== */

.faq-list{

    display:grid;

    gap:28px;

    max-width:920px;

    margin:0 auto;

}

.faq-item{

    padding:40px;

    background:#fff;

    border:1px solid rgba(15,23,42,.08);

    border-radius:24px;

    box-shadow:0 20px 45px rgba(15,23,42,.05);

    transition:.3s;

}

.faq-item:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 70px rgba(15,23,42,.08);

}

.faq-item h3{

    margin-bottom:20px;

    font-size:2rem;

    line-height:1.3;

}

.faq-item p{

    line-height:1.9;

    color:var(--text-light);

}


/* ==================================================
   CTA
================================================== */

.services-cta{

    text-align:center;

    background:linear-gradient(
        180deg,
        #f8fafc 0%,
        #ffffff 100%
    );

}

.services-cta .container{

    max-width:900px;

}

.services-cta h2{

    margin:26px 0;

    font-size:clamp(2.5rem,5vw,4.2rem);

    line-height:1.15;

}

.services-cta p{

    max-width:760px;

    margin:0 auto 46px;

    font-size:1.2rem;

    line-height:1.9;

    color:var(--text-light);

}

.services-cta .btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

}


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

@media (max-width:991px){

    .solutions-grid,
    .why-grid{

        grid-template-columns:1fr;

    }

    .featured-card{

        transform:none;

    }

    .featured-card:hover{

        transform:translateY(-8px);

    }

    .included-box{

        padding:40px;

    }

    .hosting-box{

        padding:45px 32px;

    }

}


@media (max-width:768px){

    .services-hero,
    .solutions,
    .addons,
    .included,
    .care-plans,
    .hosting,
    .why-netprog,
    .services-faq,
    .services-cta{

        padding:80px 0;

    }

    .services-hero h1{

        font-size:2.7rem;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        font-size:2.5rem;

    }

    .hero-text,
    .section-heading p{

        font-size:1.05rem;

    }

    .solution-card,
    .why-item,
    .faq-item{

        padding:30px;

    }

    .included-box{

        padding:30px;

    }

    .included-box ul{

        grid-template-columns:1fr;

    }

    .hosting-box{

        padding:32px 24px;

    }

    .hosting-price{

        font-size:2.2rem;

    }

    .hosting-features{

        gap:14px;

    }

    .hosting-features span{

        padding:12px 20px;

    }

    .faq-item h3{

        font-size:1.6rem;

    }
    
    .solutions-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));

    gap:36px;

}