*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#070B15;
color:#fff;
}

.signup{
    background:#27d3c4;
    color:#000 !important;
    padding:12px 28px;
    border-radius:10px;
    font-weight:bold;
}
@media (max-width:768px){

header{
    flex-direction:column;
    gap:20px;
    padding:20px;
}

nav{
    flex-wrap:wrap;
    justify-content:center;
}

.logo{
    font-size:50px;
}

.hero-logo{
    width:220px;
}
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#0B1220;
border-bottom:2px solid #20D6C7;
}

.logo{
font-size:36px;
font-weight:bold;
color:#20D6C7;
}



.hero{
text-align:center;
padding:60px 20px;
}

.hero-logo{
width:170px;
margin-bottom:30px;
filter:drop-shadow(0 0 20px #20D6C7);
}

.hero h1{
font-size:38px;
color:#20D6C7;
margin-bottom:20px;
}

.hero p{
max-width:600px;
margin:auto;
font-size:18px;
line-height:1.8;
color:#d0d0d0;
}
.hero-description{
    max-width:700px;
    margin:30px auto 0;
    padding:22px;
    background:#111827;
    border:1px solid #20D6C7;
    border-radius:18px;
    box-shadow:0 0 18px rgba(32,214,199,.25);
}

.hero-description p{
    margin:0;
    color:#d8d8d8;
    font-size:18px;
    line-height:1.8;
}
.hero-buttons{
margin-top:40px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
padding:15px 35px;
border-radius:12px;
text-decoration:none;
font-size:18px;
font-weight:bold;
}

.btn-primary{
background:#20D6C7;
color:#071019;
}

.btn-secondary{
border:2px solid #20D6C7;
color:#20D6C7;
}

.btn-primary:hover,
.btn-secondary:hover{
transform:scale(1.05);
transition:.3s;
}
/* Login Page */

.login-container{

max-width:380px;

margin:80px auto;

padding:30px;

background:#111827;

border-radius:18px;

text-align:center;

box-shadow:0 0 25px rgba(37,216,207,.25);

}

.login-logo{

width:110px;

margin-bottom:20px;

}

.login-container h1{

color:#25d8cf;

margin-bottom:10px;

}

.login-container p{

color:#ccc;

margin-bottom:20px;

}

.login-container input{

width:100%;

padding:14px;

margin:10px 0;

border:none;

border-radius:10px;

background:#1f2937;

color:#fff;

font-size:16px;

}

.login-container button{

width:100%;

padding:14px;

margin-top:20px;

background:#25d8cf;

color:#000;

font-size:18px;

font-weight:bold;

border:none;

border-radius:10px;

cursor:pointer;

}

.bottom-text{

margin-top:20px;

}

.bottom-text a{

color:#25d8cf;

text-decoration:none;

font-weight:bold;

}
/* Dashboard */

.dashboard{

max-width:420px;

margin:30px auto;

padding:20px;

}


.balance-card{
    background:#161D2F;
    border:2px solid #35D7E6;
    border-radius:24px;
    padding:28px;
    margin-top:35px;
    box-shadow:0 12px 30px rgba(0,255,255,.12);
}
.balance-label{
    color:#9CA3AF;
    font-size:17px;
    text-align:center;
    margin-bottom:10px;
    font-weight:500;
}

.total-balance{
    text-align:center;
    color:#35D7E6;
    font-size:52px;
    font-weight:800;
    margin-bottom:28px;
}

.balance-name{
    color:#ffffff;
    font-weight:600;
}

.balance-card h1{

font-size:38px;

margin-top:10px;

}

.action-buttons{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-top:25px;

margin-bottom:25px;

}

.action-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:90px;

    background:linear-gradient(180deg,#1B2338,#121A2C);

    border:2px solid #35D7E6;
    border-radius:22px;

    color:#35D7E6;
    font-size:20px;
    font-weight:700;
    text-decoration:none;

    transition:.25s;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 18px rgba(0,0,0,.35);
}

.referral-btn{
    grid-column:1 / -1;
    width:100%;
}
.plans-btn{
    grid-column:1 / 3;
}
.action-btn:hover{
    transform:translateY(-4px);
    box-shadow:
        0 0 18px rgba(53,215,230,.45),
        0 12px 24px rgba(0,0,0,.45);
}


/* ===========================
   Deposit Page
=========================== */

.page{
max-width:450px;
margin:30px auto;
padding:20px;
}

.page h1{
text-align:center;
color:#2DD4CF;
margin-bottom:25px;
font-size:36px;
}

.deposit-card{
background:#111827;
border:2px solid #2DD4CF;
border-radius:20px;
padding:25px;
box-shadow:0 0 25px rgba(45,212,207,.25);
text-align:center;
}

.deposit-card h2{
color:#fff;
margin-bottom:20px;
}

.network-select{
width:100%;
padding:14px;
border:none;
border-radius:12px;
background:#1E293B;
color:white;
font-size:16px;
margin-bottom:20px;
}

.qr-code{
width:220px;
height:220px;
display:block;
margin:20px auto;
background:white;
padding:10px;
border-radius:15px;
}

.wallet-address{
width:100%;
padding:15px;
background:#0B1220;
border:2px solid #2DD4CF;
border-radius:12px;
color:white;
font-size:14px;
text-align:center;
margin:20px 0;
}

.copy-btn{
width:100%;
padding:16px;
background:#2DD4CF;
color:#000;
border:none;
border-radius:12px;
font-size:18px;
font-weight:bold;
cursor:pointer;
transition:.3s;
}

.copy-btn:hover{
transform:scale(1.03);
}

.deposit-info{
margin-top:25px;
padding:18px;
background:#0B1220;
border-radius:15px;
text-align:left;
}

.deposit-info p{
margin:12px 0;
color:#ddd;
}

.back-btn{
display:block;
margin-top:25px;
text-align:center;
padding:15px;
border:2px solid #2DD4CF;
border-radius:12px;
color:#2DD4CF;
text-decoration:none;
font-weight:bold;
font-size:18px;
transition:.3s;
}

.back-btn:hover{
    background:#2DD4CF;
    color:#000;
}

.network-note{
    margin-top:15px;
    padding:12px;
    background:#111827;
    border-left:4px solid #2DD4CF;
    color:#d1d5db;
    border-radius:10px;
    line-height:1.6;
    font-size:14px;
}
/* Withdraw Balance */

.balance-box{
    text-align:center;
    margin:15px 0 30px;
}

.balance-title{
    color:#bfbfbf;
    font-size:18px;
    font-weight:500;
    margin-bottom:8px;
}

.balance-amount{
    color:#39D5D5;
    font-size:34px;
    font-weight:700;
}
.deposit-container{
    max-width:450px;
    margin:30px auto;
    padding:20px;
}

.deposit-title{
    text-align:center;
    color:#2DD4CF;
    font-size:42px;
    margin-bottom:20px;
}
/* ===========================
   Transaction History
=========================== */

.history-item{
    background:#0B1220;
    border:2px solid #2DD4CF;
    border-radius:15px;
    padding:18px;
    margin-bottom:18px;
}

.history-item h3{
    color:#2DD4CF;
    margin-bottom:8px;
    font-size:22px;
}

.history-item p{
    color:#fff;
    font-size:20px;
    font-weight:bold;
    margin-bottom:8px;
}

.history-item span{
    display:inline-block;
    padding:6px 12px;
    border-radius:8px;
    font-weight:bold;
    margin-bottom:10px;
}

.pending span{
    background:#F59E0B;
    color:#000;
}

.approved span{
    background:#22C55E;
    color:#fff;
}

.rejected span{
    background:#EF4444;
    color:#fff;
}

.history-item small{
    display:block;
    color:#9CA3AF;
    margin-top:8px;
}
.history-filter{
    margin-bottom:20px;
}
/* History Search */

.history-search{
    width:100%;
    padding:14px;
    margin-bottom:20px;
    border:none;
    border-radius:12px;
    background:#1E293B;
    color:#fff;
    font-size:16px;
}
/* ===========================
        PROFILE PAGE
=========================== */

.profile-container{
    max-width:420px;
    margin:30px auto;
    padding:25px;
}

.profile-card{
    background:#111827;
    border:2px solid #2DD4CF;
    border-radius:25px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 0 25px rgba(45,212,207,.18);
}

.profile-logo{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #2DD4CF;
    padding:8px;
    background:#0B1220;
    margin:0 auto 20px;
    display:block;
}

.profile-name{
    font-size:34px;
    font-weight:700;
    color:#fff;
    margin-top:15px;
}

.profile-id{
    color:#9CA3AF;
    font-size:18px;
    margin-top:10px;
}

.verified-badge{
    display:inline-block;
    margin-top:20px;
    padding:12px 24px;
    background:#22C55E;
    color:#fff;
    border-radius:30px;
    font-size:18px;
    font-weight:bold;
}

.profile-menu{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.profile-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#0B1220;
    border:2px solid #2DD4CF;
    border-radius:16px;
    padding:18px 20px;
    color:#fff;
    text-decoration:none;
    font-size:20px;
    font-weight:600;
    transition:.3s;
}

.profile-item:hover{
    background:#2DD4CF;
    color:#000;
    transform:translateY(-2px);
}

.profile-item span:first-child{
    font-size:26px;
}

.profile-back{
    display:block;
    margin-top:35px;
    text-align:center;
    padding:16px;
    border:2px solid #2DD4CF;
    border-radius:14px;
    color:#2DD4CF;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
    transition:.3s;
}

.profile-back:hover{
    background:#2DD4CF;
    color:#000;
}
/* ===== Dashboard User ===== */

.user-profile{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
background:#111827;
border:2px solid #2DD4CF;
padding:10px 16px;
border-radius:15px;
transition:.3s;
}

.user-profile:hover{
background:#2DD4CF;
transform:translateY(-2px);
}

.user-avatar{
width:45px;
height:45px;
border-radius:50%;
background:#2DD4CF;
color:#000;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
font-weight:bold;
}

.user-info{
display:flex;
flex-direction:column;
}

.user-name{
font-size:16px;
font-weight:bold;
color:#fff;
}

.user-profile:hover .user-name{
color:#000;
}

.user-info small{
color:#9CA3AF;
font-size:12px;
}

.user-profile:hover small{
color:#111827;
}
.transactions{
    grid-column:1 / 3;
    background:#111827;
    border:2px solid #2DD4CF;
    border-radius:20px;
    padding:22px;
    display:block;
    text-decoration:none;
    color:#fff;
    transition:.3s;
}

.transactions:hover{
    border-color:#2DD4CF;
    transform:translateY(-3px);
    box-shadow:0 0 18px rgba(45,212,207,.25);
}

.transactions h3{
    color:#2DD4CF;
    margin-bottom:12px;
    font-size:28px;
}

.transactions p{
    margin-bottom:10px;
    font-size:20px;
}

.transactions small{
    color:#9CA3AF;
    font-size:16px;
}
.referral-btn{
grid-column:1 / 3;
}
nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:20px auto;
    flex-wrap:nowrap;
}

