.baza-hero-parallax {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    background-color: transparent;
}

.baza-hero-parallax--background-muted {
    background-color: var(--baza-color-background-muted);
}

.baza-hero-parallax--background-surface {
    background-color: var(--baza-color-surface-default);
}

:where(.baza-section:has(.baza-hero-parallax)) {
    overflow: visible;
}

.baza-hero-parallax__inner {
    position: relative;
    box-sizing: border-box;
    display: grid;
    width: min(100% - (var(--baza-layout-page-gutter) * 2), var(--baza-layout-container-lg));
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: var(--baza-hero-parallax-padding-y-mobile, calc((var(--baza-spacing-section-md) / 2) + var(--baza-spacing-md)));
    padding-bottom: var(--baza-hero-parallax-padding-y-mobile, var(--baza-spacing-xl));
    gap: var(--baza-hero-parallax-content-gap, var(--baza-spacing-xl));
    align-items: center;
    overflow: visible;
}

.baza-hero-parallax--surface-transparent .baza-hero-parallax__inner {
    background-color: transparent;
}

.baza-hero-parallax__content,
.baza-hero-parallax__path-content {
    display: grid;
    gap: var(--baza-hero-parallax-content-gap, var(--baza-spacing-lg));
    min-width: 0;
    max-width: var(--baza-layout-container-sm);
}

.baza-hero-parallax__content {
    will-change: auto;
}

.baza-hero-parallax__path-content {
    will-change: transform, opacity, filter;
}

.baza-hero-parallax__intro {
    display: grid;
    gap: var(--baza-spacing-sm);
}

.baza-hero-parallax__intro-heading {
    max-width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--baza-color-text-primary);
    font-family: var(--baza-font-family-heading);
    font-size: var(--baza-block-heading-size, clamp(2.2rem, 5vw, var(--baza-font-size-heading-lg)));
    line-height: var(--baza-line-height-heading);
    overflow-wrap: anywhere;
}

.baza-hero-parallax__intro-lead {
    max-width: 42rem;
    margin: 0;
    color: var(--baza-color-text-muted);
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: var(--baza-line-height-body);
}

.baza-hero-parallax--layout-stacked .baza-hero-parallax__content,
.baza-hero-parallax--layout-stacked .baza-hero-parallax__path-content {
    max-width: var(--baza-layout-container-md);
    justify-self: center;
    text-align: center;
}

.baza-hero-parallax--layout-stacked .baza-hero-parallax__intro-lead {
    margin-right: auto;
    margin-left: auto;
}

.baza-hero-parallax--layout-stacked .baza-hero-parallax__actions {
    justify-content: center;
}

.baza-hero-parallax--entry-in .baza-hero-parallax__path-content {
    animation: baza-hero-parallax-content-in 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.baza-hero-parallax--switch-out .baza-hero-parallax__path-content {
    opacity: 0;
    filter: blur(0.08rem);
    transform: none;
    transition:
        opacity 260ms ease,
        filter 260ms ease;
    pointer-events: none;
}

.baza-hero-parallax--switch-in .baza-hero-parallax__path-content {
    animation: baza-hero-parallax-content-switch-in 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.baza-hero-parallax__eyebrow {
    margin: 0;
    color: var(--baza-color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.baza-hero-parallax__heading {
    max-width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--baza-color-text-primary);
    font-family: var(--baza-font-family-heading);
    font-size: var(--baza-hero-parallax-heading-size, clamp(1.85rem, 4vw, var(--baza-font-size-heading-lg)));
    line-height: var(--baza-line-height-heading);
    overflow-wrap: anywhere;
}

.baza-hero-parallax__lead {
    max-width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--baza-color-text-muted);
    font-size: clamp(1.04rem, 0.45vw + 0.95rem, 1.18rem);
    line-height: 1.62;
    overflow-wrap: anywhere;
}

.baza-hero-parallax--text-tone-light .baza-hero-parallax__eyebrow,
.baza-hero-parallax--text-tone-light .baza-hero-parallax__lead,
.baza-hero-parallax--text-tone-light .baza-hero-parallax__intro-lead,
.baza-hero-parallax--text-tone-light .baza-hero-parallax__path {
    color: color-mix(in srgb, var(--baza-color-accent-contrast) 76%, transparent);
}

.baza-hero-parallax--text-tone-light .baza-hero-parallax__heading,
.baza-hero-parallax--text-tone-light .baza-hero-parallax__intro-heading,
.baza-hero-parallax--text-tone-light .baza-hero-parallax__path--active {
    color: var(--baza-color-accent-contrast);
}

.baza-hero-parallax__word {
    display: inline-block;
    white-space: nowrap;
}

.baza-hero-parallax__char {
    display: inline-block;
    transform-origin: left center;
    will-change: transform, opacity, filter;
}

.baza-hero-parallax--entry-in .baza-hero-parallax__char,
.baza-hero-parallax--switch-in .baza-hero-parallax__char {
    animation: baza-hero-parallax-char-in 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--baza-hero-parallax-char-delay, 0ms);
}

.baza-hero-parallax__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--baza-block-gap, var(--baza-spacing-sm));
}

.baza-hero-parallax--button-tone-default {
    --baza-hero-parallax-button-solid-border: transparent;
    --baza-hero-parallax-button-solid-background: var(--baza-color-accent-primary);
    --baza-hero-parallax-button-solid-color: var(--baza-color-accent-contrast);
    --baza-hero-parallax-button-solid-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-outline-border: color-mix(in srgb, var(--baza-color-accent-primary) 24%, transparent);
    --baza-hero-parallax-button-outline-background: transparent;
    --baza-hero-parallax-button-outline-color: var(--baza-color-accent-primary);
    --baza-hero-parallax-button-outline-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-ghost-border: color-mix(in srgb, var(--baza-color-accent-primary) 12%, transparent);
    --baza-hero-parallax-button-ghost-background: color-mix(in srgb, var(--baza-color-accent-primary) 10%, transparent);
    --baza-hero-parallax-button-ghost-color: var(--baza-color-accent-primary);
    --baza-hero-parallax-button-ghost-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-gradient-border: color-mix(in srgb, var(--baza-color-accent-soft) 42%, transparent);
    --baza-hero-parallax-button-gradient-background:
        linear-gradient(135deg, var(--baza-color-accent-primary) 0%, color-mix(in srgb, var(--baza-color-accent-soft) 86%, var(--baza-color-accent-primary) 14%) var(--baza-hero-parallax-button-gradient-position, 54%), color-mix(in srgb, var(--baza-color-accent-muted) 84%, var(--baza-color-accent-soft) 16%) 100%);
    --baza-hero-parallax-button-gradient-color: var(--baza-color-accent-contrast);
    --baza-hero-parallax-button-gradient-shadow: 0 12px 28px color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent);
}

