/* ==========================================================
   Pricing pages (/pricing and /pricing/{slug})
   ========================================================== */
    :root {
        --pr2-green: #A0FF27;
        --pr2-green-deep: #4F7A00;
    }

    /* ---------- Pricing section wrapper ---------- */
    .pr2-section {
        background:
            radial-gradient(900px 500px at 15% 100%, rgba(160,255,39,.14) 0%, rgba(160,255,39,0) 70%),
            radial-gradient(700px 500px at 85% 60%, rgba(160,255,39,.10) 0%, rgba(160,255,39,0) 70%),
            var(--tp-common-black-3);
        padding: 70px 0 90px;
        margin-bottom: 90px;
        overflow: hidden;
        position: relative;
    }
    .pr2-section .container-1230 { position: relative; z-index: 1; }

    /* ---------- Category tabs ---------- */
    .pr2-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 999px;
        padding: 6px;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 50px;
    }
    .pr2-tab {
        background: transparent;
        border: none;
        color: rgba(255,255,255,.75);
        font-size: 14px;
        font-weight: 600;
        padding: 10px 22px;
        border-radius: 999px;
        cursor: pointer;
        transition: all .3s ease;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .pr2-tab:hover { color: var(--tp-common-white); }
    .pr2-tab.is-active {
        background: var(--pr2-green);
        color: var(--tp-common-black-3);
        box-shadow: 0 10px 24px -8px rgba(160,255,39,.5);
    }

    /* On narrow screens, never let the tabs wrap onto a second line —
       that turns the fully-rounded pill container into a stretched,
       ugly blob. Scroll horizontally instead, staying a clean single row. */
    @media (max-width: 575px) {
        .pr2-tabs {
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            justify-content: flex-start;
            scrollbar-width: none;
            width: 100%;
        }
        .pr2-tabs::-webkit-scrollbar { display: none; }
    }

    /* ---------- Category panes (self-contained, not relying on Bootstrap tab CSS) ---------- */
    .pr2-pane {
        display: none;
        animation: pr2FadeIn .3s ease;
    }
    .pr2-pane.is-active { display: block; }
    @keyframes pr2FadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ---------- Tier sub-tabs ("1-10 Pages", "10-20 Pages" ...) ---------- */
    .pr2-subtabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 30px;
    }
    .pr2-subtab {
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.14);
        color: rgba(255,255,255,.75);
        border-radius: 999px;
        padding: 8px 20px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all .25s ease;
    }
    .pr2-subtab:hover { border-color: var(--pr2-green); color: var(--tp-common-white); }
    .pr2-subtab.is-active {
        background: rgba(160,255,39,.14);
        border-color: var(--pr2-green);
        color: var(--pr2-green);
    }
    .pr2-subpane { display: none; animation: pr2FadeIn .3s ease; }
    .pr2-subpane.is-active { display: block; }

    /* ---------- Overview: one card per service ---------- */
    .pr2-crumb { color: inherit; text-decoration: underline; }
    .pr2-cat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 22px;
    }
    .pr2-cat-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 280px;
        padding: 30px 28px 24px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 22px;
        background:
            radial-gradient(120% 140% at 100% 0%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 55%),
            #131315;
        color: rgba(255,255,255,.8);
        text-decoration: none;
        transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
    }
    .pr2-cat-card:hover {
        transform: translateY(-8px);
        border-color: var(--pr2-green);
        box-shadow: 0 30px 50px -24px rgba(0,0,0,.6);
        color: rgba(255,255,255,.8);
    }
    .pr2-cat-card-accent { border-color: rgba(160,255,39,.4); }
    .pr2-cat-icon {
        width: 52px; height: 52px;
        margin-bottom: 20px;
        border-radius: 14px;
        background: rgba(160,255,39,.14);
        color: var(--pr2-green);
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
        transition: background .3s ease, color .3s ease;
    }
    .pr2-cat-card:hover .pr2-cat-icon { background: var(--pr2-green); color: var(--tp-common-black-3); }
    .pr2-cat-card h3 { margin-bottom: 10px; font-size: 22px; font-weight: 600; color: var(--tp-common-white); }
    .pr2-cat-card p { margin-bottom: 18px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.55); }
    .pr2-cat-price { margin-top: auto; font-size: 26px; font-weight: 700; color: var(--tp-common-white); }
    .pr2-cat-price small { display: block; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
    .pr2-cat-price em { margin-left: 4px; font-size: 14px; font-style: normal; font-weight: 500; color: rgba(255,255,255,.5); }
    .pr2-cat-card-accent .pr2-cat-price { font-size: 18px; color: var(--pr2-green); }
    .pr2-cat-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,.08);
        font-size: 13px;
        color: rgba(255,255,255,.5);
    }
    .pr2-cat-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--pr2-green); white-space: nowrap; }

    /* ---------- Single service page ---------- */
    .pr2-service-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 36px; }
    .pr2-service-icon {
        width: 50px; height: 50px;
        border-radius: 14px;
        background: var(--pr2-green);
        color: var(--tp-common-black-3);
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
    }
    .pr2-service-head h2 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; color: var(--tp-common-white); }
    .pr2-other {
        margin-top: 40px;
        padding: 22px 26px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        background: rgba(255,255,255,.03);
    }
    .pr2-other-label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pr2-green); }
    .pr2-other-links { display: flex; flex-wrap: wrap; gap: 10px; }
    .pr2-other-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 999px;
        color: rgba(255,255,255,.8);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        transition: all .25s ease;
    }
    .pr2-other-link i { color: var(--pr2-green); font-size: 13px; }
    .pr2-other-link:hover { border-color: var(--pr2-green); color: var(--tp-common-white); }
    .pr2-other-all { background: var(--pr2-green); border-color: var(--pr2-green); color: var(--tp-common-black-3); }
    .pr2-other-all:hover { background: var(--tp-common-white); border-color: var(--tp-common-white); color: var(--tp-common-black-3); }

    /* ---------- Category icon / description ---------- */
    .pr2-tab i { margin-inline-end: 6px; font-size: 13px; }
    .pr2-pane-desc {
        max-width: 680px;
        margin: -26px auto 30px;
        text-align: center;
        font-size: 15px;
        color: rgba(255,255,255,.6);
    }

    /* ---------- Billing switch: One-time / Monthly / Yearly ---------- */
    .pr2-billing {
        display: flex;
        gap: 4px;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 34px;
        padding: 5px;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
    }
    .pr2-billing-btn {
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.7);
        font-size: 14px;
        font-weight: 600;
        padding: 9px 22px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: all .25s ease;
    }
    .pr2-billing-btn:hover { color: var(--tp-common-white); }
    .pr2-billing-btn.is-active { background: var(--tp-common-white); color: var(--tp-common-black-3); }
    .pr2-billing-pane { display: none; animation: pr2FadeIn .3s ease; }
    .pr2-billing-pane.is-active { display: block; }

    .pr2-empty {
        padding: 50px 20px;
        border: 1px dashed rgba(255,255,255,.18);
        border-radius: 20px;
        text-align: center;
        color: rgba(255,255,255,.7);
    }
    .pr2-empty .pr2-card-btn { display: inline-flex; width: auto; margin-top: 14px; }

    /* ---------- Ecommerce packages call-out ---------- */
    .pr2-ecom-cta {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-top: 40px;
        padding: 22px 28px;
        border-radius: 20px;
        text-decoration: none;
        background: linear-gradient(90deg, rgba(160,255,39,.16), rgba(160,255,39,.04));
        border: 1px solid rgba(160,255,39,.35);
        transition: transform .3s ease, border-color .3s ease;
    }
    .pr2-ecom-cta:hover { transform: translateY(-4px); border-color: var(--pr2-green); }
    .pr2-ecom-cta-icon {
        width: 52px; height: 52px;
        flex-shrink: 0;
        border-radius: 14px;
        background: var(--pr2-green);
        color: var(--tp-common-black-3);
        display: flex; align-items: center; justify-content: center;
        font-size: 20px;
    }
    .pr2-ecom-cta-text { flex-grow: 1; }
    .pr2-ecom-cta-text strong { display: block; color: var(--tp-common-white); font-size: 18px; font-weight: 600; }
    .pr2-ecom-cta-text small { color: rgba(255,255,255,.6); font-size: 14px; }
    .pr2-ecom-cta-arrow { color: var(--pr2-green); }

    /* ---------- Price cards ---------- */
    .pr2-card {
        background:
            radial-gradient(120% 140% at 100% 0%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 55%),
            #131315;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 20px;
        padding: 34px 28px;
        height: 100%;
        position: relative;
        transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s ease;
    }
    .pr2-card:hover {
        transform: translateY(-8px);
        border-color: var(--pr2-green);
        box-shadow: 0 30px 50px -20px rgba(0,0,0,.5);
    }
    .pr2-card.is-popular {
        border-color: rgba(160,255,39,.5);
        background:
            radial-gradient(120% 140% at 100% 0%, rgba(160,255,39,.18) 0%, rgba(160,255,39,0) 60%),
            #14170f;
        box-shadow: 0 0 0 1px rgba(160,255,39,.25), 0 30px 60px -30px rgba(160,255,39,.35);
    }
    .pr2-card-badge {
        position: absolute;
        top: -14px;
        right: 28px;
        background: var(--pr2-green);
        color: var(--tp-common-black-3);
        font-size: 12px;
        font-weight: 700;
        padding: 6px 16px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        z-index: 1;
    }
    .pr2-card-price {
        font-family: var(--tp-ff-heading);
        font-size: 34px;
        font-weight: 700;
        color: var(--tp-common-white);
        margin-bottom: 6px;
        position: relative;
        z-index: 1;
    }
    .pr2-card-period { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.55); }
    .pr2-card-desc { color: rgba(255,255,255,.55); font-size: 13px; margin-bottom: 18px; position: relative; z-index: 1; }
    .pr2-card-title { color: var(--pr2-green); font-size: 18px; font-weight: 700; margin-bottom: 16px; position: relative; z-index: 1; }
    .pr2-card-divider {
        display: block;
        height: 1px;
        background: rgba(255,255,255,.1);
        margin-bottom: 22px;
        position: relative;
        z-index: 1;
    }
    .pr2-card-list { position: relative; z-index: 1; }
    .pr2-card-list ul { list-style: none; padding: 0; margin: 0 0 28px; }
    .pr2-card-list li {
        position: relative;
        padding-left: 26px;
        color: rgba(255,255,255,.8);
        font-size: 14px;
        line-height: 1.9;
    }
    .pr2-card-list li::before {
        content: "\f00c";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        color: var(--pr2-green);
        font-size: 12px;
    }
    .pr2-card-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        background: var(--pr2-green);
        color: var(--tp-common-black-3);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        padding: 14px 20px;
        border-radius: 999px;
        transition: background .3s ease, transform .3s ease;
    }
    .pr2-card-btn:hover {
        background: var(--tp-common-white);
        color: var(--tp-common-black-3);
        transform: translateY(-3px);
    }

    /* ---------- Bonus box ---------- */
    .pr2-bonus {
        margin-top: 60px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        padding: 40px;
    }
    .pr2-bonus-title {
        text-align: center;
        color: var(--tp-common-white);
        font-family: var(--tp-ff-heading);
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 34px;
    }
    .pr2-bonus-title span { color: var(--pr2-green); }
    .pr2-bonus-item {
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        padding: 22px;
        height: 100%;
        transition: all .3s ease;
    }
    .pr2-bonus-item:hover {
        border-color: var(--pr2-green);
        transform: translateY(-4px);
    }
    .pr2-bonus-icon {
        width: 42px; height: 42px;
        border-radius: 12px;
        background: rgba(160,255,39,.14);
        color: var(--pr2-green);
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 16px;
        font-size: 16px;
    }
    .pr2-bonus-item h5 { color: var(--tp-common-white); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
    .pr2-bonus-item p { color: rgba(255,255,255,.55); font-size: 13px; margin: 0; }

    /* ---------- Shared badge/heading helpers for the new sections ---------- */
    .pr2-badge {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--pr2-green-deep);
        margin-bottom: 18px;
        position: relative;
        padding-left: 16px;
    }
    .pr2-badge::before {
        content: "";
        position: absolute;
        left: 0; top: 50%;
        transform: translateY(-50%);
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--pr2-green-deep);
    }
    .pr2-badge-dark { color: var(--pr2-green); }
    .pr2-badge-dark::before { background: var(--pr2-green); }
    .pr2-provide-title {
        font-family: var(--tp-ff-heading);
        font-size: clamp(26px, 3.4vw, 38px);
        font-weight: 600;
        line-height: 1.3;
        color: var(--tp-common-white);
        margin: 0 0 40px;
    }
    .pr2-provide-title-dark { color: var(--tp-common-black-3); }
    .pr2-provide-title span {
        font-family: var(--tp-ff-playfair);
        font-style: italic;
        font-weight: 600;
        background: linear-gradient(90deg, #C6FF5C 0%, var(--pr2-green) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .pr2-provide-title-dark span {
        font-family: var(--tp-ff-playfair);
        font-style: italic;
        font-weight: 600;
        background: linear-gradient(90deg, var(--pr2-green-deep) 0%, #6fae00 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* ---------- Reliable reveal-on-scroll (plain IntersectionObserver, no GSAP) ---------- */
    .pr2-reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
    }
    .pr2-reveal.is-visible { opacity: 1; transform: translateY(0); }

    /* ---------- Apart from pricing: services grid ---------- */
    .pr2-provide {
        background:
            radial-gradient(700px 400px at 90% 0%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 70%),
            var(--tp-common-black-3);
        padding: 90px 0;
    }
    .pr2-provide-box {
        text-align: left;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 20px;
        padding: 36px 40px;
        background: radial-gradient(140% 100% at 100% 0%, rgba(160,255,39,.06) 0%, rgba(160,255,39,0) 60%);
    }
    .pr2-provide-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        column-gap: 28px;
        row-gap: 16px;
    }
    .pr2-provide-item {
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(255,255,255,.8);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: color .25s ease;
    }
    .pr2-provide-item i { color: var(--pr2-green); font-size: 13px; }
    .pr2-provide-item:hover { color: var(--tp-common-white); }

    /* ---------- Why choose us table ---------- */
    .pr2-why { background: var(--tp-common-white); padding: 100px 0; }
    .pr2-why-table {
        border: 1px solid var(--tp-border-1);
        border-radius: 18px;
        overflow: hidden;
        text-align: left;
    }
    .pr2-why-row {
        display: grid;
        grid-template-columns: 2.2fr repeat(5, 1fr);
        align-items: center;
    }
    .pr2-why-row:not(:last-child) { border-bottom: 1px solid var(--tp-border-1); }
    .pr2-why-head {
        background: var(--tp-grey-1);
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--tp-common-black-3);
    }
    .pr2-why-cell { padding: 18px 14px; text-align: center; }
    .pr2-why-label {
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: left;
    }
    .pr2-why-label i {
        width: 40px; height: 40px;
        flex-shrink: 0;
        border-radius: 10px;
        background: var(--tp-grey-1);
        display: flex; align-items: center; justify-content: center;
        color: var(--pr2-green-deep);
    }
    .pr2-why-label strong { display: block; font-size: 14px; font-weight: 600; color: var(--tp-common-black-3); }
    .pr2-why-label small { display: block; font-size: 12px; color: var(--tp-text-body); margin-top: 2px; }
    .pr2-why-us {
        background: var(--tp-common-black-3);
        color: var(--tp-common-white);
    }
    .pr2-why-us .pr2-why-label i { background: var(--pr2-green); color: var(--tp-common-black-3); }
    .pr2-why-us .pr2-why-label strong { color: var(--tp-common-white); }
    .pr2-why-us .pr2-why-label small { color: rgba(255,255,255,.6); }
    .pr2-yes { color: #1ab35e; }
    .pr2-no { color: #e5484d; }
    .pr2-why-us .pr2-yes { color: var(--pr2-green); }

    @media (max-width: 991px) {
        .pr2-why-row { grid-template-columns: 1.6fr repeat(5, 1fr); }
        .pr2-why-cell { padding: 14px 6px; font-size: 12px; }
        .pr2-why-label small { display: none; }
    }
    @media (max-width: 700px) {
        .pr2-why-table { overflow-x: auto; }
        .pr2-why-row { grid-template-columns: 160px repeat(5, 90px); width: max-content; min-width: 100%; }
    }

    /* ---------- Head to head compare cards ---------- */
    .pr2-compare {
        background:
            radial-gradient(700px 450px at 10% 100%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 70%),
            radial-gradient(600px 400px at 90% 0%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 70%),
            var(--tp-common-black-3);
        padding: 90px 0;
    }
    .pr2-compare-card {
        background: #17171a;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 18px;
        padding: 36px;
        height: 100%;
    }
    .pr2-compare-card h3 {
        font-family: var(--tp-ff-heading);
        font-size: 22px;
        font-weight: 600;
        line-height: 1.4;
        margin: 4px 0 26px;
        color: var(--tp-common-white);
    }
    .pr2-compare-card h3 span {
        font-family: var(--tp-ff-playfair);
        font-style: italic;
        font-weight: 600;
        background: linear-gradient(90deg, #C6FF5C 0%, var(--pr2-green) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .pr2-compare-table {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
    }
    .pr2-compare-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        align-items: center;
    }
    .pr2-compare-row:nth-child(odd) { background: rgba(255,255,255,.02); }
    .pr2-compare-head {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: rgba(255,255,255,.5);
    }
    .pr2-compare-cell { padding: 14px 6px; text-align: center; font-size: 14px; color: rgba(255,255,255,.8); }
    .pr2-compare-feature { text-align: left; font-weight: 500; }
    .pr2-compare-us-col {
        background: linear-gradient(180deg, rgba(160,255,39,.14), rgba(160,255,39,.05));
        font-weight: 700;
        color: var(--tp-common-white);
        border-left: 1px solid rgba(160,255,39,.35);
        border-right: 1px solid rgba(160,255,39,.35);
    }
    .pr2-compare-head .pr2-compare-us-col {
        border-top: 1px solid rgba(160,255,39,.35);
        border-radius: 10px 10px 0 0;
        color: var(--pr2-green);
    }
    .pr2-compare-row:last-child .pr2-compare-us-col {
        border-bottom: 1px solid rgba(160,255,39,.35);
        border-radius: 0 0 10px 10px;
    }

    /* ---------- Strategic benefits ---------- */
    .pr2-benefits { background: var(--tp-common-white); padding: 90px 0; }
    .pr2-benefits-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
    .pr2-benefit-item {
        background: var(--tp-grey-1);
        border: 1px solid var(--tp-border-1);
        border-radius: 16px;
        padding: 28px 26px;
        text-align: left;
        transition: all .3s ease;
        grid-column: span 3;
    }
    .pr2-benefit-3, .pr2-benefit-4, .pr2-benefit-5 { grid-column: span 2; }
    .pr2-benefit-item:hover {
        border-color: var(--pr2-green-deep);
        background: var(--tp-common-white);
        box-shadow: 0 24px 44px -24px rgba(0,0,0,.18);
        transform: translateY(-6px);
    }
    .pr2-benefit-icon {
        width: 48px; height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(160,255,39,.22), rgba(160,255,39,.08));
        color: var(--pr2-green-deep);
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 18px;
        font-size: 18px;
    }
    .pr2-benefit-item h5 { color: var(--tp-common-black-3); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
    .pr2-benefit-item p { color: var(--tp-text-body); font-size: 13px; margin: 0; line-height: 1.7; }

    @media (max-width: 767px) {
        .pr2-benefits-grid { grid-template-columns: repeat(2, 1fr); }
        .pr2-benefit-item,
        .pr2-benefit-3, .pr2-benefit-4, .pr2-benefit-5 { grid-column: span 2; }
    }

    @media (max-width: 575px) {
        .pr2-section { padding: 40px 0 60px; }
        .pr2-tabs { margin-bottom: 30px; }
        .pr2-section {
            background:
                radial-gradient(320px 260px at 20% 0%, rgba(160,255,39,.16) 0%, rgba(160,255,39,0) 70%),
                radial-gradient(280px 240px at 90% 40%, rgba(160,255,39,.1) 0%, rgba(160,255,39,0) 70%),
                var(--tp-common-black-3);
        }
        .pr2-provide {
            background:
                radial-gradient(300px 240px at 90% 0%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 70%),
                var(--tp-common-black-3);
        }
        .pr2-compare {
            background:
                radial-gradient(300px 240px at 10% 100%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 70%),
                radial-gradient(280px 220px at 90% 0%, rgba(160,255,39,.08) 0%, rgba(160,255,39,0) 70%),
                var(--tp-common-black-3);
        }
        .pr2-cta-box {
            background:
                radial-gradient(280px 220px at 100% 0%, rgba(160,255,39,.14) 0%, rgba(160,255,39,0) 70%),
                var(--tp-common-black-3);
        }
    }

    /* ---------- Work showcase ---------- */
    .pr2-work { background: var(--tp-common-white); padding: 90px 0 70px; }
    .pr2-work-grid {
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: 20px;
    }
    .pr2-work-item-0 { grid-column: 1; grid-row: 1; }
    .pr2-work-item-1 { grid-column: 2; grid-row: 1; }
    .pr2-work-item-2 { grid-column: 1; grid-row: 2; }
    .pr2-work-item-3 { grid-column: 2; grid-row: 2; }
    .pr2-work-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 320px;
        border-radius: 16px;
        background-size: cover;
        background-position: center;
        background-color: var(--tp-grey-1);
        text-decoration: none;
        overflow: hidden;
        padding: 26px;
        text-align: left;
    }
    .pr2-work-item-0 { min-height: 460px; }
    .pr2-work-item-1 { min-height: 220px; }
    .pr2-work-item-2 { min-height: 220px; }
    .pr2-work-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.82) 100%);
        transition: background .35s ease;
    }
    .pr2-work-card:hover .pr2-work-overlay {
        background: linear-gradient(180deg, rgba(160,255,39,0) 25%, rgba(76,140,0,.65) 100%);
    }
    .pr2-work-meta,
    .pr2-work-title,
    .pr2-work-link {
        position: relative;
        z-index: 1;
        color: var(--tp-common-white);
        display: block;
    }
    .pr2-work-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
    .pr2-work-title { font-size: 19px; font-weight: 600; margin-top: 6px; }
    .pr2-work-link {
        margin-top: 16px;
        font-size: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 999px;
        padding: 8px 16px;
        transition: all .3s ease;
    }
    .pr2-work-card:hover .pr2-work-link {
        background: var(--tp-common-white);
        color: var(--tp-common-black-3);
        border-color: var(--tp-common-white);
    }
    .pr2-work-all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 30px;
        color: var(--tp-common-black-3);
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        transition: color .25s ease;
    }
    .pr2-work-all:hover { color: var(--pr2-green-deep); }

    @media (max-width: 767px) {
        .pr2-work-grid { grid-template-columns: 1fr; }
        .pr2-work-item-0, .pr2-work-item-1, .pr2-work-item-2, .pr2-work-item-3 {
            grid-column: 1; min-height: 260px;
        }
        .pr2-work-item-0 { grid-row: 1; }
        .pr2-work-item-1 { grid-row: 2; }
        .pr2-work-item-2 { grid-row: 3; }
        .pr2-work-item-3 { grid-row: 4; }
    }

    /* ---------- Contact CTA box ---------- */
    .pr2-cta { background: var(--tp-grey-1); padding: 0 0 100px; }
    .pr2-cta-box {
        background:
            radial-gradient(600px 400px at 100% 0%, rgba(160,255,39,.14) 0%, rgba(160,255,39,0) 70%),
            var(--tp-common-black-3);
        border-radius: 24px;
        padding: 50px;
        overflow: hidden;
    }
    .pr2-cta-title {
        font-family: var(--tp-ff-heading);
        font-size: 30px;
        font-weight: 600;
        color: var(--tp-common-white);
        line-height: 1.3;
        margin-bottom: 20px;
    }
    .pr2-cta-title span {
        font-family: var(--tp-ff-playfair);
        font-style: italic;
        font-weight: 600;
        background: linear-gradient(90deg, #C6FF5C 0%, var(--pr2-green) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .pr2-cta-points { list-style: none; padding: 0; margin: 0; }
    .pr2-cta-points li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: rgba(255,255,255,.75);
        font-size: 14px;
        margin-bottom: 12px;
    }
    .pr2-cta-points i { color: var(--pr2-green); margin-top: 3px; }
    .pr2-cta-form .tp-contact-form-input label { color: rgba(255,255,255,.75); font-size: 13px; margin-bottom: 6px; display: block; }
    .pr2-cta-form .tp-contact-form-input input,
    .pr2-cta-form .tp-contact-form-input textarea {
        width: 100%;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 10px;
        padding: 12px 16px;
        color: var(--tp-common-white);
        font-size: 14px;
    }
    .pr2-cta-form .tp-contact-form-input textarea { min-height: 110px; resize: vertical; }
    .pr2-budget-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
    .pr2-budget-tag {
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.14);
        color: rgba(255,255,255,.75);
        border-radius: 999px;
        padding: 8px 16px;
        font-size: 13px;
        cursor: pointer;
        transition: all .2s ease;
    }
    .pr2-budget-tag.is-active,
    .pr2-budget-tag:hover {
        background: var(--pr2-green);
        border-color: var(--pr2-green);
        color: var(--tp-common-black-3);
    }
    .pr2-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--pr2-green);
        color: var(--tp-common-black-3);
        border: none;
        border-radius: 999px;
        padding: 14px 26px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all .3s ease;
    }
    .pr2-cta-btn:hover { background: var(--tp-common-white); color: var(--tp-common-black-3); transform: translateY(-3px); }

    .pr2-trust {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 30px;
        padding: 16px 26px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(160,255,39,.1), rgba(160,255,39,.18));
        border: 1px solid rgba(160,255,39,.3);
        color: var(--tp-common-black-3);
        font-size: 14px;
        font-weight: 500;
        text-align: center;
    }
    .pr2-trust i { color: var(--pr2-green-deep); }

    @media (max-width: 767px) {
        .pr2-bonus { padding: 24px; }
        .pr2-card { padding: 26px 22px; }
        .pr2-compare-card { padding: 24px; }
        .pr2-cta-box { padding: 28px; }
    }

