*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'IBM Plex Serif', serif;
color:white;
background:#000;
background:
radial-gradient(circle at 75% 60%, rgba(255,255,255,0.06), transparent 40%),
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.03), transparent 50%),
#000;
}
.navbar{
position:absolute;
top:0;
left:0;
right:0;
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 80px;
z-index:5;
}
.logo img{
height:40px;
}
nav{
font-family:'IBM Plex Mono', monospace;
}
nav a{
margin-left:40px;
text-decoration:none;
color:#aaa;
font-size:14px;
letter-spacing:1px;
}
nav a:hover{
color:white;
}
.hero{
display:flex;
align-items:center;
min-height:100vh;
padding:120px 80px;
position:relative;
overflow:hidden;
}
.hero-left{
max-width:520px;
z-index:2;
}
.tag{
font-family:'IBM Plex Mono', monospace;
font-size:12px;
letter-spacing:2px;
color:#777;
margin-bottom:24px;
}
.hero-left h1{
font-size:110px;
font-weight:500;
margin-bottom:20px;
}
.bio{
color:#aaa;
line-height:1.7;
margin-bottom:40px;
}
.search-box{
display:flex;
align-items:center;
border:1px solid #333;
padding:14px 18px;
max-width:420px;
margin-bottom:40px;
}
.search-box input{
flex:1;
background:none;
border:none;
color:white;
outline:none;
font-family:'IBM Plex Serif', serif;
}
.search-box span{
color:#777;
}
.buttons{
display:flex;
gap:16px;
font-family:'IBM Plex Mono', monospace;
font-size:14px;
}
.btn-primary{
padding:12px 26px;
background:white;
color:black;
text-decoration:none;
transition:0.2s;
}
.btn-primary:hover{
background:#ddd;
}
.btn-outline{
padding:12px 26px;
border:1px solid #444;
color:white;
text-decoration:none;
transition:0.2s;
}
.btn-outline:hover{
border-color:white;
}
.btn-ghost{
padding:12px 10px;
color:#777;
text-decoration:none;
}
.btn-ghost:hover{
color:white;
}
.hero-image{
position:absolute;
right:-5%;
bottom:0;
height:95%;
display:flex;
align-items:flex-end;
pointer-events:none;
}
.hero-image img{
height:100%;
width:auto;
filter:
grayscale(100%)
contrast(120%)
brightness(0.9);
opacity:0.9;
}