.baza-hero-parallax--button-tone-dark {
    --baza-hero-parallax-button-solid-border: rgba(255, 255, 255, 0.14);
    --baza-hero-parallax-button-solid-background: rgba(7, 10, 14, 0.92);
    --baza-hero-parallax-button-solid-color: #f3f5f2;
    --baza-hero-parallax-button-solid-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    --baza-hero-parallax-button-outline-border: rgba(255, 255, 255, 0.24);
    --baza-hero-parallax-button-outline-background: transparent;
    --baza-hero-parallax-button-outline-color: #f3f5f2;
    --baza-hero-parallax-button-outline-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-ghost-border: rgba(255, 255, 255, 0.08);
    --baza-hero-parallax-button-ghost-background: rgba(255, 255, 255, 0.05);
    --baza-hero-parallax-button-ghost-color: #f3f5f2;
    --baza-hero-parallax-button-ghost-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-gradient-border: rgba(255, 255, 255, 0.24);
    --baza-hero-parallax-button-gradient-background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        linear-gradient(135deg, color-mix(in srgb, var(--baza-color-accent-primary) 28%, #05070a 72%) 0%, color-mix(in srgb, var(--baza-color-accent-soft) 30%, #071018 70%) var(--baza-hero-parallax-button-gradient-position, 54%), color-mix(in srgb, var(--baza-color-accent-muted) 28%, #0b1220 72%) 100%);
    --baza-hero-parallax-button-gradient-color: #f3f5f2;
    --baza-hero-parallax-button-gradient-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.baza-hero-parallax--button-tone-light {
    --baza-hero-parallax-button-solid-border: rgba(255, 255, 255, 0.42);
    --baza-hero-parallax-button-solid-background: #ffffff;
    --baza-hero-parallax-button-solid-color: var(--baza-color-text-primary);
    --baza-hero-parallax-button-solid-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    --baza-hero-parallax-button-outline-border: rgba(255, 255, 255, 0.44);
    --baza-hero-parallax-button-outline-background: transparent;
    --baza-hero-parallax-button-outline-color: #ffffff;
    --baza-hero-parallax-button-outline-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-ghost-border: rgba(255, 255, 255, 0.12);
    --baza-hero-parallax-button-ghost-background: rgba(255, 255, 255, 0.08);
    --baza-hero-parallax-button-ghost-color: #ffffff;
    --baza-hero-parallax-button-ghost-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-gradient-border: rgba(255, 255, 255, 0.58);
    --baza-hero-parallax-button-gradient-background:
        linear-gradient(135deg, color-mix(in srgb, #ffffff 78%, var(--baza-color-accent-primary) 22%) 0%, color-mix(in srgb, #ffffff 74%, var(--baza-color-accent-soft) 26%) var(--baza-hero-parallax-button-gradient-position, 54%), color-mix(in srgb, #ffffff 70%, var(--baza-color-accent-muted) 30%) 100%);
    --baza-hero-parallax-button-gradient-color: var(--baza-color-text-primary);
    --baza-hero-parallax-button-gradient-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.baza-hero-parallax--button-tone-accent {
    --baza-hero-parallax-button-solid-border: color-mix(in srgb, var(--baza-color-accent-soft) 28%, transparent);
    --baza-hero-parallax-button-solid-background: var(--baza-color-accent-primary);
    --baza-hero-parallax-button-solid-color: var(--baza-color-accent-contrast);
    --baza-hero-parallax-button-solid-shadow: 0 12px 28px color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent);
    --baza-hero-parallax-button-outline-border: color-mix(in srgb, var(--baza-color-accent-soft) 28%, transparent);
    --baza-hero-parallax-button-outline-background: transparent;
    --baza-hero-parallax-button-outline-color: var(--baza-color-accent-primary);
    --baza-hero-parallax-button-outline-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-ghost-border: color-mix(in srgb, var(--baza-color-accent-primary) 12%, transparent);
    --baza-hero-parallax-button-ghost-background: color-mix(in srgb, var(--baza-color-accent-primary) 10%, transparent);
    --baza-hero-parallax-button-ghost-color: var(--baza-color-accent-primary);
    --baza-hero-parallax-button-ghost-shadow: 0 0 0 0 transparent;
    --baza-hero-parallax-button-gradient-border: color-mix(in srgb, var(--baza-color-accent-soft) 46%, transparent);
    --baza-hero-parallax-button-gradient-background:
        linear-gradient(135deg, color-mix(in srgb, var(--baza-color-accent-primary) 94%, #ffffff 6%) 0%, color-mix(in srgb, var(--baza-color-accent-soft) 74%, var(--baza-color-accent-primary) 26%) var(--baza-hero-parallax-button-gradient-position, 54%), color-mix(in srgb, var(--baza-color-accent-muted) 72%, var(--baza-color-accent-soft) 28%) 100%);
    --baza-hero-parallax-button-gradient-color: var(--baza-color-accent-contrast);
    --baza-hero-parallax-button-gradient-shadow: 0 12px 28px color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent);
}

.baza-hero-parallax__button {
    --baza-hero-parallax-button-active-shadow: 0 0 0 0 transparent;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-height: var(--baza-button-min-height, calc(var(--baza-spacing-xl) + var(--baza-spacing-lg)));
    padding: var(--baza-button-padding-y, var(--baza-spacing-sm)) var(--baza-button-padding-x, var(--baza-spacing-lg));
    border: 1px solid transparent;
    border-radius: var(--baza-radius-button);
    background-color: var(--baza-color-accent-primary);
    color: var(--baza-color-accent-contrast);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: var(--baza-hero-parallax-button-active-shadow);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease,
        background-image 160ms ease,
        background-color 160ms ease,
        color 160ms ease;
}

.baza-hero-parallax--button-style-solid .baza-hero-parallax__button--primary {
    border-color: var(--baza-hero-parallax-button-solid-border);
    background: var(--baza-hero-parallax-button-solid-background);
    color: var(--baza-hero-parallax-button-solid-color);
    --baza-hero-parallax-button-active-shadow: var(--baza-hero-parallax-button-solid-shadow);
}

.baza-hero-parallax--button-style-outline .baza-hero-parallax__button--primary {
    border-color: var(--baza-hero-parallax-button-outline-border);
    background: var(--baza-hero-parallax-button-outline-background);
    color: var(--baza-hero-parallax-button-outline-color);
    --baza-hero-parallax-button-active-shadow: var(--baza-hero-parallax-button-outline-shadow);
}

.baza-hero-parallax--button-style-ghost .baza-hero-parallax__button--primary {
    border-color: var(--baza-hero-parallax-button-ghost-border);
    background: var(--baza-hero-parallax-button-ghost-background);
    color: var(--baza-hero-parallax-button-ghost-color);
    --baza-hero-parallax-button-active-shadow: var(--baza-hero-parallax-button-ghost-shadow);
}

.baza-hero-parallax--button-style-gradient .baza-hero-parallax__button--primary {
    border-color: var(--baza-hero-parallax-button-gradient-border);
    background-color: transparent;
    background-image: var(--baza-hero-parallax-button-gradient-background);
    background-clip: padding-box;
    background-origin: padding-box;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--baza-hero-parallax-button-gradient-color);
    --baza-hero-parallax-button-active-shadow: var(--baza-hero-parallax-button-gradient-shadow);
}

.baza-hero-parallax__button--secondary {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--baza-color-border-default) 74%, var(--baza-color-accent-primary) 26%);
    color: var(--baza-color-text-primary);
    box-shadow: none;
}

.baza-section--visual-atelier .baza-hero-parallax__button {
    --baza-button-treatment-hover-transform: translateY(-1px) scale(1.006);
    --baza-button-treatment-hover-ring: 0 0 0 4px color-mix(in srgb, var(--baza-atelier-blue) 18%, transparent);
    --baza-button-treatment-hover-glow: 0 0 38px color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent);
    box-shadow:
        var(--baza-hero-parallax-button-active-shadow),
        0 18px 42px rgba(11, 31, 51, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 0 1px color-mix(in srgb, var(--baza-atelier-border) 34%, rgba(255, 255, 255, 0.28) 66%),
        0 0 30px color-mix(in srgb, var(--baza-color-accent-primary) 14%, transparent);
    -webkit-backdrop-filter: blur(8px) saturate(114%);
    backdrop-filter: blur(8px) saturate(114%);
}

.baza-hero-parallax__button:hover,
.baza-hero-parallax__button:focus-visible {
    transform: var(--baza-button-treatment-hover-transform, translateY(-1px));
    box-shadow:
        var(--baza-hero-parallax-button-active-shadow),
        var(--baza-button-treatment-hover-ring, 0 0 0 3px color-mix(in srgb, var(--baza-color-accent-primary) 10%, transparent)),
        var(--baza-button-treatment-hover-glow, 0 0 22px color-mix(in srgb, var(--baza-color-accent-primary) 12%, transparent));
}

.baza-hero-parallax__button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--baza-color-accent-primary) 64%, transparent);
    outline-offset: 3px;
}

.baza-hero-parallax--button-text-tone-light .baza-hero-parallax__button--primary {
    color: var(--baza-color-background-default);
}

.baza-hero-parallax--button-text-tone-dark .baza-hero-parallax__button--primary {
    color: var(--baza-color-text-primary);
}

.baza-hero-parallax--button-text-tone-accent-contrast .baza-hero-parallax__button--primary {
    color: var(--baza-color-accent-contrast);
}

.baza-hero-parallax--entry-in .baza-hero-parallax__button--primary:not([hidden]),
.baza-hero-parallax--switch-in .baza-hero-parallax__button--primary:not([hidden]) {
    animation: baza-hero-parallax-button-in 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--baza-hero-parallax-button-delay, 0ms);
}

.baza-hero-parallax__button[hidden] {
    display: none;
}

.baza-hero-parallax__visual {
    min-width: 0;
    transform-origin: center right;
    will-change: transform, opacity, filter;
}

.baza-hero-parallax__mobile-pagination {
    display: none;
}

.baza-hero-parallax__mobile-dot {
    display: inline-flex;
    width: var(--baza-hero-parallax-mobile-dot-size, 0.68rem);
    min-width: var(--baza-hero-parallax-mobile-dot-size, 0.68rem);
    height: var(--baza-hero-parallax-mobile-dot-size, 0.68rem);
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--baza-hero-parallax-mobile-dot-size, 0.68rem);
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--baza-color-surface-default) 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-surface-default) 18%, transparent);
    box-shadow: 0 0.35rem 0.8rem color-mix(in srgb, var(--baza-color-text-primary) 10%, transparent);
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.baza-hero-parallax__mobile-dot:hover,
.baza-hero-parallax__mobile-dot:focus-visible {
    border-color: color-mix(in srgb, var(--baza-color-accent-primary) 42%, transparent);
    background: color-mix(in srgb, var(--baza-color-surface-default) 28%, var(--baza-color-accent-primary) 12%);
}

.baza-hero-parallax__mobile-dot:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--baza-color-accent-primary) 52%, transparent);
    outline-offset: 3px;
}

.baza-hero-parallax__mobile-dot.is-active,
.baza-hero-parallax__mobile-dot--active {
    background: var(--baza-color-accent-primary);
    border-color: color-mix(in srgb, var(--baza-color-accent-primary) 72%, var(--baza-color-surface-default) 28%);
    box-shadow:
        0 0 0 0.16rem color-mix(in srgb, var(--baza-color-accent-primary) 12%, transparent),
        0 0.4rem 0.95rem color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent);
}

.baza-hero-parallax--entry-in .baza-hero-parallax__visual {
    animation: baza-hero-parallax-visual-in 780ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

.baza-hero-parallax--switch-out .baza-hero-parallax__visual {
    opacity: 0;
    filter: blur(0.12rem);
    transform: translate3d(1.5rem, 0, 0) scale(0.996);
    transition:
        opacity 220ms ease,
        filter 220ms ease,
        transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.baza-hero-parallax--switch-in .baza-hero-parallax__visual {
    animation: baza-hero-parallax-visual-switch-in 780ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}

.baza-hero-parallax__mockup {
    position: relative;
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-height: clamp(18rem, 32vw, 30rem);
    aspect-ratio: 16 / 10;
    padding: var(--baza-spacing-lg);
    gap: var(--baza-spacing-md);
    align-content: end;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--baza-color-border-default) 72%, var(--baza-color-accent-primary) 28%);
    border-radius: var(--baza-radius-card);
    background:
        radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--baza-color-accent-soft) 24%, transparent), transparent 34%),
        radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--baza-color-accent-primary) 16%, transparent), transparent 38%),
        linear-gradient(145deg, var(--baza-color-surface-default), color-mix(in srgb, var(--baza-color-background-muted) 82%, var(--baza-color-accent-primary) 18%));
    box-shadow: var(--baza-shadow-card);
}

.baza-hero-parallax__mockup--image {
    display: block;
    padding: 0;
    background: var(--baza-color-surface-default);
}

.baza-hero-parallax__mockup-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.baza-hero-parallax__mockup-bar,
.baza-hero-parallax__mockup-panel,
.baza-hero-parallax__mockup-line {
    display: block;
    border-radius: var(--baza-radius-md);
    background-color: color-mix(in srgb, var(--baza-color-background-default) 74%, var(--baza-color-accent-primary) 26%);
}

