:root {
    --accent: #10B981;
    --accent-rgb: 16, 185, 129;
    --primary: #059669;
    --primary-rgb: 5, 150, 105;
    --primary-deep: #047857;
    --primary-deep-rgb: 4, 120, 87;
    --primary-tint: #D1FAE5;
    --soft-accent: #34D399;
    --soft-accent-rgb: 52, 211, 153;
    --sup-blue: #0EA5A4;
    --sup-blue-rgb: 14, 165, 164;

    --ink: #0F2A22;
    --ink-rgb: 15, 42, 34;
    --muted: #4E6B62;

    --lavender: #E7F5EE;
    --lavender-rgb: 231, 245, 238;
    --sage: #D6F3E6;
    --sage-rgb: 214, 243, 230;
    --peach: #EAF6EE;
    --peach-rgb: 234, 246, 238;
    --cream: #EBF6F0;
    --cream-rgb: 235, 246, 240;

    --sky: var(--primary);
    --sky-rgb: var(--primary-rgb);
    --sky-deep: var(--primary-deep);
    --sky-tint: var(--primary-tint);

    --pink: var(--accent);
    --pink-rgb: var(--accent-rgb);
    --pink-deep: #059669;

    --blush: #DCF4E9;
    --blush-rgb: 220, 244, 233;
    --blush-tint: #DCF4E9;
    --amber: #BA9351;
    --amber-rgb: 186, 147, 81;
    --amber-tint: #F6EEDD;

    --green: var(--soft-accent);
    --green-rgb: var(--soft-accent-rgb);
    --green-tint: #DCFCE7;

    --paper: #F1F9F5;
    --white: #FFFFFF;
    --line: #C7E9D9;

    --grad-brand: linear-gradient(135deg, #047857 0%, #059669 45%, #34D399 100%);
    --grad-blue: linear-gradient(135deg, #0EA5A4 0%, #059669 100%);
    --grad-soft: linear-gradient(135deg, rgba(5, 150, 105, .08) 0%, rgba(52, 211, 153, .10) 100%);

    --font-display: 'Poppins', sans-serif;
    --font-body:  'Nunito Sans', sans-serif;
    --radius-xl: 20px;
    --radius-lg: 18px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --shadow-soft: 0 14px 30px -20px rgba(var(--primary-deep-rgb), .18);
    --shadow-lift: 0 18px 38px -18px rgba(var(--primary-deep-rgb), .22);
    --shadow-tight: 0 4px 14px -8px rgba(var(--primary-deep-rgb), .14);
    --shadow-glow-pink: 0 10px 24px -12px rgba(var(--accent-rgb), .22);
    --shadow-glow-sky: 0 10px 24px -12px rgba(var(--primary-rgb), .22);

    --grad-gold: var(--amber);
    --grad-scroll: var(--grad-brand);
    --grad-dark: var(--paper);

    --ease-premium: cubic-bezier(.22, 1, .36, 1);

    --surface-dark: #E6F6EE;
    --surface-dark-rgb: 230, 246, 238;
    --text-muted: #4E6B62;
    --text-light: #7E9A90;
    --border-light: #E4F2EA;
    --border-medium: #C7E9D9;
    --focus-ring: rgba(var(--primary-rgb), 0.18);
    --card-bg: #FFFFFF;
    --card-hover-bg: #F6FDF9;
    --section-soft: #E6F6EE;
    --section-white: #FFFFFF;
    --transition-fast: 0.2s;
    --transition-medium: 0.3s;
    --transition-slow: 0.5s;
    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.1rem;
    --text-xl: 1.2rem;
    --text-2xl: 1.4rem;
    --text-3xl: 1.8rem;
    --text-4xl: 2.2rem;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --shadow-card: 0 2px 12px -6px rgba(var(--primary-deep-rgb), 0.08);
    --shadow-hover: 0 8px 30px -16px rgba(var(--primary-deep-rgb), 0.16);

    --bg-main: #F1F9F5;
    --bg-hero: #D6F3E6;
    --bg-section1: #E6F6EE;
    --bg-section2: #F4FBF7;

    /* gold system (shared) */
    --gold: var(--amber);
    --gold-rgb: var(--amber-rgb);
    --gold-deep: #94722F;
    --gold-tint: var(--amber-tint);
    --gold-hairline: rgba(var(--amber-rgb), .42);
    --ivory: #FBF9F4;
    --grad-gold-rich: linear-gradient(135deg, #D6B678 0%, var(--amber) 55%, #A57E3C 100%);

    /* chip / pill component tokens */
    --chip-h: 42px;
    --chip-radius: 999px;
    --chip-bg: linear-gradient(180deg, #fff 0%, #F7FDFA 100%);
    --chip-border: var(--line);
    --chip-ink: var(--ink);
    --chip-shadow: 0 1px 2px rgba(var(--primary-deep-rgb), .05), 0 6px 14px -10px rgba(var(--primary-deep-rgb), .28);
    --chip-shadow-hover: 0 2px 4px rgba(var(--primary-deep-rgb), .06), 0 16px 26px -14px rgba(var(--primary-deep-rgb), .42);
    --chip-shadow-active: 0 14px 26px -12px rgba(var(--primary-deep-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .60);
    --chip-gap: .5rem;

    --tr-gold-rgb: var(--amber-rgb);
    --tr-deep: var(--primary-deep);
    --tr-grad-brand: var(--grad-brand);
    --tr-grad-gold: linear-gradient(135deg, #D6B678 0%, var(--amber) 55%, #A57E3C 100%);

    /* ===== Experts swiper ===== */
    --ex-card-radius:     var(--radius-lg);
    --ex-gap:             1.25rem;
    --ex-card-shadow:     0 18px 42px -22px rgba(var(--primary-deep-rgb), .28);
    --ex-card-shadow-hover: 0 26px 54px -22px rgba(var(--primary-deep-rgb), .38);
    --ex-bg: linear-gradient(180deg, #FBF9F4 0%, #E6F6EE 100%);
    --ex-scroll: 260vh;
    --ex-stage-h: min(100vh, 780px);
    --ex-win-h: min(calc(100vh - 7rem), 640px);
    --ex-card-radius: 18px;
    --ex-card-bg: rgba(255, 255, 255, .92);
    --ex-card-shadow: 0 1px 2px rgba(var(--primary-deep-rgb), .06), 0 16px 30px -18px rgba(var(--primary-deep-rgb), .30);
    --ex-card-shadow-hover: 0 2px 4px rgba(var(--primary-deep-rgb), .08), 0 28px 44px -20px rgba(var(--primary-deep-rgb), .42);
    --ex-fade: 56px;
    --ex-col-gap: 1rem;
    --ex-lerp: .12;

    /* home page feature cards */
    --rr-bg: linear-gradient(180deg, #E6F6EE 0%, #FBF9F4 100%);
    --rr-radius: 22px;
    --rr-card-bg: #fff;
    --rr-head-h: 150px;
    --rr-dark-bg:
        radial-gradient(520px 260px at 100% 0%, rgba(var(--gold-rgb), .30), transparent 70%),
        radial-gradient(460px 280px at 0% 100%, rgba(var(--sup-blue-rgb), .32), transparent 70%),
        linear-gradient(135deg, #047857 0%, #059669 45%, #34D399 100%);
    --rr-glass: rgba(255, 255, 255, .35);
    --rr-glass-border: rgba(255, 255, 255, .55);

    /* learning path section */
    --lp-bg: var(--ex-bg);
    --lp-node: 62px;
    --lp-node-ring: 6px;
    --lp-line: 2px dashed rgba(var(--gold-rgb), .75);
    --lp-card-pad: 3rem 1.5rem 1.4rem;
}



* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
.font-display {
    font-family: var(--font-display);
    letter-spacing: -.01em;
}

.section-pad {
    padding: 54px 0;
}

@media (max-width:768px) {
    .section-pad {
        padding: 40px 0;
    }
}


/* ── Eyebrow / headings ── */
.vp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--sky-tint);
    color: var(--sky-deep);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.vp-eyebrow.on-dark {
    background: var(--blush-tint);
    color: var(--pink-deep);
}

.vp-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pink);
}





.section-heading {
    font-size: clamp(1.9rem, 3vw, 2.03rem);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--ink);
    margin-bottom: 12px;
}

.section-head-wrap {
    margin-bottom: 34px;
}

/* ── Buttons ── */
.btn-vp-light {
    background: #fff;
    color: var(--primary);
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    border: 1.5px solid var(--line);
    transition: all .25s ease;
}

.btn-vp-light:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-tight);
}

.btn-vp-ghost-light {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: var(--white);
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    transition: all .25s var(--ease-premium);
}

.btn-vp-ghost-light:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
    transform: translateY(-2px);
}

.vp-inline-link {
    color: var(--primary);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    text-decoration: underline;
    text-decoration-color: rgba(var(--primary-rgb), .35);
    text-underline-offset: 3px;
}

.vp-inline-link:hover {
    color: var(--primary-deep);
}

.vp-stats {
    background: var(--paper);
    color: var(--ink);
    position: relative;
    overflow: hidden;
    padding: 60px 0;
}

.vp-stats::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(232, 231, 248, 0.08), transparent 65%);
    z-index: 0;
}

.vp-stats::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 60%, rgba(214, 240, 213, 0.06), transparent 70%);
    z-index: 0;
}

.vp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    position: relative;
    z-index: 1;
}

.vp-stat-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 42px 28px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
}

.vp-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
}

.vp-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.7), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}

.vp-stat-card.companies {
    background: #E8E7F8;
}

.vp-stat-card.professionals {
    background: #D6F0D5;
}

.vp-stat-card.experts {
    background: #FDE7DD;
}

.vp-stat-card.live {
    background: #1C1562;
    color: #fff;
}

.vp-stat-card.certified {
    background: #F7EFC5;
}

.vp-stat-item {
    text-align: center;
}

.vp-stat-item .num {
    font-family: var(--font-display);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--primary);
    margin-bottom: 8px;
}

.vp-stat-card.live .num {
    color: #fff;
}

.vp-stat-item p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}

.vp-stat-card.live .vp-stat-item p,
.vp-stat-card.live .num {
    color: #fff;
    opacity: 0.95;
}

.vp-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: var(--primary);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vp-stat-card.live .vp-stat-icon {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* ── Illustration / image placeholders ── */
.vp-illustration-placeholder {
    border-radius: var(--radius-lg);
    border: 1.5px dashed rgba(var(--pink-rgb), .25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(var(--pink-rgb), .55);
    text-align: center;
}

.vp-cta-illustration video.vp-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.vp-illustration-placeholder i {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

.vp-illustration-placeholder span {
    font-size: .74rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vp-illustration-placeholder.on-dark {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .85);
}

/* ============================================================
   NAVBAR
   ============================================================ */
.vp-navbar {
    position: sticky;   /* was: fixed */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}
.vp-navbar.is-solid {
    padding: 11px 0;
    background: var(--white);
    box-shadow: var(--shadow-tight);
}

.vp-logo-img {
    height: 38px;
    width: auto;
    display: block;
}
.vp-nav .nav-link {
    font-weight: 500;
    color: var(--ink) !important;
    font-size: .93rem;
    padding: 8px 16px !important;
    border-radius: 999px;
    transition: all .25s ease;
    position: relative;
}

/* Clean hover - background tint + subtle scale */
.vp-nav .nav-link:hover {
    background: var(--sky-tint);
    color: var(--sky-deep) !important;
    transform: translateY(-1px);
}
.vp-nav .nav-link.active {
    background: var(--sky);
    color: var(--white) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.22);
}
.vp-nav .dropdown-toggle::after {
    display: none;
    /* Hide default bootstrap caret */
}

/* Custom dropdown indicator */
.vp-nav .dropdown-toggle .dropdown-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.7rem;
    transition: transform .3s ease;
    vertical-align: middle;
}

.vp-nav .dropdown-toggle[aria-expanded="true"] .dropdown-icon {
    transform: rotate(180deg);
}
.vp-nav .dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    padding: 10px;
    margin-top: 10px;
    animation: dropdownFade .25s ease;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vp-nav .dropdown-item {
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: .88rem;
    font-weight: 500;
    transition: all .2s ease;
}

.vp-nav .dropdown-item:hover {
    background: var(--blush-tint);
    color: var(--pink-deep);
    transform: translateX(4px);
}

/* Secondary outline button (for hero) */

.vp-cart-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sky-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sky-deep);
    position: relative;
    border: none;
    transition: all .3s ease;
}

.vp-cart-btn:hover {
    background: var(--sky);
    color: var(--white);
    transform: scale(1.05);
}

.vp-cart-btn .badge-count {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--amber);
    color: var(--ink);
    font-size: .6rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ============================================================
   HAMBURGER TOGGLER — circular, matches cart button, morphs to X
   ============================================================ */
.vp-nav-toggler {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sky-tint);
    color: var(--sky-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all .3s ease;
}
.vp-nav-toggler:focus { box-shadow: none; outline: none; }
.vp-nav-toggler:hover { background: var(--sky); color: var(--white); }

.vp-nav-toggler .vp-toggler-icon-close { display: none; }
.vp-nav-toggler[aria-expanded="true"] { background: var(--sky); color: var(--white); }
.vp-nav-toggler[aria-expanded="true"] .vp-toggler-icon-open { display: none; }
.vp-nav-toggler[aria-expanded="true"] .vp-toggler-icon-close { display: inline-block; font-size: 0.95rem; }

/* *  MOBILE MENU PANEL */
@media (max-width: 991.98px) {
    .navbar-collapse {
        margin-top: 14px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lift);
        padding: 10px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .vp-nav {
        gap: 2px !important;
    }

    .vp-nav .nav-item {
        border-bottom: 1px solid var(--line);
    }
    .vp-nav .nav-item:last-child { border-bottom: none; }

    .vp-nav .nav-link {
        border-radius: var(--radius-sm);
        padding: 13px 14px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .vp-nav .nav-link:hover,
    .vp-nav .nav-link.active {
        transform: none;
    }

    /* Dropdowns render inline as an indented sub-list, not floating */
    .vp-nav .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--sky-tint);
        border-radius: 0;
        margin: 2px 0 6px 18px;
        padding: 4px 0 4px 10px;
        animation: none;
    }

    .vp-nav .dropdown-item {
        padding: 10px 12px;
    }
    .vp-nav .dropdown-item:hover { transform: none; }

    /* Actions row (cart + Get Started) inside the panel */
    .vp-nav-actions {
        margin-top: 12px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
        justify-content: space-between;
    }
    .vp-nav-actions .btn-vp-primary {
        flex: 1;
        justify-content: center;
    }
}

/* ===== Hero section: squared, no glass, timeline slider ===== */
.vph-wrap {
    --vph-card-w: clamp(170px, 18vw, 240px);
    --vph-gap: 16px;
    /* how far the slider runs past the 1200px container to the screen edge */
    --vph-bleed: max(1.25rem, calc((100vw - 1200px) / 2 + 1.25rem));

    background: var(--bg-hero);
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    overflow-x: clip;
}

.vph-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.vph-grid {
    display: grid;
    grid-template-columns: 30px minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2.75rem);
    align-items: center;
}

