body{
margin:0;
font-family:Inter,sans-serif;
background:#000;
color:#ddd;
}

.header{
position:sticky;
top:0;
background:#000;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
border-bottom:1px solid #111;
z-index:1000;
}

.header nav a{
color:#aaa;
margin:0 12px;
text-decoration:none;
font-size:14px;
}

.header nav a:hover{color:#fff;}

.logo{height:36px;}

#langBtn{
background:#111;
color:#fff;
border:1px solid #333;
padding:6px 10px;
cursor:pointer;
}

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

.hero-logo{
width:420px;
max-width:80%;
margin-bottom:40px;
}

.hero h1{
font-weight:400;
letter-spacing:2px;
}

.section{
padding:90px 12%;
}

.narrow{
max-width:900px;
margin:auto;
text-align:center;
}

.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.img-box img{
width:100%;
filter:grayscale(100%);
}

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin:40px 0;
}

.grid img{
width:100%;
filter:grayscale(100%);
}

.about-list{
list-style:none;
padding:0;
}

.about-list li{
margin:10px 0;
color:#bbb;
}

.small{
font-size:14px;
color:#888;
max-width:700px;
margin:auto;
}

footer{
text-align:center;
padding:40px;
background:#0a0a0a;
color:#666;
}

@media(max-width:900px){
.two-col{grid-template-columns:1fr;}
.header nav{display:none;}
}