/* Hero on Thomas's blue artwork (2026-09-30): no navbar, the logo centred on
   top, white type over a deep-blue shade, and a fade into the cream page at
   the bottom so the phone mock-up still lands on the next section. */
.hero { padding-top: 48px; }
.hero__logo { width: 96px; height: 96px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.hero__bg img { object-position: 50% 40%; }
.hero__shade {
  background: linear-gradient(180deg,
    rgba(8, 26, 48, .55) 0%,
    rgba(8, 26, 48, .35) 38%,
    rgba(8, 26, 48, .12) 60%,
    rgba(245, 240, 232, 0) 68%,
    rgba(245, 240, 232, .85) 90%,
    var(--c-page) 100%);
}
.hero__title { color: #fff; }
.hero__title em { color: #F0D29A; }
.hero__sub p { color: rgba(255, 255, 255, .86); }
.hero__tagline {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: none;
  --bd: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hero__new { background: #F0D29A; color: var(--c-ink); }
.btn--white { background: #fff; color: var(--c-ink); box-shadow: 0 12px 30px rgba(8, 26, 48, .28); }
.btn--frost {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@media (max-width: 809.98px) {
  .hero { padding-top: 32px; }
  .hero__logo { width: 80px; height: 80px; }
}