/* Base */
:root{
--bg:#0a0a0f;
--text:#ffffff;
--accent:#00eaff;
--glass:rgba(255,255,255,0.08);
}
body.light{
--bg:#f5f7fb;
--text:#111;
--accent:#0066ff;
--glass:rgba(0,0,0,0.05);
}
body{
margin:0;
font-family:'Plus Jakarta Sans',sans-serif;
background:var(--bg);
color:var(--text);
transition:.4s;
overflow-x:hidden;
}
canvas{
position:fixed;
top:0;
left:0;
z-index:-1;
}

/* Nav */
nav{
position:fixed;
top:20px;
right:20px;
display:flex;
gap:10px;
z-index:100;
}
.btn{
padding:10px 16px;
border-radius:30px;
background:var(--glass);
backdrop-filter:blur(10px);
cursor:pointer;
font-size:14px;
}

/* Sections */
section{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:60px 20px;
text-align:center;
opacity:0;
transform:translateY(40px);
}
h1{
font-family:'Orbitron';
font-size:3rem;
}
.cards{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}
.card{
padding:20px;
border-radius:20px;
background:var(--glass);
backdrop-filter:blur(15px);
transition:.3s;
}
.card:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 0 25px var(--accent);
}
input,textarea{
width:260px;
padding:10px;
margin:10px;
border:none;
border-radius:10px;
}
button{
padding:10px 20px;
border:none;
border-radius:25px;
background:var(--accent);
cursor:pointer;
}
footer{
padding:20px;
text-align:center;
opacity:0.6;
}