:root {
  --brand-ink: #061127;
  --brand-blue: #1764ff;
  --brand-cyan: #38d8ff;
  --brand-mint: #73f2c5;
}

.brand-v2 {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.brand-v2 .brand-mark {
  display: inline-block;
  width: 41px;
  height: 47px;
  flex: 0 0 auto;
  background: linear-gradient(135deg,var(--brand-cyan),var(--brand-blue) 42%,#8c5cff 72%,var(--brand-mint));
  background-size: 260% 260%;
  -webkit-mask: url('../img/logo-icon.png') center/contain no-repeat;
  mask: url('../img/logo-icon.png') center/contain no-repeat;
  animation: site-brand-flow 6s ease-in-out infinite;
  filter: drop-shadow(0 0 13px rgba(56,216,255,.32));
}

.brand-v2 .brand-name {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .035em;
}

.brand-v2 .brand-name b { color: #fff; }
.brand-v2 .brand-name strong {
  color: transparent;
  background: linear-gradient(100deg,#fff 0%,var(--brand-cyan) 28%,#397eff 55%,var(--brand-mint) 78%,#fff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: site-wordmark-flow 6s linear infinite;
}

.brand-v2.brand-on-light .brand-name b { color: var(--brand-ink); }
.brand-v2.brand-on-light .brand-name strong {
  background-image: linear-gradient(100deg,var(--brand-ink) 0%,var(--brand-blue) 34%,#7958f4 62%,#087f69 82%,var(--brand-ink) 100%);
}

.brand-v2.brand-compact .brand-mark { width: 34px; height: 39px; }
.brand-v2.brand-compact .brand-name { font-size: 16px; }

@keyframes site-brand-flow {
  0%,100% { background-position: 0% 50%; transform: translateY(0) rotate(0); }
  50% { background-position: 100% 50%; transform: translateY(-2px) rotate(1deg); }
}

@keyframes site-wordmark-flow { to { background-position: 220% center; } }

@media (max-width:760px) {
  .brand-v2 .brand-mark { width: 34px; height: 39px; }
  .brand-v2 .brand-name { font-size: 16px; }
}

@media (prefers-reduced-motion:reduce) {
  .brand-v2 .brand-mark,.brand-v2 .brand-name strong { animation: none!important; }
}