:root{
 --green:#9acd32;
 --black:#000;
 --dark:#111;
 --white:#fff;
}
*{box-sizing:border-box}
body{
 margin:0;font-family:Arial,Helvetica,sans-serif;
 background:var(--black);color:var(--white);
}
header{
 position:fixed;top:0;width:100%;z-index:1000;
 background:rgba(0,0,0,.9);
 display:flex;align-items:center;justify-content:space-between;
 padding:1rem 2rem;
}
header img{height:42px}
nav a{
 color:var(--white);text-decoration:none;margin-left:24px;
 position:relative;font-weight:500;
}
nav a::after{
 content:"";position:absolute;left:0;bottom:-6px;
 width:0;height:2px;background:var(--green);transition:.3s;
}
nav a:hover::after{width:100%}
.hero{
 height:100vh;display:flex;align-items:center;
 background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
 url('assets/img/hero.jpg') center/cover;
 padding:0 8%;
}
.hero h1{font-size:3rem;color:var(--green)}
section{padding:6rem 8%}
.cards{
 display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:2rem;
}
.card{
 background:var(--dark);padding:2rem;border-radius:8px;
 transition:.3s;cursor:pointer;
}
.card:hover{transform:translateY(-6px)}
.slider{display:flex;overflow:hidden}
.slide{min-width:100%;transition:.5s}
footer{
 background:var(--dark);padding:3rem;text-align:center;
}
footer a{color:var(--green);text-decoration:none;margin:0 10px}
#cookie{
 position:fixed;bottom:0;left:0;width:100%;
 background:#000;padding:1rem;
 display:flex;justify-content:center;gap:1rem;
}
#cookie.hidden{display:none}
button{
 background:var(--green);border:none;padding:.6rem 1.2rem;
 cursor:pointer;font-weight:bold;
}
form input,form textarea{
 width:100%;padding:.7rem;margin-bottom:1rem;
}