* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    min-height: 100%;
    scroll-behavior: smooth;
    background: #050508;
}

body {
    margin: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.vp-pricing-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    min-height: 100vh;
    padding: 90px 28px 80px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 50% -5%,
            rgba(126, 34, 206, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 38%,
            rgba(79, 70, 229, 0.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 58%,
            rgba(147, 51, 234, 0.08),
            transparent 28%
        ),
        #050508;

    font-family: "Inter", sans-serif;
}

/* =========================================================
   BACKGROUND
========================================================= */

.vp-pricing-background {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

.vp-pricing-grid {
    position: absolute;
    inset: 0;

    opacity: 0.14;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );
}

.vp-pricing-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(120px);
    opacity: 0.2;
}

.vp-pricing-glow-left {
    top: 22%;
    left: -240px;

    background: #6d28d9;
}

.vp-pricing-glow-right {
    top: 42%;
    right: -260px;

    background: #9333ea;
}

.vp-pricing-orbit {
    position: absolute;

    border:
        1px solid rgba(168, 85, 247, 0.08);

    border-radius: 50%;

    animation:
        vpOrbitRotate
        28s linear infinite;
}

.vp-pricing-orbit-one {
    top: 90px;
    left: 50%;

    width: 760px;
    height: 760px;

    transform: translateX(-50%);
}

.vp-pricing-orbit-two {
    top: -130px;
    left: 50%;

    width: 1080px;
    height: 1080px;

    animation-direction: reverse;
    animation-duration: 38s;

    transform: translateX(-50%);
}

.vp-pricing-stars {
    position: absolute;
    inset: 0;
}

.vp-pricing-star {
    position: absolute;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.7);

    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.4);

    animation:
        vpStarTwinkle
        var(--duration)
        ease-in-out infinite alternate;
}

.vp-pricing-star.is-purple {
    background: #d8b4fe;

    box-shadow:
        0 0 8px rgba(216, 180, 254, 0.85),
        0 0 18px rgba(168, 85, 247, 0.35);
}

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

.vp-pricing-hero {
    position: relative;

    width: min(1120px, 100%);
    margin: 0 auto;

    text-align: center;
}

.vp-pricing-kicker,
.vp-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #d8b4fe;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.vp-pricing-kicker {
    min-height: 38px;
    padding: 0 15px;

    border:
        1px solid rgba(168, 85, 247, 0.18);

    border-radius: 999px;

    background:
        rgba(168, 85, 247, 0.065);

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.035),
        0 0 30px
            rgba(126, 34, 206, 0.08);
}

.vp-pricing-kicker > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #a855f7;

    box-shadow:
        0 0 10px #a855f7,
        0 0 22px rgba(168, 85, 247, 0.5);
}

.vp-pricing-hero h1 {
    max-width: 930px;
    margin: 28px auto 0;

    font-size:
        clamp(54px, 7.2vw, 96px);

    line-height: 0.94;
    letter-spacing: -5.8px;
}

.vp-pricing-hero h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #f3e8ff 0%,
            #c084fc 34%,
            #9333ea 70%,
            #7c3aed 100%
        );

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

    color: transparent;

    filter:
        drop-shadow(
            0 0 32px rgba(168, 85, 247, 0.18)
        );
}

.vp-pricing-hero > p {
    max-width: 680px;
    margin: 26px auto 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 15px;
    line-height: 1.75;
}

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

    max-width: 850px;
    margin: 38px auto 0;
}

.vp-pricing-trust > div {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 17px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.012)
        );

    text-align: left;
}

.vp-pricing-trust svg {
    flex: 0 0 auto;

    width: 21px;
    height: 21px;

    color: #c084fc;
}

.vp-pricing-trust span {
    color: rgba(255, 255, 255, 0.34);

    font-size: 9px;
}

.vp-pricing-trust strong {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 11px;
}

/* =========================================================
   SELECTOR
========================================================= */

.vp-pricing-selector-section {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    width: min(1180px, 100%);
    margin: 100px auto 0;
}

.vp-pricing-selector-copy > span {
    color: #c084fc;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.vp-pricing-selector-copy h2 {
    max-width: 560px;
    margin: 12px 0 0;

    font-size:
        clamp(29px, 3vw, 42px);

    line-height: 1.04;
    letter-spacing: -1.8px;
}

.vp-pricing-selector {
    display: flex;
    gap: 6px;

    padding: 6px;

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

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.025);

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.02);
}

.vp-period-button {
    position: relative;

    min-width: 145px;
    min-height: 54px;
    padding: 0 17px;

    border: 0;
    border-radius: 12px;

    color: rgba(255, 255, 255, 0.46);
    background: transparent;

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

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.vp-period-button small {
    display: block;

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.28);

    font-size: 7px;
}

.vp-period-button:hover {
    color: #ffffff;
}

.vp-period-button.is-active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #6d28d9
        );

    box-shadow:
        0 12px 32px
            rgba(126, 34, 206, 0.32);

    transform: translateY(-1px);
}

.vp-period-button.is-active small {
    color: rgba(255, 255, 255, 0.72);
}

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

.vp-pricing-plans {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;

    width: min(1180px, 100%);
    margin: 30px auto 0;
}

.vp-plan-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 610px;
    padding: 26px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(17, 16, 24, 0.94),
            rgba(7, 7, 11, 0.98)
        );

    box-shadow:
        0 28px 90px
            rgba(0, 0, 0, 0.3),
        inset 0 1px 0
            rgba(255, 255, 255, 0.025);

    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.vp-plan-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(168, 85, 247, 0.25);

    box-shadow:
        0 38px 110px
            rgba(0, 0, 0, 0.45),
        0 0 55px
            rgba(126, 34, 206, 0.08);
}

.vp-plan-card.is-selected {
    border-color:
        rgba(192, 132, 252, 0.42);

    box-shadow:
        0 34px 100px
            rgba(0, 0, 0, 0.42),
        0 0 60px
            rgba(126, 34, 206, 0.17),
        inset 0 1px 0
            rgba(255, 255, 255, 0.045);

    transform: translateY(-8px);
}

