/*
 * ClicZeo additions on top of the Otech theme.
 *
 * Kept in its own file rather than edited into style.css so a theme update can
 * be dropped in without losing these, and so it is obvious which rules are ours.
 */

/* --- Blog category filter -------------------------------------------------
 * The theme's outline button is white-on-dark; on the light listing background
 * it fell to roughly 1.6:1 contrast and was effectively unreadable. These chips
 * are a separate component with a solid border and dark text.
 */
.vl-filter-chip {
    display: inline-block;
    padding: 8px 18px;
    margin: 0 8px 10px 0;
    border-radius: 999px;
    border: 1px solid rgba(5, 12, 54, 0.16);
    background: #fff;
    color: #050C36;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: all .25s ease;
}

.vl-filter-chip:hover,
.vl-filter-chip:focus-visible {
    border-color: #0D43FE;
    color: #0D43FE;
}

.vl-filter-chip[aria-current="page"] {
    background: linear-gradient(85deg, #0D43FE -50.83%, #BB29F2 90.34%);
    border-color: transparent;
    color: #fff;
}

/* --- Tags ---------------------------------------------------------------- */
.vl-tag {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 8px 8px 0;
    border-radius: 999px;
    background: rgba(13, 67, 254, .08);
    color: #0D43FE;
    font-size: 14px;
    font-weight: 600;
}

/* --- Lists inside long-form content -------------------------------------- */
.vl-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vl-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    line-height: 1.65;
}

.vl-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0D43FE;
}

/* An explicit icon replaces the bullet where one is supplied. */
.vl-list li > i:first-child { position: absolute; left: 0; top: .3em; }
.vl-list li:has(> i:first-child)::before { display: none; }

/* --- Forms ---------------------------------------------------------------
 * The theme styles only its own contact widget, so the enquiry form needs
 * base field styling of its own.
 */
.vl-contact-area label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #050C36;
}

.vl-contact-area input,
.vl-contact-area select,
.vl-contact-area textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(5, 12, 54, .15);
    border-radius: 8px;
    background: #fff;
    color: #050C36;
    font-size: 16px;
    font-family: inherit;
}

.vl-contact-area input:focus,
.vl-contact-area select:focus,
.vl-contact-area textarea:focus {
    outline: 2px solid #0D43FE;
    outline-offset: 1px;
    border-color: #0D43FE;
}

