:root{
  --bg1:#071020;
  --bg2:#08122b;
  --accent:#6ee7b7;
  --glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:grid;place-items:center;min-height:100vh;background:radial-gradient(1200px 600px at 10% 10%, rgba(110,231,183,0.06), transparent),linear-gradient(135deg,var(--bg1),var(--bg2));font-family:Inter,system-ui,'Segoe UI',Roboto,Arial;color:#fff}

.brand{display:inline-block;position:relative;text-decoration:none;padding:22px;border-radius:16px;transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s;outline:none}
.brand:focus-visible{box-shadow:0 6px 30px rgba(6,18,32,.6),0 0 0 4px rgba(110,231,183,.12);border-radius:18px}
.brand img{width:300px;max-width:62vw;display:block;border-radius:10px;filter:drop-shadow(0 24px 48px rgba(2,6,23,.6));transform:translateZ(0);animation:pop .85s cubic-bezier(.2,.9,.3,1) both}
.brand:hover{transform:translateY(-8px)}
.brand:hover img{transform:scale(1.06) rotate(-.6deg)}

@keyframes pop{0%{opacity:0;transform:scale(.65)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}

.brand::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;height:520px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(110,231,183,.12), rgba(110,231,183,.03) 28%, transparent 55%);z-index:-1;filter:blur(32px);opacity:.95;animation:spin 16s linear infinite}
@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}

/* Ripple element created by JS */
.brand .ripple{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);width:10px;height:10px;border-radius:999px;background:radial-gradient(circle,#6ee7b7 0%, rgba(110,231,183,.18) 40%, transparent 70%);pointer-events:none;opacity:.9}
.brand .ripple.anim{animation:ripple 800ms cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:.9}80%{transform:translate(-50%,-50%) scale(18);opacity:.18}100%{opacity:0}}

/* subtle parallax transform applied to image */
.brand.has-parallax img{transition:transform .12s linear}

@media (max-width:540px){
  .brand img{width:170px}
  .brand::before{width:340px;height:340px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .brand, .brand img, .brand::before{animation:none;transition:none}
}