.vp-plan-card-featured {
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(126, 34, 206, 0.22),
            transparent 38%
        ),
        linear-gradient(
            155deg,
            rgba(22, 16, 34, 0.98),
            rgba(7, 7, 12, 0.99)
        );
}

.vp-plan-card-glow {
    position: absolute;

    top: -110px;
    left: 50%;

    width: 300px;
    height: 240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(168, 85, 247, 0.18),
            transparent 70%
        );

    filter: blur(30px);

    transform: translateX(-50%);
    pointer-events: none;
}

.vp-plan-badge,
.vp-plan-discount {
    position: absolute;
    z-index: 3;

    top: 18px;
    right: 18px;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 29px;
    padding: 0 10px;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.vp-plan-badge {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #6d28d9
        );

    box-shadow:
        0 10px 26px
            rgba(126, 34, 206, 0.3);
}

.vp-plan-badge svg {
    width: 12px;
    height: 12px;
}

.vp-plan-discount {
    color: #86efac;

    border:
        1px solid rgba(34, 197, 94, 0.18);

    background:
        rgba(34, 197, 94, 0.08);
}

.vp-plan-header {
    position: relative;
    z-index: 2;

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

    min-height: 58px;
}

.vp-plan-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    border:
        1px solid rgba(168, 85, 247, 0.2);

    border-radius: 16px;

    color: #d8b4fe;

    background:
        rgba(168, 85, 247, 0.08);

    box-shadow:
        0 0 28px
            rgba(126, 34, 206, 0.1);
}

.vp-plan-icon svg {
    width: 22px;
    height: 22px;
}

.vp-plan-header small {
    color: rgba(255, 255, 255, 0.32);

    font-size: 8px;
    font-weight: 700;
}

.vp-plan-header h3 {
    margin: 6px 0 0;

    font-size: 18px;
    letter-spacing: -0.6px;
}

.vp-plan-price {
    position: relative;
    z-index: 2;

    margin-top: 34px;
}

.vp-plan-price strong {
    display: block;

    font-size:
        clamp(45px, 4vw, 60px);

    line-height: 0.9;
    letter-spacing: -3px;
}

.vp-plan-price strong span {
    margin-left: 4px;

    color: #c084fc;

    font-size: 24px;
    letter-spacing: -1px;
}

.vp-plan-price > small {
    display: block;

    margin-top: 12px;

    color: rgba(255, 255, 255, 0.3);

    font-size: 9px;
}

.vp-plan-monthly {
    display: inline-flex;
    align-items: center;

    width: max-content;
    min-height: 30px;
    margin-top: 18px;
    padding: 0 11px;

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

    border-radius: 9px;

    color: rgba(255, 255, 255, 0.58);
    background:
        rgba(255, 255, 255, 0.024);

    font-size: 8px;
    font-weight: 700;
}

.vp-plan-saving {
    width: max-content;
    margin-top: 9px;

    color: #86efac;

    font-size: 9px;
    font-weight: 750;
}

.vp-plan-features {
    display: grid;
    gap: 14px;

    margin: 30px 0 0;
    padding: 24px 0 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.055);

    list-style: none;
}

.vp-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255, 255, 255, 0.56);

    font-size: 10px;
}

.vp-plan-features svg {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    padding: 3px;

    border-radius: 50%;

    color: #d8b4fe;
    background:
        rgba(168, 85, 247, 0.11);
}

.vp-plan-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 50px;
    margin-top: auto;

    border:
        1px solid rgba(168, 85, 247, 0.18);

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(168, 85, 247, 0.13),
            rgba(109, 40, 217, 0.05)
        );

    font-size: 10px;
    font-weight: 850;
    text-decoration: none;

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

.vp-plan-button svg {
    width: 16px;
    height: 16px;
}

.vp-plan-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.vp-plan-button-primary {
    border: 0;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #6d28d9
        );

    box-shadow:
        0 18px 44px
            rgba(126, 34, 206, 0.34);
}

.vp-plan-caption {
    margin: 13px 0 0;

    color: rgba(255, 255, 255, 0.24);

    font-size: 8px;
    line-height: 1.5;
    text-align: center;
}

/* =========================================================
   GUARANTEES
========================================================= */

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

    width: min(1180px, 100%);
    margin: 22px auto 0;
}

.vp-pricing-guarantees article {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 20px;

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

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.018);
}

.vp-pricing-guarantees article > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;

    width: 43px;
    height: 43px;

    border-radius: 13px;

    color: #c084fc;
    background:
        rgba(168, 85, 247, 0.08);
}

.vp-pricing-guarantees svg {
    width: 19px;
    height: 19px;
}

.vp-pricing-guarantees strong {
    font-size: 11px;
}

.vp-pricing-guarantees p {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.34);

    font-size: 9px;
    line-height: 1.6;
}

/* =========================================================
   COMPARISON
========================================================= */

.vp-pricing-comparison {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.45fr)
        minmax(0, 1fr);
    gap: 50px;

    width: min(1180px, 100%);
    margin: 110px auto 0;
}

.vp-pricing-comparison-copy h2,
.vp-pricing-faq-heading h2,
.vp-pricing-final h2 {
    margin: 14px 0 0;

    font-size:
        clamp(34px, 4vw, 54px);

    line-height: 1;
    letter-spacing: -2.5px;
}

.vp-pricing-comparison-copy p {
    margin: 20px 0 0;

    color: rgba(255, 255, 255, 0.4);

    font-size: 12px;
    line-height: 1.7;
}

.vp-comparison-table {
    overflow: hidden;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 15, 22, 0.96),
            rgba(7, 7, 11, 0.98)
        );
}

.vp-comparison-row {
    display: grid;
    grid-template-columns:
        1.35fr repeat(3, 0.65fr);
    align-items: center;

    min-height: 58px;
    padding: 0 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);
}

