html {
    scroll-behavior: smooth
}

:root {
    --rg: #D6336C;
    --rg-lt: #EC6B9C;
    --rg-dk: #A02458;
    --gd: #6C4BA6;
    --gd-lt: #9B7ECF;
    --gd-dk: #4A3278;
    --bdr: rgba(214,51,108,.18);
    --tx-l: #180F1D;
    --mt-l: #6b5a70;
    --bg: #fefaff3d;
    --surface: #fff;
    --line: #EADFEE;
    --soft: #F5EDF8
}

body {
    font-family: Inter,sans-serif;
    color: var(--tx-l);
    background: #fff;
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

h1, h2 {
    font-family: 'Playfair Display',serif;
    font-weight: 600;
    color: var(--tx-l);
    line-height: 1.18;
    letter-spacing: -.01em;
    margin-bottom: 0
}

h3, h4 {
    font-family: Inter,sans-serif;
    font-weight: 600;
    color: var(--tx-l);
    line-height: 1.3
}

h1 {
    font-size: 62px
}

h2 {
    font-size: 42px
}

h3 {
    font-size: 22px
}

h4 {
    font-size: 16.5px
}

h1 em, h2 em {
    font-style: italic;
    font-weight: 500;
    color: var(--rg)
}

a {
    color: var(--gd)
}

    a:hover {
        text-decoration: none;
        color: var(--rg)
    }

img {
    max-width: 100%
}

/* eyebrow */
.eb {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--rg);
    margin-bottom: 16px
}

    .eb:before {
        content: "";
        width: 30px;
        height: 1px;
        background: currentColor
    }

    .eb.g {
        color: var(--rg-dk)
    }

    .eb.l {
        color: var(--rg)
    }

.vh-hd {
    margin-bottom: 25px
}

    .vh-hd.c {
        text-align: center
    }

        .vh-hd.c .eb:after {
            content: "";
            width: 30px;
            height: 1px;
            background: currentColor
        }

    .vh-hd p {
        color: var(--mt-l);
        font-size: 17px;
        max-width: 620px;
        margin: 14px auto 0
    }

    .vh-hd:not(.c) p {
        margin-left: 0
    }

/* buttons */
.vh-b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    transition: .25s;
    letter-spacing: .01em
}

    .vh-b:hover {
        transform: translateY(-2px)
    }

.vh-gl {
    background: linear-gradient(135deg,var(--rg),var(--gd-lt));
    color: #fff;
    box-shadow: 0 12px 26px rgba(214,51,108,.32)
}

    .vh-gl:hover {
        color: #fff;
        box-shadow: 0 16px 32px rgba(108,75,166,.45)
    }

.vh-ol {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.32)
}

    .vh-ol:hover {
        color: var(--rg-lt);
        border-color: var(--rg)
    }

.vh-ik {
    background: var(--tx-l);
    color: #fff
}

    .vh-ik:hover {
        background: #241647;
        color: #fff;
        box-shadow: 0 24px 60px rgba(24,15,29,.16)
    }

.vh-od {
    background: transparent;
    color: var(--tx-l);
    border-color: var(--line)
}

    .vh-od:hover {
        border-color: var(--rg);
        color: var(--rg-dk)
    }

/* reveal */
.rv {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease var(--d,0s),transform .8s ease var(--d,0s)
}

    .rv.l {
        transform: translateX(-26px)
    }

    .rv.r {
        transform: translateX(26px)
    }

    .rv.in {
        opacity: 1;
        transform: none
    }

/* ===== HERO ===== */
.vh-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 0 60px;
    background: linear-gradient(160deg,rgba(255,250,255,.82),rgba(245,237,248,.72)),url('../images/hero-banner-1.png') center center/cover no-repeat;
    color: var(--tx-l)
}

    .vh-hero > * {
        position: relative;
        z-index: 1
    }

    .vh-hero .container {
        position: relative;
        z-index: 1
    }

    .vh-hero p.lead {
        font-size: 17.5px;
        color: var(--mt-l);
        max-width: 720px;
        margin: 20px 0 30px;
        line-height: 1.75
    }

.vh-pr {
    background: linear-gradient(135deg,var(--rg),var(--gd));
    color: #fff;
    box-shadow: 0 12px 26px rgba(214,51,108,.3)
}

    .vh-pr:hover {
        color: #fff;
        box-shadow: 0 16px 32px rgba(108,75,166,.4)
    }

.vh-sc {
    background: #fff;
    color: var(--gd-dk);
    border: 1.5px solid var(--gd-lt);
    box-shadow: 0 6px 16px rgba(108,75,166,.10)
}

    .vh-sc i {
        color: var(--rg)
    }

    .vh-sc small {
        font-size: 13px;
        font-weight: 500;
        color: var(--mt-l)
    }

        .vh-sc small:before {
            content: "";
            display: inline-block;
            width: 1px;
            height: 14px;
            background: var(--line);
            margin-right: 10px;
            vertical-align: middle
        }

    .vh-sc:hover {
        color: var(--rg-dk);
        border-color: var(--rg);
        box-shadow: 0 12px 26px rgba(214,51,108,.18)
    }

.vh-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px
}

.vh-ln {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none
}

.vh-ln {
    gap: 8px;
    margin: 0 0 22px;
}

    .vh-ln a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 4px 13px 4px 4px;
        border-radius: 30px;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--tx-l);
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.2;
        transition: .25s;
        box-shadow: 0 3px 8px rgba(74,50,120,.06)
    }

        .vh-ln a i {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--soft);
            color: var(--rg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            transition: .25s
        }

        .vh-ln a:hover {
            border-color: var(--rg-lt);
            color: var(--rg-dk);
            transform: translateY(-1px);
            box-shadow: 0 8px 16px rgba(214,51,108,.14)
        }

            .vh-ln a:hover i {
                background: linear-gradient(135deg,var(--rg),var(--gd));
                color: #fff
            }

.vh-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    list-style: none;
    padding: 20px 0 0;
    margin: 0;
    font-size: 13.5px;
    color: var(--mt-l);
    border-top: 1px solid var(--line);
    max-width: 520px
}

    .vh-trust i {
        color: var(--rg);
        margin-right: 8px
    }

/* phone mockup */
.vh-phw {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
    padding: 10px 0 26px;
}

    .vh-phw:before {
        content: "";
        position: absolute;
        left: 50%;
        top: 48%;
        width: 420px;
        height: 420px;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        background: radial-gradient(circle,rgba(214,51,108,.20),rgba(108,75,166,.16) 55%,transparent 72%)
    }

    .vh-phw:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 8px;
        width: 230px;
        height: 22px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(74,50,120,.35),transparent 70%);
        filter: blur(4px)
    }

.vh-phone {
    position: relative;
    z-index: 1;
    width: 280px;
    margin: 0 auto;
    padding: 10px;
    border-radius: 48px;
    background: linear-gradient(145deg,#3a2f52,#17102A 45%,#2b2145);
    box-shadow: 0 40px 80px rgba(74,50,120,.35),0 0 0 1.5px #5a4e78 inset
}

    .vh-phone:before {
        content: "";
        position: absolute;
        right: -3px;
        top: 120px;
        width: 3px;
        height: 58px;
        border-radius: 0 3px 3px 0;
        background: #2c2142
    }

    .vh-phone:after {
        content: "";
        position: absolute;
        left: -3px;
        top: 96px;
        width: 3px;
        height: 34px;
        border-radius: 3px 0 0 3px;
        background: #2c2142;
        box-shadow: 0 48px 0 #2c2142
    }

    .vh-phone .notch {
        position: absolute;
        top: 19px;
        left: 50%;
        transform: translateX(-50%);
        width: 84px;
        height: 24px;
        background: #0b0714;
        border-radius: 14px;
        z-index: 5
    }

.vh-scr {
    position: relative;
    background: #fff;
    border-radius: 39px;
    overflow: hidden
}

    .vh-scr .st {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 26px 6px;
        font-size: 12px;
        color: var(--tx-l)
    }

        .vh-scr .st i {
            font-size: 11px;
            margin-left: 5px
        }

.vh-sl {
    position: relative
}

.vh-sd {
    display: flex;
    flex-direction: column;
    height: 446px
}

    .vh-sd .im {
        flex: none;
        height: 160px;
        position: relative;
        margin: 6px 12px 0;
        border-radius: 24px;
        overflow: hidden;
        background: linear-gradient(160deg,var(--soft),#fff)
    }

        .vh-sd .im .fb {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            font-size: 84px;
            color: var(--c);
            opacity: .14
        }

        .vh-sd .im img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

.carousel-item.active .im img {
    animation: vhIn .8s both
}

@keyframes vhIn {
    from {
        opacity: 0;
        transform: scale(1.06)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.vh-sd .tx {
    flex: 1;
    padding: 16px 20px 0;
    display: flex;
    flex-direction: column;
    text-align: left
}

.vh-sd .kk {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c);
    margin-bottom: 6px
}

.vh-sd h3 {
    font-family: 'Playfair Display',serif;
    font-weight: 600;
    font-size: 21px;
    margin: 0 0 6px;
    line-height: 1.2
}

.vh-sd p {
    font-size: 12.5px;
    color: var(--mt-l);
    margin: 0 0 auto;
    line-height: 1.55
}

.vh-sd .ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 12px 0 2px;
    border-top: 1px solid var(--line)
}

.vh-sd .pr {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx-l)
}

.vh-sd .go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--c);
    color: #fff;
    font-weight: 600;
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 30px;
    transition: .2s
}

    .vh-sd .go i {
        font-size: 10px;
        transition: .2s
    }

    .vh-sd .go:hover {
        color: #fff;
        filter: brightness(1.1)
    }

        .vh-sd .go:hover i {
            transform: translateX(3px)
        }

.vh-sf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 0
}

.vh-dots {
    display: flex;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0
}

    .vh-dots li {
        width: 6px;
        height: 6px;
        border-radius: 4px;
        background: #D9D2E6;
        cursor: pointer;
        transition: .3s
    }

        .vh-dots li.active {
            width: 22px;
            background: linear-gradient(90deg,var(--rg),var(--gd))
        }

.vh-ar {
    display: flex;
    gap: 7px
}

    .vh-ar a {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--soft);
        color: var(--gd);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        transition: .2s
    }

        .vh-ar a:hover {
            background: var(--gd);
            color: #fff
        }

.vh-scr .hb {
    display: block;
    width: 104px;
    height: 4px;
    border-radius: 3px;
    background: #17102A;
    margin: 8px auto 9px;
    opacity: .85
}

/* ===== STATS BAR ===== */
.vh-bart.rv {
    margin-top: -38px;
    position: relative;
    z-index: 3;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(23,16,42,.14);
    border: 1px solid var(--line);
    overflow: hidden
}

    .vh-bart.rv:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: linear-gradient(90deg,var(--rg),var(--gd))
    }

.vh-bart .c {
    display: flex;
    align-items: center;
    padding: 20px 22px 16px
}

.vh-bart.rv .col-6:not(:first-child) .c, .vh-bart.rv .col-lg-3:not(:first-child) .c {
    border-left: 1px solid var(--line)
}

.vh-bart.rv .ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg,var(--rg),var(--gd));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 12px;
    box-shadow: 0 6px 14px rgba(214,51,108,.25)
}

.vh-bart.rv b {
    display: block;
    font-family: 'Playfair Display',serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    color: var(--tx-l)
}

.vh-bart.rv span.t {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-l);
    margin-top: 5px;
    letter-spacing: .1em;
    text-transform: uppercase
}

/* ===== SECTIONS ===== */
.vh-sec {
    padding: 46px 0
}

.vh-alt {
    background: var(--soft)
}

/* ===== ABOUT ===== */
.vh-feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.vh-ab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
    transition: .25s
}

    .vh-ab:hover {
        border-color: var(--rg-lt);
        box-shadow: 0 12px 26px rgba(74,50,120,.10);
        transform: translateY(-2px)
    }

    .vh-ab:last-child {
        grid-column: 1/-1
    }

    .vh-ab .ic {
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--soft);
        color: var(--gd);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: .25s
    }

    .vh-ab:hover .ic {
        background: linear-gradient(135deg,var(--rg),var(--gd));
        color: #fff
    }

    .vh-ab h4 {
        margin: 0 0 2px;
        font-size: 15px
    }

    .vh-ab p {
        margin: 0;
        color: var(--mt-l);
        font-size: 13.5px;
        line-height: 1.5
    }

@media(max-width:575px) {
    .vh-feat {
        grid-template-columns: 1fr
    }
}

/* ===== EXPLORE (dark) ===== */
.vh-xp {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 20px;
    padding: 34px 28px;
    background: linear-gradient(165deg,#241647,#150E2B);
    color: #fff;
    box-shadow: 0 24px 60px rgba(24,15,29,.16)
}

    .vh-xp:before {
        content: "";
        position: absolute;
        right: -80px;
        top: -80px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(214,51,108,.35),transparent 70%)
    }

    .vh-xp > * {
        position: relative
    }

    .vh-xp h3 {
        font-family: 'Playfair Display',serif;
        font-weight: 600;
        font-size: 26px;
        color: #fff;
        margin: 0 0 4px
    }

    .vh-xp .sub {
        color: rgba(255,255,255,.62);
        font-size: 14.5px;
        margin: 0 0 18px
    }

