/* ==========================================
   WHY LUNAR LOGIC
========================================== */

.about{
    padding:6rem 0;
    background:var(--color-surface);
}

.about__grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:4rem;
    align-items:start;
    margin-top:4rem;
}

.about__content{
    display:grid;
    gap:2rem;
}

.about__feature{
    display:flex;
    gap:1.5rem;
    align-items:flex-start;
}

.about__number{
    width:72px;
    height:72px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-light)
    );

    color:#fff;
    font-weight:700;
    font-size:1.15rem;
}

.about__feature h3{
    margin-bottom:.75rem;
}

.about__feature p{
    color:var(--color-text-muted);
    line-height:1.8;
}

.about__panel{

    padding:2rem;

    border-radius:24px;

    background:var(--color-background);

    border:1px solid var(--color-border);

    position:sticky;
    top:120px;
}

.about__panel h3{
    margin:1rem 0;
}

.about__panel p{
    color:var(--color-text-muted);
    margin-bottom:1.5rem;
}

.about__list{
    list-style:none;
    margin:0 0 2rem;
    padding:0;

    display:grid;
    gap:1rem;
}

.about__list li{
    display:flex;
    align-items:center;
    gap:.75rem;
}

.about__list li::before{
    content:"✓";
    color:var(--color-primary);
    font-weight:bold;
}

@media (max-width:992px){

    .about__grid{
        grid-template-columns:1fr;
    }

    .about__panel{
        position:static;
    }

}