/* ==========================================================
   CHINMUN ERP - PREMIUM PRICING PAGE
========================================================== */


.pricing-page{
    position:relative;
    overflow:hidden;
   }


/* ==========================================================
   HERO
========================================================== */

.pricing-hero{
    position:relative;
    display:flex;
    align-items:center;
    padding:70px 0 60px;
    overflow:hidden;
    isolation:isolate;
}


.pricing-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(13,110,253,.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(123,46,247,.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(0,229,195,.08),
            transparent 38%
        );
    z-index:-2;
}


.pricing-hero::after{
    content:"";
    position:absolute;
    width:850px;
    height:850px;
    left:50%;
    top:-520px;
    transform:translateX(-50%);
    border-radius:50%;
    border:1px solid rgba(255,255,255,.06);
    box-shadow:
        0 0 0 80px rgba(255,255,255,.012),
        0 0 0 160px rgba(255,255,255,.008);
    pointer-events:none;
    z-index:-1;
}


.pricing-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
    pointer-events:none;
    z-index:-1;
}


.pricing-orb-one{
    width:220px;
    height:220px;
    left:-80px;
    top:180px;
    background:rgba(13,110,253,.13);
    filter:blur(65px);
}


.pricing-orb-two{
    width:250px;
    height:250px;
    right:-100px;
    bottom:20px;
    background:rgba(123,46,247,.14);
    filter:blur(75px);
}


.pricing-hero-content{
    max-width:850px;
    text-align:center;
    margin:0 auto;
}


.pricing-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 15px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:#bcd5ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
}


.pricing-eyebrow-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 18px rgba(0,229,195,.8);
}


.pricing-hero h1{
    max-width:800px;
    margin:24px auto 18px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(48px,7vw,82px);
    line-height:.98;
    letter-spacing:-.055em;
}


.pricing-hero h1 span{
    display:block;
    background:linear-gradient(
        90deg,
        #56c8ff,
        #9065ff,
        #f5a43b
    );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}


.pricing-hero p{
    max-width:680px;
    margin:0 auto;
    color:var(--muted);
    font-size:17px;
    line-height:1.8;
}


.pricing-hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:30px;
}


.pricing-main-btn{
    min-width:205px;
}


.pricing-outline-btn{
    min-width:150px;
}


.pricing-trust-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:28px;
}


.pricing-trust-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:#aab5cf;
    font-size:13px;
}


.pricing-check{
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    border-radius:50%;
    color:#08111b;
    background:var(--cyan);
    font-size:11px;
    font-weight:900;
}


/* ==========================================================
   SECTION COMMON
========================================================== */

.pricing-plans-section,
.pricing-how-section,
.pricing-custom-section,
.pricing-faq-section,
.pricing-final-section{
    position:relative;
    padding:70px 0;
}


.pricing-section-heading{
    max-width:720px;
    margin-bottom:35px;
}


.pricing-section-heading-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}


.pricing-section-heading h2{
    margin:12px 0 14px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(34px,5vw,58px);
    line-height:1.03;
    letter-spacing:-.045em;
}


.pricing-section-heading h2 span{
    background:linear-gradient(
        90deg,
        #5bcfff,
        #9c63ff,
        #ffab36
    );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}


.pricing-section-heading p{
    max-width:620px;
    color:var(--muted);
    line-height:1.8;
    margin:0;
}


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

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}


.pricing-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:560px;
    padding:25px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.09);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );
    box-shadow:
        0 18px 50px rgba(0,0,0,.18);
    overflow:hidden;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.pricing-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255,255,255,.08),
            transparent 35%
        );
    pointer-events:none;
}


.pricing-card:hover{
    transform:translateY(-7px);
    border-color:rgba(113,155,255,.38);
    box-shadow:
        0 28px 75px rgba(0,0,0,.32),
        0 0 60px rgba(70,100,255,.08);
}


.pricing-card-top{
    position:relative;
    display:flex;
    justify-content:space-between;
    gap:15px;
}


.pricing-plan-icon{
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    margin-bottom:18px;
    border-radius:14px;
    color:#fff;
    font-size:18px;
    background:
        linear-gradient(
            135deg,
            rgba(13,110,253,.75),
            rgba(123,46,247,.75)
        );
    box-shadow:
        0 10px 30px rgba(70,70,255,.22);
}


.pricing-card h3{
    margin:0;
    font-family:"Space Grotesk",sans-serif;
    font-size:24px;
    letter-spacing:-.025em;
}


.pricing-card-top p{
    max-width:240px;
    margin:9px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
}


.pricing-tag{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    height:28px;
    padding:0 9px;
    border:1px solid rgba(113,155,255,.25);
    border-radius:999px;
    color:#a9c9ff;
    background:rgba(76,116,255,.09);
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
}


