.container {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.pricecard {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricecard:hover {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.15)!important;
}

.kpi-card {
    transition: all 0.2s ease;
    border: 1px solid #8ee3f2!important;
}

.kpi-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,.08)!important;
}

.payment-option:hover {
    background-color: #f8f9fa;
    border-color: #0d6efd!important;
}

.cursor-pointer {
    cursor: pointer;
}

/* Ribbon for active plan */
.ribbon-wrapper {
    position: absolute;
    top: -2px;
    right: 10px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-top-right-radius: 1rem;
    z-index: 10;
}    
.badge-active {
    position: absolute;
    top: 45px;
    right: -40px;
    width: 200px;
    background-color: #198754;
    color: #fff;
    padding: 5px 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}