/* ---------- Timeline (left rail) ---------- */
.vph-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vph-timeline::before {
    content: "";
    position: absolute;
    inset: 6px auto 6px 50%;
    width: 1px;
    background: var(--primary-deep);
    translate: -50% 0;
}
.vph-timeline li { position: relative; display: grid; place-items: center; }

.vph-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;                      /* rounded dot */
    background: var(--primary-deep);
    color: #fff;
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: width var(--transition-fast), height var(--transition-fast), background var(--transition-fast);
}
.vph-dot::before { content: ""; position: absolute; inset: -9px; } /* larger tap target */
.vph-dot span { opacity: 0; transition: opacity var(--transition-fast); }
.vph-dot[aria-current="true"] { width: 30px; height: 30px; background: var(--accent); }
.vph-dot[aria-current="true"] span { opacity: 1; }
.vph-dot:focus-visible,
.vph-rail:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------- Left text column ---------- */
.vph-content { min-width: 0; }

.vph-head { margin-bottom: 1rem; }

.vph-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary-deep);
    margin-bottom: .65rem;
}

.vph-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
}
.vph-title em { font-style: normal; color: var(--accent); font-weight: 700; }

.vph-copy { margin-bottom: 1.25rem; }

.vph-kicker {
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--ink);
    margin: 0 0 .5rem;
}
.vph-kicker b { color: var(--primary); }

.vph-desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* CTAs */
.vph-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }

.vph-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    background: var(--grad-brand);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-sm);         /* soft squared pill */
    box-shadow: var(--shadow-glow-sky);
    transition: transform var(--transition-fast) var(--ease-premium),
                box-shadow var(--transition-fast) var(--ease-premium);
}
.vph-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.vph-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--primary-deep);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.vph-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Slider rail (right side) ---------- */
.vph-visual { min-width: 0; }

.vph-rail {
    display: flex;
    align-items: center;
    gap: var(--vph-gap);
    height: clamp(300px, 34vw, 400px);
    margin-right: calc(var(--vph-bleed) * -1);                       /* bleed to the screen edge */
    padding-right: calc(100% + var(--vph-bleed) - var(--vph-card-w)); /* lets the last card reach the start */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius-lg);         /* rounded rail */
    padding-left: var(--vph-gap);
}
.vph-rail::-webkit-scrollbar { display: none; }

.vph-card {
    position: relative;
    flex: 0 0 var(--vph-card-w);
    height: 78%;
    margin: 0;
    overflow: hidden;
    scroll-snap-align: start;
    border-radius: var(--radius-lg);         /* rounded cards */
    background: var(--primary-tint);
    transition: height .45s var(--ease-premium),
                border-radius .45s var(--ease-premium);
}
.vph-card.is-active { height: 100%; box-shadow: var(--shadow-card); border-radius: var(--radius-xl); }

.vph-card img,
.vph-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;                  /* follow card radius */
}

.vph-card figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.2rem .9rem .8rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
    border-bottom-left-radius: inherit;      /* follow card radius */
    border-bottom-right-radius: inherit;
}

/* One load-in moment: cards arrive from the right */
@media (prefers-reduced-motion: no-preference) {
    .vph-card { animation: vph-arrive .9s var(--ease-premium) backwards; }
    .vph-card:nth-child(2) { animation-delay: .1s; }
    .vph-card:nth-child(3) { animation-delay: .2s; }
    @keyframes vph-arrive { from { translate: 80px 0; opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    .vph-card, .vph-dot { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .vph-wrap { --vph-card-w: 64vw; --vph-bleed: 1.25rem; }

    .vph-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .vph-visual { order: 2; }

    /* dots become a horizontal row under the slider */
    .vph-timeline { order: 3; flex-direction: row; justify-content: flex-start; }
    .vph-timeline::before { inset: 50% 6px auto 6px; width: auto; height: 1px; translate: 0 -50%; }

    .vph-rail { height: 280px; }
}

/*  BUNDLES — soft cards, colored */
.vp-section-fade {
    width: 100%;
    padding: 2rem 0;
}

.container-xl {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* section head */
.section-head-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.vp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sky-deep);
    background: var(--sky-tint);
    padding: 0.3rem 1rem 0.3rem 0.8rem;
    border-radius: 40px;
    margin-bottom: 0.75rem;
}

.vp-eyebrow .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--grad-brand);
    border-radius: 20px;
    margin-right: 0.2rem;
}

/* swiper */
.vpBundleSwiper {
    overflow: hidden;
    padding: 0.75rem 0.25rem 1.25rem 0.25rem;
}

.swiper-slide {
    height: auto;
    display: flex;
}

/* CARD */
.vp-bundle-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    border: 1px solid #edf1f6;
    box-shadow: 0 1px 3px rgba(20, 30, 50, 0.04);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.16,1,.3,1),
                box-shadow .4s cubic-bezier(.16,1,.3,1),
                border-color .4s ease;
}

.vp-bundle-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 141, 239, 0.25);
    box-shadow: 0 20px 40px -16px rgba(91, 141, 239, 0.22);
}

/* highlighted card gets a colored ring instead of a louder card treatment */
.vp-bundle-card[data-highlight="true"] {
    border-color: var(--sky-deep);
    box-shadow: 0 4px 20px -6px rgba(91, 141, 239, 0.28);
}

.bundle-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    font-size: 0.68rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--sky-deep);
    padding: 0.32rem 0.75rem;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(91, 141, 239, 0.35);
}
.bundle-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f4f7fb;
}

.bundle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.vp-bundle-card:hover .bundle-img {
    transform: scale(1.05);
}
.bundle-category {
    display: inline-block;
    width: fit-content;
    margin-top: 0.35rem;
    margin-bottom: 0.5rem;

    font-size: 0.7rem;
        font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    letter-spacing: 0.03em;
    text-transform: uppercase;

    color: #fff;
    background: rgba(20, 33, 58, 0.82);

    padding: 0.32rem 0.8rem;
    border-radius: 30px;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
/* info */
.bundle-info {
    padding: 1.1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

.bundle-info h5 {
    font-size: 1rem;
    font-weight: 500;
    color: #14213a;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.35;
}

.bundle-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.76rem;
    color: #8a94a6;
}

.bundle-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bundle-meta i {
    font-size: 0.85rem;
    color: var(--sky-deep);
}

.bundle-footer {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid #f0f3f8;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bundle-price {
    font-size: 1.1rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: #14213a;
    letter-spacing: -0.01em;
    font-family: 'Inter', system-ui, sans-serif;
}

.bundle-cta {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sky-deep);
    background: rgba(91, 141, 239, 0.08);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all .35s cubic-bezier(.16,1,.3,1);
}

.vp-bundle-card:hover .bundle-cta {
    background: var(--sky-deep);
    color: #fff;
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 768px) {
    .section-heading {
        font-size: 1.6rem;
    }

    .bundle-info {
        padding: 0.95rem 1rem 1rem;
        gap: 0.55rem;
    }

    .bundle-info h5 {
        font-size: 0.92rem;
    }

    .bundle-price {
        font-size: 1rem;
    }

    .bundle-badge {
        top: 10px;
        left: 10px;
        font-size: 0.62rem;
        padding: 0.26rem 0.6rem;
    }
}

@media (max-width: 576px) {
    .section-heading {
        font-size: 1.4rem;
    }

    .section-sub {
        font-size: 0.85rem;
    }

    .bundle-info h5 {
        font-size: 0.88rem;
    }

    .bundle-price {
        font-size: 0.92rem;
    }

    .bundle-cta {
        width: 32px;
        height: 32px;
    }
}
/* ============================================================
   POPULAR + LATEST CARDS  */

#popular .vp-popular-card,
#latest .vp-latest-mini {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-tight);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

#popular .vp-popular-card:hover,
#latest .vp-latest-mini:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(var(--sky-rgb), .25);
}

/* Thumbnail — aspect-ratio instead of padding-bottom, no gap regardless of card height */
.vp-pop-thumb,
.vp-lat-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sky-tint);
    flex-shrink: 0;
}

.vp-pop-thumb .vp-thumb-img,
.vp-lat-thumb .vp-thumb-img {
        display: block;
        width: 100%;
        height: 90%;
        object-fit: cover;
        transform: scale(1.01);
        transition: transform .6s var(--ease-premium);
    }
#popular .vp-popular-card:hover .vp-thumb-img,
#latest .vp-latest-mini:hover .vp-thumb-img {
    transform: scale(1.05);
}

.vp-pop-level,
.vp-lat-new {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: .64rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: 999px;
    z-index: 2;
}
\\
.vp-pop-level {
    background: rgba(19, 124, 98, 0.55);
    backdrop-filter: blur(4px);
    color: #fff;
}

.vp-lat-new {
    background: var(--amber-tint);
    color: #8A6420;
}

/* Body */
.vp-pop-body,
.vp-lat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem 1.1rem;
}

.vp-pop-title,
.vp-lat-title {
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: .92rem;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

/* Chapter count + level — single row */
.vp-pop-meta,
.vp-lat-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: .8rem;
    flex-wrap: wrap;
}

.vp-pop-meta span,
.vp-lat-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.vp-pop-meta i,
.vp-lat-meta i {
    font-size: .85rem;
    color: var(--muted);
}

/* Footer — author + price */
.vp-pop-foot,
.vp-lat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: .8rem;
    margin-top: auto;
    gap: 10px;
}

.vp-pop-author,
.vp-lat-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vp-pop-author img,
.vp-lat-author img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.vp-pop-author span,
.vp-lat-author span {
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Price + icon on the same line */
.vp-pop-price,
.vp-lat-price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--sky-deep);
    font-size: 1rem;
    background: rgba(var(--sky-rgb), .06);
    padding: .15rem .7rem;
    border-radius: 30px;
    flex-shrink: 0;
}

.vp-pop-price i,
.vp-lat-price i {
    font-size: .75rem;
}

/* ============================================================
   LATEST HEAD / NAV — unchanged
   ============================================================ */
#latest .vp-latest-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}

#latest .vp-latest-nav {
    display: flex;
    gap: 8px;
}

#latest .vp-latest-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--sky-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    cursor: pointer;
}

#latest .vp-latest-nav button:hover {
    background: var(--sky);
    color: #fff;
    border-color: var(--sky);
}
/* ============================================================
   SECTION HEADERS (shared - keep as is)
   ============================================================ */
.vp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sky-deep);
    background: var(--sky-tint);
    padding: 0.3rem 1rem 0.3rem 0.8rem;
    border-radius: 40px;
    margin-bottom: 0.75rem;
}

.vp-eyebrow .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--grad-brand);
    border-radius: 20px;
    margin-right: 0.2rem;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS - Scoped
   ============================================================ */
@media (max-width: 768px) {
    #accredited .vp-course-body h6,
    #popular .vp-popular-card h6,
    #latest .vp-latest-mini h6 {
        font-size: .85rem;
        min-height: 2.2em;
    }

    #accredited .vp-course-meta,
    #popular .vp-course-meta,
    #latest .vp-course-meta {
        font-size: .72rem;
        gap: 0.8rem;
    }

    #accredited .vp-price-tag,
    #popular .vp-price-tag,
    #latest .vp-price-tag {
        font-size: .9rem;
        padding: 0.1rem 0.6rem;
    }

    #accredited .vp-course-author span,
    #popular .vp-course-author span,
    #latest .vp-course-author span {
        font-size: .72rem;
    }

#accredited .vp-course-author img,
#popular .vp-course-author img,
#latest .vp-course-author img {
    width: 22px;
    height: 22px;
    object-fit: contain; /* Show full image */
    object-position: center;
}
    .section-heading {
        font-size: 1.6rem;
    }
}

@media (max-width: 576px) {
    #accredited .vp-course-thumb,
    #latest .vp-latest-thumb {
        padding-bottom: 65%;
    }

    #accredited .vp-course-body,
    #popular .vp-popular-card > *:not(.vp-course-thumb):not(.ribbon),
    #latest .vp-latest-mini > *:not(.vp-latest-thumb) {
        padding: 0.7rem 0.8rem 0.8rem;
    }

    #accredited .vp-course-body h6,
    #popular .vp-popular-card h6,
    #latest .vp-latest-mini h6 {
        font-size: .8rem;
    }

    .section-heading {
        font-size: 1.4rem;
    }

    .section-sub {
        font-size: 0.85rem;
    }
}

/* ============================================================
   POPULAR TRAININGS (carousel)
   ============================================================ */
.vp-popular-card {
    position: relative;
    /* required so the ribbon can anchor to the card, not the page */
    overflow: hidden;
}

.vp-popular-card .ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: auto;
    /* prevent it from stretching full width */
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    padding: 3px 10px;
    border-radius: 20px;
    line-height: 1.4;
    z-index: 2;
}

.vp-popular-card .instr {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}

.vp-popular-card .instr .av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: .74rem;
}

.vp-popular-card .instr small {
    color: var(--muted);
    font-size: .74rem;
}

.vp-latest-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}

.vp-latest-nav {
    display: flex;
    gap: 8px;
}

.vp-latest-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--sky-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.vp-latest-nav button:hover {
    background: var(--sky);
    color: #fff;
    border-color: var(--sky);
}

.vp-latest-scroll {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 14px;
    scrollbar-width: thin;
}

.vp-latest-scroll::-webkit-scrollbar {
    height: 5px;
}

.vp-latest-scroll::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 10px;
}

.vp-latest-mini {
    flex: 0 0 265px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.vp-latest-mini:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-tight);
    border-color: rgba(var(--sky-rgb), .25);
}

.vp-latest-mini .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.vp-latest-mini .cat {
    font-size: .66rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pink-deep);
}

.vp-latest-mini .newest-dot {
    background: var(--amber-tint);
    color: #8A6420;
    font-size: .62rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    padding: 3px 9px;
    border-radius: 999px;
}

.vp-latest-mini .date {
    font-size: .72rem;
    color: var(--muted);
    margin-bottom: 10px;
}

.vp-latest-mini h6 {
    font-size: .92rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    margin-bottom: 10px;
    line-height: 1.35;
    color: var(--ink);
    min-height: 48px;
}

.vp-latest-mini a.mini-link {
    font-size: .78rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--sky);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vp-latest-mini a.mini-link:hover {
    color: var(--sky-deep);
}

/* ============================================================
   WHY CHOOSE US — ZIGZAG
   ============================================================ */
.vp-why-row {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.vp-why-row:last-child {
    border-bottom: none;
}

.vp-why-row.reverse {
    flex-direction: row-reverse;
}

.vp-why-illustration {
    flex: 0 0 300px;
    height: 200px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.vp-why-illustration::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .16), transparent 60%);
}

.vp-why-content h5 {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.28rem;
    margin-bottom: 10px;
    color: var(--ink);
}

.vp-why-content p {
    color: var(--muted);
    margin-bottom: 0;
}

.vp-why-num {
    font-family: var(--font-display);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: rgba(var(--sky-rgb), .14);
    font-size: 2.4rem;
    line-height: 1;
}

