/*==================================================
FEATURED AI SYSTEMS
==================================================*/


.projects-section{

    padding:140px 8%;

    background:#050505;

    position:relative;

    overflow:hidden;

}



.projects-grid{

    margin-top:80px;

    display:grid;

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

    gap:35px;

}



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


.project-card{

    position:relative;

    background:#101010;

    border:1px solid rgba(255,212,0,.12);

    border-radius:25px;

    padding:35px;

    overflow:hidden;

    transition:.5s;

}



/* Hover lift */

.project-card:hover{

    transform:translateY(-15px);

    border-color:#FFD400;

    box-shadow:

    0 20px 60px rgba(255,212,0,.15);

}



/* Moving scanner */

.project-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-200px;

    width:180px;

    height:100%;


    background:linear-gradient(

    90deg,

    transparent,

    rgba(255,212,0,.15),

    transparent

    );


}



.project-card:hover::before{

    animation:projectScan 1.5s linear;

}



@keyframes projectScan{


from{

left:-200px;

}


to{

left:120%;

}


}




/*====================================
STATUS
====================================*/


.project-status{


color:#FFD400;


font-size:.75rem;


letter-spacing:3px;


margin-bottom:25px;


}




/*====================================
TITLE
====================================*/


.project-card h3{


font-size:1.8rem;


margin-bottom:20px;


color:#fff;


}



.project-card p{


color:#cfcfcf;


line-height:1.8;


margin-bottom:30px;


}





/*====================================
PROJECT BLOCKS
====================================*/


.project-block{


margin-top:30px;


}


.project-block h4{


font-size:.75rem;


letter-spacing:3px;


color:#FFD400;


margin-bottom:15px;


}





/*====================================
ARCHITECTURE MODULES
====================================*/


.architecture-mini{


display:grid;


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


gap:10px;


}



.architecture-mini span{


background:#080808;


border:1px solid rgba(255,212,0,.15);


padding:12px;


border-radius:10px;


font-size:.8rem;


text-align:center;


color:#ddd;


transition:.3s;


}



.architecture-mini span:hover{


border-color:#FFD400;


color:#FFD400;


}




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


.project-tags{


display:flex;


flex-wrap:wrap;


gap:10px;


}



.project-tags span{


padding:8px 15px;


border-radius:30px;


border:1px solid rgba(255,212,0,.2);


color:#FFD400;


font-size:.8rem;


transition:.3s;


}



.project-tags span:hover{


background:#FFD400;


color:#000;


}





/*====================================
BUSINESS IMPACT
====================================*/


.impact-box{


margin-top:35px;


padding:20px;


background:#080808;


border-left:3px solid #FFD400;


line-height:1.7;


color:#ddd;


font-size:.9rem;


}





/*====================================
BUTTON
====================================*/


.project-card button{


margin-top:30px;


width:100%;


padding:15px;


background:transparent;


border:1px solid #FFD400;


color:#FFD400;


border-radius:40px;


cursor:pointer;


letter-spacing:2px;


transition:.3s;


}



.project-card button:hover{


background:#FFD400;


color:#000;


}





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


@media(max-width:1100px){


.projects-grid{


grid-template-columns:1fr 1fr;


}


}



@media(max-width:700px){


.projects-grid{


grid-template-columns:1fr;


}


.project-card{


padding:25px;


}


}
.project-card::after{

content:"";

position:absolute;

width:250px;

height:250px;

background:radial-gradient(

circle,

rgba(255,212,0,.15),

transparent 70%

);

left:var(--mouse-x);

top:var(--mouse-y);

transform:translate(-50%,-50%);

pointer-events:none;

opacity:0;

transition:.3s;

}


.project-card:hover::after{

opacity:1;

}