nav a{
    width:100px;
    height:50px;

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

    background:#111827;
    border:2px solid #fff;
    border-radius:12px;

    color:#fff;
    text-decoration:none;
    font-size:17px;
    font-weight:bold;

    transition:.3s;
}

nav a:hover{
    background:#20D6C7;
    border-color:#20D6C7;
    color:#000;
    transform:translateY(-2px);
}
/* ==================================
           CONTACT PAGE
================================== */

.contact-container{

max-width:430px;

margin:35px auto;

padding:20px;

}

.contact-card{

background:#111827;

border:2px solid #2DD4CF;

border-radius:24px;

padding:35px 25px;

box-shadow:0 0 25px rgba(45,212,207,.18);

}

.contact-title{

text-align:center;

font-size:36px;

color:#2DD4CF;

margin-bottom:15px;

}

.contact-text{

text-align:center;

color:#BFC7D5;

line-height:1.8;

margin-bottom:30px;

font-size:16px;

}

.contact-box{

display:flex;

align-items:center;

gap:18px;

background:#0B1220;

border:2px solid #2DD4CF;

border-radius:18px;

padding:18px;

margin-bottom:18px;

text-decoration:none;

transition:.3s;

}

.contact-box:hover{

transform:translateY(-3px);

box-shadow:0 0 20px rgba(45,212,207,.35);

}