@media (max-width:767px) {

    .vp-why-row,
    .vp-why-row.reverse {
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

    .vp-why-illustration {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ============================================================
   MEET THE EXPERTS
   ============================================================ */
.vp-team-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.vp-team-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(var(--sky-rgb), .22);
}

.vp-team-avatar {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-family: var(--font-display);
    font-size: .95rem;
    margin-bottom: 16px;
}

.vp-team-card .name {
    font-family: var(--font-display);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.02rem;
    color: var(--ink);
    margin-bottom: 2px;
}

.vp-team-card .role {
    font-size: .78rem;
    color: var(--muted);
    margin-bottom: 14px;
}

.vp-team-card .bio {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 18px;
    min-height: 66px;
}

.vp-team-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--sky-deep);
    background: var(--sky-tint);
    padding: 6px 13px;
    border-radius: 999px;
}

/* ============================================================
   STATISTICS (light, solid)
   ============================================================ */
.vp-stats {
    background: var(--blush-tint);
    color: var(--ink);
    position: relative;
    overflow: hidden;
}

.vp-stats::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--pink-rgb), .12), transparent 70%);
}

.vp-stat-item {
    text-align: center;
    padding: 14px 10px;
}

.vp-stat-item .num {
    font-family: var(--font-display);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 2.5rem;
    color: var(--pink-deep);
}

.vp-stat-item p {
    color: var(--muted);
    font-size: .84rem;
    max-width: 200px;
    margin: 8px auto 0;
}

/* ============================================================
   CERTIFIED SCHEMES (circular)
   ============================================================ */
.vp-scheme-wrap {
    transition: transform 0.3s var(--ease-premium);
    position: relative;
}

.vp-scheme-wrap:hover {
    transform: translateY(-6px);
}

.vp-scheme-circle {
    width: 146px;
    height: 146px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: var(--shadow-tight);
    position: relative;
    overflow: visible;
    transition: all 0.3s var(--ease-premium);
}

/* Base circle styling */
.vp-scheme-circle i {
    font-size: 1.8rem;
    color: var(--sky-deep);
    margin-bottom: 6px;
    transition: all 0.3s var(--ease-premium);
    z-index: 2;
    position: relative;
}

.vp-scheme-circle span {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 0.8rem;
    color: var(--ink);
    z-index: 2;
    position: relative;
}

/* ── GRADIENT BORDER (static — no continuous spin) ── */
.vp-scheme-border {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: var(--grad-brand);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.45;
    transition: opacity 0.3s var(--ease-premium);
}

/* Individual scheme accents — tonal variations of the same brand gradient */
.vp-scheme-circle[data-scheme="sqf"] .vp-scheme-border {
    background: linear-gradient(135deg, var(--primary-deep), var(--primary));
}

.vp-scheme-circle[data-scheme="brcgs"] .vp-scheme-border {
    background: linear-gradient(135deg, var(--primary), var(--soft-accent));
}

.vp-scheme-circle[data-scheme="fssc"] .vp-scheme-border {
    background: linear-gradient(135deg, var(--soft-accent), var(--sup-blue));
}

.vp-scheme-circle[data-scheme="ifs"] .vp-scheme-border {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.vp-scheme-circle[data-scheme="globalgap"] .vp-scheme-border {
    background: var(--grad-brand);
}

/* ── HOVER EFFECTS ── */
.vp-scheme-wrap:hover .vp-scheme-border {
    opacity: 1;
}

.vp-scheme-wrap:hover .vp-scheme-circle {
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.08), var(--shadow-lift);
}

.vp-scheme-wrap:hover .vp-scheme-circle i {
    transform: scale(1.1);
    color: var(--ink);
}

.vp-scheme-wrap:hover .vp-scheme-circle span {
    color: var(--sky-deep);
}


/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .vp-scheme-circle {
        width: 110px;
        height: 110px;
    }

    .vp-scheme-circle i {
        font-size: 1.4rem;
    }

    .vp-scheme-circle span {
        font-size: 0.7rem;
    }

    .vp-scheme-border {
        inset: -2px;
        padding: 2px;
    }
}

@media (max-width: 576px) {
    .vp-scheme-circle {
        width: 90px;
        height: 90px;
    }

    .vp-scheme-circle i {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }

    .vp-scheme-circle span {
        font-size: 0.65rem;
    }

    .vp-scheme-border {
        inset: -2px;
        padding: 2px;
    }
}

.vp-about {
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Subtle background ambiance */
.vp-about::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 80%, rgba(var(--primary-rgb), 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 20%, rgba(var(--primary-rgb), 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* ── STAT CARDS WITH BORDERS ── */
.vp-about-stat-card {
    background: var(--paper);
    border-radius: var(--radius-md);
    padding: 18px 18px 20px;
    height: 100%;
    transition: all 0.3s var(--ease-premium);
    border: 1.5px solid var(--line);
    position: relative;
    overflow: hidden;
}

/* Subtle corner accent on cards */
.vp-about-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, transparent 50%, rgba(var(--primary-rgb), 0.04) 50%);
    border-radius: 0 0 0 var(--radius-sm);
    pointer-events: none;
}

.vp-about-stat-card:hover {
    border-color: var(--sky);
    background: #fff;
    box-shadow: var(--shadow-tight);
    transform: translateY(-3px);
}

/* ── STAT NUMBERS ── */
.vp-about-stat-card .num {
    font-family: var(--font-display);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.8rem;
    color: var(--ink);
    display: inline-block;
    position: relative;
}

/* Small colored underline under numbers */
.vp-about-stat-card .num::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 30%;
    height: 2.5px;
    background: var(--sky);
    border-radius: 2px;
    transition: width 0.3s var(--ease-premium);
}

.vp-about-stat-card:hover .num::after {
    width: 50%;
}

/* ── STAT TEXT ── */
.vp-about-stat-card h6 {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 0.86rem;
    margin: 8px 0 6px;
    color: var(--ink);
}

.vp-about-stat-card p {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}

/* ── HIGHLIGHT CARD (Audits) ── */
.vp-about-stat-card-highlight {
    border-color: var(--sky);
    background: var(--sky-tint);
    padding: 20px 22px;
}

.vp-about-stat-card-highlight:hover {
    border-color: var(--sky-deep);
    background: #fff;
    box-shadow: var(--shadow-glow-sky);
    transform: translateY(-3px);
}

/* ── QUOTE ── */
.vp-about-quote {
    background: var(--sky);
    border-radius: var(--radius-lg);
    padding: 32px 32px 30px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.18rem;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow-sky);
}

.vp-about-quote::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.vp-about-quote i {
    font-size: 1.8rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 12px;
}

/* ── SCHEME TAGS ── */
.vp-about-schemes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.vp-about-schemes span {
    background: var(--sky-tint);
    color: var(--sky-deep);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 0.76rem;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    transition: all 0.25s var(--ease-premium);
}

.vp-about-schemes span:hover {
    background: var(--sky);
    color: #fff;
    border-color: var(--sky);
    transform: translateY(-2px);
    box-shadow: var(--shadow-tight);
}

/* ── ILLUSTRATION ── */
.vp-about-illustration {
    height: 330px;
    margin-bottom: 20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.vp-about-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .vp-about-stat-card {
        padding: 14px 14px 16px;
    }

    .vp-about-stat-card .num {
        font-size: 1.5rem;
    }

    .vp-about-stat-card h6 {
        font-size: 0.8rem;
    }

    .vp-about-stat-card p {
        font-size: 0.72rem;
    }

    .vp-about-quote {
        font-size: 1rem;
        padding: 24px 20px;
    }

    .vp-about-illustration {
        height: 150px;
    }
}

@media (max-width: 576px) {
    .vp-about-stat-card .num {
        font-size: 1.3rem;
    }

    .vp-about-stat-card h6 {
        font-size: 0.75rem;
    }

    .vp-about-stat-card p {
        font-size: 0.68rem;
    }

    .vp-about-illustration {
        height: 130px;
    }
}

a {
    text-decoration: none;
}

/* ============================================================
   FAQ SECTION - Premium Redesign
   ============================================================ */
.vp-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── FAQ ITEM ── */
.vp-faq-item {
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s var(--ease-premium);
    box-shadow: var(--shadow-tight);
}

.vp-faq-item:hover {
    border-color: rgba(var(--primary-rgb), 0.14);
    box-shadow: var(--shadow-lift);
}

.vp-faq-item:focus-within {
    border-color: var(--sky);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.10), var(--shadow-lift);
}

/* ── FAQ HEADER / BUTTON ── */
.vp-faq-header {
    margin: 0;
}

.vp-faq-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.02rem;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.3s var(--ease-premium);
    position: relative;
}

.vp-faq-btn:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

.vp-faq-btn:focus {
    outline: none;
}

/* ── FAQ ICON ── */
.vp-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sky-tint);
    color: var(--sky-deep);
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.3s var(--ease-premium);
}

.vp-faq-btn:hover .vp-faq-icon {
    background: var(--sky);
    color: var(--white);
    transform: scale(1.05);
}

.vp-faq-btn:not(.collapsed) .vp-faq-icon {
    background: var(--sky);
    color: var(--white);
}

/* ── FAQ QUESTION ── */
.vp-faq-question {
    flex: 1;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--ink);
    transition: color 0.3s var(--ease-premium);
}

.vp-faq-btn:hover .vp-faq-question {
    color: var(--sky-deep);
}

.vp-faq-btn:not(.collapsed) .vp-faq-question {
    color: var(--sky-deep);
}

/* ── FAQ ARROW ── */
.vp-faq-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--muted);
    font-size: 0.85rem;
    transition: all 0.4s var(--ease-premium);
    flex-shrink: 0;
}

.vp-faq-btn:hover .vp-faq-arrow {
    background: var(--sky-tint);
    color: var(--sky-deep);
}

.vp-faq-btn:not(.collapsed) .vp-faq-arrow {
    background: var(--sky);
    color: var(--white);
    transform: rotate(180deg);
}

/* ── FAQ BODY ── */
.vp-faq-body {
    padding: 0 24px 24px 74px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.7;
    animation: faqSlideDown 0.3s var(--ease-premium);
}

.vp-faq-body p {
    margin: 0;
}

@keyframes faqSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── ACCORDION COLLAPSE OVERRIDES ── */
.accordion-collapse {
    transition: height 0.3s var(--ease-premium);
}

.accordion-collapse.collapsing {
    transition: height 0.3s var(--ease-premium);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .vp-faq-btn {
        padding: 16px 18px;
        font-size: 0.95rem;
        gap: 12px;
    }

    .vp-faq-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .vp-faq-arrow {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .vp-faq-body {
        padding: 0 18px 18px 62px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .vp-faq-btn {
        padding: 14px 14px;
        font-size: 0.88rem;
        gap: 10px;
        flex-wrap: wrap;
    }

    .vp-faq-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .vp-faq-question {
        flex: 1;
        min-width: 60%;
    }

    .vp-faq-arrow {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .vp-faq-body {
        padding: 0 14px 14px 52px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   FIND YOUR LEARNING PATH
   ============================================================ */
.vp-lp {
    position: relative;
    overflow: hidden;
    background: var(--lp-bg);
}
.vp-lp .container { position: relative; z-index: 2; }

/* route chips under the heading */
.vp-lp-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.2rem; }
.vp-lp-mode {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--gold-hairline);
    backdrop-filter: blur(6px);
    font-size: .8rem;
    font-weight: 600;
    color: var(--primary-deep);
    box-shadow: var(--chip-shadow);
}
.vp-lp-mode i { color: var(--gold-deep); }

/* route line */
.vp-lp-route { position: relative; padding-top: calc(var(--lp-node) / 2); }
.vp-lp-route::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: calc(var(--lp-node) / 2);
    left: 16.66%;
    right: 16.66%;
    border-top: var(--lp-line);
}
.vp-lp-route .row { position: relative; z-index: 1; }

/* card */
.vp-lp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--lp-card-pad);
    text-align: center;
    border-radius: var(--rr-radius);
    background:
        linear-gradient(180deg, rgba(var(--c), .12) 0%, rgba(255, 255, 255, 0) 45%),
        #fff;
    border: 1px solid rgba(var(--c), .26);
    box-shadow: var(--ex-card-shadow);
    overflow: visible;
    transition: transform .4s var(--ease-premium), box-shadow .4s ease, border-color .3s ease;
}
.vp-lp-card::before {            /* colour bar along the bottom edge */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    border-radius: 0 0 var(--rr-radius) var(--rr-radius);
    background: linear-gradient(90deg, rgb(var(--c)), rgba(var(--c), .25));
    transform: scaleX(.3);
    transform-origin: center;
    transition: transform .5s var(--ease-premium);
}
.vp-lp-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ex-card-shadow-hover);
    border-color: rgba(var(--c), .55);
}
.vp-lp-card:hover::before { transform: scaleX(1); }

/* waypoint node sitting on the route line */
.vp-lp-node {
    position: absolute;
    top: calc(var(--lp-node) / -2);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: var(--lp-node);
    height: var(--lp-node);
    border-radius: 50%;
    font-size: 1.5rem;
    color: #fff;
    background:
        radial-gradient(40px 30px at 70% 10%, rgba(255, 255, 255, .4), transparent 70%),
        linear-gradient(150deg, rgb(var(--c)), rgba(var(--c), .7));
    border: var(--lp-node-ring) solid var(--ivory);
    box-shadow: 0 18px 28px -14px rgba(var(--c), .95), inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: transform .5s var(--ease-premium);
}
.vp-lp-node::after {             /* pulse ring */
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(var(--c), .5);
    animation: vpLpPulse 2.8s ease-out infinite;
}
.vp-lp-card:nth-child(1) .vp-lp-node::after { animation-delay: 0s; }
.vp-lp-amber .vp-lp-node { color: var(--primary-deep); }
.vp-lp-card:hover .vp-lp-node { transform: translateX(-50%) rotate(-8deg) scale(1.1); }

@keyframes vpLpPulse {
    0%   { transform: scale(.85); opacity: .9; }
    80%, 100% { transform: scale(1.35); opacity: 0; }
}

/* big faded numeral */
.vp-lp-bignum {
    position: absolute;
    top: .7rem;
    right: 1rem;
    font-family: var(--font-display);
    font-size: 3rem;
        font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    line-height: 1;
    letter-spacing: -.03em;
    color: rgba(var(--c), .12);
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
}

.vp-lp-step {
    display: block;
    margin-bottom: .5rem;
    font-size: .68rem;
      font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.vp-lp-card h3 {
    margin: 0 0 .7rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
        font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    line-height: 1.3;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
.vp-lp-card p { margin: 0 0 1.3rem; font-size: .88rem; line-height: 1.7; color: var(--muted); }

/* tag footer */
.vp-lp-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    align-self: center;
    margin-top: auto;
    padding: .45rem 1rem .45rem .5rem;
    border-radius: 999px;
    background: rgba(var(--c), .10);
    border: 1px solid rgba(var(--c), .28);
    font-size: .78rem;
       font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: rgb(var(--c));
    transition: transform .35s var(--ease-premium), background .3s ease;
}
.vp-lp-amber .vp-lp-tag { color: var(--gold-deep); }
.vp-lp-tag i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: .75rem;
    color: #fff;
    background: rgb(var(--c));
}
.vp-lp-amber .vp-lp-tag i { color: var(--primary-deep); }
.vp-lp-card:hover .vp-lp-tag { transform: translateY(-2px); background: rgba(var(--c), .2); }