.vh-ql a {
    display: flex;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.92);
    font-size: 15.5px;
    font-weight: 500;
    transition: .25s
}

    .vh-ql a:last-child {
        border-bottom: 0
    }

    .vh-ql a .ic {
        flex: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(236,107,156,.45);
        color: var(--rg-lt);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        font-size: 13px;
        transition: .25s
    }

    .vh-ql a i.go {
        margin-left: auto;
        font-size: 11px;
        color: rgba(255,255,255,.4);
        transition: .25s
    }

    .vh-ql a:hover {
        color: var(--rg-lt);
        padding-left: 6px
    }

        .vh-ql a:hover .ic {
            background: var(--rg);
            color: #fff;
            border-color: var(--rg)
        }

        .vh-ql a:hover i.go {
            color: var(--rg-lt);
            transform: translateX(4px)
        }

.vh-app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px
}

    .vh-app a {
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(255,255,255,.25);
        color: #fff;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.15;
        transition: .25s
    }

        .vh-app a i {
            font-size: 20px
        }

        .vh-app a small {
            display: block;
            font-size: 9px;
            font-weight: 400;
            opacity: .75
        }

        .vh-app a:hover {
            color: #fff;
            background: var(--rg);
            border-color: var(--rg)
        }

/* ===== CHOOSE CARD ===== */
.vh-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 30px
}

    .vh-pills .nav-link {
        display: flex;
        align-items: center;
        padding: 11px 22px;
        border-radius: 40px;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--tx-l);
        font-weight: 600;
        font-size: 14.5px;
        transition: .25s
    }

        .vh-pills .nav-link i {
            margin-right: 9px;
            color: var(--rg-dk)
        }

        .vh-pills .nav-link:hover {
            border-color: var(--rg)
        }

        .vh-pills .nav-link.active {
            background: var(--tx-l);
            border-color: var(--tx-l);
            color: #fff
        }

            .vh-pills .nav-link.active i {
                color: var(--soft)
            }

.vh-pn {
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(24,15,29,.07);
    overflow: hidden
}

    .vh-pn .tx {
        padding: 36px 40px
    }

    .vh-pn h3 {
        font-family: 'Playfair Display',serif;
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 6px
    }

.vh-from {
    display: inline-block;
    color: var(--rg-dk);
    border: 1px solid var(--rg-lt);
    background: var(--soft);
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 13.5px;
    margin: 6px 0 20px
}

.vh-li {
    list-style: none;
    padding: 0;
    margin: 0 0 26px
}

    .vh-li li {
        display: flex;
        align-items: flex-start;
        padding: 6px 0;
        font-size: 15.5px;
        color: #3b3350
    }

        .vh-li li i {
            flex: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--tx-l);
            color: var(--soft);
            font-size: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 4px 12px 0 0
        }

.vh-pn .im {
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(circle at 50% 45%,var(--soft),var(--soft) 75%);
    padding: 16px
}

    .vh-pn .im .fb {
        position: absolute;
        font-size: 110px;
        color: var(--gd);
        opacity: .08
    }

    .vh-pn .im img {
        position: relative;
        width: 90%;
        height: auto;
        max-height: 300px;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 22px 44px rgba(23,16,42,.28);
        transition: .4s
    }

.vh-qrg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,100px);
    gap: 18px
}

    .vh-qrg span {
        width: 100px;
        height: 100px;
        border-radius: 26px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(24,15,29,.16);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        color: var(--c)
    }

        .vh-qrg span:nth-child(even) {
            transform: translateY(22px)
        }

.vh-pn:hover .im img {
    transform: scale(1.04)
}

.tab-pane.active .vh-pn {
    animation: vhU .45s both
}

@keyframes vhU {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* ===== SUITE ===== */
.vh-f {
    display: block;
    height: 100%;
    padding: 30px 26px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--tx-l);
    transition: .3s;
    position: relative;
    overflow: hidden
}

    .vh-f:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 2px;
        width: 0;
        background: linear-gradient(90deg,var(--rg),var(--gd));
        transition: .4s
    }

    .vh-f:hover {
        color: var(--tx-l);
        transform: translateY(-5px);
        box-shadow: 0 24px 60px rgba(24,15,29,.16);
        border-color: transparent
    }

        .vh-f:hover:before {
            width: 100%
        }

    .vh-f .ic {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: var(--soft);
        border: 1px solid var(--rg-lt);
        color: var(--rg-dk);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        margin-bottom: 20px;
        transition: .3s
    }

    .vh-f:hover .ic {
        background: var(--tx-l);
        color: var(--soft);
        border-color: var(--tx-l)
    }

    .vh-f h3 {
        font-size: 18px;
        margin-bottom: 7px
    }

    .vh-f p {
        color: var(--mt-l);
        font-size: 14.5px;
        margin: 0 0 14px;
        line-height: 1.6
    }

    .vh-f .m {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--rg)
    }

        .vh-f .m i {
            margin-left: 6px;
            transition: .2s
        }

    .vh-f:hover .m i {
        transform: translateX(5px)
    }

.vh-team {
    margin-top: 34px;
    border-radius: 20px;
    padding: 36px;
    background: linear-gradient(135deg,#241647,#150E2B);
    color: #fff;
    position: relative;
    overflow: hidden
}

    .vh-team:before {
        content: "";
        position: absolute;
        left: -60px;
        bottom: -90px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(214,51,108,.3),transparent 70%)
    }

    .vh-team .row {
        position: relative
    }

    .vh-team h3 {
        font-family: 'Playfair Display',serif;
        font-size: 28px;
        font-weight: 600;
        color: #fff;
        margin-top: 2px
    }

    .vh-team p {
        color: rgba(255,255,255,.7);
        margin: 6px 0 0;
        font-size: 15px
    }

.vh-tm {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 16px;
    height: 100%;
    color: #fff;
    transition: .25s
}

    .vh-tm:hover {
        color: #fff;
        border-color: var(--rg);
        background: rgba(255,255,255,.1);
        transform: translateY(-3px)
    }

    .vh-tm i {
        flex: none;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(236,107,156,.45);
        color: var(--rg-lt);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 13px;
        font-size: 15px
    }

    .vh-tm h4 {
        margin: 0;
        color: #fff;
        font-size: 15.5px
    }

    .vh-tm small {
        color: rgba(255,255,255,.6);
        font-size: 12.5px;
        line-height: 1.4;
        display: inline-block
    }

/* ===== CRM ===== */
.vh-dk {
    background: radial-gradient(520px 320px at 100% 0%,rgba(214,51,108,.30),transparent 62%),radial-gradient(480px 300px at 0% 100%,rgba(108,75,166,.38),transparent 62%),linear-gradient(135deg,#120C21 0%,#1D1238 60%,#2A1B4D 100%);
    color: #fff
}

    .vh-dk.vh-sec {
        padding: 30px 0
    }

    .vh-dk h2 {
        color: #fff;
        font-size: 42px
    }

        .vh-dk h2 em {
            color: var(--rg-lt)
        }

    .vh-dk .eb {
        color: #FFD9E6;
        margin-bottom: 12px
    }

.vh-wt {
    background: linear-gradient(135deg,var(--rg),var(--gd));
    color: #fff;
    box-shadow: 0 12px 26px rgba(214,51,108,.32)
}

    .vh-wt:hover {
        color: #fff;
        box-shadow: 0 16px 32px rgba(108,75,166,.45)
    }

.vh-fl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 16px
}

    .vh-fl span {
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(255,255,255,.3);
        padding: 6px 14px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 500;
        color: #fff
    }

    .vh-fl i {
        color: #FFD9E6;
        margin-right: 7px
    }

.vh-cls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 26px;
    margin-bottom: 8px
}

.vh-cl {
    display: flex;
    align-items: center;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 14.5px;
    font-weight: 500;
    transition: .25s
}

    .vh-cl i:first-child {
        width: 28px;
        color: #FFD9E6;
        font-size: 14px
    }

    .vh-cl i.go {
        margin-left: auto;
        font-size: 10px;
        opacity: .55;
        transition: .2s
    }

    .vh-cl:hover {
        color: #FFD9E6;
        padding-left: 8px
    }

        .vh-cl:hover i.go {
            opacity: 1;
            transform: translateX(3px)
        }

.vh-dash {
    background: #fff;
    color: var(--tx-l);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 26px 60px rgba(30,10,60,.4);
    border-top: 3px solid var(--rg-lt)
}

    .vh-dash h4 {
        font-size: 15px;
        margin-bottom: 14px
    }

.vh-d4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin-bottom: 10px
}

    .vh-d4 div {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 12px;
        text-align: center;
        padding: 11px 2px;
        line-height: 1.2
    }

    .vh-d4 b {
        display: block;
        font-family: 'Roboto',serif;
        font-size: 16px;
        font-weight: 600;
        color: var(--gd-dk)
    }

    .vh-d4 span {
        font-size: 11px;
        color: var(--mt-l)
    }

.vh-dl {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-weight: 500
}

    .vh-dl i.a {
        flex: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(135deg,var(--rg),var(--gd));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin-right: 12px;
        font-style: normal;
        font-weight: 600
    }

    .vh-dl span {
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        padding: 3px 11px;
        border-radius: 12px;
        background: #E3F6EC;
        color: #178a4c
    }

        .vh-dl span.p {
            background: #FFF1D6;
            color: #9b5d1c
        }

.vh-ai {
    margin-top: 10px;
    padding: 10px 13px;
    border-radius: 10px;
    background: var(--soft);
    font-size: 12.5px;
    color: var(--mt-l)
}

    .vh-ai i {
        color: var(--rg);
        margin-right: 8px
    }

.vh-note {
    font-size: 11px;
    color: var(--mt-l);
    margin: 8px 0 0
}

@media(max-width:1200px) {
    .vh-d4 {
        display: grid;
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:575px) {
    .vh-cls {
        grid-template-columns: 1fr
    }
}

/* ===== MAD ===== */
.vh-mad {
    padding: 48px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--rg-lt);
    box-shadow: 0 10px 30px rgba(24,15,29,.07);
    position: relative
}

    .vh-mad:before {
        content: "";
        position: absolute;
        left: 48px;
        top: -1px;
        width: 80px;
        height: 3px;
        background: linear-gradient(90deg,var(--rg),var(--gd))
    }

.vh-chip {
    display: inline-flex;
    align-items: center;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 9px 18px;
    margin: 0 8px 10px 0;
    font-size: 14px;
    font-weight: 500
}

    .vh-chip i {
        color: var(--rg-dk);
        margin-right: 9px
    }

/* ===== STEPS ===== */
.vh-st {
    text-align: center;
    padding: 0 18px
}

    .vh-st .no {
        width: 64px;
        height: 64px;
        line-height: 62px;
        border-radius: 50%;
        margin: 0 auto 18px;
        background: #fff;
        border: 1px solid var(--rg);
        color: var(--rg-dk);
        font-family: 'Playfair Display',serif;
        font-size: 26px;
        font-weight: 600;
        box-shadow: 0 0 0 6px var(--soft)
    }

    .vh-st h3 {
        font-size: 18px;
        margin-bottom: 7px
    }

    .vh-st p {
        color: var(--mt-l);
        font-size: 14.5px;
        margin: 0
    }

@media(min-width:768px) {
    .vh-st {
        position: relative
    }

        .vh-st:not(:last-child):after {
            content: "";
            position: absolute;
            top: 32px;
            left: calc(50% + 46px);
            right: calc(-50% + 46px);
            border-top: 1px dashed var(--rg)
        }
}

/* ===== FAQ ===== */
.vh-fq {
    padding: 34px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    height: 100%
}

    .vh-fq h2 {
        font-size: 42px
    }

    .vh-fq p {
        color: var(--mt-l);
        font-size: 15px
    }

    .vh-fq .ct {
        display: flex;
        align-items: center;
        margin-top: 12px;
        padding: 13px 16px;
        border-radius: 12px;
        border: 1px solid var(--line);
        color: var(--tx-l);
        font-weight: 500;
        font-size: 14.5px;
        transition: .2s
    }

        .vh-fq .ct i {
            width: 30px;
            color: var(--rg-dk)
        }

        .vh-fq .ct:hover {
            background: var(--tx-l);
            color: #fff;
            border-color: var(--tx-l)
        }

            .vh-fq .ct:hover i {
                color: var(--rg)
            }

.vh-q {
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--line);
    margin-bottom: 12px;
    overflow: hidden;
    transition: .25s
}

    .vh-q.open {
        border-color: var(--rg);
        box-shadow: 0 10px 30px rgba(24,15,29,.07)
    }

    .vh-q button {
        width: 100%;
        text-align: left;
        border: 0;
        background: none;
        padding: 5px 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: var(--tx-l)
    }

        .vh-q button:focus {
            outline: none
        }

    .vh-q h3 {
        margin: 0;
        flex: 1;
        padding-right: 12px;
        font-size: 18px;
        font-weight:600;
        line-height:1.4;
        padding-block:10px;
    }

    .vh-q .n {
        flex: none;
        font-family: 'Playfair Display',serif;
        font-weight: 500;
        font-size: 17px;
        color: var(--rg);
        margin-right: 16px
    }

    .vh-q .pl {
        flex: none;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--line);
        color: var(--tx-l);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        transition: .25s
    }

    .vh-q button:not(.collapsed) .pl {
        transform: rotate(45deg);
        background: var(--tx-l);
        border-color: var(--tx-l);
        color: var(--rg)
    }

    .vh-q .a {
        padding: 0 22px 20px 56px;
        color: var(--mt-l);
        font-size: 15px
    }