.vp-comparison-row:last-child {
    border-bottom: 0;
}

.vp-comparison-row > *:not(:first-child) {
    justify-self: center;
}

.vp-comparison-row > span:first-child {
    color: rgba(255, 255, 255, 0.56);

    font-size: 9px;
    font-weight: 650;
}

.vp-comparison-head {
    min-height: 52px;

    background:
        rgba(168, 85, 247, 0.045);
}

.vp-comparison-head span {
    color: rgba(255, 255, 255, 0.36) !important;

    font-size: 8px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.vp-comparison-row svg {
    width: 17px;
    height: 17px;

    padding: 3px;

    border-radius: 50%;

    color: #86efac;
    background:
        rgba(34, 197, 94, 0.08);
}

.vp-comparison-row strong {
    color: #d8b4fe;

    font-size: 9px;
}

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

.vp-pricing-faq {
    display: grid;
    grid-template-columns:
        minmax(270px, 0.5fr)
        minmax(0, 1fr);
    gap: 50px;

    width: min(1180px, 100%);
    margin: 110px auto 0;
}

.vp-faq-list {
    display: grid;
    gap: 10px;
}

.vp-faq-item {
    overflow: hidden;

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

    border-radius: 17px;

    background:
        rgba(255, 255, 255, 0.018);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.vp-faq-item.is-open {
    border-color:
        rgba(168, 85, 247, 0.22);

    background:
        rgba(168, 85, 247, 0.035);
}

.vp-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    width: 100%;
    min-height: 66px;
    padding: 0 19px;

    border: 0;

    color: #ffffff;
    background: transparent;

    font-size: 10px;
    font-weight: 750;
    text-align: left;

    cursor: pointer;
}

.vp-faq-question svg {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    color: #c084fc;

    transition: transform 0.25s ease;
}

.vp-faq-item.is-open .vp-faq-question svg {
    transform: rotate(45deg);
}

.vp-faq-answer {
    overflow: hidden;

    max-height: 0;

    transition:
        max-height 0.32s ease;
}

.vp-faq-answer p {
    margin: 0;
    padding: 0 19px 19px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 9px;
    line-height: 1.7;
}

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

.vp-pricing-final {
    position: relative;
    overflow: hidden;

    width: min(1180px, 100%);
    margin: 110px auto 0;
    padding: 70px 30px;

    border:
        1px solid rgba(168, 85, 247, 0.2);

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(126, 34, 206, 0.24),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            rgba(18, 14, 29, 0.97),
            rgba(7, 7, 12, 0.99)
        );

    box-shadow:
        0 42px 120px
            rgba(0, 0, 0, 0.42);

    text-align: center;
}

.vp-pricing-final-glow {
    position: absolute;

    top: -200px;
    left: 50%;

    width: 620px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(168, 85, 247, 0.25),
            transparent 70%
        );

    filter: blur(55px);

    transform: translateX(-50%);
    pointer-events: none;
}

.vp-pricing-final > *:not(.vp-pricing-final-glow) {
    position: relative;
    z-index: 2;
}

.vp-pricing-final h2 {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
}

.vp-pricing-final p {
    max-width: 570px;
    margin: 20px auto 0;

    color: rgba(255, 255, 255, 0.42);

    font-size: 12px;
    line-height: 1.7;
}

.vp-pricing-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 210px;
    min-height: 50px;
    margin-top: 28px;
    padding: 0 22px;

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #6d28d9
        );

    box-shadow:
        0 18px 48px
            rgba(126, 34, 206, 0.36);

    font-size: 10px;
    font-weight: 850;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.vp-pricing-final-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.09);
}

