/* ============================================================
   VTI Homepage 2026 — module base: tokens, theme resets, shared atoms.
   Ported from the static preview (Figma frame Option_03, 1920px canvas).
   The preview's fixed canvas + `zoom` scaling is dropped: every section is
   full-bleed and its content width comes from --vh-container.
   ============================================================ */

.vti-home {
    --vh-container: 1392px;
    --vh-blue: #0c5ed9;
    --vh-blue-hover: #076ad2;
    --vh-accent: #0c5ed9;
    --vh-brand: #1d4ed8;
    --vh-ink: #1d2939;
    --vh-text: #1d2939;
    --vh-muted: #475467;
    --vh-soft: #f2f7ff;
    --vh-line-soft: #f2f4f7;
    --vh-line: #dbeafe;
    --vh-gray: #d0d5dd;
    --vh-pad: 120px;

    position: relative;
    width: 100%;
    background-color: #fff;
    color: var(--vh-text);
    font-family: "Instrument Sans", sans-serif;
    /* The child theme sets letter-spacing/line-height on body; the design has neither. */
    letter-spacing: normal;
    line-height: normal;
}

.vti-home * {
    box-sizing: border-box;
}

/* Flatsome styles bare tags at (0,0,1); :where() would lose, so the reset is
   scoped to the module class instead. */
.vti-home :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote) {
    margin: 0;
    padding: 0;
    color: inherit;
    letter-spacing: normal;
    font-style: normal;
    border: 0;
}

/* Flatsome gives every heading width:100%, which stops it shrinking to its text. */
.vti-home :where(h1, h2, h3, h4, h5, h6) {
    width: auto;
}

/* The child theme sizes every bare <p> (20px/40px); class rules below still win. */
.vti-home :where(p, li, blockquote) {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.vti-home :where(ul, ol) {
    list-style: none;
}

.vti-home :where(li) {
    margin: 0;
}

.vti-home :where(button) {
    margin: 0;
    padding: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.vti-home :where(a) {
    color: inherit;
    text-decoration: none;
}

.vti-home :where(img) {
    max-width: 100%;
    height: auto;
    border: 0;
}

.vti-home :where(input, select, textarea) {
    margin: 0;
    box-shadow: none;
    font: inherit;
    color: inherit;
}

.vti-home :where(:focus-visible) {
    outline: 2px solid var(--vh-accent);
    outline-offset: 3px;
}

/* Flatsome's header is sticky, so anything focused must clear it. */
.vti-home :where(a, button, input, select, textarea, [tabindex]) {
    scroll-margin-top: 120px;
}

.vti-home__wrap {
    position: relative;
    width: min(var(--vh-container), calc(100% - 48px));
    margin-inline: auto;
}

.vti-home__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- shared atoms ---------- */
.vti-home__title {
    font-size: clamp(32px, 1.25rem + 2vw, 48px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -1px;
    color: var(--vh-ink);
}

.vti-home__title--center {
    text-align: center;
}

.vti-home__lead {
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--vh-muted);
}

.vti-home__eyebrow,
.vti-home__badge {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    padding: 5px 12px;
    border: 1px solid var(--vh-line-soft);
    border-radius: 9999px;
    background: var(--vh-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--vh-brand);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vti-home__eyebrow {
    letter-spacing: .14px;
}

/* Section heading: title block left, lead + button right (stacks below desktop). */
.vti-home__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px 146px;
}

.vti-home__head-title {
    flex: 0 1 830px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.vti-home__head-aside {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    text-align: right;
}

.vti-home__head--center {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.vti-home__head--center .vti-home__title {
    max-width: 800px;
}

.vti-home__head--center .vti-home__eyebrow {
    align-self: center;
}

/* A drag-and-drop Section head (sections/head.php) wraps its parts in columns;
   in a centred head the columns stack and centre like the parts themselves. */
.vti-home__head--center > :is(.vti-home__head-title, .vti-home__head-aside) {
    flex: none;
    align-items: center;
    text-align: center;
}

/* Eyebrow, title and lead stacked on the left (Service Pillar `.sec-intro`). */
.vti-home__head--left {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}

.vti-home__head--left .vti-home__eyebrow {
    align-self: flex-start;
}

.vti-home__head--left .vti-home__lead {
    color: var(--vh-muted);
}

.vti-home__head--left > :is(.vti-home__head-title, .vti-home__head-aside) {
    flex: none;
    align-items: flex-start;
    text-align: left;
}

/* A head column's Width option (sections/head.php: span out of 12, printed as
   --vh-head-col-width), side-by-side heads only. The % leaves out the column
   gap: columns adding up to 12 shrink in proportion to fit it, so their ratio holds. */
@media (min-width: 1100px) {
    .vti-home__head:not(.vti-home__head--left, .vti-home__head--center) > .vti-home__head-col--span {
        flex: 0 1 var(--vh-head-col-width);
    }
}

.vti-home__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    transition: background-color .1s linear;
}

.vti-home__btn img {
    flex: none;
    width: 20px;
    height: 20px;
}

.vti-home__btn:active {
    transform: translateY(1px);
}

.vti-home__btn--primary {
    background: var(--vh-blue);
    color: #fff;
}

.vti-home__btn--primary:hover,
.vti-home__btn--primary:focus-visible {
    background: var(--vh-blue-hover);
    color: #fff;
}

.vti-home__btn--lg {
    padding: 16px 20px;
}

.vti-home__linkbtn {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--vh-blue);
    white-space: nowrap;
    transition: background-color .1s linear;
}

.vti-home__linkbtn img {
    flex: none;
    width: 20px;
    height: 20px;
}

.vti-home__linkbtn:hover,
.vti-home__linkbtn:focus-visible {
    background: var(--vh-line-soft);
    color: var(--vh-blue);
}

/* Play button centred over a photo (positioned parent). What a click does is up to
   the section's JS (testimonials: popup, Product Detail: plays in place). */
.vti-home__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    padding: 8px;
    border-radius: 40px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s ease-in-out;
}

.vti-home__play:hover,
.vti-home__play:focus-visible {
    background: rgba(255, 255, 255, .7);
}

/* Infinite logo strip. The track holds the item list twice (second copy
   aria-hidden), so -50% lands exactly on the start of the copy. */
.vti-home__marquee {
    position: relative;
    overflow: hidden;
}

.vti-home__marquee::before,
.vti-home__marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: var(--vh-marquee-fade, 81px);
    pointer-events: none;
}

.vti-home__marquee::before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--vh-marquee-bg, #fff));
}

.vti-home__marquee::after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--vh-marquee-bg, #fff));
}

.vti-home__marquee-track {
    display: flex;
    width: max-content;
    animation: vti-home-marquee var(--vh-marquee-duration, 30s) linear infinite;
}

.vti-home__marquee--reverse .vti-home__marquee-track {
    animation-direction: reverse;
}

@keyframes vti-home-marquee {
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-home__marquee-track {
        animation: none;
    }
}

/* Per-image "Link URL (VTI)" (vti_fse_image_link): no box of its own, so the
   logo keeps the exact layout it has without the link. */
.vti-fse-image-link {
    display: contents;
}

/* Post card shared by news + insights (vti_fse_vti_home_post_card). */
.vti-home__posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.vti-home__post {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--vh-line);
    border-radius: 12px;
    background: transparent;
    color: var(--vh-ink);
    overflow: hidden;
}

.vti-home__post-media {
    position: relative;
    display: block;
    height: 212px;
    border-radius: 8px;
    overflow: hidden;
}

.vti-home__post-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 50, 150, .1);
}

.vti-home__post-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease-in-out;
}

.vti-home__post:hover .vti-home__post-img {
    transform: scale(1.03);
}

.vti-home__post-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

.vti-home__post-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.vti-home__post:focus-visible .vti-home__post-title {
    color: var(--vh-blue);
}

.vti-home__post-excerpt {
    display: -webkit-box;
    margin-top: -8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
}

@media (prefers-reduced-motion: reduce) {
    .vti-home__post-img {
        transition: none;
    }
}

/* Editor-only hint (e.g. a post section with no posts); visitors get nothing. */
.vti-home__notice {
    padding: 12px 16px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    font-size: 14px;
    color: #334155;
    background: #f8fafc;
}