/* ===== CTA ===== */
.vh-end {
    padding: 80px 0;
    color: #fff;
    background: radial-gradient(600px 300px at 100% 0%,rgba(214,51,108,.35),transparent 60%),linear-gradient(120deg,#120C21,#2A1B4D)
}

    .vh-end h2 {
        color: #fff;
        font-size: 36px
    }

        .vh-end h2 em {
            color: var(--rg-lt)
        }

    .vh-end p {
        color: rgba(255,255,255,.75);
        font-size: 17px;
        max-width: 520px;
        margin: 12px 0 0
    }

.vh-foot {
    text-align: center;
    color: var(--mt-l);
    font-size: 13px;
    padding: 18px 0;
    background: #fff
}

@media(max-width:991px) {
    h1 {
        font-size: 42px
    }

    h2, .vh-end h2 {
        font-size: 32px
    }

    .vh-hero {
        padding: 64px 0 110px
    }

    .vh-sec {
        padding: 50px 0
    }

    .vh-pn .tx {
        padding: 30px
    }

    .vh-bart .col-lg-3:nth-child(3) .c {
        border-left: 0
    }

    .vh-bart .c {
        padding: 14px 16px
    }
}

@media(max-width:575px) {
    h1 {
        font-size: 34px
    }

    h2, .vh-end h2 {
        font-size: 28px
    }

    .vh-b {
        width: 100%
    }

    .vh-sec {
        padding: 36px 0
    }

    .vh-mad, .vh-team, .vh-fq {
        padding: 26px
    }

        .vh-mad:before {
            left: 26px
        }

    .vh-q .a {
        padding-left: 22px
    }

    .vh-d4 {
        grid-template-columns: repeat(2,1fr)
    }

    .vh-bart b {
        font-size: 23px
    }

    .vh-bart .ic {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        font-size: 12px;
        border-radius: 10px
    }

    .vh-bart span.t {
        font-size: 10px
    }

    .vh-bart .c {
        padding: 14px 12px
    }

    .vh-bart .col-6:nth-child(even) .c {
        border-left: 1px solid var(--line)
    }

    .vh-bart .col-6:nth-child(odd) .c {
        border-left: 0
    }

    .vh-bart .col-6:nth-child(n+3) .c {
        border-top: 1px solid var(--line)
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    .rv {
        opacity: 1;
        transform: none
    }
}

/* ===== .im images: cover ===== */
.vh-pn .row > .col-md-6:not(.tx) {
    display: flex
}

.vh-pn .im {
    flex: 1;
    height: auto;
    min-height: 320px;
    padding: 0;
    overflow: hidden
}

    .vh-pn .im img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        border-radius: 0;
        box-shadow: none
    }

/* ===== ADDITIONS ===== */
.vh-pr small {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.85)
}

    .vh-pr small:before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 14px;
        background: rgba(255,255,255,.45);
        margin-right: 10px;
        vertical-align: middle
    }

.vh-phw {
    padding: 10px 0 26px;
}

.vh-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(108,75,166,.30);
    transform: translate(-50%,-50%);
    animation: vhSp 40s linear infinite;
    pointer-events: none
}

    .vh-ring.r1 {
        width: 370px;
        height: 370px
    }

    .vh-ring.r2 {
        width: 480px;
        height: 480px;
        border-color: rgba(214,51,108,.22);
        animation-direction: reverse;
        animation-duration: 60s
    }

    .vh-ring:before {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--rg);
        box-shadow: 0 0 0 5px rgba(214,51,108,.15)
    }

    .vh-ring.r2:before {
        background: var(--gd);
        box-shadow: 0 0 0 5px rgba(108,75,166,.15)
    }

@keyframes vhSp {
    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

@media(max-width:575px) {
    .vh-ring.r2 {
        display: none
    }
}

.vh-ab:last-child {
    grid-column: auto
}

#cards.vh-alt {
    position: relative;
    background: radial-gradient(620px 360px at 0% 0%,rgba(214,51,108,.13),transparent 62%),radial-gradient(680px 420px at 100% 100%,rgba(108,75,166,.18),transparent 62%),linear-gradient(160deg,#fff 0%,#F8EFFB 55%,#EFE3F7 100%)
}

    #cards.vh-alt:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(108,75,166,.12) 1.2px,transparent 1.2px);
        background-size: 26px 26px;
        -webkit-mask-image: linear-gradient(180deg,#000 0%,transparent 55%);
        mask-image: linear-gradient(180deg,#000 0%,transparent 55%)
    }

#cards .container {
    position: relative
}

.vh-pn .tx {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg,#fff 0%,#FBF3FD 100%);
    border-right: 1px solid var(--line)
}

    .vh-pn .tx:before {
        content: "";
        position: absolute;
        right: -70px;
        top: -70px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(214,51,108,.14),transparent 70%)
    }

    .vh-pn .tx:after {
        content: "";
        position: absolute;
        left: 0;
        top: 28px;
        bottom: 28px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: linear-gradient(180deg,var(--rg),var(--gd))
    }

    .vh-pn .tx > * {
        position: relative;
        z-index: 1
    }

.vh-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gd-dk);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 5px 14px 5px 6px
}

    .vh-tag i {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #fff;
        background: linear-gradient(135deg,var(--rg),var(--gd))
    }

.vh-best {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px dashed var(--rg-lt);
    background: rgba(214,51,108,.05);
    font-size: 14px;
    color: var(--mt-l);
    line-height: 1.4
}

    .vh-best > i {
        flex: none;
        color: var(--rg);
        font-size: 16px
    }

    .vh-best b {
        display: block;
        font-size: 10.5px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--rg-dk);
        margin-bottom: 1px
    }

.vh-sm {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gd-dk);
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line)
}

@media(max-width:767px) {
    .vh-pn .tx {
        border-right: 0
    }

        .vh-pn .tx:after {
            display: none
        }
}

.vh-team .vh-b {
    padding: 12px 22px;
    font-size: 14px
}

.vh-note {
    font-size: 12.5px;
    color: #4d3f52
}

.vh-mad h2 {
    font-size: 38px
}

@media(max-width:991px) {
    .vh-mad h2 {
        font-size: 30px
    }
}

.vh-fq .ct.pri {
    background: linear-gradient(135deg,var(--rg),var(--gd));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(214,51,108,.25)
}

    .vh-fq .ct.pri i {
        color: #fff
    }

    .vh-fq .ct.pri:hover {
        color: #fff;
        background: linear-gradient(135deg,var(--rg-dk),var(--gd-dk));
        border-color: transparent
    }

.vh-end p {
    max-width: 640px;
    color: rgba(255,255,255,.88)
}

.vh-pp {
    margin: 8px 0 6px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mt-l);
    max-width: 440px
}

.vh-pn .vh-li {
    margin: 0 0 18px
}

    .vh-pn .vh-li li {
        padding: 4px 0;
        font-size: 14.5px;
        line-height: 1.5;
        color: #3b3350
    }

        .vh-pn .vh-li li i {
            width: 18px;
            height: 18px;
            font-size: 8px;
            margin: 4px 11px 0 0;
            background: linear-gradient(135deg,var(--rg),var(--gd));
            color: #fff
        }

.vh-best {
    margin: 0 0 22px;
    padding: 9px 14px;
    font-size: 13.5px
}

.vh-sd .im {
    height: 146px
}

.vh-bd {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 10px 0 0
}

    .vh-bd span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 10.5px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 20px;
        background: var(--soft);
        border: 1px solid var(--line);
        color: var(--gd-dk)
    }

    .vh-bd i {
        color: var(--c);
        font-size: 9.5px
    }

.vh-dots li {
    position: relative
}

    .vh-dots li:after {
        content: "";
        position: absolute;
        left: -4px;
        right: -4px;
        top: -9px;
        bottom: -9px
    }

.vh-bart.rv {
    border-radius: 18px;
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px rgba(23,16,42,.10)
}

    .vh-bart.rv:before {
        display: none
    }

    .vh-bart.rv .c {
        padding: 26px 28px;
        transition: background .25s
    }

        .vh-bart.rv .c:hover {
            background: linear-gradient(180deg,#fff,var(--soft))
        }

    .vh-bart.rv .ic {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        margin-right: 16px;
        font-size: 17px;
        background: var(--soft);
        color: var(--rg);
        box-shadow: none;
        border: 1px solid var(--line);
        transition: .25s
    }

    .vh-bart.rv .c:hover .ic {
        background: linear-gradient(135deg,var(--rg),var(--gd));
        color: #fff;
        border-color: transparent
    }

    .vh-bart.rv b {
        font-size: 32px;
        letter-spacing: -.01em
    }

        .vh-bart.rv b em {
            font-style: normal;
            font-size: .62em;
            font-weight: 600;
            color: var(--rg);
            margin-left: 2px
        }

    .vh-bart.rv span.t {
        margin-top: 7px;
        font-size: 11px;
        letter-spacing: .12em
    }

@media(max-width:991px) {
    .vh-bart.rv .c {
        padding: 20px 18px
    }
}

@media(max-width:575px) {
    .vh-bart.rv {
        margin-top: -30px
    }

        .vh-bart.rv .c {
            padding: 16px 14px
        }

        .vh-bart.rv .ic {
            width: 36px;
            height: 36px;
            border-radius: 11px;
            margin-right: 10px;
            font-size: 13px
        }

        .vh-bart.rv b {
            font-size: 24px
        }

        .vh-bart.rv span.t {
            font-size: 9.5px;
            letter-spacing: .08em
        }
}

/* ===== OFFER / ADVERTISEMENT ===== */
.vh-adv {
    padding-top: 50px;
    padding-bottom: 0
}

.vh-adbox {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background: radial-gradient(520px 320px at 0% 0%,rgba(214,51,108,.38),transparent 62%),radial-gradient(520px 340px at 100% 100%,rgba(108,75,166,.45),transparent 62%),linear-gradient(135deg,#120C21 0%,#1D1238 60%,#2A1B4D 100%);
    box-shadow: 0 30px 70px rgba(24,15,29,.28)
}

    .vh-adbox .adl {
        padding: 50px 46px
    }

    .vh-adbox .adr {
        padding: 34px 34px 34px 8px;
        display: flex;
        align-items: center
    }

.vh-rib {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg,var(--rg),#ff8a3d);
    box-shadow: 0 8px 20px rgba(214,51,108,.4);
    margin-bottom: 18px
}

.vh-adbox h2 {
    color: #fff;
    font-size: 40px
}

    .vh-adbox h2 em {
        color: var(--rg-lt)
    }

.vh-adbox .adl > p {
    color: rgba(255,255,255,.82);
    font-size: 16.5px;
    max-width: 520px;
    margin: 12px 0 22px
}

.vh-cd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px
}

    .vh-cd .lb {
        width: 100%;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #FFD9E6
    }

        .vh-cd .lb i {
            margin-right: 8px
        }

    .vh-cd .bx {
        min-width: 68px;
        text-align: center;
        padding: 10px 8px;
        border-radius: 14px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.18)
    }

        .vh-cd .bx b {
            display: block;
            font-family: 'Playfair Display',serif;
            font-size: 28px;
            line-height: 1.1;
            color: #fff;
            font-variant-numeric: tabular-nums
        }

        .vh-cd .bx small {
            font-size: 10px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(255,255,255,.65)
        }

.vh-adc {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px
}

.vh-adt {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: rgba(255,255,255,.8)
}

    .vh-adt i {
        color: #6fe0a4;
        margin-right: 7px
    }

.vh-cmp {
    width: 100%;
    background: #fff;
    color: var(--tx-l);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 22px 50px rgba(0,0,0,.3);
    border-top: 3px solid var(--rg-lt)
}

    .vh-cmp h4 {
        font-size: 15px;
        margin-bottom: 14px
    }

    .vh-cmp .hd, .vh-cmp .rw {
        display: grid;
        grid-template-columns: 1.05fr 1fr 1.2fr;
        gap: 8px;
        align-items: center
    }

    .vh-cmp .hd {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--mt-l);
        padding-bottom: 8px
    }

        .vh-cmp .hd .v {
            color: var(--rg-dk)
        }

    .vh-cmp .rw {
        padding: 11px 0;
        border-top: 1px solid var(--line);
        font-size: 13px;
        font-weight: 500
    }

        .vh-cmp .rw .x {
            color: #8a7a90
        }

        .vh-cmp .rw .y {
            color: #178a4c;
            font-weight: 600
        }

        .vh-cmp .rw i {
            font-size: 10px;
            margin-right: 6px
        }

        .vh-cmp .rw .x i {
            color: #d64545
        }

.vh-bn {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    transition: .25s
}

    .vh-bn:hover {
        transform: translateY(-3px);
        border-color: var(--rg-lt);
        box-shadow: 0 16px 34px rgba(74,50,120,.12)
    }

    .vh-bn .ic {
        flex: none;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        color: #fff;
        background: linear-gradient(135deg,var(--rg),var(--gd))
    }

    .vh-bn h4 {
        margin: 0 0 2px;
        font-size: 15.5px
    }

    .vh-bn p {
        margin: 0;
        font-size: 13.5px;
        color: var(--mt-l);
        line-height: 1.5
    }

