/*==========================================================
    PRICING SECTION
    PART 1
==========================================================*/

.pricing-section{
    position:relative;
    padding:140px 0;
    background:
        radial-gradient(650px 420px at 92% 0%, rgba(37,99,235,.055), transparent 68%),
        radial-gradient(520px 380px at 5% 100%, rgba(96,165,250,.045), transparent 70%),
        #F7FAFF;
    overflow:hidden;
}

.pricing-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    top:-250px;
    right:-180px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,.08), transparent 72%);
}

.pricing-section::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    left:-180px;
    bottom:-220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,.055), transparent 72%);
}

.pricing-section .container{
    position:relative;
    z-index:2;
}

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

.pricing-section .section-header{
    max-width:760px;
    margin:0 auto 90px;
    text-align:center;
}

.pricing-section .section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    border-radius:999px;
    background:rgba(37,99,235,.08);
    border:1px solid rgba(37,99,235,.16);
    color:#2563EB;
    font-family:var(--font-mono);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.pricing-section h2{
    margin:28px 0 24px;
    font-family:var(--font-display);
    font-size:4rem;
    font-weight:400;
    line-height:1.08;
    color:var(--ink);
}

.pricing-section .section-header p{
    max-width:650px;
    margin:auto;
    font-family:var(--font-body);
    font-size:1.08rem;
    line-height:1.9;
    color:var(--ink-soft);
}

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

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
    align-items:stretch;
}

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

.pricing-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:#ffffff;
    border:1px solid rgba(26,21,18,.08);
    border-radius:30px;
    padding:42px;
    overflow:hidden;
    transition:all .35s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,.05);
}

.pricing-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.45), transparent 55%);
    pointer-events:none;
}

.pricing-card:hover{
    transform:translateY(-12px);
    border-color:rgba(37,99,235,.20);
    box-shadow: 0 35px 70px rgba(37,99,235,.13);
}

/*==================================
    TOP
==================================*/

.pricing-top{
    margin-bottom:36px;
}

.plan-name{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(37,99,235,.08);
    color:#2563EB;
    font-family:var(--font-body);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.price{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:28px 0 12px;
}

.price-value{
    font-family:var(--font-display);
    font-size:4rem;
    line-height:1;
    color:var(--ink);
}

.price-duration{
    margin-bottom:10px;
    font-family:var(--font-body);
    font-size:1rem;
    color:var(--ink-soft);
}

.plan-description{
    font-family:var(--font-body);
    font-size:1rem;
    line-height:1.8;
    color:var(--ink-soft);
}

/*==========================================================
    PRICING SECTION
    PART 2
    FEATURES + FOOTER
==========================================================*/

.feature-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0;
    flex:1;
}

.feature-list li{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 0;
    border-bottom:1px solid rgba(26,21,18,.08);
    transition:.3s ease;
}

.feature-list li:last-child{
    border-bottom:none;
}

.feature-list li:hover{
    transform:translateX(6px);
}

.feature-list li::before{
    content:"✓";
    width:36px;
    height:36px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(37,99,235,.08);
    color:#2563EB;
    font-family:var(--font-body);
    font-size:.95rem;
    font-weight:700;
    transition:.35s ease;
}

.feature-list li:hover::before{
    transform:scale(1.08);
    background:#2563EB;
    color:#ffffff;
}

.feature-list li span{
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:500;
    color:var(--ink);
    line-height:1.6;
}

/*==================================
    FOOTER
==================================*/

.pricing-footer{
    margin-top:38px;
    display:flex;
    align-items:flex-end;
}

.pricing-footer .btn{
    width:100%;
    justify-content:center;
    padding:16px 24px;
    border-radius:14px;
    font-size:.95rem;
    font-weight:600;
}

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

.pricing-card:hover .price-value{
    color:#2563EB;
}

.pricing-card:hover .plan-name{
    background:#2563EB;
    color:#ffffff;
}

.pricing-card:hover .pricing-footer .btn-outline{
    background:#2563EB;
    color:#ffffff;
    border-color:#2563EB;
}

/*==================================
    DIVIDER
==================================*/

.pricing-card::after{
    content:"";
    position:absolute;
    left:42px;
    right:42px;
    bottom:88px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(26,21,18,.08), transparent);
    opacity:.6;
}

/*==================================
    SUBTLE GLOW
==================================*/

.pricing-card{
    isolation:isolate;
}

.pricing-card .price{
    position:relative;
}

.pricing-card .price::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    left:-20px;
    top:-20px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(37,99,235,.08), transparent 70%);
    z-index:-1;
    opacity:0;
    transition:.35s;
}

.pricing-card:hover .price::before{
    opacity:1;
}

/*==========================================================
    PRICING SECTION
    PART 3
    FEATURED CARD + RESPONSIVE
==========================================================*/

