.quiet-home .q-action-primary {
  --action-fill: linear-gradient(115deg, #214aa6 0%, #3565c4 56%, #2954ad 100%);
  --action-fill-hover: linear-gradient(115deg, #1b408f 0%, #2e5bb5 56%, #234a9c 100%);
  --action-border: #6388d1;
  --action-border-hover: #89a8e5;
  --action-highlight: rgb(214 229 255 / 25%);
  --action-shadow: 0 4px 12px rgb(5 18 46 / 20%);
  --action-shadow-hover: 0 7px 18px rgb(5 18 46 / 25%);
}
.quiet-home .q-action-secondary {
  --action-fill: linear-gradient(115deg, #192d4c 0%, #29486f 58%, #223d61 100%);
  --action-fill-hover: linear-gradient(115deg, #203957 0%, #32547c 58%, #29486d 100%);
  --action-border: #5d769d;
  --action-border-hover: #8da8cc;
  --action-highlight: rgb(211 228 255 / 16%);
  --action-shadow: 0 3px 9px rgb(5 18 46 / 12%);
  --action-shadow-hover: 0 5px 14px rgb(5 18 46 / 20%);
}
.quiet-home :is(.nav-actions, .hero-actions) .q-action {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  gap: 8px;
  border: 1px solid var(--action-border);
  border-radius: 8px;
  background: var(--action-fill);
  box-shadow: inset 0 1px 0 var(--action-highlight), inset 0 -1px 0 rgb(5 18 46 / 18%), var(--action-shadow);
  color: #f5f8ff;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  translate: none;
  transform: none;
  transition: none;
}
.quiet-home :is(.nav-actions, .hero-actions) .q-action::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(110deg, transparent, rgb(231 242 255 / 16%), transparent);
  opacity: 0;
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
  transition: none;
}
.quiet-home .hero-actions .q-action { min-height: 48px; padding: 13px 22px; gap: 14px; }
.quiet-home :is(.nav-actions, .hero-actions) .q-action:is(:hover, :active, :focus-visible) {
  color: #f5f8ff;
  text-decoration: none;
  translate: none;
  transform: none;
  box-shadow: inset 0 1px 0 var(--action-highlight), inset 0 -1px 0 rgb(5 18 46 / 18%), var(--action-shadow);
}
.quiet-home :is(.nav-actions, .hero-actions) .q-action:focus-visible { outline: 2px solid #bdd2ff; outline-offset: 4px; }
.quiet-home :is(.nav-actions, .hero-actions) .q-action svg { flex-shrink: 0; translate: none; transform: none; transition: none; }
@media (hover: hover) {
  .quiet-home :is(.nav-actions, .hero-actions) .q-action:hover { background: var(--action-fill-hover); border-color: var(--action-border-hover); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .quiet-home :is(.nav-actions, .hero-actions) .q-action { transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out; }
  .quiet-home :is(.nav-actions, .hero-actions) .q-action svg { transition: translate 200ms ease-out; }
  .quiet-home :is(.nav-actions, .hero-actions) .q-action:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--action-highlight), inset 0 -1px 0 rgb(5 18 46 / 18%), var(--action-shadow-hover);
  }
  .quiet-home .hero-actions .q-action:hover { transform: translateY(-2px); }
  .quiet-home :is(.nav-actions, .hero-actions) .q-action:hover svg { translate: 2px 0; }
  .quiet-home :is(.nav-actions, .hero-actions) .q-action:hover::before {
    opacity: 1;
    transform: translateX(360%) skewX(-18deg);
    transition: transform 600ms ease-out, opacity 120ms ease-out;
  }
  .quiet-home :is(.nav-actions, .hero-actions) .q-action:active { transform: translateY(0); }
}
@media (max-width: 700px) {
  .quiet-home .nav-actions .q-action { padding-inline: 10px; gap: 6px; }
}
@media (max-width: 600px) {
  .quiet-home .hero-actions .q-action { padding-inline: 12px; gap: 8px; }
}
@media (max-width: 360px) {
  .quiet-home .hero-actions .q-action { padding-inline: 10px; gap: 6px; }
}