.vl-contact-area [aria-invalid="true"] { border-color: #d92c2c; }

/* --- Long-form article and service bodies -------------------------------- */
.vl-blog-body h2,
.vl-service-details-content h2 { font-size: 30px; line-height: 1.25; margin: 36px 0 16px; }

.vl-blog-body h3,
.vl-service-details-content h3 { font-size: 23px; line-height: 1.3; margin: 30px 0 14px; }

.vl-blog-body p,
.vl-service-details-content p { margin-bottom: 18px; line-height: 1.75; }

.vl-blog-body ul,
.vl-blog-body ol { margin: 0 0 18px 22px; }

.vl-blog-body li { margin-bottom: 10px; line-height: 1.7; }

.vl-blog-body img { max-width: 100%; height: auto; border-radius: 8px; }

.vl-blog-body a,
.vl-service-details-content a { color: #0D43FE; text-decoration: underline; }

.vl-blog-body table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.vl-blog-body th,
.vl-blog-body td { border: 1px solid rgba(5,12,54,.12); padding: 10px 14px; text-align: left; }

/* --- Pricing -------------------------------------------------------------- */
.vl-pricing-box-4 {
    padding: 36px 32px;
    background: #fff;
    border: 1px solid rgba(5, 12, 54, .1);
}

.vl-pricing-box-4.vl-pricing-active {
    border-color: #0D43FE;
    box-shadow: 0 18px 50px rgba(13, 67, 254, .12);
}

.vl-pricing-title { font-size: 22px; font-weight: 700; }

/* --- Utilities the theme lacks ------------------------------------------- */
.vl-legal-area h2 { margin-top: 8px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.mt-40 { margin-top: 40px; }

/* --- Services mega-menu ---------------------------------------------------
 * The theme's own .vl-mega-menu is built around its demo's fixed four-column
 * markup. This is a grid that adapts to however many categories the database
 * returns, so adding a seventh never needs a CSS change.
 *
 * Selectors here are deliberately specific. The theme styles every menu link
 * with `.vl-main-menu ul > li > a { padding: 24px 0; font-size: 18px }`, which
 * also matches the links inside this panel and made each one 73px tall — a
 * 1210px-high menu. Two classes deep beats that cleanly.
 */

/* The panel spans the header bar, not the 84px-wide list item it hangs off.
 * Anchoring to the item and centring it pushed the left edge 33px off-screen. */
.vl-header-bg-4 { position: relative; }
.vl-main-menu nav > ul > li.cz-has-mega { position: static; }

.vl-main-menu nav > ul > li.cz-has-mega .cz-mega {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    width: auto;
    padding: 30px 34px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(5, 12, 54, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
    text-align: left;
}

.vl-main-menu nav > ul > li.cz-has-mega:hover .cz-mega,
.vl-main-menu nav > ul > li.cz-has-mega:focus-within .cz-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.vl-main-menu .cz-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 30px;
    align-items: start;
}

@media (min-width: 1200px) {
    .vl-main-menu .cz-mega-grid { grid-template-columns: repeat(6, 1fr); }
}

.vl-main-menu .cz-mega-heading {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(5, 12, 54, .1);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #0D43FE;
}

.vl-main-menu .cz-mega-col ul { list-style: none; margin: 0; padding: 0; }
.vl-main-menu .cz-mega-col ul > li { margin: 0; }

.vl-main-menu .cz-mega-col ul > li > a {
    display: block;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #1D244A;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.vl-main-menu .cz-mega-col ul > li > a:hover,
.vl-main-menu .cz-mega-col ul > li > a:focus-visible {
    background: rgba(13, 67, 254, .07);
    color: #0D43FE;
}

/* The theme draws an underline pseudo-element on menu links; inside the panel
 * it renders as a stray dash next to every service. */
.vl-main-menu .cz-mega-col ul > li > a::before,
.vl-main-menu .cz-mega-col ul > li > a::after { display: none; }

.vl-main-menu .cz-mega-foot {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.vl-main-menu .cz-mega-foot > a {
    padding: 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: #0D43FE;
    text-decoration: none;
}

.vl-main-menu .cz-mega-foot > a i { margin-left: 6px; }

/* The off-canvas menu clones this markup, where the grid and the hover states
 * make no sense — it is a vertical accordion driven by cliczeo.js instead. */
.vl-offcanvas-menu .cz-mega {
    position: static;
    transform: none;
    width: auto;
    padding: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vl-offcanvas-menu .cz-mega-grid { display: block; }
.vl-offcanvas-menu .cz-mega-col { margin-bottom: 18px; }
.vl-offcanvas-menu .cz-mega-foot { margin-top: 12px; }

/* --- Off-canvas menu ------------------------------------------------------
 * The cloned desktop markup arrives styled for a dark transparent header on a
 * light panel, and with the mega-menu's grid. These reset it to a readable
 * vertical accordion.
 */
.vl-offcanvas-menu nav > ul { list-style: none; margin: 0; padding: 0; }

.vl-offcanvas-menu nav > ul > li {
    position: relative;
    border-bottom: 1px solid rgba(5, 12, 54, .08);
}

.vl-offcanvas-menu nav > ul > li > a {
    display: block;
    padding: 14px 40px 14px 0;
    font-size: 17px;
    font-weight: 700;
    color: #050C36;
    text-decoration: none;
}

/* The submenu toggle cliczeo.js appends to any item that has children. */
.vl-offcanvas-menu nav .vl-menu-close {
    position: absolute;
    top: 10px;
    right: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(5, 12, 54, .12);
    border-radius: 8px;
    background: transparent;
    color: #050C36;
    font-size: 13px;
    line-height: 1;
    transition: transform .2s ease;
}

.vl-offcanvas-menu nav > ul > li.active > .vl-menu-close { transform: rotate(90deg); }

/* Children start collapsed; cliczeo.js slides them open. */
.vl-offcanvas-menu nav .sub-menu,
.vl-offcanvas-menu nav .cz-mega { display: none; }

.vl-offcanvas-menu nav .sub-menu {
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 0 14px;
}

.vl-offcanvas-menu nav .sub-menu li a,
.vl-offcanvas-menu nav .cz-mega-col ul > li > a {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 500;
    color: #1D244A;
    text-decoration: none;
}

.vl-offcanvas-menu nav .cz-mega { padding-bottom: 10px; }
.vl-offcanvas-menu nav .cz-mega-col { margin-bottom: 6px; padding-left: 14px; }

.vl-offcanvas-menu nav .cz-mega-heading {
    margin: 14px 0 4px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #0D43FE;
}

.vl-offcanvas-menu nav .cz-mega-foot {
    margin: 10px 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.vl-offcanvas-menu nav .cz-mega-foot a { font-weight: 700; color: #0D43FE; text-decoration: none; }

.vl-offcanvas-sm-title { font-size: 16px; font-weight: 800; color: #050C36; margin-bottom: 12px; }
.vl-offcanvas-contact a { color: #1D244A; text-decoration: none; }
.vl-offcanvas-contact a:hover { color: #0D43FE; }
.vl-offcanvas .mt-20 { margin-top: 20px; }

/* --- Buttons on dark backgrounds ------------------------------------------
 * The theme's .theme-btn is a gradient-TEXT button: it paints
 * `linear-gradient(90deg,#2E0797,#726EFC)` into the glyphs via
 * `background-clip: text` and `-webkit-text-fill-color: transparent`.
 *
 * That has two consequences worth knowing before touching one:
 *   1. Overriding `background` removes the gradient the text is clipped from,
 *      and the transparent text-fill is left with nothing to show — the label
 *      disappears entirely. That is what happened to the phone button on the
 *      CTA band.
 *   2. Setting `color` does nothing, because -webkit-text-fill-color wins.
 *
 * So a variant for dark backgrounds has to restore the text fill explicitly
 * rather than just recolour it.
 */
.cz-btn-ghost {
    display: inline-block;
    padding: 14px 26px;
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    -webkit-text-fill-color: #fff;   /* overrides .theme-btn's transparent fill */
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.cz-btn-ghost:hover,
.cz-btn-ghost:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.cz-btn-ghost i { margin-right: 8px; }

/* Solid white pill with dark text, for use on the gradient CTA band. */
.cz-btn-light {
    display: inline-block;
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #0D43FE;
    -webkit-text-fill-color: #0D43FE;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cz-btn-light:hover,
.cz-btn-light:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(5, 12, 54, .22);
    color: #0D43FE;
    -webkit-text-fill-color: #0D43FE;
}

/* ==========================================================================
   Training page
   ==========================================================================
   Self-contained (cz-tr-* / cz-*) rather than reusing the theme's service and
   pricing classes. Those carry the gradient-text button behaviour and fixed
   8px radii, and bending them for this page meant inline overrides that broke
   in exactly the way the CTA phone button did.
   -------------------------------------------------------------------------- */

/* --- Shared section furniture --------------------------------------------- */
.cz-section { padding: 96px 0; }
.cz-section-tint { background: #F4F5F8; }

.cz-section-dark {
    background: linear-gradient(135deg, #0B1033 0%, #211464 55%, #3A1E8F 100%);
    color: #fff;
}

.cz-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }

.cz-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .09);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0D43FE;
}

.cz-eyebrow-light { background: rgba(255, 255, 255, .14); color: #fff; }

.cz-h2 {
    margin: 0 0 16px;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: #050C36;
}

.cz-h2-light { color: #fff; }

.cz-section-lead { margin: 0; font-size: 17px; line-height: 1.65; color: #5F6168; }
.cz-section-lead-light { color: rgba(255, 255, 255, .78); }

.cz-pill {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

/* --- Hero ------------------------------------------------------------------ */
.cz-tr-hero {
    position: relative;
    padding: 190px 0 96px;
    background: linear-gradient(135deg, #0B1033 0%, #2A1178 45%, #5038C9 100%);
    color: #fff;
    overflow: hidden;
}

/* Soft magenta bloom, echoing the gradient the brand uses elsewhere. */
.cz-tr-hero::after {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(187, 41, 242, .38) 0%, transparent 68%);
    pointer-events: none;
}

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

.cz-tr-hero-title {
    margin: 0 0 20px;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    color: #fff;
}

.cz-tr-hero-lead {
    max-width: 34rem;
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .84);
}

.cz-tr-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.cz-tr-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.cz-tr-proof-item strong {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.cz-tr-proof-item span {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .62);
}

.cz-tr-hero-art { position: relative; padding-left: 28px; }

.cz-tr-hero-art img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(5, 12, 54, .4);
}

.cz-tr-hero-badge {
    position: absolute;
    left: 0;
    bottom: 34px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(5, 12, 54, .26);
    text-align: center;
}

.cz-tr-hero-badge strong { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: #0D43FE; }
.cz-tr-hero-badge span { display: block; margin-top: 5px; max-width: 96px; font-size: 12px; line-height: 1.35; color: #5F6168; }

/* --- Curriculum phases ----------------------------------------------------- */
.cz-phase {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 44px;
    padding: 44px 0;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.cz-phase:last-child { border-bottom: 1px solid rgba(5, 12, 54, .1); }

.cz-phase-side { position: sticky; top: 110px; align-self: start; }

.cz-phase-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #BB29F2;
}

.cz-phase-title { margin: 0 0 12px; font-size: 26px; font-weight: 800; line-height: 1.2; color: #050C36; }
.cz-phase-summary { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #5F6168; }

.cz-phase-count {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .08);
    font-size: 12px;
    font-weight: 700;
    color: #0D43FE;
}

.cz-phase-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.cz-module {
    display: flex;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(5, 12, 54, .09);
    border-radius: 14px;
    background: #fff;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.cz-module:hover {
    border-color: rgba(13, 67, 254, .38);
    box-shadow: 0 14px 34px rgba(5, 12, 54, .08);
    transform: translateY(-2px);
}

.cz-module-num {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    color: rgba(13, 67, 254, .32);
}

.cz-module-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #050C36; }
.cz-module-desc { margin: 0; font-size: 14px; line-height: 1.55; color: #5F6168; }

/* --- Live projects --------------------------------------------------------- */
.cz-project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.cz-project {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    transition: background .22s ease, border-color .22s ease;
}

.cz-project:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }

.cz-project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
}

.cz-project-icon img { filter: brightness(0) invert(1); }
.cz-project-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.cz-project-desc { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* --- Tools -----------------------------------------------------------------
 * Two passes got this wrong before landing here. A card per source category
 * gave thirteen boxes, nine holding a single tool, mostly empty. Consolidating
 * to four full-width chip rows fixed the emptiness but left four stranded
 * bands with a ragged right edge — dense in one axis, scattered in the other.
 *
 * A 2x2 grid of grouped cards uses both axes: the four groups read as one
 * block, and the chips fill their card instead of trailing off into whitespace.
 */
.cz-tools {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
}

.cz-tool-row {
    padding: 28px 26px;
    border: 1px solid rgba(5, 12, 54, .09);
    border-radius: 18px;
    background: #fff;
    transition: border-color .22s ease, box-shadow .22s ease;
}

.cz-tool-row:hover {
    border-color: rgba(13, 67, 254, .3);
    box-shadow: 0 16px 38px rgba(5, 12, 54, .07);
}

.cz-tool-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(5, 12, 54, .08);
}

.cz-tool-row-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #0D43FE;
}

.cz-tool-row-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .1);
    font-size: 11px;
    font-weight: 800;
    color: #0D43FE;
}

.cz-tool-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cz-tool-chips li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 11px;
    border: 1px solid rgba(5, 12, 54, .12);
    border-radius: 999px;
    background: #F8F9FC;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #1D244A;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

/* Ahrefs and Midjourney have no official mark in the icon set, so their chips
 * keep the standard padding rather than reserving space for a missing image. */
.cz-tool-chips li.cz-chip-plain { padding-left: 16px; }

/* The marks are monochrome paths. Recolouring them to each brand's own hex is
 * done with a CSS mask so a single SVG file can carry the brand colour without
 * editing the downloaded artwork. */
.cz-tool-chips li .cz-tool-mark {
    display: block;
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    background-color: var(--cz-brand, #1D244A);
    -webkit-mask: var(--cz-mask) center / contain no-repeat;
    mask: var(--cz-mask) center / contain no-repeat;
}

.cz-tool-chips li:hover {
    border-color: #0D43FE;
    background: rgba(13, 67, 254, .06);
    color: #0D43FE;
}

@media (max-width: 767px) {
    .cz-tools { grid-template-columns: 1fr; }
}

/* --- Pricing -------------------------------------------------------------- */
.vl-pricing-box-4 {
    padding: 36px 32px;
    background: #fff;
    border: 1px solid rgba(5, 12, 54, .1);
}

.vl-pricing-box-4.vl-pricing-active {
    border-color: #0D43FE;
    box-shadow: 0 18px 50px rgba(13, 67, 254, .12);
}

.vl-pricing-title { font-size: 22px; font-weight: 700; }

/* --- Utilities the theme lacks ------------------------------------------- */
.vl-legal-area h2 { margin-top: 8px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.mt-40 { margin-top: 40px; }

/* --- Services mega-menu ---------------------------------------------------
 * The theme's own .vl-mega-menu is built around its demo's fixed four-column
 * markup. This is a grid that adapts to however many categories the database
 * returns, so adding a seventh never needs a CSS change.
 *
 * Selectors here are deliberately specific. The theme styles every menu link
 * with `.vl-main-menu ul > li > a { padding: 24px 0; font-size: 18px }`, which
 * also matches the links inside this panel and made each one 73px tall — a
 * 1210px-high menu. Two classes deep beats that cleanly.
 */

/* The panel spans the header bar, not the 84px-wide list item it hangs off.
 * Anchoring to the item and centring it pushed the left edge 33px off-screen. */
.vl-header-bg-4 { position: relative; }
.vl-main-menu nav > ul > li.cz-has-mega { position: static; }

.vl-main-menu nav > ul > li.cz-has-mega .cz-mega {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    width: auto;
    padding: 30px 34px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(5, 12, 54, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
    text-align: left;
}

.vl-main-menu nav > ul > li.cz-has-mega:hover .cz-mega,
.vl-main-menu nav > ul > li.cz-has-mega:focus-within .cz-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.vl-main-menu .cz-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 30px;
    align-items: start;
}

@media (min-width: 1200px) {
    .vl-main-menu .cz-mega-grid { grid-template-columns: repeat(6, 1fr); }
}

.vl-main-menu .cz-mega-heading {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(5, 12, 54, .1);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #0D43FE;
}

.vl-main-menu .cz-mega-col ul { list-style: none; margin: 0; padding: 0; }
.vl-main-menu .cz-mega-col ul > li { margin: 0; }

.vl-main-menu .cz-mega-col ul > li > a {
    display: block;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #1D244A;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.vl-main-menu .cz-mega-col ul > li > a:hover,
.vl-main-menu .cz-mega-col ul > li > a:focus-visible {
    background: rgba(13, 67, 254, .07);
    color: #0D43FE;
}

/* The theme draws an underline pseudo-element on menu links; inside the panel
 * it renders as a stray dash next to every service. */
.vl-main-menu .cz-mega-col ul > li > a::before,
.vl-main-menu .cz-mega-col ul > li > a::after { display: none; }

.vl-main-menu .cz-mega-foot {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.vl-main-menu .cz-mega-foot > a {
    padding: 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: #0D43FE;
    text-decoration: none;
}

.vl-main-menu .cz-mega-foot > a i { margin-left: 6px; }

/* The off-canvas menu clones this markup, where the grid and the hover states
 * make no sense — it is a vertical accordion driven by cliczeo.js instead. */
.vl-offcanvas-menu .cz-mega {
    position: static;
    transform: none;
    width: auto;
    padding: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vl-offcanvas-menu .cz-mega-grid { display: block; }
.vl-offcanvas-menu .cz-mega-col { margin-bottom: 18px; }
.vl-offcanvas-menu .cz-mega-foot { margin-top: 12px; }

/* --- Off-canvas menu ------------------------------------------------------
 * The cloned desktop markup arrives styled for a dark transparent header on a
 * light panel, and with the mega-menu's grid. These reset it to a readable
 * vertical accordion.
 */
.vl-offcanvas-menu nav > ul { list-style: none; margin: 0; padding: 0; }

.vl-offcanvas-menu nav > ul > li {
    position: relative;
    border-bottom: 1px solid rgba(5, 12, 54, .08);
}

.vl-offcanvas-menu nav > ul > li > a {
    display: block;
    padding: 14px 40px 14px 0;
    font-size: 17px;
    font-weight: 700;
    color: #050C36;
    text-decoration: none;
}

/* The submenu toggle cliczeo.js appends to any item that has children. */
.vl-offcanvas-menu nav .vl-menu-close {
    position: absolute;
    top: 10px;
    right: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(5, 12, 54, .12);
    border-radius: 8px;
    background: transparent;
    color: #050C36;
    font-size: 13px;
    line-height: 1;
    transition: transform .2s ease;
}

.vl-offcanvas-menu nav > ul > li.active > .vl-menu-close { transform: rotate(90deg); }

/* Children start collapsed; cliczeo.js slides them open. */
.vl-offcanvas-menu nav .sub-menu,
.vl-offcanvas-menu nav .cz-mega { display: none; }

.vl-offcanvas-menu nav .sub-menu {
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 0 14px;
}

.vl-offcanvas-menu nav .sub-menu li a,
.vl-offcanvas-menu nav .cz-mega-col ul > li > a {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 500;
    color: #1D244A;
    text-decoration: none;
}

.vl-offcanvas-menu nav .cz-mega { padding-bottom: 10px; }
.vl-offcanvas-menu nav .cz-mega-col { margin-bottom: 6px; padding-left: 14px; }

.vl-offcanvas-menu nav .cz-mega-heading {
    margin: 14px 0 4px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #0D43FE;
}

.vl-offcanvas-menu nav .cz-mega-foot {
    margin: 10px 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.vl-offcanvas-menu nav .cz-mega-foot a { font-weight: 700; color: #0D43FE; text-decoration: none; }

.vl-offcanvas-sm-title { font-size: 16px; font-weight: 800; color: #050C36; margin-bottom: 12px; }
.vl-offcanvas-contact a { color: #1D244A; text-decoration: none; }
.vl-offcanvas-contact a:hover { color: #0D43FE; }
.vl-offcanvas .mt-20 { margin-top: 20px; }

/* --- Buttons on dark backgrounds ------------------------------------------
 * The theme's .theme-btn is a gradient-TEXT button: it paints
 * `linear-gradient(90deg,#2E0797,#726EFC)` into the glyphs via
 * `background-clip: text` and `-webkit-text-fill-color: transparent`.
 *
 * That has two consequences worth knowing before touching one:
 *   1. Overriding `background` removes the gradient the text is clipped from,
 *      and the transparent text-fill is left with nothing to show — the label
 *      disappears entirely. That is what happened to the phone button on the
 *      CTA band.
 *   2. Setting `color` does nothing, because -webkit-text-fill-color wins.
 *
 * So a variant for dark backgrounds has to restore the text fill explicitly
 * rather than just recolour it.
 */
.cz-btn-ghost {
    display: inline-block;
    padding: 14px 26px;
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    -webkit-text-fill-color: #fff;   /* overrides .theme-btn's transparent fill */
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.cz-btn-ghost:hover,
.cz-btn-ghost:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.cz-btn-ghost i { margin-right: 8px; }

/* Solid white pill with dark text, for use on the gradient CTA band. */
.cz-btn-light {
    display: inline-block;
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #0D43FE;
    -webkit-text-fill-color: #0D43FE;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cz-btn-light:hover,
.cz-btn-light:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(5, 12, 54, .22);
    color: #0D43FE;
    -webkit-text-fill-color: #0D43FE;
}

/* ==========================================================================
   Training page
   ==========================================================================
   Self-contained (cz-tr-* / cz-*) rather than reusing the theme's service and
   pricing classes. Those carry the gradient-text button behaviour and fixed
   8px radii, and bending them for this page meant inline overrides that broke
   in exactly the way the CTA phone button did.
   -------------------------------------------------------------------------- */

/* --- Shared section furniture --------------------------------------------- */
.cz-section { padding: 96px 0; }
.cz-section-tint { background: #F4F5F8; }

.cz-section-dark {
    background: linear-gradient(135deg, #0B1033 0%, #211464 55%, #3A1E8F 100%);
    color: #fff;
}

.cz-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }

.cz-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .09);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0D43FE;
}

.cz-eyebrow-light { background: rgba(255, 255, 255, .14); color: #fff; }

.cz-h2 {
    margin: 0 0 16px;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: #050C36;
}

.cz-h2-light { color: #fff; }

.cz-section-lead { margin: 0; font-size: 17px; line-height: 1.65; color: #5F6168; }
.cz-section-lead-light { color: rgba(255, 255, 255, .78); }

.cz-pill {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

/* --- Hero ------------------------------------------------------------------ */
.cz-tr-hero {
    position: relative;
    padding: 190px 0 96px;
    background: linear-gradient(135deg, #0B1033 0%, #2A1178 45%, #5038C9 100%);
    color: #fff;
    overflow: hidden;
}

/* Soft magenta bloom, echoing the gradient the brand uses elsewhere. */
.cz-tr-hero::after {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(187, 41, 242, .38) 0%, transparent 68%);
    pointer-events: none;
}

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

.cz-tr-hero-title {
    margin: 0 0 20px;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    color: #fff;
}

.cz-tr-hero-lead {
    max-width: 34rem;
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .84);
}

.cz-tr-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.cz-tr-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.cz-tr-proof-item strong {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.cz-tr-proof-item span {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .62);
}

.cz-tr-hero-art { position: relative; padding-left: 28px; }

.cz-tr-hero-art img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(5, 12, 54, .4);
}

.cz-tr-hero-badge {
    position: absolute;
    left: 0;
    bottom: 34px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(5, 12, 54, .26);
    text-align: center;
}

.cz-tr-hero-badge strong { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: #0D43FE; }
.cz-tr-hero-badge span { display: block; margin-top: 5px; max-width: 96px; font-size: 12px; line-height: 1.35; color: #5F6168; }

/* --- Curriculum phases ----------------------------------------------------- */
.cz-phase {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 44px;
    padding: 44px 0;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.cz-phase:last-child { border-bottom: 1px solid rgba(5, 12, 54, .1); }

.cz-phase-side { position: sticky; top: 110px; align-self: start; }

.cz-phase-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #BB29F2;
}

.cz-phase-title { margin: 0 0 12px; font-size: 26px; font-weight: 800; line-height: 1.2; color: #050C36; }
.cz-phase-summary { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #5F6168; }

.cz-phase-count {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .08);
    font-size: 12px;
    font-weight: 700;
    color: #0D43FE;
}

.cz-phase-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.cz-module {
    display: flex;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(5, 12, 54, .09);
    border-radius: 14px;
    background: #fff;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.cz-module:hover {
    border-color: rgba(13, 67, 254, .38);
    box-shadow: 0 14px 34px rgba(5, 12, 54, .08);
    transform: translateY(-2px);
}

.cz-module-num {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    color: rgba(13, 67, 254, .32);
}

.cz-module-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #050C36; }
.cz-module-desc { margin: 0; font-size: 14px; line-height: 1.55; color: #5F6168; }

/* --- Live projects --------------------------------------------------------- */
.cz-project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.cz-project {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    transition: background .22s ease, border-color .22s ease;
}

.cz-project:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }

.cz-project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
}

.cz-project-icon img { filter: brightness(0) invert(1); }
.cz-project-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.cz-project-desc { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* --- Tools -----------------------------------------------------------------
 * The source data carries thirteen categories, nine of which hold a single
 * tool. Rendered as a card per category that produced a grid of tall, mostly
 * empty boxes. These are four consolidated rows of chips instead — dense,
 * scannable, and no dead space.
 */
.cz-tools { max-width: 940px; margin: 0 auto; }

.cz-tool-row {
    padding: 26px 0;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.cz-tool-row:last-child { border-bottom: 1px solid rgba(5, 12, 54, .1); }

.cz-tool-row-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cz-tool-row-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #0D43FE;
}

.cz-tool-row-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .1);
    font-size: 12px;
    font-weight: 800;
    color: #0D43FE;
}

.cz-tool-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cz-tool-chips li {
    padding: 10px 18px;
    border: 1px solid rgba(5, 12, 54, .12);
    border-radius: 999px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #1D244A;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.cz-tool-chips li:hover {
    border-color: #0D43FE;
    color: #0D43FE;
    transform: translateY(-2px);
}

/* --- Pricing -------------------------------------------------------------- */
.vl-pricing-box-4 {
    padding: 36px 32px;
    background: #fff;
    border: 1px solid rgba(5, 12, 54, .1);
}

.vl-pricing-box-4.vl-pricing-active {
    border-color: #0D43FE;
    box-shadow: 0 18px 50px rgba(13, 67, 254, .12);
}

.vl-pricing-title { font-size: 22px; font-weight: 700; }

/* --- Utilities the theme lacks ------------------------------------------- */
.vl-legal-area h2 { margin-top: 8px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.mt-40 { margin-top: 40px; }

/* --- Services mega-menu ---------------------------------------------------
 * The theme's own .vl-mega-menu is built around its demo's fixed four-column
 * markup. This is a grid that adapts to however many categories the database
 * returns, so adding a seventh never needs a CSS change.
 *
 * Selectors here are deliberately specific. The theme styles every menu link
 * with `.vl-main-menu ul > li > a { padding: 24px 0; font-size: 18px }`, which
 * also matches the links inside this panel and made each one 73px tall — a
 * 1210px-high menu. Two classes deep beats that cleanly.
 */

/* The panel spans the header bar, not the 84px-wide list item it hangs off.
 * Anchoring to the item and centring it pushed the left edge 33px off-screen. */
.vl-header-bg-4 { position: relative; }
.vl-main-menu nav > ul > li.cz-has-mega { position: static; }

.vl-main-menu nav > ul > li.cz-has-mega .cz-mega {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    right: 0;
    width: auto;
    padding: 30px 34px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(5, 12, 54, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
    text-align: left;
}

.vl-main-menu nav > ul > li.cz-has-mega:hover .cz-mega,
.vl-main-menu nav > ul > li.cz-has-mega:focus-within .cz-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.vl-main-menu .cz-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 30px;
    align-items: start;
}

@media (min-width: 1200px) {
    .vl-main-menu .cz-mega-grid { grid-template-columns: repeat(6, 1fr); }
}

.vl-main-menu .cz-mega-heading {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(5, 12, 54, .1);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #0D43FE;
}

.vl-main-menu .cz-mega-col ul { list-style: none; margin: 0; padding: 0; }
.vl-main-menu .cz-mega-col ul > li { margin: 0; }

.vl-main-menu .cz-mega-col ul > li > a {
    display: block;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #1D244A;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.vl-main-menu .cz-mega-col ul > li > a:hover,
.vl-main-menu .cz-mega-col ul > li > a:focus-visible {
    background: rgba(13, 67, 254, .07);
    color: #0D43FE;
}

/* The theme draws an underline pseudo-element on menu links; inside the panel
 * it renders as a stray dash next to every service. */
.vl-main-menu .cz-mega-col ul > li > a::before,
.vl-main-menu .cz-mega-col ul > li > a::after { display: none; }

.vl-main-menu .cz-mega-foot {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.vl-main-menu .cz-mega-foot > a {
    padding: 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: #0D43FE;
    text-decoration: none;
}

.vl-main-menu .cz-mega-foot > a i { margin-left: 6px; }

/* The off-canvas menu clones this markup, where the grid and the hover states
 * make no sense — it is a vertical accordion driven by cliczeo.js instead. */
.vl-offcanvas-menu .cz-mega {
    position: static;
    transform: none;
    width: auto;
    padding: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vl-offcanvas-menu .cz-mega-grid { display: block; }
.vl-offcanvas-menu .cz-mega-col { margin-bottom: 18px; }
.vl-offcanvas-menu .cz-mega-foot { margin-top: 12px; }

/* --- Off-canvas menu ------------------------------------------------------
 * The cloned desktop markup arrives styled for a dark transparent header on a
 * light panel, and with the mega-menu's grid. These reset it to a readable
 * vertical accordion.
 */
.vl-offcanvas-menu nav > ul { list-style: none; margin: 0; padding: 0; }

.vl-offcanvas-menu nav > ul > li {
    position: relative;
    border-bottom: 1px solid rgba(5, 12, 54, .08);
}

.vl-offcanvas-menu nav > ul > li > a {
    display: block;
    padding: 14px 40px 14px 0;
    font-size: 17px;
    font-weight: 700;
    color: #050C36;
    text-decoration: none;
}

/* The submenu toggle cliczeo.js appends to any item that has children. */
.vl-offcanvas-menu nav .vl-menu-close {
    position: absolute;
    top: 10px;
    right: 0;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(5, 12, 54, .12);
    border-radius: 8px;
    background: transparent;
    color: #050C36;
    font-size: 13px;
    line-height: 1;
    transition: transform .2s ease;
}

.vl-offcanvas-menu nav > ul > li.active > .vl-menu-close { transform: rotate(90deg); }

/* Children start collapsed; cliczeo.js slides them open. */
.vl-offcanvas-menu nav .sub-menu,
.vl-offcanvas-menu nav .cz-mega { display: none; }

.vl-offcanvas-menu nav .sub-menu {
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 0 14px;
}

.vl-offcanvas-menu nav .sub-menu li a,
.vl-offcanvas-menu nav .cz-mega-col ul > li > a {
    display: block;
    padding: 9px 0;
    font-size: 15px;
    font-weight: 500;
    color: #1D244A;
    text-decoration: none;
}

.vl-offcanvas-menu nav .cz-mega { padding-bottom: 10px; }
.vl-offcanvas-menu nav .cz-mega-col { margin-bottom: 6px; padding-left: 14px; }

.vl-offcanvas-menu nav .cz-mega-heading {
    margin: 14px 0 4px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #0D43FE;
}

.vl-offcanvas-menu nav .cz-mega-foot {
    margin: 10px 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.vl-offcanvas-menu nav .cz-mega-foot a { font-weight: 700; color: #0D43FE; text-decoration: none; }

.vl-offcanvas-sm-title { font-size: 16px; font-weight: 800; color: #050C36; margin-bottom: 12px; }
.vl-offcanvas-contact a { color: #1D244A; text-decoration: none; }
.vl-offcanvas-contact a:hover { color: #0D43FE; }
.vl-offcanvas .mt-20 { margin-top: 20px; }

/* --- Buttons on dark backgrounds ------------------------------------------
 * The theme's .theme-btn is a gradient-TEXT button: it paints
 * `linear-gradient(90deg,#2E0797,#726EFC)` into the glyphs via
 * `background-clip: text` and `-webkit-text-fill-color: transparent`.
 *
 * That has two consequences worth knowing before touching one:
 *   1. Overriding `background` removes the gradient the text is clipped from,
 *      and the transparent text-fill is left with nothing to show — the label
 *      disappears entirely. That is what happened to the phone button on the
 *      CTA band.
 *   2. Setting `color` does nothing, because -webkit-text-fill-color wins.
 *
 * So a variant for dark backgrounds has to restore the text fill explicitly
 * rather than just recolour it.
 */
.cz-btn-ghost {
    display: inline-block;
    padding: 14px 26px;
    border: 1.5px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    -webkit-text-fill-color: #fff;   /* overrides .theme-btn's transparent fill */
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.cz-btn-ghost:hover,
.cz-btn-ghost:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.cz-btn-ghost i { margin-right: 8px; }

/* Solid white pill with dark text, for use on the gradient CTA band. */
.cz-btn-light {
    display: inline-block;
    padding: 14px 26px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #0D43FE;
    -webkit-text-fill-color: #0D43FE;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cz-btn-light:hover,
.cz-btn-light:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(5, 12, 54, .22);
    color: #0D43FE;
    -webkit-text-fill-color: #0D43FE;
}

/* ==========================================================================
   Training page
   ==========================================================================
   Self-contained (cz-tr-* / cz-*) rather than reusing the theme's service and
   pricing classes. Those carry the gradient-text button behaviour and fixed
   8px radii, and bending them for this page meant inline overrides that broke
   in exactly the way the CTA phone button did.
   -------------------------------------------------------------------------- */

/* --- Shared section furniture --------------------------------------------- */
.cz-section { padding: 96px 0; }
.cz-section-tint { background: #F4F5F8; }

.cz-section-dark {
    background: linear-gradient(135deg, #0B1033 0%, #211464 55%, #3A1E8F 100%);
    color: #fff;
}

.cz-section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }

.cz-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .09);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0D43FE;
}

.cz-eyebrow-light { background: rgba(255, 255, 255, .14); color: #fff; }

.cz-h2 {
    margin: 0 0 16px;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: #050C36;
}

.cz-h2-light { color: #fff; }

.cz-section-lead { margin: 0; font-size: 17px; line-height: 1.65; color: #5F6168; }
.cz-section-lead-light { color: rgba(255, 255, 255, .78); }

.cz-pill {
    display: inline-block;
    margin-bottom: 20px;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

/* --- Hero ------------------------------------------------------------------ */
.cz-tr-hero {
    position: relative;
    padding: 190px 0 96px;
    background: linear-gradient(135deg, #0B1033 0%, #2A1178 45%, #5038C9 100%);
    color: #fff;
    overflow: hidden;
}

/* Soft magenta bloom, echoing the gradient the brand uses elsewhere. */
.cz-tr-hero::after {
    content: "";
    position: absolute;
    top: -180px;
    right: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(187, 41, 242, .38) 0%, transparent 68%);
    pointer-events: none;
}

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

.cz-tr-hero-title {
    margin: 0 0 20px;
    font-size: clamp(34px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    color: #fff;
}

.cz-tr-hero-lead {
    max-width: 34rem;
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .84);
}

.cz-tr-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.cz-tr-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.cz-tr-proof-item strong {
    display: block;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.cz-tr-proof-item span {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .62);
}

.cz-tr-hero-art { position: relative; padding-left: 28px; }

.cz-tr-hero-art img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(5, 12, 54, .4);
}

.cz-tr-hero-badge {
    position: absolute;
    left: 0;
    bottom: 34px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(5, 12, 54, .26);
    text-align: center;
}

.cz-tr-hero-badge strong { display: block; font-size: 30px; font-weight: 800; line-height: 1; color: #0D43FE; }
.cz-tr-hero-badge span { display: block; margin-top: 5px; max-width: 96px; font-size: 12px; line-height: 1.35; color: #5F6168; }

/* --- Curriculum phases ----------------------------------------------------- */
.cz-phase {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 44px;
    padding: 44px 0;
    border-top: 1px solid rgba(5, 12, 54, .1);
}

.cz-phase:last-child { border-bottom: 1px solid rgba(5, 12, 54, .1); }

.cz-phase-side { position: sticky; top: 110px; align-self: start; }

.cz-phase-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #BB29F2;
}

.cz-phase-title { margin: 0 0 12px; font-size: 26px; font-weight: 800; line-height: 1.2; color: #050C36; }
.cz-phase-summary { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #5F6168; }

.cz-phase-count {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .08);
    font-size: 12px;
    font-weight: 700;
    color: #0D43FE;
}

.cz-phase-modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.cz-module {
    display: flex;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(5, 12, 54, .09);
    border-radius: 14px;
    background: #fff;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.cz-module:hover {
    border-color: rgba(13, 67, 254, .38);
    box-shadow: 0 14px 34px rgba(5, 12, 54, .08);
    transform: translateY(-2px);
}

.cz-module-num {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    color: rgba(13, 67, 254, .32);
}

.cz-module-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #050C36; }
.cz-module-desc { margin: 0; font-size: 14px; line-height: 1.55; color: #5F6168; }

/* --- Live projects --------------------------------------------------------- */
.cz-project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.cz-project {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    transition: background .22s ease, border-color .22s ease;
}

.cz-project:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }

.cz-project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
}

.cz-project-icon img { filter: brightness(0) invert(1); }
.cz-project-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.cz-project-desc { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* --- Tools ----------------------------------------------------------------- */
.cz-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }

.cz-tool-group {
    padding: 24px 22px;
    border: 1px solid rgba(5, 12, 54, .08);
    border-radius: 14px;
    background: #fff;
}

.cz-tool-cat {
    margin: 0 0 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(5, 12, 54, .09);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0D43FE;
}

.cz-tool-group ul { list-style: none; margin: 0; padding: 0; }

.cz-tool-group li {
    padding: 7px 0;
    font-size: 15px;
    font-weight: 500;
    color: #1D244A;
}

/* --- Pricing --------------------------------------------------------------- */
.cz-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    align-items: start;
}

.cz-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 38px 32px;
    border: 1px solid rgba(5, 12, 54, .1);
    border-radius: 20px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.cz-plan:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(5, 12, 54, .1); }

.cz-plan-featured {
    border: 0;
    background: linear-gradient(150deg, #141B4D 0%, #2A1178 55%, #4B2BB8 100%);
    box-shadow: 0 26px 60px rgba(42, 17, 120, .34);
}

.cz-plan-flag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 18px;
    border-radius: 999px;
    background: linear-gradient(85deg, #0D43FE -50%, #BB29F2 90%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

.cz-plan-name { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: #050C36; }
.cz-plan-tagline { margin: 0 0 24px; font-size: 14px; line-height: 1.55; color: #5F6168; }
.cz-plan-featured .cz-plan-name { color: #fff; }
.cz-plan-featured .cz-plan-tagline { color: rgba(255, 255, 255, .75); }

.cz-plan-price { display: flex; align-items: baseline; gap: 11px; }

.cz-plan-amount { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: #050C36; }
.cz-plan-featured .cz-plan-amount { color: #fff; }

.cz-plan-was { font-size: 17px; color: #9296A4; text-decoration: line-through; }
.cz-plan-featured .cz-plan-was { color: rgba(255, 255, 255, .5); }

.cz-plan-save {
    display: inline-block;
    align-self: flex-start;
    margin-top: 13px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(158, 221, 5, .17);
    font-size: 13px;
    font-weight: 700;
    color: #4A6B00;
}

.cz-plan-featured .cz-plan-save { background: rgba(158, 221, 5, .22); color: #C7F24A; }

.cz-plan-features { list-style: none; margin: 26px 0 30px; padding: 24px 0 0; border-top: 1px solid rgba(5, 12, 54, .09); flex-grow: 1; }
.cz-plan-featured .cz-plan-features { border-top-color: rgba(255, 255, 255, .18); }

.cz-plan-features li {
    display: flex;
    gap: 11px;
    margin-bottom: 13px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #1D244A;
}

.cz-plan-featured .cz-plan-features li { color: rgba(255, 255, 255, .88); }

.cz-plan-features i { flex-shrink: 0; margin-top: 4px; font-size: 12px; color: #0D43FE; }
.cz-plan-featured .cz-plan-features i { color: #9EDD05; }

.cz-plan-cta {
    display: block;
    padding: 15px;
    border-radius: 12px;
    background: linear-gradient(85deg, #0D43FE -50%, #BB29F2 90%);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    /* .theme-btn's transparent text-fill is inherited by anything the theme
     * styles as a button; state it outright so the label cannot vanish. */
    -webkit-text-fill-color: #fff;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
}

.cz-plan-cta:hover { opacity: .92; transform: translateY(-1px); color: #fff; -webkit-text-fill-color: #fff; }

.cz-plan-cta-quiet {
    background: #050C36;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.cz-plan-note { margin: 34px 0 0; text-align: center; font-size: 15px; color: #5F6168; }
.cz-plan-note a { color: #0D43FE; font-weight: 600; }

/* --- FAQ ------------------------------------------------------------------- */
.cz-faq { max-width: 820px; margin: 0 auto; }

.cz-faq-item {
    margin-bottom: 14px;
    border: 1px solid rgba(5, 12, 54, .1);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.cz-faq .accordion-button {
    padding: 20px 24px;
    font-size: 17px;
    font-weight: 700;
    color: #050C36;
    background: #fff;
    box-shadow: none;
}

.cz-faq .accordion-button:not(.collapsed) { color: #0D43FE; background: #fff; }
.cz-faq .accordion-body { padding: 0 24px 22px; font-size: 15px; line-height: 1.7; color: #5F6168; }

/* --- Closing CTA ----------------------------------------------------------- */
.cz-tr-final {
    padding: 66px 48px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0B1033 0%, #2A1178 50%, #5038C9 100%);
    text-align: center;
    color: #fff;
}

.cz-tr-final h2 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: #fff; }
.cz-tr-final p { max-width: 36rem; margin: 0 auto 30px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.cz-tr-final .cz-tr-cta { justify-content: center; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1199px) {
    .cz-plan-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
    .cz-plan-featured { order: -1; }
}

@media (max-width: 991px) {
    .cz-section { padding: 68px 0; }
    .cz-tr-hero { padding: 150px 0 68px; }
    .cz-phase { grid-template-columns: 1fr; gap: 26px; }
    .cz-phase-side { position: static; }
    .cz-project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .cz-phase-modules { grid-template-columns: 1fr; }
    .cz-tr-cta { flex-direction: column; align-items: stretch; }
    .cz-tr-cta a { text-align: center; }
    .cz-tr-final { padding: 44px 24px; }
}

/* --- Solid buttons for light backgrounds ----------------------------------
 * The theme's .theme-btn is gradient TEXT, not a filled button: on a white
 * section it renders as a bare coloured word with a small circular icon and
 * reads as a link rather than a call to action. That is what the contact
 * form's submit looked like.
 *
 * These are real buttons. -webkit-text-fill-color is stated explicitly on each
 * because .theme-btn sets it to transparent and it beats `color`.
 */
.cz-btn-primary,
.cz-btn-outline {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cz-btn-primary {
    border: 0;
    background: linear-gradient(85deg, #0D43FE -50%, #BB29F2 90%);
    color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: 0 8px 22px rgba(13, 67, 254, .24);
}

.cz-btn-primary:hover,
.cz-btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13, 67, 254, .32);
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.cz-btn-outline {
    border: 1.5px solid rgba(5, 12, 54, .18);
    background: #fff;
    color: #050C36;
    -webkit-text-fill-color: #050C36;
}

.cz-btn-outline:hover,
.cz-btn-outline:focus-visible {
    border-color: #0D43FE;
    color: #0D43FE;
    -webkit-text-fill-color: #0D43FE;
}

.cz-btn-primary i,
.cz-btn-outline i { margin-left: 8px; font-size: 13px; }

/* Focus ring for keyboard users — the theme removes outlines globally. */
.cz-btn-primary:focus-visible,
.cz-btn-outline:focus-visible,
.cz-btn-ghost:focus-visible,
.cz-btn-light:focus-visible {
    outline: 2px solid #0D43FE;
    outline-offset: 3px;
}

/* --- Blog cards: survive a missing image ----------------------------------
 * The theme pulls the text block 100px up over the bottom of the post image
 * (`.vl-single-blog-4 { margin-top: -100px }`). That assumes the image is
 * always there and always tall. When it 404s the wrapper collapses to ~28px,
 * the negative margin drags the text above the card, and it lands on top of
 * the section heading.
 *
 * Reserving the space with aspect-ratio makes the overlap safe whatever the
 * image does, and doubles as CLS protection while it loads.
 */
.vl-single-blog-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    /* Visible when the image is absent or still loading, so the card reads as
     * intentional rather than broken. */
    background: linear-gradient(135deg, #1B1F4D 0%, #3A2597 55%, #5038C9 100%);
}

.vl-single-blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No usable image on the row at all — keep the brand mark rather than a void. */
.vl-single-blog-img.cz-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-single-blog-img.cz-no-image span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* --- Header right-hand cluster --------------------------------------------
 * Four short menu labels left large gaps either side of the bar. Rather than
 * padding the menu with items that do not need to be there, the space carries a
 * click-to-call — the shortest route to a conversation, and the thing an agency
 * visitor most often wants.
 */
.cz-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}

.cz-header-phone {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    white-space: nowrap;
}

.cz-header-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    font-size: 14px;
    color: #fff;
    transition: background .2s ease, border-color .2s ease;
}

.cz-header-phone:hover .cz-header-phone-icon {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .45);
}

.cz-header-phone-text { display: flex; flex-direction: column; line-height: 1.2; }

.cz-header-phone-text small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.cz-header-phone-text strong { font-size: 15px; font-weight: 700; color: #fff; }

/* Below 1200px the phone and the CTA start to crowd the menu. */
@media (max-width: 1199px) {
    .cz-header-phone-text { display: none; }
}

/* --- Course syllabus ------------------------------------------------------- */
.cz-mod {
    padding: 40px 0;
    border-top: 1px solid rgba(5, 12, 54, .1);
}
.cz-mod:last-of-type { border-bottom: 1px solid rgba(5, 12, 54, .1); }

.cz-mod-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; }

.cz-mod-index {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #BB29F2;
}

.cz-mod-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.2; color: #050C36; }
.cz-mod-tagline { margin: 0; font-size: 15px; color: #0D43FE; font-weight: 600; }

.cz-mod-stats { display: flex; gap: 22px; }
.cz-mod-stats span { font-size: 13px; color: #5F6168; white-space: nowrap; }
.cz-mod-stats strong { display: block; font-size: 22px; font-weight: 800; color: #050C36; line-height: 1.2; }

.cz-mod-desc { margin: 18px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.7; color: #5F6168; }

/* Which tracks include the module, and at what depth. */
.cz-mod-avail { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; }

.cz-avail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .07);
    font-size: 13.5px;
    font-weight: 600;
    color: #0D43FE;
}

.cz-avail em { font-style: normal; opacity: .72; font-weight: 500; }
.cz-avail i { font-size: 11px; }
.cz-avail-off { background: rgba(5, 12, 54, .05); color: #9296A4; }

.cz-mod-body { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; }
.cz-mod-topics h3, .cz-mod-panel h3 { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: #050C36; }

.cz-topic {
    border: 1px solid rgba(5, 12, 54, .1);
    border-radius: 12px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}

.cz-topic summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #050C36;
    list-style: none;
}

.cz-topic summary::-webkit-details-marker { display: none; }
.cz-topic[open] summary { color: #0D43FE; border-bottom: 1px solid rgba(5, 12, 54, .08); }

.cz-topic summary span {
    flex-shrink: 0;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(13, 67, 254, .1);
    font-size: 11px;
    font-weight: 800;
    color: #0D43FE;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cz-topic ul { list-style: none; margin: 0; padding: 14px 18px 18px; }
.cz-topic li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: 14.5px; line-height: 1.6; color: #5F6168; }
.cz-topic li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: rgba(13, 67, 254, .45); }

.cz-mod-panel {
    padding: 22px;
    margin-bottom: 16px;
    border: 1px solid rgba(5, 12, 54, .09);
    border-radius: 14px;
    background: #F8F9FC;
}

.cz-mod-panel-note { margin: -8px 0 14px; font-size: 12.5px; line-height: 1.5; color: #9296A4; }

.cz-teardowns { list-style: none; margin: 0; padding: 0; }
.cz-teardowns li { padding: 11px 0; border-bottom: 1px solid rgba(5, 12, 54, .07); }
.cz-teardowns li:last-child { border-bottom: 0; }
.cz-teardowns strong { display: block; font-size: 14px; color: #050C36; margin-bottom: 3px; }
.cz-teardowns span { font-size: 13px; line-height: 1.55; color: #5F6168; }

/* --- Plan comparison table ------------------------------------------------- */
.cz-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cz-compare {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(5, 12, 54, .06);
}

.cz-compare th, .cz-compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid rgba(5, 12, 54, .08); }
.cz-compare thead th { background: #050C36; color: #fff; vertical-align: top; }
.cz-compare thead th:first-child { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }

.cz-compare-plan { display: block; font-size: 15px; font-weight: 800; }
.cz-compare-price { display: block; margin-top: 5px; font-size: 20px; font-weight: 800; color: #9EDD05; }
.cz-compare-was { display: block; font-size: 13px; opacity: .55; text-decoration: line-through; }

.cz-compare tbody th { font-size: 14.5px; font-weight: 700; color: #050C36; max-width: 300px; }
.cz-compare td { text-align: center; font-size: 13.5px; }
.cz-compare td span { display: block; margin-top: 4px; color: #5F6168; }
.cz-yes i { color: #16a34a; }
.cz-no i { color: #d1d5db; }

.cz-compare-total th, .cz-compare-total td { background: #F8F9FC; font-weight: 800; color: #050C36; font-size: 16px; border-bottom: 0; }

@media (max-width: 991px) {
    .cz-mod-body { grid-template-columns: 1fr; }
}

/* --- Careers list ----------------------------------------------------------
 * A list rather than a card grid: nine roles as equal-weight cards read as one
 * undifferentiated block, and the fixed card height forced every description to
 * the same truncation. Rows scan top-to-bottom and give salary and location a
 * consistent position the eye can track.
 *
 * --accent is set per row from the slug, so a role keeps its colour as the list
 * reorders and adding one needs no CSS change.
 */
.cz-jobs { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; }

.cz-job { margin-bottom: 14px; }

.cz-job-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 28px 26px 32px;
    border: 1px solid rgba(5, 12, 54, .1);
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.cz-job-link:hover,
.cz-job-link:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 14px 36px rgba(5, 12, 54, .09);
    transform: translateY(-2px);
}

/* The colour rail is what makes each row identifiable at a glance. */
.cz-job-rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--accent);
}

.cz-job-link:hover .cz-job-rail { width: 8px; transition: width .22s ease; }

.cz-job-main { flex: 1; min-width: 0; }

.cz-job-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.cz-job-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: #050C36; }

.cz-job-salary {
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.cz-job-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.cz-job-meta > span { font-size: 13.5px; color: #5F6168; }
.cz-job-meta i { margin-right: 6px; color: var(--accent); font-size: 12px; }

.cz-job-type {
    padding: 3px 10px;
    border: 1px solid rgba(5, 12, 54, .14);
    border-radius: 999px;
    font-size: 12px !important;
    font-weight: 600;
}

.cz-job-summary {
    display: block;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5F6168;
}

.cz-job-go {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--accent);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    -webkit-text-fill-color: #fff;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .cz-job-link { flex-direction: column; align-items: stretch; gap: 16px; }
    .cz-job-go { justify-content: center; }
}

/* --- Application form ------------------------------------------------------ */
.cz-form-legend {
    margin: 34px 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(5, 12, 54, .1);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #0D43FE;
}

.cz-form-legend:first-of-type { margin-top: 0; }

.cz-field-hint { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: #9296A4; }

.vl-contact-area input[type="file"] {
    padding: 12px 14px;
    background: #F8F9FC;
    cursor: pointer;
}

.vl-contact-area input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: #050C36;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* Footer "Get in Touch" contact rows.
 *
 * The theme indents this column by 120px (style.css:6142), which the original
 * design could afford because the column held short content. Our email address
 * cannot fit in the 186px that leaves, and since it contains no spaces it is a
 * single unbreakable token: it dropped to its own line and stranded the envelope
 * icon 26px above it. The theme already removes this indent at tablet and small
 * mobile, so removing it on desktop matches its own responsive intent.
 *
 * Flex then holds the icon in a fixed-width column, so glyphs of differing
 * widths line up with each other and the value can never re-wrap under the icon.
 */
.vl-footer-widget-4 { margin-left: 0; }

.vl-footer-menu-4 ul li a {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.vl-footer-menu-4 ul li a i {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
}