/*==================================================
SOLUTIONS
==================================================*/

.solutions{

    position:relative;

    overflow:hidden;

    background:var(--body);

}

.solutions-grid{

    display:grid;

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

    gap:30px;

}

.solution-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:560px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.solution-card:hover{

    transform:translateY(-12px);

    background:var(--card-hover);

    border-color:var(--border-primary);

    box-shadow:

        var(--shadow-lg),

        var(--glow-primary);

}

.solution-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:20px;

    background:linear-gradient(

135deg,

rgba(0,217,255,.18),

rgba(20,241,149,.12)

);
    border:1px solid var(--border-primary);

}

.solution-icon i{

    font-size:2rem;

    color:var(--primary);

}

.solution-status{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    color:var(--primary);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:2px;

}

.solution-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--accent);

box-shadow:var(--glow-success);

}

.solution-card h3{

    margin-bottom:18px;

    color:var(--white);

}

.solution-card p{

    margin-bottom:28px;

    color:var(--text-light);

}

.solution-list{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:35px;

}

.solution-list li{

    position:relative;

    padding-left:28px;

    color:var(--text-light);

}

.solution-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:10px;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:var(--glow-primary);

}

.solution-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:auto;

    color:var(--primary);

    font-weight:600;

}

.solution-link i{

    transition:var(--transition);

}

.solution-card:hover .solution-link i{

    transform:translateX(8px);

}


/*==================================================
SOLUTION PANEL EFFECTS
==================================================*/

.solution-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(99,232,255,.10),

    transparent

    );

    transform:translateX(-120%);

    transition:1s;

}

.solution-card:hover::before{

    transform:translateX(120%);

}

.solution-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:linear-gradient(

90deg,

transparent,

var(--accent),

var(--primary),

transparent

);

    transform:scaleX(0);

    transition:.5s;

}

.solution-card:hover::after{

    transform:scaleX(1);

}


/*==================================================
SOLUTION CORNERS
==================================================*/

.solution-card .corner{

    position:absolute;

    width:22px;

    height:22px;

    pointer-events:none;

}

.solution-card .corner::before,

.solution-card .corner::after{

    content:"";

    position:absolute;

    background:var(--primary);

box-shadow:var(--glow-primary);

}

.solution-card .corner::before{

    width:22px;

    height:2px;

}

.solution-card .corner::after{

    width:2px;

    height:22px;

}

/* Top Left */

.corner-tl{

    top:16px;

    left:16px;

}

/* Top Right */

.corner-tr{

    top:16px;

    right:16px;

    transform:scaleX(-1);

}

/* Bottom Left */

.corner-bl{

    bottom:16px;

    left:16px;

    transform:scaleY(-1);

}

/* Bottom Right */

.corner-br{

    bottom:16px;

    right:16px;

    transform:scale(-1);

}


/*==================================================
SCAN LINE
==================================================*/

.scan-line{

    position:absolute;

    left:-100%;

    top:0;

    width:50%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(99,232,255,.14),

        transparent

    );

    transform:skewX(-20deg);

    pointer-events:none;

    z-index:2;

}