@media (max-width: 1024px),
(hover: none) and (pointer: coarse) {

    .split,
    .grid--2,
    .grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .split {
        gap: 36px;
    }

    .split--reverse .split__text,
    .split--reverse .split__demo {
        order: 0;
    }

    .section {
        padding: 76px 0;
    }

    .hero {
        padding: 132px 0 64px;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .hero__facts {
        width: 100%;
        gap: 16px 20px;
    }

    #scenes {
        min-height: 0;
        padding: 200px 0 72px;
    }

    .scenes__stage .fan {
        margin-top: 0;
        margin-bottom: -200px;
        top: -450px;
    }

    .fan-card--left,
    .fan-card--right {
        flex: none;
        zoom: 0.46;
    }

    .scenes__stage .fan-card--left {
        animation: fan-drift-left 5s ease-in-out infinite;
    }

    .scenes__stage .fan-card--right {
        animation: fan-drift-right 6s ease-in-out infinite;
    }

    .scenes__stage .fan-card--player.is-playing {
        animation: fan-drift-left 5s ease-in-out infinite, fan-pulse 2s ease-in-out infinite;
    }

    .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--bg-page);
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 68px;
    }

    .site-header .site-header__nav {
        display: none;
    }

    .brand__stage {
        display: none;
    }

    .site-header .site-header__actions {
        gap: 8px;
    }

    .site-header .site-header__actions .btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .mobile-notice {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: grid;
        place-items: center;
        padding: 24px;
        background: rgba(8, 10, 16, 0.2);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .mobile-notice[hidden] {
        display: none;
    }

    .mobile-notice__card {
        width: 100%;
        max-width: 420px;
        padding: 26px 22px 22px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-strong);
        background: color-mix(in srgb, var(--surface-strong) 42%, transparent);
        backdrop-filter: blur(12px) saturate(130%);
        -webkit-backdrop-filter: blur(12px) saturate(130%);
        box-shadow: var(--shadow);
        text-align: center;
    }

    .mobile-notice__icon {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        margin: 0 auto 12px;
        border-radius: 50%;
        background: var(--accent-soft);
        color: var(--accent-light);
    }

    .mobile-notice__title {
        margin-bottom: 10px;
        font-size: 22px;
    }

    .mobile-notice__text {
        margin: 0 0 20px;
        font-size: 15px;
        color: var(--text-dim);
    }

    .mobile-notice__btn {
        padding: 11px 22px;
        font-size: 14px;
    }

    .mobile-notice__btn:hover {
        box-shadow: 0 12px 26px rgba(184, 142, 104, 0.32);
    }
}

@keyframes fan-drift-left {

    0%,
    100% {
        transform: rotate(-6deg) translateX(-20px) translateY(0) translateZ(0);
    }

    50% {
        transform: rotate(-3deg) translateX(-20px) translateY(-24px) translateZ(0);
    }
}

@keyframes fan-drift-right {

    0%,
    100% {
        transform: rotate(6deg) translateX(20px) translateY(0) translateZ(0);
    }

    50% {
        transform: rotate(3deg) translateX(20px) translateY(-24px) translateZ(0);
    }
}