/* ================= Vex branding ================= */
html{background:#02040c}
body,body.dashboard{
  background:
    linear-gradient(rgba(2,4,12,.48),rgba(2,4,12,.70)),
    url(/img/bg.webp) center/cover fixed,
    #02040c}
@media(max-width:700px){
  body,body.dashboard{background:linear-gradient(rgba(2,4,12,.5),rgba(2,4,12,.72)),url(/img/bg-sm.webp) center/cover scroll,#02040c}
}
.sec,.join{background:rgba(5,8,20,.58)}
footer{background:rgba(6,9,18,.9)}
.brand img,.blogo{height:38px;width:auto;display:block;filter:drop-shadow(0 0 12px rgba(176,190,220,.35))}
.brand .bt{letter-spacing:.01em}
.hero-logo{display:block;width:clamp(84px,11vw,124px);height:auto;margin:0 auto 22px;filter:drop-shadow(0 10px 36px rgba(176,190,220,.35));animation:float 5s ease-in-out infinite}
.hero::before{background:radial-gradient(ellipse at 50% 120%,rgba(176,190,220,.2),transparent 60%),radial-gradient(ellipse at 50% 0,rgba(120,140,200,.12),transparent 55%),radial-gradient(ellipse at center,transparent 55%,rgba(2,4,12,.7) 100%)}
.hero{background-image:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px)}
.botav{padding:0;background:#05070f;border:1px solid rgba(176,190,220,.35)}
.botav img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.brand img,.blogo{height:30px}.hero-logo{width:84px;margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.hero-logo{animation:none}}

/* ===== animated logo on hover ===== */
.brand{transition:transform .25s}
.brand .blogo,.brand img{transition:filter .3s,transform .3s;transform-origin:50% 55%;will-change:transform}
.brand:hover .blogo,.brand:focus-visible .blogo{animation:logoSpin 1s cubic-bezier(.45,1.35,.5,1) both,logoGlow 1.6s ease-in-out 1s infinite;filter:drop-shadow(0 0 18px rgba(176,190,220,.75))}
.brand:active .blogo{transform:scale(.92)}
@keyframes logoSpin{0%{transform:rotate(0) scale(1)}35%{transform:rotate(-24deg) scale(1.22)}100%{transform:rotate(360deg) scale(1.1)}}
@keyframes logoGlow{50%{filter:drop-shadow(0 0 30px rgba(190,205,240,1)) brightness(1.2)}}
.brand .bt{background-size:220% 100%;background-position:100% 0}
.brand:hover .bt{background-image:linear-gradient(100deg,#fff 35%,#a9b6d3 50%,#fff 65%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:btShine 1.1s linear infinite}
@keyframes btShine{to{background-position:-120% 0}}
.hero-logo{transition:transform .5s cubic-bezier(.3,1.4,.5,1),filter .4s;cursor:pointer}
.hero-logo:hover{animation:none;transform:rotate(360deg) scale(1.12);filter:drop-shadow(0 12px 50px rgba(190,205,240,.7))}
@media(prefers-reduced-motion:reduce){.brand:hover .blogo,.brand:hover .bt,.hero-logo:hover{animation:none!important;transform:none}}