.hero {
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(232,179,65,.15), transparent 60%),
    linear-gradient(180deg, #0a0a0f, #14141d);
  padding: 80px 20px 40px;
  overflow: hidden;
}
.hero__char { position: absolute; bottom: 0; max-height: 70%; opacity: .35; pointer-events: none; }
.hero__char--left { left: 0; }
.hero__char--right { right: 0; }

.hero__inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.hero__logo img { margin: 0 auto; max-height: 130px; }
.hero__subtitle {
  margin: 24px 0 32px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  background: linear-gradient(90deg, var(--cpx-gold-light), var(--cpx-gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: .01em;
}
.hero__cta { font-size: 15px; padding: 16px 32px; }