/* ==========================================================================
   Refinement layer — consistent surfaces, one easing curve, calmer motion.
   Loaded after the base rules above, so it only upgrades what it names.
   ========================================================================== */
:root {
  --pr2-ease: cubic-bezier(.22, 1, .36, 1);
  --pr2-surface: #131315;
  --pr2-surface-2: #17181a;
  --pr2-line: rgba(255, 255, 255, .1);
  --pr2-line-strong: rgba(255, 255, 255, .18);
  --pr2-ink: #ffffff;
  --pr2-ink-2: rgba(255, 255, 255, .72);
  --pr2-ink-3: rgba(255, 255, 255, .5);
  --pr2-shadow: 0 30px 60px -32px rgba(0, 0, 0, .85);
  --pr2-radius: 20px;
}

/* smooth in-page jumps (billing switch, "other services", CTA) */
html { scroll-behavior: smooth; }

.pr2-section { padding-bottom: 110px; }
.pr2-section :focus-visible,
.pr2-cat-card:focus-visible,
.pr2-other-link:focus-visible {
  outline: 2px solid var(--pr2-green);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---------- service page heading ---------- */
.pr2-service-head { gap: 18px; margin-bottom: 34px; }
.pr2-service-head h2 { letter-spacing: -0.02em; }
.pr2-service-icon {
  border-radius: 16px;
  background: rgba(160, 255, 39, .12);
  border: 1px solid rgba(160, 255, 39, .3);
  transition: transform .45s var(--pr2-ease), background .35s ease;
}
.pr2-service-head:hover .pr2-service-icon { transform: translateY(-3px) rotate(-6deg); background: rgba(160, 255, 39, .2); }

/* ---------- billing switch: sliding pill ---------- */
.pr2-billing {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--pr2-line);
  backdrop-filter: blur(6px);
}
.pr2-billing-btn {
  position: relative;
  border: 0;
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pr2-ink-2);
  background: transparent;
  cursor: pointer;
  transition: color .3s var(--pr2-ease), background .35s var(--pr2-ease), transform .3s var(--pr2-ease);
}
.pr2-billing-btn:hover { color: var(--pr2-ink); transform: translateY(-1px); }
.pr2-billing-btn.is-active {
  background: var(--pr2-green);
  color: #0d1502;
  box-shadow: 0 12px 26px -12px rgba(160, 255, 39, .65);
}

