*{box-sizing:border-box}
:root{--bg:#0F0F0F;--fg:#F5F3ED;--lime:#B9F227}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:Manrope,Arial,sans-serif
}
.stage{
  position:relative;width:100vw;height:100svh;overflow:hidden;
  display:grid;place-items:center;background:var(--bg)
}
.brand{
  position:relative;z-index:2;display:flex;align-items:baseline;
  white-space:nowrap;user-select:none;
  transform:translate3d(var(--x,0px),var(--y,0px),0) rotate(var(--r,0deg));
  transition:transform .14s ease-out
}
.brand span{
  font-size:clamp(88px,20vw,360px);
  font-weight:800;line-height:.72;letter-spacing:-.105em;color:var(--fg)
}
.brand i{
  width:clamp(20px,3.4vw,62px);aspect-ratio:1;border-radius:50%;
  background:var(--lime);margin-left:clamp(8px,1.2vw,20px);
  transform:scale(var(--s,1));
  box-shadow:0 0 var(--blur,0px) rgba(185,242,39,.22);
  transition:transform .18s ease,box-shadow .18s ease
}
.glow{
  position:absolute;width:42vw;height:42vw;border-radius:50%;
  background:radial-gradient(circle,rgba(185,242,39,.09),transparent 65%);
  left:var(--gx,50%);top:var(--gy,50%);
  transform:translate(-50%,-50%);
  filter:blur(12px);pointer-events:none
}
.meta{
  position:absolute;left:0;right:0;bottom:24px;text-align:center;
  color:rgba(245,243,237,.28);font-size:9px;font-weight:800;letter-spacing:.18em
}
@media(max-width:700px){
  .brand span{font-size:clamp(68px,21vw,124px)}
  .brand i{width:4vw;margin-left:7px}
}
@media(prefers-reduced-motion:reduce){
  .brand,.brand i{transition:none}
}