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

.monitoring-hero{

    padding:190px 0 120px;

    background:
        linear-gradient(
            rgba(8,17,31,.45),
            rgba(8,17,31,.45)
        ),
        url("../assets/monitoring-hero.webp");

    background-size:cover;
    background-position:center;

    text-align:center;

    color:#fff;

}

.monitoring-hero h1{

    color:#fff;

    font-size:68px;

    line-height:1.05;

    margin:25px 0;

}

.monitoring-hero h1 span{

    color:var(--primary);

}

.monitoring-hero p{

    max-width:850px;

    margin:auto;

    font-size:22px;

    opacity:.9;

}

.monitoring-hero .hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}

/* =========================================================
INTRO
========================================================= */

.monitoring-intro{

    padding:110px 0;

    background:#fff;

}

.monitoring-intro-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* =========================================================
PROBLÉMÁK
========================================================= */
.problem-card::before{

    content:'';

    position:absolute;

    inset:0;

    background-size:70%;
    background-repeat:no-repeat;
    background-position:center;

    opacity:.32;

    z-index:0;

}

.problem-card h3,
.problem-card p{

    position:relative;

    z-index:1;

}

.problem-card.storage::before{
    background-image:url('../assets/storage-alert.webp');
}

.problem-card.cpu::before{
    background-image:url('../assets/cpu-alert.webp');
}

.problem-card.memory::before{
    background-image:url('../assets/memory-alert.webp');
}

.problem-card.vpn::before{
    background-image:url('../assets/vpn-alert.webp');
}

.problem-card.website::before{
    background-image:url('../assets/website-alert.webp');
}

.problem-card.backup::before{
    background-image:url('../assets/backup-failure.webp');
}

.monitoring-problems{

    padding:110px 0;

    background:#f8fafc;

}

.problem-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.problem-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:
        0 15px 40px rgba(15,23,42,.05);
    position:relative;
    
    overflow:hidden;

}

/* =========================================================
MIT FIGYELÜNK
========================================================= */

.monitoring-watch{

    padding:110px 0;

    background:#fff;

}

.watch-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.watch-card{

    border-radius:24px;

    padding:35px;

    background:#f8fafc;

}

/* =========================================================
FOLYAMAT
========================================================= */

.monitoring-flow{

    padding:120px 0;

    background:#f8fafc;

}

.flow-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.flow-step{

    text-align:center;

    background:#fff;

    padding:40px;

    border-radius:24px;

}

/* =========================================================
RIASZTÁS
========================================================= */

.monitoring-alerts{

    padding:110px 0;

    background:#fff;

}

.alert-badges{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

.alert-badges span{

    padding:15px 24px;

    border-radius:999px;

    background:#f8fafc;

    font-weight:600;

}

/* =========================================================
VALÓS PÉLDÁK
========================================================= */

.monitoring-real{

    padding:110px 0;

    background:#f8fafc;

}

.real-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.real-item{

    background:#fff;

    border-left:5px solid var(--primary);

    padding:25px;

    border-radius:16px;

}

/* =========================================================
TECH
========================================================= */

.monitoring-tech{

    padding:110px 0;

    background:#fff;

}

.tech-badges{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

.tech-badges span{

    background:#f8fafc;

    padding:14px 22px;

    border-radius:999px;

}

/* =========================================================
24/7
========================================================= */

.monitoring-stats{

    padding:120px 0;

    background:#08111f;

    color:#fff;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-card{

    text-align:center;

}

.stat-number{

    font-size:56px;

    font-weight:800;

    color:var(--primary);

}

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

.monitoring-cta{

    padding:120px 0;

    text-align:center;

    background:
        linear-gradient(
            rgba(255,255,255,.92),
            rgba(255,255,255,.92)
        ),
        url("../assets/monitoring-future.webp");

    background-size:cover;

    background-position:center;

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:992px){

    .problem-grid,
    .watch-grid,
    .flow-grid,
    .stats-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media(max-width:768px){

    .monitoring-hero{

        padding:150px 0 80px;

    }

    .monitoring-hero h1{

        font-size:40px;

    }

    .monitoring-intro-grid,
    .problem-grid,
    .watch-grid,
    .flow-grid,
    .stats-grid,
    .real-grid{

        grid-template-columns:1fr;

    }

    .monitoring-hero .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

}