.pricing-tag-green{
    color:#6ff2cf;
    border-color:rgba(0,229,195,.25);
    background:rgba(0,229,195,.08);
}


.pricing-tag-purple{
    color:#c6a5ff;
    border-color:rgba(155,99,255,.27);
    background:rgba(123,46,247,.10);
}


.pricing-tag-orange{
    color:#ffca8a;
    border-color:rgba(255,154,0,.25);
    background:rgba(255,154,0,.08);
}


/* ==========================================================
   PRICE
========================================================== */

.pricing-price{
    display:flex;
    align-items:flex-end;
    gap:4px;
    margin-top:28px;
}


.pricing-currency{
    padding-bottom:9px;
    color:#aebce2;
    font-size:24px;
    font-weight:700;
}


.pricing-price strong{
    font-family:"Space Grotesk",sans-serif;
    font-size:58px;
    line-height:.9;
    letter-spacing:-.055em;
}


.pricing-price small{
    padding-bottom:5px;
    color:#8f99b5;
    font-size:13px;
}


.pricing-custom-price strong{
    font-size:40px;
    line-height:1;
}


.pricing-price-caption{
    min-height:40px;
    margin-top:12px;
    color:#8e99b6;
    font-size:12px;
}


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

.pricing-features-list{
    list-style:none;
    padding:0;
    margin:16px 0 25px;
}


.pricing-features-list li{
    display:flex;
    align-items:center;
    gap:10px;
    margin:11px 0;
    color:#c7cee0;
    font-size:13px;
}


.pricing-features-list li span{
    display:grid;
    place-items:center;
    flex:0 0 18px;
    width:18px;
    height:18px;
    border-radius:6px;
    color:#8fffe7;
    background:rgba(0,229,195,.09);
    font-size:11px;
    font-weight:900;
}


/* ==========================================================
   BUTTON
========================================================== */

.pricing-card-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:48px;
    margin-top:auto;
    padding:0 17px;
    border-radius:13px;
    font-size:13px;
    font-weight:800;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.pricing-card-button:hover{
    transform:translateY(-2px);
}


.pricing-card-button-primary{
    color:#fff;
    background:
        linear-gradient(
            100deg,
            var(--blue),
            var(--purple)
        );
    box-shadow:
        0 12px 30px rgba(82,62,240,.25);
}


.pricing-card-button-dark{
    color:#08111b;
    background:var(--cyan);
}


.pricing-card-button-outline{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.035);
}


/* ==========================================================
   SPECIAL CARDS
========================================================== */

.pricing-card-popular{
    border-color:rgba(111,115,255,.55);
    background:
        linear-gradient(
            155deg,
            rgba(63,79,255,.18),
            rgba(123,46,247,.07) 45%,
            rgba(255,255,255,.03)
        );
    box-shadow:
        0 22px 70px rgba(56,55,230,.17);
}


.pricing-popular-badge,
.pricing-ribbon{
    position:absolute;
    top:0;
    right:22px;
    padding:7px 12px;
    border-radius:0 0 10px 10px;
    color:#fff;
    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--purple)
        );
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
}


.pricing-ribbon{
    color:#07111c;
    background:var(--cyan);
}


.pricing-card-business{
    background:
        linear-gradient(
            145deg,
            rgba(123,46,247,.14),
            rgba(255,255,255,.025)
        );
}


.pricing-card-enterprise{
    background:
        linear-gradient(
            145deg,
            rgba(255,154,0,.09),
            rgba(123,46,247,.08)
        );
}


/* ==========================================================
   HOW IT WORKS
========================================================== */

.pricing-how-section{
    border-top:1px solid rgba(255,255,255,.06);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.018),
            transparent
        );
}


.pricing-how-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}


.pricing-how-card{
    position:relative;
    min-height:220px;
    padding:25px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:rgba(255,255,255,.025);
}


.pricing-step{
    margin-bottom:26px;
    color:transparent;
    background:
        linear-gradient(
            90deg,
            #5bcfff,
            #a06cff
        );
    -webkit-background-clip:text;
    background-clip:text;
    font-family:"Space Grotesk",sans-serif;
    font-size:15px;
    font-weight:800;
    letter-spacing:.08em;
}


.pricing-how-card h3{
    margin:0 0 10px;
    font-family:"Space Grotesk",sans-serif;
    font-size:21px;
}


.pricing-how-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}


/* ==========================================================
   CUSTOM PLAN
========================================================== */

.pricing-custom-card{
    position:relative;
    display:grid;
    grid-template-columns:1.3fr .9fr auto;
    align-items:center;
    gap:28px;
    padding:38px;
    border:1px solid rgba(126,119,255,.23);
    border-radius:28px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(13,110,253,.16),
            transparent 40%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(123,46,247,.16),
            transparent 40%
        ),
        rgba(255,255,255,.035);
}


