<div class="stage-13">
  <div class="card-neu">
    <div class="neu-icon">🔮</div>
    <h4 style="color: #3a3a4a">Neumorphic</h4>
    <p style="color: #8a8898; font-size: 11px; line-height: 1.5; margin-top: 4px">
      Soft extrusion from the surface. Hover to push it inward.
    </p>
  </div>
</div>

.card-neu {
  width: 200px;
  padding: 22px;
  border-radius: 20px;
  background: #e0e0e8;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.18),
    -6px -6px 14px rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.3s;
}

.card-neu:hover {
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.15),
    -2px -2px 6px rgba(255, 255, 255, 0.6),
    inset 3px 3px 8px rgba(0, 0, 0, 0.12),
    inset -3px -3px 8px rgba(255, 255, 255, 0.6);
}

.neu-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e0e0e8;
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.15),
    -4px -4px 8px rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.card-neu h4 {
  font-size: 13px;
  font-weight: 700;
  color: #3a3a4a;
  margin-bottom: 4px;
}

.card-neu p {
  font-size: 11px;
  color: #8a8898;
  line-height: 1.5;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-13 {
  background: #e0e0e8;
}