@media (max-width: 1099px) {
    .vti-home {
        --vh-pad: 80px;
    }

    .vti-home__head {
        flex-direction: column;
        align-items: stretch;
    }

    .vti-home__head-title {
        flex-basis: auto;
    }

    .vti-home__head-aside {
        align-items: flex-start;
        text-align: left;
    }

    .vti-home__head--center {
        align-items: center;
    }

    .vti-home__head--left {
        align-items: flex-start;
    }

    .vti-home__posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 699px) {
    .vti-home {
        --vh-pad: 60px;
    }

    .vti-home__wrap {
        width: calc(100% - 48px);
    }

    .vti-home__title {
        font-size: 24px;
        line-height: 32px;
        color: #18181b;
    }

    .vti-home__lead {
        font-size: 14px;
        line-height: 20px;
        color: #52525b;
    }

    .vti-home__eyebrow {
        padding: 4px 12px;
        font-size: 12px;
        letter-spacing: .12px;
    }

    .vti-home__badge {
        padding: 1px 8px;
        font-size: 12px;
        line-height: 16px;
    }

    .vti-home__btn,
    .vti-home__btn--lg {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* 20px tall; an invisible 44px hit area keeps the touch target without
       moving the layout. */
    .vti-home__linkbtn {
        position: relative;
        font-size: 14px;
        line-height: 20px;
    }

    .vti-home__linkbtn::after {
        content: "";
        position: absolute;
        inset: -12px 0;
    }

    .vti-home__linkbtn img {
        width: 16px;
        height: 16px;
    }

    .vti-home__head {
        gap: 16px;
    }

    .vti-home__head-aside {
        gap: 20px;
    }

    .vti-home__posts {
        grid-template-columns: minmax(0, 1fr);
    }

    .vti-home__post {
        gap: 8px;
        padding: 16px;
    }

    .vti-home__post-media {
        height: 161px;
    }

    .vti-home__post-badge {
        top: 8.58px;
        left: 8.58px;
    }

    .vti-home__post-title {
        font-size: 20px;
        line-height: 28px;
    }

    .vti-home__post-excerpt {
        margin-top: 0;
        font-size: 14px;
        line-height: 20px;
    }
}

/* Section: hero */

.vti-home-hero {
    position: relative;
    background: #fff;
    /* Preview's `.hero` has no padding at all: `__top`'s own height and the
       chat card's own padding carry every bit of vertical spacing. */
}

/* ---------- top band: crossfading slides + copy + tabs + certs ---------- */
.vti-home-hero__top {
    position: relative;
    /* Keeps every z-index below local to this band, so the chat card (a later,
       unpositioned sibling) can simply paint over its whole tail without the
       tab/text/cert z-index values leaking out and fighting it. */
    isolation: isolate;
    overflow: hidden;
    /* Grows past the preview's 960px when the copy wraps longer (vi/ko): the
       bottom padding keeps the tabs clear of the 150px the chat card covers
       plus the preview's 56px gap, so they never slide under it. */
    min-height: 960px;
    padding-bottom: 206px;
    /* Pulled up under the chat card exactly like the preview's `.hero__top`. */
    margin-bottom: -150px;
}

/* Preview's `.hero__fade`: washes the bottom of the photo band to white before
   the chat card overlaps it. A pseudo element instead of an extra img/div. */
.vti-home-hero__top::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 47% 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, .95) 100%);
}

/* Optional decorative glow behind the 3D graphic (preview's `.hero__glow`).
   Percentages are the preview's own left/top/width against its 1920x996
   stage; hidden below 1100 where `__top` no longer has a fixed height. */
.vti-home-hero__glow {
    position: absolute;
    z-index: 1;
    left: 61%;
    top: -33%;
    width: 45%;
    max-width: 857px;
    aspect-ratio: 1 / 1;
    pointer-events: none;
}

/* `.vti-home__wrap` sets `position: relative`; that would make it the
   containing block for `.vti-home-hero__slide` instead of `__top`, so it is
   cancelled here (see the slide/tab notes below). */
.vti-home-hero__inner {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    grid-template-areas:
        "text certs"
        "tabs tabs";
    column-gap: 24px;
    row-gap: 64px;
    align-items: start;
    padding-top: 200px;
}

/* ---------- copy ---------- */
.vti-home-hero__text {
    grid-area: text;
    position: relative;
    z-index: 2;
    /* Every slide's copy shares this one cell, so the height is the tallest
       slide's (no layout shift when the text changes). */
    display: grid;
    max-width: 665px;
}

.vti-home-hero__copy {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    opacity: 0;
    visibility: hidden;
    /* Same fade as the slide photo; visibility flips after it ends. */
    transition: opacity .3s ease-in, visibility 0s linear .3s;
}

.vti-home-hero__copy.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Picked button colour comes from the inline `--vh-hero-btn-bg` on the copy
   block; hover darkens it by the mix below (OQ-018, change here). */
.vti-home-hero__cta.vti-home__btn--primary {
    --vh-hero-btn-bg-hover: color-mix(in srgb, var(--vh-hero-btn-bg) 85%, #000);
    background: var(--vh-hero-btn-bg, var(--vh-blue));
}

.vti-home-hero__cta.vti-home__btn--primary:hover,
.vti-home-hero__cta.vti-home__btn--primary:focus-visible {
    background: var(--vh-hero-btn-bg-hover, var(--vh-blue-hover));
}

.vti-home-hero__title {
    font-size: 60px;
    font-weight: 500;
    line-height: 80px;
    color: var(--vh-ink);
}

.vti-home-hero__accent {
    color: var(--vh-accent);
}

.vti-home-hero__lead {
    margin-top: 16px;
}

/* ---------- tabs (button + slide image pairs, printed by each child) ---------- */
.vti-home-hero__tabs {
    grid-area: tabs;
    /* Stays out of the positioning chain on purpose: the slide images inside
       it are absolutely positioned against `__top`, not against this row. */
    position: static;
    display: flex;
    gap: 16px;
}

.vti-home-hero__tab {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.vti-home-hero__tab-img {
    display: block;
    width: 160px;
    height: 80px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .4);
    object-fit: cover;
}

.vti-home-hero__tab.is-active .vti-home-hero__tab-img {
    border: 2px solid #6b98f8;
}

.vti-home-hero__tab-label {
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
    white-space: nowrap;
}

.vti-home-hero__tab::after {
    content: "";
    display: block;
    width: 160px;
    height: 2px;
}

.vti-home-hero__tab.is-active::after {
    background: linear-gradient(90deg, #a3c9f9 45%, #2a7ffe 149%);
}

/* The full-bleed background photo. Lives inside `__tabs` (a non-positioned
   ancestor) so its containing block is `__top`, two levels up. */
.vti-home-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .3s ease-in;
    /* It is a descendant of `__tabs`: without this, hovering the photo would
       count as hovering the tab strip and pause the autoplay (vti-home.js). */
    pointer-events: none;
}

.vti-home-hero__slide.is-active {
    opacity: 1;
}

/* ---------- certs ---------- */
.vti-home-hero__certs {
    grid-area: certs;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 140px);
    gap: 8px;
    width: 288px;
}

.vti-home-hero__cert {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 80px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .4);
    border: 1px solid #fff;
}

.vti-home-hero__cert-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Chat card hidden (Hero's "Show chat card" off): nothing overlaps the band,
   so the next section starts below it instead of 150/100/64px up into it. */
.vti-home-hero--no-chat .vti-home-hero__top {
    margin-bottom: 0;
}

/* ---------- chat card ---------- */
.vti-home-hero__chat {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 60px 80px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid #fff;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

/* Gradients standing in for the preview's blurred/filtered blob and glow (no
   `filter`); they drift like the challenge preview's `.challenge__blob--blue`
   / `--cyan` (Figma motion, 8.43s loop). */
.vti-home-hero__chat-blob {
    position: absolute;
    left: -120px;
    top: -60px;
    width: 380px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66, 104, 255, .16), rgba(66, 104, 255, 0) 65%);
    pointer-events: none;
    animation: vti-home-chat-blob-move 8.428571s ease-in-out infinite, vti-home-chat-blob-scale 8.428571s ease-in-out infinite;
}

.vti-home-hero__chat-glow {
    position: absolute;
    right: -60px;
    top: -90px;
    width: 380px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(60% 60% at 55% 55%, #c5f3ff, rgba(197, 243, 255, 0) 72%);
    pointer-events: none;
    animation: vti-home-chat-glow-move 8.428571s ease-in-out infinite, vti-home-chat-glow-scale 8.428571s ease-in-out infinite;
}

@keyframes vti-home-chat-blob-move {
    0%, 94.915%, 100% { translate: 0 0; }
    23.729% { translate: 180px -160px; }
    47.458% { translate: 250px 100px; }
    71.186% { translate: 100px 180px; }
}

@keyframes vti-home-chat-blob-scale {
    0%, 94.915%, 100% { scale: 1; }
    35.593% { scale: 1.2; }
    71.186% { scale: .85; }
}

@keyframes vti-home-chat-glow-move {
    0%, 94.915%, 100% { translate: 0 0; }
    23.729% { translate: -200px 150px; }
    47.458% { translate: -100px -120px; }
    71.186% { translate: 150px -180px; }
}

@keyframes vti-home-chat-glow-scale {
    0%, 94.915%, 100% { scale: 1; }
    47.458% { scale: 1.15; }
}

.vti-home-hero__chat-title {
    position: relative;
    width: 708px;
    max-width: 100%;
    text-align: center;
    font-size: 48px;
    font-weight: 500;
    line-height: 68px;
    letter-spacing: -1px;
    color: var(--vh-ink);
}

.vti-home-hero__chat-accent {
    color: var(--vh-accent);
}

.vti-home-hero__chat-box {
    /* position:relative (no z-index needed): being later in the DOM than the
       blob/glow decoration already paints it above them (both stay z-index
       auto), the same trick the preview uses for `.chat h2` / `.chat__body`. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    /* It is a <label>: reset Flatsome's bold weight, colour and bottom margin. */
    margin: 0;
    font-weight: 400;
    color: #1d2939;
    width: 792px;
    max-width: 100%;
    padding: 12px 16px;
    border: 1.8px solid #1947ff;
    border-radius: 100px;
    background: linear-gradient(201.6deg, rgba(255, 255, 255, .4) 23.5%, rgba(224, 232, 255, .5) 158%);
    box-shadow: 0 13.6px 13.6px rgba(218, 232, 246, .31), 0 30px 30px rgba(218, 232, 246, .18);
}

.vti-home-hero__chat-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 4px 9px rgba(18, 109, 251, .12);
    object-fit: cover;
}