.vp-pricing-final-button svg {
    width: 16px;
    height: 16px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes vpStarTwinkle {
    from {
        opacity: 0.15;
        transform: scale(0.7);
    }

    to {
        opacity: 0.9;
        transform: scale(1.3);
    }
}

@keyframes vpOrbitRotate {
    from {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    to {
        transform:
            translateX(-50%)
            rotate(360deg);
    }
}

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

@media (max-width: 1020px) {
    .vp-pricing-plans {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .vp-plan-card {
        min-height: 560px;
    }

    .vp-pricing-selector-section,
    .vp-pricing-comparison,
    .vp-pricing-faq {
        grid-template-columns: 1fr;
    }

    .vp-pricing-selector-section {
        align-items: flex-start;
    }

    .vp-pricing-selector {
        width: 100%;
    }

    .vp-period-button {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .vp-pricing-page {
        padding:
            72px 16px 55px;
    }

    .vp-pricing-hero h1 {
        font-size: 53px;
        letter-spacing: -3.5px;
    }

    .vp-pricing-trust,
    .vp-pricing-guarantees {
        grid-template-columns: 1fr;
    }

    .vp-pricing-selector-section,
    .vp-pricing-comparison,
    .vp-pricing-faq,
    .vp-pricing-final {
        margin-top: 75px;
    }

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

    .vp-period-button {
        min-height: 50px;
    }

    .vp-comparison-table {
        overflow-x: auto;
    }

    .vp-comparison-row {
        min-width: 620px;
    }

    .vp-pricing-final {
        padding: 52px 20px;
    }
}

@media (max-width: 480px) {
    .vp-pricing-hero h1 {
        font-size: 43px;
        letter-spacing: -2.6px;
    }

    .vp-pricing-hero > p {
        font-size: 13px;
    }

    .vp-plan-card {
        min-height: 590px;
        padding: 21px;
    }

    .vp-plan-badge,
    .vp-plan-discount {
        position: static;

        width: max-content;
        margin-bottom: 18px;
    }

    .vp-pricing-comparison-copy h2,
    .vp-pricing-faq-heading h2,
    .vp-pricing-final h2 {
        font-size: 36px;
        letter-spacing: -1.8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-pricing-orbit,
    .vp-pricing-star {
        animation: none !important;
    }

    .vp-plan-card,
    .vp-period-button,
    .vp-plan-button,
    .vp-faq-answer,
    .vp-faq-question svg {
        transition: none !important;
    }
}


/* ==========================================================
   VOIDVPN PRICING — FINAL PUBLIC PAGE POLISH
========================================================== */

:root {
    --vp-bg: #050508;
    --vp-surface: rgba(10, 8, 18, 0.76);
    --vp-border: rgba(192, 132, 252, 0.13);
    --vp-border-hover: rgba(192, 132, 252, 0.28);
    --vp-purple: #a855f7;
    --vp-purple-light: #d8b4fe;
    --vp-purple-dark: #6d28d9;
}


/* ---------- PAGE ---------- */

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

    min-height: 100vh;
    padding: 120px 24px 70px;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(126, 34, 206, 0.15),
            transparent 29%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(79, 70, 229, 0.08),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #050508,
            #06050a 52%,
            #040407
        );
}

.vp-pricing-page > section {
    position: relative;
    z-index: 2;

    width: min(100%, 1280px);
    margin-right: auto;
    margin-left: auto;
}


/* ---------- BACKGROUND ---------- */

.vp-pricing-background,
.vp-pricing-grid,
.vp-pricing-orbit,
.vp-pricing-glow,
.vp-pricing-stars {
    pointer-events: none;
}

.vp-pricing-grid {
    opacity: 0.14;
}

.vp-pricing-glow {
    filter: blur(80px);
    opacity: 0.42;
}


/* ---------- HERO ---------- */

.vp-pricing-hero {
    position: relative;
    overflow: hidden;

    min-height: 360px;
    padding: 54px 44px;
    margin-bottom: 24px;

    border: 1px solid var(--vp-border);
    border-radius: 30px;

    background:
        radial-gradient(
            circle at 82% 42%,
            rgba(168, 85, 247, 0.17),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(99, 102, 241, 0.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.042),
            rgba(255, 255, 255, 0.01)
        ),
        rgba(9, 7, 16, 0.79);

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.36),
        0 16px 55px rgba(88, 28, 135, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);

    backdrop-filter: blur(23px) saturate(125%);
    -webkit-backdrop-filter: blur(23px) saturate(125%);

    isolation: isolate;
}

.vp-pricing-hero::before {
    content: "";

    position: absolute;
    top: -105px;
    right: 7%;

    width: 340px;
    height: 340px;

    border: 1px solid rgba(192, 132, 252, 0.14);
    border-radius: 50%;

    background:
        repeating-radial-gradient(
            circle,
            transparent 0 35px,
            rgba(192, 132, 252, 0.052) 36px 37px
        );

    box-shadow:
        0 0 85px rgba(168, 85, 247, 0.1),
        inset 0 0 80px rgba(168, 85, 247, 0.045);

    animation: vpPricingSphere 9s ease-in-out infinite;
}

.vp-pricing-hero::after {
    content: "";

    position: absolute;
    top: 98px;
    right: calc(7% + 15px);

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.95),
        0 0 28px rgba(168, 85, 247, 0.8);

    animation: vpPricingPoint 5.5s ease-in-out infinite;
}

.vp-pricing-hero > * {
    position: relative;
    z-index: 2;
}

.vp-pricing-kicker,
.vp-section-kicker {
    display: inline-flex;
    align-items: center;

    min-height: 30px;
    padding: 0 11px;
    margin-bottom: 14px;

    border: 1px solid rgba(192, 132, 252, 0.18);
    border-radius: 999px;

    color: #d8b4fe;
    background: rgba(168, 85, 247, 0.08);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vp-pricing-hero h1 {
    max-width: 760px;
    margin: 0 0 16px;

    color: #ffffff;

    font-size: clamp(38px, 5vw, 70px);
    font-weight: 900;
    letter-spacing: -2.5px;
    line-height: 0.98;
}

.vp-pricing-hero > p {
    max-width: 660px;
    margin: 0;

    color: rgba(255, 255, 255, 0.54);

    font-size: 15px;
    line-height: 1.7;
}


/* ---------- TRUST ITEMS ---------- */

.vp-pricing-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
    max-width: 820px;
    margin-top: 32px;
}

.vp-pricing-trust > div {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 76px;
    padding: 14px 15px;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.022);
}

.vp-pricing-trust svg {
    width: 20px;
    height: 20px;

    color: #d8b4fe;
}

.vp-pricing-trust span {
    display: grid;
    gap: 4px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 10px;
}

.vp-pricing-trust strong {
    color: #ffffff;

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


/* ---------- SELECTOR SECTION ---------- */

.vp-pricing-selector-section {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;

    margin-top: 26px;
    padding: 26px 28px;

    border: 1px solid var(--vp-border);
    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.034),
            rgba(255, 255, 255, 0.008)
        ),
        rgba(9, 7, 16, 0.74);

    box-shadow:
        0 24px 66px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.vp-pricing-selector-copy > span {
    display: block;
    margin-bottom: 8px;

    color: #c084fc;

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vp-pricing-selector-copy h2 {
    max-width: 600px;
    margin: 0;

    color: #ffffff;

    font-size: clamp(24px, 3vw, 38px);
    font-weight: 880;
    letter-spacing: -1.3px;
    line-height: 1.08;
}


/* ---------- SEGMENTED CONTROL ---------- */

.vp-pricing-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));

    gap: 7px;
    padding: 7px;

    border: 1px solid rgba(192, 132, 252, 0.12);
    border-radius: 17px;

    background: rgba(3, 3, 8, 0.55);
}