.baza-hero-parallax__mockup-bar {
    position: absolute;
    top: var(--baza-spacing-md);
    left: var(--baza-spacing-md);
    width: min(46%, 16rem);
    height: 0.55rem;
    opacity: 0.78;
}

.baza-hero-parallax__mockup-panel {
    min-height: clamp(3.5rem, 8vw, 7rem);
    border: 1px solid color-mix(in srgb, var(--baza-color-border-default) 64%, var(--baza-color-accent-primary) 36%);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--baza-color-surface-default) 82%, var(--baza-color-accent-soft) 18%), color-mix(in srgb, var(--baza-color-background-default) 68%, var(--baza-color-accent-primary) 32%));
}

.baza-hero-parallax__mockup-panel--large {
    min-height: clamp(7rem, 14vw, 12rem);
}

.baza-hero-parallax__mockup-line {
    width: 46%;
    height: 0.5rem;
    opacity: 0.72;
}

.baza-hero-parallax__mockup-line--wide {
    width: 68%;
}

.baza-hero-parallax__arc {
    position: relative;
    box-sizing: border-box;
    width: min(100% - (var(--baza-layout-page-gutter) * 2), 54rem);
    max-width: 100%;
    min-height: 11rem;
    margin: 0 auto;
    padding: 3.125rem 0 var(--baza-spacing-xl);
    list-style: none;
}

.baza-hero-parallax__path {
    position: absolute;
    top: 3.125rem;
    left: 50%;
    z-index: var(--baza-hero-parallax-path-z, 1);
    display: grid;
    min-width: 5.75rem;
    justify-items: center;
    gap: var(--baza-spacing-xs);
    color: var(--baza-color-text-muted);
    opacity: var(--baza-hero-parallax-path-opacity, 1);
    transform: translate3d(var(--baza-hero-parallax-path-x, 0), var(--baza-hero-parallax-path-y, 0), 0) scale(var(--baza-hero-parallax-path-scale, 1));
    will-change: transform, opacity;
}

.baza-hero-parallax__path-button {
    display: grid;
    min-width: 0;
    justify-items: center;
    padding: 0;
    gap: var(--baza-spacing-xs);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.baza-hero-parallax__path-button:focus-visible {
    outline: 2px solid var(--baza-color-accent-primary);
    outline-offset: var(--baza-spacing-xs);
    border-radius: 999px;
}

.baza-hero-parallax__path-icon {
    display: inline-flex;
    width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--baza-color-border-default) 72%, var(--baza-color-accent-primary) 28%);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--baza-color-surface-default) 84%, transparent);
    color: var(--baza-color-text-primary);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transition:
        transform 360ms cubic-bezier(0.22, 1.12, 0.36, 1),
        border-color 320ms ease,
        background-color 320ms ease,
        color 320ms ease,
        box-shadow 320ms ease;
}

.baza-hero-parallax__path-label {
    max-width: 100%;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: center;
}

.baza-hero-parallax__path--active {
    color: var(--baza-color-text-primary);
}

.baza-hero-parallax__path--active .baza-hero-parallax__path-icon {
    border-color: color-mix(in srgb, var(--baza-color-accent-primary) 56%, var(--baza-color-border-default) 44%);
    background-color: var(--baza-color-accent-primary);
    color: var(--baza-color-accent-contrast);
    transform: scale(1.18);
    box-shadow:
        0 0 0 5px color-mix(in srgb, var(--baza-color-accent-primary) 13%, transparent),
        0 0 34px color-mix(in srgb, var(--baza-color-accent-primary) 26%, transparent);
}

.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--entry-in .baza-hero-parallax__char,
.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--switch-in .baza-hero-parallax__char,
.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--entry-in .baza-hero-parallax__button--primary:not([hidden]),
.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--switch-in .baza-hero-parallax__button--primary:not([hidden]) {
    animation: none;
}

.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--entry-in .baza-hero-parallax__path-content,
.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--switch-in .baza-hero-parallax__path-content {
    animation-duration: 640ms;
}

.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--entry-in .baza-hero-parallax__visual,
.baza-hero-parallax--motion-simple-fade.baza-hero-parallax--switch-in .baza-hero-parallax__visual {
    animation-duration: 640ms;
}

.baza-hero-parallax--motion-none.baza-hero-parallax--entry-in .baza-hero-parallax__path-content,
.baza-hero-parallax--motion-none.baza-hero-parallax--entry-in .baza-hero-parallax__visual,
.baza-hero-parallax--motion-none.baza-hero-parallax--entry-in .baza-hero-parallax__char,
.baza-hero-parallax--motion-none.baza-hero-parallax--entry-in .baza-hero-parallax__button,
.baza-hero-parallax--motion-none.baza-hero-parallax--switch-out .baza-hero-parallax__path-content,
.baza-hero-parallax--motion-none.baza-hero-parallax--switch-out .baza-hero-parallax__visual,
.baza-hero-parallax--motion-none.baza-hero-parallax--switch-in .baza-hero-parallax__path-content,
.baza-hero-parallax--motion-none.baza-hero-parallax--switch-in .baza-hero-parallax__visual,
.baza-hero-parallax--motion-none.baza-hero-parallax--switch-in .baza-hero-parallax__char,
.baza-hero-parallax--motion-none.baza-hero-parallax--switch-in .baza-hero-parallax__button {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    transition: none;
}

