.w3s-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background-color: #000;
  isolation: isolate;
}

.w3s-brand__hero {
  position: relative;
  display: inline-block;
  opacity: 0;
  animation: w3s-brand-fade-in 1s ease-out forwards;
  animation-delay: 0.2s;
  isolation: isolate;
}

@keyframes w3s-brand-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.w3s-brand__title {
  font-family: "Rubik 80s Fade", "Geom", system-ui, sans-serif;
  font-size: clamp(3rem, 9vw, 6rem);
  text-align: center;
  letter-spacing: 0.18em;
  margin: 0;
  padding: 0;
  font-weight: 400;
  line-height: 1;
  position: relative;
  cursor: default;
  color: var(--w3s-green);
  transition: font-family 0.05s ease;
}

.w3s-brand__title::before,
.w3s-brand__title::after {
  content: "WEB3SAFER";
  position: absolute;
  inset: 0;
  display: inline;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.w3s-brand__title::before {
  background: radial-gradient(
    circle 125px at var(--mouse-x, -500px) var(--mouse-y, -500px),
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 17px,
    rgba(255, 255, 255, 0.98) 30px,
    rgba(240, 255, 245, 0.95) 42px,
    rgba(180, 255, 210, 0.9) 58px,
    rgba(74, 255, 184, 0.8) 80px,
    rgba(57, 208, 145, 0.6) 100px,
    transparent 125px
  );
  z-index: 2;
}

.w3s-brand__title::after {
  background: radial-gradient(
    circle 200px at var(--mouse-x, -500px) var(--mouse-y, -500px),
    transparent 0%,
    transparent 96px,
    rgba(57, 208, 145, 0.4) 104px,
    rgba(57, 208, 145, 0.7) 120px,
    rgba(57, 208, 145, 0.8) 136px,
    rgba(57, 208, 145, 0.6) 160px,
    rgba(57, 208, 145, 0.3) 184px,
    transparent 200px
  );
  z-index: 1;
}

.w3s-brand__three {
  color: transparent;
  -webkit-text-stroke: 3px var(--w3s-green);
  -webkit-text-fill-color: transparent;
  font-family: "Rubik Glitch", cursive;
}

/* Tighter glow variant for hero integration */
.w3s-brand__title--hero::before {
  -webkit-background-clip: text;
  background-clip: text;
  background: radial-gradient(
    circle 90px at var(--mouse-x, -500px) var(--mouse-y, -500px),
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 14px,
    rgba(255, 255, 255, 0.98) 24px,
    rgba(240, 255, 245, 0.95) 34px,
    rgba(180, 255, 210, 0.9) 46px,
    rgba(74, 255, 184, 0.8) 60px,
    rgba(57, 208, 145, 0.6) 72px,
    transparent 90px
  );
}

.w3s-brand__title--hero::after {
  -webkit-background-clip: text;
  background-clip: text;
  background: radial-gradient(
    circle 130px at var(--mouse-x, -500px) var(--mouse-y, -500px),
    transparent 0%,
    transparent 70px,
    rgba(57, 208, 145, 0.4) 80px,
    rgba(57, 208, 145, 0.7) 96px,
    rgba(57, 208, 145, 0.8) 108px,
    rgba(57, 208, 145, 0.6) 118px,
    rgba(57, 208, 145, 0.3) 124px,
    transparent 130px
  );
}

.w3s-brand__title.w3s-brand__title--glitching .w3s-brand__three {
  font-family: inherit;
}