.hero {
  min-height: 100vh;
  padding: 120px 24px 95px;
  place-items: center;
}

.hero::after {
  inset: 7% 8%;
  border-radius: 38px;
  background:
    linear-gradient(180deg, rgba(3, 10, 23, .18) 0%, rgba(3, 10, 23, .48) 48%, rgba(3, 10, 23, .72) 100%),
    radial-gradient(circle at 50% 62%, rgba(212, 175, 55, .18), transparent 22%),
    var(--hero-image);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  box-shadow: 0 38px 110px rgba(0, 0, 0, .48);
}

.hero-inner {
  width: min(980px, 92vw);
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0;
  padding-top: 8vh;
}

.hero .eyebrow {
  position: relative;
  display: inline-block;
  max-width: min(920px, 92vw);
  color: #ffe88b;
  font-size: clamp(2.1rem, 7vw, 5.9rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: none;
  text-shadow:
    0 0 8px rgba(255, 232, 139, .78),
    0 0 20px rgba(212, 175, 55, .70),
    0 0 42px rgba(212, 175, 55, .48),
    0 8px 28px rgba(0, 0, 0, .70);
  filter: drop-shadow(0 0 22px rgba(212, 175, 55, .50));
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid rgba(255, 232, 139, .95);
  animation: heroTyping 5.8s steps(34, end) infinite, heroCursor .78s step-end infinite, heroGlow 2.6s ease-in-out infinite;
}

.hero .eyebrow::after {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 139, .95), transparent);
  box-shadow: 0 0 24px rgba(212, 175, 55, .8);
  opacity: .85;
}

.hero-subtitle-hidden {
  display: none !important;
}

.hero .actions {
  margin-top: clamp(70px, 13vh, 150px);
  gap: 22px;
}

.hero .actions .liquid-btn,
.hero .actions .ghost-btn {
  min-width: 230px;
  min-height: 62px;
  font-size: 1.02rem;
  border-radius: 999px;
}

.hero .actions .liquid-btn {
  box-shadow:
    0 18px 45px rgba(212, 175, 55, .38),
    0 0 32px rgba(212, 175, 55, .18);
}

.hero .actions .ghost-btn {
  background: rgba(10, 16, 25, .38);
  border-color: rgba(255, 232, 139, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  backdrop-filter: blur(12px);
}

@keyframes heroTyping {
  0% { max-width: 0; }
  12% { max-width: 0; }
  48% { max-width: min(920px, 92vw); }
  78% { max-width: min(920px, 92vw); }
  100% { max-width: 0; }
}

@keyframes heroCursor {
  0%, 49% { border-color: rgba(255, 232, 139, .98); }
  50%, 100% { border-color: transparent; }
}

@keyframes heroGlow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(212, 175, 55, .42)); }
  50% { filter: drop-shadow(0 0 34px rgba(212, 175, 55, .78)); }
}

@media (max-width: 820px) {
  .hero {
    padding: 90px 14px 70px;
  }

  .hero::after {
    inset: 8% 3%;
    border-radius: 28px;
  }

  .hero-inner {
    min-height: 58vh;
    padding-top: 5vh;
  }

  .hero .eyebrow {
    font-size: clamp(1.9rem, 11vw, 3.6rem);
    white-space: normal;
    border-right: none;
    animation: heroGlow 2.6s ease-in-out infinite;
  }

  .hero .actions {
    margin-top: 62px;
    width: min(360px, 92vw);
  }

  .hero .actions .liquid-btn,
  .hero .actions .ghost-btn {
    width: 100%;
    min-width: 0;
  }
}