/* Flatsome styles input[type="text"] at (0,1,1); the box class lifts this above it. */
.vti-home-hero__chat-box .vti-home-hero__chat-field {
    height: auto;
    padding: 0;
    box-shadow: none;
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--vh-text);
}

.vti-home-hero__chat-field::placeholder {
    color: #737373;
}

/* Flatsome's input[type="text"]:focus (0,2,1) adds a grey glow, a background and #333 text;
   the pill already shows focus (darker placeholder, send button at full opacity). */
.vti-home-hero__chat-box .vti-home-hero__chat-field:focus {
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--vh-text);
}

.vti-home-hero__chat-box:focus-within .vti-home-hero__chat-field::placeholder {
    color: var(--vh-text);
}

.vti-home-hero__chat-send {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(-44.9deg, #0c5ed9 3.2%, #4d4dfb 128%);
    opacity: .5;
    transition: opacity .1s linear;
}

.vti-home-hero__chat-box:focus-within .vti-home-hero__chat-send {
    opacity: 1;
}

.vti-home-hero__chat-send img {
    width: 20px;
    height: 20px;
}

/* Chips line up under the input's left edge, 16px below it (the card gap is 40px). */
.vti-home-hero__chips {
    margin-top: -24px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 792px;
    max-width: 100%;
}

.vti-home-hero__chip {
    height: 44px;
    padding: 8px 12px;
    border-radius: 9999px;
    border: 1px solid var(--vh-line-soft);
    background: #fcfcfd;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    transition: color .1s linear;
}

.vti-home-hero__chip:hover {
    color: #404040;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .vti-home-hero__slide,
    .vti-home-hero__copy {
        transition: none;
    }

    .vti-home-hero__chat-blob,
    .vti-home-hero__chat-glow {
        animation: none;
    }
}

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
    .vti-home-hero__top {
        min-height: 0;
        padding-bottom: 160px;
        margin-bottom: -100px;
    }

    .vti-home-hero__glow {
        display: none;
    }

    .vti-home-hero__inner {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding-top: 140px;
    }

    .vti-home-hero__title {
        font-size: 48px;
        line-height: 64px;
    }

    /* Certs drop out of the pinned top-right column and flow under the tabs
       as a single wrapping row instead of a fixed 2x2 block. */
    .vti-home-hero__certs {
        display: flex;
        flex-wrap: wrap;
        width: auto;
    }

    .vti-home-hero__chat {
        padding: 40px 32px;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 699px) {
    .vti-home-hero__top {
        padding-bottom: 80px;
        margin-bottom: -64px;
    }

    /* Replaces the desktop fade: decorative photo from 62px down with a white
       fade over its last 197px (preview's `.hero__top::after`). */
    .vti-home-hero__top::after {
        inset: 62px 0 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0) 7.98%, rgba(255, 255, 255, .95)) bottom / 100% 197px no-repeat,
            url("../images/hero-mobile-bg.webp") top / cover;
    }

    /* The desktop 1920x960 frame scaled by the preview's .5176 stage: 994x497,
       62px down, framed so the right-hand artwork shows. __top clips the rest. */
    .vti-home-hero__slide {
        inset: 62px auto auto calc(50% - 549.5px);
        width: 994px;
        max-width: none;
        height: 497px;
    }

    .vti-home-hero__inner {
        gap: 24px;
        padding-top: 120px;
    }

    .vti-home-hero__copy {
        gap: 16px;
    }

    .vti-home-hero__title {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -.5px;
        color: #222;
    }

    .vti-home-hero__lead {
        font-size: 16px;
        line-height: 24px;
        color: rgba(0, 0, 0, .7);
    }

    .vti-home-hero__lead br {
        display: none;
    }

    /* Slide images stay (they are absolutely positioned inside `__tabs`), but
       the tab buttons and chips are not part of the mobile design. */
    .vti-home-hero__tab,
    .vti-home-hero__chips {
        display: none;
    }

    /* The now-empty tab row must not add a flex gap of its own. */
    .vti-home-hero__tabs {
        margin-top: -24px;
    }

    .vti-home-hero__certs {
        flex-wrap: nowrap;
        gap: 0;
        width: 100%;
    }

    .vti-home-hero__cert {
        width: 70px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .vti-home-hero__cert-img {
        max-width: 58px;
        max-height: 30px;
    }

    .vti-home-hero__chat {
        padding: 30px 16px;
        gap: 24px;
    }

    .vti-home-hero__chat-title {
        font-size: 24px;
        line-height: 32px;
        color: #18181b;
    }

    .vti-home-hero__chat-box {
        width: 100%;
        padding: 5px 12px;
    }

    .vti-home-hero__chat-avatar,
    .vti-home-hero__chat-send {
        width: 32px;
        height: 32px;
    }

    .vti-home-hero__chat-send img {
        width: 16px;
        height: 16px;
    }

    .vti-home-hero__chat-box .vti-home-hero__chat-field {
        font-size: 14px;
        line-height: 20px;
    }
}
/* Section: customers */

.vti-home-customers {
    padding: var(--vh-pad) 0;
}

.vti-home-customers__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Decorative blob behind the head. The section root stays overflow:visible
   (base rule), so this wrapper — not the section — clips it to the section's
   own width and prevents horizontal page overflow at any viewport size. */
.vti-home-customers__glow {
    position: absolute;
    left: 0;
    right: 0;
    top: -660px;
    height: 1213px;
    overflow: clip;
    pointer-events: none;
}

.vti-home-customers__glow-img {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1326px;
    max-width: none;
    height: 1213px;
    transform: translateX(-50%);
}

