:root{
--bg:#050510;
--bg2:#0d0d1f;
--card:#141432;
--text:white;
--accent:#00f7ff;
}

.light{
--bg:#f4f7ff;
--bg2:#ffffff;
--card:#e9ecff;
--text:#111;
--accent:#0066ff;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Orbitron',sans-serif;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);transition:.4s;overflow-x:hidden}

nav{
position:fixed;
width:100%;
top:0;
left:0;
padding:20px 50px;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(15px);
z-index:1000
}

nav h2{color:var(--accent)}
nav a{color:var(--text);text-decoration:none;margin-left:25px;transition:.3s}
nav a:hover{color:var(--accent)}

.toggle{
padding:8px 18px;
border-radius:20px;
border:2px solid var(--accent);
background:none;
color:var(--accent);
cursor:pointer;
margin-left:20px
}

.hero{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
position:relative;
overflow:hidden;
background:linear-gradient(-45deg,#001f3f,#001133,#000814,#001f3f);
background-size:400% 400%;
animation:bgmove 12s ease infinite
}

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

.hero h1{font-size:70px;text-shadow:0 0 25px var(--accent)}

.btn{padding:15px 40px;border-radius:40px;background:var(--accent);color:black;font-weight:700;margin-top:30px;display:inline-block;text-decoration:none}

section{padding:120px 20px;background:var(--bg2)}
.container{max-width:1100px;margin:auto}

.card{background:var(--card);padding:40px;border-radius:25px;margin-top:30px;text-align:center;transition:.4s}
.card:hover{transform:translateY(-10px);box-shadow:0 0 25px var(--accent)}

.counter{font-size:50px;margin-top:20px;color:var(--accent)}
.countdown{font-size:35px;margin-top:20px}

footer{text-align:center;padding:40px;background:var(--bg);opacity:.6}

.fade{opacity:0;transform:translateY(40px);transition:1s}
.fade.show{opacity:1;transform:translateY(0)}

canvas#particles{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}