#pricing .pricing-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

#pricing .pricing-header {
    margin-bottom: 56px;
}

#pricing .pricing-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.08;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.03em;
}

#pricing .pricing-header .auto-pilot {
    background: linear-gradient(
            90deg,
            #38bdf8,
            #67e8f9,
            #3b82f6
    );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


/*
|--------------------------------------------------------------------------
| Pricing cards
|--------------------------------------------------------------------------
*/

#pricing .pricing-plan-card {
    width: 100%;
    max-width: 460px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;

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

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
            0 25px 80px rgba(0,0,0,.25);

    transition:
            transform .35s ease,
            border-color .35s ease,
            background-color .35s ease,
            box-shadow .35s ease;
}

#pricing .pricing-plan-card:hover {
    transform: translateY(-6px);

    border-color: rgba(56,189,248,.32);

    background: rgba(14,165,233,.065);

    box-shadow:
            0 28px 85px rgba(0,0,0,.30),
            0 0 42px rgba(34,211,238,.07);
}

#pricing .pricing-plan-card.agency-card {
    border-color: rgba(56,189,248,.36);

    background:
            linear-gradient(
                    145deg,
                    rgba(14,165,233,.10),
                    rgba(255,255,255,.045)
            );

    box-shadow:
            0 28px 90px rgba(0,0,0,.30),
            0 0 45px rgba(14,165,233,.10);
}

#pricing .pricing-plan-card.agency-card:hover {
    border-color: rgba(103,232,249,.50);

    box-shadow:
            0 30px 95px rgba(0,0,0,.32),
            0 0 55px rgba(34,211,238,.14);
}


/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/

#pricing .plan-title {
    color: #ffffff;
}

#pricing .plan-subtitle {
    color: #94a3b8;
}

#pricing .plan-price {
    color: #ffffff;
}

#pricing .original-price {
    color: #64748b;
}

#pricing .period {
    color: #94a3b8;
}

#pricing .cancel-text {
    color: #94a3b8;
}

#pricing .cancel-text strong {
    color: #e2e8f0;
}

#pricing .features-title {
    color: #ffffff;
}

#pricing .feature-text {
    color: #cbd5e1;
}

#pricing .feature-text strong {
    color: #f8fafc;
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

#pricing .pricing-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding: 16px 32px;

    border: 1px solid rgba(125,211,252,.22);
    border-radius: 14px;

    background:
            linear-gradient(
                    135deg,
                    #0284c7 0%,
                    #0ea5e9 45%,
                    #22d3ee 100%
            );

    color: #ffffff;

    font-size: 1.05rem;
    font-weight: 700;

    box-shadow:
            0 12px 32px rgba(14,165,233,.20),
            inset 0 1px 0 rgba(255,255,255,.15);

    transition:
            transform .25s ease,
            box-shadow .25s ease,
            filter .25s ease;
}

#pricing .pricing-cta:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
            0 16px 38px rgba(14,165,233,.28),
            0 0 32px rgba(34,211,238,.12);
}


/*
|--------------------------------------------------------------------------
| Agency CTA
|--------------------------------------------------------------------------
*/

#pricing .pricing-cta.agency-cta {
    background:
            linear-gradient(
                    135deg,
                    #0369a1 0%,
                    #0284c7 40%,
                    #06b6d4 100%
            );
}


/*
|--------------------------------------------------------------------------
| Checks
|--------------------------------------------------------------------------
*/

#pricing .checkmark {
    width: 24px;
    height: 24px;

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

    flex-shrink: 0;

    margin-top: 2px;

    border-radius: 999px;

    border: 1px solid rgba(103,232,249,.25);

    background: rgba(14,165,233,.18);

    box-shadow:
            0 0 18px rgba(34,211,238,.08);
}

#pricing .checkmark::after {
    content: '✓';

    color: #67e8f9;

    font-size: 14px;
    font-weight: 800;
}

#pricing .checkmark.accent {
    border-color: rgba(103,232,249,.35);

    background:
            linear-gradient(
                    135deg,
                    rgba(14,165,233,.30),
                    rgba(34,211,238,.22)
            );
}


/*
|--------------------------------------------------------------------------
| Agency badge
|--------------------------------------------------------------------------
*/

#pricing .discount-badge {
    position: absolute;

    right: 24px;
    top: 24px;

    padding: 7px 12px;

    border: 1px solid rgba(110,231,183,.25);
    border-radius: 999px;

    background: rgba(5,150,105,.18);

    color: #6ee7b7;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .08em;
    text-transform: uppercase;
}

#pricing .saving-text {
    color: #5eead4;
}


/*
|--------------------------------------------------------------------------
| Divider
|--------------------------------------------------------------------------
*/

#pricing .pricing-divider {
    border-color: rgba(255,255,255,.08);
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    #pricing {
        padding-left: 20px;
        padding-right: 20px;
    }

    #pricing .pricing-header h1 {
        font-size: 2.6rem;
    }

}


@media (prefers-reduced-motion: reduce) {

    #pricing *,
    #pricing *::before,
    #pricing *::after {
        transition-duration: .01ms !important;
    }

}