@media(max-width:991px) {
    .vh-adbox .adl {
        padding: 34px 26px 20px
    }

    .vh-adbox .adr {
        padding: 0 20px 26px
    }

    .vh-adbox h2 {
        font-size: 30px
    }
}

@media(max-width:575px) {
    .vh-cd .bx {
        min-width: calc(25% - 8px)
    }

        .vh-cd .bx b {
            font-size: 22px
        }

    .vh-cmp .hd, .vh-cmp .rw {
        grid-template-columns: 1fr 1fr 1.2fr;
        font-size: 12px
    }
}


/* =====================================================
   NEW SECTIONS - paste at the END of asset/css/index.css
   Uses your existing variables (--rg, --gd, --soft, --line ...)
   ===================================================== */

/* ---- Stats (Cost of Silence research) ---- */
.vx-stats {
    background: linear-gradient(135deg,#120C21,#2A1B4D);
    border-radius: 18px;
    padding: 26px 10px;
    color: #fff;
    box-shadow: 0 18px 44px rgba(23,16,42,.18)
}

    .vx-stats .s {
        padding: 6px 22px
    }

        .vx-stats .s b {
            display: block;
            font: 600 34px/1 'Playfair Display',serif;
            color: var(--rg-lt)
        }

        .vx-stats .s span {
            display: block;
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.45;
            color: rgba(255,255,255,.72)
        }

    .vx-stats .src {
        font-size: 12px;
        color: rgba(255,255,255,.6);
        margin: 16px 22px 0;
        line-height: 1.5
    }

@media(min-width:992px) {
    .vx-stats .col-lg-3:not(:first-child) .s {
        border-left: 1px solid rgba(255,255,255,.14)
    }
}

/* ---- Leaks list ---- */
.vx-leaks {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 24px
}

    .vx-leaks li {
        padding-left: 14px;
        border-left: 3px solid var(--rg)
    }

    .vx-leaks b {
        display: block;
        font-size: 16px
    }

    .vx-leaks span {
        color: var(--mt-l);
        font-size: 15px
    }

/* ---- Calculator ---- */
.vx-calc {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(24,15,29,.07)
}

    .vx-calc label, .vx-lead label {
        display: block;
        font-weight: 600;
        font-size: 13.5px;
        margin-bottom: 14px
    }

    .vx-calc input, .vx-calc select, .vx-lead input, .vx-lead select {
        display: block;
        width: 100%;
        margin-top: 6px;
        padding: 11px 14px;
        border: 1.5px solid var(--line);
        border-radius: 12px;
        font: 500 15.5px Inter,sans-serif;
        color: var(--tx-l);
        background: #fff
    }

        .vx-calc input:focus, .vx-calc select:focus, .vx-lead input:focus, .vx-lead select:focus {
            outline: 0;
            border-color: var(--rg)
        }

    .vx-calc .nt {
        font-size: 12.5px;
        color: var(--mt-l);
        margin: 0;
        line-height: 1.5
    }

.vx-out {
    margin-top: 16px;
    padding: 26px;
    border-radius: 20px;
    color: #fff;
    background: radial-gradient(420px 260px at 100% 0%,rgba(214,51,108,.3),transparent 62%),linear-gradient(135deg,#120C21,#2A1B4D)
}

    .vx-out .per {
        color: rgba(255,255,255,.7);
        font-size: 14.5px
    }

    .vx-out .big {
        font: 700 clamp(2.1rem,4.6vw,3.2rem)/1.1 'Roboto',serif;
        color: var(--rg-lt);
        margin: 6px 0
    }

    .vx-out .cmp {
        margin: 14px -5px 6px
    }

        .vx-out .cmp > div {
            padding: 0 5px
        }

            .vx-out .cmp > div > div {
                height: 100%;
                padding: 11px;
                border-radius: 12px;
                background: rgba(255,255,255,.07);
                border: 1px solid rgba(255,255,255,.14)
            }

        .vx-out .cmp small {
            display: block;
            font-size: 12px;
            color: rgba(255,255,255,.65)
        }

        .vx-out .cmp b {
            font-size: 17px
        }

        .vx-out .cmp em {
            display: block;
            font-style: normal;
            font-size: 12px;
            color: rgba(255,255,255,.65)
        }

        .vx-out .cmp .bad b {
            color: var(--rg-lt)
        }

    .vx-out .err, .vx-lead .err {
        color: #FF9BB5;
        font-size: 14px;
        min-height: 18px
    }

    .vx-out .fine {
        font-size: 12.5px;
        color: rgba(255,255,255,.65);
        margin-top: 14px
    }

/* ---- Control room ---- */
.vx-panel {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(24,15,29,.07)
}

    .vx-panel h3 {
        font-size: 19px
    }

    .vx-panel .live {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-left: 10px;
        font: 600 12.5px Inter,sans-serif;
        color: #178a4c
    }

        .vx-panel .live i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #178a4c;
            animation: vxP 1.8s ease-in-out infinite
        }

@keyframes vxP {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}

.vx-panel .tw {
    overflow-x: auto
}

.vx-panel table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 14.5px
}

.vx-panel th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mt-l);
    padding: 8px 8px 8px 0;
    border-bottom: 1px solid var(--line)
}

.vx-panel td {
    padding: 12px 8px 12px 0;
    border-bottom: 1px solid var(--line)
}

.tg {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap
}

    .tg.g {
        background: #E3F6EC;
        color: #178a4c
    }

    .tg.w {
        background: #FFF1D6;
        color: #9b5d1c
    }

.vx-defs {
    display: grid;
    gap: 12px;
    margin-top: 16px
}

    .vx-defs div {
        padding-left: 14px;
        border-left: 3px solid var(--rg)
    }

    .vx-defs b {
        display: block;
        font-size: 14.5px
    }

    .vx-defs span {
        color: var(--mt-l);
        font-size: 14px
    }

.vx-team {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 10px
}

    .vx-team li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        font-size: 14.5px;
        font-weight: 500
    }

    .vx-team small {
        display: block;
        color: var(--mt-l);
        font-size: 12.5px;
        font-weight: 400
    }

/* ---- Roles tabs ---- */
.vx-roles {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-bottom: 16px
}

    .vx-roles .nav-link {
        padding: 15px 16px;
        border-radius: 16px;
        background: #180F1D;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        border: 2px solid transparent;
        line-height: 1.3
    }

        .vx-roles .nav-link small {
            display: block;
            font-weight: 500;
            font-size: 12.5px;
            color: rgba(255,255,255,.6);
            margin-top: 2px
        }

        .vx-roles .nav-link.active {
            background: #180F1D;
            border-color: var(--rg-lt);
            box-shadow: 0 8px 24px rgba(214,51,108,.25)
        }

.vx-rp {
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: #fff
}

    .vx-rp .l {
        padding: 30px;
        background: linear-gradient(135deg,#241647,#150E2B);
        color: #fff
    }

        .vx-rp .l h3 {
            font: 600 26px/1.2 'Playfair Display',serif;
            color: #fff
        }

        .vx-rp .l p {
            margin: 10px 0 0;
            color: rgba(255,255,255,.7)
        }

    .vx-rp ul {
        list-style: none;
        margin: 0;
        padding: 10px 28px
    }

    .vx-rp li {
        padding: 15px 0;
        border-bottom: 1px solid var(--line)
    }

        .vx-rp li:last-child {
            border-bottom: 0
        }

        .vx-rp li b {
            display: block;
            font-size: 16px
        }

        .vx-rp li span {
            color: var(--mt-l);
            font-size: 15px
        }

@media(max-width:991px) {
    .vx-roles {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:575px) {
    .vx-roles {
        grid-template-columns: 1fr
    }
}

/* ---- Comparison table ---- */
.vx-vs {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(24,15,29,.07)
}

    .vx-vs table {
        width: 100%;
        min-width: 620px;
        border-collapse: collapse;
        font-size: 15px
    }

    .vx-vs th, .vx-vs td {
        padding: 14px 18px;
        border-bottom: 1px solid var(--line);
        text-align: left
    }

    .vx-vs th {
        background: var(--soft);
        font-size: 14px
    }

        .vx-vs th:last-child, .vx-vs td:last-child {
            background: rgba(214,51,108,.06)
        }

    .vx-vs tr:last-child td {
        border-bottom: 0
    }

    .vx-vs .y {
        color: #178a4c;
        font-weight: 700
    }

    .vx-vs .n {
        color: var(--mt-l)
    }

    .vx-vs .v {
        color: #9b5d1c;
        font-weight: 600
    }

/* ---- Premium ---- */
.vx-prem {
    color: #fff;
    background: radial-gradient(520px 320px at 100% 0%,rgba(214,51,108,.3),transparent 62%),linear-gradient(135deg,#120C21,#2A1B4D)
}

    .vx-prem h2 {
        color: #fff
    }

    .vx-prem .c {
        height: 100%;
        padding: 24px;
        border-radius: 18px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.14)
    }

        .vx-prem .c h3 {
            font: 600 22px 'Playfair Display',serif;
            color: var(--rg-lt);
            margin-bottom:5px;
        }

        .vx-prem .c p {
            margin: 8px 0 0;
            color: rgba(255,255,255,.75);
            font-size: 15px
        }

/* ---- Plans ---- */
/* ===== #plans (.vh-sec) — plan cards, brand + Roboto ===== */
#plans .vx-plan {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 28px;
    background: #fff;
    border: 1px solid var(--line,#EADFEE);
    border-radius: 22px;
    box-shadow: 0 10px 30px -14px rgba(74,50,120,.18);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    #plans .vx-plan:before { /* top accent bar */
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 4px;
        background: linear-gradient(90deg,#EADFEE,#EADFEE);
        transition: background .3s;
    }

    #plans .vx-plan:hover {
        transform: translateY(-6px);
        border-color: rgba(214,51,108,.3);
        box-shadow: 0 26px 48px -20px rgba(108,75,166,.35);
    }

        #plans .vx-plan:hover:before {
            background: linear-gradient(90deg,#D6336C,#6C4BA6);
        }

    /* featured plan */
    #plans .vx-plan.main {
        border: 1.5px solid #D6336C;
        background: linear-gradient(180deg,#FFF7FA 0%,#fff 38%);
        box-shadow: 0 26px 54px -22px rgba(214,51,108,.45);
    }

        #plans .vx-plan.main:before {
            background: linear-gradient(90deg,#D6336C,#6C4BA6);
        }

@media (min-width:992px) {
    #plans .vx-plan.main {
        transform: translateY(-8px);
    }

        #plans .vx-plan.main:hover {
            transform: translateY(-12px);
        }
}

/* title + subtitle */
#plans .vx-plan h3 {
    margin: 0;
    font: 700 22px/1.2 Roboto,sans-serif;
    letter-spacing: -.01em;
    color: #180F1D;
}

#plans .vx-plan .for {
    margin: 8px 0 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line,#EADFEE);
    font: 400 14.5px/1.55 Roboto,sans-serif;
    color: #6B5A70;
}

/* feature list with check icons */
#plans .vx-plan ul {
    flex: 1;
    list-style: none;
    margin: 20px 0 26px;
    padding: 0;
}

#plans .vx-plan li {
    position: relative;
    margin: 0 0 11px;
    padding-left: 30px;
    font: 400 15px/1.5 Roboto,sans-serif;
    color: #3B2D45;
}

    #plans .vx-plan li:last-child {
        margin-bottom: 0;
    }

    #plans .vx-plan li:before {
        content: "\2713";
        position: absolute;
        left: 0;
        top: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        color: #D6336C;
        background: #FDE8F0;
    }

#plans .vx-plan.main li:before {
    color: #fff;
    background: linear-gradient(135deg,#D6336C,#6C4BA6);
}

/* button */
#plans .vx-plan .vh-b {
    text-decoration: none;
    align-self: stretch;
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
}

#plans .vx-plan:not(.main) .vh-b.vh-ik {
    background: #180F1D;
}

    #plans .vx-plan:not(.main) .vh-b.vh-ik:hover {
        background: #4A3278;
    }

@media (max-width:991px) {
    #plans .vx-plan {
        padding: 26px 22px 24px;
    }

        #plans .vx-plan.main {
            transform: none;
        }
}

@media (prefers-reduced-motion:reduce) {
    #plans .vx-plan, #plans .vx-plan:before {
        transition: none;
    }

        #plans .vx-plan.main {
            transform: none;
        }
}