/* ----- responsive ----- */
@media (max-width: 991px) {
    .vp-lp-route::before { display: none; }          /* no line when cards wrap */
}
@media (max-width: 767px) {
    .vp-lp-route .row { row-gap: 2.6rem !important; }
    .vp-lp-card { --lp-card-pad: 3rem 1.15rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vp-lp-node::after { animation: none; opacity: 0; }
    .vp-lp-card, .vp-lp-card::before, .vp-lp-node, .vp-lp-tag { transition: none; }
}
/* ============================================================
   CTA — light, solid
   ============================================================ */
.vp-cta {
    background: var(--grad-brand);
    border: none;
    border-radius: var(--radius-xl);
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    color: var(--white);
    box-shadow: var(--shadow-glow-sky);
}

.vp-cta::before,
.vp-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.vp-cta::before {
    width: 260px;
    height: 260px;
    top: -100px;
    left: -60px;
}

.vp-cta::after {
    width: 200px;
    height: 200px;
    bottom: -90px;
    right: -40px;
    background: rgba(255, 255, 255, .06);
}

.vp-cta h2 {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    margin-bottom: 14px;
    color: var(--white);
}

.vp-cta p {
    color: rgba(255, 255, 255, .82);
    margin: 0 0 24px;
}

.vp-cta-illustration {
    height: 220px;
}

/* ============================================================
   FOOTER — light, solid
   ============================================================ */
.vp-footer-divider {
    display: block;
    margin-bottom: -2px;
    background: #fff;
}

.vp-footer {
    background: var(--primary-tint);
    color: var(--muted);
    position: relative;
    overflow: hidden;
    padding-top: 0px;
}

.vp-footer::before {
    content: "";
    position: absolute;
    top: 10%;
    left: -10%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--pink-rgb), .08), transparent 70%);
}

.vp-footer::after {
    content: "";
    position: absolute;
    bottom: -10%;
    right: -6%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--sky-rgb), .08), transparent 70%);
}

.vp-footer-logo {
    height: 85px;
    margin-bottom: 14px;
    opacity: .92;
}

.vp-footer h6 {
    color: var(--ink);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: .9rem;
    margin-bottom: 16px;
}

.vp-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vp-footer ul li {
    margin-bottom: 10px;
}

.vp-footer ul li a {
    color: var(--muted);
    text-decoration: none;
    font-size: .85rem;
    transition: color .2s ease;
}

.vp-footer ul li a:hover {
    color: var(--pink-deep);
}

.vp-footer-newsletter {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.vp-footer-newsletter .form-control {
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 999px;
    padding: 12px 18px;
}

.vp-footer-newsletter .form-control::placeholder {
    color: var(--muted);
}

.vp-social {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    margin-right: 8px;
    transition: all .2s ease;
}

.vp-social:hover {
    background: var(--pink-deep);
    border-color: var(--pink-deep);
    color: #fff;
    transform: translateY(-3px);
}

.vp-footer-bottom {
    border-top: 1px solid var(--line);
    margin-top: 32px;
    padding: 18px 0;
    font-size: .78rem;
    color: var(--muted);
}

.vp-footer-bottom a {
    color: var(--muted);
    text-decoration: none;
    margin-left: 20px;
}

.vp-footer-bottom a:hover {
    color: var(--pink-deep);
}

.bg-soft {
    background: var(--paper);
}

.text-sky {
    color: var(--sky);
}

/* 41 — Solid-color scroll progress bar */
#vpScrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--sky);
    z-index: 1100;
    transition: width .12s linear;
}

/* 42 — Entrance / text reveal animations */
[data-reveal="words"] {
    overflow: visible;
}

.reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px) rotate(1deg);
    transition: opacity .6s var(--ease-premium), transform .6s var(--ease-premium);
    will-change: transform, opacity;
}

.reveal-ready .reveal-word {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

@media (prefers-reduced-motion:reduce) {
    .reveal-word {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 43 — Hover effects: buttons get a colored glow, links sweep-underline */
.btn-vp-primary:hover {
    box-shadow: var(--shadow-glow-sky);
}

.btn-vp-outline:hover {
    box-shadow: var(--shadow-glow-sky);
}

.vp-nav .nav-link {
    position: relative;
    overflow: hidden;
}

.vp-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    background: var(--sky);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease-premium);
}

.vp-nav .nav-link:hover::after {
    transform: scaleX(1);
}

.vp-course-card:hover .vp-course-thumb i,
.vp-popular-card:hover .vp-course-thumb i {
    transform: scale(1.15) rotate(-4deg);
    color: rgba(var(--pink-rgb), .55);
}

.vp-course-thumb i {
    transition: transform .35s var(--ease-premium), color .35s ease;
}

.vp-scheme-circle i {
    transition: color .3s ease, transform .3s var(--ease-premium);
}

.vp-scheme-wrap:hover .vp-scheme-circle i {
    color: var(--pink);
    transform: scale(1.1);
}

.vp-social {
    transition: all .3s var(--ease-premium);
}

.vp-social:hover {
    background: var(--pink-deep);
    transform: translateY(-4px) rotate(-6deg);
}

.vp-team-avatar,
.b-icon,
.p-icon {
    transition: transform .35s var(--ease-premium);
}

.vp-team-card:hover .vp-team-avatar {
    transform: scale(1.08) rotate(-3deg);
}

.vp-bundle-card:hover .b-icon {
    transform: scale(1.08) rotate(-3deg);
}

.vp-path-feature:hover .p-icon {
    transform: scale(1.08) rotate(-3deg);
    background: var(--pink);
    color: #fff;
}

/* 44 — Section transitions: fade/rise as sections enter view */
.vp-section-fade {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
}

.vp-section-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion:reduce) {
    .vp-section-fade {
        opacity: 1;
        transform: none;
    }
}
.vp-hero {
    background-position: center, center, center;
    transition: background-position .1s linear;
}

/* Colored selection + focus ring, small premium detail */
::selection {
    background: var(--sky);
    color: #fff;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Base image container */
.vp-course-thumb,
.vp-latest-thumb {
    position: relative;
    overflow: hidden;
    background: var(--sky-tint);
}
/* Placeholder fallback styling */
.vp-thumb-img[src*="placeholder"] {
    opacity: 0.8;
}

/* Overlay gradient for better text readability (optional) */
.vp-course-thumb::after,
.vp-latest-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.02) 100%);
    pointer-events: none;
}

.vp-course-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-tight);
    transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
    height: 100%;
}

.vp-course-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lift);
}

.vp-course-thumb {
    height: 180px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sky-tint);
    overflow: hidden;
}
/* Badges on thumb */
.vp-course-thumb .lvl-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    padding: 5px 14px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.vp-course-thumb .cert-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--amber);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    z-index: 2;
}

.vp-course-body {
    padding: 20px 22px 22px;
}

.vp-course-body h6 {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 0.98rem;
    margin-bottom: 10px;
    min-height: 44px;
    color: var(--ink);
    line-height: 1.4;
}

.vp-course-meta {
    display: flex;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 14px;
}

.vp-course-meta i {
    color: var(--sky);
}

.vp-course-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.vp-price-tag {
    font-family: var(--font-display);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--sky-deep);
    font-size: 1.05rem;
}

.vp-rating {
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    margin-top: 2px;
}

.vp-rating i {
    color: var(--amber);
}

.btn-enroll {
    background: var(--sky-tint);
    color: var(--sky-deep);
    border: none;
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 0.8rem;
    transition: all 0.25s var(--ease-premium);
    cursor: pointer;
}

.btn-enroll:hover {
    background: var(--sky);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-sky);
}


.vp-popular-card .instr .av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 0.74rem;
    flex-shrink: 0;
}

.vp-popular-card .instr .fw-semibold {
    font-size: 0.85rem;
    color: var(--ink);
}

.vp-popular-card .instr small {
    color: var(--muted);
    font-size: 0.74rem;
}

.vp-popular-card .vp-course-foot {
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 0;
}

.vp-latest-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}

.vp-latest-nav {
    display: flex;
    gap: 8px;
}

.vp-latest-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--sky-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s var(--ease-premium);
    cursor: pointer;
}

.vp-latest-nav button:hover {
    background: var(--sky);
    color: #fff;
    border-color: var(--sky);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-sky);
}

.vp-latest-mini {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px;
    height: 100%;
    transition: all 0.3s var(--ease-premium);
    box-shadow: var(--shadow-tight);
}

.vp-latest-mini:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(var(--primary-rgb), 0.18);
}

.vp-latest-thumb {
    border-radius: var(--radius-sm);
    height: 140px;
    overflow: hidden;
    background: var(--sky-tint);
    margin-bottom: 14px;
}

.vp-latest-mini .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vp-latest-mini .cat {
    font-size: 0.66rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pink-deep);
}

.vp-latest-mini .newest-dot {
    background: var(--amber-tint);
    color: #8A6420;
    font-size: 0.62rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    padding: 3px 10px;
    border-radius: 999px;
}

.vp-latest-mini .date {
    font-size: 0.74rem;
    color: var(--muted);
    margin-bottom: 10px;
}

.vp-latest-mini .date i {
    color: var(--sky);
}

.vp-latest-mini h6 {
    font-size: 0.92rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    margin-bottom: 12px;
    line-height: 1.4;
    color: var(--ink);
    min-height: 44px;
}

.vp-latest-mini .mini-link {
    font-size: 0.78rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--sky);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s var(--ease-premium);
}

.vp-latest-mini .mini-link:hover {
    color: var(--sky-deep);
    gap: 10px;
}

/* SWIPER CUSTOMIZATION*/
.swiper {
    padding: 4px 2px 8px;
}

/* Remove Bootstrap row/col gutter specifically around the swiper containers */
#popular .row,
#latest .row {
    --bs-gutter-x: 0;
}

.vpPopularSwiper,
.vpLatestSwiper {
    padding-left: 0;
    margin-left: 0;
    overflow: hidden;
    /* keep this so slides don't visually spill outside container */
}

.vp-popular-card,
.vp-latest-mini {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    /* fill the fixed-height slide */
    min-height: 380px;
}

.vp-popular-card .vp-course-foot {
    margin-top: auto;
}

.vp-latest-mini .mini-link {
    margin-top: auto;
}

/* Lock thumbnail aspect ratio so images don't vary the card height */
.vp-course-thumb,
.vp-latest-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.vpPopularSwiper .swiper-slide,
.vpLatestSwiper .swiper-slide {
    width: 280px;
    /* no !important */
    height: auto;
    display: flex;
}

/* Equal height cards regardless of content length */
.vp-popular-card,
.vp-latest-mini {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 340px;
}

.vp-popular-card .vp-course-foot {
    margin-top: auto;
}

.vp-latest-mini .mini-link {
    margin-top: auto;
}

.vp-popular-card h6,
.vp-latest-mini h6 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.vp-course-thumb,
.vp-latest-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.vp-popular-card .ribbon {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: .6rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.4;
    z-index: 2;
}

.vp-popular-card {
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

.vp-popular-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

.vp-popular-card .vp-course-thumb {
    border-radius: 10px;
    margin-bottom: 10px;
}

.vp-popular-card .ribbon {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    padding: 1px 5px;
    border-radius: 20px;
    z-index: 2;
}

/* LATEST: flat editorial/list feel — no border box, left accent bar, no price */
.vp-latest-mini {
    padding: 0 0 12px 14px;
    border-left: 3px solid var(--primary);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.vp-latest-mini .vp-latest-thumb {
    border-radius: 6px;
    margin-bottom: 10px;
    filter: grayscale(15%);
    /* subtle tonal difference from Popular's full-color thumbs */
}

.vp-latest-mini:hover .vp-latest-thumb {
    filter: grayscale(0%);
}

.vp-latest-mini .top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.vp-latest-mini .cat {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primary);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
}

.vp-latest-mini .date {
    font-size: .75rem;
    color: var(--muted);
    margin-bottom: 6px;
}

.vp-latest-mini .mini-link {
    font-size: .85rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--ink);
    text-decoration: none;
}

.vp-latest-mini .mini-link:hover {
    color: var(--primary);
}

@media (max-width: 992px) {
    .vp-course-thumb {
        height: 160px;
    }

    .vp-popular-card .vp-course-thumb {
        height: 120px;
    }

    .vp-latest-thumb {
        height: 120px;
    }
}

@media (max-width: 768px) {
    .vp-course-thumb {
        height: 140px;
    }

    .vp-course-body {
        padding: 16px 18px 18px;
    }

    .vp-course-body h6 {
        font-size: 0.9rem;
        min-height: 36px;
    }

    .vp-popular-card {
        padding: 16px;
    }

    .vp-popular-card .vp-course-thumb {
        height: 100px;
    }

    .vp-popular-card h6 {
        font-size: 0.85rem;
        min-height: 36px;
    }

    .vp-latest-thumb {
        height: 100px;
    }

    .vp-latest-mini h6 {
        font-size: 0.85rem;
        min-height: 36px;
    }

    .vp-latest-mini {
        padding: 14px;
    }
}

@media (max-width: 576px) {
    .vp-course-thumb {
        height: 120px;
    }

    .vp-course-body h6 {
        font-size: 0.85rem;
        min-height: 32px;
    }

    .vp-popular-card .vp-course-thumb {
        height: 80px;
    }

    .vp-popular-card h6 {
        font-size: 0.8rem;
        min-height: 32px;
    }

    .vp-latest-thumb {
        height: 80px;
    }

    .vp-latest-mini h6 {
        font-size: 0.8rem;
        min-height: 32px;
    }
}

/* ============================================================
   REAL RESULTS SECTION - Premium Design
   ============================================================ */
#real-results {
    background: var(--paper);
    position: relative;
    overflow: hidden;
}

/* Subtle background decoration using new color palette */
#real-results::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.03) 0%, transparent 70%);
    pointer-events: none;
}

#real-results::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.02) 0%, transparent 70%);
    pointer-events: none;
}

/* ============================================================
   REAL RESULTS (features + academy)
   ============================================================ */
.vp-rr {
    position: relative;
    overflow: hidden;
    background: var(--rr-bg);
}
.vp-rr::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 360px at 94% 6%, rgba(var(--amber-rgb), .20), transparent 70%),
        radial-gradient(520px 360px at 4% 40%, rgba(var(--soft-accent-rgb), .18), transparent 70%),
        radial-gradient(520px 360px at 60% 100%, rgba(var(--sup-blue-rgb), .16), transparent 70%);
    pointer-events: none;
}
.vp-rr::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--primary-deep-rgb), .08) 1px, transparent 1.3px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 20%, transparent 75%);
    pointer-events: none;
}
.vp-rr .container { position: relative; z-index: 2; }

/* ----- heading ----- */
.vp-rr-head { text-align: center; max-width: 780px; margin: 0 auto 2.75rem; }
.vp-rr-title {
    margin: 0 0 .7rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.015em;
    color: var(--primary-deep);
    -webkit-font-smoothing: antialiased;
}
.vp-rr-title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--soft-accent), var(--sup-blue) 55%, var(--amber));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vp-rr-sub { margin: 0 auto;font-size: .98rem; line-height: 1.65; color: var(--muted); }

/* ----- feature cards ----- */
.vp-rr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--rr-radius);
    background: var(--rr-card-bg);
    border: 1px solid rgba(var(--c), .24);
    box-shadow: var(--ex-card-shadow);
    transition: transform .4s var(--ease-premium), box-shadow .4s ease, border-color .3s ease;
}
.vp-rr-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--ex-card-shadow-hover);
    border-color: rgba(var(--c), .55);
}