/* ---------- tier sub-tabs ---------- */
.pr2-subtab { transition: all .28s var(--pr2-ease); }
.pr2-subtab:hover { transform: translateY(-2px); }

/* ---------- panes: soft crossfade instead of a hard swap ---------- */
.pr2-billing-pane,
.pr2-subpane,
.pr2-pane { animation: none; }
.pr2-billing-pane.is-active,
.pr2-subpane.is-active,
.pr2-pane.is-active { animation: pr2Rise .45s var(--pr2-ease) both; }
@keyframes pr2Rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- plan cards ---------- */
.pr2-card {
  border-radius: var(--pr2-radius);
  border: 1px solid var(--pr2-line);
  background: linear-gradient(180deg, var(--pr2-surface-2) 0%, var(--pr2-surface) 100%);
  transition: transform .4s var(--pr2-ease), border-color .35s ease, box-shadow .4s var(--pr2-ease);
  will-change: transform;
}
.pr2-card:hover {
  transform: translateY(-8px);
  border-color: rgba(160, 255, 39, .45);
  box-shadow: var(--pr2-shadow);
}
.pr2-card-price { letter-spacing: -0.03em; }
.pr2-card-btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .3s var(--pr2-ease), background .3s ease, color .3s ease, box-shadow .35s var(--pr2-ease);
}
.pr2-card-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(160, 255, 39, .55); }

