:root {
  --surface-card-bg: linear-gradient(145deg, rgba(25, 25, 25, 0.96), rgba(17, 17, 17, 0.98));
  --surface-card-border: rgba(240, 237, 232, 0.12);
  --surface-card-separator: rgba(240, 237, 232, 0.08);
  --surface-card-inset: rgba(255, 255, 255, 0.025);
  --surface-card-shadow: 0 22px 60px rgba(0, 0, 0, 0.16);
  --surface-card-hover-border: rgba(212, 168, 83, 0.16);
  --surface-card-hover-glow: 0 18px 46px rgba(0, 0, 0, 0.22), 0 10px 28px rgba(212, 168, 83, 0.04);
}

.card-grid-surface {
  display: grid;
  gap: 1px;
  background: var(--surface-card-separator);
  border: 1px solid var(--surface-card-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--surface-card-inset), var(--surface-card-shadow);
}

.card-grid-surface__item {
  background: var(--surface-card-bg);
  position: relative;
  overflow: hidden;
  transition: var(--ease);
  box-shadow: inset 0 1px 0 var(--surface-card-inset);
}

.card-grid-surface__item:hover {
  background: var(--card-lift);
  box-shadow: inset 0 0 0 1px var(--surface-card-hover-border), var(--surface-card-hover-glow);
}

.surface-card {
  background: var(--surface-card-bg);
  border-color: var(--surface-card-border);
  box-shadow: inset 0 1px 0 var(--surface-card-inset), var(--surface-card-shadow);
  transition: var(--ease);
}

.surface-card:hover {
  background: var(--card-lift);
  border-color: var(--surface-card-hover-border);
  box-shadow: inset 0 0 0 1px var(--surface-card-hover-border), var(--surface-card-hover-glow);
}

.card-grid-surface__item.fade-up,
.surface-card.fade-up {
  transition: opacity 0.7s ease, transform 0.7s ease, background var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.framework-card--featured.surface-card {
  background: linear-gradient(135deg, rgba(212, 168, 83, 0.045), rgba(18, 18, 18, 0.96));
  border-color: rgba(212, 168, 83, 0.18);
}

.framework-card--featured.surface-card:hover {
  border-color: rgba(212, 168, 83, 0.2);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 83, 0.16), var(--surface-card-hover-glow);
}