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

body{
background:#020617;
color:white;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}

/* Animated gradient background */
.animated-bg{
position:fixed;
width:100%;
height:100%;
background:linear-gradient(270deg,#020617,#0f172a,#020617,#1e1b4b);
background-size:400% 400%;
animation:bgMove 18s ease infinite;
z-index:-2;
}

@keyframes bgMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

/* Floating particles */
.particles{
position:fixed;
width:100%;
height:100%;
background-image:radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
background-size:45px 45px;
animation:particlesMove 25s linear infinite;
z-index:-1;
opacity:.4;
}

@keyframes particlesMove{
from{transform:translateY(0);}
to{transform:translateY(-300px);}
}

/* Overlay */
.overlay{
position:fixed;
width:100%;
height:100%;
backdrop-filter:blur(6px);
}

/* Modal */
.nav-modal{
width:92%;
max-width:420px;
padding:28px;
border-radius:28px;

background:rgba(255,255,255,0.06);
backdrop-filter:blur(25px);

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

box-shadow:
0 15px 50px rgba(0,0,0,0.6),
0 0 40px rgba(99,102,241,0.15);

animation:modalEnter .7s ease;
}

@keyframes modalEnter{
from{
opacity:0;
transform:translateY(40px) scale(.96);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

/* Header */
.nav-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.nav-header h2{
font-size:23px;
font-weight:600;
letter-spacing:.5px;
}

.nav-header i{
font-size:22px;
color:#8b5cf6;
}

/* Section */
.section-title{
font-size:12px;
letter-spacing:2px;
opacity:.6;
margin:22px 0 12px;
}

/* Grid */
.nav-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

/* Cards */
.nav-card{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;

padding:20px;
border-radius:18px;

text-decoration:none;
color:white;
font-size:14px;

background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);

transition:.35s ease;
overflow:hidden;
}

.nav-card i{
font-size:22px;
color:#a78bfa;
}

/* glow hover */
.nav-card:hover{
transform:translateY(-5px) scale(1.04);
border-color:#8b5cf6;
box-shadow:
0 10px 30px rgba(139,92,246,0.35),
0 0 25px rgba(99,102,241,0.25);
}

/* glowing light effect */
.nav-card::before{
content:"";
position:absolute;
width:120%;
height:120%;
background:radial-gradient(circle,rgba(139,92,246,0.25),transparent 70%);
top:-50%;
left:-50%;
opacity:0;
transition:.5s;
}

.nav-card:hover::before{
opacity:1;
}

/* Support button */
.switch-btn{
width:100%;
margin-top:20px;
padding:16px;
border:none;
border-radius:40px;

font-size:15px;
font-weight:600;
color:white;

background:linear-gradient(90deg,#7c3aed,#06b6d4);
cursor:pointer;
transition:.35s;
}

.switch-btn:hover{
transform:scale(1.05);
box-shadow:
0 12px 35px rgba(124,58,237,0.5),
0 0 30px rgba(6,182,212,0.4);
}

/* Mobile spacing improvement */
@media(max-width:400px){
.nav-modal{
padding:22px;
}
}