/* ===== .vh-sec.vh-alt — light section + comparison table (brand, Roboto) ===== */
.vh-sec.vh-alt {
    position: relative;
    overflow: hidden;
    background: radial-gradient(560px 320px at 0% 0%,rgba(214,51,108,.09),transparent 62%), radial-gradient(620px 380px at 100% 100%,rgba(108,75,166,.12),transparent 62%), linear-gradient(180deg,#FFFFFF 0%,#F8EFFB 100%);
}

    .vh-sec.vh-alt:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(108,75,166,.10) 1.2px,transparent 1.2px);
        background-size: 26px 26px;
        -webkit-mask-image: linear-gradient(180deg,#000,transparent 55%);
        mask-image: linear-gradient(180deg,#000,transparent 55%);
    }

    .vh-sec.vh-alt > .container {
        position: relative;
        z-index: 1;
    }

    .vh-sec.vh-alt .vx-vs {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: 0 24px 50px -28px rgba(108,75,166,.35);
    }

        .vh-sec.vh-alt .vx-vs table {
            width: 100%;
            min-width: 680px;
            border-collapse: separate;
            border-spacing: 0;
            font: 400 15px/1.5 Roboto,sans-serif;
            color: var(--tx-l);
        }

        .vh-sec.vh-alt .vx-vs th, .vh-sec.vh-alt .vx-vs td {
            padding: 16px 22px;
            text-align: left;
            vertical-align: middle;
            border-bottom: 1px solid #F1E8F4;
        }

        /* header */
        .vh-sec.vh-alt .vx-vs th {
            position: relative;
            padding: 20px 22px;
            background: linear-gradient(180deg,#FBF6FD,#F5EDF8);
            font: 700 12.5px/1.3 Roboto,sans-serif;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: var(--gd-dk);
            border-bottom: 1px solid var(--line);
        }

            .vh-sec.vh-alt .vx-vs th:first-child {
                color: var(--mt-l);
            }

            /* first column = feature names */
            .vh-sec.vh-alt .vx-vs td:first-child, .vh-sec.vh-alt .vx-vs th:first-child {
                font-weight: 500;
            }

        .vh-sec.vh-alt .vx-vs tbody td:first-child {
            color: var(--tx-l);
            font-weight: 500;
        }

        /* row rhythm + hover */
        .vh-sec.vh-alt .vx-vs tbody tr {
            transition: background .2s;
        }

            .vh-sec.vh-alt .vx-vs tbody tr:nth-child(even) td {
                background: #FDFAFE;
            }

            .vh-sec.vh-alt .vx-vs tbody tr:hover td {
                background: #FBF0F5;
            }

        .vh-sec.vh-alt .vx-vs tr:last-child td {
            border-bottom: 0;
        }

        /* highlighted last column (Vcarddly) */
        .vh-sec.vh-alt .vx-vs th:last-child, .vh-sec.vh-alt .vx-vs td:last-child {
            background: rgba(214,51,108,.05);
        }

        .vh-sec.vh-alt .vx-vs th:last-child {
            background: linear-gradient(180deg,#D6336C,#A02458);
            color: #fff;
            border-bottom-color: transparent;
            box-shadow: inset 0 3px 0 rgba(255,255,255,.28);
        }

        .vh-sec.vh-alt .vx-vs tbody tr:nth-child(even) td:last-child {
            background: rgba(214,51,108,.08);
        }

        .vh-sec.vh-alt .vx-vs tbody tr:hover td:last-child {
            background: rgba(214,51,108,.13);
        }

        .vh-sec.vh-alt .vx-vs td:last-child {
            font-weight: 600;
            border-left: 1px solid rgba(214,51,108,.14);
            border-right: 0;
        }

        /* status colours (td or inline span) */
        .vh-sec.vh-alt .vx-vs .y {
            color: #178A4C;
            font-weight: 700;
        }

        .vh-sec.vh-alt .vx-vs .n {
            color: #A595AD;
        }

        .vh-sec.vh-alt .vx-vs .v {
            color: #9B5D1C;
            font-weight: 600;
        }

        .vh-sec.vh-alt .vx-vs span.y, .vh-sec.vh-alt .vx-vs span.n, .vh-sec.vh-alt .vx-vs span.v, .vh-sec.vh-alt .vx-vs b.y, .vh-sec.vh-alt .vx-vs b.n, .vh-sec.vh-alt .vx-vs b.v {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 12px;
            border-radius: 999px;
            font-size: 13px;
            line-height: 1.3;
        }

        .vh-sec.vh-alt .vx-vs span.y, .vh-sec.vh-alt .vx-vs b.y {
            background: #E3F6EC;
        }

        .vh-sec.vh-alt .vx-vs span.n, .vh-sec.vh-alt .vx-vs b.n {
            background: #F5EDF8;
        }

        .vh-sec.vh-alt .vx-vs span.v, .vh-sec.vh-alt .vx-vs b.v {
            background: #FFF1D6;
        }

/* tablet / iPad: the 4 columns fit the width, no sideways scrolling */
@media (max-width:1023px) {
    .vh-sec.vh-alt .vx-vs table {
        min-width: 0;
        font-size: 14px;
    }

    .vh-sec.vh-alt .vx-vs th, .vh-sec.vh-alt .vx-vs td {
        padding: 14px 14px;
    }

    .vh-sec.vh-alt .vx-vs th {
        padding: 16px 14px;
        font-size: 11.5px;
        letter-spacing: .06em;
    }
}

/* phone: each feature becomes a small card (feature name on top, the 3 answers underneath, labelled),
   instead of a wide table that has to be scrolled sideways */
@media (max-width:767px) {
    .vh-sec.vh-alt .vx-vs {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

        .vh-sec.vh-alt .vx-vs table, .vh-sec.vh-alt .vx-vs tbody {
            display: block;
            min-width: 0;
            width: 100%;
        }

        .vh-sec.vh-alt .vx-vs thead {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
        }

        .vh-sec.vh-alt .vx-vs tbody tr {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 12px;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 24px -18px rgba(108,75,166,.4);
        }

        .vh-sec.vh-alt .vx-vs th:first-child, .vh-sec.vh-alt .vx-vs td:first-child {
            position: static;
            box-shadow: none;
        }

        .vh-sec.vh-alt .vx-vs tbody td {
            display: block;
            min-width: 0;
            padding: 8px 8px;
            border: 0;
            border-radius: 10px;
            background: #FBF6FD;
            font-size: 13.5px;
            line-height: 1.35;
            text-align: center;
            overflow-wrap: anywhere;
        }

        .vh-sec.vh-alt .vx-vs tbody tr:nth-child(even) td, .vh-sec.vh-alt .vx-vs tbody tr:hover td {
            background: #FBF6FD;
        }

        /* feature name spans the whole card */
        .vh-sec.vh-alt .vx-vs tbody td:first-child {
            grid-column: 1 / -1;
            padding: 0 2px 8px;
            background: transparent !important;
            color: var(--tx-l);
            font-size: 15px;
            font-weight: 600;
            text-align: left;
        }

        /* column labels (from the table header) */
        .vh-sec.vh-alt .vx-vs tbody td:not(:first-child)::before {
            display: block;
            margin-bottom: 4px;
            color: var(--mt-l);
            font: 700 10.5px/1.2 Roboto,sans-serif;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .vh-sec.vh-alt .vx-vs tbody td:nth-child(2)::before {
            content: "Paper card";
        }

        .vh-sec.vh-alt .vx-vs tbody td:nth-child(3)::before {
            content: "Card-only app";
        }

        .vh-sec.vh-alt .vx-vs tbody td:nth-child(4)::before {
            content: "Vcarddly";
            color: var(--rg);
        }

        /* Vcarddly answer stands out */
        .vh-sec.vh-alt .vx-vs tbody td:last-child {
            background: rgba(214,51,108,.08) !important;
            border: 1px solid rgba(214,51,108,.2);
        }
}

@media (max-width:360px) {
    .vh-sec.vh-alt .vx-vs tbody tr {
        grid-template-columns: 1fr;
    }

    .vh-sec.vh-alt .vx-vs tbody td:not(:first-child) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right;
    }

        .vh-sec.vh-alt .vx-vs tbody td:not(:first-child)::before {
            margin: 0 10px 0 0;
            text-align: left;
        }
}

@media (prefers-reduced-motion:reduce) {
    .vh-sec.vh-alt .vx-vs tbody tr {
        transition: none;
    }
}

/* ---- Ecosystem chips (uses existing .vh-chip) ---- */
#ecosystem .vh-chip {
    text-decoration: none;
    color: var(--tx-l);
    transition: .25s
}

    #ecosystem .vh-chip:hover {
        border-color: var(--rg);
        color: var(--rg)
    }

/* ---- Lead form ---- */
.vx-lead {
    color: #fff;
    background: radial-gradient(600px 300px at 100% 0%,rgba(214,51,108,.35),transparent 60%),linear-gradient(120deg,#120C21,#2A1B4D)
}

    .vx-lead h2 {
        color: #fff;
        font-size: 36px
    }

        .vx-lead h2 em {
            color: var(--rg-lt)
        }

    .vx-lead .l p {
        color: rgba(255,255,255,.85)
    }

    .vx-lead > .container > .row > .col-lg-6:first-child p {
        color: rgba(255,255,255,.85);
        font-size: 17px;
        margin-top: 12px
    }

    .vx-lead .fm {
        padding: 28px;
        border-radius: 20px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.16)
    }

    .vx-lead label {
        color: #fff
    }

    .vx-lead input, .vx-lead select {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.22);
        color: #fff
    }

        .vx-lead select option {
            color: #180F1D
        }

    .vx-lead .ok {
        margin-top: 14px;
        padding: 16px;
        border-radius: 12px;
        background: rgba(95,211,165,.16);
        color: #006b3d;
        font-weight: 600
    }

        .vx-lead .ok[hidden] {
            display: none
        }

@media(max-width:991px) {
    .vx-lead h2 {
        font-size: 28px
    }
}


/* =====================================================================
   index-additions.css  (load AFTER index.css, or paste at the end of it)
   1) Calculator + lead form: tight, even spacing between inputs
   2) Stats strip, CRM block, Leaders section, hero extras
   Only spacing/size rules here, so your colours and look stay as they are.
   ===================================================================== */

/* ---------- 1. Inputs: calculator (#calc) and lead form (#lead) ---------- */
#calc .vx-calc .row,
#lead .fm .row {
    margin-left: -6px;
    margin-right: -6px;
}

    #calc .vx-calc .row > [class*="col-"],
    #lead .fm .row > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 12px;
    }

#calc .vx-calc label,
#lead .fm label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

#calc .vx-calc input,
#calc .vx-calc select,
#lead .fm input,
#lead .fm select {
    display: block;
    width: 100%;
    height: 44px;
    margin: 6px 0 0;
    padding: 0 14px;
    line-height: 1.2;
    font-size: 14.5px;
}

/* the helper lines above/below the calculator inputs */
#calc .vx-calc .nt {
    margin: 4px 0 0;
    line-height: 1.5;
}

    #calc .vx-calc .nt.lead-in {
        margin: 0 0 12px;
    }

/* error line: takes no space when empty */
#calc .err:empty,
#lead .err:empty {
    display: none;
}

#calc .err,
#lead .err {
    margin: 0 0 10px;
}

/* lead form: button and the small promise line under it */
#lead .fm .vh-b {
    margin-top: 4px;
}

#lead .fm .fine-print {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
}

#lead .fm .ok {
    margin-top: 12px;
}

@media (max-width: 767px) {
    #calc .vx-calc .row > [class*="col-"],
    #lead .fm .row > [class*="col-"] {
        margin-bottom: 10px;
    }
}

/* ---------- 2. Stats strip (#calc .vx-stats) ---------- */
/* ===== #calc .vx-stats — dark glass cards (Roboto) ===== */
#calc .vx-stats {
    position: relative;
    overflow: hidden;
    counter-reset: st;
    padding: 12px 12px 22px;
    border-radius: 28px;
    background: radial-gradient(520px 300px at 0% 0%,rgba(214,51,108,.30),transparent 62%), radial-gradient(560px 320px at 100% 100%,rgba(108,75,166,.45),transparent 62%), linear-gradient(135deg,#120C21 0%,#1D1238 55%,#2A1B4D 100%);
    box-shadow: 0 26px 56px -24px rgba(42,24,64,.55);
}

    #calc .vx-stats:before { /* dotted texture */
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
        background-size: 22px 22px;
        -webkit-mask-image: linear-gradient(180deg,#000,transparent 70%);
        mask-image: linear-gradient(180deg,#000,transparent 70%);
    }

    #calc .vx-stats .row {
        position: relative;
        margin-left: 0;
        margin-right: 0;
    }

        #calc .vx-stats .row > [class*="col"] {
            padding: 8px;
        }

    /* glass card */
    #calc .vx-stats .s {
        position: relative;
        overflow: hidden;
        height: 100%;
        counter-increment: st;
        padding: 26px 22px 22px;
        border-radius: 20px;
        background: linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
        border: 1px solid rgba(255,255,255,.13);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
    }

        #calc .vx-stats .s:before { /* big faint index number */
            content: "0" counter(st);
            position: absolute;
            right: 16px;
            top: 8px;
            font: 900 58px/1 Roboto,sans-serif;
            letter-spacing: -.04em;
            color: rgba(255,255,255,.06);
            transition: color .3s;
        }

        #calc .vx-stats .s:after { /* bottom glow line */
            content: "";
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 0;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg,#D6336C,#9B7ECF);
            opacity: .0;
            transition: opacity .3s;
        }

        #calc .vx-stats .s:hover {
            transform: translateY(-5px);
            border-color: rgba(236,107,156,.55);
            background: linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
            box-shadow: 0 20px 40px -18px rgba(214,51,108,.55);
        }

            #calc .vx-stats .s:hover:before {
                color: rgba(236,107,156,.16);
            }

            #calc .vx-stats .s:hover:after {
                opacity: 1;
            }

        /* icon: gradient tile */
        #calc .vx-stats .s .si {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            margin-bottom: 18px;
            border-radius: 14px;
            background: linear-gradient(135deg,#D6336C,#6C4BA6);
            color: #fff;
            font-size: 16px;
            box-shadow: 0 10px 20px -8px rgba(214,51,108,.7), inset 0 1px 0 rgba(255,255,255,.3);
        }

        /* number */
        #calc .vx-stats .s b {
            display: block;
            margin-bottom: 10px;
            font: 900 44px/1 Roboto,sans-serif;
            letter-spacing: -.03em;
            background: linear-gradient(135deg,#fff 0%,#FFD0E1 55%,#D9C6F5 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: #fff;
        }

            #calc .vx-stats .s b small {
                margin-left: 4px;
                font: 500 .5em/1 Roboto,sans-serif;
                letter-spacing: .02em;
                -webkit-text-fill-color: #F7A8C6;
                color: #F7A8C6;
                text-transform: lowercase;
            }

        #calc .vx-stats .s span {
            display: block;
            font: 400 13.5px/1.6 Roboto,sans-serif;
            color: rgba(255,255,255,.78);
        }

    /* source line */
    #calc .vx-stats .src {
        position: relative;
        margin: 8px 22px 0;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,.14);
        font: 400 12px/1.6 Roboto,sans-serif;
        color: rgba(255,255,255,.62);
    }