.pricing-custom-card::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    right:-150px;
    top:-230px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.07);
    box-shadow:
        0 0 0 55px rgba(255,255,255,.012),
        0 0 0 110px rgba(255,255,255,.008);
}


.pricing-custom-content{
    position:relative;
    z-index:1;
}


.pricing-custom-content h2{
    max-width:600px;
    margin:13px 0;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-.04em;
}


.pricing-custom-content h2 span{
    background:
        linear-gradient(
            90deg,
            #5bcfff,
            #9c63ff
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}


.pricing-custom-content p{
    max-width:600px;
    margin:0;
    color:var(--muted);
    line-height:1.75;
}


.pricing-custom-points{
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
}


.pricing-custom-points div{
    display:flex;
    align-items:center;
    gap:10px;
    color:#cbd3e8;
    font-size:13px;
}


.pricing-custom-points span{
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    border-radius:7px;
    color:#89ffe9;
    background:rgba(0,229,195,.10);
    font-weight:800;
}


.pricing-custom-btn{
    position:relative;
    z-index:1;
    white-space:nowrap;
}


/* ==========================================================
   FAQ
========================================================== */

.pricing-faq-list{
    display:grid;
    gap:10px;
    max-width:900px;
}


.pricing-faq-item{
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    background:rgba(255,255,255,.025);
    overflow:hidden;
}


.pricing-faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px;
    cursor:pointer;
    list-style:none;
    font-family:"Space Grotesk",sans-serif;
    font-size:16px;
    font-weight:700;
}


.pricing-faq-item summary::-webkit-details-marker{
    display:none;
}


.pricing-faq-item summary span{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:8px;
    color:#a8dfff;
    background:rgba(78,126,255,.11);
    font-size:18px;
    transition:transform .2s ease;
}


.pricing-faq-item[open] summary span{
    transform:rotate(45deg);
}


.pricing-faq-item p{
    max-width:750px;
    margin:0;
    padding:0 22px 20px;
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.pricing-final-section{
    padding-top:20px;
    padding-bottom:70px;
}


.pricing-final-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    padding:38px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:28px;
    background:
        linear-gradient(
            120deg,
            rgba(13,110,253,.12),
            rgba(123,46,247,.12),
            rgba(255,255,255,.035)
        );
}


.pricing-final-card h2{
    max-width:680px;
    margin:12px 0;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(32px,4vw,52px);
    line-height:1.04;
    letter-spacing:-.045em;
}


.pricing-final-card h2 span{
    background:
        linear-gradient(
            90deg,
            #5bcfff,
            #9c63ff,
            #ffab36
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}


.pricing-final-card p{
    margin:0;
    color:var(--muted);
    line-height:1.7;
}


.pricing-final-actions{
    display:flex;
    flex-shrink:0;
    gap:12px;
}


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

@media (max-width:1100px){

    .pricing-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }


    .pricing-custom-card{
        grid-template-columns:1fr 1fr;
    }


    .pricing-custom-btn{
        grid-column:1 / -1;
        width:max-content;
    }

}


@media (max-width:760px){

    .pricing-page{
        padding-top:68px;
    }


    .pricing-hero{
        min-height:auto;
        padding:60px 0 50px;
    }


    .pricing-hero h1{
        font-size:clamp(42px,12vw,62px);
    }


    .pricing-hero p{
        font-size:15px;
    }


    .pricing-hero-actions{
        flex-direction:column;
    }


    .pricing-hero-actions .btn{
        width:100%;
    }


    .pricing-trust-row{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }


    .pricing-plans-section,
    .pricing-how-section,
    .pricing-custom-section,
    .pricing-faq-section{
        padding:60px 0;
    }


    .pricing-grid{
        grid-template-columns:1fr;
    }


    .pricing-card{
        min-height:auto;
    }


    .pricing-how-grid{
        grid-template-columns:1fr;
    }


    .pricing-custom-card{
        grid-template-columns:1fr;
        padding:27px;
    }


    .pricing-custom-btn{
        grid-column:auto;
        width:100%;
    }


    .pricing-final-card{
        flex-direction:column;
        align-items:flex-start;
        padding:28px;
    }


    .pricing-final-actions{
        width:100%;
        flex-direction:column;
    }


    .pricing-final-actions .btn{
        width:100%;
    }

}


@media (max-width:480px){

    .pricing-card{
        padding:21px;
        border-radius:20px;
    }


    .pricing-price strong{
        font-size:52px;
    }


    .pricing-section-heading h2{
        font-size:34px;
    }


    .pricing-faq-item summary{
        padding:17px;
        font-size:14px;
    }


    .pricing-faq-item p{
        padding:0 17px 17px;
    }

}