/* ================= WHY SECTION ================= */
.why-section {
    padding: 110px 0;
    position: relative;
    overflow: hidden;
}

.why-blob {
    width: 500px;
    height: 500px;
    background: rgba(6,182,212,.14);
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.section-title .highlight {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.feature-card {
    height: 100%;
    padding: 38px 26px;
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow-sm);
    transition: .4s var(--ease);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 1px solid rgba(10,14,39,.04);
}

    .feature-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--gradient-main);
        opacity: 0;
        transition: .4s var(--ease);
        z-index: -1;
    }

    .feature-card:hover {
        transform: translateY(-12px);
        box-shadow: var(--shadow-glow);
        border-color: transparent;
    }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-card:hover h4,
        .feature-card:hover p {
            color: white;
        }

        .feature-card:hover .feature-icon {
            background: rgba(255,255,255,.2);
            color: white;
            transform: scale(1.1) rotate(-6deg);
        }

.feature-icon {
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(37,71,244,.1), rgba(124,58,237,.1));
    color: var(--primary);
    font-size: 26px;
    margin-bottom: 25px;
    transition: .4s var(--ease);
}

.feature-card h4 {
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 14px;
    transition: .3s;
}

.feature-card p {
    color: var(--gray);
    line-height: 1.9;
    font-size: 15px;
    transition: .3s;
}