/* ===============================
  FEATURE CARDS - MODERN
================================*/
.feature-card {
    background: var(--surface);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    height: 100%;
    transition: all var(--transition-normal);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-600));
    transform: scaleX(0);
    transition: transform var(--transition-normal);
    transform-origin: left;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-300);
}

.feature-card i {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary-500);
    transition: all var(--transition-normal);
}

.feature-card:hover i {
    color: var(--accent-600);
    transform: scale(1.1);
}

.icon-primary { color: var(--primary-500); }
.icon-success { color: var(--success); }
.icon-info { color: var(--info); }
.icon-warning { color: var(--warning); }