.feature-card {
  position: relative;
  overflow: hidden;
  border-right-color: #5b5334;
  border-bottom-color: #5b5334;
  background: linear-gradient(145deg, #101b11, #09110a);
  box-shadow:
    inset 0 1px 0 #e8b84d1c,
    inset 0 -18px 35px #0003,
    0 12px 28px #0003;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.feature-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #f4cf761c 0%, transparent 22%, transparent 78%, #9c6b2212 100%);
  opacity: .65;
  transition: opacity .28s ease;
}

.feature-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -45%;
  left: -85%;
  width: 48%;
  height: 190%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff1b94a, transparent);
  transform: rotate(18deg);
  transition: left .55s ease;
}

.feature-card > * { position: relative; z-index: 1; }

.feature-card.featured {
  background: linear-gradient(145deg, #223622, #101a11);
  box-shadow: inset 0 1px 0 #e8b84d38, inset 0 -18px 35px #0003, 0 12px 28px #0004;
}

.feature-card:hover {
  z-index: 2;
  transform: translateY(-7px);
  border-color: #f1c760;
  background: linear-gradient(145deg, #1b2d1b, #101a11);
  box-shadow:
    inset 0 0 0 1px #ffe0949c,
    inset 0 1px 16px #e8b84d26,
    0 0 24px #e8b84d30,
    0 22px 44px #0008;
}

.feature-card:hover::before { opacity: 1; }
.feature-card:hover::after { left: 145%; }

@media (hover: none) {
  .feature-card:active {
    border-color: #d5aa53;
    box-shadow: inset 0 0 0 1px #ffe09470, 0 12px 28px #0005;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card::before, .feature-card::after { transition: none; }
}