:root { --lab-yellow:#FFD23F; --lab-pink:#FF6B9A; --lab-blue:#4DA3FF; --lab-ink:#16120E; --lab-paper:#FFFDF6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .3rem; }
.hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .7rem 1rem;
  border: 3px solid var(--lab-ink);
  border-radius: 8px;
  background: var(--lab-paper);
  color: var(--lab-ink);
  box-shadow: 4px 4px 0 var(--lab-ink);
  font: 700 1rem/1.2 var(--font);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.hero-action--primary { background: var(--lab-pink); }
.hero-action--secondary { background: var(--lab-blue); }
.hero-action:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--lab-ink); }
.hero-action:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--lab-ink); }

@media (max-width: 560px) {
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-action { padding: .65rem .6rem; font-size: .91rem; }
}