/* coloured header with ring graphic */
.vp-rr-top {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: var(--rr-head-h);
    padding: 1.3rem 1.4rem;
    color: #fff;
    background:
        radial-gradient(180px 120px at 100% 0%, rgba(255, 255, 255, .38), transparent 70%),
        linear-gradient(150deg, rgb(var(--c)) 0%, rgba(var(--c), .70) 100%);
}
.vp-rr-top::before,
.vp-rr-top::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 16px solid rgba(255, 255, 255, .14);
    pointer-events: none;
    transition: transform .8s var(--ease-premium);
}
.vp-rr-top::before { right: -34px; bottom: -48px; width: 150px; height: 150px; }
.vp-rr-top::after  { left: 38%; bottom: -70px; width: 110px; height: 110px; border-width: 10px; border-color: rgba(255, 255, 255, .09); }
.vp-rr-card:hover .vp-rr-top::before { transform: rotate(40deg) scale(1.12); }
.vp-rr-card:hover .vp-rr-top::after  { transform: scale(1.25); }
.vp-rr-amber .vp-rr-top { color: var(--primary-deep); }

.vp-rr-ic {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    font-size: 1.7rem;
    color: #fff;
    background: rgba(255, 255, 255, .20);
    border: 1px solid rgba(255, 255, 255, .45);
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
    transition: transform .5s var(--ease-premium);
}
.vp-rr-amber .vp-rr-ic { color: var(--primary-deep); }
.vp-rr-card:hover .vp-rr-ic { transform: rotate(-8deg) scale(1.1); }

.vp-rr-num {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 3.1rem;
       font-weight: 500;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        text-shadow: none;
        filter: none;
    line-height: .9;
    letter-spacing: -.03em;
    color: rgba(255, 255, 255, .55);
    -webkit-font-smoothing: antialiased;
}
.vp-rr-amber .vp-rr-num { color: rgba(var(--primary-deep-rgb), .4); }

.vp-rr-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.vp-rr-body h4 {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
       font-weight: 500;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    filter: none;
    line-height: 1.3;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
.vp-rr-body p { margin: 0 0 1.2rem; font-size: .9rem; line-height: 1.7; color: var(--muted); }

.vp-rr-stat {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-start;
    margin-top: auto;
    padding: .45rem .95rem .45rem .5rem;
    border-radius: 999px;
    background: rgba(var(--c), .10);
    border: 1px solid rgba(var(--c), .28);
    font-size: .78rem;
    font-weight: 600;
    color: rgb(var(--c));
    transition: background .3s ease, color .3s ease, transform .35s var(--ease-premium);
}
.vp-rr-amber .vp-rr-stat { color: var(--gold-deep); }
.vp-rr-stat i {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .72rem;
    color: #fff;
    background: rgb(var(--c));
}
.vp-rr-amber .vp-rr-stat i { color: var(--primary-deep); }
.vp-rr-card:hover .vp-rr-stat { transform: translateY(-2px); background: rgba(var(--c), .18); }

/* ----- academy band ----- */
.vp-rr-academy {
    position: relative;
    overflow: hidden;
    margin-top: 2.75rem;
    padding: clamp(1.75rem, 3.5vw, 3rem);
    border-radius: 26px;
    background: var(--rr-dark-bg);
    color: #fff;
    box-shadow: 0 34px 56px -28px rgba(var(--primary-deep-rgb), .85), inset 0 1px 0 rgba(var(--gold-rgb), .5);
}
.vp-rr-academy::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 80% 20%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 100% at 80% 20%, #000 10%, transparent 75%);
    pointer-events: none;
}
.vp-rr-academy::after {          /* big decorative ring */
    content: '';
    position: absolute;
    left: -110px;
    bottom: -140px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 36px solid rgba(255, 255, 255, .05);
    box-shadow: 0 0 0 36px rgba(255, 255, 255, .03);
    pointer-events: none;
}
.vp-rr-ac-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: center;
}

.vp-rr-ac-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 1rem;
    border-radius: 20px;
    font-size: 1.9rem;
    color: var(--primary-deep);
    background: var(--grad-gold-rich);
    box-shadow: 0 18px 28px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .5);
    transform: rotate(-6deg);
}
.vp-rr-ac-copy h3 {
    margin: 0 0 .2rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}
.vp-rr-ac-copy h5 {
    margin: 0 0 .9rem;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #E7CF9C;
}
.vp-rr-ac-copy p { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.75; color: rgba(255, 255, 255, .82); }

.vp-rr-modes { display: flex; flex-wrap: wrap; gap: .6rem; }
.vp-rr-mode {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: var(--rr-glass);
    border: 1px solid var(--rr-glass-border);
    backdrop-filter: blur(6px);
    font-size: .8rem;
    font-weight: 500;
    color: #fff;
}
.vp-rr-mode i { color: #E7CF9C; }

/* domain tiles */
.vp-rr-dom-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #E7CF9C;
}
.vp-rr-dom-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(231, 207, 156, .6), transparent); }

.vp-rr-doms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.vp-rr-dom {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem .9rem;
    border-radius: 16px;
    background: var(--rr-glass);
    border: 1px solid var(--rr-glass-border);
    backdrop-filter: blur(6px);
    font-size: .88rem;
    font-weight: 500;
    color: #fff;
    cursor: default;
    transition: transform .35s var(--ease-premium), background .3s ease, border-color .3s ease, box-shadow .35s ease, color .25s ease;
}
.vp-rr-dom::after {              /* shine sweep */
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -70%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    transition: left .7s var(--ease-premium);
    pointer-events: none;
}
.vp-rr-dom-ic {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(145deg, rgb(var(--c)), rgba(var(--c), .65));
    box-shadow: 0 10px 18px -10px rgba(var(--c), .9), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .45s var(--ease-premium), background .3s ease, color .3s ease;
}
.vp-rr-dom:hover {
    transform: translateY(-4px);
    background: linear-gradient(145deg, rgba(var(--c), .85), rgba(var(--c), .55));
    border-color: rgba(255, 255, 255, .5);
    box-shadow: 0 20px 30px -16px rgba(0, 0, 0, .6);
}
.vp-rr-dom:hover::after { left: 130%; }
.vp-rr-dom:hover .vp-rr-dom-ic { transform: rotate(-10deg) scale(1.1); background: #fff; color: rgb(var(--c)); }

/* ----- responsive ----- */
@media (max-width: 991px) {
    .vp-rr-ac-grid { grid-template-columns: 1fr; }
    :root { --rr-head-h: 130px; }
}
@media (max-width: 576px) {
    .vp-rr-head { margin-bottom: 2rem; }
    .vp-rr-doms { gap: .55rem; }
    .vp-rr-dom { padding: .65rem .7rem; font-size: .78rem; gap: .6rem; }
    .vp-rr-dom-ic { width: 32px; height: 32px; font-size: .9rem; }
    .vp-rr-num { font-size: 2.5rem; }
    .vp-rr-body { padding: 1.1rem 1.1rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vp-rr-card, .vp-rr-ic, .vp-rr-top::before, .vp-rr-top::after,
    .vp-rr-stat, .vp-rr-dom, .vp-rr-dom::after, .vp-rr-dom-ic { transition: none; }
}
@media (max-width: 768px) {
    .section-pad {
        padding: var(--spacing-xl) 0;
    }
}

.vp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.vp-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.vp-eyebrow.on-dark {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}


.section-sub {
    color: var(--muted);
    font-size: var(--text-base);
    max-width: 900px;
    line-height: 1.65;
}

.section-head-wrap {
    margin-bottom: var(--spacing-xl);
}

.bg-soft {
    background: var(--section-soft);
}

.bg-white {
    background: var(--white);
}

.vp-about-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 0 80px;
    background: var(--paper);
}

.vp-about-hero::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.06);
}

.vp-about-hero::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: -70px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(var(--amber-rgb), 0.08);
}

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

.vp-about-hero h1 {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: clamp(2rem, 3.8vw, 2.85rem);
    color: var(--ink);
    line-height: 1.15;
    margin: 6px 0 16px;
    max-width: 800px;
}

.vp-about-hero .vp-since {
    color: var(--primary);
}

.vp-about-hero p.lead {
    color: var(--muted);
    font-size: var(--text-md);
    max-width: 660px;
    line-height: 1.75;
}

.vp-stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-top: 46px;
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--line);
}

.vp-stat-strip .stat h3 {
    font-size: var(--text-3xl);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--primary);
    margin-bottom: 3px;
}

.vp-stat-strip .stat span {
    font-size: var(--text-sm);
    color: var(--muted);
    display: block;
}

@media (max-width: 767px) {
    .vp-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vp-story-block {
    padding: var(--spacing-2xl) 0;
}

.vp-story-copy p {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 17px;
    font-size: var(--text-base);
}

.vp-mission-card {
    background: var(--primary);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 38px 34px;
    position: relative;
    overflow: hidden;
}

.vp-mission-card::after {
    content: "";
    position: absolute;
    bottom: -55px;
    left: -55px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.vp-mission-card .label {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 13px;
    display: block;
}

.vp-mission-card p {
    font-size: var(--text-lg);
    line-height: 1.65;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin: 0;
}

.vp-focus-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) 22px;
    height: 100%;
    transition: transform var(--transition-medium) var(--ease-premium),
        box-shadow var(--transition-medium) ease,
        border-color var(--transition-medium) ease;
}

.vp-focus-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(var(--primary-rgb), 0.18);
}

.vp-focus-card .icon-badge {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: var(--text-xl);
    color: var(--white);
    transition: transform var(--transition-medium) var(--ease-premium);
}

.vp-focus-card:hover .icon-badge {
    transform: scale(1.07) rotate(-2deg);
}

.vp-focus-card h6 {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--ink);
    margin-bottom: 7px;
    font-size: var(--text-base);
}

.vp-focus-card p {
    font-size: var(--text-sm);
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* Badge colors */
.badge-primary {
    background: var(--primary);
}

.badge-sky {
    background: var(--sky);
}

.badge-pink {
    background: var(--pink-deep);
}

.badge-amber {
    background: var(--amber);
}

.badge-green {
    background: var(--green);
}

.vp-principle-row {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--line);
}

.vp-principle-row:last-child {
    border-bottom: none;
}

.vp-principle-row .idx {
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: var(--text-sm);
    color: var(--primary);
    background: var(--primary-tint);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vp-principle-row h6 {
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--ink);
    margin-bottom: 4px;
}

.vp-principle-row p {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}

.vp-motto-banner {
    background: var(--primary);
    border-radius: var(--radius-xl);
    padding: 54px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vp-motto-banner::before,
.vp-motto-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
}

.vp-motto-banner::before {
    top: -85px;
    right: -65px;
    width: 210px;
    height: 210px;
}

.vp-motto-banner::after {
    bottom: -85px;
    left: -65px;
    width: 190px;
    height: 190px;
}

.vp-motto-banner .tag {
    color: var(--amber);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    margin-bottom: 12px;
    display: block;
    position: relative;
    z-index: 1;
}

.vp-motto-banner h2 {
    color: var(--white);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: clamp(1.45rem, 2.9vw, 2.15rem);
    max-width: 700px;
    margin: 0 auto 26px;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}

.vp-motto-banner .btn-cta {
    background: var(--lavender);
    color: var(--primary);
    padding: 13px 30px;
    border-radius: 999px;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: var(--text-base);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: all var(--transition-medium) var(--ease-premium);
}

.vp-motto-banner .btn-cta:hover {
    transform: translateY(-3px);
    background: var(--white);
}

@media (max-width: 992px) {
    .section-heading {
        font-size: clamp(1.5rem, 2.5vw, 2rem);
    }

    .vp-about-hero {
        padding: 110px 0 60px;
    }

    .vp-about-hero h1 {
        font-size: clamp(1.8rem, 3vw, 2.4rem);
    }

    .vp-stat-strip .stat h3 {
        font-size: var(--text-2xl);
    }

    .vp-motto-banner {
        padding: 40px 28px;
    }
}

@media (max-width: 768px) {
    .section-heading {
        font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    }

    .section-sub {
        font-size: var(--text-base);
    }

    .vp-about-hero {
        padding: 90px 0 48px;
    }

    .vp-about-hero h1 {
        font-size: clamp(1.6rem, 2.8vw, 2rem);
    }

    .vp-about-hero p.lead {
        font-size: var(--text-base);
    }

    .vp-stat-strip {
        gap: var(--spacing-md);
    }

    .vp-stat-strip .stat h3 {
        font-size: var(--text-xl);
    }

    .vp-mission-card p {
        font-size: var(--text-md);
    }

    .vp-focus-card {
        padding: var(--spacing-md) 18px;
    }

    .vp-motto-banner h2 {
        font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    }
}

@media (max-width: 576px) {
    .section-pad {
        padding: var(--spacing-xl) 0;
    }

    .vp-about-hero {
        padding: 76px 0 40px;
    }

    .vp-stat-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        margin-top: 30px;
        padding-top: 20px;
    }

    .vp-stat-strip .stat h3 {
        font-size: var(--text-lg);
    }

    .vp-stat-strip .stat span {
        font-size: var(--text-xs);
    }

    .vp-mission-card {
        padding: 28px 24px;
    }

    .vp-mission-card p {
        font-size: var(--text-base);
    }

    .vp-motto-banner {
        padding: 32px 20px;
    }

    .vp-motto-banner h2 {
        font-size: clamp(1rem, 2vw, 1.3rem);
    }
}

/* Block Title */
.vp-story-block-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.vp-story-block-number {
    font-family: var(--font-display);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.2rem;
    color: var(--primary);
    background: var(--primary-tint);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
}

.vp-story-block-title h3 {
    font-family: var(--font-display);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.2rem;
    color: var(--ink);
    margin: 0;
}

/* Story Text */
.vp-story-text {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: var(--text-base);
    margin: 0;
    padding-left: 56px;
}

/* Story Tags */
.vp-story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding-left: 56px;
}

.vp-story-tag {
    padding: 5px 14px;
    background: var(--primary-tint);
    color: var(--primary);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    border: 1px solid rgba(var(--primary-rgb), 0.06);
    transition: all var(--transition-fast) var(--ease-premium);
}

.vp-story-tag:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

/* Story Stats Grid */
.vp-story-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    align-items: center;
}

.vp-story-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vp-story-stat-number {
    font-family: var(--font-display);
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.6rem;
    color: var(--primary);
    letter-spacing: -0.02em;
}

.vp-story-stat-label {
    font-size: var(--text-sm);
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
}

.vp-story-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--line);
}

/* Border top utility */
.border-top {
    border-top: 1px solid var(--line) !important;
}

.pt-4 {
    padding-top: var(--spacing-lg) !important;
}

.mt-3 {
    margin-top: var(--spacing-md) !important;
}

.mt-4 {
    margin-top: var(--spacing-lg) !important;
}

