/* Reusable component styles shared across pages */
.feature-card {
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    min-height: 420px;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.team-card {
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.calculator-card {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.calculator-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.compliance-card {
    transition: all 0.3s ease;
    border-left: 4px solid #12bfba;
}

.compliance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.benefit-item {
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateX(8px);
}

.faq-item {
    transition: all 0.3s ease;
}

.faq-item:hover {
    background-color: #f0fdfa;
}

.regulation-badge {
    background: linear-gradient(135deg, #d6f5f4 0%, #e0f2fe 100%);
    transition: all 0.3s ease;
}

.regulation-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(18, 191, 186, 0.2);
}