:root{

--dark:#061a17;
--dark-2:#092421;
--dark-3:#0f3430;

--gold:#c9933a;
--gold-light:#e8b96a;

--lime:#e4ea6b;
--cream:#e8e8c8;

--text:#b8ccc0;

}

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

body{
background:var(--dark);
color:var(--text);
font-family:serif;
overflow-x:hidden;
}

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

.nav{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:rgba(6,26,23,.95);
z-index:100;
}

.nav-links a{
margin:0 10px;
color:var(--lime);
text-decoration:none;
font-size:14px;
}

.nav-cta{
background:var(--gold);
color:black!important;
padding:6px 12px;
}

.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.hero h1{
font-size:60px;
color:var(--lime);
}

.hero p{
margin-top:10px;
font-size:20px;
}

footer{
padding:60px;
text-align:center;
background:var(--dark-2);
}

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

.visible{
opacity:1;
transform:translateY(0);
}
.page{

max-width:1000px;
margin:auto;
padding:160px 40px;

}

.page h1{

font-size:42px;
margin-bottom:20px;
color:var(--lime);

}

.product-grid,
.course-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;

}

.product-card,
.course-card{

background:var(--dark-2);
padding:30px;
border:1px solid rgba(255,255,255,.1);

}

.contact-form{

display:flex;
flex-direction:column;
gap:15px;
margin-top:40px;

}

.contact-form input,
.contact-form textarea{

padding:12px;
background:var(--dark-2);
border:none;
color:white;

}

.contact-form button{

padding:12px;
background:var(--gold);
border:none;
cursor:pointer;

}
}