.mt-5 {
    margin-top: var(--spacing-xl) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .vp-story-block-title h3 {
        font-size: 1rem;
    }

    .vp-story-block-number {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .vp-story-text {
        padding-left: 0;
        font-size: var(--text-base);
    }

    .vp-story-tags {
        padding-left: 0;
    }

    .vp-story-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .vp-story-stat-divider {
        display: none;
    }

    .vp-story-stat-number {
        font-size: 1.3rem;
    }
}

@media (max-width: 576px) {
    .vp-story-block-title {
        gap: var(--spacing-sm);
    }

    .vp-story-block-title h3 {
        font-size: 0.9rem;
    }

    .vp-story-block-number {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .vp-story-text {
        font-size: var(--text-sm);
    }

    .vp-story-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .vp-story-stat-number {
        font-size: 1.1rem;
    }

    .vp-story-stat-label {
        font-size: var(--text-xs);
    }

    .vp-story-tag {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
}

/* experts styles */
.experts-page {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
}

.experts-page h1,
.experts-page h2,
.experts-page h3,
.experts-page h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.experts-page .container-xl {
    max-width: 1280px;
}

/* ── Shared bits reused from the site language ── */
.experts-page .vp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.experts-page .vp-eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

.experts-page .section-heading {
    font-size: clamp(1.75rem, 2.8vw, 2.35rem);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--ink);
    margin-bottom: 14px;
}

.experts-page .section-sub {
    color: var(--muted);
    font-size: var(--text-base);
    max-width: 640px;
}

/* ============================================================
   HERO
   ============================================================ */
.experts-hero {
    position: relative;
    overflow: hidden;
    padding: 130px 0 70px;
    text-align: center;
}

.experts-hero::before {
    content: "";
    position: absolute;
    top: -140px;
    left: 50%;
    transform: translateX(-56%);
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.06);
}

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

.experts-hero h1 {
    font-size: clamp(2rem, 3.8vw, 2.85rem);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    margin-bottom: 16px;
    color: var(--ink);
}

.experts-hero p.lead {
    color: var(--muted);
    font-size: var(--text-md);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ── Quick branch navigation ── */
.branch-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
    position: sticky;
    top: 14px;
    z-index: 20;
}

.branch-nav button {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-medium) var(--ease-premium);
}

.branch-nav button .count {
    color: var(--muted);
    font-weight: 500;
}

.branch-nav button:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-2px);
}

.branch-nav button.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.branch-nav button.is-active .count {
    color: rgba(255, 255, 255, 0.7);
}

.experts-page {
    --card-blob-1: var(--primary);
    --card-blob-2: var(--primary-deep);
    --card-blob-3: var(--sup-blue);
    --card-blob-4: var(--amber);
}

.branch-group {
    margin-bottom: 96px;
}

.branch-group:last-child {
    margin-bottom: 0;
}

.branch-label-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.branch-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--white);
    box-shadow: var(--shadow-tight);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.branch-label .swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.branch-label .n {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-left: 4px;
}

.branch-label.tone-sky .swatch {
    background: var(--card-blob-1);
}

.branch-label.tone-deep .swatch {
    background: var(--card-blob-2);
}

.branch-label.tone-pink .swatch {
    background: var(--card-blob-3);
}

.branch-label.tone-amber .swatch {
    background: var(--card-blob-4);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
    gap: 56px 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.team-card {
    position: relative;
    isolation: isolate;
    padding-top: 110px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.team-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.team-card__avatar {
    position: absolute;
    top: 0;
    left: 20px;
    width: 180px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-tight);
    z-index: 2;
}

.team-card__avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.team-card__avatar-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.team-card.tone-sky .team-card__avatar-placeholder {
    color: var(--card-blob-1);
}

.team-card.tone-deep .team-card__avatar-placeholder {
    color: var(--card-blob-2);
}

.team-card.tone-pink .team-card__avatar-placeholder {
    color: var(--card-blob-3);
}

.team-card.tone-amber .team-card__avatar-placeholder {
    color: var(--card-blob-4);
}

.team-card__stage {
    position: relative;
}

.team-card__blob {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: -1;
    transform: rotate(6deg);
    transform-origin: center;
}

.team-card.tone-sky .team-card__blob {
    background: var(--card-blob-1);
}

.team-card.tone-deep .team-card__blob {
    background: var(--card-blob-2);
}

.team-card.tone-pink .team-card__blob {
    background: var(--card-blob-3);
}

.team-card.tone-amber .team-card__blob {
    background: var(--card-blob-4);
}

.team-card__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: var(--shadow-lift);
    overflow: hidden;
    padding-top: 150px;
}

.team-card__toggle {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 0 20px 24px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    appearance: none;
}

.team-card__toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.team-card__heading {
    flex: 1;
    min-width: 0;
}

.team-card__name {
    margin: 0 0 3px;
    font-size: 1rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.team-card__position {
    display: block;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--muted);
}

/* Credentials preview shown on the collapsed card (up to 500
       characters), right under the name and position. */
.team-card__preview-credentials {
    display: block;
    margin-top: 8px;
    font-size: 0.74rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    line-height: 1.6;
    color: var(--muted);
}

.team-card__chevron {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--section-soft);
    position: relative;
    transition: transform 0.25s ease, background 0.25s ease;
}

.team-card__chevron::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-2px) rotate(45deg);
}

.team-card__toggle[aria-expanded="true"] .team-card__chevron {
    transform: rotate(180deg);
    background: var(--lavender);
}

.team-card__bio {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Collapsed by default — aria-expanded starts false on every card,
       the JS only needs to handle the expand/collapse interaction. */
.team-card__toggle[aria-expanded="true"]+.team-card__bio {
    max-height: none;
}

.team-card__bio-inner {
    padding: 0 20px 26px;
    border-top: 1px solid var(--border-light);
}

.team-card__credentials {
    margin: 16px 0 12px;
    font-size: 0.75rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    line-height: 1.6;
    color: var(--muted);
}

.team-card__bio-p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.team-card__bio-p:last-child {
    margin-bottom: 0;
}

@media (max-width: 560px) {
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        gap: 44px;
    }
}

.reveal-word{
    opacity:0;
    transform:translateY(8px);
    display:inline-block;
}

.vp-card,
.vp-feature-card,
.vp-course-card{
    transition:transform .25s ease, box-shadow .25s ease;
}

.vp-card:hover,
.vp-feature-card:hover,
.vp-course-card:hover{
    transform:translateY(-4px);
}

/* ===== Header ===== */
#trainings-list .vp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--primary);
}

/* the dot becomes a fine accent line */
#trainings-list .vp-eyebrow .dot {
    width: 32px;
    height: 1px;
    border-radius: 0;
    background: var(--accent);
    display: inline-block;
}

#trainings-list .section-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: .85rem 0 .9rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#trainings-list .section-sub {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--muted);
    max-width: 52ch;
    margin: 0;
}

/* ===== Filter bar ===== */
.vp-filters-wrap {
    margin: 2.25rem 0 2.5rem;
}

.vp-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem;
    background: var(--white);
    border: 1px solid #c8d6d1;
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 6px 16px -6px rgba(16, 24, 40, .08),
        0 24px 48px -28px rgba(16, 24, 40, .18),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    position: relative;
}

/* accent line on top of the bar */
.vp-filterbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .7;
}

.vp-filterbar-group {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}

.vp-filterbar-sort {
    flex: 0 0 auto;
    position: relative;
}

/* separator before sort group */
.vp-filterbar-sort::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: #cddbd6;
}

/* ----- Field ----- */
.vp-filter-field {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: .8rem 1.4rem;
    border-radius: 12px;
    transition: background .3s ease, box-shadow .3s ease;
}

/* hairline divider between fields */
.vp-filter-field + .vp-filter-field::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: #cddbd6;
    box-shadow: 0 0 0 .5px rgba(255, 255, 255, .6);
}

.vp-filter-field:hover {
    background: rgba(var(--primary-rgb), .04);
}

.vp-filter-field:focus-within {
    background: rgba(var(--primary-rgb), .05);
    box-shadow: inset 0 0 0 1.5px rgba(var(--primary-rgb), .3);
}

.vp-filter-field:focus-within::before,
.vp-filter-field:focus-within + .vp-filter-field::before {
    opacity: 0;
}

.vp-filter-label {
    display: block;
    margin: 0 0 .2rem;
    font-family: var(--font-body);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
}

/* ----- Select ----- */
.vp-filter-select {
    position: relative;
}

.vp-filter-select select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: .1rem 1.6rem .1rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: .97rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-overflow: ellipsis;
}

.vp-filter-chevron {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: .72rem;
    color: var(--muted);
    pointer-events: none;
    transition: transform .3s var(--ease-premium), color .3s ease;
}

.vp-filter-field:hover .vp-filter-chevron,
.vp-filter-field:focus-within .vp-filter-chevron {
    color: var(--primary);
}

.vp-filter-field:focus-within .vp-filter-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* ----- Clear ----- */
.vp-filter-clear {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 .5rem 0 .25rem;
    padding: .65rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.vp-filter-clear i {
    font-size: .85rem;
    transition: transform .5s var(--ease-premium);
}

.vp-filter-clear:hover,
.vp-filter-clear:focus-visible {
    color: var(--primary-deep);
    background: var(--paper);
    border-color: var(--line);
}

.vp-filter-clear:hover i {
    transform: rotate(-180deg);
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .vp-filter-field {
        padding: .75rem 1rem;
    }
}

@media (max-width: 767px) {
    .vp-filterbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .vp-filterbar::before {
        left: 1rem;
        right: 1rem;
    }

    .vp-filterbar-group {
        flex-direction: column;
    }

    .vp-filter-field {
        padding: .85rem 1.1rem;
    }

    /* vertical dividers become horizontal */
    .vp-filter-field + .vp-filter-field::before {
        left: 1.1rem;
        right: 1.1rem;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    /* remove the sort separator on mobile, keep border-top instead */
    .vp-filterbar-sort::before {
        display: none;
    }

    .vp-filterbar-sort {
        border-top: 1px solid #cddbd6;
        margin-top: .35rem;
        padding-top: .35rem;
    }

    .vp-filter-clear {
        justify-content: center;
        width: 100%;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-filter-field,
    .vp-filter-chevron,
    .vp-filter-clear,
    .vp-filter-clear i {
        transition: none;
    }
}

        .vpb-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 3rem 1rem;
            color: var(--muted);
            font-family: var(--vpb-font-body);
        }

        .vpb-empty i {
            font-size: 2rem;
            display: block;
            margin-bottom: .75rem;
        }

/* ============================================================
   TOPBAR
   ============================================================ */
:root {
    --tb-h: 40px;
    --tb-radius: 10px;
}

.vp-topbar {
    background: var(--grad-brand);
    position: relative;
    z-index: 1002;
    padding: 10px 0;
}

/* subtle bottom hairline so it reads as a distinct strip above the navbar */
.vp-topbar::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: rgba(255,255,255,.12);
}

.vp-topbar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.vp-topbar-spacer { flex: 1 1 auto; min-width: 0; }

/* ---------- LEFT: contact + socials ---------- */
.vp-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.vp-topbar-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 500;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
    transition: color var(--transition-fast) ease;
}
.vp-topbar-contact i { font-size: .95rem; color: rgba(255,255,255,.7); }
.vp-topbar-contact:hover { color: var(--white); }

.vp-topbar-social {
    display: flex;
    align-items: center;
    gap: 4px;
}
.vp-topbar-social a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.75);
    font-size: .82rem;
    transition: color var(--transition-fast) ease, background var(--transition-fast) ease;
}
.vp-topbar-social a:hover { color: var(--white); background: rgba(255,255,255,.14); }

/* ---------- RIGHT CLUSTER ---------- */
.vp-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Language / currency selects */
.vp-topbar-select {
    height: var(--tb-h);
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.85);
}
.vp-topbar-select i { font-size: .88rem; color: rgba(255,255,255,.65); }
.vp-topbar-select select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
    color: var(--white);
    padding-right: 15px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FFFFFF' stroke-width='1.4' fill='none' opacity='.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}
.vp-topbar-select select option { color: var(--ink); }

/* Accreditations / Verify — white pill links, matches the reference screenshot */
.vp-topbar-pill {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    background: var(--white);
    color: var(--primary-deep);
    border-radius: var(--tb-radius);
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    white-space: nowrap;
    transition: background var(--transition-fast) ease, transform var(--transition-fast) ease;
}
.vp-topbar-pill i { font-size: .85rem; }
.vp-topbar-pill:hover {
    background: var(--amber-tint);
    color: var(--primary-deep);
    transform: translateY(-1px);
}

/* Location flag */
.vp-topbar-flag {
    height: var(--tb-h);
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--tb-radius);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
}
.vp-topbar-flag i { color: var(--amber); font-size: .8rem; }

.vp-topbar-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.2);
}

/* Login / Sign up */
.vp-topbar-btn {
    height: var(--tb-h);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    border-radius: var(--tb-radius);
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    white-space: nowrap;
    transition: all var(--transition-fast) ease;
}
.vp-topbar-btn.-ghost {
    background: transparent;
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.28);
}
.vp-topbar-btn.-ghost:hover {
    border-color: rgba(255,255,255,.6);
    color: var(--white);
}
.vp-topbar-btn.-primary {
    background: var(--amber);
    color: var(--ink);
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    border: 1px solid transparent;
}
.vp-topbar-btn.-primary i { transition: transform .2s ease; }
.vp-topbar-btn.-primary:hover {
    background: #A47F3F;
    transform: translateY(-1px);
}
.vp-topbar-btn.-primary:hover i { transform: translateX(2px); }

/* Overflow trigger + panel (mobile) */
.vp-topbar-more {
    width: var(--tb-h);
    height: var(--tb-h);
    border-radius: var(--tb-radius);
    border: 1px solid rgba(255,255,255,.22);
    background: transparent;
    color: rgba(255,255,255,.85);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    transition: all var(--transition-fast) ease;
}
.vp-topbar-more:hover,
.vp-topbar-more[aria-expanded="true"] {
    border-color: var(--white);
    background: rgba(255,255,255,.14);
    color: var(--white);
}

.vp-topbar-more-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium) var(--ease-premium);
}
.vp-topbar-more-panel.is-open { max-height: 320px; }

.vp-topbar-more-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0 4px;
    border-top: 1px solid rgba(255,255,255,.14);
    margin-top: 10px;
}
.vp-topbar-more-grid .vp-topbar-select,
.vp-topbar-more-grid .vp-topbar-pill,
.vp-topbar-more-grid .vp-topbar-flag {
    display: inline-flex;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    padding: 0 12px;
}
.vp-topbar-more-grid .vp-topbar-pill { background: var(--white); border: none; }
.vp-topbar-more-grid .vp-topbar-select select { color: var(--white); }

