/* ========================= */
/* PRICING SECTION */
/* ========================= */

.pricing {

    background: white;
}



/* ========================= */
/* GRID */
/* ========================= */

.pricing-grid {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;
}



/* ========================= */
/* CARD */
/* ========================= */

.pricing-card {

    background: var(--bg);

    width: 380px;

    padding: 45px;

    border-radius: 32px;

    position: relative;

    border: 1px solid rgba(0,0,0,0.05);

    transition: 0.35s ease;
}


.pricing-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}



/* ========================= */
/* FEATURED PLAN */
/* ========================= */

.featured-plan {

    background: linear-gradient(
        135deg,
        var(--primary),
        #284c7a
    );

    color: white;

    transform: scale(1.03);
}


.featured-plan .pricing-features li,
.featured-plan .yearly-price {

    color: rgba(255,255,255,0.8);
}


.featured-plan .price span {

    color: rgba(255,255,255,0.7);
}



/* ========================= */
/* BADGES */
/* ========================= */

.plan-badge {

    display: inline-block;

    padding: 8px 16px;

    background: var(--accent);

    border-radius: 50px;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 25px;
}


.pro-badge {

    background: rgba(255,255,255,0.15);

    color: white;
}


.popular-tag {

    position: absolute;

    top: -14px;

    right: 30px;

    background: var(--action);

    color: white;

    padding: 10px 18px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;
}



/* ========================= */
/* TEXT */
/* ========================= */

.pricing-card h3 {

    font-size: 32px;

    margin-bottom: 20px;
}


.price {

    font-size: 54px;

    font-weight: 800;

    margin-bottom: 12px;
}


.price span {

    font-size: 16px;

    font-weight: 500;

    color: var(--gray);
}


.yearly-price {

    margin-bottom: 30px;

    color: var(--gray);
}



/* ========================= */
/* FEATURES */
/* ========================= */

.pricing-features {

    margin-bottom: 40px;
}


.pricing-features li {

    padding: 14px 0;

    border-bottom: 1px solid rgba(0,0,0,0.05);

    color: var(--gray);
}



/* ========================= */
/* BUTTONS */
/* ========================= */

.pricing-btn {

    width: 100%;

    padding: 18px;

    border-radius: 16px;

    background: var(--primary);

    color: white;

    font-size: 16px;

    font-weight: 600;
}


.pricing-btn:hover {

    background: var(--secondary);
}


.pro-btn {

    background: white;

    color: var(--primary);
}


.pro-btn:hover {

    background: var(--accent);
}