@keyframes baza-hero-parallax-content-in {
    from {
        opacity: 0;
        filter: blur(0.1rem);
        transform: none;
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@keyframes baza-hero-parallax-content-switch-in {
    from {
        opacity: 0;
        filter: blur(0.1rem);
        transform: none;
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@keyframes baza-hero-parallax-visual-in {
    from {
        opacity: 0;
        filter: blur(0.12rem);
        transform: translate3d(-1.5rem, 0, 0) scale(0.998);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes baza-hero-parallax-visual-switch-in {
    from {
        opacity: 0;
        filter: blur(0.12rem);
        transform: translate3d(-1.5rem, 0, 0) scale(0.998);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes baza-hero-parallax-char-in {
    from {
        opacity: 0;
        filter: blur(0.08rem);
        transform: none;
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@keyframes baza-hero-parallax-button-in {
    from {
        opacity: 0;
        filter: blur(0.1rem);
        transform: translate3d(0, 0.35rem, 0) scale(0.992);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (min-width: 64rem) {
    .baza-hero-parallax--layout-split .baza-hero-parallax__inner {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }

    .baza-hero-parallax--media-left .baza-hero-parallax__content {
        order: 2;
    }

    .baza-hero-parallax--media-left .baza-hero-parallax__visual {
        order: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax--entry-in .baza-hero-parallax__path-content,
    .baza-hero-parallax--entry-in .baza-hero-parallax__visual,
    .baza-hero-parallax--entry-in .baza-hero-parallax__char,
    .baza-hero-parallax--entry-in .baza-hero-parallax__button,
    .baza-hero-parallax--switch-out .baza-hero-parallax__path-content,
    .baza-hero-parallax--switch-out .baza-hero-parallax__visual,
    .baza-hero-parallax--switch-in .baza-hero-parallax__path-content,
    .baza-hero-parallax--switch-in .baza-hero-parallax__visual,
    .baza-hero-parallax--switch-in .baza-hero-parallax__char,
    .baza-hero-parallax--switch-in .baza-hero-parallax__button {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
        transition: none;
    }
}

@media (max-width: 48rem) {
    .baza-hero-parallax__inner {
        padding-top: var(--baza-hero-parallax-padding-y-mobile, var(--baza-spacing-xl));
    }

    .baza-hero-parallax__arc {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100% - (var(--baza-layout-page-gutter) * 2), var(--baza-hero-parallax-arc-size-mobile, 28rem));
        min-height: auto;
        padding-top: var(--baza-hero-parallax-arc-offset-mobile, var(--baza-spacing-xl));
        padding-bottom: var(--baza-hero-parallax-content-gap-mobile, var(--baza-spacing-lg));
        gap: var(--baza-hero-parallax-content-gap-mobile, var(--baza-spacing-md));
    }

    .baza-hero-parallax__path {
        position: static;
        min-width: 0;
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

@media (max-width: 782px) {
    .baza-hero-parallax {
        --baza-hero-parallax-content-gap-mobile: var(--baza-spacing-md);
        --baza-hero-parallax-heading-size-mobile: clamp(1.65rem, 6.2vw, 2.25rem);
        --baza-hero-parallax-lead-size-mobile: 0.98rem;
        --baza-hero-parallax-arc-size-mobile: min(100%, 20rem);
        --baza-hero-parallax-visual-min-height-mobile: clamp(12rem, 34vw, 18rem);
        --baza-hero-parallax-button-min-height-mobile: calc(var(--baza-spacing-lg) + var(--baza-spacing-sm));
        --baza-hero-parallax-button-padding-x-mobile: var(--baza-spacing-md);
        --baza-hero-parallax-button-padding-y-mobile: 0.42rem;
    }

    .baza-hero-parallax__inner {
        gap: var(--baza-hero-parallax-content-gap-mobile, var(--baza-spacing-md));
        padding-top: var(--baza-hero-parallax-padding-y-mobile, var(--baza-spacing-lg));
        padding-bottom: var(--baza-hero-parallax-padding-y-mobile, var(--baza-spacing-lg));
    }

    .baza-hero-parallax__content,
    .baza-hero-parallax__path-content {
        gap: var(--baza-hero-parallax-content-gap-mobile, var(--baza-spacing-md));
        max-width: min(100%, 26rem);
    }

    .baza-hero-parallax__heading {
        font-size: var(--baza-hero-parallax-heading-size-mobile, clamp(1.65rem, 6.2vw, 2.25rem));
        line-height: var(--baza-hero-parallax-heading-line-height-mobile, var(--baza-line-height-heading));
    }

    .baza-hero-parallax__lead {
        font-size: var(--baza-hero-parallax-lead-size-mobile, 0.98rem);
        line-height: var(--baza-hero-parallax-lead-line-height-mobile, var(--baza-line-height-body));
    }

    .baza-hero-parallax__button {
        min-height: var(--baza-hero-parallax-button-min-height-mobile, calc(var(--baza-spacing-lg) + var(--baza-spacing-sm)));
        padding-top: var(--baza-hero-parallax-button-padding-y-mobile, var(--baza-spacing-sm));
        padding-bottom: var(--baza-hero-parallax-button-padding-y-mobile, var(--baza-spacing-sm));
        padding-right: var(--baza-hero-parallax-button-padding-x-mobile, var(--baza-spacing-md));
        padding-left: var(--baza-hero-parallax-button-padding-x-mobile, var(--baza-spacing-md));
    }

    .baza-hero-parallax__visual {
        max-width: min(100%, var(--baza-hero-parallax-visual-width-mobile, 24rem));
    }

    .baza-hero-parallax__mobile-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.48rem;
        margin-top: var(--baza-spacing-md);
    }

    .baza-hero-parallax__mockup {
        min-height: var(--baza-hero-parallax-visual-min-height-mobile, clamp(12rem, 34vw, 18rem));
        padding: var(--baza-spacing-md);
        gap: var(--baza-spacing-sm);
    }

    .baza-hero-parallax__mockup-bar {
        top: var(--baza-spacing-sm);
        left: var(--baza-spacing-sm);
        height: 0.42rem;
    }

    .baza-hero-parallax__mockup-panel {
        min-height: clamp(2.6rem, 10vw, 4.6rem);
    }

    .baza-hero-parallax__mockup-panel--large {
        min-height: clamp(5rem, 20vw, 8rem);
    }

    .baza-hero-parallax__arc {
        width: min(100% - (var(--baza-layout-page-gutter) * 2), var(--baza-hero-parallax-arc-size-mobile, 20rem));
        gap: var(--baza-hero-parallax-content-gap-mobile, var(--baza-spacing-sm));
        padding-top: var(--baza-hero-parallax-arc-offset-mobile, var(--baza-spacing-lg));
        padding-bottom: var(--baza-spacing-sm);
    }

    .baza-hero-parallax__path-icon {
        width: 2.6rem;
        height: 2.6rem;
    }

    .baza-hero-parallax__path-label {
        font-size: 0.72rem;
    }

    .baza-mobile-compact-spacing.baza-hero-parallax {
        --baza-hero-parallax-content-gap-mobile: var(--baza-space-block-gap-mobile, var(--baza-spacing-sm));
        --baza-hero-parallax-padding-y-mobile: var(--baza-space-section-y-mobile, clamp(2.25rem, 10vw, 3.5rem));
        --baza-hero-parallax-heading-size-mobile: clamp(1.45rem, 5.6vw, 1.95rem);
        --baza-hero-parallax-lead-size-mobile: 0.92rem;
        --baza-hero-parallax-visual-min-height-mobile: clamp(10rem, 30vw, 14rem);
        --baza-hero-parallax-arc-size-mobile: min(100%, 17rem);
    }

    .baza-hero-parallax--mobile-compact-text {
        --baza-hero-parallax-content-gap-mobile: var(--baza-hero-parallax-compact-gap-mobile, var(--baza-spacing-md));
        --baza-hero-parallax-heading-size-mobile: var(--baza-hero-parallax-compact-heading-size-mobile, clamp(1.7rem, 5.6vw, 2.15rem));
        --baza-hero-parallax-lead-size-mobile: var(--baza-hero-parallax-compact-lead-size-mobile, 0.98rem);
    }

    .baza-hero-parallax--mobile-hide-visual .baza-hero-parallax__visual {
        display: none;
    }

    .baza-hero-parallax--mobile-hide-arc .baza-hero-parallax__arc {
        display: none;
    }

    .baza-hero-parallax--mobile-hide-primary-button .baza-hero-parallax__button--primary {
        display: none;
    }

    .baza-hero-parallax--mobile-hide-secondary-button .baza-hero-parallax__button--secondary {
        display: none;
    }

    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__content,
    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__path-content {
        gap: var(--baza-hero-parallax-content-gap-mobile, var(--baza-spacing-md));
    }

    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__eyebrow {
        font-size: var(--baza-hero-parallax-compact-meta-size-mobile, 0.76rem);
    }

    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__heading {
        font-size: var(--baza-hero-parallax-heading-size-mobile, clamp(1.7rem, 5.6vw, 2.15rem));
        line-height: var(--baza-hero-parallax-heading-line-height-mobile, var(--baza-line-height-heading));
    }

    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__lead {
        font-size: var(--baza-hero-parallax-lead-size-mobile, 0.98rem);
        line-height: var(--baza-hero-parallax-lead-line-height-mobile, var(--baza-line-height-body));
    }

    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__actions {
        gap: var(--baza-block-gap-mobile, var(--baza-spacing-xs));
    }

    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__button {
        min-height: var(--baza-hero-parallax-button-min-height-mobile, calc(var(--baza-spacing-xl) + var(--baza-spacing-xs)));
        padding-top: var(--baza-hero-parallax-button-padding-y-mobile, var(--baza-spacing-sm));
        padding-bottom: var(--baza-hero-parallax-button-padding-y-mobile, var(--baza-spacing-sm));
        padding-right: var(--baza-hero-parallax-button-padding-x-mobile, var(--baza-spacing-md));
        padding-left: var(--baza-hero-parallax-button-padding-x-mobile, var(--baza-spacing-md));
    }

    .baza-hero-parallax--mobile-compact-text .baza-hero-parallax__path-label {
        font-size: var(--baza-hero-parallax-compact-meta-size-mobile, 0.76rem);
    }
}

.baza-hero-parallax__demo-visual {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: clamp(18rem, 32vw, 30rem);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--baza-color-border-default) 70%, var(--baza-color-accent-primary) 30%);
    border-radius: var(--baza-radius-card);
    background:
        radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--baza-color-accent-soft) 30%, transparent), transparent 32%),
        radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--baza-color-surface-default) 88%, #ffffff 12%), color-mix(in srgb, var(--baza-color-background-muted) 76%, var(--baza-color-accent-primary) 24%));
    box-shadow: var(--baza-shadow-card);
}

.baza-hero-parallax__demo-browser {
    display: grid;
    height: 100%;
    min-height: inherit;
    grid-template-rows: auto 1fr;
}

.baza-hero-parallax__demo-topbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--baza-color-border-default) 72%, transparent);
    background: color-mix(in srgb, var(--baza-color-surface-default) 82%, transparent);
}

.baza-hero-parallax__demo-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-text-muted) 42%, transparent);
}

.baza-hero-parallax__demo-url {
    min-width: 0;
    margin-left: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-background-muted) 76%, transparent);
    color: var(--baza-color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.baza-hero-parallax__demo-canvas {
    position: relative;
    display: grid;
    gap: clamp(0.8rem, 1.4vw, 1.15rem);
    align-content: start;
    padding: clamp(1rem, 2vw, 1.6rem);
}

.baza-hero-parallax__demo-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.baza-hero-parallax__demo-brand {
    margin-right: auto;
    color: var(--baza-color-text-primary);
    font-weight: 900;
}

.baza-hero-parallax__demo-nav-item {
    width: clamp(2.4rem, 5vw, 4.2rem);
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-text-muted) 24%, transparent);
}

.baza-hero-parallax__demo-nav-item.is-active {
    background: var(--baza-color-accent-primary);
    box-shadow: 0 0 22px color-mix(in srgb, var(--baza-color-accent-primary) 22%, transparent);
}

.baza-hero-parallax__demo-hero-panel,
.baza-hero-parallax__demo-form {
    display: grid;
    gap: 0.65rem;
    padding: clamp(0.9rem, 1.8vw, 1.3rem);
    border: 1px solid color-mix(in srgb, var(--baza-color-border-default) 62%, var(--baza-color-accent-primary) 38%);
    border-radius: calc(var(--baza-radius-card) * 0.75);
    background: color-mix(in srgb, var(--baza-color-surface-default) 76%, transparent);
    backdrop-filter: blur(8px);
}

.baza-hero-parallax__demo-kicker,
.baza-hero-parallax__demo-form-label {
    width: fit-content;
    color: var(--baza-color-accent-primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.baza-hero-parallax__demo-title,
.baza-hero-parallax__demo-form-line {
    display: block;
    width: 82%;
    height: 0.72rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-text-primary) 76%, transparent);
}

.baza-hero-parallax__demo-title--short,
.baza-hero-parallax__demo-form-line--short {
    width: 56%;
    opacity: 0.55;
}

.baza-hero-parallax__demo-button {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.2rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: var(--baza-color-accent-primary);
    color: var(--baza-color-accent-contrast);
    font-size: 0.72rem;
    font-weight: 900;
    box-shadow: 0 0 26px color-mix(in srgb, var(--baza-color-accent-primary) 24%, transparent);
}

.baza-hero-parallax__demo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.baza-hero-parallax__demo-card {
    min-height: clamp(3.8rem, 6vw, 5.5rem);
    border: 1px solid color-mix(in srgb, var(--baza-color-border-default) 66%, transparent);
    border-radius: calc(var(--baza-radius-card) * 0.55);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--baza-color-surface-default) 82%, transparent), color-mix(in srgb, var(--baza-color-background-muted) 70%, transparent));
}

.baza-hero-parallax__demo-card--accent {
    border-color: color-mix(in srgb, var(--baza-color-accent-primary) 42%, var(--baza-color-border-default) 58%);
    background:
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--baza-color-accent-soft) 26%, transparent), transparent 36%),
        color-mix(in srgb, var(--baza-color-surface-default) 74%, var(--baza-color-accent-primary) 26%);
}

