/* ==========================================================================
   Vatech Hero Section Styles
   Prefix: vth- (Vatech Hero)
   ========================================================================== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600&family=Urbanist:wght@400;500;700&display=swap');

/* ==========================================================================
   Splash Screen & Logo Animation
   ========================================================================== */
.vth-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}

.vth-splash-screen.vth-splash-active {
    opacity: 1;
    visibility: visible;
}

.vth-splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 24.28vw;
    height: 6.41vw;
    opacity: 0;
}

/* Stage 1: Logo fade in (0 - 1.6s) */
.vth-splash-logo.vth-logo-fadein {
    animation: vth-logo-entrance 1600ms ease-out forwards;
}

@keyframes vth-logo-entrance {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Stage 3: Logo fade out (3.3s - 3.5s) */
.vth-splash-logo.vth-logo-fadeout {
    animation: vth-logo-exit 300ms ease-out forwards;
}

@keyframes vth-logo-exit {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.vth-splash-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Hero Section Animation - 8 Stage Timeline
   ========================================================================== */

/* Hero hidden initially */
.vth-hero-section.vth-hero-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Animation complete - elements are in natural layout, no animations */
.vth-hero-section.vth-animation-complete .vth-carousel-main,
.vth-hero-section.vth-animation-complete .vth-slide img,
.vth-hero-section.vth-animation-complete .vth-carousel-btn,
.vth-hero-section.vth-animation-complete .vth-hero-left,
.vth-hero-section.vth-animation-complete .vth-hero-right,
.vth-hero-section.vth-animation-complete .vth-product-card,
.vth-hero-section.vth-animation-complete .vth-card-pointer,
.vth-hero-section.vth-animation-complete .vth-thumbnails,
.vth-hero-section.vth-animation-complete .vth-cta-section {
    animation: none !important;
    will-change: auto !important;
}

.vth-hero-section {
    --vth-page-side-padding: 6.3vw;
    --vth-stage4-slider-width: 132.72vw;
    --vth-stage4-slider-height: 74.57vw;
    --vth-stage4-image-height: 82.99vw;
    --vth-stage4-image-top: 3.37vw;
    --vth-stage6-slider-width: 101vw;
    --vth-stage6-slider-height: 56.75vw;
    --vth-stage6-image-height: 54.19vw;
    --vth-stage6-image-top: 2.57vw;
    --vth-final-slider-left: calc(50% - 14.03vw);
    --vth-final-slider-top: 2.1vw;
    --vth-final-slider-width: 28.06vw;
    --vth-final-slider-height: 32.84vw;
    --vth-final-image-top: 2.57vw;
    --vth-final-image-height: 28.9vw;
    --vth-final-prev-btn-left: 0vw;
    --vth-final-prev-btn-top: 0vw;
    --vth-final-next-btn-left: 0vw;
    --vth-final-next-btn-top: 0vw;
}

/* Hero becomes visible when animation starts */
.vth-hero-section.vth-animating {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
}

/* Full-viewport backdrop during animation so no page content
   bleeds through below the hero.  Uses the hero's own background
   color and disappears when vth-animating is removed — no layout
   change, no snap. */
.vth-hero-section.vth-animating::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F7F7F7;
    z-index: -1;
}

/* Hide all content initially during animation */
.vth-hero-section.vth-animating .vth-hero-left {
    opacity: 1;
    transform: translateX(calc(-100vw - 8.41vw));
}

.vth-hero-section.vth-animating .vth-thumbnails,
.vth-hero-section.vth-animating .vth-cta-section {
    opacity: 1;
    transform: translateY(calc(100vh + 8.41vw));
}

.vth-hero-section.vth-animating #vth-prev-btn {
    position: fixed;
    left: var(--vth-final-prev-btn-left);
    top: var(--vth-final-prev-btn-top);
    opacity: 0;
    transform: translateX(calc(-50vw - 11.56vw)) scale(1.8);
}

.vth-hero-section.vth-animating #vth-next-btn {
    position: fixed;
    left: var(--vth-final-next-btn-left);
    top: var(--vth-final-next-btn-top);
    opacity: 0;
    transform: translateX(calc(50vw + 11.56vw)) scale(1.8);
}

.vth-hero-section.vth-animating .vth-product-card {
    opacity: 1;
    transform: translateX(calc(100vw + 16.82vw));
}

.vth-hero-section.vth-animating .vth-card-pointer {
    opacity: 0.25;
    transform: translateX(calc(100vw + 16.82vw));
}

