* {

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

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

}

body {

  background:
    #0b0b0f;

  color:
    white;

  overflow-x:
    hidden;

}

.bg {

  position:
    fixed;

  inset:
    0;

  background:
    radial-gradient(circle at 20% 20%,
      rgba(255, 120, 80, 0.35),
      transparent 50%),

    radial-gradient(circle at 80% 80%,
      rgba(120, 90, 255, 0.35),
      transparent 50%),

    linear-gradient(180deg,
      #0b0b0f,
      #06060a);

  z-index:
    -1;

}

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;

}

nav .nav-inner {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}

nav .nav-links {

  display:
    flex;

  align-items:
    flex-end;

  gap:
    14px;

}

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;

}

nav .nav-links a span {

  font-size:
    28px;

  display:
    grid;

  place-items:
    center;

  line-height:
    1;

}

nav .nav-links a::after {

  content:
    attr(title);

  position:
    absolute;

  bottom:
    -22px;

  font-size:
    12px;

  opacity:
    0;

  transform:
    translateY(5px);

  transition:
    0.15s ease;

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

}

nav .nav-links a:hover {

  transform:
    scale(1.6);

  z-index:
    10;

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

}

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

  opacity:
    1;

  transform:
    translateY(0);

}

#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);

  font-size:
    24px;

  cursor:
    pointer;

  transition:
    0.2s ease;

}

#searchBtn:hover {

  transform:
    scale(1.6);

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

  z-index:
    10;

}

.section {

  min-height:
    100vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    120px 8% 100px;

}

.hero {

  flex-direction:
    column;

  text-align:
    center;

}

h1 {

  font-size:
    4.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:
    60px 50px;

  border-radius:
    30px;

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

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 40px rgba(255, 255, 255, 0.03);

  max-width:
    950px;

}

.split {

  display:
    flex;

  gap:
    60px;

  align-items:
    flex-start;

}

.split.left {

  flex-direction:
    row;

}

.split.right {

  flex-direction:
    row-reverse;

}

.emoji {

  font-size:
    4rem;

  opacity:
    0.85;

}

.card h2 {

  font-size:
    2.8rem;

  margin-bottom:
    20px;

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

  -webkit-background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

}

.reveal {

  opacity:
    0;

  transition:
    1s ease;

}

.reveal.left {

  transform:
    translateX(-120px);

}

.reveal.right {

  transform:
    translateX(120px);

}

.reveal.visible {

  opacity:
    1;

  transform:
    none;

}

input,
button {

  font-family:
    inherit;

}

footer {

  padding:
    60px;

  text-align:
    center;

  color:
    #777;

  background:
    #07070b;

}

#searchBtn {

  cursor:
    pointer;

  width:
    60px;

  height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    12px;

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

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

  color:
    white;

  font-size:
    18px;

  transition:
    0.2s ease;

  user-select:
    none;

}

#searchBtn:active {

  transform:
    scale(0.95);

}

#searchBox {

  position:
    fixed;

  top:
    90px;

  left:
    50%;

  transform:
    translateX(-50%) scale(0.95);

  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;

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

  backdrop-filter:
    blur(14px);

  opacity:
    0;

  pointer-events:
    none;

  transition:
    0.2s ease;

}

#searchBox:not(.hidden) {

  opacity:
    1;

  transform:
    translateX(-50%) scale(1);

  pointer-events:
    auto;

}

#searchInput {

  width:
    100%;

  padding:
    12px 14px;

  border-radius:
    12px;

  border:
    none;

  outline:
    none;

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

  color:
    white;

  font-size:
    1rem;

}

#searchInput::placeholder {

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

}

#results {

  margin-top:
    10px;

  max-height:
    240px;

  overflow-y:
    auto;

  padding-right:
    4px;

}

.resultItem {

  padding:
    10px 12px;

  margin-top:
    6px;

  border-radius:
    10px;

  cursor:
    pointer;

  color:
    white;

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

  transition:
    0.15s ease;

  font-size:
    0.95rem;

}

.resultItem:hover {

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

  transform:
    translateX(3px);

}

.resultItem:only-child {

  opacity:
    0.7;

}

#results::-webkit-scrollbar {

  width:
    6px;

}

#results::-webkit-scrollbar-thumb {

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

  border-radius:
    10px;

}

#results::-webkit-scrollbar-track {

  background:
    transparent;

}

#navToggle {

  display:
    none;

  width:
    52px;

  height:
    52px;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    14px;

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

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

  color:
    white;

  font-size:
    26px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    0.2s ease;

  user-select:
    none;

}

#navToggle:hover {

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

}

#navToggle:active {

  transform:
    scale(0.95);

}

@media (max-width: 820px) {

  nav {

    width:
      calc(100vw - 16px);

    padding:
      8px 12px;

    border-radius:
      18px;

    top:
      8px;

  }

  nav .nav-inner {

    width:
      100%;

    justify-content:
      space-between;

    gap:
      10px;

  }

  #navToggle {

    display:
      flex;

  }

  nav .nav-links {

    position:
      fixed;

    top:
      76px;

    left:
      8px;

    right:
      8px;

    width:
      auto;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      8px;

    background:
      rgba(10, 10, 15, 0.95);

    backdrop-filter:
      blur(16px);

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

    border-radius:
      18px;

    padding:
      0 12px;

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

    max-height:
      0;

    opacity:
      0;

    overflow:
      hidden;

    pointer-events:
      none;

    transition:
      max-height 0.3s ease,
      opacity 0.2s ease,
      padding 0.3s ease;

  }

  nav .nav-links.open {

    max-height:
      calc(100dvh - 110px);

    overflow-y: auto;
    overscroll-behavior: contain;

    opacity:
      1;

    pointer-events:
      auto;

    padding:
      12px;

  }

  nav .nav-links a {

    width:
      100%;

    height:
      56px;

    flex-shrink: 0;

    border-radius:
      14px;

    justify-content:
      flex-start;

    padding:
      0 18px;

    gap:
      14px;

  }

  nav .nav-links a span {

    font-size:
      24px;

  }

  nav .nav-links a::after {

    content:
      attr(title);

    position:
      static;

    opacity:
      1;

    transform:
      none;

    font-size:
      1rem;

    color:
      white;

    margin-left:
      4px;

  }

  nav .nav-links a:hover {

    transform:
      none;

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

  }

  #searchBtn:hover {

    transform:
      none;

  }

  #searchBtn {

    width:
      52px;

    height:
      52px;

    font-size:
      22px;

    border-radius:
      14px;

  }

  .section {

    min-height:
      auto;

    padding:
      100px 16px 60px;

  }

  .hero {

    padding-top:
      110px;

  }

  h1 {

    font-size:
      2.6rem;

    line-height:
      1.1;

  }

  .card h2 {

    font-size:
      1.7rem;

    margin-bottom:
      12px;

  }

  p {

    font-size:
      0.98rem;

    line-height:
      1.65;

  }

  .card {

    padding:
      28px 22px;

    border-radius:
      22px;

    width:
      100%;

    max-width:
      100%;

  }

  .split,
  .split.left,
  .split.right {

    flex-direction:
      column !important;

    gap:
      18px;

    text-align:
      center;

    align-items:
      center;

  }

  .emoji {

    font-size:
      3rem;

  }

  .reveal.left,
  .reveal.right {

    transform:
      translateY(40px);

  }

  .reveal.visible {

    transform:
      none;

  }

  .carousel {

    height:
      220px;

  }

  .slide {

    width:
      200px;

    height:
      140px;

    margin:
      0 10px;

  }

  #searchBox {

    top:
      78px;

    width:
      calc(100vw - 16px);

  }

}