/* Hero CTA: a compact action control distinct from the lime-highlighted subhead. */
.hero .hero-subtitle {
  margin-bottom: 0;
}

.hero .hero-actions {
  margin-top: clamp(15px, 1.35vw, 19px);
}

.hero .hero-actions .button-primary {
  width: auto;
  min-height: 48px;
  padding: 0 clamp(22px, 2.2vw, 30px);
  gap: 0.55em;
  border: 2px solid #ccff00;
  border-radius: 2px;
  background: #090a08;
  color: #ccff00;
  box-shadow: none;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 900;
  letter-spacing: 0.1em;
  transform: translateY(0);
  transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.hero .hero-actions .button-primary span {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 140ms ease;
}

.hero .hero-actions .button-primary:hover,
.hero .hero-actions .button-primary:focus-visible {
  border-color: #d9ff40;
  background: #090a08;
  color: #d9ff40;
  transform: translateY(2px);
}

.hero .hero-actions .button-primary:hover span,
.hero .hero-actions .button-primary:focus-visible span {
  transform: translateX(3px);
}

.hero .hero-actions .button-primary:active {
  transform: translateY(3px) scale(0.985);
}

@media (max-width: 720px) {
  .hero .hero-actions {
    align-items: center;
    margin-top: 14px;
  }

  .hero .hero-actions .button-primary {
    width: auto;
    min-height: 46px;
    padding: 0 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-actions .button-primary,
  .hero .hero-actions .button-primary span {
    transition: none;
  }
}