/* RESET */
*{margin:0;padding:0;box-sizing:border-box}

/* AUTO THEME */
@media (prefers-color-scheme: dark){
    body{background:#0D0D0D;color:#F2F2F2}
    h2{color:#F2F2F2}
    p{color:#DADADA}

    footer{background:#4E9C5E;color:#fff}
    footer a{color:#fff}

    .nav{background:#4E9C5E;color:#fff}
    .nav a{color:#fff}

    .badges img{filter:brightness(0.92)}
}

@media (prefers-color-scheme: light){
    body{background:#fff;color:#000}

    footer{background:#4E9C5E;color:#000}
    footer a{color:#000}

    .nav{background:#4E9C5E;color:#000}
    .nav a{color:#000}

    .badges img{filter:none}
}

/* BASE TYPOGRAPHY */
body{
    font-family:'Inter',sans-serif;
    text-transform:lowercase;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

body *{
    font-feature-settings:"liga";
}

.z-green{
    color:#4E9C5E;
    font-weight:500;
}

/* SECTIONS */
.section{
    width:100%;
    min-height:26vh;
    padding:26px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:14px;
}

/* LOGO */
.logo{
    font-size:2.8rem;
    font-weight:500;
    letter-spacing:.45rem;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px 0;
    gap:6px;
}

/* TEXT */
h2{
    font-size:1.7rem;
    font-weight:400;
    max-width:760px;
    line-height:1.28;
}

p{
    font-size:1.05rem;
    max-width:760px;
    line-height:1.42;
    font-weight:300;
}

/* BADGES */
.badges{
    display:flex;
    gap:14px;
    margin-top:6px;
    flex-wrap:wrap;
    justify-content:center;
}

.badges img{
    height:46px;
    cursor:pointer;
    transition:transform .2s ease;
}

.badges img:hover{
    transform:scale(1.05);
}

/* NAVIGATION */
.nav{
    display:flex;
    justify-content:center;
    gap:22px;
    padding:18px;
    flex-wrap:wrap;
}

.nav a{
    text-decoration:none;
    font-size:1rem;
    font-weight:300;
    color:inherit;
    transition:opacity .2s ease;
}

.nav a:hover{
    opacity:0.6;
}

/* FOOTER */
footer{
    padding:26px 18px;
    text-align:center;
}

footer a{
    text-decoration:none;
    margin:0 8px;
    font-size:0.9rem;
    font-weight:300;
}

footer a:hover{
    text-decoration:underline;
}

/* RIBBON (header/footer legal links) */
.ribbon{
    width:100%;
    padding:18px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
}

.ribbon-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.ribbon-links a{
    text-decoration:none;
    font-size:0.9rem;
    font-weight:300;
    color:inherit;
}

.ribbon-links a:hover{
    text-decoration:underline;
}

/* MOBILE RESPONSIVE */
@media (max-width: 600px){

    .logo{
        font-size:2rem;
        letter-spacing:.3rem;
        padding:18px 0;
    }

    .nav{
        flex-wrap:wrap;
        gap:14px;
        padding-bottom:18px;
        text-align:center;
    }

    .nav a{
        font-size:0.95rem;
    }

    .lang-toggle{
        display:block;
        width:100%;
        text-align:center;
        margin-top:6px;
    }

    .ribbon{
        padding:18px 12px;
        gap:12px;
    }

    .badges{
        flex-direction:column;
        gap:10px;
    }

    .badges img{
        height:40px;
    }

    .ribbon-links{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }

    footer{
        padding:18px 12px;
    }

    footer .badges{
        flex-direction:column;
        gap:10px;
    }

    footer a{
        display:block;
        margin:6px 0;
    }
}