@font-face{font-family:Inter;src:url("../fonts/inter/Inter-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("../fonts/inter/Inter-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url("../fonts/inter/Inter-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg-primary:#000000;
  --text-primary:#eef2f6;
  --text-secondary:#aeb6c2;
  --accent:#6fbad3;
  --border-subtle:rgba(255,255,255,.10);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:Inter,system-ui,sans-serif;
  overflow:hidden;
}

.nav{
  position:fixed;
  inset:0 0 auto 0;
  height:64px;
  padding-inline:clamp(16px,4vw,32px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:20;
}

.nav-left{
  font-size:1.1rem;
  font-weight:600;
  cursor:pointer;
}

.nav-left:focus-visible,
.nav-right button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

.nav-right button{
  background:none;
  border:none;
  color:var(--text-secondary);
  margin-left:1.5rem;
  cursor:pointer;
}

.nav-right button:hover{color:var(--text-primary)}

.social-fixed{
  position:fixed;
  right:clamp(12px,3vw,24px);
  bottom:clamp(16px,4vw,28px);
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:15;
}

.social-fixed img{
  width:24px;
  height:24px;
  filter:brightness(0) invert(55%);
  transition:filter .25s ease;
}

.social-fixed a:hover img{
  filter:brightness(0) invert(80%) sepia(20%) hue-rotate(165deg);
}

#app{height:100%;position:relative}

.section{
  position:absolute;
  inset:0;
  padding-top:96px;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
  overflow:hidden;
  scrollbar-width:none;
}

.section::-webkit-scrollbar{width:0;height:0}

.section.active{
  opacity:1;
  pointer-events:auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:0;
}

h1{font-size:clamp(2.5rem,6vw,4rem);margin:0}
h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1.25rem}

.typing{
  margin-top:.75rem;
  font-size:clamp(1rem,2vw,1.25rem);
  color:var(--text-secondary);
  white-space:nowrap;
  min-height:1.2em;
}

.cursor{color:var(--accent)}

.container{
  max-width:clamp(320px,90vw,1200px);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
  padding-bottom:clamp(28px,5vw,56px);
}

.text-block{
  max-width:clamp(320px,75vw,920px);
  margin-bottom:clamp(24px,4vw,40px);
}

.text-block p{
  margin-bottom:.75rem;
  line-height:1.7;
  color:var(--text-secondary);
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(16px,3vw,24px);
}

.card-tile{
  position:relative;
  height:120px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border-subtle);
  text-decoration:none;
}

.card-tile img{
  width:56px;
  height:56px;
  filter:brightness(0) invert(78%);
  transition:transform .2s ease,filter .2s ease;
}

.card-tile:hover img{
  transform:scale(1.05);
  filter:brightness(0) invert(88%);
}

.card-label{
  position:absolute;
  left:12px;
  bottom:10px;
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.2px;
  color:rgba(238,242,246,.65);
}