.vp-period-button {
    position: relative;

    display: grid;
    place-items: center;
    gap: 4px;

    min-height: 50px;
    padding: 7px 13px;

    border: 1px solid transparent;
    border-radius: 12px;

    color: rgba(255, 255, 255, 0.48);
    background: transparent;

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

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.vp-period-button small {
    color: rgba(216, 180, 254, 0.58);

    font-size: 8px;
    font-weight: 750;
}

.vp-period-button:hover {
    color: #ffffff;
    background: rgba(168, 85, 247, 0.065);
}

.vp-period-button.is-active {
    color: #ffffff;

    border-color: rgba(192, 132, 252, 0.3);

    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.22),
            rgba(109, 40, 217, 0.08)
        );

    box-shadow:
        0 10px 28px rgba(44, 12, 78, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}


/* ---------- PLANS GRID ---------- */

.vp-pricing-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 16px;
    margin-top: 20px;
}


/* ---------- PLAN CARD ---------- */

.vp-plan-card {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-height: 530px;
    padding: 26px;

    border: 1px solid rgba(192, 132, 252, 0.12);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(168, 85, 247, 0.095),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.036),
            rgba(255, 255, 255, 0.008)
        ),
        rgba(9, 7, 16, 0.77);

    box-shadow:
        0 24px 66px rgba(0, 0, 0, 0.29),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transition:
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        opacity 0.24s ease;
}

.vp-plan-card:hover {
    transform: translateY(-4px);

    border-color: var(--vp-border-hover);

    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.36),
        0 16px 48px rgba(109, 40, 217, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}


/* Выбранный тариф */

.vp-plan-card.is-selected {
    z-index: 2;

    border-color: rgba(192, 132, 252, 0.44);

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(168, 85, 247, 0.22),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(168, 85, 247, 0.085),
            rgba(255, 255, 255, 0.012)
        ),
        rgba(12, 8, 22, 0.9);

    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.39),
        0 18px 55px rgba(109, 40, 217, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);

    transform: translateY(-7px);
}

.vp-plan-card:not(.is-selected) {
    opacity: 0.78;
}

.vp-plan-card:not(.is-selected):hover {
    opacity: 1;
}


/* ---------- BADGES ---------- */

.vp-plan-badge,
.vp-plan-discount,
.vp-plan-saving {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vp-plan-badge {
    align-self: flex-start;

    min-height: 30px;
    padding: 0 11px;
    margin-bottom: 17px;

    border: 1px solid rgba(192, 132, 252, 0.22);
    border-radius: 999px;

    color: #e9d5ff;
    background: rgba(168, 85, 247, 0.11);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.vp-plan-discount {
    position: absolute;
    top: 19px;
    right: 19px;

    min-width: 48px;
    height: 30px;

    border: 1px solid rgba(74, 222, 128, 0.18);
    border-radius: 999px;

    color: #86efac;
    background: rgba(34, 197, 94, 0.075);

    font-size: 10px;
    font-weight: 850;
}


/* ---------- PLAN HEADER ---------- */

.vp-plan-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vp-plan-icon {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;
    flex: 0 0 54px;

    border: 1px solid rgba(192, 132, 252, 0.19);
    border-radius: 17px;

    color: #e4c7ff;

    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.27),
            rgba(109, 40, 217, 0.08)
        );

    box-shadow:
        0 0 35px rgba(168, 85, 247, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vp-plan-header small {
    display: block;
    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.65px;
}

.vp-plan-header h3 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    font-weight: 850;
    letter-spacing: -0.55px;
}


/* ---------- PRICE ---------- */

.vp-plan-price {
    margin-top: 28px;
}

.vp-plan-price strong {
    display: flex;
    align-items: flex-start;
    gap: 5px;

    color: #ffffff;

    font-size: clamp(43px, 5vw, 62px);
    font-weight: 900;
    letter-spacing: -2.4px;
    line-height: 0.95;
}

.vp-plan-price strong span {
    margin-top: 5px;

    color: #d8b4fe;

    font-size: 20px;
    letter-spacing: 0;
}

.vp-plan-price > small,
.vp-plan-monthly {
    display: block;
    margin-top: 8px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 11px;
}

.vp-plan-saving {
    align-self: flex-start;

    min-height: 27px;
    padding: 0 9px;
    margin-top: 11px;

    border: 1px solid rgba(74, 222, 128, 0.16);
    border-radius: 999px;

    color: #86efac;
    background: rgba(34, 197, 94, 0.065);

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


/* ---------- FEATURES ---------- */

.vp-plan-features {
    display: grid;
    gap: 12px;

    margin: 25px 0;
    padding: 0;

    list-style: none;
}

.vp-plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 12px;
    line-height: 1.45;
}

.vp-plan-features svg {
    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    color: #c084fc;
}


/* ---------- PLAN BUTTON ---------- */

.vp-plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;
    min-height: 47px;
    margin-top: auto;
    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 14px;

    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.03);

    font-size: 11px;
    font-weight: 820;
    text-decoration: none;

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

.vp-plan-button:hover {
    transform: translateY(-2px);

    color: #ffffff;
    border-color: rgba(192, 132, 252, 0.24);
    background: rgba(168, 85, 247, 0.075);
}

.vp-plan-button-primary,
.vp-plan-card.is-selected .vp-plan-button {
    border-color: rgba(216, 180, 254, 0.34);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #7c3aed 58%,
            #6d28d9
        );

    box-shadow:
        0 16px 40px rgba(109, 40, 217, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vp-plan-caption {
    margin: 12px 0 0;

    color: rgba(255, 255, 255, 0.32);

    font-size: 9px;
    text-align: center;
}


/* ---------- GUARANTEES ---------- */

.vp-pricing-guarantees {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;
    margin-top: 22px;
}

.vp-pricing-guarantees > article {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 20px;

    border: 1px solid rgba(192, 132, 252, 0.1);
    border-radius: 19px;

    background: rgba(255, 255, 255, 0.018);
}

.vp-pricing-guarantees > article > span {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;
    flex: 0 0 43px;

    border: 1px solid rgba(192, 132, 252, 0.16);
    border-radius: 13px;

    color: #d8b4fe;
    background: rgba(168, 85, 247, 0.08);
}

.vp-pricing-guarantees strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 820;
}

