.article-page {

    max-width: 1000px;

    margin: auto;

    padding: 80px 20px;
}

.article-hero {

    margin-bottom: 40px;
}

.article-hero img {

    width: 100%;

    border-radius: 40px;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.3);
}

.article-content {

    background:
        rgba(255,255,255,0.06);

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

    border-radius: 40px;

    padding: 60px;

    backdrop-filter: blur(10px);
}

.article-meta {

    display: flex;

    gap: 12px;

    justify-content: center;

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

    margin-bottom: 30px;

    font-size: 0.95rem;
}

.article-content h1 {

    font-size: 3rem;

    line-height: 1.3;

    text-align: center;

    margin-bottom: 40px;

    color: white;
}

.article-content h2 {

    margin-top: 60px;

    margin-bottom: 20px;

    color: white;

    font-size: 1.8rem;
}

.article-content p,
.article-content li {

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

    line-height: 2;

    font-size: 1.08rem;
}

.article-content ul {

    padding-right: 22px;
}

.article-intro {

    font-size: 1.2rem;

    color: white;
}

.article-summary {

    margin-top: 70px;

    padding: 40px;

    border-radius: 30px;

    background:
        rgba(123,92,255,0.12);

    border:
        1px solid rgba(123,92,255,0.2);
}