.baza-hero-parallax__demo-cursor {
    position: absolute;
    right: 22%;
    bottom: 24%;
    width: 1.15rem;
    height: 1.15rem;
    transform: rotate(-18deg);
    border: 2px solid var(--baza-color-accent-contrast);
    border-radius: 999px 999px 999px 0;
    background: var(--baza-color-accent-primary);
    box-shadow:
        0 0 0 0.32rem color-mix(in srgb, var(--baza-color-accent-primary) 16%, transparent),
        0 0 24px color-mix(in srgb, var(--baza-color-accent-primary) 32%, transparent);
}

.baza-hero-parallax--active-signature .baza-hero-parallax__demo-grid {
    grid-template-columns: 1.1fr 0.9fr 1.1fr;
}

.baza-hero-parallax--active-signature .baza-hero-parallax__demo-card {
    min-height: clamp(4.4rem, 7vw, 6.4rem);
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-visual {
    background:
        radial-gradient(circle at 76% 14%, color-mix(in srgb, var(--baza-color-accent-soft) 34%, transparent), transparent 32%),
        radial-gradient(circle at 18% 84%, color-mix(in srgb, var(--baza-color-accent-primary) 22%, transparent), transparent 38%),
        linear-gradient(145deg, #06131f, color-mix(in srgb, #06131f 74%, var(--baza-color-accent-primary) 26%));
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-topbar,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-hero-panel,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-form {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-brand,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-title,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-form-line {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.82);
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax__demo-cursor {
        box-shadow: 0 0 0 0.24rem color-mix(in srgb, var(--baza-color-accent-primary) 10%, transparent);
    }
}

@media (max-width: 782px) {
    .baza-hero-parallax__demo-visual {
        min-height: 15rem;
        aspect-ratio: 4 / 3;
    }

    .baza-hero-parallax__demo-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .baza-hero-parallax__demo-grid .baza-hero-parallax__demo-card:nth-child(n+2) {
        display: none;
    }
}

/* F8.33.1 rework: real demo page miniature, not placeholder mockup. */
.baza-hero-parallax__demo-visual {
    width: min(100%, 40rem);
    min-height: clamp(21rem, 34vw, 31rem);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: clamp(1rem, 1.5vw, 1.35rem);
    background:
        radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent), transparent 32%),
        linear-gradient(145deg, rgba(255, 248, 241, 0.96), rgba(236, 242, 231, 0.92));
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.baza-hero-parallax__demo-browser {
    display: grid;
    min-height: inherit;
    grid-template-rows: auto 1fr;
}

.baza-hero-parallax__demo-topbar {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.68rem 0.82rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 246, 240, 0.9);
}

.baza-hero-parallax__demo-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.24);
}

.baza-hero-parallax__demo-url {
    margin-left: 0.35rem;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.5);
    font-size: 0.68rem;
    font-weight: 800;
}

.baza-hero-parallax__demo-page {
    display: grid;
    align-content: start;
    gap: clamp(0.85rem, 1.3vw, 1.15rem);
    min-height: 100%;
    padding: clamp(0.9rem, 1.45vw, 1.25rem);
}

.baza-hero-parallax__demo-page-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.6rem;
    padding: 0.58rem 0.7rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.baza-hero-parallax__demo-page-brand {
    margin-right: auto;
    color: #102033;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.baza-hero-parallax__demo-page-link,
.baza-hero-parallax__demo-page-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0 0.58rem;
    border-radius: 999px;
    color: rgba(16, 32, 51, 0.68);
    font-size: 0.64rem;
    font-weight: 800;
    white-space: nowrap;
}

.baza-hero-parallax__demo-page-link.is-active {
    background: rgba(16, 32, 51, 0.08);
    color: #102033;
}

.baza-hero-parallax__demo-page-cta {
    background: color-mix(in srgb, var(--baza-color-accent-primary) 88%, #102033 12%);
    color: var(--baza-color-accent-contrast);
    box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--baza-color-accent-primary) 22%, transparent);
}

.baza-hero-parallax__demo-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
    gap: clamp(0.85rem, 1.5vw, 1.25rem);
    align-items: stretch;
    min-height: clamp(12rem, 18vw, 16.5rem);
    padding: clamp(1rem, 1.65vw, 1.45rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.5), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.32));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1.2rem 2.4rem rgba(15, 23, 42, 0.1);
}

.baza-hero-parallax__demo-page-copy {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.58rem;
    min-width: 0;
}

.baza-hero-parallax__demo-page-eyebrow {
    color: color-mix(in srgb, var(--baza-color-accent-primary) 80%, #102033 20%);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.baza-hero-parallax__demo-page-title {
    display: -webkit-box;
    max-width: 13rem;
    overflow: hidden;
    color: #102033;
    font-family: var(--baza-font-family-heading);
    font-size: clamp(1rem, 2vw, 1.55rem);
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.baza-hero-parallax__demo-page-lead {
    display: -webkit-box;
    max-width: 13rem;
    overflow: hidden;
    color: rgba(16, 32, 51, 0.64);
    font-size: 0.66rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.baza-hero-parallax__demo-page-button {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    margin-top: 0.12rem;
    padding: 0 0.78rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-accent-primary) 90%, #102033 10%);
    color: var(--baza-color-accent-contrast);
    font-size: 0.66rem;
    font-weight: 900;
    box-shadow: 0 0.95rem 1.8rem color-mix(in srgb, var(--baza-color-accent-primary) 22%, transparent);
}

.baza-hero-parallax__demo-page-media {
    position: relative;
    display: grid;
    align-content: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(16, 32, 51, 0.1);
    border-radius: 0.9rem;
    background:
        radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent), transparent 32%),
        linear-gradient(145deg, rgba(16, 32, 51, 0.12), rgba(255, 255, 255, 0.48));
}

.baza-hero-parallax__demo-page-media-line {
    width: 56%;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(16, 32, 51, 0.38);
}

.baza-hero-parallax__demo-page-media-card {
    display: block;
    min-height: clamp(4.2rem, 7vw, 6.1rem);
    border-radius: 0.72rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.55), color-mix(in srgb, var(--baza-color-accent-primary) 18%, rgba(16, 32, 51, 0.22)));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.baza-hero-parallax__demo-page-media-card--small {
    min-height: clamp(2.5rem, 4vw, 3.5rem);
    opacity: 0.72;
}

.baza-hero-parallax__demo-page-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.baza-hero-parallax__demo-page-strip span {
    min-height: clamp(3.8rem, 5vw, 5rem);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0.82rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(16, 32, 51, 0.1));
}

.baza-hero-parallax--active-signature .baza-hero-parallax__demo-visual {
    background:
        radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--baza-color-accent-primary) 22%, transparent), transparent 32%),
        linear-gradient(145deg, rgba(244, 239, 232, 0.98), rgba(231, 237, 244, 0.9));
}

.baza-hero-parallax--active-signature .baza-hero-parallax__demo-page-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-visual {
    border-color: rgba(255, 255, 255, 0.2);
    background:
        radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--baza-color-accent-primary) 24%, transparent), transparent 32%),
        linear-gradient(145deg, #07131f, color-mix(in srgb, #07131f 78%, var(--baza-color-accent-primary) 22%));
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-topbar,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-header,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-hero {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-brand,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-title {
    color: #ffffff;
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-link,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-lead {
    color: rgba(255, 255, 255, 0.66);
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-link.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-media,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-strip span {
    border-color: rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

@media (max-width: 782px) {
    .baza-hero-parallax__demo-visual {
        min-height: 18rem;
    }

    .baza-hero-parallax__demo-page-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .baza-hero-parallax__demo-page-media {
        display: none;
    }

    .baza-hero-parallax__demo-page-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .baza-hero-parallax__demo-page-strip span:nth-child(n+2) {
        display: none;
    }
}

/* F8.33.1 rework: client-facing copy and real contact panel in hero demo visual. */
.baza-hero-parallax__demo-page-brand {
    font-size: clamp(0.58rem, 1vw, 0.74rem);
}

.baza-hero-parallax__demo-page-contact {
    align-content: start;
    gap: 0.48rem;
    padding: clamp(0.72rem, 1.2vw, 1rem);
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--baza-color-accent-primary) 14%, transparent), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.34));
}

.baza-hero-parallax__demo-contact-label {
    color: color-mix(in srgb, var(--baza-color-accent-primary) 76%, #102033 24%);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.baza-hero-parallax__demo-contact-field,
.baza-hero-parallax__demo-contact-message {
    display: flex;
    align-items: center;
    min-height: 1.58rem;
    padding-inline: 0.58rem;
    border: 1px solid rgba(16, 32, 51, 0.08);
    border-radius: 0.58rem;
    background: rgba(255, 255, 255, 0.58);
    color: rgba(16, 32, 51, 0.46);
    font-size: 0.56rem;
    font-weight: 800;
}

.baza-hero-parallax__demo-contact-message {
    min-height: 3rem;
    align-items: flex-start;
    padding-top: 0.48rem;
}

.baza-hero-parallax__demo-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.56rem;
    padding-inline: 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-accent-primary) 90%, #102033 10%);
    color: var(--baza-color-accent-contrast);
    font-size: 0.56rem;
    font-weight: 900;
    box-shadow: 0 0.8rem 1.7rem color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent);
}

.baza-hero-parallax__demo-page-strip span {
    display: grid;
    place-items: center;
    color: rgba(16, 32, 51, 0.58);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.baza-hero-parallax--active-signature .baza-hero-parallax__demo-page-eyebrow {
    color: color-mix(in srgb, var(--baza-color-accent-primary) 70%, #1f2937 30%);
}

.baza-hero-parallax--active-signature .baza-hero-parallax__demo-page-contact {
    background:
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--baza-color-accent-primary) 16%, transparent), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(232, 238, 246, 0.44));
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-contact-label,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-eyebrow {
    color: color-mix(in srgb, var(--baza-color-accent-primary) 78%, #ffffff 22%);
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-contact-field,
.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-contact-message {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.54);
}

.baza-hero-parallax--active-atelier .baza-hero-parallax__demo-page-strip span {
    color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 782px) {
    .baza-hero-parallax__demo-page-contact {
        display: none;
    }
}

/* F8.33.2 animated demo miniature interactions. */
.baza-hero-parallax__demo-page {
    position: relative;
}

.baza-hero-parallax__demo-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 0.92rem;
    height: 0.92rem;
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-accent-primary) 88%, #102033 12%);
    box-shadow:
        0 0.65rem 1.3rem rgba(15, 23, 42, 0.22),
        0 0 0 0.28rem color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent);
    pointer-events: none;
    transform: translate(70%, 70%);
    animation: baza-demo-cursor-essential 8.5s cubic-bezier(0.66, 0, 0.18, 1) infinite;
}

