:root {
  --site-brand-font: var(--font-text, "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --site-brand-gap: 14px;
  --site-brand-mark-size: 28px;
  --site-brand-icon-size: 18px;
  --site-brand-text-size: 17px;
  --site-brand-text-weight: 600;
  --site-brand-text-tracking: -0.02em;
}

.brand,
.brand-hover {
  display: inline-flex;
  align-items: center;
  gap: var(--site-brand-gap);
  min-width: 0;
  color: inherit;
  font-family: var(--site-brand-font);
  text-decoration: none;
}

.brand:visited,
.brand:hover,
.brand:active,
.brand:focus,
.brand-hover:visited,
.brand-hover:hover,
.brand-hover:active,
.brand-hover:focus {
  color: inherit;
  text-decoration: none;
}

.brand-hover {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform-origin: 20px 50%;
}

.brand-hover:hover,
.brand-hover:focus-visible {
  color: inherit;
  transform: none;
}

.brand-hover__mark {
  position: relative;
  display: inline-grid;
  flex: 0 0 var(--site-brand-mark-size);
  width: var(--site-brand-mark-size);
  height: var(--site-brand-mark-size);
  place-items: center;
  border: 1px solid rgba(38, 51, 68, 0.14);
  border-radius: 10px;
  background:
    radial-gradient(circle at 32% 24%, rgba(154, 168, 255, 0.34), transparent 42%),
    linear-gradient(145deg, #17181c, #07080a);
  box-shadow:
    0 12px 26px rgba(49, 72, 98, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform-origin: 50% 50%;
  transition:
    transform 0.38s var(--brand-hover-spring, cubic-bezier(0.19, 1, 0.22, 1)),
    filter 0.32s var(--brand-hover-ease, cubic-bezier(0.2, 0.78, 0.22, 1));
  will-change: transform, filter;
}

.brand__mark,
.brand-hover__mark img,
.brand-hover__mark svg,
img.brand-hover__mark {
  display: block;
  width: var(--site-brand-icon-size) !important;
  height: var(--site-brand-icon-size) !important;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(154, 168, 255, 0.32));
  transition: transform 0.38s var(--brand-hover-spring, cubic-bezier(0.19, 1, 0.22, 1));
  will-change: transform;
}

.brand__name,
.brand-hover__text {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: inherit;
  font-family: var(--site-brand-font);
  font-size: var(--site-brand-text-size);
  font-weight: var(--site-brand-text-weight);
  font-stretch: normal;
  line-height: 1;
  letter-spacing: var(--site-brand-text-tracking);
  transform-origin: left center;
  transition:
    transform 0.36s var(--brand-hover-spring, cubic-bezier(0.19, 1, 0.22, 1)),
    text-shadow 0.34s var(--brand-hover-ease, cubic-bezier(0.2, 0.78, 0.22, 1)),
    letter-spacing 0.34s var(--brand-hover-ease, cubic-bezier(0.2, 0.78, 0.22, 1));
  will-change: transform;
}

@media (max-width: 480px) {
  .brand,
  .brand-hover {
    gap: 10px;
  }

  .brand__name,
  .brand-hover__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}