/* ===================================
RESET
=================================== */

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

html{
scroll-behavior:smooth;
}

body{

background:#05030d;
color:white;
overflow-x:hidden;
position:relative;
}

/* ===================================
BACKGROUND
=================================== */

.gradient-bg{

position:fixed;
inset:0;

background:
radial-gradient(circle at 20% 20%, rgba(168,85,247,.12), transparent 30%),
radial-gradient(circle at 80% 30%, rgba(59,130,246,.12), transparent 30%),
radial-gradient(circle at 50% 80%, rgba(139,92,246,.08), transparent 35%);

z-index:-2;
}

.mouse-glow{

position:fixed;

width:300px;
height:300px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(168,85,247,.15),
transparent 70%);

pointer-events:none;

z-index:-1;

transform:translate(-50%,-50%);
}

/* ===================================
NAVBAR
=================================== */

header{

border-bottom:
1px solid rgba(255,255,255,.05);
}

.navbar{

max-width:1300px;

margin:auto;

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

padding:22px 30px;
}

.logo{

display:flex;
align-items:center;
gap:10px;

font-weight:700;
font-size:20px;
}

.logo-icon{

width:34px;
height:34px;

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

border-radius:12px;

background:
linear-gradient(135deg,#8b5cf6,#3b82f6);
}

.nav-links{

display:flex;
gap:40px;

list-style:none;
}

.nav-links a{

text-decoration:none;

color:#9ca3af;

transition:.3s;
}

.nav-links a:hover{

color:white;
}

.launch-btn{

background:
linear-gradient(135deg,#c026d3,#8b5cf6);

border:none;

padding:14px 24px;

color:white;

border-radius:12px;

font-weight:600;

cursor:pointer;
}

.mobile-toggle{

display:none;

font-size:30px;

cursor:pointer;
}

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

.hero{

max-width:1100px;

margin:auto;

padding:120px 20px 160px;

text-align:center;

position:relative;
}

.hero-badge{

display:inline-block;

padding:10px 20px;

border-radius:30px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

margin-bottom:35px;

font-size:14px;
}

.hero h1{

font-size:90px;

line-height:1.05;

font-weight:900;
}

.hero h1 span{

background:
linear-gradient(
135deg,
#d946ef,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{

max-width:720px;

margin:30px auto;

font-size:22px;

line-height:1.8;

color:#9ca3af;
}

.hero-buttons{

display:flex;
justify-content:center;
gap:20px;
margin-top:40px;
}

.connect-wallet{

padding:18px 35px;

border:none;

border-radius:14px;

font-weight:700;

cursor:pointer;

background:
linear-gradient(
135deg,
#d946ef,
#8b5cf6
);

color:white;

box-shadow:
0 0 40px rgba(217,70,239,.35);
}

.demo-btn{

padding:18px 35px;

border-radius:14px;

background:transparent;

border:1px solid rgba(255,255,255,.1);

color:white;

cursor:pointer;
}

/* ===================================
FLOATING TOKENS
=================================== */

.floating-token{

position:absolute;

padding:12px 18px;

border-radius:14px;

font-weight:700;

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.08);

animation:float 6s ease-in-out infinite;
}

.eth{
top:70%;
left:12%;
background:rgba(139,92,246,.15);
}

.sol{
top:50%;
right:10%;
background:rgba(34,197,94,.15);
}

.bnb{
bottom:8%;
left:52%;
background:rgba(245,158,11,.15);
}

.matic{
bottom:5%;
left:25%;
background:rgba(168,85,247,.15);
}

.avax{
bottom:6%;
right:20%;
background:rgba(239,68,68,.15);
}

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

/* ===================================
WALLET CARD
=================================== */

.floating-wallet-card{

width:260px;

margin:80px auto 0;

padding:25px;

border-radius:25px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

box-shadow:
0 0 50px rgba(139,92,246,.15);
}

.wallet-top{

color:#9ca3af;
margin-bottom:10px;
}

.floating-wallet-card h2{

font-size:42px;
}

/* ===================================
STATS
=================================== */

.stats{

display:grid;

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

gap:20px;

max-width:1200px;

margin:auto;

padding:70px 20px;

border-top:
1px solid rgba(255,255,255,.05);

border-bottom:
1px solid rgba(255,255,255,.05);
}

.stat{

text-align:center;
}

.stat h2{

font-size:50px;

background:
linear-gradient(
135deg,
#d946ef,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.stat p{

color:#9ca3af;
margin-top:10px;
}

/* ===================================
SECTION TITLE
=================================== */

.section-title{

text-align:center;

max-width:800px;

margin:auto auto 80px;
}

.section-title h2{

font-size:60px;
}

.section-title span{

background:
linear-gradient(
135deg,
#d946ef,
#8b5cf6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.section-title p{

margin-top:20px;

color:#9ca3af;
}

/* ===================================
FEATURES
=================================== */

.features{

padding:120px 20px;
}

.feature-grid{

max-width:1200px;

margin:auto;

display:grid;

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

gap:25px;
}

.feature-card{

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);

padding:35px;

border-radius:24px;

transition:.3s;
}

.feature-card:hover{

transform:translateY(-8px);

border-color:#8b5cf6;
}

.feature-card h3{

margin:20px 0 15px;
}

.feature-card p{

color:#9ca3af;
line-height:1.7;
}

.icon{

width:50px;
height:50px;

border-radius:14px;
}

.security{background:#9333ea;}
.speed{background:#06b6d4;}
.network{background:#22c55e;}
.custody{background:#f59e0b;}
.analytics{background:#ec4899;}
.defi{background:#8b5cf6;}

/* ===================================
NETWORKS
=================================== */

.networks{

padding:120px 20px;
}

.networks h2{

text-align:center;

font-size:60px;

margin-bottom:60px;
}

.network-grid{

max-width:1200px;

margin:auto;

display:grid;

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

gap:20px;
}

.network-card{

padding:25px;

text-align:center;

border-radius:20px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);
}

/* ===================================
SECURITY
=================================== */

.security-section{

padding:120px 20px;
}

.security-box{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 300px;

gap:50px;

padding:50px;

border-radius:30px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);
}

.security-box h2{

font-size:50px;

margin-bottom:20px;
}

.security-box p{

color:#9ca3af;

margin-bottom:30px;
}

.security-box ul{

list-style:none;
}

.security-box li{

margin-bottom:15px;
}

.security-score{

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

font-size:70px;
font-weight:900;

background:
linear-gradient(
135deg,
#d946ef,
#60a5fa
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.security-score span{

font-size:16px;
margin-top:10px;
}

/* ===================================
CTA
=================================== */

.cta{

padding:120px 20px;
}

.cta-card{

max-width:850px;

margin:auto;

padding:80px 40px;

text-align:center;

border-radius:35px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);
}

.cta-card h2{

font-size:55px;
}

.cta-card p{

margin:20px 0 40px;

color:#9ca3af;
}

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

footer{

padding:60px 20px;

text-align:center;

border-top:
1px solid rgba(255,255,255,.05);
}

.footer-logo{

display:flex;
justify-content:center;
align-items:center;
gap:10px;

margin-bottom:20px;
}

footer p{

color:#9ca3af;
}

/* ===================================
TABLET
=================================== */

@media(max-width:1024px){

.hero h1{
font-size:70px;
}

.feature-grid{
grid-template-columns:repeat(2,1fr);
}

.network-grid{
grid-template-columns:repeat(2,1fr);
}

.security-box{
grid-template-columns:1fr;
}

.stats{
grid-template-columns:repeat(2,1fr);
}

}

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

@media(max-width:768px){

.mobile-toggle{
display:block;
}

.nav-links{
display:none;
}

.launch-btn{
display:none;
}

.hero{
padding:80px 20px;
}

.hero h1{
font-size:50px;
}

.hero p{
font-size:18px;
}

.hero-buttons{
flex-direction:column;
}

.connect-wallet,
.demo-btn{
width:100%;
}

.feature-grid{
grid-template-columns:1fr;
}

.network-grid{
grid-template-columns:1fr;
}

.stats{
grid-template-columns:1fr;
}

.section-title h2{
font-size:40px;
}

.networks h2{
font-size:40px;
}

.security-box h2{
font-size:36px;
}

.cta-card h2{
font-size:36px;
}

.floating-token{
display:none;
}

}

/* ===================================
SMALL PHONE
=================================== */

@media(max-width:480px){

.hero h1{
font-size:42px;
}

.hero-badge{
font-size:12px;
}

.floating-wallet-card{
width:100%;
}

}


/* ===================================
SCROLL ANIMATIONS
=================================== */

.hidden{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;
}

.show{

opacity:1;

transform:
translateY(0);
}

/* ===================================
MOBILE MENU OPEN
=================================== */

@media(max-width:768px){

.nav-links.active{

display:flex;

position:absolute;

top:80px;
left:20px;
right:20px;

flex-direction:column;

background:
rgba(10,10,20,.95);

padding:25px;

border-radius:20px;

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.05);

z-index:999;
}

}

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

.connect-wallet{

transition:
all .3s ease;
}

.connect-wallet:hover{

transform:
translateY(-3px);
}

/* ===================================
NETWORK HOVER
=================================== */

.network-card{

transition:
all .3s ease;
}

.network-card:hover{

transform:
translateY(-8px);

box-shadow:
0 20px 50px
rgba(139,92,246,.15);
}



.icon{
    width:60px;
    height:60px;
    border-radius:16px;

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

    font-size:24px;
    color:#fff;
}

.security{
    background:#9333ea;
}

.speed{
    background:#06b6d4;
}

.network{
    background:#22c55e;
}

.custody{
    background:#f59e0b;
}

.analytics{
    background:#ec4899;
}

.defi{
    background:#8b5cf6;
}