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

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


:root{

    --bg:#070707;

    --surface:#111111;

    --surface2:#171717;

    --border:#252525;

    --text:#ffffff;

    --muted:#8c8c8c;

    --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 40%
    ),

    #050505;


    color:var(--text);

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

    display:flex;

    justify-content:center;

    padding:60px 20px;

}





a{

    color:inherit;

    text-decoration:none;

}



button{

    font-family:inherit;

}







/* ==========================
   APP
========================== */


.app{

    width:100%;

    max-width:900px;

    display:flex;

    flex-direction:column;

    gap:34px;

}








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


.hero{

    text-align:center;

    animation:fadeUp .6s ease;

}



.logo{

    width:170px;

    height:170px;

    object-fit:contain;

    margin:auto;

    filter:

    drop-shadow(
        0 0 30px rgba(74,222,128,.15)
    );

}




.hero h2{

    margin-top:35px;

    margin-bottom:28px;

    font-size:32px;

    line-height:1.35;

    font-weight:800;

    letter-spacing:-.03em;

}







/* ==========================
   BUTTONS
========================== */


.buyButton,
.secondaryButton{


    height:62px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:800;

    cursor:pointer;

    transition:var(--transition);

}




.buyButton{


    background:#ffffff;

    color:#111111;

    font-size:18px;

}




.buyButton:hover{


    transform:translateY(-3px);


    box-shadow:

    0 15px 40px rgba(255,255,255,.15);


}




.secondaryButton{


    margin-top:14px;

    width:100%;

    background:var(--surface);

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

    color:#ffffff;

    font-size:16px;

}




.secondaryButton:hover{


    background:var(--surface2);

}









/* ==========================
   COMMON CARDS
========================== */


.contractBox,
.vault,
.market{


    background:

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


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

    border-radius:var(--radius);

    padding:30px;

}









/* ==========================
   CONTRACT / WALLET
========================== */


.contractLabel{


    color:var(--muted);

    font-size:12px;

    letter-spacing:.25em;

    font-weight:700;

    text-align:center;

    text-transform:uppercase;

}






#contractAddress,
.walletAddress.fullWallet,
#developerWalletShort{


    margin:18px auto;


    padding:18px 20px;


    width:100%;


    background:#090909;


    border-radius:16px;


    border:1px solid #252525;


    text-align:center;


    font-family:monospace;


    color:#ffffff;


    font-size:15px;


    font-weight:600;


    letter-spacing:.04em;


    word-break:break-all;


}







#copyContractButton,
.copyWalletButton,
#copyDeveloperWalletButton{


    display:flex;


    justify-content:center;


    align-items:center;


    margin:16px auto 0;


    height:46px;


    padding:0 28px;


    border-radius:14px;


    background:#181818;


    color:#ffffff;


    border:1px solid #303030;


    cursor:pointer;


    font-size:14px;


    font-weight:700;


    transition:.25s ease;


}





#copyContractButton:hover,
.copyWalletButton:hover,
#copyDeveloperWalletButton:hover{


    background:#242424;


    border-color:#444;


    transform:translateY(-2px);


}









/* ==========================
   MARKET
========================== */


/* TIME PERIOD SELECTOR */

/* ==========================
   MARKET
========================== */


.marketPeriod{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:8px;

}


.periodButton{

    height:42px;

    background:var(--surface);

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

    border-radius:12px;

    color:var(--muted);

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    transition:var(--transition);

}


.periodButton:hover{

    background:var(--surface2);

    color:#ffffff;

}


.periodButton.active{

    background:#ffffff;

    border-color:#ffffff;

    color:#111111;

}


.market{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}



/* MARKET CARDS */

.market{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}


.market .card{

    background:#0d0d0d;

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

    border-radius:16px;

    padding:18px;

}


.label{

    color:var(--muted);

    font-size:12px;

    letter-spacing:.18em;

    font-weight:700;

}


.value{

    display:block;

    margin-top:10px;

    font-size:19px;

    font-weight:700;

}


.green{

    color:var(--green);

}


.red{

    color:#f87171;

}


/* MARKET CARDS */

.market{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}


.market .card{

    background:#0d0d0d;

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

    border-radius:16px;

    padding:18px;

}


.label{

    color:var(--muted);

    font-size:12px;

    letter-spacing:.18em;

    font-weight:700;

}


.value{

    display:block;

    margin-top:10px;

    font-size:19px;

    font-weight:700;

}


.green{

    color:var(--green);

}


.red{

    color:#f87171;

}



/* ==========================
   NT COMMITMENT
========================== */


.developerCommitment{


    text-align:center;

}




.developerCommitment h2{


    font-size:22px;

    letter-spacing:.08em;

    margin-bottom:22px;

}





.commitmentText{


    color:#bdbdbd;


    max-width:600px;


    margin:0 auto;


    line-height:1.9;


    font-size:15px;


}





.commitmentDivider{


    width:80%;


    height:1px;


    background:var(--border);


    margin:35px auto;


}





.walletTitle{


    margin-top:18px;


    margin-bottom:8px;


    color:#ffffff;


    font-size:14px;


    letter-spacing:.12em;


    font-weight:700;


}





.holdingsValue{


    margin:18px auto 0;


    padding:18px 20px;


    width:100%;


    background:#090909;


    border-radius:16px;


    border:1px solid #252525;


    text-align:center;


    font-family:monospace;


    font-size:18px;


    font-weight:700;


    color:#ffffff;


}









/* ==========================
   FOOTER
========================== */


footer{


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:14px;


}





footer a{


    height:55px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:var(--surface);


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


    border-radius:14px;


    font-weight:700;


}




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


@keyframes fadeUp{


from{

    opacity:0;

    transform:translateY(20px);

}


to{

    opacity:1;

    transform:none;

}


}









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


@media(max-width:640px){


body{

    padding:25px 16px;

}



.logo{

    width:130px;

    height:130px;

}



.hero h2{

    font-size:26px;

}



.market{

    grid-template-columns:1fr;

}



footer{

    grid-template-columns:1fr;

}



.contractBox,
.vault,
.market{

    padding:22px;

}



.manifestCard{

    padding:30px 20px;

}


}