/* =========================
   ARTICLES PAGE
========================= */

.articles-page {

    padding: 100px 20px;

    max-width: 1200px;

    margin: auto;
}


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

.articles-page h1 {

    text-align: center;

    margin-bottom: 20px;

    color: white;

    font-size: 3rem;
}

.articles-page h1::after {

    content: "";

    display: block;

    width: 90px;

    height: 5px;

    margin: 18px auto 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #7b5cff,
            #b69cff
        );
}


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

.articles-intro {

    max-width: 760px;

    margin:
        0 auto 60px;

    text-align: center;

    color:
        rgba(255,255,255,0.72);

    line-height: 2;

    font-size: 1.08rem;
}


/* =========================
   GRID
========================= */

.articles-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 32px;
}


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

.article-card {

    position: relative;

    padding: 38px;

    border-radius: 34px;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.03)
        );

    backdrop-filter: blur(12px);

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

    box-shadow:
        0 14px 35px rgba(0,0,0,0.2);
}


/* Hover */

.article-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 24px 50px rgba(0,0,0,0.35);

    border-color:
        rgba(183,146,255,0.45);
}


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

.article-card h2 {

    color: white;

    line-height: 1.5;

    margin-bottom: 18px;

    font-size: 1.5rem;
}


/* =========================
   CARD TEXT
========================= */

.article-card p {

    color:
        rgba(255,255,255,0.76);

    line-height: 1.9;

    font-size: 1rem;
}


/* =========================
   GLOW EFFECT
========================= */

.article-card::before {

    content: "";

    position: absolute;

    top: -120px;

    left: -120px;

    width: 220px;

    height: 220px;

    background:
        radial-gradient(
            rgba(123,92,255,0.18),
            transparent 70%
        );

    pointer-events: none;
}