@media (max-width:991px) {
    #calc .vx-stats {
        border-radius: 24px;
    }

        #calc .vx-stats .s {
            padding: 22px 18px 20px;
        }

            #calc .vx-stats .s b {
                font-size: 36px;
            }
}

@media (max-width:575px) {
    #calc .vx-stats {
        padding: 8px 6px 16px;
    }

        #calc .vx-stats .row > [class*="col"] {
            padding: 5px;
        }

        #calc .vx-stats .s {
            padding: 16px 14px;
            border-radius: 16px;
        }

            #calc .vx-stats .s:before {
                font-size: 40px;
                right: 10px;
            }

            #calc .vx-stats .s .si {
                width: 36px;
                height: 36px;
                margin-bottom: 12px;
                font-size: 14px;
                border-radius: 11px;
            }

            #calc .vx-stats .s b {
                font-size: 28px;
            }

            #calc .vx-stats .s span {
                font-size: 12.5px;
                line-height: 1.5;
            }
}

@media (prefers-reduced-motion:reduce) {
    #calc .vx-stats .s, #calc .vx-stats .s:before, #calc .vx-stats .s:after {
        transition: none;
    }
}

/* ---------- 3. CRM / Control Room block (#crm) ---------- */
#crm h2 {
    margin: 12px 0 16px;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.08;
}

#crm .crm-lead {
    max-width: 560px;
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
}

#crm .vh-fl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
}

#crm .vh-cls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
}

#crm .vh-cl {
    margin: 0;
}

@media (max-width: 575px) {
    #crm .vh-cls {
        grid-template-columns: 1fr;
    }
}

/* ---------- 4. Leaders (#leaders) ---------- */
#leaders .vx-roles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

    #leaders .vx-roles .nav-link {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0;
        padding: 16px 18px;
        border: 1.5px solid var(--line, #EADFEE);
        border-radius: 18px;
        background: #fff;
        color: var(--tx-l, #180F1D);
        text-align: left;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.25;
        box-shadow: 0 6px 16px rgba(74, 50, 120, .07);
        transition: .25s;
    }

        #leaders .vx-roles .nav-link > i {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 13px;
            background: #F3ECFA;
            color: var(--gd, #6C4BA6);
            font-size: 17px;
            transition: .25s;
        }

        #leaders .vx-roles .nav-link small {
            display: block;
            margin-top: 3px;
            font-size: 12px;
            font-weight: 500;
            color: var(--mt-l, #6b5a70);
        }

        #leaders .vx-roles .nav-link:hover {
            transform: translateY(-3px);
            border-color: var(--rg-lt, #EC6B9C);
        }

        #leaders .vx-roles .nav-link.active {
            border-color: transparent;
            background: linear-gradient(135deg, #1b1224, #4a3278);
            color: #fff;
            box-shadow: 0 14px 28px rgba(74, 50, 120, .32);
        }

            #leaders .vx-roles .nav-link.active > i {
                background: linear-gradient(135deg, var(--rg, #D6336C), var(--rg-dk, #A02458));
                color: #fff;
            }

            #leaders .vx-roles .nav-link.active small {
                color: rgba(255, 255, 255, .78);
            }

#leaders .vx-rp {
    overflow: hidden;
    border: 1px solid var(--line, #EADFEE);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(74, 50, 120, .12);
}

    #leaders .vx-rp .l {
        position: relative;
        overflow: hidden;
        padding: 40px 36px;
        background: linear-gradient(145deg, #150d1d 0%, #2a1840 60%, #4a2466 100%);
        color: #fff;
    }

        #leaders .vx-rp .l:after {
            content: "";
            position: absolute;
            right: -70px;
            bottom: -90px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(236, 107, 156, .32), transparent 65%);
            pointer-events: none;
        }

        #leaders .vx-rp .l h3 {
            position: relative;
            z-index: 1;
            margin: 0 0 14px;
            font-size: 28px;
            font-weight: 800;
            line-height: 1.2;
            color: #fff;
        }

        #leaders .vx-rp .l p {
            position: relative;
            z-index: 1;
            margin: 0 0 24px;
            font-size: 15.5px;
            line-height: 1.65;
            color: rgba(255, 255, 255, .82);
        }

    #leaders .vx-rp .rp-cta {
        position: relative;
        z-index: 1;
    }

    #leaders .vx-rp .col-md-7 {
        display: flex;
        align-items: center;
        padding: 30px 36px;
    }

    #leaders .vx-rp ul {
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #leaders .vx-rp li {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin: 0;
        padding: 18px 0;
        border-bottom: 1px solid var(--line, #EADFEE);
    }

        #leaders .vx-rp li:last-child {
            border-bottom: 0;
        }

        #leaders .vx-rp li > i {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin-top: 1px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
            color: #fff;
            font-size: 12px;
        }

        #leaders .vx-rp li b {
            display: block;
            margin-bottom: 3px;
            font-size: 16.5px;
            line-height: 1.3;
            color: var(--tx-l, #180F1D);
        }

        #leaders .vx-rp li span {
            display: block;
            font-size: 14px;
            line-height: 1.55;
            color: var(--mt-l, #6b5a70);
        }

@media (max-width: 991px) {
    #leaders .vx-roles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    #leaders .vx-roles {
        grid-template-columns: 1fr;
    }

    #leaders .vx-rp .l, #leaders .vx-rp .col-md-7 {
        padding: 26px 22px;
    }
}

/* ---------- 5. Hero extras: link chips + trust line spacing ---------- */
.vh-hero .vh-ln,
.vh-hero .vh-trust {
    margin-top: 22px;
    margin-bottom: 0;
}

.vh-hero .vh-trust {
    margin-top: 16px;
}

/* ---------- 6. Hero category cards (just under the banner) ---------- */


.vh-cats .cat {
    --ac: #EC4D86;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: 22px 20px 18px;
    overflow: hidden;
    border: 1px solid #EADFEE;
    border-radius: 20px;
    background: #fff;
    color: #180F1D;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(74, 50, 120, .10);
    transition: transform .28s, box-shadow .28s, border-color .28s;
}
    /* soft colour glow in the corner */
    .vh-cats .cat::before {
        content: "";
        position: absolute;
        right: -50px;
        top: -60px;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--ac), transparent 68%);
        opacity: .16;
        transition: opacity .28s;
        pointer-events: none;
    }
    /* accent line along the top */
    .vh-cats .cat::after {
        content: "";
        position: absolute;
        left: 20px;
        right: 20px;
        top: 0;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--ac);
        opacity: .9;
    }

    .vh-cats .cat:nth-child(1) {
        --ac: #EC4D86;
    }

    .vh-cats .cat:nth-child(2) {
        --ac: #8B6BFF;
    }

    .vh-cats .cat:nth-child(3) {
        --ac: #F59E5B;
    }

    .vh-cats .cat:nth-child(4) {
        --ac: #35C4A5;
    }

    .vh-cats .cat:nth-child(5) {
        --ac: #4FA3F7;
    }

    .vh-cats .cat.hl {
        border-color: rgba(236, 77, 134, .65);
        box-shadow: 0 0 0 3px rgba(236, 77, 134, .12), 0 16px 32px rgba(214, 51, 108, .16);
    }

    .vh-cats .cat:hover {
        color: #180F1D;
        text-decoration: none;
        transform: translateY(-6px);
        border-color: var(--ac);
        box-shadow: 0 20px 38px rgba(74, 50, 120, .18);
    }

        .vh-cats .cat:hover::before {
            opacity: .3;
        }

.vh-cats .ch {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}

.vh-cats .ci {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 62%, #4a2466));
    box-shadow: 0 10px 20px color-mix(in srgb, var(--ac) 35%, transparent);
    color: #fff;
    font-size: 18px;
}

.vh-cats .ch .vh-ttl,
.vh-cats h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #180F1D;
}

.vh-cats p {
    position: relative;
    z-index: 1;
    flex: 1;
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6b5a70;
}

.vh-cats .cf {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid #EFE6F3;
}

    .vh-cats .cf b {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
        font-weight: 700;
        color: #180F1D;
    }

        .vh-cats .cf b::after {
            content: "\2192";
            color: var(--ac);
            font-weight: 400;
            transition: transform .25s;
        }

.vh-cats .cat:hover .cf b::after {
    transform: translateX(5px);
}

.vh-cats .cf span {
    padding: 3px 10px;
    border-radius: 999px;
    background: #F5EDF8;
    font-size: 11.5px;
    font-weight: 600;
    color: #5a3f78;
    text-align: left;
}

.vh-cats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
}

/* tablet: 3 + 2 (the two on the second row stretch wider) */
@media (max-width: 1199px) {
    .vh-cats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .vh-cats .cat {
        grid-column: span 2;
    }

        .vh-cats .cat:nth-child(n+4) {
            grid-column: span 3;
        }
}

@media (max-width: 767px) {
    .vh-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 32px;
    }

    .vh-cats .cat,
    .vh-cats .cat:nth-child(n+4) {
        grid-column: auto;
        min-height: 0;
    }

        .vh-cats .cat:nth-child(5) {
            grid-column: 1 / -1;
        }
}

@media (max-width: 480px) {
    .vh-cats {
        grid-template-columns: 1fr;
    }

    .vh-cats .cat:nth-child(5) {
        grid-column: auto;
    }
}

/* ---------- 7. Premium cards with icons (.vx-prem) ---------- */
.vx-prem .c .pi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 20px rgba(214, 51, 108, .28);
}

/* ---------- 8. FAQ left column: fill the space, stay in view ---------- */
#faq .vh-fq {
    position: sticky;
    top: 90px;
}

    #faq .vh-fq h2 {
        margin: 0 0 14px;
        font-size: clamp(30px, 3.4vw, 42px);
        font-weight: 800;
        line-height: 1.12;
    }

    #faq .vh-fq p {
        margin: 0 0 22px;
        font-size: 15.5px;
        line-height: 1.65;
        color: var(--mt-l, #6b5a70);
    }

    #faq .vh-fq .vh-b {
        display: inline-block;
        margin: 0 10px 12px 0;
    }

/* ---------- 9. Cards + QR Connect side by side (#cards) ---------- */
/* set the photo per card:  style="--cq-img:url('images/xyz.png')" */
.cq-c {
    --cq-img: none;
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 380px;
    padding: 36px 34px;
    border-radius: 26px;
    display: flex;
    flex-direction: column;
}

    .cq-c h3 {
        margin: 0 0 10px;
        font-size: 32px;
        font-weight: 800;
        line-height: 1.1;
    }

    .cq-c .cq-p {
        max-width: 440px;
        margin: 0 0 18px;
        font-size: 15px;
        line-height: 1.65;
    }

.cq-li {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

    .cq-li li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 9px;
        font-size: 14.5px;
    }

        .cq-li li i {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 10px;
        }

        .cq-li li b {
            font-weight: 700;
        }

