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

.c3-pricing-section{
    position:relative;
    padding:40px 20px 80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow-x:hidden;
}

/* =====================================================
   WATERMARK
===================================================== */

.c3-watermark-container{
    position:relative;
    width:100%;
    max-width:1100px;
    text-align:center;
    margin-top:40px;
    z-index:2;
}

.c3-watermark-main{
    font-size:9rem;
    font-weight:800;
    line-height:.9;
    letter-spacing:-0.05em;
    filter:url(#c3-noise);
    display:flex;
    flex-direction:column;
    align-items:center;
}

.c3-watermark-line-1{
    color:#ffffff;
}

.c3-watermark-line-2{
    background:
    linear-gradient(
        to right,
        #091020 0%,
        #0B2551 25%,
        #A4F4FD 65%,
        #00d2ff 100%
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
    -webkit-text-fill-color:transparent;
}

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

.c3-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    width:100%;
    max-width:1100px;
    margin-top:60px;
    transform:translateX(20px);
    position:relative;
    z-index:3;
}

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

.c3-card{

    background:
    linear-gradient(
        135deg,
        rgba(0,0,0,.7),
        rgba(0,0,0,.4)
    );

    backdrop-filter:
        blur(14px)
        brightness(.91);

    border:1px solid rgba(255,255,255,1);

    border-radius:44px;

    padding:50px 24px;

    min-height:580px;

    display:flex;
    flex-direction:column;

    transition:
        all .6s cubic-bezier(.22,1,.36,1);

    overflow:hidden;

    position:relative;
}

.c3-card::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,0) 50%
    );

    pointer-events:none;
}

.c3-card:hover{

    background:
        rgba(15,15,15,.6);

    border-color:
        rgba(34,211,238,.7);

    transform:
        translateY(-12px)
        scale(1.01);
}

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

.c3-card-pro{
    background:
    linear-gradient(
        135deg,
        rgba(0,0,0,.85),
        rgba(0,0,0,.55)
    );
}

/* =====================================================
   TYPOGRAPHY
===================================================== */

.c3-tier-small{
    font-size:1.1rem;
    font-weight:400;
    color:rgba(255,255,255,.6);
}

.c3-tier-large{
    font-size:2.8rem;
    font-weight:500;
    letter-spacing:-0.02em;
    color:#ffffff;
    margin-top:8px;
}

.c3-desc{
    font-size:.88rem;
    color:rgba(255,255,255,.45);
    min-height:3.2em;
    margin-top:16px;
    margin-bottom:40px;
    line-height:1.5;
}

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

.c3-list{
    list-style:none;
    margin:0;
    padding:0;
}

.c3-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-size:.92rem;
    color:rgba(255,255,255,.8);
    margin-bottom:18px;
    line-height:1.4;
}

/* =====================================================
   CHECK ICON
===================================================== */

.c3-check{

    width:28px;
    height:28px;

    border-radius:50%;

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

    display:inline-flex;

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

    flex-shrink:0;
}

.c3-check svg{
    width:14px;
    height:14px;
    stroke:#ffffff;
    stroke-width:2.5;
    fill:none;
}

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

.c3-btn{

    background:#ffffff;
    color:#000000;

    padding:10px 32px;

    border-radius:100px;

    font-weight:600;
    font-size:.88rem;

    margin-top:auto;

    border:none;

    cursor:pointer;

    align-self:center;

    transition:
        all .3s cubic-bezier(.22,1,.36,1);
}

.c3-btn:hover{

    background:#f5f5f5;

    transform:scale(1.02);

    box-shadow:
        0 8px 24px
        rgba(255,255,255,.15);
}

/* =====================================================
   TOGGLE
===================================================== */

.c3-toggle-wrap{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:12px;

    width:100%;
    max-width:1100px;

    margin-top:32px;

    padding-right:20px;
}

.c3-toggle-label{
    color:rgba(255,255,255,.75);
    font-size:.9rem;
}

.c3-toggle{

    width:52px;
    height:28px;

    background:#ffffff;

    border-radius:100px;

    position:relative;

    cursor:pointer;

    border:none;

    transition:
        background .3s cubic-bezier(.4,0,.2,1);

    padding:0;
}

.c3-toggle-knob{

    width:20px;
    height:20px;

    background:#000000;

    border-radius:50%;

    position:absolute;

    top:4px;
    left:4px;

    transition:
        all .3s cubic-bezier(.4,0,.2,1);
}

.c3-toggle.active{
    background:rgba(255,255,255,.2);
}

.c3-toggle.active .c3-toggle-knob{
    transform:translateX(24px);
    background:#ffffff;
}

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

.plan-price{
    transition:all .3s ease;
}

/* =====================================================
   SVG WATERMARK FILTER SUPPORT
===================================================== */

.c3-pricing-section svg{
    position:absolute;
    width:0;
    height:0;
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:1024px){

    .c3-watermark-main{
        font-size:3.5rem;
        filter:none;
    }

    .c3-watermark-line-2{
        background:none;
        -webkit-text-fill-color:#00d2ff;
        color:#00d2ff;
    }

    .c3-grid{

        display:flex;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        transform:none;

        width:100vw;

        padding:0 20px;

        gap:16px;

        scrollbar-width:none;
    }

    .c3-grid::-webkit-scrollbar{
        display:none;
    }

    .c3-card{
        flex:0 0 320px;
        scroll-snap-align:center;
    }

    .c3-toggle-wrap{
        justify-content:center;
        padding-right:0;
    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

    .c3-pricing-section{
        padding:20px 0 60px;
    }

    .c3-watermark-main{
        font-size:2.8rem;
    }

    .c3-card{
        min-height:auto;
        padding:40px 22px;
    }

    .c3-tier-large{
        font-size:2.2rem;
    }

    .c3-desc{
        min-height:auto;
    }

}