.btn-outline{
    background:transparent;
    border:1px solid rgba(255,255,255,0.18);
    color:white;
    padding:12px 24px;
    border-radius:14px;
    font-weight:600;
}

.btn-gradient{
    background:linear-gradient(90deg,#7d4dff,#22b9ff);
    border:none;
    color:white;
    padding:12px 24px;
    border-radius:14px;
    font-weight:700;
}

.green{
    color:#00ffa3;
    font-weight:700;
}

.red{
    color:#ff5c7a;
    font-weight:700;
}

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

.article-card{
background:#0d1224;

border:1px solid rgba(255,255,255,0.08);

border-radius:24px;

overflow:hidden;

transition:0.25s;

display:flex;
flex-direction:column;

height:100%;
}

.article-card:hover{
transform:translateY(-4px);
border-color:#8b5fff;
}

.article-card{
background:#0d1224;

border:1px solid rgba(255,255,255,0.08);

border-radius:24px;

overflow:hidden;

transition:0.25s;

display:flex;
flex-direction:column;

height:100%;
}

.article-card:hover{
transform:translateY(-4px);
border-color:#8b5fff;
}

.article-card img{
width:100%;
height:220px;
object-fit:cover;
}

.article-card-content{
padding:30px;

display:flex;
flex-direction:column;

flex-grow:1;
}

.article-meta{
font-size:13px;
color:#8da2d8;
margin-bottom:16px;
}

.article-card h3{
font-size:24px;
line-height:1.3;

margin-top:0;
margin-bottom:14px;

font-weight:700;

letter-spacing:-0.4px;
}

.article-card p{
font-size:17px;
line-height:1.8;

color:#b4bbcf;

margin-top:0;
margin-bottom:28px;

flex-grow:1;
}

.article-card a{
color:#8b5fff;

font-weight:700;

display:inline-block;

margin-top:auto;
}

@media(max-width:768px){

.article-card img{
height:140px;
object-fit:cover;
display:block;
}

.article-card-content{
padding:14px 16px 18px;
display:block;
}

.article-card-content > h3{
font-size:19px;
line-height:1.28;
margin:0 0 8px 0;
padding-top:0;
}

.article-card p{
font-size:13px;
line-height:1.55;
margin:0 0 14px 0;

display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}

.article-meta{
font-size:12px;
margin:0 0 4px 0;
}

.article-card a{
margin-top:16px;
}

}