@property --nf-pill-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

.nf-brand-pill {
  --nf-pill-angle: 0deg;
  position: relative;
  display: inline-block;
  padding: 1.6px;
  border-radius: 60px;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.42));
  transform: perspective(620px);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.nf-brand-pill::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: 1.6px; border-radius: inherit;
  background: conic-gradient(from var(--nf-pill-angle),
    rgba(0,212,255,.16) 0deg,
    rgba(0,212,255,.16) 250deg,
    rgba(0,212,255,.75) 300deg,
    #a8eeff 325deg,
    rgba(0,212,255,.75) 348deg,
    rgba(0,212,255,.16) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: nf-pill-neon 3.6s linear infinite;
}
.nf-brand-pill::before {
  content: '';
  position: absolute; inset: -2px; z-index: 0; border-radius: inherit;
  background: conic-gradient(from var(--nf-pill-angle),
    rgba(0,212,255,.16) 0deg,
    rgba(0,212,255,.16) 250deg,
    rgba(0,212,255,.75) 300deg,
    #a8eeff 325deg,
    rgba(0,212,255,.75) 348deg,
    rgba(0,212,255,.16) 360deg);
  filter: blur(5px); opacity: .42;
  animation: nf-pill-neon 3.6s linear infinite;
}
.nf-brand-pill__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 13px;
  border-radius: inherit; background: #fff;
}
.nf-brand-pill .nf-brand-pill__mark { display: block; width: auto; height: 25px; }
.nf-brand-pill .nf-brand-pill__word { display: block; width: auto; height: 20px; }
.flow-nav-brand:hover .nf-brand-pill,
.case-brand:hover .nf-brand-pill,
.blog-brand:hover .nf-brand-pill { transform: perspective(620px) translateY(-1px) rotateX(2deg); }

@keyframes nf-pill-neon { to { --nf-pill-angle: 360deg; } }

@media (max-width: 520px) {
  .nf-brand-pill__inner { gap: 8px; padding: 7px 13px 7px 11px; }
  .nf-brand-pill .nf-brand-pill__mark { height: 22px; }
  .nf-brand-pill .nf-brand-pill__word { display: block; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .nf-brand-pill::before, .nf-brand-pill::after { animation: none; }
  .nf-brand-pill { transition: none; }
}