.site-header {
  margin: auto;
  padding: 28px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.logo {
  font-size: 1.4rem;
  font-weight: 700;
}

/* BRAND WRAPPER */
.brand {
  display: inline-flex;
  margin-left: 4px;
}

/* EACH LETTER */
.brand span {
  font-weight: 700;
  background: linear-gradient(
    90deg,
    #ec4899,        /* pink */
    #2563eb         /* your current blue */
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  animation: gradientMove 3s ease-in-out infinite,
             letterFade 0.6s ease forwards;
  opacity: 0;
}

/* LETTER DELAY (one by one) */
.brand span:nth-child(1) { animation-delay: 0.1s; }
.brand span:nth-child(2) { animation-delay: 0.2s; }
.brand span:nth-child(3) { animation-delay: 0.3s; }
.brand span:nth-child(4) { animation-delay: 0.4s; }
.brand span:nth-child(5) { animation-delay: 0.5s; }
.brand span:nth-child(6) { animation-delay: 0.6s; }
.brand span:nth-child(7) { animation-delay: 0.7s; }
.brand span:nth-child(8) { animation-delay: 0.8s; }
.brand span:nth-child(9) { animation-delay: 0.9s; }

/* GRADIENT ANIMATION */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* LETTER APPEAR ANIMATION */
@keyframes letterFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* LINK */
.site-header a {
  text-decoration: none;
  color: black;
}
.back a {
  text-decoration: none;
  font-weight: 600;
  color: #2563eb;
}