.vp-pricing-guarantees p {
    margin: 7px 0 0;

    color: rgba(255, 255, 255, 0.42);

    font-size: 11px;
    line-height: 1.6;
}


/* ---------- COMPARISON ---------- */

.vp-pricing-comparison {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.72fr)
        minmax(0, 1.28fr);

    gap: 26px;

    margin-top: 26px;
    padding: 28px;

    border: 1px solid var(--vp-border);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.033),
            rgba(255, 255, 255, 0.008)
        ),
        rgba(9, 7, 16, 0.75);
}

.vp-pricing-comparison-copy h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(25px, 3vw, 38px);
    font-weight: 880;
    letter-spacing: -1.25px;
    line-height: 1.08;
}

.vp-pricing-comparison-copy p {
    margin: 13px 0 0;

    color: rgba(255, 255, 255, 0.44);

    font-size: 12px;
    line-height: 1.7;
}

.vp-comparison-table {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 17px;

    background: rgba(3, 3, 8, 0.4);
}

.vp-comparison-row {
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)
        repeat(3, minmax(70px, 0.45fr));

    align-items: center;

    min-height: 52px;
    padding: 0 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.045);

    color: rgba(255, 255, 255, 0.52);

    font-size: 11px;
}

.vp-comparison-row:last-child {
    border-bottom: 0;
}

.vp-comparison-head {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(168, 85, 247, 0.055);

    font-weight: 800;
}

.vp-comparison-row svg {
    width: 17px;
    height: 17px;

    justify-self: center;

    color: #c084fc;
}


/* ---------- FAQ ---------- */

.vp-pricing-faq {
    display: grid;
    grid-template-columns:
        minmax(250px, 0.65fr)
        minmax(0, 1.35fr);

    gap: 28px;

    margin-top: 26px;
    padding: 28px;

    border: 1px solid var(--vp-border);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.032),
            rgba(255, 255, 255, 0.008)
        ),
        rgba(9, 7, 16, 0.75);
}

.vp-pricing-faq-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(25px, 3vw, 37px);
    font-weight: 880;
    letter-spacing: -1.2px;
}

.vp-faq-list {
    display: grid;
    gap: 9px;
}

.vp-faq-item {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.018);
}

.vp-faq-item.is-open {
    border-color: rgba(192, 132, 252, 0.2);
    background: rgba(168, 85, 247, 0.04);
}

.vp-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    width: 100%;
    min-height: 58px;
    padding: 0 16px;

    border: 0;

    color: rgba(255, 255, 255, 0.76);
    background: transparent;

    font-size: 12px;
    font-weight: 780;
    text-align: left;

    cursor: pointer;
}

.vp-faq-answer {
    padding: 0 16px 16px;

    color: rgba(255, 255, 255, 0.44);

    font-size: 11px;
    line-height: 1.65;
}


/* ---------- FINAL CTA ---------- */

.vp-pricing-final {
    position: relative;
    overflow: hidden;

    margin-top: 26px;
    padding: 48px 34px;

    border: 1px solid rgba(192, 132, 252, 0.17);
    border-radius: 27px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(168, 85, 247, 0.2),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(168, 85, 247, 0.075),
            rgba(255, 255, 255, 0.009)
        ),
        rgba(10, 7, 18, 0.83);

    box-shadow:
        0 30px 82px rgba(0, 0, 0, 0.34),
        0 16px 52px rgba(109, 40, 217, 0.12);
}

.vp-pricing-final h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(29px, 4vw, 48px);
    font-weight: 900;
    letter-spacing: -1.7px;
}

.vp-pricing-final p {
    max-width: 620px;
    margin: 13px auto 22px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 13px;
    line-height: 1.65;
}

.vp-pricing-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 230px;
    min-height: 48px;
    padding: 0 20px;

    border: 1px solid rgba(216, 180, 254, 0.34);
    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #7c3aed 58%,
            #6d28d9
        );

    box-shadow:
        0 17px 42px rgba(109, 40, 217, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);

    font-size: 11px;
    font-weight: 830;
    text-decoration: none;
}


/* ---------- ANIMATIONS ---------- */

@keyframes vpPricingSphere {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-10px, 8px, 0)
            scale(1.035);
    }
}

@keyframes vpPricingPoint {
    0%,
    100% {
        opacity: 0.55;

        transform:
            translate3d(0, 0, 0)
            scale(0.85);
    }

    50% {
        opacity: 1;

        transform:
            translate3d(20px, 17px, 0)
            scale(1.2);
    }
}


/* ---------- TABLET ---------- */

@media (max-width: 1050px) {
    .vp-pricing-selector-section {
        align-items: stretch;
        flex-direction: column;
    }

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

    .vp-plan-card:last-child {
        grid-column: 1 / -1;
    }

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

    .vp-pricing-comparison,
    .vp-pricing-faq {
        grid-template-columns: 1fr;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width: 680px) {
    .vp-pricing-page {
        padding:
            94px 12px 38px;
    }

    .vp-pricing-hero {
        min-height: 420px;
        padding: 30px 20px;

        border-radius: 21px;
    }

    .vp-pricing-hero::before {
        top: -35px;
        right: -95px;

        width: 230px;
        height: 230px;
    }

    .vp-pricing-hero::after {
        top: 88px;
        right: 18px;
    }

    .vp-pricing-trust {
        grid-template-columns: 1fr;

        gap: 9px;
    }

    .vp-pricing-selector-section {
        padding: 21px 16px;

        border-radius: 20px;
    }

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

    .vp-pricing-plans {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .vp-plan-card:last-child {
        grid-column: auto;
    }

    .vp-plan-card {
        min-height: 495px;
        padding: 21px;

        border-radius: 20px;
    }

    .vp-plan-card.is-selected {
        transform: none;
    }

    .vp-pricing-comparison,
    .vp-pricing-faq,
    .vp-pricing-final {
        padding: 21px 16px;

        border-radius: 20px;
    }

    .vp-comparison-table {
        overflow-x: auto;
    }

    .vp-comparison-row {
        min-width: 580px;
    }

    .vp-pricing-final-button {
        width: 100%;
        min-width: 0;
    }
}


@media (prefers-reduced-motion: reduce) {
    .vp-pricing-hero::before,
    .vp-pricing-hero::after {
        animation: none;
    }
}


/* ==========================================================
   PAYMENT FORMS
========================================================== */

.vp-plan-payment-form {
    width: 100%;
    margin: 0;
}

.vp-plan-payment-form .vp-plan-button {
    width: 100%;
    border: inherit;
    font-family: inherit;
    cursor: pointer;
}

.vp-plan-payment-form button.vp-plan-button {
    appearance: none;
    -webkit-appearance: none;
}


/* =========================================================
   FINAL PREMIUM POLISH
========================================================= */

.vp-pricing-page {
    padding-top: 112px;
}

.vp-pricing-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -120px;
    left: 50%;

    width: min(880px, 92vw);
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(147, 51, 234, 0.18),
            rgba(109, 40, 217, 0.05) 42%,
            transparent 72%
        );

    filter: blur(24px);
    transform: translateX(-50%);
    pointer-events: none;
}

