.main-action {
  color: #fffaf0;
  background: linear-gradient(135deg, #17241fdb, #07100fdb);
  border: 1px solid #dcb767b8;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.35rem;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px #00000038, 0 1px 0 #ffffff1f inset;
  transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.main-action:hover {
  color: #07100f;
  background: #dcb767;
  border-color: #e7c97f;
  box-shadow: 0 16px 36px #0000004d;
}

.main-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (width <= 480px) and (height <= 760px) {
  .main-action {
    min-height: 48px;
    padding: 0.78rem 1.15rem;
  }
}