/* =========================================
   KNY NAVIGATION
========================================= */

.kny-nav {

  position: fixed;
  inset: 0 0 auto 0;

  z-index: 5000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 14px clamp(18px, 5vw, 72px);

  background:
    linear-gradient(
      180deg,
      rgba(2,3,8,.88),
      rgba(2,3,8,.35)
    );

  border-bottom:
    1px solid rgba(255,255,255,.08);

  backdrop-filter: blur(16px);
}

/* =========================================
   BRAND
========================================= */

.kny-brand {

  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;

  text-decoration: none;
}

.kny-brand-mark {

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 42% 35%,
      white 0 9%,
      #e9efff 10% 26%,
      rgba(140,185,255,.55) 27% 46%,
      transparent 47%
    );

  box-shadow:
    0 0 28px rgba(180,210,255,.65);

  flex: 0 0 auto;
}

.kny-brand-text {

  display: flex;
  flex-direction: column;

  line-height: 1.1;

  min-width: 0;
}

.kny-brand-text strong {

  font-family: var(--serif);

  letter-spacing: .07em;

  font-size: 1rem;

  color: white;

  white-space: nowrap;
}

.kny-brand-text span {

  color: var(--muted);

  font-size: .7rem;

  letter-spacing: .24em;

  text-transform: uppercase;

  white-space: nowrap;
}

/* =========================================
   LINKS
========================================= */

.kny-links {

  display: flex;
  align-items: center;

  gap: 8px;

  color: var(--muted);

  font-size: .86rem;
}

.kny-links a,
.kny-lang {

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding: 9px 12px;

  border-radius: 999px;

  border: 1px solid transparent;

  background: transparent;

  color: inherit;

  font: inherit;

  cursor: pointer;

  transition: .22s ease;
}

.kny-links a:hover,
.kny-lang:hover {

  color: white;

  border-color: var(--line);

  background: rgba(255,255,255,.055);
}

/* =========================================
   SOCIALS
========================================= */

.kny-social {

  width: 44px;

  padding: 0 !important;
}

.kny-social img {

  width: 22px;
  height: 22px;

  object-fit: contain;
}

.kny-wp {

  background:
    linear-gradient(
      135deg,
      rgba(255,113,80,.92),
      rgba(170,57,74,.76)
    );
}

.kny-ig {

  background:
    linear-gradient(
      135deg,
      rgba(131,58,180,.92),
      rgba(225,48,108,.92),
      rgba(245,96,64,.92)
    );
}

.kny-tt {

  background:
    linear-gradient(
      135deg,
      rgba(0,242,234,.18),
      rgba(255,0,80,.28)
    ),
    rgba(15,20,36,.92);
}

/* =========================================
   MOBILE TOGGLE
========================================= */

.kny-toggle {

  display: none;

  width: 44px;
  height: 44px;

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;
}

.kny-toggle span {

  display: block;

  width: 24px;
  height: 2px;

  margin: 5px auto;

  border-radius: 999px;

  background: rgba(255,255,255,.9);

  transition: .25s ease;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 980px) {

  .kny-toggle {

    display: block;

    z-index: 6001;
  }

  .kny-links {

    position: fixed;

    top: 0;
    right: -100%;

    width: min(84vw, 340px);
    height: 100vh;

    padding: 110px 24px 40px;

    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    gap: 10px;

    background:
      linear-gradient(
        180deg,
        rgba(5,7,14,.98),
        rgba(10,12,20,.98)
      );

    border-left:
      1px solid rgba(255,255,255,.08);

    backdrop-filter: blur(18px);

    transition: right .35s ease;

    z-index: 6000;
  }

  .kny-links.active {

    right: 0;
  }

  .kny-links a,
  .kny-lang {

    width: 100%;

    justify-content: flex-start;

    padding: 14px 16px;

    border-radius: 16px;

    font-size: 1rem;
  }

  .kny-social {

    width: 100%;

    justify-content: center !important;
  }
}

@media (max-width: 560px) {

  .kny-brand-text span {

    display: none;
  }

  .kny-brand-text strong {

    font-size: .9rem;
  }
}