.contact-icon{

width:60px;

height:60px;

border-radius:50%;

background:#2DD4CF;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

flex-shrink:0;

}

.contact-info h3{

color:#fff;

font-size:20px;

margin-bottom:6px;

}

.contact-info p{

color:#9CA3AF;

font-size:15px;

}

.contact-note{

margin-top:10px;

padding:18px;

background:#0B1220;

border-left:4px solid #2DD4CF;

border-radius:14px;

color:#D1D5DB;

line-height:1.8;

}

.contact-back{

display:block;

margin-top:25px;

text-align:center;

padding:16px;

border:2px solid #2DD4CF;

border-radius:14px;

text-decoration:none;

font-size:18px;

font-weight:bold;

color:#2DD4CF;

transition:.3s;

}

.contact-back:hover{

background:#2DD4CF;

color:#000;

}
.contact-info{
    flex:1;
    min-width:0;
}

.contact-info p{
    color:#9CA3AF;
    font-size:15px;

    word-break:break-word;
    overflow-wrap:anywhere;
}
.balance-details{
    margin-top:25px;
    border-top:1px solid rgba(255,255,255,.25);
    padding-top:20px;
}

.balance-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    font-size:17px;
    color:#111827;
    font-weight:bold;
}

.balance-row:not(:last-child){
    border-bottom:1px solid rgba(0,0,0,.12);
}
.stake-value{
    color:#4F8CFF;
    font-weight:700;
    text-shadow:0 0 10px rgba(79,140,255,.45);
}

