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

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#040816;
color:#fff;
overflow-x:hidden;
line-height:1.6;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

img{
display:block;
max-width:100%;
}

button{
border:none;
background:none;
cursor:pointer;
font-family:inherit;
}

/* ==========================================================
   VARIABLES
========================================================== */

:root{

--primary:#2d7cff;
--primary-light:#55a8ff;
--secondary:#081224;
--card:#091323;
--border:rgba(75,138,255,.18);
--text:#ffffff;
--muted:#9aa8c7;
--shadow:0 0 30px rgba(50,120,255,.25);
--radius:22px;
--transition:.35s ease;

}

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

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(36,115,255,.18),transparent 35%),
radial-gradient(circle at 85% 30%,rgba(30,95,255,.16),transparent 35%),
radial-gradient(circle at 50% 100%,rgba(0,140,255,.12),transparent 45%);
z-index:-5;
}

body::after{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:70px 70px;
mask-image:linear-gradient(to bottom,rgba(255,255,255,.8),transparent);
opacity:.35;
z-index:-4;
}

.background-grid{
position:fixed;
inset:0;
pointer-events:none;
z-index:-3;
}

.background-glow{
position:fixed;
border-radius:50%;
filter:blur(130px);
z-index:-2;
animation:floatGlow 8s ease-in-out infinite;
}

.glow-1{
width:380px;
height:380px;
background:#145dff;
top:-120px;
left:-120px;
opacity:.28;
}

.glow-2{
width:420px;
height:420px;
background:#0077ff;
right:-150px;
bottom:-150px;
opacity:.18;
animation-delay:3s;
}

@keyframes floatGlow{

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

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

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{
width:min(1280px,92%);
margin:auto;
}

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

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
padding:22px 0;
background:rgba(5,9,24,.55);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.05);
}

.navbar .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}

.logo{
display:flex;
align-items:center;
gap:14px;
}