/* ---------- overview cards ---------- */
.pr2-cat-grid { gap: 22px; }
.pr2-cat-card {
  border-radius: var(--pr2-radius);
  border: 1px solid var(--pr2-line);
  background: linear-gradient(180deg, var(--pr2-surface-2) 0%, var(--pr2-surface) 100%);
  transition: transform .4s var(--pr2-ease), border-color .35s ease, box-shadow .4s var(--pr2-ease);
}
.pr2-cat-card:hover {
  transform: translateY(-8px);
  border-color: rgba(160, 255, 39, .45);
  box-shadow: var(--pr2-shadow);
}
.pr2-cat-icon { transition: transform .45s var(--pr2-ease), background .35s ease, color .35s ease; }
.pr2-cat-card:hover .pr2-cat-icon { transform: translateY(-2px) scale(1.06); }
.pr2-cat-card h3 { letter-spacing: -0.02em; }
.pr2-cat-foot { border-top: 1px solid var(--pr2-line); padding-top: 16px; }
.pr2-cat-cta svg { transition: transform .35s var(--pr2-ease); }
.pr2-cat-card:hover .pr2-cat-cta svg { transform: translate(3px, -3px); }

/* ---------- other services rail ---------- */
.pr2-other { border-top: 1px solid var(--pr2-line); padding-top: 34px; margin-top: 50px; }
.pr2-other-link {
  border-radius: 999px;
  border: 1px solid var(--pr2-line);
  transition: all .3s var(--pr2-ease);
}
.pr2-other-link:hover { transform: translateY(-2px); border-color: var(--pr2-green); }