.vti-home-customers__rows {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Hover pauses only the hovered row; leaving resumes from the same spot. */
@media (hover: hover) {
    .vti-home-customers__marquee:hover .vti-home__marquee-track {
        animation-play-state: paused;
    }
}

.vti-home-customers__item {
    height: 100px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Demo logos take their box width from the width attribute, height follows the
   ratio; gallery logos use the --upload modifier below instead. */
.vti-home-customers__logo {
    display: block;
    max-width: none;
    height: auto;
}

/* ponytail: a real upload has no known crop box, so every logo fits one shared
   box at its own ratio: long wordmarks hit the width cap, compact or stacked
   logos the height cap, which keeps their visual size close. Add a per-logo
   size option if editors need exact preview parity. */
.vti-home-customers__logo--upload {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 48px;
}

@media (max-width: 1099px) {
    /* Desktop-canvas decoration: on narrow screens it reaches up into the hero
       and became the (lazy) LCP element on mobile. */
    .vti-home-customers__glow {
        display: none;
    }

    .vti-home-customers__item {
        height: 80px;
        padding: 0 28px;
    }
}

@media (max-width: 699px) {
    .vti-home-customers {
        padding-block: 40px;
    }

    .vti-home-customers__inner {
        gap: 40px;
    }

    /* Smaller ellipse, shown again on mobile (hidden at <=1099 above). */
    .vti-home-customers__glow {
        display: block;
        top: -405px;
        height: 577px;
    }

    .vti-home-customers__glow-img {
        width: 630px;
        height: 577px;
    }

    /* Rows keep their desktop sizes (100px items, 28px gap, 81px fades) and
       are halved as a whole, like the preview; logo sizes are inline per item.
       The track still holds 2 copies, so the -50% loop stays seamless. */
    .vti-home-customers__rows {
        zoom: .5;
    }

    .vti-home-customers__item {
        height: 100px;
        padding: 0 40px;
    }
}
/* Section: services */

.vti-home-services {
    background: linear-gradient(138.2deg, #fcfdff 0%, #f1f7ff 67.8%);
    padding: var(--vh-pad) 0;
}

.vti-home-services__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.vti-home-services__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vti-home-services__track::-webkit-scrollbar {
    display: none;
}

.vti-home-services__card {
    position: relative;
    flex: 1 0 300px;
    height: 460px;
    padding: 20px;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vti-home-services__card--light {
    background: linear-gradient(-29.9deg, #0a54da 5.2%, #2e75f5 94.8%);
}

.vti-home-services__card--white {
    color: #0c5ed9;
}

.vti-home-services__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    z-index: 0;
}

.vti-home-services__card-obj {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 400px;
    height: 522px;
    max-width: none;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.vti-home-services__card-obj-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.vti-home-services__card-ellipse {
    position: absolute;
    left: -85px;
    top: -332px;
    width: 858px;
    height: 858px;
    max-width: none;
    z-index: 1;
    mix-blend-mode: screen;
    pointer-events: none;
}

.vti-home-services__card-shine {
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    height: 219px;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .4) 48%, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.vti-home-services__card--white .vti-home-services__card-shine {
    background: linear-gradient(180.1deg, rgba(255, 255, 255, .8) .2%, rgba(255, 255, 255, .4) 59.2%, rgba(255, 255, 255, 0) 96.2%);
}

.vti-home-services__card-top {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vti-home-services__card-num {
    font-size: 36px;
    font-weight: 500;
    line-height: 44px;
    color: #6b98f8;
}

.vti-home-services__card--dark .vti-home-services__card-num,
.vti-home-services__card--blue .vti-home-services__card-num {
    color: #bcd1ff;
}

.vti-home-services__card-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    color: #0c5ed9;
}

.vti-home-services__card--dark .vti-home-services__card-title,
.vti-home-services__card--blue .vti-home-services__card-title {
    color: #fcfcfc;
}

/* Touch / narrow fallback: the hover overlay below is desktop-only, so the
   description + link sit here, readable straight on the card artwork. */
.vti-home-services__card-static {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.vti-home-services__card-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0c5ed9;
}

.vti-home-services__card--dark .vti-home-services__card-desc,
.vti-home-services__card--blue .vti-home-services__card-desc {
    color: rgba(255, 255, 255, .85);
}

.vti-home-services__card-more {
    align-self: flex-start;
}

.vti-home-services__card--dark .vti-home-services__card-more,
.vti-home-services__card--blue .vti-home-services__card-more {
    color: #fff;
}

.vti-home-services__card-hover {
    display: none;
}

/* Hover overlay: preview behaviour on desktop pointers, tap-to-open on phones
   (.is-open, set by initServices in vti-home.js); see the blocks below.
   Its title/desc/link colours are fixed — the overlay bg is always light, whatever
   the card variant, so they don't follow the variant overrides above. */
.vti-home-services__card-hover-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: var(--vh-ink);
}

.vti-home-services__card-hover-desc {
    margin-top: -4px;
    font-size: 18px;
    line-height: 24px;
    color: var(--vh-muted);
}

@media (hover: hover) and (min-width: 1100px), (max-width: 699px) {
    .vti-home-services__card-static {
        display: none;
    }

    .vti-home-services__card-hover {
        /* Inside the card's padding box: the card's overflow:hidden clips at that
           edge, so the preview's inset:-1px lost the gradient border to clipping. */
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 19px;
        border: 1px solid transparent;
        border-radius: 11px;
        background: linear-gradient(180deg, #fbfbfb, #e6eeff) padding-box,
            linear-gradient(180deg, #1947ff, #429aff) border-box;
        opacity: 0;
        transition: opacity .3s ease;
    }

    .vti-home-services__card.is-open .vti-home-services__card-hover {
        opacity: 1;
    }

    /* padding-box: the --light card paints its own gradient, which would otherwise
       show through the transparent border and double the hover border to 2px. */
    .vti-home-services__card.is-open {
        border-color: transparent;
        background-clip: padding-box;
    }
}

/* :hover kept off phones: a sticky touch :hover would open the card on its own
   and fight the tap-to-open state. */
@media (hover: hover) and (min-width: 1100px) {
    .vti-home-services__card:hover .vti-home-services__card-hover,
    .vti-home-services__card:focus-visible .vti-home-services__card-hover {
        opacity: 1;
    }

    .vti-home-services__card:hover,
    .vti-home-services__card:focus-visible {
        border-color: transparent;
        background-clip: padding-box;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-home-services__card-hover {
        transition: none;
    }
}

/* ---------- Tablet <=1099 ---------- */
@media (max-width: 1099px) {
    .vti-home-services__card {
        flex-basis: 300px;
        height: 420px;
    }
}

/* ---------- Mobile <=699 ---------- */
/* Figma 2968:50574: the desktop cards (artwork, number, title) stacked full
   width; the first tap opens the hover overlay (block above), the second
   follows the link. */
@media (max-width: 699px) {
    .vti-home-services__inner {
        gap: 40px;
    }

    .vti-home-services__track {
        flex-direction: column;
        gap: 20px;
        overflow: visible;
        scroll-snap-type: none;
    }

    .vti-home-services__card {
        flex: none;
        height: 460px;
        scroll-snap-align: none;
    }
}
/* Section: industries */

.vti-home-industries {
    padding: var(--vh-pad) 0;
    background: #fff;
}

.vti-home-industries__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Each child prints a `__group` wrapper holding one `__tab` button and its
   `__panel`. `display: contents` at every width drops that wrapper from
   layout so the tab and the panel become direct items of `__body` (desktop
   grid) / `__body` (tablet-mobile flex) independently of DOM order. */
.vti-home-industries__group {
    display: contents;
}

.vti-home-industries__tab {
    text-align: start;
    white-space: nowrap;
}

.vti-home-industries__panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: vti-home-industries-fade .3s ease-in-out;
}

/* Flatsome/theme resets can otherwise leave a hidden panel visible. */
.vti-home-industries__panel[hidden] {
    display: none;
}

@keyframes vti-home-industries-fade {
    from {
        opacity: 0;
    }
}

.vti-home-industries__media {
    position: relative;
    width: 100%;
    height: 330px;
    border-radius: 12px;
    overflow: hidden;
}

.vti-home-industries__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vti-home-industries__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(37, 99, 235, .1);
    pointer-events: none;
}

.vti-home-industries__media--strong::after {
    background: rgba(37, 99, 235, .2);
}

.vti-home-industries__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
    width: 100%;
    max-width: 698px;
    min-height: 32px;
}

.vti-home-industries__logos img {
    width: auto;
    max-height: 32px;
    transition: filter .2s;
}

/* Gallery logos with an editor-picked count per row, as wide as the photo above;
   mobile keeps its own 2 columns. */
@media (min-width: 700px) {
    .vti-home-industries__logos--columns {
        max-width: none;
        display: grid;
        grid-template-columns: repeat(var(--vh-logo-columns), minmax(0, 1fr));
        justify-items: center;
    }

    .vti-home-industries__logos--columns img {
        max-width: 100%;
        object-fit: contain;
    }
}

/* Product logos: equal cells that wrap onto further rows. */
.vti-home-industries__logos--products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 16px;
}

.vti-home-industries__product {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: border-color .2s, background-color .2s;
}

a.vti-home-industries__product:hover,
a.vti-home-industries__product:focus-visible {
    border-color: #2563eb;
    background: rgba(37, 99, 235, .06);
}

a.vti-home-industries__product:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.vti-home-industries__product img {
    max-width: 100%;
    object-fit: contain;
}

@media (hover: hover) {
    .vti-home-industries__product img:hover {
        filter: none;
    }

    .vti-home-industries__logos img:hover {
        filter: brightness(0) saturate(100%) invert(31%) sepia(98%) saturate(2270%) hue-rotate(211deg) brightness(93%) contrast(92%);
    }
}

.vti-home-industries__heading {
    margin-bottom: -20px; /* panel gap 24 -> 4px, as the preview's -12px on a 16px gap */
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.vti-home-industries__text {
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
}

.vti-home-industries__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: -8px; /* 16px under the text, as in the preview */
}

.vti-home-industries__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
}

.vti-home-industries__list li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- Desktop (preview geometry) ---------- */
@media (min-width: 1100px) {
    .vti-home-industries__body {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 348px;
        column-gap: 80px;
        row-gap: 0;
        overflow: clip;
        /* Room for the focus ring on a tab sitting flush against the clip edge. */
        overflow-clip-margin: 4px;
    }

    /* Top/bottom fade masking the tab list against the section background,
       like the preview's .ind-list-wrap::before/::after. */
    .vti-home-industries__body::before,
    .vti-home-industries__body::after {
        content: "";
        position: absolute;
        right: 0;
        width: 348px;
        height: 224px;
        z-index: 1;
        pointer-events: none;
    }

    .vti-home-industries__body::before {
        top: 0;
        background: linear-gradient(to top, rgba(255, 255, 255, 0), #fff);
    }

    .vti-home-industries__body::after {
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    }

    .vti-home-industries__tab {
        grid-column: 2;
        height: 44px;
        margin-bottom: 40px;
        font-size: 36px;
        font-weight: 500;
        line-height: 44px;
        letter-spacing: -.5px;
        color: var(--vh-gray);
        transition: color .3s ease, transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s;
        /* The list slides so the open tab sits at the preview's fixed position
           (286px); JS writes each tab's shift from its own row as --vh-shift. */
        transform: translateY(calc(286px + var(--vh-shift, 0) * 84px));
    }

    /* Roulette (js/vti-home.js): tabs too far from the open one fade out. */
    .vti-home-industries__tab.is-far {
        visibility: hidden;
        opacity: 0;
        transition: color .3s ease, transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s .3s;
    }

    /* A tab wrapping round the loop jumps to the other end instead of sliding
       across the list, and fades in there when it lands in view. */
    .vti-home-industries__tab.is-wrapping {
        transition: opacity .3s ease-in-out;
    }

    /* Force scroll: the body pins inside a tall track while the page scrolls
       through the first N industries; JS sets --vh-fs-height (body + N steps),
       --vh-fs-top and the is-forced class (desktop, no reduced motion only). */
    .vti-home-industries__track.is-forced {
        min-height: var(--vh-fs-height, 0);
    }

    .vti-home-industries__track.is-forced .vti-home-industries__body {
        position: sticky;
        top: var(--vh-fs-top, 96px);
    }

    .vti-home-industries__tab:hover {
        color: #98a2b3;
    }

    .vti-home-industries__tab[aria-expanded="true"] {
        color: var(--vh-ink);
    }

    .vti-home-industries__panel {
        grid-column: 1;
        grid-row: 1 / span 20;
    }

    /* Every panel stays laid out in that one grid cell: the cell keeps the
       tallest panel's height (no jump while the body is pinned), photos load
       ahead, and switching crossfades instead of blanking first. */
    .vti-home-industries__panel,
    .vti-home-industries__panel[hidden] {
        display: flex;
    }

    .vti-home-industries__panel {
        animation: none;
        transition: opacity .3s ease-in-out, visibility 0s;
    }

    .vti-home-industries__panel[hidden] {
        visibility: hidden;
        opacity: 0;
        transition: opacity .3s ease-in-out, visibility 0s .3s;
    }
}

/* ---------- Tablet / mobile: wrapping pill tabs above a single panel ---------- */
@media (max-width: 1099px) {
    .vti-home-industries__body {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .vti-home-industries__tab {
        order: 0;
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        border: 1px solid var(--vh-line-soft);
        border-radius: 9999px;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: var(--vh-muted);
    }

    .vti-home-industries__tab[aria-expanded="true"] {
        background: var(--vh-soft);
        color: var(--vh-brand);
    }

    .vti-home-industries__panel {
        order: 1;
        flex-basis: 100%;
        width: 100%;
    }
}

@media (max-width: 699px) {
    .vti-home-industries__inner {
        gap: 40px;
    }

    /* Tabs and panels are siblings (no strip wrapper), so the body is the
       horizontal scroller: tabs fill row 1 column by column, the open panel
       sits in row 2 and stays pinned (sticky) at the viewport width while the
       tab row scrolls under it. Padding keeps the focus ring from being clipped. */
    .vti-home-industries__body {
        display: grid;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        row-gap: 16px;
        column-gap: 0;
        container-type: inline-size;
        overflow-x: auto;
        scrollbar-width: none;
        margin: -6px;
        padding: 6px;
    }

    .vti-home-industries__body::-webkit-scrollbar {
        display: none;
    }

    .vti-home-industries__tab {
        grid-row: 1;
        display: block;
        padding: 4px 16px;
        border: 0;
        border-radius: 0;
        background: none;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0;
        color: #d0d5dd;
    }

    .vti-home-industries__tab:hover {
        color: #98a2b3;
    }

    .vti-home-industries__tab[aria-expanded="true"] {
        background: none;
        color: var(--vh-ink);
    }

    /* Negative end margin removes the panel's width from column-1 sizing, so
       the first tab is not stretched to the viewport width. */
    .vti-home-industries__panel {
        grid-row: 2;
        grid-column: 1;
        position: sticky;
        left: 0;
        width: 100cqw;
        margin-right: -100cqw;
        gap: 16px;
    }

    .vti-home-industries__media {
        height: auto;
        aspect-ratio: 1020 / 330;
    }

    .vti-home-industries__logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: initial;
        gap: 12px;
        min-height: 0;
        max-width: none;
    }

    .vti-home-industries__logos img {
        width: 99px;
        height: 24px;
        max-height: none;
    }

    .vti-home-industries__product img {
        width: auto;
        max-width: 100%;
        max-height: 32px;
        height: auto;
    }

    /* The fixed 99x24 box above is for the demo logos only; uploaded logos
       keep the same 2 columns but their own aspect ratio. */
    .vti-home-industries__logos--grid img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 24px;
    }

    .vti-home-industries__heading {
        margin: 4px 0 4px; /* +4 under the logos, 20px to the text (panel gap 16 + 4) */
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
    }

    .vti-home-industries__text,
    .vti-home-industries__list li {
        font-size: 14px;
        line-height: 20px;
    }

    .vti-home-industries__list {
        gap: 12px;
        margin-top: 4px;
    }

    .vti-home-industries__cta {
        margin-top: -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-home-industries__panel {
        animation: none;
    }

    .vti-home-industries__tab {
        transition: none;
    }
}

.vti-home-industries__tab-label--mobile {
    display: none;
}

@media (max-width: 699px) {
    /* The one mobile heading the design keeps in the desktop ink. */
    .vti-home-industries .vti-home__title {
        color: var(--vh-ink);
    }

    .vti-home-industries__tab-label--desktop {
        display: none;
    }

    .vti-home-industries__tab-label--mobile {
        display: inline;
    }
}

/* Section: cases */

.vti-home-cases {
    padding: 0 0 var(--vh-pad);
    background: #fff;
}

.vti-home-cases__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.vti-home-cases__row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.vti-home-cases__card {
    flex: 0 0 140px;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}

.vti-home-cases__card.is-open {
    flex: 1 1 auto;
    cursor: default;
}

.vti-home-cases__media {
    position: relative;
    height: 474px;
    padding: 40px 20px;
    border-radius: 12px;
    overflow: hidden;
}

.vti-home-cases__card.is-open .vti-home-cases__media {
    border-radius: 16px;
}

.vti-home-cases__bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop: collapsed cards crop the backdrop by their distance from the open
   card (JS sets data-vh-pos), per Figma "CUSTOMER RESULTS". Right of it:
   +1 cover, +2/+3 the Figma stretch crops (x .577/.760, w .2008, y .042-1).
   Left of it (design mock with card 4 open): -1 cover, -2/-3 the image at
   1140x495px, shifted 8px/194px left. Farther cards stay on cover. */
@media (min-width: 1100px) {
    .vti-home-cases__card[data-vh-pos="2"] .vti-home-cases__bg,
    .vti-home-cases__card[data-vh-pos="3"] .vti-home-cases__bg,
    .vti-home-cases__card[data-vh-pos="-2"] .vti-home-cases__bg,
    .vti-home-cases__card[data-vh-pos="-3"] .vti-home-cases__bg {
        right: auto;
        bottom: auto;
        max-width: none;
        object-fit: fill;
    }

    .vti-home-cases__card[data-vh-pos="2"] .vti-home-cases__bg,
    .vti-home-cases__card[data-vh-pos="3"] .vti-home-cases__bg {
        top: -4.4%;
        width: 498.02%;
        height: 104.4%;
    }

    .vti-home-cases__card[data-vh-pos="2"] .vti-home-cases__bg {
        left: -287.28%;
    }

    .vti-home-cases__card[data-vh-pos="3"] .vti-home-cases__bg {
        left: -378.65%;
    }

    .vti-home-cases__card[data-vh-pos="-2"] .vti-home-cases__bg,
    .vti-home-cases__card[data-vh-pos="-3"] .vti-home-cases__bg {
        top: -6px;
        width: 1140px;
        height: 495px;
    }

    .vti-home-cases__card[data-vh-pos="-2"] .vti-home-cases__bg {
        left: -8px;
    }

    .vti-home-cases__card[data-vh-pos="-3"] .vti-home-cases__bg {
        left: -194px;
    }
}

/* Wash covers the top ~74% of the media, matching the 351/474px preview ratio. */
.vti-home-cases__tint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 74%;
    background: linear-gradient(to bottom, #8ec4fd, rgba(7, 129, 254, 0));
}

.vti-home-cases__badges {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.vti-home-cases__card.is-open .vti-home-cases__badges {
    flex-direction: row;
}

/* Centered "screen" frame; only fades in/out, never moves or resizes.
   Preview blurs the backdrop here (backdrop-filter); dropped for perf on an
   element that mostly sits under the opaque screenshot anyway. */
.vti-home-cases__frame {
    position: absolute;
    left: 50%;
    top: 127px;
    transform: translateX(-50%);
    width: 640px;
    height: 347px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, .14);
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.vti-home-cases__card.is-open .vti-home-cases__frame {
    opacity: 1;
}

.vti-home-cases__screen {
    display: block;
    width: 100%;
    height: 335px;
    border-radius: 8px;
    background: #fff;
    object-fit: cover;
    object-position: top;
}

.vti-home-cases__info {
    display: flex;
    align-items: flex-end;
    gap: 80px;
    height: 0;
    padding: 24px 20px 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease-in-out;
}

.vti-home-cases__info .vti-home__linkbtn {
    align-self: flex-end;
    pointer-events: auto;
}

.vti-home-cases__card.is-open .vti-home-cases__info {
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
}

.vti-home-cases__text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vti-home-cases__title {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vti-home-cases__desc {
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .vti-home-cases__frame,
    .vti-home-cases__info {
        transition: none;
    }
}

/* Desktop (>=1100px) uses the flex row declared above. */

/* Tablet: 2-column grid; every card renders "open" regardless of `.is-open`
   (no hover/expand interaction below desktop). */
@media (max-width: 1099px) {
    .vti-home-cases__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .vti-home-cases__card {
        cursor: default;
    }

    .vti-home-cases__media {
        height: 360px;
    }

    .vti-home-cases__badges {
        flex-direction: row;
    }

    .vti-home-cases__frame {
        top: 110px;
        width: 88%;
        /* Fixed heights so frame + screen reach exactly to the media's bottom
           edge, same proportion as the 127/347/474 desktop numbers. */
        height: 250px;
        opacity: 1;
    }

    .vti-home-cases__screen {
        height: 226px;
        object-position: left top; /* the screenshot's left edge carries its headline */
    }

    .vti-home-cases__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .vti-home-cases__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        height: auto;
        overflow: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .vti-home-cases__info .vti-home__linkbtn {
        align-self: flex-start;
    }
}

@media (max-width: 699px) {
    .vti-home-cases__inner {
        gap: 40px;
    }

    /* Header button hugs its content instead of stretching. */
    .vti-home-cases__inner .vti-home__head-aside {
        flex: 0 0 auto;
        align-self: flex-start;
    }

    /* Native swipe slider: the row bleeds into the 24px gutters and each card
       snaps to the left edge, leaving the next one peeking in. */
    .vti-home-cases__row {
        display: flex;
        align-items: stretch;
        gap: 16px;
        margin-inline: -24px;
        padding-inline: 24px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 24px;
        scrollbar-width: none;
    }

    .vti-home-cases__row::-webkit-scrollbar {
        display: none;
    }

    .vti-home-cases__card,
    .vti-home-cases__card.is-open {
        flex: 0 0 calc(100% - 32px);
        scroll-snap-align: start;
    }

    .vti-home-cases__media,
    .vti-home-cases__card.is-open .vti-home-cases__media {
        height: 218px;
        padding: 8px;
        border-radius: 12px;
    }

    .vti-home-cases__tint {
        height: 137px;
    }

    .vti-home-cases__frame {
        top: 42px;
        width: 249px;
        height: 176px;
        padding: 4.67px;
        border-radius: 4.67px 4.67px 0 0;
        backdrop-filter: blur(1.95px);
        -webkit-backdrop-filter: blur(1.95px);
    }

    .vti-home-cases__screen {
        height: 171px;
        border-radius: 3px;
    }

    .vti-home-cases__info {
        gap: 16px;
        padding: 16px 8px 0;
    }

    .vti-home-cases__title {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -.2px;
        display: block;
        overflow: visible;
    }

    .vti-home-cases__desc {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -.14px;
        display: block;
        overflow: visible;
    }

    /* Mobile layout "Vertical list": the cards stack full width instead of swiping. */
    .vti-home-cases--mobile-stack .vti-home-cases__row {
        flex-direction: column;
        gap: 20px;
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .vti-home-cases--mobile-stack .vti-home-cases__card,
    .vti-home-cases--mobile-stack .vti-home-cases__card.is-open {
        flex: none;
    }
}
/* Section: about */
/* Ported from preview index.html 462-512 / styles.css 292-316. Head uses the
   shared .vti-home__head atom as-is; only the stats card + awards marquee are
   section-specific. No v2 reveal JS / is-reveal classes — pure CSS. */
.vti-home-about {
    position: relative;
    overflow: hidden;
    padding: var(--vh-pad) 0;
    background: linear-gradient(134.3deg, #fcfdff 0%, #f1f7ff 67.8%);
}

/* Decorative blurred-blob effect (assets/68668.svg, 1.6KB). Reproduces the
   preview's fixed 1920px design canvas centred over the section; the section's
   own overflow:hidden clips whatever spills past the real viewport width. */
.vti-home-about__effect {
    position: absolute;
    top: -138px;
    left: calc(50% - 1158px);
    width: 2285px;
    height: 1547px;
    pointer-events: none;
}

.vti-home-about__effect img {
    display: block;
    width: 100%;
    height: 100%;
}

.vti-home-about__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* ---------- stats card ---------- */
.vti-home-about__card {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 64px 80px;
    border: 1.5px solid #fcfcfc;
    border-radius: 20px;
    background: rgba(255, 255, 255, .8);
    /* No backdrop-filter: the section behind is a flat gradient, not moving
       content, so blur would only cost paint time for no visible gain. */
    box-shadow: 0 2px 20px rgba(219, 234, 254, .1);
}

.vti-home-about__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 64px;
}

.vti-home-about__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* ---------- rolling counter ---------- */
.vti-home-about__counter {
    height: 80px;
    overflow: hidden;
}

.vti-home-about__roll {
    --vh-about-roll-line: 80px;
    --vh-about-roll-gap: 24px;
    display: flex;
    flex-direction: column;
    gap: var(--vh-about-roll-gap);
    /* Loop length from the VtiHomeAbout option (inline on the section). */
    animation: vti-home-about-roll var(--vh-about-roll-duration, 7s) linear infinite;
}

.vti-home-about__roll span {
    display: block;
    font-weight: 500;
    font-size: 60px;
    line-height: var(--vh-about-roll-line);
    white-space: nowrap;
}

@keyframes vti-home-about-roll {
    0% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    }

    16.5%,
    100% {
        transform: translateY(calc(-4 * (var(--vh-about-roll-line) + var(--vh-about-roll-gap))));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vti-home-about__roll {
        animation: none;
        /* Land on the 5th (final) span instead of freezing mid-roll. */
        transform: translateY(calc(-4 * (var(--vh-about-roll-line) + var(--vh-about-roll-gap))));
    }
}

.vti-home-about__stat-label {
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
}

/* ---------- divider + awards marquee ---------- */
.vti-home-about__divider {
    display: block;
    width: 100%;
    height: 1px;
    background: #e3e7ec;
}

.vti-home-about__recognized {
    display: flex;
    align-items: center;
    gap: 42px;
}

.vti-home-about__recognized-label {
    flex: none;
    font-size: 20px;
    line-height: 28px;
    white-space: nowrap;
}

.vti-home-about__marquee {
    flex: 1;
    min-width: 0;
    --vh-marquee-fade: 40px;
}

/* Preview's own gap/seam tuning (styles.css:314) on top of the shared track. */
.vti-home-about__marquee .vti-home__marquee-track {
    gap: 20px;
    padding-right: 20px;
}

.vti-home-about__award {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 84px;
    padding: 12px 0;
    border-radius: 8px;
    background: #f0f7ff;
}

.vti-home-about__award img {
    display: block;
    width: auto;
    height: 60px;
}

/* ---------- tablet: 700-1099 ---------- */
@media (max-width: 1099px) {
    .vti-home-about__effect {
        display: none;
    }

    .vti-home-about__card {
        padding: 40px 32px;
    }

    .vti-home-about__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vti-home-about__recognized {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
}

/* ---------- mobile: <=699 ---------- */
/* Figma 2968:50589: stats 2 cols -> divider -> one "Our Industry Partners"
   block. No separate awards row on phones, so the awards divider + strip hide
   and the partners block draws its own top line. */
@media (max-width: 699px) {
    .vti-home-about__inner {
        gap: 40px;
    }

    .vti-home-about__card {
        gap: 28px;
        padding: 40px 20px;
        border: 1px solid rgba(255, 255, 255, .6);
        border-radius: 12px;
    }

    .vti-home-about__stats {
        gap: 20px;
    }

    .vti-home-about__stat {
        align-items: flex-start;
        gap: 8px;
        text-align: left;
    }

    .vti-home-about__counter {
        height: 28px;
    }

    /* The keyframes translate by 4 x (line + gap), so the final span lands
       exactly in view as long as both vars match the new row size. */
    .vti-home-about__roll {
        --vh-about-roll-line: 28px;
        --vh-about-roll-gap: 8.4px;
    }

    .vti-home-about__roll span {
        font-size: 28px;
    }

    .vti-home-about__stat-label {
        margin: 0;
        font-size: 12px;
        line-height: 16px;
    }

    .vti-home-about__divider,
    .vti-home-about__recognized {
        display: none;
    }
}
/* Partner logo row: phones only (the design has no desktop counterpart). */
.vti-home-about__partners {
    display: none;
}

@media (max-width: 699px) {
    .vti-home-about__partners {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-top: 28px;
        border-top: 1px solid #e3e7ec;
    }

    .vti-home-about__partners-label {
        margin: 0;
        font-size: 16px;
        line-height: 24px;
        color: var(--vh-ink);
    }

    /* The default label breaks for the old side-by-side row; one line here. */
    .vti-home-about__partners-label br {
        display: none;
    }

    /* Marquee (shared atom), clipped by the card. No edge fades: the card is
       translucent, not the atom's white. */
    .vti-home-about__partners-logos {
        min-width: 0;
    }

    .vti-home-about__partners-logos::before,
    .vti-home-about__partners-logos::after {
        display: none;
    }

    /* Gap repeated as end padding so both passes are the same width (-50% loop). */
    .vti-home-about__partners-logos .vti-home__marquee-track {
        gap: 12px;
        padding-right: 12px;
    }

    /* Same tile as the desktop award box, at the Figma 107x56 size. */
    .vti-home-about__partner {
        flex: none;
        width: 107px;
        height: 56px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #f0f7ff;
    }

    .vti-home-about__partner img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 40px;
        object-fit: contain;
    }
}

/* Section: clients */

.vti-home-clients {
    position: relative;
    padding-top: var(--vh-pad);
    padding-bottom: 0;
    /* Enables `cqw` below (viewport bleed). */
    container-type: inline-size;
    /* Stacking context, so the ellipse's z-index: -1 lands above this white
       background (container-type alone does not make one), and a layer above
       the next section, so the glow's spill below the nav is not painted over. */
    z-index: 1;
}

/* Clipped sideways only: like the preview, the glow runs past the section's
   bottom edge, under the nav buttons and into the next section. */
.vti-home-clients__ellipse {
    position: absolute;
    inset: 0;
    overflow-x: clip;
    z-index: -1;
    pointer-events: none;
}

.vti-home-clients__ellipse img {
    position: absolute;
    left: calc(50% - 27px);
    top: calc(50% + 189.5px);
    width: 1326px;
    height: 1213px;
    transform: translate(-50%, -50%);
}

.vti-home-clients__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.vti-home-clients__slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.vti-home-clients__viewport {
    align-self: stretch;
    overflow: hidden;
    /* cqw excludes the scrollbar gutter that 100vw would include, so this
       bleeds the track to the real right edge without causing page scroll. */
    margin-right: calc((100% - 100cqw) / 2);
    position: relative;
}

.vti-home-clients__track {
    display: flex;
    gap: 24px;
    transform: translateX(calc(var(--vh-t, 0) * -464px));
    transition: transform .3s ease-in-out, opacity .3s ease-in-out;
}

/* Endless loop, see initClients() in vti-home.js: the jump between a card copy
   and its real card must not animate. !important: the active card's own
   transition rules are more specific. */
.vti-home-clients__track.is-jumping,
.vti-home-clients__track.is-jumping * {
    transition: none !important;
}

.vti-home-clients__card {
    flex-shrink: 0;
    width: 440px;
    height: 540px;
    padding: 20px;
    display: flex;
    gap: 20px;
    border: 1px solid var(--vh-line);
    border-radius: 32px;
    background: rgba(255, 255, 255, .7);
    opacity: .3;
    overflow: hidden;
    /* Figma Smart Animate: width, radius and opacity all tween together. */
    transition: width .3s ease-in-out, border-radius .3s ease-in-out, opacity .3s ease-in-out;
}

.vti-home-clients__card.is-active {
    width: 1074px;
    border-radius: 12px;
    opacity: 1;
}

.vti-home-clients__photo {
    position: relative;
    flex-shrink: 0;
    width: 400px;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
    transition: border-radius .3s ease-in-out;
}

.vti-home-clients__card.is-active .vti-home-clients__photo {
    border-radius: 8px;
}

.vti-home-clients__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fixed width (1074 - 20*3 - 400) so the quote doesn't reflow while the card
   width tweens; the card clips it. Hidden via visibility so the outgoing
   quote can fade out instead of vanishing. */
.vti-home-clients__content {
    flex: 0 0 614px;
    min-width: 0;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease-in-out, visibility 0s .3s;
}

.vti-home-clients__card.is-active .vti-home-clients__content {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

/* Reset the Flatsome blockquote leak (italic, border-left, padding, font-size). */
.vti-home-clients__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-size: 20px;
    line-height: 28px;
    color: var(--vh-ink);
}

.vti-home-clients__quote p {
    margin: 0;
}

.vti-home-clients__author {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
}

.vti-home-clients__avatar {
    grid-row: 1 / 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    object-position: 50% 15%;
}

.vti-home-clients__name {
    grid-column: 2;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.vti-home-clients__role {
    grid-column: 2;
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--vh-muted);
}

.vti-home-clients__nav {
    display: flex;
    gap: 8px;
}

.vti-home-clients__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--vh-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .1s linear, border-color .1s linear;
}

.vti-home-clients__nav-btn:hover,
.vti-home-clients__nav-btn:focus-visible {
    background: var(--vh-line-soft);
    border-color: var(--vh-line-soft);
}

/* Video popup (dialog appended to body, so it is not under .vti-home-clients). */
html.vti-home-modal-open {
    overflow: hidden;
}

.vti-home-video {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    align-items: center;
    justify-content: center;
}

.vti-home-video[open] {
    display: flex;
}

.vti-home-video::backdrop {
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.vti-home-video__box {
    position: relative;
    width: min(960px, 100%, calc((100vh - 32px) * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.vti-home-video__frame {
    width: 100%;
    height: 100%;
}

.vti-home-video__box iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Explicit padding / min sizes: Flatsome's global button styles would
   otherwise stretch it into a 67x70 pill. The X is two CSS bars, so it sits
   dead centre whatever the font (a "×" glyph rides high). */
.vti-home-video__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 40px;
    height: 40px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    cursor: pointer;
    transition: background-color .2s;
}

.vti-home-video__close::before,
.vti-home-video__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.vti-home-video__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.vti-home-video__close:hover,
.vti-home-video__close:focus-visible {
    background: rgba(0, 0, 0, .85);
}

@media (prefers-reduced-motion: reduce) {
    .vti-home-clients__track,
    .vti-home-clients__card,
    .vti-home-clients__photo,
    .vti-home-clients__content,
    .vti-home-clients__card.is-active .vti-home-clients__content {
        transition: none;
    }
}

/* Tablet + mobile: the preview's own <1100 CSS just hides the active card's
   content (a broken fallback for a 1920 design) — this restores a real
   photo+content layout instead of copying that bug. */
@media (max-width: 1099px) {
    .vti-home-clients__viewport {
        margin-right: 0;
    }

    .vti-home-clients__track {
        transform: none;
    }

    .vti-home-clients__card {
        display: none;
        width: 100%;
        height: auto;
        opacity: 1;
    }

    .vti-home-clients__card.is-active {
        display: flex;
        width: 100%;
    }

    .vti-home-clients__photo {
        width: 300px;
        height: 375px;
    }

    .vti-home-clients__content {
        flex: 1;
    }
}

@media (max-width: 699px) {
    .vti-home-clients__inner {
        gap: 40px;
    }

    /* Tablet block above already shows only the active card at 100% width,
       so no track translate is needed here (JS just toggles .is-active). */
    .vti-home-clients__card.is-active {
        flex-direction: column;
        gap: 16px;
        border-radius: 12px;
    }

    .vti-home-clients__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 400 / 520;
    }

    .vti-home-clients__card.is-active .vti-home-clients__content {
        padding: 0;
        gap: 16px;
    }

    .vti-home-clients__quote {
        font-size: 14px;
        line-height: 20px;
    }

    .vti-home-clients__role {
        font-size: 12px;
        line-height: 16px;
    }
}
/* Section: news */

.vti-home-news {
    padding: var(--vh-pad) 0;
}

.vti-home-news__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.vti-home-news__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vti-home-news__feature {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--vh-line);
    border-radius: 20px;
}

.vti-home-news__feature-media {
    position: relative;
    display: block;
    flex: none;
    width: 660px;
    height: 330px;
    border-radius: 12px;
    overflow: hidden;
}

.vti-home-news__feature-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 50, 150, .1);
}

.vti-home-news__feature-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vti-home-news__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

.vti-home-news__feature-body {
    flex: 1;
    min-width: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.vti-home-news__feature-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -.5px;
    margin-bottom: 10px;
    color: var(--vh-ink);
}

.vti-home-news__feature-excerpt {
    font-size: 20px;
    line-height: 28px;
    color: var(--vh-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* Tablet: feature stacks, media goes full width above the copy. */
@media (max-width: 1099px) {
    .vti-home-news__feature {
        flex-direction: column;
    }

    .vti-home-news__feature-media {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 1;
    }

    .vti-home-news__feature-title {
        font-size: 28px;
        line-height: 36px;
    }

    .vti-home-news__feature-excerpt {
        font-size: 18px;
        line-height: 28px;
    }
}

/* Mobile: the feature looks like the other post cards (same stacked card). */
@media (max-width: 699px) {
    .vti-home-news__inner {
        gap: 40px;
    }

    .vti-home-news__feature {
        gap: 8px;
        padding: 16px;
        border-radius: 12px;
    }

    .vti-home-news__feature-media {
        height: 161px;
        aspect-ratio: auto;
        border-radius: 8px;
    }

    .vti-home-news__badge {
        top: 8.58px;
        left: 8.58px;
    }

    .vti-home-news__feature-body {
        gap: 8px;
        padding: 0;
    }

    .vti-home-news__feature-title {
        margin-bottom: 8px;
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0;
    }

    .vti-home-news__feature-excerpt {
        font-size: 14px;
        line-height: 20px;
        -webkit-line-clamp: 2;
    }

    .vti-home-news__feature .vti-home__linkbtn {
        display: none;
    }
}
/* Section: insights */

.vti-home-insights {
    padding: 0 0 var(--vh-pad);
}

.vti-home-insights__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}


@media (max-width: 699px) {
    .vti-home-insights__inner {
        gap: 40px;
    }
}
/* Section: cta */

.vti-home-cta {
    padding: 0 0 var(--vh-pad);
}

.vti-home-cta__box {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 146px;
    padding: 80px;
    border-radius: 20px;
    overflow: hidden;
}

/* Four stacked decorative layers behind the copy/form; only the first is a
   content option. Wash and tint always render (they are what makes the box
   read as "glass"); the overlay photo only renders while `bg` is empty. */
.vti-home-cta__bg-img,
.vti-home-cta__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.vti-home-cta__wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(182.6deg, rgba(255, 255, 255, .7) 31.5%, rgba(255, 255, 255, 0) 61.4%);
}

.vti-home-cta__tint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 557px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(142, 196, 253, .2), rgba(7, 129, 254, 0));
}

.vti-home-cta__copy {
    position: relative;
    flex: 1 1 506px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vti-home-cta__formcard {
    position: relative;
    flex: 1 1 630px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
    border: 1px solid #fff;
    border-radius: 12px;
    background: rgba(255, 255, 255, .5);
    /* Figma "Glass" effect, Frost 43 (Figma blur radius = 2 × CSS blur). Its light,
       refraction and dispersion edge have no CSS equivalent. */
    -webkit-backdrop-filter: blur(21.5px);
    backdrop-filter: blur(21.5px);
}

.vti-home-cta__formcard-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.vti-home-cta__formcard-title {
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    color: #222;
}

.vti-home-cta__formcard-sub {
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
}

/* ---------- Contact Form 7 skin ----------
   The fields, their grouping/grid (if any) and the submit label all come
   from the chosen CF7 form; only generic CF7 markup is targeted here so any
   form dropped into the `cf7` option keeps this look. */
.vti-home-cta__form .wpcf7-form p {
    margin: 0 0 16px;
}

.vti-home-cta__form .wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    text-transform: capitalize;
    color: var(--vh-ink);
}

/* This form's own asterisk markup (a form-authored <span>, not a CF7 default);
   forms without it simply keep the label's ink colour on their "(*)" text. */
.vti-home-cta__form .wpcf7-form label .text-btn {
    color: #ef4444;
}

/* CF7 wraps every control in an inline <span>; making it a block keeps the
   100%-wide field aligned with its label regardless of surrounding grid. */
.vti-home-cta__form .wpcf7-form-control-wrap {
    display: block;
}

.vti-home-cta__form .wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.vti-home-cta__form .wpcf7-form select,
.vti-home-cta__form .wpcf7-form textarea {
    width: 100%;
    height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--vh-line);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    line-height: 24px;
    outline: none;
}

.vti-home-cta__form .wpcf7-form input::placeholder,
.vti-home-cta__form .wpcf7-form textarea::placeholder {
    color: #98a2b3;
}

.vti-home-cta__form .wpcf7-form input:focus,
.vti-home-cta__form .wpcf7-form select:focus,
.vti-home-cta__form .wpcf7-form textarea:focus {
    border-color: var(--vh-blue);
    box-shadow: 0 0 0 3px rgba(12, 94, 217, .12);
}

.vti-home-cta__form .wpcf7-form textarea {
    height: 125px;
    padding: 12px;
    resize: vertical;
}

.vti-home-cta__form .wpcf7-form select {
    appearance: none;
    background: #fff url(../images/cta-chevron.svg) no-repeat right 12px center / 16px;
}

.vti-home-cta__form .wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #ef4444;
}

