/* ========================================
   CARD COMPONENTS
   Reusable card styles
   ======================================== */

.card, .about-inner-card, .benefit-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.card:hover, .about-inner-card:hover, .benefit-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.about-inner-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.about-inner-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-blue);
}

.about-inner-card h3 {
  color: var(--accent-blue-light);
  font-weight: 600;
}

.about-inner-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}