.vp-pricing-hero h1 {
    text-wrap: balance;
}

.vp-pricing-hero > p {
    max-width: 620px;
    font-size: 16px;
}

.vp-pricing-trust > div {
    min-height: 76px;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.vp-pricing-trust > div:hover {
    transform: translateY(-3px);

    border-color:
        rgba(192, 132, 252, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(168, 85, 247, 0.08),
            rgba(255, 255, 255, 0.018)
        );
}

.vp-pricing-selector-section {
    padding: 26px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            rgba(168, 85, 247, 0.018)
        );

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, 0.025);
}

.vp-plan-card {
    min-height: 630px;
}

.vp-plan-card::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            transparent 18%,
            rgba(255, 255, 255, 0.025) 46%,
            transparent 72%
        );

    transform: translateX(-120%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

.vp-plan-card:hover::after,
.vp-plan-card.is-selected::after {
    transform: translateX(120%);
}

.vp-plan-card.is-selected {
    border-color:
        rgba(216, 180, 254, 0.5);
}

.vp-plan-card.is-selected .vp-plan-icon {
    color: #ffffff;

    border-color:
        rgba(216, 180, 254, 0.32);

    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.22),
            rgba(109, 40, 217, 0.1)
        );

    box-shadow:
        0 0 32px
            rgba(168, 85, 247, 0.2);
}

.vp-plan-price strong {
    font-weight: 800;
}

.vp-plan-monthly {
    min-height: 32px;
    padding-inline: 13px;
}

.vp-plan-features li {
    font-size: 11px;
    line-height: 1.45;
}

.vp-plan-payment-form {
    display: block;
    margin-top: auto;
}

.vp-plan-payment-form .vp-plan-button {
    width: 100%;
    margin-top: 0;
    border: 0;
    cursor: pointer;
}

.vp-plan-button {
    position: relative;
    z-index: 2;

    min-height: 54px;

    letter-spacing: 0.1px;
}

.vp-plan-button:focus-visible,
.vp-period-button:focus-visible,
.vp-faq-question:focus-visible {
    outline:
        2px solid rgba(216, 180, 254, 0.95);
    outline-offset: 3px;
}

.vp-comparison-row:not(.vp-comparison-head)
strong {
    color: #f3e8ff;
}

.vp-comparison-row:not(.vp-comparison-head)
strong:last-child {
    color: #86efac;
}

.vp-pricing-guarantees article {
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}

.vp-pricing-guarantees article:hover {
    transform: translateY(-4px);

    border-color:
        rgba(168, 85, 247, 0.18);

    background:
        rgba(168, 85, 247, 0.035);
}

.vp-pricing-final {
    overflow: hidden;

    border:
        1px solid rgba(192, 132, 252, 0.15);

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(147, 51, 234, 0.19),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            rgba(19, 14, 29, 0.97),
            rgba(7, 7, 11, 0.98)
        );

    box-shadow:
        0 32px 110px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@media (max-width: 1020px) {
    .vp-pricing-selector-section {
        align-items: stretch;
        flex-direction: column;
    }

    .vp-pricing-selector {
        width: 100%;
    }

    .vp-period-button {
        flex: 1;
        min-width: 0;
    }

    .vp-pricing-plans {
        grid-template-columns: 1fr;
        max-width: 680px;
    }

    .vp-plan-card,
    .vp-plan-card.is-selected {
        min-height: auto;
        transform: none;
    }

    .vp-plan-button,
    .vp-plan-payment-form {
        margin-top: 28px;
    }
}

@media (max-width: 700px) {
    .vp-pricing-page {
        padding:
            86px 16px 56px;
    }

    .vp-pricing-hero h1 {
        font-size:
            clamp(43px, 14vw, 64px);

        line-height: 0.98;
        letter-spacing: -3.4px;
    }

    .vp-pricing-hero > p {
        font-size: 14px;
    }

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

    .vp-pricing-selector-section {
        margin-top: 68px;
        padding: 19px;
    }

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

    .vp-period-button {
        width: 100%;
    }

    .vp-plan-card {
        padding: 22px;
        border-radius: 21px;
    }

    .vp-plan-price strong {
        font-size: 50px;
    }

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

    .vp-comparison-table {
        overflow-x: auto;
    }

    .vp-comparison-row {
        min-width: 650px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-pricing-orbit,
    .vp-pricing-star {
        animation: none !important;
    }

    .vp-plan-card,
    .vp-plan-card::after,
    .vp-pricing-guarantees article,
    .vp-pricing-trust > div {
        transition: none !important;
    }
}


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

.vp-pricing-faq {
    align-items: start;
}

.vp-faq-list {
    display: grid;
    gap: 10px;
}

.vp-faq-item {
    overflow: hidden;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.026),
            rgba(255, 255, 255, 0.012)
        );

    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.vp-faq-item:hover {
    border-color:
        rgba(192, 132, 252, 0.18);
}