.vti-home-cta__form .wpcf7-form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
}

.vti-home-cta__form .wpcf7-form .wpcf7-spinner {
    margin-left: 8px;
    vertical-align: middle;
}

/* Flatsome styles input[type=submit] with its own uppercase/margin/letter-
   spacing button look; reset those on top of the shared box properties. */
.vti-home-cta__form .wpcf7-form .wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: var(--vh-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background-color .1s linear;
}

/* Arrow icon: only a <button class="wpcf7-submit"> written in the form can show
   it — CF7's own [submit] tag is an <input>, which has no ::after. */
.vti-home-cta__form .wpcf7-form .wpcf7-submit::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: url(../images/arrow-up-right.svg) no-repeat center / contain;
}

.vti-home-cta__form .wpcf7-form .wpcf7-submit:hover,
.vti-home-cta__form .wpcf7-form .wpcf7-submit:focus-visible {
    background: var(--vh-blue-hover);
}

.vti-home-cta__form .wpcf7-form .wpcf7-submit:disabled {
    background: var(--vh-blue);
    opacity: .6;
    cursor: wait;
}

/* CF7 form 15629 (and copies of it) wraps its fields in #formContact, which the
   child theme draws as a separate panel; inside this card that panel is dropped. */
.vti-home-cta__form #formContact {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* Field layout for a CF7 form written with these classes (the homepage form).
   CF7's autop wraps the labels in <p>; display:contents keeps those out of the layout. */