.baza-hero-parallax__demo-cursor::after {
    content: "";
    position: absolute;
    top: 58%;
    left: 58%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid rgba(255, 255, 255, 0.92);
    border-bottom: 2px solid rgba(255, 255, 255, 0.92);
    transform: rotate(-18deg);
    transform-origin: top left;
}

.baza-hero-parallax__demo-page [data-baza-demo-target] {
    position: relative;
    isolation: isolate;
}

.baza-hero-parallax__demo-page [data-baza-demo-target]::after {
    content: "";
    position: absolute;
    inset: -0.18rem;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    background: color-mix(in srgb, var(--baza-color-accent-primary) 22%, transparent);
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent);
    pointer-events: none;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-essential;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="signature"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-signature;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-atelier;
    animation-duration: 10.5s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-custom;
    animation-duration: 9.5s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"]::after {
    animation: baza-demo-target-pulse 8.5s linear infinite;
    animation-delay: 1.25s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="field-email"]::after {
    animation: baza-demo-target-pulse 8.5s linear infinite;
    animation-delay: 2.75s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="form-submit"]::after {
    animation: baza-demo-target-pulse 8.5s linear infinite;
    animation-delay: 4.2s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="signature"] [data-baza-demo-target="nav-offer"]::after {
    animation: baza-demo-target-pulse 8.5s linear infinite;
    animation-delay: 0.9s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="signature"] [data-baza-demo-target="strip-proof"]::after {
    animation: baza-demo-target-pulse 8.5s linear infinite;
    animation-delay: 2.35s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="signature"] [data-baza-demo-target="nav-contact"]::after {
    animation: baza-demo-target-pulse 8.5s linear infinite;
    animation-delay: 4s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] [data-baza-demo-target="hero-cta"]::after {
    animation: baza-demo-target-pulse 10.5s linear infinite;
    animation-delay: 1.8s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] [data-baza-demo-target="strip-proof"]::after {
    animation: baza-demo-target-pulse 10.5s linear infinite;
    animation-delay: 3.65s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] [data-baza-demo-target="form-submit"]::after {
    animation: baza-demo-target-pulse 10.5s linear infinite;
    animation-delay: 5.35s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] .baza-hero-parallax__demo-page-contact {
    display: grid;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] .baza-hero-parallax__demo-page-hero {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] [data-baza-demo-target="field-scope"]::after {
    animation: baza-demo-target-pulse 9.5s linear infinite;
    animation-delay: 1.55s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] [data-baza-demo-target="field-message"]::after {
    animation: baza-demo-target-pulse 9.5s linear infinite;
    animation-delay: 3.1s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] [data-baza-demo-target="form-submit"]::after {
    animation: baza-demo-target-pulse 9.5s linear infinite;
    animation-delay: 4.85s;
}

@keyframes baza-demo-target-pulse {
    0%,
    13%,
    100% {
        opacity: 0;
        transform: scale(0.98);
    }

    18%,
    30% {
        opacity: 1;
        transform: scale(1);
    }

    38% {
        opacity: 0;
        transform: scale(1.01);
    }
}

@keyframes baza-demo-cursor-essential {
    0%,
    100% {
        transform: translate(68%, 72%);
    }

    18% {
        transform: translate(78%, 18%);
    }

    36% {
        transform: translate(67%, 50%);
    }

    54% {
        transform: translate(73%, 73%);
    }

    72% {
        transform: translate(48%, 38%);
    }
}

@keyframes baza-demo-cursor-signature {
    0%,
    100% {
        transform: translate(64%, 70%);
    }

    16% {
        transform: translate(55%, 18%);
    }

    34% {
        transform: translate(52%, 86%);
    }

    54% {
        transform: translate(81%, 18%);
    }

    76% {
        transform: translate(67%, 68%);
    }
}

@keyframes baza-demo-cursor-atelier {
    0%,
    100% {
        transform: translate(72%, 72%);
    }

    18% {
        transform: translate(39%, 58%);
    }

    38% {
        transform: translate(52%, 86%);
    }

    58% {
        transform: translate(74%, 74%);
    }

    78% {
        transform: translate(30%, 31%);
    }
}

@keyframes baza-demo-cursor-custom {
    0%,
    100% {
        transform: translate(74%, 76%);
    }

    18% {
        transform: translate(70%, 58%);
    }

    38% {
        transform: translate(70%, 71%);
    }

    58% {
        transform: translate(75%, 82%);
    }

    78% {
        transform: translate(39%, 38%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax__demo-cursor,
    .baza-hero-parallax__demo-page [data-baza-demo-target]::after {
        animation: none !important;
    }

    .baza-hero-parallax__demo-cursor {
        transform: translate(72%, 72%);
        opacity: 0.7;
    }

    .baza-hero-parallax__demo-page [data-baza-demo-target]::after {
        opacity: 0 !important;
    }
}

/* F8.33.2 rework: pointer cursor and real miniature movement. */
.baza-hero-parallax__demo-cursor {
    top: 18%;
    left: 16%;
    width: 1.15rem;
    height: 1.45rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter:
        drop-shadow(0 0.55rem 0.8rem rgba(15, 23, 42, 0.28))
        drop-shadow(0 0 0.45rem color-mix(in srgb, var(--baza-color-accent-primary) 26%, transparent));
    transform: rotate(-12deg);
    transform-origin: 0 0;
    animation: baza-demo-cursor-essential 8.5s cubic-bezier(0.66, 0, 0.18, 1) infinite;
}

.baza-hero-parallax__demo-cursor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    clip-path: polygon(
        0% 0%,
        0% 92%,
        28% 68%,
        44% 100%,
        63% 90%,
        48% 60%,
        84% 60%
    );
}

.baza-hero-parallax__demo-cursor::after {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0.08rem;
    width: 0.86rem;
    height: 1.08rem;
    border-right: 0;
    border-bottom: 0;
    background: color-mix(in srgb, var(--baza-color-accent-primary) 92%, #102033 8%);
    clip-path: polygon(
        0% 0%,
        0% 90%,
        28% 66%,
        43% 98%,
        58% 90%,
        44% 57%,
        80% 57%
    );
    transform: none;
    opacity: 0.94;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-essential-v2;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="signature"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-signature-v2;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-atelier-v2;
    animation-duration: 10.5s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] .baza-hero-parallax__demo-cursor {
    animation-name: baza-demo-cursor-custom-v2;
    animation-duration: 9.5s;
}

@keyframes baza-demo-cursor-essential-v2 {
    0%,
    100% {
        left: 16%;
        top: 20%;
        transform: rotate(-12deg) scale(1);
    }

    18% {
        left: 84%;
        top: 14%;
        transform: rotate(-10deg) scale(1);
    }

    34% {
        left: 69%;
        top: 47%;
        transform: rotate(-8deg) scale(0.96);
    }

    50% {
        left: 79%;
        top: 71%;
        transform: rotate(-8deg) scale(0.96);
    }

    68% {
        left: 23%;
        top: 62%;
        transform: rotate(-12deg) scale(1);
    }

    84% {
        left: 52%;
        top: 82%;
        transform: rotate(-10deg) scale(1);
    }
}

@keyframes baza-demo-cursor-signature-v2 {
    0%,
    100% {
        left: 18%;
        top: 22%;
        transform: rotate(-12deg) scale(1);
    }

    16% {
        left: 63%;
        top: 14%;
        transform: rotate(-10deg) scale(1);
    }

    32% {
        left: 53%;
        top: 84%;
        transform: rotate(-8deg) scale(0.96);
    }

    50% {
        left: 84%;
        top: 14%;
        transform: rotate(-10deg) scale(1);
    }

    68% {
        left: 77%;
        top: 71%;
        transform: rotate(-8deg) scale(0.96);
    }

    84% {
        left: 24%;
        top: 61%;
        transform: rotate(-12deg) scale(1);
    }
}

@keyframes baza-demo-cursor-atelier-v2 {
    0%,
    100% {
        left: 18%;
        top: 22%;
        transform: rotate(-12deg) scale(1);
    }

    20% {
        left: 27%;
        top: 62%;
        transform: rotate(-8deg) scale(0.98);
    }

    40% {
        left: 52%;
        top: 84%;
        transform: rotate(-10deg) scale(1);
    }

    60% {
        left: 79%;
        top: 71%;
        transform: rotate(-8deg) scale(0.96);
    }

    80% {
        left: 84%;
        top: 14%;
        transform: rotate(-10deg) scale(1);
    }
}

@keyframes baza-demo-cursor-custom-v2 {
    0%,
    100% {
        left: 17%;
        top: 22%;
        transform: rotate(-12deg) scale(1);
    }

    18% {
        left: 70%;
        top: 55%;
        transform: rotate(-8deg) scale(0.96);
    }

    38% {
        left: 70%;
        top: 67%;
        transform: rotate(-8deg) scale(0.96);
    }

    58% {
        left: 72%;
        top: 79%;
        transform: rotate(-8deg) scale(0.96);
    }

    78% {
        left: 84%;
        top: 14%;
        transform: rotate(-10deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax__demo-cursor {
        top: 72%;
        left: 78%;
        transform: rotate(-12deg);
    }
}

/* F8.33.2 rework: synchronized demo scenarios. */
.baza-hero-parallax__demo-scenario {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.baza-hero-parallax__demo-popup {
    position: absolute;
    right: clamp(0.85rem, 2vw, 1.25rem);
    bottom: clamp(0.85rem, 2vw, 1.25rem);
    display: grid;
    gap: 0.42rem;
    width: min(46%, 13rem);
    padding: 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 0.82rem;
    background:
        radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--baza-color-accent-primary) 16%, transparent), transparent 36%),
        rgba(255, 255, 255, 0.82);
    box-shadow:
        0 1.2rem 2.4rem rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    opacity: 0;
    transform: translateY(0.75rem) scale(0.96);
}

.baza-hero-parallax__demo-popup-title {
    color: color-mix(in srgb, var(--baza-color-accent-primary) 72%, #102033 28%);
    font-size: 0.56rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.baza-hero-parallax__demo-popup-field,
.baza-hero-parallax__demo-service,
.baza-hero-parallax__demo-opinion,
.baza-hero-parallax__demo-tech {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
    padding: 0.34rem 0.48rem;
    overflow: hidden;
    border: 1px solid rgba(16, 32, 51, 0.08);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(16, 32, 51, 0.62);
    font-size: 0.52rem;
    font-weight: 850;
    white-space: nowrap;
}

.baza-hero-parallax__demo-service strong {
    color: #102033;
    font-weight: 950;
}

.baza-hero-parallax__demo-opinion {
    min-height: 2.8rem;
    align-items: flex-start;
    white-space: normal;
    line-height: 1.25;
}

.baza-hero-parallax__demo-popup-field--typed span {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.baza-hero-parallax__demo-popup-field--selected {
    border-color: color-mix(in srgb, var(--baza-color-accent-primary) 28%, rgba(16, 32, 51, 0.1));
    background: color-mix(in srgb, var(--baza-color-accent-primary) 12%, rgba(255, 255, 255, 0.78));
    color: #102033;
}

.baza-hero-parallax__demo-popup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.45rem;
    padding: 0 0.62rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-accent-primary) 90%, #102033 10%);
    color: var(--baza-color-accent-contrast);
    font-size: 0.5rem;
    font-weight: 950;
    box-shadow: 0 0.7rem 1.4rem color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent);
}

.baza-hero-parallax__demo-tech {
    justify-content: flex-start;
    gap: 0.35rem;
}

.baza-hero-parallax__demo-tech::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--baza-color-accent-primary) 80%, #ffffff 20%);
    box-shadow: 0 0 0.65rem color-mix(in srgb, var(--baza-color-accent-primary) 32%, transparent);
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential {
    animation: baza-demo-popup-essential 14s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup-field--typed span {
    animation: baza-demo-type-name 14s steps(12, end) infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="signature"] .baza-hero-parallax__demo-popup--signature {
    left: clamp(0.85rem, 2vw, 1.25rem);
    right: auto;
    bottom: clamp(0.85rem, 2vw, 1.25rem);
    width: min(50%, 14rem);
    animation: baza-demo-popup-signature 15.5s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] .baza-hero-parallax__demo-popup--atelier {
    right: clamp(0.85rem, 2vw, 1.25rem);
    top: 38%;
    bottom: auto;
    background:
        radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent), transparent 36%),
        rgba(15, 23, 42, 0.74);
    animation: baza-demo-popup-atelier 17s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] .baza-hero-parallax__demo-popup--atelier .baza-hero-parallax__demo-popup-title,