.vp-topbar-segment-stacked {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
@media (max-width: 1199px) {
    .vp-topbar-more { display: flex; }
}

@media (max-width: 767px) {
    .vp-topbar-search { width: auto; flex: 1 1 auto; }
    .vp-topbar-contact span.label { display: none; }
}

@media (max-width: 575px) {
    .vp-topbar-inner { gap: 10px; }
    .vp-topbar-btn.-primary { padding: 0 12px; font-size: .76rem; }
}
  /* VP Tag  */
.vp-tag {
    --tag-from: #5232e6;
    --tag-to: #6b4bf0;
    --tag-glow: rgba(82, 50, 230, .45);
    --tag-fg: #fff;

    display: inline-flex;
    align-items: center;
    gap: .42rem;
    max-width: calc(100% - 1.5rem);
    padding: .36rem .72rem .36rem .58rem;
    font-size: .68rem;
    font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tag-fg);
    background: linear-gradient(135deg, var(--tag-from), var(--tag-to));
    border-radius: 999px;
    box-shadow:
        0 6px 14px -6px var(--tag-glow),
        inset 0 0 0 1px rgba(255, 255, 255, .2);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* leading dot */
.vp-tag::before {
    content: "";
    flex: none;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 .18rem rgba(255, 255, 255, .22);
}

.vp-tag__text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* tones — tag1 = purple, tag2 = green */
.vp-tag--purple {
    --tag-from: #5232e6;
    --tag-to: #6b4bf0;
    --tag-glow: rgba(82, 50, 230, .45);
}

.vp-tag--green {
    --tag-from: #087a43;
    --tag-to: #0e8f52;
    --tag-glow: rgba(8, 122, 67, .45);
}

/* pinned to the top-left corner of a card thumbnail */
.vp-tag--float {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
}

.vp-lat-thumb,
.vp-pop-thumb,
.vp-acc-thumb {
    position: relative;
}

/* subtle lift when the whole card is hovered */
.vp-latest-mini:hover .vp-tag,
.vp-popular-card:hover .vp-tag,
.vp-acc-card:hover .vp-tag {
    transform: translateY(-1px);
}

.vp-tag {
    transition: transform .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .vp-tag {
        transition: none;
    }
}
.vp-search-results { max-height: 60vh; overflow-y: auto; margin-top: 1rem; }
.vp-search-group + .vp-search-group { margin-top: 1rem; }
.vp-search-group-title {
    font-size: .72rem; font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .35rem; display: flex; align-items: center; gap: 6px;
}
.vp-search-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    color: var(--ink); text-decoration: none; font-size: .95rem;
}
.vp-search-item i { color: var(--muted); }
.vp-search-item:hover, .vp-search-item.is-focused { background: var(--card-hover-bg, #f3f6f5); color: var(--ink); }
.vp-search-status { padding: 14px 4px; color: var(--muted); font-size: .9rem; }
.vp-search-all { display: inline-block; margin-top: .75rem; font-size: .85rem; font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none; }


/* ////pagination */
.vph-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.vph-pagination a,
.vph-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    color: var(--ink, #222);
    background: var(--white, #fff);
    border: 1px solid var(--line, #e5e5e5);
    transition: all .2s ease;
}
.vph-pagination a:hover {
    background: var(--primary, #0d6efd);
    color: #fff;
    border-color: var(--primary, #0d6efd);
}
.vph-pagination a.active {
    background: var(--primary, #0d6efd);
    color: #fff;
    border-color: var(--primary, #0d6efd);
}
.vph-pagination span.is-disabled {
    opacity: .4;
    pointer-events: none;
    cursor: default;
}
.vph-pagination-dots {
    border: none !important;
    background: transparent !important;
    color: var(--muted, #888);
}
    .vp-filter-select { position: relative; }

    .vp-filter-select select.vp-native-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none;
    }

    .vp-select-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .6rem;
        background: var(--white, #fff);
        border: 1px solid var(--border-light, #e2e2e2);
        border-radius: 10px;
        padding: 10px 36px 10px 14px;
        font-family: inherit;
        font-size: .9rem;
        color: var(--ink, #1a1a1a);
        cursor: pointer;
        text-align: left;
    }

    .vp-select-trigger:focus-visible {
        outline: 2px solid var(--primary, #5232e6);
        outline-offset: 1px;
    }

    .vp-select-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vp-filter-chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .15s ease;
        pointer-events: none;
    }

    .vp-filter-select.is-open .vp-filter-chevron {
        transform: translateY(-50%) rotate(180deg);
    }

    .vp-select-menu {
        position: absolute;
        z-index: 50;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        margin: 0;
        padding: 6px;
        list-style: none;
        background: var(--white, #fff);
        border: 1px solid var(--border-light, #e2e2e2);
        border-radius: 10px;
        box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .22);
        max-height: 260px;
        overflow-y: auto;
    }

    .vp-select-menu[hidden] { display: none; }
    .vp-select-menu--above {
        top: auto;
        bottom: calc(100% + 6px);
    }

    .vp-select-option {
        padding: 10px 12px;
        font-size: .9rem;
        border-radius: 8px;
        cursor: pointer;
        color: var(--ink, #1a1a1a);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vp-select-option:hover,
    .vp-select-option.is-active {
        background: var(--primary, #5232e6);
        color: #fff;
    }


    /* Equal-height footer columns regardless of content length */
.vp-footer-columns {
    display: flex;
    flex-wrap: wrap;
}
.vp-footer-columns > [class*="col-"] {
    display: flex;
    flex-direction: column;
}


/* ////about styles */
  .vp-hero-grid {
            gap: 1.5rem 0;
        }

        /* ===== Seal cluster ===== */
        .vp-seal-cluster {
            position: relative;
            min-height: 340px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.1rem;
            max-width: 380px;
            margin: 0 auto;
        }

        .vp-seal-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px dashed var(--border-medium);
            pointer-events: none;
            z-index: 0;
        }

        .vp-seal-ring--a {
            width: 220px;
            height: 220px;
            top: 10%;
            left: 8%;
        }

        .vp-seal-ring--b {
            width: 130px;
            height: 130px;
            bottom: 6%;
            right: 4%;
        }

        .vp-seal-badge {
            position: relative;
            z-index: 1;
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--white);
            box-shadow: var(--shadow-soft);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: .75rem;
        }

        .vp-seal-badge::before {
            content: '';
            position: absolute;
            inset: 6px;
            border-radius: 50%;
            border: 1.5px dashed currentColor;
            opacity: .35;
        }

        .vp-seal-badge-inner h3 {
            font-family: var(--font-display);
                font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
            font-size: 1.35rem;
            margin: 0 0 .15rem;
            line-height: 1.05;
        }

        .vp-seal-badge-inner span {
            font-family: var(--font-body);
            font-size: .66rem;
            font-weight: 600;
            letter-spacing: .02em;
            color: var(--muted);
            display: block;
            line-height: 1.25;
        }

        /* Distinct tone + gentle stagger per seal, echoing accreditation-stamp styling used on course pages */
        .vp-seal-badge--a {
            color: var(--primary-deep);
            transform: translateY(10px) rotate(-4deg);
        }

        .vp-seal-badge--a h3 {
            color: var(--primary-deep);
        }

        .vp-seal-badge--b {
            color: var(--sky-deep);
            transform: translateY(-14px) rotate(3deg);
        }

        .vp-seal-badge--b h3 {
            color: var(--sky-deep);
        }

        .vp-seal-badge--c {
            color: #8f6e33;
            transform: translateY(6px) rotate(5deg);
        }

        .vp-seal-badge--c h3 {
            color: #8f6e33;
        }

        .vp-seal-badge--d {
            color: #2c5f52;
            transform: translateY(-8px) rotate(-3deg);
        }

        .vp-seal-badge--d h3 {
            color: #2c5f52;
        }

        @media (max-width: 991px) {
            .vp-seal-cluster {
                min-height: 0;
                max-width: 420px;
            }

            .vp-seal-ring {
                display: none;
            }

            .vp-seal-badge {
                transform: none !important;
            }
        }

        .icon-badge.badge-sky-deep {
            background: var(--sky-deep);
            color: var(--white);
        }
        
        
        

/* privacy styles */

#privacy-page {
    background: var(--bg-main);
}

#privacy-page * {
    box-sizing: border-box;
}

#privacy-page .container {
    max-width: 1180px;
}

/* ===== Hero ===== */
.vpp-hero {
    padding: 1.75rem 0 2rem;
    text-align: center;
}

.vpp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    filter: none;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--primary-deep);
    background: var(--primary-tint);
    padding: .4rem .9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.vpp-title {
    font-family: var(--font-display);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    filter: none;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    color: var(--ink);
    margin: 0 auto .5rem;
}

.vpp-updated {
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--muted);
}

/* ===== Layout ===== */
.vpp-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    padding-bottom: 3.5rem;
}

@media (max-width: 900px) {
    .vpp-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== TOC sidebar ===== */
.vpp-toc {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.1rem;
    position: sticky;
    top: 1.5rem;
}

.vpp-toc-title {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    filter: none;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-light);
    margin: 0 0 .85rem;
    padding: 0 .4rem;
}

.vpp-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.vpp-toc-list a {
    display: block;
    font-family: var(--font-body);
    font-size: .84rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: .5rem .6rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast) ease;
}

.vpp-toc-list a:hover {
    background: var(--primary-tint);
    color: var(--primary-deep);
}

@media (max-width: 900px) {
    .vpp-toc {
        position: static;
    }
}

/* ===== Content card ===== */
.vpp-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 2.25rem 2.5rem;
}

@media (max-width: 575px) {
    .vpp-card {
        padding: 1.5rem 1.25rem;
    }
}

.vpp-intro {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ink);
    margin: 0 0 1.25rem;
}

.vpp-h1 {
    font-family: var(--font-display);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    filter: none;
    font-size: 1.55rem;
    color: var(--ink);
    margin: 2.25rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-light);
    scroll-margin-top: 1.5rem;
}

.vpp-card>.vpp-h1:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.vpp-h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
    margin: 1.75rem 0 .85rem;
    scroll-margin-top: 1.5rem;
}

.vpp-text {
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.75;
    color: var(--muted);
    margin: 0 0 1rem;
}

.vpp-text strong {
    color: var(--ink);
    font-weight: 600;
}

.vpp-text a {
    color: var(--primary-deep);
    font-weight: 600;
    text-decoration: none;
}

.vpp-text a:hover {
    text-decoration: underline;
}

.vpp-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.vpp-list li {
    display: flex;
    gap: .65rem;
    font-family: var(--font-body);
    font-size: .95rem;
    line-height: 1.65;
    color: var(--muted);
}

.vpp-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: .55rem;
}

.vpp-list li strong {
    color: var(--ink);
    font-weight: 600;
}

/* ===== Contact block ===== */
.vpp-contact-card {
    background: var(--primary-tint);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.75rem;
    margin-top: .5rem;
}

.vpp-contact-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--ink);
}

.vpp-contact-row+.vpp-contact-row {
    margin-top: .75rem;
}

.vpp-contact-row i {
    color: var(--primary-deep);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.vpp-contact-row a {
    color: var(--primary-deep);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: none;
    filter: none;
    text-decoration: none;
}

.vpp-contact-row a:hover {
    text-decoration: underline;
}


/*training content*/
.cs-spotlight {
    position: relative;
    max-width: 760px;
    margin: 40px auto;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.cs-spotlight::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: var(--grad-brand);
}

.cs-watermark {
    position: absolute;
    top: -30px;
    right: -20px;
    font-size: 9rem;
    line-height: 1;
    color: var(--primary);
    opacity: .05;
    pointer-events: none;
    transform: rotate(8deg);
}

.cs-spotlight-inner {
    position: relative;
    z-index: 1;
    padding: 44px 44px 52px;
}

.cs-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 1.5rem;
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 26px;
}

.cs-heading-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--sky-tint);
    color: var(--sky-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cs-body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--ink);
    opacity: .9;
    max-width: 640px;
}

.cs-body::first-letter {
    font-family: var(--font-display);
    font-size: 3.2rem;
        font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: none;
filter: none;
    float: left;
    line-height: .78;
    padding: 6px 10px 0 0;
    color: var(--sky-deep);
}

.cs-badge {
    position: absolute;
    right: 36px;
    bottom: -18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    padding: 7px 16px 5px;
    border-radius: 999px;
    box-shadow: var(--shadow-hover);
}
.cs-badge i { color: var(--amber); font-size: .95rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .cs-spotlight { margin: 28px 16px; border-radius: 14px; }
    .cs-spotlight-inner { padding: 32px 24px 46px; }
    .cs-heading { font-size: 1.2rem; gap: 10px; }
    .cs-heading-icon { width: 38px; height: 38px; font-size: 1rem; border-radius: 10px; }
    .cs-body::first-letter { font-size: 2.4rem; }
    .cs-badge { right: 20px; bottom: -16px; padding: 10px 16px; font-size: .76rem; }
    .cs-watermark { font-size: 6rem; top: -18px; right: -12px; }
}


/*//experts section*/


    /* ---------- EXPERTS ---------- */