.vti-home-cta__form .vti-home-cta__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.vti-home-cta__form .vti-home-cta__fields p {
    display: contents;
}

.vti-home-cta__field-row {
    display: flex;
    gap: 16px;
}

/* Beats the generic `.vti-home-cta__form .wpcf7-form label` rule (0,2,1) above. */
.vti-home-cta__form .wpcf7-form .vti-home-cta__field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    font-weight: 400;
}

/* CF7's first_as_label option has an empty value: show it as a placeholder. */
.vti-home-cta__form .vti-home-cta__field select:has(option:checked[value=""]) {
    color: #98a2b3;
}

.vti-home-cta__label {
    font-size: 14px;
    line-height: 20px;
    color: var(--vh-ink);
    text-transform: capitalize;
}

.vti-home-cta__label b {
    font-weight: 500;
    color: #ef4444;
}

@media (max-width: 1099px) {
    .vti-home-cta__box {
        flex-direction: column;
        padding: 40px;
        gap: 40px;
    }

    .vti-home-cta__copy,
    .vti-home-cta__formcard {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 699px) {
    .vti-home-cta__field-row {
        flex-direction: column;
    }

    /* Box bleeds 8px past the 24px wrap gutter (343px wide at 375). */
    .vti-home-cta__box {
        margin-inline: -8px;
        padding: 48px 24px;
        gap: 40px;
        border-radius: 12px;
    }

    .vti-home-cta__copy {
        gap: 20px;
        text-align: center;
    }

    .vti-home-cta .vti-home-cta__title {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: 0;
        color: #0f172a;
    }

    .vti-home-cta .vti-home-cta__text {
        color: #18181b;
    }

    .vti-home-cta__formcard {
        gap: 24px;
        padding: 20px 16px;
        border: 0;
        background: rgba(255, 255, 255, .6);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .vti-home-cta__formcard-head {
        gap: 6px;
    }

    .vti-home-cta__formcard-title {
        font-size: 20px;
        line-height: 28px;
    }

    .vti-home-cta__formcard-sub {
        font-size: 12px;
        line-height: 16px;
    }

    .vti-home-cta__form .vti-home-cta__fields {
        margin-bottom: 24px;
    }

    .vti-home-cta__form .wpcf7-form .wpcf7-submit {
        min-height: 48px;
        padding: 14px 20px;
        font-size: 14px;
        line-height: 20px;
    }
}