.vth-hero-section.vth-animating .vth-carousel-main {
    position: fixed;
    left: 50%;
    top: calc(100vh + 2.1vw);
    width: var(--vth-stage4-slider-width);
    height: var(--vth-stage4-slider-height);
    margin: 0;
    z-index: 20;
    transform: translateX(-50%);
    will-change: top, width, height;
}

.vth-hero-section.vth-animating .vth-slide.vth-active {
    opacity: 1;
    pointer-events: auto;
}

.vth-hero-section.vth-animating .vth-slide.vth-active img {
    position: absolute;
    left: 50%;
    top: var(--vth-stage4-image-top);
    height: var(--vth-stage4-image-height);
    width: auto;
    max-width: none;
    max-height: none;
    margin-top: 0;
    transform: translateX(-50%);
    will-change: top, height;
}

.vth-hero-section.vth-animating .vth-carousel-btn {
    position: relative;
    z-index: 60;
}

.vth-hero-section.vth-animating .vth-hero-right {
    position: relative;
    z-index: 41;
}

.vth-hero-section.vth-animating .vth-content-box.vth-active {
    z-index: 42;
}

.vth-hero-section.vth-animating .vth-product-card {
    z-index: 44;
}

.vth-hero-section.vth-animating .vth-card-pointer {
    z-index: 43;
}

/* Stage 4: Slider slides in from bottom (3.5s-4.5s) - 1000ms at scale 4.5x, 50px from top */
.vth-hero-section.vth-slider-enter .vth-carousel-main {
    animation: vth-slide-in-huge 1000ms ease-out forwards;
}

@keyframes vth-slide-in-huge {
    0% {
        top: calc(100vh + 2.1vw);
        width: var(--vth-stage4-slider-width);
        height: var(--vth-stage4-slider-height);
        transform: translateX(-50%);
    }
    100% {
        top: -2.63vw;
        width: var(--vth-stage4-slider-width);
        height: var(--vth-stage4-slider-height);
        transform: translateX(-50%);
    }
}

/* Stage 6: Image resizes (4.8s-6.0s) - scale 4.5 → 2.1, 1200ms */
.vth-hero-section.vth-slider-resize .vth-carousel-main {
    animation: vth-resize-medium 1200ms ease-out forwards;
}

.vth-hero-section.vth-slider-resize .vth-slide.vth-active img {
    animation: vth-image-resize-medium 1200ms ease-out forwards;
}

@keyframes vth-resize-medium {
    0% {
        top: -2.63vw;
        width: var(--vth-stage4-slider-width);
        height: var(--vth-stage4-slider-height);
        transform: translateX(-50%);
    }
    100% {
        top: 0;
        width: var(--vth-stage6-slider-width);
        height: var(--vth-stage6-slider-height);
        transform: translateX(-50%);
    }
}

@keyframes vth-image-resize-medium {
    0% {
        top: var(--vth-stage4-image-top);
        height: var(--vth-stage4-image-height);
        transform: translateX(-50%);
    }
    100% {
        top: var(--vth-stage6-image-top);
        height: var(--vth-stage6-image-height);
        transform: translateX(-50%);
    }
}

/* Stage 8: Everything settles (7.2s-10.25s) - 3050ms total */
.vth-hero-section.vth-animating.vth-final-settle .vth-carousel-main {
    animation: vth-settle-final 3050ms ease-out forwards;
}

.vth-hero-section.vth-animating.vth-final-settle .vth-slide.vth-active img {
    animation: vth-image-settle-final 3050ms ease-out forwards;
}

@keyframes vth-settle-final {
    0% {
        position: fixed;
        left: 50%;
        top: 0;
        width: var(--vth-stage6-slider-width);
        height: var(--vth-stage6-slider-height);
        transform: translateX(-50%);
    }
    100% {
        position: fixed;
        left: 50%;
        top: var(--vth-final-slider-top);
        width: var(--vth-final-slider-width);
        height: var(--vth-final-slider-height);
        transform: translateX(-50%);
    }
}

@keyframes vth-image-settle-final {
    0% {
        position: absolute;
        left: 50%;
        top: var(--vth-stage6-image-top);
        height: var(--vth-stage6-image-height);
        width: auto;
        transform: translateX(-50%);
    }
    100% {
        position: absolute;
        left: 50%;
        top: var(--vth-final-image-top);
        height: var(--vth-final-image-height);
        width: auto;
        transform: translateX(-50%);
    }
}

