/* Основные стили из вашего CSS */
        :root {
            --primary-color: #3f66ff;
            --secondary-color: #77afee;
            --accent-cyan: #09fbd3;
            --accent-pink: #fe53bb;
            --dark-bg: #1d1b33;
            --card-bg: #262342;
            --text-light: #f2f2f2;
            --text-gray: #c6c5d4;
        }


        /* Стили для телефона */
        .phone-container {
            position: relative;
            width: 320px;
            //margin: 2rem auto;
        }

        .phone {
            position: relative;
            width: 100%;
            height: 340px;
        }

        .phone-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 10;
            pointer-events: none;
        }

        .phone-screen {
                position: absolute;
    top: 12px;
    left: 82px;
    width: 153px;
    height: 318px;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    z-index: 5;
        }

        /* Боковые кнопки для телефона */
        .phone-controls {
            position: absolute;
            top: 50%;
            left: -11px;
            right: -11px;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            z-index: 15;
        }

        .control-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .control-btn:hover {
            transform: scale(1.1);
        }

        /* Карусель внутри экрана телефона */
        .screen-content {
            width: 100%;
            height: 100%;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .owl-carousel {
            width: 100%;
            height: 100%;
        }

        .owl-carousel .owl-stage-outer,
        .owl-carousel .owl-stage,
        .owl-carousel .owl-item {
            height: 100%;
        }

        .screenshot {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #111;
        }

        .screenshot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
        }

        /* Кастомизация Owl Carousel */
        .owl-theme .owl-nav {
            display: none; /* Скрываем стандартные кнопки Owl Carousel */
        }

        .owl-theme .owl-dots {
            position: absolute;
            bottom: 20px;
            width: 100%;
        }

        .owl-theme .owl-dots .owl-dot span {
            background: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
            width: 8px;
            height: 8px;
            margin: 0 4px;
        }

        .owl-theme .owl-dots .owl-dot.active span,
        .owl-theme .owl-dots .owl-dot:hover span {
            background: var(--accent-cyan);
            transform: scale(1.2);
        }

        /* Заголовок */
        .section-title {
            text-align: center;
            margin-bottom: 2rem;
        }

        .section-title h1 {
            font-size: 2.5rem;
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-pink) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1rem;
        }

        .section-title p {
            color: var(--text-gray);
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Индикатор текущего скриншота */
        .screenshot-counter {
            margin-top: 2rem;
            text-align: center;
            color: var(--text-gray);
            font-size: 1rem;
        }

        .counter-current {
            color: var(--accent-cyan);
            font-weight: bold;
        }

        .counter-total {
            color: var(--text-light);
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            .phone-container {
                width: 300px;
            }
            
            .phone {
                height: 600px;
            }
            
            .phone-screen {
                top: 54px;
                left: 20px;
                width: 260px;
                height: 460px;
            }
            
            .section-title h1 {
                font-size: 2rem;
            }
            
            .section-title p {
                font-size: 1rem;
            }
            
            .control-btn {
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }
            
            .phone-controls {
                left: -70px;
                right: -70px;
            }
        }

        @media (max-width: 480px) {
            .section-title h1 {
                font-size: 1.75rem;
            }
            
            .phone-container {
                width: 280px;
            }
            
            .phone {
                height: 560px;
            }
            
            .phone-screen {
                top: 50px;
                left: 18px;
                width: 244px;
                height: 430px;
            }
            
            .phone-controls {
                left: -60px;
                right: -60px;
            }
            
            .control-btn {
                width: 45px;
                height: 45px;
                font-size: 1.1rem;
            }
            
            .screenshot-counter {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 360px) {
            .phone-container {
                width: 260px;
            }
            
            .phone {
                height: 520px;
            }
            
            .phone-screen {
                top: 46px;
                left: 17px;
                width: 226px;
                height: 400px;
            }
            
            .phone-controls {
                left: -50px;
                right: -50px;
            }
            
            .control-btn {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }
        }
		
		        .swiper {
            margin-left: auto;
            margin-right: auto;
            position: relative;
            overflow: hidden;
            list-style: none;
            padding: 0;
            z-index: 1;
            display: block
        }

        .swiper-vertical>.swiper-wrapper {
            flex-direction: column
        }

        .swiper-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            transition-property: transform;
            transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
            box-sizing: content-box
        }

        .swiper-android .swiper-slide,
        .swiper-ios .swiper-slide,
        .swiper-wrapper {
            transform: translate3d(0, 0, 0)
        }

        .swiper-horizontal {
            touch-action: pan-y
        }

        .swiper-vertical {
            touch-action: pan-x
        }

        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
            transition-property: transform;
            display: block
        }

        .swiper-slide-invisible-blank {
            visibility: hidden
        }

        .swiper-autoheight,
        .swiper-autoheight .swiper-slide {
            height: auto
        }

        .swiper-autoheight .swiper-wrapper {
            align-items: flex-start;
            transition-property: transform, height
        }

        .swiper-backface-hidden .swiper-slide {
            transform: translateZ(0);
            backface-visibility: hidden
        }

        .swiper-3d.swiper-css-mode .swiper-wrapper {
            perspective: 1200px
        }

        .swiper-3d .swiper-wrapper {
            transform-style: preserve-3d
        }

        .swiper-3d {
            perspective: 1200px
        }

        .swiper-3d .swiper-cube-shadow,
        .swiper-3d .swiper-slide {
            transform-style: preserve-3d
        }

        .swiper-css-mode>.swiper-wrapper {
            overflow: auto;
            scrollbar-width: none;
            -ms-overflow-style: none
        }

        .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
            display: none
        }

        .swiper-css-mode>.swiper-wrapper>.swiper-slide {
            scroll-snap-align: start start
        }

        .swiper-css-mode.swiper-horizontal>.swiper-wrapper {
            scroll-snap-type: x mandatory
        }

        .swiper-css-mode.swiper-vertical>.swiper-wrapper {
            scroll-snap-type: y mandatory
        }

        .swiper-css-mode.swiper-free-mode>.swiper-wrapper {
            scroll-snap-type: none
        }

        .swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
            scroll-snap-align: none
        }

        .swiper-css-mode.swiper-centered>.swiper-wrapper::before {
            content: "";
            flex-shrink: 0;
            order: 9999
        }

        .swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
            scroll-snap-align: center center;
            scroll-snap-stop: always
        }

        .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
            margin-inline-start: var(--swiper-centered-offset-before)
        }

        .swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before {
            height: 100%;
            min-height: 1px;
            width: var(--swiper-centered-offset-after)
        }

        .swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
            margin-block-start: var(--swiper-centered-offset-before)
        }

        .swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before {
            width: 100%;
            min-width: 1px;
            height: var(--swiper-centered-offset-after)
        }

        .swiper-3d .swiper-slide-shadow,
        .swiper-3d .swiper-slide-shadow-bottom,
        .swiper-3d .swiper-slide-shadow-left,
        .swiper-3d .swiper-slide-shadow-right,
        .swiper-3d .swiper-slide-shadow-top {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10
        }

        .swiper-3d .swiper-slide-shadow {
            background: rgba(0, 0, 0, .15)
        }

        .swiper-3d .swiper-slide-shadow-left {
            background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
        }

        .swiper-3d .swiper-slide-shadow-right {
            background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
        }

        .swiper-3d .swiper-slide-shadow-top {
            background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
        }

        .swiper-3d .swiper-slide-shadow-bottom {
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
        }

        .swiper-lazy-preloader {
            width: 42px;
            height: 42px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -21px;
            margin-top: -21px;
            z-index: 10;
            transform-origin: 50%;
            box-sizing: border-box;
            border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
            border-radius: 50%;
            border-top-color: transparent
        }

        .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
        .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
            animation: swiper-preloader-spin 1s infinite linear
        }

        .swiper-lazy-preloader-white {
            --swiper-preloader-color: #fff
        }

        .swiper-lazy-preloader-black {
            --swiper-preloader-color: #000
        }

        @keyframes swiper-preloader-spin {
            0% {
                transform: rotate(0)
            }

            100% {
                transform: rotate(360deg)
            }
        }

        .swiper-scrollbar {
            border-radius: var(--swiper-scrollbar-border-radius, 10px);
            position: relative;
            -ms-touch-action: none;
            touch-action: none;
            background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
        }

        .swiper-scrollbar-disabled>.swiper-scrollbar,
        .swiper-scrollbar.swiper-scrollbar-disabled {
            display: none !important
        }

        .swiper-horizontal>.swiper-scrollbar,
        .swiper-scrollbar.swiper-scrollbar-horizontal {
            position: absolute;
            left: var(--swiper-scrollbar-sides-offset, 1%);
            bottom: var(--swiper-scrollbar-bottom, 4px);
            top: var(--swiper-scrollbar-top, auto);
            z-index: 50;
            height: var(--swiper-scrollbar-size, 4px);
            width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
        }

        .swiper-scrollbar.swiper-scrollbar-vertical,
        .swiper-vertical>.swiper-scrollbar {
            position: absolute;
            left: var(--swiper-scrollbar-left, auto);
            right: var(--swiper-scrollbar-right, 4px);
            top: var(--swiper-scrollbar-sides-offset, 1%);
            z-index: 50;
            width: var(--swiper-scrollbar-size, 4px);
            height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
        }

        .swiper-scrollbar-drag {
            height: 100%;
            width: 100%;
            position: relative;
            background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
            border-radius: var(--swiper-scrollbar-border-radius, 10px);
            left: 0;
            top: 0
        }

        .swiper-scrollbar-cursor-drag {
            cursor: move
        }

        .swiper-scrollbar-lock {
            display: none
        }

        /* Стили для слайдера в стиле Google Play */
        .google-play-slider {
            width: 100%;
            padding: 20px 0;
            background: transparent;
        }

        .google-play-slider .swiper {
            width: 100%;
            height: 100%;
        }

        .google-play-slider .swiper-slide {
            width: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .screenshot-item {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: #fff;
            cursor: pointer;
        }

        .screenshot-item:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .screenshot-item img {
            display: block;
            width: 100%;
            height: auto;
            max-width: 100%;
            object-fit: cover;
        }

        /* Размеры скриншотов как в Google Play */
        .screenshot-item.phone {
            width: 200px;
            height: 355px;
        }

        .screenshot-item.tablet {
            width: 280px;
            height: 355px;
        }

        /* Ваши стили для навигации */
        .design__slider-item {
            position: relative;
            transition: opacity .3s ease !important
        }

        .design__slider-inner {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: 2.25rem;
            margin-bottom: 1.5rem
        }

        .design__slider-navs {
            position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 2.5rem;
			max-width: 240px;
			margin-left: auto;
        }

        @media screen and (max-width:575.98px) {
            .design__slider-navs {
                max-width: none;
                width: 100%
            }
        }

        .design__slider-navs-item {
            position: relative;
            display: block;
            width: 6.75rem;
            height: 2rem;
            background: none;
            border: none;
            cursor: pointer;
        }

        .design__slider-navs-item:after {
            content: "";
            position: absolute;
            display: block;
            inset: 0;
            background: #fff;
            mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDI4IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJBcnJvdyAxIiBkPSJNMjcuMzUzNiA0Ljg1MzU2QzI3LjU0ODggNC42NTgyOSAyNy41NDg4IDQuMzQxNzEgMjcuMzUzNiA0LjE0NjQ1TDI0LjE3MTYgMC45NjQ0NjhDMjMuOTc2MyAwLjc2OTIwNiAyMy42NTk3IDAuNzY5MjA2IDIzLjQ2NDUgMC45NjQ0NjhDMjMuMjY5MiAxLjE1OTczIDIzLjI2OTIgMS40NzYzMSAyMy40NjQ1IDEuNjcxNTdMMjYuMjkyOSA0LjVMMjMuNDY0NSA3LjMyODQzQzIzLjI2OTIgNy41MjM2OSAyMy4yNjkyIDcuODQwMjcgMjMuNDY0NSA4LjAzNTU0QzIzLjY1OTcgOC4yMzA4IDIzLjk3NjMgOC4yMzA4IDI0LjE3MTYgOC4wMzU1NEwyNy4zNTM2IDQuODUzNTZaTS00LjM3MTE0ZS0wOCA1TDI3IDVMMjcgNEw0LjM3MTE0ZS0wOCA0TC00LjM3MTE0ZS0wOCA1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
            mask-position: 50% 50%;
            mask-repeat: no-repeat;
            -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDI4IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJBcnJvdyAxIiBkPSJNMjcuMzUzNiA0Ljg1MzU2QzI3LjU0ODggNC42NTgyOSAyNy41NDg4IDQuMzQxNzEgMjcuMzUzNiA0LjE0NjQ1TDI0LjE3MTYgMC45NjQ0NjhDMjMuOTc2MyAwLjc2OTIwNiAyMy42NTk3IDAuNzY5MjA2IDIzLjQ2NDUgMC45NjQ0NjhDMjMuMjY5MiAxLjE1OTczIDIzLjI2OTIgMS40NzYzMSAyMy40NjQ1IDEuNjcxNTdMMjYuMjkyOSA0LjVMMjMuNDY0NSA3LjMyODQzQzIzLjI2OTIgNy41MjM2OSAyMy4yNjkyIDcuODQwMjcgMjMuNDY0NSA4LjAzNTU0QzIzLjY1OTcgOC4yMzA4IDIzLjk3NjMgOC4yMzA4IDI0LjE3MTYgOC4wMzU1NEwyNy4zNTM2IDQuODUzNTZaTS00LjM3MTE0ZS0wOCA1TDI3IDVMMjcgNEw0LjM3MTE0ZS0wOCA0TC00LjM3MTE0ZS0wOCA1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
            -webkit-mask-position: 50% 50%;
            -webkit-mask-repeat: no-repeat;
            mask-size: contain;
            -webkit-mask-size: contain;
            transition: background .7s ease
        }

        .design__slider-navs-item:hover:after {
            background: #5198ec
        }

        .design__slider-navs-item.m--prev:after {
            transform: rotateY(180deg)
        }

        .design__slider-navs-stats {
            font-size: 1.5rem;
            font-weight: 700;
            color: #fff
        }

        /* Счетчик слайдов */
        .slider-counter {
            font-size: 1.5rem;
            font-weight: 700;
            color: #fff;
            margin: 0 15px;
			margin-top: -19px;
			display: none;
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .screenshot-item.phone {
                width: 160px;
                height: 284px;
            }

            .screenshot-item.tablet {
                width: 220px;
                height: 284px;
            }
        }

        @media (max-width: 480px) {
            .screenshot-item.phone {
                width: 140px;
                height: 248px;
            }

            .screenshot-item.tablet {
                width: 190px;
                height: 248px;
            }
        }