.cq-act {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

.cq-cards {
    background-color: #0f0a16;
    background-image: linear-gradient(90deg, rgba(15, 10, 22, .94) 40%, rgba(15, 10, 22, .35) 100%), url('../../nfc/img/new-nfc-img/banner-c-1.jpg');
    background-size: cover;
    background-position: right center;
    color: #fff;
    box-shadow: 0 18px 40px rgba(24, 15, 29, .25);
}

    .cq-cards h3 {
        color: #fff;
    }

    .cq-cards .cq-p {
        color: rgba(255, 255, 255, .82);
    }

    .cq-cards .cq-li b {
        color: #FF6B9E;
    }

    .cq-cards .cq-li li {
        color: rgba(255, 255, 255, .88);
    }

        .cq-cards .cq-li li i {
            background: rgba(255, 107, 158, .2);
            color: #FF6B9E;
        }

    .cq-cards .cq-n {
        font-size: 13px;
        color: rgba(255, 255, 255, .78);
    }

        .cq-cards .cq-n a {
            color: #FF6B9E;
            font-weight: 700;
            text-decoration: underline;
        }



.cq-qr {
    background-color: #21162F;
    background-image: linear-gradient( 90deg, rgba(33, 22, 47, .94) 0%, rgba(45, 29, 59, .78) 45%, rgba(65, 35, 64, .30) 100% ),url('../../nfc/img/new-nfc-img/banner-c-4.jpg');
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    border: 1px solid #DCCBEF;
    color: var(--tx-l, #180F1D);
    box-shadow: 0 18px 40px rgba(74, 50, 120, .12);
}
    .cq-qr h3 {
        color: #fff;
    }

    .cq-qr .cq-p {
        color: #fff;
    }

    .cq-qr .cq-li li {
        color: #fff;
    }

    .cq-qr .cq-li b {
        color: #eee;
    }

    .cq-qr .cq-li li i {
        background: #fff;
        color: var(--rg, #D6336C);
    }

@media (max-width: 575px) {
    .cq-c {
        padding: 26px 22px;
        min-height: 0;
    }

        .cq-c h3 {
            font-size: 26px;
        }
}

/* ---------- 10. Lead form: light so it doesn't merge with the dark footer ---------- */
#lead.vx-lead {
    background: linear-gradient(135deg, #FBF5FF 0%, #FDEAF2 100%);
    color: var(--tx-l, #180F1D);
    padding-top: 70px;
    padding-bottom: 70px;
}

    #lead.vx-lead h2 {
        color: var(--tx-l, #180F1D);
        font-size: clamp(32px, 3.8vw, 46px);
        font-weight: 800;
        line-height: 1.12;
    }

    #lead.vx-lead > .container p,
    #lead .l > p {
        color: var(--mt-l, #6b5a70);
        font-size: 16px;
        line-height: 1.65;
    }

#lead .ld-pts {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

    #lead .ld-pts li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }

        #lead .ld-pts li > i {
            flex: none;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            margin-top: 1px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
            color: #fff;
            font-size: 11px;
        }

    #lead .ld-pts b {
        display: block;
        margin-bottom: 2px;
        font-size: 16px;
        color: var(--tx-l, #180F1D);
    }

    #lead .ld-pts span {
        display: block;
        font-size: 14px;
        line-height: 1.55;
        color: var(--mt-l, #6b5a70);
    }

#lead .fm {
    padding: 28px 26px 22px;
    border: 1px solid #EADFEE;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 44px rgba(74, 50, 120, .14);
}

    #lead .fm label {
        color: #3b2d45;
    }

    #lead .fm input,
    #lead .fm select {
        border: 1.5px solid #E1D4EA;
        border-radius: 12px;
        background-color: #fff;
        color: var(--tx-l, #180F1D);
    }

        #lead .fm input::placeholder {
            color: #a799b3;
        }

        #lead .fm input:focus,
        #lead .fm select:focus {
            border-color: var(--rg, #D6336C);
            box-shadow: 0 0 0 3px rgba(214, 51, 108, .14);
            outline: 0;
        }

    #lead .fm .fine-print {
        color: var(--mt-l, #6b5a70);
    }

    #lead .fm .err {
        color: #c0283d;
    }





/* ---------- 11. Hero: CRM product visual + buttons ---------- */
.vh-hero h1 {
    font-size: 55px;
    line-height: 1.15;
}

.vh-hero p.lead {
    max-width: 560px;
    margin: 16px 0 24px;
    font-size: 16.5px;
    line-height: 1.7;
}

.vh-hero .vh-cta {
    margin-bottom: 14px;
}