.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] .baza-hero-parallax__demo-tech {
    color: rgba(255, 255, 255, 0.84);
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] .baza-hero-parallax__demo-tech {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] .baza-hero-parallax__demo-popup--custom {
    animation: baza-demo-popup-custom 15s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-essential-v3 14s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="signature"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-signature-v3 15.5s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="atelier"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-atelier-v3 17s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="custom"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-custom-v3 15s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

@keyframes baza-demo-popup-essential {
    0%,
    18%,
    100% {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.96);
    }

    24%,
    82% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes baza-demo-type-name {
    0%,
    31% {
        max-width: 0;
    }

    45%,
    100% {
        max-width: 7rem;
    }
}

@keyframes baza-demo-popup-signature {
    0%,
    14%,
    100% {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.96);
    }

    20%,
    78% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes baza-demo-popup-atelier {
    0%,
    16%,
    100% {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.96);
    }

    24%,
    82% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes baza-demo-popup-custom {
    0%,
    16%,
    100% {
        opacity: 0;
        transform: translateY(0.75rem) scale(0.96);
    }

    22%,
    80% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes baza-demo-cursor-essential-v3 {
    0%,
    100% {
        left: 17%;
        top: 21%;
    }

    14%,
    19% {
        left: 84%;
        top: 14%;
    }

    28%,
    38% {
        left: 67%;
        top: 51%;
    }

    48%,
    58% {
        left: 68%;
        top: 61%;
    }

    68%,
    78% {
        left: 78%;
        top: 74%;
    }

    88% {
        left: 24%;
        top: 62%;
    }
}

@keyframes baza-demo-cursor-signature-v3 {
    0%,
    100% {
        left: 18%;
        top: 22%;
    }

    14%,
    23% {
        left: 63%;
        top: 14%;
    }

    34%,
    50% {
        left: 28%;
        top: 78%;
    }

    62%,
    76% {
        left: 47%;
        top: 78%;
    }

    86% {
        left: 84%;
        top: 14%;
    }
}

@keyframes baza-demo-cursor-atelier-v3 {
    0%,
    100% {
        left: 18%;
        top: 22%;
    }

    18%,
    29% {
        left: 31%;
        top: 61%;
    }

    40%,
    52% {
        left: 74%;
        top: 48%;
    }

    62%,
    74% {
        left: 75%;
        top: 62%;
    }

    84% {
        left: 78%;
        top: 74%;
    }
}

@keyframes baza-demo-cursor-custom-v3 {
    0%,
    100% {
        left: 17%;
        top: 22%;
    }

    18%,
    30% {
        left: 70%;
        top: 58%;
    }

    42%,
    54% {
        left: 70%;
        top: 71%;
    }

    66%,
    78% {
        left: 77%;
        top: 80%;
    }

    88% {
        left: 84%;
        top: 14%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax__demo-popup,
    .baza-hero-parallax__demo-popup-field--typed span {
        animation: none !important;
    }

    .baza-hero-parallax__demo-popup--essential {
        opacity: 1;
        transform: none;
    }
}

/* F8.33.2 rework: Essential click-to-popup scenario. */
.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-page-contact {
    opacity: 0;
    visibility: hidden;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-page-hero {
    grid-template-columns: minmax(0, 1fr);
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"]::after {
    animation: baza-demo-essential-contact-click 18s ease-in-out infinite;
    animation-delay: 0s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"] {
    animation: baza-demo-essential-contact-button 18s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential {
    top: 25%;
    right: 7%;
    bottom: auto;
    width: min(46%, 13.4rem);
    z-index: 7;
    animation: baza-demo-popup-essential-v2 18s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed {
    animation: baza-demo-essential-field-focus 18s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed span {
    animation: baza-demo-type-name-v2 18s steps(12, end) infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--selected {
    animation: baza-demo-essential-scope-select 18s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-button {
    animation: baza-demo-essential-submit-click 18s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-essential-v4 18s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

@keyframes baza-demo-essential-contact-click {
    0%,
    9%,
    17%,
    100% {
        opacity: 0;
        transform: scale(0.96);
    }

    10%,
    15% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes baza-demo-essential-contact-button {
    0%,
    9%,
    17%,
    100% {
        transform: scale(1);
        box-shadow: none;
    }

    10%,
    15% {
        transform: scale(0.96);
        box-shadow: 0 0 0 0.32rem color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent);
    }
}

@keyframes baza-demo-popup-essential-v2 {
    0%,
    15% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.8rem) scale(0.94);
    }

    19%,
    82% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    90%,
    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.5rem) scale(0.97);
    }
}

@keyframes baza-demo-type-name-v2 {
    0%,
    30% {
        max-width: 0;
    }

    50%,
    100% {
        max-width: 7rem;
    }
}

@keyframes baza-demo-essential-field-focus {
    0%,
    24%,
    55%,
    100% {
        border-color: rgba(16, 32, 51, 0.08);
        box-shadow: none;
    }

    28%,
    50% {
        border-color: color-mix(in srgb, var(--baza-color-accent-primary) 38%, rgba(16, 32, 51, 0.12));
        box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--baza-color-accent-primary) 12%, transparent);
    }
}

@keyframes baza-demo-essential-scope-select {
    0%,
    53%,
    67%,
    100% {
        transform: scale(1);
    }

    57%,
    63% {
        transform: scale(1.03);
        box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--baza-color-accent-primary) 13%, transparent);
    }
}

@keyframes baza-demo-essential-submit-click {
    0%,
    69%,
    84%,
    100% {
        transform: scale(1);
    }

    74%,
    80% {
        transform: scale(0.96);
        box-shadow:
            0 0.7rem 1.4rem color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent),
            0 0 0 0.22rem color-mix(in srgb, var(--baza-color-accent-primary) 18%, transparent);
    }
}

@keyframes baza-demo-cursor-essential-v4 {
    0%,
    100% {
        left: 17%;
        top: 21%;
        transform: rotate(-12deg) scale(1);
    }

    8%,
    15% {
        left: 84%;
        top: 14%;
        transform: rotate(-10deg) scale(0.96);
    }

    24%,
    28% {
        left: 63%;
        top: 42%;
        transform: rotate(-9deg) scale(1);
    }

    36%,
    48% {
        left: 63%;
        top: 42%;
        transform: rotate(-9deg) scale(0.98);
    }

    56%,
    64% {
        left: 63%;
        top: 55%;
        transform: rotate(-9deg) scale(0.98);
    }

    74%,
    81% {
        left: 69%;
        top: 75%;
        transform: rotate(-9deg) scale(0.95);
    }

    90% {
        left: 24%;
        top: 62%;
        transform: rotate(-12deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed span,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--selected,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-button,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"],
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"]::after {
        animation: none !important;
    }

    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* F8.33.2 rework: Essential real form popup final timing. */
.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-page-contact {
    opacity: 0 !important;
    visibility: hidden !important;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential {
    top: 18%;
    right: 6%;
    bottom: auto;
    width: min(50%, 14.8rem);
    gap: 0.36rem;
    padding: 0.82rem;
    z-index: 7;
    animation: baza-demo-popup-essential-v5 20s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-title {
    margin-bottom: 0.08rem;
    font-size: 0.56rem;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field {
    min-height: 1.32rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.5rem;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-message {
    min-height: 2.3rem;
    align-items: flex-start;
    white-space: normal;
    line-height: 1.25;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"] {
    animation: baza-demo-essential-contact-button-v5 20s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"]::after {
    animation: baza-demo-essential-contact-click-v5 20s ease-in-out infinite;
    animation-delay: 0s;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed {
    animation: baza-demo-essential-name-focus-v5 20s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed span {
    animation: baza-demo-type-name-v5 20s steps(12, end) infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-button {
    animation: baza-demo-essential-submit-click-v5 20s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-essential-v5 20s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

@keyframes baza-demo-essential-contact-click-v5 {
    0%,
    8%,
    17%,
    100% {
        opacity: 0;
        transform: scale(0.96);
    }

    9%,
    14% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes baza-demo-essential-contact-button-v5 {
    0%,
    8%,
    17%,
    100% {
        transform: scale(1);
        box-shadow: none;
    }

    9%,
    14% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0.34rem color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent);
    }
}

@keyframes baza-demo-popup-essential-v5 {
    0%,
    15% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.75rem) scale(0.94);
    }

    21%,
    78% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    86%,
    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.45rem) scale(0.97);
    }
}

@keyframes baza-demo-essential-name-focus-v5 {
    0%,
    24%,
    56%,
    100% {
        border-color: rgba(16, 32, 51, 0.08);
        box-shadow: none;
    }

    29%,
    52% {
        border-color: color-mix(in srgb, var(--baza-color-accent-primary) 42%, rgba(16, 32, 51, 0.12));
        box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--baza-color-accent-primary) 13%, transparent);
    }
}

@keyframes baza-demo-type-name-v5 {
    0%,
    31% {
        max-width: 0;
    }

    54%,
    100% {
        max-width: 7rem;
    }
}

@keyframes baza-demo-essential-submit-click-v5 {
    0%,
    63%,
    82%,
    100% {
        transform: scale(1);
    }

    69%,
    76% {
        transform: scale(0.93);
        box-shadow:
            0 0.7rem 1.4rem color-mix(in srgb, var(--baza-color-accent-primary) 24%, transparent),
            0 0 0 0.24rem color-mix(in srgb, var(--baza-color-accent-primary) 22%, transparent);
    }
}

@keyframes baza-demo-cursor-essential-v5 {
    0%,
    100% {
        left: 17%;
        top: 21%;
        transform: rotate(-12deg) scale(1);
    }

    8%,
    14% {
        left: 84%;
        top: 14%;
        transform: rotate(-10deg) scale(0.95);
    }

    25%,
    31% {
        left: 63%;
        top: 34%;
        transform: rotate(-9deg) scale(1);
    }

    36%,
    53% {
        left: 63%;
        top: 34%;
        transform: rotate(-9deg) scale(0.98);
    }

    66%,
    76% {
        left: 73%;
        top: 76%;
        transform: rotate(-9deg) scale(0.93);
    }

    86% {
        left: 24%;
        top: 62%;
        transform: rotate(-12deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed span,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-button,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"],
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"]::after {
        animation: none !important;
    }

    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* F8.33.2 rework: Essential cursor alignment. */
.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--selected {
    animation: none !important;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-button {
    transform-origin: center;
    animation: baza-demo-essential-submit-click-v6 22s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed {
    animation: baza-demo-essential-name-focus-v6 22s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed span {
    animation: baza-demo-type-name-v6 22s steps(12, end) infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential {
    animation: baza-demo-popup-essential-v6 22s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"] {
    animation: baza-demo-essential-contact-button-v6 22s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"]::after {
    animation: baza-demo-essential-contact-click-v6 22s ease-in-out infinite;
}

.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-essential-v6 22s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

@keyframes baza-demo-popup-essential-v6 {
    0%,
    15% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.75rem) scale(0.94);
    }

    20%,
    78% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    86%,
    100% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.45rem) scale(0.97);
    }
}

@keyframes baza-demo-essential-contact-click-v6 {
    0%,
    8%,
    17%,
    100% {
        opacity: 0;
        transform: scale(0.96);
    }

    9%,
    14% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes baza-demo-essential-contact-button-v6 {
    0%,
    8%,
    17%,
    100% {
        transform: scale(1);
        box-shadow: none;
    }

    9%,
    14% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0.34rem color-mix(in srgb, var(--baza-color-accent-primary) 20%, transparent);
    }
}

@keyframes baza-demo-essential-name-focus-v6 {
    0%,
    24%,
    58%,
    100% {
        border-color: rgba(16, 32, 51, 0.08);
        box-shadow: none;
    }

    30%,
    54% {
        border-color: color-mix(in srgb, var(--baza-color-accent-primary) 42%, rgba(16, 32, 51, 0.12));
        box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--baza-color-accent-primary) 13%, transparent);
    }
}

@keyframes baza-demo-type-name-v6 {
    0%,
    32% {
        max-width: 0;
    }

    54%,
    100% {
        max-width: 7rem;
    }
}

@keyframes baza-demo-essential-submit-click-v6 {
    0%,
    62%,
    82%,
    100% {
        transform: scale(1);
    }

    68%,
    76% {
        transform: scale(0.92);
        box-shadow:
            0 0.7rem 1.4rem color-mix(in srgb, var(--baza-color-accent-primary) 24%, transparent),
            0 0 0 0.26rem color-mix(in srgb, var(--baza-color-accent-primary) 24%, transparent);
    }
}

@keyframes baza-demo-cursor-essential-v6 {
    0%,
    100% {
        left: 17%;
        top: 21%;
        transform: rotate(-12deg) scale(1);
    }

    /* Click Kontakt. */
    8%,
    15% {
        left: 89%;
        top: 18%;
        transform: rotate(-10deg) scale(0.94);
    }

    /* Popup appears. */
    20%,
    24% {
        left: 89%;
        top: 18%;
        transform: rotate(-10deg) scale(1);
    }

    /* Move to first field. */
    30%,
    34% {
        left: 56%;
        top: 39%;
        transform: rotate(-9deg) scale(1);
    }

    /* Stop while Jan Kowalski is typed. */
    38%,
    56% {
        left: 56%;
        top: 39%;
        transform: rotate(-9deg) scale(0.98);
    }

    /* Move straight to submit. */
    66%,
    76% {
        left: 59%;
        top: 69%;
        transform: rotate(-9deg) scale(0.92);
    }

    /* Leave after submit while popup hides. */
    88% {
        left: 24%;
        top: 62%;
        transform: rotate(-12deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-field--typed span,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-popup--essential .baza-hero-parallax__demo-popup-button,
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"],
    .baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] [data-baza-demo-target="nav-contact"]::after {
        animation: none !important;
    }
}

/* F8.33.2 rework: Essential cursor alignment v2. */
.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-essential-v7 22s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

@keyframes baza-demo-cursor-essential-v7 {
    0%,
    100% {
        left: 17%;
        top: 21%;
        transform: rotate(-12deg) scale(1);
    }

    /* Click Kontakt — raised from 18% to 14.5%. */
    8%,
    15% {
        left: 89%;
        top: 14.5%;
        transform: rotate(-10deg) scale(0.94);
    }

    /* Hold while popup appears. */
    20%,
    24% {
        left: 89%;
        top: 14.5%;
        transform: rotate(-10deg) scale(1);
    }

    /* Move to first field. */
    30%,
    34% {
        left: 56%;
        top: 39%;
        transform: rotate(-9deg) scale(1);
    }

    /* Stop while Jan Kowalski is typed. */
    38%,
    56% {
        left: 56%;
        top: 39%;
        transform: rotate(-9deg) scale(0.98);
    }

    /* Click Wyślij zapytanie — raised from 69% to 64%. */
    66%,
    76% {
        left: 59%;
        top: 64%;
        transform: rotate(-9deg) scale(0.92);
    }

    /* Leave after submit while popup hides. */
    86% {
        left: 24%;
        top: 62%;
        transform: rotate(-12deg) scale(1);
    }
}

/* F8.33.2 rework: Essential contact cursor final lift. */
.baza-hero-parallax__demo-visual[data-baza-hero-parallax-demo-state="essential"] .baza-hero-parallax__demo-cursor {
    animation: baza-demo-cursor-essential-v8 22s cubic-bezier(0.55, 0, 0.18, 1) infinite;
}

@keyframes baza-demo-cursor-essential-v8 {
    0%,
    100% {
        left: 17%;
        top: 21%;
        transform: rotate(-12deg) scale(1);
    }

    /* Click Kontakt — lifted. */
    8%,
    15% {
        left: 89%;
        top: 11.8%;
        transform: rotate(-10deg) scale(0.94);
    }

    /* Hold while popup appears. */
    20%,
    24% {
        left: 89%;
        top: 11.8%;
        transform: rotate(-10deg) scale(1);
    }

    /* Move to first field. */
    30%,
    34% {
        left: 56%;
        top: 39%;
        transform: rotate(-9deg) scale(1);
    }

    /* Stop while Jan Kowalski is typed. */
    38%,
    56% {
        left: 56%;
        top: 39%;
        transform: rotate(-9deg) scale(0.98);
    }

    /* Click Wyślij zapytanie — unchanged from approved state. */
    66%,
    76% {
        left: 59%;
        top: 64%;
        transform: rotate(-9deg) scale(0.92);
    }

    /* Leave after submit while popup hides. */
    86% {
        left: 24%;
        top: 62%;
        transform: rotate(-12deg) scale(1);
    }
}