:root{
    --primary:#81AD9C;
    --soft:#EBEDEC;
    --base:#fff;
    --text:#263238;
    --muted:#60717b;
    --maxw:1180px;
    --radius:18px
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.6
}

a{
    color:var(--primary);
    text-decoration:underline
}

h1,h2,h3{
    margin:0 0 10px
}

.container{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 22px
}

header{
    padding:18px 0;
    border-bottom:1px solid rgba(0,0,0,.06)
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    font-size:18px
}

.brand img{
    width:290px;
    height:50px;
    border-radius:8px;
}

.page-hero{
    background:var(--soft);
    padding:42px 0
}

.page-hero .title{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 22px
}

.page-hero p{
    color:var(--muted);
    margin:6px 0 0
}

main-about{
    padding:40px 0
}

.content-about{
    max-width:880px;
    margin:0 auto;
    padding:0 22px;
    display:flex;
    flex-direction:column;
    gap:16px;
    min-height:clamp(320px,50dvh,520px)
}

.card-about{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:var(--radius);
    padding:18px;
    margin-top: 20px
}
.toc{
    background:#f7f9f8;
    border:1px solid rgba(0,0,0,.06);
    border-radius:12px;
    padding:14px;
    margin-top: 20px
}
.toc ol{
    margin:8px 0 0 18px
}
small.muted{
    color:var(--muted)
}
footer{
    background:linear-gradient(180deg,#2a2f2d,#262b29);
    color:#e9efec;
    padding:32px 0;
    margin-top:40px
}
.footer-grid{
    max-width:var(--maxw);
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:18px;
    padding:0 22px
}
footer a{
    color:#e9efec
}
.copy{
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:12px;
    padding-top:10px;
    font-size:13px;
    color:#cfd6d1;
    text-align:center
}
.nav-links{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:8px
}
@media (max-width:900px){
    .footer-grid{
        grid-template-columns:1fr
    }
}