.pricing-page{

    padding-top:80px;
    padding-bottom:120px;

    background:
    linear-gradient(
        to bottom,
        #ffffff,
        #f8f9fb
    );
}

/* HEADER */

/* =========================================================
   PRICING HEADER
========================================================= */

.pricing-header{

    max-width:700px;

    margin-bottom:34px;
}

/* TITLE */

.pricing-title{

    font-size:2rem;

    line-height:1.35;

    font-weight:600;

    letter-spacing:-.5px;

    color:#111;
}

/* SUBTITLE */

.pricing-subtitle{

    max-width:560px;

    margin:auto;

    font-size:.94rem;

    line-height:1.8;

    color:#7a808c;
}

/* CARD */

.pricing-card{

    position:relative;

    display:flex;
    flex-direction:column;

    padding:38px;

    border-radius:32px;

    background:
    rgba(255,255,255,.75);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(0,0,0,.05);

    transition:
    transform .3s ease,
    box-shadow .3s ease;

    overflow:hidden;

    box-shadow:
    0 10px 40px rgba(0,0,0,.04);
}

.pricing-card:hover{

    transform:translateY(-5px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.08);
}

/* TOP */

.pricing-card-top{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:30px;
}

/* PLAN */

.pricing-plan-name{

    font-size:1.35rem;

    font-weight:700;

    color:#111;

    margin-bottom:10px;
}

.pricing-plan-desc{

    font-size:.95rem;

    line-height:1.8;

    color:#7b8190;
}

/* BADGE */

.pricing-badge{

    padding:8px 14px;

    border-radius:999px;

    background:#111;
    color:#fff;

    font-size:.78rem;

    font-weight:600;

    white-space:nowrap;
}

/* PRICE */

.pricing-price-wrap{

    display:flex;
    align-items:flex-end;
    gap:10px;

    margin-bottom:8px;
}

.pricing-price{

    font-size:2rem;

    line-height:1;

    font-weight:700;

    letter-spacing:-2px;

    color:#111;
}

.pricing-currency{

    font-size:1rem;

    color:#7b8190;

    margin-bottom:6px;
}

/* DURATION */

.pricing-duration{

    font-size:.95rem;

    color:#7b8190;

    margin-bottom:34px;
}

/* FEATURES */

.pricing-features{

    display:flex;
    flex-direction:column;

    gap:16px;

    margin-bottom:36px;
}

.pricing-feature-item{

    display:flex;
    align-items:center;

    gap:14px;

    font-size:.96rem;

    color:#4f5663;
}

/* CHECK */

.feature-check{

    width:24px;
    height:24px;

    border-radius:50%;

    background:#111;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:.75rem;

    flex-shrink:0;
}

/* STATUS */

.pricing-status{

    margin-bottom:28px;
}

.status-active{

    display:inline-flex;
    align-items:center;

    gap:8px;

    color:#15803d;

    font-size:.9rem;

    font-weight:600;
}

.status-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#22c55e;
}

.status-disabled{

    color:#888;

    font-size:.9rem;
}

/* BUTTON */

.pricing-btn{

    height:56px;

    border-radius:18px;

    background:#111;
    color:#fff;

    border:none;

    font-weight:600;

    transition:.25s ease;
}

.pricing-btn:hover{

    transform:translateY(-1px);

    background:#000;

    color:#fff;
}

/* MOBILE */

@media(max-width:768px){

    .pricing-card{

        padding:30px;
    }

    .pricing-price{

        font-size:2.5rem;
    }

}
/* FEATURED CARD */

.pricing-card-featured{

    transform:scale(1.03);

    border:
    1px solid rgba(0,0,0,.08);

    box-shadow:
    0 30px 80px rgba(0,0,0,.08);
}

/* FLOATING BADGE */

.featured-badge{

    position:absolute;

    top:22px;
    right:22px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 14px;

    border-radius:999px;

    background:
    rgba(17,17,17,.92);

    color:#fff;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.2px;

    backdrop-filter:blur(10px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);
}

/* DOT */

.featured-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
    0 0 0 4px rgba(34,197,94,.18);
}

/* HOVER */

.pricing-card-featured:hover{

    transform:
    scale(1.03)
    translateY(-5px);
}

/* MOBILE */

@media(max-width:991px){

    .pricing-card-featured{

        transform:none;
    }

    .pricing-card-featured:hover{

        transform:translateY(-4px);
    }

}