/* ===========================
   NYXA PREMIUM
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Space Grotesk',sans-serif;
    background:#05050a;
    color:#fff;
    overflow-x:hidden;

}

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

.stars{

    position:fixed;
    inset:0;

    background-image:

    radial-gradient(white 1px,transparent 1px);

    background-size:40px 40px;

    opacity:.18;

    animation:starsMove 120s linear infinite;

    z-index:-4;

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-1200px);

    }

}

.glow{

    position:fixed;

    width:650px;
    height:650px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.30;

    z-index:-3;

}

.glow1{

    background:#7c3aed;

    top:-250px;
    left:-180px;

}

.glow2{

    background:#2563eb;

    bottom:-250px;
    right:-180px;

}

/* ===========================
   HEADER
=========================== */

header{

    position:fixed;

    top:18px;
    left:50%;

    transform:translateX(-50%);

    width:92%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 35px;

    background:rgba(12,12,22,.55);

    backdrop-filter:blur(16px);

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

    border-radius:22px;

    z-index:999;

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:58px;

    border-radius:50%;

    box-shadow:0 0 30px #8b5cf6;

}

.logo span{

    font-size:24px;

    font-weight:700;

}

nav{

    display:flex;

    gap:35px;

}


nav a{

position:relative;

color:white;

text-decoration:none;

transition:.3s;

padding:5px 0;

}

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-4px;

width:0;

height:2px;

background:#8b5cf6;

transition:.3s;

}

nav a:hover::after{

width:100%;

}

nav a:hover{

color:#b98cff;

}

.hero{

    width:90%;
    min-height:100vh;

    margin:auto;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:40px;

    padding-top:120px;

}

.heroLeft{

    padding:30px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    border-radius:30px;

    z-index:2;

}
.tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:#7c3aed;

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:30px;

}

.hero h1{

    font-size:96px;

    line-height:.92;

    font-weight:800;

    margin-bottom:30px;

    text-shadow:
        0 0 25px rgba(139,92,246,.35);

}
.desc{

    font-size:24px;

    color:#d4d4d4;

    line-height:1.8;

    max-width:560px;

}

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

.buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.buyBtn{

    background:linear-gradient(90deg,#7c3aed,#4f46e5);
    color:white;
    text-decoration:none;
    padding:18px 42px;
    border-radius:999px;
    font-weight:700;
    box-shadow:0 0 35px rgba(124,58,237,.55);
    transition:.35s;
    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{
box-shadow:0 0 25px #8b5cf6;
}

50%{
box-shadow:0 0 60px #8b5cf6;
}

100%{
box-shadow:0 0 25px #8b5cf6;
}

}


.buyBtn:hover{

    transform:translateY(-5px);

}

.xBtn{

    border:2px solid rgba(255,255,255,.25);

    color:white;

    text-decoration:none;

    padding:18px 42px;

    border-radius:999px;

    transition:.35s;

}

.xBtn:hover{

    background:white;

    color:black;

}

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

.heroRight{

display:flex;

justify-content:center;

align-items:center;

position:relative;

opacity:0;

transform:translateX(80px);

transition:1.2s;

}

.circleGlow{

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(139,92,246,.65),

    transparent 70%);

    filter:blur(70px);

    animation:pulseGlow 5s infinite;

}

