/* ==========================================================================
   COMPONENT: Cards
   ========================================================================== */

.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.card-padded{
  padding: var(--space-5);
}

/* ---- Icon tile used inside cards (service cards, feature cards) ---- */
.icon-tile{
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-softer);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}