/* Integrate the canonical Cognigenesis artwork as a deliberate brand element. */
.site-nav .mark,
.footer .mark {
  gap: 12px;
}

.site-nav .mark img,
.footer .mark img {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: cover;
  border: 1px solid rgba(82, 226, 255, 0.48);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 78, 205, 0.12), 0 0 22px rgba(44, 205, 255, 0.17);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-nav .mark:hover img,
.footer .mark:hover img {
  transform: translateY(-1px) scale(1.035);
  box-shadow: 0 0 0 1px rgba(255, 78, 205, 0.28), 0 0 28px rgba(44, 205, 255, 0.3);
}

.cg-logo-orbit > a {
  position: absolute;
  z-index: 4;
  top: 27%;
  left: 27%;
  display: block;
  width: 46%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(94, 232, 255, 0.55);
  border-radius: 22px;
  background: #15162a;
  box-shadow:
    0 0 0 8px rgba(13, 20, 44, 0.42),
    0 30px 70px rgba(0, 0, 0, 0.46),
    0 0 55px rgba(45, 209, 255, 0.2),
    0 0 85px rgba(242, 64, 201, 0.12);
  transform: rotate(-1.5deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.cg-logo-orbit > a:hover,
.cg-logo-orbit > a:focus-visible {
  transform: rotate(0deg) translateY(-5px) scale(1.025);
  box-shadow:
    0 0 0 8px rgba(13, 20, 44, 0.5),
    0 38px 80px rgba(0, 0, 0, 0.5),
    0 0 68px rgba(45, 209, 255, 0.3),
    0 0 100px rgba(242, 64, 201, 0.2);
}

.cg-logo-orbit > a .orbit-logo {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border: 0;
  border-radius: 20px;
  box-shadow: none;
}

.neural-tree-link {
  display: block;
  border-radius: 4px;
  outline-offset: 7px;
}

.neural-tree-link .neural-tree {
  display: block;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.neural-tree-link:hover .neural-tree,
.neural-tree-link:focus-visible .neural-tree {
  transform: scale(1.025);
  filter: brightness(1.12) saturate(1.08);
}

@media (max-width: 900px) {
  .cg-logo-orbit > a {
    top: 25%;
    left: 25%;
    width: 50%;
  }
}

@media (max-width: 560px) {
  .site-nav .mark img,
  .footer .mark img {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 10px;
  }

  .cg-logo-orbit > a {
    top: 24%;
    left: 24%;
    width: 52%;
    border-radius: 16px;
    box-shadow:
      0 0 0 5px rgba(13, 20, 44, 0.42),
      0 24px 55px rgba(0, 0, 0, 0.46),
      0 0 42px rgba(45, 209, 255, 0.2);
  }

  .cg-logo-orbit > a .orbit-logo {
    border-radius: 14px;
  }
}