
.top{display:flex;align-items:center;gap:14px;padding:22px 0 4px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8.25px}
.brand-link{display:flex;align-items:center;gap:8.25px}
.bear{width:36px;height:36px;color:var(--neon);flex:none;
  filter:drop-shadow(0 0 12px var(--glow));animation:fl 5.5s ease-in-out infinite;
  transform-origin:center;transition:transform 350ms ease}
.bear svg{display:block;width:100%;height:100%}
.brand:hover .bear{transform:rotateY(360deg)}
.brand .nm{
  font-family:'Sora',sans-serif;font-weight:800;font-size:21px;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(96deg,#fff,#b9a8f0);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.brand .ep{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border-left:1px solid var(--line2);padding-left:11px;margin-left:3px;
}

.lang{display:flex;align-items:center;gap:0;margin-left:10px;padding-left:10px;
  border-left:1px solid rgba(168,150,240,.16)}
.lang .lg{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#6f688f;background:none;border:none;
  padding:4px 7px;cursor:pointer;transition:color .18s;position:relative;display:inline-block}
.lang .lg+.lg::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:9px;background:rgba(168,150,240,.2)}
.lang .lg:hover{color:var(--ink)}
.lang .lg.on{color:var(--neon)}

.top-sp{flex:1}

.cta-short{display:none}

@media (max-width:720px){
  .top{gap:10px;padding:16px 0 4px;flex-wrap:nowrap}
  .brand .nm{font-size:19px}
  .brand .ep{padding-left:9px;margin-left:2px}

  .top .pill{display:none}
  .cta-full{display:none}
  .cta-short{display:inline}
  .top .btn.pri{
    flex:none;padding:6px 11px;font-size:12px;border-radius:9px;
    box-shadow:0 3px 10px rgba(139,92,246,.2);
  }
  .top .btn.pri:hover{box-shadow:0 4px 12px rgba(139,92,246,.24)}

  .brand{min-width:0;flex:0 1 auto}
  .brand .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .lang{flex:none;margin-left:6px;padding-left:6px}
}
@media (max-width:360px){

  .brand .ep{display:none}
  .top{gap:6px}
  .lang .lg{padding:4px 4px;font-size:9.5px}
  .lang{margin-right:4px}
  .top .btn.pri{padding:6px 9px;font-size:11.5px;margin-left:2px}
}
@media (max-width:400px){
  .bear{width:30px;height:30px}
  .brand .nm{font-size:17px}
  .lang{margin-left:6px;padding-left:6px}
  .lang .lg{padding:4px 5px}
}