.available-value{
    color:#2EEA7A;
    font-weight:700;
    text-shadow:0 0 10px rgba(46,234,122,.45);
}

.earning-value{
    color:#FFD54A;
    font-weight:700;
    text-shadow:0 0 10px rgba(255,213,74,.45);
}
.actions-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:28px;
}

.actions-grid .action-btn:last-child{
    grid-column:1 / -1;
}
/* ===========================
   Investment Plans
=========================== */

.top-bar{
    text-align:center;
    margin:25px 0;
}

.top-bar h2{
    color:#FACC15;
    font-size:28px;
}

.plans-container{
    max-width:420px;
    margin:25px auto;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.plan-card{
    background:#161D2F;
    border:2px solid #35D7E6;
    border-radius:22px;
    padding:25px;
    text-align:center;
    box-shadow:0 12px 30px rgba(53,215,230,.12);
}

.plan-card h2{
    color:#FACC15;
    margin-bottom:15px;
}

.plan-card h1{
    color:#FFFFFF;
    font-size:38px;
    margin-bottom:10px;
}

.plan-card p{
    color:#9CA3AF;
    margin-bottom:8px;
}

.plan-card h3{
    color:#35D7E6;
    font-size:28px;
    margin-bottom:20px;
}

.invest-btn{
    width:100%;
    padding:15px;
    background:#35D7E6;
    color:#000;
    border:none;
    border-radius:14px;
    font-size:18px;
    font-weight:bold;
}
.referral-rewards{
    margin-top:20px;
    padding:16px;
    background:#111;
    border:1px solid #d4af37;
    border-radius:12px;
    color:#fff;
}

.referral-rewards h3{
    color:#d4af37;
    margin-bottom:10px;
    font-size:18px;
}

.referral-rewards p{
    font-size:14px;
    line-height:1.7;
    color:#ddd;
}
.referral-stats-box{
    width:100%;
    margin:25px auto;
    padding:20px;
    background:#111827;
    border:3px solid #33e6e6;
    border-radius:22px;
    text-align:center;
    box-shadow:0 0 20px rgba(0,255,255,.15);
}

.stat-item{
    margin:18px 0;
}

.stat-item h3{
    color:#ffffff;
    font-size:32px;
    font-weight:700;
    margin-bottom:8px;
}

.stat-item span{
    color:#f8f8f8;
    font-size:24px;
    font-weight:600;
}

.history-title{
    margin-top:25px;
    text-align:center;
    font-size:42px;
    color:#ffffff;
    font-weight:bold;
}