/* ====================================================================================
ABOUT PAGE — styles only the markup you pasted
==================================================================================== */

.page{
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
    overflow: hidden;
}

/* soft glow */
.page::before{
    content:"";
    position:absolute;
    left: 50%;
    top: -12rem;
    transform: translateX(-50%);
    width: 1200px;
    max-width: 120%;
    height: 520px;
    background: radial-gradient(closest-side, rgba(255, 77, 227, .12), rgba(0,0,0,0));
    filter: blur(12px);
    pointer-events:none;
    z-index:-1;
}

/* Narrow container (for reading comfort) */
.container.narrow{
    max-width: 760px;
}

/* Heading */
.page h1{
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    line-height: 1.1;
    margin: 0 0 .75rem;
}

/* Intro text */
.lead{
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--fg-muted);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

/* Content card */
.card{
    padding: clamp(1.4rem, 3vw, 1.75rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

/* List inside about */
.list{
    margin: .75rem 0 0;
    padding-left: 1.25rem;
    color: var(--fg-muted);
}

.list li{
    margin: .6rem 0;
}

.list strong{
    color: var(--fg);
    font-weight: 800;
}

/* Bottom actions */
.actions{
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}