/* simple underlined text link under the buttons */
.vh-calc {
    margin: 0 0 26px;
    font-size: 14.5px;
}

    .vh-calc a {
        color: var(--gd-dk, #4A3278);
        font-weight: 600;
        text-decoration: underline !important;
        text-decoration-color: var(--rg-lt, #EC6B9C);
        text-decoration-thickness: 1.5px;
        text-underline-offset: 5px;
        transition: color .2s, text-decoration-color .2s;
    }

        .vh-calc a:hover {
            color: var(--rg, #D6336C);
            text-decoration: underline;
            text-decoration-color: var(--rg, #D6336C);
        }

/* CRM window */
.vc-wrap {
    position: relative;
    max-width: 580px;
    margin: 0 auto;
    padding: 22px 0 6px;
}

    .vc-wrap::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 46%;
        width: 120%;
        height: 100%;
        transform: translate(-50%, -50%);
        background: radial-gradient(closest-side, rgba(214, 51, 108, .18), rgba(108, 75, 166, .14) 55%, transparent 75%);
        pointer-events: none;
    }

.vc-win {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--line, #EADFEE);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 34px 70px rgba(74, 50, 120, .24), 0 4px 12px rgba(74, 50, 120, .08);
}

.vc-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line, #EADFEE);
    background: #FBF7FD;
}

    .vc-bar i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #E3D6EC;
    }

    .vc-bar b {
        margin-left: 10px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--tx-l, #180F1D);
    }

    .vc-bar em {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: 12px;
        font-style: normal;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--mt-l, #6b5a70);
    }

        .vc-bar em .dt {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #22B573;
            box-shadow: 0 0 0 3px rgba(34, 181, 115, .18);
        }

.vc-stage {
    position: relative;
}

.vc-body {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.vc-shot {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* built-in sample dashboard (shows if the screenshot is missing) */
.vc-mock {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.vc-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

    .vc-kpi div {
        padding: 12px 6px;
        border: 1px solid var(--line, #EADFEE);
        border-radius: 14px;
        background: var(--soft, #F5EDF8);
        text-align: center;
        line-height: 1.2;
    }

    .vc-kpi b {
        display: block;
        font-family: 'Playfair Display', serif;
        font-size: 26px;
        font-weight: 600;
        color: var(--gd-dk, #4A3278);
    }

    .vc-kpi span {
        font-size: 11px;
        color: var(--mt-l, #6b5a70);
    }

.vc-cols {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 12px;
}

.vc-card {
    padding: 14px;
    border: 1px solid var(--line, #EADFEE);
    border-radius: 14px;
}

    .vc-card h5 {
        margin: 0 0 12px;
        font-family: Inter, sans-serif;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--mt-l, #6b5a70);
    }

.vc-src > div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    font-size: 12px;
}

    .vc-src > div span {
        flex: none;
        width: 64px;
        color: var(--tx-l, #180F1D);
        font-weight: 500;
    }

    .vc-src > div i {
        display: block;
        flex: none;
        width: var(--w);
        max-width: calc(100% - 74px);
        height: 8px;
        border-radius: 6px;
        background: linear-gradient(90deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
    }

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

    .vc-ls li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 0;
        border-top: 1px solid var(--line, #EADFEE);
        font-size: 12px;
        font-weight: 600;
    }

        .vc-ls li:first-child {
            padding-top: 0;
            border-top: 0;
        }

.vc-tg {
    padding: 2px 9px;
    border-radius: 12px;
    background: #EDE4F8;
    color: #5a3f9a;
    font-size: 10.5px;
    font-weight: 700;
}

    .vc-tg.g {
        background: #E3F6EC;
        color: #178a4c;
    }

    .vc-tg.w {
        background: #FFF1D6;
        color: #9b5d1c;
    }

/* floating notifications */
.vc-fl {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--line, #EADFEE);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(74, 50, 120, .22);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tx-l, #180F1D);
    animation: vcFloat 5s ease-in-out infinite;
}

    .vc-fl .ic {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
        color: #fff;
        font-size: 13px;
    }

    .vc-fl small {
        display: block;
        font-size: 11px;
        font-weight: 500;
        color: var(--mt-l, #6b5a70);
    }

.vc-f1 {
    right: -16px;
    top: -26px;
}

.vc-f2 {
    left: -20px;
    bottom: -30px;
    animation-delay: -2.5s;
}

.vc-ai {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line, #EADFEE);
    border-radius: 14px;
    background: linear-gradient(135deg, #FBF3FD, #FDEAF2);
    font-size: 12.5px;
    line-height: 1.3;
}

    .vc-ai .ic {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
        color: #fff;
        font-size: 13px;
    }

    .vc-ai b {
        display: block;
        font-weight: 700;
    }

    .vc-ai small {
        display: block;
        font-size: 11px;
        color: var(--mt-l, #6b5a70);
    }

    .vc-ai > div {
        flex: 1;
    }

@keyframes vcFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

.vc-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 46px 0 0;
    padding: 0;
    list-style: none;
}

    .vc-tags li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 11px;
        border: 1px solid var(--line, #EADFEE);
        border-radius: 30px;
        background: #fff;
        font-size: 12px;
        font-weight: 600;
        color: var(--tx-l, #180F1D);
        box-shadow: 0 4px 12px rgba(74, 50, 120, .06);
    }

    .vc-tags i {
        color: var(--rg, #D6336C);
        font-size: 11px;
    }

@media (max-width: 991px) {
    .vh-hero h1 {
        font-size: 38px;
    }

    .vc-wrap {
        max-width: 520px;
    }
}

@media (max-width: 575px) {
    .vh-hero h1 {
        font-size: 42px;
    }

    .vc-f1 {
        right: 6px;
        top: -16px;
    }

    .vc-f2 {
        display: none;
    }

    .vc-kpi b {
        font-size: 21px;
    }

    .vc-mock {
        padding: 12px;
        gap: 10px;
    }

    .vc-cols {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   GRID / CONTAINER WIDTHS
============================================ */
@media (min-width: 768px) {
    .container {
        max-width: 900px !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 1200px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1300px !important;
    }
}

@media (min-width: 1400px) {
    .container, .nav-header-container {
        width: 100% !important;
        max-width: 1350px !important;
    }
}


@media (min-width: 1800px) {
    .container, .nav-header-container {
        width: 100% !important;
        max-width: 1600px !important;
    }
}

@media (max-width: 575px) {
    .vc-mock {
        padding: 12px;
        gap: 10px;
        height: 250px;
    }
}

/* =====================================================================
   Home: centred full-width hero copy and the two audience boxes
   ===================================================================== */
.vh-hero .vh-copy { max-width: none; text-align: center; }

    .vh-hero .vh-copy p.lead { max-width: 860px; margin-left: auto; margin-right: auto; }

    /* "Calculate what you're losing" sits right under the paragraph, above the buttons */
    .vh-hero .vh-copy .vh-calc { margin: -8px 0 20px; }

    .vh-hero .vh-copy .vh-cta,
    .vh-hero .vh-copy .vh-ln { justify-content: center; }

    .vh-hero .vh-copy .vh-trust { justify-content: center; margin-left: auto; margin-right: auto; }



#explore { padding-top: 0; }

.vh-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 36px;
    text-align: left;
}

.ps-box {
    --ac: #D6336C;
    --ac-soft: #FDE8F0;
    --ac-dk: #A02458;
    position: relative;
    padding: 20px 24px 20px;
    overflow: hidden;
    border: 1px solid #EADFEE;
    border-top: 4px solid var(--ac);
    border-radius: 20px;
    background: linear-gradient(180deg, #fff 60%, var(--ac-soft));
    box-shadow: 0 8px 22px rgba(74, 50, 120, .10);
}

.ps-teams { --ac: #6C4BA6; --ac-soft: #EDE4F8; --ac-dk: #4A3278; }

/* icon, badge and heading share one row */
.ps-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.ps-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ac);
    color: #fff;
    font-size: 15px;
}

.ps-badge {
    padding: 4px 12px;
    border-radius: 50px;
    background: var(--ac-soft);
    color: var(--ac-dk);
    font: 700 11.5px/1.2 Roboto, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ps-box h2 { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.3; }

/* every word starts with a capital letter (heading, line of text and the pills) */
.ps-box h2, .ps-box > p, .ps-b { text-transform: capitalize; }

.ps-box > p { margin: 0 0 2px; color: var(--mt-l, #6B5A70); font-size: 14px; line-height: 1.55; }

.ps-grp { margin-top: 14px; }

    .ps-grp h3 {
        margin: 0 0 8px;
        color: var(--ac-dk);
        font: 700 11px/1.25 Roboto, sans-serif;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

.ps-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.ps-b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 6px;
    border: 1px solid #EADFEE;
    border-radius: 50px;
    background: #fff;
    color: #180F1D;
    font: 600 13px/1.3 Roboto, sans-serif;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

    .ps-b i {
        display: grid;
        flex: none;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--ac-soft);
        color: var(--ac);
        font-size: 11.5px;
        transition: background .2s ease, color .2s ease;
    }

    .ps-b:hover {
        border-color: var(--ac);
        background: var(--ac);
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
    }

        .ps-b:hover i { background: rgba(255, 255, 255, .22); color: #fff; }

@media (max-width: 991px) {
    .vh-split { grid-template-columns: 1fr; margin-top: 34px; }
}

@media (max-width: 520px) {
    .ps-box { padding: 20px 16px 18px; }
    .ps-box h2 { font-size: 19px; }
    .ps-pills { gap: 8px; }
    h2 {
        font-size: 40px !important;
        line-height: 1.2 !important;
    }
}


/* =====================================================
   PS-BOX : vector image background + extra polish
   Add this AFTER your existing .ps-box CSS (it only adds / overrides).
   ===================================================== */

/* every real content stays above the background image */
.ps-box > * {
    position: relative;
    z-index: 2;
}

/* ---------- 1) soft colour glow behind the box ---------- */
.ps-box::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -90px;
    right: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ac-soft) 0%, transparent 70%);
    opacity: .9;
    pointer-events: none;
}

/* ---------- 2) TRANSPARENT VECTOR IMAGE (change the url only) ---------- */
.ps-box::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: -14px;
    bottom: -6px;
    width: 346px;
    height: 311px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: .42; /* 0.15 - 0.35 = soft, increase if you want it stronger */
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

/*.ps-solo::after {
 
    background-image: url('../images/hero-b-1.png');
}

.ps-teams::after {
   
    background-image: url('../images/hero-b-2.png');
}*/

.ps-box:hover::after {
    opacity: .34;
    transform: translate(-4px, -4px) scale(1.03);
}

/* ---------- 3) small design polish ---------- */
.ps-box {
    transition: transform .25s ease, box-shadow .25s ease;
}

    .ps-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(74, 50, 120, .16);
    }

/* pills sit on top of the image, so keep them clean and readable */
.ps-b {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 6px rgba(74, 50, 120, .05);
}

    .ps-b:hover {
        box-shadow: 0 8px 16px -6px rgba(74, 50, 120, .35);
    }

/* thin divider under the heading block */
.ps-box > p {
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(74, 50, 120, .15);
}

/* ---------- 4) TM gap fix inside the pills ---------- */
/* the pill is "display:flex", so the TM became a separate item with a gap.
   this pulls the TM back next to the word */
.ps-b sup.vc-tm {
    margin-left: -8px;
    margin-right: -5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .ps-box::after {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 520px) {
    .ps-box::after {
        width: 170px;
        height: 170px;
        opacity: .16;
        right: -20px;
        bottom: -20px;
    }

    .ps-box::before {
        width: 200px;
        height: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-box,
    .ps-box::after {
        transition: none;
    }
}

/* CRM preview section (mockup left, text right) */
#crm-preview .crm-lead { margin: 0 0 18px; color: var(--mt-l, #6B5A70); font-size: 16.5px; line-height: 1.7; }

.vh-ck { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }

    .vh-ck li { display: flex; align-items: flex-start; gap: 10px; color: var(--tx-m, #3B2D45); font-size: 15.5px; font-weight: 500; }
    .vh-ck li i { margin-top: 4px; color: var(--rg, #D6336C); }

#crm-preview .vh-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* calculator heading */
.vx-calc-ttl { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.25; }

.privacy-mini-wrap {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.privacy-mini {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #6f42a8;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #d9c9ee;
    border-radius: 50px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .privacy-mini svg {
        color: #d6336c;
    }

    .privacy-mini strong {
        font-weight: 600;
        text-decoration: underline;
    }

.privacy-mini-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c7b3e0;
}

.privacy-mini:hover {
    border-color: #d6336c;
    color: #d6336c;
}

@media (max-width: 420px) {
    .privacy-mini {
        font-size: 11px;
        padding: 6px 10px;
    }
}

sup.vc-tm {
    display: inline;
    font-size: .45em;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    line-height: 0;
    vertical-align: super;
    margin-left: 1px;
    color: inherit; /* takes the same colour as the text around it */
    opacity: .85;
}

/* =====================================================
   CARDIX / VCARDDLY APP SECTION  (dark theme)
   Uses your :root colors. HTML is unchanged.
   ===================================================== */

/* ---------- Main dark box ---------- */
.cardix-sec {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
    border: 1px solid var(--bdr, rgba(214,51,108,.18));
    background: linear-gradient(135deg, var(--d1, #120a0c) 0%, var(--d2, #1a0e11) 55%, var(--d3, #191322) 100%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* soft coloured light inside the box (pink left, purple behind the phones) */
.cardix-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(520px 320px at 0% 0%, rgba(214, 51, 108, .16), transparent 70%), radial-gradient(620px 460px at 88% 55%, rgba(108, 75, 166, .38), transparent 70%), radial-gradient(300px 220px at 100% 0%, rgba(236, 107, 156, .14), transparent 70%);
}

/* very light dotted texture so the dark does not look flat */
.cardix-sec::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 60%, transparent 100%);
}

.cardix-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    padding: 44px 48px;
}

/* ---------- Left content ---------- */
.cardix-body {
    min-width: 0;
}

.cardix-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--rg-lt, #EC6B9C);
    background: rgba(214, 51, 108, .1);
    border: 1px solid rgba(214, 51, 108, .35);
    border-radius: 50px;
}

    .cardix-badge i {
        font-size: .8rem;
    }

.cardix-title {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 2.6vw, 2.15rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.3px;
    color: var(--tx-d, #F2ECF5);
}

.cardix-desc {
    max-width: 560px;
    margin: 0 0 22px;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--mt-d, #B0A0C0);
}

/* ---------- Cardix feature card ---------- */
.cardix-feature {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px 18px 18px 20px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    overflow: hidden;
}

    /* thin colour line on the left edge */
    .cardix-feature::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: linear-gradient(180deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
    }

.cardix-feature-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
    box-shadow: 0 10px 22px -10px rgba(214, 51, 108, .8);
}

.cardix-feature-text {
    flex: 1;
    min-width: 0;
}

.cardix-feature-label {
    display: block;
    margin-bottom: 4px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--rg-lt, #EC6B9C);
}

.cardix-feature-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 6px;
}

.cardix-feature-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tx-d, #F2ECF5);
}

/* "View More" small pill */
.cardix-view-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--tx-d, #F2ECF5);
    background: rgba(108, 75, 166, .25);
    border: 1px solid rgba(155, 126, 207, .45);
    border-radius: 50px;
    cursor: pointer;
    user-select: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

    .cardix-view-more::after {
        content: "\f04b"; /* play icon (Font Awesome) */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: .5rem;
        color: var(--rg-lt, #EC6B9C);
    }

    .cardix-view-more:hover {
        background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
        border-color: transparent;
        transform: translateY(-1px);
    }

        .cardix-view-more:hover::after {
            color: #fff;
        }

.cardix-feature-desc {
    margin: 0 0 14px;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--mt-d, #B0A0C0);
}

/* ---------- 3 steps ---------- */
.cardix-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cardix-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--tx-d, #F2ECF5);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50px;
    white-space: nowrap;
}

.cardix-step-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
}

.cardix-arrow {
    font-size: .8rem;
    color: var(--rg-lt, #EC6B9C);
    opacity: .8;
}

/* ---------- Store buttons ---------- */
.cardix-app-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    .cardix-app-links .bt-app-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 160px;
        padding: 9px 18px;
        text-decoration: none;
        color: var(--tx-d, #F2ECF5);
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 12px;
        transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

        .cardix-app-links .bt-app-btn i {
            font-size: 1.5rem;
            color: var(--rg-lt, #EC6B9C);
        }

        .cardix-app-links .bt-app-btn span {
            display: flex;
            flex-direction: column;
            font-size: .95rem;
            font-weight: 700;
            line-height: 1.15;
        }

        .cardix-app-links .bt-app-btn small {
            font-size: .6rem;
            font-weight: 500;
            letter-spacing: .3px;
            color: var(--mt-d, #B0A0C0);
        }

        .cardix-app-links .bt-app-btn:hover {
            color: #fff;
            transform: translateY(-2px);
            border-color: var(--rg, #D6336C);
            background: linear-gradient(135deg, rgba(214,51,108,.22), rgba(108,75,166,.28));
            box-shadow: 0 14px 28px -14px rgba(214, 51, 108, .7);
        }

            .cardix-app-links .bt-app-btn:hover i {
                color: #fff;
            }

/* ---------- Right side: phone image blended into the section ---------- */
.cardix-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

    /* glowing "stage" behind the phones */
    .cardix-media::before {
        content: "";
        position: absolute;
        width: 92%;
        height: 92%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(108, 75, 166, .55) 0%, rgba(214, 51, 108, .22) 45%, transparent 70%);
        filter: blur(30px);
        z-index: 0;
    }

    .cardix-media img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        max-width: 440px;
        height: auto;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 6px rgba(255, 255, 255, .03);
        /* image edges melt into the dark section */
        -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 86%, transparent 100%);
        mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, #000 86%, transparent 100%);
    }

    /* dark vignette on top of the image edges so the light picture background
       blends with the section background */
    .cardix-media::after {
        content: "";
        position: absolute;
        z-index: 2;
        pointer-events: none;
        width: 100%;
        max-width: 440px;
        aspect-ratio: 380 / 366;
        border-radius: 22px;
        box-shadow: inset 0 0 34px 16px var(--d2, #130E1A);
    }

@media (prefers-reduced-motion: no-preference) {
    .cardix-media img {
        animation: cardixFloat 6s ease-in-out infinite;
    }
}

@keyframes cardixFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .cardix-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 26px;
    }

    .cardix-media img,
    .cardix-media::after {
        max-width: 400px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 575px) {
    .cardix-sec {
        border-radius: 18px;
    }

    .cardix-inner {
        padding: 24px 16px;
        gap: 22px;
    }

    .cardix-desc {
        font-size: .88rem;
    }

    .cardix-feature {
        flex-direction: column;
        gap: 12px;
        padding: 16px 14px 16px 18px;
    }

    /* steps one under the other, arrow points down */
    .cardix-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .cardix-arrow {
        transform: rotate(90deg);
        margin-left: 14px;
    }

    .cardix-app-links {
        gap: 10px;
    }

        .cardix-app-links .bt-app-btn {
            flex: 1 1 calc(50% - 5px);
            min-width: 0;
            padding: 8px 12px;
            gap: 9px;
        }

            .cardix-app-links .bt-app-btn span {
                font-size: .85rem;
            }
}

/*---Plan hero*/
/* =====================================================
   PLAN STRIP + PLAN DETAILS MODAL   (uses your :root colors)
   ===================================================== */

/* ---------- Strip under the hero buttons ---------- */
.plan-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    max-width: fit-content;
    margin: 14px auto 0;
    padding: 9px 16px;
    font-size: .82rem;
    color: var(--tx-l, #180F1D);
    background: var(--surface, #fff);
    border: 1px dashed rgba(214, 51, 108, .5);
    border-radius: 50px;
    /*box-shadow: 0 8px 20px -14px rgba(74, 50, 120, .35);*/
}

.plan-strip-main {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.plan-strip-gift {
    color: var(--rg, #D6336C);
    font-size: 1rem;
}

.plan-strip-main b {
    font-weight: 700;
}

.plan-strip-main s {
    color: var(--rg-dk, #A02458);
    font-weight: 600;
}

.plan-strip-main strong {
    color: var(--rg, #D6336C);
    font-weight: 800;
}

.plan-strip-pt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mt-l, #6b5a70);
    font-weight: 500;
}

    .plan-strip-pt i {
        color: var(--gd, #6C4BA6);
        font-size: .7rem;
    }

/* ---------- (i) button, slightly highlighted ---------- */
.plan-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 2px;
    font-size: .85rem;
    line-height: 1;
    color: var(--gd, #6C4BA6);
    background: rgba(108, 75, 166, .12);
    border: 1px solid rgba(108, 75, 166, .35);
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

    .plan-info:hover,
    .plan-info:focus-visible {
        color: #fff;
        background: var(--gd, #6C4BA6);
        transform: scale(1.1);
        outline: none;
    }

/* ---------- Modal ---------- */
.pi-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(24, 15, 29, .55);
}

    .pi-modal.open {
        display: flex;
    }

.pi-box {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 24px 22px 20px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #EADFEE);
    border-top: 4px solid var(--rg, #D6336C);
    border-radius: 18px;
    box-shadow: 0 28px 60px -22px rgba(24, 15, 29, .55);
    animation: piIn .18s ease;
}

@keyframes piIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pi-x {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mt-l, #6b5a70);
    cursor: pointer;
}

    .pi-x:hover {
        color: var(--rg, #D6336C);
    }

.pi-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rg-dk, #A02458);
    background: rgba(214, 51, 108, .09);
    border: 1px solid rgba(214, 51, 108, .28);
    border-radius: 50px;
}

.pi-title {
    margin: 10px 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tx-l, #180F1D);
}

.pi-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}

    .pi-price s {
        font-size: .95rem;
        font-weight: 600;
        color: var(--rg-dk, #A02458);
    }

    .pi-price strong {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--rg, #D6336C);
    }

    .pi-price span {
        font-size: .75rem;
        color: var(--mt-l, #6b5a70);
    }

.pi-sub {
    margin: 0 0 6px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gd, #6C4BA6);
}

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

    .pi-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 0;
        font-size: .84rem;
        line-height: 1.4;
        color: var(--tx-l, #180F1D);
        border-bottom: 1px dotted var(--line, #EADFEE);
    }

        .pi-list li:last-child {
            border-bottom: 0;
        }

        .pi-list li::before {
            content: "\f00c";
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1px;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: .55rem;
            color: #fff;
            background: linear-gradient(135deg, var(--rg, #D6336C), var(--gd, #6C4BA6));
            border-radius: 50%;
        }

.pi-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 9px 11px;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--gd-dk, #4A3278);
    background: var(--soft, #F5EDF8);
    border-radius: 10px;
}

    .pi-note i {
        margin-top: 2px;
        color: var(--gd, #6C4BA6);
    }

.pi-actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.pi-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.pi-btn--main {
    color: #fff;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--gd-dk, #4A3278), var(--gd, #6C4BA6));
    box-shadow: 0 10px 20px -12px rgba(74, 50, 120, .9);
}

    .pi-btn--main:hover {
        color: #fff;
        text-decoration: none;
        transform: translateY(-1px);
        background: linear-gradient(135deg, var(--rg-dk, #A02458), var(--rg, #D6336C));
    }

.pi-btn--close {
    color: var(--rg-dk, #A02458);
    background: var(--surface, #fff);
    border: 1.5px solid var(--rg, #D6336C);
}

    .pi-btn--close:hover {
        background: rgba(214, 51, 108, .08);
    }

@media (max-width: 520px) {
    .plan-strip {
        padding: 9px 12px;
        font-size: .76rem;
    }

    .pi-box {
        padding: 22px 16px 16px;
    }
}
/*end plan*/