/* ---------- ecommerce cross-sell ---------- */
.pr2-ecom-cta {
  border-radius: var(--pr2-radius);
  transition: transform .4s var(--pr2-ease), border-color .35s ease, box-shadow .4s var(--pr2-ease);
}
.pr2-ecom-cta:hover { transform: translateY(-4px); box-shadow: var(--pr2-shadow); }
.pr2-ecom-cta-arrow svg { transition: transform .35s var(--pr2-ease); }
.pr2-ecom-cta:hover .pr2-ecom-cta-arrow svg { transform: translate(3px, -3px); }

/* ---------- bonus + comparison blocks ---------- */
.pr2-bonus { border-radius: var(--pr2-radius); }
.pr2-bonus-item {
  border-radius: 16px;
  border: 1px solid var(--pr2-line);
  transition: transform .4s var(--pr2-ease), border-color .35s ease, background .35s ease;
}
.pr2-bonus-item:hover { transform: translateY(-6px); border-color: rgba(160, 255, 39, .4); }
.pr2-bonus-icon { transition: transform .45s var(--pr2-ease), background .35s ease; }
.pr2-bonus-item:hover .pr2-bonus-icon { transform: rotate(-8deg) scale(1.08); }

.pr2-table, .pr2-compare { border-radius: var(--pr2-radius); overflow: hidden; }
.pr2-table tr, .pr2-compare tr { transition: background .25s ease; }
.pr2-table tbody tr:hover, .pr2-compare tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* ---------- reveal: same curve everywhere, honours reduced motion ---------- */
.pr2-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--pr2-ease), transform .7s var(--pr2-ease);
}
.pr2-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pr2-reveal { opacity: 1; transform: none; transition: none; }
  .pr2-section *, .pr2-section *::before, .pr2-section *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 575px) {
  .pr2-billing { width: 100%; overflow-x: auto; justify-content: flex-start; }
  .pr2-billing-btn { flex: 0 0 auto; padding: 10px 18px; font-size: 13px; }
  .pr2-section { padding-bottom: 80px; }
}