.heroImage{

    width:620px;
    max-width:100%;

    position:relative;

    animation:float 5s ease-in-out infinite;

    filter:
        drop-shadow(0 0 45px #8b5cf6)
        drop-shadow(0 0 90px rgba(139,92,246,.45));

    transition:.4s;
    cursor:pointer;
}

.heroImage:hover{

    transform:scale(1.03);

}


@keyframes pulseGlow{

0%,100%{

transform:scale(1);

opacity:.45;

}

50%{

transform:scale(1.1);

opacity:.8;

}

}

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

.stats{
    display:flex;
    gap:50px;
    margin-top:60px;
}

.stats div{
    text-align:center;
}

.stats h3{
    font-size:34px;
    color:#9b5cff;
}

.stats span{
    color:#bdbdbd;
    letter-spacing:2px;
    font-size:13px;
}

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

.section{
    width:90%;
    margin:auto;
    padding:120px 0;
}

.section h2{

font-size:58px;

margin-bottom:60px;

text-align:center;

font-weight:800;

text-shadow:

0 0 20px rgba(139,92,246,.25);

}

/* ===========================
   GLASS CARD
=========================== */

.glass{
    max-width:900px;
    margin:auto;

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

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

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:50px;

    line-height:2;

    color:#d5d5d5;

    transition:.4s;
}

.glass:hover{

    transform:translateY(-8px);

    box-shadow:0 0 40px rgba(124,58,237,.35);

}

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

.tokenGrid{

    display:grid;

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

    gap:30px;

}

.tokenCard{

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

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

    border-radius:24px;

    padding:40px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(12px);
    
    cursor:pointer;
}

.tokenCard:hover{

    transform:translateY(-10px);

    box-shadow:0 0 35px rgba(124,58,237,.35);

}

.tokenCard h3{

    color:#9b5cff;

    margin-bottom:15px;

    font-size:20px;

}

.tokenCard p{

    font-size:22px;

    color:white;

}

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

.roadmap{

    display:grid;

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

    gap:30px;

}

.step{

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

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

    border-radius:25px;

    padding:40px;

    transition:.3s;

    cursor:pointer;
}

.step:hover{

    transform:translateY(-10px);

    box-shadow:0 0 35px rgba(124,58,237,.35);

}

.number{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#7c3aed;

    font-weight:bold;

    margin-bottom:25px;

}

.step h3{

    margin-bottom:15px;

}

/* ===========================
   COMMUNITY
=========================== */

.community{

    width:90%;

    margin:120px auto;

    text-align:center;

}

.community h2{

    font-size:56px;

    margin-bottom:20px;

}

.community p{

    color:#cfcfcf;

    margin-bottom:40px;

    font-size:20px;

}

.joinBtn{

    display:inline-block;

    padding:20px 50px;

    border-radius:999px;

    background:linear-gradient(90deg,#7c3aed,#4f46e5);

    color:white;

    text-decoration:none;

    font-weight:700;

    box-shadow:0 0 35px rgba(124,58,237,.5);

    transition:.35s;

}

.joinBtn:hover{

    transform:scale(1.05);

}

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

footer{

    width:90%;

    margin:auto;

    padding:80px 0;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footerLogo{

    display:flex;

    align-items:center;

    gap:15px;

}

.footerLogo img{

    width:55px;

    border-radius:50%;

}

footer p{

    color:#9e9e9e;

}

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

@media(max-width:950px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:140px;

}

.heroLeft{

padding:20px;

}

.heroImage{

width:320px;

}

.hero h1{

font-size:54px;

}

.stats{

justify-content:center;

flex-wrap:wrap;

}

.tokenGrid{

grid-template-columns:1fr;

}

.roadmap{

grid-template-columns:1fr;

}

footer{

flex-direction:column;

gap:20px;

}

header{

width:96%;

padding:15px 20px;

}

nav{

display:none;

}

}
.hidden{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}
/* ========= HERO BACKGROUND ========= */

.hero-bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-10;
}

.planet{
    position:absolute;
    width:700px;
    height:700px;
    right:-180px;
    top:40px;

    border-radius:50%;

    background:
    radial-gradient(circle at 30% 30%,
    rgba(170,110,255,.95),
    rgba(60,20,160,.7),
    transparent 70%);

    filter:blur(40px);

    animation:planetFloat 8s ease-in-out infinite;
}

@keyframes planetFloat{

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

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

}

.grid{

position:absolute;

width:200%;
height:100%;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:80px 80px;

transform:perspective(700px) rotateX(75deg);

bottom:-65%;

animation:gridMove 15s linear infinite;

opacity:.25;

}

@keyframes gridMove{

from{
transform:perspective(700px) rotateX(75deg) translateY(0);
}

to{
transform:perspective(700px) rotateX(75deg) translateY(80px);
}

}

.particles{

position:absolute;
inset:0;

background-image:
radial-gradient(#fff 1px,transparent 1px);

background-size:70px 70px;

opacity:.25;

animation:particleMove 50s linear infinite;

}

@keyframes particleMove{

from{
transform:translateY(0);
}

to{
transform:translateY(-600px);
}

}
/* ===========================
   AURORA
=========================== */

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at 20% 20%,rgba(139,92,246,.18),transparent 35%),

radial-gradient(circle at 80% 30%,rgba(59,130,246,.15),transparent 40%),

radial-gradient(circle at 60% 90%,rgba(168,85,247,.15),transparent 40%);

filter:blur(40px);

animation:aurora 12s ease-in-out infinite alternate;

pointer-events:none;

z-index:-5;

}