.logo-icon{
width:46px;
height:46px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:800;
color:#fff;
background:linear-gradient(145deg,#2b7cff,#0a3bff);
box-shadow:0 0 25px rgba(42,116,255,.4);
}

.logo-text{
font-size:30px;
font-weight:800;
letter-spacing:.8px;
}

.menu{
display:flex;
align-items:center;
gap:34px;
}

.menu a{
position:relative;
font-size:15px;
font-weight:600;
color:#cdd7f8;
transition:var(--transition);
}

.menu a:hover,
.menu a.active{
color:#fff;
}

.menu a::after{
content:"";
position:absolute;
left:0;
bottom:-10px;
width:0;
height:2px;
background:var(--primary);
transition:.35s;
}

.menu a:hover::after,
.menu a.active::after{
width:100%;
}

.btn-outline{
padding:13px 30px;
border-radius:14px;
border:1px solid rgba(58,122,255,.4);
color:#fff;
font-weight:700;
transition:var(--transition);
}

.btn-outline:hover{
background:linear-gradient(135deg,#2d7cff,#195cff);
box-shadow:0 0 30px rgba(42,116,255,.4);
}

.mobile-menu{
display:none;
font-size:24px;
color:#fff;
}

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

.hero{
padding:120px 0 90px;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 620px;
align-items:center;
gap:60px;
}

.hero-tag{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 18px;
border-radius:100px;
background:rgba(45,124,255,.12);
border:1px solid rgba(45,124,255,.25);
margin-bottom:28px;
font-size:15px;
color:#b9caf9;
}

.hero-tag span{
font-weight:700;
color:#68a8ff;
}

.hero h1{
font-size:70px;
font-weight:900;
line-height:1.03;
letter-spacing:-2px;
margin-bottom:26px;
}

.hero h1 span{
display:block;
background:linear-gradient(180deg,#72b5ff,#2d7cff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
max-width:620px;
font-size:19px;
color:var(--muted);
margin-bottom:42px;
}

.hero-buttons{
display:flex;
gap:18px;
margin-bottom:42px;
}

.btn-primary{
display:inline-flex;
align-items:center;
gap:12px;
padding:17px 34px;
border-radius:16px;
background:linear-gradient(135deg,#2d7cff,#195cff);
font-weight:700;
box-shadow:0 15px 40px rgba(35,105,255,.35);
transition:var(--transition);
}

.btn-primary:hover{
transform:translateY(-4px);
}

.btn-secondary{
display:inline-flex;
align-items:center;
gap:12px;
padding:17px 34px;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.03);
transition:var(--transition);
}

.btn-secondary:hover{
border-color:#2d7cff;
}

.chain{
display:flex;
align-items:center;
gap:12px;
font-weight:600;
color:#9db6ff;
}

.chain img{
width:28px;
}



.hero-right{
display:flex;
justify-content:center;
align-items:center;
min-height:650px;
position:relative;
}

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

.coin-platform{
position:relative;
width:560px;
height:560px;
display:flex;
align-items:center;
justify-content:center;
}

.platform-ring{
position:absolute;
left:50%;
bottom:45px;
transform:translateX(-50%);
border-radius:50%;
border:2px solid rgba(63,140,255,.55);
box-shadow:
0 0 15px rgba(45,124,255,.5),
0 0 45px rgba(45,124,255,.2),
inset 0 0 20px rgba(45,124,255,.15);
animation:ringPulse 4s linear infinite;
}

.ring-1{
width:360px;
height:70px;
}

.ring-2{
width:450px;
height:90px;
animation-delay:1s;
}

.ring-3{
width:540px;
height:110px;
animation-delay:2s;
}

.coin-glow{
position:absolute;
bottom:120px;
width:260px;
height:260px;
border-radius:50%;
background:#2d7cff;
filter:blur(90px);
opacity:.45;
animation:glowMove 5s ease-in-out infinite;
}

.coin{
position:relative;
width:340px;
height:340px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(145deg,#28314d,#080d19);
box-shadow:
0 0 80px rgba(45,124,255,.25),
inset 0 0 40px rgba(255,255,255,.04);
animation:coinFloat 5s ease-in-out infinite;
}

.coin::before{
content:"";
position:absolute;
inset:-14px;
border-radius:50%;
background:
linear-gradient(145deg,#76b6ff,#245fff,#76b6ff);
z-index:-1;
}

.coin::after{
content:"";
position:absolute;
inset:-4px;
border-radius:50%;
border:2px solid rgba(255,255,255,.12);
}

.coin-face{
width:100%;
height:100%;
border-radius:50%;
padding:18px;
background:
linear-gradient(180deg,#1b2237,#090d17);
display:flex;
align-items:center;
justify-content:center;
}

.coin-border{
width:100%;
height:100%;
border-radius:50%;
border:3px solid rgba(255,255,255,.08);
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}

.coin-border::before{
content:"";
position:absolute;
inset:-30%;
background:
conic-gradient(from 0deg,
transparent,
rgba(91,166,255,.8),
transparent,
transparent);
animation:spinBorder 6s linear infinite;
}

.coin-center{
position:relative;
width:84%;
height:84%;
border-radius:50%;
background:
radial-gradient(circle at 30% 30%,#263253,#090d17);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:2;
}

.coin-logo{
font-size:150px;
font-weight:900;
line-height:1;
background:
linear-gradient(180deg,#f8fbff,#76b6ff,#2d7cff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 0 30px rgba(64,147,255,.4);
}

.coin-name{
margin-top:12px;
font-size:18px;
letter-spacing:5px;
font-weight:700;
color:#8ebcff;
}

.coin-platform::after{
content:"";
position:absolute;
bottom:55px;
width:170px;
height:18px;
background:#59a4ff;
border-radius:50%;
filter:blur(18px);
opacity:.7;
}

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

.stats{
padding:40px 0 90px;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}

.stat-card{
position:relative;
padding:28px;
border-radius:22px;
background:
linear-gradient(180deg,
rgba(16,24,44,.95),
rgba(8,14,27,.95));
border:1px solid rgba(62,129,255,.18);
display:flex;
align-items:center;
gap:20px;
overflow:hidden;
transition:.35s;
}

.stat-card::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:220px;
height:220px;
border-radius:50%;
background:rgba(45,124,255,.08);
filter:blur(30px);
}

.stat-card:hover{
transform:translateY(-8px);
border-color:#3f8cff;
box-shadow:
0 0 40px rgba(45,124,255,.18);
}

.stat-icon{
width:66px;
height:66px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:#5aa7ff;
background:
linear-gradient(180deg,
rgba(45,124,255,.15),
rgba(45,124,255,.05));
border:1px solid rgba(80,150,255,.2);
}

.stat-card h3{
font-size:33px;
font-weight:800;
margin-bottom:6px;
}

.stat-card p{
font-size:15px;
color:#8fa7c8;
}

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

@keyframes coinFloat{

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

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

}

@keyframes glowMove{

0%,100%{
transform:scale(1);
opacity:.45;
}

50%{
transform:scale(1.18);
opacity:.7;
}

}

@keyframes spinBorder{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

@keyframes ringPulse{

0%{
transform:translateX(-50%) scale(.96);
opacity:.45;
}

50%{
transform:translateX(-50%) scale(1);
opacity:1;
}

100%{
transform:translateX(-50%) scale(.96);
opacity:.45;
}

}


/* ==========================================================
   UTILITY
========================================================== */

.utility{
padding:30px 0 90px;
}

.section-box{
padding:42px;
border-radius:26px;
background:
linear-gradient(180deg,
rgba(10,18,36,.96),
rgba(6,12,24,.96));
border:1px solid rgba(56,126,255,.16);
box-shadow:
0 0 40px rgba(25,85,255,.08);
}

.utility{
position:relative;
}

.utility::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:700px;
height:700px;
transform:translate(-50%,-50%);
background:radial-gradient(circle,
rgba(35,115,255,.08),
transparent 70%);
pointer-events:none;
}

.utility .section-box{
position:relative;
z-index:2;
}

.utility-grid{
display:grid;
grid-template-columns:330px repeat(4,1fr);
gap:22px;
align-items:stretch;
}

.utility-intro{
display:flex;
flex-direction:column;
justify-content:center;
}

.section-subtitle{
display:inline-flex;
width:max-content;
padding:8px 16px;
border-radius:100px;
background:rgba(45,124,255,.12);
border:1px solid rgba(45,124,255,.2);
color:#68a8ff;
font-size:13px;
font-weight:700;
letter-spacing:1px;
margin-bottom:18px;
}

.utility-intro h2{
font-size:44px;
line-height:1.1;
font-weight:800;
margin-bottom:18px;
}

.section-line{
width:70px;
height:4px;
border-radius:50px;
background:linear-gradient(90deg,#2d7cff,#70b6ff);
margin-bottom:22px;
}

.utility-intro p{
color:#98a8c5;
font-size:16px;
margin-bottom:32px;
}

.utility-btn{
display:inline-flex;
align-items:center;
gap:12px;
width:max-content;
}

.utility-card{
position:relative;
padding:34px 26px;
border-radius:22px;
background:
linear-gradient(180deg,
rgba(14,22,40,.96),
rgba(8,13,24,.96));
border:1px solid rgba(70,138,255,.16);
overflow:hidden;
transition:.35s;
}

.utility-card::before{
content:"";
position:absolute;
top:-70px;
right:-70px;
width:150px;
height:150px;
background:rgba(45,124,255,.10);
border-radius:50%;
filter:blur(25px);
transition:.35s;
}

.utility-card:hover{
transform:translateY(-10px);
border-color:#428dff;
box-shadow:
0 20px 50px rgba(45,124,255,.15);
}

.utility-card:hover::before{
transform:scale(1.4);
}

.utility-icon{
width:74px;
height:74px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
margin-bottom:28px;
color:#63adff;
background:
linear-gradient(180deg,
rgba(45,124,255,.16),
rgba(45,124,255,.05));
border:1px solid rgba(45,124,255,.2);
box-shadow:
0 0 25px rgba(45,124,255,.12);
}

.utility-card h3{
font-size:24px;
margin-bottom:16px;
font-weight:700;
}

.utility-card p{
font-size:15px;
line-height:1.8;
color:#99aac8;
}


/* ==========================================================
   TOKENOMICS
========================================================== */

.tokenomics{
padding:100px 0;
}

.token-header{
text-align:center;
max-width:760px;
margin:0 auto 60px;
}

.token-header h2{
font-size:48px;
font-weight:800;
margin:18px 0;
}

.token-header p{
color:#97aac8;
font-size:17px;
}

.token-wrapper{
display:grid;
grid-template-columns:430px 1fr;
gap:60px;
align-items:center;
}

.token-chart{
display:flex;
justify-content:center;
}

.donut{
position:relative;
width:360px;
height:360px;
border-radius:50%;
background:
conic-gradient(
#3b82ff 0% 30%,
#5ea8ff 30% 55%,
#1e63ff 55% 75%,
#7dc3ff 75% 85%,
#174dce 85% 95%,
#9fd5ff 95% 100%
);
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 0 60px rgba(45,124,255,.25);
animation:rotateDonut 20s linear infinite;
}

.donut::before{
content:"";
position:absolute;
width:230px;
height:230px;
background:#08111f;
border-radius:50%;
box-shadow:
inset 0 0 35px rgba(45,124,255,.12);
}

.donut-center{
position:relative;
text-align:center;
z-index:2;
}

.donut-center h3{
font-size:52px;
font-weight:900;
}

.donut-center span{
color:#8fb8ff;
letter-spacing:2px;
}

.token-detail{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.token-card{
display:flex;
align-items:center;
gap:18px;
padding:22px;
border-radius:18px;
background:
linear-gradient(180deg,#0b1527,#08111f);
border:1px solid rgba(56,126,255,.15);
transition:.35s;
}

.token-card:hover{
transform:translateY(-6px);
border-color:#4a97ff;
box-shadow:0 0 30px rgba(45,124,255,.12);
}

.token-color{
width:18px;
height:70px;
border-radius:30px;
}

.c1{background:#3b82ff;}
.c2{background:#5ea8ff;}
.c3{background:#1e63ff;}
.c4{background:#7dc3ff;}
.c5{background:#174dce;}
.c6{background:#9fd5ff;}

.token-info{
flex:1;
display:flex;
justify-content:space-between;
align-items:center;
}

.token-info h4{
font-size:17px;
font-weight:600;
}

.token-info span{
font-size:24px;
font-weight:800;
color:#63adff;
}

@keyframes rotateDonut{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}


/* ==========================================================
   ROADMAP
========================================================== */

.roadmap{
padding:110px 0;
position:relative;
}

.roadmap::before{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:900px;
height:900px;
background:radial-gradient(circle,rgba(45,124,255,.07),transparent 70%);
pointer-events:none;
}

.roadmap-header{
text-align:center;
max-width:720px;
margin:0 auto 70px;
}

.roadmap-header h2{
font-size:48px;
font-weight:800;
margin:18px 0;
}

.roadmap-header p{
color:#97aac8;
font-size:17px;
}

.timeline{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:26px;
}

.timeline-line{
position:absolute;
top:26px;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,#2d7cff,#7bbcff,#2d7cff);
box-shadow:0 0 15px rgba(45,124,255,.4);
}

.road-card{
position:relative;
padding-top:55px;
}

.road-dot{
position:absolute;
top:12px;
left:50%;
transform:translateX(-50%);
width:28px;
height:28px;
border-radius:50%;
background:#2d7cff;
border:6px solid #08111f;
box-shadow:
0 0 20px rgba(45,124,255,.8),
0 0 45px rgba(45,124,255,.35);
z-index:2;
}

.road-content{
padding:30px;
border-radius:22px;
background:
linear-gradient(180deg,#0d1628,#08111f);
border:1px solid rgba(55,126,255,.15);
transition:.35s;
height:100%;
}

.road-content:hover{
transform:translateY(-8px);
border-color:#4d99ff;
box-shadow:
0 20px 45px rgba(45,124,255,.16);
}

.road-content span{
display:inline-block;
padding:7px 14px;
border-radius:50px;
background:rgba(45,124,255,.12);
color:#6fb5ff;
font-size:13px;
font-weight:700;
margin-bottom:18px;
}

.road-content h3{
font-size:24px;
margin-bottom:18px;
font-weight:700;
}

.road-content ul{
display:flex;
flex-direction:column;
gap:12px;
}

.road-content li{
position:relative;
padding-left:22px;
color:#9eafca;
}

.road-content li::before{
content:"";
position:absolute;
left:0;
top:9px;
width:8px;
height:8px;
border-radius:50%;
background:#58a7ff;
box-shadow:0 0 10px rgba(88,167,255,.8);
}


/* ==========================================================
   TEAM
========================================================== */

.team{
padding:110px 0;
}

.team-header{
max-width:760px;
margin:0 auto 70px;
text-align:center;
}

.team-header h2{
font-size:48px;
font-weight:800;
margin:18px 0;
}

.team-header p{
color:#9ba9c5;
font-size:17px;
}

.team-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:26px;
margin-bottom:80px;
}

.team-card{
padding:36px 28px;
border-radius:24px;
background:linear-gradient(180deg,#0d1628,#08111f);
border:1px solid rgba(70,140,255,.16);
text-align:center;
transition:.35s;
position:relative;
overflow:hidden;
}

.team-card::before{
content:"";
position:absolute;
top:-120px;
left:-120px;
width:220px;
height:220px;
border-radius:50%;
background:rgba(45,124,255,.08);
filter:blur(25px);
}

.team-card:hover{
transform:translateY(-10px);
border-color:#4b95ff;
box-shadow:0 20px 45px rgba(45,124,255,.18);
}

.avatar{
width:120px;
height:120px;
margin:auto;
margin-bottom:24px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:52px;
background:linear-gradient(145deg,#2d7cff,#195cff);
box-shadow:0 0 40px rgba(45,124,255,.35);
}

.team-card h3{
font-size:24px;
margin-bottom:8px;
}

.team-card span{
display:block;
color:#72b3ff;
margin-bottom:24px;
}

.social{
display:flex;
justify-content:center;
gap:14px;
}

.social a{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.05);
transition:.3s;
}

.social a:hover{
background:#2d7cff;
transform:translateY(-4px);
}

.partner-title{
text-align:center;
margin-bottom:35px;
}

.partner-title h3{
font-size:34px;
font-weight:700;
}

.partner-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:20px;
}

.partner-card{
height:90px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:700;
letter-spacing:1px;
border-radius:18px;
background:linear-gradient(180deg,#0d1628,#08111f);
border:1px solid rgba(55,126,255,.15);
color:#8fb7ff;
transition:.35s;
}

.partner-card:hover{
background:#2d7cff;
color:#fff;
transform:translateY(-6px);
box-shadow:0 15px 35px rgba(45,124,255,.25);
}


/* ==========================================================
   FAQ
========================================================== */

.faq{
padding:110px 0;
}

.faq-header{
text-align:center;
max-width:700px;
margin:0 auto 60px;
}

.faq-header h2{
font-size:48px;
margin:18px 0;
}

.faq-header p{
color:#97aac8;
}

.faq-list{
max-width:900px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;
}

.faq-item{
border-radius:22px;
background:#091323;
border:1px solid rgba(65,135,255,.15);
overflow:hidden;
}

.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 30px;
cursor:pointer;
}

.faq-question h3{
font-size:20px;
}

.faq-question i{
transition:.3s;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:.35s;
}

.faq-answer p{
padding:0 30px 25px;
color:#97aac8;
}

.faq-item.active .faq-answer{
max-height:200px;
}

.faq-item.active i{
transform:rotate(45deg);
}

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

.cta{
padding:40px 0 110px;
}

.cta-box{
padding:70px;
border-radius:30px;
text-align:center;
background:
linear-gradient(135deg,#2d7cff,#174dce);
box-shadow:0 30px 60px rgba(45,124,255,.35);
}

.cta-box h2{
font-size:54px;
margin-bottom:20px;
}

.cta-box p{
max-width:700px;
margin:0 auto 35px;
font-size:18px;
color:#dcecff;
}

.cta-buttons{
display:flex;
justify-content:center;
gap:20px;
}

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

footer{
padding:80px 0 30px;
background:#050b16;
border-top:1px solid rgba(255,255,255,.06);
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:50px;
margin-bottom:50px;
}

.footer-text{
margin-top:25px;
color:#8fa6c7;
line-height:1.8;
max-width:360px;
}

footer h4{
margin-bottom:20px;
font-size:20px;
}

footer ul{
display:flex;
flex-direction:column;
gap:14px;
}

footer li a{
color:#90a6c5;
transition:.3s;
}

footer li a:hover{
color:#59a7ff;
}

.footer-social{
display:flex;
gap:14px;
}

.footer-social a{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#0c1628;
transition:.3s;
}

.footer-social a:hover{
background:#2d7cff;
}

.copyright{
padding-top:30px;
text-align:center;
color:#7f97ba;
border-top:1px solid rgba(255,255,255,.05);
}

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

.navbar-scrolled{
padding:16px 0;
background:rgba(4,8,22,.92);
backdrop-filter:blur(25px);
box-shadow:0 10px 40px rgba(0,0,0,.35);
}

/* ==========================================================
   REVEAL
========================================================== */

.reveal{
opacity:0;
transform:translateY(40px);
transition:.8s ease;
}

.revealed{
opacity:1;
transform:none;
}

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

.menu.show{
display:flex !important;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:1200px){

.hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.hero-left{
display:flex;
flex-direction:column;
align-items:center;
}

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

.token-wrapper{
grid-template-columns:1fr;
}

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

.partner-grid{
grid-template-columns:repeat(3,1fr);
}

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

.timeline-line{
display:none;
}

.road-dot{
left:30px;
}

.road-card{
padding-top:0;
padding-left:60px;
}

}

@media(max-width:768px){

.hero{
padding-top:140px;
}

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

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

.coin-platform{
width:100%;
height:420px;
}

.coin{
width:250px;
height:250px;
}

.coin-logo{
font-size:110px;
}

.menu{
display:none;
position:absolute;
top:100%;
left:20px;
right:20px;
padding:20px;
border-radius:20px;
background:#08111f;
flex-direction:column;
gap:18px;
border:1px solid rgba(60,130,255,.15);
}

.mobile-menu{
display:block;
}

.btn-outline{
display:none;
}

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

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

.token-detail{
grid-template-columns:1fr;
}

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

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

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

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

.cta-box{
padding:40px 25px;
}

.cta-box h2{
font-size:38px;
}

.token-header h2,
.team-header h2,
.roadmap-header h2,
.faq-header h2{
font-size:36px;
}

.hero-buttons{
flex-direction:column;
width:100%;
}

.btn-primary,
.btn-secondary{
justify-content:center;
}

}

@media(max-width:480px){

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

.logo-text{
font-size:24px;
}

.coin{
width:220px;
height:220px;
}

.coin-logo{
font-size:90px;
}

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

}


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

#particles-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-20;
pointer-events:none;
background:transparent;
}


/* ==========================================================
   FLOATING COINS
========================================================== */

.floating-coins{
position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:-15;
}

.float-coin{
position:absolute;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
color:#74b7ff;
background:rgba(24,40,75,.28);
border:1px solid rgba(80,150,255,.18);
backdrop-filter:blur(12px);
box-shadow:
0 0 40px rgba(40,120,255,.10),
inset 0 0 18px rgba(255,255,255,.04);
animation:floatCoin linear infinite;
}

.float-coin::before{
content:"";
position:absolute;
inset:4px;
border-radius:50%;
border:1px solid rgba(255,255,255,.06);
}

.float-coin i{
text-shadow:0 0 18px rgba(60,160,255,.6);
}

/* ---------- SIZE ---------- */

.coin1{
width:110px;
height:110px;
font-size:44px;
left:6%;
top:14%;
animation-duration:20s;
}

.coin2{
width:80px;
height:80px;
font-size:34px;
left:18%;
bottom:12%;
animation-duration:24s;
animation-delay:-5s;
}

.coin3{
width:95px;
height:95px;
font-size:38px;
right:8%;
top:18%;
animation-duration:22s;
animation-delay:-8s;
}

.coin4{
width:75px;
height:75px;
font-size:30px;
right:20%;
bottom:10%;
animation-duration:28s;
}

.coin5{
width:130px;
height:130px;
font-size:52px;
left:45%;
top:8%;
animation-duration:30s;
animation-delay:-6s;
}

.coin6{
width:70px;
height:70px;
font-size:30px;
left:72%;
top:52%;
animation-duration:18s;
}

.coin7{
width:90px;
height:90px;
font-size:36px;
left:34%;
bottom:6%;
animation-duration:26s;
animation-delay:-10s;
}

.coin8{
width:115px;
height:115px;
font-size:42px;
right:36%;
top:58%;
animation-duration:32s;
animation-delay:-4s;
}

/* ---------- FLOAT ---------- */

@keyframes floatCoin{

0%{
transform:
translateY(0)
translateX(0)
rotate(0deg);
}

25%{
transform:
translateY(-35px)
translateX(18px)
rotate(6deg);
}

50%{
transform:
translateY(-15px)
translateX(-20px)
rotate(-8deg);
}

75%{
transform:
translateY(-42px)
translateX(12px)
rotate(5deg);
}

100%{
transform:
translateY(0)
translateX(0)
rotate(0deg);
}

}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

.coin5,
.coin8,
.coin7{
display:none;
}

.float-coin{
opacity:.35;
}

}