/* =========================================================
   SSP ABOUT V2 PREMIUM ENTERPRISE
   Security Sales Perú
========================================================= */

.ssp-about{
    position:relative;
    padding:120px 0;
    overflow:hidden;
    background:
        linear-gradient(
            135deg,
            #050816 0%,
            #071327 45%,
            #050816 100%
        );
}

/* =========================================================
   BACKGROUND
========================================================= */

.ssp-about-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at top left,
            rgba(255,107,0,0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(0,119,255,0.08),
            transparent 35%
        );
    pointer-events:none;
}

.ssp-about-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        );
    background-size:70px 70px;
    opacity:0.08;
    pointer-events:none;
}

/* =========================================================
   WRAPPER
========================================================= */

.ssp-about-wrapper{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:
        1.1fr 0.9fr;
    gap:60px;
    align-items:center;
}

/* =========================================================
   CONTENT
========================================================= */

.ssp-about-content{
    position:relative;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.ssp-about-description{
    color:
        rgba(255,255,255,0.74);
    font-size:1.02rem;
    line-height:1.9;
    margin-bottom:26px;
    max-width:700px;
}

/* =========================================================
   FEATURES
========================================================= */

.ssp-about-features{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:40px;
}

/* =========================================================
   FEATURE
========================================================= */

.ssp-about-feature{
    display:flex;
    gap:22px;
    padding:26px;
    border-radius:28px;
    background:
        rgba(255,255,255,0.04);
    border:
        1px solid rgba(255,255,255,0.06);
    backdrop-filter:blur(14px);
    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

/* =========================================================
   FEATURE HOVER
========================================================= */

.ssp-about-feature:hover{
    transform:
        translateY(-6px);
    border-color:
        rgba(255,107,0,0.20);
    box-shadow:
        0 25px 50px rgba(0,0,0,0.28);
}

/* =========================================================
   ICON
========================================================= */

.ssp-about-feature-icon{
    flex-shrink:0;
    width:68px;
    height:68px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(
            135deg,
            rgba(255,107,0,0.18),
            rgba(255,107,0,0.08)
        );
    border:
        1px solid rgba(255,107,0,0.18);
    color:#ff6b00;
    font-size:1.5rem;
    box-shadow:
        0 15px 35px rgba(255,107,0,0.14);
}

/* =========================================================
   FEATURE INFO
========================================================= */

.ssp-about-feature-info h4{
    color:#ffffff;
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:10px;
}

.ssp-about-feature-info p{
    color:
        rgba(255,255,255,0.70);
    font-size:0.95rem;
    line-height:1.8;
}

/* =========================================================
   VISUAL
========================================================= */

.ssp-about-visual{
    position:relative;
}

/* =========================================================
   IMAGE WRAPPER
========================================================= */

.ssp-about-image-wrapper{
    position:relative;
    overflow:hidden;
    border-radius:36px;
    border:
        1px solid rgba(255,255,255,0.08);
    background:
        rgba(255,255,255,0.03);
    box-shadow:
        0 40px 80px rgba(0,0,0,0.35);
}

/* =========================================================
   IMAGE
========================================================= */

.ssp-about-image{
    width:100%;
    height:720px;
    object-fit:cover;
    object-position:center;
    transition:
        transform 1s ease;
}

/* =========================================================
   IMAGE HOVER
========================================================= */

.ssp-about-image-wrapper:hover
.ssp-about-image{
    transform:
        scale(1.06);
}

/* =========================================================
   OVERLAY
========================================================= */

.ssp-about-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(5,8,22,0.05) 0%,
            rgba(5,8,22,0.55) 50%,
            rgba(5,8,22,0.92) 100%
        );
}

/* =========================================================
   STATS
========================================================= */

.ssp-about-stats{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap:24px;
    margin-top:70px;
}

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

.ssp-about-stat{
    padding:36px 28px;
    border-radius:28px;
    text-align:center;
    background:
        rgba(255,255,255,0.04);
    border:
        1px solid rgba(255,255,255,0.06);
    backdrop-filter:blur(14px);
    transition:
        transform 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

/* =========================================================
   STAT HOVER
========================================================= */

.ssp-about-stat:hover{
    transform:
        translateY(-6px);
    border-color:
        rgba(255,107,0,0.20);
    box-shadow:
        0 25px 50px rgba(0,0,0,0.28);
}

/* =========================================================
   STAT NUMBER
========================================================= */

.ssp-about-stat h3{
    color:#ff6b00;
    font-size:2.5rem;
    font-weight:900;
    margin-bottom:12px;
    line-height:1;
    text-shadow:
        0 0 25px rgba(255,107,0,0.14);
}

/* =========================================================
   STAT TEXT
========================================================= */

.ssp-about-stat p{
    color:
        rgba(255,255,255,0.72);
    font-size:0.95rem;
    font-weight:600;
    line-height:1.6;
}

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

@media(max-width:1200px){

    .ssp-about-wrapper{
        gap:40px;
    }

    .ssp-about-image{
        height:640px;
    }

}

@media(max-width:992px){

    .ssp-about-wrapper{
        grid-template-columns:1fr;
    }

    .ssp-about-image{
        height:560px;
    }

    .ssp-about-stats{
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media(max-width:768px){

    .ssp-about{
        padding:90px 0;
    }

    .ssp-about-feature{
        padding:22px;
    }

    .ssp-about-image{
        height:460px;
    }

}

@media(max-width:576px){

    .ssp-about-wrapper{
        gap:32px;
    }

    .ssp-about-feature{
        flex-direction:column;
    }

    .ssp-about-feature-icon{
        width:60px;
        height:60px;
        border-radius:18px;
    }

    .ssp-about-image{
        height:360px;
    }

    .ssp-about-stats{
        grid-template-columns:1fr;
    }

    .ssp-about-stat{
        padding:30px 22px;
    }

    .ssp-about-stat h3{
        font-size:2.1rem;
    }

}