/* Premium tactile / embossed UI layer. Loaded after the base stylesheet so it cannot be hidden by cached base rules. */
.hero h2,
h2,
h3 {
  text-shadow:
    0 -1px 0 rgba(255,255,255,.16),
    0 1px 0 rgba(0,0,0,.62),
    0 2px 0 rgba(0,0,0,.34),
    0 7px 16px rgba(0,0,0,.42),
    0 16px 30px rgba(0,0,0,.24) !important;
  filter: drop-shadow(0 0 12px rgba(105,167,255,.10));
}

.hero h2 {
  position: relative;
  letter-spacing: -2.8px;
}

.tabs button {
  position: relative;
  border: 1px solid rgba(255,255,255,.17) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.055)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.20),
    0 2px 0 rgba(0,0,0,.25),
    0 7px 15px rgba(0,0,0,.25) !important;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}

.tabs button::before {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 2px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  pointer-events: none;
}

.tabs button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 4px 0 rgba(0,0,0,.22),
    0 11px 22px rgba(0,0,0,.30) !important;
}

.tabs button:active {
  transform: translateY(2px) scale(.985) !important;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.30),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 1px 2px rgba(0,0,0,.22) !important;
}

.tabs button.active {
  background: linear-gradient(180deg, rgba(132,181,255,.42), rgba(79,112,194,.22)) !important;
  border-color: rgba(157,198,255,.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 3px 0 rgba(0,0,0,.22),
    0 9px 20px rgba(71,119,220,.28) !important;
}

.tabs button.active:active {
  transform: translateY(2px) scale(.985) !important;
}

.primary,
.secondary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 3px 0 rgba(0,0,0,.20),
    0 8px 20px rgba(0,0,0,.20) !important;
}

.primary:active,
.secondary:active {
  transform: translateY(2px) scale(.985) !important;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(255,255,255,.10),
    0 1px 2px rgba(0,0,0,.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  .tabs button,
  .primary,
  .secondary { transition: none !important; }
}