@keyframes aurora{

0%{

transform:translate(-40px,-20px) scale(1);

}

100%{

transform:translate(40px,30px) scale(1.2);

}

}
/*=========================
 SHOOTING STARS
=========================*/

.shooting-stars{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:-2;

}

.shooting-stars span{

position:absolute;

display:block;

width:2px;

height:120px;

background:linear-gradient(
transparent,
white);

opacity:.8;

border-radius:999px;

transform:rotate(45deg);

animation:shoot 7s linear infinite;

}

.shooting-stars span:nth-child(1){

top:5%;
left:15%;

animation-delay:0s;

}

.shooting-stars span:nth-child(2){

top:15%;
left:60%;

animation-delay:2s;

}

.shooting-stars span:nth-child(3){

top:35%;
left:85%;

animation-delay:5s;

}

.shooting-stars span:nth-child(4){

top:50%;
left:30%;

animation-delay:3s;

}

.shooting-stars span:nth-child(5){

top:70%;
left:70%;

animation-delay:6s;

}

@keyframes shoot{

0%{

transform:
translate(0,0)
rotate(45deg);

opacity:0;

}

10%{

opacity:1;

}

100%{

transform:
translate(-700px,700px)
rotate(45deg);

opacity:0;

}

}
.logo img{

transition:.5s;

}

.logo img:hover{

transform:rotate(360deg);

}
/*=========================
CONTRACT
=========================*/

.contractBox{
    max-width:850px;
    margin:40px auto;
    display:flex;
    gap:15px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:15px;
    backdrop-filter:blur(12px);
}

.contractBox input{
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:white;
    font-size:17px;
    font-family:monospace;
}

#copyBtn{
    border:none;
    cursor:pointer;
    padding:16px 28px;
    border-radius:14px;
    font-weight:bold;
    color:white;
    background:linear-gradient(90deg,#7c3aed,#4f46e5);
    transition:.3s;
}

#copyBtn:hover{
    transform:scale(1.05);
    box-shadow:0 0 25px #8b5cf6;
}
/* =========================
   Live Chart
========================= */

.chart-section {
    width: 100%;
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.chart-section h2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
}

.dex-chart {
    width: 100%;
    height: 600px;
    border: none;
    border-radius: 18px;
    display: block;
    overflow: hidden;
}
/*=========================
MOBILE MENU
=========================*/

.menuToggle{

    display:none;

    font-size:32px;

    color:white;

    cursor:pointer;

    user-select:none;

}

@media(max-width:768px){

    .menuToggle{

        display:block;

    }

    nav{

        position:absolute;

        top:80px;

        right:20px;

        display:none;

        flex-direction:column;

        gap:15px;

        padding:20px;

        background:rgba(15,15,25,.95);

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

        border-radius:20px;

        backdrop-filter:blur(15px);

    }

    nav.active{

        display:flex;

    }

}