.logo b {
  position: relative;
  color: #080d18;
}

.logo b i {
  display: inline-block;
  margin-left: 1px;
  color: #1677ff;
  font-size: .95em;
  font-style: normal;
  transform: skewX(-14deg) scaleX(.72);
}

.logo span { color: #4c84cd; }

footer .logo b { color: #fff; }
footer .logo span { color: #72aaff; }

/* Primary logo treatment, based on the supplied reference. */
header .logo {
  min-width: 112px;
  padding: 8px 11px 7px;
  border-radius: 5px;
  background: linear-gradient(135deg, #002a70, #075be5);
  box-shadow: 0 4px 12px rgba(0, 45, 118, .2);
}

header .logo b { color: #fff; }
header .logo b i {
  color: #8cc7ff;
  text-shadow: 0 0 8px rgba(140, 199, 255, .65);
}
header .logo span { color: #dcecff; }

/* Watermark in the blue hero background. */
.hero::before { content: none; }

.hero-generator-wrap {
  position: absolute;
  z-index: 1;
  right: -3%;
  bottom: -5%;
  width: min(64%, 780px);
}

.hero-generator {
  display: block;
  width: 100%;
  height: auto;
}

.generator-brand {
  position: absolute;
  top: 42%;
  right: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #061a42;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  line-height: .75;
  transform: skewX(-4deg);
}

.generator-brand b { font-size: clamp(32px, 4.3vw, 66px); letter-spacing: -6px; }
.generator-brand i { color: #1687ff; font-style: normal; }
.generator-brand em { margin-top: 8px; color: #1687ff; font-size: clamp(10px, 1.15vw, 17px); font-style: normal; letter-spacing: 2px; }

@media (max-width: 900px) {
  .hero-generator-wrap { right: -23%; bottom: -1%; width: 88%; opacity: .65; }
  .generator-brand { right: 23%; }
}