/* ===========================================
   Nice TRY ($NT)

   File: manifest.css
   Version: 1.0
=========================================== */


:root{

    --bg:#070707;

    --surface:#111111;

    --surface2:#161616;

    --border:#252525;

    --text:#ffffff;

    --muted:#9b9b9b;

    --green:#4ade80;

    --radius:24px;

    --transition:.25s ease;

}





*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}





html,
body{

    min-height:100%;

}





body{

    background:

    radial-gradient(
        circle at top,
        rgba(74,222,128,.12),
        transparent 45%
    ),

    #050505;


    color:var(--text);

    font-family:"Inter",Arial,sans-serif;

    display:flex;

    justify-content:center;

    padding:60px 20px;

}







a{

    text-decoration:none;

    color:inherit;

}









/* ==========================
   PAGE
========================== */


.manifestPage{


    width:100%;


    max-width:820px;


    display:flex;


    flex-direction:column;


    align-items:center;


    animation:fadeUp .6s ease;


}









/* ==========================
   LOGO
========================== */


.manifestLogo{


    width:170px;


    height:170px;


    object-fit:contain;


    margin-bottom:55px;


    filter:

    drop-shadow(
        0 0 40px rgba(74,222,128,.22)
    );


}









/* ==========================
   HERO
========================== */


.manifestHero{


    text-align:center;


    margin-bottom:70px;


}



.manifestHero h1{


    font-size:48px;


    line-height:1.25;


    font-weight:900;


    letter-spacing:-.05em;


}




.heroText{


    margin-top:25px;


    color:var(--muted);


    font-size:20px;


}









/* ==========================
   SECTIONS
========================== */


.manifestSection{


    width:100%;


    background:

    linear-gradient(
        145deg,
        rgba(20,20,20,.95),
        rgba(10,10,10,.95)
    );


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


    border-radius:var(--radius);


    padding:40px;


    margin-bottom:28px;


    text-align:center;


    transition:var(--transition);


}





.manifestSection:hover{


    border-color:#333333;


    transform:translateY(-2px);


}





.manifestSection h2{


    font-size:26px;


    font-weight:800;


    margin-bottom:30px;


    letter-spacing:-.02em;


}





.manifestSection p{


    color:#d0d0d0;


    font-size:17px;


    line-height:2;


}









/* ==========================
   QUOTE
========================== */


.quote{


    margin-top:35px;


    padding:30px;


    background:#080808;


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


    border-radius:18px;


    font-size:24px;


    line-height:1.6;


    font-weight:800;


    color:#ffffff;


}









/* ==========================
   FINAL
========================== */


.finalSection{


    width:100%;


    text-align:center;


    margin-top:40px;


    padding:45px 30px;


}



.finalSection h2{


    font-size:42px;


    font-weight:900;


    margin-bottom:25px;


}




.finalSection p{


    color:#bdbdbd;


    font-size:18px;


    line-height:1.8;


    margin-bottom:30px;


}



.finalSection strong{


    font-size:30px;


    line-height:1.5;


}









/* ==========================
   BACK BUTTON
========================== */


.backButton{


    margin-top:50px;


    height:58px;


    padding:0 40px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#111111;


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


    border-radius:18px;


    font-weight:800;


    transition:var(--transition);


}





.backButton:hover{


    background:#181818;


    transform:translateY(-3px);


}









/* ==========================
   ANIMATION
========================== */


@keyframes fadeUp{


from{

    opacity:0;

    transform:translateY(25px);

}


to{

    opacity:1;

    transform:none;

}


}









/* ==========================
   MOBILE
========================== */


@media(max-width:640px){



body{

    padding:35px 16px;

}



.manifestLogo{


    width:130px;


    height:130px;


    margin-bottom:40px;


}




.manifestHero{


    margin-bottom:45px;


}




.manifestHero h1{


    font-size:34px;


}




.heroText{


    font-size:16px;


}





.manifestSection{


    padding:28px 20px;


}





.manifestSection h2{


    font-size:22px;


}





.manifestSection p{


    font-size:15px;


    line-height:1.85;


}





.quote{


    font-size:20px;


    padding:22px;


}





.finalSection h2{


    font-size:34px;


}





.finalSection strong{


    font-size:24px;


}





}