.vp-ex {
    position: relative;
    height: var(--ex-scroll);
    background: var(--ex-bg);
}
.vp-ex-stage {
    position: sticky;
    top: 0;
    height: var(--ex-stage-h);
    min-height: 560px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.vp-ex-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* ----- copy ----- */
.vp-ex-title {
    margin: 0 0 .4rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--primary-deep);
    -webkit-font-smoothing: antialiased;
}
.vp-ex-title em {
    font-style: normal;
    background: linear-gradient(120deg, var(--soft-accent), var(--sup-blue) 55%, var(--amber));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vp-ex-tag {
    margin: 0 0 1rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.vp-ex-lead { margin: 0 0 1.2rem; font-size: .95rem; line-height: 1.65; color: var(--muted); max-width: 52ch; }

.vp-ex-points { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.vp-ex-point {
    display: flex;
    gap: .85rem;
    padding: .85rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
}
.vp-ex-point-ic {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: #fff;
    font-size: 1.05rem;
    background: var(--grad-brand);
    box-shadow: 0 10px 18px -10px rgba(var(--primary-deep-rgb), .7);
}
.vp-ex-point:nth-child(2) .vp-ex-point-ic { background: var(--grad-gold-rich); color: var(--primary-deep); }
.vp-ex-point h3 { margin: 0 0 .15rem; font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--ink); }
.vp-ex-point p { margin: 0; font-size: .82rem; line-height: 1.55; color: var(--muted); }

.vp-ex-close {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .9rem 1.1rem;
    border-radius: 16px;
    background:
        radial-gradient(180px 80px at 100% 0%, rgba(var(--gold-rgb), .35), transparent 70%),
        var(--grad-brand);
    color: #fff;
    font-size: .86rem;
    line-height: 1.55;
    box-shadow: 0 18px 30px -18px rgba(var(--primary-deep-rgb), .8);
}
.vp-ex-close i { font-size: 1.3rem; color: #E7CF9C; flex-shrink: 0; }

.vp-ex-progress { height: 4px; margin-top: 1.1rem; border-radius: 4px; background: rgba(var(--primary-rgb), .12); overflow: hidden; }
.vp-ex-progress span {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--grad-gold-rich);
    border-radius: 4px;
}

/* ----- columns ----- */
.vp-ex-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ex-col-gap);
    height: var(--ex-win-h);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--ex-fade), #000 calc(100% - var(--ex-fade)), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 var(--ex-fade), #000 calc(100% - var(--ex-fade)), transparent 100%);
}
.vp-ex-col { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.vp-ex-track {
    display: flex;
    flex-direction: column;
    gap: var(--ex-col-gap);
    padding: var(--ex-fade) 0;
    will-change: transform;
}
/* staggered starts make the 4 columns feel independent */
.vp-ex-col:nth-child(2) .vp-ex-track { padding-top: calc(var(--ex-fade) + 3.2rem); }
.vp-ex-col:nth-child(4) .vp-ex-track { padding-top: calc(var(--ex-fade) + 5rem); }

/* header card (solid vibrant colour) */
.vp-ex-head {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1rem 1rem;
    border-radius: var(--ex-card-radius);
    color: #fff;
    background:
        radial-gradient(120px 90px at 100% 0%, rgba(255, 255, 255, .35), transparent 70%),
        linear-gradient(150deg, rgb(var(--c)) 0%, rgba(var(--c), .72) 100%);
    box-shadow: 0 20px 32px -18px rgba(var(--c), .9);
}
.vp-ex-head::after {            /* crafted ring graphic */
    content: '';
    position: absolute;
    right: -26px;
    bottom: -26px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 14px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 14px rgba(255, 255, 255, .08);
}
.vp-ex-num { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1; opacity: .9; }
.vp-ex-head h3 { margin: .45rem 0 0; font-family: var(--font-display); font-size: .98rem; font-weight: 600; line-height: 1.25; color: #fff; }
.vp-ex-amber .vp-ex-head { color: var(--primary-deep); }
.vp-ex-amber .vp-ex-head h3 { color: var(--primary-deep); }

/* item cards */
.vp-ex-card {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border-radius: var(--ex-card-radius);
    background:
        linear-gradient(180deg, rgba(var(--c), .10) 0%, rgba(255, 255, 255, 0) 55%),
        var(--ex-card-bg);
    border: 1px solid rgba(var(--c), .22);
    box-shadow: var(--ex-card-shadow);
    transition: transform .35s var(--ease-premium), box-shadow .35s ease, border-color .3s ease;
}
.vp-ex-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, rgb(var(--c)), rgba(var(--c), .2));
}
.vp-ex-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--ex-card-shadow-hover); border-color: rgba(var(--c), .5); }
.vp-ex-ic {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: .65rem;
    border-radius: 12px;
    font-size: 1.05rem;
    color: rgb(var(--c));
    background: rgba(var(--c), .14);
    box-shadow: inset 0 0 0 1px rgba(var(--c), .25);
    transition: transform .4s var(--ease-premium), background .3s ease, color .3s ease;
}
.vp-ex-card:hover .vp-ex-ic { transform: rotate(-10deg) scale(1.1); background: rgb(var(--c)); color: #fff; }
.vp-ex-amber .vp-ex-card:hover .vp-ex-ic { color: var(--primary-deep); }
.vp-ex-card h4 { margin: 0; font-family: var(--font-display); font-size: .88rem; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* ----- reduced motion: no pinning, columns scroll by hand ----- */
@media (prefers-reduced-motion: reduce) {
    .vp-ex { height: auto; }
    .vp-ex-stage { position: relative; height: auto; padding: 3rem 0; }
    .vp-ex-col { overflow-y: auto; }
    .vp-ex-card, .vp-ex-ic { transition: none; }
}

/* ----- tablet / mobile: no pin, 2x2 grid, columns still move with scroll ----- */
@media (max-width: 991px) {
    .vp-ex { height: auto; }
    .vp-ex-stage { position: relative; height: auto; min-height: 0; padding: 3rem 0 3.5rem; }
    .vp-ex-grid { grid-template-columns: 1fr; }
    .vp-ex-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; -webkit-mask-image: none; mask-image: none; }
    .vp-ex-col { height: 420px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
    .vp-ex-track { padding: 40px 0; }
    .vp-ex-progress { display: none; }
}
@media (max-width: 480px) {
    .vp-ex-card { padding: .8rem; }
    .vp-ex-head h3 { font-size: .88rem; }
    .vp-ex-card h4 { font-size: .8rem; }
}

/* home bundles */
.vp-hb { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%); }
.vp-hb::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(520px 340px at 4% 6%, rgba(var(--soft-accent-rgb), .14), transparent 70%),
        radial-gradient(520px 340px at 98% 60%, rgba(var(--amber-rgb), .16), transparent 70%);
    pointer-events: none;
}
.vp-hb .container { position: relative; z-index: 1; }

.vp-hb-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.vp-hb-top .vp-rr-head { margin: 0; text-align: left; max-width: 720px; }
.vp-hb-nav { display: flex; gap: .5rem; flex-shrink: 0; }
.vp-hb-btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--primary-deep);
    border-radius: 0;
    background: #fff;
    font-size: 1.1rem;
    color: var(--primary-deep);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vp-hb-btn:hover { background: var(--primary-deep); color: #fff; box-shadow: 4px 4px 0 0 var(--gold); transform: translate(-2px, -2px); }
.vp-hb-btn.swiper-button-disabled { opacity: .35; pointer-events: none; }

.vp-hb-more { margin-top: 1.5rem; text-align: center; }
.vp-hb-all {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.6rem;
    border-radius: 0;
    background: var(--grad-gold-rich);
    border: 1px solid var(--gold-deep);
    font-size: .9rem;
    font-weight: 600;
    color: var(--primary-deep);
    text-decoration: none;
    box-shadow: 4px 4px 0 0 var(--primary-deep);
    transition: transform .2s ease, box-shadow .2s ease;
}
.vp-hb-all:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--primary-deep); color: var(--primary-deep); }

@media (max-width: 767px) {
    .vp-hb-top { flex-direction: column; align-items: flex-start; }
    .vp-hb-top .vp-rr-head { text-align: left; }
}


/* ===== shared: shell, hero, filter bar (trainings + bundles) ===== */
.vp-tr { background: var(--tr-ivory); color: var(--tr-ink); font-family: var(--font-body); overflow-x: clip; }

.vp-tr-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--tr-gold-deep);
}
.vp-tr-eyebrow::before, .vp-tr-eyebrow::after { content: ''; width: 26px; height: 1px; background: var(--tr-gold); opacity: .7; }

/* hero */
.vp-hc {
    position: relative; isolation: isolate;
    padding: 2.5rem 0 0; margin-bottom: 3.75rem; text-align: center;
    background:
        radial-gradient(520px 240px at 88% 8%, rgba(var(--tr-gold-rgb), .16), transparent 70%),
        radial-gradient(640px 280px at 8% 92%, rgba(var(--tr-teal-rgb), .14), transparent 72%),
        var(--tr-grad-hero);
}
.vp-hc::after {
    content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--tr-hairline) 20%, var(--tr-gold) 50%, var(--tr-hairline) 80%, transparent);
}
.vp-hc-copy { position: relative; z-index: 3; max-width: 700px; margin: 0 auto; padding-bottom: 3.25rem; }
.vp-hc-rating {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .3rem .85rem;
    border-radius: 999px; background: rgba(255, 255, 255, .82); border: 1px solid var(--tr-hairline);
    font-size: .72rem; letter-spacing: .02em; color: var(--gold-deep);
}
.vp-hc-stars { display: inline-flex; gap: 2px; font-size: .68rem; color: var(--tr-gold); }
.vp-hc-title {
    margin: 0 auto .7rem; font-family: var(--font-body); font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.015em;
    color: var(--tr-deep); text-wrap: balance; -webkit-font-smoothing: antialiased;
}
.vp-hc-sub { max-width: 54ch; margin: 0 auto; font-size: 1rem; line-height: 1.6; color: var(--tr-muted); }
.vp-hc-ornament { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1.1rem auto 0; }
.vp-hc-ornament i { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--tr-gold)); }
.vp-hc-ornament i:last-child { transform: scaleX(-1); }
.vp-hc-ornament b { width: 7px; height: 7px; background: var(--tr-gold); transform: rotate(45deg); }

.vp-hc-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.vp-hc-tile {
    position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 14px; background: linear-gradient(180deg, #fff, var(--tr-ivory));
    border: 1px solid rgba(var(--tr-gold-rgb), .28); color: var(--tile-color); font-size: 1.2rem;
    box-shadow: var(--tr-shadow-rest); animation: vpTrFloat 6s ease-in-out infinite;
}
.vp-hc-tile--1 { left: 5%;  top: 20%; }
.vp-hc-tile--2 { left: 16%; top: 52%; animation-delay: -2s; }
.vp-hc-tile--3 { left: 7%;  top: 74%; animation-delay: -4s; }
.vp-hc-tile--4 { right: 5%;  top: 20%; animation-delay: -1s; }
.vp-hc-tile--5 { right: 16%; top: 52%; animation-delay: -3s; }
.vp-hc-tile--6 { right: 7%;  top: 74%; animation-delay: -5s; }
@keyframes vpTrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* filter bar skin (this is what makes both pages' filters identical) */
.vp-hc-filters { position: relative; z-index: 5; margin-bottom: -2.5rem; text-align: left; }
.vp-hc-filters .vp-filterbar {
    max-width: 960px; margin-left: auto; margin-right: auto; background: #fff;
    border: 1px solid var(--tr-line); border-radius: var(--tr-radius);
    box-shadow: inset 0 2px 0 var(--tr-gold), var(--tr-shadow-lift);
}
.vp-filter-select { position: relative; }
.vp-filter-select select { position: relative; z-index: 1; cursor: pointer; }
.vp-filter-chevron { pointer-events: none; }

/* category photo in hero */
.vp-hc-photo { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.vp-hc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.vp-hc-photo::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(520px 240px at 88% 8%, rgba(var(--gold-rgb), .28), transparent 70%),
        linear-gradient(180deg, rgba(var(--primary-deep-rgb), .82) 0%, rgba(var(--primary-deep-rgb), .62) 55%, rgba(var(--primary-deep-rgb), .88) 100%);
}
.vp-hc.has-photo .vp-hc-photo { opacity: 1; }
.vp-hc.has-photo .vp-hc-title { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.vp-hc.has-photo .vp-hc-sub { color: rgba(255, 255, 255, .88); }
.vp-hc.has-photo .vp-hc-rating { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(6px); }
.vp-hc.has-photo .vp-hc-ornament b { background: #E7CF9C; }
.vp-hc.has-photo .vp-hc-lines, .vp-hc.has-photo .vp-hc-tile { opacity: .35; }

/* stat pills */
.vp-hc-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.vp-hc-stats li {
    display: inline-flex; align-items: baseline; gap: .4rem; padding: .3rem .85rem; border-radius: 999px;
    background: rgba(255, 255, 255, .82); border: 1px solid var(--tr-hairline); font-size: .78rem; color: var(--tr-muted);
}
.vp-hc-stats strong { font-family: var(--font-display); font-size: .98rem; font-weight: 600; color: var(--tr-deep); }
.vp-hc.has-photo .vp-hc-stats li { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(6px); }
.vp-hc.has-photo .vp-hc-stats strong { color: #fff; }

@media (max-width: 1099px) { .vp-hc-tile { display: none; } }
@media (max-width: 767px) {
    .vp-hc { padding-top: 4.75rem; margin-bottom: 3.25rem; }
    .vp-hc-lines { display: none; }
    .vp-hc-copy { padding-bottom: 1.5rem; }
    .vp-hc-filters { margin-bottom: -1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .vp-hc-tile { animation: none; }
    .vp-hc-photo { transition: none; }
}
.vp-hc-filters .vp-filter-select { z-index: 1; }
.vp-hc-filters .vp-filter-select.open,
.vp-hc-filters .vp-filter-select:focus-within { z-index: 30; }


/* filter dropdowns must escape the hero */
.vp-hc {
    position: relative;
    z-index: 20 !important;
    overflow: visible !important;
}
/* the photo layer clips itself, so the hero doesn't have to */
.vp-hc-photo { overflow: hidden; }

.vp-hc-filters,
.vp-hc-filters .vp-filterbar,
.vp-hc-filters .vp-filterbar-group,
.vp-hc-filters .vp-filter-field { overflow: visible !important; }

.vp-hc-filters .vp-filter-field:focus-within,
.vp-hc-filters .vp-filter-select:focus-within { position: relative; z-index: 50; }

/* sections after the hero stay underneath */
.vp-cn,
#trainings-list,
#bundles { position: relative; z-index: 0; }

/* custom select libraries, if one is in use */
.nice-select .list,
.select2-container,
.select2-dropdown,
.bootstrap-select .dropdown-menu { z-index: 60 !important; }


/*login footer*/
.vpfoot {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(720px 320px at 88% 0%, rgba(var(--amber-rgb), .16), transparent 60%),
        radial-gradient(680px 340px at 6% 100%, rgba(var(--primary-rgb), .28), transparent 65%),
        var(--grad-brand);
    box-shadow: inset 0 1px 0 rgba(var(--amber-rgb), .55);
}

/* dotted texture */
.vpfoot::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, transparent 20%, #000 85%);
            mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, transparent 20%, #000 85%);
    pointer-events: none;
}
.vpfoot .container { position: relative; z-index: 1; }
.vpfoot-cols {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2rem 0;
    margin: 0 -1rem;               /* offsets the column padding */
    padding: 2.75rem 0 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.vpfoot-col {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 1rem;
    min-width: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 991px) {
    .vpfoot-col { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 575px) {
    .vpfoot-col { flex: 0 0 100%; max-width: 100%; }
}

/* Column 1: brand */
.vpfoot-brand-col {
    display: flex;
    flex-direction: column;
}

.vpfoot-brand {
    max-width: 100%;
}

.vpfoot-logo {
    height: 68px;
    width: auto;
    max-width: 100%;
    display: block;
    margin-bottom: 1rem;
    filter: brightness(1.05);
}

.vpfoot-tagline {
    margin: 0;
    font-family: var(--font-body);
    font-size: .92rem;
    line-height: 1.65;
    font-weight: 400;
    color: rgba(255, 255, 255, .78);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.vpfoot-heading {
    margin: 0 0 1.1rem;
    font-family: var(--font-display, var(--font-body));
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #E7CF9C;
}

.vpfoot-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.vpfoot-list a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.vpfoot-list a:hover,
.vpfoot-list a:focus-visible {
    color: #fff;
    transform: translateX(3px);
}
.vpfoot-list a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

.vpfoot-list--social a i {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    font-size: .72rem;
    color: #fff;
    transition: background .2s ease, color .2s ease;
    flex-shrink: 0;
}
.vpfoot-list--social a:hover i {
    background: var(--grad-gold-rich);
    color: var(--primary-deep);
}

/* ---------- Contact block (4th column) ---------- */
.vpfoot-soft {
    margin: 0 0 .55rem;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .62);
}

.vpfoot-contact {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
    white-space: nowrap;
}
.vpfoot-contact i { color: #E7CF9C; font-size: .95rem; }
.vpfoot-contact:hover {
    background: var(--grad-gold-rich);
    border-color: transparent;
    color: var(--primary-deep);
    transform: translateY(-1px);
}
.vpfoot-contact:hover i { color: var(--primary-deep); }
.vpfoot-contact:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Bottom ---------- */
.vpfoot-bottom {
    padding: 1.5rem 0 1.75rem;
}

.vpfoot-copy {
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .72);
    text-align: center;
}
.vpfoot-copy-sep { opacity: .45; margin: 0 .35rem; }
.vpfoot-accent { color: #E7CF9C; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .vpfoot-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
   
    .vpfoot-logo { height: 56px; }
    .vpfoot-copy { font-size: .78rem; text-align: left; }
    .vpfoot-copy-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vpfoot-list a,
    .vpfoot-list--social a i,
    .vpfoot-contact { transition: none; }
}
.vpfoot-tagline { max-width: 32ch; }