.vp-faq-item.is-open {
    border-color:
        rgba(192, 132, 252, 0.26);

    background:
        linear-gradient(
            145deg,
            rgba(168, 85, 247, 0.075),
            rgba(255, 255, 255, 0.016)
        );

    box-shadow:
        0 18px 50px
            rgba(0, 0, 0, 0.18);
}

.vp-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
    min-height: 74px;
    padding: 0 20px;

    border: 0;

    color: rgba(255, 255, 255, 0.82);
    background: transparent;

    font: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    text-align: left;

    cursor: pointer;
}

.vp-faq-question span {
    display: block;
    max-width: calc(100% - 36px);
}

.vp-faq-question svg {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    color: #c084fc;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.vp-faq-item.is-open .vp-faq-question svg {
    color: #e9d5ff;
    transform: rotate(45deg);
}

.vp-faq-answer {
    overflow: hidden;

    max-height: 0;
    opacity: 0;

    transition:
        max-height 0.3s ease,
        opacity 0.22s ease;
}

.vp-faq-answer p {
    margin: 0;
    padding:
        0 54px 22px 20px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 11px;
    line-height: 1.75;
}

.vp-faq-item.is-open .vp-faq-answer {
    opacity: 1;
}

@media (max-width: 700px) {
    .vp-pricing-faq {
        grid-template-columns: 1fr;
    }

    .vp-faq-question {
        min-height: 68px;
        padding: 0 16px;

        font-size: 11px;
    }

    .vp-faq-answer p {
        padding:
            0 42px 19px 16px;

        font-size: 10px;
    }
}


/* =========================================================
   PRICING INCLUDED — COMPACT FINAL BLOCK
   ========================================================= */

.vp-pricing-included {
    position: relative;
    overflow: hidden;

    max-width: 1180px;
    margin: 34px auto 0;
    padding: 42px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 17, 34, 0.96),
            rgba(11, 9, 18, 0.98)
        );

    border:
        1px solid rgba(184, 137, 255, 0.13);

    border-radius: 28px;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}


.vp-pricing-included-glow {
    position: absolute;
    top: -180px;
    right: -100px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130, 66, 230, 0.22),
            transparent 68%
        );

    pointer-events: none;
}


.vp-pricing-included-heading {
    position: relative;
    z-index: 1;

    max-width: 720px;
}


.vp-pricing-included-heading h2 {
    margin: 13px 0 14px;

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1.05;
    letter-spacing: -0.045em;
}


.vp-pricing-included-heading p {
    max-width: 650px;
    margin: 0;

    color: rgba(225, 218, 236, 0.62);

    font-size: 14px;
    line-height: 1.7;
}


.vp-pricing-included-features {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-top: 30px;
}


.vp-pricing-included-features article {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    padding: 16px;

    background:
        rgba(255, 255, 255, 0.025);

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

    border-radius: 17px;
}


.vp-pricing-included-features article > span {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    min-width: 38px;

    color: #c89cff;

    background:
        rgba(130, 70, 225, 0.14);

    border:
        1px solid rgba(190, 144, 255, 0.12);

    border-radius: 12px;
}


.vp-pricing-included-features svg {
    width: 18px;
    height: 18px;
}


.vp-pricing-included-features div {
    min-width: 0;
}


.vp-pricing-included-features strong {
    display: block;

    color: rgba(255, 255, 255, 0.9);

    font-size: 12px;
    line-height: 1.3;
}


.vp-pricing-included-features small {
    display: block;

    margin-top: 4px;

    color: rgba(224, 216, 235, 0.44);

    font-size: 9px;
    line-height: 1.4;
}


.vp-pricing-included-periods {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 14px;
}


.vp-pricing-included-periods span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 13px 15px;

    color: rgba(226, 219, 236, 0.52);

    background:
        rgba(130, 68, 222, 0.055);

    border:
        1px solid rgba(178, 125, 255, 0.08);

    border-radius: 14px;

    font-size: 10px;
}


.vp-pricing-included-periods strong {
    color: rgba(255, 255, 255, 0.84);

    font-size: 11px;
}


@media (max-width: 920px) {

    .vp-pricing-included {
        margin-top: 24px;
        padding: 28px 22px;

        border-radius: 22px;
    }

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


@media (max-width: 620px) {

    .vp-pricing-included {
        padding: 24px 16px;
    }

    .vp-pricing-included-heading h2 {
        font-size: 29px;
    }

    .vp-pricing-included-heading p {
        font-size: 12px;
    }

    .vp-pricing-included-features {
        grid-template-columns: 1fr;
        gap: 9px;

        margin-top: 22px;
    }

    .vp-pricing-included-features article {
        padding: 13px;
    }

    .vp-pricing-included-periods {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .vp-pricing-included-periods span {
        padding: 12px 13px;
    }
}


/* =========================================================
   PRICING DESKTOP ALIGNMENT — FINAL FIX
   ========================================================= */

@media (min-width: 921px) {

    .vp-pricing-page {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding-left: 32px !important;
        padding-right: 32px !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }


    .vp-pricing-hero,
    .vp-pricing-selector-section,
    .vp-pricing-plans,
    .vp-pricing-guarantees,
    .vp-pricing-included,
    .vp-pricing-faq,
    .vp-pricing-final {
        position: relative !important;

        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 1180px !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        transform: none !important;
        translate: none !important;

        box-sizing: border-box !important;
    }


    .vp-pricing-plans {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            !important;

        gap: 20px !important;
    }


    .vp-plan-card,
    .vp-plan-card-featured {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        transform: none !important;
    }


    .vp-pricing-guarantees {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            !important;

        gap: 16px !important;
    }


    .vp-pricing-included {
        margin-top: 34px !important;
    }


    .vp-pricing-background {
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden !important;
    }
}