:root{
  --bg:#0e1512;
  --line:#2b3c36;
  --green-bright:#a3dd8e;
  --blue:#4fa8c9;
  --blue-bright:#7ecfe8;
  --text:#e6ece7;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0;
}
a{color:var(--blue-bright); text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus-visible{outline:2px solid var(--blue-bright); outline-offset:2px;}

nav{
  padding:18px 28px;
  border-bottom:1px solid var(--line);
}
.nav-brand{
  font-family:'Oswald', sans-serif; font-weight:600;
  font-size:15px; letter-spacing:0.12em; color:var(--blue-bright);
}

.hero{
  min-height:80vh;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:60px 24px;
  max-width:920px; margin:0 auto;
}
.hero h1{ font-size:clamp(40px, 8vw, 84px); line-height:0.98; color:var(--text); }
.hero h1 span{ color:var(--blue-bright); }

.socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.socials a{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  color:var(--text); border:1px solid var(--line); padding:9px 14px;
  border-radius:2px;
}
.socials a:hover{ border-color:var(--blue); color:var(--blue-bright); text-decoration:none; }

@media (max-width:640px){
  nav{ padding:14px 16px; }
  .hero{ padding:50px 16px; }
}