/* Stage 8: Arrows fade in during settle */
.vth-hero-section.vth-animating.vth-final-settle #vth-prev-btn {
    animation: vth-prev-arrow-enter 3050ms ease-out forwards;
    will-change: opacity, transform;
}

.vth-hero-section.vth-animating.vth-final-settle #vth-next-btn {
    animation: vth-next-arrow-enter 3050ms ease-out forwards;
    will-change: opacity, transform;
}

@keyframes vth-prev-arrow-enter {
    0% {
        position: fixed;
        left: var(--vth-final-prev-btn-left);
        top: var(--vth-final-prev-btn-top);
        opacity: 0;
        transform: translateX(calc(-50vw - 11.56vw)) scale(1.8);
    }
    100% {
        position: fixed;
        left: var(--vth-final-prev-btn-left);
        top: var(--vth-final-prev-btn-top);
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes vth-next-arrow-enter {
    0% {
        position: fixed;
        left: var(--vth-final-next-btn-left);
        top: var(--vth-final-next-btn-top);
        opacity: 0;
        transform: translateX(calc(50vw + 11.56vw)) scale(1.8);
    }
    100% {
        position: fixed;
        left: var(--vth-final-next-btn-left);
        top: var(--vth-final-next-btn-top);
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Stage 8: Left content slides in from left */
.vth-hero-section.vth-animating.vth-final-settle .vth-hero-left {
    animation: vth-left-slidein 3050ms ease-out forwards;
    will-change: transform;
}

@keyframes vth-left-slidein {
    0% {
        transform: translateX(calc(-100vw - 8.41vw));
    }
    100% {
        transform: translateX(0);
    }
}

/* Stage 8: Right content slides in from right */
.vth-hero-section.vth-animating.vth-final-settle .vth-product-card {
    animation: vth-right-slidein 2083ms ease-out 967ms forwards;
    will-change: transform;
}

.vth-hero-section.vth-animating.vth-final-settle .vth-card-pointer {
    animation: vth-pointer-slidein 2083ms ease-out 967ms forwards;
    will-change: transform, opacity;
}

@keyframes vth-right-slidein {
    0% {
        transform: translateX(calc(100vw + 16.82vw));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes vth-pointer-slidein {
    0% {
        opacity: 0.25;
        transform: translateX(calc(100vw + 16.82vw));
    }
    64% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Stage 8: Thumbnails slide up from bottom */
.vth-hero-section.vth-animating.vth-final-settle .vth-thumbnails {
    animation: vth-thumbs-slideup 3050ms ease-out forwards;
    will-change: transform;
}

.vth-hero-section.vth-animating.vth-final-settle .vth-cta-section {
    animation: vth-thumbs-slideup 3050ms ease-out forwards;
    will-change: transform;
}

@keyframes vth-thumbs-slideup {
    0% {
        transform: translateY(calc(100vh + 8.41vw));
    }
    100% {
        transform: translateY(0);
    }
}

/* Reset for hero section only */
.vth-hero-section *,
.vth-hero-section *::before,
.vth-hero-section *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   Hero Section Container
   ========================================================================== */
.vth-hero-section {
    width: 100%;
    min-height: 45.51vw;
    max-width: 100%;
    padding: 2.1vw var(--vth-page-side-padding);
    background: #F7F7F7;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: 'Urbanist', sans-serif;
}

.vth-hero-inner {
    width: 100%;
    max-width: 91.33vw;
    display: flex;
    align-items: center;
    gap: 3.15vw;
    height: 41.3vw;
    min-width: 0;
}

/* ==========================================================================
   Left Column - Headings & Trust Section
   ========================================================================== */
.vth-hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-width: 0;
}

.vth-headings {
    display: flex;
    flex-direction: column;
    gap: 0.21vw;
}

.vth-tagline {
    display: inline-flex;
    align-items: center;
    padding: 0.32vw 0.84vw;
    border: 0.04vw solid #DB082F;
    border-radius: 2.79vw;
    color: #DB082F;
    font-size: 1.05vw;
    font-weight: 400;
    line-height: 1.37vw;
    width: fit-content;
}

.vth-main-heading {
    font-size: 3.68vw;
    font-weight: 500;
    line-height: 3.99vw;
    color: #282828;
    width: 26.92vw;
    min-width: 26.92vw;
}

.vth-main-heading .vth-highlight {
    color: #DB082F;
}

/* Trust/Testimonials Section */
.vth-trust-section {
    display: flex;
    flex-direction: column;
    gap: 1.68vw;
}

.vth-avatars {
    display: flex;
    align-items: center;
}

.vth-avatar {
    width: 3.36vw;
    height: 3.36vw;
    border-radius: 50%;
    border: 0.21vw solid #FFFFFF;
    object-fit: cover;
    margin-right: -1.05vw;
}

.vth-avatar:last-child {
    margin-right: 0;
}

.vth-trust-content {
    display: flex;
    flex-direction: column;
    gap: 0.84vw;
}

.vth-trust-title {
    font-size: 1.68vw;
    font-weight: 700;
    line-height: 2vw;
    color: #282828;
}

.vth-trust-text {
    font-size: 1.05vw;
    font-weight: 400;
    line-height: 1.37vw;
    color: #3F3F3F;
}

/* ==========================================================================
   Center Column - Product Carousel
   ========================================================================== */
.vth-hero-center {
    width: min(34.16vw, 100%);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.68vw;
    height: 100%;
    min-width: 0;
}

.vth-carousel-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.53vw;
    min-width: 0;
}

.vth-carousel-btn {
    width: 2.52vw;
    height: 2.52vw;
    background: #EBEBEB;
    border: 0.05vw solid #D0D0D0;
    border-radius: 3.68vw;
    box-shadow: 0vw 0vw 0.74vw #E9E9E9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vth-carousel-btn:hover {
    background: #E0E0E0;
}

.vth-carousel-btn.vth-disabled {
    opacity: 0.4;
    cursor: default;
}

.vth-carousel-btn svg {
    width: 1.26vw;
    height: 1.26vw;
}

.vth-carousel-main {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: #FFFFFF;
    border: 0.05vw solid #EDEDED;
    border-radius: 1.26vw;
    overflow: hidden;
    position: relative;
    transform-origin: center top;
}

.vth-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.vth-slide.vth-active {
    opacity: 1;
    pointer-events: auto;
}

.vth-slide img {
    position: absolute;
    left: 50%;
    top: 1.58vw;
    width: auto;
    max-width: none;
    max-height: none;
    height: 28.9vw;
    object-fit: contain;
    margin-top: 0;
    transform-origin: center top;
    transform: translateX(-50%);
}

/* Individual slide image heights */
.vth-slide:nth-child(1) img {
    top: 1.58vw;
    height: 28.9vw;
}

.vth-slide:nth-child(2) img {
    top: 1.58vw;
    height: 30.48vw;
}

.vth-slide:nth-child(3) img {
    top: 0;
    height: 34.16vw;
}

/* Thumbnails */
.vth-thumbnails {
    display: flex;
    justify-content: center;
    gap: 1.26vw;
    flex-wrap: wrap;
}

.vth-thumb {
    width: 6.78vw;
    height: 6.78vw;
    padding: 0.53vw 1.16vw;
    background: #FFFFFF;
    border: 0.05vw solid #D0D0D0;
    border-radius: 0.79vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vth-thumb:hover {
    border-color: #999;
}

.vth-thumb.vth-active {
    background: #FFFFFF;
    border-width: 0.1vw;
    border-color: #DB082F;
}

.vth-thumb img {
    max-width: 7.36vw;
    /* max-height: 100%; */
    /* object-fit: contain; */
}

/* PaX-i Plus thumb uses a portrait source (544x789); constrain to keep
   visual weight in line with the other (more landscape) thumbnails. */
.vth-thumb[data-index="0"] img {
    max-width: 100%;
    max-height: 75%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   Right Column - Product Info
   ========================================================================== */
.vth-hero-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    min-width: 0;
}

/* Product Card */
.vth-product-card {
    width: 100%;
    padding: 1.68vw;
    background: #FFFFFF;
    border-radius: 0.84vw;
    display: flex;
    flex-direction: column;
    gap: 1.68vw;
    position: relative;
    z-index: 5;
}

.vth-product-header {
    display: flex;
    flex-direction: column;
    gap: 1.26vw;
}

.vth-product-intro {
    display: flex;
    flex-direction: column;
    gap: 0.42vw;
}

.vth-product-name {
    font-family: 'Figtree', sans-serif;
    font-size: 1.37vw;
    font-weight: 600;
    color: #282828;
}

.vth-product-desc {
    font-size: 1.05vw;
    font-weight: 400;
    line-height: 1.37vw;
    color: #3F3F3F;
}

/* Product Features */
.vth-product-features {
    display: flex;
    flex-direction: column;
    gap: 0.42vw;
    list-style: none;
}

.vth-feature-item {
    display: flex;
    align-items: center;
    gap: 0.84vw;
}

.vth-feature-bullet {
    width: 0.32vw;
    height: 0.32vw;
    background: #DB082F;
    flex-shrink: 0;
}

.vth-feature-text {
    font-size: 1.05vw;
    font-weight: 400;
    line-height: 1.37vw;
    color: #282828;
}

/* CTA Section */
.vth-cta-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.68vw;
}

.vth-cta-text {
    font-size: 1.05vw;
    font-weight: 400;
    line-height: 1.37vw;
    color: #3F3F3F;
}

.vth-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.74vw;
    padding: 0.42vw 0.42vw 0.42vw 1.26vw;
    background: #282828;
    border-radius: 9999px;
    text-decoration: none;
    width: fit-content;
}

.vth-cta-btn span {
    font-size: 1.05vw;
    font-weight: 400;
    line-height: 1.37vw;
    color: #FFFFFF;
}

.vth-cta-icon {
    width: 2.84vw;
    height: 2.84vw;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vth-cta-icon svg {
    width: 1.16vw;
    height: 0.84vw;
}

/* Content boxes - hide inactive */
.vth-content-box {
    display: none;
    position: relative;
}

.vth-content-box.vth-active {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    z-index: 10;
}

/* Card pointer positioning */
.vth-card-pointer {
    position: absolute;
    z-index: -1;
    width: 18.71vw;
    height: 9.46vw;
}

.vth-card-pointer img,
.vth-card-pointer svg {
    width: 100%;
    height: 100%;
}

/* Individual card pointer positions for each slide */
.vth-content-box[data-product="0"] .vth-card-pointer {
    left: -16.3vw;
    top: 4vw;
}

.vth-content-box[data-product="1"] .vth-card-pointer {
    left: -18.6vw;
    top: 4.3vw;
}

.vth-content-box[data-product="2"] .vth-card-pointer {
    left: -19.2vw;
    top: 3.1vw;
}

/* ==========================================================================
   Responsive (below 1000px use px fallbacks)
   ========================================================================== */
@media (max-width: 1000px) {
    .vth-hero-section {
        --vth-page-side-padding: 24px;
        min-height: auto;
        padding: 32px var(--vth-page-side-padding);
    }
    
    .vth-hero-inner {
        flex-direction: column;
        height: auto;
        align-items: stretch;
        gap: 32px;
        max-width: 100%;
    }
    
    .vth-hero-left,
    .vth-hero-right {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }
    
    .vth-hero-center {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
    }

    .vth-carousel-main {
        min-height: 500px;
        border-radius: 20px;
    }

    .vth-card-pointer {
        display: none;
    }

    .vth-main-heading {
        font-size: 48px;
        line-height: 54px;
        width: auto;
        min-width: unset;
        max-width: none;
    }

    .vth-tagline {
        font-size: 18px;
        line-height: 24px;
        padding: 6px 14px;
        border-radius: 40px;
    }

    .vth-headings {
        gap: 4px;
    }

    .vth-trust-section {
        gap: 24px;
    }

    .vth-avatar {
        width: 56px;
        height: 56px;
        border: 3px solid #FFFFFF;
        margin-right: -16px;
    }

    .vth-trust-content {
        gap: 12px;
    }

    .vth-trust-title {
        font-size: 26px;
        line-height: 32px;
    }

    .vth-trust-text,
    .vth-product-desc,
    .vth-feature-text,
    .vth-cta-text,
    .vth-cta-btn span {
        font-size: 18px;
        line-height: 24px;
    }

    .vth-cta-section,
    .vth-content-box.vth-active {
        gap: 24px;
    }

    /* Carousel arrows hidden on tablet/mobile — users navigate via the
       thumbnail slider below. This lets the main preview take full width. */
    .vth-carousel-wrapper {
        gap: 0;
    }

    .vth-carousel-btn { display: none; }

    .vth-thumbnails {
        gap: 16px;
    }

    .vth-thumb {
        width: 100px;
        height: 100px;
        padding: 8px 14px;
        border-radius: 12px;
    }

    .vth-thumb.vth-active {
        border-color: #DB082F;
    }

    .vth-thumb img {
        max-width: 100%;
    }

    .vth-product-card {
        padding: 24px;
        border-radius: 14px;
        gap: 24px;
    }

    .vth-product-header {
        gap: 16px;
    }

    .vth-product-intro {
        gap: 6px;
    }

    .vth-product-name {
        font-size: 22px;
    }

    .vth-product-features {
        gap: 6px;
    }

    .vth-feature-item {
        gap: 12px;
    }

    .vth-feature-bullet {
        width: 5px;
        height: 5px;
    }

    .vth-cta-btn {
        gap: 12px;
        padding: 6px 6px 6px 20px;
    }

    .vth-cta-icon {
        width: 48px;
        height: 48px;
    }

    .vth-cta-icon svg {
        width: 18px;
        height: 14px;
    }

    .vth-slide img {
        height: 420px;
        top: 20px;
    }

    .vth-slide:nth-child(1) img {
        top: 20px;
        height: 420px;
    }

    .vth-slide:nth-child(2) img {
        top: 20px;
        height: 440px;
    }

    .vth-slide:nth-child(3) img {
        top: 0;
        height: 480px;
    }
}

/* ==========================================================================
   Mobile-only (≤600px): preview box uses the SAME aspect ratio as desktop
   so the proportions stay identical. Tablet keeps the 500px min-height
   pixel rules above (matching aspect-ratio on tablet would make the box
   too tall). Image heights expressed as % of the box matching desktop
   ratios (28.9/32.84 = 88%, 30.48/32.84 = 92.81%, 34.16/32.84 = 104.02%).
   ========================================================================== */
@media (max-width: 600px) {
    .vth-carousel-main {
        aspect-ratio: 28.06 / 32.84;
        min-height: 0;
        height: auto;
    }

    .vth-slide img {
        height: 88%;
        top: 4.81%;
    }

    .vth-slide:nth-child(1) img {
        top: 4.81%;
        height: 88%;
    }

    .vth-slide:nth-child(2) img {
        top: 4.81%;
        height: 92.81%;
    }

    .vth-slide:nth-child(3) img {
        top: 0;
        height: 104.02%;
    }

    /* Thumbnails: always one row on mobile. If the viewport is too narrow
       for the full 100px thumb width, the thumbs flex-shrink equally to fit.
       Each thumb stays a perfect square via aspect-ratio. */
    .vth-thumbnails {
        flex-wrap: nowrap;
        gap: 12px;
    }
    .vth-thumb {
        flex: 1 1 0;
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 100px;
        min-width: 0;
        padding: 6px 10px;
    }
    .vth-thumb img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

/* ==========================================================================
   Header (Bricks #brx-header) coordination with the landing animation.
   - Splash z-index bumped above the header so the white splash covers it 0-3.5s.
   - body.vth-anim-active (set when the splash sequence starts): the bar's
     children (logo, nav, CTA, burger) are hidden — only the bar's grey bg
     remains visible.
   - body.vth-anim-final (set at 7.2s when stage 8 starts): the bar children
     slide down from above using the same 3050ms ease-out as the bottom
     elements (thumbs/CTA), so the header settling feels like part of the
     same final-settle animation.
   - Both classes are removed when the animation finishes (10.25s) — header
     returns to its normal layout.
   ========================================================================== */
.vth-splash-screen { z-index: 100000; }

/* During the landing animation the header bar sits BEHIND the animating
   slider — so the main image preview visibly overlaps the grey bar as it
   slides in/up from below. Once the animation completes the body classes
   are removed and the header returns to its normal z-index (99999). */
body.vth-anim-active header#brx-header,
body.vth-anim-final header#brx-header {
    z-index: 1 !important;
}

body.vth-anim-active .vau-hdr__bar > * {
    opacity: 0;
    transform: translateY(calc(-100% - 20px));
    pointer-events: none;
    transition: none;
}

body.vth-anim-final .vau-hdr__bar > * {
    /* 2250ms so the animation starts at 8.0s and ends at 10.25s — same
       end-time as the rest of stage 8. */
    animation: vth-header-content-settle 2250ms ease-out forwards;
    pointer-events: auto;
}

@keyframes vth-header-content-settle {
    0% {
        opacity: 0;
        transform: translateY(calc(-100% - 20px));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Accessibility: Skip animation for users who prefer reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .vth-splash-screen {
        display: none !important;
    }

    .vth-hero-section.vth-hero-hidden {
        opacity: 1;
        visibility: visible;
    }

    .vth-hero-section *,
    .vth-hero-section *::before,
    .vth-hero-section *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
    }
}