/* ========================================
   PRIMARY CTA
   Example: Request Demo
======================================== */

.cta-primary {
    cursor: pointer;
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease !important;
}

.cta-primary:hover {
    transform: translateY(-3px) !important;
    background: #2673B9 !important;

    box-shadow:
        0 15px 30px rgba(47, 128, 201, 0.30) !important;
}

.cta-primary:active {
    transform: translateY(0) scale(0.97) !important;
}


/* ========================================
   SECONDARY CTA
   Example: Explore the Platform
======================================== */

.cta-secondary {
    cursor: pointer;
    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;
}

.cta-secondary:hover {
    transform: translateY(-3px) !important;
    background: #F4F9FD !important;
    border-color: #2F80C9 !important;

    box-shadow:
        0 10px 22px rgba(20, 30, 50, 0.10) !important;
}

.cta-secondary:active {
    transform: translateY(0) scale(0.97) !important;
}


/* ========================================
   TEXT CTA
   Example: Explore the Platform →
======================================== */

.cta-link {
    position: relative;
    display: inline-block;

    color: #1479c9;

    border-bottom: none !important;
    text-decoration: none !important;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        color 0.22s ease;
}

.cta-link::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -4px;

    width: 100%;
    height: 2px;

    background: #1479c9;

    transform: scaleX(1);
    transform-origin: left;

    transition: transform 0.25s ease;
}

.cta-link:hover {
    transform: translateY(-2px) translateX(3px);
    color: #0f65aa;
}

.cta-link:hover::after {
    transform: scaleX(1.08);
}

.cta-link:active {
    transform: translateY(0) translateX(1px);
}




/* ========================================
   FEATURE CARDS
   Hover lift + pop-out animation
======================================== */

.feature-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

    transform: translateY(0) scale(1);
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);

    box-shadow:
        0 24px 50px rgba(20, 30, 50, 0.16),
        0 8px 20px rgba(20, 30, 50, 0.08);

    border-color: rgba(47, 128, 201, 0.18);
}

.feature-card:active {
    transform: translateY(-3px) scale(0.99);
}