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

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:#0b0b0c;
color:#fff;
overflow-x:hidden;
}

.header{
position:fixed;
top:0;
width:100%;
padding:28px 40px;
backdrop-filter: blur(20px);
background:rgba(0,0,0,.35);
z-index:10;
}

.logo{
font-weight:600;
letter-spacing:8px;
font-size:18px;
color:#7CFF9A;
}

.hero{
height:75vh;
display:flex;
align-items:center;
justify-content:center;
perspective:1000px;
padding-top:50px;
}

.hero-img{
width:min(900px,90vw);
max-height:65vh;
object-fit:contain;
border-radius:28px;
box-shadow:0 40px 120px rgba(0,0,0,.8);
transition:transform .2s ease-out;
}

.nav{
text-align:center;
margin-top:40px;
margin-bottom:30px;
}

button{
font-size:14px;
padding:12px 24px;
margin:10px;
border-radius:30px;
border:1px solid rgba(124,255,154,.5);
background:rgba(255,255,255,.02);
color:#7CFF9A;
cursor:pointer;
transition:all .35s cubic-bezier(.2,.8,.2,1);
backdrop-filter: blur(10px);
}

button:hover{
transform:translateY(-3px);
box-shadow:0 10px 40px rgba(124,255,154,.35);
background:#7CFF9A;
color:#000;
}

.gallery{
max-width:1200px;
margin:auto;
padding:40px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:26px;
}

.gallery img{
width:100%;
border-radius:18px;
transition:all .35s cubic-bezier(.2,.8,.2,1);
cursor:pointer;
}

.gallery img:hover{
transform:scale(1.05) translateY(-6px);
box-shadow:0 20px 60px rgba(0,0,0,.8);
filter:brightness(1.15) contrast(1.05);
}

.footer{
text-align:center;
padding:80px 20px;
opacity:.7;
font-size:14px;
}

.footer a{
color:#7CFF9A;
text-decoration:none;
transition:.3s;
}

.footer a:hover{
opacity:1;
text-shadow:0 0 10px rgba(124,255,154,.6);
}