.nav-links {
  display:
    flex;

  gap:
    14px;

  align-items:
    flex-end;
}

.nav-links a,
#searchBtn {

  position:
    relative;

  width:
    60px;

  height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    18px;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid rgba(255, 255, 255, 0.08);

  color:
    white;

  text-decoration:
    none;

  transition:
    0.2s ease;
}

.nav-links a span,
#searchBtn {

  font-size:
    24px;

}

.nav-links a:hover,
#searchBtn:hover {

  transform:
    scale(1.6);

  background:
    rgba(255, 255, 255, 0.14);

  z-index:
    10;
}

.nav-links a::after,
#searchBtn::after {

  content:
    attr(title);

  position:
    absolute;

  bottom:
    -22px;

  left:
    50%;

  transform:
    translateX(-50%) translateY(5px);

  font-size:
    12px;

  color:
    rgba(255, 255, 255, 0.8);

  opacity:
    0;

  transition:
    0.15s ease;

  white-space:
    nowrap;
}

.nav-links a:hover::after,
#searchBtn:hover::after {

  opacity:
    1;

  transform:
    translateX(-50%) translateY(0);

}

.split {

  display:
    flex;

  gap:
    60px;

  align-items:
    center;

}

.card h2 {

  font-size:
    3.2rem;

  margin-bottom:
    20px;

  background:
    linear-gradient(90deg,
      #ffb7a5,
      #bfa8ff);

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}

#searchInput {

  width:
    100%;

  padding:
    12px;

  border-radius:
    12px;

  border:
    none;

  outline:
    none;

  background:
    rgba(255, 255, 255, 0.08);

  color:
    white;
}

.resultItem:hover {

  background:
    rgba(255, 255, 255, 0.12);

}

* {

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  font-family:
    'Inter', sans-serif;

}

nav {

  position:
    fixed;

  top:
    12px;

  left:
    50%;

  transform:
    translateX(-50%);

  width:
    min(1100px, 95vw);

  padding:
    10px 16px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  background:
    rgba(0, 0, 0, 0.35);

  backdrop-filter:
    blur(14px);

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    22px;

  z-index:
    1000;

  overflow:
    visible;

}

nav .nav-links {

  display:
    flex;

  gap:
    13px;

  align-items:
    center;

}

nav .nav-links a {

  position:
    relative;

  width:
    60px;

  height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    18px;

  text-decoration:
    none;

  color:
    white;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid rgba(255, 255, 255, 0.08);

  transition:
    0.2s ease;

  overflow:
    visible;

}

nav .nav-links a::after {

  content:
    attr(title);

  position:
    absolute;

  left:
    50%;

  transform:
    translateX(-50%);

  bottom:
    -24px;

  font-size:
    12px;

  color:
    rgba(255, 255, 255, 0.85);

  opacity:
    0;

  visibility:
    hidden;

  white-space:
    nowrap;

  transition:
    0.15s ease;

  pointer-events:
    none;

  z-index:
    9999;

}

nav .nav-links a:hover::after {

  opacity:
    1;

  visibility:
    visible;

}

nav .nav-links a:hover {

  transform:
    scale(1.6);

  z-index:
    999;

}

#searchBtn {

  width:
    60px;

  height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    18px;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid rgba(255, 255, 255, 0.08);

  color:
    white;

  font-size:
    18px;

  cursor:
    pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;

}

#searchBtn:hover {

  transform:
    scale(1.6);

  background:
    rgba(255, 255, 255, 0.16);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.4);

}

#searchBox {

  position:
    fixed;

  top:
    90px;

  left:
    50%;

  transform:
    translateX(-50%);

  width:
    min(520px, 90vw);

  background:
    rgba(15, 15, 20, 0.92);

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    18px;

  padding:
    14px;

  z-index:
    9999;

  opacity:
    0;

  pointer-events:
    none;

  transition:
    0.2s ease;

}

#searchBox:not(.hidden) {

  opacity:
    1;

  pointer-events:
    auto;

}

#searchInput {

  width:
    100%;

  padding:
    12px;

  border:
    none;

  outline:
    none;

  border-radius:
    12px;

  background:
    rgba(255, 255, 255, 0.08);

  color:
    white;

}

#results {

  margin-top:
    10px;

}

.resultItem {

  padding:
    10px;

  margin-top:
    6px;

  border-radius:
    10px;

  cursor:
    pointer;

  background:
    rgba(255, 255, 255, 0.05);

}

.section {

  min-height:
    100vh;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  padding:
    120px 8% 80px;

}

h1 {

  font-size:
    4rem;

}

h2 {

  font-size:
    2.5rem;

}

p {

  color:
    #cfcfcf;

  line-height:
    1.8;

}

.card {

  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.03));

  padding:
    50px;

  border-radius:
    30px;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5);

  max-width:
    900px;

}

.reveal {

  opacity:
    0;

  transition:
    1s ease;

}

.reveal.left {

  transform:
    translateX(-120px);

}

.reveal.right {

  transform:
    translateX(120px);

}

.reveal.visible {

  opacity:
    1;

  transform:
    none;

}

.grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    12px;

  margin-top:
    20px;

}

.grid img {

  width:
    100%;

  aspect-ratio:
    4 / 3;

  height:
    auto;

  object-fit:
    cover;

  border-radius:
    14px;

  cursor:
    pointer;

  transition:
    0.2s ease;

}

.grid img:hover {

  transform:
    scale(1.03);

}

footer {

  padding:
    60px;

  text-align:
    center;

  color:
    #777;

  background:
    #07070b;

}

#lightbox {

  position:
    fixed;

  inset:
    0;

  background:
    rgba(0, 0, 0, 0.9);

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  z-index:
    99999;

}

#lightbox img {

  max-width:
    90%;

  max-height:
    90%;

  border-radius:
    12px;

}

#lightboxClose {

  position:
    absolute;

  top:
    22px;

  right:
    22px;

  z-index:
    1;

  width:
    46px;

  height:
    46px;

  border:
    1px solid rgba(255, 255, 255, 0.22);

  border-radius:
    50%;

  background:
    rgba(0, 0, 0, 0.58);

  color:
    white;

  font:
    inherit;

  font-size:
    1.3rem;

  font-weight:
    800;

  cursor:
    pointer;

  line-height:
    1;

  backdrop-filter:
    blur(10px);

}

#lightboxClose:hover {

  background:
    rgba(255, 255, 255, 0.16);

  transform:
    scale(1.05);

}