.featured-price{
    position:relative;
    background:linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    border:none;
    color:#ffffff;
    transform:scale(1.05);
    box-shadow: 0 35px 80px rgba(37,99,235,.30);
    overflow:hidden;
}

.featured-price::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-150px;
    top:-150px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    z-index:0;
}

.featured-price::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-100px;
    bottom:-100px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    z-index:0;
}

.featured-price:hover{
    transform:translateY(-14px) scale(1.05);
    box-shadow: 0 45px 90px rgba(37,99,235,.38);
}

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

.featured-price .plan-name{
    background:rgba(255,255,255,.18);
    color:#ffffff;
}

.featured-price .price-value{
    color:#ffffff;
}

.featured-price .price-duration{
    color:rgba(255,255,255,.80);
}

.featured-price .plan-description{
    color:rgba(255,255,255,.90);
}

.featured-price .feature-list li{
    border-bottom:1px solid rgba(255,255,255,.15);
}

.featured-price .feature-list li span{
    color:#ffffff;
}

.featured-price .feature-list li::before{
    background:rgba(255,255,255,.16);
    color:#ffffff;
}

.featured-price .pricing-footer .btn{
    background:#ffffff;
    color:#2563EB;
    border:none;
}

.featured-price .pricing-footer .btn:hover{
    background:#EFF6FF;
    transform:translateY(-2px);
}

/*==================================
    POPULAR BADGE
    (scoped + !important to beat any
    conflicting ".popular" rule that
    may exist in another stylesheet
    loaded after this one, e.g. about.css)
==================================*/

.featured-price .popular,
.popular{
    position:absolute !important;
    top:26px !important;
    right:20px !important;
    padding:10px 18px !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:#2563EB !important;
    font-family:var(--font-body);
    font-size:.72rem !important;
    font-weight:700 !important;
    letter-spacing:.12em;
    text-transform:uppercase;
    box-shadow:
        0 8px 20px rgba(15,23,42,.35),
        0 0 0 1px rgba(15,23,42,.06) !important;
    z-index:5 !important;
    opacity:1 !important;
    mix-blend-mode:normal !important;
}

/*==================================
    HOVER EFFECTS
==================================*/

.featured-price:hover .plan-name{
    background:#ffffff;
    color:#2563EB;
}

.featured-price:hover .feature-list li::before{
    transform:rotate(360deg);
    transition:.5s;
}

/*==================================
    RESPONSIVE
==================================*/

@media(max-width:1100px){
    .pricing-grid{
        grid-template-columns:1fr;
        max-width:620px;
        margin:auto;
        gap:30px;
    }

    .featured-price{
        transform:none;
    }

    .featured-price:hover{
        transform:translateY(-10px);
    }
}

@media(max-width:768px){
    .pricing-section{
        padding:100px 0;
    }

    .pricing-section h2{
        font-size:2.8rem;
    }

    .pricing-card{
        padding:32px;
        border-radius:24px;
    }

    .price-value{
        font-size:3.2rem;
    }

    .featured-price .popular,
    .popular{
        top:20px !important;
        right:16px !important;
        font-size:.68rem !important;
    }
}

@media(max-width:480px){
    .pricing-section{
        padding:80px 0;
    }

    .pricing-section h2{
        font-size:2rem;
    }

    .pricing-card{
        padding:24px;
    }

    .price-value{
        font-size:2.7rem;
    }

    .feature-list li{
        padding:15px 0;
    }

    .feature-list li span{
        font-size:.95rem;
    }
}

/*==========================================================
                    PRICING ENHANCEMENTS
==========================================================*/

.trial-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    margin-bottom:18px;
    border-radius:999px;
    background:#EFF6FF;
    color:#2563EB;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.pricing-trust{
    margin-top:60px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.trust-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px;
    background:#ffffff;
    border:1px solid #ECECEC;
    border-radius:16px;
    font-weight:600;
    color:#444;
    transition:.3s;
}

.trust-item:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.trust-item i{
    color:#22C55E;
    font-size:1.1rem;
}

@media(max-width:991px){
    .pricing-trust{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .pricing-trust{
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   REVLO BLUE OVERRIDES
   Premium blue featured plan + cool light section atmosphere
   ========================================================== */

.pricing-section{
    background:
        radial-gradient(650px 420px at 92% 0%, rgba(37,99,235,.055), transparent 68%),
        radial-gradient(520px 380px at 5% 100%, rgba(96,165,250,.045), transparent 70%),
        #F7FAFF;
}

.featured-price{
    background:
        radial-gradient(circle at 60% 30%, rgba(147,197,253,.22), transparent 35%),
        linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%);
    box-shadow: 0 35px 80px rgba(37,99,235,.30);
}

.featured-price:hover{
    box-shadow: 0 45px 90px rgba(37,99,235,.38);
}