.nav .menu li a.has-flip { overflow: visible; }
.nav .menu li a.has-flip,
.nav .menu li:hover a.has-flip { opacity: 1 !important; }
.nav .menu li a.has-flip .flip-span{
  position: relative;
  display: inline-block;
  line-height: 1.2;
  overflow: hidden;
  vertical-align: bottom;
}
.nav .menu li a.has-flip .flip-span .flip-text{
  display: inline-block;
  transition: transform .38s cubic-bezier(0.55, 0.06, 0.22, 1);
  will-change: transform;
}
.nav .menu li a.has-flip .flip-span::after{
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  color: rgb(146, 208, 80);
  -webkit-text-fill-color: rgb(146, 208, 80);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-weight: 900;
  font-size: 1.18em;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(146, 208, 80, 0.12);
  transition: top .38s cubic-bezier(0.55, 0.06, 0.22, 1);
  will-change: top;
  white-space: nowrap;
  pointer-events: none;
}
/* hover 状态挂到 li 上，避免磁铁按钮位移导致 a:hover 失效 */
.nav .menu li:hover a.has-flip .flip-span .flip-text{
  transform: translateY(-110%);
}
.nav .menu li:hover a.has-flip .flip-span::after{
  top: 0;
}
/* FlowPix 黑底按钮：原有 .flowpix-btn span 规则会把所有后代 span 做成透明填充（绿渐变），这里强制副本用导航翻转同色 */
.nav .menu li a.flowpix-btn.has-flip .flip-span-dark::after{
  color: rgb(146, 208, 80);
  -webkit-text-fill-color: rgb(146, 208, 80);
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-weight: 900;
  font-size: 1.18em;
  letter-spacing: 0.02em;